<template><div><div id="map" style="width: 100%; height: 600px" class="map-container" ref="mapContainer"></div></div>
</template><script>import { Map, View } from 'ol';import TileLayer from 'ol/layer/Tile';import XYZ from 'ol/source/XYZ';import { ImageWMS, TileWMS, WMTS } from 'ol/source';import WMTSTileGrid from "ol/tilegrid/WMTS";import { useGeographic, get as getProjection } from 'ol/proj'; // 引入 useGeographicimport { getWidth } from "ol/extent.js";import { Image as ImageLayer } from "ol/layer";export default {name: 'Map',mounted() {this.initMap();},methods: {initMap() {// 启用地理坐标系useGeographic();const map = new Map({target: this.$refs.mapContainer,layers: [//添加天地图底图new TileLayer({source: new XYZ({url: 'http://webst0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}',}),}),// 添加 WMS 层new TileLayer({source: new TileWMS({url: 'http://XXXXXX:80/geoserver/jiangyong/wms',params: {LAYERS: 'jiangyong:jiangyongheliu',VERSION: '1.1.1',TILED: true,},serverType: 'geoserver',}),}),//添加 IMG// new ImageLayer({// source: new ImageWMS({// ratio: 1, //设置为 1// url: 'http://XXXXXX:80/geoserver/jiangyong/wms',// params: {// 'FORMAT': 'image/png',// 'VERSION': '1.1.1',// "STYLES": '',// "LAYERS": 'jiangyong:jiangyongheliu',// "exceptions": 'application/vnd.ogc.se_inimage',// },// serverType: "geoserver",// }),// })//layers over],view: new View({center: [111.363662, 25.267957], // 地图的中心点zoom: 10, // 初始缩放级别}),});},},};</script><style></style>上面, TileWMS 和 ImageWMS 都有效, 取其一即可
TileWMS，顾名思义，是服务端生成规则网格切片，切片一旦生成，还可以指定是否要缓存在服务端（的文件夹中），于是下次请求的时候，会有效率提升，缺点，需要消耗存储空间，看网上说，TimeWMS对标注label的处理效果没有ImageWMS好。
ImageWMS，是根据请求，实时生成和当前视图相同尺寸的一张大图，并返回，不会有缓存，相比TileWMS，效率可能低些，但图的质量更好（特别是标注label）。
