openlayer style重点理解、点样式、线样式、区域样式设置

追风少儿狼
2,118 阅读2分钟

效果展示

featruesStyle.gif

HTML结构

<template>
  <div class="featruesStyle_BOX">
    <div id="featruesStyle" class="featruesStyle-demo"></div>
    <el-form ref="form" :model="form" label-width="120px" class="formClass">
      <el-row :gutter="10">
        <el-col :span="8">
          <el-card>
            <div
              slot="header"
              style="
                display: flex;
                justify-content: space-between;
                line-height: 28px;
              "
            >
              <span>点要素样式</span>
              <el-button type="text" @click="PonitUp">更新</el-button>
            </div>
            <el-tabs v-model="activePoint">
              <el-tab-pane label="图形样式" name="first_Point">
                <el-form-item label="点大小(radius)">
                  <el-input v-model="point.Size"></el-input>
                </el-form-item>
                <el-form-item label="填充颜色(color)">
                  <el-color-picker v-model="point.FillColor"></el-color-picker>
                </el-form-item>
                <el-form-item label="边框颜色(color)">
                  <el-color-picker
                    v-model="point.StrokeColor"
                  ></el-color-picker>
                </el-form-item>
                <el-form-item label="边框宽度(width)">
                  <el-input v-model="point.StrokeWidth"></el-input>
                </el-form-item>
              </el-tab-pane>
              <el-tab-pane label="文字样式" name="second_Point">
                <el-form-item label="文字位置">
                  <el-select v-model="point.TextAglin" placeholder="请选择">
                    <el-option
                      v-for="item in TextAglinArray"
                      :key="item"
                      :label="item"
                      :value="item"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="文字基线">
                  <el-select v-model="point.TextBaseline" placeholder="请选择">
                    <el-option
                      v-for="item in TextBaselineArray"
                      :key="item"
                      :label="item"
                      :value="item"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="文字旋转角度">
                  <el-input v-model="point.TextRotation">
                    <span slot="append">°</span>
                  </el-input>
                </el-form-item>
                <el-form-item label="字体">
                  <el-select v-model="point.TextFont" placeholder="请选择">
                    <el-option
                      v-for="item in pointTextFontArray"
                      :key="item"
                      :label="item"
                      :value="item"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="粗细">
                  <el-select v-model="point.TextWeight" placeholder="请选择">
                    <el-option
                      v-for="item in TextWeightArray"
                      :key="item"
                      :label="item"
                      :value="item"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="大小">
                  <el-input v-model="point.TextSize">
                    <span slot="append">px</span>
                  </el-input>
                </el-form-item>
                <el-form-item label="x偏移量">
                  <el-input v-model="point.TextOffsetX"> </el-input>
                </el-form-item>
                <el-form-item label="y偏移量">
                  <el-input v-model="point.TextOffsetY"> </el-input>
                </el-form-item>
                <el-form-item label="外框颜色">
                  <el-color-picker v-model="point.TextColor"></el-color-picker>
                </el-form-item>
                <el-form-item label="外框宽度">
                  <el-input v-model="point.TextOutlineColor"></el-input>
                </el-form-item>
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card>
            <div
              slot="header"
              style="
                display: flex;
                justify-content: space-between;
                line-height: 28px;
              "
            >
              <span>线要素样式</span>
              <el-button type="text" @click="LineUp">更新</el-button>
            </div>
            <el-tabs v-model="activeLine">
              <el-tab-pane label="图形样式" name="first_Line">
                <el-form-item label="边框颜色(color)">
                  <el-color-picker v-model="line.StrokeColor"></el-color-picker>
                </el-form-item>
                <el-form-item label="边框宽度(width)">
                  <el-input v-model="line.StrokeWidth"></el-input>
                </el-form-item>
              </el-tab-pane>
              <el-tab-pane label="文字样式" name="second_Line">
                <el-form-item label="文字位置">
                  <el-select v-model="line.TextAglin" placeholder="请选择">
                    <el-option
                      v-for="item in TextAglinArray"
                      :key="item"
                      :label="item"
                      :value="item"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="文字基线">
                  <el-select v-model="line.TextBaseline" placeholder="请选择">
                    <el-option
                      v-for="item in TextBaselineArray"
                      :key="item"
                      :label="item"
                      :value="item"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="文字旋转角度">
                  <el-input v-model="line.TextRotation">
                    <span slot="append">°</span>
                  </el-input>
                </el-form-item>
                <el-form-item label="字体">
                  <el-select v-model="line.TextFont" placeholder="请选择">
                    <el-option
                      v-for="item in pointTextFontArray"
                      :key="item"
                      :label="item"
                      :value="item"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="粗细">
                  <el-select v-model="line.TextWeight" placeholder="请选择">
                    <el-option
                      v-for="item in TextWeightArray"
                      :key="item"
                      :label="item"
                      :value="item"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="大小">
                  <el-input v-model="line.TextSize">
                    <span slot="append">px</span>
                  </el-input>
                </el-form-item>
                <el-form-item label="x偏移量">
                  <el-input v-model="line.TextOffsetX"> </el-input>
                </el-form-item>
                <el-form-item label="y偏移量">
                  <el-input v-model="line.TextOffsetY"> </el-input>
                </el-form-item>
                <el-form-item label="外框颜色">
                  <el-color-picker v-model="line.TextColor"></el-color-picker>
                </el-form-item>
                <el-form-item label="外框宽度">
                  <el-input v-model="line.TextOutlineColor"></el-input>
                </el-form-item>
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card>
            <div
              slot="header"
              style="
                display: flex;
                justify-content: space-between;
                line-height: 28px;
              "
            >
              <span>区要素样式</span>
              <el-button type="text" @click="polygonUp">更新</el-button>
            </div>
            <el-tabs v-model="activePolygon">
              <el-tab-pane label="图形样式" name="first_Polygon">
                <el-form-item label="填充颜色(color)">
                  <el-color-picker
                    v-model="polygon.FillColor"
                  ></el-color-picker>
                </el-form-item>
                <el-form-item label="边框颜色(color)">
                  <el-color-picker
                    v-model="polygon.StrokeColor"
                  ></el-color-picker>
                </el-form-item>
                <el-form-item label="边框宽度(width)">
                  <el-input v-model="polygon.StrokeWidth"></el-input>
                </el-form-item>
              </el-tab-pane>
              <el-tab-pane label="文字样式" name="second_Polygon">
                <el-form-item label="文字位置">
                  <el-select v-model="polygon.TextAglin" placeholder="请选择">
                    <el-option
                      v-for="item in TextAglinArray"
                      :key="item"
                      :label="item"
                      :value="item"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="文字基线">
                  <el-select
                    v-model="polygon.TextBaseline"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in TextBaselineArray"
                      :key="item"
                      :label="item"
                      :value="item"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="文字旋转角度">
                  <el-input v-model="polygon.TextRotation">
                    <span slot="append">°</span>
                  </el-input>
                </el-form-item>
                <el-form-item label="字体">
                  <el-select v-model="polygon.TextFont" placeholder="请选择">
                    <el-option
                      v-for="item in pointTextFontArray"
                      :key="item"
                      :label="item"
                      :value="item"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="粗细">
                  <el-select v-model="polygon.TextWeight" placeholder="请选择">
                    <el-option
                      v-for="item in TextWeightArray"
                      :key="item"
                      :label="item"
                      :value="item"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="大小">
                  <el-input v-model="polygon.TextSize">
                    <span slot="append">px</span>
                  </el-input>
                </el-form-item>
                <el-form-item label="x偏移量">
                  <el-input v-model="polygon.TextOffsetX"> </el-input>
                </el-form-item>
                <el-form-item label="y偏移量">
                  <el-input v-model="polygon.TextOffsetY"> </el-input>
                </el-form-item>
                <el-form-item label="外框颜色">
                  <el-color-picker
                    v-model="polygon.TextColor"
                  ></el-color-picker>
                </el-form-item>
                <el-form-item label="外框宽度">
                  <el-input v-model="polygon.TextOutlineColor"></el-input>
                </el-form-item>
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<style scoped>
.featruesStyle_BOX {
  display: flex;
  justify-content: space-between;
  height: 800px;
}
.featruesStyle-demo {
  width: 50%;
  height: 800px;
}
.formClass {
  width: 50%;
}
>>> .el-card__header {
  padding: 10px;
  font-size: 12px;
  font-weight: bold;
}
>>> .el-card__body,
.el-main {
  padding: 5px;
}
</style>

