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;
    }


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


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

相关文章推荐

Java时间格式化问题

这里提供一些java时间格式化的小技巧。 有时候使用SimpleDateFormat转换时间格式时候发现时间不对劲。 这里给大家说个小知识, SimpleDateFormat 格式化有分12小时制...

(学习笔记)stm32f4在液晶上画圆及填充圆的几种方法

先说下画圆,根据圆的对称性将圆8等分,求出其中一份,其他可以通过坐标变换得到。得到过程可以百度中点画圆法。 程序: void LCD_Draw_Circle(uint16_t Xpos,uint1...

对话框上画圆

  • 2015-07-24 20:39
  • 7.00MB
  • 下载

基于Arcgis for Android runtime在地图上画圆

本人参照DrawTools改编实现,具体出处不详. 更多信息请关注 www.gismobi.com 代码如下: //----------------------绘制圆形--------------...

Python--写游戏pygame入门二(屏幕上画圆,矩形,椭圆)

1、建立一个窗口 import pygame #模块初始化 pygame.init() #创建一个窗口,窗口大小为640*480 screen=pygame.display.set_mod...
  • xsc_c
  • xsc_c
  • 2013-05-25 18:56
  • 5678

OpenLayers 3 之 地图图层数据来源(ol.source)详解

source 是 Layer 的重要组成部分,表示图层的来源,也就是服务地址。除了在构造函数中制定外,可以使用 layer.setSource(source) 稍后指定。一、包含的类型 ol.sour...

openlayers3—地图图层数据来源(ol.source)

ol.source.BingMaps,必应地图的数据; ol.source.Cluster,聚族矢量数据; ol.source.ImageCanvas,数据来源是一个canvas元素,其中数据...

OpenLayers 3 之 地图矢量图层(ol.layer.Vector)详解

在 GIS 中,地图一般分为两大类:栅格地图和矢量地图,栅格地图其实就是数码照片,只不过有的是卫星拍的。它们有一个共同特征,就是它们都是由很多个像素组成,像素大小是一致的,行高和列宽是一致的,从这个角...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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