解析百度三维地图JS数据结构与实现

百度三维地图JS数据格式解析

百度三维地图采用的JS数据格式示例如下：mapData["sign"] ["5,158,141"]={"busStation":{"4,317,282": [{"id":"ff8080811c462eb7011d2e23d5b91083","name":"地安门站","y":579152,"x":650606}, {"id":"ff8080811c462eb7011d2e2414f31085","name":"地安门站","y":579176,"x":650750}],"4,316,283": [{"id":"ff8080811c462eb7011d2cc3d5630ef3","name":"白士站","y":580232,"x":648834}]}}。

JavaScript关联数组对象构建

为了进行模仿实现，首先需要理解作为关联数组使用的对象概念。

var o = new Object();

o.x="Hello!";

上述代码定义了一个对象，其中属性x被赋值为“Hello!”，这是常见的对象定义方式。在JavaScript中，对象可作为关联数组使用，因为它们能将任意数据值与任意字符串关联起来。若以这种方式访问对象，需采用方括号封闭的属性名字符串语法，例如对对象o的x属性进行如下赋值：

var o = new Object();

o["x"]="Hello!"

这种语法在属性名未知或动态变化的场景中至关重要。当无法使用点号（.）存取属性时，运算符[]允许通过字符串值（运行时可变）而非硬编码标识符来命名属性。采用此方式使用的对象被称为关联数组（参考《JavaScript权威指南（第四版）》第155页）。

动态键名与嵌套对象实现

基于上述原理，可按以下方式定义对象：

（1）<script type="text/javascript">

var o = new Object();

var x =MapData[2];

var y = MapData[3];

o[x] = new Object();

o[x][y] = {"id":MapData[0],"icolor":MapData[1],"x":MapData[2],"y":MapData[3],"coordinate":MapData[4],"type":MapData[5],"attribute":MapData[6]};

//o[x][y]={"busStation":{"4,315,283": [{"id":"ff8080811c462eb7011d238c49a00b35","name":"西板桥公交站","y":580326,"x":646206}, //{"id":"ff8080811c462eb7011d238dc5980b38","name":"西板桥公交站","y":580686,"x":645310}, //{"id":"ff8080811c462eb7011d2391ac470b3f","name":"故宫公交车站","y":581454,"x":645606}, //{"id":"ff8080811c462eb7011d2392aea60b44","name":"故宫公交站","y":581470,"x":645690}]}};

alert(o[x][y]["id"]);

</script>

（2）此外，对象还可按如下形式书写：

<script type="text/javascript">

var d ={"x":{"y":{'id':MapData[0],'icolor':MapData[1],"x":MapData[2],"y":MapData[3],"coordinate":MapData[4],"type":MapData[5],"attribute":MapData[6]}},"x1":{"y1":{"id":MapData[8],"icolor":MapData[1],"x":MapData[2],"y":MapData[3],"coordinate":MapData[4],"type":MapData[5],"attribute":MapData[6]}}}

alert(d["x"]["y"]["icolor"]);

</script>

通过上述方法，生成的JS数据结构即可与百度地图保持一致。