Skip to main content

原生JS环境

QuickEarth提供了原生JS开发的支持,通过script标签引入即可使用

如果是开发完整项目,强烈建议您使用Webpack结合TypeScript进行开发。

下载或者使用在线UMD包

UMD包支持直接通过script标签进行引入,在这种模式下可以通过全局的QE变量对QuickEarth中的各个功能进行引用。

您可以前往gitee下载:

https://gitee.com/mofangbao/quick-earth-free

在html文件中引入

QuickEarth引擎目前支持的二维基础地图库是Leaflet,三维是Cesium,因此需要在引入QE开发包之前先按需求引入二维或者三维的基础地图库,这里以二维地图为例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>QuickEarth-气象数据渲染引擎</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <script src="http://qecloud.91weather.com/public/lib/qe/quickearth.umd.min.js"></script>
</head>

<body>
    <div id="map" style="position:absolute;top:0px;left:0px;width:100%;height:100%;overflow:hidden"></div>
</body>

</html>
需要将public目录放置到当前html文件的同目录(否则等值线分析功能无法使用)。

添加一个基础在线地图

<script>
  			QE.init("您的授权码");
        const map = new QE.LMap("map", {crs: L.CRS.EPSG3857,fadeAnimation: false}).setView([35, 110], 5);
        QE.createTileLayer(QE.predefinedImageTiles.tdtSatellite).addTo(map);
</script>

这里我们只是添加了一个最基础的在线地图,功能与开源地图本身并无差异,如何便捷的渲染各类气象相关的矢量和栅格数据呢?快转到其他章节进行查看吧!

二维示例

在Cesium中使用QE三维渲染

如果使用三维,则需要在引入QE之前先引入我们定制的Cesium库及其样式文件,因此先将我们的cesium库拷贝到public/lib/cesium目录下,然后在index.html中更新引入:

然后全局定义Cesium资源文件位置:

<script>
  window.CESIUM_BASE_URL="public/lib/cesium/Cesium";
</script>

三维示例