Cesium 通过primitive 添加垂直图片资源

最新推荐文章于 2024-08-30 13:25:12 发布
最新推荐文章于 2024-08-30 13:25:12 发布
阅读量3.8k 收藏 16
点赞数
分类专栏： Cesium 文章标签： primitive 垂直地面 图片素材
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/moyebaobei1/article/details/106790779
版权

实际Cesium 项目中添加了部分贴地的资源。资源类型有图片，gltf或者glb的模型。这里简单比较一下primitive 和entity。

primitive 基于比较底层的webgl技术，进行渲染资源，所以对于很多自定义的效果支持比较好，灵活度比较高，带来的开销就是API复杂，参数多，单独相对大。

entity， 是对primitive的封装，操作简单，一般的效果都能满足。

本次项目中是为了通过坐标系，变换实体模型对象。目前知道的就是通过primitive加进去的模型，支持坐标变换。其他的应该也有，但是没接触到。

先看一下效果

其实有两种思路处理这个问题，一种是做一个glb的模型，另一外一种是通过图片作为材质创建primitive对象。实际验证的效果是通过glb模型创建添加的资源，可以实现坐标系的编辑，通过图片作为材质创建的primitive对象，无法完成坐标变换。调试发现是因为图片添加的primitive modelMatrix 为空。可能也和我操作有关，我亲自测试失败了。

作为glb模型添加

var targetPosition = Cesium.Cartesian3.fromDegrees(pos[0], pos[1], pos[2] + 0.5);
    var headingPitchRoll = new Cesium.HeadingPitchRoll(0, 0, 0);
    var modelMatrix = new Cesium.Matrix4();
    var modelEntity;
    Cesium.Transforms.headingPitchRollToFixedFrame(targetPosition, headingPitchRoll, Cesium.Ellipsoid.WGS84, Cesium.Transforms.eastNorthUpToFixedFrame, modelMatrix);
    window.setTimeout(function() {
        modelEntity = viewer.scene.primitives.add(Cesium.Model.fromGltf({
            id: src_manager._GenGuid("3d_geo_"),
            name: name,
            url: url,
            modelMatrix: modelMatrix,
            scale: 2,
            colorBlendMode: Cesium.ColorBlendMode.HIGHLIGHT
        }));
        modelEntity.readyPromise.then(function(modeltemp) {
        });
    }, 500);

作为图片添加的primitive对象，参考链接https://zhuanlan.zhihu.com/p/41862338

function addDevImg(pos, size, url) {
    var dimensions = new Cesium.Cartesian3(size, size, 1.0);
    var positionOnEllipsoid = Cesium.Cartesian3.fromDegrees(parseFloat(pos[0]), parseFloat(pos[1]));
    var translateMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(positionOnEllipsoid);
    var rotationYMatrix = Cesium.Matrix4.fromRotationTranslation(Cesium.Matrix3.fromRotationY(Cesium.Math.toRadians(120.0)));
    var scaleMatrix = Cesium.Matrix4.fromScale(dimensions);

    var planeYModelMatrix = new Cesium.Matrix4();
    Cesium.Matrix4.multiply(translateMatrix, rotationYMatrix, planeYModelMatrix);
    Cesium.Matrix4.multiply(planeYModelMatrix, scaleMatrix, planeYModelMatrix);

    createPlane(planeYModelMatrix, new Cesium.Color(0.0, 1.0, 0.0, 1.0));

    function createPlane(planeModelMatrix, color) {
        // 创建平面
        /*var planeGeometry = new Cesium.PlaneGeometry({
            vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
        });*/
        var planeGeometry = new Cesium.PlaneGeometry();

        var planeGeometryInstance = new Cesium.GeometryInstance({
            geometry: planeGeometry,
            modelMatrix: planeModelMatrix,
        });

        var material = new Cesium.Material({
            fabric: {
                type: "DiffuseMap",
                uniforms: {
                    image: url,
                },
            },
        });
        var model = viewer.scene.primitives.add(new Cesium.Primitive({
            geometryInstances: planeGeometryInstance,
            appearance: new Cesium.MaterialAppearance({
                closed: false,
                //translucent: false,
                material: material
            })
        }));
    }
}

 

通过坐标系拾取模型对象进行坐标变换。

