作者：非法小恋

背景

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/ 如发现有错，请留言，谢谢）

附上完整代码：

  1. 可将以下代码保存成一个html文件，放在iClient\forJavaScript\examples\leaflet目录中，然后运行。
  2. 复制在在线编辑器中运行，例如：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坐标转换问题的更多相关文章

  1. Leaflet客户端学习笔记

    Leaflet介绍 Leaflet 是一个为建设交互性好适用于移动设备地图,而开发的现代的.开源的 JavaScript 库.代码仅有 33 KB,但它具有开发在线地图的大部分功能.支持插件扩展, L ...

  2. 转载---SuperMap GIS 9D SP1学习视频播单

    转自:http://blog.csdn.net/supermapsupport/article/details/79219102 SuperMap GIS 9D SP1学习视频播单 我们一直在思考什么 ...

  3. SuperMap iClient for JavaScript image出图

    SuperMap iClient for JavaScript 客户端基于openlayers 开发. 目前最高版本为811,9D产品后推荐客户使用leaflet.openlayers客户端开发. 问 ...

  4. leaflet常用插件库

    1.常用地图切换加载(osm.google.baidu.gaode.tianditu.etc)https://github.com/htoooth/Leaflet.ChineseTmsProvider ...

  5. Leaflet 调用百度瓦片地图服务

    在使用 leaflet 调用第三方瓦片地图服务的项目,主要谷歌地图.高德地图.百度地图和 OSM 地图,与其他三种地图对比,百度地图的瓦片组织方式是不同的.百度从中心点经纬度(0,0)度开始计算瓦片, ...

  6. 入门Leaflet之小Demo

    入门Leaflet之小Demo 写在前面 ---- WebGIS开发基础之Leaflet GIS基本概念:GIS.Map.Layer.Feature.Geometry.Symbol.Data(Poin ...

  7. leaflet中如何优雅的解决百度、高德地图的偏移问题

    话不多说,先上效果图 以前在做项目时,经常会听到客户说,你们这个地图是哪来的,太丑了,能不能换成百度地图--高德也行-- 大家生活中,基本上都已经习惯了使用百度地图和高德地图,而在做项目时,用这两个地 ...

  8. 如何实现通过Leaflet加载dwg格式的CAD图

    前言 ​ 在前面介绍了通过openlayers加载dwg格式的CAD图并与互联网地图叠加,openlayers功能很全面,但同时也很庞大,入门比较难,适合于大中型项目中.而在中小型项目中,一般用开源的 ...

  9. 聊聊Unity项目管理的那些事：Git-flow和Unity

    0x00 前言 目前所在的团队实行敏捷开发已经有了一段时间了.敏捷开发中重要的一个话题便是如何对项目进行恰当的版本管理.项目从最初使用svn到之后的Git One Track策略再到现在的GitFlo ...

随机推荐

  1. [转]java中Collections.sort排序详解

      Comparator是个接口,可重写compare()及equals()这两个方法,用于比价功能:如果是null的话,就是使用元素的默认顺序,如a,b,c,d,e,f,g,就是a,b,c,d,e, ...

  2. 【原创】LogCat信息演示Activity生命周期

    界面如下:注意:这是在手机.竖屏状态下! (一)1个Activity     /**     * 7个方法     * 测试1个Activity的生命周期     *      * LogCat:   ...

  3. C# 时间戳与当前时间互相转换

    时间戳: Unix时间戳(Unix timestamp),或称Unix时间(Unix time).POSIX时间(POSIX time),是一种时间表示方式,定义为从格林威治时间1970年01月01日 ...

  4. OpenVPN Server端配置文件详细说明（转）

    本文将介绍如何配置OpenVPN服务器端的配置文件.在Windows系统中,该配置文件一般叫做server.ovpn:在Linux/BSD系统中,该配置文件一般叫做server.conf.虽然配置文件 ...

  5. springmvc 配置和spring配置？

    最近在接触mybatis,之间使用springmvc时,配置文件一直是,web.xml+XX-servlet.xml 的配置(xx为web.xml中servlet name名称).为了整合mybati ...

  6. 2013年，移动App设计的13大精髓

    摘要:在 过去的一年里,移动成主流也让众多的移动应用如雨后春笋般层出不穷,在众多开发者从中获利的同时竞争也愈演愈烈,如何才能保证自己立于不败之地?用户是上 帝,一切还得从应用说起.本文总结了新一年里A ...

  7. OpenCV和Matlab 通过XML传递数据

    因为现在下到的数据集大部分都使用了Matlab的Calibration toolbox 进行标定,其结构大部分是.mat结构的,所以它和opencv中数据传递需要一个中间过程,网上也有直接调用matl ...

  8. python的threading.Thread线程的start、run、join、setDaemon

    Pycharm整体看下Thread类的内容:模拟的是Java的线程模型 表示方法method,上面的锁头表示这个是类内部的方法,从方法名字命名规范可以看出,都是_和__开头的,一个下划线表示是子类可以 ...

  9. 关于FFmpegInterop项目的编译

    如果是从git 上下载的最新版本 FFmpeg,那么打开VS2015编译时会报出一个错误    C4996    'av_free_packet': 被声明为已否决    FFmpegInterop  ...

  10. centos6.x升级glibc-2.17

    glibc glibc是GNU发布的libc库,即c运行库.glibc是linux系统中最底层的api,几乎其它任何运行库都会依赖于glibc:它本身也提供了许多其它一些必要功能服务的实现: libc ...