12.3 总结（功能记录：智慧成都地铁网络）

一 、父子件使用 样式穿透子组件权重需要比子组件大 （否则无法覆盖掉子组件原有的样式）

子组件：

<HeadBar :list="headBarList" ref="headBarRef" @clicks="handleChange" />

父组件使用样式穿透：

二、当有多个series对象时给某个series 设置tooltip样式

1、先设置好公共tooltip样式

tooltip: {
            show: true,
            trigger: 'item',
            formatter: '{b} : {c} ({d}%)'
        },

2、在series 里给不需要tooltip的对象写上：

 series: [
            {
                tooltip: {
                    show: false
                },
            },
            {
                tooltip: {
                    show: true
                },
            },
            {
                tooltip: {
                    show: false
                },
            },
            ......
         ]

三、智慧成都地铁网络

1、拿到shp数据，根据成都经纬度找到相对应的投影坐标，使用qgis转换导出成geojson数据

① 、找到转换的投影坐标EPSG代号：成都经纬度：

                        

 

地理坐标转换投影坐标对照：坐标系对应EPSG代号、经度范围、中央经线_欧特克_Glodon的博客-优快云博客_epsg对照表

 

由于本项目建模经度是102E：

 

 故应与实际项目为准，EPSG代号应为4543

②：使用QGIS导出投影坐标的geojson

将shp数据文件拖入QGIS 图层下方的资源管理框，右键选中 ——> 导出 ——> 要素另存为

点击CRS右方的

  

 

这样就能将shp数据按照对应的投影坐标转换成geojson数据了

2、代码处理数据并使用Marker 和  Polyline 打出点以及画出线

①：由于数据中的坐标均为二维，没有给高度，所以先处理数据给每个点位加上z轴高度

数据格式：

数据处理：

 data.features.forEach((item: any, index: number) => {
            item.geometry.coordinates.forEach((coorArr: any) => {
                coorArr.forEach((coor: any) => {
                    coor[2] = 523.5
                })
            })

 ②：接下来就是打点和画线了，没有什么难度，需要注意的就是确保在打点和画线时给的数据是对的，所以一定要看好数据长什么样子，小编也是没看清浪费了不少时间，废话不多说，下面直接上效果和代码：

import { useAirCityStore } from '@/stores/aircity'
import { getMetroPolyline, getMetropPoi } from '@/api/home'

/**
 * 地铁线路
 */
const AirCityStore = useAirCityStore()

/**
 * 初始化
 */
export const initSubwayNetwork = async () => {
    await __g.marker.clear()
    await __g.camera.stopAnimation()
    await __g.infoTree.show(AirCityStore.layerTreeObject['地形4543外拆带水系'])
    await __g.weather.setDateTime(2022, 1, 1, 14, 0, false)
    await __g.weather.setDarkMode(true);
    await addPolyline()
    __g.camera.set(698275.51375, 3391624.434063, 21722.38, -85.998055, -90.615837, 1);
    await addMarker()
}

/**
 * 清除
 */

export const cleanSubwayNetwork = async () => {
    await __g.weather.setDarkMode(false);
    await __g.polyline.clear()
    await __g.marker.clear()
}

/**
 * 打点、添加marker标签
 */
const _shMarkerArr: any = []
const addMarker = () => {
    const markerArr: any = []
    getMetropPoi().then(async ({ data }: any) => {
        data.features.forEach((item: any, index: number) => {
            const o = {
                id: 'metro_' + index,
                groupId: 'markerAdd',
                coordinate: [item.geometry.coordinates[0], item.geometry.coordinates[1], 523.5], //坐标位置
                coordinateType: 0, //默认0是投影坐标系，也可以设置为经纬度空间坐标系值为1
                anchors: [-14, 36], //锚点，设置Marker的整体偏移，取值规则和imageSize设置的宽高有关，图片的左上角会对准标注点的坐标位置。示例设置规则：x=-imageSize.width/2，y=imageSize.height
                imageSize: [28, 36], //图片的尺寸
                hoverImageSize: [28, 36], //鼠标悬停时显示的图片尺寸
                range: [1, 1000000], //可视范围
                imagePath: '@path:智慧成都/地铁.png', //显示图片路径
                hoverImagePath: '@path:智慧成都/地铁.png', // 鼠标悬停时显示的图片路径
                fixedSize: true, //图片固定尺寸，取值范围：false 自适应，近大远小，true 固定尺寸，默认值：false

                text: item.properties.PointName,
                textRange: [1, 20000],
                autoHidePopupWindow: true, //失去焦点后是否自动关闭弹出窗口
                autoHeight: false, // 自动判断下方是否有物体
                displayMode: 2, //显示模式
                clusterByImage: true, // 聚合时是否根据图片路径分类，即当多个marker的imagePath路径参数相同时按路径对marker分类聚合
                priority: 0, //避让优先级
                occlusionCull: false //是否参与遮挡剔除
            }
            markerArr.push(o)
        })
        const res: any = await __g.marker.add(markerArr)
        if (res.result) {
            __g.marker.show(_shMarkerArr)
        }
    })
}
/**
 * 画线Polyline
 */
const addPolyline = () => {
    const polineArr: any = []
    const beamArr: any = []
    __g.polyline.clear()
    getMetroPolyline().then(async ({ data }: any) => {
        data.features.forEach((item: any, index: number) => {
            item.geometry.coordinates.forEach((coorArr: any) => {
                coorArr.forEach((coor: any) => {
                    coor[2] = 523.5
                })
            })

            const obj = {
                id: `Poline_${index}`,//折线唯一标识id
                coordinates: item.geometry.coordinates[0],//构成折线的坐标点数组
                range: [1, 1000000],//可视范围：[近裁距离, 远裁距离]，取值范围: [任意负值, 任意正值]
                color: ColorList[index % 8],//折线颜色
                style: 4,//折线样式 参考样式枚举：PolylineStyle
                thickness: 100,//折线宽度
                intensity: 0,//亮度
                flowRate: 0.5,//流速
                tiling: 0,//材质贴图平铺比例
                shape: 0, //折线类型 0：直线， 1：曲线
                depthTest: false//是否做深度检测
            }
            polineArr.push(obj)
        })
        await __g.polyline.add(polineArr);
    })
}

const ColorList = ['#00833b', '#e1ff00', '#0059ff', '#ff0011', '#ff00f7', '#2600ff', '#00d0ff', '#ff4d00']