聊聊iClient for Leaflet坐标转换问题
作者:非法小恋
背景
SuperMap iClient for JavaScript 9D产品想必大伙都用了一段时间了,针对新推出的三款客户端产品,Leaflet,OpenLayaers,MapboxGL,各自的特点,之前的文章也都有聊。
Leaflet:http://blog.csdn.net/supermapsupport/article/details/78403044
Openlayers:http://blog.csdn.net/supermapsupport/article/details/78952736
MapboxGL:http://blog.csdn.net/supermapsupport/article/details/78343391
今天我们重点聊聊Leaflet坐标转换问题。前一段时间在开发过程中,发现Leaflet针对非4326坐标系(WGS84),不管是在展示上,还是绘制上都有所不便,今天我们就聊聊如何来做针对非4326坐标系地图与数据进行开发。
(本章节范例所使用的范例数据为iServer产品包中自带China数据,EPSG3857投影)
先看看我们要做什么
先看效果:
用户需求:使用Leaflet开发,拉框查询,将查询结果叠加展示在地图上。
看似简单的需求,如果是在WGS84地图上实现,只需要3步搞定:
- 1.添加绘制控件
- 2.将绘制结果传入几何对象查询
- 3.将查询结果解析,并在地图上展示
但是我们如果在非WGS84地图上开发这个功能,就有些麻烦了,我们需要进行坐标转换操作,
因为Leaflet规定:Mark展示,鼠标绘制操作等内容,都需传入经纬度信息,而非投影信息。
通俗讲:就是绘制出来的对象,不能直接进行查询,需要坐标转换,我们需要以下几个步骤:
- 1.添加绘制控件
- 2.将绘制结果进行坐标转换
- 3.将转换后的图形传入几何对象查询
- 4.将查询结果解析,再次进行坐标转换
- 5.将转换后的坐标,在地图上展示
开发代码
1.首先动态引入我们的Leaflet.draw控件,另在代码中我们只保留rectangle,绘制矩形操作。
<script type="text/javascript" include="leaflet.draw" src="../../dist/include-leaflet.js"></script>
var editableLayers = new L.FeatureGroup();
map.addLayer(editableLayers);
var options = {
position: 'topleft',
draw: {
polyline: false,
polygon: false,
circle: false,
rectangle: {},
circlemarker:false,
marker: false,
remove: false
},
edit: {
featureGroup: editableLayers,
remove: false
}
};
var drawControl = new L.Control.Draw(options);
并添加绘制触发事件方法
handleMapEvent(drawControl._container, map);
map.on(L.Draw.Event.CREATED, function (e) {
var type = e.layerType,
layer = e.layer;
if (type === 'marker') {
layer.bindPopup('A popup!');
}
editableLayers.addLayer(layer);
//这里就能触发绘制完成后返回内容
//....
});
2.将绘制结果进行坐标转换,其中的关键代码L.CRS.EPSG3857.project(point_old);就是将绘制的4326地理坐标转换为3857投影坐标系
//将绘制对象点拆分转换
var polygonPoints = [];
for(var i = 0; i < e.layer._latlngs[0].length; i++){
var point_old = L.latLng(e.layer._latlngs[0][i].lat,e.layer._latlngs[0][i].lng);
var point_new = L.CRS.EPSG3857.project(point_old);
var point = [point_new.y, point_new.x];
//var point = L.point(point_new.x, point_new.y);
console.log(point);
polygonPoints.push(point);
}
var polygon = L.polygon([polygonPoints]);
3.将转换后的图形传入几何对象查询
//查询
var param = new SuperMap.QueryByGeometryParameters({
queryParams: {name: "China_ProCenCity_pt@China"},
geometry: polygon
});
L.supermap
.queryService(url)
.queryByGeometry(param, function (serviceResult) {
//查询后的返回结果
});
4..将查询结果解析,再次进行坐标转换,转换成Leaflet需要的,并展示在地图上
L.supermap
.queryService(url)
.queryByGeometry(param, function (serviceResult) {
var result = serviceResult.result;
resultLayer = L.featureGroup().addTo(map);
for(var i = 0; i <result.recordsets[0].features.features.length;i++){
var p = result.recordsets[0].features.features[i];
var latlng = L.point(p.geometry.coordinates[0],p.geometry.coordinates[1]);
//坐标转换
var marker1 = L.marker(L.CRS.EPSG3857.unproject(latlng))
resultLayer.addLayer(marker1);
}
});
最终完成该功能
(转发请注明出处:http://www.cnblogs.com/zhangyongli2011/ 如发现有错,请留言,谢谢)
附上完整代码:
- 可将以下代码保存成一个html文件,放在iClient\forJavaScript\examples\leaflet目录中,然后运行。
- 复制在在线编辑器中运行,例如:http://iclient.supermapol.com/examples/leaflet/editor.html#01_tiledMapLayer4326
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title data-i18n="resources.title_drawFeatures"></title>
<script type="text/javascript" src="../js/include-web.js"></script>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="map" style="width: 100%;height:100%"></div>
<script type="text/javascript" include="leaflet.draw" src="../../dist/include-leaflet.js"></script>
<script type="text/javascript">
var host = window.isLocal ? window.server : "http://support.supermap.com.cn:8090";
var map, url = host + "/iserver/services/map-china400/rest/maps/China";
map = L.map('map', {
center: [33, 114],
zoom: 4
});
L.supermap.tiledMapLayer(url).addTo(map);
var editableLayers = new L.FeatureGroup();
map.addLayer(editableLayers);
var options = {
position: 'topleft',
draw: {
polyline: false,
polygon: false,
circle: false,
rectangle: {},
circlemarker:false,
marker: false,
remove: false
},
edit: {
featureGroup: editableLayers,
remove: false
}
};
var drawControl = new L.Control.Draw(options);
map.addControl(drawControl);
handleMapEvent(drawControl._container, map);
map.on(L.Draw.Event.CREATED, function (e) {
var type = e.layerType,
layer = e.layer;
if (type === 'marker') {
layer.bindPopup('A popup!');
}
editableLayers.addLayer(layer);
//将绘制对象点拆分转换
var polygonPoints = [];
for(var i = 0; i < e.layer._latlngs[0].length; i++){
var point_old = L.latLng(e.layer._latlngs[0][i].lat,e.layer._latlngs[0][i].lng);
var point_new = L.CRS.EPSG3857.project(point_old);
var point = [point_new.y, point_new.x];
//var point = L.point(point_new.x, point_new.y);
console.log(point);
polygonPoints.push(point);
}
var polygon = L.polygon([polygonPoints]);
//查询
var param = new SuperMap.QueryByGeometryParameters({
queryParams: {name: "China_ProCenCity_pt@China"},
geometry: polygon
});
L.supermap
.queryService(url)
.queryByGeometry(param, function (serviceResult) {
var result = serviceResult.result;
resultLayer = L.featureGroup().addTo(map);
for(var i = 0; i <result.recordsets[0].features.features.length;i++){
var p = result.recordsets[0].features.features[i];
var latlng = L.point(p.geometry.coordinates[0],p.geometry.coordinates[1]);
//坐标转换
var marker1 = L.marker(L.CRS.EPSG3857.unproject(latlng))
resultLayer.addLayer(marker1);
}
});
});
function handleMapEvent(div, map) {
if (!div || !map) {
return;
}
div.addEventListener('mouseover', function () {
map.scrollWheelZoom.disable();
map.doubleClickZoom.disable();
});
div.addEventListener('mouseout', function () {
map.scrollWheelZoom.enable();
map.doubleClickZoom.enable();
});
}
</script>
</body>
</html>
聊聊iClient for Leaflet坐标转换问题的更多相关文章
- Leaflet客户端学习笔记
Leaflet介绍 Leaflet 是一个为建设交互性好适用于移动设备地图,而开发的现代的.开源的 JavaScript 库.代码仅有 33 KB,但它具有开发在线地图的大部分功能.支持插件扩展, L ...
- 转载---SuperMap GIS 9D SP1学习视频播单
转自:http://blog.csdn.net/supermapsupport/article/details/79219102 SuperMap GIS 9D SP1学习视频播单 我们一直在思考什么 ...
- SuperMap iClient for JavaScript image出图
SuperMap iClient for JavaScript 客户端基于openlayers 开发. 目前最高版本为811,9D产品后推荐客户使用leaflet.openlayers客户端开发. 问 ...
- leaflet常用插件库
1.常用地图切换加载(osm.google.baidu.gaode.tianditu.etc)https://github.com/htoooth/Leaflet.ChineseTmsProvider ...
- Leaflet 调用百度瓦片地图服务
在使用 leaflet 调用第三方瓦片地图服务的项目,主要谷歌地图.高德地图.百度地图和 OSM 地图,与其他三种地图对比,百度地图的瓦片组织方式是不同的.百度从中心点经纬度(0,0)度开始计算瓦片, ...
- 入门Leaflet之小Demo
入门Leaflet之小Demo 写在前面 ---- WebGIS开发基础之Leaflet GIS基本概念:GIS.Map.Layer.Feature.Geometry.Symbol.Data(Poin ...
- leaflet中如何优雅的解决百度、高德地图的偏移问题
话不多说,先上效果图 以前在做项目时,经常会听到客户说,你们这个地图是哪来的,太丑了,能不能换成百度地图--高德也行-- 大家生活中,基本上都已经习惯了使用百度地图和高德地图,而在做项目时,用这两个地 ...
- 如何实现通过Leaflet加载dwg格式的CAD图
前言 在前面介绍了通过openlayers加载dwg格式的CAD图并与互联网地图叠加,openlayers功能很全面,但同时也很庞大,入门比较难,适合于大中型项目中.而在中小型项目中,一般用开源的 ...
- 聊聊Unity项目管理的那些事:Git-flow和Unity
0x00 前言 目前所在的团队实行敏捷开发已经有了一段时间了.敏捷开发中重要的一个话题便是如何对项目进行恰当的版本管理.项目从最初使用svn到之后的Git One Track策略再到现在的GitFlo ...
随机推荐
- scp使用笔记
yum install openssh-clients 就能使用了 上传 microgolds-prodeMacBook-Pro:Desktop mg$ sudo scp /Users/mg/Desk ...
- SPOJ 7001. Visible Lattice Points (莫比乌斯反演)
7001. Visible Lattice Points Problem code: VLATTICE Consider a N*N*N lattice. One corner is at (0,0, ...
- DOM节点中属性nodeName、nodeType和nodeValue的区别 < Delphi >
http://msdn.microsoft.com/zh-cn/library/vstudio/hf9hbf87.aspx <?xml version="1.0"?> ...
- ELM320 OBD(PWM) to RS232 Interpreter
http://elmelectronics.com/DSheets/ELM320DS.pdf
- 安装VS组件提示“所选驱动不再有效。继续安装之前,请先检查安装路径的设置。”要怎么办?
电脑里面原来装了VS2010,包括的组件有VB和C++,现在想添加C#,结果安装的时候就提示“所选驱动不再有效.继续安装之前,请先检查安装路径的设置”,安装路径在C盘,还有40个G,不知道该怎么办? ...
- 关于fmri数据分析的两大类,四种方法
关于fmri数据分析的两大类,四种方法: 数据驱动: tca:其实这种方法,主要是提取时间维的特征.如果用它来进行数据的分析,则必须要利用其他的数据方法,比如结合ICA. ica:作为pca的一般化实 ...
- Valgrind 内存泄漏工具
Valgrind 是一款 Linux下(支持 x86.x86_64和ppc32)程序的内存调试工具,它可以对编译后的二进制程序进行内存使用监测(C语言中的malloc和free,以及C++中的new和 ...
- OpenShift和F5的集成手册
OpenShift和F5的集成步骤,记录如下,如实际操作中有变更会再度编辑修改. 1.整体架构 使用BIG-IP作为Openshift的Router,能实现以下功能: 为Services创建BIG-I ...
- split-array-largest-sum(参考了discuss)
注意,第一种用法,涉及到一些Java的知识.就是采用Object作为HashMap的key的时候,需要重载这个Class的 equals 和 hashCode 这两个方法.其中equals需要判断一下 ...
- kubernetes基础概念
kubernetes是基于容器技术的分布式架构领先方案.具有完备的集群管理能力,包括多层次的安全防护和准入机制.多租户应用支撑能力.透明的服务注册和服务发现机制.内建智能负载均衡器.强大的故障发现和自 ...