webgis开发智慧校园实现路径规划

1.首先需要在高德地图官网申请自己的账号和key

步骤如下：

 2.实现显示地图

2.1 引入资源 创建地图

<!-- 引入资源 -->


    <script type="text/javascript">
        // 引入密钥和key值
        window._AMapSecurityConfig = {
            // 这里写自己申请的安全密钥
            securityJsCode: 'b015002be73d099ca1138212dc65d497',
        }
    </script>
    <!-- 这里写自己申请的key值  -->
    <script type="text/javascript"
        src="https://webapi.amap.com/maps?v=2.0&key=5d654dec4fa284f641fde765ea5bc604&plugin=AMap.GeoJSON">
    </script>
    <!-- 引入jquery资源 -->
    <script src="../jquery.min.js"></script>
    <!-- 引入高德所给的css样式 -->
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />

然后利用高德地图所给的demo，实现地图的显示

<!-- 创建地图容器 -->
    <div id="container">
    </div>

var map = new AMap.Map('container', {
            center: [118.910321, 32.105220],
            zoom: 16,
            viewMode: '3D',
            pitch: 45,

        });

地图显示：（这里中心点设置的是南京师范范大学仙林校区）

2.2 实现添加控件

// 使用控件
        AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.ControlBar', 'AMap.MoveAnimation'], function () {
            map.addControl(new AMap.ToolBar({
                position: {
                    top: '80px',
                    right: '40px'
                }
            }))
            map.addControl(new AMap.Scale);
            map.addControl(new AMap.ControlBar);
        })

 添加结果展示如下：

 2.3 实现标记功能

这里使用高德的css样式来创建一个div控件：

 <div class="info">点击地图热门地点</div>

之后再添加地图点击监听事件：

        // 监听地图点击事件
        map.on('click',function(e){
            // 创建标记
            var marker = new AMap.Marker({
                position:e.lnglat,
 
            })
            // 添加标记图层
            map.add(marker)
        })

效果如下：

 2.4 实现数据永久存储

使用GeoJSON在本地存储中记录数据。代码如下：

扫描二维码关注公众号，回复： 15193062 查看本文章

 // 定义一个全局变量
        var geojson = new AMap.GeoJSON({
            geoJSON: null,
        })

        if (JSON.stringify(getData()) != '[]') {
            // 导入数据
            geojson.importData(getData())
            // 恢复旧数据的点击事件
            geojson.eachOverlay(function (item) {
                item.on('click', function (e) {
                    var ext = item.getExtData()
                    var click = ++ext._geoJsonProperties.click
                    var infowindow = new AMap.InfoWindow({
                        anchor: 'top-center',
                        content: `<div>打卡了${click}次</div>`
                    })

                    infowindow.open(map, item.getPosition())
                    saveData(geojson.toGeoJSON())
                })
            })
        }

        // 将geojson加载到地图上
        map.add(geojson)

        // 监听地图的点击事件
        map.on('click', function (e) {
            var marker = new AMap.Marker({
                position: e.lnglat,
                extData: {
                    _geoJsonProperties: {
                        gid: geojson.getOverlays().length + 1,
                        click: 0,
                    },
                }

            })
            // 使用覆盖物的点击事件
            marker.on('click', function (e) {
                var ext = marker.getExtData()
                var click = ++ext._geoJsonProperties.click
                // console.log('点击了' + click + '次')
                // 使用消息提示框显示
                var infowindow = new AMap.InfoWindow({
                    anchor: 'top-center',
                    content: `<div>打卡了${click}次</div>`
                })
                // 打开信息窗口
                infowindow.open(map, marker.getPosition())
                saveData(geojson.toGeoJSON())

            })


            // 数据持久化 
            // map.add(marker)
            geojson.addOverlay(marker)
            // console.log(geojson)
            saveData(geojson.toGeoJSON())
        })

        // 从local storage中读取数据
        function getData() {
            //判断本地local storage中不存在数据
            if (!localStorage.getItem('geojson')) {
                localStorage.setItem('geojson', '[]')
            }
            return JSON.parse(localStorage.getItem('geojson'))
        }


        // 从local storage中写数据
        function saveData(data) {
            localStorage.setItem('geojson', JSON.stringify(data))
        };

2.5 实现导航功能

首先，在地图上添加一个div框，实现导航按钮。

<div class="input-card">
        <h4>推荐路线</h4>
        <div class="input-item">
            <button class="btn" onclick="startAnimation()">开始动画</button>
        </div>

这里实现了，一个可以点击导航的按钮：

 按这个按钮的时候，用户希望获取路线。这里就需要写一个回调函数。

这里起点和终点我分别设置的是南师大一号门和南师大六号门

 function startAnimation() {
            // console.log('开始动画')
            AMap.plugin('AMap.Driving', function () {
                var driving = new AMap.Driving({
                    map: map,
                    policy: AMap.DrivingPolicy.LEAST_TIME,
                })
                // 设置起点和终点
                var start = new AMap.LngLat(118.912561, 32.100193)
                var end = new AMap.LngLat(118.916887, 32.113263)
                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(result)
                        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(-13, -26),
                            autoRotation: true,
                            angle: 180,
                        })
                        var passedPolyline = new AMap.Polyline({
                            map: map,
                            strokeColor: '#AF5',//描边的绿色
                            strokeWeight: 6,//线宽
                        })

                        marker.on('moving', function (e) {
                            passedPolyline.setPath(e.passedPath)
                        })
                        map.setFitView()
                        marker.moveAlong(lineArr, {
                            duration: 500,
                            autoRotation: true,
                        })
                    } else {
                        console.log('error')
                    }
                }
                )
            })
        }

接着设置途径点，上面代码已经展示。最终路线规划为：

2.7 实现动画效果

代码如下：

 function startAnimation() {
            // console.log('开始动画')
            AMap.plugin('AMap.Driving', function () {
                var driving = new AMap.Driving({
                    map: map,
                    policy: AMap.DrivingPolicy.LEAST_TIME,
                })
                // 设置起点和终点
                var start = new AMap.LngLat(118.912561, 32.100193)
                var end = new AMap.LngLat(118.916887, 32.113263)
                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(result)
                        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(-13, -26),
                            autoRotation: true,
                            angle: 180,
                        })
                        var passedPolyline = new AMap.Polyline({
                            map: map,
                            strokeColor: '#AF5',//描边的绿色
                            strokeWeight: 6,//线宽
                        })

                        marker.on('moving', function (e) {
                            passedPolyline.setPath(e.passedPath)
                        })
                        map.setFitView()
                        marker.moveAlong(lineArr, {
                            duration: 500,
                            autoRotation: true,
                        })
                    } else {
                        console.log('error')
                    }
                }
                )
            })
        }

 之后点击开始动画按钮就可以实现路线的自动执行

3.出现的问题

上面的代码出现好多问题：

（1）有的函数声明出现问题，会报错

（2）错误显示如下：

 原因主要是忘记写new 开辟一个新的对象

总之，修改BUG的过程确实比较慢，但是能解决就很开心呢，也锻炼了自己的耐心。