# 开发者代码
# 加载图层
# 风场
demo 示例地址：全球气象 (opens new window)
// 风场图层配置
var layerConfig = {
name: "风场", // 图层名
visible: true, // 图层可见性
isPlay: true, // 是否默认播放
url: "http://114.253.8.150:6067/gfsdata/", // 图层地址
fileName: ["U-component_of_wind.jpg", "V-component_of_wind.jpg"],
dataInterval: "0p50",
timeInfo: {
// 默认风场数据的时间配置
type: "realTime", // 时间类型：固定时间("fixedTime")或 实时时间("realTime")
time: 24, // 时间值：固定时间如"2020-11-16",实时时间如24（意思是当前系统时间的前24小时）
},
type: "wind", // 图层类型
lineLength: 0.89, // 风场线长度，值越大线越长，默认0.89
lineColor: "rgba(255,255,255)", // 风场线颜色，默认白色
transparency: 0.8, // 风场线透明度，默认0.8
lineAge: 50, // 每条风场线存在时间，此值过低时，风速线将变为不连续的点；过高时随着程序的运算，时间越后，线越稀疏。默认50
lineWidth: 2.5, // 风场线宽度，默认2.5
speed: 0.017, // 风场线流速，默认0.017
lineAmount: 0.005, // 风场线数量，值越大，线越密集，默认0.005
};
// 加载图层
layerManager.addWindLayer(layerConfig);
# 修改风场的样式
- 加载后修改样式
// 调用方法
/**
* 设置风场的样式
* @param {string} type 要修改的样式类别
* @param {number} value 修改后的选项值
*/
setWindLineStyle(type, value);
// 运用速度设为0.02
setWindLineStyle("speed", 0.02); // 示例
注：type 的类型详细参见风场图层配置中的 lineLength、lineColor、transparency、lineAge、lineWidth、speed、lineAmount 属性
# 气象图层
// 气象图层配置
var layerConfig = {
name: "气象",
visible: true,
isPlay: true,
url: "http://114.253.8.150:6067/gfsdata/",
timeInfo: {
type: "realTime",
time: 24,
},
dataInterval: "0p50",
type: "weather",
multiFieldsRenderer: {
type: "radio",
active: "温度",
data: [
{
value: "温度",
label: "温度",
renderer: {
weatherType: "Temperature",
fileName: ["Temperature.jpg"],
},
selected: true,
},
{
value: "湿度",
label: "湿度",
selected: false,
renderer: {
weatherType: "Humidity",
fileName: ["Relative_humidity.jpg"],
},
},
{
value: "风速",
label: "风速",
selected: false,
renderer: {
weatherType: "Wind",
fileName: ["U-component_of_wind.jpg", "V-component_of_wind.jpg"],
},
},
{
value: "气压",
label: "气压",
selected: false,
renderer: {
weatherType: "Pressure",
fileName: ["Pressure_reduced_to_MSL.jpg"],
},
},
],
},
};
// 加载图层
layerManager.addWeatherLayer(layerConfig);
# 图片图层
// 图片图层配置
var layerConfig = {
type: "image",
name: "imageLayer",
url: "http://121.46.19.47:10229/visualmap/json/si-huan.png",
visible: true,
opacity: 1,
extent: {
xmin: 116.28979,
ymin: 39.832146,
xmax: 116.468101,
ymax: 39.97,
},
wkid: 4326,
};
// 加载图层
layerManager.addImageLayer(layerConfig, callback);
# canvas 图层
// canvas图层数据
var data = {
"layerDefinition": {
"geometryType": "esriGeometryPolyline",
"drawingInfo": {
"renderer": {
"type": "uniqueValue",
"field1": "value",
"defaultSymbol": {
"color": [
0,
0,
0,
255
],
"width": 1,
"type": "esriSLS",
"style": "esriSLSSolid"
},
"uniqueValueInfos": [
{
"value": 74.02268981933594,
"symbol": {
"color": [
0,
0,
0,
255
],
"width": 1,
"type": "esriSLS",
"style": "esriSLSSolid"
}
},
{
"value": 74.0333333,
"symbol": {
"color": [
0,
0,
0,
255
],
"width": 1,
"type": "esriSLS",
"style": "esriSLSSolid"
}
}
]
}
},
"fields": [
{
"name": "ID",
"type": "esriFieldTypeOID",
"alias": "ID"
},
{
"name": "value",
"type": "esriFieldTypeDouble",
"alias": "value"
}
]
},
"featureSet": {
"geometryType": "esriGeometryPolyline",
"features": [
{
"geometry": {
"paths": [
[
[
98.75390552158551,
31.019403730776848
],
[
98.84841865900236,
31.02398253300406
],
[
98.85367352383457,
30.942595906807746
],
[
98.75927148014152,
30.938023960647666
],
[
98.75390552158551,
31.019403730776848
]
]
],
"spatialReference": {
"wkid": 4326
}
},
"attributes": {
"ID": 0,
"value": 74.02268981933594
}
},
{
"geometry": {
"paths": [
[
[
100.36399676954477,
44.627829622299934
],
[
100.48133785480906,
44.63084245152246
],
[
100.48546500326833,
44.547047964627744
],
[
100.36829543008501,
44.544039584672504
],
[
100.36399676954477,
44.627829622299934
]
]
],
"spatialReference": {
"wkid": 4326
}
},
"attributes": {
"ID": 1,
"value": 74.0333333
}
}
]
}
};
// 加载图层
addCanvasLayer(data,{
id: "", // 图层名
visible：true, // 是否可见
callback: function(){} // 回调
})
# 客户端插值图
客户端插值图是根据接口数据和插值范围数据在浏览器中临时计算生成的栅格数据，因此生成的速度较慢。
作用：根据已知点位的数据计算出周围环境的数据情况
var idwLayerConfig = {
name: "插值图", // 图层名称
type: "idw", // 图层类型
// url 字段支持直接传入数据，但是数据和 apiInfo 必须要匹配
url: "http://121.46.19.2:20724/visualmap/json/350400/sanming-idw-data.json", // 接口地址（这里以模拟数据为例）
apiInfo: {
lonCol: "LONGITUDE", // 点位经度字段
latCol: "LATITUDE", // 点位纬度字段
objectIdField: "", // 数据唯一ID字段 (可为空)
dataPath: "ENTEROUTLIST", // 数据列表在数据中的位置
params: {
querystr: "", // 可更新参数字段1（根据接口和需求）
pollutecode: "PRESO2", // 可更新参数字段2
},
},
visible: true, // 图层默认显隐性
idw: {
// 插值图效果具体配置
// 生成的栅格单元大小 （该参数越小，生成速度越慢，但是图层锯齿感越小，反之亦然。建议在速度和效果中间平衡一下）
cellWidth: 0.01,
defaultColor: "#FFFFFF", // 栅格的默认颜色 (无效)
idwField: "OUTCOUNT", // 插值字段
// 插值范围数据路径
plygonPath: "http://121.46.19.2:20724/city/350400/esri-city-polygon.json",
// 插值范围数据(当该变量判断为真时，将优先使用该变量的插值范围数据，不在使用 polygonPath 代表的数据)
polygonData: data, // data 数据格式请看下面
type: "gradient", // 渲染类型：gradient：渐变色; 不配置：效果类似面分级渲染
// 将点位平均分配至每个色带中，保证每个色带均有点位且数量一致 （可不配置）（配置后，颜色和值的关系将不在和色带中一致）
colorSetting: "average",
distance: 1000, // 只计算点位周边半径为 1000km 内的点,
//色带中显示的最后一个颜色值的索引，该值之后的颜色将不显示，用于筛选色带中的颜色（可不配置）
displayLastColorNumber: 5,
unit: "km", //distance参数的单位：km或m（可不配置，默认为km）
pointsNumber: 12, //插值位置周围多少已知点参与计算（可不配置，默认为全部，ArcMap中默认为12）
valueInfos: [
// 色带
[0.1, [55, 174, 242]], // [值, 颜色]
[33182.17007733333, [61, 194, 0]],
[66364.24015466667, [60, 214, 224]],
[99546.31023199999, [52, 0, 226]],
],
},
relatedLayers: [], // 图层关联显隐
};
// 加载图层
layerManager.addIdw(idwLayerConfig);
注: 值与色带配置的关系说明
value < 0.1 [55, 174, 242]
0.1 <= value < 33182.17007733333 [61, 194, 0]
33182.17007733333 <= value < 66364.24015466667 [60, 214, 224]
66364.24015466667 <= value < 99546.31023199999 [52, 0, 226]
99546.31023199999 <= value [52, 0, 226]
# 插值范围数据格式
数据要求：ESRI-GeoJSON 格式的面数据，完整示例如下
{
"displayFieldName": "",
"fieldAliases": {
"FID": "FID",
"Id": "Id"
},
"geometryType": "esriGeometryPolygon",
"spatialReference": {
"wkid": 4326,
"latestWkid": 4326
},
"fields": [{
"name": "FID",
"type": "esriFieldTypeOID",
"alias": "FID"
}, {
"name": "Id",
"type": "esriFieldTypeInteger",
"alias": "Id"
}],
"features": [{
"attributes": {
"FID": 0,
"Id": 0
},
"geometry": {
"rings": [ // 构成面的点位数组
[
[116.77123797048439, 27.120515990762037],
[118.76323069216097, 27.109258456910265],
[118.75348689880255, 25.734969365101158],
[116.76149417712612, 25.746361906675126],
[116.77123797048439, 27.120515990762037]
]
]
}
}]
}
最低数据要满足如下格式：
{
"features": [{
"geometry": {
"rings": [ // 构成面的点位数组
[
[116.77123797048439, 27.120515990762037],
[118.76323069216097, 27.109258456910265],
[118.75348689880255, 25.734969365101158],
[116.76149417712612, 25.746361906675126],
[116.77123797048439, 27.120515990762037]
]
]
}
}]
}
# 部分效果展示
- 配置效果
- 非渐变效果
- distance: 10 效果
注：
- 插值范围数据要求：JSON 格式为 ESRI-GeoJSON
- 数据源可以先访问
http://121.46.19.2:20724/city/350400/esri-city-polygon.json,其中350400改为目标行政编码，文件不存在时请直接找 GIS 组提供
# 地图
# 定位
/*
* goTo 定位
* @param {object} options 定位参数
* @param {callback} callback 定位结束回调
*/
// 定位到点
const options = {
position: [114,26,0.02], // 定位点的经度、纬度、定位半径
wkid: 4326 // esri定义的空间参考id,如果wkid=102100或者4326可不传
}
// 定位到范围
const options = {
position:{xmin:114 ,ymin:26 ,xmax:115 ,ymax:24, expandFactor: 1}， // 范围的xmin, ymin, xmax, ymax和放大系数（可不传，默认为1.5）
wkid: 4326 // esri定义的空间参考id,如果wkid=102100或者4326可不传
}
// 定位到多个元素
const options = {
graphics: graphics, // 多个元素集合
expandFactor: 1, // 放大系数（可不传，默认为1.5）
wkid: 4326 // esri定义的空间参考id,如果wkid=102100或者4326可不传
}
goTo(options, callback);
# 监听地图缩放
/**
* 监听地图缩放
* @param {Function} callback 监听到地图缩放回调函数（每次监听到地图缩放都会执行）
* @param {Function} eventCallBack 注册监听地图缩放事件的回调函数（只在注册时执行一次，可不传）
*/
mapZoomEnd(callback, eventCallBack);
# 侧边栏折叠展开，地图相应随之变化
var resize=false;
var centerX=null;
var centerY=null;
var level=null;
var wkid = null;
// 监听地图范围重置事件（比extent-change先触发）
map.on('resize',function(evt){
// 记录下当前地图的中心点信息和级别
var center=evt.target.extent.getCenter();
centerX=center.x;
centerY=center.y;
level=evt.target.getLevel();
wkid = center.spatialReference.wkid;
resize=true;
})
map.on('extent-change',function(evt){
if(resize){
// 注意传入点位的坐标
// 根据变化前的中心点和级别设置当前地图的中心点和级别
setMapCenterPoint(centerX,centerY,level,wkid);
resize=false;
centerX=null;
centerY=null;
level=null;
wkid=null;
}
})
# 时间轴
# 添加时间轴
// 时间轴配置
var option = [
{
defaultVisible: true, // 默认是否可见
name: "time-line",
options: {
dataSource: "custom", // 数据来源
timeSetting: "fixedTime", // 固定时间
timeType: "hour", //时间类型
startTime: startTime, // 开始时间
endTime: currentTime, // 结束时间
curDate: currentTime, //选中时间
change: "timeChange",
defaultVisible: true,
isCallBack: false,
isRememberTime: true,
label: {
format: "yyyy-mm-dd hh:mm", //标注格式
interval: 4, //标注间隔
position: "center", //标注位置
},
line: {
longInterval: 4, //较长时间线间隔
shortInterval: 1, //较短时间线间隔
},
loopPlay: false,
name: "time-line",
speed: 3000,
startPlay: false,
},
},
];
// 根据定义好的配置更新时间轴
addTimeLineToMap(null, options);
# 控制时间轴显示或隐藏
/** 设置自定义微件（图例和时间轴）显示或隐藏
* @param "time-line" 表示时间轴
* @param true 或 false 时间轴是否可见
* */
setCustomWidgetVisible("time-line", true);
# 时间轴播放
自定义播放时刻要执行的代码
timeChanged(function(timeLineInfo){
// 时间轴播放当前时刻
var currentTime = timeLineInfo.currentTime；
// 以下是自定义代码，例如更新图层
publishEvent('update-layer', [{
"name": "污染源",
"visible": true,
"params": {
'filed1':"YYYY-MM",
'filed2':"YYYY-MM"
}
]);
});
# 图例
# 更新某个图层的图例内容
var layerName = "监测站点";
// 图片图例
var legends = [
{
name: "离线",
icon: "icons/lYsfkxKtUN1JfjFu/huise.png",
width: 26,
height: 26,
},
{
name: "正常",
icon: "icons/lYsfkxKtUN1JfjFu/zhengchang.png",
width: 26,
height: 26,
},
];
// 色块图例
var legends = [
{
name: "离线",
color: "rgba(255, 255, 255, 1)",
borderColor: "rgba(255, 255, 255, 1)",
borderWidth: 1,
width: 26,
height: 26,
},
{
name: "正常",
color: "rgba(255, 255, 255, 1)",
borderColor: "rgba(255, 255, 255, 1)",
borderWidth: 1,
width: 26,
height: 26,
},
];
/**
* 更新当前图例
* @param layerName 图层名
* @param legends 新的图例配置
*/
updateLegendRender(layerName, legends);
# 控制某个图层的图例是否可见
/**
* 控制某个图层的图例是否可见
* @param options 图层名和该图层的图例可见性
*/
updateLegend({
layerName: "水质断面",
visible: false,
});
# 图层可见性关联该图层的图例显隐
publishEvent("change-layer-visibility", {
layers: [
{
layerName: "城市浓度", // 图层名
visible: true, // 是否可见
},
],
});
# 图层
# 移除
/**
* 移除图层
* @function
* @name removeLayer
* @param {!string|object} layerName 图层名或者图层对象
*/
removeLayer('windLayer');
# 调整顺序
/**
* 调整图层的叠加显示顺序
* @function
* @name reorderLayer
* @param {!string|object} layerName 图层名或者图层对象
* @param {?number} index 图层索引，默认为0，索引越大，层级越高，显示的越靠上
*/
reorderLayer('区界',5)
# 设置可见性
/**
* 设置图层可见性
* @param {string} layerName 图层名称
* @param {boolean} visible 图层的可见性
*/
setLayerVisibility('区界',true)
# 设置不透明度
/**
* 设置图层不透明度
* @param {!string} layerName 图层名称
* @param {number} opacity 不透明度，范围是0-1，数值越小越透明
*/
setLayerOpacity('区界',0.5)
# 设置渲染
适用于单字段渲染的图层和 WFS 图层
/**
* 设置图层渲染
* @function
* @name setLayerRenderer
* @param {!object|string} layerName 图层名字或图层对象
* @param {!Object} rendererInfo 图层渲染参数
*/
# 注册事件
适用于非地图服务图层和非Echarts渲染的图层
/**
* 注册图层事件
* @function
* @name registerLayerEvent
* @param {!string} layerName 图层名称
* @param {!object} funcObj key为事件名,value为回调
*/
registerLayerEvent("监测站点", { click: highlightPoint });
# 设置数据（更新图层）
说明：指一个图层的数据需要在不同时候请求不同的接口，并展示在地图上。即更新接口图层的接口字段 或者 更新图层关联接口的字段，前提是该字段在图层配置中被勾选
/**
* setLayersData 设置图层数据
* @param {array} layerData 图层数据信息
*/
setLayersData([{
"layerName": "手工监测断面", // 图层名称
"urlParams": {
'filed1':"YYYY-MM", // key为该图层接口地址中配置的可变参数，value为新值
'filed2':"YYYY-MM"
},
"visible": true, // (可选)显示图层，默认不变
"data":[] // 数据
}
]);
# 查询
查询结果为返回满足查询条件的图层要素
/**
* 查询图层
* @function
* @name queryLayers
* @param {array} layerNames 图层名称数组
* @param {string} where where语句
* @returns {object} {'污染源':[graphic对象]}
*/
const result = queryLayers(['污染源'], "name='企业'");
# 过滤
过滤结果为地图上只显示满足过滤条件的图层要素
/**
* 过滤图层
* @function
* @name filterLayers
* @param {array} layerNames 图层名称数组
* @param {string} where 过滤条件
*/
const conditions = {
filter: {
where: 'POINTNAME = 班公错 or WQDATASOUR = 湖库',
geometry: {
type: 'polygon',
rings: [[[9089335.567189163, 3267816.4465026017], [10038817.728498086, 4318471.435356706],
[10341679.838613156, 1624114.5902586086], [9089335.567189163, 3267816.4465026017]]],
spatialReference: {wkid: 102100}
},
spatialRelationship:'contains'
},
layers: ['监测点位']
};
filterLayers(conditions);
# 添加提示框
添加后，鼠标移到图层上显示提示框
/**
* 给图层添加提示框
* @function
* @name addLayerTooltip
* @param {!object|string} layerName 图层对象或图层名
* @param {!object} tooltip 需要设置的一些参数
*/
const tooltip = {
content: '${pointCode}', // 必选，提示信息内容，pointCode表示字段名，支持html标签
offsetX: 0, // 可选，提示框相对于鼠标的X方向的偏移量
offsetY: 0, // 可选，提示框相对于鼠标的y方向的偏移量
style: { // 可选，提示框样式
width: 120,
backcolor: "rgba(0,0,0,0.5)",
color: "#FFF",
fontSize: 10
}
}
addLayerTooltip('污染源',tooltip}
# 添加信息框
添加后，鼠标点击图层显示信息框
/**
* 给图层添加信息框
* @function
* @name addLayerPopup
* @param {!object|string} layerName 图层对象或图层名
* @param {!object} popup 信息框配置
* @param {callback} callback 回调，可不传
*/
const popup = {
title: '${name}', // 信息框的标题，name表示字段名
content: '${code}', // 信息框的内容，code表示字段名，支持html标签
width: 200, // 信息框宽度
height: 300, // 信息框高度
offsetX: 0, // 可选，信息框相对于鼠标的X方向的偏移量
offsetY: 0, // 可选，信息框相对于鼠标的y方向的偏移量
};
addLayerPopup('污染源', popup)
# 显示信息框
意思是通过调用showLayerPopup，达到同点击图层的效果，即显示信息框
/**
* 显示信息框
* @function
* @name showLayerPopup
* @param {!objec} event 图层事件对象 或者graphic对象
* @param {?objec} popup 信息框配置，若图层加过信息框可不传
*/
const popup = {
title: '${name}', // 信息框的标题，name表示字段名
content: '${code}', // 信息框的内容，code表示字段名，支持html标签
width: 200, // 信息框宽度
height: 300, // 信息框高度
};
showLayerPopup(event, popup)
# 隐藏信息框
/**
* 隐藏信息框
* @function
* @name hideLayerPopup
*/
hideLayerPopup();
# 多字段渲染切换渲染字段
/**
* 图层列表-切换多字段渲染的字段
* @param layerName 图层名
* @param curValue 要切换成的字段名或者字段昵称
*/
function changeMultiFieldRenderer(layerName, curValue) {
if (layerManager) {
var renderinfo = null; // 临时保存新的渲染规则的变量
var LayerManagerLayers = layerManager.getLayersConfig().layers; // 获取图层列表所有图层配置
for (var m = 0; m < LayerManagerLayers.length; m++) {
if (LayerManagerLayers[m].name === layerName) {
if (LayerManagerLayers[m].indexes) {
var renderers = LayerManagerLayers[m].indexes.data;
for (var n = 0; n < renderers.length; n++) {
if (
renderers[n].code === curValue ||
renderers[n].name === curValue
) {
renderers[n].selected = true;
renderinfo = renderers[n].renderer.rendererInfo;
} else {
renderers[n].selected = false;
}
}
}
break;
}
}
if (renderinfo) {
applyRenderer(layerName, renderinfo); // 真正修改渲染规则
}
}
}
// 实例调用
changeMultiFieldRenderer("空气污染", "AQI");
# 图层信息框（展示一个 html 页面）
// 去掉信息框的原生样式的样式
var infowindowStyleStr =
"<style>.esriPopupWrapper{box-shadow:none !important;}.esriPopup .outerPointer.left{margin-top: -5px !important;}" +
".outerPointer{border: 0.2px solid;left: 10px !important;box-shadow:none !important;" +
"-webkit-box-shadow:none !important;border-color: transparent transparent rgba(0,255,255,0.5) rgba(0,255,255,0.5);" +
"background-color: rgba(5,20,85,1) !important;} .titlePane{display:none;}.contentPane{max-height: 10000px !important;" +
"overflow:visible !important;padding:0px !important;background-color:transparent !important}" +
".esriPopup{padding:0px !important;background-color:rgb(0,2,124) !important}.actionsPane{background-color:transparent !important}" +
".esriPopup .maximize{display: none !important}</style>";
var url ='http://10.100.250.22:10229/infowindow/overComing/html/priority-task.html?REGIONCODE=${PROV_CODE}&TASKCODE=${TASKCODE}';
var popup = {
width: 200, // 信息框宽度
height: 300, // 信息框高度
offsetX: 0, // 可选，信息框相对于鼠标的X方向的偏移量
offsetY: 0, // 可选，信息框相对于鼠标的y方向的偏移量
};
var content = infowindowStyleStr + '<iframe src="' + url + '"style="width: ' + popup.width + "px; height:" + popup.height + 'px;" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>', // 内容
popup.content = content;
addLayerPopup('污染源', popup)
❓ 如果信息框比较大或者展示形式比较复杂，怎么较好的展示信息框？
✔️ 效果展示：
实现方式：
// 这里仅为参考实例
// 向页面添加iframe，嵌入外部污染源详细页面
if($("#loading").length>0) {
console.log("loading元素已存在");
}else
{
console.log("loading元素不存在");
$("body",window.parent.document).append('<iframe id="psInfoFrame" style="overflow:hidden;display:none;width:2165px;height:1092px;"
+ "border:0px solid #ffffff;position: absolute;top:400px;left:160px;z-index:3000;"
src="http://10.100.13.135:9000/InformationCenterScreen/ps_main.html?wsClientCode='+clientCode+'&v=3.5"></iframe>');
$("body").append('<div id="loading" class="container" style="background-color: #0000008c;width: 2542px;height: 1860px;"
+ "z-index: 1500;position: absolute;left: 0px;top: 0px;">');
$("#loading").append('<div id="status" style="width:0px;height:0px;display:none;" class="0" ></div>');
}
原理解析：使用纯前端手段实现
❓ 嵌入 ifrmae 的信息框，怎么关闭？
✔️ 方式如下：
情况一：地图和信息框在同一域时（地图和信息框的 http 协议、IP、端口完全一致）
// 在信息框中使用 window.parent 就可调用地图API的方法
// 示例
window.parent.hideInfoWindow(); // 隐藏信息框
情况二：地图和信息框跨域时
在跨域的情况下，需要使用 webSocket 发送和接收消息
a. 在信息框内容中的 iframe 的 url 中加入参数 wsClientCode ，值为跨屏交互 ID(大屏交互部分)
http://192.168.0.244:7060/dialog/dialog-small.html?wsClientCode=admin_
b. 在信息框的 html 代码中合理加入下方示例代码
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>报警预警信息框</title>
</head>
<body>
<div class="bubble">
// 信息框内容区域
</div>
<!--引入自己的jquery库 -->
<script src="./jquery-3.3.1.min.js"></script>
<script>
// 大屏地址 只需要修改为现场的IP和端口即可
var socketServer = 'http://192.168.0.140:7070/view';
var clientCode = GetQueryString('wsClientCode'); // 要求把跨屏交互ID放到iframe的url中传过来，参数为 wsClientCode
/**
* 获取url中的参数
* @param {string} name-需要获取的参数名
*/
function GetQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return decodeURI(r[2]);
return null;
}
/**
* 发送webSocket消息
* @param {object} data-传给大屏的数据
*/
function sendMessage(data) {
if (socketServer && clientCode && data) {
$.ajax({
url: socketServer + '/interact/' + clientCode + '/message',
type: "POST",
data: {
message: JSON.stringify(data)
},
async: true,
cache: false,
success: function (returnJson) {
console.log('客户端成功发出了消息');
}
});
}
}
sendMessage('发送的消息内容');
</script>
</body>
</html>
c. 在开发者代码中的接收消息的地方会收到信息框发送的消息，然后消息进行自己的处理即可。
注：重点就是跨屏交互 ID 和大屏地址要正确
❓ 在定位并展示信息框的时候，信息框的显示位置老是不对的问题怎么解决？
✔️ 在定位的回调中显示信息框
// 定位到点
const options = {
position: [114,26,0.02], // 定位点的经度、纬度、定位半径
wkid: 4326 // esri定义的空间参考id,如果wkid=102100或者4326可不传
}
goTo(options,function(){
showLayerPopup(event);
})
# 数据转换
# GeoBuf 数据转为 GeoJSON 数据
# GeoBuf介绍
GeoBuf是一种用于地理数据的紧凑二进制编码。 GeoBuf几乎无损地将GeoJSON数据压缩到协议缓冲区中。
- 为什么使用GeoBuf
我们经常遇到直接传输gis数据到前端展示的时候，有时候数据量一稍微多点，传输速度就减慢，因为我们用于传输的json格式比较大。
- GeoBuf的优点
- 非常紧凑：通常使GeoJSON小6-8倍。
- 即使比较gzip大小，也要小2-2.5倍。
- 非常快速的编码和解码 - 甚至比原生JSON解析/字符串化更快。
- 可以容纳任何GeoJSON数据，包括具有任意属性的扩展。
- 轻松增量解析 - 在阅读时获取功能，而无需构建整个数据的内存表示。
- 部分读取 - 只读取实际需要的部分，跳过其余部分。
与Mapbox Vector Tiles不同，它的目标是几乎无损压缩数据集-无需平铺，投影坐标，展平几何或剥离属性。 “几乎”无损意味着坐标以小数点后的6位数精度（约10cm）编码(目前还不是无损压缩) )编码架构尚不稳定-它可能会随着得社区反馈并发现改进它的新方法而改变)
# 转换
# 安装
# node 安装全局工具
npm install -g geobuf
# 转换
# 命令行执行
# data.json data.pbf 都是文件路径（要转换的文件，转出后文件地址）
json2geobuf data.json > data.pbf
shp2geobuf myshapefile > data.pbf
geobuf2json data.pbf > data.json
# 框架中使用GeoBuf数据
.pbf 的数据转为.json 格式的数据
/**
* 把geoBuf数据转为geojson数据
* @param data geoBuf数据
* @param callback
*/
geoBuf2geoJson(data, callback);
/**
* 原生XMLHttpRequest请求
* @param url 请求的地址
* @param data post请求的参数
* @param type 请求的类型
* @param dataType 返回数据的类型
* @param success 成功的回调
* @param error 失败的回调buffer
*/
xhrHttp(url, data, type, dataType, success, error);
// 实例
// 注：第三个参数一定要是 arraybuffer
xhrHttp(url, {}, "GET", "arraybuffer", function(data) {
geoBuf2geoJson(data, function(geoJsonData) {
// geoJsonData 为对应的geojson数据
});
});
# 聚合图显示真实点位
var layerName = "聚合图";
registerFunction("聚合图_clusters", {
click: function() {
setLayerVisibility("聚合图", true);
setLayerVisibility("聚合图_clusters", false);
},
});
# 要素服务图层查询
要素服务图层是指通过 ArcGIS 要素服务 url (opens new window)加载的图层
# 属性查询
/**
* query 查询featureLayer图层,返回查询到的Graphics
* @param {string} featureLayerUrl 图层url
* @param {string} whereClause where语句
* @param {Function} getQueryCallback 查询结果回调方法(返回查询出的要素集合)
* @param {Function} errCallback 查询失败回调方法
* @example
* query("http://192.168.0.99/ArcGIS/rest/services/foshan/MapServer/8", "NAME='南海区'", getQueryResults, errCallback);
* @description
* + 返回查询结果的全部属性
* + 返回查询结果的图形点位数据
* @returns {Object}
* {
* features: [d], // 查询到符合条件的要素集合
* fieldAliases: {FID: "FID", ...}, // 图层字段别名信息
* fields: (12) [], // 图层字段信息
* geometryType: "esriGeometryPolygon", // 图层的要素类型
* spatialReference: f {wkid: 4490, latestWkid: 4490} // 图层的坐标系
* }
*/
function query(featureLayerUrl, whereClause, getQueryCallback, errCallback) {...}
// 示例
query('http://121.46.19.2:20724/arcgis/rest/services/510000/%E4%B8%89%E7%BA%BF%E4%B8%80%E5%8D%95/MapServer/0', "HJGKDYBM='ZH51010410001'", function(queryInfo) {
console.log(queryInfo)
}, function(err) {
console.log(err)
});
# 空间查询
/**
* 通过经纬度构建要素查询url的元素
* @param {string} featureLayerUrl 要素图层地址
* @param {Object} inputGeometry 通过经纬度构建要素
* @param {Function} getQueryCallback 成功回调
* @param {Function} errCallback 失败回调
* @example
* query("http://192.168.0.99/ArcGIS/rest/services/foshan/MapServer/8", "{x: 103.499, y: 30.294, spatialReference: { wkid: 4490 }}", getQueryResults, errCallback);
* @description
* + 返回查询结果的全部属性
* + 返回查询结果的图形点位数据
* + 暂时只能输入点要素，查询服务
* + 空间关系为相交
* @returns {Object}
* {
* features: [d], // 查询到符合条件的要素集合
* fieldAliases: {FID: "FID", ...}, // 图层字段别名信息
* fields: (12) [], // 图层字段信息
* geometryType: "esriGeometryPolygon", // 图层的要素类型
* spatialReference: f {wkid: 4490, latestWkid: 4490} // 图层的坐标系
* }
*/
function queryUrlByGeometry(featureLayerUrl, inputGeometry, getQueryCallback, errCallback)
queryUrlByGeometry('http://121.46.19.2:20724/arcgis/rest/services/510000/%E4%B8%89%E7%BA%BF%E4%B8%80%E5%8D%95/MapServer/0', {
x: 103.499,
y: 30.294,
spatialReference: {
wkid: 4490
}
}, function(queryInfo) {
console.log(queryInfo)
}, function(err) {
console.log(err)
})