cesium教程1-加载显示地图

2022/8/15 23:55:12

编程Tag： 教程地图加载 new viewer Cesium 影像 imageryLayers

本文主要是介绍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 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'
    }));

这篇关于cesium教程1-加载显示地图的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

cesium教程1-加载显示地图

相关编程文章