高德地图-绘制路线

高德地图-绘制路线

效果如下图：

步骤一：使用高德地图 JS API 开发地图应用之前的一些准备工作

1.1. 在页面添加 JS API 的入口脚本标签，并将其中「您申请的key值」替换为您刚刚申请的 key；

HTML
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=您申请的key值"></script> 

1.2. 添加div标签作为地图容器，同时为该div指定id属性；

HTML
<div id="container"></div> 

1.3.为地图容器指定高度、宽度；

CSS
#container {width:300px; height: 180px; }  

1.4. 进行移动端开发时，请在head内添加viewport设置，以达到最佳的绘制性能；

HTML
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 

步骤二：创建地图及添加景点标记

2.1创建地图

JavaScript
var map = new AMap.Map('container',{
    zoom: 10,  //设置地图显示的缩放级别
    center: [116.397428, 39.90923],//设置地图中心点坐标
    layers: [new AMap.TileLayer.Satellite()],  //设置图层,可设置成包含一个或多个图层的数组
    mapStyle: 'amap://styles/whitesmoke',  //设置地图的显示样式
    viewMode: '2D',  //设置地图模式
    lang:'zh_cn',  //设置地图语言类型
});

构造函数	说明	是否插件
AMap.Map(container:String/HTMLDivElement, opts:MapOptions)	构造一个地图对象，参数container中传入地图容器DIV的ID值或者DIV对象，opts地图初始化参数对象	否

MapOptions	类型	说明
view	View2D	地图视口，用于控制影响地图静态显示的属性，如：地图中心点“center”推荐直接使用zoom、center属性为地图指定级别和中心点
layers	Array	地图图层数组，数组可以是图层 中的一个或多个，默认为普通二维地图。当叠加多个图层时，普通二维地图需通过实例化一个TileLayer类实现
zoom	Number	地图显示的缩放级别
center	LngLat	地图中心点坐标值
labelzIndex	Number	地图标注显示顺序，大于110即可将底图上的默认标注显示在覆盖物（圆、折线、面）之上。
zooms	Array	地图显示的缩放级别范围在PC上，默认为[3,18]，取值范围[3-18]；在移动设备上，默认为[3,19],取值范围[3-19]
lang	String	地图语言类型可选值：zh_cn：中文简体，en：英文，zh_en：中英文对照默认为: zh_cn：中文简体注：由于图面内容限制，中文、英文 、中英文地图POI可能存在不一致的情况

2.2.自定义景点标记

（链接参考：https://lbs.amap.com/api/javascript-api/example/marker/adaptive-show-multiple-markers）

JavaScript
 map.clearMap();  // 清除地图覆盖物
    //景点数据（后台数据）
    var markers = [{
        icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-1.png',
        position: [116.205467, 39.907761]
    }, {
        icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-2.png',
        position: [116.368904, 39.913423]
    }, {
        icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-3.png',
        position: [116.305467, 39.807761]
    }];

    // 添加一些分布不均的点到地图上,地图上添加三个点标记，作为参照
    markers.forEach(function(marker) {
        new AMap.Marker({
            map: map,
            icon: marker.icon,
            position: [marker.position[0], marker.position[1]],
            offset: new AMap.Pixel(-13, -30)
        });
    });

    var center = map.getCenter();

    var centerText = '当前中心点坐标：' + center.getLng() + ',' + center.getLat();
    document.getElementById('centerCoord').innerHTML = centerText;
    document.getElementById('tips').innerHTML = '成功添加三个点标记，其中有两个在当前地图视野外！';

步骤三：用矢量图绘制路线

（链接参考：https://lbs.amap.com/api/javascript-api/example/overlayers/polyline-draw-and-edit）

3.1.绘制开始及结束

HTML
   <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
   <script src="https://webapi.amap.com/maps?v=1.4.14&key=您申请的key值&plugin=AMap.PolyEditor"></script>
   <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
});

HTML
   <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
   <script src="https://webapi.amap.com/maps?v=1.4.14&key=您申请的key值&plugin=AMap.MouseTool"></script>
   <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
});

//开始绘制路线
var path = [
      [116.362209, 39.887487],
      [116.422897, 39.878002],
      [116.372105, 39.90651],
      [116.428945, 39.89663]
  ];
var mouseTool = new AMap.MouseTool(map)
//定义线的风格
function drawPolyline () {
   mouseTool.polyline({
       path: path,
       isOutline: true,
       outlineColor: '#ffeeff',
       borderWeight: 3,
       strokeColor: "#3366FF", 
       strokeOpacity: 1,
       strokeWeight: 6,
       // 折线样式还支持 'dashed'
       strokeStyle: "solid",
       // strokeStyle是dashed时有效
       strokeDasharray: [10, 5],
       lineJoin: 'round',
       lineCap: 'round',
       zIndex: 50,
   });
}
//结束绘制路线
function closedrawPolyline () {
   mouseTool.close();
}
AMap.event.addListener(mouseTool,'draw',function(e){

   getPath_array = e.obj.getPath();
   map.clearInfoWindow(); //清除地图上的信息窗体。
});

构造函数	说明
MouseTool(Map)	MouseTool的构造函数，目前仅支持桌面浏览器

方法	返回值	说明
open()		打开编辑功能。功能开启后，通过编辑点可调整矩形的形状
close()		关闭编辑功能

事件	参数	说明
draw	{type,obj}	鼠标工具绘制覆盖物结束时触发此事件，obj对象为绘制出来的覆盖物对象。

步骤四：编辑路线（）新增或者删除

（链接参考：https://lbs.amap.com/api/javascript-api/example/overlayers/polyline-draw-and-edit）

效果如下图：

实现如下：

