使用vue2 + Echarts + geoServer服务发布图层服务显示地图

1.引入Echarts和jquery这两个库，没有的话通过npm安装一下：

import * as echarts from "echarts";

import $ from "jquery";

 initMap() {

  var chartDom = document.getElementById("map");

      var myChart = echarts.init(chartDom);

      var option;

      myChart.showLoading();

   // 发布geoserver服务，拿到其geojson数据，我这个发布的是两个镇的数据

// 复制上边地址栏的链接，放到这里。

      $.get(     

        "http://39.103.207.37:8899/geoserver/TownBorder/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=TownBorder%3A%E9%95%87%E7%95%8C&maxFeatures=50&outputFormat=application%2Fjson",

        function (geoJson) {

          myChart.hideLoading();

          echarts.registerMap("sx", geoJson);

          myChart.setOption(

            (option = {

              tooltip: {

                // item 在地图系列中通常指代地图的一个区域

                trigger: "item",

                // b是name名称 c是value值 （）是单位

                formatter: "{b}<br/>{c} (p / km2)",

              },

              // 工具箱

              toolbox: {

                show: true,

                orient: "vertical",

                left: "right",

                top: "center",

                // dataView 数据视图 restore 还原 saveAsImage 保存为图片

                // feature: {

                //   dataView: { readOnly: false },

                //   restore: {},

                //   saveAsImage: {},

                // },

              },

              visualMap: {

                min: 800,

                max: 50000,

                text: ["High", "Low"],

                realtime: false,

                calculable: true,

                inRange: {

                  color: ["lightskyblue", "yellow", "orangered"],

                },

              },

              series: [

                {

                  type: "map",

                  map: "sx",

                  zoom: 1.2,

                  roam: true,

                  scaleLimit: {

                    min: 1,

                    max: 10,

                  },

                  label: {

                    show: true,

                  },

                  data: [

                    { name: "椿林镇", value: 70.5 },

                    { name: "孙镇", value: 70.5 },

                  ],

                },

              ],

            })

          );

        }

      );

    },