“棱柱覆盖物展示”的版本间的差异

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

3D棱柱覆盖物展示

该示例介绍如何自定义地图样式。

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

3D棱柱覆盖物

核心接口

类	接口	描述	参考文档
Prism	new BMapGL.Prism(path, height, opts)	创建3d棱柱	暂无
Prism	addEventListener('mouseover',function)	给3d棱柱添加鼠标事件	暂无
Prism	map.addOverlay(prism)	将3D棱柱添加到地图上	暂无

            var bd1 = new BMapGL.Boundary();
            bd1.get('北京市', function (rs) {
                let count = rs.boundaries.length; // 行政区域的点有多少个
                for (let i = 0; i < count; i++) {
                    let path = [];
                    let str = rs.boundaries[i].replace(' ', '');
                    let points = str.split(';');
                    for (let j = 0; j < points.length; j++) {
                        let lng = points[j].split(',')[0];
                        let lat = points[j].split(',')[1];
                        path.push(new BMapGL.Point(lng, lat));
                    }
                    let prism = new BMapGL.Prism(path, 5000, {
                        topFillColor: '#5679ea',
                        topFillOpacity: 0.5,
                        sideFillColor: '#5679ea',
                        sideFillOpacity: 0.9
                    });
                    map.addOverlay(prism);
                    prism.addEventListener('mouseover', function (e) {
                        document.getElementById('city').innerHTML = '北京市';
                        this.setTopFillColor('#f00');
                        console.log(this.getTopFillColor());
                    });
                    prism.addEventListener('mouseout', function (e) {
                        console.log(this.getTopFillColor());
                        e.target.setTopFillColor('#ccc');
                        console.log(e.target.getTopFillColor());
                    });
                }
            });

复制

深色

复制成功

@@ 第1行： / 第1行： @@
 <div id="examples_api_center"><div class="title-hd">3D棱柱覆盖物展示</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">3D棱柱覆盖物</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
+| Prism
-| new BMapGL.Map('container')
+| new BMapGL.Prism(path, height, opts)
-| 创建GL版地图
+| 创建3d棱柱
-| [[jspopularGL/guide/show|展示地图]]
+| 暂无
 |-
-| Map
+| Prism
-| setMapType(BMAP_EARTH_MAP)
+| addEventListener('mouseover',function)
-| 设置地图类型
+| 给3d棱柱添加鼠标事件
-| [[jspopularGL/guide/maptype|变更地图类型]]
+| 暂无
+|-
+| Prism
+| map.addOverlay(prism)
+| 将3D棱柱添加到地图上
+| 暂无
 |}
-</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">            var bd1 = new BMapGL.Boundary();
-  <ul class="drawing-panel" style="z-index: 99;">
+            bd1.get('北京市', function (rs) {
-      <li class = "normal btn current" onclick = "changeMapType(this)">3D地图</li>
+                let count = rs.boundaries.length; // 行政区域的点有多少个
-      <li class = "earth btn" onclick = "changeMapType(this)">卫星地球</li>
+                for (let i = 0; i < count; i++) {
-  </ul>
+                    let path = [];
+                    let str = rs.boundaries[i].replace(' ', '');
-  <script>
+                    let points = str.split(';');
-  var map = new BMapGL.Map('container');
+                    for (let j = 0; j < points.length; j++) {
-  map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 18);  // 设置中心点和地图级别
+                        let lng = points[j].split(',')[0];
-  map.enableScrollWheelZoom(true);                           // 开启鼠标滚轮缩放
+                        let lat = points[j].split(',')[1];
-  map.addControl(new BMapGL.NavigationControl3D());          // 添加3D控件
+                        path.push(new BMapGL.Point(lng, lat));
-  function changeMapType(e) {
+                    }
-      if (e.className.indexOf('current') === -1) {
+                    let prism = new BMapGL.Prism(path, 5000, {
-          var allLi = document.getElementsByClassName('btn');
+                        topFillColor: '#5679ea',
-          for (var i = 0; i < allLi.length; i++) {
+                        topFillOpacity: 0.5,
-              allLi[i].className = allLi[i].className.replace(' current','').trim();
+                        sideFillColor: '#5679ea',
-          }
+                        sideFillOpacity: 0.9
-          e.className += ' current';
+                    });
-          if (e.className.indexOf('normal')&nbsp;!= -1) {
+                    map.addOverlay(prism);
-              map.setMapType(BMAP_NORMAL_MAP);
+                    prism.addEventListener('mouseover', function (e) {
-          } else {
+                        document.getElementById('city').innerHTML = '北京市';
-              map.setMapType(BMAP_EARTH_MAP);
+                        this.setTopFillColor('#f00');
-          }
+                        console.log(this.getTopFillColor());
-      }
+                    });
-  }
+                    prism.addEventListener('mouseout', function (e) {
-  </script>
+                        console.log(this.getTopFillColor());
-                </pre>
+                        e.target.setTopFillColor('#ccc');
+                        console.log(e.target.getTopFillColor());
+                    });
+                }
+            });
+        </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:41的版本