Отображение пользовательского маркера значка из векторных плиток Mapbox - PullRequest
Новая
       28

Отображение пользовательского маркера значка из векторных плиток Mapbox

0 голосов
/ 23 апреля 2020

Я использую mapbox gl javascript. У меня есть большие данные geo json, которые содержат пару точек (широта, долгота) и некоторые свойства. Я хочу загрузить большой geo json в mapbox studio и преобразовать его в векторные плитки.

Следующая важная задача для меня - загрузить векторный набор плиток, используя mapbox gl javascript, и показать собственный значок маркера для точки в векторных плитках. Подскажите, пожалуйста, как мне это сделать?

Ответы [ 3 ]

0 голосов
/ 26 апреля 2020

Здесь объясняются настройки пользовательских маркеров: https://docs.mapbox.com/mapbox-gl-js/example/custom-marker-icons/

Существуют разные способы отображения набора плиток с его маркерами. Не могли бы вы быть более точным в том, что вы пытаетесь сделать? Вы хотите отобразить их с веб-страницы?

Тем временем вы можете попробовать загрузить Geo JSON в новый набор плиток в вашей учетной записи Mapbox Studio. Затем создайте новый стиль> новый слой> выберите данные в вашем наборе плиток.

На этом этапе вы помещаете данные в тип Symbol , затем go to style> icon и выберите свой пользовательский значок, который вы ранее загрузили, с помощью кнопки Изображения в правой верхней части редактора.

Приятного мужества,

N.

0 голосов
/ 27 апреля 2020

Пожалуйста, посмотрите ответ на мой блок кода, чтобы загрузить пользовательское изображение для слоя. Примечание: Я использую векторный источник данных. Исходные данные состоят из точек (пара Lat Lng).

Прикрепленное изображение для справки. введите описание изображения здесь 

        map.addSource('ccc_location', {
            type: 'vector',
            url: 'mapbox://aciapprover111.4jkdyq5t'
        });
        map.loadImage('@Url.Content("~/Content/assets/img/green.png")', function (error, green) { //this is where we load the image file
            if (error) throw error;
            map.addImage("custom-green", green); //this is where we name the image file we are loading
            map.addLayer({
                'id': 'CCCLocations_VGO',
                'type': 'symbol',
                'source': 'ccc_location',
                "filter": ["all", ["==", "type", "VGO"]],
                'source-layer': 'CCCLocations-bgcof4',
                'layout': {
                    'icon-image': "custom-green",
                    'icon-size': 0.65,
                    'icon-allow-overlap': true
                }
            });
        });
0 голосов
/ 24 апреля 2020

Хорошее место для начала работы с некоторыми из Mapbox-GL- JS примеров и чтением документации .

...