Vue2olTyphoonPicketline48

48 小时警戒线

---

基础用法

<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-picketline48></vue2ol-typhoon-picketline48>
      </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-picketline48
          :style-obj="style"
        ></vue2ol-typhoon-picketline48>
      </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>	-	[ [132, 33.651208], [132, 14.944785], [119.882812, 0], [105.029297, 0], ]
styleObj	样式	{ol/style/Style}	-	() => { return [ new Style({ stroke: new Stroke({ color: "#838313", width: 1, lineDash: [5, 5], }), }), new Style({ text: new Text({ text: "48 小时警戒线", placement: "line", textBaseline: "middle", justify: "center", fill: new Fill({ color: "#4ab23c", }), font: "bold 14px serif", }), geometry: new LineString([ [132, 33.651208], [132, 14.944785], ]), }), ]; }