因为在公司做项目一直用到了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, // 加载的容器