“贝塞尔曲线”的版本间的差异

2020年10月9日 (五) 14:49的版本

贝塞尔曲线

该示例以飞机航线为例，介绍贝塞尔曲线的应用。

https://mapopen-website-wiki.cdn.bcebos.com/wiki/android-loc-sdk/sdkgetAK.mov

贝塞尔曲线应用示例

核心接口

类	接口	描述	参考文档
BezierCurve	new BMapGL.BezierCurve(path, controlPoints, opts）	创建贝塞尔曲线	暂无

            // 构造飞机航线的贝塞尔曲线
            let pointStart = new BMapGL.Point(117.225859, 36.572198);   // 济南
            let pointMedium = new BMapGL.Point(117.231132, 38.986181);  // 天津
            let pointEnd = new BMapGL.Point(116.453173, 39.926851);     // 北京  
        
            let endP = new BMapGL.Point(116.455183, 39.999881);
            let path = [
                new BMapGL.Point(117.225859, 36.572198),
                new BMapGL.Point(117.231132, 38.986181),
                new BMapGL.Point(116.453173, 39.926851)
            ];
            let controlPoints = [
                [new BMapGL.Point(116.991968, 38.112096)],
                [new BMapGL.Point(117.341516, 39.686244)]
            ];
            let bc = new BMapGL.BezierCurve(path, controlPoints, {
                strokeColor: '#00f',
                strokeWeight: 5
            });
            map.addOverlay(bc);
        
            // 添加起始点、途经点
            let startIcon = new BMapGL.Icon('./images/start.png', new BMapGL.Size(28, 28));
            let mediumIcon = new BMapGL.Icon('./images/medium.png', new BMapGL.Size(28, 28));
            let endIcon = new BMapGL.Icon('./images/end.png', new BMapGL.Size(28, 28));
        
            map.addOverlay(new BMapGL.Marker(pointStart, {
                icon: startIcon
            }));
            map.addOverlay(new BMapGL.Marker(pointMedium, {
                icon: mediumIcon
            }));
            map.addOverlay(new BMapGL.Marker(endP, {
                icon: endIcon
            }));

复制

深色

复制成功

@@ 第1行： / 第1行： @@
-<div id="examples_api_center"><div class="title-hd">贝塞尔曲线</div></div><div class="demos_wrap"><div class="header"><div class="active">功能场景</div></div><div class="wrap-mi">该示例介绍如何自定义地图样式。</div><div class="header"><div class="active">DEMO</div></div><div class="andiord-wrap wrap"><div class="wrap-wp"><div class="pc-video"><div class="video-box infor"><div class="video-control1"></div><pre>https://mapopen-website-wiki.cdn.bcebos.com/wiki/android-loc-sdk/sdkgetAK.mov</pre>
+<div id="examples_api_center"><div class="title-hd">贝塞尔曲线</div></div><div class="demos_wrap"><div class="header"><div class="active">功能场景</div></div><div class="wrap-mi">该示例以飞机航线为例，介绍贝塞尔曲线的应用。</div><div class="header"><div class="active">DEMO</div></div><div class="andiord-wrap wrap"><div class="wrap-wp"><div class="pc-video"><div class="video-box infor"><div class="video-control1"></div><pre>https://mapopen-website-wiki.cdn.bcebos.com/wiki/android-loc-sdk/sdkgetAK.mov</pre>
-</div><div class="video-title1">白天模式与黑夜模式切换</div></div></div><div class="api-table-box"><div class="api-info-box"><div class="pre-nav"><div class="left-icon"></div><div>核心接口</div><br/></div>
+</div><div class="video-title1">贝塞尔曲线应用示例</div></div></div><div class="api-table-box"><div class="api-info-box"><div class="pre-nav"><div class="left-icon"></div><div>核心接口</div><br/></div>
 {| width="370" border="1"
 |-
@@ 第8行： / 第8行： @@
 | width="90" | '''参考文档'''
 |-
-| Map
+| BezierCurve
-| new BMapGL.Map('container')
+| new BMapGL.BezierCurve(path, controlPoints, opts）
-| 创建GL版地图
+| 创建贝塞尔曲线
-| [[jspopularGL/guide/show|展示地图]]
+| 暂无
-|-
-| Map
-| setMapType(BMAP_EARTH_MAP)
-| 设置地图类型
-| [[jspopularGL/guide/maptype|变更地图类型]]
 |}
-</div></div><div class="header"><div class="active">核心代码</div></div><div class="pre-wrap"><div class="pre-wrap-w pre-wrap-w-and"><pre class="prettyprint prettyprinted pre-and">  <div id="container"></div>
+</div></div><div class="header"><div class="active">核心代码</div></div><div class="pre-wrap"><div class="pre-wrap-w pre-wrap-w-and"><pre class="prettyprint prettyprinted pre-and">            // 构造飞机航线的贝塞尔曲线
-  <ul class="drawing-panel" style="z-index: 99;">
+            let pointStart = new BMapGL.Point(117.225859, 36.572198);   // 济南
-      <li class = "normal btn current" onclick = "changeMapType(this)">3D地图</li>
+            let pointMedium = new BMapGL.Point(117.231132, 38.986181);  // 天津
-      <li class = "earth btn" onclick = "changeMapType(this)">卫星地球</li>
+            let pointEnd = new BMapGL.Point(116.453173, 39.926851);     // 北京
-  </ul>
+            let endP = new BMapGL.Point(116.455183, 39.999881);
-  <script>
+            let path = [
-  var map = new BMapGL.Map('container');
+                new BMapGL.Point(117.225859, 36.572198),
-  map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 18);  // 设置中心点和地图级别
+                new BMapGL.Point(117.231132, 38.986181),
-  map.enableScrollWheelZoom(true);                           // 开启鼠标滚轮缩放
+                new BMapGL.Point(116.453173, 39.926851)
-  map.addControl(new BMapGL.NavigationControl3D());          // 添加3D控件
+            ];
-  function changeMapType(e) {
+            let controlPoints = [
-      if (e.className.indexOf('current') === -1) {
+                [new BMapGL.Point(116.991968, 38.112096)],
-          var allLi = document.getElementsByClassName('btn');
+                [new BMapGL.Point(117.341516, 39.686244)]
-          for (var i = 0; i < allLi.length; i++) {
+            ];
-              allLi[i].className = allLi[i].className.replace(' current','').trim();
+            let bc = new BMapGL.BezierCurve(path, controlPoints, {
-          }
+                strokeColor: '#00f',
-          e.className += ' current';
+                strokeWeight: 5
-          if (e.className.indexOf('normal')&nbsp;!= -1) {
+            });
-              map.setMapType(BMAP_NORMAL_MAP);
+            map.addOverlay(bc);
-          } else {
-              map.setMapType(BMAP_EARTH_MAP);
+            // 添加起始点、途经点
-          }
+            let startIcon = new BMapGL.Icon('./images/start.png', new BMapGL.Size(28, 28));
-      }
+            let mediumIcon = new BMapGL.Icon('./images/medium.png', new BMapGL.Size(28, 28));
-  }
+            let endIcon = new BMapGL.Icon('./images/end.png', new BMapGL.Size(28, 28));
-  </script>
+            map.addOverlay(new BMapGL.Marker(pointStart, {
+                icon: startIcon
+            }));
+            map.addOverlay(new BMapGL.Marker(pointMedium, {
+                icon: mediumIcon
+            }));
+            map.addOverlay(new BMapGL.Marker(endP, {
+                icon: endIcon
+            }));
                  </pre>
 <div class="pre-btn"><div class="pre-btn-copy-and">复制</div><div class="pre-btn-cb-and">深色</div></div><div class="success">复制成功</div></div></div></div></div>

文档全面上新

2020年10月9日 (五) 14:49的版本