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

文档全面上新

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

体验新版
（以“<div id="examples_api_center"><div class="title-hd">覆盖物绘制</div></div><div class="demos_wrap"><div class="header"><div class="active">功能场景</div></di...”为内容创建页面）
 
第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><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 class="wrap-mi">该示例应用到BMapGL的开源工具库BMapGLLib的绘制类DrawingManager进行基础图形的绘制。</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">覆盖物绘制示例demo</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"
 
{| width="370" border="1"
 
|-
 
|-
第8行： 第9行：
 
| width="90" | '''参考文档'''
 
| width="90" | '''参考文档'''
 
|-
 
|-
−
| Map
+
| DrawingManager
−
| new BMapGL.Map('container')
+
| new BMapGLLib.DrawingManager(map,opts)
−
| 创建GL版地图
+
| 实例化鼠标绘制工具
−
| [[jspopularGL/guide/show|展示地图]]
+
| [[https://github.com/huiyan-fe/BMapGLLib|BMapGLLib文档]]
 
|-
 
|-
−
| Map
+
| DrawingManager
−
| setMapType(BMAP_EARTH_MAP)
+
| drawingManager.open()
−
| 设置地图类型
+
| 开启绘制
−
| [[jspopularGL/guide/maptype|变更地图类型]]
+
| [[https://github.com/huiyan-fe/BMapGLLib|BMapGLLib文档]]
 +
|-
 +
| DrawingManager
 +
| drawingManager.close()
 +
| 关闭绘制
 +
| [[https://github.com/huiyan-fe/BMapGLLib|BMapGLLib文档]]
 
|}
 
|}
−
</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">
−
  <ul class="drawing-panel" style="z-index: 99;">
+
    <div class="pre-wrap-w pre-wrap-w-and">
−
      <li class = "normal btn current" onclick = "changeMapType(this)">3D地图</li>
+
        <pre class="prettyprint prettyprinted pre-and">
−
      <li class = "earth btn" onclick = "changeMapType(this)">卫星地球</li>
+
            var styleOptions = {
−
  </ul>
+
                strokeColor: '#5E87DB',  // 边线颜色
−
 
+
                fillColor: '#5E87DB',    // 填充颜色。当参数为空时，圆形没有填充颜色
−
  <script>
+
                strokeWeight: 2,          // 边线宽度，以像素为单位
−
  var map = new BMapGL.Map('container');
+
                strokeOpacity: 1,        // 边线透明度，取值范围0-1
−
  map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 18);  // 设置中心点和地图级别
+
                fillOpacity: 0.2          // 填充透明度，取值范围0-1
−
  map.enableScrollWheelZoom(true);                          // 开启鼠标滚轮缩放   
+
            };
−
   map.addControl(new BMapGL.NavigationControl3D());          // 添加3D控件
+
            var labelOptions = {
−
   function changeMapType(e) {
+
                borderRadius: '2px',
−
      if (e.className.indexOf('current') === -1) {
+
                background: '#FFFBCC',
−
          var allLi = document.getElementsByClassName('btn');
+
                border: '1px solid #E1E1E1',
−
          for (var i = 0; i < allLi.length; i++) {
+
                color: '#703A04',
−
              allLi[i].className = allLi[i].className.replace(' current','').trim();
+
                fontSize: '12px',
−
          }
+
                letterSpacing: '0',
−
          e.className += ' current';
+
                padding: '5px'
−
          if (e.className.indexOf('normal')&nbsp;!= -1) {
+
            };
−
              map.setMapType(BMAP_NORMAL_MAP);
+
            // 实例化鼠标绘制工具
−
          } else {
+
            var drawingManager = new BMapGLLib.DrawingManager(map, {
−
              map.setMapType(BMAP_EARTH_MAP);
+
                // isOpen: true,       // 是否开启绘制模式
−
          }
+
                enableCalculate: false, // 绘制是否进行测距测面
−
      }
+
                enableSorption: true,  // 是否开启边界吸附功能
−
  }
+
                sorptiondistance: 20,   // 边界吸附距离
−
  </script>
+
                circleOptions: styleOptions,    // 圆的样式
 +
                polylineOptions: styleOptions,   // 线的样式
 +
                polygonOptions: styleOptions,    // 多边形的样式
 +
                rectangleOptions: styleOptions,  // 矩形的样式
 +
                labelOptions: labelOptions,      // label样式
 +
            }); 
 +
            function draw(e) {
 +
                var arr = document.getElementsByClassName('bmap-btn');
 +
                for(var i = 0; i<arr.length; i++) {
 +
                    arr[i].style.backgroundPositionY = '0';
 +
                }
 +
                e.style.backgroundPositionY = '-52px';
 +
                switch(e.id) {
 +
                    case 'marker': {
 +
                        var drawingType = BMAP_DRAWING_MARKER;
 +
                        break;
 +
                    }
 +
                    case 'polyline': {
 +
                        var drawingType = BMAP_DRAWING_POLYLINE;
 +
                        break;
 +
                    }
 +
                    case 'rectangle': {
 +
                        var drawingType = BMAP_DRAWING_RECTANGLE;
 +
                        break;
 +
                    }
 +
                    case 'polygon': {
 +
                        var drawingType = BMAP_DRAWING_POLYGON;
 +
                        break;
 +
                    }
 +
                    case 'circle': {
 +
                        var drawingType = BMAP_DRAWING_CIRCLE;
 +
                        break;
 +
                    }
 +
                }
 +
                // 进行绘制
 +
                if (drawingManager._isOpen && drawingManager.getDrawingMode() === drawingType) {
 +
                    drawingManager.close();
 +
                } else {
 +
                    drawingManager.setDrawingMode(drawingType);
 +
                    drawingManager.open();
 +
                }
 +
            };
 
                 </pre>
 
                 </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>
 
<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:57的版本

覆盖物绘制
功能场景
该示例应用到BMapGL的开源工具库BMapGLLib的绘制类DrawingManager进行基础图形的绘制。
DEMO
https://mapopen-website-wiki.cdn.bcebos.com/wiki/android-loc-sdk/sdkgetAK.mov
覆盖物绘制示例demo
核心接口

类 接口 描述 参考文档
DrawingManager new BMapGLLib.DrawingManager(map,opts) 实例化鼠标绘制工具 [[1]]
DrawingManager drawingManager.open() 开启绘制 [[2]]
DrawingManager drawingManager.close() 关闭绘制 [[3]]
核心代码
            var styleOptions = {
                strokeColor: '#5E87DB',   // 边线颜色
                fillColor: '#5E87DB',     // 填充颜色。当参数为空时，圆形没有填充颜色
                strokeWeight: 2,          // 边线宽度，以像素为单位
                strokeOpacity: 1,         // 边线透明度，取值范围0-1
                fillOpacity: 0.2          // 填充透明度，取值范围0-1
            };
            var labelOptions = {
                borderRadius: '2px',
                background: '#FFFBCC',
                border: '1px solid #E1E1E1',
                color: '#703A04',
                fontSize: '12px',
                letterSpacing: '0',
                padding: '5px'
            };
            // 实例化鼠标绘制工具
            var drawingManager = new BMapGLLib.DrawingManager(map, {
                // isOpen: true,        // 是否开启绘制模式
                enableCalculate: false, // 绘制是否进行测距测面
                enableSorption: true,   // 是否开启边界吸附功能
                sorptiondistance: 20,   // 边界吸附距离
                circleOptions: styleOptions,     // 圆的样式
                polylineOptions: styleOptions,   // 线的样式
                polygonOptions: styleOptions,    // 多边形的样式
                rectangleOptions: styleOptions,  // 矩形的样式
                labelOptions: labelOptions,      // label样式
            });  
            function draw(e) {
                var arr = document.getElementsByClassName('bmap-btn');
                for(var i = 0; i<arr.length; i++) {
                    arr[i].style.backgroundPositionY = '0';
                }
                e.style.backgroundPositionY = '-52px';
                switch(e.id) {
                    case 'marker': {
                        var drawingType = BMAP_DRAWING_MARKER;
                        break;
                    }
                    case 'polyline': {
                        var drawingType = BMAP_DRAWING_POLYLINE;
                        break;
                    }
                    case 'rectangle': {
                        var drawingType = BMAP_DRAWING_RECTANGLE;
                        break;
                    }
                    case 'polygon': {
                        var drawingType = BMAP_DRAWING_POLYGON;
                        break;
                    }
                    case 'circle': {
                        var drawingType = BMAP_DRAWING_CIRCLE;
                        break;
                    }
                }
                // 进行绘制
                if (drawingManager._isOpen && drawingManager.getDrawingMode() === drawingType) {
                    drawingManager.close();
                } else {
                    drawingManager.setDrawingMode(drawingType);
                    drawingManager.open();
                }
            };
复制
深色
复制成功
取自“http://lbsyun.baidu.com/index.php?title=覆盖物绘制&oldid=15705”

  • 文档根本没法用

  • 文档水平很差

  • 文档水平一般

  • 文档不错

  • 文档写的很好

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

提交反馈

拖动标注工具

添加矩形标注

添加箭头标注

完成

取消