2018年09月_X北辰北

原创 06 React快速入门（六）——使用css样式

在react中组件使用样式主要有两种方式：内联式和外联式。下面分别介绍两种方式：一、内联式使用内联样式，和html中差不多，不多在此处需要注意的是，通过style属性不能直接用双引号就定义样式，而要用对象的方式来定义样式，如图：二、外联式外联样式表主要是通过类名来实现，将样式定义代码放在一个单独的样式表...

2018-09-29 14:21:48 481

原创 05 React快速入门（五）——react中优化代码

在之前的文章中，react代码的书写有很多冗余，所以接下来对代码进行一下优化。首先优化的是关于this指向这一块的代码，我们不必在每次的绑定后面加bind(this)语句，只需在构造函数里做处理就可以，如图：其次就是在渲染的时候，代码量有点大，我们可以定一个函数来实现，如图：最后是关于定义组件时候的写法： ...

2018-09-29 14:16:45 572

原创 04 React快速入门（四）——组件拆分

问题描述：在目前存在的实例中，代码结构如下图所示：在index.js中引入了TodoList.js中定义的组件来实现页面上的一个简单布局，一个输入框和一个按钮，通过点击按钮来依次将输入框中的内容显示在页面上，并且也实现了删除功能，点击某一列，此列将会被删除，如图：因为此时的页面是一整个的TodoList组件，所以我们想将它进行拆分，分解为更...

2018-09-29 14:09:34 2002

原创 03 React快速入门（三）——实现从一个输入框中添加完数据后此输入框内容清除的功能

功能描述：我们在一个输入框输入内容，然后点击添加按钮，此输入框的内容就会添加到页面上，但是此输入框中还存在上次输入的内容，我们想在每次输入添加完成之后，此输入框中的内容就会清除，如图：实现思路：我们可以先在输入框上定义一个onChange事件，此事件通过一个e参数来获取到输入框中的内容，将它保存在一个变量中，然后每次点击按钮就会动态的在...

2018-09-29 13:58:58 3479

原创 02 React快速入门（二）——this的指向和数据修改问题

