ArcGIS JS API popup弹窗

本文主要是介绍ArcGIS JS API popup弹窗，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

*使用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>