openlayers地图初始化(一)

Summer_Uncle

已于 2024-02-02 14:56:14 修改

阅读量432

点赞数 12

文章标签：前端 javascript

于 2024-02-01 15:21:36 首次发布

本文链接：https://blog.csdn.net/summer_uncle/article/details/135974554

版权

1.下包

npm install ol

2. 初始化

<div id="map" style='...'></div>

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


// 创建一个map对象，指定地图容器的id和展示地图的初始视图
initMap () {
      this.map = new Map({
        target: 'map', // 地图容器的id
        layers: [
          new TileLayer({
            source: new XYZ({
              url: 'https://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=7&style=7&x={x}&y={y}&z={z}'
            })
          })
        ],
        // 添加一个OSM（OpenStreetMap）图层
        view: new View({
          //地图中心
          // center: olProj.fromLonLat(this.address),//坐标转换
          center: [118.7969, 32.0603],
          // 经纬度转换
          projection: 'EPSG:4326', // EPSG:3857(默认坐标格式)
          // 初始时地图放大的级别
          zoom: 5
        }),
        controls: []
      })
    }

1.在HTML文件中创建一个 id 为 map 的元素作为地图容器。

2.在JavaScript代码中，创建一个地图对象，使用 new Map() 构造函数，并将地图容器的id设为 target 属性的值。在这个例子中，地图容器的id为 map。

3.创建一个图层对象，使用 new TileLayer() 构造函数，并指定图层的源。在这个例子中，使用 new XYZ() 构造函数创建一个 XYZ Tile Source，指定了切片 URL 以获取地图图块。URL 中包含了参数，用于指定地图的语言、大小和样式。

4.设置地图视图，使用 view 属性。创建一个视图对象，使用 new View() 构造函数，并指定了地图的中心点坐标、坐标投影和初始缩放级别。

5.设置地图中心点的经纬度坐标为 [118.7969, 32.0603]。
6.设置地图的坐标投影为 EPSG:4326，这是一个常用的地理坐标格式。
7.设置地图的初始缩放级别为 5。
8.将图层和视图添加到地图对象中。通过 layers 属性将图层添加到地图对象中。通过 view 属性将视图添加到地图对象中。

9.清除默认的地图控件。通过 controls 属性，将一个空数组赋值给它来清除默认的地图控件。

这样，当调用 initMap() 函数时，就会创建一个含有指定图层和视图的地图对象，并将其显示在具有指定中心点和初始缩放级别的地图容器中。