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

随机推荐

前端使用 Konva 实现可视化设计器（1）
使用 konva 实现一个设计器交互,首先考虑实现设计器的画布. 一个基本的画布: [展示]网格.比例尺 [交互]拖拽.缩放 "拖拽"是无尽的,"缩放"是基于鼠 ...
精彩预告 | OpenHarmony即将亮相MTSC 2023
MTSC 2023 第 12 届中国互联网测试开发大会(深圳站)即将于 2023 年 11 月 25 日,在深圳登喜路国际大酒店举办,大会将以"1 个主会场+4 个平行分会场"的形 ...
Matplotlib绘图设置---坐标轴上下限/标题设置
坐标轴上下限设置 plt.plot(x, np.sin(x)) #设置坐标轴上下限 plt.xlim(-1, 11) plt.ylim(-1.5, 1.5) plt.plot(x, np.sin(x) ...
面试官：Redis如何实现延迟任务？
延迟任务(Delayed Task)是指在未来的某个时间点,执行相应的任务.也就是说,延迟任务是一种计划任务,它被安排在特定的时间后执行,而不是立即执行. 延迟任务的常见使用场景有以下几个: 定时发送 ...
掌上新闻随心播控，HarmonyOS SDK助力新浪新闻打造精致易用的资讯服务新体验
原生智能是HarmonyOS NEXT的核心亮点之一,依托HarmonyOS SDK丰富全面的开放能力,开发者只需通过几行代码,即可快速实现AI功能.新浪新闻作为鸿蒙原生应用开发的先行者之一,从有声资 ...
VS 在 Release 模式下使用断点调试程序
修改方法: 项目属性 --> c/c++ --> 常规 --> 调试信息格式选择程序数据库 (默认:无) 项目属性 --> c/c++ --> 优化 --> 优化 ...
Qt线程简单使用二：QObject~创建任务类
需求: 点击QPushButton按钮,QLabel中的数字,不断累加,一直到999. 做法: 创建任务类,用来完成任务,创建子线程,将任务类放到子线程中,点击QPushButton后,先发送 ...
学习Source Generators之打包成Nuget使用
前面我们简单的实现了一个从swagger生成实体类的Generator,在实际使用中,通过nuget包引用使用会更方便,那么本篇文章将介绍如何将Generator打包成Nuget来使用. 打包Nuge ...
HarmonyOS网络管理开发—HTTP与WebSocket
一. 网络管理开发概述网络管理模块主要提供以下功能: ● HTTP数据请求:通过HTTP发起一个数据请求. ● WebSocket连接:使用WebSocket建立服务器与客户端的双向连接. ● ...
Webpack中常见的Loader？解决了什么问题？
一.是什么 loader 用于对模块的源代码进行转换,在 import 或"加载"模块时预处理文件 webpack做的事情,仅仅是分析出各种模块的依赖关系,然后形成资源列表,最终打 ...

cesium教程1-加载显示地图

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

随机推荐

热门专题