From 010c292f09ec1142c144ec0893989aa6a68fdee2 Mon Sep 17 00:00:00 2001 From: chenchenzai Date: Fri, 25 Nov 2022 17:14:52 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=BC=B9=E7=AA=97=E5=9C=B0=E5=9B=BE?= =?UTF-8?q?=E6=89=93=E5=BC=80=E5=87=BD=E6=95=B0=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/supermap/advance-init.js | 26 +- src/supermap/createMarkerPopup.js | 1017 ++++++------- src/supermap/map-showResource.js | 1288 ++++++++--------- .../area/components/ImportantAreaPopNew.vue | 4 +- .../areaMonitor/components/EarlyWarning.vue | 2 +- .../areaMonitor/components/SiteListMore.vue | 4 +- src/views/pages/areaMonitor/index.vue | 1 + .../components/EventListDetailsPopNew.vue | 6 +- 8 files changed, 1199 insertions(+), 1149 deletions(-) diff --git a/src/supermap/advance-init.js b/src/supermap/advance-init.js index 8cfb295..a96f49c 100644 --- a/src/supermap/advance-init.js +++ b/src/supermap/advance-init.js @@ -23,6 +23,7 @@ import { createCameraDetailsPop, createRoadGovernancePop, createEventListDetailsPop, + createEventListDetailsPopNew } from './createMarkerPopup' // 引入资源上图方法 import { @@ -123,7 +124,6 @@ export function MapFun(mapObj) { * @private */ const _openPopupVideoSurveillance = function(feature) { - // debugger if (feature.type == 'cameraTree') { const elementHtml = createCameraDetailsPop(feature) const arr = [0, 0.0, '', '0', '0.0'] @@ -134,6 +134,27 @@ export function MapFun(mapObj) { } } else if (feature.type == 'eventList') { const elementHtml = createEventListDetailsPop(feature) + L.popup({ className: 'List-Details-pop', offset: [168, 200] }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map) + } else { + const elementHtml = createSearchAddressTitlePop(feature) + L.popup({ className: 'Address-Title-pop', closeButton: false }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map) + } + } + /** + * 添加事件弹窗 + * @param {*} feature + */ + const _openPopupEventDetailNew = function(feature) { + if (feature.type == 'cameraTree') { + const elementHtml = createCameraDetailsPop(feature) + const arr = [0, 0.0, '', '0', '0.0'] + if (arr.indexOf(feature.data.gpsX) == -1) { + L.popup({ className: 'List-Details-pop', offset: [168, 200] }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map) + } else { + L.popup({ className: 'List-Details-pop', offset: [168, 200], autoPan: false }).setLatLng(map.getCenter()).setContent(elementHtml).openOn(map) + } + } else if (feature.type == 'eventList') { + const elementHtml = createEventListDetailsPopNew(feature) L.popup({ className: 'Event-List-Details-pop', offset: [168, 200] }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map) } else { const elementHtml = createSearchAddressTitlePop(feature) @@ -1710,7 +1731,7 @@ export function MapFun(mapObj) { features.map(feature => { var bounds = map.getBounds() // console.log("看看有没有坐标",feature.latLng); - debugger + //debugger if (layerName == '全部' ? feature.hasOwnProperty('latLng') && bounds.contains(L.latLng(feature.latLng.lat, feature.latLng.lng)) : feature.hasOwnProperty('latLng')) { const marker = L.marker(feature.latLng, { icon }) if (createPopupFun !== null) { @@ -2062,6 +2083,7 @@ export function MapFun(mapObj) { pathAnalysis: _pathAnalysis, openPopup: _openPopup, openPopupVideoSurveillance: _openPopupVideoSurveillance, + openPopupEventDetailNew: _openPopupEventDetailNew, openPopupRoadGovernance: _openPopupRoadGovernance, closeAllPopup: _closeAllPopup, addMovingMarker: _addMovingMarker, diff --git a/src/supermap/createMarkerPopup.js b/src/supermap/createMarkerPopup.js index 8cce470..626eda9 100644 --- a/src/supermap/createMarkerPopup.js +++ b/src/supermap/createMarkerPopup.js @@ -31,10 +31,12 @@ import SearchAddressTitlePop from '@/views/pages/videoSurveillance/components/Se import { selectByChannelCode } from '@/api/videoSurveillance/index.js' import RoadGovernancePop from '@/views/pages/roadGovernance/components/RoadGovernancePop' import EventListDetailsPop from '@/views/pages/civilizedCity/components/EventListDetailsPop' +import EventListDetailsPopNew from '@/views/pages/civilizedCity/components/EventListDetailsPopNew' import SiteListPop from '@/views/pages/construction/components/SiteListPop' -import WaterPointPop from '@/views/pages/waterPoints/components/WaterPointPop' -import SiteRoadPop from '@/views/pages/construction/components/SiteRoadPop' -import ImportantAreaPop from '@/views/pages/area/components/ImportantAreaPop' +import WaterPointPop from '@/views/pages/waterPoints/components/WaterPointPop' +import SiteRoadPop from '@/views/pages/construction/components/SiteRoadPop' +import ImportantAreaPop from '@/views/pages/area/components/ImportantAreaPop' +import ImportantAreaPopNew from '@/views/pages/area/components/ImportantAreaPopNew' import bus from "@/views/layout/bus"; @@ -46,20 +48,19 @@ import bus from "@/views/layout/bus"; * @return {*} */ function createBigPop(feature) { - const popupDom = new Dom({ - template: '', - data() { - return { - feature: feature - } - }, - created() { - }, - components: { - DetailsBig - } - }) - return popupDom.initDom() + const popupDom = new Dom({ + template: '', + data() { + return { + feature: feature + } + }, + created() {}, + components: { + DetailsBig + } + }) + return popupDom.initDom() } /** * 生成专题通用弹窗Dom @@ -68,20 +69,19 @@ function createBigPop(feature) { * @return {*} */ function createSmallPop(feature) { - const popupDom = new Dom({ - template: '', - data() { - return { - feature: feature - } - }, - created() { - }, - components: { - DetailsSmall - } - }) - return popupDom.initDom() + const popupDom = new Dom({ + template: '', + data() { + return { + feature: feature + } + }, + created() {}, + components: { + DetailsSmall + } + }) + return popupDom.initDom() } /** * 生成专题通用弹窗Dom @@ -90,27 +90,27 @@ function createSmallPop(feature) { * @return {*} */ function createTopicGeneralPopup(responseData, resourceType) { - const popupDom = new Dom({ - template: '', - data() { - return { - entityData: {}, - layerConfigInfo: {}, - allMapObject: {}, - resourceType: '' - } - }, - created() { - this.entityData = responseData.entityData - this.layerConfigInfo = responseData.layerConfigInfo - this.allMapObject = responseData.allMapObject - this.resourceType = resourceType - }, - components: { - topicGeneralPopup - } - }) - return popupDom.initDom() + const popupDom = new Dom({ + template: '', + data() { + return { + entityData: {}, + layerConfigInfo: {}, + allMapObject: {}, + resourceType: '' + } + }, + created() { + this.entityData = responseData.entityData + this.layerConfigInfo = responseData.layerConfigInfo + this.allMapObject = responseData.allMapObject + this.resourceType = resourceType + }, + components: { + topicGeneralPopup + } + }) + return popupDom.initDom() } /** * 生成专题通用弹窗Dom @@ -119,132 +119,145 @@ function createTopicGeneralPopup(responseData, resourceType) { * @return {*} */ function createDetailPop(feature) { - const popupDom = new Dom({ - template: '', - data() { - return { - feature: feature - } - }, - created() { - }, - components: { - DetailsPop - } - }) - return popupDom.initDom() + const popupDom = new Dom({ + template: '', + data() { + return { + feature: feature + } + }, + created() {}, + components: { + DetailsPop + } + }) + return popupDom.initDom() } //道路污染治理专题弹窗 function createRoadGovernancePop(feature, allMapObject) { - const popupDom = new Dom({ - template: '', - data() { - return { - feature: feature, - allMapObject: allMapObject, - } - }, - created() { - // this.allMapObject = allMapObject - // console.log('allMapObject', this.allMapObject) - // console.log('allMapObject', allMapObject) - // debugger - }, - components: { - RoadGovernancePop - } - }) - return popupDom.initDom() + const popupDom = new Dom({ + template: '', + data() { + return { + feature: feature, + allMapObject: allMapObject, + } + }, + created() { + // this.allMapObject = allMapObject + // console.log('allMapObject', this.allMapObject) + // console.log('allMapObject', allMapObject) + // debugger + }, + components: { + RoadGovernancePop + } + }) + return popupDom.initDom() } // 隔离酒店弹窗 function createIsolationHotelPop(feature) { - const popupDom = new Dom({ - template: '', - data() { - return { - feature: feature - } - }, - created() { - }, - components: { - IsolationHotelPop - } - }) - return popupDom.initDom() + const popupDom = new Dom({ + template: '', + data() { + return { + feature: feature + } + }, + created() {}, + components: { + IsolationHotelPop + } + }) + return popupDom.initDom() } // 核酸采样点弹窗 function createSamplePointPop(feature) { - const popupDom = new Dom({ - template: '', - data() { - return { - feature: feature - } - }, - created() { - }, - components: { - SamplePointPop - } - }) - return popupDom.initDom() + const popupDom = new Dom({ + template: '', + data() { + return { + feature: feature + } + }, + created() {}, + components: { + SamplePointPop + } + }) + return popupDom.initDom() } // 生成核酸检测点弹窗 function creatNucleicAcidMonitoringSites(feature) { - const popupDom = new Dom({ - template: '', - data() { - return { - feature: feature - } - }, - created() { - }, - components: { - NucleicAcidMonitoringSites - } - }) - return popupDom.initDom() + const popupDom = new Dom({ + template: '', + data() { + return { + feature: feature + } + }, + created() {}, + components: { + NucleicAcidMonitoringSites + } + }) + return popupDom.initDom() } //在建工地走航监测弹窗 function createSiteRoadPop(feature) { - bus.$emit('roadCauseAnalysis',feature.data) + bus.$emit('roadCauseAnalysis', feature.data) - const popupDom = new Dom({ - template: '', - data() { - return { - feature: feature, - } - }, - created() { - }, - components: { - SiteRoadPop - } - }) - return popupDom.initDom() + const popupDom = new Dom({ + template: '', + data() { + return { + feature: feature, + } + }, + created() {}, + components: { + SiteRoadPop + } + }) + return popupDom.initDom() } // 重点区域弹窗 function createImportantAreaPop(feature) { - bus.$emit('areaCauseAnalysis',feature.data) + bus.$emit('areaCauseAnalysis', feature.data) - const popupDom = new Dom({ - template: '', - data() { - return { - feature: feature, - } - }, - created() { - }, - components: { - ImportantAreaPop - } - }) - return popupDom.initDom() + const popupDom = new Dom({ + template: '', + data() { + return { + feature: feature, + } + }, + created() {}, + components: { + ImportantAreaPop + } + }) + return popupDom.initDom() +} + +// 重点区域弹窗 +function createImportantAreaPopNew(feature) { + bus.$emit('areaCauseAnalysis', feature.data) + + const popupDom = new Dom({ + template: '', + data() { + return { + feature: feature, + } + }, + created() {}, + components: { + ImportantAreaPopNew + } + }) + return popupDom.initDom() } /** * 生成专题企业信息通用弹窗Dom @@ -254,27 +267,27 @@ function createImportantAreaPop(feature) { * @return {*} */ function createTopicEnterprisePopup(responseData, resourceType) { - const popupDom = new Dom({ - template: '', - data() { - return { - entityData: {}, - layerConfigInfo: {}, - allMapObject: {}, - resourceType: '' - } - }, - created() { - this.entityData = responseData.entityData - this.layerConfigInfo = responseData.layerConfigInfo - this.allMapObject = responseData.allMapObject - this.resourceType = resourceType - }, - components: { - topicEnterprisePopup - } - }) - return popupDom.initDom() + const popupDom = new Dom({ + template: '', + data() { + return { + entityData: {}, + layerConfigInfo: {}, + allMapObject: {}, + resourceType: '' + } + }, + created() { + this.entityData = responseData.entityData + this.layerConfigInfo = responseData.layerConfigInfo + this.allMapObject = responseData.allMapObject + this.resourceType = resourceType + }, + components: { + topicEnterprisePopup + } + }) + return popupDom.initDom() } /** * 生成地质灾害风险区弹窗Dom @@ -283,27 +296,27 @@ function createTopicEnterprisePopup(responseData, resourceType) { * @return {*} */ function createKeyRiskAreaPopup(responseData, resourceType) { - const popupDom = new Dom({ - template: '', - data() { - return { - entityData: {}, - layerConfigInfo: {}, - allMapObject: {}, - resourceType: '' - } - }, - created() { - this.entityData = responseData.entityData - this.layerConfigInfo = responseData.layerConfigInfo - this.allMapObject = responseData.allMapObject - this.resourceType = resourceType - }, - components: { - riskAreaPopup - } - }) - return popupDom.initDom() + const popupDom = new Dom({ + template: '', + data() { + return { + entityData: {}, + layerConfigInfo: {}, + allMapObject: {}, + resourceType: '' + } + }, + created() { + this.entityData = responseData.entityData + this.layerConfigInfo = responseData.layerConfigInfo + this.allMapObject = responseData.allMapObject + this.resourceType = resourceType + }, + components: { + riskAreaPopup + } + }) + return popupDom.initDom() } /** @@ -311,27 +324,27 @@ function createKeyRiskAreaPopup(responseData, resourceType) { * @param responseData 请求数据 * @returns {*} * @private -*/ + */ function createStorageAndGoodsPopup(responseData) { - const popupDom = new Dom({ - template: '', - data() { - return { - entityData: {}, - layerConfigInfo: {}, - allMapObject: {} - } - }, - created() { - this.entityData = responseData.entityData - this.layerConfigInfo = responseData.layerConfigInfo - this.allMapObject = responseData.allMapObject - }, - components: { - StorageAndGoodsPopup - } - }) - return popupDom.initDom() + const popupDom = new Dom({ + template: '', + data() { + return { + entityData: {}, + layerConfigInfo: {}, + allMapObject: {} + } + }, + created() { + this.entityData = responseData.entityData + this.layerConfigInfo = responseData.layerConfigInfo + this.allMapObject = responseData.allMapObject + }, + components: { + StorageAndGoodsPopup + } + }) + return popupDom.initDom() } /** @@ -341,27 +354,27 @@ function createStorageAndGoodsPopup(responseData) { * @private */ function createGeneralPopup(responseData) { - console.log('entityDataentityDataentityData', responseData) - const popupDom = new Dom({ - template: '', - data() { - return { - // mapData: { id: 1, name: 'zhgnsan', age: 243, size: 'aaaa' } - entityData: {}, - layerConfigInfo: {}, - allMapObject: {} - } - }, - created() { - this.entityData = responseData.entityData - this.layerConfigInfo = responseData.layerConfigInfo - this.allMapObject = responseData.allMapObject - }, - components: { - GeneralPopup - } - }) - return popupDom.initDom() + console.log('entityDataentityDataentityData', responseData) + const popupDom = new Dom({ + template: '', + data() { + return { + // mapData: { id: 1, name: 'zhgnsan', age: 243, size: 'aaaa' } + entityData: {}, + layerConfigInfo: {}, + allMapObject: {} + } + }, + created() { + this.entityData = responseData.entityData + this.layerConfigInfo = responseData.layerConfigInfo + this.allMapObject = responseData.allMapObject + }, + components: { + GeneralPopup + } + }) + return popupDom.initDom() } /** @@ -371,27 +384,27 @@ function createGeneralPopup(responseData) { * @private */ function createDispatchResourcePopup(responseData) { - const popupDom = new Dom({ - template: '', - data() { - return { - storageInfo: {}, - goodsInfo: [], - layerConfigInfo: {}, - allMapObject: {} - } - }, - created() { - this.storageInfo = responseData.storageInfo - this.layerConfigInfo = responseData.layerConfigInfo - this.goodsInfo = responseData.goodsInfo - this.allMapObject = responseData.allMapObject - }, - components: { - DispatchResourcePopup - } - }) - return popupDom.initDom() + const popupDom = new Dom({ + template: '', + data() { + return { + storageInfo: {}, + goodsInfo: [], + layerConfigInfo: {}, + allMapObject: {} + } + }, + created() { + this.storageInfo = responseData.storageInfo + this.layerConfigInfo = responseData.layerConfigInfo + this.goodsInfo = responseData.goodsInfo + this.allMapObject = responseData.allMapObject + }, + components: { + DispatchResourcePopup + } + }) + return popupDom.initDom() } /** @@ -401,25 +414,25 @@ function createDispatchResourcePopup(responseData) { * @private */ function createSmallReservoirPopup(responseData) { - const popupDom = new Dom({ - template: '', - data() { - return { - reservoirInfo: {}, - layerConfigInfo: {}, - allMapObject: {} - } - }, - created() { - this.reservoirInfo = responseData.reservoirInfo - this.layerConfigInfo = responseData.layerConfigInfo - this.allMapObject = responseData.allMapObject - }, - components: { - SmallReservoirPopup - } - }) - return popupDom.initDom() + const popupDom = new Dom({ + template: '', + data() { + return { + reservoirInfo: {}, + layerConfigInfo: {}, + allMapObject: {} + } + }, + created() { + this.reservoirInfo = responseData.reservoirInfo + this.layerConfigInfo = responseData.layerConfigInfo + this.allMapObject = responseData.allMapObject + }, + components: { + SmallReservoirPopup + } + }) + return popupDom.initDom() } /** * 生成事件弹窗Dom 潍坊 @@ -428,27 +441,27 @@ function createSmallReservoirPopup(responseData) { * @private */ function createGudEvnPopupInfoWf(responseData) { - const popupDom = new Dom({ - template: '', - data() { - return { - // mapData: { id: 1, name: 'zhgnsan', age: 243, size: 'aaaa' } - entityData: {}, - layerConfigInfo: {}, - allMapObject: {} - } - }, - created() { - this.entityData = responseData.entityData - this.layerConfigInfo = responseData.layerConfigInfo - this.allMapObject = responseData.allMapObject - }, - components: { - GudEvnPopupWf, - GudEvnPopup - } - }) - return popupDom.initDom() + const popupDom = new Dom({ + template: '', + data() { + return { + // mapData: { id: 1, name: 'zhgnsan', age: 243, size: 'aaaa' } + entityData: {}, + layerConfigInfo: {}, + allMapObject: {} + } + }, + created() { + this.entityData = responseData.entityData + this.layerConfigInfo = responseData.layerConfigInfo + this.allMapObject = responseData.allMapObject + }, + components: { + GudEvnPopupWf, + GudEvnPopup + } + }) + return popupDom.initDom() } /** * 生成事件弹窗Dom @@ -457,26 +470,26 @@ function createGudEvnPopupInfoWf(responseData) { * @private */ function createGudEvnPopup(responseData) { - const popupDom = new Dom({ - template: '', - data() { - return { - // mapData: { id: 1, name: 'zhgnsan', age: 243, size: 'aaaa' } - entityData: {}, - layerConfigInfo: {}, - allMapObject: {} - } - }, - created() { - this.entityData = responseData.entityData - this.layerConfigInfo = responseData.layerConfigInfo - this.allMapObject = responseData.allMapObject - }, - components: { - GudEvnPopup - } - }) - return popupDom.initDom() + const popupDom = new Dom({ + template: '', + data() { + return { + // mapData: { id: 1, name: 'zhgnsan', age: 243, size: 'aaaa' } + entityData: {}, + layerConfigInfo: {}, + allMapObject: {} + } + }, + created() { + this.entityData = responseData.entityData + this.layerConfigInfo = responseData.layerConfigInfo + this.allMapObject = responseData.allMapObject + }, + components: { + GudEvnPopup + } + }) + return popupDom.initDom() } /** @@ -486,21 +499,21 @@ function createGudEvnPopup(responseData) { * @private */ function createDistanceAndAreaPopup(data) { - const popupDom = new Dom({ - template: '', - data() { - return { - message: '' - } - }, - created() { - this.message = data - }, - components: { - DistanceAndAreaPopup - } - }) - return popupDom.initDom() + const popupDom = new Dom({ + template: '', + data() { + return { + message: '' + } + }, + created() { + this.message = data + }, + components: { + DistanceAndAreaPopup + } + }) + return popupDom.initDom() } /** * 生成距离与面积弹窗Dom @@ -509,20 +522,19 @@ function createDistanceAndAreaPopup(data) { * @private */ function createAddressPopup(feature) { - const popupDom = new Dom({ - template: '', - data() { - return { - feature: feature - } - }, - created() { - }, - components: { - AddressPop - } - }) - return popupDom.initDom() + const popupDom = new Dom({ + template: '', + data() { + return { + feature: feature + } + }, + created() {}, + components: { + AddressPop + } + }) + return popupDom.initDom() } /** * 生成距离与面积弹窗Dom @@ -531,20 +543,19 @@ function createAddressPopup(feature) { * @private */ function createPersonPopup(feature) { - const popupDom = new Dom({ - template: '', - data() { - return { - feature: feature - } - }, - created() { - }, - components: { - PersonPop - } - }) - return popupDom.initDom() + const popupDom = new Dom({ + template: '', + data() { + return { + feature: feature + } + }, + created() {}, + components: { + PersonPop + } + }) + return popupDom.initDom() } /** * 生成距离与面积弹窗Dom @@ -553,20 +564,19 @@ function createPersonPopup(feature) { * @private */ function createControlPopup(feature) { - const popupDom = new Dom({ - template: '', - data() { - return { - feature: feature - } - }, - created() { - }, - components: { - ControlPop - } - }) - return popupDom.initDom() + const popupDom = new Dom({ + template: '', + data() { + return { + feature: feature + } + }, + created() {}, + components: { + ControlPop + } + }) + return popupDom.initDom() } /** * 生成管控区弹窗 @@ -575,20 +585,19 @@ function createControlPopup(feature) { * @private */ function createManagerPopup(feature) { - const popupDom = new Dom({ - template: '', - data() { - return { - feature: feature - } - }, - created() { - }, - components: { - ManagerPop - } - }) - return popupDom.initDom() + const popupDom = new Dom({ + template: '', + data() { + return { + feature: feature + } + }, + created() {}, + components: { + ManagerPop + } + }) + return popupDom.initDom() } /** * 视频监控平台弹窗 @@ -597,124 +606,140 @@ function createManagerPopup(feature) { * @private */ function createCameraDetailsPop(feature) { - console.log(feature) - if (feature.dataType !== '安保区域') { - selectByChannelCode({ channelCode: feature.data.channelCode }).then((res) => { - feature.data = res.data.data[0] + console.log(feature) + if (feature.dataType !== '安保区域') { + selectByChannelCode({ channelCode: feature.data.channelCode }).then((res) => { + feature.data = res.data.data[0] + }) + } + // } + const popupDom = new Dom({ + template: '', + data() { + return { + feature: feature + } + }, + created() {}, + components: { + CameraDetailsPop + } }) - } - // } - const popupDom = new Dom({ - template: '', - data() { - return { - feature: feature - } - }, - created() { - }, - components: { - CameraDetailsPop - } - }) - return popupDom.initDom() + return popupDom.initDom() } + function createSearchAddressTitlePop(feature) { - const popupDom = new Dom({ - template: '', - data() { - return { - feature: feature - } - }, - created() { - }, - components: { - SearchAddressTitlePop - } - }) - return popupDom.initDom() + const popupDom = new Dom({ + template: '', + data() { + return { + feature: feature + } + }, + created() {}, + components: { + SearchAddressTitlePop + } + }) + return popupDom.initDom() } + function createEventListDetailsPop(feature) { - const popupDom = new Dom({ - template: '', - data() { - return { - feature: feature - } - }, - created() { - }, - components: { - EventListDetailsPop - } - }) - return popupDom.initDom() + const popupDom = new Dom({ + template: '', + data() { + return { + feature: feature + } + }, + created() {}, + components: { + EventListDetailsPop + } + }) + return popupDom.initDom() +} +//事件详情新弹窗new +function createEventListDetailsPopNew(feature) { + + const popupDom = new Dom({ + template: '', + data() { + return { + feature: feature + } + }, + created() {}, + components: { + EventListDetailsPopNew + } + }) + return popupDom.initDom() } // 创建工地列表的弹窗 function createSiteListPop(feature) { - const popupDom = new Dom({ - template: '', - data() { - return { - feature: feature - } - }, - created() { - }, - components: { - SiteListPop - } - }) - return popupDom.initDom() + const popupDom = new Dom({ + template: '', + data() { + return { + feature: feature + } + }, + created() {}, + components: { + SiteListPop + } + }) + return popupDom.initDom() } // 创建积水点的弹窗 function createWaterPointPop(feature) { - const popupDom = new Dom({ - template: '', - data() { - return { - feature: feature - } - }, - created() { - }, - components: { - WaterPointPop - } - }) - return popupDom.initDom() + const popupDom = new Dom({ + template: '', + data() { + return { + feature: feature + } + }, + created() {}, + components: { + WaterPointPop + } + }) + return popupDom.initDom() } export { - createTopicGeneralPopup, - createKeyRiskAreaPopup, - createStorageAndGoodsPopup, - createGeneralPopup, - createDispatchResourcePopup, - createGudEvnPopup, - createGudEvnPopupInfoWf, - createDistanceAndAreaPopup, - createTopicEnterprisePopup, - createDetailPop, - createIsolationHotelPop, - createSamplePointPop, - createBigPop, - createSmallPop, - createAddressPopup, - createPersonPopup, - createControlPopup, - creatNucleicAcidMonitoringSites, - createManagerPopup, - createCameraDetailsPop, - createSearchAddressTitlePop, - createRoadGovernancePop, - createEventListDetailsPop, - createSiteListPop, - createWaterPointPop, - createSiteRoadPop, - createImportantAreaPop -} + createTopicGeneralPopup, + createKeyRiskAreaPopup, + createStorageAndGoodsPopup, + createGeneralPopup, + createDispatchResourcePopup, + createGudEvnPopup, + createGudEvnPopupInfoWf, + createDistanceAndAreaPopup, + createTopicEnterprisePopup, + createDetailPop, + createIsolationHotelPop, + createSamplePointPop, + createBigPop, + createSmallPop, + createAddressPopup, + createPersonPopup, + createControlPopup, + creatNucleicAcidMonitoringSites, + createManagerPopup, + createCameraDetailsPop, + createSearchAddressTitlePop, + createRoadGovernancePop, + createEventListDetailsPop, + createEventListDetailsPopNew, + createSiteListPop, + createWaterPointPop, + createSiteRoadPop, + createImportantAreaPop, + createImportantAreaPopNew +} \ No newline at end of file diff --git a/src/supermap/map-showResource.js b/src/supermap/map-showResource.js index 16069ef..9f62256 100644 --- a/src/supermap/map-showResource.js +++ b/src/supermap/map-showResource.js @@ -15,23 +15,24 @@ const L = window.L || {} const shinningMarker = null const SuperMap = window.SuperMap || {} const restoreIconObj = { - layerId: 0, - restoreIcon: null, - currentLayer: null + layerId: 0, + restoreIcon: null, + currentLayer: null } const progress = document.getElementById('progress') const progressBar = document.getElementById('progress-bar') -function updateProgressBar(processed, total, elapsed, layersArray) { - if (elapsed > 1000) { - // if it takes more than a second to load, display the progress bar: - progress.style.display = 'block' - progressBar.style.width = Math.round(processed / total * 100) + '%' - } - if (processed === total) { - // all markers processed - hide the progress bar: - progress.style.display = 'none' - } +function updateProgressBar(processed, total, elapsed, layersArray) { + if (elapsed > 1000) { + // if it takes more than a second to load, display the progress bar: + progress.style.display = 'block' + progressBar.style.width = Math.round(processed / total * 100) + '%' + } + + if (processed === total) { + // all markers processed - hide the progress bar: + progress.style.display = 'none' + } } /** * 构造图标聚合图层 @@ -39,39 +40,39 @@ function updateProgressBar(processed, total, elapsed, layersArray) { * @returns {*} */ function createMarkerClusterLayer(layerClassName) { - let markerClusterLayer = null - if (layerClassName) { // 如果存在类名，表示需要自定义图标 - markerClusterLayer = L.markerClusterGroup({ - iconCreateFunction(cluster) { - const markers = cluster.getAllChildMarkers() - let n = 0 - for (let i = 0; i < markers.length; i++) { - n += markers[i].number - } - return L.divIcon({ html: markers.length, className: layerClassName }) - }, - // 是否允许指定 PolylineOptions 样式 spider - // spiderfyOnMaxZoom: true, - // 是否显示标记的边界 - showCoverageOnHover: true, - // 是否点击展开 - zoomToBoundsOnClick: true, - chunkProgress: updateProgressBar, - chunkedLoading: true, - maxClusterRadius: 80 - }) - } else { // 使用默认图标 - markerClusterLayer = L.markerClusterGroup({ - // 是否允许指定 PolylineOptions 样式 spider - spiderfyOnMaxZoom: true, - // 是否显示标记的边界 - showCoverageOnHover: false, - // 是否点击展开 - zoomToBoundsOnClick: true, - maxClusterRadius: 80 - }) - } - return markerClusterLayer + let markerClusterLayer = null + if (layerClassName) { // 如果存在类名，表示需要自定义图标 + markerClusterLayer = L.markerClusterGroup({ + iconCreateFunction(cluster) { + const markers = cluster.getAllChildMarkers() + let n = 0 + for (let i = 0; i < markers.length; i++) { + n += markers[i].number + } + return L.divIcon({ html: markers.length, className: layerClassName }) + }, + // 是否允许指定 PolylineOptions 样式 spider + // spiderfyOnMaxZoom: true, + // 是否显示标记的边界 + showCoverageOnHover: true, + // 是否点击展开 + zoomToBoundsOnClick: true, + chunkProgress: updateProgressBar, + chunkedLoading: true, + maxClusterRadius: 80 + }) + } else { // 使用默认图标 + markerClusterLayer = L.markerClusterGroup({ + // 是否允许指定 PolylineOptions 样式 spider + spiderfyOnMaxZoom: true, + // 是否显示标记的边界 + showCoverageOnHover: false, + // 是否点击展开 + zoomToBoundsOnClick: true, + maxClusterRadius: 80 + }) + } + return markerClusterLayer } /** @@ -81,13 +82,13 @@ function createMarkerClusterLayer(layerClassName) { * @param chunkCompleted 数据处理完以后执行的函数 */ function chunkData(data, doChunk, chunkCompleted) { - const chunk = data.splice(0, 1000) - doChunk(chunk) - if (data.length > 0) { - setTimeout(() => { chunkData(data, doChunk, chunkCompleted) }, 0) - } else { - chunkCompleted() - } + const chunk = data.splice(0, 1000) + doChunk(chunk) + if (data.length > 0) { + setTimeout(() => { chunkData(data, doChunk, chunkCompleted) }, 0) + } else { + chunkCompleted() + } } /** @@ -108,56 +109,56 @@ function chunkData(data, doChunk, chunkCompleted) { * @return {*|void} layer对象，可以直接用map的removeLayer删除 */ function addPointOnMap({ - feature, - iconSize = [48, 48], - iconUrl = 'poi.png', - isCustomIcon = '', - iconHtml = '', - iconClassName = '', - featurePopupInfo = null, - createPopupFun = null, - popupClassName = 'multi-general-popup-style', - isOpenPopup = '', - coordinateSystemFlag = false + feature, + iconSize = [48, 48], + iconUrl = 'poi.png', + isCustomIcon = '', + iconHtml = '', + iconClassName = '', + featurePopupInfo = null, + createPopupFun = null, + popupClassName = 'multi-general-popup-style', + isOpenPopup = '', + coordinateSystemFlag = false } = {}, mapObj, featureGroup, layerGroup) { - // 创造点位marker - let icon = null - // 区分是否是自定义div图标 - if (isCustomIcon) { - iconHtml = iconHtml || createDefaultDivIcon() - icon = createDefaultFeatureStyle({ img: iconUrl, iconSize: iconSize }, iconHtml, iconClassName) - } else { - icon = createDefaultFeatureStyle({ img: iconUrl, iconSize: iconSize }) - } - // 当前为百度09墨卡托，上图前进行坐标转换 - console.log('当前坐标', feature) - // if (!coordinateSystemFlag) { - // const bdLonLat = wgs84LL2bdLL(feature.lon, feature.lat); - // feature.lon = bdLonLat[0]; - // feature.lat = bdLonLat[1]; - // console.log('转换之后的坐标', feature); - // } - const marker = L.marker([feature.lat, feature.lon], { - icon: icon, - attribution: feature.attributes - }) - let elementHtml = null - // 如果featurePopInfo不为null，则说明需要弹窗，如果为null，则说明不需要弹窗，则不添加点击事件 - if (featurePopupInfo !== null) { - featurePopupInfo.allMapObject = { - mapObj: mapObj + // 创造点位marker + let icon = null + // 区分是否是自定义div图标 + if (isCustomIcon) { + iconHtml = iconHtml || createDefaultDivIcon() + icon = createDefaultFeatureStyle({ img: iconUrl, iconSize: iconSize }, iconHtml, iconClassName) + } else { + icon = createDefaultFeatureStyle({ img: iconUrl, iconSize: iconSize }) } - elementHtml = createPopupFun(featurePopupInfo) - marker.on('click', e => { - const location = [e.latlng.lat, e.latlng.lng] - const latLng = L.latLng(location) - L.popup({ className: popupClassName }).setLatLng(latLng).setContent(elementHtml).openOn(mapObj.map) + // 当前为百度09墨卡托，上图前进行坐标转换 + console.log('当前坐标', feature) + // if (!coordinateSystemFlag) { + // const bdLonLat = wgs84LL2bdLL(feature.lon, feature.lat); + // feature.lon = bdLonLat[0]; + // feature.lat = bdLonLat[1]; + // console.log('转换之后的坐标', feature); + // } + const marker = L.marker([feature.lat, feature.lon], { + icon: icon, + attribution: feature.attributes }) - } + let elementHtml = null + // 如果featurePopInfo不为null，则说明需要弹窗，如果为null，则说明不需要弹窗，则不添加点击事件 + if (featurePopupInfo !== null) { + featurePopupInfo.allMapObject = { + mapObj: mapObj + } + elementHtml = createPopupFun(featurePopupInfo) + marker.on('click', e => { + const location = [e.latlng.lat, e.latlng.lng] + const latLng = L.latLng(location) + L.popup({ className: popupClassName }).setLatLng(latLng).setContent(elementHtml).openOn(mapObj.map) + }) + } - return isOpenPopup - ? marker.addTo(mapObj.map).bindPopup(elementHtml, { className: popupClassName }).openPopup() - : marker.addTo(mapObj.map) + return isOpenPopup ? + marker.addTo(mapObj.map).bindPopup(elementHtml, { className: popupClassName }).openPopup() : + marker.addTo(mapObj.map) } /** @@ -169,54 +170,54 @@ function addPointOnMap({ * @private */ function createPromiseByQueryService(idArray = [], layerConfigInfo, type = '') { - const queryUrl = _mapConfig.config.QUERY_URL - // 构造查询条件authorityFilter - let authorityFilter = '' - if (idArray.length === 0) { // id数组为空，则默认去超图查询全部点位数据 - authorityFilter = 'SMID > 0' - } else if (idArray.length <= 1000) { - const authorityFilter1 = "'" + idArray.join("','") + "'" - authorityFilter = type ? `CAMERA_INDEX_CODE in (${authorityFilter1})` : `UUID in (${authorityFilter1})` - } else { // 当UUID的个数大于1000 - const count = Math.floor(idArray.length / 1000) // 向下取整 - // 这里分开处理，如果数据量很大时，可以节省时间 - if (type) { - for (let i = 0; i <= count; i++) { - const indexCodeSplice = idArray.slice(i * 1000, (i + 1) * 1000) - const authorityFilterString = "'" + indexCodeSplice.join("','") + "'" - const authorityFilterSplice = `CAMERA_INDEX_CODE in (${authorityFilterString})` - authorityFilter = i === 0 ? authorityFilterSplice : `${authorityFilter} or ${authorityFilterSplice}` - } - } else { - for (let i = 0; i <= count; i++) { - const indexCodeSplice = idArray.slice(i * 1000, (i + 1) * 1000) - const authorityFilterString = "'" + indexCodeSplice.join("','") + "'" - const authorityFilterSplice = `UUID in (${authorityFilterString})` - authorityFilter = i === 0 ? authorityFilterSplice : `${authorityFilter} or ${authorityFilterSplice}` - } + const queryUrl = _mapConfig.config.QUERY_URL + // 构造查询条件authorityFilter + let authorityFilter = '' + if (idArray.length === 0) { // id数组为空，则默认去超图查询全部点位数据 + authorityFilter = 'SMID > 0' + } else if (idArray.length <= 1000) { + const authorityFilter1 = "'" + idArray.join("','") + "'" + authorityFilter = type ? `CAMERA_INDEX_CODE in (${authorityFilter1})` : `UUID in (${authorityFilter1})` + } else { // 当UUID的个数大于1000 + const count = Math.floor(idArray.length / 1000) // 向下取整 + // 这里分开处理，如果数据量很大时，可以节省时间 + if (type) { + for (let i = 0; i <= count; i++) { + const indexCodeSplice = idArray.slice(i * 1000, (i + 1) * 1000) + const authorityFilterString = "'" + indexCodeSplice.join("','") + "'" + const authorityFilterSplice = `CAMERA_INDEX_CODE in (${authorityFilterString})` + authorityFilter = i === 0 ? authorityFilterSplice : `${authorityFilter} or ${authorityFilterSplice}` + } + } else { + for (let i = 0; i <= count; i++) { + const indexCodeSplice = idArray.slice(i * 1000, (i + 1) * 1000) + const authorityFilterString = "'" + indexCodeSplice.join("','") + "'" + const authorityFilterSplice = `UUID in (${authorityFilterString})` + authorityFilter = i === 0 ? authorityFilterSplice : `${authorityFilter} or ${authorityFilterSplice}` + } + } } - } - // 构造查询参数，用于去iServer查询 - console.log('查询条件', authorityFilter) - const getFeatureBySQLParams = new SuperMap.QueryBySQLParameters({ - queryParams: { - name: layerConfigInfo.layerName, - attributeFilter: authorityFilter - } - }) - // 将查询结果储存在promise中，返回这个promise - return new Promise((resolve, reject) => { - L.supermap.queryService(queryUrl).queryBySQL(getFeatureBySQLParams, serviceResult => { - // debugger; - try { - const features = serviceResult.result.recordsets[0].features.features - resolve(features) - } catch (e) { - reject(e) - } + // 构造查询参数，用于去iServer查询 + console.log('查询条件', authorityFilter) + const getFeatureBySQLParams = new SuperMap.QueryBySQLParameters({ + queryParams: { + name: layerConfigInfo.layerName, + attributeFilter: authorityFilter + } + }) + // 将查询结果储存在promise中，返回这个promise + return new Promise((resolve, reject) => { + L.supermap.queryService(queryUrl).queryBySQL(getFeatureBySQLParams, serviceResult => { + // debugger; + try { + const features = serviceResult.result.recordsets[0].features.features + resolve(features) + } catch (e) { + reject(e) + } + }) }) - }) } /** * @description: 新的资源上图 @@ -224,59 +225,59 @@ function createPromiseByQueryService(idArray = [], layerConfigInfo, type = '') { * @return {*} */ function addResourceOnMapNew(features, layerConfig, getLayerPopupInfo, createPopupFun, - mapObj, featureGroup, layerGroup) { - // 如果资源要素数量为0，则说明该种资源没有记录 - if (features.length < 1) { - return Promise.resolve(0) - } + mapObj, featureGroup, layerGroup) { + // 如果资源要素数量为0，则说明该种资源没有记录 + if (features.length < 1) { + return Promise.resolve(0) + } - // 创建图层 - let layers = null - // 判断是否是聚合图层 - layers = layerConfig.cluster.flag ? createMarkerClusterLayer(layerConfig.cluster.clusterName) : [] + // 创建图层 + let layers = null + // 判断是否是聚合图层 + layers = layerConfig.cluster.flag ? createMarkerClusterLayer(layerConfig.cluster.clusterName) : [] - // 该promise用于将资源要素聚合图层添加到地图上，添加完毕之后，把状态置为已决议 - return new Promise(resolve => { - const doChunk = chunk => { - // 循环构造要素点位，并给每个要素点位绑定点击事件，添加弹窗 - chunk.forEach((feature, index) => { - let icon = null - icon = createDefaultFeatureStyle(layerConfig) - restoreIconObj.restoreIcon = icon - if (feature.latLng.lng) { - const marker = L.marker(feature.latLng, { icon }) - // 如果getLayerPopupInfo和createPopupFun不为null，则说明需要弹窗，否则不需要弹窗 - // if (true) { - marker.uuid = feature.uuid - marker.layerConfigInfo = layerConfig - // 小型水库没有点击事件 - // if (feature.size !== 0) { - marker.on('click', async e => { - console.log('图标点击e', e) - const uuid = e.sourceTarget.uuid - const type = layerConfig.resType - const layerConfigInfo = e.sourceTarget.layerConfigInfo - const latLng = L.latLng([e.latlng.lat, e.latlng.lng]) - myGetLayerPopupInfo(uuid, layerConfigInfo, type, mapObj, latLng, createPopupFun, getLayerPopupInfo, layerConfigInfo.popupClassName) - }) - // } - // } - // 将该点位添加到聚合图层中 - layers.addLayer(marker) + // 该promise用于将资源要素聚合图层添加到地图上，添加完毕之后，把状态置为已决议 + return new Promise(resolve => { + const doChunk = chunk => { + // 循环构造要素点位，并给每个要素点位绑定点击事件，添加弹窗 + chunk.forEach((feature, index) => { + let icon = null + icon = createDefaultFeatureStyle(layerConfig) + restoreIconObj.restoreIcon = icon + if (feature.latLng.lng) { + const marker = L.marker(feature.latLng, { icon }) + // 如果getLayerPopupInfo和createPopupFun不为null，则说明需要弹窗，否则不需要弹窗 + // if (true) { + marker.uuid = feature.uuid + marker.layerConfigInfo = layerConfig + // 小型水库没有点击事件 + // if (feature.size !== 0) { + marker.on('click', async e => { + console.log('图标点击e', e) + const uuid = e.sourceTarget.uuid + const type = layerConfig.resType + const layerConfigInfo = e.sourceTarget.layerConfigInfo + const latLng = L.latLng([e.latlng.lat, e.latlng.lng]) + myGetLayerPopupInfo(uuid, layerConfigInfo, type, mapObj, latLng, createPopupFun, getLayerPopupInfo, layerConfigInfo.popupClassName) + }) + // } + // } + // 将该点位添加到聚合图层中 + layers.addLayer(marker) + } + }) } - }) - } - // 当要素点位数据处理完成后，将聚合图层添加到layerGroup中，并将promise的状态置为已决议 - const chunkCompleted = () => { - featureGroup.addLayer(layers) - layerGroup.set(layerConfig.superMapLayerName, layers) - resolve(1) - } + // 当要素点位数据处理完成后，将聚合图层添加到layerGroup中，并将promise的状态置为已决议 + const chunkCompleted = () => { + featureGroup.addLayer(layers) + layerGroup.set(layerConfig.superMapLayerName, layers) + resolve(1) + } - // 分块处理要素点位，当要素数量非常大时，不至于页面卡死 - chunkData(features, doChunk, chunkCompleted) - }) + // 分块处理要素点位，当要素数量非常大时，不至于页面卡死 + chunkData(features, doChunk, chunkCompleted) + }) } /** * 资源上图通用方法 @@ -299,321 +300,320 @@ function addResourceOnMapNew(features, layerConfig, getLayerPopupInfo, createPop * @private */ function addResourceOnMap({ - features, - layerName, - layerConfigInfo, - isClusterLayer = '', - getLayerPopupInfo = null, - layerClassName = '', - popupClassName = '', - createPopupFun = null, - createDivIconFun = null, - clickReplaceIcon = '', - replaceIconUrl = '/src/supermap/image/poi.png', - replaceIconSize = [44, 44] + features, + layerName, + layerConfigInfo, + isClusterLayer = '', + getLayerPopupInfo = null, + layerClassName = '', + popupClassName = '', + createPopupFun = null, + createDivIconFun = null, + clickReplaceIcon = '', + replaceIconUrl = '/src/supermap/image/poi.png', + replaceIconSize = [44, 44] } = {}, mapObj, featureGroup, layerGroup) { - // debugger; - console.log('上图数据', layerClassName) - // 如果资源要素数量为0，则说明该种资源没有记录 - if (features.length < 1) { - return Promise.resolve(0) - } - - // 创建图层 - let layers = null - // 判断是否是聚合图层 - layers = isClusterLayer ? createMarkerClusterLayer(layerClassName) : [] - - // 该promise用于将资源要素聚合图层添加到地图上，添加完毕之后，把状态置为已决议 - return new Promise(resolve => { - const doChunk = chunk => { - // 循环构造要素点位，并给每个要素点位绑定点击事件，添加弹窗 - chunk.forEach((feature, index) => { - let icon = null - if (createDivIconFun !== null) { - const { iconSize, contentHTML, className } = createDivIconFun(feature, index) - icon = L.divIcon({ iconSize: iconSize, html: contentHTML, className: className }) - } else { - icon = createDefaultFeatureStyle(layerConfigInfo) - } - if (feature.size) { - switch (feature.size) { - case 0: - icon = createDefaultFeatureStyle({ - img: 'reservoir_small.png' - }) - break - case 1: - icon = createDefaultFeatureStyle({ - img: 'reservoir_middle.png' - }) - break - case 2: - icon = createDefaultFeatureStyle({ - img: 'reservoir_big.png' - }) - break - } - } - restoreIconObj.restoreIcon = icon - // 当前地图为百度09墨卡托坐标系，在此处进行坐标转换 - // const bdLonLat = wgs84LL2bdLL(feature.latLng[1], feature.latLng[0]); - // feature.latLng[1] = bdLonLat[0]; - // feature.latLng[0] = bdLonLat[1]; - const marker = L.marker(feature.latLng, { icon }) - // 如果getLayerPopupInfo和createPopupFun不为null，则说明需要弹窗，否则不需要弹窗 - if (getLayerPopupInfo !== null && createPopupFun !== null) { - marker.resId = feature.resId - marker.layerConfigInfo = layerConfigInfo - marker.on('click', async e => { - console.log('图标点击e', e) - // 判断是否需要选中之后更换marker的图标 - if (clickReplaceIcon) { - // 先把之前选中的图标切换回来 - // const previousLayer = layerGroup.get(layerName).getLayer(restoreIconObj.layerId); - // if (previousLayer) { - // previousLayer.setIcon(icon); - // } - const layers = layerGroup.get(layerName).getLayers() - layers.forEach(layer => { - layer.setIcon(icon) - }) - restoreIconObj.layerId = e.sourceTarget._leaflet_id - const currentLayer = layerGroup.get(layerName).getLayer(restoreIconObj.layerId) - restoreIconObj.currentLayer = currentLayer - if (currentLayer) { - currentLayer.setIcon(L.icon({ iconUrl: replaceIconUrl, iconSize: replaceIconSize })) - } - } - // 使用uuid获取弹窗详情并构造弹窗 - const resId = e.sourceTarget.resId - let type = null - // 根据layerName1 传递不同的 resourceType - switch (e.sourceTarget.layerConfigInfo.layerName1) { - // 直升机起降点 - case 'f_helicopter': - type = 'resourceHelicopter' - break - // 物资储备库 - case 'f_repository': - type = 'resourceStorage' - break - // 应急队伍 - case 'YJPT_SM_ARMY': - type = 'resourceTeam' - break - case 'f_team': - type = 'resourceTeam' - break - // 危险源 - case 'YJPT_SM_HAZARD': - type = 'resourceDanger' - break - // 水源地 - case 'f_water_source': - type = 'resourceProtection' - break - // 检查站 - case 'f_check_station': - type = 'resourceProtection' - break - // 墓地 - case 'f_cemetery': - type = 'resourceProtection' - break - // 瞭望塔 - case 'f_watch_tower': - type = 'resourceProtection' - break - case 'YJPT_SM_SHELTER': - type = 'resourceShelter' - break - case 'YJPT_SM_STORAGE': - type = 'resourceStorage' - break - default: - break - } - const layerConfigInfo = e.sourceTarget.layerConfigInfo - const latLng = L.latLng([e.latlng.lat, e.latlng.lng]) - // debugger; - myGetLayerPopupInfo(resId, layerConfigInfo, type, mapObj, latLng, createPopupFun, getLayerPopupInfo, popupClassName) - }) - } - // 将该点位添加到聚合图层中 - layers.addLayer(marker) - }) + // debugger; + console.log('上图数据', layerClassName) + // 如果资源要素数量为0，则说明该种资源没有记录 + if (features.length < 1) { + return Promise.resolve(0) } - // 当要素点位数据处理完成后，将聚合图层添加到layerGroup中，并将promise的状态置为已决议 - const chunkCompleted = () => { - console.log(featureGroup) - featureGroup.addLayer(layers) - layerGroup.set(layerName, layers) - resolve(1) - } + // 创建图层 + let layers = null + // 判断是否是聚合图层 + layers = isClusterLayer ? createMarkerClusterLayer(layerClassName) : [] - // 分块处理要素点位，当要素数量非常大时，不至于页面卡死 - chunkData(features, doChunk, chunkCompleted) - }) + // 该promise用于将资源要素聚合图层添加到地图上，添加完毕之后，把状态置为已决议 + return new Promise(resolve => { + const doChunk = chunk => { + // 循环构造要素点位，并给每个要素点位绑定点击事件，添加弹窗 + chunk.forEach((feature, index) => { + let icon = null + if (createDivIconFun !== null) { + const { iconSize, contentHTML, className } = createDivIconFun(feature, index) + icon = L.divIcon({ iconSize: iconSize, html: contentHTML, className: className }) + } else { + icon = createDefaultFeatureStyle(layerConfigInfo) + } + if (feature.size) { + switch (feature.size) { + case 0: + icon = createDefaultFeatureStyle({ + img: 'reservoir_small.png' + }) + break + case 1: + icon = createDefaultFeatureStyle({ + img: 'reservoir_middle.png' + }) + break + case 2: + icon = createDefaultFeatureStyle({ + img: 'reservoir_big.png' + }) + break + } + } + restoreIconObj.restoreIcon = icon + // 当前地图为百度09墨卡托坐标系，在此处进行坐标转换 + // const bdLonLat = wgs84LL2bdLL(feature.latLng[1], feature.latLng[0]); + // feature.latLng[1] = bdLonLat[0]; + // feature.latLng[0] = bdLonLat[1]; + const marker = L.marker(feature.latLng, { icon }) + // 如果getLayerPopupInfo和createPopupFun不为null，则说明需要弹窗，否则不需要弹窗 + if (getLayerPopupInfo !== null && createPopupFun !== null) { + marker.resId = feature.resId + marker.layerConfigInfo = layerConfigInfo + marker.on('click', async e => { + console.log('图标点击e', e) + // 判断是否需要选中之后更换marker的图标 + if (clickReplaceIcon) { + // 先把之前选中的图标切换回来 + // const previousLayer = layerGroup.get(layerName).getLayer(restoreIconObj.layerId); + // if (previousLayer) { + // previousLayer.setIcon(icon); + // } + const layers = layerGroup.get(layerName).getLayers() + layers.forEach(layer => { + layer.setIcon(icon) + }) + restoreIconObj.layerId = e.sourceTarget._leaflet_id + const currentLayer = layerGroup.get(layerName).getLayer(restoreIconObj.layerId) + restoreIconObj.currentLayer = currentLayer + if (currentLayer) { + currentLayer.setIcon(L.icon({ iconUrl: replaceIconUrl, iconSize: replaceIconSize })) + } + } + // 使用uuid获取弹窗详情并构造弹窗 + const resId = e.sourceTarget.resId + let type = null + // 根据layerName1 传递不同的 resourceType + switch (e.sourceTarget.layerConfigInfo.layerName1) { + // 直升机起降点 + case 'f_helicopter': + type = 'resourceHelicopter' + break + // 物资储备库 + case 'f_repository': + type = 'resourceStorage' + break + // 应急队伍 + case 'YJPT_SM_ARMY': + type = 'resourceTeam' + break + case 'f_team': + type = 'resourceTeam' + break + // 危险源 + case 'YJPT_SM_HAZARD': + type = 'resourceDanger' + break + // 水源地 + case 'f_water_source': + type = 'resourceProtection' + break + // 检查站 + case 'f_check_station': + type = 'resourceProtection' + break + // 墓地 + case 'f_cemetery': + type = 'resourceProtection' + break + // 瞭望塔 + case 'f_watch_tower': + type = 'resourceProtection' + break + case 'YJPT_SM_SHELTER': + type = 'resourceShelter' + break + case 'YJPT_SM_STORAGE': + type = 'resourceStorage' + break + default: + break + } + const layerConfigInfo = e.sourceTarget.layerConfigInfo + const latLng = L.latLng([e.latlng.lat, e.latlng.lng]) + // debugger; + myGetLayerPopupInfo(resId, layerConfigInfo, type, mapObj, latLng, createPopupFun, getLayerPopupInfo, popupClassName) + }) + } + // 将该点位添加到聚合图层中 + layers.addLayer(marker) + }) + } + + // 当要素点位数据处理完成后，将聚合图层添加到layerGroup中，并将promise的状态置为已决议 + const chunkCompleted = () => { + console.log(featureGroup) + featureGroup.addLayer(layers) + layerGroup.set(layerName, layers) + resolve(1) + } + + // 分块处理要素点位，当要素数量非常大时，不至于页面卡死 + chunkData(features, doChunk, chunkCompleted) + }) } // 根据类型返回具体用聚合图层的样式。 function typeToStyle(layerName) { - let returnStyle = null - const typeToImg = { - fireForest: 'multi-marker-cluster-resource-protection', - fireRoad: 'multi-marker-cluster-resource-protection', - fireBreak2: 'multi-marker-cluster-resource-protection', - fireBreak1: 'multi-marker-cluster-resource-protection', + let returnStyle = null + const typeToImg = { + fireForest: 'multi-marker-cluster-resource-protection', + fireRoad: 'multi-marker-cluster-resource-protection', + fireBreak2: 'multi-marker-cluster-resource-protection', + fireBreak1: 'multi-marker-cluster-resource-protection', - fireWater4: 'multi-marker-cluster-resource-protection', - fireWater3: 'multi-marker-cluster-resource-protection', - fireWater5: 'multi-marker-cluster-resource-protection', - fireWater6: 'multi-marker-cluster-resource-protection', + fireWater4: 'multi-marker-cluster-resource-protection', + fireWater3: 'multi-marker-cluster-resource-protection', + fireWater5: 'multi-marker-cluster-resource-protection', + fireWater6: 'multi-marker-cluster-resource-protection', - airLine1: 'topic-marker-cluster-video', - airLine2: 'topic-marker-cluster-video', - airLine3: 'topic-marker-cluster-video', + airLine1: 'topic-marker-cluster-video', + airLine2: 'topic-marker-cluster-video', + airLine3: 'topic-marker-cluster-video', - fireMonitor7: 'topic-marker-cluster-video', - fireMonitor8: 'topic-marker-cluster-video', - fireMonitor9: 'topic-marker-cluster-video', - fireMonitor10: 'topic-marker-cluster-video', + fireMonitor7: 'topic-marker-cluster-video', + fireMonitor8: 'topic-marker-cluster-video', + fireMonitor9: 'topic-marker-cluster-video', + fireMonitor10: 'topic-marker-cluster-video', - fireRisk2: 'topic-marker-cluster-risk-area', - fireRisk3: 'topic-marker-cluster-risk-area', - fireRisk4: 'topic-marker-cluster-risk-area', - fireRisk1: 'topic-marker-cluster-risk-area', + fireRisk2: 'topic-marker-cluster-risk-area', + fireRisk3: 'topic-marker-cluster-risk-area', + fireRisk4: 'topic-marker-cluster-risk-area', + fireRisk1: 'topic-marker-cluster-risk-area', - fireTeam: 'topic-marker-cluster-team', - fireStorage: 'topic-marker-cluster-mine' - } - returnStyle = typeToImg[layerName] - if (typeof (returnStyle) === 'undefined') { - returnStyle = 'multi-marker-cluster-resource-protection' - } - return returnStyle + fireTeam: 'topic-marker-cluster-team', + fireStorage: 'topic-marker-cluster-mine' + } + returnStyle = typeToImg[layerName] + if (typeof(returnStyle) === 'undefined') { + returnStyle = 'multi-marker-cluster-resource-protection' + } + return returnStyle } // 无聚合上图 =》阳性人员路径 function addResourceOnMapWithoutSuperMap( - features, url, lastOne, createPopupFun, DS, featureGroup, layerGroup, map) { - // 如果资源要素数量为0，则说明该种资源没有记录 - // if (features.length < 1) { - // return Promise.resolve(0); - // } - // 根据类型返回具体用聚合图层的样式。 - // const defaultStyle = typeToStyle(layerName) - // 创建图层 - const layers = [] - const numArr = ['①', '②', '③', '④', '⑤', '⑥', '⑦', '⑧', '⑨', '⑩', '⑪', '⑫', '⑬', '⑭', '⑮', '⑯', '⑰', '⑱', '⑲', '⑳', '㉑', '㉒', '㉓', '㉔', '㉕', '㉖', '㉗', '㉘', '㉙', '㉚', '㉛', '㉜', '㉝', '㉞', '㉟', '㊱', '㊲', '㊳', '㊴', '㊵', '㊶', '㊷', '㊸', '㊹', '㊺', '㊻', '㊼', '㊽', '㊾', '㊿'] - // 判断是否是聚合图层 - // layers = createMarkerClusterLayer(defaultStyle) - const icon = createDefaultFeatureStyle({ - img: url || 'the-head.png', - iconSize: [36, 36] - }) - const arr = [] - features.map((feature, index) => { - // console.log("看看有没有坐标",feature.latLng); - if (feature.hasOwnProperty('latLng')) { - const marker = L.marker(feature.latLng, { icon }) - // marker.zjmc = feature.zjmc - marker.bindTooltip('

