cesium教程1-加载显示地图

1、完整示例代码

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>cesium示例</title>

  <!-- 引用cesium的js和css，天地图的扩展js -->

  <script src="https://cesium.com/downloads/cesiumjs/releases/1.92/Build/Cesium/Cesium.js"></script>

  <script src="http://api.tianditu.gov.cn/cdn/plugins/cesium/cesiumTdt.js" ></script>

  <link rel="stylesheet" href="https://cesium.com/downloads/cesiumjs/releases/1.92/Build/Cesium/Widgets/widgets.css"/>

  <style type="text/css">

    html, body, #tiandituContainer {

      width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;

    }

  </style>

</head>

<body onload="loadData()">

<div id="tiandituContainer">

</div>

<script>

  //Cesium官网注册后的授权token，没有token也能使用js库

  Cesium.Ion.defaultAccessToken = "";

  var viewer;

   function loadData()

   {

       //默认会调用微软virtualearth地图

        viewer = new Cesium.Viewer('tiandituContainer',{

          animation:false,       //是否显示动画控件

          homeButton:true,       //是否显示home键

          geocoder:true,         //是否显示地名查找控件，如果设置为true，则无法查询

          baseLayerPicker:true, //是否显示图层选择控件

          timeline:false,        //是否显示时间线控件

          fullscreenButton:true, //是否全屏显示

          infoBox:true,         //是否显示点击要素之后显示的信息

          sceneModePicker:true,  //是否显示投影方式控件  三维/二维

          navigationInstructionsInitiallyVisible:false, //导航指令

          navigationHelpButton:false,     //是否显示帮助信息控件

          selectionIndicator:false, //是否显示指示器组件

        });

        //隐藏cesium的logo

        viewer._cesiumWidget._creditContainer.style.display = "none";

        //默认的Cesium会加载一个bingMap底图，这个地图网络不太好，一般要先去掉这个默认的

        viewer.imageryLayers.remove(viewer.imageryLayers.get(0));

        //arcgis在线影像地图

        viewer.imageryLayers.addImageryProvider(new Cesium.ArcGisMapServerImageryProvider({

            name:"img_arcgis",

            url:"https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"

        }));

         //天地图注册用户的授权key

         // var tiandituTk='***';

         //天地图-服务负载子域

         // var subdomains=['0','1','2','3','4','5','6','7'];

         //天地图-影像底图

      //   viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({

      //       url: "http://t{s}.tianditu.com/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="+tiandituTk,

      //       subdomains: subdomains,

      //       layer: "tdtImgLayer",

      //       style: "default",

      //       format: "image/jpeg",

      //       tileMatrixSetID: "GoogleMapsCompatible",//使用谷歌的瓦片切片方式

      //       show: true,

            // maximumLevel: 18//天地图放大超过18级就会404变灰了

      //     }));

           //天地图-影像注记

       //  viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({

       //    url: "http://t{s}.tianditu.com/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="+tiandituTk,

       //    subdomains: subdomains,

       //    layer: "tdtCiaLayer",

       //    style: "default",

       //    format: "image/jpeg",

       //    tileMatrixSetID: "GoogleMapsCompatible",

       //    show: true,

          // maximumLevel: 18//天地图放大超过18级就会404变灰了

       //  }));

          //将三维球定位到指定位置，camera是相机，是当前视野范围相机

          //destination是相机的目标位置，参数是经度、纬度、高度

          //orientation是相机朝向

          //    heading-代表镜头左右方向,正值为右,负值为左

          //    pitch-代表镜头上下方向,正值为上,负值为下.

          //    roll-代表镜头左右倾斜,正值,向右倾斜,负值向左倾斜

          viewer.camera.flyTo({

              destination: Cesium.Cartesian3.fromDegrees(114.47004, 37.0904, 20000000),

              orientation: {

                  heading :  Cesium.Math.toRadians(348.4202942851978),

                  pitch : Cesium.Math.toRadians(-89.74026687972041),

                  roll : Cesium.Math.toRadians(0)

              },

              complete:function callback() {

                  // 定位完成之后的回调函数

              }

          });

   }

</script>

</body>

</html>

2、cesium的orientation解释

heading-代表镜头左右方向,正值为右,负值为左,360度和0度是一样的
pitch-代表镜头上下方向,正值为上,负值为下.
roll-代表镜头左右倾斜.正值,向右倾斜,负值向左倾斜

