对互连网中常见地图的坐标系切磋,谷歌瓦片地图纠偏

   
对谷歌(Google)瓦片地图实行改正,有三种格局:一是对拼接大图举办订正,然后再次切片;二是直接对瓦片图举办校订。那里笔者用的是第三种艺术,即直接对瓦片地图进行订正。

文章版权由作者李晓晖和网易共有,若转发请于分明处标明出处:。

小说版权由小编李晓晖和新浪共有,若转发请于显著处标明出处:。

  最近,有许多WebGIS开发包,ArcGIS API for
JS、OpenLayers、LeafLetjs等为大家从事WebGIS开发的人卷入了广大强有力的功能。我们很有利的采纳那个库的时候,也让我们忽略了众多原理性的事物。

App.config配置:

1.背景

时下项目中运用百度地图、高德地图、谷歌(谷歌(Google))中国地形图、天地图的须求愈加多,那里本人跟大家齐声对内地图使用的坐标系做一个简易的追究。

1.背景

当下项目中接纳百度地图、高德地图、谷歌中华夏族民共和国地图、天地图的须求进一步多,那里笔者跟大家齐声对内地图使用的坐标系做三个简约的探索。

诸如,笔者事先平素在被二个标题找麻烦,正是什么将一个点正确的显得在浏览器荧屏的科学的岗位,即经纬度坐标和显示器坐标的转移难题。直到作者看看一人大牌的博客(点击学习),里面对WebGIS的规律举行了尖锐的上课。看了她的篇章后直接以为,作者写那篇小说是多余的。然而大神的稿子里面并没有详细讲解原理的代码完毕。个人觉得照旧很有必不可少通过落到实处相应效用的法门精晓其规律,而且落实时只怕境遇了广大的题材,所以依旧写了那篇小说。

美高梅开户网址 1美高梅开户网址 2

2.百度地形图——BD-09

百度地图是在GCJ-02坐标系上,又温馨对坐标加密了3次,它官方文档里说叫BD-09,近年来从GPS坐标转到百度坐标有接口提供,反过来不提供。

本来,近日反转方法在大家实际上项目中早已缓解,精确度能够高达0.5M以内。

2.百度地图——BD-09

百度地图是在GCJ-02坐标系上,又和谐对坐标加密了一遍,它官方文书档案里说叫BD-09,近日从GPS坐标转到百度坐标有接口提供,反过来不提供。

理所当然,最近反转方法在大家其实项目中已经解决,精确度能够达成0.5M之内。

在线地图及参数

<appSettings>
  <add key="inputPath" value="D:\_临时文件\GISMap\1818940751"/>
  <add key="outputPath" value="D:\_临时文件\GISMapOutput\1818940751"/>
  <add key="deltaPixcelX" value="1031"/>
  <add key="deltaPixcelY" value="421"/>
  <add key="fromMapZoom" value="1"/>
  <add key="toMapZoom" value="18"/>
</appSettings>

2.1百度瓦片获取思路

百度地图的影子依然正式的Web横轴墨卡托投影,所以其切图的坐标原点、范围都以足以总计出来的。瓦片大小、基本URAV4L也都能够通过监听百度的U哈弗L获取。须要留意的是,百度地图的瓦片行列号和负载地址在分歧级别上都会迥然差异,其转移规则如下:

瓦片的行列号是每扩展3个级别便会议及展览开一个平整的偏移,其偏移算法如下:

     美高梅开户网址 3                      
                     

2.1百度瓦片获取思路

百度地图的黑影照旧正式的Web横轴墨卡托投影,所以其切图的坐标原点、范围都以足以总括出来的。瓦片大小、基本U陆风X8L也都得以通过监听百度的U翼虎L获取。必要留意的是,百度地图的瓦片行列号和负载地址在不相同级别上都会有所区别,其生成规则如下:

瓦片的行列号是每扩大一个级别便会进行3个规则的撼动,其偏移算法如下:

     美高梅开户网址 4                      
                     

 以Arcgis
