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

m0_748238922024-12-26 8:17

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

目录

前置工作

  • HTML页面的准备：创建一个id为container的地图容器

    <div id="container"></div>

    对html、body、container设置宽高：

  • 引入高德地图相关的CSS资源

    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />

  • 在高德开放平台上申请JS API的key和安全密钥，引入高德js相关的资源(将下面代码中的安全密钥和key替换即可)

地图展示

  • 在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);// 将标注添加到地图
})
```

  • 进阶：实现点击事件打卡，保存数据，再次打开页面时，旧数据依然在，切可以继续打卡，并在页面上显示该地点打卡了几次。

    // 定义一个全局变量，保存geojson
var 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');
            }
        })
    })
}

上面案例的完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智慧校园</title>
    <!-- 引入高德地图相关的CSS资源 -->
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <style>
        html,
        body,
        #container{
            width: 100%;
            height: 100%;
        }
    </style>

    <!-- 引入高德js相关的资源 -->
    <!-- 密钥和key -->
    <script type="text/javascript">
        window._AMapSecurityConfig = {
          securityJsCode: "9497fb6552130d5d26e90c0c1082ca2a",
        };
    </script>
    <script src="https://webapi.amap.com/loader.js"></script>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=85aaa8a9d92f5a244271e3bc7494072f"></script>
    <script src="./js/store.js"></script>
</head>
<body>
    //创建地图容器
    <div id="container"></div>
    <!-- 高德地图css中自带有info样式 -->
    <div class="info">点击地图，可标注地点；点击地点，可以打卡</div>
    <!-- 高德css模板 -->
    <div class="input-card" style="width: 17rem">
        <h4>推荐浏览路线</h4>
        <div class="input-item">
            <button class="btn" onclick="starts()">开始动画</button>
        </div>
    </div>
</body>
<script>
    //创建地图对象
    var map=new AMap.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(new AMap.ToolBar({
            position:{
                top:'80px',
                right:'40px',
            },
        }));
        map.addControl(new AMap.Scale());
        map.addControl(new AMap.ControlBar());
    })

    // 定义一个全局变量，保存geojson
    var geojson = new AMap.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=new AMap.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=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;

            // 使用信息提示框显示打卡信息
            var infowindow=new AMap.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);
    })

    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.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');
                }
            })
        })
    }

</script>
</html>

js代码

// 从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))
}

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

相关推荐
摇光9339 分钟前
js高阶-async与事件循环
开发语言·javascript·事件循环·宏任务·微任务
沐泽Mu43 分钟前
嵌入式学习-QT-Day09
开发语言·qt·学习
小猿_001 小时前
C语言实现顺序表详解
c语言·开发语言
余~~185381628001 小时前
NFC 碰一碰发视频源码搭建技术详解，支持OEM
开发语言·人工智能·python·音视频
GOATLong1 小时前
c++智能指针
开发语言·c++
Dola_Pan1 小时前
C语言：随机读写文件、实现文件复制功能
c语言·开发语言
佳心饼干-2 小时前
C语言-08复合类型-结构体
c语言·开发语言
帅逼码农2 小时前
python爬虫代码
开发语言·爬虫·python·安全架构
F-2H2 小时前
C语言：指针3（函数指针与指针函数）
linux·c语言·开发语言·c++
热门推荐
0119个Web前端交互式3D JavaScript框架和库02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04RAG 实践- Ollama+RagFlow 部署本地知识库05【一文读懂】NTN（非地面网络）技术介绍06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO08组基轨迹建模 GBTM的介绍与实现（Stata 或 R）09Docker 夺命连环 15 问10电赛2024年H题智能小车基于MSPM0G3507主控MCU（利用8路灰度加上MPU6050的解决方式）具体项目报告