' + numArr[index] + '' + - feature.traveladdress + '(' + feature.count + '次)

' - , { - permanent: true + features, url, lastOne, createPopupFun, DS, featureGroup, layerGroup, map) { + // 如果资源要素数量为0，则说明该种资源没有记录 + // if (features.length < 1) { + // return Promise.resolve(0); + // } + // 根据类型返回具体用聚合图层的样式。 + // const defaultStyle = typeToStyle(layerName) + // 创建图层 + const layers = [] + const numArr = ['①', '②', '③', '④', '⑤', '⑥', '⑦', '⑧', '⑨', '⑩', '⑪', '⑫', '⑬', '⑭', '⑮', '⑯', '⑰', '⑱', '⑲', '⑳', '㉑', '㉒', '㉓', '㉔', '㉕', '㉖', '㉗', '㉘', '㉙', '㉚', '㉛', '㉜', '㉝', '㉞', '㉟', '㊱', '㊲', '㊳', '㊴', '㊵', '㊶', '㊷', '㊸', '㊹', '㊺', '㊻', '㊼', '㊽', '㊾', '㊿'] + // 判断是否是聚合图层 + // layers = createMarkerClusterLayer(defaultStyle) + const icon = createDefaultFeatureStyle({ + img: url || 'the-head.png', + iconSize: [36, 36] + }) + const arr = [] + features.map((feature, index) => { + // console.log("看看有没有坐标",feature.latLng); + if (feature.hasOwnProperty('latLng')) { + const marker = L.marker(feature.latLng, { icon }) + // marker.zjmc = feature.zjmc + marker.bindTooltip('

