基于OpenLayer完成GIS一张图的开发

使用OpenLayer API

OpenLayer官网上给出了具体的使用教程，还包括非常多的示例，可以根据这些示例来进行开发出一些简单的demo，由简入深。

官网上给出了两种调用OPenLayer API的方法：

第一种：

在html的头部里插入这两行代码：

<script src="https://cdn.jsdelivr.net/npm/ol@v7.1.0/dist/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v7.1.0/ol.css">

里面的@v7.1.0代表的是所使用的OpenLayer版本，如果不想使用最新的版本，也可以对其修改。

第二种：

下载官网上提供的ZIP文件，解压后找到ol.css文件和ol.js文件，在调用时html头部的代码改为：

<script src="ol.js文件路径"></script>
<link rel="stylesheet" href="ol.css文件路径">

OpenLayer的基本组成：
Openlayer将抽象事物具体化为类，其核心类是Map、Layer、Source、view，
几乎所有动作都是围绕这些核心展开，从而实现地图加载和相关操作。
1.Map（地图），对应的类是 ol.Map:是Openlayer的核心部件
它被呈现到对象target容器，所有地图的属性可以在构造时进行配置。

2.View（视图），对应的类是 ol.view：负责地图的中心点，放大，投影之类的设置
一个 ol.View 实例包含投影 projection，
该投影决定中心center的坐标系以及分辨率的单位
zoom是用来指定地图的分辨率的，可用的缩放级别由maxzoom（默认值28）、
zoomFactor（默认值2）、maxResolution决定；
起始缩放级别为0，以每像素maxResolution的单位为分辨率，
直到缩放级别达到maxZoom。

3.Source（数据源），对应的类是 ol.Source:
OpenLayers使用ol.source.Source 子类获取远程数据图层，
包含免费的和商业的地图瓦片服务，
如 OpenStreetMap、Bing、OGC 资源（WMS 与 WMTS）、矢量数据

4.Layer（图层）， 图层是资源中数据的可视化显示，
OpenLayers 包含几种基本图层类型：
ol.layer.Tile ：用于显示瓦片资源，这些瓦片提供了预渲染，并且由特定分辨率的缩放级别组织的瓦片图片网格组成。
ol.layer.Image： 用于显示支持渲染服务的图片，这些图片可用于任意范围和分辨率。
ol.layer.Vector ：用于显示在客户端渲染的矢量数据。
ol.layer.VectorTile： 用于显示在客户端渲染的矢量瓦片数据。
ol.layer.WebGLTile ：用于提供预渲染、平铺的瓦片图像，按特定分辨率的缩放级别组织。

5.Control（控件），为用户提供了和地图交互的入口，针对不同的用途，
具有不同的控件。其实现类都放在包ol.control下面

6.Interaction（交互），主要的作用是能实现直接用鼠标控制地图的放大、
缩小、移动等操作。

OpenLayers 中的控件：都继承了ol.control.Control

1.归属控件（Attribution）
用于展示地图资源的版权或者归属，它会默认加入到地图中。
对应的是：ol.Control.Attribution

2.全屏控件（FullScreen）
控制地图全屏展示
对应的是ol.control.FullScreen

3.坐标拾取控件（MousePosition）
用于在地图上拾取坐标
对应的是ol.control.OverviewMap

4.鹰眼控件（OverviewMap）
生成地图的一个概览图
对应的是ol.control.OverviewMap

5.旋转控件（Rotate）
用于鼠标拖拽旋转地图，它会默认加入到地图中
ol.control.Rotate

6.比例尺控件（ScaleLine）
用于生成地图比例尺
对应的是ol.control.ScaleLine

7.滑块缩放控件（ZoomSlider）
以滑块的形式缩放地图
对应的是ol.control.ZoomSlider

8.缩放至特定位置控件（ZoomToExtent）
用于将地图视图缩放至特定位置
对应的是ol.control.ZoomToExtent

9.普通缩放控件（Zoom）
普通缩放控件，它会默认加入到地图中
对应的是ol.Control.Zoom

