webgis入门实战案例——智慧校园
本文通过利用高德地图的JS API做一个关于智慧校园的小案例,主要内容有地图展示、地图控件的添加、标注点添加、地点打卡、驾车路径规划动画展示,文章末尾附有完整代码。后续将继续跟进其他学习案例。
(图片来源网络,侵删)
目录
- 前置工作
- 地图展示
- 地图控件的添加
- 实现点击某个地方进行标注、打卡
- 实现简单的驾车路径规划动画
- 上面案例的完整代码
前置工作
-
HTML页面的准备:创建一个id为container的地图容器
对html、body、container设置宽高:
html, body, #container{ width: 100%; height: 100%; }
-
引入高德地图相关的CSS资源
window._AMapSecurityConfig = { securityJsCode: "你的安全密钥", };
地图展示
- 在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'); } }) }) }
上面案例的完整代码
智慧校园 html, body, #container{ width: 100%; height: 100%; } window._AMapSecurityConfig = { securityJsCode: "9497fb6552130d5d26e90c0c1082ca2a", }; //创建地图容器
点击地图,可标注地点;点击地点,可以打卡推荐浏览路线
开始动画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开发,《智慧校园》项目实战
- 旧数据打卡
- 新数据打卡
-
- 在js中创建地图对象(这样就会在界面上显示地图)
-
-
文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。