高德地图_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绘制贴地点

[Loca API 2.0](https://lbs.amap.com/demo/loca-v2/demos/cat-scatter/sz-road)

创建基本的贴地点

1. 创建绿色普通点图层

// 1. 创建绿色普通点图层
let normalGreenScatterLayer = null 
normalGreenScatterLayer = new window.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: [10, 10],
  borderWidth: 0
})

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
}

3. 绘制

let dat = new window.Loca.Dat()
dat.addLayer(normalGreenScatterLayer, "贴地")

创建呼吸点

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: "meter",
  size: [2600, 2600],
  borderWidth: 0,
  texture: "https://a.amap.com/Loca/static/loca-v2/demos/images/breath_red.png",
  duration: 500,
  animate: true
})

3. 绘制数据, 并执行动画

locaContainer.animate.start()
dat.addLayer(breathRedScatterLayer, "红色")