Openlayers学习笔记

# 一.Map 属性/方法

前言

Openlayers 通过 new Map 实例化地图模型，通过标签 id 挂载到 dom 上，实现页面地图效果

  • ol 上的相关属性

    let {
  Map,
  View,                       // 视图,设置地图的展示位置范围、地图中心位置以及当前地图使用的投影坐标系、旋转等
  layer: { Tile: TileLayer }, // 图层,能控制数据是否显示,及地图可显示的最大或最小比例尺
  source: { OSM },            // 数据源,分为矢量数据源和影像数据源
  control                     // 控件,包括放大缩小按钮,鼠标位置显示,全屏按钮,比例尺按钮,缩略图,地图详细详细等
  Interaction                 // 交互操作,比如要在地图上绘制要素,选择,修改,移动,拉伸等等
  } = ol
    1
    2
    3
    4
    5
    6
    7
    8

# 1.target

属性/方法 作用 配置
target 地图的容器，要么是元素本身，要么是元素的 id 挂载到某个元素上
setTarget 图层，地图可以由多个图层叠加而成 给了一个 tile 图层
getTarget 地图视图 中心点、缩放层级

  • 通过target属性实现挂载

查看代码详情 
<template>
  <WebOpenlayers2 :layer="layer"></WebOpenlayers2>
</template>

<script>

export default {
  data() {
    return {
      layer: [{
        name: "Tile",
        source: {
          name: "XYZ",
          config(config) {
            return ({
              url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=6",
              crossOrigin: "anonymous", //跨域
            });
          },
        },
      }],
    };
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
  • 通过setTarget方法实现挂载，getTarget方法获取target

切换不同的地图容器

查看代码详情 
<template>
  <div class="map">
    <div ref="map1" class="map1 map"></div>
    <div ref="map2" class="map2 map"></div>
    <button ref="teleport">传送</button>
  </div>
</template>

<script>
export default {
  mounted() {
    let {
      Map,
      View,
      layer: { Tile: TileLayer },
      source: { XYZ },
    } = ol;
    const map = new Map({
      layers: [
        new TileLayer({
          name: "卫星图",
          source: new XYZ({
            url: `http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=6`,
            crossOrigin: "anonymous", //跨域
          }),
        }),
      ],
      view: new View({
        center: [12579156, 3274244], // 坐标
        zoom: 12, // 放大倍数
      }),
      target: this.$refs.map1,
    });
    this.$refs.teleport.addEventListener(
      "click",
      function () {
        const target = map.getTarget().className.includes('map1') ? this.$refs.map2 : this.$refs.map1;
        map.setTarget(target);
      },
      false
    );
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

# 2.view

属性/方法 作用 配置
view 地图的容器，要么是元素本身，要么是元素的 id 挂载到某个元素上
getView 图层，地图可以由多个图层叠加而成 给了一个 tile 图层
setView 地图视图 中心点、缩放层级

# 3.layers

属性/方法 作用 配置
layers 地图的容器，要么是元素本身，要么是元素的 id 挂载到某个元素上
getLayers 图层，地图可以由多个图层叠加而成 给了一个 tile 图层
addLayer

# 4.overlays

属性/方法 作用 配置
overlays 地图的容器，要么是元素本身，要么是元素的 id 挂载到某个元素上

# 5.controls

属性/方法 作用 配置
controls 地图的容器，要么是元素本身，要么是元素的 id 挂载到某个元素上

# 6.interaction

属性/方法 作用 配置
controls 地图的容器，要么是元素本身，要么是元素的 id 挂载到某个元素上

# 7.其他属性

属性 作用 配置
pixelRatio 设备上物理像素与设备无关像素（下降）之间的比率 -
keyboardEventTarget 用于监听键盘事件的元素 -
maxTilesLoading 同时加载的最大数量瓦片 -
moveTolerance 光标必须移动的最小像素距离才能被检测为地图移动事件，而不是单击 -

← 二.Map 事件 →