解析OpenLayers 3載入向量地圖源的問題
阿新 • • 發佈：2021-12-23
一、向量地圖
向量圖使用直線和曲線來描述圖形，這些圖形的元素是一些點、線、矩形、多邊形、圓和弧線等等，它們都是通過數學公式計算獲得的。由於向量圖形可通過公式計算獲得，所以向量圖形檔案體積一般較小。向量圖形最大的優點是無論放大、縮小或旋轉等不會失真。在地圖中存在著大量的應用，是地圖資料中非常重要的組成部分。
為了便於儲存，傳遞，使用，向量地圖會按照一定的格式來表達，比如常見的GeoON，TopoJSON，GML，KML，ShapeFile等等。 除了最後一個ShapeFile，其他幾個格式的向量地圖OpenLayers 3都支援。
二、使用GeoJson格式載入向量地圖
1、專案結構
2、map.geojson
{"type":"FeatureCollection","features":[{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[104.08859252929688,30.738294707383368],[104.18060302734375,30.691068801620155],[104.22042846679688,30.739475058679485],[104.08859252929688,30.738294707383368]]]}},{"type":"Feature",30.52323029223123],[104.08309936523438,30.359841397025537],[104.1998291015625,30.519681272749402],30.52323http://www.cppcns.com
029223123]]]}},"coordinates":[[[103.70269775390624,30.675715404167743],[103.69308471679688,30.51494904517773],[103.83316040039062,[103.86474609375,30.682801890953776],[103.70269775390624,30.675715404167743]]]}}]}
3、map.html
<!Doctype html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='Content-Type' content='text/html;charset=utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<meta content='always' name='referrer'>
<title>OpenLayers 3 :載入向量地圖</title>
<link href='ol. ' rel='stylesheet' type='text/css'/>
<script type='text/' src='ol.js' charset='utf-8'></script>
</head>
<body>
<div id='map' style='width: 1000px;height: 800px;margin: auto'></div>
<script>
/**
* 建立地圖
*/
new ol.Map({
// 設定地圖圖層
layers: [
//建立一個使用Open Street Map地圖源的圖層
new ol.layer.Tile({
source: new ol.source.OSM()
}),//載入一個geojson的向量地圖
new ol.layer.Vector({
source: new ol.source.Vector({
url: 'geojson/map.geojson',// 地圖來源
format: new ol.format.GeoJSON() // 解析向量地圖的格式化類
})
})
],// 設定顯示地圖的檢視
view: new ol.View({
center: [104,30],// 設定地圖顯示中心於經度104度，緯度30度處
zoom: 10,// 設定地圖顯示層級為10
projection: 'EPSG:4326' //設定投影
}),// 讓id為map的div作為地圖的容器
target: 'map'
})
</script>
</body>
</html>
4、執行結果
三、獲取向量地圖上的所有Feature,並設定樣式
1、map2.html
<!Doctype html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='Content-Type' content='text/html;charset=utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<meta content='always' name='referrer'>
<title>OpenLayers 3 :獲取向量地圖上的所有Feature,並設定樣式</title>
<link href='ol.css ' rel='stylesheet' type='text/css'/>
<script type='text/script' src='ol.js' charset='utf-8'></script>
</head>
<body>
<div id='map' style='width: 800px;height:500px;margin: auto'></div>
<br>
<div style='width: 800px;margin: auto'>
<button type="button" onclick = 'updateStyle()' >修改Feature樣式</button>
</div>
<script>
/**
* 建立地圖
*/
var map = new ol.Map({
// 設定地圖圖層
layers: [
//建立一個使用Open Street Map地圖源的圖層
new ol.layer.Tile({
source: new ol.source.OSM()
}),],// 讓id為map的div作為地圖的容器
target: 'map'
});
//建立一個向量地圖源圖層，並設定樣式
var vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
url: 'geojson/map.geojson',// 地圖來源
format: new ol.format.GeoJSON() // 解析向量地圖的格式化類
}),// 設定樣式，顏色為綠色，線條粗細為1個畫素
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'green',size: 1
})
})
});
map.addLayer(vectorLayer);
/**
* 獲取向量圖層上所有的Feature,並設定樣式
*/
function updateStyle(){
//建立樣式，顏色為紅色，線條粗細為3個畫素
var featureStyle = new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'red',size: 3
})
})
//獲取向量圖層上所有的Feature
var features = vectorLayer.getSource()http://www.cppcns.com.getFeatures()
//遍歷所有的Feature，併為每個Feature設定樣式
for (var i = 0;i<features.length;i++){
features[i].setStyle(featureStyle)
}
}
</script>
</body>
</html>
2、執行結果
4、向量地圖座標系轉換
向量地圖用的是EPSG:4326，我們可以通過OpenLayers 3內建了地圖格式解析器，將座標轉換為EPSG:3857
1、map3.html
<!Doctype html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='Content-Type' content='text/html;charset=utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<meta content='always' name='referrer'>
<title>OpenLayers 3 :向量地圖座標系轉換</title>
<link href='ol.css ' rel='stylesheet' type='text/css'/>
<script type='text/javascript' src='ol.js' charset='utf-8'></script>
<script src="-3.6.0.js"></script>
</head>
<body>
<div id='map' style='width: 1000px;height: 800px;margin: auto'></div>
<script>
/**
* 建立地圖
*/
var map = new ol.Map({
// 設定地圖圖層
layers: [
//建立一個使用Open Street Map地圖源的圖層
new ol.layer.Tile({
source: new ol.source.OSM()
})
],// 設定顯示地圖的檢視
view: new ol.View({
center: ol.proj.fromLonLat([104,30]),// 設定地圖顯示層級為10
}),// 讓id為map的div作為地圖的容器
target: 'map'
});
// 載入向量地圖
function addGeoJSON(data) {
www.cppcns.comvar layer = new ol.layer.Vector({
source: new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(data,{ // 用readFeatures方法可以自定義座標系
dataProjection: 'EPSG:4326',// 設定JSON資料使用的座標系
featureProjection: 'EPSG:3857' // 設定當前地圖使用的feature的座標系
})
})
});
map.addLayer(layer);
};
$.ajax({
url: 'geojson/map.geojson',success: function(data,status) {
// 成功獲取到資料內容後，呼叫方法將向量地圖新增到地圖
addGeoJSON(data);
}
});
</script>
</body>
</html>
2、執行結果www.cppcns.com
到此這篇關於OpenLayers 3載入向量地圖源的文章就介紹到這了,更多相關OpenLayers 3載入向量地圖內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！