小白的高德地图初体验(四)—— 矢量图形

小白的高德地图初体验(四)—— 矢量图形

这里是官方文档☛☛☛传送门，走你~~

☞☞小白的高德地图初体验(一) —— 打点
☞☞小白的高德地图初体验(二)——点聚合
☞☞小白的高德地图初体验(三) —— 轨迹
☞☞小白的高德地图初体验(四) —— 矢量图形
☞☞小白的高德地图初体验(五)—— 信息窗体

---

一、画一个固定的圆

data() {
    
    
   return {
    
    
       AMap: {
    
    },
       maps: {
    
    },
       circle: {
    
    },
       radio: 0
   }
},

 initMap() {
    
    
      MapLoader().then(() => {
    
    
           this.AMap = window.AMap
           let {
    
     AMap } = this
           this.maps = new AMap.Map("map", {
    
    
               resizeEnable: true,
               center: [116.397428, 39.90923],
               zoom: 15
           })
           this.circle = new AMap.Circle({
    
    
               center: [116.397428, 39.90923],
               radius: 1000, //半径
               borderWeight: 3,
               strokeColor: "#FF33FF",
               strokeOpacity: 1,
               strokeWeight: 6,
               strokeOpacity: 0.2,
               fillOpacity: 0.4,
               strokeStyle: "dashed",
               strokeDasharray: [10, 10],
               fillColor: "#1791fc",
               zIndex: 50
           })
           this.circle.setMap(this.maps)
           this.maps.setFitView()
       })
   }

这样就能绘制一个固定的圆~~~

二、怎么通过鼠标右键画圆

武功绝学1（工具类AMap.MouseTool）
武功绝学2（数学计算库）

在日常中使用中我们不仅仅要绘制，经常要保持图案信息返回给后端，等到下次用的时候还要回显出来。下面这里的代码主要就获取了距离和面积，需要更多的话可以参考官网数学计算库。

draw {type,obj} 鼠标工具绘制覆盖物结束时触发此事件，obj对象为绘制出来的覆盖物对象。

initMap()方法中添加

this.mouseTool = new AMap.MouseTool(this.maps)
this.mouseTool.on("draw", e => {
    
    
    this.drawObj = e.obj
    var area = Math.round(AMap.GeometryUtil.ringArea(e.obj.getPath()))
	var distance = Math.round(AMap.GeometryUtil.distanceOfLine(e.obj.getPath()))
	this.$message.success("绘制完成")
    console.log(e.obj.getPath().map(({
    
     lng, lat }) => [lng, lat]))
})

绘制圆的方法，可以在case中写很多种，绘制不同的形状。我在练习的时候只做了原形，多边形，删除图形的功能。

mouseTool.close( Boolean) :关闭当前鼠标操作。参数arg设为true时，鼠标操作关闭的同时清除地图上绘制的所有覆盖物对象；设为false时，保留所绘制的覆盖物对象。默认为false

 draw() {
    
    
 switch (this.radio) {
    
    
       case 1:
           this.mouseTool.circle({
    
    
               fillColor: "#00b0ff",
               strokeColor: "#80d8ff"
           })
           break
     ......
   }
}

---

我这里只做了圆和多边形的绘制，还有一个清楚图案的小功能。其实都是来代码都来源于官网，我只是代码的搬运工，大概感受一下如何使用的。

最后有时间的话会更新的更加完整，需要代码的 ，直接回复、私信都可以的哈~~~

有缘再见ヾ(￣▽￣)Bye~Bye~