Cesium|xt3d 自定义html标注（含编辑）
Cesium|xt3d 自定义html标注（含编辑）
- 效果
- 代码
- 预览地址
效果
代码
<!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/[email protected]/Build/Cesium/Cesium.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/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(0)">简单文本</button>
<button onclick="drawActivate(1)">渐变文本</button>
<button onclick="clearDraw()">清空</button>
<button onclick="save()">保存</button>
<div class="tip-item">点击“简单文本”按钮后在场景中鼠标左键点击添加标注对象</div>
<div class="tip-item">点击“渐变文本”按钮后在场景中鼠标左键点击添加渐变色标注对象</div>
<div class="tip-item">选中对象后按钮底部的小圆点进行位置的拖动</div>
<div class="tip-item">点击“清空”按钮删除所有标注</div>
<div class="tip-item">点击“保存”按钮将所有标注保存到json文件（支持从json文件导入）</div>
</div>
</div>
<script>
let xt3dInit = {
init(el) {
this.initViewer(el);
this.load3dtiles();
this.initEntityDraw();
this.labelLayer = new xt3d.LabelPlotting.HtmlPlot.PlotLayer(this.viewer);
this.labelLayer.setPlotSelectable(true);
this.htmlPlotEdit = new xt3d.LabelPlotting.HtmlPlot.PlotEdit(
xt3dInit.viewer,
xt3dInit.labelLayer
);
this.initDatas();
},
//初始化viewer
initViewer(el) {
this.viewer = new Cesium.Viewer(el, {
infoBox: false,
selectionIndicator: false,
navigation: false,
animation: false,
timeline: false,
baseLayerPicker: false,
geocoder: false,
homeButton: false,
sceneModePicker: false,
navigationHelpButton: false,
shouldAnimate: true,
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;
},
//加载数据
initDatas() {
fetch("/data.xt3d.cn/assets/data/labelplotting/1602424629194.json").then(res => {
return res.json();
}).then(res => {
let features = res.features;
features.forEach(feature => {
this.labelLayer.addPlot(feature);
})
}).catch(err => {
console.log(err)
})
},
//初始化绘制
initEntityDraw() {
this.entityDraw = new xt3d.Map3dTools.EntityDraw(this.viewer);
this.entityDraw.DrawEndEvent.addEventListener((result, positions) => {
result.remove();
this.addLabel(positions[0]);
})
},
//添加标注
addLabel(position) {
const plotType = this.labelType == 0 ? "simplelabel" : "gradientslabel";
var geoFeature = {
type: "Feature",
properties: {
plotCode: xt3d.LabelPlotting.getPlotCode(),
plotType: plotType,
attr: {
label: "标注内容",
}
},
geometry: {
type: "Point",
coordinates: xt3d.LabelPlotting.cartesian3ToCoordinates(position)
}
};
this.labelLayer.addPlot(geoFeature);
},
//激活绘制工具
drawActivate(type) {
this.labelType = type;
this.entityDraw.activate("Point");
},
//保存内容
savePlots() {
const features = [];
this.labelLayer.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.labelLayer.clear();
},
//加载3dtiles数据
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 在线预览地址