vue代码调用：

import { gridLineLatLng } from './js/mapGrids.js'export default {mounted(){// 显示经纬网格gridLineLatLng.currentMap = this.mapAndView// gridLineLatLng.isGetMapPageXmax = falsegridLineLatLng.init()},beforeDestroy() {// 删除经纬网格gridLineLatLng.destory()},}

详细实现代码 mapGrids.js：

/** * 地图网格工具js* */import Graphic from '@arcgis/core/Graphic.js'
import GraphicsLayer from '@arcgis/core/layers/GraphicsLayer.js'/** 地图经纬网格 */
let gridLineLatLng = {currentMap: null, // viewcurrentFeatureLayer: null, // 网格图层layerstationaryHandler: null,color: 'blue', // 网格颜色 '#6666ff'degree: 1, // 间隔度数,xmax: 0,isGetMapPageXmax: true, // 是否获取地图页面最右边的地图可见范围（最大经度）timer: null,init: function() {let gridLineLayer = gridLineLatLng.currentMap.map.findLayerById('gridLineLayer')if (!gridLineLayer) {gridLineLayer = new GraphicsLayer({id: 'gridLineLayer',graphics: [],spatialReference: gridLineLatLng.currentMap.spatialReference})gridLineLatLng.currentMap.map.add(gridLineLayer)} else {// 清理图层gridLineLayer.graphics.removeAll()}gridLineLatLng.currentFeatureLayer = gridLineLayerlet zoom = gridLineLatLng.currentMap.zoom // 获取当前地图缩放级别gridLineLatLng.degree = gridLineLatLng.getDegree(zoom)// 经纬度间隔let degree = gridLineLatLng.degree  // 数值越小，计算事件越长const decimalPart = degree.toString().split('.')[1]// 经纬度小数部分const fixedNum = decimalPart ? decimalPart.length : 0// 经纬度小数点后保留位数console.log('zoom:', zoom, ', increase degree:', degree)// 获取地图页面最右边的地图可见范围（最大经度）gridLineLatLng.xmax = 0if (gridLineLatLng.isGetMapPageXmax) {// 获取地图页面右上角的经纬度const html = document.getElementById('map-container')const screenPoint = {x: html.clientWidth,y: 0,spatialReference: gridLineLatLng.currentMap.spatialReference}const point = gridLineLatLng.currentMap.toMap(screenPoint)gridLineLatLng.xmax = point.x}if (zoom > 0 || zoom < 20) {let extent = gridLineLatLng.currentMap.extentlet ymax = extent.ymax // 当前视口最北点纬度let xmax = gridLineLatLng.xmax || extent.xmax // 当前视口最东点经度let ymin = extent.yminlet xmin = extent.xminlet lineSymbol = {type: 'simple-fill', outline: { color: gridLineLatLng.color,width: 1,style: 'dash'}}let textSymbol = {type: 'text',  color: 'white',haloColor: 'red',haloSize: '1px',text: '',xoffset: 0,yoffset: -10,font: {  size: 11,weight: 'bold'}}// 经线网格// for (let index = -180; index <= 180; index += degree) {for (let index = xmin + degree / 3; index <= xmax; index += degree) {let polyline = {type: 'polyline', paths: [[index, 90], [index, -90]],spatialReference: gridLineLatLng.currentMap.spatialReference}let lonLineGraphic = new Graphic({geometry: polyline,symbol: lineSymbol})// 添加到图层组中gridLineLatLng.currentFeatureLayer.graphics.add(lonLineGraphic)textSymbol.text = index.toFixed(fixedNum) + '°'const textGraphic = new Graphic({geometry: {type: 'point', longitude: index,latitude: ymax,spatialReference: gridLineLatLng.currentMap.spatialReference}, symbol: textSymbol})gridLineLatLng.currentFeatureLayer.graphics.add(textGraphic)}// 纬线网格// for (let index = -90; index <= 90; index += degree) {for (let index = ymin + degree / 3; index <= ymax; index += degree) {let polyline = {type: 'polyline', paths: [[-180, index], [180, index]],spatialReference: gridLineLatLng.currentMap.spatialReference}let lonLineGraphic = new Graphic({geometry: polyline,symbol: lineSymbol})// 添加到图层组中gridLineLatLng.currentFeatureLayer.graphics.add(lonLineGraphic)textSymbol.text = index.toFixed(fixedNum) + '°'textSymbol.yoffset = 4textSymbol.xoffset = -22const textGraphic = new Graphic({geometry: {type: 'point', longitude: xmax,latitude: index,spatialReference: gridLineLatLng.currentMap.spatialReference}, symbol: textSymbol})gridLineLatLng.currentFeatureLayer.graphics.add(textGraphic)}}// 添加范围变动监听,，动态生成网格gridLineLatLng.stationaryHandler = gridLineLatLng.currentMap.watch('stationary', status => {if (status) {if (gridLineLatLng.timer) {clearTimeout(gridLineLatLng.timer)}gridLineLatLng.timer = setTimeout(() => {if (gridLineLatLng.stationaryHandler) {gridLineLatLng.stationaryHandler.remove()}gridLineLatLng.init()}, 1000)}})},getDegree: function(zoom) {let degree = 0.01switch (zoom) {case 0:degree = 0.7breakcase 1:degree = 0.3breakcase 2:degree = 0.1breakcase 3:degree = 0.06breakcase 4:degree = 0.04breakcase 5:degree = 0.02breakcase 6:degree = 0.009breakcase 7:degree = 0.006breakcase 8:degree = 0.003breakdefault:degree = 0.01break}return degree},destory: function() {// 移除地图事件if (gridLineLatLng.stationaryHandler) {gridLineLatLng.stationaryHandler.remove()}// 移除图层gridLineLatLng.currentMap.map.remove(gridLineLatLng.currentFeatureLayer)}
}export {gridLineLatLng
}

实现思路可参考：
vue+leaflet实现地图网格（https://blog.csdn.net/qq_41441896/article/details/131470559）