利用openlayers6加载本地.geojson文件图层
导入
import { Vector as VectorLayer } from 'ol/layer';
import { Vector as VectorSource } from 'ol/source';
import { Circle as CircleStyle, Fill, Stroke, Style } from 'ol/style';
import GeoJSON from 'ol/format/GeoJSON';
import axios from 'axios';
直接以图层形式加载
var layer = new VectorLayer({
source: new VectorSource({
url: url,
format: new GeoJSON(),
projection: 'EPSG:4326',
}),
style: new Style({
stroke: new Stroke({
color: 'yellow',
width: 1
}),
fill: new Fill({
color: 'rgba(255, 255, 0, 0.1)'
})
}),
name: 'name',
visible: true,
zIndex: 2000 || 98,
title: 'base',
projection: 'EPSG:4326'
});
map.addLayer(layer);
利用axio读取文件加载
axios({
url: url
}).then((res) => {
let pJSON = (new GeoJSON()).readFeatures(res.data)
var vectorSource = new VectorSource({
features: pJSON
});
var vectorLayer = new VectorLayer({
source: vectorSource,
style: new Style({
stroke: new Stroke({
color: 'yellow',
width: 1
}),
fill: new Fill({
color: 'rgba(255, 255, 0, 0.1)'
})
})
});
map.addLayer(vectorLayer)
});
利用fetch读取文件加载
fetch(url).then(function (response) {
return response.json();
}).then(function (json) {
var vectorSource = new VectorSource({
features: (new GeoJSON()).readFeatures(json)
});
var vectorLayer = new VectorLayer({
source: vectorSource,
style: new Style({
stroke: new Stroke({
color: 'yellow',
width: 1
}),
fill: new Fill({
color: 'rgba(255, 255, 0, 0.1)'
})
})
});
map.addLayer(vectorLayer)
})
网友评论