文件要求
1.创建文件夹,把cesium中的Build文件夹下的Cesium文件复制到该文件夹中
2.在文件中引入Cesium/Widgets/widgets.css和Cesium/Cesium.js这两个文件
编写代码
<!doctype html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="scripts/Cesium/Widgets/widgets.css" target="_blank" rel="external nofollow" >
<style>
html,body{
height:100%;
margin:0;
padding:0;
}
</style>
</head>
<body>
<div id="cesiumContainer" style="height:100%;"></div>
<script src="scripts/Cesium/Cesium.js"></script>
<script>
var viewer = new Cesium.Viewer('cesiumContainer');
</script>
</body>
</html>
设置地图
var viewer = new Cesium.Viewer('cesiumContainer',{
imageryProvider:new Cesium.ArcGisMapServerImageryProvider({
url : 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'//ArcGIS地图
}),
terrainProvider : Cesium.createWorldTerrain({
requestWaterMask : true,
requestVertexNormals : true
})
});
设置视角位置
viewer.camera.setView({
destination : Cesium.Cartesian3.fromDegrees(116.22710987304686, 39.942024505835846,150.0),//石景山坐标
orientation: {
heading : Cesium.Math.toRadians(90.0), // east, default value is 0.0 (north)
pitch : Cesium.Math.toRadians(0), // default value (looking down)
roll : 0.0 // default value
}
});
添加坐标点
pointList是包含坐标的位置点
for (let i = 0; i < pointList.length; i++) {
viewer.entities.add({
id: "point" + i,
name: pointList[i].name + ":" + pointList[i].value[2],
description:pointList[i].name+' pm10值:'+ pointList[i].value[2],//我把点需要的label信息放在了这里
children:pointList[i].zhsj,//点击点与图表联动需要的信息放在了这里
position: Cesium.Cartesian3.fromDegrees(pointList[i].value[0], pointList[i].value[1], 0),
point: {
pixelSize: 20,//点的大小
color: Cesium.Color.RED.withAlpha(0.01),
},
});
}
添加鼠标事件
handler.setInputAction((e) => {
let pick = viewer.scene.pick(e.position);
console.log(pick);
if(pick.id._description._value.indexOf("地点") !== -1){
$('.info_video').show().css({'top':e.position.y+'1060','left':e.position.x-'300'});
}else{
$('.info_video').hide();
}
var cartesian = viewer.camera.pickEllipsoid(e.position, viewer.scene.globe.ellipsoid);
var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
var lon = Cesium.Math.toDegrees(cartographic.longitude).toFixed(5);//四舍五入 小数点后保留五位
var lat = Cesium.Math.toDegrees(cartographic.latitude).toFixed(5);//
var loni=Number(lon)-0.0080;
var lati=Number(lat)+0.00150;
if (Cesium.defined(pick) && (pick.id._id.indexOf("point") !== -1)) {
if (cartesian && pick.id._children[0]) {
var data={
layerId:"layer1",//英文，且唯一,内部entity会用得到
lon:loni,
lat:lati,
element:oneDiv,
};
ysc.showDynamicLayer(viewer,data,function (){ //回调函数 添加弹窗(这里是结合ysc)
// oneDiv.html("hello world!"+Math.random()*10000);
oneDiv.find('span').html(pick.id._description.getValue());
leftBar(pick.id._children[0].firstbar)
leftbottomBar(pick.id._children[0].secondbar)
rightGule(pick.id._children[0].racle)
rightLine(pick.id._children[0].line)
});
}
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
鼠标移动事件
handler.setInputAction((data) => {
let pick = viewer.scene.pick(data.endPosition);
if (Cesium.defined(pick) && (pick.id._id.indexOf("point") !== -1)) {
$('#cesiumContainer').css('cursor', 'pointer')
} else {
$('#cesiumContainer').css('cursor', 'default')
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
飞向指定坐标
// 3. Fly to a position with an orientation using unit vectors.
viewer.camera.flyTo({
destination : Cesium.Cartesian3.fromDegrees(-122.19, 46.25, 5000.0),
orientation : {
direction : new Cesium.Cartesian3(-0.04231243104240401, -0.20123236049443421, -0.97862924300734),
up : new Cesium.Cartesian3(-0.47934589305293746, -0.8553216253114552, 0.1966022179118339)
}
});
刚开始学习cesium,如果有什么问题,欢迎各位大神指正
![2016年开源巨献：百度71款开源项目 没看够？更多好文在阅读原文[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)