手把手教会你制作一个地图组件

2024-01-17 16:11:34

一、搭建项目结构

首先，我们创建一个新项目并初始化一个npm包。

mkdir map-component
cd map-component
npm init -y

安装OpenLayers依赖项：

npm install --save openlayers

二、创建地图

在src文件夹中创建一个名为index.js的文件，并输入以下代码：

import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

const map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new OSM(),
    }),
  ],
  view: new View({
    center: [0, 0],
    zoom: 2,
  }),
});

这会创建一个基本的地图，其中显示了OpenStreetMap图层。

三、添加交互

要启用地图平移和缩放，我们需要添加交互控件：

import Zoom from 'ol/control/Zoom';
import MouseWheelZoom from 'ol/interaction/MouseWheelZoom';

map.addControl(new Zoom());
map.addInteraction(new MouseWheelZoom());

四、自定义功能

让我们添加一个自定义功能，允许用户在地图上绘制点：

import Draw from 'ol/interaction/Draw';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import Style from 'ol/style/Style';
import Circle from 'ol/style/Circle';
import Fill from 'ol/style/Fill';
import Stroke from 'ol/style/Stroke';

const vectorSource = new VectorSource();
const vectorLayer = new VectorLayer({
  source: vectorSource,
  style: new Style({
    image: new Circle({
      radius: 5,
      fill: new Fill({
        color: 'red',
      }),
      stroke: new Stroke({
        color: 'black',
        width: 1,
      }),
    }),
  }),
});

const drawInteraction = new Draw({
  source: vectorSource,
  type: 'Point',
});

map.addLayer(vectorLayer);
map.addInteraction(drawInteraction);