图层

创建矢量图层

createVectorLayer

点我查看代码

<script lang="ts" setup>
import { createVectorLayer, EPSG_4326, OlMap } from '@summeruse/ol'
import { Feature, Map as OLMap } from 'ol'
import { LineString, Point, Polygon } from 'ol/geom'

const olMap = new OLMap()
const { source, layer } = createVectorLayer()
olMap.addLayer(layer)
const point = new Feature({
  geometry: new Point([120, 30]),
})
source.addFeature(point)

const line = new Feature({
  geometry: new LineString([[120.1, 30.1], [120.2, 30.2]]),
})
source.addFeature(line)

const polygon = new Feature({
  geometry: new Polygon([[[120.11, 30.15], [120.15, 30.25], [120.1, 30.2], [120.11, 30.15]]]),
})
source.addFeature(polygon)
</script>

<template>
  <OlMap :ol-map :projection="EPSG_4326" :center="[120, 30]" :zoom="10" class="w-100% h-400px" />
</template>

添加 OpenStreetMap 地图

getOSMLayer

点我查看代码

<script lang="ts" setup>
import { EPSG_4326, getOSMLayer, OlMap } from '@summeruse/ol'
import { Map as OLMap } from 'ol'

const olMap = new OLMap()
const osmLayer = getOSMLayer()
olMap.addLayer(osmLayer)
</script>

<template>
  <OlMap :ol-map :projection="EPSG_4326" :center="[120, 30]" :zoom="10" class="w-100% h-400px" />
</template>

添加天地图

getTianDiTuLayer

点我查看代码

<script lang="ts" setup>
import { EPSG_3857, EPSG_4326, getTianDiTuLayer, OlMap } from '@summeruse/ol'
import { Map as OLMap } from 'ol'

const olMap = new OLMap()
const layer = getTianDiTuLayer({
  type: 'img',
  key: '8a684acb7b9d38ba08adf8035d0262ee',
  projection: EPSG_3857,
})
const label = getTianDiTuLayer({
  type: 'cia',
  key: '8a684acb7b9d38ba08adf8035d0262ee',
  projection: EPSG_3857,
})
olMap.addLayer(layer)
olMap.addLayer(label)
</script>

<template>
  <OlMap :ol-map :projection="EPSG_4326" :center="[120, 30]" :zoom="10" class="w-100% h-300px" />
</template>

添加 Bing 地图

getBingLayer

点我查看代码

<script lang="ts" setup>
import { EPSG_4326, getBingLayer, OlMap } from '@summeruse/ol'
import { Map as OLMap } from 'ol'

const olMap = new OLMap()
const bingLayer = getBingLayer({
  key: 'AtmBUmOPFg6c61ynLhIbjvrKfuXkMw1lCMTlLh9ALY47Llyetb6lgyRMitoPxKZo',
  name: 'RoadOnDemand',
})
olMap.addLayer(bingLayer)
</script>

<template>
  <OlMap :ol-map :projection="EPSG_4326" :center="[120, 30]" :zoom="10" class="w-100% h-300px" />
</template>