2000字范文,分享全网优秀范文,学习好帮手!
2000字范文 > 如何在vue项目中使用echarts和高德地图绘制折线和热力图

如何在vue项目中使用echarts和高德地图绘制折线和热力图

时间:2021-12-06 19:26:32

相关推荐

如何在vue项目中使用echarts和高德地图绘制折线和热力图

1.先下载相关的依赖,这里echarts和高德地图放到一起。(高德地图需要先去申请一个key)

// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App from './App'import router from './router'import Vuex from 'vuex'import store from './store/index'import VueResource from 'vue-resource'import echarts from 'echarts'import VueAMap from 'vue-amap'import './assets/fonts/fonts.css'import './assets/fonts/reset.css'Vue.use(VueAMap)Vue.prototype.$echarts = echartsVue.config.productionTip = falseVue.use(Vuex)Vue.use(VueResource)VueAMap.initAMapApiLoader({key:'你申请的key',plugin: ["AMap.Autocomplete", //输入提示插件"AMap.PlaceSearch", //POI搜索插件"AMap.Scale", //右下角缩略图插件 比例尺"AMap.OverView", //地图鹰眼插件"AMap.ToolBar", //地图工具条"AMap.MapType", //类别切换控件,实现默认图层与卫星图、实施交通图层之间切换的控制"AMap.PolyEditor", //编辑 折线多,边形"AMap.CircleEditor", //圆形编辑器插件"AMap.Geolocation", //定位控件,用来获取和展示用户主机所在的经纬度位置"AMap.Heatmap"//热力图插件],v: '1.4.4',uiVersion: '1.0'})/* eslint-disable no-new */new Vue({el: '#app',router,store,components: { App },template: '<App/>'})

2.在需要使用echarts的页面引入

<divref="qiji":data-title="allTitle.qiji"class="chart qiji":style="{width:chartWidth,height:chartHeight}"></div>import echarts from "echarts";相应的options这里就不贴了 可以配合watch进行动态绘制

3.这里吧地图组件的完整代码贴过来

