基于Vue+Openlayer实现动态加载geojson的方法

当我们需要在地图上展示大批量地理信息时，我们通常会选择使用地图开发库OpenLayers。OpenLayers是一款开源的JavaScript地图开发库，拥有众多强大的地图展示和操作功能。而在使用Vue.js与OpenLayers相结合的过程中，我们就可以在地图上动态加载geojson数据，实现非常炫酷的地图数据展示效果。以下是详细讲解基于Vue.js和OpenLayers实现动态加载GeoJSON的方法的攻略。

前置知识

• Vue.js基础知识
• OpenLayers基础知识
• GeoJSON格式

实现步骤

步骤一：安装OpenLayers和Vue.js

首先需要安装OpenLayers和Vue.js。我们可以使用npm命令来进行安装：

npm install --save ol vue

步骤二：创建地图组件

接下来需要创建一个Vue组件用于展示地图。可以参考如下代码：

<template>
  <div id="map"></div>
</template>

<script>
import ol from 'openlayers';


export default {
  name: 'map',
  data () {
    return {
      map: {}
    }
  },
  mounted () {
    this.map = new ol.Map({
      target: 'map',
      layers: [
        new ol.layer.Tile({
          source: new ol.source.OSM()
        })
      ],
      view: new ol.View({
        center: ol.proj.fromLonLat([120, 30]),
        zoom: 8
      })
    })
  }
}
</script>

上述代码创建了一个地图组件，并在组件中创建了一个OpenLayers地图对象，并在模板中设置了地图容器的id为“map”，以便地图能够正常显示。

步骤三：动态加载GeoJSON数据

接下来需要在地图中动态加载GeoJSON数据。我们可以使用Vue.js提供的生命周期函数created来实现。在created生命周期函数中，我们定义一个数据源，并通过ajax请求获取geojson数据，并将数据添加到地图图层中。

<template>
  <div id="map"></div>
</template>

<script>
import ol from 'openlayers';

export default {
  name: 'map',
  data () {
    return {
      map: {},
      geoJSON: null
    }
  },
  created () {
    // 定义一个ol的数据源
    const vectorSource = new ol.source.Vector({
      format: new ol.format.GeoJSON()
    })

    // ajax请求GeoJSON数据
    fetch('/geojson-data')
      .then(response => response.json())
      .then(data => {
        this.geoJSON = data
        vectorSource.addFeatures(
          new ol.format.GeoJSON().readFeatures(data)
        )
      })

    // 创建一个矢量图层
    const vectorLayer = new ol.layer.Vector({
      source: vectorSource
    })

    // 将矢量图层添加到地图中
    this.map = new ol.Map({
      target: 'map',
      layers: [
        vectorLayer
      ],
      view: new ol.View({
        center: ol.proj.fromLonLat([120, 30]),
        zoom: 8
      })
    })
  }
}
</script>

在上面的代码中，我们首先定义了一个OpenLayers的数据源，然后通过fetch请求获取geojson数据，并将数据添加到数据源中。接着，我们创建一个矢量图层，并将数据源添加到图层中，在最后将图层添加到地图中。这样，我们就完成了动态加载geojson数据的操作。

示例说明1：使用GeoJSON数据绑定到Vue.js模板

我们可以在Vue.js的模板中动态展示基于GeoJSON数据。例如，我们可以添加如下代码：

<template>
  <div id="map"></div>
  <ul>
    <li v-for="feature in geoJSON.features">
      {{ feature.properties.name }}
    </li>
  </ul>
</template>

这样我们就可以在地图之外动态展示所有的地图数据。

示例说明2：制作实时公交路线图

在这个示例中，我们将通过Vue.js和OpenLayers来创建一个实时公交路线图。我们需要使用Stamen Maps API和武汉市公交公开数据。

首先，我们需要在模板中添加如下代码：

<template>
  <div id="map">
    <div id="route-layer" class="ol-popup">
      <div class="route-name">公交路线：{{ selectedRoute.name }}</div>
      <ul class="segment-list">
        <li v-for="segment in selectedRoute.segments">
          <span class="route-name">{{ segment.name }}</span>
          <span class="distance">{{ segment.distance }}米</span>
        </li>
      </ul>
    </div>
  </div>
</template>

上述代码创建了一个用于展示公交路线图的标记层，并在模板中添加了一些路线名称和路线片段。

接着，我们可以编写如下代码来动态获取公交数据

<script>
import ol from 'openlayers';

export default {
  name: 'map',
  data () {
    return {
      map: {},
      routes: [],
      selectedRoute: null
    }
  },
  created () {
    // 定义一个ol的数据源
    const vectorSource = new ol.source.Vector({
      format: new ol.format.GeoJSON()
    })

    // 使用ajax获取路线数据
    fetch('/bus-data')
      .then(response => response.json())
      .then(data => {
        data.forEach(route => {
          // 将路线数据存储到路线列表中
          this.routes.push(route)

          // 将路线数据添加到数据源中
          vectorSource.addFeatures(
            new ol.format.GeoJSON().readFeatures(route.geojson)
          )
        })
      })

    // 创建一个矢量图层
    const vectorLayer = new ol.layer.Vector({
      source: vectorSource,
      style: feature => {
        // 获取路线颜色
        const color = feature.getProperties().color

        // 创建线样式
        return new ol.style.Style({
          stroke: new ol.style.Stroke({
            color: color,
            width: 2
          })
        })
      }
    })

    // 绑定鼠标事件
    vectorLayer.on('click', event => {
      // 获取当前路线
      this.selectedRoute = this.routes.find(route => route.id === event.feature.getProperties().id)

      // 显示标记层
      const coordinate = event.coordinate
      const frameState = this.map.frameState_
      document.getElementById('route-layer').style.display = 'block'
      document.getElementById('route-layer').style.top = `${frameState.size[1] - coordinate[1] + 20}px`
      document.getElementById('route-layer').style.left = `${coordinate[0] - 100}px`
    })

    // 将矢量图层添加到地图中
    this.map = new ol.Map({
      target: 'map',
      layers: [
        vectorLayer,
        new ol.layer.Tile({
          source: new ol.source.Stamen({
            layer: 'toner-lite'
          })
        })
      ],
      view: new ol.View({
        center: ol.proj.fromLonLat([114.3053, 30.5931]),
        zoom: 14
      })
    })
  }
}
</script>

在上述代码中，我们首先通过ajax获取公交数据，并将数据添加到OpenLayers的数据源中。然后，我们创建了一个矢量图层，并绑定了一个点击事件。当用户点击路线时，我们将选择的路线展示在标记层中。

结语

通过Vue.js和OpenLayers的结合，我们可以轻松的动态加载并处理大量的地理信息数据，实现非常炫酷的地图数据展示效果。实际上，我们还可以使用更多的Vue.js组件和OpenLayers的功能，制作出高质量的GIS应用程序。