对谷歌瓦片地图举办改良,有二种格局:1是对拼接大图实行校勘,然后再一次切片;2是向来对瓦片图实行订正。那里我用的是第三种艺术,即间接对瓦片地图实行考订。

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

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

  近期,有不少WebGIS开发包,ArcGIS API for
JS、OpenLayers、LeafLetjs等为大家从事WebGIS开发的人卷入了成百上千有力的成效。大家很有益的施用那个库的时候,也让我们忽视了好多原理性的东西。

App.config配置:

1.背景

当下项目中应用百度地图、高德地图、谷歌中中原人民共和国地图、天地图的供给进一步多,那里作者跟大家一起对各州图使用的坐标系做3个归纳的探索。

1.背景

当前项目中应用百度地图、高德地图、谷歌(谷歌)中夏族民共和国地图、天地图的要求更是多,那里本身跟大家1起对外省图使用的坐标系做八个简便的探赜索隐。

比如说,作者在此以前一贯在被1个难题干扰,就是何等将三个点正确的来得在浏览器显示屏的不错的任务,即经纬度坐标和显示屏坐标的更换难点。直到自身看到1位民代表大会拿的博客(点击学习),里面对WebGIS的法则实行了深深的授课。看了他的稿子后直接认为,小编写那篇小说是剩下的。不过大神的篇章里面并不曾详尽讲解原理的代码达成。个人认为依然很有须要通过完结相应作用的主意驾驭其规律,而且完毕时还是碰着了许多的难题,所以还是写了那篇文章。

金沙注册送58 1金沙注册送58 2

贰.百度地形图——BD-0玖

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

当然,近年来反转方法在我们实在项目中曾经缓解,精确度能够达成0.五M以内。

贰.百度地图——BD-0玖

百度地图是在GCJ-0贰坐标系上,又和好对坐标加密了3回,它官方文书档案里说叫BD-0九,近年来从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>

二.1百度瓦片获取思路

百度地图的黑影依然专业的Web横轴墨卡托投影,所以其切图的坐标原点、范围都以能够总结出来的。瓦片大小、基本U汉兰达L也都得以经过监听百度的U卡宴L获取。要求小心的是,百度地图的瓦片行列号和负载地址在分裂级别上都会迥然分裂,其变化规则如下:

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

     金沙注册送58 3                      
                     

二.一百度瓦片获取思路

百度地图的影子依然正式的Web横轴墨卡托投影,所以其切图的坐标原点、范围都是足以总括出来的。瓦片大小、基本UQashqaiL也都能够透过监听百度的USportageL获取。供给专注的是,百度地图的瓦片行列号和负载地址在分歧级别上都会迥然差别,其变动规则如下:

瓦片的行列号是每增添一个级别便会进展3个平整的晃动,其偏移算法如下:

     金沙注册送58 4                      
                     

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

View Code

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

贰.几人置坐标系图层与百度底图叠加的探赜索隐

  • Height、Weight:每种瓦片的宽窄和惊人
  • Resolution:每一个缩放级别下1像素代表的地图单位(投影坐标)
  • Initial Extent:瓦片地图的限定

对瓦片图举行校正处理的算法代码:

二.2.1 强行对瓦片数据开始展览考订

在最新的arcBruTile0.⑦中已经支撑对百度地图的充裕。能够加载了百度瓦片后,通过寻找百度地图上与当地地图上的控制点对开始展览强行改进。

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

二.2.一 强行对瓦片数据实行改正

在风行的arcBruTile0.七中早就支持对百度地图的增进。能够加载了百度瓦片后,通过搜索百度地图上与本地地图上的控制点对进行强行更正。

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

获得地图瓦片

金沙注册送58 5金沙注册送58 6

二.二.2 将矢量数据转换为百度坐标系——以圣Jose90坐标系为例

WebGIS前端瓦片地图呈现原理及贯彻,对互连网中常见地图的坐标系商讨。a.获取WGS捌四到西雅图90坐标系上的7参数。

b.通过树立控制点库(已研发),利用工具(已研发)将天津90坐标周密据自动转换为WGS84坐标全面据。

c.再建立WGS八4与百度坐标系之间的决定点库(已研究开发),将WGS八四数据再转换为百度坐标周密据。

d.叠加后测试。

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

a.获取WGS八四到圣Diego90坐标系上的7参数。

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

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

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.二.三结果突显

                                            金沙注册送58 7

金沙注册送58 8

 

2.二.3结出体现

                                            金沙注册送58 9

金沙注册送58 10

 

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

View Code

三.高德地图和谷歌(谷歌)中华夏族民共和国地形图——GCJ-02

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

经过python程序将肯定缩放等级的瓦片保存到当地作者只抓取了0-伍级其余瓦片,并遵守arcgis瓦片的保存方法存储。

处理功效:小编要好电脑每秒处理大致350张瓦片图,一到1八级瓦片共十0多万张图纸,大致须要处理肆拾柒分钟。

叁.一地图坐标系的商量

