mars3d踩坑经历--DivGraphic与DivBillboardEntity

已于 2023-03-30 19:14:04 修改
阅读量1.1k 收藏
点赞数
分类专栏： gis开发学习 文章标签： vue 3d
于 2023-03-29 14:41:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_53664163/article/details/129836427
版权

最近写公司项目，在地球上需要显示几个港口，港口处需要加上进度条，显示装卸进度

然后惯例使用graphic.BillboardEntity添加上港口图标，使用graphic.DivBillboardEntity添加上进度条，结果一直进度条不显示，对了几次代码，该有的配置也没有少，非常疑惑

因为之前写过在graphic.DivBillboardEntity.style.html里面写过table标签，所以没想到input标签会不显示，然后换成div发现可以显示，才知道input标签不能使用DivBillboardEntity添加，下次一定注意！

补充1：突然发现在一些旧版本，DivBillboardEntity加载的div框不显示，特别莫名其妙，然后替换成新版本，才出来，所以大家开发的时候注意版本问题哈

补充2：本来是要用input标签显示进度条的，但是发现了一个很严重的问题，就是在地图缩放的时候，被盖住的input标签不会被隐藏掉，反而会显示撑大界面，导致生成滚动条，造成白色区域，而且无法通过样式隐藏滚动条，很糟糕，所以最后还是换成了DivBillboardEntity，用div造了一个滚动条

ps：mars3d好难呐，我们还是内网开发，系统不能联网，外网效果已经实现了内网就是不ok，好难┭┮﹏┭┮，都没有思路哎