HTML
<script src="https://webapi.amap.com/maps?v=1.4.13&key=您申请的key值&plugin=AMap.PolyEditor"></script>
<script src="${ctxPath}/static/backend/lib/amap/amap-ui-main.js"></script>
});

 var path = [
      [116.362209, 39.887487],
      [116.422897, 39.878002],
      [116.372105, 39.90651],
      [116.428945, 39.89663]
  ];
   var polyline = new AMap.Polyline({
       path: path,
       outlineColor: '#ffeeff',
       strokeColor: "#0071FF",
       strokeOpacity: 1,
       strokeWeight: 6,
       strokeStyle: "dashed",
       strokeDasharray: [10, 20],
       lineJoin: 'round',
       lineCap: 'round',
       zIndex: 50,
   })

   polyline.setMap(map)
   // 缩放地图到合适的视野级别
   map.setFitView([ polyline ])

   var polyEditor = new AMap.PolyEditor(map, polyline)
});

完整路线的的展示方法

效果如下图：

实现如下：

HTML
<script src="https://webapi.amap.com/maps?v=1.4.13&key=您申请的key值&plugin=AMap.BezierCurveEditor"></script>
});

  var path = [
      [116.362209, 39.887487],
      [116.422897, 39.878002],
      [116.372105, 39.90651],
      [116.428945, 39.89663]
  ];
var bezierCurve = new AMap.BezierCurve({
       path: path,
       outlineColor: '#ffeeff',
       strokeColor: "#0071FF",
       strokeOpacity: 1,
       strokeWeight: 6,
       strokeStyle: "dashed",
       strokeDasharray: [10, 20],
       lineJoin: 'round',
       lineCap: 'round',
       zIndex: 50,
   })

   bezierCurve.setMap(map);
   //  // 缩放地图到合适的视野级别
   map.setFitView([ bezierCurve ])
});

步骤五：根据绘制路线飞行

（链接参考：https://lbs.amap.com/api/amap-ui/demos/amap-ui-pathsimplifier/index）
效果如下图：

实现如下：

function lookAMapUI(path,MARK_TYPE,Spots_arr){
   AMapUI.loadUI(['overlay/SimpleInfoWindow','misc/PathSimplifier'], function(SimpleInfoWindow,PathSimplifier) {
       // 展示路线
       if (!PathSimplifier.supportCanvas) {
           alert('当前环境不支持 Canvas！');
           return;
       }

       var emptyLineStyle = {
           lineWidth: 0,
           fillStyle: null,
           strokeStyle: null,
           borderStyle: null
       };

       var pathSimplifierIns = new PathSimplifier({
           zIndex: 110,
           //autoSetFitView:false,
           map: map, //所属的地图实例

           getPath: function(pathData, pathIndex) {

               return pathData.path;
           },
           getHoverTitle: function(pathData, pathIndex, pointIndex) {

               return null;
           },
           renderOptions: {
               //将点、线相关的style全部置emptyLineStyle
               pathLineStyle: emptyLineStyle,
               pathLineSelectedStyle: emptyLineStyle,
               pathLineHoverStyle: emptyLineStyle,
               keyPointStyle: emptyLineStyle,
               startPointStyle: emptyLineStyle,
               endPointStyle: emptyLineStyle,
               keyPointHoverStyle: emptyLineStyle,
               keyPointOnSelectedPathLineStyle: emptyLineStyle
           }
       });

       window.pathSimplifierIns = pathSimplifierIns;

       pathSimplifierIns.setData([{
           name: '路線',
           //景点经纬度
           path: [
   			       [116.362209, 39.887487],
   			       [116.422897, 39.878002],
   			       [116.372105, 39.90651],
   			       [116.428945, 39.89663]
   			   ]
       }]);
       //initRoutesContainer(d);

       function onload() {
           pathSimplifierIns.renderLater();
       }

       function onerror(e) {
           alert('图片加载失败！');
       }

       navg1 = pathSimplifierIns.createPathNavigator(0, {
           speed: 3000 ,
           pathNavigatorStyle: {
               // autoRotate: false, //禁止调整方向
               width: 56,
               height: 89 ,
               initRotateDegree: 270 ,
               content: PathSimplifier.Render.Canvas.getImageContent("../static/img/eagle.png", onload, onerror),
               strokeStyle: null ,
               fillStyle: null ,
               pathLinePassedStyle: {
                   lineWidth: 6,
                   strokeStyle: '#0071FF',
                   dirArrowStyle: {
                       stepSpace: 50,
                       strokeStyle: '#fff'
                   }
               },
           }

       });
       //开始飞行
       navg1.start();
       //展示飞行过程中需要操作的方法
       navg1.on('move', function(type) {
          //停止飞行
          navg1.pause();
       });

   });
//    展示路线结束
}

方法

方法名称	返回值	说明
getZIndexOfPath(pathIndex:number)	number	返回pathIndex对应的轨迹数据项的zIndex值
setZIndexOfPath(pathIndex:number, zIndex:number)		设置pathIndex对应的轨迹数据项的zIndex值
getPathData(pathIndex:number)	{*}	返回pathIndex对应的轨迹数据项
createPathNavigator(pathIndex:number, options:Object)	PathNavigator	创建一个轨迹巡航器。pathIndex：关联的轨迹索引 ，options：巡航器的配置选项，详见下方轨迹巡航器部分。
clearPathNavigators()		销毁现存的所有轨迹巡航器

事件

事件名称	参数	说明
start	event:{type:String} 事件	调用start时触发
pause	event:{type:String} 事件	调用pause时触发
move	event:{type:String} 事件	调用moveByDistance（动画过程会调用该方法）， moveToPoint 时触发
stop	event:{type:String} 事件	调用stop时触发