vue+openlayers5学习总结（九）vue20190715封装源码

原创已于 2023-03-29 14:40:53 修改 · 262 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #penlayers #封装

于 2019-07-15 17:42:55 首次发布

网站开发同时被 3 个专栏收录

23 篇文章

订阅专栏

openlayers

9 篇文章

订阅专栏

vue

8 篇文章

订阅专栏

该博客主要介绍了一个基于Vue的项目结构，重点围绕地图界面展开。详细阐述了view、projecton、mapcommands等文件夹下的文件，如olmap.vue、mapconfig.js等，还提及了package.json，展示了项目的整体架构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.地图界面

在这里插入图片描述

2.vue结构

在这里插入图片描述

3.view文件夹

3.1olmap.vue

<template>
  <div>
    <!-- <div id="map" ref="rootmap" class="map"></div> -->
    <div id="fullscreen" class="fullscreen">
      <div tabindex="1" id="map" ref="rootmap" class="map"></div>
      <div class="sidepanel">
        <span class="sidepanel-title">图层列表</span>
        <el-tree
          :data="tree"
          show-checkbox
          node-key="id"
          ref="tree"
          :default-expanded-keys="[0]"
          :default-checked-keys="[0,1]"
          :props="defaultProps"
          @check="click"
          @node-click="handleNodeClick"
        ></el-tree>
        <div id="layerControl" class="layerControl">
          <ul id="layerTree" class="layerTree"></ul>
        </div>
      </div>
    </div>
    <button @click="selected('length')">测量距离</button>
    <button @click="selected('area')">测量面积</button>
    <button @click="removemeasure()">清除测量</button>
    <button @click="fun(1)">底图1</button>
    <button @click="fun(2)">底图2</button>
    <button @click="fun(3)">底图3</button>
    <button @click="fun(4)">底图4</button>
    <button @click="fun(5)">底图5</button>
    <button @click="fun(6)">底图6</button>
    <button @click="fun(7)">底图7</button>
    <button @click="fun(8)">底图8</button>
    <button @click="fun(9)">底图9(Geoserver)</button>
    <button @click="fun(0)">底图设置为空</button>
    <button @click="flyTo()">飞往成都</button>
    <input id="files" type="file" accept=".shp" @change="addshp()" ref="fileInput" />
    <!-- <button @click="addshp()">添加shp到地图中</button> -->
    <div id="mouseposition" ref="xyposition" :style="{marginTop:'100px'}"></div>
  </div>