' + numArr[index] + '' + + feature.traveladdress + '(' + feature.count + '次)

', { + permanent: true + }) + L.tooltipLayout.resetMarker(marker) + if (createPopupFun !== null) { + marker.on('click', async e => { + const elementHtml = createPopupFun(feature) + if (elementHtml) { + L.popup({ className: 'epidemic-address', keepInView: true, maxHeight: 300 }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map) + } + }) + } + layers.push(marker) + // 处理bounds数据 + arr.push([feature.latLng.lat, feature.latLng.lng]) + } }) - L.tooltipLayout.resetMarker(marker) - if (createPopupFun !== null) { - marker.on('click', async e => { - const elementHtml = createPopupFun(feature) - if (elementHtml) { - L.popup({ className: 'epidemic-address', keepInView: true, maxHeight: 300 }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map) - } - }) - } - layers.push(marker) - // 处理bounds数据 - arr.push([feature.latLng.lat, feature.latLng.lng]) + // 适配地图 + var polyline = L.polyline(arr) + if (lastOne) { + // map.fitBounds(polyline.getBounds()) + } else { + map.flyTo(features[features.length - 1].latLng, 8) } - }) - // 适配地图 - var polyline = L.polyline(arr) - if (lastOne) { - // map.fitBounds(polyline.getBounds()) - } else { - map.flyTo(features[features.length - 1].latLng, 8) - } - var myGroup = L.layerGroup(layers) - featureGroup.addLayer(myGroup) - // featureGroup.addLayer(layers) - // console.log('上图的layerName', layerName,layerGroup); - // L.layerGroup.addLayer(layers) + var myGroup = L.layerGroup(layers) + featureGroup.addLayer(myGroup) + // featureGroup.addLayer(layers) + // console.log('上图的layerName', layerName,layerGroup); + // L.layerGroup.addLayer(layers) } // 道路污染治理专题-点位上图 function addPointsToMap(features, url, lastOne, createPopupFun, DS, featureGroup, layerGroup, map) { - // 如果资源要素数量为0，则说明该种资源没有记录 - // if (features.length < 1) { - // return Promise.resolve(0); - // } - // 根据类型返回具体用聚合图层的样式。 - // const defaultStyle = typeToStyle(layerName) - // 创建图层 - const layers = [] - // 判断是否是聚合图层 - // layers = createMarkerClusterLayer(defaultStyle) - const icon = createDefaultFeatureStyle({ - img: url || 'the-head.png', - iconSize: url == ('construction.png' || url == 'waterPoint2.png' || url == 'waterPoint1.png' || url == 'waterPoint3.png' || url == 'waterPoint4.png') ? [37, 49] : [36, 36] - }) - const arr = [] - features.map((feature, index) => { - // console.log("看看有没有坐标",feature.latLng); - if (feature.hasOwnProperty('latLng')) { - const marker = L.marker(feature.latLng, { icon }) - // marker.zjmc = feature.zjmc - // marker.bindTooltip('

