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辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
相关阅读更多精彩内容
- 亲爱的朋友们,你们是不是经常在出行时使用高德地图来寻找最佳路线?今天,我要给你们介绍的是如何在高德地图上领取优惠券...
- 都说天下没有免费的午餐,但是其实我们还是享受到了很多免费的东西。百度地图和高德地图等导航软件就算一个,他们是我们最...
- 都说天下没有免费的午餐,但是其实我们还是享受到了很多免费的东西。百度地图和高德地图等导航软件就算一个,他们是我们最...
- 最近一直研究地图,包括高德、google、百度、google earth地图,经常使用地图的也会发现,其实高德地图...