处理图片显示问题

zhanghua

2025-04-14 829f5116884f98643ffc5b2a548a600d40c0cedb

 src/components/map/leafletMap.vue

@@ -3,23 +3,23 @@
</template>

<script>

export default {
  name: "map",
  components: {},
  data() {
    return {
      map: null,
      marker: 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}",
        "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,
        center: [28.59582231,119.27226470],
        zoom: 16,
        zoomControl: true, // 禁用 + - 按钮
        doubleClickZoom: true, // 禁用双击放大
        attributionControl: false, // 移除右下角leaflet标识
@@ -43,27 +43,71 @@
    };
  },
  mounted() {
    console.log("/* 创建地图实例 */");
    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.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() {
      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");
        });
      }
    },
  },
  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%;
}