【openlayers系统学习】1.1渲染GeoJSON,添加link交互

一、渲染GeoJSON

在进入编辑之前,我们将看一下使用矢量源和图层进行基本要素渲染。Workshop在 data​ 目录中包含一个 countries.json​ GeoJSON文件。我们首先加载该数据并将其渲染在地图上。

首先,编辑 index.html​ 以便向地图添加深色背景:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>OpenLayers</title><style>@import "node_modules/ol/ol.css";</style><style>html, body, #map-container {margin: 0;height: 100%;width: 100%;font-family: sans-serif;background-color: #04041b;}</style></head><body><div id="map-container"></div><script src="./main.js" type="module"></script></body>
</html>

image

现在我们在mian.js文件中导入处理矢量数据的三个重要要素:

  • ‘ol/format/GeoJSON’:用于读取和写入序列化数据的格式(本例中为 GeoJSON)
  • ‘ol/source/Vector’:用于获取数据和管理要素空间索引的矢量源
  • ‘ol/layer/Vector’:用于在地图上渲染要素的矢量图层
import GeoJSON from 'ol/format/GeoJSON';
import Map from 'ol/Map';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import View from 'ol/View';new Map({target: 'map-container',layers: [new VectorLayer({source: new VectorSource({format: new GeoJSON(),url: './data/countries.json',}),}),],view: new View({center: [0, 0],zoom: 2,}),
});

您现在应该能够在 http://localhost:5173/ 上看到带有国家边界的地图。image

由于我们将多次重新加载页面,因此如果地图重新加载时保留位置,那就太好了。我们可以引入 Link​ 交互来完成这项工作。

i/*** 导入Link交互功能。* 该交互功能允许用户在地图上创建一个链接,将地图上的两个位置连接起来。* * 参数无。* * 返回值无,仅为导入模块。*/
import Link from 'ol/interaction/Link';

接下来我们需要将地图分配给一个变量(名为 map​ ),以便我们可以向其中添加交互:

