专栏首页ArcGIS JS API开发ArcGIS JS API 4.15渲染后台接口返回的数据,并进行点选查询

ArcGIS JS API 4.15渲染后台接口返回的数据,并进行点选查询

本文主要介绍下如何使用ArcGIS JS API对后台接口返回的数据进行渲染,文章中的后台返回数据使用单独的配置文件来处理,详情请看文章内容。

问题描述

出差的某一天晚上在宾馆没事干瞎想,突然想到白天做过的项目功能的时候,有个点选查询的功能引起了我的注意。在项目中为了实现点选查询,是在ArcGIS Server里面发布了一个要素服务,然后将其添加到地图上渲染,并实现了鼠标的点选查询功能,那这个功能可不可以不通过发布服务来实现呢?想到这,打开电脑仔细翻看了了一下ArcGIS JS API的官方文档,发现好像是可以,所以就立即动手了,幸运的是,我成功了,先给大家上一张效果图:

上图中的鼠标点选查询,并出现弹窗的功能实现的数据来源并不是一个发布的要素服务,而是我模拟了六个数据点,将它们保存成了一个数组,这个数组就代表我从后台拿到的数据,因为我不可能为了这样一个小功能再自己去写一个后台吧。好了,现在讲讲主要的实现步骤。

实现步骤

1、首先呢,这个demo是基于Vue来写的,所以我先初始化了一个Vue的demo,当然了,你直接弄成一个HTML页面文件是没有任何问题的,看自己喜好。然后我再项目里安装了esri-loader插件,因为要在Vue的demo里要使用ArcGIS JS API,所以要用到这东西,如果大家对这个过程不了解的话请移步至另一篇文章《【番外】 Vue中使用ArcGIS JS API 4.14开发》,在这里不做详细介绍。

2、初始化完demo,安装完插件之后,接下来我们引入esri-loader,并实例化一个基础的二维地图,代码如下:

_createMapview: function() {
        const _self = this;
        const option = {
            url: 'https://js.arcgis.com/4.15/init.js',
            css: 'https://js.arcgis.com/4.15/esri/themes/light/main.css',
        };

        loadModules(['esri/Map', 'esri/views/MapView', 'esri/layers/FeatureLayer'], option)
            .then(([Map, MapView, FeatureLayer]) => {
                let map = new Map({
                    basemap: 'osm',
                });
                let view = new MapView({
                    container: 'mapview',
                    map: map,
                    zoom: 10,
                    center: [104.071308, 30.663028],
                });

                console.log(view);
            })
            .catch((err) => {
                console.log('地图创建失败:', err);
            });
    },

3、地图初始化完成之后,我们引入我们的数据,这个过程就相当于是你用AJAX从后台拿到数据了,因为我的数据我单独放在了一份JS文件里。数据引入之后,我们对它进行一下处理,因为你有可能从后台拿到的数据里面,关于经纬度信息是字符串,而不是数值类型,代码如下:

数据文件:

let defaultData = [
    {
        address: '2号线地铁人民公园旁边',
        time: '9:30——18:00',
        coordinate: '[104.06369,30.663774]',
        name: '人民公园',
        phone: '028-86080000',
    },
    {
        address: '2号线地铁天府广场',
        time: '9:30——18:00',
        coordinate: '[104.07235,30.663245]',
        name: '天府广场',
        phone: '028-86080000',
    },
    {
        address: '3号线地铁春熙路站',
        time: '9:30——22:00',
        coordinate: '[104.08586,30.65958]',
        name: '春熙路',
        phone: '028-86080000',
    },
    {
        address: '四川科技馆背后',
        time: '9:30——18:00',
        coordinate: '[104.073787,30.669334]',
        name: '成都体育中心',
        phone: '028-86080000',
    },
    {
        address: '天府大道北段',
        time: '9:30——18:00',
        coordinate: '[104.070095,30.575247]',
        name: '环球中心',
        phone: '028-86080000',
    },
    {
        address: '4号线宽窄巷子地铁站',
        time: '9:30——18:00',
        coordinate: '[104.056441,30.671462]',
        name: '宽窄巷子',
        phone: '028-86080000',
    },
];

export default defaultData;

处理数据函数:

//处理经纬度数据,返回features
_translateLonLat: function(data) {
    const _self = this;
    if (data.length > 0) {
        data.map((value, key) => {
            let lonlatStr = value.coordinate.split(',');
            let lonStr = lonlatStr[0].split('[')[1];
            let latStr = lonlatStr[1].split(']')[0];

            _self.geodata.push({
                geometry: {
                    type: 'point',
                    x: Number(lonStr),
                    y: Number(latStr),
                },
                attributes: {
                    ObjectID: key,
                    address: value.address,
                    time: value.time,
                    name: value.name,
                    phone: value.phone,
                },
            });
        });
    }

    return _self.geodata;
},

