OpenLayers3入門篇-建立點和線
阿新 • • 發佈:2019-01-25
地圖是由圖層組成的,而圖層又分為ol.layer.Tile和ol.layer.Vector,ol.layer.Tile可以構建底圖,ol.layer.Vector指定向量圖層,畫點畫線或者建立其他基本就是建立ol.layer.Vector,ol.layer.Vector和map物件一樣,也是由許多屬性構成,但是建立點線基本只會用到source屬性。Source又由feature組成。
樣例程式碼-建立點
1.建立Featrue,設定geometry屬性
var saoguan = new ol.Feature({ geometry:new ol.geom.Point(ol.proj.fromLonLat([113.5991,24.8166]))
});
2.設定此點的樣式
saoguan.setStyle(new ol.style.Style({
image:new ol.style.Icon({
color:'#4271AE',
src:'data/dot.png'
})
})
);
3.傳入source
var source = new ol.source.Vector({
features:[saoguan]
});
4.傳入layer,設定點
var layer = new ol.layer.Vector({ source: source });
5.設定底圖layer
var rasterLayer = new ol.layer.Tile({
source: new ol.source.OSM()
});
6.最後將地圖layer和點layer一併傳入map中
var map = new ol.Map({ layers: [rasterLayer, layer], target: document.getElementById('map'), view: new ol.View({ center: ol.proj.fromLonLat([113.5991,24.8166]), zoom: 3 })
});
畫點的方法詳見:
http://openlayers.org/en/latest/examples/icon-color.html?q=point
建立線
步驟和畫點差不多,只是在前兩步中的方法有不一樣
1.設定一個feature
var feature = new ol.Feature({
geometry:new ol.geom.LineString(
[[113.5991,24.8166], [114.5991,25.8166]])
});
2.設定style
feature.setStyle(new ol.style.Style({
stroke: new ol.style.Stroke({
width: 3,
color: [255, 0, 0, 1]
})
}));