地图技术选型

李晨豪 Lch

已于 2024-06-18 12:53:52 修改

阅读量855

点赞数 29

文章标签： 3d javascript 开源

于 2024-06-18 11:35:26 首次发布

本文链接：https://blog.csdn.net/qq_33538365/article/details/139768636

版权

一、地图效果与技术栈对比

效果 \ 技术栈	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: '&copy; 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: '&copy; mapbox',
});

const osmLayer = L.tileLayer("https://tile.openstreetmap.de/{z}/{x}/{y}.png", {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
});

const osmLayer = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
  attribution: '&copy; <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);