精华内容
下载资源
问答
  • 添加底图&切换底图 参考教程:ArcGIS API for Javascript 本示例参考:①Add 2D Map ②Select BaseMap 编辑软件:Hbuilder

    添加底图&切换底图

    【? Code First ?】

    Part 1:HTML

    <html>
    	<head>
    		<meta charset="utf-8">
    		<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    		<title>Lux's Map</title>
    		<link rel="stylesheet" href="css/css01.css" />
    		<link rel="stylesheet" href="https://js.arcgis.com/4.10/esri/css/main.css">
    		<link rel="stylesheet" href="css/css_menu.css" />
    		<script src="https://js.arcgis.com/4.10/"></script>
    		<script src="js/js01.js"></script>
    	</head>
    
    	<body>
    
    		<!--******************************************************侧栏切换菜单*****************************************************************-->
    		<ul>
    			<li>
    				<a class="entypo-star" href="demo01.html"></a> <span>ChangeBaseMap</span>
    			</li>
    
    			<li>
    				<a class="entypo-newspaper" href="demo02.html"></a> <span>AddLayers</span>
    			</li>
    
    			<li>
    				<a class="entypo-link" href="demo03.html"></a> <span>LinkMap</span>
    			</li>
    
    			<li>
    				<a class="entypo-menu" href="demo04.html"></a> <span>LayerSwipe</span>
    			</li>
    		</ul>
    
    		<!--******************************************************地图显示DIV*****************************************************************-->
    		<div id="viewDiv01"></div>
    		<div id="viewDiv02"></div>
    		<div id="viewDiv03"></div>
    		<div id="viewDiv04"></div>
    		<div id="viewDiv05"></div>
    
    		<!--******************************************************地图切换DIV*****************************************************************-->
    		<div id="popdiv_write">
    			<div id="write_output">
    				<div id="basemap01" class="basemap" ><img src="img/gray.png"/></div>
    				<div id="basemap02" class="basemap" ><img src="img/hybrid.jpg"/></div>
    				<div id="basemap03" class="basemap" ><img src="img/national_geographic.jpg"/></div>
    				<div id="basemap04" class="basemap" ><img src="img/osm.jpg"/></div>
    				<div id="basemap05" class="basemap" ><img src="img/streets.png"/></div>
    			</div>
    		</div>
    
    	</body>
    
    </html>
    

    Part 2:CSS

    
    html, body, #viewDiv01 {
          padding: 0;
          margin: 0;
          height: 100%;
          width: 100%;
        }
        
        
    
    #popdiv_write{
    	position: absolute;
    	top: 10px;
    	right: 10px;
    	width: 140px;
    	height: 93%;
    	padding: 5px;
    	background-size: 100%;
    	background-color: #C0C0C0;
    	opacity: 0.8;
    	z-index: 9;
    	
    	border: 3px dashed #000000;
    	border-radius:5px ;
    }
    
    .basemap{
    	margin: 10px;
    	z-index: 20;
    }
    

    Part 3:Javascript

    require([
          "esri/Map",
          "esri/views/MapView"
        ], function(Map, MapView) {
    //**********************************************功能1:切换地图的底图**********************************************************
          var map01 = new Map({
            basemap: "streets"
          });
          
          var view = new MapView({
            container: "viewDiv01",
            map: map01,
            center: [-118.71511,34.09042],
            zoom: 11
          });
          
          document.getElementById("basemap01").addEventListener("click",function(){
          	map01.basemap= "gray";
          });
          
          document.getElementById("basemap02").addEventListener("click",function(){
          	map01.basemap= "hybrid";
          });
          
          document.getElementById("basemap03").addEventListener("click",function(){
          	map01.basemap= "national-geographic";
          });
          
          document.getElementById("basemap04").addEventListener("click",function(){
          	map01.basemap= "osm";
          });
          
          document.getElementById("basemap05").addEventListener("click",function(){
          	map01.basemap= "streets";
          });
          
          
          
          
          
    //**********************************************功能:显示地图的比例尺,鼠标等坐标点等**********************************************************
          
          //*** 添加DIV用于显示坐标等信息 ***//
          var coordsWidget = document.createElement("div");
          coordsWidget.id = "coordsWidget";
          coordsWidget.className = "esri-widget esri-component";
          coordsWidget.style.padding = "7px 15px 5px";
          view.ui.add(coordsWidget, "bottom-left");
    
          //***显示经纬度、比例尺大小和尺度***//
          function showCoordinates(pt) {
            var coords = "Lat/Lon " + pt.latitude.toFixed(3) + " " + pt.longitude.toFixed(3) + 
                " | Scale 1:" + Math.round(view.scale * 1) / 1 +
                " | Zoom " + view.zoom;
            coordsWidget.innerHTML = coords;
          }
          
          //*** 添加事件显示中心的坐标(在视图停止移动之后) ***//
          view.watch(["stationary"], function() {
            showCoordinates(view.center);
          });
    
          //*** 添加显示鼠标的坐标点***//
          view.on(["pointer-down","pointer-move"], function(evt) {
            showCoordinates(view.toMap({ x: evt.x, y: evt.y }));
          });
          
      });
        
    
    

    Part 4:Menu(CSS)

    @import url(http://weloveiconfonts.com/api/?family=entypo);
    
    /* entypo */
    [class*="entypo-"]:before {
      font-family: 'entypo', sans-serif;
    }
    
    @-webkit-keyframes flip {
      0%{-webkit-transform:rotateY(0deg);
      opacity:1;}
      100%{-webkit-transform:rotateY(95deg);
      opacity:0;}
    }
    
    @-moz-keyframes flip {
      0%{-webkit-transform:rotateY(0deg);
      opacity:1;}
      100%{-webkit-transform:rotateY(95deg);
      opacity:0;}
    }
    
    @-o-keyframes flip {
      0%{-webkit-transform:rotateY(0deg);
      opacity:1;}
      100%{-webkit-transform:rotateY(95deg);
      opacity:0;}
    }
    
    @keyframes flip {
      0%{-webkit-transform:rotateY(0deg);
      opacity:1;}
      100%{-webkit-transform:rotateY(95deg);
      opacity:0;}
    }
    body {
     background:url(forestblur.jpg) no-repeat;
      background-size:cover 100%;
    }
    
    h2 {
        color: #555;
        text-align: center;
    }
    
    ul {
      position:absolute;
      top: 45px;
    	left: 15px;
      margin:50px auto;
      padding:0;
      z-index: 9;
      
      width:200px;
      height:220px;
      list-style:none;
      -webkit-perspective:1000;
      -moz-perspective:1000;
      -o-perspective:1000;
      perspective:1000;
    }
    
    li {
      margin:2px 0;
      padding:0;
    }
    
    li a {
      display:block;
      height:18px;
      width:20px;
      background:rgba(155,155,155,0.5);
      color:#fff;
      padding:8px 6px;
      text-decoration:none;
      text-align:center;
    }
    
    li span {
      width:154px;
      float:left;
      text-align:center;
      background:rgba(155,155,155,0.5);
      color:#fff;
      margin:-34px 34px;
      padding:8px 6px;
      transform-origin:0%;
      opacity:0;
      -webkit-transform:rotateY(95deg);
      -webkit-transition:.5s;
      -moz-transition:.5s;
      -o-transition:.5s;
      transition:.5s;
      -webkit-animation: flip 2s;
      -moz-animation: flip 2s;
      -o-animation: flip 2s;
      animation: flip 2s;
    }
    
    span[class='menu']{-webkit-animation:none;}
    li:nth-child(2) span {
      -webkit-animation-delay:.5s;
      -moz-animation-delay:.5s;
      -o-animation-delay:.5s;
      animation-delay:.5s;}
    li:nth-child(3) span {
      -webkit-animation-delay:.4s;
      -moz-animation-delay:.4s;
      -o-animation-delay:.4s;
      animation-delay:.4s;}
    li:nth-child(4) span {
      -webkit-animation-delay:.3s;
      -moz-animation-delay:.3s;
      -o-animation-delay:.3s;
      animation-delay:.3s;}
    li:nth-child(5) span {
      -webkit-animation-delay:.2s;
      -moz-animation-delay:.2s;
      -o-animation-delay:.2s;
      animation-delay:.2s;}
    li:nth-child(6) span {
      -webkit-animation-delay:.1s;
      -moz-animation-delay:.1s;
      -o-animation-delay:.1s;
      animation-delay:.1s;}
    
    li a:hover ~ span {
      opacity:1;
      -webkit-transform:rotateY(0deg);
      -moz-transform:rotateY(0deg);
      -o-transform:rotateY(0deg);
      transform:rotateY(0deg);
      -webkit-transition:.5s;
      -moz-transition:.5s;
      -o-transition:.5s;
      transition:.5s;
    }
    

    【? You have to know: ?】

    • 这个是功能的全部代码,我的项目界面是这样嘚:
      文件目录
      ····其中Demo01是该示例代码,对应css01;界面中有设置一个功能切换菜单Menu(对应样式为CSS_Menu);img为切换底图时界面上显示的图片引用;

    • 功能实现界面如下:
      实现界面
      代码下载地址:链接:WebGIS_Demo_X4 提取码:uy3p

    • 实例中主要思路:点击图片,响应对应click事件——切换底图样式到“gray”
      在这里插入图片描述

    • Select BaseMap 该官网上示例代码中,切换使用的是已经写好的切换的类似插件的模块,直接添加引用便可加入到界面.

    展开全文
  • SimpleGISforArcMapV2.7.1用于arcmap加载天地图、谷歌地图、高德地图、BingMap作为底图,安装之后,在工具栏上右键勾选simple gis即可显示底图加载工具栏
  • 在Portal的MapViewer中添加底图服务: 格式如下(这里添加的偏移底图服务): 矢量底图: http://{subDomain}.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=vec&...

    一、服务器环境Portal中添加天地图服务

    天地图服务介绍参考博客内容。
    在Portal的MapViewer中添加底图服务:
    格式如下(这里添加的偏移底图服务):

    矢量底图:

    http://{subDomain}.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=vec&STYLE=default&FORMAT=tiles&TILEMATRIXSET=w&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=xxx

    矢量底图注记:

    http://{subDomain}.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=cva&STYLE=default&FORMAT=tiles&TILEMATRIXSET=w&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=xxx

    影像底图:

    http://{subDomain}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=img&STYLE=default&FORMAT=tiles&TILEMATRIXSET=w&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=xxx

    影像底图注记:

    http://{subDomain}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=cia&STYLE=default&FORMAT=tiles&TILEMATRIXSET=w&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=xxx

    注意这里的天地图TK使用注册的浏览器版本。

    域为:t0,t1,t2,t3,t4,t5,t6,t7
    在这里插入图片描述

    可能遇到的问题:
    Portal内按要求添加了天地图切片服务,但是提示403错误,但是单独打开每一个请求又能加载瓦片:
    在这里插入图片描述
    在这里插入图片描述
    出现这种问题,可能是tk受到了限制,重新申请一个tk即可;另外我申请的时候把相关服务器的机器全域名都增加上了。

    二、桌面软件中添加天地图底图

    ArcMap:
    软件右侧Catalog添加WMTS Server链接即可。
    (使用服务器版本的天地图TK)
    在这里插入图片描述
    ArcGIS Pro:
    位于插入选项卡下(一开始找了半天)。
    在这里插入图片描述

    展开全文
  • 该数据源提供方有一个与之合作的地图平台服务商,该平台提供以深圳坐标系定位的底图,原本以为事情能很快对接完毕,采用该平台提供底图对接迟迟不能如愿。在知晓该平台底层开发技术采用arcgis js api后决定转换思路...

    功能背景:最近项目中添加一地图展示数据功能,由于数据源由第三方提供,该数据源提供地理定位数据并非以前所接触以经纬度为单位数据(预先完成的百度echarts热力地图作废),提供给我们的是深圳本地坐标系定位坐标,问题就出现这里。在与数据源提供方协商无果后开始了arcgis js api熟悉之路。该数据源提供方有一个与之合作的地图平台服务商,该平台提供以深圳坐标系定位的底图,原本以为事情能很快对接完毕,采用该平台提供底图对接迟迟不能如愿。在知晓该平台底层开发技术采用arcgis js api后决定转换思路。最后将基本功能实现后发现在该过程中走了不少弯路,遂结合该博客小结。

    直接上处理流程:

    1:该url为申请该平台发布的地图,我们采用该地图作为底图(先熟悉arcgis js api文档)

    2:该热力点数据(深圳坐标系定位数据)采用异步获取方式获得,获取到数据后在上述底图上绘制热力层

    3:最终依获取到的后台数据得到如下效果图(由于该数据为动态数据,因此该热力层不能采用线上服务)

    4:进行到这里只是初步实现产品功能,文档需继续啃,该小结在功能逐渐完善的同时将同步更新。

    展开全文
  • 自定义ArcGIS矢量底图

    千次阅读 2015-12-01 20:55:29
    目前Esri已经在ArcGIS Online上发布了矢量底图,用户可以通过修改Style的方式来自定义矢量底图。 用户编辑后的矢量底图还可以发布成新的图层,供用户使用。 用户自定义的内容包括: 1 控制图层的显示 2.修改图层...
    目前Esri已经在ArcGIS Online上发布了矢量底图,用户可以通过修改Style的方式来自定义矢量底图。
    用户编辑后的矢量底图还可以发布成新的图层,供用户使用。
    用户自定义的内容包括:
    1 控制图层的显示
    2.修改图层的符号和显示
    3.在选定区域修改语言选项
    4.在选定地区修改争议地区的显示
    

    自定义Style示例

    下图就是由一个自定义矢量底图的例子,由现有由矢量底图修改而来。 修改的内容主要包括: 1.背景颜色和水系颜色由 ‘#cfcfd4′改成 ‘#a6deff’ 2.土地和植被的填充颜色由‘#ededed’ 改成 ‘#dfffd9′ 3.城区颜色由‘#e8e8e8′ 改成 ‘#d5e3ca’ 由于上面的图层在不同的显示级别都有可能显示,所以修改的不止一处。

    创建使用自定义矢量底图的地图

    创建新的Tile Layer

    1.登录到ArcGIS Online,点击Map,打开Map窗口 2.添加矢量瓦片图层,点击Add按钮,选择Search for Layers in ArcGIS Online,输入“esri vector basemap”,点击GO按钮 3.选择owner为‘esri_vector’的任意一个图层,然后点击Add按钮 4.在TOC面板中,点击刚才添加的图层的More Option按钮,选择Copy 5.点击刚才Copy的图层的More Option选项,选择Save Layer按钮,将图层保存Online中

    修改新建图层的Style

    1.点击上一步新生成的图层的More Option选项,选择Show Item Details选项 2.在Item详情页面的Open选项中选择Download Style选项,将Style文件下载到本地 3.编辑Style文件。打开root.json文件,并编辑该Style文件,保存或另存文件。 Esri的矢量底图使用Mapbox vector tile specification (v8),用户可以参考 Mapbox GL Style Reference来修改底图样式。 4.更新图层的Style。在Item详情页面中点击Update按钮,选择刚才修改的style文件,上传即可。 5.查看修改后的变化。在Item详情页点击Open,选择Add layer to map即可查看

    查看原文:http://www.giser.net/?p=1522
    展开全文
  • ArcGIS Desktop中,使用Add Basemap(添加底图)时,有时会出现连接不到ArcGIS Online中底图的情况。以下几个方法可以帮助您排查问题的所在,请逐步排查。 1. 确保您的电脑是处于联网状态。 使用底图,是需要连接...
  • ArcGIS 自从发布Runtime以来一直以...现在就分享ArcGIS Runtime中添加Google底图的方法。开门见山,直接写出其最关键的类,自定义的一个类GoogleTileLayerpublic class GoogleTileLayer : ServiceImageTiledLayer ...
  • 添加底图并保存为Webmap 这里采用搜索的方式也可以添加进来。 如果需要设置为默认底图,就需要共享到之前创建的群组。 四. 共享并设置默认 共享到群组,然后在organization的settings,map可以设置组的webmap为...
  • 当使用python的Basemap库绘制地图时,选择一个漂亮的底图会为图片增色不少,但是使用map.bluemarble()、map.etopo()或者map.shadedrelief()等函数时,由于分辨率的原因,将图片缩小到较小范围会使得底图非常模糊。...
  • 本篇主要介绍如何使用 ArcGis for javascript 切换底图(basemap),并给地图添加自定义小部件。可直接先看一下动态效果图确定是不是你想要的!!!
  • Arcgis 地理配准步骤(底图校正)

    万次阅读 多人点赞 2017-07-29 20:12:42
    当你获得一一张很酷的底图(比如甲方给你的参考图片),可是这个图却跟你的其他文件不在一个位置,要怎么把它们叠一块儿呢?地理配准地理配准地理配准   下面是我之前做的一张.JPEG的普通图片破碎度指数图,下面...
  • 实现arcgis api加载高德底图demo
  • 一般使用它都是用的范围很大的shp文件做底图,但是也有只需要显示小范围位置的需求(范围太大tif文件很大),这样我们就可以使用实景照片来当做底图,这样有很大的好处(好装逼~)。 如果要用实景图片的话,那就...
  • ArcGIS Runtime添加地图

    2019-03-19 17:50:00
    在用xamarin开发的时候,用到了ArcGISRuntime类。 xml文件的引用:xmlns:esri="clr-namespace:Esri.ArcGISRuntime.Xamarin.Forms;assembly=Esri.ArcGISRuntime.Xamarin.Forms" 资源:(官网链接) &lt;...
  • arcgis demo中的底图给替换成自己的底图f。 我是用的最新版arcgis for javascript 4.10版本。 话不多说上代码。 首先是html代码(我是html和js分开写的) &lt;!DOCTYPE html&gt; &lt;html&gt...
  • 05 地图添加底图切换控件

    千次阅读 2018-09-11 22:04:00
    本文讲述如何在地图上添加地图切换控件。...添加底图切换控件的容器,并设置样式: &lt;div id="map"&gt; &lt;div id="HomeButton"&gt;&lt;/div&gt; &l...
  • 在进行数据可视化的时候,一幅高清的底图十分重要,有一个在线地图插件“SIMPLEGIS”非常好用,该插件只适用于ARCGIS10.2及其以下版本(WIN10系统也可以用) 下载链接:...
  • arcgis for javascript 隐藏或显示底图

    千次阅读 2017-04-25 17:01:13
    arcgis for javascript展示地图的时候,有图层的...中文的一篇类似答案都没有,英文的都是说new Map的时候,别指定底图,然后再采用add Layer的办法添加上去。我明白,add Layer的时候,可以获得这个layer对象,然后对
  • 笔者见过很多人都是把百度地图截图,然后把图片导如Arcmap或者Arcgis pro中,然后进行矢量化操作(规划专业某女同学经常这样做……) 鉴于此,根据大佬提示,本人亲测在最新版本的arcgis pro2.3中加入天地图服务。 ...
  • 本文主要添加ArcGIS底图操作,在第一篇的ArcGIS for android 实例应用之前期准备(http://blog.csdn.net/u012224838/article/details/46366375)的基础上实现添加包含多个图层的地图控件并通过按钮选择显示。...
  • ArcGIS中给地图图片添加经纬度坐标

    万次阅读 2019-04-30 11:51:11
    1.打开ArcMap软件,导入图片。 2.在高德地图拾取坐标网页上... 3.在ArcMap中对应的点,先单击鼠标左键-》单击鼠标右键。 4.依次输入经纬度。...5.单击Full Extent,使图片在屏幕中央显示。......
  • ArcGIS API For JavaScript 4.x 谷歌底图及天地图底图加载(附完整代码,即开即用)
  • ArcGIS加载天地图底图

    万次阅读 热门讨论 2020-06-10 13:39:59
    推荐以下方法:(感谢万能的互联网) 1.2.1 提取图层类型名 矢量 底图:vec_c vec_w 注记:cva_c cva_w 影像 底图:img_c img_w 注记:cia_c cia_w 地形 底图:ter_c ter_w 注记:cta_c cta_w 1.2.2 构建链接...
  • 公众号:GIS前沿更多干货敬请关注当你获得一一张很酷的底图(比如甲方给你的参考图片),可是这个图却跟你的其他文件不在一个位置,要怎么把它们叠一块儿呢?地理配准地理配准地理配准下面是我之前做的一张.JPEG的普通...
  • 通过使用Echarts3Layer.js扩展,可以实现在ArcGIS底图添加eCharts图表,可以简单得到比ArcGIS API for JS更好的效果。 一般的eCharts图表可以通过clear()方法或echarts.setOption(option,true);方法去掉,但是...
  • 地图导出 例子比较粗糙,不喜勿喷 demo地址 支持天地图、arcgis服务以及GraphicLayer的图片导出; 原本打算用antd和dva写的,愣是没写下去
  • 图层是自己发布到arcgis sever上的地图 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&...添加2D底图切换部件</title> <link rel="stylesheet" href="a...
  • 一般我们在前端展示要素图层时,都需要切片地图作为底图,那么能不能只展示要素图层,无需底图呢。方法是通过query查询,获得要素图层的空间属性,然后通过GraphicsLayer绘制出来。如下图: 代码: <!...
  • 使用arcgis for js api 加载天地图底图,包含天地图图层:矢量图、影像图、矢量标注、影像标注、水系、区域边线、道路图层,下载后可直接运行。
  • 1 方法 登录Portal for ArcGIS。 在“地图”中,点击“添加”,选择“从Web添加图层”。 在弹出的对话框中,选择引用的数据类型,这里选择“切片图层...通过设置,可将集成后的切片底图加入到底图群组,然后在制图时就

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,551
精华内容 1,020
关键字:

arcgis添加底图