4544人阅读
BingMaps学习（1）
&&&&&& 今天在项目碰到的一个问题，就是怎样控制自己的瓦片地图，在屏幕范围内移动，平移过程地图不能超越屏幕区域。并且控制地图的缩放级别在某个范围内,比喻17&=zoomLevel&=21.
&（一）为什么要这样控制？
&&&&&& 有人肯定要问，为什么要这样控制呢！比喻，在世界地图上我只想控制人们只能看到中国地图，最小级别就能看到整个中国整个板块的地图！不能再缩小了！那么这是控制地图就起到很好的作用了。
（二）解决办法
&&&&&& 我一开始本来是想在ViewChangeOnFrame事件里做限制，但是觉得效果不是很好！下面把这段代码贴出来，觉得这种方法的思路应该是没问题的。这种方法只是给大家一种思路，具体起作用还要仔细分析下的。
void map_ViewChangeOnFrame(object sender, MapEventArgs e)
currentZoomLevel=map.ZoomL
double minZoomLevel=17;
double maxZoomLevel=21;
double lat = map.Center.L
double log = map.Center.L
if (lat & secondLatitude)
map.SetView(new Location(secondLatitude - 0., log), currentZoomLevel);
else if (lat & firstLatitude)
map.SetView(new Location(firstLatitude + 0., log), currentZoomLevel);
else if (log & secondLongitude)
map.SetView(new Location(lat, secondLongitude - 0.), currentZoomLevel);
else if (log & firstLongitude)
map.SetView(new Location(lat, secondLongitude + 0.), currentZoomLevel);
if (currentZoomLevel & maxZoomLevel)
map.ZoomLevel = maxZoomL
else if (currentZoomLevel & minZoomLevel)
map.ZoomLevel = minZoomL
&&&&&&&&&&
下面介绍一种确实有效的方法，这个方法的Demo来自msdn(),简单介绍下这种方法，主要是通过自定义MapMode，在MapMode中做限制。validLatitudeRange 和validLongitudeRange用来限制移动的区域。new Range&double&(14, 21)就是来限制缩放级别的！确定validLatitudeRange 和validLongitudeRange的范围是比较麻烦的，我经过多次Debug尝试修改后找到一个合理的值的，你可以先地图缩小到你的允许的最小级别调整你的validLatitudeRange 和validLongitudeRange的范围，如果最小级别是地图只能限制在你所设置的区域，那么放大后也一定会在你设置的区域中了！
下面把代码贴出来下！public class BSMapMode : MercatorMode
//定义LocationRect boundingRect(加载自己瓦片地图的方形区域的坐标)
//double firstLatitude = 30.8;
double firstLatitude = 30.8;
//double firstLongitude = 114.;
double firstLongitude = 114.;
//double secondLatitude = 30.4;
double secondLatitude = 30.4;
// double secondLongitude = 114.;
double secondLongitude = 114.;
private Range&double& validLatitudeR
private Range&double& validLongitudeR
public BSMapMode()
// The latitude value range (From = bottom most latitude, To = top most latitude)
validLatitudeRange = new Range&double&(firstLatitude, secondLatitude);
// The longitude value range (From = left most longitude, To = right most longitude)
validLongitudeRange = new Range&double&(firstLongitude,secondLongitude);
// Restricts the map view.
protected override Range&double& GetZoomRange(Location center)
// The allowable zoom levels - 14 to 21.
return new Range&double&(17, 21);
// This method is called when the map view changes on Keyboard
// and Navigation Bar events.
public override bool ConstrainView(Location center, ref double zoomLevel, ref double heading, ref double pitch)
bool isChanged = base.ConstrainView(center, ref zoomLevel, ref heading, ref pitch);
double newLatitude = center.L
double newLongitude = center.L
// If the map view is outside the valid longitude range,
// move the map back within range.
if (center.Longitude & validLongitudeRange.To)
newLongitude = validLongitudeRange.To;
else if (center.Longitude & validLongitudeRange.From)
newLongitude = validLongitudeRange.F
// If the map view is outside the valid latitude range,
// move the map back within range.
if (center.Latitude & validLatitudeRange.To)
newLatitude = validLatitudeRange.To;
else if (center.Latitude & validLatitudeRange.From)
newLatitude = validLatitudeRange.F
// The new map view location.
if (newLatitude != center.Latitude || newLongitude != center.Longitude)
center.Latitude = newL
center.Longitude = newL
isChanged =
// The new zoom level.
Range&double& range = GetZoomRange(center);
if (zoomLevel & range.To)
zoomLevel = range.To;
isChanged =
else if (zoomLevel & range.From)
zoomLevel = range.F
isChanged =
return isC
（三）让自定义Map Mode在地图中生效
&&&&& 只需要在地图加载时启用Map Mode就行了
&&&&&& Map map=new Map();
&&&&&& map.Mode=new BSMode();
&&& 总结，实现对地图的这种控制是非常有用的！这个只是自己的一点感受！仅供参考！
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：317411次
积分：4020
积分：4020
排名：第4967名
原创：36篇
转载：182篇
评论：110条
(1)(9)(4)(6)(25)(9)(12)(4)(3)(4)(10)(8)(35)(8)(2)(17)(41)(3)(8)(1)(9)(2)求助，真不行了，瓦片地图，这个要怎么弄才对？
[问题点数：40分，结帖人orosem625]
求助，真不行了，瓦片地图，这个要怎么弄才对？
[问题点数：40分，结帖人orosem625]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
本帖子已过去太久远了，不再提供回复功能。文章 - 1&评论 - 157&trackbacks - 0
1.首先获取百度 JavaScript&API
首先用浏览器打开&&如下图所示
其中&&这个链接就是我们要找的API文件，
同样在浏览器中打开它，并另存为诸如&apiv1.3.min.js&
还有百度地图必须的一些控件，光标，logo之类的图片也下载下来
2.修改&apiv1.3.min.js&把里面的地图控件的图片，光标，logo等链接替换成本地的。
3.下载百度地图瓦片，这个有很多方法可以获取。比如这个工具：
4.开始使用离线地图api加载本地的地图切片
现在，完全可以脱离网络使用百度地图了。示例源码如下：
1 &!DOCTYPE html&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&title&百度离线地图演示&/title&
&script type="text/javascript" src="js/apiv1.3.min.js"&&/script&
&script type="text/javascript" src="js/map,oppc,navictrl,tile,copyrightctrl"&&/script&
&!--script type="text/javascript" src="http://api./api?v=1.3"&&/script--&
&link rel="stylesheet" type="text/css" href="bmap.css" /&
&div style="left:0;top:0;width:100%;height:100%;position:" id="container"&&/div&
17 &/html&
18 &script type="text/javascript"&
var tileLayer = new BMap.TileLayer({
isTransparentPng: true
tileLayer.getTilesUrl = function (tileCoord, zoom) {
var x = tileCoord.x;
var y = tileCoord.y;
return 'maptile/' + zoom + '/' + x + '/' + y + '.png';
var map = new BMap.Map('container');
map.addTileLayer(tileLayer);
map.addControl(new BMap.NavigationControl());
map.centerAndZoom(new BMap.Point(100.675, 39.007978), 5);
map.enableScrollWheelZoom();
//启用滚轮放大缩小
map.enableKeyboard();
//启用键盘操作，默认禁用。键盘的上、下、左、右键可连续移动地图。
map.enableContinuousZoom();//启用连续缩放效果
var copyCtrl = new BMap.CopyrightControl({
anchor: BMAP_ANCHOR_BOTTOM_RIGHT
copyCtrl.addCopyright({
content: " 百度离线地图演示"
map.addControl(copyCtrl);
44 &/script&
阅读(...) 评论()OpenLayers加载搜狗地图
查看: 8696|
摘要: 从目前国内的地图服务商提供的地图来看，地图瓦片切图规则只少分为三种。其中Google Map、Bing地图、MapABC、QQ地图是一类，而百度地图、搜狗地图是使用的另一类，他们是在GCJ02 基础上又进行了自己的偏移 ，还有一类 ...
从目前国内的地图服务商提供的地图来看，地图瓦片切图规则只少分为三种。其中Google
Map、Bing地图、MapABC、QQ地图是一类，而百度地图、搜狗地图是使用的另一类，他们是在GCJ02 基础上又进行了自己的偏移
，还有一类应该是mapbar的地图(还没有仔细去分析它的瓦片编号规则)。经过分析
搜狗地图瓦片编号是以0，0开始编号，向东X正增加，向西X负增加，向北Y增加，向南Y负增加，而谷歌地图是从左上角开始编号，向东X增加，向南Y增加，这种计算很方便。知道了这种对应规则后，我们就可以得到计算的方式，代码如下：其实还是重写getURL1.
我们在lib\OpenLayers\Layer目录下面新建一共SoGou.js我们的目的是取得瓦片数据的url，所以只要找到搜狗地图的瓦片url就可以了新建一共OpenLayers.Layer.SoGou类继承自OpenLayers.Layer.TileCache&&，重新定义getURL方法[代码]js代码：/**
* 对自定义规则切割的图片进行拼装的类
OpenLayers.Layer.SoGou = OpenLayers.Class(OpenLayers.Layer.TileCache, {
initialize: function (name, url, options) {
var tempoptions = OpenLayers.Util.extend({
'format': 'image/png',
isBaseLayer: true
}, options);
OpenLayers.Layer.TileCache.prototype.initialize.apply(this, [name, url, {},
tempoptions]);
this.extension = this.format.split('/')[1].toLowerCase();
this.extension = (this.extension == 'jpg') ? 'jpeg' : this.
this.transitionEffect = "resize";
this.buffer = 0;
* 按地图引擎切图规则实现的拼接方式
getURL: function (bounds) {
var tilez=this.map.zoom-1;
var offsetX = Math.pow(2,tilez);
var offsetY = offsetX - 1;
var res = this.map.getResolution();
var bbox = this.map.getMaxExtent();
var size = this.tileS
var bx = Math.round((bounds.left - bbox.left) / (res * size.w));
var by = Math.round((bbox.top - bounds.top) / (res * size.h));
var numX = bx - offsetX;
var numY = (-by) + offsetY;
tilez = tilez + 1;
var zoomLevel = 729 -
if (zoomLevel == 710) zoomLevel = 792;
var blo = Math.floor(numX / 200);
var bla = Math.floor(numY / 200);
if (blo & 0)
blos = "M" + ( - blo);
blos = "" +
if (bla & 0)
blas = "M" + ( - bla);
blas = "" +
var x = numX.toString().replace("-","M");
var y = numY.toString().replace("-","M");
var urlsNum = parseInt((bx + by) % this.url.length);
var strURL = "";
strURL = this.url[urlsNum] + zoomLevel + "/" + blos + "/" + blas + "/" + x + "_" + y + ".GIF";
return strURL;
clone: function (obj) {
if (obj == null) {
obj = new OpenLayers.Layer.SoGou(this.name, this.url, this.options);
obj = OpenLayers.Layer.TileCache.prototype.clone.apply(this, [obj]);
CLASS_NAME: "OpenLayers.Layer.SoGou"
刚表态过的朋友 ()
我的也是提示“对象不支持此操作”，请问你的问题解决了吗？
Powered by