ArcGIS API For Javascript之颜色分类实现

最新推荐文章于 2024-01-28 20:31:37 发布
最新推荐文章于 2024-01-28 20:31:37 发布
阅读量8.2k 收藏 6
点赞数
分类专栏： ArcGIS
   在 博文（http://blog.csdn.net/lovecarpenter/article/details/52672046）的基础上，利用该文章中的客户端渲染唯一值实现了功能。但是做了修改，我渲染的是SimpleLineSymbol。在API3.8的版本中setColor不可行。 红色字体是我自己的代码

1.引言

      在 GIS当中，总要是不是的制作几张专题图，制作专题图的过程中，不可避免的就要涉及到图层的渲染问题（即改变图层的颜色信息），渲染分为客户端渲染，服务器渲染，客户端渲染要求我们的服务必须是要素服务，或者是可以使用FeatureLayer接收的服务图层.

2.需求

      首先我们查看一下我们的数据（宿舍楼信息）

这里写图片描述

2.1需求一（唯一值渲染）

我想根据alias属性进行唯一值渲染

2.1.1代码实现

  • 首先我们先将地图加载进来
                    var map = new esri.Map("MyMapDiv");
                    var layer = new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/my/fea/MapServer");
                    map.addLayer(layer);
 
 
  • 1
  • 2
  • 3

 
 
  • 1
  • 2
  • 3
  • 定义一个渲染按钮
<button id="btn">渲染</button>
 
 
  • 1

 
 
  • 1
  • 给按钮绑定相应的事件
  •  var defaultSymbol = new  SimpleLineSymbol(SimpleLineSymbol.STYLE_NULL, new Color([255, 0, 0]), 3);
  • var rRenderer = new UniqueValueRenderer(defaultSymbol,"字段");
  • rRenderer.addValue("字段",new SimpleLineSymbol().setColor(new Color("#FF8C00")));
  • var infoTemplate = new InfoTemplate("代码", "${。。。。}");
            var xxxxLayer= new FeatureLayer(xxxURL,{
                mode:FeatureLayer.MODE_SNAPSHOT,
                outField:["*"],
                infoTemplate:infoTemplate
on(btn,"click",function(){
                        //定义一个要素图层
                        var featureLayer = new FeatureLayer(
                        "http://localhost:6080/arcgis/rest/services/Test/ft/MapServer/1",
                         {
                            mode:FeatureLayer.MODE_SNAPSHOT,
                            outFields: ["*"]
                         });
                        //定义线符号
                        var lineSymbol=new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new Color([255, 0, 0]), 3);//替代defaultSymbol
                        //定义面符号
                        var fill=new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol,new Color("#FFFFCC"));//不需要
                        //定义唯一值渲染器，对字段alias进行渲染，fill是默认的渲染符号
                        var renderer = new UniqueValueRenderer(fill, "alias");//替代上述rRenderer
                        //设置渲染的方式
                        renderer.addValue("C区宿舍", new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol,new Color([0, 255, 0, 0.5])));
                        renderer.addValue("B区宿舍", new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol,new Color([0, 0, 255, 0.5])));
                        renderer.addValue("A区宿舍",new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol,new Color([255, 0, 255, 0.5])));
                        renderer.addValue("公共出口", new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol,new Color([255, 255, 255, 0.75])));
                        featureLayer.setRenderer(renderer);
                        map.addLayer(featureLayer);              
                    })  
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

2.1.2全部代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>UniqueValueRenderer</title>
    <link  rel="stylesheet"  type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/dijit/themes/tundra/tundra.css"/>
    <link  rel="stylesheet"  type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/esri/css/esri.css" />
    <script  type="text/Javascript" src="http://localhost/arcgis_js_api/library/3.17/3.17/init.js"></script>
    <style type="text/css">
        .MapClass{
            width:100%;
            height:600px;
            border:1px solid #000;
        }
    </style>
    <script type="text/javascript">

        require(["esri/map",
                    "esri/layers/ArcGISDynamicMapServiceLayer",
                    "dojo/on",
                    "dojo/dom",
                    "dojo/colors",
                    "esri/symbols/SimpleFillSymbol",
                    "esri/layers/FeatureLayer",
                    "esri/symbols/SimpleLineSymbol",
                    "esri/renderers/UniqueValueRenderer",
                    "dojo/domReady!"],
                function (Map, ArcGISDynamicMapServiceLayer,on,dom,Color,SimpleFillSymbol, FeatureLayer, SimpleLineSymbol,UniqueValueRenderer) {
                    var map = new esri.Map("MyMapDiv");
                    var layer = new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/Test/ft/MapServer");
                    map.addLayer(layer);
                    //获得id为btn的DOM元素
                    var btn=dom.byId("btn");
                    //绑定相应的事件
                    on(btn,"click",function(){
                        //定义一个要素图层
                        var featureLayer = new FeatureLayer(
                        "http://localhost:6080/arcgis/rest/services/Test/ft/MapServer/1",
                         {
                            mode:FeatureLayer.MODE_SNAPSHOT,
                            outFields: ["*"]
                         });
                        //定义线符号
                        var lineSymbol=new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new Color([255, 0, 0]), 3);
                        //定义面符号
                        var fill=new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol,new Color("#FFFFCC"));
                        //定义唯一值渲染器，对字段alias进行渲染，fill是默认的渲染符号
                        var renderer = new UniqueValueRenderer(fill, "alias");
                        //设置渲染的方式
                        renderer.addValue("C区宿舍", new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol,new Color([0, 255, 0, 0.5])));
                        renderer.addValue("B区宿舍", new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol,new Color([0, 0, 255, 0.5])));
                        renderer.addValue("A区宿舍",new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol,new Color([255, 0, 255, 0.5])));
                        renderer.addValue("公共出口", new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol,new Color([255, 255, 255, 0.75])));
                        featureLayer.setRenderer(renderer);
                        map.addLayer(featureLayer);              
                    })  
                });


    </script>
