首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

去除ArcGIS JS API 4.16实例化后的地图拖动默认自带的5px的外边框

当我们用ArcGIS JS API 4版本实例化完一张二维地图的时候,鼠标移入地图区域内进行点击,在地图周围会出现一个5像素的黑色边框,虽然不影响其他功能,但是看起来不太美观,所以本文介绍下如何去除ArcGIS...JS API 4.16实例化后的地图拖动默认自带的5px的外边框,这种方法对4版本的API都是通用的。...问题描述 使用ArcGIS JS API 4.16实例化完地图后,当我们的鼠标拖动地图发现地图的四周会默认自带一圈的外边框,这在我们的系统中看起来是很不协调的,大致样子如下所示: 就像上图中的四周,...important; } 2、通过在样式文件中写进去那两行自定义样式后,就发现拖动地图不再有默认的边框了。...如果你是在vue中进行项目开发的话,即便添加了以上样式也不会生效,那可能是你的style标签上有scope属性导致的,自己重新新建一个css文件,然后将这两行代码写进新建的文件里,然后在你的地图组件中引入一下吧

1.1K30
您找到你想要的搜索结果了吗?
是的
没有找到

ArcGIS API for JavaScript开发入门必读

有了上述的认知之后我们继续看上面的图,上图其实可以分为上中下三部分,最上层是应用,里面包括桌面端、移动端、PC端的一些应用软件,主要是做数据采集、处理、渲染显示的工作;最底层是服务器,包括大家经常使用的...所以大家知道了”ArcGIS JS API是做WebGIS开发的”这一点之后,我们就来看看WebGIS是啥玩意: WebGIS其实拆开来看的话就是由Web和GIS两大块组成。...,所以大家可能觉得比较困难的就是刚上手并不知道自己要实现的功能需要加载哪些模块,解决这个方法最好的办法就是百度和查官网文档,如果实在不清楚,可以联系博主咨询,只要大家对ArcGIS JS API用的比较熟练了...,那么后期要实现功能就能很容易的找到自己需要的API模块了。...JS API官网文档 2、ArcGIS知乎的ArcGIS JS API模块 3、X北辰北的CSDN专栏《ArcGIS JS API 3.X学习》 4、X北辰北的CSDN专栏《ArcGIS JS API

5K51

【学习过程】寻找合适的WebGIS开发构架

这将意味着你可以使用javascript和Web ADF控件进行交互,比如浏览地图,添加graphics到地图上,创建map tips,不需要任何的服务器端代码。...搜索地址并显示结果 (大致的中文意思如上,就是讲的ADF JS APIARCGIS JS API的区别,下面还有一些重要的地方,我来译下吧,和大家一起分享下) Common Visual Studio...所以,现在决定还是用 Web ADF进行开发,不过,以后要大量引入ADF 的JS API,这样会更高效,而且用JS在客户端处理服务器控件也会更加方便而且直观些。...·搜索地址并显示结果 (大致的中文意思如上,就是讲的ADF JS APIARCGIS JS API的区别,下面还有一些重要的地方,我来译下吧,和大家一起分享下) 下面还有一句,陈述编写客户端JS脚本的一个让人沮丧的事实...所以,写JS代码,尽量不要自己写,尽量引用现成的代码库,如果ExtJS,ActiveWidget,或者到网上找相关的已经有的程序集合。

1K20

ArcGIS Maps SDK for JavaScript系列之四:添加自定义底图

Basemap类介绍 Basemap类是ArcGIS Maps SDK for JavaScript中用于表示地图底图的核心类之一。底图是地图应用程序中用于显示地理数据的背景图层。...这个方法在我们不再需要使用Basemap对象非常有用,它可以帮助我们释放内存并清理相关资源,从而提高应用程序的性能和效率。...使用Basemap添加自定义底图 引用Basemap 前面一节我们在vue3中使用ArcGIS API实现了三维地球的加载,这一节我们在此基础上来添加自定义底图,要使用Basemap,我们需要先引入,使用下面的语句引入...Basemap import Basemap from "@arcgis/core/Basemap.js"; 引用切片图层 这里我们调用一个在线的地图服务地址http://map.geoq.cn/arcgis...API为我们提供的三维视图场景,使用之前,我们需要先引入 import SceneView from "@arcgis/core/views/SceneView.js"; 创建SceneView对象

51840

ArcGIS Maps SDK for JavaScript系列之三:在Vue3中使用ArcGIS API加载三维地球

