如何使不同的矢量层可访问
how to make different vectorlayers accessible?
这是我仅使用1个VectorLayer的原始工作代码。
<html>
<head>
<link rel="stylesheet" type="text/css" href="slova.css">
<link rel="stylesheet" type="text/css" href="blink.css"></head>
<body>
<div id="mapdiv"></div>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script>
map = new OpenLayers.Map("mapdiv");
map.addLayer(new OpenLayers.Layer.OSM());
epsg4326 = new OpenLayers.Projection("EPSG:4326");
projectTo = map.getProjectionObject();
var lonLat = new OpenLayers.LonLat( 16.49679 ,43.52764 ).transform(epsg4326, projectTo);
var zoom=12;
map.setCenter (lonLat, zoom);
var vectorLayer = new OpenLayers.Layer.Vector("Overlay");
var feature = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Point( 16.42253, 43.50928 ).transform(epsg4326, projectTo),
{description:'Marjan'} ,
{externalGraphic: 'img/marker.png', graphicHeight: 25, graphicWidth: 21, graphicXOffset:-12, graphicYOffset:-25 }
);
vectorLayer.addFeatures(feature);
var feature = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Point( 16.56580, 43.50722 ).transform(epsg4326, projectTo),
{description:'Perun'} ,
{externalGraphic: 'img/marker.png', graphicHeight: 25, graphicWidth: 21, graphicXOffset:-12, graphicYOffset:-25 }
);
vectorLayer.addFeatures(feature);
var feature = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Point( 16.40478, 43.57865 ).transform(epsg4326, projectTo),
{description:'Kozjak'},
{externalGraphic: 'img/marker.png', graphicHeight: 25, graphicWidth: 21, graphicXOffset:-12, graphicYOffset:-25 }
);
vectorLayer.addFeatures(feature);
map.addLayer(vectorLayer);
//Add a selector control to the vectorLayer with popup functions
var controls = {
selector: new OpenLayers.Control.SelectFeature(vectorLayer, { onSelect: createPopup, onUnselect: destroyPopup })
};
function createPopup(feature) {
feature.popup = new OpenLayers.Popup.FramedCloud("pop",
feature.geometry.getBounds().getCenterLonLat(),
null,
'<div class="slika"><h6>INDEKS RIZIKA POŽARA RASLINJA</h6><div class="container"><div class="panel rizik1 "><h1>VRLO MALA</h1></div><div class="panel rizik2"><h2>MALA</h2></div><div class="panel rizik3"><h3>UMJERENA</h3></div><div class="panel rizik4 blink_me"><h4>VELIKA</h4></div><div class="panel rizik5"><h5>VRLO VELIKA</h5></div></div></div>',
null,
true,
function() { controls['selector'].unselectAll(); }
);
//feature.popup.closeOnMove = true;
map.addPopup(feature.popup);
}
function destroyPopup(feature) {
feature.popup.destroy();
feature.popup = null;
}
map.addControl(controls['selector']);
controls['selector'].activate();
</script>
</body></html>
如图所示。
我尝试通过添加新的图层和标记来更改其中一个标记的弹出内容。新代码如下所示：
<html>
<head><title>Indeks opasnosti</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="slova.css">
<link rel="stylesheet" type="text/css" href="blink.css"></head>
<body>
<div id="mapdiv"></div>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script>
map = new OpenLayers.Map("mapdiv");
map.addLayer(new OpenLayers.Layer.OSM());
epsg4326 = new OpenLayers.Projection("EPSG:4326"); //WGS 1984 projection
projectTo = map.getProjectionObject(); //The map projection (Spherical Mercator)
var lonLat = new OpenLayers.LonLat( 16.49679 ,43.52764 ).transform(epsg4326, projectTo);
var zoom=12;
map.setCenter (lonLat, zoom);
var vectorLayer = new OpenLayers.Layer.Vector("Overlay");
var vectorLayer1 = new OpenLayers.Layer.Vector("Overlay");
// Define markers as "features" of the vector layer:
var feature = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Point( 16.42253, 43.50928 ).transform(epsg4326, projectTo),
{description:'Marjan'} ,
{externalGraphic: 'img/marker.png', graphicHeight: 25, graphicWidth: 21, graphicXOffset:-12, graphicYOffset:-25 }
);
vectorLayer.addFeatures(feature);
var feature = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Point( 16.56580, 43.50722 ).transform(epsg4326, projectTo),
{description:'Perun'} ,
{externalGraphic: 'img/marker.png', graphicHeight: 25, graphicWidth: 21, graphicXOffset:-12, graphicYOffset:-25 }
);
vectorLayer.addFeatures(feature);
var feature1 = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Point( 16.40478, 43.57865 ).transform(epsg4326, projectTo),
{description:'Kozjak'},
{externalGraphic: 'img/marker.png', graphicHeight: 25, graphicWidth: 21, graphicXOffset:-12, graphicYOffset:-25 }
);
vectorLayer1.addFeatures(feature1);
map.addLayer(vectorLayer);
map.addLayer(vectorLayer1);
var controls = {
selector: new OpenLayers.Control.SelectFeature(vectorLayer, { onSelect: createPopup, onUnselect: destroyPopup })
};
var controls1 = {
selector: new OpenLayers.Control.SelectFeature(vectorLayer1, { onSelect: createPopup, onUnselect: destroyPopup })
};
function createPopup(feature) {
feature.popup = new OpenLayers.Popup.FramedCloud("pop",
feature.geometry.getBounds().getCenterLonLat(),
null,
'<div class="slika"><h6>INDEKS RIZIKA POŽARA RASLINJA</h6><div class="container"><div class="panel rizik1 "><h1>VRLO MALA</h1></div><div class="panel rizik2"><h2>MALA</h2></div><div class="panel rizik3"><h3>UMJERENA</h3></div><div class="panel rizik4 blink_me"><h4>VELIKA</h4></div><div class="panel rizik5"><h5>VRLO VELIKA</h5></div></div></div>',
null,
true,
function() { controls['selector'].unselectAll(); }
);
map.addPopup(feature.popup);
}
function createPopup(feature1) {
feature1.popup = new OpenLayers.Popup.FramedCloud("pop",
feature1.geometry.getBounds().getCenterLonLat(),
null,
'<div class="slika"><h6>INDEKS RIZIKA POŽARA RASLINJA</h6><div class="container"><div class="panel rizik1 "><h1>VRLO MALA</h1></div><div class="panel rizik2 blink_me"><h2>MALA</h2></div><div class="panel rizik3"><h3>UMJERENA</h3></div><div class="panel rizik4 blink_me"><h4>VELIKA</h4></div><div class="panel rizik5"><h5>VRLO VELIKA</h5></div></div></div>',
null,
true,
function() { controls1['selector'].unselectAll(); }
);
map.addPopup(feature1.popup);
}
function destroyPopup(feature) {
feature.popup.destroy();
feature.popup = null;
}
function destroyPopup(feature1) {
feature1.popup.destroy();
feature1.popup = null;
}
map.addControl(controls['selector']);
controls['selector'].activate();
map.addControl(controls1['selector']);
controls1['selector'].activate();
</script>
</body></html>
但正如你在这里看到的，它不能正常工作。它仅显示具有 #1 索引的元素。我该怎么做才能同时显示功能和功能 1？
首先，如果你定义一个同名的函数两次，你只需覆盖第一个声明。createPopup 和 detroyPopup 就是这种情况。
无论如何，OpenLayers.Control.SelectFeature 控件接受一个或多个矢量层作为第一个参数。因此，您可以对两个层使用单个控件，如下所示：
new OpenLayers.Control.SelectFeature([vectorLayer, vectorLayer1], { onSelect: createPopup, onUnselect: destroyPopup })
但是，我不认为使用多个层是满足您需求的正确解决方案（如果我理解正确的话！
我认为您应该将所有要素添加到单个图层中，使用属性来识别它们（"描述"是可以的）。
您可以为每个功能创建具有不同 html 的弹出窗口，如下所示：
<code><pre>
function createPopup(feature) {
var html;
if(feature.attributes.description == 'Marjan') {
html = '<div class="slika"><h6>....</div>';
} else if(feature.attributes.description == 'Kozjak') {
html = '<div class="slika"><h6>....</div>';
}
feature.popup = new OpenLayers.Popup.FramedCloud("pop",
feature.geometry.getBounds().getCenterLonLat(),
null,
html,
null,
true,
function() { controls['selector'].unselectAll(); }
);
map.addPopup(feature.popup);
}
</pre></code>
相关文章：
- 在js中访问元素时不透明度和样式未定义，但在css中定义
- 函数中的 angularJS 访问对象属性不起作用
- 角度路由;在浏览器中直接访问URL时不起作用，但在单击时起作用
- 硒蟒蛇使不可见元素可见
- 窗口.打印使不透明度的页面背景变为白色
- 访问 redux 而不做出反应
- 在方法调用对象之外访问变量而不使它们全局化(可能吗?
- 如何在不使用 eval 的情况下使不存在的(非成员，非全局）方法可调用
- 访问 d3 中不同级别的嵌套列表
- jQuery 访问 iframe DOM 不起作用
- 测试互联网(谷歌、aws等）是否可访问的最不粗鲁的方式
- 使用带有jquery/javascript的for循环创建动态数组不能访问外部或不能访问全局
- 访问元素而不引用它
- 如何访问变量而不是重新声明它?或者还有什么替代方法
- 如何使不可见的倒计时，即页面关闭后继续
- 从远程计算机访问时Javascript不工作
- AngularJS的JSON对象可以在视图中访问，但不能在控制器中访问
- 我如何在一个函数中访问这个而不使用javascript中的self
- 如何使不确定复选框触发其他复选框的功能
- 使所点击的链接被访问，而不实际向服务器发送请求
