graphicLayer.startDraw({指定type为curve曲线时，无法实现示例效果排查思路参考

最新推荐文章于 2024-07-09 00:03:16 发布
最新推荐文章于 2024-07-09 00:03:16 发布
阅读量494 收藏 4
点赞数 12
分类专栏： Mars3d vue app 文章标签： html 前端 javascript vue.js chrome
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_69803146/article/details/137543564
版权
Mars3d 同时被 3 个专栏收录
187 篇文章 16 订阅
订阅专栏
vue
183 篇文章 2 订阅
订阅专栏
app
165 篇文章 0 订阅
订阅专栏
本文讲述了开发者在使用Mars3D进行图形层曲线绘制时遇到的问题，涉及到版本更新、库依赖顺序以及本地项目配置。作者通过对比本地和官方示例，发现本地turf库引入顺序错误，最终通过调整引入顺序解决了问题。
摘要由CSDN通过智能技术生成

graphicLayer.startDraw({指定type为curve曲线时，无法实现和示例一样的曲线效果的排查思路参考：

相关代码：
 

  graphicLayer.startDraw({

    type: "curve",

    style: {

      color: "#ff0000",

      width: 3,

    },

  });

相关效果：

示例效果：

问题排查思路：

本地问题代码说明：

1.颜色出来了，证明代码是走通的。

本地开发版本与官网示例版本对比说明：

1.本地的版本时3.7.9，官网时3.7.10，差了版本，升级版本后清空缓存再试试之后，发现依然不行

2.然后对比了turf库的版本，依然保持与官网示例一致的。@turf/turf@6.5.0"

3.排除版本问题后，拉了一份官网的最简项目模板再次测试。

官网的仓库的开源地址：Mars3D 三维可视化平台 | 火星科技 | 地图开发

拉最简项目模板代码的命令：

git clone https://gitee.com/marsgis/mars3d-vue-template.git

4.拉一份在最简项目模板发现无法复现问题，效果正常

在最后的解决方法是： 本地的项目中turf库未正确引入,

安装了但是用的时候没引成功没生效导致的效果不一样

导致的本地的曲线绘制效果与示例的曲线绘制效果不同。

1.在App.vue文件中参考开发教程的顺序重新引用了truf库，由此效果正常了。

  graphicLayer.startDraw({
    type: "curve",
    style: {
      color: "#33e8df",
      width: 3,
    },
  });

2.补充说明：相关依赖js文件的引入顺序参考官网的开发教程

例如： turf库引了之后在引mars3d才可以，需要测试这个引入顺序才行，参考这个顺序使用。

 

<!--引入cesium基础lib-->
<script>
  // window.CESIUM_BASE_URL = "https://unpkg.com/mars3d-cesium@latest/Build/Cesium/" //非必须，如jsp、asp.net等非html框架报错时建议取消注释
</script>
<link href="https://unpkg.com/mars3d-cesium@latest/Build/Cesium/Widgets/widgets.css" rel="stylesheet" type="text/css" />
<script src="https://unpkg.com/mars3d-cesium@latest/Build/Cesium/Cesium.js" type="text/javascript" ></script>
<script src="https://unpkg.com/@turf/turf/turf.min.js" type="text/javascript" ></script>

<!--引入mars3d库lib-->
<link href="https://unpkg.com/mars3d@latest/dist/mars3d.css" rel="stylesheet" type="text/css" />
<script src="https://unpkg.com/mars3d@latest/dist/mars3d.js" type="text/javascript" ></script>

<!--引入mars3d库插件lib（按需引入）-->
<script src="https://unpkg.com/mars3d-space@latest/dist/mars3d-space.js" type="text/javascript" ></script>

 

 

mianmianwu
关注
专栏目录
关于GraphicLayer和canvas混用时，graphicLayer的绑定点击事件不生效
ff的博客
11-14 1185
项目开发中，一开始用的都是graphicLayer，图层绑定的点击事件也能触发，加了canvas图层后，发现之前graphicLayer的点击不生效了，感觉像是屏蔽了，绑定地图本身的点击事件是可以触发，但并不是我想要的，于是就开始查canvas的属性，发现了CSS3 pointer-events:none属性。    原来是“被遮住了”，设置了pointer-events:none后，就可以
安卓实现原生渲染LaTeX公式的思路及源码浅析
weixin_45399399的博客
09-01 2042
一、前言 最近自己的项目中，需要实现数学，化学公式的显示，所以对实现这一功能，进行记录，希望能帮到你，限于技术水平有限，如有错误欢迎指正。 二、现有的方案 目前博主找到的三种常见实现方案如下： （1）嵌入webview，以MathJax渲染LaTeX公式。 （2）将计算机生成的LaTeX公式以矢量图保存，在移动端插入TextView中显示。 （3）自己实现渲染LaTeX，并且支持移动端输入公式，动态解析并渲染到TextView中。 三、正文 本文主要讨论第三种方式的实现，值得庆幸的是第三种方案已经有开源框架
【Mars3d绘制完成后设置离地面的实体高度】graphicLayer.startDraw绘制带高度的实体
m0_69803146的博客
04-02 392
实现通过Mars3d在地球上绘制带高度的离地实体：graphicLayer.startDraw绘制带高度的实体
graphicLayer.startDraw({开启连续绘制isContinued之后，无法获取连续标绘的坐标数据
m0_69803146的博客
04-10 292
graphicLayer.startDraw({开启连续绘制isContinued之后，无法获取连续标绘的坐标数据的解决方案
关于Mars3d的入门
最新发布
Dormiveglia-flx的博客
07-09 408
ParticleSystem粒子对象 —》 粒子效果。漫游路线对象 —》 展示对象按照一定轨迹移动。视频融合对象 —》投射视频物体表面。通过json的格式创建图层，高效方便。矢量图层与矢量数据的用法。
【Mars3d 基础- 矢量数据】标绘完成事件
m0_53584457的博客
04-18 1313
mars3d的矢量数据绘制完成事件
mars3d基于vue3.0的widget使用
m0_69803146的博客
02-23 1314
mars3d基于vue3.0的widget使用
mars3d常用参数备用
m0_69803146的博客
02-24 774
mars3d常用参数备用
微信小程序实现分享朋友圈的图片功能示例
12-02
在微信小程序中，由于官方API并不直接支持将内容分享到朋友圈，开发者通常需要采用变通的方法来实现这一功能。本文将详细介绍如何通过前端技术在微信小程序中实现分享朋友圈的图片功能。 首先，我们需要理解实现这...
js手机号批量滚动抽奖实现代码
10-20
在本文中，我们将探讨如何使用JavaScript实现一个手机号批量滚动抽奖的程序，这种程序常用于年会或其他活动，为参与者带来趣味性和互动性。关键在于实现随机性和不重复性，确保抽奖过程公正且吸引人。 首先，我们...
Openlayers实现距离面积测量
10-14
在OpenLayers中，实现距离和面积的测量是地图应用中常见的功能，这有助于用户了解地图上特定区域的尺寸。OpenLayers是一个强大的JavaScript库，用于在Web...同时，记得根据需要为CSS类添加样式，以获得更好的视觉效果。
Mars3D开发基础学习：事件机制
木遥的专栏
12-30 955
无论是前端系统，还是二维/三维GIS应用系统，都离不开各种事件的应用，尤其是鼠标的单击、双击事件。 Mars3D 内所有类 均支持事件的绑定、解绑、触发等统一的事件机制,事件类型全部定义在mars3d.EventType 。
new mars3d.graphic.PolylineEntity({实现航线真实穿过山体或者模型的部分用虚线展示效果
m0_69803146的博客
04-10 860
new mars3d.graphic.PolylineEntity({实现航线真实穿过山体或者模型的部分用虚线展示效果
Vue结合mars3d基于天地图加载3dtiles模型(三维模型)
qq_40407998的博客
05-27 5199
官网：http://mars3d.cn/doc 官方提供vue项目示例：https://github.com/marsgis/mars3d-vue-template 1.引入必要插件： 通过npm安装mars3d主库： npm install mars3d 2.在main.js中导入依赖 3.vue.config.js（或Webpack）配置 const webpack = require('webpack') const path = require('path') const CopyWebpackP
【mars3d - 报错】使用mars3d加载时的一些报错和不生效问题
m0_53584457的博客
08-09 1205
在使用过程中遇到过很多报错，不管大的还是小的，在这里总结下，应该会持续更新； 可能是因为 arcType：Cesium.arcType.NONE 与 clampToGround：true 是相互冲突的，两个都设置就会报错的；只能二选一了 这个就比较简单，就是样式没引入，新建个css || less 文件，引入下就好； 如果是mars3d官网的样式，直接将对应文件引入即可； 在里面写了按钮，点击却没有触发事件； 比如下面，岳西水厂的按钮就可以触发，大别山水厂的按钮就触发不了； 设置pointerEv
mars3d自定义右键菜单栏
新人一枚，互相学习哦！
08-15 469
mars3d自定义右键菜单栏
【Mars3d 基础 - 图层】种类和使用
m0_53584457的博客
12-31 4273
使用mars3d添加图层和矢量数据
Mars3d采用ellipsoid球实现模拟地球旋转效果
m0_69803146的博客
07-13 1281
使用Mars3d采用属性机制即可实现球体模拟地球旋转的效果
mars3d点线面的绘制和重置
前端小攻城狮的博客
06-22 2408
mars3d点线面的绘制和重置
vue实现签名
05-24
Vue 可以通过 canvas 实现签名功能，具体步骤如下： 1. 在 Vue 模板中添加一个 canvas 标签和两个按钮，一个用于清空签名，一个用于保存签名。 ```html <template> <div> <canvas ref="canvas"></canvas> <button @click="clear">清空</button> <button @click="save">保存</button> </div> </template> ``` 2. 在 Vue 的 mounted 钩子函数中获取 canvas 对象，并设置画笔颜色和线条宽度。 ```javascript mounted() { this.canvas = this.$refs.canvas; this.ctx = this.canvas.getContext('2d'); this.ctx.strokeStyle = '#000'; // 画笔颜色 this.ctx.lineWidth = 2; // 线条宽度 }, ``` 3. 监听鼠标事件，在鼠标移动时绘制线条。 ```javascript methods: { startDraw(e) { this.isDrawing = true; this.lastX = e.offsetX; this.lastY = e.offsetY; }, draw(e) { if (!this.isDrawing) return; this.ctx.beginPath(); this.ctx.moveTo(this.lastX, this.lastY); this.ctx.lineTo(e.offsetX, e.offsetY); this.ctx.stroke(); this.lastX = e.offsetX; this.lastY = e.offsetY; }, endDraw() { this.isDrawing = false; } }, ``` 4. 实现清空和保存功能。 ```javascript methods: { clear() { this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); }, save() { const dataURL = this.canvas.toDataURL(); console.log(dataURL); // 可以将 dataURL 发送到后端进行保存 } }, ``` 完整代码如下： ```html <template> <div> <canvas ref="canvas"></canvas> <button @click="clear">清空</button> <button @click="save">保存</button> </div> </template> <script> export default { data() { return { canvas: null, // canvas 对象 ctx: null, // 画笔对象 isDrawing: false, // 是否正在绘制 lastX: 0, // 上一个点的 x 坐标 lastY: 0 // 上一个点的 y 坐标 }; }, mounted() { this.canvas = this.$refs.canvas; this.ctx = this.canvas.getContext('2d'); this.ctx.strokeStyle = '#000'; // 画笔颜色 this.ctx.lineWidth = 2; // 线条宽度 }, methods: { startDraw(e) { this.isDrawing = true; this.lastX = e.offsetX; this.lastY = e.offsetY; }, draw(e) { if (!this.isDrawing) return; this.ctx.beginPath(); this.ctx.moveTo(this.lastX, this.lastY); this.ctx.lineTo(e.offsetX, e.offsetY); this.ctx.stroke(); this.lastX = e.offsetX; this.lastY = e.offsetY; }, endDraw() { this.isDrawing = false; }, clear() { this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); }, save() { const dataURL = this.canvas.toDataURL(); console.log(dataURL); // 可以将 dataURL 发送到后端进行保存 } } }; </script> ``` 使用时只需要将组件引入到需要的页面即可。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值