Leaflet笔记(6)在地图上绘制多边形(Polygon)

本文介绍在Leaflet的地图上绘制多边形（Polygon）的方法。

先放一个效果图

可以看到在前文绘制的圆形的位置增加了一个蓝色边框的多边形。这个方法也比较简单，代码如下：

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 &copy; <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);

// add a polygon
var polygon = L.polygon([
  [36, 121],
  [37, 121],
  [36.5, 122],
  [36.5, 122.2]
],{
  color: 'green',
  fillColor: '#f03',
  fillOpacity: 0.5
}).addTo(m);

这里用到了Leaflet的polygon这个方法，传入的参数为标记的经纬度数组和Polygon的相关属性

• color 表示边框颜色
• fillColor 表示填充颜色
• fillOpacity 表示透明度

在线预览

绘制多边形(Polygon)