初始化公共方法和变量

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));
复制代码
  
分类：
 前端
 
  
     
 

    追风少儿狼