当前位置：网站首页>[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"
}
]
}
边栏推荐
- 特征预处理
- 服务器磁盘阵列
- 小程序_动态设置tabBar主题皮肤
- LAB 信号量实现细节
- how to measure distance from point to face in creo
- Dephi reverse tool Dede exports function name MAP and imports it into IDA
- Excel Paint
- Feature preprocessing
- A 35-year-old software testing engineer with a monthly salary of less than 2W, resigns and is afraid of not finding a job, what should he do?
- mysql数据库表什么字段类型的存储长度最大？
猜你喜欢
What is ASEMI photovoltaic diode, the role of photovoltaic diode
Flutter学习5-集成-打包-发布
There are a lot of 4T hard drives remaining, prompting "No space left on device" insufficient disk space
App rapid development and construction experience: the importance of small programs + custom plug-ins
for..in和for..of的区别
how to measure distance from point to face in creo
University Physics---Particle Kinematics
【cesium】3D Tileset 模型加载并与模型树关联
开发属于自己的node包
u-boot调试定位手段
随机推荐
使用IDEA连接TDengine服务器
Develop your own node package
JeeSite New Report
What is the function of industrial-grade remote wireless transmission device?
[BJDCTF2020]EasySearch
密码学系列之:PEM和PKCS7,PKCS8,PKCS12
软件管理rpm
Shell（4）条件控制语句
C语言-大白话理解原码,反码和补码
[MRCTF2020] PYWebsite
淘宝账号如何快速提升到更高等级
Excel画图
AUTOCAD——标注关联
Dephi逆向工具Dede导出函数名MAP导入到IDA中
The first performance test practice, there are "100 million" a little nervous
【转】什么是etcd
作业8.4 进程间的通信 管道与信号
Error creating bean with name ‘configDataContextRefresher‘ defined in class path resource
ESP32 485光照度
特征预处理