huiyan-fe / bmapgllib Goto Github PK

View Code? Open in Web Editor NEW

325.0 9.0 123.0 1.47 MB

百度地图JSAPI GL版JavaScript开源工具库

License: MIT License

HTML 9.33% JavaScript 87.42% CSS 3.25%

bmapgllib's Introduction

BMapGLLib

本代码库是基于百度地图JSAPI GL版的JavaScript开源工具库，如果使用的是2D地图的话，参考旧的2D开源库。

此外！！！对于JSAPI GL版本鼠标绘制能力，我们推出了一个更加方便易用的新库bmap-draw。

如何使用

我们在将GL版的开源工具库放到了百度云的BOS存储上，根据github文件目录可以推理出BOS的路径，比如：

<link href="//mapopen.bj.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.css" rel="stylesheet">

<script src="//mapopen.bj.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.js"></script>

功能示例

鼠标绘制工具条库

提供鼠标绘制点、线、面、多边形（矩形、圆）的编辑工具条的开源代码库。且用户可使用JavaScript API对应覆盖物（点、线、面等）类接口对其进行属性（如颜色、线宽等）设置、编辑（如开启线顶点编辑等）等功能。

示例　　源码　　压缩源码

测距工具

百度地图的测距工具类，对外开放。允许用户在地图上点击完成距离的测量。使用者可以自定义测距线段的相关样式，例如线宽、颜色、测距结果所用的单位制等等。

示例　　源码　　压缩源码

几何运算

GeoUtils类提供若干几何算法，用来帮助用户判断点与矩形、圆形、多边形线、多边形面的关系,并提供计算折线长度和多边形的面积的公式。

示例　　源码　　压缩源码

视角轨迹动画

TrackAnimation类提供视角轨迹动画展示效果。

示例　　源码　　压缩源码

区域限制

百度地图浏览区域限制类，对外开放。允许开发者输入限定浏览的地图区域的Bounds值，则地图浏览者只能在限定区域内浏览地图。

示例　　源码　　压缩源码

自定义信息窗口

百度地图的infoBox。类似于infoWindow，比infoWindow更有灵活性，比如可以定制border，关闭按钮样式等。

示例1(顶部展示)　　示例2(底部展示)　　源码　　压缩源码

富标注

百度地图的富Marker类，对外开放。允许用户在自定义丰富的Marker展现样式，并添加点击、双击、拖拽等事件。

示例1　　示例2　　源码　　压缩源码

路书

百度地图路书类，实现Marker沿路线运动，对外开放。用户可以在地图上自定义轨迹运动，支持暂停/停止功能，并可以自定义路过某个点的图片，文字介绍等。

示例　　源码　　压缩源码

时间轴

文档

如何开发贡献代码

clone本代码库
修改src目录下源文件
压缩生成.min文件
上传代码，告知维护同学codereview

bmapgllib's People

Contributors

Stargazers

Watchers

Forkers

so-hard wongxong jiayangwaw ye0508 809507331 laulunsi eastsong yurongbj zhouyashu279 royskywalker jiamengzhang cloudsnet ufofacker reinhardchen93 alonelucky weianzi anxinpid zzzzly959 uzhan hejunjiegithub giser-ym herb734044860 ml-githup crtrt zhaosg stantoxt hellokatewj codedome luyufanzhi sfy04 k-kuan 027kaka hippo2cat fanyu1994 evaking dongshuai777 lizhenhao107 myhot221 lanjiannull guowenqiangde seamless2014 yangyanggu kenees zjpzjp panboren wangcuicuicui wuyinxing lesonwu ansonznl huangzhengyon dada-hao gansx mo-github gilnatab cool-delete victor-liu-c waaawa hkliang sylarcui ronaldowang yoogar-go come858 itfriday heshawn zhm-f9203 adelamyx extreme9527 zhangppbb ajunlonglive aluckyqingchun1 juzhao1 lx2328 xiaofei159 wxjdlm wxw595823129 echobom freeeeeedom leonadia gutrigger tangzhichao yeastone putuo3 zhnbo angel-hw zhaoxiaogang wwwk chaiman2601 simonlingyun 7niao lelov xufeng888 wangqf quuyoo xueshaoyu zhonghongli sssword sdtm1016 dengg88 myjustify llbuffoon

bmapgllib's Issues

在已有的图层上怎么实现边界吸附？

我在页面上已经绘制了几个多边形图层，然后画图工具 enableSorption: true也是设置为true了的，怎么在画图的时候也有边界吸附？

绘制多边形过程中鼠标直接拉到绘制工具栏的圆形上并点击圆形后，地图直接显示了刚才绘制的多边形，但没触发overlaycomplete事件

绘制多边形过程中鼠标直接拉到绘制工具栏的圆形上点击圆形后，地图直接显示了刚才绘制的多边形，但这个多边形因为不是通过双击鼠标完成绘制所以无法进入overlaycomplete的回调函数

