0.注意事项
##
1.严禁使用:viewer.entities.removeAll()
2.严禁使用:viewer.scene.primitives.removeAll()
##
1.裁剪
let provider = new Cesium.UrlTemplateImageryProvider({
url: url,
tilingScheme: new Cesium.GeographicTilingScheme({
numberOfLevelZeroTilesX: 2,
numberOfLevelZeroTilesY: 1
}),
minimumLevel: 1,
customTags: {
c: function(imageryProvider, x, y, level) {
return level + 1;
}
}
});
let layerIndex = Layer.calcLayerIndexByGroup(viewer2,LayerGroup.partimg)
let { west, south, east, north } = this.Rxt.rectRight;
let layer = new Cesium.ImageryLayer(provider, {
rectangle: Cesium.Rectangle.fromDegrees(west, south, east, north)
});
viewer2.imageryLayers.add(layer,layerIndex);
2.绘制点线面
3.添加实体(点、线、面)
//画点
const drawPoint = (point, viewer) => {
let entity = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(point.lon, point.lat),
label: {
text: '',
font: '22px Helvetica'
},
point: {
pixelSize: 10,
color: Cesium.Color.CHARTREUSE
}
});
entity.catalog = 'measure'
};
/**
* 画线
*/
const drawLine = (point1, point2, showDistance, viewer) => {
let entity = viewer.entities.add({
polyline: {
positions: [Cesium.Cartesian3.fromDegrees(point1.lon, point1.lat), Cesium.Cartesian3.fromDegrees(point2.lon, point2.lat)],
width: 10.0,
material: new Cesium.PolylineGlowMaterialProperty({
color: Cesium.Color.CHARTREUSE.withAlpha(.5)
})
}
});
entity.catalog = 'measure'
if (showDistance) {
let w = Math.abs(point1.lon - point2.lon);
let h = Math.abs(point1.lat - point2.lat);
let offsetV = w >= h ? 0.0005 : 0;
let offsetH = w < h ? 0.001 : 0;
let distance = EarthTool.measureLength(point1.lat, point1.lon, point2.lat, point2.lon);
entity = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(((point1.lon + point2.lon) / 2) + offsetH, ((point1.lat + point2.lat) / 2) + offsetV),
label: {
text: distance.toFixed(1) + 'm',
font: '22px Helvetica',
fillColor: Cesium.Color.WHITE
}
});
entity.catalog = 'measure'
}
};
/**
* 画多边形
*/
const drawPoly = (points, viewer) => {
let pArray = [];
for (let i = 0; i < points.length; i++) {
pArray.push(points[i].lon);
pArray.push(points[i].lat);
}
let entity = viewer.entities.add({
polygon: {
hierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(pArray)),
material: Cesium.Color.CHARTREUSE.withAlpha(.5)
}
});
entity.catalog = 'measure'
};
4.绘制WKT/Geojson
5.接天地图
6.图片生成与合并
//生成图片
makeImg(blob) {
let canvas = document.createElement('canvas');
canvas.width = 256;
canvas.height = 256;
let context = canvas.getContext('2d');
context.rect(0, 0, canvas.width, canvas.height);
context.fillStyle = '#fff';
context.fill();
let myImage = new Image();
myImage.src = window.URL.createObjectURL(blob); //背景图片 你自己本地的图片或者在线图片
myImage.crossOrigin = 'Anonymous';
myImage.onload = function() {
context.drawImage(myImage, 0, 0, 256, 256);
let base64 = canvas.toDataURL('image/png'); //"image/png" 这里注意一下
return base64
};
},
/**
* 图片合并
*/
mergeImg(blob1, blob2) {
let canvas = document.createElement('canvas');
canvas.width = 256;
canvas.height = 256;
let context = canvas.getContext('2d');
context.rect(0, 0, canvas.width, canvas.height);
context.fillStyle = '#fff';
context.fill();
let myImage = new Image();
myImage.src = window.URL.createObjectURL(blob1); //背景图片 你自己本地的图片或者在线图片
myImage.crossOrigin = 'Anonymous';
myImage.onload = function() {
context.drawImage(myImage, 0, 0, 256, 256);
let myImage2 = new Image();
myImage2.src = window.URL.createObjectURL(blob2); //你自己本地的图片或者在线图片
myImage2.crossOrigin = 'Anonymous';
myImage2.onload = function() {
context.drawImage(myImage2, 0, 0, 256, 256);
let base64 = canvas.toDataURL('image/png'); //"image/png" 这里注意一下
return base64
};
};
},
7.判断图片是否全透明
/**
* 判断图片是否全透明
* @return true:全透明 false:有内容图片
*/
checkTranspanent(blob) {
let myImage = new Image();
myImage.src = window.URL.createObjectURL(blob);
myImage.crossOrigin = 'Anonymous';
let canvas = document.createElement('canvas');
canvas.width = 256;
canvas.height = 256;
myImage.onload = () => {
let context = canvas.getContext('2d');
context.drawImage(myImage, 0, 0, 256, 256);
let imageData = context.getImageData(0, 0, 256, 256);
let arr = imageData.data;
let has = arr.find(o => o !== 0);
return has
};
},
8.模式切换
//模式切换
this.$bus.$on(EventType.Map.swmodal, (val) => {
Earth.swMapModal(viewer, val);
});
/**
* 2/3维度切换
* @param modal
*/
const swMapModal = (viewer, modal, duration = 0) => {
let scene = viewer.scene;
if (modal == MapMode.CESIUM2D) {
scene.morphTo2D(duration)
} else if (modal == MapMode.CESIUM3D) {
scene.morphTo3D(duration);
} else if (modal == MapMode.CESIUM25D) {
scene.morphToColumbusView(duration);
}
};
//调用
this.$bus.$emit(EventType.Map.swmodal, MapMode.CESIUM2D);
this.$bus.$emit(EventType.Map.swmodal, MapMode.CESIUM3D);
9.定位
9.1.矩形框定位
let rectangle = viewer.camera.computeViewRectangle();
let west =rectangle.west / Math.PI * 180;
let north = rectangle.north / Math.PI * 180;
let east = rectangle.east / Math.PI * 180;
let south = rectangle.south / Math.PI * 180;
viewer.camera.setView({
destination : Cesium.Rectangle.fromDegrees(west, south, east, north)
});
9.2.点坐标定位
viewer.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(lon,lat,height),
orientation: {
heading: heading,
pitch: pitch,
roll: roll
}
})
10.添加网格
//添加网格
let imageryLayers = viewer.imageryLayers;
let debugGrid = imageryLayers.addImageryProvider(new Cesium.TileCoordinatesImageryProvider({
tilingScheme: new Cesium.WebMercatorTilingScheme({
numberOfLevelZeroTilesX: 1,
numberOfLevelZeroTilesY: 1
}),
tileWidth: 512,
tileHeight: 512
}));
//网格点击事件
debugGrid.imageryProvider.clickEvent.addEventListener((e) => {
console.log(e);
let { x, y, z, rectangle } = e;
//网格编号
let wgbh = `L${z}X${x}Y${y}`;
});
11.生成与叠加blob
//url是地图瓦片的url，在浏览器访问可以直接看到瓦片，通过get、post请求，并设置{ responseType: 'arraybuffer' }，便可以得到结果，再通过new Blob得到blob对象。
get(url, {}, { responseType: 'arraybuffer' }).then(re => {
let blob = new Blob([re], { type: 'png' });
let imageUrl = window.URL.createObjectURL(blob);
let lyr = viewer.imageryLayers.addImageryProvider(new Cesium.SingleTileImageryProvider({
url: imageUrl,
rectangle: rectangle
}));
}
12.场景初始化配置
let viewer = new Cesium.Viewer(containerId, {
shouldAnimate: true,
animation: false,
infoBox: false,
selectionIndicator: false,
geocoder: false,
fullscreenButton: false,
timeline: true,
sceneModePicker: false,
navigationHelpButton: false,
baseLayerPicker: false,
homeButton: false,
sceneMode: sceneMode,
// mapProjection: new Cesium.WebMercatorProjection(),
// skyBox: skyBox,
imageryProvider: defaultImgProvider(),
terrainProvider: defaultTerrainProvider(),
orderIndependentTranslucency: false,
contextOptions: {
webgl: {
alpha: true,
preserveDrawingBuffer:true
}
}
});
/**
* 默认的底图服务
*/
const defaultImgProvider = () => {
let url = './assets/images/world.jpg';
let provider = new Cesium.SingleTileImageryProvider({
url: url,
});
return provider;
};
/**
* 默认的地形服务
* @returns {null}
*/
const defaultTerrainProvider = () => {
// return new Cesium.ArcGISTiledElevationTerrainProvider({
// url:"https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer",
// });
if (window.CONFIG.MapTerrainUrl && window.CONFIG.MapTerrainUrl != "") {
return new Cesium.CesiumTerrainProvider({
url: window.CONFIG.MapTerrainUrl
});
} else {
// let foo = new Cesium.GeowayTiledElevationTerrainProvider({
// connections: [{
// priority: 0,
// url: '/terrain/6e75eeb0932f11eaa492979005873f41/layer.json',
// rectangle: new Cesium.Rectangle.fromDegrees(-180, -90, 180, 90),
// minLevel: 4,
// maxLevel: 15,
// tileMatrixLabels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19'],
// }]
// })
// return foo;
}
return undefined;
};
13.场景默认设置项
/**
* 默认设置
* @param viewer
*/
const defaultSetting = (viewer) => {
//隐藏版权 fullscreenButton: false,//是否显示全屏按钮
let scene = viewer.scene;
let globe = scene.globe;
//背景透明
viewer._cesiumWidget._creditContainer.style.display = "none";
// scene.skyBox.show = false;
// scene.backgroundColor = new Cesium.Color(0.0, 0.0, 0.0, 0.0);
scene.fog.enabled = false;
globe.showGroundAtmosphere = false; //大气层
globe.enableLighting = false; //昼夜
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK); //移除实体追踪
viewer.scene.screenSpaceCameraController.maximumZoomDistance = 1000000000; //控制最大高度
// viewer.scene.screenSpaceCameraController.minimumZoomDistance = 250000;//相机的高度的最小值
// viewer.scene.screenSpaceCameraController._minimumZoomRate = 30000; // 设置相机缩小时的速率
// viewer.scene.screenSpaceCameraController._maximumZoomRate=5906376272000 //设置相机放大时的速率
// viewer.scene.fxaa = true;
// viewer.scene.postProcessStages.fxaa.enabled = true;
}
14.获取当前中心点坐标
//获取中心点坐标（笛卡尔）
let polyCenter = Cesium.BoundingSphere.fromPoints(cartesian).center;
// polyCenter = Cesium.Ellipsoid.WGS84.scaleToGeodeticSurface(polyCenter);
15.事件
1.缩放事件
//缩放开始
viewer.camera.moveStart.addEventListener((e) => {});
//缩放结束
viewer.camera.moveEnd.addEventListener((e) => {});
//鼠标左键单击
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function (movement) {
let ray=viewer.camera.getPickRay(movement.position);
let cartesian = viewer.scene.globe.pick(ray, viewer.scene);
positions.push(cartesian);
viewer.entities.add({
position: cartesian,
point: {
color: Cesium.Color.RED,
pixelSize: 5,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
}
});
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
//鼠标右键单击
handler.setInputAction(function (movement) {
handler.destroy();
callback(positions);
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
16.坐标转换
//经纬度转笛卡尔
笛卡尔 = viewer.scene.pickPosition({ x: 经度, y: 纬度 })
//笛卡尔转经纬度
经纬度 = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, 笛卡尔)
//弧度转角度
west = Cesium.Math.toDegrees(west);
south = Cesium.Math.toDegrees(south);
east = Cesium.Math.toDegrees(east);
north = Cesium.Math.toDegrees(north);
//获取矩形中心点笛卡尔坐标
let result =null;
result = Cesium.Rectangle.center (rectangle, result);//弧度
let cartesian = ellipsoid.cartographicToCartesian(result);//得到笛卡尔坐标
//获取Cesium事件的点击所在位置的坐标
//Cesium.ScreenSpaceEventType.MOUSE_MOVE 对应的是 movement.endPosition
//Cesium.ScreenSpaceEventType.LEFT_CLICK 对应的是 movement.position
getPointFromWindowPoint(point){
if(this.viewer.scene.terrainProvider.constructor.name=="EllipsoidTerrainProvider") {
return this.viewer.camera.pickEllipsoid(point,this.viewer.scene.globe.ellipsoid);
} else {
let ray=this.viewer.scene.camera.getPickRay(point);
return this.viewer.scene.globe.pick(ray,this.viewer.scene);
}
},
//屏幕像素转笛卡尔
let _cartographic = viewer.camera.pickEllipsoid(new Cesium.Cartesian2(375,137), viewer.scene.globe.ellipsoid);
//笛卡尔坐标系转WGS84坐标系
Cartesian3_to_WGS84: function (point) {
let cartesian33 = new Cesium.Cartesian3(point.x, point.y, point.z);
let cartographic = Cesium.Cartographic.fromCartesian(cartesian33);
let lat = Cesium.Math.toDegrees(cartographic.latitude);
let lng = Cesium.Math.toDegrees(cartographic.longitude);
let alt = cartographic.height;
return {lat: lat, lng: lng, alt: alt};
},
let wgs84_point = this.Cartesian3_to_WGS84({
x: x,
y: y,
z: z
});
//WGS84坐标系转笛卡尔坐标系
WGS84_to_Cartesian3: function (point) {
let car33 = Cesium.Cartesian3.fromDegrees(point.lng, point.lat, point.alt);
let x = car33.x;
let y = car33.y;
let z = car33.z;
return {x: x, y: y, z: z};
},
//cesium鼠标点击获取点坐标的几种方式
handler.setInputAction(function (event) {
//1.椭球面坐标:获取当前点击视线与椭球面相交处的坐标，在加载地形的场景上获取的坐标有误差
//var earthPosition = viewer.camera.pickEllipsoid(event.position,viewer.scene.globe.ellipsoid);
//2.场景坐标:获取场景中任意点击处的对应的世界坐标，需要开启“地形深度检测”（在未开启“地形深度检测”的情况下只能在3DTile上准确获取空间坐标，开启“地形深度检测”后，viewer.scene.pickPosition 也能在非3DTile上准确获取坐标）
viewer.scene.globe.depthTestAgainstTerrain = true;
var earthPosition = viewer.scene.pickPosition(event.position);
//3.地标坐标：获取点击处地球表面的世界坐标，不包括模型、倾斜摄影表面
// var ray = viewer.camera.getPickRay(event.position);
// var earthPosition = viewer.scene.globe.pick(ray, viewer.scene);
if (Cesium.defined(earthPosition)) {
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
17.计算距离
//计算两点间距离
getFlatternDistance(lat1, lng1, lat2, lng2) {
let EARTH_RADIUS = 6378137.0; //单位M
let PI = Math.PI;
function getRad(d) {
return d * PI / 180.0;
}
let f = getRad((lat1 + lat2) / 2);
let g = getRad((lat1 - lat2) / 2);
let l = getRad((lng1 - lng2) / 2);
let sg = Math.sin(g);
let sl = Math.sin(l);
let sf = Math.sin(f);
let s, c, w, r, d, h1, h2;
let a = EARTH_RADIUS;
let fl = 1 / 298.257;
sg = sg * sg;
sl = sl * sl;
sf = sf * sf;
s = sg * (1 - sl) + (1 - sf) * sl;
c = (1 - sg) * (1 - sl) + sf * sl;
w = Math.atan(Math.sqrt(s / c));
r = Math.sqrt(s * c) / w;
d = 2 * w * a;
h1 = (3 * r - 1) / 2 / c;
h2 = (3 * r + 1) / 2 / s;
return d * (1 + fl * (h1 * sf * (1 - sg) - h2 * (1 - sf) * sg));
},
18.叠加服务
18.1.天地图
1)全球矢量地图服务
var viewer = new Cesium.Viewer("cesiumContainer", {
animation: false, //是否显示动画控件
baseLayerPicker: false, //是否显示图层选择控件
geocoder: true, //是否显示地名查找控件
timeline: false, //是否显示时间线控件
sceneModePicker: true, //是否显示投影方式控件
navigationHelpButton: false, //是否显示帮助信息控件
infoBox: true, //是否显示点击要素之后显示的信息
});
viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
url: "http://t0.tianditu.com/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",
layer: "tdtVecBasicLayer",
style: "default",
format: "image/jpeg",
tileMatrixSetID: "GoogleMapsCompatible",
show: false
}))
2）全球影像地图服务
var viewer = new Cesium.Viewer("cesiumContainer", {
animation: false, //是否显示动画控件
baseLayerPicker: false, //是否显示图层选择控件
geocoder: true, //是否显示地名查找控件
timeline: false, //是否显示时间线控件
sceneModePicker: true, //是否显示投影方式控件
navigationHelpButton: false, //是否显示帮助信息控件
infoBox: true, //是否显示点击要素之后显示的信息
});
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",
layer: "tdtBasicLayer",
style: "default",
format: "image/jpeg",
tileMatrixSetID: "GoogleMapsCompatible",
show: false
}))
3)全球影像中文注记服务
19.通用大头针
var pinBuilder = new Cesium.PinBuilder();
//颜色图标
var bluePin = viewer.entities.add({
name: "Blank blue pin",
position: Cesium.Cartesian3.fromDegrees(-75.170726, 39.9208667),
billboard: {
image: pinBuilder.fromColor(Cesium.Color.ROYALBLUE, 48).toDataURL(),
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
},
});
//数字图标
var questionPin = viewer.entities.add({
name: "Question mark",
position: Cesium.Cartesian3.fromDegrees(-75.1698529, 39.9220071),
billboard: {
image: pinBuilder.fromText("16", Cesium.Color.BLACK, 48).toDataURL(),
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
},
});
//图片图标
var url = Cesium.buildModuleUrl("Assets/Textures/maki/grocery.png");
var groceryPin = Cesium.when(
pinBuilder.fromUrl(url, Cesium.Color.GREEN, 48),
function (canvas) {
return viewer.entities.add({
name: "Grocery store",
position: Cesium.Cartesian3.fromDegrees(-75.1705217, 39.921786),
billboard: {
image: canvas.toDataURL(),
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
},
});
}
);
//医院图标
var hospitalPin = Cesium.when(
pinBuilder.fromMakiIconId("hospital", Cesium.Color.RED, 48),
function (canvas) {
return viewer.entities.add({
name: "Hospital",
position: Cesium.Cartesian3.fromDegrees(-75.1698606, 39.9211275),
billboard: {
image: canvas.toDataURL(),
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
},
});
}
);
//等待所有实体添加完毕
Cesium.when.all(
[bluePin, questionPin, groceryPin, hospitalPin],
function (pins) {
viewer.zoomTo(pins);
}
);
20.椭球体（ellipsoid）
var viewer = new Cesium.Viewer("cesiumContainer");
var saturnPosition = Cesium.Cartesian3.fromDegrees(
-95.0,
45.0,
300000.0
);
viewer.entities.add({
name: "土星",
position: saturnPosition,
ellipsoid: {
radii: new Cesium.Cartesian3(200000.0, 200000.0, 200000.0),
material: new Cesium.Color(0.95, 0.82, 0.49),
},
});
viewer.entities.add({
name: "土星内环",
position: saturnPosition,
orientation: Cesium.Transforms.headingPitchRollQuaternion(
saturnPosition,
new Cesium.HeadingPitchRoll(
Cesium.Math.toRadians(30.0),
Cesium.Math.toRadians(30.0),
0.0
)
),
ellipsoid: {
radii: new Cesium.Cartesian3(400000.0, 400000.0, 400000.0),
innerRadii: new Cesium.Cartesian3(300000.0, 300000.0, 300000.0),
minimumCone: Cesium.Math.toRadians(89.8),
maximumCone: Cesium.Math.toRadians(90.2),
material: new Cesium.Color(0.95, 0.82, 0.49, 0.5),
},
});
viewer.entities.add({
name: "土星的外环",
position: saturnPosition,
orientation: Cesium.Transforms.headingPitchRollQuaternion(
saturnPosition,
new Cesium.HeadingPitchRoll(
Cesium.Math.toRadians(30.0),
Cesium.Math.toRadians(30.0),
0.0
)
),
ellipsoid: {
radii: new Cesium.Cartesian3(460000.0, 460000.0, 460000.0),
innerRadii: new Cesium.Cartesian3(415000.0, 415000.0, 415000.0),
minimumCone: Cesium.Math.toRadians(89.8),
maximumCone: Cesium.Math.toRadians(90.2),
material: new Cesium.Color(0.95, 0.82, 0.49, 0.5),
},
});
viewer.entities.add({
name: "穹顶",
position: Cesium.Cartesian3.fromDegrees(-120.0, 40.0),
ellipsoid: {
radii: new Cesium.Cartesian3(200000.0, 200000.0, 200000.0),
maximumCone: Cesium.Math.PI_OVER_TWO,
material: Cesium.Color.BLUE.withAlpha(0.3),
outline: true,
},
});
viewer.entities.add({
name: "内半径圆顶",
position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0),
ellipsoid: {
radii: new Cesium.Cartesian3(250000.0, 200000.0, 150000.0),
innerRadii: new Cesium.Cartesian3(100000.0, 80000.0, 60000.0),
maximumCone: Cesium.Math.PI_OVER_TWO,
material: Cesium.Color.RED.withAlpha(0.3),
outline: true,
},
});
viewer.entities.add({
name: "顶部开孔圆顶",
position: Cesium.Cartesian3.fromDegrees(-108.0, 40.0),
ellipsoid: {
radii: new Cesium.Cartesian3(200000.0, 200000.0, 200000.0),
innerRadii: new Cesium.Cartesian3(100000.0, 100000.0, 100000.0),
minimumCone: Cesium.Math.toRadians(20.0),
maximumCone: Cesium.Math.PI_OVER_TWO,
material: Cesium.Color.YELLOW.withAlpha(0.3),
outline: true,
},
});
viewer.entities.add({
name: "顶部和底部切口",
position: Cesium.Cartesian3.fromDegrees(-102.0, 40.0, 140000.0),
ellipsoid: {
radii: new Cesium.Cartesian3(200000.0, 200000.0, 200000.0),
innerRadii: new Cesium.Cartesian3(100000.0, 100000.0, 100000.0),
minimumCone: Cesium.Math.toRadians(60.0),
maximumCone: Cesium.Math.toRadians(140.0),
material: Cesium.Color.DARKCYAN.withAlpha(0.3),
outline: true,
},
});
viewer.entities.add({
name: "碗",
position: Cesium.Cartesian3.fromDegrees(-96.0, 39.5, 200000.0),
ellipsoid: {
radii: new Cesium.Cartesian3(200000.0, 200000.0, 200000.0),
innerRadii: new Cesium.Cartesian3(180000.0, 180000.0, 180000.0),
minimumCone: Cesium.Math.toRadians(110.0),
material: Cesium.Color.GREEN.withAlpha(0.3),
outline: true,
},
});
viewer.entities.add({
name: "时钟断流器",
position: Cesium.Cartesian3.fromDegrees(-90.0, 39.0),
ellipsoid: {
radii: new Cesium.Cartesian3(200000.0, 200000.0, 200000.0),
innerRadii: new Cesium.Cartesian3(150000.0, 150000.0, 150000.0),
minimumClock: Cesium.Math.toRadians(-90.0),
maximumClock: Cesium.Math.toRadians(180.0),
minimumCone: Cesium.Math.toRadians(20.0),
maximumCone: Cesium.Math.toRadians(70.0),
material: Cesium.Color.BLUE.withAlpha(0.3),
outline: true,
},
});
viewer.entities.add({
name: "部分穹顶",
position: Cesium.Cartesian3.fromDegrees(-84.0, 38.5),
ellipsoid: {
radii: new Cesium.Cartesian3(200000.0, 200000.0, 200000.0),
minimumClock: Cesium.Math.toRadians(-90.0),
maximumClock: Cesium.Math.toRadians(180.0),
maximumCone: Cesium.Math.toRadians(90.0),
material: Cesium.Color.RED.withAlpha(0.3),
outline: true,
},
});
viewer.entities.add({
name: "三角体",
position: Cesium.Cartesian3.fromDegrees(-102.0, 35.0, 20000.0),
orientation: Cesium.Transforms.headingPitchRollQuaternion(
Cesium.Cartesian3.fromDegrees(-102.0, 35.0, 20000.0),
new Cesium.HeadingPitchRoll(Cesium.Math.PI / 1.5, 0, 0.0)
),
ellipsoid: {
radii: new Cesium.Cartesian3(500000.0, 500000.0, 500000.0),
innerRadii: new Cesium.Cartesian3(10000.0, 10000.0, 10000.0),
minimumClock: Cesium.Math.toRadians(-15.0),
maximumClock: Cesium.Math.toRadians(15.0),
minimumCone: Cesium.Math.toRadians(75.0),
maximumCone: Cesium.Math.toRadians(105.0),
material: Cesium.Color.DARKCYAN.withAlpha(0.3),
outline: true,
},
});
viewer.entities.add({
name: "偏椭球",
position: Cesium.Cartesian3.fromDegrees(-95.0, 34.0),
ellipsoid: {
radii: new Cesium.Cartesian3(300000.0, 300000.0, 300000.0),
innerRadii: new Cesium.Cartesian3(70000.0, 70000.0, 70000.0),
minimumClock: Cesium.Math.toRadians(180.0),
maximumClock: Cesium.Math.toRadians(400.0),
maximumCone: Cesium.Math.toRadians(90.0),
material: Cesium.Color.DARKCYAN.withAlpha(0.3),
outline: true,
},
});
viewer.zoomTo(viewer.entities);
21.识别实体（pick entity）
var entity = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
billboard: {
image: "../images/Cesium_Logo_overlay.png",
},
});
// 鼠标移入改变billboard的scale和color
handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler.setInputAction(function (movement) {
let pickedObject = viewer.scene.pick(movement.endPosition);
if (Cesium.defined(pickedObject) && pickedObject.id === entity) {
entity.billboard.scale = 2.0;
entity.billboard.color = Cesium.Color.YELLOW;
} else {
entity.billboard.scale = 1.0;
entity.billboard.color = Cesium.Color.WHITE;
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
22.钻取实体（drill-down entity）
var pickedEntities = new Cesium.EntityCollection();
var pickColor = Cesium.Color.YELLOW.withAlpha(0.5);
function makeProperty(entity, color) {
var colorProperty = new Cesium.CallbackProperty(function (
time,
result
) {
if (pickedEntities.contains(entity)) {
return pickColor.clone(result);
}
return color.clone(result);
},
false);
entity.polygon.material = new Cesium.ColorMaterialProperty(
colorProperty
);
}
//红色实体
var red = viewer.entities.add({
polygon: {
hierarchy: Cesium.Cartesian3.fromDegreesArray([
-70.0,
30.0,
-60.0,
30.0,
-60.0,
40.0,
-70.0,
40.0,
]),
height: 0,
},
});
makeProperty(red, Cesium.Color.RED.withAlpha(0.5));
//蓝色实体
var blue = viewer.entities.add({
polygon: {
hierarchy: Cesium.Cartesian3.fromDegreesArray([
-75.0,
34.0,
-63.0,
34.0,
-63.0,
40.0,
-75.0,
40.0,
]),
height: 0,
},
});
makeProperty(blue, Cesium.Color.BLUE.withAlpha(0.5));
//绿色实体
var green = viewer.entities.add({
polygon: {
hierarchy: Cesium.Cartesian3.fromDegreesArray([
-67.0,
36.0,
-55.0,
36.0,
-55.0,
30.0,
-67.0,
30.0,
]),
height: 0,
},
});
makeProperty(green, Cesium.Color.GREEN.withAlpha(0.5));
// Move the primitive that the mouse is over to the top.
handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler.setInputAction(function (movement) {
// get an array of all primitives at the mouse position
var pickedObjects = scene.drillPick(movement.endPosition);
if (Cesium.defined(pickedObjects)) {
//Update the collection of picked entities.
pickedEntities.removeAll();
for (var i = 0; i < pickedObjects.length; ++i) {
var entity = pickedObjects[i].id;
pickedEntities.add(entity);
}
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
