WebGIS开发系列教程（3）：Openlayers快速入门

于 2024-09-13 10:30:00 发布
阅读量978 收藏 15
点赞数 19
文章标签： 前端 webgis javascript GIS开发 arcgis
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_78220461/article/details/142133949
版权

本系列教程为webgis二维开发入门openlayers零基础小白学习教程，本篇为第三篇。

完整版可以滑到文末链接下载。

上一篇：

下一篇：

1.环境搭建

(1)初始化springboot项目

导入web启动器和thymeleaf模板

(2)项目结构

2.地图显示

使用Openlayers加载天地图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>使用openlayers调用天地图</title>
    <!--引入openlayers的css文件和js文件-->
    <link rel="stylesheet" href="css/ol.css" />
    <script src="js/ol.js"></script>
    <style type="text/css">
        #mapCon {
            width: 100%;
            height: 95%;
            position: absolute;
        }
    </style>
</head>
<body>
<div id="mapCon">
</div>
<script type="text/javascript">
    "use strict";
    //实例化map对象加载地图
    var map = new ol.Map({
        //地图容器div的id
        target: 'mapCon',
        //地图容器中加载的图层
        layers: [
            //加载瓦片图层数据
            new ol.layer.Tile({
                title: "天地图矢量图层",
                source: new ol.source.XYZ({
                    url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=b74ca9a5dbd96fab6338ab9d239180fb",
                    wrapX: false
                })
            }),
            new ol.layer.Tile({
                title: "天地图矢量图层注记",
                source: new ol.source.XYZ({
                    url: "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=b74ca9a5dbd96fab6338ab9d239180fb",
                    wrapX: false
                })
            })
        ],
        //地图视图设置
        view: new ol.View({
            //地图初始中心点
            center: [0, 0],
            //地图初始显示级别
            zoom: 3,
            //参考系设置
            projection: "EPSG:4326"
        })
    });
</script>
</body>
</html>

实现思路：

创建一个地图容器对象ol.Map，通过target参数关联到地图容器(ID为mapCon的div层)，通过layers参数设置加载瓦片图层(ol.layer.Tile)，绑定数据源(ol.source.XYZ)，然后通过ol.View设置地图视图

也可以通过以下方法动态添加和移除图层：

  • 添加指定图层：map.addLayer(layer)；

  • 移除指定图层：map.removeLayer(layer)；

写一个简单controller和<a>链接跳转即可

效果：

3.导航控件

控件总述：每一个地图应用系统中都应该有一些工具来方便用户控制地图的操作，如：缩放、全屏显示、坐标显示等工具，这些工具就是地图控件。openlayers5封装了很多常用的地图控件，如地图导航、鹰眼、比例尺、鼠标位置等，这些控件是基于ol.controls.Control基类进行封装的，即ol.control.Control的子类为各类常用的地图功能控件，可以通过map对象的controls参数设置，或者调用map的addControl方法添加到地图窗口中。

地图控件是基于HTML元素实现的，每个控件都可以作为一个DOM元素显示在屏幕中的某个位置，可以通过css自定义控件的样式。

openlayers5的地图容器通过ol.control.defaults默认加载3个常用的控件，缩放控件(ol.control.Zoom)、旋转控件(ol.control.Rotate)、图层数据源属性控件(ol.control.Attribution)

导航控件：Openlayers5提供的地图导航控件包括：地图缩放控件(ol.control.Zoom)，缩放滑块(ol.control.ZoomSlider)，按钮式缩放到特定范围的控件(ol.control.ZoomToExtent)，最常用的就i是缩放控件和缩放滑块结合使用

核心代码：

//实例化ZoomSlider控件(缩放滑块控件)并加载到地图容器中
    var zoomslider = new ol.control.ZoomSlider();
    map.addControl(zoomslider);
    //实例化zoomToExtent控件并加载到地图容器中（按钮式缩放到指定范围控件）
    var zoomToExtent = new ol.control.ZoomToExtent({
        extent: [
            93.7598, 52.1387,
            129.9707, 68.3691
        ]
    });
    map.addControl(zoomToExtent);   //通过map.addControl(control);方法动态添加控件

