Echarts结合高德地图(Vue版本)
2021/7/15 16:43:43
直接引用版本:http://www.sqber.com/articles/echarts-with-gaode-map.html
说明
这个是直接引用版本的 Vue 版
介绍
echarts 对高德地图的扩展有: echarts-amap、echarts-extension-amap。
我们的对应的版本是 echarts-amap 版本。项目地址是:https://github.com/billy-poon/echarts-amap
不过这个项目不怎么更新了。
而项目 echarts-extension-amap 一直在更新和维护。
首先搭建一个初始化的 Vue 项目。使用的版本是 2.x.x 的。
添加 echarts 和 echarts-amap 插件
npm install -S echarts-amap
npm install echarts
两者的版本是
"echarts": "^4.9.0",
"echarts-amap": "^1.4.15-rc.1",
在项目中新增组件 MigrationMap.Vue,内容如下:
(说明:也是动态加载的 高德地图 js,)
<template>
<div>
<div :id="id" class="dbox"></div>
</div>
</template>
<script>
import { guid } from "@/assets/js/util.js";
import echarts from 'echarts'
require('echarts-amap')
export default {
name: "MigrationMap",
props: {
},
data() {
return {
id: guid(),
mapObj: null,
};
},
mounted() {
},
beforeMount() {
var obj = document.getElementById('amapjs')
if(obj){
let self = this
// 先让它加载完
setTimeout(() => self.initMap(self), 1000)
}else{
var url =
"https://webapi.amap.com/maps?v=1.4.14&key=ec817c7d9a73dae44ddbb3eb9d032a33&callback=onLoad";
var jsapi = document.createElement("script");
jsapi.charset = "utf-8";
jsapi.src = url;
jsapi.id = "amapjs";
document.head.appendChild(jsapi);
let self = this
window.onLoad = function(){ self.initMap(self) }
}
},
destroyed() {
var obj = document.getElementById("amapjs")
if(obj){
document.getElementsByTagName("head")[0].removeChild(obj)
}
},
watch: {
},
methods: {
initMap(self){
var myChart = echarts.init(document.getElementById(self.id));
myChart.setOption({
title : {
text: '模拟迁徙',
subtext: '数据纯属虚构',
left: 'center',
textStyle : {
color: '#fff'
}
},
amap: {
maxPitch: 60,
pitch: 10, //45 俯仰角
viewMode: '3D',
zoom: 5.5,
expandZoomRange: true,
zooms: [3, 20],
mapStyle: 'amap://styles/darkblue', //地图主题
center: [110,33], //中心点
rotation: 0, //顺时针旋转角度
resizeEnable: true,
},
animation: false,
series: []
})
var map = myChart.getModel().getComponent('amap').getAMap();
var layer = myChart.getModel().getComponent('amap').getLayer();
AMap.plugin(["AMap.ControlBar"], function() {
var bar = new AMap.ControlBar();
map.addControl(bar);
})
AMap.plugin(["AMap.ToolBar"], function() {
map.addControl(new AMap.ToolBar());
});
AMap.event.addListener(map,'zoomend',function(){
console.log('当前缩放级别:' + map.getZoom());
console.log('俯视视角' + map.getPitch());
console.log('俯视视角' + map.getPitch());
});
var series = [
{
"name": "上海 Top10",
"coordinateSystem": "amap",
"type": "lines",
"zlevel": 1,
"effect": {
"show": true,
"period": 6,
"trailLength": 0.7,
"color": "#fff",
"symbolSize": 3
},
"lineStyle": {
"normal": {
"color": "#a6c84c",
"width": 0,
"curveness": 0.2
}
},
"data": [
{
"fromName": "上海",
"toName": "包头",
"coords": [
[
121.4648,
31.2891
],
[
109.853634,40.651412
]
],
"value": 95
}
]
},
{
"name": "上海 Top10",
"coordinateSystem": "amap",
"type": "lines",
"zlevel": 2,
"symbol": [
"none",
"arrow"
],
"symbolSize": 10,
"lineStyle": {
"normal": {
"color": "#a6c84c",
"width": 1,
"opacity": 0.6,
"curveness": 0.2
}
},
"data": [
{
"fromName": "上海",
"toName": "包头",
"coords": [
[
121.4648,
31.2891
],
[
109.853634,40.651412
]
],
"value": 95
}
]
},
{
"name": "上海 Top10",
"type": "effectScatter",
"coordinateSystem": "amap",
"zlevel": 2,
"rippleEffect": {
"brushType": "stroke"
},
"label": {
"normal": {
"show": true,
"position": "bottom",
"formatter": "{b}"
}
},
"itemStyle": {
"normal": {
"color": "#a6c84c"
}
},
"data": [
{
"name": "包头",
"value": [
109.853634,40.651412,
95
]
}
]
}
];
myChart.setOption({
series: series
});
//下面是确保高德地图渲染的时候,echarts同时也需要再次渲染一次,保持位置的同步
layer.render = function() {
// let series = myChart.getOption().seriesIndexes;
// myChart.setOption({
// series: []
// });
myChart.setOption({
series: series
});
console.log('当前缩放级别:' + map.getZoom());
console.log('俯视视角:' + map.getPitch());
console.log('顺时针:' + map.getRotation());
// var map = new AMap.Map(self.id, {
// resizeEnable: true, //是否监控地图容器尺寸变化
// zoom: 11, //初始化地图层级
// center: [116.397428, 39.90923] //初始化地图中心点
// });
// // eslint-disable-next-line no-undef
// AMap.plugin('AMap.ToolBar', function () {//异步加载插件
// // eslint-disable-next-line no-undef
// var toolbar = new AMap.ToolBar();
// map.addControl(toolbar);
// });
// self.mapObj = map;
}
},
test(){
}
}
};
</script>
<style scoped>
.dbox {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border: 0px solid green;
}
</style>
完
扫码分享
版权说明
作者:SQBER
本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
{0}
{5}
{1}
{2}回复
{4}
*昵称:
*邮箱:
个人站点:
*想说的话: