AI 助理
文档备案控制台
开发者社区 IoT 文章 正文

在地图上基于OpenLayers实现点/线/面静态的绘制显示

2022-12-13 2399
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 在地图上基于OpenLayers实现点/线/面静态的绘制显示

在做GIS相关的工作过程中，是离不开矢量的数据的。矢量作为最基础的数据形式，一般通用在各个项目中。在导航软件开发或者应用中，点/线/面的标记，标绘，显示等都是不可缺少的。本文主要是来介绍在地图上基于OpenLayers实现点/线/面静态的绘制显示方法。


1、准备


本文的实现是在前文的框架基础上，继续添加点线面样式和显示函数。具体的准备内容包括ol库文件，瓦片地图服务等。参考：基于OpenLayers实现导航地图上(起/终)点的交互式图标显示的准备内容，和地图瓦片数据的多种利用形式以及瓦片数据的浏览显示的地图创建与后端服务启动。


2、创建矢量图层


在地图上增加点/线/面，则需要在地图之上增加一个矢量图层。

    //创建矢量图层
    var vecSource = new ol.source.Vector();
    var vecLayer = new ol.layer.Vector({
        source: vecSource
    });
    vecSource.clear();
    map.addLayer(vecLayer);//添加到map里面

注意：如果点线面公用一个图层，如果项目中有清除的功能，那么会使所有已存在的矢量均被清除。为此，根据项目需要，可创建多个矢量图层分别去控制point、line、polygon的要素，即可分别作用显示和清除。


3、点/线/面样式


样式的处理一般有两种方式：1、固定写法，放在之前，用时直接调用；2、不固定写法，在绘制的时候再写，可处理细节。


3.1、固定写法例子


//点样式
    var pointStyle = new ol.style.Style({
      image:new ol.style.Circle({
      radius:5,//半径
      fill:new ol.style.Fill({
        color:'red'
      }), //填充颜色        
      stroke: new ol.style.Stroke({
        color: 'green',
        width: 1
      })//外环颜色和粗细
    })
    })
    //线样式
    var lineStyle = new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: 'blue',
            width: 3
        })
    })
    //面样式
    var polygonStyle = new ol.style.Style({
    text:new ol.style.Text({
          testAlign:'center',
          text:"区域",
          font:'bold 20px 微软雅黑',
          fill:new ol.style.Fill({
              color:'#19339e'
        })
      }),
      fill: new ol.style.Fill({
        color: '#0055ff'
      }),
    stroke: new ol.style.Stroke({
      color: '#ffcc33',
      width: 3
    })
  })

上面写的例子可以看出，写死后，直接调用，样式基本就固定了。细微细节想要变化不太好处理了。


3.2、不固定写法例子


直接在对点线面绘制遍历过程逐一添加样式，可以增加细节上的优化。

            //点样式
            var pointStyle = new ol.style.Style({
          text:new ol.style.Text({
          testAlign:'left',
          text:i+"     ",             ///可变化
          font:'bold 15px 微软雅黑',
          fill:new ol.style.Fill({
            color:'yellow'
          })
        }),
          image:new ol.style.Circle({
          radius:r,//半径
          fill:new ol.style.Fill({
            color:c1
          }), //填充颜色        
          stroke: new ol.style.Stroke({
            color: c2,
            width: w
          })//渐变颜色和大小
        })
        });

点样式放在每个点要素的绘制过程中，可以对每个点要素进行标注等等，而固定写法则没法做到序号标注。

            var pFeature = new ol.Feature(geoPoint);
            //pFeature.setStyle(pointStyle);
            pFeature.setStyle(new ol.style.Style({
                 text:new ol.style.Text({
                     testAlign:'left',
                     text:i+"    ",
                     font:'bold 20px 微软雅黑',
                     fill:new ol.style.Fill({
                         color:'red'
                     })
                 }),
            }));

线样式中则可以对每个节点进行标注，处理显示。

            var polygonStyle = new ol.style.Style({
        text:new ol.style.Text({
                  testAlign:'center',
                  text:"区域"+i,
                  font:'bold 20px 微软雅黑',
                  fill:new ol.style.Fill({
                      color:'black'
            })
          }),
          fill: new ol.style.Fill({
                color: '#0055ff'
            }),
        stroke: new ol.style.Stroke({
          color: '#ffcc33',
          width: 3
        })
      });

面样式放在每个面要素的绘制过程中进行渲染，可以获得想要的标注等样式。


4、显示效果


为显示效果模拟的数据：

  var vectorlist = {"point":[[113.76101 , 23.52712],[113.73627 , 23.51769],[113.76506 , 23.51675],[113.74415 , 23.49535],[113.74415 , 23.49995],[113.75082 , 23.49976],[113.319 , 23.140],[113.319 , 23.109],[113.3386 , 23.1238]],"line":[[113.3386 , 23.1238],[113.4506 , 23.2675],[113.5415 , 23.49535],[113.74415 , 23.49995]],"polygon":["[[113.319 , 23.140],[113.319 , 23.109],[113.3386 , 23.1238]]","[[113.76101 , 23.52712],[113.73627 , 23.51769],[113.74415 , 23.49995],[113.76506 , 23.51675]]"]}


