VUE 高德地图原生API 实现矢量多边形功能

已于 2022-10-09 15:31:41 修改
阅读量2.9k 收藏 19
点赞数 2
文章标签： js vue
于 2021-08-19 15:56:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zj735539703/article/details/119814899
版权
本文档介绍如何在Vue项目中直接利用高德地图API 2.0实现矢量多边形功能，包括多边形编辑和多个区域查看。提供详细参考资料及实现步骤。
摘要由CSDN通过智能技术生成

目前网上vue封装的第三方组件都是基于高德1.0的版本，使用体验感较差，本文直接是基于2.0官网的API的矢量多边形功能

参考文档

JSAPI 的加载-入门-教程-地图 JS API v2.0|高德地图API (amap.com)

多边形编辑器-矢量覆盖物编辑-示例中心-JS API 2.0 示例 | 高德地图API (amap.com)

矢量图形-覆盖物-教程-地图 JS API v2.0|高德地图API (amap.com)

参考手册-地图 JS API v2.0 | 高德地图API (amap.com)

效果

 

功能

  1. 支持多个区域查看
  2. 单个区域编辑

安装

npm i @amap/amap-jsapi-loader --save

代码

<template>
  <div>
    <div id="container"></div>
    <div class&#
最低0.47元/天 解锁文章
bookc-man
关注
  • 2
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue 引入腾讯地图实现多边形绘制功能
Kamikorosu的博客
07-27 2829
vue 接入腾讯地图实现多边形绘制功能
vue使用高德地图画电子围栏_电子围栏的实现（二）：几何路径法（推荐）
weixin_42300040的博客
01-30 592
在Java语言的开发环境中，提供了一种便捷的方法。类java.awt..geom.GeneralPath提供了根据直线、二次曲线和三次曲线构造的几何路径的方法，同时GeneralPath类继承类Path2D，通过Path2D类提供的方法contains(double x,double y)来判断某个点是否在曲线或直线构成的边界内。package com.test;import java.awt.g...
vue 高德地图 绘制工具的封装实现绘制 矩形 、圆形、多边形、点标记、折线 覆盖物 并编辑
05-07
1：实现对圆形、多边形、点标记、折线 等的绘制； 2：支持单个绘制 或者 多个绘制的选择； 3：支持对绘制后的图形进行删除； 4：支持对绘制后的图形进行编辑，调整； 5：支持根据图形数据显示到地图上，进行后续操作（删除，编辑）； 6：支持获取绘制后的所有覆盖物数据，并返回； 7：支持封装为单个组件，多处调用；
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
10-15
主要介绍了最全vue的vue-amap使用高德地图插件画多边形范围,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
【高德地图】vue使用高德地图（js api）
最新发布
m0_70950838的博客
07-16 1394
vue中使用高德JSapi，添加点标记以及其他覆盖物，高德JSapi的常用操作
vue+高德地图实现多边形范围内标点
weixin_40400844的博客
03-07 2342
高德地图围栏内部标点
高德地图多边形增删改查
08-23
高德地图多边形api
vue2用高德地图实现绘制多边形电子围栏
09-05
vue2用高德地图实现绘制多边形电子围栏
vue使用高德地图点击下钻上浮效果的实现思路
10-16
首先，要了解Vue框架的基本使用和高德地图API的调用方式，理解它们如何结合来实现地图功能。Vue是一个用于构建用户界面的渐进式框架，而高德地图API则提供了地图的展示和交互功能。 在实现点击下钻效果时，可以通过...
在vue中高德地图引入和轨迹的绘制的实现
01-21
vue中使用cdn引入高德地图，并在main.js中进行全局配置。（百度上有高德地图引入与配置方法，这里就不详细介绍）； 1） npm install vue-amap --save 2） import VueAMap from ‘vue-amap' Vue.use(VueAMap); ...
高德地图系列之多边形polygon、行政边界查询districtExplorer、海量麻点MassMarks
热门推荐
Gytha_1的博客
06-14 1万+
多边形polygon： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;map&lt;/title&gt; &lt;script type="text/javascript" src=""&gt;&lt;/script&gt; &lt;style type="
Vue-高德地图-立体多边形绘制
站在巨人的肩膀上前行
04-27 2476
使用 @amap/amap-jsapi-loader 可以方便地在 Vue2 中使用高德地图，同时也可以根据自己的需求添加相应的插件。希望本篇文章能够帮助大家快速上手使用高德地图。
高德地图api多地点自定义显示名字+文字标识
fzxyxf1314的博客
01-09 4177
高德地图api自定义显示地区+文字标识
十分钟玩转 vue3+高德地图AMap+geosjon批量绘制Polygon地块数据展示【一、基础引入配置】
FUN的博客
08-05 2095
最近做项目的时候，由于最近天地图卡的起飞，无奈之下只好改用高德，虽然高德地图文档比较完善，但是多少还是有点坑。建议慢慢食用，能把这篇文章的研究好了，足以轻松在 vue3 中使用高德地图的各种API功能。此文章内容适用ts，使用js的同学请自行举一反三改造代码。.........
vue 高德地图多边形_一个高性能的 Vue 高德地图组件库
weixin_39941792的博客
12-20 300
https://txs1992.github.io/fast-amap/这个想法来源于之前开发的一个项目，该项目需要在 zoom 16 的级别下渲染 (100 * 100) 的小方格，使用高德地图的多边形覆盖物 Polygon 进行渲染，在 mac 13 寸屏幕下渲染 1k+，在外接 27 寸(不太记得多少寸了)显示屏下需要渲染近 3K 的覆盖物。我尝试使用 vue-amap 这个组件库，在 1k...
十分钟玩转 vue3+高德地图AMap+geojson批量绘制Polygon地块数据展示【三、Geojson地图数据批量导入地图】
FUN的博客
08-05 1856
触发选中后，需要做个判断，是否第一次读取 geojson 数据。2.走 getdata 方法直接读取arcgis 转出来的geojson 数据，我这里的数据为gps84坐标数据，需要用高德的API的convertFrom函数，转换成高德高的坐标系。3.在地块上批量添加地块，将地块数据转换成高德坐标之后，调用addpolygon方法开始画出地块；画完地块之后，我们对地块添加一个点击事件，用于绑定自定义属性，点击地块之后能够显示其相关信息数据。如果只需要画1个地块，可以跳过这个方法，直接看四。.........
vue 高德地图 矢量覆盖物绘制 多边形 线面绘制 1.0
来了波，兄嘚
06-04 1278
vue 使用 高德地图矢量图覆盖物绘制1.0
十分钟玩转 vue3+高德地图AMap+geojson批量绘制Polygon地块数据展示【二、创建地图】
FUN的博客
08-05 2432
上诉三步做完之后就会得到一个展示地图的容器，一个显示地图信息的展示板，以及一个用于控制展示信息的操作面板；1、在template标签内，创建container的DOM 用于展示高德地图。接下来开始进入重点的部分，首先我们在 script 标签内引入所需要的组件。2、创建一个div（state-text）用于展示当前鼠标所在的坐标信息。注：本文讲解的内容仅适用 ts 方式，如果写传统的 js 请自行改造代码。至此，你已经完成，地图加载出来，并且能够实时获取鼠标所在坐标的功能；...
vue 高德地图地图新建、保存、编辑、清除绘制多边形
qq_42619759的博客
01-18 4904
index页面 <template> <div> <el-button @click="openEnclosure">绘制围栏</el-button> <draw-enclosure :show.sync="showDialog" :coordinate-string="temp.electronicFencePosition" @coordinate="enclosure" /> </div> <...
vue 高德地图api 利用mousetool绘制矢量图形
04-06
Vue 高德地图 API 提供了 `AMap.MouseTool` 类，可以用来绘制矢量图形。下面是一个简单的示例： ``` ;"> export default { data() { return { map: null, mouseTool: null }; }, mounted() { // 加载...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值