openlayers3 在地图上叠加WFS查询矢量图层

标签: openlayers3 地图 叠加 | 发表时间:2015-06-28 04:27 | 作者:longshengguoji
出处:http://blog.csdn.net

随着终端设备计算能力的加强,用户在使用地图的时候也需要越来越多的交互效果。比如现在很火的室内导航,为了获得好的用户体验,就需要当用户单击某一商店的时候该商店的颜色能相应的变化,这就需要叠加矢量图层。如何能在瓦片地图之上叠加矢量图层呢,这个就需要用到WFS查询。
我的思路是:基于WFS查询把得到需要矢量显示的图层中数据,然后再显示。具体思路为:
1.通过geoserver的WFS服务查询所需要矢量显示的数据信息
2.设置矢量数据的显示样式
3.openlayers添加矢量图层
4.设置鼠标移上去的颜色变化效果

  // Source retrieving WFS data in GML format using AJAX
    var vectorSource = new ol.source.ServerVector({
        format : new ol.format.WFS({
            featureNS : 'http://www.indoornavigation.com',
            featureType : 'tingchewei'
        }),
        loader : function(extent, resolution, projection) {
            extent = [ 120.220336914063, 30.2083336275748, 120.221145629883,
                    30.2088940588137 ];
            var url = 'http://10.16.36.101:8080/geoserver/wfs?'
                    + 'service=WFS&request=GetFeature&'
                    + 'version=1.1.0&typename=indoorNavigation:tingchewei';

            $.ajax({
                url : url
            }).done(function(response) {
                vectorSource.addFeatures(vectorSource.readFeatures(response));
            });
        },
        strategy : ol.loadingstrategy.createTile(new ol.tilegrid.XYZ({
            maxZoom : 19
        })),
        projection : 'EPSG:4326'
    });
// Vector layer
    var vectorChewei = new ol.layer.Vector({
        source : vectorSource,
        style : new ol.style.Style({
            fill : new ol.style.Fill({
                color : 'rgba(12, 25, 25, 0.1)'
            }),
            stroke : new ol.style.Stroke({
                color : 'black',
                width : 2
            })
        })
    });
    map.addLayer(vectorChewei);

var featureOverlay = new ol.FeatureOverlay({
        map : map,
        style : function(feature, resolution) {
            var text = resolution < 5000 ? feature.get('name') : '';
            if (!highlightStyleCache[text]) {
                highlightStyleCache[text] = [ new ol.style.Style({
                    stroke : new ol.style.Stroke({
                        color : '#f00',
                        width : 1
                    }),
                    fill : new ol.style.Fill({
                        color : 'rgba(255,0,0,0.6)'
                    }),
                    text : new ol.style.Text({
                        font : '12px Calibri,sans-serif',
                        text : text,
                        fill : new ol.style.Fill({
                            color : '#000'
                        }),
                        stroke : new ol.style.Stroke({
                            color : '#f00',
                            width : 3
                        })
                    })
                }) ];
            }
            return highlightStyleCache[text];
        }
    });
作者:longshengguoji 发表于2015/6/27 20:27:38 原文链接
阅读:0 评论:0 查看评论

相关 [openlayers3 地图 叠加] 推荐:

openlayers3 在地图上叠加WFS查询矢量图层

- - CSDN博客推荐文章
随着终端设备计算能力的加强,用户在使用地图的时候也需要越来越多的交互效果. 比如现在很火的室内导航,为了获得好的用户体验,就需要当用户单击某一商店的时候该商店的颜色能相应的变化,这就需要叠加矢量图层. 如何能在瓦片地图之上叠加矢量图层呢,这个就需要用到WFS查询. 我的思路是:基于WFS查询把得到需要矢量显示的图层中数据,然后再显示.

图层叠加混合模式在网页设计中的应用

