动态效果的SimpleFillSymbol样式

基本代码如下:
  <esri:SimpleFillSymbol x:Name="DoubleFillSymbol" Fill="Blue" BorderBrush="Blue" BorderThickness="2" >
        <esri:SimpleFillSymbol.ControlTemplate>
            <ControlTemplate>
                <Canvas>
                    <vsm:VisualStateManager.VisualStateGroups>
                        <vsm:VisualStateGroup x:Name="CommonStates">
                            <vsm:VisualState x:Name="Normal">
                                <Storyboard RepeatBehavior="Forever">
                                    <DoubleAnimation BeginTime="00:00:00" Storyboard.TargetName="Element" Storyboard.TargetProperty="(UIElement.Opacity)" From="1" To="0" Duration="00:00:01" />
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                    </vsm:VisualStateManager.VisualStateGroups>
                    <Path x:Name="Element" IsHitTestVisible="False" Fill="{Binding Symbol.Fill}" Stroke="{Binding Symbol.BorderBrush}" StrokeThickness="{Binding Symbol.BorderThickness}"/>
                </Canvas>
            </ControlTemplate>
        </esri:SimpleFillSymbol.ControlTemplate>
    </esri:SimpleFillSymbol>

不改变以下代码基础上添加上面的功能:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>07-1 findtask</title> <!-- 用来引入esri.css和tundra.css样式表 --> <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.45/dijit/themes/tundra/tundra.css"/> <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.45/esri/css/esri.css"/> <!-- 用来引入init.js,即可引入ArcGIS API for Javascript--> <script src="https://js.arcgis.com/3.45/init.js"></script> <!-- style标签用来设定页面显示外观,其中width和hight分别用来设置组件mapDiv的宽和高,border用来设置mapdiv的边框样式 .mapclass根据元素的id属性值,来精准的选中元素--> <style> .MapClass{ width:100%; height: 500px; border: 1px solid #000; } </style> </head> <body class="tundra"> <div id="mapDiv" class="MapClass"></div> <!-- 通过input标签,设置文本输入框 --> Name:<input id="searchInput" type="text"> <!-- 设置button按钮 --> <button id="btn">查询</button> <!-- 利用table标签写表格,thead标签表示表头,tr表示一行,th表示单元格,tbody表示表身 --> <table > <thead> <tr> <th width="100px">名称</th> <th width="100px">类型</th> <th width="100px">面积</th> </tr> </thead> <tbody id="infoBody"></tbody> </table> <!-- script标签用来书写Javascript代码 --> <script> /** *思路: * 1. 创建查询对象FindTask,对查询对象实例化 2. 创建属性查询参数 3.给findTask查询按钮添加一个click事件 (1)获取HTML页文本框所输入的查询名称。 (2)实例化FindParameters参数 (3)调用execute函数,执行查询 4.处理查询结果 (1)将获得的要素定位高亮显示,在回调函数中新建图形符号,设置获得fintask查询得到的geometry。 (2)在table面板中展示信息,利用数组获得查询信息,并在 table中展示信息 */ require(["esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/tasks/FindTask", "esri/tasks/FindParameters", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/geometry/Point", "esri/Color", "esri/graphic", ], // function用来表示回调函数,function中的参数要与require中的类一一对应。 function(Map,ArcGISDynamicMapServiceLayer,FindTask,FindParameters,SimpleMarkerSymbol, SimpleLineSymbol,SimpleFillSymbol,Point,Color,Graphic){ //添加动态地图服务图层 var map = new Map("mapDiv"); var layer=new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/MyMapService/MapServer"); map.addLayer(layer); //创建属性查询对象,对查询对象实例化,FindTask构造函数需要一个ArcGIS Server地图服务的URL var findTask = new FindTask("http://localhost:6080/arcgis/rest/services/MyMapService/MapServer"); //实例化查询参数, var findParams = new FindParameters(); //给属性查询按钮添加一个click事件 document.getElementById("btn").onclick=function funFind(){ var name=document.getElementById("searchInput").value;//获得输入框的值,即当点击id="btn"的查询按钮时,获取到id=searchInput输入框的输入值。 map.graphics.clear();//清除上一次的高亮显示,若不写这个代码,选中的图层不会清空 findParams.returnGeometry = true; //注意 returnGeometry被设置为true以便结果能被显示在地图上。 //FindParameters指出哪些图层和字段将被搜索。如果多个图层包含相同的字段名称(例如"NAME")两个字段都要被搜索。 findParams.layerIds = [0,1];//对省级行政区和省级行政区-线查询 findParams.searchFields = ["name"];//匹配图层中的name属性 findParams.searchText = name;//searchText参数是任务将要搜索什么。这个文本来自输入框并且当单击查询,按钮时被发送到execute函数。 //name为点击查询按钮时获得的输入框的值 findParams.returnGeometry = true; //注意 returnGeometry被设置为true以便结果能被显示在地图上。 /*进行查询,当任务执行结束,showResults函数循环访问FindResult里的graphics数组, 并增加每个图形到地图。函数也增加每个结果的属性到表格。 */ findTask.execute(findParams,showFindResult) // console.log(findParams); } //处理属性查询返回给我们的数据 function showFindResult(findResult) { //初始化信息暂存数组 nameArr=[];//用于存储查询地点名称 shapeArr=[];//用于存储查询shape AREAArr=[];//用于存储查询shape console.log(findResult); if (findResult.length === 0) { alert("查询无结果"); return; } for (var i = 0; i < findResult.length; i++) { nameArr[i]=findResult[i].feature.attributes.name; shapeArr[i]=findResult[i].feature.attributes.Shape; AREAArr[i]=findResult[i].feature.attributes.AREA; //定义高亮图形的符号 var lineSymbol= new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,new Color([255, 0, 0]), 1); //定义面的边界线符号 var PolygonSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol,new Color([0, 255, 0, 1])); //定义面符号 //获得图形graphic var graphic=findResult[i].feature; //赋予相应符号 graphic.setSymbol(PolygonSymbol); //将graphic添加到地图中,从而实现高亮效果 map.graphics.add(graphic); } //通过循环写入表格主体数据,tr标签为行,td标签为单元格。 var html=""; for(var i=0;i<nameArr.length;i++){ html+="<tr>" + " <td >"+nameArr[i]+"</td>" + "<td >"+shapeArr[i]+"</td>" + "<td >"+AREAArr[i]+"</td>" + "</tr>"; } //将属性绑定在infoBody的表格上,即修改表格主体的内容。 document.getElementById("infoBody").innerHTML =html; } } ) </script> </body> </html>
最新发布
06-12
以下是基于你的代码需求,在不改变原有代码结构的基础上,添加测量距离与面积的功能。以下是完整的解决方案: ### 修改后的代码 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>07-1 findtask</title> <!-- 用来引入esri.css和tundra.css样式表 --> <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.45/dijit/themes/tundra/tundra.css"/> <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.45/esri/css/esri.css"/> <!-- 用来引入init.js,即可引入ArcGIS API for Javascript--> <script src="https://js.arcgis.com/3.45/init.js"></script> <!-- style标签用来设定页面显示外观,其中width和hight分别用来设置组件mapDiv的宽和高,border用来设置mapdiv的边框样式 .mapclass根据元素的id属性值,来精准的选中元素--> <style> .MapClass{ width:100%; height: 500px; border: 1px solid #000; } /* 添加测量按钮样式 */ .measureButtons { margin-top: 10px; } </style> </head> <body class="tundra"> <div id="mapDiv" class="MapClass"></div> <!-- 查询功能 --> Name:<input id="searchInput" type="text"> <button id="btn">查询</button> <!-- 测量功能 --> <div class="measureButtons"> <button id="measureLengthBtn">测量距离</button> <button id="measureAreaBtn">测量面积</button> <button id="clearMeasureBtn">清除测量</button> </div> <!-- 表格展示 --> <table > <thead> <tr> <th width="100px">名称</th> <th width="100px">类型</th> <th width="100px">面积</th> </tr> </thead> <tbody id="infoBody"></tbody> </table> <script> require([ "esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/tasks/FindTask", "esri/tasks/FindParameters", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/geometry/Point", "esri/Color", "esri/graphic", "esri/toolbars/draw", // 添加Draw工具栏 "esri/symbols/TextSymbol", "esri/symbols/Font", "esri/geometry/geodesicUtils" ], function(Map, ArcGISDynamicMapServiceLayer, FindTask, FindParameters, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, Point, Color, Graphic, Draw, TextSymbol, Font, geodesicUtils) { var map = new Map("mapDiv"); var layer = new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/MyMapService/MapServer"); map.addLayer(layer); var findTask = new FindTask("http://localhost:6080/arcgis/rest/services/MyMapService/MapServer"); var findParams = new FindParameters(); document.getElementById("btn").onclick = function funFind() { var name = document.getElementById("searchInput").value; map.graphics.clear(); findParams.returnGeometry = true; findParams.layerIds = [0, 1]; findParams.searchFields = ["name"]; findParams.searchText = name; findParams.returnGeometry = true; findTask.execute(findParams, showFindResult); }; function showFindResult(findResult) { nameArr = []; shapeArr = []; AREAArr = []; if (findResult.length === 0) { alert("查询无结果"); return; } for (var i = 0; i < findResult.length; i++) { nameArr[i] = findResult[i].feature.attributes.name; shapeArr[i] = findResult[i].feature.attributes.Shape; AREAArr[i] = findResult[i].feature.attributes.AREA; var lineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT, new Color([255, 0, 0]), 1); var PolygonSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol, new Color([0, 255, 0, 1])); var graphic = findResult[i].feature; graphic.setSymbol(PolygonSymbol); map.graphics.add(graphic); } var html = ""; for (var i = 0; i < nameArr.length; i++) { html += "<tr>" + " <td >" + nameArr[i] + "</td>" + "<td >" + shapeArr[i] + "</td>" + "<td >" + AREAArr[i] + "</td>" + "</tr>"; } document.getElementById("infoBody").innerHTML = html; } // 初始化测量工具 var toolbar = new Draw(map); var measurementSymbol = new SimpleLineSymbol( SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 3 ); var measurementLabelSymbol = new TextSymbol( "", new Font("12pt", Font.STYLE_NORMAL, Font.VARIANT_NORMAL, Font.WEIGHT_BOLD), new Color([0, 0, 0]) ); // 测量距离按钮点击事件 document.getElementById("measureLengthBtn").onclick = function() { toolbar.activate(Draw.POLYLINE); map.hideZoomSlider(); }; // 测量面积按钮点击事件 document.getElementById("measureAreaBtn").onclick = function() { toolbar.activate(Draw.POLYGON); map.hideZoomSlider(); }; // 清除测量按钮点击事件 document.getElementById("clearMeasureBtn").onclick = function() { toolbar.deactivate(); map.graphics.clear(); map.showZoomSlider(); }; // 测量工具事件 toolbar.on("draw-end", function(evt) { toolbar.deactivate(); var geometry = evt.geometry; var symbol; if (geometry.type === "polyline") { symbol = measurementSymbol; var length = geodesicUtils.geodesicLengths([geometry], map.spatialReference)[0]; if (isNaN(length)) { length = geometry.getLength(); // 如果geodesic计算失败,尝试平面计算 } measurementLabelSymbol.setText(length.toFixed(2) + " 米"); } else if (geometry.type === "polygon") { symbol = new SimpleFillSymbol( SimpleFillSymbol.STYLE_SOLID, measurementSymbol, new Color([255, 0, 0, 0.2]) ); var area = geodesicUtils.geodesicAreas([geometry], map.spatialReference)[0]; if (isNaN(area)) { area = geometry.getArea(); // 如果geodesic计算失败,尝试平面计算 } measurementLabelSymbol.setText(area.toFixed(2) + " 平方米"); } var graphic = new Graphic(geometry, symbol); map.graphics.add(graphic); var labelPoint = getLabelPoint(geometry); var labelGraphic = new Graphic(labelPoint, measurementLabelSymbol); map.graphics.add(labelGraphic); map.showZoomSlider(); }); // 获取几何图形的中心点用于标签显示 function getLabelPoint(geometry) { if (geometry.type === "point") { return geometry; } else if (geometry.type === "polyline") { return geometry.getPoint(0, parseInt(geometry.getPointCount() / 2)); } else { return geometry.getCentroid(); } } }); </script> </body> </html> ``` ### 解释 1. **测量功能**: - 添加了三个按钮:`测量距离`、`测量面积`和`清除测量`。 - 使用`Draw`工具栏实现绘制线段或多边形的功能。 - 在`draw-end`事件中,通过`geodesicUtils.geodesicLengths`和`geodesicUtils.geodesicAreas`计算距离和面积。 - 如果`geodesicUtils`返回`NaN`,则使用平面计算方法(`getLength()`和`getArea()`)。 2. **清除测量**: - 点击“清除测量”按钮时,调用`toolbar.deactivate()`和`map.graphics.clear()`以清除所有测量内容。 3. **标签显示**: - 测量结果显示在地图上,并通过`measurementLabelSymbol`显示文本。 ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值