首页 > 其他分享 >【OpenLayers笔记】绘制描边线

【OpenLayers笔记】绘制描边线

时间:2022-09-27 09:48:37浏览次数:50  
标签:layer const color feature 笔记 OpenLayers 边线 fromLonLat new

let layer = new VectorLayer(); //新建一个绘线层
    let feature = new Feature({
      geometry: new LineString([
        fromLonLat([114, 24]), //线的点坐标
        fromLonLat([114.01, 24.01]), //线的点坐标
        fromLonLat([114.02, 24]), //线的点坐标
        fromLonLat([114.02, 24.02]), //线的点坐标
      ]),
    });
    const textFill = new Fill({
      color: "#FFF",//线文本颜色
    });

    const borderStroke = new Stroke({
      color: "#FFF",
      width: 5,

      lineJoin: "round",
    });
    const lineStroke = new Stroke({
      color: "#FF0000",
      width: 2,
      lineJoin: "round",
    });

    feature.setStyle([
      new Style({
        stroke: borderStroke,
        text: new Text({
          fill: textFill,
          text:'线添加文本'
        }),
      }),
      new Style({ stroke: lineStroke }),
    ]);
    layer.setSource(
      new VectorSource({
        features: [feature],
      })
    );
    map.addLayer(layer); //把线的图层添加到地图中

 

效果:

 

标签:layer,const,color,feature,笔记,OpenLayers,边线,fromLonLat,new
From: https://www.cnblogs.com/mesmerize/p/16733409.html

相关文章

  • HCIA学习笔记三十一:静态路由的负载均衡
    一、负载分担示例• 在路由器B上配置到达路由器A的10.1.1.1网段的三条负载路由。二、负载分担实验2.1、拓扑图•分别在路由器中拖出2台AR2220、终端中拖出2台PC机,......
  • 电机笔记01
    1.电机的永磁体充磁一般分为两种,一种是径向充磁,另一种是平行充磁。如下图。  充磁方向的不同使得电机转子在不同位置时候所对应的气隙位置和磁通密度波形不同。如下图......
  • 学习笔记整理
    这是一个目录。图论经典图论构造三/四元环计数竞赛图广义串并联图一般图最大独立集/最大团问题字符串border与period理论数学线性代数容斥与反演集合幂级数......
  • 学习笔记-C++ STL篇
    1、C++中vector作为参数的三种传参方式(传值&&传引用&&传指针)https://blog.csdn.net/weixin_47641702/article/details/113522865c++中常用的vector容器作为参数时,有......
  • Flask学习笔记(五)-Flask通过Ajax传输JSON数据
    一.创建项目结构项目文件夹flask-ajax-demo,结构如下: 其中app.py是Python程序,user.html是静态页面。二.发起Ajax请求编写user.html,代码如下:<!DOCTYPEhtml><html......
  • vim_vim学习笔记
    普通模式-->插入模式i,表示inserta,表示appendo表示oneline(暂且这样理解)插入模式-->普通模式esc,模式就是这个键jj和capslock需要配置普通模式......
  • 《被讨厌的勇气》读书笔记
    1、如果一味地关注过去的原因,企图仅仅靠原因去解释事物,那就会陷入“决定论”。也就是说,最终会得出这样的结论:我们的现在甚至未来全部都由过去的事情所决定,而且根本无法改......
  • Swin Transformer 论文精读笔记
    参考https://www.bilibili.com/video/BV13L4y1475U/?spm_id_from=333.788&vd_source=920f8a63e92d345556c1e229d6ce363fICCV最佳论文:SwinTransformer  Swin,其实就......
  • 【笔记】Java相关大杂烩①
    【笔记】Java相关大杂烩Java程序的执行流程是?*.java文件-->*.class文件-->类装载器-->字节码校验器-->解释器-->操作系统平台Java程序执行时哪一个环节会测试代码段......
  • c++基础入门自学笔记总结4---通讯录管理系统
    没过几天通讯录也终于做完了,今天就为我们近三个星期的c++初级学习画上一个完美的句号吧系统需求通讯录是一个可以记录亲人、好友信息的工具。本教程主要利用C++来实现......