通過geoserver加載shp數據發佈成矢量切片在線服務，調用方式參考該資料：
全部代碼：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>矢量切片</title>
<link rel="stylesheet" href="http://localhost/arcgis/library/3.27/3.27/esri/css/esri.css">
<style>
html, body, #map {
height: 100%;
margin: 0;
padding: 0;
}
body {
background-color: #FFF;
overflow: hidden;
font-family: "Trebuchet MS";
}
</style>
<script src="http://localhost/arcgis/library/3.27/3.27/init.js"></script>
<script src="js/jquery.js"></script>
<script>
var map;
require([
"esri/map",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/layers/VectorTileLayer",
"esri/layers/GraphicsLayer",
"esri/symbols/SimpleLineSymbol",
"esri/geometry/projection",
"esri/geometry/Point",
"esri/SpatialReference",
"dojo/on",
"dojo/dom",
"dojo/domReady!"],
function (Map,
ArcGISTiledMapServiceLayer,
ArcGISDynamicMapServiceLayer,
VectorTileLayer,
GraphicsLayer,
SimpleLineSymbol,
projection,
Point,
SpatialReference,
on,
dom
) {
map = new Map("map", {
center: [101.78, 36.62],
zoom: 12,
logo: false
});
var DXT = new ArcGISTiledMapServiceLayer("http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer", { id: "DXT" });
map.addLayer(DXT);
var style = {
"version": 8,
"sources": {
"osm": {
"type": "vector",
"tiles": ["http://localhost:8080/geoserver/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=map:PIPESECTIONMPA&STYLE=&TILEMATRIX=EPSG:900913:{z}&TILEMATRIXSET=EPSG:900913&FORMAT=application/vnd.mapbox-vector-tile&TILECOL={x}&TILEROW={y}"],
}
},
"layers": [
{
id: "sampleline",
type: "line",
source: "osm",
"source-layer": "PIPESECTIONMPA",
paint: {
"line-color": "#3031ff"
}
}
],
"id": "test"
};
var tileLyr = new VectorTileLayer(style);
map.addLayer(tileLyr);
});
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
效果圖：
