当前位置: 首页 > article >正文

vue+arcgis api for js实现地图经纬网格显示

vue代码调用:

import { gridLineLatLng } from './js/mapGrids.js'

export default {
	mounted(){
		// 显示经纬网格
        gridLineLatLng.currentMap = this.mapAndView
        // gridLineLatLng.isGetMapPageXmax = false
        gridLineLatLng.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, // view
    currentFeatureLayer: null, // 网格图层layer
    stationaryHandler: 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 = gridLineLayer
       
        let 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 = 0
        if (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.extent
            let ymax = extent.ymax // 当前视口最北点纬度
            let xmax = gridLineLatLng.xmax || extent.xmax // 当前视口最东点经度
            let ymin = extent.ymin
            let xmin = extent.xmin

            let 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 = 4
                textSymbol.xoffset = -22
                const 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.01
        switch (zoom) {
            case 0:
                degree = 0.7
                break
            case 1:
                degree = 0.3
                break
            case 2:
                degree = 0.1
                break
            case 3:
                degree = 0.06
                break
            case 4:
                degree = 0.04
                break
            case 5:
                degree = 0.02
                break
            case 6:
                degree = 0.009
                break
            case 7:
                degree = 0.006
                break
            case 8:
                degree = 0.003
                break
            default:
                degree = 0.01
                break
        }
        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)


http://www.kler.cn/a/507943.html

相关文章:

  • 头盔识别技术
  • doris: Flink导入数据
  • ginx: [error] open() “/run/nginx.pid“ failed (2: No such file or directory)
  • 【算法学习笔记】30:埃氏筛(Sieve of Eratosthenes)和线性筛(Linear Sieve)
  • 如何异地远程访问本地部署的Web-Check实现团队远程检测与维护本地站点
  • 如何在 Rocky Linux 上安装极狐GitLab?
  • 大模型WebUI:Gradio全解11——Chatbot:融合大模型的多模态聊天机器人(6)
  • Qt 使用共享内存的方式限制程序单一启动
  • 深入内核讲明白Android Binder【二】
  • 【JVM-8】使用 IBM Thread and Monitor Dump Analyzer for Java (TMDA) 分析线程转储
  • 深入了解卷积神经网络(CNN):图像处理与深度学习的革命性技术
  • 修复5.0.0r 64位版本浏览器和一些库找不到的问题
  • Flink (九):DataStream API (六) Process Function
  • 如何在 Google Cloud Shell 中使用 Visual Studio Code (VS Code)?
  • Spring Boot与MyBatis
  • FPGA:Quartus软件与操作系统版本对照表
  • Java 开发常见面试题3
  • ORB-SLAM2源码学习: Frame.cc: cv::Mat Frame::UnprojectStereo将某个特征点反投影到三维世界坐标系中
  • “云计算+中职”:VR虚拟仿真实训室的发展前景
  • VS2022——WPF初始化和控件Nmae虚假报错
  • 在 JIRA 中利用仪表盘功能生成 Bug 相关图表的手册
  • 无人机(Unmanned Aerial Vehicle, UAV)路径规划介绍
  • Qotom Q10922H6 N100多网口无风扇迷你电脑2个10G和4个2.5G网口
  • Android SystemUI——NavigationBar导航栏(七)
  • 39.【4】CTFHUB web sql 布尔注入
  • 客户案例:致远OA与携程商旅集成方案