Openlayers 在OSM中显示带有标签的标记
由于谷歌API收费，我想将谷歌地图集成到OSM中。 所以我想在OSM地图中显示带有标签的标记。我将如何实现它？用于在特定位置显示图标的函数LoadVehicledata（）可以正常工作。但是函数DisplayMarker（）不会在特定的Lat-Long上显示标签。我想结合上述功能，以显示一个标签上的图标，拉特长。我试了很多方法。有什么建议吗Openlayers 在OSM中显示带有标签的标记,openlayers,openstreetmap,Openlayers,Openstreetmap,由于谷歌API收费，我想将谷歌地图集成到OSM中。 所以我想在OSM地图中显示带有标签的标记。我将如何实现它？用于在特定位置显示图标的函数LoadVehicledata（）可以正常工作。但是函数DisplayMarker（）不会在特定的Lat-Long上显示标签。我想结合上述功能，以显示一个标签上的图标，拉特长。我试了很多方法。有什么建议吗 <link href="~/Content/themes/ol.css" rel="stylesheet" /> <script
<link href="~/Content/themes/ol.css" rel="stylesheet" />
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script src="~/Scripts/ol.js"></script>
<body>
<div id="map" style="width: 100vw; height: 100vh;"></div>
<div id="overlay" style="background-color: yellow; width: 20px; height: 20px; border-radius: 10px;">
<label id="lblVehicle"> Vehicle </label>
</div>
<script>
var map;
var mapLat = 33.540008;
var mapLng = -111.869822;
var mapDefaultZoom = 6;
var _vehData = [{ "vehicleID": 69, "latitude": 33.540008, "longitude": -111.869822, "course": 3.0, "speed": 0.0, "gpsDateTime": "2019-05-10T02:08:20", "cityCode": "PHX", "details": "69 st:2 ", "minsSinceLastGPS": 0, "status": 8, "assignedStatus": 0, "stops": 0, "guests": 0, "airportID": "CHT", "fleet": "ECAR", "peggedStatus": 1 }];
initialize_map();
function initialize_map() {
map = new ol.Map({
target: "map",
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([mapLng, mapLat]),
zoom: mapDefaultZoom
})
});
}
function LoadVehicledata(){
for (var i = 0; i < _vehData.length-1; i++) {
add_map_point(_vehData[i].latitude, _vehData[i].longitude);
}
}
function add_map_point(lat, lng) {
var vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([parseFloat(lng), parseFloat(lat)], 'EPSG:4326', 'EPSG:3857')),
})]
}),
style: new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, -10],
anchorXUnits: "fraction",
anchorYUnits: "fraction",
src: "/Images/ic_info.png"
})
})
});
map.addLayer(vectorLayer);
}
function DisplayMarker() {
var layer = new ol.layer.Tile({
source: new ol.source.OSM()
});
var interaction = new ol.interaction.DragRotateAndZoom();
var control = new ol.control.FullScreen();
for (var i = 0; i < _vehData.length - 1; i++) {
var overlay = new ol.Overlay({
position: ol.proj.fromLonLat([_vehData[i].latitude, _vehData[i].longitude], 'EPSG:4326', 'EPSG:3857'),
element: document.getElementById('overlay')
});
var view = new ol.View({
center: ol.proj.fromLonLat([_vehData[i].latitude, _vehData[i].longitude], 'EPSG:4326', 'EPSG:3857'),
zoom: 6
});
map.addOverlay(overlay);
map.setView(view);
}
}
</script>
</body>
车辆
var映射；
var mapLat=33.540008；
var mapLng=-111.869822；
var mapDefaultZoom=6；
var_vehData=[{“vehicleID”：69，“纬度”：33.540008，“经度”：-111.869822，“航向”：3.0，“速度”：0.0，“gpsDateTime”：“2019-05-10T02:08:20”，“城市代码”：“PHX”，“细节”：“69街：2”，“分钟最晚GPS”：0，“状态”：8，“指定状态”：0，“停靠站”：0，“客人”：0，“机场”：“CHT”，“车队”：“ECAR”，“peggedStatus”：1}；
初始化_映射（）；
函数初始化_映射（）{
map=新ol.map({
目标：“地图”，
图层：[
新ol.layer.Tile({
来源：new ol.source.OSM（）
})
],
视图：新ol.view({
中心：Lonlat的其他项目（[mapLng，mapLat]），
缩放：mapDefaultZoom
})
});
}
函数LoadVehicledata（）{
对于（变量i=0；i<\u vehData.length-1；i++）{
添加地图点（_vehData[i]。纬度，_vehData[i]。经度）；
}
}
功能添加映射点（lat、lng）{
var vectorLayer=新ol.layer.Vector({
来源：新ol.source.Vector({
功能：[新ol.功能({
几何：新的ol.geom.Point（ol.proj.transform（[parseFloat（lng），parseFloat（lat）]，“EPSG:4326”，“EPSG:3857”），
})]
}),
风格：新的ol风格({
图片：新ol.style.Icon({
锚定：[0.5，-10]，
主播：“分数”，
固定单位：“分数”，
src:“/Images/ic_info.png”
})
})
});
map.addLayer（矢量层）；
}
函数DisplayMarker（）{
var layer=新ol.layer.Tile({
来源：new ol.source.OSM（）
});
var interaction=new ol.interaction.DragRotateAndZoom（）；
var control=new ol.control.FullScreen（）；
对于（变量i=0；i<\u vehData.length-1；i++）{
var overlay=新ol.overlay({
位置：ol.proj.fromlont（[[u-vehData[i].纬度，[u-vehData[i].经度]，'EPSG:4326'，'EPSG:3857'），
元素：document.getElementById（'overlay'）
});
变量视图=新的ol.view({
中心：ol.proj.fromlont（[[u-vehData[i].纬度，[u-vehData[i].经度]，'EPSG:4326'，'EPSG:3857'），
缩放：6
});
map.addOverlay（覆盖）；
map.setView（视图）；
}
}
function LoadVehicledata(){
for (var i = 0; i < _vehData.length-1; i++) {
add_map_point(_vehData[i].latitude, _vehData[i].longitude, _vehData[i].vehicleID);
}
}
var style = new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, -10],
anchorXUnits: "fraction",
anchorYUnits: "fraction",
src: "/Images/ic_info.png"
}),
text: new ol.style.Text({
font: '12px Calibri,sans-serif',
fill: new ol.style.Fill({
color: '#000'
}),
stroke: new ol.style.Stroke({
color: '#fff',
width: 3
})
})
});
var vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector(),
style: function(feature) {
style.getText().setText(feature.get('label'));
return style;
}
});
map.addLayer(vectorLayer);
function add_map_point(lat, lng, label) {
vectorLayer.getSource().addFeature(
new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([parseFloat(lng), parseFloat(lat)], 'EPSG:4326', 'EPSG:3857')),
label: label
})
)
}
函数加载车辆数据（）{
对于（变量i=0；i<\u vehData.length-1；i++）{
添加地图点（_vehData[i]。纬度，_vehData[i]。经度，_vehData[i]。车辆ID）；
}
}
var style=新的ol.style.style({
图片：新ol.style.Icon({
锚定：[0.5，-10]，
主播：“分数”，
固定单位：“分数”，
src:“/Images/ic_info.png”
}),
文本：新的ol.style.text({
字体：“12px Calibri，无衬线”，
填充：新的ol.style.fill({
颜色：“#000”
}),
笔划：新的ol风格笔划({
颜色：“#fff”，
宽度：3
})
})
});
var vectorLayer=新ol.layer.Vector({
source:new ol.source.Vector（），
风格：功能（特征）{
style.getText（）.setText（feature.get（'label'）；
回归风格；
}
});
map.addLayer（矢量层）；
功能添加映射点（lat、lng、标签）{
vectorLayer.getSource（）.addFeature(
新ol.功能({
几何：新的ol.geom.Point（ol.proj.transform（[parseFloat（lng），parseFloat（lat）]，“EPSG:4326”，“EPSG:3857”），
标签：标签
})
)
}