0
0

webgis入门实战案例——智慧校园

本文通过利用高德地图的JS API做一个关于智慧校园的小案例，主要内容有地图展示、地图控件的添加、标注点添加、地点打卡、驾车路径规划动画展示，文章末尾附有完整代码。后续将继续跟进其他学习案例。

目录

前置工作

  • HTML页面的准备：创建一个id为container的地图容器<div id="container"></div>对html、body、container设置宽高：
<style>html,
    body,
    #container{width: 100%;height: 100%;}</style>
  • 引入高德地图相关的CSS资源<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
  • 在高德开放平台上申请JS API的key和安全密钥，引入高德js相关的资源(将下面代码中的安全密钥和key替换即可)
<scripttype="text/javascript">
window._AMapSecurityConfig ={securityJsCode:"你的安全密钥",};</script><scriptsrc="https://webapi.amap.com/loader.js"></script><scripttype="text/javascript"src="https://webapi.amap.com/maps?v=2.0&key=你的key"></script><scriptsrc="./js/store.js"></script>

地图展示

  • 在js中创建地图对象(这样就会在界面上显示地图)
var map=new AMap.Map('container',{
    center:[118.91125,32.10296],//表示地图界面中心显示的位置
    zoom:16,//表示地图级别
    viewMode:'3D',//表示地图显示模式为3D，默认是2D
    pitch:45,//初识地图俯仰角度
})

其他AMap.Map属性和方法参照：

AMap.Map属性和方法

地图控件的添加

// 异步加载工具条插件，在回调函数中实例化插件，并使用插件功能
AMap.plugin(['AMap.ToolBar','AMap.Scale','AMap.ControlBar','AMap.GeoJSON','AMap.MoveAnimation'],function(){
    // 添加缩放控件插件到地图页面
     map.addControl(new AMap.ToolBar({
         position:{
             top:'80px',
             right:'40px',
         },
     }));
    // 添加比例尺
     map.addControl(new AMap.Scale());
     // 添加控制罗盘控件
    map.addControl(new AMap.ControlBar());
    })

其他插件的使用参照：

插件列表

实现点击某个地方进行标注、打卡

监听地图的点击事件，当点击时调用函数

```html
map.on('click',function(e){
    // 先创建标注对象
    var marker=new AMap.Marker({
        position:e.lnglat,// 获取点击事件的位置(经纬度)
        }
    })
    map.add(marker);// 将标注添加到地图
})



- 进阶：实现点击事件打卡，保存数据，再次打开页面时，旧数据依然在，切可以继续打卡，并在页面上显示该地点打卡了几次。```// 定义一个全局变量，保存geojsonvar geojson = new AMap.GeoJSON({    geoJSON:null,})```- 新数据打卡```map.on('click',function(e){    var marker=new AMap.Marker({        position:e.lnglat,        extData:{            // 自定义属性            _geoJsonProperties:{                gid:geojson.getOverlays().length+1,// 打卡地点数+1                click:0,// 初始的点击数为0            }        }    })    // 对标注点进行点击时：实现对新旧点击事件标记打卡    marker.on('click',function(e){        var ext=marker.getExtData();// 先得到属性        var click = ++ext._geoJsonProperties.click;// 将该标注地点的点击事件自增然后存到click变量中        // 使用信息提示框显示打卡信息        var infowindow=new AMap.InfoWindow({            anchor:'top-center',// 提示框显示的位置            content:`<div>打卡了${click}次</div>`,        })        // 显示窗口信息:在地图上点击的标注位置上显示信息        infowindow.open(map,marker.getPosition());        // 将新数据重新保存；若没有保存，则下次加载进来的数据还是没有自增的click属性值        // 将其转为geojson格式再保存        saveData(geojson.toGeoJSON());    })    // 通过geojson来管理覆盖物    geojson.addOverlay(marker);    // 保存数据(将geojson对象转换成标准的GeoJSON格式对象)    saveData(geojson.toGeoJSON())    map.add(marker);})```- 旧数据打卡```// 读取和存储数据函数// 从Localstorage中读取数据function getData(){    //如果本地local storage中不存在数据    if(!localStorage.getItem('geojson')){        //设置一个空的初始数据，即数据初始化        localStorage.setItem('geojson','[]')    }    //反之，因为localStorage中存放的是字符串数据，所以将字符串数据转换成JSON对象返回    return JSON.parse(localStorage.getItem('geojson'))}// 将数据保存到Localstorage中function saveData(data){    //需要将数据转换成字符串类型才能存入localStorage中    localStorage.setItem('geojson',JSON.stringify(data))}``````// 导入数据，当数据为空的时候，会报错，所以在数据不为空的时候才导入// 因为getData()返回的是对象，所以需要先将其转为字符串，判断其是否为空字符串，即空数组if(JSON.stringify(getData())!='[]'){    geojson.importData(getData())// 将得到的对象导入geojson变量中    // 恢复旧数据的点击事件：拿到geojson数据中的每一个点，对拿到的每一个标注点(覆盖物)设置点击监听    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());// 同样保存数据            })    })}// 将导入的数据添加到地图上面；这样，刷新浏览器的时候数据就不会消失(相当于加载地图的时候就将原来存储的数据加进来)map.add(geojson); ```

