Question

假设我有点像45.6987和34.34433 现在这个点显示为圆形我希望显示该点像方形或方框。

Answer 1

以下是https://www.mapbox.com/mapbox-gl-js/example/custom-marker-icons/的略微修改，其中使用了自定义css。

图像被注释掉，并且使用了带颜色的DIVS。请注意，给定GEOJSON的属性包括＆＃34; iconsize＆＃34; - 这用于＆＃39;正方形的宽度和长度。

总而言之，此示例使用 document.createElement 为您的需要创建自定义标记。如果图层中有更多内在选项（如正方形等）而不仅仅是圆圈来表示地图上的点，那将会很棒。

- 确保添加您的TOKEN以使代码正常工作。

  <!DOCTYPE html>
   <html>
   <head>
       <meta charset='utf-8' />
       <title></title>
       <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
       <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.js'></script>
       <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.css' rel='stylesheet' />
       <style>
           body { margin:0; padding:0; }
           #map { position:absolute; top:0; bottom:0; width:100%; }
       </style>
   </head>
   <body>

   <style>
   .divMarker{
       display: block;
       cursor: pointer;
     width: 300px; 
     background-color: red;
     height: 100px; 
     box-shadow: 10px 10px 5px #888888;
   }
   </style>

   <div id='map'></div>

   <script>
   mapboxgl.accessToken = '<ADD TOKEN HERE>';
   var geojson = {
       "type": "FeatureCollection",
       "features": [
           {
               "type": "Feature",
               "properties": {
                   "message": "Foo",
                   "iconSize": [60, 60]
               },
               "geometry": {
                   "type": "Point",
                   "coordinates": [
                       -66.324462890625,
                       -16.024695711685304
                   ]
               }
           },
           {
               "type": "Feature",
               "properties": {
                   "message": "Bar",
                   "iconSize": [50, 50]
               },
               "geometry": {
                   "type": "Point",
                   "coordinates": [
                       -61.2158203125,
                       -15.97189158092897
                   ]
               }
           },
           {
               "type": "Feature",
               "properties": {
                   "message": "Baz",
                   "iconSize": [40, 40]
               },
               "geometry": {
                   "type": "Point",
                   "coordinates": [
                       -63.29223632812499,
                       -18.28151823530889
                   ]
               }
           }
       ]
   };

   var map = new mapboxgl.Map({
       container: 'map',
       style: 'mapbox://styles/mapbox/streets-v9',
       center: [-65.017, -16.457],
       zoom: 5
   });

   // add markers to map
   geojson.features.forEach(function(marker) {
       // create a DOM element for the marker
       var el = document.createElement('div');
       el.className = 'divMarker';
    //   el.style.backgroundImage = 'url(https://placekitten.com/g/' + marker.properties.iconSize.join('/') + '/)';
       el.style.width = marker.properties.iconSize[0] + 'px';
       el.style.height = marker.properties.iconSize[1] + 'px';

       el.addEventListener('click', function() {
           window.alert(marker.properties.message);
       });

       // add marker to map
       new mapboxgl.Marker(el, {offset: [-marker.properties.iconSize[0] / 2, -marker.properties.iconSize[1] / 2]})
           .setLngLat(marker.geometry.coordinates)
           .addTo(map);
   });
   </script>

   </body>
   </html>

我想改变mapbox中特定点的样式

1 个答案: