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

本文介绍使用ArcGIS API for JS 4.7在二维和三维模式下加载FeatureLayer,实现点击要素弹出信息及高亮显示的方法。针对二维模式下高亮接口未生效的问题,提供了自定义高亮解决方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

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

二维模式代码:


 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>要素服务 </title>
  6. <link type="text/css" rel="stylesheet" href="http://localhost/arcgis/esri/css/main.css"/>
  7. <link type="text/css" rel="stylesheet" href="css/index.css"/>
  8. <script>
  9. //高亮显示只能在WebGL渲染时才能生效,该功能目前处于beta阶段
  10. var dojoConfig = {
  11. has: {
  12. "esri-featurelayer-webgl": 1
  13. }
  14. }
  15. </script>
  16. <script src="http://localhost/arcgis/"> </script>
  17. </head>
  18. <body>
  19. <div id="viewDiv"> </div>
  20. <script>
  21. require([ "esri/Map", "esri/views/MapView", "esri/config", "esri/layers/FeatureLayer", "dojo/domReady"], function (Map, MapView, esriConfig, FeatureLayer) {
  22. esriConfig.request.corsEnabledServers.push( "localhost:6443"); //设置地图服务器已允许跨域
  23. esriConfig.request.corsEnabledServers.push( "localhost:63342");
  24. var map = new Map({
  25. // basemap: "streets"//ESRI提供的底 图
  26. basemap: "dark-gray"
  27. });
  28. //二维视图,并初始化视图位置
  29. var view = new MapView({
  30. container: "viewDiv",
  31. map: map,
  32. extent: {
  33. xmin: 111.27418783887504,
  34. ymin: 27.65361115167269,
  35. xmax: 119.18589568326072,
  36. ymax: 30.663629324047992,
  37. spatialReference: 4326
  38. }
  39. });
  40. //乡镇级属性模版
  41. var popupTemplate = {
  42. title: "乡镇数据",
  43. content: [{
  44. type: "fields",
  45. fieldInfos: [{
  46. fieldName: "name",
  47. label: "行政单位名称",
  48. format: {
  49. places: 0,
  50. digitSeparator: true
  51. }
  52. }, {
  53. fieldName: "code",
  54. label: "行政单位代码",
  55. format: {
  56. places: 0,
  57. digitSeparator: true
  58. }
  59. }, {
  60. fieldName: "supercode",
  61. label: "上级行政单位代码",
  62. format: {
  63. places: 0,
  64. digitSeparator: true
  65. }
  66. }, {
  67. fieldName: "level",
  68. label: "行政单位等级",
  69. format: {
  70. places: 0,
  71. digitSeparator: true
  72. }
  73. }]
  74. }]
  75. };
  76. var town = new FeatureLayer({
  77. url: "https://localhost:6443/arcgis/rest/services/jiangxi/FeatureServer/0",
  78. outFields: [ "*"],
  79. popupTemplate: popupTemplate
  80. }); //乡镇级数据
  81. popupTemplate.title = "县级数据";
  82. var county = new FeatureLayer({
  83. url: "https://localhost:6443/arcgis/rest/services/jiangxi/FeatureServer/1",
  84. outFields: [ "*"],
  85. popupTemplate: popupTemplate
  86. }); //县级数据
  87. popupTemplate.title = "市级数据";
  88. var city = new FeatureLayer({
  89. url: "https://localhost:6443/arcgis/rest/services/jiangxi/FeatureServer/2",
  90. outFields: [ "*"],
  91. popupTemplate: popupTemplate
  92. }); //市级数据
  93. popupTemplate.title = "省级数据";
  94. var province = new FeatureLayer({
  95. url: "https://localhost:6443/arcgis/rest/services/jiangxi/FeatureServer/3",
  96. outFields: [ "*"],
  97. popupTemplate: popupTemplate
  98. }); //省级数据
  99. map.add(town);
  100. map.add(county);
  101. map.add(city);
  102. map.add(province);
  103. //点击视窗进行碰撞检测,检测点击的目标graphic
  104. view.on( "click", function (evt) {
  105. view.hitTest(evt).then( function (response) {
  106. var result = response.results[ 0];
  107. if (result && result.graphic) {
  108. console.log(result);
  109. var graphic = result.graphic;
  110. //自定义高亮
  111. //这里的几何图形是面状,配置graphic的symbol为fillSymbol
  112. graphic.symbol = {
  113. type: "simple-fill",
  114. color: "red",
  115. outline: {
  116. color: [ 128, 128, 128, 0.5],
  117. width: "0.5px"
  118. }
  119. };
  120. view.graphics.removeAll(); //清除上一次点击目标
  121. view.graphics.add(graphic); //添加新的点击目标
  122. }
  123. })
  124. });
  125. })
  126. </script>
  127. </body>
  128. </html>

