11.newLayer系列-TileLayer(TileWMS)

WMS服务

import TileLayer from "ol/layer/Tile";
import {TileWMS} from "ol/source";

let getA = ()=>{
  return new TileLayer({
    source: new TileWMS({
      url: 'http://43.143.xxx.xxx:8080/geoserver/one/wms?',
      params: {LAYERS: 'one:base-new', TILED: true},
      projectName: 'EPSG:4326',
    }),
  });
}
export default getA

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

<script>
import 'ol/ol.css'
import {Map, View} from 'ol';
import XYZ from 'ol/source/XYZ' //xyz
import TileLayer from "ol/layer/Tile";
import TileWMS from "ol/source/TileWMS";


export default {
  name: 'xys-study',
  // 挂载
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      let wmsLayer = new TileLayer({
        source: new TileWMS({
          url: 'http://localhost:8899/geoserver/one/wms',
          params: {
            LAYERS: 'one:province',
            TILED: true,
            FORMAT: 'image/png',
          },
          serverType: 'geoserver',
          crossOrigin: 'anonymous',
        })
      })

      let map = new Map({
        target: 'map',
        layers: [
          new TileLayer({
            title: "底图",
            source: new XYZ({
              url: 'https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}'
            })
          }),
          wmsLayer
        ],
        // 设置显示地图的视图
        view: new View({
          center: [116, 40],
          projection: 'EPSG:4326',
          zoom: 4,
        })
      })
    }
  }
}
</script>

<style scoped>
#map {
  width: 1000px;
  height: 800px;
  border: 1px solid #eee;
}
</style>