OpenLayers 3自定义地图工具条（一）

最新推荐文章于 2024-08-08 16:17:32 发布

AG2016

最新推荐文章于 2024-08-08 16:17:32 发布

阅读量8.4k

点赞数 6

分类专栏： GIS OpenLayers3 文章标签：地图 Oplenayers 地图工具条地理定位

本文链接：https://blog.csdn.net/wan320/article/details/50789072

版权

本文介绍了如何使用OpenLayers 3创建一个符合项目需求的自定义地图工具条，包括全屏、缩放、全图、标绘、地理定位和地图切换等功能，并展示了最终的工具条效果图。通过构建HTML元素、设置CSS样式以及实现各项功能，为WEB地图应用提供更个性化的用户体验。

摘要由CSDN通过智能技术生成

对于一个WEB地图应用来说，地图工具条可以说是不可或缺的一个部分，但由于一些样式、功能往往并不能满足实际项目需要，所以仍要对此部分进行定制，从这里将说明如何利用Oplenayers 3根据项目要求做一个定制化的工具条。

1、工具条功能内容内容

全屏、取消全屏
视图放大、缩小
全图【全图范围，初始化地图到默认的层级，以及预先设定的中心点】
地图标绘【点、线、面】
地理定位【省份定位】
地图切换【影像地图、地形地图】

2、最终工具条效果图

效果图

3、具体实现

构建页面HTML元素

<div class="tool-container">
    <div class="t_close"></div>
    <ul>
        <li id="tfullscreen">
            <span class="t_1"></span><i>全屏</i>
        </li>
        <b></b>
        <li id="tfullmap">
            <span class="t_2"></span><i>最大</i>
        </li>
        <b></b>
        <li id="tzoomin">
            <span class="t_3">