高德地图只展示某个区域的人流量，遮盖其他区域

本文主要是介绍高德地图只展示某个区域的人流量，遮盖其他区域，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

思路：

用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进制颜色代码赋值。默认值为#006600strokeColor: '#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>

结果：