解析OpenLayers 3加載矢量地圖源的問題
一、矢量地圖
矢量圖使用直線和曲線來描述圖形，這些圖形的元素是一些點、線、矩形、多邊形、圓和弧線等等，它們都是通過數(shù)學(xué)公式計算獲得的。由于矢量圖形可通過公式計算獲得，所以矢量圖形文件體積一般較小。矢量圖形最大的優(yōu)點是無論放大、縮小或旋轉(zhuǎn)等不會失真。在地圖中存在著大量的應(yīng)用，是地圖數(shù)據(jù)中非常重要的組成部分。
為了便于存儲，傳遞，使用，矢量地圖會按照一定的格式來表達(dá)，比如常見的GeoJSON，TopoJSON，GML，KML，ShapeFile等等。 除了最后一個ShapeFile，其他幾個格式的矢量地圖OpenLayers 3都支持。
二、使用GeoJson格式加載矢量地圖
1、項目結(jié)構(gòu)
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","properties":{},"geometry":{"type":"Polygon","coordinates":[[[104.08859252929688,30.52323029223123],[104.08309936523438,30.359841397025537],[104.1998291015625,30.519681272749402],[104.08859252929688,30.52323029223123]]]}},{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[103.70269775390624,30.675715404167743],[103.69308471679688,30.51494904517773],[103.83316040039062,30.51494904517773],[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.css ' rel='stylesheet' type='text/css'/>
<script type='text/javascript' src='ol.js' charset='utf-8'></script>
</head>
<body>
<div id='map' style='width: 1000px;height: 800px;margin: auto'></div>
<script>
/**
* 創(chuàng)建地圖
*/
new ol.Map({
// 設(shè)置地圖圖層
layers: [
//創(chuàng)建一個使用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() // 解析矢量地圖的格式化類
})
})
],
// 設(shè)置顯示地圖的視圖
view: new ol.View({
center: [104,30], // 設(shè)置地圖顯示中心于經(jīng)度104度，緯度30度處
zoom: 10, // 設(shè)置地圖顯示層級為10
projection: 'EPSG:4326' //設(shè)置投影
}),
// 讓id為map的div作為地圖的容器
target: 'map'
})
</script>
</body>
</html>
4、運行結(jié)果
三、獲取矢量地圖上的所有Feature,并設(shè)置樣式
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,并設(shè)置樣式</title>
<link href='ol.css ' rel='stylesheet' type='text/css'/>
<script type='text/javascript' 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>
/**
* 創(chuàng)建地圖
*/
var map = new ol.Map({
// 設(shè)置地圖圖層
layers: [
//創(chuàng)建一個使用Open Street Map地圖源的圖層
new ol.layer.Tile({
source: new ol.source.OSM()
}),
],
// 設(shè)置顯示地圖的視圖
view: new ol.View({
center: [104,30], // 設(shè)置地圖顯示中心于經(jīng)度104度，緯度30度處
zoom: 10, // 設(shè)置地圖顯示層級為10
projection: 'EPSG:4326' //設(shè)置投影
}),
// 讓id為map的div作為地圖的容器
target: 'map'
});
//創(chuàng)建一個矢量地圖源圖層，并設(shè)置樣式
var vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
url: 'geojson/map.geojson', // 地圖來源
format: new ol.format.GeoJSON() // 解析矢量地圖的格式化類
}),
// 設(shè)置樣式，顏色為綠色，線條粗細(xì)為1個像素
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'green',
size: 1
})
})
});
map.addLayer(vectorLayer);
/**
* 獲取矢量圖層上所有的Feature,并設(shè)置樣式
*/
function updateStyle(){
//創(chuàng)建樣式，顏色為紅色，線條粗細(xì)為3個像素
var featureStyle = new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'red',
size: 3
})
})
//獲取矢量圖層上所有的Feature
var features = vectorLayer.getSource().getFeatures()
//遍歷所有的Feature，并為每個Feature設(shè)置樣式
for (var i = 0;i<features.length;i++){
features[i].setStyle(featureStyle)
}
}
</script>
</body>
</html>
2、運行結(jié)果
4、矢量地圖坐標(biāo)系轉(zhuǎn)換
矢量地圖用的是EPSG:4326，我們可以通過OpenLayers 3內(nèi)置了地圖格式解析器，將坐標(biāo)轉(zhuǎn)換為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 :矢量地圖坐標(biāo)系轉(zhuǎn)換</title>
<link href='ol.css ' rel='stylesheet' type='text/css'/>
<script type='text/javascript' src='ol.js' charset='utf-8'></script>
<script src="jquery-3.6.0.js"></script>
</head>
<body>
<div id='map' style='width: 1000px;height: 800px;margin: auto'></div>
<script>
/**
* 創(chuàng)建地圖
*/
var map = new ol.Map({
// 設(shè)置地圖圖層
layers: [
//創(chuàng)建一個使用Open Street Map地圖源的圖層
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
// 設(shè)置顯示地圖的視圖
view: new ol.View({
center: ol.proj.fromLonLat([104,30]), // 設(shè)置地圖顯示中心于經(jīng)度104度，緯度30度處
zoom: 10, // 設(shè)置地圖顯示層級為10
}),
// 讓id為map的div作為地圖的容器
target: 'map'
});
// 加載矢量地圖
function addGeoJSON(data) {
var layer = new ol.layer.Vector({
source: new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(data, { // 用readFeatures方法可以自定義坐標(biāo)系
dataProjection: 'EPSG:4326', // 設(shè)定JSON數(shù)據(jù)使用的坐標(biāo)系
featureProjection: 'EPSG:3857' // 設(shè)定當(dāng)前地圖使用的feature的坐標(biāo)系
})
})
});
map.addLayer(layer);
};
$.ajax({
url: 'geojson/map.geojson',
success: function(data, status) {
// 成功獲取到數(shù)據(jù)內(nèi)容后，調(diào)用方法將矢量地圖添加到地圖
addGeoJSON(data);
}
});
</script>
</body>
</html>
2、運行結(jié)果
到此這篇關(guān)于OpenLayers 3加載矢量地圖源的文章就介紹到這了,更多相關(guān)OpenLayers 3加載矢量地圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript 對象模型-執(zhí)行模型分析2009-12-12
與Netscape相反，IE中的事件傳遞方向是從事情發(fā)生的對象開始，然后依次由該對象向所在的父節(jié)點傳遞。2009-12-12
處理HTML DOM文檔存在一個難題是，JavaScript可以在DOM完全加載之前執(zhí)行，這會給你的代碼引發(fā)不少的潛在問題;針對這個問題，本文給予適當(dāng)?shù)慕鉀Q方法，僅供參考2012-11-11
幾種設(shè)置表單元素中文本輸入框不可編輯的方法總結(jié)
這篇文章主要是對幾種設(shè)置表單元素中文本輸入框不可編輯的方法進(jìn)行了總結(jié)介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
在web端，輸入的時候，很容易在文本框消失焦點的時候，點擊退格鍵，頁面就回退了，下面是一種屏蔽頁面回退鍵的方法,一起看看吧2016-12-12
JavaScript Scoping and Hoisting 翻譯
希望這篇文章能夠給JavaScript程序員最容易困惑的部分一些啟示。我盡力寫的全面，以免引起更多的困惑。如果我寫錯了或是漏掉了某些重要的東西，請一定讓我知道2012-07-07
這篇文章主要為大家介紹了JSONP解決同源策略限制引起跨域問題原理解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
文本框input聚焦失焦樣式實現(xiàn)代碼，需要的朋友可以參考下2012-10-10
es7學(xué)習(xí)教程之fetch解決異步嵌套問題的方法示例
這篇文章主要給大家介紹了關(guān)于es7學(xué)習(xí)教程之fetch解決異步嵌套問題的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。2017-07-07
JavaScript簡單實現(xiàn)網(wǎng)頁回到頂部功能
JavaScript簡單實現(xiàn)網(wǎng)頁回到頂部功能,大家可以參考一下2013-11-11