Skip to content

Y
yangpu
Commit 11bd9e05 authored by 郭铭瑶's avatar 郭铭瑶 🤘
Browse files
Options

区域网格点击操作添加

parent d5fa099d
Hide whitespace changes
Inline Side-by-side
Showing with 108 additions and 51 deletions
index.html
View file @ 11bd9e05
......@@ -19,10 +19,10 @@
</body>
<script src="./static/hls.js"></script>
<!-- 下面是开发用 -->
<script src="./static/SMap.min.js"></script>
<!-- <script src="./static/SMap.min.js"></script> -->
<!-- 下面是生产用 -->
<!-- <script src="./static/esm/SMap.min.js"></script> -->
<script src="./static/esm/SMap.min.js"></script>
<script src="./static/Plugins.min.js"></script>
<script src="./static/GeoTask.min.js"></script>
</html>
</html>
\ No newline at end of file
src/components/MonitorComponents/MonitorMap/monitor-map.vue
View file @ 11bd9e05
......@@ -32,7 +32,8 @@ export default {
// this.map.hideXQ_Poly()
this.map.hideXQ_Point()
this.map.hideMPZ()
this.addGridListener()
// this.addGridListener()
this.identifytask = new GeoTask.Identify(this.map.view)
this.addListener()
this.$emit('complete')
})
......@@ -47,7 +48,7 @@ export default {
}
})
const param = {
layerUniqueId: 'aaa',
layerUniqueId: 'GridLayer',
url: 'http://10.81.71.243:23456/hmfmstest/gisshare/C/rest/services/YPZRWG/MapServer',
displayed: false, //查询接口是否在地图上显示
tolerance: 5,
......@@ -55,26 +56,26 @@ export default {
}
this.identifytask.MapService(param).then(res => {
if (res.results && res.results.length > 0) {
this.$emit('grid', res.results[0].feature.attributes)
this.$emit('grid', res.results[0].feature)
}
})
})
},
addGridListener() {
this.identifytask = new GeoTask.Identify(this.map.view)
// this.identifytask.on(SMap.MapEvent.pointermove, (result, geometry) => {
// console.log('----', result, geometry)
// if (geometry) {
// this.map.view.popup.defaultPopupTemplateEnabled = true
// this.map.view.popup.autoOpenEnabled = false
// this.map.view.popup.open({
// location: geometry,
// title: result.attributes.name,
// content: createContentpopup(result.attributes),
// })
// }
// })
},
// addGridListener() {
// // this.identifytask = new GeoTask.Identify(this.map.view)
// // this.identifytask.on(SMap.MapEvent.pointermove, (result, geometry) => {
// // console.log('----', result, geometry)
// // if (geometry) {
// // this.map.view.popup.defaultPopupTemplateEnabled = true
// // this.map.view.popup.autoOpenEnabled = false
// // this.map.view.popup.open({
// // location: geometry,
// // title: result.attributes.name,
// // content: createContentpopup(result.attributes),
// // })
// // }
// // })
// },
addGrid(name) {
return SMap.load([
'esri/Map',
......@@ -88,23 +89,23 @@ export default {
type: 'simple',
symbol: {
type: 'simple-fill',
color: 'rgba(255,235,59,.3)',
color: 'rgba(51,145,255,.3)',
outline: {
// color: [128, 128, 128, 0.5],
color: [0, 0, 0, 1],
color: [255, 235, 59, 1],
width: 2
}
}
},
definitionExpression: `所属街 = '${name}'`,
id: 'grid'
id: 'ThisIsGridID'
})
this.map.view.map.add(gridLayer)
return gridLayer
})
},
removeGrid() {
this.map.removeLayer('grid')
this.map.removeLayer('ThisIsGridID')
},
// 添加点
addPoint({key, data, labelKey = null, icon = 'test.png', size = 14, color}) {
......@@ -117,10 +118,10 @@ export default {
// return overlayGroup
},
// 删除点
removePoint(points) {
if (!this.map || !points) return
this.map.remove(points)
// 删除图层 点或线等
remove(layer) {
if (!layer) return
this.map.remove(layer)
},
// 将数据转换为符合地图的点数组
getMapPoints({data = [], key, labelKey, icon, size, color = '#47B3FF'}) {
......@@ -172,7 +173,7 @@ export default {
this.map.zoomOut()
},
// 添加面
addPolygon({paths, fillColor = 'rgba(255,255,255,.3)'}, strokeColor = 'transparent', attributes = {}, style = 'solid', strokeWeight = 1, label = null) {
addPolygon({paths, fillColor = 'rgba(255,255,255,1)', strokeColor = 'transparent', attributes = {}, style = 'solid', strokeWeight = 1, label = null}) {
const polygon = new SMap.Polygon({
paths: paths.map(item => new SMap.LngLat(item[0], item[1])),
attributes,
......@@ -184,6 +185,21 @@ export default {
label,
})
this.map.add(polygon)
return polygon
},
// 添加线状覆盖物
addPolyLine({paths, attributes = {}, strokeColor = 'rgba(51,145,255,.6)', width = 2}) {
const polyline = new SMap.Polyline({
path: paths.map(item => new SMap.LngLat(item[0], item[1])),
attributes,
cap: 'square',
strokeColor,
style: 'solid',
lineJoin: 'round',
width,
})
this.map.add(polyline)
return polyline
},
// 添加边界
addBoundary({name, weight = 10, count = 10, color = 'rgba(51,145,255,.6)', maskColor = [0, 0, 0, 0]}) {
......
src/server/api.js
View file @ 11bd9e05
......@@ -3,10 +3,10 @@ let DATA_URL = ''
let VIDEO_URL = ''
switch (process.env.NODE_ENV) {
case 'production':
// BASE_URL = 'http://10.89.4.164:18080/api'
// VIDEO_URL = 'http://10.89.4.179:27343'
BASE_URL = 'http://yangpu.hm.omniview.pro/api'
VIDEO_URL = 'http://10.89.1.208:7000/hawkeye'
BASE_URL = 'http://10.89.4.164:18080/api'
VIDEO_URL = 'http://10.89.4.179:27343'
// BASE_URL = 'http://yangpu.hm.omniview.pro/api'
// VIDEO_URL = 'http://10.89.1.208:7000/hawkeye'
DATA_URL = 'http://10.89.1.208:10005'
break
default:
......
src/views/main.vue
View file @ 11bd9e05
......@@ -36,6 +36,9 @@
<m-modal v-model="patrolModal" title="主动巡检">
<m-form :label-width=".6" :model="patrolData" :layout="patrolLayout" />
</m-modal>
<m-modal v-model="gridPersonModal" title="网格详情" @close="removeSelectedGridLayer">
<m-table :model="gridPersonList" :layout="gridPersonLayout" />
</m-modal>
<m-modal :title="`鹰眼监控：${cameraName || ''}`" v-model="videoModal">
<VideoComponent v-if="videoModal" :videoSrc="videoSrc" />
</m-modal>
......@@ -144,6 +147,37 @@ export default {
doneModal: false,
doneData: {},
gridLayer: null,
gridPersonModal: false,
gridPersonList: [],
gridPersonLayout: [
{
key: 'street',
title: '街道',
width: 4,
},
{
key: 'title',
title: '职务',
width: 4,
},
{
key: 'contacts',
title: '姓名',
width: 4,
},
{
key: 'mobile',
title: '联系方式',
width: 6,
},
{
key: 'department',
title: '所属部门',
width: 6,
},
],
selectedGridArea: null,
selectedGridBoundary: null,
}
},
computed: {
......@@ -202,7 +236,7 @@ export default {
document.querySelector('title').innerText = `${name}城市运行平台`
const {map} = this.$refs
this.initMapFocus()
map.addPolygon({paths: this.$store.state.streetPaths[id], fillColor: 'rgba(51,145,255,.3)'})
// map.addPolygon({paths: this.$store.state.streetPaths[id], fillColor: 'rgba(51,145,255,.3)'})
map.addBoundary({name: name})
this.gridLayer = map.addGrid(this.currentStreetInfo.name)
},
......@@ -229,16 +263,23 @@ export default {
}
// this.$refs.map.focus(data.x || data.gpsx, data.y || data.gpsy, 8)
},
handleGridClick(data) {
console.log('grid-click', data)
this.$refs.map.removeGrid()
// this.$ajax.get({
// url: this.$api.DATA_URL + this.$api.GET_GRID_PERSON,
// params: {street: this.currentStreetInfo.name, gridId: data['网格编']}
// }).then(res => {
// this.gridPersonList = this.$com.confirm(res, 'data.content', [])
// this.gridPersonModal = true
// })
handleGridClick({attributes, geometry}) {
const {map} = this.$refs
this.removeSelectedGridLayer()
const [paths] = geometry.rings
this.selectedGridArea = map.addPolygon({paths, fillColor: 'rgba(255,235,59,.15)'})
this.$ajax.get({
url: this.$api.DATA_URL + this.$api.GET_GRID_PERSON,
params: {street: this.currentStreetInfo.name, gridId: attributes['网格编']}
}).then(res => {
this.gridPersonList = this.$com.confirm(res, 'data.content', [])
this.gridPersonModal = true
})
},
removeSelectedGridLayer() {
const {map} = this.$refs
map.remove(this.selectedGridArea)
map.remove(this.selectedGridBoundary)
},
handleListClick(data) {
if (this.handleCurTab === '处置中') {
......@@ -250,8 +291,8 @@ export default {
}
},
drawSmartPoints(data) {
const {addPoint, removePoint} = this.$refs.map
removePoint(this.smartPoints)
const {addPoint, remove} = this.$refs.map
remove(this.smartPoints)
this.smartPoints = addPoint({
key: 'smart',
size: [14, 16],
......@@ -275,8 +316,8 @@ export default {
},
watch: {
cameraList(cur) {
const {addPoint, removePoint} = this.$refs.map
removePoint(this.cameraPoints)
const {addPoint, remove} = this.$refs.map
remove(this.cameraPoints)
this.cameraPoints = addPoint({
key: 'camera',
size: 14,
......@@ -285,8 +326,8 @@ export default {
})
},
patrolList(cur) {
const {addPoint, removePoint} = this.$refs.map
removePoint(this.patrolPoints)
const {addPoint, remove} = this.$refs.map
remove(this.patrolPoints)
this.patrolPoints = addPoint({
key: 'patrol',
size: 14,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment