MindFusion.Diagramming for WinForms是一個(gè)能幫助你創(chuàng)建工作流和進(jìn)程圖表的.NET控件；數(shù)據(jù)庫(kù)實(shí)體關(guān)系圖表；組織圖表；對(duì)象層次和關(guān)系圖表；圖表和樹(shù)。它是基于對(duì)象－圖表框，表格和箭頭類型，將其歸類分派給其他并結(jié)合成復(fù)雜的結(jié)構(gòu)。該控件提供超過(guò)預(yù)先定義的50多種圖表框，如自定義設(shè)計(jì)樣式和對(duì)圖表框著色等。MindFusion.Diagramming for WinForms現(xiàn)已加入在線訂購(gòu)，Standard Single Developer版本原價(jià)2848現(xiàn)在搶購(gòu)立享優(yōu)惠只需2345，立即查看詳情>>

點(diǎn)擊下載MindFusion.Diagramming for WinForms最新試用版

在此博客文章中，我們將使用JavaScript地圖庫(kù)的CanvasLayer來(lái)構(gòu)建一個(gè)網(wǎng)頁(yè)，該網(wǎng)頁(yè)呈現(xiàn)由各公司快遞公司覆蓋的具有覆蓋區(qū)域的多邊形的城市地圖。每個(gè)區(qū)域都是不同顏色的單獨(dú)區(qū)域。這是最終結(jié)果：

I.常規(guī)設(shè)置

我們從一個(gè)空的網(wǎng)頁(yè)開(kāi)始，在其中添加對(duì)映射JavaScript文件和包含映射庫(kù)使用的Utility類的其他文件的引用：

<script src="Scripts/MindFusion.Common.js"
type="text/javascript"></script> <script
src="Scripts/jscommon.js" type="text/javascript"></script>
<script src="Scripts/jscollections.js"
type="text/javascript"></script> <script
src="Scripts/MindFusion.Mapping.js"
type="text/javascript"></script>

然后，我們需要?jiǎng)?chuàng)建一個(gè)具有ID的DIV。DIV元素是將在其中渲染地圖的位置，因此我們必須為其賦予我們希望地圖具有的位置和大小。如果網(wǎng)頁(yè)：

<div style="top: 70px; bottom: 24px;">
<div style="position: absolute; width: 100%; height:
100%;"> <div id="mapView" style="height: 100%; width: 100%;">
</div>
</div>
</div>

MindFusion映射庫(kù)創(chuàng)建的每個(gè)地圖均由MapView和MapLayer表示。該MapView類類需要一個(gè)HTML元素的引用，我們使用DIV，這是我們?cè)诰W(wǎng)頁(yè)中作為參數(shù)初始化。創(chuàng)建視圖后，我們可以通過(guò)為其分配給定主題來(lái)自定義其外觀。每個(gè)主題的名稱與存儲(chǔ)其設(shè)置的CSS文件的名稱相對(duì)應(yīng)。我們?cè)诘貓D中使用標(biāo)準(zhǔn)主題：

// create a new instance of the mapView
var view = new m.MapView(document.getElementById("mapView"));
view.theme = "standard";

var l = new m.MapLayer("Map");

l.urlTemplate = "http://d.tile.stamen.com/terrain/{z}/{x}/{y}.png";
l.attribution = 'Map tiles by Stamen
Design, under CC BY 3.0. Data
by OpenStreetMap, under ODbL.';
view.layers.add(l);

CanvasLayer是可容納多邊形或圓形附圖層。兩種類型的工程圖都支持填充和描邊，這是使多邊形變?yōu)榘胪该鞯姆绞健Ｔ诒＠臉?gòu)造要求與建設(shè)圖中的點(diǎn)列表。該圖可以閉合且光滑。在我們的情況下，我們需要一個(gè)封閉的圖形，但要關(guān)閉“平滑”選項(xiàng)。我們還可以選擇指定strokeThickness。請(qǐng)注意，厚度是以米為單位提供的，例如，它將隨著地圖的縮放比例而變化。這是帶有區(qū)域區(qū)域之一的點(diǎn)的示例列表：

//John Wilson
var points = [
    new m.LatLong(42.70475564699256, 23.31153304748534),
    new m.LatLong(42.70557559570199, 23.3120480316162),
    new m.LatLong(42.70488179365276, 23.32380683593749),
    new m.LatLong(42.69773045026787, 23.32174689941405),    
    new m.LatLong(42.699835727309186, 23.310202671813954)];

var drawings = new m.CanvasLayer("John Wilson");
view.layers.add(drawings);

// create a smooth polyline connecting the points
var poly = new m.Poly(points);
poly.stroke = "#4164BE";
poly.fill = "rgba(65, 100, 190, 0.4)";
// stroke thickness in meters
poly.strokeThickness = 2;
poly.strokeDashStyle = d.DashStyle.Solid;
poly.smooth = false;
poly.closed = true;
drawings.decorations.add(poly);

// set the topmost map layer
view.activeLayer = view.mapLayers.items()[0];

// load all layers
view.load(new m.LatLong(42.69743870212541, 23.3230343597412), 15);

關(guān)于JavaScript的MindFusion映射：映射庫(kù)是用純JavaScript編寫的，并支持豐富的API，用于創(chuàng)建和自定義任何類型的地圖。該組件需要圖塊地圖服務(wù)（TMS）作為地圖的提供程序。如果需要的話，有一個(gè)特殊的屬性可以記入TMS提供程序。

JavaScript映射支持無(wú)限數(shù)量的地圖層。這些圖層可以容納圖釘，標(biāo)簽，標(biāo)記，圖像圖標(biāo)，注釋或多邊形。它們可以打開(kāi)或關(guān)閉。地圖UI的外觀是通過(guò)主題指定的。每個(gè)地圖都支持縮放和平移。在//mindfusion.eu/javascript-map.html上找到有關(guān)JavaScript映射的更多信息。