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 3 example #map{ width: 100
  • zhongshijun521
  • zhongshijun521
  • 2017年03月10日 15:56
  • 1946

openlayers3+中实现点选、圈选、多边形选择点要素

点选、圈选、多边形选择也是地图中比较基础的功能了,只是一直没有需求,最近两天把这个功能从页面到功能完整的做了一遍。我使用的方法是使用ol4的API加一些js算法,这里记录一下。 1、需求    点选:...
  • u014529917
  • u014529917
  • 2017年08月23日 14:45
  • 1859

OpenLayers 3 入门指南

从使用OpenLayers 3到现在有差不多一年的时间了,OpenLayers是web端比较好的一个GIS引擎,广受大家的青睐,最开始我以为这是一个比较小众的引擎,没想到后面发现有很多人使用,并且还有...
  • yangzhai
  • yangzhai
  • 2017年03月02日 07:36
  • 184

基于js的坐标轴画圆和简单函数的示例代码

  • 2017年01月05日 15:40
  • 81KB
  • 下载

画圆和椭圆的小程序

  • 2014年05月18日 17:28
  • 12KB
  • 下载

已知经纬度坐标,如何在地方坐标系下的地图上展示轨迹Arcgis for sl

这个话题意味着两个关键点: 1.  如何在arcgis for silverlight中画点、线 2.  如何将经纬度坐标转换成地方坐标系 1.  如何在arcgis for s...
  • DaiDaiLiu
  • DaiDaiLiu
  • 2013年08月15日 17:22
  • 2520

百度定位+地图,半径加当前经纬度画圆

我用百度官网上的源码进行修改的,
  • u011072398
  • u011072398
  • 2014年06月12日 18:46
  • 3680

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

先上效果哇 途中打标记的图例形以及蓝色的圈圈还有黑色的文字编号都是根据数据库查询出来的数据话上去的 以下是代码: var pointlayer = new Ope...
  • Ming_key
  • Ming_key
  • 2016年06月02日 09:55
  • 570

笛卡尔法,极坐标法,Bresenham算法画圆

  • 2011年06月09日 21:43
  • 81KB
  • 下载

Android 界面中实现高德地图 要求根据已知的经纬度 显示地图上的点!!!!

求解 ?  能来点详细的代码 最好~~~~ 搞了半天没搞定   xxxxxxxxxxxx
  • huyunfu0957
  • huyunfu0957
  • 2017年01月02日 14:33
  • 844
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ol2已知经纬度在图层上画圆
举报原因:
原因补充:

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