当前位置： 首页 > article >正文

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

article 2024/12/25 15:03:02

本文通过利用高德地图的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开发，《智慧校园》项目实战


http://www.kler.cn/a/450863.html

相关文章：

  • 构建一个rust生产应用读书笔记7-确认邮件2
  • Y3地图制作1：水果缤纷乐、密室逃脱
  • 详解磁盘IO、网络IO、零拷贝IO、BIO、NIO、AIO、IO多路复用(select、poll、epoll)
  • 【Unity3D】Particle粒子特效或3D物体显示在UGUI上的方案
  • 畅捷通T+13管理员密码任意重置漏洞
  • 链路聚合与GVRP的混合构建（eNSP）
  • java 对ElasticSearch数据库操作封装工具类（对你是否适用嘞）
  • Brocade G610 配置
  • 使用 Python 创建多栏 Word 文档 – 详解
  • WSL2高级配置之mirrored镜像网络
  • 跨站请求伪造之基本介绍
  • OMG DDS 规范漫谈：分布式数据交互的演进之路
  • 重温设计模式--1、组合模式
  • 访问修饰符对方法重写的影响：深入解析与最佳实践
  • 【项目实战】NGINX 实现会话保持
  • app在苹果手机上突然无法使用相机了，在安卓上正常
  • 关于opencv、Qt、msvc编译器之间的关系
  • laravel中文文档
  • 附录：标签汇总
  • 框架程序设计-简答以及论述
  • Golang的容器化技术实践总结
  • 搭建自己的Wiki知识库——Ubuntu与Wiki.js
  • mongodb给不同的库设置不同的密码进行连接
  • 【SteamVR】当VR眼镜进入到SteamVR星空里面后，会自动弹出Steam商店界面的解决办法
  • 刘培超掌舵的越疆科技IPO下限定价：毛利率损伤下滑，持续亏损
  • Vulhub靶场Apache解析漏洞