将事件点击添加到标记 openlayers
Add event click into marker openlayers
美好的一天，我正在尝试将事件添加到地图上的动态编程标记。标记确实显示在屏幕上，但是当您单击以显示 div 时，不是只显示与书签相关的 div，而是激活事件单击屏幕上的所有 div .
创建标记的地方是调用函数 crearMarcadores 并发送坐标和变量 cc 以用于 div.
的 id
var centro = ol.extent.getCenter(boundingBox);
crearMarcadores(centro, cc);
div 如果您正确创建它们，据我了解它必须是每个标记的 div。
我几乎可以肯定我的错误在于：
var feature = map.forEachFeatureAtPixel(evt.pixel,
function(feature, layer) {
return feature;
});
因为它执行了一个 foreach，所以应该只 return 标记功能。但我不知道如何 运行 它只在当前标记中。虽然我找到的所有例子都是 foreach.
非常感谢您的宝贵帮助。
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point([-90.204114, 13.866291]),
name: 'nombre',
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: 'http://openlayers.org/en/v3.9.0/examples/data/icon.png'
}))
});
iconFeature.setStyle(iconStyle);
var vectorSource = new ol.source.Vector({
features: [iconFeature]
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource
});
var layer = new ol.layer.Vector({ /*layer con los poligonos*/
source: new ol.source.Vector()
})
function crearMarcadores(centroPoligono, CentroCosto) {
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point(centroPoligono),
name: CentroCosto,
population: 4000,
rainfall: 500
});
vectorSource.addFeature(iconFeature);
iconFeature.setStyle(iconStyle);
//------------start creation popup
var div = document.createElement('div');
div.setAttribute("id", CentroCosto);
div.setAttribute("style", "width: 580px; height: 400px; float: left");
document.body.appendChild(div);
var element = document.getElementById(CentroCosto);
var popup = new ol.Overlay({
element: element,
positioning: 'bottom-center',
stopEvent: false
});
map.addOverlay(popup);
//------------end creation popup
// --------------display popup on click
map.on('click', function(evt) {
var feature = map.forEachFeatureAtPixel(evt.pixel,
function(feature, layer) {
return feature;
});
if (feature) {
var geometry = feature.getGeometry();
var coord = geometry.getCoordinates();
popup.setPosition(coord);
$(element).popover({
'placement': 'top',
'html': true,
'content': feature.get('name')
});
$(element).popover('show');
} else {
$(element).popover('destroy');
}
});
//---------------end display popup on click
} //termina funcion crearMarcadores
function generarMapas() {
var FechaInicial = '';
var FechaFinal = '';
var Finca = '';
$.ajax({
type: "POST",
url: "FrmMapaAvanceRiego.aspx\/FillMapas",
data: '{FechaInicial: "' + FechaInicial + '", FechaFinal: "' + FechaFinal + '", Finca: "' + Finca + '"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
var data = JSON.parse(msg.d);
coordenadas = [];
cc = [];
$.each(data, function(i, item) {
coordenadas[i] = item.Coordenadas;
cc[i] = item.CentroDeCostoLote;
crearPoligonos(coordenadas[i], cc[i]);
});
},
error: errores
});
}
function errores(msg) {
alert('Error: ' + msg.responseText);
}
function crearPoligonos(coordenada, cc) {
//console.log(coordenada);
console.log(cc);
var coordenadas = coordenada.split(' ') // Separamos por espacio
.map(function(data) {
var info = data.split(','), // Separamos por coma
coord = { // Creamos el obj de coordenada
lat: parseFloat(info[1]),
lng: parseFloat(info[0])
};
return coord;
});
var parserJSTS = new jsts.io.OL3Parser();
var poly = new ol.Feature({
geometry: new ol.geom.Polygon([coordenadas.map(function(_ref) {
var lng = _ref.lng,
lat = _ref.lat;
return [lng, lat];
})])
});
var boundingBox = poly.getGeometry().getExtent()
var polybbox = new ol.Feature({
geometry: ol.geom.Polygon.fromExtent(boundingBox)
})
var [xmin, ymin, xmax, ymax] = boundingBox
var porcentaje = 0.50
var newXmax = xmin + ((xmax - xmin) * porcentaje)
var newBoundingBox = [xmin, ymin, newXmax, ymax]
var polybbox50 = new ol.Feature({
geometry: ol.geom.Polygon.fromExtent(newBoundingBox)
})
var polybbox50jsts = parserJSTS.read(polybbox50.getGeometry())
var polyjsts = parserJSTS.read(poly.getGeometry())
var intersectionJSTSGeometry = polyjsts.intersection(polybbox50jsts)
var intersectionGeometry = parserJSTS.write(intersectionJSTSGeometry)
var newPoly = new ol.Feature({
geometry: intersectionGeometry
})
//console.log(boundingBox)
newPoly.setStyle(new ol.style.Style({
fill: new ol.style.Fill({
color: '#02ABFF'
})
}))
// Descomentar para ver los bounding boxes
// layer.getSource().addFeature(polybbox)
// layer.getSource().addFeature(polybbox50)
layer.getSource().addFeature(poly)
layer.getSource().addFeature(newPoly)
var centro = ol.extent.getCenter(boundingBox);
//console.log(centro);
crearMarcadores(centro, cc);
}
//------------start creation map
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.BingMaps({
key:
'AudCyoI6al0eAZmQhwmI1IG9AOdGH8DHHk6PsiGta1faEACulxawFU9KV-XAvZ8f',
imagerySet: 'AerialWithLabels'
})
}),
layer, vectorLayer
],
target: 'map',
controls: ol.control.defaults({
attributionOptions: ({
collapsible: false
})
}),
view: new ol.View({
center: [-90.365730, 13.954185],
zoom: 9,
projection: 'EPSG:4326'
})
});
// --------------end creation map
<link href="https://openlayers.org/en/v4.5.0/css/ol.css" rel="stylesheet"/>
<script src="https://openlayers.org/en/v4.5.0/build/ol.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.2/moment.min.js"></script>
<div id="map" class="map" tabindex="0">
</div>
<div id="popup"></div>
forEachFeatureAtPixel (api doc) 遍历该位置每个层 的每个特征 。所以你可能会从其他层得到意想不到的结果。
但是该函数还允许您定义一个 layerFilter，它决定您是否要包含图层。
示例：
map.addLayer(new ol.layer.Vector({
source: vectorSource1,
myKey: 'magic' // arbitrary property to distinguish between the layers
});
map.addLayer(new ol.layer.Vector({
source: vectorSource2,
myKey: 'someotherlayer'
});
// this only gives back the first feature at this position
// on the layer with the property `myKey` equal to `'magic'`
const feature = map.forEachFeatureAtPixel(
pixel,
function(someFeature){ return someFeature; }, // stop at the very first feature
{
layerFilter: function(layer) { return layer.get('myKey') === 'magic'; }
}
);
美好的一天，我正在尝试将事件添加到地图上的动态编程标记。标记确实显示在屏幕上，但是当您单击以显示 div 时，不是只显示与书签相关的 div，而是激活事件单击屏幕上的所有 div .
创建标记的地方是调用函数 crearMarcadores 并发送坐标和变量 cc 以用于 div.
的 idvar centro = ol.extent.getCenter(boundingBox);
crearMarcadores(centro, cc);
div 如果您正确创建它们，据我了解它必须是每个标记的 div。
我几乎可以肯定我的错误在于：
var feature = map.forEachFeatureAtPixel(evt.pixel,
function(feature, layer) {
return feature;
});
因为它执行了一个 foreach，所以应该只 return 标记功能。但我不知道如何 运行 它只在当前标记中。虽然我找到的所有例子都是 foreach.
非常感谢您的宝贵帮助。
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point([-90.204114, 13.866291]),
name: 'nombre',
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: 'http://openlayers.org/en/v3.9.0/examples/data/icon.png'
}))
});
iconFeature.setStyle(iconStyle);
var vectorSource = new ol.source.Vector({
features: [iconFeature]
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource
});
var layer = new ol.layer.Vector({ /*layer con los poligonos*/
source: new ol.source.Vector()
})
function crearMarcadores(centroPoligono, CentroCosto) {
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point(centroPoligono),
name: CentroCosto,
population: 4000,
rainfall: 500
});
vectorSource.addFeature(iconFeature);
iconFeature.setStyle(iconStyle);
//------------start creation popup
var div = document.createElement('div');
div.setAttribute("id", CentroCosto);
div.setAttribute("style", "width: 580px; height: 400px; float: left");
document.body.appendChild(div);
var element = document.getElementById(CentroCosto);
var popup = new ol.Overlay({
element: element,
positioning: 'bottom-center',
stopEvent: false
});
map.addOverlay(popup);
//------------end creation popup
// --------------display popup on click
map.on('click', function(evt) {
var feature = map.forEachFeatureAtPixel(evt.pixel,
function(feature, layer) {
return feature;
});
if (feature) {
var geometry = feature.getGeometry();
var coord = geometry.getCoordinates();
popup.setPosition(coord);
$(element).popover({
'placement': 'top',
'html': true,
'content': feature.get('name')
});
$(element).popover('show');
} else {
$(element).popover('destroy');
}
});
//---------------end display popup on click
} //termina funcion crearMarcadores
function generarMapas() {
var FechaInicial = '';
var FechaFinal = '';
var Finca = '';
$.ajax({
type: "POST",
url: "FrmMapaAvanceRiego.aspx\/FillMapas",
data: '{FechaInicial: "' + FechaInicial + '", FechaFinal: "' + FechaFinal + '", Finca: "' + Finca + '"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
var data = JSON.parse(msg.d);
coordenadas = [];
cc = [];
$.each(data, function(i, item) {
coordenadas[i] = item.Coordenadas;
cc[i] = item.CentroDeCostoLote;
crearPoligonos(coordenadas[i], cc[i]);
});
},
error: errores
});
}
function errores(msg) {
alert('Error: ' + msg.responseText);
}
function crearPoligonos(coordenada, cc) {
//console.log(coordenada);
console.log(cc);
var coordenadas = coordenada.split(' ') // Separamos por espacio
.map(function(data) {
var info = data.split(','), // Separamos por coma
coord = { // Creamos el obj de coordenada
lat: parseFloat(info[1]),
lng: parseFloat(info[0])
};
return coord;
});
var parserJSTS = new jsts.io.OL3Parser();
var poly = new ol.Feature({
geometry: new ol.geom.Polygon([coordenadas.map(function(_ref) {
var lng = _ref.lng,
lat = _ref.lat;
return [lng, lat];
})])
});
var boundingBox = poly.getGeometry().getExtent()
var polybbox = new ol.Feature({
geometry: ol.geom.Polygon.fromExtent(boundingBox)
})
var [xmin, ymin, xmax, ymax] = boundingBox
var porcentaje = 0.50
var newXmax = xmin + ((xmax - xmin) * porcentaje)
var newBoundingBox = [xmin, ymin, newXmax, ymax]
var polybbox50 = new ol.Feature({
geometry: ol.geom.Polygon.fromExtent(newBoundingBox)
})
var polybbox50jsts = parserJSTS.read(polybbox50.getGeometry())
var polyjsts = parserJSTS.read(poly.getGeometry())
var intersectionJSTSGeometry = polyjsts.intersection(polybbox50jsts)
var intersectionGeometry = parserJSTS.write(intersectionJSTSGeometry)
var newPoly = new ol.Feature({
geometry: intersectionGeometry
})
//console.log(boundingBox)
newPoly.setStyle(new ol.style.Style({
fill: new ol.style.Fill({
color: '#02ABFF'
})
}))
// Descomentar para ver los bounding boxes
// layer.getSource().addFeature(polybbox)
// layer.getSource().addFeature(polybbox50)
layer.getSource().addFeature(poly)
layer.getSource().addFeature(newPoly)
var centro = ol.extent.getCenter(boundingBox);
//console.log(centro);
crearMarcadores(centro, cc);
}
//------------start creation map
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.BingMaps({
key:
'AudCyoI6al0eAZmQhwmI1IG9AOdGH8DHHk6PsiGta1faEACulxawFU9KV-XAvZ8f',
imagerySet: 'AerialWithLabels'
})
}),
layer, vectorLayer
],
target: 'map',
controls: ol.control.defaults({
attributionOptions: ({
collapsible: false
})
}),
view: new ol.View({
center: [-90.365730, 13.954185],
zoom: 9,
projection: 'EPSG:4326'
})
});
// --------------end creation map
<link href="https://openlayers.org/en/v4.5.0/css/ol.css" rel="stylesheet"/>
<script src="https://openlayers.org/en/v4.5.0/build/ol.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.2/moment.min.js"></script>
<div id="map" class="map" tabindex="0">
</div>
<div id="popup"></div>
forEachFeatureAtPixel (api doc) 遍历该位置每个层 的每个特征 。所以你可能会从其他层得到意想不到的结果。
但是该函数还允许您定义一个 layerFilter，它决定您是否要包含图层。
示例：
map.addLayer(new ol.layer.Vector({
source: vectorSource1,
myKey: 'magic' // arbitrary property to distinguish between the layers
});
map.addLayer(new ol.layer.Vector({
source: vectorSource2,
myKey: 'someotherlayer'
});
// this only gives back the first feature at this position
// on the layer with the property `myKey` equal to `'magic'`
const feature = map.forEachFeatureAtPixel(
pixel,
function(someFeature){ return someFeature; }, // stop at the very first feature
{
layerFilter: function(layer) { return layer.get('myKey') === 'magic'; }
}
);