ArcGIS API for JS4.7加载FeatureLayer，点击弹出信息并高亮显示

最新推荐文章于 2024-01-28 20:31:37 发布
最新推荐文章于 2024-01-28 20:31:37 发布
阅读量8k 收藏 22
点赞数
分类专栏： ArcGIS操作与开发 WebGIS开发 文章标签： FeatureLayer ArcGIS ArcGIS Server 要素服务
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gisuuser/article/details/81246825
版权

      我加载的是ArcGIS Server本地发布的FeatureService，ArcGIS API for JS4.7记载FeatureLayer时，在二维需要通过代码启用WebGL渲染，在三维模式下，则不需要。不启用WebGL，则无法显示进行高亮显示。我在二维模式下，高亮接口是没有生效，因此，二维模式下，自己写了一个高亮，三维还是用的自带的高亮。

二维模式代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>要素服务</title>
    <link type="text/css" rel="stylesheet" href="http://localhost/arcgis/esri/css/main.css"/>
    <link type="text/css" rel="stylesheet" href="css/index.css"/>
    <script>
        //高亮显示只能在WebGL渲染时才能生效，该功能目前处于beta阶段
        var dojoConfig = {
            has: {
                "esri-featurelayer-webgl": 1
            }
        }
    </script>
    <script src="http://localhost/arcgis/"></script>
</head>
<body>
<div id="viewDiv"></div>

<script>
    require(["esri/Map", "esri/views/MapView", "esri/config", "esri/layers/FeatureLayer", "dojo/domReady"], function (Map, MapView, esriConfig, FeatureLayer) {
        esriConfig.request.corsEnabledServers.push("localhost:6443");//设置地图服务器已允许跨域
        esriConfig.request.corsEnabledServers.push("localhost:63342");
        var map = new Map({
            // basemap: "streets"//ESRI提供的底 图
            basemap: "dark-gray"
        });
        //二维视图，并初始化视图位置
        var view = new MapView({
            container: "viewDiv",
            map: map,
            extent: {
                xmin: 111.27418783887504,
                ymin: 27.65361115167269,
                xmax: 119.18589568326072,
                ymax: 30.663629324047992,
                spatialReference: 4326
            }
        });
        //乡镇级属性模版
        var popupTemplate = {
            title: "乡镇数据",
            content: [{
                type: "fields",
                fieldInfos: [{
                    fieldName: "name",
                    label: "行政单位名称",
                    format: {
                        places: 0,
                        digitSeparator: true
                    }
                }, {
                    fieldName: "code",
                    label: "行政单位代码",
                    format: {
                        places: 0,
                        digitSeparator: true
                    }
                }, {
                    fieldName: "supercode",
                    label: "上级行政单位代码",
                    format: {
                        places: 0,
                        digitSeparator: true
                    }
                }, {
                    fieldName: "level",
                    label: "行政单位等级",
                    format: {
                        places: 0,
                        digitSeparator: true
                    }
                }]
            }]
        };
        var town = new FeatureLayer({
            url: "https://localhost:6443/arcgis/rest/services/jiangxi/FeatureServer/0",
            outFields: ["*"],
            popupTemplate: popupTemplate
        });//乡镇级数据
        popupTemplate.title = "县级数据";
        var county = new FeatureLayer({
            url: "https://localhost:6443/arcgis/rest/services/jiangxi/FeatureServer/1",
            outFields: ["*"],
            popupTemplate: popupTemplate
        });//县级数据
        popupTemplate.title = "市级数据";
        var city = new FeatureLayer({
            url: "https://localhost:6443/arcgis/rest/services/jiangxi/FeatureServer/2",
            outFields: ["*"],
            popupTemplate: popupTemplate
        });//市级数据
        popupTemplate.title = "省级数据";
        var province = new FeatureLayer({
            url: "https://localhost:6443/arcgis/rest/services/jiangxi/FeatureServer/3",
            outFields: ["*"],
            popupTemplate: popupTemplate
        });//省级数据
        map.add(town);
        map.add(county);
        map.add(city);
        map.add(province);
        //点击视窗进行碰撞检测，检测点击的目标graphic
        view.on("click", function (evt) {
            view.hitTest(evt).then(function (response) {
                var result = response.results[0];
                if (result && result.graphic) {
                    console.log(result);
                    var graphic = result.graphic;
                    //自定义高亮
                    //这里的几何图形是面状，配置graphic的symbol为fillSymbol
                    graphic.symbol = {
                        type: "simple-fill",
                        color: "red",
                        outline: {
                            color: [128, 128, 128, 0.5],
                            width: "0.5px"
                        }
                    };
                    view.graphics.removeAll();//清除上一次点击目标
                    view.graphics.add(graphic);//添加新的点击目标
                }
            })
        });
    })
