加载中…
个人资料
cumtzheNo1
cumtzheNo1
  • 博客等级:
  • 博客积分:0
  • 博客访问:392,079
  • 关注人气:35
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
正文 字体大小:

Cesium学习笔记-工具篇09-CesiumVectorTile矢量瓦片

(2018-08-09 17:21:17)
标签:

cesium

cesiumvectortile

矢量动态切片

矢量贴地

矢量瓦片

分类: Cesium
今天我们学习一个cesium基本GIS工具:CesiumVectorTile矢量瓦片工具github连接。它可以实现小数据量的
geojson、shape矢量文件动态切片,并且可以实现贴地绘制。他是国内cesium大牛mikeswei大牛git地址编写的,大牛还编写了一些cesium相关的工具。
作者在他git上展示工具效果:
Cesium学习笔记-工具篇09-CesiumVectorTile矢量瓦片
指定显示的标注:
Cesium学习笔记-工具篇09-CesiumVectorTile矢量瓦片
加载地形后,贴地绘制:
Cesium学习笔记-工具篇09-CesiumVectorTile矢量瓦片
下载git源码解压后:
Cesium学习笔记-工具篇09-CesiumVectorTile矢量瓦片
build路径下是编译后的源码文件:
Cesium学习笔记-工具篇09-CesiumVectorTile矢量瓦片
将文件引入自己的工程中,加载geojson和shp文件,示例代码:
   VectorTileImageryProvider = Cesium.VectorTileImageryProvider;
        var mtdt = new Cesium.WebMapTileServiceImageryProvider({
            url: 'http://t0.tianditu.com/img_w/wmts?',
            layer: 'img',
            style: 'default',
            format: 'tiles',
            tileMatrixSetID: 'w',
            credit: new Cesium.Credit('天地图全球影像服务'),
            maximumLevel: 18
        });
        var terrainProvider = new Cesium.CesiumTerrainProvider({
            url: './sampledata/terrain/ctb-merger/'
        });
        
        var viewer = new Cesium.Viewer('cesiumContainer', {
            skyBox: false,
            skyAtmosphere: false,
            imageryProvider: mtdt,  
            contextOptions: {
                webgl: {
                    alpha: true
                }
            },
            creditContainer: "creditContainer",
            selectionIndicator: false,
            animation: false,   
            baseLayerPicker: false,  
            geocoder: false,  
            timeline: false,  
            sceneModePicker: true,  
            navigationHelpButton: false,  
            infoBox: false,   
            fullscreenButton: true
        });
        viewer.terrainProvider = terrainProvider;
        //设置homebutton的位置
        Cesium.Camera.DEFAULT_VIEW_RECTANGLE =
                Cesium.Rectangle.fromDegrees(127.0, 41.0, 129.0, 43.0);//Rectangle(west, south, east, north)
        //设置初始位置
        viewer.camera.setView({
            destination: Cesium.Cartesian3.fromDegrees(128.055, 42.006, 30000)
        });
         
        viewer.scene.debugShowFramesPerSecond = true;//显示帧数

        var provinceLayer = null;
        Cesium.loadText("./sampledata/vector/bj.json").then(function (geojson) {
            geojson = eval_r("(" + geojson + ")");
            var provinceProvider = new VectorTileImageryProvider({
                source: geojson,
                defaultStyle: {
                    outlineColor: "rgb(255,255,255)",
                    lineWidth: 2,
                    fill: true,
                    tileCacheSize: 200,
                    showMaker: false,
                    showCenterLabel: true,
                    fontColor: "rgba(255,0,0,1)",
                    labelOffsetX: -10,
                    labelOffsetY: -5,
                    fontSize: 13,
                    fontFamily: "黑体",
                    centerLabelPropertyName: "NAME"
                },
                maximumLevel: 20,
                minimumLevel: 3,
                simplify: false
            });
            provinceProvider.readyPromise.then(function () {
                provinceLayer = viewer.imageryLayers.addImageryProvider(provinceProvider);

            });
        })

        var shpPromises2 = [
                Cesium.loadBlob("./sampledata/vector/world/国家简化边界.shp"),
                Cesium.loadBlob("./sampledata/vector/world/国家简化边界.dbf"),
                Cesium.loadBlob("./sampledata/vector/world/国家简化边界.prj"),
        ];
        Cesium.when.all(shpPromises2, function (files) {
            files[0].name = "国家简化边界.shp";
            files[1].name = "国家简化边界.dbf";
            files[2].name = "国家简化边界.prj";

            var shpLayer = null;
            var shpProvider = new VectorTileImageryProvider({
                source: files,
                defaultStyle: {
                    outlineColor: "rgb(255,255,0)",
                    lineWidth: 1.5,
                    fill: false,
                    tileCacheSize: 200,
                    showMaker: false,
                    showCenterLabel: true,
                    fontColor: "rgba(255,0,0,1)",
                    labelOffsetX: 0,
                    labelOffsetY: 0,
                    fontSize: 9,
                    fontFamily: "黑体",
                    lineDash: [2, 5, 2, 5],
                    centerLabelPropertyName: "NAME"
                },
                maximumLevel: 20,
                minimumLevel: 1,
                simplify: true
            });
            shpProvider.readyPromise.then(function () {
                shpLayer = viewer.imageryLayers.addImageryProvider(shpProvider);
                viewer.imageryLayers.raiseToTop(chinaLayer);
            });
        });
点线面的样式可以自定义设置,使用非常方便!
示例源码:github源码


我的学习公众号也开通,感兴趣的小伙伴们可以加关注:giserYZ2SS,代码交流小伙伴在公众号发消息,我会一一回复的。

Cesium学习笔记-工具篇09-CesiumVectorTile矢量瓦片

0

阅读 收藏 喜欢 打印举报/Report
  

新浪BLOG意见反馈留言板 欢迎批评指正

新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 产品答疑

新浪公司 版权所有