</template>
<script>
import "ol/ol.css";
import { Map, View } from "ol";
import {
  Group as LayerGroup,
  Vector as VectorLayer,
  Tile as TileLayer
} from "ol/layer.js";
import {
  XYZ,
  BingMaps,
  OSM,
  TileArcGISRest,
  Vector as VectorSource
} from "ol/source.js";
import TileWMS from "ol/source/TileWMS.js";
import mapcontrols from "./mapcontrols.js";
import layercontrols from "./layercontrols.js";
import mapconfig from "./mapconfig";
import measure from "../mapcommands/measure.js";
import viewcontrols from "../mapcommands/viewcontrols.js";
import projection from "../projecton/pro.js";
import TileGrid from "ol/tilegrid/TileGrid";
import { GPX, GeoJSON, IGC, KML, TopoJSON } from "ol/format.js";
import {
  defaults as defaultInteractions,
  DragAndDrop,
  PinchZoom
} from "ol/interaction.js";
import { fromLonLat } from "ol/proj.js";
import Projection from "ol/proj/Projection.js";
import { register } from "ol/proj/proj4.js";
import proj4 from "proj4";
import shpcontrols from "../mapcommands/shpcontrols.js";
import { open } from "shapefile";
import layergroups from "./layergroups.js";
export default {
  data() {
    return {
      map: null,
      tree: null,
      defaultProps: {
        children: "children",
        label: "label"
      }
    };
  },
  mounted() {
    let self = this;
    var mapcontainer = this.$refs.rootmap;
    var mapxyposition = this.$refs.xyposition;
    self.source = new VectorSource({ wrapX: true });

    var dragAndDropInteraction = new DragAndDrop({
      formatConstructors: [GPX, GeoJSON, IGC, KML, TopoJSON]
    });
    dragAndDropInteraction.on("addfeatures", function(event, mymap) {
      var vectorSource = new VectorSource({
        features: event.features
      });
      self.map.addLayer(
        new VectorLayer({
          renderMode: "image",
          source: vectorSource,
          projection: projection.projection
        })
      );
      self.map.getView().fit(vectorSource.getExtent());
    });
    // this.layer = new TileLayer({ name: "底图" });
    this.layer = new TileLayer();
    this.view = mapconfig.view;
    //加载矢量服务
    var mylayergroups = layergroups.layergroups;
    //console.log(mylayergroups);
    this.map = new Map({
      controls: mapcontrols,
      target: mapcontainer,
      interactions: defaultInteractions({
        constrainResolution: true,
        onFocusOnly: true
      }).extend([
        dragAndDropInteraction,
        new PinchZoom({
          constrainResolution: true // force zooming to a integer zoom
        })
      ]),
      layers: [this.layer, mylayergroups, measure.vector(self.source)],
      view: this.view //this.view
    });
    this.tree=layercontrols.loadLayersControl(this.map);
  },
  methods: {
    fun(num) {
      this.layer.setSource(mapconfig.basemapsource(num));
    },
    removemeasure() {
      measure.removemeasuretip(this);
      this.selected("None");
    },
    selected(shp) {
      this.map.removeInteraction(this.draw);
      if (shp != "None") {
        measure.addInteraction(this, shp);
      }
    },
    flyTo() {
      viewcontrols.flyTo([35371814, 3430209], this.view);
    },
    addshp() {
      let self = this;
      var file = this.$refs.fileInput.files[0];
      shpcontrols.addshape(self, file);
    },
    click(checkedKeys, checkedNodes) {
      layercontrols.treeControl(checkedKeys, checkedNodes,this.map)
    },
  }
};
</script>

 <style map>
.fullscreen:-moz-full-screen {
  height: 100%;
}
.fullscreen:-webkit-full-screen {
  height: 100%;
}
.fullscreen:-ms-fullscreen {
  height: 100%;
}

.fullscreen:fullscreen {
  height: 100%;
}

.fullscreen {
  margin-bottom: 10px;
  width: 100%;
  height: 600px;
}

.ol-rotate {
  top: 3em;
}
.sidepanel {
  background: rgb(52, 63, 61);
  width: 15%;
  height: 100%;
  float: right;
}
.map {
  width: 85%;
  height: 100%;
  float: right;
}

.sidepanel-title {
  width: 100%;
  color: #ffffff;
  display: block;
  font-weight: bold;
  font-size: 15px;
  margin-top: 10px;
  margin-bottom: 10px;
  text-align: center;
}
.tooltip {
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  color: white;
  padding: 4px 8px;
  opacity: 0.7;
  white-space: nowrap;
}

.tooltip-measure {
  opacity: 1;
  font-weight: bold;
}

.tooltip-static {
  background-color: #ffcc33;
  color: black;
  border: 1px solid white;
}

.tooltip-measure:before,
.tooltip-static:before {
  border-top: 6px solid rgba(0, 0, 0, 0.5);
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  content: "";
  position: absolute;
  bottom: -6px;
  margin-left: -7px;
  left: 50%;
}

.tooltip-static:before {
  border-top-color: #ffcc33;
}
.ol-mouse-position {
  /* margin-bottom: 10px;
    left: 50%; */
  position: absolute;
  top: 95%;
  font-size: 0.8em;
  background: #ffffff;
  opacity: 0.7;
}
.ol-zoom {
  position: absolute;
  top: 75%;
  opacity: 0.9;
  left: 96%;
}
.ol-zoom-extent {
  position: absolute;
  top: 70%;
  opacity: 0.9;
  left: 96%;
}

.layerControl {
  font-size: 13px;
  color: #ffffff;
}
.layerTree li {
  list-style: none;
  margin: 10px;
  text-align: left;
}
.el-tree{
  color: #3adf35;
  background: rgb(52, 63, 61)
}
</style>

3.2mapconfig.js

