leaflet 中 geojson的坐标xy与polyline,polygon,rectangle,circle等元素的坐标xy颠倒的情况总结
时间:2022-06-17
本文章向大家介绍leaflet 中 geojson的坐标xy与polyline,polygon,rectangle,circle等元素的坐标xy颠倒的情况总结,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
在leaflet绘制地图要素时,在CRS.Simple坐标系中,存在(x,y)坐标顺序颠倒为(y,x)的情况:
geojson 数据格式:
{
"type": "FeatureCollection",
"name": "pm1-1",
"crs": {
"type": "name",
"properties": {
"name": "urn:ogc:def:crs:OGC:1.3:CRS84"
}
},
"features": [{
"type": "Feature",
"properties": {
"id": 22,
"featureName": "主",
"stroke": false,
"opacity": 0.5,
"fillOpacity": 1.0,
"color": "#333",
"strokeWidth": 0.01,
"fillColor": "grey"
},
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[2902.459300397822062, 268.340840104235099],
[2902.459300397822062, 260.817506376886911],
[2909.91029437779207, 260.889846124265262],
[3341.484706002808252, 273.343585758868812],
[3426.478257629610198, 273.313067427943679],
[3456.498122483073075, 263.323400438414296],
[3462.205050366093474, 263.3132276614391],
[3462.205050366093474, 278.979304203063634],
[3453.578535491225011, 280.200037440073345],
[3430.201494002489198, 295.845768427747657],
[3422.765194033705029, 295.835595650772575],
[3235.291087159939707, 370.788616403168248],
[3195.668463246498504, 370.69822159760605],
[3090.023831955786136, 328.35796364010605],
[3082.394249224475516, 328.296926978255556],
[2902.459300397822062, 268.340840104235099]
]
]
]
}
},{
"type": "Feature",
"properties": {
"id": 121,
"featureName": "体",
"stroke": false,
"opacity": 0.7,
"fillOpacity": 1,
"color": "#eee",
"strokeWidth": 0.01,
"fillColor": "#444"
},
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[3260.330537207918951, 360.791775726079209],
[3301.437284319264563, 360.831801770004461],
[3321.49033232587044, 368.816997533114034],
[3325.422891141537093, 368.837010555076404],
[3422.777487292863952, 295.832008062963894],
[3260.330537207918951, 360.791775726079209]
]
]
]
}
}
]
}
这里面的每一个点的坐标与下面的:
1. polygon:
// create a red polygon from an array of LatLng points
var latlngs = [[37, -109.05],[41, -109.03],[41, -102.05],[37, -102.04]];
var polygon = L.polygon(latlngs, {color: 'red'}).addTo(map);
// zoom the map to the polygon
map.fitBounds(polygon.getBounds());
2. polyline:
var latlngs = [
[45.51, -122.68],
[37.77, -122.43],
[34.04, -118.2]
];
var polyline = L.polyline(latlngs, {color: 'red'}).addTo(map);
// zoom the map to the polyline
map.fitBounds(polyline.getBounds());
3. rectangle:
// define rectangle geographical bounds
var bounds = [[54.559322, -5.767822], [56.1210604, -3.021240]];
// create an orange rectangle
L.rectangle(bounds, {color: "#ff7800", weight: 1}).addTo(map);
// zoom the map to the rectangle bounds
map.fitBounds(bounds);
坐标x,y颠倒顺序,即[x, y]变成[y, x]。
意味着如果在同一个坐标系中这两种数据都存在,需要考虑颠倒顺序才能正常显示。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 除了会排序,你对ORDER BY的用法可能一无所知!
- 修改xposed特征并刷机
- Python 爬虫进阶必备 | 关于某租房网站数据加密的分析
- CMAKE学习记录(二)
- maven 中的版本依赖冲突问题
- Manual for Ubuntu Installation
- 修改自定义站点监控页面的样式
- 快速建站“新玩具”—glitch.me
- 踩坑记 | Flutter升级影响了NestedScrollView?
- Android | xml和view的那些事
- Android | 资源冲突覆盖的一些思考
- 如何用脚本自动转化,一个protobuf文件到json格式
- 聊聊dubbo-go的forkingCluster
- 还在用 map[string]interface{} 处理 JSON?告诉你一个更高效的方法——jsonvalue
- 聊聊dubbo-go的failsafeCluster