jpcj-pc/src/views/about1/index.vue

<template>
  <div class="flex">
    <div class="left">
      <a-form
        :model="form"
        name="basic"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 16 }"
        autocomplete="off"
      >
        <a-form-item label="alpha" name="beta">
          <a-input-number
            v-model:value="form.geo3D.light.main.alpha"
            :min="0"
            :max="360"
            @change="chartReLoad"
          />
        </a-form-item>
        <a-form-item label="beta" name="beta">
          <a-input-number
            v-model:value="form.geo3D.light.main.beta"
            :min="0"
            :max="360"
            @change="chartReLoad"
          />
        </a-form-item>

        <a-form-item label="intensity" name="beta">
          <a-input-number
            v-model:value="form.geo3D.light.main.intensity"
            :min="0"
            :max="360"
            @change="chartReLoad"
          />
        </a-form-item>

        <a-form-item label="color" name="beta">
          <a-input
            v-model:value="form.geo3D.itemStyle.color"
            type="color"
            @change="chartReLoad"
          />
        </a-form-item>

        <a-form-item label="metalness" name="beta">
          <a-input-number
            v-model:value="form.geo3D.realisticMaterial.metalness"
            @change="chartReLoad"
          />
        </a-form-item>
        <!-- <a-form-item
          label="Password"
          name="password"
          :rules="[{ required: true, message: 'Please input your password!' }]"
        >
          <a-input-password v-model:value="form.password" />
        </a-form-item> -->
      </a-form>
    </div>
    <div class="map" id="mapEchart" style="width: 75%; height: 100vh"></div>
  </div>
</template>

<script lang="ts" setup>
// 引入工具
import geoJson from "@/assets/json/辽宁省v3_full.json"; //该文件路径改成自己项目中的文件路径即可
import * as echarts from "echarts";
import "echarts-gl"; //3D地图插件
import { onMounted, reactive, ref } from "vue";
import img149 from "@/assets/img/about/149.png";
import wenli from "@/assets/img/about/wenli5.jpg";
var imageDom = document.createElement("img");
imageDom.src = img149;
// 定义echarts方法
var myChart;
let option = {
  tooltip: {
    show: true,
  },
  //热力图配置项
  visualMap: [
    {
      type: "continuous",
      text: ["xxx"],
      calculable: true,
      max: 250,
      inPange: {
        color: ["#87aa66", "#eba438", "#d94d4c"],
      },
    },
  ],
  //3D地图配置项
  geo3D: {
    map: "zhejiang",
    roam: true,
    instancing: true,
    geo3DIndex: 0,
    boxWidth: 400,
    boxHeight: 10,
    regionHeight: 6,
    colorMaterial: {},
    groundPlane: {
      show: true,
      color: "#ff4400",
      realisticMaterial: {
        detailTexture: "",
      },
    },
    itemStyle: {
      color: "rgb(0,160,255)",
      opacity: 1,
      borderWidth: 4,
      borderColor: "#fff",
    },
    viewControl: {
      //projection:'orthographic',
      autoRotate: false,
      autoRotateAfterStill: 3,
      maxDistance: 800,
      distance: 500,
      minAlpha: 5, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
      maxAlpha: 90, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
      minBeta: -360, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
      maxBeta: 360, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
      animation: true, // 是否开启动画。[ default: true ]
      animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
      animationEasingUpdate: "cubicInOut", // 过渡动画的缓动效果。[ default: cubicInOut ]
    },

    emphasis: {
      disabled: true, //是否可以被选中
      label: {
        //移入时的高亮文本
        show: false,
        color: "#333", //显示字体颜色变淡
        fontSize: 18, //显示字体变大
      },
      itemStyle: {
        color: "#fff", //显示移入的区块变粉色
      },
    },
    label: {
      show: false,
     
      color: "#111", //地图初始化区域字体颜色
      fontSize: 14,
      lineHeight: 16,
    
    },
    shading: "realistic",
    realisticMaterial: {
      detailTexture: wenli,
      metalness: 0,
      textureOffset:0.05,
      metalnessAdjust:0,
    },
    lambertMaterial: {
      detailTexture: wenli,
      metalness: 0,
      metalnessAdjust: 0,
    },
    light: {
      //光照阴影
      main: {
        // color: "#fff", //光照颜色
        intensity: 3, //光照强度
        shadowQuality: "high", //阴影亮度
        shadow: true, //是否显示阴影
        //shadowQuality: "medium", //阴影质量 ultra //阴影亮度
        alpha: 45, //上下
        beta: 10, //左右
      },
      ambient: {
        intensity: 0,
      },
      ambientCubemap: {
        specularIntensity: 0,
      },
    },
  },
  series: [
 
    //3D柱状图配置项
    {
      name: "xxx",
      type: "scatter3D",
      // show: true,
      symbol: "pin",
      distance: 10,
      itemStyle:{
 
        opacity:1
      },
      coordinateSystem: "geo3D",
      zlevel: 99,
      opacity: 1,
      symbolSize: 40,
      label: {
        
      },
      //自定义的data数组 value中数组的含义:[杭州的经度or纬度，要展示的3d柱状图数值大小]
      data: [
        { name: "大连", value: [120.515835, 40.558131, 100] },
        { name: "温州", value: [122.420392, 41.197939, 100] },
      ],
    },
  ],
};
const chartMap = () => {
  // 重点：不要遗漏这句代码！！
  echarts.registerMap("zhejiang", geoJson);
  // 图表配置项

  myChart.setOption(option);

  //让可视化地图跟随浏览器大小缩放
  window.addEventListener("resize", () => {
    myChart.resize();
  });
};
const chartReLoad = () => {
  console.log(option);
  myChart.setOption(option);
};

const form = reactive(option);
onMounted(() => {
  myChart = echarts.init(document.getElementById("mapEchart"));
  // 挂载echart
  chartMap();
});
</script>

<style lang="less" scoped>
.map {
  background-color: #ffffff;
}
.left {
  width: 25%;
  background-color: lightgreen;
  height: 100vh;
}
</style>