cesium天地图底图

最新推荐文章于 2024-04-10 11:18:41 发布
最新推荐文章于 2024-04-10 11:18:41 发布
阅读量2.5k 收藏 5
点赞数
分类专栏： gis
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35302923/article/details/102954260
版权

一开始用的是http://t3.tianditu.com/cia_w/wmts这个地址，总出现跨域提示，后面地址改成这个页面中的地址就解决了，记录一下 

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Use correct character set. -->
    <meta charset="utf-8">
    <!-- Tell IE to use the latest, best version. -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
    <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="js/jquery-3.3.1.js"></script>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="Build/Cesium/Cesium.js"></script>
    <style>
        @import url(Build/Cesium/Widgets/widgets.css);
        html,
        body,
        #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        
        #toolbar {
            margin: 5px;
            padding: 2px 5px;
            position: absolute;
            width: 260px;
            top: 40px;
            height: 200px;
            display: none;
            background-color: rgba(38, 38, 38, 0.75);
            padding: 20px 20px 10px 20px;
            color: #ffffff;
            border: 1px solid #526f82;
        }
        
        #buttombar {
            margin: 5px;
            padding: 2px 5px;
            position: absolute;
            width: 50px;
            top: 80%;
            height: 50px;
            display: block;
            /* background-color: rgba(38, 38, 38, 0.75); */
            padding: 0px;
            color: #ffffff;
            border: 1px solid #526f82;
        }
        
        #guangzhao {
            margin: 5px;
            padding: 2px 5px;
            position: absolute;
            width: 50px;
            top: 85%;
            height: 50px;
            display: block;
            /* background-color: rgba(38, 38, 38, 0.75); */
            padding: 0px;
            color: #ffffff;
            border: 1px solid #526f82;
        }
        
        .form-group {
            position: relative;
            font-size: 15px;
            color: white;
        }
        
        .button {
            line-height: 30px;
            text-align: center;
            font-weight: bold;
            color: #fff;
            text-shadow: 1px 1px 1px #333;
            border-radius: 3px;
            margin: 0 0px 20px 0;
            position: relative;
            overflow: hidden;
            padding: 0px 15px 0px 15px;
        }
        
        .button.black {
            border: 1px solid #333;
            box-shadow: 0 1px 2px #8b8b8b inset, 0 -1px 0 #3d3d3d inset, 0 -2px 3px #8b8b8b inset;
            background: -webkit-linear-gradient(top, rgba(34, 34, 34, 0.49), rgba(51, 51, 51, 0.55));
            background: -moz-linear-gradient(top, #656565, #4a4a4a);
            background: linear-gradient(top, #656565, #4a4a4a);
        }
        
        .cesium-viewer-animationContainer,
        /* 左下角动画控件 */
        
        .cesium-viewer-timelineContainer
        /* 时间线 */
        
        {
            display: none;
        }
        
        .form-group .form-control {
            TEXT-ALIGN: center;
            width: 50px;
            z-index: 3;
            height: 18px;
            left: 170px;
            top: 0px;
            position: relative;
            background: none;
            border: none;
            padding: 5px 0;
            -webkit-transition: 0.3s;
            transition: 0.3s;
            border-bottom: 1px solid #777;
        }
        
        .form-group .form-control:focus,
        .form-group .form-control:valid {
            outline: none;
            color: beige;
            box-shadow: 0 1px white;
            border-color: white;
        }
    </style>
</head>

<body>
    <div id="credit">


    </div>
    <div id="cesiumContainer">

    </div>
    <div id="toolbar" class="cesium-viewer-toolbar">

        <div class="form-group">
            <input id="maxHeight" value="10" required="required" class="form-control" />
            <label class="form-label">最大高度  (米) :    </label>
        </div>
        <div class="form-group">
            <input id="minHeight" value="0" required="required" class="form-control" />
            <label class="form-label">最小高度  (米) :</label>
        </div>
        <div class="form-group">
            <input id="speed" value="0.1" required="required" class="form-control" />
            <label class="form-label">淹没速度(m/s):</label>
        </div>
        <div style="margin: 10px;">
            <button type="button" id="begin" class="button black" onclick="runwater()">开始</button>
            <button type="button" id="clear" class="button black" onclick="removewater()">清除</button>
        </div>
    </div>
    <div id="buttombar" class="cesium-viewer-toolbar">
        <div style="width: 50px; height:52px; background-color: #fff;left: 90px; margin: 0 auto;">
            <div style="padding: 5px" title="查询">
                <span onclick="lookck()"><img src="img/cx.png"></span>
            </div>
        </div>
    </div>
    <div id="guangzhao" class="cesium-viewer-toolbar">
        <div style="width: 50px; height:52px; background-color: #fff;left: 90px; margin: 0 auto;">
            <div style="padding: 5px" title="查询">
                <span onclick="guangzhao()"><img src="img/cx.png"></span>
            </div>
        </div>
    </div>
    <script>
        var viewer = new Cesium.Viewer('cesiumContainer', {
            //    搜索
            geocoder: false,
            // sceneMode: Cesium.SceneMode.SCENE2D,
            // 查看主页按钮
            homeButton: false,
            // 2D/3D切换
            sceneModePicker: false,
            // 底图
            baseLayerPicker: false,
            // 导航说明
            navigationHelpButton: true,
            // 导航仪
            animation: true,
            creditContainer: "credit",
            // 时间线
            timeline: true,
            // 全屏
            fullscreenButton: false,
            // vr模式
            vrButton: false,
            infoBox: true,
            // 天地图底图
            imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
                url: "http://t0.tianditu.gov.cn/img_w/wmts?tk=7b435c61bff7f77eb49206e10d6397bd",
                layer: 'img',
                style: 'default',
                tileMatrixSetID: 'w',
                format: 'tiles',
                maximumLevel: 18
            })

        });
        // 标注
        viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
            url: "http://t0.tianditu.gov.cn/cia_w/wmts?tk=7b435c61bff7f77eb49206e10d6397bd",
            layer: 'cia',
            style: 'default',
            tileMatrixSetID: 'w',
            format: 'tiles',
            maximumLevel: 18
        })); //注记图层
        var tileset = new Cesium.Cesium3DTileset({
            url: 'tile/tileset.json'
        });
        viewer.scene.primitives.add(tileset);
        viewer.zoomTo(tileset);
        // viewer.scene.screenSpaceCameraController.minimumZoomDistance = 1000;
        viewer.scene.screenSpaceCameraController.maximumZoomDistance = 250000;
        tileset.readyPromise.then(function() {
            var boundingSphere = tileset.boundingSphere;
            viewer.camera.viewBoundingSphere(boundingSphere, new Cesium.HeadingPitchRange(0.0, 0, 0));
            viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
            var cartographic = Cesium.Cartographic.fromCartesian(tileset.boundingSphere.center);
            var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height);

            var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 30);
            var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
            tileset._modelMatrix = Cesium.Matrix4.fromTranslation(translation);
        }).otherwise(function(error) {
            throw (error);
        });




        function measureAreaSpace(viewer, maxH, interval, speed) {
            let waterEntity = viewer.entities.add({
                polygon: {
                    hierarchy: Cesium.Cartesian3.fromDegreesArray([ //hierarchy分层（位置，孔）
                        120.2756859, 30.42667624,
                        120.2734762, 30.43048772,
                        120.2691198, 30.43816092,
                        120.2688253, 30.43887895,
                        120.2721572, 30.44058701,
                        120.2753432, 30.44222015,
                        120.2781081, 30.44363731,
                        120.2831174, 30.4462046,
                        120.2842303, 30.44613582,
                        120.284472, 30.44590172,
                        120.2875494, 30.44292078,
                        120.2904976, 30.44006473,
                        120.293151, 30.43749407,
                        120.2970764, 30.43281576,
                        120.2970761, 30.43263726,
                        120.2956152, 30.43206517,
                        120.2834947, 30.42860944,
                        120.2756859, 30.42667624

                    ]),
                    material: Cesium.Color.POWDERBLUE.withAlpha(0),
                    perPositionHeight: false,
                    extrudedHeight: 0.0,
                    disableDepthTestDistance: Number.POSITIVE_INFINITY,
                    heightReference: Cesium.HeightReference.CLAMP_TO_GROUND //是否贴地
                }
            });
            //二秒后开始进入淹没分析
            setTimeout(function() {

                if (waterEntity) {
                    waterEntity.polygon.material = Cesium.Color.POWDERBLUE.withAlpha(0.5);
                    var h = 0;
                    waterEntity.polygon.extrudedHeight = 0; //需要提前设置 不然会全部出现
                    var st = setInterval(function() {
                        h = h + speed;
                        if (h >= maxH) {
                            h = maxH; //给个最大值
                            alert("达到最高值");
                            clearTimeout(st);
                        }
                        waterEntity.polygon.extrudedHeight.setValue(h);
                    }, interval);
                }
                // entity.billboard.color = Cesium.Color.WHITE;　　
                // }

                /* 多边形*/
                var PolygonPrimitive = (function() {
                    function _(positions) {
                        this.options = {
                            name: '多边形',
                            polygon: {
                                hierarchy: [],
                                material: Cesium.Color.POWDERBLUE.withAlpha(0.5)
                            }
                        };

                        this.hierarchy = positions;
                        this._init();
                    }
                    _.prototype._init = function() {
                        var _self = this;
                        var _update = function() {
                            return _self.hierarchy;
                        };
                        //实时更新polygon.hierarchy
                        this.options.polygon.hierarchy = new Cesium.CallbackProperty(_update, false);
                        waterEntity = viewer.entities.add(this.options);
                    };

                    return _;
                })();

            }, interval);
        }


        function runwater() {
            var maxHeight = document.getElementById('maxHeight').value;
            var minHeight = document.getElementById('minHeight').value;
            var speed = document.getElementById('speed').value;
            //运行
            measureAreaSpace(viewer, maxHeight, 1000, 1); //maxH 设置为2000;最大淹没海拔 每10毫秒前进1海拔;
        }

        function removewater() {
            viewer.entities.removeAll();

        }
        viewer.clock.onTick.addEventListener(function() {
            if (viewer.camera.pitch > 0) {
                viewer.scene.screenSpaceCameraController.enableTilt = false;
            }
        });
        var mousePosition, startMousePosition;
        var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
        handler.setInputAction(function(movement) {
            mousePosition = startMousePosition = Cesium.Cartesian3.clone(movement.position);
            handler.setInputAction(function(movement) {
                mousePosition = movement.endPosition;
                var y = mousePosition.y - startMousePosition.y;
                if (y > 0) {
                    viewer.scene.screenSpaceCameraController.enableTilt = true;
                }
            }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
        }, Cesium.ScreenSpaceEventType.MIDDLE_DOWN);

        viewer.scene.globe.depthTestAgainstTerrain = true;

        function lookck() {
            if ($("#toolbar").css("display") == "none") {
                $("#toolbar").css({
                    display: "block"
                });
            } else {
                $("#toolbar").css({
                    display: "none"
                });
            }

        }
        // 光照效果
        function guangzhao() {
            if ($('.cesium-viewer-animationContainer').css('display') == "none" && $('.cesium-viewer-timelineContainer').css('display') == "none") {
                $('.cesium-viewer-animationContainer').css({
                    display: "block"
                });
                $('.cesium-viewer-timelineContainer').css({
                    display: "block"
                });
                // 阴影
                // viewer.shadows = true;
                // 启用光照效果
                // viewer.scene.globe.enableLighting = false;
            } else {
                $('.cesium-viewer-animationContainer').css({
                    display: "none"
                });
                $('.cesium-viewer-timelineContainer').css({
                    display: "none"
                });
                // 阴影
                viewer.shadows = false;
                // 启用光照效果
                // viewer.scene.globe.enableLighting = false;
            }
        };
        //设置初始位置
        viewer.camera.setView({
            destination: Cesium.Cartesian3.fromDegrees(120.2756859, 30.42667624, 1500)
        });
        var position = Cesium.Cartesian3.fromDegrees(120.2756859, 30.42667624, 500.0);
        // var entity = viewer.entities.add({
        //     position: position,
        //     box: {
        //         dimensions: new Cesium.Cartesian3(1400.0, 1400.0, 2800.0),
        //         material: Cesium.Color.WHITE.withAlpha(0.3),
        //         outline: true,
        //         outlineColor: Cesium.Color.WHITE
        //     }
        // });

        // var globe = viewer.scene.globe;
        // globe.depthTestAgainstTerrain = true;
        // globe.clippingPlanes = new Cesium.ClippingPlaneCollection({
        //     modelMatrix: entity.computeModelMatrix(Cesium.JulianDate.now()),
        //     planes: [
        //         new Cesium.Plane(new Cesium.Cartesian3(1.0, 0.0, 0.0), 700.0),
        //         new Cesium.Plane(new Cesium.Cartesian3(-1.0, 0.0, 0.0), 700.0),
        //         new Cesium.Plane(new Cesium.Cartesian3(0.0, 1.0, 0.0), 700.0),
        //         new Cesium.Plane(new Cesium.Cartesian3(0.0, -1.0, 0.0), 700.0)
        //     ],
        //     edgeWidth: 1.0,
        //     edgeColor: Cesium.Color.WHITE
        // });
    </script>


</body>

</html>

 

JanetLiu1102
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Cesium 实战 16 - 点（point）、文本标签（Label） 和 广告牌（Billboard）弹跳效果
linzi19900517的博客
02-07 3092
项目中需要广告牌（效果图标）的弹跳效果，百度搜索并尝试了很多博客，大概有三种方式实现。一种是通过监听地球渲染事件：viewer.scene.preUpdate.addEventListener 改变高度，实现效果。另一种方式是通过回调属性：CallbackProperty 实现效果。还有一种方式是通过周期定时函数 setInterval 来手动控制高度，实现效果，最终文本还是使用回调属性 CallbackProperty 来实现广告牌的弹跳效果，其他方式请查看参考博客。
64.（cesium篇）cesium根据坐标位置获取地形高度
GIS之家家长
04-08 1226
听老人家说：多看美女会长寿 地图之家总目录（订阅之前建议先查看该博客） 文章末尾处提供保证可运行完整代码包，运行如有问题，可“私信”博主。 效果如下所示： 下面献上完整代码，代码重要位置会做相应解释 <html lang="en"> <head> <meta charset="UTF-8"/> <script src="Build/Cesium/Cesium.js"></script> <link rel="st
Cesium地图反选遮罩，支持自定义遮罩颜色
09-26
Cesium地图反选遮罩，支持自定义遮罩颜色
Cesium16-Cesium三维模型高度调整
m0_56492004的博客
03-19 653
原始数据如果存在高程数据，生产的3DTileset模型数据也会存在高程数据，不过可能由于原始高程数据不准确，造成模型浮空，这时我们就需要对模型进行高度调整。
【Cesium学习笔记】一、加载Cesium并更换天地图底图
最新发布
jg10000119的博客
04-10 898
本系列为Cesium的学习笔记，本章是Cesium的加载及底图更换
Cesium2D视图下模型显示高度限制问题
qq_37732512的博客
08-21 502
cesium三维切换二维，模型丢失问题
openlayers,地图创建 初始化 天地图底图添加
weixin_54988062的博客
06-27 609
openlayers,地图创建 初始化 天地图底图添加
cesium获取模型高度_Cesium之地形制作与合并
weixin_39690963的博客
11-20 645
前言我相信使用过Cesium的小伙伴一定不会陌生CesiumLab，将DEM数据导入CesiumLab的地形切片模块工具，设置一下切片参数，喝杯咖啡，等待任务完成，然后发布服务，最后使用API调用服务，大功告成......一开始，我也是如此的成功，不就是将DEM切成Cesium指定的地形格式嘛，CesiumLab是最佳的选择（毕竟是CesiumLab团队深耕的免费工具）。但是，这只是开始，试想一下...
cesium中添加天地图底图
tjx1997的博客
08-16 1866
天地图主要使用的是WGS84坐标系，并提供了矢量、影像、地形等多种底图。可以利用cesium的WebMapTileServiceImageryProvider完成天地图底图的加载。
Cesium支持加载百度地图源码可直接使用
04-13
很多小伙伴想要在Cesium里增加百度地图，现在源代码整理好了，需要的可以下载了，具体有什么问题可以私信我
cesium加载百度地图
05-20
cesium加载百度地图方法
Cesium 添加必应地图无需申请key
04-26
大家都知道，Cesium通过本身的工具就提供了bing必应地图的加载，但是，需要自己申请key，如果不想那么麻烦申请key，就可以通过下面的代码实现，官方沙箱实例就可以运行啊，需要的下载，有问题联系我
slider.rar cesium加载天地图实现地图卷帘
07-21
cesium加载天地图地图，并实现地图卷帘功能
Cesium 常用地图纠偏 百度、高德、Arcgis、腾讯地图纠偏
04-10
Cesium 常用地图纠偏 百度、高德、Arcgis、腾讯地图纠偏 资源预览:http://dongnan185.com:8083/videos/jiupian.mp4 启动:npm i npm run serve
label_设置行距、字距及计算含有行间距的label高度
weixin_30415801的博客
05-27 224
// // ViewController.m // CNBlogs // // Created by PXJ on 16/5/27. // Copyright © 2016年 PXJ. All rights reserved. // #import "ViewController.h" @interface ViewController () @end ...
obj转gltf
qq_35302923的博客
06-26 2518
下载obj2gltf插件地址：https://github.com/AnalyticalGraphicsInc/obj2gltf 安装node环境 切换到本地node路径 执行npm install --save obj2gltf命令 将上一步npm文件夹中生成的node_modules拷贝至下载的obj2gltf-master文件夹下 执行转换命令 node bin/obj2gltf....
GeoServer+QGIS geoserver style
qq_35302923的博客
04-11 1381
QGIS导出sld文件，在geoserver 新建style时导入样式文件需要修改Name 跟新建的style名字相同，字段要跟layerattribute中字段的name相同
cesium 如何加载天地图深色底图
02-06
要在 Cesium 中加载天地图深色底图，您可以使用 Cesium 的 ImageryProvider 功能。首先，需要准备好天地图提供的服务地址，具体的地址格式如下： ``` ...``` 其中，{s} 表示服务器的编号，{x}、{y}、{z} 分别表示 x、...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值