' + index + '' + - // feature.traveladdress + '(' + feature.count + '次)

' - // , { - // permanent: true - // }) - // L.tooltipLayout.resetMarker(marker) - if (createPopupFun !== null) { - marker.on('click', async e => { - const elementHtml = createPopupFun(feature) - if (elementHtml) { - if (feature.type == 'road') { - L.popup({ className: 'roadGovernance-popup', keepInView: false }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map) - } else if (feature.type == 'site') { - L.popup({ className: 'site-popup', keepInView: false }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map) - } else if (feature.type == 'siteRoad') { - L.popup({ className: 'site-road-popup', keepInView: false }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map) - } else if (feature.type == 'waterPoint') { - L.popup({ className: 'water-point-pop', keepInView: false }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map) - } else { - L.popup({ className: 'epidemic-address', keepInView: false, maxHeight: 300 }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map) + // 如果资源要素数量为0，则说明该种资源没有记录 + // if (features.length < 1) { + // return Promise.resolve(0); + // } + // 根据类型返回具体用聚合图层的样式。 + // const defaultStyle = typeToStyle(layerName) + // 创建图层 + const layers = [] + // 判断是否是聚合图层 + // layers = createMarkerClusterLayer(defaultStyle) + const icon = createDefaultFeatureStyle({ + img: url || 'the-head.png', + iconSize: url == ('construction.png' || url == 'waterPoint2.png' || url == 'waterPoint1.png' || url == 'waterPoint3.png' || url == 'waterPoint4.png') ? [37, 49] : [36, 36] + }) + const arr = [] + features.map((feature, index) => { + // console.log("看看有没有坐标",feature.latLng); + if (feature.hasOwnProperty('latLng')) { + const marker = L.marker(feature.latLng, { icon }) + // marker.zjmc = feature.zjmc + // marker.bindTooltip('

