openlayers加载坐标数据，将数据点绘制渲染出行政区边界图形。

收到一个文本文件，里面都是经纬度信息。说是一打开地图就加载行政区的矩形来，图形信息在这个文件中。通过绘制方式来实现。

最终效果图

源文件长这样，串信息是以逗号隔开

export const XzqPosArr = `108.622001617963 29.8682975813846,108.617103555458 29.8696002688859,108.611000055452 29.8668899563833,108.603111242945 29.8645400813811,108.59780118044 29.8656101438821,108.592697117935 29.865419393882,108.588203430431 29.8603992688773,108.583511367927 29.8572006438743,108.580100992924 29.8532505188706,108.577903742921 29.8487072063664,108.573989867918 29.8444308938624,108.574501055418 29.8339996438527,108.570098867914 29.8296127063486,108.563201930408 29.8256092063449,108.552597055398 29.8212203938408,108.546798680392 29.8174323938373,108.542289742888 29.8108692063312,108.532302867879 29.7932892063148,108.521301242869 29.7785892688011,108.516891492865 29.7635498312871,108.517501805365 29.753759393778,108.527198805374 29.7490597062736,108.531089805378 29.7414302687665,108.527999867875 29.7367897062622,108.518699617866 29.7339401437595,108.502998367852 29.7357406437612,108.496299742845 29.7353992687609,108.494697555344 29.7319908312577,108.503402680352 29.728059768754,108.507789617856 29.7177905812445,108.503898617853 29.711889268739,108.497100805346 29.7106495187378,108.487709055337 29.7189407062456,108.471801742823 29.7296390812555,108.455200180307 29.7401199562653,108.449996930302 29.7437591437687,108.446601867799 29.7411823312663,108.438796992792 29.7357292062612,108.431198117785 29.7382297687635,108.428108242782 29.7442417062691,108.432899492786 29.751598331276,108.438011180291 29.7667503312901,108.438499430292 29.7775192063001,108.432502742786 29.7801093938025,108.421798680276 29.7765273937992,108.41580199277 29.7755794562983,108.411399867766 29.7822093938045,108.411697367767 29.7947902688162,108.418296805273 29.8087692063292,108.418098430273 29.8147297063348,108.413589492768 29.8193893313391,108.406303430262 29.824689893844,108.399497992755 29.835430143854,108.392097492748 29.839670206358,108.386810305244 29.8346004563533,108.387611367744 29.8216495813412,108.381889367739 29.8172798313371,108.368110680226 29.8199100188396,108.36139680522 29.8247184563441,108.36129761772 29.8313598938502,108.365196242723 29.8412608938595,108.374603242732 29.8512992688688……`

文件导入
import { XzqPosArr } from "@/utils/XzqPosArr";

启动函数

    XZQPolygon() {
      let _points = this._transPoints(XzqPosArr);
      _points = [_points];
      var polygonFeature = new ol.Feature({ geometry: new ol.geom.Polygon(_points) }); //路线
      polygonFeature.setId('XZQPolyline')
      this._checkVectorSource("XZQPolygonSource"); // 创建source
      this._checkLayerVector("XZQPolygonVector", "XZQPolygonSource"); //创建layer
      this.XZQPolygonSource.addFeature(polygonFeature);
      this.XZQPolygonVector.setStyle(this.XZQPolygonStyle);
    }

辅助函数
源文件格式需要我们操作一下，使用正则转化一下进行处理。

    _transPoints(points) {
      let a = points.replace(/,/g, ';');
      let b = a.replace(/\s/g, ',');
      let arr = b.split(';');
      let point = [];
      arr.forEach(item => {
        let newPoint = item.split(',');
        point.push(newPoint);
      })
      let _points = point.map(item => {
        item = [parseFloat(item[0]), parseFloat(item[1])];
        item = ol.proj.transform(item, 'EPSG:4326', 'EPSG:3857');
        return item;
      });
      return _points;
    },
    _checkVectorSource(source) {
      //如果没有VectorSource则进行创建
      if (this[source] === null) {
        this[source] = initDrawElements.DrawVectorSource();
      }
    },
    _checkLayerVector(layer, source) {
      //如果没有LayerVector则进行创建
      if (this[layer] === null) {
        this[layer] = initDrawElements.LayerVector(layer);
        this[layer].setSource(this[source]);
        this.map.addLayer(this[layer]);
      }
    }

样式
这个是写录在vue 计算属性当中，直接使用

    XZQPolygonStyle() {
      return new ol.style.Style({
        stroke: new ol.style.Stroke({ color: "blue", width: 1 }), 
        fill: new ol.style.Fill({ color: 'rgba(255, 255, 255, 0.3)' })
        });
    }

创作不易，转载注明