OpenLayers 动态绘制点, 线, 面, 图片

OpenLayers 动态绘制点, 线, 面, 图片, dom图标

可以在新的图层中绘制(推荐), 也可以在已有的图层中绘制, 预览:

1. 动态设置方式, 绘制图片

import VectorSource from "ol/source/Vector";
import VectorLayer from "ol/layer/Vector";
import { Feature } from "ol";
import { Point } from "ol/geom";
import { Icon } from "ol/style";
import { Style } from "ol/style";

// 创建新的图层
const layer = new VectorLayer({
  source: new VectorSource()
})
// 创建新的要素
const feature = new Feature({
  geometry: new Point([118.6, 31]),
})
// 动态设置方式, 绘制图片
feature.setStyle(new Style({
  image: new Icon({
    src: 'https://api.lolimi.cn/API/meizi/api.php?type=image',
    scale: 0.1, // 图标大小, 缩放倍率
  })
}))

layer.getSource().addFeature(feature) // 添加要素到图层
map.value.addLayer(layer)             // 添加图层到地图中

2. 动态设置方式, 绘制点

// 动态设置方式, 绘制点
const feature = new Feature({
  geometry: new Point([118.6, 31]),
})
feature.setStyle(new Style({
  image: new CircleStyle({
    radius: 10,
    fill: new Fill({
      color: 'red',
    }),
    stroke: new Stroke({
      color: 'green',
      width: 2,
    }),
  }),
}))
source.addFeature(feature)

3. 动态设置方式, 绘制线, 北京到上海,

// 动态设置方式, 绘制线, 北京到上海
const feature = new Feature({
  // 绘制线要使用二维数组
  geometry: new LineString([[116.46, 39.92], [121.47, 31.22]])
})
feature.setStyle(new Style({
  fill: new Fill({
    color: 'rgba(255, 0, 0, 0.3)',
  }),
  stroke: new Stroke({
    color: 'green',
    width: 5,
  }),
}))
source.addFeature(feature)

4. 动态设置方式, 绘制面(多边形)并填充颜色, 北京,上海,武汉

// 动态设置方式, 绘制面(多边形)并填充颜色, 北京,上海,武汉
const polygonFeature = new Feature({
  // 绘制线要使用三维数组
  geometry: new Polygon([
    [
      [116.46, 39.92],
      [121.47, 31.22],
      [114.3, 30.59],
    ]
  ])
})
polygonFeature.setStyle(new Style({
  fill: new Fill({
    color: 'rgba(255, 0, 0, 0.3)',
  }),
  stroke: new Stroke({
    color: 'green',
    width: 5,
  }),
}))
source.addFeature(polygonFeature)

5. 动态设置方式, 添加一个图标(通过dom元素的方式)

import { Overlay } from "ol";

// 动态设置方式, 添加一个图标(通过dom元素的方式)
const overlay = new Overlay({
  element: document.getElementsByClassName('overlay')[0],
  offset: [-20, -20],
})
overlay.setPosition([119, 31])
map.value.addOverlay(overlay)


<template>
  <div class="title">openlayers vue3 地图示例</div>

  <span class="overlay" ref="domoOverlay">
    <img src="https://api.lolimi.cn/API/meizi/api.php?type=image" alt="美子">
  </span>
  <div id="container"></div>
</template>

<style>
.overlay {
  background-color: aqua;
}

.overlay img {
  width: 40px;
  vertical-align: middle;
  font-size: 0;
}
</style>