如何在vue中使用Cesium加载shp文件、wms服务、WMTS服务

已于 2023-07-24 07:53:03 修改
阅读量2.7k 收藏 11
点赞数 1
分类专栏： # Cesium 文章标签： vue.js 前端
于 2022-07-19 09:25:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44224921/article/details/125864608
版权

如何在vue中使用Cesium加载shp文件或者说是wms服务

背景：企业项目在管理界面可以上传shp数据文件集合，需要在用户界面可视化展示

注意： Cesium是不能直接加载shp数文件的

所以需要后端将上传的shp数据转成WMS服务，这样Cesium就可以加载WMS服务来可视化shp数据了

注意后端接口必须返回以下关于WMS服务的参数

  1. 工作空间 share:xxxx，用于Cesium加载wms服务的图层
  2. srs : 用于Cesium加载wms服务的srs属性
  3. wms服务地址 ： 类似 http://localhost:8080/geoServer/wms
  4. 四个坐标xmin,ymin和xmax，ymax : 用于定位WMS地图的位置

Vue初始化Cesium

前提： Vue使用Cesium处理npm，还需要在Webpack文件配置，详情可看上期文章

基于Vue的Cesium配置

// 初始化
<template>
   // 地图容器 
  <div class="img-box" id="cesiumContainer"></div>
</template>

<script>
export default {
  props: ["fileUrl","srs","workspace","zb"],
  data() {
    return {
      viewer: {},
      Cesium: {},
      highlightColor: null,
      normalColor: null,
      wmsLayer : null // wms 地图服务图层
    };
  },
  methods: {
    // init ： 初始化Cesium
    init() {
      const Cesium = this.cesium;
      this.highlightColor = Cesium.Color.GREEN.withAlpha(0.6);
      this.normalColor = Cesium.Color.YELLOW.withAlpha(0.6);
      this.viewer = new Cesium.Viewer("cesiumContainer", {
        //先行禁止infoBox弹出
        selectionIndicator: false,
        infoBox: false,
        //baseLayerPicker : false,
        geocoder: false,
        homeButton: false,
        sceneModePicker: false,
        fullscreenButton: false,
        navigationHelpButton: false,
        animation: false,
        timeline: false,
        fulllscreenButtond: false,
        vrButton: false,

		// getImageryProviderArr和getTerrainProviderViewModelsArr  可根据项目需求进行实现
        //获取或设置可用于图像选择的ProviderViewModel实例数组。
        imageryProviderViewModels: this.getImageryProviderArr(),
        // //获取或设置可用于地形选择的ProviderViewModel实例数组。
        terrainProviderViewModels: this.getTerrainProviderViewModelsArr(),
      });
      this.viewer._cesiumWidget._creditContainer.style.display = "none"; // 隐藏版权
    },
    getImageryProviderArr() {
      const Cesium = this.cesium;

      return [
        new Cesium.ProviderViewModel({
          //图层的名称。
          name: "影像底图",
          //显示项目被隐藏的工具提示
          tooltip: "影像底图",
          //代表图层的图标
          iconUrl: require("@/assets/img/yxdt.png"),
          //一个函数或命令，用于创建一个或多个提供程序，这些提供程序将在选择此项目时添加到地球仪中。
          creationFunction: function () {
            return new Cesium.ArcGisMapServerImageryProvider({
              url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
            });
          },
        }),
        new Cesium.ProviderViewModel({
          //图层的名称
          name: "电子地图",
          //显示项目被隐藏的工具提示
          tooltip: "电子地图",
          //代表图层的图标
          iconUrl: require("@/assets/img/sldt.png"),
          //一个函数或命令，用于创建一个或多个提供程序，这些提供程序将在选择此项目时添加到地球仪中
          creationFunction: function () {
            return new Cesium.ArcGisMapServerImageryProvider({
              url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer",
            });
          },
        }),
      ];
    },
    getTerrainProviderViewModelsArr() {
      const Cesium = this.cesium;
      return [
        new Cesium.ProviderViewModel({
          //图层的名称
          name: "无地形",
          //显示项目被隐藏的工具提示
          tooltip: "WGS84标准球体",
          //代表图层的图标
          iconUrl: require("@/assets/img/WGS84.png"),
          //一个函数或命令，用于创建一个或多个提供程序，这些提供程序将在选择此项目时添加到地球仪中
          creationFunction: function () {
            return new Cesium.EllipsoidTerrainProvider({
              ellipsoid: Cesium.Ellipsoid.WGS84,
            });
          },
        }),
        new Cesium.ProviderViewModel({
          //图层的名称
          name: "地形",
          //显示项目被隐藏的工具提示
          tooltip: "STK在线地形",
          //代表图层的图标
          iconUrl: require("@/assets/img/STK在线地形.png"),
          //一个函数或命令，用于创建一个或多个提供程序，这些提供程序将在选择此项目时添加到地球仪中
          creationFunction: function () {
            return new Cesium.CesiumTerrainProvider({
              url: Cesium.IonResource.fromAssetId(1),
              requestWaterMask: !0,
              requestVertexNormals: !0,
            });
          },
        }),
      ];
    },
  },
};
</script>

