|
|
|
@ -1,14 +1,22 @@ |
|
|
|
<template> |
|
|
|
<div class="m-map"> |
|
|
|
<div class="m-map" :class="{ 'z-td': mapType == 'td' }"> |
|
|
|
<div id="map"></div> |
|
|
|
<div |
|
|
|
class="btn" |
|
|
|
v-if="mapStyleType == 'light'" |
|
|
|
@click="shiftMapStyle('dark')" |
|
|
|
v-show="mapType != 'td'" |
|
|
|
> |
|
|
|
切换深色模式 |
|
|
|
</div> |
|
|
|
<div class="btn" v-else @click="shiftMapStyle('light')">切换浅色模式</div> |
|
|
|
<div |
|
|
|
class="btn" |
|
|
|
v-show="mapType != 'td'" |
|
|
|
v-else |
|
|
|
@click="shiftMapStyle('light')" |
|
|
|
> |
|
|
|
切换浅色模式 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
@ -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; |
|
|
|
|
jiangyy
3 years ago