+
@@ -51,6 +51,9 @@
import * as mars3d from 'mars3d'
import store from '@/store'
import { breadcrumb } from '@/settings'
+import Mars3dMap from '@/components/Mars3D/Mars3dMap'
+import { polylineC, polylineVolumeP } from '@/components/Mars3D/utils/ArcGisWfsLayer'
+import { createPointLayer } from '@/components/Mars3D/utils/GeoJsonLayer'
let layer2021 = null
let layer2020 = null
let zrbs_layer = null
@@ -62,10 +65,11 @@
let underground = null
export default {
name: 'Overview3D',
- components: { MapSearchComp, PopupLocation, PopupDataFilter, ToolBox, AlarmList },
+ components: { Mars3dMap, MapSearchComp, PopupLocation, PopupDataFilter, ToolBox, AlarmList },
data() {
return {
layerName: ['燃气管线', '燃气附属物', '中燃燃气标识器', '圣井燃气标识器'],
+ basemap: 1113,
baseLayer: 'gaode_vec', // 底图图层
layers: [{ id: 'well', name: '井图层', children: [] }, { id: 'line', name: '管线图层', children: [] }, { id: 'dev', name: '设备图层', children: [] }], //, { id: 'alarm', name: '报警图层' }], // 图层列表
checkedLayer: [], // 选中的图层
@@ -110,7 +114,6 @@
markers: [], // 所有井的点原始数据
tempMarker: null,
bloomEffect: null,
- loadToken: false,
isAll: true
}
},
@@ -145,13 +148,13 @@
}
},
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() {
@@ -177,12 +180,6 @@
key: 'tagsView',
value: false
})
- this.$store.dispatch('GetConfig').then(() => {
- this.$message.success('连接服务器成功')
- this.handleLogin()
- }).catch((e) => {
- // this.$message.error('连接服务器失败')
- })
},
methods: {
windowResize(height, width) {
@@ -201,20 +198,6 @@
bodyHeight -= 5
store.dispatch('settings/ChangeHeight', bodyHeight)
},
- // 点击登录按钮
- 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(() => {
- })
- },
initBaseMap() {
const url2021 = 'http://172.20.90.108:8081/geoesb/proxy/5a44607b2e814658b463b76f9675bd3e/9bf164775ad94a18a5324f0eb681deea'
const url2020 = 'http://172.20.90.108:8081/geoesb/proxy/4fb75f7491c94356a9dd58a44d0dc57b/9bf164775ad94a18a5324f0eb681deea'
@@ -245,54 +228,12 @@
layer2021.show = false
},
- async initmars3d() {
- axios.get('./config/mars3dConfig.json').then((result) => {
- this.center = [result.data.scene.center.lng, result.data.scene.center.lat]
- this.initMars3dMap(result.data)
- })
- },
// 初始化放这里
- async initMars3dMap(mapOptions) {
- Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0N2E2M2ZmYi1iMDhjLTQwN2QtODZmOC0zNDZjNTMxYjgyNWEiLCJpZCI6MzY5MDMsImlhdCI6MTYwNzMzMTE2Nn0.5xsFCB0dxpcNGUkJOEpsVhUW9bf66XZIwV3hkZl09UI'
- // window.viewer = new Cesium.Viewer('mars3dContainer', {
- // geocoder: false, // 是否显示地名查找控件
- // infoBox: false,
- // animation: false, // 是否显示动画控件(左下方那个)
- // timeline: false, // 是否显示时间线控件
- // shadows: false, // 阴影是否被太阳投射
- // showldAnimate: true, // 让场景中的动画自动播放
- // sceneModePicker: false, // 是否显示投影方式控件
- // fullscreenButton: false, // 全屏按钮不显示
- // homeButton: false,
- // navigationHelpButton: false, // 帮助按钮
- // baseLayerPicker: false,
- // imageryProvider: new Cesium.TileMapServiceImageryProvider({
- // url: Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII')
- // })
- // })
- // window.viewer.imageryLayers._layers[0].show = false
- // window.viewer.scene.globe.baseColor = Cesium.Color.WHITE
- // window.viewer._cesiumWidget._creditContainer.style.display = 'none' // 去除版权信息
- // window.map = new mars3d.Map(window.viewer, mapOptions)
- window.map = new mars3d.Map('mars3dContainer', mapOptions)
- window.map.basemap = 1113
- // this.initBaseMap()
- 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]
+ onMapload(map) {
+ window.map = map
underground = new mars3d.thing.Underground({ alpha: this.alpha / 100 })
window.map.addThing(underground)
- // this.bloomEffect = new mars3d.effect.BloomEffect({
- // enabled: true
- // })
- // map.addEffect(this.bloomEffect)
- // 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) {
that.initLine()
@@ -302,112 +243,17 @@
},
async initLine() {
// 三维管线
- const wfsLayer3D = new mars3d.layer.ArcGisWfsLayer({
- enablePickFeatures: false,
- name: '燃气管线',
- url: this.baseConfig.arcgisUrl + '3',
- minimumLevel: 19,
- symbol: {
- type: 'polylineVolumeP',
- styleOptions: {
- color: '#FF7FE9',
- shape: 'pipeline',
- radius: 0.1
- },
- callback: function(attr, styleOpt) {
- var val = { attr }.attr
- const height = -(Number(val.起始埋深) + Number(val.终止埋深)) / 2
- return { setHeight: height, height }
- }
- },
- popup: 'all'
- })
- window.map.addLayer(wfsLayer3D)
- rqline_layer.push(wfsLayer3D)
+ rqline_layer.push(polylineVolumeP('3', '#FF7FE9', '燃气管线', 0.1))
// 二维管线
- const wfsLayer = new mars3d.layer.ArcGisWfsLayer({
- enablePickFeatures: false,
- name: '燃气管线',
- url: this.baseConfig.arcgisUrl + '3',
- // maximumLevel: 19,
- symbol: {
- type: 'polylineC',
- styleOptions: {
- color: '#FF7FE9',
- width: 3,
- hasShadows: false
- }
- },
- popup: 'all'
- })
- window.map.addLayer(wfsLayer)
- rqline_layer.push(wfsLayer)
- },
- createPointLayer(layer, index, image, condition) {
- if (layer !== null) window.map.removeLayer(layer)
- const queryServer = new mars3d.query.QueryArcServer({
- url: this.baseConfig.arcgisUrl + index,
- popup: 'all',
- pageSize: 5000
- })
- layer = new mars3d.layer.GeoJsonLayer({
- 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: 20000,
- 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
- })
- }
- })
- window.map.addLayer(layer)
- queryServer.query({
- where: condition,
- success: (result) => {
- if (result.count === 0) {
- this.$message.warning('未查询到相关记录！')
- }
- layer.load({ data: result.geojson })
- },
- error: (error, msg) => {
- this.$message.error('服务访问错误,' + error)
- }
- })
- return layer
+ rqline_layer.push(polylineC('3', '#FF7FE9', '燃气管线', 3))
},
async initPoint(condition = '') {
this.mapLoading = true
const rq = condition === '' ? '1<>1' : "编号 LIKE '%" + condition + "%' or 附属物名称 LIKE '%" + condition + "%' or 所属道路 LIKE '%" + condition + "%'"
const bsq = condition === '' ? '1<>1' : "编号 LIKE '%" + condition + "%' or 对象名称 LIKE '%" + condition + "%' or 所属道路 LIKE '%" + condition + "%'"
- rqpoint_layer = this.createPointLayer(rqpoint_layer, '2', '../static/images/燃气附属物.png', rq)
- zrbs_layer = this.createPointLayer(zrbs_layer, '0', '../static/images/标识器.png', bsq)
- sjbs_layer = this.createPointLayer(sjbs_layer, '1', '../static/images/标识器.png', bsq)
+ rqpoint_layer = createPointLayer(rqpoint_layer, '2', '../static/images/燃气附属物.png', rq)
+ zrbs_layer = createPointLayer(zrbs_layer, '0', '../static/images/标识器.png', bsq)
+ sjbs_layer = createPointLayer(sjbs_layer, '1', '../static/images/标识器.png', bsq)
const that = this
rqpoint_layer.on(mars3d.EventType.load, function(event) {
that.mapReady()
@@ -429,7 +275,8 @@
where: rq,
success: (result) => {
if (result.count === 0) {
- this.$message.warning('未查询到相关记录！')
+ console.log('未查询到相关记录！')
+ return
}
const well = []
const box = []
@@ -532,9 +379,9 @@
changeBaseMap(type) {
this.baseLayer = type
if (type === 'gaode_vec') {
- window.map.basemap = 1112
+ this.basemap = 1112
} else {
- window.map.basemap = 1113
+ this.basemap = 1113
}
},
// 倒计时函数
diff --git "a/public/static/images/\345\214\272\345\237\237\350\260\203\345\216\213\347\253\231.png" "b/public/static/images/\345\214\272\345\237\237\350\260\203\345\216\213\347\253\231.png"
new file mode 100644
index 0000000..2a7c66d
--- /dev/null
+++ "b/public/static/images/\345\214\272\345\237\237\350\260\203\345\216\213\347\253\231.png"
Binary files differ
diff --git "a/public/static/images/\345\234\243\344\272\225\347\207\203\346\260\224.png" "b/public/static/images/\345\234\243\344\272\225\347\207\203\346\260\224.png"
new file mode 100644
index 0000000..d88e6a2
--- /dev/null
+++ "b/public/static/images/\345\234\243\344\272\225\347\207\203\346\260\224.png"
Binary files differ
diff --git "a/public/static/images/\346\240\207\350\257\206\345\231\250.png" "b/public/static/images/\346\240\207\350\257\206\345\231\250.png"
index 2bc24ce..b5f36b5 100644
--- "a/public/static/images/\346\240\207\350\257\206\345\231\250.png"
+++ "b/public/static/images/\346\240\207\350\257\206\345\231\250.png"
Binary files differ
diff --git "a/public/static/images/\346\240\207\350\257\206\345\231\2501.png" "b/public/static/images/\346\240\207\350\257\206\345\231\2501.png"
new file mode 100644
index 0000000..2bc24ce
--- /dev/null
+++ "b/public/static/images/\346\240\207\350\257\206\345\231\2501.png"
Binary files differ
diff --git "a/public/static/images/\346\255\243\345\222\214\345\212\240\346\260\224\347\253\231.png" "b/public/static/images/\346\255\243\345\222\214\345\212\240\346\260\224\347\253\231.png"
new file mode 100644
index 0000000..79cfb2c
--- /dev/null
+++ "b/public/static/images/\346\255\243\345\222\214\345\212\240\346\260\224\347\253\231.png"
Binary files differ
diff --git "a/public/static/images/\351\227\250\347\253\231.png" "b/public/static/images/\351\227\250\347\253\231.png"
new file mode 100644
index 0000000..544ac6c
--- /dev/null
+++ "b/public/static/images/\351\227\250\347\253\231.png"
Binary files differ
diff --git a/src/api/overview/wellOverview.js b/src/api/overview/wellOverview.js
index 2e62e69..b7984d0 100644
--- a/src/api/overview/wellOverview.js
+++ b/src/api/overview/wellOverview.js
@@ -5,6 +5,7 @@
// 井查询
export function getWellList(params) {
return request({
+ baseURL: '/5002',
url: 'overview/wellList',
method: 'get',
params
@@ -23,6 +24,7 @@
// 获取报警列表
export function getAlarmsNow(params) {
return request({
+ baseURL: '/5002',
url: 'overview/alarmNow',
method: 'get',
params
diff --git a/src/components/Mars3D/Mars3dMap.vue b/src/components/Mars3D/Mars3dMap.vue
new file mode 100644
index 0000000..67592b1
--- /dev/null
+++ b/src/components/Mars3D/Mars3dMap.vue
@@ -0,0 +1,122 @@
+
+
+
+
+
+
diff --git a/src/components/Mars3D/utils/ArcGisWfsLayer.js b/src/components/Mars3D/utils/ArcGisWfsLayer.js
new file mode 100644
index 0000000..3b6d51a
--- /dev/null
+++ b/src/components/Mars3D/utils/ArcGisWfsLayer.js
@@ -0,0 +1,64 @@
+import * as mars3d from 'mars3d'
+import Vue from 'vue'
+
+/**
+ *
+ * @param index gis图层编号
+ * @param color 管线颜色
+ * @param name 图层名称
+ * @param radius 管径
+ * @returns {ArcGisWfsLayer}
+ */
+export function polylineVolumeP(index, color, name, radius) {
+ const wfsLayer3D = new mars3d.layer.ArcGisWfsLayer({
+ enablePickFeatures: false,
+ name: name,
+ url: Vue.prototype.baseConfig.arcgisUrl + index,
+ minimumLevel: 19,
+ symbol: {
+ type: 'polylineVolumeP',
+ styleOptions: {
+ color: color,
+ shape: 'pipeline',
+ radius: radius
+ },
+ callback: function(attr, styleOpt) {
+ var val = { attr }.attr
+ const height = -(Number(val.起始埋深) + Number(val.终止埋深)) / 2
+ return { setHeight: height, height }
+ }
+ },
+ popup: 'all'
+ })
+ window.map.addLayer(wfsLayer3D)
+ return wfsLayer3D
+}
+
+/**
+ *
+ * @param index gis图层编号
+ * @param color 管线颜色
+ * @param name 图层名称
+ * @param width 宽度
+ * @returns {ArcGisWfsLayer}
+ */
+
+export function polylineC(index, color, name, width) {
+ const wfsLayer = new mars3d.layer.ArcGisWfsLayer({
+ enablePickFeatures: false,
+ name: name,
+ url: Vue.prototype.baseConfig.arcgisUrl + index,
+ // maximumLevel: 19,
+ symbol: {
+ type: 'polylineC',
+ styleOptions: {
+ color: color,
+ width: width,
+ hasShadows: false
+ }
+ },
+ popup: 'all'
+ })
+ window.map.addLayer(wfsLayer)
+ return wfsLayer
+}
diff --git a/src/components/Mars3D/utils/GeoJsonLayer.js b/src/components/Mars3D/utils/GeoJsonLayer.js
new file mode 100644
index 0000000..8738528
--- /dev/null
+++ b/src/components/Mars3D/utils/GeoJsonLayer.js
@@ -0,0 +1,174 @@
+import * as mars3d from 'mars3d'
+import Vue from 'vue'
+
+/**
+ * BillboardP + ModelC
+ * @param index 图层序号
+ * @param name 图层名称
+ * @param image 图片
+ * @param model 模型
+ * @param condition 搜索条件
+ * @returns {{"3D": string, "2D": BaseClass}}
+ */
+
+export function createPointModelLayer(index, name, image, model = '', condition) {
+ const queryServer = new mars3d.query.QueryArcServer({
+ url: Vue.prototype.baseConfig.arcgisUrl + index,
+ popup: 'all',
+ pageSize: 5000
+ })
+ const layer = new mars3d.layer.GeoJsonLayer({
+ name: name,
+ 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
+ })
+ }
+ })
+ window.map.addLayer(layer)
+ let layer3D = ''
+ queryServer.query({
+ where: condition,
+ success: (result) => {
+ if (result.count === 0) {
+ console.log('未查询到相关记录！')
+ }
+ layer.load({ data: result.geojson })
+ if (model !== '') {
+ layer3D = new mars3d.layer.GraphicLayer({
+ name: name
+ }).bindPopup(function(event) {
+ const attr = event.graphic.attr || {}
+ return mars3d.Util.getTemplateHtml({ template: 'all', attr: attr })
+ })
+ layer3D.show = false
+ window.map.addLayer(layer3D)
+ const points = []
+ result.geojson.features.forEach(item => {
+ points.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: points
+ })
+ layer3D.addGraphic(modelCombine)
+ }
+ },
+ error: (error, msg) => {
+ console.log('服务访问错误,' + error)
+ }
+ })
+ return {
+ '3D': layer3D,
+ '2D': layer
+ }
+}
+
+/**
+ * BillboardP
+ * @param layer 图层
+ * @param index gis图层编号
+ * @param image 图片
+ * @param condition 条件
+ * @returns {BaseClass}
+ */
+export function createPointLayer(layer, index, image, condition) {
+ if (layer !== null) window.map.removeLayer(layer)
+ const queryServer = new mars3d.query.QueryArcServer({
+ url: Vue.prototype.baseConfig.arcgisUrl + index,
+ popup: 'all',
+ pageSize: 5000
+ })
+ layer = new mars3d.layer.GeoJsonLayer({
+ 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: 20000,
+ 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
+ })
+ }
+ }).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,
+ success: (result) => {
+ console.log(index, '总数:', result.count, ' data时间(s):', new Date().getSeconds())
+ if (result.count === 0) {
+ console.log('未查询到相关记录！')
+ }
+ layer.load({ data: result.geojson })
+ },
+ error: (error, msg) => {
+ console.log('服务访问错误,' + error)
+ }
+ })
+ return layer
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 49d6763..565bff8 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -183,7 +183,7 @@
background-color: #00000000 !important;
background: url("../assets/images/info-bg.png") no-repeat !important;
background-size: 100% 100% !important;
- border-radius: 20px;
+ border-radius: 20px !important;
}
.mars3d-popup-close-button{
top: 10px !important;
diff --git a/src/views/overview/overview3dzq.vue b/src/views/overview/overview3dzq.vue
index 2ea1713..7dda3b6 100644
--- a/src/views/overview/overview3dzq.vue
+++ b/src/views/overview/overview3dzq.vue
@@ -1,7 +1,7 @@