如何解决自定义标记png文件和多边形不能同时显示？或者怎么做？
我是 Mapbox 的新手。我最近开始对仍在使用 mapbox.js 的 html 页面进行小幅更新，并且强制迁移到 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 },"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 ] ] ] } },"properties": { "stroke": "#0433ff","fill": "#00c7fc","coordinates": [ [ [ 12.41455078125,46.326068311712596 ],... [ 12.48870849609375,[ 12.41455078125,46.326068311712596 ] ] ] } },"properties": { "stroke": "#ff2600","stroke-width": 1.5,"fill": "#ff2600","fill-opacity": 0.16 },"coordinates": [ [ [ 12.417297363281250,46.242551543128094 ],[ 12.363739013671875,46.229253045075275 ],... [ 12.473602294921873,46.23780244949404 ],[ 12.41729736328125,46.242551543128094 ] ] ] } },"properties": { "marker-color": "#ff2600","marker-size": "medium","marker-symbol": "","marker-id": "05" },"geometry": { "type": "Point","coordinates": [ 12.661743164062498,46.03052428878426 ] } },"properties": { "marker-color": "#fffb00","marker-symbol": "" },"coordinates": [ 11.86248779296875,46.347875571446274 ] } },"marker-id": 62 },"coordinates": [ 12.27235107421875,46.14368574598159 ] } },"properties": { "marker-color": "#7e7e7e","marker-id": 100 },"coordinates": [ 11.739708618164062,45.85434424945917 ] } },"marker-id": 103 },"coordinates": [ 11.849098205566406,46.055841025476504 ] } },"marker-id": 104 },"coordinates": [ 11.942825317382812,45.813247201584616 ] } },"properties": { "marker-color": "#ff9300","marker-id": 27 },"coordinates": [ 12.869453430175781,46.438330088481734 ] } },"marker-id": 29 },"coordinates": [ 12.58228729248047,46.41800450688004 ] } },"marker-id": "02" },"coordinates": [ 12.357099627685548,46.126408682156544 ] } },"marker-id": "01" },"coordinates": [ 12.480649108886716,46.10902187095679 ] } },"marker-id": 28 },"coordinates": [ 12.6913330078125,46.15261512930023 ] } },"marker-id": 20 },"coordinates": [ 12.408935546875,46.07673288302042 ] } },"marker-id": "08" },"coordinates": [ 13.0352783203125,46.299888832158466 ] } },"properties": { "marker-color": "#fe2400","marker-id": "09" },"coordinates": [ 13.121163696289062,46.29281024876741 ] } },"marker-id": 69 },"coordinates": [ 12.60008898925781,46.10095536842305 ] } },"marker-id": 108 },"coordinates": [ 11.76361083984375,46.428392162921234 ] } },"marker-id": 105 },"coordinates": [ 11.726531982421875,46.3507193554773 ] } },"properties": { "stroke": "#555555","stroke-width": 2,"fill": "#555555","fill-opacity": 0.1 },"coordinates": [ [ [ 11.88446044921875,46.721034661295676 ],[ 11.664733886718748,46.702202151643455 ],... ],[ 11.88446044921875,46.721034661295676 ] ] ] } },"marker-id": 109 },"coordinates": [ 11.734085083007812,46.479009353404926 ] } },"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,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 页面布局的控制很差]。虽然我已经找到了一种将不同颜色的标准 Mapbox 标记和多边形组放在一起的方法，但第二个任务仍然需要一项我没有的技能：了解哪种方法是将彩色自定义图标标记和同心圆放在一起的正确方法.
大多数时候我在 Mac 上编辑这些文件，但今天我从这台 PC 上发布了这个，我发现某些方面的输出略有不同，或者在 Chrome 或 Edge 中根本没有显示
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
