我已经创建了一个 OpenLayers.Style 来为我的多边形着色,一个可以调整我的点和所有爵士乐的样式,现在我想向用户解释这些样式代表什么。
我在 OpenLayers 中看不到任何允许我使用这些样式绘制自己的图例的内容。一切似乎都指向我向我发送数据的假定 map 服务器,而我没有。
目前看起来我必须绘制一些样本点/区域并屏幕抓取它们以制作我自己的图例。有没有更好的方法可以直接基于样式来做,这样当样式改变时我就不必重新生成图像?
更新
我有一个很好的答案,它依赖于 GeoExt(以及 ExtJS),我仍然想听听是否有人有 jQuery 兼容的答案。特别是如果它是纯 Javascript 和 OpenLayers。
最佳答案
我能够使用 ol.Map 类作为符号的容器来解决我的图例需求。也许有点黑客,但似乎适用于大多数(?)矢量图层(我没有 WMS)。
所以我正在做的是:
if(lyr instanceof ol.layer.Vector)
var style = lyr.getStyle();
var image = style.getImage();
if(image){
if(image instanceof ol.style.Icon){
//raster icon from url
var icon2 = new ol.style.Icon( ({
src: image.getSrc()
}))
var iconStyle2 = new ol.style.Style({
image: icon2
});
row = {};
row.style = iconStyle2;
row.title = lyr.get('title');
}
else{ //ol.style.RegularShape?
row = {};
row.style = style;
row.title = lyr.get('title');
}
}else{
row = {};
row.style = style;
row.title = lyr.get('title');
}
//geometry type
var feats = lyr.getSource().getFeatures();
if (feats && feats.length>0){
if(feats[0].getGeometry() instanceof ol.geom.Point || feats[0].getGeometry() instanceof ol.geom.MultiPoint){
row.geomType="point";
}else if (feats[0].getGeometry() instanceof ol.geom.LineString || feats[0].getGeometry() instanceof ol.geom.MultiLineString){
row.geomType="line";
}else{
row.geomType="polygon";
}
}
for (i = 0; i < legendRows.length; i++) {
row = document.createElement("tr");
//symbol
cell = document.createElement("td");
cell.style="width:35px";
var div = document.createElement("div");
div.style="width:32px; height:32px;";
div.id = "mapLegendRowSymbolDiv" + i;
tble.appendChild(row);
row.appendChild(cell);
cell.appendChild(div);
//layer title
cell = document.createElement("td");
tble.appendChild(row);
row.appendChild(cell);
cell.innerHTML=legendRows[i].title;
}
//append table
$( "#legendText" ).empty();
$( "#legendText" ).append(tble);
//loop legend rows and and insert the maps
var extent = [0, 0, 32, 32];
var projection = new ol.proj.Projection({
code: 'xkcd-image',
units: 'pixels',
extent: extent
});
for (i = 0; i < legendRows.length; i++) {
//target div
var targetDiv = document.getElementById("mapLegendRowSymbolDiv" + i);
//layer for icon
var sourceLegend = new ol.source.Vector({wrapX: false});
var vectorLegend = new ol.layer.Vector({
source: sourceLegend,
style: legendRows[i].style
});
//map
var mapLegend = new ol.Map({
controls: [],
layers: [
new ol.layer.Image({
source: new ol.source.ImageStatic({
projection: projection,
imageExtent: extent
})
}),
vectorLegend
],
target: targetDiv,
view: new ol.View({
projection: projection,
center: ol.extent.getCenter(extent),
zoom: 2,
maxZoom: 2
})
});
//icon feature depending on type
var geom;
if(legendRows[i].geomType=='point'){
geom = new ol.geom.Point([16,16]);
}else if(legendRows[i].geomType=='polygon'){
var polyCoords = [];
polyCoords.push([15.7, 15.7]);
polyCoords.push([16.3, 15.7]);
polyCoords.push([16.3, 16.3]);
polyCoords.push([15.7, 16.3]);
polyCoords.push([15.7, 15.7]);
geom = new ol.geom.Polygon([polyCoords]);
}else{
var lineCoords = [];
lineCoords.push([15.6, 15.6]);
lineCoords.push([16, 16]);
lineCoords.push([16, 15.8]);
lineCoords.push([16.4, 16.2]);
geom = new ol.geom.LineString(lineCoords);
}
var feature = new ol.Feature({
geometry: geom
});
vectorLegend.getSource().addFeature(feature);
}
有了这个,我能够创建和更新一个单独的图例对话框(jQuery UI):
我还没有测试很多,这种方法可能存在一些问题......
关于openlayers - 创建 map 图例以匹配 OpenLayers.Style,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/5267554/