高德地图上添加扇形图
高德地图中没有直接添加扇形图案的方法，经过查看前辈们的博客，编写以下方法。
在高德地图中自定义图层，在自定义图层中使用canvas画图方法添加图形。
示例中还包含了添加标记、清除标记、定位方法。
由于谷歌浏览器无法使用高德地图自带的定位方法，于是单独写了定位方法，定位位置需自己获取后传入。
参考博客：
https://blog.csdn.net/weixin_44005989/article/details/88423707
<!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>
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
<style>
html, body, #container {
height: 100%;
}
.amap-icon img,
.amap-marker-content img {
width: 25px;
height: 34px;
}
.marker {
position: absolute;
top: -20px;
right: -118px;
color: #fff;
padding: 4px 10px;
box-shadow: 1px 1px 1px rgba(10, 10, 10, .2);
white-space: nowrap;
font-size: 12px;
font-family: "";
background-color: #25A5F7;
border-radius: 3px;
}
</style>
</head>
<body>
<div>
<button type="button" onclick="addMakerTest()">添加标记点</button>
<button type="button" onclick="cleanMaker()">清除标记点</button>
<button type="button" onclick="drawSectorTest()">画扇形</button>
<button type="button" onclick="moveToCenterTest()">定位</button>
</div>
<div id="container"></div>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=你的高德地图key"></script>
<script type="text/javascript">
var markerCenter;//定位点
var map = new AMap.Map('container', {
resizeEnable: true,
zoom: 11, //初始化地图层级
});
//创建自定义图层
var canvas;
map.on("complete", function () {
AMap.plugin('AMap.CustomLayer', function () {
canvas = document.createElement('canvas');
customLayer = new AMap.CustomLayer(canvas, {
zooms: [3, 20],
alwaysRender: true,//缩放过程中是否重绘，复杂绘制建议设为false
zIndex: 22,
opacity: 0.6
});
});
});
/**************************************************************************
*添加标记点
*lng： 经度值
*lat： 纬度值
*flag：定位点图片颜色 true蓝色 false红色
**************************************************************************/
function addMaker(lng, lat, flag) {
var iconPng = (flag == true ? "./marker-default.png" : "./marker-red.png")//定位点图标自己贴的图片
var marker = new AMap.Marker({//创建一个 Marker 实例
icon: iconPng,
position: new AMap.LngLat(lng, lat), //经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
});
//将创建的点标记添加到已有的地图实例：
map.add(marker);
}
//清除标记点
function cleanMaker() {
map.clearMap(); //使用clearMap方法删除所有覆盖物
}
/**************************************************************************
*画扇形
*centerPos： 中心点经纬度[lng,lat],lng 经度值,lat纬度值。示例；[110.433, 36.2743]
*startAngle： 起始角度数值,单位：度。示例；0
*includeAngle：夹角角度数值,单位：度。示例；180
*radius： 半径距离,单位：米。示例；50
**************************************************************************/
function drawSector(centerPos,startAngle,includeAngle,radius) {
//自定义图层添加渲染方法
var onRender = function () {
let size = map.getSize();
let width = size.width;
let height = size.height;
canvas.style.width = width + 'px';
canvas.style.height = height + 'px';
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#08549a';
ctx.strokeStyle = 'blue';
ctx.lineWidth = 4;
let pos = map.lngLatToContainer(centerPos);
//计算实际半径距离在图层上的像素,用于固定扇形半径随缩放变化
var newLngLat = azimuth_offset(centerPos[0], centerPos[1], 0, radius);//距离点的坐标
let newPos = map.lngLatToContainer(newLngLat);
let radiusCtx = Math.sqrt((pos.x - newPos.x) * (pos.x - newPos.x) + (pos.y - newPos.y) * (pos.y -newPos.y));
//绘制图形
ctx.beginPath();
ctx.moveTo(pos.x, pos.y);
ctx.arc(pos.x, pos.y, radiusCtx, Math.PI * startAngle/180, Math.PI * (startAngle+includeAngle)/180);
//ctx.lineTo(pos.x, pos.y);
ctx.closePath();
ctx.stroke();
ctx.fill();
}
customLayer.render = onRender;// 将自定义的 render 方法挂在自定义图层的 render 属性上
customLayer.setMap(map);
customLayer.show();
}
/**************************************************************************
*定位
*lng：经度
*lat：纬度
**************************************************************************/
function moveToCenter(lng,lat) {
map.setCenter([lng, lat], true);//地图移动至中心点
map.setZoom(18, true);//地图等级调整
if (markerCenter) {
markerCenter.setMap(null);
markerCenter = null;
}
//添加中心点标记
var icon = new AMap.Icon({
imageSize: new AMap.Size(15, 15),
image: "./point.png"
});
markerCenter = new AMap.Marker({
icon: icon,
position: new AMap.LngLat(lng, lat),
title:'当前位置'
});
map.add(markerCenter);
}
/**************************************************************************
*从指定的原点出发，偏移输入角度后，向此方向延伸输入距离，返回此时的位置
*origin_lon：原点经度
*origin_lat：原点纬度
*azimuth：偏移角度
*distance：延伸距离
*ret_lon:返回位置的经度
*ret_lat:返回位置的纬度
**************************************************************************/
function azimuth_offset(origin_lon, origin_lat, azimuth, distance) {
var lonlat = [0.0, 0.0];
if (azimuth != null && distance > 0) {
lonlat[0] = origin_lon + distance * Math.sin(azimuth * Math.PI / 180) * 180 / (Math.PI * 6371229 * Math.cos(origin_lat * Math.PI / 180));
lonlat[1] = origin_lat + distance * Math.cos(azimuth * Math.PI / 180) / (Math.PI * 6371229 / 180);
} else {
lonlat[0] = origin_lon;
lonlat[1] = origin_lat;
}
return lonlat;
}
/******************测试使用*****************/
//定位测试
function moveToCenterTest(){
moveToCenter(110.4231264, 36.2619695);
}
//坐标转换测试
function calcPositionTest() {
azimuth_offset(110.42, 36.26, 0, 50);
}
//添加标记点测试
var lng1 = 110.4231264;
var lat1 = 36.2619695;
var flag1 = false;
function addMakerTest() {
flag1 = !flag1;
lat1 = lat1 - 0.0001;
addMaker(lng1, lat1, flag1);
}
//画扇形测试
var ORIGIN_LONGLAT = [110.4231264, 36.2619695];
function drawSectorTest() {
drawSector(ORIGIN_LONGLAT,0,60,50);
//ORIGIN_LONGLAT[1] = ORIGIN_LONGLAT[1] + 0.0001;
}
/******************************************/
</script>
</body>
</html>
浙公网安备 33010602011771号