在OpenLayers 6中瑰钮，可以對(duì)不同圖層使用不同的渲染方式漓踢，Canvas 2D 或是WebGL
- 數(shù)據(jù)文件的格式是CSV魂奥，我將其轉(zhuǎn)換成了JSON（有現(xiàn)成的在線(xiàn)網(wǎng)站進(jìn)行轉(zhuǎn)換）诚欠，以便直接導(dǎo)入匈辱。
- 當(dāng)你打開(kāi)頁(yè)面時(shí)棚辽，你會(huì)發(fā)現(xiàn)卡頓很厲害苍息，JavaScript VM高達(dá)120MB+疾渴，同時(shí)處理這么多點(diǎn)已經(jīng)力不從心了~~
直接貼出主要代碼诅诱，與官方略有不同髓堪，沒(méi)有使用Ajax，同時(shí)也對(duì)數(shù)據(jù)進(jìn)行了轉(zhuǎn)換
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
});
//數(shù)據(jù)文件
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])) {
//跳過(guò)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
})
});
