<template>
<div>
<el-row>
<el-col :span="6" class="staticPanel">
<sup-statis-panel />
</el-col>
<el-col :span="18" class="mapPanel">
<div style="margin: 5px;">
<el-row :gutter="20">
<el-col :span="6" style="text-align: left;">
<el-radio-group v-model="queryEventSwitch" size="medium" @change="switchContent">
<el-radio-button label="0">案卷</el-radio-button>
<el-radio-button label="1">人员</el-radio-button>
<el-radio-button label="2">部件</el-radio-button>
</el-radio-group>
</el-col>
</el-row>
<div v-loading="mapLoading" ref="mapDiv" class="baseMap"/>
<el-form v-if="showCaseSelect" ref="dataForm" :model="parts" :label-position="labelPosition" label-width="120px" class="form">
<el-row :gutter="20" class="rowSelect">
<el-col :span="20">
<el-form-item label="案卷状态" class="item">
<el-select v-model="parts.caseStatusCode" placeholder="选择案卷状态" clearable value="" class="notLastSelect" @change="changeCaseScope()">
<el-option value="toHandle" label="处置中"/>
<el-option value="toDistribute" label="新立案"/>
<el-option value="toVerify" label="待核实"/>
<el-option value="toCheck" label="待核查"/>
</el-select>
<label class="customLabel">是否超期</label>
<el-radio-group v-model="isOverTime" @change="changeCaseScope()">
<el-radio-button label="">全部</el-radio-button>
<el-radio-button label="Ot">超期</el-radio-button>
<el-radio-button label="Not">未超期</el-radio-button>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-form v-if="showPersonSelect" ref="dataForm" :model="parts" :label-position="labelPosition" label-width="120px" class="form" >
<el-row :gutter="10" class="rowSelect">
<el-col :span="20">
<el-form-item label="人员分类" prop="casepersonCode" class="item">
<el-radio-group v-model="casepersonCode" @change="casePerson()">
<el-radio-button label="supervisor">监督员</el-radio-button>
<el-radio-button label="process">处置员</el-radio-button>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-form v-if="showPartsSelect" ref="dataForm" :model="parts" :label-position="labelPosition" label-width="120px" class="form">
<el-row :gutter="10" class="rowSelect">
<el-col :span="20">
<el-form-item label="部件大类" prop="casetypeCode" class="item">
<el-select v-model="parts.casetypeCode" placeholder="选择部件大类" clearable value="" class="notLastSelect">
<el-option
v-for="item in caseTypeOpts"
:key="item.id"
:label="item.typeName"
:value="item.typeCode"/>
</el-select>
<label class="customLabel">部件小类</label>
<el-select v-model="parts.casetypeDetailCode" placeholder="选择部件小类" clearable value="">
<el-option
v-for="item in caseDetailTypeOpts"
:key="item.id"
:label="item.typeDetailName"
:value="item.typeDetailCode"/>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import request from '@/utils/request'
import { loadModules } from 'esri-loader'
import SupStatisPanel from '@/views/supControl/SupStatisPanel'
import { getCaseType, getCaseDetailType } from '@/api/callCase/callCase'
import { mapConfig, serverConfig } from '@/components/Map/ArcGISConfig'
import { getUserOnLine } from '@/api/user'
const option = {
url: mapConfig.apiUrl
}
// const eventPointLayerId = 'eventPointLayer' // 事件定位点的图层id
const partsResultLayerId = 'partsResultLayer' // 部件查询结果点集的图层id
const personResultLayerId = 'personResultLayer' // 人员查询结果点集的图层id
const graphicLayerIds = [
'partsResultLayer', 'personResultLayer',
'toVerifyCaseNot', 'toVerifyCaseOt',
'toCheckCaseNot', 'toCheckCaseOt',
'toHandleCaseNot', 'toHandleCaseOt',
'toDistributeCaseNot', 'toDistributeCaseOt'
]
const caseIcon = [
'/static/images/case/status_dealing.png', '/static/images/case/status_done.png'
]
export default {
name: 'SupControl',
components: { SupStatisPanel },
props: {
longitude: {
type: Number,
default: 116.5937
},
latitude: {
type: Number,
default: 28.249
}
},
data() {
return {
map: '',
view: '',
layers: {
dxbjPoint: '', // 部件点图层
dxbjLine: '', // 部件线图层
dxbjXqd: '', // 兴趣点图层
dxbjMph: '', // 门牌好图层
dx2wGrid: '', // 单元网格图层
personPoint: ''
},
esriObj: {
Map: '',
BaseMap: '',
Graphic: '',
PopupTemplate: '',
Circle: '',
Point: '',
FeatureLayer: '',
GraphicsLayer: '',
TileLayer: '',
SimpleMarkerSymbol: '',
PictureMarkerSymbol: '',
Query: '',
QueryTask: '',
IdentifyTask: '',
IdentifyParameters: '',
MapView: ''
},
parts: {
eorc: '2', // 类别
casetypeCode: '', // 部件大类编码,
casetypeDetailCode: '', // 部件小类编码
caseStatusCode: ''
},
personQuery: {
roleTips: ''
},
casepersonCode: 'supervisor',
labelPosition: 'right',
caseTypeOpts: [], // 部件大类下拉框
casePersonOpts: [{
value: 'supervisor',
label: '监督人员'
}, {
value: 'process',
label: '处置人员'
}], // 人员分类下拉框
caseDetailTypeOpts: [], // 部件小类下拉框
caseTypeCodeAuto: '', // 自动生成的案卷大类代码
caseTypeDetailCodeAuto: '', // 自动生成的案卷小类代码
mapLoading: false,
queryEventSwitch: '0', // 0==查询案件；1==查询人员；2==查询部件
showPartsSelect: false,
showPersonSelect: false,
showCaseSelect: true,
isOverTime: '', // 是否区分超时工单
toVerifyListOt: [], // 待核实超时
toVerifyListNot: [], // 待核实未超时
toCheckListOt: [], // 待核查超时
toCheckListNot: [], // 待核查
toHandleListOt: [], // 处置中超时
toHandleListNot: [], // 处置中
toDistributeListOt: [], // 新立案超时
toDistributeListNot: [] // 新立案
}
},
computed: {
eorc() {
return this.parts.eorc
},
caseType() {
return this.parts.casetypeCode
},
caseTypeDetail() {
return this.parts.casetypeDetailCode
}
},
watch: {
caseType(typeVal) {
this.cascaderCaseDetailType(typeVal)
},
caseTypeDetail(typeVal) {
this.clearPoint()
var obj = this.caseDetailTypeOpts.find(function(item) {
return item.typeDetailCode === typeVal
})
if (obj) {
this.addPartsPoints(obj.typeDetailName)
}
}
},
mounted() {
this.importEsri()
},
methods: {
switchContent: function() {
this.clearPoint() // 清除绘制的点
// 案卷（0）、人员（1）、部件（2），
if (this.queryEventSwitch === '2') {
this.showPartsSelect = true
this.showPersonSelect = false
this.showCaseSelect = false
this.cascaderCaseType('2')
} else if (this.queryEventSwitch === '1') {
this.showPersonSelect = true
this.showPartsSelect = false
this.showCaseSelect = false
this.casePerson()
} else if (this.queryEventSwitch === '0') {
this.showCaseSelect = true
this.showPartsSelect = false
this.showPersonSelect = false
// 查询四个状态的案卷列表
this.queryCaseList()
}
},
// 切换不同案卷状态的显示与否
changeCaseScope: function() {
// isOverTime: ''--全部，'Ot'--超时，'Not'--未超时
// caseStatusCode: 'toHandle'--待处置，'toDistribute'--待派发，'toVerify'--待核实，'toCheck'--待核查
const filterStr = this.parts.caseStatusCode + 'Case' + this.isOverTime
graphicLayerIds.forEach(item => {
if (item.indexOf(filterStr) < 0) {
// 非案卷类图层全部隐藏
this.showGraphicLayer(item, false)
} else {
this.showGraphicLayer(item, true)
}
})
},
// 查询案卷列表
queryCaseList: function() {
const that = this
const onePageParam = {
limit: 1000,
offset: 1
}
// 查询待核实案卷
request({
url: 'case/toVerifyListPage',
method: 'get',
params: onePageParam
}).then(response => {
if (response.code === 200) {
if (response.data.total > 0) {
// 查询有新结果时清除原有的列表
this.toVerifyListNot = []
this.toVerifyListOt = []
response.data.rows.forEach(item => {
if (item.isOvertime === '1') { // 超时标志位为1，放入超时列表中
that.toVerifyListOt.push(item)
} else { // 未超时
that.toVerifyListNot.push(item)
}
})
this.addPictureMarkerOnMap(this.toVerifyListNot, caseIcon[0], graphicLayerIds[2])
this.addPictureMarkerOnMap(this.toVerifyListOt, caseIcon[1], graphicLayerIds[3])
}
}
})
// 查询待核查案卷
request({
url: 'case/toCheckListPage',
method: 'get',
params: onePageParam
}).then(response => {
if (response.code === 200) {
if (response.data.total > 0) {
// 查询有新结果时清除原有的列表
this.toCheckListNot = []
this.toCheckListOt = []
response.data.rows.forEach(item => {
if (item.isOvertime === '1') { // 超时标志位为1，放入超时列表中
that.toCheckListOt.push(item)
} else { // 未超时
that.toCheckListNot.push(item)
}
})
this.addPictureMarkerOnMap(this.toCheckListNot, caseIcon[0], graphicLayerIds[4])
this.addPictureMarkerOnMap(this.toCheckListOt, caseIcon[1], graphicLayerIds[5])
}
}
})
// 查询处理中案卷
request({
url: 'case/toHandleListPage',
method: 'get',
params: onePageParam
}).then(response => {
if (response.code === 200) {
if (response.data.total > 0) {
// 查询有新结果时清除原有的列表
this.toHandleListNot = []
this.toHandleListOt = []
response.data.rows.forEach(item => {
if (item.isOvertime === '1') { // 超时标志位为1，放入超时列表中
that.toHandleListOt.push(item)
} else { // 未超时
that.toHandleListNot.push(item)
}
})
this.addPictureMarkerOnMap(this.toHandleListNot, caseIcon[0], graphicLayerIds[6])
this.addPictureMarkerOnMap(this.toHandleListOt, caseIcon[1], graphicLayerIds[7])
}
}
})
// 查询新立案案卷
request({
url: 'case/toDistributeListPage',
method: 'get',
params: onePageParam
}).then(response => {
if (response.code === 200) {
if (response.data.total > 0) {
// 查询有新结果时清除原有的列表
this.toDistributeListNot = []
this.toDistributeListOt = []
response.data.rows.forEach(item => {
if (item.isOvertime === '1') { // 超时标志位为1，放入超时列表中
that.toDistributeListOt.push(item)
} else { // 未超时
that.toDistributeListNot.push(item)
}
})
this.addPictureMarkerOnMap(this.toDistributeListNot, caseIcon[0], graphicLayerIds[8])
this.addPictureMarkerOnMap(this.toDistributeListOt, caseIcon[1], graphicLayerIds[9])
}
}
})
},
// 查询人员
casePerson() {
this.clearPoint()
this.personQuery.roleTips = this.casepersonCode
if (this.casepersonCode !== '') {
this.addPersonPoints()
}
},
// 级联查询部件大类
cascaderCaseType: function(eorc) {
// 前两行的作用是清除部件大类的当前值和select中的所有选项
this.caseTypeOpts = []
this.parts.casetypeCode = ''
// 以下两行的作用是清除部件小类的当前值和select中的所有选项
this.caseDetailTypeOpts = []
this.parts.casetypeDetailCode = ''
// 部件大类
if (eorc !== null && eorc.length > 0) {
getCaseType(eorc).then(response => {
for (const opt of response.data) {
this.caseTypeOpts.push(opt)
if (opt.typeCode === this.caseTypeCodeAuto) {
this.parts.casetypeCode = opt.typeCode
}
}
})
}
},
cascaderCaseDetailType: function(typeCode) {
// 以下两行的作用是清除案卷小类的当前值和select中的所有选项
this.caseDetailTypeOpts = []
this.parts.casetypeDetailCode = ''
// 根据code获取ID，进行级联查询
let typeId = 0
this.caseTypeOpts.forEach(item => {
if (item.typeCode === typeCode) {
typeId = item.id
}
})
if (typeId > 0) {
getCaseDetailType(typeId).then(response => {
for (const opt of response.data) {
this.caseDetailTypeOpts.push(opt)
if (opt.typeDetailCode === this.caseTypeDetailCodeAuto) {
this.parts.casetypeDetailCode = opt.typeDetailCode
}
}
})
}
},
clearPoint: function() {
this.map.layers.forEach(layer => {
if (layer.type === 'graphics') {
layer.graphics.removeAll()
}
})
// 清除弹出框
this.view.popup.close()
},
addPictureMarkerOnMap: function(points, icon, layerId) {
const that = this
const gLayer = this.selectGraphicLayerById(layerId)
points.forEach(item => {
if (item.lng !== '' && item.lat !== '') {
const point = new that.esriObj.Point(item.lng, item.lat, item)
const marker = new that.esriObj.PictureMarkerSymbol(icon, 10, 15)
const graphic = new that.esriObj.Graphic({
geometry: point,
symbol: marker,
attributes: item
})
gLayer.items[0].add(graphic)
}
})
},
addPersonPoints: function() {
const that = this
getUserOnLine(this.personQuery).then(res => {
const gLayer = this.selectGraphicLayerById(personResultLayerId) // 添加自定义绘制点的图层
res.data.forEach((item, index) => {
const point = new that.esriObj.Point(116.60769581599995, 28.24919796600002 + index * 0.001) // 创建geometry对象
let marker
if (item.onLine) {
marker = new that.esriObj.PictureMarkerSymbol('/Images/online.png', 20, 20) // 创建marker标识
} else {
marker = new that.esriObj.PictureMarkerSymbol('/Images/offline.png', 20, 20) // 创建marker标识
}
const graphic = new that.esriObj.Graphic({
geometry: point,
symbol: marker,
attributes: item
})
gLayer.items[0].add(graphic) // 图层上添加对象
})
that.layers.personPoint = gLayer
})
},
addPartsPoints: function(typeCode) {
// 部件定位
const queryDev = this.layers.dxbjPoint.createQuery()
queryDev.returnGeometry = true
queryDev.outFields = ['PICTURE']
queryDev.where = "OBJNAME = '" + typeCode + "'"
const that = this
this.layers.dxbjPoint.queryFeatures(queryDev).then(function(response) {
if (response.features.length > 0) {
const results = response.features
const gLayer = that.selectGraphicLayerById(partsResultLayerId)
results.forEach((item, index) => {
const point = new that.esriObj.Point(item.geometry.x, item.geometry.y) // 创建geometry对象
const marker = new that.esriObj.PictureMarkerSymbol() // 创建marker标识
// marker属性
marker.width = '20px'
marker.height = '20px'
marker.url = '/Images/circle.png'
// 创建graphic对象
const graphic = new that.esriObj.Graphic({
geometry: point,
symbol: marker
})
gLayer.items[0].add(graphic) // 图层上添加对象
})
} else {
that.$message({
message: '查询无该类部件',
type: 'warning'
})
}
})
},
showGraphicLayer: function(layerId, show) {
const gLayer = this.selectGraphicLayerById(layerId)
if (gLayer !== null) {
gLayer.items[0].visible = show
}
},
showCaseDetail: function(caseId) {
console.log(caseId)
},
// 初始化ArcGIS API对象
importEsri: function() {
this.mapLoading = true
loadModules([
'esri/Map',
'esri/Basemap',
'esri/Graphic',
'esri/PopupTemplate',
'esri/geometry/Circle',
'esri/geometry/Point',
'esri/layers/FeatureLayer',
'esri/layers/GraphicsLayer',
'esri/layers/TileLayer',
'esri/symbols/SimpleMarkerSymbol',
'esri/symbols/PictureMarkerSymbol',
'esri/tasks/support/Query',
'esri/tasks/QueryTask',
'esri/tasks/IdentifyTask',
'esri/tasks/support/IdentifyParameters',
'esri/views/MapView',
'dojo/domReady!'
], option)
.then(([
Map,
BaseMap,
Graphic,
PopupTemplate,
Circle,
Point,
FeatureLayer,
GraphicsLayer,
TileLayer,
SimpleMarkerSymbol,
PictureMarkerSymbol,
Query,
QueryTask,
IdentifyTask,
IdentifyParameters,
MapView
]) => {
this.esriObj.Map = Map
this.esriObj.BaseMap = BaseMap
this.esriObj.Graphic = Graphic
this.esriObj.PopupTemplate = PopupTemplate
this.esriObj.Circle = Circle
this.esriObj.Point = Point
this.esriObj.FeatureLayer = FeatureLayer
this.esriObj.GraphicsLayer = GraphicsLayer
this.esriObj.TileLayer = TileLayer
this.esriObj.SimpleMarkerSymbol = SimpleMarkerSymbol
this.esriObj.PictureMarkerSymbol = PictureMarkerSymbol
this.esriObj.Query = Query
this.esriObj.QueryTask = QueryTask
this.esriObj.IdentifyTask = IdentifyTask
this.esriObj.IdentifyParameters = IdentifyParameters
this.esriObj.MapView = MapView
// 初始化地图
this.initMap()
this.mapLoading = false
}).catch(err => {
console.log(err)
this.mapLoading = false
})
},
// 初始化地图
initMap: function() {
const base = new this.esriObj.BaseMap({
baseLayers: [
new this.esriObj.TileLayer({ // 可配置属性，见TileLayer类
id: '2w',
url: serverConfig.mapUrlBase
})
],
title: 'dx2w',
id: 'dx2w'
})
this.map = new this.esriObj.Map({
basemap: base // 底图类型，详见BaseMap类
})
this.view = new this.esriObj.MapView({
container: this.$refs.mapDiv, // 视图的容器
map: this.map, // Map的实例放入视图中
center: [116.597, 28.24], // 初始显示的地图中心点，经纬度
zoom: 3 // 当前地图缩放等级
})
this.view.ui._removeComponents(['zoom'])
this.addBjLayers()
this.addGraphicLayers()
this.queryCaseList()
const that = this
this.view.on('click', function(event) {
const lon = event.mapPoint.longitude
const lat = event.mapPoint.latitude
if (that.queryEventSwitch === '2') {
// 部件定位
const queryDev = that.layers.dxbjPoint.createQuery()
// 定义查询的圆形范围，半径1米
const circle = new that.esriObj.Circle({
center: event.mapPoint,
radius: 1,
radiusUnit: 'meters'
})
queryDev.geometry = circle
queryDev.returnGeometry = true
queryDev.outFields = ['BGID', 'OBJID', 'OBJNAME', 'OBJPOS', 'DEPTNAME1', 'DEPTNAME2', 'DEPTNAME3']
that.layers.dxbjPoint.queryFeatures(queryDev)
.then(function(response) {
if (response.features.length > 0) {
const results = response.features
let content = ''
content = '部件编号：' + results[0].attributes.OBJID +
'<p>万米网格：' + results[0].attributes.BGID +
'<p>部件类型：' + results[0].attributes.OBJNAME +
'<p>权属部门：' + results[0].attributes.DEPTNAME1 +
'<p>责任部门：' + results[0].attributes.DEPTNAME2 +
'<p>养护部门：' + results[0].attributes.DEPTNAME3
// 2弹出气泡
that.view.popup.open({
title: results[0].attributes.OBJNAME,
content: content,
location: event.mapPoint
})
// 查询所在社区和单元网格
const queryPos = that.layers.dx2wGrid.createQuery()
queryPos.geometry = that.view.toMap(event)
queryPos.returnGeometry = true
queryPos.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
that.layers.dx2wGrid.queryFeatures(queryPos)
.then(function(response) {
const result = response.features[0].attributes
// 赋值
that.longitude = lon
that.latitude = lat
that.gridId = result.BGID
that.communityId = result.COMMUID
that.communityName = result.COMMUNAME
})
} else {
that.$message({
message: '没有查询到部件，请重新定位',
type: 'warning'
})
}
})
} else if (that.queryEventSwitch === '1') {
// 人员定位
that.view.hitTest(event).then(function(response) {
const feature = response.results[0].graphic
let content = ''
if (that.personQuery.roleTips === 'supervisor') {
content = '监督员编号：' + feature.attributes.userId +
'<p>监督员姓名：' + feature.attributes.name +
'<p>手机号码：' + feature.attributes.phone +
'<p>部门名称：' + feature.attributes.deptName +
'<p>轨迹时间点：' + feature.attributes.lastTimeFmt
} else if (that.personQuery.roleTips === 'process') {
content = '处置员编号：' + feature.attributes.userId +
'<p>处置员姓名：' + feature.attributes.name +
'<p>手机号码：' + feature.attributes.phone +
'<p>部门名称：' + feature.attributes.deptName +
'<p>轨迹时间点：' + feature.attributes.lastTimeFmt
}
// 2弹出气泡
that.view.popup.open({
title: feature.attributes.name,
content: content,
location: event.mapPoint
})
})
} else if (that.queryEventSwitch === '0') {
// 案卷定位
that.view.hitTest(event).then(function(response) {
const feature = response.results[0].graphic
const imgUrl = process.env.BASE_API + '/static/'
// 向后台再查询一次
const id = feature.attributes.id
request({
url: 'case/detail/' + id,
method: 'get'
}).then(response => {
if (response.code === 200) {
const caseDetail = response.data[0]
let detailTableHtml = '<table>'
detailTableHtml += '<tr><td colspan="2" width="370px">' + '案卷状态：' + caseDetail.caseStateName + '</td></tr>'
detailTableHtml += '<tr><td colspan="2">' + '案卷类别：' + caseDetail.eorcName + '/' + caseDetail.casetypeName + '/' + caseDetail.casetypeDetailName + '</td></tr>'
detailTableHtml += '<tr><td colspan="2">' + '上报时间：' + caseDetail.createTime + '</td></tr>'
detailTableHtml += '<tr><td colspan="2">' + '案卷地点：' + caseDetail.fieldintro + '</td></tr>'
detailTableHtml += '<tr><td colspan="2">' + '案卷情况：' + caseDetail.description + '</td></tr>'
if (caseDetail.fileIdVerify !== '') {
const verify = caseDetail.fileIdVerify.split(',')
detailTableHtml += '<tr><td colspan="2">上报图片</td></tr>'
detailTableHtml += '<tr><td width="180px"><img width="180px" height="200px" src="' + imgUrl + verify[0] + '"></td>'
if (verify[1] !== '') {
detailTableHtml += '<td><img width="180px" height="200px" src="' + imgUrl + verify[1] + '"></td></tr>'
} else {
detailTableHtml += '<td></td></tr>'
}
}
if (caseDetail.fileIdProcess !== '') {
const process = caseDetail.fileIdProcess.split(',')
detailTableHtml += '<tr><td colspan="2">处置图片</td></tr>'
detailTableHtml += '<tr><td width="180px"><img width="180px" height="200px" src="' + imgUrl + process[0] + '"></td>'
if (process[1] !== '') {
detailTableHtml += '<td><img width="180px" height="200px" src="' + imgUrl + process[1] + '"></td></tr>'
} else {
detailTableHtml += '<td></td></tr>'
}
}
detailTableHtml += '</table>'
// 2弹出气泡
that.view.popup.open({
title: caseDetail.caseid,
content: detailTableHtml,
location: event.mapPoint
})
}
})
})
}
})
},
// 加载部件服务的各图层
addBjLayers: function() {
// 此处可以优化
this.layers.dxbjPoint = new this.esriObj.FeatureLayer({ // 可配置属性，见TileLayer类
url: serverConfig.mapUrlBj + '/0',
id: 'dxbjPoint'
})
this.layers.dxbjLine = new this.esriObj.FeatureLayer({ // 可配置属性，见TileLayer类
url: serverConfig.mapUrlBj + '/1',
id: 'dxbjLine'
})
this.layers.dxbjXqd = new this.esriObj.FeatureLayer({ // 可配置属性，见TileLayer类
url: serverConfig.mapUrlBj + '/2',
id: 'dxbjXqd'
})
this.layers.dxbjMph = new this.esriObj.FeatureLayer({ // 可配置属性，见TileLayer类
url: serverConfig.mapUrlBj + '/3',
id: 'dxbjMph'
})
this.layers.dx2wGrid = new this.esriObj.FeatureLayer({
url: serverConfig.mapUrlBase + '/1',
id: 'gridLayer'
})
// 加载各图层
this.map.add(this.layers.dxbjPoint)
this.map.add(this.layers.dxbjLine)
this.map.add(this.layers.dxbjXqd)
this.map.add(this.layers.dxbjMph)
this.map.add(this.layers.dx2wGrid)
},
// 预先添加绘制的Graphic图层
addGraphicLayers: function() {
graphicLayerIds.forEach(item => {
const gLayer = new this.esriObj.GraphicsLayer()
gLayer.id = item
this.map.add(gLayer)
})
},
// 从graphic图层中找到指定的图层
selectGraphicLayerById: function(layerId) {
return this.map.layers.filter(layer => {
if (layer.id === layerId) {
return layer
}
})
}
}
}
</script>
<style scoped>
/*@import 'http://192.168.8.205/arcgis_js_api/library/4.12/esri/css/main.css';*/
@import 'https://js.arcgis.com/4.13/esri/css/main.css';
.staticPanel {
height: calc(100vh - 80px);
overflow-y: auto;
}
.mapPanel {
height: calc(100vh - 80px);
}
.baseMap {
height: calc(100vh - 120px);
width: 100%;
margin-top: 0;
border: 1px solid #DCDCDC;
border-radius: 4px;
}
.form {
background-color: rgba(240, 240, 240, 0.9);
position: absolute;
top: 42px;
width: 100%;
}
.rowSelect {
margin-bottom: 10px;
}
.customLabel {
padding: 0 12px 0 0;
color: #606266;
font-size: 14px;
}
.item {
margin-bottom: 10px;
}
.item .notLastSelect {
margin-right: 30px;
}
</style>