初始化公共方法和变量

let pointFeature = new Feature({
    geometry: new Point(
      transform(
        [104.06576156616212, 30.657443157369386],
        "EPSG:4326",
        "EPSG:3857"
      )
    ),
    name: "Point Feature",
  }),
  lineFeature = new Feature({
    geometry: new LineString([
      transform(
        [104.06576156616212, 30.657443157369386],
        "EPSG:4326",
        "EPSG:3857"
      ),
      transform(
        [105.44677734375001, 28.86147544303663],
        "EPSG:4326",
        "EPSG:3857"
      ),
    ]),
    name: "Line Feature",
  }),
  polygonFeature = new Feature({
    geometry: new Polygon([
      [
        transform(
          [104.20738220214845, 30.833966831300685],
          "EPSG:4326",
          "EPSG:3857"
        ),
        transform(
          [104.23150062561037, 30.84214707744351],
          "EPSG:4326",
          "EPSG:3857"
        ),
        transform(
          [104.22454833984376, 30.67368532516591],
          "EPSG:4326",
          "EPSG:3857"
        ),
        transform(
          [104.08550262451172, 30.668739135911846],
          "EPSG:4326",
          "EPSG:3857"
        ),
        transform(
          [104.20738220214845, 30.833966831300685],
          "EPSG:4326",
          "EPSG:3857"
        ),
      ],
    ]),
    name: "Line Feature",
  });

