1.0.8 • Published 4 years ago
m3-arcgis v1.0.8
m3-arcgis
arcgis api 包装 提供更高效的使用方式, 列举常用的 api
Table of Contents
Install
npm install --save-dev m3-arcgis
or
yarn add -D m3-arcgis
Usage 使用
下面是简单的使用方式
Loading m3-arcgis
for es6 module / 对于支持 es6 方式的加载
/* 引入编译好的 */
import M3Arcgis from "m3-arcgis/dist";
for ts / 对于支持 ts 方式的加载
//支持声明类型
import M3Arcgis from "m3-arcgis";
for js / 对于没有使用模块化的 js
<!-- index.html -->
<!-- 将编译好的文件拷贝到项目,然后直接引入 -->
<script src="./arcgis.js"></script>
初始化
import M3Arcgis from "m3-arcgis";
const arcgis = new M3Arcgis({
/* 地图容器,dom-id-string | HTMLElement */
container: 'map'
});
/* 需要等待arcgis初始化完成 */
await arcgis.init("http://xxxx/arcgis_js/api/4.12/");
const { Instance } = arcgis;
/* 业务操作 */
... ... ...
组件使用方式
底图的使用
列举几个常用的底图,在线和本地切片,天地图,高德地图,标准的 google 切片,由 arcmap 自定义方案的切片,详见
... ... ...
const { Instance } = arcgis;
/* 天地图 - 在线 - 矢量 - 墨卡托 */
const vectorOLBaseMap = baseLayer.customTileLayer({
id: "vectorOLBaseMap",
urlTemplate:
"https://xxx/T=vec_w&x={col}&y={row}&l={level}"
});
/* google - 在线 - 卫星 - 墨卡托 */
const satelliteOLBaseMap = baseLayer.customTileLayer({
id: "satelliteOLBaseMap",
visible: false,
urlTemplate: `http://xxx/lyrs=s@716&x={col}&y={row}&z={level}`
});
/* 本地切片 - 矢量 - 标准google切片格式 - arcgis16进制命名 */
const vectorBaseMap = baseLayer.customTileLayer({
id: "vectorMap",
urlTemplate:
"https://xxx/{level}/{row}/{col}.png",
getTileUrl(level, row, col) {
return this.urlTemplate
.replace("{level}", "L" + level.toString().padStart(2, 0))
.replace("{col}", "C" + col.toString(16).padStart(8, 0))
.replace("{row}", "R" + row.toString(16).padStart(8, 0));
}
});
/* 本地切片 - 卫星 - 自定义切片方案 - arcgis16进制命名 */
const tileInfo = {
rows: 256,
cols: 256,
compressionQuality: 0,
origin: { x: -20037700, y: 30241100 },
spatialReference: { wkid: 102100 },
lods: [
{ level: 0, resolution: 16.933367200067735, scale: 64000 },
{ level: 1, resolution: 8.4666836000338677, scale: 32000 },
{ level: 2, resolution: 4.2333418000169338, scale: 16000 },
{ level: 3, resolution: 2.1166709000084669, scale: 8000 },
{ level: 4, resolution: 1.0583354500042335, scale: 4000 },
{ level: 5, resolution: 0.52916772500211673, scale: 2000 },
{ level: 6, resolution: 0.26458386250105836, scale: 1000 },
{ level: 7, resolution: 0.13229193125052918, scale: 500 },
{ level: 8, resolution: 0.066145965625264591, scale: 250 },
{ level: 9, resolution: 0.033072982812632296, scale: 125 }
]
};
const satelliteBaseMap = baseLayer.customTileLayer({
id: "satelliteMap",
visible: false,
urlTemplate:
"https://xxx/{level}/{row}/{col}.png",
tileInfo,
getTileUrl(level, row, col) {
return this.urlTemplate
.replace("{level}", "L" + level.toString().padStart(2, 0))
.replace("{col}", "C" + col.toString(16).padStart(8, 0))
.replace("{row}", "R" + row.toString(16).padStart(8, 0));
}
});
view 的基本使用
主要有 缩放,中心点,属性监听,地图上的 ui 组件,截图,屏幕坐标和地图坐标转换等功能
const { view: _view } = Instance.getInstanceView();
/* 设置地图缩放约束 */
_view.constraints = {
minScale: 300000,
maxScale: 3600,
maxZoom: 17,
minZoom: 5
... ...
}
/* 设置中心点 */
_view.center = [x, y];
/* 设置缩放等级 */
_view.zoom = 8;
_view.scale = 20000;
/**
* 设置中心点(动画过渡)
* @param target 支持center结合zoom scale,geometry几何及其集合,graphic图形及其集合,extent,直接用范围
* @param option 支持animate是否使用动画,duration 时间,easing动画方式,signal销毁回调
*/
_view.goto(target, option?);
/**
*
* @param attr 支持view的属性 例如zoom scale缩放等级
* @param callback 回调 value => {}
*/
_view.watch(attr, callback);
/**
* 添加ui组件
* @param component 组件 Widget|HTMLElement|String|Object|Array 例如zoom attribution
* @param position 位置 bottom-leading | bottom-left | bottom-right | bottom-trailing | top-leading | top-left | top-right | top-trailing | manual
*/
_view.ui.add(component, position);
/* 移动ui组件 同上 */
_view.ui.move(component, position)
/* 移除ui组件 同上 */
_view.ui.remove(component, position)
/**
* 截图
* @param options
* format jpg | png.
* layers 只渲染指定的图层
* quality 0 - 100
* width ,height
* area 指定区域, {x, y, widht, height}
* ignorePadding
*/
const { dataUrl } = await _view.takeScreenshot(options);
/** 地图点转换为屏幕坐标
* @param screenPoint {x, y, spatialReference}
*/
_view.toMap(screenPoint);
/** 屏幕坐标转换为地图点
* @param screenPoint {x, y, spatialReference}
*/
_view.toScreen(mapPoint);
测距测面
/** 测距
* @param option 常用的有模式,平面球面 测量单位
* mode : auto | planar | geodesic
* unit :metric | imperial | square-inches | square-feet | square-us-feet | square-yards | square-miles | square-meters | square-kilometers | acres | ares | hectares
*
*/
const measure = Instance.getInstanceMeasure2D();
const distance = measure.distance(option?);
/** 测面
* @param 同上
*/
const measure = Instance.getInstanceMeasure2D();
const area = measure.area(option?);
绘制图形
点线面,钳击箭头,燕尾箭头,图标点位
/* 绘制工具 */
const sketch = Instance.getInstanceSketch();
/* 所有图形都有参数
option 绘制方式 mode: "hybrid" | "freehand" | "click"
return {created, updated}
完成创建回调,参数为创建的图形
图形更新回调,第二次创建的同类型图形将会覆盖前面更新函数
*/
/* 燕尾箭头 */
const graphic = sketch.doubleArrow({ mode: "hybrid" });
graphic.created(graph => console.log("绘制成功", graph));
/* 更新函数会被下次创建的同类型图形覆盖 */
graphic.updated(graph => console.log("更新成功", graph));
/* 钳击箭头 */
sketch.tailedSquadArrow();
/* 点线面 */
sketch.create("point");
sketch.create("polyline");
sketch.create("polygon");
/** 图标点位
* @param option {url, width, height}
*/
sketch.pointImg({ url, width, height });
/* 移除所有 */
sketch.removeAll();
arcigs 图层
arcigs 图层有服务图层和本地数据图层
可以用本地数据模拟服务图层
所有图层返回一个对象,两个值,addEvent,和_layer 原生图层
addEvent 监听点击和 hover 回调
原生 layer 可以直接操作属性,透明度,隐藏等,以及要素的查询操作等
const featureLayer = this.Instance.getInstanceFeatureLayer();
const { addEvent, _layer } = featureLayer.addLayer({
url: "http://xxx/MapServer",
id: "xxx"
});
/* 图层事件,只有点击和鼠标hover,获取选中属性 */
addEvent("click", data => {
console.log("featurelayer click data", data);
});
addEvent("pointer-move", data => {
console.log("featurelayer mouseup data", data);
});
/* 隐藏 */
_layer.visible = false;
/* 透明度 */
_layer.opacity = 0.4;
arcgis 服务图层
服务图层由 arcmap 发布, 一般有两种方式,featureLayer 和 mapImageLayer 第一种可以对象渲染元素进行操作,分析统计查询等,牺牲性能 第二种不可以进行操作,提高渲染性能,相当于栅格矢量
/* 要素服务图层,可交互,获取属性和图形等 */
const featureLayer = this.Instance.getInstanceFeatureLayer();
featureLayer.addLayer({
url: "http://xxx/MapServer",
id: "xxx"
});
/* 图形服务图层,高性能展示,无法自定义交互 */
const mapImageLayer = this.Instance.getInstanceMapImageLayer();
mapImageLayer.addLayer({
url: "http://xxx/MapServer"
});
本地数据图层
分为两个,graphicsLayer 和 featureLayer
graphicsLayer 简单粗暴,直接用经纬度数据绘制成点线面,
featureLayer 相对复杂,但是提供较多高级功能,数据分析 统计 筛选等,性能较好
grpahicslayer
const graphicsLayer = this.Instance.getInstanceGraphicsLayer();
/**
* @param option? 属性参数,一般为id,visible,opacity, max min Salce 等
* @param graphics? 为载入的图形,也可以在后面进行添加
*/
const { addEvent, _layer } = graphicsLayer.addLayer(option, graphics);
/* 添加图形 */
_layer.add(graphic);
_layer.addMany(graphic);
/* 移除 */
_layer.remove(graphic);
_layer.removeMany(graphic);
_layer.removeAll(graphic);
/* 获取所有的图形 */
const graphics = _layer.graphics;
/* graphics 格式
graphics 是图形,里面可以存放 点线面geometry,属性attributes和对应的渲染样式symbol,以及popupTemplate
geometry: type: 'point' | 'polyline' | 'polygon', 对应的要素是
point: x,y 或者 latitude, longitude 高程 z
polyline: paths number[][][] 二维或者三维数组, 三维数组为多个线段
polygon: rings number[][][] 二维或者三维数组, 三维数组为多个面
symbol:
point :
simple-marker 纯点位渲染, 可调节size,border,color,angel, xy偏移offset,style,圆形三角形正方形等
picture-maker 图片点位 属性有 url, width height 等
polyline: 主要widht color 等, style支持虚线,实线,点等组合 例如 solid dash dot dash-dot
polygon:
simple-fill 纯填充,有color outline, 边界线和line一致,style支持实填充,斜线,水平,交叉等 例如 solid, cross, 用处较少,可以看详细api
picture-fill 图片填充,url width height 偏移等,重复填充
attributes :要素的属性, 点击可以返回
popupTemplate:
默认弹窗,支持promise 字符串,function等,扩展性低,亮点在于跟随地图拖动,
高自由度建议点击后手动创建弹窗
*/
const graphicPoint = {
geometry: {
type: "point",
x: 109,
y: 32
},
symbol: {
type: "simple-marker",
color: "#f00",
size: "6px"
},
attributes: {
name: "i'm line"
}
};
const graphicLine = {
geometry: {
type: "polyline",
paths: [
[109, 30],
[109.1, 30.1],
[109.2, 30.2],
[109.2, 30.3]
]
},
symbol: {
type: "simple-line",
color: "#f00",
width: "6px"
},
attributes: {
name: "i'm line"
}
};
/* 获取特定要素可以根据图层的属性筛选 */
_layer.graphics.filter(g => g.attributes.name === "xxx");
_layer.graphics.forEach(g => (g.visible = false));
featurelayer
/* 推荐利用数据源 载入到featureLayer */
const featureLayer = this.Instance.getInstanceFeatureLayer();
/* 需要属性 ,渲染方式和视觉变量较为复杂, 需要详细参见官网!!!
fields:属性字段需要提供
spatialReference: 空间参考,
objectIdField: 唯一值,
labelingInfo: 要素的标签,
source : 源数据 ,和graphic 一致,不需要sybol和poptemplate
renderer: 图层的渲染方式,可以根据字段或者计算表达式 使用不同的渲染方式,
*/
featureLayer.addLayer({
id: "pointlayer",
minScale: 3000,
fields: [
{ name: "ObjectID", alias: "ObjectID", type: "oid" },
{ name: "plCode", alias: "plCode", type: "string" },
{ name: "expNo", alias: "expNo", type: "string" },
{ name: "id", alias: "id", type: "string" },
{ name: "lat", alias: "lat", type: "string" },
{ name: "lng", alias: "lng", type: "string" },
{ name: "appendant", alias: "appendant", type: "string" }
],
spatialReference: { wkid: 4326 },
objectIdField: "ObjectID",
source: graphics,
renderer: {
type: "unique-value",
// field: "plCode",
// field2: "appendant",
field: "appendant",
fieldDelimiter: ", ",
defaultSymbol: {}
uniqueValueInfos: [
{
value: "1",
symbol: {
type: 'point',
color: "#f00",
size: 10
}
}
],
visualVariables: {
type: 'opacity',
// filed: 'data_opacity'
valueExpression: "( $feature.TOT_VOTES / $feature.REG_VOTERS ) * 100",
stops: [
{ value: 30, opacity: 0.15 },
{ value: 70, opacity: 0.55 }
]
}
},
labelingInfo: [
{
labelExpressionInfo: { expression: "$feature.expNo" },
symbol: {
type: "text",
color: "#000"
}
}
]
})
/* 操作数据 */
// 查询数据,可添加查询条件
//geometry 几何, distance 几何搜索距离,geometryPrecision 几何操作小数位数
//objectIds id列表
//where sql查询语句
//returnGeometry 返回几何
//其他详见官网
_layer.queryFeatures().then(data)
// 添加/删除/修改数据
_layer.applyEdits({
deleteFeatures: features,
updateFeatures: features,
addFeatures: features
});
// 要素过滤 where ......
_layer.definitionExpression = ''
其他操作
墨卡托工具
经纬度转换 见官网
几何引擎
缓冲,相交,联合等 见官网
投影转换
见官网