<!--********************************************************************
* Copyright© 2000 - 2019 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>iClient for Openlayer对接MVT</title>
<script type="text/javascript" include='ol-debug,ol-mapbox-style,proj4' src="../../dist/openlayers/include-openlayers.js"></script>
<style>
.ol-popup {
position: absolute;
background-color: rgba(0, 60, 136, 0.7);
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
padding: 10px;
border-radius: 5px;
border: 1px solid #cccccc;
bottom: 20px;
left: 10px;
opacity: 0;
transition: opacity 100ms ease-in;
}
</style>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%">
<div id="map" style="margin:0 auto;width: 100%;height: 100%;border: 1px solid #dddddd"></div>
<div id="popup" class="ol-popup">
<div id="popup-content"></div>
</div>
<script type="text/javascript">
var url = "http://localhost:8090/iserver/services/map-mvt-testdata/rest/maps/testdata";
//定义坐标系
proj4.defs("EPSG:4490","+proj=longlat +ellps=GRS80 +no_defs");
var projection = ol.proj.get('EPSG:4490');
projection.setExtent([-180,-85.05,180,85.05]);
//计算分辨率
//MVT 矢量瓦片第0级分辨率为全球范围宽度除以瓦片宽度512.
//常见坐标系第0级分辨率 WebMercator(3857):2*6378137*Math.PI/512 WGS84(4326):360.0/512 China2000(4490):360.0/512 Beijing54(4214):360.0/512 Xian80(4610):360.0/512
var topResolution = 360.0 / 512;
var resolutions = [];
for (var zoom = 0; zoom < 9; zoom++) {
resolutions.push(topResolution / Math.pow(2, zoom));
}
//定义Openlayers的map对象
var map = new ol.Map({
target: 'map',
view: new ol.View({
center: [0,0],
zoom:1,
minZoom:0,
maxZoom:8,
projection: projection,
resolutions:resolutions
})
});
var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
info = new ol.control.Control({
element: container
});
info.setMap(map);
map.addControl(info);
//获取矢量瓦片风格
var style = new ol.supermap.MapboxStyles({
map: map,
url: url,
source: 'testdata',
resolutions: resolutions
})
//获取矢量瓦片图层源
var source=new ol.source.VectorTileSuperMapRest({
url: url,
projection: projection,
format: new ol.format.MVT()
})
//定义矢量瓦片图层，并添加到地图上
var vectorLayer;
style.on('styleloaded', function () {
vectorLayer = new ol.layer.VectorTile({
//设置避让参数
declutter: true,
source:source,
style: style.getStyleFunction()
});
map.addLayer(vectorLayer);
})
//要素改变样式
map.on('click', function (e) {
map.forEachFeatureAtPixel(e.pixel, function (feature) {
style.setSelectedId(feature.getId(),feature.getProperties().layer);
return true;
}, {hitTolerance: 5});
vectorLayer.changed();
})
//改变图层样式
map.on('pointermove', function (e) {
var features = map.getFeaturesAtPixel(e.pixel);
if (features) {
var paint;
var layername=features[0].get('layer'); //获取瓦片图层名称
//判断图层，不同的图层设置不同的样式
if(layername=="World_Continent_txt@China"){
paint={
"text-halo-color":"rgba(236,233,216,1.00)",
"text-color":"rgba(224, 17, 17,1.00)",
"text-halo-width":4
}
changestyle(layername,paint);
}else if(layername=="World_Continent_pg@China"){
paint={
"fill-antialias": true,
"fill-color": "rgba(105, 100, 100,1.00)"
}
changestyle(layername,paint);
}else if(layername=="World_Division_pg@China"){
paint= {
"fill-antialias": true,
"fill-color": "rgba(0,0,0,1.00)"
}
changestyle(layername,paint);
}
}
});
//图层样式改变方法
function changestyle(layername,paint){
layerStyleArr = style.getStylesBySourceLayer(layername);
style.updateStyles([{
"id": layerStyleArr[0].id,
"paint": paint
}]);
source.changed();
content.innerHTML = "Layer: " + layername;
container.style.opacity = 1;
return;
}
</script>
</body>
</html>
iClient for Openlayer对接MVT矢量瓦片demo.zip （16个子文件） 
iClient for Openlayer对接MVT矢量瓦片demo demo examples openlayers 
mvtvectorlayer_mbstyle_test.html 6KB web libs openlayers plugins ol-mapbox-style 2.11.2 
olms.js 42KB olms-debug.js 356KB 4.6.5 ol.css 4KB ol.js 531KB ol-debug.css 5KB ol-debug.js 2.64MB proj4 2.4.4 proj4.js 74KB dist openlayers iclient9-openlayers.js 4.58MB iclient9-openlayers.min.js 1.71MB iclient9-openlayers-es6.js 3.14MB iclient9-openlayers.css 332KB include-openlayers.js 4KB iclient9-openlayers.min.css 328KB iclient9-openlayers-es6.min.js 842KB
testdata.zip 62.48MB资源评论
whitebluehorse2019-12-17缺少vectorstyles.json。请楼主写下具体的操作。
剪优2020-10-12没法用啊 老哥。
