मैं MapBox में खास बिंदु की शैली को बदल चाहते हैं

वोट
2

मान लीजिए मैं 45.6987 और ३४.३४,४३३ की तरह बात है अब चक्र के रूप में मैं वर्ग या बॉक्स की तरह उस समय प्रदर्शित करना चाहते हैं उस समय दिखाया गया है।

02/11/2016 को 03:39
का स्रोत उपयोगकर्ता
अन्य भाषाओं में...                            


1 जवाब

वोट
1

निम्न में से एक मामूली संशोधन है https://www.mapbox.com/mapbox-gl-js/example/custom-marker-icons/ जहां एक कस्टम सीएसएस इस्तेमाल किया गया था।

छवियों बाहर टिप्पणी की है और divs w / रंग इस्तेमाल कर रहे हैं कर रहे हैं। ध्यान दें कि यह देखते हुए GeoJSON के गुणों "iconsize" में शामिल हैं - इस चौड़ाई और 'वर्ग' की लंबाई के लिए इस्तेमाल किया गया था।

संक्षेप में, इस उदाहरण का उपयोग कर रहा document.createElement अपनी जरूरत के लिए कस्टम मार्कर बनाने के लिए। यह एक नक्शे पर अंक इंगित करने के लिए सिर्फ हलकों की अगर वहाँ थे परतों में अधिक आंतरिक विकल्प (वर्गों की तरह, आदि) बहुत अच्छा होगा बजाय।

कोड काम करने के लिए अपने टोकन जोड़ना सुनिश्चित बनाओ।

  <!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>
21/02/2017 को 14:14
का स्रोत उपयोगकर्ता

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more