地图经纬度渲染插件和例子

最新推荐文章于 2021-07-20 15:10:48 发布

theOtherSky

最新推荐文章于 2021-07-20 15:10:48 发布

阅读量425

点赞数

分类专栏：前端例子

本文链接：https://blog.csdn.net/qq_35181466/article/details/106135093

版权

前端例子专栏收录该内容

21 篇文章 1 订阅

订阅专栏

这个例子我是为了画地图覆盖物来生成经纬度

废话不多说，直接上代码

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.生成的代码样式

新增一个网页获取经纬度代码（更方便）：http://datav.aliyun.com/tools/atlas/#&lat=16.97274101999902&lng=123.837890625&zoom=3

theOtherSky

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
地图经纬度渲染插件和例子

这个例子我是为了画地图覆盖物来生成经纬度（地图残缺部分就是未生成经纬度的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-
复制链接

扫一扫