vue 高德地图矢量覆盖物绘制多边形线面绘制 1.0

效果图如下：

<template><div class="container"><div id="container"></div><div class="input-card" style="width: 120px"><button class="btn" @click="createPolygon()" style="margin-bottom: 5px">新建</button><button class="btn" @click="polyEditor.open()" style="margin-bottom: 5px">开始编辑</button><button class="btn" @click="polyEditor.close()">结束编辑</button></div></div>
</template><script>
import AMapLoader from "@amap/amap-jsapi-loader";
export default {name: "AreaMap",data() {return {map: null,polyEditor: null,};},mounted() {this.echart();},methods: {echart() {AMapLoader.load({key: "xxx", // 申请好的Web端开发者Key，首次调用 load 时必填version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15plugins: ["AMap.ToolBar","AMap.Driving","AMap.PolygonEditor","AMap.PlaceSearch",], // 需要使用的的插件列表，如比例尺'AMap.Scale'等}).then((AMap) => {this.map = new AMap.Map("container", {resizeEnable: true,zoom: 8, //初始化地图级别center: [114.573471, 25.128443], //初始化地图中心点位置});var path1 = [[116.475334, 39.997534],[116.476627, 39.998315],[116.478603, 39.99879],[116.478529, 40.000296],[116.475082, 40.000151],[116.473421, 39.998717],];var path2 = [[116.474595, 40.001321],[116.473526, 39.999865],[116.476284, 40.000917],];var polygon1 = new AMap.Polygon({path: path1,});var polygon2 = new AMap.Polygon({path: path2,});this.map.add([polygon1, polygon2]);this.map.setFitView();this.polyEditor = new AMap.PolygonEditor(this.map);console.log(this.polyEditor);console.dir(this.polyEditor);// this.polyEditor.addAdsorbPolygons([polygon1, polygon2]);this.polyEditor.on("add", function (data) {console.log(data);var polygon = data.target;// this.polyEditor.addAdsorbPolygons(polygon);polygon.on("dblclick", () => {this.polyEditor.setTarget(polygon);this.polyEditor.open();});});polygon1.on("dblclick", () => {this.polyEditor.setTarget(polygon1);this.polyEditor.open();});polygon2.on("dblclick", () => {this.polyEditor.setTarget(polygon2);this.polyEditor.open();});this.polyEditor.setTarget(polygon2);this.polyEditor.open();}).catch((e) => {console.log(e);});},createPolygon() {this.polyEditor.close();this.polyEditor.setTarget();this.polyEditor.open();},},
};
</script><style lang="scss" scoped>
#container {width: 1000px;height: 1000px;
}
</style>

新创建的高德key还需要引入密钥

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><meta name="renderer" content="webkit" /><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /><meta name=referrer content=no-referrer><link rel="icon" href="<%= BASE_URL %>favicon.ico" /><title><%= webpackConfig.name %></title>
</head><body><div id="app"></div><!-- built files will be auto injected --><script>window._AMapSecurityConfig = {securityJsCode: "xxx 高德开发中心密钥",};</script>
</body>
</html>

vue 高德地图矢量覆盖物绘制多边形线面绘制 1.0相关推荐

vue[高德地图行车路径规划以及路线记录绘制操作]
最近的一个项目中需要根据需求将地图上画出一条高速公路,然后将这条高速公路的行车轨迹绘制成一条带有颜色路线以便后续插入内容. 看遍了不少高德地图的api内容以及搜索了不少的网上资源,发现可以通过路径规划 ...
vue+高德地图实现多边形范围内标点
vue+高德地图实现多边形范围内标点具体实现: 一.安装并引入高德地图: 二.创建一个aMap地图文件: 三.aMap上创建多边形围栏: 四.配置围栏.地图点击事件: 五.地图点击标点事件: 本篇文 ...
vue+高德地图绘制路径
一.vue+高德地图开发最近开发项目地图用的比较频繁,比如高德地图.百度地图或者echars地图,而且大都是用来做路径展示,所以今天说说高德地图的使用(非全面的高德地图使用) 使用的是vue cli ...
Vue 高德地图 js API Loca 如何使用连接线图层、脉冲连线图层
Vue 高德地图 js API Loca 如何使用连接线图层.脉冲连线图层阅读此文你需要已经了解并掌握的: 已经会使用常规地图的生成方式已经了解如何载入 Loca 插件如果不了解,可以查看我之 ...
Vue+高德地图api
文章目录前言一.准备工作 1.申请应用 2.引入 3.创建地图二.使用高德地图 1.覆盖物 (1) 点标记 (2) 海量点标记 (3) 轨迹回放 2.矢量图形 (1) 多边形 3.图层 (1) ...
利用vue+高德地图API 实现用户的运动轨迹
利用vue+高德地图API 实现用户的运动轨迹高德地图网址:https://lbs.amap.com/api/jsapi-v2/guide/abc/prepare 任务一:实现地图显示先完成准备工 ...
前端系列——vue2+高德地图web端开发（行政区边界绘制）
vue2+高德地图web端开发(行政区边界绘制) 前言原理基础实现步骤 1.eslint设置AMap为全局变量放置报错 2.Search.vue传输给MapContainer.vue数据然后进行 ...
vue 给圆遮盖物添加文字高德地图_通过 Vue + 高德地图 JS API 在地图上标记咖啡店...
通过 Vue + 高德地图 JS API 在地图上标记咖啡店由学院君创建于2年前, 最后更新于 2年前版本号 #1 在上一篇教程中我们为咖啡店地址进行了地理编码,这样,就可以调用高德地图支持的 ...
Vue+高德地图API的使用(定位打卡)
接上之前的项目 Vue+高德地图API的使用 Vue+高德地图API的使用(插件的使用) 1.页面布局绘制页面 <div class="Clock"><!-- ...

vue 高德地图矢量覆盖物绘制多边形线面绘制 1.0

vue 高德地图矢量覆盖物绘制多边形线面绘制 1.0相关推荐

最新文章

热门文章

vue 高德地图 矢量覆盖物绘制 多边形 线面绘制 1.0

vue 高德地图 矢量覆盖物绘制 多边形 线面绘制 1.0相关推荐

最新文章

热门文章

vue 高德地图矢量覆盖物绘制多边形线面绘制 1.0

vue 高德地图矢量覆盖物绘制多边形线面绘制 1.0相关推荐