地图的常见配置

Qwe7

发布于 2022-06-16 11:44:23

45800

代码可运行

文章被收录于专栏：网络收集网络收集

运行总次数：0

代码可运行

3.地图的常见配置

缩放拖动: roam

var option = {
  geo: {
    type: 'map', // map是一个固定的值 
    map: 'chinaMap', //chinaMap需要和registerMap中的第一个参数保持一致, 
    roam: true, // 运行使用鼠标进行拖动和缩放
  }
}

名称显示: label

var option = {
  geo: {
    type: 'map', // map是一个固定的值
    map: 'chinaMap', //chinaMap需要和registerMap中的第一个参数保持一致,
    roam: true,
    label: {
      show: true
    }
  }
}

（地图不给放，大家自行尝试）

初始缩放比例: zoom

地图中心点: cente

var option = {
  geo: {
    type: 'map', // map是一个固定的值 
    map: 'chinaMap', //chinaMap需要和registerMap中的第一个参数保持一致, 
    roam: true,
    label: {
      show: true
    },
    zoom: 0.8, // 地图的缩放比例, 大于1代表放大, 小于1代表缩小 
    center: [87.617733, 43.792818] // 当前视角的中心点，用经纬度表示 
  }
}

（地图不给放，大家自行尝试）

4.地图的常见效果

显示某个区域

准备安徽省的矢量地图数据

加载安徽省地图的矢量数据

$.get('json/map/anhui.json', function (anhuiJson) { })

1

在Ajax的回调函数中注册地图矢量数据

echarts.registerMap(‘anhui’, anhuiJson)

配置 geo 的 type:‘map’ , map:‘anhui’

通过 zoom 调整缩放比例

通过 center 调整中心点

<script>
  var mCharts = echarts.init(document.querySelector("div")) $.get('json/map/anhui.json', function (anhuiJson) {
    console.log(anhuiJson) echarts.registerMap('anhui', anhuiJson) var option = {
      geo: {
        type: 'map',
        map: 'anhui',
        label: {
          show: true
        },
        zoom: 1.2,
        center: [116.507676, 31.752889]
      }
    };
    mCharts.setOption(option)
  })
</script>