效果
参考资料
- cesium只展示某个区域市省地图
- 百度api-掩模-只展示地图指定区域
特点
- 前端设计,前端实现,比设计-裁切影像-切图发布更便捷,更容易推广。
- 消耗前端性能,遮罩下的瓦片仍然在占用资源。
实现过程
按示例实现
出现黑线问题
- 问题:地图上出现黑线
- 原因:和addRect添加了覆盖全球的几何有关
- 解决:由于遮罩视图下不需要全球范围视图,限制了相机高度,不再用几何覆盖全球
优化
processGeoJSONData(data) {
const list = [];
data.features.forEach((feature) => {
const { coordinates, type } = feature.geometry;
if (type === "MultiPolygon") {
coordinates.forEach((part) => {
const coords = [];
part[0].forEach((point) => {
coords.push(...point);
});
list.push(coords);
});
} else {
const coords = [];
coordinates[0].forEach((point) => {
coords.push(...point);
});
list.push(coords);
}
});
return list;
}
getWallPrimitive(list, height = 1000) {
const wallInstances = list.map((coords) => {
const positions = Cesium.Cartesian3.fromDegreesArray(coords);
const wall = new Cesium.WallGeometry({
positions: positions,
maximumHeights: positions.map(() => {
return height;
}),
});
return new Cesium.GeometryInstance({
geometry: wall,
});
});
const wallPrimitive = new Cesium.Primitive({
geometryInstances: wallInstances,
appearance: new Cesium.MaterialAppearance({
material: Cesium.Material.fromType("Image", {
image: "./assets/wall.png",
}),
}),
});
return wallPrimitive;
},
loadMaskPrimitive(layer) {
fetch("./data/taizhou.geojson")
.then((response) => {
if (response.ok) {
return response.json();
} else {
throw new Error("请求失败!");
}
})
.then((data) => {
console.log(data);
const list = this.processGeoJSONData(data);
const polygonPrimitive = this.getPolygonPrimitive(list);
const wallPrimitive = this.getWallPrimitive(list);
layer._delegate.add(polygonPrimitive);
layer._delegate.add(wallPrimitive);
})
.catch((error) => {
console.log(error);
});
},
网友评论