文档地址：https://lbs.amap.com/api/loca-v2/api#pointlayer
参考地址：https://lbs.amap.com/demo/loca-v2/demos/cat-point/guangdong_cuisine
核心代码：
var layer = new Loca.PointLayer({
loca: loca,
zooms: [2, 20],
zIndex: 10,
visible: true,
blend: 'lighter', // 叠加高亮
})
layer.setStyle({
radius: 20,
blurWidth: 10,
});
重要参数：
opts (LayerOptions) 默认的图层参数
| Name | Description |
|---|---|
opts.zIndex Number (default 120) | 图层显示层级 |
opts.visible Boolean (default true) | 图层是否可见 |
opts.zooms [Number, Number] (default [2,20]) | 图层缩放等级范围 |
opts.opacity Number (default 1) | 图层整体透明度 |
opts.blend String (default 'normal') | 图层里面元素的叠加效果，normal：正常透明度叠加，lighter：叠加后可能更加明亮 |
setStyle(options)
更新图层样式，如果有的字段被缺省，那么它的值将会被重置为默认值。参数说明：options (PointStyle)
| Name | Description |
|---|---|
options.radius (Number | Function) (default 20) | 半径（默认单位: px）。支持动画过渡效果。 |
options.color (Number | Function) (default '#fff') | 填充色，支持回调设置不同的颜色（Hex颜色） |
options.unit String (default 'px') | 点的单位，会影响半径和边宽度。可选值：px：像素，meter：地理单位米 |
options.borderWidth (Number | Function) (default 10) | 边框宽度（默认单位:px） |
options.borderColor (String | Function) (default '#fff') | 边框填充色，支持回调设置不同的颜色 |
options.blurWidth (Number | Function) (default -1) | 模糊半径，从哪个位置开始向边缘模糊。负数代表不进行模糊。 |
参考样例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圆点—全国粤菜分布情况</title>
<style>
html,
body,
#map {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.demo-title {
position: absolute;
top: 25px;
left: 25px;
z-index: 1;
}
h1 {
font-size: 18px;
margin: 0;
color: rgb(180, 180, 190);
}
h3 {
font-size: 12px;
font-weight: normal;
margin-top: 5px;
color: rgb(150,150,150);
}
</style>
</head>
<body>
<div class="demo-title">
<h1>圆点—全国粤菜分布情况</h1>
<h3>全国粤菜的分布密度，数据量大约有10万个点</h3>
</div>
<div id="map"></div>
<script src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值"></script>
<script src="https://webapi.amap.com/loca?v=2.0.0&key=您申请的key值"></script>
<script>
var map = new AMap.Map('map', {
zooms: [4, 8],
zoom: 4.5,
showLabel: false,
viewMode: '3D',
center: [105.425968, 35.882505],
mapStyle: 'amap://styles/45311ae996a8bea0da10ad5151f72979',
});
var loca = new Loca.Container({
map,
opacity: 1,
});
var geo = new Loca.GeoJSONSource({
url: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/cuisine.json',
});
var pl = window.pl = new Loca.PointLayer({
zIndex: 10,
blend: 'lighter',
});
var style = {
radius: 3.5,
unit: 'px',
color: '#3C1FA8',
borderWidth: 0,
blurWidth: 3.5,
}
pl.setSource(geo);
pl.setStyle(style);
loca.add(pl);
var dat = new Loca.Dat();
dat.addLayer(pl);
</script>
</body>
</html>
页面效果地址：
http://www.merot-sve.xyz/publicHtml/AmapStudy/20220516/PointLayer/yq20220516PointLayer.html