openlayer + echarts 實現地圖劃線

   之前分享過 maptalks + echarts 實現地圖劃線 的實現原理，這裏在分享一下openlayer +echarts 實現劃線的實現。 

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

<script>
import Map from 'ol/Map'
import 'ol/ol.css'
import View from 'ol/View'
import TileLayer from 'ol/layer/Tile'
import XYZ from 'ol/source/XYZ'
import ADLayer from 'openlayers_echart'
import echarts from 'echarts'
export default {
  name: 'testopenlayer',
  components: {},
  props: {},
  data () {
    return {
      map: null
    }
  },
  mounted () {
    this.initMap()
    this.drawLine()
  },
  methods: {

    initMap () {
      let layer = new TileLayer({
        title: '天地圖衛星',
        type: 'base',
        visible: true,
        source: new XYZ({
          url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}.jpg'
        })
      })
      this.map = new Map({
        target: 'map',
        view: new View({
          projection: 'EPSG:4326', // 使用這個座標系
          center: [113.14, 40.25], // 北京
          zoom: 8
        })
      })
      this.map.addLayer(layer)
    },

    drawLine () {
      var that = this
      var lines = [{ 'fromName': '北京', 'toName': '大同', 'coords': [[113.14, 40.25], [116.23, 40.22]] }]
      var option = {
        series: [{
          name: '',
          type: 'lines',
          polyline: true,
          lineStyle: {
            normal: {
              color: 'red',
              width: 2,
              opacity: 0.8,
              curveness: 0.2
            }
          },
          data: lines
        }]
      }
      var oe = new ADLayer(option, that.map, echarts)
      oe._zIndex = 1
      oe.render()
    }
  }
}
</script>
<style rel='stylesheet/scss' lang='scss' scoped>
#map {
  width: 100%;
  height: 100%;
}
</style>

當然 也可不用echarts， 直接使用openlayer 也可實現劃線，也很簡單，用 ol.geom.LineString() 即可。

對於實現一些簡單的效果 maptalks 感覺還是很不錯的， 對於實現一些比較複雜的效果 openlayer 相對來說更容易實現，leaflet 也是不錯的，唯一一點就是經緯度是反着來的。