机械制图国家标准的绘图模板_JS制图：映射

悠悠 2023-02-22 03:37 23阅读 0赞

机械制图国家标准的绘图模板

[JS Charting][] comes integrated with geographic mapping support, including optimized data files for all country, province and state maps without the need of a separate product or add-on. What's more interesting is that the API for mapping is the same as that used for regular charts, enabling users to leverage the existing experience to create new map charts quickly and easily. In this tutorial, we will set up a multi-step thematic map bound to real-world data from a live source.

[JS Charting][]与地理地图支持集成在一起，包括针对所有国家，省和州地图的优化数据文件，而无需单独的产品或附加组件。 更有趣的是，用于映射的API与用于常规图表的API相同，从而使用户能够利用现有的经验快速轻松地创建新的地图。 在本教程中，我们将建立一个多步骤的专题图，该专题图绑定到实时源中的真实数据。

See the Pen  by Arthur Puszynski ([@jsblog][jsblog]) on [CodePen][].

看笔  由Arthur Puszynski( [@jsblog][jsblog] )在[CodePen][]上[编写][CodePen] 。

To enable charting in the page, jQuery and the JSCharting scripts are added.

为了在页面中启用图表，添加了jQuery和JSCharting脚本。

Then a div element is placed in HTML to host the chart visual.

然后，将div元素放置在HTML中，以托管图表外观。

To draw a chart the jquery plugin API can be used to bind chart options to a the div and takes the following form:

要绘制图表，可以使用jquery插件API将图表选项绑定到div并采用以下形式：

$('#mainChart').JSC({/*chart options*/});

## 基础 **(**The Basics**)** ##

In traditional mapping, the concept of map layers are used to construct maps and JSCharting is similar, however, regular series and points are used for this purpose. Chart series are equivalent to map layers and points represent the shapes within those layers. To render a map layer of the United States the chart options define the type of chart as map, and a series with a map code:

在传统制图中，使用地图图层的概念来构造地图，并且JSCharting与此类似，但是为此使用了常规的序列和点。 图表系列等效于地图图层，点表示这些图层内的形状。 要呈现美国的地图图层，图表选项将图表的类型定义为地图，以及一系列包含地图代码的代码：

{ 
        type:'map',
        series:[{
            map:'us'
        }]
    }

For a reference of the included map areas, see the [interactive mapping browser][].

有关所包含地图区域的参考，请参见[交互式地图浏览器][interactive mapping browser] 。

Because a series is used, the points of the series become states within the US map. Alternatively, if we only wanted the outline of the US, we would add a series with a point map property set to US.

因为使用了序列，所以序列的点成为美国地图内的州。 另外，如果我们只想要美国的轮廓，则可以添加一个将点地图属性设置为美国的系列。

{ 
        type:'map',
        series:[{
            points:[{
                map:'us'
            }]
        }]
    }

Returning to the first example, where we use a series of the United States, points are generated internally. In order to customize the individual map layer shapes of a series, points can be specified for each state and their properties will be used instead of the auto generated points. For example:

回到第一个例子，我们使用一系列美国，点是在内部生成的。 为了自定义系列的各个地图图层形状，可以为每个状态指定点，并且将使用其属性代替自动生成的点。 例如：

{ 
        type:'map',
        series:[{
            map:'us',
            points:[{
                map:'us.il',
                color:'red'
            }]
        }]
    }

See the Pen  by Arthur Puszynski ([@jsblog][jsblog]) on [CodePen][].

看笔  由Arthur Puszynski( [@jsblog][jsblog] )在[CodePen][]上[编写][CodePen] 。

## 地图上下文 **(**Map Context**)** ##

Another useful mapping concept in JSCharting is base layers. These layers are used to show continuation of landmasses when the surrounding areas of the Map are not part of the data series. For example, when showing a map of the US, we can optionally add Mexico and Canada as context layers. These layers do not affect the view bounds of the map and appear grayed out so visual focus remains on the landmass of primary interest.

