cesium图层管理

Bosom??
已于 2022-03-09 15:12:20 修改
阅读量3.3k
点赞数 1
分类专栏： cesium 文章标签： cocos2d 游戏引擎
于 2022-03-09 14:53:28 首次发布
本文链接：https://blog.csdn.net/qq_46166163/article/details/122903535
版权
cesium 专栏收录该内容
1 篇文章 1 订阅
订阅专栏
图层覆盖问题(29条消息) cesium 叠加多个图层时解决图层有遮挡覆盖问题_yechangfeng111的博客-CSDN博客_cesium图层叠加 cesium 之图层管理器篇（附源码下载）－小专栏 (xiaozhuanlan.com
实现参考于cesium官网demo（下图为效果图）
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="chorme" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
    />
    <meta name="description" content="Layer imagery from multiple sources, including WMS servers, Bing Maps, ArcGIS Online, OpenStreetMaps, and more, and adjust the alpha of each independently.">
    <meta name="cesium-sandcastle-labels" content="Showcases">
    <title>Cesium Demo</title>
    <script type="text/javascript" src="./Sandcastle-header.js"></script>
    <script
      type="text/javascript"
      src="./scripts/CesiumUnminified/Cesium.js"
      
    ></script>

  </head>
  <body
    class="sandcastle-loading"
    data-sandcastle-bucket="bucket-requirejs.html"
  >
<style>
      @import url(./scripts/templates/bucket.css);

      #toolbar {
        background: rgba(42, 42, 42, 0.8);
        padding: 4px;
        border-radius: 4px;
      }

      #toolbar input {
        vertical-align: middle;
        padding-top: 2px;
        padding-bottom: 2px;
      }

      #toolbar table tr {
        transform: translateY(0);
        transition: transform 0.4s ease-out;
      }

      #toolbar table tr.up {
        transform: translateY(33px);
        transition: none;
      }

      #toolbar table tr.down {
        transform: translateY(-33px);
        transition: none;
      }
    </style>
    <div id="cesiumContainer" class="fullSize"></div>
    <div id="loadingOverlay"><h1>Loading...</h1></div>
    <div id="toolbar">
      <table>
        <tbody data-bind="foreach: layers">
          <tr data-bind="css: { up: $parent.upLayer === $data, down: $parent.downLayer === $data }">
            <td><input type="checkbox" data-bind="checked: show"></td>
            <td>
              <span data-bind="text: name, visible: !$parent.isSelectableLayer($data)"></span>
              <select data-bind="visible: $parent.isSelectableLayer($data), options: $parent.baseLayers, optionsText: 'name', value: $parent.selectedLayer"></select>
            </td>
            <td>
              <input type="range" min="0" max="1" step="0.01" data-bind="value: alpha, valueUpdate: 'input'">
            </td>
            <td>
              <button type="button" class="cesium-button" data-bind="click: function() { $parent.raise($data, $index()); }, visible: $parent.canRaise($index())">
                ▲
              </button>
            </td>
            <td>
              <button type="button" class="cesium-button" data-bind="click: function() { $parent.lower($data, $index()); }, visible: $parent.canLower($index())">
                ▼
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <script id="cesium_sandcastle_script">
function startup(Cesium) {
    'use strict';
//Sandcastle_Begin

const viewer = new Cesium.Viewer("cesiumContainer", {
  //隐藏按钮
  baseLayerPicker: false,
  navigationHelpButton: false,//是否显示右上角的帮助按钮
            timeline: false,//是否显示时间轴 
            animation:false,
});
viewer._cesiumWidget._creditContainer.style.display = 'none'; 
viewer.camera.setView({
            destination : new Cesium.Cartesian3(-1774408.6308292362, 5568754.171715988, 4612464.604996003),
            orientation: {
            heading : 6.283185307179586, // east, default value is 0.0 (north)指向
            pitch : -1.5706877029806772,    // default value (looking down)视角
            roll : 0.0                             // default value
            }
            });
const imageryLayers = viewer.imageryLayers;

const viewModel = {
  layers: [],
  baseLayers: [],
  upLayer: null,
  downLayer: null,
  selectedLayer: null,
  isSelectableLayer: function (layer) {
    return this.baseLayers.indexOf(layer) >= 0;
  },
  raise: function (layer, index) {
    imageryLayers.raise(layer);
    viewModel.upLayer = layer;
    viewModel.downLayer = viewModel.layers[Math.max(0, index - 1)];
    updateLayerList();
    window.setTimeout(function () {
      viewModel.upLayer = viewModel.downLayer = null;
    }, 10);
  },
  lower: function (layer, index) {
    imageryLayers.lower(layer);
    viewModel.upLayer =
      viewModel.layers[
        Math.min(viewModel.layers.length - 1, index + 1)
      ];
    viewModel.downLayer = layer;
    updateLayerList();
    window.setTimeout(function () {
      viewModel.upLayer = viewModel.downLayer = null;
    }, 10);
  },
  canRaise: function (layerIndex) {
    return layerIndex > 0;
  },
  canLower: function (layerIndex) {
    return layerIndex >= 0 && layerIndex < imageryLayers.length - 1;
  },
};
const baseLayers = viewModel.baseLayers;

Cesium.knockout.track(viewModel);
//图层设置
function setupLayers() {
  // Create all the base layers that this example will support.
  // These base layers aren't really special.  It's possible to have multiple of them
  // enabled at once, just like the other layers, but it doesn't make much sense because
  // all of these layers cover the entire globe and are opaque.
  addBaseLayerOption("Bing Maps Aerial", undefined); // the current base layer  
  
  
  addBaseLayerOption(
    "天地图影像底图",
    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=84e1639ed5e3026ecec77cd1c0837ead',
                layer: 'img',
                style: 'default',
                format: 'tiles',
                tileMatrixSetID: 'w',
                credit: new Cesium.Credit('天地图全球影像服务'),
    })
  );

  addBaseLayerOption(
    "天地图地形底图",
    new Cesium.WebMapTileServiceImageryProvider({
        url: 'http://t0.tianditu.gov.cn/ter_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=ter&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=84e1639ed5e3026ecec77cd1c0837ead',
             layer: 'img',
                style: 'default',
                format: 'tiles',
                tileMatrixSetID: 'w',
                credit: new Cesium.Credit('天地图全球影像服务'),
    })
  );
  addBaseLayerOption(
    "天地图矢量底图",
    new Cesium.WebMapTileServiceImageryProvider({
        url: 'http://t0.tianditu.gov.cn/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=84e1639ed5e3026ecec77cd1c0837ead',
           layer: 'img',
                style: 'default',
                format: 'tiles',
                tileMatrixSetID: 'w',
                credit: new Cesium.Credit('天地图全球影像服务'),
    })
  );
 
  addBaseLayerOption(
    "街道底图",
    new Cesium.ArcGisMapServerImageryProvider({
      url:
        "https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer",
    })
  );
  addBaseLayerOption(
    "OSM",
    new Cesium.OpenStreetMapImageryProvider()
  );
 
 
  // Create the additional layers
  addAdditionalLayerOption(
    "形变速率图层",
    new Cesium.ArcGisMapServerImageryProvider({
        url:'http://localhost:6080/arcgis/rest/services//%E9%BB%84%E6%B2%B3%E4%B8%AD%E4%B8%8A%E6%B8%B8%E5%BD%A2%E5%8F%98%E9%80%9F%E7%8E%87/MapServer?f=jsapi',
    })
  );
  addAdditionalLayerOption(
    "活动构造图层",
    new Cesium.ArcGisMapServerImageryProvider({
        url:'http://localhost:6080/arcgis/rest/services//%E9%BB%84%E6%B2%B3%E4%B8%AD%E4%B8%8A%E6%B8%B8%E6%9E%84%E9%80%A0/MapServer?f=jsapi',
    })
  );
  addAdditionalLayerOption(
    "地质图层",
    new Cesium.ArcGisMapServerImageryProvider({
        url:'http://localhost:6080/arcgis/rest/services//%E9%BB%84%E6%B2%B3%E4%B8%AD%E4%B8%8A%E6%B8%B8%E5%9C%B0%E8%B4%A8/MapServer?f=jsapi',   
    })
  );
  addAdditionalLayerOption(
    "地貌图层",
    new Cesium.ArcGisMapServerImageryProvider({
        url : 'http://localhost:6080/arcgis/rest/services//%E9%BB%84%E6%B2%B3%E4%B8%AD%E4%B8%8A%E6%B8%B8%E5%9C%B0%E8%B2%8C/MapServer?f=jsapi',
    })
  );
  addAdditionalLayerOption(
    "注记",
    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&format=tiles&tk=84e1639ed5e3026ecec77cd1c0837ead",
            layer: "tdtImgAnnoLayer",
            style: "default",
            format: "image/jpeg",
            tileMatrixSetID: "GoogleMapsCompatible",
            show: false
    })
  );
 
 
  addAdditionalLayerOption(
    "格网",
    new Cesium.GridImageryProvider(),
    1.0,
    false
  );
  addAdditionalLayerOption(
    "坐标系",
    new Cesium.TileCoordinatesImageryProvider(),
    1.0,
    false
  );
}

