Cesium|xt3d gltf标绘绘制编辑

最新推荐文章于 2024-07-02 20:15:09 发布
最新推荐文章于 2024-07-02 20:15:09 发布
阅读量1.2k 收藏 2
点赞数
文章标签： 3d javascript vue.js cesium xt3d
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xietao20/article/details/123511051
版权

Cesium|xt3d gltf标绘绘制编辑

效果

在这里插入图片描述

代码

 <!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>cesium|xt3d</title>
    <!-- 引入Cesium -->
    <script src="https://unpkg.com/cesium@1.84.0/Build/Cesium/Cesium.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/cesium@1.84.0/Build/Cesium/Widgets/widgets.css">

    <script src='http://www.xt3d.cn/libs/turf.min.js'></script>

    <!--  引入xt3d -->
    <script src="http://www.xt3d.cn/xt3dlib/xt3d.min.js"></script>
    <style>
        html,
        body,
        #map3d {
            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
        
        .btn-container {
            position: absolute;
            left: 10px;
            top: 90px;
            padding: 10px 15px;
            border-radius: 4px;
            border: 1px solid rgba(128, 128, 128, 0.5);
            color: #ffffff;
            background: rgba(0, 0, 0, 0.4);
            box-shadow: 0 3px 14px rgb(128 128 128 / 50%);
            max-width: 380px;
        }
        
        button {
            background: transparent;
            border: 1px solid #00d0ffb8;
            color: white;
            padding: 7px 9px;
            border-radius: 2px;
            margin: 3px;
            cursor: pointer
        }
        
        .tip-item {
            margin: 2px 0px;
            padding: 5px 1px;
        }
    </style>
</head>

