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

  我加载的是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小博工作室
来源:CSDN
原文:https://blog.csdn.net/GISuuser/article/details/81246825
版权声明:本文为博主原创文章,转载请附上博文链接!

点赞
收藏

评论区

加载中...

相关推荐

MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1

文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s

Oracle 分组与拼接字符串同时使用

SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(

MySQL部分从库上面因为大量的临时表tmp_table造成慢查询

背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_

皕杰报表之UUID

​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为

2020年前端实用代码段,为你的工作保驾护航

有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )

微信小程序new Date()转换时间异常问题

微信小程序苹果手机页面上显示时间异常,安卓机正常问题image(https://imghelloworld.osscnbeijing.aliyuncs.com/imgs/b691e1230e2f15efbd81fe11ef734d4f.png)错误代码vardate'2021030617:00:00'vardateT