相关文档：
[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>
~~~
- 事件
- mouse缩放与拖动
- drag拖动
- 事件兼容
- animation/transition
- canvas
- 改变图片颜色
- html转图片
- 视频操作
- 图片缩放、水印、放大镜
- 虚线
- 圆环进度条
- 形状事件
- 圆角矩形
- 绘制注意
- arcTo与贝塞尔
- 椭圆及椭圆进度
- 五角星进度
- 常用图形
- 计算显示文本宽度
- 算法
- 几何算法
- 地图应用相关
- 运行符
- web安全
- 新窗口打开
- xss
- 分享交流
- php环境搭建及xhr交互
- node环境搭建及xhr交互
- node之socketio
- svg之入门介绍
- svg动画
- vue之搜索联想
- vue之登录和echarts
- vue之组件交互与slot
- vue之loading
- vue之上传进度
- webpack及cli
- 开发技巧
- 常用
- 移动端
- 错误处理
- 预加载
- 代理判断
- 数组扩展
- 对象扩展
- 字符串扩展
- 语音播报
- 收集
- 文章/日记
- 框架/库/插件
- 工具
- 学习网站
- 专业术语
- 正则
- 常用验证
- 方法基础
- es6扩展
- 深入实践
- 快捷使用
- html
- css
- http协议
- http
- https
- socket
- 地图/图表
- mapbox
- echarts
- arcgis
- MapView及事件
- 添加WMS/WMTS层
- 增删点线面
- 入门使用
- popup弹层
- 大数据处理
- 批量点
- 批量线
- 在线绘制
- GraphicLayer显示/隐藏
- 动态改变位置
- 去除版权信息
- 添加控件
- Symbol
- 自定义path标记
- 图片标记
- 文本标记
- 旋转
- UI
- 自定义
- 3D地图
- 创建实例
- basemap
- 底图切换
- 自定义底图
- 中心和范围
- pupup弹层更新
- 坐标转换
- 方向线
- leaflet
- amap
- 框架/类库/脚手架
- vue
- 常见问题
- 组件框架
- vue-router
- 命名视图
- url参数映射到prop
- sublime支持
- 随手记
- 常用功能
- threejs
- 常用效果
- 其他特效
- requirejs
- 简单使用
- jquery
- 方法扩展
- 使用笔记
- 组件扩展
- react
- 党见问题
- 学习笔记
- 学习笔记-进阶
- react-redux
- react-router
- redux
- 其他模块说明
- 组件框架
- sublime支持
- gulp
- 安装使用
- js压缩
- css压缩
- 组合使用
- copy文件
- 项目使用
- protobuf
- 入门
- layui
- 登录验证
- laydate
- 安装工具
- yarn
- reactNative
- 入门介绍
- vueNative
- 入门介绍
- 版本控制
- git常用
- git扩展
- git问题
- git其他
- git扩展2
- 编辑器
- vscode
- atom
- webstorm
- 插件
- clipboard
- 奇淫巧技
- js
- 个性打印
- css
- 滤镜效果
- 文本省略
- 当前色
- 新特性
- 花样边框效果
- 波纹效果
- 个性placeholder
- 伪元素内容
- 容器居中
- 知识点
- js
- 递归
- 沙箱
- 内存泄漏
- es6语法
- 变量介绍
- FileRead
- ajax
- web存储
- css
- rem布局