// 高德地图xyz https://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&size=1&scl=1&style=7&ltype=11
// scl设置标注还是底图，scl=1代表注记，scl=2代表底图（矢量或者影像）
// style设置影像和路网，style=6为影像图，style=7为矢量路网，style=8为影像路网

tansform fromLonLat toLonLat

tansform将坐标从源投影转换为目标投影，transform(coordinate, source, destination) 4326转3857 toLonLat将坐标转换为经度/纬度，toLonLat(coordinate, projection) projection默认'EPSG:3857'，即将3857转为4326，projection为源格式 ``fromLonLat`将坐标从经度/纬度转换为不同的投影，fromLonLat(coordinate, projection) projection默认'EPSG:3857'，即将4326转为3857，projecttion为目标格式

transform([106.354541, 29.55435], 'EPSG:4326', 'EPSG:3857') // [11839333.347672336, 3446393.3550794353]
fromLonLat([106.354541, 29.55435], 'EPSG:3857') // [11839333.347672336, 3446393.3550794353]


// 3857转4326
transform([11839333.347672336, 3446393.3550794353], 'EPSG:3857', 'EPSG:4326')

toLonLat([11839333.347672336, 3446393.3550794353]) // [106.35454099999998, 29.554350000000028]

// 4326 转 4326
toLonLat([106.354541, 29.55435], 'EPSG:4326') // [106.354541, 29.55435]

EPSG:3857和EPSG:4326区别详解

vue3 openLayers

<script setup lang="ts">
import 'ol/ol.css'
import VectorSource from 'ol/source/Vector'
import { Vector } from 'ol/layer'
import { fromLonLat, toLonLat, transform } from 'ol/proj'
import XYZ from 'ol/source/XYZ'
import { Point } from 'ol/geom'
import GeoJSON from 'ol/format/GeoJSON'
import { Fill, Stroke, Icon, Style } from 'ol/style'
import { Map, Feature, Overlay, View } from 'ol'
import { onMounted, ref } from 'vue'
import TileLayer from 'ol/layer/Tile'
import VectorLayer from 'ol/layer/Vector'
import chongqingJson from '@/assets/chongqing.json'

const mapRef = ref<HTMLElement | null>(null)
let mapObj: Map | null= null
const mapPointList: Feature<Point>[] = []
let pointLayerSource: VectorSource<Point> | null = null
let pointLayer: Vector<VectorSource<Point>> | null = null

function delPointAll() {
  if (pointLayerSource) {
    mapPointList.forEach(item => {
      pointLayerSource!.removeFeature(item)
    })
  }
}
// 贴图
const addPoint = () => {
  delPointAll()

  const pointData = [
    {
      longitude: 106.354541,
      latitude: 29.55435
    }
  ]
  pointData.map(item => {
    const point = new Feature({
      geometry: new Point(fromLonLat([item.longitude, item.latitude])),
      data: item
    })
    
    const iconStyle = new Style({
      image: new Icon({
        color: '#ffffff',
        width: 20,
        height: 20,
        crossOrigin: 'anonymous',
        src: '/lake.jpg'
      })
    })

    point.setStyle(iconStyle)

    mapPointList.push(point)

  })

  pointLayerSource = new VectorSource({ features: mapPointList })
  pointLayer = new VectorLayer({ source: pointLayerSource })
  mapObj!.addLayer(pointLayer)
}
// 初始化地图
const initMap = () => {
  const center = transform([106.354541, 29.55435], 'EPSG:4326', 'EPSG:3857')
  mapObj = new Map({
    target: mapRef.value!,
    view: new View({
      center: center,
      zoom: 4,
      projection: 'EPSG:3857'
    })
  })
  
  const offlineMapLayer = new TileLayer({
    source: new XYZ({
      // url: 'http://192.168.3.22:5173/roadmap/{z}/{x}/{y}.png'
      url: 'https://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&size=1&scl=1&style=7&ltype=11'
    })
  })
  mapObj.addLayer(offlineMapLayer)
  addAreaPolygon()
  addPoint()
}


// 加载区域图
function addAreaPolygon() {
  const vectorSource = new VectorSource({
    features: new GeoJSON({ featureProjection: 'EPSG:3857' }).readFeatures(chongqingJson)
  })

  const layer = new VectorLayer({
    source: vectorSource,
    style: new Style({
      stroke: new Stroke({
        color: 'blue',
        lineDash: [4],
        width: 1,
      }),
      fill: new Fill({
        color: 'rgba(0,0,0,0.1)',
      })
    })
  })
  mapObj!.addLayer(layer)
}

onMounted(() => {
  initMap()
})
</script>

<template>
  <div class="greetings">
    <div class="map" id="map" ref="mapRef"></div>
  </div>
</template>

<style scoped>
h1 {
  font-weight: 500;
  font-size: 2.6rem;
  position: relative;
  top: -10px;
}
.greetings {
  width: 500px;
  height: 500px;
}
.map {
  width: 100%;
  height: 100%;
}
</style>