GeoServer + openlayers

GeoServer 安装

前提有java环境

安装地址
https://geoserver.org/release/stable/

此处以二进制下载为例
下载后解压

D:\Program Files (x86)\geoserver-2.21.0-bin\bin

http://localhost:8080/geoserver 进入服务
使用默认用户名admin和密码geoserver登陆

图源准备

百度网盘下载 地图软件全能地图
链接：https://pan.baidu.com/s/1UZGx86R1b4VBDO9HOD-gFw
提取码：0125

下载后解压

除选择安装位置外 一路next

全能地图下载器使用

打开后 先试用一个月

可以选择地图来源 我选择的是地图 -》谷歌地图-》混合
地图级别 我选择的是12 可以自行选择

下载先用矩形工具或者其他工具选出来一个区域
在点击任务列表可自定义名称
地图下载 设置 定义格式 点击地图下载 开始 开始下载
格式等默认即可

选择是 拼接

这三个选择然后点击拼接

将图源放到geoServer服务器上

创作工作空间

选择存储仓库 点击geoTIFF 栅格数据上传

工作空间选择刚刚创建了
数据源名称 自己填写
下面地址 要选择刚刚的图源地址的 tif文件

点击发布
然后保存即可

图层预览-》选择刚刚创建的图层 点击openlayers进行预览

部署成功 ，右下角显示经纬度

openlayers 使用

由于我们部署使用的是wms方式所以选择wms样例加载图源
我选择的是https://openlayers.org/en/latest/examples/epsg-4326.html

vue工程中需要运行 npm install ol 导入openlayers
将样例中 main.js放到mounted函数中
将页面抽取出来放到上面
此样例的写法抽取如下

<template>
  <div id="map" class="map"></div>
</template>

<script> import Map from "ol/Map"; import TileLayer from "ol/layer/Tile"; import TileWMS from "ol/source/TileWMS"; import View from "ol/View"; import {
       ScaleLine, defaults as defaultControls } from "ol/control"; export default {
       mounted() {
       const layers = [ new TileLayer({
       source: new TileWMS({
       url: "http://localhost:8080/geoserver/ouc/wms", //地址要换成自己的可看下方 params: {
       LAYERS: "ouc:谷歌混合07292025", //图层也是 可看下方 TILED: true, }, }), }), ]; new Map({
       controls: defaultControls().extend([ new ScaleLine({
       units: "degrees", }), ]), layers: layers, target: "map", view: new View({
       projection: "EPSG:4326", center: [120.44, 36.13], zoom: 12, }), }); }, }; </script>
<style> .map {
       height: 400px; width: 100%; } </style>

在图层预览中 F12 network ctrl+R调出请求


url 为请求前缀到wms


图层为

启动服务 运行成功

作者声明

如有问题，欢迎指正！