From 5173f8e31d106abd003e123c8679cf53c7940b33 Mon Sep 17 00:00:00 2001
From: zhanghua <314079846@qq.com>
Date: 星期一, 30 一月 2023 11:54:12 +0800
Subject: [PATCH] 网格绘制
---
src/components/map/leafletMap.vue | 2
src/views/systemSetting/device/grid/components/components/dialogForm.vue | 14 ++--
src/views/systemSetting/device/grid/components/components/leafletMap.vue | 118 +++++++++++++++++++++++++++++++++++++++
3 files changed, 127 insertions(+), 7 deletions(-)
diff --git a/src/components/map/leafletMap.vue b/src/components/map/leafletMap.vue
index 5b5faa9..eb74a74 100644
--- a/src/components/map/leafletMap.vue
+++ b/src/components/map/leafletMap.vue
@@ -55,7 +55,7 @@
// 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() {
diff --git a/src/views/systemSetting/device/grid/components/components/dialogForm.vue b/src/views/systemSetting/device/grid/components/components/dialogForm.vue
index 7dba592..d03c0c4 100644
--- a/src/views/systemSetting/device/grid/components/components/dialogForm.vue
+++ b/src/views/systemSetting/device/grid/components/components/dialogForm.vue
@@ -72,7 +72,7 @@
</div>
</template>
<script>
-import Map from "./map.vue";
+import Map from "./leafletMap.vue";
import { createNamespacedHelpers } from "vuex";
const { mapActions } = createNamespacedHelpers("orgGrid");
@@ -164,11 +164,13 @@
});
},
getRegion(e) {
- this.form.center = JSON.stringify([
- e.map.getCenter().lng,
- e.map.getCenter().lat,
- ]);
- this.form.zoom = e.map.getZoom();
+ // this.form.center = JSON.stringify([
+ // e.map.getCenter().lng,
+ // e.map.getCenter().lat,
+ // ]);
+ // this.form.zoom = e.map.getZoom();
+ this.form.center = JSON.stringify(e.center);
+ this.form.zoom = e.zoom;
this.form.region = JSON.stringify(e.path);
},
},
diff --git a/src/views/systemSetting/device/grid/components/components/leafletMap.vue b/src/views/systemSetting/device/grid/components/components/leafletMap.vue
new file mode 100644
index 0000000..d4ed3f2
--- /dev/null
+++ b/src/views/systemSetting/device/grid/components/components/leafletMap.vue
@@ -0,0 +1,118 @@
+<template>
+ <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://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',
+ // 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, // 绉婚櫎鍙充笅瑙抣eaflet鏍囪瘑
+ dragging: true, // 绂佹榧犳爣鎷栧姩婊氬姩
+ boxZoom: true, // 鍐冲畾鍦板浘鏄惁鍙缂╂斁鍒伴紶鏍囨嫋鎷藉嚭鐨勭煩褰㈢殑瑙嗗浘锛岄紶鏍囨嫋鎷芥椂闇�瑕佸悓鏃舵寜浣弒hift閿�.
+ 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() {
+ 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.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("缁樺埗缁撴潫");
+ // // });
+ });
+ let that = this;
+ this.map.on("pm:create", (e) => {
+ let region = [];
+ e.layer._latlngs[0].forEach((point) => {
+ region.push([point.lat, point.lng]);
+ });
+ console.log(region);
+ let obj = {
+ path: region,
+ center: [that.map.getCenter().lat, that.map.getCenter().lng],
+ zoom: that.map.getZoom(),
+ };
+ that.$emit("getRegion", obj);
+ // // workingLayer.on('pm:create', e => {
+ // console.log("鍒涘缓瀹屾垚");
+ // console.log(e);
+ // // });
+ });
+
+ this.locationMap();
+ },
+ locationMap() {
+ if (this.region && this.map) {
+ var polygon = L.polygon(eval(this.region), {
+ color: "green",
+ fillColor: "#f03",
+ fillOpacity: 0.5,
+ }).addTo(this.map);
+ }
+ },
+ },
+ watch: {
+ point(newval, oldval) {
+ this.map_point = newval;
+ this.locationMap();
+ },
+ zoom(newval, oldval) {
+ this.map_zoom = newval;
+ },
+ },
+ props: ["point", "zoom", "region"],
+};
+</script>
+<style >
+.map-container {
+ width: 100%;
+ height: 100%;
+}
+</style>
--
Gitblit v1.8.0