使用Arcgis Api for Javascript 调用 本地Portal发布的WebMap
1.环境搭建
安装Arcgis Portal 10.4,Server 10.4,DataStore ,WebAdaptor for IIS,搭建arcgis api for javascript 4.3环境,具体配置过程自行百度,在此就不赘述。
2.语言设置
设置Portal语言:"我的组织"->编辑设置->常规->语言,选中“中文简体”;
3.发布图层
在arcgis pro 1.4中发布名为point,line,polygon的测试服务,此处可以对各图层进行唯一值渲染等配图操作,设置图层弹出框显示的字段内容、样式、模板等内容;
简单配置图层样式:
发布图层:"Share"选项卡->Share As -> Web Layer -> Publish Web Layer。
数据类型分为“引用注册数据”和“复制所有数据”,这两种数据类型支持不同的发布图层类型以及数据查询、添加、更新操作。
填写完“概述”、“标签”后,点击“分析”按钮,无错误提示后,选择“发布”:
4.自定义Web地图
自定义BaseMap
在Portal的地图选项卡中,添加一个自定义BaseMap
添加图层->添加Web图层,
选择Arcgis Web Server,输入瓦片服务地址,并将“设定为底图”勾上),
遇到问题:添加自定义切图比例尺的瓦片服务,在Portal的Viewer.html可以看到,但自己写的页面去看不相应底图;
解决办法:瓦片类型选择ArcGIS Online/BingMaps /Google Maps,不要选择自定义比例尺。另外,在API4.3版本中,读取自定义瓦片服务的类变为TileImageLayer。
添加FeatureLayer
接着找到point 、line、polygon三个图层,添加到地图上,选择保存按钮,把配置好的地图保存。此时可以在“我的内容”中看到配置的地图。
接下来,保存为地图"Fifth"。
在地图查看器中打开"Fifth",内容列表处,可进对Line图层进行样式修改、统计、分析、设定标注、自定义弹出框等操作,以设置Line图层的弹出框样式为例:
制作完成后,效果如下图所示:
5.调用地图
使用JS API加载WebMap,需要用到Fifth的GUID编码,代码如下
var map,webMap,view,tileLyr;
require([
"esri/Map",
"esri/WebMap",
"esri/views/MapView",
"esri/layers/VectorTileLayer",
"dojo/domReady!"
], function(Map,WebMap, MapView, VectorTileLayer) { // Create a Map
map = new Map();
webMap=new WebMap({
portalItem: { // autocasts as new PortalItem()
id: "ea75705fbf3f40639de492578d247fae"
}
});
// Make map view and bind it to the map
view = new MapView({
container: "viewDiv",
map: webMap, zoom: 10
});
6.遇到问题:
1、配置esri/config.js中的PortalUrl后,网页中的地图服务地址依然指向www.arcgis.com
解决办法:根据官方说明去修改esri/config.js文件中的PortalUrl,但是发现无效;修改init.js中第一个PortalUrl,改为本地Portal地址https://xxx.xxx.com/arcgis即可
2、https://www.xxx.com/arcgis/sharing/rest/portals/self?f=json&culture=zh-cn 这个地址提示404错误,找不到内容,
解决办法:将这个地址手工复制到浏览器中,如果提示“不安全”,则继续访问,直到出内容即可。
此时Web页面应该能加载出地图了,恭喜!!!
7.自定义底图样式
通过修改root.json,可以实现不同风格的底图,从而实现在不同主题的应用中加载不同的风格的地图。
具体步骤请参照 http://www.giser.net/?p=1522 。需要注意的地方是Vector Tile Layer 要处于根节点。
使用Arcgis Api for Javascript 调用 本地Portal发布的WebMap的更多相关文章
- Arcgis api for javascript学习笔记(4.5版本) - 本地部署及代理配置
在开发过程中,由于api的文件比较多,没必要每个项目都将api加入到解决方案中.况且在VS中如果将api加入解决方案,在编写css或js代码时,由于智能提示需要扫描脚本等文件,会导致VS很卡.所以个人 ...
- ArcGIS API for JavaScript介绍
ArcGIS API for JavaScript中的类是按照模块组织的,主要包含esri.esri/geometry.esri/renderers.esri/symbols.esri/symbols ...
- ArcGIS API for JavaScript(2)-ArcGIS Server发布要素图层服务
1.前言 上一篇该系列的文章我们主要讲了一下基础Web地图搭建,这篇我们主要讲一下ArcGIS Server发布服务,并且如何调用服务.将自己的数据加载到Web地图当中来,实现Web端浏览数据. 2. ...
- ArcGIS API for JavaScript开发环境搭建及第一个实例demo
原文:ArcGIS API for JavaScript开发环境搭建及第一个实例demo ESRI公司截止到目前已经发布了最新的ArcGIS Server for JavaScript API v3. ...
- ArcGIS API for JavaScript开发环境搭建与发布以及基本功能实现
1.背景介绍 ArcGIS API for JavaScript 咱这就不介绍了,具体可看ESRI中国的介绍:http://support.esrichina.com.cn/2011/0223/960 ...
- arcgis api for javascript本地部署加载地图
最近开始学习arcgis api for javascript,发现一头雾水,决定记录下自己的学习过程. 一.下载arcgis api for js 4.2的library和jdk,具体安装包可以去官 ...
- 【1】ArcGIS API for JavaScript 4.5/4.6 本地部署
惭愧,和我的学弟比起来,我所开始接触前端开发,ArcGIS API for JavaScript的时间和深度远远不及于他. 一年之尾,亦是一年之始,我也将正式开始我的博客生涯.本人在校学习并且做项目, ...
- ArcGIS API for JavaScript 4.x 本地部署之Apache(含Apache官方下载方法)
IIS.Nginx都说了,老牌的Apache和Tomcat也得说一说(如果喜欢用XAMPP另算) 本篇先说Apache. 安装Apache 这个...说实话,比Nginx难找,Apache最近的版本都 ...
- ArcGIS API for JavaScript 4.x 本地部署之Nginx法
上篇ArcGIS API for JavaScript 4.x 离线配置之IIS法提到,如何用IIS配置ArcGIS jsAPI: 本篇则使用http下的Nginx配置,其原理基本一致.https的部 ...
随机推荐
- 我是怎么做App token认证的
使用Token来做身份认证在目前的移动客户端上非常流行,Token这个概念来源于OAuth认证,主要是在服务端实现.关于相关的原理,同学们自行百度.在这里,我简单介绍一下我是怎么具体实现的,重点描述t ...
- 解决:eth0安装插卡无法自己主动,网卡的配置信息不network-scripts于
问题方案:eth0安装插卡无法自己主动,网卡的配置信息不network-scripts于 解决: 1>vi /etc/rc.d/rc.loacl 最后加 ifup eth0 2>reboo ...
- Python 爬虫 —— scrapy
0. 创建网络爬虫的常规方法 进入命令行(操作系统的命令行,不是 python 的命令行) windows:cmd ⇒ c:\Uses\Adminstrator> Linux:$ 执行:scra ...
- 实用WordPress后台MySQL操作命令
关键字: WordPress MySQL 后台 数据库 地址:http://www.cnblogs.com/txw1958/archive/2013/01/06/wordpress-sql.html ...
- 七easy网络陷阱上当
网络犯罪可能开始与你或你的家人,因为无论出现什么样的警告信息,或异常体征,你还是做你通常做在互联网上,网络犯罪已经发生不知道.趋势科技收集了你所该避免的七种最常见的网络犯罪陷阱.让你和家人避免成为它们 ...
- VC除零异常(错误)捕获
// testFinally.cpp : Defines the entry point for the console application. // #include "stdafx.h ...
- SQL查询表结构 相关语句
--查看列注释select * from all_col_comments where table_name=upper('XXXXX')--查看表结构select * from user_tab_c ...
- docker ubuntu 不选时区
在用ubuntu:18.04基本镜像进行构建的时候.出现啦选择时区的地方,然后会卡住. FROM ubuntu:18.04 #env 环境变量 ENV AUTHOR="xianyunyehe ...
- c# SQLHelper总汇
/// <summary> /// The SqlHelper class is intended to encapsulate high performance, /// scalabl ...
- PySide——Python图形化界面入门教程(四)
PySide——Python图形化界面入门教程(四) ——创建自己的信号槽 ——Creating Your Own Signals and Slots 翻译自:http://pythoncentral ...