Merge branch 'wangmengqi' of zhangtao/gis into develop
This commit is contained in:
commit
65ac2098ee
39
index.html
39
index.html
|
|
@ -1,18 +1,25 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
<head>
|
||||||
<link rel="icon" href="/favicon.ico" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<link rel="icon" href="/favicon.ico" />
|
||||||
<title>Vite App</title>
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Vite App</title>
|
||||||
<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.21/skins/default/aliplayer-min.css" />
|
|
||||||
<link rel="stylesheet" href="src/assets/mapbox/mapbox-gl.css" />
|
<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.21/skins/default/aliplayer-min.css" />
|
||||||
<script type="text/javascript" src="src/assets/mapbox/mapbox-gl.js"></script>
|
<link rel="stylesheet" href="src/assets/mapbox/mapbox-gl.css" />
|
||||||
<script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.9.21/aliplayer-h5-min.js"></script>
|
|
||||||
</head>
|
|
||||||
<body>
|
<script type="text/javascript" src="src/assets/mapbox/mapbox-gl.js"></script>
|
||||||
<div id="app"></div>
|
<script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
|
||||||
<script type="module" src="/src/main.js"></script>
|
<script charset="utf-8" type="text/javascript"
|
||||||
</body>
|
src="https://g.alicdn.com/de/prismplayer/2.9.21/aliplayer-h5-min.js"></script>
|
||||||
</html>
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -4759,6 +4759,21 @@
|
||||||
"thenify": ">= 3.1.0 < 4"
|
"thenify": ">= 3.1.0 < 4"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"three": {
|
||||||
|
"version": "0.146.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/three/-/three-0.146.0.tgz",
|
||||||
|
"integrity": "sha512-1lvNfLezN6OJ9NaFAhfX4sm5e9YCzHtaRgZ1+B4C+Hv6TibRMsuBAM5/wVKzxjpYIlMymvgsHEFrrigEfXnb2A=="
|
||||||
|
},
|
||||||
|
"threebox": {
|
||||||
|
"version": "0.1.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/threebox/-/threebox-0.1.5.tgz",
|
||||||
|
"integrity": "sha512-SAxLgJ6Qwqvzehic25DFkhJT7dPvWnwwHPgrAHoDZiIzlO5uG0CD1XPkv4kq6/lA94yK2Nf7BI8q5xCKdXBalw=="
|
||||||
|
},
|
||||||
|
"threebox-plugin": {
|
||||||
|
"version": "2.2.7",
|
||||||
|
"resolved": "https://registry.npmjs.org/threebox-plugin/-/threebox-plugin-2.2.7.tgz",
|
||||||
|
"integrity": "sha512-H87Nm4w1PfisHPHzavTGXlwIoJpx2+QU57GooQYIhF51lsg+U5A0KGf3Jrv/HWsLCGOwV2BTnv7UTLfpO1EccQ=="
|
||||||
|
},
|
||||||
"through": {
|
"through": {
|
||||||
"version": "2.3.8",
|
"version": "2.3.8",
|
||||||
"resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
|
"resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
|
||||||
|
|
|
||||||
|
|
@ -18,6 +18,9 @@
|
||||||
"mockjs": "^1.1.0",
|
"mockjs": "^1.1.0",
|
||||||
"pinia": "^2.0.13",
|
"pinia": "^2.0.13",
|
||||||
"pinia-plugin-persist": "^1.0.0",
|
"pinia-plugin-persist": "^1.0.0",
|
||||||
|
"three": "^0.146.0",
|
||||||
|
"threebox": "^0.1.5",
|
||||||
|
"threebox-plugin": "^2.2.7",
|
||||||
"tinymce": "^5.10.2",
|
"tinymce": "^5.10.2",
|
||||||
"vue": "^3.2.16",
|
"vue": "^3.2.16",
|
||||||
"vue-router": "^4.0.14",
|
"vue-router": "^4.0.14",
|
||||||
|
|
|
||||||
|
|
@ -15,119 +15,118 @@ export default {
|
||||||
* @param clusterLayerOption Object 只需传filter layout paint
|
* @param clusterLayerOption Object 只需传filter layout paint
|
||||||
* @param unclusterLayerOption Object 只需传filter paint
|
* @param unclusterLayerOption Object 只需传filter paint
|
||||||
*/
|
*/
|
||||||
loadAggregationGraph (map, url, sourceOption, layerOption, clusterLayerOption, unclusterLayerOption) {
|
loadAggregationGraph (map, geodata, sourceOption, layerOption, clusterLayerOption, unclusterLayerOption) {
|
||||||
axios.get(url).then((res) => {
|
// axios.get(url).then((res) => {
|
||||||
if (res) {
|
// if (res) {
|
||||||
// console.log(res, '返回的数据')
|
|
||||||
const data = res.data
|
|
||||||
|
|
||||||
const sourceId = res.data.crs.properties.name
|
const data = geodata
|
||||||
this.sourceId = sourceId
|
const sourceId = 'sourceis_1'
|
||||||
const layerId = sourceId + 'layer'
|
const layerId = 'layerId_1'
|
||||||
this.layerId = layerId
|
// const sourceId = res.data.crs.properties.name
|
||||||
const clusterCountId = sourceId + 'clusterCount'
|
// this.sourceId = sourceId
|
||||||
this.clusterCountId = clusterCountId
|
// const layerId = sourceId + 'layer'
|
||||||
const unclusteredId = sourceId + 'unclustered'
|
// this.layerId = layerId
|
||||||
this.unclusteredId = unclusteredId
|
// const clusterCountId = sourceId + 'clusterCount'
|
||||||
map.addSource(sourceId, {
|
// this.clusterCountId = clusterCountId
|
||||||
type: 'geojson',
|
// const unclusteredId = sourceId + 'unclustered'
|
||||||
data: data,
|
// this.unclusteredId = unclusteredId
|
||||||
cluster: true,
|
map.addSource(sourceId, {
|
||||||
clusterMaxZoom: sourceOption.clusterMaxZoom ? sourceOption.clusterMaxZoom : 14, // 最大缩放到群集点
|
type: 'geojson',
|
||||||
clusterRadius: sourceOption.clusterRadius ? sourceOption.clusterRadius : 50// 每一组点的半径
|
data: data,
|
||||||
})
|
cluster: true,
|
||||||
// 外围有数字的图层,加晕染
|
clusterMaxZoom: sourceOption.clusterMaxZoom ? sourceOption.clusterMaxZoom : 14, // 最大缩放到群集点
|
||||||
map.addLayer({
|
clusterRadius: sourceOption.clusterRadius ? sourceOption.clusterRadius : 50// 每一组点的半径
|
||||||
id: layerId,
|
})
|
||||||
type: 'circle',
|
// 外围有数字的图层,加晕染
|
||||||
source: sourceId,
|
map.addLayer({
|
||||||
// filter: ['has', 'poi_id'],
|
id: layerId,
|
||||||
filter: layerOption.filter,
|
type: 'circle',
|
||||||
paint: layerOption.paint ? layerOption.paint : {
|
source: sourceId,
|
||||||
// 蓝色,当点数小于100时为20px圆
|
// filter: ['has', 'poi_id'],
|
||||||
// 点计数在100到750之间时为黄色,21px圆
|
filter: layerOption.filter,
|
||||||
// 点计数大于或等于750时为22像素的粉红色圆圈
|
paint: layerOption.paint ? layerOption.paint : {
|
||||||
'circle-color': [
|
// 蓝色,当点数小于100时为20px圆
|
||||||
'step',
|
// 点计数在100到750之间时为黄色,21px圆
|
||||||
['get', 'poi_id'],
|
// 点计数大于或等于750时为22像素的粉红色圆圈
|
||||||
'rgba(81,187,214,0.8)',
|
'circle-color': [
|
||||||
100,
|
'step',
|
||||||
'rgba(241,240,117,0.8)',
|
['get', 'poi_id'],
|
||||||
750,
|
'rgba(81,187,214,0.8)',
|
||||||
'rgba(242,140,177,0.8)'
|
100,
|
||||||
],
|
'rgba(241,240,117,0.8)',
|
||||||
'circle-radius': [
|
750,
|
||||||
'step',
|
'rgba(242,140,177,0.8)'
|
||||||
['get', 'poi_id'],
|
],
|
||||||
20, // 蓝色,当点数小于100时为20px圆
|
'circle-radius': [
|
||||||
100, // 对应上面circle-color数字,意思为100以内
|
'step',
|
||||||
21, // 点计数在100到750之间为黄色,意思为750以内
|
['get', 'poi_id'],
|
||||||
750, // 对应上面circle-color数字,意思为750以内
|
20, // 蓝色,当点数小于100时为20px圆
|
||||||
22// 点计数大于或等于750时为22像素的粉红色圆圈
|
100, // 对应上面circle-color数字,意思为100以内
|
||||||
],
|
21, // 点计数在100到750之间为黄色,意思为750以内
|
||||||
// 这个是外边框的颜色 circle-stroke-color这个对应了上面circle-color
|
750, // 对应上面circle-color数字,意思为750以内
|
||||||
'circle-stroke-color': [
|
22// 点计数大于或等于750时为22像素的粉红色圆圈
|
||||||
'step',
|
],
|
||||||
['get', 'poi_id'],
|
// 这个是外边框的颜色 circle-stroke-color这个对应了上面circle-color
|
||||||
'rgba(81,187,214,0.2)',
|
'circle-stroke-color': [
|
||||||
100,
|
'step',
|
||||||
'rgba(241,240,117,0.2)',
|
['get', 'poi_id'],
|
||||||
750,
|
'rgba(81,187,214,0.2)',
|
||||||
'rgba(242,140,177,0.2)'
|
100,
|
||||||
],
|
'rgba(241,240,117,0.2)',
|
||||||
// 这个是外边框渲染的范围
|
750,
|
||||||
'circle-stroke-width': [
|
'rgba(242,140,177,0.2)'
|
||||||
'step',
|
],
|
||||||
['get', 'poi_id'],
|
// 这个是外边框渲染的范围
|
||||||
5, // 蓝色晕染长度,当点数小于100时为5px晕染
|
'circle-stroke-width': [
|
||||||
100, // 对应上面circle-color数字,意思为100以内
|
'step',
|
||||||
6, // 点计数在100到750之间时为黄色,6px晕染
|
['get', 'poi_id'],
|
||||||
750, // 对应上面circle-color数字,意思为750以内
|
5, // 蓝色晕染长度,当点数小于100时为5px晕染
|
||||||
7// 点计数大于或等于750时为7px像素的粉红色晕染
|
100, // 对应上面circle-color数字,意思为100以内
|
||||||
]
|
6, // 点计数在100到750之间时为黄色,6px晕染
|
||||||
}
|
750, // 对应上面circle-color数字,意思为750以内
|
||||||
})
|
7// 点计数大于或等于750时为7px像素的粉红色晕染
|
||||||
// 聚合图圆圈中的数字
|
]
|
||||||
map.addLayer({
|
|
||||||
id: clusterCountId,
|
|
||||||
type: 'symbol',
|
|
||||||
source: sourceId,
|
|
||||||
// filter: ['has', 'poi_id'],
|
|
||||||
filter: clusterLayerOption.filter,
|
|
||||||
layout: clusterLayerOption.layout,
|
|
||||||
// layout:{
|
|
||||||
// 'text-field': '{poi_id}', // 文本内容来源字段
|
|
||||||
// 'text-font': ['Microsoft YaHei'],
|
|
||||||
// 'text-size': 12
|
|
||||||
// }
|
|
||||||
paint: clusterLayerOption.paint ? clusterLayerOption.paint : {
|
|
||||||
'text-color': 'hsl(0, 0%, 100%)',
|
|
||||||
'text-halo-color': '#54c081',
|
|
||||||
'text-halo-width': 100
|
|
||||||
}
|
|
||||||
})
|
|
||||||
// 聚合图中没有数字的显示小圆点
|
|
||||||
map.addLayer({
|
|
||||||
id: unclusteredId,
|
|
||||||
type: 'circle',
|
|
||||||
source: sourceId,
|
|
||||||
// filter: ['!', ['has', 'poi_id']],
|
|
||||||
filter: unclusterLayerOption.filter,
|
|
||||||
paint: unclusterLayerOption.paint ? unclusterLayerOption.paint : {
|
|
||||||
'circle-color': '#11b4da',
|
|
||||||
'circle-radius': 4,
|
|
||||||
'circle-stroke-width': 1,
|
|
||||||
'circle-stroke-color': '#fff'
|
|
||||||
}
|
|
||||||
// paint: {
|
|
||||||
// 'circle-color': '#11b4da',
|
|
||||||
// 'circle-radius': 4,
|
|
||||||
// 'circle-stroke-width': 1,
|
|
||||||
// 'circle-stroke-color': '#fff'
|
|
||||||
// }
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
// 聚合图圆圈中的数字
|
||||||
|
map.addLayer({
|
||||||
|
id: 'clusterCountId',
|
||||||
|
type: 'symbol',
|
||||||
|
source: sourceId,
|
||||||
|
// filter: ['has', 'poi_id'],
|
||||||
|
filter: clusterLayerOption.filter,
|
||||||
|
layout: clusterLayerOption.layout,
|
||||||
|
// layout:{
|
||||||
|
// 'text-field': '{poi_id}', // 文本内容来源字段
|
||||||
|
// 'text-font': ['Microsoft YaHei'],
|
||||||
|
// 'text-size': 12
|
||||||
|
// }
|
||||||
|
paint: clusterLayerOption.paint ? clusterLayerOption.paint : {
|
||||||
|
'text-color': 'hsl(0, 0%, 100%)',
|
||||||
|
'text-halo-color': '#54c081',
|
||||||
|
'text-halo-width': 100
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// 聚合图中没有数字的显示小圆点
|
||||||
|
map.addLayer({
|
||||||
|
id: 'unclusteredId',
|
||||||
|
type: 'circle',
|
||||||
|
source: sourceId,
|
||||||
|
// filter: ['!', ['has', 'poi_id']],
|
||||||
|
filter: unclusterLayerOption.filter,
|
||||||
|
paint: unclusterLayerOption.paint ? unclusterLayerOption.paint : {
|
||||||
|
'circle-color': '#11b4da',
|
||||||
|
'circle-radius': 4,
|
||||||
|
'circle-stroke-width': 1,
|
||||||
|
'circle-stroke-color': '#fff'
|
||||||
|
}
|
||||||
|
// paint: {
|
||||||
|
// 'circle-color': '#11b4da',
|
||||||
|
// 'circle-radius': 4,
|
||||||
|
// 'circle-stroke-width': 1,
|
||||||
|
// 'circle-stroke-color': '#fff'
|
||||||
|
// }
|
||||||
|
})
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* 移除聚合图层
|
* 移除聚合图层
|
||||||
|
|
|
||||||
|
|
@ -164,7 +164,7 @@ export function loadTMSLayer (map, url, option) {
|
||||||
map.addSource(option.source, {
|
map.addSource(option.source, {
|
||||||
type: 'raster',
|
type: 'raster',
|
||||||
tiles: [url],
|
tiles: [url],
|
||||||
|
scheme: 'tms',
|
||||||
tileSize: 256
|
tileSize: 256
|
||||||
})
|
})
|
||||||
map.addLayer({
|
map.addLayer({
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
Loading…
Reference in New Issue