webgis入门实战案例

您所在的位置：网站首页 › 智慧校园设计 › webgis入门实战案例

webgis入门实战案例

2024-07-06 19:31| 来源: 网络整理| 查看: 265

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

目录前置工作地图展示地图控件的添加实现点击某个地方进行标注、打卡实现简单的驾车路径规划动画上面案例的完整代码

前置工作

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

对html、body、container设置宽高：

html, body, #container{ width: 100%; height: 100%; }

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

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

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中的每一个步骤，设置小车标注，实现动画效果

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

【本文地址】

webgis入门实战案例

webgis入门实战案例

今日新闻

推荐新闻