Javascript OpenLayers标记图标样式示例

我发现了一个例子，解释了如何放置图标和一些互动活动。我试着用不同的地图中心做同样的事情，但它甚至没有显示地图本身，更不用说标记了

下面是我的尝试：我创建了三个文件icon.svg、index.html和main.js

我将index.html更改为如下所示：

图标符号器
.地图{
宽度：100%；
高度：400px；
}

icon.svg我在google pictures上找到，在文件icon.svg中给出了以下代码：

然后我将main.js更改为如下所示：

const center=[11.576124,48.137154]；
常数中心点=新的ol.geom.Point（ol.proj.transform（中心'EPSG:4326'，'EPSG:3857'）；
变量iconFeature=新的ol.特征({
几何图形：中心点，
名称：'图标'，
人口：4000，
降雨量：500
});
var iconStyle=新样式({
图片：新图标({
主播：[0.5,46]，
主播：“分数”，
anchorYUnits:'像素'，
src:“./icon/svg”，
比例：0.0625
}),
});
iconFeature.setStyle（iconStyle）；
var vectorSource=新矢量源({
功能：[iconFeature]，
});
var vectorLayer=新vectorLayer({
来源：矢量源，
});
var rasterLayer=新ol.layer.Tile({
来源：new ol.source.OSM（）
});
var映射=新映射({
图层：[光栅图层，矢量图层]，
目标：“地图”，
控件：ol.control.defaults({
属性选项：{
可折叠：错误
}
}),
视图：新视图({
中心：Lonlat（中心）的其他项目，
缩放：3，
}),
});
var元素=document.getElementById（'popup'）；
var popup=新覆盖({
元素：元素，
定位：'底部中心'，
stopEvent:false，
偏移量：[0，-50]，
});
map.addOverlay（弹出窗口）；
//单击时显示弹出窗口
映射打开（'click'，函数（evt）{
var feature=map.forEachFeatureAtPixel（evt.pixel，函数（feature）{
返回特性；
});
如果（功能）{
变量坐标=feature.getGeometry（）.getCoordinates（）；
设置位置（坐标）；
$（元素）.popover({
位置：'顶部'，
是的，
内容：feature.get（'name'），
});
$（元素）.popover（'show'）；
}否则{
$（元素）.popover（'dispose'）；
}
});
//在标记上更改鼠标光标
map.on（'pointermove'，函数（e）{
如果（如拖动）{
$（元素）.popover（'dispose'）；
返回；
}
var pixel=map.getEventPixel（例如originalEvent）；
var hit=map.hasFeatureAtPixel（像素）；
map.getTarget（）.style.cursor=hit'pointer'：''；
});

Atom Texteditor中的项目结构如下所示：

我从下载了文件

v6.5.0-dist

。有什么提示说明为什么文件和代码的组合没有显示地图，或者哪里可能有错误

谢谢大家!

编辑：我试着根据这个修改语法，但这仍然没有带来乐趣。以下是main.js文件的新版本：

常数中心=[11.576124,48.137154]；
常数中心点=新的ol.geom.Point（ol.proj.transform（中心'EPSG:4326'，'EPSG:3857'）；
变量iconFeature=新的ol.特征({
几何图形：中心点，
名称：'图标'，
人口：4000，
降雨量：500
});
var iconStyle=新的ol.style.style({
图片：新ol.style.Icon({
主播：[0.5,46]，
主播：“分数”，
anchorYUnits:'像素'，
src:“./icon/svg”，
比例：0.0625
}),
});
iconFeature.setStyle（iconStyle）；
var vectorSource=新的ol.source.Vector({
功能：[iconFeature]，
});
var vectorLayer=新ol.layer.vectorLayer({
来源：矢量源，
});
var rasterLayer=新ol.layer.Tile({
来源：new ol.source.OSM（）
});
var map=新ol.map({
图层：[光栅图层，矢量图层]，
目标：“地图”，
控件：ol.control.defaults({
属性选项：{
可折叠：错误
}
}),
视图：新ol.view({
中心：Lonlat（中心）的其他项目，
缩放：3，
}),
});
var元素=document.getElementById（'popup'）；
var popup=新ol.Overlay({
元素：元素，
定位：'底部中心'，
stopEvent:false，
偏移量：[0，-50]，
});
map.addOverlay（弹出窗口）；
//单击时显示弹出窗口
映射打开（'click'，函数（evt）{
var feature=map.forEachFeatureAtPixel（evt.pixel，函数（feature）{
返回特性；
});
如果（功能）{
变量坐标=feature.getGeometry（）.getCoordinates（）；
设置位置（坐标）；
$（元素）.popover({
位置：'顶部'，
是的，
内容：feature.get（'name'），
});
$（元素）.popover（'show'）；
}否则{
$（元素）.popover（'dispose'）；
}
});
//在标记上更改鼠标光标
map.on（'pointermove'，函数（e）{
如果（如拖动）{
$（元素）.popover（'dispose'）；
返回；
}
var pixel=map.getEventPixel（例如originalEvent）；
var hit=map.hasFeatureAtPixel（像素）；
map.getTarget（）.style.cursor=hit'pointer'：''；
});

如果您使用的是ol.js，则需要始终使用完整构建语法。请参阅版本4示例好的，谢谢，完整构建语法是什么？这是否意味着在每个OpenLayers对象之前都加上“ol.”？我遇到了这个错误（在浏览器中调试！）：Uncaught TypeError:ol.layer.VectorLayer不是构造函数。图标也有问题，我真的搞不清楚。但是ol.layer.VectorLayer正是示例页面上给出的内容……不，不是！它是ol.layer.Vector！所以我把它修好了。只是svg文件有点可疑。如何修复？另一条鱼是./icon/svg，而不是./icon.svg