原生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中更新引入:
<link rel="stylesheet" href="public/libs/cesium/Cesium/Widgets/widgets.css" />
<script src="public/libs/cesium/Cesium/Cesium.js"></script>
<script src="http://qecloud.91weather.com/public/lib/qe/quickearth.umd.3d.min.js"></script>
然后全局定义Cesium资源文件位置:
<script>
window.CESIUM_BASE_URL="public/lib/cesium/Cesium";
</script>
No Comments