当前位置：网站首页>【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"
}
]
}
边栏推荐
猜你喜欢
![[MRCTF2020]Ezpop(详解)](/img/19/920877ca36d1eda8d118637388ab05.png)
随机推荐
日志导致线程Block的这些坑，你不得不防
Application status of digital twin technology in power system
[Geek Challenge 2019]FinalSQL
bytebuffer use demo
DEJA_VU3D - Cesium功能集 之 057-百度地图纠偏
4T硬盘剩余很多提示“No space left on device“磁盘空间不足
8.04 Day35-----MVC three-tier architecture
Why did you start preparing for the soft exam just after the PMP exam?
No regrets, the appium automation environment is perfectly built
Haproxy搭建Web群集
为什么刚考完PMP，就开始准备软考了？
How to identify false evidence and evidence?
There are several common event handling methods in Swing?How to listen for events?
How to deal with DNS hijacking?
DEJA_VU3D - Cesium功能集 之 056-智图Arcgis地图纠偏
How to solve the three major problems of bank data collection, data supplementary recording and index management?
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
[BJDCTF2020]EasySearch
[Nine Lectures on Backpacks - 01 Backpack Problems]
多列属性column元素的可见性：display、visibility、opacity、垂直对齐方式：vertical-align、z-index 越大越显示在上层