Cesium 加载地图服务、模型数据等
自用,记录。时间一长就会忘,耽误时间。
地图服务
WMTS切片服务
复制WMTS服务地址,拼接常用参数和要加载的图层名称,用WebMapTileServiceImageryProvider加载。
let url = "http://localhost:8080/geoserver/gwc/service/wmts";
let layerName = "图层名";
let tilematrixset = "EPSG:3857";
let provider = new Cesium.WebMapTileServiceImageryProvider({
url: `${url}?layer=${layerName}&tilematrixset=${tilematrixset}&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix={TileMatrix}&TileCol={TileCol}&TileRow={TileRow}`,
});
viewer.imageryLayers.addImageryProvider(provider);
WFS矢量服务
直接使用axios调用接口,获取到geojson数据后再通过GeoJsonDataSource.load方法加载进Cesium。
import axios from "axios";
function wfsGetFeatureInfo(name) {
let url = wfsUrl + "?service=WFS&version=1.0.0&request=GetFeature&outputFormat=application/json&typeName=" + name;
return axios.get(url);
}
async function getFeatureInfo(layerName) {
const res = await wfsGetFeatureInfo(layerName);
Cesium.GeoJsonDataSource.load(res.data, { clampToGround: true }).then(dataSource => {
dataSource.entities.values.forEach(entity => {
entity.polygon = {...};
entity.polyline = {...};
entity.label = {...};
entity.billboard = {...}
});
dataSource.name = layerName;
viewer.dataSources.add(dataSource);
});
}
3DTileset
function addCommon3DTiles(
url,
name,
heightOffset = 0, // 调整倾斜摄影高度
show = true,
position, // 标签添加位置
showLabel = true // 是否显示(添加)标签
) {
let modelName = name || new Date().getTime();
window["tilesetModel_" + modelName] = new Cesium.Cesium3DTileset({
url: url,
show: show,
skipLevelOfDetail: true,
skipScreenSpaceErrorFactor: 16,
skipLevels: 1,
cullWithChildrenBounds: true,
cullRequestsWhileMoving: true,
cullRequestsWhileMovingMultiplier: 5,
preloadWhenHidden: true,
preloadFlightDestinations: true,
maximumMemoryUsage: 256
});
window["tilesetModel_" + modelName].readyPromise.then(function (argument) {
// 调整模型高度
let boundingSphere = window["tilesetModel_" + modelName].boundingSphere;
let cartographic = Cesium.Cartographic.fromCartesian(
boundingSphere.center
);
let surface = Cesium.Cartesian3.fromRadians(
cartographic.longitude,
cartographic.latitude,
0.0
);
let offset = Cesium.Cartesian3.fromRadians(
cartographic.longitude,
cartographic.latitude,
heightOffset
);
let translation = Cesium.Cartesian3.subtract(
offset,
surface,
new Cesium.Cartesian3()
);
window["tilesetModel_" + modelName].modelMatrix =
Cesium.Matrix4.fromTranslation(translation);
// 处理标签
let labels = null;
if (showLabel) {
labels = viewer.scene.primitives.add(new Cesium.LabelCollection());
labels.add({
position: position,
text: name,
font: "24px 黑体",
horizontalOrigin: -1,
verticalOrigin: 0,
fillColor: Cesium.Color.AQUAMARINE,
outlineColor: Cesium.Color.BLACK,
outlineWidth: 2,
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
distanceDisplayCondition: new Cesium.DistanceDisplayCondition( 0, 150000),
});
}
viewer.scene.primitives.add(window["tilesetModel_" + modelName]);
});
}
GeoJson
加载GeoJson数据,并修改多边形及轮廓样式。
const outline = await Cesium.GeoJsonDataSource.load("xxx.json",{ clampToGround: true });
let outlineEntities = outline.entities.values;
for (let i = 0; i < outlineEntities.length; i++) {
let entity = outlineEntities[i];
entity.polygon.material = Cesium.Color.fromCssColorString("#1E90FF").withAlpha(0.3);
entity.polygon.distanceDisplayCondition = new Cesium.DistanceDisplayCondition(150000, 1500000);
// 单独设置线条样式
let positions = entity.polygon.hierarchy._value.positions;
entity.polyline = {
positions: positions,
width: 3,
material: Cesium.Color.fromCssColorString("#1E90FF"),
clampToGround: true,
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(150000, 1500000)
};
}
viewer.dataSources.add(outline);
参考链接
分类:
前端开发 / Cesium
, 前端开发
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 推荐几款开源且免费的 .NET MAUI 组件库
· 实操Deepseek接入个人知识库
· 易语言 —— 开山篇
· Trae初体验