三十三、openlayers官网示例Drawing Features Style——在地图上绘制图形,并修改绘制过程中的颜色

这篇讲的是使用Draw绘制图形时根据绘制形状设置不同颜色。

根据下拉框中的值在styles对象中取对应的颜色对象,new Draw的时候将其设置为style参数。

复制代码
 const styles = {
      Point: {
        "circle-radius": 5,
        "circle-fill-color": "red",
      },
      LineString: {
        "circle-radius": 5,
        "circle-fill-color": "red",
        "stroke-color": "yellow",
        "stroke-width": 2,
      },
      Polygon: {
        "circle-radius": 5,
        "circle-fill-color": "red",
        "stroke-color": "yellow",
        "stroke-width": 2,
        "fill-color": "blue",
      },
      Circle: {
        "circle-radius": 5,
        "circle-fill-color": "red",
        "stroke-color": "blue",
        "stroke-width": 2,
        "fill-color": "yellow",
      },
    };

    const typeSelect = document.getElementById("type");

    let draw; 
    function addInteraction() {
      const value = typeSelect.value;
      if (value !== "None") {
        draw = new Draw({
          source: source,
          type: typeSelect.value,
          style: styles[value],
        });
        map.addInteraction(draw);
      }
    }

需要注意的是这个style是绘制过程中的颜色,如果需要设置绘制完成后的颜色还得在图层中设置

复制代码
  const source = new VectorSource({ wrapX: false });

    const vector = new VectorLayer({
      source: source,
      style:style
    });

完整代码:

复制代码
<template>
  <div class="box">
    <h1>Drawing Features Style绘制不同颜色的图形</h1>
    <div id="map"></div>
    <div class="row">
      <div class="col-auto">
        <span class="input-group">
          <label class="input-group-text" for="type">Geometry type:</label>
          <select class="form-select" id="type">
            <option value="Point">Point</option>
            <option value="LineString">LineString</option>
            <option value="Polygon">Polygon</option>
            <option value="Circle">Circle</option>
            <option value="None">None</option>
          </select>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import Draw from "ol/interaction/Draw.js";
import Map from "ol/Map.js";
import View from "ol/View.js";
import { OSM, Vector as VectorSource } from "ol/source.js";
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer.js";
export default {
  name: "",
  components: {},
  data() {
    return {
      map: null,
    };
  },
  computed: {},
  created() {},
  mounted() {
    const raster = new TileLayer({
      source: new OSM(),
    });

    const source = new VectorSource({ wrapX: false });

    const vector = new VectorLayer({
      source: source,
    });

    const map = new Map({
      layers: [raster, vector],
      target: "map",
      view: new View({
        center: [-11000000, 4600000],
        zoom: 4,
      }),
    });
    const styles = {
      Point: {
        "circle-radius": 5,
        "circle-fill-color": "red",
      },
      LineString: {
        "circle-radius": 5,
        "circle-fill-color": "red",
        "stroke-color": "yellow",
        "stroke-width": 2,
      },
      Polygon: {
        "circle-radius": 5,
        "circle-fill-color": "red",
        "stroke-color": "yellow",
        "stroke-width": 2,
        "fill-color": "blue",
      },
      Circle: {
        "circle-radius": 5,
        "circle-fill-color": "red",
        "stroke-color": "blue",
        "stroke-width": 2,
        "fill-color": "yellow",
      },
    };

    const typeSelect = document.getElementById("type");

    let draw; 
    function addInteraction() {
      const value = typeSelect.value;
      if (value !== "None") {
        draw = new Draw({
          source: source,
          type: typeSelect.value,
          style: styles[value],
        });
        map.addInteraction(draw);
      }
    }

    typeSelect.onchange = function () {
      map.removeInteraction(draw);
      addInteraction();
    };

    addInteraction();
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
#map {
  width: 100%;
  height: 500px;
}
.box {
  height: 100%;
}

#info {
  width: 100%;
  height: 24rem;
  overflow: scroll;
  display: flex;
  align-items: baseline;
  border: 1px solid black;
  justify-content: flex-start;
}
</style>
相关推荐
ma77几秒前
JavaScript 获取短链接原始地址的解决方案
前端
该用户已不存在几秒前
关于我把Mac Mini托管到机房,后续来了,还有更多玩法
服务器·前端·mac
tianchang4 分钟前
SSR 深度解析:从原理到实践的完整指南
前端·vue.js·设计模式
闲蛋小超人笑嘻嘻5 分钟前
前端面试十一之TS
前端
摆烂为不摆烂5 分钟前
😁深入JS(四): 一文让你完全了解Iterator+Generator 实现async await
前端
DoraBigHead18 分钟前
🧠 别急着传!大文件上传里,藏着 Promise 的高级用法
前端·javascript·面试
嘉琪00121 分钟前
封装一个有最小化的dialog组件
前端·javascript·css
水果里面有苹果23 分钟前
20-C#构造函数--虚方法
java·前端·c#
Zachery Pole23 分钟前
BootStrap
前端·bootstrap·html
一尾流莺25 分钟前
【2025 年中总结】世事浮云何足问,不如高卧且加餐
前端·掘金社区