效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/2c353e742e5c460c280ff41d963b110f.png)
代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>cesium|xt3d</title>
<!-- 引入Cesium -->
<script src="https://cdn.jsdelivr.net/npm/cesium@1.84.0/Build/Cesium/Cesium.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cesium@1.84.0/Build/Cesium/Widgets/widgets.css">
<!-- 引入xt3d -->
<script src="http://www.xt3d.cn/xt3dlib/xt3d.min.js"></script>
<style>
html,
body,
#map3d {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="map3d"></div>
<script>
let xt3dInit = {
init(el) {
this.initViewer(el);
this.load3dtiles();
this.addMarkers();
},
initViewer(el) {
this.viewer = new Cesium.Viewer(el, {
infoBox: false,
selectionIndicator: false,
navigation: false,
animation: false,
shouldAnimate: false,
timeline: false,
baseLayerPicker: false,
geocoder: false,
homeButton: false,
sceneModePicker: false,
navigationHelpButton: false,
imageryProvider: new Cesium.UrlTemplateImageryProvider({
url: "https://t7.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=tdtTk"
})
});
},
addMarkers() {
let p1 = [106.45332960278935, 29.505968155210237, 80.04600931385025];
let p2 = [106.45377240762079, 29.50653022945677, 70.49301763120009];
let p3 = [106.45372948529989, 29.506279211964337, 70.58591134883969];
let p4 = [106.4565365840505, 29.505992532615764, 30.070031394164918];
let p5 = [106.45721717052103, 29.508857826447745, 30.828267397716047];
let m1 = new xt3d.PointObject.AlertMarker(this.viewer, Cesium.Cartesian3.fromDegrees(p5[0], p5[1], p5[2]), {
iconUrl: "/data.xt3d.cn/assets/images/marker/pos_red.png",
color: Cesium.Color.RED
});
let m2 = new xt3d.PointObject.AlertMarker(this.viewer, Cesium.Cartesian3.fromDegrees(p4[0], p4[1], p4[2]), {
iconUrl: "/data.xt3d.cn/assets/images/marker/pos_yellow.png",
color: Cesium.Color.YELLOW
});
let m3 = new xt3d.PointObject.AlertMarker(this.viewer, {
x: -1573502.1873961585,
y: 5327859.690320177,
z: 3123060.233659639
}, {
iconUrl: "/data.xt3d.cn/assets/images/marker/pos_orange.png",
color: Cesium.Color.ORANGE
});
let m4 = new xt3d.PointObject.AlertMarker(this.viewer, {
x: -1573678.3258349395,
y: 5327853.659547878,
z: 3123024.8602834097
}, {
iconUrl: "/data.xt3d.cn/assets/images/marker/pos_yellow.png",
color: Cesium.Color.BLUE
});
let m5 = new xt3d.PointObject.AlertMarker(this.viewer,
Cesium.Cartesian3.fromDegrees(p1[0], p1[1], p1[2]), {
iconUrl: "/data.xt3d.cn/assets/images/marker/pos_yellow.png",
color: Cesium.Color.GREEN
});
},
load3dtiles() {
var tileset = this.viewer.scene.primitives.add(
new Cesium.Cesium3DTileset({
url: "http://www.xt3d.cn/data/offset_3dtiles/tileset.json",
})
);
tileset.readyPromise
.then(tileset => {
this.viewer.zoomTo(
tileset,
);
xt3d.TilesetPlugin.setTilesetHeight(tileset, 55);
})
.otherwise(function(error) {
console.log(error);
});
},
destroy() {
this.viewer.entities.removeAll();
this.viewer.imageryLayers.removeAll(true);
this.viewer.destroy();
}
}
xt3dInit.init("map3d");
</script>
</body>
</html>
预览地址
xt3d 在线预览地址