OpenLayers的基础操作

介绍

OpenLayers是一个开源的JavaScript库，专门用于在Web网页上浏览和交互地图。它提供了丰富的地图功能和交互工具，使得开发者能够轻松地创建出功能强大的WebGIS系统。OpenLayers的核心概念包括Map, View, Control, Layer和Source。Map代表地图的容器，View负责地图的视图管理，Controls是地图控件的集合，Layer代表了地图上的不同图层，Source则是图层的数据源。

图层管理

import TileLayer from "ol/layer/WebGLTile.js";
import XYZ from "ol/source/XYZ";
// 创建图层
const layer = new TileLayer({
        source: new XYZ({
          url: "http://localhost:8080/map/{z}/{x}/{y}.jpg",
        }),
        name: "map",
      });
// 切换图层
function toggleLayer(layer, isVisible) {
        layer.setVisible(isVisible);
      }

初始化

import TileLayer from "ol/layer/WebGLTile.js";
import XYZ from "ol/source/XYZ";
import Map from "ol/Map.js";
import View from "ol/View";
import { fromLonLat, toLonLat } from "ol/proj";
import {
  Control,
  defaults,
  FullScreen,
  MousePosition,
  ScaleLine,
  ZoomSlider,
} from "ol/control";
import { createStringXY } from "ol/coordinate";
// 创建图层
const layer = new TileLayer({
        source: new XYZ({
          url: "http://localhost:8080/map/{z}/{x}/{y}.jpg",
        }),
        name: "map",
      });
// 创建地图容器
const map = new Map({
        target: "map",
        layers: [layer],
        view: new View({
          center: fromLonLat([110.92433, 35.96646]),
          zoom: 5,
        }),
      });

地图控件

import TileLayer from "ol/layer/WebGLTile.js";
import XYZ from "ol/source/XYZ";
import Map from "ol/Map.js";
import View from "ol/View";
import { fromLonLat, toLonLat } from "ol/proj";
import {
  Control,
  defaults,
  FullScreen,
  MousePosition,
  ScaleLine,
  ZoomSlider,
} from "ol/control";
import { createStringXY } from "ol/coordinate";
// 创建图层
const layer = new TileLayer({
        source: new XYZ({
          url: "http://localhost:8080/map/{z}/{x}/{y}.jpg",
        }),
        name: "map",
      });
// 创建地图容器
const map = new Map({
        target: "map",
        layers: [layer],
        view: new View({
          center: fromLonLat([110.92433, 35.96646]),
          zoom: 5,
        }),
        // 添加地图控件
        controls: defaults({ zoom: false }).extend([
          new FullScreen(),
          new ZoomSlider(),
          new ScaleLine(),
          new MousePosition({
            coordinateFormat: createStringXY(4),
            projection: "EPSG:4326", // 设置显示坐标的投影为经纬度
            // target: document.getElementById("mouse-position"), // 设置控件的目标容器
            undefinedHTML: " ",
          }),
        ]),
      });

获取坐标

// 获取地图坐标
map.on("click", (event) => {
        const coordinate = event.coordinate; // 点击位置的地理坐标
        const lonlat = toLonLat(coordinate); // 转换为经纬度坐标
        console.log("Clicked Coordinate:", lonlat);
      });

跳到中心点

// 移动到中心点
jumpCenter() {
      var targetCenter = fromLonLat([139.840345625, 35.73493231197516]);
      map.getView().animate({
        center: targetCenter,
        duration: 1000,
        zoom: 6,
      });
    },

完整代码 

import TileLayer from "ol/layer/WebGLTile.js";
import XYZ from "ol/source/XYZ";
import Map from "ol/Map.js";
import View from "ol/View";
import { fromLonLat, toLonLat } from "ol/proj";
import {
  Control,
  defaults,
  FullScreen,
  MousePosition,
  ScaleLine,
  ZoomSlider,
} from "ol/control";
import { createStringXY } from "ol/coordinate";
// 创建图层
const layer = new TileLayer({
        source: new XYZ({
          url: "http://localhost:8080/map/{z}/{x}/{y}.jpg",
        }),
        name: "map",
      });
// 创建地图容器
const map = new Map({
        target: "map",
        layers: [layer],
        view: new View({
          center: fromLonLat([110.92433, 35.96646]),
          zoom: 5,
        }),
        // 添加地图控件
        controls: defaults({ zoom: false }).extend([
          new FullScreen(),
          new ZoomSlider(),
          new ScaleLine(),
          new MousePosition({
            coordinateFormat: createStringXY(4),
            projection: "EPSG:4326", // 设置显示坐标的投影为经纬度
            // target: document.getElementById("mouse-position"), // 设置控件的目标容器
            undefinedHTML: " ",
          }),
        ]),
      });
// 切换图层
function toggleLayer(layer, isVisible) {
        layer.setVisible(isVisible);
      }
// 获取地图坐标
map.on("click", (event) => {
        const coordinate = event.coordinate; // 点击位置的地理坐标
        const lonlat = toLonLat(coordinate); // 转换为经纬度坐标
        console.log("Clicked Coordinate:", lonlat);
      });
// 移动到中心点
jumpCenter() {
      var targetCenter = fromLonLat([139.840345625, 35.73493231197516]);
      map.getView().animate({
        center: targetCenter,
        duration: 1000,
        zoom: 6,
      });
    },