//import TileLayer from "ol/layer/Tile";
import TileGrid from "ol/tilegrid/TileGrid";
import { fromLonLat } from "ol/proj.js";
import { View } from "ol";
import {
    XYZ,
    BingMaps,
    OSM,
    TileArcGISRest,
    TileWMS,
    Vector as VectorSource
} from "ol/source.js";
import projection from "../projecton/pro.js";


var zeroFill = function(num, len, radix) {
    var str = num.toString(radix || 10);
    while (str.length < len) {
        str = "0" + str;
    }
    return str;
};
var origin = [2.98768e7, 1.00021e7];
//对应源代码中的全图范围信息
var fullExtent = [
    29876800.0,
    1874083.7439674865,
    38004816.25603251,
    10002100.0
];
//对应源代码中的切片方案信息
var resolutions = [
    10583.354500042335,
    2645.8386250105837,
    264.5838625010584,
    132.2919312505292,
    66.1459656252646,
    33.0729828126323,
    16.933367200067735,
    8.466683600033868,
    4.233341800016934,
    2.116670900008467,
    1.0583354500042335
];
var tileGrid = new TileGrid({
    tileSize: 256,
    origin: origin,
    extent: fullExtent,
    resolutions: resolutions
});
//TileLayer
var basemapsource = function(mapsource) {
    var basemapsource = null;
    switch (mapsource) {
        case 0:
            basemapsource = null;
            break;
        case 1:
            basemapsource = new OSM();
            break;
        case 2:
            basemapsource = new TileArcGISRest({
                url: "https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer"
            });
            break;
        case 3:
            basemapsource = new BingMaps({
                imagerySet: "Aerial",
                key: "As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5"
            });
            break;
        case 4:
            basemapsource = new XYZ({
                tileGrid: tileGrid,
                projection: projection.projection,
                tileUrlFunction: function(coordinate) {
                    //alert(coordinate[0] + " X= " + coordinate[1] + " Y= " + coordinate[2]);
                    var x = "C" + zeroFill(coordinate[1], 8, 16);
                    var y = "R" + zeroFill(-coordinate[2] - 1, 8, 16);
                    var z = "L" + zeroFill(coordinate[0], 2, 10);
                    //return '_alllayers/' + z + '/' + y + '/' + x + '.png';//这里可以修改地图路径
                    return "/static/_alllayers/" + z + "/" + y + "/" + x + ".png"; //这里可以修改地图路径
                }
            });
            break;
            //天地图
            //地址https://zhfw.tianditu.gov.cn/
            //天地图结束
            //天地图矢量
        case 5:
            basemapsource = new XYZ({
                url: "https://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=01648a46241de4244d518d8e151b3528"
            });
            break;
            //天地图影像
        case 6:
            basemapsource = new XYZ({
                url: "https://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=01648a46241de4244d518d8e151b3528"
            });
            break;
            //天地图地形
        case 7:
            basemapsource = new XYZ({
                url: "https://t0.tianditu.gov.cn/DataServer?T=ter_w&x={x}&y={y}&l={z}&tk=01648a46241de4244d518d8e151b3528"
            });
            break;
            //天地图标注
        case 8:
            basemapsource = new XYZ({
                url: "https://t0.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=01648a46241de4244d518d8e151b3528"
            });
            break;
            //矢量图层服务
        case 9:
            basemapsource = new TileWMS({
                url: 'http://127.0.0.1:8080/geoserver/zsl/wms',
                params: {
                    'TILED': true,
                    'FORMAT': 'image/png',
                    'VERSION': '1.1.0',
                    'LAYERS': 'zsl:jianyang',
                    "exceptions": 'application/vnd.ogc.se_inimage',
                }
            });
            break;


    }
    return basemapsource;
};
// const getMinZoom = function() {
//     var width = mapcontainer.clientWidth;
//     return Math.ceil(Math.LOG2E * Math.log(width / 256));
// };
// const getMaxZoom = function() {
//     var width = mapcontainer.clientWidth;
//     return Math.ceil(Math.LOG2E * Math.log(width / 0.02));
// };
//初始化地图
var view = new View({
    projection: projection.projection,
    center: fromLonLat([104.0716, 30.66799], projection.projection),
    //extent: fullExtent,
    zoom: 5
});

var mapconfig = {
    //tileArcGISXYZ: tileArcGISXYZ,
    tileGrid: tileGrid,
    // layer: layer,
    basemapsource: basemapsource,
    view: view
};

