cesium-加载图层

783 阅读2分钟

静态影像、天地图、wms、wmts

// image
const craeteImage = function (url) {
  return new Cesium.SingleTileImageryProvider({
    url: url
  })
}

// 天地图
const tiandituKey = "fae68535452b3391584d2e2b83636dbb"
const subdomains = ["0", "1", "2", "3", "4", "5", "6", "7"];
const craeteTianditu = function (baseMap) {
  let tianditu = new Cesium.UrlTemplateImageryProvider({
    url: 'https://t{s}.tianditu.gov.cn/DataServer?T=' + baseMap.layer + '_w&x={x}&y={y}&l={z}&tk=' + tiandituKey,
    subdomains: subdomains,
    tilingScheme: new Cesium.WebMercatorTilingScheme(),
    maximumLevel: 18,
  })
  return tianditu
}

// wms
const parameters = {
  service: 'WMS',
  version: '1.1.0',
  request: 'GetMap',
  style: 'default',
  transparent: 'true',
  format: 'image/png',
  srs: 'EPSG:4326'
}

const craeteWms = function (baseMap) {
  let wmsImageryProvider = new Cesium.WebMapServiceImageryProvider({
    url: baseMap.url,
    layers: baseMap.layer,
    parameters: parameters
  })
  return wmsImageryProvider
}

// wmts
const matrixIds = [
  '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',
  'EPSG:4326:12', 'EPSG:4326:13', 'EPSG:4326:14', 'EPSG:4326:15', 'EPSG:4326:16',
  'EPSG:4326:17', 'EPSG:4326:18', 'EPSG:4326:19', 'EPSG:4326:20', 'EPSG:4326:21'
]

const craeteWmts = function (baseMap) {
  let wmtsImageryProvider = new Cesium.WebMapTileServiceImageryProvider({
    url: baseMap.url,
    layer: baseMap.layer,
    style: '',
    format: 'image/png',
    tileMatrixSetID: 'EPSG:4326',
    maximumLevel: 20,
    tileMatrixLabels: matrixIds,
    tilingScheme: new Cesium.GeographicTilingScheme({
      numberOfLevelZeroTilesX: 2,
      numberOfLevelZeroTilesY: 1
    })
  })
  return wmtsImageryProvider
}

/**
 * @description: 加载图层
 * @param {String} type 图层类型
 * @param {Object} baseMap 图层信息
 * @param {Boolean} isShow 图层显示
 * @param {Boolean} zIndex 图层层级
 * @param {Boolean} isTop 图层置顶
 */
const addLayer = function (type, baseMap, isShow = true, zIndex = 1, isTop = true) {
  let layerProvider = null, imageryLayer = null
  switch (type) {
    case 'image':
      layerProvider = craeteImage(baseMap)
      break;
    case 'tianditu':
      layerProvider = craeteTianditu(baseMap)
      break;
    case 'wms':
      layerProvider = craeteWms(baseMap)
      break;
    case 'wmts':
      layerProvider = craeteWmts(baseMap)
      break;
  }
  imageryLayer = new Cesium.ImageryLayer(layerProvider, {
    show: isShow, // 图层是否可见
    alpha: 1 // 图层透明度值
  })
  imageryLayer.name = baseMap.label
  window.viewer.imageryLayers.add(imageryLayer, zIndex)
  baseMap.isTop && window.viewer.imageryLayers.raiseToTop(imageryLayer)
  return imageryLayer
}

export default addLayer;

wfs

import { httpUrl } from '@/configs/httpurl'
import { loadingShow, loadingClose } from '@/utils/loading.js'

const wfsLayersUrl = httpUrl.rootUrl_layer + '/geoserver/cite/ows'

/**
 * param 将要转为URL参数字符串的对象
 * return URL参数字符串
 */
function urlEncode(paramObj) {
  const data = [];
  for (let attr in paramObj) {
    data.push(`${attr}=${encodeURIComponent(paramObj[attr])}`);
  }
  return '?' + data.join('&');
}

