高德地图封装绘制圆的方法

function drawCircle(circleParams) {
  // 确保mapLoad已定义(与现有地图加载逻辑保持一致)
  return mapLoad().then((AMap) => {
    // 处理坐标转换(与现有drawPoint保持一致的坐标系逻辑)
    let centerCoordinate = circleParams;
    if (!circleParams.noTransAmap) {
      centerCoordinate = get_GCJLngLat(circleParams);
    }

    // 验证坐标有效性
    if (!centerCoordinate.lng || !centerCoordinate.lat || 
        Number(centerCoordinate.lng) <= 0 || Number(centerCoordinate.lat) <= 0) {
      console.warn('无效的圆心坐标,无法绘制圆');
      return null;
    }

    // 圆心坐标数组 [lng, lat]
    const center = [centerCoordinate.lng, centerCoordinate.lat];

    // 圆的默认样式配置(支持通过params覆盖)
    const defaultStyle = {
      center: center,
      radius: circleParams.radius || 500, // 半径(米),默认500米
      strokeColor: circleParams.strokeColor || '#FF3366', // 边线颜色
      strokeOpacity: circleParams.strokeOpacity || 0.8, // 边线透明度
      strokeWeight: circleParams.strokeWeight || 2, // 边线宽度
      fillColor: circleParams.fillColor || '#FF3366', // 填充色
      fillOpacity: circleParams.fillOpacity || 0.3, // 填充透明度
      zIndex: circleParams.zIndex ?? 50 // 层级,默认50
    };

    // 创建圆覆盖物
    const circle = new AMap.Circle(defaultStyle);
    circle.setMap(map);

    // 绑定点击事件(可选)
    if (circleParams.onClick && typeof circleParams.onClick === 'function') {
      circle.on('click', (e) => {
        circleParams.onClick(e, circle);
      });
    }

    // 自动居中逻辑(默认启用,可通过参数关闭)
    const shouldCenter = circleParams.autoCenter !== false; // 默认true
    if (shouldCenter) {
      // 计算适合圆显示的视野:确保整个圆可见,添加适当边距
      map.setFitView([circle], true, [50, 50, 50, 50]);
      
      // 可选:如果需要精确居中到圆心而非适配圆大小
      // map.setCenter(center);
      // if (circleParams.zoom) map.setZoom(circleParams.zoom);
    }

    // 返回圆实例供外部使用
    return circle;
  });
}

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容