之前分享过 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 也是不错的,唯一一点就是经纬度是反着来的。