OpenLayer加载WFS_openlayer 加载wfs bbox为nan-程序员宅基地

技术标签: OpenLayer3 and 4  OpenLayer  

更新于2019-03-06(下面的这种配置方式仅针对jetty-servlets-9.2.13.v20150730.jar这个版本,geoserver2.15、2.14、2.13版本都可以使用这个

关于使用Geoserver上传wfs数据,百度有许多教程在这里不在陈述,

一、什么是跨域

浏览器从一个域名的网页去请求另一个域名的资源时,域名、端口、协议任一不同,都是跨域
域名:
主域名不同 http://www.baidu.com/index.html –>http://www.sina.com/test.js
子域名不同 http://www.666.baidu.com/index.html –>http://www.555.baidu.com/test.js
域名和域名ip http://www.baidu.com/index.html –>http://180.149.132.47/test.js
端口:
http://www.baidu.com:8080/index.html–> http://www.baidu.com:8081/test.js
协议:
http://www.baidu.com:8080/index.html–> https://www.baidu.com:8080/test.js
备注:
1、端口和协议的不同,只能通过后台来解决
2、localhost和127.0.0.1虽然都指向本机,但也属于跨域

二、如何解决跨域问题

在这里我们使用cros解决具体流程:

针对geoserver2.9版本以上的设置

1、从http://central.maven.org/maven2/org/eclipse/jetty/jetty-servlets/上面下载

jetty-servlets-9.2.13.v20150730.jar

2、将下载好的 jetty-servlets-9.2.13.v20150730.jar 放到webapps/geoserver下的lib中

3、配置下webapps/geoserver/web.xml:

在filter最后面加上

<filter>
        <filter-name>cross-origin</filter-name>
        <filter-class>org.eclipse.jetty.servlets.CrossOriginFilter</filter-class>
 </filter>

filter-mapping最后面加上

    <filter-mapping>
        <filter-name>cross-origin</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

4、重启geoserver

三、加载示例

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>wfs demo</title>
    <link href="Script/ol.css" rel="stylesheet" />
    <script src="Script/ol.js"></script>
    <script src="../Scripts/jquery-1.7.1.js"></script>
</head>

<body>

  <div id="map" style="width:100%;height:100%;"></div>

  <script>
      var vector = new ol.layer.Vector({
          source: new ol.source.Vector({
              format: new ol.format.GeoJSON(),
              url: 'http://localhost:8080/geoserver/wfs?service=wfs&version=1.1.0&request=GetFeature&typeNames=nyc_roads:nyc_roads&outputFormat=application/json&srsname=EPSG:4326'
          }),
          style: function (feature, resolution) {
              return new ol.style.Style({
                  stroke: new ol.style.Stroke({
                      color: 'blue',
                      width: 1
                  })
              });
          }
      });

      var map = new ol.Map({
          layers: [new ol.layer.Tile({
              source: new ol.source.OSM()
          }), vector],
          target: 'map',
          view: new ol.View({
              center: [-73.99710639567148, 40.742270050255556],
              maxZoom: 19,
              zoom: 14,
              projection: 'EPSG:4326'
          })
      });
      map.on('pointermove', function (event) {
          //先移除样式
          var total = vector.getSource().getFeatures();
          for (var i in total) {
              total[i].setStyle(new ol.style.Style({
                  stroke: new ol.style.Stroke({
                      color: 'blue',
                      width: 1
                  })
              }));
          }
          //获得鼠标移动上的feature
          map.forEachFeatureAtPixel(event.pixel, function (feature) {
              //设置高亮显示填充颜色

              feature.setStyle(new ol.style.Style({
                  stroke: new ol.style.Stroke({
                      color: 'red',
                      width: 3,
                  }),
                  fill: new ol.style.Fill({
                      color: 'red'
                  })

              }));
          });
      });
  </script>

</body>

</html>

数据加载代码参考了扯淡大叔的文章,实现的效果实鼠标掠过要素实现高亮显示,数据用的是官方geoserver给的数据。

四、总结

代码加载很容易就是在跨域请求的时候会遇到了一些问题,关于在geoserver数据的上传的使用的给i哦城中还不太熟练,用惯了arcserver这个还不太习惯,也有些加载解决跨域问题,比如,C#代理或者java代理,这些需要声明一般处理程序(C#),用的时候得需要加上比较麻烦,还有注释那个jsonp方法,虽然方便只能用于get请求,如果url太长也不行。

 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_40184249/article/details/80957873

智能推荐

分治算法实现两个n位的正整数相乘_两个n整数相乘-程序员宅基地

文章浏览阅读4.8k次,点赞4次,收藏33次。分治算法实现两个n位的正整数相乘 分治算法的基本思想是将一个规模为N的问题分解为K个规模较小的子问题,这些子问题相互独立且与原问题性质相同,最后按原问题的要求,将子问题的解逐层合并构成原问题的解,快速排序算法便是基于分治策略的一种排序方法。这里要讲的是利用分治算法来实现两个n位的正整数相乘:具体思路给定两个均为n位的十进制正整数x、y,将其拆分为左右各一半的xl、xr、yl、yr。具体表示如_两个n整数相乘

add结果 bigdecimal_Java BigDecimal add()用法及代码示例-程序员宅基地

文章浏览阅读935次。java.math.BigDecimal.add(BigDecimal val)用于计算两个BigDecimal的算术和。此方法用于查找大量算术加法,该算术加法远大于Java的最大数据类型double的范围,而不会影响结果的精度。此方法对当前的BigDecimal进行操作,调用该方法并将BigDecimal作为参数传递。Java中有两种add方法的重载,如下所示:add(BigDecimal va..._, both 'add(bigdecimal)' and 'add(bigdecimal, mathcontext)' match

基于二维伽马函数的光照不均匀图像自适应校正算法-程序员宅基地

文章浏览阅读5.3k次,点赞9次,收藏96次。关于数字图像处理:本文介绍一种用于解决光照不均匀的图像自适应校正算法。光照不均匀其实是非常常见的一种状况,为了解决图像曝光不足,或者不均衡而提出来的解决方案之一,关于【Retiex解决方案请查看】。论文原文: 点击查看算法原理论文使用了Retinex的多尺度高斯滤波求取「光照分量」,然后使用了「二维Gamma函数」针对原图的「HSV空间的V(亮度)分量」进行亮度改变,得到结果。具体实现流程如下:Mat RGB2HSV(Mat src) { int row = src.rows; int co_基于二维伽马函数的光照不均匀图像自适应校正算法

Java-各种锁_枷锁 java-程序员宅基地

文章浏览阅读174次。偏向锁Hotspot的作者经过以往的研究发现大多数情况下锁不仅不存在多线程竞争,而且总是由同一线程多次获得,于是引入了偏向锁。偏向锁会偏向于第一个访问锁的线程,如果在接下来的运行过程中,该锁没有被其他的线程访问,则持有偏向锁的线程将永远不需要触发同步。也就是说,偏向锁在资源无竞争情况下消除了同步语句,连CAS操作都不做了,提高了程序的运行性能。大白话就是对锁置个变量,如果发现为true,代表资源无竞争,则无需再走各种加锁/解锁流程。如果为false,代表存在其他线程竞争资源,那么就会走后..._枷锁 java

unity 关于射箭时候抛物线,计算_unity射箭-程序员宅基地

文章浏览阅读1k次。记录一下,using System.Collections;using System.Collections.Generic;using UnityEngine;public class BulletTest : MonoBehaviour{ private Vector2 target_pos; private Rigidbody2D _rigidbody;..._unity射箭

chrome 插件 html转pdf,利用Chrome Headless模式,网页转PDF-程序员宅基地

文章浏览阅读1.9k次。原来一直是用wkhtmltopdf来将网页打印成PDF文件,它是基于QtWebKit内核的。但最近有个很奇怪的字体问题困扰着我。所以找找其它能在Linux下实现相同功能的方法。然后发现Chrome Headless模式可以实现我想要的,而且用Chrome来实现,可以排除掉很多Bug怀疑。Chrome Headless模式相当于一个没有界面的浏览器,能实现很多功能,能实现pdf打印,截图等,扩展下,..._浏览器导出为pdf或图片的插件

随便推点

垃圾收集器与内存分配策略_desired survivor size 52428800 bytes, new threshol-程序员宅基地

文章浏览阅读139次。3.1 概述说起垃圾收集(Garbage Collection,GC),大部分人都把这项技术当做Java语言的伴生产物。事实上,GC的历史远远比Java久远,1960年诞生于MIT的Lisp是第一门真正使用内存动态分配和垃圾收集技术的语言。当Lisp还在胚胎时期时,人们就在思考GC需要完成的三件事情:哪些内存需要回收?什么时候回收?如何回收?经过半个世纪的发展,内存的动态分配与内存回收技术已经相当..._desired survivor size 52428800 bytes, new threshold 15

Php 网站性能优化,关于ThinkPHP中网站性能优化研究-程序员宅基地

文章浏览阅读106次。轻易不要用多表查询,如下代码以及模拟数据测试结果能让你清晰地认识到多表查询,join,left join,inner join的可怕之处,能不用就不要用/*** 获取持有偶像币总估值* @param $uid* @return mixed* @author zzl [email protected]* 时间:2019.06.18*/public function getHasCoinExpect($ui..._bc_add

IntelliJ IDEA隐藏不想看到的文件或文件夹-程序员宅基地

文章浏览阅读1.9k次。打开IntelliJ IDEA,File -> Settings -> Editor -> File Types在红框部分加上你想过滤的文件或文件夹名转载于:https://www.cnblogs.com/warehouse/p/7018875.html_idea 隐藏文件

达观杯linghtgbm(五)-程序员宅基地

文章浏览阅读253次。达观杯linghtgbm1.linghtgbm2.linghtgbm代码实现1.linghtgbmLightGBM是个快速的,分布式的,高性能的基于决策树算法的梯度提升框架。可用于排序,分类,回归以及很多其他的机器学习任务中。在竞赛题中,我们知道XGBoost算法非常热门,它是一种优秀的拉动框架,但是在使用过程中,其训练耗时很长,内存占用比较大。在2017年年1月微软在GitHub的上开源了..._linghtgbm

夜光带你走进C# 游戏开发等(六十四)擅长的领域_c#开发领域-程序员宅基地

文章浏览阅读106次。夜光序言:从前之前,梦心梦如烟,恰如西风恨柳边。白发又添,不归思故颜,莫言重逢泪双面……正文:using System;using System.Collections.Generic;using System.Linq;using System.Tex..._c#开发领域

ClickHouse表引擎(ClickHouse核心)_clickhouse 殷勤-程序员宅基地

文章浏览阅读367次。表引擎(即表的类型)决定了:1)数据的存储方式和位置,写到哪里以及从哪里读取数据2)支持哪些查询以及如何支持。3)并发数据访问。4)索引的使用(如果存在)。5)是否可以执行多线程请求。6)数据复制参数。ClickHouse的表引擎有很多,下面只介绍其中几种,对其他引擎有兴趣的可以去查阅官方文档:https://clickhouse.yandex/docs/zh/operations/table_engines/TinyLog最简单的表引擎,用于将数据存储在磁盘上。每列都存储在单独的压缩文件_clickhouse 殷勤