Мне трудно обернуть голову вокруг MapBox GL. Я пришел из истории листовки, и мне трудно понять некоторые из абстракций.
Я работаю с большим количеством данных журнала поездок GPS, и мне нужно делать такие вещи, как отображение фрагмента поездки, выделение его части цветом, нанесение на него маркеров с помощью пользовательских выводов. Другая распространенная функция - пометить все юниты на карте с помощью булавок, которые отличаются по своему статусу. Например: Last Reported, Fuel Level, et c.
. Для создания маркеров у меня в настоящее время есть вспомогательный объект, который выплевывает js.
public string EmitJs()
{
Debug.WriteLine("Emit Marker");
StringBuilder sb = new StringBuilder();
sb.AppendFormat("var container{0} = document.createElement('div');", UniqueId).AppendLine();
sb.AppendFormat("container{0}.className = '{1}';", UniqueId, ContainerCss).AppendLine();
sb.AppendFormat("var popup{0} = new mapboxgl.Popup({{ offset: 25 }}).setHTML(", UniqueId).AppendLine(); // escape { } with {{ }} in String.Format
sb.AppendFormat(" \'{0}\'", Point.Label).AppendLine();
sb.AppendLine(");");
sb.AppendFormat("var marker{0} = new mapboxgl.Marker(container{1}, {{", UniqueId, UniqueId).AppendLine();
sb.AppendLine(" anchor: 'bottom'");
sb.AppendLine("})");
sb.AppendFormat(" .setLngLat({0})", Point.EmitForMapBox()).AppendLine();
sb.AppendFormat(" .setPopup(popup{0})", UniqueId).AppendLine();
sb.AppendLine(" .addTo(map);");
sb.AppendLine();
return sb.ToString();
}
, это возвращает:
var container5 = document.createElement('div');
container5.className = 'marker marker-pu-green';
var popup5 = new mapboxgl.Popup({ offset: 25 }).setHTML(
'<p><b>Name:</b> 1310 PU2003<br /><b>Last Reported:</b> 25/03/2020 11:16:35<br /><b>Last Status:</b> Operating</p>'
);
var marker5 = new mapboxgl.Marker(container5, {
anchor: 'bottom'
})
.setLngLat([151.047211,-32.537003])
.setPopup(popup5)
.addTo(map);
Позволяет отображать изображения, наложенные на карту, с правилами CSS. Это довольно просто.
Geo Json FeatureCollection, содержит Feature's, которые представляют отдельные маркеры. Я вижу, что свойства значка в объекте Layer предназначены для представления именованных значений в некоторой таблице спрайтов, но, черт побери, если я смогу понять, где это и как его загрузить. Я был через всю Студию и ее документацию. Кажется, это относится к свойству 'sprites': 'path to file' json, которое вы не можете установить или загрузить.
Кроме того, оно хочет, чтобы спрайты были в формате SVG, несмотря на приведение их обратно в растр. как PNG. Это другой вопрос, но мне нужно преобразовать кучу PNG в формат SVG, если я когда-нибудь получу эту работу.
Вопрос
Как сделать Я добавляю собственные спрайты в свой стиль MapBox, чтобы я мог ссылаться на них в свойствах значка Geo Json.
** Редактировать 27 марта 202 **
Следующее вырезано из страницы. Полилинии не включены (они работают хорошо), только линии, чтобы попытаться заставить слой символов работать. Пути к изображениям являются локальными для моей среды разработки и действительны. Они будут переписаны при перемещении в продукт.
<script id="mapScript" type="text/javascript">
var baseUrl = '/';
mapboxgl.accessToken = '[snip]';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/fleetlogixmaps/ck6r4knm10smq1irxvnvfmq1b',
center: [148.381332397461,-21.4777641296387],
setMinZoom: 13,
setMaxZoom: 18,
zoom: 15,
});
map.loadImage('http://localhost:7933/Images/pin_path_start_128x128.png', function(error, image) {
if (error) throw error;
map.addImage('pathStart', image);
});
map.loadImage('http://localhost:7933/Images/pin_path_end_128x128.png', function(error, image) {
if (error) throw error;
map.addImage('pathEnd', image);
});
map.loadImage('http://localhost:7933/Images/pin_event_start_128x128.png', function(error, image) {
if (error) throw error;
map.addImage('eventStart', image);
});
map.loadImage('http://localhost:7933/Images/pin_event_end_128x128.png', function(error, image) {
if (error) throw error;
map.addImage('eventEnd', image);
});
var markers = {
'type': 'FeatureCollection',
'features': [
{
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates':
[148.370483398438,-21.4804000854492],
'properties': {
'title': 'Path Start',
'icon': 'pathStart'
}
}
},
{
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates':
[148.381332397461,-21.4777641296387],
'properties': {
'title': 'Event Start',
'icon': 'eventStart'
}
}
},
{
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates':
[148.385375976563,-21.4819965362549],
'properties': {
'title': 'Event End',
'icon': 'eventEnd'
}
}
},
{
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates':
[148.393402099609,-21.4885864257813],
'properties': {
'title': 'Path End',
'icon': 'pathEnd'
}
}
}
]
};
map.on('load', function() {
map.addLayer({
'id': 'markers',
'source': 'markerSrc',
'type': 'symbol',
'layout': {
'icon-image': ['get', 'icon'],
'icon-size': 0.25,
},
});
});
</script>