online上的瓦片地图为例,服务中有多少个相比较主要的应用到的参数。

View Code

2.2地点坐标系图层与百度底图叠加的探赜索隐

2.2本土坐标系图层与百度底图叠加的探索

  • 对互连网中常见地图的坐标系切磋,谷歌瓦片地图纠偏。Height、Weight:各个瓦片的拉长率和惊人
  • Resolution:每贰个缩放级别下1像素代表的地形图单位(投影坐标)
  • Initial Extent:瓦片地图的界定

对瓦片图实行订正处理的算法代码:

2.2.1 强行对瓦片数据开始展览考订

在风行的arcBruTile0.7中早已匡助对百度地图的丰裕。能够加载了百度瓦片后,通过查找百度地图上与地面地图上的控制点对拓展强行校正。

症结是栅格图像纠正偏差或偏向形变是很难防止的,而且工作量也大,并且很难自动化。

2.2.1 强行对瓦片数据实行改良

在新式的arcBruTile0.7中已经支撑对百度地图的增加。能够加载了百度瓦片后,通过搜索百度地图上与当地地图上的控制点对展开强行改良。

缺点是栅格图像纠正偏差或偏向形变是很难制止的,而且工作量也大,并且很难自动化。

取得地图瓦片

美高梅开户网址 5美高梅开户网址 6

2.2.2 将矢量数据转换为百度坐标系——以明尼阿波利斯90坐标系为例

a.获取WGS84到鹿特丹90坐标系上的7参数。

b.通过创立控制点库(已研究开发),利用工具(已研究开发)将塔林90坐标周详据自动转换为WGS84坐标全面据。

c.再建立WGS84与百度坐标系之间的控制点库(已研究开发),将WGS84数据再更换为百度坐标全面据。

d.叠加后测试。

2.2.2 将矢量数据转换为百度坐标系——以圣何塞90坐标系为例

a.获取WGS84到吉达90坐标系上的7参数。

b.通过树立控制点库(已研究开发),利用工具(已研究开发)将达卡90坐标周到据自动转换为WGS84坐标周到据。

c.再建立WGS84与百度坐标系之间的支配点库(已研究开发),将WGS84数据再转移为百度坐标周详据。

d.叠加后测试。

通过观望arcgis地图的瓦片组织章程,

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Configuration;
using System.Data;
using System.Drawing;
using System.IO;
using System.Linq;
using System.Text;
using System.Text.RegularExpressions;
using System.Threading;
using System.Threading.Tasks;
using System.Windows.Forms;
using Utils;

namespace TileProcess
{
    public partial class Form1 : Form
    {
        private int _count = 0;
        private int _deltaPixcelX;
        private int _deltaPixcelY;
        private string _inputPath;
        private string _outputPath;
        private int _fromMapZoom;
        private int _toMapZoom;

        private DateTime _startTime;
        private int _lastCount;

        public Form1()
        {
            InitializeComponent();

            _deltaPixcelX = Convert.ToInt32(ConfigurationManager.AppSettings["deltaPixcelX"]);
            _deltaPixcelY = Convert.ToInt32(ConfigurationManager.AppSettings["deltaPixcelY"]);
            _inputPath = ConfigurationManager.AppSettings["inputPath"];
            _outputPath = ConfigurationManager.AppSettings["outputPath"];
            _fromMapZoom = Convert.ToInt32(ConfigurationManager.AppSettings["fromMapZoom"]);
            _toMapZoom = Convert.ToInt32(ConfigurationManager.AppSettings["toMapZoom"]);
        }

