Javascript 显示带有openlayers和外部geojson文件的简单图标
我需要一些帮助,我有下面的代码,它正在工作,但我想把de“geojsonObject”不放在变量中,而是放在一个.geojson文件中并加载它,我对javascript和geojson不太熟悉Javascript 显示带有openlayers和外部geojson文件的简单图标,javascript,openlayers,geojson,Javascript,Openlayers,Geojson,我需要一些帮助,我有下面的代码,它正在工作,但我想把de“geojsonObject”不放在变量中,而是放在一个.geojson文件中并加载它,我对javascript和geojson不太熟悉 import 'ol/ol.css'; import Feature from 'ol/Feature'; import Map from 'ol/Map'; import View from 'ol/View'; import GeoJSON from 'ol/format/GeoJSON'; impo
import 'ol/ol.css';
import Feature from 'ol/Feature';
import Map from 'ol/Map';
import View from 'ol/View';
import GeoJSON from 'ol/format/GeoJSON';
import Circle from 'ol/geom/Circle';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
import {OSM, Vector as VectorSource} from 'ol/source';
import {Circle as CircleStyle, Fill, Stroke, Style} from 'ol/style';
import {Icon} from 'ol/style';
var image = new CircleStyle({
radius: 5,
fill: null,
stroke: new Stroke({color: 'red', width: 1})
});
var styles = {
'Point': new Style({
image: new Icon({
rotation: 180 / 180 * 3.14,
src: 'data/test.svg'
})
})
};
var geojsonObject = {
'type': 'FeatureCollection',
'crs': {
'type': 'name',
'properties': {
'name': 'EPSG:3857'
}
},
'features': [{
'type': 'Feature',
'rotation': 180 / 180 * 3.14,
'geometry': {
'type': 'Point',
'coordinates': [0, 0]
}
}]
};
var styleFunction = function(feature) {
return styles[feature.getGeometry().getType()];
};
var vectorSource = new VectorSource({
features: (new GeoJSON()).readFeatures(geojsonObject)
});
vectorSource.addFeature(new Feature(new Circle([5e6, 7e6], 1e6)));
var vectorLayer = new VectorLayer({
source: vectorSource,
style: styleFunction
});
var map = new Map({
layers: [
new TileLayer({
source: new OSM()
}),
vectorLayer
],
target: 'map',
view: new View({
center: [0, 0],
zoom: 2
})
});
我尝试使用下面的test.geojson文件,但我不知道它是否正确,而且我想知道如何更改“vectorSource”以加载它
{
"type": "FeatureCollection",
"crs": {
"type": "name",
"properties": {
"name": "EPSG:3857"
}
},
"features": [{
"type": "Feature",
"rotation": 90 / 180 * 3.14,
"geometry": {
"type": "Point",
"coordinates": [0, 0]
}
}]
}
OpenLayers将加载并解析url
var vectorSource = new VectorSource({
format: new GeoJSON(),
url: 'test.geojson'
});
如果使用文件扩展名.geojson
,请确保在服务器MIME类型中启用了该扩展名(否则只需使用.json
)
如果要从geojson访问非标准属性,它们必须放在properties对象中
"features": [{
"type": "Feature",
"properties" : {
"rotation": 90 / 180 * 3.14
},
"geometry": {
"type": "Point",
"coordinates": [0, 0]
}
}]
将其重命名为test.geo.json,然后对您的文件发出本地get请求。对不起,我对javascript不太熟悉,如何才能做到这一点?谢谢Mike,还有一个问题,可以获取“属性”吗?由于它是非标准特性,我喜欢获取这些信息并在Js代码中设置一个变量?