Openlayers - 移动地图
Openlayers - shifted map
我得到的数据就像这个 post 中的示例一样,它甚至具有我所需要的相同来源。
然而,地图发生了变化。
private createLayer() {
this.service
.getTypesLayersFilter()
.subscribe((resp: TypesLayersFilters) => {
const filter = first(resp.WMTS);
const parser = new WMTSCapabilities();
const layer = 'ORTOFOTOMAPA';
const matrixSet = 'EPSG:4326';
this.wmtsService.getData().subscribe(text => {
const result = parser.read(text);
const options = optionsFromCapabilities(result, {
layer,
matrixSet,
crossOrigin: true
});
const layerNew = new TileLayer({
source: new WMTS(options),
opacity: 0.7,
name: 'WMTS',
});
});
});
}
来源:
https://mapy.geoportal.gov.pl/wss/service/WMTS/guest/wmts/ORTO?SERVICE=WMTS&REQUEST=GetCapabilities
getData() {
const url =
'https://mapy.geoportal.gov.pl/wss/service/WMTS/guest/wmts/ORTO';
const data = {
SERVICE: 'WMTS',
REQUEST: 'GetCapabilities'
};
const options: any = { params: data, responseType: 'text' };
return this.http.get(url, {
...options,
params: this.toHttpParams(options.params)
});
}
map screenshot
是什么导致了这种转变,我是不是做错了什么?也许解决方案是移动地图,如果可能的话,应该这样做吗?
我在示例中添加了一些不透明度,可以看到 GetCapabilities 定义的 tilegrid 没有准确定位在 EPSG:4326 中。该服务还支持 EPSG:2180,这似乎更合适。使用该投影需要 proj4,并且您需要在投影定义中包含 +axis=neu,因为该服务使用北-东坐标顺序。
proj4.defs('EPSG:2180', '+proj=tmerc +lat_0=0 +lon_0=19 +k=0.9993 +x_0=500000 +y_0=-5300000 +ellps=GRS80 +units=m +axis=neu +no_defs ');
ol.proj.proj4.register(proj4);
var parser = new ol.format.WMTSCapabilities();
var url = 'https://mapy.geoportal.gov.pl/wss/service/WMTS/guest/wmts/ORTO?SERVICE=WMTS&REQUEST=GetCapabilities';
fetch(url).then(function(response) {
return response.text();
}).then(function(text) {
var result = parser.read(text);
var options = ol.source.WMTS.optionsFromCapabilities(result, {
layer: 'ORTOFOTOMAPA',
matrixSet: 'EPSG:2180',
crossOrigin: true,
});
//console.log(options);
this.map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
new ol.layer.Tile({
source: new ol.source.WMTS(options),
opacity: 0.5
})
],
target: "map",
view: new ol.View({
center: ol.proj.fromLonLat([19.4569911, 51.7687323]),
zoom: 4
})
});
});
html, body, .map {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
<link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet" />
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.5.0/proj4.js"></script>
<div id="map" class="map"></div>
我得到的数据就像这个 post
private createLayer() {
this.service
.getTypesLayersFilter()
.subscribe((resp: TypesLayersFilters) => {
const filter = first(resp.WMTS);
const parser = new WMTSCapabilities();
const layer = 'ORTOFOTOMAPA';
const matrixSet = 'EPSG:4326';
this.wmtsService.getData().subscribe(text => {
const result = parser.read(text);
const options = optionsFromCapabilities(result, {
layer,
matrixSet,
crossOrigin: true
});
const layerNew = new TileLayer({
source: new WMTS(options),
opacity: 0.7,
name: 'WMTS',
});
});
});
}
来源: https://mapy.geoportal.gov.pl/wss/service/WMTS/guest/wmts/ORTO?SERVICE=WMTS&REQUEST=GetCapabilities
getData() {
const url =
'https://mapy.geoportal.gov.pl/wss/service/WMTS/guest/wmts/ORTO';
const data = {
SERVICE: 'WMTS',
REQUEST: 'GetCapabilities'
};
const options: any = { params: data, responseType: 'text' };
return this.http.get(url, {
...options,
params: this.toHttpParams(options.params)
});
}
map screenshot
是什么导致了这种转变,我是不是做错了什么?也许解决方案是移动地图,如果可能的话,应该这样做吗?
我在示例中添加了一些不透明度,可以看到 GetCapabilities 定义的 tilegrid 没有准确定位在 EPSG:4326 中。该服务还支持 EPSG:2180,这似乎更合适。使用该投影需要 proj4,并且您需要在投影定义中包含 +axis=neu,因为该服务使用北-东坐标顺序。
proj4.defs('EPSG:2180', '+proj=tmerc +lat_0=0 +lon_0=19 +k=0.9993 +x_0=500000 +y_0=-5300000 +ellps=GRS80 +units=m +axis=neu +no_defs ');
ol.proj.proj4.register(proj4);
var parser = new ol.format.WMTSCapabilities();
var url = 'https://mapy.geoportal.gov.pl/wss/service/WMTS/guest/wmts/ORTO?SERVICE=WMTS&REQUEST=GetCapabilities';
fetch(url).then(function(response) {
return response.text();
}).then(function(text) {
var result = parser.read(text);
var options = ol.source.WMTS.optionsFromCapabilities(result, {
layer: 'ORTOFOTOMAPA',
matrixSet: 'EPSG:2180',
crossOrigin: true,
});
//console.log(options);
this.map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
new ol.layer.Tile({
source: new ol.source.WMTS(options),
opacity: 0.5
})
],
target: "map",
view: new ol.View({
center: ol.proj.fromLonLat([19.4569911, 51.7687323]),
zoom: 4
})
});
});
html, body, .map {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
<link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet" />
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.5.0/proj4.js"></script>
<div id="map" class="map"></div>