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代码,其中坐标需填写自己所需的,可使用坐标拾取器获得

  • 13
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值