# cfmap-4490

> 城方mapbox地图sdk

Latest version **2.3.24** (published 2026-08-26) · Copyright©2020 Mapbox license · 0 weekly downloads

## Install

```sh
npm install cfmap-4490
pnpm add cfmap-4490
yarn add cfmap-4490
bun add cfmap-4490
```

## Health

**Score 50/100 (C)** — status: active.

Positive: no vulnerabilities; recently updated.

Warnings: low downloads; no types; no esm support.

## Facts

| | |
|---|---|
| Version | 2.3.24 |
| Published | 2026-08-26 |
| First published | 2021-06-08 |
| Weekly downloads | 0 |
| License | Copyright©2020 Mapbox |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 8 |
| Unpacked size | 1.9 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | cityfun.dev |
| Maintainers | cityfun.dev |
| Keywords | cfmap, mapbox |

## Links

- npm: https://www.npmjs.com/package/cfmap-4490
- npm.io page: https://npm.io/package/cfmap-4490

## Dependencies (8)

- [deck.gl](https://npm.io/package/deck.gl.md) 8.6.6
- [@turf/area](https://npm.io/package/@turf/area.md) ^6.0.1
- [lodash.merge](https://npm.io/package/lodash.merge.md) ^4.6.2
- [whatwg-fetch](https://npm.io/package/whatwg-fetch.md) ^3.5.0
- [@turf/distance](https://npm.io/package/@turf/distance.md) ^6.0.1
- [lodash.clonedeep](https://npm.io/package/lodash.clonedeep.md) ^4.5.0
- [@cgcs2000/mapbox-gl](https://npm.io/package/@cgcs2000/mapbox-gl.md) ^2.3.0
- [@loaders.gl/3d-tiles](https://npm.io/package/@loaders.gl/3d-tiles.md) 3.1.5

## Recent versions

- 2.3.24 (latest) — 2026-08-26
- 2.3.23 — 2024-11-20
- 2.3.22 — 2024-10-09
- 2.3.21 — 2024-10-09
- 2.3.20 — 2024-10-08
- 2.3.19 — 2024-10-05
- 2.3.18 — 2023-08-17
- 2.3.17 — 2023-07-06
- 2.3.16 — 2023-07-06
- 2.3.15 — 2023-07-05
- 2.3.14 — 2023-02-27
- 2.3.13 — 2023-02-13
- 2.3.12 — 2022-12-07
- 2.3.11 — 2022-11-09
- 2.3.10 — 2022-10-18
- … 11 more at https://npm.io/package/cfmap-4490/versions

## README

#  cfmap  开发文档

## 说明
---
### 封装

CfMap 是基于 mapbox-gl 的扩展库，封装不影响使用原生 mapbox-gl 的功能。原生 API 请参考 [mapboxgl 官方文档](https://docs.mapbox.com/mapbox-gl-js/api/)

### 授权

获取流程：
申请平台账号→获取服务秘钥 (ak)→使用相关服务功能，[平台门户地址](http://cim.cityfun.com.cn/geocms/app)

### 安装

CfMap 目前支持三种坐标系，wgs84 地理坐标系 (ESPG:4326)，国家 2000 坐标系 (EPSG:4490)，web 墨卡托投影坐标系（EPSG:3857）。不同坐标系统需要安装指定的 SDK 包；

- EPSG:3857

```javascript
<script src='./libs/cfmap.min.css'></script>
<link href='./libs/cfmap.min.js' rel='stylesheet' />
```

或，使用 npm 安装

```javascript
npm i cfmap
import cfmap from 'cfmap'
```

- EPSG:4326 和 EPSG:4490

```javascript
<script src='./libs/cfmap-4490.min.css'></script>
<link href='./libs/cfmap-4490.min.js' rel='stylesheet' />
```

或，使用 npm 安装

```javascript
npm i cfmap-4490
import cfmap from 'cfmap'
```

### Hello World

使用 CfMap SDK 创建一个简单的示例。

**1、获取 cfToken**

> 通过平台账号密码获取

**2、准备页面**

根据 HTML 标准，每一份 HTML 文档都应该声明正确的文档类型，我们建议您使用最新的符合 HTML5 规范的文档声明：

> ```html
> <!DOCTYPE html>
> ```

您也可以根据需要选择其他类型的文档声明，这样浏览器会以标准的方式对页面进行渲染，保证页面最大的兼容性。我们不建议您使用 quirks 模式进行开发。

**3、适应移动端页面展示**

下面我们添加一个 meta 标签，以便使您的页面更好的在移动平台上展示。

> ```html
> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
> ```

**4、设置容器样式**

设置容器样式大小，使地图充满整个浏览器窗口：

```html
<style type="text/css">  
    html{height:100%}    
    body{height:100%;margin:0px;padding:0px}    
    #container{height:100%}    
</style> 
```

**4、引用 cfmap 库文件**

```javascript
<script src='./libs/cfmap.min.css'></script>
<link href='./libs/cfmap.min.js' rel='stylesheet' />
```

**5、创建地图容器元素**

地图需要一个 HTML 元素作为容器，这样才能展现到页面上。这里我们创建了一个 div 元素。

```html
<div id="container"></div> 
```

**6、设置地图配置信息**

- cfToken: 使用平台账号获取的秘钥
- ESPG: 指定地图服务使用的坐标系统
- mapboxToken: 指定 mapbox 的 accessToken，从 mapbox v2+以上版本开始，mapbox-gl 的初始化需要 mapbox 的 token，cfmap 内置了 mapbox 公开的 token，所以也可以不设置，如果始终中内置 token 失效，则需注册 mapbox 账户设置新的 token。
- proxyArray: 矢量切片 json 中 source、sprite 等前缀地址需要替换时可配置，形式为数组 [[0,1]]，0 为被替换的地址，1 为替换成的地址

> 注意：3857(web 墨卡托投影坐标系）；4490（cgcs2000）；4326（wgs84 坐标）

```javascript
cfmap.setConfig({
  cfToken:
    "yAkqtubPdGtD61/l8DNLXhQrBCUcCeCQR9dzlyiMXHp3Qe9zsEtfy9k0YMAmXwOzx9p6BulJNYrLbejxUp6zYWpHhnKqZcgr3FjHGv8ybhHqLd4eWoGztA==",
  EPSG: 3857,
  mapboxToken: 'pk.eyJ1IjoiZXhhbXBsZXMiLCJhIjoiY2p0MG01MXRqMW45cjQzb2R6b2ptc3J4MSJ9.zA2W0IkI0c6KaAhJfk9bWg',
  proxyArray:[['http://webres.cityfun.com.cn','http://webres.cityfun.com']],
});

```

**7、创建地图实例**

位于 cfmap 命名空间下的 Map 类表示地图，通过 new 操作符可以创建一个地图实例。

> 注意：创建地图对象时指定参数中，style 必须是平台发布的矢量地图服务

```javascript
var map = new cfmap.Map({
  container: "container",
  center: [120.70044254024515, 31.301339366724918],
  zoom: 12,
  pitch: 60,
  style:"http://192.168.2.76/geocms/v1/cf/rest/services/MapService/VT/c772577d-6200-4469-8147-35d8009ab728",
});
```

**8、监听地图加载完成事件**

```javascript
map.on("load", function() {});
```

**9、定位地图中心点**

```javascript
map.on("load", function() {
    map.flyTo({center:[116.38, 39.90]});
});
```

10、完成实例

```javascript
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>地图展示</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <style>
      body,
      html,
      #container {
        overflow: hidden;
        width: 100%;
        height: 100%;
        margin: 0;
      }
    </style>
    <link href="cfmap.min.css" rel="stylesheet" />
  </head>
  <body>
    <div id="container"></div>
    <script type="text/javascript" src="cfmap.min.js"></script>
    <script>
      cfmap.setConfig({
        cfToken:
          "yAkqtubPdGtD61/l8DNLXhQrBCUcCeCQR9dzlyiMXHp3Qe9zsEtfy9k0YMAmXwOzx9p6BulJNYrLbejxUp6zYWpHhnKqZcgr3FjHGv8ybhHqLd4eWoGztA==",
        EPSG: 3857,
        mapboxToken: 'pk.eyJ1IjoiZXhhbXBsZXMiLCJhIjoiY2p0MG01MXRqMW45cjQzb2R6b2ptc3J4MSJ9.zA2W0IkI0c6KaAhJfk9bWg',
      });

      var map = new cfmap.Map({
        container: "container",
        center: [120.70044254024515, 31.301339366724918],
        zoom: 12,
        pitch: 60,
        style:
          "http://192.168.2.76/geocms/v1/cf/rest/services/MapService/VT/c772577d-6200-4469-8147-35d8009ab728",
      });

      map.on("load", function() {
        map.flyTo({center:[116.38, 39.90]});
      });
    </script>
  </body>
</html>

```
---
## OGC 标准服务和 ESRI 服务加载

### ArcGIS 瓦片服务

> 加载 arcgis server 发布的瓦片服务

```javascript
  map.addArcGISTileLayer( "http://192.168.2.64/geocms/v1/cf/rest/services/MapService/ESRI/ff0a52e3-f9e0-4cc9-8034-5d170dfb4b9c",{
      layerid: "esri-tile",
    }
  );
```

### ArcGIS 动态服务

```javascript
map.on("load", function() {
  map.addArcGISDynamicLayer(
    "http://192.168.2.64/geocms/v1/cf/rest/services/MapService/ESRI/ac785b13-7b7f-4e7e-aad3-4ba67f053eb0",{
      layerid: "esri-tile",
      layers:[1,2,3]
    }
  );
});
```

### OGC WMS 服务

```javascript
map.on("load", function() {
  map.addWMSLayer(
    "http://192.168.2.64/geocms/v1/cf/rest/services/MapService/OGC/ea971827-12d3-1c12-ac45-39f987c7d5ad",{
      layerid: "wms01",
      layers: "WJKFQ_Z:CSZL_AQJG_AQSCSG,WJKFQ_Z:CSZL_CSBJ_BKT",
    }
  );
});
```

### OGC WMTS 服务

```javascript
map.on("load", function() {
  map.addWMTSLayer(
    "http://192.168.2.64/geocms/v1/cf/rest/services/MapService/OGC/3abd92a4-0da8-48d4-9905-dac2c5e46caf",{
      layerid: "geo-server-wmts",
      layer: "SZ_BaseMap:SZ_BaseMap_10",
    }
  );
});
```

### 矢量地图服务

> 注意：矢量地图服务，服务配置为符合 mapbox 矢量切片样式标准。可以通过 isFlyTo 参数来指定是否定位到服务配置文件中指定的相机参数。

```javascript
map.on("load", function() {
  map
    .loadMapStyle(
      "http://192.168.2.64/geocms/v1/cf/rest/services/MapService/VM/8c248ab6-616f-702d-a932-39f987c7d5ad"
    )
    .then((styleObj) => {
      map.addMapStyle(styleObj, {
        styleid: "special-id",
        isFlyTo: false, // 默认 false
      });
    });
});
```
### 3dtiles 服务
```javascript
map.on("load", function() {
        let url = "<tileset json url>";
        let layer = map.add3DTitleLayer("<layer id>", url, token, {
          tileset: {
            // options.ellipsoid=Ellipsoid.WGS84 (Ellipsoid) - The ellipsoid determining the size and shape of the globe.
            // options.throttleRequests=true (Boolean) - Determines whether or not to throttle tile fetching requests. Throttled requests are prioritized according to tile visibility.
            // options.maxRequests=64 (Number) - When throttling tile fetching, the maximum number of simultaneous requests.
            // options.modelMatrix=Matrix4.IDENTITY (Matrix4) - A 4x4 transformation matrix this transforms the entire tileset.
            // options.maximumMemoryUsage=512 (Number) - The maximum amount of memory in MB that can be used by the tileset.
            // options.viewDistanceScale=1.0 (Number) - A scaling factor for tile refinement. A lower value would cause lower level tiles to load. Useful for debugging and for restricting resource usage.
            // options.updateTransforms=true (Boolean) - Always check if the tileset modelMatrix was updated. Set to false to improve performance when the tileset remains stationary in the scene.
            // options.loadOptions - loaders.gl options used when loading tiles from the tiling server. Includes fetch options such as authentication headers, worker options such as maxConcurrency, and options to other loaders such as 3d-tiles, gltf, and draco.
            // options.contentLoader = null (Promise) - An optional external async content loader for the tile. Once the promise resolves, a tile is regarded as READY to be displayed on the viewport.
            // options.loadTiles=true (Boolean) - Whether the tileset traverse and update tiles. Set this options to false during the run time to freeze the scene.
          },
        });
        map.addLayer(layer);
  map.addLayer(layers);
});
```
## API

**1、addArcGISTileLayer(url,options)**

加载 ArcGIS 切片服务

**参数：**

- url:string;
- options:Object ;
  - layerid:string 服务地址
  - zoomOffset:number 切片缩放层级（默认-1）

**2、addArcGISDynamicLayer（url,options）**

加载 ArcGIS 动态地图服务

**参数：**

- url:string;
- options:Object ;
  - layerid:string 服务地址
  - zoomOffset:number 切片缩放层级（默认-1）

**3、addWMSLayer(url,options)**

加载 WMS 地图服务

**参数：**

- url:string; 服务请求地址 
- options:Object 
  - layerid:string; 图层 id
  - layers:string; wms 子图层 id, 多个用逗号隔开

**4、addWMTSLayer(url,options)**

加载 WMS 地图服务

**参数：**

- url:string; 服务请求地址 
- options:Object 
  - layerid:string; 图层 id
  - layers:string; wmts 服务子图层，多个用逗号隔开"}

**5、addMapStyle(styleJson,options)**

加载专题图样式，mapbox 标准地图样式

**参数：**

- styleJson:Object ；满足 mapbox 样式标准 JSON 对象
- options:Object
  - styleid:string; 样式 id 专题图图层组（可能多个图层）id，
  - isBaseMap:string ；true|false ；可选参数
  - isFlyTo; true|false ；是否定位到相机参数

**6、removeMapStyle(styleid)**

移除专题图样式，mapbox 标准地图样式

**参数：**

- styleid:string；样式 ID

**7、addLayer(layer,beforeId)**

重写添加图层方法，和原生一样使用，内部做了处理

**参数：**

- 参考 mapbox 官网

**8、changeBaseMap(data,options)**

切换 mapbox 底图

**参数：**

- data:object；mapbox 标注样式 JSON 对象
- options
  - styleid:string 样式 ID
  - isBaseMap:boolean ；是否是底图

**9、getThunbnail(options)**

获取缩略图

**参数：**

- data:object
  -  type:string; 输出类型；默认‘image/jpeg’
  - quality:number; 图片质量，默认 1
  - widht:number；图片宽度，默认 300
  - height:number; 图片高度，默认 300
  - saveAsFile:boolearn: 默认，false
  - fileName:string，文件名称

**10、getScreenshot(options)**

地图截图

**参数：**

- data:object
  -  type:string; 输出类型；默认‘image/jpeg’
  - quality:number; 图片质量，默认 1
  - saveAsFile:boolearn: 默认，false
  - fileName:string，文件名称
  
**11，加载 3dtiles 服务**
**add3DTitleLayer(layerid, url, token)**
**参数：**
- layerid:string  图层 id
- url:string 服务地址
- token:string 令牌
  
**返回参数：要添加的图层对象**

**12，polygon 定位到适配区域**

**fitPolygonBoundingBox(mapbox, coordinates)**
**参数：**
- mapbox:  底图实例对象
- coordinates:array 坐标

 **13，multpolygon 定位到适配区域**

**fitMultPolygonBoundingBox(data, mapbox)**
**参数：**
- data:object 
- mapbox:  底图实例对象

**14，fitLineBounds 定位到适配区域**

**fitLineBounds( mapbox, coordinates)**
**参数：**
- coordinates:array 坐标
- mapbox:  底图实例对象

**15，屏幕坐标计算**

**mousePos(mapbox, e)**
**参数：**
- e: 屏幕
- mapbox:  底图实例对象
- 返回屏幕坐标

**15，是否隐藏底图白膜**

**hiddenFillExtrusion(mapbox, ishidden)**
**参数：**
- ishidden: boolean 是否隐藏
- mapbox:  底图实例对象

**16，加载图片资源到底图上**

**addImageToMap(mapbox, path, imagesList, format)**

**参数：**
- path: string 加载图片存放路径
- imagesList： array 图片名称 list
- format: string  图片格式 如： png 
- mapbox:  底图实例对象

**17, 参考图层（用于控制其他图层的显示顺序）**

**addGroupLayer()**
- cityfun.thematic.reflayer-专题图层锚定图层
- cityfun.search.reflayer-查询图层锚定图层
- cityfun.measure.reflayer-测量图层锚定图层

---
_Source: https://npm.io/package/cfmap-4490 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._