在 ArcGIS 中绘制来自 html 跨度的多个点

Question

我正在尝试在 HTML 中使用 span#longitude 和 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/longs）

有很多方法可以实现您的目标。一种方法是将 lat/longs 存储在 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 跨度包装在一些分组元素，如 div 或另一个 span

<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 跨度的多个点

Plotting multiple Points from html spans in ArcGIS

arcgis

arcgis-js-api