菜单 搜索
首页 前端知识 1 echarts与map相遇

1 echarts与map相遇

2024-03-24 22:03:50 前端知识 前端哥 596 261 我要收藏

echarts与map

版本

    "echarts": "^5.1.2",
    "echarts-gl": "^2.0.9",

效果

在这里插入图片描述

基本方法

echarts中地图大多是以地理坐标为主，数据格式使用geojson数据格式。geojson是GIS数据格式中第二常用格式，使用GIS软件都能实现数据转换。

步骤

1数据准备

从上图中可以看出，地图包括深蓝色底图、青色厚度、 地图定位坐标点、插图部分。插图的图框也是很绘制的包含插图的外包矩形，也是地理数据。

  • 深蓝地图和青色厚度是相同的地图，只是渲染方式不一样。面类型数据
  • 地图定位坐标点采用的经纬度，点类型数据
  • 插图图框是边界矩形，插图内容是面状群岛分布
    数据来源大部分来自阿里datav,一小部分数据自己制作。
https://datav.aliyun.com/portal/school/atlas/area_selector

2开发准备

地图部分单独写组件，新建vue组件，编写模板，样式等

  <div id="map" class="chartBox" />

组件引用等

3注册地图

import hainan from '@/api/gis/provinces_hn.json' //底图
import sansha from '@/api/gis/ss.json'  //插图
import boundry from '@/api/gis/chatuboundry.json' //插图框
      echarts.registerMap('hn', hainan)
      echarts.registerMap('ss', sansha)
      echarts.registerMap('boundry', boundry)

4 配置项

底图

底图是放了两个hn图层，上面hn图层设置了透明度，渲染填充和边界，并增加鼠标移入事件，可进行放大、缩小、移动。作为厚度的图层其缩放、移动跟随第一个图层变化。两个底图定位中心一样，长宽比一样。

          {
            map: 'hn', //注册底图
            zlevel: 5, //层次顺序
            roam: true,  //缩放平移
            aspectScale: 1.1, //长宽比
            center: [109.786246, 18.464193], //定位中心
            zoom: 0.8, //初始缩放级别
            scaleLimit: { //最大最小缩放级别
              min: 0.2,
              max: 50
            },
            label: {   //底图文字标注
              show: true,
              color: '#ffffff',
              shadowColor: '#134ae6',
              shadowOffsetX: 15,
              shadowOffsetY: 15,
              textBorderColor: '#134ae6',
              textBorderType: 'solid',
              textBorderWidth: 2

            },
            itemStyle: {  //不同市的渲染
              color: '#153294', // 背景
              opacity: 0.9,
              borderWidth: '1', // 边框宽度
              borderColor: 'rgba(255,255,255,0.3)' // 边框颜色

            },
            emphasis: { //鼠标移入后
              label: {  //底图文字标注
                show: true,
                color: '#ffffff',
                shadowColor: '#134ae6',
                shadowOffsetX: 15,
                shadowOffsetY: 15,
                textBorderColor: '#134ae6',
                textBorderType: 'solid',
                textBorderWidth: 2

              },
              itemStyle: { //不同市的渲染
                areaColor: '#0CBFFF',
                opacity: 0.9

              }
            }
          },
          {
            map: 'hn',
            top: '12%',
            silent: true,
            aspectScale: 1.1,
            zlevel: 4,
            center: [109.786246, 18.464193],
            zoom: 0.8,
            itemStyle: {
              color: '#01EAF8', // 背景
              opacity: 1,
              borderWidth: '1', // 边框宽度
              borderColor: '#3C5FA1' // 边框颜色
            }
          },

