diff --git a/src/views/modules/visual/command/cpts/map.vue b/src/views/modules/visual/command/cpts/map.vue index 453832394..bcc3a7fbf 100644 --- a/src/views/modules/visual/command/cpts/map.vue +++ b/src/views/modules/visual/command/cpts/map.vue @@ -1,14 +1,22 @@ @@ -17,10 +25,18 @@ import { requestPost } from "@/js/dai/request"; import cptCard from "@/views/modules/visual/cpts/card"; import cptTb from "@/views/modules/visual/cpts/tb"; import nextTick from "dai-js/tools/nextTick"; -import { Scene, PolygonLayer, LineLayer, PointLayer } from "@antv/l7"; +import { + Scene, + PolygonLayer, + LineLayer, + RasterLayer, + PointLayer, +} from "@antv/l7"; import { GaodeMap, Map } from "@antv/l7-maps"; import { spliceIntoChunks } from "@/utils/index"; +import { mapType, searchNearby } from "@/utils/dai-map"; +let myMap; let scene; let polygonLayer; let lineLayer; @@ -37,6 +53,8 @@ export default { data() { return { + mapType, + mapStyleType: localStorage.getItem("mapStyle") || "dark", // srcGridData: {}, darkStyle: { @@ -240,7 +258,6 @@ export default { }; }, - dotData2() { const { dotList2 } = this; return { @@ -293,29 +310,44 @@ export default { styleConfig = lightStyle; } - scene = new Scene({ - id: "map", - logoVisible: false, - map: new GaodeMap({ + const iniCenter = [ + srcGridData.longitude || + this.$store.state.user.longitude || + 116.39743841556731, + srcGridData.latitude || + this.$store.state.user.latitude || + 39.9088810666821, + ]; + + if (mapType == "td") { + myMap = new Map({ + center: iniCenter, + zoom: 18, + }); + } else { + myMap = new GaodeMap({ pitch: this.pitch, style: styleConfig.style, - center: [ - srcGridData.longitude || - this.$store.state.user.longitude || - 116.39743841556731, - srcGridData.latitude || - this.$store.state.user.latitude || - 39.9088810666821, - ], + center: iniCenter, token: "fc14b42e0ca18387866d68ebd4f150c1", zoom: 18, isHotspot: false, resizeEnable: true, doubleClickZoom: false, - }), + }); + } + + scene = new Scene({ + id: "map", + logoVisible: false, + map: myMap, }); scene.on("loaded", async () => { + if (mapType == "td") { + this.iniMapBase(scene); + } + this.iniMapGrid(scene); this.iniMapDot(scene); this.iniMapDot2(scene); @@ -324,6 +356,55 @@ export default { }); }, + // 初始化底图 + iniMapBase(scene) { + console.log("-----------------iniMapBase"); + // 底图服务 + const baseLayer = new RasterLayer({ + zIndex: 1, + }); + baseLayer + .source( + "http://t7.tianditu.com/DataServer?T=vec_w&tk=8a08c117ab9ee45d508686b01cc8d397&x={x}&y={y}&l={z}", + { + parser: { + type: "rasterTile", + tileSize: 256, + // minZoom: 6, + // maxZoom: 15, + zoomOffset: 0, + }, + } + ) + .style({ + opacity: 0.7, + }); + + // 注记服务 + const annotionLayer = new RasterLayer({ + zIndex: 2, + }); + annotionLayer + .source( + "http://t7.tianditu.com/DataServer?T=cva_w&tk=8a08c117ab9ee45d508686b01cc8d397&x={x}&y={y}&l={z}", + { + parser: { + type: "rasterTile", + tileSize: 256, + // minZoom: 6, + // maxZoom: 15, + zoomOffset: 0, + }, + } + ) + .style({ + opacity: 0.5, + }); + + scene.addLayer(baseLayer); + scene.addLayer(annotionLayer); + }, + iniMapGrid(scene) { const { darkStyle, lightStyle, polygonData, polygonDotData } = this; @@ -560,7 +641,7 @@ export default { }, updateGrid() { - const { polygonData,polygonDotData } = this; + const { polygonData, polygonDotData } = this; if (polygonLayer) { polygonLayer.setData(polygonData); lineLayer.setData(polygonData); @@ -597,7 +678,27 @@ export default { border-radius: 10px; overflow: hidden; - #app { + &.z-td { + #app { + /deep/ .l7-scene { + canvas { + background-color: rgba(43, 51, 73, 0.82); + background-image: radial-gradient( + rgba(0, 0, 0, 0), + rgba(0, 0, 0, 0.3), + #000 + ); + } + .gray { + -webkit-filter: grayscale(100%); + filter: grayscale(100%); + opacity: 0.7; + } + } + } + } + + #map { width: 100%; height: 100%; } diff --git a/src/views/modules/visual/cpts/map/index2.vue b/src/views/modules/visual/cpts/map/index2.vue index 700312806..79118a317 100644 --- a/src/views/modules/visual/cpts/map/index2.vue +++ b/src/views/modules/visual/cpts/map/index2.vue @@ -1,14 +1,22 @@ @@ -17,10 +25,19 @@ import { requestPost } from "@/js/dai/request"; import cptCard from "@/views/modules/visual/cpts/card"; import cptTb from "@/views/modules/visual/cpts/tb"; import nextTick from "dai-js/tools/nextTick"; -import { Scene, PolygonLayer, LineLayer, PointLayer, Popup } from "@antv/l7"; +import { + Scene, + PolygonLayer, + LineLayer, + PointLayer, + RasterLayer, + Popup, +} from "@antv/l7"; import { GaodeMap, Map } from "@antv/l7-maps"; import { spliceIntoChunks } from "@/utils/index"; +import { mapType, searchNearby } from "@/utils/dai-map"; +let myMap; let scene; let polygonLayer; let lineLayer; @@ -29,7 +46,7 @@ let posLayer; let circleLayer; let dotLayer; let dotBgLayer; -let dotLayer2 +let dotLayer2; export default { name: "l7", @@ -37,6 +54,8 @@ export default { data() { return { + mapType, + mapStyleType: localStorage.getItem("mapStyle") || "dark", // srcGridData: {}, darkStyle: { @@ -98,7 +117,7 @@ export default { }, isArea: { type: Boolean, - default: false + default: false, }, srcGridData: { type: Object | Array, @@ -126,8 +145,8 @@ export default { }, iconSize: { type: Number, - default: 20 - } + default: 20, + }, }, computed: {}, @@ -152,9 +171,7 @@ export default { polygonData() { const { srcGridData, isArea } = this; if (isArea) { - if ( - !srcGridData || !Array.isArray(srcGridData) - ) { + if (!srcGridData || !Array.isArray(srcGridData)) { return { type: "FeatureCollection", features: [] }; } } else { @@ -166,8 +183,8 @@ export default { return { type: "FeatureCollection", features: [] }; } } - const _Plo = isArea ? srcGridData : srcGridData.children - console.log('_Plo-----', _Plo) + const _Plo = isArea ? srcGridData : srcGridData.children; + console.log("_Plo-----", _Plo); const polygon = [ ..._Plo .filter((item) => item.coordinates && item.coordinates.length > 0) @@ -257,7 +274,6 @@ export default { }; }, - dotData2() { const { dotList2 } = this; return { @@ -313,29 +329,44 @@ export default { styleConfig = lightStyle; } - scene = new Scene({ - id: "map", - logoVisible: false, - map: new GaodeMap({ + const iniCenter = [ + srcGridData.longitude || + this.$store.state.user.longitude || + 116.39743841556731, + srcGridData.latitude || + this.$store.state.user.latitude || + 39.9088810666821, + ]; + + if (mapType == "td") { + myMap = new Map({ + center: iniCenter, + zoom: 18, + }); + } else { + myMap = new GaodeMap({ pitch: this.pitch, style: styleConfig.style, - center: [ - srcGridData.longitude || - this.$store.state.user.longitude || - 116.39743841556731, - srcGridData.latitude || - this.$store.state.user.latitude || - 39.9088810666821, - ], + center: iniCenter, token: "fc14b42e0ca18387866d68ebd4f150c1", zoom: 18, isHotspot: false, resizeEnable: true, doubleClickZoom: false, - }), + }); + } + + scene = new Scene({ + id: "map", + logoVisible: false, + map: myMap, }); scene.on("loaded", async () => { + if (mapType == "td") { + this.iniMapBase(scene); + } + this.iniMapGrid(scene); this.iniMapDot(scene); this.iniMapDot2(scene); @@ -344,6 +375,55 @@ export default { }); }, + // 初始化底图 + iniMapBase(scene) { + console.log("-----------------iniMapBase"); + // 底图服务 + const baseLayer = new RasterLayer({ + zIndex: 1, + }); + baseLayer + .source( + "http://t7.tianditu.com/DataServer?T=vec_w&tk=8a08c117ab9ee45d508686b01cc8d397&x={x}&y={y}&l={z}", + { + parser: { + type: "rasterTile", + tileSize: 256, + // minZoom: 6, + // maxZoom: 15, + zoomOffset: 0, + }, + } + ) + .style({ + opacity: 0.7, + }); + + // 注记服务 + const annotionLayer = new RasterLayer({ + zIndex: 2, + }); + annotionLayer + .source( + "http://t7.tianditu.com/DataServer?T=cva_w&tk=8a08c117ab9ee45d508686b01cc8d397&x={x}&y={y}&l={z}", + { + parser: { + type: "rasterTile", + tileSize: 256, + // minZoom: 6, + // maxZoom: 15, + zoomOffset: 0, + }, + } + ) + .style({ + opacity: 0.5, + }); + + scene.addLayer(baseLayer); + scene.addLayer(annotionLayer); + }, + iniMapGrid(scene) { const { darkStyle, lightStyle, polygonData, polygonDotData } = this; @@ -411,7 +491,10 @@ export default { }); scene.addLayer(circleLayer); - scene.addImage("pos-red", require("@/assets/img/shuju/grid/pos-red.png")); + scene.addImage( + "pos-red", + require("@/assets/img/shuju/grid/pos-red.png") + ); scene.addImage( "pos-green", require("@/assets/img/shuju/grid/pos-green.png") @@ -630,10 +713,31 @@ export default { border-radius: 10px; overflow: hidden; - #app { + #map { width: 100%; height: 100%; } + + &.z-td { + #app { + /deep/ .l7-scene { + canvas { + background-color: rgba(43, 51, 73, 0.82); + background-image: radial-gradient( + rgba(0, 0, 0, 0), + rgba(0, 0, 0, 0.3), + #000 + ); + } + .gray { + -webkit-filter: grayscale(100%); + filter: grayscale(100%); + opacity: 0.7; + } + } + } + } + .btn { position: absolute; bottom: 0;