*使用ArcGIS JS API 4.19

一、要素服务popup

原始弹窗由popup微件控制，view对象都自带默认的popup，格式可以由Featurelayer的popupTemplate属性控制。

测试代码（Vue中）：

<template><div id="viewDiv"><InfoWindow v-show="this.showWindow"></InfoWindow></div></template><script>
import {loadModules} from 'esri-loader'export default {name: 'Identify',data (){return {option :{url: '/4.19/init.js',css: '/4.19/esri/themes/light/main.css'},cdUrl: " ",currentView: {},}},methods :{_createView (){const self =this;loadModules(["esri/Map","esri/views/MapView","esri/layers/MapImageLayer","esri/layers/FeatureLayer","esri/config"],self.option).then(([Map,MapView,MapImageLayer,FeatureLayer,esriConfig])=>{const cdUrl = "http://localhost:6080/arcgis/rest/services/xzqhFS/FeatureServer/0";self.cdUrl = cdUrl;const cdLayer = new FeatureLayer({url: cdUrl,popupTemplate: {title: "{DISTRICT}",lastEditInfoEnabled: false,content: [{type: "fields",fieldInfos: [{fieldName: "DISTRICT"}]}]}})const map = new Map({basemap: 'satellite'});map.add(cdLayer);const view = new MapView({map: map,container: "viewDiv",center: [104.07,30.67],zoom: 7});self.currentView = view;}).catch((e)=>{console.log(e);});},},mounted (){this._createView ();},}
</script><style lang='stylus' scoped>#viewDivwidth: 100%height: 100%</style>

效果：

另外，可以自定义一些按钮和事件，通过actions控制，参考官网示例：
https://developers.arcgis.com/javascript/latest/sample-code/sandbox/?sample=popup-actions
https://developers.arcgis.com/javascript/latest/sample-code/sandbox/?sample=popup-custom-action

二、动态地图服务popup

动态地图服务MapImageLayer是没有popTemplate属性的,所以可能需要自己写弹窗来显示信息。

测试代码（Vue中）：

