1、TileLayer 瓦片图层。一般加载切片图层(wmts,wms)
天地图(wmts)
const tempLayer = new TileLayer({
visible: true,
projection: "EPSG:4326",
source: new XYZ({
visible: true,
url: "https://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=" + token,
}),
opacity: 1,
});
geoserver的wms服务
// 加载 wms 服务
let wmsLayer = new TileLayer({
preload: Infinity,
source: new TileWMS({
url: "http://localhost:8090/geoserver/keshan/wms",
//定义服务的请求参数
params: {
LAYERS: "", //图层名称
FORMAT: "image/png",
VERSION: "1.1.1",
tiled: true,
STYLES: "",
exceptions: "application/vnd.ogc.se_inimage",
cql_filter: "", //过滤条件
},
//可选,定义请求瓦片的大小 级别等,不需要的话可注释
tileGrid: new ol.tilegrid.TileGrid({
resolutions: this.getTileResolutions(),
origin: [-180, 90],
tileSize: 512,
}),
serverType: "geoserver",
crossOrigin: "anonymous", //跨域请求,主要涉及到地图图片的导出
}),
maxZoom: 21,
minZoom: 0,
zIndex: 100,
properties: {}, //自定义一些图层的属性
});
wmts服务
// 加载 wmts 服务
const matrixIds = new Array(20);
for (let z = 0; z < 21; ++z) {
matrixIds[z] = "EPSG:4490_dzdtz:" + z;
}
//自己瓦片的比例尺
var resolutions = [
1.4078260157100582, 0.7031250000000002, 0.3515625000000001,
0.17578125000000006, 0.08789062500000003, 0.043945312500000014,
0.021972656250000007, 0.010986328125000003, 0.005493164062500002,
0.002746582031250001, 0.0013732910156250004, 6.866455078125002e-4,
3.433227539062501e-4, 1.7166137695312505e-4, 8.583068847656253e-5,
4.2915344238281264e-5, 2.1457672119140632e-5, 1.0728836059570316e-5,
5.364418029785158e-6, 2.682209014892579e-6,
];
let wmtsLayer = new TileLayer({
preload: Infinity,
source: new WMTS({
url: url,
layer: "",
matrixSet: "EPSG:4490_dzdtz", //瓦片矩阵集的名称
format: "image/jpeg",
tileGrid: new WMTSTileGrid({
tileSize: [256, 256],
extent: [-180.0, -270.4034600217749, 180.4034600217749, 90.0],
origin: [-180.0, 90.0],
resolutions: resolutions,
matrixIds: matrixIds, //矩阵级别
}),
style: "",
wrapX: true,
}),
maxZoom: 21,
minZoom: 0,
visible: false,
zIndex: 100,
properties: {},
});
wmts有些参数比较复杂,需要自己去看服务元数据的参数,比如矩阵也就是切片层级的名称,瓦片层级等。
2、VectorLayer 矢量图层,这个图层主要是添加自己的绘制的一些要素
const maskLayer = new VectorLayer({
preload: Infinity,
source: new VectorSource({
features: [], //图层要素
//geojson的读取方式
//features: [new GeoJSON().readFeature(masked)]
//url的读取方式
//url: "/static/wgs84jz.json",
}),
//图层样式
style: new Style({
stroke: new Stroke({
color: "#01FDFF",
width: 3,
opacity: 1,
}),
fill: new Fill({
color: "#061F57",
}),
}),
visible: true,
zIndex: 200,
opacity: 0.3, //图层透明度
projection: "EPSG:4326",
});
VectorLayer使用比较灵活,可以自定义样式,图层要素等
3、ImageLayer 影像图层 它是基于图片的图层类型,适用于一次性加载一张完整的图片来显示地图数据。基本类似于TileLayer,但是ImageLayer不能加载切片
let wmsLayer = new ImageLayer({
source: new ImageWMS({
crossOrigin: "anonymous",
url: url,
params: {
LAYERS: param.layers,
FORMAT: "image/png",
VERSION: "1.1.1",
tiled: true,
STYLES: "",
exceptions: "application/vnd.ogc.se_inimage",
cql_filter: "",
},
serverType: "geoserver",
}),
maxZoom: 21,
minZoom: 0,
visible: false,
zIndex: 100,
properties: {},
});
在 OpenLayers 中,VectorLayer
、ImageLayer
和 TileLayer
是三种常见的图层类型,它们在加载和显示地图数据的方式上有一些区别。
-
VectorLayer
(矢量图层):扫描二维码关注公众号,回复: 16571102 查看本文章VectorLayer
是基于矢量数据的图层类型,适用于加载和显示矢量要素数据,如点、线、多边形等。VectorLayer
的数据通常是通过 GeoJSON、KML、GPX 等格式提供的,或者通过手动创建要素(Feature)添加到图层中。VectorLayer
可以对矢量要素进行样式渲染、交互操作、查询等操作,具有高度的灵活性和可定制性。
-
ImageLayer
(影像图层):ImageLayer
是基于图片的图层类型,适用于一次性加载一张完整的图片来显示地图数据。- 对于小范围区域或静态图片,可以使用
ImageLayer
。通过设置图层的source
属性为ol.source.ImageStatic
,可以指定图片的 URL、投影、范围等信息。 ImageLayer
适用于不需要动态切片的影像数据,例如航拍照片。
-
TileLayer
(瓦片图层):TileLayer
是基于切片的图层类型,适用于将地图数据分为多个小块(瓦片)进行加载和显示。- 地图服务通常以瓦片的形式提供数据,因此
TileLayer
是常用的图层类型。 TileLayer
使用的图层源(source
)通常是ol.source.TileWMS
、ol.source.TileArcGISRest
、ol.source.OSM
等类型。这些源会自动处理切片请求,加载合适的瓦片并随着地图视图的变化进行更新。
总结:
VectorLayer
适用于加载和显示矢量要素数据,具有灵活的样式渲染和交互操作能力。ImageLayer
适用于静态或小范围的影像数据,一次性加载整张图片进行显示。TileLayer
适用于将地图数据分为瓦片进行加载和显示,支持动态切片请求和视图变化时的更新。