ol3 Demo3 ----加载gpx,geojson格式的数据

下面是pgx格式的数据效果展示

核心代码:

      var gpx = new ol.layer.Vector({
        title:‘GPX‘,
        source: new ol.source.Vector({
          url: ‘cycling-vietnam-without-baggage.gpx‘,
          format: new ol.format.GPX()
        }),
        style: function(feature) {
          return style[feature.getGeometry().getType()];
        }
      });

说明:cycling-vietnam-without-baggage.gpx 是一个本地文件,其中Crome不支持上述加载,可以使用火狐加载查看。



下面是geojson格式的效果图:

核心代码:

 var vectorLayer = new ol.layer.Vector({
        source: new ol.source.Vector({
          url: ‘test.geojson‘,
          format: new ol.format.GeoJSON()
        }),
        style: function(feature) {
          style.getText().setText(feature.get(‘name‘));
          return style;
        }
      });

说明:同样crome浏览器不支持,使用火狐浏览器可以查看。

原文地址:https://www.cnblogs.com/id-666/p/8453784.html

时间: 2024-10-12 15:40:43

ol3 Demo3 ----加载gpx,geojson格式的数据的相关文章

ol3 Demo1 ----加载geoserver发布的地图数据

前提:geoserver已经发布数据. 必要条件:导入js库(下载地址)         下面是效果图 下面是代码 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta charset='utf-8'/> <script src="js/ol.js" type="text/javascript&quo

只用css实现“每列四行,加载完一列后数据自动填充到下一列”的效果

只用css实现“每列四行,加载完一列后数据自动填充到下一列”的效果.这个题目用图表示如下: 如果将题目换成“只用css实现每行四列,加载完一行后数据自动填充到下一行”,那这个问题就简单多了,相信大家都能使用多种方法实现.但现在这个问题该怎么去解决呢. 对了这个题目,似乎不是那么好解决,毕竟像这类问题我们都是使用js或者模版辅助实现的. 这个题目难点在哪儿? 对动态添加的数据只用css实现这个效果,那就意味着除了动态添加数据外,不可能改变现有的文档结构.什么意思呢?比如对于这种实现,我们可以使用u

Javascript加载talbe(包含分页、数据下载功能)

效果图如下: 首先简单说明一下,后面会给所涉及到的代码都贴上来的. 1.excel图标是一个用户控件,用来触发下载 2.首页.上页......每页多少条,这一块是一个整体,你可以选择放置在表格下面,或者表格上面都可以 3.表格则也是单独的一个,自己任意设置位置 4.复选框是否显示,自己设置,并可设置绑定的值,并有自带的方法可供你用于获取选中的复选框的对象跟值 5.表格的单行.双行.点击.悬浮.标题栏.表格的样式,都可以通过设置参数来修改,图为自带的效果 6.分页默认每页10行,分页的检测.复选框

纯javascript写的table加载,包含分页、数据下载功能

直接先上效果图看看先. 首先简单说明一下,后面会给所涉及到的代码都贴上来的. 1.excel图标是一个用户控件,用来触发下载 2.首页.上页......每页多少条,这一块是一个整体,你可以选择放置在表格下面,或者表格上面都可以 3.表格则也是单独的一个,自己任意设置位置 4.复选框是否显示,自己设置,并可设置绑定的值,并有自带的方法可供你用于获取选中的复选框的对象跟值 5.表格的单行.双行.点击.悬浮.标题栏.表格的样式,都可以通过设置参数来修改,图为自带的效果 6.分页默认每页10行,分页的检

.NET Core配置文件加载与DI注入配置数据

.NET Core配置文件 在以前.NET中配置文件都是以App.config / Web.config等XML格式的配置文件,而.NET Core中建议使用以JSON为格式的配置文件,因为使用起来更加方面灵活,而且可以使用.NET Core中的DI注入配置数据. 使用: 1 var config = new ConfigurationBuilder() 2 .AddInMemoryCollection() //将配置文件的数据加载到内存中 3 .SetBasePath(Directory.Ge

懒加载(延迟加载)之后,在使用数据过程中容易出现的bug

在UI中,使用懒加载,也就是延迟加载来加载数据的时候,总是会面临几个问题? 如:1. >为什么先创建NSArray属性? 2. >为什么重写NSArray的get方法? 3.>为什么要判断是否为空? 4.>为什么下方代码"//1"这里不用NSString stringWithFormat: 而"//2"这里要使用? 5.>同时"//2"这里为什么使用的是%ld 来作为占位符? 这些问题不搞懂,懒加载就很难通透,  代

AsyncTask异步加载和HttpURLConnection网络请求数据

//获得网络数据    private void huodeshuju() { //这里是使用线程,已注释掉        /*new Thread(){            public void run() {                                try {                    URL url=new URL(urlPath);                    HttpURLConnection urlConnection=(HttpURL

xcode运行到真机报错原因之加载图片保存格式问题

当出现以上错误的时候: 是提示的png并不是ps导出的png,而是手动修改jpeg后缀名为png,在模拟器上不会报错,但在真机,不 识别这种所谓  的“png”图片.(随便批下美工) 这是因为png图片的问题,png图片在存储的时候有一个NOT INTERLACED/INTERLACED(无交错/交错)的选项,因为设计师在切图的时候的存储错误,图片在XCode中就会报这个错误,但是还是会编译成功并运行,请设计师将图片重新按无交错存储就行了.

jsp页面加载出错或者datagrid有数据但页面不展示

(一) Uncaught SyntaxError: Invalid or unexpected token                                VM4337:2 at new Function () at Object.parseOptions (jquery.easyui.min.js:58) at Function.$.fn.linkbutton.parseOptions (jquery.easyui.min.js:1004) at HTMLAnchorElemen