import { defineComponent, onMounted, openBlock, createElementBlock } from "vue";
import * as echarts from "echarts";
import "echarts-gl";
import res from "./china.mjs";
import "./index.vue_vue_type_style_index_0_scoped_true_lang.mjs";
import _export_sfc from "../../../../_virtual/plugin-vue_export-helper.mjs";
const _hoisted_1 = {
  class: "container",
  id: "container"
};
const __default__ = defineComponent({ name: "EMapLines3D" });
const _sfc_main = /* @__PURE__ */ defineComponent({
  ...__default__,
  setup(__props) {
    new Promise((resolve, reject) => {
      let xhr = new XMLHttpRequest();
      xhr.open("get", "./china.json");
      xhr.onreadystatechange = (res2) => {
        if (xhr.readyState === 4 && xhr.status === 200) {
          resolve(xhr.response);
        }
      };
      xhr.send();
    });
    let chart = null;
    onMounted(() => {
      echarts.registerMap("china", res);
      chart = echarts.init(document.getElementById("container"));
      loadMap("china");
    });
    let valArr = [
      {
        name: "\u56DB\u5DDD\u7701",
        value: 111,
        regionHeight: 10,
        label: {},
        itemStyle: {
          color: "blue"
        },
        emphasis: {}
      }
    ];
    let points = [
      [110.379257, 34.600612],
      [117.348611, 40.581141]
    ];
    let hoverSpan = "";
    let option = null;
    function loadMap(name) {
      option = {
        backgroundColor: "#fff",
        tooltip: {
          show: true
        },
        center: [115.97, 29.71],
        legend: {
          show: true
        },
        geo3D: {
          show: false,
          map: name,
          name: "geo3D1",
          boxWidth: 100,
          boxHeight: 10,
          boxDepth: "auto",
          regionHeight: 3,
          instancing: true,
          label: {
            show: true,
            distance: 10,
            formatter: (params) => {
              if (hoverSpan == params.name) {
                hoverSpan = "";
              }
              return params.name ? params.name : " ";
            },
            color: "#fff",
            fontSize: 12,
            fontFamily: "sans-serif",
            fontWeight: 400,
            borderWidth: 0,
            borderColor: "#fff"
          },
          emphasis: {
            label: {
              show: true,
              distance: 10,
              formatter: (params) => {
                hoverSpan = params.name;
                return params.name ? params.name : " ";
              },
              textStyle: {
                color: "#fff",
                fontSize: 20,
                fontFamily: "sans-serif",
                fontWeight: 400,
                borderWidth: 0,
                borderColor: "#fff"
              }
            },
            itemStyle: {
              color: "red",
              opacity: 1
            }
          },
          itemStyle: {
            color: "#144a69",
            opacity: 1,
            borderWidth: 1,
            borderColor: "#06767c"
          },
          viewControl: {
            projection: "perspective",
            zoomSensitivity: 0,
            panSensitivity: 0,
            panMouseButton: "left",
            rotateMouseButton: "right",
            distance: 100,
            minDistance: 40,
            maxDistance: 400,
            orthographicSize: 100,
            maxOrthographicSize: 400,
            minOrthographicSize: 20,
            alpha: 40,
            beta: 0,
            center: [0, 0, 0],
            minAlpha: 40,
            maxAlpha: 40,
            minBeta: 0,
            maxBeta: 0
          },
          zlevel: 2
        },
        series: [
          {
            type: "lines3D",
            name: "lines1",
            coordinateSystem: "geo3D",
            geo3DIndex: 1,
            zlevel: 12,
            polyline: false,
            effect: {
              show: true,
              period: 2,
              trailLength: 1,
              trailWidth: 2,
              trailColor: "red",
              trailOpacity: 1,
              symbolSize: 30,
              symbol: "./\u98DE\u673A.png"
            },
            lineStyle: {
              color: "rgba(255, 200, 113, 1)",
              width: 2,
              opacity: 0
            },
            data: [
              {
                coords: [points[1], points[0]],
                value: 100,
                lineStyle: {
                  color: "gray",
                  width: 2,
                  opacity: 0
                }
              },
              {
                coords: [[113.594461107, 24.8029603119], points[0]],
                value: 100,
                lineStyle: {}
              }
            ],
            silent: false
          },
          {
            type: "scatter3D",
            name: "\u6563\u70B9",
            coordinateSystem: "geo3D",
            geo3DIndex: 1,
            zlevel: 3,
            symbol: "circle",
            symbolSize: 20,
            itemStyle: {
              color: [1, 1, 1, 1],
              opacity: 0.7,
              borderWidth: 2,
              borderColor: "#fff"
            },
            label: {
              show: true,
              distance: 5,
              position: "top",
              formatter: (params) => {
                console.log(params);
                return params.data[3];
              },
              textStyle: {
                color: "red",
                fontFamily: "sans-serif",
                fontSize: 14,
                fontWeight: "normal"
              }
            },
            emphasis: {
              itemStyle: {},
              label: {}
            },
            data: [
              [...points[1], 0, 100],
              [113.594461107, 24.8029603119, 0, 100],
              [...points[0], 0, 100]
            ],
            blendMode: "source-over",
            silent: false
          },
          {
            type: "map3D",
            name: "MAP",
            map: name,
            boxWidth: 100,
            boxHeight: 10,
            boxDepth: "auto",
            regionHeight: 3,
            instancing: true,
            label: {
              show: true,
              distance: 10,
              formatter: (params) => {
                return params.data.name ? params.data.name : " ";
              },
              textStyle: {
                color: "#fff",
                fontSize: 12,
                fontFamily: "sans-serif",
                fontWeight: 400,
                borderWidth: 0,
                borderColor: "#fff"
              }
            },
            itemStyle: {
              color: "#144a69",
              opacity: 1,
              borderWidth: 1,
              borderColor: "#06767c"
            },
            emphasis: {
              label: {
                show: true,
                distance: 10,
                formatter: (params) => {
                  return params.data.name ? params.data.name : " ";
                },
                textStyle: {
                  color: "#fff",
                  fontSize: 12,
                  fontFamily: "sans-serif",
                  fontWeight: 400,
                  borderWidth: 0,
                  borderColor: "#fff"
                }
              },
              itemStyle: {
                color: "red",
                opacity: 1
              }
            },
            temporalSuperSampling: {
              enable: "auto"
            },
            viewControl: {
              projection: "perspective",
              zoomSensitivity: 0,
              panSensitivity: 0,
              panMouseButton: "left",
              rotateMouseButton: "right",
              distance: 100,
              minDistance: 40,
              maxDistance: 400,
              orthographicSize: 100,
              maxOrthographicSize: 400,
              minOrthographicSize: 20,
              alpha: 40,
              beta: 0,
              center: [0, 0, 0],
              minAlpha: 40,
              maxAlpha: 40,
              minBeta: 0,
              maxBeta: 0
            },
            zlevel: 10,
            left: "auto",
            top: "auto",
            right: "auto",
            bottom: "auto",
            width: "auto",
            height: "auto",
            data: valArr
          }
        ]
      };
      chart.setOption(option);
      chart.on("click", function(e) {
        console.log(e, hoverSpan);
        if (hoverSpan === "\u56DB\u5DDD\u7701") {
          new Promise((resolve, reject) => {
            let xhr = new XMLHttpRequest();
            xhr.open("get", "https://geo.datav.aliyun.com/areas_v3/bound/510000_full.json");
            xhr.onreadystatechange = (res2) => {
              if (xhr.readyState === 4 && xhr.status === 200) {
                resolve(xhr.response);
              }
            };
            xhr.send();
          }).then((res2) => {
            echarts.init(document.getElementById("container")).dispose();
            chart = echarts.init(document.getElementById("container"));
            echarts.registerMap("sichuan", res2);
            option = null;
            loadMap("sichuan");
          });
        }
      });
    }
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", _hoisted_1);
    };
  }
});
var _EMapLines3D = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-63219424"]]);
export { _EMapLines3D as default };
