GeoJSON
GeoJSON
一种用于编码各种地理数据结构的数据。GeoJSON对象可以表示几何、特征或特征集合。GeoJSON支持以下几何类型：点（Point）、线（LineString）、面（Polygon）、多点（MultiPoint）、多线（MultiLineString）、多面（MultiPolygon）和几何集合（GeometryCollection）。GeoJSON中的功能包含几何对象和其他属性，特征集合表示一系列特性。
geojson.io
解析GeoJSON，在线地图展示，一个由Mapbox开发的开源项目，旨在提供一个快速、简单的工具，用于创建、查看和共享空间数据。https://geojson.io/
DataV.GeoAtlas
DataV.GeoAtlas，线上地理小工具，用于地理范围选择、地理边界生成和层级生成等功能，由高德提供数据支持。https://datav.aliyun.com/portal/school/atlas/area_selector
高德开放平台，JS API 2.0示例
高德开放平台，矢量图形，使用GeoJSON根据标注GeoJSON配置在地图上对应覆盖物：https://lbs.amap.com/demo/javascript-api-v2/example/overlayers/geojson
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<style>
html,body,#container {
width: 100%;
height: 100%;
}
</style>
<title>GeoJSON</title>
<link rel="stylesheet" href="//a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<script src="https://webapi.amap.com/maps?v=2.0&key=a5242f18ca5e3841dbffed0dceae680d&plugin=AMap.GeoJSON"></script>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
//
var map = new AMap.Map('container', {
center: [112.422014, 35.482177],
zoom: 11,
// mapStyle: 'amap://styles/grey', // 地图风格
pitch: 45, // 倾斜角度
// viewMode: '3D', // 3D模式
terrain: true, // 启用地形图
});
// 请求geojson数据
ajax('./140522.geojson', function (err, geoJSON) {
if (!err) {
const polygonObject = function (geojson, lnglats) {
// console.log("lnglats=", lnglats);
// 计算面积
var area = AMap.GeometryUtil.ringArea(lnglats[0])
const polygon = new AMap.Polygon({
path: lnglats,
bubble: true,
cursor: 'pointer',
fillOpacity: 1 - Math.sqrt(area / 8000000000),// 面积越大透明度越高
strokeColor: 'white',
strokeOpacity: 0.3, // 边框透明度为0.3
strokeWeight: 2, // 边框宽度为2
fillColor: 'red',
fillOpacity: 0.6, // 填充透明度为0.6
});
polygon.on('mouseover', (arg1) => {
// console.log('mouseover', arg1);
polygon.setOptions({
strokeColor: '#0092bc',
strokeOpacity: 1,
strokeWeight: 3,
fillColor: '#00427d',
fillOpacity: 0.6
});
});
polygon.on('mouseout', (arg1) => {
// console.log('mouseover', arg1);
polygon.setOptions({
strokeColor: 'white',
strokeOpacity: 0.3, // 边框透明度为0.3
strokeWeight: 2, // 边框宽度为2
fillColor: 'red',
fillOpacity: 0.6, // 填充透明度为0.6
})
});
return polygon;
}
var geojson = new AMap.GeoJSON({
geoJSON: geoJSON,
getPolygon: polygonObject
});
map.add(geojson);
// 标记
let townArray = new Array();
townArray.push({name:'东城街道',longitude:112.476602,latitude:35.50929});
townArray.push({name:'凤城镇',longitude:112.408624,latitude:35.486929});
townArray.push({name:'北留镇',longitude:112.576166,latitude:35.467638});
townArray.push({name:'润城镇',longitude:112.525923,latitude:35.492515});
townArray.push({name:'润城镇',longitude:112.032343,latitude:35.369433});
townArray.push({name:'町店镇',longitude:112.428537,latitude:35.582758});
townArray.push({name:'芹池镇',longitude:112.334588,latitude:35.604219});
townArray.push({name:'次营镇',longitude:112.246463,latitude:35.497174});
townArray.push({name:'横河镇',longitude:112.160059,latitude:35.348433});
townArray.push({name:'河北镇',longitude:112.344766,latitude:35.386508});
townArray.push({name:'蟒河镇',longitude:112.420984,latitude:35.368033});
townArray.push({name:'东冶镇',longitude:112.516707,latitude:35.33717});
townArray.push({name:'白桑镇',longitude:112.470781,latitude:35.431075});
townArray.push({name:'寺头乡',longitude:112.379785,latitude:35.637186});
townArray.push({name:'西河乡',longitude:112.368112,latitude:35.547569});
townArray.push({name:'演礼镇',longitude:112.33584,latitude:35.507334});
townArray.push({name:'董封乡',longitude:112.182718,latitude:35.463724});
townArray.push({name:'固隆乡',longitude:112.267175,latitude:35.536115});
townArray.push({name:'驾岭乡',longitude:112.252069,latitude:35.415333});
townArray.push({name:'林场管理处',longitude:112.095514,latitude:35.448902});
for(let town of townArray){
console.log("town =",town);
var marker = new AMap.Marker({
icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
position: [town.longitude, town.latitude],
offset: new AMap.Pixel(-13, -30)
});
// label默认蓝框白底左上角显示，样式className为：amap-marker-label
marker.setLabel({
direction:'bottom-center',
offset: new AMap.Pixel(3, 0), //设置文本标注偏移量
content: town.name, //设置文本标注内容
});
marker.setMap(map);
}
//为地图注册click事件获取鼠标点击出的经纬度坐标
var clickEventListener = map.on('click', function(e) {
console.log("", e.lnglat.getLng(),e.lnglat.getLat());
});
log.success('GeoJSON 数据加载完成.')
} else {
log.error('GeoJSON 服务请求失败.')
}
});
</script>
</body>
</html>