From ac5fe38c35a0bae1bc23d670669bc7fb3e96ab45 Mon Sep 17 00:00:00 2001 From: chenchenzai Date: Fri, 25 Nov 2022 13:54:10 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BA=8B=E4=BB=B6=E8=AF=A6=E6=83=85=EF=BC=8C?= =?UTF-8?q?=E5=8C=BA=E5=9F=9F=E8=AF=A6=E6=83=85=E5=BC=B9=E7=AA=97=E4=BF=AE?= =?UTF-8?q?=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/supermap/advance-init.js | 4045 +++++++++-------- .../area/components/ImportantAreaPop.vue | 727 ++- .../area/components/ImportantAreaPopBack.vue | 511 +++ .../components/EventListDetailsPop.vue | 309 +- .../components/EventListDetailsPopBack.vue | 202 + 5 files changed, 3693 insertions(+), 2101 deletions(-) create mode 100644 src/views/pages/area/components/ImportantAreaPopBack.vue create mode 100644 src/views/pages/civilizedCity/components/EventListDetailsPopBack.vue diff --git a/src/supermap/advance-init.js b/src/supermap/advance-init.js index 257eb11..8cfb295 100644 --- a/src/supermap/advance-init.js +++ b/src/supermap/advance-init.js @@ -12,29 +12,29 @@ import { getDoubleCharCount, getSingleCharCount } from '../utils/index' import data from './json/shanxi_polygon.json' // 引入生成弹窗的方法 import { - createDispatchResourcePopup, - createDistanceAndAreaPopup, - createGeneralPopup, - createGudEvnPopup, - createStorageAndGoodsPopup, - createAddressPopup, - createManagerPopup, - createSearchAddressTitlePop, - createCameraDetailsPop, - createRoadGovernancePop, - createEventListDetailsPop, + createDispatchResourcePopup, + createDistanceAndAreaPopup, + createGeneralPopup, + createGudEvnPopup, + createStorageAndGoodsPopup, + createAddressPopup, + createManagerPopup, + createSearchAddressTitlePop, + createCameraDetailsPop, + createRoadGovernancePop, + createEventListDetailsPop, } from './createMarkerPopup' // 引入资源上图方法 import { - addPointOnMap, - addResourceOnMap, - addResourceOnMapNew, - myGetLayerPopupInfo, - createPromiseByQueryService, - createMarkerClusterLayer, - addResourceOnMapWithoutSuperMap, - addResourceOnMapWithoutSuper, - addPointsToMap + addPointOnMap, + addResourceOnMap, + addResourceOnMapNew, + myGetLayerPopupInfo, + createPromiseByQueryService, + createMarkerClusterLayer, + addResourceOnMapWithoutSuperMap, + addResourceOnMapWithoutSuper, + addPointsToMap } from './map-showResource' const L = window.L || {} @@ -42,2036 +42,2037 @@ const SuperMap = window.SuperMap || {} let isLocated = true let polylineArr = [] let PolygonArr = [] -/** - * 地图功能接口类 - * 说明：该类中的方法带“_”为对外暴露的方法，调用时去掉“_”；不带“_”的为内部方法，不可调用。 - * @param mapObj {Object} 设置全局参数对象 - * @constructor - */ + /** + * 地图功能接口类 + * 说明：该类中的方法带“_”为对外暴露的方法，调用时去掉“_”；不带“_”的为内部方法，不可调用。 + * @param mapObj {Object} 设置全局参数对象 + * @constructor + */ export function MapFun(mapObj) { - // 初始化全局变量 - const degreeToMeter = mapObj.DEGGER_TO_METER // degreeToMeter 度与米的换算单位 - const layerGroup = mapObj.layerGroup // 全局图层记录数组 - const featureGroup = mapObj.featureGroup // 全局图层数组 - const map = mapObj.map // 全局地图对象 - const externalFunGlobalObject = {} + // 初始化全局变量 + const degreeToMeter = mapObj.DEGGER_TO_METER // degreeToMeter 度与米的换算单位 + const layerGroup = mapObj.layerGroup // 全局图层记录数组 + const featureGroup = mapObj.featureGroup // 全局图层数组 + const map = mapObj.map // 全局地图对象 + const externalFunGlobalObject = {} - // 添加外部注入方法函数 - /** - * 添加外部注入方法函数 - * @param functionName {Function} 方法名称 - * @param functionObjectName {String} 需要注入的对象名称 - */ - function _addExternalFunToObj(functionName, functionObjectName) { - externalFunGlobalObject[functionObjectName] = functionName - } - - /** - * 定义地物编辑服务 - */ - const featureService = L.supermap.featureService(_mapConfig.config.EDITORDATA_URL) - - /** - * 根据图层名移除图层 - * @param layerName {String} 图层名 - */ - const _removeLayerByLayerName = function (layerName) { - const layer = layerGroup.get(layerName) - // const feature = featureGroup; - // map.popupclose(); - // debugger; - console.log('清空图层', layerName) - if (layer) { - // 清空layer图层 - map.closePopup() - featureGroup.removeLayer(layer) - layer.remove() - // layer.clearLayers(); - // 从全局记录中删除 - layerGroup.delete(layerName) - // debugger + // 添加外部注入方法函数 + /** + * 添加外部注入方法函数 + * @param functionName {Function} 方法名称 + * @param functionObjectName {String} 需要注入的对象名称 + */ + function _addExternalFunToObj(functionName, functionObjectName) { + externalFunGlobalObject[functionObjectName] = functionName } - } - /** - * 清空地图（除去底图） - * @private - */ - const _clearAllLayers = function () { - // debugger; - map.closePopup() - featureGroup.clearLayers() - layerGroup.clear() - } - /** - * 关闭所有地图弹窗 - * @private - */ - const _closeAllPopup = function (feature) { - map.closePopup() - } - /** - * 添加地图弹窗 - * @private - */ - const _openPopup = function (feature) { - // debugger; - const elementHtml = createAddressPopup(feature) - L.popup({ className: 'epidemic-popup' }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map) - } - /** - * 添加视频监控平台地图弹窗 - * @private - */ - const _openPopupVideoSurveillance = function (feature) { - // debugger - 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 = 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) - } - } - /** - * 添加道路污染治理弹窗 - * @private - */ - const _openPopupRoadGovernance = function (feature) { - // debugger; - const allMapObject = { mapObj: mapObj } - const elementHtml = createRoadGovernancePop(feature, allMapObject) - console.log(allMapObject) - // debugger - L.popup({ className: 'roadGovernance-popup' }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map) - } - /** - * 根据图层名数组移除图层 - * @param layerNameArray {Array} 图层名 - */ - const _removeLayersByLayerNameArray = function (layerNameArray) { - layerNameArray.forEach((layerName) => { - const layer = layerGroup.get(layerName) - if (layer) { - // 清空layer图层 - featureGroup.removeLayer(layer) - layer.remove() - // layer.clearLayers(); - // 从全局记录中删除 - layerGroup.delete(layerName) - } - }) - } - /** - * 根据图层名数组移除图层 - * @param layerNameArray {Array} 图层名 - */ - const _addMovingMarker = function (arrList) { - var polyline1 = L.polyline(arrList).addTo(map) - var decorator = L.polylineDecorator(polyline1, { - patterns: [ - // defines a pattern of 10px-wide dashes, repeated every 20px on the line - { offset: 0, repeat: 20, symbol: L.Symbol.dash({ pixelSize: 10 }) } - ] - }).addTo(map) - // var myMovingMarker = L.Marker.movingMarker(arrList, - // [20000]).addTo(map) - // myMovingMarker.start() - var polygin = L.motion.polyline(arrList, { - color: 'transparent' - }, { - auto: true, - duration: 53000, - easing: L.Motion.Ease.easeInOutQuart - }, { - removeOnEnd: true, - showMarker: true, - icon: L.divIcon({ html: "", iconSize: L.point(27.5, 24) }) - }).addTo(map) - polygin.motionStart() - } - /** - * 实时请求后台展示内容，构建弹窗内容后返回 （例：事件扎点中使用） - * @param configInfo {Object} 动态配置的图层信息 - * @param data {Object} 实例对象 - * @returns {HTMLElement} HTML对象 - */ - function _createPopupConfigInfo(configInfo, data) { - const currentData = data - const layerMesage = {} - const attribute = configInfo.attribute - const attributeCaption = configInfo.attributeCaption - // 构造弹窗对象 - for (let i = 0; i < attribute.length; i++) { - const key = attributeCaption[i] - const name = attribute[i] - layerMesage[key] = currentData[name] - } - // 返回弹框内容 - return createPopupHtml(layerMesage) - } - /** - * 根据marker获取弹窗信息，只弹出基本信息（直接弹出） - * @param markerGroup {Object} 图层组 - * */ - const markerPopup = function (markerGroup) { - const layers = markerGroup._layers - for (const index in layers) { - const contentHTML = _createPopupConfigInfo(layers[index].options.attribution, layers[index].options.attribution.data) - // layers[index].bindPopup(contentHTML).openPopup(layers[index].getLatLng()); - layers[index].bindPopup(contentHTML).openPopup() - } - } + /** + * 定义地物编辑服务 + */ + const featureService = L.supermap.featureService(_mapConfig.config.EDITORDATA_URL) - /** - * 展示普通图层 - * @param callBackFun {Function} 回调函数对象 - */ - const _showStaticLayer = function (callBackFun) { - callBackFun() - } - /** - * 资源中添加超图库数据 - * @param features {Object} 要素 - * @param layerConfigInfo {Object} 图层配置对象 - */ - function _addResourceFeature(features, layerConfigInfo) { - const x = features.SmX - const y = features.SmY - const UUID = features.UUID - const name = layerConfigInfo.layerName - const dataSource = name.split('@') - let marker = {} - // marker = L.circleMarker([x, y]); - marker = L.marker([y, x]) - marker = marker.toGeoJSON() - marker.properties = { UUID: UUID } - const addFeatureParams = new SuperMap.EditFeaturesParameters({ - dataSourceName: dataSource[1], - dataSetName: dataSource[0], - features: marker, - editType: 'add', - returnContent: true - }) - featureService.editFeatures(addFeatureParams, (serviceResult) => { - if (serviceResult.result.succeed) { - console.log('添加超图库成功') - } - }) - } - /** - * 资源模块中删除资源 - * @param UUID {String} 需要删除的uuid - * @param layerConfigInfo {Object} 图层配置对象 - */ - function _deleteResourceFeature(UUID, layerConfigInfo) { - const authorityFilter = `UUID = '${UUID}'`// 此处需要传参替换 - const queryUrl = _mapConfig.config.QUERY_URL - const name = layerConfigInfo.layerName - const dataSource = name.split('@') - const sqlParam = new SuperMap.QueryBySQLParameters({ - queryParams: { - name: name, - attributeFilter: authorityFilter - } - }) - L.supermap - .queryService(queryUrl) - .queryBySQL(sqlParam, (serviceResult) => { - serviceResult.result.recordsets.forEach((value) => { - value.features.features.forEach((feature) => { - const deleteParams = new SuperMap.EditFeaturesParameters({ - dataSourceName: dataSource[1], - dataSetName: dataSource[0], - IDs: [feature.id], - editType: 'delete' + /** + * 根据图层名移除图层 + * @param layerName {String} 图层名 + */ + const _removeLayerByLayerName = function(layerName) { + const layer = layerGroup.get(layerName) + // const feature = featureGroup; + // map.popupclose(); + // debugger; + console.log('清空图层', layerName) + if (layer) { + // 清空layer图层 + map.closePopup() + featureGroup.removeLayer(layer) + layer.remove() + // layer.clearLayers(); + // 从全局记录中删除 + layerGroup.delete(layerName) + // debugger + } + } + /** + * 清空地图（除去底图） + * @private + */ + const _clearAllLayers = function() { + // debugger; + map.closePopup() + featureGroup.clearLayers() + layerGroup.clear() + } + /** + * 关闭所有地图弹窗 + * @private + */ + const _closeAllPopup = function(feature) { + map.closePopup() + } + /** + * 添加地图弹窗 + * @private + */ + const _openPopup = function(feature) { + // debugger; + const elementHtml = createAddressPopup(feature) + L.popup({ className: 'epidemic-popup' }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map) + } + /** + * 添加视频监控平台地图弹窗 + * @private + */ + const _openPopupVideoSurveillance = function(feature) { + // debugger + 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 = createEventListDetailsPop(feature) + L.popup({ className: 'Event-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) + } + } + /** + * 添加道路污染治理弹窗 + * @private + */ + const _openPopupRoadGovernance = function(feature) { + // debugger; + const allMapObject = { mapObj: mapObj } + const elementHtml = createRoadGovernancePop(feature, allMapObject) + console.log(allMapObject) + // debugger + L.popup({ className: 'roadGovernance-popup' }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map) + } + /** + * 根据图层名数组移除图层 + * @param layerNameArray {Array} 图层名 + */ + const _removeLayersByLayerNameArray = function(layerNameArray) { + layerNameArray.forEach((layerName) => { + const layer = layerGroup.get(layerName) + if (layer) { + // 清空layer图层 + featureGroup.removeLayer(layer) + layer.remove() + // layer.clearLayers(); + // 从全局记录中删除 + layerGroup.delete(layerName) + } }) - featureService.editFeatures(deleteParams, (serviceResult) => { - if (serviceResult.result.succeed) { - console.log('删除数据成功') - } - }) - }) - }) - }) - } - /** - * 资源模块中更新资源 - * @param features {Object} 需要跟新的features - * @param layerConfigInfo {Object} 图层配置对象 - */ - function _updateResourceFeature(features, layerConfigInfo) { - const authorityFilter = `UUID = '${features.UUID}'` - const queryUrl = _mapConfig.config.QUERY_URL - const name = layerConfigInfo.layerName - const dataSource = name.split('@') - const sqlParam = new SuperMap.QueryBySQLParameters({ - queryParams: { - name: name, - attributeFilter: authorityFilter - } - }) - L.supermap - .queryService(queryUrl) - .queryBySQL(sqlParam, function (serviceResult) { - console.log('serviceResult', serviceResult.result) - if (serviceResult.result.recordsets[0].features.features.length === 0) { - let marker = {} - marker = L.marker([features.SmY, features.SmX]) - marker = marker.toGeoJSON() - marker.properties = { UUID: features.UUID } - const addFeatureParams = new SuperMap.EditFeaturesParameters({ + } + /** + * 根据图层名数组移除图层 + * @param layerNameArray {Array} 图层名 + */ + const _addMovingMarker = function(arrList) { + var polyline1 = L.polyline(arrList).addTo(map) + var decorator = L.polylineDecorator(polyline1, { + patterns: [ + // defines a pattern of 10px-wide dashes, repeated every 20px on the line + { offset: 0, repeat: 20, symbol: L.Symbol.dash({ pixelSize: 10 }) } + ] + }).addTo(map) + // var myMovingMarker = L.Marker.movingMarker(arrList, + // [20000]).addTo(map) + // myMovingMarker.start() + var polygin = L.motion.polyline(arrList, { + color: 'transparent' + }, { + auto: true, + duration: 53000, + easing: L.Motion.Ease.easeInOutQuart + }, { + removeOnEnd: true, + showMarker: true, + icon: L.divIcon({ html: "", iconSize: L.point(27.5, 24) }) + }).addTo(map) + polygin.motionStart() + } + /** + * 实时请求后台展示内容，构建弹窗内容后返回 （例：事件扎点中使用） + * @param configInfo {Object} 动态配置的图层信息 + * @param data {Object} 实例对象 + * @returns {HTMLElement} HTML对象 + */ + function _createPopupConfigInfo(configInfo, data) { + const currentData = data + const layerMesage = {} + const attribute = configInfo.attribute + const attributeCaption = configInfo.attributeCaption + // 构造弹窗对象 + for (let i = 0; i < attribute.length; i++) { + const key = attributeCaption[i] + const name = attribute[i] + layerMesage[key] = currentData[name] + } + // 返回弹框内容 + return createPopupHtml(layerMesage) + } + + /** + * 根据marker获取弹窗信息，只弹出基本信息（直接弹出） + * @param markerGroup {Object} 图层组 + * */ + const markerPopup = function(markerGroup) { + const layers = markerGroup._layers + for (const index in layers) { + const contentHTML = _createPopupConfigInfo(layers[index].options.attribution, layers[index].options.attribution.data) + // layers[index].bindPopup(contentHTML).openPopup(layers[index].getLatLng()); + layers[index].bindPopup(contentHTML).openPopup() + } + } + + /** + * 展示普通图层 + * @param callBackFun {Function} 回调函数对象 + */ + const _showStaticLayer = function(callBackFun) { + callBackFun() + } + /** + * 资源中添加超图库数据 + * @param features {Object} 要素 + * @param layerConfigInfo {Object} 图层配置对象 + */ + function _addResourceFeature(features, layerConfigInfo) { + const x = features.SmX + const y = features.SmY + const UUID = features.UUID + const name = layerConfigInfo.layerName + const dataSource = name.split('@') + let marker = {} + // marker = L.circleMarker([x, y]); + marker = L.marker([y, x]) + marker = marker.toGeoJSON() + marker.properties = { UUID: UUID } + const addFeatureParams = new SuperMap.EditFeaturesParameters({ dataSourceName: dataSource[1], dataSetName: dataSource[0], features: marker, editType: 'add', returnContent: true - }) - featureService.editFeatures(addFeatureParams, (serviceResult) => { - if (serviceResult.result.succeed) { - console.log('更新超图库成功') - } - }) - } else { - const feature = serviceResult.result.recordsets[0].features.features[0] - feature.geometry.coordinates[0] = features.SmX - feature.geometry.coordinates[1] = features.SmY - const updateParams = new SuperMap.EditFeaturesParameters({ - dataSourceName: dataSource[1], - dataSetName: dataSource[0], - features: feature, - editType: 'update' - }) - featureService.editFeatures(updateParams, (serviceResult) => { - if (serviceResult.result.succeed) { - console.log('更新成功') - } - }) - } - }) - } - - /** - * 扎点后弹出弹窗的通用方法 - * @param e {Object} marker对象 - */ - function _drawMarkerPopupUniversalFun(e) { - if (e.layerType === 'marker') { - featureGroup.addLayer(e.layer) - layerGroup.set('drawMarkerLayer', e.layer) - mapObj.currentSelectedPoint = { - lat: e.layer._latlng.lat, - lng: e.layer._latlng.lng - } - // 设置bindPopup弹窗内容，通过传入Element对象 - const info = { - 纬度: mapObj.currentSelectedPoint.lat, - 经度: mapObj.currentSelectedPoint.lng - } - var popupContent = createDrawMarkerPopupHtml(info) - layerGroup.get('drawMarkerLayer').bindPopup(popupContent).openPopup() - } - } - /** - * @description: 通过点位在地图上留下标记 - * @param {*} e point数据 - * @return {*} - */ - function _drawMarkerThroughPoint(e, callback, click) { - const myIcon = L.icon({ - iconUrl: './src/assets/map/button/button-map-location.png', - iconSize: [35, 35] - }) - const options = { - icon: myIcon, - draggable: true, - autoPan: true - } - const layer = L.marker([e.layer._latlng.lat, e.layer._latlng.lng], options).addTo(mapObj.map) - layer.on('moveend', function (e) { - callback(e) - }) - layer.on('click', function (e) { - layer.remove() - mapObj.drawMarker.enable() - }) - } - /** - * @description: 改变marker提示语 - * @param {*} tooltip 提示语 - * @return {*} - */ - function _changeMarkerTooltip(tooltip) { - L.drawLocal.draw.handlers.marker.tooltip.start = tooltip - } - /** - * 构造drawMarker弹窗内容 - * @param data {object} 传入的实体对象 - */ - function createDrawMarkerPopupHtml(data) { - const contentHTML = document.createElement('div') - const firstDiv = document.createElement('div') - const secondDiv = document.createElement('div') - const thirdDiv = document.createElement('div') - const titleDiv = document.createElement('div') - const btnDiv = document.createElement('div') - const titleContent = document.createTextNode('详细信息') - titleDiv.className = 'map-pop-title' - // titleDiv.style.cssText = "width: 100%;height: 30px;background: #04B2BF;padding-top: 5px;padding-left: 10px;"; - titleDiv.appendChild(titleContent) - contentHTML.appendChild(titleDiv) - btnDiv.style.cssText = 'width: 100%;height: 30px;' - // 弹窗高度 - let lineCount = 0 - // 最大宽度，判断每行字符串，超过按照最大宽度设定 - let contentWidth = 0 - // 累加行数，计算每行宽度 - const calc = function (str) { - const tempLength = getDoubleCharCount(str) * 18 + getSingleCharCount(str) * 10 - if (tempLength >= 450) { - contentWidth = 450 - lineCount += Math.ceil(tempLength / 434) // 450-8-8,除去padding - } else { - if (tempLength > contentWidth) { - contentWidth = tempLength - } - lineCount += 1 - } - } - Object.keys(data).forEach((key) => { - let lineContent = null - if (data[key] !== null) { - lineContent = key + ':' + data[key] - } else { - lineContent = key + ':' + '无' - } - calc(lineContent) - firstDiv.className = 'popupwindow' - const content = document.createTextNode(lineContent) - const br = document.createElement('br') - firstDiv.appendChild(content) - firstDiv.appendChild(br) - }) - if (lineCount <= 6) { - secondDiv.style.cssText = 'max-width:450px;word-break: break-all' - secondDiv.appendChild(firstDiv) - contentHTML.appendChild(secondDiv) - } else { - thirdDiv.style.cssText = 'height:164px;overflow-y: auto;max-width:450px;word-break: break-all' - thirdDiv.appendChild(firstDiv) - contentHTML.appendChild(thirdDiv) - } - const notarizeBtn = document.createElement('div') - const cancelBtn = document.createElement('div') - const notarizeContent = document.createTextNode('确认') - const cancelContent = document.createTextNode('取消 ') - notarizeBtn.appendChild(notarizeContent) - notarizeBtn.style.cssText = 'float: left;width: 50px;margin-left:65px;background-color:#00afda;cursor: pointer;text-align: center;margin-left: 23%;' - notarizeBtn.onclick = saveMarkerCallBack - cancelBtn.appendChild(cancelContent) - cancelBtn.onclick = resetMarkerCallBack - cancelBtn.style.cssText = 'float: left;width: 50px;background-color:#00afda;margin-left:15px;cursor: pointer;text-align: center;' - - btnDiv.appendChild(notarizeBtn) - btnDiv.appendChild(cancelBtn) - contentHTML.appendChild(btnDiv) - return contentHTML - } - - /** - * 取消扎点回调 - */ - const resetMarkerCallBack = function () { - _removeLayerByLayerName('drawMarkerLayer') - layerGroup.delete('drawMarkerLayer') - mapObj.drawMarker.enable() - } - function _addImgMaker(latLng, inconConfig) { - const icon = MapStyle.featureIcon(inconConfig) - const markerLayer = L.marker([latLng.lat, latLng.lng], { - icon: icon - }) - featureGroup.addLayer(markerLayer) - } - /** - * 保存扎点信息的通用方法 - */ - function saveMarkerCallBack() { - externalFunGlobalObject.saveLocationFun() - } - /** - * 查看是否扎点 - * @param UUID {String} 本地与超图关联字段 - * @param layerName {String} 配置图层名 - * @param layerConfigInfo {Object} 自定义的图层配置信息对象 - */ - - function _hasLocationInfo(UUID, layerName, layerConfigInfo) { - const authorityFilter = `UUID = '${UUID}'` - const queryUrl = _mapConfig.config.QUERY_URL - const name = layerConfigInfo.layerName - const sqlParam = new SuperMap.QueryBySQLParameters({ - queryParams: { - name: name, - attributeFilter: authorityFilter - } - }) - L.supermap - .queryService(queryUrl) - .queryBySQL(sqlParam, (serviceResult) => { - isLocated = serviceResult.result.recordsets[0].features.features.length === 0 - }) - } - - function _getLocale() { - return isLocated - } - /** - * 构造弹窗内容 - * @param data {object} 传入的实体对象 - */ - function createPopupHtml(data) { - const contentHTML = document.createElement('div') - const firstDiv = document.createElement('div') - const secondDiv = document.createElement('div') - const thirdDiv = document.createElement('div') - const titleDiv = document.createElement('div') - const titleContent = document.createTextNode('详细信息') - titleDiv.className = 'map-pop-title' - // titleDiv.style.cssText = "width: 100%;height: 30px;background: #04B2BF;"; - titleDiv.appendChild(titleContent) - contentHTML.appendChild(titleDiv) - // 弹窗高度 - let lineCount = 0 - // 最大宽度，判断每行字符串，超过按照最大宽度设定 - let contentWidth = 0 - // 累加行数，计算每行宽度 - const calc = function (str) { - const tempLength = getDoubleCharCount(str) * 18 + getSingleCharCount(str) * 10 - if (tempLength >= 450) { - contentWidth = 450 - lineCount += Math.ceil(tempLength / 434) // 450-8-8,除去padding - } else { - if (tempLength > contentWidth) { - contentWidth = tempLength - } - lineCount += 1 - } - } - Object.keys(data).forEach((key) => { - let lineContent = null - if (data[key]) { - lineContent = key + '：' + data[key] - } else { - lineContent = key + '：' + '无' - } - calc(lineContent) - firstDiv.className = 'popupwindow' - const content = document.createTextNode(lineContent) - const br = document.createElement('br') - firstDiv.appendChild(content) - firstDiv.appendChild(br) - }) - - if (lineCount <= 6) { - secondDiv.style.cssText = 'padding: 8px;max-width:450px;word-break: break-all' - secondDiv.appendChild(firstDiv) - contentHTML.appendChild(secondDiv) - } else { - thirdDiv.style.cssText = 'height:164px;overflow-y: auto;padding: 8px;max-width:450px;word-break: break-all' - thirdDiv.appendChild(firstDiv) - contentHTML.appendChild(secondDiv) - } - return contentHTML - } - /** - * 切换地图 - * @param mapType {String} 类型 - */ - function _changeMap(mapType) { - var tileMapUrl = '' - if (mapType === 'tiled') { - tileMapUrl = _mapConfig.config.TITLE_LAYER.mapUrl - } else if (mapType === 'remote') { - tileMapUrl = _mapConfig.config.TITLE_LAYER_REMOTE.mapUrl - } else if (mapType === 'dark') { - tileMapUrl = _mapConfig.config.TITLE_LAYER_DARK.mapUrl - } - mapObj.map.eachLayer(function (layer) { - if (layer.tempIndex === -1) { - mapObj.map.removeLayer(layer) - L.supermap.tiledMapLayer(tileMapUrl).addTo(mapObj.map) - } - }) - } - /** - * @description: ZXY渲染百度地图 底图切换 - * @param {*} mapType 切换底图类型 - * @return {*} - */ - function _ZXYRenderMapSwitch(mapType) { - const config = _mapConfig.config.TILEDCONFIG[mapType] - const layerConfig = { url: config.tiledUrl, name: config.tiledName } - const newTileLayer = new L.tileLayer.baidu(layerConfig) - mapObj.map.eachLayer(function (layer) { - if (layer.options.tms === true) { - mapObj.map.removeLayer(layer) - newTileLayer.addTo(mapObj.map) - } - }) - } - - /** - * 地图根据Feature数组添加点位信息 - * @param layerName {String} 图层名字 - * @param features {Array} 地图要素数组 - * @param layerConfigInfo {Object} 图层配置对象 - * @param callBackInClick {function} 点击图标时执行的函数 - * @param className {String} 样式字符串 - */ - const _addFeatureArrayOnMap = function (layerName, features, layerConfigInfo, { callBackInClick = null, className = '' } = {}) { - const layers = [] - features.forEach((feature) => { - // 创建marker图层，绑定要素 - const markerLayer = L.marker([feature.lon, feature.lat], { - icon: MapStyle.featureIcon(layerConfigInfo), - attribution: feature - }) - markerLayer.layerConfigInfo = layerConfigInfo - markerLayer.on('click', function (e) { - const layerConfigInfo = e.sourceTarget.layerConfigInfo - const location = [e.latlng.lat, e.latlng.lng] - const latlng = L.latLng(location) - const data = e.sourceTarget.options.attribution - if (callBackInClick) { - callBackInClick(data) - } - const responseData = { - layerConfigInfo: layerConfigInfo, - entityData: data, - allMapObject: { mapObj: mapObj } - } - const elementHtml = createGeneralPopup(responseData) - L.popup({ className: className }) - .setLatLng(latlng) - .setContent(elementHtml) - .openOn(map) - }) - layers.push(markerLayer) - }) - const markerGroup = L.layerGroup(layers) - featureGroup.addLayer(markerGroup) - layerGroup.set(layerName, markerGroup) - } - /** - * 已知经纬度，根据数据对象添加要素到地图上，并且可瞬间点位该坐标 - * @param layerName {String}图层名字 - * @param point {Array} 经纬度数组形式 - * @param data {Object} 实体对象 - * @param layerConfigInfo {Object} 图层配置信息 - * @param popupFlag {Boolean} 判断是否直接打开弹窗 - * @param popupType {String} 弹窗类型 - * @param className {String} class名字 - */ - const _addTheOneFeatureOnMapByPoint = function (layerName, point, data, layerConfigInfo, - { popupFlag = true, popupType = 'general', className = '' } = {}) { - // 创建marker图层，绑定要素 - // debugger; - const markerLayer = L.marker(point, { icon: MapStyle.featureIcon(layerConfigInfo) }) - const latLng = markerLayer.getLatLng() - featureGroup.addLayer(markerLayer) - layerGroup.set(layerName, markerLayer) - if (data !== '') { - const responseData = { - layerConfigInfo: layerConfigInfo, - entityData: data, - allMapObject: { mapObj: mapObj } - } - let elementHtml = '' - if (popupType === 'gudEvn') { - elementHtml = createGudEvnPopup(responseData) - } else if (popupType === 'storage') { - elementHtml = createStorageAndGoodsPopup(responseData) - } else { - elementHtml = createGeneralPopup(responseData) - } - // 对事件点设置单击事件，展示弹窗内容 - if (popupFlag) { - markerLayer.bindPopup(elementHtml, { className: className }).openPopup() - } else { - markerLayer.on('click', function () { - L.popup({ className: className }) - .setLatLng(latLng) - .setContent(elementHtml) - .openOn(map) }) - } + featureService.editFeatures(addFeatureParams, (serviceResult) => { + if (serviceResult.result.succeed) { + console.log('添加超图库成功') + } + }) } - map.flyTo(latLng, 10, { duration: 0.15 }) - } - - /** - * 根据图层对象直接定位并直接弹出弹窗 - * @param layer {Object} 图层对象 - * @param contentHTML {HTML Element} Dom对象 - * @param className {String} 类名字 - * */ - function _locationAndCreatePopup(layer, contentHTML, { className = '' } = {}) { - // 生成弹窗内容 - const latLng = layer.getLatLng() - map.flyTo(latLng, 13, { duration: 0.3 }) - layer.bindPopup(contentHTML, { className: className }).openPopup() - } - /** - * @description: 视角移动 - * @param {*} latLng {lat: , lng } - * @param {*} zoom zoom - * @param {*} duration duration - * @return {*} - */ - function _mapFlyTo(latLng, zoom, duration) { - console.log('ee', latLng, zoom, duration) - map.flyTo(latLng, zoom || 15, { duration: duration || 0.15 }) - } - /** - * @description: 展示视频资源点位 大华点击弹窗播放视频 - * @param {*} inconConfig - * @param {*} dataList - * @return {*} - */ - function _showVideoOnMap(inconConfig, layerName, dataList, DS) { - _removeLayerByLayerName(layerName) - const markers = L.markerClusterGroup() - dataList.map(item => { - const point = { - lat: item.latitude, - lng: item.longitude - } - const icon = MapStyle.featureIcon(inconConfig) - const markerLayer = L.marker(point, { icon: icon }) - markers.addLayer(markerLayer) - markerLayer.on('click', function () { - console.log('积水点播放视频', item) - item.indexCode = item.indexCode || item.index_code - const params = [item.indexCode] - DS.openVideo(params) - }) - }) - featureGroup.clearLayers() - // const markerGroup = L.layerGroup(markers); - featureGroup.addLayer(markers) - // layerGroup.set(layerName, markerGroup); - } - /** - * 根据UUID数组加载图层 - * @param uuidArray {Array} uuid数组 - * @param layerName {String} 图层名称 - * @param configInfo {Object} 图层的配置信息对象 - * @param getLayerPopupInfo {Function} 图层弹窗回调函数 - * @param outFeaturesCallBack {Function} 输出经过超图查询的数据对象数组 - * @param getStoragePopupInfo {Function} 物资弹窗 - * @param entityList {Array} 与uuidArray相对应的实体数组，用于输出用（可选） - * @param searchKey {String} 搜索关键字--主要用于物资的搜索 - */ - function _showLayersByUuidArray(uuidArray, layerName, configInfo, { outFeaturesCallBack = null, getLayerPopupInfo = null, getStoragePopupInfo = null, entityList = null, searchKey = '' } = {}) { - let authorityFilter = '' - // 当UUID的个数小于1000时 - if (uuidArray.length <= 1000) { - const authorityFilter1 = "'" + uuidArray.join("','") + "'" - authorityFilter = 'UUID in (' + authorityFilter1 + ')' - } else { // 当UUID的个数大于1000 - const count = Math.floor(uuidArray.length / 1000) // 向下取整 - for (let i = 0; i <= count; i++) { - const uuidSplice = uuidArray.slice(i * 1000, (i + 1) * 1000) - const authorityFilterString = "'" + uuidSplice.join("','") + "'" - const authorityFilterSplice = 'UUID in (' + authorityFilterString + ')' - if (i === 0) { // 第一次拼接时，不需要Or - authorityFilter = authorityFilterSplice - } else { // 第N次拼接时，需要Or - authorityFilter = authorityFilter + ' or ' + authorityFilterSplice - } - } - } - const queryUrl = _mapConfig.config.QUERY_URL - const sqlParam = new SuperMap.QueryBySQLParameters({ - queryParams: { - name: configInfo.layerName, - attributeFilter: authorityFilter - } - }) - L.supermap - .queryService(queryUrl) - .queryBySQL(sqlParam, (serviceResult) => { - if (outFeaturesCallBack !== null) { - // outFeaturesCallBack(serviceResult,layerName,entityList); - outFeaturesCallBack(serviceResult, layerName, entityList, configInfo) - } - const resultLayerConfig = L.geoJSON(serviceResult.result.recordsets[0].features, { - onEachFeature: (feature, layer) => { - layer.setIcon(MapStyle.featureIcon(configInfo, { zoom: map._zoom })) - layer.title = layerName - layer.configInfo = configInfo - layer.on('click', function (e) { - // const uuid = e.sourceTarget.feature.properties.UUID; - const uuid = e.sourceTarget.feature.properties[_convertCaseOfAttributes('UUID')] - const layerConfigInfo = e.sourceTarget.configInfo - const location = [e.latlng.lat, e.latlng.lng] - const latlng = L.latLng(location) - // 绑定通用弹窗事件，实时请求弹窗内容 - if (getLayerPopupInfo !== null) { - getLayerPopupInfo(uuid, layerConfigInfo).then((response) => { - response.allMapObject = { - mapObj: mapObj - } - const elementHtml = createGeneralPopup(response) - L.popup({ className: 'multi-general-popup-style' }) - .setLatLng(latlng) - .setContent(elementHtml) - .openOn(map) + /** + * 资源模块中删除资源 + * @param UUID {String} 需要删除的uuid + * @param layerConfigInfo {Object} 图层配置对象 + */ + function _deleteResourceFeature(UUID, layerConfigInfo) { + const authorityFilter = `UUID = '${UUID}'` // 此处需要传参替换 + const queryUrl = _mapConfig.config.QUERY_URL + const name = layerConfigInfo.layerName + const dataSource = name.split('@') + const sqlParam = new SuperMap.QueryBySQLParameters({ + queryParams: { + name: name, + attributeFilter: authorityFilter + } + }) + L.supermap + .queryService(queryUrl) + .queryBySQL(sqlParam, (serviceResult) => { + serviceResult.result.recordsets.forEach((value) => { + value.features.features.forEach((feature) => { + const deleteParams = new SuperMap.EditFeaturesParameters({ + dataSourceName: dataSource[1], + dataSetName: dataSource[0], + IDs: [feature.id], + editType: 'delete' + }) + featureService.editFeatures(deleteParams, (serviceResult) => { + if (serviceResult.result.succeed) { + console.log('删除数据成功') + } + }) + }) }) - } - if (getStoragePopupInfo !== null) { - getStoragePopupInfo(uuid, layerConfigInfo, searchKey).then((response) => { - response.allMapObject = { - mapObj: mapObj - } - const elementHtml = createStorageAndGoodsPopup(response) - L.popup({ className: 'multi-general-popup-style' }) - .setLatLng(latlng) - .setContent(elementHtml) - .openOn(map) - }) - } }) - } - }) - _removeLayerByLayerName(layerName) - featureGroup.addLayer(resultLayerConfig) - layerGroup.set(layerName, resultLayerConfig) - }) - } - - /** - * 根据cameraIndexCode加载视频图层（普通定位，非聚合使用） - * @param cameraIndexCode {Array} cameraIndexCode数组 - * @param layerName {String} 图层名称 - * @param configInfo {Object} 图层的配置信息对象 - * @param getLayerPopupInfo {Function} 获取弹窗信息的方法 - * @param outFeaturesCallBack {Function} 输出经过超图查询的数据对象数组 - * @param entityList {Array} 与uuidArray相对应的实体数组，用于输出用（可选） - */ - function _showCameraByIndexCodeArray(cameraIndexCode, layerName, configInfo, { getLayerPopupInfo = null, outFeaturesCallBack = null, entityList = null } = {}) { - let authorityFilter = '' - if (cameraIndexCode.length <= 1000) { - const authorityFilterStr = "'" + cameraIndexCode.join("','") + "'" - authorityFilter = 'CAMERA_INDEX_CODE in (' + authorityFilterStr + ')' - } else { - const count = Math.floor(cameraIndexCode.length / 1000) // 向下取整 - for (var i = 0; i <= count; i++) { - const cameraIndexCodeSplice = cameraIndexCode.slice(i * 1000, (i + 1) * 1000) - const authorityFilterString = "'" + cameraIndexCodeSplice.join("','") + "'" - const authorityFilterSplice = 'CAMERA_INDEX_CODE in (' + authorityFilterString + ')' - if (i === 0) { // 第一次拼接时，不需要Or - authorityFilter = authorityFilterSplice - } else { // 第N次拼接时，需要Or - authorityFilter = authorityFilter + ' or ' + authorityFilterSplice - } - } } - const queryUrl = _mapConfig.config.QUERY_URL - const reservoirParam = new SuperMap.QueryBySQLParameters({ - queryParams: { - // name: configInfo.datasetNames, - name: configInfo.layerName, - attributeFilter: authorityFilter - } - }) - L.supermap - .queryService(queryUrl) - .queryBySQL(reservoirParam, function (serviceResult) { - // if (serviceResult.result.recordsets[0].features.features.length === 0) { - // console.log('未查询到视频'); - // return; - // } - if (outFeaturesCallBack !== null) { - // outFeaturesCallBack(serviceResult,layerName,entityList); - outFeaturesCallBack(serviceResult, layerName, entityList, configInfo) + /** + * 资源模块中更新资源 + * @param features {Object} 需要跟新的features + * @param layerConfigInfo {Object} 图层配置对象 + */ + function _updateResourceFeature(features, layerConfigInfo) { + const authorityFilter = `UUID = '${features.UUID}'` + const queryUrl = _mapConfig.config.QUERY_URL + const name = layerConfigInfo.layerName + const dataSource = name.split('@') + const sqlParam = new SuperMap.QueryBySQLParameters({ + queryParams: { + name: name, + attributeFilter: authorityFilter + } + }) + L.supermap + .queryService(queryUrl) + .queryBySQL(sqlParam, function(serviceResult) { + console.log('serviceResult', serviceResult.result) + if (serviceResult.result.recordsets[0].features.features.length === 0) { + let marker = {} + marker = L.marker([features.SmY, features.SmX]) + marker = marker.toGeoJSON() + marker.properties = { UUID: features.UUID } + const addFeatureParams = new SuperMap.EditFeaturesParameters({ + dataSourceName: dataSource[1], + dataSetName: dataSource[0], + features: marker, + editType: 'add', + returnContent: true + }) + featureService.editFeatures(addFeatureParams, (serviceResult) => { + if (serviceResult.result.succeed) { + console.log('更新超图库成功') + } + }) + } else { + const feature = serviceResult.result.recordsets[0].features.features[0] + feature.geometry.coordinates[0] = features.SmX + feature.geometry.coordinates[1] = features.SmY + const updateParams = new SuperMap.EditFeaturesParameters({ + dataSourceName: dataSource[1], + dataSetName: dataSource[0], + features: feature, + editType: 'update' + }) + featureService.editFeatures(updateParams, (serviceResult) => { + if (serviceResult.result.succeed) { + console.log('更新成功') + } + }) + } + }) + } + + /** + * 扎点后弹出弹窗的通用方法 + * @param e {Object} marker对象 + */ + function _drawMarkerPopupUniversalFun(e) { + if (e.layerType === 'marker') { + featureGroup.addLayer(e.layer) + layerGroup.set('drawMarkerLayer', e.layer) + mapObj.currentSelectedPoint = { + lat: e.layer._latlng.lat, + lng: e.layer._latlng.lng + } + // 设置bindPopup弹窗内容，通过传入Element对象 + const info = { + 纬度: mapObj.currentSelectedPoint.lat, + 经度: mapObj.currentSelectedPoint.lng + } + var popupContent = createDrawMarkerPopupHtml(info) + layerGroup.get('drawMarkerLayer').bindPopup(popupContent).openPopup() } - const searchCameraLayer = L.geoJSON(serviceResult.result.recordsets[0].features, { - onEachFeature: (feature, layer) => { - layer.setIcon(MapStyle.featureIcon(configInfo)) - layer.configInfo = configInfo - // 给查询出的每一个点添加点击弹窗事件 - // 绑定弹窗事件，实时请求弹窗内容 - if (getLayerPopupInfo !== null) { - layer.on('click', function (e) { - const indexCode = e.sourceTarget.feature.properties[_convertCaseOfAttributes('CAMERA_INDEX_CODE')] - const layerConfigInfo = e.sourceTarget.configInfo + } + /** + * @description: 通过点位在地图上留下标记 + * @param {*} e point数据 + * @return {*} + */ + function _drawMarkerThroughPoint(e, callback, click) { + const myIcon = L.icon({ + iconUrl: './src/assets/map/button/button-map-location.png', + iconSize: [35, 35] + }) + const options = { + icon: myIcon, + draggable: true, + autoPan: true + } + const layer = L.marker([e.layer._latlng.lat, e.layer._latlng.lng], options).addTo(mapObj.map) + layer.on('moveend', function(e) { + callback(e) + }) + layer.on('click', function(e) { + layer.remove() + mapObj.drawMarker.enable() + }) + } + /** + * @description: 改变marker提示语 + * @param {*} tooltip 提示语 + * @return {*} + */ + function _changeMarkerTooltip(tooltip) { + L.drawLocal.draw.handlers.marker.tooltip.start = tooltip + } + /** + * 构造drawMarker弹窗内容 + * @param data {object} 传入的实体对象 + */ + function createDrawMarkerPopupHtml(data) { + const contentHTML = document.createElement('div') + const firstDiv = document.createElement('div') + const secondDiv = document.createElement('div') + const thirdDiv = document.createElement('div') + const titleDiv = document.createElement('div') + const btnDiv = document.createElement('div') + const titleContent = document.createTextNode('详细信息') + titleDiv.className = 'map-pop-title' + // titleDiv.style.cssText = "width: 100%;height: 30px;background: #04B2BF;padding-top: 5px;padding-left: 10px;"; + titleDiv.appendChild(titleContent) + contentHTML.appendChild(titleDiv) + btnDiv.style.cssText = 'width: 100%;height: 30px;' + // 弹窗高度 + let lineCount = 0 + // 最大宽度，判断每行字符串，超过按照最大宽度设定 + let contentWidth = 0 + // 累加行数，计算每行宽度 + const calc = function(str) { + const tempLength = getDoubleCharCount(str) * 18 + getSingleCharCount(str) * 10 + if (tempLength >= 450) { + contentWidth = 450 + lineCount += Math.ceil(tempLength / 434) // 450-8-8,除去padding + } else { + if (tempLength > contentWidth) { + contentWidth = tempLength + } + lineCount += 1 + } + } + Object.keys(data).forEach((key) => { + let lineContent = null + if (data[key] !== null) { + lineContent = key + ':' + data[key] + } else { + lineContent = key + ':' + '无' + } + calc(lineContent) + firstDiv.className = 'popupwindow' + const content = document.createTextNode(lineContent) + const br = document.createElement('br') + firstDiv.appendChild(content) + firstDiv.appendChild(br) + }) + if (lineCount <= 6) { + secondDiv.style.cssText = 'max-width:450px;word-break: break-all' + secondDiv.appendChild(firstDiv) + contentHTML.appendChild(secondDiv) + } else { + thirdDiv.style.cssText = 'height:164px;overflow-y: auto;max-width:450px;word-break: break-all' + thirdDiv.appendChild(firstDiv) + contentHTML.appendChild(thirdDiv) + } + const notarizeBtn = document.createElement('div') + const cancelBtn = document.createElement('div') + const notarizeContent = document.createTextNode('确认') + const cancelContent = document.createTextNode('取消 ') + notarizeBtn.appendChild(notarizeContent) + notarizeBtn.style.cssText = 'float: left;width: 50px;margin-left:65px;background-color:#00afda;cursor: pointer;text-align: center;margin-left: 23%;' + notarizeBtn.onclick = saveMarkerCallBack + cancelBtn.appendChild(cancelContent) + cancelBtn.onclick = resetMarkerCallBack + cancelBtn.style.cssText = 'float: left;width: 50px;background-color:#00afda;margin-left:15px;cursor: pointer;text-align: center;' + + btnDiv.appendChild(notarizeBtn) + btnDiv.appendChild(cancelBtn) + contentHTML.appendChild(btnDiv) + return contentHTML + } + + /** + * 取消扎点回调 + */ + const resetMarkerCallBack = function() { + _removeLayerByLayerName('drawMarkerLayer') + layerGroup.delete('drawMarkerLayer') + mapObj.drawMarker.enable() + } + + function _addImgMaker(latLng, inconConfig) { + const icon = MapStyle.featureIcon(inconConfig) + const markerLayer = L.marker([latLng.lat, latLng.lng], { + icon: icon + }) + featureGroup.addLayer(markerLayer) + } + /** + * 保存扎点信息的通用方法 + */ + function saveMarkerCallBack() { + externalFunGlobalObject.saveLocationFun() + } + /** + * 查看是否扎点 + * @param UUID {String} 本地与超图关联字段 + * @param layerName {String} 配置图层名 + * @param layerConfigInfo {Object} 自定义的图层配置信息对象 + */ + + function _hasLocationInfo(UUID, layerName, layerConfigInfo) { + const authorityFilter = `UUID = '${UUID}'` + const queryUrl = _mapConfig.config.QUERY_URL + const name = layerConfigInfo.layerName + const sqlParam = new SuperMap.QueryBySQLParameters({ + queryParams: { + name: name, + attributeFilter: authorityFilter + } + }) + L.supermap + .queryService(queryUrl) + .queryBySQL(sqlParam, (serviceResult) => { + isLocated = serviceResult.result.recordsets[0].features.features.length === 0 + }) + } + + function _getLocale() { + return isLocated + } + /** + * 构造弹窗内容 + * @param data {object} 传入的实体对象 + */ + function createPopupHtml(data) { + const contentHTML = document.createElement('div') + const firstDiv = document.createElement('div') + const secondDiv = document.createElement('div') + const thirdDiv = document.createElement('div') + const titleDiv = document.createElement('div') + const titleContent = document.createTextNode('详细信息') + titleDiv.className = 'map-pop-title' + // titleDiv.style.cssText = "width: 100%;height: 30px;background: #04B2BF;"; + titleDiv.appendChild(titleContent) + contentHTML.appendChild(titleDiv) + // 弹窗高度 + let lineCount = 0 + // 最大宽度，判断每行字符串，超过按照最大宽度设定 + let contentWidth = 0 + // 累加行数，计算每行宽度 + const calc = function(str) { + const tempLength = getDoubleCharCount(str) * 18 + getSingleCharCount(str) * 10 + if (tempLength >= 450) { + contentWidth = 450 + lineCount += Math.ceil(tempLength / 434) // 450-8-8,除去padding + } else { + if (tempLength > contentWidth) { + contentWidth = tempLength + } + lineCount += 1 + } + } + Object.keys(data).forEach((key) => { + let lineContent = null + if (data[key]) { + lineContent = key + '：' + data[key] + } else { + lineContent = key + '：' + '无' + } + calc(lineContent) + firstDiv.className = 'popupwindow' + const content = document.createTextNode(lineContent) + const br = document.createElement('br') + firstDiv.appendChild(content) + firstDiv.appendChild(br) + }) + + if (lineCount <= 6) { + secondDiv.style.cssText = 'padding: 8px;max-width:450px;word-break: break-all' + secondDiv.appendChild(firstDiv) + contentHTML.appendChild(secondDiv) + } else { + thirdDiv.style.cssText = 'height:164px;overflow-y: auto;padding: 8px;max-width:450px;word-break: break-all' + thirdDiv.appendChild(firstDiv) + contentHTML.appendChild(secondDiv) + } + return contentHTML + } + /** + * 切换地图 + * @param mapType {String} 类型 + */ + function _changeMap(mapType) { + var tileMapUrl = '' + if (mapType === 'tiled') { + tileMapUrl = _mapConfig.config.TITLE_LAYER.mapUrl + } else if (mapType === 'remote') { + tileMapUrl = _mapConfig.config.TITLE_LAYER_REMOTE.mapUrl + } else if (mapType === 'dark') { + tileMapUrl = _mapConfig.config.TITLE_LAYER_DARK.mapUrl + } + mapObj.map.eachLayer(function(layer) { + if (layer.tempIndex === -1) { + mapObj.map.removeLayer(layer) + L.supermap.tiledMapLayer(tileMapUrl).addTo(mapObj.map) + } + }) + } + /** + * @description: ZXY渲染百度地图 底图切换 + * @param {*} mapType 切换底图类型 + * @return {*} + */ + function _ZXYRenderMapSwitch(mapType) { + const config = _mapConfig.config.TILEDCONFIG[mapType] + const layerConfig = { url: config.tiledUrl, name: config.tiledName } + const newTileLayer = new L.tileLayer.baidu(layerConfig) + mapObj.map.eachLayer(function(layer) { + if (layer.options.tms === true) { + mapObj.map.removeLayer(layer) + newTileLayer.addTo(mapObj.map) + } + }) + } + + /** + * 地图根据Feature数组添加点位信息 + * @param layerName {String} 图层名字 + * @param features {Array} 地图要素数组 + * @param layerConfigInfo {Object} 图层配置对象 + * @param callBackInClick {function} 点击图标时执行的函数 + * @param className {String} 样式字符串 + */ + const _addFeatureArrayOnMap = function(layerName, features, layerConfigInfo, { callBackInClick = null, className = '' } = {}) { + const layers = [] + features.forEach((feature) => { + // 创建marker图层，绑定要素 + const markerLayer = L.marker([feature.lon, feature.lat], { + icon: MapStyle.featureIcon(layerConfigInfo), + attribution: feature + }) + markerLayer.layerConfigInfo = layerConfigInfo + markerLayer.on('click', function(e) { + const layerConfigInfo = e.sourceTarget.layerConfigInfo + const location = [e.latlng.lat, e.latlng.lng] + const latlng = L.latLng(location) + const data = e.sourceTarget.options.attribution + if (callBackInClick) { + callBackInClick(data) + } + const responseData = { + layerConfigInfo: layerConfigInfo, + entityData: data, + allMapObject: { mapObj: mapObj } + } + const elementHtml = createGeneralPopup(responseData) + L.popup({ className: className }) + .setLatLng(latlng) + .setContent(elementHtml) + .openOn(map) + }) + layers.push(markerLayer) + }) + const markerGroup = L.layerGroup(layers) + featureGroup.addLayer(markerGroup) + layerGroup.set(layerName, markerGroup) + } + /** + * 已知经纬度，根据数据对象添加要素到地图上，并且可瞬间点位该坐标 + * @param layerName {String}图层名字 + * @param point {Array} 经纬度数组形式 + * @param data {Object} 实体对象 + * @param layerConfigInfo {Object} 图层配置信息 + * @param popupFlag {Boolean} 判断是否直接打开弹窗 + * @param popupType {String} 弹窗类型 + * @param className {String} class名字 + */ + const _addTheOneFeatureOnMapByPoint = function(layerName, point, data, layerConfigInfo, { popupFlag = true, popupType = 'general', className = '' } = {}) { + // 创建marker图层，绑定要素 + // debugger; + const markerLayer = L.marker(point, { icon: MapStyle.featureIcon(layerConfigInfo) }) + const latLng = markerLayer.getLatLng() + featureGroup.addLayer(markerLayer) + layerGroup.set(layerName, markerLayer) + if (data !== '') { + const responseData = { + layerConfigInfo: layerConfigInfo, + entityData: data, + allMapObject: { mapObj: mapObj } + } + let elementHtml = '' + if (popupType === 'gudEvn') { + elementHtml = createGudEvnPopup(responseData) + } else if (popupType === 'storage') { + elementHtml = createStorageAndGoodsPopup(responseData) + } else { + elementHtml = createGeneralPopup(responseData) + } + // 对事件点设置单击事件，展示弹窗内容 + if (popupFlag) { + markerLayer.bindPopup(elementHtml, { className: className }).openPopup() + } else { + markerLayer.on('click', function() { + L.popup({ className: className }) + .setLatLng(latLng) + .setContent(elementHtml) + .openOn(map) + }) + } + } + map.flyTo(latLng, 10, { duration: 0.15 }) + } + + /** + * 根据图层对象直接定位并直接弹出弹窗 + * @param layer {Object} 图层对象 + * @param contentHTML {HTML Element} Dom对象 + * @param className {String} 类名字 + * */ + function _locationAndCreatePopup(layer, contentHTML, { className = '' } = {}) { + // 生成弹窗内容 + const latLng = layer.getLatLng() + map.flyTo(latLng, 13, { duration: 0.3 }) + layer.bindPopup(contentHTML, { className: className }).openPopup() + } + /** + * @description: 视角移动 + * @param {*} latLng {lat: , lng } + * @param {*} zoom zoom + * @param {*} duration duration + * @return {*} + */ + function _mapFlyTo(latLng, zoom, duration) { + console.log('ee', latLng, zoom, duration) + map.flyTo(latLng, zoom || 15, { duration: duration || 0.15 }) + } + /** + * @description: 展示视频资源点位 大华点击弹窗播放视频 + * @param {*} inconConfig + * @param {*} dataList + * @return {*} + */ + function _showVideoOnMap(inconConfig, layerName, dataList, DS) { + _removeLayerByLayerName(layerName) + const markers = L.markerClusterGroup() + dataList.map(item => { + const point = { + lat: item.latitude, + lng: item.longitude + } + const icon = MapStyle.featureIcon(inconConfig) + const markerLayer = L.marker(point, { icon: icon }) + markers.addLayer(markerLayer) + markerLayer.on('click', function() { + console.log('积水点播放视频', item) + item.indexCode = item.indexCode || item.index_code + const params = [item.indexCode] + DS.openVideo(params) + }) + }) + featureGroup.clearLayers() + // const markerGroup = L.layerGroup(markers); + featureGroup.addLayer(markers) + // layerGroup.set(layerName, markerGroup); + } + /** + * 根据UUID数组加载图层 + * @param uuidArray {Array} uuid数组 + * @param layerName {String} 图层名称 + * @param configInfo {Object} 图层的配置信息对象 + * @param getLayerPopupInfo {Function} 图层弹窗回调函数 + * @param outFeaturesCallBack {Function} 输出经过超图查询的数据对象数组 + * @param getStoragePopupInfo {Function} 物资弹窗 + * @param entityList {Array} 与uuidArray相对应的实体数组，用于输出用（可选） + * @param searchKey {String} 搜索关键字--主要用于物资的搜索 + */ + function _showLayersByUuidArray(uuidArray, layerName, configInfo, { outFeaturesCallBack = null, getLayerPopupInfo = null, getStoragePopupInfo = null, entityList = null, searchKey = '' } = {}) { + let authorityFilter = '' + // 当UUID的个数小于1000时 + if (uuidArray.length <= 1000) { + const authorityFilter1 = "'" + uuidArray.join("','") + "'" + authorityFilter = 'UUID in (' + authorityFilter1 + ')' + } else { // 当UUID的个数大于1000 + const count = Math.floor(uuidArray.length / 1000) // 向下取整 + for (let i = 0; i <= count; i++) { + const uuidSplice = uuidArray.slice(i * 1000, (i + 1) * 1000) + const authorityFilterString = "'" + uuidSplice.join("','") + "'" + const authorityFilterSplice = 'UUID in (' + authorityFilterString + ')' + if (i === 0) { // 第一次拼接时，不需要Or + authorityFilter = authorityFilterSplice + } else { // 第N次拼接时，需要Or + authorityFilter = authorityFilter + ' or ' + authorityFilterSplice + } + } + } + const queryUrl = _mapConfig.config.QUERY_URL + const sqlParam = new SuperMap.QueryBySQLParameters({ + queryParams: { + name: configInfo.layerName, + attributeFilter: authorityFilter + } + }) + L.supermap + .queryService(queryUrl) + .queryBySQL(sqlParam, (serviceResult) => { + if (outFeaturesCallBack !== null) { + // outFeaturesCallBack(serviceResult,layerName,entityList); + outFeaturesCallBack(serviceResult, layerName, entityList, configInfo) + } + const resultLayerConfig = L.geoJSON(serviceResult.result.recordsets[0].features, { + onEachFeature: (feature, layer) => { + layer.setIcon(MapStyle.featureIcon(configInfo, { zoom: map._zoom })) + layer.title = layerName + layer.configInfo = configInfo + layer.on('click', function(e) { + // const uuid = e.sourceTarget.feature.properties.UUID; + const uuid = e.sourceTarget.feature.properties[_convertCaseOfAttributes('UUID')] + const layerConfigInfo = e.sourceTarget.configInfo + const location = [e.latlng.lat, e.latlng.lng] + const latlng = L.latLng(location) + // 绑定通用弹窗事件，实时请求弹窗内容 + if (getLayerPopupInfo !== null) { + getLayerPopupInfo(uuid, layerConfigInfo).then((response) => { + response.allMapObject = { + mapObj: mapObj + } + const elementHtml = createGeneralPopup(response) + L.popup({ className: 'multi-general-popup-style' }) + .setLatLng(latlng) + .setContent(elementHtml) + .openOn(map) + }) + } + if (getStoragePopupInfo !== null) { + getStoragePopupInfo(uuid, layerConfigInfo, searchKey).then((response) => { + response.allMapObject = { + mapObj: mapObj + } + const elementHtml = createStorageAndGoodsPopup(response) + L.popup({ className: 'multi-general-popup-style' }) + .setLatLng(latlng) + .setContent(elementHtml) + .openOn(map) + }) + } + }) + } + }) + _removeLayerByLayerName(layerName) + featureGroup.addLayer(resultLayerConfig) + layerGroup.set(layerName, resultLayerConfig) + }) + } + + /** + * 根据cameraIndexCode加载视频图层（普通定位，非聚合使用） + * @param cameraIndexCode {Array} cameraIndexCode数组 + * @param layerName {String} 图层名称 + * @param configInfo {Object} 图层的配置信息对象 + * @param getLayerPopupInfo {Function} 获取弹窗信息的方法 + * @param outFeaturesCallBack {Function} 输出经过超图查询的数据对象数组 + * @param entityList {Array} 与uuidArray相对应的实体数组，用于输出用（可选） + */ + function _showCameraByIndexCodeArray(cameraIndexCode, layerName, configInfo, { getLayerPopupInfo = null, outFeaturesCallBack = null, entityList = null } = {}) { + let authorityFilter = '' + if (cameraIndexCode.length <= 1000) { + const authorityFilterStr = "'" + cameraIndexCode.join("','") + "'" + authorityFilter = 'CAMERA_INDEX_CODE in (' + authorityFilterStr + ')' + } else { + const count = Math.floor(cameraIndexCode.length / 1000) // 向下取整 + for (var i = 0; i <= count; i++) { + const cameraIndexCodeSplice = cameraIndexCode.slice(i * 1000, (i + 1) * 1000) + const authorityFilterString = "'" + cameraIndexCodeSplice.join("','") + "'" + const authorityFilterSplice = 'CAMERA_INDEX_CODE in (' + authorityFilterString + ')' + if (i === 0) { // 第一次拼接时，不需要Or + authorityFilter = authorityFilterSplice + } else { // 第N次拼接时，需要Or + authorityFilter = authorityFilter + ' or ' + authorityFilterSplice + } + } + } + const queryUrl = _mapConfig.config.QUERY_URL + const reservoirParam = new SuperMap.QueryBySQLParameters({ + queryParams: { + // name: configInfo.datasetNames, + name: configInfo.layerName, + attributeFilter: authorityFilter + } + }) + L.supermap + .queryService(queryUrl) + .queryBySQL(reservoirParam, function(serviceResult) { + // if (serviceResult.result.recordsets[0].features.features.length === 0) { + // console.log('未查询到视频'); + // return; + // } + if (outFeaturesCallBack !== null) { + // outFeaturesCallBack(serviceResult,layerName,entityList); + outFeaturesCallBack(serviceResult, layerName, entityList, configInfo) + } + const searchCameraLayer = L.geoJSON(serviceResult.result.recordsets[0].features, { + onEachFeature: (feature, layer) => { + layer.setIcon(MapStyle.featureIcon(configInfo)) + layer.configInfo = configInfo + // 给查询出的每一个点添加点击弹窗事件 + // 绑定弹窗事件，实时请求弹窗内容 + if (getLayerPopupInfo !== null) { + layer.on('click', function(e) { + const indexCode = e.sourceTarget.feature.properties[_convertCaseOfAttributes('CAMERA_INDEX_CODE')] + const layerConfigInfo = e.sourceTarget.configInfo + const location = [e.latlng.lat, e.latlng.lng] + const latlng = L.latLng(location) + getLayerPopupInfo(indexCode, layerConfigInfo).then((response) => { + response.allMapObject = { + mapObj: mapObj + } + const elementHtml = createGeneralPopup(response) + L.popup({ className: 'multi-general-popup-style' }) + .setLatLng(latlng) + .setContent(elementHtml) + .openOn(map) + }) + }) + } + } + }) + featureGroup.addLayer(searchCameraLayer) + layerGroup.set(layerName, searchCameraLayer) + }) + } + /** + * 根据数据库类型对属性进行大小写转换 + * @param attribute + * @returns {*} + */ + function _convertCaseOfAttributes(attribute) { + if (_mapConfig.config.DATABASE_TYPE === 'Oracle') { + return attribute.toUpperCase() + } else if (_mapConfig.config.DATABASE_TYPE === 'Highgo') { + return attribute.toLowerCase() + } + } + + /** + * 地址匹配正向匹配 + * @param address 地址 + * @param fromIndex 设置返回对象的起始索引值 + * @param toIndex 设置返回对象的结束索引值 + * @param filters 过滤字段，限定查询区域 + * @param prjCoordSys 查询结果的坐标系 + * @param maxReturn 最大返回结果数 + * @param outAddressCallBack 输出查询结果的回调函数 + * @param param outAddressCallBack函数所需要接收的参数 + * @private + */ + function _addressMatchCode(address, { fromIndex = null, toIndex = null, filters = null, prjCoordSys = null, maxReturn = null, outAddressCallBack = null, param = null } = {}) { + const geoCodeParam = new SuperMap.GeoCodingParameter({ + address: address, + fromIndex: fromIndex, + toIndex: toIndex, + filters: filters, + prjCoordSys: prjCoordSys, + maxReturn: maxReturn + }) + L.supermap.addressMatchService(_mapConfig.config.POI_URL).code(geoCodeParam, function(addressObj) { + if (outAddressCallBack) { + outAddressCallBack(addressObj, param) + } + }) + } + /** + * 测量距离 + * */ + function _measureingLine() { + // 修改控件提示 + L.drawLocal.draw.handlers.polyline.tooltip.start = '单击开始绘制线' + L.drawLocal.draw.handlers.polyline.tooltip.cont = '单击继续绘制线' + L.drawLocal.draw.handlers.polyline.tooltip.end = '点击最后一点到终点' + // 开启画线控件 + mapObj.drawPolyline.enable() + map.once('draw:created', (e) => { + const type = e.layerType + const distancePolylineLayer = e.layer + if (type === 'polyline') { // 使用polyline时 + featureGroup.addLayer(distancePolylineLayer) // 将扎点的图层添加到地图上 + layerGroup.set('distancePolylineLayer', distancePolylineLayer) + const distanceMeasureParam = new SuperMap.MeasureParameters(distancePolylineLayer) + L.supermap + .measureService(_mapConfig.config.QUERY_URL) + .measureDistance(distanceMeasureParam, function(serviceResult) { + const message = `总距离： ${serviceResult.result.distance.toFixed(4)} 米` + const elementHtml = createDistanceAndAreaPopup(message) + // const aa = `
总距离：${ serviceResult.result.distance} 米
` + distancePolylineLayer.bindPopup(elementHtml, { className: 'multi-distance-and-area-popup-style' }).openPopup(distancePolylineLayer._latlngs[0]) + }) + } + }) + } + + /** + * 测量面积 + * */ + function _measureingArea() { + // 修改控件提示 + L.drawLocal.draw.handlers.polygon.tooltip.start = '单击开始绘制形状' + L.drawLocal.draw.handlers.polygon.tooltip.cont = '单击继续绘制形状' + L.drawLocal.draw.handlers.polygon.tooltip.end = '单击第一个点以关闭此形状' + // 开启画多边形控件 + mapObj.drawPolygon.enable() + map.once('draw:created', (e) => { + const type = e.layerType + const areaPolygonLayer = e.layer + if (type === 'polygon') { // 使用polygon时 + featureGroup.addLayer(areaPolygonLayer) + layerGroup.set('areaPolygonLayer', areaPolygonLayer) + const areaMeasureParam = new SuperMap.MeasureParameters(areaPolygonLayer) + L.supermap + .measureService(_mapConfig.config.QUERY_URL) + .measureArea(areaMeasureParam, function(serviceResult) { + const message = `总面积： ${serviceResult.result.area.toFixed(4)} 平方米` + const elementHtml = createDistanceAndAreaPopup(message) + // const content = '总面积：' + serviceResult.result.area + '平方米'; + areaPolygonLayer.bindPopup(elementHtml, { className: 'multi-distance-and-area-popup-style' }).openPopup(areaPolygonLayer.getCenter()) + }) + } + }) + } + /** + * 绘制线 + * */ + function _drawingLine(callback) { + // 修改控件提示 + L.drawLocal.draw.handlers.polyline.tooltip.start = '单击开始绘制线' + L.drawLocal.draw.handlers.polyline.tooltip.cont = '单击继续绘制线' + L.drawLocal.draw.handlers.polyline.tooltip.end = '点击最后一点到终点' + // 开启画线控件 + mapObj.drawPolyline.enable() + map.once('draw:created', (e) => { + const type = e.layerType + console.log(e) + const distancePolylineLayer = e.layer + if (type === 'polyline') { // 使用polyline时 + featureGroup.addLayer(distancePolylineLayer) // 将扎点的图层添加到地图上 + featureGroup.addTo(map) + console.log('distancePolylineLayer', distancePolylineLayer) + callback(distancePolylineLayer._latlngs) + // const distanceMeasureParam = new SuperMap.MeasureParameters(distancePolylineLayer); + // L.supermap + // .measureService(_mapConfig.config.QUERY_URL) + // .measureDistance(distanceMeasureParam, function(serviceResult) { + // const message = `总距离： ${serviceResult.result.distance.toFixed(4)} 米`; + // const elementHtml = createDistanceAndAreaPopup(message); + // // const aa = `
总距离：${ serviceResult.result.distance} 米
` + // distancePolylineLayer.bindPopup(elementHtml, { className: 'multi-distance-and-area-popup-style' }).openPopup(distancePolylineLayer._latlngs[0]); + // }); + } + }) + } + /** + * 根据点位数据绘制线 + * */ + function _drawingLineByData(latlngs, callback, config) { + let type = 'default' + if (config && config.resType && config.secondType) { + type = config.resType + config.secondType + } + let polyline = '' // 主线 + let polyline1 = '' // 辅助线1 + let polyline2 = '' // 辅助线2 + const decorator = '' + switch (type) { + case 'fireRoad': + // 路网 + polyline = L.polyline.antPath(latlngs, { + delay: 400, + dashArray: [ + 10, + 20 + ], + weight: 5, + color: '#2bbd91', + pulseColor: '#8bffa9', + paused: true, + reverse: false, + hardwareAccelerated: true + }) + break + case 'fireBreak1': + // 隔离网 + polyline = L.polyline(latlngs, { weight: 14, color: '#22ac38', opacity: 0.54 }) + polyline1 = L.polyline(latlngs, { weight: 2, offset: 6, className: 'fire-break-1', color: '#90ffa2' }) + polyline2 = L.polyline(latlngs, { weight: 2, offset: -6, className: 'fire-break-1', color: '#90ffa2' }) + polyline1.addTo(map) + polyline2.addTo(map) + // decorator = L.polylineDecorator(polyline, { + // patterns: [ + // // defines a pattern of 10px-wide dashes, repeated every 20px on the line + // {offset: 0, repeat: 20, symbol: L.Symbol.dash({pixelSize: 10})} + // ] + // }).addTo(map); + break + case 'fireBreak2': + // 防火隔离带 + polyline = L.polyline(latlngs, { weight: 14, color: '#00aeca', opacity: 0.54 }) + polyline1 = L.polyline(latlngs, { weight: 2, offset: 6, className: 'fire-break-1', color: '#9df2ff' }) + polyline2 = L.polyline(latlngs, { weight: 2, offset: -6, className: 'fire-break-1', color: '#9df2ff' }) + polyline1.addTo(map) + polyline2.addTo(map) + break + default: + polyline = L.polyline(latlngs, { color: 'red' }) + } + + if (callback) { + callback(polyline._latlngs) + } + // polyline.on('mouseover', e => { + // console.log('图标点击e', e); + // polyline.setText(' ► ', {repeat: true, attributes: {fill: 'red'}}); + // }); + polyline.addTo(map) + // decorator = L.polylineDecorator(polyline, { + // patterns: [ + // {offset: 0, repeat: 20, symbol: L.Symbol.dash({pixelSize: 10})}, + // // {offset: -7, repeat: 20, symbol: L.Symbol.dash({pixelSize: 10})}, + // ] + // }).addTo(map); + polylineArr.push(polyline) + if (polyline1) { + polylineArr.push(polyline1) + } + if (polyline2) { + polylineArr.push(polyline2) + } + // polylineArr.push(decorator); + // featureGroup.addLayer(polyline); + // featureGroup.addTo(map); + } + + function _removerPolyline() { + if (polylineArr && polylineArr.length > 0) { + polylineArr.map(item => { + item.remove() + }) + polylineArr = [] + } + } + /** + * 绘制面 + * */ + function _drawingArea(callback) { + // 修改控件提示 + L.drawLocal.draw.handlers.polygon.tooltip.start = '单击开始绘制形状' + L.drawLocal.draw.handlers.polygon.tooltip.cont = '单击继续绘制形状' + L.drawLocal.draw.handlers.polygon.tooltip.end = '单击继续绘制形状,双击结束绘制' + // 开启画多边形控件 + let areaPolygonLayer = null + mapObj.drawPolygon.enable() + map.once('draw:created', (e) => { + const type = e.layerType + areaPolygonLayer = e.layer + if (type === 'polygon') { // 使用polygon时 + featureGroup.addLayer(areaPolygonLayer) + // layerGroup.set('areaPolygonLayer', areaPolygonLayer) + console.log('areaPolygonLayer', areaPolygonLayer._latlngs) + if (callback) { + callback(areaPolygonLayer._latlngs) + } + featureGroup.addTo(map) + // const areaMeasureParam = new SuperMap.MeasureParameters(areaPolygonLayer); + // L.supermap + // .measureService(_mapConfig.config.QUERY_URL) + // .measureArea(areaMeasureParam, function(serviceResult) { + // const message = `总面积： ${serviceResult.result.area.toFixed(0)} 平方米`; + // const elementHtml = createDistanceAndAreaPopup(message); + // // const content = '总面积：' + serviceResult.result.area + '平方米'; + // areaPolygonLayer.bindPopup(elementHtml, { className: 'multi-distance-and-area-popup-style' }).openPopup(areaPolygonLayer.getCenter()); + // areaPolygonLayer.on('click', (e) => { + // console.log(e); + // }); + // }); + } + }) + } + /** + * 绘制面数据 + * */ + function _drawingAreaByData(latlngs, callback, style, info) { + console.log('面上图数据', latlngs) + const polygon = L.polygon(latlngs, style || { color: '#fa655d', weight: 2, fillColor: 'fa655d', fillOpacity: 0.3 }) + if (callback) { + callback(polygon._latlngs) + } + polygon.addTo(map) + PolygonArr.push(polygon) + if (style) { + polygon.on('click', e => { + // 添加popup + const latlng = polygon.getCenter() + const content = createManagerPopup(info) + console.log('XXXXXXXXXXXXXXXXXX', info) + const popup = L.popup({ className: 'detail-dialog' }) + .setLatLng(latlng) + .setContent(content) + .openOn(map) + bus.$emit('trsSupermapPolygon', e.sourceTarget.options.resourceId) + }) + } + } + // 清除面数据 + function _removerPolygon() { + if (PolygonArr && PolygonArr.length > 0) { + PolygonArr.map(item => { + item.remove() + }) + PolygonArr = [] + } + } + // 添加arcGis服务图层 + function _addDynamicMapLayer(data) { + var envLayer = L.esri.dynamicMapLayer({ + url: data.url, + opacity: 0.8, + layers: [0, 1, 2, 3, 4, 5, 6, 7, 8] + }) + featureGroup.addLayer(envLayer) + layerGroup.set(data.layerName, envLayer) + // map.addLayer(envLayer) + } + /** + * 路径分析 + * @param obj {Object} 地图初始化全局map对象（mapObject） + * @param e {Object} 当前扎点对象 + * @param drawMarkerNum 扎点的数量 + * @param pathAnalysisMarkerPointNodes {Map} 存放点的对象 + * **/ + function _findPathDrawMarker(obj, e, drawMarkerNum, pathAnalysisMarkerPointNodes) { + const type = e.layerType + obj.drawLayer = e.layer + // 记录扎点的坐标 + if (type === 'marker') { // 使用drawMarker时 + let content = '' + if (drawMarkerNum === 1) { + content = '起点' + } else { + content = '经过点' + } + const currentSelectedPoint = [] + const lat = e.layer._latlng.lat + const lng = e.layer._latlng.lng + currentSelectedPoint.push(lat) + currentSelectedPoint.push(lng) + const marker = L.marker(currentSelectedPoint) + marker.bindTooltip(content, { + offset: L.point([0, -10]), + direction: 'top', + permanent: true + }).openTooltip() + featureGroup.addLayer(marker) + layerGroup.set('pathAnalysisMarker' + drawMarkerNum, marker) + pathAnalysisMarkerPointNodes.set('pathAnalysisMarker' + drawMarkerNum, marker) + obj.drawMarker = new L.Draw.Marker(obj.map) + obj.drawMarker.initialize(obj.map) + obj.drawMarker.enable() + } + } + + /** + * 最佳路径分析 + * */ + function _findPathProcess(drawMarkerNum, pathAnalysisMarkerPointNodes, pathMarkerNum) { + // 当有两个点（起点与终点时） + if (drawMarkerNum > 1) { + // 获取最后一个图层，修改弹窗内容为终点 + const pointMarker = pathAnalysisMarkerPointNodes.get('pathAnalysisMarker' + drawMarkerNum) + // 双击最后会加载两个节点，都应该删除 + // 清除最后一个图层，然后修改内容从新加载 + _removeLayerByLayerName('pathAnalysisMarker' + drawMarkerNum) + _removeLayerByLayerName('pathAnalysisMarker' + (drawMarkerNum - 1)) + pathAnalysisMarkerPointNodes.delete('pathAnalysisMarker' + drawMarkerNum) + pathAnalysisMarkerPointNodes.delete('pathAnalysisMarker' + (drawMarkerNum - 1)) + drawMarkerNum -= 1 + pointMarker.bindTooltip('终点', { + offset: L.point([0, -10]), + direction: 'top', + permanent: true + }).openTooltip() + featureGroup.addLayer(pointMarker) + layerGroup.set('pathAnalysisMarker' + drawMarkerNum, pointMarker) + pathAnalysisMarkerPointNodes.set('pathAnalysisMarker' + drawMarkerNum, pointMarker) + + const nodes = [] + for (let i = 0; i < pathAnalysisMarkerPointNodes.size; i++) { + const marker = pathAnalysisMarkerPointNodes.get('pathAnalysisMarker' + (i + 1)) + const location = marker.getLatLng() + const point = L.point(location.lng, location.lat) + nodes.push(point) + } + // 创建最佳路径分析服务实例 + const findPathService = L.supermap.networkAnalystService(_mapConfig.config.NETWORK_URL) + // 创建最佳路径分析参数实例 + const resultSetting = new SuperMap.TransportationAnalystResultSetting({ + returnEdgeFeatures: true, + returnEdgeGeometry: true, + returnEdgeIDs: true, + returnNodeFeatures: true, + returnNodeGeometry: true, + returnNodeIDs: true, + returnPathGuides: true, + returnRoutes: true + }) + const analystParameter = new SuperMap.TransportationAnalystParameter({ + resultSetting: resultSetting + // weightFieldName: _convertCaseOfAttributes('SmLength') + // weightFieldName: 'smlength', + // weightFieldName: 'SMLENGTH', + }) + const findPathParameter = new SuperMap.FindPathParameters({ + isAnalyzeById: false, + nodes: nodes, + parameter: analystParameter + }) + const myIcon = L.icon({ + iconUrl: './src/assets/common/multiScreen/mapTools/ambulance_map_standby.png', + iconSize: [35, 35] + }) + // 进行查找 todo + findPathService.findPath(findPathParameter, function(serviceResult) { + console.log('serviceResult', serviceResult) + const result = serviceResult.result + console.log(result) + result.pathList.map(function(result) { + const pathRouteLayer = L.geoJSON(result.route) + // const pathGuideLayer = L.geoJSON(result.pathGuideItems, { + // pointToLayer: function (geoPoints, latlng) { + // pathMarkerNum += 1; + // const pathMarker = L.marker(latlng, {icon: myIcon}); + // featureGroup.addLayer(pathMarker); + // layerGroup.set('pathMarker' + pathMarkerNum, pathMarker); + // }, + // filter: function (geoJsonFeature) { + // if (geoJsonFeature.geometry && geoJsonFeature.geometry.type === 'Point') { + // return true; + // } + // return false; + // } + // }); + // map.addLayer(pathRouteLayer); + featureGroup.addLayer(pathRouteLayer) + layerGroup.set('pathRouteLayer', pathRouteLayer) + // map.addLayer(pathGuideLayer); + // featureGroup.addLayer(pathGuideLayer); + // layerGroup.set('pathGuideLayer', pathGuideLayer); + }) + }) + } else { + // toastr.warning("请先选择需要分析的起点与终点!"); + } + } + + // 森火三屏 路径分析 调用路网服务画线 + function _pathAnalysis(coords) { + // debugger; + // 创建最佳路径分析服务实例 + const findPathService = L.supermap.networkAnalystService(_mapConfig.config.NETWORK_URL) + // 创建最佳路径分析参数实例 + const resultSetting = new SuperMap.TransportationAnalystResultSetting({ + returnEdgeFeatures: true, + returnEdgeGeometry: true, + returnEdgeIDs: true, + returnNodeFeatures: true, + returnNodeGeometry: true, + returnNodeIDs: true, + returnPathGuides: true, + returnRoutes: true + }) + const analystParameter = new SuperMap.TransportationAnalystParameter({ + resultSetting: resultSetting + }) + const nodes = [] + coords.map(coord => { + nodes.push(L.point(coord.longitude, coord.latitude)) + }) + const findPathParameter = new SuperMap.FindPathParameters({ + isAnalyzeById: false, + nodes: nodes, + parameter: analystParameter + }) + // 进行查找 todo + findPathService.findPath(findPathParameter, function(serviceResult) { + console.log('serviceResult', serviceResult) + const result = serviceResult.result + console.log(result) + result.pathList.map(function(result) { + const pathRouteLayer = L.geoJSON(result.route) + featureGroup.addLayer(pathRouteLayer) + // layerGroup.set('pathRouteLayer', pathRouteLayer); + }) + }) + } + + /** + * 地址匹配正向匹配(基于高德地图) + * @param address 地址 + * @param city 城市 + * @param pageSize 单页显示结果条数 + * @param pageIndex 页码 + * @param outAddressCallBack 输出查询结果的回调函数 + * @param param outAddressCallBack函数所需要接收的参数 + * @private + */ + function _addressMatchCodeByAmap(address, { city = '青岛', pageSize = 100, pageIndex = 1, outAddressCallBack = null, param = null } = {}) { + AMap.plugin('AMap.PlaceSearch', function() { + var placeSearch = new AMap.PlaceSearch({ + city: city, + pageSize: pageSize, + pageIndex: pageIndex + }) + placeSearch.search(address, function(status, result) { + console.log(result) + if (outAddressCallBack) { + outAddressCallBack(result, param) + } + }) + }) + } + + /** + * 根据sql查询图层数据 + * @param configInfo {Object}图层配置对象 + * @param sql {String} sql字符串 + * @param callBackFun {Function} 获取图层数据的回调函数 + * @param callBackParams {Object||Array||String} 回调函数中接收的参数数据 + * @param layerName {String} 图层名称，如果为空则不上图，不为空则根据该名字作为图层名上图 + * @param getLayerPopupInfo {Function} 图层弹窗方法 + * @param className {String} 弹窗样式 + * @private + */ + function _queryLayersBySql(configInfo, { + sql = 'SMID >0', + callBackFun = null, + callBackParams = null, + layerName = null, + getLayerPopupInfo = null, + className = '' + } = {}) { + const sqlParam = new SuperMap.QueryBySQLParameters({ + queryParams: { + name: configInfo.layerName, + attributeFilter: sql + } + }) + L.supermap.queryService(_mapConfig.config.QUERY_URL) + .queryBySQL(sqlParam, (serviceResult) => { + if (callBackFun) { + callBackFun(serviceResult, configInfo, callBackParams) + } + if (layerName) { + const resultLayerConfig = L.geoJSON(serviceResult.result.recordsets[0].features, { + onEachFeature: (feature, layer) => { + layer.setIcon(MapStyle.featureIcon(configInfo)) + layer.title = layerName + layer.configInfo = configInfo + // 绑定弹窗事件，实时请求弹窗内容 + layer.on('click', function(e) { + if (!getLayerPopupInfo) { + const uuid = e.sourceTarget.feature.properties[_convertCaseOfAttributes('uuid')] + const layerConfigInfo = e.sourceTarget.configInfo + const location = [e.latlng.lat, e.latlng.lng] + const latlng = L.latLng(location) + getLayerPopupInfo(uuid, layerConfigInfo).then((response) => { + response.allMapObject = { + mapObj: mapObj + } + const elementHtml = createGeneralPopup(response) + L.popup({ className: className }) + .setLatLng(latlng) + .setContent(elementHtml) + .openOn(map) + }) + } + }) + } + }) + featureGroup.addLayer(resultLayerConfig) + layerGroup.set(layerName, resultLayerConfig) + } + }) + } + /** + * 资源调拨中获取最佳的路径，以及最短距离 + * @param featureArray {Array} 查询的仓库的图层数组 + * @param disasterPoin {Array} 灾难点坐标数组 + * @param callBackFun {Function} 回调函数 + * **/ + function _findPathInResourceCannibalize(featureArray, disasterPoint, callBackFun) { + // 创建最佳路径分析服务实例 + const findPathService = L.supermap.networkAnalystService(_mapConfig.config.NETWORK_URL) + // 创建最佳路径分析参数实例 + const resultSetting = new SuperMap.TransportationAnalystResultSetting({ + returnEdgeFeatures: true, + returnEdgeGeometry: true, + returnEdgeIDs: true, + returnNodeFeatures: true, + returnNodeGeometry: true, + returnNodeIDs: true, + returnPathGuides: true, + returnRoutes: true + }) + const analystParameter = new SuperMap.TransportationAnalystParameter({ + resultSetting: resultSetting + // weightFieldName:_convertCaseOfAttributes('SMLENGTH'), + }) + // 根据仓库图层查询每个仓库与受灾点的最佳路径 + featureArray.forEach(function(item) { + const findPathParameter = new SuperMap.FindPathParameters({ + isAnalyzeById: false, + // nodes:[L.point(item.geometry.coordinates[0],item.geometry.coordinates[1]), L.point(disasterPoint[0], disasterPoint[1])], + nodes: [L.point(item.geometry.coordinates[0], item.geometry.coordinates[1]), L.point(disasterPoint[0], disasterPoint[1])], + parameter: analystParameter + }) + + // 进行查找 + findPathService.findPath(findPathParameter, function(serviceResult) { + callBackFun(serviceResult, item) + }) + }) + } + /** + * todo 后期进行修改，尽量与上面的方法形成一个通用方法 + * 资源调拨中获取仓库到暂难点最佳的路径，以及最短距离 + * @param featureArray {Array} 仓库数组 + * @param params {Object} 传递的参数对象 + * @param callBackFun {Function} 回调函数 + * **/ + function _findPathFormStorageToDisaster(featureArray, params, callBackFun) { + // 创建最佳路径分析服务实例 + const findPathService = L.supermap.networkAnalystService(_mapConfig.config.NETWORK_URL) + // 创建最佳路径分析参数实例 + const resultSetting = new SuperMap.TransportationAnalystResultSetting({ + returnEdgeFeatures: true, + returnEdgeGeometry: true, + returnEdgeIDs: true, + returnNodeFeatures: true, + returnNodeGeometry: true, + returnNodeIDs: true, + returnPathGuides: true, + returnRoutes: true + }) + const analystParameter = new SuperMap.TransportationAnalystParameter({ + resultSetting: resultSetting + // weightFieldName: _convertCaseOfAttributes('SMLENGTH') + // weightFieldName: _convertCaseOfAttributes('SmLength') + }) + // 根据仓库图层查询每个仓库与受灾点的最佳路径 + const fLen = featureArray.length + for (let index = 0; index < fLen; index++) { + const item = featureArray[index] + const findPathParameter = new SuperMap.FindPathParameters({ + isAnalyzeById: false, + // nodes:[L.point(item.geometry.coordinates[0],item.geometry.coordinates[1]), L.point(disasterPoint[0], disasterPoint[1])], + nodes: [L.point(item.properties.smx, item.properties.smy), L.point(params.disaster.disasterAddressX, params.disaster.disasterAddressY)], + parameter: analystParameter + }) + // 进行查找 + findPathService.findPath(findPathParameter, function(serviceResult) { + callBackFun(serviceResult, item, params) + }) + } + // featureArray.forEach(function(item) { + // const findPathParameter = new SuperMap.FindPathParameters({ + // isAnalyzeById: false, + // // nodes:[L.point(item.geometry.coordinates[0],item.geometry.coordinates[1]), L.point(disasterPoint[0], disasterPoint[1])], + // nodes: [L.point(item.properties.smx, item.properties.smy), L.point(params.disaster.disasterAddressX, params.disaster.disasterAddressY)], + // parameter: analystParameter + // }); + // // 进行查找 + // findPathService.findPath(findPathParameter, function(serviceResult) { + // callBackFun(serviceResult, item, params); + // // var result = serviceResult.result; + // // result.pathList.map(function (result) { + // // // L.geoJSON(result.route).addTo(map); + // // // L.geoJSON(result.pathGuideItems, { + // // // pointToLayer: function (geoPoints, latlng) { + // // // L.marker(latlng, { icon: myIcon }).addTo(map); + // // // }, + // // // filter: function (geoJsonFeature) { + // // // if (geoJsonFeature.geometry && geoJsonFeature.geometry.type === 'Point') { + // // // return true; + // // // } + // // // return false; + // // // } + // // // }).addTo(map); + // // }) + // }); + // }); + } + + /** + * 资源调拨算法专用方法，用于展示仓库详细信息，以及调拨的资源名称以及数量 + * @param layerName {String}图层名字 + * @param storageList {Array} 调拨的仓库数组 + * @param layerConfigInfo {Object} 图层配置信息 + * @param getDispatchResourcePopupInfo + */ + const _addResourceCannibalizeDataOnMap = function(layerName, storageList, layerConfigInfo, goodsDispatchId, { getDispatchResourcePopupInfo = null } = {}) { + const markerLayers = [] + // 创建marker图层，绑定弹窗内容 + storageList.forEach(function(item) { + const point = [Number(item.resourceStorage.smy), Number(item.resourceStorage.smx)] + const marker = L.marker(point, { + icon: MapStyle.featureIcon(layerConfigInfo), + attribution: item.resourceStorage + }) + marker.layerConfigInfo = layerConfigInfo + marker.goodsDispatchId = goodsDispatchId + marker.on('click', function(e) { + const layerConfigInfo = e.sourceTarget.layerConfigInfo + const goodsDispatchId = e.sourceTarget.goodsDispatchId const location = [e.latlng.lat, e.latlng.lng] const latlng = L.latLng(location) - getLayerPopupInfo(indexCode, layerConfigInfo).then((response) => { - response.allMapObject = { - mapObj: mapObj - } - const elementHtml = createGeneralPopup(response) - L.popup({ className: 'multi-general-popup-style' }) - .setLatLng(latlng) - .setContent(elementHtml) - .openOn(map) - }) - }) - } - } - }) - featureGroup.addLayer(searchCameraLayer) - layerGroup.set(layerName, searchCameraLayer) - }) - } - /** - * 根据数据库类型对属性进行大小写转换 - * @param attribute - * @returns {*} - */ - function _convertCaseOfAttributes(attribute) { - if (_mapConfig.config.DATABASE_TYPE === 'Oracle') { - return attribute.toUpperCase() - } else if (_mapConfig.config.DATABASE_TYPE === 'Highgo') { - return attribute.toLowerCase() - } - } - - /** - * 地址匹配正向匹配 - * @param address 地址 - * @param fromIndex 设置返回对象的起始索引值 - * @param toIndex 设置返回对象的结束索引值 - * @param filters 过滤字段，限定查询区域 - * @param prjCoordSys 查询结果的坐标系 - * @param maxReturn 最大返回结果数 - * @param outAddressCallBack 输出查询结果的回调函数 - * @param param outAddressCallBack函数所需要接收的参数 - * @private - */ - function _addressMatchCode(address, { fromIndex = null, toIndex = null, filters = null, prjCoordSys = null, maxReturn = null, outAddressCallBack = null, param = null } = {}) { - const geoCodeParam = new SuperMap.GeoCodingParameter({ - address: address, - fromIndex: fromIndex, - toIndex: toIndex, - filters: filters, - prjCoordSys: prjCoordSys, - maxReturn: maxReturn - }) - L.supermap.addressMatchService(_mapConfig.config.POI_URL).code(geoCodeParam, function (addressObj) { - if (outAddressCallBack) { - outAddressCallBack(addressObj, param) - } - }) - } - /** - * 测量距离 - * */ - function _measureingLine() { - // 修改控件提示 - L.drawLocal.draw.handlers.polyline.tooltip.start = '单击开始绘制线' - L.drawLocal.draw.handlers.polyline.tooltip.cont = '单击继续绘制线' - L.drawLocal.draw.handlers.polyline.tooltip.end = '点击最后一点到终点' - // 开启画线控件 - mapObj.drawPolyline.enable() - map.once('draw:created', (e) => { - const type = e.layerType - const distancePolylineLayer = e.layer - if (type === 'polyline') { // 使用polyline时 - featureGroup.addLayer(distancePolylineLayer)// 将扎点的图层添加到地图上 - layerGroup.set('distancePolylineLayer', distancePolylineLayer) - const distanceMeasureParam = new SuperMap.MeasureParameters(distancePolylineLayer) - L.supermap - .measureService(_mapConfig.config.QUERY_URL) - .measureDistance(distanceMeasureParam, function (serviceResult) { - const message = `总距离： ${serviceResult.result.distance.toFixed(4)} 米` - const elementHtml = createDistanceAndAreaPopup(message) - // const aa = `
总距离：${ serviceResult.result.distance} 米
` - distancePolylineLayer.bindPopup(elementHtml, { className: 'multi-distance-and-area-popup-style' }).openPopup(distancePolylineLayer._latlngs[0]) - }) - } - }) - } - - /** - * 测量面积 - * */ - function _measureingArea() { - // 修改控件提示 - L.drawLocal.draw.handlers.polygon.tooltip.start = '单击开始绘制形状' - L.drawLocal.draw.handlers.polygon.tooltip.cont = '单击继续绘制形状' - L.drawLocal.draw.handlers.polygon.tooltip.end = '单击第一个点以关闭此形状' - // 开启画多边形控件 - mapObj.drawPolygon.enable() - map.once('draw:created', (e) => { - const type = e.layerType - const areaPolygonLayer = e.layer - if (type === 'polygon') { // 使用polygon时 - featureGroup.addLayer(areaPolygonLayer) - layerGroup.set('areaPolygonLayer', areaPolygonLayer) - const areaMeasureParam = new SuperMap.MeasureParameters(areaPolygonLayer) - L.supermap - .measureService(_mapConfig.config.QUERY_URL) - .measureArea(areaMeasureParam, function (serviceResult) { - const message = `总面积： ${serviceResult.result.area.toFixed(4)} 平方米` - const elementHtml = createDistanceAndAreaPopup(message) - // const content = '总面积：' + serviceResult.result.area + '平方米'; - areaPolygonLayer.bindPopup(elementHtml, { className: 'multi-distance-and-area-popup-style' }).openPopup(areaPolygonLayer.getCenter()) - }) - } - }) - } - /** - * 绘制线 - * */ - function _drawingLine(callback) { - // 修改控件提示 - L.drawLocal.draw.handlers.polyline.tooltip.start = '单击开始绘制线' - L.drawLocal.draw.handlers.polyline.tooltip.cont = '单击继续绘制线' - L.drawLocal.draw.handlers.polyline.tooltip.end = '点击最后一点到终点' - // 开启画线控件 - mapObj.drawPolyline.enable() - map.once('draw:created', (e) => { - const type = e.layerType - console.log(e) - const distancePolylineLayer = e.layer - if (type === 'polyline') { // 使用polyline时 - featureGroup.addLayer(distancePolylineLayer)// 将扎点的图层添加到地图上 - featureGroup.addTo(map) - console.log('distancePolylineLayer', distancePolylineLayer) - callback(distancePolylineLayer._latlngs) - // const distanceMeasureParam = new SuperMap.MeasureParameters(distancePolylineLayer); - // L.supermap - // .measureService(_mapConfig.config.QUERY_URL) - // .measureDistance(distanceMeasureParam, function(serviceResult) { - // const message = `总距离： ${serviceResult.result.distance.toFixed(4)} 米`; - // const elementHtml = createDistanceAndAreaPopup(message); - // // const aa = `
总距离：${ serviceResult.result.distance} 米
` - // distancePolylineLayer.bindPopup(elementHtml, { className: 'multi-distance-and-area-popup-style' }).openPopup(distancePolylineLayer._latlngs[0]); - // }); - } - }) - } - /** - * 根据点位数据绘制线 - * */ - function _drawingLineByData(latlngs, callback, config) { - let type = 'default' - if (config && config.resType && config.secondType) { - type = config.resType + config.secondType - } - let polyline = '' // 主线 - let polyline1 = '' // 辅助线1 - let polyline2 = '' // 辅助线2 - const decorator = '' - switch (type) { - case 'fireRoad': - // 路网 - polyline = L.polyline.antPath(latlngs, { - delay: 400, - dashArray: [ - 10, - 20 - ], - weight: 5, - color: '#2bbd91', - pulseColor: '#8bffa9', - paused: true, - reverse: false, - hardwareAccelerated: true - }) - break - case 'fireBreak1': - // 隔离网 - polyline = L.polyline(latlngs, { weight: 14, color: '#22ac38', opacity: 0.54 }) - polyline1 = L.polyline(latlngs, { weight: 2, offset: 6, className: 'fire-break-1', color: '#90ffa2' }) - polyline2 = L.polyline(latlngs, { weight: 2, offset: -6, className: 'fire-break-1', color: '#90ffa2' }) - polyline1.addTo(map) - polyline2.addTo(map) - // decorator = L.polylineDecorator(polyline, { - // patterns: [ - // // defines a pattern of 10px-wide dashes, repeated every 20px on the line - // {offset: 0, repeat: 20, symbol: L.Symbol.dash({pixelSize: 10})} - // ] - // }).addTo(map); - break - case 'fireBreak2': - // 防火隔离带 - polyline = L.polyline(latlngs, { weight: 14, color: '#00aeca', opacity: 0.54 }) - polyline1 = L.polyline(latlngs, { weight: 2, offset: 6, className: 'fire-break-1', color: '#9df2ff' }) - polyline2 = L.polyline(latlngs, { weight: 2, offset: -6, className: 'fire-break-1', color: '#9df2ff' }) - polyline1.addTo(map) - polyline2.addTo(map) - break - default: - polyline = L.polyline(latlngs, { color: 'red' }) - } - - if (callback) { - callback(polyline._latlngs) - } - // polyline.on('mouseover', e => { - // console.log('图标点击e', e); - // polyline.setText(' ► ', {repeat: true, attributes: {fill: 'red'}}); - // }); - polyline.addTo(map) - // decorator = L.polylineDecorator(polyline, { - // patterns: [ - // {offset: 0, repeat: 20, symbol: L.Symbol.dash({pixelSize: 10})}, - // // {offset: -7, repeat: 20, symbol: L.Symbol.dash({pixelSize: 10})}, - // ] - // }).addTo(map); - polylineArr.push(polyline) - if (polyline1) { - polylineArr.push(polyline1) - } - if (polyline2) { - polylineArr.push(polyline2) - } - // polylineArr.push(decorator); - // featureGroup.addLayer(polyline); - // featureGroup.addTo(map); - } - function _removerPolyline() { - if (polylineArr && polylineArr.length > 0) { - polylineArr.map(item => { - item.remove() - }) - polylineArr = [] - } - } - /** - * 绘制面 - * */ - function _drawingArea(callback) { - // 修改控件提示 - L.drawLocal.draw.handlers.polygon.tooltip.start = '单击开始绘制形状' - L.drawLocal.draw.handlers.polygon.tooltip.cont = '单击继续绘制形状' - L.drawLocal.draw.handlers.polygon.tooltip.end = '单击继续绘制形状,双击结束绘制' - // 开启画多边形控件 - let areaPolygonLayer = null - mapObj.drawPolygon.enable() - map.once('draw:created', (e) => { - const type = e.layerType - areaPolygonLayer = e.layer - if (type === 'polygon') { // 使用polygon时 - featureGroup.addLayer(areaPolygonLayer) - // layerGroup.set('areaPolygonLayer', areaPolygonLayer) - console.log('areaPolygonLayer', areaPolygonLayer._latlngs) - if (callback) { - callback(areaPolygonLayer._latlngs) - } - featureGroup.addTo(map) - // const areaMeasureParam = new SuperMap.MeasureParameters(areaPolygonLayer); - // L.supermap - // .measureService(_mapConfig.config.QUERY_URL) - // .measureArea(areaMeasureParam, function(serviceResult) { - // const message = `总面积： ${serviceResult.result.area.toFixed(0)} 平方米`; - // const elementHtml = createDistanceAndAreaPopup(message); - // // const content = '总面积：' + serviceResult.result.area + '平方米'; - // areaPolygonLayer.bindPopup(elementHtml, { className: 'multi-distance-and-area-popup-style' }).openPopup(areaPolygonLayer.getCenter()); - // areaPolygonLayer.on('click', (e) => { - // console.log(e); - // }); - // }); - } - }) - } - /** - * 绘制面数据 - * */ - function _drawingAreaByData(latlngs, callback, style, info) { - console.log('面上图数据', latlngs) - const polygon = L.polygon(latlngs, style || { color: '#fa655d', weight: 2, fillColor: 'fa655d', fillOpacity: 0.3 }) - if (callback) { - callback(polygon._latlngs) - } - polygon.addTo(map) - PolygonArr.push(polygon) - if (style) { - polygon.on('click', e => { - // 添加popup - const latlng = polygon.getCenter() - const content = createManagerPopup(info) - console.log('XXXXXXXXXXXXXXXXXX', info) - const popup = L.popup({ className: 'detail-dialog' }) - .setLatLng(latlng) - .setContent(content) - .openOn(map) - bus.$emit('trsSupermapPolygon', e.sourceTarget.options.resourceId) - }) - } - } - // 清除面数据 - function _removerPolygon() { - if (PolygonArr && PolygonArr.length > 0) { - PolygonArr.map(item => { - item.remove() - }) - PolygonArr = [] - } - } - // 添加arcGis服务图层 - function _addDynamicMapLayer(data) { - var envLayer = L.esri.dynamicMapLayer({ - url: data.url, - opacity: 0.8, - layers: [0, 1, 2, 3, 4, 5, 6, 7, 8] - }) - featureGroup.addLayer(envLayer) - layerGroup.set(data.layerName, envLayer) - // map.addLayer(envLayer) - } - /** - * 路径分析 - * @param obj {Object} 地图初始化全局map对象（mapObject） - * @param e {Object} 当前扎点对象 - * @param drawMarkerNum 扎点的数量 - * @param pathAnalysisMarkerPointNodes {Map} 存放点的对象 - * **/ - function _findPathDrawMarker(obj, e, drawMarkerNum, pathAnalysisMarkerPointNodes) { - const type = e.layerType - obj.drawLayer = e.layer - // 记录扎点的坐标 - if (type === 'marker') { // 使用drawMarker时 - let content = '' - if (drawMarkerNum === 1) { - content = '起点' - } else { - content = '经过点' - } - const currentSelectedPoint = [] - const lat = e.layer._latlng.lat - const lng = e.layer._latlng.lng - currentSelectedPoint.push(lat) - currentSelectedPoint.push(lng) - const marker = L.marker(currentSelectedPoint) - marker.bindTooltip(content, { - offset: L.point([0, -10]), - direction: 'top', - permanent: true - }).openTooltip() - featureGroup.addLayer(marker) - layerGroup.set('pathAnalysisMarker' + drawMarkerNum, marker) - pathAnalysisMarkerPointNodes.set('pathAnalysisMarker' + drawMarkerNum, marker) - obj.drawMarker = new L.Draw.Marker(obj.map) - obj.drawMarker.initialize(obj.map) - obj.drawMarker.enable() - } - } - - /** - * 最佳路径分析 - * */ - function _findPathProcess(drawMarkerNum, pathAnalysisMarkerPointNodes, pathMarkerNum) { - // 当有两个点（起点与终点时） - if (drawMarkerNum > 1) { - // 获取最后一个图层，修改弹窗内容为终点 - const pointMarker = pathAnalysisMarkerPointNodes.get('pathAnalysisMarker' + drawMarkerNum) - // 双击最后会加载两个节点，都应该删除 - // 清除最后一个图层，然后修改内容从新加载 - _removeLayerByLayerName('pathAnalysisMarker' + drawMarkerNum) - _removeLayerByLayerName('pathAnalysisMarker' + (drawMarkerNum - 1)) - pathAnalysisMarkerPointNodes.delete('pathAnalysisMarker' + drawMarkerNum) - pathAnalysisMarkerPointNodes.delete('pathAnalysisMarker' + (drawMarkerNum - 1)) - drawMarkerNum -= 1 - pointMarker.bindTooltip('终点', { - offset: L.point([0, -10]), - direction: 'top', - permanent: true - }).openTooltip() - featureGroup.addLayer(pointMarker) - layerGroup.set('pathAnalysisMarker' + drawMarkerNum, pointMarker) - pathAnalysisMarkerPointNodes.set('pathAnalysisMarker' + drawMarkerNum, pointMarker) - - const nodes = [] - for (let i = 0; i < pathAnalysisMarkerPointNodes.size; i++) { - const marker = pathAnalysisMarkerPointNodes.get('pathAnalysisMarker' + (i + 1)) - const location = marker.getLatLng() - const point = L.point(location.lng, location.lat) - nodes.push(point) - } - // 创建最佳路径分析服务实例 - const findPathService = L.supermap.networkAnalystService(_mapConfig.config.NETWORK_URL) - // 创建最佳路径分析参数实例 - const resultSetting = new SuperMap.TransportationAnalystResultSetting({ - returnEdgeFeatures: true, - returnEdgeGeometry: true, - returnEdgeIDs: true, - returnNodeFeatures: true, - returnNodeGeometry: true, - returnNodeIDs: true, - returnPathGuides: true, - returnRoutes: true - }) - const analystParameter = new SuperMap.TransportationAnalystParameter({ - resultSetting: resultSetting - // weightFieldName: _convertCaseOfAttributes('SmLength') - // weightFieldName: 'smlength', - // weightFieldName: 'SMLENGTH', - }) - const findPathParameter = new SuperMap.FindPathParameters({ - isAnalyzeById: false, - nodes: nodes, - parameter: analystParameter - }) - const myIcon = L.icon({ - iconUrl: './src/assets/common/multiScreen/mapTools/ambulance_map_standby.png', - iconSize: [35, 35] - }) - // 进行查找 todo - findPathService.findPath(findPathParameter, function (serviceResult) { - console.log('serviceResult', serviceResult) - const result = serviceResult.result - console.log(result) - result.pathList.map(function (result) { - const pathRouteLayer = L.geoJSON(result.route) - // const pathGuideLayer = L.geoJSON(result.pathGuideItems, { - // pointToLayer: function (geoPoints, latlng) { - // pathMarkerNum += 1; - // const pathMarker = L.marker(latlng, {icon: myIcon}); - // featureGroup.addLayer(pathMarker); - // layerGroup.set('pathMarker' + pathMarkerNum, pathMarker); - // }, - // filter: function (geoJsonFeature) { - // if (geoJsonFeature.geometry && geoJsonFeature.geometry.type === 'Point') { - // return true; - // } - // return false; - // } - // }); - // map.addLayer(pathRouteLayer); - featureGroup.addLayer(pathRouteLayer) - layerGroup.set('pathRouteLayer', pathRouteLayer) - // map.addLayer(pathGuideLayer); - // featureGroup.addLayer(pathGuideLayer); - // layerGroup.set('pathGuideLayer', pathGuideLayer); - }) - }) - } else { - // toastr.warning("请先选择需要分析的起点与终点!"); - } - } - - // 森火三屏 路径分析 调用路网服务画线 - function _pathAnalysis(coords) { - // debugger; - // 创建最佳路径分析服务实例 - const findPathService = L.supermap.networkAnalystService(_mapConfig.config.NETWORK_URL) - // 创建最佳路径分析参数实例 - const resultSetting = new SuperMap.TransportationAnalystResultSetting({ - returnEdgeFeatures: true, - returnEdgeGeometry: true, - returnEdgeIDs: true, - returnNodeFeatures: true, - returnNodeGeometry: true, - returnNodeIDs: true, - returnPathGuides: true, - returnRoutes: true - }) - const analystParameter = new SuperMap.TransportationAnalystParameter({ - resultSetting: resultSetting - }) - const nodes = [] - coords.map(coord => { - nodes.push(L.point(coord.longitude, coord.latitude)) - }) - const findPathParameter = new SuperMap.FindPathParameters({ - isAnalyzeById: false, - nodes: nodes, - parameter: analystParameter - }) - // 进行查找 todo - findPathService.findPath(findPathParameter, function (serviceResult) { - console.log('serviceResult', serviceResult) - const result = serviceResult.result - console.log(result) - result.pathList.map(function (result) { - const pathRouteLayer = L.geoJSON(result.route) - featureGroup.addLayer(pathRouteLayer) - // layerGroup.set('pathRouteLayer', pathRouteLayer); - }) - }) - } - - /** - * 地址匹配正向匹配(基于高德地图) - * @param address 地址 - * @param city 城市 - * @param pageSize 单页显示结果条数 - * @param pageIndex 页码 - * @param outAddressCallBack 输出查询结果的回调函数 - * @param param outAddressCallBack函数所需要接收的参数 - * @private - */ - function _addressMatchCodeByAmap(address, { city = '青岛', pageSize = 100, pageIndex = 1, outAddressCallBack = null, param = null } = {}) { - AMap.plugin('AMap.PlaceSearch', function () { - var placeSearch = new AMap.PlaceSearch({ - city: city, - pageSize: pageSize, - pageIndex: pageIndex - }) - placeSearch.search(address, function (status, result) { - console.log(result) - if (outAddressCallBack) { - outAddressCallBack(result, param) - } - }) - }) - } - - /** - * 根据sql查询图层数据 - * @param configInfo {Object}图层配置对象 - * @param sql {String} sql字符串 - * @param callBackFun {Function} 获取图层数据的回调函数 - * @param callBackParams {Object||Array||String} 回调函数中接收的参数数据 - * @param layerName {String} 图层名称，如果为空则不上图，不为空则根据该名字作为图层名上图 - * @param getLayerPopupInfo {Function} 图层弹窗方法 - * @param className {String} 弹窗样式 - * @private - */ - function _queryLayersBySql(configInfo, - { - sql = 'SMID >0', - callBackFun = null, - callBackParams = null, - layerName = null, - getLayerPopupInfo = null, - className = '' - } = {}) { - const sqlParam = new SuperMap.QueryBySQLParameters({ - queryParams: { - name: configInfo.layerName, - attributeFilter: sql - } - }) - L.supermap.queryService(_mapConfig.config.QUERY_URL) - .queryBySQL(sqlParam, (serviceResult) => { - if (callBackFun) { - callBackFun(serviceResult, configInfo, callBackParams) - } - if (layerName) { - const resultLayerConfig = L.geoJSON(serviceResult.result.recordsets[0].features, { - onEachFeature: (feature, layer) => { - layer.setIcon(MapStyle.featureIcon(configInfo)) - layer.title = layerName - layer.configInfo = configInfo - // 绑定弹窗事件，实时请求弹窗内容 - layer.on('click', function (e) { - if (!getLayerPopupInfo) { - const uuid = e.sourceTarget.feature.properties[_convertCaseOfAttributes('uuid')] - const layerConfigInfo = e.sourceTarget.configInfo - const location = [e.latlng.lat, e.latlng.lng] - const latlng = L.latLng(location) - getLayerPopupInfo(uuid, layerConfigInfo).then((response) => { + const storageInfo = e.sourceTarget.options.attribution + getDispatchResourcePopupInfo(goodsDispatchId, storageInfo.uuid, layerConfigInfo).then((response) => { response.allMapObject = { - mapObj: mapObj + mapObj: mapObj } - const elementHtml = createGeneralPopup(response) - L.popup({ className: className }) - .setLatLng(latlng) - .setContent(elementHtml) - .openOn(map) - }) - } - }) - } - }) - featureGroup.addLayer(resultLayerConfig) - layerGroup.set(layerName, resultLayerConfig) - } - }) - } - /** - * 资源调拨中获取最佳的路径，以及最短距离 - * @param featureArray {Array} 查询的仓库的图层数组 - * @param disasterPoin {Array} 灾难点坐标数组 - * @param callBackFun {Function} 回调函数 - * **/ - function _findPathInResourceCannibalize(featureArray, disasterPoint, callBackFun) { - // 创建最佳路径分析服务实例 - const findPathService = L.supermap.networkAnalystService(_mapConfig.config.NETWORK_URL) - // 创建最佳路径分析参数实例 - const resultSetting = new SuperMap.TransportationAnalystResultSetting({ - returnEdgeFeatures: true, - returnEdgeGeometry: true, - returnEdgeIDs: true, - returnNodeFeatures: true, - returnNodeGeometry: true, - returnNodeIDs: true, - returnPathGuides: true, - returnRoutes: true - }) - const analystParameter = new SuperMap.TransportationAnalystParameter({ - resultSetting: resultSetting - // weightFieldName:_convertCaseOfAttributes('SMLENGTH'), - }) - // 根据仓库图层查询每个仓库与受灾点的最佳路径 - featureArray.forEach(function (item) { - const findPathParameter = new SuperMap.FindPathParameters({ - isAnalyzeById: false, - // nodes:[L.point(item.geometry.coordinates[0],item.geometry.coordinates[1]), L.point(disasterPoint[0], disasterPoint[1])], - nodes: [L.point(item.geometry.coordinates[0], item.geometry.coordinates[1]), L.point(disasterPoint[0], disasterPoint[1])], - parameter: analystParameter - }) - - // 进行查找 - findPathService.findPath(findPathParameter, function (serviceResult) { - callBackFun(serviceResult, item) - }) - }) - } - /** - * todo 后期进行修改，尽量与上面的方法形成一个通用方法 - * 资源调拨中获取仓库到暂难点最佳的路径，以及最短距离 - * @param featureArray {Array} 仓库数组 - * @param params {Object} 传递的参数对象 - * @param callBackFun {Function} 回调函数 - * **/ - function _findPathFormStorageToDisaster(featureArray, params, callBackFun) { - // 创建最佳路径分析服务实例 - const findPathService = L.supermap.networkAnalystService(_mapConfig.config.NETWORK_URL) - // 创建最佳路径分析参数实例 - const resultSetting = new SuperMap.TransportationAnalystResultSetting({ - returnEdgeFeatures: true, - returnEdgeGeometry: true, - returnEdgeIDs: true, - returnNodeFeatures: true, - returnNodeGeometry: true, - returnNodeIDs: true, - returnPathGuides: true, - returnRoutes: true - }) - const analystParameter = new SuperMap.TransportationAnalystParameter({ - resultSetting: resultSetting - // weightFieldName: _convertCaseOfAttributes('SMLENGTH') - // weightFieldName: _convertCaseOfAttributes('SmLength') - }) - // 根据仓库图层查询每个仓库与受灾点的最佳路径 - const fLen = featureArray.length - for (let index = 0; index < fLen; index++) { - const item = featureArray[index] - const findPathParameter = new SuperMap.FindPathParameters({ - isAnalyzeById: false, - // nodes:[L.point(item.geometry.coordinates[0],item.geometry.coordinates[1]), L.point(disasterPoint[0], disasterPoint[1])], - nodes: [L.point(item.properties.smx, item.properties.smy), L.point(params.disaster.disasterAddressX, params.disaster.disasterAddressY)], - parameter: analystParameter - }) - // 进行查找 - findPathService.findPath(findPathParameter, function (serviceResult) { - callBackFun(serviceResult, item, params) - }) - } - // featureArray.forEach(function(item) { - // const findPathParameter = new SuperMap.FindPathParameters({ - // isAnalyzeById: false, - // // nodes:[L.point(item.geometry.coordinates[0],item.geometry.coordinates[1]), L.point(disasterPoint[0], disasterPoint[1])], - // nodes: [L.point(item.properties.smx, item.properties.smy), L.point(params.disaster.disasterAddressX, params.disaster.disasterAddressY)], - // parameter: analystParameter - // }); - // // 进行查找 - // findPathService.findPath(findPathParameter, function(serviceResult) { - // callBackFun(serviceResult, item, params); - // // var result = serviceResult.result; - // // result.pathList.map(function (result) { - // // // L.geoJSON(result.route).addTo(map); - // // // L.geoJSON(result.pathGuideItems, { - // // // pointToLayer: function (geoPoints, latlng) { - // // // L.marker(latlng, { icon: myIcon }).addTo(map); - // // // }, - // // // filter: function (geoJsonFeature) { - // // // if (geoJsonFeature.geometry && geoJsonFeature.geometry.type === 'Point') { - // // // return true; - // // // } - // // // return false; - // // // } - // // // }).addTo(map); - // // }) - // }); - // }); - } - - /** - * 资源调拨算法专用方法，用于展示仓库详细信息，以及调拨的资源名称以及数量 - * @param layerName {String}图层名字 - * @param storageList {Array} 调拨的仓库数组 - * @param layerConfigInfo {Object} 图层配置信息 - * @param getDispatchResourcePopupInfo - */ - const _addResourceCannibalizeDataOnMap = function (layerName, storageList, layerConfigInfo, goodsDispatchId, { getDispatchResourcePopupInfo = null } = {}) { - const markerLayers = [] - // 创建marker图层，绑定弹窗内容 - storageList.forEach(function (item) { - const point = [Number(item.resourceStorage.smy), Number(item.resourceStorage.smx)] - const marker = L.marker(point, { - icon: MapStyle.featureIcon(layerConfigInfo), - attribution: item.resourceStorage - }) - marker.layerConfigInfo = layerConfigInfo - marker.goodsDispatchId = goodsDispatchId - marker.on('click', function (e) { - const layerConfigInfo = e.sourceTarget.layerConfigInfo - const goodsDispatchId = e.sourceTarget.goodsDispatchId - const location = [e.latlng.lat, e.latlng.lng] - const latlng = L.latLng(location) - const storageInfo = e.sourceTarget.options.attribution - getDispatchResourcePopupInfo(goodsDispatchId, storageInfo.uuid, layerConfigInfo).then((response) => { - response.allMapObject = { - mapObj: mapObj - } - response.storageInfo = storageInfo - const elementHtml = createDispatchResourcePopup(response) - L.popup({ className: 'multi-dispatch-resource-popup-style' }) - .setLatLng(latlng) - .setContent(elementHtml) - .openOn(map) + response.storageInfo = storageInfo + const elementHtml = createDispatchResourcePopup(response) + L.popup({ className: 'multi-dispatch-resource-popup-style' }) + .setLatLng(latlng) + .setContent(elementHtml) + .openOn(map) + }) + }) + markerLayers.push(marker) }) - }) - markerLayers.push(marker) - }) - const markerGroup = L.layerGroup(markerLayers) - featureGroup.addLayer(markerGroup) - layerGroup.set(layerName, markerGroup) - } - function _replaceMarkerIcon(layerName, uuid, iconUrl = '/src/supermap/image/poi.png', iconSize = [74, 74]) { - const layers = layerGroup.get(layerName).getLayers() - layers.forEach(layer => { - if (layer.uuid === uuid) { - const icon = L.icon({ iconUrl, iconSize }) - layer.setIcon(icon) - } - }) - } - /** - * 资源调拨算法专用方法，用于展示仓库到灾难点的路网数据 - * @param layerName {String}图层名字 - * @param storageList {Array} 调拨的仓库数组 - */ - const _addResourceCannibalizeRoadPathOnMap = function (layerName, storageList) { - const roadPath = [] - storageList.forEach(function (item) { - item.roadPathList.forEach(function (road) { - const roadLayer = L.geoJSON(road.route) - roadPath.push(roadLayer) - }) - }) - const markerGroup = L.layerGroup(roadPath) - featureGroup.addLayer(markerGroup) - layerGroup.set(layerName, markerGroup) - } + const markerGroup = L.layerGroup(markerLayers) + featureGroup.addLayer(markerGroup) + layerGroup.set(layerName, markerGroup) + } - /** - * 把单个单位添加到地图上 - * @param paramObject 参数对象 - * @return {*} 创建的图标，用来删除 - * @private - */ - const _addPointOnMap = function (paramObject) { - return addPointOnMap(paramObject, mapObj, featureGroup, layerGroup) - } - const _addResourceOnMapWithoutSuperMapCluster = function ( - features, url, layerName, createPopupFun) { - console.log('_addResourceOnMapWithoutSuperMapCluster===============>', features, url, layerName, createPopupFun) - // 如果资源要素数量为0，则说明该种资源没有记录 - // if (features.length < 1) { - // return Promise.resolve(0); - // } - // 根据类型返回具体用聚合图层的样式。 - // const defaultStyle = typeToStyle(layerName) - // 创建图层 - // if (layerGroup.get(layerName)) { - // const haveLayers = layerGroup.get(layerName).getLayers() - // debugger; - // haveLayers.map(item=> { - // layerGroup.removeLayer(item) - // }) - - // } - let layers = null - // 判断是否是聚合图层 - layers = createMarkerClusterLayer() - const icon = createDefaultFeatureStyle({ - img: url, - iconSize: url == 'poi-event.png'?[40,40]:[36, 36] - }) - features.map(feature => { - var bounds = map.getBounds() - // console.log("看看有没有坐标",feature.latLng); - 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) { - marker.uuid = feature.uuid || '' - marker.resId = feature.resId || '' - marker.on('click', async e => { - if (feature.resourceName === 'video') { - const params = [feature.indexCode] - DS.openVideo(params) - } else { - const elementHtml = createPopupFun(feature) - if (elementHtml) { - console.log('L._addReMapWithter===============>', feature.latLng, elementHtml, map) - if (feature.type == 'videoSurveillance') { - L.popup({ className: 'detail-dialog', offset: [168, 240] }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map) - map.flyTo(feature.latLng) - } else if (feature.type == 'address') { - L.popup({ className: 'Address-Title-pop', closeButton: false }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map) - } else { - L.popup({ className: 'detail-dialog' }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map) - } - } + function _replaceMarkerIcon(layerName, uuid, iconUrl = '/src/supermap/image/poi.png', iconSize = [74, 74]) { + const layers = layerGroup.get(layerName).getLayers() + layers.forEach(layer => { + if (layer.uuid === uuid) { + const icon = L.icon({ iconUrl, iconSize }) + layer.setIcon(icon) } - }) - // console.log(feature,"1111111111111") - // debugger - if (feature.data.channelName != null) { - marker.bindTooltip(feature.data.channelName, { - offset: L.point([0, -10]), - direction: 'top', - permanent: false - }).openTooltip() - } - } - layers.addLayer(marker) - } - }) - featureGroup.addLayer(layers) - layerGroup.set(layerName, layers) - // map.on('zoom', () => { - // _removeLayerByLayerName(layerName) - // let layers = null - // // 判断是否是聚合图层 - // layers = createMarkerClusterLayer() - // features.map(feature => { - // var bounds = map.getBounds() - // // console.log("看看有没有坐标",feature.latLng); - // if (feature.hasOwnProperty('latLng') && bounds.contains(L.latLng(feature.latLng.lat, feature.latLng.lng))) { - // const marker = L.marker(feature.latLng, { icon }) - // if (createPopupFun !== null) { - // marker.uuid = feature.uuid || '' - // marker.resId = feature.resId || '' - // marker.on('click', async e => { - // if (feature.resourceName === 'video') { - // const params = [feature.indexCode] - // DS.openVideo(params) - // } else { - // const elementHtml = createPopupFun(feature) - // if (elementHtml) { - // console.log('L._addReMapWithter===============>', feature.latLng, elementHtml, map) - // L.popup({ className: 'detail-dialog' }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map) - // } - // } - // }) - // } - // layers.addLayer(marker) - // } - // }) - // featureGroup.addLayer(layers) - // layerGroup.set(layerName, layers) - // }) - } - const _addPointTestOnMap = function ( - features, url, layerName, createPopupFun) { - - let layers = null - // 判断是否是聚合图层 - layers = createMarkerClusterLayer() - features.map(feature => { - var bounds = map.getBounds() - // console.log("看看有没有坐标",feature.latLng); - if (layerName == '全部' ? feature.hasOwnProperty('latLng') && bounds.contains(L.latLng(feature.latLng.lat, feature.latLng.lng)) : feature.hasOwnProperty('latLng')) { - let icon = L.divIcon({ - iconSize: [36, 36], - html: feature.data, - className: "point-test", }) - const marker = L.marker(feature.latLng, { icon }) - if (createPopupFun !== null) { - marker.uuid = feature.uuid || '' - marker.resId = feature.resId || '' - marker.on('click', async e => { - if (feature.resourceName === 'video') { - const params = [feature.indexCode] - DS.openVideo(params) - } else { - const elementHtml = createPopupFun(feature) - if (elementHtml) { - console.log('L._addReMapWithter===============>', feature.latLng, elementHtml, map) - if (feature.type == 'videoSurveillance') { - L.popup({ className: 'detail-dialog', offset: [168, 240] }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map) - map.flyTo(feature.latLng) - } else { - L.popup({ className: 'detail-dialog' }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map) + } + /** + * 资源调拨算法专用方法，用于展示仓库到灾难点的路网数据 + * @param layerName {String}图层名字 + * @param storageList {Array} 调拨的仓库数组 + */ + const _addResourceCannibalizeRoadPathOnMap = function(layerName, storageList) { + const roadPath = [] + storageList.forEach(function(item) { + item.roadPathList.forEach(function(road) { + const roadLayer = L.geoJSON(road.route) + roadPath.push(roadLayer) + }) + }) + const markerGroup = L.layerGroup(roadPath) + featureGroup.addLayer(markerGroup) + layerGroup.set(layerName, markerGroup) + } + + /** + * 把单个单位添加到地图上 + * @param paramObject 参数对象 + * @return {*} 创建的图标，用来删除 + * @private + */ + const _addPointOnMap = function(paramObject) { + return addPointOnMap(paramObject, mapObj, featureGroup, layerGroup) + } + const _addResourceOnMapWithoutSuperMapCluster = function( + features, url, layerName, createPopupFun) { + console.log('_addResourceOnMapWithoutSuperMapCluster===============>', features, url, layerName, createPopupFun) + // 如果资源要素数量为0，则说明该种资源没有记录 + // if (features.length < 1) { + // return Promise.resolve(0); + // } + // 根据类型返回具体用聚合图层的样式。 + // const defaultStyle = typeToStyle(layerName) + // 创建图层 + // if (layerGroup.get(layerName)) { + // const haveLayers = layerGroup.get(layerName).getLayers() + // debugger; + // haveLayers.map(item=> { + // layerGroup.removeLayer(item) + // }) + + // } + let layers = null + // 判断是否是聚合图层 + layers = createMarkerClusterLayer() + const icon = createDefaultFeatureStyle({ + img: url, + iconSize: url == 'poi-event.png' ? [40, 40] : [36, 36] + }) + features.map(feature => { + var bounds = map.getBounds() + // console.log("看看有没有坐标",feature.latLng); + 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) { + marker.uuid = feature.uuid || '' + marker.resId = feature.resId || '' + marker.on('click', async e => { + if (feature.resourceName === 'video') { + const params = [feature.indexCode] + DS.openVideo(params) + } else { + const elementHtml = createPopupFun(feature) + if (elementHtml) { + console.log('L._addReMapWithter===============>', feature.latLng, elementHtml, map) + if (feature.type == 'videoSurveillance') { + L.popup({ className: 'detail-dialog', offset: [168, 240] }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map) + map.flyTo(feature.latLng) + } else if (feature.type == 'address') { + L.popup({ className: 'Address-Title-pop', closeButton: false }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map) + } else { + L.popup({ className: 'detail-dialog' }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map) + } + } + } + }) + // console.log(feature,"1111111111111") + // debugger + if (feature.data.channelName != null) { + marker.bindTooltip(feature.data.channelName, { + offset: L.point([0, -10]), + direction: 'top', + permanent: false + }).openTooltip() + } } - } + layers.addLayer(marker) } - }) - } - layers.addLayer(marker) - } - }) - featureGroup.addLayer(layers) - layerGroup.set(layerName, layers) - } - /** - * 点击展示弹窗 - */ - const _addPopOnMap = function ( - feature, url, layerName, createPopupFun) { - console.log('addPopOnMap===============>', feature, url, layerName, createPopupFun, map) - let layers = null - // 判断是否是聚合图层 - layers = createMarkerClusterLayer() - // 判断是否是聚合图层 - const icon = createDefaultFeatureStyle({ - img: url || 'the-head.png', - iconSize: [36, 36] - }) - // console.log("看看有没有坐标",feature.latLng); - if (feature.hasOwnProperty('latLng')) { - const marker = L.marker(feature.latLng, { icon }) - if (createPopupFun !== null) { - marker.uuid = feature.uuid || '' - marker.resId = feature.resId || '' - const elementHtml = createPopupFun(feature) - if (elementHtml) { - console.log('L.popup===============>', feature.latLng, elementHtml, map) - L.popup({ className: 'detail-dialog' }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map) - } - } - layers.addLayer(marker) + }) + featureGroup.addLayer(layers) + layerGroup.set(layerName, layers) + // map.on('zoom', () => { + // _removeLayerByLayerName(layerName) + // let layers = null + // // 判断是否是聚合图层 + // layers = createMarkerClusterLayer() + // features.map(feature => { + // var bounds = map.getBounds() + // // console.log("看看有没有坐标",feature.latLng); + // if (feature.hasOwnProperty('latLng') && bounds.contains(L.latLng(feature.latLng.lat, feature.latLng.lng))) { + // const marker = L.marker(feature.latLng, { icon }) + // if (createPopupFun !== null) { + // marker.uuid = feature.uuid || '' + // marker.resId = feature.resId || '' + // marker.on('click', async e => { + // if (feature.resourceName === 'video') { + // const params = [feature.indexCode] + // DS.openVideo(params) + // } else { + // const elementHtml = createPopupFun(feature) + // if (elementHtml) { + // console.log('L._addReMapWithter===============>', feature.latLng, elementHtml, map) + // L.popup({ className: 'detail-dialog' }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map) + // } + // } + // }) + // } + // layers.addLayer(marker) + // } + // }) + // featureGroup.addLayer(layers) + // layerGroup.set(layerName, layers) + // }) } - featureGroup.addLayer(layers) - layerGroup.set(layerName, layers) - } - /** - * 构建promise，使用uuid去超图服务查询features，得到结果就把promise状态置为已决议，并返回features - * @param idArray 资源的唯一标识数组，视频监控是camera_index_code，其他都是uuid - * @param layerConfigInfo 图层配置信息 - * @param type 资源类型，只有视频监控用的camera_index_code，其他都是uuid - * @returns {Promise} - * @private - */ - const _createPromiseByQueryService = function (idArray, layerConfigInfo, type) { - return createPromiseByQueryService(idArray, layerConfigInfo, type) - } + const _addPointTestOnMap = function( + features, url, layerName, createPopupFun) { - /** - * 资源上图通用方法 - * @param paramObject 参数数组 - * @return {*} - * @private - */ - const _addResourceOnMap = function (paramObject) { - return addResourceOnMap(paramObject, mapObj, featureGroup, layerGroup) - } - const _addResourceOnMapNew = function (features, config, getLayerPopupInfo, createPopupFun) { - return addResourceOnMapNew(features, config, getLayerPopupInfo, createPopupFun, mapObj, featureGroup, layerGroup) - } - const _getLayerPopupInfo = function (uuid, layerConfigInfo, type, latLng, createPopupFun, getLayerPopupInfo, popupClassName) { - return myGetLayerPopupInfo(uuid, layerConfigInfo, type, mapObj, latLng, createPopupFun, getLayerPopupInfo, popupClassName) - } - const _addResourceOnMapWithoutSuperMap = function (features, url, layerName, createPopupFun, WS) { - // console.log('这里的数据', features); - // debugger; - return addResourceOnMapWithoutSuperMap(features, url, layerName, createPopupFun, WS, featureGroup, layerGroup, map) - } - const _addPointsToMap = function (features, url, layerName, createPopupFun, WS) { - // console.log('这里的数据', features); - // debugger; - return addPointsToMap(features, url, layerName, createPopupFun, WS, featureGroup, layerGroup, map) - } - const _addResourceOnMapWithoutSuper = function (features, url, layerName, createPopupFun, WS) { - // console.log('这里的数据', features); - // debugger; - return addResourceOnMapWithoutSuper(features, url, layerName, createPopupFun, WS, featureGroup, layerGroup, map) - } - const _addPolygonToMap = function (a, b, c, d) { - var polygon = L.polygon([ - a, - b, - c, - d - ], { - color: '#A33B42', - fillColor: '#A75A81', - fillOpacity: 0.5 - }) - featureGroup.addLayer(polygon) - } - const _addNameToMap = function (config) { - // you can set .my-div-icon styles in CSS - config.map(item => { - var myIcon = L.divIcon({ html: item.name }) - L.marker([item.latLng.lng, item.latLng.lat], { icon: myIcon }).addTo(mapObj.map) - }) - } - const _addMountainToMap = function (config) { - // you can set .my-div-icon styles in CSS - const myIcon = L.icon({ - iconUrl: '/src/supermap/image/mountain.png', - iconSize: [32, 32] - }) - config.map(item => { - L.marker([item.latLng.lat, item.latLng.lng], { icon: myIcon, title: item.name }).addTo(mapObj.map) - }) - } - const _addMountainLayerToMap = function (config) { - var myStyle = { - color: 'green', - weight: 2, - opacity: 1, - fillColor: 'green', - fillOpacity: 0.2 + let layers = null + // 判断是否是聚合图层 + layers = createMarkerClusterLayer() + features.map(feature => { + var bounds = map.getBounds() + // console.log("看看有没有坐标",feature.latLng); + if (layerName == '全部' ? feature.hasOwnProperty('latLng') && bounds.contains(L.latLng(feature.latLng.lat, feature.latLng.lng)) : feature.hasOwnProperty('latLng')) { + let icon = L.divIcon({ + iconSize: [36, 36], + html: feature.data, + className: "point-test", + }) + const marker = L.marker(feature.latLng, { icon }) + if (createPopupFun !== null) { + marker.uuid = feature.uuid || '' + marker.resId = feature.resId || '' + marker.on('click', async e => { + if (feature.resourceName === 'video') { + const params = [feature.indexCode] + DS.openVideo(params) + } else { + const elementHtml = createPopupFun(feature) + if (elementHtml) { + console.log('L._addReMapWithter===============>', feature.latLng, elementHtml, map) + if (feature.type == 'videoSurveillance') { + L.popup({ className: 'detail-dialog', offset: [168, 240] }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map) + map.flyTo(feature.latLng) + } else { + L.popup({ className: 'detail-dialog' }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map) + } + } + } + }) + } + layers.addLayer(marker) + } + }) + featureGroup.addLayer(layers) + layerGroup.set(layerName, layers) + } + /** + * 点击展示弹窗 + */ + const _addPopOnMap = function( + feature, url, layerName, createPopupFun) { + console.log('addPopOnMap===============>', feature, url, layerName, createPopupFun, map) + let layers = null + // 判断是否是聚合图层 + layers = createMarkerClusterLayer() + // 判断是否是聚合图层 + const icon = createDefaultFeatureStyle({ + img: url || 'the-head.png', + iconSize: [36, 36] + }) + // console.log("看看有没有坐标",feature.latLng); + if (feature.hasOwnProperty('latLng')) { + const marker = L.marker(feature.latLng, { icon }) + if (createPopupFun !== null) { + marker.uuid = feature.uuid || '' + marker.resId = feature.resId || '' + const elementHtml = createPopupFun(feature) + if (elementHtml) { + console.log('L.popup===============>', feature.latLng, elementHtml, map) + L.popup({ className: 'detail-dialog' }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map) + } + } + layers.addLayer(marker) + } + featureGroup.addLayer(layers) + layerGroup.set(layerName, layers) + } + /** + * 构建promise，使用uuid去超图服务查询features，得到结果就把promise状态置为已决议，并返回features + * @param idArray 资源的唯一标识数组，视频监控是camera_index_code，其他都是uuid + * @param layerConfigInfo 图层配置信息 + * @param type 资源类型，只有视频监控用的camera_index_code，其他都是uuid + * @returns {Promise} + * @private + */ + const _createPromiseByQueryService = function(idArray, layerConfigInfo, type) { + return createPromiseByQueryService(idArray, layerConfigInfo, type) } - // const JsonUrl = '/src/supermap/json/shanxi_polygon.json'; - // var data = $.parseJSON($.ajax({ - // url: JsonUrl, // json文件位置，文件名 - // dataType: 'json', // 返回数据格式为json - // async: false - // }).responseText); - // 绘制地图边界 - L.geoJSON(data, { - style: myStyle - }).addTo(mapObj.map) - // you can set .my-div-icon styles in CSS - // var myIcon = './image/mountain.png'; - // config.map(item => { - // L.marker([item.latLng.lng, item.latLng.lat], { icon: myIcon }).addTo(mapObj.map); - // }); - } - const _addCircleToMap = function (latLng, r) { - // L.circle([latLng.lat, latLng.lng], { radius: r }).addTo(mapObj.map) - const polygon = L.circle([latLng.lat, latLng.lng], { radius: r }) - polygon.addTo(map) - PolygonArr.push(polygon) - } - const _mapPainyEnable = function () { - map.MapPaint.enable() - map.addControl(new MapPaint.SwitchControl()) - } - // 热力图 - const _thermodynamic = function (latLng, r, type) { - // const layers = [] - // latLng, r, strong - const thermodynamic = latLng - const heatLayer = L.heatLayer( - thermodynamic, - { - radius: r, - minOpacity: 0.4, - blur: 10, - gradient: { 0.5: 'green', 0.7: 'lime', 0.8: 'yellow', 0.9: 'orange', 1: 'red' } - } - ) - // layers.addLayer(heatLayer1) - // const markerGroup = L.layerGroup(layers) - featureGroup.addLayer(heatLayer) - layerGroup.set(type, heatLayer) - // debugger - } - const _addPathToMap = function (latLng, color) { - // console.log(latLng) - // debugger - const polyline = L.polyline(latLng, { color: color }) - // map.fitBounds(polyline.getBounds()) - polyline.addTo(map) - polylineArr.push(polyline) - } - const _addAreaToMap = function (latLng) { - // console.log(latLng) - // debugger - const polygon = L.polygon(latLng, { color: 'red' }) - // map.fitBounds(polyline.getBounds()) - polygon.addTo(map) - PolygonArr.push(polygon) - } - return { - // 按图层配置名称删除 - removeLayerByLayerName: _removeLayerByLayerName, - removeLayersByLayerNameArray: _removeLayersByLayerNameArray, - clearAllLayers: _clearAllLayers, - // 增删改要素 - updateResourceFeature: _updateResourceFeature, - createPopupConfigInfo: _createPopupConfigInfo, - addResourceFeature: _addResourceFeature, - hasLocationInfo: _hasLocationInfo, - getLocale: _getLocale, - deleteResourceFeature: _deleteResourceFeature, - drawMarkerPopupUniversalFun: _drawMarkerPopupUniversalFun, - addExternalFunToObj: _addExternalFunToObj, - changeMap: _changeMap, - ZXYRenderMapSwitch: _ZXYRenderMapSwitch, - addFeatureArrayOnMap: _addFeatureArrayOnMap, - addTheOneFeatureOnMapByPoint: _addTheOneFeatureOnMapByPoint, - locationAndCreatePopup: _locationAndCreatePopup, - showLayersByUuidArray: _showLayersByUuidArray, - showCameraByIndexCodeArray: _showCameraByIndexCodeArray, - convertCaseOfAttributes: _convertCaseOfAttributes, - addressMatchCode: _addressMatchCode, - addressMatchCodeByAmap: _addressMatchCodeByAmap, - queryLayersBySql: _queryLayersBySql, - measureingLine: _measureingLine, - measureingArea: _measureingArea, - findPathDrawMarker: _findPathDrawMarker, - findPathProcess: _findPathProcess, - findPathInResourceCannibalize: _findPathInResourceCannibalize, - findPathFormStorageToDisaster: _findPathFormStorageToDisaster, - addResourceCannibalizeDataOnMap: _addResourceCannibalizeDataOnMap, - addResourceCannibalizeRoadPathOnMap: _addResourceCannibalizeRoadPathOnMap, - replaceMarkerIcon: _replaceMarkerIcon, - // 添加单个点位到地图上 - addPointOnMap: _addPointOnMap, - // 使用uuid集合去超图服务查询资源要素，得到结果就把promise状态置为已决议，并返回features - createPromiseByQueryService: _createPromiseByQueryService, - // 资源上图通用方法 - addResourceOnMap: _addResourceOnMap, - drawMarkerThroughPoint: _drawMarkerThroughPoint, - changeMarkerTooltip: _changeMarkerTooltip, - mapFlyTo: _mapFlyTo, // 地图视角移动 - showVideoOnMap: _showVideoOnMap, // 实时视频展示及播放 - addImgMaker: _addImgMaker, - getLayerPopupInfo: _getLayerPopupInfo, - addResourceOnMapWithoutSuper: _addResourceOnMapWithoutSuperMap, - addResourceOnMapWithoutSuperMap: _addResourceOnMapWithoutSuper, - addPolygonToMap: _addPolygonToMap, - addResourceOnMapNew: _addResourceOnMapNew, - addNameToMap: _addNameToMap, - addMountainToMap: _addMountainToMap, - addMountainLayerToMap: _addMountainLayerToMap, - drawingLine: _drawingLine, - drawingArea: _drawingArea, - drawingLineByData: _drawingLineByData, - drawingAreaByData: _drawingAreaByData, - removerPolyline: _removerPolyline, - removerPolygon: _removerPolygon, - mapPainyEnable: _mapPainyEnable, - pathAnalysis: _pathAnalysis, - openPopup: _openPopup, - openPopupVideoSurveillance: _openPopupVideoSurveillance, - openPopupRoadGovernance: _openPopupRoadGovernance, - closeAllPopup: _closeAllPopup, - addMovingMarker: _addMovingMarker, - addResourceOnMapWithoutSuperMapCluster: _addResourceOnMapWithoutSuperMapCluster, - addPopOnMap: _addPopOnMap, - addDynamicMapLayer: _addDynamicMapLayer, - addPointsToMap: _addPointsToMap, - addCircleToMap: _addCircleToMap, - thermodynamic: _thermodynamic, - addPathToMap: _addPathToMap, - addPointTestOnMap: _addPointTestOnMap, - addAreaToMap:_addAreaToMap, - } -} + /** + * 资源上图通用方法 + * @param paramObject 参数数组 + * @return {*} + * @private + */ + const _addResourceOnMap = function(paramObject) { + return addResourceOnMap(paramObject, mapObj, featureGroup, layerGroup) + } + const _addResourceOnMapNew = function(features, config, getLayerPopupInfo, createPopupFun) { + return addResourceOnMapNew(features, config, getLayerPopupInfo, createPopupFun, mapObj, featureGroup, layerGroup) + } + const _getLayerPopupInfo = function(uuid, layerConfigInfo, type, latLng, createPopupFun, getLayerPopupInfo, popupClassName) { + return myGetLayerPopupInfo(uuid, layerConfigInfo, type, mapObj, latLng, createPopupFun, getLayerPopupInfo, popupClassName) + } + const _addResourceOnMapWithoutSuperMap = function(features, url, layerName, createPopupFun, WS) { + // console.log('这里的数据', features); + // debugger; + return addResourceOnMapWithoutSuperMap(features, url, layerName, createPopupFun, WS, featureGroup, layerGroup, map) + } + const _addPointsToMap = function(features, url, layerName, createPopupFun, WS) { + // console.log('这里的数据', features); + // debugger; + return addPointsToMap(features, url, layerName, createPopupFun, WS, featureGroup, layerGroup, map) + } + const _addResourceOnMapWithoutSuper = function(features, url, layerName, createPopupFun, WS) { + // console.log('这里的数据', features); + // debugger; + return addResourceOnMapWithoutSuper(features, url, layerName, createPopupFun, WS, featureGroup, layerGroup, map) + } + const _addPolygonToMap = function(a, b, c, d) { + var polygon = L.polygon([ + a, + b, + c, + d + ], { + color: '#A33B42', + fillColor: '#A75A81', + fillOpacity: 0.5 + }) + featureGroup.addLayer(polygon) + } + const _addNameToMap = function(config) { + // you can set .my-div-icon styles in CSS + config.map(item => { + var myIcon = L.divIcon({ html: item.name }) + L.marker([item.latLng.lng, item.latLng.lat], { icon: myIcon }).addTo(mapObj.map) + }) + } + const _addMountainToMap = function(config) { + // you can set .my-div-icon styles in CSS + const myIcon = L.icon({ + iconUrl: '/src/supermap/image/mountain.png', + iconSize: [32, 32] + }) + config.map(item => { + L.marker([item.latLng.lat, item.latLng.lng], { icon: myIcon, title: item.name }).addTo(mapObj.map) + }) + } + const _addMountainLayerToMap = function(config) { + var myStyle = { + color: 'green', + weight: 2, + opacity: 1, + fillColor: 'green', + fillOpacity: 0.2 + } + // const JsonUrl = '/src/supermap/json/shanxi_polygon.json'; + // var data = $.parseJSON($.ajax({ + // url: JsonUrl, // json文件位置，文件名 + // dataType: 'json', // 返回数据格式为json + // async: false + // }).responseText); + // 绘制地图边界 + L.geoJSON(data, { + style: myStyle + }).addTo(mapObj.map) + // you can set .my-div-icon styles in CSS + // var myIcon = './image/mountain.png'; + // config.map(item => { + // L.marker([item.latLng.lng, item.latLng.lat], { icon: myIcon }).addTo(mapObj.map); + // }); + } + const _addCircleToMap = function(latLng, r) { + // L.circle([latLng.lat, latLng.lng], { radius: r }).addTo(mapObj.map) + const polygon = L.circle([latLng.lat, latLng.lng], { radius: r }) + polygon.addTo(map) + PolygonArr.push(polygon) + } + const _mapPainyEnable = function() { + map.MapPaint.enable() + map.addControl(new MapPaint.SwitchControl()) + } + // 热力图 + const _thermodynamic = function(latLng, r, type) { + // const layers = [] + // latLng, r, strong + const thermodynamic = latLng + const heatLayer = L.heatLayer( + thermodynamic, { + radius: r, + minOpacity: 0.4, + blur: 10, + gradient: { 0.5: 'green', 0.7: 'lime', 0.8: 'yellow', 0.9: 'orange', 1: 'red' } + } + ) + // layers.addLayer(heatLayer1) + // const markerGroup = L.layerGroup(layers) + featureGroup.addLayer(heatLayer) + layerGroup.set(type, heatLayer) + // debugger + } + const _addPathToMap = function(latLng, color) { + // console.log(latLng) + // debugger + const polyline = L.polyline(latLng, { color: color }) + // map.fitBounds(polyline.getBounds()) + polyline.addTo(map) + polylineArr.push(polyline) + } + + const _addAreaToMap = function(latLng) { + // console.log(latLng) + // debugger + const polygon = L.polygon(latLng, { color: 'red' }) + // map.fitBounds(polyline.getBounds()) + polygon.addTo(map) + PolygonArr.push(polygon) + } + return { + // 按图层配置名称删除 + removeLayerByLayerName: _removeLayerByLayerName, + removeLayersByLayerNameArray: _removeLayersByLayerNameArray, + clearAllLayers: _clearAllLayers, + // 增删改要素 + updateResourceFeature: _updateResourceFeature, + createPopupConfigInfo: _createPopupConfigInfo, + addResourceFeature: _addResourceFeature, + hasLocationInfo: _hasLocationInfo, + getLocale: _getLocale, + deleteResourceFeature: _deleteResourceFeature, + drawMarkerPopupUniversalFun: _drawMarkerPopupUniversalFun, + addExternalFunToObj: _addExternalFunToObj, + changeMap: _changeMap, + ZXYRenderMapSwitch: _ZXYRenderMapSwitch, + addFeatureArrayOnMap: _addFeatureArrayOnMap, + addTheOneFeatureOnMapByPoint: _addTheOneFeatureOnMapByPoint, + locationAndCreatePopup: _locationAndCreatePopup, + showLayersByUuidArray: _showLayersByUuidArray, + showCameraByIndexCodeArray: _showCameraByIndexCodeArray, + convertCaseOfAttributes: _convertCaseOfAttributes, + addressMatchCode: _addressMatchCode, + addressMatchCodeByAmap: _addressMatchCodeByAmap, + queryLayersBySql: _queryLayersBySql, + measureingLine: _measureingLine, + measureingArea: _measureingArea, + findPathDrawMarker: _findPathDrawMarker, + findPathProcess: _findPathProcess, + findPathInResourceCannibalize: _findPathInResourceCannibalize, + findPathFormStorageToDisaster: _findPathFormStorageToDisaster, + addResourceCannibalizeDataOnMap: _addResourceCannibalizeDataOnMap, + addResourceCannibalizeRoadPathOnMap: _addResourceCannibalizeRoadPathOnMap, + replaceMarkerIcon: _replaceMarkerIcon, + // 添加单个点位到地图上 + addPointOnMap: _addPointOnMap, + // 使用uuid集合去超图服务查询资源要素，得到结果就把promise状态置为已决议，并返回features + createPromiseByQueryService: _createPromiseByQueryService, + // 资源上图通用方法 + addResourceOnMap: _addResourceOnMap, + drawMarkerThroughPoint: _drawMarkerThroughPoint, + changeMarkerTooltip: _changeMarkerTooltip, + mapFlyTo: _mapFlyTo, // 地图视角移动 + showVideoOnMap: _showVideoOnMap, // 实时视频展示及播放 + addImgMaker: _addImgMaker, + getLayerPopupInfo: _getLayerPopupInfo, + addResourceOnMapWithoutSuper: _addResourceOnMapWithoutSuperMap, + addResourceOnMapWithoutSuperMap: _addResourceOnMapWithoutSuper, + addPolygonToMap: _addPolygonToMap, + addResourceOnMapNew: _addResourceOnMapNew, + addNameToMap: _addNameToMap, + addMountainToMap: _addMountainToMap, + addMountainLayerToMap: _addMountainLayerToMap, + drawingLine: _drawingLine, + drawingArea: _drawingArea, + drawingLineByData: _drawingLineByData, + drawingAreaByData: _drawingAreaByData, + removerPolyline: _removerPolyline, + removerPolygon: _removerPolygon, + mapPainyEnable: _mapPainyEnable, + pathAnalysis: _pathAnalysis, + openPopup: _openPopup, + openPopupVideoSurveillance: _openPopupVideoSurveillance, + openPopupRoadGovernance: _openPopupRoadGovernance, + closeAllPopup: _closeAllPopup, + addMovingMarker: _addMovingMarker, + addResourceOnMapWithoutSuperMapCluster: _addResourceOnMapWithoutSuperMapCluster, + addPopOnMap: _addPopOnMap, + addDynamicMapLayer: _addDynamicMapLayer, + addPointsToMap: _addPointsToMap, + addCircleToMap: _addCircleToMap, + thermodynamic: _thermodynamic, + addPathToMap: _addPathToMap, + addPointTestOnMap: _addPointTestOnMap, + addAreaToMap: _addAreaToMap, + } +} \ No newline at end of file diff --git a/src/views/pages/area/components/ImportantAreaPop.vue b/src/views/pages/area/components/ImportantAreaPop.vue index df87287..433b9f7 100644 --- a/src/views/pages/area/components/ImportantAreaPop.vue +++ b/src/views/pages/area/components/ImportantAreaPop.vue @@ -2,17 +2,49 @@
- {{ feature.data.areaName || "" }} + 重点区域详情
-
{{ feature.data.location || "" }}
+
+
+

+ 区域名称： + {{ feature.data.areaName || "" }} +

+

+ 位置： + {{ feature.data.location || "" }} +

+
+
+

+ 管理单位： + {{ feature.data.management || "" }} +

+

+ 区域简介： + {{ getAbout(feature.data.about)}} +

+
+
+

+ 负责人： + 张三 +

+

+ 联系方式： + 13360907765 +

+
-
-
-
管理单位：{{ feature.data.management || "" }}
- -
景区简介：{{ getAbout(feature.data.about)}}
- +
+
+
+ {{item.menuName}} +
+
+
+
当前人数
@@ -26,20 +58,6 @@
外地人数
{{ feature.data.nonlocalNums || "0" }}人
-
@@ -54,26 +72,20 @@
- -
- - - 暂无图片 +
+
+ 月累计人数： + 123112 +
+
+ 月累计同比： + -1.5% +
-

周边监控

+

人员聚集明细

- + - +
+
+
+
+ + + + + + + + +
+
+ 右 +
+
+
+
+ 姓名: + + + 人员类型: + + + + + 查询 +
+
+ + + + + + + + + + + + + + + + + +
+
+
+
+ 设施类型: + + + + + 位置： + + + 查询 +
+
+ + + + + + + + + + + + + + +
+
@@ -102,6 +246,7 @@ import 'viewerjs/dist/viewer.css' import { directive as viewer } from "v-viewer" import * as echarts from 'echarts' import { selectLocalWeekArea, selectLocalMonthArea, selectByAreaImage } from '@/api/area.js' +import { getCameraAll,getCameraLabel,getCameraAllLabel,searchCamera,getCameraAllOrgan,getCameraByParentId,selectByLabelName,selectByChannelName } from '@/api/videoSurveillance/index' export default { name: "", props: { @@ -113,7 +258,8 @@ export default { }, }, mounted() { - selectLocalWeekArea({areaName: this.feature.data.areaName}).then((res) => { + this.$nextTick(() => { + selectLocalWeekArea({areaName: this.feature.data.areaName}).then((res) => { res.data.data.forEach((item) => { this.weekData.time.unshift(item.pushTime) this.weekData.local.unshift(item.localNums) @@ -122,6 +268,8 @@ export default { this.chartData = this.weekData this.initCharts() }) + }) + selectLocalMonthArea({areaName: this.feature.data.areaName}).then((res) => { res.data.data.forEach((item) => { this.monthData.time.unshift(item.pushTime) @@ -139,14 +287,32 @@ export default { }) } }) + getCameraAllLabel().then((res) => { + this.tabList = res.data.data + }); + getCameraAll().then((res) => { + this.cameraAllData = res.data + // this.addResourceTomap('cameraAll',res.data); + }) + getCameraAllOrgan({parentId:'S4NbecfYB1DBH8HNULGS34'}).then((res) => { + this.cameraTree = res.data.data + console.log(this.cameraTree) + res.data.data.forEach((item) => { + this.cameraTreeSingle.push({ + channelName: item.name, + children: [] + }) + }) + }) }, data() { return { filterButton:{ - typeSelect:['近7天','近30天',], - typeSelectActive:'近7天', + typeSelect:['当天人流量','近30天人流量',], + typeSelectActive:'当天人流量', }, cameraData: [], + personnelAggregationData:[], weekData:{ time:[], local:[], @@ -158,7 +324,30 @@ export default { outer:[], }, chartData:{}, - picUrl: '' + picUrl: '', + selectedIndex:0, + menuList:[{ + menuName:"人流量", + },{ + menuName:"视频监控", + },{ + menuName:"人员", + },{ + menuName:"设施", + }], + peopleTypeOption:[{label:"人员类型",value:"1"}], + peopleDataResource:[{name:"张三",peopleType:"普通",department:"市政府",sex:"男",telePhone:"1334650987"}], + searchNameValue:"",//查询姓名 + selectTypeValue:"",//人员类型 + addressValue:"",//位置 + selectedFacilitiesType:"",//设施类型 + facilitiesTypeOption:[{label:"设施类型",value:"1"}], + facilitiesDataResource:[{facilitiesType:"设施类型1",address:"李沧",manageMan:"张山",telePhone:"1334650987"}], + cameraAllData:[], + cameraTreeIsShow:true, + cameraTreeSingle: [], + checkStatus: '2', + cameraTree:[], }; }, methods: { @@ -306,6 +495,121 @@ export default { const viewer = this.$el.querySelector('.images').$viewer viewer.show() }, + //点击上部Tab底部显示不同的内容 + handleCheck(item,index){ + this.selectedIndex = index; + }, + //点击查询按钮查询列表数据 + handleSearch(){ + if(this.selectedIndex ==2){ + console.log('人员类型',this.selectTypeValue); + //this.peopleDataResource(); + }else if(this.selectedIndex ==3){ + console.log('位置',this.selectedFacilitiesType); + //this.peopleDataResource(); + } + }, + searchLabel(value) { + const params = { + labelName:value + } + selectByLabelName(params).then((res) => { + console.log(res) + this.tabList = res.data.data + }) + }, + searchCameraTree(value) { + if(value.length > 0){ + const params = { + channelName:value + } + selectByChannelName(params).then((res) => { + console.log(res) + this.cameraTree = [] + res.data.data.forEach((item) => { + this.cameraTree.push({ + name: item.channelName, + gpsX: item.gpsX, + gpsY: item.gpsY, + channelCode:item.channelCode, + leaf:true, + }) + }) + }) + }else { + getCameraAllOrgan({parentId:'S4NbecfYB1DBH8HNULGS34'}).then((res) => { + this.cameraTree = res.data.data + }) + } + }, + reset() { + this.checkboxGroup = [] + this.checkStatus = "2"; + this.cameraTreeIsShow = true + getCameraAllOrgan({parentId:'S4NbecfYB1DBH8HNULGS34'}).then((res) => { + this.cameraTree = res.data.data + }) + document.getElementById("tree").scrollTop = 0; + }, + loadNode(node, resolve) { + // if (node.level === 0) { + // return resolve([{ name: 'region' }]); + // } + console.log(node) + if (node.level > 0) { + let subData = [] + getCameraAllOrgan({parentId:node.data.id}).then((res) => { + if(res.data.data.length == 0){ + const params = { + parentId:node.data.id, + checkStatus: this.checkStatus=='2'?["0","1"]:this.checkStatus, + } + getCameraByParentId(params).then((res) => { + res.data.data.forEach((item) => { + subData.push({ + name: item.channelName, + gpsX: item.gpsX, + gpsY: item.gpsY, + channelCode:item.channelCode, + checkStatus:item.checkStatus, + leaf:true, + }) + }) + return resolve(subData); + }) + }else{ + subData = res.data.data + return resolve(subData); + } + }) + } + }, + treeCameraClick(data) { + console.log(data) + if(data.channelCode){ + const cameraTree = [{ + latLng: { lat: data.gpsY, lng: data.gpsX }, + data: data, + type:'cameraTree' + }] + this.$parent.hiMapFun.removeLayerByLayerName("cameraTree"); + this.$parent.hiMapFun.openPopupVideoSurveillance(cameraTree[0]) + const arr = [0,0.0,'','0','0.0'] + if(arr.indexOf(data.gpsX) == -1){ + this.$parent.hiMapFun.addResourceOnMapWithoutSuperMapCluster(cameraTree,"poi-red.png", "cameraTree"); + this.$parent.hiMap.mapObj.map.flyTo({ lat: data.gpsY, lng: data.gpsX }); + } + } + }, + filterNode(value, data) { + if (value == "2") return true; + if (value == "0") { + return data.checkStatus == 0; + } + if (value == "1") { + return data.checkStatus == 1; + } + }, }, directives: { viewer: viewer({ @@ -325,8 +629,8 @@ export default { border: 1px solid rgba(50,227,235,.95); } .leaflet-popup-content { - width: 734px !important; - height: 453px; + width: 750px !important; + height: 500px; padding: 12px 16px; .pop-box { width: 100%; @@ -345,6 +649,9 @@ export default { .title{ color: #fff; font-size: 16px; + span:nth-child(1) { + font-weight:bold; + } span:nth-child(2) { display: inline-block; width: 40px; @@ -358,18 +665,68 @@ export default { } } - .site-address { + .site-base-information{ + height: 90px; margin: 6px 0; padding-left: 20px; - background: url(../../../../assets/construction/iconAddress.png) no-repeat left center; color: rgba(255, 255, 255, .6); + padding: 10px; + //line-height: 26px; + .item{ + width: 100%; + height:20px; + //background-color: red; + margin-top: 10px; + display: flex; + flex-wrap: wrap; + &>p{ + margin: 0 !important; + width:50%; + flex:1; + color:#ffffff; + } + + } + .item:first-child{ + margin-top: 0; + } } .site-content { display: flex; - .site-content-left { - width: 392px; - margin-right: 29px; + flex-direction: column; + .site-content-title{ + width:100%; + height:30px; + //background-color:red; + border-bottom:solid 1px #fff ; + display: flex; + flex-wrap: wrap; + .item{ + padding-top: 5px; + margin-left: 2px; + //flex:1; + height:30px; + width:100px; + text-align: center; + //background: #abcdef; + line-height: 25px; + cursor: pointer; + } + .is-active{ + text-decoration:underline; + } + } + .site-content-content{ + display: flex; + flex-direction: row; + padding-top: 10px; + .site-content-left { + width: 372px; + margin-right: 15px; + height: 310px; + overflow-y: auto; + overflow-x: hidden; .left-mid-line { margin: 6px 0; } @@ -416,9 +773,87 @@ export default { height: 206px; } } + .el-input { + width: 328px; + } + .el-input__inner { + border: 1px solid rgba(31,254,253,.9); + color: #fff; + border-radius: unset; + background: rgba($color: #203b5d, $alpha: .8); + &::placeholder { + color: rgba($color: #fff, $alpha: 0.6); + } + } + .el-input__prefix { + color: rgba(31,254,253,.9); + } + + .el-checkbox-group { + height: 316px; + width: 372px; + overflow-y: auto; + margin-top: 6px; + &::-webkit-scrollbar { + width: 8px; + background-color: #10335e; + } + &::-webkit-scrollbar-thumb { + background-color: #446dac !important; + } + } + .el-checkbox-button { + border-radius: 15px; + margin: 10px; + .el-checkbox-button__inner { + height: 30px; + line-height: 6px; + border-radius: 15px; + background: linear-gradient(0deg, rgba($color: #24517b, $alpha: 1) 0, rgba($color: #24517b, $alpha: 0) 100%); + border: 1px solid #1d98a0; + font-size: 16px; + color: #1ffefd; + } + .el-checkbox-button__inner:hover { + border: 1px solid #1ffefd; + background: linear-gradient(0deg, #1577d3 0%, #1251ab 100%); + } + } + .el-checkbox-button.is-checked { + .el-checkbox-button__inner{ + color: #fff; + border: 1px solid #1ffefd; + background: linear-gradient(0deg, #1577d3 0%, #1251ab 100%); + } + } + + .el-tree { + width: 366px; + height: 300px; + overflow-y: auto; + margin-top: 10px; + background: transparent; + color: #fff; + + &::-webkit-scrollbar { + width: 8px; + background-color: #10335e; + } + &::-webkit-scrollbar-thumb { + background-color: #446dac !important; + } + + .el-tree-node__content:hover { + background: rgba(27,255,255,.2); + } + .el-tree-node:focus > .el-tree-node__content { + background-color: rgba(27,255,255,.2); + color: #fff; + } + } } .site-content-right { - width: 280px; + width: 400px; .img-container { width: 280px; height: 158px; @@ -427,6 +862,22 @@ export default { align-items: center; justify-content: center; } + .people-total{ + width: 310px; + height: 60px; + cursor: pointer; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + .year-on-year{ + margin-left: 10px; + } + } .video-table { margin-top: 20px; h4 { @@ -459,6 +910,176 @@ export default { } } } + } + + } + .table-filter{ + width:100%; + height:30px; + //background-color: red; + //text-align: center; + display: flex; + justify-content: "space-between"; + width:700px; + margin-top: 10px; + .span-text{ + line-height: 30px; + margin-right: 10px; + } + .el-input { + width: 200px; + } + .el-input__inner { + width: 160px; + height: 30px; + padding-left:5px; + border: 1px solid rgba(31,254,253,.9); + color: #fff; + background: rgba($color: #203b5d, $alpha: .8); + border-radius: unset; + &::placeholder { + color: rgba($color: #fff, $alpha: 0.6); + } + } + .el-input__prefix { + color: rgba(31,254,253,.9); + left: 130px; + i{ + height: 30px; + line-height: 30px; + } + //width:160px; + } + + .el-select { + // margin-left: 10px; + .el-input { + width: 160px; + } + .el-input__suffix-inner{ + i{line-height: 30px;} + } + } + .el-button{ + position: absolute; + right: 18px; + //height: 30px; + line-height: 0; + background-color: #1fa2fe; + border:solid 1px #1fa2fe ; + color:#ffffff; + } + } + .site-content-people { + display: flex; + flex-direction: column; + .people-table{ + margin-top: 10px; + .el-table { + border: 1px solid #325d94; + width: 100%; + background: transparent; + th,td { + border-right: 1px solid #325d94 !important; + } + // .descending.is-leaf.is-sortable { + // .sort-caret { + // border-top-color: #1dfeff; + // } + // } + } + .cell { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + font-size: 16px; + font-weight: normal; + text-align: center; + height: 36px; + line-height: 36px; + } + .el-table th.is-leaf { + border: 1px solid #1f557c; + } + .el-table td { + border: 0; + padding: 5px 0; + } + .el-table th { + padding: 5px 0; + } + .el-table::before { + height: 0px; + } + .el-table__row:nth-of-type(even) > td { + background-color: #113660 !important; + } + .el-table__body-wrapper { + &::-webkit-scrollbar { + width: 8px; + background-color: #10335e; + } + &::-webkit-scrollbar-thumb { + background-color: #446dac !important; + } + } + } + + } + .site-content-facilities { + display: flex; + flex-direction: column; + .facilities-table{ + margin-top: 10px; + .el-table { + border: 1px solid #325d94; + width: 100%; + background: transparent; + th,td { + border-right: 1px solid #325d94 !important; + } + // .descending.is-leaf.is-sortable { + // .sort-caret { + // border-top-color: #1dfeff; + // } + // } + } + .cell { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + font-size: 16px; + font-weight: normal; + text-align: center; + height: 36px; + line-height: 36px; + } + .el-table th.is-leaf { + border: 1px solid #1f557c; + } + .el-table td { + border: 0; + padding: 5px 0; + } + .el-table th { + padding: 5px 0; + } + .el-table::before { + height: 0px; + } + .el-table__row:nth-of-type(even) > td { + background-color: #113660 !important; + } + .el-table__body-wrapper { + &::-webkit-scrollbar { + width: 8px; + background-color: #10335e; + } + &::-webkit-scrollbar-thumb { + background-color: #446dac !important; + } + } + } } } diff --git a/src/views/pages/area/components/ImportantAreaPopBack.vue b/src/views/pages/area/components/ImportantAreaPopBack.vue new file mode 100644 index 0000000..df87287 --- /dev/null +++ b/src/views/pages/area/components/ImportantAreaPopBack.vue @@ -0,0 +1,511 @@ + + + + diff --git a/src/views/pages/civilizedCity/components/EventListDetailsPop.vue b/src/views/pages/civilizedCity/components/EventListDetailsPop.vue index a5be5c3..055f248 100644 --- a/src/views/pages/civilizedCity/components/EventListDetailsPop.vue +++ b/src/views/pages/civilizedCity/components/EventListDetailsPop.vue @@ -1,11 +1,15 @@ - diff --git a/src/views/pages/civilizedCity/components/EventListDetailsPopBack.vue b/src/views/pages/civilizedCity/components/EventListDetailsPopBack.vue new file mode 100644 index 0000000..8e08966 --- /dev/null +++ b/src/views/pages/civilizedCity/components/EventListDetailsPopBack.vue @@ -0,0 +1,202 @@ + + +