开源WebGIS设计与开发教程|自定义控件制作详解

通过前面加载控件的示例，读者对基础功能的实现也已经有了一定的了解，在此基础上，我们可以利用所学的知识做一些自定义控件，这些控件不是OpenLayers中已经封装好的，而是根据功能的需要进行定制。有了前面的基础，自定义控件也就很简单。自定义控件的制作总体可以分两步进行，第一步是构建自定义控件的基础界面与样式等，第二步则是利用代码实现对应的功能。接下来，本书将通过两个例子分别展示自定义控件的制作。首先，第一个例子自定义制作了一个地图位置共享的控件，如图5-9所示。

图5-9　自定义控件

主要步骤如下所示。

(1)新建一个customControl.html页面，并参照地图显示功能的方法加载OSM瓦片数据。

(2)实例化一个viewport节点，在该节点下添加一个共享按钮，并编写其执行操作的相关函数。在此需要注意的是我们为了实现该功能需要在head标签中添加一个js开发库:＜script src＝"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"type＝"text/javascript"＞＜/script＞。

(3)最后通过执行函数进行相关功能的实现。

核心代码如下:

【说明】＜style＞标签包含对共享按钮进行样式的设计，包括显示的位置、字体颜色、背景颜色以及鼠标移至该按钮上时的样式。

需要注意的是，与之前稍有不同的是，本例需要在head标签中引入新的开发库jquery.min.js，在style标签中定义了自定义控件的位置、背景颜色、字体颜色等属性样式，并在script中通过引用＄开发库对自定义的控件进行定义，最后通过以下代码实现相应的功能事件:

(www.xing528.com)

另外一种自定义空间的方式则不需要引入新的开发库，结果如图5-10所示。

主要步骤如下所示。

(1)新建一个customControl.html页面，并参照地图显示功能的方法加载OSM瓦片数据。

(2)定义一个layerMapServer变量，用来存放MapServer数据，并设置其相关的属性。

(3)最后通过load()函数进行相关功能的实现。

样式表核心代码如下:

图5-10　自定义控件

【说明】＜style＞标签中包含对按钮的显示位置、大小、颜色以及外观等样式进行设计。在已经加载完OSM地图的基础上，本例创建了一个button按钮作为自定义控件的容器，要实现的功能是点击该按钮，则可在OSM地图上加载MapServer地图，具体代码如下:

【说明】该代码的作用是实例化MapServer地图对象，最后通过load()函数加载该对象。对map类的方法有不懂的地方请自行查阅相关API文档，读者结合代码注释基本上就能很好地理解代码的含义。