MapboxGL JS — тип слоя Shape

У меня есть карта с источником векторной плитки, содержащей тысячи точек геоджсона. Я могу отображать точки на карте, показывая круг для каждой из них, используя круг.

Я хотел бы сделать то же самое, но используя другие формы, такие как квадрат и треугольник. Разве нет встроенного способа сделать это? Каковы мои варианты?


person Jonathan Hartnagel    schedule 19.01.2017    source источник


Ответы (1)


В случае, если это имеет какое-либо значение, это то, что я сделал:

  1. Я создал набор изображений svg разных цветов, отредактировав значки формы маки, представленные на https://www.mapbox.com/maki-icons/editor/
  2. Я преобразовал их в файл спрайта jpg и дескриптор json, используя https://github.com/mapbox/spritezero-cli
  3. Я создал стиль, полученный из стилей, предоставленных mapbox, чтобы использовать свой собственный спрайт, и обработал этот стиль с помощью https://github.com/klokantech/tileserver-gl
  4. В моей конфигурации слоя я использовал слой типа «символ» и выбрал соответствующий значок, передав его имя в свойствах макета «icon-image»: «green-triangle-11»

Я признаю, что отобразить зеленый треугольник на карте довольно сложно!


Изменить (18-07-2017): я обнаружил, что вы можете загрузить любое изображение и отобразить его на карте, оно не обязательно должно быть частью стиля. Я не уверен, добавил ли Mapbox это недавно или я пропустил это до сих пор. Вот оно :

map.loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Cat_silhouette.svg/400px-Cat_silhouette.svg.png', (error, image) => {
    if (error) throw error;
    map.addImage('cat', image);
    map.addLayer({
        "id": "points",
        "type": "symbol",
        "source": {
            "type": "geojson",
            "data": {
                "type": "FeatureCollection",
                "features": [{
                    "type": "Feature",
                    "geometry": {
                        "type": "Point",
                        "coordinates": [0, 0]
                    }
                }]
            }
        },
        "layout": {
            "icon-image": "cat",
            "icon-size": 0.25
        }
    });
});

Взято с https://www.mapbox.com/mapbox-gl-js/example/add-image/

person Jonathan Hartnagel    schedule 23.01.2017