From 829f5116884f98643ffc5b2a548a600d40c0cedb Mon Sep 17 00:00:00 2001
From: zhanghua <314079846@qq.com>
Date: 星期一, 14 四月 2025 23:09:32 +0800
Subject: [PATCH] 处理图片显示问题
---
src/components/map/leafletMap.vue | 62 ++++++++++++++++++++++++++----
1 files changed, 53 insertions(+), 9 deletions(-)
diff --git a/src/components/map/leafletMap.vue b/src/components/map/leafletMap.vue
index c57b5ca..96e2b42 100644
--- a/src/components/map/leafletMap.vue
+++ b/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, // 绉婚櫎鍙充笅瑙抣eaflet鏍囪瘑
@@ -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%;
}
--
Gitblit v1.8.0