cfmap 开发文档

说明

---

封装

CfMap 是基于 mapbox-gl 的扩展库，封装不影响使用原生 mapbox-gl 的功能。原生 API 请参考 mapboxgl 官方文档

授权

获取流程： 申请平台账号→获取服务秘钥 (ak)→使用相关服务功能，平台门户地址

安装

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

• EPSG:3857

或，使用 npm 安装

npm i cfmap
import cfmap from 'cfmap'

• EPSG:4326 和 EPSG:4490

或，使用 npm 安装

npm i cfmap-4490
import cfmap from 'cfmap'

Hello World

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

1、获取 cfToken

> 通过平台账号密码获取

2、准备页面

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

> html > >

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

3、适应移动端页面展示

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

> html > >

4、设置容器样式

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

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

4、引用 cfmap 库文件

5、创建地图容器元素

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

<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 坐标）

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

7、创建地图实例

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

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

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

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

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

9、定位地图中心点

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

10、完成实例

  
    
    <title>地图展示</title>
    
    
    
    <style>
      body,
      html,
      #container {
        overflow: hidden;
        width: 100%;
        height: 100%;
        margin: 0;
      }
    </style>
    
  
  
    <div id="container"></div>
    
    
  

---

OGC 标准服务和 ESRI 服务加载

ArcGIS 瓦片服务

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

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

ArcGIS 动态服务

map.on("load", function() {
  map.addArcGISDynamicLayer(
    "https://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 服务

map.on("load", function() {
  map.addWMSLayer(
    "https://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 服务

map.on("load", function() {
  map.addWMTSLayer(
    "https://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 参数来指定是否定位到服务配置文件中指定的相机参数。

map.on("load", function() {
  map
    .loadMapStyle(
      "https://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 服务

map.on("load", function() {
        let url = "";
        let layer = map.add3DTitleLayer("", 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-测量图层锚定图层