function addBaseLayerOption(name, imageryProvider) {
  let layer;
  if (typeof imageryProvider === "undefined") {
    layer = imageryLayers.get(0);
    viewModel.selectedLayer = layer;
  } else {
    layer = new Cesium.ImageryLayer(imageryProvider);
  }

  layer.name = name;
  baseLayers.push(layer);
}

function addAdditionalLayerOption(name, imageryProvider, alpha, show) {
  const layer = imageryLayers.addImageryProvider(imageryProvider);
  layer.alpha = Cesium.defaultValue(alpha, 0.5);
  layer.show = Cesium.defaultValue(show, true);
  layer.name = name;
  Cesium.knockout.track(layer, ["alpha", "show", "name"]);
}

function updateLayerList() {
  const numLayers = imageryLayers.length;
  viewModel.layers.splice(0, viewModel.layers.length);
  for (let i = numLayers - 1; i >= 0; --i) {
    viewModel.layers.push(imageryLayers.get(i));
  }
}

setupLayers();
updateLayerList();

//Bind the viewModel to the DOM elements of the UI that call for it.
const toolbar = document.getElementById("toolbar");
Cesium.knockout.applyBindings(viewModel, toolbar);

Cesium.knockout
  .getObservable(viewModel, "selectedLayer")
  .subscribe(function (baseLayer) {
    // Handle changes to the drop-down base layer selector.
    let activeLayerIndex = 0;
    const numLayers = viewModel.layers.length;
    for (let i = 0; i < numLayers; ++i) {
      if (viewModel.isSelectableLayer(viewModel.layers[i])) {
        activeLayerIndex = i;
        break;
      }
    }
    const activeLayer = viewModel.layers[activeLayerIndex];
    const show = activeLayer.show;
    const alpha = activeLayer.alpha;
    imageryLayers.remove(activeLayer, false);
    imageryLayers.add(baseLayer, numLayers - activeLayerIndex - 1);
    baseLayer.show = show;
    baseLayer.alpha = alpha;
    updateLayerList();
  });

//Sandcastle_End
    Sandcastle.finishedLoading();
}
if (typeof Cesium !== 'undefined') {
    window.startupCalled = true;
    startup(Cesium);
}
</script>
</body>
</html>