三沙群岛

 {
            map: 'ss',
            zlevel: 6,
            roam: false,
            aspectScale: 0.7,
            center: [14.87585417960884, 4.8374873458189995],
            zoom: 0.148,

            label: {
              show: true,
              color: '#ffffff',
              shadowColor: '#2074FF',
              shadowOffsetX: 15,
              shadowOffsetY: 15,
              textBorderColor: '#134ae6',
              textBorderType: 'solid',
              textBorderWidth: 2

            },
            itemStyle: {
              color: '#ffffff', // 背景
              opacity: 1,
              borderWidth: 1, // 边框宽度
              borderColor: 'rgba(255,255,255,0.3)' // 边框颜色
              // borderopacity: 0.6
            },
            emphasis: {
              itemStyle: {
                color: '#153294',
                opacity: 0.9

              },
              label: {
                show: true,
                color: '#ffffff',
                shadowColor: '#2074FF',
                shadowOffsetX: 15,
                shadowOffsetY: 15,
                textBorderColor: '#134ae6',
                textBorderType: 'solid',
                textBorderWidth: 2

              }
            }
          },

插图图框

 {
            map: 'boundry',
            zlevel: 6,
            roam: false,
            aspectScale: 0.7,
            center: [14.87585417960884, 4.8374873458189995],
            zoom: 0.148,
            label: {
              show: false
            },
            itemStyle: {
              color: '#153294', // 背景
              opacity: 0.2,
              borderWidth: 2, // 边框宽度
              borderColor: '#01EAF8' // 边框颜色
            },
            tooltip: {
              // show: false
            }

          }

定位点

定位点是自己采集的经纬度数据，格式如下

{
    "location" :
    [
        {
            "name": "某某某地方",
            "X": "110.386274",
            "Y": "20.026688"
        }
    ]
}

定位点主要采用series方式添加到底图上

          {
            name: 'jcy',
            type: 'scatter',
            map: 'hn',
            zlevel: 10,
            coordinateSystem: 'geo',
            geoIndex: 0,
            symbolSize: [30, 60],
            symbol: `image://${that.images}`,
            data: that.cityInfo.location.map(d => {
              return {
                name: d.name,
                value: [parseFloat(d.X),
                  parseFloat(d.Y)]
              }
            }),
            tooltip: {
              backgroundColor: 'rgba(0,0,0,0.5)',
              borderColor: 'rgba(0,0,0,0)',
              extraCssText: 'box-shadow: 0 0 0 rgba(255, 255, 255, 0.7);',
              zIndex: 400,
              formatter: function(params) {
                let html = ''
                var title = `<div style="color:#ffffff;margin-bottom: 12px; font-size: 14px">${params.name}</div>`
                html = title
                const item = that.jcyInfo.find(t => t.name === params.name)

                if (item) {
                  const info = `<div style=" line-height: 30px;color:#7BE6FF;font-size:10px;">
                      <span style="display:inline-block;margin-right:4px;width:8px;height:8px;border-radius:50%;"></span>
                      <span style="margin-right:30px;color:#7BE6FF">进行中的个案总数：</span>
                      <span style="float:right;color:#7BE6FF">${item.num}</span>
                    </div>`
                  html += info
                }

                return html
              }
            }
          },

三沙群岛也有定位点，在插图上同样也可以添加

  {
            name: 'scjcy',
            type: 'scatter',
            map: 'ss',
            zlevel: 500,
            coordinateSystem: 'geo',
            geoIndex: 3,
            symbolSize: [30, 60],
            symbol: `image://${that.images}`,
            data: [{
              name: '三沙市三沙群岛某某',
              value: [114.375028, 10.547062]
            },
            {
              'name': '三沙市某某某',
              value: [112.345028, 16.837062]

            }
            ],
            tooltip: {
              backgroundColor: 'rgba(0,0,0,0.5)',
              borderColor: 'rgba(0,0,0,0)',
              extraCssText: 'box-shadow: 0 0 0 rgba(255, 255, 255, 0.7);',
              zIndex: 500,
              formatter: function(params) {
                console.log(params)
                let html = ''
                var title = `<div style="color:#ffffff;margin-bottom: 12px; font-size: 14px">${params.name}</div>`
                html = title
                const item = that.jcyInfo.find(t => t.name === params.name)

                if (item) {
                  const info = `<div style=" line-height: 30px;color:#7BE6FF;font-size:10px;">
                      <span style="display:inline-block;margin-right:4px;width:8px;height:8px;border-radius:50%;"></span>
                      <span style="margin-right:30px;color:#7BE6FF">进行中的个案总数：</span>
                      <span style="float:right;color:#7BE6FF">${item.num}</span>
                    </div>`
                  html += info
                }

                return html
              }
            }
          }

