vue中eharts集合高德地圖amap採坑記錄

頁面須要引入javascript

<script language="javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=高德key&plugin=Map3D,AMap.DistrictSearch,AMap.DistrictLayer"></script>
複製代碼

在vue.config.js的module.exports的chainWebpack中加入內容html

chainWebpack: config => {
    config.externals({ AMap: 'AMap' }); // 引入高德地圖
    config.resolve.alias
        .set('@', resolve('src')) // key,value自行定義，好比.set('@@', resolve('src/components'))
        .set('_c', resolve('src/views/components'))
},
複製代碼

這樣在須要引入AMap的地方能夠直接vue

import AMap from 'AMap';
複製代碼

若是你的項目，須要在不能連外網的狀況下，繼續訪問其餘功能。能夠在打包以後的app.js文件中，把e.exports=AMap改成java

try{
    e.exports=AMap
}catch{
    
}
複製代碼

須要安裝echarts和echarts-extension-amapweb

npm i echarts echarts-extension-amap --save
複製代碼

main.js裏引入apache

require('echarts-extension-amap');
import 'echarts-extension-amap';//或者，用import在打包以後會報錯，目前還沒發現緣由
複製代碼

參考echarts的一篇文檔全國主要城市空氣質量-百度地圖npm

對應組件引入api

import * as echarts from 'echarts';
import AMap from 'AMap';
複製代碼

自定義散點的懸浮框內容markdown

tooltip : {
    trigger: 'item',
    formatter({seriesName, data}) {
        let item = data.value[2];
        return `${seriesName}<br />${item.channelName} ${item.businessId}`
    }
},
複製代碼

地圖實例化以後，想要再調用地圖的相關方法，能夠參考下列操做，限制地圖的顯示範圍app

this.dom = echarts.init(this.$refs.container);
this.dom.setOption(option);//初始化地圖

var amapComponent = this.dom.getModel().getComponent('amap');
var amap = amapComponent.getAMap();
amap.setLimitBounds(amap.getBounds());//限制住地圖的顯示範圍
複製代碼

若是echart內容中，地圖上的散點變化頻率很高，能夠用echarts.setOption方法，只改變對應的option，這樣就不用每回從新實例化amap了。

series中設置animation: false,能夠在拖動地圖時，散點不在晃動。設置symbol: 'image://'+onLinePic,onLinePic爲一個base64編碼的字符串，可用圖片設置散點。

amap的相關設置

amap: {
    resizeEnable: true,//是否監控地圖容器尺寸變化
    center: [121.487919, 31.266058],//初始化地圖中心點
    disableSocket: true,
    dragEnable: true, // 拖拽平移
    rotateEnable: false, // 旋轉
    viewMode: '3D',
    showLabel: true,
    labelzIndex: 130,
    pitch: 0, // 傾斜角度
    features: ['bg','point'],//設置地圖上顯示的要素
    zoom: 9.48, //初始化地圖層級
    zooms: [9, 15],//限制縮放等級
},
複製代碼

高德地圖api