ArcGIS 气象风场等示例数据制作、服务发布及前端加载

news2024/11/23 18:47:17

1. 原始数据为多维数据

以nc数据为例。
首先在pro中需要以多维数据的方式去添加多维数据，这里的数据包含uv方向：
在这里插入图片描述

加载进pro的效果：

这里注意数据属性需要为矢量uv：
在这里插入图片描述
如果要发布为服务，需要导出存储为tif格式，然后发布影像服务（Image Service）即可（发布影像服务可参考服务发布相关博客）。（如果原始数据为crf等数据，同样也导出保存为tif格式，确认source type是uv vector-uv类型）

2. 原数据为tif多波段数据

如果source type 不是矢量uv，加入数据，并通过设置数据源类型工具，设置为矢量uv：
在这里插入图片描述

同样发布服务在catalog中右键数据发布影像服务即可。

3. 前端测试代码参考

官网地址参考：
https://developers.arcgis.com/javascript/latest/sample-code/layers-imagery-afrenderer/

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Flow</title>
    <style>
        html,
        body,
        #viewDiv {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
    <link rel="stylesheet" href="https://js.arcgis.com/4.27/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.27/"></script>
    <script>
       require([
            "esri/Map",
            "esri/views/MapView",
            "esri/layers/MapImageLayer",
            "esri/layers/ImageryLayer"

            ], function(Map, MapView,MapImageLayer,ImageryLayer) {
                const layer = new ImageryLayer({
                    url: "http://localhost:6080/arcgis/rest/services/uvtest/ImageServer",
                    title: "Winds",
                    renderer: {
                        type: "flow", // autocasts to new FlowRenderer
                        trailWidth: "2px",
                        color: [50, 120, 240, 1],
                        density: 1,
                        flowSpeed: 10,
                    },
                    effect: "bloom(1.5, 0.5px, 0)"
                    });

            var map = new Map({
                basemap: "streets-navigation-vector",
                layers:[layer]
            });
            var view = new MapView({
                container: "viewDiv",
                map: map,
                center: [104.5, 31],
                zoom: 13
            });
            });

    </script>
</head>

<body>
    <div id="viewDiv">
    </div>
</body>

</html>