ArcGIS Circle Buffer

时间:2014-07-09 13:13:08

标签: javascript buffer arcgis esri arcgis-js-api

我陷入困境,试图使用ArcGIS绘制一个简单的圆形缓冲区。以下是我设置基本地图的方法:

dojo.require("esri.map");
dojo.require("esri.tasks.servicearea");
dojo.require("dijit.dijit");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("esri/layers/FeatureLayer");
dojo.require("esri/symbols/SimpleMarkerSymbol");

var mapLayers = new Array();
var map;
var GL = null;

function setMap() {
    function init() {
        require(
            [
                "esri/map",
                "dojo/dom-construct",
                "dojo/domReady!",
                "esri/tasks/GeometryService"
            ],
            function 
            (
                Map,
                domConstruct
            ) {
                map = Map("map-canvas",
                {
                    //infoWindow: popup
                });
                map.setZoom(1);
                coreFunctions();
            });

    }
    dojo.ready(init);
    dojo.connect(map, "onClick", addCircle);
}

function coreFunctions() {
    try {
        addLayersToMap();
    }
    catch (err) {
        console.log(err);
    }
}
function addLayersToData() {
    var layer = new esri.layers.ArcGISTiledMapServiceLayer("https://www.onemap.sg/ArcGIS/rest/services/BASEMAP/MapServer");
    mapLayers.push(layer);
    var layer2 = new esri.layers.ArcGISTiledMapServiceLayer("http://www.onemap.sg/ArcGIS/rest/services/LOT_VIEW/MapServer");
    mapLayers.push(layer2);
    layer2.hide();
}

function addLayersToMap() {
    addLayersToData();
    for (var a = 0; a < mapLayers.length; a++) {
        map.addLayer(mapLayers[a]);
    }
    map.setZoom(1);
}

所以这是我尝试在地图上绘制圆形图形的另一种方法:

function addCircle(e) {
sym = new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([180, 0, 180, 1.0]));

console.log("clicked the map: ", e);
var pt, radius, circle, ring, pts, angle;

pt = e.mapPoint;
circle = new esri.geometry.Polygon(map.spatialReference);
ring = []; // point that make up the circle
pts = 40; // number of points on the circle
angle = 360 / pts; // used to compute points on the circle
for (var i = 1; i <= pts; i++) {
    // convert angle to raidans
    var radians = i * angle * Math.PI / 180;;
    // add point to the circle
    ring.push([pt.x + radius * Math.cos(radians), pt.y + radius * Math.sin(radians)]);
    console.log(ring[i]);
}
ring.push(ring[0]); // start point needs to == end point
circle.addRing(ring);
map.graphics.add(new esri.Graphic(circle, sym));
console.log("added a graphic");
}

它确实执行了该功能,但地图上没有绘制圆圈以及错误信息。我想知道我的逻辑哪个部分出了问题?

提前致谢。

2 个答案:

答案 0 :(得分:1)

在API版本3.8中,此任务https://developers.arcgis.com/javascript/jsapi/circle-amd.html已有一个类,您可以使用此类绘制测地圆。

答案 1 :(得分:0)

你非常非常接近 - 唯一的问题是你永远不会设置变量radius的值,所以你的所有坐标都计算为pt.x + (nothing) * Math.cos(radians) .... javascript是NaN。我在radius = 100;循环之前添加了for,一切正常。

这实际上是一个非常容易调试的错误。 IMO,如果您没有使用Chrome进行ESRI JS开发,那么您应该 - 它内置的开发工具非常适合检查对象属性。我计算出来的方法只是将map.graphics.graphics数组转储到控制台 - 然后你可以深入到每个数组元素的geometry.rings并快速计算出每个点都有{ {1}}和x = NaN,从那里很明显你的计算有问题。