Javascript 如何从JSON文件在OpenLayers中绘制点类型几何图形
我有一个网页，其中包含一个使用OpenLayers创建的地图实例。它应该通过点类型几何显示世界上所有的海峡。数据（纬度、经度）以JSON格式提供。我能够在地图上画一个点，并给它一个样式，比如红点等等。但是由于我对openlayers很幼稚，所以我无法找到一种方法来对JSON文件中的所有点做同样的事情。因此，我的问题是如何从地图上的JSON文件中绘制所有点，并为它们提供一些样式，比如从JSON数据中着色和显示点旁边的名称。 我将OpenLayers 5.1.3与我的代码jQuery2.3一起使用Javascript 如何从JSON文件在OpenLayers中绘制点类型几何图形,javascript,openlayers,openlayers-3,openlayers-5,Javascript,Openlayers,Openlayers 3,Openlayers 5,我有一个网页，其中包含一个使用OpenLayers创建的地图实例。它应该通过点类型几何显示世界上所有的海峡。数据（纬度、经度）以JSON格式提供。我能够在地图上画一个点，并给它一个样式，比如红点等等。但是由于我对openlayers很幼稚，所以我无法找到一种方法来对JSON文件中的所有点做同样的事情。因此，我的问题是如何从地图上的JSON文件中绘制所有点，并为它们提供一些样式，比如从JSON数据中着色和显示点旁边的名称。 我将OpenLayers 5.1.3与我的代码jQuery2.3一起使用
<body>
<div id="map" class="map"></div>
<script type="text/javascript">
var raster = new ol.layer.Tile({
source: new ol.source.OSM()
});
var vectorSource = new ol.source.Vector({
wrapX: false
});
function styleFunction(feature) {
var geometry = feature.getGeometry();
console.log(feature);
var styles = [
new ol.style.Style({
image: new ol.style.Circle({
radius: 3,
stroke: new ol.style.Stroke({
color: [180, 0, 0, 1]
}),
fill: new ol.style.Fill({
color: [180, 0, 0, 0.3]
})
})
})
];
return styles;
}
var vectorPoints = new ol.layer.Vector({
source: vectorSource,
style: styleFunction
});
const map = new ol.Map({
layers: [raster,vectorPoints],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
</script>
</body>
var features = data.map(item => { //iterate through array...
let longitude = item.longitude,
latitude = item.latitude,
iconFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([longitude, latitude], 'EPSG:4326',
'EPSG:3857')),
name: item.preferredGazetteerName
}),
iconStyle = new ol.style.Style({
image: new ol.style.Icon ({
anchor: [0.3, 10],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
src: '//openlayers.org/en/v3.20.1/examples/data/icon.png'
}),
text: new ol.style.text({
text: "sample"
})
});
iconFeature.setStyle(iconStyle);
return iconFeature;
var光栅=新建ol.layer.Tile({
来源：new ol.source.OSM（）
}),
vectorSource=新ol.source.Vector({
wrapX：错误
}),
json=[{
“地名录来源”：“ASFA叙词表”，
“placeType”：“海峡”，
“纬度”：67.25916667，
“经度”：26.082222，
“minLatitude”：空，
“最小经度”：空，
“maxLatitude”：空，
“Max经度”：空，
“精度”：280000，
“首选地名”：“丹麦海峡”，
“首选地名录”：“英语”，
“状态”：“标准”
}, {
“地名录来源”：“ASFA叙词表”，
“placeType”：“海峡”，
“纬度”：55.31，
“经度”：14.49，
“minLatitude”：空，
“最小经度”：空，
“maxLatitude”：空，
“Max经度”：空，
“精度”：35000，
“首选地名”：“博恩霍尔姆海峡”，
“首选地名录”：“英语”，
“状态”：“标准”
}],
/**
*组成弹出窗口的元素。
*/
container=document.getElementById（'popup'），
content=document.getElementById（'popup-content'），
closer=document.getElementById（'popup-closer'），
/**
*创建覆盖以将弹出窗口锚定到地图。
*/
叠加=新的ol.overlay({
元素：容器，
自动扫描：是的，
自动规划：{
持续时间：250
}
});
/**
*添加单击处理程序以隐藏弹出窗口。
*@return{boolean}不跟随href。
*/
closer.onclick=函数（）{
覆盖设置位置（未定义）；
closer.blur（）；
返回false；
};
函数样式函数（特征）{
var geometry=feature.getGeometry（）；
console.log（特性）；
变量样式=[
新ol风格({
图片：新ol.style.Circle({
半径：3，
笔划：新的ol风格笔划({
颜色：[180,0,0,1]
}),
填充：新的ol.style.fill({
颜色：[180,0,0,0.3]
})
})
})
];
返回样式；
}
var vectorPoints=新ol.layer.Vector({
来源：矢量源，
style:styleFunction
});
常量映射=新ol.map({
图层：[光栅、矢量点]，
目标：“地图”，
视图：新ol.view({
中间：[0,0]，
缩放：1
}),
覆盖层：[覆盖层]
});
/**
*将单击处理程序添加到地图以呈现弹出窗口。
*/
map.on（'singleclick'，函数（evt）{
设f=map.forEachFeatureAtPixel(
evt.pixel，
功能（英尺，层）{
返回ft；
}
);
如果（f&&f.get（'type'）=='click'）{
设坐标=evt.coordinate；
content.innerHTML='您单击此处：'+f.get（'desc'）；
叠加。设置位置（坐标）；
}
});
函数addMarker（数据）{
var features=data.map（项=>{//遍历数组。。。
设longitude=item.longitude，
纬度=项目。纬度，
iconFeature=新的ol.功能({
几何：新的ol.geom.Point（ol.proj.transform（[经度，纬度]，“EPSG:4326”，
"EPSG:3857"),，
键入：“单击”，
描述：item.preferredgazentername，
}),
iconStyle=新的ol.style.style({
图片：新建ol.style.Icon（/**@type{module:ol/style/Icon~Options}*/({
主播：[0.5,46]，
主播：“分数”，
anchorYUnits:'像素'，
src:“//openlayers.org/en/v3.20.1/examples/data/icon.png”
})),
文本：新的ol.style.text({
文本：item.preferredgazentername
})
});
iconFeature.setStyle（iconStyle）；
返回iconFeature；
});
var vectorSource=新的ol.source.Vector({
功能：功能//添加一组功能
});
var vectorLayer=新ol.layer.Vector({
来源：矢量源
});
map.addLayer（矢量层）；
}
addMarker（json）
.ol弹出窗口{
位置：绝对位置；
背景色：白色；
-webkit过滤器：投影（0 1px4pRGBA（0,0,0,0.2））；
滤镜：阴影（0.1px4pRGBA（0,0,0,0.2））；
填充：15px；
边界半径：10px；
边框：1px实心#中交；
底部：12px；
左：-50px；
最小宽度：280px；
}
.ol弹出窗口：之后，
.ol弹出窗口：之前{
最高：100%；
边框：实心透明；
内容：“；
身高：0；
宽度：0；
位置：绝对位置；
指针事件：无；
}
.ol弹出窗口：在{
边框顶色：白色；
边框宽度：10px；
左：48px；
左边距：-10px；
}
.ol弹出窗口：之前{
边框顶色：#中交；
边框宽度：11px；
左：48px；
左边距：-11px；
}
.ol弹出式关闭器{
文字装饰：无；
位置：绝对位置；
顶部：2个；
右：8px；
}
.ol弹出式关闭器：之后{
内容：“✖";
}
我明白了，我错过了风格的使用
text : new ol.style.Text({
font: '10px Verdana',
text: item.preferredGazetteerName,
fill: new ol.style.Fill({
color: [64, 64, 64, 1]
})
})
我是
text : new ol.style.Text({
font: '10px Verdana',
text: item.preferredGazetteerName,
fill: new ol.style.Fill({
color: [64, 64, 64, 1]
})
})