レンダリング

27509 ワード

アルクGIS API For JavaScript

1.モジュールの導入

			"esri/tasks/GenerateRendererTask",
            "esri/tasks/GenerateRendererParameters",
            "esri/tasks/ClassBreaksDefinition",
            "esri/tasks/AlgorithmicColorRamp",

2.前の二つと比べて
データ量が大きい場合、サーバレンダリングの速度は明らかにクライアントレンダリングより速いです.クライアントとサービス側のレンダリングは二つに分けられます.一意値レンダリングと分類レンダリング
3.サーバー分類手順はクライアントより多く、階層がある

オブジェクトを作成する

				var lineSymbol=new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new dojo.Color([255, 0, 0]), 3);
				var fill=new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol,new dojo.Color("#FFFFCC"));
				//         
				var RenderAnalyst = new GenerateRendererTask("http://localhost:6080/arcgis/rest/services/demo/Practice/MapServer/1");
				//           
				var params = new GenerateRendererParameters();   
				//        
                var colorRamp = new AlgorithmicColorRamp();

色位置、タイプ

を設定します.

				//       
                colorRamp.fromColor = dojo.colorFromHex("#998ec3");
				//       
                colorRamp.toColor = dojo.colorFromHex("#f1a340");
				//     
                colorRamp.algorithm = "hsv";

レンタのスタイル、分類フィールドは、どのように分けられますか?

				//     
				var unidef = new ClassBreaksDefinition();
				//    
				unidef.classificationField = "Shape.STArea()";
				//    
                unidef.classificationMethod="natural-breaks";
				//  
				unidef.breakCount = 3;

は、分類記号、色、レンダリング

を表示する.

				//     
                unidef.baseSymbol=fill;
				//              
                unidef.colorRamp=colorRamp;
				//         
                params.classificationDefinition = unidef;
				//       
                RenderAnalyst.execute(params, showRender);

4.コードを貼る


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>GenerateRendererTasktitle>
    <link rel="stylesheet" href="https://js.arcgis.com/3.28/esri/css/esri.css"/>
    <link rel="stylesheet" href="https://js.arcgis.com/3.28/dijit/themes/tundra/tundra.css"/>
    <script  type="text/Javascript" src="https://js.arcgis.com/3.28/">script>
    <style type="text/css">
        .MapClass{
            width:100%;
            height:500px;
            border:1px solid #000;
        }
    style>
    <script type="text/javascript">

        require(["esri/map",
            "esri/layers/ArcGISDynamicMapServiceLayer",
			"dojo/dom",
			"dojo/on",
            "esri/tasks/GenerateRendererTask",
            "esri/layers/FeatureLayer",
            "esri/symbols/SimpleFillSymbol",
            "esri/symbols/SimpleLineSymbol",
            "esri/tasks/GenerateRendererParameters",
            "esri/tasks/ClassBreaksDefinition",
            "esri/tasks/AlgorithmicColorRamp",
            "dojo/domReady!"], function
                (Map,
                 ArcGISDynamicMapServiceLayer,
				 dom,on,
                 GenerateRendererTask,
                 FeatureLayer,
                 SimpleFillSymbol,
                 SimpleLineSymbol,
                 GenerateRendererParameters,
                 ClassBreaksDefinition,
                 AlgorithmicColorRamp
                ) {
            //      
            var MyMap = new Map("MyMapDiv");
            var layer = new ArcGISDynamicMapServiceLayer
            ("http://localhost:6080/arcgis/rest/services/demo/Practice/MapServer/");
            MyMap.addLayer(layer)
			//  id Btn DOM  
			var btn=dom.byId("Btn");
			// btn      
			on(btn,"click",function(e){
				//     
				var lineSymbol=new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new dojo.Color([255, 0, 0]), 3);
				//     
				var fill=new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol,new dojo.Color("#FFFFCC"));
				//         
				var RenderAnalyst = new GenerateRendererTask("http://localhost:6080/arcgis/rest/services/demo/Practice/MapServer/1");
				//           
				var params = new GenerateRendererParameters();   
				//        
                var colorRamp = new AlgorithmicColorRamp();
				//       
                colorRamp.fromColor = dojo.colorFromHex("#998ec3");
				//       
                colorRamp.toColor = dojo.colorFromHex("#f1a340");
				//     
                colorRamp.algorithm = "hsv";
				//     
				var unidef = new ClassBreaksDefinition();
				//    
				unidef.classificationField = "Shape.STArea()";
				//    
                unidef.classificationMethod="natural-breaks";
				//  
				unidef.breakCount = 3;
				//     
                unidef.baseSymbol=fill;
				//              
                unidef.colorRamp=colorRamp;
				//         
                params.classificationDefinition = unidef;
				//       
                RenderAnalyst.execute(params, showRender);
				
				
			});
			//           
			function showRender(renderer) {
				
                if (renderer != null) {
					//      ，  ：               ，      
					var featureLayer = new FeatureLayer("http://localhost:6080/arcgis/rest/services/demo/Practice/MapServer/1",{
						mode:  FeatureLayer.MODE_SNAPSHOT,
						outFields: ["*"]
					});		
					//     
                    featureLayer.setRenderer(renderer);
                    featureLayer.refresh();
                    MyMap.addLayer(featureLayer);
                }
            }
        });
    script>
head>
<body>
<div id="MyMapDiv" class="MapClass">div>
<input type="button" id="Btn" value="     " />
body>
html>

jsは携帯電話番号を確認します(最新)