#polygon #markers
Вопрос:
Я новичок в Mapbox. Недавно я начал с незначительных обновлений на html-страницах, которые все еще использовались mapbox.js и принудительная миграция на mapbox-gl-js была и остается для меня довольно сложной.
Я прочитал основные сведения о старом Api, чтобы иметь такой же или аналогичный вывод на html-странице. Затем, в конце концов, мне сказали, что моя редакторская работа довольно хороша, но этого недостаточно.
Теперь я должен решить проблему о том, как улучшить результаты. В основном мне нужно выполнить 3 задачи:
- во-первых: мне нужно нарисовать различные пользовательские маркеры (несколько значков в разных цветовых группах); [Я сделал это с помощью пользовательских изображений];
этот результат отображается только в Safari, а не в Chrome или Edge
- во-вторых: мне нужно нарисовать концентрические 4-6 кругов, каждый из которых набросан другим цветом, а также различные пользовательские маркеры, сделанные из изображений формата png; … [для этих задач я смог разместить только стандартные маркеры картографического поля разных цветов вместе с 5 концентрическими многоугольниками, набросанными одним цветом: я не смог получить оба элемента: концентрические многоугольники и изготовители на заказ] …
Этот код состоит из кругов и стандартных маркеров:
<!-- <!DOCTYPE html> --> <!-- geometries1-5-A2(1-53-AA).html --> <!-- geometries1-5-A2 .html --> <html> <head> <meta charset="utf-8" /> <title>Photo Contest 2022 Range Page</title> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <link href="https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css" rel="stylesheet"> <script src="https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js"></script> <style> body { margin: 0; padding: 0; } #map { position: absolute; top: 0; bottom: 0; width: 100%; } </style> </head> <body> <div id="map"></div> <script> // TO MAKE THE MAP APPEAR YOU MUST // ADD YOUR ACCESS TOKEN FROM // https://account.mapbox.com mapboxgl.accessToken = '-----placeyourtoken-----'; var map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/outdoors-v11', center: [12.3648, 46.0911], zoom: 8 }); // var marker1 = new mapboxgl.Marker({color: 'purple'}) .setLngLat([ 12.661743164062498, 46.03052428878426 ]) .addTo(map); var marker2 = new mapboxgl.Marker({color: 'yellow'}) .setLngLat([ 12.150878906250000, 46.09839225859763 ]) .addTo(map); var marker3 = new mapboxgl.Marker({color: 'white'}) .setLngLat([ 12.417669677734375, 46.18717293114449 ]) .addTo(map); var marker4 = new mapboxgl.Marker({color: 'purple'}) .setLngLat([ 12.32910400390625, 46.19020079600417 ]) .addTo(map); var marker5 = new mapboxgl.Marker({color: 'red'}) .setLngLat([ 11.86248779296875, 46.347875571446274 ]) .addTo(map); var marker6 = new mapboxgl.Marker({color: '#AA1234'}) .setLngLat([ 12.27235107421875, 46.14368574598159 ]) .addTo(map); var marker7 = new mapboxgl.Marker({color: '#A1234A'}) .setLngLat([ 11.739708618164062, 45.85434424945917 ]) .addTo(map); var marker8 = new mapboxgl.Marker({color: '#12AA34'}) .setLngLat([ 11.82566650390623, 45.90274089324607 ]) .addTo(map); var marker9 = new mapboxgl.Marker({color: 'green'}) .setLngLat([ 11.849098205566406, 46.055841025476504 ]) .addTo(map); var marker10 = new mapboxgl.Marker({color: 'gray'}) .setLngLat([ 11.865577697753904, 46.091805240572825 ]) .addTo(map); var marker11 = new mapboxgl.Marker({color: '#1234AA'}) .setLngLat([ 12.08221435546875, 45.904105344941705 ]) .addTo(map); var marker12 = new mapboxgl.Marker({color: 'red'}) .setLngLat([ 11.942825317382812, 45.813247201584616 ]) .addTo(map); // map.on('load', function () { map.addSource('photo-contest', { 'type': 'geojson', 'data': { "type": "FeatureCollection", "features": [ { "type": "Feature", "properties": { "stroke": "#ff9300", "stroke-width": 1.0, "stroke-opacity": 0.8, "fill": "#fffb00", "fill-opacity": 0.4 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 12.36236572265625, 46.619261036171515 ], [ 12.1014404296875, 46.57585481240773 ], [ 11.86798095703125, 46.50784482789971 ], [ 11.6839599609375, 46.38672781370433 ], [ 11.65374755859375, 46.2102496001872 ], [ 11.7059326171875, 46.0465484463062 ], [ 11.81854248046875, 45.89383147810289 ], [ 12.02178955078125, 45.748360302167434 ], [ 12.25799560546875, 45.66972459187521 ], [ 12.47772216796875, 45.64284803596584 ], [ 12.71942138671875, 45.67932023569538 ], [ 12.9364013671875, 45.74261022090534 ], [ 13.084716796874998, 45.80965764997408 ], [ 13.1671142578125, 45.93587062119052 ], [ 13.2110595703125, 46.09418614922648 ], [ 13.20831298828125, 46.221652456379104 ], [ 13.1835937500, 46.320378031062354 ], [ 13.11767578125, 46.39619977845332 ], [ 13.02703857421875, 46.47191632087041 ], [ 12.9144287109375, 46.532413816559455 ], [ 12.79632568359375, 46.581518465658014 ], [ 12.67547607421875, 46.60228013300284 ], [ 12.53265380859375, 46.617374532060765 ], [ 12.36236572265625, 46.619261036171515 ] ] ] } }, { "type": "Feature", "properties": { "stroke": "#929292", "stroke-width": 2.5, "stroke-opacity": 1, "fill": "#929292", "fill-opacity": 0.2 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 12.391204833984375, 46.44448122948704 ], [ 12.323913574218750, 46.42649901925300 ], [ 12.263488769531250, 46.40567009937370 ], [ 12.209930419921875, 46.379149058330746 ], ... [ 12.680969238281250, 46.41608555379577 ], [ 12.476348876953125, 46.437856895024204 ], [ 12.391204833984375, 46.44448122948704 ] ] ] } }, { "type": "Feature", "properties": { "stroke": "#0433ff", "stroke-width": 2.5, "stroke-opacity": 1, "fill": "#00c7fc", "fill-opacity": 0.2 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 12.41455078125, 46.326068311712596 ], ... [ 12.48870849609375, 46.320378031062354 ], [ 12.41455078125, 46.326068311712596 ] ] ] } }, { "type": "Feature", "properties": { "stroke": "#ff2600", "stroke-width": 1.5, "stroke-opacity": 1, "fill": "#ff2600", "fill-opacity": 0.16 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 12.417297363281250, 46.242551543128094 ], [ 12.363739013671875, 46.229253045075275 ], ... [ 12.473602294921873, 46.23780244949404 ], [ 12.41729736328125, 46.242551543128094 ] ] ] } }, { "type": "Feature", "properties": { "marker-color": "#ff2600", "marker-size": "medium", "marker-symbol": "", "marker-id": "05" }, "geometry": { "type": "Point", "coordinates": [ 12.661743164062498, 46.03052428878426 ] } }, { "type": "Feature", "properties": { "marker-color": "#fffb00", "marker-size": "medium", "marker-symbol": "" }, "geometry": { "type": "Point", "coordinates": [ 11.86248779296875, 46.347875571446274 ] } }, { "type": "Feature", "properties": { "marker-color": "#fffb00", "marker-size": "medium", "marker-symbol": "", "marker-id": 62 }, "geometry": { "type": "Point", "coordinates": [ 12.27235107421875, 46.14368574598159 ] } }, { "type": "Feature", "properties": { "marker-color": "#7e7e7e", "marker-size": "medium", "marker-symbol": "", "marker-id": 100 }, "geometry": { "type": "Point", "coordinates": [ 11.739708618164062, 45.85434424945917 ] } }, { "type": "Feature", "properties": { "marker-color": "#7e7e7e", "marker-size": "medium", "marker-symbol": "", "marker-id": 103 }, "geometry": { "type": "Point", "coordinates": [ 11.849098205566406, 46.055841025476504 ] } }, { "type": "Feature", "properties": { "marker-color": "#7e7e7e", "marker-size": "medium", "marker-symbol": "", "marker-id": 104 }, "geometry": { "type": "Point", "coordinates": [ 11.942825317382812, 45.813247201584616 ] } }, { "type": "Feature", "properties": { "marker-color": "#ff9300", "marker-size": "medium", "marker-symbol": "", "marker-id": 27 }, "geometry": { "type": "Point", "coordinates": [ 12.869453430175781, 46.438330088481734 ] } }, { "type": "Feature", "properties": { "marker-color": "#ff9300", "marker-size": "medium", "marker-symbol": "", "marker-id": 29 }, "geometry": { "type": "Point", "coordinates": [ 12.58228729248047, 46.41800450688004 ] } }, { "type": "Feature", "properties": { "marker-color": "#ff2600", "marker-size": "medium", "marker-symbol": "", "marker-id": "02" }, "geometry": { "type": "Point", "coordinates": [ 12.357099627685548, 46.126408682156544 ] } }, { "type": "Feature", "properties": { "marker-color": "#ff2600", "marker-size": "medium", "marker-symbol": "", "marker-id": "01" }, "geometry": { "type": "Point", "coordinates": [ 12.480649108886716, 46.10902187095679 ] } }, { "type": "Feature", "properties": { "marker-color": "#ff9300", "marker-size": "medium", "marker-symbol": "", "marker-id": 28 }, "geometry": { "type": "Point", "coordinates": [ 12.6913330078125, 46.15261512930023 ] } }, { "type": "Feature", "properties": { "marker-color": "#ff9300", "marker-size": "medium", "marker-symbol": "", "marker-id": 20 }, "geometry": { "type": "Point", "coordinates": [ 12.408935546875, 46.07673288302042 ] } }, { "type": "Feature", "properties": { "marker-color": "#ff2600", "marker-size": "medium", "marker-symbol": "", "marker-id": "08" }, "geometry": { "type": "Point", "coordinates": [ 13.0352783203125, 46.299888832158466 ] } }, { "type": "Feature", "properties": { "marker-color": "#fe2400", "marker-size": "medium", "marker-symbol": "", "marker-id": "09" }, "geometry": { "type": "Point", "coordinates": [ 13.121163696289062, 46.29281024876741 ] } }, { "type": "Feature", "properties": { "marker-color": "#ff9300", "marker-size": "medium", "marker-symbol": "", "marker-id": 69 }, "geometry": { "type": "Point", "coordinates": [ 12.60008898925781, 46.10095536842305 ] } }, { "type": "Feature", "properties": { "marker-color": "#7e7e7e", "marker-size": "medium", "marker-symbol": "", "marker-id": 108 }, "geometry": { "type": "Point", "coordinates": [ 11.76361083984375, 46.428392162921234 ] } }, { "type": "Feature", "properties": { "marker-color": "#7e7e7e", "marker-size": "medium", "marker-symbol": "", "marker-id": 105 }, "geometry": { "type": "Point", "coordinates": [ 11.726531982421875, 46.3507193554773 ] } }, { "type": "Feature", "properties": { "stroke": "#555555", "stroke-width": 2, "stroke-opacity": 1, "fill": "#555555", "fill-opacity": 0.1 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 11.88446044921875, 46.721034661295676 ], [ 11.664733886718748, 46.702202151643455 ], ... ], [ 11.88446044921875, 46.721034661295676 ] ] ] } }, { "type": "Feature", "properties": { "marker-color": "#7e7e7e", "marker-size": "medium", "marker-symbol": "", "marker-id": 109 }, "geometry": { "type": "Point", "coordinates": [ 11.734085083007812, 46.479009353404926 ] } }, { "type": "Feature", "properties": { "marker-color": "#7e7e7e", "marker-size": "medium", "marker-symbol": "", "marker-id": 110 }, "geometry": { "type": "Point", "coordinates": [ 11.8487548828125, 46.54752767224308 ] } } ] } }); map.addLayer({ 'id': 'photocontest-boundary', 'type': 'line', 'source': 'photo-contest', 'paint': { 'line-color': 'rgba(255, 0, 0, 1)', 'line-width': 2 }, 'filter': ['==', '$type', 'Polygon'] }); }); map.addLayer({ 'id': 'points', 'type': 'symbol', 'source': 'photo-contest', 'paint':{}, }) // _begins Add zoom and rotation controls to the map. map.addControl(new mapboxgl.NavigationControl()); // _ends Add zoom and rotation controls to the map. </script> </body> </html>
the result I am still looking for is to display both samples images in a single file
- третье: в последнем задании я должен ввести свайп между картами в качестве нового элемента веб-страницы. [У меня было всего лишь немного опыта переключения между салфетками и стилями при плохом контроле макета html-страницы]. Хотя я нашел способ объединить различные цветные группы стандартных маркеров картографических полей и полигонов, для второй задачи все еще требуется навык, которого у меня нет: понять, какой правильный способ объединить цветные пользовательские маркеры значков и концентрические круги.
Большую часть времени я редактирую эти файлы на Mac, но сегодня я опубликовал это с этого компьютера, где я нахожу несколько иной вывод некоторых аспектов или вообще не отображаю их в Chrome или Edge