vue 中 openlayers扩展自定义投影

最新推荐文章于 2024-07-25 09:17:00 发布
最新推荐文章于 2024-07-25 09:17:00 发布
阅读量642 收藏
点赞数
文章标签： vue.js elementui sass
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34184472/article/details/125078835
版权
本文介绍了如何通过proj4模块安装和注册自定义投影，包括中国2000国家大地坐标系（CGCS2000）的多种Gauss-Kruger带区投影及其对应的EPSG格式。展示了如何在openlayers中使用这些自定义投影进行地图展示。
摘要由CSDN通过智能技术生成

1.先安装proj4,

2.引入proj4模块和openlayers的proj4包下的register方法.

3.用proj4定义扩展的自定义投影，用register注册。

4.EPSG proj4格式定义列表

# Xian 1980
<4610> +proj=longlat +a=6378140 +b=6356755.288157528 +no_defs  <>
# China Geodetic Coordinate System 2000
<4490> +proj=longlat +ellps=GRS80 +no_defs  <>
# WGS 84
<4326> +proj=longlat +datum=WGS84 +no_defs  <>
# CGCS2000 / Gauss-Kruger zone 13
<4491> +proj=tmerc +lat_0=0 +lon_0=75 +k=1 +x_0=13500000 +y_0=0 +ellps=GRS80 +units=m +no_defs  <>
# CGCS2000 / Gauss-Kruger zone 14
<4492> +proj=tmerc +lat_0=0 +lon_0=81 +k=1 +x_0=14500000 +y_0=0 +ellps=GRS80 +units=m +no_defs  <>
# CGCS2000 / Gauss-Kruger zone 15
<4493> +proj=tmerc +lat_0=0 +lon_0=87 +k=1 +x_0=15500000 +y_0=0 +ellps=GRS80 +units=m +no_defs  <>
# CGCS2000 / Gauss-Kruger zone 16
<4494> +proj=tmerc +lat_0=0 +lon_0=93 +k=1 +x_0=16500000 +y_0=0 +ellps=GRS80 +units=m +no_defs  <>
# CGCS2000 / Gauss-Kruger zone 17
<4495> +proj=tmerc +lat_0=0 +lon_0=99 +k=1 +x_0=17500000 +y_0=0 +ellps=GRS80 +units=m +no_defs  <>
# CGCS2000 / Gauss-Kruger zone 18
<4496> +proj=tmerc +lat_0=0 +lon_0=105 +k=1 +x_0=18500000 +y_0=0 +ellps=GRS80 +units=m +no_defs  <>
# CGCS2000 / Gauss-Kruger zone 19
<4497> +proj=tmerc +lat_0=0 +lon_0=111 +k=1 +x_0=19500000 +y_0=0 +ellps=GRS80 +units=m +no_defs  <>
# CGCS2000 / Gauss-Kruger zone 20
<4498> +proj=tmerc +lat_0=0 +lon_0=117 +k=1 +x_0=20500000 +y_0=0 +ellps=GRS80 +units=m +no_defs  <>
# CGCS2000 / Gauss-Kruger zone 21
<4499> +proj=tmerc +lat_0=0 +lon_0=123 +k=1 +x_0=21500000 +y_0=0 +ellps=GRS80 +units=m +no_defs  <>
# CGCS2000 / Gauss-Kruger zone 22
<4500> +proj=tmerc +lat_0=0 +lon_0=129 +k=1 +x_0=22500000 +y_0=0 +ellps=GRS80 +units=m +no_defs  <>
# CGCS2000 / Gauss-Kruger zone 23
<4501> +proj=tmerc +lat_0=0 +lon_0=135 +k=1 +x_0=23500000 +y_0=0 +ellps=GRS80 +units=m +no_defs  <>
# CGCS2000 / Gauss-Kruger CM 75E
<4502> +proj=tmerc +lat_0=0 +lon_0=75 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs  <>
# CGCS2000 / Gauss-Kruger CM 81E
<4503> +proj=tmerc +lat_0=0 +lon_0=81 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs  <>
# CGCS2000 / Gauss-Kruger CM 87E
<4504> +proj=tmerc +lat_0=0 +lon_0=87 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs  <>
# CGCS2000 / Gauss-Kruger CM 93E
<4505> +proj=tmerc +lat_0=0 +lon_0=93 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs  <>
# CGCS2000 / Gauss-Kruger CM 99E
<4506> +proj=tmerc +lat_0=0 +lon_0=99 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs  <>
# CGCS2000 / Gauss-Kruger CM 105E
<4507> +proj=tmerc +lat_0=0 +lon_0=105 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs  <>
# CGCS2000 / Gauss-Kruger CM 111E
<4508> +proj=tmerc +lat_0=0 +lon_0=111 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs  <>
# CGCS2000 / Gauss-Kruger CM 117E
<4509> +proj=tmerc +lat_0=0 +lon_0=117 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs  <>
# CGCS2000 / Gauss-Kruger CM 123E
<4510> +proj=tmerc +lat_0=0 +lon_0=123 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs  <>
# CGCS2000 / Gauss-Kruger CM 129E
<4511> +proj=tmerc +lat_0=0 +lon_0=129 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs  <>
# CGCS2000 / Gauss-Kruger CM 135E
<4512> +proj=tmerc +lat_0=0 +lon_0=135 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs  <>
# CGCS2000 / 3-degree Gauss-Kruger zone 25
<4513> +proj=tmerc +lat_0=0 +lon_0=75 +k=1 +x_0=25500000 +y_0=0 +ellps=GRS80 +units=m +no_defs  <>
# CGCS2000 / 3-degree Gauss-Kruger zone 26
<4514> +proj=tmerc +lat_0=0 +lon_0=78 +k=1 +x_0=26500000 +y_0=0 +ellps=GRS80 +units=m +no_defs  <>
# CGCS2000 / 3-degree Gauss-Kruger zone 27
<4515> +proj=tmerc +lat_0=0 +lon_0=81 +k=1 +x_0=27500000 +y_0=0 +ellps=GRS80 +units=m +no_defs  <>
# CGCS2000 / 3-degree Gauss-Kruger zone 28
<4516> +proj=tmerc +lat_0=0 +lon_0=84 +k=1 +x_0=28500000 +y_0=0 +ellps=GRS80 +units=m +no_defs  <>
# CGCS2000 / 3-degree Gauss-Kruger zone 29
<4517> +proj=tmerc +lat_0=0 +lon_0=87 +k=1 +x_0=29500000 +y_0=0 +ellps=GRS80 +units=m +no_defs  <>
# CGCS2000 / 3-degree Gauss-Kruger zone 30
<4518> +proj=tmerc +lat_0=0 +lon_0=90 +k=1 +x_0=30500000 +y_0=0 +ellps=GRS80 +units=m +no_defs  <>
# CGCS2000 / 3-degree Gauss-Kruger zone 31
<4519> +proj=tmerc +lat_0=0 +lon_0=93 +k=1 +x_0=31500000 +y_0=0 +ellps=GRS80 +units=m +no_defs  <>
# CGCS2000 / 3-degree Gauss-Kruger zone 32
<4520> +proj=tmerc +lat_0=0 +lon_0=96 +k=1 +x_0=32500000 +y_0=0 +ellps=GRS80 +units=m +no_defs  <>
# CGCS2000 / 3-degree Gauss-Kruger zone 33
<4521> +proj=tmerc +lat_0=0 +lon_0=99 +k=1 +x_0=33500000 +y_0=0 +ellps=GRS80 +units=m +no_defs  <>
# CGCS2000 / 3-degree Gauss-Kruger zone 34
<4522> +proj=tmerc +lat_0=0 +lon_0=102 +k=1 +x_0=34500000 +y_0=0 +ellps=GRS80 +units=m +no_defs  <>
# CGCS2000 / 3-degree Gauss-Kruger zone 35
<4523> +proj=tmerc +lat_0=0 +lon_0=105 +k=1 +x_0=35500000 +y_0=0 +ellps=GRS80 +units=m +no_defs  <>
# CGCS2000 / 3-degree Gauss-Kruger zone 36
<4524> +proj=tmerc +lat_0=0 +lon_0=108 +k=1 +x_0=36500000 +y_0=0 +ellps=GRS80 +units=m +no_defs  <>
# CGCS2000 / 3-degree Gauss-Kruger zone 37
<4525> +proj=tmerc +lat_0=0 +lon_0=111 +k=1 +x_0=37500000 +y_0=0 +ellps=GRS80 +units=m +no_defs  <>
# CGCS2000 / 3-degree Gauss-Kruger zone 38
<4526> +proj=tmerc +lat_0=0 +lon_0=114 +k=1 +x_0=38500000 +y_0=0 +ellps=GRS80 +units=m +no_defs  <>
# CGCS2000 / 3-degree Gauss-Kruger zone 39
<4527> +proj=tmerc +lat_0=0 +lon_0=117 +k=1 +x_0=39500000 +y_0=0 +ellps=GRS80 +units=m +no_defs  <>
# CGCS2000 / 3-degree Gauss-Kruger zone 40
<4528> +proj=tmerc +lat_0=0 +lon_0=120 +k=1 +x_0=40500000 +y_0=0 +ellps=GRS80 +units=m +no_defs  <>
# CGCS2000 / 3-degree Gauss-Kruger zone 41
<4529> +proj=tmerc +lat_0=0 +lon_0=123 +k=1 +x_0=41500000 +y_0=0 +ellps=GRS80 +units=m +no_defs  <>
# CGCS2000 / 3-degree Gauss-Kruger zone 42
<4530> +proj=tmerc +lat_0=0 +lon_0=126 +k=1 +x_0=42500000 +y_0=0 +ellps=GRS80 +units=m +no_defs  <>
# CGCS2000 / 3-degree Gauss-Kruger zone 43
<4531> +proj=tmerc +lat_0=0 +lon_0=129 +k=1 +x_0=43500000 +y_0=0 +ellps=GRS80 +units=m +no_defs  <>
# CGCS2000 / 3-degree Gauss-Kruger zone 44
<4532> +proj=tmerc +lat_0=0 +lon_0=132 +k=1 +x_0=44500000 +y_0=0 +ellps=GRS80 +units=m +no_defs  <>
# CGCS2000 / 3-degree Gauss-Kruger zone 45
<4533> +proj=tmerc +lat_0=0 +lon_0=135 +k=1 +x_0=45500000 +y_0=0 +ellps=GRS80 +units=m +no_defs  <>
# CGCS2000 / 3-degree Gauss-Kruger CM 75E
<4534> +proj=tmerc +lat_0=0 +lon_0=75 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs  <>
# CGCS2000 / 3-degree Gauss-Kruger CM 78E
<4535> +proj=tmerc +lat_0=0 +lon_0=78 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs  <>
# CGCS2000 / 3-degree Gauss-Kruger CM 81E
<4536> +proj=tmerc +lat_0=0 +lon_0=81 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs  <>
# CGCS2000 / 3-degree Gauss-Kruger CM 84E
<4537> +proj=tmerc +lat_0=0 +lon_0=84 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs  <>
# CGCS2000 / 3-degree Gauss-Kruger CM 87E
<4538> +proj=tmerc +lat_0=0 +lon_0=87 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs  <>
# CGCS2000 / 3-degree Gauss-Kruger CM 90E
<4539> +proj=tmerc +lat_0=0 +lon_0=90 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs  <>
# CGCS2000 / 3-degree Gauss-Kruger CM 93E
<4540> +proj=tmerc +lat_0=0 +lon_0=93 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs  <>
# CGCS2000 / 3-degree Gauss-Kruger CM 96E
<4541> +proj=tmerc +lat_0=0 +lon_0=96 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs  <>
# CGCS2000 / 3-degree Gauss-Kruger CM 99E
<4542> +proj=tmerc +lat_0=0 +lon_0=99 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs  <>
# CGCS2000 / 3-degree Gauss-Kruger CM 102E
<4543> +proj=tmerc +lat_0=0 +lon_0=102 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs  <>
# CGCS2000 / 3-degree Gauss-Kruger CM 105E
<4544> +proj=tmerc +lat_0=0 +lon_0=105 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs  <>
# CGCS2000 / 3-degree Gauss-Kruger CM 108E
<4545> +proj=tmerc +lat_0=0 +lon_0=108 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs  <>
# CGCS2000 / 3-degree Gauss-Kruger CM 111E
<4546> +proj=tmerc +lat_0=0 +lon_0=111 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs  <>
# CGCS2000 / 3-degree Gauss-Kruger CM 114E
<4547> +proj=tmerc +lat_0=0 +lon_0=114 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs  <>
# CGCS2000 / 3-degree Gauss-Kruger CM 117E
<4548> +proj=tmerc +lat_0=0 +lon_0=117 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs  <>
# CGCS2000 / 3-degree Gauss-Kruger CM 120E
<4549> +proj=tmerc +lat_0=0 +lon_0=120 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs  <>
# CGCS2000 / 3-degree Gauss-Kruger CM 123E
<4550> +proj=tmerc +lat_0=0 +lon_0=123 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs  <>
# CGCS2000 / 3-degree Gauss-Kruger CM 126E
<4551> +proj=tmerc +lat_0=0 +lon_0=126 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs  <>
# CGCS2000 / 3-degree Gauss-Kruger CM 129E
<4552> +proj=tmerc +lat_0=0 +lon_0=129 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs  <>
# CGCS2000 / 3-degree Gauss-Kruger CM 132E
<4553> +proj=tmerc +lat_0=0 +lon_0=132 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs  <>
# CGCS2000 / 3-degree Gauss-Kruger CM 135E
<4554> +proj=tmerc +lat_0=0 +lon_0=135 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs  <>
 