        private void btnTileProcess_Click(object sender, EventArgs e)
        {
            this.btnTileProcess.Enabled = false;

            Task.Factory.StartNew(() =>
            {
                LogUtil.Log("开始处理");
                Process();
            });

            Thread thread = new Thread(new ThreadStart(() =>
            {
                int sleepInterval = 1000;
                while (true)
                {
                    Thread.Sleep(sleepInterval);
                    this.BeginInvoke(new Action(() =>
                    {
                        double totalSeconds = DateTime.Now.Subtract(_startTime).TotalSeconds;
                        int avg = (int)(_count / totalSeconds);
                        lblMsg.Text = string.Format("已处理 {0} 张瓦片图", _count);
                        if (_count - _lastCount > 0)
                        {
                            lblSpeed.Text = string.Format("当前速度:{0} 张/每秒,平均速度:{1} 张/每秒", (_count - _lastCount) * 1000.0 / sleepInterval, avg);
                        }
                        _lastCount = _count;
                    }));
                }
            }));
            thread.IsBackground = true;
            thread.Start();
        }

        /// <summary>
        /// 瓦片纠偏处理
        /// </summary>
        private void Process()
        {
            _startTime = DateTime.Now;
            Regex regex = new Regex(@"\\(\d+)\\(\d+).png", RegexOptions.IgnoreCase);
            for (int i = _fromMapZoom; i <= _toMapZoom; i++)
            {
                int deltaPixcelX = (int)Math.Round(_deltaPixcelX / Math.Round(Math.Pow(2, 18 - i)));
                int deltaPixcelY = (int)Math.Round(_deltaPixcelY / Math.Round(Math.Pow(2, 18 - i)));

                string[] fileArr = Directory.GetFiles(_inputPath + "\\" + i, "*.*", SearchOption.AllDirectories);
                foreach (string file in fileArr)
                {
                    ThreadData data = new ThreadData();
                    data.File = file;
                    data.I = i;
                    data.DeltaPixcelX = deltaPixcelX;
                    data.DeltaPixcelY = deltaPixcelY;

                    ThreadUtil.Run((obj) =>
                    {
                        ThreadData d = obj as ThreadData;

                        Match match = regex.Match(d.File);
                        if (match.Success)
                        {
                            int x = Convert.ToInt32(match.Groups[1].Value);
                            int y = Convert.ToInt32(match.Groups[2].Value);

                            string pathTarget = string.Format(string.Format(@"{0}\{1}\{2}\{3}.png", _outputPath, d.I, x, y));
                            if (!File.Exists(pathTarget))
                            {
                                if (!Directory.Exists(Path.GetDirectoryName(pathTarget)))
                                {
                                    Directory.CreateDirectory(Path.GetDirectoryName(pathTarget));
                                }
                                Bitmap bmpNew = new Bitmap(256, 256, System.Drawing.Imaging.PixelFormat.Format32bppArgb);
                                Graphics graph = Graphics.FromImage(bmpNew);

                                int deltaX = data.DeltaPixcelX / 256;
                                int deltaY = data.DeltaPixcelY / 256;

                                //临时变量定义
                                string pathSource = null;
                                FileStream fs = null;
                                byte[] bArr = null;
                                MemoryStream ms = null;
                                Bitmap bmpSource = null;

                                //起始
                                pathSource = string.Format(@"{0}\{1}\{2}\{3}.png", _inputPath, d.I, x + deltaX, y + deltaY);
                                if (File.Exists(pathSource))
                                {
                                    fs = new FileStream(pathSource, FileMode.Open, FileAccess.Read);
                                    bArr = new byte[fs.Length];
                                    int readCount = fs.Read(bArr, 0, bArr.Length);
                                    ms = new MemoryStream(bArr, 0, readCount);
                                    bmpSource = new Bitmap(ms);
                                    graph.DrawImage(bmpSource, 0, 0, new RectangleF(data.DeltaPixcelX % 256, data.DeltaPixcelY % 256, 256 - data.DeltaPixcelX % 256, 256 - data.DeltaPixcelY % 256), GraphicsUnit.Pixel);
                                    graph.Flush();

                                    fs.Close();
                                    fs = null;
                                    ms.Close();
                                    ms = null;
                                    bmpSource.Dispose();
                                    bmpSource = null;
                                }

                                //右
                                pathSource = string.Format(@"{0}\{1}\{2}\{3}.png", _inputPath, d.I, x + deltaX + 1, y + deltaY);
                                if (File.Exists(pathSource))
                                {
                                    fs = new FileStream(pathSource, FileMode.Open, FileAccess.Read);
                                    bArr = new byte[fs.Length];
                                    int readCount = fs.Read(bArr, 0, bArr.Length);
                                    ms = new MemoryStream(bArr, 0, readCount);
                                    bmpSource = new Bitmap(ms);
                                    graph.DrawImage(bmpSource, 256 - data.DeltaPixcelX % 256, 0, new RectangleF(0, data.DeltaPixcelY % 256, data.DeltaPixcelX % 256, 256 - data.DeltaPixcelY % 256), GraphicsUnit.Pixel);
                                    graph.Flush();

                                    fs.Close();
                                    fs = null;
                                    ms.Close();
                                    ms = null;
                                    bmpSource.Dispose();
                                    bmpSource = null;
                                }

                                //下
                                pathSource = string.Format(@"{0}\{1}\{2}\{3}.png", _inputPath, d.I, x + deltaX, y + deltaY + 1);
                                if (File.Exists(pathSource))
                                {
                                    fs = new FileStream(pathSource, FileMode.Open, FileAccess.Read);
                                    bArr = new byte[fs.Length];
                                    int readCount = fs.Read(bArr, 0, bArr.Length);
                                    ms = new MemoryStream(bArr, 0, readCount);
                                    bmpSource = new Bitmap(ms);
                                    graph.DrawImage(bmpSource, 0, 256 - data.DeltaPixcelY % 256, new RectangleF(data.DeltaPixcelX % 256, 0, 256 - data.DeltaPixcelX % 256, data.DeltaPixcelY % 256), GraphicsUnit.Pixel);
                                    graph.Flush();

                                    fs.Close();
                                    fs = null;
                                    ms.Close();
                                    ms = null;
                                    bmpSource.Dispose();
                                    bmpSource = null;
                                }

                                //右下
                                pathSource = string.Format(@"{0}\{1}\{2}\{3}.png", _inputPath, d.I, x + deltaX + 1, y + deltaY + 1);
                                if (File.Exists(pathSource))
                                {
                                    fs = new FileStream(pathSource, FileMode.Open, FileAccess.Read);
                                    bArr = new byte[fs.Length];
                                    int readCount = fs.Read(bArr, 0, bArr.Length);
                                    ms = new MemoryStream(bArr, 0, readCount);
                                    bmpSource = new Bitmap(ms);
                                    graph.DrawImage(bmpSource, 256 - data.DeltaPixcelX % 256, 256 - data.DeltaPixcelY % 256, new RectangleF(0, 0, data.DeltaPixcelX % 256, data.DeltaPixcelY % 256), GraphicsUnit.Pixel);
                                    graph.Flush();

                                    fs.Close();
                                    fs = null;
                                    ms.Close();
                                    ms = null;
                                    bmpSource.Dispose();
                                    bmpSource = null;
                                }

                                bmpNew.Save(pathTarget);
                                //bmpNew.Save("d:\\_临时文件\\1234.png"); //测试用

                                bmpNew.Dispose();
                                bmpNew = null;
                                graph.Dispose();
                                graph = null;

                                _count++;
                            } //end if (!File.Exists(pathTarget))
                        } //end if (match.Success)
                    }, data, (ex) =>
                    {
                        this.BeginInvoke(new Action(() =>
                        {
                            lblErrorMsg.Text = "出错:" + ex.Message + "\r\n" + ex.StackTrace;
                            LogUtil.LogError(ex, "出错");
                        }));
                    }); //end ThreadUtil.Run
                } //end foreach (string file in fileArr)
            } //end for (int i = _fromMapZoom; i <= _toMapZoom; i++)
        }
    }
}

