@giszhc/kml-to-geojson：kml转换GeoJSON，这才是更优解

kml-to-geojson一个简单、轻量的 JavaScript / TypeScript 工具库用于将KML、GPX、OVKML奥维 KML或OVJSN奥维 JSON文件转换为GeoJSON格式。支持以下特性支持 KML 格式- Point, LineString, Polygon, MultiGeometry, Track 等支持 GPX 格式- Track, Route, Waypoint 等支持 OVKML 格式- OpenVector KML 格式奥维 KML支持 OVJSN 格式- OpenVector JSON 格式奥维 JSON包括标准 GeoJSON 和特殊层级格式支持本地文件和网络 URL- 可直接传入 Document 对象或 HTTP(S) URL保留样式和属性信息- name, address, description, styleUrl 等KML 颜色转换- 自动将 KML 的 AABBGGRR 颜色格式转换为 RGBA异步处理- 支持 Promise方便现代 JavaScript 开发Tree Shaking 友好- 支持按需引入在线示例我们提供了一个功能完整的在线演示页面您可以直接在浏览器中体验所有功能 立即体验点击访问在线演示在线示例支持✨ KML、GPX、OVKML、OVJSN 格式转换 本地文件上传 URL 地址加载 结果下载和复制安装你可以通过 npm 或 pnpm 安装该库pnpminstallgiszhc/kml-to-geojson# 或npminstallgiszhc/kml-to-geojsonAPIkmlToGeoJSON(input: Document | string): Promise将 KML 文档或 URL 转换为 GeoJSON FeatureCollection参数input- 可以是DOM Document 对象KML 文件的 URL 字符串以http://或https://开头KML 文件内容的字符串返回PromiseFeatureCollection- GeoJSON FeatureCollection 对象输出示例{type:FeatureCollection,features:[{type:Feature,geometry:{type:Point,coordinates:[120.5,30.2]},properties:{name:示例地点,address:测试地址,description:描述信息}}]}示例import{kmlToGeoJSON}fromgiszhc/kml-to-geojson;// 方式 1从本地文件读取constfileInputdocument.getElementById(file);constfilefileInput.files[0];consttextawaitfile.text();constgeojsonawaitkmlToGeoJSON(text);console.log(geojson);// FeatureCollectionimport{kmlToGeoJSON}fromgiszhc/kml-to-geojson;// 方式 2从网络 URL 加载constgeojsonawaitkmlToGeoJSON(https://example.com/data.kml);console.log(geojson);// FeatureCollectionimport{kmlToGeoJSON}fromgiszhc/kml-to-geojson;// 方式 3直接传入 XML 字符串constkmlContent?xml version1.0 encodingUTF-8? kml xmlnshttp://www.opengis.net/kml/2.2 Document Placemark Point coordinates120.5,30.2/coordinates /Point /Placemark /Document /kml;constgeojsonawaitkmlToGeoJSON(kmlContent);console.log(geojson);// FeatureCollectiongpxToGeoJSON(input: Document | string): Promise将 GPX 文档或 URL 转换为 GeoJSON FeatureCollection参数input- 可以是DOM Document 对象GPX 文件的 URL 字符串以http://或https://开头GPX 文件内容的字符串返回PromiseFeatureCollection- GeoJSON FeatureCollection 对象示例import{gpxToGeoJSON}fromgiszhc/kml-to-geojson;// 方式 1从本地文件读取constfileInputdocument.getElementById(file);constfilefileInput.files[0];consttextawaitfile.text();constgeojsonawaitgpxToGeoJSON(text);console.log(geojson);// FeatureCollectionimport{gpxToGeoJSON}fromgiszhc/kml-to-geojson;// 方式 2从网络 URL 加载constgeojsonawaitgpxToGeoJSON(https://example.com/track.gpx);console.log(geojson);// FeatureCollectionimport{gpxToGeoJSON}fromgiszhc/kml-to-geojson;// 方式 3直接传入 XML 字符串constgpxContent?xml version1.0 encodingUTF-8? gpx version1.1 creatorExample trk name轨迹/name trkseg trkpt lat30.1 lon120.2/trkpt trkpt lat30.2 lon120.3/trkpt /trkseg /trk /gpx;constgeojsonawaitgpxToGeoJSON(gpxContent);console.log(geojson);// FeatureCollectionovjsnToGeoJSON(input: FeatureCollection | Recordstring, any | string): Promise将 OVJSN 文档或 URL 转换为 GeoJSON FeatureCollection。支持两种格式标准 GeoJSON 格式- 直接返回 FeatureCollectionOVJSN 特有格式- 包含 Version, Type, ObjItems 等字段的层级结构数据奥维 JSON 特有格式参数input- 可以是GeoJSON FeatureCollection 对象OVJSN 对象包含 Version, Type, ObjItems 等字段的奥维 JSON 对象OVJSN 文件的 URL 字符串以http://或https://开头OVJSN 文件内容的字符串返回PromiseFeatureCollection- GeoJSON FeatureCollection 对象示例import{ovjsnToGeoJSON}fromgiszhc/kml-to-geojson;// 方式 1从本地文件读取标准 GeoJSON 格式constfileInputdocument.getElementById(file);constfilefileInput.files[0];consttextawaitfile.text();constgeojsonawaitovjsnToGeoJSON(text);console.log(geojson);// FeatureCollectionimport{ovjsnToGeoJSON}fromgiszhc/kml-to-geojson;// 方式 2从网络 URL 加载constgeojsonawaitovjsnToGeoJSON(https://example.com/data.ovjsn);console.log(geojson);// FeatureCollectionimport{ovjsnToGeoJSON}fromgiszhc/kml-to-geojson;// 方式 3OVJSN 特有格式奥维 JSON 层级结构constovjsnData{Version:V10.1.6,Type:1,ObjItems:[{Type:30,Object:{Name:分组名称,ObjectDetail:{ObjChildren:[{Type:7,Object:{Name:名称,ObjectDetail:{Lat:31.4048,Lng:120.8616}}}]}}}]};constgeojsonawaitovjsnToGeoJSON(ovjsnData);console.log(geojson);// 输出// {// type: FeatureCollection,// features: [// {// type: Feature,// geometry: {// type: Point,// coordinates: [120.816, 31.40152048]// },// properties: {// name: 名称,// group: [分组名称]// }// }// ]// }使用示例基本使用示例从本地文件转换inputtypefileidfileInputaccept.kml,.gpxbuttononclickconvert()转换/buttonscripttypemoduleimport{kmlToGeoJSON,gpxToGeoJSON}fromgiszhc/kml-to-geojson;asyncfunctionconvert(){constfileInputdocument.getElementById(fileInput);constfilefileInput.files[0];if(!file)return;consttextawaitfile.text();constparsernewDOMParser();constdocparser.parseFromString(text,text/xml);letgeojson;if(file.name.endsWith(.kml)){geojsonawaitkmlToGeoJSON(doc);}elseif(file.name.endsWith(.gpx)){geojsonawaitgpxToGeoJSON(doc);}console.log(JSON.stringify(geojson,null,2));}/script从网络 URL 转换import{kmlToGeoJSON,gpxToGeoJSON}fromgiszhc/kml-to-geojson;// 转换 KMLconstkmlGeoJSONawaitkmlToGeoJSON(https://example.com/regions.kml);console.log(kmlGeoJSON);// 转换 GPXconstgpxGeoJSONawaitgpxToGeoJSON(https://example.com/hiking-track.gpx);console.log(gpxGeoJSON);结合地图库使用Leafletimport{kmlToGeoJSON}fromgiszhc/kml-to-geojson;importLfromleaflet;constmapL.map(map).setView([30,120],10);L.tileLayer(https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png).addTo(map);// 加载 KML 并显示在地图上constgeojsonawaitkmlToGeoJSON(https://example.com/data.kml);L.geoJSON(geojson).addTo(map);支持的几何类型KML:PointLineStringPolygonMultiGeometryTrack / gx:TrackGPX:Track (trk)Route (rte)Waypoint (wpt)注意事项浏览器环境- 需要在浏览器环境中运行依赖DOMParser、XMLSerializer和fetchAPICORS- 从网络 URL 加载文件时需要确保目标服务器支持跨域请求异步处理- 所有转换方法都是异步的需要使用await或.then()错误处理- 建议添加 try-catch 块来处理可能的解析错误try{constgeojsonawaitkmlToGeoJSON(https://example.com/data.kml);console.log(geojson);}catch(error){console.error(转换失败:,error);}如果这篇文章对你有帮助欢迎点赞 收藏 ⭐ 关注 完结撒花✿✿ヽ(°▽°)ノ✿