const map = new Map({

image

现在我们可以向地图添加新的链接交互:

/*** 向地图中添加一个交互操作。* 这里的交互操作是指通过`Link`类创建的一个新的交互实例,它允许用户与地图进行某种形式的交互。* * new Link() - 创建的一个新的Link交互实例。* 参数通过`new Link()`的方式创建,并直接传递给`addInteraction`方法进行添加。* * 该方法没有返回值,其主要作用是将新的交互实例添加到地图中,以增强地图的可用性和用户体验。*/
map.addInteraction(new Link());

现在您应该看到页面重新加载时保持地图视图稳定。并且后退按钮的功能与您预期的一样。

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

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

相关文章

Vue 组件的生命周期钩子有哪些用途是什么

Vue 组件的生命周期钩子提供了在不同阶段执行特定逻辑的机会&#xff0c;这些钩子在组件的创建、挂载、更新、销毁等过程中被调用。以下是每个生命周期钩子的常见用途&#xff1a; beforeCreate 用途&#xff1a;由于在这个阶段&#xff0c;组件的 data、computed、methods 和…

使用llama.cpp实现LLM大模型的格式转换、量化、推理、部署

使用llama.cpp实现LLM大模型的量化、推理、部署 大模型的格式转换、量化、推理、部署概述克隆和编译环境准备模型格式转换GGUF格式bin格式 模型量化模型加载与推理模型API服务模型API服务(第三方)GPU推理 大模型的格式转换、量化、推理、部署 概述 llama.cpp的主要目标是能够在…

【代码随想录算法训练营第37期 第十五天 | LeetCode226.翻转二叉树、101.对称二叉树 2】

代码随想录算法训练营第37期 第十五天 | LeetCode226.翻转二叉树、101.对称二叉树 2 一、226.翻转二叉树 解题代码C&#xff1a; /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode() : …

【软考中级 软件设计师】数据结构

数据结构是计算机科学中一个基础且重要的概念&#xff0c;它研究数据的存储结构以及在此结构上执行的各种操作。在准备软考中级-软件设计师考试时&#xff0c;掌握好数据结构部分对于通过考试至关重要。下面是一些核心知识点概览&#xff1a; 基本概念&#xff1a; 数据结构定义…

VBA_MF系列技术资料1-615

MF系列VBA技术资料1-615 为了让广大学员在VBA编程中有切实可行的思路及有效的提高自己的编程技巧&#xff0c;我参考大量的资料&#xff0c;并结合自己的经验总结了这份MF系列VBA技术综合资料&#xff0c;而且开放源码&#xff08;MF04除外&#xff09;&#xff0c;其中MF01-0…

spring-boot集成slf4j(二)logback配置详解

一、configuration 根节点&#xff1a;configuration&#xff0c;作为顶级标签&#xff0c; 可以用来配置一些lockback的全局属性&#xff0c;常见的属性如下&#xff1a; &#xff08;1&#xff09;scan“true” &#xff1a;scan是否开启自动扫描&#xff0c;监控配置文件更…

el-table 组件实现 “合并单元格 + N行数据小计” 功能

目录 需求 - 要实现的效果初始代码代码升级&#xff08;可供多个表格使用&#xff09;CommonTable.vue 子组件 使用子组件1 - 父组件 - 图1~图3使用效果展示 使用子组件2 - 父组件 - 图4使用效果展示 注意【代码优化 - 解决bug】 需求 - 要实现的效果 父组件中 info 数据示例 …

内网安全之证书服务基础知识

PKI公钥基础设施 PKI(Public Key Infrastructure)公钥基础设施&#xff0c;是提供公钥加密和数字签名服务的系统或平台&#xff0c;是一个包括硬件、软件、人员、策略和规程的集合&#xff0c;用来实现基于公钥密码体制的密钥和证书的产生、管理、存储、分发和撤销等功能。企业…

Android Debug Bridge(ADB)命令使用

引言 Android Debug Bridge&#xff08;ADB&#xff09;是一套功能强大的命令行工具&#xff0c;它为Android开发者和高级用户提供了与Android设备通信的能力。无论是进行应用开发、测试还是执行日常设备管理任务&#xff0c;ADB都是不可或缺的工具。本文将详细介绍一些常用的…

element-plus:踩坑日记

el-table Q&#xff1a;有fixed属性时&#xff0c;无数据时&#xff0c;可能出现底部边框消失的bug 现象&#xff1a; 解决方法&#xff1a; .el-table__empty-block {border-bottom: 1px solid var(--el-table-border-color); } el-collapse 折叠面板 Q&#xff1a;标题上…

云平台的安全能力提升解决方案

提升云平台的安全能力是确保数据和服务安全的关键步骤。针对大型云平台所面临的云上安全建设问题&#xff0c;安全狗提供完整的一站式云安全解决方案&#xff0c;充分匹配云平台安全管理方的需求和云租户的安全需求。协助大型云平台建设全网安全态势感知、统一风险管理、统一资…

加强堆(大根堆)

way&#xff1a;看上去好像就是加了个indexMap记录节点在数组heap中的下标&#xff0c;然后就是可以查到某个元素是否在堆里并且可以进行位置的调整&#xff0c;普通的堆是没法知道元素是不是在的&#xff0c;只能弹堆顶元素&#xff0c;插入到堆尾这样子。如果觉得heapSize有点…

PCIE协议-4-物理层逻辑模块

4.1 简介 物理层将事务层和数据链路层与用于链路数据交换的信令技术隔离开来。物理层被划分为逻辑物理层和电气物理层子模块&#xff08;见图4-1&#xff09;。 4.2 逻辑物理层子模块 逻辑子模块有两个主要部分&#xff1a;一个发送部分&#xff0c;它准备从数据链路层传递过…

Spring 中常用的手动装载 bean 方法

在 Spring 的 bean 装载条件中&#xff0c;虽然 Spring 给我们提供了非常好用便捷的 Condition 相关注解&#xff0c;但是很多时候 Condition 相关注解并不满足我们的需求&#xff0c;我需要更复杂的条件手动控制是否装置 bean。这个时候我们就可以实现 Spring 为我们提供的几个…

域名DNS添加CAA记录

目录 概述 检测CAA记录 添加CAA记录 概述 DNS CAA(Certificate Authority Authorization)记录是一种不太常见的DNS记录类型,它主要用于锁定证书颁发机构(CA)列表,以确保只有特定的CA可以为某个域名颁发SSL/TLS证书。CAA记录是保护域名免受钓鱼攻击的安全措施,通过限制…

v-md-editor和SSE实现ChatGPT的打字机式输出

概述 不论是GPT还是文心一言&#xff0c;在回答的时候类似于打字机式的将答案呈现给我们&#xff0c;这样的交互一方面比较友好&#xff0c;另一方面&#xff0c;当答案比较多、生成比较慢的时候也能争取一些答案的生成时间。本文后端使用express和stream&#xff0c;使用SSE将…

Boosting Cache Performance by Access Time Measurements——论文泛读

TOC 2023 Paper 论文阅读笔记整理 问题 大多数现代系统利用缓存来减少平均数据访问时间并优化其性能。当缓存未命中的访问时间不同时&#xff0c;最大化缓存命中率与最小化平均访问时间不同。例如&#xff1a;系统使用多种不同存储介质时&#xff0c;不同存储介质访问时间不同…

【C++初阶】—— 类和对象 (上)

&#x1f4dd;个人主页&#x1f339;&#xff1a;EterNity_TiMe_ ⏩收录专栏⏪&#xff1a;C “ 登神长阶 ” &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; 类和对象 1. 初步认识C2. 类的引入3. 类的定义声明和定义全部放在类体中声明和定义分开存放 4.…

8个实用网站和软件,收藏起来一定不后悔~

整理了8个日常生活中经常能用得到的网站和软件&#xff0c;收藏起来一定不会后悔~ 1.ZLibrary zh.zlibrary-be.se/这个网站收录了超千万的书籍和文章资源&#xff0c;国内外的各种电子书资源都可以在这里搜索&#xff0c;98%以上都可以在网站内找到&#xff0c;并且支持免费下…

Android系统的/etc/mkshrc文件

/etc/mkshrc 文件是用于配置 mksh&#xff08;MirBSD Korn Shell&#xff09;环境的启动脚本。mksh 是 Android 默认使用的 shell&#xff0c;在 shell 启动时会读取并执行这个文件中的配置。以下是关于 /etc/mkshrc 文件的详细信息及其用途。 /etc/mkshrc 文件的作用 环境配…