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

news2025/1/11 5:57:51

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

一、加载方法
1.1加载WMS

export function wmsService(url,layer){
    let wms=new Cesium.WebMapServiceImageryProvider({
        url : url,//如'http://106.12.xxx/geoserver/xxx/wms'
        layers : 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/wmts'
    layer : 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/ows'
    params: {
      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 = this
      this.handler.setInputAction(async function (click) {
        _this.viewer.selectedEntity = undefined
        var pickRay = _this.viewer.camera.getPickRay(click.position)
        var featuresPromise = await _this.viewer.imageryLayers.pickImageryLayerFeatures(pickRay, _this.viewer.scene)
        if (featuresPromise[0] != null) {
          _this.tableData = []

          //高亮
          if (featuresPromise[0].data.geometry.type == 'MultiPolygon' || featuresPromise[0].data.geometry.type == 'Polygon'
            || featuresPromise[0].data.geometry.type == 'MultiLineString') {
            _this.viewer.entities.removeAll()
            _this.viewer.entities.add({
              id: 'polygon' + id,
              name: 'glTc',
              polyline: {
                positions: Cesium.Cartesian3.fromDegreesArrayHeights(_this.getDegreesArrayHeights(featuresPromise[0].data, 0)),
                width: 15,
                material: new Cesium.PolylineGlowMaterialProperty({
                  glowPower: 0.1,
                  color: Cesium.Color.fromCssColorString('#FF4500'),
                }),
                clampToGround: true, //是否贴着地表
              },
              polygon: {
                hierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArrayHeights(_this.getDegreesArrayHeights(featuresPromise[0].data, 0))),
                material: Cesium.Color.AQUA.withAlpha(0.5),
                // perPositionHeight: true,
                classificationType: Cesium.ClassificationType.CESIUM_3D_TILE,
              }
            })
          } else if (featuresPromise[0].data.geometry.type == 'Point') {
            _this.viewer.entities.removeAll()
            _this.viewer.entities.add({
              id: 'point' + id,
              name: 'glTc',
              position: Cesium.Cartesian3.fromDegrees(_this.getDegreesArrayHeights(featuresPromise[0].data, 0)[0],
                _this.getDegreesArrayHeights(featuresPromise[0].data, 0)[1], 0),
              point: {
                color: Cesium.Color.FUCHSIA,//修改颜色
                pixelSize: 15,
                disableDepthTestDistance: 5000000
              },
            })
          }

          let data = featuresPromise[0].data
          let name = featuresPromise[0].name
          let id = data.id
          let stationSerieType = data.properties.STATIONSERIETYPE
          
          //获取的信息加载在前端
          _this.tableData.push({
            id: id,
            name: name,
            stationSerieType: stationSerieType
          })
          _this.infoBoxShow = true
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
    },

2.2 WMTS点击查询

    //点击WMTS查询
    clickWMTSLayers () {
      this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas)
      let _this = this
      this.handler.setInputAction(async function (click) {
        _this.viewer.selectedEntity = undefined
        var featuresPromise = await _this.viewer.imageryLayers._layers[1]._imageryProvider
        let layer = featuresPromise._layer
        let url = featuresPromise._resource._url
        // 屏幕坐标转世界坐标
        let ellipsoid = _this.viewer.scene.globe.ellipsoid
        let cartesian3 = _this.viewer.camera.pickEllipsoid(click.position, ellipsoid)
        //笛卡尔坐标转web墨卡托
        let webMercator = cartesianToWebMercator(cartesian3)
        //获取相机高度
        let height = _this.viewer.camera.positionCartographic.height
        //计算近似层级
        let zoom = heightToZoom(height)
		//查看geoserver网格集
        let resolutions = [0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125, 0.02197265625,
          0.010986328125, 0.0054931640625, 0.00274658203125, 0.001373291015625, 6.866455078125E-4,
          3.4332275390625E-4, 1.71661376953125E-4, 8.58306884765625E-5, 4.291534423828125E-5,
          2.1457672119140625E-5, 1.0728836059570312E-5, 5.364418029785156E-6, 2.682209014892578E-6,
          1.341104507446289E-6, 6.705522537231445E-7, 3.3527612686157227E-7]
         //查看geoserver看中点位置和分辨率
        let origin = [-180, 90]
        let tileSize = [256, 256]
        let fx = (webMercator[0] - origin[0]) / (resolutions[zoom] * tileSize[0])
        let fy = (origin[1] - webMercator[1]) / (resolutions[zoom] * tileSize[1])
        let tileCol = Math.floor(fx)
        let tileRow = Math.floor(fy)
        let tileI = Math.floor((fx - tileCol) * tileSize[0])
        let tileJ = Math.floor((fy - tileRow) * tileSize[1])
        let matrixIds = ['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']
        let matrixId = matrixIds[zoom]
        let tile = {
          col: tileCol,
          row: tileRow,
          I: tileI,
          J: tileJ,
          TILEMATRIX: matrixId
        }

        function heightToZoom (height) {
          //固定参数，地球各个指标参
          let A = 40487.57
          let B = 0.00007096758
          let C = 91610.74
          let D = -40467.74
          return Math.round(D + (A - D) / (1 + Math.pow(height / C, B)))
        }

        function cartesianToWebMercator (cartesian) {
          // 将笛卡尔坐标转换为地理坐标(弧度)
          let cartographic = Cesium.Cartographic.fromCartesian(cartesian)
          //弧度转经纬度
          cartographic.latitude = Cesium.Math.toDegrees(cartographic.latitude)
          cartographic.longitude = Cesium.Math.toDegrees(cartographic.longitude)
          /*        //度转墨卡托
                    let earthRad = 6378137.0;
                    let x = ((cartographic.longitude * Math.PI) / 180) * earthRad;
                    let a = (cartographic.latitude * Math.PI) / 180;
                    let y = (earthRad / 2) * Math.log((1.0 + Math.sin(a)) / (1.0 - Math.sin(a)));*/
          return [cartographic.longitude, cartographic.latitude]
        }

        //访问
        let featuresPromises = wmtsFeatureService(url, layer, tile)
        featuresPromises.then((res) => {
          const data = res.data
          let featuresPromise = data.features
          if (featuresPromise[0] != null) {
            _this.tableData = []

            //高亮
            if (featuresPromise[0].geometry.type == 'MultiPolygon' || featuresPromise[0].geometry.type == 'Polygon'
              || featuresPromise[0].geometry.type == 'MultiLineString') {
              _this.viewer.entities.removeAll()
              _this.viewer.entities.add({
                id: 'polygon' + id,
                name: 'glTc',
                polyline: {
                  positions: Cesium.Cartesian3.fromDegreesArrayHeights(_this.getDegreesArrayHeights(featuresPromise[0], 0)),
                  width: 15,
                  material: new Cesium.PolylineGlowMaterialProperty({
                    glowPower: 0.1,
                    color: Cesium.Color.fromCssColorString('#FF4500'),
                  }),
                  clampToGround: true, //是否贴着地表
                },
                polygon: {
                  hierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArrayHeights(_this.getDegreesArrayHeights(featuresPromise[0], 0))),
                  material: Cesium.Color.AQUA.withAlpha(0.5),
                  // perPositionHeight: true,
                  classificationType: Cesium.ClassificationType.CESIUM_3D_TILE,
                }
              })
            } else if (featuresPromise[0].geometry.type == 'Point') {
              _this.viewer.entities.removeAll()
              _this.viewer.entities.add({
                id: 'point' + id,
                name: 'glTc',
                position: Cesium.Cartesian3.fromDegrees(_this.getDegreesArrayHeights(featuresPromise[0], 0)[0],
                  _this.getDegreesArrayHeights(featuresPromise[0], 0)[1], 0),
                point: {
                  color: Cesium.Color.FUCHSIA,//修改颜色
                  pixelSize: 15,
                  disableDepthTestDistance: 5000000
                },
              })
            }

            let name = featuresPromise[0].properties.SERIESNAME
            let id = featuresPromise[0].id
            let stationSerieType = featuresPromise[0].properties.STATIONSERIETYPE
            _this.tableData.push({
              id: id,
              name: name,
              stationSerieType: stationSerieType
            })
            _this.infoBoxShow = true
          }
        })
          .catch((error) => {
            console.log('请求失败，失败信息：' + error)
          })
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
    },

2.3 WFS点击查询

    //点击WFS查询
    clickWFSLayers(url,layer){
      this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.canvas)
      let _this = this
      this.handler.setInputAction(async function (click) {
        _this.tableData = []
        let pick=_this.viewer.scene.pick(click.position);
        if (Cesium.defined(pick)){
          let featuresPromise=pick.id.properties
          let name = featuresPromise._SERIESNAME._value
          let id = featuresPromise._definitionChanged._scopes[0]._id
          let stationSerieType = featuresPromise._STATIONSERIETYPE._value
          // console.log(featuresPromise._definitionChanged._scopes[0]._polyline._positions._value)  //获取要素坐标
          _this.tableData.push({
            id: id,
            name: name,
            stationSerieType: stationSerieType
          })
          _this.infoBoxShow = true
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
    },

*********设置要素点击高亮效果的函数

    //高亮函数
    getDegreesArrayHeights (feature, height) {
      let newHeight = height
      let degreesArrayHeights = []
      let coordinates
      if (feature.geometry.type == 'MultiPolygon') {
        coordinates = feature.geometry.coordinates[0][0]
        //坐标串转为需要的格式[x,y,z,x,y,z....]
        for (let i = 0; i < coordinates.length; i++) {
          const element = coordinates[i]
          degreesArrayHeights.push(element[0])
          degreesArrayHeights.push(element[1])
          degreesArrayHeights.push(newHeight)
        }
      } else if (feature.geometry.type == 'Polygon') {
        coordinates = feature.geometry.coordinates[0]
        //坐标串转为需要的格式[x,y,z,x,y,z....]
        for (let i = 0; i < coordinates.length; i++) {
          const element = coordinates[i]
          degreesArrayHeights.push(element[0])
          degreesArrayHeights.push(element[1])
          degreesArrayHeights.push(newHeight)
        }
      } else if (feature.geometry.type == 'MultiLineString') {
        coordinates = feature.geometry.coordinates[0]
        //坐标串转为需要的格式[x,y,z,x,y,z....]
        for (let i = 0; i < coordinates.length; i++) {
          const element = coordinates[i]
          degreesArrayHeights.push(element[0])
          degreesArrayHeights.push(element[1])
          degreesArrayHeights.push(newHeight)
        }
      } else if (feature.geometry.type == 'Point') {
        degreesArrayHeights.push(feature.geometry.coordinates[0])
        degreesArrayHeights.push(feature.geometry.coordinates[1])
        degreesArrayHeights.push(newHeight)
      }
      return degreesArrayHeights
    },

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/717162.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【Spring Boot】Spring Boot配置文件详情

【Spring Boot】Spring Boot配置文件详情

前言 Spring Boot是一个开源的Java框架&#xff0c;用于快速构建应用程序和微服务。它基于Spring Framework&#xff0c;通过自动化配置和约定优于配置的方式&#xff0c;使开发人员可以更快地启动和运行应用程序。Spring Boot提供了许多开箱即用的功能和插件&#xff0c;包括嵌…
阅读更多...
【笔记】微机原理及接口技术4 -- ADC/DAC

【笔记】微机原理及接口技术4 -- ADC/DAC

模数数模转换器 控制系统中的模拟接口 A/D 转换器 把模拟信号转成数字信号&#xff0c;供微处理器使用&#xff1b; D/A 转换器 输出模拟信号&#xff0c;供外部控制装置使用&#xff1b; D/A 原理 D/A 转换器的主要部件是电阻开关网络 通常是由输入的二进制数的各位控制一些…
阅读更多...
EasyCVR如何在不修改分辨率的情况下进行H.265自动转码H.264？

EasyCVR如何在不修改分辨率的情况下进行H.265自动转码H.264？

EasyCVR视频融合平台基于云边端一体化架构&#xff0c;可支持多协议、多类型设备接入&#xff0c;在视频能力上&#xff0c;平台可实现视频直播、录像、回放、检索、云存储、告警上报、语音对讲、电子地图、集群、H.265转码、智能分析以及平台级联等。 我们在此前的文章中介绍过…
阅读更多...
【Python实战】Python采集某大夫文字数据

【Python实战】Python采集某大夫文字数据

前言 今天&#xff0c;有一位粉丝找到我&#xff0c;希望我出一期关于某大夫数据采集的文章&#xff0c;今天&#xff0c;我们就来采集某大夫的问诊数据。 环境使用 python 3.9pycharm 模块使用 requests 模块介绍 requests requests是一个很实用的Python HTTP客户端库&…
阅读更多...
java 健身营养师网站系统myeclipse定制开发mysql数据库B/S模式java编程计算机网页

java 健身营养师网站系统myeclipse定制开发mysql数据库B/S模式java编程计算机网页

一、源码特点 JSP 健身营养师网站系统 是一套完善的系统源码&#xff0c;对理解JSP java 编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。研究的基本内容是基于网上 书店系统&#xff0c;使用JSP作为页面开发工具。Web服…
阅读更多...
MMaction2 使用记录1——config介绍

MMaction2 使用记录1——config介绍

目录 了解config &#xff08;模型训练测试的整体过程配置文件&#xff09; 通过脚本参数修改config Config 文件 结构 config文件的命名规则 动作识别的config系统 了解config &#xff08;模型训练测试的整体过程配置文件&#xff09; 我们使用python文件作为config&a…
阅读更多...
FreeRTOS学习笔记—任务挂起和恢复

FreeRTOS学习笔记—任务挂起和恢复

文章目录 一、任务挂起和恢复API函数1.1 vTaskSuspend()函数1.2 vTaskResume()函数1.3 xTaskResumeFromISR()函数 二、任务挂起和恢复2.1 任务1挂起解挂任务22.2 中断中解挂任务1 三、补充内容3.1 FreeRTOS数据类型3.2 中断优先级分组3.3 错误问题 一、任务挂起和恢复API函数 …
阅读更多...
ChatGPT | Word文档如何更好地提取表格内容给ChatGPT

ChatGPT | Word文档如何更好地提取表格内容给ChatGPT

本文来自http://blog.csdn.net/hellogv/ &#xff0c;引用必须注明出处&#xff01; Word文档如何更好地提取表格内容给ChatGPT做知识库&#xff0c;这属于文本预处理工作。 本文只讲思路、测试结果&#xff0c;技术实现用Python和Java都能完成&#xff0c;下一篇文章再贴源码…
阅读更多...
Python实用工具--全python制作一个音乐下载器

Python实用工具--全python制作一个音乐下载器

前言 又来展示一下关于Python的实用小技巧了&#xff0c;这次就来分享分享–如何用Python来制作一个音乐下载器 做这个有什么用啊&#xff0c;我只能说&#xff0c;可以免费下载歌曲啊&#xff0c;这样就能每月保住自己钱包咯 效果展示 基本界面 图片以及文字都是可以自己更…
阅读更多...
《动手学深度学习》——线性神经网络

《动手学深度学习》——线性神经网络

参考资料&#xff1a; 《动手学深度学习》 3.1 线性回归 3.1.1 线性回归的基本元素 样本&#xff1a; n n n 表示样本数&#xff0c; x ( i ) [ x 1 ( i ) , x 2 ( i ) , ⋯ , x d ( i ) ] x^{(i)}[x^{(i)}_1,x^{(i)}_2,\cdots,x^{(i)}_d] x(i)[x1(i)​,x2(i)​,⋯,xd(i)​…
阅读更多...
序列化对象

序列化对象

1&#xff1a;对象序列化 以内存为基准&#xff0c;把内存中的对象存储到磁盘文件中去&#xff0c;称为对象序列化。使用到的流是对象字节输出流&#xff1a;ObjectOutputStream 2&#xff1a;对象要序列化&#xff0c;必须实现Serializable序列化接口 2&#xff1a;对象反序…
阅读更多...
二十四、HTTPS

二十四、HTTPS

文章目录 一、HTTPS&#xff08;一&#xff09;定义&#xff08;二&#xff09;HTTP与HTTPS1.端口不同&#xff0c;是两套服务2.HTTP效率更高&#xff0c;HTTPS更安全 &#xff08;三&#xff09;加密&#xff0c;解密&#xff0c;密钥等概念&#xff08;四&#xff09;为什么要…
阅读更多...
【H5】文件下载（javascript）

【H5】文件下载（javascript）

系列文章 【移动设备】iData 50P 技术规格 本文链接&#xff1a;https://blog.csdn.net/youcheng_ge/article/details/130604517 【H5】avalon前端数据双向绑定 本文链接&#xff1a;https://blog.csdn.net/youcheng_ge/article/details/131067187 【H5】安卓自动更新方案&a…
阅读更多...
hivesql列转行

hivesql列转行

原表&#xff1a; 目标表&#xff1a; sql代码&#xff1a; select dp as 日期 ,city_name as 城市, split_part(subject,‘:’,1) as 指标, cast( split_part(subject,‘:’,2) as double ) as 数值 from( select trans_array(2,‘;’,dp,city_name,subject) as (dp,city_na…
阅读更多...
探秘高逼格艺术二维码的制作过程-AI绘画文生图

探秘高逼格艺术二维码的制作过程-AI绘画文生图

前几天看到几个逼格比较高的二维码&#xff0c;然后自己动手做了一下&#xff0c;给大家看看效果&#xff1a; 1、文生图&#xff08;狮子&#xff09;&#xff1a; 2、文生图&#xff08;城市&#xff09;&#xff1a; 下边将开始介绍怎么做的&#xff0c;有兴趣的可以继续读…
阅读更多...
Vault AppRole最佳实现过程

Vault AppRole最佳实现过程

AppRole AppRole身份验证方法允许机器或应用程序使用 Vault 定义的角色进行身份验证。AppRole 的开放式设计支持使用不同的工作流和配置来应对大量应用程序。这种身份验证方法主要是面向自动化工作流程（机器和服务）设计的，对人类操作者不太有用。 “AppRole”代表一组 Vau…
阅读更多...
大数据Doris（五十六）：RESOTRE数据恢复

大数据Doris（五十六）：RESOTRE数据恢复

文章目录 RESOTRE数据恢复 一、RESTORE数据恢复原理 二、RESTORE 数据恢复语法 三、RESOTRE数据恢复案例 1、在 Doris 集群中创建 mydb_recover 库 2、执行如下命令恢复数据 3、查看 restore 作业的执行情况 四、注意事项 RESOTRE数据恢复 Doris 支持BACKUP方式将当前…
阅读更多...
力扣 40. 组合总和 II

力扣 40. 组合总和 II

题目来源&#xff1a;https://leetcode.cn/problems/combination-sum-ii/description/ C题解&#xff1a; 这道题的难点在于解集中不能包含重复的组合。如果用set去重会造成超时&#xff0c;所以只能在单层递归逻辑中处理。通过识别下一个数与当前数是否相同&#xff0c;来修改…
阅读更多...
抖音小程序--开启沙盒模式后一直报，获取白名单失败：您没有权限访问此应用

抖音小程序--开启沙盒模式后一直报，获取白名单失败：您没有权限访问此应用

一. 出现问题 按照抖音开发文档创建沙盒环境&#xff0c;然后替换appid后一直报无权限&#xff0c;如下图&#xff1a; 最后才发现&#xff0c;登录抖音开发工具的账户必须是超级管理员账户&#xff0c;添加的协助开发者&#xff0c;就算给了全部权限&#xff0c;也依然会报上面…
阅读更多...
Navicat 入选中国信通院发布的《中国数据库产业图谱（2023）》

Navicat 入选中国信通院发布的《中国数据库产业图谱（2023）》

7 月 4 日&#xff0c;2023 年可信数据库发展大会主论坛在北京国际会议中心成功召开。会上&#xff0c;中国信息通信研究院正式发布《中国数据库产业图谱&#xff08;2023&#xff09;》。作为中国数据库生态工具供应商&#xff0c;凭借易用、稳定、可靠的产品力&#xff0c;以…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023