openlayers 3 可以使用 gif 渲染动画标记吗

2024-03-19

我想问如何让标记像 openlayers 2 一样显示动画 gif 图片...它可以显示动画标记..我想要的是显示动画 gif 标记而不使标记移动..这可能吗?

style = {
                anchorXUnits: 'fraction',
                anchorYUnits: 'pixels',
                anchor: anchor,
                opacity: 1,
                src: 'https://articulate-heroes.s3.amazonaws.com/uploads/rte/kgrtehja_DancingBannana.gif',
                scale: 1,
            };

var iconStyle = new ol.style.Style({
            image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ (style))
        });

var iconFeature = new ol.Feature({
            position: data.coordinate,
            geometry: new ol.geom.Point([0,0]),
        });

iconFeature.setStyle(iconStyle);

怎么做https://铰接英雄.s3.amazonaws.com/uploads/rte/kgrtehja_DancingBannana.gif https://articulate-heroes.s3.amazonaws.com/uploads/rte/kgrtehja_DancingBannana.gif在地图中以 gif 形式显示动画?是否可以在 openlayers 3 中创建动画功能..我没有找到任何包含此解决方案的文章...谢谢


是的,有一种方法可以做到这一点,但有点棘手,所以我不确定它是否适合您的需求。 您需要添加一个标记并使用 css 来设置标记的样式。 检查这个

你的 html 带有 dom 元素

<div id="map" class="map"></div>
<div id="marker" title="Marker"></div>

你的js在这里

var layer = new ol.layer.Tile({
  source: new ol.source.OSM()
});

var map = new ol.Map({
  layers: [layer],
  target: 'map',
  view: new ol.View({
    center: [0, 0],
    zoom: 2
  })
});
// the position of your marker
var pos = ol.proj.fromLonLat([23.3725, 35.208889]);

var marker = new ol.Overlay({
  position: pos,
  positioning: 'center-center',
  element: document.getElementById('marker'),
  stopEvent: false
});
map.addOverlay(marker);

和你的CSS在这里

#marker {
  width: 365px;
  height: 360px;
  background: url("https://articulate-heroes.s3.amazonaws.com/uploads/rte/kgrtehja_DancingBannana.gif") no-repeat scroll 0% 0% transparent;
}

和一把小提琴here https://jsfiddle.net/dkwxb2L7/和跳舞的香蕉(虽然GIF不错:)))))

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

