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';
原理分析
-
各个省份,经纬度比率是固定值,amap 提供的经纬度数组,计算出宽高比;ratio
-
容器的宽高比,不固定,与屏幕的大小有关;boxRatio
-
ratio > boxRatio , 比较大小;要使省份的宽高适配,容器的宽高; 动态修改 canvas 的宽高值;
-
ratio 大,说明经纬度的分母小,容器高度大;需要缩小容器高度 ,容器宽度不变,同时添加 top 偏移量(高度改变了);
-
ratio 小,说明经纬度的分子小,容器宽度大;需要缩小容器宽度 ,容器高度不变,同时添加 left 偏移量(宽度改变了);
refs
©xgqfrms 2012-2020
www.cnblogs.com/xgqfrms 发布文章使用:只允许注册用户才可以访问!
原创文章,版权所有©️xgqfrms, 禁止转载 🈲️,侵权必究⚠️!
本文首发于博客园,作者:xgqfrms,原文链接:https://www.cnblogs.com/xgqfrms/p/11764979.html
未经授权禁止转载,违者必究!