网站备案幕,网站如何制作 优帮云,国外手机网站模板,大视觉网站建设From#xff1a;新中地
1.简介
智慧机场解决方案#xff0c;基于数字化大平台#xff0c;融合AI、大数据、IoT、视频云、云计算等技术#xff0c;围绕机场“运控、安防、服务”三大业务领域#xff0c;构建“出行一张脸”及“运行一张图”两大场景化解决方案。 https://…From新中地
1.简介
智慧机场解决方案基于数字化大平台融合AI、大数据、IoT、视频云、云计算等技术围绕机场“运控、安防、服务”三大业务领域构建“出行一张脸”及“运行一张图”两大场景化解决方案。 https://gitee.com/iGaoWei/big-data-viewhttps://github.com/antvis/L7BigDataView: 100套大数据可视化炫酷大屏Html5模板包含行业社区、物业、政务、交通、金融银行等全网最新、最多最全、最酷、最炫大数据可视化模板。陆续更新中[这里是图片002]https://gitee.com/iGaoWei/big-data-viewGitHub - antvis/L7: ?? Large-scale WebGL-powered Geospatial Data Visualization analysis engine.?? Large-scale WebGL-powered Geospatial Data Visualization analysis engine. - antvis/L7[这里是图片003]https://github.com/antvis/L7L7 - AntVL7 中的 L 代表 Location7 代表世界七大洲寓意能为全球位置数据提供可视化能力。L7 的目标是提供一套地理空间数据可视化框架易用易扩展支持海量数据的高性能和 3D 高质量渲染安全可靠的地理空间数据可视化解决方案。[这里是图片004]https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html
L7 是由蚂蚁金服 Antv 数据 可视化团队推出的基于 webGL的开源大规模 地理空问数据 可化视分析开发框架。 L7中的L代表 Location 7 代表世界七大洲 寓意能为 全球位置 数据提供可视分析的能力。L7 专注数据可视化化表达通过颜色、大小、纹理方向体积等视觉变量设置实现从数据到信息清晰有效的表达。 L7 能够满足常见的地图图表B1系统的可视化分析、以及 GIS交通电力国土农业城市等领域的空间信息管理分析等应用系统开发需求。
核心特性
数据驱动可视化展示
数据驱动灵活数据映射从数到形支持丰富的地图可视化类型更好洞察数据。、
2D3D 一体化的海量数据高性能渲染
海量空间数据实时可交互动态渲染
简单灵活的数据接入
支持 CSVJSONGeoJSON 等数据格式接入可以根据需求自定义数据格式无需复杂的空间数据转换。
多地图底图支持支持离线内网部署
屏蔽不同底图之间的差异用户只需要关注数据层表达交互高德地图国内合法合规的地理底图Mapbox满足国际化业务需求。
支持丰富的图表类型 点图层 气泡图 散点图 符号地图 3D 柱状地图 线图层 路径地图 弧线支持 2D 弧线、3D 弧线以及大圆航线 等值线 面图层 填充图 热力图 经典热力图
2.简单使用L7
快速上手 · 语雀
快速上手 | AntV L7 地理空间数据可视化引擎
2.1 安装cdn
script srchttps://unpkg.com/antv/l7/script2.2 初始化地图
按住鼠标右键 上下拖动地图 或者ctrl 左键 !--2、设置L7地图的挂载点--div idmap/div
script/*3、实例化场景*/const scene new L7.Scene({/*通过id将实例化的场景挂载到对应的DOM元素之上*/id: map,map: new L7.GaodeMap({style: dark,center:[114.30,30.50],zoom: 14,pitch: 0, // 0-90 地图俯仰角})})
/script2.3 Scene参数解释及控件
Scene 属性 配置项 Scene基础的地图类,提供地图创建图层创建管理等功能 L7 侧重于地理数据的可视化表达 地图层需要依赖第三方地图第三方地图通过 Scene的 map 属性 统一创建 const scene new L7.Scene({ id: “map”, // 设置实例场景的挂载点 map: new L7.GaodeMap({ // map 地图配置项 style: “dark”, // 地图样式 dark|light |normal|blank center:[114.30,30.50], // 设置中心点 zoom: 14, // 放大级别 minZoom: 14, // 地图最小缩放等级 0~22 maxZoom: 14, // 地图最大缩放等级 0~22 pitch: 0, // 俯仰角 }), logoVisible: false, // 控制logo的显示和隐藏 }) // 需求添加自定义的logo控件 scene.on(“loaded”,(){ const logo new L7.Logo({ // 图片 url img: ‘https://img.gejiba.com/images/dfdb6db1623eb881e724f58d9a366af8.jpg’, //跳转地址 href:“http://www.baidu.com/”, position:“bottomright” }) scene.addControl(logo); /设置地图主题控件/ const mapTheme new L7.MapTheme({}) scene.addControl(mapTheme) }) 目前 L7 支持多种地图底图
高德地图 国内业务场景 合规中国地图MapBox 国际业务或者内网离线部署场景
2.4 地图操作
2.4.1、切换底图
setMapStyle(style:string): void 设置地图样式
需求:点击事件控制图层的切换
let isToggle false;
/*给地图绑定点击事件*/
scene.on(loaded,(){scene.on(click ,(){isToggle !isToggle if(isToggle) {scene.setMapStyle(normal)} else {scene.setMapStyle(dark)}})
})2.4.2 放大缩小地图
scene.getZoom()获取缩放级别 scene.setZoom()设置缩放级别 scene.zoomIn()放大 scene.zoom0ut()缩小 scene.getCenter()获取中心点 scene.setCenter([lng, lat])设置中心点 scene.setZoomAndCenter(zoom,center)设置缩放级别和中心点
需求 放大 缩小 地图按钮 !--2、设置L7地图的挂载点--div idmap/div!--需要设置样式显示--button oncClickaddMap() 放大 /buttonbutton oncClickreduceMap() 缩小 /button
script/*3、实例化场景*/const scene new L7.Scene({/*通过id将实例化的场景挂载到对应的DOM元素之上*/id: map,map: new L7.GaodeMap({style: dark,center:[114.30,30.50],zoom: 14,pitch: 0, // 0-90 地图俯仰角})})function addmap() {let zoom scene.getZoom()scene.setZoom( zoom 1 )}function reduceMap() {let zoom scene.getZoom()scene.setZoom( zoom - 1 )}
/script3.点图层
点图层3D柱状图 - AntV
3.1 造数据
应该是这个网址 不过我没打开
L7 Editor - 基于 L7 的地理数据绘制工具 造出点数据 复制到项目
3.2 点击图层Popup弹框 var data {type: FeatureCollection,features: [{type: Feature,properties: {height: 10, name : 武昌,},geometry: {type: point,coordinates: [110.478515625, 32.76880048488168],}}]
}scene.on(loaded, () {// 点图层const pointLayer new L7.PointLayer({})pointLayer.source(data) // 设置图层数据.shape(simple).size(height, h {return h}) // 大小 height是读取数据的properties height.color(mag, mag mag 4.5 ? #5B8FF9 : #5CCEA1;) // 设置图层颜色.style({ // 样式opacity: 0.6,strokeWidth: 3 // 描边}).active(true) // 设置鼠标悬浮颜色scene.addLayer(pointLayer);pointLayer.on(click , evt {let {name } evt.features.propertieslet popup new L7.Popup({lngLat: evt.lngLat,html: p${name}/p})scene.addPopup(popup)})
});3.3 散点动画 var data {type: FeatureCollection,features: [{type: Feature,properties: {height: 10, name : 武昌,},geometry: {type: point,coordinates: [110.478515625, 32.76880048488168],}},{type: Feature,properties: {height: 20, name : 汉阳,},geometry: {type: point,coordinates: [110.479, 32.770],}}]
}scene.on(loaded, () {// 点图层const pointLayer new L7.PointLayer({})pointLayer.source(data) // 设置图层数据.shape(circle).size(height, h {return h * 2}).color(ff2d51).animate(true) // 设置动画scene.addLayer(pointLayer);
});3.4 3D柱状图 var data {} // 省略数据
scene.on(loaded, () {// 点图层const pointLayer new L7.PointLayer({zIndex: 6 // 可以设置图层堆叠顺序})pointLayer.source(data).shape(name, [ cylinder, triangleColumn, hexagonColumn, squareColumn ]).color(name, [ #739DFF, #61FCBF, #FFDE74, #FF896F ]);.size(height, h [ 10, h ]).active(true).animate(true)scene.addLayer(pointLayer);
});3.5 符号地图 需求 根据 properties 中w值的不同显示不同天气
var data {} // 省略数据 properties 里面有w:const weather_icon [{type: 0-天晴,url: https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*kzTMQqS2QdUAAAAAAAAAAABKARQnAQ},{type: 1-多云,url: https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*jH1XRb7F7hMAAAAAAAAAAABkARQnAQ},{type: 2-小雨,url: https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*DccRTI6ZRLoAAAAAAAAAAABkARQnAQ},
]scene.on(loaded, () { /*实现icon的设置*/weather_icon.forEach( item {let type Number(item.type.split(-)[0])scene.addImage(type,item.url) }) // 点图层const pointLayer new L7.PointLayer()pointLayer.source(data).shape(w , w w).size(20)scene.addLayer(pointLayer);
});4.线图层
4.1 普通线 var data {type: FeatureCollection,features: [{type: Feature,properties: {},geometry: {type: LineString,coordinates: [[114.29297530.488542],[114.29292,30.493947],[114.29377930.498206],[114.29940430.498846],[114.302326,30.497993]]}}]
}scene.on(loaded, () {// 线图层const lineLayer new L7.LineLayer({})lineLayer.source(data) // 设置图层数据.shape(line).size(2).color(ff2d51)scene.addLayer(lineLayer);
});4.2 中国、 全球边界数据
http://39.103.151.139:8000/gis/china scene.on(loaded, () {// 这里就是请求数据 教学中是将json下载放在data下 引入jquery依赖$.ajax({url:/data/中国.json}).then(data {// 线图层const lineLayer new L7.LineLayer({})lineLayer.source(data) // 设置图层数据.shape(line).size(2).color(ff2d51)scene.addLayer(lineLayer);})
})4.3 线动画 var data {} // 上面有 省略scene.on(loaded, () {// 线图层const lineLayer new L7.LineLayer({})lineLayer.source(data) // 设置图层数据.shape(line).size(2).color(ff2d51).animate({trailLength: 1, // 流线长度interval: 0.25, // 设置间隔duration: 5 // 设置每段轨迹执行时间})scene.addLayer(lineLayer);
});4.4 弧线动画 scene.on(loaded, () {// 线图层const lineLayer new L7.LineLayer({blend:normal})lineLayer.source(data) // 设置图层数据.shape(arc3d).size(2).color(ff2d51).animate({trailLength: 1, // 流线长度interval: 0.25, // 设置间隔duration: 5 // 设置每段轨迹执行时间})scene.addLayer(lineLayer);
});4.5.航线图 scene.addImage(plane,https://gw.alipayobjects.com/zos/bmw-prod/0ca1668e-38c2-4010-8568-b57cb33839b9.svg)
scene.on(loaded, () {const lineLayer new L7.LineLayer({blend:normal})lineLayer.source(data) // 设置图层数据.shape(arc).size(2).color(ff2d51)scene.addLayer(lineLayer);const planLineLayer new L7.LineLayer({blend:normal,name: 飞机})planLineLayer.source(data) // 设置图层数据.shape(arc).size(15).color(ff6b34).texture(plane).animate({trailLength: 0.05, // 流线长度interval: 0.25, // 设置间隔duration: 51 // 设置每段轨迹执行时间}).style({textureBlend: replace,lineTexture: true ,// 开启线的贴图功能iconStep: 10, // 设置贴图纹理的间距})scene.addLayer(planLineLayer);
});5.拓展图层
5.1 风场
点击隐藏图层 再点击显示图层 scene.on(loaded, () {const windLayer new L7.WindLayer({name:风场})windLayer.source(
https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*wcU8S5xMEDYAAAAAAAAAAAAAARQnAQ,{parser: {type: image,extent: [-180, -85, 180, 85], // 用于设置风场图片作用到地图上的经纬图区间}}) // 设置图层数据.animate(true).style({numParticles: 35535,fadeOpacity: 0.9,sizeScale: 1.3,rampColors: {0.0:#3288bd,0.1:#66c2a5,0.2:#abdda4,0.3:#e6f598,0.4:#fee08b,0.5:#fdae61,0.6:#f46d43,1.0:#d53e4f }})scene.addLayer(windLayer);scene.on(loaded,() {scene.on(click,(){let layer scene.getLayerByName(风场);var res layer.isVisible() // isVisible 可以判断图层的显影if(res) {layer.hide()} else {layer.show();}})})
});5.2 下雨点 scene.on(loaded, () {let rain https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*w2SFSZJp4nIAAAAAAAAAAAAAARQnAQ,const layer new L7.GeometryLayer({name:暴雨点})layer.shape(sprite).size(10).style({opacity: 0.3,mapTexture: rain,center: [120, 30],spriteCount: 12000,spriteRadius: 10,spriteTop: 2500000,spriteUpdate: 20000,spriteScale: 0.6,})scene.addLayer(layer);
});5.3 根据天气不同显示不同数据 const water_icon [] // 省略scene.on(loaded, () {water_icon.forEach(item {scene.addImage(Number(item.type.split(-)[0]),item.url)})$.ajax({url:/xxx.json}).then(data {let pointLayer new L7.PointLayer({})pointLayer.source(data) // 设置图层数据.shape(weather).size(15)scene.addLayer(layer);})})6. 综合项目 // 1.实现数据加载
scene.on(loaded, () {Promise.all([/*全球数据*/$.ajax({url:/data/world_country.json})/*航班轨迹数据 */$.ajax({url:/data/fly_path.json})/*目的的数据 */$.ajax({url:/data/fly_end.json})]).then(([world,fly_path,fly_end]) {/* 1-1 加载全球数据 LineLayer*/const worldLayer new L7.LineLayer({name:world}).source(world).color(#41fc9d).size(1).style({opacity:0.4})scene.addLayer(worldLayer)/*1-2、加载飞行轨迹数据*/const flyLineLayer new L7.LineLayer({name:飞机轨迹}).source(fly_path).color(#ff6b34).shape(arc).size(1)scene.addLayer(flyLineLayer)// 实现飞行动画scene.addImage(plane,https://gw.alipayobjects.com/zos/bmw-prod/0ca1668e-38c2-4010-8568-b57cb33839b9.svg)const planLineLayer new L7.LineLayer({blend:normal,name: 飞机})planLineLayer.source(fly_path) // 设置图层数据.shape(arc).size(15).color(ff6b34).texture(plane).animate({trailLength: 0.05, // 流线长度interval: 0.25, // 设置间隔duration: 51 // 设置每段轨迹执行时间}).style({textureBlend: replace,lineTexture: true ,// 开启线的贴图功能iconStep: 10, // 设置贴图纹理的间距})scene.addLayer(planLineLayer);/*1-3、加载终点数据*/const endLayer new L7.PointLayer({zIndex: 6 ,// 可以设置图层堆叠顺序name:终点}).source(fly_end).shape(name, [ cylinder, triangleColumn, hexagonColumn, squareColumn ]).color(name, [ #739DFF, #61FCBF, #FFDE74, #FF896F ]);.size([4, 100]) // 半径 高度.active(true).animate(true)scene.addLayer(endLayer);//2、根据终点的天气不同,显示不同图片water_icon.forEach(item {scene.addImage(Number(item.type.split(-)[0]),item.url)})const weather_layer new L7.PointLayer({name: 天气图层}).source(fly_end) // 设置图层数据.shape(weather).size(15).style({offsets: [0,30]})scene.addLayer(weather_layer);// 风场const windLayer new L7.WindLayer({name:风场})windLayer.source(
https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*wcU8S5xMEDYAAAAAAAAAAAAAARQnAQ,{parser: {type: image,extent: [-180, -85, 180, 85], // 用于设置风场图片作用到地图上的经纬图区间}}) .animate(true).style({numParticles: 35535,fadeOpacity: 0.9,sizeScale: 1.3,rampColors: {0.0:#3288bd,0.1:#66c2a5,0.2:#abdda4,0.3:#e6f598,0.4:#fee08b,0.5:#fdae61,0.6:#f46d43,1.0:#d53e4f }})scene.addLayer(windLayer);/*图层控制器*/setTimeout((){const layerSwitch new L7.LayerSwitch({layers:scene.getLayers()})scene.addControl(layerSwitch)},500)/*地图放大zoom3风场隐藏 */scene.on(mapmove,() {let layer scene.getLayerByName(风场);let zoom scene.getZoom();if(zoom 3){layer.hide();} else {layer.show()}})/*实现暴雨点 */let rain https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*w2SFSZJp4nIAAAAAAAAAAAAAARQnAQ,const layer new L7.GeometryLayer({name:暴雨点}).shape(sprite).size(10).style({opacity: 0.3,mapTexture: rain,center: [120, 30],spriteCount: 12000,spriteRadius: 10,spriteTop: 2500000,spriteUpdate: 20000,spriteScale: 0.6,})scene.addLayer(layer);})
})
// 点击消息提示 飞往暴雨点
function flyToRain(){scene.setZoomAndCenter(6,[105.318756,61.52401])
}
// 复位地图
function resetMap(){scene.setZoomAndCenter(origin_zoom,origin_center)
}
// 改变终点样式
function controlEnd(){let layer scene.getLayerByName(终点);layer.shape(circle).size(30).color(#ffed11)
}
