openlayer 加载WFS服务
openlayer 加载WFS服务
<!DOCTYPE html><html>
<head>
<title>WFS</title>
<link rel="stylesheet" href="https://openlayers.org/en/v5.1.3/css/ol.css" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
</head>
<body>
<div id="map" class="map"></div>
<script>
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import GeoJSON from 'ol/format/GeoJSON.js';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js';
import {bbox as bboxStrategy} from 'ol/loadingstrategy.js';
import BingMaps from 'ol/source/BingMaps.js';
import VectorSource from 'ol/source/Vector.js';
import {Stroke, Style} from 'ol/style.js';
var vectorSource = new VectorSource({
format: new GeoJSON(),
url: function(extent) {
return 'https://ahocevar.com/geoserver/wfs?service=WFS&' +
'version=1.1.0&request=GetFeature&typename=osm:water_areas&' +
'outputFormat=application/json&srsname=EPSG:3857&' +
'bbox=' + extent.join(',') + ',EPSG:3857';
},
strategy: bboxStrategy
});
var vector = new VectorLayer({
source: vectorSource,
style: new Style({
stroke: new Stroke({
color: 'rgba(0, 0, 255, 1.0)',
width: 2
})
})
});
var raster = new TileLayer({
source: new BingMaps({
imagerySet: 'Aerial',
key: 'Your Bing Maps Key from http://www.bingmapsportal.com/ here'
})
});
var map = new Map({
layers: [raster, vector],
target: document.getElementById('map'),
view: new View({
center: [-8908887.277395891, 5381918.072437216],
maxZoom: 19,
zoom: 12
})
});
</script>
</body></html>