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

1. 原始数据为多维数据

以nc数据为例。
首先在pro中需要以多维数据的方式去添加多维数据,这里的数据包含uv方向:
ArcGIS 气象风场等示例 数据制作、服务发布及前端加载_第1张图片
ArcGIS 气象风场等示例 数据制作、服务发布及前端加载_第2张图片
加载进pro的效果:
ArcGIS 气象风场等示例 数据制作、服务发布及前端加载_第3张图片

这里注意 数据属性需要为矢量uv:
ArcGIS 气象风场等示例 数据制作、服务发布及前端加载_第4张图片
如果要发布为服务,需要导出存储为tif格式,然后发布影像服务(Image Service)即可(发布影像服务可参考服务发布相关博客)。(如果原始数据为crf等数据,同样也导出保存为tif格式,确认source type是uv vector-uv类型)

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

如果source type 不是矢量uv,加入数据,并通过设置数据源类型工具,设置为矢量uv:
ArcGIS 气象风场等示例 数据制作、服务发布及前端加载_第5张图片
ArcGIS 气象风场等示例 数据制作、服务发布及前端加载_第6张图片
同样发布服务在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>Flowtitle>
    <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>

前端加载效果:
ArcGIS 气象风场等示例 数据制作、服务发布及前端加载_第7张图片

你可能感兴趣的:(ArcGIS,JS,API笔记,ArcGIS笔记,arcgis,前端,arcgis,js,风场)