549 lines
18 KiB
HTML
549 lines
18 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<!-- Use correct character set. -->
|
|||
|
|
<meta charset="utf-8" />
|
|||
|
|
<!-- Tell IE to use the latest, best version. -->
|
|||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|||
|
|
<!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
|
|||
|
|
<meta
|
|||
|
|
name="viewport"
|
|||
|
|
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
|
|||
|
|
/>
|
|||
|
|
<title>Learning Cesium!</title>
|
|||
|
|
<script src="./Build/Cesium/Cesium.js"></script>
|
|||
|
|
<script src="./js/turf.min.js"></script>
|
|||
|
|
<script src="./js/utils/cUtil.js"></script>
|
|||
|
|
<script src="./js/utils/CesiumPopup.js"></script>
|
|||
|
|
<style>
|
|||
|
|
@import url(./Build/Cesium/Widgets/widgets.css);
|
|||
|
|
html,
|
|||
|
|
body,
|
|||
|
|
#cesiumContainer {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#infobox {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 20px;
|
|||
|
|
left: 30px;
|
|||
|
|
font-size: 14px;
|
|||
|
|
z-index: 99;
|
|||
|
|
padding: 10px 20px;
|
|||
|
|
background-color: white;
|
|||
|
|
border: 1px solid #cccccc;
|
|||
|
|
}
|
|||
|
|
.toolbox {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 49%;
|
|||
|
|
left: 30px;
|
|||
|
|
z-index: 99;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: space-around;
|
|||
|
|
}
|
|||
|
|
.tool-item {
|
|||
|
|
background-color: #303336;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* pop框css*/
|
|||
|
|
.cesium-popup-panel {
|
|||
|
|
opacity: 0.8;
|
|||
|
|
width: 312px;
|
|||
|
|
position: absolute;
|
|||
|
|
z-index: 999;
|
|||
|
|
color: #00fcf9;
|
|||
|
|
|
|||
|
|
background: rgba(23, 50, 108, 0.6);
|
|||
|
|
border: 1px solid #4674d6;
|
|||
|
|
}
|
|||
|
|
.cesium-popup-tip-panel {
|
|||
|
|
width: 40px;
|
|||
|
|
height: 20px;
|
|||
|
|
position: absolute;
|
|||
|
|
left: 50%;
|
|||
|
|
bottom: -20px;
|
|||
|
|
margin-left: -20px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
pointer-events: none;
|
|||
|
|
opacity: 0.8;
|
|||
|
|
}
|
|||
|
|
.cesium-popup-tip-bottom {
|
|||
|
|
width: 17px;
|
|||
|
|
background: rgba(23, 50, 108, 0.8);
|
|||
|
|
border-bottom: 1px solid #4674d6;
|
|||
|
|
height: 17px;
|
|||
|
|
padding: 1px;
|
|||
|
|
margin: -10px auto 0;
|
|||
|
|
-webkit-transform: rotate(45deg);
|
|||
|
|
-moz-transform: rotate(45deg);
|
|||
|
|
-ms-transform: rotate(45deg);
|
|||
|
|
transform: rotate(45deg);
|
|||
|
|
}
|
|||
|
|
.cesium-popup-header-panel {
|
|||
|
|
/* display: flex; */
|
|||
|
|
/* justify-content: space-between; */
|
|||
|
|
align-items: center;
|
|||
|
|
font-size: 14px;
|
|||
|
|
padding: 5px 15px;
|
|||
|
|
background: rgba(23, 50, 108, 0.8);
|
|||
|
|
|
|||
|
|
border-bottom: 1px solid #4674d6;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cesium-poput-header-title {
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-family: Microsoft YaHei;
|
|||
|
|
font-weight: 400;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cesium-popup-content-panel {
|
|||
|
|
padding: 18px;
|
|||
|
|
}
|
|||
|
|
.cesium-popup-close-btn {
|
|||
|
|
float: right;
|
|||
|
|
position: relative;
|
|||
|
|
right: 10px;
|
|||
|
|
}
|
|||
|
|
.cesium-popup-close-btn,
|
|||
|
|
.cesium-popup-close-btn:focus {
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
cesium-popup-close-btn > svg:hover {
|
|||
|
|
color: #00fcf9 !important;
|
|||
|
|
}
|
|||
|
|
.cesium-popup-close-btn > svg {
|
|||
|
|
user-select: auto;
|
|||
|
|
color: #4674d6;
|
|||
|
|
cursor: pointer;
|
|||
|
|
width: 15px;
|
|||
|
|
/* height: 15px; */
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div id="cesiumContainer"></div>
|
|||
|
|
<script>
|
|||
|
|
Cesium.Ion.defaultAccessToken =
|
|||
|
|
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ZjRjNTZkNC01NDYxLTRhMjQtOGEwZC1kZjA3YzQ5YTJlZDkiLCJpZCI6MjYwODQsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODcxOTMwODN9.prGsSKyAW_9Ow5zHYPhbm3LsQL-ApQw5-5PNJkDaHi8";
|
|||
|
|
|
|||
|
|
var viewer = new Cesium.Viewer("cesiumContainer", {
|
|||
|
|
geocoder: false, //位置查找
|
|||
|
|
homeButton: false, //视图返回初始位置
|
|||
|
|
sceneModePicker: false, //视角选择器
|
|||
|
|
// baseLayerPicker:false,//底图选择器
|
|||
|
|
navigationHelpButton: false, //导航帮助按钮
|
|||
|
|
animation: false, //动画控制器
|
|||
|
|
creditContainer: document.createElement("div"), //版权显示
|
|||
|
|
timeline: false, //时间线
|
|||
|
|
fullscreenButton: false, //全屏控件
|
|||
|
|
vrButton: false,
|
|||
|
|
infoBox: false,
|
|||
|
|
selectionIndicator: false,
|
|||
|
|
});
|
|||
|
|
// var viewer = new Cesium.Viewer('cesiumContainer', {
|
|||
|
|
// terrainProvider: Cesium.createWorldTerrain()
|
|||
|
|
// });
|
|||
|
|
|
|||
|
|
// var tileset = viewer.scene.primitives.add(
|
|||
|
|
// new Cesium.Cesium3DTileset({
|
|||
|
|
// url: Cesium.IonResource.fromAssetId(115448),
|
|||
|
|
// })
|
|||
|
|
// );
|
|||
|
|
// viewer.zoomTo(tileset)
|
|||
|
|
// let tilesetUrls = [
|
|||
|
|
// 'http://localhost:9000/model/909658604a7311ed992d75041d327db8/tileset.json',
|
|||
|
|
// "http://localhost:9000/model/c02c5ac04a1e11ed992d75041d327db8/tileset.json"
|
|||
|
|
// ];
|
|||
|
|
let tilesetUrls = [
|
|||
|
|
"http://localhost:9000/model/e2098330603911ed87e5990e15ab1c55/tileset.json",
|
|||
|
|
];
|
|||
|
|
tilesetUrls.forEach((tilesetUrl) => {
|
|||
|
|
loadTileset(tilesetUrl);
|
|||
|
|
});
|
|||
|
|
function loadTileset(tilesetUrl) {
|
|||
|
|
var tileset = new Cesium.Cesium3DTileset({
|
|||
|
|
url: tilesetUrl,
|
|||
|
|
maximumScreenSpaceError:20,//控制模型的绘制精度，数值越大在同等层级里面加载的模型会越模糊，默认为16
|
|||
|
|
|
|||
|
|
skipLevelOfDetail: true,
|
|||
|
|
dynamicScreenSpaceError: true,
|
|||
|
|
maximumNumberOfLoadedTiles: 10000, //最大加载瓦片个数
|
|||
|
|
|
|||
|
|
dynamicScreenSpaceErrorDensity: 0.00278,
|
|||
|
|
dynamicScreenSpaceErrorFactor: 4.0,
|
|||
|
|
dynamicScreenSpaceErrorHeightFalloff: 0.25,
|
|||
|
|
});
|
|||
|
|
viewer.scene.primitives.add(tileset);
|
|||
|
|
viewer.zoomTo(tileset);
|
|||
|
|
tileset.readyPromise.then(function (tileset_) {
|
|||
|
|
setTilesetHeightAndOffset(tileset_, -45);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function setTilesetHeightAndOffset(tileset, height, x, y) {
|
|||
|
|
x = x ? x : 0;
|
|||
|
|
y = y ? y : 0;
|
|||
|
|
let center;
|
|||
|
|
if (tileset.boundingSphere) {
|
|||
|
|
// 3dtiles
|
|||
|
|
center = tileset.boundingSphere.center;
|
|||
|
|
} else if (
|
|||
|
|
tileset._boundingSpheres &&
|
|||
|
|
tileset._boundingSpheres.length > 0
|
|||
|
|
) {
|
|||
|
|
// Primitive
|
|||
|
|
center = tileset._boundingSpheres[0].center;
|
|||
|
|
}
|
|||
|
|
const cartographic = Cesium.Cartographic.fromCartesian(center);
|
|||
|
|
const surface = Cesium.Cartesian3.fromRadians(
|
|||
|
|
cartographic.longitude,
|
|||
|
|
cartographic.latitude,
|
|||
|
|
0.0
|
|||
|
|
);
|
|||
|
|
const offset = Cesium.Cartesian3.fromRadians(
|
|||
|
|
cartographic.longitude + x,
|
|||
|
|
cartographic.latitude + y,
|
|||
|
|
height
|
|||
|
|
);
|
|||
|
|
const translation = Cesium.Cartesian3.subtract(
|
|||
|
|
offset,
|
|||
|
|
surface,
|
|||
|
|
new Cesium.Cartesian3()
|
|||
|
|
);
|
|||
|
|
const modelMaxtrix = Cesium.Matrix4.fromTranslation(translation);
|
|||
|
|
tileset.modelMatrix = modelMaxtrix;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 拾取屏幕坐标
|
|||
|
|
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
|
|||
|
|
handler.setInputAction(function (evt) {
|
|||
|
|
//单机开始绘制
|
|||
|
|
var picks = viewer.scene.drillPick(evt.position);
|
|||
|
|
viewer.scene.render();
|
|||
|
|
var cartesian;
|
|||
|
|
var isOn3dtiles = false;
|
|||
|
|
for (var i = 0; i < picks.length; i++) {
|
|||
|
|
if (
|
|||
|
|
(picks[i] && picks[i].primitive) ||
|
|||
|
|
picks[i] instanceof Cesium.Cesium3DTileFeature
|
|||
|
|
) {
|
|||
|
|
//模型上拾取
|
|||
|
|
isOn3dtiles = true;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (isOn3dtiles) {
|
|||
|
|
cartesian = viewer.scene.pickPosition(evt.position);
|
|||
|
|
var lnglat = cUtil.cartesianToLnglat(cartesian); //坐标转换
|
|||
|
|
console.log(lnglat);
|
|||
|
|
// primitivePolygon()
|
|||
|
|
let pickobject = viewer.scene.pick(evt.position); //取模型
|
|||
|
|
const positionTmp = Cesium.Cartesian3.fromDegrees(
|
|||
|
|
lnglat[0],
|
|||
|
|
lnglat[1]
|
|||
|
|
);
|
|||
|
|
// if (pickobject instanceof Cesium.Cesium3DTileFeature) {
|
|||
|
|
// console.log(pickobject.getPropertyNames())
|
|||
|
|
var html = "";
|
|||
|
|
// for (item of pickobject.getPropertyNames()) {
|
|||
|
|
html +=
|
|||
|
|
"<div>名称" +
|
|||
|
|
// 名称 +
|
|||
|
|
": 小米" +
|
|||
|
|
// pickobject.getProperty(item) +
|
|||
|
|
"</div>" +
|
|||
|
|
"<br>";
|
|||
|
|
// }
|
|||
|
|
var a = new CesiumPopup({
|
|||
|
|
title: "信息",
|
|||
|
|
})
|
|||
|
|
.setPosition(cartesian)
|
|||
|
|
.setHTML(html)
|
|||
|
|
.addTo(viewer)
|
|||
|
|
.setTitle("详细信息框");
|
|||
|
|
|
|||
|
|
a.on("close", function () {
|
|||
|
|
console.log("close");
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
a.on("open", function () {
|
|||
|
|
console.log("open");
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
console.warn("请到模型上拾取！");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 场景坐标
|
|||
|
|
// var cartesian3 = viewer.scene.pickPosition(evt.position);
|
|||
|
|
// var pickobject = viewer.scene.pick(evt.position); //取模型
|
|||
|
|
|
|||
|
|
// const positionTmp = Cesium.Cartesian3.fromDegrees(lnglat[0], lnglat[1]);
|
|||
|
|
// // if (pickobject instanceof Cesium.Cesium3DTileFeature) {
|
|||
|
|
// // console.log(pickobject.getPropertyNames())
|
|||
|
|
// var html = "";
|
|||
|
|
// // for (item of pickobject.getPropertyNames()) {
|
|||
|
|
// html +=
|
|||
|
|
// "<div>名称" +
|
|||
|
|
// // 名称 +
|
|||
|
|
// ": 小米" +
|
|||
|
|
// // pickobject.getProperty(item) +
|
|||
|
|
// "</div>" +
|
|||
|
|
// "<br>";
|
|||
|
|
// // }
|
|||
|
|
// var a = new CesiumPopup({
|
|||
|
|
// title: "信息",
|
|||
|
|
// })
|
|||
|
|
// .setPosition(positionTmp)
|
|||
|
|
// .setHTML(html)
|
|||
|
|
// .addTo(viewer)
|
|||
|
|
// .setTitle("详细信息框");
|
|||
|
|
|
|||
|
|
// a.on("close", function () {
|
|||
|
|
// console.log("close");
|
|||
|
|
// });
|
|||
|
|
|
|||
|
|
// a.on("open", function () {
|
|||
|
|
// console.log("open");
|
|||
|
|
// });
|
|||
|
|
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
|||
|
|
|
|||
|
|
// function loadGeojson(data) {
|
|||
|
|
// if (!data) return;
|
|||
|
|
// var that = this;
|
|||
|
|
// Cesium.GeoJsonDataSource.load(data, {
|
|||
|
|
// stroke: Cesium.Color.HOTPINK,
|
|||
|
|
// fill: Cesium.Color.YELLOW.withAlpha(0.8),
|
|||
|
|
// clampToGround: false,
|
|||
|
|
// strokeWidth: 3,
|
|||
|
|
// }).then(function (dataSource) {
|
|||
|
|
// // that.quyerDataSourceArr.push(dataSource);
|
|||
|
|
// viewer.dataSources.add(dataSource);
|
|||
|
|
// var entities = dataSource.entities.values;
|
|||
|
|
// bindPopup(entities);
|
|||
|
|
// viewer.flyTo(entities, {
|
|||
|
|
// offset: new Cesium.HeadingPitchRange(
|
|||
|
|
// 0,
|
|||
|
|
// Cesium.Math.toRadians(-90.0),
|
|||
|
|
// 100
|
|||
|
|
// ),
|
|||
|
|
// });
|
|||
|
|
// });
|
|||
|
|
// }
|
|||
|
|
function primitivePolygon() {
|
|||
|
|
let coords = [
|
|||
|
|
[114.91145257593077, 32.36093602262491],
|
|||
|
|
[114.91154377635296, 32.36091409167903],
|
|||
|
|
[114.91142992678392, 32.36062375444207],
|
|||
|
|
[114.9113316698697, 32.360655259757834],
|
|||
|
|
[114.91145257593077, 32.36093602262491],
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
let ground = new Cesium.GroundPrimitive({
|
|||
|
|
geometryInstances: new Cesium.GeometryInstance({
|
|||
|
|
geometry: new Cesium.PolygonGeometry({
|
|||
|
|
polygonHierarchy: new Cesium.PolygonHierarchy(
|
|||
|
|
Cesium.Cartesian3.fromDegreesArray(coords.flat(2))
|
|||
|
|
),
|
|||
|
|
}),
|
|||
|
|
id: "ellipse",
|
|||
|
|
attributes: {
|
|||
|
|
color: new Cesium.ColorGeometryInstanceAttribute(
|
|||
|
|
0.0,
|
|||
|
|
1.0,
|
|||
|
|
0.0,
|
|||
|
|
0.5
|
|||
|
|
),
|
|||
|
|
},
|
|||
|
|
}),
|
|||
|
|
});
|
|||
|
|
viewer.scene.primitives.add(ground);
|
|||
|
|
}
|
|||
|
|
function bindPopup(entities) {
|
|||
|
|
if (!entities || entities.length < 1) return;
|
|||
|
|
var that = this;
|
|||
|
|
entities.forEach(function (ent) {
|
|||
|
|
ent.attr = "loadgeojson";
|
|||
|
|
let properties = ent._properties;
|
|||
|
|
let propertyNames = ent._properties._propertyNames;
|
|||
|
|
let contentStr = "";
|
|||
|
|
for (var i in propertyNames) {
|
|||
|
|
var name = propertyNames[i];
|
|||
|
|
var value = properties[name]._value;
|
|||
|
|
if (name && value) {
|
|||
|
|
contentStr += `
|
|||
|
|
<tr>
|
|||
|
|
<td>${name}</td>
|
|||
|
|
<td>${value}</td>
|
|||
|
|
</tr>
|
|||
|
|
`;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
var content = `
|
|||
|
|
<table style='width:200px;'>
|
|||
|
|
${contentStr}
|
|||
|
|
</table>
|
|||
|
|
`;
|
|||
|
|
//绑定弹窗
|
|||
|
|
var hierarchy = ent.polygon.hierarchy._value.positions;
|
|||
|
|
|
|||
|
|
var lnglat = cUtil.getCenterByPositions(hierarchy);
|
|||
|
|
var tileH = viewer.scene.sampleHeight(
|
|||
|
|
Cesium.Cartographic.fromDegrees(lnglat[0], lnglat[1])
|
|||
|
|
);
|
|||
|
|
var popupCartesian = Cesium.Cartesian3.fromDegrees(
|
|||
|
|
lnglat[0],
|
|||
|
|
lnglat[1],
|
|||
|
|
tileH
|
|||
|
|
);
|
|||
|
|
var popup = new MovePrompt(viewer, {
|
|||
|
|
type: 2,
|
|||
|
|
content: content,
|
|||
|
|
popupCartesian: popupCartesian,
|
|||
|
|
offset: {
|
|||
|
|
y: -30,
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// that.popupArr.push(popup);
|
|||
|
|
ent.popup = popup;
|
|||
|
|
|
|||
|
|
// var html = ''
|
|||
|
|
// for(item of pickobject.getPropertyNames()){
|
|||
|
|
// html+= '<div>'+item +': ' + pickobject.getProperty(item) +'</div>' +'<br>'
|
|||
|
|
// }
|
|||
|
|
var a = new CesiumPopup({
|
|||
|
|
title: "信息",
|
|||
|
|
})
|
|||
|
|
.setPosition(position)
|
|||
|
|
.setHTML(content)
|
|||
|
|
.addTo(viewer)
|
|||
|
|
.setTitle("详细信息框");
|
|||
|
|
|
|||
|
|
a.on("close", function () {
|
|||
|
|
console.log("close");
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
a.on("open", function () {
|
|||
|
|
console.log("open");
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//添加水面波纹效果
|
|||
|
|
let coorArr = [
|
|||
|
|
[114.9106237, 32.36040131],
|
|||
|
|
[114.910716, 32.36037744],
|
|||
|
|
[114.9108247, 32.36050763],
|
|||
|
|
[114.9108915, 32.36066378],
|
|||
|
|
[114.9105362, 32.36075431],
|
|||
|
|
[114.9099036, 32.36107367],
|
|||
|
|
[114.9098775, 32.36110465],
|
|||
|
|
[114.9099265, 32.36129565],
|
|||
|
|
[114.90990293, 32.3612836],
|
|||
|
|
[114.9097085, 32.36089941],
|
|||
|
|
[114.9096557, 32.36089388],
|
|||
|
|
[114.909541, 32.36092192],
|
|||
|
|
[114.9091854, 32.36104688],
|
|||
|
|
[114.9091163, 32.36076679],
|
|||
|
|
[114.9104683, 32.36022219],
|
|||
|
|
[114.9106237, 32.36040131],
|
|||
|
|
];
|
|||
|
|
viewer.scene.primitives.add(
|
|||
|
|
new Cesium.Primitive({
|
|||
|
|
geometryInstances: new Cesium.GeometryInstance({
|
|||
|
|
geometry: new Cesium.PolygonGeometry({
|
|||
|
|
polygonHierarchy: new Cesium.PolygonHierarchy(
|
|||
|
|
Cesium.Cartesian3.fromDegreesArray(coorArr.flat())
|
|||
|
|
),
|
|||
|
|
vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT,
|
|||
|
|
height: -3,
|
|||
|
|
}),
|
|||
|
|
}),
|
|||
|
|
appearance: new Cesium.EllipsoidSurfaceAppearance({
|
|||
|
|
material: new Cesium.Material({
|
|||
|
|
fabric: {
|
|||
|
|
type: "Water",
|
|||
|
|
uniforms: {
|
|||
|
|
baseWaterColor: new Cesium.Color(
|
|||
|
|
64 / 255.0,
|
|||
|
|
157 / 255.0,
|
|||
|
|
253 / 255.0,
|
|||
|
|
0.5
|
|||
|
|
),
|
|||
|
|
normalMap: "./Build/Cesium/Assets/Textures/waterNormals.jpg",
|
|||
|
|
frequency: 1000.0,
|
|||
|
|
animationSpeed: 0.1,
|
|||
|
|
amplitude: 10,
|
|||
|
|
specularIntensity: 10,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
}),
|
|||
|
|
}),
|
|||
|
|
})
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
// 加载矢量文件,GeoJSON或TopoJSON数据
|
|||
|
|
var geojsonUrls = [
|
|||
|
|
"./data/project/guangchang4326.geojson",
|
|||
|
|
"./data/project/jiguan4326.geojson",
|
|||
|
|
];
|
|||
|
|
geojsonUrls.forEach((url) => {
|
|||
|
|
loadGeojson(url);
|
|||
|
|
});
|
|||
|
|
function loadGeojson(url) {
|
|||
|
|
fetch(url)
|
|||
|
|
.then((res) => res.json())
|
|||
|
|
.then((result) => {
|
|||
|
|
console.log(result.features);
|
|||
|
|
let color = new Cesium.ColorGeometryInstanceAttribute(
|
|||
|
|
0.0,
|
|||
|
|
1.0,
|
|||
|
|
0.0,
|
|||
|
|
0.8
|
|||
|
|
);
|
|||
|
|
let feature = result.features[0];
|
|||
|
|
// let coords = [[
|
|||
|
|
// [ 114.858673530871059, 32.336598522142921],
|
|||
|
|
// [ 114.85870642479334, 32.336789791974084],
|
|||
|
|
// [ 114.85877356985101, 32.337118584526792],
|
|||
|
|
// [ 114.858961691749982, 32.337092741351618],
|
|||
|
|
// [ 114.859022438143327, 32.337084020013563],
|
|||
|
|
// [ 114.858927889823292, 32.336562085604292],
|
|||
|
|
// [ 114.858673530871059, 32.336598522142921]
|
|||
|
|
// ]]
|
|||
|
|
result.features.forEach((feature) => {
|
|||
|
|
let coords = feature.geometry.coordinates;
|
|||
|
|
let DLMC = feature["properties"]["DLMC"];
|
|||
|
|
let ground = new Cesium.GroundPrimitive({
|
|||
|
|
geometryInstances: new Cesium.GeometryInstance({
|
|||
|
|
geometry: new Cesium.PolygonGeometry({
|
|||
|
|
polygonHierarchy: new Cesium.PolygonHierarchy(
|
|||
|
|
Cesium.Cartesian3.fromDegreesArray(coords.flat(3))
|
|||
|
|
),
|
|||
|
|
}),
|
|||
|
|
id: feature.properties.BSM, //id是一个Object,在scene的pick拾取到后会返回
|
|||
|
|
id: feature["properties"],
|
|||
|
|
DLMC: DLMC,
|
|||
|
|
attributes: {
|
|||
|
|
//attributes属性可以使用Primitive#getGeometryInstanceAttributes("id")获得
|
|||
|
|
color: color,
|
|||
|
|
show: new Cesium.ShowGeometryInstanceAttribute(true),
|
|||
|
|
// "properties":{"attr1":12}
|
|||
|
|
},
|
|||
|
|
}),
|
|||
|
|
});
|
|||
|
|
viewer.scene.primitives.add(ground);
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|