“loukongPolygon”的版本间的差异

2020年10月23日 (五) 10:31的版本

镂空多边形绘制

更新时间：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);
    });

@@ 第1行： / 第1行： @@
 {{jspopularGL-sidebar}}
-<div class="h1-title">镂空多边形绘制</div><div id="update-time">更新时间：2020年10月22日</div><div class="bluetitle"><div class="services-title-text">简介</div></div><div class="serve-explain-text">百度地图 JSAPI GL 提供了 BMapGL.Marker3D 类进行带高度的点覆盖物绘制，支持对覆盖物点的高度、大小、形状、颜色及透明度的自定义，并可以进行纹理贴图以满足更多场景需求。</div><!--jsapi单独demo-代码--><div class="aloneDemo"><div dir="https://lbs.baidu.com/jsdemo/demo/fLoukongPolygon.htm"></div><div class="top_right">[http://lbs.baidu.com/jsdemo.htm#fLoukongPolygon DEMO详情]</div></div><div class="bluetitle"><div class="services-title-text">Marker3D类参考</div></div><div class="serve-explain-text">
+<div class="h1-title">镂空多边形绘制</div><div id="update-time">更新时间：2020年10月22日</div><div class="bluetitle"><div class="services-title-text">简介</div></div><div class="serve-explain-text">镂空面绘制基于WebGL的模板取反处理，JSAPI GL提供的Polygon类可以实现镂空面绘制功能。<br/>当个传入的两个区域路径，一个区域位于另一个区域内部，则这个区域不会被绘制出来，从而实现”洞“的效果。</div><!--jsapi单独demo-代码--><div class="aloneDemo"><div dir="https://lbs.baidu.com/jsdemo/demo/fLoukongPolygon.htm"></div><div class="top_right">[http://lbs.baidu.com/jsdemo.htm#fLoukongPolygon DEMO详情]</div></div><div class="bluetitle"><div class="services-title-text">Polygon类参考</div></div><div class="serve-explain-text">
 构造函数：
 </div>
@@ 第8行： / 第8行： @@
 | width="297" | '''说明'''
 |-
-| BMapGL.Marker3D(point, height, options)
+| BMapGL.Polygon(points:Array&lt; Point &gt;, options)
-| Marker3D继承Overlay，用于创建带有高度的点，可以通过options自定义点的样式
+| 创建多边形覆盖物
 |}
 <div class="serve-explain-text">
@@ 第20行： / 第20行： @@
 | width="297" | '''说明'''
 |-
-| point
+| points
-| Point
+| Array&lt; Point &gt;
-| 点坐标，通过Point创建的点对象
+| 点坐标数组
-|-
-| height
-| number
-| 点的高度
 |-
 | options
 | Object
-| 点的自定义样式，可选
+| 多边形样式自定义配置，可选
 |}
 <div class="serve-explain-text">
@@ 第41行： / 第37行： @@
 | width="297" | '''说明'''
 |-
-| size
+| strokeColor
+| string
+| 边线颜色
+|-
+| fillColor
+| string
+| 填充颜色。当参数为空时，折线覆盖物没有填充效果。
+|-
+| strokeWeight
 | number
-| 点的大小，默认为50
+| 边线宽度，以像素为单位
 |-
-| shape
+| strokeOpacity
 | number
-| 点的形状，1 为圆形，2 为正方形，默认为 1。也可以使用对应的常量 BMAP_SHAPE_CIRCLE 和 BMAP_SHAPE_RECT
+| 边线透明度，取值范围0-1
 |-
-| color
+| fillOpacity
-| string
-| 点的颜色，格式为 '#xxxxxx'，比如'#f00'
-|-
-| opacity
 | number
-| 点的透明度，范围0-1，默认0.8
+| 填充透明度
 |-
-| texture
+| strokeStyle
-| Icon
+| string
-| 点的纹理贴图，格式为通过Icon创建的Icon对象
+| 边线样式，solid或dashed
 |}
-<div class="bluetitle"><div class="services-title-text">使用示例</div></div><div class="devguide"><div class="leftborderbg" style="height:5000px;"></div><div class="devguideorder"><span>1</span>创建地图参照展示地图</div><div class="devguidecenter"></div><div class="devguideorder"><span>2</span>创建带高度的点，并添加到地图上</div><div class="devguidecenter">
+<div class="bluetitle"><div class="services-title-text">使用示例</div></div><div class="devguide"><div class="leftborderbg" style="height:5000px;"></div><div class="devguideorder"><span>1</span>创建地图参照展示地图</div><div class="devguidecenter"></div><div class="devguideorder"><span>2</span>创建镂空多边形，并添加到地图上</div><div class="devguidecenter">
-创建带高度的点使用BMapGL.Marker3D类，其继承自Overlay，通过map.addoverlay()方法将创建的点覆盖物添加到地图上。
+镂空面绘制使BMapGL.Polygon类，第一个参数路径数组如果传入的是有相交的区域，则不绘制出来，实现“洞”的效果。如下例顺义区轮廓线存在相交区域，则内部区域镂空处理。
 <pre class="prettyprint codestyle">    var bd = new BMapGL.Boundary();
      bd.get('顺义区', function (rs) {

文档全面上新

2020年10月23日 (五) 10:31的版本