vue+openlayers之几何图形交互绘制基础与实践

news2024/11/20 13:34:55

文章目录

  • 1.实现效果
  • 2.实现步骤
  • 3.示例页面代码
  • 3.基本几何图形绘制的关键代码

1.实现效果

绘制点、线、多边形、圆、正方形、长方形
在这里插入图片描述

2.实现步骤

  1. 引用openlayers开发库。
  2. 加载天地图wmts瓦片地图。
  3. 在页面上添加几何图形绘制的功能按钮,使用下拉列表(select)设置几何图形绘制功能项,并设置其样式。其中,当“几何图形类型”为“无”时清除当前绘制的所有图形。

3.示例页面代码

<template>
  <div id="map" class="imap">
  </div>
  <div class="menu">
    <label>几何图形类型:</label>
    <select id="type" v-model="typeSelect" @change="typeSelectOnChange">
      <option value="">无</option>
      <option value="Point">点</option>
      <option value="LineString">线</option>
      <option value="Polygon">多边形</option>
      <option value="Circle">圆</option>
      <option value="Square">正方形</option>
      <option value="Box">长方形</option>
    </select>
  </div>
</template>

3.基本几何图形绘制的关键代码

<script setup>
  // vue+openlayers之几何图形交互绘制基础与实践

  import {
    onMounted,
    ref
  } from 'vue'
  import 'ol/ol.css';
  import {
    Map,
    View
  } from 'ol';
  import TileLayer from 'ol/layer/Tile';
  import XYZ from 'ol/source/XYZ';
  import VectorLayer from "ol/layer/Vector";
  import VectorSource from "ol/source/Vector";
  import {
    Circle,
    Fill,
    Stroke,
    Style,
    Text
  } from "ol/style";
  import Draw, {
    createRegularPolygon
  } from "ol/interaction/Draw";
  import {
    LinearRing,
    LineString,
    MultiLineString,
    MultiPoint,
    MultiPolygon,
    Point,
    Polygon,
  } from 'ol/geom';

  var map = null;
  var draw; // 绘制对象
  // 实例化一个矢量地图vector
  var source = new VectorSource({
    wrapX: false
  })
  var vector = new VectorLayer({
    source: source,
    style: new Style({
      fill: new Fill({ //填充样式
        color: 'rgba(225,225,225,0.2)'
      }),
      stroke: new Stroke({ //边界样式
        color: '#ece034',
        width: 2
      }),
      image: new Circle({ //点要素样式
        radius: 7,
        fill: new Fill({
          color: '#ece034'
        })
      }),
    })
  })
  onMounted(() => {
    map = new Map({
      target: 'map',
      layers: [
        new TileLayer({
          source: new XYZ({
            url: "你的天地图地址",
            attributions: '影像底图',
            crossOrigin: 'anonymous',
            wrapX: false //如果设置为 false,地图在横向滚动到最右侧时不会出现重复的地图;
          }),
          preload: Infinity
        })
      ],
      view: new View({
        //地图初始中心点
        center: [0, 0],
        minZoom: 2,
        maxZoom: 18,
        zoom: 5
      })
    });

    window.olmap = map
    map.addLayer(vector)

  })

  const typeSelect = ref('')

  function typeSelectOnChange() {
    map.removeInteraction(draw)
    addInteraction()
  }

  //根据几何图形类型进行绘制
  function addInteraction() {
    var value = typeSelect.value //几何图形类型
    if (value) {
      if (source == null) {
        source = new VectorSource({
          wrapX: false
        });
        vector.setSource(source); //添加数据源
      }
      var geometryFunction, maxPoints;
      if (value === 'Square') { //正方形
        value = 'Circle'; //设置几何图形类型为Circle(圆形)
        //设置几何图形类型,即创建正多边形
        geometryFunction = createRegularPolygon(4);
      } else if (value === 'Box') { //长方形
        value = 'LineString'; //设置绘制类型为LineString(线)
        maxPoints = 2; //设置最大点数为2
        //设置几何图形类型,即设置长方形的坐标点
        geometryFunction = function (coordinates, geometry) {
          var start = coordinates[0];
          var end = coordinates[1];
          if (!geometry) {
            //多边形
            geometry = new Polygon([
              [start, [start[0], end[1]], end, [end[0], start[1]], start]
            ]);
          }
          geometry.setCoordinates([
            [start, [start[0], end[1]], end, [end[0], start[1]], start]
          ]);
          return geometry;
        };
      }
      //实例化交互式图形绘制控件并添加到地图容器中
      draw = new Draw({
        source: source, //数据源
        type: /**@type{ol.geom.GeometryType}*/ (value), //几何图形类型
        geometryFunction: geometryFunction, //几何图形变更时调用函数
        maxPoints: maxPoints, //最大点数
        style: new Style({
          image: new Circle({
            radius: 7,
            fill: new Fill({
              color: '#ece034',
            }),
          }),
          stroke: new Stroke({ //边界样式
            color: '#ece034',
            width: 2
          }),
        }),
      });
      map.addInteraction(draw);
    } else {
      source = null;
      vector.setSource(source); //清空绘制的图形
    }
  }
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1896026.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

