由于 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>