如图，我添加了鹰眼控件、比例尺控件、全屏控件，至于缩放控件，一般来说，OpenLayer里会默认包含，可以在ol.css 文件中修改这些控件的样式，添加控件的代码：

  controls: ol.control.defaults().extend([  //滑块缩放控件
                new ol.control.OverviewMap({
                    collapsed: false
                }),  //鹰眼控件
                new ol.control.ZoomToExtent({
                    extent:[
                        13378313.1127,3409646.9258,
                        13394078.2497,3417424.3934
                    ]
                }),
                new ol.control.ScaleLine(), //比例尺控件
                new ol.control.FullScreen(),  //全屏控件
                new ol.control.Rotate(), //旋转控件
                new ol.control.MousePosition({
                    coordinateFormat: ol.coordinate.createStringXY(4),// 坐标格式，保留4位小数，不写则默认保留到整数
                    projection: 'EPSG: 4326', // 地图投影坐标系
                    className: 'custom-mouse-position', // 自定义显示样式
                    target: document.getElementById('mouse-position'),
                })
            ])

其中，

  new ol.control.ZoomToExtent({
                    extent:[
                        13378313.1127,3409646.9258,
                        13394078.2497,3417424.3934
                    ]
                }),

这里是添加的导航控件，给定一个范围，一般是视图位置的[左下，右上]的位置坐标，不管地图显示在何处，点击导航控件后都会定位到这个范围中。

演示：

添加第三方地图图层：在这里我使用的是用GeoServer所发布的地图服务，如下图所示：

