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的路径需要修改)

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值