中国民政网矢量地图分析

以深圳地图为例：查询 (mca.gov.cn)

 在EDGE中打开查看源代码，找到如下代码：

 <div id="map"> 
		</div>
		<div id="picMap">
			<img id="pic"/>
		</div>
		<div id="nanhai">
		</div>
       <script type="text/javascript" src="/d3/charts.js"> </script>

　　其中的ID=map就是矢量地图标志，chart.js就是画图的代码。按F12，选择网络，可以把chart.js下载下来分析。

 打开chart.js，地图部分从changeMap();开始，

$.ajax({
        url: creatURLOfAreaCode(),    /////////////// =http://xzqh.mca.gov.cn/jsp/getInfo.jsp?shengji=%B9%E3%B6%AB%CA%A1%A3%A8%D4%C1%A3%A9&diji=%C9%EE%DB%DA%CA%D0&xianji=-1
        async: false,
        dataType: 'text',
        type: "GET",
        success: function (result) {   /////result=440300

首先异步取到深圳的区码44030，然后执行 map_level = "shi";map_code = areaCode=440300。最好的未来调用renderData();

再看function renderData()：先是code = map_code=440300;，然后异步调用如下代码：

$.ajax({
            url: './getInfo?code=' + code + '&type=2',
            type: 'GET',
            async: false,    //或false,是否异步
            timeout: 5000,    //超时时间
            dataType: 'text',    //返回的数据格式：json/xml/html/script/jsonp/text
            success: function (data) { ////////////data={"440304":"5","440303":"5","440305":"5","440306":"5","440307":"5","440308":"5","440309":"5","440310":"5","440311":"5"}
                if(data != "")

得到的注记数据也注释在上面。zhuJiType = $.parseJSON(data); //获得注记类，再调用函数drawMapTopoJson();绘制地图。

继续看function drawMapTopoJson() ：赋值fileName = map_code=440300；用D3得到地图数据440300.json.

d3.json("data/" + fileName + ".json", function (error, toporoot) { ///////////http://xzqh.mca.gov.cn/data/440300.json
mapGraData = topojson.feature(toporoot, toporoot.objects[fileName]); ///////////topojson.feature - convert TopoJSON to GeoJSON.

 

 # topojson.feature(topology, object)

Returns the GeoJSON Feature or FeatureCollection for the specified object in the given topology. If the specified object is a string, it is treated as topology.objects[object]. Then, if the object is a GeometryCollection, a FeatureCollection is returned, and each geometry in the collection is mapped to a Feature. Otherwise, a Feature is returned. The returned feature is a shallow copy of the source object: they may share identifiers, bounding boxes, properties and coordinates.

Some examples:

A point is mapped to a feature with a geometry object of type “Point”.
Likewise for line strings, polygons, and other simple geometries.
A null geometry object (of type null in TopoJSON) is mapped to a feature with a null geometry object.
A geometry collection of points is mapped to a feature collection of features, each with a point geometry.
A geometry collection of geometry collections is mapped to a feature collection of features, each with a geometry collection.

countData = mapGraData.features

 

 

drawMap(toporoot);