小程序集arcgis地图显示自定义坐标的功能实现记录!(学习笔记)

最近再做一个新能源回收项目,项目中有个根据回收点坐标数据显示区域内回收点位置,点击图标直接导航到该位置,及分布的需求,研究了一下,实现效果如下,实现起来很简单,代码及效果

回收点位置及分布效果如图:

点击图标导航直达效果:

代码如下

bash 复制代码
data() {
    return {
      longitude: 118.796877, // 初始经度
      latitude: 32.060255,  // 初始纬度
      scale: 14,           // 初始缩放级别
      markers: [],         // 用于存储地图上的标记数据
    };
  },
  onLoad() {
    // 假设这里你已经通过API获取了ArcGIS图层中的点位数据,并解析成了以下格式:  
    const pointsData = [  
      { id: 1, latitude: 32.060255, longitude: 118.796877, iconPath: '/static/icondc/icon2.png' },
  	  { id: 2, latitude: 31.943066, longitude: 118.795807, iconPath: '/static/icondc/icon2.png' },
  	  { id: 3, latitude: 32.060005, longitude: 118.788877, iconPath: '/static/icondc/icon2.png' },
	   { id: 4, latitude: 32.056232, longitude: 118.797241, iconPath: '/static/icondc/icon2.png' },
	    { id: 5, latitude: 32.05338585150547, longitude: 118.79315867787933, iconPath: '/static/icondc/icon2.png' },
	  
      // ... 其他点位数据  
    ];  
  
    // 将点位数据转换为小程序map组件可以识别的markers数组  
    const markers = pointsData.map(point => ({  
      id: point.id,  
      latitude: point.latitude,  
      longitude: point.longitude,  
      iconPath: point.iconPath, // 自定义图标路径,注意路径可能需要是相对于项目的静态资源路径  
      width: 50, // 标记宽度  
      height: 50, // 标记高度  
    }));  
  
    this.markers = markers; // 在 uni-app 中,你可以直接修改 data 中的属性来触发视图更新  
  },
  methods: {
    // 用于处理 marker 的点击事件
    onMarkerTap(event) {
      const markerId = event.markerId; // 获取当前点击的 marker 的 id
      const tappedMarker = this.markers.find(marker => marker.id === markerId); // 根据 id 获取点击的 marker 数据
      
      if (!tappedMarker) return; // 如果找不到 marker,则不执行后续操作
      
      // 在这里可以弹出一个浮窗提示用户是否导航到这里
      // 假设有一个自定义的弹窗组件 showDialog 可以接收一个回调函数
      this.showDialog(() => {
        // 当用户点击确认后,执行导航操作
        uni.openLocation({
          latitude: tappedMarker.latitude,
          longitude: tappedMarker.longitude,
          success() {
            console.log('导航成功');
          },
          fail() {
            console.log('导航失败');
          }
        });
      });
    },
相关推荐
头疼的程序员2 小时前
MySQL学习之触发器
学习·mysql
ThreeYear_s3 小时前
基于FPGA的PID算法学习———实现PI比例控制算法
学习·算法·fpga开发
银色的白5 小时前
工作记录:人物对话功能开发与集成
vue.js·学习·前端框架
小艳加油5 小时前
GIS应用攻略:全面涵盖GIS基础、ArcGIS操作、数据制备、空间分析、地图制作、三维建模与多领域实战应用,助力科研与行业实践!
arcgis·gis·空间分析·数据制备
新中地GIS开发老师6 小时前
三维GIS开发cesium智慧地铁教程(4)城市白模加载与样式控制
学习·arcgis·智慧城市·webgl·gis开发·webgis·地理信息科学
玩转4G物联网6 小时前
零基础玩转物联网-串口转以太网模块如何快速实现与MQTT服务器通信
服务器·物联网·网络协议·tcp/ip·信息与通信·iot·fs100p
Studying 开龙wu6 小时前
机器学习监督学习实战五:六种算法对声呐回波信号进行分类
学习·算法·机器学习
软件开发技术深度爱好者7 小时前
HTML版英语学习系统
学习·html
nenchoumi31197 小时前
UE5 学习系列(二)用户操作界面及介绍
windows·学习·ue5·机器人
NULL指向我7 小时前
香橙派3B学习笔记9:Linux基础gcc/g++编译__C/C++中动态链接库(.so)的编译与使用
笔记·学习