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,
});지오서버 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: {}, //自定义一些图层的属性
});WMT 서비스
// 加载 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(벡터 레이어):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지도 데이터를 타일로 나누어 로딩 및 표시하는데 적합하며, 뷰 변경 시 동적 슬라이싱 요청 및 업데이트를 지원합니다.