专栏首页跟牛老师一起学WEBGISol4中实现只能查看用户权限所在区的地图

ol4中实现只能查看用户权限所在区的地图

概述

我们经常会碰到这样的需求:北京的用户只能查看北京的地图,天津的只能看天津的地图……这里面涉及到了一个地图的访问权限问题,要实现这样的功能如果用服务+过滤的方式比较繁琐,所以本文讲述一种比较简单的实现方式。

输入与输出

输入:地区边界+地图 输出:按照地区边界裁剪的地图,并显示地区边界

实现

1、技术关键点 实现此功能中,包含几个关键技术点: 1)地图坐标转换为屏幕坐标;

map.getPixelFromCoordinate(coord);

2)canvas绘图中save()、restore()和clip();

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.save();

ctx.stroke();
ctx.clip();

ctx.restore();

2、实现思路 用户登录进来后获取行政区边界,再根据行政区边界进行地图裁剪。

3、地图裁剪代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Ol3 wms</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;
        }
    </style>
    <script type="text/javascript" src="../../plugin/ol4/ol.js"></script>
    <script type="text/javascript" src="../../plugin/jquery/jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
        var map;
        function init(){
            var vec_c = getTdtLayer("vec_w");
            var cva_c = getTdtLayer("cva_w");
            map = new ol.Map({
                controls: ol.control.defaults({
                    attribution: false
                }),
                target: 'map',
                layers: [vec_c, cva_c],
                view: new ol.View({
                    center: [12967248.127726289, 4891245.816671869],
                    zoom:9,
                    minZoom:0,
                    maxZoom:18
                })
            });

            function getTdtLayer(lyr){
                var url = "http://t{0-7}.tianditu.com/DataServer?T="+lyr+"&X={x}&Y={y}&L={z}";
                var layer = new ol.layer.Tile({
                    source: new ol.source.XYZ({
                        url:url
                    })
                });
                return layer;
            }

            //定义裁剪边界
            var coord = [[[117.315375,40.181212],[117.367916,40.135762],[116.751758,40.002595],[116.754136,39.870341],[116.913383,39.804999],[116.901858,39.680614],[116.788145,39.56255],[116.535646,39.590346],[116.392103,39.491124],[116.4293,39.433841],[116.387072,39.417336],[116.237232,39.476253],[116.172242,39.578854],[115.728745,39.479123],[115.610225,39.588658],[115.508537,39.59137],[115.416399,39.733407],[115.416624,39.776734],[115.550565,39.772964],[115.408433,40.015829],[115.85422,40.144999],[115.922315,40.216777],[115.708758,40.499032],[115.89819,40.585919],[116.03778,40.577909],[116.208725,40.741562],[116.454984,40.739689],[116.297615,40.910402],[116.43816,40.870116],[116.405424,40.94854],[116.537137,40.9661],[116.621495,41.057333],[116.703349,40.853574],[116.93405,40.675155],[117.454502,40.647216],[117.387854,40.533274],[117.166811,40.503979],[117.164198,40.373887],[117.315375,40.181212]]];
            var clipgeom = new ol.geom.Polygon(coord);
            //将经纬度坐标转换为map对应的坐标
            clipgeom = clipgeom.transform("EPSG:4326", map.getView().getProjection());

            map.on('precompose', clip);

            function clip(evt) {
                var canvas=evt.context;
                canvas.save();
                var coords = clipgeom.getCoordinates();
                canvas.beginPath();
                createClip(coords[0], canvas);
                canvas.clip();
            }

            function createClip(coords, canvas) {
                for (var i = 0, cout = coords.length; i < cout; i++) {
                    //获取屏幕坐标
                    var screenCoord = map.getPixelFromCoordinate(coords[i]);
                    var x = screenCoord[0],
                        y = screenCoord[1];
                    if (i === 0) {
                        canvas.moveTo(x, y);
                    } else {
                        canvas.lineTo(x, y);
                    }
                }
                canvas.closePath();
                //设置边框
                canvas.strokeStyle = "red";
                canvas.lineWidth = 2;
                canvas.stroke();
            }
            map.on('postcompose', function(event) {
                var ctx = event.context;
                ctx.restore();
            });
        }
    </script>
</head>
<body onLoad="init()">
<div id="map">
</div>
</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • ol中闪烁点动画的实现

    实现如图的动画,可以用两种思路: 1.overlay+css3动画实现; 2.canvas动画实现。

    lzugis
  • 实现地图天气预报的显示

    概述:很多时候,会用到地图与天气预报的相结合显示,本文结合web天气插件,实现地图天气预报的结合现实。

    lzugis
  • Arcgis for js实现北京地铁的展示

    在chrom中输入地址http://map.baidu.com/subways/index.html?c=beijing

    lzugis
  • 使用C4C ABSL获得当前登录用户所在的organization unit信息

    Jerry Wang
  • 实现地图天气预报的显示

    概述:很多时候,会用到地图与天气预报的相结合显示,本文结合web天气插件,实现地图天气预报的结合现实。

    lzugis
  • JavaScript初级玩法(4)—两数交换的多种方法

    版权声明:本文为博主原创文章,欢迎转载,转载请注明出处。 https://blog.csdn...

    FEWY
  • canvas练习

    xing.org1^
  • 前端识别验证码思路分析

    相信很多前端同学对于二维码识别、图像对比等这类高大上的图像识别技术望而生畏,觉得此类识别技术只能通过更加底仓的高级语言才能实现(诸如c等),本文试图从前端的角度...

    IMWeb前端团队
  • 前端识别验证码思路分析

    相信很多前端同学对于二维码识别、图像对比等这类高大上的图像识别技术望而生畏,觉得此类识别技术只能通过更加底仓的高级语言才能实现(诸如c等),本文试图从前端的角度...

    腾讯IVWEB团队
  • 前端识别验证码思路分析

    对于canvas来说,主要是两个方法对图片处理比较重要,一个是通过html5 canvas的 getImageData 方法获取图片的像素信息,可以很方便...

    IMWeb前端团队

扫码关注云+社区

领取腾讯云代金券