C1—— cesium加载shp文件

GIS兵墩墩

已于 2022-04-10 12:58:05 修改

阅读量7.8k

点赞数 7

分类专栏： Cesium 文章标签： Cesium

于 2020-05-13 09:58:59 首次发布

GIS-TeZhanBing

本文链接：https://blog.csdn.net/qq_24641385/article/details/106091228

版权

Cesium 专栏收录该内容

31 篇文章 47 订阅

订阅专栏

说在前面：很多时候我们是加载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积分。但是我发现过段时间他自己会变贵。所以如果没积分的朋友可以私信我发给你的。