WhuRS 实习报告（Draft by TZX）

2014-12-11 本文已影响170人 dvorak4tzx

0. 写在前面：一点说明

我们做的系统叫

手把手教你制作自己的地理信息系统

教你一点点开始，利用高德地图的 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
覆盖物图层
- 图片覆盖物
- 点标记
  - 点标记的动画效果
  - 点标记拖拽效果、文字提示
- 点聚合显示
地物点搜索
- Keyword Inquery

这个网页连带 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”了吗？），这里是截图：