FBI WARNING！
五一假期已结束
不知道xdm都去哪里玩了？给点游玩的建议，我十一假期参考一下啊哈哈……
В прошлой статье мы сначала говорили о нескольких основных элементах карты, включая точки, линии и поверхности, а затем узнали об основных системах координат, используемых в двухмерных и трехмерных картах, и методах их преобразования. Наконец, мы вкратце рассказали о Cesium Сущности Viewer и Camera соответствуют окну и камере. Далее, давайте приступим к практике и узнаем, как добавлять точечные, линейные и полигональные объекты на нашу землю. Если в статье есть какая-либо ошибка, пожалуйста, укажите на нее в области комментариев, смиренно попросите совета и вовремя исправьте ее!
Сущность
В Cesium существует несколько способов добавления объектов, например, использование Entity для добавления и Primitive для добавления. Последний ближе к нижнему слою движка рендеринга, поэтому я не буду его сегодня представлять. Используя Entity в Cesium, можно добавить множество фигур: точки, линии, поверхности, трубы, цилиндры и т. д. на официальном сайте Cesium.SandcastleВ нем есть соответствующие примеры, вы можете сами проверить, если вам это нужно.
точкаBillboard
В Цезии точка черезBillboardСпособ представления, как следует из названия, представляет собой рекламный щит.BillboardУказанное изображение, обращенное к экрану, будет сгенерировано в указанных координатах. Без лишних слов давайте посмотрим на код:
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(121.54035, 38.92146,100),
billboard: {
image: require("@/views/images/blueCamera.png"), // default: undefined
show: true, // default
pixelOffset: new Cesium.Cartesian2(0, -50), // default: (0, 0)
eyeOffset: new Cesium.Cartesian3(0.0, 0.0, 0.0), // default
horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // default
verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // default: CENTER
scale: 2.0, // default: 1.0
color: Cesium.Color.LIME, // default: WHITE
rotation: Cesium.Math.PI_OVER_FOUR, // default: 0.0
alignedAxis: Cesium.Cartesian3.ZERO, // default
width: 100, // default: undefined
height: 25, // default: undefined
},
});
Я вижу это здесь.ViewerВнизentitiesследующий методadd, сущность добавляется вviewerВнутри.
Я присвоил ему небольшое значение высоты во время преобразования координат, чтобы сделать его более полным. Эффект следующий
НитьPolyline
такой жеBillboardТочно так же линия проходит черезviewer.add()Метод добавлен. Затем сначала поместите код:
viewer.entities.add({
// name:entity.name,
polyline: {
positions: Cesium.Cartesian3.fromDegreesArray([121.534575,38.926131, 121.537579,38.92543,121.541784,38.924578,121.543973,38.924144,121.545947,38.923944]),
width: 2,
material: Cesium.Color.DARKORANGE.withAlpha(0.7),
// clampToGround: true,
// show: true,
},
});
positionsНабор декартовых таблиц необходим для рисования линий,widthширина линии,materialэто материал линии (это ключ к нашей генерации динамических линий),clamToGroundЭто выбор того, будет ли линия рендериться на земле.На базовой карте с ландшафтом режим заземления будет отрисовываться против колебаний рельефа, а абсолютная высота будет проходить через рельеф.showЭто отображается.
Базовый эффект (чтобы эффект хорошо отображался, было изменено темное базовое изображение)
В это время вы, возможно, сказали, что эта линия слишком уродлива.Я думаю, что линии других людей все светятся (вы говорите об Ультрачеловеке? Действительно ли Ультрачеловек в этом мире?). Не волнуйтесь, я дам идею для достижения люминесценции.Конечно, идея не только здесь, и заинтересованные друзья могут поискать больше в Интернете. Код включен!
// 在上边添加过的线基础上我们再添加一条动效线
viewer.entities.add({
// name:entity.name,
polyline: {
positions: Cesium.Cartesian3.fromDegreesArray([
121.534575,
38.926131,
121.537579,
38.92543,
121.541784,
38.924578,
121.543973,
38.924144,
121.545947,
38.923944,
]),
width: 4, // 线的宽度，像素为单位
material: new Cesium.PolylineTrailMaterialProperty({
// 尾迹线材质
color: Cesium.Color.GOLD,
trailLength: 0.4,
period: 3.0,
}),
},
});
Эффект следующий
Эффект линии выглядит хорошо, но если это дорожная сеть внизу, эффект на самом деле хороший.
Я считаю, что умные друзья нашли это. Эй, вы добавляете точку. Строка использует метод добавления, и переданная структура параметров в основномpositionи соответствующий объект. Да, на самом деле мы можем инкапсулировать его на основе такой структуры.EntityКласс объекта и последующие второго редакционных сущностей ничьей, не описаны здесь.
лапшаPolygon
Картинка выше на самом деле показывает нам элемент поверхности, вы наверняка подумаете, что я говорю о зеленой области, рисунок мелкий! На самом деле эти здания — лица, но мы растягиваем их на определенную высоту, чтобы сформировать так называемые лица. Добавляется так же, как точки и линии, поэтому не буду вдаваться в подробности, просто перейду к коду.
viewer.entities.add({
polygon: {
hierarchy: Cesium.Cartesian3.fromDegreesArray([
121.539208,
38.924962,
121.539176,
38.924737,
121.540195,
38.924486,
121.540281,
38.924737,
]),
extrudedHeight: 50,
material: Cesium.Color.WHITE,
// closeTop: false,
// closeBottom: false,
},
});
Смотрите эффект:
Это всего лишь способ генерировать здания, а также одно из многих применений поверхности.Я отвечаю только за бросание кирпичей, а все - нефрит.
Нажмите, чтобы получить лицо, рекламный щит
В проекте мы не можем просто представить перед глазами эти точки, линии и поверхности.Наши элементы должны нести соответствующие данные или атрибуты.Нам нужно получать данные, атрибуты или пользовательские операции, кликая на соответствующие элементы.
давайте пройдемсяScreenSpaceEventHandlerзарегистрировать глобальныйhandlerЗатем используйтеsetInputActionрегистрLEFT_CLICKСобытие щелчка левой кнопкой мыши, в его обратном вызове, мы можем получить объект щелчка мыши. затем пройтиviewer.scene.pickметод(场景拾取，返回在场景中该窗口位置对应的第一个图元对象，如果该位置没有任何物体则返回undefined), передать координаты и получить объект позиции, в которой щелкнули.
handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction((e) => {
var pick = viewer.scene.pick(e.position);
console.log(e , pick);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
Посмотрим, что напечатано
eДля экрана двумерная координатная группа нашей мыши на экране,pick— возвращаемый примитивный объект, гдеidсущность, которую мы подобрали.
полный код
<template>
<div class="container">
<div id="cesiumContainer"></div>
</div>
</template>
<script>
var viewer, camera, handler;
export default {
data() {
return {};
},
mounted() {
this.init();
},
methods: {
init() {
viewer = new Cesium.Viewer("cesiumContainer", {});
var layer = viewer.imageryLayers.addImageryProvider(
new Cesium.UrlTemplateImageryProvider({
url:
"https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
})
);
// 初始化场景位置
viewer.scene.camera.flyTo({
// 初始化相机经纬度
destination: new Cesium.Cartesian3.fromDegrees(
121.54035,
38.92146,
2000
),
orientation: {
heading: Cesium.Math.toRadians(0.0),
pitch: Cesium.Math.toRadians(-25.0), //从上往下看为-90
roll: 0,
},
});
handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction((e) => {
var pick = viewer.scene.pick(e.position);
console.log(e, pick);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
this.addBillboard();
this.addPolyline();
this.addPolygon();
},
addBillboard() {
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(121.54035, 38.92146, 50),
billboard: {
image: require("./images/blueCamera.png"), // default: undefined
// show: true, // default
// pixelOffset: new Cesium.Cartesian2(0, -50), // default: (0, 0)
// eyeOffset: new Cesium.Cartesian3(0.0, 0.0, 0.0), // default
// horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // default
// verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // default: CENTER
// scale: 2.0, // default: 1.0
// color: Cesium.Color.LIME, // default: WHITE
// rotation: Cesium.Math.PI_OVER_FOUR, // default: 0.0
// alignedAxis: Cesium.Cartesian3.ZERO, // default
// width: 100, // default: undefined
// height: 25, // default: undefined
},
});
},
addPolyline() {
viewer.entities.add({
polyline: {
positions: Cesium.Cartesian3.fromDegreesArray([
121.534575,
38.926131,
121.537579,
38.92543,
121.541784,
38.924578,
121.543973,
38.924144,
121.545947,
38.923944,
]),
width: 4,
material: Cesium.Color.DARKORANGE.withAlpha(0.3),
// clampToGround: true,
// show: true,
},
});
viewer.entities.add({
// name:entity.name,
polyline: {
positions: Cesium.Cartesian3.fromDegreesArray([
121.534575,
38.926131,
121.537579,
38.92543,
121.541784,
38.924578,
121.543973,
38.924144,
121.545947,
38.923944,
]),
width: 4, // 线的宽度，像素为单位
material: new Cesium.PolylineTrailMaterialProperty({
// 尾迹线材质
color: Cesium.Color.GOLD,
trailLength: 0.4,
period: 3.0,
}),
// clampToGround: true,
// show: true,
},
});
},
addPolygon() {
viewer.entities.add({
polygon: {
hierarchy: Cesium.Cartesian3.fromDegreesArray([
121.539208,
38.924962,
121.539176,
38.924737,
121.540195,
38.924486,
121.540281,
38.924737,
]),
extrudedHeight: 50,
material: Cesium.Color.WHITESMOKE,
// closeTop: false,
// closeBottom: false,
},
});
},
},
};
</script>
<style lang="scss" scoped>
</style>
наконец
В этих статьях были представлены самые основные операции, связанные с цезием, и мои кирпичи также были выброшены.Далее вам нужно вырезать нефрит самостоятельно. В дальнейшем я также разберу клики по точкам и граням, и классы, которые просто инкапсулируют несколько общих функций. Все могут общаться и прогрессировать вместе.Ведь я тоже начинающий Cesium ^-^.
приложение
[3D ГИС-визуализация] Реализация умного города на основе Vue+Cesium+Supermap (1)
[3D ГИС-визуализация] Реализация умного города на основе Vue+Cesium+Supermap (2)
[На основе] трехмерной ГИС-визуализации Vue + Cesium + Supermap умный город (четыре)