[英]geojson layers are not showing on OpenLayers
I'm new to OpenLayers. 我是OpenLayers的新手。 I'm making a web map but I don't know why the geojson layers are not showing, only the base map is showing.
我正在制作网络地图,但是我不知道为什么geojson图层没有显示,仅显示了基本地图。 The code I have is below:
我的代码如下:
<!DOCTYPE html>
<html>
<head>
<title>Flood Plain Risks</title>
<link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css">
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css">
</head>
<body>
<div id="map" class="map"></div>
<button> <a id="export-png" class="btn btn-default"><i class="fa fa-download"></i> Save Map</a></button>
<script>
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
new ol.layer.Vector({
title: 'added Layer',
source: new ol.source.Vector({
url: 'FLOOD_PLAIN.json',
format: new ol.format.GeoJSON()
})
}),
new ol.layer.Vector({
title: 'added Layer',
source: new ol.source.Vector({
url: 'BUILDING_FOOTPRINT.json',
format: new ol.format.GeoJSON()
})
})
],
view: new ol.View({
center: ol.proj.fromLonLat([-80.981948,43.370172]),
zoom: 14
})
});
document.getElementById('export-png').addEventListener('click', function() {
map.once('rendercomplete', function(event) {
var canvas = event.context.canvas;
if (navigator.msSaveBlob) {
navigator.msSaveBlob(canvas.msToBlob(), 'map.png');
} else {
canvas.toBlob(function(blob) {
saveAs(blob, 'map.png');
});
}
});
map.renderSync();
});
</script>
</body>
</html>
The projection of the GeoJSON data is NAD83 / UTM zone 17N (EPSG:26917). GeoJSON数据的投影为NAD83 / UTM区域17N(EPSG:26917)。
They are supposed to cover the City of Stratford, ON. 它们应该覆盖安大略省的斯特拉特福德市。
Full GeoJSON: 完整的GeoJSON:
You need to include the custom projection (NAD83 / UTM zone 17N (EPSG:26917)) 您需要包括自定义投影(NAD83 / UTM区域17N(EPSG:26917))
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.3/proj4.js"></script>
<script src="https://epsg.io/26917.js"></script>
<script>
ol.proj.proj4.register(proj4);
var dataProjection = ol.proj.get('EPSG:26917');
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
new ol.layer.Vector({
title: 'added Layer',
source: new ol.source.Vector({
url: 'FLOOD_PLAIN.json.txt',
format: new ol.format.GeoJSON({
dataProjection: dataProjection,
featureProjection: 'EPSG:3857'
})
})
}),
new ol.layer.Vector({
title: 'added Layer',
source: new ol.source.Vector({
url: 'BUILDING_FOOTPRINT.json.txt',
format: new ol.format.GeoJSON({
dataProjection: dataProjection,
featureProjection: 'EPSG:3857'
})
})
})],
view: new ol.View({
center: ol.proj.fromLonLat([-80.981948,43.370172]),
zoom: 14
})
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.