如何在 OpenLayers 3 中使描边不透明度起作用

2023-12-24

无论我如何尝试,我都无法在 OpenLayers 3 中使描边不透明度正常工作。我试图实现的是用 0.5 的不透明度在 OSM 平铺地图上画一条线。

这是示例代码:

var lineString = new ol.geom.LineString([
   [4.9020, 52.3667],
   [4.9030, 52.3667],
   [4.9040, 52.3667],
   [4.9050, 52.3667]
]);
lineString.transform('EPSG:4326', 'EPSG:3857');

var lineLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
        features: [new ol.Feature({
            geometry: lineString,
            name: 'Line'
        })]
    }),
    style: new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: 'yellow',
            opacity: 0.5,
            width: 15
        })
    })
});    

var view = new ol.View({
    center: ol.proj.transform([4.9020, 52.3667], 'EPSG:4326','EPSG:3857'),
   zoom: 18
});

var map = new ol.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
});

你可以在这里看到它:http://jsfiddle.net/abgcvqw3/1/ http://jsfiddle.net/abgcvqw3/1/


不透明度通过设置color选项,作为颜色值的第四个元素(A,代表 RGBA 中的“Alpha”)。

例如,以下是如何获得半透明的黄色:

color: [255, 255, 0, 0.5]

这是另一个符号:

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

如何在 OpenLayers 3 中使描边不透明度起作用 的相关文章

  • 将图块的 xyz 坐标转换为经度/纬度

    我想使用 openlayers 制作地图 但以独特的方式将其居中 例如 我的 z x y 坐标为 12 2045 1362 如何将其转换为经度 纬度 这与此完全相反 如何通过点击Leaflet地图获取tile的X Y Z坐标 我很难理解上述
  • Geoserver - 使用 DWITHIN 过滤点

    首先 我是 Geoserver 和 Openlayers 的新手 我一直试图在 Geoserver 端使用图层预览页面来使用 Openlayer 查看器查看我的图层 我最终会将其实现为 Openlayers WFS GET 请求 我想要完成
  • 开放层 3:如何为修改交互创建侦听器

    我已经成功设置了修改交互 ol interaction Modify 的文档 http ol3js org en master apidoc ol interaction Modify html 不要提及修改功能时触发的单个事件 与 ol
  • CORS 策略已阻止从来源“null”访问图像

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

    我需要以 GeoTiff 格式显示光栅图像 它是用 QGIS 进行地理参考的 看起来 Openlayers 3 15 不支持这种格式 你知道这件事吗 var agentUrl http localhost 9925 Wgis assets
  • OL3:缩放到地图上的矢量图层

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

    现在我正在将我的项目从 openlayers 2 移动到 openlayers 3 不幸的是 我找不到如何显示功能的标题 工具提示 OL2中有一种风格叫graphicTitle 您能给我一些如何在 OL3 上实现工具提示的建议吗 这是 ol
  • 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-3 强制刷新地图

    我有一个自定义样式 可以显示 隐藏地图上的功能 但是当应用它时 它不会激活 直到地图由于功能更新而刷新 但我需要它立即触发 我尝试了 map render 和 renderSync 但它们什么也没做 mapResize 似乎也没有执行任何操
  • OpenLayers 3 图像和文本样式 zindex

    我注意到文本和图像样式在渲染时似乎不遵守其图层顺序 例如 当具有这些样式的许多要素靠近时 所有文本都会呈现在其他重叠矢量要素之上 有没有办法禁用或覆盖这种行为 谢谢 myFeature setStyle new ol style Style
  • 在 OpenLayers 3.20+ 中使用 view.fit() 使用 view.animate()

    我有以下为 OpenLayers 3 20 之前版本编写的代码 fitViewToFeature function viewer feature var pan ol animation pan source viewer olView g
  • 如何减小 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
  • div 下面仍然触发 click 事件

    这是我正在构建的 PhoneGap 应用程序 我正在我的笔记本电脑上进行测试 然后使用 PhoneGap cli 在 iPhone 上进行测试 我有一个 openlayers 3 地图 上面记录了点击事件 我还有一个 div 当菜单显示时
  • 如何在 Openstreetmap 上双击获取坐标?

    我在用角度 openlayers 指令 https github com tombatossals angular openlayers directive 我想获取双击点的坐标 类似的问题 将点转换为经纬度 https stackover
  • OpenLayers:如何检测地图视图是否已完全加载?

    我正在使用 OpenLayers 3 实现地图导出功能 但有一个问题 无法确定地图视图是否已完全加载或还缺少一些图块 好像没有这样的API或事件 最接近的是tileloadstart tileloadend 对 但是 OpenLayers
  • 性能测试 OpenLayers 与 Leaflet

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

    我必须将 openlayers 包含在我正在开发的项目中 我已经尝试过将其包含在ext文件夹和 npm 我在我的工作流程中使用 Webpack 编译时 我在控制台中收到以下警告 WARNING in openlayers dist ol j
  • Openlayers 3:以编程方式选择功能

    我正在尝试将我的系统从 Openlayers 2 升级到 Openlayers 3 但我遇到了一个我似乎无法解决的特定问题 我的应用程序有一个网格和一张地图 当用户单击网格时 我想选择地图上的相关点 在 Openlayers 2 中我使用了
  • OpenLayers 3 中的边界如何工作?

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

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

随机推荐