WEBGIS实现限制地图拖动范围及缩放比例及extent（）参数说明

项目要求:使用图片覆盖在地图根据经纬度确定图片真实地理位置使用切图工具（MapTiler）对图片进行瓦片化然后显示在地图。
问题描述：图片覆盖到地图后可以随意拖动和缩放，影响用户体验。
解决方法：
openlayers实现瓦片切图覆盖地图及设置拖动范围和缩放比例：

//地图拖拽经纬度（稍后会说）
var mapPosition=ol.proj.transformExtent([经度1,纬度1,经度2,纬度2], 'EPSG:4326', 'EPSG:3857');var mapMinZoom = 17;var mapMaxZoom = 20;var layer = new ol.layer.Tile({//extent: mapExtent,source: new ol.source.XYZ({attributions: [new ol.Attribution({html: 'old_depot_yuhua 下午12.14; Rendered with <a href="https://www.maptiler.com/">MapTiler</a>'})],url: "{z}/{x}/{y}.png",tilePixelRatio: 1.000000,minZoom: mapMinZoom,maxZoom: mapMaxZoom})});var osm = new ol.layer.Tile({source: new ol.source.OSM()});var map = new ol.Map({target: 'map',layers: [//背景是白边框 如果需要背景是地图解开注释即可//osm,layer,],view: new ol.View({//控制拖拽范围extent: mapPosition,//设置图片显示中心点center: ol.proj.fromLonLat([中心点经度,中心点纬度]),//当前显示图层比例zoom: 20,//最大显示图层比例（缩放）minZoom: 20,//最小显示图层比例（缩放）maxZoom: 20})});

其中extend是用来设置拖拽范围的它包含四个参数（x1,y1,x2,y2）
其中（x1,x2）（y1,y2）的意思是经度和纬度不用多说！但是它代表哪个经度那个纬度呢?画张图来看

立刻就懂了吧！也就是说要想调整拖拽范围变小必然要x1+,y1+
x2-,y2-
我很笨之前一直不知道百度也没有查到所以希望我写的能帮助你们理解不懂的欢迎留言

WEBGIS实现限制地图拖动范围及缩放比例及extent（）参数说明相关推荐

高德地图android拖动地图,建议高德地图添加地图拖动事件，添加方法如内容所述...
我下面的实现方法肯定是错误的,不知道如何将高德地图fragment添加到UZWebView中的,能否帮给我指点一下. package com.abc.amap; import org.json.JSO ...
限制百度地图拖动范围限制，当超如范围时自动返回
限制百度地图拖动范围限制,当超如范围时自动返回背景最近利用百度离线地图加载世界地图,但发现下载的区域只是世界地图一块,当拖动地图范围超过想要的范围时,就会出现背景块为白色: 如图解决思路1:百度 ...
浅谈WEBGIS运用栅格地图实现原理[更新:Google Maps带来的新型WebGIS设计模式]
为什么要取这样的一个题目呢?主要是因为今天去了一家公司和他们谈了谈,本来是指望做兼职的,谈到最后当然是不成了.去谈的是地图制作(可兼职)一职,要求是地图制图经验,最后加了个有WEBGIS开发经验.本来 ...
cocos creator实现类似王者荣耀地图拖动的方法
这是今天写窗口拖动时,忽然想到的一个变式下面是一个简单的实现拖动物体的方法: @property(cc.Node)theNode: cc.Node = null; //这里在外部赋值onLoad() ...
“GIS讲堂”第十课—WEBGIS中的地图图例
概述: 本节课程讲述了WEBGIS中的地图图例的实现. 课程主题: 地图图例的实现课程内容: 1.地图图例的概念图例是集中于地图一角或一侧的地图上各种符号和颜色所代表内容与指标的说明,有助于更好的 ...
android之scrollview滑动和地图拖动冲突
可能有人在做地图的时候会碰见,由于需求,把地图放在scrollview中的,但是当手指在地图上想上下拖动地图的时候发现地图没办法拖动,反而是scrollview在滑动了.这是因为地图拖动事件被拦截,执 ...
百度地图拖动标注后获取坐标
本来想用图吧的API来做的,结果弄了下,在手机上弄不了.换用百度地图了..本功能个人觉得在很多地方用到,先记下来,省得每次都得翻地图API文档一点一点弄. 功能表现为: 地图一开始打开就定位到你的附近 ...
html 手机端无法拖动地图,关于腾讯地图api的禁止地图拖动问题
禁用滚动和拖动 *{ margin:0px; padding:0px; } body, button, input, select, textarea { font: 12px/16px Verdan ...
WebGIS开发绘制地图标注
目录实现步骤 1. 引用开发库: 2. 创建地图容器: 3. 创建地图对象类: 4. 添加矢量图层: 5. 添加图片标注: 5.1 创建图片标注要素 5.2 设置图片标注要素样式 5.3 将图片标注 ...

WEBGIS实现限制地图拖动范围及缩放比例及extent（）参数说明

WEBGIS实现限制地图拖动范围及缩放比例及extent（）参数说明相关推荐

最新文章

热门文章