静态影像、天地图、wms、wmts
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
}
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
}
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
}
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'
function urlEncode(paramObj) {
const data = [];
for (let attr in paramObj) {
data.push(`${attr}=${encodeURIComponent(paramObj[attr])}`);
}
return '?' + data.join('&');
}
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).then(function (source) {
const pixelRange = 30
const minClusterSize = 1
source.clustering.enabled = true;
source.clustering.pixelRange = pixelRange;
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.eyeOffset = new Cesium.Cartesian3(0, 0, -100)
cluster.label.heightReference = Cesium.HeightReference.CLAMP_TO_GROUND
});
});
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 };