效果：

4.地图基本操作控件

地图基本操作是指用户与地图的简单交互，主要包括地图放大、缩小、移动、复位和更新等，其核心方法就是操作地图视图View类，通过View中各个属性的get()，set()方法即可实现。

思路：在地图容器的div层中分别添加4个按钮(button)，设置按钮的ID值，然后为这些按钮添加相应的单击函数，在函数中调用openlayers中地图视图View类的相应方法，分别实现单击放大、单击缩小、移动到某一位置及复位功能。

核心代码：

<div class="ToolLib">
    <input type="button" class="ButtonLib" id="zoom-out" value="单击缩小" />
    <input type="button" class="ButtonLib" id="zoom-in" value="单击放大" />
    <input type="button" class="ButtonLib" id="panto" value="平移到【中国】" />
    <input type="button" class="ButtonLib" id="restore" value="复位" />
</div>
//地图视图设置    初始地图中View的各个属性
        view: new ol.View({
            //地图初始中心点
            center: [0, 0],
            //地图初始显示级别
            zoom: 3,
            mixZoom:1, //缩放的最小级别
            maxZoom:12, //缩放的最大级别
            rotation:Math.PI/6,  //顺时针旋转30度
            //参考系设置
            //projection: "EPSG:4326"
        })
//单击缩小按钮功能
 //地图视图的初始参数
    var view = map.getView();
    var zoom = view.getZoom();
    var center = view.getCenter();
    var rotation = view.getRotation();
    document.getElementById('zoom-out').onclick = function () {
        //获取地图视图
        var view = map.getView();
        //获得当前缩放级数
        var zoom = view.getZoom();
        //地图缩小一级
        view.setZoom(zoom - 1);
    };
//单击放大按钮功能
    document.getElementById('zoom-in').onclick = function () {
        //获取地图视图
        var view = map.getView();
        //获得当前缩放级数
        var zoom = view.getZoom();
        view.setZoom(zoom + 1);
        //地图放大一级
    };
//平移功能（移到到武汉市）
    document.getElementById('panto').onclick = function () {
        //获取地图视图
        var view = map.getView();
        var wh = ol.proj.fromLonLat([105.0098,35.6543]);
        //平移地图
        view.setCenter(wh);
        view.setZoom(5);
    };
//复位功能（复位到初始状态）
    document.getElementById('restore').onclick = function () {
        //初始中心点
        view.setCenter(center);
        //初始旋转角度
        view.setRotation(rotation);
        //初始缩放级数
        view.setZoom(zoom);
    };

效果：

5.鼠标位置控件

鼠标位置控件(ol.control.MousePosition)时用来显示当前地图容器中鼠标焦点的空间坐标点的坐标值。

思路：在地图容器对应的div层中新建一个显示鼠标位置的div层，即ID为mouse-position的div层，并将z-index显示在地图上

核心代码：

<div id="mapCon">
    <div id="mouse-position"><!--鼠标位置控件的容器，即所处的位置-->
    </div>
</div>
//实例化鼠标位置控件（MousePosition）
    var mousePositionControl = new ol.control.MousePosition({
        //坐标格式,将坐标保留4位小数位，并转换位字符串形式
        coordinateFormat: ol.coordinate.createStringXY(4),
        //地图投影坐标系（若未设置则输出为默认投影坐标系下的坐标）
        projection: 'EPSG:4326',
        //坐标信息显示样式类名，默认是'ol-mouse-position'
        className: 'custom-mouse-position',
        //显示鼠标位置信息的目标容器
        target: document.getElementById('mouse-position'),
        //未定义坐标的标记   显示空格
        undefinedHTML: '&nbsp;'
    });
