cesium 基础篇
程序员文章站
2022-06-11 16:06:12
...
文章目录
0.安装
1.基础
1.初始化
<div id="cesiumxin" >
var viewer = new Cesium.Viewer('cesiumContainer',{});
2.属性
animation : false,//是否创建动画小器件,左下角仪表
baseLayerPicker : false,//地图切换控件(底图以及地形图)是否显示,默认显示true
fullscreenButton : false,//是否显示全屏按钮
geocoder : false,//是否显示geocoder小器件,右上角查询按钮
homeButton : false,//是否显示Home按钮
infoBox : false,//是否显示信息框
sceneModePicker : false,//是否显示3D/2D选择器
selectionIndicator : false,//是否显示选取指示器组件
timeline : false,//是否显示时间轴
navigationHelpButton : false,//是否显示右上角的帮助按钮
scene3DOnly : true,//如果设置为true,则所有几何图形以3D模式绘制以节约GPU资源
clock : new Cesium.Clock(),//用于控制当前时间的时钟对象
selectedImageryProviderViewModel : undefined,//当前图像图层的显示模型,仅baseLayerPicker设为true有意义
imageryProviderViewModels : Cesium.createDefaultImageryProviderViewModels(),//可供BaseLayerPicker选择的图像图层ProviderViewModel数组
selectedTerrainProviderViewModel : undefined,//当前地形图层的显示模型,仅baseLayerPicker设为true有意义
terrainProviderViewModels : Cesium.createDefaultTerrainProviderViewModels(),//可供BaseLayerPicker选择的地形图层ProviderViewModel数组
imageryProvider : new Cesium.OpenStreetMapImageryProvider( {
credit :'',
url : '//192.168.0.89:5539/planet-satellite/'
} ),//图像图层提供者,仅baseLayerPicker设为false有意义
terrainProvider: new Cesium.CesiumTerrainProvider({
url: url.dem,
requestVertexNormals: true,
requestWaterMask: true
})//地形图层提供者,仅baseLayerPicker设为false有意义
skyBox: new Cesium.SkyBox({
sources: {
positiveX: "static/images/sky/posx.png",
negativeX: "static/images/sky/negx.png",
positiveY: "static/images/sky/posy.png",
negativeY: "static/images/sky/negy.png",
positiveZ: "static/images/sky/posz.png",
negativeZ: "static/images/sky/negz.png"
}
}) //用于渲染星空的SkyBox对象
fullscreenElement : document.body,//全屏时渲染的HTML元素,
useDefaultRenderLoop : true,//如果需要控制渲染循环,则设为true
targetFrameRate : undefined,//使用默认render loop时的帧率
showRenderLoopErrors : false,//如果设为true,将在一个HTML面板中显示错误信息
automaticallyTrackDataSourceClocks : true,//自动追踪最近添加的数据源的时钟设置
contextOptions : undefined,//传递给Scene对象的上下文参数(scene.options)
sceneMode : Cesium.SceneMode.SCENE3D,//初始场景模式
mapProjection : new Cesium.WebMercatorProjection(),//地图投影体系
dataSources : new Cesium.DataSourceCollection()
//需要进行可视化的数据源的集合
2.加载天地图 --标注
this.viewer.imageryLayers.addImageryProvider(
new Cesium.WebMapTileServiceImageryProvider({
url: url.tdtMark,
layer: "tdtAnnoLayer",
style: "default",
format: "tiles",
tileMatrixSetID: "GoogleMapsCompatible"
})
)
3.加载天地图 --底图
this.viewer.imageryLayers.addImageryProvider(
new Cesium.WebMapTileServiceImageryProvider({
url: url.tdtBg,
layer: "tdtImg_c",
style: "default",
format: "tiles",
tileMatrixLabels: ["1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12",
"13",
"14",
"15",
"16",
"17",
"18",
"19"],
subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
tilingScheme: new Cesium.GeographicTilingScheme(),
maximumLevel: 50
})
)
4 加载
http://123.146.225.94:9711/90dem/
terrainProvider: new Cesium.CesiumTerrainProvider({
url: url.dem,
requestVertexNormals: true,
requestWaterMask: true
})
5 加载 3dtiles数据
let bhlrgTileset = new Cesium.Cesium3DTileset({
url: url.bhl_rg
})
this.viewer.scene.primitives.add(bhlrgTileset)
<!--加载完毕模型之后 定位到模型-->
bhlqxTileset.readyPromise
.then(() => {
this.viewer.camera.viewBoundingSphere(
bhlqxTileset.boundingSphere,
new Cesium.HeadingPitchRange(
0.0,
-0.5,
bhlqxTileset.boundingSphere.radius
)
)
this.viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY)
})
.otherwise(function(error) {
throw error
})
7 罗盘
var options = {}
options.defaultResetView = Cesium.Rectangle.fromDegrees(
107.38067150115968,
29.72045494841667,
107.39715099334718,
29.71234839017842
)
// Only the compass will show on the map
options.enableCompass = true
options.enableZoomControls = false
options.enableDistanceLegend = false
options.enableCompassOuterRing = true
this.viewer.extend(Cesium.viewerCesiumNavigationMixin, options)
9 划线
this.viewer.entities.add({
name: "内圈线",
polyline: {
positions: Cesium.Cartesian3.fromDegreesArray([
107.385427435,
29.7150415948,
107.386278152,
29.7174868874,
107.388960935,
29.7167310117,
107.388112182,
29.7142969822,
107.385427435,
29.7150415948
]),
width: 3,
clampToGround: true, //贴地
material: new Cesium.Color.fromCssColorString("#FF00FF")
}
})
10 遮罩
10.1 椭圆
this.viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(
url.groundSpot.x,
url.groundSpot.y
),
name: "表面红色椭圆",
ellipse: {
<!--半轴 m-->
semiMinorAxis: 250000.0,
semiMajorAxis: 400000.0,
material: Cesium.Color.RED.withAlpha(0.5)
}
})
10.2 矩形
var redRectangle = viewer.entities.add({
name: 'Red translucent rectangle',
rectangle: {
coordinates: Cesium.Rectangle.fromDegrees(
-180.0,
-90.0,
60.0,
60.0
),
material: Cesium.Color.RED.withAlpha(1)
}
});
<!--定位到实体-->
viewer.zoomTo(viewer.entities);
11 定位到中国 北京 坐标
viewer.camera.setView({
destination: Cartesian3.fromDegrees(116.39, 39.9, 5000000.0)
});
12 渔船
$(arr).each(function(i, item) {
var inthtml =
'<table style="width: 200px;">' +
'<tr><th scope="col" colspan="4" style="text-align:center;font-size:15px;">' +
item.CZMC +
"</th></tr>" +
"<tr><td >船速:</td><td >" +
item.CS +
"节" +
"</td></tr>" +
"<tr><td >船长:</td><td >" +
item.CC +
"米" +
"</td></tr>" +
"<tr><td >船宽:</td><td >" +
item.CK +
"米" +
"</td></tr>" +
"<tr><td >船向:</td><td >" +
item.CC +
"度" +
"</td></tr>" +
"</table>"
//添加实体
this.viewer.entities.add({
// var entitie = dataSource.entities.add({
name: item.name,
position: Cesium.Cartesian3.fromDegrees(item.JD, item.WD),
billboard: {
image: "../../../../static/images/icon/3d_boat.png",
scale: 0.5, //原始大小的缩放比例
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, //CLAMP_TO_GROUND
scaleByDistance: new Cesium.NearFarScalar(
1.5e2,
1.5,
8.0e6,
0.2
)
},
label: {
text: item.CZMC,
font: "normal 16px ",
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
fillColor: Cesium.Color.BLACK,
outlineColor: Cesium.Color.BLACK,
outlineWidth: 2,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
pixelOffset: new Cesium.Cartesian2(50, -13), //偏移量
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
0.0,
2000000
)
},
data: item,
popup: {
html: inthtml,
anchor: [0, -25]
}
})
})
13背景图片 地球贴图
imageryProvider: new Cesium.SingleTileImageryProvider({
url: '../img/worldimage.jpg'
}),
14 地球增加经纬度 线
var imageryLayers = viewer.imageryLayers;
var layer = imageryLayers.addImageryProvider(new Cesium.GridImageryProvider());
layer.alpha = Cesium.defaultValue(alpha, 0.5);
layer.show = Cesium.defaultValue(show, true);
layer.name = "Grid";
15 加载谷歌影像
imageryProvider: new Cesium.UrlTemplateImageryProvider({
url:'http://www.google.cn/maps/[email protected]&x={x}&y={y}&z={z}',
tilingScheme:new Cesium.WebMercatorTilingScheme(),
minimumLevel:1,
maximumLevel:20
}),
16 加载地形数据
terrainProvider: new Cesium.CesiumTerrainProvider({
url: url.dem,
requestVertexNormals: true,
requestWaterMask: true
}),
6 鼠标点击事件
let handler = new Cesium.ScreenSpaceEventHandler(
this.viewer.scene.canvas
)
handler.setInputAction(function(click) {
console.log("左键单击事件:", click,this.viewer.camera)
//打印出来的 heading pitch 直接用就可以 是弧度数
}, Cesium.ScreenSpaceEventType.LEFT_CLICK)
17 设置视角
定位到 实体
viewer.zoomTo(viewer.entities);
定位到 经纬度
this.viewer.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(116.39, 39.9, 15000.0),
orientation: {
heading: Cesium.Math.toRadians(0), // 左右 - 右方向转动
pitch: Cesium.Math.toRadians(-40), // 上下
roll: 0.0 // default value
}
})
8 flyTo
const obj = {
y: 29.70977,
x: 107.38758,
z: 1230.74,
heading: 358,
pitch: -58.58,
roll: 359.8
}
this.viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(
obj.x,
obj.y,
obj.z || 0
), //经度、纬度、高度
orientation: {
heading: Cesium.Math.toRadians(obj.heading || 0), //绕垂直于地心的轴旋转
pitch: Cesium.Math.toRadians(
obj.pitch || -Cesium.Math.PI_OVER_FOUR
), //绕纬度线旋转
roll: Cesium.Math.toRadians(obj.roll || 0) //绕经度线旋转
},
duration: time //持续时间
})
cesium 方向
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lwLIAXDa-1577105909697)(http://qq.littlewindy.com/up_img_1576674530000.png)]
上一篇: google地图api