vue引入高德地圖--魚骨圖、地圖類型切換、鼠標繪製工具

高德api文檔地址：https://lbs.amap.com/demo-center/js-api
1、創建地圖
HTML代碼：

<template>
	<div>
		<div class="input_list">
        <span style="padding-right: 30px">圓半徑(m)：<input v-model="radius"/></span>
        <span style="padding-right: 30px">圓面積(m²)：<input v-model="Math.floor(circleArea)"/> (m²)</span>
        <span >多邊形面積(m²)：<input v-model="Math.floor(polygonArea)"/> </span>
      </div>
	<div id="amap-box"></div>
	<div class="mouseTool" style="">
      <el-form size="mini" class="tools_list">
        <el-form-item>
          <el-radio-group v-model="radio" @change="addPhoto" fill="#1aad19" size="small">
            <el-radio label="circle">畫圓 </el-radio>
            <el-radio label="polygon">畫多邊形 </el-radio>
          </el-radio-group>
          <el-button @click="clearAll">清除</el-button>
        </el-form-item>
      </el-form>
    </div>
	</div>
</template>

data（）{
	return{
		mapObj: null,   //定義全局地圖
		mouseTool:null,//鼠標繪圖工具
        radio:'', //圖案類型
        circle:null,//圓形
        circlecenter:[],//圓心座標
        circleEditor:null, //圓形編輯器
        radius:0,//半徑
        circleArea:'',//圓形面積

        polygon:null,//多邊形
        polygonPath:[],//獲取多邊形點座標
        polygonEditor:null,//多邊形編輯工具
        polygonArea:'',//多邊形面積
	}
}，
mounted(){
	this.initMap()
},
methods:{
	initMap(){
		let map = new AMap.Map('amap-box', {
	        resizeEnable: true, //是否監控地圖容器尺寸變化
	        zoom:11, //初始化地圖層級
	        center: [116.397428, 39.90923] //初始化地圖中心點
	    });
	    
		//左側魚骨圖顯示
        let toolbar = new AMap.ToolBar();
        map.addControl(toolbar);
        
         //右上角地圖切換效果顯示
        let maptype = new AMap.MapType({
          defaultType: 0, //使用2D地圖
          showRoad:true  //疊加路網圖層
        });
        map.addControl(maptype);
        
        self.mapObj = map;   
        //生成鼠標繪圖工具
		self.mouseTool = new AMap.MouseTool(self.mapObj);
		//繪製 方法
		self.mouseTool.on('draw',function(e){
          self.mapObj.setDefaultCursor("crosshair");
          if(self.radio=='circle'){
            //計算圓心座標
             let x = e.obj.getPath()[8].lng ; //圓心的x軸座標
             let y = e.obj.getPath()[0].lat; //圓心的y軸座標
             self.circlecenter=[x,y]; //圓心座標
            //計算圓的半徑
            let m1 = new AMap.Marker({
              position: new AMap.LngLat(e.obj.getPath()[0].lng,e.obj.getPath()[0].lat)
            });
            let m2 = new AMap.Marker({
              position:new AMap.LngLat(e.obj.getPath()[17].lng,e.obj.getPath()[17].lat)
            });
            let p1 = m1.getPosition();
            let p2 = m2.getPosition();
            let distance = Math.round(p1.distance(p2));
            self.radius=distance;
            //圓的面積
            self.circleArea = 3.14*(self.radius*self.radius)
             self.drawcircle(); //添加圓形到地圖
             self.mouseTool.close(true) //去掉藍色底層

          }else if(self.radio=='polygon'){
            self.polygonPath=e.obj.getPath();
            self.drawpolygon();
            self.mouseTool.close(true) //去掉藍色底層
          }
        });
	},
	 addPhoto(){
        let self = this;
        self.draw(self.radio);
      },
      //判斷需要畫的圖形類型
      draw(type) {
        let self = this;
        self.mapObj.setDefaultCursor("crosshair");
        switch (type) {
          case 'polygon':{
            self.mapObj.clearMap(); //清除地圖
            self.radius='';
            self.circleArea="";
            self.mouseTool.polygon({});
            break;
          }
          case 'circle':{
            self.mapObj.clearMap();
            self.polygonArea='';
            self.mouseTool.circle({});
            break;
          }
        }
      },
      //添加圓並且編輯
      drawcircle(){
        let self = this;
        self.circle = new AMap.Circle({   //圓形編輯器的樣式
          map: self.mapObj,
          center:self.circlecenter,
          radius:self.radius,
          strokeColor: "#F33",
          strokeOpacity: 1,
          strokeWeight: 1,
          fillColor: "#fff",
          fillOpacity: 0.5
        });
        self.circle.setMap(self.mapObj)
        // 縮放地圖到合適的視野級別
        self.mapObj.setFitView([ self.circle ]);
        self.circleEditor = new AMap.CircleEditor(self.mapObj,self.circle);   //創建多邊形編輯器對象
        self.circleEditor.open();    //打開多邊形編輯器
        self.mapObj.setDefaultCursor("crosshair");
        self.circleEditor.on('adjust', function(event) {
          self.radius=event.radius; //獲取圓形的半徑
          self.circleArea = 3.14*(self.radius*self.radius) //面積
        });
        self.circleEditor.on('move', function(event) {
          console.log(event)//獲取圓心座標
        });

      },
      //添加多邊形到地圖
      drawpolygon(){
        let self = this;
        self.polygon = new AMap.Polygon({
          path: self.polygonPath,
          fillColor: '#fff', // 多邊形填充顏色
          borderWeight: 1, // 線條寬度，默認爲 1
          strokeWeight: 1,
          fillOpacity: 0.5,
          strokeColor: 'red', // 線條顏色
        });
        self.mapObj.add(self.polygon); //多邊形添加到地圖層裏
        self.mapObj.setFitView(); //顯示多邊形圖案

        self.polygonEditor = new AMap.PolyEditor(self.mapObj,self.polygon);   //創建多邊形編輯器對象
        self.polygonEditor.open();    //打開多邊形編輯器
        self.polygonArea = AMap.GeometryUtil.ringArea(self.polygonPath);//初始化計算面積
        self.polygonEditor.on('adjust', function(event) {  //編輯多邊形時候，隨時監聽座標點並計算面積
          self.polygonArea = AMap.GeometryUtil.ringArea(self.polygonPath);
          //console.log(self.polygonPath) 獲取多邊形的點
        });

      },
      //清除所有圖形
      clearAll(){
        let self = this;
        self.radio='';
        self.radius='';
        self.circleArea="";
        self.polygonArea='';
        self.mapObj.clearMap();
        self.mapObj.setDefaultCursor();
      },
}