2.2.3结出显示

                                            美高梅开户网址 7

美高梅开户网址 8

 

2.2.3结实显示

                                            美高梅开户网址 9

美高梅开户网址 10

 

http://cache1.arcgisonline.cn/ArcGIS/rest/services/ChinaOnlineCommunityOnlyENG/MapServer/tile/缩放等级/行号/列号

View Code

3.高德地图和谷歌(谷歌(Google))中中原人民共和国地图——GCJ-02

3.高德地图和谷歌(谷歌)中中原人民共和国地图——GCJ-02

通过python程序将自然缩放等级的瓦片保存到地面
笔者只抓取了0-5级别的瓦片,并依照arcgis瓦片的保存方法存款和储蓄。

处理作用:笔者要好电脑每秒处理差不离350张瓦片图,1到18级瓦片共100多万张图片,差不离要求处理四十六秒钟。

3.1地图坐标系的追究

高德地图和谷歌(Google)地图均是应用的GCJ-02坐标系,以下为测试例子:

 美高梅开户网址 11

具体来说GCJ-02坐标系与WGS84坐标系偏移一般在100M上下,那种处理技术,是透过一种艺术将一张地图修改为别的一张地图,修改形成以往,地图上的点,会产生大到几百米,小到几十米的晃动。假设您用几何上坐标转换的主意想重操旧业原地图,难度不小,因为处理技术的处理映射函数是非线性的。网上有很多三个坐标之间的转换方法,不过精确度一般般,在10M左右。

