|
|
@@ -1,159 +1,239 @@
|
|
|
<template>
|
|
|
- <div class="map" id="mapEchart" style="width: 100%; height: 100vh"></div>
|
|
|
+ <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/福州市v2_full.json"; //该文件路径改成自己项目中的文件路径即可
|
|
|
+import geoJson from "@/assets/json/辽宁省v3_full.json"; //该文件路径改成自己项目中的文件路径即可
|
|
|
import * as echarts from "echarts";
|
|
|
import "echarts-gl"; //3D地图插件
|
|
|
-import { onMounted } from "vue";
|
|
|
+import { onMounted, reactive, ref } from "vue";
|
|
|
import img149 from "@/assets/img/about/149.png";
|
|
|
-import wenli from "@/assets/img/about/wenli.jpg"
|
|
|
+import wenli from "@/assets/img/about/wenli.jpg";
|
|
|
var imageDom = document.createElement("img");
|
|
|
imageDom.src = img149;
|
|
|
// 定义echarts方法
|
|
|
-const chartMap = () => {
|
|
|
- var myChart = echarts.init(document.getElementById("mapEchart"));
|
|
|
- // 重点：不要遗漏这句代码！！
|
|
|
- echarts.registerMap("zhejiang", geoJson);
|
|
|
- // 图表配置项
|
|
|
- let option = {
|
|
|
- tooltip: {
|
|
|
+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,
|
|
|
+ boxWidth: 877,
|
|
|
+ boxHeight: 866,
|
|
|
+ regionHeight: 6,
|
|
|
+ colorMaterial: {},
|
|
|
+ groundPlane: {
|
|
|
show: true,
|
|
|
+ color: "#ff4400",
|
|
|
+ realisticMaterial:{
|
|
|
+ detailTexture:""
|
|
|
+ }
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ color: "rgba(0,225,255,0.65)",
|
|
|
+ opacity: 1,
|
|
|
+ borderWidth: 4,
|
|
|
+ borderColor: "#fff",
|
|
|
+ },
|
|
|
+ viewControl: {
|
|
|
+ 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 ]
|
|
|
},
|
|
|
- //热力图配置项
|
|
|
- visualMap: [
|
|
|
- {
|
|
|
- type: "continuous",
|
|
|
- text: ["xxx"],
|
|
|
- calculable: true,
|
|
|
- max: 250,
|
|
|
- inPange: {
|
|
|
- color: ["#87aa66", "#eba438", "#d94d4c"],
|
|
|
- },
|
|
|
- },
|
|
|
- ],
|
|
|
- //3D地图配置项
|
|
|
- geo3D: {
|
|
|
- map: "zhejiang",
|
|
|
- roam: true,
|
|
|
- instancing: true,
|
|
|
- boxWidth: 877,
|
|
|
- boxHeight: 866,
|
|
|
- regionHeight:6,
|
|
|
- colorMaterial: {
|
|
|
|
|
|
- },
|
|
|
- groundPlane:{
|
|
|
- show:false,
|
|
|
- color:"#333"
|
|
|
+ emphasis: {
|
|
|
+ disabled: true, //是否可以被选中
|
|
|
+ label: {
|
|
|
+ //移入时的高亮文本
|
|
|
+ show: false,
|
|
|
+ color: "#333", //显示字体颜色变淡
|
|
|
+ fontSize: 18, //显示字体变大
|
|
|
},
|
|
|
itemStyle: {
|
|
|
- color: "rgba(0,200,200,1)",
|
|
|
- opacity: 1,
|
|
|
- borderWidth: 4,
|
|
|
- borderColor: "#fff",
|
|
|
-
|
|
|
- },
|
|
|
- viewControl: {
|
|
|
- autoRotate: false,
|
|
|
- autoRotateAfterStill: 3,
|
|
|
- maxDistance:800,
|
|
|
- distance: 120,
|
|
|
- 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 ]
|
|
|
+ color: "#fff", //显示移入的区块变粉色
|
|
|
},
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ position: "top",
|
|
|
+ color: "#111", //地图初始化区域字体颜色
|
|
|
+ fontSize: 14,
|
|
|
+ lineHeight: 16,
|
|
|
+ },
|
|
|
+ shading: "realistic",
|
|
|
+ realisticMaterial: {
|
|
|
+ detailTexture: wenli,
|
|
|
+ metalness: 0,
|
|
|
|
|
|
- emphasis: {
|
|
|
- disabled: true, //是否可以被选中
|
|
|
- label: {
|
|
|
- //移入时的高亮文本
|
|
|
- show: false,
|
|
|
- color: "#333", //显示字体颜色变淡
|
|
|
- fontSize: 18, //显示字体变大
|
|
|
- },
|
|
|
- itemStyle: {
|
|
|
- color: "#fff", //显示移入的区块变粉色
|
|
|
- },
|
|
|
- },
|
|
|
- label: {
|
|
|
- show: false,
|
|
|
- position: "top",
|
|
|
- color: "#111", //地图初始化区域字体颜色
|
|
|
- fontSize: 14,
|
|
|
- lineHeight: 16,
|
|
|
- },
|
|
|
- shading: "realistic",
|
|
|
- realisticMaterial: {
|
|
|
- detailTexture: wenli,
|
|
|
- metalness: 0,
|
|
|
+ metalnessAdjust:0,
|
|
|
+ },
|
|
|
+ lambertMaterial: {
|
|
|
+ detailTexture: wenli,
|
|
|
+ metalness: 0,
|
|
|
|
|
|
- metalnessAdjust:1
|
|
|
-
|
|
|
+ metalnessAdjust: 0,
|
|
|
+ },
|
|
|
+ light: {
|
|
|
+ //光照阴影
|
|
|
+ main: {
|
|
|
+ // color: "#fff", //光照颜色
|
|
|
+ intensity: 3, //光照强度
|
|
|
+ shadowQuality: "high", //阴影亮度
|
|
|
+ shadow: true, //是否显示阴影
|
|
|
+ //shadowQuality: "medium", //阴影质量 ultra //阴影亮度
|
|
|
+ alpha: 40, //上下
|
|
|
+ beta: 10, //左右
|
|
|
},
|
|
|
- light: {
|
|
|
- //光照阴影
|
|
|
- main: {
|
|
|
- // color: "#fff", //光照颜色
|
|
|
- intensity: 2, //光照强度
|
|
|
- shadowQuality: 'high', //阴影亮度
|
|
|
- shadow: true, //是否显示阴影
|
|
|
- //shadowQuality: "medium", //阴影质量 ultra //阴影亮度
|
|
|
- alpha: 40,
|
|
|
- beta: -40,
|
|
|
-
|
|
|
- },
|
|
|
- ambient: {
|
|
|
- intensity: 0.5,
|
|
|
- },
|
|
|
+ ambient: {
|
|
|
+ intensity: 0,
|
|
|
},
|
|
|
+ ambientCubemap:{
|
|
|
+ specularIntensity:0
|
|
|
+ }
|
|
|
},
|
|
|
- // series: [
|
|
|
- // //3D柱状图配置项
|
|
|
- // {
|
|
|
- // name: "xxx",
|
|
|
- // type: "bar3D",
|
|
|
- // show: false,
|
|
|
- // coordinateSystem: "geo3D",
|
|
|
- // barSize: 3,
|
|
|
- // shading: "lambert",
|
|
|
- // opacity: 1,
|
|
|
- // bevelSize: 0.2,
|
|
|
- // label: {
|
|
|
- // show: false,
|
|
|
- // formatter: "{a}",
|
|
|
- // },
|
|
|
- // //自定义的data数组 value中数组的含义:[杭州的经度or纬度，要展示的3d柱状图数值大小]
|
|
|
- // data: [
|
|
|
- // { name: "杭州", value: [120.161693, 30.280059, 643] },
|
|
|
- // { name: "温州", value: [120.705869, 28.001095, 98] },
|
|
|
- // { name: "湖州", value: [120.094566, 30.899015, 72] },
|
|
|
- // { name: "嘉兴", value: [120.762045, 30.750912, 131] },
|
|
|
- // { name: "绍兴", value: [120.586673, 30.036519, 116] },
|
|
|
- // { name: "丽水", value: [119.929503, 28.472979, 40] },
|
|
|
- // { name: "衢州", value: [118.880768, 28.941661, 22] },
|
|
|
- // { name: "金华", value: [119.654027, 29.084455, 156] },
|
|
|
- // { name: "台州", value: [121.426996, 28.662297, 110] },
|
|
|
- // { name: "宁波", value: [121.556686, 29.880177, 163] },
|
|
|
- // { name: "舟山", value: [122.214339, 29.991092, 20] },
|
|
|
- // ],
|
|
|
- // },
|
|
|
- // ],
|
|
|
- };
|
|
|
+ },
|
|
|
+ // series: [
|
|
|
+ // //3D柱状图配置项
|
|
|
+ // {
|
|
|
+ // name: "xxx",
|
|
|
+ // type: "bar3D",
|
|
|
+ // show: false,
|
|
|
+ // coordinateSystem: "geo3D",
|
|
|
+ // barSize: 3,
|
|
|
+ // shading: "lambert",
|
|
|
+ // opacity: 1,
|
|
|
+ // bevelSize: 0.2,
|
|
|
+ // label: {
|
|
|
+ // show: false,
|
|
|
+ // formatter: "{a}",
|
|
|
+ // },
|
|
|
+ // //自定义的data数组 value中数组的含义:[杭州的经度or纬度，要展示的3d柱状图数值大小]
|
|
|
+ // data: [
|
|
|
+ // { name: "杭州", value: [120.161693, 30.280059, 643] },
|
|
|
+ // { name: "温州", value: [120.705869, 28.001095, 98] },
|
|
|
+ // { name: "湖州", value: [120.094566, 30.899015, 72] },
|
|
|
+ // { name: "嘉兴", value: [120.762045, 30.750912, 131] },
|
|
|
+ // { name: "绍兴", value: [120.586673, 30.036519, 116] },
|
|
|
+ // { name: "丽水", value: [119.929503, 28.472979, 40] },
|
|
|
+ // { name: "衢州", value: [118.880768, 28.941661, 22] },
|
|
|
+ // { name: "金华", value: [119.654027, 29.084455, 156] },
|
|
|
+ // { name: "台州", value: [121.426996, 28.662297, 110] },
|
|
|
+ // { name: "宁波", value: [121.556686, 29.880177, 163] },
|
|
|
+ // { name: "舟山", value: [122.214339, 29.991092, 20] },
|
|
|
+ // ],
|
|
|
+ // },
|
|
|
+ // ],
|
|
|
+};
|
|
|
+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();
|
|
|
});
|
|
|
@@ -163,4 +243,9 @@ onMounted(() => {
|
|
|
.map {
|
|
|
background-color: #ffffff;
|
|
|
}
|
|
|
+.left {
|
|
|
+ width: 25%;
|
|
|
+ background-color: lightgreen;
|
|
|
+ height: 100vh;
|
|
|
+}
|
|
|
</style>
|
