OpenLayers簡述
OpenLayers是用于制作交互式Web地圖的開源客戶端JavaScript類庫，制作的地圖幾乎可以在所有的瀏覽器中查看。它可以顯示從任何來源加載的地圖圖塊，矢量數(shù)據(jù)和標(biāo)記。OpenLayers的開發(fā)旨在進(jìn)一步利用各種地理信息。
官網(wǎng)：https://openlayers.org/，在這里可以查找相關(guān)api的說明以及實例。
通過OpenLayers加載geoJson文件
獲取geoJson文件
參考這篇文章，通過QGIS將osm文件轉(zhuǎn)化為geoJson格式文件。
加載文件
一開始在網(wǎng)上找到的openlayers類庫，發(fā)現(xiàn)都無法運行，后來多番查找，終于找到了可以運行成功的類庫。如果無法加載類庫的話，可以通過下載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" 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數(shù)據(jù)
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地圖作為底圖，我們可以根據(jù)需要，像在高德地圖上面實現(xiàn)標(biāo)記、畫線等操作，具體的操作方法根據(jù)需要研究一下openlayers的相關(guān)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
