# 安装配置
ol5及以后采用ES6，可以配合打包工具使用也可以直接引用，以前ol3、ol4是直接引用的方式 中文API (opens new window)
# 打包工具使用
//安装
npm install ol
<template>
<div id="content">
<div id="map" class="map"></div>
</div>
</template>
<script>
import "ol/ol.css";
import { Map, View } from "ol";
import { defaults as defaultControls } from "ol/control";
import Tile from "ol/layer/Tile";
import { fromLonLat } from "ol/proj";
import OSM from "ol/source/OSM";
export default {
name: "tree",
data() {
return {
map: null
methods: {
* 初始化一个 openlayers 地图
initMap() {
let target = "map"; //跟页面元素的 id 绑定来进行渲染
let tileLayer = [
new Tile({
source: new OSM()
let view = new View({
center: fromLonLat([104.912777, 34.730746]), //地图中心坐标
zoom: 4.5 //缩放级别
});
this.map = new Map({
target: target, //绑定dom元素进行渲染
layers: tileLayer, //配置地图数据源
view: view //配置地图显示的options配置（坐标系，中心点，缩放级别等）
});
mounted() {
this.initMap();
</script>
# 直接引用
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基础地图展示</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.8.1/css/ol.css" type="text/css">
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.8.1/build/ol.js"></script>
<style>
html,body{
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
box-sizing: border-box;
#mapBox{
width: 100vw;
height: 100vh;
background-color: antiquewhite;
</style>
</head>
<div id="mapBox"></div>
<script>
const map=new ol.Map({
target:"mapBox",
layers:[
new ol.layer.Tile({source:new ol.source.OSM()})
view:new ol.View({
projection:"EPSG:4326",
// center: ol.proj.fromLonLat([120.13989, 30.27662]),
center:[120.13989, 30.27662],
zoom: 11,
minZoom:10,
maxZoom:13
</script>
</body>
</html>
# 组成部分
# Map
map是openlayers的核心，包含图层、交互事件、UI控制元素等
# View
用于管理地图视图
new ol.View({
projection: 'EPSG:4326',
center: [117.38241315816788, 39.523648078822966],
zoom: 9
});
属性信息如下：
center # 设置地图初始化的中心点
constrainRotation # 旋转约束。false未约束，true未约束但是接近于0。数字限制了旋转到该值的数量
enableRotation # 如果为false，则始终使用将旋转设置为零的旋转约束。如果启用为false，则没有效果
extent # 设置地图的显示范围
constrainOnlyCenter # 如果设置为true，范围约束将仅用于中心点，而不是整个范围
smoothExtentConstraint # 如果设置为true,允许视图稍微超出范围
maxResolution # 用于设置最大分辨率，一般和minResolution (或者maxZoom) 和zoomFactor一起使用
minResolution # 用于设置最小分辨率
maxZoom # 最大缩放等级
minZoom # 最小缩放等级
multiWorld # 如果设置为false，视图将受到约束
constrainResolution # 如果为true，则视图在交互后将始终设置为最接近的缩放级别
# false表示允许中间缩放级别
smoothResolutionConstraint # 如果设置为true,允许视图稍微超出范围
showFullExtent # 为true，则用户将能够缩小视图，使视口超过配置范围的高度或宽度
# 但不能同时超出这两个范围，从而允许显示完整范围
projection # 设置投影坐标系，默认为EPSG:3857
resolution # 设置分辨率
resolutions # 设置分辨率数组
rotation # 设置旋转角度
zoom # 设置缩放级别
zoomFactor # 用于计算分辨率的缩放因子
方法如下：
adjustCenter # 将相对坐标添加到视图中心。将应用任何范围约束
adjustResolution # 将视图分辨率乘以一个比率，可以选择使用锚点。将应用任何分辨率约束
adjustRotation # 向视图添加旋转值，可以选择使用定位。将应用任何旋转约束
adjustZoom # 向视图添加缩放级别，可以选择使用定位。将应用任何旋转约束
animate # 向视图添加动画，主要用于设置zoom，center，rotation等值的变化
# 如view.animate({zoom: view.getZoom() + 1})
beginInteraction # 通知视图交互已启动
cancelAnimations # 取消动画
calculateExtent # 根据传递的尺寸计算地图的范围
centerOn # 以坐标和视图位置为中心
endInteraction # 结束视图交互
fit # 将地图缩放到指定的范围
getAnimating # 判断视图正好在执行动画
getCenter # 获取视图的中心点
getInteracting # 判断地图是否正在交互，比如正在平移、缩放等
getMaxResolution # 获取最大分辨率
getMaxZoom # 获取最大缩放等级
getMinResolution # 获取最小分辨率
getMinZoom # 获取最小缩放等级
getProjection # 获取投影坐标系
getResolution # 获取分辨率
getResolutionForExtent # 根据范围来获取分辨率
getResolutionForZoom # 根据缩放等级来获取分辨率
getResolutions # 获取分辨率
getRotation # 获取当前旋转角度
getZoom # 获取当前缩放级别
getZoomForResolution # 根据分辨率获取缩放等级
setCenter # 设置地图的中心点
setConstrainResolution # 设置分辨率约束
setMaxZoom # 设置最大缩放等级
setMinZoom # 设置最小缩放等级
setResolution # 设置分辨率
setRotation # 设置旋转角度
setZoom # 设置当前缩放等级
# Layers
用于图层信息管理
# Control
UI控制器
# Interactions
交互操作
# Sources and formats
图层信息来源和格式转化
# Projections
投影坐标系转换
# Observable objects
观察对象变化
# Other components
其他组件
# API的使用
带箭头的表示类，带加号的表示方法
# 第一部分：map对象的使用方法以及使用实例
# 第二部分：如何实例一个Map
# 第三部分：map类会触发哪些事件
# 第四部分：衍生的子类
# 第五部分：可观察的元素
# 第六部分：可用的方法
# 简单示例