调整 igMap 标记大小
Adjust igMap Marker Size
我正在尝试使用 ignite UI 的 igMap 控件绘制某些数据点。我想要发生的是基于每小时较大的实现率，使地图标记更大或更小。通过 infragistics 的文档似乎并没有涉及太多，所以如果有人有意见，我将不胜感激
@model IEnumerable<OpsOverallGeoMapViewModel>
<style>
#tooltipTable {
font-family: Verdana, Arial, Helvetica, sans-serif;
width: 100%;
border-collapse: collapse;
}
#tooltipTable td, #tooltipTable th {
font-size: 9px;
border: 1px solid #28b51c;
padding: 3px 7px 2px 7px;
}
#tooltipTable th {
font-weight: bold;
font-size: 11px;
text-align: left;
padding-top: 5px;
padding-bottom: 4px;
background-color: #28b51c;
color: #ffffff;
}
</style>
<script id="tooltipTemplate" type="text/x-jquery-tmpl">
<table id="tooltipTable">
<tr><th class="tooltipHeading" colspan="2">${item.Country}</th></tr>
<tr>
<td>Total Hours:</td>
<td>${item.Hours}</td>
</tr>
<tr>
<td>Total Billing:</td>
<td>${item.Billing}</td>
</tr>
<tr>
<td>Realized Rate Per Hour:</td>
<td>${item.RealizedRatePerHour}</td>
</tr>
</table>
</script>
<div id="map"></div>
<script>
$(function () {
var model = @Html.Raw(Json.Encode(Model));
$("#map").igMap({
width: "700px",
height: "500px",
windowRect: { left: 0.225, top: 0.1, height: 0.6, width: 0.6 },
series: [{
type: "geographicSymbol",
name: "worldCities",
dataSource: model, //JSON Array defined above
latitudeMemberPath: "Latitude",
longitudeMemberPath: "Longitude",
markerType: "automatic",
markerOutline: "#28b51c",
markerBrush: "#28b51c",
showTooltip: true,
tooltipTemplate: "tooltipTemplate"
}],
});
});
</script>
<div id="map"></div>
我通过 运行 通过 infragistics 网站上的标记模板示例弄明白了。通过改变标记的圆半径，它使它成为一种热图，这正是我正在寻找的
$(function () {
var model = @Html.Raw(Json.Encode(Model.OrderBy(x => x.Billing)));
$("#map").igMap({
width: "700px",
height: "500px",
windowRect: { left: 0.1, top: 0.1, height: 0.7, width: 0.7 },
// specifies imagery tiles from BingMaps
backgroundContent: {
type: "bing",
key: "Masked Purposely",
imagerySet: "Road", // alternative: "Road" | "Aerial"
},
series: [{
type: "geographicSymbol",
name: "ratesGraph",
dataSource: model, //JSON Array defined above
latitudeMemberPath: "Latitude",
longitudeMemberPath: "Longitude",
markerType: "automatic",
markerCollisionAvoidance: "fade",
markerOutline: "#1142a6",
markerBrush: "#7197e5",
showTooltip: true,
tooltipTemplate: "customTooltip",
// Defines marker template rendering function
markerTemplate: {
measure: function (measureInfo) {
measureInfo.width = 10;
measureInfo.height = 10;
},
render: function (renderInfo) {
createMarker(renderInfo);
}
}
}]
});
});
function createMarker(renderInfo) {
var ctx = renderInfo.context;
var x = renderInfo.xPosition;
var y = renderInfo.yPosition;
var size = 10;
var heightHalf = size / 2.0;
var widthHalf = size / 2.0;
if (renderInfo.isHitTestRender) {
// This is called for tooltip hit test only
// Rough marker rectangle size calculation
ctx.fillStyle = renderInfo.data.actualItemBrush().fill();
ctx.fillRect(x - widthHalf, y - heightHalf, size, size);
} else {
var data = renderInfo.data;
var name = data.item()["CountryName"];
var type = data.item()["Country"];
var billing = data.item()["Billing"];
// Draw text
ctx.textBaseline = "top";
ctx.font = '8pt Verdana';
ctx.fillStyle = "black";
ctx.textBaseline = "middle";
wrapText(ctx, name, x + 3, y + 6, 80, 12);
// Draw marker
ctx.beginPath();
//SET THE CIRCLE RADIUS HERE*******
var circleRadius = 3;
var radiusFactor = billing / 100000;
if (radiusFactor > 4)
circleRadius = radiusFactor;
if (circleRadius > 10)
circleRadius = 10;
ctx.arc(x, y,circleRadius, 0, 2 * Math.PI, false);
ctx.fillStyle = "#36a815";
ctx.fill();
ctx.lineWidth = 1;
ctx.strokeStyle = "black";
ctx.stroke();
}
}
// Plots a rectangle with rounded corners with a semi-transparent frame
function plotTextBackground(context, left, top, width, height) {
var cornerRadius = 3;
context.beginPath();
// Upper side and upper right corner
context.moveTo(left + cornerRadius, top);
context.lineTo(left + width - cornerRadius, top);
context.arcTo(left + width, top, left + width, top + cornerRadius, cornerRadius);
// Right side and lower right corner
context.lineTo(left + width, top + height - cornerRadius);
context.arcTo(left + width, top + height, left + width - cornerRadius, top + height, cornerRadius);
// Lower side and lower left corner
context.lineTo(left + cornerRadius, top + height);
context.arcTo(left, top + height, left, top + height - cornerRadius, cornerRadius);
// Left side and upper left corner
context.lineTo(left, top + cornerRadius);
context.arcTo(left, top, left + cornerRadius, top, cornerRadius);
// Fill white with 75% opacity
context.globalAlpha = 1;
context.fillStyle = "white";
context.fill();
context.globalAlpha = 1;
// Plot grey frame
context.lineWidth = 1;
context.strokeStyle = "grey";
context.stroke();
}
// Outputs text in a word wrapped fashion in a transparent frame
function wrapText(context, text, x, y, maxWidth, lineHeight) {
var words = text.split(" ");
var line = "";
var yCurrent = y;
var lines = [], currentLine = 0;
// Find the longest word in the text and update the max width if the longest word cannot fit
for (var i = 0; n < words.length; i++) {
var testWidth = context.measureText(words[i]);
if (testWidth > maxWidth)
maxWidth = metrics.width;
}
// Arrange all words into lines
for (var n = 0; n < words.length; n++) {
var testLine = line + words[n];
var testWidth = context.measureText(testLine).width;
if (testWidth > maxWidth) {
lines[currentLine] = line;
currentLine++;
line = words[n] + " ";
}
else {
line = testLine + " ";
}
}
lines[currentLine] = line;
// Plot frame and background
if (lines.length > 1) {
// Multiline text
plotTextBackground(context, x - 2, y - lineHeight / 2 - 2, maxWidth + 3, lines.length * lineHeight + 3);
}
else {
// Single line text
var textWidth = context.measureText(lines[0]).width; // Limit frame width to the actual line width
plotTextBackground(context, x - 2, y - lineHeight / 2 - 2, textWidth + 3, lines.length * lineHeight + 3);
}
// Output lines of text
context.fillStyle = "black";
for (var n = 0; n < lines.length; n++) {
context.fillText(" " + lines[n], x, yCurrent);
yCurrent += lineHeight;
}
}
我正在尝试使用 ignite UI 的 igMap 控件绘制某些数据点。我想要发生的是基于每小时较大的实现率，使地图标记更大或更小。通过 infragistics 的文档似乎并没有涉及太多，所以如果有人有意见，我将不胜感激
@model IEnumerable<OpsOverallGeoMapViewModel>
<style>
#tooltipTable {
font-family: Verdana, Arial, Helvetica, sans-serif;
width: 100%;
border-collapse: collapse;
}
#tooltipTable td, #tooltipTable th {
font-size: 9px;
border: 1px solid #28b51c;
padding: 3px 7px 2px 7px;
}
#tooltipTable th {
font-weight: bold;
font-size: 11px;
text-align: left;
padding-top: 5px;
padding-bottom: 4px;
background-color: #28b51c;
color: #ffffff;
}
</style>
<script id="tooltipTemplate" type="text/x-jquery-tmpl">
<table id="tooltipTable">
<tr><th class="tooltipHeading" colspan="2">${item.Country}</th></tr>
<tr>
<td>Total Hours:</td>
<td>${item.Hours}</td>
</tr>
<tr>
<td>Total Billing:</td>
<td>${item.Billing}</td>
</tr>
<tr>
<td>Realized Rate Per Hour:</td>
<td>${item.RealizedRatePerHour}</td>
</tr>
</table>
</script>
<div id="map"></div>
<script>
$(function () {
var model = @Html.Raw(Json.Encode(Model));
$("#map").igMap({
width: "700px",
height: "500px",
windowRect: { left: 0.225, top: 0.1, height: 0.6, width: 0.6 },
series: [{
type: "geographicSymbol",
name: "worldCities",
dataSource: model, //JSON Array defined above
latitudeMemberPath: "Latitude",
longitudeMemberPath: "Longitude",
markerType: "automatic",
markerOutline: "#28b51c",
markerBrush: "#28b51c",
showTooltip: true,
tooltipTemplate: "tooltipTemplate"
}],
});
});
</script>
<div id="map"></div>
我通过 运行 通过 infragistics 网站上的标记模板示例弄明白了。通过改变标记的圆半径，它使它成为一种热图，这正是我正在寻找的
$(function () {
var model = @Html.Raw(Json.Encode(Model.OrderBy(x => x.Billing)));
$("#map").igMap({
width: "700px",
height: "500px",
windowRect: { left: 0.1, top: 0.1, height: 0.7, width: 0.7 },
// specifies imagery tiles from BingMaps
backgroundContent: {
type: "bing",
key: "Masked Purposely",
imagerySet: "Road", // alternative: "Road" | "Aerial"
},
series: [{
type: "geographicSymbol",
name: "ratesGraph",
dataSource: model, //JSON Array defined above
latitudeMemberPath: "Latitude",
longitudeMemberPath: "Longitude",
markerType: "automatic",
markerCollisionAvoidance: "fade",
markerOutline: "#1142a6",
markerBrush: "#7197e5",
showTooltip: true,
tooltipTemplate: "customTooltip",
// Defines marker template rendering function
markerTemplate: {
measure: function (measureInfo) {
measureInfo.width = 10;
measureInfo.height = 10;
},
render: function (renderInfo) {
createMarker(renderInfo);
}
}
}]
});
});
function createMarker(renderInfo) {
var ctx = renderInfo.context;
var x = renderInfo.xPosition;
var y = renderInfo.yPosition;
var size = 10;
var heightHalf = size / 2.0;
var widthHalf = size / 2.0;
if (renderInfo.isHitTestRender) {
// This is called for tooltip hit test only
// Rough marker rectangle size calculation
ctx.fillStyle = renderInfo.data.actualItemBrush().fill();
ctx.fillRect(x - widthHalf, y - heightHalf, size, size);
} else {
var data = renderInfo.data;
var name = data.item()["CountryName"];
var type = data.item()["Country"];
var billing = data.item()["Billing"];
// Draw text
ctx.textBaseline = "top";
ctx.font = '8pt Verdana';
ctx.fillStyle = "black";
ctx.textBaseline = "middle";
wrapText(ctx, name, x + 3, y + 6, 80, 12);
// Draw marker
ctx.beginPath();
//SET THE CIRCLE RADIUS HERE*******
var circleRadius = 3;
var radiusFactor = billing / 100000;
if (radiusFactor > 4)
circleRadius = radiusFactor;
if (circleRadius > 10)
circleRadius = 10;
ctx.arc(x, y,circleRadius, 0, 2 * Math.PI, false);
ctx.fillStyle = "#36a815";
ctx.fill();
ctx.lineWidth = 1;
ctx.strokeStyle = "black";
ctx.stroke();
}
}
// Plots a rectangle with rounded corners with a semi-transparent frame
function plotTextBackground(context, left, top, width, height) {
var cornerRadius = 3;
context.beginPath();
// Upper side and upper right corner
context.moveTo(left + cornerRadius, top);
context.lineTo(left + width - cornerRadius, top);
context.arcTo(left + width, top, left + width, top + cornerRadius, cornerRadius);
// Right side and lower right corner
context.lineTo(left + width, top + height - cornerRadius);
context.arcTo(left + width, top + height, left + width - cornerRadius, top + height, cornerRadius);
// Lower side and lower left corner
context.lineTo(left + cornerRadius, top + height);
context.arcTo(left, top + height, left, top + height - cornerRadius, cornerRadius);
// Left side and upper left corner
context.lineTo(left, top + cornerRadius);
context.arcTo(left, top, left + cornerRadius, top, cornerRadius);
// Fill white with 75% opacity
context.globalAlpha = 1;
context.fillStyle = "white";
context.fill();
context.globalAlpha = 1;
// Plot grey frame
context.lineWidth = 1;
context.strokeStyle = "grey";
context.stroke();
}
// Outputs text in a word wrapped fashion in a transparent frame
function wrapText(context, text, x, y, maxWidth, lineHeight) {
var words = text.split(" ");
var line = "";
var yCurrent = y;
var lines = [], currentLine = 0;
// Find the longest word in the text and update the max width if the longest word cannot fit
for (var i = 0; n < words.length; i++) {
var testWidth = context.measureText(words[i]);
if (testWidth > maxWidth)
maxWidth = metrics.width;
}
// Arrange all words into lines
for (var n = 0; n < words.length; n++) {
var testLine = line + words[n];
var testWidth = context.measureText(testLine).width;
if (testWidth > maxWidth) {
lines[currentLine] = line;
currentLine++;
line = words[n] + " ";
}
else {
line = testLine + " ";
}
}
lines[currentLine] = line;
// Plot frame and background
if (lines.length > 1) {
// Multiline text
plotTextBackground(context, x - 2, y - lineHeight / 2 - 2, maxWidth + 3, lines.length * lineHeight + 3);
}
else {
// Single line text
var textWidth = context.measureText(lines[0]).width; // Limit frame width to the actual line width
plotTextBackground(context, x - 2, y - lineHeight / 2 - 2, textWidth + 3, lines.length * lineHeight + 3);
}
// Output lines of text
context.fillStyle = "black";
for (var n = 0; n < lines.length; n++) {
context.fillText(" " + lines[n], x, yCurrent);
yCurrent += lineHeight;
}
}