鼠标绘制测面v2.0

芋圆社区 > 编程 > 百度地图 > 鼠标绘制测面v2.0

682

2022-10-09

Hey、小怪兽

• 之前写了一个百度地图鼠标绘制与测面：
• 总感觉这样太丑了，在百度地图JS API示例看到了另外一个例子，绘制的时候有个黄色小标签显示尺寸：多少米 x 多少米
• 松开后就这样的，还有两个按钮，四周还是可以拖拽的
• 要切换到这样的测面是有问题的：看到这是BMapGLLib（GL版），百度秘钥是v1.0,（我是v3.0），版本太低了
• 如果要用v3.0的秘钥替换这个示例的话，就会报错，因为v3.0不再是BMapGL这样写了

// v1.0写法
var map = new BMapGL.Map("container", {enableMapClick:false});

// 后面的写法
var map = new BMap.Map("container", {enableMapClick:false});

• 这里将所有的BMapGL替换成BMap也没用，DrawingManager.min.js这里面是BMapGL版本的，还是会报错，所以需要寻找别的出路
• 看到这个示例上有这样一行话：该示例实现基于JSAPI GL版的开源工具库，详情可查看https://github.com/huiyan-fe/BMapGLLib
• 发现这是百度地图数据智能前端（huiyan-fe）的Github仓库：
• 既然有GL版的，那应该也有适用v3.0秘钥版本的，果然在它的仓库找到了：
• 下载下来，在它的demo里面修改：
• 先把压缩的js改成没压缩过的：

<script type="text/javascript" src="../../src/DrawingManager/DrawingManager.min.js"></script>
// 改为
<script type="text/javascript" src="../../src/DrawingManager/DrawingManager.js"></script>

• 再替换自己的秘钥：

// 百度地图申请的秘钥
<script src="//api.map.baidu.com/api?type=webgl&v=3.0&ak=密钥"></script>

• 用VScode插件Live Server，将这个HTML Open with live server，随便框选一下，发现我们并没有确认和取消图标；
• 原因是这个路径没有这两张图片，再去刚才那个v1.0的例子里搞到这两个图片，放进images里：
• 改一下CSS里的路径

// 修改后
url("../../images/confirm2.png")
url("../../images/cancel2.png")

• 这样就完成了：
• 其他配置项相比于我之前的那个测面多了很多：比如吸附，gpc啥的
• 这里有一点和之前的不大一样，如果enableCalculate这个选择了true并不会出现标签
• 可以看到代码里将这行注释掉了：
• 就算注释回来也无法显示，原因是它往_calculate方法传的是overlay.getPath()
• 当测面为多边形或者矩形的时候，它传的是overlay.getPath()，圆形是this.point，所以圆形可以显示标签，打印一下就知道了，只有传坐标对象才可以，不能传数组
• 一定要标签可以改为overlay.getPath().pop()或者随便选个数组内的点
• 不过这样计算又会出问题，在这个测面版本里，enableCalculate这个配置只是用来获取面积数据的

//实例化鼠标绘制工具
var drawingManager = new BMapLib.DrawingManager(map, {
	isOpen: false,
    // true和false影响是否获取面积值
	enableCalculate: true,
	drawingToolOptions: {
		anchor: BMAP_ANCHOR_TOP_RIGHT,
		offset: new BMap.Size(5, 5),
	},
	circleOptions: styleOptions,      //圆的样式
	polylineOptions: styleOptions,    //线的样式
	polygonOptions: styleOptions,     //多边形的样式
	rectangleOptions: styleOptions    //矩形的样式
});
	//添加鼠标绘制工具监听事件，用于获取绘制结果
	var overlaycomplete = function(e){
	console.log(e);
	overlays.push(e.overlay);
};
drawingManager.addEventListener('overlaycomplete', overlaycomplete);

• 完整代码建议去Github下载，在demo修改

下一篇：鼠标绘制与框选测面

鼠标绘制测面v2.0

回复