| 圆形绘制和编辑 | 您所在的位置：网站首页 › 高德地图画线测距离 › 圆形绘制和编辑 |
|
AMap.Circle可以绘制圆形，本文介绍如何在地图上绘制编辑圆形，并设置填充颜色、描边颜色、轮廓线样式等属性。 圆形覆盖物示例亲手试一试 下载完整代码 提示AMap.CircleMarker 类与 AMap.Circle 类均可在地图上绘制圆形。它们的区别在于 AMap.Circle 为矢量图形类，随地图的缩放会改变大小；而 AMap.CircleMarker 类则不会随地图缩放而改变，但它拥有更小的性能消耗。 如果你想表示一个圆形标记推荐使用AMap.CircleMarker，如果你想表示一个圆形区域推荐使用AMap.Circle。 AMap.CircleMarker教程 1、绘制圆形 Circle1.1 准备成为开发者并创建 key为了正常调用 API ，请先注册成为高德开放平台开发者，并申请 web 平台（JS API）的 key 和安全密钥，点击 具体操作。 提示你在2021年12月02日以后申请的 key 需要配合你的安全密钥一起使用。 1.2 创建地图//创建地图 var map = new AMap.Map("container", { center: [116.433322, 39.900256], //地图中心点 mapStyle: "amap://styles/whitesmoke", //地图的显示样式 viewMode: "2D", //地图模式 zoom: 14, //地图级别 });前往展示地图，了解完整地图创建 1.3 设置圆心位置和半径提示如果不知道如何确认经纬度前往 拾取坐标 //设置圆形位置 var center = new AMap.LngLat(116.433322, 39.900255); //设置圆的半径大小 var radius = 1000;1.4 创建圆形 Circle 实例//创建圆形 Circle 实例 var circle = new AMap.Circle({ center: center, //圆心 radius: radius, //半径 borderWeight: 3, //描边的宽度 strokeColor: "#FF33FF", //轮廓线颜色 strokeOpacity: 1, //轮廓线透明度 strokeWeight: 6, //轮廓线宽度 fillOpacity: 0.4, //圆形填充透明度 strokeStyle: "dashed", //轮廓线样式 strokeDasharray: [10, 10], fillColor: "#1791fc", //圆形填充颜色 zIndex: 50, //圆形的叠加顺序 });1.5 圆形 Circle 对象添加到 Map//圆形 Circle 对象添加到 Map map.add(circle); //根据覆盖物范围调整视野 map.setFitView([ circle ])提示删除已有Circle对象使用：map.remove(circle)。 查看所有AMap.Circle属性及方法说明 1.6 给 Circle 添加事件//鼠标移入事件 circle.on("mouseover", function () { console.log("鼠标移入"); }); 2、圆形编辑AMap.CircleEditor圆形编辑插件，支持对原有的圆形进行修改或直接在地图上动态绘制圆形，通过调整圆形的位置、大小，从而实现实时编辑和绘制 2.1 构造圆形编辑对象，并开启圆形的编辑状态//引入圆形编辑器插件 map.plugin(["AMap.CircleEditor"], function () { //实例化圆形编辑器，传入地图实例和要进行编辑的圆形实例 var circleEditor = new AMap.CircleEditor(map, circle); //开启编辑模式 circleEditor.open(); });提示circleEditor.open()为开始编辑对象的方法，如果你想结束编辑可以调用circleEditor.close()方法。 查看更多AMap.CircleEditor属性和方法 3、本章涉及的属性及方法说明3.1 AMap.Circle参数/方法 说明 类型 参数值描述 默认值 center 圆心位置 Array 经纬度对象或经纬度构成的一维数组。例如： AMap.LngLat(116.39,39.9)或[116.39, 39.9] - radius 圆的半径，单位:米 Number 取值范围[0,50000] - borderWeight 描边的宽度 Number - 1 strokeColor 轮廓线颜色 String 使用16进制颜色代码赋值 #00D3FC strokeOpacity 轮廓线透明度 Number 取值范围[0,1] 0表示完全透明 1表示不透明 0.9 strokeWeight 轮廓线宽度 Number - 2 fillOpacity 圆形填充透明度 Number 取值范围[0,1] 0表示完全透明 1表示不透明 0.5 strokeStyle 轮廓线样式 String 实线: 'solid' 虚线: 'dashed' 'solid' strokeDasharray 勾勒形状轮廓的虚线和间隙的样式,此属性在strokeStyle 为 dashed 时有效 Array 详见 参考手册 [10,5] fillColor 圆形填充颜色 String 使用16进制颜色代码赋值 #00D3FC zIndex 圆形的叠加顺序。地图上存在多个圆形叠加时，通过该属性使级别较高的圆形在上层显示 Number - 50 查看所有AMap.Circle属性和方法 |
| 今日新闻 |
| 推荐新闻 |
| 专题文章 |
| CopyRight 2018-2019 实验室设备网 版权所有 |