Leaflet笔记(5)在地图上绘制圆形
上文《Leaflet笔记(4)在地图中添加标记Marker》介绍了使用Leaflet添加Marker的方法。本文介绍在地图上绘制圆形的方法。
先放一个效果图
可以看到在前文标记Marker的位置增加了一个绿色边框的圆形。代码如下:
Leaflet画圆
var m = L.map('map-container').setView([36.52,120.31], 7);
var tileAddress = 'https://api.mapbox.com/styles/v1/yqcim/';
tileAddress += 'cizh1ma3400ez2so5x1anhuzo/tiles/256/{z}/{x}/{y}';
tileAddress += '?access_token=pk.eyJ1IjoieXFjaW0iLCJhIjoiY2l6ZmhnZjEx';
tileAddress += 'MDBhajJ4cGxnNGN5MnhpdCJ9.pcZtdfk8mSFboCdwqkvW6g';
var attribution = 'Map data © <a href="http://openstreetmap.org">';
attribution += 'OpenStreetMap</a> contributors, '
attribution += '<a href="http://creativecommons.org/licenses/by-sa/2.0/">';
attribution += 'CC-BY-SA</a>, ';
attribution += 'Imagery © <a href="http://mapbox.com">Mapbox</a>';
L.tileLayer(tileAddress, {
maxZoom: 18,
attribution: attribution,
id: 'mapbox.streets'
}).addTo(m);
// add a marker
var marker = L.marker([36.52,120.31]).addTo(m);
// add a circle
var circle = L.circle([36.52,120.31], {
color: 'green',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 10000
}).addTo(m);
这里用到了Leaflet的circle
这个方法,传入的参数为标记的经纬度和圆形的相关属性
color
表示边框颜色fillColor
表示填充颜色fillOpacity
表示透明度radius
表示圆的半径
在线预览
手机阅读
赞赏支持
手机阅读

微信打赏

支付宝打赏
声明
1.本文所分享的所有需要用户下载使用的内容(包括但不限于软件、数据、图片)来自于网络或者麻辣GIS粉丝自行分享,版权归该下载资源的合法拥有者所有,如有侵权请第一时间联系本站删除。
2.下载内容仅限个人学习使用,请切勿用作商用等其他用途,否则后果自负。
3.如果本文对您有所帮助,请您对我们团队进行 打赏捐助,让我们在传播3S的路上可以走得更远,不胜感激。PS:如果你是学生党,请优先把经费用于购买学习资料 以及 与小哥哥/小姐姐约会上:-)