arcgis jsapi接口入门系列(3):各种类型的图层添加
这里说的tomcat切片,是指arcgis server切片后,把切片图片文件用tomcat发布(其他任意web服务器发布都行)
//添加tomcat切片图层
addTomcatTileLayer: function () {
//图层配置
let layerConfig = {
//切片所在的url,url结尾应该是 _alllayers/
url: "http://xxx/Layers/_alllayers/",
//图层范围
tileExtent: "-0.5,-973.5,1919.5,0.5",
//切片文件格式
tileFormat: "png",
//切片级别
tileLevel: "0,1,2,3,4,5,6,7",
//切片分辨率
tileResolution: "2.1166709000084669,1.8520870375074086,1.5875031750063502,1.3229193125052918,1.0583354500042335,0.79375158750317509,0.52916772500211673,0.26458386250105836",
//切片比例尺
tileScale: "8000,7000,6000,5000,4000,3000,2000,1000",
//切片大小cols
tileSizeCols: 512,
//切片大小rows
tileSizeRows: 512,
//地图原点x
tileZeroX: -5123200,
//地图原点y
tileZeroY: 10002100,
//压缩质量
compressionQuality: "0",
//图层的坐标系wkid
wkid: "4547",
transparency: null,
}; //添加图层到地图
//参数3:图层id,可以为空,空则自动分配
this.map.add(this.apiInstance.createWebTileLayer(null, layerConfig)[0]); },
上述封装的部分函数
createWebTileLayer : function (map, layer, id, click) {
var titleExtent = [];
if (!!layer.tileExtent) {
layer.tileExtent.split(',').forEach(function (extent) {
titleExtent.push(parseFloat(extent))
})
}
var tileInfoConfig = {
url: layer.url, //瓦片大小
"size": parseFloat(layer.tileSizeRows), //瓦片大小
"compressionQuality": 0,
"origin": {"x": parseFloat(layer.tileZeroX), "y": parseFloat(layer.tileZeroY)}, //切图原点
"spatialReference": {"wkid": parseInt(layer.wkid)}, //瓦片比例尺
"format": layer.tileFormat
};
var tileResolutions = layer.tileResolution.split(',');
var tileLevels = layer.tileLevel.split(',');
var tileScales = layer.tileScale.split(',');
var lods = [];
if (tileResolutions.length !== tileLevels.length || tileScales.length !== tileResolutions.length) {
console.error('地图配置有误', layer);
}
else {
//lods:等级、比例尺、分辨率。从ArcGIS切图配置文件conf.xml中获取。设置lods会影响地图比例尺控件的范围。
for (var i = 0; i < tileScales.length; i++) {
lods.push({
"level": parseInt(tileLevels[i]),
"resolution": parseFloat(tileResolutions[i]),
"scale": parseFloat(tileScales[i])
});
}
tileInfoConfig.lods = lods;
var tileInfo = new instance.TileInfo(tileInfoConfig);
var spatialReference = new instance.SpatialReference({wkid: parseInt(layer.wkid)});
var fullExtent = new instance.Extent(titleExtent[0], titleExtent[1], titleExtent[2], titleExtent[3], spatialReference);
if (layer.type == 'ArcgisTile') {
var tiledLayer = new instance.WebTileLayer({
id: id,
urlTemplate: layer.url + '/tile/{level}/{row}/{col}',
copyright: "",
spatialReference: spatialReference,
fullExtent: fullExtent,
tileInfo: tileInfo
});
} else {
var tiledLayer = new instance.WebTileLayer({
id: id,
urlTemplate: layer.url,
copyright: "",
spatialReference: spatialReference,
fullExtent: fullExtent,
tileInfo: tileInfo,
getTileUrl: function (level, row, col) {
if (layer.ext1 == 'superMap') {
return this.urlTemplate + level + "/" + row + "/" + col + "." + this.tileInfo.format;
}
return this.urlTemplate + "L" + dojo.string.pad(level, 2, '0') + "/" + "R" + (dojo.string.pad(row.toString(16), 8, '0')).toUpperCase() + "/" + "C" + (dojo.string.pad(col.toString(16), 8, '0')).toUpperCase() + "." + this.tileInfo.format; }
});
} if (!!click) {
tiledLayer.on('layerview-create', function (evt) {
var graView = evt.view;
var graLayerView = evt.layerView;
var layerId = evt.layerView.layer.id;
graView.on('click', function (event) {
graView.hitTest(event).then(click);
});
});
}
if (!!map) {
map.add(tiledLayer);
}
return [tiledLayer];
}
};
arcgis rest图层指用arcgis server发布的地图服务,用rest方式加载
//添加arcgis rest图层
addArcgisRestLayer: function () {
//图层配置
//PS:arcgis rest图层传入最小配置只要url就行,因为url有服务的详细配置(浏览器访问url可看详细配置信息),jsapi会自己去读
let layerConfig = {
//地图服务url,url结尾应该是 /MapServer
url: "http://xxx/arcgis/rest/services/yyy/MapServer",
//图层id,可以为空,空则自动分配
// id: "eeee"
}; //根据图层配置新建图层
let layer = new this.apiInstance.MapImageLayer(layerConfig);
//图层添加到map
this.map.add(layer);
},
天地图互联网版,注意这里固定是加载wgs84坐标系的(另一种是web买卡托坐标,不支持)
//添加天地图(互联网版)图层
addTdtLayer: function () {
//创建天地图图层 //图层配置
//PS:arcgis rest图层传入最小配置只要url就行,因为url有服务的详细配置(浏览器访问url可看详细配置信息),jsapi会自己去读
let layerConfig = {
//图层id,可以为空,空则自动分配
// id: "eeee"
}; //参数2:天地图图层类型,支持以下值:img=影像——经纬度,cia=影像注记——经纬度,vec=矢量——经纬度,cva=矢量注记——经纬度,ter=地形图——经纬度,cta=地形图注记——经纬度
//参数3:图层配置,值同官方创建图层的配置,也可空
let layer = mapUtil.layer.createTdtLayer(this.apiInstance, "vec", layerConfig);
//图层添加到map
this.map.add(layer);
},
arcgis jsapi接口入门系列(3):各种类型的图层添加的更多相关文章
- arcgis jsapi接口入门系列(2):图层基础操作
//图层相关demo layerFun: function () { //获取地图的所有图层(不包括的图层类型:底图图层(basemaps)) let layers = this.map.layers ...
- arcgis jsapi接口入门系列(0):总览
开发环境: arcgis jsapi版本4.9 由于我们这套代码是基于vue,webpack开发的,会有少数vue代码,但总体不影响 里面还有些我们公司的js库和html css,给出的代码不能百分百 ...
- arcgis jsapi接口入门系列(10):图形高亮
jsapi也有提供高亮的实现接口,但这里没用,而用的是一种改变图形(graphic)样式的思路 本文实现效果是:地图有多个面图形,当鼠标移动到面的上方,面高亮显示,鼠标移出后高亮解除 初始化 //高亮 ...
- arcgis jsapi接口入门系列(5):几何(点线面)基本操作
点 point: function () { //通过wkt生成点 //wkt,代表点的坐标 let wkt = "POINT(113.566806 22.22445)"; //w ...
- arcgis jsapi接口入门系列(8):鼠标在地图画面
初始化,每个map执行一次 PS:画点也差不多,都是用SketchViewModel,因此本demo没有专门写画点的 drawPolygonInit: function () { //画几何对象初始化 ...
- arcgis jsapi接口入门系列(7):鼠标在地图画线
初始化,每个map执行一次就行 drawPolylineInit: function () { //画几何对象初始化 //新建一个图形图层用于存放画图过程中的图形 let layer = new th ...
- arcgis jsapi接口入门系列(4):用代码在地图画点线面
PS:用代码画点这样写是为了跟后面的用鼠标画点线面区分出来 画点 drawPointGraphic: function () { //点有多种样式:一般的点,显示文字,显示图片 //一般的点 let ...
- arcgis jsapi接口入门系列(6):样式
symbol: function () { //线样式 //样式详情请看官方文档 let style = { //线颜色,支持多种格式: //CSS color string:例如"dodg ...
- arcgis jsapi接口入门系列(9):可以同时显示多个的地图popup
jsapi有提供popup功能,但缺点很多,例如地图上只能同时显示一个popup,popup内容有限制等 本文提供另一个方法,原理不用jsapi,在地图外用一个普通的div放在地图上面,再监听地图的鼠 ...
随机推荐
- eslintrc.js
此插件主要就是规范前端程序员编写JS的规范,让代码看上去很优雅,也便于后期人员的重构和维护. 因为是用vue的cli搭建项目工程,使用了eslintrc.js ,但是在写JS时发现,首字母缩进一直报错 ...
- Persistent connections CONN_MAX_AGE django
Persistent connections¶ Persistent connections avoid the overhead of re-establishing a connection to ...
- 使用AnimatorOverrideController动态更换animationclip注意事项
http://www.ceeger.com/forum/read.php?tid=19138 public AnimationClip clip; Animator anim; void Awake( ...
- IT兄弟连 JavaWeb教程 Servlet会话跟踪 Cookie路径问题
操作Cookie时,需要注意路径问题: 设置操作:任何路径都可以设置Cookie,但是有时我们也是用设置进行替换Cookie和删除Cookie(maxAge=0)! 替换:只能由完全相同的路径来操作! ...
- ADO学途 five day 连接数据库
用一个程序的目的就是为了方便对数据进行操作,没有数据的支持,程 序就成了一个空壳子.一般我们常用的数据库有三种mysql, SQL server, Oracle. C#中常用的就是SQL server ...
- Mybatis分页中遇到的坑2
站在巨人的肩膀上 http://crocutax.com/blog/mybatis-one-to-many-nestes-query-and-page-query Mybatis一对多嵌套查询和 ...
- PAT甲级——1130 Infix Expression (25 分)
1130 Infix Expression (25 分)(找规律.中序遍历) 我是先在CSDN上面发表的这篇文章https://blog.csdn.net/weixin_44385565/articl ...
- 在项目中移除CocoaPods
如果你觉得CocoaPods让你的项目出现了问题,不好用甚至是恶心,想将其从项目中彻底移除,也有方法: 1.删除工程文件夹下的Podfile.Podfile.lock和Pods文件夹. 2.删除xcw ...
- java小游戏——猜数字
import java.util.ArrayList; import java.util.List; import java.util.Random; public class Num01 { sta ...
- Codeforces 1107F(dp)
怎么就没人解释一下为啥用b排序可以保证正确性呢……太菜了,理解了好久. 时间流逝价值会丢失的背包,类似题洛谷1417 本题与洛谷1417不同之处在于流逝是有截止的. 1.这个dp[j]的含义是:最后跑 ...