OpenLayer4结合高德API实现地图选点路径规划

前言:路径规划也是WebGIS一个特点,我们在做某些应用的时候可能会用到路径规划的功能,该功能我们也可以自己实现,利用数据等,但是OpenLayer一大特色就是加载在线地图,向高德,百度等,这些地图都提供一些api接口供大家调用获取数据,在做路径规划的时候,刚开始用的百度提供的api,发现这个路径规划的真烂你都不好意去吐槽,最后换成高德api总体效果还算满意。废话不多说进入正文。

先来张图:

一、高德地图加载

        var projection = ol.proj.get("EPSG:4326");
        function getNavmapLayer() {
            return new ol.layer.Tile({
                source: new ol.source.XYZ({
                    url: 'http://webrd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8'//7,8
                }),
                projection: projection
            });
        }
        var navlayer = getNavmapLayer();

二、矢量图层的样式设置

        //矢量图层数据源
        sourceVector = new ol.source.Vector();
        //矢量图层
        var vector = new ol.layer.Vector({
            source: sourceVector,
            style: function (feature) {
                var status = feature.get("status");
                
                
                var _color = "#8f8f8f";
                if (status === "拥堵") _color = "#e20000";
                else if (status === "缓行") _color = "#ff7324";
                else if (status === "畅通") _color = "#00b514";

                return new ol.style.Style({
                    stroke: new ol.style.Stroke({
                        color: _color,
                        width: 5,
                        lineDash:[10, 8]
                    }),
                })
            }
        });

只是简单地线行的渲染。

三、地图点击事件

        //地图点击事件
        map.on("click", function (evt) {
            //获取坐标
            var coordate = evt.coordinate;
            console.log(evt.coordinate);
            console.log(coordate);
            //如果result为0,返回不做任何操作
            if (result == 0) {
                return;
            }
            else {
                if (result == 1) {
                    //起点
                    //构造提交api起点坐标
                    start = GetCoordate(coordate);
                    console.log("起点" + start);
                    name = "起点";
                    //矢量元素
                        var featureStart = new ol.Feature({
                            geometry: new ol.geom.Point(coordate),
                            name: '起点',//自定义属性

                        });
                        featureStart.setStyle(createFeatureStyle(featureStart,name));
                    sourceVector.addFeature(featureStart);
                }
                else {
                    //终点
                    //构造提交api终点坐标
                    name = "终点";
                    end = GetCoordate(coordate);
                    console.log("终点" + end);
                    //矢量元素
                    var featureEnd = new ol.Feature({
                        geometry: new ol.geom.Point(coordate),
                        name: '终点',//自定义属性

                    });
                    featureEnd.setStyle(createFeatureStyle(featureEnd,name));
                    sourceVector.addFeature(featureEnd);
                    请求数据
                    getRouteResult(start, end);
                }
            }
        });

该点击事件方法中涉及坐标的获取,赋值,以及ajax异步方式提交高德api获取数据。

四、几个封装函数

1、获取小数点后六位

  //保存小数点后六位
        function GetCoordate(coordate) {
            var lng = coordate[0].toString();
            var lat = coordate[1].toString();
            var lngIndex = lng.indexOf(".") + 7;
            var latIndex = lat.indexOf(".") + 7;
            lng = lng.substring(0, lngIndex);
            lat = lat.substring(0, latIndex);
            var str = lng + "," + lat;
            console.log(str.toString());
            return str;
        }

2、获取数据

        //获取路径规划
        function getRouteResult(start, end) {
            var data = {
                key: "",//申请的key值
                origin: start,//起点
                destination: end,//终点
                extensions:"all"
            };
            $.ajax({
                url: "https://restapi.amap.com/v3/direction/driving?",
                type: "post",
                dataType: "jsonp",
                data: data,
                success: function (result) {
                    console.log(result);
                    var routes = result["route"]["paths"][0];
                    console.log(routes);
                    //console.log(routes);
                    var steps = routes["steps"];
                    //console.log(steps);
                    for (var i = 0; i < steps.length; i++) {                       
                        var route = steps[i];
                        var path = route["tmcs"];
                        for (var k = 0; k < path.length; k++) {
                            var routePath = path[k];                           
                            var distance = routePath["distance"];
                            var polyline = routePath["polyline"].toString().split(";");
                            var status = routePath["status"];
                            var polylineData = [];
                            for (var j = 0; j < polyline.length; j++) {
                                //将字符串拆成数组
                                var realData = polyline[j].split(",");
                                var coordinate = [realData[0], realData[1]];
                                polylineData.push(coordinate);
                                //要素属性
                            }
                            var attribute = {
                                distance: distance,
                            };
                            //线此处注意一定要是坐标数组
                            var plygon = new ol.geom.LineString(polylineData);
                            //线要素类
                            var feature = new ol.Feature({
                                geometry: plygon,
                                attr: attribute,
                                status: status
                            });
                            sourceVector.addFeature(feature);                         
                        }
                    }
                }
            });
        };

3、样式函数设置

        //样式函数
        var createFeatureStyle = function (feature, name) {
            var url;
            if (name==null) {
                url = "../image/6起点.png";
            }
            else {
                if (name=="起点") {
                    url = "../image/6起点.png";
                }
                else {
                    url = "../image/9终点.png";
                }
            }
            return new ol.style.Style({
                image: new ol.style.Icon(/** @type {olx.style.IconOptions} */({
                    anchor: [0.5, 60],
                    anchorOrigin: 'top-right',
                    anchorXUnits: 'fraction',
                    anchorYUnits: 'pixels',
                    offsetOrigin: 'top-right',
                    offset: [0, 10],//偏移量设置
                    scale: 0.2,  //图标缩放比例
                    opacity: 0.75,  //透明度
                    src: url, //图标的url
                    
                })),
            });

        }

五、全部代码




    
    高德路径规划demo
    
    
    



    
    

 

你可能感兴趣的:(OpenLayer,OpenLayer3,and,4)