Javascript:将标记添加到自定义 esri web map

Question

您好，我目前正在使用自己的 map 创建一个 javascript/html 网络应用程序。到目前为止，我所做的是在 javascript 中引用我的 id，遵循本教程 ArcGIS: Webmap by ID . map 在我的 HTML 页面上使用以下脚本显示

    <script>
    var textSymbol, picSymbol;
    require([
      "dojo/parser",
      "dojo/ready",
      "dijit/layout/BorderContainer",
      "dijit/layout/ContentPane",
      "dojo/dom",
      "esri/map",
      //// map
      // "esri/graphic",
      //  "esri/symbols/PictureMarkerSymbol",
      //  "esri/symbols/TextSymbol",
      //  "esri/geometry/Point",
      //  "esri/SpatialReference",
      //  "esri/tasks/ProjectParameters",
      //  "esri/tasks/GeometryService",
      ////
      "esri/urlUtils",
      "esri/arcgis/utils",
      "esri/dijit/Legend",
      "esri/dijit/Scalebar",
      "esri/dijit/LocateButton", //
      "esri/layers/FeatureLayer",
      ////
      //"dojo/on",
      ////
      "dojo/domReady!"
    ], function (
      parser,
      ready,
      BorderContainer,
      ContentPane,
      dom,
      Map,
      //
      //Graphic, PictureMarkerSymbol, TextSymbol, Point, SpatialReference, ProjectParameters, GeometryService,
      //
      urlUtils,
      arcgisUtils,
      Legend,
      Scalebar,
      LocateButton, //
      FeatureLayer,
      //
      on
        //
    ) {
        ready(function () {

            parser.parse();

            //if accessing webmap from a portal outside of ArcGIS Online, uncomment and replace path with portal URL
            //arcgisUtils.arcgisUrl = "http://pathto/portal/sharing/content/items";
            arcgisUtils.createMap("7f975854312c4ca9a50aa5933c4a782e", "map").then(function (response) {
                //update the app
                dom.byId("title").innerHTML = response.itemInfo.item.title;
                dom.byId("subtitle").innerHTML = response.itemInfo.item.snippet;

                var map = response.map;

                //// adding in the markers
                //var jsonString = { locations: [{ latitude: 51.6220455, longitude: 4.54404212, textToDisplayOnThePictureMarkerSymbol: 34 }, { latitude: 51.8838877, longitude: 4.7527823578, textToDisplayOnThePictureMarkerSymbol: 50 }] };
                //jsonString = jsonString.locations;
                //picSymbol = new PictureMarkerSymbol('http://static.arcgis.com/images/Symbols/Shapes/BluePin1LargeB.png', 60, 60);
                //map.on("ready", function (evt) {
                //    for (var i = 0; i < jsonString.length; i++) {
                //        var geometryPoint = new Point(jsonString[i].longitude, jsonString[i].latitude, new SpatialReference(4326));
                //        textSymbol = new TextSymbol(jsonString[i].textToDisplayOnThePictureMarkerSymbol).setOffset(0, -4);
                //        map.graphics.add(new Graphic(geometryPoint, picSymbol));
                //        map.graphics.add(new Graphic(geometryPoint, textSymbol));
                //    }
                //});
                //// end marker codes


                //add the scalebar
                var scalebar = new Scalebar({
                    map: map,
                    scalebarUnit: "english"
                });

                // location button
                geoLocate = new LocateButton({
                    map: map
                }, "LocateButton");
                geoLocate.startup();

                //add the legend. Note that we use the utility method getLegendLayers to get
                //the layers to display in the legend from the createMap response.
                var legendLayers = arcgisUtils.getLegendLayers(response);
                var legendDijit = new Legend({
                    map: map,
                    layerInfos: legendLayers
                }, "legend");
                legendDijit.startup();


            });
        });
    });
</script>

