三十三、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>
相关推荐
一斤代码43 分钟前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子1 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年1 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子1 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina1 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路2 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说3 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409193 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding3 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜3 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui