![image.png](https://img-blog.csdnimg.cn/img_convert/ec92da2c9de7083949683ab50105ea6c.png)
![image.png](https://img-blog.csdnimg.cn/img_convert/7a989d05a8d14c8d87f2065822169d07.png)
![image.png](https://img-blog.csdnimg.cn/img_convert/603c4efc392f63ccabfe9b399f55e849.png)
一、地图效果与技术栈对比
效果 \ 技术栈 | leaflet | mapbox(Mapbox GL JS) |
---|---|---|
三方地图支持 | 高德(免费) OSM(免费) mapbox(Static Images API) | mapbox |
卫星图 | 高德卫星(免费) mapbox卫星(Static Images API) | mapbox卫星 |
点聚合 | leaflet插件:Leaflet.markercluster(免费) | layer:clusters |
标注、折线、自定义图标 | leaflet组件(免费) | marker |
地址解析/逆地址解析 | leaflet插件:Leaflet GeoSearch ①OpenStreetMap Nominatim (免费,国内无法访问) ②Mapbox Geocoding API | Mapbox Geocoding API mapbox-gl-geocoder(插件) |
地图全屏 | leaflet插件:leaflet.fullscreen(免费) | FullscreenControl |
国际化图层 | 无 | mapbox-gl-language |
3D效果 | 不支持 | 支持:projection: ‘globe’ |
二、Mapbox收费情况
Mapbox收费情况 | Monthly requests | Cost per 1,000 |
---|---|---|
Static Images API | Up to 50,000 | Free |
50,001 - 500,000 | $1.00 | |
500,001 - 1,000,000 | $0.80 | |
1,000,001+ | $0.60 | |
Mapbox GL JS | Up to 50,000 | Free |
50,001 – 100,000 | $5.00 | |
100,001 – 200,000 | $4.00 | |
200,001+ | $3.00 | |
Mapbox Geocoding API | Up to 100,000 | Free |
100,001 - 500,000 | $0.75 | |
500,001 - 1,000,000 | $0.60 | |
1,000,001+ | $0.45 |
三、leaflet集成
①瓦片服务器
const mapboxLayer = L.tileLayer('https://api.mapbox.com/styles/v1/{username}/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
maxZoom: 19,
username: 'mapbox',
id: 'streets-v12',
accessToken: mapboxAccessToken,
attribution: '© mapbox',
});
const mapboxSatelliteLayer = L.tileLayer('https://api.mapbox.com/styles/v1/{username}/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
maxZoom: 19,
username: 'mapbox',
id: 'satellite-streets-v12',
accessToken: mapboxAccessToken,
attribution: '© mapbox',
});
const osmLayer = L.tileLayer("https://tile.openstreetmap.de/{z}/{x}/{y}.png", {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
});
const osmLayer = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
});
const aMapLayer = L.tileLayer('http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
subdomains: ['1', '2', '3', '4'],
minZoom: 1, // 最小放缩级别
maxZoom: 19, // 最大放缩级别
});
const aMapSatelliteLayer = L.tileLayer('http://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', {
subdomains: ['1', '2', '3', '4'],
minZoom: 1,
maxZoom: 19,
});
②添加图层控件到leaflet
//基础图层
const baseLayers = {};
baseLayers['mapBox'] = mapboxLayer;
baseLayers['mapBox卫星'] = mapboxSatelliteLayer;
baseLayers['OSM'] = osmLayer.addTo(map); //默认osm
baseLayers['高德'] = aMapLayer;
baseLayers['高德卫星'] = aMapSatelliteLayer;
//添加图层控件到地图上
L.control.layers(baseLayers, null, {
collapsed: false //禁止鼠标滚轮缩放
}).addTo(map);