06-ArcGIS API For JavaScript之渲染实现

最新推荐文章于 2023-08-13 16:40:40 发布
最新推荐文章于 2023-08-13 16:40:40 发布
阅读量565 收藏 2
点赞数 1
分类专栏： WebGIS ArcGIS API For JavaScript Map 文章标签： ArcGIS API For JavaScript WebGIS
原文链接：https://blog.csdn.net/lovecarpenter/article/details/52672046
版权

一、前言

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

二、需求

首先我们的数据（宿舍楼信息）

2.1 唯一值渲染

用 alias 属性进行唯一值渲染

全部代码：

<!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>

运行结果之前：

运行结果之后：

2.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/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>

运行结果前：

运行结果后：

2.3 服务器渲染

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

全部代码：

<!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
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
arcgis-js-events:ArcGIS for Javascript 地图事件示例
06-15
arcgis-js-事件基于 esri 支持博客文章地图事件示例此示例使用作为构建工具，包括 linting 任务。尝试一下。指示您需要安装和才能通过命令行下载依赖项并构建应用程序。 cd进入arcgis-js-events文件夹运行npm ...
ArcGIS软件操作——地图制图
alctltp672735的博客
03-21 2408
　　 ArcGIS软件操作系列二（地图制图） 　　2016年毕业，参加工作，除了平时出差，大部分时间都在使用ArcGIS处理数据、制图，在此，先将一些制图的小心得撰写出来，希望能与各位共同交流。 1 数据准备：点、线、面等矢量数据、栅格数据的准备等（下一更会详细介绍数据处理等方面的内容）； 2 加载数据：打开ArcGIS软件，加载需要出图的数据，如下图1：加载了新疆北疆地区的栅格...
ArcGIS API for JavaScript开发之必学渲染方式及渲染符号概念（0）
qq_37550440的博客
04-18 2131
一.渲染方式 1.1简单渲染 点： "rendererType":"simple", // 渲染类型 "rendererInfo":{ // 具体的渲染信息 "type":"simple", // 渲染类型 "symbol":{ // 具体样式 "type":"esriPMS", ...
ArcGIS Maps SDK for JavaScript系列之一：在Vue3中加载ArcGIS地图
最新发布
九仞山的专栏
08-13 2266
详细介绍了在Vue3中加载ArcGIS地图的方法
ArcGIS API for JavaScript为什么有的字段可以显示有的却不能显示
dugushangliang的博客
08-30 1193
版权声明：转载请注明作者（独孤尚良dugushangliang）出处：https://blog.csdn.net/dugushangliang/article/details/100150910 由ESRI官网得到代码如下： <html> <head> <meta charset="utf-8"> <meta name="vi...
ArcGIS Engine - 图层渲染
weixin_42562567的博客
11-20 1052
/// <summary> /// 单一符号选择事件 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> private void rbSymbol_CheckedChanged(object sender, EventArgs e) ...
ArcGIS JS API创建自定义图层实现在2D地图中渲染水波纹扩散效果.zip
05-19
使用ArcGIS API创建自定义图层实现在2D地图中渲染水波纹扩撒的效果
附近JavaScript：适用于JavaScript的ArcGIS API应用程序可查找附近的地点并路由到最近的位置
02-05
您可以按原样使用附近的地点，也可以使用ArcGIS API for JavaScript对其进行扩展。产品特点类别地理编码设备位置计算方位角和距离根据白天或黑夜自动切换底图和渲染器作为构建此应用程序利用了众多技术来进行开发。...
ArcGIS API 4.X-heatmap.js
11-22
ArcGIS API for Javascript 4.X中已经提供了热力图对应的渲染器Renderer，但使用起来必须配合ArcServer服务。本文借助另外一种简单方法：热力图神器——[heatmap.js]
ArcGIS API4.X+heatmap.js热力图示例
04-15
基于ArcGIS API4.X，通过扩展heatmap.js在三维地图上实现热力图的渲染
arcgis js实现点闪烁
11-26
arcgis api for js +echarts 实现点闪烁，包含调用的js文件
arcgis api for js4.x 热力图渲染（vue，支持 点、线、面三种类型）
baicai_123的专栏
08-23 1264
1、相关全局参数的配置 //热力图图层 HeatMapLayers: [ { name: '工程建设项目(点)', id: 'heatlayer01', type: 'point', url: 'http://-----------' }, { name: '工程建设项目(面)', id: 'heatlayer02', type: 'polygon', url: 'http://---------' } ], //热力图渲染 heatmap
Arcgis API 不依赖地图服务的面要素创建和渲染
QQ24382327博客
05-25 535
需求场景：做一个专题图，图层不依赖于Arcgis地图服务，同时可以根据外部数据进行渲染。 1. 不依赖于Arcgis地图服务，首先我们想到的是
（七）ArcGIS API For Javascript之渲染实现
热门推荐
王培晓Carpenter
10-01 1万+
引言 需求 1需求一唯一值渲染 11代码实现 12全部代码 2需求二分类渲染 21全部代码 3需求三服务器渲染 31代码实现 32全部代码
arcgis api for js 之 地图操作
jiegiser博客
01-30 2495
1. 地图窗口操作 在 ArcGis Javascrippt API 中可以使用esri/toolbars/Navigation类来实现对窗口的操作，必须实例化一个该类的对象，然后调用该对象的方法即可，例如以下代码可以实现对地图的漫游操作： require(["esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/toolb
arcgis api for javascript(一)使用自定义数据对FeatureLayer进行渲染
芙兰泣露的博客
06-27 1万+
为arcgis api for javascript中的FeatureLayer添加数据，修改数据，仅限于client端，修改的数据不保存到server端
arcgis api（六）arcgis api for js 3.x Dynamic 动态图层各图层的过滤以及点击拾取功能
zhengjie0722的博客
09-02 1141
（1）ArcGISDynamicMapServiceLayer动态图层因涉及到多个子图层，其图层加载的过滤条件需要对每个子图层定义过滤条件。 esriLoader .loadModules([ 'esri/layers/ArcGISDynamicMapServiceLayer', 'esri/tasks/IdentifyTask', 'esri/tasks/IdentifyParameters', 'esri/g...
（六）ArcGIS API For Javascript之查询功能
似水流年
02-28 3572
1.引言 在ArcGIS API中查询功能是非常常用的，Esri给我们提供了三个类用于实现矢量数据查询功能。FindTask,QueryTask,IdentifyTask，他们之间的区别为： FindTask只能进行属性查询，QueryTask,IdentifyTask两个类既可以进行属性查询也可以进行空间查询。对于QueryTask,IdentifyTask两个类，QueryTask
arcgis api for javascript中支持的地图服务涂层的类型
07-12
ArcGIS API for JavaScript 支持多种类型的地图服务涂层。以下是其中一些常见的类型： 1. 切片图层（TileLayer）：切片图层是由预先生成的图像瓦片组成的图层。它们通常用于显示基础地图，如街道地图、卫星影像等。 2. 动态地图服务图层（DynamicMapServiceLayer）：动态地图服务图层可以动态请求地图服务的地图图像，并支持对图层进行符号化、查询和可视化。 3. 特征图层（FeatureLayer）：特征图层用于显示和编辑地理要素数据，如点、线、面等。它支持对要素进行选择、查询和编辑操作。 4. 图像服务图层（ImageServiceLayer）：图像服务图层用于显示和分析栅格数据，如卫星影像、高程数据等。它支持对栅格数据进行渲染、裁剪和分析等操作。 5. 地形图层（ElevationLayer）：地形图层用于显示地理表面模型，如数字高程模型（DEM）。它支持对地形数据进行可视化和分析。 这些只是其中的几个类型，ArcGIS API for JavaScript 还支持其他类型的地图服务涂层，如热力图层、绘制图层等。具体使用哪种类型的图层取决于你的应用需求和数据类型。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值