网站建设与网页设计开题报告seo搜索引擎优化培训班

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 库