2.3.9 • Published 10 days ago

cfmap v2.3.9

Weekly downloads
-
License
Copyright©2020 Ma...
Repository
-
Last release
10 days ago

cfmap-gl 开发文档

开发指南

cfmap-gl SDK 基于 mapbox-gl 的扩展库，不影响使用原生 mapboxgl 的功能。具体 API 参考 mapboxgl 官方文档

账号和获取密钥

通过平台账号密码获取

安装

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

  • EPSG:3857
<script src='./libs/cfmap/cfmap.min.css'></script>
<link href='./libs/cfmap/cfmap.min.js' rel='stylesheet' />

或，使用 npm 安装

npm i cfmap-gl
import cfmap from 'cfmap-gl'
  • EPSG:4326 和 EPSG:4490
<script src='./libs/cfmap/cfmap-4490.min.css'></script>
<link href='./libs/cfmap/cfmap-4490.min.js' rel='stylesheet' />

或，使用 npm 安装

npm i cfmap-gl-4490
import cfmap from 'cfmap-gl'

Hello World

使用 cfmap-gl SDK 创建一个简单的示例。

1、获取 cfToken

通过平台账号密码获取

2、准备页面

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

<!DOCTYPE html>

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

3、适应移动端页面展示

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

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

4、设置容器样式

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

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

4、引用 cfmap-gl 文件

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

5、创建地图容器元素

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

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

6、设置地图配置信息

  • cfToken: 使用平台账号获取的秘钥
  • ESPG: 指定地图服务使用的坐标系统
  • proxyArray: 矢量切片 json 中 source、sprite 等前缀地址需要替换时可配置，形式为数组 [0,1]，0 为被替换的地址，1 为替换成的地址

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

cfmap.setConfig({
  cfToken:
    "yAkqtubPdGtD61/l8DNLXhQrBCUcCeCQR9dzlyiMXHp3Qe9zsEtfy9k0YMAmXwOzx9p6BulJNYrLbejxUp6zYWpHhnKqZcgr3FjHGv8ybhHqLd4eWoGztA==",
  EPSG: 3857,
  geosite:"@cf",
  proxyArray:[['http://webres.cityfun.com.cn','http://webres.cityfun.com']],
});

7、创建地图实例

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

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

cfmap.setConfig({
        cfToken:
          "yAkqtubPdGtD61/l8DNLXhQrBCUcCeCQR9dzlyiMXHp3Qe9zsEtfy9k0YMAmXwOzx9p6BulJNYrLbejxUp6zYWpHhnKqZcgr3FjHGv8ybhHqLd4eWoGztA==",
      });
         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、监听地图加载完成事件

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

9、定位地图中心点

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

10、完成实例

<!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:
          "your access token",
        EPSG: 3857,
      });
      cfmap.setConfig({
        cfToken:
          "yAkqtubPdGtD61/l8DNLXhQrBCUcCeCQR9dzlyiMXHp3Qe9zsEtfy9k0YMAmXwOzx9p6BulJNYrLbejxUp6zYWpHhnKqZcgr3FjHGv8ybhHqLd4eWoGztA==",
      });
         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>

ArcGIS 瓦片服务

加载 arcgis server 发布的瓦片服务

  map.addArcGISTileLayer( "http://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(
    "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 服务

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 服务

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 参数来指定是否定位到服务配置文件中指定的相机参数。

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 服务

map.on("load", function() {
  const url = "http://192.168.2.12/GeoCMS/v1/cf/rest/services/MapService/3DT/5acb20f2-3a0b-413f-94b2-9505475c5364/tileset.json";
  const token = "pWrw0D4RPJM8aqouTVdCylc1kQSm3MEcAX0SE/ZVEKCl3TELpc/JZXmeVFpm/HasC2EMsS6ul+FfIgCN4lMXXrRB65gqqPFlCMGYWolkALjqLd4eWoGztA=="
  const layers =  map.add3DTitleLayer( 'mapbox-3dcesiumtitle-layer', url, token );
  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: 底图实例对象

示例 DEMO

cfmapmapbox
mapbox-gldeck.gl@loaders.gl/3d-tiles@turf/area@turf/distancelodash.clonedeeplodash.mergewhatwg-fetch
@infinitebrahmanuniverse/nolb-cf@everything-registry/sub-chunk-1309@zalastax/nolb-cf
2.3.8

10 days ago

2.3.9

10 days ago

2.3.7

4 months ago

2.3.6

5 months ago

2.3.5

2 years ago

2.3.3

2 years ago

2.3.2

3 years ago

2.3.0

3 years ago

1.0.1

3 years ago