自己遇到的一些小经验总结,没有好好的总结,可能你们看起来比较难受
目录
1、 4.16起的cim 中的cimlinesymbol不适用于3D
2、 MapImagLayer 无 hitTest方法,也无高亮方法
3、 对单个字段属性多个值进行渲染筛选用simpleRenderer,如下
4、 MapImageLayer 不适用于上面说的Renderer
5、单独用click去点查点的话,要设置缓冲区,hitTest就不用,
6. 2000坐标系下只能用geometryService对geometry进行测量切割缓冲等操作:
8、针对查询的统计结果,利用query.outStatistics
11.加快查询速度与展示速度:发布TileLayer用于展示,利用属性空间查询--》服务地址查询
13. 去除自带的放大缩小和底部的arcgis logo样式
17、 利用 ES6 async 和 await ,Promise ,创建地图后可进行的操作
19、 使用element ui 中的 Dialog 弹出框中包含地图时,点击第一次地图不出现:
1、 4.16起的cim 中的cimlinesymbol不适用于3D
2、 MapImagLayer 无 hitTest方法,也无高亮方法
3、 对单个字段属性多个值进行渲染筛选用simpleRenderer,如下
simpleRenderer: {
type: "unique-value",
field: "grade", //"type",
defaultSymbol: {
type: "picture-marker"
},
uniqueValueInfos: [{
value: "一级",//古树1级
symbol: {
type: "picture-marker",
url: window.location.href.split('#')[0] + "/static/img/map/gs1.png",
width: "20",
height: "20"
}
}, {
value: "二级",//古树2级
symbol: {
type: "picture-marker",
url: window.location.href.split('#')[0] + "/static/img/map/gs2.png",
width: "20",
height: "20"
}
}, {
value: "三级",//古树3级
symbol: {
type: "picture-marker",
url: window.location.href.split('#')[0] + "/static/img/map/gs3.png",
width: "20",
height: "20"
}
}, {
value: "",//名木
symbol: {
type: "picture-marker",
url: window.location.href.split('#')[0] + "/static/img/map/mm.png",
width: "20",
height: "20"
}
}],
},
4、 MapImageLayer 不适用于上面说的Renderer
5、单独用click去点查点的话,要设置缓冲区,hitTest就不用,
之前没有hittest的时候,click一点一个准啊
6. 2000坐标系下只能用geometryService对geometry进行测量切割缓冲等操作:
(1)长度测量
// that.mapObj.view.graphics.add(new that.mapObj.Graphic({
// geometry:event.graphic.geometry
// }))
var areasAndLengthParams = new that.mapObj.LengthsParameters({
areaUnit: "square-meters",
lengthUnit: "meters",
polylines: event.graphic.geometry
});
that.mapObj.gs.lengths(areasAndLengthParams).then(function (results) {
console.log(results)
});
(2)面积测量
that.mapObj.gs.simplify([event.graphic.geometry]).then(function (simplifiedGeometries) {
var areasAndLengthParams = new that.mapObj.AreasAndLengthsParameters({
areaUnit: "square-meters",
lengthUnit: "meters",
polygons: simplifiedGeometries
});
that.mapObj.gs.areasAndLengths(areasAndLengthParams).then(function (results) {
let eventMj = results.areas[0];
if (eventMj.toFixed(0) > 1000000) { //判断筛选面积是否超出
alert("范围超标,请重新绘制范围!")
} else {
that.queryByGeometry_second();
}
that.clearSketchGeometry();
});
});
(3)缓冲
let params=new that.mapObj.BufferParameters({
distances:[50],
unit:"meters",
bufferSpatialReference:new that.mapObj.SpatialReference({wkid:4548}),
outSpatialReference:that.mapObj.view.spatialReference,
geometries: [that.mapObj.view.toMap(evt)],
})
that.mapObj.gs.buffer(params).then(function (res){
console.log(res[0])
that.mapObj.view.graphics.add(new that.mapObj.Graphic({
geometry:res[0],
symbol:that.mapObj.bufferSymbol
}))
})
7.图形查询高亮显示信息卡操作
针对数据量大的加载用MapImageMap类的,不能显示高亮,但是可以设置popupTemplate,(不过可以添加一个专门的图层GraphicLayer这样就可以设置高亮和popupTemplate)
针对GraphicLayer和FeatureLayer的可以直接高亮并打开
MapImageMap:没有添加额外的图层
let layer = that.XiaoBan_2018.findSublayerById(0);
let query = layer.createQuery();
query.geometry = that.mapObj.view.toMap(evt);
query.outFields = "*";
query.spatialRelationship = "intersects";
query.where="DILEI_2 <> '0200'";
layer.queryFeatures(query).then(function(results) {
if (results.features.length > 0) {
let gra = results.features[0];
//高亮
that.mapObj.view.graphics.removeAll();
let gra1 = gra.clone();
gra1.symbol = {
type: "simple-fill", // autocasts as new SimpleMarkerSymbol()
color: [234, 244, 254, 0],
outline: {
// autocasts as new SimpleLineSymbol()
width: 1.5,
color: [237,15,15, 1],
style: "dash",
cap:'butt',
join :"bevel",
},
};
that.XB_info = [];
let xj =
gra.attributes.XIAOBAN_XJ == 0 ? "" : gra.attributes.XIAOBAN_XJ;
that.xbInfo={
"XIAN_MC": gra.attributes.XIAN_MC,
"XIANG_MC":gra.attributes.XIANG_MC,
"CUN_MC":gra.attributes.CUN_MC,
"XIAO_BAN":gra.attributes.XIAO_BAN,
"DILEI_2":that.getMC("DILEI_2", gra.attributes.DILEI_2),
"QI_YUAN_2":that.getMC("QI_YUAN_2", gra.attributes.QI_YUAN_2),
"MIAN_JI":gra.attributes.MIAN_JI,
"LIN_ZHONG2":that.getMC("LIN_ZHONG2", gra.attributes.LIN_ZHONG2),
"XIAOBAN_XJ":xj,
"SENLIN_LB_2": that.getMC("SENLIN_LB_2", gra.attributes.SENLIN_LB_2),
"LD_QS":that.getMC("LD_QS", gra.attributes.LD_QS),
"YOU_SHI_SZ_2": that.getMC("YOU_SHI_SZ_2", gra.attributes.YOU_SHI_SZ_2),
"BH_DJ":that.getMC("BH_DJ", gra.attributes.BH_DJ)
};
gra1.popupTemplate=that.template;
setTimeout(function (){
that.xiaoban=true;
that.mapObj.view.graphics.add(gra1);
that.mapObj.view.popup.open({
features: [gra1],
location: gra1.geometry.centroid
});
},500)
MapImageMap:添加额外的图层(这个适用于查询)
//加载查询图层
that.queryResultGraphicLayer = new that.mapObj.GraphicsLayer({
id: "queryResultGraphicLayer",
// popupEnabled: true,
// popupTemplate:that.template
})
that.mapObj.map.add(that.queryResultGraphicLayer);
that.queryResultGraphicLayer.on("layerview-create", function(event) {
that.queryResultGraphicLayerView = event.layerView;
});
query.where = sql;
that.thematicLayer.findSublayerById(0).queryFeatures(query)
.then(function(results) {
//遍历属性查询的值,进行渲染
if (results.features.length > 0) {
//用element ui
that.queryResultArr = [];
that.queryResultGraphicLayer.removeAll();
let graArr_1 = results.features.filter(function(item) {
return item.attributes.DILEI_2 != '0200'
})
let graArr = graArr_1.map(function(item) {
let gra = item.clone();
gra.symbol = that.hightSymbol;
gra.popupTemplate = that.template;
//填充表格信息
let temp = {};
temp.OBJECTID = item.attributes.OBJECTID; //编号
temp.XIAO_BAN = item.attributes.XIAO_BAN; //小班号
temp.XIAN_MC = item.attributes.XIAN_MC; //县
temp.XIANG_MC = item.attributes.XIANG_MC; //乡
temp.CUN_MC = item.attributes.CUN_MC; //村
temp.MIAN_JI = item.attributes.MIAN_JI; //面积
temp.XIAOBAN_XJ = item.attributes.XIAOBAN_XJ == 0 ? "" : item.attributes.XIAOBAN_XJ;
// temp.XIAOBAN_XJ = item.attributes.XIAOBAN_XJ; //小班蓄积
temp.DILEI_2 = that.getMC("DILEI_2", item.attributes.DILEI_2); //地类
temp.LD_QS = that.getMC("LD_QS", item.attributes.LD_QS); //林地权属
temp.QI_YUAN_2 = that.getMC("QI_YUAN_2", item.attributes.QI_YUAN_2); //起源
temp.LIN_ZHONG2 = that.getMC("LIN_ZHONG2", item.attributes.LIN_ZHONG2); //林种
temp.SENLIN_LB_2 = that.getMC("SENLIN_LB_2", item.attributes.SENLIN_LB_2); //森林类别
temp.YOU_SHI_SZ_2 = that.getMC("YOU_SHI_SZ_2", item.attributes.YOU_SHI_SZ_2); //优势树种(组)
temp.BH_DJ = that.getMC("BH_DJ", item.attributes.BH_DJ); //林地保护等级
that.queryResultArr.push(temp);
return gra;
})
that.queryResultGraphicLayer.addMany(graArr);
高亮并打开操作:
//查询的要素查看
handleClick(row) {
let that = this;
let gra = null;
that.queryResultGraphicLayerView.queryGraphics().then(function(results) {
if (results.length > 0) {
//筛选点击的色块
gra = results.items.filter(function(res) {
return res.attributes.OBJECTID == row.OBJECTID
})
that.xbInfo = {};
that.xbInfo = row;
that.xiaoban = true;
//对筛选的色块进行操作--定位,高亮
if (gra != null) {
that.mapObj.view
.goTo(gra[0].geometry.extent, {
duration: 1000,
})
.then(function() {
that.mapObj.view.popup.open({
features: [gra[0]],
location: gra[0].geometry.centroid
});
})
// that.mapObj.view.goTo(gra[0].geometry.extent, {
// duration: 1500,
// }) //定位太卡
// //高亮
// if (that.highlight) {
// that.highlight.remove();
// }
// that.highlight = that.queryResultGraphicLayerView.highlight(gra[0])
}
}
});
// console.log(row); //点击查看获取当前行的小班信息塞入小班信息卡
},
8、针对查询的统计结果,利用query.outStatistics
http://106.14.206.172:1059/sdk4.16/latest/sample-code/sandbox/index.html?sample=featurelayerview-query-distance
//先查古树名木
let query = that.GSMM.createQuery();
query.geometry = geo;
// query.outFields = "*";
query.spatialRelationship = "intersects";
query.outStatistics = [{
onStatisticField: "CASE WHEN GRADE = '一级' THEN 1 ELSE 0 END",
outStatisticFieldName: "一级古树",
statisticType: "sum"
},{
onStatisticField: "CASE WHEN GRADE = '二级' THEN 1 ELSE 0 END",
outStatisticFieldName: "二级古树",
statisticType: "sum"
},{
onStatisticField: "CASE WHEN GRADE = '三级' THEN 1 ELSE 0 END",
outStatisticFieldName: "三级古树",
statisticType: "sum"
},{
onStatisticField: "CASE WHEN GRADE = '' THEN 1 ELSE 0 END",
outStatisticFieldName: "名木",
statisticType: "sum"
}]
that.GSMM.queryFeatures(query)
.then(function (results) {
console.log(results.features);
if (results.features.length > 0) {
}
})
9、取消地图双击放大事件
that.mapObj.view.on("double-click",function(evt) {
evt.stopPropagation();
...
...
})
10、禁止地图2D状态下旋转
view.constraints = {
rotationEnabled: false, // Disables map rotation
};
11.加快查询速度与展示速度:发布TileLayer用于展示,利用属性空间查询--》服务地址查询
ArcGIS api for JavaScript 之 空间、属性查询_往事随风的博客-CSDN博客
that.mapObj.view.on("click", function(evt) {
let screenPointMove = {
x: evt.x,
y: evt.y
};
that.mapObj.view.hitTest(evt, {
include: that.queryResultGraphicLayer
}).then(function(response) {
if (response.results.length) {
that.xiaoban = true;
} else {
that.xiaoban = false;
}
});
if (that.swipe != null) {
let url_query=null;
if( Number(screenPointMove.x)>Number(document.getElementsByClassName("esri-swipe__container")[0].offsetLeft)){
url_query=that.XB_Tile_17.url;
}else {
url_query=that.XiaoBan_2018_swipe.url;
}
let identifyTask = new that.mapObj.IdentifyTask(url_query);
let params = new that.mapObj.IdentifyParameters();
params.tolerance = 0;
params.layerIds = [0];
params.layerOption = "top";
params.width = that.mapObj.view.width;
params.height = that.mapObj.view.height;
params.geometry = evt.mapPoint;
params.mapExtent = that.mapObj.view.extent;
params.returnGeometry = true;
params.returnFieldName=true;
params.returnUnformattedValues=true;
document.getElementById("mapContent").style.cursor = "wait";
identifyTask.execute(params).then(function (response) {
that.mapObj.view.graphics.removeAll();
if(response.results.length>0){
let gra =response.results[0].feature;
let gra1 = gra.clone();
console.log(gra1);
gra1.symbol = {
type: "simple-fill", // autocasts as new SimpleMarkerSymbol()
color: [234, 244, 254, 0],
outline: {
// autocasts as new SimpleLineSymbol()
width: 1.5,
color: [237, 15, 15, 1],
style: "dash",
cap: 'butt',
join: "bevel",
},
};
that.xbInfo = [];
let xj =
gra.attributes.XIAOBAN_XJ == 0 ? "" : (Number(gra.attributes.XIAOBAN_XJ).toFixed(4)*1);
that.xbInfo = {
"XIAN_MC": gra.attributes.XIAN_MC,
"XIANG_MC": gra.attributes.XIANG_MC,
"CUN_MC": gra.attributes.CUN_MC,
"XIAO_BAN": gra.attributes.XIAO_BAN,
"DILEI_2": that.getMC("DILEI_2", gra.attributes.DILEI_2),
"QI_YUAN_2": that.getMC("QI_YUAN_2", gra.attributes.QI_YUAN_2),
"MIAN_JI": gra.attributes.MIAN_JI,
"LIN_ZHONG2": that.getMC("LIN_ZHONG2", gra.attributes.LIN_ZHONG2),
"XIAOBAN_XJ": xj,
"SENLIN_LB_2": that.getMC("SENLIN_LB_2", gra.attributes.SENLIN_LB_2),
"LD_QS": that.getMC("LD_QS", gra.attributes.LD_QS),
"YOU_SHI_SZ_2": that.getMC("YOU_SHI_SZ_2", gra.attributes.YOU_SHI_SZ_2),
"BH_DJ": that.getMC("BH_DJ", gra.attributes.BH_DJ)
};
gra1.popupTemplate = that.template;
setTimeout(function() {
that.xiaoban = true;
that.mapObj.view.graphics.add(gra1);
that.mapObj.view.popup.open({
features: [gra1],
location:evt.mapPoint
});
document.getElementById("mapContent").style.cursor = "auto";
}, 500)
}
})
}
})
其中这三个属性听蛋疼的
params.returnGeometry = true; //返回空间信息
params.returnFieldName=true; //字段别名
params.returnUnformattedValues=true; //显示字段值domins
12. 鼠标样式更改
document.getElementById("viewDiv").style.cursor = "auto";
document.getElementById("viewDiv").style.cursor = "wait";
13. 去除自带的放大缩小和底部的arcgis logo样式
view.ui.remove(["zoom", "attribution"]);
14.删除自带的地图盒子白色边框
/*去除mapview拖动时的边框*/
.esri-view .esri-view-surface--inset-outline:focus::after {
outline: auto 0px Highlight !important;
outline: auto 0px -webkit-focus-ring-color !important;
}
15.控制地图的缩放大小
// 控制图层的缩放级别
view.when(function () {
view.on('double-click', function (evt) {
evt.stopPropagation();
});
view.on('mouse-wheel', function (evt) {
//鼠标滚轮缩小
if (evt.deltaY > 0 && view.scale > 9000000) {
evt.stopPropagation();
return false;
}
//鼠标滚轮放大
else if (evt.deltaY < 0 && view.scale < 20000) {
evt.stopPropagation();
return false;
}
if ((evt.deltaY > 0 && view.scale > 9000000) || (evt.deltaY < 0 && view.scale < 20000)) {
console.info(view.scale);
console.info(evt);
}
});
});
16.三维下加载obj/gltf 模型和3d 点符号
obj/gltf:
var symbolP = {
type: "point-3d",
symbolLayers: [
{
type: "object",
resource: {
href: window.location.href.split('#')[0] + "static/gltf/ghz.glb",
},
height: 500,
heading: Math.random() * 360,
anchor: "bottom"
}
]
};
3d icon:
symbol: {
type:'point-3d',
symbolLayers:[{
type:"icon",
size:40,
resource:{
href:src
}
}]
},
17、 利用 ES6 async 和 await ,Promise ,创建地图后可进行的操作
basemap.js 中 使用 promise 返回 mapObj 对象
在主页面中, methods 中
async initMap(){
let that = this;
that.mapObj =await createMap(that, "viewDiv");
/**
** dosomething
**/
},
async renderMap(){
/**
** 获取数据
*/
await this.getQxzJson();
await this.initMap();
/**
* 加载获取数据的图层,或者dom 元素 显示渲染等
*/
//dosomething
},
mounted中
mounted() {
let that = this;
that.renderMap();
},
18、 在vue项目中自定义地图的弹框
点击的时候获取到点击的位置,然后转换成屏幕的坐标
在通过绑定div盒子 :style 来定位弹框即可实现:
template:
<div class="tank" :style=tankMap v-show="tankShow">
</div>
data里定义
tankMap: {
'left': '',
'top': '',
},
地图拖动时加监听事件:
//监听地图拖动
that.mapObj.view.watch("extent", function (evt) {
if (that.tankPoint != null) {
let screenP = that.mapObj.view.toScreen(that.tankPoint);
that.tankMap.left = parseFloat(screenP.x) - 206 + 'px';
that.tankMap.top = parseFloat(screenP.y) - 343 - 5 + 'px';
}
});
地图点击的时候,显示弹框并高亮
that.pLayerPoint = new that.mapObj.GraphicsLayer({
id: 'pLayerPoint'
})
that.mapObj.view.on('click', function (event) {
that.mapObj.view.hitTest(event, {include: this.XBLayer}).then(function (res) {
let {results: [result]} = res;
if (result) {
let screenP = that.mapObj.view.toScreen(evt.mapPoint);
that.tankMap.left = parseFloat(screenP.x) - 206 + 'px';
that.tankMap.top = parseFloat(screenP.y) - 343 - 5 + 'px';
//显示弹框
that.tankShow = true;
//清除高亮
if (that.highlight) {
that.highlight.remove();
}
//重新赋值图形高亮
that.highlight = that.mapObj.view.whenLayerView(result.graphic.layer).then(function(layerView){
that.highlight=layerView.highlight(result.graphic);
});
}
})
})
19、 使用element ui 中的 Dialog 弹出框中包含地图时,点击第一次地图不出现:
<el-dialog
title="定位地图"
@opened = initLocationMap
:visible.sync="locationMapDialogVisible"
width="30%">
<div id="locationMapContanier"></div>
<span slot="footer" class="dialog-footer">
<el-button @click="cancelLocationMap">取 消</el-button>
<el-button type="primary" @click="sureLocationMap">确 定</el-button>
</span>
</el-dialog>
其中我们加入 opened 方法 和 visible.sync
其中 opened 方法 里调用的 initLocationMap 方法就是初始化地图的方法,要记得在其方法中要判断地图实例是否已经存在,方式多次创建地图实例