В недавнем проекте есть потребность в большом экране, на котором должна отображаться карта административного района. В процессе тщательного поиска я обнаружил, что в этой области очень мало информации, и большинство из них платные для скачивания на CSDN, что действительно проблематично.

прямо над

ключевые точки знаний

геоданные

Geo – это формат отображения данных в электронных диаграммах, а geo – это база данных. С базовыми данными легко добиться описанного выше эффекта.

visualMap

visualMap — это компонент визуального картографирования, используемый для «визуального кодирования», то есть сопоставления данных с визуальными элементами (визуальными каналами), и от этой конфигурации зависит отрисовка карты.

 <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      $.get("../geo/市含县/320800_full.json", function(huaianJson) {
        echarts.registerMap("huaian", huaianJson);
        var chart = echarts.init(document.getElementById("echartMap"));
        chart.setOption({
          backgroundColor: "#404a59",
          visualMap: {
            type: "continuous",
            min: 0,
            max: 100,
            text: ["High", "Low"],
            realtime: false,
            calculable: true,
            color: ["#3ADEF1", "#0089FC", "#0057FE"],
            show: false
          },
          series: [
            {
              type: "map",
              mapType: "huaian",
              roam: false,
              label: {
                normal: {
                  show: true,
                  color: "#fff"
                },
                emphasis: {
                  show: true
                }
              },
              itemStyle: {
                emphasis: { label: { show: true } }
              },
              data: [
                { name: "金湖县", value: 80 },
                { name: "盱眙县", value: 50 },
                { name: "涟水县", value: 80 },
                { name: "洪泽区", value: 70 },
                { name: "淮阴区", value: 80 },
                { name: "淮安区", value: 40 },
                { name: "清江浦区", value: 50 }
              ]
            }
          ]
        });
      });
    </script>

Как получить геоданные

Я должен поблагодарить Али за удобствонажмите. Вы можете получить 2 типа данных json: xxx.json и xxx_full.json. Разница в том, что xxx.json содержит только общие данные текущего административного округа, а xxx_full.json содержит данные субадминистративного округа.

Пакетная загрузка

Ручная загрузка действительно проблематична, и предоставляется инструмент для загрузки. кликните сюдапорталПолучить данные по всем административным районам. Или выполните npm run create для повторной загрузки последних данных.