目录
前言
openlayers从2.x到3.x的大版本更新中代码风格有非常大的变化，之后的版本变化均不大，建议找案例时注意版本区别，将2.x的代码改造成在3.x及以后版本可用的程度，要求对openlayers和js都有比较高的掌握。如果只需要即学即用，最好找同版本的代码。
本文中用到的代码，别人的一部分已经标注了链接地址，我写的一部分先上传至csdn：openlayers-markers.zip-Javascript文档类资源-优快云文库
https://download.youkuaiyun.com/download/YZero_cn/23669967，等我学会了怎么在服务器建资源站，会将代码包上传并将下载地址放到评论区。文中跳转链接如无法打开，会在评论区更新链接。
需要实现的目标
1.需求
对一个坐标数组使用循环添加坐标标记后，每个数组元素对应的标记都显示到地图上，而且均可以绑定监听事件，进行交互操作
2.问题复现
默认ol创建的地图只能添加一个标签，当已经存在一个标签时再添加标签，下一个标签会将上一个标签覆盖。当使用循环对一个坐标数组添加标记时，最终效果是地图上显示最后一个添加的数组的坐标标记，无法实现需求。
参考：Openlayers3点击获取坐标_会飞的程序猿的博客-优快云博客https://blog.youkuaiyun.com/u012374381/article/details/77673563
效果如上图所示，坐标数组中的每一组数据都被执行添加操作了，但最终只显示最后一次添加的效果。具体代码如下：
var vectorLayer = null;
//添加标记函数
function addMarker(coordinate) {
var feature = new ol.Feature({
geometry: new ol.geom.Point(coordinate),
name: 'locate',
population: 4000,
rainfall: 500
});
var iconStyle = new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.4, 37],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
src: "drawable/mark_icon.png"
})
});
feature.setStyle(iconStyle);
var marker = feature.createMarker();
vectorLayer == null ? null : map.removeLayer(vectorLayer);
vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [feature]
})
});
map.addLayer(vectorLayer);
//创建标记图层
var markers = new OpenLayers.Layer.Markers();
//相当于一个工厂
var feature = new OpenLayers.Feature(markers, new OpenLayers.LonLat(x,
y));
//创建标记
marker = feature.createMarker();
//向标记图层中添加一个标记
markers.addMarker(marker);
//向地图中添加标记图层
map.addLayer(markers);
}
//标记数据
var mark_arry = new Array(
["武汉","042101", [12728107.634791102,3570377.4129936807]],
["襄阳","042102", [12483328.651373856,3764370.76898836]],
["成都","042103", [11585162.889707971,3592173.446596622]],
["洛阳","042104", [12512680.470235365,4114635.799937798]],
["长沙","042105", [12569427.200601423,3275173.787963232]],
["郑州","042106", [12648677.171243925,4126376.5349469543]]
)
//通过遍历数组向地图中添加标记
function mark_fun(mark_arry) {
arr_length = mark_arry.length;
for (i = 0; i < arr_length; i++) {
console.log(i);
coordinate = mark_arry[i][2];
addMarker(coordinate);
// if (window.parent && window.parent.setMapxy) {
// window.parent.setMapxy(FormatNumber(coordinate[0], 6), FormatNumber(coordinate[1], 6));
}
coordinate = mark_arry[0][2];
addMarker(coordinate);
addMarker(mark_arry[1][2])
}
//页面加载完成后立即执行该函数
window.onload = function() {
mark_fun(mark_arry);
console.log(mark_arry);
}3.解决方法
在openlayers中添加多标签主流做法有两种，主要是：
1.创建多个markers层，在每一个层上添加一个marker标签，然后将多个markers层叠加到地图上。核心代码：
/**
*name 这个标记的名称
*x,这个标记的x坐标
*/
function addMarker(name,x, y) {
//创建标记图层
var markers = new OpenLayers.Layer.Markers(name);
//相当于一个工厂
var feature = new OpenLayers.Feature(markers, new OpenLayers.LonLat(x,
y));
//创建标记
marker = feature.createMarker();
//向标记图层中添加一个标记
markers.addMarker(marker);
//向地图中添加标记图层
map.addLayer(markers);
}由于我使用的是openlayers3.x的版本，这段代码是2.x版本的，我不会做版本转换，所以仅参考思路，本代码实际效果演示： Draw Feature Examplehttp://81.68.144.128:8080/openlayers-show/fix1/MyJsp.jsp
代码下载地址：
openlayers实现本地图片作为背景，添加marker标记_openlayers添加marker-Web服务器代码类资源-优快云文库
2.即本方法，参考自资料《OpenLayers3xCookBook》中关于marker的部分，创建features集群（数组），向其中添加多个feature对象，每一个对象即为一个marker标签。
var createIconStyle = function(country) {
return new ol.style.Style({
image: new ol.style.Icon({
src: '../../assets/images/flags/' + country + '.png'
})
})
};
var algeria = new ol.Feature(new ol.geom.Point([146759, 3297187]));
var libya = new ol.Feature(new ol.geom.Point([1927436, 3160212]));
var niger = new ol.Feature(new ol.geom.Point([968610, 1986139]));
algeria.setStyle(createIconStyle('algeria'));
libya.setStyle(createIconStyle('libya'));
niger.setStyle(createIconStyle('niger'));
var vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [algeria, libya, niger]
})
});
var map = new ol.Map({
view: new ol.View({
zoom: 3,
center: [1995923, -4167958]
}),
target: 'js-map',
layers: [
new ol.layer.Tile({
source: new ol.source.MapQuest({ layer: 'osm' })
}),
vectorLayer
]
});4.项目适配
-
资料演示中为每个标记点设置了不同的图标，在本项目中没有此需求，所以删掉函数，直接创建一个图标对象，指向固定的一个图标素材。
new_marker.setStyle(new ol.style.Style({ image: new ol.style.Icon({ src: 'drawable/mark_icon.png' }) })); -
演示资料中为了展示具体的创建过程，写了三个独立的feature对象创建指令，在项目中为了减少工作量，以及后期更容易拓展，提前创建一个features集群，对坐标数据数组遍历向集群中添加feature对象，这样后面只需要向数组中添加数据即可。
//提前创建标签集合 var my_features = new Array(); //向集合中添加标签 arr_length = mark_arry.length; for (i = 0; i < arr_length; i++) { console.log(i); coordinate = mark_arry[i]; my_features.push(createMarker(coordinate)); } //将标记添加到布局中 var vectorLayer = new ol.layer.Vector({ source: new ol.source.Vector({ //将这里原本才指定的features集群提到前面，在这里直接引用 // features: [algeria, libya, niger] features: my_features }) }); -
feature标记只有设置name属性后才可以通过feature.get("name")方法 指定特定标记，所以在坐标数组中给每一个坐标附带一个name值，而且为实现每一个标记都有其独立的交互行为，再在数组中附带一个参数值，同时在数组遍历时将这个参数值传递给feature对象。这样就构成了数组的基本结构：["武汉","042101", [12728107.634791102,3570377.4129936807]]，第一个元素是它的name属性，第二个元素是它携带的参数，第三个元素则是它在地图上的工程坐标，这个值也可以使用ol.proj.fromLonLat([x, y])计算得出，此处x，y是经纬度坐标。
var new_marker = new ol.Feature({ name: marker_name, citycode: marker_citycode, //这里的x，y是使用经纬度坐标计算得出的工程坐标 geometry: new ol.geom.Point([x, y]) }); -
点击标记后，需要显示对应城市的数据，所以在这里设置整个地图的点击事件监听，然后对点击获取到的数据做判断，是标记点则向接口请求该标记点的数据，如果不是标记点，则使界面重新初始化，清除之前获取到的数据。
// 创建全局变量，给刷新按钮传递城市编号 var click_city = null; //创建点击事件 map.on("click", function(evt) { console.log(evt) var feature = map.forEachFeatureAtPixel(evt.pixel, function(feature) { return feature; }); //是标记点 if (feature) { 向页面组件写入feature中携带的数据 $("#cityname").html(feature.get("name")); click_city = feature.get("citycode"); $("#citycode").html(click_city); //向api接口请求获取数据 table.getaqi(click_city); //不是标记点 } else { //清除页面上的数据 click_city = null; $("#cityname").html(null); table.clean(); } }, map);
结尾
至此，向同一markers层添加多marker标记的任务全部完成。
在线演示链接：Openlayers Springboot Demohttp://81.68.144.128:8080/openlayers-show/%E4%BF%AE%E6%94%B9%E5%90%8E.html
这就是最终展示的效果了，网页中的所有数据都是演示数据，没有实际参考意义。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
