Question

我正在尝试使用HTML中的span #thritude和span #latitude在ArcGIS地图上绘制多个点。我可以得到第一点绘图，但不是任何后续点。我是ArcGIS的新手，我的javascript知识有限。任何帮助表示赞赏！

<script>
var map, agraphicsLayer, symbol;
function addPointtoMap(x, y) {
    require([
        "esri/geometry/Point", 
        "esri/graphic", 
        "dojo/domReady!"], 
    function(Point, Graphic) {
        var pt = new Point(x, y);
        map.centerAt(pt);
        agraphicsLayer.add(new Graphic(pt, symbol));
    });
}

(function($) {
    if($("div#mapDiv").length) {
        $.getScript( "http://js.arcgis.com/3.14/" )
            .done(function( script, textStatus ) {
                require(["esri/map", 
                "esri/symbols/SimpleMarkerSymbol", 
                "esri/geometry/Point", 
                "esri/graphic", 
                "esri/Color", 
                "esri/layers/GraphicsLayer", 
                "dojo/domReady!"
                ], 
                function(
                    Map,
                    SimpleMarkerSymbol, 
                    Point, 
                    Graphic, 
                    Color, 
                    GraphicsLayer) {

                    map = new Map("mapDiv", {
                        center: [-56.049, 32.485],
                        zoom: 5,
                        basemap: "topo",
                        logo: false
                    });

                    map.on("load", function() {
                        map.disableScrollWheelZoom();
                    });
                    agraphicsLayer = new GraphicsLayer();
                    map.addLayer(agraphicsLayer);

                    symbol = new SimpleMarkerSymbol();
                    symbol.setColor(new Color("#00ADA1"));

                    var pt = new Point($("span#longitude").html(), $("span#latitude").html());
                    map.centerAt(pt);
                    agraphicsLayer.add(new Graphic(pt, symbol));
                });
            })
            .fail(function( jqxhr, settings, exception ) { });
    }
</script>
<div id="mapDiv"></div>

        <span id="longitude">37.82</span>
        <span id="latitude">-2.28</span> 
        <span id="longitude">34.82</span>
        <span id="latitude">1.36</span> 
        <span id="longitude">34.31</span>
        <span id="latitude">-0.67</span> 
        <span id="longitude">40.19</span>
        <span id="latitude">.10</span>

Answer 1

在HTML 4.01和HTML 5规范中，“id”属性在文档中的所有ID中必须是唯一的，所以

$("span#longitude").html()

只会给你第一个经度（或者至少它不会给你想要的东西，它可以循环遍历所有纬度/经度）

有很多方法可以实现您的目标。一种方法是将lat / long存储在javascript而不是HTML中。

你会这样做

<script>
var map, agraphicsLayer, symbol,
data = {"type": "FeatureCollection",
"features": [{
  "type": "Feature",
  "geometry": {
    "type": "Point",
    "coordinates": [37.82, -2.28]
  }},
  {
  "type": "Feature",
  "geometry": {
    "type": "Point",
    "coordinates": [34.82, 1.36]
  }},
  {
  "type": "Feature",
  "geometry": {
    "type": "Point",
    "coordinates": [34.31, -0.67]
  }},
  {
  "type": "Feature",
  "geometry": {
    "type": "Point",
    "coordinates": [40.19, 0.10]
  }}]
};

...code snipped for brevity
//here you want to loop through the points
data.features.forEach(function(feature){
    var pt = new Point(feature.geometry.coordinates, map.spatialReference);
    agraphicsLayer.add(new Graphic(pt, symbol));
})      
</script>

如果你真的想像现在这样以跨度存储数据，那么你需要将“id”属性更改为“class”属性，然后将lat / long spans包含在某个分组元素中，如div或other跨度

<div class="coordinate">
  <span class="longitude">37.82</span>
  <span class="latitude">-2.28</span>
</div>

然后在javascript中做这样的事情

$(".coordinate").each(function(){
//this refers to each "coordinate" div as we loop through them
    var long = $(this).find(".longitude").html()
    var lat = $(this).find(".lattitude").html()
    var pt = new Point(long, lat);
    //etc

})

在ArcGIS中从html跨度绘制多个点

1 个答案: