我是编程新手，我想知道是否可以使用feature.set((将外部json文件连接到源自矢量瓦片源的特性。
import 'ol/ol.css';
import MVT from 'ol/format/MVT';
import Map from 'ol/Map';
import VectorTileLayer from 'ol/layer/VectorTile';
import VectorTileSource from 'ol/source/VectorTile';
import View from 'ol/View';
import {Fill, Stroke, Style} from 'ol/style';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
// define some colours matching some arbitrary divisions of the
// OECD income data
var high = [64,196,64,1];
var mid = [108,152,64,1];
var low = [152,108,64,1];
var poor = [196,32,32,1];
// map the income level codes to a colour value, grouping them
var incomeLevels = {
'HIC': high, // high income
'OEC': high, // high income OECD
'NOC': high, // high income, non-OECD
'UMC': mid, // upper middle income
'MIC': mid, // middle income
'LMC': mid, // lower middle income
'LIC': low, // low income
'LMY': low, // low and middle income
'HPC': poor // heavily indebted poor country
};
// a default style is good practice!
var defaultStyle = new Style({
fill: new Fill({
color: [250,250,250,1]
}),
stroke: new Stroke({
color: [220,220,220,1],
width: 1
})
});
// a javascript object literal can be used to cache
// previously created styles. Its very important for
// performance to cache styles.
var styleCache = {};
// the style function returns an array of styles
// for the given feature and resolution.
// Return null to hide the feature.
function styleFunction(feature, resolution) {
// get the incomeLevel from the feature properties
var level = feature.get('incomeLevel');
// if there is no level or its one we don't recognize,
// return the default style (in an array!)
if (!level || !incomeLevels[level]) {
return [defaultStyle];
}
// check the cache and create a new style for the income
// level if its not been created before.
if (!styleCache[level]) {
styleCache[level] = new ol.style.Style({
fill: new ol.style.Fill({
color: incomeLevels[level]
}),
stroke: defaultStyle.stroke
});
}
// at this point, the style for the current level is in the cache
// so return it (as an array!)
return [styleCache[level]];
}
var source = new VectorTileSource({
maxZoom: 15,
format: new MVT({
// idProperty: 'UN_A3',
}),
url:
'http://localhost:8080/geoserver/gwc/service/tms/1.0.0/' +
'countries:ne_110m_admin_0_countries@EPSG%3A900913@pbf/{z}/{x}/{-y}.pbf',
});
// VectorTile Layer Constuctor to the Map.
var vtLayer = new VectorTileLayer({
declutter: true,
source: new VectorTileSource({
maxZoom: 15,
format: new MVT({
// idProperty: 'UN_A3',
}),
url:
'http://localhost:8080/geoserver/gwc/service/tms/1.0.0/' +
'countries:ne_110m_admin_0_countries@EPSG%3A900913@pbf/{z}/{x}/{-y}.pbf',
}),
style:styleFunction // here we apply the styleFunction to the layer
});
//In order to create the map viewer, you must first create a map.
//The OpenLayers.Map constructor requires one argument:
// This argument must either be an HTML Element, or the ID of an HTML element.
//This is the element in which the map will be placed.
// Map Constuctor
var map = new Map({
layers: [vtLayer],
// 'map' the ID of an HTML element which id the target container.
target: 'map',
view: new View({
center: [0, 0],
zoom: 2,
multiWorld: true,
}),
});
// Reading JSON with joined attributes for tjsApi with XMLHttpRequest.XMLHttpRequest API provides client functionality for transferring data between a client and a server. It allows an easy way to retrieve data from a URL without having to do a full page refresh.
var getJSON = function(url, callback) {
//This reads JSON data with XMLHttpRequest.
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'json';
xhr.onload = function() {
var status = xhr.status;
if (status == 200) {
callback(null, xhr.response);
} else {
callback(status);
}
};
xhr.send();
};
getJSON('http://127.0.0.1:5000/tjs/api/v1/resources/income', function(err, data) {
if (err != null) {
console.error(err);
} else {
console.log(data);
}
vtLayer.getSource().forEachFeature(pixel ,function(feature){
var code = feature.get('ISO_A2');
if (data[code]) {
feature.set('incomeLevel', data[code]);
}
});
});
var key = source.on('change', function(event) {
if (source.getState() == 'ready') {
source.unByKey(key);
getJSON('http://127.0.0.1:5000/tjs/api/v1/resources/income', function(err, data) {
if (err != null) {
console.error(err);
} else {
console.log(data);
}
vtLayer.getSource().forEachFeature(function(feature){
var code = feature.get('ISO_A2');
if (data[code]) {
feature.set('incomeLevel', data[code]);
}
});
});
}
});
我正在努力效仿(http://openlayersbook.github.io/ch06-styling-vector-layers/example-07.html)。我在vtLayer.getSource().forEachFeature(function(feature)上一直收到一个错误，有办法解决吗？
矢量瓦片源没有特性，瓦片有。您可以在瓦片加载时访问它们(可能会将它们推到阵列中以供以后使用？(
vtLayer.getSource().on('tileloadend', function(evt) {
var features = evt.tile.getFeatures();
...
...
}