Cesium Note5:自定义图层

添加高德地图


viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({
        url: 'http://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
        tilingScheme: new Cesium.WebMercatorTilingScheme()
      }));

官网

ImageryProvider

Provides imagery to be displayed on the surface of an ellipsoid. This type describes an interface and is not intended to be instantiated directly. Gets the credit to display when this imagery provider is active. Typically this is used to credit the source of the imagery.

https://cesium.com/learn/cesiumjs/ref-doc/ImageryProvider.html

切换

Cesium（四）加载影像图层

一、常用影像图层加载 1、添加高德地图 viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({ url: 'http://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', tilingScheme: new Cesium.WebMercatorTilingScheme() }) ); 2、添加天地图 //影像 viewer.imageryLayers.addImageryProvider( new Cesium.WebMapTileServiceImageryProvider({ url: "http://t0.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=你的token", layer: "tdtBasicLayer", style: "default", format: "image/jpeg" }), ); //注记 viewer.imageryLayers.addImageryProvider( new Cesium.WebMapTileServiceImageryProvider({ url: "http://t0.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=你的token", layer: "tdtAnnoLayer", style: "default", format: "image/jpeg" }) ); 3、添加ArcServer地图 viewer.imageryLayers.addImageryProvider(new Cesium.ArcGisMapServerImageryProvider({ url : 'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer' }) 4、添加Geoserver 地图 //wms地图服务 viewer.imageryLayers.addImageryProvider(new Cesium.WebMapServiceImageryProvider({ url : 'http://localhost:8080/geoserver/fs/wms', layers : 'fs:county3',//图层 parameters : { transparent : true, format : 'image/png', srs: 'EPSG:4490', styles:'' } }) ); //wmts服务 viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({ url:'http://localhost:8080/geoserver/gwc/service/wmts/rest/topp:states/{style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}?format=image/png', layer: 'topp:states',//图层名称 style: '', format: 'image/png', tileMatrixSetID: 'EPSG:4326', tileMatrixLabels: ['EPSG:4326:0', 'EPSG:4326:1', 'EPSG:4326:2', 'EPSG:4326:3', 'EPSG:4326:4', 'EPSG:4326:5', 'EPSG:4326:6', 'EPSG:4326:7', 'EPSG:4326:8', 'EPSG:4326:9', 'EPSG:4326:10', 'EPSG:4326:11' ...

https://www.jianshu.com/p/9d1d5a234307

初始化加载

Cesium使用天地图、高德地图、ArcGIS切片地图_shijie_nihao的博客-CSDN博客_arcgis加载天地图影像

通过创建Viewer时传入的 imageryProvider 参数：天地图：imageryProvider: new Cesium.WebMapTileServiceImageryProvider({ url: "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0...

https://blog.csdn.net/shijie_nihao/article/details/100066046


<div class="function_box1">
    <svg height="0" width="0">
      <symbol id="beats" viewBox="0 0 100 100">
        <line class="beat" x1="15" y1="40" x2="15" y2="100" stroke="currentColor" stroke-width="10"
          stroke-linecap="round"></line>
        <line class="beat" x1="50" y1="40" x2="50" y2="100" stroke="currentColor" stroke-width="10"
          stroke-linecap="round"></line>
        <line class="beat" x1="85" y1="40" x2="85" y2="100" stroke="currentColor" stroke-width="10"
          stroke-linecap="round"></line>
      </symbol>
    </svg>

    <span style="color:#4d94ff;border-radius: 5px; padding-left: 5px; font-size: 18px;">
      <svg height="18" width="30">
        <use href="#beats"></use>
        <!--href="#beats"所指向的就是上面<symbol>标签的id-->
      </svg>
      <span>数据中心</span>
    </span>
    <div id="echartdemo">
    </div>
  </div>

blog.csdn.net

https://blog.csdn.net/KK_bluebule/article/details/109675091