mars3d踩坑经历--DivGraphic与DivBillboardEntity

已于 2023-03-30 19:14:04 修改
阅读量888 收藏
点赞数
分类专栏： gis开发学习 文章标签： vue 3d
于 2023-03-29 14:41:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/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，好难┭┮﹏┭┮，都没有思路哎

南漯园
关注
专栏目录
WEBGIS开发3-地图面标记
weixin_42276227的博客
03-10 266
WEBGIS开发3-地图面标记
mars3d入门环境配置部署踩坑
qq_44757213的博客
08-03 1405
mars3d，入门，环境配置，部署，踩坑，vue
【mrs3d+divGraphic】在地图上添加divGraphic
m0_53584457的博客
06-27 445
这红色的点就是调试点， 当面板的最下边处于那个点下，就说明位于地下了，就会导致移动地图，div移动；那就需要用到 testPoint 这个参数了 - 用于比较测试div的位置，方便调试CSS。处于点上，就说明是个有高度的div,也会有些微的移动，因为3d视角的原因嘛；或者你只用到其中一个样式，找到其中的样式，专门复制那一个样式也是可以的；到这里，样式应该也能生效，一个divGraphic就能出来了；有可能产生的问题就是移动地图时，div会移动；可以直接用他们封装好的css,省的调试了；
mars3d开发中遇到的问题
qq_44806249的博客
07-01 605
mars3d mars3d开发常见问题
【mars3d】mars3d写lable标签使用BillboardPrimitive这个API提升代码性能
新人一枚，互相学习哦！
07-27 513
你可以在label中写定样式，达到文本框的效果。
使用mars3d绘制矢量数据，页面中不显示
m0_69803146的博客
02-23 546
使用mars3d绘制矢量数据，页面中不显示
通过Mars3d支持的gif动图加载方式
m0_69803146的博客
10-21 501
mars3d支持gif动图，地图叠加gif动图展示
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+nginx 搭建离线API服务，本地访问
最新发布
12-20
1.解压缩后启动nginx,浏览器访问localhost:809/index.html 2.有任何问题或者需要Mars3D其他API版本可联系博主
js画图包及使用方法
03-07
js画图 js画图包及使用方法 wz_jsgraphics wz_jsgraphics使用
mars3d-simple-angular-widget-master.zip
08-08
这个组件库将Mars3D与Angular相结合，让开发者在Angular环境中无缝地使用Mars3D的特性，极大地提高了开发效率。 在实际应用中，开发者可以借助这个组件库，轻松地在Angular项目中实现以下功能： 1. **三维地球展示...
【mars3d】聚合点更改样式 ， 自定义背景
m0_53584457的博客
11-09 1205
聚合点更改样式 ， 自定义背景 问题：绘制出来的效果，经常只有数字，没有背景图，移动过去才有背景图。中有个文件 CanvasBillboard.js ，需要引入；1.通过 mars3d的方法 getTextImage （2.使用Canvas转图片 ，mars3d也有对应示例参考。）将文字转换成base64图片，但是会出现上面的问题；自定义聚合点的背景图片，图片上显示聚合的数目。之后 getImage 中使用该方法即可；Util - Mars3D API文档。
Cesium：Billboard弹跳效果
席木木的博客
09-22 1514
Cesium的Billboard弹掉效果，实现思路为：将目标点以Entity或者Primitive的方式加载到Scene场景中，然后利用Cesium.Viewer获取Scene场景对象，为其注册preUpdate事件监听，编写回调函数，动态修改点位的高程值，实现动态的弹跳效果。
Cesium学习教程+笔记(Mars3D) 图层 图层组 矢量数据
a1578460233的博客
08-06 3623
图层与图层组 为什么需要了解图层组?图层与图层组又是啥关系? 之前学过的点线面都是矢量数据 , 添加到矢量图层直接到地图上的 var tucengdian = new mars3d.layer.GraphicLayer(); //新建矢量图层 map.addLayer(tucengdian); //把矢量图层绑定到map地图上 var graphic = new mars3d.graphic.PointEntity({ //PointEntity 像素点对象
Mars3D加载大量Label实体时卡顿的一种解决方法
木遥的专栏
01-18 2757
前言 接触 Mars3D 是由于公司项目需要，直接边学边开发，两三个月来都挺顺风顺水的。直到数据量越来越大，地图上的实体越来越多，首屏加载的时候经常会卡顿，客户那边的机器性能太差，有时候卡顿的同时还出现浏览器无响应问题。测试把这个问题归为BUG，要求必须解决，搞得我头大。 加载成百上千实体时出现的问题 让我们先来看下加载Label实体出现了什么问题？ function addBillboardEntity(bsm, name, buildingType, position) { var g
JS-Mars3D-添加一组点以及删除的方法(详细注释)
ershao1022的博客
05-18 608
Mars3D开发经验
mars3d在写label标签的时候，会出现label展示位置和自己定点位置不同
新人一枚，互相学习哦！
07-19 381
当使用此对齐方式时，对象（如标签、图片等）的位置将以其左侧边缘作为参考点进行对齐。换句话说，对象将以其左侧边缘为基准来确定其在水平方向上的位置。表示水平对齐方式为居中对齐。当使用此对齐方式时，对象的位置将以其水平中心点作为参考点进行对齐。也就是说，对象将以其水平中心点为基准来确定其在水平方向上的位置。通过使用不同的水平对齐方式，可以在Cesium中灵活地控制对象在水平方向上的位置和对齐方式。例如，如果你希望一个标签或图像的左侧边缘与某个位置对齐，可以使用。是一个枚举类型，用于指定水平方向的对齐方式。
mars3d-vue安装
08-31
要安装 Mars3D-Vue，您可以按照以下步骤进行操作： 1. 首先，确保您已经安装了 Node.js 和 npm。您可以在终端中运行以下命令来验证它们是否已正确安装： ``` node -v npm -v ``` 2. 创建一个新的 Vue 项目。您可以在终端中运行以下命令来创建一个新的 Vue 项目： ``` vue create my-mars3d-project ``` 根据提示选择适当的配置选项。 3. 进入项目目录。使用以下命令进入您刚刚创建的项目目录： ``` cd my-mars3d-project ``` 4. 安装 Mars3D-Vue。运行以下命令来安装 Mars3D-Vue： ``` npm install mars3d-vue ``` 5. 使用 Mars3D-Vue。在您的 Vue 项目中，您可以通过导入并在组件中使用 mars3d-vue 来使用 Mars3D。 例如，在您的 Vue 组件中，您可以添加以下代码： ```vue <template> <div id="app"> <mars-map :options="mapOptions" /> </div> </template> <script> import { MarsMap } from 'mars3d-vue'; export default { name: 'App', components: { MarsMap }, data() { return { mapOptions: { // 在这里配置 Mars3D 地图选项 } }; } }; </script> ``` 这只是一个简单的示例，您可以根据您的需求进行更多配置和自定义。 希望这可以帮助您开始使用 Mars3D-Vue！如有任何疑问，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值