如果您注意到被注释掉的区域，我曾尝试在我的 map 上添加标记，但由于某些奇怪的原因它们没有显示。是否存在导致这种情况或任何其他因素的 map 类型差异？还是我必须添加一个新层？我对所有这些和 javascript 都很陌生，所以我不确定序列将如何影响代码——我只知道 require 脚本和函数必须在相同的序列中。请帮忙!

Answer 1

你那里的东西有几个问题。我用你的代码的一个工作示例创建了一个 jsfiddle:http://jsfiddle.net/j84bqy4v/ 以下是我所做的主要更改:

1. 基本上您不需要很多您正在做的事情，所以我删除了诸如 dojo/ready、加载 map 等内容。
2. Map on load 是一个好用的东西，但我认为它没有触发，因为在 createMap 函数返回时 map 已经加载。
3. 你的纬度/经度值也倒退了，而且它们也不在你的 map 中心附近，所以一旦我正确添加它们，它们就会出现在欧洲附近的某个地方，而不是 map 中心的新加坡。我在 map 的可见范围内放入了一些不同的任意点。
4. 此外，您的 jsonString 不是 json 字符串，而是一个 javascript 对象。我将其简化为一个对象数组。

代码如下:

Javascript

require([
    "dojo/parser",
    "dijit/layout/BorderContainer",
    "dijit/layout/ContentPane",
    "dojo/dom",
    "esri/map",
    "esri/graphic",
    "esri/symbols/PictureMarkerSymbol",
    "esri/symbols/TextSymbol",
    "esri/geometry/Point",
    "esri/SpatialReference",
    "esri/tasks/ProjectParameters",
    "esri/tasks/GeometryService",
    "esri/urlUtils",
    "esri/arcgis/utils",
    "esri/dijit/Legend",
    "esri/dijit/Scalebar",
    "esri/dijit/LocateButton",
    "esri/layers/FeatureLayer",
    "dojo/on",
    "dojo/domReady!"], 
function (
    parser, BorderContainer, ContentPane, dom, Map,
    Graphic, PictureMarkerSymbol, TextSymbol, Point, SpatialReference, ProjectParameters, GeometryService,
    urlUtils, arcgisUtils, Legend, Scalebar, LocateButton, FeatureLayer,
    on) {
    parser.parse();

    //if accessing webmap from a portal outside of ArcGIS Online, uncomment and replace path with portal URL
    //arcgisUtils.arcgisUrl = "http://pathto/portal/sharing/content/items";
    arcgisUtils.createMap("7f975854312c4ca9a50aa5933c4a782e", "map").then(function (response) {
        //update the app
        dom.byId("title").innerHTML = response.itemInfo.item.title;
        dom.byId("subtitle").innerHTML = response.itemInfo.item.snippet;

        var map = response.map;

        //// adding in the markers
        var locations = [{
            latitude: 1.382,
            longitude: 103.949,
            text: 34
        }, {
            latitude: 1.380,
            longitude: 103.952,
            text: 50
        }];
        var picSymbol = new PictureMarkerSymbol(
                'http://static.arcgis.com/images/Symbols/Shapes/BluePin1LargeB.png', 60, 60);

            for (var i = 0; i < locations.length; i++) {
                var geometryPoint = new Point(locations[i].longitude, locations[i].latitude);
                var textSymbol = new TextSymbol(locations[i].text).setOffset(0, -4);
                map.graphics.add(new Graphic(geometryPoint, picSymbol));
                map.graphics.add(new Graphic(geometryPoint, textSymbol));
            }
        //// end marker codes

        //add the scalebar
        var scalebar = new Scalebar({
            map: map,
            scalebarUnit: "english"
        });

        // location button
        geoLocate = new LocateButton({
            map: map
        }, "LocateButton");
        geoLocate.startup();

        //add the legend. Note that we use the utility method getLegendLayers to get
        //the layers to display in the legend from the createMap response.
        var legendLayers = arcgisUtils.getLegendLayers(response);
        var legendDijit = new Legend({
            map: map,
            layerInfos: legendLayers
        }, "legend");
        legendDijit.startup(); 
    });
});