前端学习openLayers配合vue3（圆形形状的绘制）

上节课我们学了加载了矢量图片，这节我们来学绘制圆形

关键代码，第一段呢是设置圆点的操作，第二步是点击地图获取地图位置来设置圆点，ol还有很多类，各种形状的

 //设置圆点
  // let anchorLayer = new VectorLayer({
  //   source: new VectorSource(),
  // });
  // let anchorFeatures = new Feature({
  //   geometry: new Point(center),
  // });

  // anchorFeatures.setStyle(
  //   new Style({
  //     image: new Circle({
  //       radius: 5,
  //       fill: new Fill({ color: "red" }),
  //       stroke: new Stroke({ color: "black", width: 1 }),
  //     }),
  //   })
  // );
  // anchorLayer.getSource().addFeature(anchorFeatures);
  // map.addLayer(anchorLayer);

let layer = new VectorLayer({
    source: new VectorSource(),
  });
  map.addLayer(layer);
  map.on("click", function (e) {
    // 点击图层获取相对的位置进行相关圆点的新增
    let position = e.coordinate;
    let feature = new Feature({
      geometry: new Point(position),
    });
    feature.setStyle(
      new Style({
        image: new Circle({
          radius: 5,
          fill: new Fill({ color: "blue" }),
          stroke: new Stroke({ color: "black", width: 1 }),
        }),
      })
    );
    layer.getSource().addFeature(feature);
  });

效果图

完整代码

<script setup>
import { onMounted, reactive, ref } from "vue";
import { Feature, Map, View } from "ol";
import TileLayer from "ol/layer/Tile";
import { OSM, XYZ } from "ol/source";
import { fromLonLat } from "ol/proj";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import GeoJSON from "ol/format/GeoJSON";
import Style from "ol/style/Style";
import Fill from "ol/style/Fill";
import Stroke from "ol/style/Stroke";
import Icon from "ol/style/Icon";
import { Point } from "ol/geom";
import { Circle } from "ol/style";

defineProps({
  msg: String,
});
let map = reactive({});
let view = reactive({});
// let count=ref(0)
// let center=[114.305469, 30.592876];
let center = reactive([114.305469, 30.592876]);
onMounted(() => {
  initMap();
});
let initMap = () => {
  (view = new View({
    center,
    zoom: 5,
    projection: "EPSG:4326",
  })),
    (map = new Map({
      target: "map", //挂载视图的容器
      layers: [
        //瓦片图层source第三方，或者自带的,地图的底层
        new TileLayer({
          // source: new OSM(),//内置的国外地址，需要代理
          source: new XYZ({
            url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7",
          }), //国内第三方数据源
        }),
        // 矢量图层
        new VectorLayer({
          source: new VectorSource({
            url: "https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json",
            format: new GeoJSON(),
          }),
          //填充颜色
          style: new Style({
            fill: new Fill({
              color: "rgba(255, 0, 0, 0.5)",
            }),
            stroke: new Stroke({
              color: "black",
              width: 1,
            }),
          }),
        }),
      ],

      //视图
      view: view,
    }));

  //设置圆点
  // let anchorLayer = new VectorLayer({
  //   source: new VectorSource(),
  // });
  // let anchorFeatures = new Feature({
  //   geometry: new Point(center),
  // });

  // anchorFeatures.setStyle(
  //   new Style({
  //     image: new Circle({
  //       radius: 5,
  //       fill: new Fill({ color: "red" }),
  //       stroke: new Stroke({ color: "black", width: 1 }),
  //     }),
  //   })
  // );
  // anchorLayer.getSource().addFeature(anchorFeatures);
  // map.addLayer(anchorLayer);

  let layer = new VectorLayer({
    source: new VectorSource(),
  });
  map.addLayer(layer);
  map.on("click", function (e) {
    // 点击图层获取相对的位置进行相关圆点的新增
    let position = e.coordinate;
    let feature = new Feature({
      geometry: new Point(position),
    });
    feature.setStyle(
      new Style({
        image: new Circle({
          radius: 5,
          fill: new Fill({ color: "blue" }),
          stroke: new Stroke({ color: "black", width: 1 }),
        }),
      })
    );
    layer.getSource().addFeature(feature);
  });
};

let move = () => {
  // 设置北京的经纬度
  const beijing = [116.46, 39.92];
  const view = map.getView();
  view.animate({
    center: beijing,
    zoom: 10,
    projection: "EPSG:4356",
  });
};
</script>

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

<style scoped>
.btns {
  display: flex;
  position: fixed;
  left: 20px;
  bottom: 20px;

  z-index: 999;
}
.btns div {
  width: 100px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.read-the-docs {
  color: #888;
}
#map {
  margin: 0;
  width: 100vw;
  height: 100vh;
}
</style>