廢話不多說暴拄，直接上代碼吧漓滔。
//點(diǎn)
var pointFeature = new ol.Feature(new ol.geom.Point([0, 0]));
//線
var lineFeature = new ol.Feature(
new ol.geom.LineString([[-1e7, 1e6], [-1e6, 3e6]]));
//面
var polygonFeature = new ol.Feature(
new ol.geom.Polygon([[[-3e6, -1e6], [-3e6, 1e6],
[-1e6, 1e6], [-1e6, -1e6], [-3e6, -1e6]]]));
//也可以這樣創(chuàng)建feature
//var geom=new ol.geom.Polygon([坐標(biāo)數(shù)組]);
//var polygonFeature=new Feature({
// geomtery:geom
//})
//圖層資源
var source=new ol.source.Vector({
features: [pointFeature, lineFeature, polygonFeature]
})
//也可以這樣加載feature
//source.addFeaute(polygonFeature);
//圖層
var layer=new ol.layer.Vector({
source:source
,style: new ol.style.Style({
image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
opacity: 0.95,
src: 'https://openlayers.org/en/v3.19.1/examples/data/icon.png'
})),
stroke: new ol.style.Stroke({
width: 3,
color: [255, 0, 0, 1]
}),
fill: new ol.style.Fill({
color: [0, 0, 255, 0.6]
})
})
})
//也可以這樣添加sourc
//map.addSource(source);
//地圖
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.TileJSON({
url: 'https://api.tiles.mapbox.com/v3/mapbox.geography-class.json?secure'
})
})
,layer
],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
//也可以這樣加圖層
//map.addLayer(layer);
//跳轉(zhuǎn)到定區(qū)域
map.getView().fit(polygonFeature.getGeometry(),map.getSize());
