openlayers学习记录，持续更新...

一、加载地图

以加载天地图为例：

1.1 视图层

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

 1.2 逻辑层

1.2.1 引入所需对象

import { Map, View } from 'ol' // 地图实例方法、视图方法
import Tile from 'ol/layer/Tile' // 瓦片渲染方法
import XYZ from 'ol/source/XYZ'

1.2.2 初始化地图方法

const map = ref(null) // 存放地图实例

//*****************************************************
onMounted(() => {
  initMap()
})
/**
 * 初始化地图
 */
function initMap() {
  // 引入天地图
  let source = new XYZ({
    url: 'http://t4.tianditu.com/DataServer?T=ter_w&tk=************************&x={x}&y={y}&l={z}',
  })
  let tileLayer = new Tile({
    title: '天地图',
    source: source,
  })
  // 标注图层(就是我们所看见的行政区名称，道路)
  let sourceMark = new XYZ({
    url: 'http://t4.tianditu.com/DataServer?T=cta_w&tk=*************************&x={x}&y={y}&l={z}',
  })
  let tileMark = new Tile({
    title: '标注图层',
    source: sourceMark,
  })
  // 地图实例
  map.value = new Map({
    target: 'map', // 对应页面里 id 为 map 的元素
    layers: [tileLayer, tileMark],
    view: new View({
      // 地图视图
      projection: 'EPSG:4326', // 坐标系，有EPSG:4326和EPSG:3857
      center: [118.05, 24.61], // 中心坐标
      zoom: 12, // 地图缩放级别（打开页面时默认级别）
      // minZoom: 10, // 地图缩放最小级别
      maxZoom: 18,
    }),
  })
}

其中tk=后的参数放入天地图开发者控制台中申请的密钥即可。 

1.2.2.1 天地图

引入时使用，http://t0.tianditu.com/DataServer?T=img_w&tk=密钥&x={x}&y={y}&l={z}

不同的地图更换T=后的类型即可，地图服务列表如下：

缩略图	图层名称	服务地址	投影类型
	矢量底图	http://t0.tianditu.gov.cn/vec_c/wmts?tk=您的密钥	经纬度投影
		http://t0.tianditu.gov.cn/vec_w/wmts?tk=您的密钥	球面墨卡托投影
	矢量注记	http://t0.tianditu.gov.cn/cva_c/wmts?tk=您的密钥	经纬度投影
		http://t0.tianditu.gov.cn/cva_w/wmts?tk=您的密钥	球面墨卡托投影
	影像底图	http://t0.tianditu.gov.cn/img_c/wmts?tk=您的密钥	经纬度投影
		http://t0.tianditu.gov.cn/img_w/wmts?tk=您的密钥	球面墨卡托投影
	影像注记	http://t0.tianditu.gov.cn/cia_c/wmts?tk=您的密钥	经纬度投影
		http://t0.tianditu.gov.cn/cia_w/wmts?tk=您的密钥	球面墨卡托投影
	地形晕渲	http://t0.tianditu.gov.cn/ter_c/wmts?tk=您的密钥	经纬度投影
		http://t0.tianditu.gov.cn/ter_w/wmts?tk=您的密钥	球面墨卡托投影
	地形注记	http://t0.tianditu.gov.cn/cta_c/wmts?tk=您的密钥	经纬度投影
		http://t0.tianditu.gov.cn/cta_w/wmts?tk=您的密钥	球面墨卡托投影
	全球境界	http://t0.tianditu.gov.cn/ibo_c/wmts?tk=您的密钥	经纬度投影
		http://t0.tianditu.gov.cn/ibo_w/wmts?tk=您的密钥	球面墨卡托投影

1.2.2.2 高德地图

同天地图一样的操作，仅需更改url地址为，http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}

其中lang=zh_cn设置中文，lang=en设置英文；scl=1表示含注记，scl=2表示不含注记；style=6为影像地图，style=7为矢量图，style=8为影像路网。

其他地图可参考：OpenLayers 6加载各种地图源的方法(天地图、百度、高德、ArcGIS、Bing、OSM、Google等)_openlayer 地图加载地址-优快云博客

1.3 核心要素

XYZ  Tile Map View

---

二、显示图标 

2.1 逻辑层

2.1.1 引入所需对象

import VectorSource from "ol/source/Vector";
import { Vector as VectorLayer } from "ol/layer";
import Feature from "ol/F