3、加载国内其他地图

ImageryProvider 类包含的类型

ArcGisMapServerImageryProvider
- ArcGIS Online和Server的相关服务
BinaMapsImageryProvider
- Bing地图影像，可以指定mapStyle，详见BingMapsStyle类
GoogleEarthEnterpriselmageryProvider
- 企业级服务
GridImageryProvider
- 渲染每一个瓦片内部的格网，了解每个瓦片的精细度
IonImageryProvider
- Cesium ion REST API提供的影像服务
MapboxImageryProvider
- Mapbox影像服务，根据 mapId 指定地图风格
MapboxStyleImageryProvider
- Mapbox影像服务，根据 styleId 指定地图风格
createOpenStreetMapImageryProvider
- OpenStreetMap提供的影像服务
SingleTilelmageryProvider
- 单张图片的影像服务，适合离线数据或对影像数据要求并不高的场景下
TileCoordinatesImageryProvider
- 渲染每一个瓦片的围，方便调试
TileMapServicelmageryProvider
- 根据MapTiler规范，可自己下载瓦片，发布服务，类似ArcGIS影像服务的过程
UrlTemplateImageryProvider
- 指定url的format模版，方便用户实现自己的Provider，比如国内的高德，腾讯等影像服务，url都是一个固定的规范，都可以通过该Provider轻松实现。而OSM也是通过该类实现的
WebMapServiceImageryProvider
- 符合WMS规范的影像服务都可以通过该类封装，指定具体参数实现
WebMapTileServicelmageryProvider
- 服务WMTS1.0.0规范的影像服务，都可以通过该类实现，比如国内的天地图

加载高德地图

//影像地图

viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({

        url:"http://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}"

    }));

//矢量地图

viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({

        url:"http://webst02.is.autonavi.com/appmaptile?style=7&x={x}&y={y}&z={z}"

    }));

加载百度地图

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

     <script src="https://cesium.com/downloads/cesiumjs/releases/1.92/Build/Cesium/Cesium.js"></script>

  <link rel="stylesheet" href="https://cesium.com/downloads/cesiumjs/releases/1.92/Build/Cesium/Widgets/widgets.css"/>

    <script type="text/javascript" src="js/custom/imageryProvider/BaiDuImageryProvider.js"></script>

</head>

<body>

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

<script>

    var initCesium=new InitCesium();

    var viewer =initCesium.initViewer('cesiumContainer', {

    });

    var img_baidu=new BaiDuImageryProvider({

        layer:"vec"

    });

    var layers= viewer.scene.imageryLayers;

    layers.addImageryProvider(img_baidu);

</script>

</body>

</html>

加载腾讯地图

 viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({

        url: 'https://p2.map.gtimg.com/sateTiles/{z}/{sx}/{sy}/{x}_{reverseY}.jpg?version=229',

        customTags: {

            sx: function (imageryProvider, x, y, level) {

                return x >> 4;

            },

            sy: function (imageryProvider, x, y, level) {

                return ((1 << level) - y) >> 4;

            }

        }

    }));

    viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({

        url : 'https://rt3.map.gtimg.com/tile?z={z}&x={x}&y={reverseY}&styleid=2&version=297'

    }));

cesium教程1-加载显示地图的更多相关文章