- - 视觉设计 - UCD大社区
很多飞鱼的声纳的读者常会询问我类似于上图中的按钮的光效是怎么做出来的. 其实非常简单,新建图层,笔刷或椭圆画出白色,高斯模糊,再将图层混合模式更改为图层叠加就可以了. 但是这篇文章里我们不讨论具体的技术,而来看看如同上面的按钮通过白色的叠加创建出按钮的高光,我们来了解一下图层叠加模式在网页设计中的应用,再通过不同的实例来深层次的了解图层叠加混合模式的基本效果,将其更自由的应用于我们的设计中.

【CDC品牌维生素】颜色叠加在品牌中的运用

- - 腾讯CDC
  我们通常研究色彩,去理解色彩的情感时,是为了想通过色彩这一具有强烈表现力的视觉因素来唤起观者的各种情绪,通过色彩表达设计者想要去反应的情感. 而色彩的表现手法和方式,往往很少会有设计师去注意. 而本文,主要通过一些优秀的品牌设计案例向大家介绍色彩叠加在品牌设计中的运用.    所谓叠加,即我们预先生成出来的图形、属性特征等被调用叠合在一个基本图形上的过程或方法.

三幅地图

- duyao678 - 格致
1901年的海底电报电话线地图. 15世纪到19世纪的全球海上贸易地图. 三者的相似性可能是因为路线和需求,以前是货物,现在则是信息,中国的国际信息需求不高:-).

“You Are Here”地图

- 欣 - Solidot
一幅英文标注的中文地铁地图(jpg),所有的中文地点名称下面的英文译名都叫“You Are Here”. 如果你是一位外国游客,你怎么可能知道自己在哪里,要去哪里. 一位Reddit用户发帖求救,称自己被北京地铁地图搞糊涂了.

百度地图推出卫星地图

- 丁丁 - 月光博客
  据百度地图微博报道,11月15日,百度地图正式上线卫星地图功能,目前首批覆盖的城市包括北京、上海、广州、深圳等35个城市,由中国四维提供影像数据.   卫星地图是百度地图新增加的地图浏览模式,目前用户可以在百度地图中选择使用“地图”、“卫星”和“三维”三种不同的视图. 通过新增的的“卫星地图”模式,用户可以看到真实的遥感卫星图像,查看到原有地图上无法涵盖的细节.

地图的垄断

- ning - 月光微博客
  看了国家测绘局公布了46家无地图资质企业的清单,感觉全是瞎扯蛋,这些所谓的曝光网站全部都是下游的地图应用商,如果这样的网站或企业都要查处,那基本上中国没有合法做地图应用的网站了. 这些网站和企业都有个共同特点,就是使用谷歌地图的API,国家测绘局不敢叫板谷歌,就拿那些网站穷开心啊.   我觉得中小型生活类地图网站没有必要去申请牌照,申请的话就相当于默认其合法性,之后就是他们想怎么搞你就怎么搞你,全世界就中国一个国家做地图网站需要牌照,连北朝鲜做地图网站都不需要牌照,我也想知道国家测绘局有没有能力进行跨部门管理,干涉工信部的职责,让那些不属于自己管辖的网站断网.

地图的隐喻

- hosven - 维舟试望故国
1950年秋,当军队从东面攻入昌都的时候,看到这个布满乞丐和污水坑的狭小城镇,许多年轻的战士颇感意外. 有人事后回忆:“看看周围破烂不堪的矮小的房屋和狭窄的街道,真不敢相信这就是地图上划成一个大圈的昌都. 我们想象中的昌都一定是个像样的中等城市,各种建筑鳞次栉比. 收藏到:Del.icio.us.

联通薄膜卡叠加移动号卡上 涉灰色地带但不违规

- ZeeJee - cnBeta.COM
新浪科技讯 9月26日消息,知情人士透露,日前传出的联通将推一种薄膜卡,其实际原理应该是类似于将两个SIM卡放到一个卡槽里,这样可实现将联通的SIM卡叠加到移动的SIM卡上,这种技术有拼抢中国移动用户之嫌,但很难说有违规之处.