<body>
    <div id="map3d"></div>
    <div class="btn-container">
        <button onclick="drawActivate('fireMan')">消防员</button>
        <button onclick="drawActivate('fireCar')">消防车</button>
        <button onclick="drawActivate('police')">警察</button>
        <button onclick="drawActivate('policeCar')">警车</button>
        <button onclick="clearDraw()">清空</button>
        <button onclick="save()">保存</button>

        <div class="tip-item">点击“消防员”按钮后根据提示在场景中绘制消防员</div>
        <div class="tip-item">点击“消防车”按钮后根据提示在场景中绘制消防车</div>
        <div class="tip-item">点击“警察”按钮后根据提示在场景中绘制警察</div>
        <div class="tip-item">点击“消防车”按钮后根据提示在场景中绘制警车</div>
        <div class="tip-item">如果绘制后模型没有显示，可能是模型加载有点慢，加载时间与模型大小有关。</div>
        <div class="tip-item">点击选中模型，选中后鼠标按住移动。</div>
    </div>
    </div>
    <script>
        let xt3dInit = {
            init(el) {
                this.initViewer(el);
                this.initGltfDraw();
                this.initGltfEdit();
                this.load3dtiles();
                this.initDatas();
            },

            //初始化viewer
            initViewer(el) {
                this.viewer = new Cesium.Viewer(el, {
                    infoBox: false,
                    selectionIndicator: false,
                    navigation: false,
                    animation: false,
                    timeline: false,
                    baseLayerPicker: false,
                    geocoder: false,
                    homeButton: false,
                    sceneModePicker: false,
                    navigationHelpButton: false,
                    shouldAnimate: true,
                    imageryProvider: new Cesium.UrlTemplateImageryProvider({
                        url: "https://t7.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=tdtTk"
                    })
                });
            },

            //加载数据
            initDatas() {
                fetch("/data.xt3d.cn/assets/data/labelplotting/1602600681304.json").then(res => {
                    return res.json();
                }).then(res => {
                    let features = res.features;
                    features.forEach(feature => {
                        this.gltfPlotLayer.addPlot(feature);
                    })
                }).catch(err => {
                    console.log(err)
                })
            },

            //初始化绘制
            initGltfDraw() {
                this.gltfPlotLayer = new xt3d.GltfModel.GltfPlot.PlotLayer(this.viewer);
                this.gltfPlotLayer.setPlotSelectable(true);

                this.gltfDraw = new xt3d.GltfModel.GltfPlot.PlotDraw(this.viewer);
                this.gltfDraw.DrawEndEvent.addEventListener((position) => {
                    this.handleDrawEnd(position);
                })
            },

            //初始化编辑
            initGltfEdit() {
                this.gltfPlotEdit = new xt3d.GltfModel.GltfPlot.PlotEdit(
                    this.viewer,
                    this.gltfPlotLayer
                );
            },

            //绘制结束事件
            handleDrawEnd(position) {
                switch (this.drawPlotType) {
                    case "police":
                        this.addPolice(position);
                        break;
                    case "policeCar":
                        this.addPoliceCar(position);
                        break;
                    case "fireMan":
                        this.addFireMan(position);
                        break;
                    case "fireCar":
                        this.addFireCar(position);
                        break;
                }
            },

            addPolice(position) {
                var geoFeature = {
                    type: "Feature",
                    properties: {
                        plotCode: xt3d.GltfModel.getPlotCode(),
                        modelUrl: "/data.xt3d.cn/assets/gltf/police.gltf",
                        style: {
                            width: 1,
                            height: 1.6,
                            scale: 2,
                            heading: 0
                        },
                        attr: {}
                    },
                    geometry: {
                        type: "Point",
                        coordinates: xt3d.GltfModel.cartesian3ToCoordinates(position)
                    }
                };
                this.gltfPlotLayer.addPlot(geoFeature);
            },

            addPoliceCar(position) {
                var geoFeature = {
                    type: "Feature",
                    properties: {
                        plotCode: xt3d.GltfModel.getPlotCode(),
                        modelUrl: "/data.xt3d.cn/assets/gltf/police_car.gltf",
                        style: {
                            width: 1.4,
                            height: 1.8,
                            scale: 1.5,
                            heading: 0
                        },
                        attr: {}
                    },
                    geometry: {
                        type: "Point",
                        coordinates: xt3d.GltfModel.cartesian3ToCoordinates(position)
                    }
                };
                this.gltfPlotLayer.addPlot(geoFeature);
            },

            addFireMan(position) {
                var geoFeature = {
                    type: "Feature",
                    properties: {
                        plotCode: xt3d.GltfModel.getPlotCode(),
                        modelUrl: "/data.xt3d.cn/assets/glb/xiaofangyuan.glb",
                        style: {
                            width: 1,
                            height: 1.6,
                            scale: 1,
                            heading: 0
                        },
                        attr: {}
                    },
                    geometry: {
                        type: "Point",
                        coordinates: xt3d.GltfModel.cartesian3ToCoordinates(position)
                    }
                };
                this.gltfPlotLayer.addPlot(geoFeature);
            },

            addFireCar(position) {
                var geoFeature = {
                    type: "Feature",
                    properties: {
                        plotCode: xt3d.GltfModel.getPlotCode(),
                        modelUrl: "/data.xt3d.cn/assets/gltf/xiaofangche.gltf",
                        style: {
                            width: 1,
                            height: 1.6,
                            scale: 1,
                            heading: 0
                        },
                        attr: {}
                    },
                    geometry: {
                        type: "Point",
                        coordinates: xt3d.GltfModel.cartesian3ToCoordinates(position)
                    }
                };
                this.gltfPlotLayer.addPlot(geoFeature);
            },

            //激活绘制工具
            drawActivate(type) {
                this.drawPlotType = type;
                this.gltfDraw.activate();
            },

            //保存文件
            savePlots() {
                const features = [];
                this.gltfPlotLayer.plots.forEach(plot => {
                    features.push(plot.toGeoJson());
                })
                let geojson = {
                    "type": "FeatureCollection",
                    "features": features
                }
                let data = JSON.stringify(geojson);

                var blob = new Blob([data], {
                    type: 'text/json'
                });
                var e = document.createEvent('MouseEvents');
                var a = document.createElement('a');
                a.download = new Date().getTime() + ".json";
                a.href = window.URL.createObjectURL(blob);
                a.dataset.downloadurl = ['text/json', a.download, a.href].join(':');
                e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
                a.dispatchEvent(e);
            },

            //清空
            clear() {
                this.gltfPlotLayer.clear();
            },

            //加载3dtiles数据
            load3dtiles() {
                var tileset = this.viewer.scene.primitives.add(
                    new Cesium.Cesium3DTileset({
                        url: "http://www.xt3d.cn/data/offset_3dtiles/tileset.json",
                    })
                );

                tileset.readyPromise
                    .then(tileset => {
                        this.viewer.zoomTo(
                            tileset,
                        );
                        xt3d.TilesetPlugin.setTilesetHeight(tileset, 55);
                    })
                    .otherwise(function(error) {
                        console.log(error);
                    });
            },

            destroy() {
                this.viewer.entities.removeAll();
                this.viewer.imageryLayers.removeAll(true);
                this.viewer.destroy();
            }
        }

        xt3dInit.init("map3d");

        function drawActivate(type) {
            xt3dInit.drawActivate(type);
        }

        function clearDraw() {
            xt3dInit.clear();
        }

        function save() {
            xt3dInit.savePlots();
        }
    </script>
