OpenLayers基础知识复习（二）

最新推荐文章于 2025-04-11 10:53:10 发布

@小张在努力

最新推荐文章于 2025-04-11 10:53:10 发布

阅读量247

点赞数 4

分类专栏： Openlayers 文章标签：前端

本文链接：https://blog.youkuaiyun.com/qq_45751819/article/details/142877171

版权

Openlayers 专栏收录该内容

6 篇文章

订阅专栏

八、地图控件

地图控件主要包括：

导航（放大、缩小、复位） ZoomToExtent
滚动条 ZoomSlider
鼠标位置 MousePosition
比例尺 ScaleLine
鹰眼 OverviewMap
全屏控件 FullScreen


```javascript
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>Document</title>
    <!-- 引入第三方的库 -->
    <link
      rel="stylesheet"
      href="https://lib.baomitu.com/ol3/4.6.5/ol.css"
    />
    <script src="https://lib.baomitu.com/ol3/4.6.5/ol.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #map {
        width: 100%;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <div id="mouse-position"></div>
    <div id="map"></div>
    <script>
      // 创建高德图层
      const gaode = new ol.layer.Tile({
        source: new ol.source.XYZ({
          url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
          wrapX: false
        })
      })
      // 初始化openlayer地图
      const map = new ol.Map({
        target: 'map',
        layers: [gaode],
        view: new ol.View({
          center: [116.397428, 39.90923],
          zoom: 10,
          projection: 'EPSG:4326'
        })
      })
      const a = new ol.control.ZoomToExtent({
        extent: [116.397428, 39.90923, 116.397428, 39.90923]
      })
      map.addControl(a)
      const b = new ol.control.ScaleLine()
      map.addControl(b)
      const c = new ol.control.FullScreen()
      map.addControl(c)
      const d = new ol.control.MousePosition({
        coordinateFormat: ol.coordinate.createStringXY(4),
        projection: 'EPSG:4326',
        className: 'custom-mouse-position',
        target: document.getElementById('mouse-position')
      })
      map.addControl(d)
      const e = new ol.control.OverviewMap({
        collapsed: true
      })
      map.addControl(e)
    </script>
  </body>
</html>

九、视图操作与飞行

1、获取视图及设置试图内属性的方法

const view = map.getView()//获取视图
view.getZoom
view.setZoom
view.getCenter
view.setCenter

通过接口map.getView获取视图对象，可以进一步对视图进行操作

放大/缩小：getZoom/setZoom
根据中心点显示：getCenter/setCenter
复位

 <body>
    <button onclick="zoomReduce()">缩小</button>
    <button onclick="zoomAdd()">放大</button>
    <button onclick="moveTo()">平移到武汉</button>
    <button onclick="resetMap()">复位</button>
    <!-- 2、设置地图的挂载点 -->
    <div id="map"></div>
    <script>
      // 3.初始化一个高德地图层
      const gaode = new ol.layer.Tile({
        title: '高德地图',
        source: new ol.source.XYZ({
          url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
          wrapX: false
        })
      })
      //4.初始化openlayer地图
      const map = new ol.Map({
        // 将初始化的地图设置到id为map的DOM元素上
        target: 'map',
        //设置图层
        layers: [gaode],
        view: new ol.View({
          center: [114.3, 30.5],
          //设置地图放大级别
          zoom: 12,
          projection: 'EPSG:4326'
        })
      })
      function zoomReduce() {
        map.getView().setZoom(map.getView().getZoom() - 1)
      }
      function zoomAdd() {
        map.getView().setZoom(map.getView().getZoom() + 1)
      }
      function moveTo() {
        map.getView().setCenter([114.31, 30.52])
      }
      function resetMap() {
        map.getView().setCenter([114.3, 30.5])
        map.getView().setZoom(12)
      }
    </script>
  </body>

2、飞行

map.getView().animate({
	center:[114,30],
	zoom:10,
	duration:1000
})

例子

 <body>
    <!-- 2、设置地图的挂载点 -->
    <div id="map"></div>
    <script>
      // 3.初始化一个高德地图层
      const gaode = new ol.layer.Tile({
        title: '高德地图',
        source: new ol.source.XYZ({
          url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
          wrapX: false
        })
      })
      //4.初始化openlayer地图
      const map = new ol.Map({
        // 将初始化的地图设置到id为map的DOM元素上
        target: 'map',
        //设置图层
        layers: [gaode],
        view: new ol.View({
          center: [114.3, 30.5],
          //设置地图放大级别
          zoom: 12,
          projection: 'EPSG:4326'
        })
      })
      map.on('click', function (e) {
        let center = e.coordinate
        console.log(center)
        map.getView().animate({
          center: center,
          zoom: 14,
          duration: 1000
        })
      })
    </script>
  </body>