quick-earth-free
/
index.umd.html

<!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="./umd/quickearth.umd.min.js"></script>
</head>

<body>
    <div id="map" style="position:absolute;top:0px;left:0px;width:100%;height:100%;overflow:hidden"></div>
    <script>
        QE.init("f17d186a2e692c9f6f2e79e48b270012");
        const map = new QE.LMap("map", { crs: L.CRS.EPSG3857, fadeAnimation: false, zoomControl: false }).setView([25.5, 116.5], 7);
        const tileLayer = QE.createTileLayer(QE.predefinedImageTiles.windy, { pane: QE.consts.customPanes.topmap.name });
        map.addLayer(tileLayer);

        const showGridVal = async () => {
            const gridOptions = {
                xStart: 0,
                // xDelta: 0.25,
                xDelta: 0.5,
                // xSize: 1440,
                xSize: 720,
                yStart: 90,
                // yDelta: -0.25,
                yDelta: -0.5,
                // ySize: 721
                ySize: 361
            };
            QE.ensureGridDataOptions(gridOptions);
            const provider = await QE.GrayImageGridDataProvider.fromURL("http://qecloud.91weather.com/public/demos/data/mqe/GFS0P50_20220411020000_precp_single_33300.mqe", false, {
                gridOptions,
                scale: 0.1,
                offset: 0,
                dataType: QE.GridDataType.UInt16,
                algo: 1,
                autoLoadToMemory: true
            });
            const style = {
                fillColor: "color-precp#res",
                fillMode: QE.GridDataGLFillMode.pixel1
            };
            const layer = new QE.LPixelLayer({
                debugShowPerformance: true,
                name: "格点降水渐变填色"
            }).setDrawOptions(style).setDataSource(provider);
            map.addLayer(layer);
            const labelLayer = new QE.LGridLabelLayer({
                name: "格点填值",
                ignoreRetina: false
            }).setDrawOptions({
                text: {
                    data: "#decimal?len=1",
                    // backColor: "rgba(255,255,255,0.2)",
                    color: "black",
                    strokeWidth: 1,
                    visible: (val) => {
                        return val >= 0.01;
                    }
                    //strokeColor: "white",
                    //strokeWidth: 2
                }
            }).setDataSource(provider);
            map.addLayer(labelLayer);
        }

        const load = async () => {
            await QE.resourceService.loadResourceFromConfigPath("demos/styles/demo.config.json");
            showGridVal();
        }

        load();
    </script>
</body>

</html>