OpenLayers 标记图标问题

2024-04-02

我正在我的网站中创建 OSM 地图,并使用 openlayer 添加一些标记。我的问题是我总是得到相同的标记图标。

 <script type="text/javascript">

 var map = new OpenLayers.Map("heatMap");
    var mapnik = new OpenLayers.Layer.OSM();
    map.addLayer(mapnik);
    map.setCenter(new OpenLayers.LonLat(-4.0575942987957,54.390175926091) // Center of the map
      .transform(
        new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
        new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator Projection
      ), 6 // Zoom level
    );

    var markers = new OpenLayers.Layer.Markers( "Markers" );
    map.addLayer(markers);

    var icon1 = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png', size, offset);
    var icon2 = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker-gold.png', size, offset);
    var icon3 = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker-green.png', size, offset);

    var lonLat1 = new OpenLayers.LonLat(-4.0575942987957,54.390175926091).transform(
                            new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
                            map.getProjectionObject() // to Spherical Mercator Projection
                            );

    var lonLat2 = new OpenLayers.LonLat(-3.0575942987957,54.390175926091).transform(
                            new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
                            map.getProjectionObject() // to Spherical Mercator Projection
                            );

    var lonLat3 = new OpenLayers.LonLat(-5.0575942987957,54.390175926091).transform(
                            new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
                            map.getProjectionObject() // to Spherical Mercator Projection
                            );

    var marker1 = new OpenLayers.Marker(lonLat1);
    var feature = new OpenLayers.Feature(markers, lonLat);
    feature.closeBox = true;
    feature.popupClass = OpenLayers.Class(OpenLayers.Popup.AnchoredBubble, { autoSize: true });
    feature.data.popupContentHTML = '<p>Marker1<p>';
    feature.data.overflow = "hidden";

    marker1.feature = feature;

    var markerClick = function (evt) {
        if (this.popup == null) {
            this.popup = this.createPopup(this.closeBox);
            map.addPopup(this.popup);
            this.popup.show();
        } else {
            this.popup.toggle();
        }
        OpenLayers.Event.stop(evt);
    };
    marker1.events.register("mousedown", feature, markerClick);

    var marker2 = new OpenLayers.Marker(lonLat2);
    var feature = new OpenLayers.Feature(markers, lonLat);
    feature.closeBox = true;
    feature.popupClass = OpenLayers.Class(OpenLayers.Popup.AnchoredBubble, { autoSize: true });
    feature.data.popupContentHTML = '<p>Marker2<p>';
    feature.data.overflow = "hidden";

    marker2.feature = feature;

    var markerClick = function (evt) {
        if (this.popup == null) {
            this.popup = this.createPopup(this.closeBox);
            map.addPopup(this.popup);
            this.popup.show();
        } else {
            this.popup.toggle();
        }
        OpenLayers.Event.stop(evt);
    };
    marker2.events.register("mousedown", feature, markerClick);

    var marker3 = new OpenLayers.Marker(lonLat3);
    var feature = new OpenLayers.Feature(markers, lonLat);
    feature.closeBox = true;
    feature.popupClass = OpenLayers.Class(OpenLayers.Popup.AnchoredBubble, { autoSize: true });
    feature.data.popupContentHTML = '<p>Marker 3<p>';
    feature.data.overflow = "hidden";

    marker3.feature = feature;

    var markerClick = function (evt) {
        if (this.popup == null) {
            this.popup = this.createPopup(this.closeBox);
            map.addPopup(this.popup);
            this.popup.show();
        } else {
            this.popup.toggle();
        }
        OpenLayers.Event.stop(evt);
    };
    marker3.events.register("mousedown", feature, markerClick);

    markers.addMarker(marker1, icon1);

    markers.addMarker(marker2, icon2);

    markers.addMarker(marker3, icon3);

现在的问题是所有三个标记都有相同的图标...有人可以帮助我..


创建标记实例后更改图标。