SLAM 精度评估

SLAM 精度的评估有两个最重要的指标&#xff0c;即绝对轨迹误差&#xff08;ATE&#xff09;和相对位姿误差&#xff08;RPE&#xff09;的 均方根误差&#xff08;RMSE&#xff09;: 绝对轨迹误差:直接计算相机位姿的真实值与 SLAM 系统的估计值之间的差值&#xff0c;首先将…

Modbus通信协议学习——调试软件

Modbus通信协议是一种广泛应用于工业自动化领域的串行通信协议&#xff0c;由Modicon公司&#xff08;现为施耐德电气Schneider Electric&#xff09;于1979年开发。该协议已成为工业电子设备之间通信的通用标准&#xff0c;支持多种设备和系统之间的数据交换。以下是对Modbus通…

【内网渗透】从0到1的内网渗透基础概念笔记

目录 域 域的介绍 单域 父域和子域 域树 域森林 域名服务器 活动目录 活动目录介绍 域内权限 组 域本地组 全局组 通用组 总结 示例 A-G-DL-P策略 重要的域本地组 重要的全局组、通用组 安全域划分 域 域的介绍 Windows域是计算机网络的一种形式&#xf…

零基础学习MySQL---库的相关操作

顾得泉&#xff1a;个人主页 个人专栏&#xff1a;《Linux操作系统》 《C从入门到精通》 《LeedCode刷题》 键盘敲烂&#xff0c;年薪百万&#xff01; 一、创建数据库 1.语法 CREATE DATABASE [IF NOT EXISTS] db_name [create_specification [, create_specification] .…

vscode(七):设置不同括号有不同颜色

一、打开vscode 的setting界面 输入 bracket pair &#xff0c;将Editor › Guides: Bracket Pairs这一项设置为true 二、效果 不同括号对具有不同的颜色

系统提示我未定义与 ‘double‘ 类型的输入参数相对应的函数 ‘finverse‘,如何解决?

&#x1f3c6;本文收录于「Bug调优」专栏&#xff0c;主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案&#xff0c;希望能够助你一臂之力&#xff0c;帮你早日登顶实现财富自由&#x1f680;&#xff1b;同时&#xff0c;欢迎大家关注&&收藏&&…

【Linux】多线程(互斥 同步)

我们在上一节多线程提到没有任何保护措施的抢票是会造成数据不一致的问题的。 那我们怎么办&#xff1f; 答案就是进行加锁。 目录 加锁&#xff1a;认识锁和接口&#xff1a;初始化&#xff1a;加锁 && 解锁&#xff1a;全局的方式&#xff1a;局部的方式&#xff1a…

rtpengine_mr12.0 基础建设容器运行

目录 Dockerfile rtpengine.conf 容器内编译安装 RTPEngine 正常提供功能 1. 启动RTPEngine服务 2. 删除 RTPEngine服务 3. 加载内核模块 检查所有进程是否正在运行 上传到仓库 博主wx&#xff1a;yuanlai45_csdn 博主qq&#xff1a;2777137742 后期会创建粉丝群&…

地埋RF射频电子标识器探测仪ED8000(V400版)使用操作说明之1测量准备工作

地埋RF射频电子标识器探测仪ED8000&#xff08;V400版&#xff09;是一台集成了多频率、多种ID标识器调制模式、高低灵敏度调节、可读写标识器等全功能、高性能电子标识器探测仪。它有着极高的灵敏度,同时具备良好的噪声抑制能力&#xff0c;不仅适合专业测绘人员&#xff0c;普…

监控平台—Zabbix对接grafana