高德地图和谷歌地图均是使用的GCJ-0二坐标系,以下为测试例子:

 金沙注册送58 11

具体来说GCJ-0二坐标系与WGS八4坐标系偏移1般在十0M上下,那种处理技术,是因而①种格局将一张地图修改为其余一张地图,修改形成之后,地图上的点,会发生大到几百米,小到几10米的舞狮。如若您用几何上坐标转换的点子想过来原地图,难度十分大,因为拍卖技术的拍卖映射函数是非线性的。网上有众多五个坐标之间的转换方法,然则精确度一般般,在拾M左右。

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

 金沙注册送58 12

三.一地图坐标系的研商

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

 金沙注册送58 13

具体来说GCJ-0二坐标系与WGS八四坐标系偏移壹般在十0M上下,那种处理技术,是通过1种方法将一张地图修改为此外一张地图,修改形成以往,地图上的点,会生出大到几百米,小到几十米的偏移。倘使您用几何上坐标转换的格局想重操旧业原地图,难度相当大,因为处理技术的处理映射函数是非线性的。网上有很多多少个坐标之间的转换方法,可是精确度一般般,在拾M左右。

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

 金沙注册送58 14

金沙注册送58 15

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

三.二本地坐标周到据叠加到GCJ-0二坐标系上

三.2地点坐标周详据叠加到GCJ-0二坐标系上

金沙注册送58 16金沙注册送58 17

金沙注册送58 18

3.贰.壹更换流程

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

a.当地坐标数据转换为WGS八四坐标数据。

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

c.将投视后的数额叠加到高德或然谷歌(谷歌)中华夏族民共和国地形图上。

d.进行线性偏移。

3.二.一变换流程

是因为地面数据并不会是大范围的,所以其部分偏移上能够经过线性方法一时逼近。

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

b.对本地WGS8四坐标数据进行Web横轴墨卡托投影。

c.将投影后的多寡叠加到高德或许谷歌(谷歌(Google))中华夏族民共和国地形图上。

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

 

叁.二.二结实显示

 金沙注册送58 19

三.二.2结出体现

 金沙注册送58 20

View Code

4.天地图——CGCS2000

4.天地图——CGCS2000

 彰显页面

4.一坐标系商量

天地图上不相同省区使用的坐标系可能差异,近期来看自己经手过的新疆、新疆均为行业内部的国家标准三千坐标系。可是某个地点为地面坐标系,还需测量绘制局提供保密插件进行处理。

国家标准两千坐标系与WGS八四坐标系偏差非常的小,因为CGCS三千坐标系与WGS⑧四坐标系的原点、尺度、定向及定向演化的概念都以千篇1律的,参考椭球的参数略有区别而已。相同的坐标点,在CGCS两千与WGS八四下,经度是均等的,只在纬度上存有0.1一mm上下的区分,能够忽略掉。

四.一坐标系探讨

天地图上分歧省份使用的坐标系恐怕两样,如今来看本人经手过的湖北、山东均为规范的国家标准2000坐标系。可是多少地方为本地坐标系,还需测量绘制局提供保密插件举行拍卖。

国家标准两千坐标系与WGS捌4坐标系偏差相当的小,因为CGCS两千坐标系与WGS8四坐标系的原点、尺度、定向及定向衍变的概念都以壹致的,参考椭球的参数略有不一样而已。相同的坐标点,在CGCS3000与WGS八四下,经度是平等的,只在纬度上存有0.11mm上下的区分,能够忽略掉。

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

四.2 本地坐标系矢量数据叠加到天地图上

a.将本地数据转换为WGS八4或然国家标准三千坐标周到据。

b.叠加到天地图上。

四.2 本地坐标系矢量数据叠加到天地图上

a.将本地数据转换为WGS8四如故国家标准2000坐标周详据。

b.叠加到天地图上。

金沙注册送58 21金沙注册送58 22

四.三结出体现

 金沙注册送58 23

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

                                                                     
即使你认为本文确实帮忙了你,能够微信扫1扫,进行小额的打赏和鞭策,谢谢^_^

                                      金沙注册送58 24

 

肆.三结出彰显

 金沙注册送58 25

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

                                                                     
要是你觉得本文确实协理了您,可以微信扫1扫,进行小额的打赏和鞭策,多谢^_^

                                      金沙注册送58 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里面保存了有关的安插信息

 

金沙注册送58 27金沙注册送58 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

上边只是把代码列了出来,那1部分才是自己要讲的极端(才到主要☺)

1 分明战士的地图宗旨点坐标,以及缩放级别
金沙注册送58,2 总结当前窗口呈现的地形图范围

大家能够根据窗口的主干点坐标,窗口大小,以及当前缩放级别的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];

咱俩都知道,我们取获得的瓦片的界定势必是大于展现窗口的限制。不然在窗口内呈现的地图是不完整的

 

金沙注册送58 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);

7 前端绘制瓦片

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-八4、火星坐标,以及投影坐标与经纬度的更换的文章(点击跳转)

 

金沙注册送58 30金沙注册送58 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地图