OpenLayers-快速使用

安装

npm安装:

npm i ol

<style>
  .map-x {
    width: 600px;
    height: 600px;
  }
</style>
 
<div id="map" class="map-x"></div>
 
<script>
import 'ol/ol.css'
import { Map, View } from 'ol'
import Tile from 'ol/layer/Tile'
import OSM from 'ol/source/OSM'
 
new Map({
  target: 'map', // 绑定html元素
  layers: [ // 图层
    new Tile({
      source: new OSM() // 图层数据源
    })
  ],
  view: new View({ // 地图视图
    projection: "EPSG:4326", // 坐标系，有EPSG:4326和EPSG:3857
    center: [114.064839, 22.548857], // 深圳坐标
    zoom: 12 // 地图缩放级别（打开页面时默认级别）
  })
})
</script>

cdn引入:

<link href="https://cdn.bootcdn.net/ajax/libs/openlayers/7.3.0/ol.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/openlayers/7.3.0/dist/ol.js"></script>

<style>
/* 设置地图容器宽高 */
#map {
  width: 100vw;
  height: 100vh;
}
</style>
 
<!-- 地图容器 -->
<div id="map"></div>
 
<script>
  var gaodeMapLayer = new ol.layer.Tile({
  source: new ol.source.XYZ({
    url: 'https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}' // 高德地图瓦片服务URL
  })
});
  const map = new ol.Map({
    target: 'map', // 绑定地图容器
    layers: [ // 底图图层
      gaodeMapLayer
    ],
    view: new ol.View({ // 设置视图
      projection: "EPSG:4326", // 坐标系，有EPSG:4326和EPSG:3857
      center: [114.064839, 22.548857], // 深圳坐标
      zoom: 12 // 地图缩放级别（打开页面时默认级别）
    })
  })
</script>

基本流程

在页面创建地图:

1. 引入 ol.js 和 ol.css。
2. 创建地图容器（一个 HTML 标签，通常使用 div ）。
3. 设置地图容器宽高（必须做的一项！！！）。
4. 使用 ol 绑定地图容器。
5. 创建地图底图。
6. 设置地图中心点。

ol.Map() 中有3个核心要素：

• target：绑定地图容器的属性，传入容器的 id 即可。
• layers：底图图层。ol 支持多图层配置，所以 layers 的值是一个数组。
• view：地图视图。可以配置地图的缩放、投影坐标系、中心点、旋转角度等配置项。

视图(ol.View)常用配置

• 投影坐标系
• 视图中心点
• 缩放级别
• 最大/最小缩放级别
  minZoom: 10, // 设置最小缩放级别
maxZoom: 14, // 设置最大缩放级别
• 旋转地图
  rotation: Math.PI / 180 * 45, // 旋转地图45度

图层(layers)模块

加载地图数据

• OSM内置底图

  layers: [ // 图层
    new ol.layer.Tile({
      source: new OSM() // 图层数据源
    })
  ]

• 高德底图

  var gaodeMapLayer = new ol.layer.Tile({
    source: new ol.source.XYZ({
      url: 'https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}' // 高德地图瓦片服务URL
    })
  });
 
layers: [ // 底图图层
      gaodeMapLayer
    ]

显示/隐藏图层

layers: [
  new ol.layer.Tile({
    source: new ol.source.OSM(),
    visible: false // 隐藏图层
  })
]

使用 getVisible() 获取图层当前的 visible 状态，使用 setVisible 设置图层的 visible。

// 显示或隐藏图层
function toggleLayer() {
  let layers = map.getLayers() // 获取图层组
  let layer = layers.item(0) // 因为只有一个图层，所以直接 item(0) 即可拿到
  let visible = layer.getVisible() // 获取图层当前显示状态
  layer.setVisible(!visible) // 设置图层显示状态
}

图层不透明度

  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM(),
      opacity: 0.5 // 设置图层不透明度
    })
  ]

使用 getOpacity() 方法获取图层的不透明度，使用 setOpacity() 设置图层不透明度。

<style>
  #map {
    width: 400px;
    height: 400px;
  }
</style>
 
<label for="checkboxEl">不透明度</label>
<!-- 滑块控件，用来设置图层不透明度的值 -->
<input
  id="rangeEl"
  type="range"
  checked="true"
  min="0"
  max="1"
  step="0.01"
  value="0.5"
/>
 
<div id="opacityValue">不透明度: 0.5</div>
 
<div id="map"></div>
 
<script src="../ol/ol.js"></script>
<script>
  const map = new ol.Map({
    target: 'map',
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM(),
        opacity: 0.5 // 设置图层不透明度
      })
    ],
    view: new ol.View({
      center: [0, 0],
      zoom: 2
    })
  })
 
  let rangeEl = document.getElementById('rangeEl')
  rangeEl.addEventListener('change', function() {
    let layers = map.getLayers() // 获取图层组
    let osmLayer = layers.item(0) // 因为只有一个图层，所以直接 item(0) 即可拿到
 
    osmLayer.setOpacity(parseFloat(this.value)) // 设置图层不透明度
 
    opacityValue.innerHTML = `不透明度: ${osmLayer.getOpacity()}` // 获取图层不透明度，并展示在页面中
  })
