G2.antv 实现可视化地图，版本（2.0(低版本)），鼠标移入显示标识，点击获取区块时间，点击选中，默认高亮

嘿嘿小王同学

已于 2023-09-18 16:35:52 修改

阅读量596

点赞数 1

文章标签： jquery 前端 html javascript css anti-design-vue

于 2023-09-18 16:35:00 首次发布

本文链接：https://blog.csdn.net/weixin_61179633/article/details/132984648

版权

使用框架Ant Design Vue 需要用他们的产品做一个可视化地图，也是刚学习的，在此记录一下，，我这个是写在HTML中iframe内嵌的，代码里都已带注释，废话不多说上代码（改JSON可直接复用，目前：山东省）

效果图：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>中国地图</title>
 <script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>
  <script src="https://gw.alipayobjects.com/as/g/datavis/g2/2.3.13/index.js"></script>
  <script type="text/javascript" src="./shandong.json"></script>
  <script type="text/javascript" src="./point.json"></script>
</head>
<body>
<div id="c1"></div>
<script>
  const apiUrl = '/api/XXXXXXXXXXXXXXXXXXXXXXXXXXXXX';
  const token = JSON.parse(localStorage.getItem('Access-Token')) || '';
    $.ajax({
        url:apiUrl,
        type: 'get',
        headers: {
          'Token': `${token}`,
          'Content-Type': 'application/json'
        },
        dataType: 'json',
        success: function (res) {
          window.lawList = res || []
        }
    });
  </script>
<script>
    const Frame = G2.Frame
    if (!window.lawList){
      setTimeout(()=>{
        // 获取自己JSON的数据
        const features = mapData.features;
        // 获取自己JSON的数据
        const pointData = point.pointData;
        let bgData = []; // 用于地图背景层的绘制
        for(let i=0; i<features.length; i++) {
          let name = features[i].properties.name;
          bgData.push({
            'name': name
          });
        }
        let userData = [];
        let lawList = window.lawList
        // 处理数据 且 将每一个鼠标移入展示的都添加一个 下面想加几个就加几个 字段匹配就行
        const frame = new Frame(userData)
        userData = features.map(itemA => {
            let matchedB = lawList.find(itemB => itemA.properties.adcode === itemB.district_id);
            frame.addCol('LawNum', function(obj) {});
            return matchedB ? { "name": itemA.properties.name,"LawNum": matchedB.sum } : { "name": itemA.properties.name,"LawNum": 0 };
        });
        let Stat = G2.Stat;
        // 初始化开始创建1容器
        let chart = new G2.Chart({
          id: 'c1',
          // forceFit: true, //是否打开自适应
          width: 620,
          height: 450,
          plotCfg: {
            margin: [20, 10, 20, 40]
          }
        });
        // 实现一个背景的图层
        let bgView = chart.createView();
        bgView.source(bgData);
        bgView.tooltip(false);
        bgView.polygon().position(Stat.map.region('name', mapData)).color('#fff').style({
          stroke: '#00162A',
          padding: [ 1, 1 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
          lineWidth: 2,
          strokeWidth: 1, // 描边宽度
          raisingHeight: 300000,
          textAllowOverlap: true
        });
        // 创建图层 此处可以将你的鼠标移入显示的字自定义  只有匹配上字段就行 前面要添加的
        let userDataView = chart.createView();
        userDataView.source(userData, {
          'LawNum': {
            alias: '执法人员'
          }
        });
        userDataView.polygon().position(Stat.map.region('name', mapData))
          .tooltip('LawNum')
          .label('name', {label: {fill: '#00EAFF', shadowBlur: 1, shadowColor: '#fff'}})
          .size(300000)    // 切面高度
          .shape('extrude')
          // 此处可以设置单选 点击地图选择图层
          .selected({
            mode: 'single',
            style: {
              fill: '#fe9929' //选中颜色
            }
          })
          .color('value', '#4e98d9-#4e98d9')
          .style({
            fill: '#005B92',
            stroke: '#333',
            lineWidth: 1,
            raisingHeight: 2  // 抬升高度，距离底图的高度
          });
        chart.coord('map', {
          projection: 'mercator',
          max: [123.07, 42.38],
          min: [114.5, 35.55]
        });
        // 地图打点  文字显示
        var pointView = chart.createView();
        pointView.source(pointData);
        pointView.tooltip(false);
        pointView.point().position(Stat.map.location('long*lant'))
          .size('value', 6, 1)
          .color('#98F5FF')
          .shape('circle')
        // 此处完成渲染
        chart.render();
        // 如果想实现默认选择一个地图的区块高亮 下面这段代码可以实现
        var shape = chart.getAllGeoms()[1].getData();
        for (var i = 0, len = shape.length; i < len; i++) {
           var item = shape[i];
           var origin = item['_origin'];
           var name = origin.name;
           if (name === '济南') {
              chart.getAllGeoms()[1].setSelected(item);
             //  我这是iframe内嵌的传参给父级页面
             window.getLaw({
               city: userData[0].name,
               num: userData[0].LawNum
             });
           }
        }
        // 点击方法 ev可或许你当前点击区块返回的所有信息
        chart.on('plotclick', (ev) => {
          //  我这是iframe内嵌的传参给父级页面
          window.getLaw({
            city: ev.data._origin.name,
            num: ev.data._origin.LawNum
          });
        })
      },800)
    }
</script>
</body>
</html>

努力学习 get get get