Openlayers的交互功能（一）——新手教程

最新推荐文章于 2023-09-20 10:52:48 发布

一心学习webGIS

最新推荐文章于 2023-09-20 10:52:48 发布

阅读量752

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/m0_46410110/article/details/131801357

版权

一、OpenLayers简介

OpenLayers是一个开源的，用来制作客户端交互式（interactive）地图的JavaScript类库，并且可以在绝大多数的浏览器中显示。由于OpenLayers是客户端的类库，所以不需要特殊的服务器端软件或设置。它的作用主要是用于展现数据并且提供相应的地图操作工具。
官方API文档地址

1.官网首页

OpenLayers官网截图

2.查看例子

最新版本的OpenLayers7.4.0提供了236个例子，可以根据自己的需要筛选。

查看OpenLayers例子

3.API文档

API文档

在API文档搜索Map后有关于Map的示例、属性、方法等说明。

Map示例
Map属性

2.初始化一个地图

考虑到用户可能没有自己的影像底图，OpenLayers兼容了OSM（Open Street Map）底图，可以直接在OpenLayers中调用。本文使用Vue3+OpenLayers7.4的方式初始化地图。
关于Vue3的知识可以查看本篇博客。

<template>
<!-- 初始化一个地图容器 -->
  <div id="map"></div>
</template>

<script setup>
// 引入需要的包
import TileLayer from "ol/layer/Tile";
import {OSM} from "ol/source";
import {View} from "ol";
import {Map} from "ol";
import {onMounted} from "vue";
import {fromLonLat} from "ol/proj";

/**
 * 初始化地图
 */
const initialMap = () =>{
  const map = new Map({
    target: 'map', // 地图放到哪个容器中，值应该是div的id
    layers: [
      new TileLayer({
        source: new OSM(), // 加载OSM底图
      }),
    ],

    // 以EPSG:3857为坐标系定义地图的视图中心和缩放级别
    view: new View({
      projection:'EPSG:3857', // 坐标系
      // fromLonLat()是OpenLayers内置的函数，可以将一个坐标系转换成另一个坐标系。本文将EPSG:4326坐标系转成EPSG:3857坐标系
      center: fromLonLat([125.35, 43.88]), // 视图中心
      zoom: 10, // 缩放级别
    }),

    // 以EPSG:4326为坐标系定义地图的视图中心和缩放级别
    // view: new View({
    //   projection:'EPSG:4326',
    //   center:[125.35, 43.88],
    //   zoom:10,
    // })
  });
}

onMounted(()=>{
  // 立即执行初始化地图函数
  initialMap()
})
</script>

<style scoped>
#map {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
// 移除OSM的链接
:deep(.ol-attribution){
  display: none;
}
</style>

代码运行后，就得到了第一个视图中心为吉林省长春市，缩放级别为10的地图。

第一个地图，视图中心为吉林省长春市

3.添加控件

可以看到地图只在左上角有最基础的控件，能够操作地图的放大、缩小等。常用的比例尺、鼠标经纬度获取、全屏等控件并没有默认的添加进来，这时候需要我们手动添加。
在API文档中搜索Control，可以看到OpenLayers官方提供的所有控件。

地图控件

通过map.addControl()方法可以自主添加不同的控件，以全屏控件（FullScreen）和比例尺控件（ScaleLine）为例，其他控件添加方式相同

添加控件

4.监听事件

OpenLayers可以监听鼠标或键盘操作，从而获取地图的相关元素，OpenLayers默认支持的监听事件可以在此文档中查看。本文以鼠标单击为例。

  // 地图监听事件
  map.on('singleclick', function (evt) {
    let pixel = map.getEventPixel(evt.originalEvent);//获取点击的像素点
    let coordinate = map.getCoordinateFromPixel(pixel);//获取像素点的坐标
    console.log(coordinate)
  });