在OpenLayers 6中，可以对不同图层使用不同的渲染方式，Canvas 2D 或是WebGL
- 数据文件的格式是CSV，我将其转换成了JSON（有现成的在线网站进行转换），以便直接导入。
- 当你打开页面时，你会发现卡顿很厉害，JavaScript VM高达120MB+，同时处理这么多点已经力不从心了~~
直接贴出主要代码，与官方略有不同，没有使用Ajax，同时也对数据进行了转换
import meteoritesjson from './data/meteoritesjson';
import 'ol/ol.css';
import {
fromLonLat
} from 'ol/proj';
import {
Map,
View
} from 'ol';
import {
Vector as VectorLayer,
Tile as TileLayer
} from 'ol/layer';
import {
Vector as VectorSource,
Stamen
} from 'ol/source';
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';
const source = new VectorSource({
wrapX: false
});
//数据文件
const csv = meteoritesjson;
//feature集合
const features = [];
for (let i = 0; i < csv.length; i++) {
const coords = fromLonLat([parseFloat(csv[i].longitude), parseFloat(csv[i].latitude)]);
if (isNaN(coords[0]) || isNaN(coords[1])) {
//跳过bad data
continue;
}
features.push(new Feature({
mass: parseFloat(csv[i].mass) || 0,
year: parseInt(csv[i].id) || 0,
geometry: new Point(coords)
}));
}
source.addFeatures(features);
const map = new Map({
target: 'map',
layers: [
new TileLayer({
source: new Stamen({
layer: 'toner'
})
}),
new VectorLayer({
source: source
})
],
view: new View({
center: [0, 0],
zoom: 2
})
});