目录 一、安装grafana并启动 二.浏览器访问 三、导入zabbix数据&#xff0c;对接grafana 四.如何导入模版 一、安装grafana并启动 添加一台服务器192.168.80.102 初始化操作 systemctl disable --now firewalld setenforce 0 vim /etc/selinux/config SELINUXdisabled cd /…

东哥教你如何用Orange Ai pro为家里做一个垃圾分类检测机器

前言 最近入手了一块香橙派&#xff08;Orange Ai Pro&#xff09;的板子&#xff0c;他们的口号是&#xff1a;为AI而生&#xff0c;这让一个算法工程师按捺不住了&#xff0c; 之前主要是在RKNN和ESP32等设备上部署AI模型&#xff0c;看到官方介绍的强大AI算力&#xff0c;很…

入门PHP就来我这(纯干货)08

~~~~ 有胆量你就来跟着路老师卷起来&#xff01; -- 纯干货&#xff0c;技术知识分享 ~~~~ 路老师给大家分享PHP语言的知识了&#xff0c;旨在想让大家入门PHP&#xff0c;并深入了解PHP语言。 1 PHP对象的高级应用 1.1 final关键字 final 最终的、最后的。被final修饰过的类…

如何在电脑设备上恢复已删除的照片

丢失 PC、智能手机或 USB 闪存盘上的照片可能会让人不知所措。幸运的是&#xff0c;使用最好的照片恢复软件&#xff0c;您可以在 Windows 和 Android 上恢复已删除的照片。本博客讨论如何使用照片恢复来恢复丢失的照片。 数码照片是我们记忆的重要组成部分。然而&#xff0c;它…

UE4_材质基础_切线空间与法线贴图

学习笔记&#xff0c;不喜勿喷&#xff0c;侵权立删&#xff0c;祝愿大家生活越来越好&#xff01; 一、切线空间 在《OpenGL基础11&#xff1a;空间》中提到了观察空间、裁剪空间、世界空间等。切线空间和它们一样&#xff0c;都属于坐标空间 上面就是一个…

FPGA的理解,个人的见解,不一定对

类似于面包板上搭建电路&#xff0c;但是使用的是逻辑单元模块&#xff1b;如加法器&#xff0c;减法器&#xff0c;寄存器等 没有模拟电路的电容&#xff0c;电阻&#xff1b;但是逻辑单元的底层实现&#xff0c;使用MOS管等电路实现电路的开关&#xff1b;从而表示0&#xf…

springai+pgvector+ollama实现rag

首先在ollama中安装mofanke/dmeta-embedding-zh:latest。执行ollama run mofanke/dmeta-embedding-zh 。实现将文本转化为向量数据 接着安装pgvector&#xff08;建议使用pgadmin4作为可视化工具&#xff0c;用navicate会出现表不显示的问题&#xff09; 安装好需要的软件后我们…

【python】OpenCV—Nighttime Low Illumination Image Enhancement

文章目录 1 背景介绍2 代码实现3 原理分析4 效果展示5 附录np.ndindexnumpy.ravelnumpy.argsortcv2.detailEnhancecv2.edgePreservingFilter 1 背景介绍 学习参考来自&#xff1a;OpenCV基础&#xff08;24&#xff09;改善夜间图像的照明 源码&#xff1a; 链接&#xff1a…

vue2 webpack使用optimization.splitChunks分包,实现按需引入,进行首屏加载优化

optimization.splitChunks的具体功能和配置信息可以去网上自行查阅。 这边简单讲一下他的使用场景、作用、如何使用&#xff1a; 1、没用使用splitChunks进行分包之前&#xff0c;所有模块都揉在一个文件里&#xff0c;那么当这个文件足够大、网速又一般的时候&#xff0c;首…

原厂商是什么意思?云管平台原厂商有哪些企业?

最近不少IT小伙伴在问关于原厂商相关问题&#xff0c;今天我们就来简单回答一下&#xff0c;仅供参考&#xff01; 原厂商是什么意思&#xff1f; 原厂商&#xff0c;或称原厂&#xff0c;是指生产特定产品或零部件的原始厂家。 软件原厂商是什么意思&#xff1f; 软件原厂…

课设:选课管理系统(Java+MySQL)

在本博客中&#xff0c;我将介绍用Java、MySQL、JDBC和Swing GUI开发一个简单的选课管理系统。 技术栈 Java&#xff1a;用于编写应用程序逻辑MySQL&#xff1a;用于存储和管理数据JDBC&#xff1a;用于连接Java应用程序和MySQL数据库Swing GUI&#xff1a;用于构建桌面应用程…