/**
 * @description: 加载 wfs 图层/要素集
 * @param {Object} item 图层信息
 * @param {Boolean} isShow 图层显示
 * @param {Boolean} isFocus 图层聚焦
 * @param {Boolean} isLoading 全局loading
 */
function loadJson(item, isShow = true, isFocus = false, isLoading = false, viewparams) {
  isLoading && loadingShow()
  const wfsParams = {
    service: 'WFS',
    version: '1.0.0',
    request: 'GetFeature',
    typeName: item.file, // 图层名称
    outputFormat: 'application/json'
  }

  // 有同名图层先移除再添加
  const layerName = item.label;
  const mapLayers = window.viewer.dataSources._dataSources;
  const layer = mapLayers.find((layer) => layer.name == layerName);
  layer && window.viewer.dataSources.remove(layer);

  // 请求路径
  const url = item.isJson ? `./geojson/json/${item.file}.json` : `${wfsLayersUrl}${urlEncode(wfsParams)}`;
  let promise = Cesium.GeoJsonDataSource.load(url);
  promise.then(function (dataSource) {
    dataSource.name = layerName;
    dataSource.show = isShow;

    // 不聚合
    // window.viewer.dataSources.add(dataSource);
    
    // 聚合
    window.viewer.dataSources.add(dataSource).then(function (source) {
        const pixelRange = 30
        const minClusterSize = 1
        source.clustering.enabled = true; // 是否聚合
        source.clustering.pixelRange = pixelRange; // 聚合范围(单位px)
        source.clustering.minimumClusterSize = minClusterSize; // 最小屏幕聚合对象数值(小于等于该数值,不聚合)
        source.clustering.clusterBillboards = true; // 是否将实体的广告牌聚类
        source.clustering.clusterLabels = true; // 是否将实体的标签聚类
        source.clustering.clusterPoints = true; // 是否将实体的点聚类

        source.clustering.clusterEvent.addEventListener(function(entities, cluster) {
            cluster.point.show = true;
            cluster.point.pixelSize = pixelRange
            cluster.point.color = getTextColor(item.color)

            cluster.label.show = true;
            cluster.label.font = '0.12rem sans-serif'
            cluster.label.fillColor = Cesium.Color.WHITE
            cluster.label.outlineColor = Cesium.Color.WHITE
            cluster.label.verticalOrigin = Cesium.VerticalOrigin.CENTER
            cluster.label.style = Cesium.LabelStyle.FILL_AND_OUTLINE
            cluster.label.horizontalOrigin = Cesium.HorizontalOrigin.CENTER
            // cluster.label.pixelOffset = new Cesium.Cartesian2(0, 20)
            cluster.label.eyeOffset = new Cesium.Cartesian3(0, 0, -100) // 设为负值则在更上层,不会被盖住
            cluster.label.heightReferenceCesium.HeightReference.CLAMP_TO_GROUND
        });
    });
    
    // http://cesium.xin/cesium/cn/Documentation1.72/DataSourceCollection.html
    window.viewer.dataSources.raiseToTop(dataSource) // 将数据源提升到集合的顶部

    isFocus && window.viewer.flyTo(dataSource) // 聚焦

    let entities = dataSource.entities.values; // 获取要素中的实体
    for (let i = 0; i < entities.length; i++) {
      let entity = entities[i];
      if (Cesium.defined(entity)) {
        entityStyle(item, entity); // 修改要素样式
      }
    }
    isLoading && loadingClose()
  }).otherwise(function (error) {
    isLoading && loadingClose()
    Vue.prototype.$message({
      type: "error",
      showClose: true,
      message: '请求失败,请联系管理员'
    })
  })
}

全局 loading

import { Loading } from 'element-ui'

const options = ({
  lock: true, // 锁定屏幕滚动
  fullscreen: true,
  text: 'Loading',
  spinner: 'el-icon-loading',
  background: 'rgba(0, 0, 0, 0.7)'
})

const loadingShow = () => {
  Loading.service(options)
}

const loadingClose = () => {
  Loading.service(options).close()
}


export { loadingShow, loadingClose };