相关文档：
mapbox官网 https://www.mapbox.com/
mapboxgl api https://www.mapbox.com/mapbox-gl-js/api/
turf.js api http://turfjs.org/地理空间解析类库 中文turf链接https://turfjs.fenxianglu.cn/docs/api/booleanPointInPolygon
因为mapbox是国外地图，都是英文文档，而且与国内地图的api有出处，没有国内的直观，所以在这里记录一下项目中已用到的方法/属性，方便以后查找使用。
一、实例化化地图 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/
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/
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/
注意绘制区域的时候收尾坐标要一致
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/
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/
map.setStyle('mapbox://styles/mapbox/dark-v9');
七、添加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/
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/
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 // 隐藏地图所属信息
dragRotate: false, // 禁用拖拽旋转
dragPan: false, // 禁用拖拽平移
scrollZoom: false, // 禁用滚轮缩放
});
十四、动态绘制区域 https://www.mapbox.com/mapbox-gl-js/example/mapbox-gl-draw/
十五、修改一条线中不同线段的颜色 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
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
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
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
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
可获取平移后的坐标
// 区域平移
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/
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
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/
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.
pm下载地址：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>
mapbox-gl可参考链接
本文来自于 mapbox · 前端技术总结 · 看云 (kancloud.cn)
mapbox Style 规范 https://zhuanlan.zhihu.com/p/641898777
mapbox 操作 https://article.juejin.cn/post/7257184836972576825
扫一扫
6945
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