将鼠标位置控件通过map的controls属性添加到地图容器

//加载控件到地图容器中
        controls: ol.control.defaults({//地图中默认控件
            /* @type {ol.control.Attribution} */
            attributionOptions: ({
                //地图数据源信息控件是否可收缩,默认为true
                collapsible: true
            })
        }).extend([mousePositionControl])//加载鼠标位置控件

效果：

6.比例尺控件

比例尺表示图上距离比实际距离的缩小(或放大程度)，又称为缩尺，比例尺控件位ol.control.ScaleLine，默认显示在地图的左下角

思路：实例化比例尺控件ol.control.ScaleLine，根据需求设置相应参数，然后在map容器中通过controls属性加载比例尺控件

核心代码：

//实例化比例尺控件（ScaleLine）
    var scaleLineControl = new ol.control.ScaleLine({
        //设置比例尺单位，degrees、imperial、us、nautical、metric（度量单位）
        units: "metric"
    });
通过map容器的controls属性加载比例尺控件

//加载比例尺控件
        controls: ol.control.defaults().extend([scaleLineControl])

效果：

7. 鹰眼控件

地图鹰眼俗称地图的鸟瞰图或缩略图，对应控件为ol.control.OverviewMap

思路：实例化一个鹰眼控件ol.control.OverviewMap，可以采用默认参数，也可以根据根据应用需求设置其参数，然后通过map的controls参数加载控件，也可以调用map对象的addControl方法加载此控件。

核心代码：

//实例化鹰眼控件（OverviewMap）,自定义样式的鹰眼控件
var overviewMapControl = new ol.control.OverviewMap({
    //鹰眼中加载图层，可以与主地图相同，也可以不同
    layers: [
        new ol.layer.Tile({
            title: "天地图矢量图层",
            source: new ol.source.XYZ({
                url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=b74ca9a5dbd96fab6338ab9d239180fb",
                wrapX: false
            })
        }),
        new ol.layer.Tile({
            title: "天地图矢量图层注记",
            source: new ol.source.XYZ({
                url: "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=b74ca9a5dbd96fab6338ab9d239180fb",
                wrapX: false
            })
        })
    ],
    //鹰眼控件展开时功能按钮上的标识（网页的JS的字符编码）
    collapseLabel: '\u00BB',
    //鹰眼控件折叠时功能按钮上的标识（网页的JS的字符编码）
    label: '\u00AB',
    //初始为展开显示方式
    collapsed: false,
  //鹰眼中视图的设置
    view: new ol.View({
        //地图初始中心点
        center: [0, 0],
        //地图初始显示级别
        zoom: 1,
        //参考系设置
        projection: "EPSG:4326"
    })
});
★注意：一定要在鹰眼控件中设置View属性

在map中加载鹰眼控件

//加载鹰眼控件
        controls: ol.control.defaults().extend([overviewMapControl])

效果：

8.全屏显示控件

全屏显示控件用于将视图内容放大到全屏显示，可扩大视野范围，便于更好地进行操作，全屏显示控件为ol.control.FullScreen.

思路：

实例化一个全屏显示控件，然后通过map的controls参数或者addControl()方法加载到地图容器中

核心代码：

controls: ol.control.defaults().extend([
            new ol.control.FullScreen()  //加载全屏显示控件（目前支持非IE内核浏览器）
        ])

效果：

9.图层控件

在实际应用中，通常需要将地图容器中加载的图层以列表的形式显示，便于用户查看与操作，Openlayers5封装的控件中并没有提供类似的图层控件，需要自定义实现图层列表功能。

本例中使用列表(ul和li)显示图层名称，并采用复选框控制图层的显示。其中，通过调用图层对象(Layer对象)的get方法获取初始化设置的图层名属性，调用getVisible和setVisible方法控制图层显示。

