如何在 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 中使描边不透明度起作用 的相关文章

  • 如何在 OpenLayers-3 中使用 SVG 图像作为地图标记?

    我正在尝试使用 SVG 图像在 OpenLayers 3 OL3 中创建地图 针滴 即地图标记 目前 我使用 PNG 图像作为引用 ol style Icon 源 src 属性的 pindrop 效果很好 但是 使用 SVG 图像时会失败
  • 在openlayers3中不使用任何图像绘制箭头

    如何在 Openlayers 3 地图中的矢量图层上绘制箭头 我尝试使用 canvaselement 创建箭头 但不知道如何在 ol3 地图上绘制它 画布元素不是必需的 您可以从以下位置获取箭头示例Openlayers 网站并添加 2 个自
  • 开放层 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
  • OL3:缩放到地图上的矢量图层

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

    我想知道如何获取地图点击事件坐标经纬度 这是我的代码 map on click function evt var element popup getElement var coordinate evt coordinate var latL
  • 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
  • 打开第3层,map.on('moveend',..):区分用户交互和map.setCenter()调用

    我正在为 GIS 应用程序实现 OL 并希望在用户滚动地图时添加 20 秒的超时 之后 GPS 自动跟踪功能应恢复 为此 我正在利用 map on moveend move func 侦听器 问题是它无法区分用户滚动还是位置更改来自map
  • 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 将 EPSG:4326 矢量重新投影到 EPSG:3857

    我需要将 GeoJSON 矢量数据从 EPSG 4326 转换为 EPSG 3857 我有一张地图 var olMapDiv document getElementById olmap control map new ol Map targ
  • 无法将 openlayers-3 与 webpack 一起使用

    我必须将 openlayers 包含在我正在开发的项目中 我已经尝试过将其包含在ext文件夹和 npm 我在我的工作流程中使用 Webpack 编译时 我在控制台中收到以下警告 WARNING in openlayers dist ol j
  • 获取 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 中的内容仍然存在于
  • 如何在 OpenLayers 3 中删除监听器

    我做了一个copy https gis stackexchange com questions 178222 how to delete a listener in openlayers 3我在 stackoverflow 上提出的问题 因
  • 使用canvas.toDataURL时如何设置crossOrigin属性?

    因此 我尝试为我正在构建的 OpenLayers 3 应用程序创建打印地图函数 我知道他们example http openlayers org en v3 8 2 examples export map html但每当我尝试使用它时 我都

随机推荐