json 형식 데이터를 html로 아름답게 만들고 표시하는 방법

GeoJsonTxt示例如下：
 
 
注意：示例中features,geometry,coordinates,properties,name,description字段是必须有的， 字段名称不能改变，需要扩展的字段可以在properties里面自行添加
 
 

        

         로그인 후 복사
        
       

function showGeoJsonTxt(){ $('#geoJsonTxt').html(JsonFormat()); } function JsonFormat() { var json={ "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 123, 22, 0 ] }, "properties": { "name": "必须有的字段", "description": "必须有的字段", "age":"扩展字段，可以自行添加，扩展", "type":"扩展字段，可以自行添加，扩展" } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 123, 32, 0 ] }, "properties": { "name": "必须有的字段", "description": "必须有的字段", } } ] }; if (typeof json != 'string') { json = JSON.stringify(json, undefined, 2); } json = json.replace(/&/g, '&').replace(//g, '>'); return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) { var cls = 'number'; if (/^"/.test(match)) { if (/:$/.test(match)) { cls = 'key'; } else { cls = 'string'; } } else if (/true|false/.test(match)) { cls = 'boolean'; } else if (/null/.test(match)) { cls = 'null'; } return '' + match + ''; }); }