amap & 高德地图

amap & 高德地图

shit amap

高德地图 省份数据 绘制教程

https://lbs.amap.com/api/javascript-api/reference-amap-ui/geo/district-explorer/

https://segmentfault.com/a/1190000012252485

中国地图-省市下钻

https://antv.alipay.com/zh-cn/g2/3.x/demo/map/drill-down.html

高德地图 longitude Range

高德地图计算两坐标之间距离

https://lbs.amap.com/dev/search?s=longitude+Range

https://lbs.amap.com/api/amapauto/guide/auto_search_protocal/

https://lbs.amap.com/api/android-location-sdk/guide/additional-func/amap-calculate-tool

http://zhaoxuhui.top/blog/2017/07/20/获取行政区边界和利用GDAL生成shp文件.html

https://zhuanlan.zhihu.com/p/33765028

---

经纬度比率/宽高比

算法优化

      const longitudeRange = dvData.range('lng');
      const latitudeRange = dvData.range('lat');
      const chartBox = ReactDOM.findDOMNode(regionRef.current);
      // canvas 经纬度_比率 === (水平/垂直) === (宽/高)
      const ratio = (longitudeRange[1] - longitudeRange[0]) / (latitudeRange[1] - latitudeRange[0]);
      // 容器_宽高比 === (宽/高)
      const boxRatio = chartBox.clientWidth / chartBox.clientHeight;
      const clientWidth = chartBox.clientWidth - 60;// 减去右侧 legend 宽度
      const clientHeight = chartBox.clientHeight;
      if (ratio > boxRatio) {
        scaleWidth = clientWidth;
        scaleHeight = clientWidth / ratio;// 高度缩小(小屏幕: 内幕古，吉林，山东，湖北，西藏，青海; 大屏幕: 无)
        paddingLeft = 0;
        paddingTop = (clientHeight - scaleHeight) / 2;
      } else {
        scaleWidth = clientHeight * ratio;// 宽度缩小(大屏幕: 全部; 小屏幕: 除了 if)
        scaleHeight = clientHeight;
        paddingLeft = (clientWidth - scaleWidth) / 2;
        paddingTop = 0;
      }

全国

      const longitudeRange = dvData.range('lng');
      const latitudeRange = dvData.range('lat');
      console.log(`经度 longitudeRange`, longitudeRange);
      console.log(`纬度 latitudeRange`, latitudeRange);
      const chartBox = ReactDOM.findDOMNode(regionRef.current);
      // canvas 经纬度_比率
      const ratio = (longitudeRange[1] - longitudeRange[0]) / (latitudeRange[1] - latitudeRange[0]);
      // 容器_宽高比
      const boxRatio = chartBox.clientWidth / chartBox.clientHeight;
      const clientWidth = chartBox.clientWidth - 60;
      const clientHeight = chartBox.clientHeight;
      if (ratio > boxRatio) {
        scaleWidth = clientWidth;
        scaleHeight = clientWidth / ratio;
        paddingLeft = 0;
        paddingTop = (clientHeight - scaleHeight) / 2;
      } else {
        scaleWidth = clientHeight * ratio;
        scaleHeight = clientHeight;
        paddingLeft = (clientWidth - scaleWidth) / 2;
        paddingTop = 0;
      }

import G2 from '@antv/g2';
import DataSet from '@antv/data-set';

原理分析

1. 各个省份，经纬度比率是固定值，amap 提供的经纬度数组，计算出宽高比；ratio

2. 容器的宽高比，不固定，与屏幕的大小有关；boxRatio

3. ratio > boxRatio , 比较大小；要使省份的宽高适配，容器的宽高; 动态修改 canvas 的宽高值；

4. ratio 大，说明经纬度的分母小，容器高度大；需要缩小容器高度 ，容器宽度不变，同时添加 top 偏移量(高度改变了)；

5. ratio 小，说明经纬度的分子小，容器宽度大；需要缩小容器宽度 ，容器高度不变，同时添加 left 偏移量(宽度改变了)；

refs

---

---

©xgqfrms 2012-2025

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---