注意这里定位图标用本地图片没成功，看api说需要使用一个在线地址，或者base64 但是要加上image://${that.images}

5 底图移动事件

      this.myChart.on('georoam', function(params) {
        var option = that.myChart.getOption()// 获得option对象

        if (params.zoom != null && params.zoom !== undefined) { // 捕捉到缩放时
          option.geo[1].zoom = option.geo[0].zoom // 下层geo的缩放等级跟着上层的geo一起改变
          option.geo[1].center = option.geo[0].center// 下层的geo的中心位置随着上层geo一起改变
        } else { // 捕捉到拖曳时
          option.geo[1].center = option.geo[0].center// 下层的geo的中心位置随着上层geo一起改变
          // option.geo[2].center = option.geo[0].center
          // option.geo[3].center = option.geo[0].center
        }
        that.myChart.setOption(option)// 设置option
      })

6 初始化

      this.myChart = echarts.init(document.getElementById('map')) // 这里是为了获得容器所在位置
      this.myChart.setOption(option)

完整代码

<template>
  <div class="grid-echarts__wrapper">
    <div id="map" class="chartBox" />
  </div>
</template>
<script>
import * as echarts from 'echarts'
import 'echarts-gl'
import hainan from '@/api/gis/provinces_hn.json'
import sansha from '@/api/gis/ss.json'
import boundry from '@/api/gis/chatuboundry.json'
import { getHelpMapData } from '@/api/bigScreenNew/help.js'

