vue3+arcgisAPI4示例:自定义多个气泡窗口展示(附源码下载)

由于 arcgis api 4.x for js
目前没有提供的同时展示多个气泡窗口展示，Popup默认只可以弹出一个，某些情况下，用户想加载弹出多个窗口，所以，本篇实现了 arcgis
api 4.x for js 自定义多个气泡窗口展示效果。

demo源码运行环境以及配置

运行环境：依赖Node安装环境，需要安装Node。

运行工具：vscode或者其他工具。

配置方式：下载demo源码，vscode打开，然后顺序执行以下命令：
（1）下载demo环境依赖包命令：npm install -g
（2）yarn install
（3）启动demo命令：yarn dev
（4）打包demo命令： yarn build:prod

示例效果

实现思路

采用 leaflet 气泡窗口样式 css ，自定义 arcgis api 4.x 气泡窗口 div 容器，地图叠加 div
不难，难的是如何随着地图动态改变而刷新自定义窗口的位置，这也是本篇的核心内容，通过监听地图的变化事件，从而动态刷新气泡窗口的位置变化。

核心部分代码

<template><div id="viewDiv"></div><div class="titleContainer center"><span>vue3+arcgisAPI4示例:自定义多个气泡窗口展示</span></div><el-button type="primary" class="buttonRight btn1" @click="showInfoWindows">显示所有气泡窗口</el-button><el-button type="primary" class="buttonRight btn2" @click="hideInfoWindows">隐藏所有气泡窗口</el-button>
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";
import "@arcgis/core/assets/esri/themes/light/main.css";
import Map from "@arcgis/core/Map";
import MapView from "@arcgis/core/views/MapView";
import Basemap from "@arcgis/core/Basemap.js";
import esriConfig from "@arcgis/core/config";
// import { lngLatToXY } from "@arcgis/core/geometry/support/webMercatorUtils.js";
import { config } from "../config";
import { removeElementById } from '@/utils/index';
import $ from 'jquery';
let view, map = null;
let popupInfos = [];
onMounted(() => {initMap();
});
const initMap = () => {esriConfig.apiKey = 'AAPKca495ea263b64e44b61eaaecdbddebfcwEQjC8k8-6XGMrrXyCie6xzybboRl4REq-TwDQTm8Wz-8sL6REARz1wcm14Kq9ny';// 初始化创建地图对象const novaLayer = Basemap.fromId("arcgis-nova");map = new Map({// basemap: "satellite",basemap: novaLayer,});// 初始化创建视图view对象view = new MapView({container: "viewDiv",map: map,center: config.mapInitParams.center,zoom: config.mapInitParams.zoom + 3});// 去除logoview.ui.remove(["attribution", "zoom"]);// 监听视图view初始化加载完成执行view.when(function () {removeElementById('loader-wrapper');//监听地图变化事件，对应刷新气泡窗口位置view.watch("extent", function () {relocatePopup();});view.watch("rotation", function () {relocatePopup();});//地图加载完，初始化气泡窗口popupInit();});
}
//初始化写入popup的数据
const popupInit = () => {//popup初始化popupInfos = [];popupInfos.push({//地图坐标x: 113.3684,y: 23.1323,//popup内容的文字，只是个示范，当然格式不限content: "自定义气泡窗口功能1",//气泡窗口div的id唯一标识id: "info1"});popupInfos.push({x: 113.3713,y: 23.1315,content: "自定义气泡窗口功能2",id: "info2"});for (let i = 0; i < popupInfos.length; i++) {const popupInfo = popupInfos[i];//坐标转换const mapPoint = {// x: lngLatToXY(popupInfo.longitude,popupInfo.latitude)[0],// y: lngLatToXY(popupInfo.longitude,popupInfo.latitude)[1],// spatialReference: view.spatialReferencex: popupInfo.x,y: popupInfo.y,spatialReference: {wkid: 4326}};// 确保视图已经初始化if (view && view.ready) {const screenPoint = view.toScreen(mapPoint);let obj = {};obj.x = screenPoint.x;obj.y = screenPoint.y;obj.content = popupInfo.content;obj.id = popupInfo.id;loadinfoWindow(obj);}}
}
//刷新气泡窗口位置
……
</script>