目录
一、地图效果与技术栈对比
| 效果 \ 技术栈 | 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);