export default {
  name: 'GL',
  data() {
    return {
      option: null,

      images: 'data:image/png;base64,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',
      cityInfo: require('@/api/gis/jcy.json'),
      jcyInfo: []
    }
  },

  mounted() {
    this.getData()
  },

  beforeDestroy() {

  },

  methods: {
    getData() {
      getHelpMapData().then(res => {
        if (res.code === 200) {
          this.jcyInfo = res.data
        }
        this.initCharts()
      })
    },
    initCharts() {
      const that = this
      const option = {
        animation: false,
        tooltip: {},
        series: [
          {
            name: 'jcy',
            type: 'scatter',
            map: 'hn',
            zlevel: 10,
            coordinateSystem: 'geo',
            geoIndex: 0,
            symbolSize: [30, 60],
            symbol: `image://${that.images}`,
            data: that.cityInfo.location.map(d => {
              return {
                name: d.name,
                value: [parseFloat(d.X),
                  parseFloat(d.Y)]
              }
            }),
            tooltip: {
              backgroundColor: 'rgba(0,0,0,0.5)',
              borderColor: 'rgba(0,0,0,0)',
              extraCssText: 'box-shadow: 0 0 0 rgba(255, 255, 255, 0.7);',
              zIndex: 400,
              formatter: function(params) {
                let html = ''
                var title = `<div style="color:#ffffff;margin-bottom: 12px; font-size: 14px">${params.name}</div>`
                html = title
                const item = that.jcyInfo.find(t => t.name === params.name)

                if (item) {
                  const info = `<div style=" line-height: 30px;color:#7BE6FF;font-size:10px;">
                      <span style="display:inline-block;margin-right:4px;width:8px;height:8px;border-radius:50%;"></span>
                      <span style="margin-right:30px;color:#7BE6FF">进行中的个案总数：</span>
                      <span style="float:right;color:#7BE6FF">${item.num}</span>
                    </div>`
                  html += info
                }

                return html
              }
            }
          },
          {
            name: 'scjcy',
            type: 'scatter',
            map: 'ss',
            zlevel: 500,
            coordinateSystem: 'geo',
            geoIndex: 3,
            symbolSize: [30, 60],
            symbol: `image://${that.images}`,
            data: [{
              name: '三沙市三沙群岛人民检察院',
              value: [114.375028, 10.547062]
            },
            {
              'name': '三沙市人民检察院',
              value: [112.345028, 16.837062]

            }
            ],
            tooltip: {
              backgroundColor: 'rgba(0,0,0,0.5)',
              borderColor: 'rgba(0,0,0,0)',
              extraCssText: 'box-shadow: 0 0 0 rgba(255, 255, 255, 0.7);',
              zIndex: 500,
              formatter: function(params) {
                console.log(params)
                let html = ''
                var title = `<div style="color:#ffffff;margin-bottom: 12px; font-size: 14px">${params.name}</div>`
                html = title
                const item = that.jcyInfo.find(t => t.name === params.name)

                if (item) {
                  const info = `<div style=" line-height: 30px;color:#7BE6FF;font-size:10px;">
                      <span style="display:inline-block;margin-right:4px;width:8px;height:8px;border-radius:50%;"></span>
                      <span style="margin-right:30px;color:#7BE6FF">进行中的个案总数：</span>
                      <span style="float:right;color:#7BE6FF">${item.num}</span>
                    </div>`
                  html += info
                }

                return html
              }
            }
          }
        ],
        geo: [
          {
            map: 'hn',
            zlevel: 5,
            roam: true,
            aspectScale: 1.1,
            center: [109.786246, 18.464193],
            zoom: 0.8,
            scaleLimit: {
              min: 0.2,
              max: 50
            },
            label: {
              show: true,
              color: '#ffffff',
              shadowColor: '#134ae6',
              shadowOffsetX: 15,
              shadowOffsetY: 15,
              textBorderColor: '#134ae6',
              textBorderType: 'solid',
              textBorderWidth: 2

            },
            itemStyle: {
              color: '#153294', // 背景
              opacity: 0.9,
              borderWidth: '1', // 边框宽度
              borderColor: 'rgba(255,255,255,0.3)' // 边框颜色

            },
            emphasis: {
              label: {
                show: true,
                color: '#ffffff',
                shadowColor: '#134ae6',
                shadowOffsetX: 15,
                shadowOffsetY: 15,
                textBorderColor: '#134ae6',
                textBorderType: 'solid',
                textBorderWidth: 2

              },
              itemStyle: {
                areaColor: '#0CBFFF',
                opacity: 0.9

              }
            }
          },
          {
            map: 'hn',
            top: '12%',
            silent: true,
            aspectScale: 1.1,
            zlevel: 4,
            center: [109.786246, 18.464193],
            zoom: 0.8,
            itemStyle: {
              color: '#01EAF8', // 背景
              opacity: 1,
              borderWidth: '1', // 边框宽度
              borderColor: '#3C5FA1' // 边框颜色
            }
          },
          {
            map: 'ss',
            zlevel: 6,
            roam: false,
            aspectScale: 0.7,
            center: [14.87585417960884, 4.8374873458189995],
            zoom: 0.148,

            label: {
              show: true,
              color: '#ffffff',
              shadowColor: '#2074FF',
              shadowOffsetX: 15,
              shadowOffsetY: 15,
              textBorderColor: '#134ae6',
              textBorderType: 'solid',
              textBorderWidth: 2

            },
            itemStyle: {
              color: '#ffffff', // 背景
              opacity: 1,
              borderWidth: 1, // 边框宽度
              borderColor: 'rgba(255,255,255,0.3)' // 边框颜色
              // borderopacity: 0.6
            },
            emphasis: {
              itemStyle: {
                color: '#153294',
                opacity: 0.9

              },
              label: {
                show: true,
                color: '#ffffff',
                shadowColor: '#2074FF',
                shadowOffsetX: 15,
                shadowOffsetY: 15,
                textBorderColor: '#134ae6',
                textBorderType: 'solid',
                textBorderWidth: 2

              }
            }
          },
          {
            map: 'boundry',
            zlevel: 6,
            roam: false,
            aspectScale: 0.7,
            center: [14.87585417960884, 4.8374873458189995],
            zoom: 0.148,
            label: {
              show: false
            },
            itemStyle: {
              color: '#153294', // 背景
              opacity: 0.2,
              borderWidth: 2, // 边框宽度
              borderColor: '#01EAF8' // 边框颜色
            },
            tooltip: {
              // show: false
            }

          }

        ]

      }
      this.myChart = echarts.init(document.getElementById('map')) // 这里是为了获得容器所在位置
      echarts.registerMap('hn', hainan)
      echarts.registerMap('ss', sansha)
      echarts.registerMap('boundry', boundry)
      this.myChart.setOption(option)

      this.myChart.on('georoam', function(params) {
        var option = that.myChart.getOption()// 获得option对象

        if (params.zoom != null && params.zoom !== undefined) { // 捕捉到缩放时
          option.geo[1].zoom = option.geo[0].zoom // 下层geo的缩放等级跟着上层的geo一起改变
          option.geo[1].center = option.geo[0].center// 下层的geo的中心位置随着上层geo一起改变
        } else { // 捕捉到拖曳时
          option.geo[1].center = option.geo[0].center// 下层的geo的中心位置随着上层geo一起改变
          // option.geo[2].center = option.geo[0].center
          // option.geo[3].center = option.geo[0].center
        }
        that.myChart.setOption(option)// 设置option
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@bigScreen/styles/mixins";

.wrapper {
  height: 100%;
  overflow: hidden;
}

.chartBox {
  width: 100%;
  height: 100%;
}
</style>

.geo[1].zoom = option.geo[0].zoom // 下层geo的缩放等级跟着上层的geo一起改变
option.geo[1].center = option.geo[0].center// 下层的geo的中心位置随着上层geo一起改变
} else { // 捕捉到拖曳时
option.geo[1].center = option.geo[0].center// 下层的geo的中心位置随着上层geo一起改变
// option.geo[2].center = option.geo[0].center
// option.geo[3].center = option.geo[0].center
}
that.myChart.setOption(option)// 设置option
})
}
}
}
转载请注明出处或者链接地址：https://www.qianduange.cn//article/4094.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

