@abovesurveying/leaflet-measure 中文文档教程

Question

leaflet-measure

Leaflet 地图的坐标、线性和面积测量控件。 扩展 L.Control。

---

Demo

---

Usage

待办事项。 添加用法

Add control to a Leaflet map

leaflet-measure 添加 L.Control.Measure。 此控件可以与标准 Leaflet 控件工作流一起使用在 Leaflet 文档中描述。

测量控件可以直接实例化并添加到地图中：

var myMap = L.map('mapElementId', options);
var measureControl = new L.Control.Measure(options);
measureControl.addTo(myMap);

或通过工厂实例化：

var myMap = L.map('mapElementId', options);
var measureControl = L.control.measure(options);
measureControl.addTo(myMap);

或使用地图选项添加到地图中：

var myMap = L.map('mapElementId', {
  measureControl: true
});

---

Control options

position

{ position: 'topright' }

标准 Leaflet 控件 位置选项

primaryLengthUnit | secondaryLengthUnit

{ primaryLengthUnit: 'feet', secondaryLengthUnit: 'miles' }

用于显示长度结果的单位。 secondaryLengthUnit 是可选的。

有效值为 feet、meters、miles 和 km

primaryAreaUnit | secondaryAreaUnit

{ primaryAreaUnit: 'acres', secondaryAreaUnit : undefined

用于显示面积结果的单位。 secondaryAreaUnit 是可选的。

有效值为 acres、hectares、sqfeet、sqmeters 和 sqmiles

activeColor

{ activeColor: '#ABE67E' }

用于主动执行测量时渲染的地图特征的基色。 值应该是表示为十六进制字符串的颜色。

completedColor

{ completedColor: '#C8F2BE' }

用于完成测量生成的特征的基色。 值应该是表示为十六进制字符串的颜色。

popupOptions

popupOptions: { className: 'leaflet-measure-resultpopup', autoPanPadding: [10, 10] }

选项应用于生成的度量特征的弹出窗口。 属性可以是任何标准的 Leaflet 弹出选项。

units

可用于测量计算器的自定义单位。 打包的长度单位是英尺、米、英里和公里，英亩 、公顷、sqfeet、sqmeters 和 sqmiles 表示面积。 使用此选项可以将其他单元定义添加到打包单元中。

将单位定义为

{
  someNewUnit: {
    factor: 0.001, // Required. Factor to apply when converting to this unit. Length in meters or area in sq meters will be multiplied by this factor.
    display: 'My New Unit', // Required. How to display in results, like.. "300 Meters (0.3 My New Unit)".
    decimals: 2 // Number of decimals to round results when using this unit. `0` is the default value if not specified.
  },
  myOtherNewUnit: {
    factor: 1234,
    display: 'My Other Unit',
    decimals: 0
  }
}

captureZIndex

{ captureZIndex: 10000 }

用于捕获测量点击的标记的 Z 索引。 将此值设置为高于所有其他地图图层的 z-index 以在测量处于活动状态时禁用其他图层上的点击事件。

decPoint | thousandsSep

{ decPoint: '.', thousandsSep: ',' }

显示测量值时使用的小数点和千位分隔符。 如果未指定，则值由本地化定义。

---

Events

您可以使用 these methods

measurestart

当测量开始时

measurefinish

触发当测量完成并产生测量结果时触发。 结果数据包括：

• area：以平方米为单位的多边形测量面积。 0 表示少于 3 个点的测量值。

• areaDisplay：区域格式显示在弹出窗口中。

• lastCoord：以十进制度和 degress/min/seconds 为单位单击的最后一个点。

• length：以米为单位的测量长度。 0 表示少于 2 个点的测量值。

• lengthDisplay：在弹出窗口中显示格式化的长度。

• pointCount：用户直接添加的点数。

• points：LatLng 点数组，用于计算测量值. 数组中的项目数可能与 pointCoint 不同，因为在多边形测量期间会添加一个额外的点来闭合多边形。

---

Customizing map feature styles

可以使用 CSS SVG 样式属性设置地图要素的样式。 leaflet-measure 测量生成的特征具有以下类名：

• layer-measurearea：活动测量的特征显示区域

• layer-measureboundary：显示活动测量的线性路径的特征

• layer-measurevertex：在活动测量的每个顶点（测量点击）处添加的特征

• layer-measuredrag：在移动过程中跟随光标的符号主动测量

• layer-measure-resultarea：作为区域（3 个以上点）测量结果的永久图层添加到地图的要素

• layer-measure-resultline：添加的要素作为由线性（2 点）测量

• 产生的永久层添加到地图 layer-measure-resultpoint：作为由点（单击）测量产生的永久层将特色添加到地图

---

Development

构建过程使用 Node.js 自带的 npm（节点包管理）。

安装 Node.js 后，您可以执行 npm install 来安装依赖项，并执行 npm run-script start:dev 来为传单初始化本地服务器 (localhost:8080)衡量资产。

它检测源文件的修改并重新编译为 /leaflet-measure.css 和 /leaflet-measure.js。

Distribuition Build

安装 npm 后执行 npm install 安装依赖项和 npm run-script build 生成 dist/leaflet-measure.css 和 dist/leaflet-measure.js。

它还将为每个可用的本地化生成 dist/leaflet-measure.{locale}.js 文件。

Internationalization

去做。 国际化