marker = new ....
var size = new OpenLayers.Size(25, 12);
var offset = new OpenLayers.Pixel(-(size.w / 2), -size.h);
marker.icon = new OpenLayers.Icon("marker.png", size, offset);
//UPDATE AGAIN
marker.icon.size = size;
marker.icon.offset = offset;
marker.draw();
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

OpenLayers 标记图标问题 的相关文章

  • 计算地图上的最短路径(Google 地图、Openstreetmaps 等)

    我想计算某种已经存在的地图 API 路线上的最短路径 然后绘制它们 话虽这么说 我需要能够提取 获取尽可能多的数据 即路线的坐标 以便能够对其进行操作 我的第一个想法是使用 Google 地图 但据我了解 Google 地图 API 为我的
  • 如何下载地图选定部分的 OSM 图块

    我想使用 Openlayer OSM 图层以单个缩放级别离线下载地图的选定部分的地图 我有地图的四个角 即地图的显示部分 但需要获取所有图块图像或四个角之间的图块 我回顾了一些例子 Openlayers获取鼠标下图块的图片url https
  • TypeScript + OpenLayers 7:设置和获取功能 ID 失败

    我有一张带有两个自定义按钮的地图 绘制多边形 and 删除功能 它允许我绘制和删除绘制的多边形 此外 我为多边形创建了一个测量叠加 显示了它们的面积 见图 为了识别多边形和覆盖层之间的连接 我尝试在它们上设置相同的 id 以便在删除多边形时
  • Osmdroid 和 Pinch

    我正在使用 osmdroid 3 0 8 开发一个应用程序 当我使用两根手指放大和缩小时 缩放从地图的中心开始 而不是从两根手指的中间开始 使用MapView setMultiTouchControls true 我试图实施捏 pinch
  • 更改 OpenLayers 地图中的投影

    我想将 EPSG 4326 设置为 OpenLayers 地图的投影 但当我尝试时 我总是得到 EPSG 900913 function init var options projection new OpenLayers Projecti
  • Open Layers 6 的 typescript 类型定义

    The types openlayers包裹 https www npmjs com package types openlayers https www npmjs com package types openlayers 只提供类型定义
  • OL3:强制重绘图层

    我目前正在将 OpenLayers 客户端版本 2 13 1 升级为新版本的 OpenLayers OL3 我的设置包括作为 WMS 映射服务器的 Mapserver 和前面提到的 OpenLayers 客户端 在旧系统中 我支持用户交互
  • 我收到一条错误消息,指出套接字绑定失败:/var/run/renderd/renderd.sock 如果我是普通用户,否则一切正常?

    我正在尝试按照 switch2osm org 上的说明手动构建地图服务器 我已经配置了一切 我有一个由用户 mayank 拥有的数据库 mayank 我正在尝试使用 renderd 但我收到此错误套接字绑定失败 var run render
  • overpass-api 方式查询包含坐标

    我正在尝试查询特定区域的酒店 不幸的是 我需要查询节点和路 因为有些酒店仅存储为路 有些则存储为节点 http overpass osm rambler ru cgi interpreter data 28way tourism hotel
  • OSM在Python中获取从路线A到B的持续时间和方向

    我是使用地图和搜索算法的新手 目前我正在使用geopy获取距离的包Nominatim from geopy geocoders import Nominatim from geopy distance import vincenty nom
  • 如何在不使用 Mapbox 的情况下使用 OpenStreetMap?

    我想使用 OSM OpenStreetMap 数据 但有一种方法 Mapbox 可以使用吗 如果有其他解决方案可以在不使用 MapBox 的情况下使用 OSM OpenStreetMap 那对我会有帮助 由于这是用 Swift 标记的 我假
  • openlayers 策略:ol.loadingstrategy.bbox 不适用于 wfs 功能

    我尝试使用此代码使用 openlayers 4 最大 1000 可视化 wfs 中的地块 但是视图地图的每次移动或缩放时范围不会改变 或者新功能不会加载到图层中 var parcellaireSource new ol source Vec
  • 如何在本机反应中使用 MapLibre GL Js

    我正在寻找一种在我的反应本机应用程序中使用 OpenStreetMap 数据的方法 在我最近的研究中 我发现MapLibre https maplibre org 这是基于MapBox GL旧版本的免费选项 我面临的问题是 除了 react
  • 将地图标记添加到 Open Layers 6

    我的问题很简单 如何在特定的经度和纬度处添加标记 穿过开放层示例页面 https openlayers org en latest examples icon html我创建了一张带有标记的新地图 我使用添加了标记new ol Featur
  • 在 Google 地图上显示 OpenStreetMap 边界(使用 v3 api)

    我想使用使用以下工具获得的 GeoJSON 数据在 Google 地图上显示城市边界 我访问 nominatim openstreetmap org 并搜索一个城市 例如丹佛 使用检索到的 OSM ID 在本例中为 253750 然后我使用
  • 如何使用Openlayers地图

    我对这个 openlayers 地图完全困惑了 即使有很多例子和维基 我也找不到如何重用它 我的意思是我想显示我的城市地图 可由管理员管理 管理员可以添加点和位置 并且它应该显示在前端 请帮我看看该怎么做 Like Conley写道 开放层
  • Sencha Touch、OpenLayers、GeoServer:使用 Android 2.2 的设备上的编码错误

    我使用创建了一个小测试页面煎茶触摸 开放层我正在从一个接收 WMS WFS 数据地理服务器 我已将 HTML 页面上的编码设置为 UTF 8 我使用以下语句从 GeoServer 中提取一些 WFS 数据 var post new Open
  • OpenLayers 3 中的边界如何工作?

    是否有这样的概念OpenLayers Bounds http dev openlayers org docs files OpenLayers BaseTypes Bounds js htmlOpenLayers 2 x 中的内容仍然存在于
  • 如何以编程方式移动 OpenLayers Vector?

    API 文档为OpenLayers Feature Vector http dev openlayers org apidocs files OpenLayers Feature Vector js html说 Vector 本身根本没有方
  • 检测 Android 中 OSM Mapview 是否仍在加载

    我已将 Open Street Maps 包含在我的 Android 应用程序中 在地图视图中 用户应该能够在地图完全加载后捕获屏幕 但目前 即使地图视图仍在加载 用户也可以捕获图像 有人可以告诉我如何检测地图视图何时完全加载吗 下面是我加