<template><div class="containers"><template><div class="amap-wrapper"><el-amap class="cont":amap-manager="amapManager":vid="'amap-vue'":zoom="zoom":center="center":events="events"><!-- <el-amap-polygon v-for="(polygon, index) in polygons" :vid="index" :path="polygon.path" :strokeWeight="polygon.strokeWeight" :fillColor="polygon.fillColor" :strokeColor="polygon.strokeColor" :fillOpacity="polygon.fillOpacity" :strokeOpacity="polygon.strokeOpacity" :draggable="polygon.draggable" :key="index"></el-amap-polygon> --></el-amap><div id="container"></div></div></template><!--amap-manager: 地图管理对象vid:地图容器节点的IDzooms: 地图显示的缩放级别范围,在PC上,默认范围[3,18],取值范围[3-18];在移动设备上,默认范围[3-19],取值范围[3-19]center: 地图中心点坐标值plugin:地图使用的插件events: 事件--><!-- 标记 --></div></template><style lang="css">.amap-wrapper {width: 1139px;height: 511px;}</style><script>import {AMapManager,lazyAMapApiLoaderInstance} from 'vue-amap'let amapManager = new AMapManager()export default {name:'HMap',data () {return {address: null,amapManager,center: [121.496837,31.048251],zoom: 14,mapData:null,polygons:[{strokeWeight: 2, strokeColor: "#19A4EB", strokeOpacity: 0.8, fillColor: "green", fillOpacity:0.1,draggable: false,path: [[121.490164,31.058288], [121.508102,31.063031],[121.510162,31.063692], [121.511536,31.06428],[121.511793,31.059685], [121.512609,31.045604], [121.503425,31.046266], [121.502953,31.048398], [121.50218,31.057296],[121.49055,31.054465],[121.491237,31.053325], [121.486602,31.052296], [121.486945,31.050751], [121.486988,31.049979], [121.487374,31.049575], [121.488833,31.047185], [121.48922,31.047038], [121.490336,31.041192], [121.490507,31.040089], [121.49085,31.039647], [121.491323,31.03825], [121.491451,31.036853], [121.492138,31.035014], [121.493039,31.033176], [121.487804,31.031263], [121.486774,31.033801], [121.486087,31.03939], [121.485701,31.039721], [121.485872,31.041265], [121.485486,31.042479], [121.485357,31.045861], [121.484413,31.048509], [121.48407,31.051376], [121.484113,31.051965], [121.48334,31.052516], [121.483169,31.053325], [121.482739,31.05406], [121.481581,31.057516], [121.480722,31.060604], [121.480894,31.061303], [121.480594,31.062295], [121.480207,31.062736], [121.479735,31.06406], [121.479778,31.064464], [121.48201,31.065052], [121.482225,31.065236], [121.483512,31.065383], [121.484027,31.065677], [121.48849,31.066927], [121.490207,31.058104], [121.490207,31.058215]], },],events: {init (o) {o.setMapStyle('amap://styles/31444436f4e6420ee2c6b4ecec90f75f');//自定义的高德地图的样式 },},}},watch: {//观察seriesData的变化mapData: {handler(newVal) {lazyAMapApiLoaderInstance.load().then(() => {this.initMap()});},deep: true //对象内部属性的监听,关键。},},created() {// this.getMapData()},mounted() {this.getMapData()lazyAMapApiLoaderInstance.load().then(() => {this.initMap()});this.yanTime()},methods: {getMapData(){this.$http.post("/api/home/heatMapData").then(data => {console.log(data)//这里是热力图数据this.mapData = data.body});},//延时执行测试yanTime(){setInterval(() => {this.getMapData()}, 600000);},initMap() {var that = thislet map = new AMap.Map("amap-vue", {resizeEnable: false,center: [121.496837,31.048251],zoom: 14});map.setMapStyle('amap://styles/31444436f4e6420ee2c6b4ecec90f75f')//绘制折线var path = [new AMap.LngLat(121.490164,31.058288), new AMap.LngLat(121.508102,31.063031),new AMap.LngLat(121.510162,31.063692), new AMap.LngLat(121.511536,31.06428),new AMap.LngLat(121.511793,31.059685), new AMap.LngLat(121.512609,31.045604), new AMap.LngLat(121.503425,31.046266), new AMap.LngLat(121.502953,31.048398), new AMap.LngLat(121.50218,31.057296),new AMap.LngLat(121.49055,31.054465),new AMap.LngLat(121.491237,31.053325), new AMap.LngLat(121.486602,31.052296), new AMap.LngLat(121.486945,31.050751), new AMap.LngLat(121.486988,31.049979), new AMap.LngLat(121.487374,31.049575), new AMap.LngLat(121.488833,31.047185), new AMap.LngLat(121.48922,31.047038), new AMap.LngLat(121.490336,31.041192), new AMap.LngLat(121.490507,31.040089), new AMap.LngLat(121.49085,31.039647), new AMap.LngLat(121.491323,31.03825), new AMap.LngLat(121.491451,31.036853), new AMap.LngLat(121.492138,31.035014), new AMap.LngLat(121.493039,31.033176), new AMap.LngLat(121.487804,31.031263), new AMap.LngLat(121.486774,31.033801), new AMap.LngLat(121.486087,31.03939), new AMap.LngLat(121.485701,31.039721), new AMap.LngLat(121.485872,31.041265), new AMap.LngLat(121.485486,31.042479), new AMap.LngLat(121.485357,31.045861), new AMap.LngLat(121.484413,31.048509), new AMap.LngLat(121.48407,31.051376), new AMap.LngLat(121.484113,31.051965), new AMap.LngLat(121.48334,31.052516), new AMap.LngLat(121.483169,31.053325), new AMap.LngLat(121.482739,31.05406), new AMap.LngLat(121.481581,31.057516), new AMap.LngLat(121.480722,31.060604), new AMap.LngLat(121.480894,31.061303), new AMap.LngLat(121.480594,31.062295), new AMap.LngLat(121.480207,31.062736), new AMap.LngLat(121.479735,31.06406), new AMap.LngLat(121.479778,31.064464), new AMap.LngLat(121.48201,31.065052), new AMap.LngLat(121.482225,31.065236), new AMap.LngLat(121.483512,31.065383), new AMap.LngLat(121.484027,31.065677), new AMap.LngLat(121.48849,31.066927), new AMap.LngLat(121.490207,31.058104), new AMap.LngLat(121.490207,31.058215)]var polygon = new AMap.Polygon({path: path, strokeWeight: 2, strokeColor: "#19A4EB", strokeOpacity: 0.8, fillColor: "green", fillOpacity:0.1,draggable: false,});map.add(polygon);let heatmap;let heatmapData = [{ lng: 121.490164, lat: 31.058288, count: 1555 },{ lng: 121.508102, lat: 31.063031, count: 2000 },];map.plugin(["AMap.Heatmap"], function() {//初始化heatmap对象heatmap = new AMap.Heatmap(map, {radius: 25, //给定半径opacity: [0, 0.8],gradient: {0.3: "#96fa57",0.9: "#f0ef5e",1.0: "#f6784e"}});//设置数据集heatmap.setDataSet({data: that.mapData,max: 100});});},}}</script>上面有好多无用的代码,懒得删了

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。