Search Results

有了上一节的铺垫，我们这一节开始实现任意点预报功能。 功能分析 任意点预报的流程较为清晰： 如果我们直接在切换地图工具的方法里面编写这个逻辑，那么后续其他地图工具的逻辑就会都在一起，这样代码会比较乱，因此我们采用QE中规范的地图工具来进行实现。 使用标准地图工具，完善切换逻辑 QE默认提供了绘制工具，虽然也支持点的绘制，但是这里我们为了演示自定义绘制工具的使用，将上面这个简单的逻辑封装为一个标准的地图工具。 既然使用标准地图工具，那么我们可以先完善switchTool方法的逻辑来支持不同地图工具之之间的切换：...

我们先看看格点标签图层最常见的应用格点填值 创建数据解析器 格点标签图层是用来展示格点数据的，所以这里应该使用格点类数据解析器。下面示例中使用的是MQE格式的数据。 const gridOptions: IGridDataOptions = { xStart: 0, xDelta: 0.5, xSize: 720, yStart: 90, yDelta: -0.5, ySize: 361 }; ensureGridDataOptions(gridOptions); const provide...

QEGridDataProvider QE自定义四维二进制格点数据解析器 如果我们拿到的格点数据是QE标准化格点数据格式，则我们使用QEGridDataProvider来构建provider CimissGridDataProvider 天擎/CIMISS接口返回的单二维场的格点数据解析器 如果我们拿到的格点数据是CIMISS接口返回的单二维场的格点数据，或者和CIMISS接口返回的单二维场的格点数据类似（数据含以下示例中的字段）的数据，则我们使用CimissGridDataProvider来构建provider。...

