思路:
用AMap.DistrictSearch搜索某个(省份、城市、县)返回它的边界坐标集合,使用这个结果,用AMap.Polygon绘制边界线和遮盖,最后使用AMap.Heatmap绘制热力图
高德地图api参考链接:
AMap.DistrictSearch:
https://lbs.amap.com/api/javascript-api/reference/search#m_AMap.DistrictSearch
AMap.Polygon
https://lbs.amap.com/api/javascript-api/reference/overlay#polygon
AMap.Heatmap
https://lbs.amap.com/api/javascript-api/reference/layer#m_AMap.Heatmap
以下是使用北京市做的例子的完整代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title></title>
<style>
html,body{
background-image: linear-gradient(#D4EBFF, #F4F8FB);
height:100%;
}
.wrap_map{
position: relative;
margin:0 auto;
width:1200px;
height:100%;
}
.map_tips{
position: absolute;
right:80px;
bottom:50px;
}
.map_tips .tips_scroll{
width:155px;
height:13px;
border-radius:7px;
background-image: linear-gradient(to right,#FF0000, #FFD800,#55e12f,#2BE145,#65e96a,#BBF087);
}
.map_tips .tips_text{
display: flex;
color:#545454;
font-size:12px;
margin-top:15px;
}
.tips_text>div{
flex-grow: 1;
}
.tips_text>div:nth-of-type(2){
flex-grow:2;
text-align: center;
}
.tips_text>div:last-child{
text-align: right;
}
#container {
width:100%;
height:100%;
}
</style>
</head>
<body>
<div class="wrap_map">
<div id="container"></div>
<div class="map_tips">
<div class="tips_scroll"></div>
<div class="tips_text">
<div>拥挤</div>
<div>正常</div>
<div>稀疏</div>
</div>
</div>
</div>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&plugin=AMap.DistrictSearch,AMap.Heatmap"></script>
<script src="https://a.amap.com/jsapi_demos/static/resource/heatmapData.js"></script><!--北京市热力图数据-->
<script>
// //热力图数据结构
// let heatmapData = [
// {"lng":经度,"lat":纬度,"count":人数},
// ];
var map = new AMap.Map('container', {
zoom:9,
center:[116.44923,40.207714],
pitch: 0,
viewMode: '3D',
});
new AMap.DistrictSearch({
extensions:'all',
subdistrict:0,
level: 'district'
}).search('北京市',function(status,result){
// 外多边形坐标数组和内多边形坐标数组
var outer = [
new AMap.LngLat(-360,90,true),
new AMap.LngLat(-360,-90,true),
new AMap.LngLat(360,-90,true),
new AMap.LngLat(360,90,true),
]; // 使得遮盖填充反向
var holes = result.districtList[0].boundaries // 得到该区域的边界坐标集合
var pathArray = [
outer
];
pathArray.push.apply(pathArray,holes)
var polygon = new AMap.Polygon( {
pathL:pathArray,
//线条颜色,使用16进制颜色代码赋值。默认值为#006600
strokeColor: '#6e93f9',
strokeWeight: 2,
fillColor: 'rgba(255,255,255)',
fillOpacity: 1,
strokeStyle:'dashed',
strokeDasharray:[2,2]
});
polygon.setPath(pathArray);
map.add(polygon);
})
//设置热力图
var heatmap = new AMap.Heatmap(map, {
radius: 60, //给定半径
opacity: [0, 0.8],
gradient:{
0: '#BBF087',
0.5: '#2BE145',
0.75: '#FFD800',
1.0: '#FF0000'
}
});
heatmap.setDataSet({
data: heatmapData, //对应数据
max: 100 //设置景区人流量最大值
});
map.add(heatmap)
</script>
</body>
</html>
结果: