OpenLayers简述
OpenLayers是用于制作交互式Web地图的开源客户端JavaScript类库，制作的地图几乎可以在所有的浏览器中查看。它可以显示从任何来源加载的地图图块，矢量数据和标记。OpenLayers的开发旨在进一步利用各种地理信息。
官网：https://openlayers.org/，在这里可以查找相关api的说明以及实例。
通过OpenLayers加载geoJson文件
获取geoJson文件
参考这篇文章，通过QGIS将osm文件转化为geoJson格式文件。
加载文件
一开始在网上找到的openlayers类库，发现都无法运行，后来多番查找，终于找到了可以运行成功的类库。如果无法加载类库的话，可以通过下载openlayers的js文件，本地引用一下就好。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8"/>
<title>加载GeoJSON</title>
<script src="https://openlayers.org/en/v5.3.0/build/ol.js"></script>
<link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css">
</head>
<body>
<div id="map" class="map"></div>
<script>
//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
})
});
</script>
</body>
</html>
加载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
网友评论