例子：https://codepen.io/wuhuama/pen/WNdzZZR

历史轨迹多次使用，动画会出现一次比一次快的情况，视角跟随也出现问题

BMap Draw 如何获取绘制的圆形和矩形的中心点？如何在绘制完成后的区域内进行打点？

DrawingManager.js skipEditing参数不生效，在操作完绘画以后不触发overlaycomplete事件

  drawingManager = new (window as any).BMapGLLib.DrawingManager(mapInstance, {
    // isOpen: true,        // 是否开启绘制模式
    enableCalculate: false, // 绘制是否进行测距测面
    enableSorption: true,
    sorptiondistance: 20,
    circleOptions: notExistOverlayStyle, // 圆的样式
    polylineOptions: notExistOverlayStyle, // 线的样式
    polygonOptions: notExistOverlayStyle, // 多边形的样式
    rectangleOptions: notExistOverlayStyle, // 矩形的样式
    skipEditing: true,
  });
  // 操作完成事件
  drawingManager.addEventListener('overlaycomplete', function(e) {
      // 此处执行
  });

IOS15版本的手机使用JS API 不能通知获取用户定位弹窗

创建轨迹动画的时候会报TypeError: this._map.getMaxZoom is not a function的错误。

map.clearOverlays() 无法清理多个RichMarker

var map = new BMapGL.Map("container");
map.centerAndZoom(new BMapGL.Point(116.401952, 40.032704), 12);
map.enableScrollWheelZoom();

var htm1 =
    "<div id='overLay' style='width:93px;height:116px; background:url(//bj.bcebos.com/v1/mapopen/github/BMapGLLib/RichMarker/examples/images/back.png) left top no-repeat;position: absolute;'>" +
    "<img style='margin-left:9px;margin-top: 8px;' src='//bj.bcebos.com/v1/mapopen/github/BMapGLLib/RichMarker/examples/images/small.jpg' />" +
    "</div>",
    myRichMarker1 = new BMapGLLib.RichMarker(htm1, new BMapGL.Point(116.30816, 40.056863), {
        "anchor": new BMapGL.Size(-47, -116),
        "enableDragging": true
    });
map.addOverlay(myRichMarker1);


var html2 =
    '<div style="position: absolute; margin: 0pt; padding: 0pt; width: 80px; height: 26px; left: -10px; top: -35px; overflow: hidden;">' +
    '<img id="rm3_image" style="border:none;left:0px; top:0px; position:absolute;" src="http://bj.bcebos.com/v1/mapopen/github/BMapGLLib/RichMarker/examples/images/back1.png">' +
    '</div>' +
    '<label class=" BMapLabel" unselectable="on" style="position: absolute; -moz-user-select: none; display: inline; cursor: inherit; border: 0px none; padding: 2px 1px 1px; white-space: nowrap; font: 12px arial,simsun; z-index: 80; color: rgb(255, 102, 0); left: 15px; top: -35px;">$ 20 B</label>',
    myRichMarker2 = new BMapGLLib.RichMarker(html2, new BMapGL.Point(116.402922, 39.99908), {
        "anchor": new BMapGL.Size(-18, -27),
        "enableDragging": true 
    });
map.addOverlay(myRichMarker2);

myRichMarker2.addEventListener("onmouseover", function (e) {
    document.getElementById("rm3_image").src = "//bj.bcebos.com/v1/mapopen/github/BMapGLLib/RichMarker/examples/images/back2.png";
});
myRichMarker2.addEventListener("onmouseout", function (e) {
    document.getElementById("rm3_image").src = "//bj.bcebos.com/v1/mapopen/github/BMapGLLib/RichMarker/examples/images/back1.png";
});

// 测试代码
map.addEventListener('click',(e)=>{
// map.clearOverlays() 该清理方法只能清理一个marker ,原因不明

// 清除多个只能手动一个一个清理
const overlays=map.getOverlays()
console.log(overlays)
overlays.forEach(overlay=>{
map.removeOverlay(overlay)
})

})

创建DrawingManager时设置drawingToolOptions的anchor和offset属性无效

在多边形绘制状态下，双击地图会报错，导致绘制功能异常！还有getPath()方法获取的点位有偏差

infobox.min.js使用报错

我引入了infobox.min.js,但是还是报bmaplib.infoboxis not defined
地图使用的版本:webgl1.0

DrawingManager overlaycancel事件回调没有触发

this.drawingManager.addEventListener('overlaycancel', this.overlaycancel);
this.drawingManager.addEventListener('overlaycomplete', this.overlaycomplete);

成功的回调正常，失败的没有触发

鼠标绘制的编辑模式

使用·鼠标绘制·模块时，如果在绘制完成确认后，如何进编辑模式呢？

当前可以在绘制完成的事件中获取绘制图形，然后调 overlay 的 enableEditing() 方法实现功能，但是如果想使用 DrawingManager 的编辑状态（在绘制过程中，确认完成之前的状态），如何实现？