加载第三方标准图层代码：

  var map = new ol.Map({
            target:'map', //关联到对应的div容器
            layers:[
            new ol.layer.Tile({                 /* 街道图 */
                    source: new ol.source.OSM()     
                }), 
      
               //叠加geoserverWMS图层
                new ol.layer.Tile({  /* 片区 */
                    source: new ol.source.TileWMS({
                        url: "这里插入GeoServer图层链接"
                    }),
                    visible: false                 //先隐藏该图层
                }),
                new ol.layer.Tile({  /* 支流断面 */
                    source: new ol.source.TileWMS({
                        url: "这里插入GeoServer图层链接"
                    }),
                    visible: false                 //先隐藏该图层
                }),
                new ol.layer.Tile({/* 水体 */
                    source: new ol.source.TileWMS({
                        url: "这里插入GeoServer图层链接"
                    }),
                    visible: false                 //先隐藏该图层
                }),
            ],
            view: new ol.View({
                center:[13386998.27,3413268.13],
                zoom:13
            }),

红线圈出来的就是要插入的geoserver图层链接

1.安装注意事项
下载并且安装GeoServer，这个网上有许多的教程，需要注意的一点是，安装的JDK版本最好选择JDK8或JDK11。之前我装JDK18这个版本，安装GeoServer后虽然能运行，但是发布地图数据后，发布的地图数据在网页上显示不了，而且GeoServer服务器状态一直显示报错，后来才发现是安装的GeoServer版本与安装的JDK版本不匹配导致的，所以最好还是安装JDK8或者JDK11。

2.发布地图服务的步骤：
（1）创建新的工作空间

注意命名时不能以数字开头，否则会显示创建失败
创建工作空间后，点击保存。

（2）添加新的存储仓库

点击 浏览 输入.shp 文件的路径
需要注意的是，下面的“DBF文件的字符集”，如果.shp文件里存在中文的话，就需要选择以下的选项：

或者选择UTF-8。
添加后，点击保存。

（3）查看发布的图层

（4）预览图层

点击左边的图层预览，选择想要预览的图层，选择OpenLayer方式

这就代表着使用GeoServer发布地图服务已经成功，上图划红线的就是插入在代码中的URL。

有时候需要在地图中切换图层，图层较多的情况下，可以创建一个下拉菜单，如下图：

下拉菜单CSS代码：

/* 图层管理下拉菜单 */
        .dropbtn {
            position: absolute;
            left: 1120px;
            top: auto;
            min-width: 160px;
            max-height: 50px;
            background-color: #7b98bc;
            opacity: 0.7;
            color: white;
            font-size: 16px;
            border: none;
            cursor: pointer;
            z-index: 1;
        }
        /* 容器 <div> - 需要放置下拉内容 */
            .dropdown {
                position: absolute;
                display: inline-block;
            }
            /* 下拉内容（默认隐藏） */
            .dropdown-content {
                display: none;
                color: #fff;
                position: absolute;
                left: 1120px;
                top: 23px;
                background-color: #7b98bc;
                opacity: 0.7;
                min-width: 160px;
                z-index: 1;
            }
            /* 下拉链接 */
            .dropdown-content a {
                color: black;
                padding: 12px 16px;
                text-decoration: none;
                display: block;
            }

            /* 悬停时更改下拉链接的颜色 */
            .dropdown-content a:hover {background-color: #3b6cd1}
            .dropdown-content a{ /* 下拉内容框样式 */
              padding: 1px 4px;
              text-decoration: none;
              display: block;
              font-size: 0.8rem;
              color: #fff;
            }

            /* 悬停时显示下拉菜单 */
            .dropdown:hover .dropdown-content {
                display: block;
            }

            /* 显示下拉内容时，更改下拉按钮的背景颜色 */
            .dropdown:hover .dropbtn {
                background-color: #3b6cd1;
            }

            .btn-primary{
                position: absolute;
                top: 115px;
                left: 10px;
                display: block;
                margin: 1px;
                padding: 0;
                color: #fff;
                font-weight: 700;
                text-decoration: none;
                font-size: inherit;
                text-align: center;
                height: 1.375em;
                width: 1.375em;
                line-height: .4em;
                background-color: #7b98bc;
                border: none;
                border-radius: 2px;
                z-index: 1;
            }
            .dropdown-menu{
              position: absolute;
              display: none;
              min-width: 8rem;
              padding: 1px 1px;
              margin: 0;
              font-size: 0.3rem;
              text-align: left;
              list-style: none;
              background-color: #4c5c6c;
              background-clip: content-box;
              border: 1px solid rgba(0, 0, 0, 0.15);
              border-radius: 0.25rem;
              opacity: 0.9;
              z-index: 1000;
            }
            .btn-primary:hover{
                color: #fff;
                background-color: rgba(0,60,136,.7);
            }
            .popover-body{
                padding: 2rem 2rem;
                color: #000;
            }

html代码：

  <div class="dropdown">
        <button class="dropbtn">图层管理</button>
        <div class="dropdown-content">
            <div id="layerControlss" >
                <a>
                    <input type="checkbox" id="***" />
                    <label for="***">图层名字</label>
                </a>

                <a>
                    <input type="checkbox" id="***" />
                    <label for="***">图层名字</label>          
                </a>

                <a>
                    <input type="checkbox" id="" />
                    <label for="***">图层名字</label>
                </a>

                <a>
                    <input type="checkbox" id="" />
                    <label for="***">图层名字</label>
                </a>
                <a>
                    <input type="checkbox" id="" />
                    <label for="***">图层名字</label>
                </a>
            </div> 
        </div>
    </div>

ArcGIS是Esri公司集40余年地理信息系统（GIS）咨询和研发经验，奉献给用户的一套完整的GIS平台产品，具有强大的地图制作、空间数据管理、空间分析、空间信息整合、发布与共享的能力。ArcGIS Pro 是在桌面上创建和处理空间数据的基本应用程序。它提供用于在 2D 和 3D 环境中显示、分析、编译和共享数据的工具。

在ArcGiS中打开dwg文件：

选择需要转换的图层文件，导出数据：

选择保存的类型为shapefile，点击保存：

然后就生成了.shp文件：

查看图层属性：

转换坐标系，打开ArToolBoox，=>数据管理工具 => 投影和变换 => 定义投影，输入数据集，选择好要投影的坐标系，点击确定：

查看属性，转换成功：

OpenLayer中提供的控件有时候并不能满足一些业务的需求，我们可以对其进行修改，或者自己创造一些控件放置在地图上，比如

右下角的是一个展示相关图层信息的控件，左边有切换图层和测量工具的控件。

我本身的专业并不是与GIS有关，但是在这一段学习GIS的过程中，我感觉GIS学起来还是挺有意思的，对于开发GIS一张图，目前总结的东西只有这么多，以我个人来看，以上都是初学者在学习开发GIS一张图的过程中可能会碰到的问题。
有问题就需要查资料，很感谢这个平台里的一些大佬写的文章，对我有很大的帮助！

OpenLayer 3 教程
WebGIS教程
前端学习
Leaflet
OpenLayer加载天地图在线瓦片
Bootstrap
使用GeoServer发布WMS服务