美文网首页
ol3中的geom、feature、layer、地图的关系及操作

ol3中的geom、feature、layer、地图的关系及操作

作者: bibichuan | 来源:发表于2017-06-14 15:32 被阅读1750次

废话不多说,直接上代码吧。

//点

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]]]));

//也可以这样创建feature

//var geom=new ol.geom.Polygon([坐标数组]);

//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);

//跳转到定区域

map.getView().fit(polygonFeature.getGeometry(),map.getSize());

相关文章

网友评论

      本文标题:ol3中的geom、feature、layer、地图的关系及操作

      本文链接:https://www.haomeiwen.com/subject/zaujhttx.html