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

随机推荐

Android---ListView控件用法
首先要使用ListView是要自定义一个适配器类的,先简单分析一下适配器怎么写: 示例程序是要使用ListView列表显示出水果的图片以及对应的水果文字描述(水果名字). public class F ...
在nginx中使用proxy protocol协议
目录简介 proxy protocol在nginx中应用在nginx中配置使用proxy protocol 在nginx中启用proxy protocol 使用Real‑IP modules 请求 ...
C# 方法详解：定义、调用、参数、默认值、返回值、命名参数、方法重载全解析
C# Methods 方法是一段代码,只有在调用时才会运行. 您可以将数据(称为参数)传递给方法. 方法用于执行某些操作,也被称为函数. 为什么使用方法?为了重用代码:定义一次代码,然后多次使用. 创 ...
C# Break 和 Continue 语句以及数组详解
C# Break 它被用于"跳出" switch 语句. break 语句也可用于跳出循环. 以下示例在 i 等于 4 时跳出循环: 示例: for (int i = 0; i & ...
基于 Java 编程生成二维码图片
0x01 准备 (1)软件版本 IntelliJ IDEA 2023.1.3 JDK 18 Tomcat 10.1.11 Maven 3.8.6 (2)技术栈 servlet zxing 谷歌项目生 ...
pageSpy - 远程调试利器
视频版: https://www.bilibili.com/video/BV1Zi4y167TZ 前言在工作中, 经常需要面对的问题就是处理客户提出的bug. 但是这个事儿最耗费精力甚至决定能不能修 ...
git fork 项目的更新
fork:github网站的操作,将开源项目复制一份到自己的仓库中那fork的项目在原仓库更新后,如何同步呢? 1.查看远程仓库 $ git remote -v origin https://cod ...
19_非单文件名组件中VueComponent构造函数&重要的内置关系
总结: 关于VueComponent: 1.school组件本质上是一个名为VueComponent的构造函数,且不是程序员定义的,是Vue.extend生成的. 2.我们只需要写&l ...
Spring Boot 微服务性能下降九成！使用 Arthas 定位根因
简介: 接收到公司业务部门的开发反馈,应用在升级公司内部框架后,UAT(预生产)环境接口性能压测不达标. 背景接收到公司业务部门的开发反馈,应用在升级公司内部框架后,UAT(预生产)环境接口性能压测 ...
基于容器服务 ACK 发行版打造 CNStack 社区版
简介:本文将介绍如何使用 ACK Distro 作为基础镜像打造 CNStack 社区版以及CNStack 社区版中的容器服务 ACK 敏捷版产品如何帮助用户更好的使用容器平台能力. 作者:临石 C ...

cesium教程1-加载显示地图

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

随机推荐

热门专题