一、简介
Cesium三维模型3dtiles,然后添加鼠标交互事件进行查询,弹出信息框。
二、示例代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./css/common.css">
<title>
三维模型查询
</title>
<script src="./js/config.js"></script>
<script src="./scripts/vue.min.js"></script>
<script type="text/javascript" src="../anov-gis-sdk/index.js"></script>
<link rel="stylesheet" href="../anov-gis-sdk/index.css">
</head>
<body>
<div id="cesiumContainer">
</div>
</body>
</html>
<script>
var app = new Vue({
el: '#cesiumContainer',
mounted() {
// 初始化
window.viewer = new ANOVGIS.Viewer("cesiumContainer", {
vrButton: false,
baseLayerPicker: true,
fullscreenButton: true,
homeButton: true,
sceneModePicker: true,
navigationHelpButton: true
});
ANOVGIS.WidgetsControl.showAllControls({
});
//影像
var baselayer = ANOVGIS.ImageryLayerFactory.createImageryLayer(
ANOVGIS.ImageryType.TDT, {
style: "img",
key: globalConfig.tdtKey
}
);
viewer.addBaseImageryLayer(baselayer);
// 三维模型加载
let layer = new ANOVGIS.TilesetLayer();
viewer.addLayer(layer);
let tileset = new ANOVGIS.Tileset({
url: 'http://172.16.223.165/gis-share/beijingchouxi/tileset.json',
highlight: {//鼠标滑过样式
color: "#ff0000"
},
selectedHighlight:{//点击选中效果
color: "rgba(255,0.0,255,0.8)"
}
})
// 设置模型样式
const style = new ANOVGIS.TilesetStyle()
style.color = {
conditions: [
['Number(${floor}) >= 40', 'rgba(45, 0, 75, 0.5)'],
['Number(${floor}) >= 30', 'rgb(102, 71, 151)'],
['Number(${floor}) >= 20', 'rgb(170, 162, 204)'],
['Number(${floor}) >= 10', 'rgb(248, 176, 87)'],
['Number(${floor}) >= 5', 'rgb(198, 106, 11)'],
['true', 'rgb(127, 59, 8)'],
],
}
tileset.setStyle(style)
layer.addGraphic(tileset);
//绑定点击弹框
layer.bindPopup({
viewer: viewer,
showTitle: true,
useDefaultHtmlTemplate: true,//用默认模板
});
layer.addEventListener(ANOVGIS.MouseEventType.CLICK, (e) => {
let infoData = {
title: e.feature.getProperty('name1'),
fieldsMap: [
{
nameC: '名称:',
value: e.feature.getProperty('name1')
}, {
nameC: '楼层:',
value: e.feature.getProperty('floor')
}]
}
layer.popup.show(e.position, infoData);
console.log(e);
})
// 绑定鼠标MOUSE_MOVE事件
layer.bindTooltip({
viewer: viewer,
showTitle: true,
offsetY: '-10',
useDefaultHtmlTemplate: true,//用默认模板
});
layer.addEventListener(ANOVGIS.MouseEventType.MOUSE_MOVE, (e) => {
let infoData = {
title: e.feature.getProperty('name1'),
fieldsMap: [
{
nameC: '名称:',
value: e.feature.getProperty('name1')
}, {
nameC: '楼层:',
value: e.feature.getProperty('floor')
}]
}
layer.tooltip.show(e.position, infoData);
})
// 定位
viewer.flyToTileset(tileset,2,0.5,-35);
}
});
</script>