cesium教程1-加载显示地图

2022-08-15 21:03:05 阅读：200 来源： 互联网

标签：教程 imageryLayers viewer 地图 Cesium cesium new 影像加载

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 onl oad="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'
    }));

标签：教程,imageryLayers,viewer,地图,Cesium,cesium,new,影像,加载
来源： https://www.cnblogs.com/tiandi/p/16589594.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

cesium教程1-加载显示地图