JSCharting中另一个有用的映射概念是基础层。 当地图的周围区域不是数据系列的一部分时，这些图层用于显示陆块的延续。 例如，当显示美国地图时，我们可以选择将墨西哥和加拿大添加为上下文图层。 这些图层不会影响地图的视图范围，而是显示为灰色，因此视觉焦点仍停留在主要关注的陆地上。

{
        mappingBaseLayers:'mx,ca'
    }

For more examples of map related features, see the [ js map features gallery ][js map features gallery]

有关与地图相关的功能的更多示例，请参见[js地图功能库][js map features gallery]

## 绑定数据 **(**Binding to data**)** ##

Now that we have the basics covered, let's bind maps to real-world data. For this, we will use the following dataset pulled from a live google sheets document so the map data will always reflect the new data and edits made on the sheet in real-time.

现在我们已经涵盖了基础知识，让我们将地图绑定到实际数据。 为此，我们将使用以下数据集，这些数据集是从实时Google表格文档中提取的，因此地图数据将始终实时反映新数据和在表格上进行的实时编辑。

A utility function will convert the spreadsheet JSON data into a series of points. The data feed contains an array of rows with state abbreviations and a value for each state. These rows are mapped to points and passed on to the chart.

实用程序功能会将电子表格JSON数据转换为一系列点。 数据Feed包含一个行数组，每个行带有状态缩写和每个状态的值。 这些行映射到点并传递到图表。

**Note:** When identifying states, the HASC code syntax such as ‘us.il’ is used to specify Illinois. However, FIPS is also supported (where applicable) and the equivalent code for Illinois would be written as ‘us.fips:US17’. For a complete reference of map codes for all world countries, see this [this reference][]

**注意：**标识状态时，使用HASC代码语法(例如“ us.il”)指定伊利诺伊州。 但是，也支持FIPS(如果适用)，并且伊利诺伊州的等效代码将写为“ us.fips：US17”。 有关世界所有国家/地区的地图代码的完整参考，请参阅[此参考][this reference]

This associates the state codes to point map properties and the value to the Z value property. We don't use Y values here, which are commonly used by most chart types, because Y values represent the Latitude coordinates in maps. Z values can be thought of as magnitude.

这会将状态代码关联到点图属性，并将值关联到Z值属性。 我们这里不使用大多数图表类型常用的Y值，因为Y值表示地图中的纬度坐标。 Z值可以视为幅度。

The data is now loaded for the chart; however, this chart does not yet visualize the Z values on this map. We will use a feature named smartPalettes to bind the point Z values to a color scale in order to visualize the Z values by color coding them.

现在已为图表加载了数据； 但是，此图表尚未在此地图上可视化Z值。 我们将使用名为smartPalettes的功能将点Z值绑定到色标，以便通过对Z值进行颜色编码来可视化它们。

palette:{
        pointValue:'{%zValue}',
        colors:['green','yellow','red']
    }

First we specify the value we will bind to the palette through the pointValue property. This can be bound to any point level token in addition to expressions that evaluate mathematical formulas dynamically. Next, we specify a set of colors that will apply to the range of values available for each point, based on its value.

首先，我们指定要通过pointValue属性绑定到调色板的值。 除了可以动态评估数学公式的表达式外，它还可以绑定到任何点级标记。 接下来，我们基于其值指定一组颜色，这些颜色将应用于每个点的可用值范围。

Now this map visualizes the data bound to the point z values:

现在，此地图显示了绑定到点z值的数据：

See the Pen  by Arthur Puszynski ([@jsblog][jsblog]) on [CodePen][].

看笔  由Arthur Puszynski( [@jsblog][jsblog] )在[CodePen][]上[编写][CodePen] 。

## SmartPalettes **(**SmartPalettes**)** ##

Let's delve a little deeper into palettes and explore some of the additional options. When we specify an array of colors, they are rendered in order on the scale with equal allocations; for more control of color placement, we can use the stops property as shown in Palette 1 below. Color stops define the exact positions for each color on a range of 0 to 1 in place of the default.

让我们更深入地研究调色板并探索一些其他选项。 当我们指定一个颜色数组时，它们会按比例分配相等的比例在比例尺上渲染； 为了更好地控制颜色位置，我们可以使用Stops属性，如下面的调色板1所示。 色标在0到1的范围内定义每种颜色的准确位置，以代替默认位置。