加载WMS服务

// 加载geoserver wms服务
addWMS(fileUrl) {
    // 删除之前的wms 图层 
    // 这块移除图层 需要指出图层变量名
   this.viewer.imageryLayers.remove(this.wmsLayer);
   this.wmsLayer = null;
  const Cesium = this.cesium;
  if(this.zb.xmin) {
    var provider = new Cesium.WebMapServiceImageryProvider({
        url : fileUrl, // wms服务地址
        // layers 必须参数，不写会报错;
        // layers写的不对会报如下错误： An error occered in "WebMapServiceImageryProvider":
        // Failed to obtain image tile X : 425y    (有的博客说这是跨域？？？？)
	
		// 后端API接口返回
        layers: this.workspace,  
        // 必须参数rectangle ： 用来定位加载的WMS位置  后端API接口返回
        rectangle: Cesium.Rectangle.fromDegrees(
          +this.zb.xmin, +this.zb.ymin, +this.zb.xmax, +this.zb.ymax),   // 必须有
        parameters: {
            service : 'WMS',
            format: 'image/png',
            transparent: true,
            // 后端API接口返回的
            srs: this.srs,
        }  
    });
    // 加载WMS服务到viewer
    this.wmsLayer = this.viewer.imageryLayers.addImageryProvider(provider);
    // 飞入动画
    this.viewer.flyTo(this.wmsLayer, {
        duration: 2
    });
  } else {
    this.$message.warning('该地图服务没有坐标可以定位')
  }

加载WMTS服务

对与url 属性： 很多博客都说要进行 如下拼接：
后端返回的wmts/rest/{layer}/{style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}?format=image/png
其实不用拼接 只需要后端返回的/wtms路径即可

// 加载geoserver wmts服务
addWMTS(fileUrl) {
      const Cesium = this.cesium;
      let provider = new Cesium.WebMapTileServiceImageryProvider({
        //  对与url  很多博客都说要进行 如下拼接
        // 后端返回的wmts/rest/{layer}/{style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}?format=image/png
		// 其实不用拼接  只需要后端返回的/wtms路径即可
        url: fileUrl, //服务地址 服务地址只需要后端返回的 /WMTS   不需要给后面拼接任何东西，  
        layer: this.workspace, //图层名称 : "pucheng:satellite"
        style: '',
        format: 'image/png',
        tileMatrixSetID: this.srs,  // "EPSG:900913"
        // 地图飞入  定位的坐标  后端返回的数据
        rectangle: Cesium.Rectangle.fromDegrees(
            +this.zb.xmin, +this.zb.ymin, +this.zb.xmax, +this.zb.ymax),
        
        // 必须加  不然地图出不来

		//之所以要在这里提出这个tileMatrixLabels参数，是因为GeoServer在缓冲切分瓦片时对每一个缩放级别的存储目录没有使用相应的数字，而使用了网格+级别的方式来命名，如“EPSG:9100913:10”表示的是使用“EPSG:9100913”网格切分的第10级瓦片。
        tileMatrixLabels : [`${this.srs}:0`,`${this.srs}:1`, `${this.srs}:2`,`${this.srs}:3`,`${this.srs}:4`,`${this.srs}:5`,`${this.srs}:6`,
        `${this.srs}:7`,`${this.srs}:8`,`${this.srs}:9`,`${this.srs}:10`,`${this.srs}:11`,`${this.srs}:12`,`${this.srs}:13`,`${this.srs}:14`,
        `${this.srs}:15`,`${this.srs}:16`,`${this.srs}:17`,`${this.srs}:18`,
        ],
        // 必须加  不然地图出不来
        tilingScheme: new Cesium.GeographicTilingScheme({//此处很重要，很重要。。。
          numberOfLevelZeroTilesX: 2,
          numberOfLevelZeroTilesY: 1
        }),
        // tilematrixset: this.srs,
        // maximumLevel: 18,
        
      });
      let layer = this.viewer.imageryLayers.addImageryProvider(provider);
      //控制图层显示
      this.viewer.flyTo(layer, {
          duration: 2
        });
    },
原谅我很悲
关注
  • 1
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
cesium-加载geoserver发布的WMTS服务
孙霸天的专栏
03-09 1087
cesium-加载geoserver发布的WMTS服务 发布数据 默认安装好geoServer 选择数据存储 选择添加新的数据存储 选择GeoTIFF 选择数据 发布数据 发布成功 实际效果 完整代码 在首页选择WMTS 查看WMTS的配置信息 这里地图使用的是mapbox地图 叠加上geoServer的WMTS <!-- home --> <template> <div class="home"> <el-breadcrumb s
Cesium读取shp并加载显示shp属性
zhangwencan1986的博客
03-12 757
files = Array.from(files) // FileList => Array, 方便使用 Array 方法。this.parseShapefile(files) // 解析选择的 shp 并绘制显示。1、读取shp显示图形。2、读取dbf显示属性。技术交流和咨询请私信。
C1—— cesium加载shp文件
GIS特战兵
05-13 7678
说在前面：很多时候我们是加载shp会转为geojson或者用geoserver等发布为服务在加载wfs、wms等。这里说个更直接的直接加载shp文件。
Cesium加载各种来源的wms和wmts服务
u014015203的博客
05-10 868
使用WebMapTileServiceImageryProvider加载，加载方法如下，除了实现方法，针对不同平台发布的wmts服务的配置地址也很重要。使用WebMapServiceImageryProvider加载，加载方法如下，除了实现方法，针对不同平台发布的wms服务的配置地址也很重要。选中所需图层，点击进入下面页面。基础地址 + 各个参数。
vue中使用cesium 加载shp文件
weixin_39238200的博客
08-05 2334
vue中使用cesium 加载shp文件
SuperMap iClient3D for Cesium 加载SHP文件
SuperMap技术控
12-30 765
作者：taco由于原生的Cesium本身并没有提供加载解析shp文件的接口，所以如果想要直接读取本地文件加载的话需要通过别的方式去加载。
小功能实现（十九）生成shp文件
qq_44648936的博客
11-28 543
生成shp相关文件
根据边界txt文件创建矢量面shp
weixin_45975096的博客
02-19 903
txt文件打开如下图，在文件开头加入X Y，X对应经度，Y对应纬度 （1）File —Add data —Add xy data;坐标系统选择Geographic Coordinate System:Name: world—WGS_1984（加载时要注意查看txt属性表中的XY对应的经纬度）； （2）要素转为shape,右键选择data—export data —转化为shape文件； （3）point2line：ArcToolbox—数据管理工具—要素—点集转线； （4）linefeature
vue3.x中使用cesium，vue3.x+Cesium
05-04
在vue3.x版本中使用cesium，基于vue-cli创建项目，手动配置webpack，资源已配置好，下载完 进入项目下npm install 安装依赖后就可以运行了
CesiumVectorTile.js，加载shp文件
06-26
Cesium VectorTileImageryProvider 支持小数据量的geojson、shape文件矢量动态切片，实现贴地
vue3+ts+vite+cesium 加载天地图影像、标注等多服务器随机加载切换版本
04-02
这段基于 Vue.js 的 Cesium 地图应用示例展示了如何使用 Cesium.js 创建一个具有自定义配置的 3D 地球视图。Cesium.js 是一个开源 WebGL 虚拟地球引擎，可以构建交互式的 3D 地图应用。示例中的底图和注记图层来自...
Cesium,加载面geojson, 鼠标点选高亮显示面边界
10-17
Cesium-1.35下测试通过，加载面geojson，点击选择面并高亮显示面边界，完成面积计算，欢迎下载使用
cesium加载倾斜摄影，vue组件化
06-17
cesium加载倾斜摄影，vue组件化
vue 导入shp文件展示在地图上
07-18
项目需求需要上传shp文件然后在地图上展示，网上找了很多，发现大多数描述的都不完整，代码给的也不完整。所以自己整理了一下将主要的代码分享出来
Cesium加载 netcaf 发布的wms 服务数据
一路走一路学，总会不落后
03-07 304
首先需要查看 服务发布 Cesium调用该服务 var imageryProvider = new Cesium.WebMapServiceImageryProvider({ // 这里是你的 geoserver服务点击查看图层的 url,气象为你的工作区名称 url: 'http://localhost:8089/geoserver/Demos/wms', // 这里是自定义的图层名称 layers: '.
cesium + vue 加载 shp 文件
星空
07-07 1188
cesium + vue 加载 shp 文件
GIS：生成Shp文件
qq_34748010的博客
09-05 789
*FeatureCollection：**存储Feature对象的集合类，注意两点：1.其迭代器使用完毕必须显示关闭，2.存储在同一个FeatureCollection中的对象具有相同的SimpleFeatureType。**DataStore：**访问和存储矢量格式空间数据的引擎，对应关系数据库中database的概念，可以用来更新 ，删除，获取SimpleFeatureType（类比数据库中一张具体表）**FeatureSource：**与DataStore相比，粒度更细，内部操作都是针对这张表的。
MATLAB 根据经纬坐标生成点的shp文件或流域的边界shp文件
天外来客的花田
08-29 3978
任务描述：有站点坐标，制作.shp文件用于arcgis后续处理 [txt,~] = xlsread('C:\Users\DELL\Desktop\Works\数据整理.xlsx',12); location = txt(:,1:3); for i = 1:length(txt) %前面的部分为必要的字段 Point.Geometry = 'Point';%元素类型，Point，Line，Polygon等 Point.X = location(i,1);%坐标X 对应经度 P
关于element-plus中el-select自定义标签及样式的问题
最新发布
x_XDGS的博客
06-14 445
element-plus， el-select，自定义标签，动态更改颜色样式，更该样式
vue中使用cesium
05-19
Cesium是一个基于WebGL的JavaScript库，用于创建高性能的3D地球、地图和场景。要在Vue中使用Cesium，可以按照以下步骤操作： 1. 安装Cesium库 可以通过npm安装Cesium库。打开终端并运行以下命令： ``` npm install cesium ``` 2. 引入Cesium库 在Vue组件中引入Cesium库。可以在`src/main.js`文件中全局引入： ```javascript import Cesium from 'cesium/Cesium' import 'cesium/Widgets/widgets.css' Vue.prototype.Cesium = Cesium ``` 3. 创建Cesium地球 在Vue组件中创建Cesium Viewer。例如，在`App.vue`组件中创建： ```html <template> <div id="cesiumContainer"></div> </template> <script> export default { mounted() { this.viewer = new this.Cesium.Viewer('cesiumContainer') }, beforeDestroy() { this.viewer.destroy() } } </script> ``` 4. 使用Cesium组件 可以在Vue组件中使用Cesium提供的组件。例如，在`App.vue`组件中使用`CesiumNavigation`组件： ```html <template> <div id="cesiumContainer"> <CesiumNavigation :viewer="viewer" /> </div> </template> <script> import CesiumNavigation from 'vue-cesium-navigation' export default { components: { CesiumNavigation }, mounted() { this.viewer = new this.Cesium.Viewer('cesiumContainer') }, beforeDestroy() { this.viewer.destroy() } } </script> ``` 以上是在Vue中使用Cesium的基本步骤，具体还需根据实际情况调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

原谅我很悲

不要打赏哦，加个好友一起学习呗

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值