openlayer加载矢量图层示例

1.

//小区边界
getRqRegionLayer: function () {
var constructSource = new ol.source.VectorTile({
projection: 'EPSG:4326',
format: new ol.format.MVT(),
tileGrid:ol.tilegrid.createXYZ({maxZoom:20}),
tilePixelRatio:1,
url: xx+ '/gwc/service/tms/1.0.0/'
+ '图层名' + '@EPSG:900913@pbf/{z}/{x}/{-y}.pbf'
});
var layer = new ol.layer.VectorTile({
source: constructSource,
zIndex: 1000,
renderMode: "hybrid",
declutter: true,
style: this.styleFunctionCommunity
});
layer.set('id', 'rqRegion');
layer.setVisible(true);
return layer;
},
//小区边界样式
styleFunctionCommunity: function (feat) {
var house_type = feat.getProperties().house_type ? feat.getProperties().house_type.split("|").sort()[0] : '';
var styleColor = '#ff545e';
var styles = [];
switch (house_type) {
case '1000':
styleColor = '#E371F6';
break;
case '2000':
styleColor = '#FFA800';
break;
case '3000':
styleColor = '#17C1B1';
break;
case '4000':
styleColor = '#43A5F3';
break;
default:
styleColor = '#ff545e';
break;
}
var initStyle = new ol.style.Style({
stroke: new ol.style.Stroke({
color: styleColor,
width: 2
})
});
styles.push(initStyle);
return styles;
},

最后

以上就是温暖花卷为你收集整理的openlayer加载矢量图层示例的全部内容，希望文章能够帮你解决openlayer加载矢量图层示例所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。