效果
![在这里插入图片描述](https://img-blog.csdnimg.cn/016e54fbb2434ff480f9f273d106d4d8.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAeHQzZA==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
代码
<!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://unpkg.com/cesium@1.84.0/Build/Cesium/Cesium.js"></script>
<link rel="stylesheet" href="https://unpkg.com/cesium@1.84.0/Build/Cesium/Widgets/widgets.css">
<script src='http://www.xt3d.cn/libs/turf.min.js'></script>
<!-- 引入xt3d -->
<script src="http://www.xt3d.cn/xt3dlib/xt3d.min.js"></script>
<style>
html,
body,
#map3d {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
.btn-container {
position: absolute;
left: 10px;
top: 90px;
padding: 10px 15px;
border-radius: 4px;
border: 1px solid rgba(128, 128, 128, 0.5);
color: #ffffff;
background: rgba(0, 0, 0, 0.4);
box-shadow: 0 3px 14px rgb(128 128 128 / 50%);
max-width: 380px;
}
button {
background: transparent;
border: 1px solid #00d0ffb8;
color: white;
padding: 7px 9px;
border-radius: 2px;
margin: 3px;
cursor: pointer
}
.tip-item {
margin: 2px 0px;
padding: 5px 1px;
}
</style>
</head>
<body>
<div id="map3d"></div>
<div class="btn-container">
<button onclick="drawActivate('polygon')">面</button>
<button onclick="drawActivate('circle')">正圆</button>
<button onclick="drawActivate('ellipse')">椭圆</button>
<button onclick="drawActivate('sector')">扇形</button>
<button onclick="drawActivate('rectangle')">矩形</button>
<button onclick="drawActivate('closedcurve')">曲线面</button>
<button onclick="drawActivate('finearrow')">直箭头</button>
<button onclick="drawActivate('assaultdirection')">突击方向</button>
<button onclick="drawActivate('attackarrow')">进攻方向</button>
<button onclick="drawActivate('tailedattackarrow')">进攻方向尾</button>
<button onclick="drawActivate('gatheringplace')">集结地</button>
<button onclick="drawActivate('doublearrow')">钳击</button>
<button onclick="drawActivate('squadcombat')">分队战斗</button>
<button onclick="drawActivate('tailedsquadcombat')">分队战斗尾</button>
<div>
<button onclick="clearDraw()">清空</button>
<button onclick="save()">保存</button>
<div class="tip-item">绘制完成后点击“保存”按钮将绘制的内容保存到json文件(支持从json文件加载标绘内容)</div>
</div>
</div>
<script>
let xt3dInit = {
init(el) {
this.initViewer(el);
this.load3dtiles();
this.initPlot();
this.initDatas();
},
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"
})
});
this.viewer.scene.globe.depthTestAgainstTerrain = true;
},
initPlot() {
this.militaryPlotLayer = new xt3d.LabelPlotting.MilitaryPlot.PlotLayer(this.viewer);
this.militaryPlotLayer.setPlotSelectable(true);
this.plotDraw = new xt3d.LabelPlotting.MilitaryPlot.PlotDraw(this.viewer);
this.plotDraw.PlotDrawEndEvent.addEventListener((drawPlot, plotType) => {
drawPlot.remove();
this.militaryPlotLayer.addPlot(drawPlot.toGeoJson());
});
this.plotEdit = new xt3d.LabelPlotting.MilitaryPlot.PlotEdit(this.viewer, this.militaryPlotLayer);
this.plotEdit.activate();
this.plotEdit.PlotEditEndEvent.addEventListener(editPlot => {
console.log(editPlot);
console.log("编辑结束");
});
},
drawActivate(plotType) {
this.plotDraw.activate(plotType);
},
initDatas() {
fetch("/data.xt3d.cn/assets/data/labelplotting/1602419460829.json").then(res => {
return res.json();
}).then(res => {
let features = res.features;
features.forEach(feature => {
this.militaryPlotLayer.addPlot(feature);
})
}).catch(err => {
console.log(err)
})
},
savePlots() {
const features = [];
this.militaryPlotLayer.plots.forEach(plot => {
features.push(plot.toGeoJson());
})
let geojson = {
"type": "FeatureCollection",
"features": features
}
let data = JSON.stringify(geojson);
var blob = new Blob([data], {
type: 'text/json'
});
var e = document.createEvent('MouseEvents');
var a = document.createElement('a');
a.download = new Date().getTime() + ".json";
a.href = window.URL.createObjectURL(blob);
a.dataset.downloadurl = ['text/json', a.download, a.href].join(':');
e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
a.dispatchEvent(e);
},
clear() {
this.militaryPlotLayer.clear();
},
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");
function drawActivate(type) {
xt3dInit.drawActivate(type);
}
function clearDraw() {
xt3dInit.clear();
}
function save() {
xt3dInit.savePlots();
}
</script>
</body>
</html>
预览地址
xt3d 在线预览地址