openlayer + echarts 实现地图划线_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 也是不错的，唯一一点就是经纬度是反着来的。