MindFusion教程:JavaScript映射中的CanvasLaye

翻译|使用教程|编辑:杨鹏连|2021-03-09 11:56:18.793|阅读 39 次

概述:在此博客文章中,我们将使用JavaScript地图库的CanvasLayer来构建一个网页,该网页呈现由各公司快递公司覆盖的具有覆盖区域的多边形的城市地图。每个区域都是不同颜色的单独区域。

# 31款JAVA开发必备控件和工具 # 企业数字化建设合规无风险[专题]

MindFusion.Diagramming for WinForms是一个能帮助你创建工作流和进程图表的.NET控件;数据库实体关系图表;组织图表;对象层次和关系图表;图表和树。它是基于对象-图表框,表格和箭头类型,将其归类分派给其他并结合成复杂的结构。该控件提供超过预先定义的50多种图表框,如自定义设计样式和对图表框着色等。MindFusion.Diagramming for WinForms现已加入在线订购,Standard Single Developer版本原价2848现在抢购立享优惠只需2345,立即查看详情>>

点击下载MindFusion.Diagramming for WinForms最新试用版

在此博客文章中,我们将使用JavaScript地图库的CanvasLayer来构建一个网页,该网页呈现由各公司快递公司覆盖的具有覆盖区域的多边形的城市地图。每个区域都是不同颜色的单独区域。这是最终结果:

MindFusion地图控件中的画布层

I.常规设置

我们从一个空的网页开始,在其中添加对映射JavaScript文件和包含映射库使用的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>
在网页的HEAD部分中,我们添加了对映射库可用的CSS主题的引用:

然后,我们需要创建一个具有ID的DIV。DIV元素是将在其中渲染地图的位置,因此我们必须为其赋予我们希望地图具有的位置和大小。如果网页:

<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>
二.MapView和MapLayer

MindFusion映射库创建的每个地图均由MapView和MapLayer表示。该MapView类类需要一个HTML元素的引用,我们使用DIV,这是我们在网页中作为参数初始化。创建视图后,我们可以通过为其分配给定主题来自定义其外观。每个主题的名称与存储其设置的CSS文件的名称相对应。我们在地图中使用标准主题:

// create a new instance of the mapView
var view = new m.MapView(document.getElementById("mapView"));
view.theme = "standard";
地图图块由“图块映射服务”提供。TMS服务器有免费和付费两种选择。在我们的示例中,我们使用stamen.com提供的地图并相应地记入它们。该MapLayer有一个叫做特殊的属性归属所在的位置在地图的Tile提供的网址和信用,如果需要的话。

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实例

CanvasLayer是可容纳多边形或圆形附图层。两种类型的工程图都支持填充和描边,这是使多边形变为半透明的方式。在保利的构造要求与建设图中的点列表。该图可以闭合且光滑。在我们的情况下,我们需要一个封闭的图形,但要关闭“平滑”选项。我们还可以选择指定strokeThickness。请注意,厚度是以米为单位提供的,例如,它将随着地图的缩放比例而变化。这是带有区域区域之一的点的示例列表:

//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)];
然后,我们创建一个新的CanvasLayer并将其添加到MapView的layers
属性中:

var drawings = new m.CanvasLayer("John Wilson");
view.layers.add(drawings);
我们在构造函数中提供的图层名称将在地图图层图例中呈现:如果不将其关闭。然后,我们需要使用points数组创建Poly实例。定制后,我们需要将其添加到CanvasLayer的装饰集合中。重要的是要注意,工程图是装饰,而不是图层本身的直接部分。
// 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);
准备好之后,我们可以看到地形图上的多边形渲染。一旦完成CanvasLayer实例的初始化,就可以设置视图的活动层并指定在加载时将渲染的点。注意:只有在完成地图的所有其他初始化和自定义之后,才应指定页面加载时在中心渲染的点:

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

// load all layers
view.load(new m.LatLong(42.69743870212541, 23.3230343597412), 15);
可在MindFusion论坛上获得技术支持,网址为https://mindfusion.eu/Forum/YaBB.pl

关于JavaScript的MindFusion映射:映射库是用纯JavaScript编写的,并支持丰富的API,用于创建和自定义任何类型的地图。该组件需要图块地图服务(TMS)作为地图的提供程序。如果需要的话,有一个特殊的属性可以记入TMS提供程序。

JavaScript映射支持无限数量的地图层。这些图层可以容纳图钉,标签,标记,图像图标,注释或多边形。它们可以打开或关闭。地图UI的外观是通过主题指定的。每个地图都支持缩放和平移。在https://mindfusion.eu/javascript-map.html上找到有关JavaScript映射的更多信息。


想要购买该产品正版授权请点击【商城购买】,想了解更多产品信息请点击【咨询在线客服】


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至hey@evget.com

文章转载自:MindFusion

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关产品
MindFusion.Reporting for WinForms

原生的Windows Forms编程组件,可为任何.NET应用程序提供专业的报表功能

MindFusion.Diagramming for WinForms

FlowChart.NET是一款能够帮助你轻松创建流程图和示意图的.NET控件,可以自定义设计样式和图表框颜色。

title
title
在线咨询
联系我们
TOP
在线客服系统
live chat