4、接下来我们拿到处理过后的数据,其实这就是一个features,用来实例化要素图层的。然后我们用它去实例化一个要素图层,并将它添加到地图上:

//实例化featurelayer
let layer = new FeatureLayer({
    source: resultData,
    objectIdField: 'ObjectID',          
});
view.map.add(layer);

5、到此为止呢,我们的数据点其实已经添加到地图上了,但这时候还不能点击查询,所以我们要配置一个pupoptemplate,代码如下:

    //实例化弹窗
    let template = {
        title: '{name}',
        content: [
            {
                type: 'fields',
                fieldInfos: [
                    {
                        fieldName: 'address',
                        label: '地址',
                    },
                    {
                        fieldName: 'time',
                        label: '开放时间',
                    },
                    {
                        fieldName: 'phone',
                        label: '相关电话',
                    },
                ],
            },
        ],
    };

//给要素图层实例化的属性中配置pupoptemplate
    let layer = new FeatureLayer({
        source: resultData,
        objectIdField: 'ObjectID',
        fields: [
            {
                name: 'OBJECTID',
                type: 'oid',
            },
            {
                name: 'time',
                type: 'string',
            },
            {
                name: 'address',
                type: 'string',
            },
            {
                name: 'phone',
                type: 'string',
            },
            {
                name: 'name',
                type: 'string',
            },
        ],
        popupTemplate: template,
    });
    view.map.add(layer);

6、这样一来我们就直接通过后台返回的数据实例化了一个要素图层,并实现了鼠标点击查询功能了。

附:

完整代码:

import { loadModules } from 'esri-loader';
import defaultData from '../assets/data';

