点
const layer = new VectorLayer({
source: new VectorSource({
features: new GeoJSON().readFeatures(
{
type: 'FeatureCollection',
features: [
{
type: 'Feature',
geometry: {
type: 'MultiPoint',
coordinates: [
[117.283042, 31.86119],
[121.687899486, 31.24916171]
...............
...............
]
}
}
]
},
{
dataProjection: 'EPSG:4326', // 原始数据坐标系
featureProjection: 'EPSG:3857' // 需要显示的坐标系
}
)
}),
style: new Style({
image: new StyleCircle({
radius: 6,
fill: new Fill({
color: '#f00'
}),
stroke: new Stroke({
color: '#ff0',
width: 2
})
})
})
})
window.olMap.addLayer(layer)
线
const layer = new VectorLayer({
source: new VectorSource({
features: new GeoJSON().readFeatures(
{
type: 'FeatureCollection',
features: [
{
type: 'Feature',
geometry: {
type: 'LineString',
coordinates: [
[117.283042, 31.86119],
[121.687899486, 31.24916171],
...............
...............
]
}
}
]
},
{
dataProjection: 'EPSG:4490',
featureProjection: 'EPSG:3857'
}
)
}),
style: new Style({
stroke: new Stroke({
color: '#f00',
width: 3
})
})
})
window.olMap.addLayer(layer)
面
const layer = new VectorLayer({
source: new VectorSource({
// anHui 是安徽省 GeoJSON 面数据 大家可以网上自行下载导入
features: new GeoJSON().readFeatures(anHui, {
dataProjection: 'EPSG:4490', // 原数据的投影坐标
featureProjection: 'EPSG:3857' // 规定要素以哪种坐标显示
})
}),
style: new Style({
fill: new Fill({
//矢量图层填充颜色,以及透明度
color: 'rgba(33,194,219,0.5)'
}),
stroke: new Stroke({
//边界样式
color: 'rgba(100, 90, 209, 0.6)',
width: 3
}),
text: new Text({
//文本样式
font: '12px Calibri,sans-serif',
fill: new Fill({
color: '#000'
}),
stroke: new Stroke({
color: '#fff',
width: 3
})
})
})
})
window.olMap.addLayer(layer)