cesium.js入门（一）
webGIS ,基于Cesium.js的Demo，包含：初始化、加载geojson数据、加载glb模型
·
一、什么是cesium.js
Cesium是一款开源的基于JavaScript的3D地图框架。其实他就是一个地图可视化框架
二、学习网站
- Cesium中文网
http://cesium.xin/
- Cesium中文网
http://cesium.coinidea.com/
- Cesium官网
https://cesium.com/platform/cesiumjs/
- 公众号
GIS前沿、麻辣GIS、数字孪生城市
三、例子
- 引入文件
<script src="Build/Cesium/Cesium.js"></script>
<script src="js/lineFlickerMaterialProperty.js"></script>
- html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
/>
<title>Hello World!</title>
<script src="Build/Cesium/Cesium.js"></script>
<script src="js/lineFlickerMaterialProperty.js"></script>
<style>
@import url(Build/Cesium/Widgets/widgets.css);
html,
body,
#cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
</body>
</html>
3.js代码
//创建Cesium
const viewer = new Cesium.Viewer('cesiumContainer',{
animation: false,
timeline: false
});
//去除版权
viewer._cesiumWidget._creditContainer.style.display = "none";
//参数
let params = {
lon: 116.397027,
lat: 39.91799,
alt: 6000,
heading: Cesium.Math.toRadians(0.0),
pitch: Cesium.Math.toRadians(-90.0),
roll: 0.0,
range: 50.0,
duration: 10
};
//初始场景动画，飞到目标点
viewer.camera.flyTo({
// fromDegrees()将经纬度和高程转换为世界坐标
destination: Cesium.Cartesian3.fromDegrees(params.lon, params.lat, params.alt),
//持续时间
duration: params.duration,
orientation: {
// 指向
heading: params.heading,
// 视角
//pitch: params.pitch,
roll: params.roll
}
});
//加载json文件（国家边界线，网上下载的）
viewer.dataSources.add(Cesium.GeoJsonDataSource.load('Json/countriesGeo.json',{
stroke: Cesium.Color.RED,//颜色设置，自定义颜色请参考API
strokeWidth: 3
}));
//加载模型（Cesium自带的飞机模型）
viewer.entities.add({
name: "plane",
position: Cesium.Cartesian3.fromDegrees(116.397027,39.91799, 2),
//orientation: orientation,
model: {
uri: "Apps/SampleData/models/CesiumAir/Cesium_Air.glb",
minimumPixelSize: 128,//最小的模型像素
maximumScale: 20000,//最大的模型像素
runAnimations:true,//是否显示动画
clampAnimations:true,//是否保持最后一针的动画
//color:Cesium.Color.RED,//颜色
color:Cesium.Color.fromAlpha(Cesium.Color.RED, parseFloat(1.0)),//包含透明度的颜色
colorBlendMode:Cesium.ColorBlendMode['MIX'],//常用的有三个HIGHLIGHT,REPLACE,MIX
colorBlendAmount:0.1//这个属性必须是MIX混合属性才能生效,见colorBlendMode
}
});
4.效果图
5.项目地址
给你带来帮助请告诉我，这也是我写作的动力
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
10
0- 0
已为社区贡献1条内容
所有评论(0)