在国内,GCJ-02带来的偏移最大有700米左右,偏移的相对值能够参见下图(最红处类似700
m,最蓝处大约 20 米):

 美高梅开户网址 12

3.1地图坐标系的钻探

高德地图和谷歌(Google)地图均是应用的GCJ-02坐标系,以下为测试例子:

 美高梅开户网址 13

具体来说GCJ-02坐标系与WGS84坐标系偏移一般在100M上下,这种拍卖技术,是由此一种格局将一张地图修改为其余一张地图,修改实现之后,地图上的点,会爆发大到几百米,小到几十米的舞狮。如果你用几何上坐标转换的方法想过来原地图,难度相当大,因为拍卖技术的拍卖映射函数是非线性的。网上有不少多个坐标之间的转换方法,可是精确度一般般,在10M左右。

在境内,GCJ-02带来的撼动最大有700米左右,偏移的相对值能够参考下图(最红处类似700
m,最蓝处大约 20 米):

 美高梅开户网址 14

美高梅开户网址 15

瓦片图纠正偏差或偏向前后对比:

3.2当地坐标周详据叠加到GCJ-02坐标系上

3.2本地坐标周详据叠加到GCJ-02坐标系上

美高梅开户网址 16美高梅开户网址 17

美高梅开户网址 18

3.2.1转移流程

鉴于地方数据并不会是大范围的,所以其有些偏移上得以因而线性方法近来逼近。

a.本地坐标数据转换为WGS84坐标数据。

b.对本土WGS84坐标数据开始展览Web横轴墨卡托投影。

c.将投歌后的数量叠加到高德恐怕谷歌(Google)中中原人民共和国地形图上。

d.进行线性偏移。

3.2.1变换流程

鉴于地点数据并不会是大范围的,所以其有个别偏移上能够通过线性方法一时半刻逼近。

a.本地坐标数据转换为WGS84坐标数据。

b.对地面WGS84坐标数据实行Web横轴墨卡托投影。

c.将投歌后的数量叠加到高德或许谷歌中华夏族民共和国地图上。

d.进行线性偏移。

