当前位置：网站首页>【cesium】元素高亮显示
【cesium】元素高亮显示
2022-08-05 04:46:00 【顾鸟】
一. 介绍
两种高亮显示方式，第一种点击左侧树形结构的节点，第二种点击模型中要素
二. 效果
三. 实现
第一种点击左侧树形结构的节点
<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>
第二种点击模型中要素
<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
) {
// 清除之前的高亮元素
if (Cesium.defined(hightLighted.feature)) {
hightLighted.feature.color = hightLighted.originalColor;
hightLighted.feature = undefined;
}
// 选择新要素
const pickedFeature = viewer.scene.pick(event.position);
if (!Cesium.defined(pickedFeature)) {
return;
}
// 存储选中要素的信息
hightLighted.feature = pickedFeature;
Cesium.Color.clone(pickedFeature.color, hightLighted.originalColor);
// 高亮选中元素
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"
}
]
}
边栏推荐
- 概率论的学习和整理8： 几何分布和超几何分布
- DEJA_VU3D - Cesium功能集 之 058-高德地图纠偏
- [8.1] Code Source - [The Second Largest Number Sum] [Stone Game III] [Balanced Binary Tree]
- 1007 Climb Stairs (greedy | C thinking)
- The most comprehensive exam questions for software testing engineers in 2022
- UE4 opens door via interaction (keyboard key)
- Use IDEA to connect to TDengine server
- Ali's local life's single-quarter revenue is 10.6 billion, Da Wenyu's revenue is 7.2 billion, and Cainiao's revenue is 12.1 billion
- 程序开发的一些常规套路（一）
- Cron(Crontab)--使用/教程/实例
猜你喜欢
Feature preprocessing
How to solve the three major problems of bank data collection, data supplementary recording and index management?
8.04 Day35-----MVC三层架构
What is ASEMI photovoltaic diode, the role of photovoltaic diode
How to identify false evidence and evidence?
The log causes these pits in the thread block, you have to guard against
What is the function of industrial-grade remote wireless transmission device?
![【 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) 】
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
四位数显表头设计
随机推荐
How to solve complex distribution and ledger problems?
Machine Learning Overview
[MRCTF2020]Ezpop(详解)
MySql index learning and use; (I think it is detailed enough)
mutillidae下载及安装
write the story about us
动力小帆船制作方法简单,电动小帆船制作方法
BI业务分析思维：现金流量风控分析（二）信用、流动和投资风险
DEJA_VU3D - Cesium功能集 之 059-腾讯地图纠偏
雷克萨斯lm的安全性到底体现在哪里？一起来看看吧
How to solve the three major problems of bank data collection, data supplementary recording and index management?
狗仔队:表面编辑多视点图像处理
[BSidesCF 2019]Kookie
Cron(Crontab)--使用/教程/实例
[Nine Lectures on Backpacks - 01 Backpack Problems]
多列属性column元素的可见性：display、visibility、opacity、垂直对齐方式：vertical-align、z-index 越大越显示在上层
ansible各个模块详解
How to wrap markdown - md file
ESP32 485光照度
Learning and finishing of probability theory 8: Geometric and hypergeometric distributions