如何添加标记与OpenLayers 3
我正在尝试在OpenLayers 3地图上添加制作者。
我发现的唯一例子就是OpenLayers示例列表中的这个例子。
但是这个例子在OpenLayers 2使用了ol.Style.Icon而不是OpenLayers 2 。
第一个问题
唯一的区别是你必须设置图片url，但它是唯一的方式来添加一个标记？
另外OpenLayers 3似乎没有标记图像，所以如果没有别的方法ol.Style.Icon
第二个问题
如果有人能够给我一个函数的例子，在地图加载后添加标记或图标，这将是非常好的。
从我所了解的例子中，他们为图标创build一个图层
var iconFeature = new ol.Feature({ geometry: new ol.geom.Point(ol.proj.transform([-72.0704, 46.678], 'EPSG:4326', 'EPSG:3857')), name: 'Null Island', population: 4000, rainfall: 500 }); var iconStyle = new ol.style.Style({ image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({ anchor: [0.5, 46], anchorXUnits: 'fraction', anchorYUnits: 'pixels', opacity: 0.75, src: 'data/icon.png' })) }); iconFeature.setStyle(iconStyle); var vectorSource = new ol.source.Vector({ features: [iconFeature] }); var vectorLayer = new ol.layer.Vector({ source: vectorSource });
然后他们在初始化地图时设置图标层
var map = new ol.Map({ layers: [new ol.layer.Tile({ source: new ol.source.OSM() }), vectorLayer], target: document.getElementById('map'), view: new ol.View2D({ center: [0, 0], zoom: 3 }) });
如果我想添加多个标记，是否必须为每个标记创build一个图层？
我怎么能添加很多标记到一个图层？ 我无法弄清楚这部分是怎么样的
var vectorSource = new ol.source.Vector({ features: [iconFeature] }); var vectorLayer = new ol.layer.Vector({ source: vectorSource });
谢谢
Q1。 标记在OpenLayers 2中被认为是不赞成的，尽pipe这从文档中不是很明显。 相反，你应该使用一个OpenGLayer.Feature.Vector与外部graphics设置为一些图像源的风格。 这个概念已经被转移到OpenLayers 3，所以没有标记类，并且按照你引用的例子完成。
Q2。 ol.source.Vector需要一系列的function，注意行，function：[iconFeature]，所以你会创build一个图标function的数组，并添加function，例如：
var iconFeatures=[]; var iconFeature = new ol.Feature({ geometry: new ol.geom.Point(ol.proj.transform([-72.0704, 46.678], 'EPSG:4326', 'EPSG:3857')), name: 'Null Island', population: 4000, rainfall: 500 }); var iconFeature1 = new ol.Feature({ geometry: new ol.geom.Point(ol.proj.transform([-73.1234, 45.678], 'EPSG:4326', 'EPSG:3857')), name: 'Null Island Two', population: 4001, rainfall: 501 }); iconFeatures.push(iconFeature); iconFeatures.push(iconFeature1); var vectorSource = new ol.source.Vector({ features: iconFeatures //add an array of features }); var iconStyle = new ol.style.Style({ image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({ anchor: [0.5, 46], anchorXUnits: 'fraction', anchorYUnits: 'pixels', opacity: 0.75, src: 'data/icon.png' })) }); var vectorLayer = new ol.layer.Vector({ source: vectorSource, style: iconStyle });
显然，这可以通过将所有ol.Feature创build内置在基于某些数据源的循环内更优雅地处理，但是我希望这可以展示这种方法。 请注意，您也可以将样式应用于ol.layer.Vector，以便将其应用于添加到图层的所有要素，而不必在单个要素上设置样式，假设您希望它们成为同样，显然。
编辑：这个答案似乎并没有工作。 这里是一个更新的小提琴 ，它通过使用vectorSource.addFeature将特征（图标）添加到循环中的空vector源，然后将全部添加到图层vector。 在更新我的原始答案之前，我会等着看是否适合您。
有一个很好的教程： http : //openlayersbook.github.io
未经testing，但可能有帮助
var features = []; //iterate through array... for( var i = 0 ; i < data.length ; i++){ var item = data[i]; //get item var type = item.type; //get type var longitude = item.longitude; //coordinates var latitude = item.latitude; /*.... * now get your specific icon...('..../ic_customMarker.png') * by eg switch case... */ var iconPath = getIconPath(type); //create Feature... with coordinates var iconFeature = new ol.Feature({ geometry: new ol.geom.Point(ol.proj.transform([longitude, latitude], 'EPSG:4326', 'EPSG:3857')) }); //create style for your feature... var iconStyle = new ol.style.Style({ image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({ anchor: [0.5, 46], anchorXUnits: 'fraction', anchorYUnits: 'pixels', opacity: 0.75, src: iconPath })) }); iconFeature.setStyle(iconStyle); features.push(iconFeature); //next item... } /* * create vector source * you could set the style for all features in your vectoreSource as well */ var vectorSource = new ol.source.Vector({ features: features //add an array of features //,style: iconStyle //to set the style for all your features... }); var vectorLayer = new ol.layer.Vector({ source: vectorSource }); map.addLayer(vectorLayer);
var exampleLoc = ol.proj.transform( [131.044922, -25.363882], 'EPSG:4326', 'EPSG:3857'); var map = new ol.Map({ target: 'map', renderer: 'canvas', view: new ol.View2D({ projection: 'EPSG:3857', zoom: 3, center: exampleLoc }), layers: [ new ol.layer.Tile({source: new ol.source.MapQuest({layer: 'osm'})}) ] }); map.addOverlay(new ol.Overlay({ position: exampleLoc, element: $('<img src="resources/img/marker-blue.png">') .css({marginTop: '-200%', marginLeft: '-50%', cursor: 'pointer'}) .tooltip({title: 'Hello, world!', trigger: 'click'}) })); map.on('postcompose', function(evt) { evt.vectorContext.setFillStrokeStyle( new ol.style.Fill({color: 'rgba(255, 0, 0, .1)'}), new ol.style.Stroke({color: 'rgba(255, 0, 0, .8)', width: 3})); evt.vectorContext.drawCircleGeometry( new ol.geom.Circle(exampleLoc, 400000)); }); var exampleKml = new ol.layer.Vector({ source: new ol.source.KML({ projection: 'EPSG:3857', url: 'data/example.kml' }) }); map.addLayer(exampleKml);
