0. 写在前面：一点说明
我们做的系统叫
手把手教你制作自己的地理信息系统
这是之前写的说明：高德地图实践（WhuRS） - 简书。
教你一点点开始，利用高德地图的 JavaScript API 打造自己的地理信息系统。用到的语言有 HTML5、CSS、JavaScript、Markdown 等。搭建网站用到了 七牛云存储、GitHub 的 Gist，并把代码托管到了 GitCafe，工程简介放在了 简书。可以说，这是一个实际运行的系统，7 x 24 全天候运行在网络的地理信息系统。
01. WhuRS
我们的系统名称 WhuRS，你可以随时访问它。虽然由于国内近期封锁了 Gist，可能加载不完全，请翻墙后再试（如果不翻墙，就只能看到我们的 CC 协议了）。为了展现网站风貌，我们特地插入了较多截图，为了更好的说明我们的系统。
这是我们的主页：
WhuRS-home.png
当你打开一个 Demo 时，等待加载的途中，你可能看到“高德题图正带您去邂逅风景”。因为我们正是用高德地图 的地图服务和 JavaScript API 接口完成的本次实习。
WhuRS-02.png
从首页的链接你可以打开我们的 Demo 列表。
WhuRS-index01.png
这里把各自的链接也贴上来，方便查看：
WhuRS Index
- 英文、中英文地图
- 绘制行政区划边界
- 城市下拉列表
- 地图类型切换 （Map 插件）
- 自定义默认显示的地图
- 道路名称查询 || 道路交叉口查询
- Street View
- 覆盖物图层
- 地物点搜索
这个网页连带 CSS 文件都是手写完成，布局简洁明了，赏心悦目。这是网页截图，页面略有点长。
03. 两个例子
街景
点击相应链接查看详细内容。这里我们介绍一下街景，这是本工程比较有特色的部分。
WhuRS-index02.png
街景效果：
WhuRS-街景.png
WhuRS-街景02.png
相应代码：
//全景地图展示
panorama = new AMap.Panorama('ipano',{
position:position, //全景点位置
systemLabel:false, //不显示系统自带POI标签
pov: { //创建全景视角
heading:0,
pitch:0
}
});
AMap.event.addListener(panorama, 'complete', function() {
AMap.event.addListener(panorama, 'panochange', function() { //点标记和地图随着全景移动
var pano_position = panorama.getPosition();
mapObj.setCenter(pano_position);
marker.setPosition(pano_position);
});
});
//平面地图展示
mapObj = new AMap.Map("imap",{
center:position,
level:18
}); //创建地图实例
panoLayer = new AMap.PanoramaLayer();//创建全景路网
panoLayer.setMap(mapObj); //叠加全景路网
marker = new AMap.Marker({ //在地图上添加点标记
icon:'http://webapi.amap.com/images/marker_sprite.png',
position: position,
offset: new AMap.Pixel(-32,-10),
draggable:true
});
marker.setMap(mapObj);
AMap.event.addListener(marker, 'dragend', function(e) { //街景随着点标记移动
panorama.setPosition(e.lnglat);
});
}
点聚合显示
当比例尺调整时，聚合范围会自动调整，达到最完美的效果。
WhuRS-01.png
WhuRS-Gist-intro.png
你也可以看到，每个 Demo 上面是显示，下面是源码说明（这部分 Markdown 托管在 Gist 上，翻墙才能显示完整）。这正是“手把手教你制作自己的地理信息系统”的真是写照。我们的目标是在网页添加输入框，让用户参与到代码的编写中，实时地调整地图的生成和显示。但时间有限，没能完成。
03. Gist 是什么？及其它
GitHub 是全球最大的代码托管平台，口号是 Social Coding，我们的代码在 GitHub 上备份，但主要放在 GitCafe 上，这是出于网络连接速度的考虑。GitCafe 是 GitHub 的 Copy2China 版本。
虽然 GitCafe 有 GitHub 的核心功能，但是它无法提供 Gist 服务。Gist 可以方便地交流代码片段，支持多种语法的代码高亮。所以我么用到了 Gist 来做 HTML 和 JavaScript 代码的说明。我们的 WhuRS 大部分内容都动态地从 Gist 加载。比如我们的主页，其实就是一个 Gist 文档，用 Markdown 写成（注意到上幅截图中最后的“hosted with <heart> by GitHub”了吗？），这里是截图：
WhuRS-home-gist.png
不仅如此，Gits 还提供 git 的版本控制（Version Control）功能，还能完美的在浏览器中 diff 出最近的代码修改状况（如下图），其中红色行为删去行，绿色行为添加行。
WhuRS-Gist-VC-diff.png
我们的 Gits 页面全截屏（图片有 6MB+，不直接显示了）：WhuRS-Gist-full-screenshot.png
七牛 则是不错的 CDN 云存储服务，不多介绍。
4. 手把手打造 GIS
手把手教你制作地理信息系统的最终成果是一个 GIS 工程，这里是一个简陋的实现。
WhuRS-武汉大学幸福指数.png
介绍完。
实习报告里还可以加上这个网页截图：
WhuRS-jianshu.png
更多参考资料：
-
更多说明
网友评论