arcgis api for js之引入本地json,並實現InfoTemplate彈框

首先感謝該博客博主分享的這篇文章,對我本身啓發很大。
說一下自己遇到的 問題:老師分享了一份json數據,如下圖:
老師發的json數據,裏面的大信息被我用X代替或者刪掉了
然後自己首先思考的實現思路①如何將其添加到地圖上。②實現InfoTemplate彈框。(引入本地json,然後轉換爲geometry形式的數據,與symbol,attribute,InfoTemplate一起添加到graphic裏)
然後我又查看固定的esri/geometry/Multipoint添加的方式,發現json數據需要進行修改:
(當然,我剛開始也是想的導入本地json文件,但是老師給的json文件和網上的json文件有區別,然後查了一下json標準格式,的確有【“對象”:“值”】的這種,但要把中國倆字去掉,單引號變成雙引號,值不加雙引號也可以(這話只針對我的這份數據,其他的自測)。當我終於以爲我已經處理好json數據時,發現我還是不知道如何引入。網上有很多ajax的和$.getJson()的方法,但自己沒學,(比較浮躁)嘗試幾下就放棄了。)
在本文剛開始提到的鏈接裏,我看到了新的類型的json數據。(個人感覺json轉geometry需要特定json數據格式,如下圖)
新的json數據
identifier算是一個唯一標識符一樣的作用吧。記住這個items,在後面會有用。items是個數組哦。
那下面看下我的代碼把(基本和文首提的文章的內容一樣。):
代碼裏有個很長的註釋,一定詳看!!!

 //Symbol
 var sms = new SimpleMarkerSymbol().setStyle(SimpleMarkerSymbol.STYLE_SQUARE).setColor(new Color([0,255,0,0.5]));
    require(["dojo/store/Memory","dojo/store/Observable"], function(Memory,Observable)
    {
        /*引入json,賦給store(我把require裏的"dojo/store/JsonRest",這句話寫在最開始的裏面了,
        所以這個內部require裏面沒寫,這個必須要引入。具體可以看看dojo裏怎麼寫的或者文首鏈接裏博主的寫法。)*/
    	var store = new JsonRest({ target: "china.json"});
    	
    	//創建信息模板,讀取JSON數據中的 city(佔位符) 值以及 XY值
    	var infoTemplate = new InfoTemplate("${name}","X:${X}</br>Y:${Y}");
    	
   		/* 利用store對象的query函數(result剛開始不明白,但是then的意思在那就理通了,即:得到id數組後幹嘛啊?
   		答:你得到結果(result)就是就是前面獲取的數組的結果(簡言之:result==store.query({ id:"*" }))
   		;items是自己json裏的items,request有或者無都沒關係
   		(它的意思就是下面的方法執行就是請求,但是不寫的話,它依然會執行))*/
    	store.query({ id:"*" }).then(function (result,request){
            var items = result.items;
            console.log(items);
            for (var i = 0; i < items.length; i++) {
                            var attr = {
                                "name": items[i].city,
                                "X": items[i].x,
                                "Y": items[i].y
                            };
                            
                            // 根據獲取的x y值構造點對象
                            var loc = new Point(items[i].x, items[i].y, new SpatialReference({ wkid: 4326 }));
                            
                             // 構造圖形
                            var graphic = new Graphic(loc, sms, attr, infoTemplate);
                            
                            // 將圖形添加到地圖中
                            map.graphics.add(graphic);
                        }
    });
})

效果圖:
北京烏魯木齊市
至此,算全部實現了。我還不是很明白,但多少有點思路,大家可以嘗試寫線段或則面的,或者改進這種方法,不會的下方留言。偶爾來轉,看到會回的。文首鏈接博主的內容我還沒看完,大家需要深究的可以看下,我這也算保存了。萬一以後看呢。對了,你們可能會遇到跨域的問題,把json和你的網頁佈局到web服務器上就行了。(實際就是放到wwwroot文件夾裏。還有把你的index網頁和你的json放在同一文件目錄下。不然引入json的路徑需要修改)

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章