您的当前位置：首页 Arcgis Server发布GP服务,leaflet 前端调用
Arcgis Server发布GP服务,leaflet 前端调用

来源：易妖游戏网
1.创建GP服务的方式

该教程使用第一种方式启动GP服务
2.创建Gp服务

1.构建模型构建器
3.调用GP服务

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
    <!-- Make sure you put this AFTER Leaflet's CSS -->
    <script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>
    <!-- Load Esri Leaflet from CDN -->
    <script src="https://unpkg.com/esri-leaflet@2.2.1/dist/esri-leaflet.js"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/proj4js/2.7.4/proj4.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/proj4leaflet/1.0.2/proj4leaflet.min.js"></script>
</head>

<body>
    <button onclick="GetNDVI()">NDVI测试按钮</button>
    <div id="mapdiv"></div>
</body>

<script>

    var gpUrl;
    var mapServer;


    // var mapurl = mapServer + "/jobs/" + jobId;
    var map = L.map('mapdiv').setView([108.038769, 34.844938], 5);
    var url = "http://webrd0{s}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8";
    var layer = new L.TileLayer(url, {
        subdomains: "1234"
    });
    map.addLayer(layer);



    function GetNDVI() {
        //创建GP服务的参数
        gpUrl = "https://192.168.0.210:43/arcgis/rest/services/test/NDVITool/GPServer/NDVITool";
        mapServer = "https://192.168.0.210:43/arcgis/rest/services/test/NDVITool/MapServer";
        var params = {
            b6: JSON.stringify({ "url": "http://192.168.0.74:8080/LANDSAT4-5MSS/2021/2/25/LM41250381984107XXX01/LM41250381984107XXX01_B4.TIF", "format": "tif" }), //Points是GP的输入参数名称，要和GP服务一直
            b5: JSON.stringify({ "url": "http://192.168.0.74:8080/LANDSAT4-5MSS/2021/2/25/LM41250381984107XXX01/LM41250381984107XXX01_B3.TIF", "format": "tif" }),//插值的字段，名称要和GP一致
            f: "pjson"
        };
        //添加异步查询方法，submitJob是异步方法 execute是同步的的方法，成果就调用gpJobComplete，中间过程调用gpJobStatus，失败调用gpJobFaile
        submitJob(params);
    }


    //GP服务调用
    function submitJob(params) {
        $.ajax({
            type: "POST",
            cache: false,
            url: gpUrl + "/submitJob",
            async: true,
            data: params,
            success: function (result) {
                result = eval("(" + result + ")");
                var jobId = result.jobId;
                if (jobId) {
                    debugger
                    Getresult(jobId);
                }
                else {

                }
            }
        });
    }


    //获取结果   
    function Getresult(jobId) {
        $.ajax({
            type: "POST",
            cache: false,
            url: gpUrl + "/jobs/" + jobId,
            data: { f: "json" },
            success: function (result1) {
                result1 = JSON.parse(result1)
                if (result1.jobStatus === "esriJobSucceeded") {
                    debugger
                    showResult(jobId);
                }
                else if (result1.jobStatus === "esriJobFailed") {
                    alert("shibai")
                }
                else {
                    setTimeout(Getresult(jobId), 10000);
                }
            }
        });
    }



    var IDWServiceLayer = new Array();
    //展示地图结果
    function showResult(jobId) {
        var mapurl = mapServer + "/jobs/" + jobId;
        $('.alert').html('开始渲染地图，请等待！').addClass('alert-success').show().delay(2000).fadeOut();
        var envLayer = new L.esri.dynamicMapLayer({ url: mapurl, opacity: 0.6, useCors: false });
        //加载之前先清除原有
        if (IDWServiceLayer.length > 0) {
            map.removeLayer(IDWServiceLayer[0]);
            IDWServiceLayer.length = 0;
        }
        map.addLayer(envLayer);
        IDWServiceLayer.push(envLayer)
    }

</script>

<style>
    #mapdiv {
        width: 100%;
        height: calc(100vh);
    }
</style>

</html>
因篇幅问题不能全部显示，请点此查看更多更全内容
查看全文