<div id="mapCon">
    <div id="mouse-position"></div>
    <div id="layerControl" class="layerControl"><!--图层列表容器-->
        <div class="title"><label>图层列表</label></div><!--图层列表的标题-->
        <ul id="layerTree" class="layerTree"></ul><!--图层列表-->
    </div>
</div>

代码说明：

创建一个ID为layerControl的div层作为图层列表容器，其中通过z-index设置让其显示到地图上层；同时在该图层列表容器中新建一个列表(ID为layerTree的ul)来保存从地图容器中读取的图层。图层列表中的列表项li由脚本程序动态创建。

加载图层列表的脚本代码：

	//map中的图层数组
	var layer = new Array();
    //图层名称数组
    var layerName = new Array();
    //图层可见属性数组
    var layerVisibility = new Array();

    /**
     * 加载图层列表数据
     * @param {ol.Map} map 地图对象
     * @param {string} id 图层列表容器ID
     */
    function loadLayersControl(map, id) {
        //图层目录容器
        var treeContent = document.getElementById(id);
        //获取地图中所有图层
        var layers = map.getLayers();
        for (var i = 0; i < layers.getLength() ; i++) {
            //获取每个图层的名称、是否可见属性
            layer[i] = layers.item(i);
            layerName[i] = layer[i].get('name');
            layerVisibility[i] = layer[i].getVisible();
            //新增li元素，用来承载图层项
            var elementLi = document.createElement('li');
            // 添加子节点
            treeContent.appendChild(elementLi);
            //创建复选框元素
            var elementInput = document.createElement('input');
            elementInput.type = "checkbox";
            elementInput.name = "layers";
            elementLi.appendChild(elementInput);
            //创建label元素
            var elementLable = document.createElement('label');
            elementLable.className = "layer";
            //设置图层名称
            setInnerText(elementLable, layerName[i]);
            elementLi.appendChild(elementLable);
            //设置图层默认显示状态
            if (layerVisibility[i]) {
                elementInput.checked = true;
            }
            //为checkbox添加变更事件
            addChangeEvent(elementInput, layer[i]);
        }
    }
    /**
     * 为checkbox元素绑定变更事件
     * @param {input} element checkbox元素
     * @param {ol.layer.Layer} layer 图层对象
     */
    function addChangeEvent(element, layer) {
        element.onclick = function () {
            if (element.checked) {
                //显示图层
                layer.setVisible(true);
            }
            else {
                //不显示图层
                layer.setVisible(false);
            }
        };
    }
    /**
     * 动态设置元素文本内容（兼容）
     */
    function setInnerText(element, text) {
        if (typeof element.textContent == "string") {
            element.textContent = text;
        } else {
            element.innerText = text;
        }
    }

调用加载图层列表数据的方法

loadLayersControl(map, "layerTree");

效果：

需要的小伙伴可以点这里下载完整版：

https://download.csdn.net/download/2301_78220461/89734486

更多GIS开发学习教程、视频资料等点这里：

免费领取2024最新webgis学习教程

