地铁线路+电子地图

先看效果图 

 记录(*^▽^*) 智慧重庆案例 交通枢纽模块

  初始化页面

隐藏所有图层

/**
 * 隐藏所有图层
 */
const hideAllInfoTree = async () => {
    // 获取所有图层
    const infoTree = await __g.infoTree.get()
    // 获取所有图层id
    const ids = infoTree.infotree.map((item: any) => item.iD)
    // 隐藏图层
    await __g.infoTree.hide(ids)
}

 对应API

 

显示需要的图层

/**
 * 显示需要的图层
 */
const showNeedInfoTree = async () => {
    // 需要显示的图层名称
    const showArr = ['重庆市白模', '面_50']
    // 获取所有图层
    const infoTree = await __g.infoTree.get()
    // 过滤需要显示的图层id
    const ids = infoTree.infotree.filter((item: any) => showArr.includes(item.name)).map((item: any) => item.iD)
    // 显示图层
    await __g.infoTree.show(ids)
}

  对应API

准备数据

// 地铁线路对象
const subwayObj: any = {
    '1号线': {
        name: '重庆轨道交通1号线',
        color: '#e42342',
        coordinates: []
    },
    '2号线': {
        name: '重庆轨道交通2号线',
        color: '#066e33',
        coordinates: []
    },
    '3号线': {
        name: '重庆轨道交通3号线',
        color: '#033ec6',
        coordinates: []
    },
    '4号线': {
        name: '重庆轨道交通4号线',
        color: '#de7713',
        coordinates: []
    },
    '5号线': {
        name: '重庆轨道交通5号线',
        color: '#03a5e6',
        coordinates: []
    },
    '6号线': {
        name: '重庆轨道交通6号线',
        color: '#fc7598',
        coordinates: []
    },
    '9号线': {
        name: '重庆轨道交通9号线',
        color: '#93ef40',
        coordinates: []
    },
    '10号线': {
        name: '重庆轨道交通10号线',
        color: '#48266f',
        coordinates: []
    },
    环线: {
        name: '重庆轨道交通环线',
        color: '#f4b40e',
        coordinates: []
    }
}


// 地铁站
let subwayStationCoordinates: any = []

获取地铁站数据

/**
 * 获取地铁站数据
 */
const accessToSubwayStations = async () => {
    // 重置地铁站数组
    subwayStationCoordinates = []
    // 重置地铁对象的坐标数组
    for (const key in subwayObj) {
        subwayObj[key].coordinates = []
    }
    // 从geojson文件读取
    const { data: res } = await axios.get(`${window.origin}/mock/地铁站点.geojson`)
    // 地铁站数据
    res.features.forEach((item: any) => {
        subwayStationCoordinates.push({
            name: item.properties.field_1,
            coordinate: [...item.geometry.coordinates, 300]
        })
    })
    // 按地铁线路名称分类 坐标
    for (const key in subwayObj as any) {
        res.features.forEach((item: any, index: number) => {
            const reg = RegExp(key, 'i')
            if (reg.exec(item.properties.field_6)) {
                subwayObj[key].coordinates.push(item.geometry.coordinates)
            }
        })
    }
}

给地铁站打点——加mark

/**
 * 添加地铁站mark
 */
const addSubwayStation = async () => {
    const stationArr: any = []
    subwayStationCoordinates.forEach((item: any, index: number) => {
        //支持经纬度坐标和普通投影坐标两种类型
        const o = {
            id: `SubwayStation_${index}`,
            groupId: 'markerAdd',
            coordinate: item.coordinate, /