openlayer初建地图(一)

糕手
384 阅读3分钟

前言

大家好,最近因为公司业务需要,开始接触openlayer这个模块,openlayer可能大家比较陌生,但是百度、高德大家肯定很熟悉,这三者都是地图相关的业务,但其实另外两个我也不熟悉,但是选择openlayer更多的是因为公司有自己的地图设计!基础知识大家可以从下方的基础文档了解学习,这篇文章直接从初建一个地图开始!

学习的第一步

学习openlayer,你要知道其官网,因为openlayer的官网是国外的,全英文学习起来比较痛苦,感兴趣的小伙伴也可以去了解,不过咱们有大佬搞的一个中文文档!

官网地址[:](OpenLayers v10.0.0 API - Index)

中文文档[:](OpenLayers Examples)

[基础文档](Introduction | OpenLayers 3 Primer (linwei.xyz))

初步构建地图地图

我们可以看一下官方的文档是如何初建的,这里用的是OSM作为底图; 在OpenLayers中，OSM 是一个源（source）模块，用于从 OpenStreetMap (OSM) 服务器加载地图瓦片。OpenStreetMap 是一个免费的、开放的地图数据项目，类似于商业化的 Google Maps 或 Bing Maps，但它是由志愿者贡献的数据组成的。

在OpenLayers中，OSM 源通常被用来作为地图的基本背景层。它继承自 XYZ 类，后者处理通过 HTTP URL 方式加载瓦片图层。OSM 类提供了默认的URL模板，以便从 OpenStreetMap 的服务器获取瓦片。

new ol.Map({
            // 设置地图图层
            layers: [
              // 创建一个使用Open Street Map地图源的瓦片图层
              new ol.layer.Tile({source: new ol.source.OSM()})
            ],
            // 设置显示地图的视图
            view: new ol.View({
              center: [0, 0],    // 定义地图显示中心于经度0度，纬度0度处
              zoom: 2            // 并且定义地图显示层级为2
            }),
            // 让id为map的div作为地图的容器
            target: 'map'    
        });

但是我这里用的是XYZ的瓦片图层来进行渲染,从HTTP URL的方式进行加载

HTML跟css代码如下: 首先是必须要有一个id为map的容器 然后这个容器必须有宽度跟高度 否则无法渲染出来

<template>
  <div class="container">
    <div id="map"></div>
  </div>
</template>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100vh;
  background: #000;
  display: flex;
  flex-direction: column;
  #map {
    flex: 1;
  }
}
</style>

js代码如下:

import { Map, View } from 'ol'
import TileLayer from 'ol/layer/Tile'
import XYZ from 'ol/source/XYZ'
import { onMounted, ref } from 'vue'

const map = ref()
const initMap = () => {
  map.value = new Map({
    // 让id为map的div作为地图的容器
    target: 'map',
    // 设置地图图层
    layers: [
      new TileLayer({
        source: new XYZ({
          url: '加载XYZ瓦片图片的地址'
        })
      })
    ],
    // 设置显示地图的视图
    view: new View({
      center: [112.9598836, 23.12635347],
      zoom: 9,
      maxZoom: 14,
      minZoom: 8,
      projection: 'EPSG:4326'
    })
  })
}
onMounted(() => {
  initMap()
})

view是openlayer中的视图属性,可以设置center,也就是地图初始化时的中心点,传入经度跟纬度两个参数,zoom是地图的缩放级别,maxZoom是地图的最大缩放级别,minZoom是地图的最小缩放级别,projection指的是地图的地理坐标系统的投影,一般用的比较多的有两种,一种是EPSG:4326,一种是EPSG:3857

页面效果大概就是这样子,里面有个区域是高亮的,这个只是单纯之前有对这个XYZ的资源做了处理

image.png

这样子,一个简单的底图就渲染出来了,接下来就是给底图加上需要展示的区域模块,实现高亮效果及立体效果,会在下一篇文章进行更新!!!

(openlayer-渲染geoJson地图文件(二)实现如何在底图上加上一个高亮的边界地图区域,也就是GeoJSON地图 - 掘金 (juejin.cn))

avatar
文章
阅读
粉丝