vue + echarts+地图实现功能，实现地图上数据显示，四川省地图echarts地市数据案列
2024-04-16 13:10:37
echart在开发地图时，会遇到下钻显示子区域地图数据。比如四川省，下钻到市级成都市，再下钻到区级。下载地址：DataV.GeoAtlas地理小工具系列
//获取方法myChart.on('click', (params) => {this.Show = 0// 获取点击的经纬度坐标时使用// console.log(myChart.convertFromPixel('geo', [params.event.offsetX, params.event.offsetY]));if (params.componentSubType === 'map') {try {this.chinaJson = require(`@/assets/MapData/${params.name}.json`)this.ClickName = params.namethis.cityList.forEach(item =>{if(item.xzqhmc === this.ClickName){this.getDialogData(item.xzqhszDm)this.Restcenter()}})} catch (r) {// this.$message({// message: '无本地资源',// type: 'warning'// });}}})
```javascript
//放echarts的地方
<div id="main" :style="{ height: '100%', width: '100%', }" ref="myEchart"></div>
//引入 在scrit代码块内引入
import * as echarts from 'echarts';
//在data内引入下载的地图图片
ClickName: '四川', //空代表还没有点击城市 初始进入时的地图显示
chinaJson: require("@/assets/MapData/四川省.json"),
//echarts的初始化
init() {if (this.myChart.id !== undefined) {this.myChart.dispose(); //销毁 这是因为多次点击会出现渲染的问题，需要先销毁再渲染}let myChart = echarts.init(document.getElementById('main'), null, { renderer: 'svg' });//这里是让地图的清晰度更高echarts.registerMap('sichuan', this.chinaJson);this.myChart = myChart//点击时间监听myChart.on('click', (params) => {// 这个是项目用到的，可以根据需要保留this.Show = 0// 获取点击的经纬度坐标时使用// console.log(myChart.convertFromPixel('geo', [params.event.offsetX, params.event.offsetY]));if (params.componentSubType === 'map') {try {this.chinaJson = require(`@/assets/MapData/${params.name}.json`)this.ClickName = params.namethis.cityList.forEach(item =>{if(item.xzqhmc === this.ClickName){this.getDialogData(item.xzqhszDm)this.Restcenter()}})} catch (r) {// this.$message({// message: '无本地资源',// type: 'warning'// });}}})window.addEventListener('resize', function () {myChart.resize();});echarts.registerMap("js", this.chinaJson);// 柱状图左边数量显示let scatterData = this.mapData.map((item) => {return [this.center[item.name][0],this.center[item.name][1],];});let option ={backgroundColor: "rgba(0,0,0,0)",tooltip: {trigger: 'item',show: true,enterable: true,textStyle: {fontSize: 20,color: '#fff'},backgroundColor: 'rgba(0,0,0,0.5)',formatter: function (item) {let tipHtml = "";//提示内容tipHtml = itemreturn tipHtml;},},visualMap: {min: 0,max:100,text: ['高', '低'],realtime: false,calculable: true,inRange: {color: ['lightskyblue', 'yellow', 'orangered']}},// 地图图层样式geo: [{map: "js",aspectScale: 0.9,// roam: false, //是否允许缩放roam: true,zoom: 1, //默认显示级别label: { show: true },emphasis: {label: { show: true },textStyle: {color: '#444',fontSize: 8},},zlevel: 3,},],series: [// 颜色图层{type: "map",coordinateSystem: "geo",geoIndex: 0,zlevel: 5,label: {show: true,},map: 'china', // 自定义扩展图表类型// normal: {label: {show: true}},emphasis: {label: { show: true },textStyle: {color: '#444',fontSize: 8}},data: this.mapData,},// 柱形左边数量显示{type: "scatter",coordinateSystem: "geo",geoIndex: 0,zlevel: 5,label: {show: !0,position: "left",formatter: (params) => this.mapData[params.dataIndex].value,padding: [4, 8],backgroundColor: "#003F5E", //数字显示框颜色borderRadius: 5,borderColor: "#67F0EF",borderWidth: 1,color: "#67F0EF",},silent: true,data: scatterData,},],} myChart.setOption(option, true);},完整的页面代码，可以直接使用，注意引入
<template><div class="MapEcharts"><el-button size="medium" v-if="this.history.length === 0" @click="$router.back()" class="sucessbutton" type="text"><SvgIcon icon-name="rollback" class="popoverIcon"></SvgIcon>返回</el-button><el-button v-if="this.history.length > 0" type="text" class="sucessbutton"@click="datas()"><SvgIcon icon-name="rollback" class="popoverIcon"></SvgIcon>返回上一级</el-button><div id="main" :style="{ height: '100%', width: '100%', }" ref="myEchart"></div></div>
</template><script>import * as echarts from 'echarts';
import SvgIcon from '@/components/public/SvgIcon' //图标可以去掉这个
import {mixins} from '@/mixins/mixins' //这是其他区域的中心点放在后面了export default {name: 'MapData',data() {return {historyOld:'',Show:0,cityList:[],center:{},ClickName: '四川', //空代表还没有点击城市myChart: {},history: [],currentName: '',chinaJson: require("@/assets/MapData/四川省.json"),mapData:[]}},mixins: [mixins],components:{SvgIcon},computed:{ },mounted() {this.getCity()this.MapData()this.Restcenter()this.historyOld=this.chinaJson // 拿到进入时一级的名称// this.init();},methods: {// 获取数据MapData(){this.mapData = []this.axios.get('', {params: {page: 1,pageSize: 100,dfpx:'Y',nf:`${new Date().getFullYear()}`},}).then(res => {if (res.data.code.toString() === '200') {this.Show = this.Show +1res.data.data.forEach(item =>{this.mapData.push({name:item.xzqhszmc,value:item.tzdf})})}}).catch()},//获取市州下拉框getCity() {this.axios.get('', {params: {}}).then(res => {if (res.data.code.toString() === '200') {this.cityList = res.data.data}}).catch()},// 拿到单个市的区县数据，接口内拿的数据getDialogData(rowData){this.mapData = []this.axios.get('', {params: {//参数},}).then(res => {if (res.data.code.toString() === '200') {if(res.data.data.length === 0){this.$message({message: '当前行政区划没有做计划',type: 'info'});}else{this.history.push(this.historyOld)res.data.data.forEach(item =>{this.mapData.push({name:item.xzqhszmc,value:item.tzdf})})this.Show = this.Show + 1}}}).catch()},Restcenter(){switch (this.ClickName){case '四川':this.center= this.PRcenterthis.Show = this.Show +1breakcase '成都市':this.center= this.CDcenterthis.Show = this.Show +1breakcase '绵阳市':this.center= this.MYcenterthis.Show = this.Show +1breakcase '自贡市':this.center= this.ZGcenterthis.Show = this.Show +1breakcase '攀枝花市':this.center= this.PZcenterthis.Show = this.Show +1breakcase '泸州市':this.center= this.LZcenterthis.Show = this.Show +1breakcase '德阳市':this.center= this.DYcenterthis.Show = this.Show +1breakcase '广元市':this.center= this.GYcenterthis.Show = this.Show +1breakcase '遂宁市':this.center= this.SNcenterthis.Show = this.Show +1breakcase '内江市':this.center= this.NJcenterthis.Show = this.Show +1breakcase '乐山市':this.center= this.LScenterthis.Show = this.Show +1breakcase '资阳市':this.center= this.ZYcenterthis.Show = this.Show +1breakcase '宜宾市':this.center= this.YBcenterthis.Show = this.Show +1breakcase '南充市':this.center= this.LCcenterthis.Show = this.Show +1breakcase '达州市':this.center= this.DZcenterthis.Show = this.Show +1breakcase '雅安市':this.center= this.YAcenterthis.Show = this.Show +1breakcase '广安市':this.center= this.GAcenterthis.Show = this.Show +1breakcase '巴中市':this.center= this.BZcenterthis.Show = this.Show +1breakcase '眉山市':this.center= this.MScenterthis.Show = this.Show +1breakcase '凉山彝族自治州':this.center= this.YZcenterthis.Show = this.Show +1breakcase '阿坝藏族羌族自治州':this.center= this.ABcenterthis.Show = this.Show +1breakcase '甘孜藏族自治州':this.center= this.GZcenterthis.Show = this.Show +1break}},init() {if (this.myChart.id !== undefined) {this.myChart.dispose(); //销毁}let myChart = echarts.init(document.getElementById('main'), null, { renderer: 'svg' });echarts.registerMap('sichuan', this.chinaJson);this.myChart = myChartmyChart.on('click', (params) => {this.Show = 0// 获取点击的经纬度坐标时使用// console.log(myChart.convertFromPixel('geo', [params.event.offsetX, params.event.offsetY]));if (params.componentSubType === 'map') {try {this.chinaJson = require(`@/assets/MapData/${params.name}.json`)this.ClickName = params.namethis.cityList.forEach(item =>{if(item.xzqhmc === this.ClickName){this.getDialogData(item.xzqhszDm)this.Restcenter()}})} catch (r) {// this.$message({// message: '无本地资源',// type: 'warning'// });}}})window.addEventListener('resize', function () {myChart.resize();});echarts.registerMap("js", this.chinaJson);// 柱状图左边数量显示let scatterData = this.mapData.map((item) => {return [this.center[item.name][0],this.center[item.name][1],];});let option ={backgroundColor: "rgba(0,0,0,0)",tooltip: {trigger: 'item',show: true,enterable: true,textStyle: {fontSize: 20,color: '#fff'},backgroundColor: 'rgba(0,0,0,0.5)',formatter: function (item) {let tipHtml = "";//提示内容tipHtml = itemreturn tipHtml;},},visualMap: {min: 0,max:100,text: ['高', '低'],realtime: false,calculable: true,inRange: {color: ['lightskyblue', 'yellow', 'orangered']}},// 地图图层样式geo: [{map: "js",aspectScale: 0.9,// roam: false, //是否允许缩放roam: true,zoom: 1, //默认显示级别label: { show: true },emphasis: {label: { show: true },textStyle: {color: '#444',fontSize: 8},},zlevel: 3,},],series: [// 颜色图层{type: "map",coordinateSystem: "geo",geoIndex: 0,zlevel: 5,label: {show: true,},map: 'china', // 自定义扩展图表类型// normal: {label: {show: true}},emphasis: {label: { show: true },textStyle: {color: '#444',fontSize: 8}},data: this.mapData,},// 柱形左边数量显示{type: "scatter",coordinateSystem: "geo",geoIndex: 0,zlevel: 5,label: {show: !0,position: "left",formatter: (params) => this.mapData[params.dataIndex].value,padding: [4, 8],backgroundColor: "#003F5E", //数字显示框颜色borderRadius: 5,borderColor: "#67F0EF",borderWidth: 1,color: "#67F0EF",},silent: true,data: scatterData,},],} myChart.setOption(option, true);},datas() {if (this.history.length === 0) {return this.$message({message: '已经到达最高一级',type: 'warning'});}this.ClickName = '四川'this.chinaJson = this.history.pop()// 返回四川等级this.MapData()this.Restcenter()}},watch: {center:{handler(){if(this.Show === 2){this.init()this.Show = 0}else if(this.Show > 2){this.Show = 0}},deep:true,},mapData:{handler(){if(this.Show === 2){this.init()this.Show = 0}else if(this.Show > 2){this.Show = 0}},deep:true,},},
}
</script>
<style scoped lang="scss">
.MapEcharts {overflow-y: hidden;width: 80vw;height: 75vh;margin: 0 auto;padding-top: 10px;padding-bottom: 50px;}
</style>
引入区域的中心的位置 放入自己对应的地方
// 省级情况下各市的的中心点PRcenter: {'成都市': [104.07555, 30.57943],'绵阳市': [104.89325253933396, 31.69633554464286],'自贡市': [104.79507, 29.34464],'攀枝花市': [101.71590, 26.58805],'泸州市': [105.45644, 28.87624],'德阳市': [104.40801, 31.14448],'广元市': [105.82887, 32.44992],'遂宁市': [105.59740, 30.52774],'内江市': [105.05179, 29.57535],'乐山市': [103.55452301753161, 29.202765607216573],'资阳市': [105.09150429421383, 30.143691832046326],'宜宾市': [104.64573, 28.75410],'南充市': [106.21985641463768, 31.16918289703984],'达州市': [107.47483, 31.21786],'雅安市': [102.6531718928392, 29.90505089977476],'广安市': [106.63745, 30.45845],'巴中市': [107.04908645148265, 31.96351364722085],'眉山市': [103.85636, 30.08495],'阿坝藏族羌族自治州': [102.77078, 31.65637],'甘孜藏族自治州': [100.42150565830116, 30.47838019835907],'凉山彝族自治州': [102.35723086743887, 27.928320824565645],},// 成都市CDcenter: {'彭州市': [103.93201, 30.98495],'都江堰市': [103.64545, 30.99807],'成华区': [104.10860, 30.66559],'金牛区': [103.98186, 30.52194],'温江区': [103.86584, 30.69033],'简阳市': [104.54011, 30.42109],'双流区': [103.93887, 30.57792],'金堂县': [104.62001770842656, 30.730643488051676],'崇州市': [103.51068942201458, 30.739491080034252],'大邑县': [103.39087828058541, 30.628343205754565],'邛崃市': [103.36691605229953, 30.43259023314254],'浦江县': [103.50147318036615, 30.238496184027284],'新津区': [103.82772813471942, 30.430931309645832],'青羊区': [103.95798435001666, 30.68225821939759],'武侯区': [104.03171428320384, 30.614518843281864],'锦江区': [104.11466045803941, 30.59378229957297],'龙泉驿区': [104.2820888479853, 30.59931204456201],'青白江区': [104.3373862978757, 30.79561799167288],'新都区': [104.11773253858888, 30.834326206596153],'郫都区': [103.85814173215901, 30.83570864284341]},// 绵阳市MYcenter: {'平武县': [104.4456199603499, 32.41438492510224],'北川羌族自治县': [104.29304865553281, 31.966621313139054],'江油市': [104.92986801476935, 31.978561676124738],'安州区': [104.3461169354692, 31.54273842714723],'涪城区': [104.68442722006361, 31.405424252811855],'游仙区': [104.90996740979315, 31.548708608640055],'梓潼县': [105.18194234446715, 31.6502016940184],'三台县': [105.02937103965006, 31.148706448619627],'盐亭县': [105.48708495410132, 31.256169715490792],},// 自贡市ZGcenter: {'荣县': [104.3322306851852, 29.41105246830266],'贡井区': [104.60968914917065, 29.316271036809816],'自流井区': [104.69474940820268, 29.25976672188139],'大安区': [104.9499301852988, 29.385534390593048],'沿滩区': [104.85069321642808, 29.245184963190187],'富顺县': [105.03296520006818, 29.12488545398773],},// 攀枝花市PZcenter: {'盐边县': [101.54483121017952, 27.020366781952966],'米易县': [102.006674146444, 26.92692414135992],'仁和区': [101.75606170040902, 26.388823417944785],'西区': [101.52901875822732, 26.617507274951713],'东区': [101.75526610534224, 26.601843997074518],},// 泸州市LZcenter: {'泸县': [105.60028321362412, 29.135126366394115],'龙马潭区': [105.44655715599413, 28.981949330398507],'江阳区': [105.32028218008378, 28.855948865305347],'纳溪区': [105.4026354252427, 28.65830107692392],'合江县': [105.85557827361681, 28.799125126145686],'叙永县': [105.47675334588574, 28.24324072132292],'古蔺县': [105.96812770866754, 27.919592467848435],},// 德阳市DYcenter: {'绵竹市': [104.19874526289482, 31.40417785966258],'什邡市': [104.07209403022043, 31.17920527530675],'旌阳区': [104.42205138366282, 31.19120381313906],'罗江区': [104.54870261633721, 31.332186632668712],'广汉市': [104.29206722381278, 31.005226476738244],'中江县': [104.80533800886164, 30.882241463957058],},// 广元市GYcenter: {'青川县': [105.17697674573961, 32.490690148773],'朝天区': [105.97179997341514, 32.65604533282208],'利州区': [105.79206607770962, 32.443959335889566],'剑阁县': [105.50049775800956, 31.937109749999998],'昭化区': [105.8360010299932, 32.159979780674846],'旺苍县': [106.40316132310839, 32.382849811349686],'苍溪县': [106.1315634362645, 31.947893783742327],},// 遂宁市SNcenter: {'射洪市': [105.4100200398773, 30.890501663343553],'大英县': [105.2641927392638, 30.59267744555214],'蓬溪县': [105.67923967177913, 30.72139808205521],'船山区': [105.59510853680982, 30.53210302837423],'安居区': [105.42684626687117, 30.395810589723922],},// 内江市NJcenter: {'资中县': [104.81308560633946, 29.782734837934562],'威远县': [104.62934338866165, 29.59343200051125],'市中区': [104.95330993035672, 29.558617685582824],'东兴区': [105.19507600624857, 29.660884735685073],'隆昌市': [105.25551752522153, 29.345380006646216],},// 乐山市LScenter: {'夹江县': [103.60199227311972, 29.773769039621673],'市中区': [103.81610000431718, 29.619611473159505],'井研县': [104.06874712713018, 29.635027229805722],'峨眉山市': [103.37932023267437, 29.49628541998977],'沙湾区': [103.59771011849578, 29.369105427658482],'五通桥区': [103.79897138582139, 29.426914515081798],'金口河区': [103.05387648125424, 29.307442401073615],'峨边彝族自治县': [103.18234111997272, 29.076206051380364],'沐川县': [103.83751077743693, 28.983711511503063],'犍为县': [103.9916683438991, 29.203386043711653],'马边彝族自治县': [103.49065625289705, 28.83340788420245],},// 资阳市ZYcenter: {'乐至县': [105.02972631595092, 30.285397438650303],'雁江区': [104.76081680674847, 30.10205004601227],'安岳县': [105.44802999693252, 29.989596978527608],},// 宜宾市YBcenter: {'叙州区': [104.34428855669172, 29.00280926925699],'屏山县': [104.00986863318948, 28.727123601226996],'翠屏区': [104.66184697144595, 28.8763479536469],'南溪区': [104.98221563765817, 28.901640216768918],'高县': [104.5719189247899, 28.451437933197003],'长宁县': [104.90352859683414, 28.471671743694618],'江安县': [105.1311589649323, 28.681597527607362],'筠连县': [104.59159068499592, 28.059407854805727],'珙县': [104.81360055017807, 28.226336791411043],'兴文县': [105.15645122805431, 28.27439209134288],},// 南充市LCcenter: {'阆中市': [106.10817492978869, 31.574533318251536],'南部县': [106.00943423165191, 31.311488098415136],'仪陇县': [106.53473474573961, 31.425237382668712],'西充县': [105.86724762633493, 31.062661539110433],'顺庆区': [106.09237641808681, 30.941802924591006],'嘉陵区': [105.93044167314248, 30.685867035020454],'高坪区': [106.26616004680756, 30.80672564953988],'蓬安县': [106.44784293137924, 30.966685580521474],'营山县': [106.70851837446035, 31.140864172034767],},// 达州市DZcenter: {'万源市': [108.03020787059762,32.013050826942745],'宣汉县': [107.96721884253581, 31.523454290644175],'通川区': [107.44612779220634, 31.332769323875258],'达川区': [107.52056937082484, 31.04416504984663],'开江县': [107.90422981447401, 31.08024058410021],'渠县': [106.99947832049537, 30.982321276840494],'大竹县': [107.29151835969101, 30.71433159381391],},// 雅安市YAcenter: {'宝兴县': [102.78237592206317, 30.546886335378318],'芦山县': [102.99027222403998, 30.350869822085883],'天全县': [102.56952970813451, 30.09693933895705],'名山区': [103.20806834992047, 30.110304101226983],'雨城区': [103.00512195989548, 29.927652350204493],'荥经县': [102.74277662644853, 29.745000599181992],'汉源县': [102.68337768302658, 29.397516780163592],'石棉县': [102.37648314201317, 29.228229791411035],},// 广安市GAcenter: {'武胜县': [106.26096839951815, 30.35725532206633],'岳池县': [106.41580730612246, 30.55182647640306],'广安区': [106.6845842760771, 30.630706674107145],'前锋区': [106.87155955952382, 30.5229037372449],'华蓥市': [106.75762149617347, 30.34936730229592],'邻水县': [107.00594804450112, 30.244193705357144],},// 巴中市BZcenter: {'南江县': [106.83113958843538, 32.293144642857136],'通江县': [107.33329860204083, 32.140911173469384],'恩阳区': [106.56155948639456, 31.703239948979586],'巴州区': [106.85228312585035, 31.850716122448976],'平昌县': [107.11657734353741, 31.565278367346934],},// 眉山市MScenter: {'洪雅县': [103.19258071598638, 29.64886956760205],'丹棱县': [103.43815877721087, 30.0264458367347],'东坡区': [103.7314881281179, 30.05714309438776],'彭山区': [103.86109877154193, 30.262814720663272],'青神县': [103.82016909467119, 29.805425581632658],'仁寿县': [104.22264425056687, 29.989609127551027],},// 阿坝藏族羌族自治州ABcenter: {'若尔盖县': [102.92982835629252, 33.67503824936224],'九寨沟县': [103.89159016539116, 33.331175465561216],'阿坝县': [101.79240228982428, 32.81472254889455],'红原县': [102.60667931617301, 32.70767714205994],'松潘县': [103.58564158380577, 32.691208617931544],'黑水县': [103.10988422009639, 32.164215845822696],'壤塘县': [101.06046788411756, 32.1724501078869],'马尔康市': [102.05772851189298, 31.974827818346082],'理县': [102.95434815888372, 31.57134897720025],'茂县': [103.64968584430511, 31.867782411511474],'金川县': [101.83814819018096, 31.57134897720025],'小金县': [102.50603833538834, 31.093761777476608],'汶川县': [103.30201700159441, 31.126698825733413],},// 甘孜藏族自治州GZcenter: {'石渠县': [98.30255123836065, 33.02300682677826],'德格县': [98.99646340860507, 32.062205360285986],'甘孜县': [99.79713129734863, 31.87805174587497],'色达县': [100.18856893184548, 32.35044580023367],'白玉县': [99.33452318385235, 31.109410572681156],'新龙县': [100.21525786147026, 30.97329703159475],'炉霍县': [100.70455490459132, 31.509744517052933],'道孚县': [101.22943718721253, 30.893230242720517],'丹巴县': [101.85217887845751, 30.95728367382],'巴塘县': [99.22776746535362, 29.972462170665423],'理塘县': [100.09070952322169, 30.07654899620209],'雅江县': [101.06040729958889, 29.89239538179107],'康定市': [101.75431946983329, 29.98046884955286],'泸定县': [102.14575710433014, 29.756281840704663],'乡城县': [99.71706450847469, 29.099734171934948],'得荣县': [99.3078342542281, 28.71541358533807],'稻城县': [100.25084310097051, 28.80348705309986],'九龙县': [101.66535637108413, 28.875547163086782],},// 凉山彝族自治州YZcenter: {'木里藏族自治县': [100.92086659922472, 28.337194873316648],'冕宁县': [102.11499888075423, 28.510303982585356],'甘洛县': [102.75614372989759, 28.964715394415713],'越西县': [102.63592907068322, 28.59685853721971],'美姑县': [103.09274477569787, 28.46702670526818],'雷波县': [103.43736013211242, 28.301130475552334],'喜德县': [102.43557130532591, 28.200150161812257],'西昌市': [102.21918491874003, 27.839506184169114],'昭觉县': [102.82025821481193, 28.012615293437822],'盐源县': [101.57002575898238, 27.601481158924642],'德昌县': [102.19514198689716, 27.356243254127307],'普格县': [102.59585751761175, 27.543778122501738],'布拖县': [102.86834407849769, 27.601481158924642],'金阳县': [103.19693081368365, 27.7457387499819],'宁南县': [102.73210079805472, 27.08936671067138],'会里市': [102.21918491874003, 26.526762105548084],'会东县': [102.78820097235476, 26.562826503312397],},
vue + echarts+地图实现功能，实现地图上数据显示，四川省地图echarts地市数据案列相关推荐
- 基于百度地图API在AI Studio上的卫星地图块图像处理与分类
基于百度地图API在AI Stduio上的瓦片地图块图像处理与分类 项目介绍 本项目基于百度地图API获取了不同的瓦片地图并进行合并等处理,可用于遥感和抽象地图的地图块的图像分类.分割.检测等数据的制 ...
- 高德地图大头针功能_【iOS】高德地图MAMapKit的使用：地图显示、添加大头针、导航、定位功能介绍...
最近在做基于高德地图的定位.导航及添加大头针的功能,特此记录下来...方便刚接触的同学参考... 一.申请 Key:获取用户Key 2.在"KEY管理"页面点击上方的"获 ...
- Vue - 实现图片裁剪功能，并上传到服务器（内置第三方最优秀的裁剪图片组件，上传到服务器功能）干净整洁无 BUG 的示例源码与超详细的注释，兼容任意浏览器
前言 您可以滑动到文章最底部,直接克隆完整示例 Gitee 仓库,与本文教程最终效果一致. 在项目开发中,您难免会遇到图片上传到服务器之前,用户可进行裁剪的需求, 在看了网上大部分教程后,代码都非常乱 ...
- 小O地图EXCEL版地图可视化 -- 让EXCEL插上国产地图的翅膀
前言 谷歌地图和Bing等国外地图存在信安问题,应拒绝使用问题地图. 小O历时一个(ao)月(ye),将国产优秀的地图资源集成至EXCEL软件中,开发出基于EXCEL表格的地图可视化功能,能将EXCE ...
- echarts实现下钻功能的地图
实现步骤 初始化,获取全国的坐标json数据 绘制中国地图,同时监听点击事件,使用递归方式实现下钻功能 点击下一层级,获取对应地区的坐标json数据–添加监听事件–实现下钻 注:getGeoJson方 ...
- echarts+echarts-gl vue2制作3D地图+下钻功能+标记点功能，解决dblclick事件失效问题，解决地图下钻后边框不更新保留问题
目录 先看实现效果:编辑 步骤一 安装echarts和echarts-gl 步骤二 设置地图容器 在methods中设置初始化地图方法并在mounted中调用 在methods中设置初始化地图方法 ...
- echarts实现地图下钻功能
很多时候我们需要通过地图进行数据的直观展示,并且展示下级省份.地市.区县的数据,这时我们就需要对地图进行下钻:(由于最近的项目使用的是贵州地图,所以文章中用贵州省进行演示!) 首先我们要实现功能点有以 ...
- vue使用谷歌地图绘制图形以及地图选点功能
因做加拿大配送项目得用到谷歌地图 效果图: 第一步: 首先访问谷歌地图以及文档需要加速插件 你得在谷歌浏览器扩展程序里添加一个加速插件(如图): 最好充值vip,不然免费的加速通道不稳定 本人是在vu ...
- vue-cli 项目 echarts 地图标点功能
参考echarts官网api文档:https://echarts.apache.org/zh/option.html#title 地图标点,带数字显示 效果图 复制代码后可查看效果(提示:记得配置js ...
最新文章
- 模型的可解释性：部分依赖图PDP和个体条件期望图ICE
- 【SeaJS】【3】seajs.data相关的源码阅读
- 活动结束|金融圈第19期分享：数据系统如何防范金融非统性风险？
- Android 系统（115）---死机问题分析
- 深挖 AI 价值与温度，AETA 地震预测 AI 算法大赛开启
- 二维数组和稀疏数组转化
- 服务机器人工程师（ROS）要求汇总220331
- 3年间 女子称遭邻居报复放了上千条虫子
- 星梦小组KTV点歌系统简介
- OPPO手机测试指令代码大全
- 【转载】面试题：面向对象的特征和基本特征有哪些 之抽象
- k8s v1.22版本中Ingress配置：no matches for kind “Ingress“ in version “networking.k8s.io/v1beta1“
- HC06蓝牙2.0模块连接不稳定 和 STM32串口不传输数据（串口接收中断）的一些问题
- win10html5无法播放,Win10自带播放器出现故障无法播放任何视频
- 视频合并器(Video Combiner)绿色免费版 v1.1
- OCI 与容器镜像构建
- 吴恩达深度学习L2W1——神经网络权重初始化方法、正则化
- vs code vue项目保存浏览器自动化刷新vue-cli3
- WEBGL填坑--Exception:xxxxxxxxx\Data\il2cpp\build\il2cpp.exe did not run properly!的问题
- CSS 实战: Loading 动画