WebGIS实训报告.docx
- 文档编号：25298771
- 上传时间：2023-06-07
- 格式：DOCX
- 页数：78
- 大小：10.29MB
WebGIS实训报告.docx
《WebGIS实训报告.docx》由会员分享，可在线阅读，更多相关《WebGIS实训报告.docx（78页珍藏版）》请在冰豆网上搜索。
WebGIS实训报告
WebGIS报告
学号：
班级：
姓名：
苏有朋
专业：
XXXXXXXXXXXX
指导老师：
李小龙
年月日
实验一：
基本地图加载
实验目的
1 学习经纬度地图显示；
2 学习球面墨卡托地图显示；
实验内容
使经纬度地图及球面墨卡托地图同时在一个网页内显示。
实验思路
1 分别定义两个地图对象，map=newTMap（"mapDiv",config），mapMKT=newTMap（"mapMKTDiv"）。
2 显示两个地图，且分别对应它们功能。
实验步骤与结果
varmap,mapMKT;
varzoom=12;
functiononLoad（）
{
varconfig={
projection:
"EPSG:
4326",
minResolution:
11,
maxResolution:
14
}
//初始化地图对象TMap在指定的容器内创建地图实例
map=newTMap（"mapDiv",config）;
//设置显示地图的中心点和级别
map.centerAndZoom（newTLngLat（116.40969,39.89945）,zoom）;
map.disableDrag（）;
map.enableHandleMouseScroll（）;
mapMKT=newTMap（"mapDivMKT"）;
mapMKT.centerAndZoom（newTLngLat（116.40969,39.89945）,zoom）;
}
--
.style4
{
font-size:
14px;
font-weight:
bold;
color:
#996699;
}
Body
{
background-color:
#CCFFFF;
}
-->
absolute;width: 569px;height: 425px;left: 616px;top: 98px;font-size: 14px;color: #996699;">
absolute;left: 30px;width: 528px;height: 425px;top: 98px;font-weight: bold;color: #996699;font-size: 14px;">
图1-1
实验二：
地图基本操作
实验目的
1 掌握地图投影方式切换；
2 学习怎样实现地图放大缩小；
3 掌握怎样实现地图平移；
4 学习拼接技术；
实验内容
1 实验思路实现地图投影方式的切换；
2 实现地图放大缩小；
3 实现地图平移；
实习思路
1 初始化地图对象，设置显示地图的中心点和级别；
2 构造地图平移的函数；
3 用setTimeout方法实现地图平移函数，时间设置为2000毫秒；
4 构建投影变换的函数，在div里面用select来切换投影类型；
5 用按钮的onclick实现地图放大缩小；
实验步骤与结果
varmap;
varzoom=12;
functiononLoad（）
{
//初始化地图对象
map=newTMap（"mapDiv"）;
//设置显示地图的中心点和级别
map.centerAndZoom（newTLngLat（116.40969,39.89945）,zoom）;
}
setTimeout（function（）
{
map.panTo（newTLngLat（116.64899,40.12948））;//两秒后移动到北京顺义
},2000）;
functionswitchingMaps（）
{
varobj=document.getElementById（"projectionMap"）;
varindex=obj.selectedIndex;
vartext=obj.options[index].text;
if（map.getCode（）==text）return;
map.switchingMaps（text）;
}
style="position: absolute;width: 600px;height: 500px;top: 36px;left: 63px;">
absolute;left: 690px;top: 178px;width: 334px;height: 201px;"> 900913 4326 切换地图投影
- 本示例演示怎样设置地图中心点、缩放级别。
图2-1
图2-2
实验三：
地图参数设置
实验目的
1 掌握怎样设置地图中心点及缩放级别；
2 掌握怎样保存当前地图；
3 掌握怎样设置是否允许鼠标双击放大地图；
4 掌握怎样设置是否允许鼠标滚轮缩放地图；
5 掌握怎样设置是否允许鼠标惯性拖拽地图；
6 掌握怎样设置是否允许键盘操作地图；
7 掌握怎样设置地图的显示级别；
实验内容
1 设置地图中心点及缩放级别；
2 保存当前地图功能的实现；
3 实现是否允许鼠标双击放大地图；
4 实现是否允许鼠标滚轮缩放地图；
5 实现是否允许鼠标惯性拖拽地图；
6 实现是否允许键盘操作地图；
7 实现地图的显示级别的设置；
实验思路
1 初始化图形对象，设置中心点和缩放级别；
2 用enableHandleMouseScroll实现滚蛋操作；
3 利用disableDoubleClickZoom命令实现双击放大缩小；
4 用disableDragHandleMouseScroll命令实现拖拽地拖能惯性移动一段距离；
5 用disableHandleKeyboard实施键盘操作；
实验步骤与结果
varmap;
varzoom=12;
functiononLoad（）
{
//初始化地图对象
map=newTMap（"mapDiv"）;
//设置显示地图的中心点和级别
map.centerAndZoom（newTLngLat（116.40969,39.89945）,zoom）;
//允许鼠标滚轮操作地图
map.enableHandleMouseScroll（）;
//允许鼠标滚轮缩放地图
map.enableHandleMouseScroll（）
}
functionsetCenterAndZoom（）
{//获取经纬度坐标值
varlng=document.getElementById（"lng"）.value;
varlat=document.getElementById（"lat"）.value;
//获取缩放级别
varzoom=document.getElementById（"zoom"）.value;
map.setCenter（newTLngLat（lng,lat））;//将地图定位到北京顺义
map.setZoom（zoom）;//将视图切换到指定的缩放等级，中心点坐标不变
}
absolute;left: 620px;">
经度
纬度
缩放级别
- 滚动鼠标滑轮，地图将进行缩放操作；
- 敲击键盘上的A、S、W、D四个键，或者Home,PageUp,End,PageDown四个键，或者小键盘上的四个方向键，地图将向相应的方向移动一段距离；
- 敲击小键盘上的"5"数字键地图将向恢复到原来位置；
- 按下键盘上的四个方向键中的一个或两个不放，地图将向相应的方向连续滑动；
- 敲击大小键盘上的+、-两个键，地图将放大或缩小
图3-1
实验四：
地图信息获取
实验目的
1 掌握怎样获取当前地图中心点坐标
2 掌握怎样获取当前缩放级别
3 掌握怎样获取地图当前可视范围坐标
实验内容
1 获取当前地图中心点坐标
2 获取当前缩放级别
3 获取地图当前可视范围坐标
实验思路
1 初始化数据；
2 由onClick事件用getMapCenter（）控件命令获取map.getCenter；
3 由onClick事件用getMapZoom（）控件命令获取map.getZoom；
4 由onClick事件用getMapBounds（）控件命令获取map.getBounds；
实验步骤与结果
varzoom=12;
functiononLoad（）{
map=newTMap（"mapDiv"）;
map.centerAndZoom（newTLngLat（116.40969,39.89945）,zoom）;
map.enableHandleMouseScroll（）;
}
functiongetMapCenter（）
{
alert（"当前地图中心点：
"+map.getCenter（）.getLng（）+","+map.getCenter（）.getLat（））;
}
functiongetMapZoom（）
{
alert（"当前地图缩放级别：
"+map.getZoom（））;
}
functiongetMapBounds（）
{
varbs=map.getBounds（）;
varbssw=bs.getSouthWest（）;
varbsne=bs.getNorthEast（）;
alert（"当前地图可视范围是：
"+bssw.getLng（）+","+bssw.getLat（）+"到"+bsne.getLng（）+","+bsne.getLat（））;
}
absolute;width: 600px;height: 500px">
absolute;left: 634px;top: 72px;width: 200px;height: 299px;">
图4-1当前地图中心点
图4-2当前地图缩放级别
图4-3当前地图可视化范围
实验五：
自定义图层
实验目的
掌握自定义图层的添加
实验内容
添加自定义图层
实验思路
1 初始化地图对象，设置显示地图的中心和级别；
2 创建自定义图层对象；
3 用onclick事件来控制移除图层
实验步骤与结果
varzoom=12;
functiononLoad（）
{
//初始化地图对象
map=newTMap（"mapDiv"）;
//设置显示地图的中心点和级别
map.centerAndZoom（newTLngLat（116.40969,39.89945）,zoom）;
//允许鼠标滚轮缩放地图
map.enableHandleMouseScroll（）;
varconfig={};
config.getTileUrl=function（x,y,z）{
return"+"TILECOL="+x+"&TILEROW="+y+"&TILEMATRIX="+z;
}
//创建自定义图层对象
varlay=newTTileLayer（config）;
lay.setGetTileUrl（config.getTileUrl）;
//将图层增加到地图上
map.addLayer（lay）;
}
--
.style1{font-family:
"宋体"}
-->
absolute;width: 600px;height: 500px">
《爱和自由》读书心得15篇.docx
