作者：张永利

背景

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);}
});

最终完成该功能

附上完整代码：

可将以下代码保存成一个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坐标转换问题相关推荐

SuperMap iClient for Leaflet对EPSG:4509图加载滑动查询
作者:John SuperMap iClient for Leaflet对EPSG:4509地图加载&滑动查询在WebGIS开发使用中,我们会遇到地图显示不了,以及查询到数据显示不出的问题, ...
SuperMap iClient for Leaflet入门学习
Leaflet是一个开源的地图Javascript库: SuperMap iClient for Leaflet 在线示例: https://iclient.supermap.io/examples/ ...
SuperMap iClient for Leaflet实现拖动半径进行距离查询
作者:lly 我们今天来聊一聊怎样通过iClient for Leaflet实现鼠标拖动进行距离查询.先来看一看是什么效果: 说明本文使用的数据为iserver自带的范例数据长春市区图:查询的圆点是 ...
SuperMap iClient for Leaflet实现WFS查询功能
SuperMap iClient for classic已经实现对接WFS服务,可以对WFS进行查询并展示出查询的结果,但是官网范例中,目前没有关于Leaflet客户端的示例,在此文章中将简单介绍iC ...
Vite+Vue+iClient for Leaflet引入并实现MapV/Eharts第三方可视化库示例
作者:gaogy 文章目录背景一.使用Vite构建Vue3+JavaScript项目二.搭建iClient for Leaflet开发环境三.第三方可视化库Echarts的使用四.第三方可视 ...
LeafletJS 简单使用1 - 地图标点 L.marker()、清除标点 layerGroup.clearLayers() 【SuperMap iClient for Leaflet】超图的使用
目录一.业务需求二.参考文档三.实现思路四.参考代码 4.1 安装依赖 4.2 生成一张地图 4.3 标点_自定义标点图标 4.4 清除标点五.用到的 API 六.整体代码 + 页面展示七 ...
iClient for Leaflet加载MVT矢量瓦片并注册鼠标事件
作者:刘大使用背景需要在前端动态更改地图样式,并高效进行鼠标交互获取要素的业务场景时,我们会采取MVT矢量瓦片来解决此类问题,但是web应用开发已经选用Leaflet地图框架的情况下怎么办呢,这时 ...
iClient for Leaflet解决地图放大问题
作者:yx 文章目录前言一.修改参数二.自定义resolution 前言客户在iServer发布rest地图服务之后,预览能够正常放大,但当leaflet前端对接的时候,发现最大只能放大到某一 ...
iClient for Leaflet通过点击实现切换地图中心点定位
作者:Carlo 前景:在操纵地图时除了鼠标.触摸交互移动地图,通过map.panBy和map.panTo也可以移动地图. map.panTo(平移至中心点):将地图平移到给定的中心.如果新的中心点在 ...

聊聊iClient for Leaflet坐标转换问题

背景

聊聊iClient for Leaflet坐标转换问题相关推荐

最新文章

热门文章