问题描述：在react学习中，通过定义一个按钮，然后为此按钮绑定一个事件，此事件主要的功能就是用户点击按钮，就会在相应的页面增加一个item选项。在代码层面来说，在代码里的state下的list会增加一个数据，如下所示：初始化函数中定义了一个state变量，此变量下有一个空的list数组，来存放数据：constructor(props){ //组件初始化函...

2018-09-29 13:53:43 388

原创 01 React快速入门（一）——使用循环时对于‘key’报错处理

问题描述：在刚开始接触react学习的时候，编写一个小功能时，使用了map来循环一个数组中的数据，输出到前端页面，代码调试运行后正常显示，但是打开控制台却发现有一条关于“key”的报错消息，详细信息如下：上网查阅资料得知，此错误出现是因为与react中的diff算法有关系; 简单的理解就是：react中循环输出时要有一个key，并且这个key不...

2018-09-29 13:47:19 2404 2

原创 01 div实现浮动效果

浮动效果其实在很多的UI组件中都已经实现了，尤其是在很多的卡片组件中都有相应的参数可以进行设置。今天我们主要介绍的是如何自己用原生的css来实现浮动效果。在div的所有属性中，有一个“box-shadow”的属性，此属性是设置阴影效果的属性，我们对一个div进行如下图所示的设置，即可实现简单的浮动效果，如图：效果如下：大家也可以按照...

2018-09-29 11:20:25 2459

原创 17 制作热力图

在我们的地图开发中，有时候可能需要在web端展示一些要素点的分布情况，比如展示某个地区的商家分布、某一国家的染病人群分布等。如果我们在前端仅仅将它们以一个个的点来展示出来，可能显得不太好看，那此时，我们就需要用到热力图的功能，效果如下（效果展示使用了官网的实例效果图）： ArcGIS API for JavaScript 3.X制作热力图主要分为两步：发布要素服务、热...

2018-09-29 11:02:16 2309 1

原创 16 ArcGIS Server 10.6.1发布影像服务

本文介绍如何发布影像服务。影像服务的原始数据源是有一定的要求的，原始数据源一般要求是栅格数据集、栅格图层、镶嵌数据集、镶嵌图层等。此示例是通过ArcCatalog将网上下载的关于西北地区的部分tif数据发布为影像服务。具体操作如下：1 在ArcCatalog中找到我们要发布的数据，如图：2 右击数据，选择“Share As Image Service”，打开影像数据服务发布...

2018-09-27 11:23:50 2147

原创 15 ArcGIS Server 10.6.1发布切片服务

前两篇文章重点介绍如何向地图添加切片图层和影像图层，并没有详细介绍如何发布这两类服务，接下来的两篇文章我们就来看看，如何发布切片服务和影像服务。本文主要介绍如何发布切片服务。关于切片服务的介绍和优缺点之类的东西在此就不叙述了，大家在网上一搜一大把，我们直接进入主题——切片地图服务的发布。1 将要发布的数据我们用ArcMap打开，如图所示：2 依次选择【File...

2018-09-27 11:18:36 3924 2

原创 14 添加影像图层

上一篇文章中我们介绍了如何向地图添加切片图层，这篇文章介绍如何添加影像图层。如果要实现此功能，同样的，我们需要“esri/layers/ArcGISImageServiceLayer”组件，通过实例化一个地图，然后实例化一个影像图层，再用map的addLayer方法将它添加到地图之上，效果如下：具体操作如下所示：1 实例化地图：map = new Map("map"...

2018-09-27 11:01:25 602

原创 13 添加切片图层

在之前的所有文章中，我们只是创建了一个默认的地图，然后在此地图上添加了一些鹰眼图之类的控件，那在我们实际的项目需求中经常所用到的功能还是有很多的，比如今天我们要说的地图添加切片图层。地图添加切片图层主要是用了“esri/layers/ArcGISTiledMapServiceLayer”这个组件，此组件使用的前提是我们已经在AarcGIS Server上发布了一个...

2018-09-27 10:57:06 1119 3

原创 ArcGIS 10.3安装后授权出问题

问题描述：在安装完ArcGIS Desktop、ArcGIS Engine10.3之后，按照之前的授权过程，将两份授权文件拷贝至响应目录下，出现以下问题，如图：解决方法：查找网上资料才发现，原来10.3的版本除了替换上述两份文件之外，还要再替换一个文件，就是AfCore.dll文件，替换之后打开软件正常运行。此文件在我的资源中查找。 ...

2018-09-14 10:02:36 4632 4

原创 12 地图添加测量控件

地图的测量控件主要实现在web端的地图测量功能，包括距离量算、面积量算和经纬度获取。我们可以用官方提供的默认样式来添加，也可以自定义样式来添加地图量算控件。下面来看一下显示效果：面积量算：距离量算：经纬度获取：具体的操作如下：1 测量控件主要依据“esri/dijit/Measurement”组件来实现，所以第一步还是一样，加载所需要的引用：require([...

2018-09-13 05:13:45 676 3

原创 11 地图添加OSM图层

此示例主要是介绍通过默认的实例化方式来添加一个OpenStreetMap图层，如下图所示：具体实现方式如下：1 实现此功能的主要组件是“esri/layers/OpenStreetMapLayer”，所以在开始时要引入相关的组件，如下：require(["esri/map","esri/layers/OpenStreetMapLayer","dojo/domReady...

2018-09-13 05:08:55 1765

原创 10 地图添加图例控件

在上述文章中，我们已经为地图添加了比例尺、鹰眼等控件，但还有一个控件也是地图所必需的，那就是图例控件，它显示当前地图上添加的所有图层的图例（默认效果，可以手动控制显示单个图层的图例），效果如下所示：具体实现如下：1 图例控件的实现主要是依据“esri/dijit/Legend”组件，我们先定义两个div，一个显示地图，另一个显示图例，然后设置其样式，如下：<div id="...

2018-09-12 19:57:40 2457

原创 09 地图联动（双屏、四屏）

双屏联动代码：效果：四屏联动代码：效果：注：此博客中的需求也是和上篇博客一样，是项目需求，所以只粘贴关键代码，如果大家在实际开发中遇到问题，欢迎私聊，手把手指导~ ...

2018-09-12 19:53:10 2566 3

原创 08 设置自定义的底图

在做API的开发时，一直用的是ArcGIS提供的默认的底图，比如topo、osm、streets等，现在需求有变化，想用自己发布的地图服务做底图，所以将操作步骤记录如下（此博客因为涉及到具体的项目开发，所以只粘贴关键代码和参考实例图）：1 引入组件“esri/basemaps”2 定义底图和实例化地图esriBasemaps.delorme = {baseMapLayers: [...

2018-09-12 19:46:46 694 2

原创 07 地图添加图层控制控件

图层控制控件主要实现在地图上面图层的显示和隐藏，通过选择或取消各图层名称前面的复选框来实现图层的动态添加，效果如下图：上图实现了一个北京地铁线路的显示与隐藏效果，通过点击右侧面板的图层名称前面的复选框，可以实现图层的显示与隐藏。下面来看一下具体的实现过程：1 在开始构建此示例之前，我们先要发布相关的服务，在运用图层控件的时候，这个服务我们可以发布到Online上，也可以...

2018-09-12 19:37:28 980

原创 06 地图添加地图书签

地图书签的功能字面理解就是暂时记录当前地图的范围和放大级别，在后续操作中如果想回到地图之前的状态，可以点击当时创建的书签来回到此状态，如下图所示：地图刚加载完成时是一副以成都为中心的地图，放大级别是10：我们将地图的中心拖动到南京，进一步放大地图，然后创建以“南京”为名称的书签，如图：创建好书签之后我们将地图随意拖动和放大，然后点击刚才创建的“南京”这个书签，地图中心和放大级别...

2018-09-12 19:30:31 1425

原创 05 地图添加底图切换控件

本文讲述如何在地图上添加地图切换控件。通过底图切换控件，我们可以实现当前地图和的地图之间的一个切换，效果如下：如上所示，通过右上角的底图切换控件可以实现两地图之间的切换显示，具体操作如下：添加底图切换控件的容器，并设置样式：<div id="map"> <div id="HomeButton"></div> &l...

2018-09-11 22:04:00 1500

原创 04 在地图上添加主页、定位、鹰眼图和比例尺控件

在上一篇文章中我们学习了如何创建一个简单的地图，那接下来，我们学习如何给创建好的地图上添加一些基本的空间，最终效果如下图所示：由上图可以看出，我们在地图上添加了主页、定位、鹰眼图以及比例尺控件，下面将详细介绍如何添加：1 主页按钮的添加添加主页按钮的前提是我们要创建一个存放主页按钮的div标签，并设置它的样式，比如位置、大小等：<div id="...

2018-09-11 21:58:14 2102 3

原创 03 创建地图

在此示例中我们通过引入“esri/map”接口来创建一个简单的地图，其中地图中心为成都市，放大级别是10级，地图默认开启鼠标滚动实现放大和缩小以及漫游功能，示例图如下：具体操作过程如下：1 在创建地图之前我们首先要搭建一个基本的web页面，也就是html页面，这里所需的基础知识分别是HTML、CSS、JavaScript三大前端基础知识，如果对以上知识不清楚，可以到W3C网站进行学习，...

2018-09-11 21:52:37 879

原创 02 ArcGIS API for JavaScript离线部署——部署到项目工程

1 上一文中已经介绍了API的本地部署，也是最常用的部署方式，只要机子上配置了服务器环境，就可以将它部署到本地服务器里，供我们离线调用。但是在实际项目中，我们更多的是将它部署到工程中，也就是说，一个工程部署了一份离线API。2 下面我们来看看具体的操作步骤。3 首先我们来看看工程的目录树结构：从上面可以看出，在我们的工程中有一份API文档，这就是部署到工程中的方式，它一...

2018-09-11 21:42:47 1228

原创 01 ArcGIS API for JavaScript离线部署——部署到本地服务器

ArcGIS API for JavaScript开发的首要步骤就是引入ArcGIS想关的样式文件及开发包，对于此样式文件及开发包的引用有两种形式：在线引用和离线加载。对于一般的示例程序编写，我们只需简单的引入在线的开发包即可，但是在自己开发过程中可能会有引入离线开发包的需求，所以本教程将介绍如何本地部署API文件，具体操作如下：1 打开“https://developers.a...

2018-09-11 21:37:09 7397 9

X北辰北的博客