随机推荐

  • MongoDB C# 连接/断开(官方驱动程序)

    请告诉我如何通过官方 C 驱动程序连接 断开到 MongoDB 问题很简单 乍一看问题很微不足道 但是 1 我是否需要自己调用Disconnect方法 或者它会被诸如Dispose之类的方法关闭 2 每次需要向Mongo发出请求时都需要连接
  • statsmodel 预测开始和结束索引

    我正在尝试实现 statsmodel 包中的预测功能 prediction results predict start 1 end len test exog test 输入 测试和输出预测的日期不一致 前者为2012年1月4日至2012年
  • getter 和 setter 的 Google 样式指南属性

    我对其中的一项建议感到好奇有关属性的 Google Python 风格指南 https google github io styleguide pyguide html Properties 他们在其中给出了以下示例 class Squar
  • SQLite 与 Android NDK

    是否可以在 Android 手机上将 SQLite 与 C 结合使用 我还没有找到任何关于如何实现这一点的文档 只需从以下位置下载 SQLite3 合并源文件 http www sqlite org download html http w
  • 如何将 Xcode 项目转换为使用 ARC(自动引用计数)?

    当我运行 Convert to Obj C 时 它首先运行预检查 我希望预检查忽略一些文件 并且我认为可以在这些文件上设置编译器标志 fno objc arc 但预检查阶段似乎忽略了该标志 并重置了它 所以我真的不知道如何超越预检查 预检查
  • 按名称调用 Django celery 任务

    我需要从models py调用一个celery任务 在tasks py中 唯一的问题是 tasks py导入models py 所以我无法从models py导入tasks py 有没有什么方法可以仅使用名称来调用 celery 任务 而无
  • 将多个数组作为参数传递给 Bash 脚本?

    我看过 但只看到了脚本中传递的一个数组的答案 我想将多个数组传递给 bash 脚本 该脚本将它们分配为单独的变量 如下所示 myScript sh array1 array2 array3 这样 var1 array1 and var2 a
  • Java 和 C++ 中的简单变量

    我在一些资料中看到这样一句话 在 Java 中 简单数据类型 例如 int 和 char 的运行方式与 C 中一样 我想知道 Java 和 C 中它们实际上是不同的 在C 中 像Java中的基元这样的简单变量也被分配了一个内存地址 因此C
  • 使用 SQL 获取每小时统计信息

    我们有一张桌子 名字 员工注册 有字段 employeeNo employeeName Registered on Here 注册日期是一个时间戳 我们要求在几天内按小时进行注册 例如 08 年 1 月 1 日 12 点 下午 1 点 15
  • C# 为 ++ 运算符生成 IL - 前缀/后缀表示法何时以及为何更快

    由于这个问题是关于增量运算符和前缀 后缀表示法的速度差异 我将非常仔细地描述这个问题 以免 Eric Lippert 发现它并激怒我 有关我为什么要问的更多信息和更多详细信息 请访问http www codeproject com KB c
  • Silverlight:拉伸到 StackPanel 中的剩余空间

    我有一个带有两个元素的垂直 StackPanel 一个按钮和一个列表框 如何让列表框拉伸到剩余页面高度
  • 将一个 Artifactory 连接到另一个 Artifactory

    我们的设置包括一个全公司范围的 Artifactory 它保存内部构建的工件 并出去获取公开可用的工件 我正在尝试在我们的位置建立一个本地 Artifactory 它将通过常规互联网获取公开可用的工件 但会连接到公司范围内的 Artifac
  • Python open("x", "r") 函数,我如何知道或控制文件应该具有哪种编码?

    如果 python 脚本使用open filename r 函数打开并随后读取文本文件的内容 我如何知道该文件应该具有哪种编码 请注意 由于我是从自己的程序执行此脚本 因此如果有任何方法可以通过环境变量来控制它 那么这对我来说就足够了 顺便
  • Python 中子类化 string.Template 的示例?

    尽管我在文档中看到了多次这样做的参考 但我还没有找到在 Python 中子类化 string Template 的好例子 网上有这方面的例子吗 我想将 更改为不同的字符 并且可能更改标识符的正则表达式 来自蟒蛇docs http docs
  • 谷歌应用程序引擎中的 OAuth

    我正在尝试在 python 上的谷歌应用程序引擎中实现 Oauth 对于我的应用程序 我使用 gae 会话和我的模型来验证用户身份 这对我来说会更有帮助 如果你能提供一些例子 您可能想查看以下资源 The App Engine OAuth
  • 如何测量 Spark 上查询的执行时间

    我需要测量 Apache Spark Bluemix 上查询的执行时间 我尝试过的 import time startTimeQuery time clock df sqlContext sql query df show endTimeQ
  • iOS:跨viewControllers在导航栏下方添加视图

    我有一个这样的项目 但我试图弄清楚如何在整个导航栏的导航栏下方添加横幅 以便在需要时可以将其隐藏 你们中有人知道我该怎么做吗 在主视图控制器中实现协议UINavigationControllerDelegate并在选择器中navigatio
  • in_array() 无法按预期工作[重复]

    这个问题在这里已经有答案了 对于这个数组 options Array 0 gt 0 1 gt 1 2 gt 2 PHP 返回 TRUE this gt assertTrue in array Bug options TRUE this gt
  • .NET 的 SFTP 库 [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • OpenLayers 标记图标问题

    我正在我的网站中创建 OSM 地图 并使用 openlayer 添加一些标记 我的问题是我总是得到相同的标记图标