cesium教程1-加载显示地图

2022/8/15 23:55:12

本文主要是介绍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-加载显示地图的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程