' + index + '' + + // feature.traveladdress + '(' + feature.count + '次)

' + // , { + // permanent: true + // }) + // L.tooltipLayout.resetMarker(marker) + if (createPopupFun !== null) { + marker.on('click', async e => { + const elementHtml = createPopupFun(feature) + if (elementHtml) { + if (feature.type == 'road') { + L.popup({ className: 'roadGovernance-popup', keepInView: false }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map) + } else if (feature.type == 'site') { + L.popup({ className: 'site-popup', keepInView: false }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map) + } else if (feature.type == 'siteRoad') { + L.popup({ className: 'site-road-popup', keepInView: false }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map) + } else if (feature.type == 'waterPoint') { + L.popup({ className: 'water-point-pop', keepInView: false }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map) + } else { + L.popup({ className: 'epidemic-address', keepInView: false, maxHeight: 300 }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map) + } + } + }) + } + layers.push(marker) + // 处理bounds数据 + arr.push([feature.latLng.lat, feature.latLng.lng]) } - } }) - } - layers.push(marker) - // 处理bounds数据 - arr.push([feature.latLng.lat, feature.latLng.lng]) + // 适配地图 + var polyline = L.polyline(arr) + if (lastOne) { + // map.fitBounds(polyline.getBounds()) + } else { + map.flyTo(features[features.length - 1].latLng, 8) } - }) - // 适配地图 - var polyline = L.polyline(arr) - if (lastOne) { - // map.fitBounds(polyline.getBounds()) - } else { - map.flyTo(features[features.length - 1].latLng, 8) - } - var myGroup = L.layerGroup(layers) - featureGroup.addLayer(myGroup) - layerGroup.set(lastOne, myGroup) - // featureGroup.addLayer(layers) - // console.log('上图的layerName', layerName,layerGroup); - // L.layerGroup.addLayer(layers) + var myGroup = L.layerGroup(layers) + featureGroup.addLayer(myGroup) + layerGroup.set(lastOne, myGroup) + // featureGroup.addLayer(layers) + // console.log('上图的layerName', layerName,layerGroup); + // L.layerGroup.addLayer(layers) } /** * 资源上图通用方法 -> 不走超图服务 @@ -636,171 +636,171 @@ function addPointsToMap(features, url, lastOne, createPopupFun, DS, featureGroup * @private */ function addResourceOnMapWithoutSuper({ - features, - layerName, - layerConfigInfo, - isClusterLayer = '', - getLayerPopupInfo = null, - layerClassName = '', - popupClassName = '', - createPopupFun = null, - createDivIconFun = null, - clickReplaceIcon = '', - replaceIconUrl = '/src/supermap/image/poi.png', - replaceIconSize = [44, 44] + features, + layerName, + layerConfigInfo, + isClusterLayer = '', + getLayerPopupInfo = null, + layerClassName = '', + popupClassName = '', + createPopupFun = null, + createDivIconFun = null, + clickReplaceIcon = '', + replaceIconUrl = '/src/supermap/image/poi.png', + replaceIconSize = [44, 44] } = {}, mapObj, featureGroup, layerGroup) { - console.log('features', features) - // 如果资源要素数量为0，则说明该种资源没有记录 - if (features.length < 1) { - return Promise.resolve(0) - } - - // 创建图层 - let layers = null - // 判断是否是聚合图层 - layers = isClusterLayer ? createMarkerClusterLayer(layerClassName) : [] - - // 该promise用于将资源要素聚合图层添加到地图上，添加完毕之后，把状态置为已决议 - return new Promise(resolve => { - const doChunk = chunk => { - // 循环构造要素点位，并给每个要素点位绑定点击事件，添加弹窗 - chunk.forEach((feature, index) => { - let icon = null - // 水库大中小图标 - if (feature.size) { - switch (feature.size) { - case 0: - layerConfigInfo.img = 'reservoir_small.png' - break - case 1: - layerConfigInfo.img = 'reservoir_middle.png' - break - case 2: - layerConfigInfo.img = 'reservoir_big.png' - break - } - } - if (createDivIconFun !== null) { - const { iconSize, contentHTML, className } = createDivIconFun(feature, index) - icon = L.divIcon({ iconSize: iconSize, html: contentHTML, className: className }) - } else { - icon = createDefaultFeatureStyle(layerConfigInfo) - } - restoreIconObj.restoreIcon = icon - // 当前地图为百度09墨卡托坐标系，在此处进行坐标转换 - const bdLonLat = wgs84LL2bdLL(feature.latLng[1] || feature.latLng.lng, feature.latLng[0] || feature.latLng.lat) - feature.latLng = [] - feature.latLng[1] = bdLonLat[0] - feature.latLng[0] = bdLonLat[1] - // debugger; - const marker = L.marker(feature.latLng, { icon }) - // 如果getLayerPopupInfo和createPopupFun不为null，则说明需要弹窗，否则不需要弹窗 - if (getLayerPopupInfo !== null && createPopupFun !== null) { - marker.uuid = feature.uuid || '' - marker.resId = feature.resId || '' - marker.layerConfigInfo = layerConfigInfo - marker.on('click', async e => { - // 判断是否需要选中之后更换marker的图标 - if (clickReplaceIcon) { - const layers = layerGroup.get(layerName).getLayers() - layers.forEach(layer => { - layer.setIcon(icon) - }) - restoreIconObj.layerId = e.sourceTarget._leaflet_id - const currentLayer = layerGroup.get(layerName).getLayer(restoreIconObj.layerId) - restoreIconObj.currentLayer = currentLayer - if (currentLayer) { - currentLayer.setIcon(L.icon({ iconUrl: replaceIconUrl, iconSize: replaceIconSize })) - } - } - // 使用uuid获取弹窗详情并构造弹窗 - const uuid = e.sourceTarget.uuid - const resId = e.sourceTarget.resId - let resourceType = null - // 根据layerName1 传递不同的 resourceType - switch (e.sourceTarget.layerConfigInfo.layerName1) { - // 避难场所 - case 'wf_shelter': - resourceType = 'resourceShelter' - break - // 应急物资 - case 'wf_storage': - resourceType = 'resourceStorage' - break - // 应急队伍 - case 'wf_team': - resourceType = 'resourceTeam' - break - // 危险源 - case 'wf_danger': - resourceType = 'resourceDanger' - break - case 'wf_protection': - resourceType = 'resourceProtection' - break - default: - resourceType = e.sourceTarget.layerConfigInfo.resourceType || 'resourceProtection' - break - } - - const latLng = L.latLng([e.latlng.lat, e.latlng.lng]) - const response = await getLayerPopupInfo(uuid, layerConfigInfo, resourceType, resId) - response.allMapObject = { - mapObj: mapObj - } - response.layerConfigInfo = layerConfigInfo - console.log(response) - const elementHtml = createPopupFun(response) - if (elementHtml) { - L.popup({ className: popupClassName }).setLatLng(latLng).setContent(elementHtml).openOn(mapObj.map) - } - }) - } - // 将该点位添加到聚合图层中 - layers.addLayer(marker) - // marker.addTo(mapObj.map); - }) + console.log('features', features) + // 如果资源要素数量为0，则说明该种资源没有记录 + if (features.length < 1) { + return Promise.resolve(0) } - // 当要素点位数据处理完成后，将聚合图层添加到layerGroup中，并将promise的状态置为已决议 - const chunkCompleted = () => { - // debugger; - featureGroup.addLayer(layers) - layerGroup.set(layerName, layers) - resolve(1) - } + // 创建图层 + let layers = null + // 判断是否是聚合图层 + layers = isClusterLayer ? createMarkerClusterLayer(layerClassName) : [] - // 分块处理要素点位，当要素数量非常大时，不至于页面卡死 - chunkData(features, doChunk, chunkCompleted) - }) + // 该promise用于将资源要素聚合图层添加到地图上，添加完毕之后，把状态置为已决议 + return new Promise(resolve => { + const doChunk = chunk => { + // 循环构造要素点位，并给每个要素点位绑定点击事件，添加弹窗 + chunk.forEach((feature, index) => { + let icon = null + // 水库大中小图标 + if (feature.size) { + switch (feature.size) { + case 0: + layerConfigInfo.img = 'reservoir_small.png' + break + case 1: + layerConfigInfo.img = 'reservoir_middle.png' + break + case 2: + layerConfigInfo.img = 'reservoir_big.png' + break + } + } + if (createDivIconFun !== null) { + const { iconSize, contentHTML, className } = createDivIconFun(feature, index) + icon = L.divIcon({ iconSize: iconSize, html: contentHTML, className: className }) + } else { + icon = createDefaultFeatureStyle(layerConfigInfo) + } + restoreIconObj.restoreIcon = icon + // 当前地图为百度09墨卡托坐标系，在此处进行坐标转换 + const bdLonLat = wgs84LL2bdLL(feature.latLng[1] || feature.latLng.lng, feature.latLng[0] || feature.latLng.lat) + feature.latLng = [] + feature.latLng[1] = bdLonLat[0] + feature.latLng[0] = bdLonLat[1] + // debugger; + const marker = L.marker(feature.latLng, { icon }) + // 如果getLayerPopupInfo和createPopupFun不为null，则说明需要弹窗，否则不需要弹窗 + if (getLayerPopupInfo !== null && createPopupFun !== null) { + marker.uuid = feature.uuid || '' + marker.resId = feature.resId || '' + marker.layerConfigInfo = layerConfigInfo + marker.on('click', async e => { + // 判断是否需要选中之后更换marker的图标 + if (clickReplaceIcon) { + const layers = layerGroup.get(layerName).getLayers() + layers.forEach(layer => { + layer.setIcon(icon) + }) + restoreIconObj.layerId = e.sourceTarget._leaflet_id + const currentLayer = layerGroup.get(layerName).getLayer(restoreIconObj.layerId) + restoreIconObj.currentLayer = currentLayer + if (currentLayer) { + currentLayer.setIcon(L.icon({ iconUrl: replaceIconUrl, iconSize: replaceIconSize })) + } + } + // 使用uuid获取弹窗详情并构造弹窗 + const uuid = e.sourceTarget.uuid + const resId = e.sourceTarget.resId + let resourceType = null + // 根据layerName1 传递不同的 resourceType + switch (e.sourceTarget.layerConfigInfo.layerName1) { + // 避难场所 + case 'wf_shelter': + resourceType = 'resourceShelter' + break + // 应急物资 + case 'wf_storage': + resourceType = 'resourceStorage' + break + // 应急队伍 + case 'wf_team': + resourceType = 'resourceTeam' + break + // 危险源 + case 'wf_danger': + resourceType = 'resourceDanger' + break + case 'wf_protection': + resourceType = 'resourceProtection' + break + default: + resourceType = e.sourceTarget.layerConfigInfo.resourceType || 'resourceProtection' + break + } + + const latLng = L.latLng([e.latlng.lat, e.latlng.lng]) + const response = await getLayerPopupInfo(uuid, layerConfigInfo, resourceType, resId) + response.allMapObject = { + mapObj: mapObj + } + response.layerConfigInfo = layerConfigInfo + console.log(response) + const elementHtml = createPopupFun(response) + if (elementHtml) { + L.popup({ className: popupClassName }).setLatLng(latLng).setContent(elementHtml).openOn(mapObj.map) + } + }) + } + // 将该点位添加到聚合图层中 + layers.addLayer(marker) + // marker.addTo(mapObj.map); + }) + } + + // 当要素点位数据处理完成后，将聚合图层添加到layerGroup中，并将promise的状态置为已决议 + const chunkCompleted = () => { + // debugger; + featureGroup.addLayer(layers) + layerGroup.set(layerName, layers) + resolve(1) + } + + // 分块处理要素点位，当要素数量非常大时，不至于页面卡死 + chunkData(features, doChunk, chunkCompleted) + }) } async function myGetLayerPopupInfo(resId, layerConfigInfo, type, mapObj, latLng, createPopupFun, getLayerPopupInfo, popupClassName) { - const response = await getLayerPopupInfo(resId, layerConfigInfo, type) - // debugger; - console.log(response) - if (!response) return - response.allMapObject = { - mapObj: mapObj - } - const elementHtml = createPopupFun(response) - L.popup({ className: popupClassName }).setLatLng(latLng).setContent(elementHtml).openOn(mapObj.map) + const response = await getLayerPopupInfo(resId, layerConfigInfo, type) + // debugger; + console.log(response) + if (!response) return + response.allMapObject = { + mapObj: mapObj + } + const elementHtml = createPopupFun(response) + L.popup({ className: popupClassName }).setLatLng(latLng).setContent(elementHtml).openOn(mapObj.map) } export { - // 复原的图标 - restoreIconObj, - // 添加单个点位到地图上 - addPointOnMap, - // 使用uuid集合去超图服务查询资源要素，得到结果就把promise状态置为已决议，并返回features - createPromiseByQueryService, - // 资源上图通用方法 - addResourceOnMap, - // 创建聚合图层 - createMarkerClusterLayer, - // 创建资源弹窗 - myGetLayerPopupInfo, - // 头顶库临时 - addResourceOnMapWithoutSuperMap, - addResourceOnMapWithoutSuper, - addResourceOnMapNew, - addPointsToMap -} + // 复原的图标 + restoreIconObj, + // 添加单个点位到地图上 + addPointOnMap, + // 使用uuid集合去超图服务查询资源要素，得到结果就把promise状态置为已决议，并返回features + createPromiseByQueryService, + // 资源上图通用方法 + addResourceOnMap, + // 创建聚合图层 + createMarkerClusterLayer, + // 创建资源弹窗 + myGetLayerPopupInfo, + // 头顶库临时 + addResourceOnMapWithoutSuperMap, + addResourceOnMapWithoutSuper, + addResourceOnMapNew, + addPointsToMap +} \ No newline at end of file diff --git a/src/views/pages/area/components/ImportantAreaPopNew.vue b/src/views/pages/area/components/ImportantAreaPopNew.vue index 4464b63..208d419 100644 --- a/src/views/pages/area/components/ImportantAreaPopNew.vue +++ b/src/views/pages/area/components/ImportantAreaPopNew.vue @@ -35,7 +35,7 @@ 13360907765

