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


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


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

相关文章推荐

openlayers实现画圆

本文讲述如何在openlayers中实现画圆。

OpenLayers 3 之 绘制图形(ol.interaction.Draw)详解

在地图上绘制各种各样的矢量图形,很多应用场景都需要用到,比如可以实现在客户端勾绘矢量图形并将结果保存到数据库以待后续编辑和可视化等等很多有用的功能。这次我们看看怎么利用 OpenLayers 3 绘制...

Openlayers 在地图上画点,线,面,圆

OPenLayers 3 example #map{ width: 100

Openlayers手动绘制圆形(v2.13)

Openlayers(v2.13)自带手动绘制矩形、多边形等图形的方法,方便快捷,但是并没有绘制圆的方法,在开发时根据API中的Box编写了手动绘圆的方法。此方法绘制的圆以鼠标拖动出的矩形较短的一条边...

在图像上画圆的matlab源代码

  • 2008年10月06日 16:13
  • 552B
  • 下载

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

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

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

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

JAVA作业 窗口响应鼠标事件:鼠标在画布上画圆

题目:生成一个窗口响应鼠标事件,可以拖住鼠标在画布上画出蓝色的圆。鼠标按下和弹起的位置为圆的直径。 思想:编写框架类与画布类即可实现画板系列问题。 源代码: Circle.java packag...

在图像上画圆算法(c代码实现)

此处给出两种画圆的方法 方法二:没有线条宽度的参数,默认是1,如果想实现线条宽度可以外部循环调用,半径r++,此处著名方法二画出的图像可能有像素点没画上,若要完善自行处理。// data 图像数据 /...

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

先说下画圆,根据圆的对称性将圆8等分,求出其中一份,其他可以通过坐标变换得到。得到过程可以百度中点画圆法。 程序: void LCD_Draw_Circle(uint16_t Xpos,uint1...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ol2已知经纬度在图层上画圆
举报原因:
原因补充:

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