webgis前端控件编程

webgis前端控件编程

    • 导航控件
    • 比例尺
    • 版权控件
    • 图层管理控件

导航控件

导航控件主要用于恢复地图的视图状态。下面以封装好的导航控件插件为例,实现导航控件的加载显示,插件下载地址为https://github.com/davidchouse/Leaflet.NavBar。
本实例在天地图地图的基础上,通过插件封装的L.Control.Navbar类来构造一个导航控件,并加载到地图中显示。其中,控件中的“左箭头”表示返回上一次的视图状态,“右箭头”表示返回下一次的视图状态,“Home”键表示直接返回最初始的视图状态。主要实现步骤如下。
(1)新建一个HTML页面,加载一幅天地图地图作为底图。
(2)在区域添加Leaflet.NavBar.css样式表和Leaflet.NavBar.js脚本库。
(3)在加载地图的init()函数中,初始化NavBar控件,并通过Map的addControl()方法将其加载到地图容器中。
代码如下:
webgis前端控件编程_第1张图片

比例尺

是地图中的线段长度与实地相应线段长度之比,它表示地图图形的缩小程度,又被称为缩尺。Leaflet开发库提供的比例尺控件为L.Control.Scale。
本实例在天地图地图的基础上,加载Leaflet开发库中的比例尺控件,主要实现步骤如下。
(1)新建一个HTML页面,参照2.4.2节加载一幅天地图地图作为底图。
(2)在加载地图的init()函数中,初始化Scale控件,并通过Map的addControl()方法将其加载到地图容器中。
代码如下:
在这里插入图片描述

版权控件

版权控件用于显示当前地图的版权归属。地图版权的字样通常显示在地图的底部,清晰直观地展示该地图的归属单位。Leaflet开发库提供的版权控件为L.Control.Attribution,基于Leaflet开发库调用地图,地图右下角会默认显示一个版权控件。如果想要隐藏版权控件,则在Map容器中增加属性设置attributionControl:false即可。另外,用户可以通过图层的attribution属性自定义设置地图的版权显示内容。
本实例在天地图地图的基础上,加载Leaflet开发库中的版权控件,主要实现步骤如下。
(1)新建一个HTML页面,参照2.4.2节加载一幅天地图地图作为底图。
(2)在图层中设置attribution属性,自定义地图的版权显示内容。
代码如下:webgis前端控件编程_第2张图片
鹰眼控件
地图鹰眼又被称为地图的鸟瞰图或缩略图。在电子地图中鹰眼的功能很强大,通过鹰眼可以知道地图的当前位置;也可以在鹰眼上单击、拖动或移动到想要查看的位置。鹰眼的可视范围比主图的可视范围大,鹰眼中心框的可视范围就是主图的可视范围。鹰眼地图的可视范围广阔,可以看到当前主图周边概况。
下面以封装好的鹰眼控件插件为例,实现鹰眼控件的加载显示,插件下载地址为https://github.com/Norkart/Leaflet-MiniMap。
在天地图地图的基础上,通过插件封装的L.Control.MiniMap类来构造一个鹰眼控件,加载到地图中显示,主要实现步骤如下。
(1)新建一个HTML页面,参照2.4.2节加载一幅天地图地图作为底图。
(2)定义一个瓦片图层,用于在鹰眼控件中显示。
(3)在加载地图的init()函数中,初始化MiniMap控件,并通过addControl()方法将其加载到地图容器
在这里插入图片描述
webgis前端控件编程_第3张图片

图层管理控件

图层管理控件,即对地图容器中加载的图层以列表形式显示,并提供显示控制的功能,便于用户查看和操作。Leaflet开发库提供的图层管理控件为L.Control.Layers。
本实例在天地图地图的基础上,加载Leaflet开发库中的图层管理控件,用户可以在天地图矢量图层和天地图影像图层之间进行切换,主要实现步骤如下。
(1)新建一个HTML页面,参照2.4.2节加载一幅天地图地图作为底图。
(2)分别创建天地图矢量图层和天地图影像图层,并通过L.LayerGroup构建图层组。
(3)在加载地图的init()函数中,初始化Layers控件,并将其加载到地图容器中。
代码如下:
webgis前端控件编程_第4张图片
全屏显示控件
全屏显示控件可以控制当前地图显示为全屏状态。下面以封装好的全屏显示控件插件为例,实现全屏显示控件的加载显示,插件下载地址为https://github.com/Leaflet/Leaflet.fullscreen。
本实例在天地图地图的基础上,通过插件封装的L.Control.Fullscreen类来加载一个全屏显示控件。单击全屏显示控件,即可实现地图的全屏显示效果,按下Esc键则可退出全屏显示,主要实现步骤如下:
(1)新建一个HTML页面,天地图地图作为底图。
(2)在区域中添加leaflet.fullscreen.css样式表和leaflet.fullscreen.js脚本库。
(3)在加载地图的init()函数中,初始化Fullscreen控件,并通过Map的adaddControl()方法将其加载到地图容器中。

webgis前端控件编程_第5张图片
测量控件
测量功能包括距离(长度)测量和面积测量。距离测量功能用于计算鼠标绘制线条的实际长度;面积测量功能用于计算鼠标绘制范围的实际面积大小。
下面以封装好的测量控件插件为例(插件下载地址为https://github.com/ljagis/leaflet-measure),通过在Map对象中添加“键-值”对“measureControl:true”来加载测量控件,主要实现步骤如下。
(1)新建一个HTML页面,加载一幅天地图地图作为底图。
(2)在区域中添加leaflet-measure.css样式表和leaflet-measure.js脚本库。
(3)在定义Map容器时设置measureControl的属性值为true。
代码如下:
webgis前端控件编程_第6张图片

你可能感兴趣的:(webgis,前端)