关于唯杰地图（天地图底图）cad和绘制图形工具api使用（一）

已于 2024-01-26 16:31:45 修改
阅读量1.3k 收藏 24
点赞数 17
文章标签： vue
于 2024-01-16 15:15:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/littledidi/article/details/135624560
版权

前提说明：关于cad的解析是后端处理的，本文章只展示前端的部分使用方法，本文章使用的是唯杰的api，不使用天地图的api

唯杰文档地址：快速入手 | 唯杰地图-VJMAP为CAD图WebGIS可视化显示开发提供的一站式解决方案icon-default.png?t=N7T8https://vjmap.com/guide/quickstart.html
介绍 | 唯杰地图-VJMAP为CAD图WebGIS可视化显示开发提供的一站式解决方案icon-default.png?t=N7T8https://vjmap.com/doc/
唯杰示例地址：vjmap-webclient-javascripticon-default.png?t=N7T8https://vjmap.com/demo/#/gallery/map

一、安装唯杰

本示例文章使用的是唯杰的1.0.126版本的api

yarn add  vjmap@1.0.126
npm install vjmap@1.0.126


二、导入地图和cad图形

本示例文章使用的是以天地图为底图作为示例
唯杰文档示例：vjmap-webclient-javascripticon-default.png?t=N7T8https://vjmap.com/demo/#/demo/map/web/02webTianditu项目中我的使用方法：

地图参数：

Map | 唯杰地图-VJMAP为CAD图WebGIS可视化显示开发提供的一站式解决方案icon-default.png?t=N7T8https://vjmap.com/guide/map.html#%E5%8F%82%E6%95%B0

其中：svc是我写的一个js文件
import svc from "@/utils/vjService";

这个是cad的导入方法，需要上传cad图纸至唯杰图纸平台
唯杰地图云端图纸管理平台icon-default.png?t=N7T8https://vjmap.com/app/cloud/#/详细请看文档：快速入手 | 唯杰地图-VJMAP为CAD图WebGIS可视化显示开发提供的一站式解决方案icon-default.png?t=N7T8https://vjmap.com/guide/quickstart.html#%E4%B8%8A%E4%BC%A0%E5%9B%BE%E5%BD%A2

三、覆盖cad图纸

首先是取点

取dwg图纸上面的几个顶点，再在天地图上取相同位置的几个顶点

获取的坐标点和图纸顶点在四参数中使用

至此导入地图和cad图形

