本地搭建cesium环境
2021-05-20 本文已影响0人
姜治宇
1、下载cesium
直接运行命令：
npm install cesium
下载完成后，找到node_modules\cesium\Build\Cesium这个文件夹，单独拎出来。
然后写一个index.html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./Cesium/Widgets/widgets.css">
<script src="./Cesium/Cesium.js"> </script>
</head>
<body>
<div id="cesiumContainer"></div>
</body>
</html>
<script>
var viewer = new Cesium.Viewer('cesiumContainer');
//加载瓦片影像
var layer = viewer.imageryLayers.addImageryProvider(
new Cesium.UrlTemplateImageryProvider({ url: 'xxx' })
);
viewer.flyTo(layer);//视角跟随
//加载json
var promise = Cesium.GeoJsonDataSource.load('test.json');
promise.then(function (dataSource) {
console.log(dataSource);
viewer.dataSources.add(dataSource);
var entities = dataSource.entities.values;
var colorHash = {};
for (var i = 0; i < entities.length; i++) {
var entity = entities[i];
var name = entity.name;
var color = colorHash[name];
if (!color) {
// color = Cesium.Color.fromRandom({
// alpha : 1.0
// });
color = Cesium.Color.WHITESMOKE,
colorHash[name] = color;
}
entity.polygon.material = color;
entity.polygon.outline = false;
entity.polygon.extrudedHeight =50.0;
}
});
viewer.flyTo(promise);//视角定位
viewer.entities.add({
name: '小汽车',
position: Cesium.Cartesian3.fromDegrees(110, 40, 1000),
model: {
uri: "./car.glb"
}
});
viewer.entities.add({
name: '文字',
position: Cesium.Cartesian3.fromDegrees(110, 40, 1000),
label: {
text: 'Citizens Bank Park',
font: '14pt monospace',
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
outlineWidth: 2,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
pixelOffset: new Cesium.Cartesian2(0, -9)
}
});
viewer.entities.add({
name: '小图片',
position: Cesium.Cartesian3.fromDegrees(110, 40, 1000),
billboard: {
image: './a.png',
width: 60,
height: 60
}
});
viewer.entities.add({
id:'hello123',
name: '多边形',
polygon: {
hierarchy: Cesium.Cartesian3.fromDegreesArray([
-109.080842, 45.002073,
-105.91517, 45.002073,
-104.058488, 44.996596,
-104.053011, 43.002989,
-104.053011, 41.003906,
-105.728954, 40.998429,
-107.919731, 41.003906,
-109.04798, 40.998429,
-111.047063, 40.998429,
-111.047063, 42.000709,
-111.047063, 44.476286,
-111.05254, 45.002073]),
height: 0,
material: Cesium.Color.RED.withAlpha(0.5),
outline: true,
outlineColor: Cesium.Color.BLACK
}
});
setTimeout(()=>{
viewer.imageryLayers.remove(layer);
viewer.entities.removeById('hello123');//5s后移除
},5000);
</script>
1621501272(1).png
2、搭建静态文件服务器
因为cesium在初始化的时候需要请求一些远程文件，你直接本地打开html文件是不行的，得放在一个静态文件服务器中打开，我们可以用node很方便的建一个。
安装connect 包和 serve-static 包：
npm install connect --save
npm install serve-static --save
写一个server.js:
var connect = require("connect");
var serveStatic = require("serve-static");
var app = connect();
app.use(serveStatic("./demo")); //自定义文件夹
app.listen(5000);
运行命令：
node server.js
这样5000端口就可以访问了，直接地址栏输入http://localhost:5000/即可访问到cesium球了。
测试资源
test.json:
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
108.8324761390686,
34.20885647953598
],
[
108.83254051208496,
34.207880479126565
],
[
108.83389234542847,
34.20786273355998
],
[
108.83383870124817,
34.208758880003636
],
[
108.8324761390686,
34.20885647953598
]
]
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
108.83450388908386,
34.20872338923659
],
[
108.83450388908386,
34.20820877143483
],
[
108.83553385734558,
34.2082974988662
],
[
108.83579134941101,
34.2087145165425
],
[
108.83498668670654,
34.208936333614744
],
[
108.83450388908386,
34.20872338923659
]
]
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
108.83655309677123,
34.2088476068559
],
[
108.83655309677123,
34.20816440768414
],
[
108.83839845657349,
34.20820877143483
],
[
108.83849501609802,
34.20883873417489
],
[
108.83655309677123,
34.2088476068559
]
]
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
108.83903145790099,
34.208820988810025
],
[
108.83917093276978,
34.20786273355998
],
[
108.83986830711365,
34.20794258858026
],
[
108.83970737457275,
34.208758880003636
],
[
108.83903145790099,
34.208820988810025
]
]
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
108.83273363113403,
34.207374729014184
],
[
108.83272290229797,
34.20614139584089
],
[
108.83440732955933,
34.20629223611846
],
[
108.8346219062805,
34.20738360184931
],
[
108.83273363113403,
34.207374729014184
]
]
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
108.83506178855896,
34.20729487345586
],
[
108.83506178855896,
34.20729487345586
],
[
108.83506178855896,
34.20729487345586
],
[
108.83506178855896,
34.20729487345586
]
]
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
108.8350510597229,
34.2072682549196
],
[
108.83504033088684,
34.20665602626555
],
[
108.83703589439392,
34.20660278878113
],
[
108.83745431900024,
34.20741022034913
],
[
108.8350510597229,
34.2072682549196
]
]
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
108.83790493011473,
34.20745458449684
],
[
108.83786201477051,
34.20647856785336
],
[
108.83999705314636,
34.20656729710617
],
[
108.84015798568726,
34.20754331272217
],
[
108.83790493011473,
34.20745458449684
]
]
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
108.83275508880615,
34.20536057126524
],
[
108.83278727531432,
34.203967491274426
],
[
108.83497595787048,
34.20414495497323
],
[
108.83516907691956,
34.205271840742135
],
[
108.83275508880615,
34.20536057126524
]
]
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
108.83585572242737,
34.20503226786322
],
[
108.83583426475525,
34.20434903776502
],
[
108.8400936126709,
34.204641851342345
],
[
108.8401472568512,
34.20556465111387
],
[
108.83585572242737,
34.20503226786322
]
]
]
}
}
]
}
