当前位置：网站首页>[cesium] element highlighting
[cesium] element highlighting
2022-08-05 04:53:00 【Gu Bird】
一. 介绍
Two ways of highlighting,The first is to click on the node of the tree structure on the left,The second is to click on the elements in the model
二. 效果
三. 实现
The first is to click on the node of the tree structure on the left
<template>
<div class="viewer">
<vc-viewer @ready="ready">
<vc-layer-imagery>
<vc-provider-imagery-tianditu
protocol="http"
map-style="img_w"
token="436ce7e50d27eede2f2929307e6b33c0"
:projectionTransforms="projectionTransforms"
></vc-provider-imagery-tianditu>
</vc-layer-imagery>
</vc-viewer>
<!-- tree -->
<a-tree
class="myTree"
:tree-data="treeData"
:replace-fields="replaceFields"
@select="onSelect"
>
</a-tree>
</div>
</template>
<script>
import {
update3dtilesMaxtrix } from "../utils";
import scenetree from "../assets/tiles/scenetree.json";
export default {
data() {
return {
mapStyle: "6",
ltype: "0",
projectionTransforms: {
from: "WGS84", to: "GCJ02" },
treeData: [],
replaceFields: {
children: "children", title: "name", key: "id" },
tileset: null
};
},
mounted() {
// tree 数据和默认勾选全部
this.treeData = scenetree.scenes[0].children;
},
methods: {
// 地图初始化
ready(cesiumInstance) {
const {
Cesium, viewer } = cesiumInstance;
window.$cesiumInstance = cesiumInstance;
window.Cesium = Cesium;
window.viewer = viewer;
this.loadTile();
},
// 加载 3dtiles 模型
loadTile() {
const {
Cesium, viewer } = window.$cesiumInstance;
const scene = viewer.scene; // 创建场景
// 向集合添加一个原语.
const tileset = scene.primitives.add(
new Cesium.Cesium3DTileset({
url: "http://120.27.150.252/sppmodel/1/tileset.json", // 还可以是json、http链接等
dynamicScreenSpaceError: true,
cullWithChildrenBounds: false,
skipLevels: 0,
maximumScreenSpaceError: 0,
})
);
this.tileset = tileset;
tileset.readyPromise
.then(function (tileset) {
// 坐标转换和定位
let params = {
tx: 117.227267, //模型中心X轴坐标（经度,单位：十进制度）
ty: 31.820567, //模型中心Y轴坐标（纬度,单位：十进制度）
tz: 0, //模型中心Z轴坐标（高程,单位：米）
rx: 0, //X轴（经度）方向旋转角度（单位：度）
ry: 0, //Y轴（纬度）方向旋转角度（单位：度）
rz: 0, //Z轴（高程）方向旋转角度（单位：度）
};
update3dtilesMaxtrix(tileset, params);
tileset.style = new Cesium.Cesium3DTileStyle({
color: {
conditions: [["true", 'color("#563624", 0.5)']],
},
});
const default_headingPitchRange = new Cesium.HeadingPitchRange(
0.3,
-0.2,
tileset.boundingSphere.radius * 2.0
);
viewer.flyTo(tileset, {
offset: default_headingPitchRange });
})
.catch(function (error) {
console.log(error);
});
},
// 点击树节点
onSelect(checkedKeys, info) {
let Cesium = window.Cesium;
let id = info.node.eventKey;
let conditionId = "${id} === " + `"${
id}"`;
this.tileset.style = new Cesium.Cesium3DTileStyle({
color: {
conditions: [
[conditionId, 'color("yellow", 1)'],
["true", 'color("#563624", 0.5)'],
],
},
});
},
},
};
</script>
<style>
.viewer {
width: 100%;
height: 100%;
}
.myTree {
position: fixed;
top: 10px;
left: 10px;
border: 1px solid #fff;
height: 90vh;
overflow-y: auto;
}
.ant-tree-title {
color: #fff;
}
.anticon,
.anticon-caret-down {
color: #fff !important;
}
</style>
The second is to click on the elements in the model
<template>
<div class="viewer">
<vc-viewer @ready="ready">
<vc-layer-imagery>
<vc-provider-imagery-tianditu
protocol="http"
map-style="img_w"
token="436ce7e50d27eede2f2929307e6b33c0"
:projectionTransforms="projectionTransforms"
></vc-provider-imagery-tianditu>
</vc-layer-imagery>
</vc-viewer>
</div>
</template>
<script>
import {
update3dtilesMaxtrix } from "../utils";
export default {
data() {
return {
mapStyle: "6",
ltype: "0",
projectionTransforms: {
from: "WGS84", to: "GCJ02" },
};
},
methods: {
// 地图初始化
ready(cesiumInstance) {
const {
Cesium, viewer } = cesiumInstance;
window.$cesiumInstance = cesiumInstance;
window.Cesium = Cesium;
window.viewer = viewer;
this.loadTile();
},
// 加载 3dtiles 模型
loadTile() {
const {
Cesium, viewer } = window.$cesiumInstance;
const scene = viewer.scene; // 创建场景
// 向集合添加一个原语.
const tileset = scene.primitives.add(
new Cesium.Cesium3DTileset({
url: "http://120.27.150.252/sppmodel/1/tileset.json", // 还可以是json、http链接等
dynamicScreenSpaceError: true,
cullWithChildrenBounds: false,
skipLevels: 0,
maximumScreenSpaceError: 0,
})
);
tileset.readyPromise
.then(function (tileset) {
// 坐标转换和定位
let params = {
tx: 117.227267, //模型中心X轴坐标（经度,单位：十进制度）
ty: 31.820567, //模型中心Y轴坐标（纬度,单位：十进制度）
tz: 0, //模型中心Z轴坐标（高程,单位：米）
rx: 0, //X轴（经度）方向旋转角度（单位：度）
ry: 0, //Y轴（纬度）方向旋转角度（单位：度）
rz: 0, //Z轴（高程）方向旋转角度（单位：度）
};
update3dtilesMaxtrix(tileset, params);
tileset.style = new Cesium.Cesium3DTileStyle({
color: {
conditions: [["true", 'color("#563624", 0.5)']],
},
});
// 高亮元素
const hightLighted = {
feautre: undefined,
originalColor: new Cesium.Color(),
};
viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(
event
) {
// Clears previously highlighted elements
if (Cesium.defined(hightLighted.feature)) {
hightLighted.feature.color = hightLighted.originalColor;
hightLighted.feature = undefined;
}
// select new feature
const pickedFeature = viewer.scene.pick(event.position);
if (!Cesium.defined(pickedFeature)) {
return;
}
// Stores information about the selected feature
hightLighted.feature = pickedFeature;
Cesium.Color.clone(pickedFeature.color, hightLighted.originalColor);
// Highlight the selected element
pickedFeature.color = Cesium.Color.YELLOW;
},
Cesium.ScreenSpaceEventType.LEFT_CLICK);
const default_headingPitchRange = new Cesium.HeadingPitchRange(
0.3,
-0.2,
tileset.boundingSphere.radius * 2.0
);
viewer.flyTo(tileset, {
offset: default_headingPitchRange });
})
.catch(function (error) {
console.log(error);
});
}
},
};
</script>
<style>
.viewer {
width: 100%;
height: 100%;
}
</style>
// update3dtilesMaxtrix
// let params = {
// tx: 120.257, //模型中心X轴坐标（经度,单位：十进制度）
// ty: 31.226, //模型中心Y轴坐标（纬度,单位：十进制度）
// tz: 2800, //模型中心Z轴坐标（高程,单位：米）
// rx: 0, //X轴（经度）方向旋转角度（单位：度）
// ry: 0, //Y轴（纬度）方向旋转角度（单位：度）
// rz: -1 //Z轴（高程）方向旋转角度（单位：度）
// };
export const update3dtilesMaxtrix = function (tileset, params) {
//旋转
let Cesium = window.Cesium
let mx = Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(params.rx));
let my = Cesium.Matrix3.fromRotationY(Cesium.Math.toRadians(params.ry));
let mz = Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(params.rz));
let rotationX = Cesium.Matrix4.fromRotationTranslation(mx);
let rotationY = Cesium.Matrix4.fromRotationTranslation(my);
let rotationZ = Cesium.Matrix4.fromRotationTranslation(mz);
//平移
let position = Cesium.Cartesian3.fromDegrees(params.tx, params.ty, params.tz);
let m = Cesium.Transforms.eastNorthUpToFixedFrame(position);
let scale = Cesium.Matrix4.fromUniformScale(0.85);
// //缩放
Cesium.Matrix4.multiply(m, scale, m);
//旋转、平移矩阵相乘
Cesium.Matrix4.multiply(m, rotationX, m);
Cesium.Matrix4.multiply(m, rotationY, m);
Cesium.Matrix4.multiply(m, rotationZ, m);
//赋值给tileset
tileset._root.transform = m;
// return m;
}
// scenetree.json
{
"scenes": [
{
"children": [
{
"id": "f7177163c833dff4b38fc8d2872f1ec6_0",
"name": "Plane003",
"sphere": [
-2177871.57241156,
4388573.82661331,
4070169.49724089,
301.964603253362
],
"type": "element"
},
{
"id": "6c8349cc7260ae62e3b1396831a8398f_0",
"name": "Plane004",
"sphere": [
-2177968.98564988,
4388526.30434503,
4070168.77700749,
18.6367508888525
],
"type": "element"
},
{
"id": "d9d4f495e875a2e075a1a4a6e1b9770f_0",
"name": "Box003",
"sphere": [
-2177956.41521193,
4388561.28516737,
4070152.29468792,
58.3900256451882
],
"type": "element"
},
{
"id": "67c6a1e7ce56d3d6fa748ab6d9af3fd7_0",
"name": "Box004",
"sphere": [
-2177940.31465816,
4388583.60174952,
4070126.62004876,
112.6862769332
],
"type": "element"
},
{
"id": "642e92efb79421734881b53e1e1b18b6_0",
"name": "Box005",
"sphere": [
-2177923.2448635,
4388589.05315064,
4070128.68435485,
19.015938897193
],
"type": "element"
},
{
"id": "f457c545a9ded88f18ecee47145a72c0_0",
"name": "Box007",
"sphere": [
-2177892.50910985,
4388600.3228433,
4070133.7188036,
24.3969130250895
],
"type": "element"
},
{
"id": "c0c7c76d30bd3dcaefc96f40275bdc0a_0",
"name": "Box008",
"sphere": [
-2177879.42042473,
4388605.62667992,
4070138.35543581,
36.4923693944789
],
"type": "element"
},
{
"id": "2838023a778dfaecdc212708f721b788_0",
"name": "Box009",
"sphere": [
-2177858.84968905,
4388613.8195555,
4070142.61756117,
44.4781903217667
],
"type": "element"
},
{
"id": "9a1158154dfa42caddbd0694a4e9bdc8_0",
"name": "Box010",
"sphere": [
-2177819.85389547,
4388625.33935913,
4070147.87422828,
52.7919680298997
],
"type": "element"
},
{
"id": "d82c8d1619ad8176d665453cfb2e55f0_0",
"name": "Box011",
"sphere": [
-2177827.8270523,
4388605.44053528,
4070163.87154112,
31.1277814007166
],
"type": "element"
},
{
"id": "a684eceee76fc522773286a895bc8436_0",
"name": "Box012",
"sphere": [
-2177826.47165405,
4388588.4391185,
4070189.07950585,
74.3639261708206
],
"type": "element"
},
{
"id": "b53b3a3d6ab90ce0268229151c9bde11_0",
"name": "Box025",
"sphere": [
-2177782.80873965,
4388602.18458208,
4070189.25905886,
59.0958449611839
],
"type": "element"
},
{
"id": "9f61408e3afb633e50cdf1b20de6f466_0",
"name": "Box027",
"sphere": [
-2177916.68671059,
4388571.74049088,
4070151.24281245,
26.1330640722622
],
"type": "element"
},
{
"id": "72b32a1f754ba1c09b3695e0cb6cde7f_0",
"name": "Box029",
"sphere": [
-2177826.69318369,
4388602.90255007,
4070174.33056677,
34.1543254212935
],
"type": "element"
},
{
"id": "66f041e16a60928b05a7e228a89c3799_0",
"name": "Box030",
"sphere": [
-2177871.68048543,
4388582.95511164,
4070181.59098084,
95.2397724618698
],
"type": "element"
},
{
"id": "093f65e080a295f8076b1c5722a46aa2_0",
"name": "UTypeStair005",
"sphere": [
-2177877.00732111,
4388579.36833145,
4070179.24494171,
79.5750131756141
],
"type": "element"
},
{
"id": "072b030ba126b2f4b2374f342be9ed44_0",
"name": "Box031",
"sphere": [
-2177893.79810055,
4388559.37585989,
4070176.42650707,
29.9518478201455
],
"type": "element"
},
{
"id": "7f39f8317fbdb1988ef4c628eba02591_0",
"name": "Box032",
"sphere": [
-2177928.14385483,
4388543.45740417,
4070176.32019193,
127.332016722429
],
"type": "element"
},
{
"id": "44f683a84163b3523afe57c2e008bc8c_0",
"name": "Box033",
"sphere": [
-2177933.63057177,
4388548.00202179,
4070166.17402462,
15.2669512093874
],
"type": "element"
},
{
"id": "03afdbd66e7929b125f8597834fa83a4_0",
"name": "Line041",
"sphere": [
-2177800.51923137,
4388601.54067244,
4070185.67182987,
66.2252902291046
],
"type": "element"
},
{
"id": "ea5d2f1c4608232e07d3aa3d998e5135_0",
"name": "Cylinder001",
"sphere": [
-2177867.58168231,
4388591.53105899,
4070182.5529312,
66.5026597261132
],
"type": "element"
},
{
"id": "fc490ca45c00b1249bbe3554a4fdf6fb_0",
"name": "对象001",
"sphere": [
-2177868.04599273,
4388592.44005641,
4070183.49299487,
66.9766626797845
],
"type": "element"
},
{
"id": "3295c76acbf4caaed33c36b1b5fc2cb1_0",
"name": "Sphere001",
"sphere": [
-2177867.44200117,
4388587.77415528,
4070190.1584251,
46.9814287030201
],
"type": "element"
},
{
"id": "735b90b4568125ed6c3f678819b6e058_0",
"name": "Sphere002",
"sphere": [
-2177865.79072534,
4388582.82608368,
4070189.98000546,
38.4659047549649
],
"type": "element"
},
{
"id": "a3f390d88e4c41f2747bfa2f1b5f87db_0",
"name": "Sphere003",
"sphere": [
-2177866.74836847,
4388588.12263532,
4070185.33263861,
40.8065299335501
],
"type": "element"
},
{
"id": "14bfa6bb14875e45bba028a21ed38046_0",
"name": "Sphere004",
"sphere": [
-2177867.42628017,
4388591.09259389,
4070183.44220655,
43.0470234996922
],
"type": "element"
},
{
"id": "7cbbc409ec990f19c78c75bd1e06f215_0",
"name": "Sphere006",
"sphere": [
-2177866.21319075,
4388590.35785231,
4070174.55994013,
29.8919789757402
],
"type": "element"
},
{
"id": "e2c420d928d4bf8ce0ff2ec19b371514_0",
"name": "对象002",
"sphere": [
-2177869.26300768,
4388594.89266678,
4070185.7828374,
61.0836754900489
],
"type": "element"
},
{
"id": "32bb90e8976aab5298d5da10fe66f21d_0",
"name": "Box035",
"sphere": [
-2177866.89630124,
4388594.78318618,
4070163.28195801,
29.4752002089092
],
"type": "element"
},
{
"id": "d2ddea18f00665ce8623e36bd4e3c7c5_0",
"name": "Plane007",
"sphere": [
-2177875.5241787,
4388577.9948076,
4070162.60021223,
326.386703844032
],
"type": "element"
},
{
"id": "ad61ab143223efbc24c7d2583be69251_0",
"name": "Box036",
"sphere": [
-2177874.78775759,
4388587.88624762,
4070185.07688666,
106.642457145352
],
"type": "element"
},
{
"id": "d09bf41544a3365a46c9077ebb5e35c3_0",
"name": "Plane008",
"sphere": [
-2177902.96009593,
4388576.865341,
4070153.03815406,
18.8665609278099
],
"type": "element"
},
{
"id": "fbd7939d674997cdb4692d34de8633c4_0",
"name": "对象003",
"sphere": [
-2177950.96051558,
4388568.05381408,
4070138.64365454,
38.8038027775678
],
"type": "element"
},
{
"id": "28dd2c7955ce926456240b2ff0100bde_0",
"name": "对象004",
"sphere": [
-2177891.92002361,
4388566.02953,
4070167.16849041,
0.864233546717325
],
"type": "element"
},
{
"id": "35f4a8d465e6e1edc05f3d8ab658c551_0",
"name": "对象005",
"sphere": [
-2177907.91595084,
4388560.4106843,
4070164.5823945,
13.797248396647
],
"type": "element"
},
{
"id": "d1fe173d08e959397adf34b1d77e88d7_0",
"name": "Box037",
"sphere": [
-2177907.10744322,
4388560.13806739,
4070166.45055801,
10.6648058767812
],
"type": "element"
},
{
"id": "f033ab37c30201f73f142449d037028d_0",
"name": "Box038",
"sphere": [
-2177784.14478628,
4388619.37691387,
4070167.5553729,
9.26124065940442
],
"type": "element"
},
{
"id": "43ec517d68b6edd3015b3edc9a11367b_0",
"name": "Plane009",
"sphere": [
-2177950.19296102,
4388566.33374746,
4070135.89040034,
39.362430571123
],
"type": "element"
},
{
"id": "9778d5d219c5080b9a6a17bef029331c_0",
"name": "对象006",
"sphere": [
-2177932.48952365,
4388541.88790154,
4070176.41153555,
102.434256876315
],
"type": "element"
},
{
"id": "fe9fc289c3ff0af142b6d3bead98a923_0",
"name": "对象007",
"sphere": [
-2177871.5265536,
4388573.73423268,
4070169.41086651,
302.343206773768
],
"type": "element"
},
{
"id": "68d30a9594728bc39aa24be94b319d21_0",
"name": "Cylinder003",
"sphere": [
-2177932.52871854,
4388541.98315488,
4070176.48710997,
102.355172931768
],
"type": "element"
}
],
"id": "45c48cce2e2d7fbdea1afc51c7c6ad26_0",
"name": "",
"sphere": [
-2177882.76988883,
4388592.59488211,
4070176.2321103,
364.099496126785
],
"type": "node"
}
]
}
边栏推荐
猜你喜欢
Flutter学习5-集成-打包-发布
Flutter learning 2-dart learning
二叉树基本性质+oj题解析
Excel画图
![[Surveying] Quick Summary - Excerpt from Gaoshu Gang](/img/35/e5c5349b8d4ccf9203c432a9aaee7b.png)
[Surveying] Quick Summary - Excerpt from Gaoshu Gang
Detailed explanation of Mysql's undo log
The role of DataContext in WPF
University Physics---Particle Kinematics
ansible各个模块详解
Dephi reverse tool Dede exports function name MAP and imports it into IDA
随机推荐
[Nine Lectures on Backpacks - 01 Backpack Problems]
bytebuffer put flip compact clear 方法演示
JeeSite New Report
Detailed explanation of each module of ansible
Analyses the mainstream across technology solutions
Shell（4）条件控制语句
Detailed explanation of Mysql's undo log
工业级远距离无线传输装置的功能有哪些？
How to quickly upgrade your Taobao account to a higher level
write the story about us
Flutter学习4-基本UI组件
概率论的学习和整理8： 几何分布和超几何分布
淘宝账号如何快速提升到更高等级
基于Web的商城后台管理系统的设计与实现
How to identify false evidence and evidence?
[Geek Challenge 2019]FinalSQL
u-boot中的u-boot,dm-pre-reloc
Machine Learning Overview
狗仔队:表面编辑多视点图像处理
Develop your own node package