</head>
<body>
<div id="MyMapDiv" class="MapClass"></div>
<button id="btn">渲染</button>
</body>
</html>

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67

运行结果之前：

这里写图片描述

运行结果之后：

这里写图片描述

2.2需求二（分类渲染）

根据面积字段实现分类渲染，由于代码只是修改了渲染器，所以直接将代码贴出来

2.2.1全部代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>UniqueValueRenderer</title>
    <link  rel="stylesheet"  type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/dijit/themes/tundra/tundra.css"/>
    <link  rel="stylesheet"  type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/esri/css/esri.css" />
    <script  type="text/Javascript" src="http://localhost/arcgis_js_api/library/3.17/3.17/init.js"></script>
    <style type="text/css">
        .MapClass{
            width:100%;
            height:600px;
            border:1px solid #000;
        }
    </style>
    <script type="text/javascript">

        require(["esri/map",
                    "esri/layers/ArcGISDynamicMapServiceLayer",
                    "dojo/on",
                    "dojo/dom",
                    "dojo/colors",
                    "esri/symbols/SimpleFillSymbol",
                    "esri/layers/FeatureLayer",
                    "esri/symbols/SimpleLineSymbol",
                    "esri/renderers/ClassBreaksRenderer",
                    "dojo/domReady!"],
                function (Map, ArcGISDynamicMapServiceLayer,on,dom,Color,SimpleFillSymbol, FeatureLayer, SimpleLineSymbol,ClassBreaksRenderer) {
                    var map = new esri.Map("MyMapDiv");
                    var layer = new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/Test/ft/MapServer");
                    map.addLayer(layer);
                    //获得id为btn的DOM元素
                    var btn=dom.byId("btn");
                    //绑定相应的事件
                    on(btn,"click",function(){
                        //定义一个要素图层
                        var featureLayer = new FeatureLayer(
                        "http://localhost:6080/arcgis/rest/services/Test/ft/MapServer/1",
                         {
                            mode:FeatureLayer.MODE_SNAPSHOT,
                            outFields: ["*"]
                         });
                        //定义线符号
                        var lineSymbol=new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new Color([255, 0, 0]), 3);
                        //定义面符号
                        var fill=new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol,new Color("#FFFFCC"));
                        //定义唯一值渲染器，对字段alias进行渲染，fill是默认的渲染符号
                        var renderer = new ClassBreaksRenderer(fill, "OBJECTID");
                        //设置渲染间隔
                        renderer.addBreak(0,20, new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol,new Color([0, 255, 0, 0.5])));
                        renderer.addBreak(20,30, new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol,new Color([0, 0, 255, 0.5])));
                        renderer.addBreak(30,40,new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol,new Color([255, 0, 255, 0.5])));
                        renderer.addBreak(40,60, new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol,new Color([255, 255, 255, 0.75])));
                        featureLayer.setRenderer(renderer);
                        map.addLayer(featureLayer);              
                    })  
                });


    </script>
</head>
<body>
<div id="MyMapDiv" class="MapClass"></div>
<button id="btn">渲染</button>
</body>
</html>

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67

运行结果前：

这里写图片描述

运行结果后：

这里写图片描述

2.3需求三（服务器渲染）

当数据量过大时，客户端渲染变显得有些慢了，此时可以使用服务器渲染，服务器渲染提供了两种渲染的方式：唯一值渲染，分类渲染，在此处我们用到的为分类渲染。

注意：服务器渲染不需要要素服务即可。

2.3.1代码实现

  • 创建一个按钮（用于触发服务器渲染）
