Vue+OpenLayers实践 —— 显示地图

Vue+OpenLayers实践 —— 显示地图

首先自己创建一个vue项目，百度一下下，方法都有滴。
安装OpenLayers依赖

npm install ol

全局引用ol，在main.js中引入

import ‘ol/ol.css’

<div id="map-div" style="width:800px;height:500px;"></div>

//引入需要的东西
import View from 'ol/View'
import Map from 'ol/Map'
import TileLayer from 'ol/layer/Tile'
import {OSM} from 'ol/source';

//显示地图的方法
showMap() {
    var map = new Map({
        layers: [
            new TileLayer({ source: new OSM() }),// 创建一个使用Open Street Map地图源的瓦片图层
        ],
        // 设置显示地图的视图
        view: new View({
          center: [0,0], // 定义地图显示中心
          zoom: 2, 
        }),
        target: "map-div", //存放地图的容器
    });
},

历经万苦，地图终于慢慢悠悠的出来了😔
当然这只是最简单的地图显示。继续对之前的笔记中的内容进行实践。💪 💪 💪

设置浙江省为地图的中心。

import {transform} from 'ol/proj';//转换坐标

view: new View({
    center: transform([120.202081,29.282477], 'EPSG:4326', 'EPSG:3857'),//显示浙江省为中心
    zoom: 6, 
}),

移动地图

moveLeft() {
    var view = this.map.getView();//由于要用到全局变量，将map定义在全局了
    var mapCenter = view.getCenter();
      mapCenter[0] += 500000; // 让地图中心的x值增加，即可使得地图向左移动
      // mapCenter[0] -= 500000;// 让地图中心的x值减少，即可使得地图向右移动
      // mapCenter[1] -= 500000;// 让地图中心的y值减少，即可使得地图向上移动
      // mapCenter[1] += 500000;// 让地图中心的y值增加，即可使得地图向下移动
      view.setCenter(mapCenter);
      this.map.render();
    },

移动至某个位置

//移动至北京
moveToBeijing() {
    var view = this.map.getView();
    view.setCenter(transform([116.402544,39.916706], "EPSG:4326", "EPSG:3857"));
    this.map.render();
},

地图缩放

zoomIn() {
    var view = this.map.getView();
    view.setZoom(view.getZoom() + 1); // 让地图的zoom增加1，从而实现地图放大
    // view.setZoom(view.getZoom() - 1); // 让地图的zoom减小1，从而实现地图缩小
},

限制地图范围/限制地图缩放级别

extent: [120.33944,36.049352, 120.442925,36.126585],// 地图中心范围
minZoom: 10,// 限制地图缩放最大级别为14，最小级别为10
    maxZoom: 14

地图控件的显示

//去掉默认显示的地图控件
import { defaults } from "ol/control";

controls: defaults({
    //右下角的地图信息控件
    attribution: false,
    //指北针控件
    rotate: false,
    //缩放按钮控件
    zoom: false,
}),

显示其他地图控件

import FullScreen from 'ol/control/FullScreen';
import OverviewMap from 'ol/control/OverviewMap';
import ScaleLine from 'ol/control/ScaleLine';
import ZoomSlider from 'ol/control/ZoomSlider';

// 在默认控件的基础上，再加上其他内置的控件
controls: defaults().extend([
    new FullScreen(),//全屏
    new OverviewMap(), //鸟瞰图控件
    new ScaleLine(),//比例尺控件
    new ZoomSlider(),//缩放滚动条控件
]),

同时设置默认和其他地图控件

controls: defaults({
    attribution: false,//右下角的地图信息控件
    rotate: true,//指北针控件
    zoom: true, //缩放按钮控件
    }).extend([
        new FullScreen(),//全屏
        new OverviewMap(),//鸟瞰图控件
        new ScaleLine(),//比例尺控件
        new ZoomSlider(),//缩放滚动条控件
        ]),

对于地图的显示差不多就到这啦。

对于代码中import中引用的内容，去官网（https://openlayers.org/en/latest/apidoc/）查就好啦。