web_sh_audit/src/components/map/MapHolder.vue

<template>
  <div id="map2DViewer"></div>
</template>
<script>
import publicFun from "@/utils/publicFunction.js";
import { get } from "@/utils/request";
export default {
  name: "MapHolder",
  data() {
    return {
      town: "祝桥镇,南汇新城镇,川沙新镇,老港镇,惠南镇,航头镇,泥城镇,书院镇,新场镇,大团镇,唐镇,曹路镇,宣桥镇,张江镇,合庆镇,周浦镇,康桥镇,三林镇,高桥镇,高东镇,金桥镇,北蔡镇,万祥镇,高行镇",
    };
  },
  mounted() {
    var that = this;
    //地图初始化
    that.mapInit();
    that.getJSonData();
  },
  methods: {
    mapInit: function () {
      map2DViewer.map = L.map("map2DViewer", {
        attributionControl: false,
        zoomControl: false,
        minZoom: 10,
        maxZoom: 15,
      }).setView(systemConfig.mapViewer.center, systemConfig.mapViewer.zoom);

      //添加默认图层
      var guid = publicFun.buildGuid("baseLayer");
      var layer = L.esri
        .tiledMapLayer({
          url: 
          // "http://aimap.pudong.sh:5236/maps/rest/services/basemap-shanghai-gem-blue-sh2000/mapserver/"
            systemConfig.mapService +
            "?servertype=Street_Purplish_Blue&token=" +
            systemConfig.token,
        })
        .addTo(map2DViewer.map);
      layer.guid = guid;
      map2DViewer.layers[guid] = layer;
    },
    // 读取浦东新区GeoJSON格式的区域数据
    getJSonData() {
      if (!map2DViewer.map) {
        this.mapInit();
      } else {
        get("./static/json/pdgeojson.json", "").then((geoJson) => {
          geoJson.features.map((feature) => {
            if (
              this.town.indexOf(feature.properties.NAME.replace("镇", "")) > -1
            ) {
              let center = turf.center(feature.geometry);
              this.renderPolygon(feature);
            }
          });
        });
      }
    },
    setView: function (coord, zoom) {
      console.log(coord, "位置");
      let center = L.latLng(coord[0], coord[1]);
      map2DViewer.map.setView(center, zoom);
    },
    renderPolygon: function (feature) {
      let center = turf.center(feature.geometry);
      let itemvalue = JSON.parse((Math.random() * 1000).toFixed(0));
      let polygonData = JSON.parse(JSON.stringify(feature));
      let coordinates = polygonData.geometry.coordinates[0];
      let polygon = L.polygon(this.latLngsToReverse(coordinates), {
        color: "#87d8fd",
        weight: 3,
        fillColor: this.getColor(itemvalue),
        opacity: 1,
        fillOpacity: 0.4,
      }).addTo(map2DViewer.map);
      center = JSON.parse(JSON.stringify(center)).geometry.coordinates;
      center.reverse();
      let wmarker = L.circleMarker(center, {
        radius: 10,
        weight: 1,
        fillOpacity: 0,
        color: "#e6d273",
      });
      wmarker.bindLabel(feature.properties.NAME, {
        noHide: true,
        clickable: true,
        offset: [-25, 10],
      });
      wmarker.addTo(map2DViewer.map);
      L.circleMarker(center, {
        radius: 8,
        weight: 1,
        fillOpacity: 0,
        color: "#e6d273",
      }).addTo(map2DViewer.map);
      L.circleMarker(center, {
        radius: 5,
        weight: 1,
        fillOpacity: 1,
        color: "#e6d273",
      }).addTo(map2DViewer.map);
    },
    latLngsToReverse: function (latlngsAry) {
      var tempLatlngsAry = JSON.parse(JSON.stringify(latlngsAry));
      if (typeof tempLatlngsAry[0] != "object") {
        return tempLatlngsAry.reverse();
      } else {
        for (var i = 0, l = tempLatlngsAry.length; i < l; i++) {
          tempLatlngsAry[i] = this.latLngsToReverse(tempLatlngsAry[i]);
        }
      }
      return tempLatlngsAry;
    },
    getColor: function (val) {
      var that = this;
      if (val < 350) {
        return "#e565ff";
      } else if (val < 700 && val >= 350) {
        return "#0055ff";
      } else {
        return "#00ffd5";
      }
    },
  },
};
</script>
<style scoped>
#map2DViewer {
  position: absolute;
  width: 100%;
  height: calc(100% - 60px);
  z-index: 1;
  top: 60px;
  left: 0px;
}
</style>