地图定点热力图GeoJson

1.首先需要拿到地图，可以从不同的站点寻找，我这里是从hcharts里面找的

//国外地图数据地址：
https://img.hcharts.cn/mapdata/
//国内地图数据地址：
https://datav.aliyun.com/portal/school/atlas/area_selector

2.在项目中引入echarts

3.代码编写

<template><div class="main-container"><div id="main"></div></div>
</template>
<script>
import * as echarts from 'echarts'
import SaudiArabia from './SaudiArabia.json' //这里引入的是沙特的地图，需要其他国家的可以在上面的网址上去找
export default {name: 'testPage',data() {return {myChart: null,option: {}}},mounted() {// 基于准备好的dom，初始化echarts实例this.myChart = echarts.init(document.getElementById('main'))echarts.registerMap('SaudiArabia', SaudiArabia);this.option = {tooltip: {trigger: 'item',showDelay: 0,transitionDuration: 0.2,show: true},geo: {map: 'SaudiArabia',roam: true,// label: {//     // 图上显示名称标签//     show: true,//     position: 'top'// },left: 0, top: 0, right: 0, bottom: 0,zoom: 1,},visualMap: {left: 'right',min: 0,max: 13,inRange: {color: ['#313695','#4575b4','#74add1','#abd9e9','#e0f3f8','#ffffbf','#fee090','#fdae61','#f46d43','#d73027','#a50026']},text: ['High', 'Low'],show: false},series: [{type: 'effectScatter',coordinateSystem: 'geo',geoIndex: 0,symbolSize: function (params) {console.log(params);return (params[2] / 100) * 15 + 5;},itemStyle: {color: '#b02a02'},dimensions: [{name: 'lng',type: 'number'},{name: 'lat',type: 'number'},{name: 'value',type: 'ordinal'},{name: 'testaaaa',type: 'ordinal'},],data: [// [-999, 7747, 10],  //最西边-999    34.57566,28.09873// [9851, 4245, 10],  //最东边9851    55.67293,21.99112// [1418, 9851, 10],  //最北边9851    39.24017,32.14280// [3026, 891, 10],   //最南边891     42.77862,16.28674this.mathl(46.75579, 24.49344),this.mathl(46.75479, 24.49344),this.mathl(41.17317494, 18.05285027),this.mathl(46.11985281, 28.97158808)],tooltip: {trigger: 'item',formatter: function (params) {return `${params.value[3]}</br>${1}`}}},{type: 'map',coordinateSystem: 'geo',geoIndex: 0,symbolSize: function (params) {return (params[2] / 100) * 15 + 5;},itemStyle: {color: '#b02a02'},data: [{name: 'Tabuk', value: 1,},{name: 'Jizan', value: 2,},{name: 'Najran', value: 3,},{name: 'Ar Riyad', value: 4,},{name: 'Al Madinah', value: 5,},{name: "Ha'il", value: 6,},{name: 'Al Quassim', value: 7,},{name: 'Al Hudud ash Shamaliyah', value: 8,},{name: 'Al Jawf', value: 9,},{name: 'Ash Sharqiyah', value: 10,},{name: 'Al Bahah', value: 11,},{name: '`Asir', value: 12,},{name: 'Makkah', value: 13,},],}]};this.myChart.setOption(this.option);// this.myChart.on('click', function (params) {//     console.log(params);// });},methods: {mathl(longitude, latitude) {let X = nulllet Y = nullif (longitude < 36.5181644) {// 说明X在负半轴X = -((36.5181644 - longitude) * 514.28454961)} else {// X在正半轴X = (longitude - 36.5181644) * 514.28454961}Y = (latitude - 16.28674) * 565.08363 + 891return [X, Y, 100, '55']}}
}
</script>
<style lang="scss" scoped>
#main {width: 500px;height: 500px;border: 1px solid#ccc;
}
</style>