本篇接上篇iserver服务发布结束之后，服务发布完成时需要采用对应的前端框架开发对接服务内容。SuperMap前端基础组件库主要分为五大类，分别为Leaflet、OpenLayers、MapboxGL、Classic、3D-WebGL。以下内容是五类内容的详细介绍以及基础使用方法。
Leaflet
地图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title data-i18n="resources.title_tiledMapLayer4326"></title>
<script type="text/javascript" src="../js/include-web.js"></script>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
<script type="text/javascript" src="../../dist/leaflet/include-leaflet.js"></script>
<script type="text/javascript">
var host = window.isLocal ? window.server : "https://iserver.supermap.io";
var map, url = host + "/iserver/services/map-world/rest/maps/World";
map = L.map('map', {
crs: L.CRS.EPSG4326,
center: [0, 0],
maxZoom: 18,
zoom: 1
});
L.supermap.tiledMapLayer(url).addTo(map);
</script>
</body>
</html>
数据
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title data-i18n="resources.title_getFeatureBySQL"></title>
<script type="text/javascript" src="../js/include-web.js"></script>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
<script type="text/javascript" src="../../dist/leaflet/include-leaflet.js"></script>
<script type="text/javascript">
var host = window.isLocal ? window.server : "https://iserver.supermap.io";
var map, resultLayer,
baseUrl = host + "/iserver/services/map-world/rest/maps/World",
url = host + "/iserver/services/data-world/rest/data";
map = L.map('map', {
preferCanvas: true,
crs: L.CRS.EPSG4326,
center: {lon: 0, lat: 0},
maxZoom: 18,
zoom: 1
});
L.supermap.tiledMapLayer(baseUrl).addTo(map);
query();
function query() {
var sqlParam = new SuperMap.GetFeaturesBySQLParameters({
queryParameter: {
name: "Countries@World",
attributeFilter: "SMID = 247"
},
datasetNames: ["World:Countries"]
});
L.supermap
.featureService(url)
.getFeaturesBySQL(sqlParam, function (serviceResult) {
resultLayer = L.geoJSON(serviceResult.result.features).addTo(map).bindPopup('SMID = 247');
});
}
</script>
</body>
</html>
专题图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title data-i18n="resources.title_themeRange"></title>
<script type="text/javascript" src="../js/include-web.js"></script>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
<script type="text/javascript" src="../../dist/leaflet/include-leaflet.js"></script>
<script type="text/javascript">
var host = window.isLocal ? window.server : "https://iserver.supermap.io";
var map, themeService, themeRange, themeParameters, themeLayer,
url = host + "/iserver/services/map-china400/rest/maps/China";
map = L.map('map', {
center: [30, 84],
maxZoom: 18,
zoom: 3
});
L.supermap.tiledMapLayer(url, {noWrap: true, transparent: true}).addTo(map);
createTheme();
function createTheme() {
themeService = L.supermap.themeService(url);
var themeRangeItem1 = new SuperMap.ThemeRangeItem({
start: 0,
end: 500000000000,
style: new SuperMap.ServerStyle({
fillForeColor: new SuperMap.ServerColor(211, 255, 250),
lineColor: new SuperMap.ServerColor(179, 209, 193),
lineWidth: 0.1
})
});
var themeRangeItem2 = new SuperMap.ThemeRangeItem({
start: 500000000000,
end: 1000000000000,
style: new SuperMap.ServerStyle({
fillForeColor: new SuperMap.ServerColor(178, 218, 199),
lineColor: new SuperMap.ServerColor(179, 209, 193),
lineWidth: 0.1
})
});
var themeRangeItem3 = new SuperMap.ThemeRangeItem({
start: 1000000000000,
end: 3000000000000,
style: new SuperMap.ServerStyle({
fillForeColor: new SuperMap.ServerColor(58, 178, 166),
lineColor: new SuperMap.ServerColor(179, 209, 193),
lineWidth: 0.1
})
});
themeRange = new SuperMap.ThemeRange({
rangeExpression: "SMAREA",
rangeMode: SuperMap.RangeMode.EQUALINTERVAL,
items: [themeRangeItem1, themeRangeItem2, themeRangeItem3]
});
themeParameters = new SuperMap.ThemeParameters({
datasetNames: ["China_Province_pg"],
dataSourceNames: ["China"],
joinItems: null,
themes: [themeRange]
});
themeService.getThemeInfo(themeParameters, function (serviceResult) {
var result = serviceResult.result;
if (result && result.newResourceID) {
themeLayer = L.supermap.tiledMapLayer(url, {
noWrap: true,
cacheEnabled: false,
transparent: true,
layersID: result.newResourceID
}).addTo(map);
}
});
}
</script>
</body>
</html>
空间分析
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title data-i18n="resources.title_geometryBatchAnalystService"></title>
<script type="text/javascript" src="../js/include-web.js"></script>
</head>
<body style="margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
<script type="text/javascript" src="../../dist/leaflet/include-leaflet.js"></script>
<script type="text/javascript">
var host = window.isLocal ? window.server : "https://iserver.supermap.io";
var baseUrl = host + "/iserver/services/map-jingjin/rest/maps/京津地区地图",
serviceUrl = host + "/iserver/services/spatialanalyst-sample/restjsr/spatialanalyst",
map = L.map('map', {
crs: L.CRS.EPSG4326,
center: [40, 117],
maxZoom: 18,
zoom: 8
});
L.supermap.tiledMapLayer(baseUrl, {noWrap: true}).addTo(map);
batchAnalystFromGeometry();
function batchAnalystFromGeometry() {
//缓冲区分析数据：
var bufferLine = {
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [[117, 40.50], [118, 40]]
}
};
var bufferPoint = {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [117, 40]
}
};
//叠加分析数据：
var sourceGeometry = {
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [[[116, 39.75],
[116, 39.15],
[117, 39.15],
[117, 39.85],
[116, 39.85]]]
}
};
var operateGeometry = {
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [[[116.25, 40.5],
[116.25, 38.5],
[116.75, 38.5],
[116.75, 40.5],
[116.25, 40.5]]]
}
};
//数据加载到地图：
var geojsonFeature = {
"type": "FeatureCollection",
"features": [bufferLine, bufferPoint, sourceGeometry, operateGeometry]
};
L.geoJSON(geojsonFeature, {
style: function (feature) {
if (feature.geometry.type === "LineString") {
return {
"color": "blue",
"weight": 1.5,
};
} else if (feature.geometry.type === "Polygon") {
return {
"weight": 1.5,
"color": "blue",
"opacity": 0.15
};
}
}
}).addTo(map);
//缓冲区分析参数
var geoBufferAnalystParams = {
analystName: "buffer",
param: new SuperMap.GeometryBufferAnalystParameters({
sourceGeometry: bufferLine,
sourceGeometrySRID: 4326,
bufferSetting: new SuperMap.BufferSetting({
endType: SuperMap.BufferEndType.ROUND,
leftDistance: new SuperMap.BufferDistance({value: 5000}),
rightDistance: new SuperMap.BufferDistance({value: 5000}),
semicircleLineSegment: 10
})
})
};
var geoBufferAnalystParams_Point = {
analystName: "buffer",
param: new SuperMap.GeometryBufferAnalystParameters({
sourceGeometry: bufferPoint,
sourceGeometrySRID: 4326,
bufferSetting: new SuperMap.BufferSetting({
endType: SuperMap.BufferEndType.ROUND,
leftDistance: new SuperMap.BufferDistance({value:5000}),
rightDistance: new SuperMap.BufferDistance({value: 5000}),
radiusUnit: "METER",
semicircleLineSegment: 10
})
})
};
//叠加分析参数
var OverlayBatchAnalystParameters = {
analystName: "overlay",
param: new SuperMap.GeometryOverlayAnalystParameters({
sourceGeometry: sourceGeometry,
operateGeometry: operateGeometry,
operation: SuperMap.OverlayOperationType.CLIP
})
};
//批量分析参数
var paramter = [geoBufferAnalystParams, OverlayBatchAnalystParameters, geoBufferAnalystParams_Point];
//批量分析
L.supermap.spatialAnalystService(serviceUrl).geometrybatchAnalysis(paramter, function (serviceResult) {
//结果展示
var overlayResultStyle = {
"color": "red",
"opacity": 0.65
};
var bufferResultLayer = L.geoJSON([serviceResult.result[0].resultGeometry, serviceResult.result[2].resultGeometry], {
style: overlayResultStyle
}).addTo(map);
bufferResultLayer.on("mousemove", function (e) {
e.layer.bindPopup('<h4>'+resources.text_bufferAnalystResult+'</h4>').openPopup();
});
bufferResultLayer.on("mouseout", function (e) {
e.layer.closePopup();
});
var overlayResultLayer = L.geoJSON(serviceResult.result[1].resultGeometry, {
style: overlayResultStyle
}).addTo(map);
overlayResultLayer.on("mousemove", function (e) {
e.layer.bindPopup('<h4>'+resources.text_overlayAnalystResult+'</h4>').openPopup();
});
overlayResultLayer.on("mouseout", function (e) {
e.layer.closePopup();
});
});
}
</script>
</body>
</html>
网络分析
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title data-i18n="resources.title_findPath"></title>
<script type="text/javascript" src="../js/include-web.js"></script>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
<script type="text/javascript" src="../../dist/leaflet/include-leaflet.js"></script>
<script type="text/javascript">
var host = window.isLocal ? window.server : "https://iserver.supermap.io";
var map, findPathService, findPathParameter,
baseUrl = host + "/iserver/services/map-changchun/rest/maps/长春市区图",
serviceUrl = host + "/iserver/services/transportationanalyst-sample/rest/networkanalyst/RoadNet@Changchun";
//最佳路径分析必须按照指定顺序对站点进行访问
map = L.map('map', {
crs: L.CRS.NonEarthCRS({
bounds: L.bounds([48.4, -7668.25], [8958.85, -55.58]),
origin: L.point(48.4, -55.58)
}),
center: [-3600, 5000],
maxZoom: 18,
zoom: 2
});
L.supermap.tiledMapLayer(baseUrl, { noWrap: true })
.addTo(map)
.once("load", function () {
findPathProcess();
});
function findPathProcess() {
//添加站点
var marker1 = L.marker([-3000, 4000]).addTo(map);
marker1.bindPopup(resources.text_site1);
var marker2 = L.marker([-2500, 5500]).addTo(map);
marker2.bindPopup(resources.text_site2);
var marker3 = L.marker([-4000, 6900]).addTo(map);
marker3.bindPopup(resources.text_site3);
//创建最佳路径分析服务实例
findPathService = L.supermap.networkAnalystService(serviceUrl);
//创建最佳路径分析参数实例
var resultSetting = new SuperMap.TransportationAnalystResultSetting({
returnEdgeFeatures: true,
returnEdgeGeometry: true,
returnEdgeIDs: true,
returnNodeFeatures: true,
returnNodeGeometry: true,
returnNodeIDs: true,
returnPathGuides: true,
returnRoutes: true
});
var analystParameter = new SuperMap.TransportationAnalystParameter({
resultSetting: resultSetting,
weightFieldName: "length"
});
findPathParameter = new SuperMap.FindPathParameters({
isAnalyzeById: false,
nodes: [L.point(4000, -3000), L.point(5500, -2500), L.point(6900, -4000)],
parameter: analystParameter
});
var myIcon = L.icon({
iconUrl: "../img/walk.png",
iconSize: [20, 20]
});
//进行查找
findPathService.findPath(findPathParameter, function (serviceResult) {
var result = serviceResult.result;
result.pathList.map(function (result) {
L.geoJSON(result.route).addTo(map);
L.geoJSON(result.pathGuideItems, {
pointToLayer: function (geoPoints, latlng) {
L.marker(latlng, { icon: myIcon }).addTo(map);
},
filter: function (geoJsonFeature) {
if (geoJsonFeature.geometry && geoJsonFeature.geometry.type === 'Point') {
return true;
}
return false;
}
}).addTo(map);
})
});
}
</script>
</body>
</html>
交通换乘
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title data-i18n="resources.title_trafficTransfer"></title>
<script type="text/javascript" include="bootstrap-css,jquery" src="../js/include-web.js"></script>
<style>
.transferSolution {
cursor: pointer;
margin: 10px 10px;
}
.transferInfo a {
cursor: pointer;
}
table {
width: 90%;
}
#trafficRes {
margin: 5px;
}
</style>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
<script type="text/javascript" src="../../dist/leaflet/include-leaflet.js"></script>
<script type="text/javascript">
var host = window.isLocal ? window.server : "https://iserver.supermap.io";
var map, startMarker, endMarker, tempRedLayer, tempMarker,
routeFeatureGroup, paths = {transSolutions: null, solutions: null}, info,
baseUrl = host + "/iserver/services/map-changchun/rest/maps/长春市区图",
serviceUrl = host + "/iserver/services/traffictransferanalyst-sample/restjsr/traffictransferanalyst/Traffic-Changchun";
map = L.map('map', {
crs: L.CRS.NonEarthCRS({
bounds: L.bounds([48.4, -7668.25], [8958.85, -55.58]),
origin: L.point(48.4, -55.58)
}),
center: [-3900, 4700],
maxZoom: 18,
zoom: 2
});
L.supermap.tiledMapLayer(baseUrl, {noWrap: true}).addTo(map);
startMarker = L.marker([-5527.73795456, 3111.42533851])
.addTo(map).bindTooltip(resources.text_startPoint, {
offset: L.point([0, -10]),
direction: "top",
permanent: true
}).openTooltip();
endMarker = L.marker([-4270.0725196, 6055.3431955])
.addTo(map)
.bindTooltip(resources.text_endPoint, {
offset: L.point([0, -10]),
direction: "top",
permanent: true
}).openTooltip();
routeFeatureGroup = L.featureGroup().addTo(map);
tempRedLayer = L.featureGroup().addTo(map);
initResultInfoWin();
execTransSolutionsQuery('LESS_TIME');
function initResultInfoWin() {
info = L.control({position: 'topright'});
info.onAdd = function () {
this._div = L.DomUtil.create('div', 'panel panel-primary');
info.update();
handleMapEvent(this._div, this._map);
return this._div;
};
info.update = function (transSolutions, transGuide) {
if (!transSolutions) {
return;
}
var solution, lines, line, dispStatus = "block";
$("<div class='panel-heading' style='background:steelblue;color: honeydew'>" + resources.text_startPoint + "：" + "省汽修 " + resources.text_endPoint + "：" + "中安大厦<br/>" + resources.text_trafficTransferScheme + "（" + resources.text_minTime + "）</div>").appendTo(this._div);
for (var i = 0, iLen = transSolutions.length; i < iLen; i++) {
solution = transSolutions[i];
//显示方案头
var title = "";
for (var ii = 0, iiLen = solution.linesItems.length; ii < iiLen; ii++) {
lines = solution.linesItems[ii];
for (var iii = 0, iiiLen = lines.lineItems.length; iii < iiiLen; iii++) {
line = lines.lineItems[iii];
if (iii !== iiiLen - 1) {
title += line.lineName + "/";
} else {
title += line.lineName;
}
}
if (ii !== iiLen - 1) {
title += " → ";
}
}
$("<div class='transferSolution' id='transferSolution-" + i + "'><span class='transferIndex'>" + resources.text_scheme + (i + 1) + "：</span>" + title + "</div>").appendTo(this._div);
if (i !== 0) {
dispStatus = "none";
}
var list = $("<div class='transferInfo' id='transferInfo-" + i + "' style='display:" + dispStatus + "'></div>");
list.appendTo(this._div);
//默认显示方案1下的table
if (i === 0) {
fillTransferInfo(transGuide, transSolutions, 0).appendTo(list);
setPopup();
}
}
//点击方案时显示对应的table
bindSolutionsClickEvent();
};
info.addTo(map);
}
function execTransSolutionsQuery(tactic) {
info.remove();
paths.points = [26, 180];
var params = new SuperMap.TransferSolutionParameters({
solutionCount: 6,//最大换乘导引数量
transferTactic: tactic,//公交换乘策略类型
walkingRatio: 10,//步行与公交的消耗权重比
points: paths.points //起始点坐标
});
L.supermap.trafficTransferAnalystService(serviceUrl)
.analysisTransferSolution(params, function (serviceResult) {
if (serviceResult.error) {
alert(resources.msg_errorMsg + ":" + serviceResult.error.errorMsg);
}
transferSolutionsSucceed(serviceResult.result);
});
}
function transferSolutionsSucceed(result) {
clearLayer();
info.addTo(map);
//在地图上叠加符号信息
var transGuide = result.defaultGuide,
transSolutions = result.solutionItems,
solutions = [];
for (var j = 0; j < transSolutions.length; j++) {
var linesItems = transSolutions[j].linesItems, transSolution = [];
for (var jj = 0; jj < linesItems.length; jj++) {
var lineItems = linesItems[jj].lineItems, items = [];
for (var jjj = 0; jjj < lineItems.length; jjj++) {
var lineItem = lineItems[jjj];
items.push("{'lineID':" + lineItem.lineID +
",'startStopIndex':" + lineItem.startStopIndex +
",'endStopIndex':" + lineItem.endStopIndex + "}"
);
}
transSolution.push(items);
}
solutions.push(transSolution);
}
paths["transSolutions"] = transSolutions;
paths["solutions"] = solutions;
if (!transGuide || !transSolutions) return;
info.update(transSolutions, transGuide);
}
function fillTransferInfo(transGuide, transSolutions, indexX) {
clearLayer();
if (transGuide && transGuide.items.length) {
var items = transGuide.items;
for (var itemIndex = 0, itemLen = items.length; itemIndex < itemLen; itemIndex++) {
var geometry = items[itemIndex].route;
routeFeatureGroup.addLayer(L.geoJSON(L.Util.toGeoJSON(geometry)).addTo(map));
}
}
var table = $("<table id='trafficRes' border='1'></table>");
var startStop = $("<tr></tr>");
$("<td class='start_transfer' width='10px'></td>").appendTo(startStop);
$("<td colspan='2'><span class='busLink bgSpan'><span style='display:none'>" + transGuide.items[0].startPosition.x + "," + transGuide.items[0].startPosition.y + "</span>" + transGuide.items[0].startStopName + "</span></td>").appendTo(startStop);
startStop.appendTo(table);
var indexY = 0;
for (var iiii = 0, iiiiLen = transGuide.items.length; iiii < iiiiLen; iiii++) {
var item = transGuide.items[iiii];
var tr2 = $("<tr></tr>");
if (item.isWalking) {
$("<td class='step_transfer' ></td>").appendTo(tr2);
$("<td>" + resources.text_walkTO + "<a class='busLink'><span style='display:none'>" + item.endPosition.x + "," + item.endPosition.y + "</span>" + item.endStopName + "</a></td>").appendTo(tr2);
$("<td>" + parseInt(item.distance) + resources.msg_m + "</td>").appendTo(tr2);
} else {
var otherLines = transSolutions[indexX].linesItems[indexY],
links = "";
if (otherLines && otherLines.lineItems.length > 1) {
links = "</br>" + resources.text_alsoRide;
for (var oti = 0, otLen = otherLines.lineItems.length; oti < otLen; oti++) {
var line = otherLines.lineItems[oti];
if (item.lineName !== line.lineName) {
var other = indexX + "," + indexY + "," + oti + ",0";
links += "<a class='busLink'><span style='display:none'>" + other + "</span>" + line.lineName + "</a>";
}
}
}
$("<td class='bus_transfer'></td>").appendTo(tr2);
var points = item.route.points, pointStr = "";
for (var i = 0; i < points.length; i++) {
pointStr += points[i].x + " " + points[i].y;
if (i != points.length - 1) {
pointStr += ",";
}
}
$("<td>" + resources.text_ride + "<a class='busLink'>" + item.lineName + "<span style='display:none'>" + pointStr + "</span></a>, " + resources.text_debus1 + "<a class='busLink'><span style='display:none'>" + item.endPosition.x + "," + item.endPosition.y + "</span>" + item.endStopName + "</a>" + resources.text_debus2 + links + "</td>").appendTo(tr2);
$("<td>" + item.passStopCount + resources.text_stops + "</td>").appendTo(tr2);
indexY++;
}
tr2.appendTo(table);
}
var endStop = $("<tr></tr>");
endStop.appendTo(table);
$("<td class='end_transfer' width='10px'></td>").appendTo(endStop);
$("<td colspan='2'><span class='busLink bgSpan'><span style='display:none'>" + transGuide.items[transGuide.items.length - 1].endPosition.x + "," + transGuide.items[transGuide.items.length - 1].endPosition.y + "</span>" + transGuide.items[transGuide.items.length - 1].endStopName + "</span></td>").appendTo(endStop);
return table;
}
function setPopup() {
$(".busLink").click(function () {
tempRedLayer.clearLayers();
if (tempMarker) tempMarker.remove();
var points = this.children[0].innerText.split(","), lonLat;
if (points.length === 2) {
lonLat = L.latLng(points[1], points[0]);
tempMarker = L.marker(lonLat).addTo(map);
map.setView(lonLat);
} else if (points.length === 4 && points[3] === "0") {
var linesItems = paths["solutions"][points[0]], lineStr = "[";
for (var i = 0; i < linesItems.length; i++) {
var lineItem = linesItems[i][0], j = parseInt(points[1]);
if (i !== j) {
lineStr += lineItem;
} else if (i === j) {
lineItem = linesItems[points[1]][points[2]];
lineStr += lineItem;
}
if (i !== linesItems.length - 1) {
lineStr += ",";
}
}
lineStr += "]";
$("#transferInfo-" + points[0]).hide(500);
execTransPathQuery(points[0], lineStr);
$("#transferInfo-" + points[0]).show(500);
} else {
var linePoints = [];
for (var i = 0; i < points.length; i++) {
var arr = points[i].split(" ");
var point = [arr[1], arr[0]];
linePoints.push(point);
}
var lineString = L.polyline(linePoints, {color: "red"}).addTo(map);
tempRedLayer.addLayer(lineString);
map.setView(lineString.getBounds().getCenter(), 3);
}
});
}
function bindSolutionsClickEvent() {
for (var i = 0; i < 6; i++) {
$("#transferSolution-" + i).click(toggleGuideItems);
}
function toggleGuideItems(e) {
for (var j = 0; j < 6; j++) {
$("#transferInfo-" + j).hide(500);
}
var id = parseInt(e.currentTarget.id.split("-")[1]);
$("#transferInfo-" + id).show(500);
//构造传入iServer服务器的transferLines
var transLines = [];
for (var i = 0; i < paths.solutions[id].length; i++) {
var trans = paths.solutions[id][i][0];
transLines.push(trans);
}
execTransPathQuery(id, transLines);
}
}
function execTransPathQuery(id, transLines) {
var params = new SuperMap.TransferPathParameters({
points: paths["points"],
transferLines: transLines
});
L.supermap
.trafficTransferAnalystService(serviceUrl)
.analysisTransferPath(params, function (serviceResult) {
$("#transferInfo-" + id).empty();
var transGuide = serviceResult.result;
transSolutions = paths["transSolutions"];
map.setView([-3900, 4700], 2);
fillTransferInfo(transGuide, transSolutions, id).appendTo($("#transferInfo-" + id));
setPopup();
});
}
function handleMapEvent(div, map) {
if (!div || !map) {
return;
}
div.addEventListener('mouseover', function () {
map.dragging.disable();
map.scrollWheelZoom.disable();
map.doubleClickZoom.disable();
});
div.addEventListener('mouseout', function () {
map.dragging.enable();
map.scrollWheelZoom.enable();
map.doubleClickZoom.enable();
});
}
function clearLayer() {
if (routeFeatureGroup) {
routeFeatureGroup.clearLayers();
}
if (tempRedLayer) {
tempRedLayer.clearLayers();
}
if (tempMarker) {
tempMarker.remove();
}
}
</script>
</body>
</html>
地址匹配
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title data-i18n="resources.title_addressMatchService"></title>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="map" style="width: 100%;height:100%"></div>
<script type="text/javascript" include="bootstrap-css,jquery" src="../js/include-web.js"></script>
<script type="text/javascript" src="../../dist/leaflet/include-leaflet.js"></script>
<script type="text/javascript">
var host = window.isLocal ? window.server : "https://iserver.supermap.io";
var map, codeMarkers = [], decodeMarkers = [],
url = host + "/iserver/services/map-china400/rest/maps/China_4326",
addressUrl = host + "/iserver/services/addressmatch-Address/restjsr/v1/address",
addressMatchService = L.supermap.addressMatchService(addressUrl);
map = L.map('map', {
crs: L.CRS.EPSG4326,
center: [39.914714, 116.383572],
maxZoom: 18,
zoom: 11
});
L.supermap.tiledMapLayer(url).addTo(map);
var control = L.control({position: 'topright'});
control.onAdd = function () {
var popup = L.DomUtil.create('div');
popup.style.width = '350px';
popup.innerHTML = "<div class='panel panel-default'>" +
"<div class='panel-body'>" +
"<ul class='nav nav-tabs nav-justified'>" +
"<li id='geocode' role='presentation' class='active'><a href='#'>" + resources.text_code + "</a></li>" +
"<li id='geodecode' role='presentation'><a href='#'>" + resources.text_decode + "</a></li>" +
"</ul><p>" +
"<div class='tab-content'>" +
"<div id='geocodeParam' role='tabpanel' class='tab-pane deplistContent active'>" +
"<div class='input-group'>" +
"<span class='input-group-addon'>" + resources.text_address + "</span>" +
"<input id='address' type='text' class='form-control' placeholder='超图软件'/>" +
"</div><p>" +
"<div class='input-group'>" +
"<span class='input-group-addon'>" + resources.text_filterField + " </span>" +
"<input id='filters' type='text' class='form-control' placeholder='北京市,朝阳区'/>" +
"</div><p>" +
"<div class='input-group'>" +
"<span class='input-group-addon'>" + resources.text_minIndex + "</span>" +
"<input id='fromIndex' type='text' class='form-control' placeholder='0'/>" +
"</div><p>" +
"<div class='input-group'>" +
"<span class='input-group-addon'>" + resources.text_maxIndex + "</span>" +
"<input id='toIndex' type='text' class='form-control' placeholder='10'/>" +
"</div><p>" +
"<div class='input-group'>" +
"<span class='input-group-addon'>" + resources.text_maxCount + "</span>" +
"<input id='maxReturn' type='text' class='form-control' placeholder='-1'/>" +
"</div><p>" +
"<div class='input-group'>" +
"<span class='input-group-addon'>" + resources.text_coorSystem + "</span>" +
"<input id='prjCoordSys' type='text' class='form-control' placeholder='{epsgcode:4326}'/>" +
"</div><p>" +
"<div align='right'>" +
"<input type='button' id='codeBtn' class='btn btn-primary' value='" + resources.btn_input_value_match + "'/>" +
"</div></div>" +
"<div id='geodecodeParam' role='tabpanel' class='tab-pane deplistContent'>" +
"<div class='input-group'>" +
"<span class='input-group-addon'>" + resources.text_abscissa + "</span>" +
"<input id='xCoord' type='text' class='form-control' placeholder='116.3518541194752'/>" +
"</div><p>" +
"<div class='input-group'>" +
"<span class='input-group-addon'>" + resources.text_ordinate + " </span>" +
"<input id='yCoord' type='text' class='form-control' placeholder='40.00097839595237'/>" +
"</div><p>" +
"<div class='input-group'>" +
"<span class='input-group-addon'>" + resources.text_filterField + "</span>" +
"<input id='filters2' type='text' class='form-control' placeholder=''/>" +
"</div><p>" +
"<div class='input-group'>" +
"<span class='input-group-addon'>" + resources.text_minIndex + "</span>" +
"<input id='fromIndex2' type='text' class='form-control' placeholder='0'/>" +
"</div><p>" +
"<div class='input-group'>" +
"<span class='input-group-addon'>" + resources.text_maxIndex + "</span>" +
"<input id='toIndex2' type='text' class='form-control' placeholder='10'/>" +
"</div><p>" +
"<div class='input-group'>" +
"<span class='input-group-addon'>" + resources.text_maxCount + "</span>" +
"<input id='maxReturn2' type='text' class='form-control' placeholder='-1'/>" +
"</div><p>" +
"<div class='input-group'>" +
"<span class='input-group-addon'>" + resources.text_queryRadius + "</span>" +
"<input id='geoDecodingRadius' type='text' class='form-control' placeholder='-1'/>" +
"</div><p>" +
"<div class='input-group'>" +
"<span class='input-group-addon'>" + resources.text_coorSystem + "</span>" +
"<input id='prjCoordSys2' type='text' class='form-control' placeholder='{epsgcode:4326}'/>" +
"</div><p>" +
"<div align='right'>" +
"<input type='button' id='decodeBtn' class='btn btn-primary' value='" + resources.btn_input_value_match + "'/>" +
"</div></div></div>";
handleMapEvent(popup, this._map);
return popup;
};
control.addTo(map);
$("#geocode").click(function () {
$("#geocode")[0].className = 'active';
$("#geodecode")[0].className = '';
$("#geocodeParam").addClass('active');
$("#geodecodeParam").removeClass('active');
});
$("#geodecode").click(function () {
$("#geocode")[0].className = '';
$("#geodecode")[0].className = 'active';
$("#geodecodeParam").addClass('active');
$("#geocodeParam").removeClass('active');
});
//判断输入字符串是否为空或者全部都是空格
function isNull(str) {
if (str == "") return true;
var regu = "^[ ]+$";
var re = new RegExp(regu);
return re.test(str);
}
$("#codeBtn").click(function () {
var geoCodeParam = new SuperMap.GeoCodingParameter({
address: $('#address').val() || $('#address').attr('placeholder'),
fromIndex: $('#fromIndex').val() || $('#fromIndex').attr('placeholder'),
toIndex: $('#toIndex').val() || $('#toIndex').attr('placeholder'),
filters: $('#filters').val() || $('#filters').attr('placeholder'),
prjCoordSys: $('#prjCoordSys').val() || $('#prjCoordSys').attr('placeholder'),
maxReturn: $('#maxReturn').val() || $('#maxReturn').attr('placeholder')
});
addressMatchService.code(geoCodeParam, match);
});
$("#decodeBtn").click(function () {
var geoDecodeParam = new SuperMap.GeoDecodingParameter({
x: $('#xCoord').val() || $('#xCoord').attr('placeholder'),
y: $('#yCoord').val() || $('#yCoord').attr('placeholder'),
fromIndex: $('#fromIndex2').val() || $('#fromIndex2').attr('placeholder'),
toIndex: $('#toIndex2').val() || $('#toIndex2').attr('placeholder'),
filters: $('#filters2').val() || $('#filters2').attr('placeholder'),
prjCoordSys: $('#prjCoordSys2').val() || $('#prjCoordSys2').attr('placeholder'),
maxReturn: $('#maxReturn2').val() || $('#maxReturn2').attr('placeholder'),
geoDecodingRadius: $('#geoDecodingRadius').val() || $('#geoDecodingRadius').attr('placeholder'),
});
addressMatchService.decode(geoDecodeParam, match);
});
function match(obj) {
clearMarkers();
obj.result.map(function (item) {
var marker = L.marker([item.location.y, item.location.x]);
decodeMarkers.push(marker);
var innerHTML = "";
innerHTML += resources.text_address + ":" + item.address + "<br>";
var x = Number(item.location.x.toString().match(/^\d+(?:\.\d{0,2})?/));
var y = Number(item.location.y.toString().match(/^\d+(?:\.\d{0,2})?/));
innerHTML += resources.text_coordinate + ":[" + x + "," + y + "]<br>";
if (item.score > 0) {
innerHTML += resources.text_matchDegree + ":" + item.score + "<br>";
}
innerHTML += resources.text_filterField + ":" + item.filters + "<br>";
marker.bindPopup(innerHTML);
});
for (var i = 0; i < decodeMarkers.length; i++) {
decodeMarkers[i].addTo(map);
}
map.setView(L.latLng(39.914714, 116.383572), 10);
}
function clearMarkers() {
if (codeMarkers) {
for (var i = 0; i < codeMarkers.length; i++) {
codeMarkers[i].remove();
}
}
if (decodeMarkers) {
for (var i = 0; i < decodeMarkers.length; i++) {
decodeMarkers[i].remove();
}
}
codeMarkers = [];
decodeMarkers = [];
}
function handleMapEvent(div, map) {
if (!div || !map) {
return;
}
div.addEventListener('mouseover', function () {
map.dragging.disable();
map.scrollWheelZoom.disable();
map.doubleClickZoom.disable();
});
div.addEventListener('mouseout', function () {
map.dragging.enable();
map.scrollWheelZoom.enable();
map.doubleClickZoom.enable();
});
}
</script>
</body>
</html>
数据流
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title data-i18n="resources.title_dataFlowService"></title>
<script type="text/javascript" src="../js/include-web.js"></script>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
<script type="text/javascript" src="../../dist/leaflet/include-leaflet.js"></script>
<script type="text/javascript">
var host = window.isLocal ? window.server : "https://iserver.supermap.io";
var wsHost = "wss:\//" + (window.isLocal ? document.location.hostname + ":8800" : "iclsvrws.supermap.io");
var map,
urlMap = host + "/iserver/services/map-china400/rest/maps/China",
urlQuery = host + "/iserver/services/map-china400/rest/maps/China_4326",
urlDataFlow = wsHost + "/iserver/services/dataflowTest/dataflow";
map = L.map('map', {
preferCanvas: true,
crs: L.CRS.EPSG3857,
center: [39.88, 116.42],
maxZoom: 18,
zoom: 12
});
L.supermap.tiledMapLayer(urlMap).addTo(map);
SuperMap.SecurityManager.registerToken(urlDataFlow, window.exampleToken);
var popup = L.popup({
offset: L.point(0, 0),
autoPan: true
});
//创建DataFlowLayer，创建DataFlowLayer订阅iServer dataflow服务并将结果加载到地图上
var dataFlowLayer = L.supermap.dataFlowLayer(urlDataFlow, {
style: function (feature) {
return {
fillColor: "red",
fillOpacity: 1,
radius: 6,
weight: 0
};
}
//geometry:{coordinates:[[[116.381741960923,39.8765100055449],[116.414681699817,39.8765100055449],[116.414681699817,39.8415115329708],[116.381741960923, 39.8415115329708],[116.381741960923,39.8765100055449]]],type:"Polygon"},
//excludeField:["id"]
});
dataFlowLayer.on('dataupdated', function (result) {
var feature = result.data;
popup.setLatLng(L.GeoJSON.coordsToLatLng(feature.geometry.coordinates))
.setContent(feature.properties.time);
if (!popup.isOpen()) {
popup.addTo(map);
}
})
dataFlowLayer.addTo(map);
//模拟实时数据 start
//查询一个线数据，每两秒将一个点通过dataFlowService广播给iSevrer的dataflow服务
query();
var timer, featureResult, dataFlowBroadcast;
function query() {
var param = new SuperMap.QueryBySQLParameters({
queryParams: {
name: "Main_Road_L@China#1",
attributeFilter: "SMID = 1755"
}
});
L.supermap
.queryService(urlQuery)
.queryBySQL(param, function (serviceResult) {
featureResult = serviceResult;
dataFlowBroadcast = L.supermap.dataFlowService(urlDataFlow).initBroadcast();
dataFlowBroadcast.on('broadcastSocketConnected', function (e) {
timer = window.setInterval("broadcast()", 2000);
})
});
}
var count = 200;
function broadcast() {
if (count >= featureResult.result.recordsets[0].features.features[0].geometry.coordinates.length) {
window.clearInterval(timer);
return;
}
var point = featureResult.result.recordsets[0].features.features[0].geometry.coordinates[count];
var feature = {
geometry: {
coordinates: [point[0], point[1]],
type: "Point"
},
type: "Feature",
properties: {
id: 1,
time: new Date()
}
};
dataFlowBroadcast.broadcast(feature);
count += 3;
}
//模拟实时数据 end
</script>
</body>
</html>