function rotateTranslation(viewer) {
    //handler && handler.destroy();			
    var timeoutID = null;
    if (!window.roate_handler) {
        window.roate_handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
    }
    //var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
    var tooltip;
    window.roate_handler.setInputAction(function(movement) {
        tooltip = document.getElementById("toolTip");
        tooltip.innerHTML = '<p style="color:red;font-size:16px;">单击选择单体模型</p>';
        tooltip.style.display = "block";
        tooltip.style.left = movement.endPosition.x + 3 + "px";
        tooltip.style.top = movement.endPosition.y - 25 + "px";
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
    //鼠标左击
    window.roate_handler.setInputAction(function(movement) {
        if (timeoutID != null) {
            clearTimeout(timeoutID);
        }
        var picked = viewer.scene.pick(movement.position);
        if (Cesium.defined(picked)) {
            if (picked.primitive) {
                var model = picked.primitive;
                var scale = model.boundingSphere.radius;
                timeoutID = window.setTimeout(function() {
                    if (window.axisModel) {
                        viewer.scene.primitives.remove(window.axisModel);
                    }
                    var axisModel = viewer.scene.primitives.add(Cesium.Model.fromGltf({
                        url: '../../Build/DECore/models/TransformGizmo_Tex12.gltf',
                        modelMatrix: model.modelMatrix,
                        scale: 2,
                        colorBlendMode: Cesium.ColorBlendMode.HIGHLIGHT
                    }));
                    if (axisModel) {
                        window.axisModel = axisModel;
                        tooltip.style.display = "none";
                        //旋转平移
                        rotateAndTranslation(viewer, model, axisModel);
                    }
                }, 250);
            }
        }
        clearAxisHandler = function(e) {
            clearTimeout(timeoutID);
            window.roate_handler = window.roate_handler && window.roate_handler.destroy();
            // downHandler = downHandler && downHandler.destroy();
            if (window.axisModel) {
                viewer.scene.primitives.remove(window.axisModel);
            }
            window.axisModel = undefined;
            tooltip.style.display = "none";
        };
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    window.roate_handler.setInputAction(function(movement) {
        clearTimeout(timeoutID);
        window.roate_handler = window.roate_handler && window.roate_handler.destroy();
        // downHandler = downHandler && downHandler.destroy();
        if (window.axisModel) {
            viewer.scene.primitives.remove(window.axisModel);
        }
        window.axisModel = undefined;
        tooltip.style.display = "none";

    }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
}

function rotateAndTranslation(viewer, model, axisModel) {
    // 事件监控
    if (!window.roate_handler) {
        window.roate_handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
    }
    // 判断当前是否点击在坐标轴上进行拖动和旋转
    var isAxis = false;

    var zhou = undefined; // 当前拖拽的是哪个轴

    window.roate_handler.setInputAction(function(movement) {

        var cartesian = viewer.scene.pickPosition(movement.position);
        var pickedObject = viewer.scene.pick(movement.position);
        if (!Cesium.defined(pickedObject)) {
            return;
        }
        if (!Cesium.defined(pickedObject.mesh)) {
            return;
        }
        if (Cesium.defined(pickedObject)) {
            zhou = pickedObject.mesh.name;
            isAxis = true;
        }
    }, Cesium.ScreenSpaceEventType.LEFT_DOWN);

    window.roate_handler.setInputAction(function(movement) {
        var pickedObject = viewer.scene.pick(movement.endPosition);
        var startCartesian3 = viewer.scene.pickPosition(movement.startPosition);
        var endCartesian3 = viewer.scene.pickPosition(movement.endPosition);
        var m = model.modelMatrix;
        // 旋转和平移函数得到射线和面交点
        var axisTransForm = function(surface) {

                var matrix = Cesium.Matrix4.inverseTransformation(m, new Cesium.Matrix4());

                // 获取相机坐标
                var camera1 = viewer.camera.position;

                // 转 模型坐标
                var camera = Cesium.Matrix4.multiplyByPoint(matrix, camera1, new Cesium.Cartesian3());
                var startM = Cesium.Matrix4.multiplyByPoint(matrix, startCartesian3, new Cesium.Cartesian3());
                var endM = Cesium.Matrix4.multiplyByPoint(matrix, endCartesian3, new Cesium.Cartesian3());
                // 从相机看模型的方向
                var startDirection = Cesium.Cartesian3.normalize(Cesium.Cartesian3.subtract(startM, camera, new Cesium.Cartesian3()), new Cesium.Cartesian3());
                var endDirection = Cesium.Cartesian3.normalize(Cesium.Cartesian3.subtract(endM, camera, new Cesium.Cartesian3()), new Cesium.Cartesian3())

                // 面
                var plane = Cesium.Plane.fromPointNormal(Cesium.Cartesian3.ZERO, surface);

                // 射线
                var startRay = new Cesium.Ray(camera, startDirection);
                var endRay = new Cesium.Ray(camera, endDirection);

                // 射线和面交点
                var start = Cesium.IntersectionTests.rayPlane(startRay, plane);
                var end = Cesium.IntersectionTests.rayPlane(endRay, plane);
                return { start: start, end: end };
            }
            // 平移函数
        var axisMove = function(surface, zeroAxis1, zeroAxis2) {
            var point = axisTransForm(surface);
            // 两点差值
            var sub = Cesium.Cartesian3.subtract(point.end, point.start, new Cesium.Cartesian3());
            sub[zeroAxis1] = 0;
            sub[zeroAxis2] = 0;
            //  var sub2 = Cesium.Matrix4.multiplyByPoint(m, sub, new Cesium.Cartesian3());
            var mm = Cesium.Matrix4.multiplyByTranslation(m, sub, new Cesium.Matrix4());
            model.modelMatrix = mm;
            // 将坐标轴模型移到和模型相同的位置
            axisModel.modelMatrix = model.modelMatrix;
        }

        // 旋转函数
        var axisRotate = function(surface, tant1, tant2) {
            var point = axisTransForm(surface);
            // 两点角度
            var tant = (point.start[tant1] * point.end[tant2] - point.start[tant2] * point.end[tant1]) / (point.start[tant1] * point.end[tant1] + point.start[tant2] * point.end[tant2]);

            var quat = Cesium.Quaternion.fromAxisAngle(surface, Math.atan(tant)); //quat为围绕这个surface轴旋转d度的四元数
            var rot_mat3 = Cesium.Matrix3.fromQuaternion(quat);

            var m2 = Cesium.Matrix4.multiplyByMatrix3(m, rot_mat3, new Cesium.Matrix4());
            // 移动模型
            model.modelMatrix = m2;
            // 将坐标轴模型移到和模型相同的位置
            axisModel.modelMatrix = model.modelMatrix;
        }
        if (isAxis && startCartesian3 && endCartesian3) {

            cameraControl(false); // 禁止球转动和拖动
            switch (zhou) {
                case 'YArrow_1':
                    axisMove(Cesium.Cartesian3.UNIT_Z, 'y', 'z');
                    break;
                case 'XArrow_1':
                    axisMove(Cesium.Cartesian3.UNIT_X, 'x', 'z');
                    break;
                case 'ZArrow_1':
                    axisMove(Cesium.Cartesian3.UNIT_Y, 'x', 'y');
                    break;
                case 'YAxis_1':
                    axisRotate(Cesium.Cartesian3.UNIT_X, 'y', 'z');
                    break;
                case 'XAxis_1':
                    axisRotate(Cesium.Cartesian3.UNIT_Y, 'z', 'x');
                    break;
                case 'ZAxis_1':
                    axisRotate(Cesium.Cartesian3.UNIT_Z, 'x', 'y');
                    break;

            }

        }

    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

    window.roate_handler.setInputAction(function(movement) {
        isAxis = false;
        cameraControl(true);
    }, Cesium.ScreenSpaceEventType.LEFT_UP);


    // 球转动事件
    var cameraControl = function(isCamera) {
        viewer.scene.screenSpaceCameraController.enableRotate = isCamera;
        viewer.scene.screenSpaceCameraController.enableTranslate = isCamera;
        viewer.scene.screenSpaceCameraController.enableZoom = isCamera;
        viewer.scene.screenSpaceCameraController.enableTilt = isCamera;
        viewer.scene.screenSpaceCameraController.enableLook = isCamera;
    }

}

最后结合一下，把图片贴在透明的glb模型上，按glb模型的方式统一加载，效果可以。贴一张效果图。

老朱自强不息
关注
专栏目录
CesiumJS【Basic】- #013添加点线面（Primitive方式）
AlanL的专栏
06-25 172
添加点线面（Primitive方式）
cesium添加单张图片
跃然实验室
08-26 6001
viewer.imageryLayers.addImageryProvider(new Cesium.SingleTileImageryProvider({ url:"../images/label/2.png", rectangle: rectangle })) var layers = viewer.imageryLayers;
cesium图形上加载图片
weixin_34345560的博客
02-13 4712
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;!-- Use correct character set. --&gt; &lt;meta charset="utf-8"&gt; &lt;!-- Tell IE to use the latest, best version. --&gt; &lt;meta h
cesium 添加 gif图片
dagedezhiyin的博客
08-30 398
【代码】cesium 添加 gif图片。
Cesium添加影像
houxianjin的专栏
04-10 3145
1. 添加影像影像添加是Cesium应用比较常用的功能，我们数字地球上通常会用到各种分辨率的图片在程序中，为了呈现最佳效果，Cesium根据可见视图和相机距离地球表面的距离来判断请求和渲染图像。 Cesium提供的非常多处理多层影像的方法，比如调整颜色和图层融合。关于这部分内容的代码示例：· Adding basic imagery· Adjusting imagery colors· Manip...
cesium应用篇:静态图添加与平移、缩放
u010206379的博客
01-23 1038
使用cesium添加静态图 并平移缩放
Cesium 中的多边形中添加图片
sj18838107211的博客
05-14 416
替换为您要使用的实际图片的 URL。根据您的要求调整其他属性，如多边形坐标、填充颜色、轮廓等。：使用 Cesium 的材质系统为多边形创建材质。您可以将图片 URL 指定为材质属性。：使用适当的坐标在 Cesium 中创建或定义多边形。：首先确保您有要添加到多边形中的图片的 URL。：将创建的材质分配给多边形的外观。
cesium通过billboard加载gif图片例子
12-29
"cesium通过billboard加载gif图片例子"的实现主要涉及以下几个步骤： 1. **引入Cesium库**：首先，在HTML文件（如`index.html`）中，我们需要引入Cesium库。这通常通过添加CDN链接或本地引用Cesium.js文件来完成。...
Cesium撒点封装(Primitive).zip
09-19
"Cesium撒点封装(Primitive)"是一个项目，它展示了如何利用Cesium的底层功能来实现高效的点云渲染，这对于地理信息系统（GIS）和大数据可视化非常有用。在本项目中，开发者已经对Cesium的`Primitive`类型进行了封装...
cesium 文本标注被遮挡_Cesium中Primitive讲解
weixin_39718460的博客
01-26 2093
前面介绍了entity方式绘制对象，现在我们开始接触primitive方式，primitive方式更接近渲染引擎底层，由于我对webgl知之甚少，因此primitive接口我现在也是一知半解，写这个博客我参考了这一篇博客Cesium(三) 几何图形与外观。(https://blog.csdn.net/happyduoduo1/article/details/51868042)1、Primitive...
Cesium地图上画图
08-29
Cesium，在地图上画图，用鼠标在地图上画可编辑的图。
44.（cesium篇）cesium加载gif图片（html）.zip
06-09
该资源包的执行效果查看地址：https://blog.csdn.net/m0_60387551/article/details/123184049 “地图之家”专栏中的“44.（cesium篇）cesium加载gif图片（html）”。如下载有问题，可联系博主。 解压密码：cesium
Cesium加载Gif图片
m0_55597009的博客
11-16 1096
Cesium加载Gif图片。
cesium添加点、线、面、图片、文字、模型功能
m0_69112199的博客
04-23 1888
/ color:Cesium.Color.fromAlpha(Cesium.Color.RED, parseFloat(1.0)),//包含透明度的颜色。// colorBlendMode:Cesium.ColorBlendMode['MIX'],//常用的有三个HIGHLIGHT,REPLACE,MIX。color: new Cesium.Color(1.0, 0.0, 0.0, 1.0), //颜色。// color:Cesium.Color.ORANGE,//颜色。name:'添加模型',
Cesium给物体添加贴图
Baker的博客
09-07 1203
之前有讲过在Cesium的地球上放置一个正方体，这节在正方体上添加贴图，使他看起来更美观一点，贴图可以用哪个任何的图片，我这里就随便找一张放上去，主要演示实现效果和用法。步骤还是和之前一样，先在地球上放置一个正方体，然后再通过改变正方体的材质，添加材质的图片为选中的图片，最后将配置好的正方体加载到场景中。具体的步骤和代码如...
cesium添加自定义点位图片
zw17302560727的博客
04-12 949
链接地址。
cesium中Entity的billboardGraphics添加图片标注
tjx1997的博客
10-24 917
cesium可以利用billboardGraphics类将创建的图片标注添加到地球中。
cesium 通过primitive添加的模型，绑定到时间轴上
最新发布
10-13
在Cesium中，你可以使用`Timeline`组件配合`Entity`对象，其中`Entity`包含了`position`、`orientation`、`model`等属性，通过设置这些属性的时间系列数组，可以轻松地实现模型与时间轴的绑定。下面是一个简单的例子...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

老朱自强不息

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值