标准地形图制作系列--接图表的制作方法
by 李远祥
接图表是标准地形图制作常用的方式，对于网络地图来说，从来不会出现接图表这东西，但是在标准地形图里面，这却是强制的规范。虽然很多行外人员都不清楚接图表是什么东西，但实际上接图表他们早就在中学的地理课本或者是街边买来的地图册上看到过（尽管这些地图不太规范）。
接图表的作用就不在这里罗嗦了，一般关注该话题的人都知道它的表达方式，这里不做论述。下面主要介绍一下如何在ArcGIS里面实现接图表。由于没有标准的数据，这里用一份比较简单的数据实现其操作步骤。
先说一下主要思路：首先要针对数据制作好地形图，这是前提条件。然后利用行政边界图层，单独制作一个地图，并插入到做好的地形图中，并作为接图表放置在地图的右上角。最后调整接图表的显示范围，让其范围与地形图范围一致。
制作地形图的过程这里省略，那是一个非常好时间和精力的事情，不要问我怎么知道，具体按照地形图规范做一下就知道有多苦逼。下面假设已经做好一张标准的地形图，我是说假设`(*∩_∩*)′  如下图所示

在【文件】--【页面和打印设置】先设置好打印的纸张大小，比例尺之类的就在图框中设置好对应的参考比例。然后调整好显示的范围等。切换到【布局】视图，这样才可以看到效果。

接下来就是需要插入接图表的关键步骤了。很多人都不会明白ArcGIS的【数据框】是什么概念，就是我们经常看到的在图层最上面的黄色的图标，感觉上有图层和图层组的位置，但【数据框】看起来一点作用都没有。下图红色箭头指向的就是【数据框】

在哲学上来说，存在的都是有价值的，何况数据框已经存在ArcGIS十多个版本中。数据框的概念其实可以看作是一张地图的组织，只不过很多人习惯性的将不同的地图放置在不同的Mxd中组织起来，而数据框的作用就是将多个地图放在同一个MXD中，需要查看不同的地图的时候可以自动激活（当然，这个是在数据视图中的做法）。而另一种非常重要的价值就是将多个地图显示在同一个纸面上，恰好接图表就是其中的一种多个地图在同一张图纸中的表现形式，只不过是一张是精细的地图，另一张类似于鹰眼的简图。
那接下来就是插入接图表的重要步骤。在菜单【插入】，可以插入一个【数据框】，如下图

标准动作是将该新建的数据框命名为“接图表”，然后选择接图表数据框，添加接图表图层。我在这里就用一个行政区界来表示，为了方便显示，将行政边界填充设置为无颜色，只显示边线。当然，如果有的只是边线数据，直接加载设置边线样式就行了。如下图

可以看到，大图中已经加入了一个小图，这个小图就是我们所说的接图表。使用选择工具，就是黑色箭头工具，将接图表移动到右上角位置，并且点击右键--属性，将修改接图表的图框样式和背景。一般将图框样式设置为简单的线，背景设置为纯白色，如下图

这样，接图表的基本模样就出来了。然后对接图表的图层显示一下标注信息，这样就像模象样了。再进一步就是要将两个图的范围对应起来，这一次就需要使用【标准工具】里面的缩放工具进行调整（千万不要用【布局】工具条上的工具，那只是相当于放大纸张在屏幕的显示而已）

最后，如果想两个数据框的范围能够对上，除了手动的方式之外，可以通过arcpy脚本来实行。可以参考mapping模块的具体方法

写完脚本之后可以在【地理处理】的Python中执行脚本进行对照。这里不做详细论述，在以后章节会有arcpy.mapping 模块的说明。
总结：接图表其实不难实现，主要是很多人不清楚使用多个数据框可以实现该效果。

前言
echarts是比较流行的图标和地图框架，文档清晰，灵活，满足各种自定义。众多的api接口，让使用者犹如大海捞针，每一个细节都需要通过api慢慢调整，耗费开发者大量的时间精力。
在这里补充一种新的图表地图框架，虽然做得不如echarts强大，适合快速开发节奏，让前端程序员在除了echarts以外还可以多一种选择。
antv
antv是蚂蚁金服团队打造的图表和地图框架（用过antd的同学应该知道这个团队）。
官方网站：https://antv.vision/zh/about
antv包含

G2（就是图表渲染，条形图，饼图，折线图等，里面有一些比较好看的图表设计，可以直接拿来用。）

G2地址 https://g2.antv.vision/zh/examples/gallery

G6 (思维导图，流程展示，树状图，)

G6地址 https://g6.antv.vision/zh/examples/tree/compactBox

F2 （针对移动端图表进行适配）

F2地址 https://f2.antv.vision/zh/examples/candlestick/basic

L7（地图，支持全球，全国（目前只支持中国），省，市，）

L7地址 https://l7.antv.vision/zh/examples/gallery

正如最开始所说，antv不如echarts全面，但参照了部分echarts的api借口，在使用过程能看到和echarts类似的api和相似的功能。
antv快速生成图表
antv的优势在于快速生成代码，配置图表的功能chartCub魔方（图表魔方，图表生成器）。
echarts自定义图表，是先写配置api才能看到生成图表的样式，而图表魔方为用户提供预览图表的功能，通过可视化界面，对图表进行样式配置并生成相应的代码。
图表魔方地址 https://chartcube.alipay.com/guide

这是未来前端发展的一种趋势，可视化配置，会慢慢代替许多代码的复制粘贴。虽然目前图表魔方只支持比较基础的图标配置，比较个性化的图表还是需要使用echarts。
笔者只用过G2和L7，其它内容暂不做展示，如果以后也有使用，会更新本篇博客。
G2使用
安装 @antv/g2plot

yarn add @antv/g2plot

npm i @antv/g2plot --save
以下代码都是通过配置后图表魔方自动生成的代码
//导入G2Plot 
import * as G2Plot from '@antv/g2plot';
//选择图表生成的dom节点，图表会生成到这个dom节点内。
//唯一需要注意的是，如果是vue或者react框架，进行这一步操作的时候，一定要确定这dom节点已经渲染成功，并且能够被找到。
const container = document.getElementById('app');
//需要渲染的数据，字段名和数据结构不可更改
const data = [
  {
    "series": "门店一",
    "x": "家具家电",
    "y": 185
  },
  {
    "series": "门店一",
    "x": "粮油副食",
    "y": 509
  },
  {
    "series": "门店一",
    "x": "美容洗护",
    "y": 901
  },
  {
    "series": "门店一",
    "x": "母婴用品",
    "y": 645
  },
  {
    "series": "门店一",
    "x": "进口食品",
    "y": 98
  },
  {
    "series": "门店一",
    "x": "食品饮料",
    "y": 724
  },
  {
    "series": "门店一",
    "x": "家庭清洁",
    "y": 471
  },
  {
    "series": "门店二",
    "x": "家具家电",
    "y": 276
  },
  {
    "series": "门店二",
    "x": "粮油副食",
    "y": 186
  },
  {
    "series": "门店二",
    "x": "美容洗护",
    "y": 648
  },
  {
    "series": "门店二",
    "x": "母婴用品",
    "y": 484
  },
  {
    "series": "门店二",
    "x": "进口食品",
    "y": 21
  },
  {
    "series": "门店二",
    "x": "食品饮料",
    "y": 721
  },
  {
    "series": "门店二",
    "x": "家庭清洁",
    "y": 917
  }
];

/** 图表配置，代码由图表魔方自动生成,直接复制粘贴就好了 */ 
const config = {
  /** 标题 */ 
  title: {
    visible: true,
    text: '考试科目柱状图',
  },
  /** 副标题 */ 
  description: {
    visible: true,
    text: '考试科目学生参加百分比',
  },
  legend: {
    flipPage: false,
  },
  xAxis: {
    title: {
      visible: false,
    },
  },
  yAxis: {
    title: {
      visible: false,
    },
  },
  /** 自使用父级的宽高 */ 
  forceFit: true,
  /** 也可以自定义图表的宽高 */ 
  // width: 570,
  // height: 360,
  xField: 'x',
  yField: 'y',
  stackField: 'series',
  /** 两种渲染颜色 */ 
  color: ['#e9e9e9', '#5b8ff9'],
};

/** 渲染实例 */
 const plot = new G2Plot.PercentStackedColumn(container, {
      data: chartsData,
      ...config,
    });
 plot.render();


如果是使用其它框架，就需要考验最基础的代码改造能力，echarts图表魔方，能够提供的是原生的js代码。
改造的完整react框架组件
import React, { useEffect, useState } from 'react';

import * as G2Plot from '@antv/g2plot';

/** 图标配置，代码由图表魔方自动生成 */ 
const config = {
  /** 标题 */ 
  title: {
    visible: true,
    text: '考试科目柱状图',
  },
  /** 副标题 */ 
  description: {
    visible: true,
    text: '考试科目学生参加百分比',
  },
  legend: {
    flipPage: false,
  },
  xAxis: {
    title: {
      visible: false,
    },
  },
  yAxis: {
    title: {
      visible: false,
    },
  },
  /** 自使用父级的宽高 */ 
  forceFit: true,
  /** 也可以自定义图表的宽高 */ 
  // width: 570,
  // height: 360,
  xField: 'x',
  yField: 'y',
  stackField: 'series',
  /** 两种渲染颜色 */ 
  color: ['#e9e9e9', '#5b8ff9'],
};

const PaperRadar: React.FC = () => {
  type ChartsDataType = {
    series: string;
    x: string;
    y: number;
  }[];

  /** 数据渲染 */
  const [chartsData, setChartsData] = useState<ChartsDataType>([] as ChartsDataType);

/** 渲染函数 */
  const chartsRender = () => {
    const container: HTMLElement = document.getElementById('exam-bar') as HTMLElement;

    const plot = new G2Plot.PercentStackedColumn(container, {
      data: chartsData,
      ...config,
    });
    plot.render();
  };

  useEffect(() => {
    setChartsData([
      {
        series: '门店一',
        x: '家具家电',
        y: 777,
      },
      {
        series: '门店一',
        x: '粮油副食',
        y: 934,
      },
      {
        series: '门店一',
        x: '美容洗护',
        y: 454,
      },
      {
        series: '门店一',
        x: '母婴用品',
        y: 999,
      },
      {
        series: '门店一',
        x: '进口食品',
        y: 98,
      },
      {
        series: '门店一',
        x: '食品饮料',
        y: 317,
      },
      {
        series: '门店一',
        x: '家庭清洁',
        y: 307,
      },
      {
        series: '门店二',
        x: '家具家电',
        y: 142,
      },
      {
        series: '门店二',
        x: '粮油副食',
        y: 199,
      },
      {
        series: '门店二',
        x: '美容洗护',
        y: 582,
      },
      {
        series: '门店二',
        x: '母婴用品',
        y: 64,
      },
      {
        series: '门店二',
        x: '进口食品',
        y: 89,
      },
      {
        series: '门店二',
        x: '食品饮料',
        y: 641,
      },
      {
        series: '门店二',
        x: '家庭清洁',
        y: 984,
      },
    ]);
    // chartsRender();
  }, []);

  useEffect(() => {
    if (chartsData.length) {
      chartsRender();
    }
  }, [chartsData]);

  return (
    <>
      <div id="exam-bar" style={{width:"100%"}}></div>
    </>
  );
};

export default PaperRadar;

L7地图的使用
根据antv的l7的安装教程，分别安装 @antv/l7 @antv/l7-district @antv/l7-maps
yarn add @antv/l7
yarn add @antv/l7-district
yarn add @antv/l7-maps
或
npm i @antv/l7 --save
npm i @antv/l7-district
npm i @antv/l7-maps

react代码
import React, { useEffect, useState } from 'react';

import { Scene } from '@antv/l7';
import { CountryLayer } from '@antv/l7-district';
import { Mapbox } from '@antv/l7-maps';

/** 地图配置 */

// 我选择的事全国地图，name和对应的code都是antv l7官方提供的，
// value字段及字段名是可以自定义的

const ProvinceData = [
  {
    name: '云南省',
    code: 530000,
    value: 0,
  },
  {
    name: '黑龙江省',
    code: 230000,
    value: 0,
  },
  {
    name: '贵州省',
    code: 520000,
    value: 0,
  },
  {
    name: '北京市',
    code: 110000,
    value: 0,
  },
  {
    name: '河北省',
    code: 130000,
    value: 0,
  },
  {
    name: '山西省',
    code: 140000,
    value: 0,
  },
  {
    name: '吉林省',
    code: 220000,
    value: 0,
  },
  {
    name: '宁夏回族自治区',
    code: 640000,
    value: 0,
  },
  {
    name: '辽宁省',
    code: 210000,
    value: 0,
  },
  {
    name: '海南省',
    code: 460000,
    value: 0,
  },
  {
    name: '内蒙古自治区',
    code: 150000,
    value: 0,
  },
  {
    name: '天津市',
    code: 120000,
    value: 0,
  },
  {
    name: '新疆维吾尔自治区',
    code: 650000,
    value: 0,
  },
  {
    name: '上海市',
    code: 310000,
    value: 0,
  },
  {
    name: '陕西省',
    code: 610000,
    value: 0,
  },
  {
    name: '甘肃省',
    code: 620000,
    value: 0,
  },
  {
    name: '安徽省',
    code: 340000,
    value: 0,
  },
  {
    name: '香港特别行政区',
    code: 810000,
    value: 0,
  },
  {
    name: '广东省',
    code: 440000,
    value: 0,
  },
  {
    name: '河南省',
    code: 410000,
    value: 0,
  },
  {
    name: '湖南省',
    code: 430000,
    value: 0,
  },
  {
    name: '江西省',
    code: 360000,
    value: 0,
  },
  {
    name: '四川省',
    code: 510000,
    value: 0,
  },
  {
    name: '广西壮族自治区',
    code: 450000,
    value: 0,
  },
  {
    name: '江苏省',
    code: 320000,
    value: 0,
  },
  {
    name: '澳门特别行政区',
    code: 820000,
    value: 0,
  },
  {
    name: '浙江省',
    code: 330000,
    value: 0,
  },
  {
    name: '山东省',
    code: 370000,
    value: 0,
  },
  {
    name: '青海省',
    code: 630000,
    value: 0,
  },
  {
    name: '重庆市',
    code: 500000,
    value: 0,
  },
  {
    name: '福建省',
    code: 350000,
    value: 0,
  },
  {
    name: '湖北省',
    code: 420000,
    value: 0,
  },
  {
    name: '西藏自治区',
    code: 540000,
    value: 0,
  },
  {
    name: '台湾省',
    code: 710000,
    value: 100,
  },
];

const StudentPostion: React.FC = () => {
 const draw = () => {
 	/** scene这个实例一定要在dom渲染完成之后创建 */
    const scene = new Scene({
    /** 传入需要渲染的dom节点的id */
      id: 'student-map',
      /** 渲染的地图会有一个antv的logo,可以让其消失 */
      logoVisible: false,
      map: new Mapbox({
        center: [116.2825, 39.9],
        pitch: 0,
        /** 其实这是一张世界地图，通过blank将除中国外的地方变为空白 */
        style: 'blank',
        zoom: 3,
        minZoom: 0,
        maxZoom: 10,
      }),
    });

    scene.on('loaded', () => {
      new CountryLayer(scene, {
      	/** 创建的数据，绑定到data字段进行渲染 */
        data: ProvinceData,
        joinBy: ['adcode', 'code'],
        depth: 1,
        /** 省界线颜色 */
        provinceStroke: '#fff',
        /** 省界线颜色宽度 */
        provinceStrokeWidth: 1,
        /** 市界线颜色 */

        cityStroke: '#EBCCB4',
        cityStrokeWidth: 1,
        /** 地图文字颜色 */
        label: {
        	/** 文字背景色 */
          stroke: 'rgba(0,0,0,0)',
          /** 文字颜色 */
          color: 'transparent',
        },
        fill: {
          color: {
       /** field 字段传入数据里面的具体值的字段名称 */
            field: 'value',
       /** 根据值的大小会渲染以下的颜色，值越大，会渲染数组靠后的颜色 */
            values: ['#BAE7FF', '#69C0FF', '#1890FF', '#0A73DA', '#004599'],
          },
        },
        /** 鼠标放上去的提示框内容渲染，相当于echarts的tooltip */
        popup: {
          enable: true,
          Html: (props: any) => {
            return `<span>${props.NAME_CHN}学生</span>:<span>${props.value}人</span>`;
          },
        },
      });
    });
  };

  useEffect(() => {
    draw();
  }, []);

  return (
    <>
      <div id="student-map" style={{ height: '400px', padding: '20px 0 0 30px', fontWeight: 600 }}>
        <div style={{ fontSize: '18px' }}>学生地理位置分布统计图</div>
      </div>
    </>
  );
};


效果图



antv的使用大家还是自己去体验吧。这里能展示的内容只是九牛一毛

echarts地图的tooltip自定义样式显示图表
最近遇到一个需求：需要在地图中实现鼠标点击或者停留在地图中某一片区域时，该区域显示亮高和显示tooltip提示框信息，但是难点在于需要在tooltip提示框中再绘制一层图表。按以往我们做过都是这种，tooltip提示框中只是单纯显示文本信息。



但是，需求要的不是这种，先不多说，直接给你们看最终展示的效果：

鼠标点击或停留在某一片区域时，在tooltip提示框中显示该区域的另外一层数据图表，鼠标单击可选中或取消区域的亮高显示，以及两层地图凸显一个立体层次感。看完记得点个赞（技术分享，加快成长）。


这里我们以广州市作为Demo，可以看出这是我们想要的在tooltip提示框中绘制另外一层图表的效果。
ok，接下来我们不唠嗑，直接上代码（大家最喜欢的哈哈）。
项目结构：

项目是使用Vue + typescript + antd vue，大家根据自己的项目来配置。


一、创建gzMap.vue文件：
<template>
  <div class="main">
  	<!-- 绘制广州地图 -->
    <div ref="gzMap" class="gzMap"></div>
    <!-- 点击不同模块，切换显示不同tooltip中的图表类型，这里Demo只展示一种类型 -->
    <div class="Mybutton">
      <a-radio-group :value="typeName" @change="handleTypeChange">
        <a-radio-button value="type1">
          模块一
        </a-radio-button>
        <a-radio-button value="type2">
          模块二
        </a-radio-button>
      </a-radio-group>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import gzMapData from "@/common/gzMap-common/index";

@Component
export default class HelloWorld extends Vue {

  //模块名称
  private typeName: string = "type1";

  // 广州地图各类型指数数据
  private guangzhouDatas: any;

  // 引入广州地图地理位置数据
  private guangzhouMap: any = require("@/common/gzMap-common/guangzhou.json");

  // 引入地图需要的tooltip配置项
  private mapAreaDatas: any;

  private $echarts: any;

  //监听传入指数模块名称改变
  @Watch("typeName", { immediate: true })
  private watchNum(val: string, oldVal: string) {
    // 根据指数类型引入对应echart配置项文件
    this.OptionType();
    // 根据指数类型引入对应echart地图数据文件
    this.dataType();
  }

  private mounted() {
    const ele = this.$refs.gzMap;
    const guangzhouChart: any = this.$echarts.init(ele);
    //页面切换，销毁监听事件
    this.$on("hook:beforeDestroy", () => {
      window.removeEventListener("resize", () => {
        guangzhouChart.resize();
      });
    });
  }

  // 根据不同模块指数，按需动态引入不同echart配置项文件，用于地图tooltip渲染
  private OptionType() {
    if (this.typeName == "type1") {
      //指数1数据
      import("@/common/gzMap-common/gzMapData1").then(module => {
        this.mapAreaDatas = module.default.option_gzMapType;
      });
    }
  }

  // 根据不同模块指数，按需要动态引入不同地图数据文件
  private dataType() {
    import("@/common/gzMap-common/index").then(module => {
      //指数模块名称
      let tag: string = "";
      tag = this.typeName;
      switch (tag) {
        case "type1": {
          this.guangzhouDatas = module.default.dataType1;
          break;
        }
        // 根据自己的需求可引入多种地图数据文件
        default: {
          break;
        }
      }
      //地图数据加载后执行，绘制地图
      if (this.guangzhouDatas) {
        this.mapDraw();
      }
    });
  }

  //绘制广州地图
  private mapDraw() {
    const ele = this.$refs.gzMap;
    const guangzhouChart = this.$echarts.init(ele, "shine");
    guangzhouChart.showLoading();
    guangzhouChart.hideLoading();
    const option = {
      tooltip: {
        textStyle: {
          color: "#B1D6F6",
          fontSize: 8,
          padding: 20,
          align: "left"
        },
        trigger: "item",
        formatter: function(params:any, ticket:any, callback:any) {
          // 区域名称
          let AreaName = params.data.name;
          // 区域数据百分比
          let percent = params.data.percent;
          // 区域数据增长百分比
          let Increase = params.data.Increase;
          // 给tooltip传入元素的id,延迟执行，否则会找不到元素
          setTimeout(function() {
            that.tooltipFn("toolpitData", params);
          }, 100);
          return `<div style="width:8rem;height:12vh;"><div class="tooltipArea"><div class="title">${AreaName}</div><div class="percent"><p>${percent}%</p><p>+${Increase}%<span class="triangle-up"></span></p></div><div id="toolpitData" class="toolpitData"></div></div></div>`;
        }
      },
      // 第二层地图，可设置与一层地图位置偏差一些，突出点立体层次感
      geo: {
        map: "guangzhou",
        roam: false,
        zoom: 1.1,
        aspectScale: 1.1, //长宽比
        itemStyle: {
          normal: {
            areaColor: "#073E5420",
            shadowColor: "transparent"
          },
          emphasis: {
            borderWidth: 1,
            color: "#166F6134",
            label: {
              show: false
            }
          }
        }
      },
      // 第一层地图
      series: [
        {
          name: "广州",
          type: "map",
          aspectScale: 1, // 长宽比
          zoom: 1.1,
          mapType: "guangzhou", // 自定义扩展图表类型
          selectedMode: "multiple",
          label: {
            show: false
          },
          // 是否开启鼠标缩放和平移漫游
          roam: false,
          //地图样式：
          itemStyle: {
            borderColor: "#10B9C1",
            borderWidth: "1",
            shadowColor: "#23C6CE",
            shadowBlur: 50,
            shadowOffsetX: -10,
            shadowOffsetY: -5,
            areaColor: "#247a9a34"
          },
          // 高亮状态下的多边形和标签样式:
          emphasis: {
            label: {
              color: "#FFFFFF"
            },
            itemStyle: {
              areaColor: "#389BB7"
            }
          },
          data: this.guangzhouDatas
        }
      ]
    };
    this.$echarts.registerMap("guangzhou", this.guangzhouMap);
    guangzhouChart.setOption(option);
    const that = this;
    // 鼠标单击选中亮高或取消亮高，显示区域数据
    guangzhouChart.on("click", function(params:any) {
      //第二层地图位地理坐标系组件，不设置鼠标单击事件
      if (params.componentType === "geo") {
        return;
      }
      // 遍历广州地图判断被点击选中的区域
      for (let i = 0; i < that.guangzhouDatas.length; i++) {
        if (params.name == that.guangzhouDatas[i].name) {
          if (that.guangzhouDatas[i].checked === false) {
            // 设置选中区域亮高
            that.guangzhouDatas[i].checked= true;
            params.data.checked= true;
          } else {
            // 取消选中区域亮高
            that.guangzhouDatas[i].checked= false;
            params.data.checked= false;
          }
        }
      }
      guangzhouChart.setOption(option);
    });

    window.addEventListener("resize", function() {
      guangzhouChart.resize();
    });
  }

  // 绘制广州地图tooltip中的图表
  private tooltipFn(el:string, params:any) {
    const event = document.getElementById(el);
    // 根据不同类型指数分别引用不同图表数据
    if (this.typeName == "type1") {
      // 设置指数1数据
      let dataLength = this.mapAreaDatas.series.length;
      for (let i = 0; i < dataLength; i++) {
        this.mapAreaDatas.series[i].data = [];
        this.mapAreaDatas.series[i].data = params.data.dataList[i];
      }
    }
    const toolitpChart: any = this.$echarts.init(event);
    toolitpChart.setOption(this.mapAreaDatas);
    window.addEventListener("resize", function() {
      toolitpChart.resize();
    });
  }

  // 切换模块类型，这里Demo只引入一种tooltip层图表类型
  private handleTypeChange(e:any) {
    this.typeName = e.target.value;
    this.$message.success("当前地图加载类型是："+ e.target.value)
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
.main {
  width: 100%;
  height: 100%;
}
.gzMap {
  width: 100%;
  height: 100%;
  background-color: black;
}
.toolpitData {
  width: 100%;
  height: 4vh;
  margin: 0.5vh auto 0;
}
.tooltipArea {
  width: 7rem;
  height: 100%;
  .title {
    text-align: left;
    font-size: 0.05rem;
    color: #9fc5e4;
    padding-left: 0.1rem;
  }
  .percent {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.18rem;
    margin-top: 0.5vh;
  }
  .percent :nth-child(1) {
    color: #9ac0de;
    margin-left: 0.1rem;
  }
  .percent :nth-child(2) {
    font-size: 0.16rem;
    color: #38e5a5;
    position: relative;
    margin-right: 0.3rem;
    .triangle-up {
      position: absolute;
      top: 0;
      width: 0;
      height: 0;
      border-left: 0.2rem solid transparent;
      border-right: 0.2rem solid transparent;
      border-bottom: 0.4rem solid #38e5a5;
      margin-top: 0.5vh;
    }
  }
}
.Mybutton {
  margin: 5vh auto;
}
</style>


二、创建guangzhou.json文件(代码行数太长这里不贴出来了，大家自己动动手) 文件下载地址：

广州市地图json文件



记得选能显示具体到镇区的json文件。

三、创建index.ts（存放静态数据文件）
// 广州地图各类型指数数据
import gzMapData from './gzMap-data'

//广州地图各类型指数数据
export default {
  ...gzMapData
}


四、创建gzMap-data.ts（tooltip提示框中的图表数据文件）
export default {
  // 指数1，只供参考数据结构格式，数据内容是随便写的，无任何意义
  dataType1: [
    { name: "荔湾区", dataList: [[5,5], [10,10], [8,8]], percent: 88, Increase: 5, checked: false },
    { name: "越秀区", dataList: [[5,5], [10,10], [5,5]], percent: 85, Increase: 1, checked: false },
    { name: "海珠区", dataList: [[5,5], [10,10], [5,5]], percent: 70, Increase: 9, checked: false },
    { name: "天河区", dataList: [[5,5], [10,10], [12,12]], percent: 88, Increase: 3, checked: false },
    { name: "白云区", dataList: [[5,5], [10,10], [5,5]], percent: 50, Increase: 3, checked: false },
    { name: "黄埔区", dataList: [[5,5], [10,10], [5,5]], percent: 66, Increase: 4, checked: false },
    { name: "番禺区", dataList: [[5,5], [10,10], [9,9]], percent: 50, Increase: 8, checked: false },
    { name: "花都区", dataList: [[5,5], [10,10], [5,5]], percent: 50, Increase: 1, checked: false },
    { name: "南沙区", dataList: [[5,5], [10,10], [7,5]], percent: 50, Increase: 5, checked: false },
    { name: "从化区", dataList: [[5,5], [10,10], [5,5]], percent: 70, Increase: 3, checked: false },
    { name: "增城区", dataList: [[5,5], [10,10], [6,5]], percent: 50, Increase: 7, checked: false },
  ],
}

五、创建gzMapData1.ts（tooltip提示框中的图表配置文件）
import echarts from "echarts";
export default {
  //数据图表配置（指数1）,根据需要引入不同配置，这些很简单，直接去echarts官网找一个
  option_gzMapType: {
    grid: {
      top: "3%",
      width: "100%",
      height: "50%",
      left: 0,
      bottom: 0
    },
    legend: {
      data: ["产业A", "产业B"],
      icon: "circle",
      itemWidth: 8,
      itemHeight: 8,
      bottom: 0,
      top: 15,
      textStyle: {
        color: "rgba(150, 245, 246, 1)",
        fontSize: 6
      }
    },
    xAxis: {
      type: "value",
      max: 25,
      axisLabel: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: false
      }
    },
    yAxis: {
      type: "category",
      axisLine: {
        show: false
      }
    },
    series: [
      {
        type: "bar",
        barWidth: "40%",
        name: "产业A",
        stack: "one",
        itemStyle: {
          color: "RGBA(255,205,67)"
        },
        data: [
          {
            value: 4,
            itemStyle: {
              color: "RGBA(196, 255, 255, 1)"
            }
          },
          {
            value: 4,
            itemStyle: {
              color: "RGBA(255,205,67)"
            }
          }
        ]
      },
      {
        type: "bar",
        name: "产业B",
        itemStyle: {
          color: "RGBA(221,79,66)"
        },
        stack: "one",
        data: [
          {
            value: 8,
            itemStyle: {
              color: "RGBA(75,139,244)"
            }
          },
          {
            value: 8,
            itemStyle: {
              color: "RGBA(221,79,66)"
            }
          }
        ]
      },
      {
        type: "bar",
        name: "产业C",
        itemStyle: {
          color: "RGBA(75,139,244)"
        },
        stack: "one",
        data: [
          {
            value: 8,
            itemStyle: {
              color: "RGBA(221,79,66)"
            }
          },
          {
            value: 8,
            itemStyle: {
              color: "RGBA(75,139,244)"
            }
          }
        ]
      }
    ]
  },
}


功能的实现就差不多介绍完了，这里为了简单方便又快速地向大家介绍，就只介绍配置了一种tooltip层的配置图表，大家根据自己的需求可往里面加入更多元素。其中的地图区域被鼠标选中或者停留时显示亮高以及设置两层地图突出一个层次感等这些效果，大家可以自己研究一下echarts的配置文档，博主也是一步步摸爬滚打过来的，如果有什么说的不对，请指出来哈哈！

如果这个项目对你有帮助或者感兴趣，记得帮忙点个赞呀，如果有什么问题也可以私信留言。

目录

 

基本概念

代码与实例

 

基本概念

在本地地图上绘制图表，图表经过响应弹出来。

想想真是令人兴奋的事情，到时候用Qt的Widget和QGraphicsView结合QWebEngine搞一层。来一个科技感十足的魔幻页面。

下面来说明下这个逻辑。

使用Leaflet的WMTS接口请求本地Geoserver服务，从而获取数据。然后再把echarts放到Leaflet的响应事件里面。比如框。弹框的时候构造图表。通过这样的方式，即可完成地图上显示图标。

 

 

代码与实例

程序运行截图如下：



当选中某一个城市后！



源码如下：

test8.html

<!DOCTYPE html>
<html>
<head>
	
	<title>Hello World</title>

	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	
	<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />


	<link rel="stylesheet" href="leaflet.css" />
    <script src="leaflet.js"></script>        
	<script src="leaflet-tilelayer-wmts-src.js"></script>
	<script src="echarts.js"></script>

	<style>
		html, body {
			height: 100%;
			margin: 0;
		}
		
		#map {
			width: 100%;
			height: 100%;
		}
		
		.chart{
			width: 600px;
			height: 300px;
			background-color: #fff;
		}
	</style>

	
</head>
<body>
<script src="test6.js" type="text/javascript"></script>
<div id='map'></div>
<script type="text/javascript">


	
   var ign = new L.TileLayer.WMTS( "http://XXX.XXX.XXX.XXX:8080/geoserver/gwc/service/wmts" ,
                               {
                                   layer: 'GG_9:gg_9',
                                   tilematrixset: "EPSG:900913",
								   Format : 'image/png',
								   TileMatrix: 'EPSG:900913:8'
                               }
                              );
							  
	var map = L.map('map', {
		minZoom: 4,
		maxZoom: 7
	}).setView([32, 118], 7);



	L.control.scale({'position':'bottomleft','metric':true,'imperial':false}).addTo(map);

	map.addLayer(ign);

	map.invalidateSize(true);
	

	//添加的数据
	function onEachFeature(feature, layer){
		
		var idStr = feature.geometry.properties.idStr.toString() ;
		var popupContent = '<div style="width:350px;height:300px" id="' + idStr + '"></div>';
		layer.bindPopup(popupContent, {});
		layer.on('popupopen', function(e){
		
			var myChart = echarts.init(document.getElementById(idStr));
			// 指定图表的配置项和数据
			var option = {
				title: {
					text: '测试'
				},
				tooltip: {},
				legend: {
					data:['销量']
				},
				xAxis: {
					data: ["衬衫","羊毛衫","雪纺衫","裤子"]
				},
				yAxis: {},
				series: [{
					name: '销量',
					type: 'bar',
					data: [5, 20, 36, 10]
				}]
			};

			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);
			});
	}
	
	L.geoJSON([bicycleRental], {

		onEachFeature: onEachFeature,
		pointToLayer: function (feature, latlng) {
		
			return L.circleMarker(latlng, {
				radius: 8,
				fillColor: "#ff7800",
				color: "#000",
				weight: 1,
				opacity: 1,
				fillOpacity: 0.8
			});
		}
	}).addTo(map)

	//添加的数据
	
</script>



</body>
</html>

test6.js

var bicycleRental = {
	"type" : "FeatureConllection",
	"features" : [
		{
			"geometry" : {
				"type" : "Point",
				"coordinates" : [118.8, 32.05],
				"properties" : {
					"popupContent" : "南京",
					"idStr" : "njChart"
				}
			},
			"type" : "Feature",
			"id" : 100
		},
		{
			"geometry" : {
				"type" : "Point",
				"coordinates" : [119.2, 34.55],
				"properties" : {
					"popupContent" : "连云港",
					"idStr" : "lygChart"
				}
			},
			"type" : "Feature",
			"id" : 101
		},
				{
			"geometry" : {
				"type" : "Point",
				"coordinates" : [118.26, 33.94],
				"properties" : {
					"popupContent" : "宿迁",
					"idStr" : "sqChart"
				}
			},
			"type" : "Feature",
			"id" : 102
		},
		{
			"geometry" : {
				"type" : "Point",
				"coordinates" : [119.12, 33.53],
				"properties" : {
					"popupContent" : "淮安",
					"idStr" : "haChart"
				}
			},
			"type" : "Feature",
			"id" : 103
		},
		{
			"geometry" : {
				"type" : "Point",
				"coordinates" : [120.15, 33.32],
				"properties" : {
					"popupContent" : "盐城",
					"idStr" : "ycChart"
				}
			},
			"type" : "Feature",
			"id" : 104
		},
		{
			"geometry" : {
				"type" : "Point",
				"coordinates" : [119.95, 32.40],
				"properties" : {
					"popupContent" : "泰州",
					"idStr" : "tzChart"
				}
			},
			"type" : "Feature",
			"id" : 105
		},
		{
			"geometry" : {
				"type" : "Point",
				"coordinates" : [119.41, 32.35],
				"properties" : {
					"popupContent" : "扬州",
					"idStr" : "yzChart"
				}
			},
			"type" : "Feature",
			"id" : 106
		},
		{
			"geometry" : {
				"type" : "Point",
				"coordinates" : [120.92, 31.94],
				"properties" : {
					"popupContent" : "南通",
					"idStr" : "ntChart"
				}
			},
			"type" : "Feature",
			"id" : 107
		},
		{
			"geometry" : {
				"type" : "Point",
				"coordinates" : [119.99, 31.755],
				"properties" : {
					"popupContent" : "常州",
					"idStr" : "czChart"
				}
			},
			"type" : "Feature",
			"id" : 108
		},
		{
			"geometry" : {
				"type" : "Point",
				"coordinates" : [120.33, 31.44],
				"properties" : {
					"popupContent" : "无锡",
					"idStr" : "wxChart"
				}
			},
			"type" : "Feature",
			"id" : 109
		},
		{
			"geometry" : {
				"type" : "Point",
				"coordinates" : [120.61, 31.26],
				"properties" : {
					"popupContent" : "苏州",
					"idStr" : "szChart"
				}
			},
			"type" : "Feature",
			"id" : 110
		}
	]
}

这里有一个要注意的地方！

echarts他加载的时候需要一个div，并且还得知道这个div的id，如果没有这个将会报错，说dom找不到这个div



这个弹出的点击小点弹出的功能，是在点击后才创建div的，所以没有点击前相关的dom树如下，当点击后，可以看到此处的结构如下！