CSS3渲染器CSS3DRenderer.js和CSS3模型

2024-04-15 21:04:28

transform-origin属性详解

2024-04-15 21:04:23

HTML5 CSS3实现小米商城 （完整版）

2024-04-15 21:04:07

Sass功能

2024-04-15 21:04:07

css flex布局 —— 项目属性 align-self

2024-04-15 21:04:00

Vue3后台管理系统（十三）全屏组件

2024-04-15 21:04:56

css改变图片颜色

2024-03-24 23:03:07

CSS样式：渐变色圆角边框

2024-04-15 21:04:44

【HTML | CSS】纯CSS居然能做出这种效果，一款宝藏网页分享（超详细讲解 | 附源码）

2024-04-15 21:04:20

在css3中如何添加圆角边框、盒子阴影以及文字阴影

2024-04-15 21:04:20

大家推荐的文章
1

js数组常用方法（19种）|你会的到底有多少呢？

2024-04-08 11:04:211000
2

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011000
3

ECharts 饼状图颜色设置

2024-02-16 14:02:001000
4

echarts实现动态渲染多柱图

2024-02-12 14:02:341000
5

移动端css布局大全

2024-02-06 15:02:421000
6

使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000
7

JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000
8

vue实现可输入可下拉选择的组件

2024-04-05 09:04:35999
9

echarts 图表，定时器实现数据实时动态

2024-03-13 00:03:28999
10

jQuery事件处理

2024-03-12 01:03:32999

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！