二维模式效果图:

三维模式代码:


 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>要素服务 </title>
  6. <link type="text/css" rel="stylesheet" href="http://localhost/arcgis/esri/css/main.css"/>
  7. <link type="text/css" rel="stylesheet" href="css/index.css"/>
  8. <script src="http://localhost/arcgis/init.js"> </script>
  9. </head>
  10. <body>
  11. <div id="viewDiv"> </div>
  12. <script>
  13. require([ "esri/Map", "esri/views/SceneView", "esri/config", "esri/layers/FeatureLayer", "dojo/domReady"], function (Map, SceneView, esriConfig, FeatureLayer) {
  14. esriConfig.request.corsEnabledServers.push( "localhost:6443"); //设置地图服务器已允许跨域
  15. esriConfig.request.corsEnabledServers.push( "localhost:63342");
  16. var map = new Map({
  17. basemap: "dark-gray"
  18. });
  19. //二维视图,并初始化视图位置
  20. var view = new SceneView({
  21. container: "viewDiv",
  22. map: map,
  23. extent: {
  24. xmin: 111.27418783887504,
  25. ymin: 27.65361115167269,
  26. xmax: 119.18589568326072,
  27. ymax: 30.663629324047992,
  28. spatialReference: 4326
  29. }
  30. });
  31. //乡镇级属性模版
  32. var popupTemplate = {
  33. title: "乡镇数据",
  34. content: [{
  35. type: "fields",
  36. fieldInfos: [{
  37. fieldName: "name",
  38. label: "行政单位名称",
  39. format: {
  40. places: 0,
  41. digitSeparator: true
  42. }
  43. }, {
  44. fieldName: "code",
  45. label: "行政单位代码",
  46. format: {
  47. places: 0,
  48. digitSeparator: true
  49. }
  50. }, {
  51. fieldName: "supercode",
  52. label: "上级行政单位代码",
  53. format: {
  54. places: 0,
  55. digitSeparator: true
  56. }
  57. }, {
  58. fieldName: "level",
  59. label: "行政单位等级",
  60. format: {
  61. places: 0,
  62. digitSeparator: true
  63. }
  64. }]
  65. }]
  66. };
  67. var town = new FeatureLayer({
  68. url: "https://localhost:6443/arcgis/rest/services/jiangxi/FeatureServer/0",
  69. outFields: [ "*"],
  70. popupTemplate: popupTemplate
  71. }); //乡镇级数据
  72. popupTemplate.title = "县级数据";
  73. var county = new FeatureLayer({
  74. url: "https://localhost:6443/arcgis/rest/services/jiangxi/FeatureServer/1",
  75. outFields: [ "*"],
  76. popupTemplate: popupTemplate
  77. }); //县级数据
  78. popupTemplate.title = "市级数据";
  79. var city = new FeatureLayer({
  80. url: "https://localhost:6443/arcgis/rest/services/jiangxi/FeatureServer/2",
  81. outFields: [ "*"],
  82. popupTemplate: popupTemplate
  83. }); //市级数据
  84. popupTemplate.title = "省级数据";
  85. var province = new FeatureLayer({
  86. url: "https://localhost:6443/arcgis/rest/services/jiangxi/FeatureServer/3",
  87. outFields: [ "*"],
  88. popupTemplate: popupTemplate
  89. }); //省级数据
  90. map.add(town);
  91. map.add(county);
  92. map.add(city);
  93. map.add(province);
  94. })
  95. </script>
  96. </body>
  97. </html>

三维模式效果图:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值