function getData(){
$.ajax({
url: "xxx.php",
success: function(jsondata){
output(jsondata)
}
})
}
//函数
function output(json){
//转换字符串为对象
var Data = eval('(' + json + ')')
var html = ''
for(var i=0i<Data.lengthi++){
//具体键值根据你返回的字符串来
html += '名字' + Data[i].name + ' 年龄' + Data[i].age
}
//插入到元素
document.getElementById('el').innerHTML = html
}
//每隔10秒执行
setTimeout(getData, 10000)
D3 的方法不同于所谓的栅格方法,例如 Leaflet 和 Google Maps。这些 预渲染地图特征为图像瓦片 ,它们从网络服务器加载并在浏览器中拼凑在一起形成地图。
通常,D3以 GeoJSON 的形式请求 矢量地理信息,并在浏览器中将其呈现为 SVG 或 Canvas 。
光栅地图通常看起来更像传统的印刷地图,其中可以显示很多细节(例如地名、道路、河流等),而不会影响性能。但是,使用矢量方法更容易实现动画和交互等动态内容。(将这两种方法结合起来也很常见。)
GeoJSON 是一种使用 JSON 格式表示地理数据的标准,完整的规范位于 geojson.org 。每个要素都由 几何 (国家的简单多边形和廷巴克图的一个点)和 属性 组成。D3 在渲染 GeoJSON 时会处理大部分细节,因此只需对 GeoJSON 有基本的了解即可开始使用 D3 映射。
投影函数采用经度和纬度坐标(以数组的形式 [lon, lat] )并将其转换为 x 和 y 坐标。投影数学可以变得相当复杂,但幸运的是 D3 提供了大量的投影函数。
地理路径生成器是一个接受 GeoJSON 对象并将其转换为 SVG 路径字符串的函数。可以使用该方法创建生成器 .geoPath 并使用投影功能对其进行配置。
GeoJSON 是一种基于 JSON 的结构,用于指定地理数据。通常,它是使用mapshaper、ogr2ogr、shp2json或QGIS等工具从 shapefile 数据(一种广泛用于 GIS 领域的地理空间矢量数据格式)转换而来的。
shapefile 的一个来源是Natural Earth,如果开始,我建议尝试使用mapshaper来导入 shapefile 并导出为 GeoJSON。它还可以按属性过滤(例如,如果您想按大陆过滤国家)。
可以在不详细了解 GeoJSON 规范的情况下创建地图,因为诸如 mapshaper 和 D3 之类的工具可以很好地抽象出细节。
到目前为止,我们已经在示例文件中嵌入了 GeoJSON 对象。实际上,GeoJSON 将位于一个单独的文件中,并使用 ajax 请求加载。但在本章的其余部分,我们将使用以下方式加载 GeoJSON 文件:
d3.geoInterpolate()函数接受 0 到 1 之间的输入并在两个 [lon, lat] 位置之间进行插值:
可以使用 d3.geoContains 接受 GeoJSON 功能和 [lon, lat] 数组并返回布尔值来检查鼠标或触摸事件是否发生在要素边界内(SVG渲染情况下有效)