</body>

</html>

预览地址

xt3d 在线预览地址

xt3d
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
cesium态势标绘 （ 直线箭头）
God's asylum的博客
05-18 2671
vue + cesium标绘与编辑，均采用es6模块化写法逻辑清晰，会有明显的标注说明，使代码容易读懂，理解和学习
Cesium实战专栏12.gltf模型标绘编辑
xt3d的博客
11-01 1354
Cesium实战专栏12.gltf模型标绘编辑 前言 前一篇讲了gltf模型标绘，这一篇是对标绘对象的编辑功能进行封装。 实现效果 实现思路 标绘对象鼠标交互编辑主要通过监听场景鼠标事件实现 关键代码 //编辑类 //左键按下编辑对象隐藏编辑对象移动开始 //左键抬起编辑对象显示编辑对象移动结束 import MousePoint from "../../PlotBase/MousePoint" class GltfPlotEditor { constructor(viewer, gltfPlo
cesium单独加载3d模型.txt
11-16
cesium单独加载3d模型
Cesium 单独加载3D模型
07-17
基于ceisum加载单独三维模型（不含地球），含动画，720度视角查看.目前Cesium框架只支持gltf格式3D模型
基于omita和cesium实现数字孪生可视化消防预警平台
最新发布
baidu_38716385的博客
07-02 266
使用omita和cesium 快速实现数字孪生，智慧消防平台,消防预警平台，火情预警平台
Cesium三维地球标注
zhou8023ddw的博客
06-26 1万+
1、三维地球上添加图层    添加的图层会覆盖该区域的地图信息//添加图层 var layers = viewer.scene.imageryLayers; layers.addImageryProvider(new Cesium.SingleTileImageryProvider({ url : 'img/11.png', rectangle : Cesium.Rectangle...
cesium标绘之点，线，面，圆，曲线，矩形，多边形，图标，直线箭头，攻击箭头，钳击箭头（思路解析加源码）
热门推荐
qq_27532167的博客
09-20 1万+
目录 前言 一、点 二、折线 三、曲线 四、圆 五、矩形 六、多边形 七、直线箭头 效果图 总结 更多 标绘作为GIS最基本需求之一，想必大家在工作中肯定遇到了，标题中的这些标绘大家肯定都实现过，但是也许总是不太全面，在此，我把标绘的逻辑做了统一的封装处理，没准等你看完了点线面的处理逻辑后，你会说，只要你给我一个算法，我给你画出个牡丹花（本质上就是给你一堆点，看你能画出什么奇奇怪怪的东西了） 绘制逻辑说明： constructor：这里采用ES6的新语法，用来构造每种标..
Cesium实战专栏11.gltf模型标绘
xt3d的博客
10-20 1460
这里写自定义目录标题前言效果图实现思路绘制类封装绘制类使用 前言 在cesium中gltf模型非常重要，可以用来展现各种各样的三维元素，比如人、车、树等等。我们可以用代码来构建gltf模型，但是在真正的项目中往往需要鼠标交互的方式来添加模型，所以我们需要封装鼠标交互的一个工具来实现模型的添加，这样便于用户使用。 效果图 实现思路 在cesium中我们添加一个gltf模型只需要模型文件和坐标点，所以我们需要的是封装一个工具来获取用户输入的点坐标，在Cesium中通过ScreenSpaceEventHandl
cesium 标绘矩形 不规则图行，，并计算区域内的点位信息
weixin_42409911的博客
07-16 1074
文章目录标绘多边形标绘矩形圆形 标绘多边形 // DrawPolygon /* 绘制面 */ class DrawPolygon { static viewer = null; static Cesium = null; static callback = null; static _polygon = null; static _polygonLast = null; static _positions = []; static _entities
cesium添加点、线、面、文字、图标、模型等标绘
irisMoon06的博客
04-05 8454
Entity是可以与样式化图形表示配对并定位在空间和时间上的数据对象，或者说Cesium 提供 Entity API 来绘制控件数据。高级别的数据驱动的API，称为“Entity API”。该API使用一致性设计的、高级别的对象，来管理一组相关性的可视化对象，其底层使用Primitive API。面向图形开发人员的底层API，通常称为“Primitive API”。该API暴露最小限度的抽象，使用图形学术语，具有很大的灵活性，需要具有图形学编程的知识。支持的形状与立体列表。
Cesium标绘工具-平尾箭头具体实现思路及源码，亲测可用，有需要的可以下载，有问题可以私信我。
06-14
Cesium的标绘工具是一系列工具的合集，博主有时间的时候会一个一个的更新上来，上次分享的是扇形和集结地的实现方法，有需要的小伙伴可以参考之前的博文，今天来说一下箭头的画法，标绘工具里箭头可谓是多种多样，今天由简到难，先介绍平尾直箭头的画法，当然，箭头的绘制逻辑基本是相同的，无非是需要画头部，身体部分和尾巴部分，头部一般又包含了头顶，和颈部坐标，这些部分都是需要通过代码的方式，通过算法实现关键节点的坐标的，好了，话不多说，先看效果： ———————————————— 版权声明：本文为CSDN博主「liyan_gis」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/liyan_gis/article/details/125275074
Cesium 态势标绘
05-06
Cesium 态势标绘，https://blog.csdn.net/caozl1132/article/details/89679716
cesium态势标绘
God's asylum的博客
05-17 1151
cesium态势标绘与编辑 源码地址下载即可使用：https://download.csdn.net/download/weixin_46730573/85402762?spm=1001.2014.3001.5503
DEJA_VU3D - Cesium功能集 之 070-编辑3Dtiles（平移+旋转）
总得学点什么的博客
09-07 2283
本篇我们就来介绍实现基于Cesium对3Dtiles模型数据的编辑操作，包括平移和旋转效果，包括完整源代码
Cesium 常用标绘线、面、矩形、圆、曲面、曲线、攻击箭头、钳击箭头，标绘与修改。
qq_41400354的博客
07-03 3542
cesium、标绘、常用标绘、箭头、曲线、曲面、矩形、
cesium标绘及加载影像服务
dengam1的博客
04-20 148
转载于：https://www.cnblogs.com/giserhome/p/12365604.html
【Cesium】在地球上绘制标注
~~~
03-03 4682
cesium在地球上进行标注。其中传入的viewer就是初始化cesium创建的视图容器，它提供了创建和控制3D场景所需的所有基本功能，包括加载3D模型、添加图像覆盖物、设置相机位置和方向、处理用户输入等。cesium提供了自带的PointPrimitiveCollection点集合，可以在集合中添加和删除点，并显示到地球上。封装相应标注站点位置的方法，点击确定时，调用drawSite方法并把当前选中的经纬度传入即可。点击选取按钮时，获取鼠标的实时经纬度和高度信息，传入绘制标注方法即可。
Cesium源码分享--标绘
资深三维GIS开发
05-19 1687
ps：如果可以的话，希望大家能给我个star，好让我有更新下去的动力；以上是此库一个大致的介绍，具体调用和开发请参考开发文档。
Cesium笔记之标绘实体
Spider_wang的博客
05-05 4439
在Ceisum开发中我们常常需要标绘实体，实体主要分为三类：点标（如点、图片、文本、音频、视频等）、线标（如多边形、贝塞尔等复杂曲线）、面标（如面、椭圆、矩形等）。本文主要介绍如何利用Cesium进行面的标绘，其他类似，具体可参考接口文档。 注：示例代码基于Vue框架。 1.理清标绘逻辑 要在地球上标一个面标，那么首先需要开启一个监听器，监听地球的点击事件。点击事件获取点的位置后，应该转换成实...
Cesium：3D地图引擎与gltf模型支持
Cesium的3D模型支持gltf格式，这是一种由khronos组织定义的用于互联网3D内容的交换格式，兼容OpenGL、WebGL和OpenGL ES。 在功能方面，Cesium具备以下特点： 1. 动态地理空间数据可视化：Cesium能够展示动画时间...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

xt3d

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

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

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

打赏作者

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

抵扣说明：

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

余额充值