高德地图上添加扇形图

高德地图中没有直接添加扇形图案的方法，经过查看前辈们的博客，编写以下方法。

在高德地图中自定义图层，在自定义图层中使用canvas画图方法添加图形。

示例中还包含了添加标记、清除标记、定位方法。

由于谷歌浏览器无法使用高德地图自带的定位方法，于是单独写了定位方法，定位位置需自己获取后传入。

参考博客：

https://blog.csdn.net/weixin_44005989/article/details/88423707

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

<!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>