网格绘制

zhanghua

2023-01-30 5173f8e31d106abd003e123c8679cf53c7940b33

 src/components/map/leafletMap.vue

@@ -3,13 +3,14 @@
</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',
@@ -18,8 +19,6 @@
        crs: L.CRS.Baidu,
        minZoom: 2,
        maxZoom: 19,
        center: [28.59582231,119.27226470],
        zoom: 16,
        zoomControl: true, // 禁用 + - 按钮
        doubleClickZoom: true, // 禁用双击放大
        attributionControl: false, // 移除右下角leaflet标识
@@ -45,25 +44,49 @@
  mounted() {
    setTimeout(() => {
      this.createrMap();
    }, 500);
    }, 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.pm.addControls(this.options);
      this.locationMap();
    },
    locationMap() {
      if (this.mark && this.map) {
        // 创建一个 Marker 实例：
        var marker = L.marker([eval(this.map_point.y), eval(this.map_point.x)]).addTo(
          this.map
        );
        let that = this
        // 将创建的点标记添加到已有的地图实例：
        marker.on("click", function (e) {
          console.log("666");
          that.$emit("fatherMethod");
        });
      }
    },
  },
  watch: {
    point(newval, oldval) {
      this.map_point = newval;
      this.locationMap();
    },
    zoom(newval, oldval) {
      this.map_zoom = newval;
    },
  },
  props: ["point", "zoom", "mark"],
};
</script>
<style >
.map-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}