4.1、点显示


代码：

    function drawPoint(PointList){
        vecSource.clear();
        var points = PointList.point;//使用过程中需要修改为被请求服务中的字段
        for(var i=0;i<points.length;i++){
            var point = new ol.geom.Point(ol.proj.fromLonLat(points[i]));            
        var feature = new ol.Feature(point);
        var pointStyle = new ol.style.Style({
          text:new ol.style.Text({
          testAlign:'left',
          text:i+"     ",
          font:'bold 15px 微软雅黑',
          fill:new ol.style.Fill({
            color:'yellow'
          })
        }),
          image:new ol.style.Circle({
          radius:5,//半径
          fill:new ol.style.Fill({
            color:'red'
          }), //填充颜色        
          stroke: new ol.style.Stroke({
            color: 'blue',
            width: 1
          })//渐变颜色和大小
        })
        });
        feature.setStyle(pointStyle);
        vecSource.addFeature(feature);
        }
    }

那么直接调用：

drawPoint(vectorlist);

得到效果有：

1.png

1.png


4.2、线显示


代码：

    function drawLine(LineList){
        vecSource.clear();
        var lines = LineList.line;
        var line = new ol.geom.LineString();
        for(var i = 0;i < lines.length;i++){
            // var pPoint = ol.proj.transform([lines[i][0]*1,lines[i][1]*1], 'EPSG:4326', 'EPSG:3857');
            // line.appendCoordinate(pPoint);
            // var geoPoint = new ol.geom.Point([pPoint[0]*1,pPoint[1]*1]);
            line.appendCoordinate(ol.proj.fromLonLat(lines[i]));
            //标记每一个节点
            var geoPoint = new ol.geom.Point([ol.proj.fromLonLat(lines[i])[0]*1,ol.proj.fromLonLat(lines[i])[1]*1]);
            var pFeature = new ol.Feature(geoPoint);
            //pFeature.setStyle(pointStyle);
            pFeature.setStyle(new ol.style.Style({
                text:new ol.style.Text({
                    testAlign:'left',
                    text:i+"    ",
                    font:'bold 20px 微软雅黑',
                    fill:new ol.style.Fill({
                        color:'red'
                    })
                }),
            }));
            vecSource.addFeature(pFeature);
        }
        var feature = new ol.Feature(line);
        feature.setStyle(lineStyle);
        vecSource.addFeature(feature);
    }

效果：

image.png


4.3、面显示


代码：

1.  function drawPolygon(PloygonList){
        vecSource.clear();
    var ploys = PloygonList.polygon;
    for(var i=0;i < ploys.length;i++){
      var ploy = ploys[i];
      var json = JSON.parse(ploy);
      var polygon = new ol.geom.Polygon([json]);
      polygon.applyTransform(ol.proj.getTransform('EPSG:4326', 'EPSG:3857'));
      var feature = new ol.Feature(polygon);
      var polygonStyle = new ol.style.Style({
        text:new ol.style.Text({
                  testAlign:'center',
                  text:"区域"+i,
                  font:'bold 20px 微软雅黑',
                  fill:new ol.style.Fill({
                      color:'black'
            })
          }),
          fill: new ol.style.Fill({
                color: '#0055ff'
            }),
        stroke: new ol.style.Stroke({
          color: '#ffcc33',
          width: 3
        })
      });
      feature.setStyle(polygonStyle);
      vecSource.addFeature(feature);
    }
    }

效果：

1.png

image.png

5、结束


由于个人喜好因素，矢量数据表现形式可能存在无数样式。所以往往大家有喜欢定制化的。那么在细节之处传入喜好的参数，就能够得到自己想要的样式了。所以有时候则需要将函数改动的更为灵活，这里静态显示其实也体现不出这种形式的好处，如若改为交互式的情形，那么所有配置参数将都可让用户自己设置。


这里仅用点显示函数做例子，其他的都类似：

function drawPoint(PointList,c1,c2,r,w){
        vecSource.clear();
        var points = PointList.point;//使用过程中需要修改为被请求服务中的字段
        for(var i=0;i<points.length;i++){
            var point = new ol.geom.Point(ol.proj.fromLonLat(points[i]));            
        var feature = new ol.Feature(point);
        var pointStyle = new ol.style.Style({
          text:new ol.style.Text({
          testAlign:'left',
          text:i+"     ",
          font:'bold 15px 微软雅黑',
          fill:new ol.style.Fill({
            color:'yellow'
          })
        }),
          image:new ol.style.Circle({
          radius:r,//半径
          fill:new ol.style.Fill({
            color:c1
          }), //填充颜色        
          stroke: new ol.style.Stroke({
            color: c2,
            width: w
          })//渐变颜色和大小
        })
        });
        feature.setStyle(pointStyle);
        vecSource.addFeature(feature);
        }
    }

这里就可以将，点要素的半径、填充颜色、渐变色和大小都定制化选择了。

