polygon - 自定义标记png文件和多边形不能同时显示？或者怎么做？

问题描述

我是 Mapbox 的新手。我最近开始对仍在使用 mapbox.js 的 html 页面进行小幅更新，并且强制迁移到 mapbox-gl-js 对我来说一直并且仍然非常困难。

我阅读了有关旧 Api 的要点，以便在 html 页面上获得相同或相似的输出。然后，最后，有人告诉我，我的编辑工作很好，但这还不够。

现在我应该解决如何改善结果的问题。主要我必须执行3个任务：

首先：我需要绘制不同的自定义标记（不同颜色组中的几个图标）；[我已经用定制的图像做到了]；

此结果仅显示在 Safari 上，而不显示在 Chrome 或 Edge 中

第二：我需要绘制 4 到 6 个同心圆，每个圆都用不同的颜色绘制，以及由 png 格式图像制成的不同自定义标记；... [对于这些任务，我只能放置各种颜色的标准地图框标记以及用一种颜色绘制的 5 个同心多边形：我无法同时获得这两个项目：同心多边形和自定义制造商] ...</p>

此代码将圆圈和标准标记放在一起：

 <!-- <!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>

我仍在寻找的结果是在单个文件中显示两个示例图像

第三：在最后一个任务中，我应该介绍在地图之间滑动作为网页的新奇项目。[我只有一点滑动和样式切换的经验，对 html 页面布局的控制很差]。虽然我找到了一种将不同颜色的标准 Mapbox 标记和多边形组放在一起的方法，但第二个任务仍然需要我没有的技能：了解哪种方法是把彩色自定义图标标记和同心圆放在一起的正确方法.

大多数时候我在 Mac 上编辑这些文件，但今天我从这台电脑上发布了这个，我发现某些方面的输出略有不同，或者在 Chrome 或 Edge 中根本没有显示

标签： polygonmarkers

polygon - 自定义标记png文件和多边形不能同时显示？或者怎么做？

问题描述

解决方案

推荐阅读