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

发布于:2025-07-15 ⋅ 阅读:(15) ⋅ 点赞:(0)

由于 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
  });
  // 去除logo
  view.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.spatialReference
      x: 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>

网站公告

今日签到

点亮在社区的每一天
去签到