vue-amap-CSDN博客

原创 @vuemap/vue-amap高德vue组件库常用技巧（一）

vuemap/vue-amap是基于高德JSAPI2.0、Loca2.0封装的vue组件库，支持vue2、vue3版本。在使用组件库进行地图开发时，常常根据需求需要做一些特殊的功能开发，今天主要介绍一些日常开发中常用的开发功能技巧。

2023-07-06 10:22:00 2024

原创 vue3中使用高德地图

@vuemap/vue-amap插件是在vue-amap基础上重新处理封装，vue版本升级为3.0，事件绑定方式调整为v-on，支持typescript，支持IDE提示（webstorm和vscode），支持tree-shaking，对高德可视化组件loca进行封装，提供默认的图层样式处理。

2023-07-06 10:19:50 1577

原创 @vuemap/vue-amap组件初始化与加载

vuemap/vue-amap的加载主要是通过方法，内部实现则是使用高德官方提供的插件来实现，通过动态添加script来实现地图JS文件的加载。

2023-07-06 10:18:42 1263

原创 @vuemap/vue-amap高德vue组件库常用技巧（九）- threejs

在上一个分享中，主要讲解了如何在地图上绘制常用的线。这一次主要讲解怎么在高德地图中使用threejs。组件库中已经封装了基础的threejs组件，包括three图层、灯光组件、gltf组件、3dtiles组件等，今天主要介绍three图层以及怎么在叠加threejs的同时使用threejs的后处理功能。

2023-12-03 12:55:52 843

vuemap/district-cluster是高德地图JSAPI2.0的开源扩展插件，该插件可用于基于区划的点的聚合功能，该插件基于AMapUI的DistrictCluster修改而成，因此API基本类似。同时由于API基本一致，从AMapUI迁移过来也会很方便。AMapUI本身拥有一个区划聚合插件，但该插件基于原本的AMap 1.x版本，只支持2D，因此基于AMapUI本身的聚合逻辑重新实现区划面和聚合点的实现逻辑。配套高德vue组件库。

2023-12-01 23:58:31 391

原创 @vuemap/vue-amap高德vue组件库常用技巧（八）- 线

vuemap/vue-amap是基于高德JSAPI2.0、Loca2.0封装的vue组件库，支持vue2、vue3版本。在上一个分享中，主要讲解了如何在地图上通过鼠标组件实现电子围栏的绘制。这一次主要讲解怎么使用地图提供的各种线组件。组件库中对于线的展示提供了几个不同的组件，有基础的矢量线、适合大数据量的loca的线、动态线、连接线等等，下面对于各个场景下线的使用进行详细说明。

2023-12-01 23:18:10 606

原创 @vuemap/vue-amap高德vue组件库常用技巧（七）- 电子围栏

矢量图形绘制主要用于电子围栏等场景使用，在使用过程中我们一般需要绘制点、折线、圆、矩形、多边形。高德提供了一个功能丰富的插件`AMap.MouseTool`，组件库在该插件的基础上预置了很多功能，包含数据处理，鼠标tip提示等等。下面我们使用一个细致的示例来展示怎么通过`el-amap-mouse-tool`组件以及其他基础的点、线等组件实现电子围栏功能

2023-11-30 22:39:07 870

原创 @vuemap/vue-amap高德vue组件库常用技巧（六）- 点聚合

vuemap/vue-amap是基于高德JSAPI2.0、Loca2.0封装的vue组件库，支持vue2、vue3版本。在上一个分享中，主要讲解了如何在地图上展示动态的标记。这一次主要讲解怎么基于地图组件实现数据的聚合效果展示。对于数据的聚合展示，日常使用中常用的展示方式就是点聚合以及热力图方式。下面详细介绍各自对应的组件的应用。

2023-11-30 20:04:54 961 2

原创 @vuemap/vue-amap高德vue组件库常用技巧（五）- 动态标记

vuemap/vue-amap是基于高德JSAPI2.0、Loca2.0封装的vue组件库，支持vue2、vue3版本。在上一个分享中，主要讲解了瓦片图层加载的，包含火星坐标系以及其他坐标系的瓦片，这一次分享着重讲怎么在高德地图中加载动图的使用技巧。对于动图，我们第一反应是使用gif进行效果展示，除了gif，我们还可以使用loca里的帧动画、视频播放、threejs等等。下面就详细进行介绍。

2023-11-29 22:56:05 356

原创 @vuemap/vue-amap高德vue组件库常用技巧（四）- 瓦片图层

vuemap/vue-amap是基于高德JSAPI2.0、Loca2.0封装的vue组件库，支持vue2、vue3版本。在上一个分享中，主要讲解了单信息框与多信息框的使用的使用情况，这一次分享着重讲怎么在高德地图中加载第三方瓦片的使用技巧。对于瓦片加载，日常使用时会碰到两种坐标系，一个是基于WGS84生成的瓦片、另一个是基于火星坐标系生成的瓦片。

2023-11-29 21:39:30 357

原创 @vuemap/vue-amap高德vue组件库常用技巧（三）- 信息框

vuemap/vue-amap是基于高德JSAPI2.0、Loca2.0封装的vue组件库，支持vue2、vue3版本。在上一个分享中，主要讲解了不同数量级的标号组件的使用情况，这一次分享着重讲经常与标号配套使用的信息框的使用技巧。对于信息框，高德地图官方设定的是同一时间地图上只能显示一个infoWindow，但在特定的需求下可能会要求地图上对于出现的几个标号都给它显示对应的信息框，这时候需要做一些特殊的处理。

2023-11-28 23:48:48 286

原创 @vuemap/vue-amap高德vue组件库常用技巧（二）- 点标记

vuemap/vue-amap是基于高德JSAPI2.0、Loca2.0封装的vue组件库，支持vue2、vue3版本。在使用地图做可视化效果展示时，最常见的就是标号功能。日常开发中可能会使用到几十个、几百个、甚至几万个标号的展示，今天主要介绍在使用时怎么对不同数量级、不同需求的标号进行展示。

2023-11-28 22:38:53 1034

原创高德地图加载3dtiles

vuemap/layer-3dtiles是高德地图JSAPI2.0的开源扩展插件，该插件可用于加载3DTile数据，插件依赖。插件文档地址配套高德vue组件库。

2023-10-20 11:30:20 931

原创高德叠加echarts图表方法介绍

地图叠加图表功能虽然是个小众需求，但一直以来都不定时会有人咨询地图能否叠加echarts图表（其他图表使用方式类似），今天就来介绍下在高德地图中怎么叠加图表。

2023-10-20 11:25:59 479 1

原创高德JS2.0瓦片纠偏图层插件发布

vuemap/amap-xyz-layer是高德地图JSAPI2.0的开源扩展插件，该插件可用于加载瓦片图层，插件支持瓦片的坐标系纠偏，当前支持`WGS84` `GCJ02` `BD09`三种坐标。插件文档地址。

2023-07-31 09:23:58 265

u010974711的博客