nsgk_mobile/src/components/house/CommonMap.vue

<template>
  <div class="mapBox">
    <div :id="'map-element' + elementId" class="map-element" style="width: 100%; height: 100%;"></div>
    <div :id="'draw-toolbar' + elementId" class="mapBox_button" v-if="allowDraw">
      <van-button :id="'drawPolygon' + elementId" native-type="button" icon="../../../static/images/icon/icon_ht.png" type="default" block round size="small"></van-button>
      <van-button :id="'drawRemove' + elementId" native-type="button" icon="cross" type="default" block round size="small" style="margin-top: 0.2rem"></van-button>
    </div>
  </div>
</template>

<script>
import $ from "jquery";

const COMMON_MAP_DRAW_LAYER_NAME = '_Draw_layer';

export default {
  name: "CommonMap",
  props: {
    minMapZoom: {
      type: Number,
      default: 16,
    },
    maxMapZoom: {
      type: Number,
      default: 18.9,
    },
    allowDraw: {
      type: Boolean,
      default: false,
    },
    coord: {
      type: Array,
      default: function() {
        return [115.452752, 31.789033];
      },
    },
  },
  data() {
    return {
      isInited: false,
      mapObject: null,
      userLayers: [],
      drawResult: null,
      elementId: ('_' + Math.random()).replaceAll('.', ''),
    };
  },
  created() {
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      if(this.isInited)
        return;
      this.createMap();
      this.setDraw(true);
      this.isInited = true;
    },
    destroyMap() {
      if(!this.mapObject)
        return;
      delete this.mapObject;
      document.getElementById("map-element" + this.elementId).innerHTML = '';
      this.mapObject = null;
    },
    createMap() {
      if(this.mapObject)
        return;

      let projection = new ol.proj.Projection({
        //地图投影类型
        code: "EPSG:3857",
        units: "degrees",
        //extent:extent
      });
      let aerial = new ol.layer.Tile({
        source: new ol.source.XYZ({
          url: "http://t0.tianditu.gov.cn/img_w/wmts?" +
            "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
            "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=cc4aba6e967096098249efa069733067",
        }),
        isGroup: true,
        name: "卫星影像图",
      });

      let yingxzi = new ol.layer.Tile({
        source: new ol.source.XYZ({
          url: "https://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=cc4aba6e967096098249efa069733067",
        }),
        isGroup: true,
        name: "天地图文字标注--卫星影像图",
      });

      //加载地图
      let map = new ol.Map({
        // interactions: ol.interaction.DragPan({
        //   onFocusOnly: false
        // }),
        controls: ol.control.defaults({attribution: false, zoom: false, rotate: false}).extend([]), //隐藏放大缩小按钮
        layers: [aerial, yingxzi],
        projection: projection,
        target: "map-element" + this.elementId,
        logo: 'false',
        view: new ol.View({
          center: ol.proj.fromLonLat(this.coord),
          //zoom: false,
          zoom: 17,
          minZoom: this.minMapZoom, //地图缩小限制
          maxZoom: this.maxMapZoom, //地图放大限制
        }),
      });

      this.mapObject = map;
      //(map);
      //console.log(map.getProperties());
    },
    setCoord(lng, lat) {
      if(!this.mapObject)
        return false;
      this.mapObject.getView().setCenter(ol.proj.fromLonLat([lng, lat]));
      //console.log('setCoord', lng, lat,this.mapObject);
    },
    getProjection() {
      if(!this.mapObject)
        return null;
      return this.mapObject.get('view').getProjection();
    },
    pushLayer(name, layer) {
      if(!this.mapObject)
        return false;
      if(this.checkNameExists(name))
      {
        console.error(name + ' is dup!');
        return false;
      }
      this.userLayers.push({
        name: name,
        layer: layer,
        visible: true,
      });
      this.mapObject.addLayer(layer);
      //console.log(name, layer);
      return true;
    },
    checkNameExists(name) {
      if(this.userLayers.length === 0)
        return false;
      let res = this.userLayers.findIndex((x) => {
        return x.name === name;
      });
      return res !== -1;
    },
    findLayer(name = null) {
      if(this.userLayers.length === 0)
        return null;
      if(name) {
        for(let i in this.userLayers) {
          if(this.userLayers[i].name == name) {
            return this.userLayers[i];
          }
        }
      }
      else {
        let last = this.userLayers.length - 1;
        return this.userLayers[last];
      }
      return null;
    },
    takeLayer(name = null) {
      if(this.userLayers.length === 0)
        return null;
      if(name) {
        for(let i in this.userLayers) {
          if(this.userLayers[i].name == name) {
            let layer = this.userLayers[i];
            this.userLayers.splice(i, 1);
            return layer;
          }
        }
      }
      else {
        let last = this.userLayers.length - 1;
        let layer = this.userLayers[last];
        this.userLayers.splice(last, 1);
        return layer;
      }
      return null;
    },
    popLayer(name = null) {
      let layer = this.takeLayer(name);
      if(layer)
        this.mapObject.removeLayer(layer.layer);
    },
    setLayerVisible(name, on) {
      let layer = this.findLayer(name);
      //console.log(layer.layer);
      if(!layer)
        return false;
      layer.layer.setVisible(on);
      return true;
    },
    hideLayer(name = null) {
      return this.setLayerVisible(name, false);
    },
    showLayer(name = null) {
      return this.setLayerVisible(name, true);
    },
    setDraw(on) {

      if(!this.mapObject)
        return;
/*      if(this.allowDraw === on)
        return;*/
      if(on) {
        let self = this;
        let draw;
        // 不要使用 $('DOM-selector').click(function), 动态加载按钮时手机端会失效
        $(document).on('click', "#drawPolygon" + this.elementId, function () {
          self.drawResult = null;
          self.$emit("drawStarted");

          self.popLayer(COMMON_MAP_DRAW_LAYER_NAME);
          let drawLayer = new ol.layer.Vector({
              source: new ol.source.Vector(),
            });

          self.pushLayer(COMMON_MAP_DRAW_LAYER_NAME, drawLayer);
          draw = new ol.interaction.Draw({
            source: drawLayer.getSource(),
            type: "Polygon"
          });
          draw.on('drawend', function (evt) {
            if(self.drawInsert != null){
              $("#drawRemove" + self.elementId).trigger('click');
            }
            let feature = evt.feature;
            let geometry = feature.getGeometry();
            let coordinate = geometry.getCoordinates();
            self.drawResult = coordinate;
            self.$emit("drawFinished", coordinate);
          });
          self.mapObject.addInteraction(draw);
          //console.log("drawPolygon");
        });
        //清除画图鼠标点击事件
        $(document).on('click', "#drawRemove" + this.elementId, function () {
          self.drawInsert = null;
          self.mapObject.removeInteraction(draw);
          self.popLayer(COMMON_MAP_DRAW_LAYER_NAME);
          self.$emit("drawFinished", null);
          //console.log("drawRemove");
        });
        //还原之前图层
        /*$("#drawReset" + this.elementId).click(function () {
          self.popLayer(COMMON_MAP_DRAW_LAYER_NAME);
          self.drawResult = null;
          self.$emit("drawReseted");
          //console.log("drawReset");
        });*/
      }
      else
      {
        self.popLayer(COMMON_MAP_DRAW_LAYER_NAME);
        self.drawResult = null;
      }
    },

    setLayer(name, theGeom = null) {
      this.popLayer(name);
      if(theGeom)
        this.addLayer(name, theGeom);
    },
    addLayer(name, theGeom) {
      if(!this.mapObject)
        return false;
      //地图只加载一次
      //加载地图编辑
      //图层查询定位开始 ---------start
      let hc_land = new ol.layer.Vector({
        title: name,
        source: new ol.source.Vector({
          projection: this.getProjection(),
          features: new ol.format.GeoJSON().readFeatures("{\n" +
            "    \"type\": \"Feature\",\n" +
            "    \"geometry\":" + theGeom + "}"),
        }),
        style: new ol.style.Style({
          fill: new ol.style.Fill({
            //矢量图层填充颜色，以及透明度
            color: "rgba(204, 255, 204,0.3)",
          }),
          stroke: new ol.style.Stroke({
            //边界样式
            color: "#47c68f",
            width: 3,
          }),
        }),
      });
      if(!this.pushLayer(name, hc_land))
        return false;
      var maxXMap = hc_land.values_.source.featuresRtree_.rbush_.data.maxX;
      var maxYMap = hc_land.values_.source.featuresRtree_.rbush_.data.maxY;
      var minXMap = hc_land.values_.source.featuresRtree_.rbush_.data.minX;
      var minYMap = hc_land.values_.source.featuresRtree_.rbush_.data.minY;
      //定位查询位置
      var center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]); //获取边界区域的中心位置
      this.mapObject.getView().animate({
        // 只设置需要的属性即可
        center: center, // 中心点
        zoom: 17, // 缩放级别
        rotation: undefined, // 缩放完成view视图旋转弧度
        duration: 300, // 缩放持续时间，默认不需要设置
      });
      return true;
    },

    addLayerNew(name, theGeom,tcmc,status) {
      if(!this.mapObject)
        return false;
      let css =  null;
      if(tcmc === "zjdzdxx"){
        if(status === "1"){
          css = "#F9F900";
        }else if(status === "2"){
          css = "#FF8000";
        }else if(status === "3"){
          css = "#82D900";
        }else if(status === "4"){
          css = "#F75000";
        }else{
          css = "#9F4D95";
        }
      }else if(tcmc === "fsss"){
          css = "#FF8C00";
      }else{
          css =  "#47c68f";
      }
      //地图只加载一次
      //加载地图编辑
      //图层查询定位开始 ---------start
      console.info(css);
      let hc_land = new ol.layer.Vector({
        title: name,
        source: new ol.source.Vector({
          projection: this.getProjection(),
          features: new ol.format.GeoJSON().readFeatures("{\n" +
            "    \"type\": \"Feature\",\n" +
            "    \"geometry\":" + theGeom + "}"),
        }),
        style: new ol.style.Style({
          fill: new ol.style.Fill({
            //矢量图层填充颜色，以及透明度
            color: "rgba(204, 255, 204,0.3)",
          }),
          stroke: new ol.style.Stroke({
            //边界样式
            color: css,
            width: 3,
          }),
        }),
      });
      if(!this.pushLayer(name, hc_land))
        return false;
      var maxXMap = hc_land.values_.source.featuresRtree_.rbush_.data.maxX;
      var maxYMap = hc_land.values_.source.featuresRtree_.rbush_.data.maxY;
      var minXMap = hc_land.values_.source.featuresRtree_.rbush_.data.minX;
      var minYMap = hc_land.values_.source.featuresRtree_.rbush_.data.minY;
      //定位查询位置
      var center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]); //获取边界区域的中心位置
      this.mapObject.getView().animate({
        // 只设置需要的属性即可
        center: center, // 中心点
        zoom: 17, // 缩放级别
        rotation: undefined, // 缩放完成view视图旋转弧度
        duration: 1000, // 缩放持续时间，默认不需要设置
      });
      return true;
    },
    update() {
      if(!this.mapObject)
        return;
      this.mapObject.updateSize();
    },
  }
}
</script>

<style scoped lang="scss">

.map-element {
  width: 100%;
  height: 100%;
}
.mapBox{
  position: relative;
  .mapBox_button{
    position: absolute;
    top: 0.2rem;
    right: 2%;
  }
}
</style>