WebGIS开发
关注
【完整的WebGIS教程】2、第一个基于vue的webgis项目
老靳的WebGIS
04-20 1万+
利用vue-cli创建你的第一个WebGIS项目
适合GIS专业学生和前端webgis小白快速上手的Vue+OpenLayers6入门到实战教程，OpenLayers6中文文档手册
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
04-23 1327
Gis开发入门，OpenLayers、Leaflet、Maplibre-gl和Cesiumjs地图引擎介绍以及几种地图服务vms、vmts介绍OpenLayers介绍，相比较其他地图引擎有什么优点OpenLayers7.x版本和6.x版本有什么区别，是否需要升级到OpenLayers7版本？OpenLayers6实战：OpenLayers创建自定义控件，以创建一个地图复位控件为例OpenLayers6实战，OpenLayers创建自定义鹰眼控件，自定义鹰眼控件样式，调整鹰眼控件位置、大小、文字和按钮等样式。
《WebGIS快速开发教程》写好啦
lz5211314121的博客
05-11 1486
内容上从基础的、底层的理论知识到前端的渲染再到服务端的介绍最后到架构上的设计。教会大家入门webgis，以系统化的知识体系作为基础，在这个基础上考虑了学生们没有开发经验的场景，考虑了前后端从业人员对于地理学不熟悉的场景。综合各位的需求，打造的这么一本适合入门和夯实基础的书籍。告诉大家一个好消息，经过我没日没夜，呕心沥血的创作，这本叫做《WebGIS快速开发教程》的书籍终于写好了。这本书适用于还未毕业的学生、以及正在从事传统前后端开发但是想转到WebGIS开发的人。九、GIS数据库基础。
WebGIS开发教程合集
GIS前端嘉欣的博客
09-22 517
持续更新中......（关注我第一时间获取资源）技术面必问内容，重点中的重点！
《WebGIS快速开发教程》第5版“惊喜”更新啦
lz5211314121的博客
12-06 749
1.我们增加了一章——openLayers，是的，我们也开始讲openlayers了，之前一直有小伙伴要求讲一讲ol，因为ol的API相对来说比较难，因此过去的几个版本没有融入ol，但是在长时间的思考之后，在想明白如何才能讲清楚ol之后，第5版我们终于增加了ol的讲解。过去的几个版本关于前端的知识都是建议大家自学，学习别人的前端讲解，但是有小伙伴反应别人的前端讲的很一般听不懂，希望我能补充补充前端的知识。这次的封面我们经过了全新的设计，不同于以往的任何一个版本。6.书籍的整体达到了接近10万字的篇幅。
《WebGIS快速开发教程》第7版发布
最新发布
lz5211314121的博客
07-09 402
拿到新书我们可以看到第7版的整体风格是以“业务场景”为核心，所有讲解的知识点和案例都是围绕着业务场景来进行，很多讲到的内容都是各位在实际开发过程中多多少少会遇到的。书籍获取方式：链接: https://pan.baidu.com/s/1G7evzZ07u70qt2f_DH40yA?可以看到我们在封面上加了“classic”的字样，这意味着第7版将会是经典版本，或者说具有里程碑意义的一个版本。
webgis之OpenLayers地图使用教程合集_极品.zip
01-10
首先，"【图文】openlayers实例 第二十讲-OpenLayers离线地图快速实战(一)_百度文库.url"可能是一个关于如何使用OpenLayers构建离线地图的教程。离线地图是WebGIS中的一个重要特性，允许用户在没有网络连接时也能...
WebGIS入门到精通：从基础到实战教程
本教程大纲旨在提供全面的WebGIS学习...通过这门WebGIS教程，学员不仅能够掌握GIS的基本理论，还能学会一系列实用的工具和技术，从而具备开发和维护Web地图应用的能力。无论是初学者还是专业开发者，都能从中受益匪浅。
1、【WebGIS实战】系列介绍
X北辰北的博客
06-06 1318
大家好，我是X北辰北。本文是「WebGIS实战」系列，关注这个标签，阅读所有文章，成为WebGIS开发高手。
WebGIS学习资源推荐（包含学习路线、软件和数据资源推荐）
X北辰北的博客
01-20 6332
写在前面 很多人对于WebGIS不是很熟悉，尤其是刚接触WebGIS的开发人员来说，感觉这东西漫无边际，不知道如何下手，所以本篇文章就结合自己的开发和学习经验，给大家推荐一下学习路线和相关的学习资源。 首先直接上一张学习路线图，图中绿标的知识必须要掌握。 学习资源推荐 1、Web开发方面 1.1、Web开发基础知识学习资源 Web开发基础知识无非就是前端三剑客：HTML、CSS、JavaScript。对于这三块知识学习的话，其实重点和难点还是在CSS和JS这两块，以下是一些推荐的学习网站和资
Arcgis+openlayer 环境搭建说明
07-06
arcgis+ tilecache切图 apache发布地图 openlayer调用地图过程说明
GIS学习之WebGIS开发基础(二)：快速上手高德 JSAPI
m0_49392966的博客
02-17 923
本篇带您快速了解：地图、图层、事件、点标记的最基本使用方法。对于矢量图形、信息窗体会在下一篇文章进行精讲
3天学会WebGIS开发——从入门到精通（文章链接汇总）
热门推荐
gis_witch的博客
03-21 1万+
第一章 概述 第1节-什么是GIS开发 第2节-WebGIS开发 第3节-如何学习WebGIS开发 第4节-GIS平台 第5节-术语与名词 第二章-开发环境搭建 第1节-开发软件 第2节-高德开放平台 第三章-web开发篇 第1节-HTML快速入门 第2节-CSS快速入门 第3节-JavaScript快速入门 第四章-WebGIS开发 第1节-开发准备 第2节-地图显示 第3节-地图控件 第4节-点标记 第5节-几何计算 第6节-GeoJSON 第五章-实战案例 第
WebGIS入门教程（非常详细）从零基础入门到精通，看完这一篇就够了
Python_0011的博客
09-04 9838
于是，WebGIS应用需求剧增，基于B/S架构的GIS系统越来越多地开始提供服务，并且随着RIA技术、Ajax技术等的涌现和成熟，WebGIS能够以更好的视觉效果与交互效果展现，越来越受到广大用户的关注。网络与GIS的融合成为GIS应用的催化剂，标志着GIS迎来一个新的时代，GIS真正走向大众化，其应用全面融入人们的工作与生活，并彰显出了巨大的活力。若设计简单的大众应用WebGIS，可以不使用服务器端开源GIS平台，直接访问第三方提供的数据服务、数据接口，或者存储在关系数据库中的POI数据等。
2023超新超详细 WebGIS入门教程【保姆级教程】从零基础入门到精通，看完这一篇就够了！！！
logic1001的博客
11-13 2734
于是，WebGIS应用需求剧增，基于B/S架构的GIS系统越来越多地开始提供服务，并且随着RIA技术、Ajax技术等的涌现和成熟，WebGIS能够以更好的视觉效果与交互效果展现，越来越受到广大用户的关注。网络与GIS的融合成为GIS应用的催化剂，标志着GIS迎来一个新的时代，GIS真正走向大众化，其应用全面融入人们的工作与生活，并彰显出了巨大的活力。若设计简单的大众应用WebGIS，可以不使用服务器端开源GIS平台，直接访问第三方提供的数据服务、数据接口，或者存储在关系数据库中的POI数据等。
开源WebGIS开发入门
03-18
本系列课程主要涵盖以下知识点：1、Openlayers的理解与应用；2、Geoserver的操作配置；3、postGIS的各类详解；4、QGIS基础操作；5、Geotools的格式转化与wms服务；6、java web基本框架等
Openlayers开发环境的配置
gis_witch的博客
03-14 1748
Openlayers提供两种开发方式，一种是传统开发方式，即通过下载响应的JavaScript和CSS样式库，直接在页面中添加；另外一种是NodeJS开发方式。
OpenLayer7.0 + VSCode开发调试环境
谢公屐的博客
08-24 854
基于vscode 的 openlayer7.0开发调试环境配置
WebGis之OpenLayers学习之路------OpenLayers开发基础
messizhao的博客
01-06 4325
openlayers很久之前就听说过一个不错的开源架构，由于这一年来做的项目都是桌面端的，使用的GMap .Net和ArcGisEngine,所以对openlayers很少有研究，年底时间暂时充裕，花费一点时间对此开源架构进行学习和使用。 OpenLayers简介 对于OpenLayers的简介就不多说废话了，这就交到度娘手中吧，它就是一个模块化、高性能并且功能丰富的WebGIs客户端的Jav...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值