欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 编程资源 > 编程问答 >内容正文

编程问答

【高德地图入门】--- 解析geojson

发布时间：2024/3/24 编程问答 64 豆豆
生活随笔 收集整理的这篇文章主要介绍了 【高德地图入门】--- 解析geojson 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

简介

GeoJSON是一种用于编码各种地理数据结构的数据。GeoJSON对象可以表示几何、特征或特征集合。GeoJSON支持以下几何类型：点（Point）、线（LineString）、面（Polygon）、多点（MultiPoint）、多线（MultiLineString）、多面（MultiPolygon）和几何集合（GeometryCollection）。GeoJSON中的功能包含几何对象和其他属性，特征集合表示一系列特性。

举例

GeoJson 是有点,线,面组成. 因此高德地图也推出了对应的api,用来解析GeoJson

const geoJSON = {type: "FeatureCollection",features: [{type: "Feature",geometry: { type: "Point", coordinates: [102.0, 0.5] }},{type: "Feature",geometry: {type: "LineString",coordinates: [[102.0, 0.0],[103.0, 1.0],[104.0, 0.0],[105.0, 1.0],]}},{type: "Feature",geometry: {type: "Polygon",coordinates: [[[100.0, 0.0],[101.0, 0.0],[101.0, 1.0],[100.0, 1.0],[100.0, 0.0],]]}},],};

上面的GeoJson 包含了 点,线,面 。下面看看高德地图是如何解析的呢

new AMap.GeoJSON({geoJSON: geoJSON,getPolygon: function (geojson, lnglats) {console.log('面',lnglats);},getMarker: function (geojson, lnglats) {console.log('点',lnglats)},getPolyline: function (geojson, lnglats) {console.log('线',lnglats);},});

打印结果：

多点 ，多面，多线 的解析

这里只拿多面举个例子

打印结果

几何集合的解析


打印结果

总结
由上面的例子可以看出， 依靠高德的 AMap.GeoJSON 可以对geoJson进行解析
AMap.GeoJSON中有四个属性

AMap.GeoJSON每解析到一个面对象就会触发一次getPolygon对应的函数，如果geoJson对象中有多个面，就会多次触发getPolygon。点，线也是如此。

全部代码展示 （其中xxxx 高德的秘钥，cccc是高德的key，需要自己申请）

<!DOCTYPE html> <html><head><metaname="viewport"content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=0"/><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>map</title><style>body,html,#container {margin: 0;width: 100%;height: 100%;}</style></head><body><div id="container"></div></body><script>window._AMapSecurityConfig = {securityJsCode: "xxxx",};</script><scriptlanguage="javascript"src="https://webapi.amap.com/maps?v=1.4.15&key=cccc&plugin=AMap.GeoJSON"></script><script language="javascript">const geoJSON = {type: "FeatureCollection",features: [{type: "GeometryCollection",geometries: [{type: "Point",coordinates: [108.62, 31.02819],},{type: "LineString",coordinates: [[108.896484375, 30.107117887],[108.2184375, 30.9171787],[109.5184375, 31.217578],],},],},],};new AMap.GeoJSON({geoJSON: geoJSON,getPolygon: function (geojson, lnglats) {console.log("面", lnglats);},getMarker: function (geojson, lnglats) {console.log("点", lnglats);},getPolyline: function (geojson, lnglats) {console.log("线", lnglats);},});</script> </html>

总结

以上是生活随笔为你收集整理的【高德地图入门】--- 解析geojson的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。