文章标签：
定位技术
nanke_yh
目录
相关文章
anisbob
|
缓存 资源调度 JavaScript
瓦片地图的介绍和Vue中使用Openlayer加载瓦片地图的方法使用
瓦片地图的介绍和Vue中使用Openlayer加载瓦片地图的方法使用
anisbob
2894 0
夜郎king
|
定位技术
干货！解决Cesium中Entity移动漂移的问题
案例场景：在Cesium开发三维场景展示中，肯定会碰到加载Entity的需求，如果在你的gis应用中，带了地形的展示。那么在旋转切换画面时，Entity是否跟着一起动了起来，感觉像漂移一样呢？
夜郎king
4503 0
干货！解决Cesium中Entity移动漂移的问题
GIS技术杂谈
Cesium开发：模型实体高亮
Cesium开发：模型实体高亮
GIS技术杂谈
1167 0
zuoben
Threejs实现下雨，下雪，阴天，晴天，火焰
Threejs实现下雨，下雪，阴天，晴天，火焰
zuoben
2786 0
Threejs实现下雨，下雪，阴天，晴天，火焰
街角小林
|
JavaScript 前端开发 定位技术
OpenLayers入门（一）
OpenLayers入门（一）
街角小林
1625 0
OpenLayers入门（一）
球球不吃虾
|
JavaScript 定位技术 API
OpenLayers入门-第二篇、在vue3中使用elementplus制作图层控件，图层切换，显示隐藏，图层排序
OpenLayers入门-第二篇、在vue3中使用elementplus制作图层控件，图层切换，显示隐藏，图层排序
球球不吃虾
1160 1
baker_zhuang
Cesium给物体添加贴图
这篇文章讲解了在Cesium中如何为3D模型添加贴图，并提供了具体的实现步骤和代码示例。
baker_zhuang
929 2
baker_zhuang
|
定位技术
Cesium修改地球的贴图为视频或者图片
这篇文章说明了如何在Cesium中修改地球的贴图，替换为自定义的图像或视频纹理。
baker_zhuang
614 1
Cesium修改地球的贴图为视频或者图片
蓝易云
|
开发框架 前端开发 定位技术
在Mars3d实现cesium的ImageryLayer自定义瓦片的层级与原点
通过上述步骤，您可以成功在Mars3D平台上集成Cesium，并实现自定义瓦片图层的层级与原点配置。这一过程不仅提升了地图应用的定制化程度，也为处理特定数据集和优化用户体验提供了灵活的解决方案。在实际开发过程中，不断测试和微调是确保图层展示效果与性能的关键。
蓝易云
919 0
theMuseCatcher
|
JavaScript
Vue3文字滚动（TextScroll）
这是一个可定制的文字滚动组件，支持水平和垂直滚动。主要属性包括滚动文字数组 `scrollText`、是否启用单条文字滚动 `single`、滚动区域宽高 `width` 和 `height`、滚动区域和文字样式 `boardStyle` 和 `textStyle`、滚动条数 `amount`、间距 `gap`、动画间隔 `interval` 和 `step`、以及垂直滚动时间间隔 `verticalInterval`。组件内置多种样式调整功能，并提供在线预览示例。
theMuseCatcher
625 0
Vue3文字滚动（TextScroll）

热门文章

最新文章

  • 1
    通过阿里云容器服务深度学习解决方案上手Caffe+多GPU训练
  • 2
    阿里云服务器搭建WordPress网站完整步骤图文教程（附二级域名解析）
  • 3
    让每个进程不同外网 IP，实现局部单窗口单 IP，驱动级网络加速器原理！
  • 4
    阿里云磁盘无损扩容&Windows,Linux无损扩容分区大小
  • 5
    【教程】Linux下如何下载与安装Kafka ？
  • 6
    MySQL · 引擎特性 · InnoDB 大字段压缩
  • 7
    模块化笔记软件综合评测：Craft、Notion、FlowUs
  • 8
    【趋势】移动机器人将是工厂实现智能化的关键因素
  • 9
    Curvilinear structure detections
  • 10
    WCF绑定细节（2）——绑定，绑定元素
  • 1
    大模型应用：面向结构化表格的 RAG 实践：技术架构与特性解析.26
    46
  • 2
    2026年cms建站系统行业的未来发展趋势及挑战分析
    48
  • 3
    Vibe Coding的终极秘密，我偷偷用了半年的AI神器，今天决定不藏了，都分享给大家了～～～～
    40
  • 4
    9B 上端侧：多模态实时对话，难点其实在“流”
    30
  • 5
    从手工点点到AI自动生成用例，测试人的这个春天不太一样
    39
  • 6
    除夕夜，不聊AI了，咱聊聊心里话
    30
  • 7
    我用 AI 写了篇批评 AI 的文章，然后被 Reddit 一眼看穿了
    27
  • 8
    Xftp-7.0.0109p文件传输安装步骤详解（附FTP/SFTP连接与文件传输教程）
    38
  • 9
    2026 年，医疗机构继续重仓“竞价排名”是否理性？——从技术视角看医疗GEO与数字信誉资产
    39
  • 10
    JWT编码/解码核心JS实现
    26

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    第五届伏魔挑战赛如约来袭，诚邀各路高手来战！