vue3+openlayer调用geoserver发布的矢量地图服务并进行显示（清晰封装，简洁明了）_openlayers封装vue3

前言

利用geoserver发布wms服务，再利用vue3进行封装调用和显示。

一、geoserver发布的wms服务

具体如何进行发布服务的步骤可以参考网上，本文发布的服务如图所示：

二、vue3调用与显示

1.封装map中的layer：tdtImgLayer, tdtVectorLayer, dFarmlandLayer。

代码如下（示例）：

import { XYZ } from 'ol/source';
import TileLayer from 'ol/layer/Tile';
import { TileWMS } from 'ol/source';
import LayerGroup from 'ol/layer/Group';
import tk from '@/gis/token';

const tdtLayer_img = new TileLayer({
    source: new XYZ({
        url: `http://t{0-7}.tianditu.com/DataServer?T=img_w&tk=${tk}&x={x}&y={y}&l={z}`,
    })
});

const tdtLayer_cia = new TileLayer({
    source: new XYZ({
        url: `http://t{0-7}.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=${tk}`,
    })
});

const tdtLayer_ibo = new TileLayer({
    source: new XYZ({
        url: `http://t{0-7}.tianditu.com/DataServer?T=ibo_w&x={x}&y={y}&l={z}&tk=${tk}`
    })
});

const tdtLayer_vec = new TileLayer({
    source: new XYZ({
        url: `http://t{0-7}.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=${tk}`
    })
});
const tdtLayer_cva = new TileLayer({
    source: new XYZ({
        url: `http://t{0-7}.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=${tk}`,
    })
});
//天地图影像图
const tdtImgLayer = new LayerGroup({
    layers: [
        tdtLayer_img,
        tdtLayer_ibo,
        tdtLayer_cia,
    ]
})
//天地图矢量图
const tdtVectorLayer = new LayerGroup({
    layers: [
        tdtLayer_vec,
        tdtLayer_cva,
    ]
});
//WMS服务图层（农田图层）
const dFarmlandSource = new TileWMS({
    url: 'http://localhost:8080/geoserver/cite/wms',
    params: {
      'LAYERS': 'cite:胡_result',
      'VERSION': '1.1.0',
      'TILED': true
    },
    serverType: 'geoserver'
  });
  const dFarmlandLayer = new TileLayer({
    //ratio: 1,
    source: dFarmlandSource
  });
export { tdtImgLayer, tdtVectorLayer, dFarmlandLayer};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

2.调用显示

代码如下（示例）：

import { Map, View } from 'ol';
import * as olProj from "ol/proj";
import VectorSource from 'ol/source/Vector';
import { Vector as VectorLayer } from 'ol/layer';
import { tdtImgLayer, tdtVectorLayer, dFarmlandLayer } from '@/gis/layer';
//地图对象
let map: Map;
//地图标注图层
let vectorLayer: VectorLayer<VectorSource>;
//创建地图
const createMap = () => {
    vectorLayer = new VectorLayer({
        source: new VectorSource({
            features: [],
        })
    });
    map = new Map({
        target: 'map-container',
        layers: [
            tdtImgLayer,
            vectorLayer,
            dFarmlandLayer,
        ],
        view: new View({
            maxZoom: 18,
            minZoom: 1,
            //projection: "EPSG:4326",
            constrainResolution: true,
            smoothResolutionConstraint: true,
            center: olProj.fromLonLat([112.202059, 32.647682]),
            zoom: 15
        })
    });
onMounted(() => {
    createMap();
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

该处使用的url网络请求的数据。

注意

一定要注意map中layer图层的放置顺序：要显示的服务图层要放在最上面（最后），不然会被天地图覆盖，图层”看不见“。

注意：如若在view中没有设置projection: “EPSG:4326”，那么地图的投影默认是3857，监听的坐标也是3857的坐标。