<input type="button" id="Btn" value="服务器渲染" />
 
 
  • 1

 
 
  • 1
  • 给按钮绑定点击事件
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/Test/ft/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);


            });
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 处理服务器返回的结果
            //处理服务器返回来的结果
            function showRender(renderer) {

                if (renderer != null) {
                    //定义要素图层，注意：这个地方我们用到并不是要素服务，而是地图服务
                    var featureLayer = new FeatureLayer("http://localhost:6080/arcgis/rest/services/Test/ft/MapServer/1",{
                        mode:  FeatureLayer.MODE_SNAPSHOT,
                        outFields: ["*"]
                    });     
                    //赋予渲染器
                    featureLayer.setRenderer(renderer);
                    featureLayer.refresh();
                    MyMap.addLayer(featureLayer);
                }
            }
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

2.3.2全部代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>GenerateRendererTask</title>
    <link  rel="stylesheet"  type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/dijit/themes/tundra/tundra.css"/>
    <link  rel="stylesheet"  type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/esri/css/esri.css" />
    <script  type="text/Javascript" src="http://localhost/arcgis_js_api/library/3.17/3.17/init.js"></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/Test/ft/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/Test/ft/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/Test/ft/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>

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116

运行之前的结果：

这里写图片描述

运行之后的结果：

这里写图片描述