export default {
    name: 'HelloWorld',
    data: function() {
        return {
            geodata: [],
        };
    },
    mounted: function() {
        this._createMapview();
    },
    methods: {
        _createMapview: function() {
            const _self = this;
            const option = {
                url: 'https://js.arcgis.com/4.15/init.js',
                css: 'https://js.arcgis.com/4.15/esri/themes/light/main.css',
            };

            loadModules(['esri/Map', 'esri/views/MapView', 'esri/layers/FeatureLayer'], option)
                .then(([Map, MapView, FeatureLayer]) => {
                    let map = new Map({
                        basemap: 'osm',
                    });
                    let view = new MapView({
                        container: 'mapview',
                        map: map,
                        zoom: 10,
                        center: [104.071308, 30.663028],
                    });

                    console.log(view);
                    let resultData = _self._translateLonLat(defaultData);

                    //实例化弹窗
                    let template = {
                        title: '{name}',
                        content: [
                            {
                                type: 'fields',
                                fieldInfos: [
                                    {
                                        fieldName: 'address',
                                        label: '地址',
                                    },
                                    {
                                        fieldName: 'time',
                                        label: '开放时间',
                                    },
                                    {
                                        fieldName: 'phone',
                                        label: '相关电话',
                                    },
                                ],
                            },
                        ],
                    };

                    //实例化featurelayer
                    let layer = new FeatureLayer({
                        source: resultData,
                        objectIdField: 'ObjectID',
                        fields: [
                            {
                                name: 'OBJECTID',
                                type: 'oid',
                            },
                            {
                                name: 'time',
                                type: 'string',
                            },
                            {
                                name: 'address',
                                type: 'string',
                            },
                            {
                                name: 'phone',
                                type: 'string',
                            },
                            {
                                name: 'name',
                                type: 'string',
                            },
                        ],
                        popupTemplate: template,
                    });
                    view.map.add(layer);
                })
                .catch((err) => {
                    console.log('地图创建失败:', err);
                });
        },

        //处理经纬度数据,返回features
        _translateLonLat: function(data) {
            const _self = this;
            if (data.length > 0) {
                data.map((value, key) => {
                    let lonlatStr = value.coordinate.split(',');
                    let lonStr = lonlatStr[0].split('[')[1];
                    let latStr = lonlatStr[1].split(']')[0];

                    _self.geodata.push({
                        geometry: {
                            type: 'point',
                            x: Number(lonStr),
                            y: Number(latStr),
                        },
                        attributes: {
                            ObjectID: key,
                            address: value.address,
                            time: value.time,
                            name: value.name,
                            phone: value.phone,
                        },
                    });
                });
            }

            return _self.geodata;
        },
    },
};
本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!
本文分享自作者个人站点/博客:http://www.xbeichenbei.com/复制
如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • ArcGIS JS API 4.15实现萤火虫效果

    看到网上的萤火虫效果后,也想在前端通过ArcGIS JS API来实现一下,所以感兴趣的话就跟我一起来看看吧。

    X北辰北
  • 【番外】Electron和ArcGIS API for JavaScript的开发

    最近学了一些Electron.js开发桌面应用的知识,然后作为一名专业的GISer,脑海里马上想到的是,它能不能和我们的ArcGIS JS API整合呢,意思就...

    X北辰北
  • ArcGIS JS API 4.15实现地图加载图片(优化版)

    主要介绍如何用ArcGIS JS API 4.15实现在二维地图中添加图片的操作。上一篇文章已经介绍了如何添加图片的四种方法,但是添加到地图上的图片在拖动时有些...

    X北辰北
  • 【番外】 使用@arcgis/cli脚手架进行ArcGIS JS API开发

    本文主要介绍如何在Vue和React项目中使用ArcGIS JS API进行开发,与以往的esri-loader开发方式不同的是,本文使用的是@arcgis/c...

    X北辰北
  • 地理信息系统(GIS)系列——Portal for ArcGIS

    Portal 是一个基于 Web 的应用,它能提供个性化,单点登陆,不同源的内容聚合,和信息系统的表示层集中。聚合是整合不同 Web 页面源数据的过程。为了提供...

    魏晓蕾
  • 配电网WebGIS研究与开发[3]

      在上一章中,对基本的AJAX进行了一些介绍,但是Web GIS开发框架Web ADF提供的AJAX对上述基本的AJAX又进行了一层封装。ArcGIS Se...

    用户1170933
  • ArcGIS API for JavaScript开发入门必读

    ArcGIS API for JavaScript开发必读的一篇入门文档,文章中对ArcGIS API for JavaScript做了简单的介绍,包括学习路线...

    X北辰北
  • 《外卖点餐》APP+小程序前后端代码全部免费开源!

    《堂食点餐》云应用是一套在线点餐的行业应用模版,顾客可通过小程序/APP自助扫码订餐、加菜、买单,从而降低门店服务人员工作量及餐厅的运营成本。前端模版源码开源后...

    APICloud官方
  • 配电网WebGIS研究与开发[4]

      停电区域是指供电公司在某一天的某些区域的台区进行停电,台区的下属表箱均受到影响。这是一个地域性问题,所以通过在地图上进行标识这些区域,将数据可视化地展示到...

    用户1170933
  • 地理信息系统(GIS)系列——绪论

    地理信息系统(Geographic Information System 或 Geo-Information system,GIS)有时又称为“地学信息系统”。...

    魏晓蕾
  • 地理信息系统(GIS)系列——ArcGIS API for JavaScript 3.9(1)

    Map 是承载图层的容器,主要用于呈现地图服务、影像服务,此外还可以展示 WMS 服务等,一个图层只有被添加到 Map 中,才能被显示出来。

    魏晓蕾
  • 盘点10款超好用的数据可视化工具

    现代社会早已进入读图时代,图像在一定上程度上取代了文字,占据了主导地位。对于数据分析来说,一张清晰的可视化图表确实比纷繁复杂的数字更清晰美观。随着科技的发展以及...

    数据前沿
  • 在客户端创建要素图层 (FeatureLayer)

    在 ArcGIS JS API 的开发中, FeatureLayer 可以说是让人又爱又恨, 特别是 ArcGIS JS API 4.x , FeatureLa...

    beginor
  • 主流webgis框架介绍与对比

    想写本文,主要是源于前两天有个老师找到我说让我录一个大概半个小时的视频,跟大家分享一下各webgis框架之间的区别以及在应用的过程中应该如何选择。其实之前也有学...

    lzugis
  • 高质量编码------GIS空间查询

    说起空间查询,一般上用的Arcgis server服务做空间查询,如何利用前端用js实现响应式空间查询呢。

    MiaoGIS
  • 可视化流式地理空间数据

    最近参与了一个涉及流媒体信用卡交易数据并根据风险概率对其进行分类的项目。在此基础上,想探索可视化数据的选项。决定专注于地理方面,因为它是尝试识别欺诈性交易时的关...

    代码医生工作室
  • ArcGIS JS API 加载三维建筑物 OSM_Buildings 及开源三维场景处理平台 Cesium

    (1)全球 OSM 数据下载:https://planet.openstreetmap.org/pbf/planet-210405.osm.pbf。 Linu...

    魏晓蕾

扫码关注腾讯云开发者

领取腾讯云代金券