function createText(
  {
    TextAglin,
    TextBaseline,
    TextFont,
    FillColor,
    TextColor,
    TextOutlineColor,
    TextOffsetX,
    TextOffsetY,
    TextRotation,
    TextWeight,
    TextSize,
  },
  feature
) {
  //italic normal bold 18px arial
  return new Text({
    textAlign: TextAglin,
    textBaseline: TextBaseline,
    font: `${TextWeight} ${TextSize}px ${TextFont}`,
    text: feature.get("name"),
    fill: new Fill({ color: FillColor }),
    stroke: new Stroke({ color: TextColor, width: TextOutlineColor }),
    offsetX: TextOffsetX,
    offsetY: TextOffsetY,
    rotation: (TextRotation / 180) * Math.PI,
  });
}

function createPointStyleFn(feature, Point) {
  let { Size, FillColor, StrokeColor, StrokeWidth } = Point;
  return new Style({
    image: new CircleStyle({
      radius: Size,
      fill: new Fill({ color: FillColor }),
      stroke: new Stroke({ color: StrokeColor, width: StrokeWidth }),
    }),
    text: createText(Point, feature),
  });
}
function createLineStyleFn(feature, Line) {
  let { StrokeColor, StrokeWidth } = Line;
  return new Style({
    stroke: new Stroke({ color: StrokeColor, width: StrokeWidth }),
    text: createText(Line, feature),
  });
}
function createPolygonStyleFn(feature, Polygon) {
  let { FillColor, StrokeColor, StrokeWidth } = Polygon;
  return new Style({
    fill: new Fill({ color: FillColor }),
    stroke: new Stroke({ color: StrokeColor, width: StrokeWidth }),
    text: createText(Polygon, feature),
  });
}

