预警研判

zhanghua

2023-04-03 91a2e0d1cdc2b4ad816d5ee450f159ef6cd57486

 src/components/map/leafletMap.vue

@@ -1,112 +1,114 @@
<template>
    <div class="map-container" id="map-container"></div>
  <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://172.28.194.179: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() {
        console.log('/* 创建地图实例 */')
        setTimeout(() => {
            this.createrMap();
        }, 100);
    },
    methods: {
        /* 创建地图实例 */
        createrMap() {
  name: "map",
  components: {},
  data() {
    return {
      map: null,
      marker: null,
      map_point: { x: "119.27179890", y: "28.59027084" },
      map_zoom: 15,
      mapUrl:
        "http://172.28.194.179: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() {
    console.log("/* 创建地图实例 */");
    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.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("绘制结束");
            //   // // });
            // });
            this.locationMap();

        },
        locationMap() {
            debugger
            if (this.map_point && this.map_point.y) {
                this.map.setView([eval(this.map_point.y), eval(this.map_point.x)], this.map_zoom);

            }
            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) {
                    that.$emit("fatherMethod");
                });
            }
        },
      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("绘制结束");
      //   // // });
      // });
      this.locationMap();
    },
    watch: {
        point(newval, oldval) {
            this.map_point = newval;
            this.locationMap();
        },
        zoom(newval, oldval) {
            this.map_zoom = newval;
        },
    locationMap() {
      if (this.map_point && this.map_point.y) {
        this.map.setView(
          [eval(this.map_point.y), eval(this.map_point.x)],
          this.map_zoom
        );
      }
      if (this.mark && this.map) {
        if (this.marker) this.map.removeLayer(this.marker);
        // 创建一个 Marker 实例：
        this.marker = L.marker([
          eval(this.map_point.y),
          eval(this.map_point.x),
        ]).addTo(this.map);
        let that = this;
        // 将创建的点标记添加到已有的地图实例：
        this.marker.on("click", function (e) {
          that.$emit("fatherMethod");
        });
      }
    },
    props: ["point", "zoom", "mark"],
  },
  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 {
    width: 100%;
    height: 100%;
  width: 100%;
  height: 100%;
}
</style>