高德地图_LOCA

LOCA的引入与容器创建

1. 使用高德地图jsApiLoader创建AMap实例后, 会自动在window对象上挂载.Loca属性

AMapLoader.load({
  key: '',
  version: "2.0",
  Loca: {
    version: '2.0',
  },
  plugins: [

  ]
}).then(res => {
  // console.log(window.Loca)
}).catch(err => {

})

2. 创建容器: 需要注意的是, 必须要先创建map实例, 才能挂载Loca容器

mapInstance = new AMap.Map(mapContainerRef.value, {
  viewMode: "3D",
  zoom: 10,
  zooms: [3, 20],
  center: [], // 中心点
  mapStyle: '' // 样式
})
locaContainer = new window.Loca.Container({
  map: mapInstance
})

初始化Loca

let Loca = null // Loca
function initLoca() {
  try {
    if (!Loca) {
      Loca = window.Loca
    }
    if (!locaContainer) {
      locaContainer = new Loca.Container({
        map: mapInstance
      })
    }
  } catch (err) {
    console.log(err)
  }
}

使用LOCA绘制贴地点

Loca API 2.0

创建基本的贴地点

1. 创建绿色普通点图层

// 1. 创建绿色普通点图层
let normalGreenScatterLayer = null 
normalGreenScatterLayer = new Loca.ScatterLayer({
  zIndex: 111,
  opacity: 1,
  visible: true,
  zooms: [3, 20],
  loca: locaContainer // 挂载图层到容器上
})

2. 为容器设定数据

const geo_green = transGeo(list)
normalGreenScatterLayer.setSource(geo_green)
normalGreenScatterLayer.setStyle({
  color: "rgba(43,156,75,1)",
  unit: "px",
  size: [7, 7],
  borderWidth: 0
})

// 转换数据为geo数据
function transGeo(locationList) {
  const geo = new window.Loca.GeoJSONSource({
    data: {
      type: "FeatureCollection",
      features: locationList.map((item) => ({
        type: "Feature",
        geometry: { type: "Point", coordinates: [item.lon, item.lat] },
        properties: { ...item }
      }))
    }
  })
  return geo
}

创建呼吸点

1. 创建图层: 和labelLayers不同, 每一种Loca图层都必须重新创建

// 红色呼吸点
breathRedScatterLayer = new window.Loca.ScatterLayer({
  zIndex: 113,
  opacity: 1,
  visible: true,
  zooms: [3, 20],
  loca: locaContainer // 挂载图层到容器上
})

2. 为图层传入数据: 需要注意为呼吸点设定animate属性

const geo_red = transGeo(list)
breathRedScatterLayer.setSource(geo_red)
breathRedScatterLayer.setStyle({
  unit: "px",
  size: [50, 50],
  borderWidth: 0,
  texture: "https://a.amap.com/Loca/static/loca-v2/demos/images/breath_red.png",
  duration: 500,
  animate: true
})

执行动画

• 执行到这一步, Loca地图与贴地点就可以正常在地图上显示了

function startLocaAnimate() {
  locaContainer.animate.start()
}

清空Loca地图

停止动画

function stopLocaAnimate() {
  if (locaContainer?.animate) {
    locaContainer.animate.stop()
  }
}

清空图层

• 使用.hide()方法将图层从mapInstance上取消绘制, 并且赋值null清空图层

function clearScatterLayers() {
  normalGreenScatterLayer?.hide()
  breathYellowScatterLayer?.hide()
  breathRedScatterLayer?.hide()
  normalGreenScatterLayer = null
  breathYellowScatterLayer = null
  breathRedScatterLayer = null
}

删除Loca容器

function clearLocaContainer() {
  if (locaContainer) {
    locaContainer.clear()
    locaContainer = null
  }
}

为贴地点添加鼠标事件处理

• 和labelMarker不同, 贴地点不可以直接在点位上挂载事件监听处理程序, 只能为图层添加监听统一处理
• 通过layer.queryFeature来查找点击事件处的点位, 如果有找到, 则返回这个点位的数据

function findLocationFromScatterLayerClick(e) {
  const layers = [normalGreenScatterLayer, breathYellowScatterLayer, breathRedScatterLayer]

  for (const layer of layers) {
    if (layer) {
      const result = layer.queryFeature(e.pixel.toArray())
      if (result) return result.properties
    }
  }

  return null
}

async function onMapScatterLayerClick(e) {
  let location = findLocationFromScatterLayerClick(e)
  if (location) {
    await onClick(location) // 如果找到了地点数据, 那么执行点击事件
  }
}
function setMapScatterLayerClick() {
  mapInstance.on("click", onMapScatterLayerClick) // 地图实例挂载click监听
}
function removeMapScatterLayerClick() {
  mapInstance.off("click", onMapScatterLayerClick) // 地图实例移除click监听
}