1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > Cesium中加载WMS WMTS WFS三类服务 并进行点击查询

Cesium中加载WMS WMTS WFS三类服务 并进行点击查询

时间:2021-01-08 10:42:04

相关推荐

Cesium中加载WMS WMTS WFS三类服务 并进行点击查询

近期工作中需要使用Cesium加载各类服务,并进行点击查询。故针对不同的服务对加载方法和点击查询方法进行了整理。

一、加载方法

1.1加载WMS

export function wmsService(url,layer){let wms=new Cesium.WebMapServiceImageryProvider({url : url,//如http://106.12.xxx/geoserver/xxx/wmslayers : layer,//数据源:图层名parameters: {service : WMS,format: image/png,//返回格式为png格式transparent: true,}})return wms;}//调用let wmsservice = _this.viewer.imageryLayers.addImageryProvider(wmsService(url, layer))

1.2加载WMTS

export function wmtsService(url,layer){let wmts=new Cesium.WebMapTileServiceImageryProvider({url : url,//如http://106.12.253.xxx/geoserver/xxx/service/wmtslayer : layer,//数据源:图层名style : \,format : image/png,tileMatrixSetID :EPSG:4326,//坐标系tileMatrixLabels :[EPSG:4326:0,EPSG:4326:1,EPSG:4326:2,EPSG:4326:3,EPSG:4326:4,EPSG:4326:5,EPSG:4326:6,EPSG:4326:7,EPSG:4326:8,EPSG:4326:9,EPSG:4326:10,EPSG:4326:11,EPSG:4326:12,EPSG:4326:13,EPSG:4326:14,EPSG:4326:15,EPSG:4326:16,EPSG:4326:17,EPSG:4326:18,EPSG:4326:19,EPSG:4326:20,EPSG:4326:21,],//查看geoserver,看切了几层maximumLevel: 19,//设置最高显示层级tilingScheme:new Cesium.GeographicTilingScheme(),//必要});return wmts;}//调用let wmtsservice= _this.viewer.imageryLayers.addImageryProvider(wmtsService(url, layer))

1.3加载WFS

export function wfsService(url,layer){return axios({methods: "GET",url: url,//如http://106.12.253.xxx/geoserver/xxx/service/owsparams: {service: "WFS",version: "1.0.0",request: "GetFeature",typeName: layer, //数据源:图层名outputFormat: "application/json",},})}//调用let wfsservice = wfsService(url, layer)wfsservice.then((res) => {let datasource=Cesium.GeoJsonDataSource.load(res.data,{stroke: Cesium.Color.RED, // 边框颜色strokeWidth: 3, // 边框宽度markerColor:Cesium.Color.RED,});_this.viewer.dataSources.add(datasource)

二、点击查询

2.1 WMS点击查询

//点击WMS查询clickWMSLayers () {this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.canvas)let _this = thisthis.handler.setInputAction(async function (click) {_this.viewer.selectedEntity = undefinedvar pickRay = _this.viewer.camera.getPickRay(click.position)var featuresPromise = await _this.viewer.imageryLayers.pickImageryLayerFeatures(pickRay,</

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。