在地图上绘制覆盖物

本文介绍覆盖物添加、移除的方法，及如何对覆盖物进行传参。

添加标注

const div = document.createElement("div")
const img = document.createElement("img")
div.style.width = "40px"
div.style.height = "40px"
img.style.width = "100%"
img.style.height = "100%"

img.src = "https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678111-map-marker-128.png"
div.appendChild(img)

const marker = new DiMap.Marker(div)
marker.setLngLat([116.38267, 39.908179])
          
// 标记添加到地图
marker.addTo(map)

// 3s后移除标记
setTimeout(()=>{
  marker.remove()
}, 3000)

绘制圆

map.on("load", ()=>{
  const circle = new DiMap.Circle({
    map,
    center: [116.39511, 39.90694], // 圆位置
    radius: 50, // 圆半径
    strokeColor: "#006600", // 边框颜色
    strokeOpacity: 1, // 边框透明度
    strokeWeight: 2, // 边框宽度
    fillColor: "#006600", // 填充颜色
    fillOpacity: 1 // 填充透明度
  })

  // 圆展示
  circle.show()

  // 圆隐藏
  setTimeout(()=>{
    circle.hide()
  }, 3000)

  // 圆销毁
  setTimeout(()=>{
    circle.destroy()
  }, 5000)
  
})

添加线覆盖物

map.on("load", () => {
  const polyline = new DiMap.Polyline({
    map,
    path: [
      [116.35811, 39.90311],
      [116.36332, 39.89835],
      [116.37181, 39.89876],
      [116.37271, 39.90688]
    ],
    outlineColor: "#000000", // 外边框
    strokeColor: "#006600", // 外边框颜色
    strokeStyle: "solid", // 外边框类型
    lineCap: "butt", // 线两端线帽的样式,默认无头 butt
    lineJoin: "miter", // 线拐点连接处的样式，默认尖角 miter
    strokeWeight: 6, // 线宽度
    strokeOpacity: 1, // 线透明度
    borderWeight: 2, // 边框砍断
    isOutline: false, // 是否带边框
    showDir: true // 是否显示方向箭头, 默认为 false
  })

  // 线展示
  polyline.show()

  // 线隐藏
  setTimeout(() => {
    polyline.hide()
  }, 3000)
  
  // 线销毁
  setTimeout(() => {
    polyline.destroy()
  }, 5000)
})

添加面覆盖物

map.on("load", () => {
  const polygon = new DiMap.Polygon({
    map,
    path: [
      [
        [116.40231, 39.91336],
        [116.40191, 39.92319],
        [116.3915, 39.92292],
        [116.39218, 39.91306],
        [116.40231, 39.91336]
      ]
    ],
    fillColor: "red" // 填充颜色
  })
  // 面显示
  polygon.show()

  // 面隐藏
  setTimeout(() => {
    polygon.hide()
  }, 3000)
  
  // 面销毁
  setTimeout(() => {
    polygon.destroy()
  }, 5000)
})