littledidi
关注
  • 17
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Python如何使用bokeh包和geojson数据绘制地图
09-17
主要介绍了Python如何使用bokeh包和geojson数据绘制地图,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
CAD图在线Web测量工具代码实现(测量距离、面积、角度等)
vjmap的博客
06-23 1165
CAD如今在各个领域均得到了普遍的应用并大大提高了工程技术人员的工作效率。在桌面端，AutoCAD测量工具已经非常强大；然后在Web端，如何准确、快速的对CAD图在Web进行测量呢?本文实现了: 能Web在线打开AutoCAD图形； 测量距离；测量面积；测量角度；坐标标注；测量时能捕捉Web端CAD图形上面的坐标，提高准确度； 测量时能对捕捉进行开关启用；测量时能启用正交模式；测量时能自定义右键菜单功能；能进行连续测量；测量结束后，能删除已测量的结果。...
基于VUE3开发的CAD图可视化平台代码开源了
vjmap的博客
04-02 2579
CAD图可视化平台旨在打造出一个直观、易于操作的地图展示界面， 为用户提供一种简便、高效、精准的CAD地图Web可视化方案，打造出`CAD`图WEBGIS`低码平台`。
CAD图与互联网地图网页端相互叠加显示技术分析和实现
vjmap的博客
05-18 871
需求分析 之前相关的博文中介绍了如果在Web网页端展示CAD图形(唯杰地图云端图纸管理平台 唯杰地图云端图纸管理平台)，当一些CAD图纸有实际地理坐标位置时，如地形图等，有时候需要和互联网地图叠加进行显示。其主要需求有： CAD图有坐标系时，能自动叠加到互联网地图上 CAD没有坐标系时，能自定义几个公共点，通过公共点叠加到互联网地图上 CAD图与互联网地图能相互叠加。（底图是哪个，就以底图为坐标系） 理论知识 GIS中常用坐标系 （一）WGS84坐标系 WGS-84坐标
基于Web的CAD一张图协同在线制图更新轻量级解决方案[示例已开源]
vjmap的博客
05-31 1337
之前相关的博文中介绍了如果在Web网页端展示CAD图形(唯杰地图云端图纸管理平台 https://vjmap.com/app/cloud)，有不少朋友问，能不能实现一个协同的功能，实现不同部门不同专业间“一张图协同”，解决目前Web端CAD查看图纸更新不及时不同步的痛点！
关于唯杰地图（天地图底图）cad和绘制图形工具api使用（二）
最新发布
littledidi的博客
01-26 1196
然后设置了三个监听方法，分别是创建create、删除delete和点击selectionchange，我这里给创建事件设置了一个参数create，因为创建图形之后会自动点击高亮图形，就会触发点击事件，所以我设置了一个参数阻止他调用点击事件，避免与点击事件方法冲突。创建了一个draw对象，用来存唯杰的绘制工具对象，后面就可以调用draw去进行一些图形绘制工具的操作。这里的话，我因为还需要显示绘制的图形的名称，所以我这里还有一个获取坐标中心点的方法。这里的工具相对全面，有需求可以自己研究。
如何在Vue里打开CAD,DWG文件”
u013725001的专栏
01-12 7722
Node环境安装 这里以一个Vue3工程为例子,首先安装Node下载 | Node.js请根据电脑操作系统安装对应的安装包 步骤 1 : 双击下载后的安装包，如下所示： 步骤 2 : 点击上图的Run(运行)，将出现如下界面： 步骤 3 : 勾选接受协议选项，点击 next（下一步） 按钮 : 步骤 4 : Node.js默认安装目录为 C:\Program Files\nodejs\, 你可以修改目录，并点击 next（下一步）： 步骤 5 : 点击树形图标来选择你需要..
vue【天地图】使用天地图api绘制GeoJson解析，矩形绘画，实现本地js天地图效果
hui_54520的博客
08-04 4394
vue【天地图】使用天地图api绘制GeoJson解析，矩形绘画
天地图的使用
lili0828的博客
09-10 6742
1.国家地理信息公共服务平台https://www.tianditu.gov.cn/ 1).注册用户:进入官网，点右上角注册按钮，根据提示注册 2).申请成为天地图开发者: 注册，登录之后，进入首页，往下拉，可以看到下面的模块，点击右 边【成为开发者】按钮。根据提示填写信息，分个人版和企业版。 3).获取服务许可： 申请成为开发者之后，点击【创建新应用】，申请token。 4).使用api: 回到首页，往下拉，在开发资源模块，选择自...
天地图地图操作接口详解和样例
08-21
天地图地图操作接口详解和样例。
基于天地图数据底图的ArcGIS数据制作包
05-07
基于天地图数据底图的ArcGIS数据制作包，本数据可以直接使用ArcGIS打开，本包已加载天地图影像与栅格数据底图，坐标系为CGCS2000，可以在此数据底图的基础上直接使用ArcGIS标绘数据。
arcgis js api 加载天地图底图
06-13
使用arcgis for js api 加载天地图底图，包含天地图图层：矢量图、影像图、矢量标注、影像标注、水系、区域边线、道路图层，下载后可直接运行。
91地图天地图底图点状符号导出
01-18
91地图天地图底图点状符号kml文件，导出坐标点、cass格式。
echarts中使用天地图的插件示例
01-01
echarts中使用天地图的插件示例，使用echarts中百度地图的插件改写，让其支持天地图的展示展示及使用。，使用echarts中高端地图的插件改写，让其支持天地图的展示及使用。 1.echarts-extension-tmap.js 在高度地图...
CAD_DWG图Web可视化一站式解决方案-唯杰地图-vjmap
vjmap的博客
10-15 1986
背景 DWG图是AutoCAD是私有格式，只能在CAD软件上编辑查看，如何发布至Web上做数据展示，GIS分析应用开发，一直是业内头疼的事情。 传统的办法采用的解析AutoCAD图形绘制，并封装成AcitveX控件，在Web显示。但这需要Web端安装插件，并且只支持windows平台，而更重要的Chrome已不再支持ActiveX技术。 随着新技术的发展，html5技术已非常成熟，在渲染方面技术非常成熟，越来越多的方案采用html5渲染方式。但CAD与GIS在数据结构上存在较大的差异，CAD数据类型较
高德地图与CAD图叠加显示方法汇总及优缺点分析
vjmap的博客
09-14 1563
高德地图应用在许多领域，平常我们用的地图导航，除过正常的地图导航指引功能之外，其实还有很多实用的功能。如高德影像地图应用在包括地理、土地测量、水文学、生态学、气象学以及海洋学等方面。AutoCAD在行业中常用于城市规划、平面设计、建筑师等，这其中也要用到高德地图。最常见的是CAD图与高德地图叠加使用，通过两者叠加直观显示，助力行业提高工作效率。那如何将高德地图与CAD图叠加显示呢？下面听小编把方法一一介绍下以及各种方法的优缺点。
CAD网页Web端显示开发为什么要以WebGIS的思路来开发？
vjmap的博客
10-19 839
背景 在之前的博文CAD图DWG解析WebGIS可视化技术分析总结中讲解了如何把CAD的DWG格式的图纸Web可视化的方案。博文发布后，受到不少同行们的关注，也有不少咨询一些专业问题，其中大家可能疑惑的比较多的是WebGIS网上发布CAD图形和传统的Web上打开CAD图绘制有啥优势。下面针对自己的理解和经验说下自己的看法。 概念 传统的Web发布CAD图形是指把CAD图形进行转换成前端成绘制的格式，如SVG,PDF,F2d,obj等threejs或其他绘制框架所能支持的格式，下载到前端再进行渲染。
CAD图DWG解析WebGIS可视化技术分析总结
hotqin888的专栏
10-15 1637
CAD图DWG解析WebGIS可视化技术分析总结 - vjmap - 博客园 背景 AutoCAD是国际上著名的二维和三维CAD设计软件，用于二维绘图、详细绘制、设计文档和基本三维设计。现已经成为国际上广为流行的绘图工具。.dwg文件格式成为二维绘图的事实标准格式。 但由于AutoCAD是私有格式，只能在CAD软件上编辑查看，如何发布至Web上，并在上面做应用开发，如数据展示，GIS分析等，一直是业内头疼的事情。 解析DWG格式 DWG与DXF DWG格式文件是Auto CAD 软件的专有格式，
【天地图】使用天地图api绘制GeoJson数据
popstarqq的博客
03-24 4903
天地图没有直接提供加载GeoJson数据或者文件的api,但是我们可以借助绘制多边形的方式实现 1 实现效果 绘制如下的矢量多边形效果； 2 实现技术 (1) 首先用ajax请求geojson文件，从文件解析并获取到坐标数据 下面这个方法就是解析geojson返回的featurecollection中的坐标方式；其中可能有多段线稍微处理一下即可 /** * 从featureCollection获取所有linestring * @param {*} featureCollecti..
arcgis api 加载高德地图作为底图
07-01
### 回答1： 要在ArcGIS API中加载高德地图作为底图，需要按以下步骤操作： 1. 获取高德地图的服务URL。可以通过高德地图开放平台提供的API或其他方法获取到高德地图的服务URL。 2. 在ArcGIS API的地图对象中添加图层。首先，创建一个新的ArcGIS地图对象，并将高德地图的服务URL作为底图添加到地图中。 ```javascript var map = new Map({ basemap: { baseLayers: [ new TileLayer({ portalItem: { id: { // 高德地图的服务URL // 例如：http://webrd0{subDomain}.is.autonavi.com/appmaptile?style=6&x={col}&y={row}&z={level} // "{level}" 表示缩放级别, "{col}" 表示列号, "{row}" 表示行号, "{subDomain}" 表示服务器子域 // 要根据高德地图的服务URL的具体格式进行替换 source: "<高德地图的服务URL>" } } }) ] } }); ``` 3. 创建视图对象并将地图对象附加到视图中。将地图对象设置为视图的地图属性，然后将视图附加到指定的DOM元素上。 ```javascript var view = new MapView({ container: "viewDiv", // 将视图附加到具有指定ID的DOM元素上 map: map // 设置视图的地图为之前创建的地图对象 }); ``` 通过以上步骤，就可以在ArcGIS API中成功加载高德地图作为底图了。可以根据具体需求进行其他配置和样式的设定，例如放大倍数、中心点、缩放范围等。 ### 回答2： 要加载高德地图作为ArcGIS API的底图，需要按照以下步骤进行操作。 首先，打开ArcGIS API for JavaScript官方网站，并下载最新的API版本。安装完成后，将它引入到你的项目中。 接下来，你需要在你的HTML文件中创建一个容器，用于显示地图。可以使用div元素，并设置其宽度和高度。 在你的JavaScript代码中，首先创建一个地图对象。使用arcgis对象中的Map类可以实现这一功能。在创建地图对象时，需要指定地图容器的ID以及其他的可选参数，如初始缩放级别和初始中心点。 接下来，你需要创建一个底图图层对象，并将其添加到地图对象中。使用arcgis对象中的TileLayer类可以加载高德地图服务作为底图。在创建底图图层对象时，需要指定该服务的URL。 最后，将地图对象添加到地图容器中，并显示地图。使用arcgis对象中的MapView类可以实现这一功能。在创建MapView对象时，需要指定地图对象、地图容器对象以及其他的可选参数，如初始视图范围。 加载高德地图作为ArcGIS API的底图需要使用合适的API版本，创建地图对象、底图图层对象和视图对象，并将它们按照正确的顺序进行添加和显示。通过以上步骤，你可以成功加载高德地图作为ArcGIS API的底图。 ### 回答3： 要将高德地图作为ArcGIS API的底图，可以按照以下步骤进行： 1. 首先，在ArcGIS API的官方文档中找到相关的代码示例或文档，这些示例和文档将指导你如何加载外部地图服务。 2. 打开ArcGIS API的开发环境，创建一个新的HTML文件。 3. 在HTML文件中，引入ArcGIS API的JavaScript库文件，并对其进行初始化。 4. 在JavaScript代码中，创建一个地图对象，并指定地图的初始显示范围、放大级别等。 5. 使用ArcGIS API提供的图层对象，加载高德地图的服务URL作为底图图层。 6. 设置地图对象的底图图层为加载的高德地图图层。 7. 运行或部署该HTML文件，以查看加载的高德地图作为ArcGIS API的底图的效果。 需要注意的是，使用高德地图作为ArcGIS API的底图需要确保高德地图服务的URL和相关访问秘钥是有效的，并且遵循高德地图和ArcGIS API的使用协议和限制。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值