diff --git a/config/dev.env.js b/config/dev.env.js
index 2b11678..1a12bc2 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -6,10 +6,5 @@
// 将两个配置对象合并,最终结果是 NODE_ENV:‘"development"'
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
- // BASE_API: '"http://rest.apizza.net/mock/cfbb939c147bb6d68372de83af189fee/"',
- // BASE_API: '"http://119.254.103.80:14537"'
- // BASE_API: '"http://192.168.0.225:14537"'
- // BASE_API: '"http://localhost:8080/api/"'
BASE_API: '"http://192.168.0.102:11414"'
- // BASE_API: '"http://127.0.0.1:11414"'
})
diff --git a/config/dev.env.js b/config/dev.env.js
index 2b11678..1a12bc2 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -6,10 +6,5 @@
// 将两个配置对象合并,最终结果是 NODE_ENV:‘"development"'
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
- // BASE_API: '"http://rest.apizza.net/mock/cfbb939c147bb6d68372de83af189fee/"',
- // BASE_API: '"http://119.254.103.80:14537"'
- // BASE_API: '"http://192.168.0.225:14537"'
- // BASE_API: '"http://localhost:8080/api/"'
BASE_API: '"http://192.168.0.102:11414"'
- // BASE_API: '"http://127.0.0.1:11414"'
})
diff --git a/src/assets/global_images/popwin.png b/src/assets/global_images/popwin.png
new file mode 100644
index 0000000..130b595
--- /dev/null
+++ b/src/assets/global_images/popwin.png
Binary files differ
diff --git a/config/dev.env.js b/config/dev.env.js
index 2b11678..1a12bc2 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -6,10 +6,5 @@
// 将两个配置对象合并,最终结果是 NODE_ENV:‘"development"'
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
- // BASE_API: '"http://rest.apizza.net/mock/cfbb939c147bb6d68372de83af189fee/"',
- // BASE_API: '"http://119.254.103.80:14537"'
- // BASE_API: '"http://192.168.0.225:14537"'
- // BASE_API: '"http://localhost:8080/api/"'
BASE_API: '"http://192.168.0.102:11414"'
- // BASE_API: '"http://127.0.0.1:11414"'
})
diff --git a/src/assets/global_images/popwin.png b/src/assets/global_images/popwin.png
new file mode 100644
index 0000000..130b595
--- /dev/null
+++ b/src/assets/global_images/popwin.png
Binary files differ
diff --git a/src/components/Map/components/cameraLayer.vue b/src/components/Map/components/cameraLayer.vue
new file mode 100644
index 0000000..27403d1
--- /dev/null
+++ b/src/components/Map/components/cameraLayer.vue
@@ -0,0 +1,110 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/config/dev.env.js b/config/dev.env.js
index 2b11678..1a12bc2 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -6,10 +6,5 @@
// 将两个配置对象合并,最终结果是 NODE_ENV:‘"development"'
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
- // BASE_API: '"http://rest.apizza.net/mock/cfbb939c147bb6d68372de83af189fee/"',
- // BASE_API: '"http://119.254.103.80:14537"'
- // BASE_API: '"http://192.168.0.225:14537"'
- // BASE_API: '"http://localhost:8080/api/"'
BASE_API: '"http://192.168.0.102:11414"'
- // BASE_API: '"http://127.0.0.1:11414"'
})
diff --git a/src/assets/global_images/popwin.png b/src/assets/global_images/popwin.png
new file mode 100644
index 0000000..130b595
--- /dev/null
+++ b/src/assets/global_images/popwin.png
Binary files differ
diff --git a/src/components/Map/components/cameraLayer.vue b/src/components/Map/components/cameraLayer.vue
new file mode 100644
index 0000000..27403d1
--- /dev/null
+++ b/src/components/Map/components/cameraLayer.vue
@@ -0,0 +1,110 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/earthquakeLayer.vue b/src/components/Map/components/earthquakeLayer.vue
index e7efdc1..a4a0703 100644
--- a/src/components/Map/components/earthquakeLayer.vue
+++ b/src/components/Map/components/earthquakeLayer.vue
@@ -71,6 +71,7 @@
loadData() {
const { mars3d, Cesium, layer, height, size } = this
const date = getToday()
+ // const date = '2021-04-19'
getEarthquakeList(date).then((res) => {
if (res.data.length === 0) {
this.$message.info('今日无地震')
diff --git a/config/dev.env.js b/config/dev.env.js
index 2b11678..1a12bc2 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -6,10 +6,5 @@
// 将两个配置对象合并,最终结果是 NODE_ENV:‘"development"'
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
- // BASE_API: '"http://rest.apizza.net/mock/cfbb939c147bb6d68372de83af189fee/"',
- // BASE_API: '"http://119.254.103.80:14537"'
- // BASE_API: '"http://192.168.0.225:14537"'
- // BASE_API: '"http://localhost:8080/api/"'
BASE_API: '"http://192.168.0.102:11414"'
- // BASE_API: '"http://127.0.0.1:11414"'
})
diff --git a/src/assets/global_images/popwin.png b/src/assets/global_images/popwin.png
new file mode 100644
index 0000000..130b595
--- /dev/null
+++ b/src/assets/global_images/popwin.png
Binary files differ
diff --git a/src/components/Map/components/cameraLayer.vue b/src/components/Map/components/cameraLayer.vue
new file mode 100644
index 0000000..27403d1
--- /dev/null
+++ b/src/components/Map/components/cameraLayer.vue
@@ -0,0 +1,110 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/earthquakeLayer.vue b/src/components/Map/components/earthquakeLayer.vue
index e7efdc1..a4a0703 100644
--- a/src/components/Map/components/earthquakeLayer.vue
+++ b/src/components/Map/components/earthquakeLayer.vue
@@ -71,6 +71,7 @@
loadData() {
const { mars3d, Cesium, layer, height, size } = this
const date = getToday()
+ // const date = '2021-04-19'
getEarthquakeList(date).then((res) => {
if (res.data.length === 0) {
this.$message.info('今日无地震')
diff --git a/src/components/Map/components/hcaHeatLayer.vue b/src/components/Map/components/hcaHeatLayer.vue
index e4d3a21..9233d92 100644
--- a/src/components/Map/components/hcaHeatLayer.vue
+++ b/src/components/Map/components/hcaHeatLayer.vue
@@ -40,9 +40,10 @@
methods: {
load() {
console.log('load')
+ if (this.show) this.initLayer()
},
initLayer() {
- const { mars3d, map } = this
+ const { map } = this
if (map) {
if (this.show) {
if (this.layer) {
diff --git a/config/dev.env.js b/config/dev.env.js
index 2b11678..1a12bc2 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -6,10 +6,5 @@
// 将两个配置对象合并,最终结果是 NODE_ENV:‘"development"'
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
- // BASE_API: '"http://rest.apizza.net/mock/cfbb939c147bb6d68372de83af189fee/"',
- // BASE_API: '"http://119.254.103.80:14537"'
- // BASE_API: '"http://192.168.0.225:14537"'
- // BASE_API: '"http://localhost:8080/api/"'
BASE_API: '"http://192.168.0.102:11414"'
- // BASE_API: '"http://127.0.0.1:11414"'
})
diff --git a/src/assets/global_images/popwin.png b/src/assets/global_images/popwin.png
new file mode 100644
index 0000000..130b595
--- /dev/null
+++ b/src/assets/global_images/popwin.png
Binary files differ
diff --git a/src/components/Map/components/cameraLayer.vue b/src/components/Map/components/cameraLayer.vue
new file mode 100644
index 0000000..27403d1
--- /dev/null
+++ b/src/components/Map/components/cameraLayer.vue
@@ -0,0 +1,110 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/earthquakeLayer.vue b/src/components/Map/components/earthquakeLayer.vue
index e7efdc1..a4a0703 100644
--- a/src/components/Map/components/earthquakeLayer.vue
+++ b/src/components/Map/components/earthquakeLayer.vue
@@ -71,6 +71,7 @@
loadData() {
const { mars3d, Cesium, layer, height, size } = this
const date = getToday()
+ // const date = '2021-04-19'
getEarthquakeList(date).then((res) => {
if (res.data.length === 0) {
this.$message.info('今日无地震')
diff --git a/src/components/Map/components/hcaHeatLayer.vue b/src/components/Map/components/hcaHeatLayer.vue
index e4d3a21..9233d92 100644
--- a/src/components/Map/components/hcaHeatLayer.vue
+++ b/src/components/Map/components/hcaHeatLayer.vue
@@ -40,9 +40,10 @@
methods: {
load() {
console.log('load')
+ if (this.show) this.initLayer()
},
initLayer() {
- const { mars3d, map } = this
+ const { map } = this
if (map) {
if (this.show) {
if (this.layer) {
diff --git a/src/components/Map/components/hcaPointLayer.vue b/src/components/Map/components/hcaPointLayer.vue
new file mode 100644
index 0000000..b518699
--- /dev/null
+++ b/src/components/Map/components/hcaPointLayer.vue
@@ -0,0 +1,142 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/config/dev.env.js b/config/dev.env.js
index 2b11678..1a12bc2 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -6,10 +6,5 @@
// 将两个配置对象合并,最终结果是 NODE_ENV:‘"development"'
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
- // BASE_API: '"http://rest.apizza.net/mock/cfbb939c147bb6d68372de83af189fee/"',
- // BASE_API: '"http://119.254.103.80:14537"'
- // BASE_API: '"http://192.168.0.225:14537"'
- // BASE_API: '"http://localhost:8080/api/"'
BASE_API: '"http://192.168.0.102:11414"'
- // BASE_API: '"http://127.0.0.1:11414"'
})
diff --git a/src/assets/global_images/popwin.png b/src/assets/global_images/popwin.png
new file mode 100644
index 0000000..130b595
--- /dev/null
+++ b/src/assets/global_images/popwin.png
Binary files differ
diff --git a/src/components/Map/components/cameraLayer.vue b/src/components/Map/components/cameraLayer.vue
new file mode 100644
index 0000000..27403d1
--- /dev/null
+++ b/src/components/Map/components/cameraLayer.vue
@@ -0,0 +1,110 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/earthquakeLayer.vue b/src/components/Map/components/earthquakeLayer.vue
index e7efdc1..a4a0703 100644
--- a/src/components/Map/components/earthquakeLayer.vue
+++ b/src/components/Map/components/earthquakeLayer.vue
@@ -71,6 +71,7 @@
loadData() {
const { mars3d, Cesium, layer, height, size } = this
const date = getToday()
+ // const date = '2021-04-19'
getEarthquakeList(date).then((res) => {
if (res.data.length === 0) {
this.$message.info('今日无地震')
diff --git a/src/components/Map/components/hcaHeatLayer.vue b/src/components/Map/components/hcaHeatLayer.vue
index e4d3a21..9233d92 100644
--- a/src/components/Map/components/hcaHeatLayer.vue
+++ b/src/components/Map/components/hcaHeatLayer.vue
@@ -40,9 +40,10 @@
methods: {
load() {
console.log('load')
+ if (this.show) this.initLayer()
},
initLayer() {
- const { mars3d, map } = this
+ const { map } = this
if (map) {
if (this.show) {
if (this.layer) {
diff --git a/src/components/Map/components/hcaPointLayer.vue b/src/components/Map/components/hcaPointLayer.vue
new file mode 100644
index 0000000..b518699
--- /dev/null
+++ b/src/components/Map/components/hcaPointLayer.vue
@@ -0,0 +1,142 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/liquidFactoryLayer.vue b/src/components/Map/components/liquidFactoryLayer.vue
index 6845b93..3a1c0eb 100644
--- a/src/components/Map/components/liquidFactoryLayer.vue
+++ b/src/components/Map/components/liquidFactoryLayer.vue
@@ -72,15 +72,15 @@
}
},
loadData() {
- const { mars3d, layer } = this
+ const { mars3d, layer, height } = this
axios.get('static/config/liquidFactory.json').then((res) => {
res = res.data
if (res.code === 200) {
this.data = res.data[0].data
- for (const station of this.data) {
+ for (const item of this.data) {
const graphic = new mars3d.graphic.ModelEntity({
- name: station.name,
- position: [station.x, station.y, 0],
+ name: item.name,
+ position: [parseFloat(item.value[0]), parseFloat(item.value[1]), height],
url: 'static/gltf/output/yehuagongchang.gltf',
style: {
scale: 3,
@@ -88,7 +88,7 @@
minimumPixelSize: 30,
clampToGround: true
},
- tooltip: station.name
+ tooltip: item.name
})
layer.addGraphic(graphic)
}
diff --git a/config/dev.env.js b/config/dev.env.js
index 2b11678..1a12bc2 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -6,10 +6,5 @@
// 将两个配置对象合并,最终结果是 NODE_ENV:‘"development"'
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
- // BASE_API: '"http://rest.apizza.net/mock/cfbb939c147bb6d68372de83af189fee/"',
- // BASE_API: '"http://119.254.103.80:14537"'
- // BASE_API: '"http://192.168.0.225:14537"'
- // BASE_API: '"http://localhost:8080/api/"'
BASE_API: '"http://192.168.0.102:11414"'
- // BASE_API: '"http://127.0.0.1:11414"'
})
diff --git a/src/assets/global_images/popwin.png b/src/assets/global_images/popwin.png
new file mode 100644
index 0000000..130b595
--- /dev/null
+++ b/src/assets/global_images/popwin.png
Binary files differ
diff --git a/src/components/Map/components/cameraLayer.vue b/src/components/Map/components/cameraLayer.vue
new file mode 100644
index 0000000..27403d1
--- /dev/null
+++ b/src/components/Map/components/cameraLayer.vue
@@ -0,0 +1,110 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/earthquakeLayer.vue b/src/components/Map/components/earthquakeLayer.vue
index e7efdc1..a4a0703 100644
--- a/src/components/Map/components/earthquakeLayer.vue
+++ b/src/components/Map/components/earthquakeLayer.vue
@@ -71,6 +71,7 @@
loadData() {
const { mars3d, Cesium, layer, height, size } = this
const date = getToday()
+ // const date = '2021-04-19'
getEarthquakeList(date).then((res) => {
if (res.data.length === 0) {
this.$message.info('今日无地震')
diff --git a/src/components/Map/components/hcaHeatLayer.vue b/src/components/Map/components/hcaHeatLayer.vue
index e4d3a21..9233d92 100644
--- a/src/components/Map/components/hcaHeatLayer.vue
+++ b/src/components/Map/components/hcaHeatLayer.vue
@@ -40,9 +40,10 @@
methods: {
load() {
console.log('load')
+ if (this.show) this.initLayer()
},
initLayer() {
- const { mars3d, map } = this
+ const { map } = this
if (map) {
if (this.show) {
if (this.layer) {
diff --git a/src/components/Map/components/hcaPointLayer.vue b/src/components/Map/components/hcaPointLayer.vue
new file mode 100644
index 0000000..b518699
--- /dev/null
+++ b/src/components/Map/components/hcaPointLayer.vue
@@ -0,0 +1,142 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/liquidFactoryLayer.vue b/src/components/Map/components/liquidFactoryLayer.vue
index 6845b93..3a1c0eb 100644
--- a/src/components/Map/components/liquidFactoryLayer.vue
+++ b/src/components/Map/components/liquidFactoryLayer.vue
@@ -72,15 +72,15 @@
}
},
loadData() {
- const { mars3d, layer } = this
+ const { mars3d, layer, height } = this
axios.get('static/config/liquidFactory.json').then((res) => {
res = res.data
if (res.code === 200) {
this.data = res.data[0].data
- for (const station of this.data) {
+ for (const item of this.data) {
const graphic = new mars3d.graphic.ModelEntity({
- name: station.name,
- position: [station.x, station.y, 0],
+ name: item.name,
+ position: [parseFloat(item.value[0]), parseFloat(item.value[1]), height],
url: 'static/gltf/output/yehuagongchang.gltf',
style: {
scale: 3,
@@ -88,7 +88,7 @@
minimumPixelSize: 30,
clampToGround: true
},
- tooltip: station.name
+ tooltip: item.name
})
layer.addGraphic(graphic)
}
diff --git a/src/components/Map/components/manageStationLayer.vue b/src/components/Map/components/manageStationLayer.vue
index c0aff38..7b976d6 100644
--- a/src/components/Map/components/manageStationLayer.vue
+++ b/src/components/Map/components/manageStationLayer.vue
@@ -56,6 +56,7 @@
methods: {
load() {
console.log('load')
+ if (this.show) this.initLayer()
},
initLayer() {
const { mars3d, map } = this
diff --git a/config/dev.env.js b/config/dev.env.js
index 2b11678..1a12bc2 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -6,10 +6,5 @@
// 将两个配置对象合并,最终结果是 NODE_ENV:‘"development"'
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
- // BASE_API: '"http://rest.apizza.net/mock/cfbb939c147bb6d68372de83af189fee/"',
- // BASE_API: '"http://119.254.103.80:14537"'
- // BASE_API: '"http://192.168.0.225:14537"'
- // BASE_API: '"http://localhost:8080/api/"'
BASE_API: '"http://192.168.0.102:11414"'
- // BASE_API: '"http://127.0.0.1:11414"'
})
diff --git a/src/assets/global_images/popwin.png b/src/assets/global_images/popwin.png
new file mode 100644
index 0000000..130b595
--- /dev/null
+++ b/src/assets/global_images/popwin.png
Binary files differ
diff --git a/src/components/Map/components/cameraLayer.vue b/src/components/Map/components/cameraLayer.vue
new file mode 100644
index 0000000..27403d1
--- /dev/null
+++ b/src/components/Map/components/cameraLayer.vue
@@ -0,0 +1,110 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/earthquakeLayer.vue b/src/components/Map/components/earthquakeLayer.vue
index e7efdc1..a4a0703 100644
--- a/src/components/Map/components/earthquakeLayer.vue
+++ b/src/components/Map/components/earthquakeLayer.vue
@@ -71,6 +71,7 @@
loadData() {
const { mars3d, Cesium, layer, height, size } = this
const date = getToday()
+ // const date = '2021-04-19'
getEarthquakeList(date).then((res) => {
if (res.data.length === 0) {
this.$message.info('今日无地震')
diff --git a/src/components/Map/components/hcaHeatLayer.vue b/src/components/Map/components/hcaHeatLayer.vue
index e4d3a21..9233d92 100644
--- a/src/components/Map/components/hcaHeatLayer.vue
+++ b/src/components/Map/components/hcaHeatLayer.vue
@@ -40,9 +40,10 @@
methods: {
load() {
console.log('load')
+ if (this.show) this.initLayer()
},
initLayer() {
- const { mars3d, map } = this
+ const { map } = this
if (map) {
if (this.show) {
if (this.layer) {
diff --git a/src/components/Map/components/hcaPointLayer.vue b/src/components/Map/components/hcaPointLayer.vue
new file mode 100644
index 0000000..b518699
--- /dev/null
+++ b/src/components/Map/components/hcaPointLayer.vue
@@ -0,0 +1,142 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/liquidFactoryLayer.vue b/src/components/Map/components/liquidFactoryLayer.vue
index 6845b93..3a1c0eb 100644
--- a/src/components/Map/components/liquidFactoryLayer.vue
+++ b/src/components/Map/components/liquidFactoryLayer.vue
@@ -72,15 +72,15 @@
}
},
loadData() {
- const { mars3d, layer } = this
+ const { mars3d, layer, height } = this
axios.get('static/config/liquidFactory.json').then((res) => {
res = res.data
if (res.code === 200) {
this.data = res.data[0].data
- for (const station of this.data) {
+ for (const item of this.data) {
const graphic = new mars3d.graphic.ModelEntity({
- name: station.name,
- position: [station.x, station.y, 0],
+ name: item.name,
+ position: [parseFloat(item.value[0]), parseFloat(item.value[1]), height],
url: 'static/gltf/output/yehuagongchang.gltf',
style: {
scale: 3,
@@ -88,7 +88,7 @@
minimumPixelSize: 30,
clampToGround: true
},
- tooltip: station.name
+ tooltip: item.name
})
layer.addGraphic(graphic)
}
diff --git a/src/components/Map/components/manageStationLayer.vue b/src/components/Map/components/manageStationLayer.vue
index c0aff38..7b976d6 100644
--- a/src/components/Map/components/manageStationLayer.vue
+++ b/src/components/Map/components/manageStationLayer.vue
@@ -56,6 +56,7 @@
methods: {
load() {
console.log('load')
+ if (this.show) this.initLayer()
},
initLayer() {
const { mars3d, map } = this
diff --git a/src/components/Map/components/needLayerCone.vue b/src/components/Map/components/needLayerCone.vue
new file mode 100644
index 0000000..373bf3c
--- /dev/null
+++ b/src/components/Map/components/needLayerCone.vue
@@ -0,0 +1,169 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/config/dev.env.js b/config/dev.env.js
index 2b11678..1a12bc2 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -6,10 +6,5 @@
// 将两个配置对象合并,最终结果是 NODE_ENV:‘"development"'
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
- // BASE_API: '"http://rest.apizza.net/mock/cfbb939c147bb6d68372de83af189fee/"',
- // BASE_API: '"http://119.254.103.80:14537"'
- // BASE_API: '"http://192.168.0.225:14537"'
- // BASE_API: '"http://localhost:8080/api/"'
BASE_API: '"http://192.168.0.102:11414"'
- // BASE_API: '"http://127.0.0.1:11414"'
})
diff --git a/src/assets/global_images/popwin.png b/src/assets/global_images/popwin.png
new file mode 100644
index 0000000..130b595
--- /dev/null
+++ b/src/assets/global_images/popwin.png
Binary files differ
diff --git a/src/components/Map/components/cameraLayer.vue b/src/components/Map/components/cameraLayer.vue
new file mode 100644
index 0000000..27403d1
--- /dev/null
+++ b/src/components/Map/components/cameraLayer.vue
@@ -0,0 +1,110 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/earthquakeLayer.vue b/src/components/Map/components/earthquakeLayer.vue
index e7efdc1..a4a0703 100644
--- a/src/components/Map/components/earthquakeLayer.vue
+++ b/src/components/Map/components/earthquakeLayer.vue
@@ -71,6 +71,7 @@
loadData() {
const { mars3d, Cesium, layer, height, size } = this
const date = getToday()
+ // const date = '2021-04-19'
getEarthquakeList(date).then((res) => {
if (res.data.length === 0) {
this.$message.info('今日无地震')
diff --git a/src/components/Map/components/hcaHeatLayer.vue b/src/components/Map/components/hcaHeatLayer.vue
index e4d3a21..9233d92 100644
--- a/src/components/Map/components/hcaHeatLayer.vue
+++ b/src/components/Map/components/hcaHeatLayer.vue
@@ -40,9 +40,10 @@
methods: {
load() {
console.log('load')
+ if (this.show) this.initLayer()
},
initLayer() {
- const { mars3d, map } = this
+ const { map } = this
if (map) {
if (this.show) {
if (this.layer) {
diff --git a/src/components/Map/components/hcaPointLayer.vue b/src/components/Map/components/hcaPointLayer.vue
new file mode 100644
index 0000000..b518699
--- /dev/null
+++ b/src/components/Map/components/hcaPointLayer.vue
@@ -0,0 +1,142 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/liquidFactoryLayer.vue b/src/components/Map/components/liquidFactoryLayer.vue
index 6845b93..3a1c0eb 100644
--- a/src/components/Map/components/liquidFactoryLayer.vue
+++ b/src/components/Map/components/liquidFactoryLayer.vue
@@ -72,15 +72,15 @@
}
},
loadData() {
- const { mars3d, layer } = this
+ const { mars3d, layer, height } = this
axios.get('static/config/liquidFactory.json').then((res) => {
res = res.data
if (res.code === 200) {
this.data = res.data[0].data
- for (const station of this.data) {
+ for (const item of this.data) {
const graphic = new mars3d.graphic.ModelEntity({
- name: station.name,
- position: [station.x, station.y, 0],
+ name: item.name,
+ position: [parseFloat(item.value[0]), parseFloat(item.value[1]), height],
url: 'static/gltf/output/yehuagongchang.gltf',
style: {
scale: 3,
@@ -88,7 +88,7 @@
minimumPixelSize: 30,
clampToGround: true
},
- tooltip: station.name
+ tooltip: item.name
})
layer.addGraphic(graphic)
}
diff --git a/src/components/Map/components/manageStationLayer.vue b/src/components/Map/components/manageStationLayer.vue
index c0aff38..7b976d6 100644
--- a/src/components/Map/components/manageStationLayer.vue
+++ b/src/components/Map/components/manageStationLayer.vue
@@ -56,6 +56,7 @@
methods: {
load() {
console.log('load')
+ if (this.show) this.initLayer()
},
initLayer() {
const { mars3d, map } = this
diff --git a/src/components/Map/components/needLayerCone.vue b/src/components/Map/components/needLayerCone.vue
new file mode 100644
index 0000000..373bf3c
--- /dev/null
+++ b/src/components/Map/components/needLayerCone.vue
@@ -0,0 +1,169 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/pipeLayer.vue b/src/components/Map/components/pipeLayer.vue
index 64142a7..0129de7 100644
--- a/src/components/Map/components/pipeLayer.vue
+++ b/src/components/Map/components/pipeLayer.vue
@@ -21,11 +21,11 @@
}, // 发光强度
opacity: {
type: Number,
- default: 0.9
+ default: 1
}, // 透明度
width: {
type: Number,
- default: 10
+ default: 5
}, // 线宽度
height: {
type: Number,
@@ -33,7 +33,7 @@
}, // 高度
color: {
type: String,
- default: '#92ffdf'
+ default: '#5affb2'
}, // 偏移值
show: {
type: Boolean,
@@ -69,10 +69,11 @@
}
this.layer = new mars3d.layer.GeoJsonLayer({
type: 'geojson',
- url: 'static/geojson/pipe.json',
+ url: 'static/geojson/pipe_old.json',
symbol: {
styleOptions: {
- materialType: 'PolylineGlow',
+ lineType: 'glow',
+ // materialType: 'LineFlicker',
glowPower: glowPower, // 发光强度
width: width, // 线宽
color: color,
@@ -83,7 +84,7 @@
show: true
})
map.addLayer(this.layer)
- this.loadData()
+ // this.loadData()
}
},
// 移除图层
diff --git a/config/dev.env.js b/config/dev.env.js
index 2b11678..1a12bc2 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -6,10 +6,5 @@
// 将两个配置对象合并,最终结果是 NODE_ENV:‘"development"'
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
- // BASE_API: '"http://rest.apizza.net/mock/cfbb939c147bb6d68372de83af189fee/"',
- // BASE_API: '"http://119.254.103.80:14537"'
- // BASE_API: '"http://192.168.0.225:14537"'
- // BASE_API: '"http://localhost:8080/api/"'
BASE_API: '"http://192.168.0.102:11414"'
- // BASE_API: '"http://127.0.0.1:11414"'
})
diff --git a/src/assets/global_images/popwin.png b/src/assets/global_images/popwin.png
new file mode 100644
index 0000000..130b595
--- /dev/null
+++ b/src/assets/global_images/popwin.png
Binary files differ
diff --git a/src/components/Map/components/cameraLayer.vue b/src/components/Map/components/cameraLayer.vue
new file mode 100644
index 0000000..27403d1
--- /dev/null
+++ b/src/components/Map/components/cameraLayer.vue
@@ -0,0 +1,110 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/earthquakeLayer.vue b/src/components/Map/components/earthquakeLayer.vue
index e7efdc1..a4a0703 100644
--- a/src/components/Map/components/earthquakeLayer.vue
+++ b/src/components/Map/components/earthquakeLayer.vue
@@ -71,6 +71,7 @@
loadData() {
const { mars3d, Cesium, layer, height, size } = this
const date = getToday()
+ // const date = '2021-04-19'
getEarthquakeList(date).then((res) => {
if (res.data.length === 0) {
this.$message.info('今日无地震')
diff --git a/src/components/Map/components/hcaHeatLayer.vue b/src/components/Map/components/hcaHeatLayer.vue
index e4d3a21..9233d92 100644
--- a/src/components/Map/components/hcaHeatLayer.vue
+++ b/src/components/Map/components/hcaHeatLayer.vue
@@ -40,9 +40,10 @@
methods: {
load() {
console.log('load')
+ if (this.show) this.initLayer()
},
initLayer() {
- const { mars3d, map } = this
+ const { map } = this
if (map) {
if (this.show) {
if (this.layer) {
diff --git a/src/components/Map/components/hcaPointLayer.vue b/src/components/Map/components/hcaPointLayer.vue
new file mode 100644
index 0000000..b518699
--- /dev/null
+++ b/src/components/Map/components/hcaPointLayer.vue
@@ -0,0 +1,142 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/liquidFactoryLayer.vue b/src/components/Map/components/liquidFactoryLayer.vue
index 6845b93..3a1c0eb 100644
--- a/src/components/Map/components/liquidFactoryLayer.vue
+++ b/src/components/Map/components/liquidFactoryLayer.vue
@@ -72,15 +72,15 @@
}
},
loadData() {
- const { mars3d, layer } = this
+ const { mars3d, layer, height } = this
axios.get('static/config/liquidFactory.json').then((res) => {
res = res.data
if (res.code === 200) {
this.data = res.data[0].data
- for (const station of this.data) {
+ for (const item of this.data) {
const graphic = new mars3d.graphic.ModelEntity({
- name: station.name,
- position: [station.x, station.y, 0],
+ name: item.name,
+ position: [parseFloat(item.value[0]), parseFloat(item.value[1]), height],
url: 'static/gltf/output/yehuagongchang.gltf',
style: {
scale: 3,
@@ -88,7 +88,7 @@
minimumPixelSize: 30,
clampToGround: true
},
- tooltip: station.name
+ tooltip: item.name
})
layer.addGraphic(graphic)
}
diff --git a/src/components/Map/components/manageStationLayer.vue b/src/components/Map/components/manageStationLayer.vue
index c0aff38..7b976d6 100644
--- a/src/components/Map/components/manageStationLayer.vue
+++ b/src/components/Map/components/manageStationLayer.vue
@@ -56,6 +56,7 @@
methods: {
load() {
console.log('load')
+ if (this.show) this.initLayer()
},
initLayer() {
const { mars3d, map } = this
diff --git a/src/components/Map/components/needLayerCone.vue b/src/components/Map/components/needLayerCone.vue
new file mode 100644
index 0000000..373bf3c
--- /dev/null
+++ b/src/components/Map/components/needLayerCone.vue
@@ -0,0 +1,169 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/pipeLayer.vue b/src/components/Map/components/pipeLayer.vue
index 64142a7..0129de7 100644
--- a/src/components/Map/components/pipeLayer.vue
+++ b/src/components/Map/components/pipeLayer.vue
@@ -21,11 +21,11 @@
}, // 发光强度
opacity: {
type: Number,
- default: 0.9
+ default: 1
}, // 透明度
width: {
type: Number,
- default: 10
+ default: 5
}, // 线宽度
height: {
type: Number,
@@ -33,7 +33,7 @@
}, // 高度
color: {
type: String,
- default: '#92ffdf'
+ default: '#5affb2'
}, // 偏移值
show: {
type: Boolean,
@@ -69,10 +69,11 @@
}
this.layer = new mars3d.layer.GeoJsonLayer({
type: 'geojson',
- url: 'static/geojson/pipe.json',
+ url: 'static/geojson/pipe_old.json',
symbol: {
styleOptions: {
- materialType: 'PolylineGlow',
+ lineType: 'glow',
+ // materialType: 'LineFlicker',
glowPower: glowPower, // 发光强度
width: width, // 线宽
color: color,
@@ -83,7 +84,7 @@
show: true
})
map.addLayer(this.layer)
- this.loadData()
+ // this.loadData()
}
},
// 移除图层
diff --git a/src/components/Map/components/pipeLayer2.vue b/src/components/Map/components/pipeLayer2.vue
new file mode 100644
index 0000000..4f56b36
--- /dev/null
+++ b/src/components/Map/components/pipeLayer2.vue
@@ -0,0 +1,147 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/config/dev.env.js b/config/dev.env.js
index 2b11678..1a12bc2 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -6,10 +6,5 @@
// 将两个配置对象合并,最终结果是 NODE_ENV:‘"development"'
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
- // BASE_API: '"http://rest.apizza.net/mock/cfbb939c147bb6d68372de83af189fee/"',
- // BASE_API: '"http://119.254.103.80:14537"'
- // BASE_API: '"http://192.168.0.225:14537"'
- // BASE_API: '"http://localhost:8080/api/"'
BASE_API: '"http://192.168.0.102:11414"'
- // BASE_API: '"http://127.0.0.1:11414"'
})
diff --git a/src/assets/global_images/popwin.png b/src/assets/global_images/popwin.png
new file mode 100644
index 0000000..130b595
--- /dev/null
+++ b/src/assets/global_images/popwin.png
Binary files differ
diff --git a/src/components/Map/components/cameraLayer.vue b/src/components/Map/components/cameraLayer.vue
new file mode 100644
index 0000000..27403d1
--- /dev/null
+++ b/src/components/Map/components/cameraLayer.vue
@@ -0,0 +1,110 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/earthquakeLayer.vue b/src/components/Map/components/earthquakeLayer.vue
index e7efdc1..a4a0703 100644
--- a/src/components/Map/components/earthquakeLayer.vue
+++ b/src/components/Map/components/earthquakeLayer.vue
@@ -71,6 +71,7 @@
loadData() {
const { mars3d, Cesium, layer, height, size } = this
const date = getToday()
+ // const date = '2021-04-19'
getEarthquakeList(date).then((res) => {
if (res.data.length === 0) {
this.$message.info('今日无地震')
diff --git a/src/components/Map/components/hcaHeatLayer.vue b/src/components/Map/components/hcaHeatLayer.vue
index e4d3a21..9233d92 100644
--- a/src/components/Map/components/hcaHeatLayer.vue
+++ b/src/components/Map/components/hcaHeatLayer.vue
@@ -40,9 +40,10 @@
methods: {
load() {
console.log('load')
+ if (this.show) this.initLayer()
},
initLayer() {
- const { mars3d, map } = this
+ const { map } = this
if (map) {
if (this.show) {
if (this.layer) {
diff --git a/src/components/Map/components/hcaPointLayer.vue b/src/components/Map/components/hcaPointLayer.vue
new file mode 100644
index 0000000..b518699
--- /dev/null
+++ b/src/components/Map/components/hcaPointLayer.vue
@@ -0,0 +1,142 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/liquidFactoryLayer.vue b/src/components/Map/components/liquidFactoryLayer.vue
index 6845b93..3a1c0eb 100644
--- a/src/components/Map/components/liquidFactoryLayer.vue
+++ b/src/components/Map/components/liquidFactoryLayer.vue
@@ -72,15 +72,15 @@
}
},
loadData() {
- const { mars3d, layer } = this
+ const { mars3d, layer, height } = this
axios.get('static/config/liquidFactory.json').then((res) => {
res = res.data
if (res.code === 200) {
this.data = res.data[0].data
- for (const station of this.data) {
+ for (const item of this.data) {
const graphic = new mars3d.graphic.ModelEntity({
- name: station.name,
- position: [station.x, station.y, 0],
+ name: item.name,
+ position: [parseFloat(item.value[0]), parseFloat(item.value[1]), height],
url: 'static/gltf/output/yehuagongchang.gltf',
style: {
scale: 3,
@@ -88,7 +88,7 @@
minimumPixelSize: 30,
clampToGround: true
},
- tooltip: station.name
+ tooltip: item.name
})
layer.addGraphic(graphic)
}
diff --git a/src/components/Map/components/manageStationLayer.vue b/src/components/Map/components/manageStationLayer.vue
index c0aff38..7b976d6 100644
--- a/src/components/Map/components/manageStationLayer.vue
+++ b/src/components/Map/components/manageStationLayer.vue
@@ -56,6 +56,7 @@
methods: {
load() {
console.log('load')
+ if (this.show) this.initLayer()
},
initLayer() {
const { mars3d, map } = this
diff --git a/src/components/Map/components/needLayerCone.vue b/src/components/Map/components/needLayerCone.vue
new file mode 100644
index 0000000..373bf3c
--- /dev/null
+++ b/src/components/Map/components/needLayerCone.vue
@@ -0,0 +1,169 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/pipeLayer.vue b/src/components/Map/components/pipeLayer.vue
index 64142a7..0129de7 100644
--- a/src/components/Map/components/pipeLayer.vue
+++ b/src/components/Map/components/pipeLayer.vue
@@ -21,11 +21,11 @@
}, // 发光强度
opacity: {
type: Number,
- default: 0.9
+ default: 1
}, // 透明度
width: {
type: Number,
- default: 10
+ default: 5
}, // 线宽度
height: {
type: Number,
@@ -33,7 +33,7 @@
}, // 高度
color: {
type: String,
- default: '#92ffdf'
+ default: '#5affb2'
}, // 偏移值
show: {
type: Boolean,
@@ -69,10 +69,11 @@
}
this.layer = new mars3d.layer.GeoJsonLayer({
type: 'geojson',
- url: 'static/geojson/pipe.json',
+ url: 'static/geojson/pipe_old.json',
symbol: {
styleOptions: {
- materialType: 'PolylineGlow',
+ lineType: 'glow',
+ // materialType: 'LineFlicker',
glowPower: glowPower, // 发光强度
width: width, // 线宽
color: color,
@@ -83,7 +84,7 @@
show: true
})
map.addLayer(this.layer)
- this.loadData()
+ // this.loadData()
}
},
// 移除图层
diff --git a/src/components/Map/components/pipeLayer2.vue b/src/components/Map/components/pipeLayer2.vue
new file mode 100644
index 0000000..4f56b36
--- /dev/null
+++ b/src/components/Map/components/pipeLayer2.vue
@@ -0,0 +1,147 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/routeLayer.vue b/src/components/Map/components/routeLayer.vue
index 203bd89..15bb2a5 100644
--- a/src/components/Map/components/routeLayer.vue
+++ b/src/components/Map/components/routeLayer.vue
@@ -50,6 +50,9 @@
methods: {
load() {
console.log('load')
+ if(this.show){
+ this.initLayer()
+ }
},
initLayer() {
const { mars3d, map } = this
@@ -60,6 +63,19 @@
}
}
const graphicLayer = new mars3d.layer.DivLayer()
+ graphicLayer.on(mars3d.EventType.click, event => {
+ console.log('单击了巡检人员', event)
+ })
+ graphicLayer.bindPopup(event => {
+ const route = event.graphic.attr
+ const html =
+ '
姓名:' + route.name +
+ '
电话:' + route['phone'] +
+ '
岗位:' + route['duty'] +
+ '
站名:' + route['unitname'] +
+ '
时间:' + route.locationdate + '
'
+ return html
+ })
this.layer = graphicLayer
map.addLayer(graphicLayer)
this.loadData()
@@ -77,11 +93,11 @@
lat: parseFloat(item['WD60_06']),
locationdate: item['WD60_04'],
time: new Date(item['WD60_04']),
- duty: item['WD60_11'],
- sex: item['WD60_09'],
- phone: item['WD60_10'],
- idcard: item['WD60_12'],
- unitname: item['WD60_08']
+ duty: item['WD60_11'] === null ? '' : item['WD60_11'],
+ sex: item['WD60_09'] === null ? '' : item['WD60_09'],
+ phone: item['WD60_10'] === null ? '' : item['WD60_10'],
+ idcard: item['WD60_12'] === null ? '' : item['WD60_12'],
+ unitname: item['WD60_08'] === null ? '' : item['WD60_08']
}
})
this.filteredData = []
diff --git a/config/dev.env.js b/config/dev.env.js
index 2b11678..1a12bc2 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -6,10 +6,5 @@
// 将两个配置对象合并,最终结果是 NODE_ENV:‘"development"'
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
- // BASE_API: '"http://rest.apizza.net/mock/cfbb939c147bb6d68372de83af189fee/"',
- // BASE_API: '"http://119.254.103.80:14537"'
- // BASE_API: '"http://192.168.0.225:14537"'
- // BASE_API: '"http://localhost:8080/api/"'
BASE_API: '"http://192.168.0.102:11414"'
- // BASE_API: '"http://127.0.0.1:11414"'
})
diff --git a/src/assets/global_images/popwin.png b/src/assets/global_images/popwin.png
new file mode 100644
index 0000000..130b595
--- /dev/null
+++ b/src/assets/global_images/popwin.png
Binary files differ
diff --git a/src/components/Map/components/cameraLayer.vue b/src/components/Map/components/cameraLayer.vue
new file mode 100644
index 0000000..27403d1
--- /dev/null
+++ b/src/components/Map/components/cameraLayer.vue
@@ -0,0 +1,110 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/earthquakeLayer.vue b/src/components/Map/components/earthquakeLayer.vue
index e7efdc1..a4a0703 100644
--- a/src/components/Map/components/earthquakeLayer.vue
+++ b/src/components/Map/components/earthquakeLayer.vue
@@ -71,6 +71,7 @@
loadData() {
const { mars3d, Cesium, layer, height, size } = this
const date = getToday()
+ // const date = '2021-04-19'
getEarthquakeList(date).then((res) => {
if (res.data.length === 0) {
this.$message.info('今日无地震')
diff --git a/src/components/Map/components/hcaHeatLayer.vue b/src/components/Map/components/hcaHeatLayer.vue
index e4d3a21..9233d92 100644
--- a/src/components/Map/components/hcaHeatLayer.vue
+++ b/src/components/Map/components/hcaHeatLayer.vue
@@ -40,9 +40,10 @@
methods: {
load() {
console.log('load')
+ if (this.show) this.initLayer()
},
initLayer() {
- const { mars3d, map } = this
+ const { map } = this
if (map) {
if (this.show) {
if (this.layer) {
diff --git a/src/components/Map/components/hcaPointLayer.vue b/src/components/Map/components/hcaPointLayer.vue
new file mode 100644
index 0000000..b518699
--- /dev/null
+++ b/src/components/Map/components/hcaPointLayer.vue
@@ -0,0 +1,142 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/liquidFactoryLayer.vue b/src/components/Map/components/liquidFactoryLayer.vue
index 6845b93..3a1c0eb 100644
--- a/src/components/Map/components/liquidFactoryLayer.vue
+++ b/src/components/Map/components/liquidFactoryLayer.vue
@@ -72,15 +72,15 @@
}
},
loadData() {
- const { mars3d, layer } = this
+ const { mars3d, layer, height } = this
axios.get('static/config/liquidFactory.json').then((res) => {
res = res.data
if (res.code === 200) {
this.data = res.data[0].data
- for (const station of this.data) {
+ for (const item of this.data) {
const graphic = new mars3d.graphic.ModelEntity({
- name: station.name,
- position: [station.x, station.y, 0],
+ name: item.name,
+ position: [parseFloat(item.value[0]), parseFloat(item.value[1]), height],
url: 'static/gltf/output/yehuagongchang.gltf',
style: {
scale: 3,
@@ -88,7 +88,7 @@
minimumPixelSize: 30,
clampToGround: true
},
- tooltip: station.name
+ tooltip: item.name
})
layer.addGraphic(graphic)
}
diff --git a/src/components/Map/components/manageStationLayer.vue b/src/components/Map/components/manageStationLayer.vue
index c0aff38..7b976d6 100644
--- a/src/components/Map/components/manageStationLayer.vue
+++ b/src/components/Map/components/manageStationLayer.vue
@@ -56,6 +56,7 @@
methods: {
load() {
console.log('load')
+ if (this.show) this.initLayer()
},
initLayer() {
const { mars3d, map } = this
diff --git a/src/components/Map/components/needLayerCone.vue b/src/components/Map/components/needLayerCone.vue
new file mode 100644
index 0000000..373bf3c
--- /dev/null
+++ b/src/components/Map/components/needLayerCone.vue
@@ -0,0 +1,169 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/pipeLayer.vue b/src/components/Map/components/pipeLayer.vue
index 64142a7..0129de7 100644
--- a/src/components/Map/components/pipeLayer.vue
+++ b/src/components/Map/components/pipeLayer.vue
@@ -21,11 +21,11 @@
}, // 发光强度
opacity: {
type: Number,
- default: 0.9
+ default: 1
}, // 透明度
width: {
type: Number,
- default: 10
+ default: 5
}, // 线宽度
height: {
type: Number,
@@ -33,7 +33,7 @@
}, // 高度
color: {
type: String,
- default: '#92ffdf'
+ default: '#5affb2'
}, // 偏移值
show: {
type: Boolean,
@@ -69,10 +69,11 @@
}
this.layer = new mars3d.layer.GeoJsonLayer({
type: 'geojson',
- url: 'static/geojson/pipe.json',
+ url: 'static/geojson/pipe_old.json',
symbol: {
styleOptions: {
- materialType: 'PolylineGlow',
+ lineType: 'glow',
+ // materialType: 'LineFlicker',
glowPower: glowPower, // 发光强度
width: width, // 线宽
color: color,
@@ -83,7 +84,7 @@
show: true
})
map.addLayer(this.layer)
- this.loadData()
+ // this.loadData()
}
},
// 移除图层
diff --git a/src/components/Map/components/pipeLayer2.vue b/src/components/Map/components/pipeLayer2.vue
new file mode 100644
index 0000000..4f56b36
--- /dev/null
+++ b/src/components/Map/components/pipeLayer2.vue
@@ -0,0 +1,147 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/routeLayer.vue b/src/components/Map/components/routeLayer.vue
index 203bd89..15bb2a5 100644
--- a/src/components/Map/components/routeLayer.vue
+++ b/src/components/Map/components/routeLayer.vue
@@ -50,6 +50,9 @@
methods: {
load() {
console.log('load')
+ if(this.show){
+ this.initLayer()
+ }
},
initLayer() {
const { mars3d, map } = this
@@ -60,6 +63,19 @@
}
}
const graphicLayer = new mars3d.layer.DivLayer()
+ graphicLayer.on(mars3d.EventType.click, event => {
+ console.log('单击了巡检人员', event)
+ })
+ graphicLayer.bindPopup(event => {
+ const route = event.graphic.attr
+ const html =
+ '姓名:' + route.name +
+ '
电话:' + route['phone'] +
+ '
岗位:' + route['duty'] +
+ '
站名:' + route['unitname'] +
+ '
时间:' + route.locationdate + '
'
+ return html
+ })
this.layer = graphicLayer
map.addLayer(graphicLayer)
this.loadData()
@@ -77,11 +93,11 @@
lat: parseFloat(item['WD60_06']),
locationdate: item['WD60_04'],
time: new Date(item['WD60_04']),
- duty: item['WD60_11'],
- sex: item['WD60_09'],
- phone: item['WD60_10'],
- idcard: item['WD60_12'],
- unitname: item['WD60_08']
+ duty: item['WD60_11'] === null ? '' : item['WD60_11'],
+ sex: item['WD60_09'] === null ? '' : item['WD60_09'],
+ phone: item['WD60_10'] === null ? '' : item['WD60_10'],
+ idcard: item['WD60_12'] === null ? '' : item['WD60_12'],
+ unitname: item['WD60_08'] === null ? '' : item['WD60_08']
}
})
this.filteredData = []
diff --git a/src/components/Map/components/supplyLayer.vue b/src/components/Map/components/supplyLayer.vue
index 583e546..7fdbe56 100644
--- a/src/components/Map/components/supplyLayer.vue
+++ b/src/components/Map/components/supplyLayer.vue
@@ -1,10 +1,10 @@
-
+
@@ -134,7 +134,8 @@
const graphics = layer.graphics
for (const graphic of graphics) {
if (graphic.name === city) {
- graphic.openTooltip()
+ // graphic.openTooltip()
+ graphic.openPopup()
}
}
},
@@ -161,7 +162,8 @@
})
}
})
- graphic1.bindTooltip(html)
+ // graphic1.bindTooltip(html)
+ graphic1.bindPopup(html)
layer.addGraphic(graphic1)
},
// 移除图层
@@ -177,5 +179,4 @@
diff --git a/config/dev.env.js b/config/dev.env.js
index 2b11678..1a12bc2 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -6,10 +6,5 @@
// 将两个配置对象合并,最终结果是 NODE_ENV:‘"development"'
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
- // BASE_API: '"http://rest.apizza.net/mock/cfbb939c147bb6d68372de83af189fee/"',
- // BASE_API: '"http://119.254.103.80:14537"'
- // BASE_API: '"http://192.168.0.225:14537"'
- // BASE_API: '"http://localhost:8080/api/"'
BASE_API: '"http://192.168.0.102:11414"'
- // BASE_API: '"http://127.0.0.1:11414"'
})
diff --git a/src/assets/global_images/popwin.png b/src/assets/global_images/popwin.png
new file mode 100644
index 0000000..130b595
--- /dev/null
+++ b/src/assets/global_images/popwin.png
Binary files differ
diff --git a/src/components/Map/components/cameraLayer.vue b/src/components/Map/components/cameraLayer.vue
new file mode 100644
index 0000000..27403d1
--- /dev/null
+++ b/src/components/Map/components/cameraLayer.vue
@@ -0,0 +1,110 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/earthquakeLayer.vue b/src/components/Map/components/earthquakeLayer.vue
index e7efdc1..a4a0703 100644
--- a/src/components/Map/components/earthquakeLayer.vue
+++ b/src/components/Map/components/earthquakeLayer.vue
@@ -71,6 +71,7 @@
loadData() {
const { mars3d, Cesium, layer, height, size } = this
const date = getToday()
+ // const date = '2021-04-19'
getEarthquakeList(date).then((res) => {
if (res.data.length === 0) {
this.$message.info('今日无地震')
diff --git a/src/components/Map/components/hcaHeatLayer.vue b/src/components/Map/components/hcaHeatLayer.vue
index e4d3a21..9233d92 100644
--- a/src/components/Map/components/hcaHeatLayer.vue
+++ b/src/components/Map/components/hcaHeatLayer.vue
@@ -40,9 +40,10 @@
methods: {
load() {
console.log('load')
+ if (this.show) this.initLayer()
},
initLayer() {
- const { mars3d, map } = this
+ const { map } = this
if (map) {
if (this.show) {
if (this.layer) {
diff --git a/src/components/Map/components/hcaPointLayer.vue b/src/components/Map/components/hcaPointLayer.vue
new file mode 100644
index 0000000..b518699
--- /dev/null
+++ b/src/components/Map/components/hcaPointLayer.vue
@@ -0,0 +1,142 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/liquidFactoryLayer.vue b/src/components/Map/components/liquidFactoryLayer.vue
index 6845b93..3a1c0eb 100644
--- a/src/components/Map/components/liquidFactoryLayer.vue
+++ b/src/components/Map/components/liquidFactoryLayer.vue
@@ -72,15 +72,15 @@
}
},
loadData() {
- const { mars3d, layer } = this
+ const { mars3d, layer, height } = this
axios.get('static/config/liquidFactory.json').then((res) => {
res = res.data
if (res.code === 200) {
this.data = res.data[0].data
- for (const station of this.data) {
+ for (const item of this.data) {
const graphic = new mars3d.graphic.ModelEntity({
- name: station.name,
- position: [station.x, station.y, 0],
+ name: item.name,
+ position: [parseFloat(item.value[0]), parseFloat(item.value[1]), height],
url: 'static/gltf/output/yehuagongchang.gltf',
style: {
scale: 3,
@@ -88,7 +88,7 @@
minimumPixelSize: 30,
clampToGround: true
},
- tooltip: station.name
+ tooltip: item.name
})
layer.addGraphic(graphic)
}
diff --git a/src/components/Map/components/manageStationLayer.vue b/src/components/Map/components/manageStationLayer.vue
index c0aff38..7b976d6 100644
--- a/src/components/Map/components/manageStationLayer.vue
+++ b/src/components/Map/components/manageStationLayer.vue
@@ -56,6 +56,7 @@
methods: {
load() {
console.log('load')
+ if (this.show) this.initLayer()
},
initLayer() {
const { mars3d, map } = this
diff --git a/src/components/Map/components/needLayerCone.vue b/src/components/Map/components/needLayerCone.vue
new file mode 100644
index 0000000..373bf3c
--- /dev/null
+++ b/src/components/Map/components/needLayerCone.vue
@@ -0,0 +1,169 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/pipeLayer.vue b/src/components/Map/components/pipeLayer.vue
index 64142a7..0129de7 100644
--- a/src/components/Map/components/pipeLayer.vue
+++ b/src/components/Map/components/pipeLayer.vue
@@ -21,11 +21,11 @@
}, // 发光强度
opacity: {
type: Number,
- default: 0.9
+ default: 1
}, // 透明度
width: {
type: Number,
- default: 10
+ default: 5
}, // 线宽度
height: {
type: Number,
@@ -33,7 +33,7 @@
}, // 高度
color: {
type: String,
- default: '#92ffdf'
+ default: '#5affb2'
}, // 偏移值
show: {
type: Boolean,
@@ -69,10 +69,11 @@
}
this.layer = new mars3d.layer.GeoJsonLayer({
type: 'geojson',
- url: 'static/geojson/pipe.json',
+ url: 'static/geojson/pipe_old.json',
symbol: {
styleOptions: {
- materialType: 'PolylineGlow',
+ lineType: 'glow',
+ // materialType: 'LineFlicker',
glowPower: glowPower, // 发光强度
width: width, // 线宽
color: color,
@@ -83,7 +84,7 @@
show: true
})
map.addLayer(this.layer)
- this.loadData()
+ // this.loadData()
}
},
// 移除图层
diff --git a/src/components/Map/components/pipeLayer2.vue b/src/components/Map/components/pipeLayer2.vue
new file mode 100644
index 0000000..4f56b36
--- /dev/null
+++ b/src/components/Map/components/pipeLayer2.vue
@@ -0,0 +1,147 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/routeLayer.vue b/src/components/Map/components/routeLayer.vue
index 203bd89..15bb2a5 100644
--- a/src/components/Map/components/routeLayer.vue
+++ b/src/components/Map/components/routeLayer.vue
@@ -50,6 +50,9 @@
methods: {
load() {
console.log('load')
+ if(this.show){
+ this.initLayer()
+ }
},
initLayer() {
const { mars3d, map } = this
@@ -60,6 +63,19 @@
}
}
const graphicLayer = new mars3d.layer.DivLayer()
+ graphicLayer.on(mars3d.EventType.click, event => {
+ console.log('单击了巡检人员', event)
+ })
+ graphicLayer.bindPopup(event => {
+ const route = event.graphic.attr
+ const html =
+ '
姓名:' + route.name +
+ '
电话:' + route['phone'] +
+ '
岗位:' + route['duty'] +
+ '
站名:' + route['unitname'] +
+ '
时间:' + route.locationdate + '
'
+ return html
+ })
this.layer = graphicLayer
map.addLayer(graphicLayer)
this.loadData()
@@ -77,11 +93,11 @@
lat: parseFloat(item['WD60_06']),
locationdate: item['WD60_04'],
time: new Date(item['WD60_04']),
- duty: item['WD60_11'],
- sex: item['WD60_09'],
- phone: item['WD60_10'],
- idcard: item['WD60_12'],
- unitname: item['WD60_08']
+ duty: item['WD60_11'] === null ? '' : item['WD60_11'],
+ sex: item['WD60_09'] === null ? '' : item['WD60_09'],
+ phone: item['WD60_10'] === null ? '' : item['WD60_10'],
+ idcard: item['WD60_12'] === null ? '' : item['WD60_12'],
+ unitname: item['WD60_08'] === null ? '' : item['WD60_08']
}
})
this.filteredData = []
diff --git a/src/components/Map/components/supplyLayer.vue b/src/components/Map/components/supplyLayer.vue
index 583e546..7fdbe56 100644
--- a/src/components/Map/components/supplyLayer.vue
+++ b/src/components/Map/components/supplyLayer.vue
@@ -1,10 +1,10 @@
-
+
@@ -134,7 +134,8 @@
const graphics = layer.graphics
for (const graphic of graphics) {
if (graphic.name === city) {
- graphic.openTooltip()
+ // graphic.openTooltip()
+ graphic.openPopup()
}
}
},
@@ -161,7 +162,8 @@
})
}
})
- graphic1.bindTooltip(html)
+ // graphic1.bindTooltip(html)
+ graphic1.bindPopup(html)
layer.addGraphic(graphic1)
},
// 移除图层
@@ -177,5 +179,4 @@
diff --git a/src/components/Map/components/supplyLayerCone.vue b/src/components/Map/components/supplyLayerCone.vue
new file mode 100644
index 0000000..de46f58
--- /dev/null
+++ b/src/components/Map/components/supplyLayerCone.vue
@@ -0,0 +1,169 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/config/dev.env.js b/config/dev.env.js
index 2b11678..1a12bc2 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -6,10 +6,5 @@
// 将两个配置对象合并,最终结果是 NODE_ENV:‘"development"'
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
- // BASE_API: '"http://rest.apizza.net/mock/cfbb939c147bb6d68372de83af189fee/"',
- // BASE_API: '"http://119.254.103.80:14537"'
- // BASE_API: '"http://192.168.0.225:14537"'
- // BASE_API: '"http://localhost:8080/api/"'
BASE_API: '"http://192.168.0.102:11414"'
- // BASE_API: '"http://127.0.0.1:11414"'
})
diff --git a/src/assets/global_images/popwin.png b/src/assets/global_images/popwin.png
new file mode 100644
index 0000000..130b595
--- /dev/null
+++ b/src/assets/global_images/popwin.png
Binary files differ
diff --git a/src/components/Map/components/cameraLayer.vue b/src/components/Map/components/cameraLayer.vue
new file mode 100644
index 0000000..27403d1
--- /dev/null
+++ b/src/components/Map/components/cameraLayer.vue
@@ -0,0 +1,110 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/earthquakeLayer.vue b/src/components/Map/components/earthquakeLayer.vue
index e7efdc1..a4a0703 100644
--- a/src/components/Map/components/earthquakeLayer.vue
+++ b/src/components/Map/components/earthquakeLayer.vue
@@ -71,6 +71,7 @@
loadData() {
const { mars3d, Cesium, layer, height, size } = this
const date = getToday()
+ // const date = '2021-04-19'
getEarthquakeList(date).then((res) => {
if (res.data.length === 0) {
this.$message.info('今日无地震')
diff --git a/src/components/Map/components/hcaHeatLayer.vue b/src/components/Map/components/hcaHeatLayer.vue
index e4d3a21..9233d92 100644
--- a/src/components/Map/components/hcaHeatLayer.vue
+++ b/src/components/Map/components/hcaHeatLayer.vue
@@ -40,9 +40,10 @@
methods: {
load() {
console.log('load')
+ if (this.show) this.initLayer()
},
initLayer() {
- const { mars3d, map } = this
+ const { map } = this
if (map) {
if (this.show) {
if (this.layer) {
diff --git a/src/components/Map/components/hcaPointLayer.vue b/src/components/Map/components/hcaPointLayer.vue
new file mode 100644
index 0000000..b518699
--- /dev/null
+++ b/src/components/Map/components/hcaPointLayer.vue
@@ -0,0 +1,142 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/liquidFactoryLayer.vue b/src/components/Map/components/liquidFactoryLayer.vue
index 6845b93..3a1c0eb 100644
--- a/src/components/Map/components/liquidFactoryLayer.vue
+++ b/src/components/Map/components/liquidFactoryLayer.vue
@@ -72,15 +72,15 @@
}
},
loadData() {
- const { mars3d, layer } = this
+ const { mars3d, layer, height } = this
axios.get('static/config/liquidFactory.json').then((res) => {
res = res.data
if (res.code === 200) {
this.data = res.data[0].data
- for (const station of this.data) {
+ for (const item of this.data) {
const graphic = new mars3d.graphic.ModelEntity({
- name: station.name,
- position: [station.x, station.y, 0],
+ name: item.name,
+ position: [parseFloat(item.value[0]), parseFloat(item.value[1]), height],
url: 'static/gltf/output/yehuagongchang.gltf',
style: {
scale: 3,
@@ -88,7 +88,7 @@
minimumPixelSize: 30,
clampToGround: true
},
- tooltip: station.name
+ tooltip: item.name
})
layer.addGraphic(graphic)
}
diff --git a/src/components/Map/components/manageStationLayer.vue b/src/components/Map/components/manageStationLayer.vue
index c0aff38..7b976d6 100644
--- a/src/components/Map/components/manageStationLayer.vue
+++ b/src/components/Map/components/manageStationLayer.vue
@@ -56,6 +56,7 @@
methods: {
load() {
console.log('load')
+ if (this.show) this.initLayer()
},
initLayer() {
const { mars3d, map } = this
diff --git a/src/components/Map/components/needLayerCone.vue b/src/components/Map/components/needLayerCone.vue
new file mode 100644
index 0000000..373bf3c
--- /dev/null
+++ b/src/components/Map/components/needLayerCone.vue
@@ -0,0 +1,169 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/pipeLayer.vue b/src/components/Map/components/pipeLayer.vue
index 64142a7..0129de7 100644
--- a/src/components/Map/components/pipeLayer.vue
+++ b/src/components/Map/components/pipeLayer.vue
@@ -21,11 +21,11 @@
}, // 发光强度
opacity: {
type: Number,
- default: 0.9
+ default: 1
}, // 透明度
width: {
type: Number,
- default: 10
+ default: 5
}, // 线宽度
height: {
type: Number,
@@ -33,7 +33,7 @@
}, // 高度
color: {
type: String,
- default: '#92ffdf'
+ default: '#5affb2'
}, // 偏移值
show: {
type: Boolean,
@@ -69,10 +69,11 @@
}
this.layer = new mars3d.layer.GeoJsonLayer({
type: 'geojson',
- url: 'static/geojson/pipe.json',
+ url: 'static/geojson/pipe_old.json',
symbol: {
styleOptions: {
- materialType: 'PolylineGlow',
+ lineType: 'glow',
+ // materialType: 'LineFlicker',
glowPower: glowPower, // 发光强度
width: width, // 线宽
color: color,
@@ -83,7 +84,7 @@
show: true
})
map.addLayer(this.layer)
- this.loadData()
+ // this.loadData()
}
},
// 移除图层
diff --git a/src/components/Map/components/pipeLayer2.vue b/src/components/Map/components/pipeLayer2.vue
new file mode 100644
index 0000000..4f56b36
--- /dev/null
+++ b/src/components/Map/components/pipeLayer2.vue
@@ -0,0 +1,147 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/routeLayer.vue b/src/components/Map/components/routeLayer.vue
index 203bd89..15bb2a5 100644
--- a/src/components/Map/components/routeLayer.vue
+++ b/src/components/Map/components/routeLayer.vue
@@ -50,6 +50,9 @@
methods: {
load() {
console.log('load')
+ if(this.show){
+ this.initLayer()
+ }
},
initLayer() {
const { mars3d, map } = this
@@ -60,6 +63,19 @@
}
}
const graphicLayer = new mars3d.layer.DivLayer()
+ graphicLayer.on(mars3d.EventType.click, event => {
+ console.log('单击了巡检人员', event)
+ })
+ graphicLayer.bindPopup(event => {
+ const route = event.graphic.attr
+ const html =
+ '
姓名:' + route.name +
+ '
电话:' + route['phone'] +
+ '
岗位:' + route['duty'] +
+ '
站名:' + route['unitname'] +
+ '
时间:' + route.locationdate + '
'
+ return html
+ })
this.layer = graphicLayer
map.addLayer(graphicLayer)
this.loadData()
@@ -77,11 +93,11 @@
lat: parseFloat(item['WD60_06']),
locationdate: item['WD60_04'],
time: new Date(item['WD60_04']),
- duty: item['WD60_11'],
- sex: item['WD60_09'],
- phone: item['WD60_10'],
- idcard: item['WD60_12'],
- unitname: item['WD60_08']
+ duty: item['WD60_11'] === null ? '' : item['WD60_11'],
+ sex: item['WD60_09'] === null ? '' : item['WD60_09'],
+ phone: item['WD60_10'] === null ? '' : item['WD60_10'],
+ idcard: item['WD60_12'] === null ? '' : item['WD60_12'],
+ unitname: item['WD60_08'] === null ? '' : item['WD60_08']
}
})
this.filteredData = []
diff --git a/src/components/Map/components/supplyLayer.vue b/src/components/Map/components/supplyLayer.vue
index 583e546..7fdbe56 100644
--- a/src/components/Map/components/supplyLayer.vue
+++ b/src/components/Map/components/supplyLayer.vue
@@ -1,10 +1,10 @@
-
+
@@ -134,7 +134,8 @@
const graphics = layer.graphics
for (const graphic of graphics) {
if (graphic.name === city) {
- graphic.openTooltip()
+ // graphic.openTooltip()
+ graphic.openPopup()
}
}
},
@@ -161,7 +162,8 @@
})
}
})
- graphic1.bindTooltip(html)
+ // graphic1.bindTooltip(html)
+ graphic1.bindPopup(html)
layer.addGraphic(graphic1)
},
// 移除图层
@@ -177,5 +179,4 @@
diff --git a/src/components/Map/components/supplyLayerCone.vue b/src/components/Map/components/supplyLayerCone.vue
new file mode 100644
index 0000000..de46f58
--- /dev/null
+++ b/src/components/Map/components/supplyLayerCone.vue
@@ -0,0 +1,169 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/threatLayer.vue b/src/components/Map/components/threatLayer.vue
index e354278..4b2295b 100644
--- a/src/components/Map/components/threatLayer.vue
+++ b/src/components/Map/components/threatLayer.vue
@@ -19,6 +19,10 @@
components: { ThreatDialog },
mixins: [commonMixin('layer')],
props: {
+ colorful: {
+ type: Boolean,
+ default: false
+ },
show: {
type: Boolean,
default: false
@@ -30,7 +34,28 @@
color: {
type: String,
default: '#FBFE2D'
- }
+ },
+ colorList: {
+ type: Array,
+ default: () => {
+ return ['#f33349', '#f79a2c', '#f2fa19', '#95e40c', '#1ffee6']
+ }
+ },
+ threatLevel: {
+ type: Object,
+ default: () => {
+ return {
+ '1': 'A级',
+ '2': 'B级',
+ '3': 'C级',
+ '4': '问题'
+ }
+ }
+ }, // 隐患等级
+ popupType: {
+ type: String,
+ default: 'dialog'
+ } // 详情弹出方式:dialog/ popupWindow
},
data() {
return {
@@ -40,7 +65,6 @@
},
watch: {
show(val) {
- console.log('watch show: ' + val)
if (val) {
this.initLayer()
} else {
@@ -51,27 +75,21 @@
methods: {
load() {
console.log('load')
+ if (this.show) {
+ this.initLayer()
+ }
},
initLayer() {
- const { mars3d, map } = this
+ const { map } = this
if (map) {
- if (this.show) {
- if (this.layer) {
- this.removeLayer()
- }
+ if (this.show && this.layer) {
+ this.removeLayer()
}
- const graphicLayer = new mars3d.layer.GraphicLayer()
- this.layer = graphicLayer
- map.addLayer(graphicLayer)
this.loadData()
}
},
loadData() {
- const { mars3d, type, layer } = this
- layer.on(mars3d.EventType.click, event => {
- console.log('监听layer,单击了矢量对象', event)
- this.$refs.threatDialog.initDialog(event.graphic.attr)
- })
+ const { type } = this
if (type === 'construction') {
axios.get('static/config/threat.json').then((res) => {
res = res.data
@@ -103,28 +121,60 @@
},
// 添加隐患点: type类型,arr数组, clr颜色
addFeatures() {
- const { mars3d, Cesium, layer, color, data } = this
- // 创建DIV数据图层\
+ const { mars3d, map, Cesium, color, data, type } = this
+ const graphicLayer = new mars3d.layer.GraphicLayer({ name: type })
+ console.log('add Layer ' + type)
+ this.layer = graphicLayer
+ this.layer.on(mars3d.EventType.click, event => {
+ console.log('点击隐患', event)
+ if (this.popupType === 'dialog') {
+ this.$refs.threatDialog.initDialog(event.graphic.attr)
+ }
+ })
+ if (this.popupType === 'popupWindow') {
+ this.layer.bindPopup(event => {
+ const item = event.graphic.attr
+ var html =
+ '位置描述:' +
+ item['位置描述'] +
+ '
村庄地址:' +
+ item['村庄地址'] +
+ '
发现人:' +
+ item['发现人'] +
+ '
隐患描述:' +
+ item['隐患描述'] +
+ '
创建时间:' +
+ item['创建时间'] +
+ '
隐患等级:' +
+ this.threatLevel[item['隐患等级']]
+ return html
+ })
+ }
+ console.log(this.layer)
+ map.addLayer(this.layer)
+ // 创建DIV数据图层
for (var i = 0, len = data.length; i < len; i++) {
const item = data[i]
var jd = item['经度']
var wd = item['纬度']
+ const level = parseInt(item['隐患等级']) - 1
+ const clr = this.colorful ? this.colorList[level] : color
var graphic = new mars3d.graphic.DivGraphic({
position: Cesium.Cartesian3.fromDegrees(jd, wd, 0),
style: {
- html: '
',
+ html: '
',
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 2000000) // 按视距距离显示
},
attr: item
})
- layer.addGraphic(graphic)
+ this.layer.addGraphic(graphic)
}
},
// 移除图层
removeLayer() {
const { map, layer } = this
- if (this.layer) {
- map.removeLayer(layer)
+ if (layer) {
+ map.removeLayer(this.layer, true)
this.layer = null
}
}
diff --git a/config/dev.env.js b/config/dev.env.js
index 2b11678..1a12bc2 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -6,10 +6,5 @@
// 将两个配置对象合并,最终结果是 NODE_ENV:‘"development"'
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
- // BASE_API: '"http://rest.apizza.net/mock/cfbb939c147bb6d68372de83af189fee/"',
- // BASE_API: '"http://119.254.103.80:14537"'
- // BASE_API: '"http://192.168.0.225:14537"'
- // BASE_API: '"http://localhost:8080/api/"'
BASE_API: '"http://192.168.0.102:11414"'
- // BASE_API: '"http://127.0.0.1:11414"'
})
diff --git a/src/assets/global_images/popwin.png b/src/assets/global_images/popwin.png
new file mode 100644
index 0000000..130b595
--- /dev/null
+++ b/src/assets/global_images/popwin.png
Binary files differ
diff --git a/src/components/Map/components/cameraLayer.vue b/src/components/Map/components/cameraLayer.vue
new file mode 100644
index 0000000..27403d1
--- /dev/null
+++ b/src/components/Map/components/cameraLayer.vue
@@ -0,0 +1,110 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/earthquakeLayer.vue b/src/components/Map/components/earthquakeLayer.vue
index e7efdc1..a4a0703 100644
--- a/src/components/Map/components/earthquakeLayer.vue
+++ b/src/components/Map/components/earthquakeLayer.vue
@@ -71,6 +71,7 @@
loadData() {
const { mars3d, Cesium, layer, height, size } = this
const date = getToday()
+ // const date = '2021-04-19'
getEarthquakeList(date).then((res) => {
if (res.data.length === 0) {
this.$message.info('今日无地震')
diff --git a/src/components/Map/components/hcaHeatLayer.vue b/src/components/Map/components/hcaHeatLayer.vue
index e4d3a21..9233d92 100644
--- a/src/components/Map/components/hcaHeatLayer.vue
+++ b/src/components/Map/components/hcaHeatLayer.vue
@@ -40,9 +40,10 @@
methods: {
load() {
console.log('load')
+ if (this.show) this.initLayer()
},
initLayer() {
- const { mars3d, map } = this
+ const { map } = this
if (map) {
if (this.show) {
if (this.layer) {
diff --git a/src/components/Map/components/hcaPointLayer.vue b/src/components/Map/components/hcaPointLayer.vue
new file mode 100644
index 0000000..b518699
--- /dev/null
+++ b/src/components/Map/components/hcaPointLayer.vue
@@ -0,0 +1,142 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/liquidFactoryLayer.vue b/src/components/Map/components/liquidFactoryLayer.vue
index 6845b93..3a1c0eb 100644
--- a/src/components/Map/components/liquidFactoryLayer.vue
+++ b/src/components/Map/components/liquidFactoryLayer.vue
@@ -72,15 +72,15 @@
}
},
loadData() {
- const { mars3d, layer } = this
+ const { mars3d, layer, height } = this
axios.get('static/config/liquidFactory.json').then((res) => {
res = res.data
if (res.code === 200) {
this.data = res.data[0].data
- for (const station of this.data) {
+ for (const item of this.data) {
const graphic = new mars3d.graphic.ModelEntity({
- name: station.name,
- position: [station.x, station.y, 0],
+ name: item.name,
+ position: [parseFloat(item.value[0]), parseFloat(item.value[1]), height],
url: 'static/gltf/output/yehuagongchang.gltf',
style: {
scale: 3,
@@ -88,7 +88,7 @@
minimumPixelSize: 30,
clampToGround: true
},
- tooltip: station.name
+ tooltip: item.name
})
layer.addGraphic(graphic)
}
diff --git a/src/components/Map/components/manageStationLayer.vue b/src/components/Map/components/manageStationLayer.vue
index c0aff38..7b976d6 100644
--- a/src/components/Map/components/manageStationLayer.vue
+++ b/src/components/Map/components/manageStationLayer.vue
@@ -56,6 +56,7 @@
methods: {
load() {
console.log('load')
+ if (this.show) this.initLayer()
},
initLayer() {
const { mars3d, map } = this
diff --git a/src/components/Map/components/needLayerCone.vue b/src/components/Map/components/needLayerCone.vue
new file mode 100644
index 0000000..373bf3c
--- /dev/null
+++ b/src/components/Map/components/needLayerCone.vue
@@ -0,0 +1,169 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/pipeLayer.vue b/src/components/Map/components/pipeLayer.vue
index 64142a7..0129de7 100644
--- a/src/components/Map/components/pipeLayer.vue
+++ b/src/components/Map/components/pipeLayer.vue
@@ -21,11 +21,11 @@
}, // 发光强度
opacity: {
type: Number,
- default: 0.9
+ default: 1
}, // 透明度
width: {
type: Number,
- default: 10
+ default: 5
}, // 线宽度
height: {
type: Number,
@@ -33,7 +33,7 @@
}, // 高度
color: {
type: String,
- default: '#92ffdf'
+ default: '#5affb2'
}, // 偏移值
show: {
type: Boolean,
@@ -69,10 +69,11 @@
}
this.layer = new mars3d.layer.GeoJsonLayer({
type: 'geojson',
- url: 'static/geojson/pipe.json',
+ url: 'static/geojson/pipe_old.json',
symbol: {
styleOptions: {
- materialType: 'PolylineGlow',
+ lineType: 'glow',
+ // materialType: 'LineFlicker',
glowPower: glowPower, // 发光强度
width: width, // 线宽
color: color,
@@ -83,7 +84,7 @@
show: true
})
map.addLayer(this.layer)
- this.loadData()
+ // this.loadData()
}
},
// 移除图层
diff --git a/src/components/Map/components/pipeLayer2.vue b/src/components/Map/components/pipeLayer2.vue
new file mode 100644
index 0000000..4f56b36
--- /dev/null
+++ b/src/components/Map/components/pipeLayer2.vue
@@ -0,0 +1,147 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/routeLayer.vue b/src/components/Map/components/routeLayer.vue
index 203bd89..15bb2a5 100644
--- a/src/components/Map/components/routeLayer.vue
+++ b/src/components/Map/components/routeLayer.vue
@@ -50,6 +50,9 @@
methods: {
load() {
console.log('load')
+ if(this.show){
+ this.initLayer()
+ }
},
initLayer() {
const { mars3d, map } = this
@@ -60,6 +63,19 @@
}
}
const graphicLayer = new mars3d.layer.DivLayer()
+ graphicLayer.on(mars3d.EventType.click, event => {
+ console.log('单击了巡检人员', event)
+ })
+ graphicLayer.bindPopup(event => {
+ const route = event.graphic.attr
+ const html =
+ '
姓名:' + route.name +
+ '
电话:' + route['phone'] +
+ '
岗位:' + route['duty'] +
+ '
站名:' + route['unitname'] +
+ '
时间:' + route.locationdate + '
'
+ return html
+ })
this.layer = graphicLayer
map.addLayer(graphicLayer)
this.loadData()
@@ -77,11 +93,11 @@
lat: parseFloat(item['WD60_06']),
locationdate: item['WD60_04'],
time: new Date(item['WD60_04']),
- duty: item['WD60_11'],
- sex: item['WD60_09'],
- phone: item['WD60_10'],
- idcard: item['WD60_12'],
- unitname: item['WD60_08']
+ duty: item['WD60_11'] === null ? '' : item['WD60_11'],
+ sex: item['WD60_09'] === null ? '' : item['WD60_09'],
+ phone: item['WD60_10'] === null ? '' : item['WD60_10'],
+ idcard: item['WD60_12'] === null ? '' : item['WD60_12'],
+ unitname: item['WD60_08'] === null ? '' : item['WD60_08']
}
})
this.filteredData = []
diff --git a/src/components/Map/components/supplyLayer.vue b/src/components/Map/components/supplyLayer.vue
index 583e546..7fdbe56 100644
--- a/src/components/Map/components/supplyLayer.vue
+++ b/src/components/Map/components/supplyLayer.vue
@@ -1,10 +1,10 @@
-
+
@@ -134,7 +134,8 @@
const graphics = layer.graphics
for (const graphic of graphics) {
if (graphic.name === city) {
- graphic.openTooltip()
+ // graphic.openTooltip()
+ graphic.openPopup()
}
}
},
@@ -161,7 +162,8 @@
})
}
})
- graphic1.bindTooltip(html)
+ // graphic1.bindTooltip(html)
+ graphic1.bindPopup(html)
layer.addGraphic(graphic1)
},
// 移除图层
@@ -177,5 +179,4 @@
diff --git a/src/components/Map/components/supplyLayerCone.vue b/src/components/Map/components/supplyLayerCone.vue
new file mode 100644
index 0000000..de46f58
--- /dev/null
+++ b/src/components/Map/components/supplyLayerCone.vue
@@ -0,0 +1,169 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/threatLayer.vue b/src/components/Map/components/threatLayer.vue
index e354278..4b2295b 100644
--- a/src/components/Map/components/threatLayer.vue
+++ b/src/components/Map/components/threatLayer.vue
@@ -19,6 +19,10 @@
components: { ThreatDialog },
mixins: [commonMixin('layer')],
props: {
+ colorful: {
+ type: Boolean,
+ default: false
+ },
show: {
type: Boolean,
default: false
@@ -30,7 +34,28 @@
color: {
type: String,
default: '#FBFE2D'
- }
+ },
+ colorList: {
+ type: Array,
+ default: () => {
+ return ['#f33349', '#f79a2c', '#f2fa19', '#95e40c', '#1ffee6']
+ }
+ },
+ threatLevel: {
+ type: Object,
+ default: () => {
+ return {
+ '1': 'A级',
+ '2': 'B级',
+ '3': 'C级',
+ '4': '问题'
+ }
+ }
+ }, // 隐患等级
+ popupType: {
+ type: String,
+ default: 'dialog'
+ } // 详情弹出方式:dialog/ popupWindow
},
data() {
return {
@@ -40,7 +65,6 @@
},
watch: {
show(val) {
- console.log('watch show: ' + val)
if (val) {
this.initLayer()
} else {
@@ -51,27 +75,21 @@
methods: {
load() {
console.log('load')
+ if (this.show) {
+ this.initLayer()
+ }
},
initLayer() {
- const { mars3d, map } = this
+ const { map } = this
if (map) {
- if (this.show) {
- if (this.layer) {
- this.removeLayer()
- }
+ if (this.show && this.layer) {
+ this.removeLayer()
}
- const graphicLayer = new mars3d.layer.GraphicLayer()
- this.layer = graphicLayer
- map.addLayer(graphicLayer)
this.loadData()
}
},
loadData() {
- const { mars3d, type, layer } = this
- layer.on(mars3d.EventType.click, event => {
- console.log('监听layer,单击了矢量对象', event)
- this.$refs.threatDialog.initDialog(event.graphic.attr)
- })
+ const { type } = this
if (type === 'construction') {
axios.get('static/config/threat.json').then((res) => {
res = res.data
@@ -103,28 +121,60 @@
},
// 添加隐患点: type类型,arr数组, clr颜色
addFeatures() {
- const { mars3d, Cesium, layer, color, data } = this
- // 创建DIV数据图层\
+ const { mars3d, map, Cesium, color, data, type } = this
+ const graphicLayer = new mars3d.layer.GraphicLayer({ name: type })
+ console.log('add Layer ' + type)
+ this.layer = graphicLayer
+ this.layer.on(mars3d.EventType.click, event => {
+ console.log('点击隐患', event)
+ if (this.popupType === 'dialog') {
+ this.$refs.threatDialog.initDialog(event.graphic.attr)
+ }
+ })
+ if (this.popupType === 'popupWindow') {
+ this.layer.bindPopup(event => {
+ const item = event.graphic.attr
+ var html =
+ '位置描述:' +
+ item['位置描述'] +
+ '
村庄地址:' +
+ item['村庄地址'] +
+ '
发现人:' +
+ item['发现人'] +
+ '
隐患描述:' +
+ item['隐患描述'] +
+ '
创建时间:' +
+ item['创建时间'] +
+ '
隐患等级:' +
+ this.threatLevel[item['隐患等级']]
+ return html
+ })
+ }
+ console.log(this.layer)
+ map.addLayer(this.layer)
+ // 创建DIV数据图层
for (var i = 0, len = data.length; i < len; i++) {
const item = data[i]
var jd = item['经度']
var wd = item['纬度']
+ const level = parseInt(item['隐患等级']) - 1
+ const clr = this.colorful ? this.colorList[level] : color
var graphic = new mars3d.graphic.DivGraphic({
position: Cesium.Cartesian3.fromDegrees(jd, wd, 0),
style: {
- html: '
',
+ html: '
',
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 2000000) // 按视距距离显示
},
attr: item
})
- layer.addGraphic(graphic)
+ this.layer.addGraphic(graphic)
}
},
// 移除图层
removeLayer() {
const { map, layer } = this
- if (this.layer) {
- map.removeLayer(layer)
+ if (layer) {
+ map.removeLayer(this.layer, true)
this.layer = null
}
}
diff --git a/src/components/Map/components/vipLayer.vue b/src/components/Map/components/vipLayer.vue
new file mode 100644
index 0000000..154d153
--- /dev/null
+++ b/src/components/Map/components/vipLayer.vue
@@ -0,0 +1,150 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/config/dev.env.js b/config/dev.env.js
index 2b11678..1a12bc2 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -6,10 +6,5 @@
// 将两个配置对象合并,最终结果是 NODE_ENV:‘"development"'
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
- // BASE_API: '"http://rest.apizza.net/mock/cfbb939c147bb6d68372de83af189fee/"',
- // BASE_API: '"http://119.254.103.80:14537"'
- // BASE_API: '"http://192.168.0.225:14537"'
- // BASE_API: '"http://localhost:8080/api/"'
BASE_API: '"http://192.168.0.102:11414"'
- // BASE_API: '"http://127.0.0.1:11414"'
})
diff --git a/src/assets/global_images/popwin.png b/src/assets/global_images/popwin.png
new file mode 100644
index 0000000..130b595
--- /dev/null
+++ b/src/assets/global_images/popwin.png
Binary files differ
diff --git a/src/components/Map/components/cameraLayer.vue b/src/components/Map/components/cameraLayer.vue
new file mode 100644
index 0000000..27403d1
--- /dev/null
+++ b/src/components/Map/components/cameraLayer.vue
@@ -0,0 +1,110 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/earthquakeLayer.vue b/src/components/Map/components/earthquakeLayer.vue
index e7efdc1..a4a0703 100644
--- a/src/components/Map/components/earthquakeLayer.vue
+++ b/src/components/Map/components/earthquakeLayer.vue
@@ -71,6 +71,7 @@
loadData() {
const { mars3d, Cesium, layer, height, size } = this
const date = getToday()
+ // const date = '2021-04-19'
getEarthquakeList(date).then((res) => {
if (res.data.length === 0) {
this.$message.info('今日无地震')
diff --git a/src/components/Map/components/hcaHeatLayer.vue b/src/components/Map/components/hcaHeatLayer.vue
index e4d3a21..9233d92 100644
--- a/src/components/Map/components/hcaHeatLayer.vue
+++ b/src/components/Map/components/hcaHeatLayer.vue
@@ -40,9 +40,10 @@
methods: {
load() {
console.log('load')
+ if (this.show) this.initLayer()
},
initLayer() {
- const { mars3d, map } = this
+ const { map } = this
if (map) {
if (this.show) {
if (this.layer) {
diff --git a/src/components/Map/components/hcaPointLayer.vue b/src/components/Map/components/hcaPointLayer.vue
new file mode 100644
index 0000000..b518699
--- /dev/null
+++ b/src/components/Map/components/hcaPointLayer.vue
@@ -0,0 +1,142 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/liquidFactoryLayer.vue b/src/components/Map/components/liquidFactoryLayer.vue
index 6845b93..3a1c0eb 100644
--- a/src/components/Map/components/liquidFactoryLayer.vue
+++ b/src/components/Map/components/liquidFactoryLayer.vue
@@ -72,15 +72,15 @@
}
},
loadData() {
- const { mars3d, layer } = this
+ const { mars3d, layer, height } = this
axios.get('static/config/liquidFactory.json').then((res) => {
res = res.data
if (res.code === 200) {
this.data = res.data[0].data
- for (const station of this.data) {
+ for (const item of this.data) {
const graphic = new mars3d.graphic.ModelEntity({
- name: station.name,
- position: [station.x, station.y, 0],
+ name: item.name,
+ position: [parseFloat(item.value[0]), parseFloat(item.value[1]), height],
url: 'static/gltf/output/yehuagongchang.gltf',
style: {
scale: 3,
@@ -88,7 +88,7 @@
minimumPixelSize: 30,
clampToGround: true
},
- tooltip: station.name
+ tooltip: item.name
})
layer.addGraphic(graphic)
}
diff --git a/src/components/Map/components/manageStationLayer.vue b/src/components/Map/components/manageStationLayer.vue
index c0aff38..7b976d6 100644
--- a/src/components/Map/components/manageStationLayer.vue
+++ b/src/components/Map/components/manageStationLayer.vue
@@ -56,6 +56,7 @@
methods: {
load() {
console.log('load')
+ if (this.show) this.initLayer()
},
initLayer() {
const { mars3d, map } = this
diff --git a/src/components/Map/components/needLayerCone.vue b/src/components/Map/components/needLayerCone.vue
new file mode 100644
index 0000000..373bf3c
--- /dev/null
+++ b/src/components/Map/components/needLayerCone.vue
@@ -0,0 +1,169 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/pipeLayer.vue b/src/components/Map/components/pipeLayer.vue
index 64142a7..0129de7 100644
--- a/src/components/Map/components/pipeLayer.vue
+++ b/src/components/Map/components/pipeLayer.vue
@@ -21,11 +21,11 @@
}, // 发光强度
opacity: {
type: Number,
- default: 0.9
+ default: 1
}, // 透明度
width: {
type: Number,
- default: 10
+ default: 5
}, // 线宽度
height: {
type: Number,
@@ -33,7 +33,7 @@
}, // 高度
color: {
type: String,
- default: '#92ffdf'
+ default: '#5affb2'
}, // 偏移值
show: {
type: Boolean,
@@ -69,10 +69,11 @@
}
this.layer = new mars3d.layer.GeoJsonLayer({
type: 'geojson',
- url: 'static/geojson/pipe.json',
+ url: 'static/geojson/pipe_old.json',
symbol: {
styleOptions: {
- materialType: 'PolylineGlow',
+ lineType: 'glow',
+ // materialType: 'LineFlicker',
glowPower: glowPower, // 发光强度
width: width, // 线宽
color: color,
@@ -83,7 +84,7 @@
show: true
})
map.addLayer(this.layer)
- this.loadData()
+ // this.loadData()
}
},
// 移除图层
diff --git a/src/components/Map/components/pipeLayer2.vue b/src/components/Map/components/pipeLayer2.vue
new file mode 100644
index 0000000..4f56b36
--- /dev/null
+++ b/src/components/Map/components/pipeLayer2.vue
@@ -0,0 +1,147 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/routeLayer.vue b/src/components/Map/components/routeLayer.vue
index 203bd89..15bb2a5 100644
--- a/src/components/Map/components/routeLayer.vue
+++ b/src/components/Map/components/routeLayer.vue
@@ -50,6 +50,9 @@
methods: {
load() {
console.log('load')
+ if(this.show){
+ this.initLayer()
+ }
},
initLayer() {
const { mars3d, map } = this
@@ -60,6 +63,19 @@
}
}
const graphicLayer = new mars3d.layer.DivLayer()
+ graphicLayer.on(mars3d.EventType.click, event => {
+ console.log('单击了巡检人员', event)
+ })
+ graphicLayer.bindPopup(event => {
+ const route = event.graphic.attr
+ const html =
+ '
姓名:' + route.name +
+ '
电话:' + route['phone'] +
+ '
岗位:' + route['duty'] +
+ '
站名:' + route['unitname'] +
+ '
时间:' + route.locationdate + '
'
+ return html
+ })
this.layer = graphicLayer
map.addLayer(graphicLayer)
this.loadData()
@@ -77,11 +93,11 @@
lat: parseFloat(item['WD60_06']),
locationdate: item['WD60_04'],
time: new Date(item['WD60_04']),
- duty: item['WD60_11'],
- sex: item['WD60_09'],
- phone: item['WD60_10'],
- idcard: item['WD60_12'],
- unitname: item['WD60_08']
+ duty: item['WD60_11'] === null ? '' : item['WD60_11'],
+ sex: item['WD60_09'] === null ? '' : item['WD60_09'],
+ phone: item['WD60_10'] === null ? '' : item['WD60_10'],
+ idcard: item['WD60_12'] === null ? '' : item['WD60_12'],
+ unitname: item['WD60_08'] === null ? '' : item['WD60_08']
}
})
this.filteredData = []
diff --git a/src/components/Map/components/supplyLayer.vue b/src/components/Map/components/supplyLayer.vue
index 583e546..7fdbe56 100644
--- a/src/components/Map/components/supplyLayer.vue
+++ b/src/components/Map/components/supplyLayer.vue
@@ -1,10 +1,10 @@
-
+
@@ -134,7 +134,8 @@
const graphics = layer.graphics
for (const graphic of graphics) {
if (graphic.name === city) {
- graphic.openTooltip()
+ // graphic.openTooltip()
+ graphic.openPopup()
}
}
},
@@ -161,7 +162,8 @@
})
}
})
- graphic1.bindTooltip(html)
+ // graphic1.bindTooltip(html)
+ graphic1.bindPopup(html)
layer.addGraphic(graphic1)
},
// 移除图层
@@ -177,5 +179,4 @@
diff --git a/src/components/Map/components/supplyLayerCone.vue b/src/components/Map/components/supplyLayerCone.vue
new file mode 100644
index 0000000..de46f58
--- /dev/null
+++ b/src/components/Map/components/supplyLayerCone.vue
@@ -0,0 +1,169 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/threatLayer.vue b/src/components/Map/components/threatLayer.vue
index e354278..4b2295b 100644
--- a/src/components/Map/components/threatLayer.vue
+++ b/src/components/Map/components/threatLayer.vue
@@ -19,6 +19,10 @@
components: { ThreatDialog },
mixins: [commonMixin('layer')],
props: {
+ colorful: {
+ type: Boolean,
+ default: false
+ },
show: {
type: Boolean,
default: false
@@ -30,7 +34,28 @@
color: {
type: String,
default: '#FBFE2D'
- }
+ },
+ colorList: {
+ type: Array,
+ default: () => {
+ return ['#f33349', '#f79a2c', '#f2fa19', '#95e40c', '#1ffee6']
+ }
+ },
+ threatLevel: {
+ type: Object,
+ default: () => {
+ return {
+ '1': 'A级',
+ '2': 'B级',
+ '3': 'C级',
+ '4': '问题'
+ }
+ }
+ }, // 隐患等级
+ popupType: {
+ type: String,
+ default: 'dialog'
+ } // 详情弹出方式:dialog/ popupWindow
},
data() {
return {
@@ -40,7 +65,6 @@
},
watch: {
show(val) {
- console.log('watch show: ' + val)
if (val) {
this.initLayer()
} else {
@@ -51,27 +75,21 @@
methods: {
load() {
console.log('load')
+ if (this.show) {
+ this.initLayer()
+ }
},
initLayer() {
- const { mars3d, map } = this
+ const { map } = this
if (map) {
- if (this.show) {
- if (this.layer) {
- this.removeLayer()
- }
+ if (this.show && this.layer) {
+ this.removeLayer()
}
- const graphicLayer = new mars3d.layer.GraphicLayer()
- this.layer = graphicLayer
- map.addLayer(graphicLayer)
this.loadData()
}
},
loadData() {
- const { mars3d, type, layer } = this
- layer.on(mars3d.EventType.click, event => {
- console.log('监听layer,单击了矢量对象', event)
- this.$refs.threatDialog.initDialog(event.graphic.attr)
- })
+ const { type } = this
if (type === 'construction') {
axios.get('static/config/threat.json').then((res) => {
res = res.data
@@ -103,28 +121,60 @@
},
// 添加隐患点: type类型,arr数组, clr颜色
addFeatures() {
- const { mars3d, Cesium, layer, color, data } = this
- // 创建DIV数据图层\
+ const { mars3d, map, Cesium, color, data, type } = this
+ const graphicLayer = new mars3d.layer.GraphicLayer({ name: type })
+ console.log('add Layer ' + type)
+ this.layer = graphicLayer
+ this.layer.on(mars3d.EventType.click, event => {
+ console.log('点击隐患', event)
+ if (this.popupType === 'dialog') {
+ this.$refs.threatDialog.initDialog(event.graphic.attr)
+ }
+ })
+ if (this.popupType === 'popupWindow') {
+ this.layer.bindPopup(event => {
+ const item = event.graphic.attr
+ var html =
+ '位置描述:' +
+ item['位置描述'] +
+ '
村庄地址:' +
+ item['村庄地址'] +
+ '
发现人:' +
+ item['发现人'] +
+ '
隐患描述:' +
+ item['隐患描述'] +
+ '
创建时间:' +
+ item['创建时间'] +
+ '
隐患等级:' +
+ this.threatLevel[item['隐患等级']]
+ return html
+ })
+ }
+ console.log(this.layer)
+ map.addLayer(this.layer)
+ // 创建DIV数据图层
for (var i = 0, len = data.length; i < len; i++) {
const item = data[i]
var jd = item['经度']
var wd = item['纬度']
+ const level = parseInt(item['隐患等级']) - 1
+ const clr = this.colorful ? this.colorList[level] : color
var graphic = new mars3d.graphic.DivGraphic({
position: Cesium.Cartesian3.fromDegrees(jd, wd, 0),
style: {
- html: '
',
+ html: '
',
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 2000000) // 按视距距离显示
},
attr: item
})
- layer.addGraphic(graphic)
+ this.layer.addGraphic(graphic)
}
},
// 移除图层
removeLayer() {
const { map, layer } = this
- if (this.layer) {
- map.removeLayer(layer)
+ if (layer) {
+ map.removeLayer(this.layer, true)
this.layer = null
}
}
diff --git a/src/components/Map/components/vipLayer.vue b/src/components/Map/components/vipLayer.vue
new file mode 100644
index 0000000..154d153
--- /dev/null
+++ b/src/components/Map/components/vipLayer.vue
@@ -0,0 +1,150 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/weatherLayer.vue b/src/components/Map/components/weatherLayer.vue
index 98afe91..b9f2096 100644
--- a/src/components/Map/components/weatherLayer.vue
+++ b/src/components/Map/components/weatherLayer.vue
@@ -66,7 +66,8 @@
},
methods: {
load() {
- console.log('load')
+ console.log('load Weather Layer')
+ if(this.show) this.initLayer()
},
initLayer() {
const { mars3d, map } = this
diff --git a/config/dev.env.js b/config/dev.env.js
index 2b11678..1a12bc2 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -6,10 +6,5 @@
// 将两个配置对象合并,最终结果是 NODE_ENV:‘"development"'
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
- // BASE_API: '"http://rest.apizza.net/mock/cfbb939c147bb6d68372de83af189fee/"',
- // BASE_API: '"http://119.254.103.80:14537"'
- // BASE_API: '"http://192.168.0.225:14537"'
- // BASE_API: '"http://localhost:8080/api/"'
BASE_API: '"http://192.168.0.102:11414"'
- // BASE_API: '"http://127.0.0.1:11414"'
})
diff --git a/src/assets/global_images/popwin.png b/src/assets/global_images/popwin.png
new file mode 100644
index 0000000..130b595
--- /dev/null
+++ b/src/assets/global_images/popwin.png
Binary files differ
diff --git a/src/components/Map/components/cameraLayer.vue b/src/components/Map/components/cameraLayer.vue
new file mode 100644
index 0000000..27403d1
--- /dev/null
+++ b/src/components/Map/components/cameraLayer.vue
@@ -0,0 +1,110 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/earthquakeLayer.vue b/src/components/Map/components/earthquakeLayer.vue
index e7efdc1..a4a0703 100644
--- a/src/components/Map/components/earthquakeLayer.vue
+++ b/src/components/Map/components/earthquakeLayer.vue
@@ -71,6 +71,7 @@
loadData() {
const { mars3d, Cesium, layer, height, size } = this
const date = getToday()
+ // const date = '2021-04-19'
getEarthquakeList(date).then((res) => {
if (res.data.length === 0) {
this.$message.info('今日无地震')
diff --git a/src/components/Map/components/hcaHeatLayer.vue b/src/components/Map/components/hcaHeatLayer.vue
index e4d3a21..9233d92 100644
--- a/src/components/Map/components/hcaHeatLayer.vue
+++ b/src/components/Map/components/hcaHeatLayer.vue
@@ -40,9 +40,10 @@
methods: {
load() {
console.log('load')
+ if (this.show) this.initLayer()
},
initLayer() {
- const { mars3d, map } = this
+ const { map } = this
if (map) {
if (this.show) {
if (this.layer) {
diff --git a/src/components/Map/components/hcaPointLayer.vue b/src/components/Map/components/hcaPointLayer.vue
new file mode 100644
index 0000000..b518699
--- /dev/null
+++ b/src/components/Map/components/hcaPointLayer.vue
@@ -0,0 +1,142 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/liquidFactoryLayer.vue b/src/components/Map/components/liquidFactoryLayer.vue
index 6845b93..3a1c0eb 100644
--- a/src/components/Map/components/liquidFactoryLayer.vue
+++ b/src/components/Map/components/liquidFactoryLayer.vue
@@ -72,15 +72,15 @@
}
},
loadData() {
- const { mars3d, layer } = this
+ const { mars3d, layer, height } = this
axios.get('static/config/liquidFactory.json').then((res) => {
res = res.data
if (res.code === 200) {
this.data = res.data[0].data
- for (const station of this.data) {
+ for (const item of this.data) {
const graphic = new mars3d.graphic.ModelEntity({
- name: station.name,
- position: [station.x, station.y, 0],
+ name: item.name,
+ position: [parseFloat(item.value[0]), parseFloat(item.value[1]), height],
url: 'static/gltf/output/yehuagongchang.gltf',
style: {
scale: 3,
@@ -88,7 +88,7 @@
minimumPixelSize: 30,
clampToGround: true
},
- tooltip: station.name
+ tooltip: item.name
})
layer.addGraphic(graphic)
}
diff --git a/src/components/Map/components/manageStationLayer.vue b/src/components/Map/components/manageStationLayer.vue
index c0aff38..7b976d6 100644
--- a/src/components/Map/components/manageStationLayer.vue
+++ b/src/components/Map/components/manageStationLayer.vue
@@ -56,6 +56,7 @@
methods: {
load() {
console.log('load')
+ if (this.show) this.initLayer()
},
initLayer() {
const { mars3d, map } = this
diff --git a/src/components/Map/components/needLayerCone.vue b/src/components/Map/components/needLayerCone.vue
new file mode 100644
index 0000000..373bf3c
--- /dev/null
+++ b/src/components/Map/components/needLayerCone.vue
@@ -0,0 +1,169 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/pipeLayer.vue b/src/components/Map/components/pipeLayer.vue
index 64142a7..0129de7 100644
--- a/src/components/Map/components/pipeLayer.vue
+++ b/src/components/Map/components/pipeLayer.vue
@@ -21,11 +21,11 @@
}, // 发光强度
opacity: {
type: Number,
- default: 0.9
+ default: 1
}, // 透明度
width: {
type: Number,
- default: 10
+ default: 5
}, // 线宽度
height: {
type: Number,
@@ -33,7 +33,7 @@
}, // 高度
color: {
type: String,
- default: '#92ffdf'
+ default: '#5affb2'
}, // 偏移值
show: {
type: Boolean,
@@ -69,10 +69,11 @@
}
this.layer = new mars3d.layer.GeoJsonLayer({
type: 'geojson',
- url: 'static/geojson/pipe.json',
+ url: 'static/geojson/pipe_old.json',
symbol: {
styleOptions: {
- materialType: 'PolylineGlow',
+ lineType: 'glow',
+ // materialType: 'LineFlicker',
glowPower: glowPower, // 发光强度
width: width, // 线宽
color: color,
@@ -83,7 +84,7 @@
show: true
})
map.addLayer(this.layer)
- this.loadData()
+ // this.loadData()
}
},
// 移除图层
diff --git a/src/components/Map/components/pipeLayer2.vue b/src/components/Map/components/pipeLayer2.vue
new file mode 100644
index 0000000..4f56b36
--- /dev/null
+++ b/src/components/Map/components/pipeLayer2.vue
@@ -0,0 +1,147 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/routeLayer.vue b/src/components/Map/components/routeLayer.vue
index 203bd89..15bb2a5 100644
--- a/src/components/Map/components/routeLayer.vue
+++ b/src/components/Map/components/routeLayer.vue
@@ -50,6 +50,9 @@
methods: {
load() {
console.log('load')
+ if(this.show){
+ this.initLayer()
+ }
},
initLayer() {
const { mars3d, map } = this
@@ -60,6 +63,19 @@
}
}
const graphicLayer = new mars3d.layer.DivLayer()
+ graphicLayer.on(mars3d.EventType.click, event => {
+ console.log('单击了巡检人员', event)
+ })
+ graphicLayer.bindPopup(event => {
+ const route = event.graphic.attr
+ const html =
+ '
姓名:' + route.name +
+ '
电话:' + route['phone'] +
+ '
岗位:' + route['duty'] +
+ '
站名:' + route['unitname'] +
+ '
时间:' + route.locationdate + '
'
+ return html
+ })
this.layer = graphicLayer
map.addLayer(graphicLayer)
this.loadData()
@@ -77,11 +93,11 @@
lat: parseFloat(item['WD60_06']),
locationdate: item['WD60_04'],
time: new Date(item['WD60_04']),
- duty: item['WD60_11'],
- sex: item['WD60_09'],
- phone: item['WD60_10'],
- idcard: item['WD60_12'],
- unitname: item['WD60_08']
+ duty: item['WD60_11'] === null ? '' : item['WD60_11'],
+ sex: item['WD60_09'] === null ? '' : item['WD60_09'],
+ phone: item['WD60_10'] === null ? '' : item['WD60_10'],
+ idcard: item['WD60_12'] === null ? '' : item['WD60_12'],
+ unitname: item['WD60_08'] === null ? '' : item['WD60_08']
}
})
this.filteredData = []
diff --git a/src/components/Map/components/supplyLayer.vue b/src/components/Map/components/supplyLayer.vue
index 583e546..7fdbe56 100644
--- a/src/components/Map/components/supplyLayer.vue
+++ b/src/components/Map/components/supplyLayer.vue
@@ -1,10 +1,10 @@
-
+
@@ -134,7 +134,8 @@
const graphics = layer.graphics
for (const graphic of graphics) {
if (graphic.name === city) {
- graphic.openTooltip()
+ // graphic.openTooltip()
+ graphic.openPopup()
}
}
},
@@ -161,7 +162,8 @@
})
}
})
- graphic1.bindTooltip(html)
+ // graphic1.bindTooltip(html)
+ graphic1.bindPopup(html)
layer.addGraphic(graphic1)
},
// 移除图层
@@ -177,5 +179,4 @@
diff --git a/src/components/Map/components/supplyLayerCone.vue b/src/components/Map/components/supplyLayerCone.vue
new file mode 100644
index 0000000..de46f58
--- /dev/null
+++ b/src/components/Map/components/supplyLayerCone.vue
@@ -0,0 +1,169 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/threatLayer.vue b/src/components/Map/components/threatLayer.vue
index e354278..4b2295b 100644
--- a/src/components/Map/components/threatLayer.vue
+++ b/src/components/Map/components/threatLayer.vue
@@ -19,6 +19,10 @@
components: { ThreatDialog },
mixins: [commonMixin('layer')],
props: {
+ colorful: {
+ type: Boolean,
+ default: false
+ },
show: {
type: Boolean,
default: false
@@ -30,7 +34,28 @@
color: {
type: String,
default: '#FBFE2D'
- }
+ },
+ colorList: {
+ type: Array,
+ default: () => {
+ return ['#f33349', '#f79a2c', '#f2fa19', '#95e40c', '#1ffee6']
+ }
+ },
+ threatLevel: {
+ type: Object,
+ default: () => {
+ return {
+ '1': 'A级',
+ '2': 'B级',
+ '3': 'C级',
+ '4': '问题'
+ }
+ }
+ }, // 隐患等级
+ popupType: {
+ type: String,
+ default: 'dialog'
+ } // 详情弹出方式:dialog/ popupWindow
},
data() {
return {
@@ -40,7 +65,6 @@
},
watch: {
show(val) {
- console.log('watch show: ' + val)
if (val) {
this.initLayer()
} else {
@@ -51,27 +75,21 @@
methods: {
load() {
console.log('load')
+ if (this.show) {
+ this.initLayer()
+ }
},
initLayer() {
- const { mars3d, map } = this
+ const { map } = this
if (map) {
- if (this.show) {
- if (this.layer) {
- this.removeLayer()
- }
+ if (this.show && this.layer) {
+ this.removeLayer()
}
- const graphicLayer = new mars3d.layer.GraphicLayer()
- this.layer = graphicLayer
- map.addLayer(graphicLayer)
this.loadData()
}
},
loadData() {
- const { mars3d, type, layer } = this
- layer.on(mars3d.EventType.click, event => {
- console.log('监听layer,单击了矢量对象', event)
- this.$refs.threatDialog.initDialog(event.graphic.attr)
- })
+ const { type } = this
if (type === 'construction') {
axios.get('static/config/threat.json').then((res) => {
res = res.data
@@ -103,28 +121,60 @@
},
// 添加隐患点: type类型,arr数组, clr颜色
addFeatures() {
- const { mars3d, Cesium, layer, color, data } = this
- // 创建DIV数据图层\
+ const { mars3d, map, Cesium, color, data, type } = this
+ const graphicLayer = new mars3d.layer.GraphicLayer({ name: type })
+ console.log('add Layer ' + type)
+ this.layer = graphicLayer
+ this.layer.on(mars3d.EventType.click, event => {
+ console.log('点击隐患', event)
+ if (this.popupType === 'dialog') {
+ this.$refs.threatDialog.initDialog(event.graphic.attr)
+ }
+ })
+ if (this.popupType === 'popupWindow') {
+ this.layer.bindPopup(event => {
+ const item = event.graphic.attr
+ var html =
+ '位置描述:' +
+ item['位置描述'] +
+ '
村庄地址:' +
+ item['村庄地址'] +
+ '
发现人:' +
+ item['发现人'] +
+ '
隐患描述:' +
+ item['隐患描述'] +
+ '
创建时间:' +
+ item['创建时间'] +
+ '
隐患等级:' +
+ this.threatLevel[item['隐患等级']]
+ return html
+ })
+ }
+ console.log(this.layer)
+ map.addLayer(this.layer)
+ // 创建DIV数据图层
for (var i = 0, len = data.length; i < len; i++) {
const item = data[i]
var jd = item['经度']
var wd = item['纬度']
+ const level = parseInt(item['隐患等级']) - 1
+ const clr = this.colorful ? this.colorList[level] : color
var graphic = new mars3d.graphic.DivGraphic({
position: Cesium.Cartesian3.fromDegrees(jd, wd, 0),
style: {
- html: '
',
+ html: '
',
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 2000000) // 按视距距离显示
},
attr: item
})
- layer.addGraphic(graphic)
+ this.layer.addGraphic(graphic)
}
},
// 移除图层
removeLayer() {
const { map, layer } = this
- if (this.layer) {
- map.removeLayer(layer)
+ if (layer) {
+ map.removeLayer(this.layer, true)
this.layer = null
}
}
diff --git a/src/components/Map/components/vipLayer.vue b/src/components/Map/components/vipLayer.vue
new file mode 100644
index 0000000..154d153
--- /dev/null
+++ b/src/components/Map/components/vipLayer.vue
@@ -0,0 +1,150 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/weatherLayer.vue b/src/components/Map/components/weatherLayer.vue
index 98afe91..b9f2096 100644
--- a/src/components/Map/components/weatherLayer.vue
+++ b/src/components/Map/components/weatherLayer.vue
@@ -66,7 +66,8 @@
},
methods: {
load() {
- console.log('load')
+ console.log('load Weather Layer')
+ if(this.show) this.initLayer()
},
initLayer() {
const { mars3d, map } = this
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 4b4e27b..b69d5d4 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -220,3 +220,18 @@
}
}
}
+.mars3d-popup-background{
+ background-color: transparent !important;
+ background-image: url("../assets/global_images/popwin.png") !important;
+ background-repeat: no-repeat !important;
+ background-size: 100% 100% !important;
+}
+.mars3d-popup-tip-container{
+ display:none !important;
+}
+.mars3d-popup-content-wrapper{
+ box-shadow: none !important;
+ -webkit-box-shadow: none !important;
+ padding-top:10px !important;
+ padding-bottom: 10px !important;
+}
diff --git a/config/dev.env.js b/config/dev.env.js
index 2b11678..1a12bc2 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -6,10 +6,5 @@
// 将两个配置对象合并,最终结果是 NODE_ENV:‘"development"'
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
- // BASE_API: '"http://rest.apizza.net/mock/cfbb939c147bb6d68372de83af189fee/"',
- // BASE_API: '"http://119.254.103.80:14537"'
- // BASE_API: '"http://192.168.0.225:14537"'
- // BASE_API: '"http://localhost:8080/api/"'
BASE_API: '"http://192.168.0.102:11414"'
- // BASE_API: '"http://127.0.0.1:11414"'
})
diff --git a/src/assets/global_images/popwin.png b/src/assets/global_images/popwin.png
new file mode 100644
index 0000000..130b595
--- /dev/null
+++ b/src/assets/global_images/popwin.png
Binary files differ
diff --git a/src/components/Map/components/cameraLayer.vue b/src/components/Map/components/cameraLayer.vue
new file mode 100644
index 0000000..27403d1
--- /dev/null
+++ b/src/components/Map/components/cameraLayer.vue
@@ -0,0 +1,110 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/earthquakeLayer.vue b/src/components/Map/components/earthquakeLayer.vue
index e7efdc1..a4a0703 100644
--- a/src/components/Map/components/earthquakeLayer.vue
+++ b/src/components/Map/components/earthquakeLayer.vue
@@ -71,6 +71,7 @@
loadData() {
const { mars3d, Cesium, layer, height, size } = this
const date = getToday()
+ // const date = '2021-04-19'
getEarthquakeList(date).then((res) => {
if (res.data.length === 0) {
this.$message.info('今日无地震')
diff --git a/src/components/Map/components/hcaHeatLayer.vue b/src/components/Map/components/hcaHeatLayer.vue
index e4d3a21..9233d92 100644
--- a/src/components/Map/components/hcaHeatLayer.vue
+++ b/src/components/Map/components/hcaHeatLayer.vue
@@ -40,9 +40,10 @@
methods: {
load() {
console.log('load')
+ if (this.show) this.initLayer()
},
initLayer() {
- const { mars3d, map } = this
+ const { map } = this
if (map) {
if (this.show) {
if (this.layer) {
diff --git a/src/components/Map/components/hcaPointLayer.vue b/src/components/Map/components/hcaPointLayer.vue
new file mode 100644
index 0000000..b518699
--- /dev/null
+++ b/src/components/Map/components/hcaPointLayer.vue
@@ -0,0 +1,142 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/liquidFactoryLayer.vue b/src/components/Map/components/liquidFactoryLayer.vue
index 6845b93..3a1c0eb 100644
--- a/src/components/Map/components/liquidFactoryLayer.vue
+++ b/src/components/Map/components/liquidFactoryLayer.vue
@@ -72,15 +72,15 @@
}
},
loadData() {
- const { mars3d, layer } = this
+ const { mars3d, layer, height } = this
axios.get('static/config/liquidFactory.json').then((res) => {
res = res.data
if (res.code === 200) {
this.data = res.data[0].data
- for (const station of this.data) {
+ for (const item of this.data) {
const graphic = new mars3d.graphic.ModelEntity({
- name: station.name,
- position: [station.x, station.y, 0],
+ name: item.name,
+ position: [parseFloat(item.value[0]), parseFloat(item.value[1]), height],
url: 'static/gltf/output/yehuagongchang.gltf',
style: {
scale: 3,
@@ -88,7 +88,7 @@
minimumPixelSize: 30,
clampToGround: true
},
- tooltip: station.name
+ tooltip: item.name
})
layer.addGraphic(graphic)
}
diff --git a/src/components/Map/components/manageStationLayer.vue b/src/components/Map/components/manageStationLayer.vue
index c0aff38..7b976d6 100644
--- a/src/components/Map/components/manageStationLayer.vue
+++ b/src/components/Map/components/manageStationLayer.vue
@@ -56,6 +56,7 @@
methods: {
load() {
console.log('load')
+ if (this.show) this.initLayer()
},
initLayer() {
const { mars3d, map } = this
diff --git a/src/components/Map/components/needLayerCone.vue b/src/components/Map/components/needLayerCone.vue
new file mode 100644
index 0000000..373bf3c
--- /dev/null
+++ b/src/components/Map/components/needLayerCone.vue
@@ -0,0 +1,169 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/pipeLayer.vue b/src/components/Map/components/pipeLayer.vue
index 64142a7..0129de7 100644
--- a/src/components/Map/components/pipeLayer.vue
+++ b/src/components/Map/components/pipeLayer.vue
@@ -21,11 +21,11 @@
}, // 发光强度
opacity: {
type: Number,
- default: 0.9
+ default: 1
}, // 透明度
width: {
type: Number,
- default: 10
+ default: 5
}, // 线宽度
height: {
type: Number,
@@ -33,7 +33,7 @@
}, // 高度
color: {
type: String,
- default: '#92ffdf'
+ default: '#5affb2'
}, // 偏移值
show: {
type: Boolean,
@@ -69,10 +69,11 @@
}
this.layer = new mars3d.layer.GeoJsonLayer({
type: 'geojson',
- url: 'static/geojson/pipe.json',
+ url: 'static/geojson/pipe_old.json',
symbol: {
styleOptions: {
- materialType: 'PolylineGlow',
+ lineType: 'glow',
+ // materialType: 'LineFlicker',
glowPower: glowPower, // 发光强度
width: width, // 线宽
color: color,
@@ -83,7 +84,7 @@
show: true
})
map.addLayer(this.layer)
- this.loadData()
+ // this.loadData()
}
},
// 移除图层
diff --git a/src/components/Map/components/pipeLayer2.vue b/src/components/Map/components/pipeLayer2.vue
new file mode 100644
index 0000000..4f56b36
--- /dev/null
+++ b/src/components/Map/components/pipeLayer2.vue
@@ -0,0 +1,147 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/routeLayer.vue b/src/components/Map/components/routeLayer.vue
index 203bd89..15bb2a5 100644
--- a/src/components/Map/components/routeLayer.vue
+++ b/src/components/Map/components/routeLayer.vue
@@ -50,6 +50,9 @@
methods: {
load() {
console.log('load')
+ if(this.show){
+ this.initLayer()
+ }
},
initLayer() {
const { mars3d, map } = this
@@ -60,6 +63,19 @@
}
}
const graphicLayer = new mars3d.layer.DivLayer()
+ graphicLayer.on(mars3d.EventType.click, event => {
+ console.log('单击了巡检人员', event)
+ })
+ graphicLayer.bindPopup(event => {
+ const route = event.graphic.attr
+ const html =
+ '
姓名:' + route.name +
+ '
电话:' + route['phone'] +
+ '
岗位:' + route['duty'] +
+ '
站名:' + route['unitname'] +
+ '
时间:' + route.locationdate + '
'
+ return html
+ })
this.layer = graphicLayer
map.addLayer(graphicLayer)
this.loadData()
@@ -77,11 +93,11 @@
lat: parseFloat(item['WD60_06']),
locationdate: item['WD60_04'],
time: new Date(item['WD60_04']),
- duty: item['WD60_11'],
- sex: item['WD60_09'],
- phone: item['WD60_10'],
- idcard: item['WD60_12'],
- unitname: item['WD60_08']
+ duty: item['WD60_11'] === null ? '' : item['WD60_11'],
+ sex: item['WD60_09'] === null ? '' : item['WD60_09'],
+ phone: item['WD60_10'] === null ? '' : item['WD60_10'],
+ idcard: item['WD60_12'] === null ? '' : item['WD60_12'],
+ unitname: item['WD60_08'] === null ? '' : item['WD60_08']
}
})
this.filteredData = []
diff --git a/src/components/Map/components/supplyLayer.vue b/src/components/Map/components/supplyLayer.vue
index 583e546..7fdbe56 100644
--- a/src/components/Map/components/supplyLayer.vue
+++ b/src/components/Map/components/supplyLayer.vue
@@ -1,10 +1,10 @@
-
+
@@ -134,7 +134,8 @@
const graphics = layer.graphics
for (const graphic of graphics) {
if (graphic.name === city) {
- graphic.openTooltip()
+ // graphic.openTooltip()
+ graphic.openPopup()
}
}
},
@@ -161,7 +162,8 @@
})
}
})
- graphic1.bindTooltip(html)
+ // graphic1.bindTooltip(html)
+ graphic1.bindPopup(html)
layer.addGraphic(graphic1)
},
// 移除图层
@@ -177,5 +179,4 @@
diff --git a/src/components/Map/components/supplyLayerCone.vue b/src/components/Map/components/supplyLayerCone.vue
new file mode 100644
index 0000000..de46f58
--- /dev/null
+++ b/src/components/Map/components/supplyLayerCone.vue
@@ -0,0 +1,169 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/threatLayer.vue b/src/components/Map/components/threatLayer.vue
index e354278..4b2295b 100644
--- a/src/components/Map/components/threatLayer.vue
+++ b/src/components/Map/components/threatLayer.vue
@@ -19,6 +19,10 @@
components: { ThreatDialog },
mixins: [commonMixin('layer')],
props: {
+ colorful: {
+ type: Boolean,
+ default: false
+ },
show: {
type: Boolean,
default: false
@@ -30,7 +34,28 @@
color: {
type: String,
default: '#FBFE2D'
- }
+ },
+ colorList: {
+ type: Array,
+ default: () => {
+ return ['#f33349', '#f79a2c', '#f2fa19', '#95e40c', '#1ffee6']
+ }
+ },
+ threatLevel: {
+ type: Object,
+ default: () => {
+ return {
+ '1': 'A级',
+ '2': 'B级',
+ '3': 'C级',
+ '4': '问题'
+ }
+ }
+ }, // 隐患等级
+ popupType: {
+ type: String,
+ default: 'dialog'
+ } // 详情弹出方式:dialog/ popupWindow
},
data() {
return {
@@ -40,7 +65,6 @@
},
watch: {
show(val) {
- console.log('watch show: ' + val)
if (val) {
this.initLayer()
} else {
@@ -51,27 +75,21 @@
methods: {
load() {
console.log('load')
+ if (this.show) {
+ this.initLayer()
+ }
},
initLayer() {
- const { mars3d, map } = this
+ const { map } = this
if (map) {
- if (this.show) {
- if (this.layer) {
- this.removeLayer()
- }
+ if (this.show && this.layer) {
+ this.removeLayer()
}
- const graphicLayer = new mars3d.layer.GraphicLayer()
- this.layer = graphicLayer
- map.addLayer(graphicLayer)
this.loadData()
}
},
loadData() {
- const { mars3d, type, layer } = this
- layer.on(mars3d.EventType.click, event => {
- console.log('监听layer,单击了矢量对象', event)
- this.$refs.threatDialog.initDialog(event.graphic.attr)
- })
+ const { type } = this
if (type === 'construction') {
axios.get('static/config/threat.json').then((res) => {
res = res.data
@@ -103,28 +121,60 @@
},
// 添加隐患点: type类型,arr数组, clr颜色
addFeatures() {
- const { mars3d, Cesium, layer, color, data } = this
- // 创建DIV数据图层\
+ const { mars3d, map, Cesium, color, data, type } = this
+ const graphicLayer = new mars3d.layer.GraphicLayer({ name: type })
+ console.log('add Layer ' + type)
+ this.layer = graphicLayer
+ this.layer.on(mars3d.EventType.click, event => {
+ console.log('点击隐患', event)
+ if (this.popupType === 'dialog') {
+ this.$refs.threatDialog.initDialog(event.graphic.attr)
+ }
+ })
+ if (this.popupType === 'popupWindow') {
+ this.layer.bindPopup(event => {
+ const item = event.graphic.attr
+ var html =
+ '位置描述:' +
+ item['位置描述'] +
+ '
村庄地址:' +
+ item['村庄地址'] +
+ '
发现人:' +
+ item['发现人'] +
+ '
隐患描述:' +
+ item['隐患描述'] +
+ '
创建时间:' +
+ item['创建时间'] +
+ '
隐患等级:' +
+ this.threatLevel[item['隐患等级']]
+ return html
+ })
+ }
+ console.log(this.layer)
+ map.addLayer(this.layer)
+ // 创建DIV数据图层
for (var i = 0, len = data.length; i < len; i++) {
const item = data[i]
var jd = item['经度']
var wd = item['纬度']
+ const level = parseInt(item['隐患等级']) - 1
+ const clr = this.colorful ? this.colorList[level] : color
var graphic = new mars3d.graphic.DivGraphic({
position: Cesium.Cartesian3.fromDegrees(jd, wd, 0),
style: {
- html: '
',
+ html: '
',
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 2000000) // 按视距距离显示
},
attr: item
})
- layer.addGraphic(graphic)
+ this.layer.addGraphic(graphic)
}
},
// 移除图层
removeLayer() {
const { map, layer } = this
- if (this.layer) {
- map.removeLayer(layer)
+ if (layer) {
+ map.removeLayer(this.layer, true)
this.layer = null
}
}
diff --git a/src/components/Map/components/vipLayer.vue b/src/components/Map/components/vipLayer.vue
new file mode 100644
index 0000000..154d153
--- /dev/null
+++ b/src/components/Map/components/vipLayer.vue
@@ -0,0 +1,150 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/weatherLayer.vue b/src/components/Map/components/weatherLayer.vue
index 98afe91..b9f2096 100644
--- a/src/components/Map/components/weatherLayer.vue
+++ b/src/components/Map/components/weatherLayer.vue
@@ -66,7 +66,8 @@
},
methods: {
load() {
- console.log('load')
+ console.log('load Weather Layer')
+ if(this.show) this.initLayer()
},
initLayer() {
const { mars3d, map } = this
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 4b4e27b..b69d5d4 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -220,3 +220,18 @@
}
}
}
+.mars3d-popup-background{
+ background-color: transparent !important;
+ background-image: url("../assets/global_images/popwin.png") !important;
+ background-repeat: no-repeat !important;
+ background-size: 100% 100% !important;
+}
+.mars3d-popup-tip-container{
+ display:none !important;
+}
+.mars3d-popup-content-wrapper{
+ box-shadow: none !important;
+ -webkit-box-shadow: none !important;
+ padding-top:10px !important;
+ padding-bottom: 10px !important;
+}
diff --git a/src/views/maps/constructionThreat.vue b/src/views/maps/constructionThreat.vue
index 246852f..eeea533 100644
--- a/src/views/maps/constructionThreat.vue
+++ b/src/views/maps/constructionThreat.vue
@@ -5,41 +5,37 @@
-->
-
-
-
-
-
-
-
-
-
-
-
-
-
+
-
-
+
+
+
+
diff --git a/src/components/Map/components/earthquakeLayer.vue b/src/components/Map/components/earthquakeLayer.vue
index e7efdc1..a4a0703 100644
--- a/src/components/Map/components/earthquakeLayer.vue
+++ b/src/components/Map/components/earthquakeLayer.vue
@@ -71,6 +71,7 @@
loadData() {
const { mars3d, Cesium, layer, height, size } = this
const date = getToday()
+ // const date = '2021-04-19'
getEarthquakeList(date).then((res) => {
if (res.data.length === 0) {
this.$message.info('今日无地震')
diff --git a/src/components/Map/components/hcaHeatLayer.vue b/src/components/Map/components/hcaHeatLayer.vue
index e4d3a21..9233d92 100644
--- a/src/components/Map/components/hcaHeatLayer.vue
+++ b/src/components/Map/components/hcaHeatLayer.vue
@@ -40,9 +40,10 @@
methods: {
load() {
console.log('load')
+ if (this.show) this.initLayer()
},
initLayer() {
- const { mars3d, map } = this
+ const { map } = this
if (map) {
if (this.show) {
if (this.layer) {
diff --git a/src/components/Map/components/hcaPointLayer.vue b/src/components/Map/components/hcaPointLayer.vue
new file mode 100644
index 0000000..b518699
--- /dev/null
+++ b/src/components/Map/components/hcaPointLayer.vue
@@ -0,0 +1,142 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/liquidFactoryLayer.vue b/src/components/Map/components/liquidFactoryLayer.vue
index 6845b93..3a1c0eb 100644
--- a/src/components/Map/components/liquidFactoryLayer.vue
+++ b/src/components/Map/components/liquidFactoryLayer.vue
@@ -72,15 +72,15 @@
}
},
loadData() {
- const { mars3d, layer } = this
+ const { mars3d, layer, height } = this
axios.get('static/config/liquidFactory.json').then((res) => {
res = res.data
if (res.code === 200) {
this.data = res.data[0].data
- for (const station of this.data) {
+ for (const item of this.data) {
const graphic = new mars3d.graphic.ModelEntity({
- name: station.name,
- position: [station.x, station.y, 0],
+ name: item.name,
+ position: [parseFloat(item.value[0]), parseFloat(item.value[1]), height],
url: 'static/gltf/output/yehuagongchang.gltf',
style: {
scale: 3,
@@ -88,7 +88,7 @@
minimumPixelSize: 30,
clampToGround: true
},
- tooltip: station.name
+ tooltip: item.name
})
layer.addGraphic(graphic)
}
diff --git a/src/components/Map/components/manageStationLayer.vue b/src/components/Map/components/manageStationLayer.vue
index c0aff38..7b976d6 100644
--- a/src/components/Map/components/manageStationLayer.vue
+++ b/src/components/Map/components/manageStationLayer.vue
@@ -56,6 +56,7 @@
methods: {
load() {
console.log('load')
+ if (this.show) this.initLayer()
},
initLayer() {
const { mars3d, map } = this
diff --git a/src/components/Map/components/needLayerCone.vue b/src/components/Map/components/needLayerCone.vue
new file mode 100644
index 0000000..373bf3c
--- /dev/null
+++ b/src/components/Map/components/needLayerCone.vue
@@ -0,0 +1,169 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/pipeLayer.vue b/src/components/Map/components/pipeLayer.vue
index 64142a7..0129de7 100644
--- a/src/components/Map/components/pipeLayer.vue
+++ b/src/components/Map/components/pipeLayer.vue
@@ -21,11 +21,11 @@
}, // 发光强度
opacity: {
type: Number,
- default: 0.9
+ default: 1
}, // 透明度
width: {
type: Number,
- default: 10
+ default: 5
}, // 线宽度
height: {
type: Number,
@@ -33,7 +33,7 @@
}, // 高度
color: {
type: String,
- default: '#92ffdf'
+ default: '#5affb2'
}, // 偏移值
show: {
type: Boolean,
@@ -69,10 +69,11 @@
}
this.layer = new mars3d.layer.GeoJsonLayer({
type: 'geojson',
- url: 'static/geojson/pipe.json',
+ url: 'static/geojson/pipe_old.json',
symbol: {
styleOptions: {
- materialType: 'PolylineGlow',
+ lineType: 'glow',
+ // materialType: 'LineFlicker',
glowPower: glowPower, // 发光强度
width: width, // 线宽
color: color,
@@ -83,7 +84,7 @@
show: true
})
map.addLayer(this.layer)
- this.loadData()
+ // this.loadData()
}
},
// 移除图层
diff --git a/src/components/Map/components/pipeLayer2.vue b/src/components/Map/components/pipeLayer2.vue
new file mode 100644
index 0000000..4f56b36
--- /dev/null
+++ b/src/components/Map/components/pipeLayer2.vue
@@ -0,0 +1,147 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/routeLayer.vue b/src/components/Map/components/routeLayer.vue
index 203bd89..15bb2a5 100644
--- a/src/components/Map/components/routeLayer.vue
+++ b/src/components/Map/components/routeLayer.vue
@@ -50,6 +50,9 @@
methods: {
load() {
console.log('load')
+ if(this.show){
+ this.initLayer()
+ }
},
initLayer() {
const { mars3d, map } = this
@@ -60,6 +63,19 @@
}
}
const graphicLayer = new mars3d.layer.DivLayer()
+ graphicLayer.on(mars3d.EventType.click, event => {
+ console.log('单击了巡检人员', event)
+ })
+ graphicLayer.bindPopup(event => {
+ const route = event.graphic.attr
+ const html =
+ '
姓名:' + route.name +
+ '
电话:' + route['phone'] +
+ '
岗位:' + route['duty'] +
+ '
站名:' + route['unitname'] +
+ '
时间:' + route.locationdate + '
'
+ return html
+ })
this.layer = graphicLayer
map.addLayer(graphicLayer)
this.loadData()
@@ -77,11 +93,11 @@
lat: parseFloat(item['WD60_06']),
locationdate: item['WD60_04'],
time: new Date(item['WD60_04']),
- duty: item['WD60_11'],
- sex: item['WD60_09'],
- phone: item['WD60_10'],
- idcard: item['WD60_12'],
- unitname: item['WD60_08']
+ duty: item['WD60_11'] === null ? '' : item['WD60_11'],
+ sex: item['WD60_09'] === null ? '' : item['WD60_09'],
+ phone: item['WD60_10'] === null ? '' : item['WD60_10'],
+ idcard: item['WD60_12'] === null ? '' : item['WD60_12'],
+ unitname: item['WD60_08'] === null ? '' : item['WD60_08']
}
})
this.filteredData = []
diff --git a/src/components/Map/components/supplyLayer.vue b/src/components/Map/components/supplyLayer.vue
index 583e546..7fdbe56 100644
--- a/src/components/Map/components/supplyLayer.vue
+++ b/src/components/Map/components/supplyLayer.vue
@@ -1,10 +1,10 @@
-
+
@@ -134,7 +134,8 @@
const graphics = layer.graphics
for (const graphic of graphics) {
if (graphic.name === city) {
- graphic.openTooltip()
+ // graphic.openTooltip()
+ graphic.openPopup()
}
}
},
@@ -161,7 +162,8 @@
})
}
})
- graphic1.bindTooltip(html)
+ // graphic1.bindTooltip(html)
+ graphic1.bindPopup(html)
layer.addGraphic(graphic1)
},
// 移除图层
@@ -177,5 +179,4 @@
diff --git a/src/components/Map/components/supplyLayerCone.vue b/src/components/Map/components/supplyLayerCone.vue
new file mode 100644
index 0000000..de46f58
--- /dev/null
+++ b/src/components/Map/components/supplyLayerCone.vue
@@ -0,0 +1,169 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/threatLayer.vue b/src/components/Map/components/threatLayer.vue
index e354278..4b2295b 100644
--- a/src/components/Map/components/threatLayer.vue
+++ b/src/components/Map/components/threatLayer.vue
@@ -19,6 +19,10 @@
components: { ThreatDialog },
mixins: [commonMixin('layer')],
props: {
+ colorful: {
+ type: Boolean,
+ default: false
+ },
show: {
type: Boolean,
default: false
@@ -30,7 +34,28 @@
color: {
type: String,
default: '#FBFE2D'
- }
+ },
+ colorList: {
+ type: Array,
+ default: () => {
+ return ['#f33349', '#f79a2c', '#f2fa19', '#95e40c', '#1ffee6']
+ }
+ },
+ threatLevel: {
+ type: Object,
+ default: () => {
+ return {
+ '1': 'A级',
+ '2': 'B级',
+ '3': 'C级',
+ '4': '问题'
+ }
+ }
+ }, // 隐患等级
+ popupType: {
+ type: String,
+ default: 'dialog'
+ } // 详情弹出方式:dialog/ popupWindow
},
data() {
return {
@@ -40,7 +65,6 @@
},
watch: {
show(val) {
- console.log('watch show: ' + val)
if (val) {
this.initLayer()
} else {
@@ -51,27 +75,21 @@
methods: {
load() {
console.log('load')
+ if (this.show) {
+ this.initLayer()
+ }
},
initLayer() {
- const { mars3d, map } = this
+ const { map } = this
if (map) {
- if (this.show) {
- if (this.layer) {
- this.removeLayer()
- }
+ if (this.show && this.layer) {
+ this.removeLayer()
}
- const graphicLayer = new mars3d.layer.GraphicLayer()
- this.layer = graphicLayer
- map.addLayer(graphicLayer)
this.loadData()
}
},
loadData() {
- const { mars3d, type, layer } = this
- layer.on(mars3d.EventType.click, event => {
- console.log('监听layer,单击了矢量对象', event)
- this.$refs.threatDialog.initDialog(event.graphic.attr)
- })
+ const { type } = this
if (type === 'construction') {
axios.get('static/config/threat.json').then((res) => {
res = res.data
@@ -103,28 +121,60 @@
},
// 添加隐患点: type类型,arr数组, clr颜色
addFeatures() {
- const { mars3d, Cesium, layer, color, data } = this
- // 创建DIV数据图层\
+ const { mars3d, map, Cesium, color, data, type } = this
+ const graphicLayer = new mars3d.layer.GraphicLayer({ name: type })
+ console.log('add Layer ' + type)
+ this.layer = graphicLayer
+ this.layer.on(mars3d.EventType.click, event => {
+ console.log('点击隐患', event)
+ if (this.popupType === 'dialog') {
+ this.$refs.threatDialog.initDialog(event.graphic.attr)
+ }
+ })
+ if (this.popupType === 'popupWindow') {
+ this.layer.bindPopup(event => {
+ const item = event.graphic.attr
+ var html =
+ '位置描述:' +
+ item['位置描述'] +
+ '
村庄地址:' +
+ item['村庄地址'] +
+ '
发现人:' +
+ item['发现人'] +
+ '
隐患描述:' +
+ item['隐患描述'] +
+ '
创建时间:' +
+ item['创建时间'] +
+ '
隐患等级:' +
+ this.threatLevel[item['隐患等级']]
+ return html
+ })
+ }
+ console.log(this.layer)
+ map.addLayer(this.layer)
+ // 创建DIV数据图层
for (var i = 0, len = data.length; i < len; i++) {
const item = data[i]
var jd = item['经度']
var wd = item['纬度']
+ const level = parseInt(item['隐患等级']) - 1
+ const clr = this.colorful ? this.colorList[level] : color
var graphic = new mars3d.graphic.DivGraphic({
position: Cesium.Cartesian3.fromDegrees(jd, wd, 0),
style: {
- html: '
',
+ html: '
',
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 2000000) // 按视距距离显示
},
attr: item
})
- layer.addGraphic(graphic)
+ this.layer.addGraphic(graphic)
}
},
// 移除图层
removeLayer() {
const { map, layer } = this
- if (this.layer) {
- map.removeLayer(layer)
+ if (layer) {
+ map.removeLayer(this.layer, true)
this.layer = null
}
}
diff --git a/src/components/Map/components/vipLayer.vue b/src/components/Map/components/vipLayer.vue
new file mode 100644
index 0000000..154d153
--- /dev/null
+++ b/src/components/Map/components/vipLayer.vue
@@ -0,0 +1,150 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/weatherLayer.vue b/src/components/Map/components/weatherLayer.vue
index 98afe91..b9f2096 100644
--- a/src/components/Map/components/weatherLayer.vue
+++ b/src/components/Map/components/weatherLayer.vue
@@ -66,7 +66,8 @@
},
methods: {
load() {
- console.log('load')
+ console.log('load Weather Layer')
+ if(this.show) this.initLayer()
},
initLayer() {
const { mars3d, map } = this
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 4b4e27b..b69d5d4 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -220,3 +220,18 @@
}
}
}
+.mars3d-popup-background{
+ background-color: transparent !important;
+ background-image: url("../assets/global_images/popwin.png") !important;
+ background-repeat: no-repeat !important;
+ background-size: 100% 100% !important;
+}
+.mars3d-popup-tip-container{
+ display:none !important;
+}
+.mars3d-popup-content-wrapper{
+ box-shadow: none !important;
+ -webkit-box-shadow: none !important;
+ padding-top:10px !important;
+ padding-bottom: 10px !important;
+}
diff --git a/src/views/maps/constructionThreat.vue b/src/views/maps/constructionThreat.vue
index 246852f..eeea533 100644
--- a/src/views/maps/constructionThreat.vue
+++ b/src/views/maps/constructionThreat.vue
@@ -5,41 +5,37 @@
-->
-
-
-
-
-
-
-
-
-
-
-
-
-
+
-
-
+
+
+
+
diff --git a/src/components/Map/components/earthquakeLayer.vue b/src/components/Map/components/earthquakeLayer.vue
index e7efdc1..a4a0703 100644
--- a/src/components/Map/components/earthquakeLayer.vue
+++ b/src/components/Map/components/earthquakeLayer.vue
@@ -71,6 +71,7 @@
loadData() {
const { mars3d, Cesium, layer, height, size } = this
const date = getToday()
+ // const date = '2021-04-19'
getEarthquakeList(date).then((res) => {
if (res.data.length === 0) {
this.$message.info('今日无地震')
diff --git a/src/components/Map/components/hcaHeatLayer.vue b/src/components/Map/components/hcaHeatLayer.vue
index e4d3a21..9233d92 100644
--- a/src/components/Map/components/hcaHeatLayer.vue
+++ b/src/components/Map/components/hcaHeatLayer.vue
@@ -40,9 +40,10 @@
methods: {
load() {
console.log('load')
+ if (this.show) this.initLayer()
},
initLayer() {
- const { mars3d, map } = this
+ const { map } = this
if (map) {
if (this.show) {
if (this.layer) {
diff --git a/src/components/Map/components/hcaPointLayer.vue b/src/components/Map/components/hcaPointLayer.vue
new file mode 100644
index 0000000..b518699
--- /dev/null
+++ b/src/components/Map/components/hcaPointLayer.vue
@@ -0,0 +1,142 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/liquidFactoryLayer.vue b/src/components/Map/components/liquidFactoryLayer.vue
index 6845b93..3a1c0eb 100644
--- a/src/components/Map/components/liquidFactoryLayer.vue
+++ b/src/components/Map/components/liquidFactoryLayer.vue
@@ -72,15 +72,15 @@
}
},
loadData() {
- const { mars3d, layer } = this
+ const { mars3d, layer, height } = this
axios.get('static/config/liquidFactory.json').then((res) => {
res = res.data
if (res.code === 200) {
this.data = res.data[0].data
- for (const station of this.data) {
+ for (const item of this.data) {
const graphic = new mars3d.graphic.ModelEntity({
- name: station.name,
- position: [station.x, station.y, 0],
+ name: item.name,
+ position: [parseFloat(item.value[0]), parseFloat(item.value[1]), height],
url: 'static/gltf/output/yehuagongchang.gltf',
style: {
scale: 3,
@@ -88,7 +88,7 @@
minimumPixelSize: 30,
clampToGround: true
},
- tooltip: station.name
+ tooltip: item.name
})
layer.addGraphic(graphic)
}
diff --git a/src/components/Map/components/manageStationLayer.vue b/src/components/Map/components/manageStationLayer.vue
index c0aff38..7b976d6 100644
--- a/src/components/Map/components/manageStationLayer.vue
+++ b/src/components/Map/components/manageStationLayer.vue
@@ -56,6 +56,7 @@
methods: {
load() {
console.log('load')
+ if (this.show) this.initLayer()
},
initLayer() {
const { mars3d, map } = this
diff --git a/src/components/Map/components/needLayerCone.vue b/src/components/Map/components/needLayerCone.vue
new file mode 100644
index 0000000..373bf3c
--- /dev/null
+++ b/src/components/Map/components/needLayerCone.vue
@@ -0,0 +1,169 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/pipeLayer.vue b/src/components/Map/components/pipeLayer.vue
index 64142a7..0129de7 100644
--- a/src/components/Map/components/pipeLayer.vue
+++ b/src/components/Map/components/pipeLayer.vue
@@ -21,11 +21,11 @@
}, // 发光强度
opacity: {
type: Number,
- default: 0.9
+ default: 1
}, // 透明度
width: {
type: Number,
- default: 10
+ default: 5
}, // 线宽度
height: {
type: Number,
@@ -33,7 +33,7 @@
}, // 高度
color: {
type: String,
- default: '#92ffdf'
+ default: '#5affb2'
}, // 偏移值
show: {
type: Boolean,
@@ -69,10 +69,11 @@
}
this.layer = new mars3d.layer.GeoJsonLayer({
type: 'geojson',
- url: 'static/geojson/pipe.json',
+ url: 'static/geojson/pipe_old.json',
symbol: {
styleOptions: {
- materialType: 'PolylineGlow',
+ lineType: 'glow',
+ // materialType: 'LineFlicker',
glowPower: glowPower, // 发光强度
width: width, // 线宽
color: color,
@@ -83,7 +84,7 @@
show: true
})
map.addLayer(this.layer)
- this.loadData()
+ // this.loadData()
}
},
// 移除图层
diff --git a/src/components/Map/components/pipeLayer2.vue b/src/components/Map/components/pipeLayer2.vue
new file mode 100644
index 0000000..4f56b36
--- /dev/null
+++ b/src/components/Map/components/pipeLayer2.vue
@@ -0,0 +1,147 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/routeLayer.vue b/src/components/Map/components/routeLayer.vue
index 203bd89..15bb2a5 100644
--- a/src/components/Map/components/routeLayer.vue
+++ b/src/components/Map/components/routeLayer.vue
@@ -50,6 +50,9 @@
methods: {
load() {
console.log('load')
+ if(this.show){
+ this.initLayer()
+ }
},
initLayer() {
const { mars3d, map } = this
@@ -60,6 +63,19 @@
}
}
const graphicLayer = new mars3d.layer.DivLayer()
+ graphicLayer.on(mars3d.EventType.click, event => {
+ console.log('单击了巡检人员', event)
+ })
+ graphicLayer.bindPopup(event => {
+ const route = event.graphic.attr
+ const html =
+ '
姓名:' + route.name +
+ '
电话:' + route['phone'] +
+ '
岗位:' + route['duty'] +
+ '
站名:' + route['unitname'] +
+ '
时间:' + route.locationdate + '
'
+ return html
+ })
this.layer = graphicLayer
map.addLayer(graphicLayer)
this.loadData()
@@ -77,11 +93,11 @@
lat: parseFloat(item['WD60_06']),
locationdate: item['WD60_04'],
time: new Date(item['WD60_04']),
- duty: item['WD60_11'],
- sex: item['WD60_09'],
- phone: item['WD60_10'],
- idcard: item['WD60_12'],
- unitname: item['WD60_08']
+ duty: item['WD60_11'] === null ? '' : item['WD60_11'],
+ sex: item['WD60_09'] === null ? '' : item['WD60_09'],
+ phone: item['WD60_10'] === null ? '' : item['WD60_10'],
+ idcard: item['WD60_12'] === null ? '' : item['WD60_12'],
+ unitname: item['WD60_08'] === null ? '' : item['WD60_08']
}
})
this.filteredData = []
diff --git a/src/components/Map/components/supplyLayer.vue b/src/components/Map/components/supplyLayer.vue
index 583e546..7fdbe56 100644
--- a/src/components/Map/components/supplyLayer.vue
+++ b/src/components/Map/components/supplyLayer.vue
@@ -1,10 +1,10 @@
-
+
@@ -134,7 +134,8 @@
const graphics = layer.graphics
for (const graphic of graphics) {
if (graphic.name === city) {
- graphic.openTooltip()
+ // graphic.openTooltip()
+ graphic.openPopup()
}
}
},
@@ -161,7 +162,8 @@
})
}
})
- graphic1.bindTooltip(html)
+ // graphic1.bindTooltip(html)
+ graphic1.bindPopup(html)
layer.addGraphic(graphic1)
},
// 移除图层
@@ -177,5 +179,4 @@
diff --git a/src/components/Map/components/supplyLayerCone.vue b/src/components/Map/components/supplyLayerCone.vue
new file mode 100644
index 0000000..de46f58
--- /dev/null
+++ b/src/components/Map/components/supplyLayerCone.vue
@@ -0,0 +1,169 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/threatLayer.vue b/src/components/Map/components/threatLayer.vue
index e354278..4b2295b 100644
--- a/src/components/Map/components/threatLayer.vue
+++ b/src/components/Map/components/threatLayer.vue
@@ -19,6 +19,10 @@
components: { ThreatDialog },
mixins: [commonMixin('layer')],
props: {
+ colorful: {
+ type: Boolean,
+ default: false
+ },
show: {
type: Boolean,
default: false
@@ -30,7 +34,28 @@
color: {
type: String,
default: '#FBFE2D'
- }
+ },
+ colorList: {
+ type: Array,
+ default: () => {
+ return ['#f33349', '#f79a2c', '#f2fa19', '#95e40c', '#1ffee6']
+ }
+ },
+ threatLevel: {
+ type: Object,
+ default: () => {
+ return {
+ '1': 'A级',
+ '2': 'B级',
+ '3': 'C级',
+ '4': '问题'
+ }
+ }
+ }, // 隐患等级
+ popupType: {
+ type: String,
+ default: 'dialog'
+ } // 详情弹出方式:dialog/ popupWindow
},
data() {
return {
@@ -40,7 +65,6 @@
},
watch: {
show(val) {
- console.log('watch show: ' + val)
if (val) {
this.initLayer()
} else {
@@ -51,27 +75,21 @@
methods: {
load() {
console.log('load')
+ if (this.show) {
+ this.initLayer()
+ }
},
initLayer() {
- const { mars3d, map } = this
+ const { map } = this
if (map) {
- if (this.show) {
- if (this.layer) {
- this.removeLayer()
- }
+ if (this.show && this.layer) {
+ this.removeLayer()
}
- const graphicLayer = new mars3d.layer.GraphicLayer()
- this.layer = graphicLayer
- map.addLayer(graphicLayer)
this.loadData()
}
},
loadData() {
- const { mars3d, type, layer } = this
- layer.on(mars3d.EventType.click, event => {
- console.log('监听layer,单击了矢量对象', event)
- this.$refs.threatDialog.initDialog(event.graphic.attr)
- })
+ const { type } = this
if (type === 'construction') {
axios.get('static/config/threat.json').then((res) => {
res = res.data
@@ -103,28 +121,60 @@
},
// 添加隐患点: type类型,arr数组, clr颜色
addFeatures() {
- const { mars3d, Cesium, layer, color, data } = this
- // 创建DIV数据图层\
+ const { mars3d, map, Cesium, color, data, type } = this
+ const graphicLayer = new mars3d.layer.GraphicLayer({ name: type })
+ console.log('add Layer ' + type)
+ this.layer = graphicLayer
+ this.layer.on(mars3d.EventType.click, event => {
+ console.log('点击隐患', event)
+ if (this.popupType === 'dialog') {
+ this.$refs.threatDialog.initDialog(event.graphic.attr)
+ }
+ })
+ if (this.popupType === 'popupWindow') {
+ this.layer.bindPopup(event => {
+ const item = event.graphic.attr
+ var html =
+ '位置描述:' +
+ item['位置描述'] +
+ '
村庄地址:' +
+ item['村庄地址'] +
+ '
发现人:' +
+ item['发现人'] +
+ '
隐患描述:' +
+ item['隐患描述'] +
+ '
创建时间:' +
+ item['创建时间'] +
+ '
隐患等级:' +
+ this.threatLevel[item['隐患等级']]
+ return html
+ })
+ }
+ console.log(this.layer)
+ map.addLayer(this.layer)
+ // 创建DIV数据图层
for (var i = 0, len = data.length; i < len; i++) {
const item = data[i]
var jd = item['经度']
var wd = item['纬度']
+ const level = parseInt(item['隐患等级']) - 1
+ const clr = this.colorful ? this.colorList[level] : color
var graphic = new mars3d.graphic.DivGraphic({
position: Cesium.Cartesian3.fromDegrees(jd, wd, 0),
style: {
- html: '
',
+ html: '
',
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 2000000) // 按视距距离显示
},
attr: item
})
- layer.addGraphic(graphic)
+ this.layer.addGraphic(graphic)
}
},
// 移除图层
removeLayer() {
const { map, layer } = this
- if (this.layer) {
- map.removeLayer(layer)
+ if (layer) {
+ map.removeLayer(this.layer, true)
this.layer = null
}
}
diff --git a/src/components/Map/components/vipLayer.vue b/src/components/Map/components/vipLayer.vue
new file mode 100644
index 0000000..154d153
--- /dev/null
+++ b/src/components/Map/components/vipLayer.vue
@@ -0,0 +1,150 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/weatherLayer.vue b/src/components/Map/components/weatherLayer.vue
index 98afe91..b9f2096 100644
--- a/src/components/Map/components/weatherLayer.vue
+++ b/src/components/Map/components/weatherLayer.vue
@@ -66,7 +66,8 @@
},
methods: {
load() {
- console.log('load')
+ console.log('load Weather Layer')
+ if(this.show) this.initLayer()
},
initLayer() {
const { mars3d, map } = this
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 4b4e27b..b69d5d4 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -220,3 +220,18 @@
}
}
}
+.mars3d-popup-background{
+ background-color: transparent !important;
+ background-image: url("../assets/global_images/popwin.png") !important;
+ background-repeat: no-repeat !important;
+ background-size: 100% 100% !important;
+}
+.mars3d-popup-tip-container{
+ display:none !important;
+}
+.mars3d-popup-content-wrapper{
+ box-shadow: none !important;
+ -webkit-box-shadow: none !important;
+ padding-top:10px !important;
+ padding-bottom: 10px !important;
+}
diff --git a/src/views/maps/constructionThreat.vue b/src/views/maps/constructionThreat.vue
index 246852f..eeea533 100644
--- a/src/views/maps/constructionThreat.vue
+++ b/src/views/maps/constructionThreat.vue
@@ -5,41 +5,37 @@
-->
-
-
-
-
-
-
-
-
-
-
-
-
-
+
-
-
+
+
+
+
diff --git a/src/components/Map/components/earthquakeLayer.vue b/src/components/Map/components/earthquakeLayer.vue
index e7efdc1..a4a0703 100644
--- a/src/components/Map/components/earthquakeLayer.vue
+++ b/src/components/Map/components/earthquakeLayer.vue
@@ -71,6 +71,7 @@
loadData() {
const { mars3d, Cesium, layer, height, size } = this
const date = getToday()
+ // const date = '2021-04-19'
getEarthquakeList(date).then((res) => {
if (res.data.length === 0) {
this.$message.info('今日无地震')
diff --git a/src/components/Map/components/hcaHeatLayer.vue b/src/components/Map/components/hcaHeatLayer.vue
index e4d3a21..9233d92 100644
--- a/src/components/Map/components/hcaHeatLayer.vue
+++ b/src/components/Map/components/hcaHeatLayer.vue
@@ -40,9 +40,10 @@
methods: {
load() {
console.log('load')
+ if (this.show) this.initLayer()
},
initLayer() {
- const { mars3d, map } = this
+ const { map } = this
if (map) {
if (this.show) {
if (this.layer) {
diff --git a/src/components/Map/components/hcaPointLayer.vue b/src/components/Map/components/hcaPointLayer.vue
new file mode 100644
index 0000000..b518699
--- /dev/null
+++ b/src/components/Map/components/hcaPointLayer.vue
@@ -0,0 +1,142 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/liquidFactoryLayer.vue b/src/components/Map/components/liquidFactoryLayer.vue
index 6845b93..3a1c0eb 100644
--- a/src/components/Map/components/liquidFactoryLayer.vue
+++ b/src/components/Map/components/liquidFactoryLayer.vue
@@ -72,15 +72,15 @@
}
},
loadData() {
- const { mars3d, layer } = this
+ const { mars3d, layer, height } = this
axios.get('static/config/liquidFactory.json').then((res) => {
res = res.data
if (res.code === 200) {
this.data = res.data[0].data
- for (const station of this.data) {
+ for (const item of this.data) {
const graphic = new mars3d.graphic.ModelEntity({
- name: station.name,
- position: [station.x, station.y, 0],
+ name: item.name,
+ position: [parseFloat(item.value[0]), parseFloat(item.value[1]), height],
url: 'static/gltf/output/yehuagongchang.gltf',
style: {
scale: 3,
@@ -88,7 +88,7 @@
minimumPixelSize: 30,
clampToGround: true
},
- tooltip: station.name
+ tooltip: item.name
})
layer.addGraphic(graphic)
}
diff --git a/src/components/Map/components/manageStationLayer.vue b/src/components/Map/components/manageStationLayer.vue
index c0aff38..7b976d6 100644
--- a/src/components/Map/components/manageStationLayer.vue
+++ b/src/components/Map/components/manageStationLayer.vue
@@ -56,6 +56,7 @@
methods: {
load() {
console.log('load')
+ if (this.show) this.initLayer()
},
initLayer() {
const { mars3d, map } = this
diff --git a/src/components/Map/components/needLayerCone.vue b/src/components/Map/components/needLayerCone.vue
new file mode 100644
index 0000000..373bf3c
--- /dev/null
+++ b/src/components/Map/components/needLayerCone.vue
@@ -0,0 +1,169 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/pipeLayer.vue b/src/components/Map/components/pipeLayer.vue
index 64142a7..0129de7 100644
--- a/src/components/Map/components/pipeLayer.vue
+++ b/src/components/Map/components/pipeLayer.vue
@@ -21,11 +21,11 @@
}, // 发光强度
opacity: {
type: Number,
- default: 0.9
+ default: 1
}, // 透明度
width: {
type: Number,
- default: 10
+ default: 5
}, // 线宽度
height: {
type: Number,
@@ -33,7 +33,7 @@
}, // 高度
color: {
type: String,
- default: '#92ffdf'
+ default: '#5affb2'
}, // 偏移值
show: {
type: Boolean,
@@ -69,10 +69,11 @@
}
this.layer = new mars3d.layer.GeoJsonLayer({
type: 'geojson',
- url: 'static/geojson/pipe.json',
+ url: 'static/geojson/pipe_old.json',
symbol: {
styleOptions: {
- materialType: 'PolylineGlow',
+ lineType: 'glow',
+ // materialType: 'LineFlicker',
glowPower: glowPower, // 发光强度
width: width, // 线宽
color: color,
@@ -83,7 +84,7 @@
show: true
})
map.addLayer(this.layer)
- this.loadData()
+ // this.loadData()
}
},
// 移除图层
diff --git a/src/components/Map/components/pipeLayer2.vue b/src/components/Map/components/pipeLayer2.vue
new file mode 100644
index 0000000..4f56b36
--- /dev/null
+++ b/src/components/Map/components/pipeLayer2.vue
@@ -0,0 +1,147 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/routeLayer.vue b/src/components/Map/components/routeLayer.vue
index 203bd89..15bb2a5 100644
--- a/src/components/Map/components/routeLayer.vue
+++ b/src/components/Map/components/routeLayer.vue
@@ -50,6 +50,9 @@
methods: {
load() {
console.log('load')
+ if(this.show){
+ this.initLayer()
+ }
},
initLayer() {
const { mars3d, map } = this
@@ -60,6 +63,19 @@
}
}
const graphicLayer = new mars3d.layer.DivLayer()
+ graphicLayer.on(mars3d.EventType.click, event => {
+ console.log('单击了巡检人员', event)
+ })
+ graphicLayer.bindPopup(event => {
+ const route = event.graphic.attr
+ const html =
+ '
姓名:' + route.name +
+ '
电话:' + route['phone'] +
+ '
岗位:' + route['duty'] +
+ '
站名:' + route['unitname'] +
+ '
时间:' + route.locationdate + '
'
+ return html
+ })
this.layer = graphicLayer
map.addLayer(graphicLayer)
this.loadData()
@@ -77,11 +93,11 @@
lat: parseFloat(item['WD60_06']),
locationdate: item['WD60_04'],
time: new Date(item['WD60_04']),
- duty: item['WD60_11'],
- sex: item['WD60_09'],
- phone: item['WD60_10'],
- idcard: item['WD60_12'],
- unitname: item['WD60_08']
+ duty: item['WD60_11'] === null ? '' : item['WD60_11'],
+ sex: item['WD60_09'] === null ? '' : item['WD60_09'],
+ phone: item['WD60_10'] === null ? '' : item['WD60_10'],
+ idcard: item['WD60_12'] === null ? '' : item['WD60_12'],
+ unitname: item['WD60_08'] === null ? '' : item['WD60_08']
}
})
this.filteredData = []
diff --git a/src/components/Map/components/supplyLayer.vue b/src/components/Map/components/supplyLayer.vue
index 583e546..7fdbe56 100644
--- a/src/components/Map/components/supplyLayer.vue
+++ b/src/components/Map/components/supplyLayer.vue
@@ -1,10 +1,10 @@
-
+
@@ -134,7 +134,8 @@
const graphics = layer.graphics
for (const graphic of graphics) {
if (graphic.name === city) {
- graphic.openTooltip()
+ // graphic.openTooltip()
+ graphic.openPopup()
}
}
},
@@ -161,7 +162,8 @@
})
}
})
- graphic1.bindTooltip(html)
+ // graphic1.bindTooltip(html)
+ graphic1.bindPopup(html)
layer.addGraphic(graphic1)
},
// 移除图层
@@ -177,5 +179,4 @@
diff --git a/src/components/Map/components/supplyLayerCone.vue b/src/components/Map/components/supplyLayerCone.vue
new file mode 100644
index 0000000..de46f58
--- /dev/null
+++ b/src/components/Map/components/supplyLayerCone.vue
@@ -0,0 +1,169 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/threatLayer.vue b/src/components/Map/components/threatLayer.vue
index e354278..4b2295b 100644
--- a/src/components/Map/components/threatLayer.vue
+++ b/src/components/Map/components/threatLayer.vue
@@ -19,6 +19,10 @@
components: { ThreatDialog },
mixins: [commonMixin('layer')],
props: {
+ colorful: {
+ type: Boolean,
+ default: false
+ },
show: {
type: Boolean,
default: false
@@ -30,7 +34,28 @@
color: {
type: String,
default: '#FBFE2D'
- }
+ },
+ colorList: {
+ type: Array,
+ default: () => {
+ return ['#f33349', '#f79a2c', '#f2fa19', '#95e40c', '#1ffee6']
+ }
+ },
+ threatLevel: {
+ type: Object,
+ default: () => {
+ return {
+ '1': 'A级',
+ '2': 'B级',
+ '3': 'C级',
+ '4': '问题'
+ }
+ }
+ }, // 隐患等级
+ popupType: {
+ type: String,
+ default: 'dialog'
+ } // 详情弹出方式:dialog/ popupWindow
},
data() {
return {
@@ -40,7 +65,6 @@
},
watch: {
show(val) {
- console.log('watch show: ' + val)
if (val) {
this.initLayer()
} else {
@@ -51,27 +75,21 @@
methods: {
load() {
console.log('load')
+ if (this.show) {
+ this.initLayer()
+ }
},
initLayer() {
- const { mars3d, map } = this
+ const { map } = this
if (map) {
- if (this.show) {
- if (this.layer) {
- this.removeLayer()
- }
+ if (this.show && this.layer) {
+ this.removeLayer()
}
- const graphicLayer = new mars3d.layer.GraphicLayer()
- this.layer = graphicLayer
- map.addLayer(graphicLayer)
this.loadData()
}
},
loadData() {
- const { mars3d, type, layer } = this
- layer.on(mars3d.EventType.click, event => {
- console.log('监听layer,单击了矢量对象', event)
- this.$refs.threatDialog.initDialog(event.graphic.attr)
- })
+ const { type } = this
if (type === 'construction') {
axios.get('static/config/threat.json').then((res) => {
res = res.data
@@ -103,28 +121,60 @@
},
// 添加隐患点: type类型,arr数组, clr颜色
addFeatures() {
- const { mars3d, Cesium, layer, color, data } = this
- // 创建DIV数据图层\
+ const { mars3d, map, Cesium, color, data, type } = this
+ const graphicLayer = new mars3d.layer.GraphicLayer({ name: type })
+ console.log('add Layer ' + type)
+ this.layer = graphicLayer
+ this.layer.on(mars3d.EventType.click, event => {
+ console.log('点击隐患', event)
+ if (this.popupType === 'dialog') {
+ this.$refs.threatDialog.initDialog(event.graphic.attr)
+ }
+ })
+ if (this.popupType === 'popupWindow') {
+ this.layer.bindPopup(event => {
+ const item = event.graphic.attr
+ var html =
+ '位置描述:' +
+ item['位置描述'] +
+ '
村庄地址:' +
+ item['村庄地址'] +
+ '
发现人:' +
+ item['发现人'] +
+ '
隐患描述:' +
+ item['隐患描述'] +
+ '
创建时间:' +
+ item['创建时间'] +
+ '
隐患等级:' +
+ this.threatLevel[item['隐患等级']]
+ return html
+ })
+ }
+ console.log(this.layer)
+ map.addLayer(this.layer)
+ // 创建DIV数据图层
for (var i = 0, len = data.length; i < len; i++) {
const item = data[i]
var jd = item['经度']
var wd = item['纬度']
+ const level = parseInt(item['隐患等级']) - 1
+ const clr = this.colorful ? this.colorList[level] : color
var graphic = new mars3d.graphic.DivGraphic({
position: Cesium.Cartesian3.fromDegrees(jd, wd, 0),
style: {
- html: '
',
+ html: '
',
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 2000000) // 按视距距离显示
},
attr: item
})
- layer.addGraphic(graphic)
+ this.layer.addGraphic(graphic)
}
},
// 移除图层
removeLayer() {
const { map, layer } = this
- if (this.layer) {
- map.removeLayer(layer)
+ if (layer) {
+ map.removeLayer(this.layer, true)
this.layer = null
}
}
diff --git a/src/components/Map/components/vipLayer.vue b/src/components/Map/components/vipLayer.vue
new file mode 100644
index 0000000..154d153
--- /dev/null
+++ b/src/components/Map/components/vipLayer.vue
@@ -0,0 +1,150 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/weatherLayer.vue b/src/components/Map/components/weatherLayer.vue
index 98afe91..b9f2096 100644
--- a/src/components/Map/components/weatherLayer.vue
+++ b/src/components/Map/components/weatherLayer.vue
@@ -66,7 +66,8 @@
},
methods: {
load() {
- console.log('load')
+ console.log('load Weather Layer')
+ if(this.show) this.initLayer()
},
initLayer() {
const { mars3d, map } = this
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 4b4e27b..b69d5d4 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -220,3 +220,18 @@
}
}
}
+.mars3d-popup-background{
+ background-color: transparent !important;
+ background-image: url("../assets/global_images/popwin.png") !important;
+ background-repeat: no-repeat !important;
+ background-size: 100% 100% !important;
+}
+.mars3d-popup-tip-container{
+ display:none !important;
+}
+.mars3d-popup-content-wrapper{
+ box-shadow: none !important;
+ -webkit-box-shadow: none !important;
+ padding-top:10px !important;
+ padding-bottom: 10px !important;
+}
diff --git a/src/views/maps/constructionThreat.vue b/src/views/maps/constructionThreat.vue
index 246852f..eeea533 100644
--- a/src/views/maps/constructionThreat.vue
+++ b/src/views/maps/constructionThreat.vue
@@ -5,41 +5,37 @@
-->
-
-
-
-
-
-
-
-
-
-
-
-
-
+
-
-
+
+
+
+
diff --git a/src/components/Map/components/earthquakeLayer.vue b/src/components/Map/components/earthquakeLayer.vue
index e7efdc1..a4a0703 100644
--- a/src/components/Map/components/earthquakeLayer.vue
+++ b/src/components/Map/components/earthquakeLayer.vue
@@ -71,6 +71,7 @@
loadData() {
const { mars3d, Cesium, layer, height, size } = this
const date = getToday()
+ // const date = '2021-04-19'
getEarthquakeList(date).then((res) => {
if (res.data.length === 0) {
this.$message.info('今日无地震')
diff --git a/src/components/Map/components/hcaHeatLayer.vue b/src/components/Map/components/hcaHeatLayer.vue
index e4d3a21..9233d92 100644
--- a/src/components/Map/components/hcaHeatLayer.vue
+++ b/src/components/Map/components/hcaHeatLayer.vue
@@ -40,9 +40,10 @@
methods: {
load() {
console.log('load')
+ if (this.show) this.initLayer()
},
initLayer() {
- const { mars3d, map } = this
+ const { map } = this
if (map) {
if (this.show) {
if (this.layer) {
diff --git a/src/components/Map/components/hcaPointLayer.vue b/src/components/Map/components/hcaPointLayer.vue
new file mode 100644
index 0000000..b518699
--- /dev/null
+++ b/src/components/Map/components/hcaPointLayer.vue
@@ -0,0 +1,142 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/liquidFactoryLayer.vue b/src/components/Map/components/liquidFactoryLayer.vue
index 6845b93..3a1c0eb 100644
--- a/src/components/Map/components/liquidFactoryLayer.vue
+++ b/src/components/Map/components/liquidFactoryLayer.vue
@@ -72,15 +72,15 @@
}
},
loadData() {
- const { mars3d, layer } = this
+ const { mars3d, layer, height } = this
axios.get('static/config/liquidFactory.json').then((res) => {
res = res.data
if (res.code === 200) {
this.data = res.data[0].data
- for (const station of this.data) {
+ for (const item of this.data) {
const graphic = new mars3d.graphic.ModelEntity({
- name: station.name,
- position: [station.x, station.y, 0],
+ name: item.name,
+ position: [parseFloat(item.value[0]), parseFloat(item.value[1]), height],
url: 'static/gltf/output/yehuagongchang.gltf',
style: {
scale: 3,
@@ -88,7 +88,7 @@
minimumPixelSize: 30,
clampToGround: true
},
- tooltip: station.name
+ tooltip: item.name
})
layer.addGraphic(graphic)
}
diff --git a/src/components/Map/components/manageStationLayer.vue b/src/components/Map/components/manageStationLayer.vue
index c0aff38..7b976d6 100644
--- a/src/components/Map/components/manageStationLayer.vue
+++ b/src/components/Map/components/manageStationLayer.vue
@@ -56,6 +56,7 @@
methods: {
load() {
console.log('load')
+ if (this.show) this.initLayer()
},
initLayer() {
const { mars3d, map } = this
diff --git a/src/components/Map/components/needLayerCone.vue b/src/components/Map/components/needLayerCone.vue
new file mode 100644
index 0000000..373bf3c
--- /dev/null
+++ b/src/components/Map/components/needLayerCone.vue
@@ -0,0 +1,169 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/pipeLayer.vue b/src/components/Map/components/pipeLayer.vue
index 64142a7..0129de7 100644
--- a/src/components/Map/components/pipeLayer.vue
+++ b/src/components/Map/components/pipeLayer.vue
@@ -21,11 +21,11 @@
}, // 发光强度
opacity: {
type: Number,
- default: 0.9
+ default: 1
}, // 透明度
width: {
type: Number,
- default: 10
+ default: 5
}, // 线宽度
height: {
type: Number,
@@ -33,7 +33,7 @@
}, // 高度
color: {
type: String,
- default: '#92ffdf'
+ default: '#5affb2'
}, // 偏移值
show: {
type: Boolean,
@@ -69,10 +69,11 @@
}
this.layer = new mars3d.layer.GeoJsonLayer({
type: 'geojson',
- url: 'static/geojson/pipe.json',
+ url: 'static/geojson/pipe_old.json',
symbol: {
styleOptions: {
- materialType: 'PolylineGlow',
+ lineType: 'glow',
+ // materialType: 'LineFlicker',
glowPower: glowPower, // 发光强度
width: width, // 线宽
color: color,
@@ -83,7 +84,7 @@
show: true
})
map.addLayer(this.layer)
- this.loadData()
+ // this.loadData()
}
},
// 移除图层
diff --git a/src/components/Map/components/pipeLayer2.vue b/src/components/Map/components/pipeLayer2.vue
new file mode 100644
index 0000000..4f56b36
--- /dev/null
+++ b/src/components/Map/components/pipeLayer2.vue
@@ -0,0 +1,147 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/routeLayer.vue b/src/components/Map/components/routeLayer.vue
index 203bd89..15bb2a5 100644
--- a/src/components/Map/components/routeLayer.vue
+++ b/src/components/Map/components/routeLayer.vue
@@ -50,6 +50,9 @@
methods: {
load() {
console.log('load')
+ if(this.show){
+ this.initLayer()
+ }
},
initLayer() {
const { mars3d, map } = this
@@ -60,6 +63,19 @@
}
}
const graphicLayer = new mars3d.layer.DivLayer()
+ graphicLayer.on(mars3d.EventType.click, event => {
+ console.log('单击了巡检人员', event)
+ })
+ graphicLayer.bindPopup(event => {
+ const route = event.graphic.attr
+ const html =
+ '
姓名:' + route.name +
+ '
电话:' + route['phone'] +
+ '
岗位:' + route['duty'] +
+ '
站名:' + route['unitname'] +
+ '
时间:' + route.locationdate + '
'
+ return html
+ })
this.layer = graphicLayer
map.addLayer(graphicLayer)
this.loadData()
@@ -77,11 +93,11 @@
lat: parseFloat(item['WD60_06']),
locationdate: item['WD60_04'],
time: new Date(item['WD60_04']),
- duty: item['WD60_11'],
- sex: item['WD60_09'],
- phone: item['WD60_10'],
- idcard: item['WD60_12'],
- unitname: item['WD60_08']
+ duty: item['WD60_11'] === null ? '' : item['WD60_11'],
+ sex: item['WD60_09'] === null ? '' : item['WD60_09'],
+ phone: item['WD60_10'] === null ? '' : item['WD60_10'],
+ idcard: item['WD60_12'] === null ? '' : item['WD60_12'],
+ unitname: item['WD60_08'] === null ? '' : item['WD60_08']
}
})
this.filteredData = []
diff --git a/src/components/Map/components/supplyLayer.vue b/src/components/Map/components/supplyLayer.vue
index 583e546..7fdbe56 100644
--- a/src/components/Map/components/supplyLayer.vue
+++ b/src/components/Map/components/supplyLayer.vue
@@ -1,10 +1,10 @@
-
+
@@ -134,7 +134,8 @@
const graphics = layer.graphics
for (const graphic of graphics) {
if (graphic.name === city) {
- graphic.openTooltip()
+ // graphic.openTooltip()
+ graphic.openPopup()
}
}
},
@@ -161,7 +162,8 @@
})
}
})
- graphic1.bindTooltip(html)
+ // graphic1.bindTooltip(html)
+ graphic1.bindPopup(html)
layer.addGraphic(graphic1)
},
// 移除图层
@@ -177,5 +179,4 @@
diff --git a/src/components/Map/components/supplyLayerCone.vue b/src/components/Map/components/supplyLayerCone.vue
new file mode 100644
index 0000000..de46f58
--- /dev/null
+++ b/src/components/Map/components/supplyLayerCone.vue
@@ -0,0 +1,169 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/threatLayer.vue b/src/components/Map/components/threatLayer.vue
index e354278..4b2295b 100644
--- a/src/components/Map/components/threatLayer.vue
+++ b/src/components/Map/components/threatLayer.vue
@@ -19,6 +19,10 @@
components: { ThreatDialog },
mixins: [commonMixin('layer')],
props: {
+ colorful: {
+ type: Boolean,
+ default: false
+ },
show: {
type: Boolean,
default: false
@@ -30,7 +34,28 @@
color: {
type: String,
default: '#FBFE2D'
- }
+ },
+ colorList: {
+ type: Array,
+ default: () => {
+ return ['#f33349', '#f79a2c', '#f2fa19', '#95e40c', '#1ffee6']
+ }
+ },
+ threatLevel: {
+ type: Object,
+ default: () => {
+ return {
+ '1': 'A级',
+ '2': 'B级',
+ '3': 'C级',
+ '4': '问题'
+ }
+ }
+ }, // 隐患等级
+ popupType: {
+ type: String,
+ default: 'dialog'
+ } // 详情弹出方式:dialog/ popupWindow
},
data() {
return {
@@ -40,7 +65,6 @@
},
watch: {
show(val) {
- console.log('watch show: ' + val)
if (val) {
this.initLayer()
} else {
@@ -51,27 +75,21 @@
methods: {
load() {
console.log('load')
+ if (this.show) {
+ this.initLayer()
+ }
},
initLayer() {
- const { mars3d, map } = this
+ const { map } = this
if (map) {
- if (this.show) {
- if (this.layer) {
- this.removeLayer()
- }
+ if (this.show && this.layer) {
+ this.removeLayer()
}
- const graphicLayer = new mars3d.layer.GraphicLayer()
- this.layer = graphicLayer
- map.addLayer(graphicLayer)
this.loadData()
}
},
loadData() {
- const { mars3d, type, layer } = this
- layer.on(mars3d.EventType.click, event => {
- console.log('监听layer,单击了矢量对象', event)
- this.$refs.threatDialog.initDialog(event.graphic.attr)
- })
+ const { type } = this
if (type === 'construction') {
axios.get('static/config/threat.json').then((res) => {
res = res.data
@@ -103,28 +121,60 @@
},
// 添加隐患点: type类型,arr数组, clr颜色
addFeatures() {
- const { mars3d, Cesium, layer, color, data } = this
- // 创建DIV数据图层\
+ const { mars3d, map, Cesium, color, data, type } = this
+ const graphicLayer = new mars3d.layer.GraphicLayer({ name: type })
+ console.log('add Layer ' + type)
+ this.layer = graphicLayer
+ this.layer.on(mars3d.EventType.click, event => {
+ console.log('点击隐患', event)
+ if (this.popupType === 'dialog') {
+ this.$refs.threatDialog.initDialog(event.graphic.attr)
+ }
+ })
+ if (this.popupType === 'popupWindow') {
+ this.layer.bindPopup(event => {
+ const item = event.graphic.attr
+ var html =
+ '位置描述:' +
+ item['位置描述'] +
+ '
村庄地址:' +
+ item['村庄地址'] +
+ '
发现人:' +
+ item['发现人'] +
+ '
隐患描述:' +
+ item['隐患描述'] +
+ '
创建时间:' +
+ item['创建时间'] +
+ '
隐患等级:' +
+ this.threatLevel[item['隐患等级']]
+ return html
+ })
+ }
+ console.log(this.layer)
+ map.addLayer(this.layer)
+ // 创建DIV数据图层
for (var i = 0, len = data.length; i < len; i++) {
const item = data[i]
var jd = item['经度']
var wd = item['纬度']
+ const level = parseInt(item['隐患等级']) - 1
+ const clr = this.colorful ? this.colorList[level] : color
var graphic = new mars3d.graphic.DivGraphic({
position: Cesium.Cartesian3.fromDegrees(jd, wd, 0),
style: {
- html: '
',
+ html: '
',
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 2000000) // 按视距距离显示
},
attr: item
})
- layer.addGraphic(graphic)
+ this.layer.addGraphic(graphic)
}
},
// 移除图层
removeLayer() {
const { map, layer } = this
- if (this.layer) {
- map.removeLayer(layer)
+ if (layer) {
+ map.removeLayer(this.layer, true)
this.layer = null
}
}
diff --git a/src/components/Map/components/vipLayer.vue b/src/components/Map/components/vipLayer.vue
new file mode 100644
index 0000000..154d153
--- /dev/null
+++ b/src/components/Map/components/vipLayer.vue
@@ -0,0 +1,150 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/weatherLayer.vue b/src/components/Map/components/weatherLayer.vue
index 98afe91..b9f2096 100644
--- a/src/components/Map/components/weatherLayer.vue
+++ b/src/components/Map/components/weatherLayer.vue
@@ -66,7 +66,8 @@
},
methods: {
load() {
- console.log('load')
+ console.log('load Weather Layer')
+ if(this.show) this.initLayer()
},
initLayer() {
const { mars3d, map } = this
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 4b4e27b..b69d5d4 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -220,3 +220,18 @@
}
}
}
+.mars3d-popup-background{
+ background-color: transparent !important;
+ background-image: url("../assets/global_images/popwin.png") !important;
+ background-repeat: no-repeat !important;
+ background-size: 100% 100% !important;
+}
+.mars3d-popup-tip-container{
+ display:none !important;
+}
+.mars3d-popup-content-wrapper{
+ box-shadow: none !important;
+ -webkit-box-shadow: none !important;
+ padding-top:10px !important;
+ padding-bottom: 10px !important;
+}
diff --git a/src/views/maps/constructionThreat.vue b/src/views/maps/constructionThreat.vue
index 246852f..eeea533 100644
--- a/src/views/maps/constructionThreat.vue
+++ b/src/views/maps/constructionThreat.vue
@@ -5,41 +5,37 @@
-->
-
-
-
-
-
-
-
-
-
-
-
-
-
+
-
-
+
+
+
+
diff --git a/src/components/Map/components/earthquakeLayer.vue b/src/components/Map/components/earthquakeLayer.vue
index e7efdc1..a4a0703 100644
--- a/src/components/Map/components/earthquakeLayer.vue
+++ b/src/components/Map/components/earthquakeLayer.vue
@@ -71,6 +71,7 @@
loadData() {
const { mars3d, Cesium, layer, height, size } = this
const date = getToday()
+ // const date = '2021-04-19'
getEarthquakeList(date).then((res) => {
if (res.data.length === 0) {
this.$message.info('今日无地震')
diff --git a/src/components/Map/components/hcaHeatLayer.vue b/src/components/Map/components/hcaHeatLayer.vue
index e4d3a21..9233d92 100644
--- a/src/components/Map/components/hcaHeatLayer.vue
+++ b/src/components/Map/components/hcaHeatLayer.vue
@@ -40,9 +40,10 @@
methods: {
load() {
console.log('load')
+ if (this.show) this.initLayer()
},
initLayer() {
- const { mars3d, map } = this
+ const { map } = this
if (map) {
if (this.show) {
if (this.layer) {
diff --git a/src/components/Map/components/hcaPointLayer.vue b/src/components/Map/components/hcaPointLayer.vue
new file mode 100644
index 0000000..b518699
--- /dev/null
+++ b/src/components/Map/components/hcaPointLayer.vue
@@ -0,0 +1,142 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/liquidFactoryLayer.vue b/src/components/Map/components/liquidFactoryLayer.vue
index 6845b93..3a1c0eb 100644
--- a/src/components/Map/components/liquidFactoryLayer.vue
+++ b/src/components/Map/components/liquidFactoryLayer.vue
@@ -72,15 +72,15 @@
}
},
loadData() {
- const { mars3d, layer } = this
+ const { mars3d, layer, height } = this
axios.get('static/config/liquidFactory.json').then((res) => {
res = res.data
if (res.code === 200) {
this.data = res.data[0].data
- for (const station of this.data) {
+ for (const item of this.data) {
const graphic = new mars3d.graphic.ModelEntity({
- name: station.name,
- position: [station.x, station.y, 0],
+ name: item.name,
+ position: [parseFloat(item.value[0]), parseFloat(item.value[1]), height],
url: 'static/gltf/output/yehuagongchang.gltf',
style: {
scale: 3,
@@ -88,7 +88,7 @@
minimumPixelSize: 30,
clampToGround: true
},
- tooltip: station.name
+ tooltip: item.name
})
layer.addGraphic(graphic)
}
diff --git a/src/components/Map/components/manageStationLayer.vue b/src/components/Map/components/manageStationLayer.vue
index c0aff38..7b976d6 100644
--- a/src/components/Map/components/manageStationLayer.vue
+++ b/src/components/Map/components/manageStationLayer.vue
@@ -56,6 +56,7 @@
methods: {
load() {
console.log('load')
+ if (this.show) this.initLayer()
},
initLayer() {
const { mars3d, map } = this
diff --git a/src/components/Map/components/needLayerCone.vue b/src/components/Map/components/needLayerCone.vue
new file mode 100644
index 0000000..373bf3c
--- /dev/null
+++ b/src/components/Map/components/needLayerCone.vue
@@ -0,0 +1,169 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/pipeLayer.vue b/src/components/Map/components/pipeLayer.vue
index 64142a7..0129de7 100644
--- a/src/components/Map/components/pipeLayer.vue
+++ b/src/components/Map/components/pipeLayer.vue
@@ -21,11 +21,11 @@
}, // 发光强度
opacity: {
type: Number,
- default: 0.9
+ default: 1
}, // 透明度
width: {
type: Number,
- default: 10
+ default: 5
}, // 线宽度
height: {
type: Number,
@@ -33,7 +33,7 @@
}, // 高度
color: {
type: String,
- default: '#92ffdf'
+ default: '#5affb2'
}, // 偏移值
show: {
type: Boolean,
@@ -69,10 +69,11 @@
}
this.layer = new mars3d.layer.GeoJsonLayer({
type: 'geojson',
- url: 'static/geojson/pipe.json',
+ url: 'static/geojson/pipe_old.json',
symbol: {
styleOptions: {
- materialType: 'PolylineGlow',
+ lineType: 'glow',
+ // materialType: 'LineFlicker',
glowPower: glowPower, // 发光强度
width: width, // 线宽
color: color,
@@ -83,7 +84,7 @@
show: true
})
map.addLayer(this.layer)
- this.loadData()
+ // this.loadData()
}
},
// 移除图层
diff --git a/src/components/Map/components/pipeLayer2.vue b/src/components/Map/components/pipeLayer2.vue
new file mode 100644
index 0000000..4f56b36
--- /dev/null
+++ b/src/components/Map/components/pipeLayer2.vue
@@ -0,0 +1,147 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/routeLayer.vue b/src/components/Map/components/routeLayer.vue
index 203bd89..15bb2a5 100644
--- a/src/components/Map/components/routeLayer.vue
+++ b/src/components/Map/components/routeLayer.vue
@@ -50,6 +50,9 @@
methods: {
load() {
console.log('load')
+ if(this.show){
+ this.initLayer()
+ }
},
initLayer() {
const { mars3d, map } = this
@@ -60,6 +63,19 @@
}
}
const graphicLayer = new mars3d.layer.DivLayer()
+ graphicLayer.on(mars3d.EventType.click, event => {
+ console.log('单击了巡检人员', event)
+ })
+ graphicLayer.bindPopup(event => {
+ const route = event.graphic.attr
+ const html =
+ '
姓名:' + route.name +
+ '
电话:' + route['phone'] +
+ '
岗位:' + route['duty'] +
+ '
站名:' + route['unitname'] +
+ '
时间:' + route.locationdate + '
'
+ return html
+ })
this.layer = graphicLayer
map.addLayer(graphicLayer)
this.loadData()
@@ -77,11 +93,11 @@
lat: parseFloat(item['WD60_06']),
locationdate: item['WD60_04'],
time: new Date(item['WD60_04']),
- duty: item['WD60_11'],
- sex: item['WD60_09'],
- phone: item['WD60_10'],
- idcard: item['WD60_12'],
- unitname: item['WD60_08']
+ duty: item['WD60_11'] === null ? '' : item['WD60_11'],
+ sex: item['WD60_09'] === null ? '' : item['WD60_09'],
+ phone: item['WD60_10'] === null ? '' : item['WD60_10'],
+ idcard: item['WD60_12'] === null ? '' : item['WD60_12'],
+ unitname: item['WD60_08'] === null ? '' : item['WD60_08']
}
})
this.filteredData = []
diff --git a/src/components/Map/components/supplyLayer.vue b/src/components/Map/components/supplyLayer.vue
index 583e546..7fdbe56 100644
--- a/src/components/Map/components/supplyLayer.vue
+++ b/src/components/Map/components/supplyLayer.vue
@@ -1,10 +1,10 @@
-
+
@@ -134,7 +134,8 @@
const graphics = layer.graphics
for (const graphic of graphics) {
if (graphic.name === city) {
- graphic.openTooltip()
+ // graphic.openTooltip()
+ graphic.openPopup()
}
}
},
@@ -161,7 +162,8 @@
})
}
})
- graphic1.bindTooltip(html)
+ // graphic1.bindTooltip(html)
+ graphic1.bindPopup(html)
layer.addGraphic(graphic1)
},
// 移除图层
@@ -177,5 +179,4 @@
diff --git a/src/components/Map/components/supplyLayerCone.vue b/src/components/Map/components/supplyLayerCone.vue
new file mode 100644
index 0000000..de46f58
--- /dev/null
+++ b/src/components/Map/components/supplyLayerCone.vue
@@ -0,0 +1,169 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/threatLayer.vue b/src/components/Map/components/threatLayer.vue
index e354278..4b2295b 100644
--- a/src/components/Map/components/threatLayer.vue
+++ b/src/components/Map/components/threatLayer.vue
@@ -19,6 +19,10 @@
components: { ThreatDialog },
mixins: [commonMixin('layer')],
props: {
+ colorful: {
+ type: Boolean,
+ default: false
+ },
show: {
type: Boolean,
default: false
@@ -30,7 +34,28 @@
color: {
type: String,
default: '#FBFE2D'
- }
+ },
+ colorList: {
+ type: Array,
+ default: () => {
+ return ['#f33349', '#f79a2c', '#f2fa19', '#95e40c', '#1ffee6']
+ }
+ },
+ threatLevel: {
+ type: Object,
+ default: () => {
+ return {
+ '1': 'A级',
+ '2': 'B级',
+ '3': 'C级',
+ '4': '问题'
+ }
+ }
+ }, // 隐患等级
+ popupType: {
+ type: String,
+ default: 'dialog'
+ } // 详情弹出方式:dialog/ popupWindow
},
data() {
return {
@@ -40,7 +65,6 @@
},
watch: {
show(val) {
- console.log('watch show: ' + val)
if (val) {
this.initLayer()
} else {
@@ -51,27 +75,21 @@
methods: {
load() {
console.log('load')
+ if (this.show) {
+ this.initLayer()
+ }
},
initLayer() {
- const { mars3d, map } = this
+ const { map } = this
if (map) {
- if (this.show) {
- if (this.layer) {
- this.removeLayer()
- }
+ if (this.show && this.layer) {
+ this.removeLayer()
}
- const graphicLayer = new mars3d.layer.GraphicLayer()
- this.layer = graphicLayer
- map.addLayer(graphicLayer)
this.loadData()
}
},
loadData() {
- const { mars3d, type, layer } = this
- layer.on(mars3d.EventType.click, event => {
- console.log('监听layer,单击了矢量对象', event)
- this.$refs.threatDialog.initDialog(event.graphic.attr)
- })
+ const { type } = this
if (type === 'construction') {
axios.get('static/config/threat.json').then((res) => {
res = res.data
@@ -103,28 +121,60 @@
},
// 添加隐患点: type类型,arr数组, clr颜色
addFeatures() {
- const { mars3d, Cesium, layer, color, data } = this
- // 创建DIV数据图层\
+ const { mars3d, map, Cesium, color, data, type } = this
+ const graphicLayer = new mars3d.layer.GraphicLayer({ name: type })
+ console.log('add Layer ' + type)
+ this.layer = graphicLayer
+ this.layer.on(mars3d.EventType.click, event => {
+ console.log('点击隐患', event)
+ if (this.popupType === 'dialog') {
+ this.$refs.threatDialog.initDialog(event.graphic.attr)
+ }
+ })
+ if (this.popupType === 'popupWindow') {
+ this.layer.bindPopup(event => {
+ const item = event.graphic.attr
+ var html =
+ '位置描述:' +
+ item['位置描述'] +
+ '
村庄地址:' +
+ item['村庄地址'] +
+ '
发现人:' +
+ item['发现人'] +
+ '
隐患描述:' +
+ item['隐患描述'] +
+ '
创建时间:' +
+ item['创建时间'] +
+ '
隐患等级:' +
+ this.threatLevel[item['隐患等级']]
+ return html
+ })
+ }
+ console.log(this.layer)
+ map.addLayer(this.layer)
+ // 创建DIV数据图层
for (var i = 0, len = data.length; i < len; i++) {
const item = data[i]
var jd = item['经度']
var wd = item['纬度']
+ const level = parseInt(item['隐患等级']) - 1
+ const clr = this.colorful ? this.colorList[level] : color
var graphic = new mars3d.graphic.DivGraphic({
position: Cesium.Cartesian3.fromDegrees(jd, wd, 0),
style: {
- html: '
',
+ html: '
',
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 2000000) // 按视距距离显示
},
attr: item
})
- layer.addGraphic(graphic)
+ this.layer.addGraphic(graphic)
}
},
// 移除图层
removeLayer() {
const { map, layer } = this
- if (this.layer) {
- map.removeLayer(layer)
+ if (layer) {
+ map.removeLayer(this.layer, true)
this.layer = null
}
}
diff --git a/src/components/Map/components/vipLayer.vue b/src/components/Map/components/vipLayer.vue
new file mode 100644
index 0000000..154d153
--- /dev/null
+++ b/src/components/Map/components/vipLayer.vue
@@ -0,0 +1,150 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/weatherLayer.vue b/src/components/Map/components/weatherLayer.vue
index 98afe91..b9f2096 100644
--- a/src/components/Map/components/weatherLayer.vue
+++ b/src/components/Map/components/weatherLayer.vue
@@ -66,7 +66,8 @@
},
methods: {
load() {
- console.log('load')
+ console.log('load Weather Layer')
+ if(this.show) this.initLayer()
},
initLayer() {
const { mars3d, map } = this
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 4b4e27b..b69d5d4 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -220,3 +220,18 @@
}
}
}
+.mars3d-popup-background{
+ background-color: transparent !important;
+ background-image: url("../assets/global_images/popwin.png") !important;
+ background-repeat: no-repeat !important;
+ background-size: 100% 100% !important;
+}
+.mars3d-popup-tip-container{
+ display:none !important;
+}
+.mars3d-popup-content-wrapper{
+ box-shadow: none !important;
+ -webkit-box-shadow: none !important;
+ padding-top:10px !important;
+ padding-bottom: 10px !important;
+}
diff --git a/src/views/maps/constructionThreat.vue b/src/views/maps/constructionThreat.vue
index 246852f..eeea533 100644
--- a/src/views/maps/constructionThreat.vue
+++ b/src/views/maps/constructionThreat.vue
@@ -5,41 +5,37 @@
-->
-
-
-
-
-
-
-
-
-
-
-
-
-
+
-
-
+
+
+
+
diff --git a/src/components/Map/components/earthquakeLayer.vue b/src/components/Map/components/earthquakeLayer.vue
index e7efdc1..a4a0703 100644
--- a/src/components/Map/components/earthquakeLayer.vue
+++ b/src/components/Map/components/earthquakeLayer.vue
@@ -71,6 +71,7 @@
loadData() {
const { mars3d, Cesium, layer, height, size } = this
const date = getToday()
+ // const date = '2021-04-19'
getEarthquakeList(date).then((res) => {
if (res.data.length === 0) {
this.$message.info('今日无地震')
diff --git a/src/components/Map/components/hcaHeatLayer.vue b/src/components/Map/components/hcaHeatLayer.vue
index e4d3a21..9233d92 100644
--- a/src/components/Map/components/hcaHeatLayer.vue
+++ b/src/components/Map/components/hcaHeatLayer.vue
@@ -40,9 +40,10 @@
methods: {
load() {
console.log('load')
+ if (this.show) this.initLayer()
},
initLayer() {
- const { mars3d, map } = this
+ const { map } = this
if (map) {
if (this.show) {
if (this.layer) {
diff --git a/src/components/Map/components/hcaPointLayer.vue b/src/components/Map/components/hcaPointLayer.vue
new file mode 100644
index 0000000..b518699
--- /dev/null
+++ b/src/components/Map/components/hcaPointLayer.vue
@@ -0,0 +1,142 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/liquidFactoryLayer.vue b/src/components/Map/components/liquidFactoryLayer.vue
index 6845b93..3a1c0eb 100644
--- a/src/components/Map/components/liquidFactoryLayer.vue
+++ b/src/components/Map/components/liquidFactoryLayer.vue
@@ -72,15 +72,15 @@
}
},
loadData() {
- const { mars3d, layer } = this
+ const { mars3d, layer, height } = this
axios.get('static/config/liquidFactory.json').then((res) => {
res = res.data
if (res.code === 200) {
this.data = res.data[0].data
- for (const station of this.data) {
+ for (const item of this.data) {
const graphic = new mars3d.graphic.ModelEntity({
- name: station.name,
- position: [station.x, station.y, 0],
+ name: item.name,
+ position: [parseFloat(item.value[0]), parseFloat(item.value[1]), height],
url: 'static/gltf/output/yehuagongchang.gltf',
style: {
scale: 3,
@@ -88,7 +88,7 @@
minimumPixelSize: 30,
clampToGround: true
},
- tooltip: station.name
+ tooltip: item.name
})
layer.addGraphic(graphic)
}
diff --git a/src/components/Map/components/manageStationLayer.vue b/src/components/Map/components/manageStationLayer.vue
index c0aff38..7b976d6 100644
--- a/src/components/Map/components/manageStationLayer.vue
+++ b/src/components/Map/components/manageStationLayer.vue
@@ -56,6 +56,7 @@
methods: {
load() {
console.log('load')
+ if (this.show) this.initLayer()
},
initLayer() {
const { mars3d, map } = this
diff --git a/src/components/Map/components/needLayerCone.vue b/src/components/Map/components/needLayerCone.vue
new file mode 100644
index 0000000..373bf3c
--- /dev/null
+++ b/src/components/Map/components/needLayerCone.vue
@@ -0,0 +1,169 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/pipeLayer.vue b/src/components/Map/components/pipeLayer.vue
index 64142a7..0129de7 100644
--- a/src/components/Map/components/pipeLayer.vue
+++ b/src/components/Map/components/pipeLayer.vue
@@ -21,11 +21,11 @@
}, // 发光强度
opacity: {
type: Number,
- default: 0.9
+ default: 1
}, // 透明度
width: {
type: Number,
- default: 10
+ default: 5
}, // 线宽度
height: {
type: Number,
@@ -33,7 +33,7 @@
}, // 高度
color: {
type: String,
- default: '#92ffdf'
+ default: '#5affb2'
}, // 偏移值
show: {
type: Boolean,
@@ -69,10 +69,11 @@
}
this.layer = new mars3d.layer.GeoJsonLayer({
type: 'geojson',
- url: 'static/geojson/pipe.json',
+ url: 'static/geojson/pipe_old.json',
symbol: {
styleOptions: {
- materialType: 'PolylineGlow',
+ lineType: 'glow',
+ // materialType: 'LineFlicker',
glowPower: glowPower, // 发光强度
width: width, // 线宽
color: color,
@@ -83,7 +84,7 @@
show: true
})
map.addLayer(this.layer)
- this.loadData()
+ // this.loadData()
}
},
// 移除图层
diff --git a/src/components/Map/components/pipeLayer2.vue b/src/components/Map/components/pipeLayer2.vue
new file mode 100644
index 0000000..4f56b36
--- /dev/null
+++ b/src/components/Map/components/pipeLayer2.vue
@@ -0,0 +1,147 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/routeLayer.vue b/src/components/Map/components/routeLayer.vue
index 203bd89..15bb2a5 100644
--- a/src/components/Map/components/routeLayer.vue
+++ b/src/components/Map/components/routeLayer.vue
@@ -50,6 +50,9 @@
methods: {
load() {
console.log('load')
+ if(this.show){
+ this.initLayer()
+ }
},
initLayer() {
const { mars3d, map } = this
@@ -60,6 +63,19 @@
}
}
const graphicLayer = new mars3d.layer.DivLayer()
+ graphicLayer.on(mars3d.EventType.click, event => {
+ console.log('单击了巡检人员', event)
+ })
+ graphicLayer.bindPopup(event => {
+ const route = event.graphic.attr
+ const html =
+ '
姓名:' + route.name +
+ '
电话:' + route['phone'] +
+ '
岗位:' + route['duty'] +
+ '
站名:' + route['unitname'] +
+ '
时间:' + route.locationdate + '
'
+ return html
+ })
this.layer = graphicLayer
map.addLayer(graphicLayer)
this.loadData()
@@ -77,11 +93,11 @@
lat: parseFloat(item['WD60_06']),
locationdate: item['WD60_04'],
time: new Date(item['WD60_04']),
- duty: item['WD60_11'],
- sex: item['WD60_09'],
- phone: item['WD60_10'],
- idcard: item['WD60_12'],
- unitname: item['WD60_08']
+ duty: item['WD60_11'] === null ? '' : item['WD60_11'],
+ sex: item['WD60_09'] === null ? '' : item['WD60_09'],
+ phone: item['WD60_10'] === null ? '' : item['WD60_10'],
+ idcard: item['WD60_12'] === null ? '' : item['WD60_12'],
+ unitname: item['WD60_08'] === null ? '' : item['WD60_08']
}
})
this.filteredData = []
diff --git a/src/components/Map/components/supplyLayer.vue b/src/components/Map/components/supplyLayer.vue
index 583e546..7fdbe56 100644
--- a/src/components/Map/components/supplyLayer.vue
+++ b/src/components/Map/components/supplyLayer.vue
@@ -1,10 +1,10 @@
-
+
@@ -134,7 +134,8 @@
const graphics = layer.graphics
for (const graphic of graphics) {
if (graphic.name === city) {
- graphic.openTooltip()
+ // graphic.openTooltip()
+ graphic.openPopup()
}
}
},
@@ -161,7 +162,8 @@
})
}
})
- graphic1.bindTooltip(html)
+ // graphic1.bindTooltip(html)
+ graphic1.bindPopup(html)
layer.addGraphic(graphic1)
},
// 移除图层
@@ -177,5 +179,4 @@
diff --git a/src/components/Map/components/supplyLayerCone.vue b/src/components/Map/components/supplyLayerCone.vue
new file mode 100644
index 0000000..de46f58
--- /dev/null
+++ b/src/components/Map/components/supplyLayerCone.vue
@@ -0,0 +1,169 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/threatLayer.vue b/src/components/Map/components/threatLayer.vue
index e354278..4b2295b 100644
--- a/src/components/Map/components/threatLayer.vue
+++ b/src/components/Map/components/threatLayer.vue
@@ -19,6 +19,10 @@
components: { ThreatDialog },
mixins: [commonMixin('layer')],
props: {
+ colorful: {
+ type: Boolean,
+ default: false
+ },
show: {
type: Boolean,
default: false
@@ -30,7 +34,28 @@
color: {
type: String,
default: '#FBFE2D'
- }
+ },
+ colorList: {
+ type: Array,
+ default: () => {
+ return ['#f33349', '#f79a2c', '#f2fa19', '#95e40c', '#1ffee6']
+ }
+ },
+ threatLevel: {
+ type: Object,
+ default: () => {
+ return {
+ '1': 'A级',
+ '2': 'B级',
+ '3': 'C级',
+ '4': '问题'
+ }
+ }
+ }, // 隐患等级
+ popupType: {
+ type: String,
+ default: 'dialog'
+ } // 详情弹出方式:dialog/ popupWindow
},
data() {
return {
@@ -40,7 +65,6 @@
},
watch: {
show(val) {
- console.log('watch show: ' + val)
if (val) {
this.initLayer()
} else {
@@ -51,27 +75,21 @@
methods: {
load() {
console.log('load')
+ if (this.show) {
+ this.initLayer()
+ }
},
initLayer() {
- const { mars3d, map } = this
+ const { map } = this
if (map) {
- if (this.show) {
- if (this.layer) {
- this.removeLayer()
- }
+ if (this.show && this.layer) {
+ this.removeLayer()
}
- const graphicLayer = new mars3d.layer.GraphicLayer()
- this.layer = graphicLayer
- map.addLayer(graphicLayer)
this.loadData()
}
},
loadData() {
- const { mars3d, type, layer } = this
- layer.on(mars3d.EventType.click, event => {
- console.log('监听layer,单击了矢量对象', event)
- this.$refs.threatDialog.initDialog(event.graphic.attr)
- })
+ const { type } = this
if (type === 'construction') {
axios.get('static/config/threat.json').then((res) => {
res = res.data
@@ -103,28 +121,60 @@
},
// 添加隐患点: type类型,arr数组, clr颜色
addFeatures() {
- const { mars3d, Cesium, layer, color, data } = this
- // 创建DIV数据图层\
+ const { mars3d, map, Cesium, color, data, type } = this
+ const graphicLayer = new mars3d.layer.GraphicLayer({ name: type })
+ console.log('add Layer ' + type)
+ this.layer = graphicLayer
+ this.layer.on(mars3d.EventType.click, event => {
+ console.log('点击隐患', event)
+ if (this.popupType === 'dialog') {
+ this.$refs.threatDialog.initDialog(event.graphic.attr)
+ }
+ })
+ if (this.popupType === 'popupWindow') {
+ this.layer.bindPopup(event => {
+ const item = event.graphic.attr
+ var html =
+ '位置描述:' +
+ item['位置描述'] +
+ '
村庄地址:' +
+ item['村庄地址'] +
+ '
发现人:' +
+ item['发现人'] +
+ '
隐患描述:' +
+ item['隐患描述'] +
+ '
创建时间:' +
+ item['创建时间'] +
+ '
隐患等级:' +
+ this.threatLevel[item['隐患等级']]
+ return html
+ })
+ }
+ console.log(this.layer)
+ map.addLayer(this.layer)
+ // 创建DIV数据图层
for (var i = 0, len = data.length; i < len; i++) {
const item = data[i]
var jd = item['经度']
var wd = item['纬度']
+ const level = parseInt(item['隐患等级']) - 1
+ const clr = this.colorful ? this.colorList[level] : color
var graphic = new mars3d.graphic.DivGraphic({
position: Cesium.Cartesian3.fromDegrees(jd, wd, 0),
style: {
- html: '
',
+ html: '
',
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 2000000) // 按视距距离显示
},
attr: item
})
- layer.addGraphic(graphic)
+ this.layer.addGraphic(graphic)
}
},
// 移除图层
removeLayer() {
const { map, layer } = this
- if (this.layer) {
- map.removeLayer(layer)
+ if (layer) {
+ map.removeLayer(this.layer, true)
this.layer = null
}
}
diff --git a/src/components/Map/components/vipLayer.vue b/src/components/Map/components/vipLayer.vue
new file mode 100644
index 0000000..154d153
--- /dev/null
+++ b/src/components/Map/components/vipLayer.vue
@@ -0,0 +1,150 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/weatherLayer.vue b/src/components/Map/components/weatherLayer.vue
index 98afe91..b9f2096 100644
--- a/src/components/Map/components/weatherLayer.vue
+++ b/src/components/Map/components/weatherLayer.vue
@@ -66,7 +66,8 @@
},
methods: {
load() {
- console.log('load')
+ console.log('load Weather Layer')
+ if(this.show) this.initLayer()
},
initLayer() {
const { mars3d, map } = this
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 4b4e27b..b69d5d4 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -220,3 +220,18 @@
}
}
}
+.mars3d-popup-background{
+ background-color: transparent !important;
+ background-image: url("../assets/global_images/popwin.png") !important;
+ background-repeat: no-repeat !important;
+ background-size: 100% 100% !important;
+}
+.mars3d-popup-tip-container{
+ display:none !important;
+}
+.mars3d-popup-content-wrapper{
+ box-shadow: none !important;
+ -webkit-box-shadow: none !important;
+ padding-top:10px !important;
+ padding-bottom: 10px !important;
+}
diff --git a/src/views/maps/constructionThreat.vue b/src/views/maps/constructionThreat.vue
index 246852f..eeea533 100644
--- a/src/views/maps/constructionThreat.vue
+++ b/src/views/maps/constructionThreat.vue
@@ -5,41 +5,37 @@
-->
-
-
-
-
-
-
-
-
-
-
-
-
-
+
-
-
+
+
+
+
diff --git a/src/components/Map/components/earthquakeLayer.vue b/src/components/Map/components/earthquakeLayer.vue
index e7efdc1..a4a0703 100644
--- a/src/components/Map/components/earthquakeLayer.vue
+++ b/src/components/Map/components/earthquakeLayer.vue
@@ -71,6 +71,7 @@
loadData() {
const { mars3d, Cesium, layer, height, size } = this
const date = getToday()
+ // const date = '2021-04-19'
getEarthquakeList(date).then((res) => {
if (res.data.length === 0) {
this.$message.info('今日无地震')
diff --git a/src/components/Map/components/hcaHeatLayer.vue b/src/components/Map/components/hcaHeatLayer.vue
index e4d3a21..9233d92 100644
--- a/src/components/Map/components/hcaHeatLayer.vue
+++ b/src/components/Map/components/hcaHeatLayer.vue
@@ -40,9 +40,10 @@
methods: {
load() {
console.log('load')
+ if (this.show) this.initLayer()
},
initLayer() {
- const { mars3d, map } = this
+ const { map } = this
if (map) {
if (this.show) {
if (this.layer) {
diff --git a/src/components/Map/components/hcaPointLayer.vue b/src/components/Map/components/hcaPointLayer.vue
new file mode 100644
index 0000000..b518699
--- /dev/null
+++ b/src/components/Map/components/hcaPointLayer.vue
@@ -0,0 +1,142 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/liquidFactoryLayer.vue b/src/components/Map/components/liquidFactoryLayer.vue
index 6845b93..3a1c0eb 100644
--- a/src/components/Map/components/liquidFactoryLayer.vue
+++ b/src/components/Map/components/liquidFactoryLayer.vue
@@ -72,15 +72,15 @@
}
},
loadData() {
- const { mars3d, layer } = this
+ const { mars3d, layer, height } = this
axios.get('static/config/liquidFactory.json').then((res) => {
res = res.data
if (res.code === 200) {
this.data = res.data[0].data
- for (const station of this.data) {
+ for (const item of this.data) {
const graphic = new mars3d.graphic.ModelEntity({
- name: station.name,
- position: [station.x, station.y, 0],
+ name: item.name,
+ position: [parseFloat(item.value[0]), parseFloat(item.value[1]), height],
url: 'static/gltf/output/yehuagongchang.gltf',
style: {
scale: 3,
@@ -88,7 +88,7 @@
minimumPixelSize: 30,
clampToGround: true
},
- tooltip: station.name
+ tooltip: item.name
})
layer.addGraphic(graphic)
}
diff --git a/src/components/Map/components/manageStationLayer.vue b/src/components/Map/components/manageStationLayer.vue
index c0aff38..7b976d6 100644
--- a/src/components/Map/components/manageStationLayer.vue
+++ b/src/components/Map/components/manageStationLayer.vue
@@ -56,6 +56,7 @@
methods: {
load() {
console.log('load')
+ if (this.show) this.initLayer()
},
initLayer() {
const { mars3d, map } = this
diff --git a/src/components/Map/components/needLayerCone.vue b/src/components/Map/components/needLayerCone.vue
new file mode 100644
index 0000000..373bf3c
--- /dev/null
+++ b/src/components/Map/components/needLayerCone.vue
@@ -0,0 +1,169 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/pipeLayer.vue b/src/components/Map/components/pipeLayer.vue
index 64142a7..0129de7 100644
--- a/src/components/Map/components/pipeLayer.vue
+++ b/src/components/Map/components/pipeLayer.vue
@@ -21,11 +21,11 @@
}, // 发光强度
opacity: {
type: Number,
- default: 0.9
+ default: 1
}, // 透明度
width: {
type: Number,
- default: 10
+ default: 5
}, // 线宽度
height: {
type: Number,
@@ -33,7 +33,7 @@
}, // 高度
color: {
type: String,
- default: '#92ffdf'
+ default: '#5affb2'
}, // 偏移值
show: {
type: Boolean,
@@ -69,10 +69,11 @@
}
this.layer = new mars3d.layer.GeoJsonLayer({
type: 'geojson',
- url: 'static/geojson/pipe.json',
+ url: 'static/geojson/pipe_old.json',
symbol: {
styleOptions: {
- materialType: 'PolylineGlow',
+ lineType: 'glow',
+ // materialType: 'LineFlicker',
glowPower: glowPower, // 发光强度
width: width, // 线宽
color: color,
@@ -83,7 +84,7 @@
show: true
})
map.addLayer(this.layer)
- this.loadData()
+ // this.loadData()
}
},
// 移除图层
diff --git a/src/components/Map/components/pipeLayer2.vue b/src/components/Map/components/pipeLayer2.vue
new file mode 100644
index 0000000..4f56b36
--- /dev/null
+++ b/src/components/Map/components/pipeLayer2.vue
@@ -0,0 +1,147 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/routeLayer.vue b/src/components/Map/components/routeLayer.vue
index 203bd89..15bb2a5 100644
--- a/src/components/Map/components/routeLayer.vue
+++ b/src/components/Map/components/routeLayer.vue
@@ -50,6 +50,9 @@
methods: {
load() {
console.log('load')
+ if(this.show){
+ this.initLayer()
+ }
},
initLayer() {
const { mars3d, map } = this
@@ -60,6 +63,19 @@
}
}
const graphicLayer = new mars3d.layer.DivLayer()
+ graphicLayer.on(mars3d.EventType.click, event => {
+ console.log('单击了巡检人员', event)
+ })
+ graphicLayer.bindPopup(event => {
+ const route = event.graphic.attr
+ const html =
+ '
姓名:' + route.name +
+ '
电话:' + route['phone'] +
+ '
岗位:' + route['duty'] +
+ '
站名:' + route['unitname'] +
+ '
时间:' + route.locationdate + '
'
+ return html
+ })
this.layer = graphicLayer
map.addLayer(graphicLayer)
this.loadData()
@@ -77,11 +93,11 @@
lat: parseFloat(item['WD60_06']),
locationdate: item['WD60_04'],
time: new Date(item['WD60_04']),
- duty: item['WD60_11'],
- sex: item['WD60_09'],
- phone: item['WD60_10'],
- idcard: item['WD60_12'],
- unitname: item['WD60_08']
+ duty: item['WD60_11'] === null ? '' : item['WD60_11'],
+ sex: item['WD60_09'] === null ? '' : item['WD60_09'],
+ phone: item['WD60_10'] === null ? '' : item['WD60_10'],
+ idcard: item['WD60_12'] === null ? '' : item['WD60_12'],
+ unitname: item['WD60_08'] === null ? '' : item['WD60_08']
}
})
this.filteredData = []
diff --git a/src/components/Map/components/supplyLayer.vue b/src/components/Map/components/supplyLayer.vue
index 583e546..7fdbe56 100644
--- a/src/components/Map/components/supplyLayer.vue
+++ b/src/components/Map/components/supplyLayer.vue
@@ -1,10 +1,10 @@
-
+
@@ -134,7 +134,8 @@
const graphics = layer.graphics
for (const graphic of graphics) {
if (graphic.name === city) {
- graphic.openTooltip()
+ // graphic.openTooltip()
+ graphic.openPopup()
}
}
},
@@ -161,7 +162,8 @@
})
}
})
- graphic1.bindTooltip(html)
+ // graphic1.bindTooltip(html)
+ graphic1.bindPopup(html)
layer.addGraphic(graphic1)
},
// 移除图层
@@ -177,5 +179,4 @@
diff --git a/src/components/Map/components/supplyLayerCone.vue b/src/components/Map/components/supplyLayerCone.vue
new file mode 100644
index 0000000..de46f58
--- /dev/null
+++ b/src/components/Map/components/supplyLayerCone.vue
@@ -0,0 +1,169 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/threatLayer.vue b/src/components/Map/components/threatLayer.vue
index e354278..4b2295b 100644
--- a/src/components/Map/components/threatLayer.vue
+++ b/src/components/Map/components/threatLayer.vue
@@ -19,6 +19,10 @@
components: { ThreatDialog },
mixins: [commonMixin('layer')],
props: {
+ colorful: {
+ type: Boolean,
+ default: false
+ },
show: {
type: Boolean,
default: false
@@ -30,7 +34,28 @@
color: {
type: String,
default: '#FBFE2D'
- }
+ },
+ colorList: {
+ type: Array,
+ default: () => {
+ return ['#f33349', '#f79a2c', '#f2fa19', '#95e40c', '#1ffee6']
+ }
+ },
+ threatLevel: {
+ type: Object,
+ default: () => {
+ return {
+ '1': 'A级',
+ '2': 'B级',
+ '3': 'C级',
+ '4': '问题'
+ }
+ }
+ }, // 隐患等级
+ popupType: {
+ type: String,
+ default: 'dialog'
+ } // 详情弹出方式:dialog/ popupWindow
},
data() {
return {
@@ -40,7 +65,6 @@
},
watch: {
show(val) {
- console.log('watch show: ' + val)
if (val) {
this.initLayer()
} else {
@@ -51,27 +75,21 @@
methods: {
load() {
console.log('load')
+ if (this.show) {
+ this.initLayer()
+ }
},
initLayer() {
- const { mars3d, map } = this
+ const { map } = this
if (map) {
- if (this.show) {
- if (this.layer) {
- this.removeLayer()
- }
+ if (this.show && this.layer) {
+ this.removeLayer()
}
- const graphicLayer = new mars3d.layer.GraphicLayer()
- this.layer = graphicLayer
- map.addLayer(graphicLayer)
this.loadData()
}
},
loadData() {
- const { mars3d, type, layer } = this
- layer.on(mars3d.EventType.click, event => {
- console.log('监听layer,单击了矢量对象', event)
- this.$refs.threatDialog.initDialog(event.graphic.attr)
- })
+ const { type } = this
if (type === 'construction') {
axios.get('static/config/threat.json').then((res) => {
res = res.data
@@ -103,28 +121,60 @@
},
// 添加隐患点: type类型,arr数组, clr颜色
addFeatures() {
- const { mars3d, Cesium, layer, color, data } = this
- // 创建DIV数据图层\
+ const { mars3d, map, Cesium, color, data, type } = this
+ const graphicLayer = new mars3d.layer.GraphicLayer({ name: type })
+ console.log('add Layer ' + type)
+ this.layer = graphicLayer
+ this.layer.on(mars3d.EventType.click, event => {
+ console.log('点击隐患', event)
+ if (this.popupType === 'dialog') {
+ this.$refs.threatDialog.initDialog(event.graphic.attr)
+ }
+ })
+ if (this.popupType === 'popupWindow') {
+ this.layer.bindPopup(event => {
+ const item = event.graphic.attr
+ var html =
+ '位置描述:' +
+ item['位置描述'] +
+ '
村庄地址:' +
+ item['村庄地址'] +
+ '
发现人:' +
+ item['发现人'] +
+ '
隐患描述:' +
+ item['隐患描述'] +
+ '
创建时间:' +
+ item['创建时间'] +
+ '
隐患等级:' +
+ this.threatLevel[item['隐患等级']]
+ return html
+ })
+ }
+ console.log(this.layer)
+ map.addLayer(this.layer)
+ // 创建DIV数据图层
for (var i = 0, len = data.length; i < len; i++) {
const item = data[i]
var jd = item['经度']
var wd = item['纬度']
+ const level = parseInt(item['隐患等级']) - 1
+ const clr = this.colorful ? this.colorList[level] : color
var graphic = new mars3d.graphic.DivGraphic({
position: Cesium.Cartesian3.fromDegrees(jd, wd, 0),
style: {
- html: '
',
+ html: '
',
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 2000000) // 按视距距离显示
},
attr: item
})
- layer.addGraphic(graphic)
+ this.layer.addGraphic(graphic)
}
},
// 移除图层
removeLayer() {
const { map, layer } = this
- if (this.layer) {
- map.removeLayer(layer)
+ if (layer) {
+ map.removeLayer(this.layer, true)
this.layer = null
}
}
diff --git a/src/components/Map/components/vipLayer.vue b/src/components/Map/components/vipLayer.vue
new file mode 100644
index 0000000..154d153
--- /dev/null
+++ b/src/components/Map/components/vipLayer.vue
@@ -0,0 +1,150 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/weatherLayer.vue b/src/components/Map/components/weatherLayer.vue
index 98afe91..b9f2096 100644
--- a/src/components/Map/components/weatherLayer.vue
+++ b/src/components/Map/components/weatherLayer.vue
@@ -66,7 +66,8 @@
},
methods: {
load() {
- console.log('load')
+ console.log('load Weather Layer')
+ if(this.show) this.initLayer()
},
initLayer() {
const { mars3d, map } = this
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 4b4e27b..b69d5d4 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -220,3 +220,18 @@
}
}
}
+.mars3d-popup-background{
+ background-color: transparent !important;
+ background-image: url("../assets/global_images/popwin.png") !important;
+ background-repeat: no-repeat !important;
+ background-size: 100% 100% !important;
+}
+.mars3d-popup-tip-container{
+ display:none !important;
+}
+.mars3d-popup-content-wrapper{
+ box-shadow: none !important;
+ -webkit-box-shadow: none !important;
+ padding-top:10px !important;
+ padding-bottom: 10px !important;
+}
diff --git a/src/views/maps/constructionThreat.vue b/src/views/maps/constructionThreat.vue
index 246852f..eeea533 100644
--- a/src/views/maps/constructionThreat.vue
+++ b/src/views/maps/constructionThreat.vue
@@ -5,41 +5,37 @@
-->
-
-
-
-
-
-
-
-
-
-
-
-
-
+
-
-
+
+
+
+
diff --git a/src/components/Map/components/earthquakeLayer.vue b/src/components/Map/components/earthquakeLayer.vue
index e7efdc1..a4a0703 100644
--- a/src/components/Map/components/earthquakeLayer.vue
+++ b/src/components/Map/components/earthquakeLayer.vue
@@ -71,6 +71,7 @@
loadData() {
const { mars3d, Cesium, layer, height, size } = this
const date = getToday()
+ // const date = '2021-04-19'
getEarthquakeList(date).then((res) => {
if (res.data.length === 0) {
this.$message.info('今日无地震')
diff --git a/src/components/Map/components/hcaHeatLayer.vue b/src/components/Map/components/hcaHeatLayer.vue
index e4d3a21..9233d92 100644
--- a/src/components/Map/components/hcaHeatLayer.vue
+++ b/src/components/Map/components/hcaHeatLayer.vue
@@ -40,9 +40,10 @@
methods: {
load() {
console.log('load')
+ if (this.show) this.initLayer()
},
initLayer() {
- const { mars3d, map } = this
+ const { map } = this
if (map) {
if (this.show) {
if (this.layer) {
diff --git a/src/components/Map/components/hcaPointLayer.vue b/src/components/Map/components/hcaPointLayer.vue
new file mode 100644
index 0000000..b518699
--- /dev/null
+++ b/src/components/Map/components/hcaPointLayer.vue
@@ -0,0 +1,142 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/liquidFactoryLayer.vue b/src/components/Map/components/liquidFactoryLayer.vue
index 6845b93..3a1c0eb 100644
--- a/src/components/Map/components/liquidFactoryLayer.vue
+++ b/src/components/Map/components/liquidFactoryLayer.vue
@@ -72,15 +72,15 @@
}
},
loadData() {
- const { mars3d, layer } = this
+ const { mars3d, layer, height } = this
axios.get('static/config/liquidFactory.json').then((res) => {
res = res.data
if (res.code === 200) {
this.data = res.data[0].data
- for (const station of this.data) {
+ for (const item of this.data) {
const graphic = new mars3d.graphic.ModelEntity({
- name: station.name,
- position: [station.x, station.y, 0],
+ name: item.name,
+ position: [parseFloat(item.value[0]), parseFloat(item.value[1]), height],
url: 'static/gltf/output/yehuagongchang.gltf',
style: {
scale: 3,
@@ -88,7 +88,7 @@
minimumPixelSize: 30,
clampToGround: true
},
- tooltip: station.name
+ tooltip: item.name
})
layer.addGraphic(graphic)
}
diff --git a/src/components/Map/components/manageStationLayer.vue b/src/components/Map/components/manageStationLayer.vue
index c0aff38..7b976d6 100644
--- a/src/components/Map/components/manageStationLayer.vue
+++ b/src/components/Map/components/manageStationLayer.vue
@@ -56,6 +56,7 @@
methods: {
load() {
console.log('load')
+ if (this.show) this.initLayer()
},
initLayer() {
const { mars3d, map } = this
diff --git a/src/components/Map/components/needLayerCone.vue b/src/components/Map/components/needLayerCone.vue
new file mode 100644
index 0000000..373bf3c
--- /dev/null
+++ b/src/components/Map/components/needLayerCone.vue
@@ -0,0 +1,169 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/pipeLayer.vue b/src/components/Map/components/pipeLayer.vue
index 64142a7..0129de7 100644
--- a/src/components/Map/components/pipeLayer.vue
+++ b/src/components/Map/components/pipeLayer.vue
@@ -21,11 +21,11 @@
}, // 发光强度
opacity: {
type: Number,
- default: 0.9
+ default: 1
}, // 透明度
width: {
type: Number,
- default: 10
+ default: 5
}, // 线宽度
height: {
type: Number,
@@ -33,7 +33,7 @@
}, // 高度
color: {
type: String,
- default: '#92ffdf'
+ default: '#5affb2'
}, // 偏移值
show: {
type: Boolean,
@@ -69,10 +69,11 @@
}
this.layer = new mars3d.layer.GeoJsonLayer({
type: 'geojson',
- url: 'static/geojson/pipe.json',
+ url: 'static/geojson/pipe_old.json',
symbol: {
styleOptions: {
- materialType: 'PolylineGlow',
+ lineType: 'glow',
+ // materialType: 'LineFlicker',
glowPower: glowPower, // 发光强度
width: width, // 线宽
color: color,
@@ -83,7 +84,7 @@
show: true
})
map.addLayer(this.layer)
- this.loadData()
+ // this.loadData()
}
},
// 移除图层
diff --git a/src/components/Map/components/pipeLayer2.vue b/src/components/Map/components/pipeLayer2.vue
new file mode 100644
index 0000000..4f56b36
--- /dev/null
+++ b/src/components/Map/components/pipeLayer2.vue
@@ -0,0 +1,147 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/routeLayer.vue b/src/components/Map/components/routeLayer.vue
index 203bd89..15bb2a5 100644
--- a/src/components/Map/components/routeLayer.vue
+++ b/src/components/Map/components/routeLayer.vue
@@ -50,6 +50,9 @@
methods: {
load() {
console.log('load')
+ if(this.show){
+ this.initLayer()
+ }
},
initLayer() {
const { mars3d, map } = this
@@ -60,6 +63,19 @@
}
}
const graphicLayer = new mars3d.layer.DivLayer()
+ graphicLayer.on(mars3d.EventType.click, event => {
+ console.log('单击了巡检人员', event)
+ })
+ graphicLayer.bindPopup(event => {
+ const route = event.graphic.attr
+ const html =
+ '
姓名:' + route.name +
+ '
电话:' + route['phone'] +
+ '
岗位:' + route['duty'] +
+ '
站名:' + route['unitname'] +
+ '
时间:' + route.locationdate + '
'
+ return html
+ })
this.layer = graphicLayer
map.addLayer(graphicLayer)
this.loadData()
@@ -77,11 +93,11 @@
lat: parseFloat(item['WD60_06']),
locationdate: item['WD60_04'],
time: new Date(item['WD60_04']),
- duty: item['WD60_11'],
- sex: item['WD60_09'],
- phone: item['WD60_10'],
- idcard: item['WD60_12'],
- unitname: item['WD60_08']
+ duty: item['WD60_11'] === null ? '' : item['WD60_11'],
+ sex: item['WD60_09'] === null ? '' : item['WD60_09'],
+ phone: item['WD60_10'] === null ? '' : item['WD60_10'],
+ idcard: item['WD60_12'] === null ? '' : item['WD60_12'],
+ unitname: item['WD60_08'] === null ? '' : item['WD60_08']
}
})
this.filteredData = []
diff --git a/src/components/Map/components/supplyLayer.vue b/src/components/Map/components/supplyLayer.vue
index 583e546..7fdbe56 100644
--- a/src/components/Map/components/supplyLayer.vue
+++ b/src/components/Map/components/supplyLayer.vue
@@ -1,10 +1,10 @@
-
+
@@ -134,7 +134,8 @@
const graphics = layer.graphics
for (const graphic of graphics) {
if (graphic.name === city) {
- graphic.openTooltip()
+ // graphic.openTooltip()
+ graphic.openPopup()
}
}
},
@@ -161,7 +162,8 @@
})
}
})
- graphic1.bindTooltip(html)
+ // graphic1.bindTooltip(html)
+ graphic1.bindPopup(html)
layer.addGraphic(graphic1)
},
// 移除图层
@@ -177,5 +179,4 @@
diff --git a/src/components/Map/components/supplyLayerCone.vue b/src/components/Map/components/supplyLayerCone.vue
new file mode 100644
index 0000000..de46f58
--- /dev/null
+++ b/src/components/Map/components/supplyLayerCone.vue
@@ -0,0 +1,169 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/threatLayer.vue b/src/components/Map/components/threatLayer.vue
index e354278..4b2295b 100644
--- a/src/components/Map/components/threatLayer.vue
+++ b/src/components/Map/components/threatLayer.vue
@@ -19,6 +19,10 @@
components: { ThreatDialog },
mixins: [commonMixin('layer')],
props: {
+ colorful: {
+ type: Boolean,
+ default: false
+ },
show: {
type: Boolean,
default: false
@@ -30,7 +34,28 @@
color: {
type: String,
default: '#FBFE2D'
- }
+ },
+ colorList: {
+ type: Array,
+ default: () => {
+ return ['#f33349', '#f79a2c', '#f2fa19', '#95e40c', '#1ffee6']
+ }
+ },
+ threatLevel: {
+ type: Object,
+ default: () => {
+ return {
+ '1': 'A级',
+ '2': 'B级',
+ '3': 'C级',
+ '4': '问题'
+ }
+ }
+ }, // 隐患等级
+ popupType: {
+ type: String,
+ default: 'dialog'
+ } // 详情弹出方式:dialog/ popupWindow
},
data() {
return {
@@ -40,7 +65,6 @@
},
watch: {
show(val) {
- console.log('watch show: ' + val)
if (val) {
this.initLayer()
} else {
@@ -51,27 +75,21 @@
methods: {
load() {
console.log('load')
+ if (this.show) {
+ this.initLayer()
+ }
},
initLayer() {
- const { mars3d, map } = this
+ const { map } = this
if (map) {
- if (this.show) {
- if (this.layer) {
- this.removeLayer()
- }
+ if (this.show && this.layer) {
+ this.removeLayer()
}
- const graphicLayer = new mars3d.layer.GraphicLayer()
- this.layer = graphicLayer
- map.addLayer(graphicLayer)
this.loadData()
}
},
loadData() {
- const { mars3d, type, layer } = this
- layer.on(mars3d.EventType.click, event => {
- console.log('监听layer,单击了矢量对象', event)
- this.$refs.threatDialog.initDialog(event.graphic.attr)
- })
+ const { type } = this
if (type === 'construction') {
axios.get('static/config/threat.json').then((res) => {
res = res.data
@@ -103,28 +121,60 @@
},
// 添加隐患点: type类型,arr数组, clr颜色
addFeatures() {
- const { mars3d, Cesium, layer, color, data } = this
- // 创建DIV数据图层\
+ const { mars3d, map, Cesium, color, data, type } = this
+ const graphicLayer = new mars3d.layer.GraphicLayer({ name: type })
+ console.log('add Layer ' + type)
+ this.layer = graphicLayer
+ this.layer.on(mars3d.EventType.click, event => {
+ console.log('点击隐患', event)
+ if (this.popupType === 'dialog') {
+ this.$refs.threatDialog.initDialog(event.graphic.attr)
+ }
+ })
+ if (this.popupType === 'popupWindow') {
+ this.layer.bindPopup(event => {
+ const item = event.graphic.attr
+ var html =
+ '位置描述:' +
+ item['位置描述'] +
+ '
村庄地址:' +
+ item['村庄地址'] +
+ '
发现人:' +
+ item['发现人'] +
+ '
隐患描述:' +
+ item['隐患描述'] +
+ '
创建时间:' +
+ item['创建时间'] +
+ '
隐患等级:' +
+ this.threatLevel[item['隐患等级']]
+ return html
+ })
+ }
+ console.log(this.layer)
+ map.addLayer(this.layer)
+ // 创建DIV数据图层
for (var i = 0, len = data.length; i < len; i++) {
const item = data[i]
var jd = item['经度']
var wd = item['纬度']
+ const level = parseInt(item['隐患等级']) - 1
+ const clr = this.colorful ? this.colorList[level] : color
var graphic = new mars3d.graphic.DivGraphic({
position: Cesium.Cartesian3.fromDegrees(jd, wd, 0),
style: {
- html: '
',
+ html: '
',
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 2000000) // 按视距距离显示
},
attr: item
})
- layer.addGraphic(graphic)
+ this.layer.addGraphic(graphic)
}
},
// 移除图层
removeLayer() {
const { map, layer } = this
- if (this.layer) {
- map.removeLayer(layer)
+ if (layer) {
+ map.removeLayer(this.layer, true)
this.layer = null
}
}
diff --git a/src/components/Map/components/vipLayer.vue b/src/components/Map/components/vipLayer.vue
new file mode 100644
index 0000000..154d153
--- /dev/null
+++ b/src/components/Map/components/vipLayer.vue
@@ -0,0 +1,150 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/weatherLayer.vue b/src/components/Map/components/weatherLayer.vue
index 98afe91..b9f2096 100644
--- a/src/components/Map/components/weatherLayer.vue
+++ b/src/components/Map/components/weatherLayer.vue
@@ -66,7 +66,8 @@
},
methods: {
load() {
- console.log('load')
+ console.log('load Weather Layer')
+ if(this.show) this.initLayer()
},
initLayer() {
const { mars3d, map } = this
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 4b4e27b..b69d5d4 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -220,3 +220,18 @@
}
}
}
+.mars3d-popup-background{
+ background-color: transparent !important;
+ background-image: url("../assets/global_images/popwin.png") !important;
+ background-repeat: no-repeat !important;
+ background-size: 100% 100% !important;
+}
+.mars3d-popup-tip-container{
+ display:none !important;
+}
+.mars3d-popup-content-wrapper{
+ box-shadow: none !important;
+ -webkit-box-shadow: none !important;
+ padding-top:10px !important;
+ padding-bottom: 10px !important;
+}
diff --git a/src/views/maps/constructionThreat.vue b/src/views/maps/constructionThreat.vue
index 246852f..eeea533 100644
--- a/src/views/maps/constructionThreat.vue
+++ b/src/views/maps/constructionThreat.vue
@@ -5,41 +5,37 @@
-->
-
-
-
-
-
-
-
-
-
-
-
-
-
+
-
-
+
+
+
+
diff --git a/src/components/Map/components/earthquakeLayer.vue b/src/components/Map/components/earthquakeLayer.vue
index e7efdc1..a4a0703 100644
--- a/src/components/Map/components/earthquakeLayer.vue
+++ b/src/components/Map/components/earthquakeLayer.vue
@@ -71,6 +71,7 @@
loadData() {
const { mars3d, Cesium, layer, height, size } = this
const date = getToday()
+ // const date = '2021-04-19'
getEarthquakeList(date).then((res) => {
if (res.data.length === 0) {
this.$message.info('今日无地震')
diff --git a/src/components/Map/components/hcaHeatLayer.vue b/src/components/Map/components/hcaHeatLayer.vue
index e4d3a21..9233d92 100644
--- a/src/components/Map/components/hcaHeatLayer.vue
+++ b/src/components/Map/components/hcaHeatLayer.vue
@@ -40,9 +40,10 @@
methods: {
load() {
console.log('load')
+ if (this.show) this.initLayer()
},
initLayer() {
- const { mars3d, map } = this
+ const { map } = this
if (map) {
if (this.show) {
if (this.layer) {
diff --git a/src/components/Map/components/hcaPointLayer.vue b/src/components/Map/components/hcaPointLayer.vue
new file mode 100644
index 0000000..b518699
--- /dev/null
+++ b/src/components/Map/components/hcaPointLayer.vue
@@ -0,0 +1,142 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/liquidFactoryLayer.vue b/src/components/Map/components/liquidFactoryLayer.vue
index 6845b93..3a1c0eb 100644
--- a/src/components/Map/components/liquidFactoryLayer.vue
+++ b/src/components/Map/components/liquidFactoryLayer.vue
@@ -72,15 +72,15 @@
}
},
loadData() {
- const { mars3d, layer } = this
+ const { mars3d, layer, height } = this
axios.get('static/config/liquidFactory.json').then((res) => {
res = res.data
if (res.code === 200) {
this.data = res.data[0].data
- for (const station of this.data) {
+ for (const item of this.data) {
const graphic = new mars3d.graphic.ModelEntity({
- name: station.name,
- position: [station.x, station.y, 0],
+ name: item.name,
+ position: [parseFloat(item.value[0]), parseFloat(item.value[1]), height],
url: 'static/gltf/output/yehuagongchang.gltf',
style: {
scale: 3,
@@ -88,7 +88,7 @@
minimumPixelSize: 30,
clampToGround: true
},
- tooltip: station.name
+ tooltip: item.name
})
layer.addGraphic(graphic)
}
diff --git a/src/components/Map/components/manageStationLayer.vue b/src/components/Map/components/manageStationLayer.vue
index c0aff38..7b976d6 100644
--- a/src/components/Map/components/manageStationLayer.vue
+++ b/src/components/Map/components/manageStationLayer.vue
@@ -56,6 +56,7 @@
methods: {
load() {
console.log('load')
+ if (this.show) this.initLayer()
},
initLayer() {
const { mars3d, map } = this
diff --git a/src/components/Map/components/needLayerCone.vue b/src/components/Map/components/needLayerCone.vue
new file mode 100644
index 0000000..373bf3c
--- /dev/null
+++ b/src/components/Map/components/needLayerCone.vue
@@ -0,0 +1,169 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/pipeLayer.vue b/src/components/Map/components/pipeLayer.vue
index 64142a7..0129de7 100644
--- a/src/components/Map/components/pipeLayer.vue
+++ b/src/components/Map/components/pipeLayer.vue
@@ -21,11 +21,11 @@
}, // 发光强度
opacity: {
type: Number,
- default: 0.9
+ default: 1
}, // 透明度
width: {
type: Number,
- default: 10
+ default: 5
}, // 线宽度
height: {
type: Number,
@@ -33,7 +33,7 @@
}, // 高度
color: {
type: String,
- default: '#92ffdf'
+ default: '#5affb2'
}, // 偏移值
show: {
type: Boolean,
@@ -69,10 +69,11 @@
}
this.layer = new mars3d.layer.GeoJsonLayer({
type: 'geojson',
- url: 'static/geojson/pipe.json',
+ url: 'static/geojson/pipe_old.json',
symbol: {
styleOptions: {
- materialType: 'PolylineGlow',
+ lineType: 'glow',
+ // materialType: 'LineFlicker',
glowPower: glowPower, // 发光强度
width: width, // 线宽
color: color,
@@ -83,7 +84,7 @@
show: true
})
map.addLayer(this.layer)
- this.loadData()
+ // this.loadData()
}
},
// 移除图层
diff --git a/src/components/Map/components/pipeLayer2.vue b/src/components/Map/components/pipeLayer2.vue
new file mode 100644
index 0000000..4f56b36
--- /dev/null
+++ b/src/components/Map/components/pipeLayer2.vue
@@ -0,0 +1,147 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/routeLayer.vue b/src/components/Map/components/routeLayer.vue
index 203bd89..15bb2a5 100644
--- a/src/components/Map/components/routeLayer.vue
+++ b/src/components/Map/components/routeLayer.vue
@@ -50,6 +50,9 @@
methods: {
load() {
console.log('load')
+ if(this.show){
+ this.initLayer()
+ }
},
initLayer() {
const { mars3d, map } = this
@@ -60,6 +63,19 @@
}
}
const graphicLayer = new mars3d.layer.DivLayer()
+ graphicLayer.on(mars3d.EventType.click, event => {
+ console.log('单击了巡检人员', event)
+ })
+ graphicLayer.bindPopup(event => {
+ const route = event.graphic.attr
+ const html =
+ '
姓名:' + route.name +
+ '
电话:' + route['phone'] +
+ '
岗位:' + route['duty'] +
+ '
站名:' + route['unitname'] +
+ '
时间:' + route.locationdate + '
'
+ return html
+ })
this.layer = graphicLayer
map.addLayer(graphicLayer)
this.loadData()
@@ -77,11 +93,11 @@
lat: parseFloat(item['WD60_06']),
locationdate: item['WD60_04'],
time: new Date(item['WD60_04']),
- duty: item['WD60_11'],
- sex: item['WD60_09'],
- phone: item['WD60_10'],
- idcard: item['WD60_12'],
- unitname: item['WD60_08']
+ duty: item['WD60_11'] === null ? '' : item['WD60_11'],
+ sex: item['WD60_09'] === null ? '' : item['WD60_09'],
+ phone: item['WD60_10'] === null ? '' : item['WD60_10'],
+ idcard: item['WD60_12'] === null ? '' : item['WD60_12'],
+ unitname: item['WD60_08'] === null ? '' : item['WD60_08']
}
})
this.filteredData = []
diff --git a/src/components/Map/components/supplyLayer.vue b/src/components/Map/components/supplyLayer.vue
index 583e546..7fdbe56 100644
--- a/src/components/Map/components/supplyLayer.vue
+++ b/src/components/Map/components/supplyLayer.vue
@@ -1,10 +1,10 @@
-
+
@@ -134,7 +134,8 @@
const graphics = layer.graphics
for (const graphic of graphics) {
if (graphic.name === city) {
- graphic.openTooltip()
+ // graphic.openTooltip()
+ graphic.openPopup()
}
}
},
@@ -161,7 +162,8 @@
})
}
})
- graphic1.bindTooltip(html)
+ // graphic1.bindTooltip(html)
+ graphic1.bindPopup(html)
layer.addGraphic(graphic1)
},
// 移除图层
@@ -177,5 +179,4 @@
diff --git a/src/components/Map/components/supplyLayerCone.vue b/src/components/Map/components/supplyLayerCone.vue
new file mode 100644
index 0000000..de46f58
--- /dev/null
+++ b/src/components/Map/components/supplyLayerCone.vue
@@ -0,0 +1,169 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/threatLayer.vue b/src/components/Map/components/threatLayer.vue
index e354278..4b2295b 100644
--- a/src/components/Map/components/threatLayer.vue
+++ b/src/components/Map/components/threatLayer.vue
@@ -19,6 +19,10 @@
components: { ThreatDialog },
mixins: [commonMixin('layer')],
props: {
+ colorful: {
+ type: Boolean,
+ default: false
+ },
show: {
type: Boolean,
default: false
@@ -30,7 +34,28 @@
color: {
type: String,
default: '#FBFE2D'
- }
+ },
+ colorList: {
+ type: Array,
+ default: () => {
+ return ['#f33349', '#f79a2c', '#f2fa19', '#95e40c', '#1ffee6']
+ }
+ },
+ threatLevel: {
+ type: Object,
+ default: () => {
+ return {
+ '1': 'A级',
+ '2': 'B级',
+ '3': 'C级',
+ '4': '问题'
+ }
+ }
+ }, // 隐患等级
+ popupType: {
+ type: String,
+ default: 'dialog'
+ } // 详情弹出方式:dialog/ popupWindow
},
data() {
return {
@@ -40,7 +65,6 @@
},
watch: {
show(val) {
- console.log('watch show: ' + val)
if (val) {
this.initLayer()
} else {
@@ -51,27 +75,21 @@
methods: {
load() {
console.log('load')
+ if (this.show) {
+ this.initLayer()
+ }
},
initLayer() {
- const { mars3d, map } = this
+ const { map } = this
if (map) {
- if (this.show) {
- if (this.layer) {
- this.removeLayer()
- }
+ if (this.show && this.layer) {
+ this.removeLayer()
}
- const graphicLayer = new mars3d.layer.GraphicLayer()
- this.layer = graphicLayer
- map.addLayer(graphicLayer)
this.loadData()
}
},
loadData() {
- const { mars3d, type, layer } = this
- layer.on(mars3d.EventType.click, event => {
- console.log('监听layer,单击了矢量对象', event)
- this.$refs.threatDialog.initDialog(event.graphic.attr)
- })
+ const { type } = this
if (type === 'construction') {
axios.get('static/config/threat.json').then((res) => {
res = res.data
@@ -103,28 +121,60 @@
},
// 添加隐患点: type类型,arr数组, clr颜色
addFeatures() {
- const { mars3d, Cesium, layer, color, data } = this
- // 创建DIV数据图层\
+ const { mars3d, map, Cesium, color, data, type } = this
+ const graphicLayer = new mars3d.layer.GraphicLayer({ name: type })
+ console.log('add Layer ' + type)
+ this.layer = graphicLayer
+ this.layer.on(mars3d.EventType.click, event => {
+ console.log('点击隐患', event)
+ if (this.popupType === 'dialog') {
+ this.$refs.threatDialog.initDialog(event.graphic.attr)
+ }
+ })
+ if (this.popupType === 'popupWindow') {
+ this.layer.bindPopup(event => {
+ const item = event.graphic.attr
+ var html =
+ '位置描述:' +
+ item['位置描述'] +
+ '
村庄地址:' +
+ item['村庄地址'] +
+ '
发现人:' +
+ item['发现人'] +
+ '
隐患描述:' +
+ item['隐患描述'] +
+ '
创建时间:' +
+ item['创建时间'] +
+ '
隐患等级:' +
+ this.threatLevel[item['隐患等级']]
+ return html
+ })
+ }
+ console.log(this.layer)
+ map.addLayer(this.layer)
+ // 创建DIV数据图层
for (var i = 0, len = data.length; i < len; i++) {
const item = data[i]
var jd = item['经度']
var wd = item['纬度']
+ const level = parseInt(item['隐患等级']) - 1
+ const clr = this.colorful ? this.colorList[level] : color
var graphic = new mars3d.graphic.DivGraphic({
position: Cesium.Cartesian3.fromDegrees(jd, wd, 0),
style: {
- html: '
',
+ html: '
',
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 2000000) // 按视距距离显示
},
attr: item
})
- layer.addGraphic(graphic)
+ this.layer.addGraphic(graphic)
}
},
// 移除图层
removeLayer() {
const { map, layer } = this
- if (this.layer) {
- map.removeLayer(layer)
+ if (layer) {
+ map.removeLayer(this.layer, true)
this.layer = null
}
}
diff --git a/src/components/Map/components/vipLayer.vue b/src/components/Map/components/vipLayer.vue
new file mode 100644
index 0000000..154d153
--- /dev/null
+++ b/src/components/Map/components/vipLayer.vue
@@ -0,0 +1,150 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/weatherLayer.vue b/src/components/Map/components/weatherLayer.vue
index 98afe91..b9f2096 100644
--- a/src/components/Map/components/weatherLayer.vue
+++ b/src/components/Map/components/weatherLayer.vue
@@ -66,7 +66,8 @@
},
methods: {
load() {
- console.log('load')
+ console.log('load Weather Layer')
+ if(this.show) this.initLayer()
},
initLayer() {
const { mars3d, map } = this
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 4b4e27b..b69d5d4 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -220,3 +220,18 @@
}
}
}
+.mars3d-popup-background{
+ background-color: transparent !important;
+ background-image: url("../assets/global_images/popwin.png") !important;
+ background-repeat: no-repeat !important;
+ background-size: 100% 100% !important;
+}
+.mars3d-popup-tip-container{
+ display:none !important;
+}
+.mars3d-popup-content-wrapper{
+ box-shadow: none !important;
+ -webkit-box-shadow: none !important;
+ padding-top:10px !important;
+ padding-bottom: 10px !important;
+}
diff --git a/src/views/maps/constructionThreat.vue b/src/views/maps/constructionThreat.vue
index 246852f..eeea533 100644
--- a/src/views/maps/constructionThreat.vue
+++ b/src/views/maps/constructionThreat.vue
@@ -5,41 +5,37 @@
-->
-
-
-
-
-
-
-
-
-
-
-
-
-
+
-
-
+
+
+
+
diff --git a/src/components/Map/components/earthquakeLayer.vue b/src/components/Map/components/earthquakeLayer.vue
index e7efdc1..a4a0703 100644
--- a/src/components/Map/components/earthquakeLayer.vue
+++ b/src/components/Map/components/earthquakeLayer.vue
@@ -71,6 +71,7 @@
loadData() {
const { mars3d, Cesium, layer, height, size } = this
const date = getToday()
+ // const date = '2021-04-19'
getEarthquakeList(date).then((res) => {
if (res.data.length === 0) {
this.$message.info('今日无地震')
diff --git a/src/components/Map/components/hcaHeatLayer.vue b/src/components/Map/components/hcaHeatLayer.vue
index e4d3a21..9233d92 100644
--- a/src/components/Map/components/hcaHeatLayer.vue
+++ b/src/components/Map/components/hcaHeatLayer.vue
@@ -40,9 +40,10 @@
methods: {
load() {
console.log('load')
+ if (this.show) this.initLayer()
},
initLayer() {
- const { mars3d, map } = this
+ const { map } = this
if (map) {
if (this.show) {
if (this.layer) {
diff --git a/src/components/Map/components/hcaPointLayer.vue b/src/components/Map/components/hcaPointLayer.vue
new file mode 100644
index 0000000..b518699
--- /dev/null
+++ b/src/components/Map/components/hcaPointLayer.vue
@@ -0,0 +1,142 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/liquidFactoryLayer.vue b/src/components/Map/components/liquidFactoryLayer.vue
index 6845b93..3a1c0eb 100644
--- a/src/components/Map/components/liquidFactoryLayer.vue
+++ b/src/components/Map/components/liquidFactoryLayer.vue
@@ -72,15 +72,15 @@
}
},
loadData() {
- const { mars3d, layer } = this
+ const { mars3d, layer, height } = this
axios.get('static/config/liquidFactory.json').then((res) => {
res = res.data
if (res.code === 200) {
this.data = res.data[0].data
- for (const station of this.data) {
+ for (const item of this.data) {
const graphic = new mars3d.graphic.ModelEntity({
- name: station.name,
- position: [station.x, station.y, 0],
+ name: item.name,
+ position: [parseFloat(item.value[0]), parseFloat(item.value[1]), height],
url: 'static/gltf/output/yehuagongchang.gltf',
style: {
scale: 3,
@@ -88,7 +88,7 @@
minimumPixelSize: 30,
clampToGround: true
},
- tooltip: station.name
+ tooltip: item.name
})
layer.addGraphic(graphic)
}
diff --git a/src/components/Map/components/manageStationLayer.vue b/src/components/Map/components/manageStationLayer.vue
index c0aff38..7b976d6 100644
--- a/src/components/Map/components/manageStationLayer.vue
+++ b/src/components/Map/components/manageStationLayer.vue
@@ -56,6 +56,7 @@
methods: {
load() {
console.log('load')
+ if (this.show) this.initLayer()
},
initLayer() {
const { mars3d, map } = this
diff --git a/src/components/Map/components/needLayerCone.vue b/src/components/Map/components/needLayerCone.vue
new file mode 100644
index 0000000..373bf3c
--- /dev/null
+++ b/src/components/Map/components/needLayerCone.vue
@@ -0,0 +1,169 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/pipeLayer.vue b/src/components/Map/components/pipeLayer.vue
index 64142a7..0129de7 100644
--- a/src/components/Map/components/pipeLayer.vue
+++ b/src/components/Map/components/pipeLayer.vue
@@ -21,11 +21,11 @@
}, // 发光强度
opacity: {
type: Number,
- default: 0.9
+ default: 1
}, // 透明度
width: {
type: Number,
- default: 10
+ default: 5
}, // 线宽度
height: {
type: Number,
@@ -33,7 +33,7 @@
}, // 高度
color: {
type: String,
- default: '#92ffdf'
+ default: '#5affb2'
}, // 偏移值
show: {
type: Boolean,
@@ -69,10 +69,11 @@
}
this.layer = new mars3d.layer.GeoJsonLayer({
type: 'geojson',
- url: 'static/geojson/pipe.json',
+ url: 'static/geojson/pipe_old.json',
symbol: {
styleOptions: {
- materialType: 'PolylineGlow',
+ lineType: 'glow',
+ // materialType: 'LineFlicker',
glowPower: glowPower, // 发光强度
width: width, // 线宽
color: color,
@@ -83,7 +84,7 @@
show: true
})
map.addLayer(this.layer)
- this.loadData()
+ // this.loadData()
}
},
// 移除图层
diff --git a/src/components/Map/components/pipeLayer2.vue b/src/components/Map/components/pipeLayer2.vue
new file mode 100644
index 0000000..4f56b36
--- /dev/null
+++ b/src/components/Map/components/pipeLayer2.vue
@@ -0,0 +1,147 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/routeLayer.vue b/src/components/Map/components/routeLayer.vue
index 203bd89..15bb2a5 100644
--- a/src/components/Map/components/routeLayer.vue
+++ b/src/components/Map/components/routeLayer.vue
@@ -50,6 +50,9 @@
methods: {
load() {
console.log('load')
+ if(this.show){
+ this.initLayer()
+ }
},
initLayer() {
const { mars3d, map } = this
@@ -60,6 +63,19 @@
}
}
const graphicLayer = new mars3d.layer.DivLayer()
+ graphicLayer.on(mars3d.EventType.click, event => {
+ console.log('单击了巡检人员', event)
+ })
+ graphicLayer.bindPopup(event => {
+ const route = event.graphic.attr
+ const html =
+ '
姓名:' + route.name +
+ '
电话:' + route['phone'] +
+ '
岗位:' + route['duty'] +
+ '
站名:' + route['unitname'] +
+ '
时间:' + route.locationdate + '
'
+ return html
+ })
this.layer = graphicLayer
map.addLayer(graphicLayer)
this.loadData()
@@ -77,11 +93,11 @@
lat: parseFloat(item['WD60_06']),
locationdate: item['WD60_04'],
time: new Date(item['WD60_04']),
- duty: item['WD60_11'],
- sex: item['WD60_09'],
- phone: item['WD60_10'],
- idcard: item['WD60_12'],
- unitname: item['WD60_08']
+ duty: item['WD60_11'] === null ? '' : item['WD60_11'],
+ sex: item['WD60_09'] === null ? '' : item['WD60_09'],
+ phone: item['WD60_10'] === null ? '' : item['WD60_10'],
+ idcard: item['WD60_12'] === null ? '' : item['WD60_12'],
+ unitname: item['WD60_08'] === null ? '' : item['WD60_08']
}
})
this.filteredData = []
diff --git a/src/components/Map/components/supplyLayer.vue b/src/components/Map/components/supplyLayer.vue
index 583e546..7fdbe56 100644
--- a/src/components/Map/components/supplyLayer.vue
+++ b/src/components/Map/components/supplyLayer.vue
@@ -1,10 +1,10 @@
-
+
@@ -134,7 +134,8 @@
const graphics = layer.graphics
for (const graphic of graphics) {
if (graphic.name === city) {
- graphic.openTooltip()
+ // graphic.openTooltip()
+ graphic.openPopup()
}
}
},
@@ -161,7 +162,8 @@
})
}
})
- graphic1.bindTooltip(html)
+ // graphic1.bindTooltip(html)
+ graphic1.bindPopup(html)
layer.addGraphic(graphic1)
},
// 移除图层
@@ -177,5 +179,4 @@
diff --git a/src/components/Map/components/supplyLayerCone.vue b/src/components/Map/components/supplyLayerCone.vue
new file mode 100644
index 0000000..de46f58
--- /dev/null
+++ b/src/components/Map/components/supplyLayerCone.vue
@@ -0,0 +1,169 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/threatLayer.vue b/src/components/Map/components/threatLayer.vue
index e354278..4b2295b 100644
--- a/src/components/Map/components/threatLayer.vue
+++ b/src/components/Map/components/threatLayer.vue
@@ -19,6 +19,10 @@
components: { ThreatDialog },
mixins: [commonMixin('layer')],
props: {
+ colorful: {
+ type: Boolean,
+ default: false
+ },
show: {
type: Boolean,
default: false
@@ -30,7 +34,28 @@
color: {
type: String,
default: '#FBFE2D'
- }
+ },
+ colorList: {
+ type: Array,
+ default: () => {
+ return ['#f33349', '#f79a2c', '#f2fa19', '#95e40c', '#1ffee6']
+ }
+ },
+ threatLevel: {
+ type: Object,
+ default: () => {
+ return {
+ '1': 'A级',
+ '2': 'B级',
+ '3': 'C级',
+ '4': '问题'
+ }
+ }
+ }, // 隐患等级
+ popupType: {
+ type: String,
+ default: 'dialog'
+ } // 详情弹出方式:dialog/ popupWindow
},
data() {
return {
@@ -40,7 +65,6 @@
},
watch: {
show(val) {
- console.log('watch show: ' + val)
if (val) {
this.initLayer()
} else {
@@ -51,27 +75,21 @@
methods: {
load() {
console.log('load')
+ if (this.show) {
+ this.initLayer()
+ }
},
initLayer() {
- const { mars3d, map } = this
+ const { map } = this
if (map) {
- if (this.show) {
- if (this.layer) {
- this.removeLayer()
- }
+ if (this.show && this.layer) {
+ this.removeLayer()
}
- const graphicLayer = new mars3d.layer.GraphicLayer()
- this.layer = graphicLayer
- map.addLayer(graphicLayer)
this.loadData()
}
},
loadData() {
- const { mars3d, type, layer } = this
- layer.on(mars3d.EventType.click, event => {
- console.log('监听layer,单击了矢量对象', event)
- this.$refs.threatDialog.initDialog(event.graphic.attr)
- })
+ const { type } = this
if (type === 'construction') {
axios.get('static/config/threat.json').then((res) => {
res = res.data
@@ -103,28 +121,60 @@
},
// 添加隐患点: type类型,arr数组, clr颜色
addFeatures() {
- const { mars3d, Cesium, layer, color, data } = this
- // 创建DIV数据图层\
+ const { mars3d, map, Cesium, color, data, type } = this
+ const graphicLayer = new mars3d.layer.GraphicLayer({ name: type })
+ console.log('add Layer ' + type)
+ this.layer = graphicLayer
+ this.layer.on(mars3d.EventType.click, event => {
+ console.log('点击隐患', event)
+ if (this.popupType === 'dialog') {
+ this.$refs.threatDialog.initDialog(event.graphic.attr)
+ }
+ })
+ if (this.popupType === 'popupWindow') {
+ this.layer.bindPopup(event => {
+ const item = event.graphic.attr
+ var html =
+ '位置描述:' +
+ item['位置描述'] +
+ '
村庄地址:' +
+ item['村庄地址'] +
+ '
发现人:' +
+ item['发现人'] +
+ '
隐患描述:' +
+ item['隐患描述'] +
+ '
创建时间:' +
+ item['创建时间'] +
+ '
隐患等级:' +
+ this.threatLevel[item['隐患等级']]
+ return html
+ })
+ }
+ console.log(this.layer)
+ map.addLayer(this.layer)
+ // 创建DIV数据图层
for (var i = 0, len = data.length; i < len; i++) {
const item = data[i]
var jd = item['经度']
var wd = item['纬度']
+ const level = parseInt(item['隐患等级']) - 1
+ const clr = this.colorful ? this.colorList[level] : color
var graphic = new mars3d.graphic.DivGraphic({
position: Cesium.Cartesian3.fromDegrees(jd, wd, 0),
style: {
- html: '
',
+ html: '
',
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 2000000) // 按视距距离显示
},
attr: item
})
- layer.addGraphic(graphic)
+ this.layer.addGraphic(graphic)
}
},
// 移除图层
removeLayer() {
const { map, layer } = this
- if (this.layer) {
- map.removeLayer(layer)
+ if (layer) {
+ map.removeLayer(this.layer, true)
this.layer = null
}
}
diff --git a/src/components/Map/components/vipLayer.vue b/src/components/Map/components/vipLayer.vue
new file mode 100644
index 0000000..154d153
--- /dev/null
+++ b/src/components/Map/components/vipLayer.vue
@@ -0,0 +1,150 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/weatherLayer.vue b/src/components/Map/components/weatherLayer.vue
index 98afe91..b9f2096 100644
--- a/src/components/Map/components/weatherLayer.vue
+++ b/src/components/Map/components/weatherLayer.vue
@@ -66,7 +66,8 @@
},
methods: {
load() {
- console.log('load')
+ console.log('load Weather Layer')
+ if(this.show) this.initLayer()
},
initLayer() {
const { mars3d, map } = this
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 4b4e27b..b69d5d4 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -220,3 +220,18 @@
}
}
}
+.mars3d-popup-background{
+ background-color: transparent !important;
+ background-image: url("../assets/global_images/popwin.png") !important;
+ background-repeat: no-repeat !important;
+ background-size: 100% 100% !important;
+}
+.mars3d-popup-tip-container{
+ display:none !important;
+}
+.mars3d-popup-content-wrapper{
+ box-shadow: none !important;
+ -webkit-box-shadow: none !important;
+ padding-top:10px !important;
+ padding-bottom: 10px !important;
+}
diff --git a/src/views/maps/constructionThreat.vue b/src/views/maps/constructionThreat.vue
index 246852f..eeea533 100644
--- a/src/views/maps/constructionThreat.vue
+++ b/src/views/maps/constructionThreat.vue
@@ -5,41 +5,37 @@
-->
-
-
-
-
-
-
-
-
-
-
-
-
-
+
-
-
+
+
+
+
diff --git a/src/components/Map/components/earthquakeLayer.vue b/src/components/Map/components/earthquakeLayer.vue
index e7efdc1..a4a0703 100644
--- a/src/components/Map/components/earthquakeLayer.vue
+++ b/src/components/Map/components/earthquakeLayer.vue
@@ -71,6 +71,7 @@
loadData() {
const { mars3d, Cesium, layer, height, size } = this
const date = getToday()
+ // const date = '2021-04-19'
getEarthquakeList(date).then((res) => {
if (res.data.length === 0) {
this.$message.info('今日无地震')
diff --git a/src/components/Map/components/hcaHeatLayer.vue b/src/components/Map/components/hcaHeatLayer.vue
index e4d3a21..9233d92 100644
--- a/src/components/Map/components/hcaHeatLayer.vue
+++ b/src/components/Map/components/hcaHeatLayer.vue
@@ -40,9 +40,10 @@
methods: {
load() {
console.log('load')
+ if (this.show) this.initLayer()
},
initLayer() {
- const { mars3d, map } = this
+ const { map } = this
if (map) {
if (this.show) {
if (this.layer) {
diff --git a/src/components/Map/components/hcaPointLayer.vue b/src/components/Map/components/hcaPointLayer.vue
new file mode 100644
index 0000000..b518699
--- /dev/null
+++ b/src/components/Map/components/hcaPointLayer.vue
@@ -0,0 +1,142 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/liquidFactoryLayer.vue b/src/components/Map/components/liquidFactoryLayer.vue
index 6845b93..3a1c0eb 100644
--- a/src/components/Map/components/liquidFactoryLayer.vue
+++ b/src/components/Map/components/liquidFactoryLayer.vue
@@ -72,15 +72,15 @@
}
},
loadData() {
- const { mars3d, layer } = this
+ const { mars3d, layer, height } = this
axios.get('static/config/liquidFactory.json').then((res) => {
res = res.data
if (res.code === 200) {
this.data = res.data[0].data
- for (const station of this.data) {
+ for (const item of this.data) {
const graphic = new mars3d.graphic.ModelEntity({
- name: station.name,
- position: [station.x, station.y, 0],
+ name: item.name,
+ position: [parseFloat(item.value[0]), parseFloat(item.value[1]), height],
url: 'static/gltf/output/yehuagongchang.gltf',
style: {
scale: 3,
@@ -88,7 +88,7 @@
minimumPixelSize: 30,
clampToGround: true
},
- tooltip: station.name
+ tooltip: item.name
})
layer.addGraphic(graphic)
}
diff --git a/src/components/Map/components/manageStationLayer.vue b/src/components/Map/components/manageStationLayer.vue
index c0aff38..7b976d6 100644
--- a/src/components/Map/components/manageStationLayer.vue
+++ b/src/components/Map/components/manageStationLayer.vue
@@ -56,6 +56,7 @@
methods: {
load() {
console.log('load')
+ if (this.show) this.initLayer()
},
initLayer() {
const { mars3d, map } = this
diff --git a/src/components/Map/components/needLayerCone.vue b/src/components/Map/components/needLayerCone.vue
new file mode 100644
index 0000000..373bf3c
--- /dev/null
+++ b/src/components/Map/components/needLayerCone.vue
@@ -0,0 +1,169 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/pipeLayer.vue b/src/components/Map/components/pipeLayer.vue
index 64142a7..0129de7 100644
--- a/src/components/Map/components/pipeLayer.vue
+++ b/src/components/Map/components/pipeLayer.vue
@@ -21,11 +21,11 @@
}, // 发光强度
opacity: {
type: Number,
- default: 0.9
+ default: 1
}, // 透明度
width: {
type: Number,
- default: 10
+ default: 5
}, // 线宽度
height: {
type: Number,
@@ -33,7 +33,7 @@
}, // 高度
color: {
type: String,
- default: '#92ffdf'
+ default: '#5affb2'
}, // 偏移值
show: {
type: Boolean,
@@ -69,10 +69,11 @@
}
this.layer = new mars3d.layer.GeoJsonLayer({
type: 'geojson',
- url: 'static/geojson/pipe.json',
+ url: 'static/geojson/pipe_old.json',
symbol: {
styleOptions: {
- materialType: 'PolylineGlow',
+ lineType: 'glow',
+ // materialType: 'LineFlicker',
glowPower: glowPower, // 发光强度
width: width, // 线宽
color: color,
@@ -83,7 +84,7 @@
show: true
})
map.addLayer(this.layer)
- this.loadData()
+ // this.loadData()
}
},
// 移除图层
diff --git a/src/components/Map/components/pipeLayer2.vue b/src/components/Map/components/pipeLayer2.vue
new file mode 100644
index 0000000..4f56b36
--- /dev/null
+++ b/src/components/Map/components/pipeLayer2.vue
@@ -0,0 +1,147 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/routeLayer.vue b/src/components/Map/components/routeLayer.vue
index 203bd89..15bb2a5 100644
--- a/src/components/Map/components/routeLayer.vue
+++ b/src/components/Map/components/routeLayer.vue
@@ -50,6 +50,9 @@
methods: {
load() {
console.log('load')
+ if(this.show){
+ this.initLayer()
+ }
},
initLayer() {
const { mars3d, map } = this
@@ -60,6 +63,19 @@
}
}
const graphicLayer = new mars3d.layer.DivLayer()
+ graphicLayer.on(mars3d.EventType.click, event => {
+ console.log('单击了巡检人员', event)
+ })
+ graphicLayer.bindPopup(event => {
+ const route = event.graphic.attr
+ const html =
+ '
姓名:' + route.name +
+ '
电话:' + route['phone'] +
+ '
岗位:' + route['duty'] +
+ '
站名:' + route['unitname'] +
+ '
时间:' + route.locationdate + '
'
+ return html
+ })
this.layer = graphicLayer
map.addLayer(graphicLayer)
this.loadData()
@@ -77,11 +93,11 @@
lat: parseFloat(item['WD60_06']),
locationdate: item['WD60_04'],
time: new Date(item['WD60_04']),
- duty: item['WD60_11'],
- sex: item['WD60_09'],
- phone: item['WD60_10'],
- idcard: item['WD60_12'],
- unitname: item['WD60_08']
+ duty: item['WD60_11'] === null ? '' : item['WD60_11'],
+ sex: item['WD60_09'] === null ? '' : item['WD60_09'],
+ phone: item['WD60_10'] === null ? '' : item['WD60_10'],
+ idcard: item['WD60_12'] === null ? '' : item['WD60_12'],
+ unitname: item['WD60_08'] === null ? '' : item['WD60_08']
}
})
this.filteredData = []
diff --git a/src/components/Map/components/supplyLayer.vue b/src/components/Map/components/supplyLayer.vue
index 583e546..7fdbe56 100644
--- a/src/components/Map/components/supplyLayer.vue
+++ b/src/components/Map/components/supplyLayer.vue
@@ -1,10 +1,10 @@
-
+
@@ -134,7 +134,8 @@
const graphics = layer.graphics
for (const graphic of graphics) {
if (graphic.name === city) {
- graphic.openTooltip()
+ // graphic.openTooltip()
+ graphic.openPopup()
}
}
},
@@ -161,7 +162,8 @@
})
}
})
- graphic1.bindTooltip(html)
+ // graphic1.bindTooltip(html)
+ graphic1.bindPopup(html)
layer.addGraphic(graphic1)
},
// 移除图层
@@ -177,5 +179,4 @@
diff --git a/src/components/Map/components/supplyLayerCone.vue b/src/components/Map/components/supplyLayerCone.vue
new file mode 100644
index 0000000..de46f58
--- /dev/null
+++ b/src/components/Map/components/supplyLayerCone.vue
@@ -0,0 +1,169 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/threatLayer.vue b/src/components/Map/components/threatLayer.vue
index e354278..4b2295b 100644
--- a/src/components/Map/components/threatLayer.vue
+++ b/src/components/Map/components/threatLayer.vue
@@ -19,6 +19,10 @@
components: { ThreatDialog },
mixins: [commonMixin('layer')],
props: {
+ colorful: {
+ type: Boolean,
+ default: false
+ },
show: {
type: Boolean,
default: false
@@ -30,7 +34,28 @@
color: {
type: String,
default: '#FBFE2D'
- }
+ },
+ colorList: {
+ type: Array,
+ default: () => {
+ return ['#f33349', '#f79a2c', '#f2fa19', '#95e40c', '#1ffee6']
+ }
+ },
+ threatLevel: {
+ type: Object,
+ default: () => {
+ return {
+ '1': 'A级',
+ '2': 'B级',
+ '3': 'C级',
+ '4': '问题'
+ }
+ }
+ }, // 隐患等级
+ popupType: {
+ type: String,
+ default: 'dialog'
+ } // 详情弹出方式:dialog/ popupWindow
},
data() {
return {
@@ -40,7 +65,6 @@
},
watch: {
show(val) {
- console.log('watch show: ' + val)
if (val) {
this.initLayer()
} else {
@@ -51,27 +75,21 @@
methods: {
load() {
console.log('load')
+ if (this.show) {
+ this.initLayer()
+ }
},
initLayer() {
- const { mars3d, map } = this
+ const { map } = this
if (map) {
- if (this.show) {
- if (this.layer) {
- this.removeLayer()
- }
+ if (this.show && this.layer) {
+ this.removeLayer()
}
- const graphicLayer = new mars3d.layer.GraphicLayer()
- this.layer = graphicLayer
- map.addLayer(graphicLayer)
this.loadData()
}
},
loadData() {
- const { mars3d, type, layer } = this
- layer.on(mars3d.EventType.click, event => {
- console.log('监听layer,单击了矢量对象', event)
- this.$refs.threatDialog.initDialog(event.graphic.attr)
- })
+ const { type } = this
if (type === 'construction') {
axios.get('static/config/threat.json').then((res) => {
res = res.data
@@ -103,28 +121,60 @@
},
// 添加隐患点: type类型,arr数组, clr颜色
addFeatures() {
- const { mars3d, Cesium, layer, color, data } = this
- // 创建DIV数据图层\
+ const { mars3d, map, Cesium, color, data, type } = this
+ const graphicLayer = new mars3d.layer.GraphicLayer({ name: type })
+ console.log('add Layer ' + type)
+ this.layer = graphicLayer
+ this.layer.on(mars3d.EventType.click, event => {
+ console.log('点击隐患', event)
+ if (this.popupType === 'dialog') {
+ this.$refs.threatDialog.initDialog(event.graphic.attr)
+ }
+ })
+ if (this.popupType === 'popupWindow') {
+ this.layer.bindPopup(event => {
+ const item = event.graphic.attr
+ var html =
+ '位置描述:' +
+ item['位置描述'] +
+ '
村庄地址:' +
+ item['村庄地址'] +
+ '
发现人:' +
+ item['发现人'] +
+ '
隐患描述:' +
+ item['隐患描述'] +
+ '
创建时间:' +
+ item['创建时间'] +
+ '
隐患等级:' +
+ this.threatLevel[item['隐患等级']]
+ return html
+ })
+ }
+ console.log(this.layer)
+ map.addLayer(this.layer)
+ // 创建DIV数据图层
for (var i = 0, len = data.length; i < len; i++) {
const item = data[i]
var jd = item['经度']
var wd = item['纬度']
+ const level = parseInt(item['隐患等级']) - 1
+ const clr = this.colorful ? this.colorList[level] : color
var graphic = new mars3d.graphic.DivGraphic({
position: Cesium.Cartesian3.fromDegrees(jd, wd, 0),
style: {
- html: '
',
+ html: '
',
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 2000000) // 按视距距离显示
},
attr: item
})
- layer.addGraphic(graphic)
+ this.layer.addGraphic(graphic)
}
},
// 移除图层
removeLayer() {
const { map, layer } = this
- if (this.layer) {
- map.removeLayer(layer)
+ if (layer) {
+ map.removeLayer(this.layer, true)
this.layer = null
}
}
diff --git a/src/components/Map/components/vipLayer.vue b/src/components/Map/components/vipLayer.vue
new file mode 100644
index 0000000..154d153
--- /dev/null
+++ b/src/components/Map/components/vipLayer.vue
@@ -0,0 +1,150 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/weatherLayer.vue b/src/components/Map/components/weatherLayer.vue
index 98afe91..b9f2096 100644
--- a/src/components/Map/components/weatherLayer.vue
+++ b/src/components/Map/components/weatherLayer.vue
@@ -66,7 +66,8 @@
},
methods: {
load() {
- console.log('load')
+ console.log('load Weather Layer')
+ if(this.show) this.initLayer()
},
initLayer() {
const { mars3d, map } = this
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 4b4e27b..b69d5d4 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -220,3 +220,18 @@
}
}
}
+.mars3d-popup-background{
+ background-color: transparent !important;
+ background-image: url("../assets/global_images/popwin.png") !important;
+ background-repeat: no-repeat !important;
+ background-size: 100% 100% !important;
+}
+.mars3d-popup-tip-container{
+ display:none !important;
+}
+.mars3d-popup-content-wrapper{
+ box-shadow: none !important;
+ -webkit-box-shadow: none !important;
+ padding-top:10px !important;
+ padding-bottom: 10px !important;
+}
diff --git a/src/views/maps/constructionThreat.vue b/src/views/maps/constructionThreat.vue
index 246852f..eeea533 100644
--- a/src/views/maps/constructionThreat.vue
+++ b/src/views/maps/constructionThreat.vue
@@ -5,41 +5,37 @@
-->
-
-
-
-
-
-
-
-
-
-
-
-
-
+
-
-
+
+
+
+
diff --git a/src/components/Map/components/earthquakeLayer.vue b/src/components/Map/components/earthquakeLayer.vue
index e7efdc1..a4a0703 100644
--- a/src/components/Map/components/earthquakeLayer.vue
+++ b/src/components/Map/components/earthquakeLayer.vue
@@ -71,6 +71,7 @@
loadData() {
const { mars3d, Cesium, layer, height, size } = this
const date = getToday()
+ // const date = '2021-04-19'
getEarthquakeList(date).then((res) => {
if (res.data.length === 0) {
this.$message.info('今日无地震')
diff --git a/src/components/Map/components/hcaHeatLayer.vue b/src/components/Map/components/hcaHeatLayer.vue
index e4d3a21..9233d92 100644
--- a/src/components/Map/components/hcaHeatLayer.vue
+++ b/src/components/Map/components/hcaHeatLayer.vue
@@ -40,9 +40,10 @@
methods: {
load() {
console.log('load')
+ if (this.show) this.initLayer()
},
initLayer() {
- const { mars3d, map } = this
+ const { map } = this
if (map) {
if (this.show) {
if (this.layer) {
diff --git a/src/components/Map/components/hcaPointLayer.vue b/src/components/Map/components/hcaPointLayer.vue
new file mode 100644
index 0000000..b518699
--- /dev/null
+++ b/src/components/Map/components/hcaPointLayer.vue
@@ -0,0 +1,142 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/liquidFactoryLayer.vue b/src/components/Map/components/liquidFactoryLayer.vue
index 6845b93..3a1c0eb 100644
--- a/src/components/Map/components/liquidFactoryLayer.vue
+++ b/src/components/Map/components/liquidFactoryLayer.vue
@@ -72,15 +72,15 @@
}
},
loadData() {
- const { mars3d, layer } = this
+ const { mars3d, layer, height } = this
axios.get('static/config/liquidFactory.json').then((res) => {
res = res.data
if (res.code === 200) {
this.data = res.data[0].data
- for (const station of this.data) {
+ for (const item of this.data) {
const graphic = new mars3d.graphic.ModelEntity({
- name: station.name,
- position: [station.x, station.y, 0],
+ name: item.name,
+ position: [parseFloat(item.value[0]), parseFloat(item.value[1]), height],
url: 'static/gltf/output/yehuagongchang.gltf',
style: {
scale: 3,
@@ -88,7 +88,7 @@
minimumPixelSize: 30,
clampToGround: true
},
- tooltip: station.name
+ tooltip: item.name
})
layer.addGraphic(graphic)
}
diff --git a/src/components/Map/components/manageStationLayer.vue b/src/components/Map/components/manageStationLayer.vue
index c0aff38..7b976d6 100644
--- a/src/components/Map/components/manageStationLayer.vue
+++ b/src/components/Map/components/manageStationLayer.vue
@@ -56,6 +56,7 @@
methods: {
load() {
console.log('load')
+ if (this.show) this.initLayer()
},
initLayer() {
const { mars3d, map } = this
diff --git a/src/components/Map/components/needLayerCone.vue b/src/components/Map/components/needLayerCone.vue
new file mode 100644
index 0000000..373bf3c
--- /dev/null
+++ b/src/components/Map/components/needLayerCone.vue
@@ -0,0 +1,169 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/pipeLayer.vue b/src/components/Map/components/pipeLayer.vue
index 64142a7..0129de7 100644
--- a/src/components/Map/components/pipeLayer.vue
+++ b/src/components/Map/components/pipeLayer.vue
@@ -21,11 +21,11 @@
}, // 发光强度
opacity: {
type: Number,
- default: 0.9
+ default: 1
}, // 透明度
width: {
type: Number,
- default: 10
+ default: 5
}, // 线宽度
height: {
type: Number,
@@ -33,7 +33,7 @@
}, // 高度
color: {
type: String,
- default: '#92ffdf'
+ default: '#5affb2'
}, // 偏移值
show: {
type: Boolean,
@@ -69,10 +69,11 @@
}
this.layer = new mars3d.layer.GeoJsonLayer({
type: 'geojson',
- url: 'static/geojson/pipe.json',
+ url: 'static/geojson/pipe_old.json',
symbol: {
styleOptions: {
- materialType: 'PolylineGlow',
+ lineType: 'glow',
+ // materialType: 'LineFlicker',
glowPower: glowPower, // 发光强度
width: width, // 线宽
color: color,
@@ -83,7 +84,7 @@
show: true
})
map.addLayer(this.layer)
- this.loadData()
+ // this.loadData()
}
},
// 移除图层
diff --git a/src/components/Map/components/pipeLayer2.vue b/src/components/Map/components/pipeLayer2.vue
new file mode 100644
index 0000000..4f56b36
--- /dev/null
+++ b/src/components/Map/components/pipeLayer2.vue
@@ -0,0 +1,147 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/routeLayer.vue b/src/components/Map/components/routeLayer.vue
index 203bd89..15bb2a5 100644
--- a/src/components/Map/components/routeLayer.vue
+++ b/src/components/Map/components/routeLayer.vue
@@ -50,6 +50,9 @@
methods: {
load() {
console.log('load')
+ if(this.show){
+ this.initLayer()
+ }
},
initLayer() {
const { mars3d, map } = this
@@ -60,6 +63,19 @@
}
}
const graphicLayer = new mars3d.layer.DivLayer()
+ graphicLayer.on(mars3d.EventType.click, event => {
+ console.log('单击了巡检人员', event)
+ })
+ graphicLayer.bindPopup(event => {
+ const route = event.graphic.attr
+ const html =
+ '
姓名:' + route.name +
+ '
电话:' + route['phone'] +
+ '
岗位:' + route['duty'] +
+ '
站名:' + route['unitname'] +
+ '
时间:' + route.locationdate + '
'
+ return html
+ })
this.layer = graphicLayer
map.addLayer(graphicLayer)
this.loadData()
@@ -77,11 +93,11 @@
lat: parseFloat(item['WD60_06']),
locationdate: item['WD60_04'],
time: new Date(item['WD60_04']),
- duty: item['WD60_11'],
- sex: item['WD60_09'],
- phone: item['WD60_10'],
- idcard: item['WD60_12'],
- unitname: item['WD60_08']
+ duty: item['WD60_11'] === null ? '' : item['WD60_11'],
+ sex: item['WD60_09'] === null ? '' : item['WD60_09'],
+ phone: item['WD60_10'] === null ? '' : item['WD60_10'],
+ idcard: item['WD60_12'] === null ? '' : item['WD60_12'],
+ unitname: item['WD60_08'] === null ? '' : item['WD60_08']
}
})
this.filteredData = []
diff --git a/src/components/Map/components/supplyLayer.vue b/src/components/Map/components/supplyLayer.vue
index 583e546..7fdbe56 100644
--- a/src/components/Map/components/supplyLayer.vue
+++ b/src/components/Map/components/supplyLayer.vue
@@ -1,10 +1,10 @@
-
+
@@ -134,7 +134,8 @@
const graphics = layer.graphics
for (const graphic of graphics) {
if (graphic.name === city) {
- graphic.openTooltip()
+ // graphic.openTooltip()
+ graphic.openPopup()
}
}
},
@@ -161,7 +162,8 @@
})
}
})
- graphic1.bindTooltip(html)
+ // graphic1.bindTooltip(html)
+ graphic1.bindPopup(html)
layer.addGraphic(graphic1)
},
// 移除图层
@@ -177,5 +179,4 @@
diff --git a/src/components/Map/components/supplyLayerCone.vue b/src/components/Map/components/supplyLayerCone.vue
new file mode 100644
index 0000000..de46f58
--- /dev/null
+++ b/src/components/Map/components/supplyLayerCone.vue
@@ -0,0 +1,169 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/threatLayer.vue b/src/components/Map/components/threatLayer.vue
index e354278..4b2295b 100644
--- a/src/components/Map/components/threatLayer.vue
+++ b/src/components/Map/components/threatLayer.vue
@@ -19,6 +19,10 @@
components: { ThreatDialog },
mixins: [commonMixin('layer')],
props: {
+ colorful: {
+ type: Boolean,
+ default: false
+ },
show: {
type: Boolean,
default: false
@@ -30,7 +34,28 @@
color: {
type: String,
default: '#FBFE2D'
- }
+ },
+ colorList: {
+ type: Array,
+ default: () => {
+ return ['#f33349', '#f79a2c', '#f2fa19', '#95e40c', '#1ffee6']
+ }
+ },
+ threatLevel: {
+ type: Object,
+ default: () => {
+ return {
+ '1': 'A级',
+ '2': 'B级',
+ '3': 'C级',
+ '4': '问题'
+ }
+ }
+ }, // 隐患等级
+ popupType: {
+ type: String,
+ default: 'dialog'
+ } // 详情弹出方式:dialog/ popupWindow
},
data() {
return {
@@ -40,7 +65,6 @@
},
watch: {
show(val) {
- console.log('watch show: ' + val)
if (val) {
this.initLayer()
} else {
@@ -51,27 +75,21 @@
methods: {
load() {
console.log('load')
+ if (this.show) {
+ this.initLayer()
+ }
},
initLayer() {
- const { mars3d, map } = this
+ const { map } = this
if (map) {
- if (this.show) {
- if (this.layer) {
- this.removeLayer()
- }
+ if (this.show && this.layer) {
+ this.removeLayer()
}
- const graphicLayer = new mars3d.layer.GraphicLayer()
- this.layer = graphicLayer
- map.addLayer(graphicLayer)
this.loadData()
}
},
loadData() {
- const { mars3d, type, layer } = this
- layer.on(mars3d.EventType.click, event => {
- console.log('监听layer,单击了矢量对象', event)
- this.$refs.threatDialog.initDialog(event.graphic.attr)
- })
+ const { type } = this
if (type === 'construction') {
axios.get('static/config/threat.json').then((res) => {
res = res.data
@@ -103,28 +121,60 @@
},
// 添加隐患点: type类型,arr数组, clr颜色
addFeatures() {
- const { mars3d, Cesium, layer, color, data } = this
- // 创建DIV数据图层\
+ const { mars3d, map, Cesium, color, data, type } = this
+ const graphicLayer = new mars3d.layer.GraphicLayer({ name: type })
+ console.log('add Layer ' + type)
+ this.layer = graphicLayer
+ this.layer.on(mars3d.EventType.click, event => {
+ console.log('点击隐患', event)
+ if (this.popupType === 'dialog') {
+ this.$refs.threatDialog.initDialog(event.graphic.attr)
+ }
+ })
+ if (this.popupType === 'popupWindow') {
+ this.layer.bindPopup(event => {
+ const item = event.graphic.attr
+ var html =
+ '位置描述:' +
+ item['位置描述'] +
+ '
村庄地址:' +
+ item['村庄地址'] +
+ '
发现人:' +
+ item['发现人'] +
+ '
隐患描述:' +
+ item['隐患描述'] +
+ '
创建时间:' +
+ item['创建时间'] +
+ '
隐患等级:' +
+ this.threatLevel[item['隐患等级']]
+ return html
+ })
+ }
+ console.log(this.layer)
+ map.addLayer(this.layer)
+ // 创建DIV数据图层
for (var i = 0, len = data.length; i < len; i++) {
const item = data[i]
var jd = item['经度']
var wd = item['纬度']
+ const level = parseInt(item['隐患等级']) - 1
+ const clr = this.colorful ? this.colorList[level] : color
var graphic = new mars3d.graphic.DivGraphic({
position: Cesium.Cartesian3.fromDegrees(jd, wd, 0),
style: {
- html: '
',
+ html: '
',
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 2000000) // 按视距距离显示
},
attr: item
})
- layer.addGraphic(graphic)
+ this.layer.addGraphic(graphic)
}
},
// 移除图层
removeLayer() {
const { map, layer } = this
- if (this.layer) {
- map.removeLayer(layer)
+ if (layer) {
+ map.removeLayer(this.layer, true)
this.layer = null
}
}
diff --git a/src/components/Map/components/vipLayer.vue b/src/components/Map/components/vipLayer.vue
new file mode 100644
index 0000000..154d153
--- /dev/null
+++ b/src/components/Map/components/vipLayer.vue
@@ -0,0 +1,150 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/weatherLayer.vue b/src/components/Map/components/weatherLayer.vue
index 98afe91..b9f2096 100644
--- a/src/components/Map/components/weatherLayer.vue
+++ b/src/components/Map/components/weatherLayer.vue
@@ -66,7 +66,8 @@
},
methods: {
load() {
- console.log('load')
+ console.log('load Weather Layer')
+ if(this.show) this.initLayer()
},
initLayer() {
const { mars3d, map } = this
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 4b4e27b..b69d5d4 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -220,3 +220,18 @@
}
}
}
+.mars3d-popup-background{
+ background-color: transparent !important;
+ background-image: url("../assets/global_images/popwin.png") !important;
+ background-repeat: no-repeat !important;
+ background-size: 100% 100% !important;
+}
+.mars3d-popup-tip-container{
+ display:none !important;
+}
+.mars3d-popup-content-wrapper{
+ box-shadow: none !important;
+ -webkit-box-shadow: none !important;
+ padding-top:10px !important;
+ padding-bottom: 10px !important;
+}
diff --git a/src/views/maps/constructionThreat.vue b/src/views/maps/constructionThreat.vue
index 246852f..eeea533 100644
--- a/src/views/maps/constructionThreat.vue
+++ b/src/views/maps/constructionThreat.vue
@@ -5,41 +5,37 @@
-->
-
-
-
-
-
-
-
-
-
-
-
-
-
+
-
-
+
+
+
+
diff --git a/src/components/Map/components/earthquakeLayer.vue b/src/components/Map/components/earthquakeLayer.vue
index e7efdc1..a4a0703 100644
--- a/src/components/Map/components/earthquakeLayer.vue
+++ b/src/components/Map/components/earthquakeLayer.vue
@@ -71,6 +71,7 @@
loadData() {
const { mars3d, Cesium, layer, height, size } = this
const date = getToday()
+ // const date = '2021-04-19'
getEarthquakeList(date).then((res) => {
if (res.data.length === 0) {
this.$message.info('今日无地震')
diff --git a/src/components/Map/components/hcaHeatLayer.vue b/src/components/Map/components/hcaHeatLayer.vue
index e4d3a21..9233d92 100644
--- a/src/components/Map/components/hcaHeatLayer.vue
+++ b/src/components/Map/components/hcaHeatLayer.vue
@@ -40,9 +40,10 @@
methods: {
load() {
console.log('load')
+ if (this.show) this.initLayer()
},
initLayer() {
- const { mars3d, map } = this
+ const { map } = this
if (map) {
if (this.show) {
if (this.layer) {
diff --git a/src/components/Map/components/hcaPointLayer.vue b/src/components/Map/components/hcaPointLayer.vue
new file mode 100644
index 0000000..b518699
--- /dev/null
+++ b/src/components/Map/components/hcaPointLayer.vue
@@ -0,0 +1,142 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/liquidFactoryLayer.vue b/src/components/Map/components/liquidFactoryLayer.vue
index 6845b93..3a1c0eb 100644
--- a/src/components/Map/components/liquidFactoryLayer.vue
+++ b/src/components/Map/components/liquidFactoryLayer.vue
@@ -72,15 +72,15 @@
}
},
loadData() {
- const { mars3d, layer } = this
+ const { mars3d, layer, height } = this
axios.get('static/config/liquidFactory.json').then((res) => {
res = res.data
if (res.code === 200) {
this.data = res.data[0].data
- for (const station of this.data) {
+ for (const item of this.data) {
const graphic = new mars3d.graphic.ModelEntity({
- name: station.name,
- position: [station.x, station.y, 0],
+ name: item.name,
+ position: [parseFloat(item.value[0]), parseFloat(item.value[1]), height],
url: 'static/gltf/output/yehuagongchang.gltf',
style: {
scale: 3,
@@ -88,7 +88,7 @@
minimumPixelSize: 30,
clampToGround: true
},
- tooltip: station.name
+ tooltip: item.name
})
layer.addGraphic(graphic)
}
diff --git a/src/components/Map/components/manageStationLayer.vue b/src/components/Map/components/manageStationLayer.vue
index c0aff38..7b976d6 100644
--- a/src/components/Map/components/manageStationLayer.vue
+++ b/src/components/Map/components/manageStationLayer.vue
@@ -56,6 +56,7 @@
methods: {
load() {
console.log('load')
+ if (this.show) this.initLayer()
},
initLayer() {
const { mars3d, map } = this
diff --git a/src/components/Map/components/needLayerCone.vue b/src/components/Map/components/needLayerCone.vue
new file mode 100644
index 0000000..373bf3c
--- /dev/null
+++ b/src/components/Map/components/needLayerCone.vue
@@ -0,0 +1,169 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/pipeLayer.vue b/src/components/Map/components/pipeLayer.vue
index 64142a7..0129de7 100644
--- a/src/components/Map/components/pipeLayer.vue
+++ b/src/components/Map/components/pipeLayer.vue
@@ -21,11 +21,11 @@
}, // 发光强度
opacity: {
type: Number,
- default: 0.9
+ default: 1
}, // 透明度
width: {
type: Number,
- default: 10
+ default: 5
}, // 线宽度
height: {
type: Number,
@@ -33,7 +33,7 @@
}, // 高度
color: {
type: String,
- default: '#92ffdf'
+ default: '#5affb2'
}, // 偏移值
show: {
type: Boolean,
@@ -69,10 +69,11 @@
}
this.layer = new mars3d.layer.GeoJsonLayer({
type: 'geojson',
- url: 'static/geojson/pipe.json',
+ url: 'static/geojson/pipe_old.json',
symbol: {
styleOptions: {
- materialType: 'PolylineGlow',
+ lineType: 'glow',
+ // materialType: 'LineFlicker',
glowPower: glowPower, // 发光强度
width: width, // 线宽
color: color,
@@ -83,7 +84,7 @@
show: true
})
map.addLayer(this.layer)
- this.loadData()
+ // this.loadData()
}
},
// 移除图层
diff --git a/src/components/Map/components/pipeLayer2.vue b/src/components/Map/components/pipeLayer2.vue
new file mode 100644
index 0000000..4f56b36
--- /dev/null
+++ b/src/components/Map/components/pipeLayer2.vue
@@ -0,0 +1,147 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/routeLayer.vue b/src/components/Map/components/routeLayer.vue
index 203bd89..15bb2a5 100644
--- a/src/components/Map/components/routeLayer.vue
+++ b/src/components/Map/components/routeLayer.vue
@@ -50,6 +50,9 @@
methods: {
load() {
console.log('load')
+ if(this.show){
+ this.initLayer()
+ }
},
initLayer() {
const { mars3d, map } = this
@@ -60,6 +63,19 @@
}
}
const graphicLayer = new mars3d.layer.DivLayer()
+ graphicLayer.on(mars3d.EventType.click, event => {
+ console.log('单击了巡检人员', event)
+ })
+ graphicLayer.bindPopup(event => {
+ const route = event.graphic.attr
+ const html =
+ '
姓名:' + route.name +
+ '
电话:' + route['phone'] +
+ '
岗位:' + route['duty'] +
+ '
站名:' + route['unitname'] +
+ '
时间:' + route.locationdate + '
'
+ return html
+ })
this.layer = graphicLayer
map.addLayer(graphicLayer)
this.loadData()
@@ -77,11 +93,11 @@
lat: parseFloat(item['WD60_06']),
locationdate: item['WD60_04'],
time: new Date(item['WD60_04']),
- duty: item['WD60_11'],
- sex: item['WD60_09'],
- phone: item['WD60_10'],
- idcard: item['WD60_12'],
- unitname: item['WD60_08']
+ duty: item['WD60_11'] === null ? '' : item['WD60_11'],
+ sex: item['WD60_09'] === null ? '' : item['WD60_09'],
+ phone: item['WD60_10'] === null ? '' : item['WD60_10'],
+ idcard: item['WD60_12'] === null ? '' : item['WD60_12'],
+ unitname: item['WD60_08'] === null ? '' : item['WD60_08']
}
})
this.filteredData = []
diff --git a/src/components/Map/components/supplyLayer.vue b/src/components/Map/components/supplyLayer.vue
index 583e546..7fdbe56 100644
--- a/src/components/Map/components/supplyLayer.vue
+++ b/src/components/Map/components/supplyLayer.vue
@@ -1,10 +1,10 @@
-
+
@@ -134,7 +134,8 @@
const graphics = layer.graphics
for (const graphic of graphics) {
if (graphic.name === city) {
- graphic.openTooltip()
+ // graphic.openTooltip()
+ graphic.openPopup()
}
}
},
@@ -161,7 +162,8 @@
})
}
})
- graphic1.bindTooltip(html)
+ // graphic1.bindTooltip(html)
+ graphic1.bindPopup(html)
layer.addGraphic(graphic1)
},
// 移除图层
@@ -177,5 +179,4 @@
diff --git a/src/components/Map/components/supplyLayerCone.vue b/src/components/Map/components/supplyLayerCone.vue
new file mode 100644
index 0000000..de46f58
--- /dev/null
+++ b/src/components/Map/components/supplyLayerCone.vue
@@ -0,0 +1,169 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/threatLayer.vue b/src/components/Map/components/threatLayer.vue
index e354278..4b2295b 100644
--- a/src/components/Map/components/threatLayer.vue
+++ b/src/components/Map/components/threatLayer.vue
@@ -19,6 +19,10 @@
components: { ThreatDialog },
mixins: [commonMixin('layer')],
props: {
+ colorful: {
+ type: Boolean,
+ default: false
+ },
show: {
type: Boolean,
default: false
@@ -30,7 +34,28 @@
color: {
type: String,
default: '#FBFE2D'
- }
+ },
+ colorList: {
+ type: Array,
+ default: () => {
+ return ['#f33349', '#f79a2c', '#f2fa19', '#95e40c', '#1ffee6']
+ }
+ },
+ threatLevel: {
+ type: Object,
+ default: () => {
+ return {
+ '1': 'A级',
+ '2': 'B级',
+ '3': 'C级',
+ '4': '问题'
+ }
+ }
+ }, // 隐患等级
+ popupType: {
+ type: String,
+ default: 'dialog'
+ } // 详情弹出方式:dialog/ popupWindow
},
data() {
return {
@@ -40,7 +65,6 @@
},
watch: {
show(val) {
- console.log('watch show: ' + val)
if (val) {
this.initLayer()
} else {
@@ -51,27 +75,21 @@
methods: {
load() {
console.log('load')
+ if (this.show) {
+ this.initLayer()
+ }
},
initLayer() {
- const { mars3d, map } = this
+ const { map } = this
if (map) {
- if (this.show) {
- if (this.layer) {
- this.removeLayer()
- }
+ if (this.show && this.layer) {
+ this.removeLayer()
}
- const graphicLayer = new mars3d.layer.GraphicLayer()
- this.layer = graphicLayer
- map.addLayer(graphicLayer)
this.loadData()
}
},
loadData() {
- const { mars3d, type, layer } = this
- layer.on(mars3d.EventType.click, event => {
- console.log('监听layer,单击了矢量对象', event)
- this.$refs.threatDialog.initDialog(event.graphic.attr)
- })
+ const { type } = this
if (type === 'construction') {
axios.get('static/config/threat.json').then((res) => {
res = res.data
@@ -103,28 +121,60 @@
},
// 添加隐患点: type类型,arr数组, clr颜色
addFeatures() {
- const { mars3d, Cesium, layer, color, data } = this
- // 创建DIV数据图层\
+ const { mars3d, map, Cesium, color, data, type } = this
+ const graphicLayer = new mars3d.layer.GraphicLayer({ name: type })
+ console.log('add Layer ' + type)
+ this.layer = graphicLayer
+ this.layer.on(mars3d.EventType.click, event => {
+ console.log('点击隐患', event)
+ if (this.popupType === 'dialog') {
+ this.$refs.threatDialog.initDialog(event.graphic.attr)
+ }
+ })
+ if (this.popupType === 'popupWindow') {
+ this.layer.bindPopup(event => {
+ const item = event.graphic.attr
+ var html =
+ '位置描述:' +
+ item['位置描述'] +
+ '
村庄地址:' +
+ item['村庄地址'] +
+ '
发现人:' +
+ item['发现人'] +
+ '
隐患描述:' +
+ item['隐患描述'] +
+ '
创建时间:' +
+ item['创建时间'] +
+ '
隐患等级:' +
+ this.threatLevel[item['隐患等级']]
+ return html
+ })
+ }
+ console.log(this.layer)
+ map.addLayer(this.layer)
+ // 创建DIV数据图层
for (var i = 0, len = data.length; i < len; i++) {
const item = data[i]
var jd = item['经度']
var wd = item['纬度']
+ const level = parseInt(item['隐患等级']) - 1
+ const clr = this.colorful ? this.colorList[level] : color
var graphic = new mars3d.graphic.DivGraphic({
position: Cesium.Cartesian3.fromDegrees(jd, wd, 0),
style: {
- html: '
',
+ html: '
',
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 2000000) // 按视距距离显示
},
attr: item
})
- layer.addGraphic(graphic)
+ this.layer.addGraphic(graphic)
}
},
// 移除图层
removeLayer() {
const { map, layer } = this
- if (this.layer) {
- map.removeLayer(layer)
+ if (layer) {
+ map.removeLayer(this.layer, true)
this.layer = null
}
}
diff --git a/src/components/Map/components/vipLayer.vue b/src/components/Map/components/vipLayer.vue
new file mode 100644
index 0000000..154d153
--- /dev/null
+++ b/src/components/Map/components/vipLayer.vue
@@ -0,0 +1,150 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/weatherLayer.vue b/src/components/Map/components/weatherLayer.vue
index 98afe91..b9f2096 100644
--- a/src/components/Map/components/weatherLayer.vue
+++ b/src/components/Map/components/weatherLayer.vue
@@ -66,7 +66,8 @@
},
methods: {
load() {
- console.log('load')
+ console.log('load Weather Layer')
+ if(this.show) this.initLayer()
},
initLayer() {
const { mars3d, map } = this
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 4b4e27b..b69d5d4 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -220,3 +220,18 @@
}
}
}
+.mars3d-popup-background{
+ background-color: transparent !important;
+ background-image: url("../assets/global_images/popwin.png") !important;
+ background-repeat: no-repeat !important;
+ background-size: 100% 100% !important;
+}
+.mars3d-popup-tip-container{
+ display:none !important;
+}
+.mars3d-popup-content-wrapper{
+ box-shadow: none !important;
+ -webkit-box-shadow: none !important;
+ padding-top:10px !important;
+ padding-bottom: 10px !important;
+}
diff --git a/src/views/maps/constructionThreat.vue b/src/views/maps/constructionThreat.vue
index 246852f..eeea533 100644
--- a/src/views/maps/constructionThreat.vue
+++ b/src/views/maps/constructionThreat.vue
@@ -5,41 +5,37 @@
-->
-
-
-
-
-
-
-
-
-
-
-
-
-
+
-
-
+
+
+
+
diff --git a/src/components/Map/components/earthquakeLayer.vue b/src/components/Map/components/earthquakeLayer.vue
index e7efdc1..a4a0703 100644
--- a/src/components/Map/components/earthquakeLayer.vue
+++ b/src/components/Map/components/earthquakeLayer.vue
@@ -71,6 +71,7 @@
loadData() {
const { mars3d, Cesium, layer, height, size } = this
const date = getToday()
+ // const date = '2021-04-19'
getEarthquakeList(date).then((res) => {
if (res.data.length === 0) {
this.$message.info('今日无地震')
diff --git a/src/components/Map/components/hcaHeatLayer.vue b/src/components/Map/components/hcaHeatLayer.vue
index e4d3a21..9233d92 100644
--- a/src/components/Map/components/hcaHeatLayer.vue
+++ b/src/components/Map/components/hcaHeatLayer.vue
@@ -40,9 +40,10 @@
methods: {
load() {
console.log('load')
+ if (this.show) this.initLayer()
},
initLayer() {
- const { mars3d, map } = this
+ const { map } = this
if (map) {
if (this.show) {
if (this.layer) {
diff --git a/src/components/Map/components/hcaPointLayer.vue b/src/components/Map/components/hcaPointLayer.vue
new file mode 100644
index 0000000..b518699
--- /dev/null
+++ b/src/components/Map/components/hcaPointLayer.vue
@@ -0,0 +1,142 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/liquidFactoryLayer.vue b/src/components/Map/components/liquidFactoryLayer.vue
index 6845b93..3a1c0eb 100644
--- a/src/components/Map/components/liquidFactoryLayer.vue
+++ b/src/components/Map/components/liquidFactoryLayer.vue
@@ -72,15 +72,15 @@
}
},
loadData() {
- const { mars3d, layer } = this
+ const { mars3d, layer, height } = this
axios.get('static/config/liquidFactory.json').then((res) => {
res = res.data
if (res.code === 200) {
this.data = res.data[0].data
- for (const station of this.data) {
+ for (const item of this.data) {
const graphic = new mars3d.graphic.ModelEntity({
- name: station.name,
- position: [station.x, station.y, 0],
+ name: item.name,
+ position: [parseFloat(item.value[0]), parseFloat(item.value[1]), height],
url: 'static/gltf/output/yehuagongchang.gltf',
style: {
scale: 3,
@@ -88,7 +88,7 @@
minimumPixelSize: 30,
clampToGround: true
},
- tooltip: station.name
+ tooltip: item.name
})
layer.addGraphic(graphic)
}
diff --git a/src/components/Map/components/manageStationLayer.vue b/src/components/Map/components/manageStationLayer.vue
index c0aff38..7b976d6 100644
--- a/src/components/Map/components/manageStationLayer.vue
+++ b/src/components/Map/components/manageStationLayer.vue
@@ -56,6 +56,7 @@
methods: {
load() {
console.log('load')
+ if (this.show) this.initLayer()
},
initLayer() {
const { mars3d, map } = this
diff --git a/src/components/Map/components/needLayerCone.vue b/src/components/Map/components/needLayerCone.vue
new file mode 100644
index 0000000..373bf3c
--- /dev/null
+++ b/src/components/Map/components/needLayerCone.vue
@@ -0,0 +1,169 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/pipeLayer.vue b/src/components/Map/components/pipeLayer.vue
index 64142a7..0129de7 100644
--- a/src/components/Map/components/pipeLayer.vue
+++ b/src/components/Map/components/pipeLayer.vue
@@ -21,11 +21,11 @@
}, // 发光强度
opacity: {
type: Number,
- default: 0.9
+ default: 1
}, // 透明度
width: {
type: Number,
- default: 10
+ default: 5
}, // 线宽度
height: {
type: Number,
@@ -33,7 +33,7 @@
}, // 高度
color: {
type: String,
- default: '#92ffdf'
+ default: '#5affb2'
}, // 偏移值
show: {
type: Boolean,
@@ -69,10 +69,11 @@
}
this.layer = new mars3d.layer.GeoJsonLayer({
type: 'geojson',
- url: 'static/geojson/pipe.json',
+ url: 'static/geojson/pipe_old.json',
symbol: {
styleOptions: {
- materialType: 'PolylineGlow',
+ lineType: 'glow',
+ // materialType: 'LineFlicker',
glowPower: glowPower, // 发光强度
width: width, // 线宽
color: color,
@@ -83,7 +84,7 @@
show: true
})
map.addLayer(this.layer)
- this.loadData()
+ // this.loadData()
}
},
// 移除图层
diff --git a/src/components/Map/components/pipeLayer2.vue b/src/components/Map/components/pipeLayer2.vue
new file mode 100644
index 0000000..4f56b36
--- /dev/null
+++ b/src/components/Map/components/pipeLayer2.vue
@@ -0,0 +1,147 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/routeLayer.vue b/src/components/Map/components/routeLayer.vue
index 203bd89..15bb2a5 100644
--- a/src/components/Map/components/routeLayer.vue
+++ b/src/components/Map/components/routeLayer.vue
@@ -50,6 +50,9 @@
methods: {
load() {
console.log('load')
+ if(this.show){
+ this.initLayer()
+ }
},
initLayer() {
const { mars3d, map } = this
@@ -60,6 +63,19 @@
}
}
const graphicLayer = new mars3d.layer.DivLayer()
+ graphicLayer.on(mars3d.EventType.click, event => {
+ console.log('单击了巡检人员', event)
+ })
+ graphicLayer.bindPopup(event => {
+ const route = event.graphic.attr
+ const html =
+ '
姓名:' + route.name +
+ '
电话:' + route['phone'] +
+ '
岗位:' + route['duty'] +
+ '
站名:' + route['unitname'] +
+ '
时间:' + route.locationdate + '
'
+ return html
+ })
this.layer = graphicLayer
map.addLayer(graphicLayer)
this.loadData()
@@ -77,11 +93,11 @@
lat: parseFloat(item['WD60_06']),
locationdate: item['WD60_04'],
time: new Date(item['WD60_04']),
- duty: item['WD60_11'],
- sex: item['WD60_09'],
- phone: item['WD60_10'],
- idcard: item['WD60_12'],
- unitname: item['WD60_08']
+ duty: item['WD60_11'] === null ? '' : item['WD60_11'],
+ sex: item['WD60_09'] === null ? '' : item['WD60_09'],
+ phone: item['WD60_10'] === null ? '' : item['WD60_10'],
+ idcard: item['WD60_12'] === null ? '' : item['WD60_12'],
+ unitname: item['WD60_08'] === null ? '' : item['WD60_08']
}
})
this.filteredData = []
diff --git a/src/components/Map/components/supplyLayer.vue b/src/components/Map/components/supplyLayer.vue
index 583e546..7fdbe56 100644
--- a/src/components/Map/components/supplyLayer.vue
+++ b/src/components/Map/components/supplyLayer.vue
@@ -1,10 +1,10 @@
-
+
@@ -134,7 +134,8 @@
const graphics = layer.graphics
for (const graphic of graphics) {
if (graphic.name === city) {
- graphic.openTooltip()
+ // graphic.openTooltip()
+ graphic.openPopup()
}
}
},
@@ -161,7 +162,8 @@
})
}
})
- graphic1.bindTooltip(html)
+ // graphic1.bindTooltip(html)
+ graphic1.bindPopup(html)
layer.addGraphic(graphic1)
},
// 移除图层
@@ -177,5 +179,4 @@
diff --git a/src/components/Map/components/supplyLayerCone.vue b/src/components/Map/components/supplyLayerCone.vue
new file mode 100644
index 0000000..de46f58
--- /dev/null
+++ b/src/components/Map/components/supplyLayerCone.vue
@@ -0,0 +1,169 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/threatLayer.vue b/src/components/Map/components/threatLayer.vue
index e354278..4b2295b 100644
--- a/src/components/Map/components/threatLayer.vue
+++ b/src/components/Map/components/threatLayer.vue
@@ -19,6 +19,10 @@
components: { ThreatDialog },
mixins: [commonMixin('layer')],
props: {
+ colorful: {
+ type: Boolean,
+ default: false
+ },
show: {
type: Boolean,
default: false
@@ -30,7 +34,28 @@
color: {
type: String,
default: '#FBFE2D'
- }
+ },
+ colorList: {
+ type: Array,
+ default: () => {
+ return ['#f33349', '#f79a2c', '#f2fa19', '#95e40c', '#1ffee6']
+ }
+ },
+ threatLevel: {
+ type: Object,
+ default: () => {
+ return {
+ '1': 'A级',
+ '2': 'B级',
+ '3': 'C级',
+ '4': '问题'
+ }
+ }
+ }, // 隐患等级
+ popupType: {
+ type: String,
+ default: 'dialog'
+ } // 详情弹出方式:dialog/ popupWindow
},
data() {
return {
@@ -40,7 +65,6 @@
},
watch: {
show(val) {
- console.log('watch show: ' + val)
if (val) {
this.initLayer()
} else {
@@ -51,27 +75,21 @@
methods: {
load() {
console.log('load')
+ if (this.show) {
+ this.initLayer()
+ }
},
initLayer() {
- const { mars3d, map } = this
+ const { map } = this
if (map) {
- if (this.show) {
- if (this.layer) {
- this.removeLayer()
- }
+ if (this.show && this.layer) {
+ this.removeLayer()
}
- const graphicLayer = new mars3d.layer.GraphicLayer()
- this.layer = graphicLayer
- map.addLayer(graphicLayer)
this.loadData()
}
},
loadData() {
- const { mars3d, type, layer } = this
- layer.on(mars3d.EventType.click, event => {
- console.log('监听layer,单击了矢量对象', event)
- this.$refs.threatDialog.initDialog(event.graphic.attr)
- })
+ const { type } = this
if (type === 'construction') {
axios.get('static/config/threat.json').then((res) => {
res = res.data
@@ -103,28 +121,60 @@
},
// 添加隐患点: type类型,arr数组, clr颜色
addFeatures() {
- const { mars3d, Cesium, layer, color, data } = this
- // 创建DIV数据图层\
+ const { mars3d, map, Cesium, color, data, type } = this
+ const graphicLayer = new mars3d.layer.GraphicLayer({ name: type })
+ console.log('add Layer ' + type)
+ this.layer = graphicLayer
+ this.layer.on(mars3d.EventType.click, event => {
+ console.log('点击隐患', event)
+ if (this.popupType === 'dialog') {
+ this.$refs.threatDialog.initDialog(event.graphic.attr)
+ }
+ })
+ if (this.popupType === 'popupWindow') {
+ this.layer.bindPopup(event => {
+ const item = event.graphic.attr
+ var html =
+ '位置描述:' +
+ item['位置描述'] +
+ '
村庄地址:' +
+ item['村庄地址'] +
+ '
发现人:' +
+ item['发现人'] +
+ '
隐患描述:' +
+ item['隐患描述'] +
+ '
创建时间:' +
+ item['创建时间'] +
+ '
隐患等级:' +
+ this.threatLevel[item['隐患等级']]
+ return html
+ })
+ }
+ console.log(this.layer)
+ map.addLayer(this.layer)
+ // 创建DIV数据图层
for (var i = 0, len = data.length; i < len; i++) {
const item = data[i]
var jd = item['经度']
var wd = item['纬度']
+ const level = parseInt(item['隐患等级']) - 1
+ const clr = this.colorful ? this.colorList[level] : color
var graphic = new mars3d.graphic.DivGraphic({
position: Cesium.Cartesian3.fromDegrees(jd, wd, 0),
style: {
- html: '
',
+ html: '
',
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 2000000) // 按视距距离显示
},
attr: item
})
- layer.addGraphic(graphic)
+ this.layer.addGraphic(graphic)
}
},
// 移除图层
removeLayer() {
const { map, layer } = this
- if (this.layer) {
- map.removeLayer(layer)
+ if (layer) {
+ map.removeLayer(this.layer, true)
this.layer = null
}
}
diff --git a/src/components/Map/components/vipLayer.vue b/src/components/Map/components/vipLayer.vue
new file mode 100644
index 0000000..154d153
--- /dev/null
+++ b/src/components/Map/components/vipLayer.vue
@@ -0,0 +1,150 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/weatherLayer.vue b/src/components/Map/components/weatherLayer.vue
index 98afe91..b9f2096 100644
--- a/src/components/Map/components/weatherLayer.vue
+++ b/src/components/Map/components/weatherLayer.vue
@@ -66,7 +66,8 @@
},
methods: {
load() {
- console.log('load')
+ console.log('load Weather Layer')
+ if(this.show) this.initLayer()
},
initLayer() {
const { mars3d, map } = this
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 4b4e27b..b69d5d4 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -220,3 +220,18 @@
}
}
}
+.mars3d-popup-background{
+ background-color: transparent !important;
+ background-image: url("../assets/global_images/popwin.png") !important;
+ background-repeat: no-repeat !important;
+ background-size: 100% 100% !important;
+}
+.mars3d-popup-tip-container{
+ display:none !important;
+}
+.mars3d-popup-content-wrapper{
+ box-shadow: none !important;
+ -webkit-box-shadow: none !important;
+ padding-top:10px !important;
+ padding-bottom: 10px !important;
+}
diff --git a/src/views/maps/constructionThreat.vue b/src/views/maps/constructionThreat.vue
index 246852f..eeea533 100644
--- a/src/views/maps/constructionThreat.vue
+++ b/src/views/maps/constructionThreat.vue
@@ -5,41 +5,37 @@
-->
-
-
-
-
-
-
-
-
-
-
-
-
-
+
-
-
+
+
+
+
diff --git a/src/components/Map/components/earthquakeLayer.vue b/src/components/Map/components/earthquakeLayer.vue
index e7efdc1..a4a0703 100644
--- a/src/components/Map/components/earthquakeLayer.vue
+++ b/src/components/Map/components/earthquakeLayer.vue
@@ -71,6 +71,7 @@
loadData() {
const { mars3d, Cesium, layer, height, size } = this
const date = getToday()
+ // const date = '2021-04-19'
getEarthquakeList(date).then((res) => {
if (res.data.length === 0) {
this.$message.info('今日无地震')
diff --git a/src/components/Map/components/hcaHeatLayer.vue b/src/components/Map/components/hcaHeatLayer.vue
index e4d3a21..9233d92 100644
--- a/src/components/Map/components/hcaHeatLayer.vue
+++ b/src/components/Map/components/hcaHeatLayer.vue
@@ -40,9 +40,10 @@
methods: {
load() {
console.log('load')
+ if (this.show) this.initLayer()
},
initLayer() {
- const { mars3d, map } = this
+ const { map } = this
if (map) {
if (this.show) {
if (this.layer) {
diff --git a/src/components/Map/components/hcaPointLayer.vue b/src/components/Map/components/hcaPointLayer.vue
new file mode 100644
index 0000000..b518699
--- /dev/null
+++ b/src/components/Map/components/hcaPointLayer.vue
@@ -0,0 +1,142 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/liquidFactoryLayer.vue b/src/components/Map/components/liquidFactoryLayer.vue
index 6845b93..3a1c0eb 100644
--- a/src/components/Map/components/liquidFactoryLayer.vue
+++ b/src/components/Map/components/liquidFactoryLayer.vue
@@ -72,15 +72,15 @@
}
},
loadData() {
- const { mars3d, layer } = this
+ const { mars3d, layer, height } = this
axios.get('static/config/liquidFactory.json').then((res) => {
res = res.data
if (res.code === 200) {
this.data = res.data[0].data
- for (const station of this.data) {
+ for (const item of this.data) {
const graphic = new mars3d.graphic.ModelEntity({
- name: station.name,
- position: [station.x, station.y, 0],
+ name: item.name,
+ position: [parseFloat(item.value[0]), parseFloat(item.value[1]), height],
url: 'static/gltf/output/yehuagongchang.gltf',
style: {
scale: 3,
@@ -88,7 +88,7 @@
minimumPixelSize: 30,
clampToGround: true
},
- tooltip: station.name
+ tooltip: item.name
})
layer.addGraphic(graphic)
}
diff --git a/src/components/Map/components/manageStationLayer.vue b/src/components/Map/components/manageStationLayer.vue
index c0aff38..7b976d6 100644
--- a/src/components/Map/components/manageStationLayer.vue
+++ b/src/components/Map/components/manageStationLayer.vue
@@ -56,6 +56,7 @@
methods: {
load() {
console.log('load')
+ if (this.show) this.initLayer()
},
initLayer() {
const { mars3d, map } = this
diff --git a/src/components/Map/components/needLayerCone.vue b/src/components/Map/components/needLayerCone.vue
new file mode 100644
index 0000000..373bf3c
--- /dev/null
+++ b/src/components/Map/components/needLayerCone.vue
@@ -0,0 +1,169 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/pipeLayer.vue b/src/components/Map/components/pipeLayer.vue
index 64142a7..0129de7 100644
--- a/src/components/Map/components/pipeLayer.vue
+++ b/src/components/Map/components/pipeLayer.vue
@@ -21,11 +21,11 @@
}, // 发光强度
opacity: {
type: Number,
- default: 0.9
+ default: 1
}, // 透明度
width: {
type: Number,
- default: 10
+ default: 5
}, // 线宽度
height: {
type: Number,
@@ -33,7 +33,7 @@
}, // 高度
color: {
type: String,
- default: '#92ffdf'
+ default: '#5affb2'
}, // 偏移值
show: {
type: Boolean,
@@ -69,10 +69,11 @@
}
this.layer = new mars3d.layer.GeoJsonLayer({
type: 'geojson',
- url: 'static/geojson/pipe.json',
+ url: 'static/geojson/pipe_old.json',
symbol: {
styleOptions: {
- materialType: 'PolylineGlow',
+ lineType: 'glow',
+ // materialType: 'LineFlicker',
glowPower: glowPower, // 发光强度
width: width, // 线宽
color: color,
@@ -83,7 +84,7 @@
show: true
})
map.addLayer(this.layer)
- this.loadData()
+ // this.loadData()
}
},
// 移除图层
diff --git a/src/components/Map/components/pipeLayer2.vue b/src/components/Map/components/pipeLayer2.vue
new file mode 100644
index 0000000..4f56b36
--- /dev/null
+++ b/src/components/Map/components/pipeLayer2.vue
@@ -0,0 +1,147 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/routeLayer.vue b/src/components/Map/components/routeLayer.vue
index 203bd89..15bb2a5 100644
--- a/src/components/Map/components/routeLayer.vue
+++ b/src/components/Map/components/routeLayer.vue
@@ -50,6 +50,9 @@
methods: {
load() {
console.log('load')
+ if(this.show){
+ this.initLayer()
+ }
},
initLayer() {
const { mars3d, map } = this
@@ -60,6 +63,19 @@
}
}
const graphicLayer = new mars3d.layer.DivLayer()
+ graphicLayer.on(mars3d.EventType.click, event => {
+ console.log('单击了巡检人员', event)
+ })
+ graphicLayer.bindPopup(event => {
+ const route = event.graphic.attr
+ const html =
+ '
姓名:' + route.name +
+ '
电话:' + route['phone'] +
+ '
岗位:' + route['duty'] +
+ '
站名:' + route['unitname'] +
+ '
时间:' + route.locationdate + '
'
+ return html
+ })
this.layer = graphicLayer
map.addLayer(graphicLayer)
this.loadData()
@@ -77,11 +93,11 @@
lat: parseFloat(item['WD60_06']),
locationdate: item['WD60_04'],
time: new Date(item['WD60_04']),
- duty: item['WD60_11'],
- sex: item['WD60_09'],
- phone: item['WD60_10'],
- idcard: item['WD60_12'],
- unitname: item['WD60_08']
+ duty: item['WD60_11'] === null ? '' : item['WD60_11'],
+ sex: item['WD60_09'] === null ? '' : item['WD60_09'],
+ phone: item['WD60_10'] === null ? '' : item['WD60_10'],
+ idcard: item['WD60_12'] === null ? '' : item['WD60_12'],
+ unitname: item['WD60_08'] === null ? '' : item['WD60_08']
}
})
this.filteredData = []
diff --git a/src/components/Map/components/supplyLayer.vue b/src/components/Map/components/supplyLayer.vue
index 583e546..7fdbe56 100644
--- a/src/components/Map/components/supplyLayer.vue
+++ b/src/components/Map/components/supplyLayer.vue
@@ -1,10 +1,10 @@
-
+
@@ -134,7 +134,8 @@
const graphics = layer.graphics
for (const graphic of graphics) {
if (graphic.name === city) {
- graphic.openTooltip()
+ // graphic.openTooltip()
+ graphic.openPopup()
}
}
},
@@ -161,7 +162,8 @@
})
}
})
- graphic1.bindTooltip(html)
+ // graphic1.bindTooltip(html)
+ graphic1.bindPopup(html)
layer.addGraphic(graphic1)
},
// 移除图层
@@ -177,5 +179,4 @@
diff --git a/src/components/Map/components/supplyLayerCone.vue b/src/components/Map/components/supplyLayerCone.vue
new file mode 100644
index 0000000..de46f58
--- /dev/null
+++ b/src/components/Map/components/supplyLayerCone.vue
@@ -0,0 +1,169 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/threatLayer.vue b/src/components/Map/components/threatLayer.vue
index e354278..4b2295b 100644
--- a/src/components/Map/components/threatLayer.vue
+++ b/src/components/Map/components/threatLayer.vue
@@ -19,6 +19,10 @@
components: { ThreatDialog },
mixins: [commonMixin('layer')],
props: {
+ colorful: {
+ type: Boolean,
+ default: false
+ },
show: {
type: Boolean,
default: false
@@ -30,7 +34,28 @@
color: {
type: String,
default: '#FBFE2D'
- }
+ },
+ colorList: {
+ type: Array,
+ default: () => {
+ return ['#f33349', '#f79a2c', '#f2fa19', '#95e40c', '#1ffee6']
+ }
+ },
+ threatLevel: {
+ type: Object,
+ default: () => {
+ return {
+ '1': 'A级',
+ '2': 'B级',
+ '3': 'C级',
+ '4': '问题'
+ }
+ }
+ }, // 隐患等级
+ popupType: {
+ type: String,
+ default: 'dialog'
+ } // 详情弹出方式:dialog/ popupWindow
},
data() {
return {
@@ -40,7 +65,6 @@
},
watch: {
show(val) {
- console.log('watch show: ' + val)
if (val) {
this.initLayer()
} else {
@@ -51,27 +75,21 @@
methods: {
load() {
console.log('load')
+ if (this.show) {
+ this.initLayer()
+ }
},
initLayer() {
- const { mars3d, map } = this
+ const { map } = this
if (map) {
- if (this.show) {
- if (this.layer) {
- this.removeLayer()
- }
+ if (this.show && this.layer) {
+ this.removeLayer()
}
- const graphicLayer = new mars3d.layer.GraphicLayer()
- this.layer = graphicLayer
- map.addLayer(graphicLayer)
this.loadData()
}
},
loadData() {
- const { mars3d, type, layer } = this
- layer.on(mars3d.EventType.click, event => {
- console.log('监听layer,单击了矢量对象', event)
- this.$refs.threatDialog.initDialog(event.graphic.attr)
- })
+ const { type } = this
if (type === 'construction') {
axios.get('static/config/threat.json').then((res) => {
res = res.data
@@ -103,28 +121,60 @@
},
// 添加隐患点: type类型,arr数组, clr颜色
addFeatures() {
- const { mars3d, Cesium, layer, color, data } = this
- // 创建DIV数据图层\
+ const { mars3d, map, Cesium, color, data, type } = this
+ const graphicLayer = new mars3d.layer.GraphicLayer({ name: type })
+ console.log('add Layer ' + type)
+ this.layer = graphicLayer
+ this.layer.on(mars3d.EventType.click, event => {
+ console.log('点击隐患', event)
+ if (this.popupType === 'dialog') {
+ this.$refs.threatDialog.initDialog(event.graphic.attr)
+ }
+ })
+ if (this.popupType === 'popupWindow') {
+ this.layer.bindPopup(event => {
+ const item = event.graphic.attr
+ var html =
+ '位置描述:' +
+ item['位置描述'] +
+ '
村庄地址:' +
+ item['村庄地址'] +
+ '
发现人:' +
+ item['发现人'] +
+ '
隐患描述:' +
+ item['隐患描述'] +
+ '
创建时间:' +
+ item['创建时间'] +
+ '
隐患等级:' +
+ this.threatLevel[item['隐患等级']]
+ return html
+ })
+ }
+ console.log(this.layer)
+ map.addLayer(this.layer)
+ // 创建DIV数据图层
for (var i = 0, len = data.length; i < len; i++) {
const item = data[i]
var jd = item['经度']
var wd = item['纬度']
+ const level = parseInt(item['隐患等级']) - 1
+ const clr = this.colorful ? this.colorList[level] : color
var graphic = new mars3d.graphic.DivGraphic({
position: Cesium.Cartesian3.fromDegrees(jd, wd, 0),
style: {
- html: '
',
+ html: '
',
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 2000000) // 按视距距离显示
},
attr: item
})
- layer.addGraphic(graphic)
+ this.layer.addGraphic(graphic)
}
},
// 移除图层
removeLayer() {
const { map, layer } = this
- if (this.layer) {
- map.removeLayer(layer)
+ if (layer) {
+ map.removeLayer(this.layer, true)
this.layer = null
}
}
diff --git a/src/components/Map/components/vipLayer.vue b/src/components/Map/components/vipLayer.vue
new file mode 100644
index 0000000..154d153
--- /dev/null
+++ b/src/components/Map/components/vipLayer.vue
@@ -0,0 +1,150 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/weatherLayer.vue b/src/components/Map/components/weatherLayer.vue
index 98afe91..b9f2096 100644
--- a/src/components/Map/components/weatherLayer.vue
+++ b/src/components/Map/components/weatherLayer.vue
@@ -66,7 +66,8 @@
},
methods: {
load() {
- console.log('load')
+ console.log('load Weather Layer')
+ if(this.show) this.initLayer()
},
initLayer() {
const { mars3d, map } = this
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 4b4e27b..b69d5d4 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -220,3 +220,18 @@
}
}
}
+.mars3d-popup-background{
+ background-color: transparent !important;
+ background-image: url("../assets/global_images/popwin.png") !important;
+ background-repeat: no-repeat !important;
+ background-size: 100% 100% !important;
+}
+.mars3d-popup-tip-container{
+ display:none !important;
+}
+.mars3d-popup-content-wrapper{
+ box-shadow: none !important;
+ -webkit-box-shadow: none !important;
+ padding-top:10px !important;
+ padding-bottom: 10px !important;
+}
diff --git a/src/views/maps/constructionThreat.vue b/src/views/maps/constructionThreat.vue
index 246852f..eeea533 100644
--- a/src/views/maps/constructionThreat.vue
+++ b/src/views/maps/constructionThreat.vue
@@ -5,41 +5,37 @@
-->
-
-
-
-
-
-
-
-
-
-
-
-
-
+
-
-
+
+
+
+
diff --git a/src/components/Map/components/earthquakeLayer.vue b/src/components/Map/components/earthquakeLayer.vue
index e7efdc1..a4a0703 100644
--- a/src/components/Map/components/earthquakeLayer.vue
+++ b/src/components/Map/components/earthquakeLayer.vue
@@ -71,6 +71,7 @@
loadData() {
const { mars3d, Cesium, layer, height, size } = this
const date = getToday()
+ // const date = '2021-04-19'
getEarthquakeList(date).then((res) => {
if (res.data.length === 0) {
this.$message.info('今日无地震')
diff --git a/src/components/Map/components/hcaHeatLayer.vue b/src/components/Map/components/hcaHeatLayer.vue
index e4d3a21..9233d92 100644
--- a/src/components/Map/components/hcaHeatLayer.vue
+++ b/src/components/Map/components/hcaHeatLayer.vue
@@ -40,9 +40,10 @@
methods: {
load() {
console.log('load')
+ if (this.show) this.initLayer()
},
initLayer() {
- const { mars3d, map } = this
+ const { map } = this
if (map) {
if (this.show) {
if (this.layer) {
diff --git a/src/components/Map/components/hcaPointLayer.vue b/src/components/Map/components/hcaPointLayer.vue
new file mode 100644
index 0000000..b518699
--- /dev/null
+++ b/src/components/Map/components/hcaPointLayer.vue
@@ -0,0 +1,142 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/liquidFactoryLayer.vue b/src/components/Map/components/liquidFactoryLayer.vue
index 6845b93..3a1c0eb 100644
--- a/src/components/Map/components/liquidFactoryLayer.vue
+++ b/src/components/Map/components/liquidFactoryLayer.vue
@@ -72,15 +72,15 @@
}
},
loadData() {
- const { mars3d, layer } = this
+ const { mars3d, layer, height } = this
axios.get('static/config/liquidFactory.json').then((res) => {
res = res.data
if (res.code === 200) {
this.data = res.data[0].data
- for (const station of this.data) {
+ for (const item of this.data) {
const graphic = new mars3d.graphic.ModelEntity({
- name: station.name,
- position: [station.x, station.y, 0],
+ name: item.name,
+ position: [parseFloat(item.value[0]), parseFloat(item.value[1]), height],
url: 'static/gltf/output/yehuagongchang.gltf',
style: {
scale: 3,
@@ -88,7 +88,7 @@
minimumPixelSize: 30,
clampToGround: true
},
- tooltip: station.name
+ tooltip: item.name
})
layer.addGraphic(graphic)
}
diff --git a/src/components/Map/components/manageStationLayer.vue b/src/components/Map/components/manageStationLayer.vue
index c0aff38..7b976d6 100644
--- a/src/components/Map/components/manageStationLayer.vue
+++ b/src/components/Map/components/manageStationLayer.vue
@@ -56,6 +56,7 @@
methods: {
load() {
console.log('load')
+ if (this.show) this.initLayer()
},
initLayer() {
const { mars3d, map } = this
diff --git a/src/components/Map/components/needLayerCone.vue b/src/components/Map/components/needLayerCone.vue
new file mode 100644
index 0000000..373bf3c
--- /dev/null
+++ b/src/components/Map/components/needLayerCone.vue
@@ -0,0 +1,169 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/pipeLayer.vue b/src/components/Map/components/pipeLayer.vue
index 64142a7..0129de7 100644
--- a/src/components/Map/components/pipeLayer.vue
+++ b/src/components/Map/components/pipeLayer.vue
@@ -21,11 +21,11 @@
}, // 发光强度
opacity: {
type: Number,
- default: 0.9
+ default: 1
}, // 透明度
width: {
type: Number,
- default: 10
+ default: 5
}, // 线宽度
height: {
type: Number,
@@ -33,7 +33,7 @@
}, // 高度
color: {
type: String,
- default: '#92ffdf'
+ default: '#5affb2'
}, // 偏移值
show: {
type: Boolean,
@@ -69,10 +69,11 @@
}
this.layer = new mars3d.layer.GeoJsonLayer({
type: 'geojson',
- url: 'static/geojson/pipe.json',
+ url: 'static/geojson/pipe_old.json',
symbol: {
styleOptions: {
- materialType: 'PolylineGlow',
+ lineType: 'glow',
+ // materialType: 'LineFlicker',
glowPower: glowPower, // 发光强度
width: width, // 线宽
color: color,
@@ -83,7 +84,7 @@
show: true
})
map.addLayer(this.layer)
- this.loadData()
+ // this.loadData()
}
},
// 移除图层
diff --git a/src/components/Map/components/pipeLayer2.vue b/src/components/Map/components/pipeLayer2.vue
new file mode 100644
index 0000000..4f56b36
--- /dev/null
+++ b/src/components/Map/components/pipeLayer2.vue
@@ -0,0 +1,147 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/routeLayer.vue b/src/components/Map/components/routeLayer.vue
index 203bd89..15bb2a5 100644
--- a/src/components/Map/components/routeLayer.vue
+++ b/src/components/Map/components/routeLayer.vue
@@ -50,6 +50,9 @@
methods: {
load() {
console.log('load')
+ if(this.show){
+ this.initLayer()
+ }
},
initLayer() {
const { mars3d, map } = this
@@ -60,6 +63,19 @@
}
}
const graphicLayer = new mars3d.layer.DivLayer()
+ graphicLayer.on(mars3d.EventType.click, event => {
+ console.log('单击了巡检人员', event)
+ })
+ graphicLayer.bindPopup(event => {
+ const route = event.graphic.attr
+ const html =
+ '
姓名:' + route.name +
+ '
电话:' + route['phone'] +
+ '
岗位:' + route['duty'] +
+ '
站名:' + route['unitname'] +
+ '
时间:' + route.locationdate + '
'
+ return html
+ })
this.layer = graphicLayer
map.addLayer(graphicLayer)
this.loadData()
@@ -77,11 +93,11 @@
lat: parseFloat(item['WD60_06']),
locationdate: item['WD60_04'],
time: new Date(item['WD60_04']),
- duty: item['WD60_11'],
- sex: item['WD60_09'],
- phone: item['WD60_10'],
- idcard: item['WD60_12'],
- unitname: item['WD60_08']
+ duty: item['WD60_11'] === null ? '' : item['WD60_11'],
+ sex: item['WD60_09'] === null ? '' : item['WD60_09'],
+ phone: item['WD60_10'] === null ? '' : item['WD60_10'],
+ idcard: item['WD60_12'] === null ? '' : item['WD60_12'],
+ unitname: item['WD60_08'] === null ? '' : item['WD60_08']
}
})
this.filteredData = []
diff --git a/src/components/Map/components/supplyLayer.vue b/src/components/Map/components/supplyLayer.vue
index 583e546..7fdbe56 100644
--- a/src/components/Map/components/supplyLayer.vue
+++ b/src/components/Map/components/supplyLayer.vue
@@ -1,10 +1,10 @@
-
+
@@ -134,7 +134,8 @@
const graphics = layer.graphics
for (const graphic of graphics) {
if (graphic.name === city) {
- graphic.openTooltip()
+ // graphic.openTooltip()
+ graphic.openPopup()
}
}
},
@@ -161,7 +162,8 @@
})
}
})
- graphic1.bindTooltip(html)
+ // graphic1.bindTooltip(html)
+ graphic1.bindPopup(html)
layer.addGraphic(graphic1)
},
// 移除图层
@@ -177,5 +179,4 @@
diff --git a/src/components/Map/components/supplyLayerCone.vue b/src/components/Map/components/supplyLayerCone.vue
new file mode 100644
index 0000000..de46f58
--- /dev/null
+++ b/src/components/Map/components/supplyLayerCone.vue
@@ -0,0 +1,169 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/threatLayer.vue b/src/components/Map/components/threatLayer.vue
index e354278..4b2295b 100644
--- a/src/components/Map/components/threatLayer.vue
+++ b/src/components/Map/components/threatLayer.vue
@@ -19,6 +19,10 @@
components: { ThreatDialog },
mixins: [commonMixin('layer')],
props: {
+ colorful: {
+ type: Boolean,
+ default: false
+ },
show: {
type: Boolean,
default: false
@@ -30,7 +34,28 @@
color: {
type: String,
default: '#FBFE2D'
- }
+ },
+ colorList: {
+ type: Array,
+ default: () => {
+ return ['#f33349', '#f79a2c', '#f2fa19', '#95e40c', '#1ffee6']
+ }
+ },
+ threatLevel: {
+ type: Object,
+ default: () => {
+ return {
+ '1': 'A级',
+ '2': 'B级',
+ '3': 'C级',
+ '4': '问题'
+ }
+ }
+ }, // 隐患等级
+ popupType: {
+ type: String,
+ default: 'dialog'
+ } // 详情弹出方式:dialog/ popupWindow
},
data() {
return {
@@ -40,7 +65,6 @@
},
watch: {
show(val) {
- console.log('watch show: ' + val)
if (val) {
this.initLayer()
} else {
@@ -51,27 +75,21 @@
methods: {
load() {
console.log('load')
+ if (this.show) {
+ this.initLayer()
+ }
},
initLayer() {
- const { mars3d, map } = this
+ const { map } = this
if (map) {
- if (this.show) {
- if (this.layer) {
- this.removeLayer()
- }
+ if (this.show && this.layer) {
+ this.removeLayer()
}
- const graphicLayer = new mars3d.layer.GraphicLayer()
- this.layer = graphicLayer
- map.addLayer(graphicLayer)
this.loadData()
}
},
loadData() {
- const { mars3d, type, layer } = this
- layer.on(mars3d.EventType.click, event => {
- console.log('监听layer,单击了矢量对象', event)
- this.$refs.threatDialog.initDialog(event.graphic.attr)
- })
+ const { type } = this
if (type === 'construction') {
axios.get('static/config/threat.json').then((res) => {
res = res.data
@@ -103,28 +121,60 @@
},
// 添加隐患点: type类型,arr数组, clr颜色
addFeatures() {
- const { mars3d, Cesium, layer, color, data } = this
- // 创建DIV数据图层\
+ const { mars3d, map, Cesium, color, data, type } = this
+ const graphicLayer = new mars3d.layer.GraphicLayer({ name: type })
+ console.log('add Layer ' + type)
+ this.layer = graphicLayer
+ this.layer.on(mars3d.EventType.click, event => {
+ console.log('点击隐患', event)
+ if (this.popupType === 'dialog') {
+ this.$refs.threatDialog.initDialog(event.graphic.attr)
+ }
+ })
+ if (this.popupType === 'popupWindow') {
+ this.layer.bindPopup(event => {
+ const item = event.graphic.attr
+ var html =
+ '位置描述:' +
+ item['位置描述'] +
+ '
村庄地址:' +
+ item['村庄地址'] +
+ '
发现人:' +
+ item['发现人'] +
+ '
隐患描述:' +
+ item['隐患描述'] +
+ '
创建时间:' +
+ item['创建时间'] +
+ '
隐患等级:' +
+ this.threatLevel[item['隐患等级']]
+ return html
+ })
+ }
+ console.log(this.layer)
+ map.addLayer(this.layer)
+ // 创建DIV数据图层
for (var i = 0, len = data.length; i < len; i++) {
const item = data[i]
var jd = item['经度']
var wd = item['纬度']
+ const level = parseInt(item['隐患等级']) - 1
+ const clr = this.colorful ? this.colorList[level] : color
var graphic = new mars3d.graphic.DivGraphic({
position: Cesium.Cartesian3.fromDegrees(jd, wd, 0),
style: {
- html: '
',
+ html: '
',
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 2000000) // 按视距距离显示
},
attr: item
})
- layer.addGraphic(graphic)
+ this.layer.addGraphic(graphic)
}
},
// 移除图层
removeLayer() {
const { map, layer } = this
- if (this.layer) {
- map.removeLayer(layer)
+ if (layer) {
+ map.removeLayer(this.layer, true)
this.layer = null
}
}
diff --git a/src/components/Map/components/vipLayer.vue b/src/components/Map/components/vipLayer.vue
new file mode 100644
index 0000000..154d153
--- /dev/null
+++ b/src/components/Map/components/vipLayer.vue
@@ -0,0 +1,150 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Map/components/weatherLayer.vue b/src/components/Map/components/weatherLayer.vue
index 98afe91..b9f2096 100644
--- a/src/components/Map/components/weatherLayer.vue
+++ b/src/components/Map/components/weatherLayer.vue
@@ -66,7 +66,8 @@
},
methods: {
load() {
- console.log('load')
+ console.log('load Weather Layer')
+ if(this.show) this.initLayer()
},
initLayer() {
const { mars3d, map } = this
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 4b4e27b..b69d5d4 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -220,3 +220,18 @@
}
}
}
+.mars3d-popup-background{
+ background-color: transparent !important;
+ background-image: url("../assets/global_images/popwin.png") !important;
+ background-repeat: no-repeat !important;
+ background-size: 100% 100% !important;
+}
+.mars3d-popup-tip-container{
+ display:none !important;
+}
+.mars3d-popup-content-wrapper{
+ box-shadow: none !important;
+ -webkit-box-shadow: none !important;
+ padding-top:10px !important;
+ padding-bottom: 10px !important;
+}
diff --git a/src/views/maps/constructionThreat.vue b/src/views/maps/constructionThreat.vue
index 246852f..eeea533 100644
--- a/src/views/maps/constructionThreat.vue
+++ b/src/views/maps/constructionThreat.vue
@@ -5,41 +5,37 @@
-->
-
-
-
-
-
-
-
-
-
-
-
-
-
+
-
-
+
+