【第22期】观点:IT 行业加班,到底有没有价值?

ol2已知经纬度在图层上画圆

原创 2016年06月02日 09:55:49

先上效果哇

途中打标记的图例形以及蓝色的圈圈还有黑色的文字编号都是根据数据库查询出来的数据话上去的




以下是代码:


var pointlayer = new OpenLayers.Layer.Vector("问题点图层");//图例图层

var criclelayer= new OpenLayers.Layer.Vector("聚类图层");//蓝色圈圈图层




function addPointPolyLayer(result){
        eu.loading();

//每次之前必须删除原先的features
        pointlayer.removeAllFeatures();

//给图图层增加样式getStyle(),样式可以使图片,也可以是几何图形
        pointlayer.styleMap =   new OpenLayers.StyleMap({"default": getStyle(),"select": selectStyle})  ;
        criclelayer.removeAllFeatures();

//给图层增加样式getStyle2()只是为了给图层添加文字编号(label属性)
        criclelayer.styleMap =   new OpenLayers.StyleMap({"default": getStyle2(),"select": selectStyle})  ;
        $.each(result, function (index, obj) {

//遍历列表
            var attributes = {
                vcproblemnum: obj.vcproblemnum,
                intdateid: obj.intdateid,
                intcityid: obj.intcityid,
                vcgridid:obj.vcgridid,
                intjlcount:obj.intjlcount,
                vcjltype:obj.vcjltype,
                fjlradiu:obj.fjlradiu,
                vcjlplbnum:obj.vcjlplbnum,
                fjllonb:obj.fjllonb,
                fjllat:obj.fjllat,
                vcplbtype:obj.vcplbtype,
                flonb:obj.flonb,
                flat:obj.flat ,
                intplbtype:obj.intplbtype
            };
            var point = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(obj.flonb, obj.flat).transform("EPSG:4326", "EPSG:900913"));
            $.extend(point.attributes, attributes);
            pointlayer.addFeatures(point);


            var epsg4326 = new OpenLayers.Projection("EPSG:4326");
            var projectTo =  new OpenLayers.Projection("EPSG:900913");
            var lonLat = new OpenLayers.LonLat(obj.fjllonb ,obj.fjllat).transform(epsg4326, projectTo);
            var point = new OpenLayers.Geometry.Point(lonLat.lon, lonLat.lat);


             //画圆方法createRegularPolygon,参数参考api,radiu半径

            var mycircle = OpenLayers.Geometry.Polygon.createRegularPolygon

                    (
                            point,
                            radiu,
                            40,
                            0
                    );
            var featurecircle = new OpenLayers.Feature.Vector(mycircle);
            $.extend(featurecircle.attributes, attributes);
            criclelayer.addFeatures([featurecircle]);
        });

//定位图层,不重新定位图层是不会显示出来的
        if(result.length>0){
            map.setCenter(new OpenLayers.LonLat(result[0].flonb, result[0].flat).transform("EPSG:4326", "EPSG:900913"), 18);
        }   else{
            map.setCenter(new OpenLayers.LonLat(113.32526, 22.91602).transform("EPSG:4326", "EPSG:900913"), 18);
        }
        eu.closeLoading();
    }





 //获取样式
    function getStyle() {
        var style = new OpenLayers.Style(
                {
                    externalGraphic : '/ltemr/static/image/icon-1.png',
                    graphicWidth : 15,
                    graphicHeight : 15,
                    graphicYOffset : -15,
                    graphicOpacity : 0.8,
                    graphicZIndex : 0,
                    cursor : "pointer"
                },{
                    rules: [
                        new OpenLayers.Rule({
                            elseFilter: true,
                            symbolizer: {
                                externalGraphic : '/ltemr/static/image/icon-1.png',
                                graphicWidth : 15,
                                graphicHeight : 15,
                                graphicYOffset : -15,
                                graphicOpacity : 0.8,
                                graphicZIndex : 0,
                                cursor : "pointer"
                            }
                        })
                    ]
                }
        );
//indexList 样式列表       

        if(indexList){

            for(var i=0;i<indexList.length;i++){
                var srcpaht= indexList[i].vcselect
                var  rule = new OpenLayers.Rule({
                    filter: new OpenLayers.Filter.Comparison({
                        type: OpenLayers.Filter.Comparison.EQUAL_TO,
                        property: "intplbtype",//对应上面addPointPolyLayer方法的某个字段,你想让不同的点显示不同的样式的话
                        value:  indexList[i].inttreeid//
                    }),
                    symbolizer: {
                       externalGraphic : ctx+srcpaht,//图片路径
                        graphicWidth : 15,
                        graphicHeight : 15,
                        graphicYOffset : -15,
                        graphicOpacity : 0.8,
                        graphicZIndex : 0,
                        cursor : "pointer"
                    }
                }) ;
                style.rules.push(rule);
            }
        }
        return style;
    }


