webGIS使用JS,高德API完成的智慧校园项目路径规划

代码实现:

   //通过geojson对象来管理覆盖物,显示点
           geojson.addOverlay(marker)
           //保存数据(将geojson对象转换成标准的GeoJSON格式对象)
           saveData(geojson.toGeoJSON())
        })
        //从localstroage中读取数据
        function getData(){
            if(!localStorage.getItem('geojson')){
                localStorage.setItem('geojson','[]')
            }
            return JSON.parse(localStorage.getItem('geojson'))
        }
        //从localstoragr中写数据
        function saveData(data){
            localStorage.setItem('geojson',JSON.stringify(data))
        }
        function startAnimation(){
            //console.log(1)
            //实现路径规划
            AMap.plugin('AMap.Driving',function(){
                var driving =new AMap.Driving({
                    map:map,
                    //驾车策略
                    policy:AMap.DrivingPolicy.LEAST_TIME,
                })
                //设置起点和终点
                var start = new AMap.LngLat()//填写自己学校的坐标起点
                var end = new AMap.LngLat()//填写自己学校的坐标终点
                //通过geojson得到每一个点的坐标
                var opts ={
                    waypoints:[],
                }
                geojson.eachOverlay(function(item){
                    opts.waypoints.push(item.getPosition())
                })
                driving.search(start,end,opts,function(status,result){
                    if(status=='complete'){
                        console.log('success')
                        //实现模拟
                        var lineArr =[]
                        result.routes[0].steps.forEach(function(item){
                            lineArr.push(...item.path)
                        })
                         var marker = new AMap.Marker({
                             map:map,
                             position:start,
                             icon:'https://webapi.amap.com/images/car.png',
                             offset:new AMap.Pixel(-26,-13),
                             autoRotation:true,
                             angle:-90,
                         })
                         
                         var passedPolyline = new AMap.Polyline({
                             map:map,
                             strokeColor:'#AF5',//线的颜色
                             storkeWeight:6,//线宽
                         })
                         
                         marker.on('moving',function(e){
                            passedPolyline.setPath(e.passedPath) 
                         })
                         map.setFitView()
                         marker.moveAlong(lineArr,{
                             duration:500,
                             autoRotation:true,
                         })
                    }
                    else{
                        console.log('error')
                    }
                })
            })
        }

注意:此段为调用高德API 的script代码,其中坐标需填写自己所需的,可使用坐标拾取器获得

你可能感兴趣的:(javascript,开发语言,ecmascript)