-
+
@@ -690,7 +690,7 @@ export default { } } - .site-content { + .site-content-new { display: flex; flex-direction: column; .site-content-title{ diff --git a/src/views/pages/areaMonitor/components/EarlyWarning.vue b/src/views/pages/areaMonitor/components/EarlyWarning.vue index d19c1ac..5494c41 100644 --- a/src/views/pages/areaMonitor/components/EarlyWarning.vue +++ b/src/views/pages/areaMonitor/components/EarlyWarning.vue @@ -212,7 +212,7 @@ export default { }, ]; this.$parent.hiMap.mapObj.map.flyTo({ lat: data.latitude, lng: data.longitude }); - this.$parent.hiMapFun.openPopupVideoSurveillance(EventListDetail[0]); + this.$parent.hiMapFun.openPopupEventDetailNew(EventListDetail[0]); this.$parent.hiMapFun.addResourceOnMapWithoutSuperMapCluster( EventListDetail, "poi-event.png", diff --git a/src/views/pages/areaMonitor/components/SiteListMore.vue b/src/views/pages/areaMonitor/components/SiteListMore.vue index a6c197a..f24c386 100644 --- a/src/views/pages/areaMonitor/components/SiteListMore.vue +++ b/src/views/pages/areaMonitor/components/SiteListMore.vue @@ -73,6 +73,7 @@ } from "@/api/area"; import { gcjLL2wgs84LL } from "@/utils/coordinateSystemTransform"; import { createImportantAreaPop } from "@/supermap/createMarkerPopup"; +import { createImportantAreaPopNew } from '../../../../supermap/createMarkerPopup'; export default { data() { @@ -198,6 +199,7 @@ }, // 行点击 analyse(row) { + debugger // bus.$emit("openCauseAnalysis", row); this.$parent.hiMapFun.removerPolygon() this.$parent.removeRoadCauseAnalysis() @@ -213,7 +215,7 @@ dataEvent, "poi-red.png", "roadPoint", - createImportantAreaPop + createImportantAreaPopNew ); } else if(row.point) { let arr = JSON.parse(row.point) diff --git a/src/views/pages/areaMonitor/index.vue b/src/views/pages/areaMonitor/index.vue index a3fd255..8d619d1 100644 --- a/src/views/pages/areaMonitor/index.vue +++ b/src/views/pages/areaMonitor/index.vue @@ -155,6 +155,7 @@ import { createCameraDetailsPop, createEventListDetailsPop, createImportantAreaPop, + createImportantAreaPopNew } from "@/supermap/createMarkerPopup"; import { listPassengerFlow, diff --git a/src/views/pages/civilizedCity/components/EventListDetailsPopNew.vue b/src/views/pages/civilizedCity/components/EventListDetailsPopNew.vue index 8d651b8..51698b8 100644 --- a/src/views/pages/civilizedCity/components/EventListDetailsPopNew.vue +++ b/src/views/pages/civilizedCity/components/EventListDetailsPopNew.vue @@ -30,7 +30,7 @@
-
+