BMapGLLib.TrackAnimation 绘制地图轨迹的时候，如果有靠近的点和比较远的点，靠近的点的线会偏移到海外去

问题

BMapGLLib.TrackAnimation 绘制地图轨迹的时候，如果有靠近的点和比较远的点，靠近的点的线会偏移到海外去

直接上demo代码（接入api的链接需要自行加入key）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--  下面link需要加上自己的key  -->
    <script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0"></script>
    <script type="text/javascript" src="https://api.map.baidu.com/library/TrackAnimation/src/TrackAnimation_min.js"></script>
</head>

<body>
    <div style="width: 800px; height: 800px;" id="container"></div>

    <script>
        var map = new BMapGL.Map("container");
        // 创建地图实例 

       // 第二个和第三个点很接近
        const p = [{
            lat: 40.87629,
            lng: 116.43897
        }, {
            lat: 39.87621,
            lng: 116.43887
        }, {
            lat: 39.87619,
            lng: 116.43913
        }]

        var point = new BMapGL.Point(116.404, 39.915);
        // 创建点坐标 
        map.centerAndZoom(point, 15);

        const listP = []

        p.forEach((item) => {
            listP.push(new BMapGL.Point(item.lng, item.lat))
        })

        const pl = new BMapGL.Polyline(listP, {
            strokeColor: '#1890ff',
            enableClicking: true,
        })
        const trackAni = new BMapGLLib.TrackAnimation(map, pl, {
            overallView: true, // 动画完成后自动调整视野到总览
            tilt: 30, // 轨迹播放的角度，默认为55
            duration: 400, // 动画持续时长，默认为10000，单位ms
            delay: 300, // 动画开始的延迟，默认0，单位ms
        })
        setTimeout(() => {
            trackAni.start()
        }, 3000)
    </script>
</body>

</html>

卫星模式下，DrawingManager双击绘制完成后，成功、失败按钮丢失

vue临时处理
cancelOperate：取消按钮的id，只有拿到取消按钮才代表绘制完成

watch: { 'drawingManager._isOpen': { handler(val) { if(!val && document.getElementById('cancelOperate')) { document.getElementsByClassName('operateWindow')[0].parentElement.style.display = 'block' } } } }

DistanceTool 接口文档不全

DistanceTool 接口文档不全，通过挖源代码，发现还有secIcon， closeIcon 这两个接口，分别代表测距中节点的图标以及测距完成后删除测距线条的图标

**国界的界线颜色是否可以配置

绘制多条可编辑折线，出现多个确认关闭，只有第一个起作用。

点击绘制可编辑的折线
绘制折线，双击完成绘制，出现√号和×号，都不点击
再点击绘制可编辑折线按钮，绘制折线
双击，第二条折线绘制完成，又出现√号和×号，点击第二条的√号和×号，没有反应
点击第一条折线的√号和×号，两条折线可编辑状态都关闭。

建议：参考高德和leaflet地图

有MarkerCluster的webgl版本吗

如题

绘制矩形，鼠标在地图外失焦后，未执行mouseup事件，第二次绘制矩形时，第一次未绘制完成的矩形会残留，造成第二次绘制有问题

路书在速度很快的时候会出现动画走不到终点的问题。

测试点位如下：
new BMapGL.Point(130.458099, 33.971874),
new BMapGL.Point(130.54406, 33.993706),
new BMapGL.Point(130.546106, 33.993706),
new BMapGL.Point(130.545106, 33.993706),
new BMapGL.Point(130.553106, 33.993706),
new BMapGL.Point(130.719402, 34.124882),
new BMapGL.Point(130.712402, 34.124882),
new BMapGL.Point(130.758286, 33.94067),
new BMapGL.Point(130.766510, 33.933945),
new BMapGL.Point(130.764435, 33.938244),
new BMapGL.Point(130.762680, 33.93261)

速度为1000000
在示例中心测试的时候就无法走到终点http://lbsyun.baidu.com/jsdemo.htm#webgl1_7

对其他点位大部分情况也会走不到终点。不知道为什么？

使用GeoUtils.getPolygonArea方法计算面积时会报错

问题描述：

使用DrawingManager画多边形的时候，如果一直在一个地方点击鼠标，最后得到覆盖物的坐标数组会有很多个连续相同的坐标。然后使用GeoUtils.getPolygonArea方法计算面积得到的结果是NaN

坐标示例：

[{"lng":116.05931967048495,"lat":39.94503428079636}, {"lng":116.10761257470138,"lat":39.94149394355425}, {"lng":116.10761257470138,"lat":39.94149394355425}, {"lng":116.1064627436486,"lat":39.92688810062903}, {"lng":116.08749053127787,"lat":39.91050811648429}, {"lng":116.08749053127787,"lat":39.91050811648429}, {"lng":116.06851831890714,"lat":39.9144928004373}, {"lng":116.06851831890714,"lat":39.9144928004373}, {"lng":116.05931967048495,"lat":39.94503428079636}]