美文网首页
webgis前端地图功能展示

webgis前端地图功能展示

作者: 一株枸杞 | 来源:发表于2018-06-14 11:33 被阅读0次

技术亮点

  • 使用百度api实现了主要的地图功能
  • 将地图DIV与游记功能结合
  • 在API 尚不支持多个目的地的驾车导航的情况下自定义多个途经点的导航。

开发框架

Bootstrap词条

直接使用VScode中Bootstrap的扩展


实现功能

  • 地图显示
    在百度api中地图显示只需引入api后,创建地图容器和实例
var map = new BMap.Map("container");
  //设置默认城市
  map.setCurrentCity("广州");
  //设置默认点坐标(小蛮腰),初始级别为15
 var point = new BMap.Point(113.331084,23.112223);
 map.centerAndZoom(point, 15);
 //插入地图控件:缩放、比例尺、地图类型、缩略图
map.addControl(new BMap.NavigationControl()); //平移缩放
map.addControl(new BMap.ScaleControl());   //比例尺
map.addControl(new BMap.OverviewMapControl());   //缩略图
map.enableScrollWheelZoom(true);//开启滚轮。
  • 本地搜索
    BMap.LocalSearch 提供本地搜索服务,在使用本地搜索时需要为其设置一个检索区域,检索区域可以是BMap.Map 对象、BMap.Point 对象或者是省市名称(比如:"广州市")的字符串。BMap.LocalSearch 构造函数的第二个参数是可选的,您可以在其中指定结果的呈现。BMap.RenderOptions 类提供了若干控制呈现的属性,其中 map 指定了结果所展现的地图实例,panel 指定了结果列表的容器元素。
    同时,BMap.LocalSearch也提供了若干配置方法,通过它们可以自定义搜索服务的行为以满足您的需求。
    除了搜索结果会自动添加到地图和列表外,我们还可以通过数据接口获得详细的数据信息,结合地图api可以自行向地图添加标注和信息窗口。BMap.LocalSearch 和 BMap.LocalSearchOptions 类提供了若干设置回调函数的接口,通过它们可得到搜索结果的数据信息。
    我们基于本地搜索功能,实现了锁定地物、标记地物、地物信息显示、设置地物为始发点,同时在进行测试之后我们加入了alert功能,优化用户体验。
    部分代码块如下
//创建搜索实例,包括起点搜索和终点搜索,参考百度开发手册本地搜索修改
var startSearch =new BMap.LocalSearch(map,startOption);
var endSearch =new BMap.LocalSearch(map,endOption);

function mDriving(){
    var startPlace = document.getElementById("startInput").value;
    var endPlace = document.getElementById("endInput").value;
    startSearch.search(startPlace);
    endSearch.search(endPlace);
    document.getElementById("box").style.display="block";
}
  • 骑行路线(这里使用api中驾车导航)
    BMap.DrivingRoute 提供驾车导航服务。其搜索范围可以设置为省。同时百度api提供了结果面板参数,方案描述可以展示到页面上。而且驾 车 导 航 服 务 也 提 供 了 丰 富 的 数 据 接 口 , 通 过 onSearchComplete 回 调 函 数 可 以 得 到BMap.DrivingRouteResult 对象,它包含了驾车导航结果数据信息。
    遗憾的是导航方案只包含一个目的地,那么驾车线路的个数就为1,如果方案包含若干个目的地,则驾车线路的个数会大于1。目前 API 尚不支持多个目的地的驾车导航。但通过点对象数组和创建折线,可以表面上生成多个目的地路线
for(c=0;c<pointList.length;c++){
        var marker = new BMap.Marker(pointList[c]);
        map.addOverlay(marker);
        //将途经点添加到地图上
        var label = new BMap.Label(c+1,{offset:new BMap.Size(20,-10)});
        marker.setLabel(label);
        }

       var  group = Math.floor( pointList.length /11 ) ;
       var mode = pointList.length %11 ;

       var driving = new BMap.DrivingRoute( map, {onSearchComplete: function(results){
              if (driving.getStatus() == BMAP_STATUS_SUCCESS){
                     var plan = driving.getResults().getPlan(0);
                     var  num = plan.getNumRoutes();
                     alert("plan.num :"+num);
                     for(var j =0;j<num ;j++){
                      var pts= plan.getRoute(j).getPath();    //点数组
                      var polyline = new BMap.Polyline(pts);    
                      map.addOverlay(polyline); 
                     }
              }
        }});
        for(var i =0;i<group;i++){
           var waypoints = pointList.slice(i*11+1,(i+1)*11);
           driving.search(pointList[i*11], pointList[(i+1)*11-1],{waypoints:waypoints});//waypoints表示途经点
        }   
        if( mode != 0){
         var waypoints = pointList.slice(group*11,pointList.length-1);//段数应该-1
         driving.search(pointList[group*11],pointList[pointList.length-1],{waypoints:waypoints});
        }
)
//不确认目的地数目需要根据用户输入计算点数组个数,然而这样会出现多路线生成的情况,我们暂时未能提出解决方案。

鉴于我们的系统功能,我们只需生成一条路线即可

  • 生成游记标题
    使用document.execCommand("Copy")命令,将两个输入框的值赋予一个隐藏框即可实现
document.getElementById("temporary").value="##**"+document.getElementById("startInput").value+"**----**"+document.getElementById("endInput").value+"**";

相关文章

  • webgis前端地图功能展示

    技术亮点 使用百度api实现了主要的地图功能 将地图DIV与游记功能结合 在API 尚不支持多个目的地的驾车导航的...

  • webgis开发技能图谱

    webgis开发需要掌握web前端之外的很多技能,需要对GIS从数据获取到前端展示的整个流程都能融汇贯通,而不是仅...

  • 地图| 高德地图源码级使用大全

    前言 高德地图提供包括:web前端、Android、iOS、服务器、小程序等平台的地图服务, 地图功能众多,本文...

  • 唐宋文学诗人分布展示

    概述: 本文实现唐宋诗人分布数据的获取与webgis的展示。 效果: 获取的数据 概览 放大后 详细信息 实现: ...

  • WebGIS交流群

    QQ群号:209155906 WebGIS交流群: WebGIS、JavaScript、dojo、Python 1...

  • 前后端分离_分页

    在分页类编写数据,展示前端实现跳转 你的数据样式 前端接收数据,展示

  • WebGIS 前言

    5 月底开始断断续续自学前端和Android,到暑假正好学校组织培训WebGIS,让我进步很大,所以整理笔记到这里...

  • Make sense(6) webGIS所面临潜在非技术困境的思

    在本文中,WebGIS仅指前端Web地图 技术人员总是乐观的,因为技术往往有迹可循,未来是可预期的。但未来是由无数...

  • 学废了系列 - WebGIS vs WebGL图形编程

    前工作中有不少涉及到地图的项目,我参加了几次技术评审,前端伙伴们在 WebGIS 方面的知识储备稍有不足,这次分享...

  • 通过拼接实现高清地图的下载-高德-java实现

    背景 地图功能是每个系统必备的功能之一,通常可以使用百度地图和高德地图来实现在线地图展示。但是将展示的地图下载到本...

网友评论

      本文标题:webgis前端地图功能展示

      本文链接:https://www.haomeiwen.com/subject/sbweeftx.html