cesium加载shp文件

一、CesiumVectorTile.js加载shp文件

Cesium VectorTileImageryProvider 支持小数据量的geojson、shape文件矢量动态切片，实现贴地
下载CesiumVectorTile.js文件并在index.html中引入

加载shp文件，shp文件同级目录下需要有dbf文件，prj文件，不可隐藏地球球体

var VectorTileImageryProvider = Cesium.VectorTileImageryProvider;var worldLayer = null;
var worldProvider = new VectorTileImageryProvider({source: "./static/hubei.shp",defaultStyle: {outlineColor: "#02a9ff",lineWidth: 1,fill: false,tileCacheSize: 200,showMaker: false,showCenterLabel: true,fontColor: "#02a9ff",labelOffsetX: -10,labelOffsetY: -5,fontSize: 13,fontFamily: "黑体",centerLabelPropertyName: "NAME"},maximumLevel: 20,minimumLevel: 1,simplify: false
});
worldProvider.readyPromise.then(function () {
worldLayer = viewer.imageryLayers.addImageryProvider(worldProvider);
});

二、借助插件shapefile.js加载dbf和shp文件，转成geojson后加载

下载shapefile.js文件并引入

import * as shapefile from "./shapefile";

读取shp文件并生成geojson，加载到cesium中。
shp文件同级目录下需要有dbf文件。

const url = './static/hubei.shp'
const urlArr = url.split('.shp')
const dbfUrl = urlArr[0] + '.dbf'this.createAndLoad(url, dbfUrl, { encoding: "utf-8" });

createAndLoad(shpData, dbfData, options) {const $this = this;var myFeatures = [];shapefile.open(shpData, dbfData, options).then((source) =>source.read().then(function log(result) {if (result.done) {var _mGeoJson = {type: "FeatureCollection",features: myFeatures,};const layer = viewer.dataSources.add(Cesium.GeoJsonDataSource.load(_mGeoJson, {clampToGround: false,stroke: Cesium.Color.fromCssColorString("#02a9ff"), //new Cesium.Color(0/255, 0/255, 0/255, 0),fill: new Cesium.Color(222/255, 216/255, 192/255, 0.3),}));viewer.zoomTo(layer);return;} else {var _result = result.value;var _curFeature = {type: _result.type,geometry: {type: _result.geometry.type,coordinates: _result.geometry.coordinates,},properties: _result.properties,};myFeatures.push(_curFeature);return source.read().then(log);}})).catch((error) => console.error(error.stack));},

三、在页面直接上传shp文件和dbf文件后转换并加载

本地shp数据或者在线shp数据，将shp数据转化为geojson数据并下载，在cesium中加载。

loadShp4Server() {var _shpData, _dbfData;_shpData = document.getElementById("urlPath").value.trim();if (_shpData.indexOf(".shp") < 0) {console.log("注意：输入的shp服务端地址有误！");return;}_dbfData = _shpData.substr(0, _shpData.length - 3) + "dbf";this.CreateAndLoadShp(_shpData, _dbfData, { encoding: "utf-8" });
},
loadShp4Localhost() {const $this = this;var shpFile, dbfFile, _shpData, _dbfData;var filesSelect = Array.from(document.getElementById("_shpFile").files);if (filesSelect.length != 2) {console.log("注意：所选择内容只能是一个图层的.shp和.dbf文件！");return;}filesSelect.forEach((element) => {if (element.name.indexOf(".shp") > 0) {shpFile = element;} else if (element.name.indexOf(".dbf") > 0) {dbfFile = element;}});if (!shpFile || !dbfFile) {console.log("注意：所选择内容必须包括同一个图层的.shp和.dbf文件！");return;}var readShp = new FileReader();readShp.readAsArrayBuffer(shpFile, "UTF-8"); //读取文件的内容readShp.onload = function () {_shpData = this.result;var readDbf = new FileReader();readDbf.readAsArrayBuffer(dbfFile, "UTF-8"); //读取文件的内容readDbf.onload = function () {_dbfData = this.result;$this.CreateAndLoadShp(_shpData, _dbfData, { encoding: "utf-8" });};};
},
CreateAndLoadShp(shpData, dbfData, options) {const $this = this;var myFeatures = [];shapefile.open(shpData, dbfData, options).then((source) =>source.read().then(function log(result) {if (result.done) {var _mGeoJson = {type: "FeatureCollection",features: myFeatures,};if ($this.boolDownload) {$this.funDownload(JSON.stringify(_mGeoJson), "default.geojson");}const layer = viewer.dataSources.add(Cesium.GeoJsonDataSource.load(_mGeoJson, {clampToGround: false,stroke: Cesium.Color.fromCssColorString("#02a9ff"), //new Cesium.Color(0/255, 0/255, 0/255, 0),fill: new Cesium.Color(222/255, 216/255, 192/255, 0.3),}));viewer.zoomTo(layer);return;} else {var _result = result.value;var _curFeature = {type: _result.type,geometry: {type: _result.geometry.type,coordinates: _result.geometry.coordinates,},properties: _result.properties,};myFeatures.push(_curFeature);return source.read().then(log);}})).catch((error) => console.error(error.stack));
},
funDownload(content, filename) {var eleLink = document.createElement("a"); // 创建隐藏的可下载链接eleLink.download = filename;eleLink.style.display = "none";var blob = new Blob([content]); // 将字符内容转成blobeleLink.href = URL.createObjectURL(blob);document.body.appendChild(eleLink); // 点击触发eleLink.click();document.body.removeChild(eleLink); // 然后移除创建的元素console.log("下载完成");
},
getLocation() {let handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);handler.setInputAction(function (event) {let earthPosition = viewer.scene.pickPosition(event.position);if (Cesium.defined(earthPosition)) {let cartographic = Cesium.Cartographic.fromCartesian(earthPosition);let lon = Cesium.Math.toDegrees(cartographic.longitude).toFixed(5);let lat = Cesium.Math.toDegrees(cartographic.latitude).toFixed(5);let height = cartographic.height.toFixed(2);console.log(earthPosition, {lon: lon,lat: lat,height: height,});}}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！