美文网首页GISGIS之家Geomatics(GIS,GPS,RS,Surveying)
openlayers3中实现WMS点图层的事件相应

openlayers3中实现WMS点图层的事件相应

作者: 牛老师讲webgis | 来源:发表于2017-10-11 20:16 被阅读58次

    概述

    本文讲述如何在Openlayers3中实现WMS点图层的展示,并实现鼠标移动经过该点时展示相关信息,并可点击。

    效果

    LZUGIS

    实现代码

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Ol3 draw</title>
        <link rel="stylesheet" type="text/css" href="../../../plugin/ol4/ol.css"/>
        <style type="text/css">
            body, #map {
                border: 0px;
                margin: 0px;
                padding: 0px;
                width: 100%;
                height: 100%;
                font-size: 13px;
                overflow: hidden;
            }
            .city-name{
                z-index: 9;
                background: #ffffff;
                border: 1px solid #1bcbb4;
                border-radius: 3px;
                padding: 2px;
                position: absolute;
            }
        </style>
        <script type="text/javascript" src="../../../plugin/ol4/ol.js"></script>
        <script type="text/javascript" src="../../../plugin/jquery/jquery-1.8.3.js"></script>
        <script type="text/javascript">
            var map;
            function init(){
                var untiled = new ol.layer.Image({
                    source: new ol.source.ImageWMS({
                        ratio: 1,
                        url: 'http://localhost:6080/geoserver/bj_grid/wms',
                        params: {'FORMAT': 'image/png',
                            VERSION: '1.1.1',
                            LAYERS: 'bj_grid:capital'
                        },
                        serverType: 'geoserver'
                    })
                });
                var center = ol.proj.transform([103.847, 36.0473],'EPSG:4326','EPSG:3857');
                map = new ol.Map({
                    controls: ol.control.defaults({
                        attribution: false
                    }),
                    target: 'map',
                    layers: [untiled],
                    view: new ol.View({
                        projection: new ol.proj.Projection({
                            code: 'EPSG:3857',
                            units: 'm'
                        }),
                        center: center,
                        zoom: 5
                    })
                });
                map.on('pointermove', function(evt) {
                    var view = map.getView();
                    var viewResolution = view.getResolution();
                    var _data = [...];
                    var _coord = evt.coordinate;
                    var _c = new ol.geom.Circle(_coord, viewResolution*6);
                    for(var i=0;i<_data.length;i++){
                        var _d = _data[i];
                        var _lonlat = [_d.properties.x, _d.properties.y];
                        coord = ol.proj.transform(_lonlat,'EPSG:4326','EPSG:3857');
                        if(_c.intersectsCoordinate(coord)){
                            map.getViewport().style.cursor="pointer";
                            addCityName(_d);
                            break;
                        }else{
                            flag = false;
                            $(".city-name").remove();
                            map.getViewport().style.cursor="default";
                        }
                    }
                });
                function addCityName(d){
                    $(".city-name").remove();
                    var _scrPt = map.getPixelFromCoordinate(coord);
                    var _label = $("<div/>").addClass("city-name").css({
                        "top":_scrPt[1]+"px",
                        "left":_scrPt[0]+16+"px"
                    }).html(d.properties.x.toFixed(3));
                    map.getViewport().appendChild(_label[0]);
                }
            }
        </script>
    </head>
    <body onLoad="init()">
    <div id="map">
    </div>
    </body>
    </html>
    

    类型 内容
    qq 1004740957
    公众号 lzugis15
    e-mail niujp08@qq.com
    webgis群 1004740957
    Android群 337469080
    GIS数据可视化群 458292378

    技术博客
    CSDN:http://blog.csdn.NET/gisshixisheng
    博客园:http://www.cnblogs.com/lzugis/
    在线教程
    http://edu.csdn.Net/course/detail/799
    Github
    https://github.com/lzugis/
    联系方式

    类型 内容
    qq 1004740957
    公众号 lzugis15
    e-mail niujp08@qq.com
    webgis群 1004740957
    Android群 337469080
    GIS数据可视化群 458292378
    LZUGIS

    相关文章

      网友评论

        本文标题:openlayers3中实现WMS点图层的事件相应

        本文链接:https://www.haomeiwen.com/subject/tcqgyxtx.html