Vue2olTyphoonPicketline24

24 小时警戒线

---

基础用法

<template>
  <vue2ol-map style="height:400px;">
    <vue2ol-view :zoom="zoom" :center="center" :options="viewOptions">
    </vue2ol-view>
    <vue2ol-layer-tile>
      <vue2ol-source-osm></vue2ol-source-osm>
    </vue2ol-layer-tile>
    <vue2ol-layer-vector>
      <vue2ol-source-vector>
        <vue2ol-typhoon-picketline24></vue2ol-typhoon-picketline24>
      </vue2ol-source-vector>
    </vue2ol-layer-vector>
  </vue2ol-map>
</template>

<script>
export default {
  data() {
    return {
      zoom: 4, //级别
      center: [124.7, 26.6], //中心点
      viewOptions: {
        projection: "EPSG:4326" //坐标系
      }
    };
  },
  computed: {},
  mounted() {}
};
</script>

Expand Copy Copy

修改样式

<template>
  <vue2ol-map style="height:400px;">
    <vue2ol-view :zoom="zoom" :center="center" :options="viewOptions">
    </vue2ol-view>
    <vue2ol-layer-tile>
      <vue2ol-source-osm></vue2ol-source-osm>
    </vue2ol-layer-tile>
    <vue2ol-layer-vector>
      <vue2ol-source-vector>
        <vue2ol-typhoon-picketline24
          :style-obj="style"
        ></vue2ol-typhoon-picketline24>
      </vue2ol-source-vector>
    </vue2ol-layer-vector>
  </vue2ol-map>
</template>

<script>
import { Style, Stroke } from "ol/style";

export default {
  data() {
    return {
      zoom: 4, //级别
      center: [124.7, 26.6], //中心点
      viewOptions: {
        projection: "EPSG:4326" //坐标系
      },
      style: new Style({
        stroke: new Stroke({
          color: "#ffff00",
          width: 1
        })
      })
    };
  }
};
</script>

Expand Copy Copy

Props

名称	描述	类型	取值范围	默认值
coordinates	警戒线坐标集合	Array<ol/Coordinate>	-	[ [126.914062, 34.161818], [127.001953, 21.963425], [119.003906, 17.895114], [118.916016, 11.178402], [113.027344, 4.565474], [105.029297, 0], ]
labelPosition		array	-	[126.914062, 34.161818]
styleObj	样式	{ol/style/Style}	-	() => { return [ new Style({ stroke: new Stroke({ color: "#eed139", width: 1, }), }), new Style({ text: new Text({ text: "24 小时警戒线", placement: "line", textBaseline: "middle", justify: "center", fill: new Fill({ color: "#e68707", }), font: "bold 14px serif", }), geometry: new LineString([ [126.914062, 34.161818], [127.001953, 21.963425], ]), }), ]; }