cesium本地文档-天空盒-arcgis切片404-服务查询

🕗 发布于 2024-05-31 11:36 前端

1.vite-plugin-cesium

// vite-plugin-cesium 是一个 Vite 插件，用于在 Vite 项目中轻松集成和使用 Cesium 地图引擎。它简化了在 Vite 项目中使用 Cesium 的配置和引入过程。

// 具体来说，vite-plugin-cesium 主要提供了以下功能：

// 自动引入 Cesium：通过 vite-plugin-cesium 插件，在 Vite 项目中可以直接引入 Cesium，无需手动配置复杂的路径等信息。

// 处理 Cesium 的依赖关系：Cesium 本身有一些依赖关系需要处理，vite-plugin-cesium 可以帮助自动处理这些依赖，确保 Cesium 在 Vite 项目中正常运行。

// 优化加载：vite-plugin-cesium 可以优化 Cesium 的加载方式，避免不必要的网络请求和加载时间，提高项目性能。

// 总的来说，vite-plugin-cesium 简化了在 Vite 项目中使用 Cesium 的流程，使得开发者更容易地集成 Cesium 地图引擎到他们的项目中，并且提供了一些优化功能来改善用户体验。

2. cesium本地文档查看

下载sdk,案例以1.106.1版本为例，执行build-docs生成本地http://localhost:8080/Build/Documentation

3.天空盒skyBox设置背景色-六张图片放在public下面，以相对路径引入

cesium1.106.1

4.arcgis切片404问题


addLayers (item) {
      let { layerUrl, name, visible, layerName } = item;
      // let img_layer = null
      if (name.includes('天地图')) {
        let img_layer = viewer.imageryLayers.addImageryProvider(
          new Cesium.UrlTemplateImageryProvider({
            subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
            url: item.layerUrl3d,
            show: visible,
            name: name,
          })
        );
      } else {
        let img_layer = viewer.imageryLayers.addImageryProvider(
          new Cesium.WebMapTileServiceImageryProvider({
            // url: layerUrl + "/WMTS/tile/1.0.0/" + layerName + "/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png",
            // 行列号就会减少一倍
            url: layerUrl + "/tile/{TileMatrix}/{TileRow}/{TileCol}",
            tileMatrixSetID: "",
            tileWidth: 256,
            tileHeight: 256,
            tilingScheme: new Cesium.GeographicTilingScheme(),
            maximumLevel: 18,
            tileMatrixLabels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19"],
          })
        );
        img_layer.imageryProvider.layerName = name
      }
    },

5. 根据屏幕点击获取经纬度，进行arcgis服务查询

