搜索结果

格点填色样式 格点填色样式IPixelLayerStyleOptions主要是LPixelLayer和LCanvasPixelLayer图层的样式配置。 两种色标的配置方式 fillColor和colorScale是色标的两种不同配置方式。 fillColor 通过设置fillColor配置格点颜色，可以是固定颜色值，也可以是分级规则。 const style: IPixelLayerStyleOptions = { fillColor: "color-precp#res", ... } colorSca...

二维地图中截图步骤如下： 创建矩形绘制工具，在地图上框出截图范围 使用html2canvas库将页面的dom转化为canvas 使用BorderAxisTool工具添加经纬度信息 下载图片 创建矩形绘制工具 地图绘制工具的详细教程请查看地图工具 const createDrawTool = () => { const style: IFeatureStyleOptions = { polygon: { color: new Spectra(predefinedColorNames.whi...

QuickEarth中的剖面支持单路径和多路径两种模式，这个在创建图层的时候可以设置： const sectionLayer = new CSectionLayer({ sectionMode: "multiple" }) 其中sectionMode为multiple的时候就表示多路径。 添加一条新的路径 使用任意路径剖面中的方式，添加一个圆形剖面。 使用什么是剖面及快速创建经纬度方向的剖面中的方式开启经纬度方向剖面。 最终即可得到多条叠加的剖面： 在创建剖面时，如果key参数不传，则默认为defa...

任意路径剖面是根据用户提供的一系列剖面关键点，显示关键点所在路径上的剖面。 创建剖面路径 在QuickEarth中，剖面点使用ISectionPoint接口描述，路径是包含一系列剖面点的数组： export interface ISectionPoint { x: number, y: number } 因此一个剖面路径可以表示为ISectionPoint[]。 TIPS:路径还可以使用[[lon,lat]]这样的二维数组来表示。 使用绘制工具绘制剖面路径 在Cesium中，有众多开源工具可以提供...

什么是剖面图层 剖面图层是一个相对于其他图层来说较为特殊的图层，因为该图层中的数据并不会完全展示，而是根据用户的需要展示其中的一部分。通常我们所说的剖面是指经纬度作为底面的剖面，也就是要素在高度层方向的剖面，如下所示： QE中剖面有什么特色 支持任意路径剖面 在QuickEarth中，我们除了支持经度和纬度固定方向的剖面之外，还支持任意路径的剖面 支持数据源动画 剖面图层和常规图层一样支持数据源动画，可以通过更新数据源的时间点来进行连续动画播放 支持多剖面叠加 可以显示任意多条剖面路径 创建剖面图层 ...

QE框架中内置了解析OPeNDAP数据规范的数据解析器，可以在项目中直接使用。 构建DAPService DAPService是框架封装的用来访问OPeNDAP数据规范的数据服务，构建时需要如下参数： baseUrl 不含服务后缀的请求路径，注意大部分OPeNDAP服务并不支持跨域，需要自行代理。 varList 要素列表，默认为空表示请求全部要素头信息； load 是否构建的时候就请求头信息。默认为false。 import { DAPService } from "quickearth"; ...

当框架内置的格点数据解析器满足不了您的数据格式的时候，您也可以针对您的数据自定义格点数据解析器来进行扩展。 格点数据解析器基类 QE中格点数据解析器的基类是 GridDataProviderBase ，我们自定义的格点数据解析器应继承该抽象类 GridDataProviderBase。 我们先看下 GridDataProviderBase 中的属性和方法： 格点属性信息 gridOptions 中存储的是格点属性信息，因为数据是要在地图上进行表达，所以网格数据需要具备地理信息属性，其接口是 IGridDataOpt...

QE内置了一些常量consts，可在项目初始化时进行设置。 是否使用WebGL2 可通过框架中 getProperlyWebGLVersion 方法来查看当前系统支持的WebGL版本，来决定是否开启，默认是开启的。当我们使用到三维风场，体渲染等图层的时候需要开启。 import { consts, getProperlyWebGLVersion } from "quickearth" consts.useWebGL2 = getProperlyWebGLVersion() === 2 ? true : false;...

三维世界相比二维多了高度，因此气象数据的高度属性可以直接在三维中呈现出来，在填色图层中，我们有以下几种三维表达方式： 将平面显示到真实高度（且支持高度轴上下的动画） 将二维平面按照数值高低进行挤压，形成三维效果（且支持时间动画） 与二维类似的填色图层 三维填色图层中完全包含了二维填色图层的所有功能，这里我们以一个示例来进行演示，具体的用法概念，可以参考格点填色 对比二维代码，除了地图初始化有所区别外，只是换了个图层名称以及动画服务的名称，其余代码完全一致，这也意味着，我们在实际应用中可以复用三维和二维中的...

在三维中使用矢量图层与二维中的API保持一致，同时Cesium中的标签三维增加了volume选项，本小节我们使用实例来说明三维中增加的功能。 为何不使用Cesium原生的GeoJsonDataSource Cesium原生的GeoJsonDataSource在内部将每个矢量对象都转换为Entity，而Entity是Cesium中的高层封装，虽然使用较为简单，但是效率太低，气象数据在渲染的时候有几千个站点是比较常见的，此时原生的性能很难接受，而我们的实现是基于Primitive API针对气象需求进行了简化，抛...

可配置参数 风场样式可配置参数为IWindLayerStyleOptions，主要是LWindLayer图层的样式配置。 点渲染 因为风场默认是使用线渲染的，所以如果要使用点渲染，需要设置usePoint为true。 点大小 点的大小通过pointSize来设置 使用分级规则填色 颜色可以设置为固定值，也可以使用分级规则来填色 const windStyle: IWindLayerStyleOptions = { usePoint: true, pointSize: 2, color: "color-w...

QE中对地图工具进行了抽象，其接口是IMapTool，并且在LMap中添加了地图工具的管理服务map.toolService，通过该服务可以设置当前激活的地图工具。 绘制工具 QE中内置了地图绘制功能，实现地图绘制需要地图绘制服务和地图绘制工具，思路是创建地图矢量绘制工具，然后将它设置为地图绘制服务的当前活跃地图工具。 创建绘制工具 矢量绘制工具在二维中就是实例化LVectorMapTool，QE内置的二维绘制工具 LVectorMapTool是一个功能丰富的绘制工具，可以绘制数十种图形，而且支持扩展。 以下示例为...

初始化二维地图 框架中二维地图是Leaflet地图，继承自原生L.Map，所以创建地图方法与Leaflet中设置地图的方法类似。 首先创建具有特定mapId的div，并确保该div具有大小，放置在您希望地图所在的位置。 <div id="mapId" style="position:absolute;top:0px;left:0px;width:100%;height:100%;overflow:hidden"></div> 然后构建地图实例，LMap继承自原生L.Map，传参与L.map的参数一致。 impor...

QE的封装主要是图层的封装，图层 = 数据 + 样式。 先使用数据访问器将原始气象数据（自动站、数值模式、卫星、雷达等）转换为内部统一格式数据（QE数据模型），再配置绘制样式，将数据和样式设置到图层上，就能接入显示。QE内置了很多图层，有2D和3D的，每种里面分矢量图层和栅格图层。 创建图层 图层=数据+样式 以 LGeoJSONLayer 为例，表现为 layer = new LGeoJSONLayer(构建参数).setDataSource(数据源).setDrawOptions(绘制样式) 构建参数 在...

LDataAnimationService是二维中基于数据源更新的动画服务，主要应用是格点填色图层在时间和高度上的数据动画播放。数据动画的实现原理是不断更新数据解析器中的当前高度层currentZIdx或者当前时次currentTIdx。 为了更方便的实现动画逻辑，QE内置了动画服务，用户只需要负责将数据更新到provider一遍之后（如果数据本身取回来就是多维度的，则直接可以动画，无需边加载边动画），就可以实现流畅平滑的动画效果。 创建动画 创建一个动画步骤如下： 使用格点数据解析器解析多时次或多高度层格点数据 ...

等值线色斑图追踪服务 QE中提供了等值线色斑图追踪服务，该服务支持： 使用格点数据追踪等值线色斑图 使用站点数据插值成格点数据 使用站点数据追踪等值线色斑图 二维等值色斑追踪服务 LTracingService是二维的等值线、色斑图追踪服务。该服务追踪生成的图层是LGeoJSONLayer，所以其绘制参数drawOptions是LGeoJSONLayer的绘制参数，构建图层的参数layerOptions是LGeoJSONLayer的构建图层的参数。 使用站点数据追踪等值线色斑图 通过站点数据绘制等值线色斑图，是气象...

加载器，也称loader，框架中默认使用 # + 内置loader名称 的表现形式，如#res，#degree2arc等等。用在样式配置中，这样通过样式文件来配置的时候也可以调用函数。 #res-资源加载器 资源加载器，就是根据资源ID获取资源管理器中的资源。当资源是stopRules的时候支持field参数，用于替换资源中自带的fieldName。 矢量样式 const json await getJSON("public/demos/data/autostation011.json"); const dataS...

分级规则也称分段规则，是对数据进行分段处理来返回不同值的一种设置方式。常应用于图例设置。 分级规则是什么 我们先看下分级规则是长什么样的？ { "stops": [ { "stop": "rgb(37, 0, 45)", "value": -60 }, ... //中间省略了更多类似配置 { "stop": "rgb(53, 0, 0)", "value": 60 } ]...

resourceService是框架内置的资源管理器，是用来管理有复用价值资源的工具。提供了资源的加载、更新和删除操作，支持从配置文件或者构造参数构建资源，提供了资源ID级别的事件监听。对于项目中具有复用价值的资源（比如色标，图片，样式等）,可以使用资源管理器统一管理，方便取用。可以在项目或模块入口提前加载这些资源，如果是相同的资源应该只在一个地方加载。 预定义的资源类型 QE中预定义的资源类型有如下几种： images: 图片资源 stopRules: 分段规则资源，如调色板 featureStyles: 矢量样...

剖面的位置动画逻辑较为简单，只要使用定时器不断设置剖面的位置信息即可实现。 由于每次刷新剖面路径会使剖面缓存失效，进而会有一定的CPU以及CPU和GPU之间数据传输的开销，建议在不同性能电脑上对动画的间隔进行有区别的设置，避免出现整体卡顿。 动画实例 这里提供一个对固定纬度的经向剖面进行来回动画的实例：