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

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

前置工作

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

对html、body、container设置宽高：

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

地图展示

在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:`打卡了${click}次`,
        })
        // 显示窗口信息:在地图上点击的标注位置上显示信息
        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:`打卡了${click}次`,
            })
            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');
            }
        })
    })
}

上面案例的完整代码

   智慧校园          //创建地图容器 
  点击地图，可标注地点；点击地点，可以打卡
   推荐浏览路线

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开发，《智慧校园》项目实战

分类:热门推荐日期:2024-06-22浏览:1评论:0

目录