“loukongPolygon”的版本间的差异

2020年10月21日 (三) 16:43的版本

镂空多边形绘制

更新时间：2020年10月22日

简介

百度地图 JSAPI GL 提供了 BMapGL.Marker3D 类进行带高度的点覆盖物绘制，支持对覆盖物点的高度、大小、形状、颜色及透明度的自定义，并可以进行纹理贴图以满足更多场景需求。

Marker3D类参考

构造函数：

构造函数	说明
BMapGL.Marker3D(point, height, options)	Marker3D继承Overlay，用于创建带有高度的点，可以通过options自定义点的样式

参数说明：

构造函数	类型	说明
point	Point	点坐标，通过Point创建的点对象
height	number	点的高度
options	Object	点的自定义样式，可选

options属性变量：

options属性	类型	说明
size	number	点的大小，默认为50
shape	number	点的形状，1 为圆形，2 为正方形，默认为 1。也可以使用对应的常量 BMAP_SHAPE_CIRCLE 和 BMAP_SHAPE_RECT
color	string	点的颜色，格式为 '#xxxxxx'，比如'#f00'
opacity	number	点的透明度，范围0-1，默认0.8
texture	Icon	点的纹理贴图，格式为通过Icon创建的Icon对象

使用示例

1创建地图参照展示地图

2创建带高度的点，并添加到地图上

创建带高度的点使用BMapGL.Marker3D类，其继承自Overlay，通过map.addoverlay()方法将创建的点覆盖物添加到地图上。

    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">基于 WebGL 点图元，百度地图 JSAPI GL 提供了 BMapGL.Marker3D 类进行带高度的点覆盖物绘制，支持对覆盖物点的高度、大小、形状、颜色及透明度的自定义，并可以进行纹理贴图以满足更多场景需求。</div><!--jsapi单独demo-代码--><div class="aloneDemo"><div dir="https://lbs.baidu.com/jsdemo/demo/webgl1_0.htm"></div><div class="top_right">[http://lbs.baidu.com/jsdemo.htm#webgl1_0 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">百度地图 JSAPI GL 提供了 BMapGL.Marker3D 类进行带高度的点覆盖物绘制，支持对覆盖物点的高度、大小、形状、颜色及透明度的自定义，并可以进行纹理贴图以满足更多场景需求。</div><!--jsapi单独demo-代码--><div class="aloneDemo"><div dir="https://lbs.baidu.com/jsdemo/demo/webgl1_0.htm"></div><div class="top_right">[http://lbs.baidu.com/jsdemo.htm#webgl1_0 DEMO详情]</div></div><div class="bluetitle"><div class="services-title-text">Marker3D类参考</div></div><div class="serve-explain-text">
 构造函数：
 </div>
@@ 第49行： / 第49行： @@
 | 点的形状，1 为圆形，2 为正方形，默认为 1。也可以使用对应的常量 BMAP_SHAPE_CIRCLE 和 BMAP_SHAPE_RECT
 |-
-| fillColor
+| color
 | string
 | 点的颜色，格式为 '#xxxxxx'，比如'#f00'
 |-
-| fillOpacity
+| opacity
 | number
 | 点的透明度，范围0-1，默认0.8
 |-
-| icon
+| texture
 | Icon
 | 点的纹理贴图，格式为通过Icon创建的Icon对象
@@ 第63行： / 第63行： @@
 <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()方法将创建的点覆盖物添加到地图上。
-<pre class="prettyprint codestyle">    // 创建位置点
+<pre class="prettyprint codestyle">    var bd = new BMapGL.Boundary();
-    var point = new BMapGL.Point(116.404, 39.915);
+    bd.get('顺义区', function (rs) {
-    // 创建带高度的点
+        // console.log('外轮廓：', rs.boundaries[0])
-    var marker3d = new BMapGL.Marker3D(point, 8000, {
+        // console.log('内镂空：', rs.boundaries[1])
-        size: 50,
+        var hole = new BMapGL.Polygon(rs.boundaries, {
-        shape: BMAP_SHAPE_CIRCLE,
+            fillColor: 'blue',
-        fillColor: '#454399',
+            fillOpacity: 0.2
-        fillOpacity: 0.6
+        });
+        map.addOverlay(hole);
      });
-    // 将点添加到地图上
-    map.addOverlay(marker3d);
-</pre>
-</div></div><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">纹理图片首先需要通过Icon类创建实例，然后通过Marker3D类创建带高度的点实例时，将得到的Icon实例传给icon属性。<pre class="prettyprint codestyle">    // 创建位置点
-    var pt = new BMapGL.Point(point.lng, point.lat);
-    // 创建贴图纹理Icon
-    var icon = new BMapGL.Icon(citys[i].img, new BMapGL.Size(40, 40));
-    // 创建带高度的点，这里只需要size和icon
-    var marker = new BMapGL.Marker3D(pt, 8000, {
-        size: 80,
-        icon: icon
-    });
-    // 将点添加到地图上
-    map.addOverlay(marker);
 </pre>
 </div></div>

文档全面上新

2020年10月21日 (三) 16:43的版本