zhangtao
/
gis
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge branch 'wangmengqi' of zhangtao/gis into develop

This commit is contained in:
wangmengqi 2022-11-22 10:21:24 +08:00
parent d118c210f6 012458b47c
commit 65ac2098ee
12 changed files with 2082626 additions and 240 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
index.html
View File

@ -1,18 +1,25 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<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" />
<script type="text/javascript" src="src/assets/mapbox/mapbox-gl.js"></script>
<script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.9.21/aliplayer-h5-min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<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" />
<script type="text/javascript" src="src/assets/mapbox/mapbox-gl.js"></script>
<script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
<script charset="utf-8" type="text/javascript"
src="https://g.alicdn.com/de/prismplayer/2.9.21/aliplayer-h5-min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>

15
package-lock.json generated
View File

@ -4759,6 +4759,21 @@
"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": {
"version": "2.3.8",
"resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",

3
package.json
View File

@ -18,6 +18,9 @@
"mockjs": "^1.1.0",
"pinia": "^2.0.13",
"pinia-plugin-persist": "^1.0.0",
"three": "^0.146.0",
"threebox": "^0.1.5",
"threebox-plugin": "^2.2.7",
"tinymce": "^5.10.2",
"vue": "^3.2.16",
"vue-router": "^4.0.14",

219
src/api/gis/load-aggregation-graph.js
View File

@ -15,119 +15,118 @@ export default {
* @param clusterLayerOption Object 只需传filter layout paint
* @param unclusterLayerOption Object 只需传filter paint
*/
loadAggregationGraph (map, url, sourceOption, layerOption, clusterLayerOption, unclusterLayerOption) {
axios.get(url).then((res) => {
if (res) {
// console.log(res, '返回的数据')
const data = res.data
loadAggregationGraph (map, geodata, sourceOption, layerOption, clusterLayerOption, unclusterLayerOption) {
// axios.get(url).then((res) => {
// if (res) {
const sourceId = res.data.crs.properties.name
this.sourceId = sourceId
const layerId = sourceId + 'layer'
this.layerId = layerId
const clusterCountId = sourceId + 'clusterCount'
this.clusterCountId = clusterCountId
const unclusteredId = sourceId + 'unclustered'
this.unclusteredId = unclusteredId
map.addSource(sourceId, {
type: 'geojson',
data: data,
cluster: true,
clusterMaxZoom: sourceOption.clusterMaxZoom ? sourceOption.clusterMaxZoom : 14, // 最大缩放到群集点
clusterRadius: sourceOption.clusterRadius ? sourceOption.clusterRadius : 50// 每一组点的半径
})
// 外围有数字的图层,加晕染
map.addLayer({
id: layerId,
type: 'circle',
source: sourceId,
// filter: ['has', 'poi_id'],
filter: layerOption.filter,
paint: layerOption.paint ? layerOption.paint : {
// 蓝色,当点数小于100时为20px圆
// 点计数在100到750之间时为黄色,21px圆
// 点计数大于或等于750时为22像素的粉红色圆圈
'circle-color': [
'step',
['get', 'poi_id'],
'rgba(81,187,214,0.8)',
100,
'rgba(241,240,117,0.8)',
750,
'rgba(242,140,177,0.8)'
],
'circle-radius': [
'step',
['get', 'poi_id'],
20, // 蓝色,当点数小于100时为20px圆
100, // 对应上面circle-color数字,意思为100以内
21, // 点计数在100到750之间为黄色,意思为750以内
750, // 对应上面circle-color数字,意思为750以内
22// 点计数大于或等于750时为22像素的粉红色圆圈
],
// 这个是外边框的颜色 circle-stroke-color这个对应了上面circle-color
'circle-stroke-color': [
'step',
['get', 'poi_id'],
'rgba(81,187,214,0.2)',
100,
'rgba(241,240,117,0.2)',
750,
'rgba(242,140,177,0.2)'
],
// 这个是外边框渲染的范围
'circle-stroke-width': [
'step',
['get', 'poi_id'],
5, // 蓝色晕染长度,当点数小于100时为5px晕染
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'
// }
})
const data = geodata
const sourceId = 'sourceis_1'
const layerId = 'layerId_1'
// const sourceId = res.data.crs.properties.name
// this.sourceId = sourceId
// const layerId = sourceId + 'layer'
// this.layerId = layerId
// const clusterCountId = sourceId + 'clusterCount'
// this.clusterCountId = clusterCountId
// const unclusteredId = sourceId + 'unclustered'
// this.unclusteredId = unclusteredId
map.addSource(sourceId, {
type: 'geojson',
data: data,
cluster: true,
clusterMaxZoom: sourceOption.clusterMaxZoom ? sourceOption.clusterMaxZoom : 14, // 最大缩放到群集点
clusterRadius: sourceOption.clusterRadius ? sourceOption.clusterRadius : 50// 每一组点的半径
})
// 外围有数字的图层,加晕染
map.addLayer({
id: layerId,
type: 'circle',
source: sourceId,
// filter: ['has', 'poi_id'],
filter: layerOption.filter,
paint: layerOption.paint ? layerOption.paint : {
// 蓝色,当点数小于100时为20px圆
// 点计数在100到750之间时为黄色,21px圆
// 点计数大于或等于750时为22像素的粉红色圆圈
'circle-color': [
'step',
['get', 'poi_id'],
'rgba(81,187,214,0.8)',
100,
'rgba(241,240,117,0.8)',
750,
'rgba(242,140,177,0.8)'
],
'circle-radius': [
'step',
['get', 'poi_id'],
20, // 蓝色,当点数小于100时为20px圆
100, // 对应上面circle-color数字,意思为100以内
21, // 点计数在100到750之间为黄色,意思为750以内
750, // 对应上面circle-color数字,意思为750以内
22// 点计数大于或等于750时为22像素的粉红色圆圈
],
// 这个是外边框的颜色 circle-stroke-color这个对应了上面circle-color
'circle-stroke-color': [
'step',
['get', 'poi_id'],
'rgba(81,187,214,0.2)',
100,
'rgba(241,240,117,0.2)',
750,
'rgba(242,140,177,0.2)'
],
// 这个是外边框渲染的范围
'circle-stroke-width': [
'step',
['get', 'poi_id'],
5, // 蓝色晕染长度,当点数小于100时为5px晕染
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'
// }
})
},
/**
* 移除聚合图层

2
src/api/gis/service.js
View File

@ -164,7 +164,7 @@ export function loadTMSLayer (map, url, option) {
map.addSource(option.source, {
type: 'raster',
tiles: [url],
scheme: 'tms',
tileSize: 256
})
map.addLayer({

1901629
src/assets/json/aaa.json Normal file
View File

File diff suppressed because it is too large Load Diff

86439
src/assets/json/chinaEarthquake.geojson Normal file
View File

File diff suppressed because it is too large Load Diff

7538
src/assets/json/heat.json Normal file
View File

File diff suppressed because it is too large Load Diff

76
src/assets/mapbox/mapbox-gl.js
View File

File diff suppressed because one or more lines are too long

86439
src/views/dashboard/chinaEarthquake.geojson Normal file
View File

File diff suppressed because it is too large Load Diff

467
src/views/dashboard/index.vue
View File

File diff suppressed because one or more lines are too long

BIN
src/views/dashboard/local.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.7 KiB