cesium加载各类地图服务

钢镚是个小屁精

已于 2023-09-19 15:13:03 修改

阅读量3.2k

点赞数 2

分类专栏： cesium 文章标签：前端

于 2022-08-10 11:13:56 首次发布

本文链接：https://blog.csdn.net/qq_39262418/article/details/126259442

版权

直接从项目里整理出来的，有的是vue的写法，有的是react的写法

一、图层顺序

viewer.imageryLayers.raiseToTop(kmlIndex);//设置置顶
viewer.imageryLayers.lowerToBottom(kmlIndex);//将图层移到最底层
viewer.imageryLayers.lower(kmlIndex);//将图层下移一层
viewer.imageryLayers.raise(kmlIndex);//将图层上移一层

二、 wms

添加wms图层，以及图层顺序的设置

2.1 加载wms，以及数据筛选

let map = new Cesium.WebMapServiceImageryProvider({
    url: `localhost:8800/geoserver/yada/wms?`,
    layers: 'store:layer',//图层名
    parameters: {
        //styles: "ludibianjiehei",//使用其他样式
        service: 'WMS',
        format: 'image/png',
        transparent: true,//是否透明
        CQL_FILTER:`city_code=${city_code}`
//geoserver服务，可通过cql进行特征筛选(多个数据：city_code in ('地瓜','花生'))
    },
})
map.customName = 'tianditu3'//自己定义各种属性
const dd = viewer.imageryLayers.addImageryProvider(map);//添加图层
// viewer.imageryLayers.lower(dd);//将图层下移一层
// viewer.imageryLayers.lowerToBottom(dd); //将图层移到最底层
// viewer.imageryLayers.raise(dd); //将图层上移一层

2.2移除wms

// 移除wms
// nameArry ：属性名数组（customName）
// isMohu ：是否模糊查询
function removeWms(nameArry, isMohu) {
    let viewer = props.viewer
    // 倒叙遍历，customName是自定义的属性
    const layers = viewer.imageryLayers._layers
    for (let f = layers.length - 1; f >= 0; f--) {
        nameArry.forEach(item => {
            if (isMohu) {
                if (layers[f]._imageryProvider.customName.indexOf(item) > -1) {
                    viewer.imageryLayers.remove(layers[f])
                }
            } else {
                if (layers[f]._imageryProvider.customName === item) {
                    viewer.imageryLayers.remove(layers[f])
                }
            }
        })
    }
}

三、GeoJson

3.1 加载Geojson

Cesium.GeoJsonDataSource.load(url, {
    stroke: Cesium.Color.fromCssColorString("red"), //轮廓颜色
    fill: Cesium.Color.fromCssColorString('red'), //内部颜色
    strokeWidth: 3, //轮廓宽度（这个宽度怎么设置都无效，貌似的是浏览器的原因）
    clampToGround: true,//是否贴地
}).then(function (dataSource) {
    // dataSource.name = 'geojsonDataSource'//自定义属性，方便以后操作
    this.viewer.dataSources.add(dataSource); //添加
    this.viewer.flyTo(dataSource, {
        duration: 5,
        offset: {
            heading: 0.0,
            pitch: -90//保持垂直视角
        }
    }); //移动到该位置

    // 或者自定义颜色等属性
    // let entities = dataSource.entities.values;
    // for (var i = 0; i < entities.length; i++) {
    /