graphicsLayer 中增加多个graphic 后, 进行缩放定位。然后画一个表示范围的框

本文详细介绍了在图形层中动态添加多个图形后,如何重新计算并使用新边界绘制方框,进而实现图形层范围的缩放。通过遍历图形层中的所有图形,收集最小和最大坐标值来确定新的边界范围,最终绘制一个包含所有图形的方框,并将此方框作为新的图形添加到图形层中,实现动态缩放效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

主要思路就是在graphicsLayer 中加入多个grpahic 后,重新计算出 包含所有graphic 后的 Envelope。

然后以Envelope 范围画一个graphic 再增加到 graphicsLayer


    DLog(@"查询到%d条记录",featureSet.features.count)
    AGSSimpleLineSymbol *fillSym = [AGSSimpleLineSymbol simpleLineSymbol];
    fillSym.color = [UIColor whiteColor];

    for(int i=0; i < featureSet.features.count; i++)
    {
        AGSGraphic *gra = [featureSet.features objectAtIndex:i];
        gra.symbol = fillSym;
        [self.graphicsLayer addGraphic:gra];
    }
    if ( self.query1Completed == self.query2Completed && self.query1Completed == TRUE)
    {
        //开始缩放到路段集合
        if (self.graphicsLayer.graphics != NULL && self.graphicsLayer.graphics.count >=1) {
            //accumulate the min/max
            double xmin = ((AGSGraphic *)self.graphicsLayer.graphics[0]).geometry.envelope.xmin;
            double ymin = ((AGSGraphic *)self.graphicsLayer.graphics[0]).geometry.envelope.ymin;
            double xmax = ((AGSGraphic *)self.graphicsLayer.graphics[0]).geometry.envelope.xmax;
            double ymax = ((AGSGraphic *)self.graphicsLayer.graphics[0]).geometry.envelope.ymax;
            for (int i=0;i<self.graphicsLayer.graphics.count;i++) {
                if (((AGSGraphic *)self.graphicsLayer.graphics[i]).geometry.envelope.xmin < xmin)
                    xmin = ((AGSGraphic *)self.graphicsLayer.graphics[i]).geometry.envelope.xmin;

                if (((AGSGraphic *)self.graphicsLayer.graphics[i]).geometry.envelope.xmax > xmax)
                    xmax = ((AGSGraphic *)self.graphicsLayer.graphics[i]).geometry.envelope.xmax;

                if (((AGSGraphic *)self.graphicsLayer.graphics[i]).geometry.envelope.ymin < ymin)
                    ymin = ((AGSGraphic *)self.graphicsLayer.graphics[i]).geometry.envelope.ymin;

                if (((AGSGraphic *)self.graphicsLayer.graphics[i]).geometry.envelope.ymax > ymax)
                    ymax = ((AGSGraphic *)self.graphicsLayer.graphics[i]).geometry.envelope.ymax;
            }

            AGSMutableEnvelope *extent = [AGSMutableEnvelope envelopeWithXmin:xmin ymin:ymin xmax:xmax ymax:ymax spatialReference:self.mapView.spatialReference];
            [extent expandByFactor:1.5];

            //  画一个方框,就是在graphicsLayer中加入一个 画好方框的graphic
            AGSCompositeSymbol *symbol = [AGSCompositeSymbol compositeSymbol];
            AGSSimpleLineSymbol *lineSymbol = [[AGSSimpleLineSymbol alloc] init];
            lineSymbol.color = [UIColor colorWithRed:0.286 green:0.690 blue:0.838 alpha:0.200];
            lineSymbol.width = 1;
            [symbol addSymbol:lineSymbol];
            AGSSimpleFillSymbol *fillSymbol = [[AGSSimpleFillSymbol alloc] init];
            fillSymbol.color = [UIColor colorWithRed:0.939 green:0.940 blue:0.422 alpha:0.200];
            [symbol addSymbol:fillSymbol];

            //graphicsLayer 中加入一个graphic。这个graphic 是 指定了 symbol 和  geometry
<span style="color:#ff0000;">            [self.graphicsLayer addGraphic:[AGSGraphic graphicWithGeometry:extent symbol:symbol attributes:nil]];
</span><span style="white-space:pre">	</span>     

            // 主线程刷新界面开始
            if ([NSThread isMainThread])
            {
                [self.mapView zoomToEnvelope:extent animated:YES];
            }
            else
            {
                dispatch_sync(dispatch_get_main_queue(), ^{
                    //Update UI in UI thread here
                    [self.mapView zoomToEnvelope:extent animated:YES];

                });
            }
            // 主线程刷新界面结束

        }


检查一下:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>添加地图小部件</title> <link rel="stylesheet" href="https://js.arcgis.com/3.45/esri/css/esri.css"> <script src="https://js.arcgis.com/3.45/init.js"></script> <style> html, body, #mapDiv { padding: 0; margin: 0; width: 100%; height: 100%; } </style> <script> /*在arcgis api for javascript中,提供了一个类叫做esri/toolbars/navigation, 通过这个类,用户可以实现对地图的基本操作。 */ require([ "esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/dijit/Scalebar", "esri/symbols/SimpleMarkerSymbol", "esri/toolbars/draw", "esri/graphic", "esri/layers/GraphicsLayer", "esri/Color", ], function(Map, ArcGISDynamicMapServiceLayer, Scalebar, SimpleMarkerSymbol, Draw, Graphic, GraphicsLayer, Color ) { var map = new Map("mapDiv", { center: [-95.625,39.243], zoom:2, basemap: "hybrid" , isPan:false,//禁止平移 }); //调用动态地图服务 var layer = new ArcGISDynamicMapServiceLayer( "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer",{ "opacity": 0.75 }) map.addLayer(layer) ; //添加比例尺 var scalebar = new Scalebar({ map: map,// 参考底图,必选项 attachTo: "bottom-left", // 指定比例尺在地图上的位置 scalebarStyle:"line",// 比例尺类型,比例尺以线性显示 scalebarUnit: "english",// 比例尺单位 }); // 声明一个draw工具条 var toolBar = new Draw(map); // 绑定激活绘图工具的函数 function activate_tool() { // 根据class获取所有按钮 var btns = document.getElementsByClassName('btn-info'); console.log('btns',btns) for(var i = 0; i < btns.length; ++ i) { var type = btns[i].getAttribute('aria-label'); // 绘制点 if (type === "POINT") { btns[i].onclick = function() { toolBar.activate(Draw.POINT) }; // 结束绘制 } else if (type === "disabledraw") { btns[i].onclick = function() { toolBar.deactivate(); } } }}; // 调用函数 activate_tool(); // 为声明的draw工具添加了一个draw-complete事件,绘图结束后将图形显示在地图上 toolBar.on("draw-complete", drawEndEvent) function drawEndEvent(evt) { var geometry=evt.geometry; console.log("geometry",geometry) var type=geometry.type; console.log("type",type) // 创建点符号 var pointSymbol = new SimpleMarkerSymbol( SimpleMarkerSymbol.STYLE_TRIANGLE,//点的形状 20,//点的大小 new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([255,0,0]), 1),//轮廓线的样式 new Color([0,255,0,0.25])//点的颜色 ); // 添加图形到地图 if (type === "point") { var graphic=new Graphic(geometry,pointSymbol); } var graphicslayer=new GraphicsLayer(); graphicslayer.add(graphic); map.addLayer(graphicslayer); } }); </script> </head> <body> <button class='btn-info' aria-label="POINT">点</button> <button class='btn-info' aria-label="disabledraw">结束绘制</button> <div id="mapDiv"></div> </body> </html>
06-07
检查以下代码有无错误有无冗余:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>WebGIS的地图应用</title> <!-- 在head部分增加引用esri提供的样式表 --> <link rel="stylesheet" href="https://js.arcgis.com/3.45/esri/css/esri.css"> <!-- 增加一个script标签,在该标签中引入ArcGIS API for JavaScript,实现ArcGIS API for JavaScript的调用 --> <script src="https://js.arcgis.com/3.45/init.js"></script> <style> /* 通过style标签来设置html body mapDiv的样式 */ html, body, #mapDiv { padding: 0;/* 外边距 */ margin: 0;/* 内边距 */ width: 100%;/* 宽 */ height: 100%;/* 高 */ } #legendDiv{ width:200px; height:600px; position:absolute !important; top:200px; left:10px; } </style> <script> require([ "esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/dijit/Scalebar", "esri/symbols/SimpleMarkerSymbol", "esri/toolbars/draw", "esri/graphic", "esri/layers/GraphicsLayer", "esri/Color", "esri/layers/FeatureLayer", "esri/InfoTemplate", "esri/renderers/UniqueValueRenderer", "esri/symbols/SimpleFillSymbol", "esri/dijit/Legend" ], function( Map, ArcGISDynamicMapServiceLayer, Scalebar, SimpleMarkerSymbol, Draw, Graphic, GraphicsLayer, Color, FeatureLayer, InfoTemplate, UniqueValueRenderer, SimpleFillSymbol, Legend ) { var map = new Map("mapDiv", { center: [-95.625,39.243],// 经纬度中心点 zoom:2, // 缩放级数 basemap: "hybrid" // 混合底图类型 }); //添加比例尺 var scalebar = new Scalebar({ map: map,// 参考底图,必选项 attachTo: "bottom-left", // 指定比例尺在地图上的左下角 scalebarStyle:"line",// 比例尺类型,比例尺以线性显示 scalebarUnit: "english",// 比例尺单位 }); // 声明一个draw工具条 var toolBar = new Draw(map); // 绑定激活绘图工具的函数 function activate_tool() { // 根据class获取所有按钮 var btns = document.getElementsByClassName('btn-info'); console.log('btns',btns) for(var i = 0; i < btns.length; ++ i) { var type = btns[i].getAttribute('aria-label'); // 绘制点 if (type === "POINT") { btns[i].onclick = function() { toolBar.activate(Draw.POINT) }; // 结束绘制 } else if (type === "disabledraw") { btns[i].onclick = function() { toolBar.deactivate(); } } }}; // 调用函数 activate_tool(); // 为声明的draw工具添加了一个draw-complete事件,绘图结束后将图形显示在地图上 toolBar.on("draw-complete", drawEndEvent) function drawEndEvent(evt) { var geometry=evt.geometry; console.log("geometry",geometry) var type=geometry.type; console.log("type",type) // 创建点符号 var pointSymbol = new SimpleMarkerSymbol( SimpleMarkerSymbol.STYLE_TRIANGLE,//点的形状 20,//点的大小 null,//轮廓线的样式 new Color([255,0,127,0.5])//点的颜色 ); // 添加图形到地图 var graphic=new Graphic(geometry,pointSymbol); var graphicslayer=new GraphicsLayer(); graphicslayer.add(graphic); map.addLayer(graphicslayer); } var featurelayer=new FeatureLayer('https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/2',//必选参数 { mode:FeatureLayer.MODE_SNAPSHOT,//指定构造要素图层时显示的模式 outFields:["*"],//指定返回的数据值,*表示返回所有值 infoTemplate:new InfoTemplate(" ", "${sub_region}"), } ) var defaultSymbol=new SimpleFillSymbol().setStyle(SimpleFillSymbol.STYLE_NULL); //声明独立值专题图 var renderer = new UniqueValueRenderer( defaultSymbol, //默认符号 "sub_region"//渲染器用于匹配值的属性字段 ); //为独立值指定不同的符号 renderer.addValue("Pacific",new SimpleFillSymbol().setColor(new Color([255,0,0,0.5]))) renderer.addValue("Mtn",new SimpleFillSymbol().setColor(new Color([255,128,0,0.5]))) renderer.addValue("N Eng",new SimpleFillSymbol().setColor(new Color([255,255,0,0.5]))) renderer.addValue("S Atl",new SimpleFillSymbol().setColor(new Color([0,255,0,0.5]))) renderer.addValue("Mid Atl",new SimpleFillSymbol().setColor(new Color([0,255,255,0.5]))) renderer.addValue("E N Cen",new SimpleFillSymbol().setColor(new Color([0,0,255,0.5]))) renderer.addValue("W N Cen",new SimpleFillSymbol().setColor(new Color([128,0,128,0.5]))) renderer.addValue("E S Cen",new SimpleFillSymbol().setColor(new Color([75,0,130,0.5]))) renderer.addValue("W S Cen",new SimpleFillSymbol().setColor(new Color([138,43,226,0.5]))) //调用要素图层的setRenderer的方法,生成专题图 featurelayer.setRenderer(renderer) //将要素图层添加到地图 map.addLayer(featurelayer) //添加图例 var legend = new Legend({ map: map, layerInfos:[{ //layerInfos是个对象,指定地图中要显示在图例中的图层的子集 layer:featurelayer, //添加到图例中的图层 title:"美国各区域分布图例" //指定图层标题 }] }, "legendDiv"); legend.startup(); }); </script> </head> <body> <button class='btn-info' aria-label="POINT">点</button> <button class='btn-info' aria-label="disabledraw">结束绘制</button> <div id="mapDiv"></div> <div id="legendDiv"></div> </body> </html>
06-08
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值