<template><div id="viewDiv"><InfoWindow v-show="this.showWindow"></InfoWindow></div></template><script>
import {loadModules} from 'esri-loader'
import InfoWindow from '@/components/InfoWindow'export default {name: 'Identify',data (){return {option :{url: '/4.19/init.js',css: '/4.19/esri/themes/light/main.css'},cdUrl: " ",currentView: {},showWindow: false,sPX: 0,sPY: 0,geometryArr: []}},components:{InfoWindow},methods :{_createView (){const self =this;loadModules(["esri/Map","esri/views/MapView","esri/layers/MapImageLayer"],self.option).then(([Map,MapView,MapImageLayer])=>{const cdUrl = "http://localhost:6080/arcgis/rest/services/mapcd/MapServer/";self.cdUrl = cdUrl;const cdLayer = new MapImageLayer({url: cdUrl})const map = new Map({basemap: 'osm'});map.add(cdLayer);const view = new MapView({map: map,container: "viewDiv",center: [104.07,30.67],zoom: 7});self.currentView = view;view.when(function(){// executeIdentifyTask() is called each time the view is clicked\// view.on("click",self.executeIdentifyTask);view.on("click",function (event) {self.executeIdentifyTask(event);//self.queryFeature(event);});});}).catch((e)=>{console.log(e);});},// Executes each time the view is clickedexecuteIdentifyTask (event){//console.log(event);const self = this;// Set the geometry to the location of the view click\loadModules(["esri/views/MapView","esri/tasks/IdentifyTask","esri/Graphic","esri/tasks/support/IdentifyParameters"],self.option).then(function([MapView,IdentifyTask,Graphic,IdentifyParameters]){// Create identify task for the specified map serviceconsole.log('event',event);console.log(self.cdUrl);const identifyTask = new IdentifyTask(self.cdUrl);// Set the parameters for the Identifyconst params = new IdentifyParameters();params.tolerance = 3;params.layerIds = [0];params.layerOption = "top";params.width = self.currentView.width;params.height = self.currentView.height;params.returnGeometry = true; // Set the geometry to the location of the view clickparams.geometry= event.mapPoint;console.log('point',event.mapPoint);params.mapExtent = self.currentView.extent;console.log(params);//transform mappoint to screen pointlet sPoint = self.currentView.toScreen(event.mapPoint);//获取弹出框窗口的屏幕位置self.sPX = sPoint.x +50;self.sPY = sPoint.y -40;console.log('spoint',sPoint);document.getElementById("viewDiv").style.cursor="wait";// This function returns a promise that resolves to an array of features// A custom popupTemplate is set for each feature based on the layer it// originates fromidentifyTask.execute(params).then(function(res){const results = res.results;console.log('results',results);if (results.length>0){self.showWindow =true;}else if(results.length==0){self.showWindow =false;}self.geometryArr = [];return results.map(function(result){const feature = result.feature;//获取存储点击要素的geometryself.geometryArr.push(feature.geometry);//定义feature的template内容console.log('info',feature);let info  = feature.attributes.COUTRICT;console.log(info);feature.popupTemplate ={title: "行政区",content: info};return feature;});}).then(showPopup);// Send the array of features to showPopup()// Shows the results of the Identify in a popup once the promise is resolvedfunction showPopup(response) {//定义获取弹窗的位置if (response.length > 0) {let temp = document.getElementById("test");temp.innerHTML = `<p>${response[0].popupTemplate.title}</p><br><p>${response[0].popupTemplate.content}</p>`;temp.style.textAlign="center";temp.style.left = `${self.sPX}px`;temp.style.right = `${self.sPX}px`;}//获取点击要素geometry高亮显示self.currentView.graphics.removeAll();if (event && self.geometryArr.length) {console.log(888,self.geometryArr);self.geometryArr.forEach(function(geometry){self.currentView.graphics.add(new Graphic({geometry: geometry,symbol: {type: "simple-fill",style: "none",outline: {color: "#6600FF",width: 2}}}));});}document.getElementById("viewDiv").style.cursor = "auto";}}).catch((e)=>{console.log(e);});}},mounted (){this._createView ();},}
</script><style lang='stylus' scoped>#viewDivwidth: 100%height: 100%</style>

自定义窗口组件：

<template><div id="test" class="testWindow">22222</div>
</template><script>
export default {}
</script><style lang='stylus' scoped>.testWindowposition: absolutetop: 100pxright: 30pxwidth: 200pxheight: 200pxbackground-color: white</style>

效果：

三、其他参考

弹窗统计数据：https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=popuptemplate-promise

ArcGIS JS API popup弹窗相关推荐

ArcGIS JS API 4.X实现动态地图服务子图层显隐控制
ArcGIS JS API 4.X实现动态地图服务子图层显隐控制文章目录 ArcGIS JS API 4.X实现动态地图服务子图层显隐控制使用场景官网示例注意事项使用场景图层控制功能官网 ...
基于ArcGIS JS API 4.11实现对FeatureLayer的多变量渲染
文章目录需求背景需求分析开发过程效果图注意事项参考链接在线示例需求背景有一个二维数组,里面包含几万个表示高度的值,现在要把这些高度值在地图上展示出来.可以通过小立方体的方式展现,长宽 ...
ArcGIS JS API加载GeoServer发布的WFS服务
文章目录前言主要代码总结参考链接前言 WFS(Web Feature Service),OGC标准下的要素服务.其支持的主要操作如下: GetCapabilities (discovery ...
使用ArcGIS JS API加载WMTS图层的两种方式
文章目录前言方式一方式二前言某些项目可能多方参与,每一方使用的GIS平台有时会有所不同,这时为了统一各方地图服务,通常会发布OGC标准的WMTS地图服务供各方使用.ArcGIS API fo ...
基于ArcGIS JS API实现垂直滑动缩放条
文章目录需求背景需求分析效果图完整代码注意事项严格来说并不是基于ArcGIS JS API,应该是基于Dojo的dijit里面的VerticalSlider和VerticalRule,但是 ...
基于ArcGIS JS API封装dojo微件(以工具条为例)
1.应用场景: 我们知道ArcGIS JS API自带了一些微件(或者说是控件),比如缩放按钮.定位按钮等等.但是有的时候这些微件的样式不太符合项目实际要求,或者是项目上想要把这些组合起来,这时候我们 ...
基于ArcGIS JS API实现的两种距离和面积测量方式
文章目录前言开发思路主要代码效果测试效果图测试页面开发总结参考链接前言在一些地图地图应用中,距离.面积测量属于基础功能.ArcGIS API for JavaScript有单独提供 ...
ArcGIS JS API实现地图场景视频融合
ArcGIS JS API实现地图场景视频融合效果展示实现步骤 1.创建地图场景 2.引入相应模块并创建地图场景 3.获取点坐标 4.生成网格 5.生成图形并添加进场景中总结完整代码效果展示 ...
ArcGIS JS API 4.x（二）加载 3.x所说的动态地图服务图层
前言:在使用arcgis js api 3.x的时候,有切片地图服务和动态地图服务,从3.x到4.x版本过渡的时候,希望能够找到和3.x对应的类,在上篇博客中,我们找到了和ArcGISTiledMap ...

ArcGIS JS API popup弹窗

一、要素服务popup

二、动态地图服务popup

三、其他参考

ArcGIS JS API popup弹窗相关推荐

最新文章

热门文章

ArcGIS JS API popup弹窗

一、要素服务popup

二、 动态地图服务popup

三、其他参考

ArcGIS JS API popup弹窗相关推荐

最新文章

热门文章

二、动态地图服务popup