【高德地图入门】--- 解析geojson
生活随笔
收集整理的這篇文章主要介紹了
【高德地图入门】--- 解析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的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 云创物联防窜货系统主要有哪5大特点?
- 下一篇： 04——svg中的图形分组＜g＞