关于前端:OpenLayers6学习笔记二-地图控件

一. 控件简介

  1. 归属控件(Attribution):展现地图资源的版权或归属,默认退出到地图中。
  2. 全屏控件(FullScreen):管制地图全屏展现。
  3. 坐标拾取控件(MousePosition):显示鼠标所在地图地位的坐标。
  4. 鹰眼控件(OverviewMap):地图的一个概览图。
  5. 比例尺控件(ScaleLine):地图比例尺。
  6. 旋转控件(Rotate):管制地图旋转,默认退出到地图中,alt+shift+左键旋转地图。
  7. 缩放控件(Zoom):管制地图缩放,默认退出到地图中。
  8. 滑块缩放控件(ZoomSlider):以滑块的模式缩放地图。
  9. 缩放至特定地位控件(ZoomToExtent):将地图缩放至特定地位。

二. 控件的应用

2.1 归属控件

2.2 全屏控件

map.current.addControl(new FullScreen());

2.3 坐标拾取控件

map.current.addControl(new MousePosition({
  // 设置数据格式
  coordinateFormat: createStringXY(6),
  // 设置空间参考零碎为'EPSG:4326'
  projection: 'EPSG:4326'
}));

2.4 鹰眼控件

map.current.addControl(new OverviewMap({
  // 概览图图层
  layers: [new TileLayer({ source: new OSM() })],
  // 管制鹰眼控件开展
  collapsed: false
}));

2.5 比例尺控件

map.current.addControl(new ScaleLine());

2.6 旋转控件

2.7 缩放控件

2.8 滑块缩放控件

map.current.addControl(new ZoomSlider());

2.9 缩放至特定地位控件

map.current.addControl(new ZoomToExtent({
  extent: [
    // 地位矩形的左下角坐标
    12667718, 2562800,
    // 地位矩形的右上角坐标
    12718359, 2597725
  ]
}))

三. 移除默认退出到地图中的控件

map.current = new Map({
  // 挂载到id为map的div容器上
  target: 'map',
  // 设置地图图层
  layers: [
    // 创立一个应用OpenStreetMap地图源的瓦片图层
    new TileLayer({ source: new OSM() })
  ],
  // 设置地图视图
  view: new View({
    // 设置空间参考零碎为'EPSG:3857'
    projection: 'EPSG:3857',
    // 地图的显示核心
    center: fromLonLat([0, 0]),
    // 地图的显示层级
    zoom: 3
  }),
  controls: defaults({
    // 移除归属控件
    attribution: false,
    // 移除缩放控件
    zoom: false,
    // 移除旋转控件
    rotate: false
  })
})

四. 批改控件款式

        OpenLayers为承载控件的各个DOM元素都设置了类名,通过CSS的类选择器就能够批改指定的控件款式。

import React, { useEffect, useRef } from 'react';
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import { defaults, FullScreen, MousePosition, OverviewMap, ScaleLine, ZoomSlider, ZoomToExtent } from 'ol/control';
import { createStringXY } from 'ol/coordinate';
import { fromLonLat } from 'ol/proj';
import OSM from 'ol/source/OSM';
import 'ol/ol.css';
import styles from './index.less';

export default function Index() {
  // 地图
  const map = useRef<any>();

  useEffect(() => {
    // 初始化地图
    initMap();
  })

  /**
   * 初始化地图
   */
  const initMap = () => {
    map.current = new Map({
      // 挂载到id为map的div容器上
      target: 'map',
      // 设置地图图层
      layers: [
        // 创立一个应用OpenStreetMap地图源的瓦片图层
        new TileLayer({ source: new OSM() })
      ],
      // 设置地图视图
      view: new View({
        // 设置空间参考零碎为'EPSG:3857'
        projection: 'EPSG:3857',
        // 地图的显示核心
        center: fromLonLat([0, 0]),
        // 地图的显示层级
        zoom: 3
      }),
      controls: defaults({
        // 移除归属控件
        // attribution: false,
        // 移除缩放控件
        // zoom: false,
        // 移除旋转控件
        // rotate: false
      }).extend([
        // 增加全屏控件
        new FullScreen(),
        // 增加坐标拾取控件
        new MousePosition({
          // 设置数据格式
          coordinateFormat: createStringXY(6),
          // 设置空间参考零碎为'EPSG:4326'
          projection: 'EPSG:4326'
        }),
        // 增加鹰眼控件
        new OverviewMap({
          // 概览图图层
          layers: [new TileLayer({ source: new OSM() })],
          // 管制鹰眼控件开展
          collapsed: false
        }),
        // 增加比例尺控件
        new ScaleLine(),
        // 滑块缩放控件
        new ZoomSlider(),
        // 缩放至特定地位控件
        new ZoomToExtent({
          extent: [
            // 地位矩形的左下角坐标
            12667718, 2562800,
            // 地位矩形的右上角坐标
            12718359, 2597725
          ]
        })
      ])
    })
  }

  return (<div>
    <div id='map' className={styles.map}></div>
  </div>)
}
.map {
  width: 100vw;
  height: 100vh;

  :global {

    /* 批改滑块缩放控件的款式 */
    .ol-zoomslider {
      top: 105px;
    }

    /* 批改鹰眼控件的款式 */
    .ol-overviewmap {
      bottom: 40px;
    }

    /* 批改坐标拾取控件的款式 */
    .ol-mouse-position {
      top: initial;
      bottom: 0px;
      right: 200px;
    }

    /* 批改旋转控件的款式 */
    .ol-rotate {
      right: 40px;
    }
  }
}

参考文章

OpenLayers教程三:地图控件之缩放控件
OpenLayers教程四:地图控件之归属控件和全屏控件
OpenLayers教程五:地图控件之坐标拾取控件和鹰眼控件
OpenLayers教程六:地图控件之旋转控件与比例尺控件

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据