openlayers - 01 初始化地图

1.简介

OpenLayers（openlayers.org/）是一个用来帮助开发Web地图应用的高性能的、功能丰富的JavaScript类库，可以满足几乎所有的地图开发需求。
有如下特点：

1.支持任何XYZ瓦片资源，同时也支持OGC的WMTS规范的瓦片服务以及ArcGIS规范的瓦片服务
2.支持矢量切片，包括pbf、GeoJSON、TopoJSON格式
3.支持矢量图层，能渲染GeoJSON、TopoJSON、KML、GML和其他格式的矢量数据
4.支持OGC制定的WMS、WFS等GIS网络服务规范
5.支持在移动设备上运行
6.可以通过css来为地图控件设置样式
7.面向对象开发方式，在OpenLayers中万物皆对象

本文适用于openlayers初学者，采用的vue3+vite+openlayers实现的一个简单的地图案例

2.实现

2.1通过npm安装openlayers

npm i ol

2.2创建容器

<div class="ol-map" id="map"></div>

2.3实例化

import Map from "ol/Map"; // 地图实例方法
import View from "ol/View"; // 地图视图方法
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer"; // 瓦片渲染方法
import { XYZ, OSM } from "ol/source"; // 瓦片资源
import { ScaleLine, defaults as defaultControls } from "ol/control";

// 实例化地图
  initMap() {
  // 创建地图资源图层
  let tileLayer = new TileLayer({
    // source: new OSM(), //不建议使用，实际开发中会有问题
    source: new XYZ({
      url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}", // 高德瓦片资源
    }),
  });
  
    this.map = new Map({
      layers: [tileLayer], // 图层
      view: new View({
        projection: "EPSG:4326", //坐标类型：EPSG：4326：经纬度坐标，EPSG:3857：投影坐标
        center: [104.07, 30.6], // 地图中心点经纬度
        zoom: 12, // 缩放级别
        minZoom: 0, // 最小缩放级别
        maxZoom: 18, // 最大缩放级别
        constrainResolution: true, // 因为存在非整数的缩放级别，所以设置该参数为true来让每次缩放结束后自动缩放到距离最近的一个整数级别，这个必须要设置，当缩放在非整数级别时地图会糊
      }),
      target: "map", // DOM容器

      //加载控件到地图容器中
      controls: defaultControls({
        zoom: false, // 不显示放大缩小按钮
        rotate: false, // 不显示指北针控件
        attribution: false, // 不显示右下角地图信息控件
      }).extend([
        new ScaleLine({
          //设置比例尺单位，degrees、imperial、us、nautical、metric（度量单位）
          units: "metric",
        }),
      ]),
    });
  }

onMounted(() => {
  initMap();
});

2.4名词解释

layer：图层
contorl：控件
feature：元素
interaction：交互
Vector：矢量的
Tile：瓦片
source：资源
format：转换
projection：投影

3.效果图