</script>

切换底图

使用 setSource 切换底图

<style>
  #map {
    width: 400px;
    height: 400px;
  }
</style>
 
<button onclick="switchSource('osm')">设置为OSM</button>
<button onclick="switchSource('bingmap')">设置为BingMaps</button>
<div id="map"></div>
 
<script src="../ol/ol.js"></script>
<script>
  let osm = new ol.source.OSM()
 
  let bingmap = new ol.source.BingMaps({
    key: '你的key',
    imagerySet: 'Aerial'
  })
 
  let layer = new ol.layer.Tile()
 
  let map = new ol.Map({
    target: 'map',
    layers: [layer],
    view: new ol.View({
      projection: "EPSG:4326", // 坐标系，有EPSG:4326和EPSG:3857
      center: [114.064839, 22.548857], // 深圳坐标
      zoom: 12
    })
  })
 
  // 设置图层源
  layer.setSource(osm)
 
  // 切换图层源
  function switchSource(data) {
    switch(data) {
      case 'osm':
        layer.setSource(osm)
        break
      case 'bingmap':
        layer.setSource(bingmap)
        break
    }
  }
</script>

加载矢量图

// 省略部分代码
const map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Vector({
      source: new ol.source.Vector({
        format: new ol.format.GeoJSON(),
        url: '../data/geojson.json'
      })
    })
  ],
  view: new ol.View({
    center: [0, 0],
    zoom: 2
  })
})

基础控件

• 比例尺
  比例尺支持的单位：[metric公制]、degrees度、imperial英制英尺、us美制英尺、nautical海里

// 实例化比例尺
const scaleLineControl = new ol.control.ScaleLine({
  units: 'degrees'
})
 
const map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  view: new ol.View({
    center: [0, 0],
    zoom: 2
  }),
  // 添加控件
  controls: ol.control.defaults.defaults().extend([
    scaleLineControl
  ])
})

• setUnits() 方法

<select id="units">
  <option value="degrees">度</option>
  <option value="imperial">英制英尺</option>
  <option value="us">美制英尺</option>
  <option value="nautical">海里</option>
  <option value="metric" selected>公制</option>
</select>
 
<div id="map"></div>
 
<script>
  // 比例尺工具
  const scaleLineControl = new ol.control.ScaleLine({
    units: 'degrees'
  })
 
  const map = new ol.Map({
    target: 'map',
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      })
    ],
    view: new ol.View({
      projection: "EPSG:4326",
      center: [114.064839, 22.548857],
      zoom: 12
    }),
    // 添加控件
    controls: ol.control.defaults.defaults().extend([
      scaleLineControl
    ])
  })
 
  // 获取页面上的单位选择器
  const unitsSelect = document.getElementById('units')
 
  // 修改比例尺单位的方法
  function onChange() {
    scaleLineControl.setUnits(unitsSelect.value)
  }
 
  unitsSelect.addEventListener('change', onChange)
</script>

• 全屏

const map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  view: new ol.View({
    center: [0, 0],
    zoom: 2
  }),
  // 添加控件
  controls: ol.control.defaults.defaults().extend([
    new ol.control.FullScreen() // 全屏控件
  ])
})

• 鹰眼

// 鹰眼控件
let overviewMapControl = new ol.control.OverviewMap({
  className: 'ol-overviewmap ol-custom-overviewmap',
  layers: [
    new ol.layer.Tile({
      // 使用必应地图
      source: new ol.source.BingMaps({
        key: 'AiZrfxUNMRpOOlCpcMkBPxMUSKOEzqGeJTcVKUrXBsUdQDXutUBFN3-GnMNSlso-',
        imagerySet: 'Aerial'
      })
    })
    
  ],
  collapsed: false
})
 
const map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM() // 基础地图使用 OSM
    })
  ],
  view: new ol.View({
    projection: "EPSG:4326",
    center: [114.064839, 22.548857],
    zoom: 6
  }),
  // 添加控件
  controls: ol.control.defaults.defaults().extend([
    overviewMapControl
  ])
})

• 导览

const map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  view: new ol.View({
    center: [0, 0],
    zoom: 2
  }),
  // 添加控件
  controls: ol.control.defaults.defaults().extend([
    new ol.control.ZoomToExtent({
      // 定义要展示区域的4个角的坐标
      extent: [
        813079.7791264898, 5929220.284081122,
        848966.9639063801, 5936863.986909639
      ]
    })
  ])
})

• 缩放滑块

const map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  view: new ol.View({
    projection: 'EPSG:4326',
    center: [114.064839, 22.548857],
    zoom: 2
  }),
  // 添加控件
  controls: ol.control.defaults.defaults().extend([
    // 缩放滑块控件
    new ol.control.ZoomSlider()
  ])
})