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 ...

随机推荐

'scanf': This function or variable may be unsafe
'scanf': This function or variable may be unsafe. Consider using scanf_s instead. To disable depreca ...
#KD-Tree#洛谷 3710 方方方的数据结构
题目区间加,区间乘,单点查询,撤销修改分析由于可以离线,不妨把下标看成第一维,时间看成第二维,那么修改操作相当于在一个矩形上加或者乘, 不妨把查询的节点看作是二维平面上的点,这样实际上就可以用 ...
#状压dp#C 计划带师
分析状压dp显然,主要是字典序的问题, 考虑初态终态转换就可以保证字典序最小了代码 #include <cstdio> #include <cctype> #include ...
网络组件axios可以在OpenHarmony上使用了
什么是axios 上古浏览器页面在向服务器请求数据时,因为返回的是整个页面的数据,页面都会强制刷新一下,这对于用户来讲并不是很友好.并且我们只是需要修改页面的部分数据,但是从服务器端发送的却是整个页面 ...
什么是ip协议二
前言续前面一章. 正文看下ip选项: 看一张图: 这个ip选项一般我们不用看,即使你去搞硬件,那么做c++或者c的人会告诉你填啥,按照他们设置即可. 那么ip是如何传输的呢? 先看这张图,这张图的 ...
快速上手Linux核心命令
Linux 的重要性不用我多说了吧,大多数互联网公司,服务器都是采用的Linux操作系统 Linux是一个主要通过命令行来进行管理的操作系统. 只有熟练掌握Linux核心命令,在使用起来我们才会得心应 ...
seaJS简介
所有版本的 zip 包请在这里下载:seajs/tags 解压后,目录说明如下: dist -- sea.js 等压缩好的文件,直接可用 docs -- 使用文档 lib -- 给 Node.js 用 ...
修改中文、英文参考文献在文末列表中的顺序：EndNote
本文介绍在EndNote软件中,使得参考文献按照语种排列,中文在前.英文在后的方法. 前期我们在EndNote参考文献格式Output Styles界面介绍一文中,详细介绍了文献管理软件End ...
2024-04-21：用go语言，给一棵根为1的树，每次询问子树颜色种类数。假设节点总数为n，颜色总数为m，每个节点的颜色，依次给出，整棵树以1节点做头，有k次查询，询问某个节点为头的子树，一共
2024-04-21:用go语言,给一棵根为1的树,每次询问子树颜色种类数. 假设节点总数为n,颜色总数为m, 每个节点的颜色,依次给出,整棵树以1节点做头, 有k次查询,询问某个节点为头的子树,一共 ...
一文剖析PolarDB HTAP的列存数据压缩
简介: PolarDB MySQL是阿里云自研的云原生数据库,主要处理在线事务负载(OLTP, OnLine Transactional Processing),深受企业用户的青睐. 前言数据库迁移 ...

cesium教程1-加载显示地图

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

随机推荐

热门专题