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

随机推荐

LiftPool：双向池化操作，细节拉满，再也不怕丢特征了 | ICLR 2021
论文参考信号处理中提升方案提出双向池化操作LiftPool,不仅下采样时能保留尽可能多的细节,上采样时也能恢复更多的细节.从实验结果来看,LiftPool对图像分类能的准确率和鲁棒性都有不错的提升,而 ...
C#利用自动化接口编写OPC客户端，OPC Client，源码直接放网盘
引用:https://www.cnblogs.com/flh1/p/12409266.html 链接: https://pan.baidu.com/s/1Vs08c7qjShEc9GQ8dvCkdg ...
代码覆盖率检查工具 -- Coverage，简单使用
Coverage 一个专门用来检查代码覆盖率的工具,他的使用非常简单,有两种使用方法:[命令行运行,配合测试套件使用] 安装: pip install coverage 一.准备素材 main.py ...
动态规划（六）——树形dp
树形dp,又称树状dp,即在树上进行的dp,在设计动态规划算法时,一般就以节点从深到浅(子树从小到大)的顺序作为dp的"阶段",dp的状态表示中,第一维通常是节点编号(代表以该节点 ...
CentOS 8开启防火墙端口关闭防火墙端口端口对外放行
1:查看firewall防火墙状态 firewall-cmd --state 或者 systemctl status firewalld 2:打开防火墙 systemctl start firewal ...
navicat连接mysql8报错
mysql8采用更安全的加密方式,navicat不支持,网上大多办法都是采用的更改数据库加密方式为外部加密个人觉得这样它不太合适 so,终于找到一个办法: 把mysql8安装后的lib文件夹里的 l ...
Hadoop HDFS 3.2的部署
之前写过HDFS 2.6的部署,最近项目中尝试使用最新的HDFS 3.2.1做离线存储,部署方式略有不同,所以这里再简单写一下,这里只涉及到存储因此不再配置yarn,只配置HDFS最基本的服务Name ...
力扣409(java&python)-最长回文串（简单）
题目: 给定一个包含大写字母和小写字母的字符串 s ,返回通过这些字母构造成的最长的回文串 . 在构造过程中,请注意区分大小写 .比如 "Aa" 不能当做一个回文字符串. 示 ...
力扣661(java)-图片平滑器（简单）
题目: 图像平滑器是大小为 3 x 3 的过滤器,用于对图像的每个单元格平滑处理,平滑处理后单元格的值为该单元格的平均灰度. 每个单元格的平均灰度定义为:该单元格自身及其周围的 8 个单元格的 ...
极致体验！基于阿里云 Serverless 快速部署 Function
简介: 云计算的不断发展,涌现出很多改变传统 IT 架构和运维方式的新技术,而以虚拟机.容器.微服务为代表的技术更是在各个层面不断提升云服务的技术能力,它们将应用和环境中很多通用能力变成了一种服务.但 ...

cesium教程1-加载显示地图

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

随机推荐

热门专题