当前位置：首页 > news >正文

leaflet前端初始化项目

news 2025/7/3 19:54:28

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], //添加地图图层
    });