# -*- coding:utf-8 -*-
import urllib2
import urllib
import os
import math
def GetPage(geturl):
    req = urllib2.Request(geturl)
    user_agent = 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 ' \
                 '(KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36'
    req.add_header('User-Agent', user_agent)
    response = urllib2.urlopen(req, timeout=10)
    page = response.read()
    return page
for level in range(0,6):
    try:
        newdir = "MapTitles/"+str(level)
        os.makedirs(newdir.decode("utf-8"))
    except:
        pass
    for row in range(0,int(math.pow(2,level))):
        try:
            newdir = "MapTitles/"+str(level)+"/"+str(row)
            os.makedirs(newdir.decode("utf-8"))
        except:
            pass
        for col in range(0,int(math.pow(2,level))):
            f = open("MapTitles/"+str(level)+"/"+str(row)+"/"+str(col)+'.jpg', 'wb')
            dataurl = "http://cache1.arcgisonline.cn/ArcGIS/rest/services/ChinaOnlineCommunityOnlyENG/MapServer/tile/"+str(level)+"/"+str(row)+"/"+str(col)
            data = GetPage(dataurl)
            f.write(data)
            f.close()
            pass
        pass
    pass

 

3.2.2结果展示

 美高梅开户网址 19

3.2.2结果浮现

 美高梅开户网址 20

View Code

4.天地图——CGCS2000

4.天地图——CGCS2000

 显示页面

4.1坐标系探讨

美高梅开户网址,天地图上分裂省区使用的坐标系大概分歧,最近来看本人经手过的山西、广西均为正规的国家标准两千坐标系。然则多少地点为当地坐标系,还需测量绘制局提供保密插件实行处理。

国家标准两千坐标系与WGS84坐标系偏差十分小,因为CGCS贰仟坐标系与WGS84坐标系的原点、尺度、定向及定向演化的定义都是一律的,参考椭球的参数略有差异而已。相同的坐标点,在CGCS三千与WGS84下,经度是平等的,只在纬度上存有0.11mm上下的分化,能够忽略掉。

4.1坐标系研讨

天地图上区别省份使用的坐标系或然两样,方今来看作者经手过的青海、福建均为正规的国家标准两千坐标系。可是有个别位置为当地坐标系,还需测量绘制局提供保密插件实行拍卖。

国家标准两千坐标系与WGS84坐标系偏差非常小,因为CGCS三千坐标系与WGS84坐标系的原点、尺度、定向及定向演变的概念都以一样的,参考椭球的参数略有区别而已。相同的坐标点,在CGCS三千与WGS84下,经度是一致的,只在纬度上存有0.11mm上下的分别,能够忽略掉。

展会页面只包括二个canvas成分作为地图容器。

4.2 本地坐标系矢量数据叠加到天地图上

a.将地面数据转换为WGS84可能国标3000坐标周密据。

b.叠加到天地图上。

4.2 本地坐标系矢量数据叠加到天地图上

a.将地方数据转换为WGS84照旧国家标准三千坐标全面据。

b.叠加到天地图上。

美高梅开户网址 21美高梅开户网址 22

4.3结出彰显

 美高梅开户网址 23

                                                                
 —–欢迎转载,但保留版权,请于明显处标明出处:

                                                                     
如若您觉得本文确实扶助了您,能够微信扫一扫,举办小额的打赏和鞭策,感激^_^

                                      美高梅开户网址 24

 

4.3结出呈现

 美高梅开户网址 25

                                                                
 —–欢迎转载,但保留版权,请于显著处标明出处:

                                                                     
假使你认为本文确实支持了您,能够微信扫一扫,进行小额的打赏和鼓励,感谢^_^

                                      美高梅开户网址 26

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示瓦片地图</title>
</head>
<body>
<canvas width="1000px" height="700px" id="mapcv" style="margin: 10px"></canvas>
</body>
<script src="Libs/jquery-1.9.1.min.js"></script>
<script src="Scripts/config.js"></script>
<script src="Scripts/init.js"></script>
</html>

View Code

布置音信

在config.js里面保存了有关的配备新闻

 

美高梅开户网址 27美高梅开户网址 28

var MapConfig={
    RootDir:'MapTitles/',
    ViewHeight:700,
    ViewWidth:1000,
    TitlePix:256,
    Resolution:[156543.033928,78271.5169639999,39135.7584820001,19567.8792409999,
                9783.93962049996,4891.96981024998,2445.98490512499,1222.99245256249,
                611.49622628138,305.748113140558,152.874056570411,76.4370282850732,
                38.2185141425366,19.1092570712683,9.55462853563415,4.77731426794937,
                2.38865713397468,1.19432856685505],
    Scale:[ 591657527.591555,295828763.795777,147914381.897889,73957190.948944,
            36978595.474472,18489297.737236,9244648.868618,4622324.434309,2311162.217155,
            1155581.108577,577790.554289,288895.277144,144447.638572,72223.819286,
            36111.909643,18055.954822,9027.977411,4513.988705],
    FullExtent:{
        xmin : -20037507.0672,
        ymin : -20036018.7354,
        xmax : 20037507.0672,
        ymax : 20102482.4102,
        spatialReference : {
            wkid : 102100
        }
    }
};

View Code

 

功用达成 init.js

地点只是把代码列了出去,这一有个别才是自家要讲的顶峰(才到第3☺)

① 鲜明战士的地图中央点坐标,以及缩放级别
② 计算当前窗口呈现的地形图范围

小编们可以依照窗口的主旨点坐标,窗口大小,以及当前缩放级其余Resolution能够很不难通过测算得到,当前窗口你能够见见的地图范围。

//当前窗口显示的范围
minX=centerGeoPoint.x-(MapConfig.Resolution[level]*MapConfig.ViewWidth/2);
maxX=centerGeoPoint.x+(MapConfig.Resolution[level]*MapConfig.ViewWidth/2);
minY=centerGeoPoint.y-(MapConfig.Resolution[level]*MapConfig.ViewHeight/2);
maxY=centerGeoPoint.y+(MapConfig.Resolution[level]*MapConfig.ViewHeight/2);

此处要专注一下地图的队列号的源点在左上角,不过地图左上角的影子坐标x是小小的的,y是最大的。也就会说行列号的起源在左上角,投影坐标的源点在左下角。

③ 总结左上角起初行列号

//左上角开始的行列号
leftTopTitleRow = Math.floor(Math.abs(maxY-MapConfig.FullExtent.ymax)/MapConfig.Resolution[level]/MapConfig.TitlePix);
leftTopTitleCol = Math.floor(Math.abs(minX-MapConfig.FullExtent.xmin)/MapConfig.Resolution[level]/MapConfig.TitlePix);

④ 总括实际地理范围

//实际地理范围
realMinX = MapConfig.FullExtent.xmin+leftTopTitleCol*MapConfig.TitlePix*MapConfig.Resolution[level];
realMaxY = MapConfig.FullExtent.ymax-leftTopTitleRow*MapConfig.TitlePix*MapConfig.Resolution[level];

大家都理解,大家获取到的瓦片的限量势必是高于突显窗口的限定。不然在窗口内展现的地图是不完整的

 

美高梅开户网址 29

⑤ 统计左上角偏移像素

在将地图瓦片拼接到窗口内是急需考虑到骨子里地理范围与体现地理范围的舞狮

//计算左上角偏移像素
offSetX = (realMinX-minX)/MapConfig.Resolution[level];
offSetY = (maxY-realMaxY)/MapConfig.Resolution[level];

⑥ 计算瓦片个数

收获瓦片个数后就足以依照瓦片个数以及偏移后的起初瓦片地点,将每三个瓦片拼接到canvas相应的地方上

//计算瓦片个数
xClipNum = Math.ceil((MapConfig.ViewHeight+Math.abs(offSetY))/MapConfig.TitlePix);
yClipNum = Math.ceil((MapConfig.ViewWidth+Math.abs(offSetX))/MapConfig.TitlePix);

⑦ 前端绘制瓦片

var mapcv = document.getElementById("mapcv");
    var myctx = mapcv.getContext("2d");
    for(var i=0;i<xClipNum;i++){
        for(var j=0;j<yClipNum;j++){
            var beauty = new Image();
            beauty.src = MapConfig.RootDir+level+"/"+(leftTopTitleRow+i)+"/"+(leftTopTitleCol+j)+".jpg";
            var TitleImg={
                img:null,
                x:0,
                y:0
            };
            TitleImg.img=beauty;
            TitleImg.x=offSetX+(j*MapConfig.TitlePix);
            TitleImg.y=offSetY+(i*MapConfig.TitlePix);
            TitlesArry.push(TitleImg);
            myctx.drawImage(TitleImg.img, TitleImg.x, TitleImg.y);
        }
    }

整套代码

其间涉及到了二个经纬度换投影坐标的函数,详情参见本身的另一篇有关百度坐标、WGS-8④ 、Saturn坐标,以及投影坐标与经纬度的转换的稿子(点击跳转)

 

美高梅开户网址 30美高梅开户网址 31

$(document).ready(function(){
    moveX = 0;
    moveY = 0;
    TitlesArry=[];
    //设置将要现实的地图中心点
    centerGeoPoint={
        x:116.337737,
        y:39.912465
    };
    centerGeoPoint=lonlatTomercator(centerGeoPoint);
    level = 5;
    //当前窗口显示的范围
    minX=centerGeoPoint.x-(MapConfig.Resolution[level]*MapConfig.ViewWidth/2);
    maxX=centerGeoPoint.x+(MapConfig.Resolution[level]*MapConfig.ViewWidth/2);
    minY=centerGeoPoint.y-(MapConfig.Resolution[level]*MapConfig.ViewHeight/2);
    maxY=centerGeoPoint.y+(MapConfig.Resolution[level]*MapConfig.ViewHeight/2);
    //左上角开始的行列号
    leftTopTitleRow = Math.floor(Math.abs(maxY-MapConfig.FullExtent.ymax)/MapConfig.Resolution[level]/MapConfig.TitlePix);
    leftTopTitleCol = Math.floor(Math.abs(minX-MapConfig.FullExtent.xmin)/MapConfig.Resolution[level]/MapConfig.TitlePix);
    //实际地理范围
    realMinX = MapConfig.FullExtent.xmin+leftTopTitleCol*MapConfig.TitlePix*MapConfig.Resolution[level];
    realMaxY = MapConfig.FullExtent.ymax-leftTopTitleRow*MapConfig.TitlePix*MapConfig.Resolution[level];

    //计算左上角偏移像素
    offSetX = (realMinX-minX)/MapConfig.Resolution[level];
    offSetY = (maxY-realMaxY)/MapConfig.Resolution[level];
    //计算瓦片个数
    xClipNum = Math.ceil((MapConfig.ViewHeight+Math.abs(offSetY))/MapConfig.TitlePix);
    yClipNum = Math.ceil((MapConfig.ViewWidth+Math.abs(offSetX))/MapConfig.TitlePix);
    //右下角行列号
    rightBottomTitleRow = leftTopTitleRow+xClipNum-1;
    rightBottomTitleCol = leftTopTitleCol+yClipNum-1;
    realMaxX = MapConfig.FullExtent.xmin+(rightBottomTitleCol+1)*MapConfig.TitlePix*MapConfig.Resolution[level];
    realMinY = MapConfig.FullExtent.ymax-(rightBottomTitleRow+1)*MapConfig.TitlePix*MapConfig.Resolution[level];
    var mapcv = document.getElementById("mapcv");
    var myctx = mapcv.getContext("2d");
    for(var i=0;i<xClipNum;i++){
        for(var j=0;j<yClipNum;j++){
            var beauty = new Image();
            beauty.src = MapConfig.RootDir+level+"/"+(leftTopTitleRow+i)+"/"+(leftTopTitleCol+j)+".jpg";
            var TitleImg={
                img:null,
                x:0,
                y:0
            };
            TitleImg.img=beauty;
            TitleImg.x=offSetX+(j*MapConfig.TitlePix);
            TitleImg.y=offSetY+(i*MapConfig.TitlePix);
            TitlesArry.push(TitleImg);
            myctx.drawImage(TitleImg.img, TitleImg.x, TitleImg.y);
        }
    }
});
function lonlatTomercator(lonlat) {
    var mercator={x:0,y:0};
    var x = lonlat.x *20037508.34/180;
    var y = Math.log(Math.tan((90+lonlat.y)*Math.PI/360))/(Math.PI/180);
    y = y *20037508.34/180;
    mercator.x = x;
    mercator.y = y;
    return mercator ;
}

View Code

 

总结

梦想对WebGIS的初学者掌握瓦片地图呈现原理能有帮带

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图