首页 > 其他分享 >OpenLayers-快速使用

OpenLayers-快速使用

时间：2025-01-08 17:54:38浏览次数：1  
标签：map layer ol source OpenLayers 使用 new 图层 快速

安装

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()
  ])
})

标签：map,layer,ol,source,OpenLayers,使用,new,图层,快速
From： https://www.cnblogs.com/khrushchefox/p/18660277

相关文章

  • 快速数论变换 NTT
    更新日志2025/01/08：开工。前置知识本文将在\(\text{FTT}\)基础上进行讲解。同时请确保会欧拉函数等数论基础。作用\(\text{FFT}\)需要用到复数，而double使我们面临严重的精度问题。所以，我们需要一个更精确的算法——\(\text{NTT}\)。以及，它还要快上不少。这个......
  • docker-compose部署下Fastapi中使用sqlalchemy和Alembic
    本篇介绍使用Fastapi+sqlalchemy+alembic来完成后端服务的数据库管理，并且通过docker-compose来部署后端服务和数据库Mysql。包括：数据库创建，数据库用户创建数据库服务发现Fastapi连接数据库Alembic连接数据库服务健康检查部署数据库version:'3'services:db:......
  • jeecg快速启动（附带本地运行可用版本下载）
    版本整理（windowsx64位）：redis：3.0.504MYSQL：5.7Maven：3.9.4(setting文件可下载)Nodejs：v16.20.2（建议不要安装默认路径下，如已安装在c盘，运行yarn报错，可参考：解决“yarn:无法加载文件C:\Users\quber\AppData\Roaming\npm\yarn.ps1，因为在此系统上禁止运行脚本”问题-Qubernet-博......
  • unittest使用ddt库做数据驱动
    1、首先，你需要安装unittest-ddt库。可以通过pip命令安装：pipinstallddt2、在测试中导入必要的包importunittestfromddtimportddt3、定义测试类‌：使用@ddt装饰器来标记这是一个数据驱动的测试类。4、如果测试用例需要多个参数，可以使用@unpack装饰器来解包元组或列表，或......
  • tk-mybatis的使用教程及使用Example进行查询的几种方式
    1.引入依赖<!--通用mapper起步依赖--><dependency><groupId>tk.mybatis</groupId><artifactId>mapper-spring-boot-starter</artifactId><version>2.0.4</version></dependency><!--每个工程都有Pojo，都需要用到该包对......
  • 如何在 LobeChat 中使用 Ollama
    Ollama是一款强大的本地运行大型语言模型（LLM）的框架，支持多种语言模型，包括Llama2,Mistral等。现在，LobeChat已经支持与Ollama的集成，这意味着你可以在LobeChat中轻松使用Ollama提供的语言模型来增强你的应用。本文档将指导你如何在LobeChat中使用Ollama：在macOS下......
  • 基于 GEE 使用 MNDWI 和 NDWI 水体指数提取逐年水体
    目录1 数据集和水体指数介绍1.1Landsat8遥感数据信息1.2水体指数的介绍2代码解析3完整代码4运行结果1 数据集和水体指数介绍1.1Landsat8遥感数据信息该代码提取水体使用的是Landsat8的地表反射率产品，主要信息如下：数据集名称：LANDSAT/LC08/C02/T1_L2数据集......
  • 套接字的基本使用方法
    套接字是一种编程接口，用于在网络中的不同主机上的进程间进行通信。在使用套接字时常见的网络协议（TCP/UDP）：TCP：用于流套接字，提供可靠的、面向连接的服务。它们保证了数据传输的顺序和数据的完整性。UDP：用数据报套接字，提供不可靠的、无连接的服务。它们不保证数据的顺序或完......
  • 颜色化黑白图像：使用卷积神经网络（CNN）
    颜色化黑白图像是计算机视觉领域的一项技术，旨在为灰度图像赋予合适的颜色。近年来，卷积神经网络（CNN）被广泛应用于这一任务中。介绍彩色化黑白图像利用深度学习技术，通过分析图像中的纹理和物体形状等特征来推测可能的颜色。这一技术不仅在历史照片修复、电影和彩色化以及艺术......
  • Hibiscus辅助开发框架介绍使用
    使用Hibiscus框架快速构建高效Java应用Hibiscus是一个轻量级的Java开发辅助框架，专注于简化开发流程，提升开发效率。无论是代码生成、数据库管理、Redis操作还是性能监控，Hibiscus都能为开发者提供丰富的工具和高效的解决方案。本文将为大家介绍如何快速入门Hibiscus......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99