### 实现简单的驾车路径规划动画

先设置起点和终点，然后建立一个对象存储途径点经纬度坐标，然后将始末点和途径点传入driving.search函数中，遍历结果result.routes[0].steps中的每一个步骤，设置小车标注，实现动画效果

function starts(){
//首先引用驾车规划插件
AMap.plugin('AMap.Driving',function(){
// 创建驾车规划对象
var driving =new AMap.Driving({
map:map,// 显示在地图上
// policy:AMap.DrivingPolicy.LEAST_TIME,
policy:2,// 按照距离最短规划
})
// 设置起点和终点
var st=new AMap.LngLat(118.903607, 32.096752);
var end=new AMap.LngLat(118.918165, 32.098677);

    // 通过geojson得到每一个点的坐标
    var obs={
        waypoints:[],
    }
    // 将geojson中每一个点数据的坐标添加到obs对象中
    geojson.eachOverlay(function(item){
        obs.waypoints.push(item.getPosition());
    })

    // 将点的对象传入
    driving.search(st,end,obs,function(status,result){
        if(status=='complete'){
            // 路径规划成功，则接下来实现动画效果
            // console.log(result);

            var lineArr=[];// 创建存放路径的变量
            result.routes[0].steps.forEach(function(item){
                lineArr.push(...item.path);//遍历路线的每一个步骤，将其路径展开放入lineArr中
            })
            // console.log(lineArr);
            //首先设置小车标记的起始位置
            var marker=new AMap.Marker({
                map:map,
                position:st,
                // 导入小车图标
                icon:'https://webapi.amap.com/images/car.png',
                // 为了不让小车压到路面，为其设置偏移量
                offset:new AMap.Pixel(-26,-13),
                // 小车在转弯的时候自动转头
                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');
        }
    })
})

}


### 上面案例的完整代码
<!DOCTYPEhtml>

<htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>智慧校园</title><linkrel="stylesheet"href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/><style>html,
body,
#container{width: 100%;height: 100%;}</style><scripttype="text/javascript">
window._AMapSecurityConfig ={securityJsCode:"9497fb6552130d5d26e90c0c1082ca2a",};</script><scriptsrc="https://webapi.amap.com/loader.js"></script><scripttype="text/javascript"src="https://webapi.amap.com/maps?v=2.0&key=85aaa8a9d92f5a244271e3bc7494072f"></script><scriptsrc="./js/store.js"></script></head><body>
//创建地图容器
<divid="container">

<divclass="info">点击地图，可标注地点；点击地点，可以打卡
<divclass="input-card"style="width: 17rem">

推荐浏览路线

<divclass="input-item"><buttonclass="btn"onclick="starts()">开始动画</button>
</body><script>//创建地图对象var map=newAMap.Map('container',{center:[118.91125,32.10296],zoom:16,viewMode:'3D',pitch:45,})//使用地图控件
AMap.plugin(['AMap.ToolBar','AMap.Scale','AMap.ControlBar','AMap.GeoJSON','AMap.MoveAnimation'],function(){
map.addControl(newAMap.ToolBar({position:{top:'80px',right:'40px',},}));
map.addControl(newAMap.Scale());
map.addControl(newAMap.ControlBar());})// 定义一个全局变量，保存geojsonvar geojson =newAMap.GeoJSON({geoJSON:null,})// 导入数据，当数据为空的时候，会报错，所以在数据不为空的时候才导入// 因为getData()返回的是对象，所以需要先将其转为字符串，判断其是否为空字符串，即空数组if(JSON.stringify(getData())!='[]'){
geojson.importData(getData())// 将得到的对象导入geojson文件中// 恢复旧数据的点击事件：拿到geojson数据中的每一个点，对拿到的每一个点(覆盖物)设置点击监听(随着点击事件的发生，调用后面的函数)
geojson.eachOverlay(function(item){
item.on('click',function(e){var ext=item.getExtData();var click =++ext._geoJsonProperties.click;var infowindow=newAMap.InfoWindow({anchor:'top-center',content:<div>打卡了${click}次</div>,})

            infowindow.open(map,item.getPosition());saveData(geojson.toGeoJSON())})})}// 将导入的数据添加到地图上面；这样，刷新浏览器的时候数据就不会消失
map.add(geojson);//实现点击某个地方的标注效果，即监听地图的点击事件，当点击时调用函数
map.on('click',function(e){var marker=newAMap.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;// 使用信息提示框显示打卡信息var infowindow=newAMap.InfoWindow({anchor:'top-center',//提示框显示的位置content:`<div>打卡了${click}次</div>`,})//显示窗口信息:在地图上的marker上显示信息
        infowindow.open(map,marker.getPosition());saveData(geojson.toGeoJSON());//将新数据重新保存；因为没有保存读取数据的时候还是原来的值})// 通过geojson来管理覆盖物
    geojson.addOverlay(marker);// 保存数据(将geojson对象转换成标准的GeoJSON格式对象)saveData(geojson.toGeoJSON())
    map.add(marker);})functionstarts(){
    AMap.plugin('AMap.Driving',function(){var driving =newAMap.Driving({map:map,// policy:AMap.DrivingPolicy.LEAST_TIME,policy:2,})// 设置起点和终点var st=newAMap.LngLat(118.903607,32.096752);var end=newAMap.LngLat(118.918165,32.098677);// 通过geojson得到每一个点的坐标var obs={waypoints:[],}
        geojson.eachOverlay(function(item){
            obs.waypoints.push(item.getPosition());})// 将点的对象传入
        driving.search(st,end,obs,function(status,result){if(status=='complete'){// 路径规划成功，则接下来实现动画效果// console.log(result);var lineArr=[];
                result.routes[0].steps.forEach(function(item){
                    lineArr.push(...item.path);//遍历路线的每一个步骤，将其路径展开放入lineArr中})// console.log(lineArr);//首先设置小车标记的起始位置var marker=newAMap.Marker({map:map,position:st,icon:'https://webapi.amap.com/images/car.png',// 为了不让小车压到路面，为其设置偏移量offset:newAMap.Pixel(-26,-13),// 小车在转弯的时候转头autoRotation:true,angle:-180,})// 构造折线对象var passedPolyline=newAMap.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');}})})}</script></html>


**js代码**

// 从Localstorage中读取数据functiongetData(){//如果本地local storage中不存在数据if(!localStorage.getItem('geojson')){//设置一个空的初始数据，即数据初始化
localStorage.setItem('geojson','[]')}//反之，因为localStorage中存放的是字符串数据，所以将字符串数据转换成JSON对象返回returnJSON.parse(localStorage.getItem('geojson'))}// 将数据保存到Localstorage中functionsaveData(data){//需要将数据转换成字符串类型才能存入localStorage中
localStorage.setItem('geojson',JSON.stringify(data))}

```

本文参考的学习视频：GIS | 零基础入门WebGIS开发，《智慧校园》项目实战

标签： 前端 web javascript
本文转载自: https://blog.csdn.net/moneyhu/article/details/138603840
版权归原作者 moneyhu545 所有， 如有侵权，请联系我们删除。
登录后发布评论

“webgis入门实战案例——智慧校园”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

光伏电站项目-视频监控、微气象及安全警卫系统

【Linux】发展史

selenium和urllib3版本冲突解决

Docker镜像仓库

Pr2024软件下载安装（2017-2024）

计算机毕业设计 基于协同过滤 大数据的美食推荐系统的设计与实现 Python 可视化大屏（源码+文档报告+部署讲解文档）

高级爬虫练习题及答案

文章导航