From 208b54118aa7fdc657b6d8b91e8f6386251dff42 Mon Sep 17 00:00:00 2001 From: dai <851733175@qq.com> Date: Tue, 1 Nov 2022 15:09:07 +0800 Subject: [PATCH] =?UTF-8?q?=E4=B8=B4=E6=97=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env.development | 3 +- package.json | 8 +- .../modules/visual/command/cpts/map-ol.vue | 140 ++++++++++++------ 3 files changed, 101 insertions(+), 50 deletions(-) diff --git a/.env.development b/.env.development index 246fa1ea8..d1c8a3e7c 100644 --- a/.env.development +++ b/.env.development @@ -8,6 +8,7 @@ VUE_APP_API_SERVER = http://192.168.1.140/api # VUE_APP_API_SERVER = https://epmet-dev.elinkservice.cn:41080/api # VUE_APP_API_SERVER = https://epmet-dev.elinkservice.cn/api -VUE_APP_NODE_ENV=dev_sdtdt +# VUE_APP_NODE_ENV=dev_sdtdt +VUE_APP_NODE_ENV=dev #项目根路径 VUE_APP_PUBLIC_PATH=epmet-oper \ No newline at end of file diff --git a/package.json b/package.json index ca1e141d6..a4640d6db 100644 --- a/package.json +++ b/package.json @@ -16,9 +16,9 @@ "et:list": "gulp themes" }, "dependencies": { - "@antv/l7": "^2.9.24", - "@antv/l7-draw": "^3.0.5", - "@antv/l7-maps": "^2.9.14", + "@antv/l7": "2.9.24", + "@antv/l7-draw": "3.0.5", + "@antv/l7-maps": "2.9.14", "@riophae/vue-treeselect": "^0.4.0", "@tinymce/tinymce-vue": "^3.2.8", "async-validator": "^4.2.5", @@ -112,4 +112,4 @@ "not ie <= 10" ] } -} +} \ No newline at end of file diff --git a/src/views/modules/visual/command/cpts/map-ol.vue b/src/views/modules/visual/command/cpts/map-ol.vue index 355973b3a..0959d17f8 100644 --- a/src/views/modules/visual/command/cpts/map-ol.vue +++ b/src/views/modules/visual/command/cpts/map-ol.vue @@ -58,6 +58,7 @@ import VectorSource from "ol/source/Vector.js"; import GeoJSON from "ol/format/GeoJSON.js"; import { Polygon } from "ol/geom"; import Feature from "ol/Feature"; +import { click, pointerMove } from "ol/events/condition.js"; let myMap; let scene; @@ -191,39 +192,6 @@ export default { return []; } - const styles = [ - new Style({ - fill: new Fill({ - color: "rgba(255, 100, 60, 0.5)", - }), - stroke: new Stroke({ - color: "rgba(220, 150, 120, 0.9)", - lineDash: [10, 20], - width: 2, - }), - }), - new Style({ - fill: new Fill({ - color: "rgba(43, 231, 253, 0.3)", - }), - stroke: new Stroke({ - color: "rgba(33, 201, 223, 0.8)", - lineDash: [10, 20], - width: 2, - }), - }), - new Style({ - fill: new Fill({ - color: "rgba(255, 255, 50, 0.3)", - }), - stroke: new Stroke({ - color: "rgba(200, 200, 50, 0.9)", - lineDash: [10, 20], - width: 2, - }), - }), - ]; - const polygons = [ ...srcGridData.children .filter((item) => item.coordinates.length > 0) @@ -243,10 +211,7 @@ export default { 2 ).filter((item) => item.length == 2), ]), - style: styles[index % styles.length], }); - console.log(index % styles.length); - f.setStyle(styles[index % styles.length]); return f; }), ]; @@ -382,7 +347,7 @@ export default { }, methods: { - iniMap() { + async iniMap() { const { darkStyle, lightStyle, srcGridData } = this; if (!srcGridData) return false; @@ -496,15 +461,17 @@ export default { // console.log(transform(e.coordinate, 'EPSG:3857', 'EPSG:4326')); }); + await nextTick(); + this.iniGridArea(myMap); + myMap.on("loadend", async () => { - console.log("--------地图加载完毕"); + console.log("--------地图加载新东西完毕"); // if (mapType == "td") { // this.iniMapBase(scene); // } else if (mapType == "tdzw") { // this.iniMapBase2(scene); // } - this.iniGridArea(myMap); // this.iniMapDot(scene); // this.iniMapDot2(scene); // await nextTick(0); @@ -515,18 +482,101 @@ export default { iniGridArea(map) { const { darkStyle, lightStyle, polygonData, polygonDotData } = this; + console.log("--------------初始化网格"); + + const polygonSource = new VectorSource({ + features: polygonData, + }); + polygonLayer = new VectorLayer({ - title: "网格多边形", - source: new VectorSource({ - features: polygonData, - }), - opacity: 0.8, + title: "gridArea", + source: polygonSource, + opacity: 1, className: "", - zIndex: 1, + zIndex: 10, background: "", }); + polygonLayer.getSource().on("featuresloadstart", async (evt) => { + console.log("===============featuresloadstart", evt); + + await nextTick(); + polygonLayer + .getSource() + .getFeatures() + .forEach((item, index) => { + const baseStyles = [ + new Style({ + fill: new Fill({ + color: "rgba(255, 100, 60, 0.5)", + }), + stroke: new Stroke({ + color: "rgba(220, 150, 120, 0.9)", + width: 2, + }), + }), + new Style({ + fill: new Fill({ + color: "rgba(43, 231, 253, 0.3)", + }), + stroke: new Stroke({ + color: "rgba(33, 201, 223, 0.8)", + width: 2, + }), + }), + new Style({ + fill: new Fill({ + color: "rgba(255, 255, 50, 0.3)", + }), + stroke: new Stroke({ + color: "rgba(200, 200, 50, 0.9)", + width: 2, + }), + }), + ]; + + setInterval(() => { + let currStyle = item.getStyle(); + if (!Array.isArray(currStyle)) { + item.setStyle([ + baseStyles[index % baseStyles.length], + new Style({ + stroke: new Stroke({ + color: [0, 0, 0, 0.5], + width: 2, + lineDash: [6, 12], + lineDashOffset: 0, + }), + }), + ]); + } else { + let currStroke = currStyle[1].getStroke(); + let lineDashOffset = currStroke.getLineDashOffset(); + currStroke.setLineDashOffset( + lineDashOffset == 16 ? 0 : lineDashOffset + 2 + ); + item.setStyle(currStyle); + } + }, 100); + }); + }); + + let clickSelect = new Select({ + condition: click, + layers: [polygonLayer], + }); + clickSelect.on("select", (e) => { + let fet = e.selected[0]; + console.log("点击我了", fet.getProperties()); + // let props = fet.getProperties().properties; + // this.$emit("clickAgency", props); + // if (props.level == "grid") { + // this.handleClickDot({ ...props, placeType: "grid" }, props.center); + // } + }); + map.addLayer(polygonLayer); + map.addInteraction(clickSelect); }, updateGridArea() {},