高德地图+Echarts+Vue
@[TOC]高德地图+Echarts+Vue高德地图+Echarts+Vue先上效果图1.创建后vue项目后下载echarts和高德地图插件npm install amap-echartsnpm install echarts2.在index.html引入高德地图js<script type="text/javascript" src="https://webapi.amap.com/map
·
@[TOC]高德地图+Echarts+Vue
高德地图+Echarts+Vue
先上效果图
1.创建后vue项目后下载echarts和高德地图插件
npm install amap-echarts
npm install echarts
2.在index.html引入高德地图js
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=4804fa7e0e5679981ab043af8ba08e13&plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.Geocoder"></script>
3.main.js
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
Vue.config.productionTip = false
import VueAMap from 'vue-amap';
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
// 高德key
key:' 4804fa7e0e5679981ab043af8ba08e13',
// key: 'd6eabbd08f89ccfb74278b36ab6342567', // 自己到官网申请，我随便写的
// 插件集合 （插件按需引入）
//plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor', 'AMap.MarkerClusterer'],
v: '1.4.15', // 我也不知道为什么要写这个，不写项目会报错，而且我随便写的，跟我下载的版本对应不了
uiVersion: '1.0.11' // ui版本号，也是需要写
})
4.dom
<el-amap :events="events" :zoom="zoom" :zooms="[4,12]" :center="center" :map-style="mapStyle" style="width:100%;height:1000px;" />
5.直接上代码
createScatterChart方法绘制地图和迁徙图
areaBG地图覆盖只展示中国
import AMapEcharts from 'amap-echarts';
import macarons from "@/robotjs/macarons.js";
import { areass } from '../robotjs/lnglat.js';
// @ is an alias to /src
export default {
name: 'Home',
mounted(){
/* console.log(this.maps)
this.areaBG(this.maps, ['中国']); */
},
data() {
return {
zoom: 4, //地图开始数据
center: [105.397428, 38.10923], //中心点
mapStyle: 'amap://styles/869405a96930ed9a8d1f9c58d14d5b27',
maps: '',
events: {
init: map => {
this.maps = map
this.createScatterChart(this.maps)
}
},
flyLine: [ //地图插件数据
{coords: [[116.496437,39.913523,'北京'], [123.499706,41.857793,'北京1']]},
{coords: [[116.496437,39.913523,'北京'], [86.113232,43.684254,'北京2']]},
{coords: [[116.496437,39.913523,'北京'], [87.343701,35.720308,'北京3']]},
{coords: [[116.496437,39.913523,'北京'], [101.406201,24.177443,'北京4']]},
{coords: [[116.496437,39.913523,'北京'], [111.249951,24.976714,'北京5']]},
{coords: [[116.496437,39.913523,'北京'], [107.206982,33.843608,'北京6']]},
{coords: [[116.496437,39.913523,'北京'], [115.468701,43.557002,'北京7']]},
{coords: [[116.496437,39.913523,'北京'], [107.031201,37.134586,'北京8']]},
{coords: [[116.496437,39.913523,'北京'], [99.648388,38.522914,'北京9']]},
{coords: [[116.496437,39.913523,'北京'], [124.081982,49.361353,'北京10']]},
],
goals: [ //地图插件数据
[116.496437,39.913523,'北京'],
[123.499706,41.857793,'北京1'],
[86.113232,43.684254,'北京2'],
[87.343701,35.720308,'北京3'],
[101.406201,24.177443,'北京4'],
[111.249951,24.976714,'北京5'],
],
goals2: [ //地图插件数据
// [114.0729538,36.60151672,'邯郸市'],
[107.206982,33.843608,'北京6'],
[115.468701,43.557002,'北京7'],
[107.031201,37.134586,'北京8'],
[99.648388,38.522914,'北京9'],
[124.081982,49.361353,'北京10']
], //地图结束数据
}
},
methods:{
areaBG(map, cityName) { //地图覆盖方法
AMap.service('AMap.DistrictSearch', function() {
let opts = {
subdistrict: 0, // 返回下一级行政区
extensions: 'all', // 返回行政区边界坐标组等具体信息
level: 'city' // 查询行政级别为市
};
// 实例化DistrictSearch
let district = new AMap.DistrictSearch(opts);
district.setLevel('district');
// 行政区查询
district.search(cityName[0], function(status, result) {
// 获取边界信息
let polygons = [];
let outer = [
new AMap.LngLat(-360, 90, true),
new AMap.LngLat(-360, -90, true),
new AMap.LngLat(360, -90, true),
new AMap.LngLat(360, 90, true)
];
let holes = result.districtList[0].boundaries;
let pathArray = [outer];
pathArray.push.apply(pathArray, holes);
map.clearMap(); //清除地图上的标记
let polygon = new AMap.Polygon({
map: map,
strokeWeight: 1,
path: pathArray,
fillOpacity: 1,
fillColor: '#181c3f', // 遮罩背景色黑色
strokeColor: '#181c3f', //城市边界颜色
});
polygons.push(polygon);
});
});
},
async createScatterChart(map) { //加载地图
this.ae = await AMapEcharts.init(map, macarons);
let planePath =
'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
let _this = this;
let thats = this;
_this.ae.setOption({
tooltip: {
trigger: 'item',
formatter: function(item) { //滑过地图的点
}
},
animation: true,
series: [
// 流线
{
coordinateSystem: "amap", // 该系列使用的坐标系是高德地图的坐标系
type: "lines", // 该类型用于地图上路线的绘制
zlevel: 1, // 相当于z-index
zooms: [4, 20],
effect: { // 线特效的配置
show: true, // 是否显示特效
period: 7, // 特效动画的时间
symbol: planePath,
trailLength: 0, // 特效尾迹的长度 0-1
color: "#409EFF", // 特效的颜色
symbolSize: 15 // 特效的大小
},
lineStyle: { // 线的颜色
normal: {
color: "#4b97d3",
width: 2.4,
curveness: 0.2
}
},
data: _this.flyLine,
},
// 目标点
{
name: '目标点',
type: "scatter",
// 使用高德地图坐标系
coordinateSystem: "amap",
// 数据格式跟在 geo 坐标系上一样，每一项都是 [经度，纬度，数值大小，其它维度...]
data: _this.goals,
symbol: planePath,
symbolSize: [20, 30],
encode: {
value: 2
},
label: {
normal: {
formatter: "{b}",
position: 'right',
show: false
},
emphasis: {
areaColor: '#2a333d',
show: true
}
},
itemStyle: {
normal: {
color: 'blue'
}
}
},
{
name: '目标点',
type: "scatter",
// 使用高德地图坐标系
coordinateSystem: "amap",
// 数据格式跟在 geo 坐标系上一样，每一项都是 [经度，纬度，数值大小，其它维度...]
data: _this.goals2,
symbol: planePath,
symbolSize: [20, 30],
encode: {
value: 2
},
label: {
normal: {
formatter: "{b}",
position: 'right',
show: false
},
emphasis: {
areaColor: '#2a333d',
show: true
}
},
itemStyle: {
normal: {
color: 'blue'
}
}
}
],
}, true)
_this.ae.on("click", function(param) { //点击地图上的点
})
_this.areaBG(_this.maps, ['中国']);
},
}
}
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献3条内容
所有评论(0)