mars3d入门环境配置部署踩坑
qq_44757213的博客
08-03 1602
mars3d，入门，环境配置，部署，踩坑，vue
【mrs3d+divGraphic】在地图上添加divGraphic
m0_53584457的博客
06-27 719
这红色的点就是调试点， 当面板的最下边处于那个点下，就说明位于地下了，就会导致移动地图，div移动；那就需要用到 testPoint 这个参数了 - 用于比较测试div的位置，方便调试CSS。处于点上，就说明是个有高度的div,也会有些微的移动，因为3d视角的原因嘛；或者你只用到其中一个样式，找到其中的样式，专门复制那一个样式也是可以的；到这里，样式应该也能生效，一个divGraphic就能出来了；有可能产生的问题就是移动地图时，div会移动；可以直接用他们封装好的css,省的调试了；
【mars3d】mars3d写lable标签使用BillboardPrimitive这个API提升代码性能
新人一枚，互相学习哦！
07-27 838
你可以在label中写定样式，达到文本框的效果。
mars3d开发中遇到的问题
qq_44806249的博客
07-01 734
mars3d mars3d开发常见问题
使用mars3d绘制矢量数据，页面中不显示
m0_69803146的博客
02-23 701
使用mars3d绘制矢量数据，页面中不显示
mars3d-supermap-master_supermap_火星代码_火星科技cesium_mars3d-supermap_
09-11
火星科技（Mars Technology）作为国内领先的GIS服务商，其产品cesium Mars3D与SuperMap的结合，为开发者提供了一种高效、强大的解决方案。本文将深入探讨"mars3d-supermap-master"项目，解析如何利用Vue.js框架和...
mars3d-link-supermap:Mars3D兼容使用超图平台示例
04-01
Mars3D最简项目模版-超图版 Mars3D支持结合Cesium相关的各类平台来兼容使用，方便结合不同平台的优点来完成各种项目需求。 本仓库是Mars3D三维地球平台软件，在技术栈下的最简的应用项目模版。 其他技术栈，请参考：...
mars3d-es5-template:Mars3D最简项目模版 - ES5传统版
04-29
Mars3D三维地球平台软件 是研发的一款基于 WebGL 技术实现的三维客户端开发平台，基于优化提升与B/S架构设计，支持多行业扩展的轻量级高效能GIS开发平台，能够免安装、无插件地在浏览器中高效运行，并可快速接入与...
mars3d-simple-angular-widget-master.zip
08-08
这个组件库将Mars3D与Angular相结合，让开发者在Angular环境中无缝地使用Mars3D的特性，极大地提高了开发效率。 在实际应用中，开发者可以借助这个组件库，轻松地在Angular项目中实现以下功能： 1. **三维地球展示...
new mars3d.graphic.Popup({实现插入轮播图组件的思路参考
m0_69803146的博客
01-18 1952
new mars3d.graphic.Popup({实现插入轮播图组件的思路参考
Mars3D+nginx 搭建离线API服务，本地访问
12-20
1.解压缩后启动nginx,浏览器访问localhost:809/index.html 2.有任何问题或者需要Mars3D其他API版本可联系博主
js画图包及使用方法
03-07
js画图 js画图包及使用方法 wz_jsgraphics wz_jsgraphics使用
04、深度检测
qq_38956940的博客
01-24 2636
深度检测 1、开启深度检测 // 开启深度检测，默认是关闭的 viewer.scene.globe.depthTestAgainstTerrain = true; 2、不开启的后果 地球上的 entity 会 强制绘制、显示 出来而不管是否有遮盖，导致少量位移误差 Cesium 拾取鼠标坐标不准 scene.pickPosition：有地形数据时，这结果不太准确，需要开启 深度检测 globe.pick：准确度较高 这会导致：用鼠标绘制点、线、面 的时候根本拾取不到正确的坐标，导致坐标点严
【mars3d - 报错】使用mars3d加载时的一些报错和不生效问题
m0_53584457的博客
08-09 1629
在使用过程中遇到过很多报错，不管大的还是小的，在这里总结下，应该会持续更新； 可能是因为 arcType：Cesium.arcType.NONE 与 clampToGround：true 是相互冲突的，两个都设置就会报错的；只能二选一了 这个就比较简单，就是样式没引入，新建个css || less 文件，引入下就好； 如果是mars3d官网的样式，直接将对应文件引入即可； 在里面写了按钮，点击却没有触发事件； 比如下面，岳西水厂的按钮就可以触发，大别山水厂的按钮就触发不了； 设置pointerEv
通过Mars3d支持的gif动图加载方式
m0_69803146的博客
10-21 597
mars3d支持gif动图，地图叠加gif动图展示
【mars3d】聚合点更改样式 ， 自定义背景
m0_53584457的博客
11-09 1450
聚合点更改样式 ， 自定义背景 问题：绘制出来的效果，经常只有数字，没有背景图，移动过去才有背景图。中有个文件 CanvasBillboard.js ，需要引入；1.通过 mars3d的方法 getTextImage （2.使用Canvas转图片 ，mars3d也有对应示例参考。）将文字转换成base64图片，但是会出现上面的问题；自定义聚合点的背景图片，图片上显示聚合的数目。之后 getImage 中使用该方法即可；Util - Mars3D API文档。
Cesium：Billboard弹跳效果
席木木的博客
09-22 1737
Cesium的Billboard弹掉效果，实现思路为：将目标点以Entity或者Primitive的方式加载到Scene场景中，然后利用Cesium.Viewer获取Scene场景对象，为其注册preUpdate事件监听，编写回调函数，动态修改点位的高程值，实现动态的弹跳效果。
Cesium学习教程+笔记(Mars3D) 图层 图层组 矢量数据
a1578460233的博客
08-06 3864
图层与图层组 为什么需要了解图层组?图层与图层组又是啥关系? 之前学过的点线面都是矢量数据 , 添加到矢量图层直接到地图上的 var tucengdian = new mars3d.layer.GraphicLayer(); //新建矢量图层 map.addLayer(tucengdian); //把矢量图层绑定到map地图上 var graphic = new mars3d.graphic.PointEntity({ //PointEntity 像素点对象
Mars3D加载大量Label实体时卡顿的一种解决方法
木遥的专栏
01-18 3192
前言 接触 Mars3D 是由于公司项目需要，直接边学边开发，两三个月来都挺顺风顺水的。直到数据量越来越大，地图上的实体越来越多，首屏加载的时候经常会卡顿，客户那边的机器性能太差，有时候卡顿的同时还出现浏览器无响应问题。测试把这个问题归为BUG，要求必须解决，搞得我头大。 加载成百上千实体时出现的问题 让我们先来看下加载Label实体出现了什么问题？ function addBillboardEntity(bsm, name, buildingType, position) { var g
mars3D ui vben-admin
最新发布
01-16
### 关于 Mars3D UI 和 vben-admin 的集成与使用 #### 使用指南 Mars3D 是一款专注于三维地理信息系统 (GIS) 可视化的 JavaScript 库，而 vben-admin 则是一个基于 Vue 3 和 Ant Design Vue 构建的现代化后台管理模板。两者可以很好地结合起来创建功能强大且美观的地图应用程序。 要将 Mars3D UI 整合到 vben-admin 中，首先需要理解两者的架构特点并找到合适的切入点[^1]。通常情况下，在 vben-admin 中引入外部库如 Mars3D 主要是通过安装依赖包以及调整项目配置来完成。 #### 示例教程 为了帮助开发者更快地上手这个组合，下面提供了一个简单的例子说明如何在一个新的页面里嵌入 Mars3D 地图： ```javascript // src/views/mars-map/index.vue <template> <div id="mars-container"></div> </template> <script setup lang="ts"> import { onMounted } from 'vue'; import * as mars3d from '@marsgis/mars3d'; onMounted(() => { const map = new mars3d.Map('mars-container', {}); }); </script> <style scoped> #mars-container { width: 100%; height: calc(100vh - 80px); } </style> ``` 此代码片段展示了怎样在 vben-admin 页面内初始化一个 Mars3D 实例，并将其渲染至指定容器中[^2]。 #### 下载与安装 对于想要尝试上述方案的朋友来说，可以从 GitHub 上克隆最新的 `vue-vben-admin` 源码仓库[^5]，并通过 npm 或 yarn 来安装必要的开发工具链及第三方库（包括 Mars3D）。具体命令如下所示： ```bash git clone https://github.com/anncwb/vue-vben-admin.git cd vue-vben-admin npm install @marsgis/mars3d --save ``` #### 配置 为了让 Mars3D 正常工作，还需要做一些额外的工作，比如设置 Webpack 加载器以便处理特定类型的资源文件；另外就是确保所使用的浏览器版本支持 WebGL 技术，因为这是 Mars3D 渲染地图的基础条件之一[^4]。 #### 文档 有关更详尽的技术细节和支持信息，请参阅官方提供的文档资料： - **vben-admin**: [https://vvbin.cn/doc-next/](https://vvbin.cn/doc-next/) - **Mars3D API Reference**: [http://doc.marsgis.cn/api/](http://doc.marsgis.cn/api/)
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值