-1143000中国移动集中化GIS平台JSAPI接口协议 中国移动集中化GIS平台JSAPI接口协议 地图JS API是一套用JavaScript 语言编写的应用程序接口（下文简称JSAPI），您可以通过各种API接口向地图添加内容、进行数据搜索计算，创建功能丰富、交互性强的地图应用。JS API提供了地图展现、地图描画等丰富的插件功能。 本文档适用于熟悉JavaScript 编程和了解面向对象概念的读者。此外，读者还应该对地图产品有一定的了解。 JSAPI部署在GIS服务上，通过在HTML页面中调用。在页面添加 JS API 的入口脚本标签，并将其中「您的服务地址」替换为部署JSAPI引擎的部署地址。 #container {width:300px; height: 180px; } 添加div标签作为地图容器，同时为该div指定id属性； 为地图容器指定高度、宽度； 介绍地图展示、地图事件、地图坐标、地图控件接口开发参考。 地图展示 地图对象类，封装了地图的属性设置、图层变更、事件交互等接口的类。 cmmapgl.Map(container:String/HTMLDivElement, opts:MapOptions) 构造一个地图对象，参数container中传入地图容器DIV的ID值或者DIV对象，opts地图初始化参数对象，参数详情参看MapOptions列表。 MapOptions cmmap GL JS进行地图渲染的HTML元素，或该元素的字符id。该指定元素不能有子元素。 container HYPERLINK "https://developer.mozilla.org/docs/Web/HTML/Element" HTMLElement / HYPERLINK "https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" string 地图最小缩放级别（0-24）默认2； 地图显示的缩放级别，地图初始化时的层级。如果构造函数的参数中没有设置zoom cmmap GL JS会在地图样式中进行查找。如果样式中也没定义的话，那么它将默认为2。 地图中心点坐标值。如果构造函数的参数中没有设置center，cmmap GL JS 会在地图样式中进行查找。如果样式中也没定义的话，那么它将默认为[0, 0]。注: 为了与GeoJSON 保持一致，cmmap GL采用经度、纬度的顺序(而不是纬度，经度)。 地图最大缩放级别（0-24）默认18； 地图最小倾斜角度 （0-85）默认0； 地图最大倾斜角度（0-85）默认85； 地图的 cmmap 配置样式。它必须是一个符合 HYPERLINK "https://mapbox.com/mapbox-gl-style-spec/" cmmap样式规范的 JSON 对象，或者是一个指向该JSON的URL地址。 HYPERLINK "https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" Object /String 关于矢量切片样式优化的内容，请查阅相关MVT规范定义 HYPERLINK "https://www.mapbox.com/api-documentation/maps/" \l "retrieve-tiles" 文档. 如果为true，地图的位置 (包括缩放层级、中心纬度、中心经度、方位角和倾角) 将会与页面URL的哈希片段同步。例如，http://path/to/my/page.html#2.59/39.26/53.07/-24.1/60 如果为false，地图将不会绑定对鼠标、触碰、键盘的监听，因此地图将不会响应任何用户交互。 定义何时地图的方位将自动对齐到正北方向的阈值（以度为单位）。例如，当bearingSnap为7时，如果用户将地图转动到正北方向7度以内的范围时，地图将自动恢复对齐到正北方向。 如果为false，将不会在"拖拽进行地图旋转"的同时控制地图的倾斜。 当用户点击地图时鼠标移动的最大像素范围，点击地图后鼠标在此像素范围内移动则被认为是一次有效的点击(不是拖拽)。 如果为true， HYPERLINK "http://www.mapbox.cn/mapbox-gl-js/api/" \l "attributioncontrol" AttributionControl将会被添加到地图上。 HYPERLINK "https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" String / HYPERLINK "https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array" Array 在 HYPERLINK "http://www.mapbox.cn/mapbox-gl-js/api/" \l "attributioncontrol" AttributionControl中显示的字符串或字符串数组。仅当options.attributionControl为true时生效。 如果为true，当cmmap GL JS 的性能远远低于预期的时候，地图将创建失败。(此时可能是用的软件渲染器)。 如果为true，地图画布可通过map.getCanvas().toDataURL()输出PNG。出于性能优化考虑，该值默认为false。 如果为true，gl渲染环境在创建时将开启多重采样抗锯齿模式（MSAA）,这对自定义图层的抗锯齿十分有效。出于性能优化考虑，该值默认为false。 如果为false，一旦切片的HTTP cacheControl/expires headers过期，地图将不会重新请求这些切片。 地图最大边界范围，用与设置底图显示的最大范围，v1、v2、v3形式均可（顺序左下，右上两个点位）。 const v1 = new cmmapgl.LngLatBounds( new cmmapgl.LngLat(112.9876, 40.7661), new cmmapgl.LngLat(113.9397, 40.8002) const v2 = new cmmapgl.LngLatBounds([112.9876, 40.7661], [113.9397, 40.8002]); 如果为true，将启用"滚轮缩放地图"交互模式。如果传值为Object对象，对象可选参数参考 HYPERLINK "http://www.mapbox.cn/mapbox-gl-js/api/" \l "scrollzoomhandlerenable" ScrollZoomHandler#enable。 如果为true, 将启用"框选缩放地图"交互模式(查阅 HYPERLINK "http://www.mapbox.cn/mapbox-gl-js/api/" \l "boxzoomhandler" BoxZoomHandler)。 如果为true, 将启用"拖拽旋转地图"交互模式(查阅  HYPERLINK "http://www.mapbox.cn/mapbox-gl-js/api/" \l "dragrotatehandler" DragRotateHandler)。 如果为true, 将启用"拖拽移动地图"交互模式(查阅 HYPERLINK "http://www.mapbox.cn/mapbox-gl-js/api/" \l "dragpanhandler" DragPanHandler)。 如果为true，将启用键盘快捷键功能(查阅 HYPERLINK "http://www.mapbox.cn/mapbox-gl-js/api/" \l "keyboardhandler" KeyboardHandler)。 如果为true，将启用"双击缩放地图"交互模式(查阅 HYPERLINK "http://www.mapbox.cn/mapbox-gl-js/api/" \l "doubleclickzoomhandler" DoubleClickZoomHandler)。 如果为true，将启用"旋转、缩放"交互模式。如果传值为Object对象，对象可选参数参考 HYPERLINK "http://www.mapbox.cn/mapbox-gl-js/api/" \l "touchzoomrotatehandlerenable" TouchZoomRotateHandler#enable。 如果为true，则启用“倾斜度”交互模式。对象可选参数参考 HYPERLINK "https://docs.mapbox.com/mapbox-gl-js/api/handlers/" \l "touchpitchhandler#enable" TouchPitchHandler 。 如果为true，地图将自适应窗口大小变化。 地图初始化时的方位角（旋转角度），以正北方的逆时针转动度数计量。如果构造函数的参数中没有设置bearing，cmmap GL JS会在地图样式中进行查找。如果样式中也没定义的话，那么它将默认为0。 地图初始化时的倾角，按偏离屏幕水平面的度数计量（0-60）。如果构造函数的参数中没有设置pitch，cmmap GL JS会在地图样式中进行查找。如果样式中也没定义的话，那么它将默认为0。 HYPERLINK "http://www.mapbox.cn/mapbox-gl-js/api/" \l "lnglatboundslike" LngLatBoundsLike 地图初始化时的限制范围。如果设置了bounds将会覆盖掉center和zoom在构造函数中的参数设置。 HYPERLINK "http://www.mapbox.cn/mapbox-gl-js/api/" \l "map#fitbounds" fitBounds仅用于初始化地图时自适应设置的bounds范围时的情况。 如果启用了terrain，且属性设置为true，则将优先渲染地图，这可能会导致图层重新排序，从而最大化性能（将首先绘制覆盖在地形上的图层，包括填充、线条、背景、山体阴影和栅格）。否则，如果设置为false，则将始终根据图层顺序优先级绘制地图。 如果为true，地图缩小时将渲染多个全局地图的副本。 HYPERLINK "https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" String 定义一个用于在本地替代通用‘中日韩越统一表意文字’、’平假名’、‘片假名’和‘朝鲜文音节’字形的CSS字体系列。在上述字体在地图样式中的设置，除字体粗细（light/regular/medium/bold）外，都将被忽略。当设置为false，上述字体则使用地图样式中的设置。 该参数的目的是为了避免超带宽的字形请求。（查阅 HYPERLINK "https://www.mapbox.com/mapbox-gl-js/example/local-ideographs" Use locally generated ideographs） 定义一个CSS字体系列，以覆盖本地所有字形。除了字体粗细关键字（浅/常规/中/粗体）外，地图字体样式中的字体设置将被忽略。如果设置该属性，则此选项将覆盖localIdeographFontFamily中的设置。 地图发送外部URL请求前执行的回调函数。回调函数中可修改URL、设置请求头或设置跨源请求的相关身份凭证。回调返回的对象参数包含url属性和可选的headers以及credentials属性。 如果为true，那么将为GeoJSON和Vector Tile web workers发出的请求搜集资源耗时API信息（通常无法从 Javascript 主线程中访问此信息）。该信息将在resourceTiming属性中返回（对应于data事件）。 控制标注冲突时，淡入淡出的动画过渡时间, 单位为毫秒。该设置将应用于所有symbol图层。对于运行时的样式变化和栅格切片的淡入淡出，此设置不生效。 accessToken 设置之后，地图将用此token替换掉在cmmapgl.accessToken中设置的值。 获取当前地图缩放级别。 获取地图样式中指定ID的图层。 获取地图中心点经纬度坐标值。 getContainer( ) 获取地图对象的容器 HYPERLINK "https://docs.mapbox.com/mapbox-gl-js/api/geography/" \l "lnglatbounds" LngLatBounds 获取当前地图视图范围，及地理边界。 添加控件到地图中。control参见3.3地图控件，position位置参数如下：'top-left','top-right','bottom-left','bottom-right','top-right' 添加图片到地图中 添加图层到地图中 添加数据源到地图中 判断地图视口中所有数据源的瓦片是否加载完成 HYPERLINK "http://www.mapbox.cn/mapbox-gl-js/api/" \l "cameraoptions" CameraOptions / void 如果地图可以适应到给定的边界，返回 CameraOptions以及center、zoom和bearing。否则方法会出现警告个返回 undefined。 使用动态转换，将中心点、缩放级别、方位角和倾斜度组合的原有数值改为新数值。地图将保留options没有指定的当前值。 获取最佳地图视野，在指定的地理边界内平移和缩放地图，以包含其可见区域。当地图方位角不为0的时候，该函数会将方位角重置为0。 一旦地图旋转到指定方位角，就平移、旋转与缩放地图到由点p0与p1确定的限位框。在不旋转下缩放，只需传入当前地图的方位角。 对地图中心、缩放级别、方位角和倾斜度做任意组合改变，使其沿着一条曲线动态地变化并引发飞行效果。该动态转换能够无缝引入缩放和平移，使用户即使在穿越了很长的距离后也能保持方位角不变。 获取地图当前的方位角（旋转度）。 获取地图的元素。 getCanvasContainer( ) 获取包含地图标签的HTML元素。 HYPERLINK "https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array" Array 获取应用于指定样式图层的筛选器。 HYPERLINK "https://docs.mapbox.com/mapbox-gl-js/api/properties/" \l "freecameraoptions" FreeCameraOptions 获取指定样式图层中布局属性的值。 HYPERLINK "https://docs.mapbox.com/mapbox-gl-js/api/geography/" \l "lnglatbounds" LngLatBounds |/null 获取地图限制的最大地理边界，如果没有设置，则返回null。 用动画将地图平移到指定的位置。 按指定偏移值平移地图。 HYPERLINK "https://docs.mapbox.com/mapbox-gl-js/api/properties/" \l "paddingoptions" PaddingOptions 获取当前地图视口内边距 获取指定样式图层中paint属性的值。 获取地图倾斜度 获取地图样式中指定ID的数据源。 获取地图的cmmap样式对象，它能被用于重建地图样式。 判断控件是否在地图上 判断地图是否由于摄像机动画或用户手势而平移、缩放、旋转或俯仰。 判断地图是否由于摄像机动画或用户手势而旋转。 判断地图样式是否完全加载。 判断地图是否因摄像机动画或用户手势而缩放。 不用动态转换的情况下改变中心点、缩放级别、方位角和倾斜度的任意组合。地图将保留options没有指定的当前值。 HYPERLINK "https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array" Array HYPERLINK "https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" string> 获取当前地图中能够获取的所有sprites/图像的名称 判断地图是否载入完毕 使用Map#addImage从外部URL载入图像。外部域必须支持 HYPERLINK "https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS" CORS。 将图层移动到另一个z轴位置。 移除指定图层的监听器。 为图层事件添加监听器。 为图层事件添加一个只会触发一次的监听器。 point 将经纬度坐标转换为平面地图容器坐标。 unproject（point） 将地图容器坐标转换为地图经纬度坐标。 HYPERLINK "https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array" Array HYPERLINK "https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" Object> 清理并释放和地图相关的所有内部数据源。 从地图移除控件 移除图层 获得并设置一个布尔值，用于指示地图是否将继续再渲染。该信息有助于分析效果。 以动态转换的方式将地图旋转到0度方位角（正北方）。 以动态转换的方式将地图旋转到0度方位角（正北方）和0度倾斜角。 根据其container元素的尺寸调整地图的大小。 以动态转换的方式将地图旋转到指定方位角。方位角是指南针方向的指向，例如地图方位角为 90°对应正东指向 使用滚轮或触控板实现地图放大和缩小。 设置地图的方位角（旋转度） 设置图层筛选器。 设置图层的缩放范围。 设置图层中布局属性的值。 设置或清除地图的地理边界。 设置或清除地图的最大倾斜度。 设置或清除地图的最小倾斜度。 设置或清除地图的最大缩放等级。如果地图现在的缩放等级高于新的最大值，则地图将缩放到新的最大值。 设置或清除地图的最小缩放等级。如果地图现在的缩放等级低于新的最小值，地图将缩放到新的最小值。 设置指定样式图层中 paint 属性的值。 设置地图倾斜度 设置更新地图样式。 设置地图缩放级别。 获取并设置一个布尔值，指示地图是否会渲染数据源中所有符号周围的框，以及哪些符号已经被渲染，哪些因为冲突而被隐藏。这些信息有助于查错。 获取并设置一个布尔值，该值指示地图是否将内边距偏移量可视化。 获取并设置一个布尔值，该值指示地图是否将在显示的地形顶部渲染线框。对于调试很有用。 获取并设置一个布尔值，用以表示地图是否会渲染切片边界。这些切片边界有助于查错。 允许使用触摸手势来倾斜地图 允许用户使用触摸手势缩放或旋转地图 触发单个帧的渲染，在自定义图层上使用此方法可以在图层更改时重新绘制地图。 cmmap GL JS版本 以动态转换的方式将地图缩放到指定级别。 地图放大一级显示 地图缩小一级显示 鼠标或触摸手势拖拽地图 鼠标右键或按住Ctrl键拖动时旋转地图 键盘快捷键缩放、旋转和平移地图 地图事件 支撑图层绑定 鼠标在地图点击并释放时触发。 var map = new cmmapgl.Map({ // map options }); map.on('click', function(e) { 点击鼠标右键或点开地图上的快捷菜单时触发。 地图数据加载或改变时启动。 任意地图数据（样式、数据源、切片等）开始异步加载或改变时触发。 鼠标双击地图同一点时触发。 在渲染完地图最后一帧并进入“空闲(idle)”状态之后触发 在所有必要数据源下载完毕、且首个可见的地图渲染完毕后立即触发。 鼠标移入地图容器内时触发。 鼠标移出地图容器时触发。 鼠标在地图上单击抬起时触发。 鼠标在地图上单击按下时触发。 鼠标从某一图层外部或地图容器外部进入该图层的可见部分时触发 鼠标离开指定图层的可见部分或离开地图画布时触发。 鼠标在地图中移动时触发。 在用户交互或 HYPERLINK "http://www.mapbox.cn/mapbox-gl-js/api/" \l "mapflyto" Map#flyTo等方法引发视图动态转换期间重复触发 在用户交互或 HYPERLINK "http://www.mapbox.cn/mapbox-gl-js/api/" \l "mapjumpto" Map#jumpTo等方法使地图开始从一个视图转换到另一个视图之前触发。 在用户交互或 HYPERLINK "http://www.mapbox.cn/mapbox-gl-js/api/" \l "mapjumpto" Map#jumpTo等方法的作用下，地图完成从一个视图到另一个视图的转换后触发。 在用户交互或 HYPERLINK "http://www.mapbox.cn/mapbox-gl-js/api/" \l "mapflyto" Map#flyTo等方法使地图倾斜角改变时触发。 在用户交互或 HYPERLINK "http://www.mapbox.cn/mapbox-gl-js/api/" \l "mapflyto" Map#flyTo等方法使地图倾斜角改变开始时触发。 在用户交互或 HYPERLINK "http://www.mapbox.cn/mapbox-gl-js/api/" \l "mapflyto" Map#flyTo等方法使地图的倾斜角改变结束之后立即触发。 地图被移除后触发。 当地图由于以下操作被绘制到屏幕上时触发 1.改变地图位置、缩放级别、倾斜度和方位角 2.改变地图样式 3.改变 GeoJSON 数据源 4.载入矢量切片、GeoJSON 文件、glyph 或 sprite 调整地图大小后触发。 加载或改变地图数据源时触发，包括加载或改变属于该数据源的一个切片的情况。 当一个地图数据源开始异步加载或改变时触发。所有sourcedataloading事件后都跟有一个sourcedata或error事件。 地图样式加载或改变时启动。 地图样式开始异步加载或改变时触发。 当事件 HYPERLINK "https://developer.mozilla.org/en-US/docs/Web/Events/touchcancel" touchcancel在地图中触发时启动。 当事件 HYPERLINK "https://developer.mozilla.org/en-US/docs/Web/Events/touchend" touchend在地图中触发时启动。 当事件 HYPERLINK "https://developer.mozilla.org/en-US/docs/Web/Events/touchstart" touchstart在地图中触发时启动。 当事件 HYPERLINK "https://developer.mozilla.org/en-US/docs/Web/Events/touchmove" touchmove在地图中触发时启动。 当事件 HYPERLINK "https://developer.mozilla.org/en-US/docs/Web/Events/wheel" wheel在地图中触发时启动。 在用户交互或 HYPERLINK "http://www.mapbox.cn/mapbox-gl-js/api/" \l "mapflyto" Map#flyTo等方法引发缩放级别动态转换时重复触发。 在用户交互或 HYPERLINK "http://www.mapbox.cn/mapbox-gl-js/api/" \l "mapflyto" Map#flyTo等方法引发缩放级别转换之前触发。 在用户交互或 HYPERLINK "http://www.mapbox.cn/mapbox-gl-js/api/" \l "mapflyto" Map#flyTo等方法使地图完成缩放级别转换之后触发。 地图控件 导航控件 HYPERLINK "http://www.mapbox.cn/mapbox-gl-js/api/" \l "navigationcontrol" NavigationControl new NavigationControl(options: HYPERLINK "https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" Object?) var nav = new cmmapgl.NavigationControl(); map.addControl(nav, 'top-left'); HYPERLINK "https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean" Boolean 比例尺控件 HYPERLINK "http://www.mapbox.cn/mapbox-gl-js/api/" \l "scalecontrol" ScaleControl new ScaleControl(options: HYPERLINK "https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" Object) var scale = new cmmapgl.ScaleControl({ map.addControl(scale); HYPERLINK "https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number" number HYPERLINK "https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" string 全屏控件 HYPERLINK "http://www.mapbox.cn/mapbox-gl-js/api/" \l "fullscreencontrol" FullscreenControl A FullscreenControl 全屏控件，包含一个切换地图进入和退出全屏模式的按钮。 new FullscreenControl(options: HYPERLINK "https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" Object?) map.addControl(new cmmapgl.FullscreenControl({container: 为地图的样式添加数据源以及cmmap样式的图层。 container 是  HYPERLINK "https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullScreen" \l "Compatible_elements" 兼容DOM元素 它应当被全屏显示。默认情况下，地图容器元素会被全屏显示。 图层数据源 数据源提供地图显示的数据。数据源分为以下类型的数据源：矢量、栅格、geojson、图像、视频。仅添加数据源并不会立即显示在地图上，因为缺少样式信息如颜色或线宽。通过图层引用数据源将其显示出来。可以对同一数据源采用多种方式渲染，例如在高速路图层中对不同的等级的公路进行分别渲染以示区分。 包含将地图显示给用户时要显示的属性。 "url": "矢量地图数据服务地址" 默认值为512，以像素为单位。显示此图层切片的最小视觉尺寸，仅可为栅格图层配置 "url": "栅格地图数据服务地址", GeoJSON数据 GeoJSON数据源。数据必须通过“data”属性提供，值可以是URL或内联GeoJSON。 clusterMinPoints 如果启用了聚合，则在生成的聚合上定义自定义属性的对象，用于聚合点中的值。格式为{“property_name”：[operator，map_expression]}。 例如：{"sum": ["+", ["get", "scalerank"]]} map_expression: 产生单个点的值 指向GeoJSON文件的URL或者内联GeoJSON。 默认值false。是否为geojson要素生成ID，启用后，feature.id属性将根据其在要素数组中的索引自动分配，覆盖先前的所有值 "geojson-marker": { "data": { "type": "geojson", "geometry": { "type": "Point", "properties": { "title": "cmmap DC", "geojson-lines": { "marker-symbol": "monument" "data": "./lines.geojson" 图层样式 样式的图层属性列出了该样式中可用的所有图层。样式的图层属性列出了该样式中可用的所有图层。 图层的类型由“type”属性指定，并且必须是背景、多边形填充、折线、点符号、栅格、圆形图层之一。 除背景类型的图层外，每个图层都必须引用数据源。图层会从数据源中获取数据，可以选择过滤要素，然后定义如何设置这些要素的样式。 图层属性 唯一图层名称。 图层的渲染类型，"background"、"fill"、"line"、"symbol"、"raster"、"circle"之一。 图层的布局属性。 图层的最大缩放级别，在0到24之间。在等于或大于最大缩放级别时，图层将被隐藏 关于样式表的任意属性信息，但不对渲染过程产生影响。这些属性应该添加前缀以避免冲突，例如 'cmmap:' 图层的最小缩放级别，在0到24之间。在小于最小缩放的缩放级别时，该图层将被隐藏 图层的默认绘画属性 用于图层的数据源描述的名称。除了背景图层外，其他图层都需要。 "source": "cmmap-streets", "paint": { 背景图层 背景图层覆盖了整个地图。使用背景图层来配置颜色或图案，使其显示在所有其他地图内容的下方。 多边形填充图层 填充样式层可在地图上渲染一个或多个填充（以及可选的描边）多边形。您可以使用填充层来配置多边形或多面要素的视觉外观。 HYPERLINK "https://docs.mapbox.com/mapbox-gl-js/style-spec/types/" \l "resolvedImage" resolvedImage Paint属性。默认值是map，可选值有"map"和"viewport",需要fill-translate。 折线图层 线型图层会在地图上渲染一条或多条描边的折线。您可以使用线层来配置折线或多段线要素的视觉外观。 Paint属性。设置line-dasharray后无效。设置 line-pattern后无效。需要数据源为geojson。 Paint属性。默认值为map,可选值有"map"和"viewport"。需要line-translate。 点符号图层 点符号图层在地图上的点或沿线渲染图标和文本。 需要 icon-image. 需要 icon-rotation-alignment =map. 需要 symbol-placement = line 图标俯仰角基准点，Layout属性。默认为auto。"map", "viewport", "auto"之一。 图标旋转基准点，Layout属性。默认为 auto. 可选的值有 map、viewport、auto. 需要 icon-image. 控制偏移的参考点，Paint属性。默认为 map，可选的值有 map, viewport。需要设置 icon-image、icon-translate。 注记相对于要素的位置，Layout属性。 默认为 point，可选的值有 point, line。 point:标注在几何要素的点位上。 Layout属性，默认为 true. 需要设置 text-field. 需要设置text-rotation-alignment = map. 需要设置symbol-placement = line。 当地图倾斜时文本的方向，Layout属性。默认为 auto。可选的值有 map、viewport、auto。需要设置 text-field. 文本的单个字型的旋转行为，Layout属性。默认为 auto。可选的值有 map、viewport、auto。需要 text-field 控制偏移的参考点，Paint属性。默认为 map. 可选的值有 map, viewport. 需要设置text-field、 text-translate. 需要设置text-field、symbol-placement="point"。 Layout属性。可选"horizontal"、"vertical"。需要设置text-field、symbol-placement="point"。 是否显示此图层，Layout属性。 栅格图层 一个栅格样式图层在一个地图上渲染出栅格瓦片。可使用栅格图层来配置栅格瓦片的颜色参数。 HYPERLINK "https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/" \l "paint-raster-raster-brightness-max" raster-brightness-max HYPERLINK "https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/" \l "paint-raster-raster-contrast" raster-contrast HYPERLINK "https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/" \l "paint-raster-raster-fade-duration" raster-fade-duration HYPERLINK "https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/" \l "paint-raster-raster-hue-rotate" raster-hue-rotate HYPERLINK "https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/" \l "paint-raster-raster-opacity" raster-opacity HYPERLINK "https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/" \l "paint-raster-raster-resampling" raster-resampling HYPERLINK "https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/" \l "paint-raster-raster-saturation" raster-saturation 圆形图层 一个圆形样式在一个地图上渲染一个或多个填充的圆形。可以使用一个圆形图层来配置矢量切片中点或点集合要素的视觉外观。一个圆形图层渲染半径以屏幕单元度量的圆。 HYPERLINK "https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/" \l "paint-circle-circle-blur" circle-blur HYPERLINK "https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/" \l "paint-circle-circle-color" circle-color HYPERLINK "https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/" \l "paint-circle-circle-opacity" circle-opacity HYPERLINK "https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/" \l "paint-circle-circle-pitch-alignment" circle-pitch-alignment 圆的倾斜校准，Paint属性。默认值是viewport，"map"和" viewport"其中之一。 HYPERLINK "https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/" \l "paint-circle-circle-pitch-scale" circle-pitch-scale 当地图倾斜时，控制圆的缩放行为，Paint属性。默认值是viewport，"map"和" viewport"其中之一。 HYPERLINK "https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/" \l "paint-circle-circle-radius" circle-radius HYPERLINK "https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/" \l "layout-circle-circle-sort-key" circle-sort-key 圆的排序键， HYPERLINK "https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/" \l "layout-property" Layout 属性。 HYPERLINK "https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/" \l "paint-circle-circle-stroke-color" circle-stroke-color HYPERLINK "https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/" \l "paint-circle-circle-stroke-opacity" circle-stroke-opacity HYPERLINK "https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/" \l "paint-circle-circle-stroke-width" circle-stroke-width HYPERLINK "https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/" \l "paint-circle-circle-translate" circle-translate HYPERLINK "https://docs.mapbox.com/mapbox-gl-js/style-spec/types/" \l "array" array of  HYPERLINK "https://docs.mapbox.com/mapbox-gl-js/style-spec/types/" \l "number" numbers HYPERLINK "https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/" \l "paint-circle-circle-translate-anchor" circle-translate-anchor 圆的控制偏移的参考点，Paint属性。默认值是viewport，"map"和" viewport"其中之一。 Marker 创建一个Marker组件。 作为Marker的DOM元素。默认值为浅蓝色，水滴形SVG的Marker。 用来表示Marker的哪个部位距离坐标点最近，该坐标点可通过  HYPERLINK "http://www.mapbox.cn/mapbox-gl-js/api/" \l "markersetlnglat" Marker #setLngLat 设置。默认值”center”。可选'center' , 'top' , 'bottom' , 'left' , 'right' , 'top-left' , 'top-right' , 'bottom-left' , and 'bottom-right' PointLike 通过  HYPERLINK "http://www.mapbox.cn/mapbox-gl-js/api/" \l "pointlike" PointLike 对象表示相对于元素中心偏移的像素数，左和上分别为负方向。 默认Marker的颜色，默认值'#3FB1CE'（浅蓝色） 默认Marker的比例尺。默认比例尺为1，对应于高度为41px，宽度为27px。 表示Marker是否可以在地图上拖动，默认值false。 默认值为0。用户在单击Marker时可以移动鼠标指针的最大像素数，以将其视为有效点击（与标记拖动相反）。继承Map的clickTolerance属性。 Marker顺时针旋转的角度，默认值为0 俯仰角对齐。默认值auto。map将Marker与Map平面对齐 旋转角度对齐。默认值auto，map将Marker旋转角度相对于map对齐，并在map旋转时保持方位。 addTo(map) var marker = new cmmapgl.Marker() 将Marker添加到地图上 .addTo(map); 返回Marker的HTML元素 获取Marker的经纬度。 var lngLat = marker.getLngLat(); Point 获取Marker的偏移量。 返回Marker当前的pitchAlignment属性。 返回绑定到Marker的Popup实例。 .setPopup(new cmmapgl.Popup().setHTML("Hello World!")) console.log(marker.getPopup()); 返回Marker的当前旋转角度（以度为单位）。 返回Marker的当前rotationAlignment属性 如果可以拖动Marker，则返回true var marker = new cmmapgl.Marker().addTo(map); 从地图上删除Marker marker.remove(); 设置Marker的可拖动属性和功能 new cmmapgl.Marker() 设置Marker的地理位置 设置Marker的偏移量 设置Marker的pitchAlignment属性。 设置Marker的旋转属性。 设置Marker的rotationAlignment属性。 marker.togglePopup(); var marker = new cmmapgl.Marker({ 默认值true。如果为 true ，点击地图时信息窗体将关闭 默认值false。如果为 true ，移动地图时信息窗体将关闭 表示弹窗位置的字符，通过  HYPERLINK "http://www.mapbox.cn/mapbox-gl-js/api/" \l "popupsetlnglat" Popup#setLngLat 与坐标集关联。 选项有 'center' , 'top' , 'bottom' , 'left' , 'right' , 'top-left' , 'top-right' , 'bottom-left' ，以及 'bottom-right' (number | PointLike) let popup = new cmmapgl.Popup() new cmmapgl.Popup() 将信息窗体添加到地图。 var popup = new cmmapgl.Popup() 删除已添加到地图的信息窗体 var popup = new cmmapgl.Popup().addTo(map); trackPointer() var popup = new cmmapgl.Popup({ closeOnClick: false, closeButton: false }) .trackPointer() var popup = new cmmapgl.Popup(); popup.on('open', function(){ var markerHeight = 50, markerRadius = 10, linearOffset = 25; var popupOffsets = { 'bottom': [0, -markerHeight], 'bottom-left': [linearOffset, (markerHeight - markerRadius + linearOffset) * -1], 'bottom-right': [-linearOffset, (markerHeight - markerRadius + linearOffset) * -1], var popup = new cmmapgl.Popup({offset: popupOffsets, className: 'my-class'}) 'left': [markerRadius, (markerHeight - markerRadius) * -1], 'right': [-markerRadius, (markerHeight - markerRadius) * -1] 地图提供了右键菜单事件，用户可基于该事件实现在地图上显示右键菜单功能。 通过监听地图的“contextmenu”事件，动态创建或控制html div的显示与关闭，实现在地图上展示右键菜单项，菜单项的单击事件实现具体功能。 div id='rightMenu' class="cmmap-menu"> ul class="cmmap-menu-outer"> .cmmap-menu { .cmmap-info-outer, .cmmap-menu-outer { ul.cmmap-menu-outer li { cursor: pointer; ul.cmmap-menu-outer li:hover { dir { map.on("contextmenu", function (e) { let mapid = map.getContainer().id let mapdom = document.getElementById(mapid) let mapleft = mapdom.getBoundingClientRect().left; let maptop = mapdom.getBoundingClientRect().top; // console.log(e.point) m.style.top = (e.point.y + maptop-10) + 'px'; if(_hookEvnet===false){ m.style.left = (e.point.x + mapleft) + 'px'; map.on("click", function (e) { 初始化地图：加载地图底图 通过 createSector() 生成 GeoJSON 多边形 将扇形作为新图层添加到地图 const description = document.getElementById('sector-desc').value; // 添加description到properties sector.properties = { description: description, // 添加到地图 if (map.getLayer('sector-layer')) { map.removeLayer('sector-layer'); map.removeSource('sector-source'); map.addSource('sector-source', { map.addLayer({ type: 'geojson', addLabel(center, description); currentOverlay = { description, map.fitBounds(turf.bbox(sector), { turf.point(center), { units: 'kilometers' } 将水滴形作为新图层添加到地图 const description = document.getElementById('droplet-desc').value; droplet.properties = { // 更新地图显示 if (map.getLayer('droplet-layer')) { map.removeLayer('droplet-layer'); map.removeSource('droplet-source'); map.addSource('droplet-source', { map.fitBounds(turf.bbox(droplet), { const points = []; const tipPoint = [0, -length / 2]; // 尖端点 points.push(tipPoint); for (let i = steps; i >= 0; i--) { points.push([x, y]); const coordinates = points.map(point => { const x = point[0] * Math.cos(angle) - point[1] * Math.sin(angle); const y = point[0] * Math.sin(angle) + point[1] * Math.cos(angle); 通过 createIsoscelesTriangle() 生成 GeoJSON 多边形 将三角形作为新图层添加到地图 const description = document.getElementById('triangle-desc').value; if (map.getLayer('triangle-layer')) { map.removeLayer('triangle-layer'); map.removeSource('triangle-source'); map.addSource('triangle-source', { addLabel(vertex, description); map.fitBounds(turf.bbox(triangle), { const point1 = turf.destination( turf.point(vertex), coordinates.push(point1.geometry.coordinates); const point2 = turf.destination( coordinates.push(point2.geometry.coordinates); return turf.polygon([coordinates], { 将图标作为 Marker 添加到地图。 const description = document.getElementById('icon-desc').value; if (fileInput.files.length === 0) { addDefaultMarker([lng, lat], size, rotation, description); addCustomMarker([lng, lat], imgUrl, size, rotation, description); function addDefaultMarker(coordinates, size, rotation, description) { marker.setLngLat(coordinates) marker.addTo(map); marker: marker, properties: { function addCustomMarker(coordinates, imgUrl, size, rotation, description) { el.className = 'marker-icon'; el.style.cursor = 'pointer'; el.addEventListener('click', (e) => { geometry: { type: 'Point' }, properties: { description, type: 'icon' } el.addEventListener('contextmenu', (e) => { const marker = new cmmapgl.Marker({ el.title = description; }).setLngLat(coordinates).addTo(map); properties: { description, size, rotation, imgUrl } 生成GeoJSON： 将多边形作为新图层添加到地图（fill 类型图层）。 自动调整地图视野以包含多边形（map.fitBounds()）。 const description = document.getElementById('polygon-desc').value; polygon.properties = { if (map.getLayer('polygon-layer')) { map.removeLayer('polygon-layer'); map.removeSource('polygon-source'); map.addSource('polygon-source', { map.fitBounds(turf.bbox(polygon), { const point = turf.destination( console.log(`顶点 ${i}:`, point.geometry.coordinates); if (coordinates.length > 0) { coordinates.push(point.geometry.coordinates); 鼠标绘图工具（MouseTool） 使用鼠标绘图工具需要额外引入MouseTool.js和CMMapDrawControl.js两个JS文件。 MouseTool MouseTool 接口说明 MouseTool(option) MouseTool的构造函数，目前仅支持桌面浏览器 map: 地图对象引用，必填项 drawPoint selectPoint midPoint vertexPoint snapPoint marker() 开启鼠标画点标注模式。鼠标在地图上单击绘制点标注。 开启鼠标画折线模式。鼠标在地图上点击绘制折线，鼠标左键双击或右键单击结束绘制。 开启鼠标画多边形模式。鼠标在地图上单击开始绘制多边形，鼠标左键双击或右键单击结束当前多边形的绘制。 开启鼠标画矩形模式。鼠标在地图上拉框即可绘制相应的矩形。 开启鼠标标注文字模式。鼠标在地图上单击标注文字图形。 开启鼠标画圆模式。鼠标在地图上拖动绘制相应的圆形。 开启距离量测模式。鼠标在地图上单击绘制量测节点，并计算显示两两节点之间的距离，鼠标左键双击或右键单击结束当前量测操作。 开启面积量测模式。鼠标在地图上单击绘制量测区域，鼠标左键双击或右键单击结束当前量测操作，并显示本次量测结果。 开启圆形面积量测模式。鼠标在地图上单击绘制量测圆形区域，鼠标左键双击或右键单击结束当前量测操作，并显示本次量测结果。 开启画带洞多边形：鼠标在地图上单击先绘制外轮廓，双击后继续绘制内洞，右键结束。 开启鼠标显示坐标模式。鼠标点击左键可在地图上显示位置坐标，点击鼠标右键关闭坐标拾取功能。 开启鼠标拉框放大模式。鼠标可在地图上拉框放大地图。 开启鼠标拉框缩小模式。鼠标可在地图上拉框缩小地图。 GeoJSON 返回类型为FeatureCollection的GeoJSON对象 添加图形要素至编辑数组中，在地图上显示对应的图形，并可以进行选择、修改等编辑操作，同时触发编辑事件。 arr : 参数为类型为Feature的数组，数组元素必须为Feature类型的GeoJSON对象。 features: Array，选择图形的GeoJSON对象数组 points：Array，选中节点坐标的GeoJSON对象数组 features：为图形GeoJSON对象数组 features为图形GeoJSON对象数组 points 为选中节点的GeoJSON对象数组 HYPERLINK "javascript:void(0)" MouseTool 提供了 HYPERLINK "javascript:void(0)" draw 事件，用于监听绘图操作： mouseTool.on("draw", function (e) { if (e.type.indexOf('create') 0) { javascript var map = new cmmapgl.Map({ // 初始化地图 container: 'container', style: { // 初始化 MouseTool mouseTool = new MouseTool({ "map": map, drawStyle:{ drawPolygon:{//修改绘制面样式 'fill-color': '#00fc21', 'fill-opacity': 0.5 }, drawingPolygon:{//修改绘制过程中面样式 'fill-color': '#0059ff', 'fill-opacity': 0.5 } snapToMidPoints: true, } console.log("回调: ", e, overlays);});// 开始绘图draw('marker'); 通过以上功能，MouseTool 可以满足多种地图绘图需求。 HYPERLINK "javascript:void(0)" CMMapDrawControl 是一个用于在地图上添加绘图控件的工具，支持多种绘图操作。以下是 HYPERLINK "javascript:void(0)" CMMapDrawControl 的主要功能和使用说明： const drawControl = new CMMapDrawControl({ 初始化 HYPERLINK "javascript:void(0)" CMMapDrawControl map: map, // 地图实例 添加控件到地图 map.addControl(drawControl, 'bottom-left'); // 将控件添加到地图的指定位置 HYPERLINK "javascript:void(0)" CMMapDrawControl 支持两种布局方式： map.on('load', () => { map.addControl(drawControl, 'bottom-left');}); map: map, HYPERLINK "javascript:void(0)" CMMapDrawControl 提供了以下主要功能： 通过以上功能， HYPERLINK "javascript:void(0)" CMMapDrawControl 可以方便地在地图上添加绘图控件，满足多种绘图需求。 该组件用于在地图上显示业务数据的热力图效果。 map.addSource(数据ID, { 向地图添加热力图数据： data: GeojsonData data为Geojson类型点数据，下面例子为2个点数据，如下： var GeojsonData = "geometry":{"type":"Point", type: 'heatmap', 'heatmap-weight': 0.9 , 'heatmap-intensity': { 'heatmap-color': [ ['heatmap-density'], 'heatmap-radius': 10 , 'heatmap-opacity': 0.9 , 固定值：'heatmap' 热力图显示的最小缩放级别，当地图zoom小于minzoom时，热力图层隐藏。 热力图显示的最大缩放级别，当地图zoom大于maxzoom时，热力图层隐藏。 paint.heatmap-weight 每个单独的点对热力图外观的影响。默认情况下，热力图图层的权重为 1，这意味着所有点的权重相等。将heatmap-weight属性设置为5与在同一位置放置五个点的显示效果相同。 paint.heatmap-intensity paint.heatmap-color 定义热力图的颜色渐变效果，从最小值到最大值。显示的颜色取决于每个像素的 HYPERLINK "https://docs.mapbox.com/mapbox-gl-js/style-spec/" \l "expressions-heatmap-density" 热图密度值（范围从0.0到1.0）。 paint.heatmap-radius paint.heatmap-opacity 控制热力图层的不透明度。 map.addSource('data3', { 该组件用于在地图上显示业务数据的散点图效果。 向地图添加散点图数据： data: { 散点图显示的最小缩放级别，当地图zoom小于minzoom时，散点图层隐藏。 散点图显示的最大缩放级别，当地图zoom大于maxzoom时，散点图层隐藏。 // Continuously repaint the map, resulting map.triggerRepaint(); // Return `true` to let the map know that the image was updated. map.on('load', function () { map.addImage('pulsing-dot', pulsingDot, { pixelRatio: 2 }); //添加扩散效果为图片 map.addSource('dot-point', { 'data': { 'type': 'geojson', 'type': 'Point', 'geometry': { 'source': 'dot-point', 'layout': { 先创建一个map实例：var map = new cmmapgl.Map()。 定义流向图的配置项：option = { } var echartslayer = new EchartsLayer(map); 固定值：'cmmapMap' 一、先创建一个map实例：var map = new cmmapgl.Map()。 二、定义时空轨迹图的配置项：option = { } 二、定义迁徙图的配置项：option = { } 二、定义网格热力图的配置项：option = { } visualMap visualMap.top visualMap.left visualMap.pieces pieces: [{ agis.wgs84togcj02(lng,lat) agis.bd09togcj02(lng,lat) agis.gcj02tobd09(lng,lat) agis.convertFrom( 定义柱状图的配置项：option = { } 定义饼状图的配置项：option = { } 定义折线图的配置项：option = { } 定义雷达图的配置项：option = { } 该组件用于在地图上显示业务数据的蜂窝热力图效果。 opacity：图层显示透明度，默认1 设置图层是否显示，立即生效。值true/false； 设置图层蜂窝显示颜色，值分为颜色字符串或数组阶梯分段颜色形式 geojson类型数据。 fillColor：设置图层蜂窝显示颜色，值参考setFillColor方法 hexagonLayer = new agis.HexagonLayer({ map:map, 该组件用于在地图上显示业务数据的网格热力图效果。 设置图层网格显示颜色，值分为颜色字符串或数组阶梯分段颜色形式 fillColor：设置图层网格显示颜色，值参考setFillColor方法 gridLayer= new agis.GridLayer({ agis.turf.booleanPointOnLine(pt, line); var pt = agis.turf.point([0, 0]);var line = agis.turf.lineString([[-1, -1],[1, 1],[1.5, 2.2]]);var isPointOnLine = agis.turf.booleanPointOnLine(pt, line); agis.turf. booleanLineCollinearExcm (line1, line2); var line1 =agis.turf.lineString([ [116.39622935384978,39.90861426183396], [116.40082102805991,39.90806289847159], [116.40066010485043,39.90736340083651], [116.40557362556137,39.90577921797494], [116.40936068302835,39.90828508970509]]);var line2 = agis.turf.lineString([ [116.39622935384978,39.90861426183396], [116.40082102805991,39.90806289847159], [116.40066010485043,39.90636340083651], [116.40557362556137,39.90577921797494], [116.40936068302835,39.90828508970509]]); agis.turf.booleanPointInPolygon(pt, poly) var pt = agis.turf.point([-77, 44]);var poly = agis.turf.polygon([[ [-81, 41], [-81, 47], [-72, 47], [-72, 41], [-81, 41]]]);agis.turf.booleanPointInPolygon(pt, poly) agis.turf.booleanCrosses(poly1, poly2); var poly1 = agis.turf.polygon([[[0,0],[0,5],[5,5],[5,0],[0,0]]]);var poly2 = agis.turf.polygon([[[1,1],[1,6],[6,6],[6,1],[1,1]]]); agis.turf.booleanCrosses(poly1, poly2); agis.turf.booleanPointOnLine(line,poly); var line = agis.turf.lineString([[-1, -1],[1, 1],[1.5, 2.2]]);var poly = agis.turf.polygon([[[0,0],[0,5],[5,5],[5,0],[0,0]]]);var isPointOnLine = agis.turf.booleanPointOnLine(line, poly); agis.turf.booleanContains(poly1, poly2); var poly1 = agis.turf.polygon([[[0,0],[0,5],[5,5],[5,0],[0,0]]]);var poly2 = agis.turf.polygon([[[1,1],[1,6],[6,6],[6,1],[1,1]]]);agis.turf.booleanContains(poly1, poly2); agis.turf.booleanEqual(pt1, pt2) var pt1 = agis.turf.point([0, 0]);var pt2 = agis.turf.point([0, 0]);agis.turf.booleanEqual(pt1, pt2);//= true agis.turf.pixelCompareExcm(pixel1, pixel12) var pixel1= [200,100];var pixel2= [200,100];agis.turf. pixelCompareExcm (pixel1, pixel2);//= true agis.turf.booleanEqual(py1, py2) var poly1 = agis.turf.polygon([[[0,0],[0,5],[5,5],[5,0],[0,0]]]);var poly2 = agis.turf.polygon([[[1,1],[1,6],[6,6],[6,1],[1,1]]]); agis.turf.booleanEqual(pt1, pt2); agis.turf.intersect agis.turf.intersectExcm agis.turf.intersect(poly1, poly2); var poly1 = agis.turf.polygon([[ [-122.801742, 45.48565], [-122.801742, 45.60491], [-122.584762, 45.60491], [-122.584762, 45.48565], [-122.801742, 45.48565]]]);var poly2 = agis.turf.polygon([[ [-122.520217, 45.535693], [-122.64038, 45.553967], [-122.720031, 45.526554], [-122.669906, 45.507309], [-122.723464, 45.446643], [-122.532577, 45.408574], [-122.487258, 45.477466], [-122.520217, 45.535693]]]); var intersection = agis.turf.intersect(agis.turf.featureCollection([poly1, poly2])); intersection = agis.turf.intersectExcm(poly1,poly2); agis.turf.union agis.turf.unionExcm agis.turf.union(poly1, poly2); var poly1 = agis.turf.polygon([[ [-122.801742, 45.48565], [-122.801742, 45.60491], [-122.584762, 45.60491], [-122.584762, 45.48565], [-122.801742, 45.48565]]]);var poly2 = agis.turf.polygon([[ [-122.520217, 45.535693], [-122.64038, 45.553967], [-122.720031, 45.526554], [-122.669906, 45.507309], [-122.723464, 45.446643], [-122.532577, 45.408574], [-122.487258, 45.477466], [-122.520217, 45.535693]]]); 方法一：var union = agis.turf.union(agis.turf.featureCollection([poly1, poly2])); intersection = agis.turf.unionExcm(poly1,poly2); agis.turf.difference agis.turf.difference Excm agis.turf.difference(poly1, poly2); 方法一：var difference= agis.turf.difference (agis.turf.featureCollection([poly1, poly2])); intersection = agis.turf.differenceExcm(poly1,poly2); agis.turf.xorExcm(poly1, poly2); var poly1 = agis.turf.polygon([[ [-122.801742, 45.48565], [-122.801742, 45.60491], [-122.584762, 45.60491], [-122.584762, 45.48565], [-122.801742, 45.48565]]]);var poly2 = agis.turf.polygon([[ [-122.520217, 45.535693], [-122.64038, 45.553967], [-122.720031, 45.526554], [-122.669906, 45.507309], [-122.723464, 45.446643], [-122.532577, 45.408574], [-122.487258, 45.477466], [-122.520217, 45.535693]]]);var difference= agis.turf.xorExcm(poly1, poly2); agis.turf.distance(from, to, options) var from = agis.turf.point([-75.343, 39.984]);var to = agis.turf.point([-75.534, 39.123]);var options = {units: 'miles'};agis.turf.distance(from, to, options) agis.turf.spanOfRectangleExcm(bounds) var arr = [[-73.9876, 40.7661], [-73.9397, 40.8002]];var bounds = cmmapgl.LngLatBounds.convert(arr);agis.turf.spanOfRectangleExcm (bounds); agis.turf.area(polygon); var polygon = agis.turf.polygon([[[125, -15], [113, -22], [154, -27], [144, -15], [125, -15]]]);var area = agis.turf.area(polygon); agis.turf.length(line, options); var line = agis.turf.lineString([[115, -32], [131, -22], [143, -25], [150, -34]]);var length = agis.turf.length(line, {units: 'miles'}); agis.turf.diagonalCoordinatesExcm (bounds) var arr = [[-73.9876, 40.7661], [-73.9397, 40.8002]];var bounds = cmmapgl.LngLatBounds.convert(arr);agis.turf.diagonalCoordinatesExcm(bounds); agis.turf.center() agis.turf.center(geometry) 返回图形中心点，格式为GeoJSON agis.turf.centroid() agis.turf.centroid(geometry) 返回图形质心点，返回格式为GeoJSON let calculateBuffer = function(points, radius, units = 'kilometers') { agis.turf.buffer(geometry) let buffer = agis.turf.buffer(line, radius, {units: units}); let coordinates = points.map(p => [p.lng, p.lat]); let line = agis.turf.lineString(coordinates); CMMap.voronoiHelper 为创建泰森多边形的工具类，无需实例化，直接调用。 创建泰森多边形功能，直接调用 CMMap.voronoiHelper.createVoronoi() 方法。 createVoronoi(point, bbox) points: 点集合，类型为FeatureCollection； randomPoint(num, bbox) 成功执行，返回类型为Point的FeatureCollection