export
default mapconfig;

3.3mapcontrols.js

//用于获取鼠标坐标
import { createStringXY } from "ol/coordinate.js";
import {
    Attribution,
    defaults as defaultControls,
    Control,
    FullScreen,
    MousePosition,
    OverviewMap,
    ScaleLine,
    Zoom,
    ZoomSlider,
    ZoomToExtent,
    LayerSwitcher,
} from "ol/control.js";

var mapcontrols = defaultControls().extend([
    //全屏显示
    new FullScreen({
        source: "fullscreen"
    }),
    //比例尺
    new ScaleLine({
        source: "scaleline"
    }),
    //鹰眼图
    // new OverviewMap({
    //     source: "overviewmap"
    // }),
    //鼠标位置
    new MousePosition({
        source: "mouseposition",
        coordinateFormat: createStringXY(4),
    }),
    // new MousePosition({
    //     coordinateFormat: createStringXY(4),
    //     projection: "EPSG:3857",
    //     className: "custom-mouse-position",
    //     target: mapxyposition,
    //     undefinedHTML: "&nbsp;"
    // }),
    //缩放到指定范围
    new ZoomToExtent({
        extent: [
            29876800.0,
            1874083.7439674865,
            38004816.25603251,
            10002100.0
        ]
    }),
    new Zoom({
        source: "zoom"
    }),
    // new ZoomSlider({
    //     source: "zoomslider"
    // })
]);

export default mapcontrols;

3.4layercontrols.js

var loadLayersControl = function(map) {
    var layergroup = new Array(); //map中的图层数组
    var layergroupName = new Array(); //图层名称数组
    var layer = new Array(); //map中的图层数组
    var layerName = new Array(); //图层名称数组
    var group = new Array(); //map中的图层数组
    var layergrouptree = new Array();
    var layergroups = map.getLayers().item(1).getLayers();
    for (var i = layergroups.getLength() - 1; i >= 0; i--) {
        //获取group的名称、是否可见属性
        layergroup[i] = layergroups.item(i);
        layergroupName[i] = layergroup[i].get("name");
        group = layergroup[i].getLayers();
        console.log(layergroupName[i]);
        var father = {
            id: i,
            label: layergroupName[i],
            children: []
        };
        for (var j = group.getLength() - 1; j >= 0; j--) {
            layer[j] = group.item(j);
            console.log(layer[j]);
            layerName[j] = layer[j].get("name");
            console.log(layerName[j]);
            father.children.push({
                id: i + "-" + j,
                label: layerName[j]
            });
        }
        layergrouptree.push(father);
    }
    return layergrouptree;
};
var getTreeCheck = function(Keys, Key) {
    if (Keys.indexOf(Key) != -1) {
        return true;
    } else {
        return false;
    }
};
var setLayerVisible = function(layerid, ischecked, map) {
    var layer = new Array(); //map中的图层数组
    var group = new Array(); //map中的图层数组
    var layergroups = map.getLayers().item(1).getLayers();
    for (var i = layergroups.getLength() - 1; i >= 0; i--) {
        //获取group的名称、是否可见属性
        group = layergroups.item(i).getLayers();
        for (var j = group.getLength() - 1; j >= 0; j--) {
            layer[j] = group.item(j);
            var grouplayerid = layer[j].get("id");
            console.log(layer[j].get("id"));
            //判断id
            if (grouplayerid == layerid) {
                if (ischecked == true) {
                    layer[j].setVisible(true); //显示图层
                } else {
                    layer[j].setVisible(false); //不显示图层
                }
            }
        }
    }
};
var treeControl = function(checkedKeys, checkedNodes, map) {
    if (checkedKeys.children) {
        for (var i = 0; i < checkedKeys.children.length; i++) {
            var trr = this.getTreeCheck(checkedNodes.checkedKeys, checkedKeys.children[i].id);
            this.setLayerVisible(checkedKeys.children[i].id, trr, map);
        }
    } else {
        var trr = this.getTreeCheck(checkedNodes.checkedKeys, checkedKeys.id);
        this.setLayerVisible(checkedKeys.id, trr, map);
        console.log(trr);
    }
};
var layercontrols = {
    loadLayersControl: loadLayersControl,
    getTreeCheck: getTreeCheck,
    setLayerVisible: setLayerVisible,
    treeControl: treeControl,
};
export default layercontrols;

