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

一、渲染GeoJSON

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

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

js 复制代码
<!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>

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

  • 'ol/format/GeoJSON':用于读取和写入序列化数据的格式(本例中为 GeoJSON)
  • 'ol/source/Vector':用于获取数据和管理要素空间索引的矢量源
  • 'ol/layer/Vector':用于在地图上渲染要素的矢量图层
js 复制代码
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/ 上看到带有国家边界的地图。

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

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

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

js 复制代码
const map = new Map({

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

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

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

相关推荐
mysla16 分钟前
嵌入式学习day46-硬件—汇编
汇编·学习
qq_386322691 小时前
华为网路设备学习-33(BGP协议 八)BGP路由 选路规则
学习·华为
xy_recording1 小时前
学习番外:Docker和K8S理解
学习·docker·kubernetes
鱼嘻1 小时前
西嘎嘎学习 - C++ 继承 - Day 10
开发语言·c++·学习·算法
Hello_Embed2 小时前
STM32HAL 快速入门(二十四):I2C 编程(一)—— 从 OLED 显示初识 I2C 协议
c语言·stm32·单片机·嵌入式硬件·学习
凯尔萨厮2 小时前
Java学习笔记四(继承)
java·笔记·学习
ホロHoro2 小时前
学习笔记:Javascript(5)——事件监听(用户交互)
javascript·笔记·学习
爱喝水的鱼丶3 小时前
SAP-MM:SAP核心组织单元:工厂(Plant)全面学习指南及配置图解
学习·sap·abap·配置·工厂·mm模块
励志不掉头发的内向程序员3 小时前
STL库——AVL树
开发语言·c++·学习
晨非辰4 小时前
#C语言——刷题攻略:牛客编程入门训练(十一):攻克 循环控制(三),轻松拿捏!
c语言·开发语言·经验分享·学习·visual studio