先看效果图
记录(*^▽^*) 智慧重庆案例 交通枢纽模块
初始化页面
隐藏所有图层
/**
* 隐藏所有图层
*/
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, //坐标位置
coordinateType: 0, //默认0是投影坐标系，也可以设置为经纬度空间坐标系值为1
anchors: [-13, 30], //锚点，设置Marker的整体偏移，取值规则和imageSize设置的宽高有关，图片的左上角会对准标注点的坐标位置。示例设置规则：x=-imageSize.width/2，y=imageSize.height
imageSize: [25, 30], //图片的尺寸
hoverImageSize: [50, 50], //鼠标悬停时显示的图片尺寸
range: [1, 1000000], //可视范围
imagePath: `${window.origin}/img/mark/map_spot_ditie.png`, //显示图片路径
fixedSize: true, //图片固定尺寸，取值范围：false 自适应，近大远小，true 固定尺寸，默认值：false
text: item.name, //显示的文字
useTextAnimation: true, //打开文字展开动画效果
textRange: [1, 10000], //文本可视范围[近裁距离, 远裁距离]
textOffset: [0, 0], // 文本偏移
textBackgroundColor: [0, 0, 0, 0.5], //文本背景颜色
fontSize: 12, //字体大小
fontOutlineSize: 1, //字体轮廓线大小
fontColor: Color.White, //字体颜色
fontOutlineColor: Color.Black, //字体轮廓线颜色
// showLine: true, //标注点下方是否显示垂直牵引线
// lineSize: [2, 100], //垂直牵引线宽度和高度[width, height]
// lineColor: Color.SpringGreen, //垂直牵引线颜色
// lineOffset: [0, -1], //垂直牵引线偏移
autoHeight: false, // 自动判断下方是否有物体
displayMode: 2, //显示模式
clusterByImage: true, // 聚合时是否根据图片路径分类，即当多个marker的imagePath路径参数相同时按路径对marker分类聚合
priority: 0, //避让优先级
occlusionCull: true //是否参与遮挡剔除
}
stationArr.push(o)
})
await __g.marker.add(stationArr)
}对应API
锚点（anchors） : [0,0]为当前图片的左上角的点，坐标值往右是x正轴，往上是y正轴
画地铁线
需要画两种线：polygon(静态线)和beam(光流)
const AddPoline = async (data: any) => {
//添加相同点位的polyline和光流
const datas: any = []
const beams: any = []
for (const key in data) {
const item = data[key]
item.coordinates.map((item: any) => {
item[2] = 300
})
const obj = {
id: `${item.name}_${key}`, //折线唯一标识id
coordinates: item.coordinates, //构成折线的坐标点数组
color: item.color, //折线颜色
style: 4, //折线样式 参考样式枚举：PolylineStyle
thickness: 30, //折线宽度
intensity: 8, //亮度
flowRate: 0.2, //流速
tiling: 0, //材质贴图平铺比例
shape: 0, //折线类型 0：直线， 1：曲线
depthTest: false, //是否做深度检测
coordinateType: 1
}
const obj2 = {
id: `${item.name}_${key}`, //折线唯一标识id
coordinates: item.coordinates, //构成折线的坐标点数组
duration: 3, //光流粒子的生命周期
thickness: 5, //光流线的宽度比例
interval: 2.5, //光流粒子发射间隔
velocity: 0.7, //光流粒子的速度
color: item.color //光流的颜色
}
datas.push(obj)
beams.push(obj2)
}
await __g.polyline.add(datas)
await __g.beam.add(beams)
}加载电子地图
需要将同名点转换为对应的经纬度坐标填入，生成电子地图和地形会有些许偏差（地形越大偏差可能越多）
// 开启电子地图
__g.settings.setMapMode(
2,
{
//地图模式相关的参数，具体请参考API帮助文档
coordType: 0, // coordType: 坐标系类型，0：经纬度；1：本地（默认值是0）
serviceType: 4, // serviceType: 服务类型，0：MVT矢量切片； 1：WMTS(ArcGis) （默认值是0）
mapPoint: [361424.37, 3271083], // mapPoint: 同名点，取值范围：[x,y]，（默认值是[0, 0]）
longitude: 106.57, // longitude: 经度，取值范围：[0~180]（默认值是0.0）
latitude: 29.549999, // latitude: 纬度，取值范围：[0~90]（默认值是0.0）
style: 'mapbox://styles/mapbox/dark-v9', // style: 风格路径，字符串地址，（默认值是 "mapbox://styles/mapbox/streets-v10"）
groundHeight: 150, // groundHeight: 地面高度，取值范围：[0~任意数值]（默认值是0.0）
renderMode: 0, // renderMode: 渲染模式，0：正常；1：透明；2：标注；3：贴地（默认值是0）
coordOrder: 0, // coordOrder: 坐标顺序，0: XY; 1: YX（默认值为0）
maxLevel: 22 // axLevel: WMTS服务最大显示层级，取值范围：[0~22]，默认值：10
},
() => {
console.log('设置大地图模式完成')
}对应API
离开页面时清除以上操作
离开页面一定要清除所有的操作！！！还原刚进页面的状态
// 还原操作
const cleanHinge = async () => {
// 设置时间
// __g.weather.setDateTime(2022, 10, 25, 11, 30, false)
// 关闭电子地图
__g.settings.setMapMode(
0,
{
//地图模式相关的参数，具体请参考API帮助文档
coordType: 0, // coordType: 坐标系类型，0：经纬度；1：本地（默认值是0）
serviceType: 4, // serviceType: 服务类型，0：MVT矢量切片； 1：WMTS(ArcGis) （默认值是0）
mapPoint: [361424.37, 3271083], // mapPoint: 同名点，取值范围：[x,y]，（默认值是[0, 0]）
longitude: 106.57, // longitude: 经度，取值范围：[0~180]（默认值是0.0）
latitude: 29.549999, // latitude: 纬度，取值范围：[0~90]（默认值是0.0）
style: 'mapbox://styles/mapbox/dark-v9', // style: 风格路径，字符串地址，（默认值是 "mapbox://styles/mapbox/streets-v10"）
groundHeight: 150, // groundHeight: 地面高度，取值范围：[0~任意数值]（默认值是0.0）
renderMode: 0, // renderMode: 渲染模式，0：正常；1：透明；2：标注；3：贴地（默认值是0）
coordOrder: 0, // coordOrder: 坐标顺序，0: XY; 1: YX（默认值为0）
maxLevel: 22 // axLevel: WMTS服务最大显示层级，取值范围：[0~22]，默认值：10
},
() => {
console.log('设置地图模式完成')
}
)
// 清除线
await __g.polyline.clear(null)
// 清除光流
await __g.beam.clear(null)
// 清除点
await __g.marker.clear(null)
// 清除
await DelPoline(subwayObj)
}整体代码
import axios from 'axios'
import { AddPoline, DelPoline } from '@/tools/PolygonLine'
import { keys } from 'lodash'
/**
* 初始化交通枢纽
*/
const initHinge = async () => {
subwayStationCoordinates = []
// 设置相机位置
__g.camera.set(361107.746094, 3283910.211406, 36068.9025, -85.998451, -162.599457, 0)
// 开启电子地图
__g.settings.setMapMode(
2,
{
//地图模式相关的参数，具体请参考API帮助文档
coordType: 0, // coordType: 坐标系类型，0：经纬度；1：本地（默认值是0）
serviceType: 4, // serviceType: 服务类型，0：MVT矢量切片； 1：WMTS(ArcGis) （默认值是0）
mapPoint: [361424.37, 3271083], // mapPoint: 同名点，取值范围：[x,y]，（默认值是[0, 0]）
longitude: 106.57, // longitude: 经度，取值范围：[0~180]（默认值是0.0）
latitude: 29.549999, // latitude: 纬度，取值范围：[0~90]（默认值是0.0）
style: 'mapbox://styles/mapbox/dark-v9', // style: 风格路径，字符串地址，（默认值是 "mapbox://styles/mapbox/streets-v10"）
groundHeight: 150, // groundHeight: 地面高度，取值范围：[0~任意数值]（默认值是0.0）
renderMode: 0, // renderMode: 渲染模式，0：正常；1：透明；2：标注；3：贴地（默认值是0）
coordOrder: 0, // coordOrder: 坐标顺序，0: XY; 1: YX（默认值为0）
maxLevel: 22 // axLevel: WMTS服务最大显示层级，取值范围：[0~22]，默认值：10
},
() => {
console.log('设置大地图模式完成')
}
)
// 获取地铁站点数据
await accessToSubwayStations()
// 添加地铁站mark
await addSubwayStation()
// 画线
await addSubwayPolygon()
}
/**
* 显示需要的图层
*/
const showNeedInfoTree = async () => {
const showArr = ['重庆市白模', '面_50']
const infoTree = await __g.infoTree.get()
const ids = infoTree.infotree.filter((item: any) => showArr.includes(item.name)).map((item: any) => item.iD)
await __g.infoTree.show(ids)
}
/**
* 隐藏所有图层
*/
const hideAllInfoTree = async () => {
const infoTree = await __g.infoTree.get()
const ids = infoTree.infotree.map((item: any) => item.iD)
await __g.infoTree.hide(ids)
}
/**
* 添加地铁站mark
*/
const addSubwayStation = async () => {
const stationArr: any = []
subwayStationCoordinates.forEach((item: any, index: number) => {
//支持经纬度坐标和普通投影坐标两种类型
const o = {
id: `SubwayStation_${index}`,
groupId: 'markerAdd',
coordinate: item.coordinate, //坐标位置
coordinateType: 0, //默认0是投影坐标系，也可以设置为经纬度空间坐标系值为1
anchors: [-13, 30], //锚点，设置Marker的整体偏移，取值规则和imageSize设置的宽高有关，图片的左上角会对准标注点的坐标位置。示例设置规则：x=-imageSize.width/2，y=imageSize.height
imageSize: [25, 30], //图片的尺寸
hoverImageSize: [50, 50], //鼠标悬停时显示的图片尺寸
range: [1, 1000000], //可视范围
imagePath: `${window.origin}/img/mark/map_spot_ditie.png`, //显示图片路径
fixedSize: true, //图片固定尺寸，取值范围：false 自适应，近大远小，true 固定尺寸，默认值：false
text: item.name, //显示的文字
useTextAnimation: true, //打开文字展开动画效果
textRange: [1, 10000], //文本可视范围[近裁距离, 远裁距离]
textOffset: [0, 0], // 文本偏移
textBackgroundColor: [0, 0, 0, 0.5], //文本背景颜色
fontSize: 12, //字体大小
fontOutlineSize: 1, //字体轮廓线大小
fontColor: Color.White, //字体颜色
fontOutlineColor: Color.Black, //字体轮廓线颜色
// showLine: true, //标注点下方是否显示垂直牵引线
// lineSize: [2, 100], //垂直牵引线宽度和高度[width, height]
// lineColor: Color.SpringGreen, //垂直牵引线颜色
// lineOffset: [0, -1], //垂直牵引线偏移
autoHeight: false, // 自动判断下方是否有物体
displayMode: 2, //显示模式
clusterByImage: true, // 聚合时是否根据图片路径分类，即当多个marker的imagePath路径参数相同时按路径对marker分类聚合
priority: 0, //避让优先级
occlusionCull: true //是否参与遮挡剔除
}
stationArr.push(o)
})
await __g.marker.add(stationArr)
}
/**
* 添加地铁线路
*/
const addSubwayPolygon = async () => {
await AddPoline(subwayObj)
}
/**
* 获取地铁站数据
*/
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)
}
})
}
}
// 地铁线路对象
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 cleanHinge = async () => {
// 设置时间
// __g.weather.setDateTime(2022, 10, 25, 11, 30, false)
// 关闭电子地图
__g.settings.setMapMode(
0,
{
//地图模式相关的参数，具体请参考API帮助文档
coordType: 0, // coordType: 坐标系类型，0：经纬度；1：本地（默认值是0）
serviceType: 4, // serviceType: 服务类型，0：MVT矢量切片； 1：WMTS(ArcGis) （默认值是0）
mapPoint: [361424.37, 3271083], // mapPoint: 同名点，取值范围：[x,y]，（默认值是[0, 0]）
longitude: 106.57, // longitude: 经度，取值范围：[0~180]（默认值是0.0）
latitude: 29.549999, // latitude: 纬度，取值范围：[0~90]（默认值是0.0）
style: 'mapbox://styles/mapbox/dark-v9', // style: 风格路径，字符串地址，（默认值是 "mapbox://styles/mapbox/streets-v10"）
groundHeight: 150, // groundHeight: 地面高度，取值范围：[0~任意数值]（默认值是0.0）
renderMode: 0, // renderMode: 渲染模式，0：正常；1：透明；2：标注；3：贴地（默认值是0）
coordOrder: 0, // coordOrder: 坐标顺序，0: XY; 1: YX（默认值为0）
maxLevel: 22 // axLevel: WMTS服务最大显示层级，取值范围：[0~22]，默认值：10
},
() => {
console.log('设置地图模式完成')
}
)
// 清除线
await __g.polyline.clear(null)
// 清除光流
await __g.beam.clear(null)
// 清除点
await __g.marker.clear(null)
// 清除
await DelPoline(subwayObj)
}
export { initHinge, cleanHinge, showNeedInfoTree, hideAllInfoTree }
export const AddPoline = async (data: any) => {
//添加相同点位的polyline和光流
const datas: any = []
const beams: any = []
for (const key in data) {
const item = data[key]
item.coordinates.map((item: any) => {
item[2] = 300
})
const obj = {
id: `${item.name}_${key}`, //折线唯一标识id
coordinates: item.coordinates, //构成折线的坐标点数组
color: item.color, //折线颜色
style: 4, //折线样式 参考样式枚举：PolylineStyle
thickness: 30, //折线宽度
intensity: 8, //亮度
flowRate: 0.2, //流速
tiling: 0, //材质贴图平铺比例
shape: 0, //折线类型 0：直线， 1：曲线
depthTest: false, //是否做深度检测
coordinateType: 1
}
const obj2 = {
id: `${item.name}_${key}`, //折线唯一标识id
coordinates: item.coordinates, //构成折线的坐标点数组
duration: 3, //光流粒子的生命周期
thickness: 5, //光流线的宽度比例
interval: 2.5, //光流粒子发射间隔
velocity: 0.7, //光流粒子的速度
color: item.color //光流的颜色
}
datas.push(obj)
beams.push(obj2)
}
await __g.polyline.add(datas)
await __g.beam.add(beams)
}
export const DelPoline = async (data: any) => {
//删除相同点位的polyline和光流
const datas: any = []
const beams: any = []
for (const key in data) {
const item = data[key]
datas.push(`${item.name}`)
beams.push(`${item.name}_${key}`)
}
await __g.polyline.delete(datas)
await __g.beam.delete(beams)
}
589
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
