From 02d70b4b8d4eccd4d246fe936f9661f44b5eef86 Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 19 Oct 2022 17:10:48 +0800 Subject: [PATCH] =?UTF-8?q?=E8=A5=BF=E6=B5=B7=E5=B2=B8=E8=A7=86=E9=A2=91?= =?UTF-8?q?=E5=9C=B0=E5=9B=BE=E5=9B=BE=E6=A0=87=E7=82=B9=E5=87=BB=E5=88=87?= =?UTF-8?q?=E6=8D=A2=E6=96=B9=E5=BC=8F=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- front/src/supermap/advance-init.js | 4064 +++++++++-------- .../views/home/videoSurveillance/index.vue | 4 +- 2 files changed, 2043 insertions(+), 2025 deletions(-) diff --git a/front/src/supermap/advance-init.js b/front/src/supermap/advance-init.js index 1ce102db..effa837d 100644 --- a/front/src/supermap/advance-init.js +++ b/front/src/supermap/advance-init.js @@ -12,20 +12,20 @@ import { getDoubleCharCount, getSingleCharCount } from '../utils/index' import data from './json/shanxi_polygon.json' // 引入生成弹窗的方法 import { - createSearchAddressTitlePop, - createCameraDetailsPop, + createSearchAddressTitlePop, + createCameraDetailsPop, } 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 || {} @@ -33,2045 +33,2063 @@ const SuperMap = window.SuperMap || {} let isLocated = true let polylineArr = [] let PolygonArr = [] -/** - * 地图功能接口类 - * 说明：该类中的方法带“_”为对外暴露的方法，调用时去掉“_”；不带“_”的为内部方法，不可调用。 - * @param mapObj {Object} 设置全局参数对象 - * @constructor - */ +const restoreIconObj = { + layerId: 0, + restoreIcon: null, + currentLayer: null, + } + /** + * 地图功能接口类 + * 说明：该类中的方法带“_”为对外暴露的方法，调用时去掉“_”；不带“_”的为内部方法，不可调用。 + * @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 && L.supermap.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 { - const elementHtml = createSearchAddressTitlePop(feature) - L.popup({ className: 'Address-Title-pop', closeButton: false }) - .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 && L.supermap.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', - }) - featureService.editFeatures(deleteParams, (serviceResult) => { - if (serviceResult.result.succeed) { - console.log('删除数据成功') + /** + * 根据图层名移除图层 + * @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 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({ + } + /** + * 清空地图（除去底图） + * @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 { + const elementHtml = createSearchAddressTitlePop(feature) + L.popup({ className: 'Address-Title-pop', closeButton: false }) + .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() + } + } + + /** + * 展示普通图层 + * @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 - 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' }) + } + /** + * @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) - } - ) }) - } - }, - } - ) - 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) + layers.push(markerLayer) + }) + const markerGroup = L.layerGroup(layers) + featureGroup.addLayer(markerGroup) + layerGroup.set(layerName, markerGroup) } - }) - } - /** - * 测量距离 - * */ - 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, + /** + * 已知经纬度，根据数据对象添加要素到地图上，并且可瞬间点位该坐标 + * @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), }) - 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) - mybus.$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("请先选择需要分析的起点与终点!"); - } - } - - /** - * 地址匹配正向匹配(基于高德地图) - * @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) - } - ) - } - }) - }, + const latLng = markerLayer.getLatLng() + featureGroup.addLayer(markerLayer) + layerGroup.set(layerName, markerLayer) + if (data !== '') { + const responseData = { + layerConfigInfo: layerConfigInfo, + entityData: data, + allMapObject: { mapObj: mapObj }, } - ) - featureGroup.addLayer(resultLayerConfig) - layerGroup.set(layerName, resultLayerConfig) - } - }) - } - /** - * 把单个单位添加到地图上 - * @param paramObject 参数对象 - * @return {*} 创建的图标，用来删除 - * @private - */ - const _addPointOnMap = function (paramObject) { - return addPointOnMap(paramObject, mapObj, featureGroup, layerGroup) - } - const _addResourceOnMapWithoutSuperMapCluster = function ( - features, - url, - layerName, - createPopupFun, - url2 - ) { - console.log( - '_addResourceOnMapWithoutSuperMapCluster===============>', - features, - url, - layerName, - createPopupFun, - url2 - ) - // 如果资源要素数量为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) - // }) - - // } - _removeLayerByLayerName(layerName) - let layers = null - // 判断是否是聚合图层 - layers = createMarkerClusterLayer() - const icon1 = createDefaultFeatureStyle({ - img: url, - iconSize: [33, 33], - }) - const icon2 = createDefaultFeatureStyle({ - img: url2, - iconSize: [33, 33], - }) - features.map((feature) => { - var bounds = map.getBounds() - // console.log("看看有没有坐标",feature.latLng); - if ( feature.hasOwnProperty('latLng')) { - let icon = feature.active?icon2:icon1 - 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) + let elementHtml = '' + if (popupType === 'gudEvn') { + // elementHtml = createGudEvnPopup(responseData) + } else if (popupType === 'storage') { + // elementHtml = createStorageAndGoodsPopup(responseData) } 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) - } - } + // 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) + }) } - }) } - marker.on('click', e=>{ - console.log('点位数据', e) - - mybus.emit('pointMarkerClick', feature) - }) - 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) + map.flyTo(latLng, 10, { duration: 0.15 }) } - 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) - } - /** - * 资源上图通用方法 - * @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, + /** + * 根据图层对象直接定位并直接弹出弹窗 + * @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() } - // 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 }) - polyline.addTo(map) - polylineArr.push(polyline) - // debugger - // map.fitBounds(polyline.getBounds()) - } - 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, - // 添加单个点位到地图上 - 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, - openPopup: _openPopup, - openPopupVideoSurveillance: _openPopupVideoSurveillance, - closeAllPopup: _closeAllPopup, - addMovingMarker: _addMovingMarker, - addResourceOnMapWithoutSuperMapCluster: - _addResourceOnMapWithoutSuperMapCluster, - addPopOnMap: _addPopOnMap, - addDynamicMapLayer: _addDynamicMapLayer, - addPointsToMap: _addPointsToMap, - addCircleToMap: _addCircleToMap, - thermodynamic: _thermodynamic, - addPathToMap: _addPathToMap, - } -} + /** + * @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) + mybus.$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("请先选择需要分析的起点与终点!"); + } + } + + /** + * 地址匹配正向匹配(基于高德地图) + * @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 paramObject 参数对象 + * @return {*} 创建的图标，用来删除 + * @private + */ + const _addPointOnMap = function(paramObject) { + return addPointOnMap(paramObject, mapObj, featureGroup, layerGroup) + } + const _addResourceOnMapWithoutSuperMapCluster = function( + features, + url, + layerName, + createPopupFun, + url2 + ) { + console.log( + '_addResourceOnMapWithoutSuperMapCluster===============>', + features, + url, + layerName, + createPopupFun, + url2 + ) + // 如果资源要素数量为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) + // }) + + // } + //_removeLayerByLayerName(layerName) + let clickReplaceIcon = true; + let selectedLayerList = []; + let selectedLayerId = []; + let layers = null; + // 判断是否是聚合图层 + layers = createMarkerClusterLayer() + const icon1 = createDefaultFeatureStyle({ + img: url, + iconSize: [33, 33], + }) + const icon2 = createDefaultFeatureStyle({ + img: url2, + iconSize: [33, 33], + }) + features.map((feature) => { + var bounds = map.getBounds() + //console.log("看看有没有坐标", feature); + if (feature.hasOwnProperty('latLng')) { + //let icon = feature.active ? icon2 : icon1; + let icon = icon1; + restoreIconObj.restoreIcon = icon; + 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) + } + } + } + }) + } + marker.on('click', e => { + console.log('点位数据', e) //需要调用视频播放的窗口吗？ + // 判断是否需要选中之后更换marker的图标 + //const layers = layerGroup.get(layerName).getLayers() + // layers.forEach((layer) => { + // layer.setIcon(icon) + // }) + restoreIconObj.layerId = e.sourceTarget._leaflet_id + const currentLayer = layerGroup + .get(layerName) + .getLayer(restoreIconObj.layerId) + restoreIconObj.currentLayer = currentLayer; + if (currentLayer._icon.src != icon.options.iconUrl) { + currentLayer.setIcon(icon); + } else { + selectedLayerList.push(currentLayer); + //要去重去重,//判断是否点击第二次 + if (selectedLayerList.length > 0) { + selectedLayerList.forEach((item) => { + item.setIcon( + L.icon({ iconUrl: require('./image/' + url2), iconSize: [33, 33] }) + ) + }); + } + } + mybus.emit('pointMarkerClick', feature) + }) + 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) + } + + /** + * 资源上图通用方法 + * @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 }) + polyline.addTo(map) + polylineArr.push(polyline) + // debugger + // map.fitBounds(polyline.getBounds()) + } + 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, + // 添加单个点位到地图上 + 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, + openPopup: _openPopup, + openPopupVideoSurveillance: _openPopupVideoSurveillance, + closeAllPopup: _closeAllPopup, + addMovingMarker: _addMovingMarker, + addResourceOnMapWithoutSuperMapCluster: _addResourceOnMapWithoutSuperMapCluster, + addPopOnMap: _addPopOnMap, + addDynamicMapLayer: _addDynamicMapLayer, + addPointsToMap: _addPointsToMap, + addCircleToMap: _addCircleToMap, + thermodynamic: _thermodynamic, + addPathToMap: _addPathToMap, + } +} \ No newline at end of file diff --git a/front/src/views/home/videoSurveillance/index.vue b/front/src/views/home/videoSurveillance/index.vue index 7d8c13c8..99cd9b4e 100644 --- a/front/src/views/home/videoSurveillance/index.vue +++ b/front/src/views/home/videoSurveillance/index.vue @@ -177,7 +177,7 @@ } } } - this.addResourceTomap('videoMap', this.pointAllData); + //this.addResourceTomap('videoMap', this.pointAllData); }) }, methods: { @@ -477,7 +477,7 @@ } }) } - console.log('上图数据', dataEvent) + console.log('点击后上上图数据', dataEvent) this.getMapPoint(dataEvent, 'icon_camare.png', type) }, getMapPoint(data, img, type) {