graphicLayer.startDraw({开启连续绘制isContinued之后，无法获取连续标绘的坐标数据

最新推荐文章于 2024-06-09 20:17:27 发布
最新推荐文章于 2024-06-09 20:17:27 发布
阅读量229 收藏 2
点赞数 10
分类专栏： vue app Mars3d 文章标签： vue.js 前端 javascript 运维
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_69803146/article/details/137600858
版权
Mars3d 同时被 3 个专栏收录
150 篇文章 16 订阅
订阅专栏
vue
148 篇文章 2 订阅
订阅专栏
app
132 篇文章 0 订阅
订阅专栏

摘要：graphicLayer.startDraw({开启连续绘制isContinued之后，无法获取连续标绘的坐标数据的解决方案

问题前景：

graphicLayer.startDraw({开启连续绘制isContinued之后，.then()方法只走一次，无法获取连续标绘的所有坐标数据。

如果是结束绘制的话 有graphicLayer.endDraw()方法，但是在连续绘制开启之后,then()只走一次，无法记录连续绘制的次数。

相关链接：

http://mars3d.cn/editor-vue.html?key=ex_7_14_0&id=layer-graphic/draw/draw

http://mars3d.cn/api/GraphicLayer.html?classFilter=graphicLayer#endDraw 

相关代码：

 

 

 

问题解决方案参考：

isContinued 是否连续标绘,连续标绘状态下无法编辑已有对象,且不支持获取startDraw方法的返回值（是内部自动调用的，如果要获取请drawCreated事件中获取或外部手动进行startDraw）。

  graphicLayer.on(mars3d.EventType.drawCreated, function (e) {
    console.log("创建完成", e)

    graphicLayer.stopDraw()
    graphicLayer.startDraw(mars3d.Util.clone(e.graphic.options)) // 连续标绘时，可以代替isContinued

  })

mianmianwu
关注
  • 10
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ui3d2d:用于Garry Mod的干净，简单的3D2D UI库。 易于使用和优化设计
05-23
ui3d2d 一个简单且经过优化的库，用于在Garry的Mod中绘制3D2D UI。 同时支持即时模式绘图和VGUI（在extras文件中找到）。用法示例将UI添加到实体： ENT. RenderGroup = RENDERGROUP_TRANSLUCENTlocal pos = Vector ...
C# Socket聊天室例子
01-12
private Point _startDraw = new Point(); private Bitmap _buffer = new Bitmap(333, 131); private DateTime _started; public ChatNDrawForm() { InitializeComponent(); Control....
【Mars3d 基础- 矢量数据】标绘完成事件
m0_53584457的博客
04-18 1135
mars3d的矢量数据绘制完成事件
mars3d基于vue3.0的widget使用
m0_69803146的博客
02-23 1115
mars3d基于vue3.0的widget使用
graphicLayer.startDraw({指定type为curve曲线时，无法实现示例效果排查思路参考
m0_69803146的博客
04-09 406
使用mars3d在自己的项目中参考图上标绘的示例实现绘制曲线的效果：graphicLayer.startDraw({指定type为curve曲线在map地球上开始绘制
new mars3d.graphic.PolylineEntity({实现航线真实穿过山体或者模型的部分用虚线展示效果
m0_69803146的博客
04-10 683
new mars3d.graphic.PolylineEntity({实现航线真实穿过山体或者模型的部分用虚线展示效果
【Mars3d绘制完成后设置离地面的实体高度】graphicLayer.startDraw绘制带高度的实体
m0_69803146的博客
04-02 245
实现通过Mars3d在地球上绘制带高度的离地实体：graphicLayer.startDraw绘制带高度的实体
Vue结合mars3d基于天地图加载3dtiles模型(三维模型)
qq_40407998的博客
05-27 4894
官网：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自定义右键菜单栏
新人一枚，互相学习哦！
08-15 340
mars3d自定义右键菜单栏
【mars3d - 报错】使用mars3d加载时的一些报错和不生效问题
m0_53584457的博客
08-09 974
在使用过程中遇到过很多报错，不管大的还是小的，在这里总结下，应该会持续更新； 可能是因为 arcType：Cesium.arcType.NONE 与 clampToGround：true 是相互冲突的，两个都设置就会报错的；只能二选一了 这个就比较简单，就是样式没引入，新建个css || less 文件，引入下就好； 如果是mars3d官网的样式，直接将对应文件引入即可； 在里面写了按钮，点击却没有触发事件； 比如下面，岳西水厂的按钮就可以触发，大别山水厂的按钮就触发不了； 设置pointerEv
【Mars3d 基础 - 图层】种类和使用
m0_53584457的博客
12-31 3826
使用mars3d添加图层和矢量数据
Mars3d采用ellipsoid球实现模拟地球旋转效果
m0_69803146的博客
07-13 1200
使用Mars3d采用属性机制即可实现球体模拟地球旋转的效果
mars3d开发 ——移动端画线矢量数据注意事项
qq_44806249的博客
04-24 856
简介： 在使用mars3d进行移动端开发项目中，绘制线矢量数据和在PC端有很大不同点。主要体现在PC端可以通过鼠标双击 ，确定 线已经绘制完成，移动端没有双击。 解决办法：在移动端想要结束绘制，需要调用endDraw()方法 具体实现代码： 绘制 export function addLine() { return graphicLayer .startDraw({ name: "mars3d Demo", type: "polyline", style: {
ArcGIS Mobile 自定义MapGraphicLayer绘制图形
weixin_30376163的博客
04-10 109
从事过ArcEngine相关工作知道，在ArcEngine中绘制图形有两种存在方式，一种是以要素（feature）的形式，一种是以元素（element）的形式。添加两种不同形式的图形，绘制的方法是不一样的。其中feature需要通过在内存新建或者添加图层，运用编辑工具在图层中添加feature，而element是通过在graphicContainers中添加。grapicContaine...
mars3d点线面的绘制和重置
前端小攻城狮的博客
06-22 2093
mars3d点线面的绘制和重置
[Vue-常见错误]浏览器显示Uncaught runtime errors
最新发布
一个喜欢什么都研究一下的小小后端程序员
06-09 364
在vue.config.js中配置关闭Uncaught runtime errors显示。
Spring Boot、MongoDB、Vue 2和Nginx实现一个小说网站
iku_n的博客
06-08 1327
后端API：使用Spring Boot实现，负责处理数据和业务逻辑。数据库：使用MongoDB存储小说数据。前端页面：使用Vue 2实现，负责展示数据和用户交互。反向代理：使用Nginx进行前后端分离。
vue3如何定义一个组件
Java程序员专栏
06-09 552
注意在子组件的 <template> 中，你使用 {{ propName }} 来显示传递进来的参数值。在父组件中，你使用 :propName="parentMessage" 来将 parentMessage 数据的值绑定到子组件的 propName prop 上。当使用 <script setup> 语法糖时，你不能直接在 <script> 标签内使用 props 选项。在 Vue 3 中，定义一个可以接收参数的组件通常是通过在组件的 props 选项中定义这些参数来完成的。// 其他组件逻辑...
在Vue3中，在AMap上绘制多边形，将多边形的坐标信息通过Django存入PostgreSQL数据库。
03-23
1. 安装AMap API 首先，需要在Vue3项目中安装AMap API，可以通过以下命令进行安装： ``` npm install vue-amap --save ``` 2. 引入AMap API 在Vue3项目的main.js文件中引入AMap API： ```javascript import VueAMap from 'vue-amap'; Vue.use(VueAMap); VueAMap.initAMapApiLoader({ key: 'your amap key', plugin: ['AMap.PolyEditor', 'AMap.MouseTool'] }); ``` 其中，`your amap key`需要替换成自己的AMap API Key。 3. 绘制多边形 在Vue3组件中，可以通过以下代码绘制多边形： ```javascript <template> <div> <el-button @click="startDraw">开始绘制</el-button> <el-button @click="savePolygon">保存多边形</el-button> <el-button @click="clearPolygon">清除多边形</el-button> <div ref="map" style="height: 500px;"></div> </div> </template> <script> export default { data() { return { map: null, mouseTool: null, polygon: null }; }, mounted() { this.initMap(); }, methods: { initMap() { this.map = new AMap.Map(this.$refs.map, { zoom: 13, center: [116.397428, 39.90923] }); this.mouseTool = new AMap.MouseTool(this.map); }, startDraw() { this.mouseTool.polygon({ strokeColor: '#FF33FF', strokeOpacity: 0.2, strokeWeight: 3, fillColor: '#1791fc', fillOpacity: 0.4 }); AMap.event.addListener(this.mouseTool, 'draw', e => { this.polygon = e.obj; }); }, savePolygon() { const path = this.polygon.getPath(); const coordinates = path.map(item => [item.lng, item.lat]); // 将多边形的坐标信息通过axios发送到Django后端进行存储 axios.post('/api/polygon/', { coordinates }).then(response => { console.log(response.data); }); }, clearPolygon() { if (this.polygon) { this.map.remove(this.polygon); this.polygon = null; } } } }; </script> ``` 在上述代码中，通过`this.mouseTool.polygon()`方法创建一个多边形，并通过`AMap.event.addListener()`方法监听`draw`事件，获取绘制的多边形对象。在保存多边形时，通过`getPath()`方法获取多边形的坐标信息，并通过axios发送到Django后端进行存储。 4. 存储多边形 在Django后端中，可以通过以下代码存储多边形： ```python from django.db import models from django.contrib.postgres.fields import ArrayField class Polygon(models.Model): coordinates = ArrayField(ArrayField(models.FloatField())) def __str__(self): return str(self.coordinates) ``` 在上述代码中，通过`ArrayField`字段存储多边形的坐标信息。在存储多边形时，可以通过以下代码： ```python from django.http import JsonResponse from .models import Polygon def save_polygon(request): coordinates = request.POST.get('coordinates') polygon = Polygon(coordinates=coordinates) polygon.save() return JsonResponse({'status': 'success'}) ``` 在上述代码中，通过`request.POST.get()`方法获取前端发送的多边形坐标信息，并存储到数据库中。最后，通过`JsonResponse`返回存储结果。 以上就是在Vue3中，在AMap上绘制多边形，将多边形的坐标信息通过Django存入PostgreSQL数据库的完整流程。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值