vue + openlayers 实现省市区的描边界与区域填充

效果展示：

npm install ol

geoJson提供边界数据的网址，自行选择需要的区域的边界，下载json数据
geo数据源

将下载的数据源放到新建的province.json 文件里面，在最外层加上[] 数组，每一条需要展示的数据源为一个对象（以数组对象的形式存放）

注意：若是只展示城市，在下载数据源时，一定要取消包含子区域按钮，再下载。

复制即可查看效果

<template>
  <div class="openlayers">
    <div id="Map" ref="map"></div>
  </div>
</template>

<script>
import "ol/ol.css";
import TileLayer from "ol/layer/Tile";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import XYZ from "ol/source/XYZ";
import { Map, View, Feature, ol } from "ol";
import { Style, Stroke, Fill } from "ol/style";
import { Polygon, MultiPolygon } from "ol/geom";
import { defaults as defaultControls, OverviewMap } from "ol/control";

import areaGeo from "@/tools/provinces.json";

export default {
  data() {
    return {
      map: null,
      routeLayer: null,
      routeFeature: null,
      lineData: [],
    };
  },
  created() {},
  mounted() {
    this.initMap();
    this.addArea(areaGeo);
  },
  methods: {
    // 初始化地图
    initMap() {
      this.map = new Map({
        target: "Map",
        controls: defaultControls({
          zoom: true,
        }).extend([]),
        layers: [
          new TileLayer({
            source: new XYZ({
              url:
                "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
            }),
          }),
        ],
        view: new View({
          projection: "EPSG:4326",
          center: [118.792207,32.133476],
          zoom: 9,
          maxZoom: 19,
          minZoom: 5,
        }),
      });
    },
    // 设置区域
    addArea(geo = []) {
      if (geo.length == 0) {
        return false;
      }
      let features = [];
      geo.forEach((g) => {
        console.log(g);

        let lineData = g.features[0];
        let routeFeature = "";
        console.log(lineData.geometry.type);
        if (lineData.geometry.type == "MultiPolygon") {
          routeFeature = new Feature({
            geometry: new MultiPolygon(lineData.geometry.coordinates),
          });
        } else if (lineData.geometry.type == "Polygon") {
          routeFeature = new Feature({
            geometry: new Polygon(lineData.geometry.coordinates),
          });
        }
        routeFeature.setStyle(
          new Style({
            fill: new Fill({
              color: "#4e98f444", //填充颜色
            }),
            stroke: new Stroke({
              width: 3, //边界宽度
              color: [71, 137, 227, 1], //边界颜色
            }),
          })
        );
        features.push(routeFeature);
      });
      // 设置图层
      let routeLayer = new VectorLayer({
        source: new VectorSource({
          features: features,
        }),
      });
      // 添加图层
      this.map.addLayer(routeLayer);
    },
  },
};
</script>

<style lang="less" scoped>
#Map {
  width: 100vw;
  height: 100vh;
}
.openlayers /deep/ .ol-control button {
    font-size: 3em;
}
</style>

下一篇添加了 点击按钮 对应展示某个行政区域的功能