</script>
</body>
</html>

二维模式效果图：

三维模式代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>要素服务</title>
    <link type="text/css" rel="stylesheet" href="http://localhost/arcgis/esri/css/main.css"/>
    <link type="text/css" rel="stylesheet" href="css/index.css"/>
    <script src="http://localhost/arcgis/init.js"></script>
</head>
<body>
<div id="viewDiv"></div>
<script>
    require(["esri/Map", "esri/views/SceneView", "esri/config", "esri/layers/FeatureLayer", "dojo/domReady"], function (Map, SceneView, esriConfig, FeatureLayer) {
        esriConfig.request.corsEnabledServers.push("localhost:6443");//设置地图服务器已允许跨域
        esriConfig.request.corsEnabledServers.push("localhost:63342");
        var map = new Map({
            basemap: "dark-gray"
        });
        //二维视图，并初始化视图位置
        var view = new SceneView({
            container: "viewDiv",
            map: map,
            extent: {
                xmin: 111.27418783887504,
                ymin: 27.65361115167269,
                xmax: 119.18589568326072,
                ymax: 30.663629324047992,
                spatialReference: 4326
            }
        });
        //乡镇级属性模版
        var popupTemplate = {
            title: "乡镇数据",
            content: [{
                type: "fields",
                fieldInfos: [{
                    fieldName: "name",
                    label: "行政单位名称",
                    format: {
                        places: 0,
                        digitSeparator: true
                    }
                }, {
                    fieldName: "code",
                    label: "行政单位代码",
                    format: {
                        places: 0,
                        digitSeparator: true
                    }
                }, {
                    fieldName: "supercode",
                    label: "上级行政单位代码",
                    format: {
                        places: 0,
                        digitSeparator: true
                    }
                }, {
                    fieldName: "level",
                    label: "行政单位等级",
                    format: {
                        places: 0,
                        digitSeparator: true
                    }
                }]
            }]
        };
        var town = new FeatureLayer({
            url: "https://localhost:6443/arcgis/rest/services/jiangxi/FeatureServer/0",
            outFields: ["*"],
            popupTemplate: popupTemplate
        });//乡镇级数据
        popupTemplate.title = "县级数据";
        var county = new FeatureLayer({
            url: "https://localhost:6443/arcgis/rest/services/jiangxi/FeatureServer/1",
            outFields: ["*"],
            popupTemplate: popupTemplate
        });//县级数据
        popupTemplate.title = "市级数据";
        var city = new FeatureLayer({
            url: "https://localhost:6443/arcgis/rest/services/jiangxi/FeatureServer/2",
            outFields: ["*"],
            popupTemplate: popupTemplate
        });//市级数据
        popupTemplate.title = "省级数据";
        var province = new FeatureLayer({
            url: "https://localhost:6443/arcgis/rest/services/jiangxi/FeatureServer/3",
            outFields: ["*"],
            popupTemplate: popupTemplate
        });//省级数据
        map.add(town);
        map.add(county);
        map.add(city);
        map.add(province);
    })
</script>
</body>
</html>

三维模式效果图：

GIS开发者
关注
  • 0
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 11
    评论
