JS API 创建红绿蓝缓冲区

最新推荐文章于 2023-03-02 11:17:03 发布

置顶看那远方

最新推荐文章于 2023-03-02 11:17:03 发布

阅读量202

点赞数

分类专栏： ArcGIS API for JavaScript

本文链接：https://blog.csdn.net/weixin_38866386/article/details/102457078

版权

ArcGIS API for JavaScript 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>ArcGIS API for JavaScript Hello World App</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/css/main.css">
  <script src="https://js.arcgis.com/4.12/"></script>

  <script>
    require([
      "esri/Map",
      "esri/layers/FeatureLayer",
      "esri/views/MapView",
      "esri/tasks/GeometryService",
      "esri/layers/MapImageLayer",
      "esri/layers/GraphicsLayer",
      "esri/tasks/support/Query",
      "esri/geometry/Circle",
      "esri/Graphic",
      "esri/geometry/geometryEngine",
      "esri/Color",
      "esri/geometry/Polygon",
      "esri/views/2d/draw/Draw",
      "esri/tasks/QueryTask",
      "esri/geometry/Point",
      "esri/geometry/Polyline",
      "esri/geometry/geometryEngineAsync",
      "esri/geometry/Extent",
      "esri/tasks/support/FeatureSet",
      "esri/tasks/Geoprocessor",
      "esri/widgets/Legend",
      "esri/layers/support/ImageParameters",
      "dojo/domReady!"
    ], function (Map,
      FeatureLayer,
      MapView,
      GeometryService,
      MapImageLayer,
      GraphicsLayer,
      Query,
      Circle,
      Graphic,
      geometryEngine,
      Color,
      Polygon,
      Draw,
      QueryTask,
      Point,
      Polyline,
      geometryEngineAsync,
      Extent,
      FeatureSet,
      Geoprocessor, Legend, ImageParameters) {
      var layer = new FeatureLayer({
        url: 'https://localhost:6443/arcgis/rest/services/Features/features/MapServer/1'
      });
      var map = new Map({
        basemap: 'streets',
        layers: [layer]
      });

      var view = new MapView({
        map: map,
        center: [108, 32],
        container: "viewDiv",
        zoom: 6
      });
      var query = layer.createQuery();
      query.where = "1=1";
      query.returnGeometry = true;
      query.outFields = ["*"];
      var querytask = new QueryTask("https://localhost:6443/arcgis/rest/services/Features/features/MapServer/1");
      querytask.execute(query).then(getResult);
      function getResult(result) {
        var i = 0;
        view.on("click",function(value){     
          var  point = value.mapPoint;
        console.log(2)
          var mybuffer = geometryEngine.buffer(point, 100, "kilometers");
          if(i%3==0){
            view.graphics.add(new Graphic(mybuffer,{
            type:'simple-fill',
            color:[255,0,0]
          }))
          }else if(i%3==1){
            view.graphics.add(new Graphic(mybuffer,{
            type:'simple-fill',
            color:[0,255,0]
          }))
          }else if(i%3==2){
            view.graphics.add(new Graphic(mybuffer,{
            type:'simple-fill',
            color:[0,0,255]
          }))
          }
          i++;
          if(i==3){
            i=0;
          }
      })
      }
    });
  </script>
</head>

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

</html>

看那远方

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS API 创建红绿蓝缓冲区

<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>ArcGIS API fo...
复制链接

扫一扫