【高德地图入门】--- 解析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>
<meta
name="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>maptitle>
<style>
body,
html,
#container {
margin: 0;
width: 100%;
height: 100%;
}
style>
head>
<body>
<div id="container">div>
body>
<script>
window._AMapSecurityConfig = {
securityJsCode: "xxxx",
};
script>
<script
language="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>