CimissStationFeatureProvider 天擎/CIMISS站点数据访问器 对于如下格式的数据，可以直接使用CimissStationFeatureProvider来构建provider，CimissStationFeatureProvider内部会将这个数据转为QE矢量数据模型。 { "returnCode":"0", "returnMessage":"Query Succeed", "rowCount":"2430", "colCount":"12", "...

对于拿到的各式各样的原始气象数据，provider的作用是将原始气象数据解析为具有统一格式的，适用于本框架的结构数据（也称QE数据模型）。将数据转为统一格式，这样有利于图层的封装，图层的封装就可以以渲染方式为主，而不再关注对数据格式的封装。 QE数据模型 关于QE支持的数据格式：在QE中，数据的格式被抽象为数据模型，这样只要是符合数据模型的数据均可以使用QE中的所有效果，不存在能否显示某种格式数据的问题。 QE中的数据模型是通过接口进行定义的，针对矢量和栅格分别是 IFeaturesProvider和IGri...

这里我们将使用LWindLayer图层来实现涌浪的效果。 创建数据解析器 首先解析我们的格点数据,这里使用的涌浪的数据与风场数据类似，都是由UV分量进行表示，存储格式上也是常见的数组形式，在QE中，数组类型的格点数据可以使用Array2DGridDataProvider来解析，然后合并为一个矢量场的数据解析器即可。 const json = await getJSON("public/demos/data/wave.json"); const options: IGridDataOptions = { xSta...

格点标签中除了包含文字标签外，也能添加图片标签。 创建数据解析器 风场数据我们使用风场解析器，MemoryWindDataProvider专门用于构建风场数据，风场数据由UV或者风向风速构成，在QE中，使用两个格点数据访问器（使用U和V，或者使用风向和风速）可以构建一个风场数据访问器MemoryWindDataProvider，MemoryWindDataProvider中可以进行UV和风向风速的自动换算。 const uBuffer = await getRaw("public/demos/data/u500.d...

风流场 创建数据解析器 风场数据由UV或者风向风速构成，在QE中，使用两个格点数据访问器（使用U和V，或者使用风向和风速）可以构建一个风场数据访问器MemoryWindDataProvider，MemoryWindDataProvider中可以进行UV和风向风速的自动换算。 下面的示例中是cimiss返回的格点风场数据，所以可以使用CimissGridDataProvider来构建u和v的格点数据访问器。再由这两个格点数据访问器构建一个风场数据访问器MemoryWindDataProvider。 const jso...

用法示例 const layer=new LWindLayer().setDataSource(provider).setDrawOptions(style); layer.addTo(map); 构造函数 类名 描述 LWindLayer(options?: ILWindLayerOptions) 二维风流场图层 构建参数 ILWindLayerOptions 属性 类型 默认值 描述 count（可选） number 64 粒子数量参数，实际数量是count*count ...

用法示例 const layer=new LGridLabelLayer().setDataSource(provider).setDrawOptions(style); layer.addTo(map); 构造函数 类名 描述 LGridLabelLayer(options?: ILGridLabelLayerOptions) 二维格点标签图层 构建参数 ILGridLabelLayerOptions 属性 类型 默认值 描述 accurateYDelta（可选） boolea...

上一节中我们实现了自定义地图工具来做任意点预报，这一节我们将直接使用QE内置的地图工具，所以会更简单一些！ 添加区域绘制功能 在本示例中，我们计划添加的是区域绘制功能，这是一个纯粹为了演示而演示的功能，但是业务系统的复杂功能往往是由这些小的功能组成。 功能分析 我们希望这个区域绘制具有如下功能： 能够独立设置每次绘制的颜色 能够将绘制好的图形持久化的保存在一个固定图层中，单独控制显示和隐藏 创建绘制工具 为了实现上面的功能，我们将创建绘制工具的方法抽为一个独立的方法_createDrawTool，然后在切换...

站点数据插值成格点数据后，一样可以使用LPixelLayer来显示。 在CPU中进行的插值计算 通过使用等值色斑追踪服务，根据给定格点数据范围以及步长，站点数据访问器，需要插值的字段，以及缺测值，可以由站点provider生成格点provider。 import { TracingService } from "quickearth"; //格点数据的属性定义 const gridOptions: IGridDataOptions = { xStart: 70, //开始经度 xEnd: 140, /...

格点填色 首先我们来看看如何将拿到的格点数据按照格点值进行填色。同样的，需要解析数据以及创建样式。 创建数据解析器 这里的示例数据是QE自定义的四维二进制格式的数据，所以使用QEGridDataProvider负责解析。 const buffers = await getBinary("public/demos/data/2T_201909082000.zip"); const provider = new QEGridDataProvider(buffers[0]); 创建样式 这里我们使用分级规则填色，以及配...

用法示例 const layer=new LPixelLayer().setDataSource(provider).setDrawOptions(style); layer.addTo(map); 构造函数 类名 描述 LPixelLayer(options?: ILPixelLayerOptions) 二维格点填色图层 构建参数 ILGLGridBaseLayerOptions 属性 类型 默认值 描述 trackDataSource（可选） boolean true 是否跟...

最后，我们再看下矢量面数据的渲染。 区域填色 在我们拿到中国各省的面数据后，按照图层=数据+样式的思路，给多边形填色（这里是随机色） getJSON("public/demos/data/prov.json").then(json => { const provider = new GeoJSONFeatureProvider(json); //该数据是geojson类型，所以使用GeoJSONFeatureProvider const style: IFeatureStyleOptions = ...

接下来我们使用LGeoJSONLayer看看线条的渲染。 绘制国界线 同样的，我们按照图层=数据+样式的思路，将线数据绘制到地图上。 创建数据解析器 线条的数据类型有多种，对于常见的shp格式的，我们可以利用shp.js这个库将数据转换为geojson，然后再使用GeoJSONFeatureProvider数据解析器构建provider。如果是type类型为line的geojson，可以直接使用GeoJSONFeatureProvider数据解析器构建provider。 const json = await get...

GeoJSONLayer是用来渲染点、线、面矢量数据的，我们先从点开始！气象中点数据的可视化最常见的应用就是站点填值。 在不同的底层显示引擎下的类名有所区别，Leaflet中为LGeoJSONLayer，Cesium中为CGeoJSONLayer，三维的用法基本兼容二维，但是部分属性在三维中不完全支持，但是三维有独有的挤压效果。 本文中我们先以二维为例进行介绍，这部分基本可以直接在三维中也这样使用，三维的也可以单独参考三维矢量图层。 绘制点 我们按照图层=数据+样式的思路，先将点数据绘制到地图上。 创建数据解析器 ...

用法示例 //二维 const layer=new LGeoJSONLayer().setDataSource(provider).setDrawOptions(style); layer.addTo(map); //三维 const layer=new CGeoJSONLayer().setDataSource(provider).setDrawOptions(style); view.markerLayers.add(layer); 构造函数 这里以二维为例，三维是类似的，具体可以参考API手册 类...

免责声明 本站点使用的数据仅供演示QuickEarth使用，请勿做实际生产用途，否则由此产生的后果均自行负责。 Metar报文来自 https://www.aviationweather.gov 卫星云图来自 https://openweathermap.org/ GFS预报来自 https://www.ncei.noaa.gov/products/weather-climate-models/global-forecast 任意点预报来自 https://githu...

矢量样式主要是LGeoJSONLayer图层的样式配置。因为在QE中，矢量数据内部使用GeoJSON进行表达，我们知道GeoJSON对象包含了点线面，所以我们的矢量样式的配置内容也是点、线、面三个方面。这里我们重点从配置方式的角度展开。 常量 最简单的情况也就是配置一个固定值。 const style={ point:{ color:"red", size:3, strokeColor:"white" }, polyline:{ color:...