arcgis jsapi接口入门系列（0）：总览
开发环境：
arcgis jsapi版本4.9
由于我们这套代码是基于vue，webpack开发的，会有少数vue代码，但总体不影响
里面还有些我们公司的js库和html css，给出的代码不能百分百直接运行，主要还是接口的总体介绍
代码中常见且不知来源的变量说明：
this.map和this.mapView：就是地图的map和mapView
this.apiInstance：这是公司框架封装的用于实例化arcgis jsapi对象的，不是必须的，例如new this.apiInstance.Extent，用原版jsapi就改成new Extent
以下是所有文章代码引用到的一个通用js文件，在此统一贴出代码
//地图通用操作
let comm = {
//图层
layer: {
/**
* 创建天地图图层
* 只支持经纬度坐标（需要平面的麦卡托坐标可以自行修改）
* @param tdtLayerType 天地图图层类型，支持以下值：img=影像——经纬度，cia=影像注记——经纬度，vec=矢量——经纬度，cva=矢量注记——经纬度
* ter=地形图——经纬度，cta=地形图注记——经纬度
*/
createTdtLayer: function (apiInstance, tdtLayerType, layerConfig) {
//切片配置
//PS：加载天地图图层本质上是用自定义切片图层
var tileInfo = new apiInstance.TileInfo({
"rows": 256,
"cols": 256,
"compressionQuality": 0,
//切片原点
"origin": {
"x": -180,
"y": 90
},
//坐标系
"spatialReference": {
//本方法只支持经纬度坐标，坐标系为wgs84
"wkid": 4326
},
"lods": [
//天地图固定的切片级别
{"level": 2, "resolution": 0.3515625, "scale": 147748796.52937502},
{"level": 3, "resolution": 0.17578125, "scale": 73874398.264687508},
{"level": 4, "resolution": 0.087890625, "scale": 36937199.132343754},
{"level": 5, "resolution": 0.0439453125, "scale": 18468599.566171877},
{"level": 6, "resolution": 0.02197265625, "scale": 9234299.7830859385},
{"level": 7, "resolution": 0.010986328125, "scale": 4617149.8915429693},
{"level": 8, "resolution": 0.0054931640625, "scale": 2308574.9457714846},
{"level": 9, "resolution": 0.00274658203125, "scale": 1154287.4728857423},
{"level": 10, "resolution": 0.001373291015625, "scale": 577143.73644287116},
{"level": 11, "resolution": 0.0006866455078125, "scale": 288571.86822143558},
{"level": 12, "resolution": 0.00034332275390625, "scale": 144285.93411071779},
{"level": 13, "resolution": 0.000171661376953125, "scale": 72142.967055358895},
{"level": 14, "resolution": 8.58306884765625e-005, "scale": 36071.483527679447},
{"level": 15, "resolution": 4.291534423828125e-005, "scale": 18035.741763839724},
{"level": 16, "resolution": 2.1457672119140625e-005, "scale": 9017.8708819198619},
{"level": 17, "resolution": 1.0728836059570313e-005, "scale": 4508.9354409599309},
{"level": 18, "resolution": 5.3644180297851563e-006, "scale": 2254.4677204799655},
{"level": 19, "resolution": 2.68220901489257815e-006, "scale": 1127.23386023998275},
{"level": 20, "resolution": 1.341104507446289075e-006, "scale": 563.616930119991375},
{"level": 21, "resolution": 6.705522537231445375e-007, "scale": 281.8084650599956875},
{"level": 22, "resolution": 3.3527612686157226875e-007, "scale": 140.90423252999784375},
{"level": 23, "resolution": 1.67638063430786134375e-007, "scale": 70.452116264998921875},
{"level": 24, "resolution": 8.38190317153930671875e-008, "scale": 35.2260581324994609375}
]
});
//设置图层全图范围
let spatialReference = new apiInstance.SpatialReference({wkid: 4326});
let fullExtent = new apiInstance.Extent(-180.0, -90.0, 180.0, 90.0, spatialReference);
//图层配置
layerConfig = layerConfig || {};
$.extend(layerConfig, {
//天地图切片的url模板
urlTemplate: "http://{subDomain}.tianditu.cn/" + tdtLayerType + "_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=" + tdtLayerType + "&STYLE=default&TILEMATRIXSET=c&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&FORMAT=tiles",
subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
copyright: "",
spatialReference: spatialReference,
fullExtent: fullExtent,
tileInfo: tileInfo,
});
//根据图层配置新建图层
let layer = new apiInstance.WebTileLayer(layerConfig);
return layer;
},
/**
* 创建图形图层并添加到地图
* @param apiInstance
* @param map 地图
* @param layerConfig 图层配置
*/
createGraphicsLayerAndAddToMap: function (apiInstance, map, layerConfig) {
let layer = new apiInstance.GraphicsLayer(layerConfig);
//图层添加到地图
map.add(layer);
return layer;
},
},
//几何
geometry: {
/**
* wkt转点的图形（Graphic）
* @param apiInstance api
* @param wkt wkt
* @param style 样式
* @param sr 空间参考
* @param attributes 属性字段值（可空）
*/
wktToPointGraphic: function (apiInstance, wkt, style, sr, attributes) {
//wkt转点的几何对象
let point = comm.geometry.wktToPoint(apiInstance, wkt, sr);
//生成点样式
let markerSymbol = new apiInstance.SimpleMarkerSymbol(
style,
);
//生成图形
let graphic = new apiInstance.Graphic({
//几何对象
geometry: point,
//样式
symbol: markerSymbol,
//属性字段
attributes: attributes,
});
return graphic;
},
/**
* wkt转点的文字的图形（Graphic）
* @param apiInstance api
* @param wkt wkt
* @param style 样式
* @param sr 空间参考
* @param attributes 属性字段值（可空）
*/
wktToTextGraphic: function (apiInstance, wkt, style, sr, attributes) {
//wkt转点的几何对象
let point = comm.geometry.wktToPoint(apiInstance, wkt, sr);
//生成点样式，TextSymbol=文字样式
let markerSymbol = new apiInstance.TextSymbol(
style,
);
//生成图形
let graphic = new apiInstance.Graphic({
//几何对象
geometry: point,
//样式
symbol: markerSymbol,
//属性字段
attributes: attributes,
});
return graphic;
},
/**
* wkt转点的图片的图形（Graphic）
* @param apiInstance api
* @param wkt wkt
* @param style 样式
* @param sr 空间参考
* @param attributes 属性字段值（可空）
*/
wktToPicGraphic: function (apiInstance, wkt, style, sr, attributes) {
//wkt转点的几何对象
let point = comm.geometry.wktToPoint(apiInstance, wkt, sr);
//生成点样式，PictureMarkerSymbol=图片点样式
let pictureMarkerSymbol = new apiInstance.PictureMarkerSymbol(
style,
);
//生成图形
let graphic = new apiInstance.Graphic({
//几何对象
geometry: point,
//样式
symbol: pictureMarkerSymbol,
//属性字段
attributes: attributes,
});
return graphic;
},
/**
* wkt转点几何对象
* @param apiInstance api
* @param wkt wkt
* @param sr 空间参考
* @returns {apiInstance.Polyline}
*/
wktToPoint: function (apiInstance, wkt, sr) {
//wkt转坐标对象
let points = comm.geometry.wktToCoords(wkt);
//生成线
let point = new apiInstance.Point({
//坐标
x: points[0],
y: points[1],
//空间参考
spatialReference: sr
});
return point;
},
/**
* 坐标集合转点几何对象
* @param apiInstance api
* @param wkt wkt
* @param sr 空间参考
* @returns {apiInstance.Polyline}
*/
coordToPoint: function (apiInstance, coord, sr) {
//生成线
let point = new apiInstance.Point({
//坐标
x: coord[0],
y: coord[1],
//空间参考
spatialReference: sr
});
return point;
},
/**
* 根据x y新建点几何对象
* @param apiInstance api
* @param wkt wkt
* @param sr 空间参考
* @returns {apiInstance.Polyline}
*/
xyToPoint: function (apiInstance, x, y, sr) {
//生成线
let point = new apiInstance.Point({
//坐标
x: x,
y: y,
//空间参考
spatialReference: sr
});
return point;
},
/**
* 点转wkt
* @param geometry
* @returns {string}
*/
pointToWkt: function (geometry) {
return "POINT (" + geometry.x + " " + geometry.y + ")";
},
/**
* 线几何对象转线的图形（Graphic）
* @param apiInstance api
* @param wkt wkt
* @param style 样式
* @param sr 空间参考
* @param attributes 属性字段值（可空）
*/
polylineToPolylineGraphic: function (apiInstance, geometry, style, sr, attributes) {
//生成线样式
let lineSymbol = new apiInstance.SimpleLineSymbol(
style,
);
//生成图形
let graphic = new apiInstance.Graphic({
//几何对象
geometry: geometry,
//样式
symbol: lineSymbol,
//属性字段
attributes: attributes,
});
return graphic;
},
/**
* wkt转线的图形（Graphic）
* @param apiInstance api
* @param wkt wkt
* @param style 样式
* @param sr 空间参考
* @param attributes 属性字段值（可空）
*/
wktToPolylineGraphic: function (apiInstance, wkt, style, sr, attributes) {
//wkt转线的几何对象
let polyline = comm.geometry.wktToPolyline(apiInstance, wkt, sr);
//生成线样式
let lineSymbol = new apiInstance.SimpleLineSymbol(
style,
);
//生成图形
let graphic = new apiInstance.Graphic({
//几何对象
geometry: polyline,
//样式
symbol: lineSymbol,
//属性字段
attributes: attributes,
});
return graphic;
},
/**
* wkt转线几何对象
* @param apiInstance api
* @param wkt wkt
* @param sr 空间参考
* @returns {apiInstance.Polyline}
*/
wktToPolyline: function (apiInstance, wkt, sr) {
//wkt转坐标对象
let points = comm.geometry.wktToCoords(wkt);
//生成线
let polyline = new apiInstance.Polyline({
//坐标
paths: points,
//空间参考
spatialReference: sr
});
return polyline;
},
/**
* 坐标转线几何对象
* @param apiInstance api
* @param coord 坐标对象，格式如：[[[113.545949, 22.24015749], [113.56989, 22.24916], [113.55324, 22.220588]]]
* @param sr 空间参考
* @returns {apiInstance.Polyline}
*/
coordToPolyline: function (apiInstance, coord, sr) {
//生成线
let polyline = new apiInstance.Polyline({
//坐标
paths: coord,
//空间参考
spatialReference: sr
});
return polyline;
},
/**
* 线转wkt
* @param geometry
* @returns {string}
*/
polylineToWkt: function (geometry) {
var wkt = [];
var paths = geometry.paths;
for (var i in paths) {
var path = paths[i];
for (var j in path) {
var p = path[j];
wkt.push(p.join(" "));
}
}
return "LINESTRING (" + wkt.join(",") + ")";
},
/**
* wkt转面的图形（Graphic）
* @param apiInstance api
* @param wkt wkt
* @param style 样式
* @param sr 空间参考
* @param attributes 属性字段值（可空）
*/
wktToPolygonGraphic: function (apiInstance, wkt, style, sr, attributes) {
//wkt转面的几何对象
let polygon = comm.geometry.wktToPolygon(apiInstance, wkt, sr);
//生成面样式
let fillSymbol = new apiInstance.SimpleFillSymbol(
style,
);
//生成图形
let graphic = new apiInstance.Graphic({
//几何对象
geometry: polygon,
//样式
symbol: fillSymbol,
//属性字段
attributes: attributes,
});
return graphic;
},
/**
* 面几何对象转面的图形（Graphic）
* @param apiInstance api
* @param wkt wkt
* @param style 样式
* @param sr 空间参考
* @param attributes 属性字段值（可空）
*/
polygonToPolygonGraphic: function (apiInstance, geometry, style, sr, attributes) {
//生成面样式
let fillSymbol = new apiInstance.SimpleFillSymbol(
style,
);
//生成图形
let graphic = new apiInstance.Graphic({
//几何对象
geometry: geometry,
//样式
symbol: fillSymbol,
//属性字段
attributes: attributes,
});
return graphic;
},
/**
* wkt转面几何对象
* @param apiInstance api
* @param wkt wkt
* @param sr 空间参考
* @returns {apiInstance.Polygon}
*/
wktToPolygon: function (apiInstance, wkt, sr) {
//wkt转坐标对象
let points = comm.geometry.wktToCoords(wkt);
//生成面
let polygon = new apiInstance.Polygon({
//坐标
rings: points,
//空间参考
spatialReference: sr
});
return polygon;
},
/**
* 坐标对象转面几何对象
* @param apiInstance api
* @param coord 坐标对象 格式是arcgis jsapi标准，例如：[[[113.527839, 22.27028], [113.527238, 22.2557786], [113.5437178, 22.2597268], [113.54423, 22.2730306], [113.527839, 22.27028]]]
* @param sr 空间参考
* @returns {apiInstance.Polygon}
*/
coordToPolygon: function (apiInstance, coord, sr) {
//生成面
let polygon = new apiInstance.Polygon({
//坐标
rings: coord,
//空间参考
spatialReference: sr
});
return polygon;
},
/**
* 面转wkt
* @param geometry
* @returns {string}
*/
polygonToWkt: function (geometry) {
let wkt = [];
let rings = geometry.rings;
for (let i in rings) {
let ring = rings[i];
for (let j in ring) {
let p = ring[j];
wkt.push(p.join(" "));
}
}
return "POLYGON ((" + wkt.join(",") + "))";
},
/**
* wkt转坐标对象
* PS：坐标对象是arcgis jsapi格式
* @param wkt
* @returns {*}
*/
wktToCoords: function (wkt) {
var features, type, str;
wkt = wkt.replace(/[\n\r]/g, " ");
var matches = comm.geometry.regExes.typeStr.exec(wkt);
if (matches) {
type = matches[1].toLowerCase();
str = matches[2];
if (comm.geometry.parse[type]) {
features = comm.geometry.parse[type].apply(this, [str]);
}
}
return features;
},
/**
* wkt转坐标对象的正则表单式
*/
regExes: {
'typeStr': /^\s*(\w+)\s*\(\s*(.*)\s*\)\s*$/,
'spaces': /\s+/,
'parenComma': /\)\s*,\s*\(/,
'doubleParenComma': /\)\s*\)\s*,\s*\(\s*\(/, // can't use {2} here
'trimParens': /^\s*\(?(.*?)\)?\s*$/
},
/**
* wkt转坐标对象
*/
parse: {
'point': function (str) {
var coords = comm.util.trim(str).split(comm.geometry.regExes.spaces);
for (var i in coords)
coords[i] = Number(coords[i]);
return coords;//new esri.geometry.Point(coords[0], coords[1]);
},
'pointzm': function (str) {
var coords = comm.util.trim(str).split(comm.geometry.regExes.spaces);
for (var i in coords)
coords[i] = Number(coords[i]);
return coords.slice(0, 2);//new esri.geometry.Point(coords[0], coords[1]);
},
'linestring': function (str) {
var points = comm.util.trim(str).split(',');
var components = [];
for (var i = 0, len = points.length; i < len; ++i) {
components.push(comm.geometry.parse.point.apply(this, [points[i]]));
}
return components//new esri.geometry.Polyline(components);
},
'linestringzm': function (str) {
var points = comm.util.trim(str).split(',');
var components = [];
for (var i = 0, len = points.length; i < len; ++i) {
components.push(comm.geometry.parse.pointzm.apply(this, [points[i]]));
}
return components//new esri.geometry.Polyline(components);
},
'multilinestring': function (str) {
var line;
var lines = comm.util.trim(str).split(comm.geometry.regExes.parenComma);
var components = [];
for (var i = 0, len = lines.length; i < len; ++i) {
line = lines[i].replace(comm.geometry.regExes.trimParens, '$1');
components.push(comm.geometry.parse.linestring.apply(this, [line]));
}
return components;
},
'polygon': function (str) {
var ring, linestring, linearring;
var rings = comm.util.trim(str).split(comm.geometry.regExes.parenComma);
var components = [];
for (var i = 0, len = rings.length; i < len; ++i) {
ring = rings[i].replace(comm.geometry.regExes.trimParens, '$1');
linestring = comm.geometry.parse.linestring.apply(this, [ring]);
components.push(linestring);
}
return components;
}
},
},
//通用
util: {
trim: function (str) {
return str.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
}
}
};
module.exports = comm;
arcgis jsapi接口入门系列（0）：总览的更多相关文章
- arcgis jsapi接口入门系列（5）：几何（点线面）基本操作
点 point: function () { //通过wkt生成点 //wkt,代表点的坐标 let wkt = "POINT(113.566806 22.22445)"; //w ...
- arcgis jsapi接口入门系列（2）：图层基础操作
//图层相关demo layerFun: function () { //获取地图的所有图层(不包括的图层类型:底图图层(basemaps)) let layers = this.map.layers ...
- arcgis jsapi接口入门系列（10）：图形高亮
jsapi也有提供高亮的实现接口,但这里没用,而用的是一种改变图形(graphic)样式的思路 本文实现效果是:地图有多个面图形,当鼠标移动到面的上方,面高亮显示,鼠标移出后高亮解除 初始化 //高亮 ...
- arcgis jsapi接口入门系列（3）：各种类型的图层添加
这里说的tomcat切片,是指arcgis server切片后,把切片图片文件用tomcat发布(其他任意web服务器发布都行) //添加tomcat切片图层 addTomcatTileLayer: ...
- arcgis jsapi接口入门系列（9）：可以同时显示多个的地图popup
jsapi有提供popup功能,但缺点很多,例如地图上只能同时显示一个popup,popup内容有限制等 本文提供另一个方法,原理不用jsapi,在地图外用一个普通的div放在地图上面,再监听地图的鼠 ...
- arcgis jsapi接口入门系列（6）：样式
symbol: function () { //线样式 //样式详情请看官方文档 let style = { //线颜色,支持多种格式: //CSS color string:例如"dodg ...
- arcgis jsapi接口入门系列（4）：用代码在地图画点线面
PS:用代码画点这样写是为了跟后面的用鼠标画点线面区分出来 画点 drawPointGraphic: function () { //点有多种样式:一般的点,显示文字,显示图片 //一般的点 let ...
- arcgis jsapi接口入门系列（8）：鼠标在地图画面
初始化,每个map执行一次 PS:画点也差不多,都是用SketchViewModel,因此本demo没有专门写画点的 drawPolygonInit: function () { //画几何对象初始化 ...
- arcgis jsapi接口入门系列（7）：鼠标在地图画线
初始化,每个map执行一次就行 drawPolylineInit: function () { //画几何对象初始化 //新建一个图形图层用于存放画图过程中的图形 let layer = new th ...
随机推荐
- 6 git 生成SSH公钥/私钥 查看公钥
如果没有公钥的话就生成公钥私钥: $ ssh-keygen 然后连续回车(一次是位置,两次密码)
- netstat -st输出解析(二)
转自:http://perthcharles.github.io/2015/11/10/wiki-netstat-proc/ netstat -st输出的两个重要信息来源分别是/proc/net/sn ...
- CF-845C
C. Two TVs time limit per test 2 seconds memory limit per test 256 megabytes input standard input ou ...
- Centos7 使用 supervisor 管理进程
一.安装 //直接使用pip安装(pip的安装 http://www.cnblogs.com/yxhblogs/p/8971251.html) pip install supervisor 二.配置 ...
- DOM,date,字符串
ECMAscript Dom doc Bom Browerwindow --窗口. location --地址栏. history --历史. document --文档. statue --任务栏& ...
- HDU - 6341 多校4 Let Sudoku Rotate（状压dfs）
Problem J. Let Sudoku Rotate Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 262144/262144 K ...
- gitHub上传代码
首先进入github官网注册一个帐号 00.png 注册完帐号之后创建一个项目 01.png 设置创建项目的信息 02.png 创建项目完之后复制项目的地址,以供后面下载项目使用 03.png 在桌面 ...
- winform防止界面卡死的三种方法
在编程过程中经常会遇到耗时操作,这个时候如果不采取一些必要的异步操作,就会导致界面的卡死,这里以winform为例子,介绍三种方法防止界面卡死,对这几个方法稍加修改同样适用于wpf,silverlig ...
- php 判断手机号运营商
/* 移动:134.135.136.137.138.139.150.151.157(TD).158.159.187.188 联通:130.131.132.152.155.156.185.186 电信: ...
- 洛谷 P5162 WD与积木【多项式求逆】
设f[i]为i个积木能堆出来的种类,g[i]为i个积木能堆出来的种类和 \[ f[n]=\sum_{i=1}^{n}C_{n}^{i}g[n-i] \] \[ g[n]=\sum_{i=1}^{n}C ...