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 => {})
- 创建容器: 需要注意的是, 必须要先创建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 // 将
})
- 为容器设定数据
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
}
- 绘制
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
})
- 为图层传入数据: 需要注意为呼吸点设定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
})
- 绘制数据, 并执行动画
locaContainer.animate.start()
dat.addLayer(breathRedScatterLayer, "红色")