openlayers加载svg_【地理空间】OpenLayers加载geojson文件

OpenLayers简述

OpenLayers是用于制作交互式Web地图的开源客户端JavaScript类库，制作的地图几乎可以在所有的浏览器中查看。它可以显示从任何来源加载的地图图块，矢量数据和标记。OpenLayers的开发旨在进一步利用各种地理信息。

官网：https://openlayers.org/，在这里可以查找相关api的说明以及实例。

通过OpenLayers加载geoJson文件

获取geoJson文件

参考这篇文章，通过QGIS将osm文件转化为geoJson格式文件。

加载文件

一开始在网上找到的openlayers类库，发现都无法运行，后来多番查找，终于找到了可以运行成功的类库。如果无法加载类库的话，可以通过下载openlayers的js文件，本地引用一下就好。

加载GeoJSON

//osm地图

var vectorone = new ol.layer.Tile({

source: new ol.source.OSM()

});

//style

//填充样式,颜色以及透明度

var fill = new ol.style.Fill({

color: 'rgba(255, 255, 255, 0.6)'

});

//边界样式

var stroke = new ol.style.Stroke({

color: '#f5036c',

width: 1

});

var stylePolygons = [

new ol.style.Style({

// image: new ol.style.Circle({

// fill: new ol.style.Fill({

// color: 'rgba(255,0,255,0.4)'

// }),

// stroke: new ol.style.Stroke({

// color: '#cc3540',

// width: 1.25

// }),

// radius: 5

// }),

text: new ol.style.Text({ //文本样式

font: '12px Calibri,sans-serif',

fill: new ol.style.Fill({

color: '#000'

}),

stroke: new ol.style.Stroke({

color: '#fff',

width: 3

})

}),

fill: fill,

stroke: stroke

})

];

//加载geojson数据

var pointGeoJsonLayer = new ol.layer.Vector({

title: 'points',

source: new ol.source.Vector({

projection: 'EPSG:4326',

url: './points.geojson',

format: new ol.format.GeoJSON()

})

});

var lineGeoJsonLayer = new ol.layer.Vector({

title: 'lines',

source: new ol.source.Vector({

projection: 'EPSG:4326',

url: './lines.geojson',

format: new ol.format.GeoJSON()

})

});

var mulsGeoJsonLayer = new ol.layer.Vector({

title: 'multilinestrings',

source: new ol.source.Vector({

projection: 'EPSG:4326',

url: './multilinestrings.geojson',

format: new ol.format.GeoJSON()

})

});

var mulpGeoJsonLayer = new ol.layer.Vector({

title: 'multipolygons',

source: new ol.source.Vector({

projection: 'EPSG:4326',

url: './multipolygons.geojson',

format: new ol.format.GeoJSON()

}),

style: stylePolygons

});

//加载地图

var map = new ol.Map({

layers: [

// vectorone,

// pointGeoJsonLayer,

lineGeoJsonLayer,

// mulsGeoJsonLayer,

// mulpGeoJsonLayer

],

target: 'map',

controls: ol.control.defaults({

attributionOptions: ({

collapsible: true

})

}),

view: new ol.View({

center: ol.proj.fromLonLat([116.4196, 39.9322]),

zoom: 13

})

});

加载geoJson

加载OSM地图

openlayers可以直接加在OSM地图作为底图，我们可以根据需要，像在高德地图上面实现标记、画线等操作，具体的操作方法根据需要研究一下openlayers的相关api，但是效果可能不如高德地图。

//加载地图

var map = new ol.Map({

layers: [

vectorone,

// pointGeoJsonLayer,

// lineGeoJsonLayer,

// mulsGeoJsonLayer,

// mulpGeoJsonLayer

],

target: 'map',

controls: ol.control.defaults({

attributionOptions: ({

collapsible: true

})

}),

view: new ol.View({

center: ol.proj.fromLonLat([116.4196, 39.9322]),

zoom: 13

})

});

加载OSM