let _this = this
    let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
    handler.setInputAction(function (event) {
      let pick = viewer.scene.pick(event.position);
      let ray = viewer.camera.getPickRay(event.position);

      const position = event.position;
      let cartesian = viewer.camera.pickEllipsoid(position, viewer.scene.globe.ellipsoid);
      // 将世界坐标转换为地理坐标（经度和纬度）
      let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
      let longitude = Cesium.Math.toDegrees(cartographic.longitude);
      let latitude = Cesium.Math.toDegrees(cartographic.latitude);
      if (pick && pick.id._type) {
        let obj = pick.id;
      } else {
        _this.$emit('getPointHandle', [longitude, latitude])
      }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK)

// 获取点击点位信息
    getPointHandle (coordinate) {
      this.coordinate = coordinate
        let allLayers = viewer.imageryLayers._layers
        this.queryLayers = allLayers.filter(item => item.show && (item.imageryProvider.layerName === '公益林优化调整数据' || item.imageryProvider.layerName === '管护小班'))
        if (this.queryLayers.length) {
          const url = this.queryLayers[0].imageryProvider.url.split('/tile')[0]
          this.queryLayer(url, coordinate)
          this.queryLayers[0].imageryProvider.url.includes('name_km') ? this.isManagementShow = true : this.isForestShow = true
      }

    },

 queryLayer (propLayerUrl, coordinate) {
      let params = {
        geometry: coordinate.join(','),
        geometryType: 'esriGeometryPoint',
        outFields: '*',
        returnGeometry: true,
        f: 'pjson'
      };
      fetch(propLayerUrl + '/0/query?' + new URLSearchParams(params)).then(response => response.json())
        .then(json => {
          if (json.features && json.features.length) {
              if (this.polygonFeature) {
                // 删除数据并且销毁
                viewer.dataSources.remove(this.polygonFeature, true)
                this.polygonFeature = null
              }
              this.infForestManage = json.features[0].attributes
              let geojson = {
                "type": "Polygon",
                "coordinates": json.features[0].geometry.rings
              }
              // 转化geojson数据
              const geojsonDataSource = Cesium.GeoJsonDataSource.load(geojson, {
                stroke: Cesium.Color.HOTPINK,
                fill: Cesium.Color.PINK,
                strokeWidth: 2,
                markerSymbol: '?'
              })
              geojsonDataSource.then(dataSource => {
                this.polygonFeature = dataSource
                viewer.dataSources.add(this.polygonFeature);
                viewer.zoomTo(dataSource)
              })
          } else {
            this.$message.warning('没有查询到该图层信息')
            this.infForestManage = {}
          }
        })
    },

6.进行wms服务查询

// 获取点击点位信息
    getPointHandle (coordinate) {
      this.coordinate = coordinate
      if (!this.isMap3) {
        let allLayers = gisMap.map.getLayers().getArray()
        this.queryLayers = allLayers.find(item => item.values_.visible && (item.values_.name == "公益林优化调整数据"))
        if (this.queryLayers) {
          this.loading = true
          this.getProp2d().then(json => {
            this.queryLayer(json.data)
          })
        }
      } else {
        let allLayers = viewer.imageryLayers._layers
        this.queryLayers = allLayers.find(item => item.show && (item.imageryProvider.layerName === '公益林优化调整数据'))
        if (this.queryLayers) {
          this.loading = true
          this.getProp3d()
        }
      }

    },
    // 查询服务属性
    async getProp2d () {
      let source = this.queryLayers.getSource();
      let urlrd = source.getFeatureInfoUrl(
        this.coordinate, gisMap.map.getView().getResolution(), gisMap.map.getView().getProjection(),
        { 'INFO_FORMAT': 'application/json', 'FEATURE_COUNT': 1 });
      return await axios.get(urlrd, {
        headers: {
          'Content-Type': 'application/json;charset=UTF-8'
        }
      }).then(json => {
        return json
      })
    },
    getProp3d () {
      const bboxSize = 0.001
      const [longitude, latitude] = this.coordinate
      const url = this.queryLayers.imageryProvider.url
      const urlParams = new URLSearchParams({
        service: 'WMS',
        request: 'GetFeatureInfo',
        version: '1.1.0',
        layers: 'map1:gyl_20231123_84',
        query_layers: 'map1:gyl_20231123_84',
        bbox: `${longitude - bboxSize},${latitude - bboxSize},${longitude + bboxSize},${latitude + bboxSize}`,
        width: 101,
        height: 101,
        info_format: 'application/json',
        x: 50,
        y: 50,
        srs: 'EPSG:4326',
        transparent: true
      })
      const fullUrl = `${url}?${urlParams.toString()}`;
      fetch(fullUrl)
        .then(response => {
          if (!response.ok) {
            throw new Error('Network response was not ok ' + response.statusText);
          }
          return response.json();
        })
        .then(data => {
          this.queryLayer(data)
        })
    },
    queryLayer (json) {
      this.loading = false
      if (json.features && json.features.length) {
        const features = json.features
        if (!this.isMap3) {
          if (this.polygonFeature) {
            gisMap.featuresSource.removeFeature(this.polygonFeature)
            this.polygonFeature = null
          }
          this.infForestManage = features[0].properties
          this.polygonFeature = gisMap.featureUtils.transformFeatureFromGeojson(features[0].geometry)
          gisMap.featuresSource.addFeature(this.polygonFeature)
          gisMap.flyTo(this.polygonFeature)
        } else {
          if (this.polygonFeature) {
            // 删除数据并且销毁
            viewer.dataSources.remove(this.polygonFeature, true)
            this.polygonFeature = null
          }
          this.infForestManage = features[0].properties
          console.log(features, 'features')
          let geojson = features[0].geometry
          // 转化geojson数据
          const geojsonDataSource = Cesium.GeoJsonDataSource.load(geojson, {
            stroke: Cesium.Color.HOTPINK,
            fill: Cesium.Color.PINK,
            strokeWidth: 2,
            markerSymbol: '?'
          })
          geojsonDataSource.then(dataSource => {
            this.polygonFeature = dataSource
            viewer.dataSources.add(this.polygonFeature);
            viewer.zoomTo(dataSource)
          })
        }
        this.isForestShow = true
      } else {
        this.$message.warning('没有查询到该图层信息')
        this.infForestManage = {}
      }
    },

原文地址：https://blog.csdn.net/ANNENBERG/article/details/137089173

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：学习笔记：(2)荔枝派Nano开机显示log（全志F1C200S）
下一篇：【安装笔记-20240529-Windows-Wireshark 网络协议分析工具】

百度搜索AI探索版多线程批量生成TXT原创文章软件-可生成3种类型文章
8、有8种标题模式可自由设置：1、关键词 2、百度搜索AI原创标题(以原创标题写文章) 3、关键词 + 百度搜索AI原创标题 4、关键词 + 下拉副标题 5、关键词 + 下拉副标题
阅读更多2024-11-16
批量更改表格数据不更新、不实时渲染、或则watch监听不到表格修改数据
第一种方法是监听的watch中添加deep:true，但是这种方法对我来说不管用，我需要监听某一列的数据，在批量更改后，统计数量，这时候，手动更改数据，他的监听并不能实时抓捕到。我这里的功能是，批量更
阅读更多2024-11-16
【大语言模型】ACL2024论文-10 CSCD-IME: 纠正拼音输入法产生的拼写错误
本文研究了中文拼写校正（CSC）任务，特别是针对拼音输入法（IME）产生的错误。作者首先介绍了一个包含40,000个标注句子的中文拼写校正数据集（CSCD-IME），这些句子来自新浪微博上的官方媒体帖
阅读更多2024-11-16
react 中 memo 模块作用
memo`是一个用于优化组件性能的高阶组件。
阅读更多2024-11-16
随笔content1
如果组件的具体类型无法获得，或者你并不关心组件的具体类型，那么可以使用 ComponentPublicInstance。当你将一个响应式对象的属性赋值或解构到一个本地变量时，访问或赋值该变量是非响应式
阅读更多2024-11-16
Java多线程底层设计思路
Java 的多线程设计比较全面和灵活，提供了多种方式来定义任务和管理线程，特别是通过Runnable和Callable接口，可以实现任务和线程的解耦，适应不同的应用场景。与 Python 和 C# 相
阅读更多2024-11-16
第七章利用CSS和多媒体美化页面
当设置为show时，就意味着当表格中某个单元格没有内容时，依然会显示该单元格的边框，这样可以保持表格的完整性和视觉上的连贯性，让用户在浏览表格时，能清晰地看到每个单元格的范围。而当参数为hide时，则
阅读更多2024-11-16
Cyberchef配合Wireshark提取并解析TCP/FTP流量数据包中的文件
通过cyberchef还原pcap数据包中TCP上层的文件内容，提升wireshark分析数据包的效率
阅读更多2024-11-16
redis
Redis 本质上是一个 Key-Value 类型的内存数据库，整个数据库加载在内存当中进行操作，定期通过异步操作把数据库数据 flush 到硬盘上进行保存。因为是纯内存操作， Redis 的性能
阅读更多2024-11-16
C++学习笔记之string容器、vector容器
vector可以动态扩展，动态扩展并不是在原空间之后续接新空间，而是找更大的内存空间，然后将原数据拷贝新空间，释放原空间。我们读过的书，说过的话，见过的山水，见到的人和事，最终都会变成我们脚下的的路。
阅读更多2024-11-16

cesium本地文档-天空盒-arcgis切片404-服务查询

相关文章