3.5layergroups.js

import { Group as LayerGroup, Tile as TileLayer } from 'ol/layer.js';
import {
    TileWMS,
} from "ol/source.js";
var geolayer = function(Workspace, layername, layerid) {
    //var layers = Workspace + ":" + layername;
    var geolayer = new TileLayer({
        source: new TileWMS({
            url: "http://127.0.0.1:8080/geoserver/" + Workspace + "/wms",
            params: {
                TILED: true,
                FORMAT: "image/png",
                VERSION: "1.1.0",
                LAYERS: Workspace + ":" + layername,
                exceptions: "application/vnd.ogc.se_inimage"
            }
        }),
        id: layerid,
        name: layername,
    });
    return geolayer;
}
var layergroups = new LayerGroup({
    layers: [
        new LayerGroup({
            layers: [
                geolayer("zsl", "DJQ35", "0-0"),
                geolayer("zsl", "jianyang", "0-1"),
            ],
            name: "地级区",
        }),
        new LayerGroup({
            layers: [
                geolayer("zsl", "DJQ35", "1-0"),
                geolayer("zsl", "DJZQ35", "1-1"),
            ],
            name: "简阳",
        }),
    ],
    name: "layergroups01",
});
var layergroups = {
    //导航配置
    geolayer: geolayer,
    //layergrouptree: layergrouptree,
    layergroups: layergroups,
};

export default layergroups;

4.projecton文件夹

4.1pro.js

import Projection from "ol/proj/Projection.js";
import { register } from "ol/proj/proj4.js";
import proj4 from "proj4";
//var proj4 = require("./proj4");

proj4.defs(
    "EPSG:4523",
    "+proj=tmerc +lat_0=0 +lon_0=105 +k=1 +x_0=35500000 +y_0=0 +ellps=GRS80 +units=m +no_defs"
);
register(proj4);
const projection = new Projection({
    code: "EPSG:4523",
    extent: [35345643.07, 2489940.65, 35623868.1, 4676052.19]
});
var pro = {
    //CGCS2000 / 3-degree Gauss-Kruger zone 35
    projection: projection,
};

export default pro;

5.mapcommands文件夹

5.1viewcontrols.js

//用于飞往成都
import { fromLonLat } from 'ol/proj.js';
import { easeIn, easeOut } from 'ol/easing.js'
var flyTo = function(location, view) {
    var duration = 2000;
    var zoom = view.getZoom();
    var parts = 2;
    var called = false;

    function callback(complete) {
        --parts;
        if (called) {
            return;
        }
        if (parts === 0 || !complete) {
            called = true;
            //done(complete);
        }
    }
    view.animate({
        center: location,
        duration: duration
    }, callback);
    view.animate({
        zoom: zoom - 1,
        duration: duration / 2
    }, {
        zoom: zoom,
        duration: duration / 2
    }, callback);
}
var viewcontrols = {
    //飞往成都
    flyTo: flyTo,
};

export default viewcontrols;

5.2measure.js

import { Vector as VectorLayer } from "ol/layer.js";
import { Vector as VectorSource } from "ol/source.js";
//绘画
import { Draw } from "ol/interaction.js";
import { Circle as CircleStyle, Fill, Stroke, Style } from "ol/style.js";
//测量
import Overlay from "ol/Overlay.js";
import { getArea, getLength } from "ol/sphere.js";
import { LineString, Polygon } from "ol/geom.js";


//测量所在图层
var vector = function(source) {
    var vector = new VectorLayer({
        source: source,
        style: new Style({
            fill: new Fill({
                color: "rgba(255, 255, 255, 0.2)"
            }),
            stroke: new Stroke({
                color: "#ffcc33",
                width: 2
            }),
            image: new CircleStyle({
                radius: 7,
                fill: new Fill({
                    color: "#ffcc33"
                })
            })
        })
    });
    return vector;
};