//地图上的文字也是以style的方式添加进去的如下:

function getStyle2() {
        var style = new OpenLayers.Style(
                {
                    fillColor:"",
                    fillOpacity: 0.01,
                    fontColor:"#000000",
                    pointRadius:6,
                    strokeColor:"#2379B6",
                    strokeDashstyle:"solid" ,
                    strokeLinecap:"round" ,
                    strokeOpacity:1,
                    strokeWidth:1,
                    label:""
                },{
                    rules: [
                        new OpenLayers.Rule({
                            elseFilter: true,
                            symbolizer: {
                                fillColor:"",
                                fillOpacity: 0.01,
                                fontColor:"#000000",
                                pointRadius:6,
                                strokeColor:"#2379B6",
                                strokeDashstyle:"solid" ,
                                strokeLinecap:"round" ,
                                strokeOpacity:1,
                                strokeWidth:1,
                                label:""
                            }
                        })
                    ]
                }
        );
        if(dataList){
            for(var i=0;i<dataList.length;i++){
                var  rule = new OpenLayers.Rule({
                    filter: new OpenLayers.Filter.Comparison({
                        type: OpenLayers.Filter.Comparison.EQUAL_TO,
                        property: "vcjlplbnum",
                        value:  dataList[i].vcjlplbnum
                    }),
                    symbolizer: {
                        fillColor:"",
                        fillOpacity: 0.01,
                        fontColor:"#000000",
                        pointRadius:6,
                        strokeColor:"#2379B6",
                        strokeDashstyle:"solid" ,
                        strokeLinecap:"round" ,
                        strokeOpacity:1,
                        strokeWidth:1,
                        label:dataList[i].vcjlplbnum
                    }
                }) ;
                style.rules.push(rule);
            }
        }
        return style;
    }


我也是刚接触不久地图这东西,共同学习哇,学习交流,零食吃货。


版权声明:本文为博主原创文章,未经博主允许不得转载。 举报

相关文章推荐

工作与生活真的可以平衡吗?

最近读到吴军的一篇专栏文章,提到关于公司总是涉及到三方利益:员工、消费者和投资人利益。任何一家公司很难同时兼顾三者利益,都会在这三者中做出选择并力图使之平衡。而作为个体,我们经常也会面临类似这样的处境...

Redis安装及通用key

Redis简介 Redis作为热点数据的缓存服务器,还有其支持队列以及发布/订阅等多种场景的特点,在很多项目中都会被普遍的使用到。在Redis的官方网站redis.io中可以看到以下描述: Redis...

程序员升职加薪指南!还缺一个“证”!

CSDN出品,立即查看!

ArcGIS教程:什么是格网和经纬网?

格网是由间隔均匀的水平线和垂直线组成的网络,用于在地图上识别各个位置。例如,通过选择参考格网类型可放置一个格网,从而为某地图划分出指定数量的行和列。通常,参考格网的行标注和列标注可用于识别地图索引中所...

ArcGIS教程:“格网和经纬网向导”快速浏览

格网和经纬网向导 为地图中格网和经纬网的创建提供了一种便捷的方法。

ArcGIS Pro 简明教程(4)工具和模型构建器

ArcGIS Pro 简明教程(4)工具和模型构建器 by 李远祥 工具箱中的工具        ArcGIS Pro 在1.3版本基本上已经继承了ArcMap的所有工具,而且会不断加入一些它自身才有...

ArcEngine IPageLayout 添加经纬网和公里网

转载于:http://www.gisall.com/html/52/25952-2932.html 向AxPageLayoutControl的PageLayout中添加格网分为两种情况: ...

地图整饰-框架与格网

地图整饰-框架与格网 by 李远祥 地图整饰元素中最常见的就是图框和网格了。只要确定了出图的纸张(就是图纸的大小),基本上就开始定义图框和格网。 在ArcMap里面,图框的定义还是相对来说要简单...

ArcMap中创建网格的方法

创建网格的的方法:方法一:建立网格首先要保证图层有正确的空间参考。建立网格的步骤:1、在图层窗口单击右键,点击“Data Frame Properties”;2、选择“Grids”选项卡,点击“New...

ArcGIS地图格网的设置

在ArcGIS的制图过程中,地图整饰是一大块内容。但是地图整饰无外乎,地图主图区,接图表,图名,图例等。这些地图整饰内容都是绘制在Page Layout下的Enlemnt中的。制图过程中,工作量最大的...
  • jx1228
  • jx1228
  • 2011-04-18 10:24
  • 7768

ArcGIS操作学习笔记

练习素材与教程来自于GISer Club。 1.如何以上下标的形式显示标注内容? 设置标注表达式。双击图层,打开属性对话框;选择【标注】选项卡;打开【标注表达式】对话框,设置解析为 “JScrip...
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)