美文网首页
地图渲染

地图渲染

作者: 咕嘟咕嘟li | 来源:发表于2022-07-04 13:36 被阅读0次

步骤:

  1. 通过 DataV.GeoAtlas地理小工具系列 网站获取到数据
  2. registerMap注册地图
  3. 初始化图表
  4. 配置echarts地理坐标系组件, 配置要渲染的数据
示意图 示意图
效果图 效果图
tooltip内容自定义 tooltip内容自定义

核心代码如下,更多代码详细见仓库: https://gitee.com/whongli/map

import * as echarts from 'echarts'
import {httpGet} from '@/js/api/baseApi'
var chinaMap

export default {
  methods: {
    async init ({url, option}) {
      let res = await httpGet(url) // 获取地图数据
      let chinaJson = res
      echarts.registerMap('china', chinaJson)
      chinaMap = echarts.init(document.getElementById('china-map'))
      chinaMap.setOption(option)
      chinaMap.on('click', async (params) => {
        console.log(params)
        this.$router.push(`/province?name=${params.name}`)
      })
    },
    async provinceInit ({url, option}) {
      let res = await httpGet(url)
      let chinaJson = res
      echarts.registerMap('china', chinaJson)
      chinaMap = echarts.init(document.getElementById('china-map'))
      chinaMap.setOption(option)
      chinaMap.on('click', async (params) => {
        console.log(params)
        // TODO: 省市点击回调
      })
    },
    /**
     * 地图配置
     * @param {*} series {data,title,zoom, tooltip, center}
     * @returns 返回配置信息
     */
    constructorOption (series) {
      return {
        backgroundColor: '#fff',
        // 地图上圆点的提示
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            console.log(params)
            return params.name + ' : ' + params.value[2]
          }
        },
        // 图例按钮 点击可选择哪些不显示
        legend: {
          orient: 'vertical',
          left: 'left',
          top: 'bottom',
          data: [],
          textStyle: {
            color: '#fff'
          }
        },
        // 地理坐标系组件
        geo: {
          map: 'china',
          zoom: series.zoom || 1.25, // 设置初始化的缩放比例
          roam: false, // true 允许缩放拖动
          center: series.center || [104.123557, 32.058039],
          label: {
            // true hover时地图内部会显示城市名
            emphasis: {
              show: false
            }
          },
          tooltip: series.tooltip || {
            show: true,
            trigger: 'item',
            formatter: function (params) {
              console.log(params)
              let html = `<div class="m-tooltip-wrap">
              <p>地区: ${params.name} </p>
              <p>人口:<span class="m-text-red">46万</span>(人) ${params.name} </p>
              <p>旅游人数:<span class="m-text-red">6万</span>(人) ${params.name} </p>
              </div>`
              return html
            }
          },
          itemStyle: {
            // 地图背景色
            normal: {
              areaColor: '#fff',
              borderColor: '#747569'
            },
            // 悬浮时
            emphasis: {
              areaColor: '#c82a29',
              borderColor: '#c82a29'
            }
          },
          regions: [{ // 省份颜色与界线颜色的修改,如果想修改多个省份就在后面多添加几个对象即可.
            // name: '广东', // 对应的是import './china'  数据中的名称如: name: '广东'
            // itemStyle: {
            //   normal: {
            //     borderColor: '#c82a29', // 省份界线颜色
            //     borderWidth: 1 // 省份界线的宽度
            //   }
            // }
          }]
        },
        // 系列列表
        series: [
          {
            name: series.name,
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: series.data, // 从方法中传进来
            symbolSize: 8, // 点的大小
            symbol: 'circle',
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            // 涟漪特效相关配置
            rippleEffect: {
              color: '#c82a29',
              period: 4,
              scale: 2,
              brushType: 'fill', // stroke | fill
              number: 2
            },
            showEffectOn: 'render',
            itemStyle: {
              normal: {
                color: {
                  type: 'radial',
                  colorStops: [
                    {
                      offset: 1,
                      color: '#c82a29'
                    }
                  ],
                  global: false // 缺省为 false
                }
              }
            }
          }
        ]
      }
    }
  }
}

相关文章

  • (3)各种事件监听

    百度地图有几个重要的事件监听 比如说地图加载完成,地图渲染完成,地图状态改变监听 从其他界面返回,会回调地图渲染完...

  • 地图渲染

    步骤: 通过 DataV.GeoAtlas地理小工具系列 网站获取到数据 registerMap注册地图 初始化图...

  • MOSGL室内地图开放指南

    MosGL室内地图渲染SDK,基于WebGL图形渲染,同时支持2D&3D地图;在小场景渲染中,iOS及Andoid...

  • WebGL绘制基本图形--线

    前言 地图的渲染其实可以分解为线、面、纹理、文字的渲染。为了了解地图渲染的实现原理并实际练习WebGL,进行了这个...

  • OpenStreetMap 地图渲染

    使用地图服务时需要根据业务调整地图的主题,不同主题使用了相同的地图数据配合不同的样式,达到不同类型地图的效果。 地...

  • echart地图

    【地图底图 渲染】geo: [{map: 'china',// selectedMode:true,//允许选中多...

  • 前端js读写本地文件(2019年和2020年行政区域变化对比)

    最近做监测可视化大屏的热力地图功能,成都新津县,后端返回了数据,前端渲染热力地图时,始终渲染不出来数据。后来发现是...

  • 【python实战】matplotlib绘图(一)

    上次用pyecharts画了地图,【python实战】 pyecharts绘制地图虽然很好看,但是,考虑到渲染成图...

  • 超图产品需求研究

    绘制耗时优化 地图的绘制耗时是指显示和渲染数据所需要的时间。想优化地图的绘制耗时需要提升地图要素的显示效率,可从优...

  • GeoServer使用CSS渲染地图

    CSS Style是GeoServer的一个扩展插件,使用CSS写起来的地图渲染策略文件相比较SLD而言,非常的简...

网友评论

      本文标题:地图渲染

      本文链接:https://www.haomeiwen.com/subject/xfudbrtx.html