OpenLayers官方教程-使用Canvas 2D渲染陨石

在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
    })
});