东营专业网站建设公司排行,图书类网站开发的背景,备案网站制作,做网站的税率刘大 这里写目录标题 前言1.iServer中的预览页面2.iClient for JavaScript加载2.1 构建Style2.2 iCient加载2.2.1Leaflet MapboxGL2.2.2 OpenLayers 前言
在提到查看iServer REST数据服务的概况的时候#xff0c;大家总会想到说#xff0c;通过发布对应的地图服务或者… 刘大 这里写目录标题 前言1.iServer中的预览页面2.iClient for JavaScript加载2.1 构建Style2.2 iCient加载2.2.1Leaflet MapboxGL2.2.2 OpenLayers 前言
在提到查看iServer REST数据服务的概况的时候大家总会想到说通过发布对应的地图服务或者查询后在前端绘制出来。除此之外还可以通过矢量瓦片的形式进行展现本篇文章就带大家来看看如何加载。
1.iServer中的预览页面
在介绍前端iClient加载之前其实iServer里面也内置有数据服务的矢量瓦片预览页面使用的是iClient for OpenLayers入口在具体的数据集页面里如下图 2.iClient for JavaScript加载
2.1 构建Style
数据服务相对地服务或者矢量瓦片服务来说缺少的是矢量瓦片的样式文件(style.json)因此在前端加载的时候我们主要是要去构建style.json 我们这里以官网示例的world数据服务“http://support.supermap.com.cn:8090/iserver/services/data-world/rest/data/datasources/World/datasets/capital”为例进行说明 先来看下构建的style.json遵从MapboxGL的样式https://docs.mapbox.com/help/glossary/style/ let style{sources: {pointLayer: { tiles: [http://support.supermap.com.cn:8090/iserver/services/data-world/rest/data/datasources/World/datasets/capital/tileFeature.mvt?returnAttributestruewidth512height512x{x}y{y}z{z}],//矢量瓦片路径type: vector}}, //定义数据源必填name: test,//名称可自定义version: 8,// //版本号必填且值必须为 8layers: [{minzoom: 0,//最小可见比例尺maxzoom: 21,//最大可见比例尺paint: {circle-color: rgba(255,0,0,1.00),circle-radius: 5},//渲染样式针对不同的矢量数据类型进行设置id: capitalWorld, //图层id可自行定义source: pointLayer, //与上面定义的source名称对应source-layer: capitalWorld,// 必填 且需要写的是数据集名数据源名type:circle//图层类型}]
}构建好style样式以后只需要按照平常加载矢量瓦片的方式去加载就好了
2.2 iCient加载
2.2.1Leaflet MapboxGL
由于Leaflet加载矢量瓦片采用的是MapboxGL的插件代码编写上差不多这里就直接用Leaflet举例了 可参考leaflet加载mvt示例
var gl L.mapboxGL({renderWorldCopies: false,style: style,//第一步构建的stylecrs: EPSG:4326,minZoom:0,maxZoom: 13}).addTo(map);加载结果如图
2.2.2 OpenLayers
可参考Openlayers加载mvt示例 关键代码如下
//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/512var topResolution 360.0 / 512;var resolutions [];for (var zoom 0; zoom 22; zoom) {resolutions.push(topResolution / Math.pow(2, zoom));}var vectorLayer;var map new ol.Map({target: map,view: new ol.View({center: [0, 0],zoom: 0,projection: EPSG:4326,resolutions: resolutions})});var format new ol.format.MVT({featureClass: ol.Feature});var style new ol.supermap.MapboxStyles({style: style2,//第一步构建的styleresolutions: resolutions,map: map})vectorLayer new ol.layer.VectorTile({source: new ol.source.VectorTileSuperMapRest({url: http://support.supermap.com.cn:8090/iserver/services/data-world/rest/data/datasources/World/datasets/capital,projection: EPSG:4326,tileGrid: new ol.tilegrid.TileGrid({resolutions: resolutions,origin: [-180,90],minZoom: 0,tileSize: 512}),tileType: ScaleXY,format: format}),style: style.getStyleFunction()});map.addLayer(vectorLayer);加载结果如下
