相關文檔： [mapbox官網](https://www.mapbox.com/) [mapboxgl api](https://www.mapbox.com/mapbox-gl-js/api/) [turf.js api](http://turfjs.org/) 地理空間解析類庫 > 因為mapbox是國外地圖，都是英文文檔，而且與國內地圖的api有出處，沒有國內的直觀，所以在這里記錄一下項目中已用到的方法/屬性，方便以后查找使用。 ## 一、實例化化地圖 [https://www.mapbox.com/mapbox-gl-js/example/simple-map/](https://www.mapbox.com/mapbox-gl-js/example/simple-map/) ~~~ <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.43.0/mapbox-gl.js'></script> <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.43.0/mapbox-gl.css' rel='stylesheet' /> <div id='map'></div> mapboxgl.accessToken = 'undefined'; var map = new mapboxgl.Map({ container: 'map', // container id style: 'mapbox://styles/mapbox/streets-v9', // stylesheet location center: [-74.50, 40], // starting position [lng, lat] zoom: 9 // starting zoom }); ~~~ ## 二、繪制標記 [https://www.mapbox.com/mapbox-gl-js/example/custom-marker-icons/](https://www.mapbox.com/mapbox-gl-js/example/custom-marker-icons/) ~~~ var divNode = document.createElement('div'); div.innerHTML = '<strong>hello</strong>'; new mapboxgl.Marker(divNode, {offset: [-10, -10]}).setLngLat([23.123123, 115.321421]).addTo(map); ~~~ ## 三、繪制線 [https://www.mapbox.com/mapbox-gl-js/example/geojson-line/](https://www.mapbox.com/mapbox-gl-js/example/geojson-line/) ~~~ map.addLayer({ "id": "route", "type": "line", "source": { "type": "geojson", "data": { "type": "Feature", "properties": {}, "geometry": { "type": "LineString", "coordinates": [ [-122.48369693756104, 37.83381888486939], [-122.48348236083984, 37.83317489144141], [-122.48339653015138, 37.83270036637107], [-122.48356819152832, 37.832056363179625] ] } } }, "layout": { "line-join": "round", "line-cap": "round" }, "paint": { "line-color": "#888", "line-width": 8 } }); ~~~ ## 四、繪制區域 [https://www.mapbox.com/mapbox-gl-js/example/geojson-polygon/](https://www.mapbox.com/mapbox-gl-js/example/geojson-polygon/) ~~~ map.addLayer({ 'id': 'maine', 'type': 'fill', 'source': { 'type': 'geojson', 'data': { 'type': 'Feature', 'geometry': { 'type': 'Polygon', 'coordinates': [[[-67.13734351262877, 45.137451890638886], [-66.96466, 44.8097], [-68.03252, 44.3252], [-69.06, 43.98], [-70.11617, 43.68405], [-70.64573401557249, 43.090083319667144], [-70.75102474636725, 43.08003225358635], [-70.79761105007827, 43.21973948828747], [-70.98176001655037, 43.36789581966826], [-70.94416541205806, 43.46633942318431], [-71.08482, 45.3052400000002], [-70.6600225491012, 45.46022288673396], [-70.30495378282376, 45.914794623389355], [-70.00014034695016, 46.69317088478567], [-69.23708614772835, 47.44777598732787], [-68.90478084987546, 47.184794623394396], [-68.23430497910454, 47.35462921812177], [-67.79035274928509, 47.066248887716995], [-67.79141211614706, 45.702585354182816], [-67.13734351262877, 45.137451890638886]]] } } }, 'layout': {}, 'paint': { 'fill-color': '#088', 'fill-opacity': 0.8 } }); ~~~ > 注意：首尾坐標點要一樣 ## 五、繪制信息層 [https://www.mapbox.com/mapbox-gl-js/example/popup/](https://www.mapbox.com/mapbox-gl-js/example/popup/) ~~~ var popup = new mapboxgl.Popup({closeOnClick: false}) .setLngLat([-96, 37.8]) .setHTML('<h1>Hello World!</h1>') .addTo(map); ~~~ ## 六、修改主題 [https://www.mapbox.com/mapbox-gl-js/example/setstyle/](https://www.mapbox.com/mapbox-gl-js/example/setstyle/) ~~~ map.setStyle('mapbox://styles/mapbox/dark-v9'); ~~~ ## 七、添加WMS層 [https://www.mapbox.com/mapbox-gl-js/example/wms/](https://www.mapbox.com/mapbox-gl-js/example/wms/) ~~~ map.addLayer({ 'id': 'wms-test-layer', 'type': 'raster', 'source': { 'type': 'raster', 'tiles': [ 'https://geodata.state.nj.us/imagerywms/Natural2015?bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.1.1&request=GetMap&srs=EPSG:3857&width=256&height=256&layers=Natural2015' ], 'tileSize': 256 }, 'paint': {} }, 'aeroway-taxiway'); ~~~ ## 八、地圖旋轉 ~~~ map.rotateTo(70, {animate: false}); ~~~ ## 九、獲取layer、刪除layer ~~~ map.getLayer(layerId); map.removeLayer(layerId); ~~~ ## 十、添加event、刪除event ~~~ function handle() { // ... } map.on('click', layerId, handle); map.off('click', layerId, handle) ~~~ ## 十一、修改鼠標 [https://www.mapbox.com/mapbox-gl-js/example/center-on-symbol/](https://www.mapbox.com/mapbox-gl-js/example/center-on-symbol/) ~~~ map.on('mouseenter', 'symbols', function () { map.getCanvas().style.cursor = 'pointer'; }); map.on('mouseleave', 'symbols', function () { map.getCanvas().style.cursor = ''; }); ~~~ ## 十二、顯示layer、隱藏layer [https://www.mapbox.com/mapbox-gl-js/example/toggle-layers/](https://www.mapbox.com/mapbox-gl-js/example/toggle-layers/) ~~~ map.setLayoutProperty(layerId, 'visibility', 'visible'); map.setLayoutProperty(layerId, 'visibility', 'none'); ~~~ ## 十三、禁止雙擊縮放、禁止傾斜旋轉、修改logo位置、隱藏地圖所屬信息 ~~~ var map = new mapboxgl.Map({ container: 'map', // container id style: 'mapbox://styles/mapbox/streets-v9', // stylesheet location center: [-74.50, 40], // starting position [lng, lat] zoom: 9, // starting zoom logoPosition: 'bottom-right', // 修改logo位置 doubleClickZoom: false, // 禁止雙擊縮放 pitchWithRotate: false, // 禁止繞x軸旋轉 attributionControl: false // 隱藏地圖所屬信息 }); ~~~ ## 十四、動態繪制區域 [https://www.mapbox.com/mapbox-gl-js/example/mapbox-gl-draw/](https://www.mapbox.com/mapbox-gl-js/example/mapbox-gl-draw/)  ## 十五、修改一條線中不同線段的顏色 [https://www.mapbox.com/mapbox-gl-js/example/data-driven-lines/](https://www.mapbox.com/mapbox-gl-js/example/data-driven-lines/) ~~~ var red = '#F7455D'; var blue = '#33C9EB'; map.addLayer({ 'id': 'lines', 'type': 'line', 'source': { 'type': 'geojson', 'data': { 'type': 'FeatureCollection', 'features': [{ 'type': 'Feature', 'properties': { 'color': red, }, 'geometry': { 'type': 'LineString', 'coordinates': [ [-122.4833858013153, 37.829607404976734], [-122.4830961227417, 37.82932776098012], [-122.4830746650696, 37.82932776098012], [-122.48218417167662, 37.82889558180985], [-122.48218417167662, 37.82890193740421], [-122.48221099376678, 37.82868372835086], [-122.4822163581848, 37.82868372835086], [-122.48205006122589, 37.82801003030873] ] } }, { 'type': 'Feature', 'properties': { 'color': blue }, 'geometry': { 'type': 'LineString', 'coordinates': [ [-122.48393028974533, 37.829471820141016], [-122.48395174741744, 37.82940826466351], [-122.48395174741744, 37.829412501697064], [-122.48423874378203, 37.829357420242125], [-122.48422533273697, 37.829361657278575], [-122.48459815979002, 37.8293425906126], [-122.48458743095398, 37.8293447091313], [-122.4847564101219, 37.82932776098012], [-122.48474299907684, 37.829331998018276], [-122.4849334359169, 37.829298101706186], [-122.48492807149889, 37.82930022022615], [-122.48509705066681, 37.82920488676767], [-122.48509168624878, 37.82920912381288], [-122.48520433902739, 37.82905870855876], [-122.48519897460936, 37.82905870855876], [-122.4854403734207, 37.828594749716714], [-122.48543500900269, 37.82860534241688], [-122.48571664094925, 37.82808206121068], [-122.48570591211319, 37.82809689109353], [-122.4858346581459, 37.82797189627337], [-122.48582661151886, 37.82797825194729], [-122.4859634041786, 37.82788503534145], [-122.48595803976059, 37.82788927246246], [-122.48605459928514, 37.82786596829394] ] } }] } }, // The identity function does not take a 'stops' property. // Instead, the property value (in this case, 'color') on the source will be the direct output. 'paint': { 'line-width': 3, 'line-color': { 'type': 'identity', 'property': 'color' } } }); ~~~ ## 十六、判斷點是否在區域內 [http://turfjs.org/docs#booleanPointInPolygon](http://turfjs.org/docs#booleanPointInPolygon) ~~~ var pt = turf.point([-77, 44]); var poly = turf.polygon([[ [-81, 41], [-81, 47], [-72, 47], [-72, 41], [-81, 41] ]]); turf.booleanPointInPolygon(pt, poly); //= true ~~~ ## 十七、計算兩點間的距離 [http://turfjs.org/docs#distance](http://turfjs.org/docs#distance) ~~~ var from = turf.point([-75.343, 39.984]); var to = turf.point([-75.534, 39.123]); var options = {units: 'miles'}; var distance = turf.distance(from, to, options); ~~~ ## 十八、點到線的最近一點坐標 [http://turfjs.org/docs#nearestPointOnLine](http://turfjs.org/docs#nearestPointOnLine) ~~~ var line = turf.lineString([ [-77.031669, 38.878605], [-77.029609, 38.881946], [-77.020339, 38.884084], [-77.025661, 38.885821], [-77.021884, 38.889563], [-77.019824, 38.892368] ]); var pt = turf.point([-77.037076, 38.884017]); var snapped = turf.nearestPointOnLine(line, pt); ~~~ ## 十九、兩點間中點坐標 [http://turfjs.org/docs#midpoint](http://turfjs.org/docs#midpoint) ~~~ var point1 = turf.point([144.834823, -37.771257]); var point2 = turf.point([145.14244, -37.830937]); var midpoint = turf.midpoint(point1, point2); ~~~ ## 二十、區域平移、點平移、線平移 [http://turfjs.org/docs#transformTranslate](http://turfjs.org/docs#transformTranslate) ~~~ // 區域平移 var poly = turf.polygon([[[0,29],[3.5,29],[2.5,32],[0,29]]]); var translatedPoly = turf.transformTranslate(poly, 100, 35); // 點平移 turf.transformTranslate(turf.point([10, 10]), 100, 35); // 線平移 turf.transformTranslate(turf.lineString([[10, 10], [20, 20]]), 100, 35); ~~~ > 可獲取平移后的坐標 ## 二一、修改區域 [參考：https://www.mapbox.com/mapbox-gl-js/example/animate-a-line/](https://www.mapbox.com/mapbox-gl-js/example/animate-a-line/) ~~~ map.addLayer({ 'id': k, 'type': 'fill', 'source': { 'type': 'geojson', 'data': { 'type': 'Feature', 'geometry': { 'type': 'Polygon', 'coordinates': [ v.bounds ] } } }, 'paint': { 'fill-color': v.fill, 'fill-outline-color': v.stroke } }); map.getSource(k).setData({ 'type': 'Feature', 'geometry': { 'type': 'Polygon', 'coordinates': [[ [102.92171417511929, 25.103626888715624], [102.93111617108025, 25.114968731879713], [102.93246157760666, 25.11403601959097], [102.92274821358956, 25.101974512317625], [102.92171417511929, 25.103626888715624], ]] } }); ~~~ ## 二二、計算麻點的中點坐標 [http://turfjs.org/docs#centerOfMass](http://turfjs.org/docs#centerOfMass) ~~~ var polygon = turf.polygon([[[-81, 41], [-88, 36], [-84, 31], [-80, 33], [-77, 39], [-81, 41]]]); var center = turf.centerOfMass(polygon); ~~~ ## 二三、添加縮放及指南針控件 [https://www.mapbox.com/mapbox-gl-js/example/navigation/](https://www.mapbox.com/mapbox-gl-js/example/navigation/) ~~~ map.addControl(new mapboxgl.NavigationControl(), 'top-right'); ~~~ ## 二四、geojson point(symbol) text  ~~~ map.addLayer({ "id": "stand_text", "type": "symbol", "source": { "type": "geojson", "data": res2 }, "paint": { "text-color": '#f00', "text-halo-color": '#fff', "text-halo-width": 1 }, "layout": { "text-size": 14, "text-field": "{stand}" } }); ~~~ ## 二五、兩點角度計算 http://turfjs.org/docs#bearing ~~~ var point1 = turf.point([-75.343, 39.984]); var point2 = turf.point([-75.534, 39.123]); var bearing = turf.bearing(point1, point2); ~~~ ## 二六、點平移 http://turfjs.org/docs#rhumbDestination ~~~ var pt = turf.point([-75.343, 39.984], {"marker-color": "F00"}); var distance = 50; var bearing = 90; var options = {units: 'miles'}; var destination = turf.rhumbDestination(pt, distance, bearing, options); ~~~ ## 二七、kml轉geojson > KML is Google's Keyhole Markup Language. > GeoJSON is a format for encoding a variety of geographic data structures. npm下載地址：https://www.npmjs.com/package/togeojson ~~~ <script src='jquery.js'></script> <script src='togeojson.js'></script> <script> $.ajax('test/data/linestring.kml').done(function(xml) { console.log(toGeoJSON.kml(xml)); }); </script> ~~~