繁体   English   中英

OpenLayers 在地图上显示图标的问题

OpenLayers problem with displaying icons on map

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我遇到了 OpenLayers 6.5.0 的问题。 我想在地图上显示一个图标,但尽管多次尝试都失败了。 我认为这不是坐标的问题。 我尝试了 EPSG 转换。 我查看了文档和其他可用示例,但不知道可能导致此问题的原因。

 var locations = [ [15.94606, 51.57557], [15.94602, 51.57572], [15.94604, 51.57576], [15.946, 51.57581], [15.94588, 51.57586], [15.94567, 51.57591], [15.94543, 51.57597], [15.94527, 51.57602], [15.94513, 51.57605], [15.94502, 51.57607], [15.94497, 51.57609], [15.94499, 51.57609], [15.94497, 51.57611], [15.94501, 51.57616], [15.94525, 51.57636] ]; var lineString = new ol.geom.LineString(locations).transform('EPSG:4326', 'EPSG:3857') var startMarker = new ol.Feature({ type: 'icon', geometry: new ol.geom.Point(ol.proj.transform([15.94606, 51.57557], 'EPSG:4326','EPSG:3857')) }); var endMarker = new ol.Feature({ type: 'icon', geometry: new ol.geom.Point(lineString.getCoordinateAt(1)) }); var lineLayer = new ol.layer.Vector({ source: new ol.source.Vector({ features: [new ol.Feature({ geometry: lineString, name: 'Line' }), startMarker, endMarker ] }), style: new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'red', opacity: 0.5, width: 5 }), 'icon': new ol.style.Style({ image: new ol.style.Icon({ anchor: [0.5, 1], src: 'https://openlayers.org/en/v3.20.1/examples/data/icon.png' }) }) }) }); var view = new ol.View({ center: ol.proj.fromLonLat([15.94616, 51.57555]), zoom: 13 }); var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }), lineLayer ], target: 'map', controls: ol.control.defaults({ attributionOptions: /** @type {olx.control.AttributionOptions} */ ({ collapsible: false }) }), view: view });
 body, html, .map { width: 100%; height: 100%; margin: 0; padding: 0; }
 <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js "></script> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css"> <div id="map" class="map"></div>

1 个回复

样式不需要图标属性,只需包含具有描边样式的图像

    style: new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: 'red',
            opacity: 0.5,
            width: 5
        }),
        image: new ol.style.Icon({
            anchor: [0.5, 1],
            src: 'https://openlayers.org/en/v3.20.1/examples/data/icon.png'
        })
    })
1 Openlayers 5图标未在地图上显示

我正在使用OpenLayers 5创建带有图标的简单地图。 我按照图标颜色示例进行操作 。 现在,我从数组更改了源数据。 例如,我要在地图上显示四个点。 我只更改了创建矢量源的部分,从手动设置一个到一个循环。 不幸的是,这些图标没有显示在地图上。 如果我不使用循环,则会显 ...

2 OpenLayers标记图标的问题

我正在我的网站上创建OSM地图并添加一些带有openlayer的标记..我的问题是我总是得到相同的标记图标.. 现在问题是所有三个标记都有相同的图标......有人可以帮助我.. ...

3 使用 OpenLayers 5 在地图上添加图标

我正在尝试使用 OpenLayers 5 在地图上添加一个图标。 我试图按照网站上的 Openlayers 示例进行操作,但没有成功( https://openlayers.org/en/latest/examples/icon.html ) 我相信问题可能出在样式上,因为当我从要素中删除它时, ...

5 OpenLayers 3 DragBox 未显示在地图上

当我在地图上移动+拖动并释放时,“boxend”侦听器会触发。 此外,如果我在将 dragBox 交互添加到地图后检查地图对象,则 dragBox 交互位于地图对象中。 问题是在选择区域时,该框在地图上永远不可见。 我错过了什么? ...

6 如何使用openlayers在地图上显示路径?

我有这样的路径: 该路径包括每个点的 long、lat 和 z。 我还有一个用 OpenLayers 创建的地图。 我想在地图上显示这条路径。 我尝试了不同的方法和说明,但没有显示。 这是我显示地图的方式: 我以这种方式测试了部分路线的显示,但没有奏效: 我在不同的参考文献中尝试了类似的 ...

7 OpenLayers-在地图上显示标记

我在地图上看不到标记。 在表中,我可以看到所有点,但是在地图上没有显示。 我猜问题出在这里: 当我放一些坐标而不是venues.location.lat,venues.location.lng它将显示标记。 ...但不知道如何解决。 ...

8 如何在openlayers地图上显示行车距离?

我在UWP桌面应用程序中使用OpenLayers地图,但是我的opelayers地图没有显示从一点到另一点的行驶距离(路线)。 我可以在地图上显示地图和标记,就像在地图上的位置标记一样,但是不能显示源和目的地之间的路线。 任何帮助,将不胜感激。 这是我的代码: 有什么解决方 ...

9 openlayers热图在地图上显示红线

我在使用heatmap-openlayers.js时遇到问题,我在页面上加载了一些仅显示热图渐变的默认点,但是当我拖动图像(地图)或将渐变移动到图像底部时,我发现我在地图上也有一条红线,似乎是渐变点集的复制,但无法弄清楚它为什么发生。 我将样本上传到: http : //hightech- ...

10 MultiString 功能未显示在 openlayers 地图上?

我有一个带有圆形特征的地图加上一个多字符串(这里),当我检查该特征是否在那里时,我找到了它,选择的样式是从这个示例中获取的,所以我认为问题不在于那个。 知道我做错了什么吗? PS:要检查多行字符串的坐标,在上面的例子中将vector2的可见性设置为true 代码片段(来自链接的小提琴): ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM