一、用 GeoServer 发布地图服务并且查看
WMTS介绍参见:
https://zhuanlan.zhihu.com/p/81258050;
选择 Tile Caching 里面的 Tile Layers,选择预览方式为 EPSG:4326/png
点开预览该服务,然后在预览页面查看网页源码,查看具体的调用方式和所需的参数。
二、OpenLayers 调用 WMTS 服务
<template>
<div id="map" ref="rootmap">
</div>
</template>
<script>
import "ol/ol.css";
import { Map, View } from "ol";
import Feature from 'ol/Feature';
import {Vector as VectorLayer,Tile} from 'ol/layer'
import {Point, LineString, Polygon} from 'ol/geom'
import {Vector as VectorSource,OSM,WMTS} from 'ol/source';
import WMTSTileGrid from 'ol/tilegrid/WMTS'
import {Projection} from 'ol/proj'
export default {
name: 'OlWmts',
data() {
return {
map: null
};
},
mounted() { //可以出来结果
//切片名
let matrixIds = ['EPSG:4326:0', 'EPSG:4326:1', 'EPSG:4326:2', 'EPSG:4326:3',
'EPSG:4326:4', 'EPSG:4326:5', 'EPSG:4326:6', 'EPSG:4326:7', 'EPSG:4326:8',
'EPSG:4326:9', 'EPSG:4326:10', 'EPSG:4326:11', 'EPSG:4326:12', 'EPSG:4326:13',
'EPSG:4326:14', 'EPSG:4326:15', 'EPSG:4326:16', 'EPSG:4326:17', 'EPSG:4326:18',
'EPSG:4326:19', 'EPSG:4326:20', 'EPSG:4326:21'];
//分辨率
let resolutions = [0.703125, 0.3515625, 0.17578125, 0.087890625,
0.0439453125, 0.02197265625, 0.010986328125, 0.0054931640625,
0.00274658203125, 0.001373291015625, 6.866455078125E-4, 3.4332275390625E-4,
1.71661376953125E-4, 8.58306884765625E-5, 4.291534423828125E-5, 2.1457672119140625E-5,
1.0728836059570312E-5, 5.364418029785156E-6, 2.682209014892578E-6, 1.341104507446289E-6,
6.705522537231445E-7, 3.3527612686157227E-7];
let tileOSM = new Tile({
source: new OSM()
});
//切片策略
let tileGrid = new WMTSTileGrid({
tileSize: [256,256],
extent: [-180.0,-90.0,180.0,90.0], //范围
origin: [-180.0, 90.0], //切片原点
resolutions: resolutions, //分辨率
matrixIds: matrixIds //层级标识列表,与地图级数保持一致
});
//设置地图投影
let projection = new Projection({
code: 'EPSG:4326',
units: 'degrees',
axisOrientation: 'neu'
});
let tileSource = new WMTS({
url: 'http://localhost:8080/geoserver/gwc/service/wmts',
layer:"tiger:china",
format: "image/png",
matrixSet:"EPSG:4326",
projection: projection,
tileGrid: tileGrid
});
let tileLayer = new Tile({
opacity:0.7, //透明度
source: tileSource,
wrapX:false,
});
let views = new View({
center: [116.46, 39.92],
projection: "EPSG:4326",
zoom: 5,
maxZoom: 8,
minZoom:2
});
let map = new Map({
layers: [tileOSM, tileLayer],
view: views,
target: 'map',
});
}
};
</script>
<style>
#map{
height:800px;
width: 1400px;
}
/*隐藏ol的一些自带元素*/
.ol-attribution,.ol-zoom { display: none;}
</style>