OpenLayers初始化地图

1.构造图层

  //需要构建的图层配置信息
    const layerConfigList = [
        {
            name: '高德地图',
            layerName: 'gaode',
            layerUrl: `****`,
            layerType: 'gaode',
            zIndex: 32

        },
        {
            name: '天地图矢量',
            layerName: 'vector',
            layerUrl: `***`,

            layerType: 'OnlineXYZ3857',
            zIndex: 33


        },
       
        {
            name: '图层3',
            layerName: 'wms',
            layerUrl: `你的url`,
            layerType: 'TileWMS',

            params: {
                'LAYERS': '***', FORMAT: 'image/png', Version: '1.1.1', SRS:    'EPSG:3857', TRANSPARENT: 'TRUE'
            },
            zIndex: 37
        },

    ]
      /**
     * 组装图层
     * @param list 
     * @returns 
     */
    const getLayers = (list: LayerItem[]) => {
        // wms图层
        const layerList = list.map(item => {
            if (item.layerType === 'TileWMS') {
                return new TileLayer({
                    source: new TileWMS({
                        url: item.layerUrl,
                        params: item.params!,
                        wrapX: true

                    }),
                    zIndex: item.zIndex,
                    className: item.layerName,
                    visible: item.visible

                });
            }
         // 自定义的矢量层
            if (item.layerType === 'pressureMark') {
                return new VectorLayer({
                    source: getSelfLayerSource('pressure'),
                    zIndex: item.zIndex,
                    visible: item.visible,
                    className: item.layerName,
                    style: getSelftClusterStyle('pressure')
                });

            }
            if (item.layerType === 'leakageMarker') {
                return new VectorLayer({
                    source: getSelfLayerSource('leakage'),
                    zIndex: item.zIndex,
                    visible: item.visible,
                    className: item.layerName,
                    style: getSelftClusterStyle('leakage')
                });
            }
            //自定义的矢量层
            if (item.layerType === 'polygonLayer') {
                return new VectorLayer({
                    style: new Style({
                        //图层样式
                        fill: new Fill({
                            //填充颜色
                            color: 'rgba(128,216,255,0.1)',
                        }),
                        stroke: new Stroke({
                            color: '#0091ea', //边框颜色
                            width: 2, // 边框宽度
                        }),
                        image: new Circle({
                            radius: 5,
                            stroke: new Stroke({
                                color: '#FF0000', //边框颜色
                                width: 3,
                            }),
                            fill: new Fill({
                                color: '#ffffff', //填充颜色
                            }),
                        }),

                    }),
                     
                    className: item.layerName,
                    zIndex: item.zIndex,
                    visible: item.visible,
                });
            }
            //瓦片
            return new TileLayer({
                source: new XYZ({
                    url: item.layerUrl,
                    wrapX: false,

                }),
                zIndex: item.zIndex,
                className: item.layerName,
                visible: item.visible

            });
        })
        return layerList
    }

2.构造View对象

    const view = new View({
        center: fromLonLat([108.9, 34.27]),
        zoom: 10,
    })
        

3.构造地图实例

    
    const layers = getLayers(layerConfigList)
    const map = new Map({
        target: '标签的id',
        layers: [...layers],
        view,

        controls: defaultControls({
            zoom: false,
            rotate: false,
            attribution: false
        })

    });