From fd3920d09f52fc93c0c19f4836eec953289924eb Mon Sep 17 00:00:00 2001 From: dai <851733175@qq.com> Date: Wed, 26 Oct 2022 17:33:02 +0800 Subject: [PATCH] =?UTF-8?q?=E6=94=BF=E5=8A=A1=E4=B8=93=E7=94=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/index.html | 4 +-- src/utils/dai-map.js | 21 ++++++++++-- src/utils/tdt-wp-zw.js | 1 + src/views/modules/visual/command/cpts/map.vue | 6 ++-- src/views/modules/visual/cpts/map/index.vue | 32 +++++++++++++++++-- src/views/modules/visual/cpts/map/index2.vue | 32 +++++++++++++++++-- 6 files changed, 82 insertions(+), 14 deletions(-) diff --git a/public/index.html b/public/index.html index 349d6e617..d8a62f67a 100644 --- a/public/index.html +++ b/public/index.html @@ -10,8 +10,8 @@ - - + + diff --git a/src/utils/dai-map.js b/src/utils/dai-map.js index 917eb8756..a14a8af5b 100644 --- a/src/utils/dai-map.js +++ b/src/utils/dai-map.js @@ -325,16 +325,20 @@ export default function init(ele, position, params) { ), }); this.map.addLayer(graphicLayer); - this.marker = new OpenLayers.Geometry.Point(lng, lat); + let pt = new OpenLayers.Geometry.Point(lng, lat); var style = { externalGraphic: require("@/assets/img/common/map-poi.png"), graphicWidth: 32, graphicHeight: 32, }; - var feature = new OpenLayers.Feature.Vector(this.marker, null, style); + var feature = new OpenLayers.Feature.Vector(pt, null, style); graphicLayer.addFeatures([feature]); + this.marker = feature; + this.markerLayer = graphicLayer; } else { - // this.marker.setLngLat(lnglat); + this.marker.geometry.x = lng; + this.marker.geometry.y = lat; + this.markerLayer.redraw(); } }; @@ -361,6 +365,17 @@ export default function init(ele, position, params) { } }); }; + + this.on = function (eventType, fn) { + if (eventType == "dragend") { + this.map.events.register("moveend", null, (e) => { + console.log("dragend", e); + fn(e); + }); + } else { + this.map.events.register(eventType, null, moveendHandler); + } + }; } this.searchNearby = async function (keyword) { diff --git a/src/utils/tdt-wp-zw.js b/src/utils/tdt-wp-zw.js index 31cb70551..297082e7f 100644 --- a/src/utils/tdt-wp-zw.js +++ b/src/utils/tdt-wp-zw.js @@ -1,4 +1,5 @@ export const baseUrl = "http://59.206.203.34/tileservice/SDPubMap"; export default { vec: "http://59.206.203.34/tileservice/SDPubMap?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=sdvec&STYLE=default&TILEMATRIXSET=c&TILEMATRIX={z}&TILEROW={row}&TILECOL={col}&FORMAT=image%2Fpng", + // vec: "http://service.sdmap.gov.cn/tileservice/sdpubmap?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=sdvec&STYLE=default&TILEMATRIXSET=c&TILEMATRIX={z}&TILEROW={x}&TILECOL={y}&FORMAT=image%2Fpng&tk=e758167d5b90c351b70a979c0820840c", }; diff --git a/src/views/modules/visual/command/cpts/map.vue b/src/views/modules/visual/command/cpts/map.vue index ab23ccfd4..2dbd347c4 100644 --- a/src/views/modules/visual/command/cpts/map.vue +++ b/src/views/modules/visual/command/cpts/map.vue @@ -5,14 +5,14 @@
切换深色模式
@@ -372,7 +372,7 @@ export default { 39.9088810666821, ]; - if (mapType == "td") { + if (mapType != "qq") { myMap = new Map({ center: iniCenter, zoom: 18, diff --git a/src/views/modules/visual/cpts/map/index.vue b/src/views/modules/visual/cpts/map/index.vue index b3bbdf28a..5c121d021 100644 --- a/src/views/modules/visual/cpts/map/index.vue +++ b/src/views/modules/visual/cpts/map/index.vue @@ -4,14 +4,14 @@
切换深色模式
@@ -35,6 +35,8 @@ import { import { GaodeMap, Map } from "@antv/l7-maps"; import { spliceIntoChunks } from "@/utils/index"; import { mapType, searchNearby } from "@/utils/dai-map"; +import tdtWp from "@/utils/tdt-wp"; +import tdtWpZw from "@/utils/tdt-wp-zw"; let myMap; let scene; @@ -319,7 +321,7 @@ export default { 39.9088810666821, ]; - if (mapType == "td") { + if (mapType != "qq") { myMap = new Map({ center: iniCenter, zoom: 18, @@ -346,6 +348,8 @@ export default { scene.on("loaded", async () => { if (mapType == "td") { this.iniMapBase(scene); + } else if (mapType == "tdzw") { + this.iniMapBase2(scene); } this.iniMapGrid(scene); @@ -405,6 +409,28 @@ export default { scene.addLayer(annotionLayer); }, + // 初始化底图 天地图山东政务网瓦片 + iniMapBase2(scene) { + console.log("-----------------iniMapBase"); + // 底图服务 + const baseLayer = new RasterLayer({ + zIndex: 1, + }); + baseLayer + .source(tdtWpZw.vec, { + parser: { + type: "rasterTile", + tileSize: 256, + zoomOffset: 0, + }, + }) + .style({ + opacity: 0.7, + }); + + scene.addLayer(baseLayer); + }, + iniMapGrid(scene) { const { darkStyle, lightStyle, polygonData, polygonDotData } = this; diff --git a/src/views/modules/visual/cpts/map/index2.vue b/src/views/modules/visual/cpts/map/index2.vue index 79118a317..31d865db3 100644 --- a/src/views/modules/visual/cpts/map/index2.vue +++ b/src/views/modules/visual/cpts/map/index2.vue @@ -5,13 +5,13 @@ class="btn" v-if="mapStyleType == 'light'" @click="shiftMapStyle('dark')" - v-show="mapType != 'td'" + v-show="mapType == 'qq'" > 切换深色模式
@@ -36,6 +36,8 @@ import { import { GaodeMap, Map } from "@antv/l7-maps"; import { spliceIntoChunks } from "@/utils/index"; import { mapType, searchNearby } from "@/utils/dai-map"; +import tdtWp from "@/utils/tdt-wp"; +import tdtWpZw from "@/utils/tdt-wp-zw"; let myMap; let scene; @@ -338,7 +340,7 @@ export default { 39.9088810666821, ]; - if (mapType == "td") { + if (mapType != "qq") { myMap = new Map({ center: iniCenter, zoom: 18, @@ -365,6 +367,8 @@ export default { scene.on("loaded", async () => { if (mapType == "td") { this.iniMapBase(scene); + } else if (mapType == "tdzw") { + this.iniMapBase2(scene); } this.iniMapGrid(scene); @@ -424,6 +428,28 @@ export default { scene.addLayer(annotionLayer); }, + // 初始化底图 天地图山东政务网瓦片 + iniMapBase2(scene) { + console.log("-----------------iniMapBase"); + // 底图服务 + const baseLayer = new RasterLayer({ + zIndex: 1, + }); + baseLayer + .source(tdtWpZw.vec, { + parser: { + type: "rasterTile", + tileSize: 256, + zoomOffset: 0, + }, + }) + .style({ + opacity: 0.7, + }); + + scene.addLayer(baseLayer); + }, + iniMapGrid(scene) { const { darkStyle, lightStyle, polygonData, polygonDotData } = this;