1.BMap(百度地图)第二次加载显示不全
问题: bmap第一次加载显示没问题: 第二次再次加载这个页面时,地图的显示出现了问题: . 分析问题出现原因:你要确保dom创建后且处于显示状态(即display不能为none)才能再次初始化地图 ...
OpenLayers加载QQ地图(转)
OpenLayers加载QQ地图 http://www.openlayers.cn/portal.php?mod=view&aid=4 2012-10-21 17:22| 发布者: admin ...
ArcMap和ArcGIS Pro加载百度地图
前面发布了两篇我用ArcBruTile开发用于ArcMap加载百度地图的插件ArcBruTileBaidu,放在网上后评论和反响还不错,还有两位大学同学通过百度搜索居然搜到我本人!文章和技术介绍也被网 ...
（转） Arcgis for js加载百度地图
http://blog.csdn.net/gisshixisheng/article/details/44853709 概述: 在前面的文章里提到了Arcgis for js加载天地图,在本节,继续讲 ...
Arcgis for js加载百度地图
看转:https://blog.csdn.net/qq_41046162/article/details/80248281 通过学习了一段时间的arcgis for js,让我来讲一下如何在arcgi ...
支付宝小程序室内地图导航开发-支付宝小程序JS加载esmap地图
如果是微信小程序开发,请参考微信小程序室内地图导航开发-微信小程序JS加载esmap地图文章一.在支付宝小程序里显示室内三维地图需要满足的两个条件调用ESMap室内地图需要用到小程序web-vi ...
cesium初探之加载三维模型
项目需要用到二三维地图切换,本来准备研究ArcGIS js for Web 3d,但考虑到版权的问题,决定试着用cesium来做,于是花了2天时间抱着试试看的心态把cesium从环境配置到加载三维模型 ...
Cesium for Unreal加载倾斜摄影
本文介绍UE4中通过Cesium插架加载本地倾斜摄影模型.Cesium for Unreal插件运行在UE环境何总运行Cesium,这样方便做一个GIS应用. 安装Cesium for Unreal插 ...
bootstrap模态框modal使用remote第二次加载显示相同内容解决办法
bootstrap模态框modal使用remote动态加载内容,第二次加载显示相同内容解决办法 bootstrap的modal中,使用remote可以动态加载页面到modal-body中,并弹窗显示 ...
Flex加载google地图、百度地图以及天地图作底图
一 Flex加载Google地图作底图 (1)帮助类GoogleLayer.as /* * 根据输入的地图类型加载Google地图(by chenyuming) */ package Layers ...

随机推荐

nginx启用HTTP2特性
本文于2017年2月底完成,发布在个人博客网站上. 考虑个人博客因某种原因无法修复,于是在博客园安家,之前发布的文章逐步搬迁过来. 查看当前nginx的编译选项 #./nginx -V nginx v ...
OpenHarmony 状态变量更改通知：@Watch 装饰器
@Watch 应用于对状态变量的监听.如果开发者需要关注某个状态变量的值是否改变,可以使用 @Watch 为状态变量设置回调函数. 说明: 从 API version 9 开始,该装饰器支持在 Ark ...
C# 继承、多态性、抽象和接口详解：从入门到精通
C# 继承在 C# 中,可以将字段和方法从一个类继承到另一个类.我们将"继承概念"分为两类: 派生类(子类) - 从另一个类继承的类基类(父类) - 被继承的类要从一个类继承 ...
网上 server2008数据库恢复方法
从网下下载文件有两个:XX_DB_log.ldf 和XX_DB.mdf 首先:文件处理:右键--属性--安全---编辑--勾选"完全控制"--确定--即可.(两个文件都是相同操作) ...
保护C#代码的艺术：深入浅出代码混淆技术
摘要在C#开发中,代码的保护是一个不可忽视的问题.本文深入探讨了几种常用的C#代码混淆工具,帮助开发者理解如何有效地保护代码不被反编译.同时,本文也对混淆技术的优缺点进行了分析,并提供了一些实际使用 ...
vue项目中嵌入软键盘（中文/英文）
键盘效果是这样,样式可以自己调整.gittee地址:https://gitee.com/houxianzhou/VirtualKeyboard.git步骤1 安装使用jQuery npm instal ...
聊聊 Linux iowait
哈喽大家好,我是咸鱼. 我们在使用 top 命令来查看 Linux 系统整体 CPU 使用情况的时候,往往看的是下面这一列: %Cpu(s): 0.0 us, 0.0 sy, 0.0 ni,100.0 ...
一文带你了解企业上云数据分析首选产品Quick BI
简介: 阿里云Quick BI再度入选,并继续成为该领域唯一入选魔力象限的中国企业,文章将为大家详细介绍上云数据分析首选产品 Quick BI的核心能力. 日前,国际权威分析机构Gartner发布20 ...
sysAK（青囊）系统运维工具集：如何实现高效自动化运维？| 龙蜥技术
简介:What is sysAK.典型工具介绍.开源 3 方面介绍了 sysAK 系统,目前 sysAK 工具集已经在龙蜥社区开源,并且在系统运维 SIG.跟踪诊断 SIG 一起共建,希望大家后期加 ...
多任务多目标CTR预估技术
简介: 多目标(Multi Objective Learning)是MTL中的一种.在业务场景中,经常面临既要又要的多目标问题.而多个目标常常会有冲突.如何使多个目标同时得到提升,是多任务多目标在真 ...

cesium教程1-加载显示地图

cesium教程1-加载显示地图的更多相关文章

随机推荐

热门专题