GeoServer + openlayers

GeoServer 安装

前提有java环境

安装地址
https://geoserver.org/release/stable/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-gFwhttps://pan.baidu.com/s/1UZGx86R1b4VBDO9HOD-gFw
提取码：0125

下载后解压
在这里插入图片描述
除选择安装位置外一路next

全能地图下载器使用

打开后先试用一个月
在这里插入图片描述

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

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

这三个选择然后点击拼接

将图源放到geoServer服务器上

在这里插入图片描述
创作工作空间

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

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

点击发布
然后保存即可

图层预览-》选择刚刚创建的图层点击openlayers进行预览
在这里插入图片描述
部署成功，右下角显示经纬度

openlayers 使用

由于我们部署使用的是wms方式所以选择wms样例加载图源
我选择的是https://openlayers.org/en/latest/examples/epsg-4326.htmlhttps://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>