要在Vue 3中使用ArcGIS API for JavaScript加载和展示三维地球,需要用到ArcGIS提供的SceneView类。...,选择vue框架,并选中JavaScript语音创建项目,创建成功后,进入vite-vue3-arcgis文件夹,并使用npm i 安装依赖 安装ArcGIS JS API依赖包: 在项目目录下,运行以下命令安装需要的依赖包...: npm install @arcgis/core 引入ArcGIS API 在Vue组件中引入ArcGIS API for JavaScript模块:在需要使用地球的Vue组件中,使用import语句引入...ArcGIS API: import Map from '@arcgis/core/Map.js'; import SceneView from "@arcgis/core/views/SceneView.js...需要注意的是,fromJSON() 方法只能用于从 ArcGIS 产品生成的 JSON 对象初始化 Camera 对象。如果传入的 JSON 对象不符合相机属性的结构,则该方法可能会抛出错误。

61430

html2canvas实现ArcGIS API for JavaScript 4.X截图功能

主要介绍ArcGIS API for JavaScript 4.X实现地图截图的两种方式,解决普通地图截图是底图空白的问题,最终效果如下: 需求描述 在我们项目开发过程中,有时候需要将地图上面绘制的元素或添加的一些图标之类的小元素进行截图保存或者展示...目前在ArcGIS API for JavaScript中其实已经提供了地图截图的API,但是该API对地图底图和一些自定义的需求支持度并不高,所以我们平时项目开发建议使用第三方截图模块,今天就给大家介绍下关于地图截图的两种方式...,最终效果如下: 实现方法 一、ArcGIS API for JavaScript自带的截图方式 介绍的第一种方式就是ArcGIS API for JavaScript自带的“esri/widgets...上述使用环节的代码大致思路就是将我们所要截取的DOM节点传入到html2canvas()这个的方法作为第一个参数,这个方法提供第二个参数,就是定义一些截图的参数,根据需要大家可以根据官网介绍添加一些所需参数...这个属性值是false,这就导致了截图底图空白的问题,因为html2canvas截图的思路就是将所传入的DOM节点转换为canvas,但是既然传入的元素里面已经包含了一个canvas的话,它内部的转换逻辑肯定就会出错

2.1K30

配电网WebGIS研究与开发

每一的相关开发环境都不一样,因此转换和渲染地图上的图形元素的方法也不一样。由于Web ADF的目的是在同一个应用程序中使用多种数据源,因此它提供更多的是在Web端创建与管理图形的方法。   ...然而,.NET框架提供给Web ADF一系列的对象去通过简单的API扩展其功能达到在地图上创建图层的目的。...ArcIMS和ArcGIS Server都可以创建一般的地图图形。然而,既然都可以提供不同的接口去创建图形,它们也将使用不同的API接口,添加到服务器上的图形将成为地图图片的一部分返回到客户端。...两种类型都是System.Data.DataTable的结构类型,因此它们都可以添加到GraphicsDataSet表集合中。图层的内容被Web应用程序存储在内存(in-memory )中。...这样的客户端Grid控件支持滚动条,当单元格数据长度比较长,会自动隐藏部分数据,单元格宽度可以拖动改变…… 在本页面中还使用过一个ActiveWidget框架提供的JS控件――Tab控件,可以在页面中实现类似桌面应用程序的选项卡效果

2K10

手把手教你怎么用ArcgisOnline发布地图服务

ArcGIS 系统的组成部分,因此您还可使用它扩展 ArcGIS for Desktop、ArcGIS for Server、ArcGIS 应用程序ArcGIS Web APIArcGIS...b、创建地图和应用程序 ArcGIS Online 包含创建地图和创建应用程序所需要的所有工具。使用 ArcGIS.com 地图查看器,您可访问用于开始的底图图库以及用于添加您自有数据或图层的工具。...还可通过将其嵌入 Web 网页、博客、Web 应用程序以及通过社交媒体来共享地图。ArcGIS Online 中具有多个布局不同的即用型可配置 web 应用程序模板供您选择。...由于这些 web 图层都托管在 Esri 的云中并且按需动态缩放,因此这样可使您的内部资源得到释放。您可将您的图层添加web、桌面和移动应用程序,并可允许其他用户使用这些图层。...可直接通过 ArcGIS for Desktop 或 ArcGIS Online 网站发布数据而无需安装自己的服务器,并可与组织内的其他成员共享这些数据,使他们可以将地图图层或地理处理工具添加到自己的地图和应用程序

6K20

【番外】Electron和ArcGIS API for JavaScript的开发

