自己留存备用
1. DEM地形数据
默认
viewer.terrainProvider = Cesium.createWorldTerrain()
自定义
var terrainProvider = new Cesium.CesiumTerrainProvider({
url: dataServiceUrl + 'data/dem/'
});
viewer.terrainProvider = terrainProvider;
2. ArcGIS Server数据
var arcgisMap = new Cesium.ArcGisMapServerImageryProvider({
url: arcgisUrl + '/MapServer/export',
layers: 0,
});
var arcgisLayer = viewer.imageryLayers.addImageryProvider(arcgisMap);
3. 添加GeoJSON数据
function addPointLayer(layerName) {
var geojson = Cesium.GeoJsonDataSource.load(
'data/' + layerName + ".geojson", {
clampToGround: true,
markerSize: 0
},
);
geojson.then(function(dataSource) {
dataSource.name = layerName;
viewer.dataSources.add(dataSource);
for (var i = 0; i < dataSource.entities.values.length; i++) {
entityList.push(dataSource.entities.values[i]);
let entityProp = dataSource.entities.values[i].properties;
let pointX = entityProp.X._value;
let pointY = entityProp.Y._value;
let labelText = entityProp.NAME._value;
let type = entityProp.TYPE._value.toString();
let typeid = entityProp.TYPEID._value.toString();
var entityID = entityList.length - 1;
//entity.billboard.disableDepthTestDistance = Number.POSITIVE_INFINITY; //去掉地形遮挡
entityList[entityID].maximumHeights = 200000;
entityList[entityID].name = type + '-' + typeid;
//修改点要素光柱
entityList[entityID].position = Cesium.Cartesian3.fromDegrees(pointX, pointY);
entityList[entityID].label = {
text: labelText,
showBackground: true,
scaleByDistance: new Cesium.NearFarScalar(10000, 1.0, 1.0e6, 0.2),
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
disableDepthTestDistance: Number.POSITIVE_INFINITY
};
entityList[entityID].cylinder = {
length: 100000.0,
topRadius: 0,
bottomRadius: 25000.0,
material: Cesium.Color.YELLOW.withAlpha(0.8),
outline: false,
outlineColor: Cesium.Color.WHITE,
outlineWidth: 1
}
}
});
}
function addPolyLayer(layerName, flyto) {
if (!Cesium.Entity.supportsPolylinesOnTerrain(viewer.scene)) {
window.alert(
"Polylines on terrain are not supported on this platform"
);
}
var geojson = Cesium.GeoJsonDataSource.load(
'data/' + layerName + ".geojson", {
//clampToGround: true
},
);
geojson.then(function(dataSource) {
dataSource.name = layerName;
viewer.dataSources.add(dataSource);
for (var i = 0; i < dataSource.entities.values.length; i++) {
entityList.push(dataSource.entities.values[i]);
var entityID = entityList.length - 1;
//entity.billboard.disableDepthTestDistance = Number.POSITIVE_INFINITY; //去掉地形遮挡
entityList[entityID].polyline.width = 3;
entityList[entityID].maximumHeights = 2000000;
//修改线要素的颜色
entityList[entityID].polyline.material = new Cesium.PolylineOutlineMaterialProperty({
color: Cesium.Color.YELLOW,
outline: false
});
entityList[entityID].polyline.heightReference = Cesium.HeightReference.CLAMP_TO_GROUND;
/*entityList[entityID].polyline.depthFailMaterial = new Cesium.PolylineOutlineMaterialProperty({
color: Cesium.Color.YELLOW,
outline: false
});*/
}
});
if (flyto != undefined) {
viewer.zoomTo(geojson);
}
}
function getColorRamp(val) {
if (val == null) {
val = { 0.0: "blue", 0.1: "cyan", 0.37: "lime", 0.54: "yellow", 1: "red" }
}
var ramp = document.createElement('canvas');
ramp.width = 100;
ramp.height = 100;
var ctx = ramp.getContext('2d');
var grd = ctx.createRadialGradient(50, 50, 0, 50, 50, 80);
for (var key in val) {
grd.addColorStop(Number(key), val[key]);
}
ctx.fillStyle = grd;
ctx.fillRect(0, 0, 100, 100);
return ramp;
}
function addPolygonLayerByArray(layerName, isGradient) {
var urlpath = "data/" + layerName + ".geojson";
$.get(urlpath, function(data) {
let josnN = JSON.parse(data);
let features = josnN.features;
let isread = josnN.isread;
for (let i = 0; i < features.length; i++) {
let degreeArray = [];
let featureID, featureName, polyColor;
if (isread) {
featureID = features[i].properties.TYPE.toString() + '-' + features[i].properties.TYPEID.toString();
featureName = features[i].properties.NAME;
polyColor = features[i].properties.COLOR;
} else {
featureID = layerName;
featureName = layerName;
polyColor = features[i].properties.COLOR;
}
for (let j = 0; j < features[i].geometry.coordinates.length; j++) {
let polygonArr = features[i].geometry.coordinates[j].toString().split(',');
let rgba = new Cesium.Color(polyColor[0] / 255.0, polyColor[1] / 255.0, polyColor[2] / 255.0);
for (let k = 0; k < polygonArr.length; k++) {
degreeArray[k] = parseFloat(polygonArr[k]);
}
if (isGradient) {
viewer.entities.add({
id: featureID,
name: featureID,
realname: featureName,
polygon: {
hierarchy: {
positions: Cesium.Cartesian3.fromDegreesArray(degreeArray)
},
material: new Cesium.ImageMaterialProperty({
transparent: true, //设置透明
image: getColorRamp({
0.0: rgba.withAlpha(0.6).toCssColorString(),
0.2: rgba.withAlpha(0.3).toCssColorString(),
0.4: rgba.withAlpha(0.2).toCssColorString(),
0.6: rgba.withAlpha(0.15).toCssColorString(),
0.8: rgba.withAlpha(0.1).toCssColorString(),
1.0: rgba.withAlpha(0.0).toCssColorString()
})
}),
},
});
} else {
viewer.entities.add({
id: featureID,
name: featureID,
realname: featureName,
polygon: {
hierarchy: {
positions: Cesium.Cartesian3.fromDegreesArray(degreeArray)
},
material: new Cesium.Color(polyColor[0] / 255.0, polyColor[1] / 255.0, polyColor[2] / 255.0, polyColor[3]) //Cesium.Color.BLUE.withAlpha(0.5)
},
});
}
}
}
});
}
function addPolygonLayer(layerName, polyColor, flyto) {
var geojson = Cesium.GeoJsonDataSource.load(
'data/' + layerName + ".geojson", {
clampToGround: false
},
);
geojson.then(function(dataSource) {
dataSource.name = layerName;
viewer.dataSources.add(dataSource);
for (var i = 0; i < dataSource.entities.values.length; i++) {
entityList.push(dataSource.entities.values[i]);
var entityID = entityList.length - 1;
//entity.billboard.disableDepthTestDistance = Number.POSITIVE_INFINITY; //去掉地形遮挡
entityList[entityID].maximumHeights = 20000000;
//修改面要素的颜色
entityList[entityID].polygon.height = 7000;
entityList[entityID].polygon.outline = false;
entityList[entityID].polygon.material = new Cesium.ImageMaterialProperty({
color: new Cesium.Color(polyColor[0] / 255.0, polyColor[1] / 255.0, polyColor[2] / 255.0, polyColor[3])
});
}
});
if (flyto != undefined) {
viewer.zoomTo(geojson);
}
}