養狗散戶
关注
Openlayers实例详解
08-09
本课程选取了OpenLayers一些具有典型代表性的实例进行详解。讲解实例过程中对涉及到的相关知识点进行穿插分析介绍，适合初学者对OpenLayers形成整体认识、树立学习信心。课程涉及到map、view、projection、layer、source、feature、style、overlay、control等组件的实例分析。
全网最新版openlayers视频教程
02-27
学习关于二维地理图层渲染，投影转换，各种数据类型渲染，OGC服务，各种地图交互
数据分析或处理中关于坐标系的一些事
最新发布
craybb的博客
07-25 1655
地理数据本身是地球表面一个位置的映射。但地球并不是一个正球体，而是一个两极稍扁、赤道略鼓的不规则球体。2011年，GOCE卫星的一幅新大地水准面地图想象中的地球：（1）形状的不规则性地球表面受到山脉、海洋深度、地形变化以及地球内部密度分布不均的影响，导致地球的形状在局部和整体上都有所差异。这种不规则性使得建立一个通用的数学模型来描述地球的形状变得复杂。（2）重力场的复杂性地球的重力场不是均匀的，它随位置而变化，尤其是在地形起伏较大的地区。
vue3实现three.js三维地图组件封装实现
weixin_42496466的博客
10-27 3450
vue3实现three.js三维地图组件封装实现
openlayers实现坐标转换（通过proj4js）
傲骨雄风的博客
07-01 9856
21.引用proj4js文件 <script type="text/javascript" src="https://cdn.bootcss.com/proj4js/2.5.0/proj4.js"></script> 2.定义投影坐标系统 1)国家2000地理坐标系 proj4.defs("EPSG:4490","+proj=longlat +ellps=GR...
Proj4坐标转换
m0_55534317的博客
07-18 7125
这里我们介绍如何设置一个投影坐标系，以EPSG3395为例进行讲解确定坐标系参数我们通过浏览器直接打开http设置坐标系最终我们获取到的内容为+proj=merc+lon_0=0+k=1+x_0=0+y_0=0+ellps=WGS84+datum=WGS84+units=m+no_defs设置好坐标系，下一步我们将进行坐标转换。.........
使用OpenLayers3 添加地图鼠标右键菜单
11-22
在OpenLayers 3中添加地图鼠标右键菜单是一项常见的需求，可以帮助用户自定义地图交互行为。要实现这一功能，我们需要了解OpenLayers的工作原理，并掌握如何处理鼠标事件和地图坐标转换。 首先，OpenLayers是一个...
OpenLayers地图组件
02-21
在本文中，我们将深入探讨如何使用OpenLayers地图组件以及与Vue框架的结合。 首先，`ol-map.js`可能包含自定义的地图组件实现，它基于OpenLayers的核心功能来提供更简洁的API。这个文件可能封装了地图的基本操作，...
openlayers加载瓦片地图并手动标记坐标点
04-29
OpenLayers 是一个强大的开源JavaScript库，用于在Web浏览器中创建交互式地图应用。它支持多种数据源，包括瓦片地图，使得开发者可以轻松地将地理信息集成到网站中。本教程将详细介绍如何使用OpenLayers加载瓦片地图...
OpenLayers实现图层切换控件
10-14
在OpenLayers中，图层切换控件是用于让用户在多个图层之间自由切换的重要功能。由于OpenLayers库本身并未直接提供这样的控件，开发者需要自定义来实现这一功能。本文将详细介绍如何利用OpenLayers创建一个图层切换...
基于openlayers实现角度测量功能
10-14
在OpenLayers这个强大的...通过扩展OpenLayers的基本功能，我们可以满足更复杂的地图交互需求，提高用户体验，并为各种GIS应用提供更丰富的工具。对于开发者而言，掌握这些技能有助于构建更加专业和全面的地图应用。
vue-video-player实现实时视频播放（监控设备-rtmp流）
热门推荐
liona_koukou的博客
11-13 4万+
  监控设备播放效果如下   1、vue项目安装vue-video-player npm install vue-video-player --save   2、编写视频播放组件（放上完整的组件例子，父组件调用时给videoSrc和playerOptions.sources[0].src赋值就可以播放了，具体操作有注释） 注：style样式部分用了lang=scss，如果自...
3. OpenLayers 教程：地图视图与投影 （结合Vue 详细教程）
全栈三维GIS开发工程师，擅长Cesium、OpenLayers、Three.js、WebGL、Vue、Django、GDAL和QGIS技术。在这个博客里，我将分享我的开发经验、技术心得和项目案例，希望能为GIS爱好者和开发者提供有价值的参考。
06-11 1188
本篇文章主要介绍了 OpenLayers 的地图视图与投影相关概念。首先，文章讲解了地图视图基本概念，以及如何控制地图缩放级别、中心点与限制范围；其次，文章详细介绍了地图投影与坐标转换的方法，并展示了如何在实际应用中使用地理坐标系与投影坐标系进行操作。通过学习本篇文章，读者可以更好地理解 OpenLayers 中的地图视图与投影，并能够灵活运用地理坐标与投影坐标在实际项目中进行开发。
Openlayers使用Proj4js坐标转换cgcs2000分带（zone）投影的问题
GIS小虫的博客
05-12 3764
问题源于使用4528投影按照官网示例定义view时地图一片空白，于是开始了对Proj4js和投影转换的抽丝剥茧，这里记录下了解的知识和最后的结论。 官网示例和Proj4js的使用 OL示例见wms-image-custom-proj 这里简单介绍下proj4，我认知的proj4是基于一些约定参数组成的用于定义坐标参考的一组参数，和WKT相比更简约，省略了WKT里的完整参数定义。比如4528的wkt PROJCRS["CGCS2000 / 3-degree Gauss-Kruger zone 40", .
Openlayers源码阅读（九）：扩展坐标系
高端客户
01-28 989
proj4 porjection get() transform
Openlayers 教程 26 - 自定义投影坐标系 - 数据转换以及在线转换工具
linzi19900517的博客
12-12 2923
工作中经常会遇到转换坐标的情况，一般都会写代码搞定，但是有时候只需要查看一下数据，犯不上专门搞段代码，这里整个在线工具，提供使用。
OpenLayers自定义圆锥投影中国地图
YuWebGIS
08-30 1334
圆锥投影是横版中国地图常用的地图投影，正式名称为正轴等面积割圆锥投影。横版中国地图具体参数为，中央经线110°E，标准纬线25°N、47°N。
openlayers自定义投影瓦片
weixin_43055079的博客
03-16 629
环境 后端输出 阿伯斯投影下的瓦片地图 路径：http://localhost:5000/tiles/file/z/x/y.png 前端： 需要重定义投影 方法 //定义投影 proj4.defs( 'EPSG:102028', '+proj=aea +lat_1=27 +lat_2=45 +lat_0=35 +lon_0=105 +x_0=0 +y_0=0 +ellps=WGS84 +datum=WGS84 +units=mm +no_defs'
vue openlayers实现自定义绘图控件
05-31
要实现自定义绘图控件，需要使用Vue和OpenLayers的组件。首先，在Vue组件中引入OpenLayers库： ```javascript import 'ol/ol.css'; import Map from 'ol/Map'; import View from 'ol/View'; import { Draw, Modify, Snap } from 'ol/interaction'; import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer'; import { OSM, Vector as VectorSource } from 'ol/source'; import { Circle as CircleStyle, Fill, Stroke, Style } from 'ol/style'; ``` 然后，在Vue组件中定义一个地图容器和一个绘图控件容器： ```html <template> <div> <div ref="map" class="map"></div> <div ref="draw" class="draw"></div> </div> </template> ``` 接下来，在Vue组件的mounted钩子函数中初始化地图和绘图控件： ```javascript mounted() { // 初始化地图 const map = new Map({ target: this.$refs.map, layers: [ new TileLayer({ source: new OSM() }) ], view: new View({ center: [0, 0], zoom: 2 }) }); // 初始化绘图控件 const source = new VectorSource(); const vector = new VectorLayer({ source: source, style: new Style({ fill: new Fill({ color: 'rgba(255, 255, 255, 0.2)' }), stroke: new Stroke({ color: '#ffcc33', width: 2 }), image: new CircleStyle({ radius: 7, fill: new Fill({ color: '#ffcc33' }) }) }) }); map.addLayer(vector); const draw = new Draw({ source: source, type: 'Circle' }); this.draw = draw; map.addInteraction(draw); const modify = new Modify({ source: source }); map.addInteraction(modify); const snap = new Snap({ source: source }); map.addInteraction(snap); } ``` 在这个例子中，绘图控件使用了一个圆形绘图，通过Draw交互器实现，使用Modify和Snap交互器进行修改和捕捉。 最后，可以通过Vue的方法来控制绘图控件的启停，例如在一个按钮的点击事件中： ```javascript methods: { startDraw() { this.draw.setActive(true); }, stopDraw() { this.draw.setActive(false); } } ``` 这样就可以实现一个自定义绘图控件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值