记录openLayers的学习日记

最新推荐文章于 2023-04-13 13:34:29 发布

VIP文章 Kepler_明

最新推荐文章于 2023-04-13 13:34:29 发布

阅读量829

点赞数

分类专栏： vue.js 文章标签：前端 vue.js

本文链接：https://blog.csdn.net/Keplers/article/details/124119534

版权

因为在公司做项目一直用到了gis地图，我又不太会，所以就进行学习一下，顺便记录一下吧，哈哈哈，共勉

简介

什么是openLayers，他就是一个用来帮助我们进行Web地图应用开发的JavaScript类库，几乎可以满足所有的地图开发需求。

openlayers是面向对象开发的，他的文档是英文的（对我极其不友好），

一，创建地图实例

首先要先安装依赖，然后窗创建容器，进行地图实例的创建，包括地图的中心点，地图的放大缩小等级，

先安装依赖

yarn ol

第二步创建一个div标签，给他一个容器（一定要给容器的宽高）

<div class="map" ref="Map"></div>

第三步创建地图图层，

首先先引入所需要的的模块

import Map from "ol/Map"; 
import View from "ol/View";
import { XYZ, OSM } from "ol/source";
import { fromLonLat } from "ol/proj";
import { Tile as TileLayer } from "ol/layer";

const titleLayer = new TileLayer({
   
        source: new OSM(),
        // source: new XYZ({
   
        //   url: "https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
        // }),
      });
      this.map = new Map({
   
        layers: [titleLayer],
        view: new View({
   
          center: fromLonLat([120.771441, 30.756433]), // 中心点
          zoom: 15, //缩放等级
          minZoom: 0, //最大缩放级别
          maxZoom: 18, // 最小缩放级别
          constrainRotation: true, // 因为存在非整数的缩放级别，所以设置该参数为true来让每次缩放结束后自动缩放到距离最近的一个整数级别，这个必须要设置，当缩放在非整数级别时地图会糊
        }),
        target: this.$refs.olMap, // 加载的容器
      }