vue 高德地图多边形_Vue + 高德地图画矢量图
功能需求
引入并創建地圖
支持鼠標工具
鼠標畫矢量圖(線、圓、矩形、多邊形)
支持矢量圖編輯、獲取各點經緯度及求面積等操作
自定義鼠標右鍵事件
一圖勝千言，效果圖如下
創建地圖對象
//DOM加載后動態引入地圖腳本并map初始化
//template
//mounted
this.$nextTick(function() {
this.initMap();
});
initMap() {
var url = 'https://webapi.amap.com/maps?v=1.4.15&key=秘鑰;
var jsapi = document.createElement('script');
jsapi.charset = 'utf-8';
jsapi.src = url;
document.head.appendChild(jsapi);
setTimeout(() => {//一秒延遲，等待腳本加載
let that = this;
let map = new AMap.Map('map', {
zoom: 13, //級別
center: [117.226737, 31.820066], //中心點坐標
pitch: 30, // 地圖俯仰角度，有效范圍 0 度- 83 度
viewMode: '2D' // 地圖模式
});
this.MAP = map;//將map掛載到組件data，后續交互需要用到
}, 1000);
},
復制代碼
插件介紹(plugin)
map眾多功能需要插件的支持官方文檔
使用步奏
//1、引入插件，支持按需異步加載和同步加載，可同時引入多個插件
AMap.plugin(
[
'AMap.InfoWindow',
'AMap.ContextMenu',
'AMap.Heatmap',
'AMap.MouseTool',
'AMap.RangingTool',
'AMap.CircleEditor',
'AMap.PolyEditor',
'AMap.ToolBar',
'AMap.Scale',
'AMap.OverView',
'AMap.MapType',
'AMap.Geolocation'
],
function() {
//插件引入回調事件，可添加工具控件，也可創建插件實例
map.addControl(new AMap.ToolBar({ position: 'RT' }));// 在圖面添加比例尺控件，展示地圖在當前層級和緯度下的比例尺
map.addControl(new AMap.Scale());// 在圖面添加鷹眼控件，在地圖右下角顯示地圖的縮略圖
map.addControl(new AMap.OverView({ isOpen: true }));// 在圖面添加類別切換控件，實現默認圖層與衛星圖、實施交通圖層之間切換的控制
}
);
2、創建插件實例，非特殊情況需避免重復創建多個實例，復用同一個實例即可，vue中可將實例保存到data中；
//插件實例可在任何地方創建，例如鼠標工具實例創建如下：
//注意：實例的創建過程需要放到plugin的回調函數中執行，防止創建實例前沒有獲取到map實例
this.mouseTool = new AMap.MouseTool(map);
//this.mouseTool 實例掛載到data，方便全局使用
//AMap.MouseTool 插件名
//map 初始化的地圖對象
//監聽鼠標工具出發的事件
this.mouseTool.on('draw', function(e) {
//做些什么
});
//自定義交互事件，當事件被dom觸發后可以被mouseTool監聽到
畫圓draw(type) {
switch (type) {
case 'polygon': {
......
break;
}
case 'circle': {
......
break;
}
}
},
3、調用實例的方法，使用相關功能。
this.ruler = new AMap.RangingTool(map); //創建測量工具實例
this.ruler.turnOn();
復制代碼
鼠標畫矢量圖
劃線畫圓矩形多邊形draw(type) {
//mouseTool是鼠標工具實例
switch (type) {
case 'marker': {//畫點
mouseTool.marker({
//同Marker的Option設置
});
break;
}
case 'polyline': {//劃線
mouseTool.polyline({
strokeColor: '#80d8ff'
//同Polyline的Option設置
});
break;
}
case 'polygon': {//畫多邊形
mouseTool.polygon({
strokeColor: '#f7797d',
strokeOpacity: 1,
strokeWeight: 2,
strokeOpacity: 1,
strokeStyle: 'solid',
fillOpacity: 0.1,
fillColor: '#69AC8F',
zIndex: 100
});
break;
}
case 'rectangle': {//畫矩形
mouseTool.rectangle({
strokeColor: '#f7797d',
strokeOpacity: 1,
strokeWeight: 2,
strokeOpacity: 1,
strokeStyle: 'solid',
fillOpacity: 0.1,
fillColor: '#69AC8F',
zIndex: 100
});
break;
}
case 'circle': {//畫圓
mouseTool.circle({
strokeColor: '#f7797d',
strokeOpacity: 1,
strokeWeight: 2,
strokeOpacity: 1,
strokeStyle: 'solid',
fillOpacity: 0.1,
fillColor: '#69AC8F',
zIndex: 100
});
break;
}
}
}
復制代碼
支持矢量圖編輯、獲取各點經緯度及求面積等工具插件
//編輯各種矢量圖形需要對應的插件
1、引入
2、創建實例
3、使用：調用方法、監聽事件
let circleEditor = new AMap.CircleEditor(map, e.obj);//創建圓實例,e.obj是mouseTool事件回調函數返回的數據對象
circleEditor.open(); //打開編輯狀態
監聽圓編輯過程中的事件
circleEditor.on('move', function(event){
// event.target 即為編輯后的圖形對象，包含圖形的相關數據和方法
event.target.getCenter().lat.toFixed(7)//獲取圓心經度
});
circleEditor.on('adjust', function(event){
});
circleEditor.on('end', function(event){
});
復制代碼
自定義鼠標右鍵事件
//地圖綁定鼠標右擊事件——彈出右鍵菜單
//地圖對象監聽右鍵事件(這里監聽的是地圖上的右鍵事件，如果是監聽繪畫的矢量圖右鍵，
則把監聽對象改成繪畫的矢量圖)
map.on('rightclick', function(e){
that.rightclickObj(); //定義右鍵內容
that.contextMenu.open(map, e.lnglat);
that.contextMenuPositon = e.lnglat; //右鍵菜單位置
});
//定義右鍵內容
rightclickObj() {
let that = this;
//定義內容
let content = [];
content.push("
");content.push(
"
");
content.push(
"
");
content.push(
"
");
content.push(
"
");
if (that.circleEditor) {
content.push(
"
");
}
content.push('
');//創建右鍵實例并添加自定義的內容
that.contextMenu = new AMap.ContextMenu({
isCustom: true,
content: content.join('')
});
}
//強調說明：自定義的dom是基于地圖對象生成的，并不能像vue一樣綁定事件，這里采用jQuery的方式出發的事件。如下
mounted() {
this.$nextTick(function(){
this.initMap();
});
$('body').on('click', '.menu-list-edit-start', () => {//這里采用箭頭函數，為了this指向vue
//調用定義的dom交互
this.rightMenuu(0);
});
$('body').on('click', '.menu-list-edit-end', () => {
this.rightMenuu(1);
});
$('body').on('click', '.menu-list-get-area', () => {
this.rightMenuu(2);
});
$('body').on('click', '.menu-list-remove', () => {
this.rightMenuu(3);
});
$('body').on('click', '.menu-list-radius', () => {
this.rightMenuu(4);
});
}
復制代碼
總結
仔細對比會發現，地圖無非就是自身API和引入插件實現相應功能
事件監聽通過 .on(‘支持的事件名’,function)
事件插件需要引入并創建實例，實例也包含方法和事件，方法直接調用，事件用.on監聽，事件的回調函數會返回圖形的相關數據以及方法
最后，地圖的所有功能都是由一個或多個API或插件組合而成，好在官方文檔足夠詳細且每個功能點都有demo，所以當遇到一個功能不知如何下手時，試著把功能拆成更小的步奏或單元
初次使用地圖，以上所述如有不足之處或者你有更好的方法，歡迎留言指出
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的vue 高德地图多边形_Vue + 高德地图画矢量图的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 慕尼黑阴谋肢解了哪个主权国家？
- 下一篇： staruml无法打开mdj文件_Sta