Mapbox+Vue 图层展示问题，通过浏览器显示正常，页面跳转图层无法显示
问题遇到的现象和发生背景
有红色和蓝色两个图层，蓝色图层通过聚合显示聚合数量，通过刷新地址栏所有图层都能正常展示，但是通过菜单跳转进入页面，蓝色和红色图层不显示，只显示聚合数字的图片，请帮忙分析下问题
问题相关代码，请勿粘贴截图
<template>
<div id="app">
<div id="map">
</div>
</div>
</template>
<script>
import Vue from "vue";
import mark_red from "@/assets/mark_red.png";
import mark_blue from "@/assets/marker_blue.png";
const imgs = {
mark_red,
mark_blue,
};
let map;
let GeoJSONUtil = new GeoGlobe.Format.GeoJSONUtil();
var redPoints = points.slice(0, 100);
export default {
name: "mapbox",
data: () => ({
markers: {},
markersOnScreen: {},
redDatas: [],
blueDatas: [],
sourceId: "",
}),
mounted() {
let that = this;
this.initDataSources().then((res) => {
that.initmap();
});
},
methods: {
initDataSources() {
this.redDatas = redPoints;
this.blueDatas = new Array();
for (var i = 0; i < redPoints.length; i++) {
this.blueDatas.push([redPoints[i][0] + 0.01, redPoints[i][1]]);
}
return new Promise((resolve, reject) => {
resolve();
});
},
initmap() {
let that = this;
// 构造地图对象实例,并添加到id为map的div容器中
map = new GeoGlobe.Map({
container: "map", //绑定容器
mapCRS: "4490", //定义坐标系
zoom: 8, //当前缩放级别
center: [118.778, 32.043], //定位中心点
maxZoom: 20, //最大缩放级别
minZoom: 8, //最小缩放级别
// pitch:45,//如需设置倾斜，角度设置为45
});
map.on("load", function () {
// 生成天地图图层及数据源
// var layer_vec = new GeoGlobe.TDTLayer("vec_c", "您的天地图token");
var layer_vec = new GeoGlobe.TDTLayer("vec_c");
// var layer_cva = new GeoGlobe.TDTLayer("cva_c", "您的天地图token");
var layer_cva = new GeoGlobe.TDTLayer("cva_c");
// 添加天地图
map.addLayer(layer_vec);
map.addLayer(layer_cva);
// 从外部URL加载要与MapéaddImage一起使用的图像
map.loadImage(imgs.mark_blue, function (error, image) {
// 将地图框样式图层添加到地图样式
map.addImage("blueImg", image);
});
// 从外部URL加载要与MapéaddImage一起使用的图像
map.loadImage(imgs.mark_red, function (error, image) {
// 将地图框样式图层添加到地图样式
map.addImage("redImg", image);
});
that.$nextTick(() => {
that.addRedCluster(that.createGeoProperties(that.redDatas,1));
that.addBlueCluster(that.createGeoProperties(that.blueDatas, 2));
}, 200);
});
map.on("move", this.updateMarkers);
map.on("moveend", this.updateMarkers);
map.on("idle", function () {
console.log(map.loaded())
if (map.loaded()) {
that.$nextTick(() => {
console.log("刷新12")
that.updateMarkers();
},200)
}
});
},
createGeoProperties(array, icon) {
let result = new Array();
for (let index = 0; index < array.length; index++) {
let geoProperties = new Object();
let properties = new Object();
let geometry = new Object();
geometry["type"] = "Point";
geometry["coordinates"] = [array[index][0], array[index][1]];
properties["icon"] = icon;
geoProperties["properties"]= properties;
geoProperties["geometry"] = geometry;
// properties["icon"] = icon;
result.push(geoProperties);
}
return result;
},
// 图层聚合
addRedCluster(points) {
// 图片的点聚合 完全自定义
map.addSource("red-source", {
type: "geojson", //数据源类型
data: GeoJSONUtil.geoProperties(points).data,
cluster: true,
clusterMaxZoom: 20, // 最大聚合层级
clusterRadius: 10, // 聚合距离
clusterProperties: {},
});
// 创建图片图层
map.addLayer({
id: "red", //图层ID
type: "symbol", //图层类型
source: "red-source", //数据源
filter: ['==', 'icon',1], //过滤条件
layout: {
"icon-image": "redImg", //获取properties icon 图片
"icon-size": 1, //图片大小
visibility: "visible",
},
});
console.log(map.listImages())
console.log(map.getSource("red-source"))
console.log(map.getLayer("red"))
},
addBlueCluster(points) {
// 图片的点聚合 完全自定义
map.addSource("blue-source", {
type: "geojson", //数据源类型
data: GeoJSONUtil.geoProperties(points).data,
cluster: true,
clusterMaxZoom: 20, // 最大聚合层级
clusterRadius: 50, // 聚合距离
clusterProperties: {},
});
// 创建图片图层
map.addLayer({
id: "blue", //图层ID
source: "blue-source", //数据源
type: "symbol", //图层类型
filter: ["==", "icon", 2], //过滤条件
layout: {
"icon-image": "blueImg", //获取properties icon 图片
"icon-size": 1, //图片大小
visibility: "visible",
},
});
this.sourceId = "blue-source";
},
updateMarkers() {
// console.log("111");
// return
var newMarkers = {};
var features = new Array();
if (this.sourceId) {
features = map.querySourceFeatures(this.sourceId);
}
for (var i = 0; i < features.length; i++) {
var coords = features[i].geometry.coordinates;
var props = features[i].properties;
if (!props.cluster) continue;
var id = props.cluster_id;
var marker = this.markers[id];
if (!marker) {
var el = document.createElement("div");
var count = props.point_count;
if (count >= 0 && count < 30) {
el.innerHTML = '<div class="x1">' + count + "</div>";
} else if (count >= 30 && count < 60) {
el.innerHTML = '<div class="x2">' + count + "</div>";
} else {
el.innerHTML = '<div class="x3">' + count + "</div>";
}
marker = this.markers[id] = new mapboxgl.Marker({
element: el,
}).setLngLat(coords);
}
newMarkers[id] = marker;
if (!this.markersOnScreen[id]) {
marker.addTo(map);
}
}
// return
for (id in this.markersOnScreen) {
if (!newMarkers[id]) {
this.markersOnScreen[id].remove();
}
}
this.markersOnScreen = newMarkers;
},
},
};
</script>
<style>
#app {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
#map {
width: 100%;
height: 735px;
overflow: hidden;
}
.input-left{
position: absolute; top: 10px;width: auto; height: auto;
float:left;
left: 50px;
z-index:999;
}
.x1 {
background: url("./assets/x1.png");
width: 56px;
height: 56px;
text-align: center;
line-height: 56px;
font-size: 12px;
color: #000;
}
.x2 {
background: url("./assets/x2.png");
width: 66px;
height: 66px;
text-align: center;
line-height: 66px;
font-size: 20px;
color: #000;
}
.x3 {
background: url("./assets/x3.png");
width: 78px;
height: 78px;
text-align: center;
line-height: 78px;
font-size: 12px;
color: #000;
}
</style>
运行结果及报错内容
刷新浏览器展示效果：
通过页面跳转展示效果：
