网格绘制

zhanghua

2023-01-30 5173f8e31d106abd003e123c8679cf53c7940b33

网格绘制

 src/components/map/leafletMap.vue

@@ -55,7 +55,7 @@
      // this.$map.createrLayers(this.map, this.mapUrls) //切片地图
      // this.$map.createrChinatm(this.map, this.mapUrl); // 图层
      this.map.pm.setLang("zh");
      this.map.pm.addControls(this.options);
      // this.map.pm.addControls(this.options);
      this.locationMap();
    },
    locationMap() {

 src/views/systemSetting/device/grid/components/components/dialogForm.vue

@@ -72,7 +72,7 @@
  </div>
</template>
  <script>
import Map from "./map.vue";
import Map from "./leafletMap.vue";

import { createNamespacedHelpers } from "vuex";
const { mapActions } = createNamespacedHelpers("orgGrid");
@@ -164,11 +164,13 @@
      });
    },
    getRegion(e) {
      this.form.center = JSON.stringify([
        e.map.getCenter().lng,
        e.map.getCenter().lat,
      ]);
      this.form.zoom = e.map.getZoom();
      // this.form.center = JSON.stringify([
      //   e.map.getCenter().lng,
      //   e.map.getCenter().lat,
      // ]);
      // this.form.zoom = e.map.getZoom();
      this.form.center = JSON.stringify(e.center);
      this.form.zoom = e.zoom;
      this.form.region = JSON.stringify(e.path);
    },
  },

 src/views/systemSetting/device/grid/components/components/leafletMap.vue

New file
@@ -0,0 +1,118 @@
<template>
  <div class="map-container" id="map-container"></div>
</template>

<script>
export default {
  name: "map",
  components: {},
  data() {
    return {
      map: null,
      map_point: { x: "119.27179890", y: "28.59027084" },
      map_zoom: 15,
      mapUrl:
        "http://117.139.13.157:41005/tilermap/rest/services/mapserver/baidu-image-db/{z}/{x}/{y}",
      // mapUrls: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      // mapUrls: "http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}",
      option: {
        crs: L.CRS.Baidu,
        minZoom: 2,
        maxZoom: 19,
        zoomControl: true, // 禁用 + - 按钮
        doubleClickZoom: true, // 禁用双击放大
        attributionControl: false, // 移除右下角leaflet标识
        dragging: true, // 禁止鼠标拖动滚动
        boxZoom: true, // 决定地图是否可被缩放到鼠标拖拽出的矩形的视图，鼠标拖拽时需要同时按住shift键.
        scrollWheelZoom: true, // 禁止鼠标滚动缩放
      },
      options: {
        position: "topright",
        drawPolygon: true, // 添加绘制多边形
        drawMarker: false, // 添加按钮以绘制标记
        drawCircleMarker: false, // 添加按钮以绘制圆形标记
        drawPolyline: false, // 添加按钮绘制线条
        drawRectangle: false, // 添加按钮绘制矩形
        drawCircle: false, //  添加按钮绘制圆圈
        editMode: false, //  添加按钮编辑多边形
        dragMode: false, //   添加按钮拖动多边形
        cutPolygon: false, // 添加一个按钮以删除图层里面的部分内容
        removalMode: true, // 清除图层
      },
    };
  },
  mounted() {
    setTimeout(() => {
      this.createrMap();
    }, 100);
  },
  methods: {
    /* 创建地图实例 */
    createrMap() {
      this.option.center = [eval(this.map_point.y), eval(this.map_point.x)];
      this.option.zoom = this.map_zoom;
      this.map = this.$map.createrMap("map-container", this.option);
      // this.$map.createrLayers(this.map, this.mapUrls) //切片地图
      // this.$map.createrChinatm(this.map, this.mapUrl); // 图层
      this.map.pm.setLang("zh");
      this.map.pm.addControls(this.options);
      this.map.on("pm:drawstart", (e) => {
        // // workingLayer.on('pm:create', e => {
        // console.log("绘制开始");
        // console.log(e);
        // // });
      });
      this.map.on("pm:drawend", (e) => {
        // // workingLayer.on('pm:create', e => {
        // console.log("绘制结束");
        // // });
      });
      let that = this;
      this.map.on("pm:create", (e) => {
        let region = [];
        e.layer._latlngs[0].forEach((point) => {
          region.push([point.lat, point.lng]);
        });
        console.log(region);
        let obj = {
          path: region,
          center: [that.map.getCenter().lat, that.map.getCenter().lng],
          zoom: that.map.getZoom(),
        };
        that.$emit("getRegion", obj);
        // // workingLayer.on('pm:create', e => {
        // console.log("创建完成");
        // console.log(e);
        // // });
      });

      this.locationMap();
    },
    locationMap() {
      if (this.region && this.map) {
        var polygon = L.polygon(eval(this.region), {
          color: "green",
          fillColor: "#f03",
          fillOpacity: 0.5,
        }).addTo(this.map);
      }
    },
  },
  watch: {
    point(newval, oldval) {
      this.map_point = newval;
      this.locationMap();
    },
    zoom(newval, oldval) {
      this.map_zoom = newval;
    },
  },
  props: ["point", "zoom", "region"],
};
</script>
<style >
.map-container {
  width: 100%;
  height: 100%;
}
</style>