【vue+amap】高德地图绘制多边形区域-编程知识

在这里插入图片描述

参考文档：
高德地图参考手册
高德地图示例代码

1、高德地图控制台创建应用，获取权限ak

高德地图控制台
在这里插入图片描述

Ps.本项目里按钮等基础控件使用的是element-ui版本控件

2、项目内全局引入

index.html内引入高德地图代码：

<script type="text/javascript">window._AMapSecurityConfig = {securityJsCode: "你的安全密钥"};</script><scripttype="text/javascript"src="https://webapi.amap.com/maps?v=1.4.6&key=你的key"></script><scripttype="text/javascript"src="http://webapi.amap.com/maps?v=1.4.6&key=你的key&plugin=AMap.PolyEditor&plugin=AMap.MouseTool"></script>

在这里插入图片描述

3、完整项目代码

template：

<template><div class="map-wrap"><div><h1>{{ msg }}</h1><div class="flex"><div class="button-wrap"><el-buttonsize="small"type="primary"icon="el-icon-edit"@click="handleDraw">绘制</el-button><el-button size="small" icon="el-icon-add" @click="handelFinishDraw">完成</el-button><el-buttonsize="small"icon="el-icon-refresh-left"@click="handleClearDraw">重置</el-button></div><div class="picker-color" v-if="isediting"><div class="text">选择颜色</div><span@click="handleChangeColor(item)"v-for="item in colors":key="item.code":class="['color' + item.code,drawColor == item.value ? 'active' : '',]"><i v-if="drawColor == item.value" class="el-icon-check"></i><i v-else>&nbsp;</i></span></div></div></div><div style="width: 1200px; height: 500px; padding-left: calc(50% - 600px)"><div id="container"></div></div></div>
</template>

js:


<script>
export default {name: "Map",data() {return {msg: "地图绘制展示页",map: null,poly: null,drawColor: "#2A8DFF",colors: [{ code: 1, value: "#FF6B36" },{ code: 2, value: "#FFAD29" },{ code: 3, value: "#FFDA21" },{ code: 4, value: "#29E98F" },{ code: 5, value: "#1EEDE6" },{ code: 6, value: "#2A8DFF" },{ code: 7, value: "#CC16EF" },{ code: 8, value: "#F53ABD" },],paths: [[111.683736, 40.818554],[111.684444, 40.816971],[111.689036, 40.818172],[111.688264, 40.819788],],mouseOverEvent: true,isediting: false,tool: null,};},created() {this.$nextTick(() => {this.createMap();});},methods: {createMap() {// 地图创建var map = new AMap.Map("container", {zoom: 11, //级别center: [111.688264, 40.818205], //兴泰御都国际viewMode: "3D", //使用3D视图});// 添加一个标记点var marker = new AMap.LabelMarker({icon: "http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",position: [111.687931, 40.818392],offset: new AMap.Pixel(-10, -30),text: {content: "东方国信",direction: "right",style: {fontSize: 15,fillColor: "#fff",strokeColor: "rgba(255,255,0,0.5)",strokeWidth: 2,padding: [3, 10],backgroundColor: "blue",borderColor: "#ccc",borderWidth: 3,},},});var labelsLayer = new AMap.LabelsLayer({collision: true,});labelsLayer.add(marker);// 将 LabelMarker 实例添加到 LabelsLayer 上map.add(labelsLayer);// 将 LabelsLayer 添加到地图上// 创建默认区域var polygon = new AMap.Polygon({path: this.paths,strokeColor: "#fff",strokeWeight: 6,strokeOpacity: 0.2,fillOpacity: 0.4,fillColor: this.drawColor,zIndex: 50,});map.add(polygon);map.setFitView([polygon]); // 缩放地图到合适的视野级别this.map = map;// 如果后期想修改默认区域：修改this.poly即可// var polyEditor = new AMap.PolyEditor(map, polygon);// this.poly = polyEditor;},/* 操作按钮 */// 编辑handleDraw() {// this.poly.open();this.isediting = true;var mouseTool = new AMap.MouseTool(this.map);this.tool = mouseTool;mouseTool.polygon({strokeColor: "#FFF",strokeOpacity: 1,strokeWeight: 6,strokeOpacity: 0.2,fillColor: this.drawColor,fillOpacity: 0.4,strokeStyle: "solid",});mouseTool.on("draw", function (event) {console.log("覆盖物对象绘制完成:", event.obj);// event.obj 为绘制出来的覆盖物对象});},handelFinishDraw() {this.isediting = false;this.tool.close();},//重置handleClearDraw() {this.isediting = false;this.tool.close(true);},//切换颜色handleChangeColor(item) {this.drawColor = item.value;this.tool.polygon({strokeColor: "#FFF",strokeOpacity: 1,strokeWeight: 6,strokeOpacity: 0.2,fillColor: this.drawColor,fillOpacity: 0.4,strokeStyle: "solid",});},},
};
</script>

css:

<style scoped>
h1 {font-weight: normal;
}
#container {width: 100%;height: 100%;
}
.map-wrap {position: relative;width: 100%;height: 100%;
}
.map-wrap .flex {display: flex;flex-shrink: 0;white-space: nowrap;justify-content: space-between;align-items: center;height: 50px;line-height: 50px;width: 1200px;padding-left: calc(50% - 600px);
}
.allmap {width: 100%;height: calc(100% - 50px);position: absolute;
}
ul {list-style: none;
}
.picker-color {text-align: right;padding-right: 30px;
}
.text {display: inline-block;padding: 0 10px;float: left;
}
span {display: inline-block;width: 24px;height: 24px;line-height: 20px;border-radius: 4px;border-width: 2px;border-style: solid;margin-left: 8px;overflow: hidden;text-align: center;margin-top: 10px;float: left;
}
span i {font-weight: 600;
}
.color1 {border-color: #ff6b36;background: rgba(255, 107, 54, 0.3);color: #ff6b36;
}
.color2 {border-color: #ffad29;background: rgba(255, 173, 41, 0.3);color: #ffad29;
}
.color3 {border-color: #ffda21;background: rgba(255, 218, 33, 0.3);color: #ffda21;
}
.color4 {border-color: #29e98f;background: rgba(41, 233, 143, 0.3);color: #29e98f;
}
.color5 {border-color: #1eede6;background: rgba(30, 237, 230, 0.3);color: #1eede6;
}
.color6 {border-color: #2a8dff;background: rgba(42, 141, 255, 0.3);color: #2a8dff;
}
.color7 {border-color: #cc16ef;background: rgba(204, 22, 239, 0.3);color: #cc16ef;
}
.color8 {border-color: #f53abd;background: rgba(245, 58, 189, 0.3);color: #f53abd;
}
</style>