ARCGIS API
文章平均质量分 69
gis小白的成长之路
QQ 24382327 欢迎交流
展开
-
arcgis api 图形编辑
图形编辑,顾名思义,就是对绘制的图形graphicLayer进行编辑,如移动、 拉伸、选择、删除和增加节点的功能。下图是增加节点和拉伸功能的截图。实现代码,复制可直接运行:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head> <meta http-equiv="Content-Type" conte原创 2021-08-23 11:13:04 · 1076 阅读 · 0 评论 -
arcgis api结合高德poi搜索接口
应用场景:通过高德poi查询接口,在天地图上打点展示,效果如下实现步骤:1、通过arcgis api 加载天地图。(资源里有已经封装好的天地图js,引入即可使用)2、通过高德poi查询接口获取数据。(需要在高德地图API申请web服务的密钥)3、通过dojo发布者模式,发布和接收经纬度信息的任务。(不是必须,也可用其他方法实现)4、将接收到的经纬度信息进行坐标系转换,然后打点到地图上。(资源里有在前端就可以实现坐标系转换函数的js)实现代码,下载资源后,可直接打开:资源下载:包含封装了天地图原创 2021-07-02 15:41:14 · 949 阅读 · 3 评论 -
Arcgis js api 点聚合
先来个效果图:实现步骤:1、获取本地json数据2、通过json数据配置聚合图层的数据源3、配置聚合图层的分级渲染效果注意事项:有点需要注意的是,直接引用官方API里的ClusterLayer.js会报错,可以把js下到本地,引用时候注意路径即可。资源下载,包含聚合模块ClusterLayer.js、测试数据points.json、前端实现代码html。传送门: 点聚合相关资源下载,下载后可直接运行。前端实现代码:<!DOCTYPE HTML PUBLIC "-//W3C//D原创 2021-04-01 16:12:31 · 2545 阅读 · 5 评论 -
arcgis api 3.x 加载 echarts3 热力图
地图结合echarts热力图的方式已经在广泛应用,官方例子是用的百度地图,传送门:官方例子。由于平时开发用的比较多的是Arcgis api,这里记录一下Arcgis api 3.x 加载 echarts 热力图的方法1、将百度地图换成arcgis在线的切片地图,方便在线引用。2、引用echarts.js和Echarts3Layer.js,这里注意一下echarts.js要放在arcgis js 之前引入,否则会报错。3、本例采用本地加载json数据,从json中获取经纬度组成二维数组作为渲染热力图的数原创 2021-03-12 15:35:23 · 665 阅读 · 0 评论 -
ARCGIS API 地图圈选查询图层后导出excel
之前写了一个地图圈选查询图层后,弹窗显示查询内容的demo,传送门:地图圈选查询图层,在此基础上完善一下,添加一个导出按钮,即查询后将信息导出excel,效果如下:这里运用了SheetJS的js-xlsx,这是一款功能强大又非常方便的,只需要纯JS即可读取和导出excel的工具库,可参考小茗同学的博客:传送门:小茗同学博客,或者SheetJS的官网: 传送门:官方github里面有个方法aoa_to_sheet,可将二维数组转为sheet,结合本例具体操作是,将查询获得的每条数据信息组成一个数组,原创 2021-02-20 14:39:30 · 458 阅读 · 0 评论 -
arcgis api 弹窗结合echarts可视化
假设需求背景:每到冬天都会有很多候鸟老人到海南来过冬,结合当前国内新冠疫情形势,目前国内有很多高风险区,统计来自全国各风险区域(高中低风险)的人数,对海南各市县地图进行渲染,地图弹窗结合echarts柱状图可视化。统计测试数据如下:数据说明:high字段表示高风险地图来海南人数 高风险>1500, 1500>=中风险>500, 低风险=<500dataTest = [{“city”:“海口”, “level”:“高风险”, “high”:2150, “mid”:2600原创 2021-02-03 11:02:27 · 840 阅读 · 0 评论 -
arcgis js api 4.x 前端加载json显示
arcgis js api 4.x 没有直接加载json的方法,可通过以下步骤实现:1 、如果只有shp,没有json格式的数据,可通过arcmap或其他方式转换2 、通过加载本地路径json或者按钮导入json文件的方法(选其一),并将json转换为JavaScript 对象3、 通过js对象获取矢量信息和字段属性信息,生成polygon实例,并通过graphic渲染4、 通过绘制图层GraphicsLayer添加graphic实例实现效果:json测试数据和源代码下载:实现代码,有注释,原创 2021-01-26 11:29:45 · 1980 阅读 · 5 评论 -
Arcgis api 4.x 前端2D拉伸成3D
应用场景:假设有一批楼宇的shp数据,想要在前端用三维模式展示,不同高度用不同颜色表示。测试数据如下:将此数据发布成要素服务。实现效果,拉伸前:拉伸后:实现源代码:要素图层服务需要替换成你自己的url,渲染配置的字段也根据你发布的要素图层设置 2D拉伸成3D 2D拉伸3D ...原创 2021-01-21 16:33:21 · 940 阅读 · 6 评论 -
arcgis 禁用服务目录
服务目录为 ArcGIS Server web 服务以及可通过 REST 执行的操作提供了一种基于 HTML 的可浏览的表现方式。服务目录可以是一种很有用的开发工具;但是,当不希望用户浏览服务列表、在 Web 搜索中查找服务或通过 HTML 表单请求服务时,建议禁用生产系统的服务目录。传送门:官方文档...原创 2021-01-12 16:19:14 · 670 阅读 · 0 评论 -
arcgis api 前端加载shp显示
arcgus api 没有直接加载shp的方法,通常是把shp转换为其他格式。本例实现步骤为:1、 input按钮导入shp数据2、 通过FileReader将shp数据转换为ArrayBuffer格式使用FileReader对象,web应用程序可以异步的读取存储在用户计算机上的文件内容,可以使用File对象或者Blob对象来指定所要读取的文件或数据.其中File对象可以是来自用户在一个元素上选择文件后返回的FileList对象。传送门:FileReader文档3 、 借助开源 shapefile原创 2021-01-11 11:00:15 · 3031 阅读 · 12 评论 -
arcgis api 动态图层实时显示数据变化
以sql-server数据库为例,假设我们把数据库某个表发布地图服务,前端以ArcGISDynamicMapServiceLayer去调用显示。当表的数据发生改变,但是前端显示并没有变化,有以下两点原因:1、 数据库没有注册到arcgis serverARCMAP里GIS服务器属性里的数据存储注册数据库以sql-server为例2、将ArcGISDynamicMapServiceLayer图层设置为总数从服务器请求图像,并忽略浏览器的缓存。参考官方文档:传送门:官方文档var testLay原创 2021-01-07 15:55:23 · 1386 阅读 · 0 评论 -
arcgis 切片底图突破最大比例尺呈现
最近接到个需求,客户想在切片底图放大到200:1时候还能看到道路的走向,我们了解,目前主流的几类底图,如谷歌、百度、高德、天地图等最大的比例尺是 1000:1左右,如果再往下切片,会占用很大的存储空间。结合实际情况,以当前我们本地环境发布的某省的街道切片地图为例,最大比例尺为1000,大约占了1T的存储空间,如果要切到最大比例尺为200,没有几十上百T的存储空间是放不下的,而且切图生成缓存的时间非常非常长,此方法不切实际,不推荐使用。转换下思路,当切片底图缩放到最大比例尺后,再缩放的话就以要素图层来替代没原创 2021-01-07 11:37:13 · 1178 阅读 · 0 评论 -
arcgis api 4.x 实现动态测距和计算面积
先来个效果图:图片是静态的,没有体现出来动态的效果,实际效果是测距和面积会随着鼠标的位置实时显示当前线段的长度或者面积大小。本例采用arcgis api 4.x,原理是调用draw绘制工具,监听draw过程中的不同事件,并通过事件中获得的经纬度信息去绘制polyline和polygon。draw事件参考官方文档:4.x draw文档通过"esri/geometry/geometryEngine" 中的geodesicLength()和geodesicArea()方法去计算长度和面积。官方文档:ge原创 2020-12-24 15:13:01 · 1972 阅读 · 2 评论 -
arcgis api 动态显示鼠标位置经纬度
动态显示鼠标位置经纬度,主要是监听鼠标移动事件 “mouse-move”,获取经纬度信息,在当前鼠标位置用文本标注出来即可。添加了个监听鼠标点击事件 “mouse-down”,在鼠标点击后才开始监听鼠标移动事件。实现效果:代码较为简单,注释里有,复制可直接打开:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head&g原创 2020-12-17 11:14:13 · 2652 阅读 · 0 评论 -
arcgis api 结合turf.js实现测距
turf.js是一个开源的空间分析库,主要用实现在网页端空间几何对象关系的计算,测距只是其中的一个简单功能。计算两个点的距离:计算两个点以上的线段的总长度:源码地址:https://github.com/Turfjs/turf官网文档: http://turfjs.org/代码中需引入turf.js库,可下载到本地,也可引用互联网上的,互联网在线引用:全部代码,所有引用和地图均来自互联网,复制可直接打开:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML原创 2020-12-11 10:05:07 · 1116 阅读 · 0 评论 -
Arcgis api 鼠标悬停显示弹窗
实现鼠标悬停图层上显示弹窗,原理是鼠标滑过图层时,设置弹窗显示和弹窗的位置,鼠标移出图层时,关闭弹窗。要素图层使用本地获取json文件生成要素图层的方法,内容不多,代码里有注释,直接上代码:<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>鼠标悬停显示弹窗</title>&原创 2020-12-07 15:26:32 · 1681 阅读 · 0 评论 -
arcgis api结合echarts实现轨迹动画
arcgis api要想加载echarts,需要引入Echarts3Layer.js,官方下载地址:Echarts3Layer.js下载。下载完以后,官方建议配置在js api的目录下,但其实放在本地目录也可以,引用时候注意本地路径就可以。创建实例:底图采用arcgis在线的蓝色午夜版底图,效果如下:完整代码:<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="原创 2020-11-30 16:16:47 · 1873 阅读 · 0 评论 -
ARCGIS API 判断点与面相交
应用场景:输入某点经纬度信息,判断该点落在哪个面里具体应用:客户通过页面的文本框输入某资源点的经纬度,返回该资源点的地市信息,这里以海南地市为例子。效果如下:实现功能有两种方法方法一: 接口通过接收输入的经纬度,传给后端数据库作为参数(以Sqlserver数据库为例),通过数据库两个要素的相交计算,将计算的结果再通过接口传回给前端。 运用到两种空间数据的计算方法: 1. 点经纬度转shape: geometry::Point(lon,lat,4326) shape 2. 判断两个要素相原创 2020-11-25 10:31:03 · 5281 阅读 · 0 评论 -
ARCGIS API 加载WKT(terraformers工具的使用)
需求场景:从接口获得WKT格式数据,在前端通过ARCGIS JS API呈现到页面。ARCGIS JS API 无法直接使用WKT格式数据,但通过terraformers工具的转换后可以使用。terraformers是Esri的一个开源项目,参考:https://github.com/Esri/Terraformer,主要作用是可以将wkt转换为geometry。直接上代码,为了测试方便,接口数据用测试数据替代,其他引用的模块和地图都来自互联网,复制可直接运行。<!DOCTYPE html&g原创 2020-10-23 14:48:29 · 2332 阅读 · 0 评论 -
arcgis 自定义范围查询图层
应用场景:在地图上自定义绘制一个范围,查询范围内某图层的数据并展示。 思路: 1. 运用arcgis api的draw工具中的polygon绘制不规则面图形 2. 建立queryTask查询,将绘制的面图形范围当做查询范围 3.遍历查询回调函数,将数据展示(展示用了vue做了个弹窗) 为了测试方便,代码里所引用的css和js都来自网上链接,地图引用的也是arcgis在线地图,有一定的不稳定性。 直接上代码...原创 2020-06-17 10:16:56 · 2546 阅读 · 1 评论 -
Arcgis API 不依赖地图服务的面要素创建和渲染
需求场景:做一个专题图,图层不依赖于Arcgis地图服务,同时可以根据外部数据进行渲染。 1. 不依赖于Arcgis地图服务,首先我们想到的是原创 2020-05-25 10:51:25 · 558 阅读 · 0 评论