《网络GIS设计与实现》课程大作业报告
2019-2020学年第2学期
专业：
班级：
姓名：
学号：
指导教师：
二零二零年六月
一、解题思路
（1）放大、缩小、漫游、控件加载（鹰眼图、比例尺、缩放按钮）；
（2）多图层加载、多图层切换显示，其中，要加载显示的图层包括但不限于谷歌地图、OSM地图、GeoJSON矢量数据等。
（3）左右地图双窗口联动显示：开发功能按钮，控制右边地图窗口的显示与关闭。
（4）图像绘制功能，要求实现点、线、面（矩形、多边形、圆形）等不同图形的绘制。
（5）对于面要素图形的绘制，要求能够编写样式设置面板（开发功能按钮，控制该面板的显示与关闭），自定义地设置边框的颜色、宽度，以及填充颜色。
二、实验代码
1.界面HTML结构布局
界面布局采用DIV盒模型布局，利用HTML进行结构控制，JavaScript实现页面自适应，工具条、图层控制及样式面板以Position：absoluted绝对定位的方式显示在界面上，默认隐藏状态，点击工具条可进行控制显示。
2.功能JavaScript实现：
(1)地图联动自适应与浏览器界面自适应功能实现：
通过获取浏览器的宽高大小，利用jQuery选择器对CSS样式进行控制，监听浏览器尺寸改变，实现容器随浏览器及联动地图的变化而改变。
(2)地图加载及联动：
地图采用EPSG：4326坐标系，坐标中心[118，39]，缩放级别6级，通
过定义相同的View实现地图联动交互，图层加载通过https://www.doczj.com/doc/834757794.html,yer。Tile的方式调用在线地图，代码如下图。
(3)实例化地图基本空间，如鹰眼、比例尺等。
(4)放大、缩小、漫游功能实现：
通过View的缩放级别Zoom控制实现放大缩小，漫游需要改变鼠标样式。
(5)图形绘功能、停止绘制、清除图层功能实现：
通过参数传递到Draw函数中，实现不同选择绘制不同的图形，并添加监听事件，停止绘制时只需要移除监听事件，清除图层需要将矢量图层的源Source置空。
(6)图层控制功能实现:
通过获取图层的name属性，利用Javascript动态控制Html生成图层切换面板。
(7)样式面板功能实现：
利用JQuery选择器监听按钮状态，当按钮被选中时，JQuery获取按钮value值下面的颜色信息，并将参数传递给getstyle()自定义函数进行颜色、边界，透明度等参数信息的修改。
(8)各控件的显示与隐藏功能实现：
JQuery自带函数Toggle(),hide(),show()。
3.界面样式布局:
界面顶部包括系统名称、个人信息等。
工具栏位于地图区域右上角，分别包括：漫游，放大，缩小，绘制图形，停止绘制，清除图层，图层控制，地图联动，样式绘制，全屏等十项功能。
其中图层控制与样式面板默认隐藏，可通过工具栏按钮打开。双窗口的地图联动默认为打开状态，可通过工具栏按钮关闭。
CSS样式代码如下：
1.地图界面：
2.地图联动关闭及自适应：
3.绘制矢量图层：
4.样式修改：
5.图层切换：
四、心得总结
在完成大作业的过程中，一方面是考验对HTML+CSS+JavaScript的理解与使用，另一方面是考察对OpenLayers3的考察与使用，在进行代码编写的过程中，我觉得有以下几个问题需要加强与注意：
（1）工具栏的样式编写，虽然工具栏只占地图内容的很小一块区域，但是我认为在工具栏的编写中是最考察HTML+CSS+JavaScript的组合使用的，一方面需要我们引用小图标对应每个控件，并进行样式编写，另一方面每个控件又需要利用JavaScript进行功能的绑定，所以工具栏上所使用的精力应该是最多的。（2）样式修改：矢量图层的样式是通过ol.style接口实现的，在其中又包括了填充样式，边界样式等多种属性，我们对样式修改的原理，实际上是通过变量赋值来控制样式，利用函数将值返回给每个需要进行样式修改的地方，但是颜色设计多种多样，我们不可能很清楚的了解每个颜色的对应代码，因此我基于color_exchange.js插件，引入的颜色选择器，对不同的样式进行赋值选择，最终实现自定义样式的修改。