wuhongjian
/
hi-ucs
1
0
Fork 0
Code Issues Pull Requests Projects Releases 10 Wiki Activity

地图聚合字体样式

This commit is contained in:
unknown 2022-10-14 10:34:17 +08:00
parent 3d69aa5922
commit ae046a6f82
1 changed files with 842 additions and 839 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
front/src/supermap/map-showResource.js
View File

@ -21,6 +21,7 @@ const restoreIconObj = {
} }
const progress = document.getElementById('progress') const progress = document.getElementById('progress')
const progressBar = document.getElementById('progress-bar') const progressBar = document.getElementById('progress-bar')
function updateProgressBar(processed, total, elapsed, layersArray) { function updateProgressBar(processed, total, elapsed, layersArray) {
if (elapsed > 1000) { if (elapsed > 1000) {
// if it takes more than a second to load, display the progress bar: // if it takes more than a second to load, display the progress bar:
@ -64,6 +65,14 @@ function createMarkerClusterLayer(layerClassName) {
} else { } else {
// 使用默认图标 // 使用默认图标
markerClusterLayer = L.markerClusterGroup({ markerClusterLayer = L.markerClusterGroup({
iconCreateFunction(cluster) {
const markers = cluster.getAllChildMarkers()
let n = 0
for (let i = 0; i < markers.length; i++) {
n += markers[i].number
}
return L.divIcon({ html: markers.length, className: "topic-marker-cluster-video" })
},
// 是否允许指定 PolylineOptions 样式 spider // 是否允许指定 PolylineOptions 样式 spider
spiderfyOnMaxZoom: true, spiderfyOnMaxZoom: true,
// 是否显示标记的边界 // 是否显示标记的边界
@ -111,8 +120,7 @@ function chunkData(data, doChunk, chunkCompleted) {
* @param layerGroup * @param layerGroup
* @return {*|void} layer对象，可以直接用map的removeLayer删除 * @return {*|void} layer对象，可以直接用map的removeLayer删除
*/ */
function addPointOnMap( function addPointOnMap({
{
feature, feature,
iconSize = [48, 48], iconSize = [48, 48],
iconUrl = 'poi.png', iconUrl = 'poi.png',
@ -134,8 +142,7 @@ function addPointOnMap(
// 区分是否是自定义div图标 // 区分是否是自定义div图标
if (isCustomIcon) { if (isCustomIcon) {
iconHtml = iconHtml || createDefaultDivIcon() iconHtml = iconHtml || createDefaultDivIcon()
icon = createDefaultFeatureStyle( icon = createDefaultFeatureStyle({ img: iconUrl, iconSize: iconSize },
{ img: iconUrl, iconSize: iconSize },
iconHtml, iconHtml,
iconClassName iconClassName
) )
@ -171,12 +178,12 @@ function addPointOnMap(
}) })
} }
return isOpenPopup return isOpenPopup ?
? marker marker
.addTo(mapObj.map) .addTo(mapObj.map)
.bindPopup(elementHtml, { className: popupClassName }) .bindPopup(elementHtml, { className: popupClassName })
.openPopup() .openPopup() :
: marker.addTo(mapObj.map) marker.addTo(mapObj.map)
} }
/** /**
@ -196,9 +203,9 @@ function createPromiseByQueryService(idArray = [], layerConfigInfo, type = '') {
authorityFilter = 'SMID > 0' authorityFilter = 'SMID > 0'
} else if (idArray.length <= 1000) { } else if (idArray.length <= 1000) {
const authorityFilter1 = "'" + idArray.join("','") + "'" const authorityFilter1 = "'" + idArray.join("','") + "'"
authorityFilter = type authorityFilter = type ?
? `CAMERA_INDEX_CODE in (${authorityFilter1})` `CAMERA_INDEX_CODE in (${authorityFilter1})` :
: `UUID in (${authorityFilter1})` `UUID in (${authorityFilter1})`
} else { } else {
// 当UUID的个数大于1000 // 当UUID的个数大于1000
const count = Math.floor(idArray.length / 1000) // 向下取整 const count = Math.floor(idArray.length / 1000) // 向下取整
@ -209,9 +216,9 @@ function createPromiseByQueryService(idArray = [], layerConfigInfo, type = '') {
const authorityFilterString = "'" + indexCodeSplice.join("','") + "'" const authorityFilterString = "'" + indexCodeSplice.join("','") + "'"
const authorityFilterSplice = `CAMERA_INDEX_CODE in (${authorityFilterString})` const authorityFilterSplice = `CAMERA_INDEX_CODE in (${authorityFilterString})`
authorityFilter = authorityFilter =
i === 0 i === 0 ?
? authorityFilterSplice authorityFilterSplice :
: `${authorityFilter} or ${authorityFilterSplice}` `${authorityFilter} or ${authorityFilterSplice}`
} }
} else { } else {
for (let i = 0; i <= count; i++) { for (let i = 0; i <= count; i++) {
@ -219,9 +226,9 @@ function createPromiseByQueryService(idArray = [], layerConfigInfo, type = '') {
const authorityFilterString = "'" + indexCodeSplice.join("','") + "'" const authorityFilterString = "'" + indexCodeSplice.join("','") + "'"
const authorityFilterSplice = `UUID in (${authorityFilterString})` const authorityFilterSplice = `UUID in (${authorityFilterString})`
authorityFilter = authorityFilter =
i === 0 i === 0 ?
? authorityFilterSplice authorityFilterSplice :
: `${authorityFilter} or ${authorityFilterSplice}` `${authorityFilter} or ${authorityFilterSplice}`
} }
} }
} }
@ -271,9 +278,8 @@ function addResourceOnMapNew(
// 创建图层 // 创建图层
let layers = null let layers = null
// 判断是否是聚合图层 // 判断是否是聚合图层
layers = layerConfig.cluster.flag layers = layerConfig.cluster.flag ?
? createMarkerClusterLayer(layerConfig.cluster.clusterName) createMarkerClusterLayer(layerConfig.cluster.clusterName) : []
: []
// 该promise用于将资源要素聚合图层添加到地图上，添加完毕之后，把状态置为已决议 // 该promise用于将资源要素聚合图层添加到地图上，添加完毕之后，把状态置为已决议
return new Promise((resolve) => { return new Promise((resolve) => {
@ -291,7 +297,7 @@ function addResourceOnMapNew(
marker.layerConfigInfo = layerConfig marker.layerConfigInfo = layerConfig
// 小型水库没有点击事件 // 小型水库没有点击事件
// if (feature.size !== 0) { // if (feature.size !== 0) {
marker.on('click', async (e) => { marker.on('click', async(e) => {
console.log('图标点击e', e) console.log('图标点击e', e)
const uuid = e.sourceTarget.uuid const uuid = e.sourceTarget.uuid
const type = layerConfig.resType const type = layerConfig.resType
@ -347,8 +353,7 @@ function addResourceOnMapNew(
* @return {*} * @return {*}
* @private * @private
*/ */
function addResourceOnMap( function addResourceOnMap({
{
features, features,
layerName, layerName,
layerConfigInfo, layerConfigInfo,
@ -426,7 +431,7 @@ function addResourceOnMap(
if (getLayerPopupInfo !== null && createPopupFun !== null) { if (getLayerPopupInfo !== null && createPopupFun !== null) {
marker.resId = feature.resId marker.resId = feature.resId
marker.layerConfigInfo = layerConfigInfo marker.layerConfigInfo = layerConfigInfo
marker.on('click', async (e) => { marker.on('click', async(e) => {
console.log('图标点击e', e) console.log('图标点击e', e)
// 判断是否需要选中之后更换marker的图标 // 判断是否需要选中之后更换marker的图标
if (clickReplaceIcon) { if (clickReplaceIcon) {
@ -658,14 +663,13 @@ function addResourceOnMapWithoutSuperMap(
feature.traveladdress + feature.traveladdress +
'(' + '(' +
feature.count + feature.count +
'次)</span></p>', '次)</span></p>', {
{
permanent: true, permanent: true,
} }
) )
L.tooltipLayout.resetMarker(marker) L.tooltipLayout.resetMarker(marker)
if (createPopupFun !== null) { if (createPopupFun !== null) {
marker.on('click', async (e) => { marker.on('click', async(e) => {
const elementHtml = createPopupFun(feature) const elementHtml = createPopupFun(feature)
if (elementHtml) { if (elementHtml) {
L.popup({ L.popup({
@ -735,7 +739,7 @@ function addPointsToMap(
// }) // })
// L.tooltipLayout.resetMarker(marker) // L.tooltipLayout.resetMarker(marker)
if (createPopupFun !== null) { if (createPopupFun !== null) {
marker.on('click', async (e) => { marker.on('click', async(e) => {
const elementHtml = createPopupFun(feature) const elementHtml = createPopupFun(feature)
if (elementHtml) { if (elementHtml) {
if (feature.type == 'road') { if (feature.type == 'road') {
@ -795,8 +799,7 @@ function addPointsToMap(
* @return {*} * @return {*}
* @private * @private
*/ */
function addResourceOnMapWithoutSuper( function addResourceOnMapWithoutSuper({
{
features, features,
layerName, layerName,
layerConfigInfo, layerConfigInfo,
@ -874,7 +877,7 @@ function addResourceOnMapWithoutSuper(
marker.uuid = feature.uuid || '' marker.uuid = feature.uuid || ''
marker.resId = feature.resId || '' marker.resId = feature.resId || ''
marker.layerConfigInfo = layerConfigInfo marker.layerConfigInfo = layerConfigInfo
marker.on('click', async (e) => { marker.on('click', async(e) => {
// 判断是否需要选中之后更换marker的图标 // 判断是否需要选中之后更换marker的图标
if (clickReplaceIcon) { if (clickReplaceIcon) {
const layers = layerGroup.get(layerName).getLayers() const layers = layerGroup.get(layerName).getLayers()