leaflet前端初始化项目

1、通过npm安装leaflet包，或者直接在项目中引入leaflet.js库文件。

npm 安装：npm i leaflet

如果在index.html中引入leaflet.js,在项目中可以直接使用变量L.

注意:尽量要么使用npm包，要么使用leaflet.js库，两者一起使用容易发生冲突，引起莫名奇妙的bug.下面以使用leaflet.js库为例。

2、初始地图实例

//国家天地图（矢量） this.layer = L.tileLayer(mapData.layerV) // 国家天地图（矢量注记） // this.layer2 = L.tileLayer(mapData.layerVZ) //国家天地图（影像） this.layer3 = L.tileLayer(mapData.layerW); //国家天地图（影像注记） this.layer4 = L.tileLayer(mapData.layerWZ); L.CRS.CustomEPSG4490 = L.extend({}, L.CRS.Earth, { code: "EPSG:4490", projection: L.Projection.LonLat, transformation: new L.Transformation(1 / 180, 1, -1 / 180, 0.5), scale: function (zoom) { return 256 * Math.pow(2, zoom - 1); }, }); this.map = L.map(this.id, { crs: L.CRS.CustomEPSG4490,//设置坐标系 center: [mapData.mapCenterY, mapData.mapCenterX], zoom: Number(mapData.mapZoom) + 1, maxZoom: 18, //最大缩放层级 minZoom: 1, //最小缩放层级 tileSize: 256, //切片大小 attributionControl: false, // 移除右下角leaflet标识 zoomControl: false, //禁用 + - 按钮 // preferCanvas: true, //默认使用svg渲染，设置canvas渲染 doubleClickZoom: false, //关闭双击缩放 layers: [this.layer], //添加地图图层 // layers: [this.layer, this.layer2], //添加地图图层 }); <div :id="id" class="map-box"></div>

这里id作为变量，有父组件传入，可在不同位置引入地图组件而不发生冲突。

关于地图的详细配置参考Documentation - Leaflet - 一个交互式地图 JavaScript 库