hotline-bs/src/views/home/center.map.ts

import {getImageUrl} from "@/utils/tools";

const arrow = new Image();
arrow.src = getImageUrl("home/map_select.png");
const mapBg = new Image();
mapBg.src = getImageUrl("home/map_bg.png");
const onetow = new Image();
onetow.src = getImageUrl("home/123.png");
export const optionHandle = (regionCode: string,
                             list: object[]) => {
    return {
        backgroundColor: "rgba(0,0,0,0)",
        tooltip: {
            trigger: 'item',
            position: function (point: any[], params: any, dom: any, rect: any, size: any) {
                let x = 0; // x坐标位置
                let y = 0; // y坐标位置
                // 当前鼠标位置
                const pointX = point[0];
                const pointY = point[1];
                // 提示框大小
                const boxWidth = size.contentSize[0];
                const boxHeight = size.contentSize[1];

                // boxWidth > pointX 说明鼠标左边放不下提示框
                if (boxWidth > pointX) {
                    x = pointX + 10;
                } else { // 左边放的下
                    x = pointX - boxWidth - 10;
                }

                // boxHeight > pointY 说明鼠标上边放不下提示框
                if (boxHeight > pointY) {
                    y = 5;
                } else { // 上边放得下
                    y = pointY - boxHeight;
                }
                return [x, y];
            },
            show: true,
            textStyle: {
                fontSize: 14,
                color: '#fff',
            },
            className: 'custom-tooltip-box',
            rich: {
                arrow: {
                    backgroundColor: {
                        image: getImageUrl("home/tool_tip_arrow.png")
                    },
                }
            },
            formatter: function (params: any) {
                let tipHtml = '';
                tipHtml = `
                    <div class="custom-tooltip-style">
                        <div class='custom-tooltip-name'> <span class="custom-tooltip-arrow"></span> ${params.name}</div>
                        <div class='custom-tooltip-style-box'>
                            <div class="ball">
                                <div class="ball-value">${params.data.satisfiedRate}<span>%</span></div>
                                <div class="ball-text">满意率</div>
                            </div>
                            <div class="custom-tooltip-style-box-text">
                                <div class="custom-tooltip-style-box-text-item">在办工单：<span>${params.data.handlingCount}</span> <b> 件</b></div>
                                <div class="custom-tooltip-style-box-text-item">已办工单：<span>${params.data.filedCount}</span> <b> 件</b></div>
                                <div class="custom-tooltip-style-box-text-item">超期工单：<span>${params.data.overTimeCount}</span> <b> 件</b></div>
                                <div class="custom-tooltip-style-box-text-item">高频热点：<span class="last">${params.data.hotspotName}</span></div>
                            </div>
                        </div>
                    </div>
                `
                return tipHtml;
            },
        },
        // geo: [
        //     {
        //         layoutCenter: ['50%', '50%'],//位置
        //         layoutSize: '180%',//大小
        //         show: true,
        //         map: regionCode,
        //         roam: false,
        //         zoom: 0.65,
        //         aspectScale: 1,
        //         label: {
        //             show: false,
        //         },
        //         itemStyle: {
        //             areaColor: {
        //                 type: "linear",
        //                 x: 1200,
        //                 y: 0,
        //                 x2: 0,
        //                 y2: 0,
        //                 colorStops: [{
        //                     offset: 0,
        //                     color: "rgba(38,134,132,0.35)", // 0% 处的颜色
        //                 }, {
        //                     offset: 1,
        //                     color: "rgba(38,134,132,0.75)", // 50% 处的颜色
        //                 },],
        //                 global: true, // 缺省为 false
        //             },
        //             borderColor: "#c0f3fb",
        //             borderWidth: 1,
        //             shadowColor: "#8cd3ef",
        //             shadowOffsetY: 10,
        //             shadowBlur: 120,
        //         }
        //     },
        //     {
        //         type: "map",
        //         map: regionCode,
        //         aspectScale: 1,
        //         zoom: 0.65,
        //         layoutCenter: ["50%", "54%"],
        //         layoutSize: "180%",
        //         roam: false,
        //         silent: true,
        //         itemStyle: {
        //             borderWidth: 2,
        //             borderColor: "rgba( 38,134,132,0.8)",
        //             shadowColor: "rgba(29, 111, 165,0.8)",
        //             shadowOffsetY: 10,
        //             shadowBlur: 2,
        //             areaColor: "rgba(5,21,35,0.2)",
        //             borderType: "dashed",
        //         },
        //     },
        // ],
        geo3D: [
            {
                show: false,
                map: regionCode, // 自定义扩展图表类型
                aspectScale: 1,
                showLegendSymbol: true,
            }
        ],
        series: [
            {
                type: "map3D",
                map: regionCode, // 自定义扩展图表类型
                aspectScale: 1,
                showLegendSymbol: true,
                boxDepth: 100, //地图倾斜度
                regionHeight: 4, //地图厚度
                label: {
                    show: false,
                },
                itemStyle: {
                    color: "rgba(32,155,252,.7)",
                    borderColor: "#3CFFFD",
                    borderWidth: 1,

                },
                emphasis: { // 选中的样式
                    label: {
                        formatter: [
                            '{b|}',
                        ].join('\n'),

                        rich: {
                            b: {
                                backgroundColor: {
                                    image: arrow,
                                },
                                height: 60
                            },
                        }
                    },

                    itemStyle: {
                        color: "rgba(255,255,255,0.3)",
                        borderColor: "#fff",
                        borderWidth: 2,

                    }
                },
                layoutCenter: ["50%", "50%"],
                layoutSize: "180%",
                data: list,
                select: {
                    disabled: true,
                },
                shading: 'realistic',
                // 真实感材质相关配置 shading: 'realistic'时有效
                realisticMaterial: {
                    detailTexture: '#fff', // 纹理贴图
                    textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
                    roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
                    metalness: 0, // 0材质是非金属 ，1金属
                    roughnessAdjust: 0
                },
                viewControl: {
                    distance: 110, // 地图视角 控制初始大小
                    rotateSensitivity: 1, // 旋转
                    zoomSensitivity: 1, // 缩放
                },
                instancing: true,
            },
        ],
    };
}