zoukankan      html  css  js  c++  java
  • Cesium加载天地图

    把leaflet换成cesium,并没有看出来差别,可能是面积太小了吧 变形不明显。。

     http://localhost:8080/cesium/Apps/HelloWorld.html

    <script>
            Cesium.Ion.defaultAccessToken='xxxx';
            let viewerOption = {
                animation: false, // 控制场景动画的播放速度控件
                baseLayerPicker: false, // 底图切换控件
                fullscreenButton: false, // 全屏控件
                geocoder: false, // 地理位置查询定位控件
                homeButton: false, // 默认相机位置控件
                timeline: false, // 时间滚动条控件
                infoBox: false,           //是否显示信息框
                sceneModePicker: false, //是否显示3D/2D选择器
                selectionIndicator: false, // 点击点绿色弹出 是否显示选取指示器组件
                sceneMode: Cesium.SceneMode.SCENE3D, //设定3维地图的默认场景模式:Cesium.SceneMode.SCENE2D、Cesium.SceneMode.SCENE3D、Cesium.SceneMode.MORPHING
                navigationHelpButton: false, // 默认的相机控制提示控件
                scene3DOnly: true, // 每个几何实例仅以3D渲染以节省GPU内存
                navigationInstructionsInitiallyVisible: false,
                showRenderLoopErrors: false, //是否显示渲染错误
                orderIndependentTranslucency:false,//设置背景透明
                errainProvider: Cesium.createWorldTerrain()
            };
            
            let viewer = new Cesium.Viewer("cesiumContainer", viewerOption);
    
            var TDU_Key = "xxxxxx"//天地图申请的**
     
            //在线天地图影像服务地址(墨卡托投影)
            var TDT_IMG_W = "http://{s}.tianditu.gov.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0" +
                "&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
                "&style=default&format=tiles&tk=" + TDU_Key;
            //在线天地图矢量地图服务(墨卡托投影) 
            var TDT_VEC_W = "http://{s}.tianditu.gov.cn/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0" +
                "&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
                "&style=default&format=tiles&tk=" + TDU_Key;
            //在线天地图影像中文标记服务(墨卡托投影)  
            var TDT_CIA_W = "http://{s}.tianditu.gov.cn/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0" +
                "&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
                "&style=default.jpg&tk=" + TDU_Key
            //在线天地图矢量中文标记服务(墨卡托投影)            
            var TDT_CVA_W = "http://{s}.tianditu.gov.cn/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0" +
                "&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
                "&style=default.jpg&tk=" + TDU_Key;
     
    //此处插播广告。有BIM模型引擎的需求,可以找我们。官网http://www.qmodel.cn/
     
            let Img = new Cesium.WebMapTileServiceImageryProvider({   //调用影响中文服务
                url: TDT_VEC_W,//url地址,换影像还是矢量,随便你喜欢
                layer: "img_w",    //WMTS请求的层名称
                style: "default",//WMTS请求的样式名称
                format: "tiles",//MIME类型,用于从服务器检索图像
                tileMatrixSetID: "GoogleMapsCompatible",//    用于WMTS请求的TileMatrixSet的标识符
                subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],//天地图8个服务器
                minimumLevel: 0,//最小层级
                maximumLevel: 18,//最大层级
            })
     
            viewer.imageryLayers.addImageryProvider(Img)//添加到cesium图层上
     
     
            let cia = new Cesium.WebMapTileServiceImageryProvider({   //调用影响中文注记服务
                url: TDT_CVA_W,
                layer: "cia_w",
                style: "default",
                format: "tiles",
                tileMatrixSetID: "GoogleMapsCompatible",
                subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],//天地图8个服务器
                minimumLevel: 0,
                maximumLevel: 18,
            })
     
            viewer.imageryLayers.addImageryProvider(cia)//添加到cesium图层上
            viewer.scene.globe.depthTestAgainstTerrain = !0;
     
            // 没有影像图层时地球的底色
            viewer.scene.globe.baseColor = Cesium.Color.BLACK;
     
            viewer.camera.setView({
                destination: new Cesium.Cartesian3(6788280.844465209, -81980750.10214644, 1061921.04004376)
            });
            viewer.camera.flyTo({
              //  destination: new Cesium.Cartesian3.fromDegrees(116.435314, 40.960521, 10000000.0),
              //  duration:8
                destination: new Cesium.Cartesian3.fromDegrees(116.435314, 22.960521, 2000.0),
                duration:18
            });
     
      </script>
  • 相关阅读:
    SQL查询版本信息语句
    一个简单的 分组 计算组内记录数占比的 语句
    MSSQL 判断表是否存在的两种方法
    兼容IEFireFoxChrome的背景音乐播放
    [C# 基础知识系列]专题二:委托的本质论
    [C# 基础知识系列]专题八: 深入理解泛型(二)
    [C# 基础知识系列]专题九: 深入理解泛型可变性
    [C# 基础知识系列]专题一:深入解析委托——C#中为什么要引入委托
    [C# 基础知识系列]专题六:泛型基础篇——为什么引入泛型
    [C# 基础知识系列]专题四:事件揭秘
  • 原文地址:https://www.cnblogs.com/2008nmj/p/14911966.html
Copyright © 2011-2022 走看看