-
+
图上拾取
@@ -39,6 +39,10 @@
export default {
name: 'PopupLocation',
props: {
+ is3D: {
+ type: Boolean,
+ default: false
+ },
defaultPosition: {
type: Array,
default: () => []
diff --git a/src/views/overview/components/toolBox.vue b/src/views/overview/components/toolBox.vue
index 9b0eb95..83b1c5e 100644
--- a/src/views/overview/components/toolBox.vue
+++ b/src/views/overview/components/toolBox.vue
@@ -37,6 +37,12 @@
+
+
+ 深蓝底图
+
+
@@ -63,6 +69,10 @@
name: 'ToolBox',
components: { LayerChooseWindow },
props: {
+ is3D: {
+ type: Boolean,
+ default: false
+ },
show: {
type: Boolean,
default: false
@@ -166,7 +176,7 @@
position: absolute;
right: 10px;
top: 50px;
- width: 200px;
+ width: 230px;
background-color: rgba(255,255,255,0.9);
.window-body{
display: flex;
diff --git a/.browserslistrc b/.browserslistrc
deleted file mode 100644
index 9725b0f..0000000
--- a/.browserslistrc
+++ /dev/null
@@ -1,4 +0,0 @@
-> 1%
-last 2 versions
-IE >=8
-not dead
diff --git a/.eslintrc.js b/.eslintrc.js
index ad3db7c..2307fed 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -19,10 +19,11 @@
rules: {
'vue/max-attributes-per-line': [2, {
'singleline': 10,
- 'multiline': {
- 'max': 1,
- 'allowFirstLine': false
- }
+ // 'multiline': {
+ // 'max': 1,
+ // 'allowFirstLine': false,
+ // ignore: ['some-attribute', '/(?:xs|sm|md|lg|xl)\\d{1,2}/']
+ // }
}],
'vue/name-property-casing': ['error', 'PascalCase'],
'accessor-pairs': 2,
diff --git a/package.json b/package.json
index 4b4e458..f0bd847 100644
--- a/package.json
+++ b/package.json
@@ -15,53 +15,76 @@
"@riophae/vue-treeselect": "^0.4.0",
"animate.css": "^4.1.1",
"axios": "^0.21.1",
- "cesium": "^1.95.0",
"clipboard": "^2.0.8",
- "copy-webpack-plugin": "^6.0.3",
- "core-js": "^3.6.5",
+ "core-js": "^3.8.3",
"echarts": "^4.2.1",
"element-ui": "^2.15.7",
"js-cookie": "^3.0.0",
"jsencrypt": "^3.2.1",
- "mars3d": "3.3.15",
- "mars3d-space": "^3.3.17",
+ "mars3d": "^3.4.7",
+ "mars3d-space": "^3.4.7",
"mockjs": "^1.1.0",
+ "node-polyfill-webpack-plugin": "^2.0.1",
"normalize.css": "^8.0.1",
"nprogress": "^0.2.0",
"uppercamelcase": "^3.0.0",
"v-charts": "^1.19.0",
"v-viewer": "^1.6.4",
- "vue": "^2.6.11",
+ "vue": "^2.6.14",
"vue-amap": "^0.5.10",
- "vue-router": "^3.2.0",
- "vuex": "^3.4.0"
+ "vue-router": "^3.5.3",
+ "vuex": "^3.6.2",
+ "webpack": "^5.74.0"
},
"devDependencies": {
- "@vue/cli-plugin-babel": "~4.5.0",
- "@vue/cli-plugin-e2e-cypress": "~4.5.0",
- "@vue/cli-plugin-eslint": "~4.5.0",
- "@vue/cli-plugin-router": "~4.5.0",
- "@vue/cli-plugin-unit-jest": "~4.5.0",
- "@vue/cli-plugin-vuex": "~4.5.0",
- "@vue/cli-service": "~4.5.0",
- "@vue/eslint-config-standard": "^5.1.2",
- "@vue/test-utils": "^1.0.3",
- "babel-eslint": "^10.1.0",
- "babel-plugin-dynamic-import-node": "^2.3.3",
- "chalk": "^4.1.2",
- "chokidar": "^3.5.2",
- "copy-webpack-plugin": "^6.4.1",
- "eslint": "^6.7.2",
+ "@babel/core": "^7.12.16",
+ "@babel/eslint-parser": "^7.12.16",
+ "@vue/cli-plugin-babel": "~5.0.0",
+ "@vue/cli-plugin-eslint": "~5.0.0",
+ "@vue/cli-service": "~5.0.0",
+ "copy-webpack-plugin": "^6.3.2",
+ "eslint": "^7.32.0",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.0",
- "eslint-plugin-vue": "^6.2.2",
- "mock": "^0.1.1",
- "sass": "^1.26.5",
+ "eslint-plugin-vue": "^8.0.3",
+ "html-webpack-plugin": "^5.5.0",
+ "sass": "^1.32.12",
"sass-loader": "^8.0.2",
- "script-ext-html-webpack-plugin": "^2.1.5",
"svg-sprite-loader": "^6.0.9",
- "vue-template-compiler": "^2.6.11"
+ "vue-template-compiler": "^2.6.14"
+ },
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/marsgis/mars3d-vue-template.git"
+ },
+ "bugs": {
+ "url": "https://github.com/marsgis/mars3d-vue-template/issues",
+ "email": "wh@marsgis.cn"
+ },
+ "keywords": [
+ "marsgis",
+ "mars3d",
+ "cesium",
+ "vue",
+ "gis"
+ ],
+ "author": "火星科技",
+ "license": "Apache-2.0",
+ "homepage": "http://mars3d.cn",
+ "eslintConfig": {
+ "root": true,
+ "env": {
+ "node": true
+ },
+ "extends": [
+ "plugin:vue/essential",
+ "eslint:recommended"
+ ],
+ "parserOptions": {
+ "parser": "@babel/eslint-parser"
+ },
+ "rules": {}
}
}
diff --git a/public/config/mars3dConfig.json b/public/config/mars3dConfig.json
index 29a3c40..498d918 100644
--- a/public/config/mars3dConfig.json
+++ b/public/config/mars3dConfig.json
@@ -1,8 +1,9 @@
{
"scene": {
"center": {
- "lat": "36.48", "lng": "117.48", "alt": 20000, "heading": 360, "pitch": -45
+ "lat": "25.675", "lng": "114.875", "alt": 10000, "heading": 360, "pitch": -45
},
+ "requestRenderMode": true,
"showSun": false,
"showSkyAtmosphere": false,
"fog": true,
@@ -59,25 +60,5 @@
"key": ["216ee92889e17ab1b083fae665d522b8"],
"show": true
}
- ],
- "layers": [
- {
- "type": "geojson",
- "id": "building",
- "url": "http://111.198.10.15:11404/3d/zqBuilding.json",
- "symbol": {
- "type": "polygonP",
- "styleOptions": {
- "color": "rgb(52,125,246)",
- "outline": false,
- "opacity": 0.8
- }
- },
- "buildings": {
- "height": 100
- },
- "popup": "{name}",
- "show": true
- }
]
}
diff --git a/public/config/mars3dConfigzq.json b/public/config/mars3dConfigzq.json
new file mode 100644
index 0000000..7752593
--- /dev/null
+++ b/public/config/mars3dConfigzq.json
@@ -0,0 +1,84 @@
+{
+ "scene": {
+ "center": {
+ "lat": "36.48", "lng": "117.48", "alt": 20000, "heading": 360, "pitch": -45
+ },
+ "requestRenderMode": true,
+ "showSun": false,
+ "showSkyAtmosphere": false,
+ "fog": true,
+ "fxaa": true,
+ "globe": {
+ "depthTestAgainstTerrain": true,
+ "baseColor": "#1A2126",
+ "showGroundAtmosphere": false,
+ "enableLighting": false
+ },
+ "control": {
+ "infoBox": true
+ },
+ "cameraController": {
+ "zoomFactor": 3.0,
+ "minimumZoomDistance": 1,
+ "maximumZoomDistance": 500000.0,
+ "enableRotate": true,
+ "enableTranslate": true,
+ "enableTilt": true,
+ "enableZoom": true,
+ "enableCollisionDetection": false
+ }
+ },
+ "basemaps": [
+ {
+ "pid": 10,
+ "id": 1112,
+ "name": "天地图",
+ "type": "group",
+ "layers": [
+ { "name": "注记", "type": "tdt", "layer": "ter_z", "key": ["216ee92889e17ab1b083fae665d522b8"] },
+ { "name": "注记", "type": "tdt", "layer": "img_z", "key": ["216ee92889e17ab1b083fae665d522b8"] }
+ ]
+ },
+ {
+ "id": 1111,
+ "pid": 10,
+ "name": "天地图电子",
+ "icon": "http://mars3d.cn/example/img/basemaps/tdt_vec.png",
+ "type": "group",
+ "layers": [
+ { "name": "底图", "type": "tdt", "layer": "vec_d", "key": ["216ee92889e17ab1b083fae665d522b8"] },
+ { "name": "注记", "type": "tdt", "layer": "vec_z", "key": ["216ee92889e17ab1b083fae665d522b8"] }
+ ]
+ },
+ {
+ "id": 1113,
+ "pid": 10,
+ "name": "天地图影像",
+ "icon": "http://mars3d.cn/example/img/basemaps/tdt_img.png",
+ "type": "tdt",
+ "layer": "img_d",
+ "key": ["216ee92889e17ab1b083fae665d522b8"],
+ "show": true
+ }
+ ],
+ "layers": [
+ {
+ "type": "geojson",
+ "id": "building",
+ "url": "http://111.198.10.15:11404/3d/zqBuilding.json",
+ "symbol": {
+ "type": "polygonP",
+ "styleOptions": {
+ "color": "rgb(52,125,246)",
+ "outline": false,
+ "opacity": 0.8
+ }
+ },
+ "buildings": {
+ "height": 100
+ },
+ "popup": "{name}",
+ "show": true
+ }
+ ]
+}
diff --git a/public/config/project.config.json b/public/config/project.config.json
index 69da0af..a9cb472 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -17,6 +17,5 @@
"provinceCode":"360000",
"cityCode":"361000",
"areaCode":"361024",
- "arcgisUrl": "http://111.198.10.15:13002/arcgis/rest/services/zq_GxData0825/MapServer/",
- "buildingUrl": "http://111.198.10.15:13002/arcgis/rest/services/zqBuilding/MapServer/0"
+ "arcgisUrl": "http://111.198.10.15:13002/arcgis/rest/services/gztest/MapServer/"
}
diff --git a/public/config/project.configzq.json b/public/config/project.configzq.json
new file mode 100644
index 0000000..3c61685
--- /dev/null
+++ b/public/config/project.configzq.json
@@ -0,0 +1,21 @@
+{
+ "title": "管网运行监测系统",
+ "subtitle": "",
+ "theme":"blue",
+ "baseUrl": "http://60.208.121.150:5001/",
+ "wsUrl": "ws://60.208.121.150:5001/websocket/",
+ "mainPage": "http://111.198.10.15:11404/dcms/#",
+ "amapSecurityCode": "182a2c5889f7fe6d90546d9b8f4781ad",
+ "amapKey": "1733551f35b56f6d8e9c0a9d4c2523b",
+ "mapType": "gaode",
+ "alarmSound": true,
+ "refreshTime": 60,
+ "singleSys": true,
+ "refreshType":"websocket",
+ "showPointType":"massMarkers",
+ "showAllWells": true,
+ "provinceCode":"360000",
+ "cityCode":"361000",
+ "areaCode":"361024",
+ "arcgisUrl": "http://111.198.10.15:13002/arcgis/rest/services/zq_GxData0825/MapServer/"
+}
diff --git "a/public/static/images/dev-\344\272\225\347\233\226\347\212\266\346\200\201\347\233\221\346\265\213\344\273\252.png" "b/public/static/images/dev-\344\272\225\347\233\226\347\212\266\346\200\201\347\233\221\346\265\213\344\273\252.png"
deleted file mode 100644
index 0d95cba..0000000
--- "a/public/static/images/dev-\344\272\225\347\233\226\347\212\266\346\200\201\347\233\221\346\265\213\344\273\252.png"
+++ /dev/null
Binary files differ
diff --git "a/public/static/images/dev-\347\207\203\346\260\224\346\231\272\350\203\275\347\233\221\346\265\213\347\273\210\347\253\257.png" "b/public/static/images/dev-\347\207\203\346\260\224\346\231\272\350\203\275\347\233\221\346\265\213\347\273\210\347\253\257.png"
deleted file mode 100644
index d050e49..0000000
--- "a/public/static/images/dev-\347\207\203\346\260\224\346\231\272\350\203\275\347\233\221\346\265\213\347\273\210\347\253\257.png"
+++ /dev/null
Binary files differ
diff --git "a/public/static/images/dev-\347\256\241\347\233\257.png" "b/public/static/images/dev-\347\256\241\347\233\257.png"
deleted file mode 100644
index 96f8e94..0000000
--- "a/public/static/images/dev-\347\256\241\347\233\257.png"
+++ /dev/null
Binary files differ
diff --git "a/public/static/images/\344\272\225\347\233\226\345\221\212\350\255\246.png" "b/public/static/images/\344\272\225\347\233\226\345\221\212\350\255\246.png"
new file mode 100644
index 0000000..9eb23fc
--- /dev/null
+++ "b/public/static/images/\344\272\225\347\233\226\345\221\212\350\255\246.png"
Binary files differ
diff --git "a/public/static/images/\345\231\252\345\243\260\345\221\212\350\255\246.png" "b/public/static/images/\345\231\252\345\243\260\345\221\212\350\255\246.png"
new file mode 100644
index 0000000..b9a5d45
--- /dev/null
+++ "b/public/static/images/\345\231\252\345\243\260\345\221\212\350\255\246.png"
Binary files differ
diff --git "a/public/static/images/\345\231\252\345\243\260\350\256\260\345\275\225\344\273\252.png" "b/public/static/images/\345\231\252\345\243\260\350\256\260\345\275\225\344\273\252.png"
new file mode 100644
index 0000000..6efac42
--- /dev/null
+++ "b/public/static/images/\345\231\252\345\243\260\350\256\260\345\275\225\344\273\252.png"
Binary files differ
diff --git "a/public/static/images/\346\212\245\350\255\246.png" "b/public/static/images/\346\212\245\350\255\246.png"
new file mode 100644
index 0000000..f80eea1
--- /dev/null
+++ "b/public/static/images/\346\212\245\350\255\246.png"
Binary files differ
diff --git "a/public/static/images/\346\266\210\351\230\262\346\240\223\345\221\212\350\255\246.png" "b/public/static/images/\346\266\210\351\230\262\346\240\223\345\221\212\350\255\246.png"
new file mode 100644
index 0000000..e2091f4
--- /dev/null
+++ "b/public/static/images/\346\266\210\351\230\262\346\240\223\345\221\212\350\255\246.png"
Binary files differ
diff --git "a/public/static/images/\346\266\210\351\230\262\346\240\223\351\230\262\347\233\227\346\260\264.png" "b/public/static/images/\346\266\210\351\230\262\346\240\223\351\230\262\347\233\227\346\260\264.png"
new file mode 100644
index 0000000..1988fdf
--- /dev/null
+++ "b/public/static/images/\346\266\210\351\230\262\346\240\223\351\230\262\347\233\227\346\260\264.png"
Binary files differ
diff --git "a/public/static/images/\346\266\262\344\275\215\345\221\212\350\255\246.png" "b/public/static/images/\346\266\262\344\275\215\345\221\212\350\255\246.png"
new file mode 100644
index 0000000..f4dd83f
--- /dev/null
+++ "b/public/static/images/\346\266\262\344\275\215\345\221\212\350\255\246.png"
Binary files differ
diff --git "a/public/static/images/\346\266\262\344\275\215\347\233\221\346\265\213\344\273\252.png" "b/public/static/images/\346\266\262\344\275\215\347\233\221\346\265\213\344\273\252.png"
new file mode 100644
index 0000000..37acd5a
--- /dev/null
+++ "b/public/static/images/\346\266\262\344\275\215\347\233\221\346\265\213\344\273\252.png"
Binary files differ
diff --git "a/public/static/images/\347\207\203\346\260\224\345\221\212\350\255\246.png" "b/public/static/images/\347\207\203\346\260\224\345\221\212\350\255\246.png"
new file mode 100644
index 0000000..d5f00fb
--- /dev/null
+++ "b/public/static/images/\347\207\203\346\260\224\345\221\212\350\255\246.png"
Binary files differ
diff --git "a/public/static/images/\347\207\203\346\260\224\346\231\272\350\203\275\347\233\221\346\265\213.png" "b/public/static/images/\347\207\203\346\260\224\346\231\272\350\203\275\347\233\221\346\265\213.png"
new file mode 100644
index 0000000..420106b
--- /dev/null
+++ "b/public/static/images/\347\207\203\346\260\224\346\231\272\350\203\275\347\233\221\346\265\213.png"
Binary files differ
diff --git "a/public/static/images/\347\207\203\346\260\224\351\231\204\345\261\236\347\211\251.png" "b/public/static/images/\347\207\203\346\260\224\351\231\204\345\261\236\347\211\251.png"
new file mode 100644
index 0000000..8f94d81
--- /dev/null
+++ "b/public/static/images/\347\207\203\346\260\224\351\231\204\345\261\236\347\211\251.png"
Binary files differ
diff --git a/src/assets/overview/dark.jpg b/src/assets/overview/dark.jpg
new file mode 100644
index 0000000..c0761e0
--- /dev/null
+++ b/src/assets/overview/dark.jpg
Binary files differ
diff --git a/src/components/Mars3D/Mars3dMap.vue b/src/components/Mars3D/Mars3dMap.vue
index d7238e6..ca0565e 100644
--- a/src/components/Mars3D/Mars3dMap.vue
+++ b/src/components/Mars3D/Mars3dMap.vue
@@ -5,15 +5,13 @@
import Vue from 'vue'
import * as Cesium from 'mars3d-cesium'
-// 导入mars3d主库
import 'mars3d/dist/mars3d.css'
import 'mars3d-cesium/Build/Cesium/Widgets/widgets.css'
import * as mars3d from 'mars3d'
-// 导入插件(其他插件类似，插件清单访问：http://mars3d.cn/dev/guide/start/architecture.html)
// 为了方便使用,绑定到原型链，在其他vue文件，直接 this.mars3d 来使用
Vue.prototype.mars3d = mars3d
-Vue.prototype.Cesium = mars3d.Cesium
+Vue.prototype.Cesium = Cesium
import axios from 'axios'
export default {
@@ -106,9 +104,20 @@
map.scene.screenSpaceCameraController.zoomEventTypes = [Cesium.CameraEventType.MIDDLE_DRAG, Cesium.CameraEventType.WHEEL, Cesium.CameraEventType.PINCH]
map.scene.screenSpaceCameraController.rotateEventTypes = [Cesium.CameraEventType.LEFT_DRAG]
map.scene.screenSpaceCameraController.enableCollisionDetection = false
+
map.on(mars3d.EventType.renderError, function(event) {
window.location.reload()
})
+
+ // const handler = new Cesium.ScreenSpaceEventHandler(map.viewer.canvas)
+ // handler.setInputAction(function(evt) {
+ // var cartesian = map.viewer.camera.pickEllipsoid(evt.position, map.viewer.scene.globe.ellipsoid)
+ // var cartographic = Cesium.Cartographic.fromCartesian(cartesian)
+ // var lng = Cesium.Math.toDegrees(cartographic.longitude)// 经度值
+ // var lat = Cesium.Math.toDegrees(cartographic.latitude)// 纬度值
+ // console.log(' {point: [' + lng + ',' + lat + ',0]},')
+ // }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
+
this[`map${this.mapKey}`] = map
if (this.needBloomEffect) {
const bloomEffect = new mars3d.effect.BloomEffect({
@@ -119,13 +128,14 @@
const graphicLayer = new mars3d.layer.GraphicLayer()
map.addLayer(graphicLayer)
- // 垂直飞线
- // lat:36.290705 , lng:117.424668 ,
- // flyLine(graphicLayer, 117.33, 117.58, 36.59, 36.80)
+
// 挂载到全局对象下，所有组件通过 this.map 访问
Vue.prototype[`map${this.mapKey}`] = map
// 抛出事件
- this.$emit('onload', map, this.center)
+ const that= this
+ map.on(mars3d.EventType.load, function(event) {
+ that.$emit('onload', map, that.center)
+ })
},
changeBaseLayer(basemap) {
window.map.basemap = basemap
diff --git a/src/components/Mars3D/utils/ArcGisWfsLayer.js b/src/components/Mars3D/utils/ArcGisWfsLayer.js
index 7ca8399..9a569b4 100644
--- a/src/components/Mars3D/utils/ArcGisWfsLayer.js
+++ b/src/components/Mars3D/utils/ArcGisWfsLayer.js
@@ -2,14 +2,14 @@
import Vue from 'vue'
/**
- *
+ * 三维管线
* @param index gis图层编号
* @param color 管线颜色
* @param name 图层名称
* @param radius 管径
* @returns {ArcGisWfsLayer}
*/
-export function polylineVolumeP(index, color, name, radius) {
+export function polylineVolumeP(index, color, name, radius, height='') {
const wfsLayer3D = new mars3d.layer.ArcGisWfsLayer({
enablePickFeatures: false,
name: name,
@@ -23,8 +23,10 @@
radius: radius
},
callback: function(attr, styleOpt) {
- var val = { attr }.attr
- const height = -(Number(val.起始埋深) + Number(val.终止埋深)) / 2
+ if(height === ''){
+ var val = { attr }.attr
+ height = -(Number(val.起始埋深) + Number(val.终止埋深)) / 2
+ }
return { setHeight: height, height }
}
},
@@ -35,7 +37,7 @@
}
/**
- *
+ * 二维管线
* @param index gis图层编号
* @param color 管线颜色
* @param name 图层名称
@@ -69,7 +71,7 @@
export function building() {
const wfsLayer = new mars3d.layer.ArcGisWfsLayer({
name: '建筑物面矢量图层',
- url: Vue.prototype.baseConfig.buildingUrl,
+ url: '',
// minimumLevel: changeLevel,
symbol: {
type: 'polygonC',
diff --git a/src/components/Mars3D/utils/GeoJsonLayer.js b/src/components/Mars3D/utils/GeoJsonLayer.js
index 51ab972..4c8f784 100644
--- a/src/components/Mars3D/utils/GeoJsonLayer.js
+++ b/src/components/Mars3D/utils/GeoJsonLayer.js
@@ -9,7 +9,7 @@
* @param model 模型
* @param scale 模型缩放
* @param condition 搜索条件
- * @returns {{"3D": string, "2D": BaseClass}}
+ * @returns {{"3D": BaseGraphicLayer, "2D": BaseClass}}
*/
export function createPointModelLayer(index, name, image, model = '', scale, condition) {
@@ -38,7 +38,6 @@
scaleByDistance_farValue: 0.6,
scaleByDistance_near: 0,
scaleByDistance_nearValue: 1.4,
- clampToGround: true,
highlight: { type: 'click', image: '../static/images/high-marker.png' }
}
})
@@ -56,9 +55,7 @@
}
})
window.map.addLayer(layer)
- const layer3D = new mars3d.layer.GraphicLayer({
- name: name
- }).bindPopup(function(event) {
+ const layer3D = new mars3d.layer.GraphicLayer({ name: name}).bindPopup(function(event) {
const attr = event.graphic.attr || {}
return mars3d.Util.getTemplateHtml({ template: 'all', attr: attr })
})
@@ -133,7 +130,6 @@
scaleByDistance_farValue: 0.6,
scaleByDistance_near: 0,
scaleByDistance_nearValue: 1.4,
- clampToGround: true,
highlight: { type: 'click', image: '../static/images/high-marker.png' }
}
})
@@ -150,13 +146,13 @@
})
}
})
- .on(mars3d.EventType.show, function(event) {
- console.log(index, ' show时间(s):', new Date().getSeconds())
- }).on(mars3d.EventType.load, function(event) {
- console.log(index, ' load时间(s):', new Date().getSeconds())
- }).on(mars3d.EventType.postRender, function(event) {
- console.log(index, ' postRender时间(s):', new Date().getSeconds())
- })
+ // .on(mars3d.EventType.show, function(event) {
+ // console.log(index, ' show时间(s):', new Date().getSeconds())
+ // }).on(mars3d.EventType.load, function(event) {
+ // console.log(index, ' load时间(s):', new Date().getSeconds())
+ // }).on(mars3d.EventType.postRender, function(event) {
+ // console.log(index, ' postRender时间(s):', new Date().getSeconds())
+ // })
window.map.addLayer(layer)
queryServer.query({
where: condition,
@@ -173,3 +169,59 @@
})
return layer
}
+
+
+/**
+ * ModelC
+ * @param index 图层序号
+ * @param name 图层名称
+ * @param model 模型
+ * @param scale 模型缩放
+ * @param condition 搜索条件
+ * @returns {{"3D": BaseGraphicLayer, "2D": BaseClass}}
+ */
+
+export function createModelLayer(index, name, model = '', scale, condition) {
+ const queryServer = new mars3d.query.QueryArcServer({
+ url: Vue.prototype.baseConfig.arcgisUrl + index,
+ popup: 'all',
+ pageSize: 5000
+ })
+ const layer3D = new mars3d.layer.GraphicLayer({
+ name: name
+ }).bindPopup(function(event) {
+ const attr = event.graphic.attr || {}
+ return mars3d.Util.getTemplateHtml({ template: 'all', attr: attr })
+ })
+ window.map.addLayer(layer3D)
+ layer3D.show = false
+ queryServer.query({
+ where: condition,
+ success: (result) => {
+ if (result.count === 0) {
+ console.log('未查询到相关记录！')
+ }
+ if (model !== '') {
+ const points = []
+ result.geojson.features.forEach(item => {
+ points.push({
+ position: [item.geometry.coordinates[0], item.geometry.coordinates[1], 0],
+ style: {
+ scale: scale
+ },
+ attr: item.properties
+ })
+ })
+ const modelCombine = new mars3d.graphic.ModelCombine({
+ url: model,
+ instances: points
+ })
+ layer3D.addGraphic(modelCombine)
+ }
+ },
+ error: (error, msg) => {
+ console.log('服务访问错误,' + error)
+ }
+ })
+ return layer3D
+}
diff --git a/src/main.js b/src/main.js
index f8a4b83..964152c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -103,6 +103,12 @@
import axios from 'axios'
import service from '@/utils/request'
+
+import * as Cesium from 'mars3d-cesium'
+import 'mars3d/dist/mars3d.css'
+import 'mars3d-cesium/Build/Cesium/Widgets/widgets.css'
+import * as mars3d from 'mars3d'
+
axios.get('./config/project.config.json').then((result) => {
console.log('get config')
Vue.prototype.baseConfig = result.data
diff --git a/src/router/modules/well.js b/src/router/modules/well.js
index 0f6d5a6..17ed4e1 100644
--- a/src/router/modules/well.js
+++ b/src/router/modules/well.js
@@ -31,7 +31,7 @@
children: [
{
path: '/overview3d',
- component: () => import('@/views/overview/overview3dzq'),
+ component: () => import('@/views/overview/overview3d'),
name: 'overview3d',
meta: { title: '管网运行总览', icon: 'icon-config', permission: ['/overview/3d'] }
}
diff --git a/src/views/overview/components/popupLocation.vue b/src/views/overview/components/popupLocation.vue
index 6ad655b..3ba9efd 100644
--- a/src/views/overview/components/popupLocation.vue
+++ b/src/views/overview/components/popupLocation.vue
@@ -21,7 +21,7 @@
-
+
图上拾取
@@ -39,6 +39,10 @@
export default {
name: 'PopupLocation',
props: {
+ is3D: {
+ type: Boolean,
+ default: false
+ },
defaultPosition: {
type: Array,
default: () => []
diff --git a/src/views/overview/components/toolBox.vue b/src/views/overview/components/toolBox.vue
index 9b0eb95..83b1c5e 100644
--- a/src/views/overview/components/toolBox.vue
+++ b/src/views/overview/components/toolBox.vue
@@ -37,6 +37,12 @@
+
+
+ 深蓝底图
+
+
@@ -63,6 +69,10 @@
name: 'ToolBox',
components: { LayerChooseWindow },
props: {
+ is3D: {
+ type: Boolean,
+ default: false
+ },
show: {
type: Boolean,
default: false
@@ -166,7 +176,7 @@
position: absolute;
right: 10px;
top: 50px;
- width: 200px;
+ width: 230px;
background-color: rgba(255,255,255,0.9);
.window-body{
display: flex;
diff --git a/src/views/overview/overview3d.vue b/src/views/overview/overview3d.vue
index ed448eb..a984ea7 100644
--- a/src/views/overview/overview3d.vue
+++ b/src/views/overview/overview3d.vue
@@ -1,12 +1,12 @@
@@ -40,41 +40,43 @@
import PopupDataFilter from '@/views/overview/components/popupDataFilter'
import PopupLocation from '@/views/overview/components/popupLocation'
import MapSearchComp from '@/views/overview/components/mapSearchComp'
-
import axios from 'axios'
import * as Cesium from 'mars3d-cesium'
-// 导入mars3d主库
import 'mars3d/dist/mars3d.css'
import 'mars3d-cesium/Build/Cesium/Widgets/widgets.css'
import * as mars3d from 'mars3d'
+import Mars3dMap from '@/components/Mars3D/Mars3dMap'
import store from '@/store'
import { breadcrumb } from '@/settings'
import { RSAencrypt } from '@/utils/security'
+import {polylineC, polylineVolumeP} from "@/components/Mars3D/utils/ArcGisWfsLayer";
+import {createPointModelLayer, createModelLayer, createPointLayer} from "@/components/Mars3D/utils/GeoJsonLayer";
const line_layer = []
const line_layer_3D = []
-let point_layer = []
let point_layer_3D = []
-const dev_layer = []
+let dev_layer = []
const dev_layer_3D = []
const wellLoc = {}
let underground = null
+let alarm_layer = null
export default {
name: 'Overview3D',
- components: { MapSearchComp, PopupLocation, PopupDataFilter, ToolBox, AlarmList },
+ components: { Mars3dMap, MapSearchComp, PopupLocation, PopupDataFilter, ToolBox, AlarmList },
data() {
return {
initWell: false, // 是否初始化井信息
showLine: true,
showModel: false,
- colors: ['#7f0000', '#804000', '#00ff00', '#ff7fe9', '#ff7fe9', '#ff0000', '#00bfff', '#00ff00', '#ff0000'],
+ basemap: 1113,
+ colors: ['#7f0000', '#804000', '#ff7fe9', '#ff7fe9', '#00bfff', '#00ff00', '#ff0000', '#00ff00', '#ff0000'],
layerName:
- ['雨水附属物', '污水附属物', '天然气附属物', '燃气附属物', '给水附属物', '电信附属物', '电力附属物', '标识器',
- '雨水管线', '污水管线', '通信管线', '天然气管线', '燃气管线', '路灯管线', '给水管线', '电信管线', '电力管线'],
+ ['雨水管线', '污水管线', '天然气管线', '燃气管线', '给水管线', '电信管线', '电力管线', '通信管线','路灯管线',
+ '标识器', '井盖状态监测仪', '燃气智能监测', '消防栓防盗水', '液位监测仪', '噪声记录仪'],
baseLayer: 'gaode_vec', // 底图图层
- layers: [{ id: 'well', name: '井图层', children: [] }, { id: 'line', name: '管线图层', children: [] }, { id: 'dev', name: '设备图层', children: [] }, { id: 'alarm', name: '报警图层' }], // 图层列表
+ layers: [{ id: 'line', name: '管线图层', children: [] }, { id: 'dev', name: '设备图层', children: [] }, { id: 'alarm', name: '报警图层' }], // 图层列表
checkedLayer: [], // 选中的图层
center: ['114.88', '25.68'], // 地图中心
showLine: false,
@@ -131,15 +133,7 @@
alpha(val) {
window.map.basemap.opacity = val / 100
underground.alpha = val / 100
- // if (val <= 80 && window.map.level >= 19) {
- // const lineTypes = this.checkedLayer.filter(item => item.indexOf('line-') > -1).map(item => item.substring(5))
- // line_layer_3D.forEach(layer => { layer.show = lineTypes.indexOf(layer.options.name) > -1 })
- // line_layer.forEach(layer => layer.show = false)
- // } else {
- // const lineTypes = this.checkedLayer.filter(item => item.indexOf('line-') > -1).map(item => item.substring(5))
- // line_layer.forEach(layer => { layer.show = lineTypes.indexOf(layer.options.name) > -1 })
- // line_layer_3D.forEach(layer => layer.show = false)
- // }
+ this.cameraChange()
},
needRefresh(val) { // 需要刷新报警
if (val) this.refreshAlarm()
@@ -161,20 +155,15 @@
key: 'tagsView',
value: false
})
- this.$store.dispatch('GetConfig').then(() => {
- this.$message.success('连接服务器成功')
- this.handleLogin()
- }).catch((e) => {
- })
},
created() {
- // this.fetchWellType()
+ this.fetchWellType()
+ this.resultList = []
+ console.log('create', ' 时间(s):', new Date().getSeconds())
},
mounted() {
this.$nextTick(() => {
this.windowResize(window.innerHeight, window.innerWidth)
- this.initmars3d()
- this.resultList = []
})
},
beforeDestroy() {
@@ -192,20 +181,6 @@
}
},
methods: {
- // 点击登录按钮
- handleLogin() {
- const loginForm = {
- sid: this.$store.getters.sid,
- username: 'sykb',
- password: RSAencrypt('111111')
- }
- this.$store.dispatch('Login', loginForm).then(() => {
- // this.$message.success('登录成功')
- this.fetchWellType()
- this.loadToken = true
- }).catch(() => {
- })
- },
windowResize(height, width) {
// 查找header高度
const el_header = document.getElementById('app-header')
@@ -222,202 +197,63 @@
bodyHeight -= 5
store.dispatch('settings/ChangeHeight', bodyHeight)
},
- async initmars3d() {
- axios.get('./config/mars3dConfig.json').then((result) => {
- const data = result.data
- data.scene.center = { lat: this.center[1], lng: this.center[0], alt: 10000, heading: 360, pitch: -45 }
- this.initMars3dMap(data)
- })
- },
// 初始化放这里
- async initMars3dMap(mapOptions) {
- window.map = new mars3d.Map('mars3dContainer', mapOptions)
- window.map.basemap = 1113
- window.map.scene.screenSpaceCameraController.enableCollisionDetection = false
- window.map.scene.screenSpaceCameraController.tiltEventTypes = [Cesium.CameraEventType.RIGHT_DRAG]
- window.map.scene.screenSpaceCameraController.zoomEventTypes = [Cesium.CameraEventType.MIDDLE_DRAG, Cesium.CameraEventType.WHEEL, Cesium.CameraEventType.PINCH]
- window.map.scene.screenSpaceCameraController.rotateEventTypes = [Cesium.CameraEventType.LEFT_DRAG]
- // this.bloomEffect = new mars3d.effect.BloomEffect({
- // enabled: true
- // })
- // map.addEffect(this.bloomEffect)
+ onMapload(map, center) {
+ window.map = map
+ this.center = center
underground = new mars3d.thing.Underground({ alpha: this.alpha / 100 })
window.map.addThing(underground)
- window.map.basemap.opacity = this.alpha / 100
- // 崩溃后刷新
- window.map.on(mars3d.EventType.renderError, function(event) {
- window.location.reload()
- })
- const that = this
- window.map.on(mars3d.EventType.load, function(event) {
- window.map.on(mars3d.EventType.cameraChanged, that.cameraChange, that)
- that.initLine()
- that.initPoint()
- that.mapReady()
- that.mapLoading = false
- })
+ alarm_layer = new mars3d.layer.GraphicLayer({ name: '报警图层' })
+ window.map.addLayer(alarm_layer)
+ this.initLine()
+ this.initPoint()
+ window.map.on(mars3d.EventType.cameraChanged, this.cameraChange, this)
+ this.mapLoading = false
},
async initLine() {
- for (let i = 8; i <= 16; i++) {
- // 三维地下管线 (19)
- let wfsLayer = new mars3d.layer.ArcGisWfsLayer({
- name: this.layerName[i],
- popup: 'all',
- url: 'http://111.198.10.15:13002/arcgis/rest/services/gztest/MapServer/' + i,
- minimumLevel: 19,
- symbol: {
- type: 'polylineVolumeP',
- styleOptions: {
- color: this.colors[i - 8],
- shape: 'pipeline',
- radius: 0.1
- },
- callback: function(attr, styleOpt) {
- return { setHeight: -1.5 }
- }
- }
- })
- line_layer_3D.push(wfsLayer)
- window.map.addLayer(wfsLayer)
+ for (let i = 0; i <= 8; i++) {
+ // 三维管线
+ line_layer_3D.push(polylineVolumeP(i+8, this.colors[i], this.layerName[i], 0.1, -1.5))
// 二维管线
- wfsLayer = new mars3d.layer.ArcGisWfsLayer({
- name: this.layerName[i],
- url: 'http://111.198.10.15:13002/arcgis/rest/services/gztest/MapServer/' + i, // maximumLevel: 19,
- symbol: {
- type: 'polylineC',
- styleOptions: {
- color: this.colors[i - 8],
- width: 3,
- hasShadows: false
- }
- },
- popup: 'all'
- })
- window.map.addLayer(wfsLayer)
- line_layer.push(wfsLayer)
+ line_layer.push(polylineC(i+8, this.colors[i], this.layerName[i], 3))
}
},
- createPointLayer(index, image, model = '', condition) {
- const queryServer = new mars3d.query.QueryArcServer({
- url: 'http://111.198.10.15:13002/arcgis/rest/services/gztest/MapServer/' + index,
- popup: 'all',
- pageSize: 5000
- })
- const layer = new mars3d.layer.GeoJsonLayer({
- name: this.layerName[index],
- onCreateGraphic: function(options) {
- const points = options.position // 坐标
- const attr = options.attr // 属性信息
- const primitive = new mars3d.graphic.BillboardPrimitive({
- allowDrillPick: true,
- attr: attr,
- id: attr.编号,
- position: points,
- style: {
- image: image,
- scale: 0.6,
- hasPixelOffset: true,
- pixelOffsetY: -10,
- scaleByDistance: true,
- scaleByDistance_far: 30000,
- scaleByDistance_farValue: 0.6,
- scaleByDistance_near: 0,
- scaleByDistance_nearValue: 1.4,
- clampToGround: true,
- highlight: { type: 'click', image: '../static/images/high-marker.png' }
- }
- })
- layer.addGraphic(primitive)
- },
- popup: 'all'
- }).bindPopup(function(event) {
- return mars3d.Util.getTemplateHtml({ template: 'all', attr: event.graphic.attr || {}})
- }).on(mars3d.EventType.click, function(event) {
- if (window.map.camera.positionCartographic.height > 5000) {
- window.map.flyToPoint(event.graphic.position, {
- radius: 5000, // 距离目标点的距离
- duration: 1
- })
- }
- })
- point_layer.push(layer)
- window.map.addLayer(layer)
-
- queryServer.query({
- where: condition,
- success: (result) => {
- if (result.count === 0) {
- this.$message.warning('未查询到相关记录！')
- }
- layer.load({ data: result.geojson })
- if (model !== '') {
- const layer3D = new mars3d.layer.GraphicLayer({
- name: this.layerName[index]
- }).bindPopup(function(event) {
- const attr = event.graphic.attr || {}
- return mars3d.Util.getTemplateHtml({ template: 'all', attr: attr })
- })
- layer3D.show = false
- window.map.addLayer(layer3D)
- point_layer_3D.push(layer3D)
- const well = []
- result.geojson.features.forEach(item => {
- well.push({
- position: [item.geometry.coordinates[0], item.geometry.coordinates[1], 0],
- style: {
- scale: 1.5
- },
- attr: item.properties
- })
- })
- const modelCombine = new mars3d.graphic.ModelCombine({
- url: model,
- instances: well
- })
- layer3D.addGraphic(modelCombine)
- }
- },
- error: (error, msg) => {
- this.$message.error('服务访问错误,' + error)
- }
- })
- },
async initPoint(condition = '') {
- if (point_layer.length !== 0) {
- point_layer.forEach(item => window.map.removeLayer(item))
- }
+ const layerName = ['雨水附属物', '污水附属物', '天然气附属物', '燃气附属物', '给水附属物', '电信附属物', '电力附属物']
if (point_layer_3D.length !== 0) {
point_layer_3D.forEach(item => window.map.removeLayer(item))
}
- point_layer = []
point_layer_3D = []
- const str = condition === '' ? '1<>1' : "编号 LIKE '%" + condition + "%' or 附属物名称 LIKE '%" + condition + "%' or 所属道路 LIKE '%" + condition + "%'"
- for (let i = 0; i <= 7; i++) {
- if (i !== 7) {
- this.createPointLayer(i, '../static/images/' + this.layerName[i] + '.png', '../static/model/ys.gltf', str)
- } else {
- this.createPointLayer(i, '../static/images/' + this.layerName[i] + '.png', '', str)
- }
+
+ if (dev_layer.length !== 0) {
+ dev_layer.forEach(item => window.map.removeLayer(item))
}
+ dev_layer = []
+ const str = condition === '' ? '1<>1' : "编号 LIKE '%" + condition + "%' or 附属物名称 LIKE '%" + condition + "%' or 所属道路 LIKE '%" + condition + "%'"
+ const bsq = condition === '' ? '1<>1' : "编号 LIKE '%" + condition + "%' or 对象名称 LIKE '%" + condition + "%' or 所属道路 LIKE '%" + condition + "%'"
+
+ dev_layer.push(createPointLayer('标识器', 7, '../static/images/标识器.png', bsq))
+
+ for (let i = 0; i <= 7; i++) {
+ point_layer_3D.push(createModelLayer(i, layerName[i], '../static/model/ys.gltf', 1.5, str))
+ }
+ this.mapReady()
},
- // 控制二维线的显隐
cameraChange() {
// console.log('map-level:' + window.map.level)
// console.log('alpha:' + this.alpha)
- if (window.map.level <= 19) { // 远
- if (this.showModel) {
- point_layer_3D.forEach(layer => { layer.show = false })
- this.showModel = false
- }
- } else if (this.alpha <= 80) { // 近，透
- if (!this.showModel) {
- const wellTypes = this.checkedLayer.filter(item => item.indexOf('well-') > -1).map(item => item.substring(5))
+ if (!this.showModel) {
+ if(this.alpha <= 80 && window.map.level > 19){
+ const lineTypes = this.checkedLayer.filter(item => item.indexOf('line-') > -1).map(item => item.substring(5))
+ const wellTypes = lineTypes.map(item => item.replace('管线','附属物'))
point_layer_3D.forEach(layer => { layer.show = wellTypes.indexOf(layer.options.name) > -1 })
+ line_layer_3D.forEach(layer => { layer.show = lineTypes.indexOf(layer.options.name) > -1 })
this.showModel = true
}
- } else { // 近，不透
- if (this.showModel) {
+ }else{
+ if(this.alpha >80 || window.map.level <= 19){
point_layer_3D.forEach(layer => { layer.show = false })
+ line_layer_3D.forEach(layer => { layer.show = false })
this.showModel = false
}
}
@@ -428,9 +264,9 @@
this.fetchWellList() // 加载全部井
this.firstAmount = true
this.toolShow = true
- if (this.refreshType === 'clock') { // 如果需要倒计时刷新的
+ // if (this.refreshType === 'clock') { // 如果需要倒计时刷新的
setTimeout(() => { this.countDown() }, 1000)
- }
+ // }
},
// 获取全部井列表
fetchWellList() {
@@ -453,35 +289,33 @@
filterLayer(checkedLayer) {
this.checkedLayer = checkedLayer
// 1.过滤井图层
- const wellTypes = checkedLayer.filter(item => item.indexOf('well-') > -1).map(item => item.substring(5))
+
const lineTypes = checkedLayer.filter(item => item.indexOf('line-') > -1).map(item => item.substring(5))
+ const wellTypes = lineTypes.map(item => item.replace('管线','附属物'))
+
// 点
- point_layer.forEach(layer => { layer.show = wellTypes.indexOf(layer.options.name) > -1 })
point_layer_3D.forEach(layer => { layer.show = wellTypes.indexOf(layer.options.name) > -1 })
// 线
line_layer.forEach(layer => { layer.show = lineTypes.indexOf(layer.options.name) > -1 })
line_layer_3D.forEach(layer => { layer.show = lineTypes.indexOf(layer.options.name) > -1 })
- // 2.选中or没选中报警图层
- if (checkedLayer.indexOf('alarm') !== -1) {
- this.showAlarm = true
- } else {
- this.showAlarm = false
- }
+ // 2.选中or没选中设备图层
+ const devTypes = checkedLayer.filter(item => item.indexOf('dev-') > -1).map(item => item.substring(4))
+ dev_layer.forEach(layer => { layer.show = devTypes.indexOf(layer.options.name) > -1 })
+
+ // 3.选中or没选中报警图层
+ checkedLayer.indexOf('alarm') !== -1 ? alarm_layer.show = true : alarm_layer.show = false
+
},
// 切换底图
changeBaseMap(type) {
this.baseLayer = type
- if (type === 'gaode_vec') {
- window.map.basemap = 1112
- if (this.bloomEffect !== null) {
- this.bloomEffect.enabled = false
- }
+ if (type === 'dark') {
+ this.basemap = 1112
+ } else if (type === 'gaode_vec') {
+ this.basemap = 1111
} else {
- window.map.basemap = 1113
- if (this.bloomEffect !== null) {
- this.bloomEffect.enabled = true
- }
+ this.basemap = 1113
}
},
// 倒计时函数
@@ -496,31 +330,6 @@
},
// 获取点位类型，显示点位类型下拉
fetchWellType() {
- // getWellType().then(response => {
- // this.wellTypeList = []
- // // 如果该用户支持的点位类型只有一个，则不显示该筛选框
- // const supportWellTypes = this.$store.getters.wellTypes
- // this.wellTypeList = response.data.filter(wellType => {
- // return supportWellTypes.findIndex(item => item == wellType.value) > -1
- // })
- // })
- this.wellTypeList = this.layerName.map((item, index) => {
- return {
- value: item,
- name: item
- }
- })
- this.wellTypeList.length = 8
- const wellLayer = {
- id: 'well',
- name: '井图层',
- children: this.wellTypeList.map(item => {
- return {
- id: 'well-' + item.value,
- name: item.name
- }
- })
- }
const lineLayer = {
id: 'line',
name: '管线图层',
@@ -529,58 +338,52 @@
id: 'line-' + item,
name: item
}
- }).splice(8, 9)
+ }).splice(0, 9)
}
- const deviceTypes = this.$store.getters.deviceTypes
- this.layers.splice(0, 1, wellLayer)
- this.layers.splice(1, 1, lineLayer)
+ const devLayer = {
+ id: 'dev',
+ name: '设备图层',
+ children: this.layerName.map(item => {
+ return {
+ id: 'dev-' + item,
+ name: item
+ }
+ }).splice(9, 6)
+ }
+ this.layers.splice(0, 1, lineLayer)
+ this.layers.splice(1, 1, devLayer)
if (this.baseConfig.showAllWells) {
- // this.checkedLayer = [...this.checkedLayer, 'well', this.wellTypeList.map(item => 'well-' + item.value), 'line', lineLayer.children.map(item => item.id)]
- this.checkedLayer = ['well', 'line']
- this.wellTypeList.forEach(item => this.checkedLayer.push('well-' + item.value))
+ this.checkedLayer = ['line', 'dev']
lineLayer.children.forEach(item => this.checkedLayer.push('line-' + item.name))
+ lineLayer.children.forEach(item => this.checkedLayer.push('dev-' + item.name))
} else {
this.checkedLayer = [...this.checkedLayer]
}
if (this.wellTypeList.length <= 1) {
this.showWellType = false
}
- getDeviceType(this.listQuery).then(response => {
- this.deviceTypeList = []
- // 过滤掉该单位不支持的设备类型
- const deviceTypes = this.$store.getters.deviceTypes
- for (const deviceType of response.data) {
- if (deviceTypes.indexOf(deviceType.value) !== -1) {
- this.deviceTypeList.push(deviceType)
- }
- }
- const devLayer = {
- id: 'dev',
- name: '设备图层',
- children: this.deviceTypeList.map(item => {
- return {
- id: 'dev-' + item.value,
- name: item.name
- }
- })
- }
- this.layers.splice(2, 1, devLayer)
- })
- },
- /**
- * 数据筛选
- * @param listQuery 筛选条件
- * @param showMessage 是否告知筛选结果
- */
- dataFilter(listQuery, showMessage = true) {
- if (this.type === 'massMarkers') { // 过滤海量点
- this.filterMassMarker(listQuery, showMessage)
- this.filterAlarm(listQuery, showMessage)
- } else if (this.type === 'cluster') { // 过滤聚合点
- // this.filterClusters(listQuery, showMessage)
- this.filterAlarm(listQuery, showMessage)
- }
+ // getDeviceType(this.listQuery).then(response => {
+ // this.deviceTypeList = []
+ // // 过滤掉该单位不支持的设备类型
+ // const deviceTypes = this.$store.getters.deviceTypes
+ // for (const deviceType of response.data) {
+ // if (deviceTypes.indexOf(deviceType.value) !== -1) {
+ // this.deviceTypeList.push(deviceType)
+ // }
+ // }
+ // const devLayer = {
+ // id: 'dev',
+ // name: '设备图层',
+ // children: this.deviceTypeList.map(item => {
+ // return {
+ // id: 'dev-' + item.value,
+ // name: item.name
+ // }
+ // })
+ // }
+ // this.layers.splice(2, 1, devLayer)
+ // })
},
// 清空查询
clearSearch() {
@@ -648,114 +451,6 @@
}
this.resetMassMarker()
},
- // 过滤报警
- filterAlarm(listQuery, showMessage = false) {
- const hideWellIds = []// 要隐藏的点位编号
- // 整理筛选条件
- const keywords = listQuery.keywords
- const wellTypes = listQuery.wellTypes ? listQuery.wellTypes : listQuery.wellType ? [listQuery.wellType] : [] // 点位类型
- let deptids = [] // 所有权属
- if (listQuery.deptid) {
- deptids = this.fetchDeptList(listQuery.deptid) // 获取所有下级
- }
- // 查询报警的井
- for (const marker of this.alarmWells) {
- let show = true
- // 关键字不为空，且没有匹配成功，不显示， 关键字匹配点位编号和位置
- if (keywords && keywords !== '' && !(marker.wellCode.indexOf(keywords) !== -1 || marker.position.indexOf(keywords) !== -1)) {
- show = false
- }
- // 部门不为空， 且没有匹配成功，多部门匹配
- if (deptids.length > 0 && deptids.indexOf(marker.deptid) === -1) {
- show = false
- }
- // 点位类型不为空，且没有匹配成功
- if (wellTypes && wellTypes.length > 0 && wellTypes.indexOf(marker.wellType) === -1) {
- show = false
- }
- // 如果show为false，放入需要隐藏的井id列表
- if (show === false) {
- hideWellIds.push(marker.wellId)
- }
- marker.visible = show
- }
- // 4.过滤报警marker：alarmWells 如果没有找到符合要求的井，直接将全部查询结果隐藏，并将所有报警隐藏，否则按照查询结果筛选需要隐藏的报警
- if (hideWellIds.length === this.alarmWells.length) {
- for (const alarmWell of this.alarmWells) {
- alarmWell.visible = false
- }
- } else {
- // 将报警隐藏
- for (const alarmWell of this.alarmWells) {
- if (hideWellIds.indexOf(alarmWell.wellId) > -1) {
- alarmWell.visible = false
- } else {
- alarmWell.visible = true
- }
- }
- }
- // 5.过滤显示列表：alarmList
- this.alarmList = []
- if (hideWellIds.length > 0) { // 如果有要隐藏的井，过滤
- for (const alarm of this.alarmListOri) {
- const findFlag = hideWellIds.findIndex(code => code === alarm.wellId)
- if (findFlag === -1) {
- this.alarmList.push(alarm)
- }
- }
- } else { // 如果没有直接等于alarmListOri
- this.alarmList = this.alarmListOri
- }
- },
- // 获取全部井列表
- fetchDeviceList() {
- this.loading = false
- this.deviceTypeList.forEach(item => {
- const param = {
- deviceType: item.value
- }
- // getDeviceAllList(param).then(response => {
- // if (response.code === 200) {
- // if (response.data.length === 0) return
- // const graphicLayer = new mars3d.layer.GraphicLayer({ name: item.name })
- // window.map.addLayer(graphicLayer)
- // dev_layer.push(graphicLayer)
- // const name = item.name.substr(0, 1)
- // response.data.forEach(data => {
- // if (wellLoc[data.wellCode] !== undefined && wellLoc[data.wellCode].length === 2) {
- // const primitive = new mars3d.graphic.ModelPrimitive({
- // position: [wellLoc[data.wellCode][0], wellLoc[data.wellCode][1], -3],
- // style: {
- // url: '../static/model/' + 1 + '.glb',
- // scale: 1,
- // label: {
- // // 面中心点，显示文字的配置
- // text: name, // 对应的属性名称
- // opacity: 1,
- // font_size: 14,
- // color: '#ffffff',
- // font_weight: 'bold',
- // font_style: 'normal',
- // addHeight: 3,
- // // scaleByDistance: true,
- // //
- // // pixelOffsetY: -40,
- // //
- // // scaleByDistance_far: 300000,
- // // scaleByDistance_farValue: 0.4,
- // // scaleByDistance_near: 1,
- // // scaleByDistance_nearValue: 1.4,
- // visibleDepth: false
- // }
- // }
- // })
- // graphicLayer.addGraphic(primitive)
- // }
- // })
- // }
- // })
- })
- },
// 刷新报警列表
refreshAlarm() {
console.log('refreshAlarm')
@@ -964,7 +659,7 @@
left: 8px;
display: flex;
flex-wrap: wrap;
- background-color: #fcfbe8;
+ background: linear-gradient(to top left, #48617c, #619bd4);
border-radius: 5px;
width: 300px;
height: 200px;
@@ -973,9 +668,9 @@
border-color: rgba(0, 0, 0, .05);
.cover-item{
width: 50%;
+ width: 50%;
font-size: 16px;
- font-weight: 600;
- color: #505a5e;
+ color: white;
}
}
.map-gz {
diff --git a/.browserslistrc b/.browserslistrc
deleted file mode 100644
index 9725b0f..0000000
--- a/.browserslistrc
+++ /dev/null
@@ -1,4 +0,0 @@
-> 1%
-last 2 versions
-IE >=8
-not dead
diff --git a/.eslintrc.js b/.eslintrc.js
index ad3db7c..2307fed 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -19,10 +19,11 @@
rules: {
'vue/max-attributes-per-line': [2, {
'singleline': 10,
- 'multiline': {
- 'max': 1,
- 'allowFirstLine': false
- }
+ // 'multiline': {
+ // 'max': 1,
+ // 'allowFirstLine': false,
+ // ignore: ['some-attribute', '/(?:xs|sm|md|lg|xl)\\d{1,2}/']
+ // }
}],
'vue/name-property-casing': ['error', 'PascalCase'],
'accessor-pairs': 2,
diff --git a/package.json b/package.json
index 4b4e458..f0bd847 100644
--- a/package.json
+++ b/package.json
@@ -15,53 +15,76 @@
"@riophae/vue-treeselect": "^0.4.0",
"animate.css": "^4.1.1",
"axios": "^0.21.1",
- "cesium": "^1.95.0",
"clipboard": "^2.0.8",
- "copy-webpack-plugin": "^6.0.3",
- "core-js": "^3.6.5",
+ "core-js": "^3.8.3",
"echarts": "^4.2.1",
"element-ui": "^2.15.7",
"js-cookie": "^3.0.0",
"jsencrypt": "^3.2.1",
- "mars3d": "3.3.15",
- "mars3d-space": "^3.3.17",
+ "mars3d": "^3.4.7",
+ "mars3d-space": "^3.4.7",
"mockjs": "^1.1.0",
+ "node-polyfill-webpack-plugin": "^2.0.1",
"normalize.css": "^8.0.1",
"nprogress": "^0.2.0",
"uppercamelcase": "^3.0.0",
"v-charts": "^1.19.0",
"v-viewer": "^1.6.4",
- "vue": "^2.6.11",
+ "vue": "^2.6.14",
"vue-amap": "^0.5.10",
- "vue-router": "^3.2.0",
- "vuex": "^3.4.0"
+ "vue-router": "^3.5.3",
+ "vuex": "^3.6.2",
+ "webpack": "^5.74.0"
},
"devDependencies": {
- "@vue/cli-plugin-babel": "~4.5.0",
- "@vue/cli-plugin-e2e-cypress": "~4.5.0",
- "@vue/cli-plugin-eslint": "~4.5.0",
- "@vue/cli-plugin-router": "~4.5.0",
- "@vue/cli-plugin-unit-jest": "~4.5.0",
- "@vue/cli-plugin-vuex": "~4.5.0",
- "@vue/cli-service": "~4.5.0",
- "@vue/eslint-config-standard": "^5.1.2",
- "@vue/test-utils": "^1.0.3",
- "babel-eslint": "^10.1.0",
- "babel-plugin-dynamic-import-node": "^2.3.3",
- "chalk": "^4.1.2",
- "chokidar": "^3.5.2",
- "copy-webpack-plugin": "^6.4.1",
- "eslint": "^6.7.2",
+ "@babel/core": "^7.12.16",
+ "@babel/eslint-parser": "^7.12.16",
+ "@vue/cli-plugin-babel": "~5.0.0",
+ "@vue/cli-plugin-eslint": "~5.0.0",
+ "@vue/cli-service": "~5.0.0",
+ "copy-webpack-plugin": "^6.3.2",
+ "eslint": "^7.32.0",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.0",
- "eslint-plugin-vue": "^6.2.2",
- "mock": "^0.1.1",
- "sass": "^1.26.5",
+ "eslint-plugin-vue": "^8.0.3",
+ "html-webpack-plugin": "^5.5.0",
+ "sass": "^1.32.12",
"sass-loader": "^8.0.2",
- "script-ext-html-webpack-plugin": "^2.1.5",
"svg-sprite-loader": "^6.0.9",
- "vue-template-compiler": "^2.6.11"
+ "vue-template-compiler": "^2.6.14"
+ },
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/marsgis/mars3d-vue-template.git"
+ },
+ "bugs": {
+ "url": "https://github.com/marsgis/mars3d-vue-template/issues",
+ "email": "wh@marsgis.cn"
+ },
+ "keywords": [
+ "marsgis",
+ "mars3d",
+ "cesium",
+ "vue",
+ "gis"
+ ],
+ "author": "火星科技",
+ "license": "Apache-2.0",
+ "homepage": "http://mars3d.cn",
+ "eslintConfig": {
+ "root": true,
+ "env": {
+ "node": true
+ },
+ "extends": [
+ "plugin:vue/essential",
+ "eslint:recommended"
+ ],
+ "parserOptions": {
+ "parser": "@babel/eslint-parser"
+ },
+ "rules": {}
}
}
diff --git a/public/config/mars3dConfig.json b/public/config/mars3dConfig.json
index 29a3c40..498d918 100644
--- a/public/config/mars3dConfig.json
+++ b/public/config/mars3dConfig.json
@@ -1,8 +1,9 @@
{
"scene": {
"center": {
- "lat": "36.48", "lng": "117.48", "alt": 20000, "heading": 360, "pitch": -45
+ "lat": "25.675", "lng": "114.875", "alt": 10000, "heading": 360, "pitch": -45
},
+ "requestRenderMode": true,
"showSun": false,
"showSkyAtmosphere": false,
"fog": true,
@@ -59,25 +60,5 @@
"key": ["216ee92889e17ab1b083fae665d522b8"],
"show": true
}
- ],
- "layers": [
- {
- "type": "geojson",
- "id": "building",
- "url": "http://111.198.10.15:11404/3d/zqBuilding.json",
- "symbol": {
- "type": "polygonP",
- "styleOptions": {
- "color": "rgb(52,125,246)",
- "outline": false,
- "opacity": 0.8
- }
- },
- "buildings": {
- "height": 100
- },
- "popup": "{name}",
- "show": true
- }
]
}
diff --git a/public/config/mars3dConfigzq.json b/public/config/mars3dConfigzq.json
new file mode 100644
index 0000000..7752593
--- /dev/null
+++ b/public/config/mars3dConfigzq.json
@@ -0,0 +1,84 @@
+{
+ "scene": {
+ "center": {
+ "lat": "36.48", "lng": "117.48", "alt": 20000, "heading": 360, "pitch": -45
+ },
+ "requestRenderMode": true,
+ "showSun": false,
+ "showSkyAtmosphere": false,
+ "fog": true,
+ "fxaa": true,
+ "globe": {
+ "depthTestAgainstTerrain": true,
+ "baseColor": "#1A2126",
+ "showGroundAtmosphere": false,
+ "enableLighting": false
+ },
+ "control": {
+ "infoBox": true
+ },
+ "cameraController": {
+ "zoomFactor": 3.0,
+ "minimumZoomDistance": 1,
+ "maximumZoomDistance": 500000.0,
+ "enableRotate": true,
+ "enableTranslate": true,
+ "enableTilt": true,
+ "enableZoom": true,
+ "enableCollisionDetection": false
+ }
+ },
+ "basemaps": [
+ {
+ "pid": 10,
+ "id": 1112,
+ "name": "天地图",
+ "type": "group",
+ "layers": [
+ { "name": "注记", "type": "tdt", "layer": "ter_z", "key": ["216ee92889e17ab1b083fae665d522b8"] },
+ { "name": "注记", "type": "tdt", "layer": "img_z", "key": ["216ee92889e17ab1b083fae665d522b8"] }
+ ]
+ },
+ {
+ "id": 1111,
+ "pid": 10,
+ "name": "天地图电子",
+ "icon": "http://mars3d.cn/example/img/basemaps/tdt_vec.png",
+ "type": "group",
+ "layers": [
+ { "name": "底图", "type": "tdt", "layer": "vec_d", "key": ["216ee92889e17ab1b083fae665d522b8"] },
+ { "name": "注记", "type": "tdt", "layer": "vec_z", "key": ["216ee92889e17ab1b083fae665d522b8"] }
+ ]
+ },
+ {
+ "id": 1113,
+ "pid": 10,
+ "name": "天地图影像",
+ "icon": "http://mars3d.cn/example/img/basemaps/tdt_img.png",
+ "type": "tdt",
+ "layer": "img_d",
+ "key": ["216ee92889e17ab1b083fae665d522b8"],
+ "show": true
+ }
+ ],
+ "layers": [
+ {
+ "type": "geojson",
+ "id": "building",
+ "url": "http://111.198.10.15:11404/3d/zqBuilding.json",
+ "symbol": {
+ "type": "polygonP",
+ "styleOptions": {
+ "color": "rgb(52,125,246)",
+ "outline": false,
+ "opacity": 0.8
+ }
+ },
+ "buildings": {
+ "height": 100
+ },
+ "popup": "{name}",
+ "show": true
+ }
+ ]
+}
diff --git a/public/config/project.config.json b/public/config/project.config.json
index 69da0af..a9cb472 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -17,6 +17,5 @@
"provinceCode":"360000",
"cityCode":"361000",
"areaCode":"361024",
- "arcgisUrl": "http://111.198.10.15:13002/arcgis/rest/services/zq_GxData0825/MapServer/",
- "buildingUrl": "http://111.198.10.15:13002/arcgis/rest/services/zqBuilding/MapServer/0"
+ "arcgisUrl": "http://111.198.10.15:13002/arcgis/rest/services/gztest/MapServer/"
}
diff --git a/public/config/project.configzq.json b/public/config/project.configzq.json
new file mode 100644
index 0000000..3c61685
--- /dev/null
+++ b/public/config/project.configzq.json
@@ -0,0 +1,21 @@
+{
+ "title": "管网运行监测系统",
+ "subtitle": "",
+ "theme":"blue",
+ "baseUrl": "http://60.208.121.150:5001/",
+ "wsUrl": "ws://60.208.121.150:5001/websocket/",
+ "mainPage": "http://111.198.10.15:11404/dcms/#",
+ "amapSecurityCode": "182a2c5889f7fe6d90546d9b8f4781ad",
+ "amapKey": "1733551f35b56f6d8e9c0a9d4c2523b",
+ "mapType": "gaode",
+ "alarmSound": true,
+ "refreshTime": 60,
+ "singleSys": true,
+ "refreshType":"websocket",
+ "showPointType":"massMarkers",
+ "showAllWells": true,
+ "provinceCode":"360000",
+ "cityCode":"361000",
+ "areaCode":"361024",
+ "arcgisUrl": "http://111.198.10.15:13002/arcgis/rest/services/zq_GxData0825/MapServer/"
+}
diff --git "a/public/static/images/dev-\344\272\225\347\233\226\347\212\266\346\200\201\347\233\221\346\265\213\344\273\252.png" "b/public/static/images/dev-\344\272\225\347\233\226\347\212\266\346\200\201\347\233\221\346\265\213\344\273\252.png"
deleted file mode 100644
index 0d95cba..0000000
--- "a/public/static/images/dev-\344\272\225\347\233\226\347\212\266\346\200\201\347\233\221\346\265\213\344\273\252.png"
+++ /dev/null
Binary files differ
diff --git "a/public/static/images/dev-\347\207\203\346\260\224\346\231\272\350\203\275\347\233\221\346\265\213\347\273\210\347\253\257.png" "b/public/static/images/dev-\347\207\203\346\260\224\346\231\272\350\203\275\347\233\221\346\265\213\347\273\210\347\253\257.png"
deleted file mode 100644
index d050e49..0000000
--- "a/public/static/images/dev-\347\207\203\346\260\224\346\231\272\350\203\275\347\233\221\346\265\213\347\273\210\347\253\257.png"
+++ /dev/null
Binary files differ
diff --git "a/public/static/images/dev-\347\256\241\347\233\257.png" "b/public/static/images/dev-\347\256\241\347\233\257.png"
deleted file mode 100644
index 96f8e94..0000000
--- "a/public/static/images/dev-\347\256\241\347\233\257.png"
+++ /dev/null
Binary files differ
diff --git "a/public/static/images/\344\272\225\347\233\226\345\221\212\350\255\246.png" "b/public/static/images/\344\272\225\347\233\226\345\221\212\350\255\246.png"
new file mode 100644
index 0000000..9eb23fc
--- /dev/null
+++ "b/public/static/images/\344\272\225\347\233\226\345\221\212\350\255\246.png"
Binary files differ
diff --git "a/public/static/images/\345\231\252\345\243\260\345\221\212\350\255\246.png" "b/public/static/images/\345\231\252\345\243\260\345\221\212\350\255\246.png"
new file mode 100644
index 0000000..b9a5d45
--- /dev/null
+++ "b/public/static/images/\345\231\252\345\243\260\345\221\212\350\255\246.png"
Binary files differ
diff --git "a/public/static/images/\345\231\252\345\243\260\350\256\260\345\275\225\344\273\252.png" "b/public/static/images/\345\231\252\345\243\260\350\256\260\345\275\225\344\273\252.png"
new file mode 100644
index 0000000..6efac42
--- /dev/null
+++ "b/public/static/images/\345\231\252\345\243\260\350\256\260\345\275\225\344\273\252.png"
Binary files differ
diff --git "a/public/static/images/\346\212\245\350\255\246.png" "b/public/static/images/\346\212\245\350\255\246.png"
new file mode 100644
index 0000000..f80eea1
--- /dev/null
+++ "b/public/static/images/\346\212\245\350\255\246.png"
Binary files differ
diff --git "a/public/static/images/\346\266\210\351\230\262\346\240\223\345\221\212\350\255\246.png" "b/public/static/images/\346\266\210\351\230\262\346\240\223\345\221\212\350\255\246.png"
new file mode 100644
index 0000000..e2091f4
--- /dev/null
+++ "b/public/static/images/\346\266\210\351\230\262\346\240\223\345\221\212\350\255\246.png"
Binary files differ
diff --git "a/public/static/images/\346\266\210\351\230\262\346\240\223\351\230\262\347\233\227\346\260\264.png" "b/public/static/images/\346\266\210\351\230\262\346\240\223\351\230\262\347\233\227\346\260\264.png"
new file mode 100644
index 0000000..1988fdf
--- /dev/null
+++ "b/public/static/images/\346\266\210\351\230\262\346\240\223\351\230\262\347\233\227\346\260\264.png"
Binary files differ
diff --git "a/public/static/images/\346\266\262\344\275\215\345\221\212\350\255\246.png" "b/public/static/images/\346\266\262\344\275\215\345\221\212\350\255\246.png"
new file mode 100644
index 0000000..f4dd83f
--- /dev/null
+++ "b/public/static/images/\346\266\262\344\275\215\345\221\212\350\255\246.png"
Binary files differ
diff --git "a/public/static/images/\346\266\262\344\275\215\347\233\221\346\265\213\344\273\252.png" "b/public/static/images/\346\266\262\344\275\215\347\233\221\346\265\213\344\273\252.png"
new file mode 100644
index 0000000..37acd5a
--- /dev/null
+++ "b/public/static/images/\346\266\262\344\275\215\347\233\221\346\265\213\344\273\252.png"
Binary files differ
diff --git "a/public/static/images/\347\207\203\346\260\224\345\221\212\350\255\246.png" "b/public/static/images/\347\207\203\346\260\224\345\221\212\350\255\246.png"
new file mode 100644
index 0000000..d5f00fb
--- /dev/null
+++ "b/public/static/images/\347\207\203\346\260\224\345\221\212\350\255\246.png"
Binary files differ
diff --git "a/public/static/images/\347\207\203\346\260\224\346\231\272\350\203\275\347\233\221\346\265\213.png" "b/public/static/images/\347\207\203\346\260\224\346\231\272\350\203\275\347\233\221\346\265\213.png"
new file mode 100644
index 0000000..420106b
--- /dev/null
+++ "b/public/static/images/\347\207\203\346\260\224\346\231\272\350\203\275\347\233\221\346\265\213.png"
Binary files differ
diff --git "a/public/static/images/\347\207\203\346\260\224\351\231\204\345\261\236\347\211\251.png" "b/public/static/images/\347\207\203\346\260\224\351\231\204\345\261\236\347\211\251.png"
new file mode 100644
index 0000000..8f94d81
--- /dev/null
+++ "b/public/static/images/\347\207\203\346\260\224\351\231\204\345\261\236\347\211\251.png"
Binary files differ
diff --git a/src/assets/overview/dark.jpg b/src/assets/overview/dark.jpg
new file mode 100644
index 0000000..c0761e0
--- /dev/null
+++ b/src/assets/overview/dark.jpg
Binary files differ
diff --git a/src/components/Mars3D/Mars3dMap.vue b/src/components/Mars3D/Mars3dMap.vue
index d7238e6..ca0565e 100644
--- a/src/components/Mars3D/Mars3dMap.vue
+++ b/src/components/Mars3D/Mars3dMap.vue
@@ -5,15 +5,13 @@
import Vue from 'vue'
import * as Cesium from 'mars3d-cesium'
-// 导入mars3d主库
import 'mars3d/dist/mars3d.css'
import 'mars3d-cesium/Build/Cesium/Widgets/widgets.css'
import * as mars3d from 'mars3d'
-// 导入插件(其他插件类似，插件清单访问：http://mars3d.cn/dev/guide/start/architecture.html)
// 为了方便使用,绑定到原型链，在其他vue文件，直接 this.mars3d 来使用
Vue.prototype.mars3d = mars3d
-Vue.prototype.Cesium = mars3d.Cesium
+Vue.prototype.Cesium = Cesium
import axios from 'axios'
export default {
@@ -106,9 +104,20 @@
map.scene.screenSpaceCameraController.zoomEventTypes = [Cesium.CameraEventType.MIDDLE_DRAG, Cesium.CameraEventType.WHEEL, Cesium.CameraEventType.PINCH]
map.scene.screenSpaceCameraController.rotateEventTypes = [Cesium.CameraEventType.LEFT_DRAG]
map.scene.screenSpaceCameraController.enableCollisionDetection = false
+
map.on(mars3d.EventType.renderError, function(event) {
window.location.reload()
})
+
+ // const handler = new Cesium.ScreenSpaceEventHandler(map.viewer.canvas)
+ // handler.setInputAction(function(evt) {
+ // var cartesian = map.viewer.camera.pickEllipsoid(evt.position, map.viewer.scene.globe.ellipsoid)
+ // var cartographic = Cesium.Cartographic.fromCartesian(cartesian)
+ // var lng = Cesium.Math.toDegrees(cartographic.longitude)// 经度值
+ // var lat = Cesium.Math.toDegrees(cartographic.latitude)// 纬度值
+ // console.log(' {point: [' + lng + ',' + lat + ',0]},')
+ // }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
+
this[`map${this.mapKey}`] = map
if (this.needBloomEffect) {
const bloomEffect = new mars3d.effect.BloomEffect({
@@ -119,13 +128,14 @@
const graphicLayer = new mars3d.layer.GraphicLayer()
map.addLayer(graphicLayer)
- // 垂直飞线
- // lat:36.290705 , lng:117.424668 ,
- // flyLine(graphicLayer, 117.33, 117.58, 36.59, 36.80)
+
// 挂载到全局对象下，所有组件通过 this.map 访问
Vue.prototype[`map${this.mapKey}`] = map
// 抛出事件
- this.$emit('onload', map, this.center)
+ const that= this
+ map.on(mars3d.EventType.load, function(event) {
+ that.$emit('onload', map, that.center)
+ })
},
changeBaseLayer(basemap) {
window.map.basemap = basemap
diff --git a/src/components/Mars3D/utils/ArcGisWfsLayer.js b/src/components/Mars3D/utils/ArcGisWfsLayer.js
index 7ca8399..9a569b4 100644
--- a/src/components/Mars3D/utils/ArcGisWfsLayer.js
+++ b/src/components/Mars3D/utils/ArcGisWfsLayer.js
@@ -2,14 +2,14 @@
import Vue from 'vue'
/**
- *
+ * 三维管线
* @param index gis图层编号
* @param color 管线颜色
* @param name 图层名称
* @param radius 管径
* @returns {ArcGisWfsLayer}
*/
-export function polylineVolumeP(index, color, name, radius) {
+export function polylineVolumeP(index, color, name, radius, height='') {
const wfsLayer3D = new mars3d.layer.ArcGisWfsLayer({
enablePickFeatures: false,
name: name,
@@ -23,8 +23,10 @@
radius: radius
},
callback: function(attr, styleOpt) {
- var val = { attr }.attr
- const height = -(Number(val.起始埋深) + Number(val.终止埋深)) / 2
+ if(height === ''){
+ var val = { attr }.attr
+ height = -(Number(val.起始埋深) + Number(val.终止埋深)) / 2
+ }
return { setHeight: height, height }
}
},
@@ -35,7 +37,7 @@
}
/**
- *
+ * 二维管线
* @param index gis图层编号
* @param color 管线颜色
* @param name 图层名称
@@ -69,7 +71,7 @@
export function building() {
const wfsLayer = new mars3d.layer.ArcGisWfsLayer({
name: '建筑物面矢量图层',
- url: Vue.prototype.baseConfig.buildingUrl,
+ url: '',
// minimumLevel: changeLevel,
symbol: {
type: 'polygonC',
diff --git a/src/components/Mars3D/utils/GeoJsonLayer.js b/src/components/Mars3D/utils/GeoJsonLayer.js
index 51ab972..4c8f784 100644
--- a/src/components/Mars3D/utils/GeoJsonLayer.js
+++ b/src/components/Mars3D/utils/GeoJsonLayer.js
@@ -9,7 +9,7 @@
* @param model 模型
* @param scale 模型缩放
* @param condition 搜索条件
- * @returns {{"3D": string, "2D": BaseClass}}
+ * @returns {{"3D": BaseGraphicLayer, "2D": BaseClass}}
*/
export function createPointModelLayer(index, name, image, model = '', scale, condition) {
@@ -38,7 +38,6 @@
scaleByDistance_farValue: 0.6,
scaleByDistance_near: 0,
scaleByDistance_nearValue: 1.4,
- clampToGround: true,
highlight: { type: 'click', image: '../static/images/high-marker.png' }
}
})
@@ -56,9 +55,7 @@
}
})
window.map.addLayer(layer)
- const layer3D = new mars3d.layer.GraphicLayer({
- name: name
- }).bindPopup(function(event) {
+ const layer3D = new mars3d.layer.GraphicLayer({ name: name}).bindPopup(function(event) {
const attr = event.graphic.attr || {}
return mars3d.Util.getTemplateHtml({ template: 'all', attr: attr })
})
@@ -133,7 +130,6 @@
scaleByDistance_farValue: 0.6,
scaleByDistance_near: 0,
scaleByDistance_nearValue: 1.4,
- clampToGround: true,
highlight: { type: 'click', image: '../static/images/high-marker.png' }
}
})
@@ -150,13 +146,13 @@
})
}
})
- .on(mars3d.EventType.show, function(event) {
- console.log(index, ' show时间(s):', new Date().getSeconds())
- }).on(mars3d.EventType.load, function(event) {
- console.log(index, ' load时间(s):', new Date().getSeconds())
- }).on(mars3d.EventType.postRender, function(event) {
- console.log(index, ' postRender时间(s):', new Date().getSeconds())
- })
+ // .on(mars3d.EventType.show, function(event) {
+ // console.log(index, ' show时间(s):', new Date().getSeconds())
+ // }).on(mars3d.EventType.load, function(event) {
+ // console.log(index, ' load时间(s):', new Date().getSeconds())
+ // }).on(mars3d.EventType.postRender, function(event) {
+ // console.log(index, ' postRender时间(s):', new Date().getSeconds())
+ // })
window.map.addLayer(layer)
queryServer.query({
where: condition,
@@ -173,3 +169,59 @@
})
return layer
}
+
+
+/**
+ * ModelC
+ * @param index 图层序号
+ * @param name 图层名称
+ * @param model 模型
+ * @param scale 模型缩放
+ * @param condition 搜索条件
+ * @returns {{"3D": BaseGraphicLayer, "2D": BaseClass}}
+ */
+
+export function createModelLayer(index, name, model = '', scale, condition) {
+ const queryServer = new mars3d.query.QueryArcServer({
+ url: Vue.prototype.baseConfig.arcgisUrl + index,
+ popup: 'all',
+ pageSize: 5000
+ })
+ const layer3D = new mars3d.layer.GraphicLayer({
+ name: name
+ }).bindPopup(function(event) {
+ const attr = event.graphic.attr || {}
+ return mars3d.Util.getTemplateHtml({ template: 'all', attr: attr })
+ })
+ window.map.addLayer(layer3D)
+ layer3D.show = false
+ queryServer.query({
+ where: condition,
+ success: (result) => {
+ if (result.count === 0) {
+ console.log('未查询到相关记录！')
+ }
+ if (model !== '') {
+ const points = []
+ result.geojson.features.forEach(item => {
+ points.push({
+ position: [item.geometry.coordinates[0], item.geometry.coordinates[1], 0],
+ style: {
+ scale: scale
+ },
+ attr: item.properties
+ })
+ })
+ const modelCombine = new mars3d.graphic.ModelCombine({
+ url: model,
+ instances: points
+ })
+ layer3D.addGraphic(modelCombine)
+ }
+ },
+ error: (error, msg) => {
+ console.log('服务访问错误,' + error)
+ }
+ })
+ return layer3D
+}
diff --git a/src/main.js b/src/main.js
index f8a4b83..964152c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -103,6 +103,12 @@
import axios from 'axios'
import service from '@/utils/request'
+
+import * as Cesium from 'mars3d-cesium'
+import 'mars3d/dist/mars3d.css'
+import 'mars3d-cesium/Build/Cesium/Widgets/widgets.css'
+import * as mars3d from 'mars3d'
+
axios.get('./config/project.config.json').then((result) => {
console.log('get config')
Vue.prototype.baseConfig = result.data
diff --git a/src/router/modules/well.js b/src/router/modules/well.js
index 0f6d5a6..17ed4e1 100644
--- a/src/router/modules/well.js
+++ b/src/router/modules/well.js
@@ -31,7 +31,7 @@
children: [
{
path: '/overview3d',
- component: () => import('@/views/overview/overview3dzq'),
+ component: () => import('@/views/overview/overview3d'),
name: 'overview3d',
meta: { title: '管网运行总览', icon: 'icon-config', permission: ['/overview/3d'] }
}
diff --git a/src/views/overview/components/popupLocation.vue b/src/views/overview/components/popupLocation.vue
index 6ad655b..3ba9efd 100644
--- a/src/views/overview/components/popupLocation.vue
+++ b/src/views/overview/components/popupLocation.vue
@@ -21,7 +21,7 @@
-
+
图上拾取
@@ -39,6 +39,10 @@
export default {
name: 'PopupLocation',
props: {
+ is3D: {
+ type: Boolean,
+ default: false
+ },
defaultPosition: {
type: Array,
default: () => []
diff --git a/src/views/overview/components/toolBox.vue b/src/views/overview/components/toolBox.vue
index 9b0eb95..83b1c5e 100644
--- a/src/views/overview/components/toolBox.vue
+++ b/src/views/overview/components/toolBox.vue
@@ -37,6 +37,12 @@
+
+
+ 深蓝底图
+
+
@@ -63,6 +69,10 @@
name: 'ToolBox',
components: { LayerChooseWindow },
props: {
+ is3D: {
+ type: Boolean,
+ default: false
+ },
show: {
type: Boolean,
default: false
@@ -166,7 +176,7 @@
position: absolute;
right: 10px;
top: 50px;
- width: 200px;
+ width: 230px;
background-color: rgba(255,255,255,0.9);
.window-body{
display: flex;
diff --git a/src/views/overview/overview3d.vue b/src/views/overview/overview3d.vue
index ed448eb..a984ea7 100644
--- a/src/views/overview/overview3d.vue
+++ b/src/views/overview/overview3d.vue
@@ -1,12 +1,12 @@
@@ -40,41 +40,43 @@
import PopupDataFilter from '@/views/overview/components/popupDataFilter'
import PopupLocation from '@/views/overview/components/popupLocation'
import MapSearchComp from '@/views/overview/components/mapSearchComp'
-
import axios from 'axios'
import * as Cesium from 'mars3d-cesium'
-// 导入mars3d主库
import 'mars3d/dist/mars3d.css'
import 'mars3d-cesium/Build/Cesium/Widgets/widgets.css'
import * as mars3d from 'mars3d'
+import Mars3dMap from '@/components/Mars3D/Mars3dMap'
import store from '@/store'
import { breadcrumb } from '@/settings'
import { RSAencrypt } from '@/utils/security'
+import {polylineC, polylineVolumeP} from "@/components/Mars3D/utils/ArcGisWfsLayer";
+import {createPointModelLayer, createModelLayer, createPointLayer} from "@/components/Mars3D/utils/GeoJsonLayer";
const line_layer = []
const line_layer_3D = []
-let point_layer = []
let point_layer_3D = []
-const dev_layer = []
+let dev_layer = []
const dev_layer_3D = []
const wellLoc = {}
let underground = null
+let alarm_layer = null
export default {
name: 'Overview3D',
- components: { MapSearchComp, PopupLocation, PopupDataFilter, ToolBox, AlarmList },
+ components: { Mars3dMap, MapSearchComp, PopupLocation, PopupDataFilter, ToolBox, AlarmList },
data() {
return {
initWell: false, // 是否初始化井信息
showLine: true,
showModel: false,
- colors: ['#7f0000', '#804000', '#00ff00', '#ff7fe9', '#ff7fe9', '#ff0000', '#00bfff', '#00ff00', '#ff0000'],
+ basemap: 1113,
+ colors: ['#7f0000', '#804000', '#ff7fe9', '#ff7fe9', '#00bfff', '#00ff00', '#ff0000', '#00ff00', '#ff0000'],
layerName:
- ['雨水附属物', '污水附属物', '天然气附属物', '燃气附属物', '给水附属物', '电信附属物', '电力附属物', '标识器',
- '雨水管线', '污水管线', '通信管线', '天然气管线', '燃气管线', '路灯管线', '给水管线', '电信管线', '电力管线'],
+ ['雨水管线', '污水管线', '天然气管线', '燃气管线', '给水管线', '电信管线', '电力管线', '通信管线','路灯管线',
+ '标识器', '井盖状态监测仪', '燃气智能监测', '消防栓防盗水', '液位监测仪', '噪声记录仪'],
baseLayer: 'gaode_vec', // 底图图层
- layers: [{ id: 'well', name: '井图层', children: [] }, { id: 'line', name: '管线图层', children: [] }, { id: 'dev', name: '设备图层', children: [] }, { id: 'alarm', name: '报警图层' }], // 图层列表
+ layers: [{ id: 'line', name: '管线图层', children: [] }, { id: 'dev', name: '设备图层', children: [] }, { id: 'alarm', name: '报警图层' }], // 图层列表
checkedLayer: [], // 选中的图层
center: ['114.88', '25.68'], // 地图中心
showLine: false,
@@ -131,15 +133,7 @@
alpha(val) {
window.map.basemap.opacity = val / 100
underground.alpha = val / 100
- // if (val <= 80 && window.map.level >= 19) {
- // const lineTypes = this.checkedLayer.filter(item => item.indexOf('line-') > -1).map(item => item.substring(5))
- // line_layer_3D.forEach(layer => { layer.show = lineTypes.indexOf(layer.options.name) > -1 })
- // line_layer.forEach(layer => layer.show = false)
- // } else {
- // const lineTypes = this.checkedLayer.filter(item => item.indexOf('line-') > -1).map(item => item.substring(5))
- // line_layer.forEach(layer => { layer.show = lineTypes.indexOf(layer.options.name) > -1 })
- // line_layer_3D.forEach(layer => layer.show = false)
- // }
+ this.cameraChange()
},
needRefresh(val) { // 需要刷新报警
if (val) this.refreshAlarm()
@@ -161,20 +155,15 @@
key: 'tagsView',
value: false
})
- this.$store.dispatch('GetConfig').then(() => {
- this.$message.success('连接服务器成功')
- this.handleLogin()
- }).catch((e) => {
- })
},
created() {
- // this.fetchWellType()
+ this.fetchWellType()
+ this.resultList = []
+ console.log('create', ' 时间(s):', new Date().getSeconds())
},
mounted() {
this.$nextTick(() => {
this.windowResize(window.innerHeight, window.innerWidth)
- this.initmars3d()
- this.resultList = []
})
},
beforeDestroy() {
@@ -192,20 +181,6 @@
}
},
methods: {
- // 点击登录按钮
- handleLogin() {
- const loginForm = {
- sid: this.$store.getters.sid,
- username: 'sykb',
- password: RSAencrypt('111111')
- }
- this.$store.dispatch('Login', loginForm).then(() => {
- // this.$message.success('登录成功')
- this.fetchWellType()
- this.loadToken = true
- }).catch(() => {
- })
- },
windowResize(height, width) {
// 查找header高度
const el_header = document.getElementById('app-header')
@@ -222,202 +197,63 @@
bodyHeight -= 5
store.dispatch('settings/ChangeHeight', bodyHeight)
},
- async initmars3d() {
- axios.get('./config/mars3dConfig.json').then((result) => {
- const data = result.data
- data.scene.center = { lat: this.center[1], lng: this.center[0], alt: 10000, heading: 360, pitch: -45 }
- this.initMars3dMap(data)
- })
- },
// 初始化放这里
- async initMars3dMap(mapOptions) {
- window.map = new mars3d.Map('mars3dContainer', mapOptions)
- window.map.basemap = 1113
- window.map.scene.screenSpaceCameraController.enableCollisionDetection = false
- window.map.scene.screenSpaceCameraController.tiltEventTypes = [Cesium.CameraEventType.RIGHT_DRAG]
- window.map.scene.screenSpaceCameraController.zoomEventTypes = [Cesium.CameraEventType.MIDDLE_DRAG, Cesium.CameraEventType.WHEEL, Cesium.CameraEventType.PINCH]
- window.map.scene.screenSpaceCameraController.rotateEventTypes = [Cesium.CameraEventType.LEFT_DRAG]
- // this.bloomEffect = new mars3d.effect.BloomEffect({
- // enabled: true
- // })
- // map.addEffect(this.bloomEffect)
+ onMapload(map, center) {
+ window.map = map
+ this.center = center
underground = new mars3d.thing.Underground({ alpha: this.alpha / 100 })
window.map.addThing(underground)
- window.map.basemap.opacity = this.alpha / 100
- // 崩溃后刷新
- window.map.on(mars3d.EventType.renderError, function(event) {
- window.location.reload()
- })
- const that = this
- window.map.on(mars3d.EventType.load, function(event) {
- window.map.on(mars3d.EventType.cameraChanged, that.cameraChange, that)
- that.initLine()
- that.initPoint()
- that.mapReady()
- that.mapLoading = false
- })
+ alarm_layer = new mars3d.layer.GraphicLayer({ name: '报警图层' })
+ window.map.addLayer(alarm_layer)
+ this.initLine()
+ this.initPoint()
+ window.map.on(mars3d.EventType.cameraChanged, this.cameraChange, this)
+ this.mapLoading = false
},
async initLine() {
- for (let i = 8; i <= 16; i++) {
- // 三维地下管线 (19)
- let wfsLayer = new mars3d.layer.ArcGisWfsLayer({
- name: this.layerName[i],
- popup: 'all',
- url: 'http://111.198.10.15:13002/arcgis/rest/services/gztest/MapServer/' + i,
- minimumLevel: 19,
- symbol: {
- type: 'polylineVolumeP',
- styleOptions: {
- color: this.colors[i - 8],
- shape: 'pipeline',
- radius: 0.1
- },
- callback: function(attr, styleOpt) {
- return { setHeight: -1.5 }
- }
- }
- })
- line_layer_3D.push(wfsLayer)
- window.map.addLayer(wfsLayer)
+ for (let i = 0; i <= 8; i++) {
+ // 三维管线
+ line_layer_3D.push(polylineVolumeP(i+8, this.colors[i], this.layerName[i], 0.1, -1.5))
// 二维管线
- wfsLayer = new mars3d.layer.ArcGisWfsLayer({
- name: this.layerName[i],
- url: 'http://111.198.10.15:13002/arcgis/rest/services/gztest/MapServer/' + i, // maximumLevel: 19,
- symbol: {
- type: 'polylineC',
- styleOptions: {
- color: this.colors[i - 8],
- width: 3,
- hasShadows: false
- }
- },
- popup: 'all'
- })
- window.map.addLayer(wfsLayer)
- line_layer.push(wfsLayer)
+ line_layer.push(polylineC(i+8, this.colors[i], this.layerName[i], 3))
}
},
- createPointLayer(index, image, model = '', condition) {
- const queryServer = new mars3d.query.QueryArcServer({
- url: 'http://111.198.10.15:13002/arcgis/rest/services/gztest/MapServer/' + index,
- popup: 'all',
- pageSize: 5000
- })
- const layer = new mars3d.layer.GeoJsonLayer({
- name: this.layerName[index],
- onCreateGraphic: function(options) {
- const points = options.position // 坐标
- const attr = options.attr // 属性信息
- const primitive = new mars3d.graphic.BillboardPrimitive({
- allowDrillPick: true,
- attr: attr,
- id: attr.编号,
- position: points,
- style: {
- image: image,
- scale: 0.6,
- hasPixelOffset: true,
- pixelOffsetY: -10,
- scaleByDistance: true,
- scaleByDistance_far: 30000,
- scaleByDistance_farValue: 0.6,
- scaleByDistance_near: 0,
- scaleByDistance_nearValue: 1.4,
- clampToGround: true,
- highlight: { type: 'click', image: '../static/images/high-marker.png' }
- }
- })
- layer.addGraphic(primitive)
- },
- popup: 'all'
- }).bindPopup(function(event) {
- return mars3d.Util.getTemplateHtml({ template: 'all', attr: event.graphic.attr || {}})
- }).on(mars3d.EventType.click, function(event) {
- if (window.map.camera.positionCartographic.height > 5000) {
- window.map.flyToPoint(event.graphic.position, {
- radius: 5000, // 距离目标点的距离
- duration: 1
- })
- }
- })
- point_layer.push(layer)
- window.map.addLayer(layer)
-
- queryServer.query({
- where: condition,
- success: (result) => {
- if (result.count === 0) {
- this.$message.warning('未查询到相关记录！')
- }
- layer.load({ data: result.geojson })
- if (model !== '') {
- const layer3D = new mars3d.layer.GraphicLayer({
- name: this.layerName[index]
- }).bindPopup(function(event) {
- const attr = event.graphic.attr || {}
- return mars3d.Util.getTemplateHtml({ template: 'all', attr: attr })
- })
- layer3D.show = false
- window.map.addLayer(layer3D)
- point_layer_3D.push(layer3D)
- const well = []
- result.geojson.features.forEach(item => {
- well.push({
- position: [item.geometry.coordinates[0], item.geometry.coordinates[1], 0],
- style: {
- scale: 1.5
- },
- attr: item.properties
- })
- })
- const modelCombine = new mars3d.graphic.ModelCombine({
- url: model,
- instances: well
- })
- layer3D.addGraphic(modelCombine)
- }
- },
- error: (error, msg) => {
- this.$message.error('服务访问错误,' + error)
- }
- })
- },
async initPoint(condition = '') {
- if (point_layer.length !== 0) {
- point_layer.forEach(item => window.map.removeLayer(item))
- }
+ const layerName = ['雨水附属物', '污水附属物', '天然气附属物', '燃气附属物', '给水附属物', '电信附属物', '电力附属物']
if (point_layer_3D.length !== 0) {
point_layer_3D.forEach(item => window.map.removeLayer(item))
}
- point_layer = []
point_layer_3D = []
- const str = condition === '' ? '1<>1' : "编号 LIKE '%" + condition + "%' or 附属物名称 LIKE '%" + condition + "%' or 所属道路 LIKE '%" + condition + "%'"
- for (let i = 0; i <= 7; i++) {
- if (i !== 7) {
- this.createPointLayer(i, '../static/images/' + this.layerName[i] + '.png', '../static/model/ys.gltf', str)
- } else {
- this.createPointLayer(i, '../static/images/' + this.layerName[i] + '.png', '', str)
- }
+
+ if (dev_layer.length !== 0) {
+ dev_layer.forEach(item => window.map.removeLayer(item))
}
+ dev_layer = []
+ const str = condition === '' ? '1<>1' : "编号 LIKE '%" + condition + "%' or 附属物名称 LIKE '%" + condition + "%' or 所属道路 LIKE '%" + condition + "%'"
+ const bsq = condition === '' ? '1<>1' : "编号 LIKE '%" + condition + "%' or 对象名称 LIKE '%" + condition + "%' or 所属道路 LIKE '%" + condition + "%'"
+
+ dev_layer.push(createPointLayer('标识器', 7, '../static/images/标识器.png', bsq))
+
+ for (let i = 0; i <= 7; i++) {
+ point_layer_3D.push(createModelLayer(i, layerName[i], '../static/model/ys.gltf', 1.5, str))
+ }
+ this.mapReady()
},
- // 控制二维线的显隐
cameraChange() {
// console.log('map-level:' + window.map.level)
// console.log('alpha:' + this.alpha)
- if (window.map.level <= 19) { // 远
- if (this.showModel) {
- point_layer_3D.forEach(layer => { layer.show = false })
- this.showModel = false
- }
- } else if (this.alpha <= 80) { // 近，透
- if (!this.showModel) {
- const wellTypes = this.checkedLayer.filter(item => item.indexOf('well-') > -1).map(item => item.substring(5))
+ if (!this.showModel) {
+ if(this.alpha <= 80 && window.map.level > 19){
+ const lineTypes = this.checkedLayer.filter(item => item.indexOf('line-') > -1).map(item => item.substring(5))
+ const wellTypes = lineTypes.map(item => item.replace('管线','附属物'))
point_layer_3D.forEach(layer => { layer.show = wellTypes.indexOf(layer.options.name) > -1 })
+ line_layer_3D.forEach(layer => { layer.show = lineTypes.indexOf(layer.options.name) > -1 })
this.showModel = true
}
- } else { // 近，不透
- if (this.showModel) {
+ }else{
+ if(this.alpha >80 || window.map.level <= 19){
point_layer_3D.forEach(layer => { layer.show = false })
+ line_layer_3D.forEach(layer => { layer.show = false })
this.showModel = false
}
}
@@ -428,9 +264,9 @@
this.fetchWellList() // 加载全部井
this.firstAmount = true
this.toolShow = true
- if (this.refreshType === 'clock') { // 如果需要倒计时刷新的
+ // if (this.refreshType === 'clock') { // 如果需要倒计时刷新的
setTimeout(() => { this.countDown() }, 1000)
- }
+ // }
},
// 获取全部井列表
fetchWellList() {
@@ -453,35 +289,33 @@
filterLayer(checkedLayer) {
this.checkedLayer = checkedLayer
// 1.过滤井图层
- const wellTypes = checkedLayer.filter(item => item.indexOf('well-') > -1).map(item => item.substring(5))
+
const lineTypes = checkedLayer.filter(item => item.indexOf('line-') > -1).map(item => item.substring(5))
+ const wellTypes = lineTypes.map(item => item.replace('管线','附属物'))
+
// 点
- point_layer.forEach(layer => { layer.show = wellTypes.indexOf(layer.options.name) > -1 })
point_layer_3D.forEach(layer => { layer.show = wellTypes.indexOf(layer.options.name) > -1 })
// 线
line_layer.forEach(layer => { layer.show = lineTypes.indexOf(layer.options.name) > -1 })
line_layer_3D.forEach(layer => { layer.show = lineTypes.indexOf(layer.options.name) > -1 })
- // 2.选中or没选中报警图层
- if (checkedLayer.indexOf('alarm') !== -1) {
- this.showAlarm = true
- } else {
- this.showAlarm = false
- }
+ // 2.选中or没选中设备图层
+ const devTypes = checkedLayer.filter(item => item.indexOf('dev-') > -1).map(item => item.substring(4))
+ dev_layer.forEach(layer => { layer.show = devTypes.indexOf(layer.options.name) > -1 })
+
+ // 3.选中or没选中报警图层
+ checkedLayer.indexOf('alarm') !== -1 ? alarm_layer.show = true : alarm_layer.show = false
+
},
// 切换底图
changeBaseMap(type) {
this.baseLayer = type
- if (type === 'gaode_vec') {
- window.map.basemap = 1112
- if (this.bloomEffect !== null) {
- this.bloomEffect.enabled = false
- }
+ if (type === 'dark') {
+ this.basemap = 1112
+ } else if (type === 'gaode_vec') {
+ this.basemap = 1111
} else {
- window.map.basemap = 1113
- if (this.bloomEffect !== null) {
- this.bloomEffect.enabled = true
- }
+ this.basemap = 1113
}
},
// 倒计时函数
@@ -496,31 +330,6 @@
},
// 获取点位类型，显示点位类型下拉
fetchWellType() {
- // getWellType().then(response => {
- // this.wellTypeList = []
- // // 如果该用户支持的点位类型只有一个，则不显示该筛选框
- // const supportWellTypes = this.$store.getters.wellTypes
- // this.wellTypeList = response.data.filter(wellType => {
- // return supportWellTypes.findIndex(item => item == wellType.value) > -1
- // })
- // })
- this.wellTypeList = this.layerName.map((item, index) => {
- return {
- value: item,
- name: item
- }
- })
- this.wellTypeList.length = 8
- const wellLayer = {
- id: 'well',
- name: '井图层',
- children: this.wellTypeList.map(item => {
- return {
- id: 'well-' + item.value,
- name: item.name
- }
- })
- }
const lineLayer = {
id: 'line',
name: '管线图层',
@@ -529,58 +338,52 @@
id: 'line-' + item,
name: item
}
- }).splice(8, 9)
+ }).splice(0, 9)
}
- const deviceTypes = this.$store.getters.deviceTypes
- this.layers.splice(0, 1, wellLayer)
- this.layers.splice(1, 1, lineLayer)
+ const devLayer = {
+ id: 'dev',
+ name: '设备图层',
+ children: this.layerName.map(item => {
+ return {
+ id: 'dev-' + item,
+ name: item
+ }
+ }).splice(9, 6)
+ }
+ this.layers.splice(0, 1, lineLayer)
+ this.layers.splice(1, 1, devLayer)
if (this.baseConfig.showAllWells) {
- // this.checkedLayer = [...this.checkedLayer, 'well', this.wellTypeList.map(item => 'well-' + item.value), 'line', lineLayer.children.map(item => item.id)]
- this.checkedLayer = ['well', 'line']
- this.wellTypeList.forEach(item => this.checkedLayer.push('well-' + item.value))
+ this.checkedLayer = ['line', 'dev']
lineLayer.children.forEach(item => this.checkedLayer.push('line-' + item.name))
+ lineLayer.children.forEach(item => this.checkedLayer.push('dev-' + item.name))
} else {
this.checkedLayer = [...this.checkedLayer]
}
if (this.wellTypeList.length <= 1) {
this.showWellType = false
}
- getDeviceType(this.listQuery).then(response => {
- this.deviceTypeList = []
- // 过滤掉该单位不支持的设备类型
- const deviceTypes = this.$store.getters.deviceTypes
- for (const deviceType of response.data) {
- if (deviceTypes.indexOf(deviceType.value) !== -1) {
- this.deviceTypeList.push(deviceType)
- }
- }
- const devLayer = {
- id: 'dev',
- name: '设备图层',
- children: this.deviceTypeList.map(item => {
- return {
- id: 'dev-' + item.value,
- name: item.name
- }
- })
- }
- this.layers.splice(2, 1, devLayer)
- })
- },
- /**
- * 数据筛选
- * @param listQuery 筛选条件
- * @param showMessage 是否告知筛选结果
- */
- dataFilter(listQuery, showMessage = true) {
- if (this.type === 'massMarkers') { // 过滤海量点
- this.filterMassMarker(listQuery, showMessage)
- this.filterAlarm(listQuery, showMessage)
- } else if (this.type === 'cluster') { // 过滤聚合点
- // this.filterClusters(listQuery, showMessage)
- this.filterAlarm(listQuery, showMessage)
- }
+ // getDeviceType(this.listQuery).then(response => {
+ // this.deviceTypeList = []
+ // // 过滤掉该单位不支持的设备类型
+ // const deviceTypes = this.$store.getters.deviceTypes
+ // for (const deviceType of response.data) {
+ // if (deviceTypes.indexOf(deviceType.value) !== -1) {
+ // this.deviceTypeList.push(deviceType)
+ // }
+ // }
+ // const devLayer = {
+ // id: 'dev',
+ // name: '设备图层',
+ // children: this.deviceTypeList.map(item => {
+ // return {
+ // id: 'dev-' + item.value,
+ // name: item.name
+ // }
+ // })
+ // }
+ // this.layers.splice(2, 1, devLayer)
+ // })
},
// 清空查询
clearSearch() {
@@ -648,114 +451,6 @@
}
this.resetMassMarker()
},
- // 过滤报警
- filterAlarm(listQuery, showMessage = false) {
- const hideWellIds = []// 要隐藏的点位编号
- // 整理筛选条件
- const keywords = listQuery.keywords
- const wellTypes = listQuery.wellTypes ? listQuery.wellTypes : listQuery.wellType ? [listQuery.wellType] : [] // 点位类型
- let deptids = [] // 所有权属
- if (listQuery.deptid) {
- deptids = this.fetchDeptList(listQuery.deptid) // 获取所有下级
- }
- // 查询报警的井
- for (const marker of this.alarmWells) {
- let show = true
- // 关键字不为空，且没有匹配成功，不显示， 关键字匹配点位编号和位置
- if (keywords && keywords !== '' && !(marker.wellCode.indexOf(keywords) !== -1 || marker.position.indexOf(keywords) !== -1)) {
- show = false
- }
- // 部门不为空， 且没有匹配成功，多部门匹配
- if (deptids.length > 0 && deptids.indexOf(marker.deptid) === -1) {
- show = false
- }
- // 点位类型不为空，且没有匹配成功
- if (wellTypes && wellTypes.length > 0 && wellTypes.indexOf(marker.wellType) === -1) {
- show = false
- }
- // 如果show为false，放入需要隐藏的井id列表
- if (show === false) {
- hideWellIds.push(marker.wellId)
- }
- marker.visible = show
- }
- // 4.过滤报警marker：alarmWells 如果没有找到符合要求的井，直接将全部查询结果隐藏，并将所有报警隐藏，否则按照查询结果筛选需要隐藏的报警
- if (hideWellIds.length === this.alarmWells.length) {
- for (const alarmWell of this.alarmWells) {
- alarmWell.visible = false
- }
- } else {
- // 将报警隐藏
- for (const alarmWell of this.alarmWells) {
- if (hideWellIds.indexOf(alarmWell.wellId) > -1) {
- alarmWell.visible = false
- } else {
- alarmWell.visible = true
- }
- }
- }
- // 5.过滤显示列表：alarmList
- this.alarmList = []
- if (hideWellIds.length > 0) { // 如果有要隐藏的井，过滤
- for (const alarm of this.alarmListOri) {
- const findFlag = hideWellIds.findIndex(code => code === alarm.wellId)
- if (findFlag === -1) {
- this.alarmList.push(alarm)
- }
- }
- } else { // 如果没有直接等于alarmListOri
- this.alarmList = this.alarmListOri
- }
- },
- // 获取全部井列表
- fetchDeviceList() {
- this.loading = false
- this.deviceTypeList.forEach(item => {
- const param = {
- deviceType: item.value
- }
- // getDeviceAllList(param).then(response => {
- // if (response.code === 200) {
- // if (response.data.length === 0) return
- // const graphicLayer = new mars3d.layer.GraphicLayer({ name: item.name })
- // window.map.addLayer(graphicLayer)
- // dev_layer.push(graphicLayer)
- // const name = item.name.substr(0, 1)
- // response.data.forEach(data => {
- // if (wellLoc[data.wellCode] !== undefined && wellLoc[data.wellCode].length === 2) {
- // const primitive = new mars3d.graphic.ModelPrimitive({
- // position: [wellLoc[data.wellCode][0], wellLoc[data.wellCode][1], -3],
- // style: {
- // url: '../static/model/' + 1 + '.glb',
- // scale: 1,
- // label: {
- // // 面中心点，显示文字的配置
- // text: name, // 对应的属性名称
- // opacity: 1,
- // font_size: 14,
- // color: '#ffffff',
- // font_weight: 'bold',
- // font_style: 'normal',
- // addHeight: 3,
- // // scaleByDistance: true,
- // //
- // // pixelOffsetY: -40,
- // //
- // // scaleByDistance_far: 300000,
- // // scaleByDistance_farValue: 0.4,
- // // scaleByDistance_near: 1,
- // // scaleByDistance_nearValue: 1.4,
- // visibleDepth: false
- // }
- // }
- // })
- // graphicLayer.addGraphic(primitive)
- // }
- // })
- // }
- // })
- })
- },
// 刷新报警列表
refreshAlarm() {
console.log('refreshAlarm')
@@ -964,7 +659,7 @@
left: 8px;
display: flex;
flex-wrap: wrap;
- background-color: #fcfbe8;
+ background: linear-gradient(to top left, #48617c, #619bd4);
border-radius: 5px;
width: 300px;
height: 200px;
@@ -973,9 +668,9 @@
border-color: rgba(0, 0, 0, .05);
.cover-item{
width: 50%;
+ width: 50%;
font-size: 16px;
- font-weight: 600;
- color: #505a5e;
+ color: white;
}
}
.map-gz {
diff --git a/src/views/overview/overview3dzq.vue b/src/views/overview/overview3dzq.vue
index 8d6e637..78df80b 100644
--- a/src/views/overview/overview3dzq.vue
+++ b/src/views/overview/overview3dzq.vue
@@ -21,9 +21,9 @@
`
@@ -594,7 +581,6 @@
scaleByDistance_farValue: 0.8,
scaleByDistance_near: 0,
scaleByDistance_nearValue: 1.6,
- clampToGround: true,
visibleDepth: false
}).unbindHighlight()
point.unbindPopup()
diff --git a/.browserslistrc b/.browserslistrc
deleted file mode 100644
index 9725b0f..0000000
--- a/.browserslistrc
+++ /dev/null
@@ -1,4 +0,0 @@
-> 1%
-last 2 versions
-IE >=8
-not dead
diff --git a/.eslintrc.js b/.eslintrc.js
index ad3db7c..2307fed 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -19,10 +19,11 @@
rules: {
'vue/max-attributes-per-line': [2, {
'singleline': 10,
- 'multiline': {
- 'max': 1,
- 'allowFirstLine': false
- }
+ // 'multiline': {
+ // 'max': 1,
+ // 'allowFirstLine': false,
+ // ignore: ['some-attribute', '/(?:xs|sm|md|lg|xl)\\d{1,2}/']
+ // }
}],
'vue/name-property-casing': ['error', 'PascalCase'],
'accessor-pairs': 2,
diff --git a/package.json b/package.json
index 4b4e458..f0bd847 100644
--- a/package.json
+++ b/package.json
@@ -15,53 +15,76 @@
"@riophae/vue-treeselect": "^0.4.0",
"animate.css": "^4.1.1",
"axios": "^0.21.1",
- "cesium": "^1.95.0",
"clipboard": "^2.0.8",
- "copy-webpack-plugin": "^6.0.3",
- "core-js": "^3.6.5",
+ "core-js": "^3.8.3",
"echarts": "^4.2.1",
"element-ui": "^2.15.7",
"js-cookie": "^3.0.0",
"jsencrypt": "^3.2.1",
- "mars3d": "3.3.15",
- "mars3d-space": "^3.3.17",
+ "mars3d": "^3.4.7",
+ "mars3d-space": "^3.4.7",
"mockjs": "^1.1.0",
+ "node-polyfill-webpack-plugin": "^2.0.1",
"normalize.css": "^8.0.1",
"nprogress": "^0.2.0",
"uppercamelcase": "^3.0.0",
"v-charts": "^1.19.0",
"v-viewer": "^1.6.4",
- "vue": "^2.6.11",
+ "vue": "^2.6.14",
"vue-amap": "^0.5.10",
- "vue-router": "^3.2.0",
- "vuex": "^3.4.0"
+ "vue-router": "^3.5.3",
+ "vuex": "^3.6.2",
+ "webpack": "^5.74.0"
},
"devDependencies": {
- "@vue/cli-plugin-babel": "~4.5.0",
- "@vue/cli-plugin-e2e-cypress": "~4.5.0",
- "@vue/cli-plugin-eslint": "~4.5.0",
- "@vue/cli-plugin-router": "~4.5.0",
- "@vue/cli-plugin-unit-jest": "~4.5.0",
- "@vue/cli-plugin-vuex": "~4.5.0",
- "@vue/cli-service": "~4.5.0",
- "@vue/eslint-config-standard": "^5.1.2",
- "@vue/test-utils": "^1.0.3",
- "babel-eslint": "^10.1.0",
- "babel-plugin-dynamic-import-node": "^2.3.3",
- "chalk": "^4.1.2",
- "chokidar": "^3.5.2",
- "copy-webpack-plugin": "^6.4.1",
- "eslint": "^6.7.2",
+ "@babel/core": "^7.12.16",
+ "@babel/eslint-parser": "^7.12.16",
+ "@vue/cli-plugin-babel": "~5.0.0",
+ "@vue/cli-plugin-eslint": "~5.0.0",
+ "@vue/cli-service": "~5.0.0",
+ "copy-webpack-plugin": "^6.3.2",
+ "eslint": "^7.32.0",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.0",
- "eslint-plugin-vue": "^6.2.2",
- "mock": "^0.1.1",
- "sass": "^1.26.5",
+ "eslint-plugin-vue": "^8.0.3",
+ "html-webpack-plugin": "^5.5.0",
+ "sass": "^1.32.12",
"sass-loader": "^8.0.2",
- "script-ext-html-webpack-plugin": "^2.1.5",
"svg-sprite-loader": "^6.0.9",
- "vue-template-compiler": "^2.6.11"
+ "vue-template-compiler": "^2.6.14"
+ },
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/marsgis/mars3d-vue-template.git"
+ },
+ "bugs": {
+ "url": "https://github.com/marsgis/mars3d-vue-template/issues",
+ "email": "wh@marsgis.cn"
+ },
+ "keywords": [
+ "marsgis",
+ "mars3d",
+ "cesium",
+ "vue",
+ "gis"
+ ],
+ "author": "火星科技",
+ "license": "Apache-2.0",
+ "homepage": "http://mars3d.cn",
+ "eslintConfig": {
+ "root": true,
+ "env": {
+ "node": true
+ },
+ "extends": [
+ "plugin:vue/essential",
+ "eslint:recommended"
+ ],
+ "parserOptions": {
+ "parser": "@babel/eslint-parser"
+ },
+ "rules": {}
}
}
diff --git a/public/config/mars3dConfig.json b/public/config/mars3dConfig.json
index 29a3c40..498d918 100644
--- a/public/config/mars3dConfig.json
+++ b/public/config/mars3dConfig.json
@@ -1,8 +1,9 @@
{
"scene": {
"center": {
- "lat": "36.48", "lng": "117.48", "alt": 20000, "heading": 360, "pitch": -45
+ "lat": "25.675", "lng": "114.875", "alt": 10000, "heading": 360, "pitch": -45
},
+ "requestRenderMode": true,
"showSun": false,
"showSkyAtmosphere": false,
"fog": true,
@@ -59,25 +60,5 @@
"key": ["216ee92889e17ab1b083fae665d522b8"],
"show": true
}
- ],
- "layers": [
- {
- "type": "geojson",
- "id": "building",
- "url": "http://111.198.10.15:11404/3d/zqBuilding.json",
- "symbol": {
- "type": "polygonP",
- "styleOptions": {
- "color": "rgb(52,125,246)",
- "outline": false,
- "opacity": 0.8
- }
- },
- "buildings": {
- "height": 100
- },
- "popup": "{name}",
- "show": true
- }
]
}
diff --git a/public/config/mars3dConfigzq.json b/public/config/mars3dConfigzq.json
new file mode 100644
index 0000000..7752593
--- /dev/null
+++ b/public/config/mars3dConfigzq.json
@@ -0,0 +1,84 @@
+{
+ "scene": {
+ "center": {
+ "lat": "36.48", "lng": "117.48", "alt": 20000, "heading": 360, "pitch": -45
+ },
+ "requestRenderMode": true,
+ "showSun": false,
+ "showSkyAtmosphere": false,
+ "fog": true,
+ "fxaa": true,
+ "globe": {
+ "depthTestAgainstTerrain": true,
+ "baseColor": "#1A2126",
+ "showGroundAtmosphere": false,
+ "enableLighting": false
+ },
+ "control": {
+ "infoBox": true
+ },
+ "cameraController": {
+ "zoomFactor": 3.0,
+ "minimumZoomDistance": 1,
+ "maximumZoomDistance": 500000.0,
+ "enableRotate": true,
+ "enableTranslate": true,
+ "enableTilt": true,
+ "enableZoom": true,
+ "enableCollisionDetection": false
+ }
+ },
+ "basemaps": [
+ {
+ "pid": 10,
+ "id": 1112,
+ "name": "天地图",
+ "type": "group",
+ "layers": [
+ { "name": "注记", "type": "tdt", "layer": "ter_z", "key": ["216ee92889e17ab1b083fae665d522b8"] },
+ { "name": "注记", "type": "tdt", "layer": "img_z", "key": ["216ee92889e17ab1b083fae665d522b8"] }
+ ]
+ },
+ {
+ "id": 1111,
+ "pid": 10,
+ "name": "天地图电子",
+ "icon": "http://mars3d.cn/example/img/basemaps/tdt_vec.png",
+ "type": "group",
+ "layers": [
+ { "name": "底图", "type": "tdt", "layer": "vec_d", "key": ["216ee92889e17ab1b083fae665d522b8"] },
+ { "name": "注记", "type": "tdt", "layer": "vec_z", "key": ["216ee92889e17ab1b083fae665d522b8"] }
+ ]
+ },
+ {
+ "id": 1113,
+ "pid": 10,
+ "name": "天地图影像",
+ "icon": "http://mars3d.cn/example/img/basemaps/tdt_img.png",
+ "type": "tdt",
+ "layer": "img_d",
+ "key": ["216ee92889e17ab1b083fae665d522b8"],
+ "show": true
+ }
+ ],
+ "layers": [
+ {
+ "type": "geojson",
+ "id": "building",
+ "url": "http://111.198.10.15:11404/3d/zqBuilding.json",
+ "symbol": {
+ "type": "polygonP",
+ "styleOptions": {
+ "color": "rgb(52,125,246)",
+ "outline": false,
+ "opacity": 0.8
+ }
+ },
+ "buildings": {
+ "height": 100
+ },
+ "popup": "{name}",
+ "show": true
+ }
+ ]
+}
diff --git a/public/config/project.config.json b/public/config/project.config.json
index 69da0af..a9cb472 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -17,6 +17,5 @@
"provinceCode":"360000",
"cityCode":"361000",
"areaCode":"361024",
- "arcgisUrl": "http://111.198.10.15:13002/arcgis/rest/services/zq_GxData0825/MapServer/",
- "buildingUrl": "http://111.198.10.15:13002/arcgis/rest/services/zqBuilding/MapServer/0"
+ "arcgisUrl": "http://111.198.10.15:13002/arcgis/rest/services/gztest/MapServer/"
}
diff --git a/public/config/project.configzq.json b/public/config/project.configzq.json
new file mode 100644
index 0000000..3c61685
--- /dev/null
+++ b/public/config/project.configzq.json
@@ -0,0 +1,21 @@
+{
+ "title": "管网运行监测系统",
+ "subtitle": "",
+ "theme":"blue",
+ "baseUrl": "http://60.208.121.150:5001/",
+ "wsUrl": "ws://60.208.121.150:5001/websocket/",
+ "mainPage": "http://111.198.10.15:11404/dcms/#",
+ "amapSecurityCode": "182a2c5889f7fe6d90546d9b8f4781ad",
+ "amapKey": "1733551f35b56f6d8e9c0a9d4c2523b",
+ "mapType": "gaode",
+ "alarmSound": true,
+ "refreshTime": 60,
+ "singleSys": true,
+ "refreshType":"websocket",
+ "showPointType":"massMarkers",
+ "showAllWells": true,
+ "provinceCode":"360000",
+ "cityCode":"361000",
+ "areaCode":"361024",
+ "arcgisUrl": "http://111.198.10.15:13002/arcgis/rest/services/zq_GxData0825/MapServer/"
+}
diff --git "a/public/static/images/dev-\344\272\225\347\233\226\347\212\266\346\200\201\347\233\221\346\265\213\344\273\252.png" "b/public/static/images/dev-\344\272\225\347\233\226\347\212\266\346\200\201\347\233\221\346\265\213\344\273\252.png"
deleted file mode 100644
index 0d95cba..0000000
--- "a/public/static/images/dev-\344\272\225\347\233\226\347\212\266\346\200\201\347\233\221\346\265\213\344\273\252.png"
+++ /dev/null
Binary files differ
diff --git "a/public/static/images/dev-\347\207\203\346\260\224\346\231\272\350\203\275\347\233\221\346\265\213\347\273\210\347\253\257.png" "b/public/static/images/dev-\347\207\203\346\260\224\346\231\272\350\203\275\347\233\221\346\265\213\347\273\210\347\253\257.png"
deleted file mode 100644
index d050e49..0000000
--- "a/public/static/images/dev-\347\207\203\346\260\224\346\231\272\350\203\275\347\233\221\346\265\213\347\273\210\347\253\257.png"
+++ /dev/null
Binary files differ
diff --git "a/public/static/images/dev-\347\256\241\347\233\257.png" "b/public/static/images/dev-\347\256\241\347\233\257.png"
deleted file mode 100644
index 96f8e94..0000000
--- "a/public/static/images/dev-\347\256\241\347\233\257.png"
+++ /dev/null
Binary files differ
diff --git "a/public/static/images/\344\272\225\347\233\226\345\221\212\350\255\246.png" "b/public/static/images/\344\272\225\347\233\226\345\221\212\350\255\246.png"
new file mode 100644
index 0000000..9eb23fc
--- /dev/null
+++ "b/public/static/images/\344\272\225\347\233\226\345\221\212\350\255\246.png"
Binary files differ
diff --git "a/public/static/images/\345\231\252\345\243\260\345\221\212\350\255\246.png" "b/public/static/images/\345\231\252\345\243\260\345\221\212\350\255\246.png"
new file mode 100644
index 0000000..b9a5d45
--- /dev/null
+++ "b/public/static/images/\345\231\252\345\243\260\345\221\212\350\255\246.png"
Binary files differ
diff --git "a/public/static/images/\345\231\252\345\243\260\350\256\260\345\275\225\344\273\252.png" "b/public/static/images/\345\231\252\345\243\260\350\256\260\345\275\225\344\273\252.png"
new file mode 100644
index 0000000..6efac42
--- /dev/null
+++ "b/public/static/images/\345\231\252\345\243\260\350\256\260\345\275\225\344\273\252.png"
Binary files differ
diff --git "a/public/static/images/\346\212\245\350\255\246.png" "b/public/static/images/\346\212\245\350\255\246.png"
new file mode 100644
index 0000000..f80eea1
--- /dev/null
+++ "b/public/static/images/\346\212\245\350\255\246.png"
Binary files differ
diff --git "a/public/static/images/\346\266\210\351\230\262\346\240\223\345\221\212\350\255\246.png" "b/public/static/images/\346\266\210\351\230\262\346\240\223\345\221\212\350\255\246.png"
new file mode 100644
index 0000000..e2091f4
--- /dev/null
+++ "b/public/static/images/\346\266\210\351\230\262\346\240\223\345\221\212\350\255\246.png"
Binary files differ
diff --git "a/public/static/images/\346\266\210\351\230\262\346\240\223\351\230\262\347\233\227\346\260\264.png" "b/public/static/images/\346\266\210\351\230\262\346\240\223\351\230\262\347\233\227\346\260\264.png"
new file mode 100644
index 0000000..1988fdf
--- /dev/null
+++ "b/public/static/images/\346\266\210\351\230\262\346\240\223\351\230\262\347\233\227\346\260\264.png"
Binary files differ
diff --git "a/public/static/images/\346\266\262\344\275\215\345\221\212\350\255\246.png" "b/public/static/images/\346\266\262\344\275\215\345\221\212\350\255\246.png"
new file mode 100644
index 0000000..f4dd83f
--- /dev/null
+++ "b/public/static/images/\346\266\262\344\275\215\345\221\212\350\255\246.png"
Binary files differ
diff --git "a/public/static/images/\346\266\262\344\275\215\347\233\221\346\265\213\344\273\252.png" "b/public/static/images/\346\266\262\344\275\215\347\233\221\346\265\213\344\273\252.png"
new file mode 100644
index 0000000..37acd5a
--- /dev/null
+++ "b/public/static/images/\346\266\262\344\275\215\347\233\221\346\265\213\344\273\252.png"
Binary files differ
diff --git "a/public/static/images/\347\207\203\346\260\224\345\221\212\350\255\246.png" "b/public/static/images/\347\207\203\346\260\224\345\221\212\350\255\246.png"
new file mode 100644
index 0000000..d5f00fb
--- /dev/null
+++ "b/public/static/images/\347\207\203\346\260\224\345\221\212\350\255\246.png"
Binary files differ
diff --git "a/public/static/images/\347\207\203\346\260\224\346\231\272\350\203\275\347\233\221\346\265\213.png" "b/public/static/images/\347\207\203\346\260\224\346\231\272\350\203\275\347\233\221\346\265\213.png"
new file mode 100644
index 0000000..420106b
--- /dev/null
+++ "b/public/static/images/\347\207\203\346\260\224\346\231\272\350\203\275\347\233\221\346\265\213.png"
Binary files differ
diff --git "a/public/static/images/\347\207\203\346\260\224\351\231\204\345\261\236\347\211\251.png" "b/public/static/images/\347\207\203\346\260\224\351\231\204\345\261\236\347\211\251.png"
new file mode 100644
index 0000000..8f94d81
--- /dev/null
+++ "b/public/static/images/\347\207\203\346\260\224\351\231\204\345\261\236\347\211\251.png"
Binary files differ
diff --git a/src/assets/overview/dark.jpg b/src/assets/overview/dark.jpg
new file mode 100644
index 0000000..c0761e0
--- /dev/null
+++ b/src/assets/overview/dark.jpg
Binary files differ
diff --git a/src/components/Mars3D/Mars3dMap.vue b/src/components/Mars3D/Mars3dMap.vue
index d7238e6..ca0565e 100644
--- a/src/components/Mars3D/Mars3dMap.vue
+++ b/src/components/Mars3D/Mars3dMap.vue
@@ -5,15 +5,13 @@
import Vue from 'vue'
import * as Cesium from 'mars3d-cesium'
-// 导入mars3d主库
import 'mars3d/dist/mars3d.css'
import 'mars3d-cesium/Build/Cesium/Widgets/widgets.css'
import * as mars3d from 'mars3d'
-// 导入插件(其他插件类似，插件清单访问：http://mars3d.cn/dev/guide/start/architecture.html)
// 为了方便使用,绑定到原型链，在其他vue文件，直接 this.mars3d 来使用
Vue.prototype.mars3d = mars3d
-Vue.prototype.Cesium = mars3d.Cesium
+Vue.prototype.Cesium = Cesium
import axios from 'axios'
export default {
@@ -106,9 +104,20 @@
map.scene.screenSpaceCameraController.zoomEventTypes = [Cesium.CameraEventType.MIDDLE_DRAG, Cesium.CameraEventType.WHEEL, Cesium.CameraEventType.PINCH]
map.scene.screenSpaceCameraController.rotateEventTypes = [Cesium.CameraEventType.LEFT_DRAG]
map.scene.screenSpaceCameraController.enableCollisionDetection = false
+
map.on(mars3d.EventType.renderError, function(event) {
window.location.reload()
})
+
+ // const handler = new Cesium.ScreenSpaceEventHandler(map.viewer.canvas)
+ // handler.setInputAction(function(evt) {
+ // var cartesian = map.viewer.camera.pickEllipsoid(evt.position, map.viewer.scene.globe.ellipsoid)
+ // var cartographic = Cesium.Cartographic.fromCartesian(cartesian)
+ // var lng = Cesium.Math.toDegrees(cartographic.longitude)// 经度值
+ // var lat = Cesium.Math.toDegrees(cartographic.latitude)// 纬度值
+ // console.log(' {point: [' + lng + ',' + lat + ',0]},')
+ // }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
+
this[`map${this.mapKey}`] = map
if (this.needBloomEffect) {
const bloomEffect = new mars3d.effect.BloomEffect({
@@ -119,13 +128,14 @@
const graphicLayer = new mars3d.layer.GraphicLayer()
map.addLayer(graphicLayer)
- // 垂直飞线
- // lat:36.290705 , lng:117.424668 ,
- // flyLine(graphicLayer, 117.33, 117.58, 36.59, 36.80)
+
// 挂载到全局对象下，所有组件通过 this.map 访问
Vue.prototype[`map${this.mapKey}`] = map
// 抛出事件
- this.$emit('onload', map, this.center)
+ const that= this
+ map.on(mars3d.EventType.load, function(event) {
+ that.$emit('onload', map, that.center)
+ })
},
changeBaseLayer(basemap) {
window.map.basemap = basemap
diff --git a/src/components/Mars3D/utils/ArcGisWfsLayer.js b/src/components/Mars3D/utils/ArcGisWfsLayer.js
index 7ca8399..9a569b4 100644
--- a/src/components/Mars3D/utils/ArcGisWfsLayer.js
+++ b/src/components/Mars3D/utils/ArcGisWfsLayer.js
@@ -2,14 +2,14 @@
import Vue from 'vue'
/**
- *
+ * 三维管线
* @param index gis图层编号
* @param color 管线颜色
* @param name 图层名称
* @param radius 管径
* @returns {ArcGisWfsLayer}
*/
-export function polylineVolumeP(index, color, name, radius) {
+export function polylineVolumeP(index, color, name, radius, height='') {
const wfsLayer3D = new mars3d.layer.ArcGisWfsLayer({
enablePickFeatures: false,
name: name,
@@ -23,8 +23,10 @@
radius: radius
},
callback: function(attr, styleOpt) {
- var val = { attr }.attr
- const height = -(Number(val.起始埋深) + Number(val.终止埋深)) / 2
+ if(height === ''){
+ var val = { attr }.attr
+ height = -(Number(val.起始埋深) + Number(val.终止埋深)) / 2
+ }
return { setHeight: height, height }
}
},
@@ -35,7 +37,7 @@
}
/**
- *
+ * 二维管线
* @param index gis图层编号
* @param color 管线颜色
* @param name 图层名称
@@ -69,7 +71,7 @@
export function building() {
const wfsLayer = new mars3d.layer.ArcGisWfsLayer({
name: '建筑物面矢量图层',
- url: Vue.prototype.baseConfig.buildingUrl,
+ url: '',
// minimumLevel: changeLevel,
symbol: {
type: 'polygonC',
diff --git a/src/components/Mars3D/utils/GeoJsonLayer.js b/src/components/Mars3D/utils/GeoJsonLayer.js
index 51ab972..4c8f784 100644
--- a/src/components/Mars3D/utils/GeoJsonLayer.js
+++ b/src/components/Mars3D/utils/GeoJsonLayer.js
@@ -9,7 +9,7 @@
* @param model 模型
* @param scale 模型缩放
* @param condition 搜索条件
- * @returns {{"3D": string, "2D": BaseClass}}
+ * @returns {{"3D": BaseGraphicLayer, "2D": BaseClass}}
*/
export function createPointModelLayer(index, name, image, model = '', scale, condition) {
@@ -38,7 +38,6 @@
scaleByDistance_farValue: 0.6,
scaleByDistance_near: 0,
scaleByDistance_nearValue: 1.4,
- clampToGround: true,
highlight: { type: 'click', image: '../static/images/high-marker.png' }
}
})
@@ -56,9 +55,7 @@
}
})
window.map.addLayer(layer)
- const layer3D = new mars3d.layer.GraphicLayer({
- name: name
- }).bindPopup(function(event) {
+ const layer3D = new mars3d.layer.GraphicLayer({ name: name}).bindPopup(function(event) {
const attr = event.graphic.attr || {}
return mars3d.Util.getTemplateHtml({ template: 'all', attr: attr })
})
@@ -133,7 +130,6 @@
scaleByDistance_farValue: 0.6,
scaleByDistance_near: 0,
scaleByDistance_nearValue: 1.4,
- clampToGround: true,
highlight: { type: 'click', image: '../static/images/high-marker.png' }
}
})
@@ -150,13 +146,13 @@
})
}
})
- .on(mars3d.EventType.show, function(event) {
- console.log(index, ' show时间(s):', new Date().getSeconds())
- }).on(mars3d.EventType.load, function(event) {
- console.log(index, ' load时间(s):', new Date().getSeconds())
- }).on(mars3d.EventType.postRender, function(event) {
- console.log(index, ' postRender时间(s):', new Date().getSeconds())
- })
+ // .on(mars3d.EventType.show, function(event) {
+ // console.log(index, ' show时间(s):', new Date().getSeconds())
+ // }).on(mars3d.EventType.load, function(event) {
+ // console.log(index, ' load时间(s):', new Date().getSeconds())
+ // }).on(mars3d.EventType.postRender, function(event) {
+ // console.log(index, ' postRender时间(s):', new Date().getSeconds())
+ // })
window.map.addLayer(layer)
queryServer.query({
where: condition,
@@ -173,3 +169,59 @@
})
return layer
}
+
+
+/**
+ * ModelC
+ * @param index 图层序号
+ * @param name 图层名称
+ * @param model 模型
+ * @param scale 模型缩放
+ * @param condition 搜索条件
+ * @returns {{"3D": BaseGraphicLayer, "2D": BaseClass}}
+ */
+
+export function createModelLayer(index, name, model = '', scale, condition) {
+ const queryServer = new mars3d.query.QueryArcServer({
+ url: Vue.prototype.baseConfig.arcgisUrl + index,
+ popup: 'all',
+ pageSize: 5000
+ })
+ const layer3D = new mars3d.layer.GraphicLayer({
+ name: name
+ }).bindPopup(function(event) {
+ const attr = event.graphic.attr || {}
+ return mars3d.Util.getTemplateHtml({ template: 'all', attr: attr })
+ })
+ window.map.addLayer(layer3D)
+ layer3D.show = false
+ queryServer.query({
+ where: condition,
+ success: (result) => {
+ if (result.count === 0) {
+ console.log('未查询到相关记录！')
+ }
+ if (model !== '') {
+ const points = []
+ result.geojson.features.forEach(item => {
+ points.push({
+ position: [item.geometry.coordinates[0], item.geometry.coordinates[1], 0],
+ style: {
+ scale: scale
+ },
+ attr: item.properties
+ })
+ })
+ const modelCombine = new mars3d.graphic.ModelCombine({
+ url: model,
+ instances: points
+ })
+ layer3D.addGraphic(modelCombine)
+ }
+ },
+ error: (error, msg) => {
+ console.log('服务访问错误,' + error)
+ }
+ })
+ return layer3D
+}
diff --git a/src/main.js b/src/main.js
index f8a4b83..964152c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -103,6 +103,12 @@
import axios from 'axios'
import service from '@/utils/request'
+
+import * as Cesium from 'mars3d-cesium'
+import 'mars3d/dist/mars3d.css'
+import 'mars3d-cesium/Build/Cesium/Widgets/widgets.css'
+import * as mars3d from 'mars3d'
+
axios.get('./config/project.config.json').then((result) => {
console.log('get config')
Vue.prototype.baseConfig = result.data
diff --git a/src/router/modules/well.js b/src/router/modules/well.js
index 0f6d5a6..17ed4e1 100644
--- a/src/router/modules/well.js
+++ b/src/router/modules/well.js
@@ -31,7 +31,7 @@
children: [
{
path: '/overview3d',
- component: () => import('@/views/overview/overview3dzq'),
+ component: () => import('@/views/overview/overview3d'),
name: 'overview3d',
meta: { title: '管网运行总览', icon: 'icon-config', permission: ['/overview/3d'] }
}
diff --git a/src/views/overview/components/popupLocation.vue b/src/views/overview/components/popupLocation.vue
index 6ad655b..3ba9efd 100644
--- a/src/views/overview/components/popupLocation.vue
+++ b/src/views/overview/components/popupLocation.vue
@@ -21,7 +21,7 @@
-
+
图上拾取
@@ -39,6 +39,10 @@
export default {
name: 'PopupLocation',
props: {
+ is3D: {
+ type: Boolean,
+ default: false
+ },
defaultPosition: {
type: Array,
default: () => []
diff --git a/src/views/overview/components/toolBox.vue b/src/views/overview/components/toolBox.vue
index 9b0eb95..83b1c5e 100644
--- a/src/views/overview/components/toolBox.vue
+++ b/src/views/overview/components/toolBox.vue
@@ -37,6 +37,12 @@
+
+
+ 深蓝底图
+
+
@@ -63,6 +69,10 @@
name: 'ToolBox',
components: { LayerChooseWindow },
props: {
+ is3D: {
+ type: Boolean,
+ default: false
+ },
show: {
type: Boolean,
default: false
@@ -166,7 +176,7 @@
position: absolute;
right: 10px;
top: 50px;
- width: 200px;
+ width: 230px;
background-color: rgba(255,255,255,0.9);
.window-body{
display: flex;
diff --git a/src/views/overview/overview3d.vue b/src/views/overview/overview3d.vue
index ed448eb..a984ea7 100644
--- a/src/views/overview/overview3d.vue
+++ b/src/views/overview/overview3d.vue
@@ -1,12 +1,12 @@
@@ -40,41 +40,43 @@
import PopupDataFilter from '@/views/overview/components/popupDataFilter'
import PopupLocation from '@/views/overview/components/popupLocation'
import MapSearchComp from '@/views/overview/components/mapSearchComp'
-
import axios from 'axios'
import * as Cesium from 'mars3d-cesium'
-// 导入mars3d主库
import 'mars3d/dist/mars3d.css'
import 'mars3d-cesium/Build/Cesium/Widgets/widgets.css'
import * as mars3d from 'mars3d'
+import Mars3dMap from '@/components/Mars3D/Mars3dMap'
import store from '@/store'
import { breadcrumb } from '@/settings'
import { RSAencrypt } from '@/utils/security'
+import {polylineC, polylineVolumeP} from "@/components/Mars3D/utils/ArcGisWfsLayer";
+import {createPointModelLayer, createModelLayer, createPointLayer} from "@/components/Mars3D/utils/GeoJsonLayer";
const line_layer = []
const line_layer_3D = []
-let point_layer = []
let point_layer_3D = []
-const dev_layer = []
+let dev_layer = []
const dev_layer_3D = []
const wellLoc = {}
let underground = null
+let alarm_layer = null
export default {
name: 'Overview3D',
- components: { MapSearchComp, PopupLocation, PopupDataFilter, ToolBox, AlarmList },
+ components: { Mars3dMap, MapSearchComp, PopupLocation, PopupDataFilter, ToolBox, AlarmList },
data() {
return {
initWell: false, // 是否初始化井信息
showLine: true,
showModel: false,
- colors: ['#7f0000', '#804000', '#00ff00', '#ff7fe9', '#ff7fe9', '#ff0000', '#00bfff', '#00ff00', '#ff0000'],
+ basemap: 1113,
+ colors: ['#7f0000', '#804000', '#ff7fe9', '#ff7fe9', '#00bfff', '#00ff00', '#ff0000', '#00ff00', '#ff0000'],
layerName:
- ['雨水附属物', '污水附属物', '天然气附属物', '燃气附属物', '给水附属物', '电信附属物', '电力附属物', '标识器',
- '雨水管线', '污水管线', '通信管线', '天然气管线', '燃气管线', '路灯管线', '给水管线', '电信管线', '电力管线'],
+ ['雨水管线', '污水管线', '天然气管线', '燃气管线', '给水管线', '电信管线', '电力管线', '通信管线','路灯管线',
+ '标识器', '井盖状态监测仪', '燃气智能监测', '消防栓防盗水', '液位监测仪', '噪声记录仪'],
baseLayer: 'gaode_vec', // 底图图层
- layers: [{ id: 'well', name: '井图层', children: [] }, { id: 'line', name: '管线图层', children: [] }, { id: 'dev', name: '设备图层', children: [] }, { id: 'alarm', name: '报警图层' }], // 图层列表
+ layers: [{ id: 'line', name: '管线图层', children: [] }, { id: 'dev', name: '设备图层', children: [] }, { id: 'alarm', name: '报警图层' }], // 图层列表
checkedLayer: [], // 选中的图层
center: ['114.88', '25.68'], // 地图中心
showLine: false,
@@ -131,15 +133,7 @@
alpha(val) {
window.map.basemap.opacity = val / 100
underground.alpha = val / 100
- // if (val <= 80 && window.map.level >= 19) {
- // const lineTypes = this.checkedLayer.filter(item => item.indexOf('line-') > -1).map(item => item.substring(5))
- // line_layer_3D.forEach(layer => { layer.show = lineTypes.indexOf(layer.options.name) > -1 })
- // line_layer.forEach(layer => layer.show = false)
- // } else {
- // const lineTypes = this.checkedLayer.filter(item => item.indexOf('line-') > -1).map(item => item.substring(5))
- // line_layer.forEach(layer => { layer.show = lineTypes.indexOf(layer.options.name) > -1 })
- // line_layer_3D.forEach(layer => layer.show = false)
- // }
+ this.cameraChange()
},
needRefresh(val) { // 需要刷新报警
if (val) this.refreshAlarm()
@@ -161,20 +155,15 @@
key: 'tagsView',
value: false
})
- this.$store.dispatch('GetConfig').then(() => {
- this.$message.success('连接服务器成功')
- this.handleLogin()
- }).catch((e) => {
- })
},
created() {
- // this.fetchWellType()
+ this.fetchWellType()
+ this.resultList = []
+ console.log('create', ' 时间(s):', new Date().getSeconds())
},
mounted() {
this.$nextTick(() => {
this.windowResize(window.innerHeight, window.innerWidth)
- this.initmars3d()
- this.resultList = []
})
},
beforeDestroy() {
@@ -192,20 +181,6 @@
}
},
methods: {
- // 点击登录按钮
- handleLogin() {
- const loginForm = {
- sid: this.$store.getters.sid,
- username: 'sykb',
- password: RSAencrypt('111111')
- }
- this.$store.dispatch('Login', loginForm).then(() => {
- // this.$message.success('登录成功')
- this.fetchWellType()
- this.loadToken = true
- }).catch(() => {
- })
- },
windowResize(height, width) {
// 查找header高度
const el_header = document.getElementById('app-header')
@@ -222,202 +197,63 @@
bodyHeight -= 5
store.dispatch('settings/ChangeHeight', bodyHeight)
},
- async initmars3d() {
- axios.get('./config/mars3dConfig.json').then((result) => {
- const data = result.data
- data.scene.center = { lat: this.center[1], lng: this.center[0], alt: 10000, heading: 360, pitch: -45 }
- this.initMars3dMap(data)
- })
- },
// 初始化放这里
- async initMars3dMap(mapOptions) {
- window.map = new mars3d.Map('mars3dContainer', mapOptions)
- window.map.basemap = 1113
- window.map.scene.screenSpaceCameraController.enableCollisionDetection = false
- window.map.scene.screenSpaceCameraController.tiltEventTypes = [Cesium.CameraEventType.RIGHT_DRAG]
- window.map.scene.screenSpaceCameraController.zoomEventTypes = [Cesium.CameraEventType.MIDDLE_DRAG, Cesium.CameraEventType.WHEEL, Cesium.CameraEventType.PINCH]
- window.map.scene.screenSpaceCameraController.rotateEventTypes = [Cesium.CameraEventType.LEFT_DRAG]
- // this.bloomEffect = new mars3d.effect.BloomEffect({
- // enabled: true
- // })
- // map.addEffect(this.bloomEffect)
+ onMapload(map, center) {
+ window.map = map
+ this.center = center
underground = new mars3d.thing.Underground({ alpha: this.alpha / 100 })
window.map.addThing(underground)
- window.map.basemap.opacity = this.alpha / 100
- // 崩溃后刷新
- window.map.on(mars3d.EventType.renderError, function(event) {
- window.location.reload()
- })
- const that = this
- window.map.on(mars3d.EventType.load, function(event) {
- window.map.on(mars3d.EventType.cameraChanged, that.cameraChange, that)
- that.initLine()
- that.initPoint()
- that.mapReady()
- that.mapLoading = false
- })
+ alarm_layer = new mars3d.layer.GraphicLayer({ name: '报警图层' })
+ window.map.addLayer(alarm_layer)
+ this.initLine()
+ this.initPoint()
+ window.map.on(mars3d.EventType.cameraChanged, this.cameraChange, this)
+ this.mapLoading = false
},
async initLine() {
- for (let i = 8; i <= 16; i++) {
- // 三维地下管线 (19)
- let wfsLayer = new mars3d.layer.ArcGisWfsLayer({
- name: this.layerName[i],
- popup: 'all',
- url: 'http://111.198.10.15:13002/arcgis/rest/services/gztest/MapServer/' + i,
- minimumLevel: 19,
- symbol: {
- type: 'polylineVolumeP',
- styleOptions: {
- color: this.colors[i - 8],
- shape: 'pipeline',
- radius: 0.1
- },
- callback: function(attr, styleOpt) {
- return { setHeight: -1.5 }
- }
- }
- })
- line_layer_3D.push(wfsLayer)
- window.map.addLayer(wfsLayer)
+ for (let i = 0; i <= 8; i++) {
+ // 三维管线
+ line_layer_3D.push(polylineVolumeP(i+8, this.colors[i], this.layerName[i], 0.1, -1.5))
// 二维管线
- wfsLayer = new mars3d.layer.ArcGisWfsLayer({
- name: this.layerName[i],
- url: 'http://111.198.10.15:13002/arcgis/rest/services/gztest/MapServer/' + i, // maximumLevel: 19,
- symbol: {
- type: 'polylineC',
- styleOptions: {
- color: this.colors[i - 8],
- width: 3,
- hasShadows: false
- }
- },
- popup: 'all'
- })
- window.map.addLayer(wfsLayer)
- line_layer.push(wfsLayer)
+ line_layer.push(polylineC(i+8, this.colors[i], this.layerName[i], 3))
}
},
- createPointLayer(index, image, model = '', condition) {
- const queryServer = new mars3d.query.QueryArcServer({
- url: 'http://111.198.10.15:13002/arcgis/rest/services/gztest/MapServer/' + index,
- popup: 'all',
- pageSize: 5000
- })
- const layer = new mars3d.layer.GeoJsonLayer({
- name: this.layerName[index],
- onCreateGraphic: function(options) {
- const points = options.position // 坐标
- const attr = options.attr // 属性信息
- const primitive = new mars3d.graphic.BillboardPrimitive({
- allowDrillPick: true,
- attr: attr,
- id: attr.编号,
- position: points,
- style: {
- image: image,
- scale: 0.6,
- hasPixelOffset: true,
- pixelOffsetY: -10,
- scaleByDistance: true,
- scaleByDistance_far: 30000,
- scaleByDistance_farValue: 0.6,
- scaleByDistance_near: 0,
- scaleByDistance_nearValue: 1.4,
- clampToGround: true,
- highlight: { type: 'click', image: '../static/images/high-marker.png' }
- }
- })
- layer.addGraphic(primitive)
- },
- popup: 'all'
- }).bindPopup(function(event) {
- return mars3d.Util.getTemplateHtml({ template: 'all', attr: event.graphic.attr || {}})
- }).on(mars3d.EventType.click, function(event) {
- if (window.map.camera.positionCartographic.height > 5000) {
- window.map.flyToPoint(event.graphic.position, {
- radius: 5000, // 距离目标点的距离
- duration: 1
- })
- }
- })
- point_layer.push(layer)
- window.map.addLayer(layer)
-
- queryServer.query({
- where: condition,
- success: (result) => {
- if (result.count === 0) {
- this.$message.warning('未查询到相关记录！')
- }
- layer.load({ data: result.geojson })
- if (model !== '') {
- const layer3D = new mars3d.layer.GraphicLayer({
- name: this.layerName[index]
- }).bindPopup(function(event) {
- const attr = event.graphic.attr || {}
- return mars3d.Util.getTemplateHtml({ template: 'all', attr: attr })
- })
- layer3D.show = false
- window.map.addLayer(layer3D)
- point_layer_3D.push(layer3D)
- const well = []
- result.geojson.features.forEach(item => {
- well.push({
- position: [item.geometry.coordinates[0], item.geometry.coordinates[1], 0],
- style: {
- scale: 1.5
- },
- attr: item.properties
- })
- })
- const modelCombine = new mars3d.graphic.ModelCombine({
- url: model,
- instances: well
- })
- layer3D.addGraphic(modelCombine)
- }
- },
- error: (error, msg) => {
- this.$message.error('服务访问错误,' + error)
- }
- })
- },
async initPoint(condition = '') {
- if (point_layer.length !== 0) {
- point_layer.forEach(item => window.map.removeLayer(item))
- }
+ const layerName = ['雨水附属物', '污水附属物', '天然气附属物', '燃气附属物', '给水附属物', '电信附属物', '电力附属物']
if (point_layer_3D.length !== 0) {
point_layer_3D.forEach(item => window.map.removeLayer(item))
}
- point_layer = []
point_layer_3D = []
- const str = condition === '' ? '1<>1' : "编号 LIKE '%" + condition + "%' or 附属物名称 LIKE '%" + condition + "%' or 所属道路 LIKE '%" + condition + "%'"
- for (let i = 0; i <= 7; i++) {
- if (i !== 7) {
- this.createPointLayer(i, '../static/images/' + this.layerName[i] + '.png', '../static/model/ys.gltf', str)
- } else {
- this.createPointLayer(i, '../static/images/' + this.layerName[i] + '.png', '', str)
- }
+
+ if (dev_layer.length !== 0) {
+ dev_layer.forEach(item => window.map.removeLayer(item))
}
+ dev_layer = []
+ const str = condition === '' ? '1<>1' : "编号 LIKE '%" + condition + "%' or 附属物名称 LIKE '%" + condition + "%' or 所属道路 LIKE '%" + condition + "%'"
+ const bsq = condition === '' ? '1<>1' : "编号 LIKE '%" + condition + "%' or 对象名称 LIKE '%" + condition + "%' or 所属道路 LIKE '%" + condition + "%'"
+
+ dev_layer.push(createPointLayer('标识器', 7, '../static/images/标识器.png', bsq))
+
+ for (let i = 0; i <= 7; i++) {
+ point_layer_3D.push(createModelLayer(i, layerName[i], '../static/model/ys.gltf', 1.5, str))
+ }
+ this.mapReady()
},
- // 控制二维线的显隐
cameraChange() {
// console.log('map-level:' + window.map.level)
// console.log('alpha:' + this.alpha)
- if (window.map.level <= 19) { // 远
- if (this.showModel) {
- point_layer_3D.forEach(layer => { layer.show = false })
- this.showModel = false
- }
- } else if (this.alpha <= 80) { // 近，透
- if (!this.showModel) {
- const wellTypes = this.checkedLayer.filter(item => item.indexOf('well-') > -1).map(item => item.substring(5))
+ if (!this.showModel) {
+ if(this.alpha <= 80 && window.map.level > 19){
+ const lineTypes = this.checkedLayer.filter(item => item.indexOf('line-') > -1).map(item => item.substring(5))
+ const wellTypes = lineTypes.map(item => item.replace('管线','附属物'))
point_layer_3D.forEach(layer => { layer.show = wellTypes.indexOf(layer.options.name) > -1 })
+ line_layer_3D.forEach(layer => { layer.show = lineTypes.indexOf(layer.options.name) > -1 })
this.showModel = true
}
- } else { // 近，不透
- if (this.showModel) {
+ }else{
+ if(this.alpha >80 || window.map.level <= 19){
point_layer_3D.forEach(layer => { layer.show = false })
+ line_layer_3D.forEach(layer => { layer.show = false })
this.showModel = false
}
}
@@ -428,9 +264,9 @@
this.fetchWellList() // 加载全部井
this.firstAmount = true
this.toolShow = true
- if (this.refreshType === 'clock') { // 如果需要倒计时刷新的
+ // if (this.refreshType === 'clock') { // 如果需要倒计时刷新的
setTimeout(() => { this.countDown() }, 1000)
- }
+ // }
},
// 获取全部井列表
fetchWellList() {
@@ -453,35 +289,33 @@
filterLayer(checkedLayer) {
this.checkedLayer = checkedLayer
// 1.过滤井图层
- const wellTypes = checkedLayer.filter(item => item.indexOf('well-') > -1).map(item => item.substring(5))
+
const lineTypes = checkedLayer.filter(item => item.indexOf('line-') > -1).map(item => item.substring(5))
+ const wellTypes = lineTypes.map(item => item.replace('管线','附属物'))
+
// 点
- point_layer.forEach(layer => { layer.show = wellTypes.indexOf(layer.options.name) > -1 })
point_layer_3D.forEach(layer => { layer.show = wellTypes.indexOf(layer.options.name) > -1 })
// 线
line_layer.forEach(layer => { layer.show = lineTypes.indexOf(layer.options.name) > -1 })
line_layer_3D.forEach(layer => { layer.show = lineTypes.indexOf(layer.options.name) > -1 })
- // 2.选中or没选中报警图层
- if (checkedLayer.indexOf('alarm') !== -1) {
- this.showAlarm = true
- } else {
- this.showAlarm = false
- }
+ // 2.选中or没选中设备图层
+ const devTypes = checkedLayer.filter(item => item.indexOf('dev-') > -1).map(item => item.substring(4))
+ dev_layer.forEach(layer => { layer.show = devTypes.indexOf(layer.options.name) > -1 })
+
+ // 3.选中or没选中报警图层
+ checkedLayer.indexOf('alarm') !== -1 ? alarm_layer.show = true : alarm_layer.show = false
+
},
// 切换底图
changeBaseMap(type) {
this.baseLayer = type
- if (type === 'gaode_vec') {
- window.map.basemap = 1112
- if (this.bloomEffect !== null) {
- this.bloomEffect.enabled = false
- }
+ if (type === 'dark') {
+ this.basemap = 1112
+ } else if (type === 'gaode_vec') {
+ this.basemap = 1111
} else {
- window.map.basemap = 1113
- if (this.bloomEffect !== null) {
- this.bloomEffect.enabled = true
- }
+ this.basemap = 1113
}
},
// 倒计时函数
@@ -496,31 +330,6 @@
},
// 获取点位类型，显示点位类型下拉
fetchWellType() {
- // getWellType().then(response => {
- // this.wellTypeList = []
- // // 如果该用户支持的点位类型只有一个，则不显示该筛选框
- // const supportWellTypes = this.$store.getters.wellTypes
- // this.wellTypeList = response.data.filter(wellType => {
- // return supportWellTypes.findIndex(item => item == wellType.value) > -1
- // })
- // })
- this.wellTypeList = this.layerName.map((item, index) => {
- return {
- value: item,
- name: item
- }
- })
- this.wellTypeList.length = 8
- const wellLayer = {
- id: 'well',
- name: '井图层',
- children: this.wellTypeList.map(item => {
- return {
- id: 'well-' + item.value,
- name: item.name
- }
- })
- }
const lineLayer = {
id: 'line',
name: '管线图层',
@@ -529,58 +338,52 @@
id: 'line-' + item,
name: item
}
- }).splice(8, 9)
+ }).splice(0, 9)
}
- const deviceTypes = this.$store.getters.deviceTypes
- this.layers.splice(0, 1, wellLayer)
- this.layers.splice(1, 1, lineLayer)
+ const devLayer = {
+ id: 'dev',
+ name: '设备图层',
+ children: this.layerName.map(item => {
+ return {
+ id: 'dev-' + item,
+ name: item
+ }
+ }).splice(9, 6)
+ }
+ this.layers.splice(0, 1, lineLayer)
+ this.layers.splice(1, 1, devLayer)
if (this.baseConfig.showAllWells) {
- // this.checkedLayer = [...this.checkedLayer, 'well', this.wellTypeList.map(item => 'well-' + item.value), 'line', lineLayer.children.map(item => item.id)]
- this.checkedLayer = ['well', 'line']
- this.wellTypeList.forEach(item => this.checkedLayer.push('well-' + item.value))
+ this.checkedLayer = ['line', 'dev']
lineLayer.children.forEach(item => this.checkedLayer.push('line-' + item.name))
+ lineLayer.children.forEach(item => this.checkedLayer.push('dev-' + item.name))
} else {
this.checkedLayer = [...this.checkedLayer]
}
if (this.wellTypeList.length <= 1) {
this.showWellType = false
}
- getDeviceType(this.listQuery).then(response => {
- this.deviceTypeList = []
- // 过滤掉该单位不支持的设备类型
- const deviceTypes = this.$store.getters.deviceTypes
- for (const deviceType of response.data) {
- if (deviceTypes.indexOf(deviceType.value) !== -1) {
- this.deviceTypeList.push(deviceType)
- }
- }
- const devLayer = {
- id: 'dev',
- name: '设备图层',
- children: this.deviceTypeList.map(item => {
- return {
- id: 'dev-' + item.value,
- name: item.name
- }
- })
- }
- this.layers.splice(2, 1, devLayer)
- })
- },
- /**
- * 数据筛选
- * @param listQuery 筛选条件
- * @param showMessage 是否告知筛选结果
- */
- dataFilter(listQuery, showMessage = true) {
- if (this.type === 'massMarkers') { // 过滤海量点
- this.filterMassMarker(listQuery, showMessage)
- this.filterAlarm(listQuery, showMessage)
- } else if (this.type === 'cluster') { // 过滤聚合点
- // this.filterClusters(listQuery, showMessage)
- this.filterAlarm(listQuery, showMessage)
- }
+ // getDeviceType(this.listQuery).then(response => {
+ // this.deviceTypeList = []
+ // // 过滤掉该单位不支持的设备类型
+ // const deviceTypes = this.$store.getters.deviceTypes
+ // for (const deviceType of response.data) {
+ // if (deviceTypes.indexOf(deviceType.value) !== -1) {
+ // this.deviceTypeList.push(deviceType)
+ // }
+ // }
+ // const devLayer = {
+ // id: 'dev',
+ // name: '设备图层',
+ // children: this.deviceTypeList.map(item => {
+ // return {
+ // id: 'dev-' + item.value,
+ // name: item.name
+ // }
+ // })
+ // }
+ // this.layers.splice(2, 1, devLayer)
+ // })
},
// 清空查询
clearSearch() {
@@ -648,114 +451,6 @@
}
this.resetMassMarker()
},
- // 过滤报警
- filterAlarm(listQuery, showMessage = false) {
- const hideWellIds = []// 要隐藏的点位编号
- // 整理筛选条件
- const keywords = listQuery.keywords
- const wellTypes = listQuery.wellTypes ? listQuery.wellTypes : listQuery.wellType ? [listQuery.wellType] : [] // 点位类型
- let deptids = [] // 所有权属
- if (listQuery.deptid) {
- deptids = this.fetchDeptList(listQuery.deptid) // 获取所有下级
- }
- // 查询报警的井
- for (const marker of this.alarmWells) {
- let show = true
- // 关键字不为空，且没有匹配成功，不显示， 关键字匹配点位编号和位置
- if (keywords && keywords !== '' && !(marker.wellCode.indexOf(keywords) !== -1 || marker.position.indexOf(keywords) !== -1)) {
- show = false
- }
- // 部门不为空， 且没有匹配成功，多部门匹配
- if (deptids.length > 0 && deptids.indexOf(marker.deptid) === -1) {
- show = false
- }
- // 点位类型不为空，且没有匹配成功
- if (wellTypes && wellTypes.length > 0 && wellTypes.indexOf(marker.wellType) === -1) {
- show = false
- }
- // 如果show为false，放入需要隐藏的井id列表
- if (show === false) {
- hideWellIds.push(marker.wellId)
- }
- marker.visible = show
- }
- // 4.过滤报警marker：alarmWells 如果没有找到符合要求的井，直接将全部查询结果隐藏，并将所有报警隐藏，否则按照查询结果筛选需要隐藏的报警
- if (hideWellIds.length === this.alarmWells.length) {
- for (const alarmWell of this.alarmWells) {
- alarmWell.visible = false
- }
- } else {
- // 将报警隐藏
- for (const alarmWell of this.alarmWells) {
- if (hideWellIds.indexOf(alarmWell.wellId) > -1) {
- alarmWell.visible = false
- } else {
- alarmWell.visible = true
- }
- }
- }
- // 5.过滤显示列表：alarmList
- this.alarmList = []
- if (hideWellIds.length > 0) { // 如果有要隐藏的井，过滤
- for (const alarm of this.alarmListOri) {
- const findFlag = hideWellIds.findIndex(code => code === alarm.wellId)
- if (findFlag === -1) {
- this.alarmList.push(alarm)
- }
- }
- } else { // 如果没有直接等于alarmListOri
- this.alarmList = this.alarmListOri
- }
- },
- // 获取全部井列表
- fetchDeviceList() {
- this.loading = false
- this.deviceTypeList.forEach(item => {
- const param = {
- deviceType: item.value
- }
- // getDeviceAllList(param).then(response => {
- // if (response.code === 200) {
- // if (response.data.length === 0) return
- // const graphicLayer = new mars3d.layer.GraphicLayer({ name: item.name })
- // window.map.addLayer(graphicLayer)
- // dev_layer.push(graphicLayer)
- // const name = item.name.substr(0, 1)
- // response.data.forEach(data => {
- // if (wellLoc[data.wellCode] !== undefined && wellLoc[data.wellCode].length === 2) {
- // const primitive = new mars3d.graphic.ModelPrimitive({
- // position: [wellLoc[data.wellCode][0], wellLoc[data.wellCode][1], -3],
- // style: {
- // url: '../static/model/' + 1 + '.glb',
- // scale: 1,
- // label: {
- // // 面中心点，显示文字的配置
- // text: name, // 对应的属性名称
- // opacity: 1,
- // font_size: 14,
- // color: '#ffffff',
- // font_weight: 'bold',
- // font_style: 'normal',
- // addHeight: 3,
- // // scaleByDistance: true,
- // //
- // // pixelOffsetY: -40,
- // //
- // // scaleByDistance_far: 300000,
- // // scaleByDistance_farValue: 0.4,
- // // scaleByDistance_near: 1,
- // // scaleByDistance_nearValue: 1.4,
- // visibleDepth: false
- // }
- // }
- // })
- // graphicLayer.addGraphic(primitive)
- // }
- // })
- // }
- // })
- })
- },
// 刷新报警列表
refreshAlarm() {
console.log('refreshAlarm')
@@ -964,7 +659,7 @@
left: 8px;
display: flex;
flex-wrap: wrap;
- background-color: #fcfbe8;
+ background: linear-gradient(to top left, #48617c, #619bd4);
border-radius: 5px;
width: 300px;
height: 200px;
@@ -973,9 +668,9 @@
border-color: rgba(0, 0, 0, .05);
.cover-item{
width: 50%;
+ width: 50%;
font-size: 16px;
- font-weight: 600;
- color: #505a5e;
+ color: white;
}
}
.map-gz {
diff --git a/src/views/overview/overview3dzq.vue b/src/views/overview/overview3dzq.vue
index 8d6e637..78df80b 100644
--- a/src/views/overview/overview3dzq.vue
+++ b/src/views/overview/overview3dzq.vue
@@ -21,9 +21,9 @@
`
@@ -594,7 +581,6 @@
scaleByDistance_farValue: 0.8,
scaleByDistance_near: 0,
scaleByDistance_nearValue: 1.6,
- clampToGround: true,
visibleDepth: false
}).unbindHighlight()
point.unbindPopup()
diff --git a/vue.config.js b/vue.config.js
index 58005ff..e16384c 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,60 +1,34 @@
'use strict'
+const path = require('path')
const webpack = require('webpack')
const CopyWebpackPlugin = require('copy-webpack-plugin')
-const path = require('path')
+const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
const defaultSettings = require('./public/config/project.config')
function resolve(dir) {
return path.join(__dirname, dir)
}
-
const name = defaultSettings.title || '管网运行监测系统' // page title
-
-// If your port is set to 80,
-// use administrator privileges to execute the command line.
-// For example, Mac: sudo npm run
-// You can change the port by the following method:
-// port = 9527 npm run dev OR npm run dev --port = 9527
const port = process.env.port || process.env.npm_config_port || 9527 // dev port
-// All configuration item explanations can be find in https://cli.vuejs.org/config/
module.exports = {
- /**
- * You will need to set publicPath if you plan to deploy your site under a sub path,
- * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
- * then publicPath should be set to "/bar/".
- * In most cases please use '/' !!!
- * Detail: https://cli.vuejs.org/config/#publicpath
- */
- publicPath: './',
- outputDir: 'dist',
+ publicPath: '/',
assetsDir: 'static',
+ outputDir: 'dist',
lintOnSave: process.env.NODE_ENV === 'development', // 是否开启eslint
- productionSourceMap: false, // 不需要生产环境的sourcemap
- devServer: { // development server config
- // host: 'localhost',
+ productionSourceMap: false, // 不需要生产环境的 source map
+ filenameHashing: true, // 文件名哈希
+ // 它支持webPack-dev-server的所有选项
+ devServer: {
port: port, // 端口号
open: true, // 配置自动启动浏览器
- overlay: {
- warnings: false,
- errors: true
- },
- before: require('./mock/mock-server.js')
- // proxy: {
- // '/5002': {
- // target: 'http://60.208.121.150:5002/', // 配置访问的服务器地址
- // pathRewrite: { '^/5002': '' }, // 用于将请求中的 /api 字符串替换为空, 然后访问地址就能正确访问，若不添加此行配置，那么访问地址就变成了： http://localhost:5000/api/request_url，这样的请求就会出现 404 操作
- // ws: true, // 是否支持 webstocket, 默认是 true
- // changeOrigin: true // 用于控制请求头中的 host 值, 默认是 ture
- // }
- // }
+ // before: require('./mock/mock-server.js')
},
- // webpack config, if value is an object, it well be merge to final config using webpack-merge
configureWebpack: (config) => {
+ let plugins = []
const cesiumSourcePath = 'node_modules/mars3d-cesium/Build/Cesium/' // cesium库安装目录
const cesiumRunPath = './mars3d-cesium/' // cesium运行时路径
-
- const plugins = [
+ plugins = [
// 标识cesium资源所在的主目录，cesium内部资源加载、多线程等处理时需要用到
new webpack.DefinePlugin({
CESIUM_BASE_URL: JSON.stringify(path.join(config.output.publicPath, cesiumRunPath))
@@ -69,6 +43,7 @@
]
})
]
+ plugins.push(new NodePolyfillPlugin())
return {
name: name,
resolve: {
@@ -77,29 +52,14 @@
}
},
externals: {
- 'AMap': 'AMap'
- },
+ 'AMap': 'AMap',
+ // 'mars3d-cesium': 'Cesium'
+ }, //排除使用 mars3d-cesium
module: { unknownContextCritical: false }, // 配置加载的模块类型，cesium时必须配置
plugins: plugins
}
},
- // A function that well receive an instance of ChanableConfig powered by webpack-chain. Allows
- // for more fine-grained modification of the internal webpack config
chainWebpack: config => {
- // it can improve the speed of the first screen, it is recommended to turn on preload
- config.plugin('preload').tap(() => [
- {
- rel: 'preload',
- // to ignore runtime.js
- // https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171
- fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
- include: 'initial'
- }
- ])
-
- // when there are many pages, it will cause too many meaningless requests
- config.plugins.delete('prefetch')
-
// set svg-sprite-loader
config.module
.rule('svg')
@@ -122,40 +82,42 @@
config => {
// runtime 代码由于只是驱动不同路由页面的关系，代码量比较少，请求 js 的时间都大于执行时间了，
// 所以使用 script-ext-html-webpack-plugin 插件将其内链在 index.html 中比较友好。
- config
- .plugin('ScriptExtHtmlWebpackPlugin')
- .after('html')
- .use('script-ext-html-webpack-plugin', [{
- // `runtime` must same as runtimeChunk name. default is `runtime`
- inline: /runtime\..*\.js$/
- }])
- .end()
+
+ // config
+ // .plugin('ScriptExtHtmlWebpackPlugin')
+ // .after('html')
+ // .use('script-ext-html-webpack-plugin', [{
+ // // `runtime` must same as runtimeChunk name. default is `runtime`
+ // inline: /runtime\..*\.js$/
+ // }])
+ // .end()
+
// 如果使用了某些长期不会改变的库，像 element-ui ，打包完成有 600 多 KB ，
// 包含在默认 vendor 中显然不合适，每次用户都要加载这么大的文件体验不好，所以要单独打包：
config
.optimization.splitChunks({
- chunks: 'all',
- cacheGroups: {
- libs: {
- name: 'chunk-libs',
- test: /[\\/]node_modules[\\/]/,
- priority: 10,
- chunks: 'initial' // only package third parties that are initially dependent
- },
- elementUI: {
- name: 'chunk-elementUI', // split elementUI into a single package
- priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
- test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
- },
- commons: {
- name: 'chunk-commons',
- test: resolve('src/components'), // can customize your rules
- minChunks: 3, // minimum common number
- priority: 5,
- reuseExistingChunk: true
- }
+ chunks: 'all',
+ cacheGroups: {
+ libs: {
+ name: 'chunk-libs',
+ test: /[\\/]node_modules[\\/]/,
+ priority: 10,
+ chunks: 'initial' // only package third parties that are initially dependent
+ },
+ elementUI: {
+ name: 'chunk-elementUI', // split elementUI into a single package
+ priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
+ test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
+ },
+ commons: {
+ name: 'chunk-commons',
+ test: resolve('src/components'), // can customize your rules
+ minChunks: 3, // minimum common number
+ priority: 5,
+ reuseExistingChunk: true
}
- })
+ }
+ })
// https:// webpack.js.org/configuration/optimization/#optimizationruntimechunk
config.optimization.runtimeChunk('single')
}