地图经纬度渲染插件和例子
程序员文章站
2022-07-13 21:17:59
...
这个例子我是为了画地图覆盖物来生成经纬度（地图残缺部分就是未生成经纬度的js）
废话不多说，直接上代码
html页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>map</title>
<script type="text/javascript" src="./allCity.js"></script>
<script type="text/javascript" src=".\node_modules\file-saver\dist\FileSaver.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
<!-- <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.1&services=true"></script> -->
<!-- <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的**"></script> -->
<script type="text/javascript" src="http://api.map.baidu.com/api?key=46ce9d0614bf7aefe0ba562f8cf87194&v=1.1&services=true"></script>
<!-- <style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#map{height:100%}
</style> -->
</head>
<body>
<div>
<button onClick="fetchMapData()">点击</button>
</div>
<div id="map"></div>
</body>
<script>
var cityname = ''
var totalCoordinates = {
city:{},
area:{}
}
async function fetchMapData() {
// 渲染轮廓
const _self = this;
if (citysData && Array.isArray(citysData)) {
const citys = citysData[0].child;
citys.forEach((city, cIndex) => {
var cityname = city.areaname;
getCoordinates(cityname);
var areas = [];
areas = city.child;
areas.forEach(area => {
var areaname = area.areaname;
getCoordinates(`${cityname}${areaname}`, 0);
});
});
setTimeout(() => {
var blob = new Blob([JSON.stringify(this.totalCoordinates)], {
type: 'application/json;charset=utf-8'
});
console.log(totalCoordinates)
saveAs(blob, 'gd_coordinates.js');
}, 10 * 1000);
}
};
function getCoordinates(cityname, type = 1) {
const _self = this;
var bdary = new BMap.Boundary();
bdary.get(cityname, function(rs) {
// 获取行政区域
var coordinates = [];
var sum = [0,0]
var pointCount = 0
for (var i = 0; i < rs.boundaries.length; i++) {
var boundaries = rs.boundaries[i].split(';');
var polygon = [];
for (var j = 0; j < boundaries.length; j++) {
var item = boundaries[j].split(',');
polygon.push(item);
sum[0] += parseFloat(item[0])
sum[1] += parseFloat(item[1])
pointCount++
}
coordinates.push(polygon);
}
var cp = [sum[0]/pointCount,sum[1]/pointCount];
var ctjson = {
cp: cp,
coordinates: coordinates
};
if (type === 1) {
// 城市
totalCoordinates['city'][cityname] = ctjson;
} else {
// 区域
totalCoordinates['area'][cityname] = ctjson;
}
});
};
</script>
</html>ps：1.FileSaver.js需要安装依赖：npm install file-saver --save
2.allCity.js的格式是
3.生成的代码样式
上一篇： 纯css画出大白
下一篇： String类概述及其构造方法