From 91a2e0d1cdc2b4ad816d5ee450f159ef6cd57486 Mon Sep 17 00:00:00 2001
From: zhanghua <314079846@qq.com>
Date: 星期一, 03 四月 2023 21:51:27 +0800
Subject: [PATCH] 预警研判
---
src/components/map/leafletMap.vue | 198 +++++++++++++++++++++++++------------------------
1 files changed, 100 insertions(+), 98 deletions(-)
diff --git a/src/components/map/leafletMap.vue b/src/components/map/leafletMap.vue
index 9deeb37..96e2b42 100644
--- a/src/components/map/leafletMap.vue
+++ b/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, // 绉婚櫎鍙充笅瑙抣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() {
- 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, // 绉婚櫎鍙充笅瑙抣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() {
+ 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>
--
Gitblit v1.8.0