专栏首页ArcGIS JS API开发ArcGIS JS API 4.15实现萤火虫效果

ArcGIS JS API 4.15实现萤火虫效果

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

概述

前几天在看帖子的时候发现有大佬使用ArcGIS Pro和Portal制作了萤火虫的渲染效果,感觉前端可视化的时候还不错,所以自己也将实例数据下载下来之后用ArcGIS JS API来实现了一下,我们先来看一下最终的效果:

看完效果之后,我们来看看是怎么实现的。

具体实现步骤

1、实现萤火虫渲染效果其实就是用了JS API提供的图片符号这个API来实现的,所以接下来我们看看具体的实现步骤。

2、首先我们定义一张二维地图,代码如下:

let _self = this;

let option = {
    url: 'https://js.arcgis.com/4.15/init.js',
    css: 'https://js.arcgis.com/4.15/esri/themes/dark-red/main.css'
};

loadModules(["esri/Map", 
    "esri/views/MapView",
    "esri/Basemap",
    "esri/layers/TileLayer",
    "esri/layers/FeatureLayer"
], option).then(([Map, MapView, Basemap, TileLayer, FeatureLayer]) => {

    let basemap = new Basemap({
        baseLayers: [
          new TileLayer({
            url: "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer",
            title: "Basemap"
          })
        ],
        title: "basemap",
        id: "basemap"
    });

    let map = new Map({
        basemap: basemap
    });
    let view = new MapView({
        container: "mapview", 
        map: map, 
        zoom: 4, 
        center: [15, 65] 
    });

}).catch((err) => {
    console.log('底图创建失败,' + err);
});

在上述代码里,我们除了实例化一张二维地图之外,还自定义了一张底图。

3、然后我们将下载下来的数据发布成要素服务,在前端通过JS API去调用,如下:

const layer = new FeatureLayer({
	url: "https://portalwin.arcgis.cn/arcgis/rest/services/Hosted/xuqwtest2d/FeatureServer"
});
map.add(layer);

4、到上述步骤为止,其实我们的数据已经添加到地图上了,但此时我们的数据只是按随机的颜色来渲染的一些小点点,并不太好看,如下:

5、为了前端效果比较好看,实现萤火虫渲染效果,我们定义一个要素图层的渲染属性,然后将要渲染的图片引进来,代码如下:

layer.renderer = {
    type: "simple",  
    symbol: {
        type: "picture-marker",  
        url: './testimg.png',
        width: "30px",
        height: "30px"
    }
};

在上面的代码里,我们定义了一个图片符号,并设置了图片的大小和路径,此时我们保存代码后发现,我们的数据是按我们指定的图片去渲染的,效果如下:

6、以上就是用ArcGIS JS API实现萤火虫渲染效果的全部过程,其实这个过程很简单,就是给我们的数据图层指定一个渲染方案就可以实现,此处我们使用的渲染图片的透明图片。

附:

全部代码:

import React from 'react';
import { loadModules } from 'esri-loader';
import './App.css';

import pictureurl from './assets/picture.png';

class App extends React.Component {

    componentDidMount=()=> {
        let _self = this;

        let option = {
            url: 'https://js.arcgis.com/4.15/init.js',
            css: 'https://js.arcgis.com/4.15/esri/themes/dark-red/main.css'
        };

        loadModules(["esri/Map", 
            "esri/views/MapView",
            "esri/Basemap",
            "esri/layers/TileLayer",
            "esri/layers/FeatureLayer"
        ], option).then(([Map, MapView, Basemap, TileLayer, FeatureLayer]) => {

            let basemap = new Basemap({
                baseLayers: [
                  new TileLayer({
                    url: "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer",
                    title: "Basemap"
                  })
                ],
                title: "basemap",
                id: "basemap"
            });

            let map = new Map({
                basemap: basemap
            });
            let view = new MapView({
                container: "mapview", 
                map: map, 
                zoom: 4, 
                center: [15, 65] 
            });

            const layer = new FeatureLayer({
                url: "https://portalwin.arcgis.cn/arcgis/rest/services/Hosted/xuqwtest2d/FeatureServer"
            });
            map.add(layer);

            layer.renderer = {
                type: "simple",  
                symbol: {
                    type: "picture-marker",  
                    url: './testimg.png',
                    width: "30px",
                    height: "30px"
                }
            };
        }).catch((err) => {
            console.log('底图创建失败,' + err);
        });
    }

    render() {
        return (
            <div id="mapview">
              
            </div>
        );
    }
}

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

相关文章

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

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

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

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

    X北辰北
  • ArcGIS JS API 4.14实现地图加载图片

    主要介绍如何用ArcGIS JS API 4.14实现在二维地图中添加图片的操作。

    X北辰北
  • Arcgis4js实现链家找房的效果

    买房的各位亲们不知是否留意过链家的"地图找房",这样的功能对于使用者来说,是非常方便的,大家可通过连接(https://bj.lianjia.com/ditu/...

    lzugis
  • ArcGIS API For Javascript 4.15 绘制地图:三维地图绘制 SceneView 和 ElevationLayer

    魏晓蕾
  • 【番外】Electron和ArcGIS API for JavaScript的开发

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

    X北辰北
  • ArcGIS API For Javascript 4.15 绘制地图:查询某个地点和在一定范围内根据条件查询

    魏晓蕾
  • Arcgis for Js实现Spline插值、区域裁剪以及页面的轮播效果

    本文讲述如何利用Arcgis 的Gp服务实现Spline插值,并将插值的结果按照指定的区域进行裁剪,最后将裁剪的结果根据特定的样式渲染,并在页面实现多期轮播的这...

    lzugis
  • ArcGIS API For Javascript 4.15 绘制地图:在地图上测距离、测面积和在不同图层上搜索

    魏晓蕾
  • ArcGIS API For Javascript 4.15 绘制地图:在地图上绘制点和面

    魏晓蕾
  • 【ArcGIS JS API + eCharts系列】实现二、三维散点图的绘制

    本文主要介绍使用ArcGIS JS API 4.14和eCharts 4.7.0来实现在地图上绘制散点图的实现步骤,包括二维和三维。

    X北辰北
  • 【ArcGIS JS API + eCharts系列】实现二、三维迁徙图的绘制

    本文主要介绍使用ArcGIS JS API 4.14和eCharts 4.7.0来实现在地图上绘制二维图表中的迁徙图的实现步骤,包括二维和三维。

    X北辰北
  • 【ArcGIS JS API + eCharts系列】实现地图上二维图表的绘制

    本文主要介绍使用ArcGIS JS API 4.14和eCharts 4.7.0来实现在地图上绘制二维图表中的柱状图的实现步骤。

    X北辰北
  • 【ArcGIS JS API + eCharts系列】实现二、三维网络路径图的绘制

    本文主要介绍使用ArcGIS JS API 4.14和eCharts 4.7.0来实现在地图上绘制网络路径图的实现步骤,包括二维和三维。

    X北辰北

扫码关注腾讯云开发者

领取腾讯云代金券