openlayers 3 可以使用 gif 渲染动画标记吗 的相关文章

  • openlayers3_API简说

    openlayers3 API简说 API文档 https openlayers org en v3 20 1 apidoc API 变更政策 OpenLayers 3 x API 包括 类 类方法和属性的名称 静态函数和常量的名称 函数参
  • 确保所有图块均加载到 Open Layers 3 XYZ 源中

    我们有一些层利用ol source XYZ来源 对于我们使用的加载策略ol loadingstrategy tile new ol tilegrid createXYZ 在进行其他操作之前 我们需要确保所有图块已完全加载到地图视图中 我们已
  • 在openlayers3中不使用任何图像绘制箭头

    如何在 Openlayers 3 地图中的矢量图层上绘制箭头 我尝试使用 canvaselement 创建箭头 但不知道如何在 ol3 地图上绘制它 画布元素不是必需的 您可以从以下位置获取箭头示例Openlayers 网站并添加 2 个自
  • CORS 策略已阻止从来源“null”访问图像

    我在 OpenLayers 3 中有 JavaScript 应用程序 我的基础层是从本地图块创建的 我只在我的计算机上工作 所以我不知道为什么会出现 CORS 错误 var newLayer new ol layer Tile source
  • 矢量图块缓冲区

    我在使用 Geoserver 提供的矢量切片设置 Openlayers 地图时遇到问题 线条沿着瓷砖的边缘拧在一起 看起来线条是先被剪裁 然后再设计样式 而不是相反 这使得宽线看起来很难看 更改 LOL 客户端中的渲染缓冲区不会产生任何影响
  • OL3:缩放到地图上的矢量图层

    我有一张带有 openlayers 3 和矢量图层的地图 我想将地图调整为该矢量图层的大小 但到目前为止 我所能得到的只是将地图集中在该矢量的最后一个点上 因为在创建地图时无法访问矢量图层的点 if trackMap null for va
  • 在隐藏元素中绘制 OpenLayers 3 地图

    我正在编写一个页面 您可以在其中查看有关区域和地图的详细信息 详细信息位于一个选项卡上 地图位于另一个选项卡上 HTML 的相关部分如下 类来自引导程序 http getbootstrap com css div class col xs
  • OpenLayers 3 和 XYZ 层

    I have a map which I want to display It consists of a standard map OSM Google or Bing and a layer provided by Openseamap
  • OpenLayers 动画 getView().fit()

    我一直在研究 openlayers 的动画功能 我可以看到使用缩放到给定点和分辨率是多么简单 view animate center position zoom 11 但我不知道如何制作动画 map getView fit extent m
  • 如何隐藏和显示 OpenLayers 3 中的功能? (重画?)

    我正在更新一个项目OL2 https openlayers org two to OL3 https openlayers org 但我一直困惑于如何在更改要素样式后重新绘制要素 在 OL2 中 这有效 hidePoints functio
  • 在 OpenLayers 3.20+ 中使用 view.fit() 使用 view.animate()

    我有以下为 OpenLayers 3 20 之前版本编写的代码 fitViewToFeature function viewer feature var pan ol animation pan source viewer olView g
  • openlayers3如何始终启用徒手绘制

    在 OpenLayers3 v3 5 中 如何始终启用徒手绘制 默认启用徒手绘制是通过freehandCondition的财产ol interaction Draw 当前默认设置为 Shift 键 draw new ol interacti
  • 解构 Open Layers 3 地图

    所以 我使用 Open Layers 3 和 Ember js 来制作仪表板 并且我已经动态加载地图 但我希望它在我离开路线时被销毁 我发现的唯一东西是 map destroy 但它是针对旧版本的API 新版本中似乎没有 进入地图页面几次后
  • 如何减小 openlayers 3 中图标的大小,我正在使用 bing 地图

    这是我的代码 var iconFeature new ol Feature geometry new ol geom Point ol proj transform 95 3698 29 7604 EPSG 4326 EPSG 3857 n
  • 如何在 Openstreetmap 上双击获取坐标?

    我在用角度 openlayers 指令 https github com tombatossals angular openlayers directive 我想获取双击点的坐标 类似的问题 将点转换为经纬度 https stackover
  • 性能测试 OpenLayers 与 Leaflet

    我想比较 OpenLayers 和 Leaflet 之间的性能 我想测试诸如渲染矢量文件 底图 显示大量标记等最快的东西 我可以自己设置这个例子 但我不知道如何实际测量它们之间的速度差异 在哪里可以看到执行将矢量数据加载到地图等任务实际需要
  • 获取 OpenLayers 中绘制要素的坐标

    我正在尝试使用 OpenLayers 3 创建在线地图 我对使用 OpenLayers 是全新的 我想做的就是获取我在地图上绘制的点 线 多边形的坐标 我知道有一个 featuresadded 参数可用 但我无法正确实现它 有人能给我指明如
  • 找不到模块:错误:无法使用 TypeScript 定义文件解析“openlayers”

    在使用 TypeScript 的 Visual Studio 2017 React 应用程序中 有一个使用 OpenLayers v4 6 5 的组件 Map tsx package json 文件加载 types openlayers 和
  • OpenLayers 3 中的边界如何工作?

    是否有这样的概念OpenLayers Bounds http dev openlayers org docs files OpenLayers BaseTypes Bounds js htmlOpenLayers 2 x 中的内容仍然存在于
  • 打开图层地图,经纬度获取地址

    我正在尝试获取带有经度和纬度的地址 城市 邮政编码 街道地址 但我不知道如何获取 我正在使用开放图层 当我单击地图的一部分时 会获取该位置的经度和纬度 有人有解决方案吗 div class map div

随机推荐