一.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>

Geoserve发布Mapbox矢量切片格式openlayer加载案例相关推荐

mapbox矢量切片标准_Cesium 加载矢量切片(MapBox Vector Tile)
矢量切片(vector tile)是当前 WebGIS 较热技术,国内的高德.百度等在线地图都使用了矢量切片技术.相较于传统栅格切片,矢量切片好处很多.简单几点就是:轻量.客户端渲染.还可加密(栅格切 ...
python3下载mapbox矢量切片
python3下载mapbox矢量切片通过观察mapbox的页面开发者工具里的network可以发现,打开矢量切片和字体切片pbf和prite图标的链接,即可下载文件.所以写了个python程序不断 ...
使用OpenLayer加载百度地图（无偏移）
本文使用OpenLayers最新版本V5.3.0演示:如何使用OpenLayer完美无偏移加载百度离线瓦片地图.OpenLayers 5.3.0下载地址为:https://github.com/ope ...
AE基础界面设置和旋转加载案例
AE基础界面设置和旋转加载案例一.AE作用 AE:运用动效展示对象:程序员.客户.包装作品程序员:得到动效数据和素材,更深层的理解项目细节,提高开发效率和质量客户:能直观看到App最后开发的效果 ...
openlayer加载矢量切片
数据是GIS的灵魂,没有数据也就谈不上GIS了,数据分为矢量数据和栅格数据,栅格数据也有一些短处,缺乏灵活性.实时性,数据完整性受损是比较突出的问题,矢量数据不同于栅格数据,比较灵活,数据完整,将两者 ...
mapbox矢量切片_使用Tippecanoe工具处理大数据量的矢量数据切片
Tippecanoe是Mapbox的一个开源切片工具,项目地址:https://github.com/mapbox/tippecanoe,Mapbox常规的切片方法tilelive-copy参见另一篇 ...
mapbox矢量切片标准_矢量切片绘制（mapbox-gl+geoserver）
自己在实践过程中的一些记录,如果有错误的地方,希望指出交流. 一.数据准备苏州工业园区建筑地块数据(wgs84),数据中包含地块高度字段.图1-1 苏州园区建筑地块数据二.geoserver 安装 ...
Geoserver 发布wmts服务，以及cesium加载发布的wmts服务
WMTS提供了一种采用预定义图块方法发布数字地图服务的标准化解决方案.WMTS弥补了WMS不能提供分块地图的不足.WMS针对提供可定制地图的服务,是一个动态数据或用户定制地图(需结合SLD标准)的理想 ...
webgis之Openlayer加载wmts服务
终于调试通了,,,太不容易了.. wmts服务的部署见前面的文章,这里主要使用Openlayer来加载wmts服务 index.js文件如下: import 'ol/ol.css'; import M ...

Geoserve发布Mapbox矢量切片格式openlayer加载案例

一.Geoserver安装配置

二.发布矢量图层

三.代码调用

Geoserve发布Mapbox矢量切片格式openlayer加载案例相关推荐

最新文章

热门文章