弹窗信息展示
This commit is contained in:
parent
a722837a11
commit
4b69292063
17
index.html
17
index.html
|
|
@ -1,6 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
|
@ -8,11 +9,17 @@
|
|||
|
||||
<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>
|
||||
<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>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -15,20 +15,21 @@ 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
|
||||
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,
|
||||
|
|
@ -89,7 +90,7 @@ export default {
|
|||
})
|
||||
// 聚合图圆圈中的数字
|
||||
map.addLayer({
|
||||
id: clusterCountId,
|
||||
id: 'clusterCountId',
|
||||
type: 'symbol',
|
||||
source: sourceId,
|
||||
// filter: ['has', 'poi_id'],
|
||||
|
|
@ -108,7 +109,7 @@ export default {
|
|||
})
|
||||
// 聚合图中没有数字的显示小圆点
|
||||
map.addLayer({
|
||||
id: unclusteredId,
|
||||
id: 'unclusteredId',
|
||||
type: 'circle',
|
||||
source: sourceId,
|
||||
// filter: ['!', ['has', 'poi_id']],
|
||||
|
|
@ -126,8 +127,6 @@ export default {
|
|||
// 'circle-stroke-color': '#fff'
|
||||
// }
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 移除聚合图层
|
||||
|
|
|
|||
|
|
@ -164,7 +164,7 @@ export function loadTMSLayer (map, url, option) {
|
|||
map.addSource(option.source, {
|
||||
type: 'raster',
|
||||
tiles: [url],
|
||||
|
||||
scheme: 'tms',
|
||||
tileSize: 256
|
||||
})
|
||||
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