Polygon 表示地图上的多边形覆盖物,它包含一组点。多边形将这组点按顺序首尾相连,最终围成一个封闭图形。
通过 map.addOverlay 将多边形添加到地图中
var path = [new BMap.Point(116.387112,39.920977),new BMap.Point(116.385243,39.913063),new BMap.Point(116.394226,39.917988),new BMap.Point(116.401772,39.921364),new BMap.Point(116.41248,39.927893)];var polygon = new BMap.Polygon(path, {strokeColor: "blue",strokeWeight: 2,strokeOpacity: 0.5});map.addOverlay(polygon);
创建 Polygon 时,可以通过第二个参数设置多边形的属性,常用属性如下:
strokeColor:设置多边形描边颜色,如 "blue"、"#ff0000" 等。
strokeWeight:设置多边形描边宽度,数值类型,默认值为 2。
strokeOpacity:设置多边形描边透明度,取值范围 0.0 ~ 1.0。
strokeStyle:设置多边形描边样式,可选 "solid"(实线)或 "dashed"(虚线)。
fillColor:设置多边形填充颜色,如 "#b9ddfa"。
fillOpacity:设置多边形填充透明度,取值范围 0.0 ~ 1.0。
enableEditing:是否启用多边形编辑功能,默认 false。编辑效果见 编辑多边形示例
var polygon = new BMap.Polygon(path, {strokeColor: "blue",strokeWeight: 4,strokeOpacity: 0.8,strokeStyle: "solid",fillColor: "#b9ddfa",fillOpacity: 0.5,enableEditing: false});
多边形添加到地图后,可以通过实例方法动态更新属性,常用方法如下:
// 修改多边形路径var newPath = [new BMap.Point(116.387, 39.921),new BMap.Point(116.385, 39.913),new BMap.Point(116.394, 39.918)];polygon.setPath(newPath);// 修改多边形样式polygon.setStrokeColor("red");polygon.setStrokeWeight(6);polygon.setStrokeOpacity(0.5);polygon.setStrokeStyle("dashed");polygon.setFillColor("#ff0000");polygon.setFillOpacity(0.3);// 获取多边形路径var path = polygon.getPath();
你可以在设置 Polygon 的path的时候传入一个二维数组,二维数组中第一个数组是外环,后续数组是孔。
// 带孔的数据var holePath = [[new BMap.Point(116.35965, 39.92855),new BMap.Point(116.35391, 39.9374),new BMap.Point(116.34873, 39.92855),new BMap.Point(116.34696, 39.91527),new BMap.Point(116.38335, 39.9093),new BMap.Point(116.38121, 39.93461),],[new BMap.Point(116.35, 39.925),new BMap.Point(116.36, 39.925),new BMap.Point(116.36, 39.92),new BMap.Point(116.35, 39.92),],[new BMap.Point(116.365, 39.925),new BMap.Point(116.37, 39.925),new BMap.Point(116.37, 39.92),new BMap.Point(116.365, 39.92),new BMap.Point(116.365, 39.925),],];// 绘制镂空面var polygonWithHole = new BMap.Polygon(holePath, {zIndex: 5,fillOpacity: 1,fillColor: "#b9ddfa",strokeColor: "#359ff6",strokeWeight: 2,strokeOpacity: 1,});
上一篇
下一篇