一开始用的uniapp官方的map组件，但是map组件在app端只能用高德地图，没法实现叠加geoserver效果，摸索了好久，网上的方法在我这都报错一堆，最后我发现了个神奇的东西，renderjs，它是运行在视图层的js，只支持app-vue和h5

首先下载openlayers依赖

npm install ol

<template>
    <view class="container">
        <view id="map"class="map"></view>
    </view>
</template>

<script module="ol" lang="renderjs">
    import 'ol/ol.css'
    import { Map, View } from 'ol'
    import OSM from 'ol/source/OSM';
    import ollayerTile from 'ol/layer/Tile'
    import TileLayer from 'ol/layer/Tile'
    import XYZ from 'ol/source/XYZ'
    import TileWMS from 'ol/source/TileWMS';

    export default {
        data() {
            return {
                map:null,
                view:null,
            }
        },
        mounted() {
            this.initMap();
        },
        methods: {
            // 初始化天地图
            initMap(){
                let that = this
                //天地图底图 
                var tdt = new TileLayer({
                  source: new XYZ({
                    url: 'http://t2.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=cef191b507ff5cb698811cd8a9b11ca0',
                    projection: 'EPSG:3857',
                    crossOrigin: '*',
                  }),
                })
                //天地图标注
                var tdtLabel = new TileLayer({
                  source: new XYZ({
                    url: 'http://t2.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=cef191b507ff5cb698811cd8a9b11ca0',
                    projection: 'EPSG:3857',
                  }),
                
                this.map = new Map({
                  controls: defaultControls({
                    attribution: false,
                    zoom: false,
                    rotate: false,
                  }),
                  target: 'map',
                  layers: [tdt,tdtLabel],
                  view: new View({
                    center: [111.47, 27.25],
                    projection: "EPSG:4326",
                    zoom: 14,
                  }),
                })
                this.map.addLayer(pipe);
                this.addWmsLayer();
            },
            addWmsLayer(){
                var wmsParam = {      
                            'LAYERS': 'psxt:ps_pipe',//此处可以是单个图层名称，也可以是图层组名称，或多个图层名称  
                            'TILED':false,
                            'VERSION': '1.1.0',
                            'SRS': "EPSG:4326"   
                };
                var pipeLayer =  new TileLayer({      
                        source:new TileWMS({ //切片WMS服务，多个标注    
                            url: 'http://地址/geoserver/psxt/wms',   
                            params: wmsParam,      
                            serverType:'geoserver'    //服务器类型  
                        })     
                });
                this.map.addLayer(pipeLayer);
            },
            },
            
        }
</script>

<style lang="scss">
    @import 'ol/ol.css';
    uni-page-body,
    .index {
        height: 100%;
    }
    .map {
        width: 100%;
        height: calc(100vh - 170rpx);
        position: relative;
    }

</style>

效果如图

app端：