openlayer 图像矢量图层
图像矢量图层
ATA：南极洲
此示例使用ol/layer/Vector`renderMode：'image'。此模式在交互和动画期间导致更快的渲染，但代价是渲染不太准确。
<html>
<head>
<title>Image Vector Layertitle>
<link rel="stylesheet" href="https://openlayers.org/en/v5.1.3/css/ol.css" type="text/css">
<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>
<div id="info"> div>
<script>
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import GeoJSON from 'ol/format/GeoJSON.js';
import VectorLayer from 'ol/layer/Vector.js';
import VectorSource from 'ol/source/Vector.js';
import {Fill, Stroke, Style, Text} from 'ol/style.js';
var style = new Style({
fill: new Fill({
color: 'rgba(255, 255, 255, 0.6)'
}),
stroke: new Stroke({
color: '#319FD3',
width: 1
}),
text: new Text()
});
var map = new Map({
layers: [
new VectorLayer({
renderMode: 'image',
source: new VectorSource({
url: 'data/geojson/countries.geojson',
format: new GeoJSON()
}),
style: function(feature) {
style.getText().setText(feature.get('name'));
return style;
}
})
],
target: 'map',
view: new View({
center: [0, 0],
zoom: 1
})
});
var featureOverlay = new VectorLayer({
source: new VectorSource(),
map: map,
style: new Style({
stroke: new Stroke({
color: '#f00',
width: 1
}),
fill: new Fill({
color: 'rgba(255,0,0,0.1)'
})
})
});
var highlight;
var displayFeatureInfo = function(pixel) {
var feature = map.forEachFeatureAtPixel(pixel, function(feature) {
return feature;
});
var info = document.getElementById('info');
if (feature) {
info.innerHTML = feature.getId() + ': ' + feature.get('name');
} else {
info.innerHTML = ' ';
}
if (feature !== highlight) {
if (highlight) {
featureOverlay.getSource().removeFeature(highlight);
}
if (feature) {
featureOverlay.getSource().addFeature(feature);
}
highlight = feature;
}
};
map.on('pointermove', function(evt) {
if (evt.dragging) {
return;
}
var pixel = map.getEventPixel(evt.originalEvent);
displayFeatureInfo(pixel);
});
map.on('click', function(evt) {
displayFeatureInfo(evt.pixel);
});
script>
body>html>