当前位置：网站首页>[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"
}
]
}
边栏推荐
- Redis哨兵模式配置文件详解
- mutillidae download and installation
- 使用IDEA连接TDengine服务器
- 作业8.4 进程间的通信 管道与信号
- [8.2] Code Source - [Currency System] [Coins] [New Year's Questions (Data Enhanced Edition)] [Three Stages]
- 请写出SparkSQL语句
- Flutter learning three-Flutter basic structure and principle
- 【cesium】3D Tileset 模型加载并与模型树关联
- [CISCN2019 South China Division]Web11
- 1068 Find More Coins
猜你喜欢
![[BJDCTF2020]EasySearch](/img/60/464de3bcdda876171b9f61ad31bff1.png)
[BJDCTF2020]EasySearch
Visibility of multi-column attribute column elements: display, visibility, opacity, vertical alignment: vertical-align, z-index The larger it is, the more it will be displayed on the upper layer
Develop your own node package
【cesium】加载并定位 3D Tileset
虚证、实证如何鉴别？
Flutter learning three-Flutter basic structure and principle
![【 8.4 】 source code - [math] [calendar] [delete library 】 【 is not a simple sequence (Bonus) 】](/img/b5/716627b370e489ccf320a86540f7ba.png)
【 8.4 】 source code - [math] [calendar] [delete library 】 【 is not a simple sequence (Bonus) 】
bytebuffer 使用demo
LeetCode：1403. 非递增顺序的最小子序列【贪心】
What is ASEMI photovoltaic diode, the role of photovoltaic diode
随机推荐
Day14 jenkins deployment
Flutter学习2-dart学习
The production method of the powered small sailboat is simple, the production method of the electric small sailboat
[Surveying] Quick Summary - Excerpt from Gaoshu Gang
ansible各个模块详解
Mysql's redo log detailed explanation
NPDP证书含金量高吗？跟PMP相比？
Talk about 20 common problems in data governance
Excel画图
Use IDEA to connect to TDengine server
1007 Climb Stairs (greedy | C thinking)
The first performance test practice, there are "100 million" a little nervous
4T硬盘剩余很多提示“No space left on device“磁盘空间不足
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?
What is the function of industrial-grade remote wireless transmission device?
uboot enable debug printing information
C language - vernacular to understand the original code, inverse code and complement code
1007 Climb Stairs （贪心 | C思维）
【cesium】元素高亮显示
雷克萨斯lm的安全性到底体现在哪里？一起来看看吧