说在前面:很多时候我们是加载shp会转为geojson或者用geoserver等发布为服务在加载wfs、wms等。这里说个更直接的直接加载shp文件。主要是引用git上以为大牛的二次封装的文件。具体地址我已经忘了没办法说明处置哪里非常抱歉。
先上效果图:而且支持属性查询,具体我也没去做了,有兴趣可以找一下。
1.引用js文件:
<script src="./js/CesiumVectorTile.js"></script>
2.调用VectorTileImageryProvider类加载shp文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Hello World!</title>
<script src="../../Build/Cesium/Cesium.js"></script>
<script src="./js/CesiumVectorTile.js"></script>
<link rel="stylesheet" href="./css/bucket.css">
<style>
@import url(../../Build/Cesium/Widgets/widgets.css);
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<script type="text/javascript">
var VectorTileImageryProvider = Cesium.VectorTileImageryProvider;
viewer = new Cesium.Viewer("cesiumContainer");
var imageryProviderViewModels = viewer.baseLayerPicker.viewModel.imageryProviderViewModels;
viewer.baseLayerPicker.viewModel.selectedImagery = imageryProviderViewModels[imageryProviderViewModels.length - 1];
viewer.scene.debugShowFramesPerSecond = true;
var provinceLayer = null;
var provinceProvider = new VectorTileImageryProvider({
source: "./data/GeoJson/panel_lvdiDL.json",//appConfig.BaseURL + "Assets/Data/json/china_province.geojson",
defaultStyle: {
outlineColor: "rgb(255,255,255)",
lineWidth: 2,
fill: false,
tileCacheSize: 200
},
maximumLevel: 20,
minimumLevel: 1,
simplify: false
});
provinceProvider.readyPromise.then(function () {
provinceLayer = viewer.imageryLayers.addImageryProvider(provinceProvider);
});
var line_gaosuDL = new VectorTileImageryProvider({
source: "./data/SHP/line_gaosuDL.shp",//appConfig.BaseURL + "Assets/Data/shp/world/国家简化边界.shp",
defaultStyle: {
outlineColor: "rgb(255,0,0)",
lineWidth: 5,
// fill: true,
// tileCacheSize: 200,
// showMaker: true,
// showCenterLabel: true,
// fontColor: "rgba(255,255,0,1)",
// labelOffsetX: -10,
// labelOffsetY: -5,
// fontSize: 30,
// fontFamily: "黑体",
// centerLabelPropertyName: "name"
},
// maximumLevel: 20,
// minimumLevel: 1,
// simplify: false
});
line_gaosuDL.readyPromise.then(function () {
viewer.imageryLayers.addImageryProvider(line_gaosuDL);
});
var worldLayer = null;
var worldProvider = new VectorTileImageryProvider({
source: "./data/SHP/panel_xiaoqu.shp",
defaultStyle: {
outlineColor: "rgb(255,0,0)",
lineWidth: 1,
fill: true,
tileCacheSize: 200,
showMaker: true,
showCenterLabel: true,
fontColor: "rgba(255,255,255,1)",
labelOffsetX: -10,
labelOffsetY: -5,
fontSize: 130,
fontFamily: "黑体",
centerLabelPropertyName: "name"
},
// maximumLevel: 20,
// minimumLevel: 1,
simplify: false
});
worldProvider.readyPromise.then(function () {
worldLayer = viewer.imageryLayers.addImageryProvider(worldProvider);
});
</script>
</body>
</html>
CesiumVectorTile.js文件我已经上传了,但博客不是很溜,不知道在哪里,需要的兄弟自己去我上传的文件里找吧。
顺便说下我不知道cesium上的资源的积分是怎么算的,我的目的大家相互学习。上传的时候我都写的5积分。但是我发现过段时间他自己会变贵。所以如果没积分的朋友可以私信我发给你的。