第三章 Openlayers前端接入

最新推荐文章于 2024-05-11 04:44:11 发布

lakernote

最新推荐文章于 2024-05-11 04:44:11 发布

阅读量1.9k

点赞数

分类专栏：《Javaer开源GIS之路》文章标签： java gis qgis 矢量图街景地图

本文链接：https://blog.csdn.net/abu935009066/article/details/109605163

版权

《Javaer开源GIS之路》专栏收录该内容

15 篇文章 35 订阅

订阅专栏

系列文章目录

第一章开源GIS选型

第二章 Geoserver+QGis开发环境搭建

第三章 Openlayers前端接入

文章目录

前言

回顾一下，上一篇我们用Geoserver+Qgis搭建开发环境，并展示一个小Demo。本文我们来看看前端如何来嵌入我们的GIS地图，去展示信息。

Openlayers官网地址：https://openlayers.org/

官网示例：https://openlayers.org/en/latest/examples

一、Openlayers入门

从官网下载Openlayers库或者直接使用cdn上的，本文使用cdn引入工程。

<link href="https://cdn.bootcdn.net/ajax/libs/openlayers/3.20.1/ol.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/openlayers/3.20.1/ol.js"></script>

定义一个

元素作为地图容器，将其id定义为map：
```
<div id="map" class="map">
</div>
```

加入地图

<script type="text/javascript">
    var map = new ol.Map({
        target: 'map',
        view: new ol.View({
            center: [117.1472, 32.3222],
            projection: 'EPSG:4326',
            zoom: 7
        }),
        controls: ol.control.defaults().extend([
            //全屏
            new ol.control.FullScreen(),
            //鼠标位置控件
            new ol.control.MousePosition(),
            //鸟瞰图控件
            new ol.control.OverviewMap(),
            //比例尺控件
            new ol.control.ScaleLine(),
            //缩放滚动条控件
            new ol.control.ZoomSlider(),
            // 放大到设定区域控件
            new ol.control.ZoomToExtent()

        ])

    });
    var baseSource = new ol.source.TileWMS({
        url: 'http://localhost:8080/geoserver/laker/wms',
        params: {
            'LAYERS': 'laker:anhui',
            'TILED': true
        },
        serverType: 'geoserver'
    });


    map.addLayer(new ol.layer.Tile({
            source: baseSource
        })
    );


</script>

可以看看了，美如画（如无法显示看下面）

5.如果无法显示地图，在Tomcat/conf/web.xml中加入如下内容：

<filter>
  <filter-name>CorsFilter</filter-name>
  <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
  <init-param>
    <param-name>cors.allowed.origins</param-name>
    <param-value>*</param-value>
  </init-param>
</filter>
<filter-mapping>
  <filter-name>CorsFilter</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping>

在这里插入图片描述

二、替换文中资源地址

核心位置

var baseSource = new ol.source.TileWMS({
    url: 'http://localhost:8080/geoserver/laker/wms',
    params: {
        'LAYERS': 'laker:anhui',
        'TILED': true
    },
    serverType: 'geoserver'
});

把其中的url，以及LAYERS换成上文预览的url，如下图

在这里插入图片描述

来看看我这边美如画的一个demo吧

在这里插入图片描述

三、整体源码

<!doctype html>
<html lang="zh">
<head>
    <meta http-equiv=Content-Type content="text/html;charset=utf-8">
    <link href="https://cdn.bootcdn.net/ajax/libs/openlayers/3.20.1/ol.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/openlayers/3.20.1/ol.js"></script>
    <title>OpenLayers example</title>
</head>
<body>
<h2>My Map</h2>
<div id="map" class="map">
</div>

<script type="text/javascript">
    var map = new ol.Map({
        target: 'map',
        view: new ol.View({
            center: [117.1472, 32.3222],
            projection: 'EPSG:4326',
            zoom: 7
        }),
        controls: ol.control.defaults().extend([
            //全屏
            new ol.control.FullScreen(),
            //鼠标位置控件
            new ol.control.MousePosition(),
            //鸟瞰图控件
            new ol.control.OverviewMap(),
            //比例尺控件
            new ol.control.ScaleLine(),
            //缩放滚动条控件
            new ol.control.ZoomSlider(),
            // 放大到设定区域控件
            new ol.control.ZoomToExtent()

        ])

    });
    var baseSource = new ol.source.TileWMS({
        url: 'http://localhost:8080/geoserver/laker/wms',
        params: {
            'LAYERS': 'laker:anhui',
            'TILED': true
        },
        serverType: 'geoserver'
    });


    map.addLayer(new ol.layer.Tile({
            source: baseSource
        })
    );


</script>
</body>
</html>

总结

基本的地图发布就这么轻松的完成了，但是完全不够项目实战用的，后面继续发布 QGis怎么画地图，Geoserver如何发布瓦片数据，Openlayers实战笔记等。

分享个很好用的免费工具
可以爬省市的矢量数据，以及各大厂商google、百度、高德等的瓦片数据
关注公众号【Java厂面试官】,回复：地图下载器
在这里插入图片描述

QQ群【837324215】
关注我的公众号【Java大厂面试官】，回复：架构、资源等关键词（更多关键词，关注后注意提示信息）获取更多免费资料。

公众号也会持续输出高质量文章，和大家共同进步。

lakernote

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
第三章 Openlayers前端接入

系列文章目录第一章开源GIS选型第二章 Geoserver+QGis开发环境搭建第三章 Openlayers前端接入文章目录系列文章目录前言一、Openlayers入门二、替换文中资源地址三、整体源码总结前言回顾一下，上一篇我们用Geoserver+Qgis搭建开发环境，并展示一个小Demo。本文我们来看看前端如何来嵌入我们的GIS地图，去展示信息。Openlayers官网地址：https://openlayers.org/官网示例：https://openlayers.org/en/la
复制链接

扫一扫