目录
一、图层顺序
二、 wms
2.1 加载wms，以及数据筛选
2.2移除wms
三、GeoJson
3.1 加载Geojson
3.2 移除Geojson
四、kml
五、3DTiles
5.1 加载3DTiles
5.2 控制3DTiles显隐
六、WMTS
6.1 加载
6.2 移除
直接从项目里整理出来的，有的是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: {service: 'WMS',format: 'image/png',transparent: true,//是否透明CQL_FILTER:`city_code=${city_code}`//geoserver服务，可通过cql进行特征筛选},})map.customName = 'tianditu3'//自己定义各种属性const dd = viewer.imageryLayers.addImageryProvider(map);//添加图层// viewer.imageryLayers.lower(dd);//将图层下移一层// viewer.imageryLayers.lowerToBottom(dd); //将图层移到最底层// viewer.imageryLayers.raise(dd); //将图层上移一层
2.2移除wms
// 倒叙遍历，customName是自定义的属性const layers = this.viewer.imageryLayers._layersfor (let f = layers.length - 1; f >= 0; f--) {if (layers[f]._imageryProvider.customName) {this.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, //轮廓宽度（这个宽度怎么设置都无效，貌似的是浏览器的原因）}).then(function (dataSource) {// dataSource.name = 'geojsonDataSource'//自定义属性，方便以后操作this.viewer.dataSources.add(dataSource); //添加this.viewer.flyTo(dataSource, {duration: 5,offset: {heading: 0.0,pitch: -90//保持垂直视角}}); //移动到该位置});
3.2 移除Geojson
const dataSources = this.viewer.dataSources._dataSourcesfor (let k = dataSources.length - 1; k >= 0; k--) {// if (dataSources[k].name.indexOf('geojsonDataSource') > -1) {if (dataSources[k].name && dataSources[k].name === layerName > -1) {this.viewer.dataSources.remove(dataSources[k])}}
四、kml
let options = {camera: viewer.scene.camera,canvas: viewer.scene.canvas,// clampToGround: true //开启贴地};//添加var addData = Cesium.KmlDataSource.load(url, options);addData.then(function (dataSource) {viewer.dataSources.add(dataSource);viewer.flyTo(dataSource);//移动到kml});
五、3DTiles
5.1 加载3DTiles
const scene = viewer.scene;const tileset = new Cesium.Cesium3DTileset({// url: `http://192.168.2.215:8080/browsedata/cesium_test/3dtiles/tileset.json`,url: url,})scene.primitives.add(tileset);// 定位到该位置tileset.readyPromise.then(function (res) {viewer.zoomTo(res,);}).otherwise(function (error) {console.log('error:', error);});
5.2 控制3DTiles显隐
tileset.show=true//显示tileset.show=false//隐藏
六、WMTS
6.1 加载
let map = new Cesium.WebMapTileServiceImageryProvider({url: "/vec_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=a3dfb742357fb07dfca6a7ec78d89359",// url: 'http://t6./vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&style=default&tileMatrixSet=w&format=tiles&TileCol={TileCol}&TileRow={TileRow}&TileMatrix={TileMatrix}&tk=55df960f28de3b11cf469a75500e208c',// url: 'http://t6./vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&style=default&tileMatrixSet=w&format=tiles&TileCol={TileCol}&TileRow={TileRow}&TileMatrix={TileMatrix}&tk=55df960f28de3b11cf469a75500e208c',layer: "img",style: "default",format: "image/jpeg",tileMatrixSetID: "EPSG:4326",tilingScheme: new Cesium.GeographicTilingScheme(),tileMatrixLabels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18']})map.customName = 'tianditu0'const dd = viewer.imageryLayers.addImageryProvider(map);// viewer.imageryLayers.lower(dd);//将图层下移一层viewer.imageryLayers.lowerToBottom(dd);//将图层移到最底层
6.2 移除
与wms的移除是一样滴