var addInteraction = function(self, typevalue) {
    var type = typevalue == "area" ? "Polygon" : "LineString";
    //alert(type);
    self.draw = new Draw({
        source: self.source,
        type: type,
        style: new Style({
            fill: new Fill({
                color: "rgba(255, 255, 255, 0.2)"
            }),
            stroke: new Stroke({
                color: "rgba(0, 0, 0, 0.5)",
                lineDash: [10, 10],
                width: 2
            }),
            image: new CircleStyle({
                radius: 5,
                stroke: new Stroke({
                    color: "rgba(0, 0, 0, 0.7)"
                }),
                fill: new Fill({
                    color: "rgba(255, 255, 255, 0.2)"
                })
            })
        })
    });
    self.map.addInteraction(self.draw);
    createMeasureTooltip(self);
    var listener;
    self.draw.on(
        "drawstart",
        function(evt) {
            // set sketch
            self.sketch = evt.feature;
            /** @type {module:ol/coordinate~Coordinate|undefined} */
            var tooltipCoord = evt.coordinate;
            listener = self.sketch.getGeometry().on("change", function(evt) {
                var geom = evt.target;
                var output;
                if (geom instanceof Polygon) {
                    output = formatArea(geom);
                    tooltipCoord = geom.getInteriorPoint().getCoordinates();
                } else if (geom instanceof LineString) {
                    output = formatLength(geom);
                    tooltipCoord = geom.getLastCoordinate();
                }
                self.measureTooltipElement.innerHTML = output;
                self.measureTooltip.setPosition(tooltipCoord);
            });
        },
        self
    );
    self.draw.on(
        "drawend",
        function() {
            console.log(self.measureTooltipElement);
            self.measureTooltipElement.className = "tooltip tooltip-static";
            //self.measureTooltipElement.Style="color:red"
            self.measureTooltip.setOffset([0, -7]);
            // unset sketch
            self.sketch = null;
            // unset tooltip so that a new one can be created
            self.measureTooltipElement = null;
            createMeasureTooltip(self);
            //unByKey(listener);
        },
        self
    );
};
var createMeasureTooltip = function(self) {
    if (self.measureTooltipElement == undefined) {
        self.measureTooltipElement = document.createElement("div");
        self.measureTooltipElement.className = "tooltip tooltip-measure";
        self.measureTooltip = new Overlay({
            element: self.measureTooltipElement,
            offset: [0, -15],
            positioning: "bottom-center"
        });
        self.map.addOverlay(self.measureTooltip);
    } else {
        if (self.measureTooltipElement) {
            self.measureTooltipElement.parentNode.removeChild(
                self.measureTooltipElement
            );
        }
        self.measureTooltipElement = document.createElement("div");
        self.measureTooltipElement.className = "tooltip tooltip-measure";
        self.measureTooltip = new Overlay({
            element: self.measureTooltipElement,
            offset: [0, -15],
            positioning: "bottom-center"
        });
        self.map.addOverlay(self.measureTooltip);
    }
};
var formatLength = function(line) {
    var length = getLength(line);
    var output;
    if (length > 100) {
        output = Math.round((length / 1000) * 100) / 100 + " " + "km";
    } else {
        output = Math.round(length * 100) / 100 + " " + "m";
    }
    return output;
};
var formatArea = function(polygon) {
    var area = getArea(polygon);
    var output;
    if (area > 10000) {
        output = Math.round((area / 1000000) * 100) / 100 + " " + "km<sup>2</sup>";
    } else {
        output = Math.round(area * 100) / 100 + " " + "m<sup>2</sup>";
    }
    return output;
};
var removemeasuretip = function(self) {
    self.source.clear();
    self.map.getOverlays().clear();
};
var measure = {
    vector: vector,
    addInteraction: addInteraction,
    createMeasureTooltip: createMeasureTooltip,
    formatLength: formatLength,
    formatArea: formatArea,
    removemeasuretip: removemeasuretip
};

export default measure;
//用法
// self.source = new VectorSource({ wrapX: true });
// 在map中加入
// layers: [
//     measure.vector(self.source)
//   ],

5.3shpcontrols.js

