案卷概要信息
' +
- '' + caseDetail.caseid + '
' +
- '' + caseDetail.caseStateName + '
' +
- '' + caseDetail.casetypeName + ' / ' + caseDetail.casetypeDetailName + '
' +
- '' + caseDetail.fieldintro + '
' +
- '' + caseDetail.description + '
' +
- '' + caseDetail.reportTime + '
'
+ let popupStr = '' +
+ '
'
+ popupStr += ''
+ popupStr += ''
if (verifyImgs.length > 1) {
const imgUrl2 = this.imageBaseUrl + verifyImgs[1]
popupStr += '
'
@@ -521,17 +577,40 @@
if (caseDetail.lng > 0 && caseDetail.lat > 0) {
// 添加marker
- Leaflet.marker([caseDetail.lat, caseDetail.lng], { icon: icon }).addTo(layerGroup).bindPopup(popup)
+ Leaflet.marker([caseDetail.lat, caseDetail.lng], { icon: icon }).addTo(caseLayerGroup).bindPopup(popup)
+ }
+
+ this.map.addLayer(caseLayerGroup)
+ })
+ },
+ addPersonPoints: function(personList, personLayerGroup, icon) {
+ personList.forEach(person => {
+ const popupStr = '
案卷概要信息
' +
+ '' +
+ '' + caseDetail.caseid + '
' +
+ '' + caseDetail.caseStateName + '
' +
+ '' + caseDetail.casetypeName + ' / ' + caseDetail.casetypeDetailName + '
' +
+ '' + caseDetail.fieldintro + '
' +
+ '' + caseDetail.description + '
' +
+ '' + caseDetail.reportTime + '
'
if (caseDetail.fileIdVerify !== '') {
const verifyImgs = caseDetail.fileIdVerify.split(',')
const imgUrl1 = this.imageBaseUrl + verifyImgs[0]
- popupStr += ''
- popupStr += ''
+ popupStr += ''
+ popupStr += ''
if (verifyImgs.length > 1) {
const imgUrl2 = this.imageBaseUrl + verifyImgs[1]
popupStr += ''
@@ -521,17 +577,40 @@
if (caseDetail.lng > 0 && caseDetail.lat > 0) {
// 添加marker
- Leaflet.marker([caseDetail.lat, caseDetail.lng], { icon: icon }).addTo(layerGroup).bindPopup(popup)
+ Leaflet.marker([caseDetail.lat, caseDetail.lng], { icon: icon }).addTo(caseLayerGroup).bindPopup(popup)
+ }
+
+ this.map.addLayer(caseLayerGroup)
+ })
+ },
+ addPersonPoints: function(personList, personLayerGroup, icon) {
+ personList.forEach(person => {
+ const popupStr = '' +
+ '
'
+
+ const popup = Leaflet.popup().setContent(popupStr)
+
+ if (person.positionLng > 0 && person.positionLat > 0) {
+ // 添加marker
+ Leaflet.marker([person.positionLat, person.positionLng], { icon: icon }).addTo(personLayerGroup).bindPopup(popup)
}
})
+
+ this.map.addLayer(personLayerGroup)
},
// 初始化地图
initMap: function() {
const map = Leaflet.map(this.$refs.mapDiv, {
minZoom: 4,
maxZoom: 25,
- center: [27.75962, 116.06021],
- zoom: 15,
+ center: this.baseConfig.center,
+ zoom: this.baseConfig.zoom,
zoomControl: false,
attributionControl: false,
crs: Leaflet.CRS.EPSG3857
@@ -539,20 +618,51 @@
this.map = map // data上需要挂载
window.map = map
- this.baselayer.push(Leaflet.tileLayer(
+ // 加载天地图底图和标注
+ this.baseLayer.push(Leaflet.tileLayer(
this.baseConfig.mapUrl,
{ subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
).addTo(map))
- this.baselayer.push(Leaflet.tileLayer(
+ this.baseLayer.push(Leaflet.tileLayer(
this.baseConfig.labelUrl,
{ subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
).addTo(map))
+ // 加载部件分层的图层
+ const bjfcLayer = esri.dynamicMapLayer({
+ url: `${this.baseUrl}${this.partsUrl}`,
+ minZoom: 20, // 最小缩放等级,
+ zIndex: 10 // 设置显示层级，在底图之上
+ }).addTo(map)
+
+ bjfcLayer.bindPopup(function(error, featureCollection) {
+ if (error || featureCollection.features.length === 0) {
+ return false
+ } else {
+ const bjItem = featureCollection.features[0] // 部件对象
+ const popupStr = '' + person.name + '
' +
+ '' +
+ '' + person.deptName + '
' +
+ '' + person.name + '
' +
+ '' + person.phone + '
' +
+ '' + person.lastTimeFmt + '
' +
+ '' +
+ '
'
+
+ return popupStr
+ }
+ })
+
+ // 加载自行发布的底图服务
esri.dynamicMapLayer({
- url: 'http://111.198.10.15:13002/arcgis/rest/services/crdt/MapServer'
+ url: `${this.baseUrl}${this.mapUrl}`,
+ zIndex: 1
}).addTo(map)
// 初始化图层组
+ /* eslint-disable new-cap */
this.toVerifyCaseNot = new Leaflet.layerGroup().addTo(map)
this.toVerifyCaseOt = new Leaflet.layerGroup().addTo(map)
this.toCheckCaseNot = new Leaflet.layerGroup().addTo(map)
@@ -560,6 +670,8 @@
this.toHandleCaseNot = new Leaflet.layerGroup().addTo(map)
this.toHandleCaseOt = new Leaflet.layerGroup().addTo(map)
+ this.offlinePerson = new Leaflet.layerGroup().addTo(map)
+ this.onlinePerson = new Leaflet.layerGroup().addTo(map)
}
}
}
@@ -641,5 +753,28 @@
top: 5px; /* 修改弹窗关闭按钮样式 */
right: 10px; /* 修改弹窗关闭按钮样式 */
}
+
+ .leaflet-popup-content .popup-div {
+ font-size: 15px;
+ padding: 6px;
+ }
+
+ .leaflet-popup-content .popup-title {
+ font-weight: bold;
+ }
+
+ .leaflet-popup-content .dashed-line {
+ border-bottom: 1px dashed #dddddd;
+ margin: 10px -10px;
+ }
+
+ .leaflet-popup-content .popup-item {
+ padding-bottom: 6px;
+ }
+
+ .leaflet-popup-content .popup-item label {
+ font-weight: bold;
+ padding-right: 15px;
+ }
' + bjItem.properties.objname + '
' +
+ '' +
+ '' + bjItem.properties.dl + ' / ' + bjItem.properties.xl + '
' +
+ '' + bjItem.properties.objid + '
' +
+ '' + bjItem.properties.bgid + '
' +
+ '' + bjItem.properties.deptname2 + '
' +
+ '' + bjItem.properties.deptname1 + '
' +
+ '' + bjItem.properties.deptname3 + '
' +
+ '