四十四、openlayers官网示例Geographic Coordinates解析——在地图上添加弹窗,点击显示图形信息

使用Overlay在地图上添加弹窗,点击控制显隐。

初始化图层的时候,添加一个矢量的点数据到地图上,在new Feature时添加一些自定义属性。

  const place = [-110, 45];

    const point = new Point(place);

    const map = new Map({
      target: "map",
      view: new View({
        center: place,
        zoom: 8,
      }),
      layers: [
        new TileLayer({
          source: new StadiaMaps({
            layer: "outdoors",
          }),
        }),
        new VectorLayer({
          source: new VectorSource({
            features: [
              new Feature({ geometry: point, name: "sss", color: "red" }),
            ],
          }),
          style: {
            "circle-radius": 20,
            "circle-fill-color": "red",
          },
        }),
      ],
    });

 写一个元素,用来展示信息。

 <div id="map" class="map">
      <div id="popup">
        <div>name:{{ message.name }}</div>
        <div>color:{{ message.color }}</div>
        <div class="triangle"></div>
      </div>
    </div>

添加一些样式。 

#popup {
  width: 160px;
  height: 80px;
  border-radius: 10px;
  background: #fff;
  position: absolute;
  padding: 10px;
  box-sizing: border-box;
}
.triangle {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -20px;
  border-top: 10px solid #fff;
  border-bottom: 10px solid transparent;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

创建overlay实例 ,offset是偏移量,根据写的元素大小调节。

 const element = document.getElementById("popup");

    const popup = new Overlay({
      element: element,
      stopEvent: false,
      offset:[-80,-120],
    });
    map.addOverlay(popup);

 点击地图的时候,获取图形的信息并给 this.message赋值。

 map.on("click", (event) => {
      if (popover) {
        popover.dispose();
        popover = undefined;
      }
      const feature = map.getFeaturesAtPixel(event.pixel)[0];
      if (!feature) {
        popup.setPosition(undefined);
        return;
      }
      const coordinate = feature.getGeometry().getCoordinates();
      popup.setPosition(coordinate);
      this.message.name = feature.get("name");
      this.message.color = feature.get("color");
    });

 完整代码:

<template>
  <div class="box">
    <h1>Geographic Coordinates</h1>
    <div id="map" class="map">
      <div id="popup">
        <div>name:{{ message.name }}</div>
        <div>color:{{ message.color }}</div>
        <div class="triangle"></div>
      </div>
    </div>
     <div id="info"></div>
  </div>
</template>

<script>
import { Feature, Map, Overlay, View } from "ol/index.js";
import { OSM, Vector as VectorSource } from "ol/source.js";
import { Point } from "ol/geom.js";
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer.js";
import { useGeographic } from "ol/proj.js";
import StadiaMaps from "ol/source/StadiaMaps.js";
export default {
  name: "",
  components: {},
  data() {
    return {
      map: null,
      extentData: "",
      message: {
        name: "",
        color: "",
      },
    };
  },
  computed: {},
  created() {},
  mounted() {
    useGeographic();

    const place = [-110, 45];

    const point = new Point(place);

    const map = new Map({
      target: "map",
      view: new View({
        center: place,
        zoom: 8,
      }),
      layers: [
        new TileLayer({
          source: new StadiaMaps({
            layer: "outdoors",
          }),
        }),
        new VectorLayer({
          source: new VectorSource({
            features: [
              new Feature({ geometry: point, name: "sss", color: "red" }),
            ],
          }),
          style: {
            "circle-radius": 20,
            "circle-fill-color": "red",
          },
        }),
      ],
    });

    const element = document.getElementById("popup");

    const popup = new Overlay({
      element: element,
      stopEvent: false,
      offset:[-80,-120],
    });
    map.addOverlay(popup);

    function formatCoordinate(coordinate) {
      return `
    <table>
      <tbody>
        <tr><th>lon</th><td>${coordinate[0].toFixed(2)}</td></tr>
        <tr><th>lat</th><td>${coordinate[1].toFixed(2)}</td></tr>
      </tbody>
    </table>`;
    }

    const info = document.getElementById("info");
    map.on("moveend", function () {
      const view = map.getView();
      const center = view.getCenter();
      info.innerHTML = formatCoordinate(center);
    });

    let popover;
    map.on("click", (event) => {
      if (popover) {
        popover.dispose();
        popover = undefined;
      }
      const feature = map.getFeaturesAtPixel(event.pixel)[0];
      if (!feature) {
        popup.setPosition(undefined);
        return;
      }
      const coordinate = feature.getGeometry().getCoordinates();
      popup.setPosition(coordinate);
      this.message.name = feature.get("name");
      this.message.color = feature.get("color");
    });

    map.on("pointermove", function (event) {
      const type = map.hasFeatureAtPixel(event.pixel) ? "pointer" : "inherit";
      map.getViewport().style.cursor = type;
    });
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
#map {
  width: 100%;
  height: 500px;
}
.box {
  height: 100%;
}
#popup {
  width: 160px;
  height: 80px;
  border-radius: 10px;
  background: #fff;
  position: absolute;
  padding: 10px;
  box-sizing: border-box;
}
.triangle {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -20px;
  border-top: 10px solid #fff;
  border-bottom: 10px solid transparent;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}
</style>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

应用层——HTTP协议(自己实现一个http协议)——客户端(浏览器)的请求做反序列化和请求分析,然后创建http向响应结构

应用层&#xff1a;之前我们写的创建套接字&#xff0c;发送数据&#xff0c;序列化反序列化这些都是在写应用层 我们程序员写的一个个解决我们实际问题, 满足我们日常需求的网络程序, 都是在应用层 之前的网络计算机是我们自定义的协议&#xff1a;传输的数据最终是什么样的结…

概率论与数理统计,重要知识点——全部公式总结

二、一维随机变量及其分布 五个分布参考另外一篇文章 四、随机变量的数字特征 大数定理以及中心极限定理 六、数理统计

基于SpringBoot+Vue单位考勤系统设计和实现(源码+LW+调试文档+讲解等)

&#x1f497;博主介绍&#xff1a;✌全网粉丝1W,CSDN作者、博客专家、全栈领域优质创作者&#xff0c;博客之星、平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌&#x1f497; &#x1f31f;文末获取源码数据库&#x1f31f; 感兴趣的可以先收藏起来&#xff0c;还…

【SkyWalking】使用PostgreSQL做存储K8s部署

拉取镜像 docker pull apache/skywalking-ui:10.0.1 docker tag apache/skywalking-ui:10.0.1 xxx/xxx/skywalking-ui:10.0.1 docker push xxx/xxx/skywalking-ui:10.0.1docker pull apache/skywalking-oap-server:10.0.1 docker tag apache/skywalking-oap-server:10.0.1 xxx…

K-BAT01,K-CU01和利时卡件

K-BAT01,K-CU01和利时卡件。现场控制站下装与在线调试。9二、组态流程&#xff1a;操作站组态控制站组态新建工程控制站用户组态历史站组态下装现场控制站下装历史站下装操作员站10三、组态详解&#xff1a;1、K-BAT01,K-CU01和利时卡件。新建工程&#xff1a;打开工程总控&…

SAP HCM HR_PAD_HIRE_EMPLOYEE 自定义信息类型字段保存问题

导读 INTRODUCTION SAP HCM入职程序&#xff1a;SAP HCM入职程序有两个一个是HR_PAD_HIRE_EMPLOYEE一个是HR_MAINTAIN_MASTERDATA&#xff0c;前面的函数是SAP为新框架开发的&#xff0c;后面函数是旧的逻辑&#xff0c;这两个函数的在于底层的结构不一致&#xff0c;对于自定…

Three.js——粒子效果、粒子水波、粒子组成立方体

个人简介 &#x1f440;个人主页&#xff1a; 前端杂货铺 ⚡开源项目&#xff1a; rich-vue3 &#xff08;基于 Vue3 TS Pinia Element Plus Spring全家桶 MySQL&#xff09; &#x1f64b;‍♂️学习方向&#xff1a; 主攻前端方向&#xff0c;正逐渐往全干发展 &#x1…

Linux卸载RocketMQ教程【带图文命令巨详细】

巨详细Linux卸载RocketMQ教程 #查询rocketmq进程 ps -ef | grep rocketmq #杀掉相关进程 kill -9 进程id #查找安装目录 find / -name runbroker.sh #删除rocketMQ目录 rm -rf 安装目录框起来的就是进程id&#xff0c;全部杀掉 这里就是我的安装目录&#xff0c;我的删除命令…

【进程调度的基本过程】初步认识进程和线程的区别与联系:计算机是如何工作的

​ &#x1f525;个人主页&#xff1a; 中草药 &#x1f525;专栏&#xff1a;【Java】登神长阶 史诗般的Java成神之路 &#x1f43a;一.冯诺依曼体系结构 认识计算机的祖师爷 -- 冯诺依曼 冯诺依曼&#xff08;John von Neumann&#xff0c;1903年12⽉28⽇-1957年2⽉8⽇&…

北航第四次数据结构与程序设计编程题复习

到期末了&#xff0c;所以再来复习一下以前的作业。 北航第四次数据结构与程序设计编程题 一、栈操作&#xff08;栈-基本题&#xff09;二、C程序括号匹配检查三、计算器&#xff08;表达式计算-后缀表达式实现&#xff0c;结果为浮点&#xff09;四、文本编辑操作模拟&#…

Flutter 使用ffigen生成ffmpeg的dart接口

Flutter视频渲染系列 第一章 Android使用Texture渲染视频 第二章 Windows使用Texture渲染视频 第三章 Linux使用Texture渲染视频 第四章 全平台FFICustomPainter渲染视频 第五章 Windows使用Native窗口渲染视频 第六章 桌面端使用texture_rgba_renderer渲染视频 第七章 使用ff…

数据挖掘--引论

数据挖掘--引论 数据挖掘--认识数据 数据挖掘--数据预处理 数据挖掘--数据仓库与联机分析处理 数据挖掘--挖掘频繁模式、关联和相关性&#xff1a;基本概念和方法 数据挖掘--分类 数据挖掘--聚类分析&#xff1a;基本概念和方法 1.2什么是数据挖掘 数据挖掘是从大量数据…

【Python】成功解决SyntaxError: invalid syntax

【Python】成功解决SyntaxError: invalid syntax 下滑即可查看博客内容 &#x1f308; 欢迎莅临我的个人主页 &#x1f448;这里是我静心耕耘深度学习领域、真诚分享知识与智慧的小天地&#xff01;&#x1f387; &#x1f393; 博主简介&#xff1a;985高校的普通本硕&am…

QT Udp广播实现设备发现

测试环境 本文选用pc1作为客户端&#xff0c;pc2&#xff0c;以及一台虚拟机作为服务端。 pc1,pc2(客户端&#xff09;: 虚拟机&#xff08;服务端)&#xff1a; 客户端 原理&#xff1a;客户端通过发送广播消息信息到ip:255.255.255.255(QHostAddress::Broadcast),局域网…

使用MATLAB的BP神经网络进行数据分类任务(简单版)

BP神经网络&#xff0c;即反向传播&#xff08;Backpropagation&#xff09;神经网络&#xff0c;是一种多层前馈神经网络&#xff0c;它通过反向传播算法来更新网络权重。这种网络结构特别适合于分类和回归任务。 MATLAB环境设置 在开始之前&#xff0c;请确保MATLAB环境已经…

smbmap一键查扫描SMB共享信息(KALI工具系列十八)

目录 1、KALI LINUX 简介 2、smbmap工具简介 3、在KALI中使用smbmap 3.1 目标主机IP&#xff08;win&#xff09; 3.2 KALI的IP 4、操作示例 4.1 寻找共享目录 4.2 指定目标主机 4.3 指定共享目录 4.4 带密码访问 5、总结 1、KALI LINUX 简介 Kali Linux 是一个功…

LeetCode 7- 整数反转

给你一个 32 位的有符号整数 x &#xff0c;返回将 x 中的数字部分反转后的结果。 如果反转后整数超过 32 位的有符号整数的范围 [-231, 231 - 1] &#xff0c;就返回 0。 假设环境不允许存储 64 位整数&#xff08;有符号或无符号&#xff09;。 示例 1&#xff1a; 输入&…

【计算机网络】对应用层协议中HTTPS协议的总结

˃͈꒵˂͈꒱ write in front ꒰˃͈꒵˂͈꒱ ʕ̯•͡˔•̯᷅ʔ大家好&#xff0c;我是xiaoxie.希望你看完之后,有不足之处请多多谅解&#xff0c;让我们一起共同进步૮₍❀ᴗ͈ . ᴗ͈ აxiaoxieʕ̯•͡˔•̯᷅ʔ—CSDN博客 本文由xiaoxieʕ̯•͡˔•̯᷅ʔ 原创 CSDN 如…

让 AI 写高考作文丨10 款大模型 “交卷”,实力水平如何?

文章部分素材来源 | CSDN&#xff08;ID&#xff1a;CSDNnews&#xff09; 前言 在科技日新月异的今天&#xff0c;人工智能&#xff08;AI&#xff09;已不再是遥不可及的未来科技&#xff0c;而是逐渐融入我们日常生活的实用工具。从智能语音助手到自动驾驶汽车&#xff0c…

超详解——识别None——小白篇

目录 1. 内建类型的布尔值 2. 对象身份的比较 3. 对象类型比较 4. 类型工厂函数 5. Python不支持的类型 总结&#xff1a; 1. 内建类型的布尔值 在Python中&#xff0c;布尔值的计算遵循如下规则&#xff1a; None、False、空序列&#xff08;如空列表 []&#xff0c;空…