- 浏览: 5097406 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
silence19841230:
先拿走看看
SpringBoot2.0开发WebSocket应用完整示例 -
wallimn:
masuweng 写道发下源码下载地址吧!三个相关文件打了个包 ...
SpringBoot2.0开发WebSocket应用完整示例 -
masuweng:
发下源码下载地址吧!
SpringBoot2.0开发WebSocket应用完整示例 -
masuweng:
SpringBoot2.0开发WebSocket应用完整示例 -
wallimn:
水淼火 写道你好,我使用以后,图标不显示,应该怎么引用呢,谢谢 ...
前端框架iviewui使用示例之菜单+多Tab页布局
时间:2016-02-26,欢迎转载,转载请保留本文地址: http://wallimn.iteye.com/blog/2279201
初学GeoServer、OpenLayers,折腾了几天,终于完成了一个简单的任务:使用GeoServer发布KML数据,WEB页面通过OpenLayers打开,实现显示框选的元素。简单记录一下过程,希望对摸索技术的朋友有所帮助。
GeoServer的版本为:2.7.5,OpenLayers的版本为:3.14.0。
框选的效果与OL的版本有较大关系,注意要使用最新版本。使用GeoServer自带的OL,框选的时候不显示选框。
一、启动GeoServer
使用GeoServer自带的数据做试验,选择一个点元素图层“tiger:poi”,在预览界面生成KML数据文件【All format下拉选框中选择KML(plain)】,将这个文件保存为poi.kml。
二、创建网页文件
进入Tomcat的工程目录,webapps\ROOT目录中,创建bs.html文件。文件内容主要来自于官网的例子,与地图显示相关的部分进行了相应的修改,如坐标系设置、边界、地图大小自适应等。
文件内容如下:
三、设置数据文件
将第一页生成的poi.kml文件,放到bs.html网页文件所在的目录。
四、通过浏览器访问网页
我的地址是http://localhost:8080/bs.html,请根据实际情况进行修改。框选时,按住Ctrl键(MAC系统,使用Command键)。
对不起,浅尝辄止地了解了一下,没有深入研究,也没有实际应用。不能回答你们的问题。
初学GeoServer、OpenLayers,折腾了几天,终于完成了一个简单的任务:使用GeoServer发布KML数据,WEB页面通过OpenLayers打开,实现显示框选的元素。简单记录一下过程,希望对摸索技术的朋友有所帮助。
GeoServer的版本为:2.7.5,OpenLayers的版本为:3.14.0。
框选的效果与OL的版本有较大关系,注意要使用最新版本。使用GeoServer自带的OL,框选的时候不显示选框。
一、启动GeoServer
使用GeoServer自带的数据做试验,选择一个点元素图层“tiger:poi”,在预览界面生成KML数据文件【All format下拉选框中选择KML(plain)】,将这个文件保存为poi.kml。
二、创建网页文件
进入Tomcat的工程目录,webapps\ROOT目录中,创建bs.html文件。文件内容主要来自于官网的例子,与地图显示相关的部分进行了相应的修改,如坐标系设置、边界、地图大小自适应等。
文件内容如下:
<!DOCTYPE html> <html> <head> <title>GeoStudy--by wallimn</title> <link rel="stylesheet" href="http://openlayers.org/en/v3.14.0/css/ol.css" type="text/css"> <script src="http://openlayers.org/en/v3.14.0/build/ol.js"></script> <style> .ol-dragbox { background-color: rgba(255, 255, 255, 0.4); border-color: rgba(100, 150, 0, 1); } </style> </head> <body> <div id="map" class="map" style="border: 1px solid red;"></div> <div id="info">No countries selected</div> <script type="text/javascript"> //by wallimn, http://wallimn.iteye.com, 2016-02-26 //以下两个参数,通过GeoServer,查看图层属性可获取 var projection = ol.proj.get('EPSG:4326'); var bounds = [ -74.0118315772888, 40.70754683896324, -74.00153046439813, 40.719885123828675 ]; var vectorSource = new ol.source.Vector({ //1.通过GeoServer生成的KML文件,保存到此网页文件所在的目录 //2.也可以直接使用生成这个文件的链接,动态生成数据文件 url : 'poi.kml', format : new ol.format.KML() }); var vectorLayer = new ol.layer.Vector({ source : vectorSource }); var map = new ol.Map({ layers : [ vectorLayer ], renderer : 'canvas', target : 'map', view : new ol.View({ projection : projection }) }); map.getView().fit(bounds, map.getSize()); // a normal select interaction to handle click var select = new ol.interaction.Select(); map.addInteraction(select); var selectedFeatures = select.getFeatures(); // a DragBox interaction used to select features by drawing boxes var dragBox = new ol.interaction.DragBox({ condition : ol.events.condition.platformModifierKeyOnly }); map.addInteraction(dragBox); var infoBox = document.getElementById('info'); dragBox.on('boxend', function() { // features that intersect the box are added to the collection of // selected features, and their names are displayed in the "info" // div var info = []; var extent = dragBox.getGeometry().getExtent(); vectorSource.forEachFeatureIntersectingExtent(extent, function( feature) { selectedFeatures.push(feature); info.push(feature.get('name')); }); if (info.length > 0) { infoBox.innerHTML = info.join(', '); } }); // clear selection when drawing a new box and when clicking on the map dragBox.on('boxstart', function() { selectedFeatures.clear(); infoBox.innerHTML = ' '; }); map.on('click', function() { selectedFeatures.clear(); infoBox.innerHTML = ' '; }); </script> </body> </html>
三、设置数据文件
将第一页生成的poi.kml文件,放到bs.html网页文件所在的目录。
四、通过浏览器访问网页
我的地址是http://localhost:8080/bs.html,请根据实际情况进行修改。框选时,按住Ctrl键(MAC系统,使用Command键)。
- src.rar (131.6 KB)
- 下载次数: 70
评论
6 楼
jcrack
2018-01-24
0123456789abcdefghij01234567890123456789abcdefghij0123456789
5 楼
jcrack
2018-01-23
0123456789abcdefghij0123456789
4 楼
yy64566496
2017-11-15
现在使用文件形式可以显示数据,但是第二点您说 使用生成文件的链接,这个是怎么得到链接的?
3 楼
wallimn
2017-03-24
巩大星 写道
就是用官方的例子中的kml文件,可以在openlayers中正常显示。但是用geoserver生成的kml文件,在openlayers中就无法显示。是不是因为geoserver中导出的kml里面的数据是链接形式的呢。
巩大星 写道
提供了一种很好地思路,但是为啥tomcat里面访问后,也没有背景地图,也没有点数据呢。
对不起,浅尝辄止地了解了一下,没有深入研究,也没有实际应用。不能回答你们的问题。
2 楼
巩大星
2017-03-18
就是用官方的例子中的kml文件,可以在openlayers中正常显示。但是用geoserver生成的kml文件,在openlayers中就无法显示。是不是因为geoserver中导出的kml里面的数据是链接形式的呢。
1 楼
巩大星
2017-03-17
提供了一种很好地思路,但是为啥tomcat里面访问后,也没有背景地图,也没有点数据呢。
发表评论
-
gradle编译错误:Could not find method compile() for arguments
2020-09-19 10:50 18176编译(IDEA+Gradle)一个别人的工程,出现一个 ... -
netty心跳检查之UDP篇
2019-09-15 08:50 2100部分UDP通信场景中,需要客户端定期发送心跳信息,以获取终 ... -
解决tomcat部署两个SpringBoot应用提示InstanceAlreadyExistsException
2019-06-30 11:49 3162两个SpringBoot应用部署在一个Tomcat中,单独 ... -
Eclipse配置MyBatis代码自动化功能
2019-06-29 10:16 16351.安装插件 Eclipse中,Help->Ecli ... -
vue.js中使用qrcode生成二维码
2019-05-20 00:00 7554一、安装包 npm install qrcodejs2 --s ... -
MySQL插入数据报错: Incorrect string value: '\xFD\xDE'
2019-03-31 23:19 1168我MySQL数据库用的uft-8字符集,插入数据一直很正常 ... -
vue自定义组件并双向绑定属性
2019-03-08 22:46 3201做了两个子组件,原理基本一样,一个是使用原生的select ... -
vue-router简单示例
2019-03-05 00:32 1083写个基本完整、稍有借鉴意义的示例,防止自己忘记。 &l ... -
“联通充值系统繁忙”轻松应对
2019-02-06 11:03 3893大过年的,联通充个值一直报“充值系统繁忙”。昨天晚上试了几 ... -
electron.js数据库应用---导航菜单(element-ui+mysql)
2019-02-05 21:33 2290一、环境搭建 略, ... -
electron.js数据库应用---入门(mysql+element-ui)
2019-01-27 23:19 7298我的机器:Windows10,64 ... -
SpringMVC 在controller层中注入成员变量request,是否线程安全
2018-12-17 21:17 2686@RestController public class ... -
VueJS 组件参数名命名与组件属性转化
2018-12-03 00:00 2001转自:https://www.cnblogs.com/meiy ... -
vue-resource拦截器实现token发送及检验自动化
2018-11-16 22:38 3035用了很长时间vue-resource,最近思考$http发 ... -
element-ui试用手记
2018-10-29 20:25 1678element-ui、iviewui都以vue.js为基础 ... -
iviewui中表格控件中render的使用示例
2018-07-07 16:46 9707示例了如何在表格中显示按钮,如何将代码转化为文字。 i ... -
Tomcat错误“Alias name tomcat does not identify a key entry”解决
2018-07-05 21:39 6165申请到了阿里云的证书后,下载、按照说明生成jks格式证书、 ... -
阿里云免费证书“fileauth.txt内容配置错误”解决
2018-07-05 20:43 5188最近研究微信小程序开发,上阿里云申请了个证书,使用文件验证 ... -
springboot2.0跨域配置
2018-07-04 22:11 5229springboot2.0跨域配置: 一、代码 ... -
微信小程序使用code换openid的方法(JAVA、SpringBoot)
2018-07-01 21:52 10290微信小程序序的代码中提示,使用code换取openid,但 ...
相关推荐
NULL 博文链接:https://wallimn.iteye.com/blog/2279574
geoserver配置及openlayers应用
uDig定制地图样式发布到Geoserver并使用Openlayers和Cesium验证,含文档和代码以及中国(世界)地图,SHP格式。
1,openlayers3 +geosever2.13.1,加载shp 图层组。 2,绘制点闪烁、扩散、动画
利用openlayers加载geoserver wfs服务发布的矢量图层。
1,geoserver:地图服务器, 2,map_shp:地图shp 数据 (全国省界+县道) 3,GeoserverToolDemo: a绘点 b点击地图街道选中要素 c框选要素。
利用下载好得离线google地图瓦片数据 结合openlayers接口进行加载显示 纯本地离线好得瓦片数据 运行没问题 当然把瓦片放在服务器上发布出来也是可以的 代码中修改url即可
ol(openlayers)加载天地图/加载中xyz格式瓦片/加载Geoserver发布的WMS图层, 可以一次性加载多个图层: /** * 添加离线图层(数组) * @param {Array} optsArray 选项 * @example * var opts = [{ * url: "ol....
OpenLayers 如何设死地图边界 3 谁写过openlayers解析xml 3 openlayer.popup 3 OpenLayers 怎么做字段标注 4 字段标注不是用OL做的,而是你在SLD中定义用数据表的哪个字段做标签就可以了 4 OpenLayers 中画最短轨迹 ...
—— 1.12 实现让openlayers支持gif图标 —— 1.13 地图叠加GeoServer发布的图层 —— 1.14 热力图 2.GeoServer 容器 —— 2.1 行政区划图层 3.Cesium 三维 —— 3.1 初见三维地图(HelloWord) 4.self-map源代码 ...
geoserver与OpenLayers配置
本文实例为大家分享了vue+openlayers加载geojson并实现点击弹窗教程,供大家参考,具体内容如下 第一步:安装vue-cli cnpm install -g @vue/cli 第二步:新建一个项目 1.新建项目 (vue-openlayers为项目名),并...
Geoserver与OpenLayers配置
geoserver配置及openlayers应用[汇编].pdf
该资源适合初级同学对geosever图层进行编辑的功能,可以下载使用,该资源能满足openlayers对geoserver图层的查询、编辑、新增,删除等操作
基于GeoServer和OpenLayers的WebGIS遥感服务系统的设计与实现,何鑫,,随着信息技术的飞速发展及空间地理数据量的空前增长,传统的地理信息系统已经无法满足空间地理数据的获取、处理、共享、存储等需
geoserver+postgis+openlayers 空间要素的增删改功能,具体还可参考https://blog.csdn.net/rrrrroy_Ha/article/details/90904465
使用openLayers调用geoServer发布的地图数据,并实现放大、缩小、移动、测距、测面积、弹出信息等功能; 需要修改geoServer路径,我的是安装在本地的; 还有部分功能未完成;