一.Geoserver安装配置
1.下载安装geoserver,官网地址点击
2.在官网配置与geoserver版本一致的[下载地址这里是2.5.1的版本],(https://sourceforge.net/projects/geoserver/files/GeoServer/2.15.1/extensions/geoserver-2.15.1-vectortiles-plugin.zip/download)
3.重启GeoServer
二.发布矢量图层
1.发布图层的时候勾选如下
注意:发布的图层必须有坐标系
三.代码调用
<template>
<div>
<div id="mapDiv"></div>
</div>
</template>
<script>
import Map from "ol/Map";
import View from "ol/View";
import TileLayer from "ol/layer/Tile";
import OSM from "ol/source/OSM";
import XYZ from "ol/source/XYZ";
import GeoJSON from 'ol/format/GeoJSON';
import { Vector as VectorLayer } from 'ol/layer';
import { Vector as VectorSource } from 'ol/source';
import TileWMS from 'ol/source/TileWMS';
import MVT from 'ol/format/MVT';
import VectorTileLayer from 'ol/layer/VectorTile';
import VectorTileSource from 'ol/source/VectorTile';
import WMTS from 'ol/tilegrid/WMTS';
import TileGrid from 'ol/tilegrid/TileGrid';
import Projection from 'ol/proj/Projection';
import { Fill, Icon, Stroke, Style, Text } from 'ol/style';
import "ol/ol.css";
export default {
data() {
return {};
},
mounted() {
this.initMap();
},
methods: {
initMap() {
var gridsetName = 'EPSG:4326';
var gridNames = ['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'];
var baseUrl = 'http://localhost:8080/geoserver/gwc/service/wmts';
var style = '';
var format = 'application/vnd.mapbox-vector-tile';
var infoFormat = 'text/html';
var layerName = 'zhaoxiyang:mdj';
var projection = new Projection({
code: 'EPSG:4326',
units: 'degrees',
axisOrientation: 'neu'
});
var 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];
const params = {
REQUEST: 'GetTile',
SERVICE: 'WMTS',
VERSION: '1.0.0',
LAYER: layerName,
STYLE: style,
TILEMATRIX: gridsetName + ':{z}',
TILEMATRIXSET: gridsetName,
FORMAT: format,
TILECOL: '{x}',
TILEROW: '{y}'
};
var url = baseUrl + '?'
for (var param in params) {
url = url + param + '=' + params[param] + '&';
}
url = url.slice(0, -1);
var source = new VectorTileSource({
url: url,
format: new MVT({}),
projection: projection,
tileGrid: new WMTS({
tileSize: [256, 256],
origin: [-180.0, 90.0],
resolutions: resolutions,
matrixIds: gridNames
}),
wrapX: true
});
new Map({
target: "mapDiv",
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}'
// }),
// isGroup: true,
// name: "天地图文字标注"
// }),
// new TileLayer({
// source: new OSM()
// }),
// new TileLayer({
// // source: new TileWMS({
// // url: 'http://localhost:8080/geoserver/zhaoxiyang/wms',
// // params: {
// // FORMAT: 'image/png',
// // VERSION: '1.1.1',
// // tiled: true,
// // LAYERS: 'zhaoxiyang:mdj',
// // exceptions: 'application/vnd.ogc.se_inimage',
// // tilesOrigin: 128.222948 + "," + 43.423849
// // }
// // })
// }),
new VectorTileLayer({
source: new VectorTileSource({
url: 'http://localhost:8080/geoserver/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=zhaoxiyang:mdj02&STYLE=&TILEMATRIX=EPSG:4326:{z}&TILEMATRIXSET=EPSG:4326&FORMAT=application/vnd.mapbox-vector-tile&TILECOL={x}&TILEROW={y}',
format: new MVT({}),
// projection: projection,
tileGrid: new WMTS({
// tileSize: [256, 256],
origin: [-180.0, 90.0],
resolutions: resolutions,
// matrixIds: gridNames
}),
// wrapX: true,
})
}),
],
view: new View({
projection: "EPSG:4326", //使用这个坐标系
center: [129.607643, 44.562347],
zoom: 8
})
});
}
}
};
</script>
<style scoped>
#map {
height: 937px;
width: 100%;
}
</style>