高德地圖 JS API https://lbs.amap.com/api/javascript-api/summary/
實現效果展示：
<!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,
#container {
height: 100%;
background-color: rgba(0,0,0);
}
</style>
</head>
<body>
<div id="container"></div>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=c4f16b4da2e9c9023eac7f81d021bb1b&plugin=AMap.DistrictSearch"></script>
<script src="//a.amap.com/jsapi_demos/static/resource/heatmapData.js"></script>
<script>
var map = new AMap.Map('container', {
zoom:13,
center:[116.360889,39.924331],
pitch: 0,
viewMode: '3D',
mapStyle:'amap://styles/40035571fa9fdd05a26fe1b05f48fdc9',
/* 禁止縮放*/
zoomEnable:false,
/* 禁止拖動*/
dragEnable: false,
});
/* new AMap.TileLayer({
map: map,
tileUrl: 'http://mt{1,2,3,0}.google.cn/vt/lyrs=y@142&hl=zh-CN&gl=cn&x=[x]&y=[y]&z=[z]&s=Galil', // s=Galil不加也能渲染
zIndex: 2 // 在默認層級之上
});*/
//map.setZoom(12.2); //設置地圖層級
new AMap.DistrictSearch({
extensions:'all',
subdistrict:0
}).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,
strokeColor: 'rgb(20,164,173)',
strokeWeight: 4,
strokeOpacity:0.8,
fillColor: 'rgba(0,0,0)',
fillOpacity: 1,
strokeStyle:'dashed',
strokeDasharray:[10,2,10]
});
polygon.setPath(pathArray);
map.add(polygon);
/* var polyline = new AMap.Polyline({
strokeColor: '#3366FF', // 線顏色
strokeOpacity: 1, // 線透明度
strokeWeight: 2, // 線寬
strokeStyle: 'solid', // 線樣式
strokeDasharray: [10, 5], // 補充線樣式
geodesic: false // 繪製大地線
});
polyline.setPath(pathArray);
map.add(polyline);*/
})
if (!isSupportCanvas()) {
alert('熱力圖僅對支持canvas的瀏覽器適用,您所使用的瀏覽器不能使用熱力圖功能,請換個瀏覽器試試~')
}
//詳細的參數,可以查看heatmap.js的文檔 http://www.patrick-wied.at/static/heatmapjs/docs.html
//參數說明如下:
/* visible 熱力圖是否顯示,默認爲true
* opacity 熱力圖的透明度,分別對應heatmap.js的minOpacity和maxOpacity
* radius 勢力圖的每個點的半徑大小
* gradient {JSON} 熱力圖的漸變區間 . gradient如下所示
* {
.2:'rgb(0, 255, 255)',
.5:'rgb(0, 110, 255)',
.8:'rgb(100, 0, 255)'
}
其中 key 表示插值的位置, 0-1
value 爲顏色值
*/
var heatmap;
map.plugin(["AMap.Heatmap"], function () {
//初始化heatmap對象
heatmap = new AMap.Heatmap(map, {
radius: 25, //給定半徑
opacity: [0, 0.8]
/*,
gradient:{
0.5: 'blue',
0.65: 'rgb(117,211,248)',
0.7: 'rgb(0, 255, 0)',
0.9: '#ffea00',
1.0: 'red'
}
*/
});
var points =[
{"lng":116.363808,"lat":39.878455,"count":100},
{"lng":116.354765,"lat":39.90129,"count":100},
{"lng":116.373133,"lat":39.919922,"count":1200},
{"lng":116.363505,"lat":39.928956,"count":100},
{"lng":116.389898,"lat":39.942875,"count":100}
];
//設置數據集：該數據爲北京部分“公園”數據
heatmap.setDataSet({
data: points,
max: 100
});
});
//判斷瀏覽區是否支持canvas
function isSupportCanvas() {
var elem = document.createElement('canvas');
return !!(elem.getContext && elem.getContext('2d'));
}
//添加點標記
var markerList=[ {"title":"1","lng":116.363808,"lat":39.878455},
{"title":"2","lng":116.363505,"lat":39.928956},
{"title":"3","lng":116.389898,"lat":39.942875},
{"title":"4","lng":116.373133,"lat":39.919922},
{"title":"5","lng":116.354765,"lat":39.90129}
];
// 創建一個 Icon
var Icon = new AMap.Icon({
// 圖標尺寸
size: new AMap.Size(100, 100),
// 圖標的取圖地址
image: 'img/popular.gif',
// 圖標所用圖片大小
imageSize: new AMap.Size(100, 100),
// 圖標取圖偏移量
// imageOffset: new AMap.Pixel(-20, -3)
});
var markers=[];
var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
for(var i = 0 ; i < markerList.length ; i ++){
// 將 icon 傳入 marker
var marker = new AMap.Marker({
position: new AMap.LngLat(markerList[i].lng,markerList[i].lat),
icon: Icon,
offset: new AMap.Pixel(-50, -50),
clickable: true
});
marker.content = '我是第' + (i + 1) + '個Marker';
marker.on('click', markerClick);
markers.push(marker);
//點標註的點擊事件
/* var clickHandle = AMap.event.addListener(marker, 'click', function(e) {
alert(marker.getTitle());
});*/
}
function markerClick(e) {
infoWindow.setContent(e.target.content);
infoWindow.open(map, e.target.getPosition());
}
// 將 markers 添加到地圖
map.add(markers);
/* for(var i = 0 ; i < markers.length ; i ++){
}*/
</script>
</body>
</html>
歡迎加入：前端開發羣