Vue-data 初始化

 data() {
    return {
      form: {},
      activePoint: "first_Point",
      activeLine: "first_Line",
      activePolygon: "first_Polygon",
      map: null,
      vectorPoints: null,
      vectorLine: null,
      vectorPolygon: null,
      //区
      polygon: {
        //图形样式
        FillColor: "#aa3300",
        StrokeColor: "#f00",
        StrokeWidth: "2",
        //文字样式
        TextAglin: "center",
        TextBaseline: "middle",
        TextRotation: 0,
        TextFont: "Arial",
        TextWeight: "normal",
        TextSize: "12",
        TextOffsetX: "0",
        TextOffsetY: "0",
        TextColor: "#0ff",
        TextOutlineColor: "3",
      },
      //点
      point: {
        //图形样式
        Size: 10,
        FillColor: "#aa3300",
        StrokeColor: "#f00",
        StrokeWidth: "2",
        //文字样式
        TextAglin: "center",
        TextBaseline: "middle",
        TextRotation: 0,
        TextFont: "Arial",
        TextWeight: "normal",
        TextSize: "12",
        TextOffsetX: "0",
        TextOffsetY: "0",
        TextColor: "#0ff",
        TextOutlineColor: "3",
      },
      //线
      line: {
        //图形样式
        StrokeColor: "#f00",
        StrokeWidth: "2",
        //文字样式
        TextAglin: "center",
        TextBaseline: "middle",
        TextRotation: 0,
        TextFont: "Arial",
        TextWeight: "normal",
        TextSize: "12",
        TextOffsetX: "0",
        TextOffsetY: "0",
        TextColor: "#0ff",
        TextOutlineColor: "3",
      },
      TextWeightArray: ["normal", "bold", "bolder"],
      pointTextFontArray: ["Arial", "Courier New", "Verdana"],
      TextAglinArray: ["center", "end", "left", "right", "start"],
      TextBaselineArray: [
        "alphabetic",
        "bottom",
        "hanging",
        "ideographic",
        "middle",
        "top",
      ],
    };
  },

Map 初始化

  mounted() {
    let { point, polygon, line } = this;
    let vectorPoints = new VectorLayer({
        source: new VectorSource({
          features: [pointFeature],
        }),
        style: createPointStyleFn(pointFeature, point),
      }),
      vectorLine = new VectorLayer({
        source: new VectorSource({
          features: [lineFeature],
        }),
        style: createLineStyleFn(lineFeature, line),
      }),
      vectorPolygon = new VectorLayer({
        source: new VectorSource({
          features: [polygonFeature],
        }),
        style: createPolygonStyleFn(polygonFeature, polygon),
      });
    let map = new Map({
      // 设置地图图层
      layers: [gaodeMapLayer, vectorPoints, vectorLine, vectorPolygon],
      // 设置显示地图的视图
      view: new View({
        center: transform([104.065735, 30.659462], "EPSG:4326", "EPSG:3857"),
        zoom: 9,
        minZoom: 1,
        maxZoom: 21,
        //  projection: "EPSG:4326",
        rotation: 0,
      }),
      // 让id为map的div作为地图的容器
      target: "featruesStyle",
    });
    this.vectorPoints = vectorPoints;
    this.vectorLine = vectorLine;
    this.vectorPolygon = vectorPolygon;
    this.map = map;
  },

样式更新

  methods: {
    PonitUp() {
      let { point, vectorPoints } = this;
      vectorPoints.setStyle(createPointStyleFn(pointFeature, point));
    },
    LineUp() {
      let { line, vectorLine } = this;
      vectorLine.setStyle(createLineStyleFn(lineFeature, line));
    },
    polygonUp() {
      let { polygon, vectorPolygon } = this;
      vectorPolygon.setStyle(createPolygonStyleFn(polygonFeature, polygon));
    },
  },
avatar
文章
阅读
粉丝