vue搭建地图 使用leaflet.js和esri-leaflet构建(esri-leaflet轻量级的地图js框架)

// 下载依赖
npm install leaflet
npm install esri-leaflet --save
// 引入Leaflet对象 挂载到Vue上，便于全局使用，也可以单独页面中单独引用
import * as L from 'leaflet'
import * as tileLayer from 'leaflet.chinatmsproviders'
Vue.L = Vue.prototype.$L = L;
var esri = require("esri-leaflet");
Vue.prototype.$esri = esri;

// html
<div class="class"></div>

// jsvascript
data(){
     return{
    //信息缓存数据
      factoryLandData: null,
      factoryLandPoint: null,
      factoryLandPolygon: null,
		}
	},
	created() {
      let self = this;
      //点信息初始化
      self.factoryLandPoint = new L.layerGroup();
      //面信息初始化
      self.factoryLandPolygon = new L.layerGroup();
    },
    mounted() {
      let self = this;
      //用户相关数据
      self.initUser();
      self.loadgraymap();// 初始化地图
      self.initLandPoint();// 初始化点
    },
      loadgraymap() {
        let southWest = [29.1304, 118.1217]; //地图西南点坐标
        let northEast = [30.6191, 120.7753]; //地图东北点坐标
        let bounds = L.latLngBounds(southWest, northEast); //地图边界
        // L.tileLayer.chinaProvider('TianDiTu.Normal.Map',{maxZoom:18,minZoom:5}).addTo(map);
        //初始化灰度图,并在其中加载对应的地理影响地图  自定义坐标系
        let self = this;
        let res = [
          1.40625, // Level 0
          0.703125, // Level 1
          0.3515625, // Level 2
          0.17578125, // Level 3
          0.087890625, // Level 4
          0.0439453125,
          0.02197265625,
          0.010986328125,
          0.0054931640625,
          0.00274658203125,
          0.001373291015625,
          0.0006866455078125,
          0.00034332275390625,
          0.000171661376953125,
          8.58306884765625e-5,
          4.29153442382813e-5,
          2.14576721191406e-5,
          1.07288360595703e-5,
          5.36441802978516e-6,
          2.68220901489258e-6,
          1.34110450744629e-6,
        ];
        let crs = new L.Proj.CRS("SR-ORG:7408", "+proj=longlat +ellps=GRS80 +no_defs", {
          resolutions: res,
          origin: [-180, 90],
        });
        //初始化地图对象
        self.map = L.map("map", {
          crs: crs,
          attributionControl: false,
          measureControl: true,
          zoomControl: true,
          maxBounds: bounds, //地图的边界
          center: [30.2455, 120.17107],
        });
        var attrib = "名称------";
        // 标准地图
        this.normal = new L.TileLayer(configurl.basemap.dark + "/tile/{z}/{y}/{x}", {
          //    hzsyvector_dark
          tileSize: 256,
          minZoom: 9,
          maxZoom: 20,
          attribution: attrib,
        });
        // 影像地图
        this.image = new L.TileLayer(configurl.basemap.image + "/tile/{z}/{y}/{x}", {
          //    hzsyvector_dark
          tileSize: 256,
          minZoom: 9,
          maxZoom: 20,
          attribution: attrib,
        });

        this.map.addLayer(this.normal);
        this.selectMap = this.normal;
        this.map.setView([30.3, 120.1769], 13); //设置比例尺和中心点级别
		// 缩放地图到什么 位置的时候显示面  或者点
        this.map.on("zoomend", function(ev) {
          this.curZoom = ev.target._zoom;
          //console.log(this.curZoom+' -- '+self.switchZoom);
          if (this.curZoom >= self.switchZoom) {
            //显示polygon
            if (self.switchState == 1) {
              self.switchState = 2;
              self.showMapData(1);
            }
          } else {
            //显示point
            if (self.switchState == 2) {
              self.switchState = 1;
              self.showMapData(2);
            }
          }
        });
      },
 // 初始化点
  initLandPoint() {
        //加载对应图片
        let self = this;
        this.polygonGroup = L.featureGroup();
        self.map.addLayer(self.polygonGroup);
        var myStyle = {
          color: "#001024",
          weight: 2,
          opacity: 0.8,
          fillOpacity: 0.8,
        };
 
        //用地
        let localFacTime = localStorage.getItem("localFacTime");
        let nowTime = new Date();
        //设置系统缓存时间大于30s 则在界面初始化的过程中重新取缓存。
        console.log(localStorage.getItem("refresh"));
        if (
          localStorage.getItem("refresh") == 0 ||
          localStorage.getItem("refresh") == null
        ) {
          this.$axios
            .get("AirGIS服务地址")
            .then((res) => {
              localStorage.setItem("localFacData", JSON.stringify(res.data));
              self.factoryLandData = res.data;
              self.initPoints(res.data, 0, self.factoryLandPoint);
              localStorage.setItem("localFacTime", new Date());
              localStorage.setItem("refresh", 1);
              self.initPolygons(res.data, self.factoryLandPolygon);
            });
        } else {
          let localFacData = JSON.parse(localStorage.getItem("localFacData"));
          self.initPoints(localFacData, 0, self.factoryLandPoint);
          self.initPolygons(localFacData, self.factoryLandPolygon);
        }
      },
      //根据aType 分辨显示对应服务的点信息
      initPoints(aData, aType, aDataScore) {
        let self = this;
        let featureCollection = aData;
        let gurl = "./static/images/gy-red.svg";
        let isize = [17, 40];
        let myIcon2 = null;
        // console.log(featureCollection)
        //    console.log(featureCollection.features)
        for (let i = 0; i < featureCollection.features.length; i++) {
          //   if (i <= 207 || i > 211) {
          let coor = featureCollection.features[i].geometry.coordinates;
          //面信息
          //取面中第一个点此处需要考虑单面多面的情况
          //
          // console.log("开始加载")
          if (coor == "" || coor == undefined) continue;
          let position = coor[0][0];
          let endPosition = coor[0][0];
          if (coor.length > 1) {
            position = coor[0][0][0];
            endPosition = coor[0][0][parseInt(coor[0][0].length / 2)];
          } else {
            if (parseInt(coor[0].length / 2) > 1) {
              endPosition = coor[0][parseInt(coor[0].length / 2)];
            }
          }
          let item = featureCollection.features[i];
          if (aType == 0) {
            if (
              item.properties.ispub == "是" &&
              (item.properties.DKZT == null || item.properties.DKZT >= 2)
            ) {
              gurl = "./static/images/gy-pub.svg"; // icon
              isize = [35, 80]; // icon 大小
            } else {
              gurl = "./static/images/gy-red.svg";
              isize = [19, 40];
            }
          } else if (aType == 1) {
            gurl = "./static/images/zdgy-red2.svg";
            isize = [17, 40];
          } else if (aType == 3) {
            if (
              item.properties.ispub == "是" &&
              (item.properties.DKZT == null || item.properties.DKZT >= 2)
            ) {
              gurl = "./static/images/sf-pub.svg";
              isize = [35, 80];
            } else {
              gurl = "./static/images/sf-blue.svg";
              isize = [19, 40];
            }
          } else if (aType == 4) {
            if (
              item.properties.ispub == "是" &&
              (item.properties.DKZT == null || item.properties.DKZT >= 2)
            ) {
              gurl = "./static/images/zz-pub.svg";
              isize = [35, 80];
            } else {
              gurl = "./static/images/zz-yellow.svg";
              isize = [19, 40];
            }
          } else if (aType == 5) {

            if (
              item.properties.ispub == "是" &&
              (item.properties.DKZT == null || item.properties.DKZT >= 2)
            ) {
              gurl = "./static/images/qt-pub.svg";
              isize = [35, 80];
            } else {
              gurl = "./static/images/qt-green.svg";
              isize = [19, 40];
            }
          }
          let centerPoint = this.getCenterPoint(position, endPosition);
          myIcon= L.icon({
            iconUrl: gurl,
            iconSize: isize,
            iconAnchor: [9, 20],
            shadowSize: [68, 95],
            shadowAnchor: [22, 94],
          });
          let latlng = L.latLng(centerPoint[1], centerPoint[0]);
          let marker = L.marker(latlng, {
            icon: myIcon,
          });
          //添加marker点击事件
          marker.on("click", function() {
            if (self.iscircle) {
              self.longitude(item)
            } else {
              console.log(featureCollection.features[i]);
              self.landinfo = item;
              self.infoDialog = true; //显示信息框
              self.setfull = true; //是否全屏
              self.telInfo = connect[item.properties["QY"]];
            }
            console.log(self.landinfo);
            console.log(self.infoDialog);
          });
          marker.addTo(aDataScore);
          aDataScore.addTo(this.map);
        }
      },
      // 渲染面信息
      initPolygons(aData, aDataScore) {
        let self = this;
        let featureCollection = aData;
        for (let i = 0; i < featureCollection.features.length; i++) {
          // 用于暂时解决值为空的
          //   console.log(i);
          let coor = featureCollection.features[i].geometry.coordinates;
          let item = featureCollection.features[i];
          //   console.log(coor, i);
          let polygon = L.polygon(
            self.revert(coor),
            self.getStyle(featureCollection.features[i].properties["type"]).style
          );
          polygon.on("click", function() {
            self.landinfo = item;
            self.infoDialog = true; //显示信息框
            self.setfull = true; //是否全屏
            self.telInfo = connect[item.properties["QY"]];
            console.log(self.landinfo);
            console.log(self.infoDialog);
          });
          polygon.addTo(aDataScore);
          let myIcon = L.divIcon({
            html: featureCollection.features[i].properties.NAME != null ? featureCollection.features[i].properties
              .NAME : featureCollection.features[i].properties.DKBZ != null ? featureCollection.features[i]
              .properties.DKBZ : '未命名',
            className: "my-div-icon  " +
              self.typeStyle[featureCollection.features[i].properties["type"]],
            iconSize: [130, 30],
            iconAnchor: [45, -15],
          });
          //   console.log(myIcon);
          if (coor == "" || coor == undefined)  continue;
          //取面中第一个点此处需要考虑单面多面的情况
          let position = coor[0][0];
          let endPosition = coor[0][0];
          if (coor.length > 1) {
            position = coor[0][0][0];
            endPosition = coor[0][0][parseInt(coor[0][0].length / 2)];
          } else {
            if (parseInt(coor[0].length / 2) > 1) {
              endPosition = coor[0][parseInt(coor[0].length / 2)];
            }
          }
          let centerPoint = this.getCenterPoint(position, endPosition);
          // console.log(centerPoint,"centerPoint")
          let latlng = L.latLng(centerPoint[1], centerPoint[0]);

          let marker = L.marker(latlng, {
            icon: myIcon,
          });
          //添加marker点击事件
          marker.on("click", function() {
            //console.log(featureCollection.features[i]);
            self.landinfo = item;
            self.infoDialog = true; //显示信息框
            self.setfull = true; //是否全屏
            self.telInfo = connect[item.properties["QY"]];
            console.log(self.landinfo);
            console.log(self.infoDialog);
          });
          // points.push(marker);
          marker.addTo(aDataScore);
        }
      },
   // 换算经纬度位置
      getCenterPoint(aArr1, aArr2) {
        // console.log(typeof(aArr2) == "number")
        if (typeof aArr2 == "number") {
          let centerX = aArr1;
          let centerY = aArr2;
          return [centerX, centerY];
        }
        let centerX = (aArr1[0] + aArr2[0]) / 2;
        let centerY = (aArr1[1] + aArr2[1]) / 2;
        return [centerX, centerY];
      },
      // 滚动根据类型显示隐藏 点或者面
    showMapData(aType) {
        let self = this;
        if (aType == 1) {
          self.map.removeLayer(this.factoryLandPoint);// 移除点
          self.map.removeLayer(this.impFactoryLandPoint);
          self.map.removeLayer(this.comLandPoint);
          self.map.removeLayer(this.houseLandPoint);
          self.map.removeLayer(this.otherLandPoint);
          self.map.addLayer(this.factoryLandPolygon);// 添加面
          self.map.addLayer(this.impFactoryLandPolygon);
          self.map.addLayer(this.comLandPolygon);
          self.map.addLayer(this.houseLandPolygon);
          self.map.addLayer(this.otherLandPolygon);

        } else {
          self.map.addLayer(this.factoryLandPoint); // 添加点
          self.map.addLayer(this.impFactoryLandPoint)
          self.map.addLayer(this.comLandPoint);
          self.map.addLayer(this.houseLandPoint);
          self.map.addLayer(this.otherLandPoint);
          self.map.removeLayer(this.factoryLandPolygon);//移除面
          self.map.removeLayer(this.impFactoryLandPolygon);
          self.map.removeLayer(this.comLandPolygon);
          self.map.removeLayer(this.houseLandPolygon);
          self.map.removeLayer(this.otherLandPolygon);
        }
      },