マップボックス内の特定の点のスタイルを変更したい

点が円として表示されているので、45.6987と34.34433 のような点があるとします。その点を正方形またはボックスのように表示したいと思います。マップボックス内の特定の点のスタイルを変更したい

2016-11-02 Gaurav Singh

以下は、カスタムCSSが使用されたhttps://www.mapbox.com/mapbox-gl-js/example/custom-marker-icons/のわずかな変更です。

画像はコメントアウトされ、DIVSは色付きです。指定されたGEOJSONのプロパティには「アイコンサイズ」が含まれていることに注意してください。これは「四角形」の幅と長さに使用されています。

要約すると、この例では、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>

出典

2017-02-21 16:14:58 kremzeek

マップボックス内の特定の点のスタイルを変更したい

答えて

関連する問題