這裏一定要注意“amap-box”和id值一致
在初始化的方法中，配置好地圖控件。修改配置文件

[地圖的鏈接地址&（你的祕鑰）+所使用的控件，每次更新完配置文件，要npm run dev, 否則會報錯]

在畫圓的時候需要注意的事：
1、需要計算圓心座標和半徑：
e.obj.getPath()；===》返回了36個點的座標；可以自己畫座標圖就能明白，
e.obj.getPath()[0];第一個點座標，
e.obj.getPath()[17];和第一個點對應的點座標；
e.obj.getPath()[0] 和e.obj.getPath()[17] 兩點距離，是直徑；
2、再利用兩點間距離方法：
計算圓的半徑

JS 代碼
//計算圓的半徑
        let m1 = new AMap.Marker({
           position: new AMap.LngLat(e.obj.getPath()[0].lng,e.obj.getPath()[0].lat)
         });
         let m2 = new AMap.Marker({
           position:new AMap.LngLat(e.obj.getPath()[17].lng,e.obj.getPath()[17].lat)
         });
         let p1 = m1.getPosition();
         let p2 = m2.getPosition();
         let distance = Math.round(p1.distance(p2));
         self.radius=distance;

3、圓的面積

//圓的面積
            self.circleArea = 3.14*(self.radius*self.radius)
             self.drawcircle(); //添加圓形到地圖
             self.mouseTool.close(true) //去掉藍色底層

4、編輯圓的時候，實時獲取半徑和圓心

		//移動半徑大小時候調用
		self.circleEditor.on('adjust', function(event) {
          self.radius=event.radius; //獲取圓形的半徑
          self.circleArea = 3.14*(self.radius*self.radius) //面積
        });
        //移動圓心時候調用
        self.circleEditor.on('move', function(event) {
          console.log(event)//獲取圓心座標
        });
      

在畫多邊形的時候需要注意的事：
1、e.obj.getPath(); ==》直接返回多邊形的各個點座標；
2、計算多變形的面積 ；

let polygonPath=e.obj.getPath()；//獲取路徑
let polygonArea = AMap.GeometryUtil.ringArea(polygonPath); //計算面積

3、編輯多邊形時候監聽方法（獲取面積）

       self.polygonEditor.on('adjust', function(event) {  //編輯多邊形時候，隨時監聽座標點並計算面積
          self.polygonArea = AMap.GeometryUtil.ringArea(self.polygonPath);
          //console.log(self.polygonPath) 獲取多邊形的點
        });

其他參考網站：
轉：博客文檔：https://www.cnblogs.com/milkmap/tag/高德/