import { open } from "shapefile";
import { Vector as VectorLayer } from "ol/layer.js";
import { Vector as VectorSource } from "ol/source.js";
import { GeoJSON } from "ol/format.js";
import layercontrols from "../view/layercontrols.js";
var addshape = function(self, file) {
    var name = file.name;
    var index = name.lastIndexOf(".");
    var filename = name.substr(0, index);
    console.log(file);
    var reader = new FileReader();
    reader.readAsArrayBuffer(file);
    var geojsonObject = {
        type: "FeatureCollection",
        features: []
    };
    reader.onload = function() {
        open(this.result).then(source =>
            source.read().then(function log(result) {
                if (result.done) {
                    console.log(geojsonObject);
                    var vectorLayer = new VectorLayer({
                        source: new VectorSource({
                            features: new GeoJSON().readFeatures(geojsonObject)
                        }),
                        name: filename
                    });
                    self.map.addLayer(vectorLayer);
                    layercontrols.loadLayersControl(self.map, "layerTree");
                    //self.map.render();
                    return;
                }
                geojsonObject.features.push(result.value);
                return source.read().then(log);
            })
        );
        //.catch(error => console.error(error.stack));
    };
};
var shpcontrols = {
    addshape: addshape
};

export default shpcontrols;

6.package.json

{
    "name": "vueols",
    "version": "1.0.0",
    "description": "A Vue.js project",
    "author": "zsl",
    "private": true,
    "scripts": {
        "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
        "start": "npm run dev",
        "unit": "jest --config test/unit/jest.conf.js --coverage",
        "e2e": "node test/e2e/runner.js",
        "test": "npm run unit && npm run e2e",
        "build": "node build/build.js"
    },
    "dependencies": {
        "@types/proj4": "^2.5.0",
        "element-ui": "^2.10.1",
        "ol": "^5.3.3",
        "pbf": "^3.2.0",
        "proj4": "^2.5.0",
        "shapefile": "^0.6.6",
        "vue": "^2.5.2",
        "vue-router": "^3.0.1"
    },
    "devDependencies": {
        "autoprefixer": "^7.1.2",
        "babel-core": "^6.22.1",
        "babel-helper-vue-jsx-merge-props": "^2.0.3",
        "babel-jest": "^21.0.2",
        "babel-loader": "^7.1.1",
        "babel-plugin-dynamic-import-node": "^1.2.0",
        "babel-plugin-syntax-jsx": "^6.18.0",
        "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
        "babel-plugin-transform-runtime": "^6.22.0",
        "babel-plugin-transform-vue-jsx": "^3.5.0",
        "babel-preset-env": "^1.3.2",
        "babel-preset-stage-2": "^6.22.0",
        "babel-register": "^6.22.0",
        "chalk": "^2.0.1",
        "chromedriver": "^2.27.2",
        "copy-webpack-plugin": "^4.0.1",
        "cross-spawn": "^5.0.1",
        "css-loader": "^0.28.0",
        "extract-text-webpack-plugin": "^3.0.0",
        "file-loader": "^1.1.4",
        "friendly-errors-webpack-plugin": "^1.6.1",
        "html-webpack-plugin": "^2.30.1",
        "jest": "^22.0.4",
        "jest-serializer-vue": "^0.3.0",
        "nightwatch": "^0.9.12",
        "node-notifier": "^5.1.2",
        "optimize-css-assets-webpack-plugin": "^3.2.0",
        "ora": "^1.2.0",
        "portfinder": "^1.0.13",
        "postcss-import": "^11.0.0",
        "postcss-loader": "^2.0.8",
        "postcss-url": "^7.2.1",
        "rimraf": "^2.6.0",
        "selenium-server": "^3.0.1",
        "semver": "^5.3.0",
        "shelljs": "^0.7.6",
        "uglifyjs-webpack-plugin": "^1.1.1",
        "url-loader": "^0.5.8",
        "vue-jest": "^1.0.2",
        "vue-loader": "^13.3.0",
        "vue-style-loader": "^3.0.1",
        "vue-template-compiler": "^2.5.2",
        "webpack": "^3.6.0",
        "webpack-bundle-analyzer": "^2.9.0",
        "webpack-dev-server": "^2.9.1",
        "webpack-merge": "^4.1.0"
    },
    "engines": {
        "node": ">= 6.0.0",
        "npm": ">= 3.0.0"
    },
    "browserslist": [
        "> 1%",
        "last 2 versions",
        "not ie <= 8"
    ]
}