zoukankan      html  css  js  c++  java
  • 通过arcgis js api 4.9实现调用buffer的gp服务

    1.构建模型

    2.发布服务,将执行模式设置为同步

     

    3.arcgis js前端调用gp服务

    <!DOCTYPE html>
    <html>

    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>gp_buffer</title>

    <link rel="stylesheet" href="http://localhost:8080/arcgis_js_api/library/4.9/esri/css/main.css">
    <script src="http://localhost:8080/arcgis_js_api/library/4.9/init.js"></script>
    <style>
    html,
    body,
    #viewDiv {
    height: 100%;
    100%;
    margin: 0;
    padding: 0;
    }
    </style>
    <script>
    require([
    "esri/Map",
    "esri/views/MapView",
    "esri/layers/GraphicsLayer",
    "esri/geometry/Point",
    "esri/Graphic",
    "esri/tasks/Geoprocessor",
    "esri/tasks/support/FeatureSet",
    "esri/tasks/support/LinearUnit",
    "esri/geometry/SpatialReference",
    "esri/geometry/geometryEngine"
    ], function(
    Map, MapView,GraphicsLayer,Point, Graphic,Geoprocessor, FeatureSet,LinearUnit,SpatialReference,geometryEngine
    ) {
    var gpUrl=
    "http://localhost:6080/arcgis/rest/services/Buffer/GPServer/Buffer";

    const map = new Map({
    basemap: "topo"
    });

    const view = new MapView({
    container: "viewDiv",
    map: map,
    zoom: 6,
    spatialReference:{ wkid: 3857},
    center:[0,0]
    });
    //创建矢量图层并加入到地图上
    var graphicsLayer = new GraphicsLayer();
    map.add(graphicsLayer);
    //设置点样式
    var markerSymbol = {
    type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
    color: [255, 0, 0],
    outline: { // autocasts as new SimpleLineSymbol()
    color: [255, 255, 255],
    1
    }
    };
    //设置面(缓冲区)样式
    var fillSymbol = {
    type: "simple-fill", // autocasts as new SimpleFillSymbol()
    color: [1, 2, 224, 0.75],
    outline: { // autocasts as new SimpleLineSymbol()
    color: [255, 255, 159],
    1
    }
    };
    //创建爱你gp服务矢量并设置输出的坐标参考
    var gp=new Geoprocessor({
    url:gpUrl
    });
    gp.outSpatialReference = { // autocasts as new SpatialReference()
    wkid: 3857
    };

    //将buffer回调函数注册到单击视图事件上
    view.on("click",buffer);

    function buffer(event){
    var point=event.mapPoint;
    //构建矢量数据源,包含几何和样式
    var inputGraphic = new Graphic({
    geometry: point,
    symbol: markerSymbol
    });
    //将矢量数据源添加到矢量图层中
    graphicsLayer.add(inputGraphic);

    var inputGraphicContainer = [];
    inputGraphicContainer.push(inputGraphic);
    //创建要素集实例,它的features位graphic数组
    var featureSet = new FeatureSet();
    featureSet.features = inputGraphicContainer;
    var bufferDistance = new LinearUnit();
    bufferDistance.distance = 150000;
    bufferDistance.units = "meters";
    //参数名input、dis要与gp服务的参数名保持一致,否则无效
    var params = {
    input : featureSet,
    dis:bufferDistance
    };
    //同步执行地理处理任务,返回位Promise<Object>类型
    gp.execute(params).then(result);
    }


    function result(data) {
    console.log(data);
    //data.results[0].value即返回结果为feature-record-set-layer类型对应的是js中的FeatureSet类型
    var resultFeatures=data.results[0].value.features;
    // 对每个矢量图形进行符号化
    var bufferGraphics = resultFeatures.map(function(feature) {
    feature.symbol = fillSymbol;
    return feature;
    });
    //将结果加到graphicsLayer图层中
    graphicsLayer.addMany(bufferGraphics);
    }
    })
    </script>
    <body>
    <div id="viewDiv"></div>
    </body>
    </html>

    4.结果

     
  • 相关阅读:
    20199108 2019-2020-2 《网络攻防实践》第8周作业
    20199108 2019-2020-2 《网络攻防实践》第7周作业
    攻防作业报告提交
    Spring整合HBase
    基于注解的Spring AOP示例
    Spring AOP基本概念
    在RichFaces中使用Facelets模板
    算法导论读书笔记(19)
    算法导论读书笔记(18)
    算法导论读书笔记(17)
  • 原文地址:https://www.cnblogs.com/lihaijia/p/14542903.html
Copyright © 2011-2022 走看看