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);

参考链接

一文搞清各种来源的wmts服务加载，告别ctrl+c,v