二、在地图上绘制点，圆形，矩形，多边形

bingduYu

已于 2024-02-02 09:58:46 修改

阅读量547

点赞数 11

分类专栏： L7地图 Yu的前端凑数笔记文章标签：前端

于 2024-01-22 18:23:52 首次发布

本文链接：https://blog.csdn.net/Yugoup/article/details/135755028

版权

Yu的前端凑数笔记同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

L7地图

7 篇文章 0 订阅

订阅专栏

1、安装并引入@antv/l7-draw
2、事件：DrawEvent；点：DrawPoint；圆形：DrawCircle；矩形：DrawRect；多边形：DrawPolygon；
3、实例化 Draw

import { DrawEvent, DrawCircle, DrawRect, DrawPolygon, DrawPoint } from '@antv/l7-draw'



let drawPoint
const handlePoint = () =>{
	drawPoint = new DrawPoint(scene, {
	// Draw 的配置 options
    autoActive: false,
    editable: false,
    helper: false,//开启绘制时，鼠标上的提示功能
    style: {
      point: {
        normal: { shape: 'imageName01', size: 10 },
        hover: { shape: 'imageName02', size: 20, color: '#1990FF' },
        active: { shape: 'imageName03', size: 20 }
      }
    }
  })
  // 开启绘制
  drawPoint.enable()
  // 监听绘制事件
  drawPoint.on(DrawEvent.Add, (newPoint) => {
    drawPoint.disable()
    //frontId ：newPoint.properties.id
    //location ：newPoint.geometry.coordinates[0]
  })
}
let drawCircle
const handleCircle = () =>{
	drawCircle = new DrawCircle(scene, {
		// Draw 配置
      zIndex: 2,
      editable: false,
      helper: false,
      multiple: false
    })
    // 调用 Draw 上的方法
    drawCircle.enable()//开始绘制
    // 监听 Draw 的事件
    drawCircle.on(DrawEvent.Add, (newPoint) => {
      drawCircle.disable()//避免继续绘制
      //frontId ：newPoint.properties.id
      //location ：newPoint.geometry.coordinates[0]
    })
}


let drawRect
const handleRect = () =>{
	drawRect= new DrawRect(scene, {
		// Draw 配置
      zIndex: 2,
      editable: false,
      helper: false,
      multiple: false
    })
    // 调用 Draw 上的方法
    drawRect.enable()//开始绘制
    // 监听 Draw 的事件
    drawRect.on(DrawEvent.Add, (newPoint) => {
      drawRect.disable()//避免继续绘制
      //frontId ：newPoint.properties.id
      //location ：newPoint.geometry.coordinates[0]
    })
}

let drawPolygon
const handlePolygon = () =>{
	drawPolygon= new DrawPolygon(scene, {
		// Draw 配置
      zIndex: 2,
      editable: false,
      helper: false,
      multiple: false
    })
    // 调用 Draw 上的方法
    drawPolygon.enable()//开始绘制
    // 监听 Draw 的事件
    drawPolygon.on(DrawEvent.Add, (newPoint) => {
      drawPolygon.disable()//避免继续绘制
      //frontId ：newPoint.properties.id
      //location ：newPoint.geometry.coordinates[0]
    })
}