没有match的答案？试试对话大模型
| 第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 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">该示例应用到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://bj.bcebos.com/v1/mapopen/api-demos/video/覆盖物绘制.mp4</pre> |
| − | <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:// | + | |
</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> | </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" | ||
| 第24行： | 第23行： | ||
| [[github.com/huiyan-fe/BMapGLLib|BMapGLLib文档]] | | [[github.com/huiyan-fe/BMapGLLib|BMapGLLib文档]] | ||
|} | |} | ||
| − | </div></div><div class="header"><div class="active">核心代码</div></div><div class="pre-wrap"> | + | </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 styleOptions = { |
| − | + | ||
| − | + | ||
| − | + | ||
strokeColor: '#5E87DB', // 边线颜色 | strokeColor: '#5E87DB', // 边线颜色 | ||
fillColor: '#5E87DB', // 填充颜色。当参数为空时，圆形没有填充颜色 | fillColor: '#5E87DB', // 填充颜色。当参数为空时，圆形没有填充颜色 | ||
2020年10月9日 (五) 16:16的版本
覆盖物绘制
功能场景
该示例应用到BMapGL的开源工具库BMapGLLib的绘制类DrawingManager进行基础图形的绘制。
DEMO
https://bj.bcebos.com/v1/mapopen/api-demos/video/覆盖物绘制.mp4
覆盖物绘制示例demo
核心接口
| 类 | 接口 | 描述 | 参考文档 |
| DrawingManager | new BMapGLLib.DrawingManager(map,opts) | 实例化鼠标绘制工具 | BMapGLLib文档 |
| DrawingManager | drawingManager.open() | 开启绘制 | BMapGLLib文档 |
| DrawingManager | drawingManager.close() | 关闭绘制 | BMapGLLib文档 |
核心代码
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();
}
};
复制
深色
复制成功