一、前言
在许多地图应用场景中，绘制圆形区域（比如电子围栏、服务区域等）是一项常见的需求。通过高德地图的API，我们可以轻松实现这一功能。本文将详细介绍如何使用高德地图API来绘制、编辑、删除圆形区域，并进行一些实用操作，比如模拟测试点是否在圆形区域内。
二、实现功能
-
绘制圆形：用户可以在地图上点击任意位置，创建一个圆形区域。
-
编辑圆形：通过高德地图的圆形编辑器，用户可以在绘制后修改圆形的半径、位置等属性。
-
删除圆形：用户可以删除已绘制的圆形和其圆心标记。
-
模拟测试点：模拟一个固定点，检查该点是否在圆形区域内。
三、技术背景
本示例使用了高德地图JavaScript API，并引入了AMap.CircleEditor插件来支持圆形的绘制和编辑。
四、实现步骤
1. 引入高德地图API和插件
在<head>标签中，我们需要引入高德地图的API脚本和相关插件。插件AMap.CircleEditor是用于圆形编辑的工具。
<script src="https://webapi.amap.com/maps?v=2.0&key=YOUR_KEY&plugin=AMap.CircleEditor"></script>
请记得替换
YOUR_KEY为你自己的高德API密钥。
2. 页面结构
在页面中，我们创建了一个<div>用于显示地图，并在页面上放置了几个按钮来触发绘制、编辑、删除和模拟测试点等功能。
<div id="container"></div>
<div class="input-card" style="width: 120px">
<button class="btn" onclick="startDrawing()">开始绘制圆形</button>
<button class="btn" onclick="stopDrawing()">结束编辑</button>
<button class="btn" onclick="deleteCircle()">删除圆形</button>
<button class="btn" onclick="simulateTestPoint()">模拟测试点</button>
</div>
3. 地图初始化
接着，我们通过JavaScript初始化高德地图，并设置中心点与缩放级别。
var map = new AMap.Map("container", {
center: [116.433322, 39.900256],
zoom: 14
});
4. 绘制圆形
通过监听地图的点击事件，我们可以获取点击位置并创建一个圆形。圆形的半径、边框颜色等属性都可以在此时进行设置。
var circle = null;
var circleEditor = null;
var circleCenterMarker = null;
function startDrawing() {
drawing = true;
map.on('click', onMapClick); // 启用地图点击事件
}
function onMapClick(event) {
if (!drawing) return;
var center = event.lnglat; // 获取点击的位置
deleteCircle(); // 删除之前的圆形
// 创建新的圆形
circle = new AMap.Circle({
center: center, // 设置圆心为点击位置
radius: 1000, // 初始半径
borderWeight: 3,
strokeColor: "#FF33FF",
strokeOpacity: 1,
strokeWeight: 6,
fillOpacity: 0.4,
fillColor: '#1791fc',
});
// 添加圆形到地图
map.add(circle);
// 创建并添加圆心标记
circleCenterMarker = new AMap.Marker({
position: center,
icon: new AMap.Icon({
size: new AMap.Size(12, 12),
image: 'https://webapi.amap.com/images/marker_sprite.png',
})
});
map.add(circleCenterMarker);
// 启动圆形编辑器
circleEditor = new AMap.CircleEditor(map, circle);
circleEditor.open(); // 进入编辑模式
}
5. 删除圆形
用户可以通过点击“删除圆形”按钮来删除已绘制的圆形以及圆心标记。
function deleteCircle() {
if (circle) {
map.remove(circle); // 移除圆形
circle = null;
}
if (circleCenterMarker) {
map.remove(circleCenterMarker); // 移除圆心标记
circleCenterMarker = null;
}
if (circleEditor) {
circleEditor.close(); // 关闭圆形编辑器
circleEditor = null;
}
}
6. 模拟测试点
模拟一个固定的测试点，并检查该点是否在绘制的圆形区域内。我们使用 AMap.Circle.contains() 方法来判断测试点是否在圆形内。
function simulateTestPoint() {
if (!circle) {
alert("请先绘制一个圆形！");
return;
}
var fixedLng = 116.433322; // 固定经度
var fixedLat = 39.900256; // 固定纬度
var testPoint = new AMap.LngLat(fixedLng, fixedLat); // 创建测试点
var isInside = circle.contains(testPoint); // 使用圆形的 contains 方法检查点是否在圆形内
if (isInside) {
alert("测试点在电子围栏内！");
} else {
alert("测试点不在电子围栏内！");
}
// 在地图上标记测试点
var marker = new AMap.Marker({
position: testPoint,
title: "测试点",
icon: 'https://webapi.amap.com/images/marker_sprite.png',
});
marker.setMap(map);
map.setFitView([marker]); // 调整地图视野以适应测试点
}
五、总结
通过高德地图API，我们能够轻松实现圆形区域的绘制、编辑和删除功能。利用 AMap.CircleEditor 插件，还能让用户交互式地修改圆形属性。此外，模拟测试点功能为我们提供了一个简单的方法来验证点是否在已绘制的圆形区域内。
六、全部代码
<!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">
<style>
html,
body,
#container {
width: 100%;
height: 100%;
}
</style>
<title>圆的绘制和编辑</title>
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<script
src="https://webapi.amap.com/maps?v=2.0&key=你的key&plugin=AMap.CircleEditor"></script>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
</head>
<body>
<div id="container"></div>
<div class="input-card" style="width: 120px">
<button class="btn" onclick="startDrawing()" style="margin-bottom: 5px">开始绘制圆形</button>
<button class="btn" onclick="stopDrawing()">结束编辑</button>
<button class="btn" onclick="deleteCircle()">删除圆形</button>
<button class="btn" onclick="simulateTestPoint()" style="margin-top: 5px">模拟测试点</button> <!-- 模拟测试点按钮 -->
</div>
<script type="text/javascript">
var map = new AMap.Map("container", {
center: [116.433322, 39.900256],
zoom: 14
});
var circle = null; // 用来存储圆形对象
var circleEditor = null; // 用来存储圆形编辑器
var circleCenterMarker = null; // 用来存储圆心的标记
var drawing = false; // 标记是否处于绘制状态
// 开始绘制圆形
function startDrawing() {
drawing = true;
map.on('click', onMapClick); // 启用地图点击事件
}
// 停止绘制
function stopDrawing() {
drawing = false;
map.off('click', onMapClick); // 禁用地图点击事件
if (circleEditor) {
circleEditor.close(); // 关闭编辑器
}
}
// 在地图上点击生成圆形
function onMapClick(event) {
if (!drawing) return;
var center = event.lnglat; // 获取点击的位置
// 如果已有圆形，移除之前的圆形和圆心标记
deleteCircle()
// 创建新的圆形
circle = new AMap.Circle({
center: center, // 设置圆心为点击位置
radius: 1000, // 初始半径
borderWeight: 3,
strokeColor: "#FF33FF",
strokeOpacity: 1,
strokeWeight: 6,
strokeOpacity: 0.2,
fillOpacity: 0.4,
strokeStyle: 'dashed',
strokeDasharray: [10, 10], // 线条样式
fillColor: '#1791fc',
zIndex: 50,
});
// 添加圆形到地图
map.add(circle);
// 创建并添加圆心标记
circleCenterMarker = new AMap.Marker({
position: center, // 设置圆心位置
icon: new AMap.Icon({
size: new AMap.Size(12, 12), // 设置圆心标记的大小
image: 'https://webapi.amap.com/images/marker_sprite.png',
imageSize: new AMap.Size(12, 12), // 设置图片大小
})
});
map.add(circleCenterMarker); // 将圆心标记添加到地图
// 启动圆形编辑器
circleEditor = new AMap.CircleEditor(map, circle);
circleEditor.open(); // 进入编辑模式
}
// 删除圆形和圆心
function deleteCircle() {
// 判断是否已经存在圆形
if (circle) {
console.log("删除圆形");
map.remove(circle); // 移除圆形
circle = null; // 清空圆形对象
} else {
console.log("没有圆形可以删除");
}
// 判断是否已经存在圆心标记
if (circleCenterMarker) {
console.log("删除圆心标记");
map.remove(circleCenterMarker); // 移除圆心标记
circleCenterMarker = null; // 清空圆心标记
} else {
console.log("没有圆心标记可以删除");
}
// 关闭编辑器
if (circleEditor) {
console.log("关闭编辑器");
circleEditor.close(); // 关闭圆形编辑器
circleEditor = null; // 清空编辑器
}
}
// 模拟测试点，点击按钮后会使用固定位置来检查其是否在圆形内
function simulateTestPoint() {
if (!circle) {
alert("请先绘制一个圆形！");
return;
}
// 直接使用固定经纬度，代替随机偏移
var fixedLng = 116.433322; // 固定经度
var fixedLat = 39.900256; // 固定纬度
var testPoint = new AMap.LngLat(fixedLng, fixedLat); // 创建测试点
// 使用 contains 方法判断点是否在圆形内
var isInside = circle.contains(testPoint); // 使用圆形的 contains 方法检查点是否在圆形内
// 显示结果
if (isInside) {
alert("测试点在电子围栏内！");
} else {
alert("测试点不在电子围栏内！");
}
// 在地图上标记测试点
var marker = new AMap.Marker({
position: testPoint, // 设置测试点的位置
title: "测试点", // 设置标记的标题
icon: 'https://webapi.amap.com/images/marker_sprite.png', // 可以使用自定义图标
label: { // 设置标记的文字标签
content: '测试点',
offset: new AMap.Pixel(0, -20)
}
});
// 将标记添加到地图上
marker.setMap(map);
// 可选：调整地图视野以适应测试点
map.setFitView([marker]);
}
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
