百度地图绘制自定义区域
·
使用百度地图开发中碰到需要在地图上自定义选择某个区域，并且可以改变区域大小，然后进行某些操作。
这里用到了百度地图GL版的开源工具库BMapGLLib的自定义绘制功能，详情可查看https://github.com/huiyan-fe/BMapGLLib
code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script>
<link href="http://mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.css" rel="stylesheet">
<script type="text/javascript" src="http://mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.js"></script>
<title>鼠标绘制工具(GL)</title>
<style type="text/css">
body, html, #container {width: 100%; height: 100%; overflow: hidden; margin: 0; font-family: "微软雅黑";}
ul li {list-style: none;}
.info {
z-index: 999;
width: auto;
min-width: 22rem;
padding: .75rem 1.25rem;
margin-left: 1.25rem;
position: fixed;
top: 1rem;
background-color: #fff;
border-radius: .25rem;
font-size: 14px;
color: #666;
box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
}
.drawing-panel {
z-index: 999;
position: fixed;
bottom: 3.5rem;
margin-left: 2.5rem;
padding-left: 0;
border-radius: .25rem;
height: 47px;
box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
}
.bmap-btn {
border-right: 1px solid #d2d2d2;
float: left;
width: 64px;
height: 100%;
background-image: url(//api.map.baidu.com/library/DrawingManager/1.4/src/bg_drawing_tool.png);
cursor: pointer;
}
.drawing-panel .bmap-marker {
background-position: -65px 0;
}
.drawing-panel .bmap-polyline {
background-position: -195px 0;
}
.drawing-panel .bmap-rectangle {
background-position: -325px 0;
}
.drawing-panel .bmap-polygon {
background-position: -260px 0;
}
.drawing-panel .bmap-circle {
background-position: -130px 0;
}
</style>
</head>
<body>
<div class = "info">该示例实现基于JSAPI GL版的开源工具库，详情可查看https://github.com/huiyan-fe/BMapGLLib</div>
<ul class = "drawing-panel">
<li class="bmap-btn bmap-marker" id="marker" onclick="draw(this)"></li>
<li class="bmap-btn bmap-polyline" id="polyline" onclick="draw(this)"></li>
<li class="bmap-btn bmap-rectangle" id="rectangle" onclick="draw(this)"></li>
<li class="bmap-btn bmap-polygon" id="polygon" onclick="draw(this)"></li>
<li class="bmap-btn bmap-circle" id="circle" onclick="draw(this)"></li>
</ul>
<div id = "container"></div>
</body>
</html>
<script type="text/javascript">
var map = new BMapGL.Map("container", {enableMapClick:false}); // 创建Map实例,GL版命名空间为BMapGL(鼠标右键控制倾斜角度)
map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
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();
}
};
</script>
小伙伴如果有疑问可以第一时间评论或留言，看到后也会及时回复的，有帮助的麻烦动动手指点个赞哟
旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。
更多推荐
2
0- 0
已为社区贡献3条内容
所有评论(0)