sophiasy
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【ArcGIS微课1000例】0042：ArcGIS自带取色器工具的妙用
「 刘一哥与GIS的故事」
10-30 2627
在ArcGIS中作图时，通常要进行颜色对照填充，输入特定的RGB值，本文介绍ArcGIS自带取色器工具的妙用，及第三方颜色拾取工具。
ArcGIS API添加图层标注以及自定义标注颜色的代码
挣钱花388的博客
11-16 1405
QQ交流群：607330463 GIS开发技术最强交流群 未经允许 禁止转载 可以参考 目录 1效果展示 2数据准备 3代码详情 1效果展示 2数据准备 3代码详情 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewpo...
ArcGIS API for JavaScript4.8 实例
10-26
包含大量的ArcGIS API for JavaScript4.8的开发实例，可用于WebGIS开发者学习资料，内容全面，并且能正常执行。
ArcgisForJs快速入门
最新发布
【cacrle】的博客
01-28 1445
ArcGIS API for JavaScript是一款由Esri公司开发的用于创建WebGIS应用的JavaScript库。它允许开发者通过调用ArcGIS Server的REST API，将地图资源和其它资源（如ArcGIS Online）嵌入到Web应用中。ArcGIS API for JavaScript提供了丰富的功能，包括页面布局、地图图层、空间坐标转换、要素符号、专题图、属性查询、空间分析、三维场景、小部件、渲染器等。本文介绍如何快速入门ArcgisForJs。
ArcGIS API for JavaScript 4.x 教程（四） 添加点、线和多边形
强者征服今天，懦夫哀叹昨天，懒汉坐等明天。
08-10 1266
了解如何在地图中显示点、线和多边形图形。图形是用于在地图或场景中显示点、线、多边形和文本的视觉元素。图形由几何图形、符号和属性组成，单击时可以显示弹出窗口。您通常使用图形来显示未连接到数据库（即GPS位置）的地理数据。在本教程中，您将学习如何将地图上的点、线和多边形显示为图形。笔记有关在应用程序中实现图形的更多背景信息，请访问《映射API和位置服务》指南中的图形、样式和数据可视化。
ArcGIS API for JavaScript 4.X Color类（史上最全)
weixin_38866386的博客
09-28 632
API支持多种颜色设置方式 var color = new Color(“green”); // named value var color = new Color("#00FF00"); // hex value var color = new Color(“hsl(120, 100%, 50%)”); // hsl var color = new Color(“hsla(120, 10...
arcmap 设置线段的不同颜色（及其他转化）
思緒凌亂
10-21 1万+
一： shp 转化为 mxd或导出地图  当时做的第一个shp文件，应该是研一的第二个学期了，都不记得是怎么操作的了； 通过file另存为mxd即可生成各个shp的arcmap可以直接打开的mxd文件，这样从单一的shp要素转化为可以发布的mxd地图格式了； 导出地图可以导出为各种形式的地图 二： 由源数据（例如经纬度坐标）生成shp要素文件             1． 首先
arcgis for javsscript4.19根据不同类型加载不同颜色的点位
Anything2207294253的博客
10-19 854
我使用vue，将GIS地图存入vuex中，因为需要做大屏，地图好几处需要，所以存入vuex中，在组件中使用GIS的方法之前要监听地图是否加载完成，后执行操作地图方法，否则会报错 效果图如下图： 1、在组件中使用GIS,在地图上添加点位 import { loadModules } from 'esri-loader' loadModules([ 'esri/Graphic', 'esri/layers/GraphicsLayer' ], { url: 'https:/.
Arcgis for javascript 应用开发相关网站推荐（SDK，github社区等）
jieyucx的博客
05-31 1865
是一种用于构建基于Web的GIS应用程序的开发框架。它允许开发人员使用Esri的地图和地理空间数据来构建具有交互性和可视化效果的应用程序。提供了丰富的API和组件，使开发人员可以将地理信息绑定到Web应用程序中的各种UI元素中。该框架还具有可访问性，可扩展性和适应性。支持多种地图服务：包括ESRI的和以及其他供应商的图层服务。可以使用多种数据格式：通过支持多种数据格式，包括JSON、REST和ArcGIS Server中的地图服务，可轻松访问并集成你的数据。
ArcMap中如何给shp文件的路线数据添加不同标注，添加不同颜色
热门推荐
KimHoooooooo
07-24 1万+
背景：由于近期的一个项目路线发布出现点问题，之前一直用百度地图，不管是离线地图还是在线地图在画道路路线的时候总是会卡顿。因此老板让我学习ArcGis来发布图层和数据，由于是道路路线，需要通过不同颜色进行标注来表示道路的拥堵状况，如何使用arcgis来进行标注就成了我学习的难点。由于之前没接触过相关知识，好不容易磕磕碰碰摸索出来，写个博客，分享记录一下，顺便也加深自己的印象。 1、打开sh
ArcGIS API for JavaScript 4.22版 API+SDK
03-10
ArcGIS API for JavaScript用于构建高性能的...ArcGIS API for JavaScript整个体系构建与Dojo基础之上，而Dojo是一个JavaScript实现的开源工具包，其基本语法、使用方法大家可以参考Dojo官方网站的相关说明和示例代码。
arcgis api for javascript v4.23
06-26
arcgis api for javascript v4.23
arcgis api for javascript 3.23实现的简单编辑功能
01-19
用arcgis api for javascript 3.23实现的简单编辑功能 能绘制点线面
arcgis for js画扇形并给它填充不同的颜色
wangwuyilove的专栏
06-04 7230
有点颓废了，好久不写了。不写东西还是会忘。 最近项目用到了arcigs地图这一块，需要在上面做一个扇形表示区间。 不多说了先看效果图。
如何在arcmap中使用取色器
Reborn214的博客
10-22 5865
取色器工具加载方法：自定义菜单栏-->自定义模式-->命令选项卡搜索取色器 将其拖拽到工具条中，即可使用该工具 点击取色器工具，吸取想要的颜色，并给颜色起对应名字，点确定进行保存，即可在之后的符号化时使用该配色 ...
设置 svg 颜色
liyichuanZhengzhou的博客
02-23 4423
设置 svg 颜色 代码格式： <svg xmlns="" viewBox=""><path d=""></path></svg> 方法一（推荐）： svg { fill:red; } -------------------------------------------------------------------------------------------------------------------------- 方法...
未找到适用于完成此操作的图像处理组件_[译] 2020 十大 JavaScript 图像处理库
weixin_39867594的博客
11-28 731
原文地址：10 JavaScript Image Manipulation Libraries for 2020原文作者：Mahdhi Rezvi译文出自：掘金翻译计划本文永久链接：https://github.com/xitu/gold-miner/blob/master/TODO1/image-manipulation-libraries-for-javascript.md译者：IAMSHEN...
arcgis for js 3在地图上给文子图层添加背景色
qq_44426007的博客
03-09 413
arcgis for js 3在地图上给文子图层添加背景色
ArcGIS API for JavaScript里面的widgets模块的具体功能是什么？
07-13
ArcGIS API for JavaScript中的widgets模块提供了一系列交互式的用户界面元素，用于增强地图应用程序的功能和用户体验。这些widgets包括但不限于以下功能： 1. BasemapToggle（底图切换）：允许用户在不同的底图之间进行切换，比如在影像图和街道地图之间切换。 2. LayerList（图层列表）：显示地图中所有可见图层的列表，并提供控制图层可见性和顺序的选项。 3. Legend（图例）：显示地图中各个图层的符号和标签，使用户可以理解地图上显示的要素和颜色编码。 4. ScaleBar（比例尺）：在地图上显示比例尺，帮助用户了解地图上的距离和大小。 5. Search（搜索）：允许用户在地图上进行地名、地址或其他地理要素的搜索。 6. Measurement（测量）：提供测量地图上距离和面积的功能，可以帮助用户进行空间分析和规划。 7. TimeSlider（时间滑块）：允许用户通过时间滑块控制地图上时间相关数据的显示，例如历史气候数据或人口统计数据的变化。 除了以上列举的widgets，ArcGIS API for JavaScript还提供了其他丰富的widgets，以满足不同地图应用程序的需求。这些widgets可以通过简单的代码集成到地图应用程序中，为用户提供丰富的交互和功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值