最近学了一些Electron.js开发桌面应用的知识,然后作为一名专业的GISer,脑海里马上想到的是,它能不能和我们的ArcGIS JS API整合呢,意思就是,用我们的ArcGIS JS API去开发桌面应用...概述 写这篇文章主要是想折腾下,因为我看到JS可以通过Electron来做桌面应用程序,那么Electron能不能和ArcGIS API for JavaScript进行结合开发呢,这样一来是不是可以从某种意义上理解成我们的...ArcGIS API for JavaScript可以做桌面应用了呢?...并在index.js文件中添加如下代码: const { app, BrowserWindow } = require('electron') function createWindow () {...引入ArcGIS API for JavaScript,地图实例化 1、在index.html文件里,引入ArcGIS API for JavaScript相关的css样式包和JS文件,如下: <link

83920

WebGIS学习资源推荐(包含学习路线、软件和数据资源推荐)

//lbs.qq.com/webApi/javascriptGL/glGuide/glOverview(teng'xun)腾讯地图JS API ) 资源类型:文档资源 推荐理由:同百度地图JS API一样...2.3、ArcGIS API for JavaScript 网址:https://developers.arcgis.com/javascript/ 资源类型:文档资源 推荐理由:免费使用。...前三个地图JS库仅仅是一个开发所需要的库而已,但是ArcGIS提供了从数据生产、处理、入库、发布到服务端、前端调用、渲染、分析一整套的软件和解决方案,所以通过学习ArcGIS API for JavaScript...但是由于是开源的一个地图开发库,所以当你在遇到问题只能去社区里提问,没有相应的技术售后人员提供专业的技术支持,所以新手还是勿碰。...2.6、以上关于介绍的地图JS库都是文档型的,如果大家喜欢看视频的话建议去B站找找免费的视频看看,毕竟GIS是个小众行业,涉及到开发的话就更小众了,所以为了节省大家时间,还是建议学习ArcGIS API

3.6K22

【测评】 使用@arcgiscli脚手架和esri-loader方式进行ArcGIS JS API开发的测评

本文主要针对于在Vue和React项目中使用esri-loader和@arcgis/cli脚手架进行ArcGIS JS API开发,比较两种方式的不同,供各位参考。...概述 当我既写了esri-loader方式来进行ArcGIS JS API的开发文章,又写了@arcgis/cli脚手架的方式来进行ArcGIS JS API的开发文章之后,相信很多小伙伴看到后会产生“...选择纠结症”,我到底该用哪种方式来进行ArcGIS JS API的开发呢?...但是后期会有ArcGIS JS API中的相关功能需求,推荐使用@arcgis/cli脚手架,当然,你也可以用esri-loader方式。...主流技术方面 通过esri-loader方式进行JS API的开发,其实我们很多情况下还在使用ES6甚至ES5的编码方式进行系统开发,项目系统中所用的各种主流插件是我们主动性地去增加配置的,换句话说,

1.3K20

主流webgis框架介绍与对比

for js 最新版本 4.18 简介 ArcGIS API for JavaScript就是ESRI公司用JavaScipt语言编写的一套程序接口。...用户可以通过调用API获取ArcGIS server提供的服务,例如浏览、编辑、渲染地图,以及一些常用的空间分析功能。 示例代码 <!...目前 JS API 免费开放使用。...JS API 提供了2D、3D地图模式,满足绝大多数开发者对地图展示、地图自定义、图层加载、点标记添加、矢量图形绘制的需求,同时也提供了 POI 搜索、路线规划、地理编码、行政区查询、定位等众多开放服务接口...最新版本 v1.0 简介 百度地图JavaScript API GL v1.0是一套由JavaScript语言编写的应用程序接口,可帮助您在网站中构建功能丰富、交互性强的地图应用,支持PC端和移动端基于浏览器的地图应用开发

2.3K20

【番外】 使用@arcgiscli脚手架进行ArcGIS JS API开发

本文主要介绍如何在Vue和React项目中使用ArcGIS JS API进行开发,与以往的esri-loader开发方式不同的是,本文使用的是@arcgis/cli脚手架的开发方式。...概述 今天兴趣使然,在翻阅ArcGIS API for JavaScript官网的时候,发现了跟esri-loader方法不同的另外一种可以在Vue、React和Angular这种主流框架中使用JS API...如果想了解如何通过esri-loader来在Vue、React和Angular这种主流框架中使用JS API的开发,请移步至另外两篇文章: 《【番外】 React中使用ArcGIS JS API...4.14开发》 《【番外】 Vue中使用ArcGIS JS API 4.14开发》 操作步骤 安装@arcgis/cli脚手架 打开命令行工具,通过以下命令进行@arcgis/cli脚手架的全局安装:...2.6、此项目中所用的ArcGIS JS API是最新的4.14版本,地址引用的是官网地址。

2.2K30
领券