leaflet离线地图(百度)+vue+echarts
实现效果：
思路：把离线地图瓦片全部下载下来 然后自己在内网起个提供瓦片图请求的服务 从服务器加载，（或者前端静态资源）。
实现步骤：
1.下载全能电子地图下载器。下载地图瓦片。
2.把下载的图层放到public文件夹下，瓦片过多时候，也可以部署到nginx代理上。
3.安装地图相关的插件
"leaflet": "^1.9.2",
"ol": "^7.1.0",
"proj4": "^2.8.0",
"proj4leaflet": "^1.0.2",
"vue2-leaflet": "^2.7.1"
4.tileLayer.baidu.js 待项目中引用.放到指定路径下。
require('proj4')
require('proj4leaflet')
const L = require('leaflet')
// 本地百度地图离线瓦片地图 项目需要叠加底图，所以要两个。不需要叠加的，一个就好
const titleO = '/map/overlay/{z}/{x}/{y}.png'
const titleS = '/map/satellite/{z}/{x}/{y}.jpg'
var urlPath = titleO
var urlPathS = titleS
//请引入 proj4.js 和 proj4leaflet.js
L.CRS.Baidu = new L.Proj.CRS(
'EPSG:900913',
'+proj=merc +a=6378206 +b=6356584.314245179 +lat_ts=0.0 +lon_0=0.0 +x_0=0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext +no_defs',
{
resolutions: (function () {
const level = 19
var res = []
res[0] = Math.pow(2, 18)
for (var i = 1; i < level; i++) {
res[i] = Math.pow(2, 18 - i)
}
return res
})(),
origin: [0, 0],
bounds: L.bounds([20037508.342789244, 0], [0, 20037508.342789244]),
}
)
L.tileLayer.baidu = function (option) {
option = option || {}
var layer
var subdomains = '0123456789'
switch (option.layer) {
//底图
case 'vec':
default:
layer = L.tileLayer(urlPath, {
name: option.name,
subdomains: subdomains,
tms: true,
zIndex:400
})
break
//卫星图
case 'vecs':
layer = L.tileLayer(urlPathS, {
name: option.name,
subdomains: subdomains,
tms: true,
zIndex:200
})
break
case 'img_d':
layer = L.tileLayer(
'http://shangetu{s}.map.bdimg.com/it/u=x={x};y={y};z={z};v=009;type=sate&fm=46',
{
name: option.name,
subdomains: subdomains,
tms: true,
}
)
break
case 'img_z':
layer = L.tileLayer(
'http://online{s}.map.bdimg.com/tile/?qt=tile&x={x}&y={y}&z={z}&styles=' +
(option.bigfont ? 'sh' : 'sl') +
'&v=020',
{
name: option.name,
subdomains: subdomains,
tms: true,
}
)
break
case 'custom': //Custom 各种自定义样式
//可选值：dark,midnight,grayscale,hardedge,light,redalert,googlelite,grassgreen,pink,darkgreen,bluish
break
case 'time': //实时路况
var time = new Date().getTime()
layer = L.tileLayer(
'http://its.map.baidu.com:8002/traffic/TrafficTileService?x={x}&y={y}&level={z}&time=' +
time +
'&label=web2D&v=017',
{
name: option.name,
subdomains: subdomains,
tms: true,
}
)
break
//合并
case 'img':
layer = L.layerGroup([
L.tileLayer.baidu({
name: '底图',
layer: 'img_d',
bigfont: option.bigfont,
}),
L.tileLayer.baidu({
name: '注记',
layer: 'img_z',
bigfont: option.bigfont,
}),
])
break
}
return layer
}
5.main.js中引用
一定要引入，否则底图就有问题。
6.页面使用