*使用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>
#viewDiv
width: 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 clicked
executeIdentifyTask (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 service
console.log('event',event);
console.log(self.cdUrl);
const identifyTask = new IdentifyTask(self.cdUrl);
// Set the parameters for the Identify
const 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 click
params.geometry= event.mapPoint;
console.log('point',event.mapPoint);
params.mapExtent = self.currentView.extent;
console.log(params);
//transform mappoint to screen point
let 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 from
identifyTask.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;
//获取存储点击要素的geometry
self.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 resolved
function 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>
#viewDiv
width: 100%
height: 100%
</style>
自定义窗口组件：
<template>
<div id="test" class="testWindow">22222</div>
</template>
<script>
export default {
}
</script>
<style lang='stylus' scoped>
.testWindow
position: absolute
top: 100px
right: 30px
width: 200px
height: 200px
background-color: white
</style>
效果：
501
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