See the Pen  by Arthur Puszynski ([@jsblog][jsblog]) on [CodePen][].

看笔  由Arthur Puszynski( [@jsblog][jsblog] )在[CodePen][]上[编写][CodePen] 。

Color stops are defined with a position on the scale between 0-1. This is similar to conventional gradient fill color stops. And conventionally, if we wanted this range to remain green between 0 and .5, then fade to yellow as it approaches 1, an additional color stop would be required. SmartPalettes have a color snapping feature that allows this to be applied more easily and without additional color stops. In the Palette 2 example, we will indicate that the green color should snap to half of the range between it and the next stop.

色标的定义范围是0-1。 这类似于常规的渐变填充色标。 通常，如果我们希望该范围保持在0到.5之间的绿色，然后在接近1时逐渐变为黄色，则需要附加的色标。 SmartPalettes具有颜色捕捉功能，可以更轻松地应用此功能，而无需其他颜色停止。 在调色板2的示例中，我们将指示绿色应捕捉到其与下一档之间范围的一半。

If we wanted the yellow color to remain solid from .5 to 1 instead, the Palette 3 configuration could be used.

如果我们希望黄色在0.5到1之间保持不变，则可以使用调色板3配置。

Here, the setting indicates that green should start transitioning immediately at 0 (default) and end the transition at .5.

在此，该设置指示绿色应立即从0(默认值)开始过渡，并在0.5处结束过渡。

We tie all this together in Palette 4, where we will use a more complex case with two colors, while having them remain mostly solid except for a small portion in the middle where the colors transition seamlessly.

我们在调色板4中将所有这些联系在一起，在这里我们将使用两种颜色的更复杂的盒子，同时使它们大部分保持稳定，除了中间的一小部分颜色可以无缝过渡。

**Note:** A set of predefined color scales is available in this [smart palette gallery sample][]

**注意：**此[智能调色板库样本中][smart palette gallery sample]提供了一组预定义的色标

This approach is used very effectively on the [US election map][] example where the colors snap to either red or blue, but in states that were close, intermediary colour variations are still rendered.

在[美国选举地图][US election map]示例中，该方法可以非常有效地使用该示例，在该示例中，颜色会变为红色或蓝色，但是在相近的状态下，仍会呈现中间颜色变化。

## 结论 **(**Conclusion**)** ##

In this article we have started to scratch the surface of mapping with JSCharting. The map related API is very intuitive and makes it easy to get started quickly. The built-in map data set allows you to immediately create map charts without having to learn or be aware of map data format standards; however, advanced users are also able to load custom geoJSON and topoJSON files as needed. Despite the simplicity of the API, the mapping component is designed with developer convenience at its core.

在本文中，我们开始使用JSCharting从头开始进行映射。 与地图相关的API非常直观，可以轻松快速上手。 内置的地图数据集使您可以立即创建地图，而无需学习或了解地图数据格式标准。 但是，高级用户也可以根据需要加载自定义的geoJSON和topoJSON文件。 尽管API很简单，但映射组件的设计核心是为开发人员提供便利。

> 翻译自: [https://davidwalsh.name/js-charting-mapping][https_davidwalsh.name_js-charting-mapping]

机械制图国家标准的绘图模板

[JS Charting]: http://jscharting.com/
[jsblog]: http://codepen.io/jsblog
[CodePen]: http://codepen.io
[interactive mapping browser]: http://jscharting.com/Samples/Javascript_MapDataBrowser_Chart.htm
[js map features gallery]: http://jscharting.com/JS_Mapping_Chart_Features.htm
[this reference]: http://jscharting.com/documentation/#node=Home.Tutorials.Mapping.mapList
[smart palette gallery sample]: http://jscharting.com/Samples/Javascript_SmartPaletteGallery_Chart.htm
[US election map]: http://jscharting.com/Samples/Javascript_MapUSElectionThematic_Chart.htm
[https_davidwalsh.name_js-charting-mapping]: https://davidwalsh.name/js-charting-mapping