带你剖析WebGis的世界奥秘----瓦片式加载地图
- WebGIS应用程序的页面能够通过HTML、JSP、ASP或任何任何类型的Web页文件构成,其特殊之处在于,它的请求提交的方法并不是通过常用的 “超链接”形式,而是使用鼠标与Web浏览器上地图进行的,因此,我们开发WebGIS应用程序的过程,就是考虑如何向一台Web服务器发送地图请求或其 它类型请求,并将响应进行解释显示的过程
- 加载瓦片最后我们是呈现出地图的形式,所以我们需要一个div带装在这个map,这个在前端很容易实现
<div id="rcp2_map" class="smallmap" style="width: 100%; height: 100%;"></div>
- 有了这个我们的地图就有了安身之所,下面我们就开始我们的加载步骤,具体步骤我放在脚本里面,在定义map的时候我们我们需要两个参数,第一个是div的名称,第二个是map的一些设置
var options = {
projection : "EPSG:4326",
center : new OpenLayers.LonLat(105.5, 39.5)
};
var map = new OpenLayers.Map('rcp2_map', options);
- 有了map我们继续向map里面加入我们的瓦片也就是所谓的layer(层)关键是我们的层去哪里拿,我先贴个我服务上的数据地图代码
var wms = new OpenLayers.Layer.WMS("OpenLayers WMS",
// geoserver所在服务器地址
// "http://192.168.1.120:8080/geoserver/wms",
"http://192.168.1.15:8088/geoserver/china-rail/wms", {
layers : "china-rail:大公鸡"
});
- 如果你没有在GeoService上发布过,你也不用着急,人家官网给你提供了数据,你可以从官网拿层来用
var wms= new OpenLayers.Layer.OSM();
- 两种方式随便你选择,拿到图层我们只要进入map就行了
// 添加wms图层
map.addLayer(wms);
到此我们的地图就显示了,我们来看看想过吧,我拿的是我服务的地图,可以不怎么好看,我们只要效果
滚动鼠标滚动键放大地图显示
在地图显示方面我们可以设置的,比如说以什么地方中心显示呢,以多打的比例显示呢,设置中心点在上面的代码已经提到了,下面我贴个比例显示的代码
map.zoomTo(5); // 以第5级方式显示地图
- 有没有看到我上面地图左右下角的一些功能,相信你们现在是没有的,这些都是控制功能,需要我们手动加入
// 添加control空间
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MousePosition());
map.addControl(new OpenLayers.Control.ScaleLine());
map.addControl(new OpenLayers.Control.Scale);
下面我们在看看点击Map事件和定位功能吧。
定位说白了就是以某个点中心显示,然后在把这个点给高亮标注出来我们先标注这个点在这支中心点
点击很容易只要我们注册一下事件就好了,我选择在Map控件上面注册这个点击事件,你们根据自己的需要选择控件注
//拿到坐标
var jd = Number(document.getElementById('jd').value);
var wd = Number(document.getElementById('wd').value);
if(document.getElementById('jd').value==""){
jd=116.3;
}
if(document.getElementById('wd').value==""){
wd=39.9;
}
//定义一个box层
var boxes = new OpenLayers.Layer.Boxes("Boxes");
if (this.box != null) {
this.box.display(false); //清除上一次的区域标记
}
//定义一个Bounds
bounds = new OpenLayers.Bounds();
//有参数生成两个经纬度
var lonlat1 = new OpenLayers.LonLat(jd, wd);
var lonlat2 = new OpenLayers.LonLat(jd, wd);
bounds.extend(lonlat1);
bounds.extend(lonlat2);//生成一个经纬度范围的bounds
box = new OpenLayers.Marker.Box(bounds);
box.events.register("click", box, function(e) {
this.setBorder("blue");
});//注册box的点击事件
boxes.addMarker(box);
map.addLayer(boxes);
map.centerLayerContainer(lonlat1,6);
map.panTo(lonlat1); //平移到范围的中心点
map.events.register("click", map, function(e) {
var t=e;
//获取经纬度
var lonlat = map.getLonLatFromPixel(e.xy);
});
- 研究了这个Openlayers好几天感觉这个显示的地图不好,不好确定具体信息,下面介绍一个升级版本OpenLayers3的技术
- 前面步骤一样,在注册map的时候有了不同
var raster = new ol.layer.Tile({
source: new ol.source.OSM()
});
var vector = new ol.layer.Vector({
source: new ol.source.Vector({
url: './source/china.json',
format: new ol.format.GeoJSON()
})
});
var view = new ol.View({
// the view's initial state
center: search,
zoom: 5
});
var map = new ol.Map({
layers: [raster, vector],
target: 'map',
view: view
});
看看效果
双击放大地图显示
这里的定位和点击就草草说说了
点击
map.on('singleclick',mapClick);
function mapClick(e){
var pixel = map.getEventPixel(e.originalEvent);
var featureInfo = map.forEachFeatureAtPixel(pixel,
function (feature, layer) {
return {feature:feature,layer:layer};
});
var coordinate = e.coordinate;
var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
coordinate, 'EPSG:3857', 'EPSG:4326'));
if (featureInfo!==undefined&&featureInfo!==null
&&featureInfo.layer!==null)
{
alert(hdms+"\n这里属于"+featureInfo.feature.get("name")+"省");//显示点击区域的
console.log('打印选择要素');
console.log(featureInfo .feature);
console.log('打印选择要素所属Layer');
console.log(featureInfo .layer);
}else{
alert(hdms+"\n这里不属于中国或者这里是大海");//显示点击区域的
}
}
定位
view.setCenter(ol.proj.fromLonLat([Number(document.getElementById('jd').value), Number(document.getElementById('wd').value)]));
里面用到的china.json数据下载地址:http://download.csdn.net/detail/u013132051/9595986
下面本人继续更新WebGis的后续精准操作
带你剖析WebGis的世界奥秘----瓦片式加载地图的更多相关文章
- 带你剖析WebGis的世界奥秘----瓦片式加载地图(转)
带你剖析WebGis的世界奥秘----瓦片式加载地图 转:https://zxhtom.oschina.io/zxh/20160805.html 编程 java 2016/08/05 0留言, ...
- 带你剖析WebGis的世界奥秘----Geojson数据加载(高级)(转)
带你剖析WebGis的世界奥秘----Geojson数据加载(高级) 转:https://zxhtom.oschina.io/zxh/20160819.html 编程 java 2016/08/ ...
- 带你剖析WebGis的世界奥秘----Geojson数据加载(高级)
前言:前两周我带你们分析了WebGis中关键步骤瓦片加载+点击事件(具体的看前两篇文章),下面呢,我带大家来看看Geojson的加载及其点击事件 Geojson数据解析 GeoJSON是一种对各种地理 ...
- 带你剖析WebGis的世界奥秘----点和线的世界(转)
带你剖析WebGis的世界奥秘----点和线的世界 转:https://zxhtom.oschina.io/zxh/20160813.html 编程 java 2016/08/13 0留言, 0 ...
- 带你剖析WebGis的世界奥秘----点和线的世界
前言 昨天写了好久的博文我没保存,今天在来想继续写居然没了,气死人啊这种情况你们见到过没,所以今天重新写,我还是切换到了HTML格式的书写上.废话不多说了,我们现在就进入主题,上周我仔细研究了WebG ...
- 局域网Cesium离线影像及瓦片影像地图加载
1.Cesium简介 优点: cesium展示地图数据效果比较好,解析2D地图各种不同服务类型的数据源,比如百度地图.天地图.arcgis地图.BingMap.openStreetMap.MapBox ...
- Cesium中Clock控件及时间序列瓦片动态加载
前言 前面已经写了两篇博客介绍Cesium,一篇整体上简单介绍了Cesium如何上手,还有一篇介绍了如何将Cesium与分布式地理信息处理框架Geotrellis相结合.Cesium的强大之处也在于其 ...
- Cocos Creator 资源加载流程剖析【一】——cc.loader与加载管线
这系列文章会对Cocos Creator的资源加载和管理进行深入的剖析.主要包含以下内容: cc.loader与加载管线 Download部分 Load部分 额外流程(MD5 Pipe) 从编辑器到运 ...
- Tomcat增加Context配置不带项目名访问导致启动的时候项目加载两次
eclipse发布web应用至tomcat,默认方式下访问该项目是需要带项目名称的,例http://localhost:8080/myapp/.现在需要改成这样访问http://localhost.修 ...
随机推荐
- Android Native 内存泄漏系统化解决方案
导读:C++内存泄漏问题的分析.定位一直是Android平台上困扰开发人员的难题.因为地图渲染.导航等核心功能对性能要求很高,高德地图APP中存在大量的C++代码.解决这个问题对于产品质量尤为重要和关 ...
- Bzoj 4582 [Usaco2016 Open] Diamond Collector 题解
4582: [Usaco2016 Open]Diamond Collector Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 204 Solved: ...
- MMM 数位dp学习记
数位dp学习记 by scmmm 开始日期 2019/7/17 前言 状压dp感觉很好理解(本质接近于爆搜但是又有广搜的感觉),综合了dp的高效性(至少比dfs,bfs优),又能解决普通dp难搞定的问 ...
- STM32F072从零配置工程-建立工程文件
快速建立工程有两种方法: 第一种是通过官方提供的外设库来搭建,好处是使用库函数,而不需要深入研究寄存器配置: 第二种是通过STM32CubeMX,好处是直观快速,可以直接帮你配置好功能和时钟,不过使用 ...
- 详叙BeanWrapper和PropertyDescriptor
每篇一句 千古以来要饭的没有要早饭的,知道为什么吗? 相关阅读 [小家Spring]聊聊Spring中的数据转换:Converter.ConversionService.TypeConverter.P ...
- STM32F072从零配置工程-基于HAL库的串口UART中断配置
先上一个采用串口直接传输的Demo: 此处的思路是完全采用HAL库来实现的,核心是运用HAL_UART_Transmit_IT和HAL_UART_Receive_IT两个函数来实现的,可以作为一个De ...
- APP爬虫(2)把小姐姐的图片down下来
APP爬虫(1)想学新语言,又没有动力,怎么办? 书接上文.使用appium在帖子列表界面模拟上划动作,捕捉不到列表的规律.上划结束后,列表只能获取到屏幕呈现的部分,而且下标还是从0开始的. 根据酸奶 ...
- linux初学者-系统启动故障篇
linux初学者-系统启动故障篇 在系统的操作中,有时会不小心误删或者操作失误使得系统启动不起来,下文将列举几种常见的系统启动失败的情况及解决的办法. 1.删除或者覆盖mbr的446个字节 mbr的4 ...
- CGI,WSGI区别
WSGI 参考link:https://jingtyu.gitbooks.io/learning-openstack/content/351-usgi.html(本人的gitbook) 个人理解: w ...
- 上传及下载github项目
1.上传本地项目 git init //把这个目录变成Git可以管理的仓库 git add README.md //文件添加到仓库 git add . //不但可以跟单 ...