专栏目录
ArcGIS API之图层缩放
11-03
该代码基于ArcGIS API for JavaScript实现了图层缩放至某个范围
arcgis api for js 自定义弹出信息提示框
qq_43725946的博客
11-30 2620
一、要素图层中有些字段，我们并不想直接显示，比如我们一般用0表示未完成，1表示完成。在popuptemplate弹出框中，字段自定义显示挺有用。下面演示这种用法。 二、代码演示。 let template = { title: '违建信息', content: [{ type: 'fields', fieldInfos: [ { fieldName: 'ZJMC',
ArcgisForJs快速入门
最新发布
【cacrle】的博客
01-28 1374
ArcGIS API for JavaScript是一款由Esri公司开发的用于创建WebGIS应用的JavaScript库。它允许开发者通过调用ArcGIS Server的REST API，将地图资源和其它资源（如ArcGIS Online）嵌入到Web应用中。ArcGIS API for JavaScript提供了丰富的功能，包括页面布局、地图图层、空间坐标转换、要素符号、专题图、属性查询、空间分析、三维场景、小部件、渲染器等。本文介绍如何快速入门ArcgisForJs。
Arcgis api for javascript(4.5版本) - 点击多边形(Polygon)并高亮显示
04-10
Arcgis api for javascript(4.5版本) - 点击多边形(Polygon)并高亮显示
ArcGIS API for JS 4.8二维高亮无效与FeatureLayer注记不显示的问题
做GIS梦的人
08-03 2499
问题发现        ArcGIS API for JS 4.8会出现一个问题，添加进来的FeatureLayer在三维模式下，点击高亮显示，在二维下点击就无高亮的效果。当使用labelingInfo注记要素图层的时候也会出现这个问题，在三维下注记显示，在二维下注记不显示。 问题研究     查看官方的API发现，这两个功能都需要WebGL的支持，三维下默认是WebGL渲染，二维下需要代码...
Arcgis for Javascript之featureLayer图和属性的互操作
爱吃肉的熊猫
06-25 1377
说明： 主要实现加载FeatureLayer与显示属性表，并实现属性表与地图的联动，首先，看看实现后的效果： 显示效果 如上图所示，本文章主要实现了以下几个功能：1、FeatureLayer属性表的分页加载与显示；2、属性表和地图的互操作，包括鼠标经过时在地图上显示名称并高亮显示、点击列表显示对象的信息框，如下图： 显示信息框 下面，说说具体的实现思路与代码
ArcGIS For JavaScript API Feature layer hover(功能图层的悬浮)————（二十六）
X-rapido的专栏
01-21 9504
描述：  在”South Carolina南卡罗来纳州“的县上进行鼠标悬浮，跳出提示框。鼠标事件进行控制其显示方式。 重要代码： （1）控制显示的州 var southCarolinaCounties = new esri.layers.FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services
arcgis api for 4.x 开发笔记-在Vue 2.X项目中开发arcgis api for javascript 4.x（七）—— PopupTemplate使用
花姐夫JUN的博客
05-25 917
为特定层或图形格式化和定义 Popup 的内容。当选择视图中的要素时，用户还可以使用 PopupTemplate 访问要素属性的值和 Arcade 表达式返回的值。包含 title 和 content 属性，它们充当用于将要素的属性转换为 HTML 表示的模板。语法 {fieldName} 或 {expression/expressionName} 执行参数替换。Graphic 的默认行为是在单击 Graphic 后显示视图的 Popup。此默认行为需要 PopupTemplate。
ArcGIS JS API popup弹窗
suntongxue100的博客
07-05 3698
一、要素服务popup 原始弹窗由popup微件控制，view对象都自带默认的popup，格式可以由Featurelayer的popupTemplate属性控制。 测试代码（Vue中）： <template> <div id="viewDiv"> <InfoWindow v-show="this.showWindow"></InfoWindow> </div>
ArcGIS API for JavaScript 4.2学习笔记[16] 弹窗自定义功能按钮及为要素自定义按钮（第五章完结）...
weixin_30508241的博客
02-18 627
这节对Popups这一章的最后两个例子进行介绍和解析。 第一个【Popup Actions】介绍了弹窗中如何自定义工具按钮（名为actions），以PopupTemplate+FeatureLayer的形式测量要素的长度为例子进行介绍。 第二个【Custom popup actions per feature】则是上一个的升级，如果说上一个例子的功能是写死的，那么这个例子就把这个功能...
arcgis api for javascript(一)使用自定义数据对FeatureLayer进行渲染
芙兰泣露的博客
06-27 1万+
为arcgis api for javascript中的FeatureLayer添加数据，修改数据，仅限于client端，修改的数据不保存到server端
arcgis api for Javascript4.7下载
06-21
arcgis api for Javascript4.7下载
Arcgis API for Javascript 4.7
05-11
最新的arcgis api for javascript 4.7版本，全面支持BS三维开发，以及适配移动浏览器浏览
Shapefile格式数据去除投影坐标系
热门推荐
做GIS梦的人
08-13 3万+
在处理ArcGIS矢量数据的时候，我们如果需要去掉数据的坐标系，有一个简单的方法 1.先把数据转换成Shapefile格式，如果已经是了，就不用转换。一个已经有投影的Shapefile格式数据通常由以下文件组成，如下图： 2.上图中的后缀名为prj的文件就是投影信息文件，我们把它删除就可以去掉投影信息，下面两个图是同一个数据删除prj文件后的属性对比： 删除后
Leaflet调用谷歌地图、天地图、智图地图、高德题图一键搞定
做GIS梦的人
08-26 2万+
Leaflet调用各种地图的功能十分复杂，幸好有leaflet.ChineseTmsProviders这个插件，这四种地图直接就可以加载进来，十分方便。 下面是我做的例子：
Python使用pyshp库读取shapefile信息
做GIS梦的人
08-14 1万+
通过pyshp库，可以读写Shapefile文件，查询相关信息，github地址为https://github.com/GeospatialPython/pyshp#reading-shapefile-meta-data import shapefile # 使用pyshp库 file = shapefile.Reader("data\\市界.shp") shapes = file.sha...
ArcGIS批量打断相交线
做GIS梦的人
06-08 1万+
在数据处理时，有时候需要把相交的线全部从交点打断。今天说一下在ArcGIS里 如何实现：最初线的效果如上图所示打开ArcToolBox，找到要素转线工具在弹出的面板中处理选择线要素图层然后确定最终生成断开之后的图层，如下图所示：可以看到，线全部从交点处断开了...
在ArcGIS中，线要素批量加节点
做GIS梦的人
06-06 1万+
因为实际需要，要对ArcGIS中的线要素批量等距离添加节点。寻找了很久终于找到了解决办法。如下在ArcGIS中打开线要素在ArcToolBox里选择增密在弹出的面板中进行操作，选择需要加密的要素图层，然后选择增密方法 距离/角度/偏移量，这里我选择的是距离，然后输入距离，选择距离单位，这里选择了米最后加密的结果如下所示：...
ArcGIS API for JavaScript使用Sketch绘制多边形，包含在多边形内的FeatureLayer中的要素高亮显示
06-09
要实现这个功能，你可以按照以下步骤操作： 1. 使用Sketch类绘制多边形并获取其geometry。 ```javascript const sketch = new Sketch({ view: view, layer: sketchLayer, creationMode: "single", availableCreateTools: ["polygon"] }); sketch.on("create", function(event) { if (event.state === "complete") { const geometry = event.graphic.geometry; // TODO: 在多边形内查询FeatureLayer要素并高亮显示。 } }); ``` 2. 使用Query类查询FeatureLayer要素。 ```javascript const query = new Query(); query.geometry = geometry; featureLayer.queryFeatures(query).then(function(results) { // TODO: 高亮显示查询结果。 }); ``` 3. 高亮显示查询结果。 ```javascript const highlight = featureLayerView.highlight(results.features); ``` 完整代码示例： ```javascript const sketch = new Sketch({ view: view, layer: sketchLayer, creationMode: "single", availableCreateTools: ["polygon"] }); sketch.on("create", function(event) { if (event.state === "complete") { const geometry = event.graphic.geometry; const query = new Query(); query.geometry = geometry; featureLayer.queryFeatures(query).then(function(results) { const highlight = featureLayerView.highlight(results.features); setTimeout(function() { highlight.remove(); }, 3000); }); } }); ``` 该示例中的highlight对象可以用于移除高亮显示效果，可以通过setTimeout函数设置移除延迟时间，也可以使用其他方法手动移除。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

GIS开发者

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值