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 @@ -->