blog
blog copied to clipboard
Published
20 hours ago •
yongheng2016
yongheng2016
mapbox
this.map.querySourceFeatures("land-circulation-source", {
// sourceLayer: "land-circulation-layer", // 暂时未知
filter: ["==", "name", county], // name: 当前查询到的数据列表中的属性， county: 过滤值
}));
this.map.showTileBoundaries = true;
-
坐标转换 npm
-
关于火星坐标、偏移、加偏和纠偏、无偏的理解
-
经纬度-加偏-纠偏
const earthR = 6378245.0;
const ee = 0.00669342162296594323;
function outOfChina(lon, lat) {
return !(lon >= 72.004 && lon <= 137.8347 && lat > 0.8292 && lat < 55.8272);
}
function transform(x, y) {
let xy = x * y;
let absX = Math.sqrt(Math.abs(x));
let xPi = x * Math.PI,
yPi = y * Math.PI;
let d = 20.0 * Math.sin(6.0 * xPi) + 20.0 * Math.sin(2.0 * xPi);
let lat = d,
lng = d;
lat += 20.0 * Math.sin(yPi) + 40.0 * Math.sin(yPi / 3.0);
lng += 20.0 * Math.sin(xPi) + 40.0 * Math.sin(xPi / 3.0);
lat += 160.0 * Math.sin(yPi / 12.0) + 320 * Math.sin(yPi / 30.0);
lng += 150.0 * Math.sin(xPi / 12.0) + 300.0 * Math.sin(xPi / 30.0);
lat *= 2.0 / 3.0;
lng *= 2.0 / 3.0;
lat += -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * xy + 0.2 * absX;
lng += 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * xy + 0.1 * absX;
return {
lat: lat,
lng: lng
};
}
function delta(lat, lng) {
let d = transform(lng - 105.0, lat - 35.0);
let radLat = lat / 180.0 * Math.PI;
let magic = Math.sin(radLat);
magic = 1 - ee * magic * magic;
let sqrtMagic = Math.sqrt(magic);
d.lat = (d.lat * 180.0) / ((earthR * (1 - ee)) / (magic * sqrtMagic) * Math.PI);
d.lng = (d.lng * 180.0) / (earthR / sqrtMagic * Math.cos(radLat) * Math.PI);
return d;
}
// wgs84 转 google 加偏
function WGS84ToGoogle(wgsLng, wgsLat) {
if (outOfChina(wgsLng, wgsLat)) {
return [wgsLng, wgsLat];
}
let d = delta(wgsLat, wgsLng);
return [wgsLng + d.lng, wgsLat + d.lat];
}
// console.log(WGS84ToGoogle(125.62387363253421, 43.58015999393015));
// google 转 wgs84 纠偏
function GoogleToWGS84(gcjLng, gcjLat) {
if (outOfChina(gcjLng, gcjLat)) {
return [gcjLng, gcjLat];
}
let d = delta(gcjLat, gcjLng);
return [gcjLng - d.lng, gcjLat - d.lat];
}
地图tiles
- 谷歌地图
- 谷歌地图2
- 谷歌地图在线访问地址
- Google 地图切片URL地址解析
- Openlayers之加载谷歌地图
- 关于openlaeyrs获取谷歌卫星地图的无偏瓦片
- 谷歌地图开发者，科学上网？
- 天地图资源
- 谷歌api 离线
mapbox 本地化
谷歌地图资源链接
// 谷歌地图切换规则
// mt(0-3)
//lyrs=
// m：路线图
// t：地形图
// p：带标签的地形图
// s：卫星图
// y：带标签的卫星图
// h：标签层（路名、地名等）
// @189 @842 类似版本号，修改后无任何效果
// 偏移
// http://www.google.cn/maps，
// 还有Google Map API上专门提供给中国的http://maps.google.cn/maps/
// 就是没有偏移的。
// https://www.google.com/maps/ error
// https://maps.googleapis.com/maps/api pendding
// 天地图切换到gagogroup
// "//t0.tianditu.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}" --> "//t0.gagogroup.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}"
{
"name": "谷歌有偏卫星地图",
"type": "Google_Normal_Map",
"url": [
"//mt2.google.cn/maps/vt?lyrs=m@189&gl=cn&hl=zh-CN&x={x}&y={y}&z={z}"
]
},
墨卡托投影动画
https://hujiulong.github.io/what-is-the-mercator-projection/
turf 计算 geojson center bbox
const info = data.map(item => {
var line = turf.lineString(item.geometry.coordinates[0]);
var bbox = turf.bbox(line);
var polygon = turf.polygon(item.geometry.coordinates);
var center = turf.centerOfMass(polygon).geometry.coordinates;
return {...item.properties, center, bbox }
})
