【超图】SuperMap iClient3D for Cesium 加载SHP文件

老孟爱吃Taco

已于 2023-09-22 22:05:54 修改

阅读量944

点赞数 3

分类专栏：三维 Cesium 文章标签： 3d 前端 javascript

于 2022-11-17 09:26:36 首次发布

本文链接：https://blog.csdn.net/weixin_42532695/article/details/127897229

版权

三维同时被 2 个专栏收录

27 篇文章 8 订阅

订阅专栏

Cesium

13 篇文章 1 订阅

订阅专栏

作者：taco

由于原生的Cesium本身并没有提供加载解析shp文件的接口，所以如果想要直接读取本地文件加载的话需要通过别的方式去加载。

一、常规方法

1.Geojson

常规使用的话，都是再iDesktop中处理一下，比如用iDesktop中导出为geojson格式。

毕竟Cesium中是可以直接加载GeoJSON文件的。直接通过GeoJsonDataSource的接口加载也就可以了。

2. 数据服务

通过数据服务的方式直接调用，不加载本地文件。直接将shp文件存储在数据源中，并通过iServer发布的数据服务，通过请求回来的坐标数组，前端使用实体进行绘制即可。大致请求方式可以参考下面的代码。

二、通过第三方插件

当然今天介绍的重点肯定不是以往的常规方法，而是通过第三方库进行加载。正好在搜索到的时候看到了这个CesiumVectorTile就记录一下。

插件是github上面的（GitHub - MikesWei/CesiumVectorTile: Cesium VectorTileImageryProvider支持小数据量的geojson、shape文件矢量动态切片，实现贴地）在上面的地址可以下载的，如果github下载慢我在资源里也放了这个js可以直接下载使用。

后来看到也有npm的方式安装的，不过本地没有试过npm的还。直接本地路径加载的。

npm i cesiumvectortile

如果项目有需求的话也可以使用npm的方式加载试试。

使用方法

				var VectorTileImageryProvider = Cesium.VectorTileImageryProvider;
				addshp()

				function addshp() {
					line_gaosuDL = new VectorTileImageryProvider({
						source: "./SampleData/shp/Province_R_2.shp", //appConfig.BaseURL + "Assets/Data/shp/world/国家简化边界.shp",
						defaultStyle: {
							outlineColor: "rgb(101, 255, 67)",
							lineWidth: 5,
						},
					});
					line_gaosuDL.readyPromise.then(function() {
						viewer.imageryLayers.addImageryProvider(line_gaosuDL);
					});

				}

完整代码

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
		<meta name="viewport"
			content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
		<title>SHP</title>
		<link href="../../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
		<link href="./css/pretty.css" rel="stylesheet">
		<script src="./js/jquery.min.js"></script>
		<script type="text/javascript" src="../../Build/Cesium/Cesium.js"></script>
		<script src="./js/CesiumVectorTile.js"></script>
	</head>
	<body>
		<div id="cesiumContainer"></div>
		<script>
			function onload(Cesium) {
				var viewer = new Cesium.Viewer('cesiumContainer');
				var scene = viewer.scene;
				var VectorTileImageryProvider = Cesium.VectorTileImageryProvider;
				addshp()

				function addshp() {
					line_gaosuDL = new VectorTileImageryProvider({
						source: "./SampleData/shp/Province_R_2.shp", //appConfig.BaseURL + "Assets/Data/shp/world/国家简化边界.shp",
						defaultStyle: {
							outlineColor: "rgb(101, 255, 67)",
							lineWidth: 5,
						},
					});
					line_gaosuDL.readyPromise.then(function() {
						viewer.imageryLayers.addImageryProvider(line_gaosuDL);
					});

				}

			}
			if (typeof Cesium !== 'undefined') {
				window.startupCalled = true;
				onload(Cesium);
			}
		</script>
	</body>
</html>