WebGIS前端瓦片地图展现原理及落到实处,谷歌(Google)瓦片地图纠正偏差或偏向

   
对谷歌(谷歌(Google))瓦片地图进行校对,有二种办法:一是对拼接大图实行改进,然后再一次切片;二是一向对瓦片图进行修正。那里本身用的是第二种方法,即直接对瓦片地图实行校对。

小说版权由我李晓晖和腾讯网共有,若转发请于显著处标明出处:。

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

  近来,有诸多WebGIS开签发承包合约,ArcGIS API for
JS、OpenLayers、LeafLetjs等为大家从事WebGIS开发的人卷入了诸多无敌的功能。大家很有益的应用那一个库的时候,也让大家忽视了不少原理性的事物。

App.config配置:

1.背景

近年来项目中选拔百度地图、高德地图、谷歌(谷歌(Google))中中原人民共和国地图、天地图的要求愈来愈多,那里自个儿跟我们一同对各市图使用的坐标系做三个简便的探赜索隐。

1.背景

现阶段项目中动用百度地图、高德地图、谷歌(Google)中夏族民共和国地形图、天地图的需求更是多,那里自个儿跟大家一同对外市图使用的坐标系做1个简约的商讨。

比如说,作者前边平素在被3个难点苦恼,正是怎么样将三个点正确的呈现在浏览器显示器的不错的地方,即经纬度坐标和显示器坐标的转换难题。直到自个儿来看壹位民代表大会牌的博客(点击学习),里面对WebGIS的法则举行了深深的任课。看了他的稿子后直接认为,笔者写那篇文章是剩下的。不过大神的篇章里面并不曾详尽讲解原理的代码达成。个人认为还是很有必不可少通过达成相应功能的法门精晓其规律,而且完结时还是碰到了不少的难点,所以如故写了那篇小说。

亚洲必赢官网 1亚洲必赢官网 2

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

百度地图是在GCJ-02坐标系上,又协调对坐标加密了2次,它官方文书档案里说叫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横轴墨卡托投影,所以其切图的坐标原点、范围都是足以总括出来的。瓦片大小、基本UCR-VL也都得以因而监听百度的UPAJEROL获取。必要注意的是,百度地图的瓦片行列号和负载地址在不一样级别上都会迥然差别,其转移规则如下:

瓦片的行列号是每扩展三个级别便会展开1个规则的偏移,其偏移算法如下:

     亚洲必赢官网 3                      
                     

2.1百度瓦片获取思路

百度地图的阴影依旧正式的Web横轴墨卡托投影,所以其切图的坐标原点、范围都以足以总计出来的。瓦片大小、基本U君越L也都能够通过监听百度的ULacrosseL获取。必要留意的是,百度地图的瓦片行列号和负载地址在区别级别上都会有所分裂,其生成规则如下:

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

     亚洲必赢官网 4                      
                     

 以Arcgis
online上的瓦片地图为例,服务中有多少个相比重庆大学的施用到的参数。

View Code

2.2地面坐标系图层与百度底图叠加的研讨

WebGIS前端瓦片地图展现原理及落到实处,谷歌(Google)瓦片地图纠正偏差或偏向。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 将矢量数据转换为百度坐标系——以圣Juan90坐标系为例

a.获取WGS84到圣萨尔瓦多90坐标系上的7参数。

b.通过建立控制点库(已研究开发),利用工具(已研究开发)将明尼阿波Liss90坐标周到据自动转换为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.高德地图和谷歌中中原人民共和国地形图——GCJ-02

3.高德地图和谷歌(Google)中夏族民共和国地图——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地图坐标系的商讨

高德地图和谷歌(谷歌)地图均是使用的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.将投影后的多寡叠加到高德或许谷歌(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

 

3.2.2结实体现

 亚洲必赢官网 19

3.2.2结出展现

 亚洲必赢官网 20

View Code

4.天地图——CGCS2000

4.天地图——CGCS2000

 显示页面

4.1坐标系钻探

天地图上分歧省区使用的坐标系大概两样,方今来看自己经手过的湖南、江苏均为行业内部的国家标准两千坐标系。不过多少地点为本土坐标系,还需测量绘制局提供保密插件进行拍卖。

国家标准3000坐标系与WGS84坐标系偏差非常的小,因为CGCS两千坐标系与WGS84坐标系的原点、尺度、定向及定向演化的定义都以同一的,参考椭球的参数略有分化而已。相同的坐标点,在CGCS3000与WGS84下,经度是一律的,只在纬度上存有0.11mm上下的分化,可以忽略掉。

4.1坐标系切磋

天地图上不一致省区使用的坐标系只怕不一致,方今来看本身经手过的广东、广东均为正式的国家标准三千坐标系。然而某个地方为当地坐标系,还需测量绘制局提供保密插件实行处理。

国家标准贰仟坐标系与WGS84坐标系偏差相当的小,因为CGCS三千坐标系与WGS84坐标系的原点、尺度、定向及定向衍变的定义都以均等的,参考椭球的参数略有不一致而已。相同的坐标点,在CGCS3000与WGS84下,经度是相同的,只在纬度上存有0.11mm上下的差距,能够忽略掉。

展会页面只含有一个canvas成分作为地图容器。

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

a.将地点数据转换为WGS84要么国家标准两千坐标全面据。

b.叠加到天地图上。

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

a.将当地数据转换为WGS84要么国家标准3000坐标周详据。

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

地点只是把代码列了出来,这一部分才是本人要讲的巅峰(才到重点☺)

① 分明战士的地图宗旨点坐标,以及缩放级别
② 总计当前窗口体现的地形图范围

咱俩能够依据窗口的骨干点坐标,窗口大小,以及当前缩放级别的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肆 、罗睺坐标,以及投影坐标与经纬度的转移的小说(点击跳转)

 

亚洲必赢官网 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地图