From 7c20fd15b7fbc2bd5756b39d5ab655cc849ffcc3 Mon Sep 17 00:00:00 2001 From: zhanghua <314079846@qq.com> Date: 星期三, 16 七月 2025 22:39:23 +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