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

鼠标绘制测面v2.0

929
0
2022-10-09
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修改

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

Message Board
回复
回复内容不允许为空
留言字数要大于2,小于200!
提交成功,5s后刷新页面!
编程导航

鼠标绘制测面v2.0

鼠标绘制与框选测面

鼠标绘制与框选点位

路况setTrafficOn的坑

Copyright © 2020 芋圆社区

Powered by 浙ICP备2020039309号-1

此页面不支持夜间模式!

已进入夜间模式!

已进入普通模式!

搜索框不允许为空

签到成功!经验+5!芋圆币+2!

签到失败!今日已签到!

需要登录社区账号才可以进入!

复制成功
寄,页面未加载完成或页面无锚点