浏览器版本低!无法浏览完整内容,建议升级或更换浏览器。

文档全面上新

更科技的视觉体验,更高效的页面结构,快前往体验吧!

体验新版
镂空多边形绘制
更新时间:2020年10月22日
简介
镂空面绘制基于WebGL的模板取反处理,JSAPI GL提供的Polygon类提供镂空面绘制功能。
当个传入的两个区域路径,一个区域位于另一个区域内部,则这个区域不会被绘制出来,从而实现”洞“的效果。
Polygon类参考

构造函数:

构造函数 说明
BMapGL.Polygon(points:Array< Point >, options) 创建多边形覆盖物

参数说明:

构造函数 类型 说明
points Array< Point > 点坐标数组
options Object 多边形样式自定义配置,可选

options属性变量:

options属性 类型 说明
strokeColor string 边线颜色
fillColor string 填充颜色。当参数为空时,折线覆盖物没有填充效果。
strokeWeight number 边线宽度,以像素为单位
strokeOpacity number 边线透明度,取值范围0-1
fillOpacity number 填充透明度
strokeStyle string 边线样式,solid或dashed
使用示例
1创建地图参照展示地图
2创建镂空多边形,并添加到地图上

镂空面绘制使BMapGL.Polygon类,第一个参数路径数组如果传入的是有相交的区域,则不绘制出来,实现“洞”的效果。
如下例顺义区轮廓线存在相交区域,则内部区域镂空处理。

    var bd = new BMapGL.Boundary();
    bd.get('顺义区', function (rs) {
        // console.log('外轮廓:', rs.boundaries[0])
        // console.log('内镂空:', rs.boundaries[1])
        var hole = new BMapGL.Polygon(rs.boundaries, {
            fillColor: 'blue',
            fillOpacity: 0.2
        });
        map.addOverlay(hole);
    });
  • 文档根本没法用

  • 文档水平很差

  • 文档水平一般

  • 文档不错

  • 文档写的很好

如发现文档错误,或对此文档有更好的建议,请在下方反馈。问题咨询请前往反馈平台提交工单咨询。

提交反馈

拖动标注工具

添加矩形标注

添加箭头标注

完成

取消