CMSR 1.0.13

阿新 • • 發佈：2020-12-15

cmsr-map sdk 文件

如何使用

script 標籤引入

zysy 目錄和 cmsr-map.bundle.js 檔案放到專案根目錄
index.html 引入兩個檔案 zysy\lib\include-lib.js、cmsr-map-bundle.js，並且放在你的js程式碼前面

<script
        type="text/javascript"
        src="zysy/lib/include-lib.js?time=20200710"
        libpath="zysy/lib/"
        include="jquery,jquery.range,bootstrap,,bootstrap-table,bootstrap-checkbox,font-awesome,web-icons,layer,haoutil,nprogress,toastr,admui,turf,mapV,kjwt3d,echarts,echarts-gl,kjwt3d-visual,cesium-navigation"
></script>
<script type="text/javascript" src="cmsr-map.bundle.js?time=20200710"></script>

sdk的介面都在CMSRMap物件下
sdk會佔用 CMSRMap 和 viewer 兩個全域性變數，請不要覆蓋

node_modules 引入

將整個倉庫的程式碼(有package.json、dist資料夾和index.js檔案即可)，放到 /node_modules/@cmsr/cmsr-map
在webpack.config.js中做如下配置，將 zysy 資料夾拷貝到你的打包目錄根目錄

const CopyWebpackPlugin = require('copy-webpack-plugin');
const config = {
  plugins: [
    new CopyWebpackPlugin([{ from: path.join('./node_modules', '@cmsr/cmsr-map/dist/zysy'), to: 'zysy' }]),
  ],
}

index.html 引入 zysy\lib\include-lib.js 檔案並且放在你的js程式碼前面

<script
        type="text/javascript"
        src="zysy/lib/include-lib.js?time=20200710"
        libpath="zysy/lib/"
        include="jquery,jquery.range,bootstrap,,bootstrap-table,bootstrap-checkbox,font-awesome,web-icons,layer,haoutil,nprogress,toastr,admui,turf,mapV,kjwt3d,echarts,echarts-gl,kjwt3d-visual,cesium-navigation"
></script>

引入具體API時通過 import { xxx } from '@cmsr/cmsr-map'; 語句引入即可
初始化viewer後會佔用 CMSRMap 和 viewer 兩個全域性變數，請不要覆蓋

提供的API

地圖載入

initViewer(id, options)

程式碼示例

注意容器的class要有kjwt3d-container，否則樣式會出錯

<div  id="mapContainer" class="kjwt3d-container"></div>

// script標籤引入
var viewer = CMSRMap.initViewer('mapContainer', {
    config: {
        navigation: true,
    },
    viewerConfig: {
        center: {
            y: 31.214098, x: 121.591228, z: 5045.51, heading: 359.6, pitch: -55.1, roll: 360,
        },
        location: false,
        basemaps: [
            {
                name: '高德',
                type: 'www_gaode',
                crs: 'gcj',
                layer: 'img_d',
                visible: true,
            }, {
                name: '高德',
                type: 'www_gaode',
                crs: 'gcj',
                layer: 'img_z',
                visible: true,
            },
        ],
    },
});

// 使用es6語法
import { initViewer } from '@cmsr/cmsr-map';
const viewer = initViewer('mapContainer');

初始化地圖

引數名	型別	必填	預設值	說明
id	string	是		地圖容器id
options	Object	否		初始化viewer時接受的引數
options.config	Object	否		sdk的特殊引數
options.config.serverURL	string	否	''	替換圖層配置url地址中的$serverURL$引數
options.config.widgetBasePath	string	否	'zysy/'	配置程式碼倉庫目錄，使用history路由時需設定為絕對路徑，如'http://localhost:3000/zysy/'
options.config.navigation	boolean	否	true	是否啟用放大縮小按鈕
options.config.zeroDumpingInertia	boolean	否	false	是否啟用零阻尼的慣性保持
options.config.enableKeyboard	boolean	否	false	是否啟用鍵盤支援
options.viewerConfig.center	object	否	''	初始化時的地圖顯示中心點，具體引數見下方示例
options.viewerConfig.minzoom	number	否	1	地球可以放大的最小比例，單位米
options.viewerConfig.maxzoom	number	否	50000000	地球可以縮小的最大比例，單位米
options.viewerConfig.contextmenu	boolean	否	false	是否顯示右鍵選單
options.viewerConfig.location	object	否		是否顯示下方視角資訊，設為false不顯示
options.viewerConfig.navigation	object	否		是否顯示指北針設為false不顯示
options.viewerConfig.sceneMode	number	否	3	使用3維地圖還是2維地圖，使用2維地圖時設定為2
options.viewerConfig.mapMode2D	number	否	1	2D 地圖是可旋轉的還是可以在水平方向上無限滾動，0是可旋轉的，1是水平無限滾動
options.viewerConfig.basemaps	Array	否		陣列，地球基礎底圖配置，詳情見下方說明

示例 `options.viewerConfig.center`

const center = {  
    // 緯度
    y: 31.214098,
    // 緯度
    x: 121.591228,
    // 高度
    z: 5045.51,
    // 偏航角
    heading: 359.6,
    // 俯仰角
    pitch: -55.1,
    // 翻滾角
    roll: 360,
}

地圖圖層配置（basemaps）

basemaps 底圖配置

名稱	含義	說明
name	名稱	字串
visible	顯示狀態	boolean 單選（是、否）
type	型別
pid	上級唯一標識	int，主要是圖層樹的上下級控制
center	顯示圖層時定位處	配置同`options.viewerConfig.center`
flyTo	是否自動定位到center	boolean
layer	圖層名稱
crs	座標系

目前支援的 basemaps type 型別

分類	type值	說明
分組	group
天地圖地圖	www_tdt
必應地圖	www_bing
高德地圖	www_gaode
谷歌地圖	www_google
百度地圖	www_baidu
XYZ 瓦片資料	tile	具有 xyz 格式地址的瓦片圖層
WMTS 服務	wmts
WMS 服務	wms
3dtiles 模型	3dtiles
gltf 模型	gltf
GeoJSON 格式資料	geojson
KML 格式資料	kml
CZML 格式資料	czml

basemaps各type的可選項

分類	引數	含義	說明
www_tdt	layer	圖層名稱	單選：vec_d（電子底圖）、vec_z（電子註記）、img_d（衛星底圖）、img_z（衛星註記）、ter_d（地形底圖）、ter_z（地形註記）
www_tdt	crs	座標系	單選：標準座標系（4326）、墨卡託投影（3857）
www_bing	layer	圖層名稱	單選： Aerial （無注記影像）、AerialWithLabels（有英文標記影像）、 Road（向量道路）
www_gaode	layer	圖層名稱	單選：vec 電子地圖（含底圖和註記）、 img_d（衛星底圖單圖層）、img_z（衛星註記單圖層）、time（高德實時路況資訊）
www_gaode	crs	座標系	單選：gcj（國測局偏移座標系）
www_google	layer	圖層名稱	單選：vec 電子地圖（含底圖和註記）、 img_d（衛星底圖單圖層）、img_z（衛星註記單圖層）、ter（地形地圖（含底圖和註記）
www_google	crs	座標系	單選：標準座標系（wgs84）、偏移座標系（空）
www_baidu	layer	圖層名稱	單選：vec 電子（含底圖和註記）、img_d（衛星底圖）、img_z（衛星註記）、custom
www_baidu	customid	樣式名稱	custom 時有效，可選值：dark,midnight,grayscale,hardedge,light,redalert,googlelite ,grassgreen,pink,darkgreen,bluish

xyz 格式地址的瓦片圖層使用方式

當瓦片地圖 url 地址具有 xyz 規則的標準圖層時使用，其引數支援Cesium.UrlTemplateImageryProvider 所有 options

const demo = {
    pid: 10,
    name: 'OSM地圖',
    type: 'xyz',
    icon: 'zysy/img/basemaps/osm.png',
    url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
    subdomains: 'abc',
}

名稱	含義	說明
url	服務地址	string 字串
opacity	透明度	0到1的小數值
rectangle	瓦片邊界	string 字串
subdomains	佔位符集	string 字串
minimumLevel	最小層級	number
maximumLevel	最大層級	number
minimumTerrainLevel	顯示的最小層級	number
maximumTerrainLevel	顯示的最大層級	number
tileWidth	切片寬度	number
tileHeight	切片高度	number
enablePickFeatures	請求服務查詢	boolean 單選（是、否）
hasAlphaChannel	調節透明度通道	boolean 單選（是、否）
crs	座標系	墨卡託投影（3857）或 WGS84(4326)

OGC 標準 wms 服務圖層使用方式

OGC 標準WMS瓦片圖層，引數支援Cesium.WebMapServiceImageryProvider 所有 options

名稱	含義	說明
url	服務地址	string 字串
opacity	透明度	0到1的小數值
rectangle	瓦片邊界	string 字串
subdomains	佔位符集	string 字串
layers	圖層名稱	string 字串
parameters	請求服務時攜帶的引數	string 字串
minimumLevel	最小層級	number
maximumLevel	最大層級	number
minimumTerrainLevel	顯示的最小層級	number
maximumTerrainLevel	顯示的最大層級	number
tileWidth	切片寬度	number
tileHeight	切片高度	number
enablePickFeatures	請求服務查詢	boolean 單選（是、否）
showClickFeature	是否單擊高亮物件	boolean 單選（是、否）
popup	氣泡窗內容	string 字串
crs	座標系	墨卡託投影（3857）或 WGS84(4326)

傾斜攝影 3dtiles 模型

3dtiles 模型，支援 Cesium.Cesium3DTileset 類所有的屬性參，另外支援 offset 引數 xyz 為修正模型資料的原始經緯位置和高度

名稱	含義	說明
url	模型的地址	string 字串
maximumScreenSpaceError	清晰度	1-16，框架預設為 1，最清晰
maximumMemoryUsage	最大記憶體	number
dynamicScreenSpaceError	優化選項，減少切片錯誤	boolean 單選（是、否）
cullWithChildrenBounds	優化選項	boolean 單選（是、否）
luminanceAtZenith	亮度	number
offset	偏移	xyz 物件
eidtOffset	模型壓平裁剪偏移	xyz 物件
eidtOffset	模型壓平裁剪偏移	xyz 物件
opacity	透明度	0到1的小數值
showClickFeature	是否顯示單體構件	boolean 單選（是、否）
clickFeatureColor	構件選中的顏色	顏色字串 "#00FF00"
style	樣式	對應 Cesium3DTileStyle 類的引數，比如城市白膜時

basemaps示例

const maps = [
   {
     id: 10,
     name: '地圖底圖',
     type: 'group',
   },
   {
     pid: 10,
     name: '高德',
     type: 'www_gaode',
     crs: 'gcj',
     layer: 'vec',
     visible: false,
   },
   {
     pid: 10,
     name: '谷歌衛星',
     icon: 'zysy/img/basemaps/google_img.png',
     type: 'www_google',
     crs: 'wgs84',
     layer: 'img_d',
     visible: true,
   },
   {
     pid: 10,
     name: 'ArcGIS衛星',
     icon: 'zysy/img/basemaps/esriWorldImagery.png',
     type: 'arcgis',
     url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
     enablePickFeatures: false,
   },
    {
        pid: 10,
        type: 'terrain',
        name: 'ArcGIS地形',
        terrain: {
          type: 'arcgis',
          url: 'https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer',
        },
        radio: true,
      },
   {
     pid: 10,
     name: '微軟衛星',
     icon: 'zysy/img/basemaps/bingAerial.png',
     type: 'www_bing',
     layer: 'Aerial',
   },
   {
     pid: 10,
     name: '天地圖衛星',
     icon: 'zysy/img/basemaps/tdt_img.png',
     type: 'www_tdt',
     layer: 'img_d',
     key: [
       '313cd4b28ed520472e8b43de00b2de56',
       '83b36ded6b43b9bc81fbf617c40b83b5',
       '0ebd57f93a114d146a954da4ecae1e67',
       '6c99c7793f41fccc4bd595b03711913e',
       '56b81006f361f6406d0e940d2f89a39c',
     ],
   },
   {
     pid: 10,
     name: '天地圖電子',
     icon: 'zysy/img/basemaps/tdt_vec.png',
     type: 'group',
     layers: [
       {
         name: '底圖', type: 'www_tdt', layer: 'vec_d', key: ['313cd4b28ed520472e8b43de00b2de56'],
       },
       {
         name: '註記', type: 'www_tdt', layer: 'vec_z', key: ['83b36ded6b43b9bc81fbf617c40b83b5'],
       },
     ],
   },
   {
     pid: 10,
     name: '天地圖地形',
     icon: 'zysy/img/basemaps/tdt_ter.png',
     type: 'group',
     layers: [
       {
         name: '底圖', type: 'www_tdt', layer: 'ter_d', key: ['313cd4b28ed520472e8b43de00b2de56'],
       },
       {
         name: '註記', type: 'www_tdt', layer: 'ter_z', key: ['83b36ded6b43b9bc81fbf617c40b83b5'],
       },
     ],
   },
   {
     pid: 10,
     name: 'OSM地圖',
     type: 'xyz',
     icon: 'zysy/img/basemaps/osm.png',
     url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
     subdomains: 'abc',
   },
   {
     pid: 10,
     name: '藍色底圖',
     icon: 'zysy/img/basemaps/bd-c-midnight.png',
     type: 'arcgis',
     url: 'http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer',
     enablePickFeatures: false,
   },
   {
     pid: 10,
     name: '單張圖片',
     icon: 'zysy/img/basemaps/offline.png',
     type: 'image',
     url: 'zysy/img/world/world.jpg',
   },
 ];

標繪編輯

標繪的名稱空間放在draw下

draw.DrawControl

例項化引數

引數名	型別	必填	預設值	說明
viewer	object	是	無	initViewer函式的返回值

標繪類，使用標繪時要例項化一個標繪類

import {draw} from '@cmsr/cmsr-map';
const drawControl = new draw.DrawControl(window.viewer);

標繪工具使用完時要記得執行destroy方法

drawControl.destroy();

設定標繪物件的popup彈窗

draw.setEntityPopup(entity, popupString)

引數名	型別	必填	預設值	說明
entity	object	是	無	標繪例項
popupString	string	是	無	標繪彈窗內容，可以是html

該方法不屬於DrawControl類，而是放在名稱空間draw下

// 使用popup掛載vue元件
import Counter from './Counter.vue';
import Vue from 'vue';
viewer = CMSRMap.initViewer('mapContainer');
setTimeout(()=>{
  window.drawControl = new CMSRMap.draw.DrawControl(viewer);
  var entity = drawControl.addMarkerByGeoJson({"type":"FeatureCollection","features":[{"type":"Feature","properties":{"name":"圖示點2","type":"point","edittype":"point"},"geometry":{"type":"Point","coordinates":[121.60156,31.241837,-0.02]}}]})[0];
  viewer.flyTo(entity);
  CMSRMap.draw.setEntityPopup(entity, '<div id="container"></div>');
  viewer.kjwt.popup.show(entity);
  setTimeout(() => {
    const CounterComponent = Vue.extend(Counter);
    new CounterComponent().$mount('#container');
  }, 60);
}, 60);

// Counter.vue
<template>
  <div class="counter-con">
    <div>{{num}}</div>
    <el-button class="button" @click="incr">自增加一</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 0,
    };
  },
  methods: {
    incr() {
      this.num++;
    },
  },
};
</script>

設定標繪物件的水波紋

draw.setEntityWaveCircle(entity, options)

注意：水波紋佔用了entity的ellipse物件。

引數名	型別	必填	預設值	說明
entity	object	是	無	需要設定的entity
options	object \|null	否	無	配置項，設定為null時刪除水波紋
options.width	number	否	100	水波紋寬度，單位米
options.height	number	否	0	水波紋距地面高度，單位米
options.duration	number	否	3000	水波紋一次時間
options.gradient	number	否	0.5	水波紋寬度比例
options.count	number	否	1	水波紋一次水波個數
options.color	cssColorString	否	#ff0000	水波紋顏色

獲取圖形頂點經緯度集合

draw.getCoordinates(entity) -> [[經度,緯度,高度]]

引數名	型別	必填	預設值	說明
entity	object	是	無	需要設定的entity

手動繪製圖形

draw.startDraw(viewer, options)

引數名	型別	必填	預設值	說明
viewer	object	是	無	initViewer函式的返回值
options	object	是	無	配置項
options.type	string	是	無	繪製圖形型別，有`rectangle`、`polygon`、`ellipse`
options.style	object	否		配置圖形樣式，style的配置項參考下面`drawControl.updateMarkerAttribute`介面的style
options.success	function	否	無	回撥函式，入參為繪製的entity

CMSRMap.draw.startDraw(viewer,{type:'rectangle',success:(entity)=>{
  // 獲取entity圖形的頂點經緯度集合
  var coordinates = CMSRMap.draw.getCoordinates(entity);
  console.log('entity', entity);
  console.log('coordinates', coordinates);
}});

注意

下面文件中的drawControl指的是DrawControl類的例項

啟動標繪視窗

drawControl.initDrawPanel(drawList, geojson)

啟動標繪視窗，同時使所有標繪處於可編輯狀態

引數名	型別	必填	預設值	說明
drawList	Array	是	無	panel的標繪列表
geojson	string	是	無	初始化時的資料，格式為geojson格式，可參考下面新增標註介面的示例

drawList示例:

const drawList = {
  點及文字: [
    {
      name: '文字',
      image: '$plot$/img/label.jpg',
      type: 'label',
      edittype: 'label',
      iconClass: 'fa fa-text-width',
    },
    {
      name: '點',
      image: '$plot$/img/point.jpg',
      type: 'point',
      edittype: 'point',
    },
    {
      name: '圖示點1',
      type: 'billboard',
      edittype: 'billboard',
      style: {
        image: 'http://localhost:3000/zysy/img/marker/mark1.png',
      },
    },
    {
      name: '圖示點2',
      type: 'billboard',
      edittype: 'billboard',
      style: {
        image: '$serverURL$/zysy/img/marker/mark2.png',
      },
    },
    {
      name: '圖示點2',
      type: 'billboard',
      edittype: 'billboard',
      style: {
        image: '$serverURL$/zysy/img/marker/mark3.png',
      },
    },
    {
      name: '圖示點4',
      type: 'billboard',
      edittype: 'billboard',
      style: {
        image: '$serverURL$/zysy/img/marker/mark4.png',
      },
    },
  ],
  小模型: [
    {
      name: '飛機',
      image: '$serverURL$/zysy/data/img/feiji.jpg',
      type: 'model',
      style: {
        modelUrl: '$serverURL$/zysy/data/gltf/feiji.glb',
      },
    },
    {
      name: '戰機',
      scale: 0.1,
      image: '$serverURL$/zysy/data/img/zhanji.jpg',
      type: 'model',
      style: {
        modelUrl: '$serverURL$/zysy/data/gltf/zhanji.glb',
      },
    },
    {
      name: '木樓',
      image: '$serverURL$/zysy/data/img/WoodTower.jpg',
      type: 'model',
      style: {
        modelUrl: '$serverURL$/zysy/data/gltf/Wood_Tower.gltf',
      },
    },
  ],
  二維平面類: [
    {
      name: '線',
      image: '$plot$/img/polyline.jpg',
      type: 'polyline',
      edittype: 'polyline',
      style: {
        clampToGround: false,
      },
    },
    {
      name: '貼地線',
      image: '$plot$/img/polyline_clampToGround.jpg',
      type: 'polyline',
      edittype: 'polyline',
      style: {
        clampToGround: true,
        color: '#ffff00',
      },
    },
    {
      name: '面',
      image: '$plot$/img/polygon.jpg',
      type: 'polygon',
      edittype: 'polygon',
    },
    {
      name: '貼地面',
      image: '$plot$/img/polygon_clampToGround.jpg',
      type: 'polygon',
      edittype: 'polygon_clampToGround',
    },
    {
      name: '矩形',
      image: '$plot$/img/rectangle.jpg',
      type: 'rectangle',
      edittype: 'rectangle',
    },
    {
      name: '貼地矩形',
      image: '$plot$/img/rectangle_clampToGround.jpg',
      type: 'rectangle',
      edittype: 'rectangle',
      style: {
        clampToGround: true,
        color: '#ffff00',
      },
    },
    {
      name: '圓',
      image: '$plot$/img/circle.jpg',
      type: 'circle',
      edittype: 'circle',
    },
    {
      name: '貼地圓',
      image: '$plot$/img/circle_clampToGround.jpg',
      type: 'circle',
      edittype: 'circle_clampToGround',
    },
  ],
  三維立體類: [

    {
      name: '管道',
      image: '$plot$/img/polylineVolume.jpg',
      type: 'polylineVolume',
      edittype: 'polylineVolume',
      hide: true,
    },
    {
      name: '多邊立體',
      image: '$plot$/img/extrudedPolygon.jpg',
      type: 'polygon',
      edittype: 'extrudedPolygon',
      style: {
        extrudedHeight: 100,
      },
    },
    {
      name: '立方體',
      image: '$plot$/img/extrudedRectangle.jpg',
      type: 'rectangle',
      edittype: 'extrudedRectangle',
    },

    {
      name: '盒子',
      image: '$plot$/img/box.jpg',
      type: 'box',
      edittype: 'box',
    },

    {
      name: '圓柱體',
      image: '$plot$/img/extrudedCircle.jpg',
      type: 'circle',
      edittype: 'extrudedCircle',
    },
    {
      name: '球體',
      image: '$plot$/img/ellipsoid.jpg',
      type: 'ellipsoid',
      edittype: 'ellipsoid',
    },
  ],
};

從geojson載入標繪

drawControl.addMarkerByGeoJson(geoJson)

示例

drawControl.addMarkerByGeoJson({
    "type": "FeatureCollection",
    "features": [
    {
     "type": "Feature",
     "properties": {
       "name": "文字",
       "type": "label",
       "edittype": "label",
       "iconClass": "fa fa-text-width",
       "style": {
         "text": "文字hhhhhhhhhhhhhhhh",
         "color": "#ffffff",
         "opacity": 1,
         "font_family": "楷體",
         "font_size": 30,
         "border": true,
         "border_color": "#000000",
         "border_width": 3,
         "background": false,
         "background_color": "#000000",
         "background_opacity": 0.5,
         "font_weight": "normal",
         "font_style": "normal",
         "scaleByDistance": false,
         "scaleByDistance_far": 1000000,
         "scaleByDistance_farValue": 0.1,
         "scaleByDistance_near": 1000,
         "scaleByDistance_nearValue": 1,
         "distanceDisplayCondition": false,
         "distanceDisplayCondition_far": 10000,
         "distanceDisplayCondition_near": 0,
         "clampToGround": false,
         "visibleDepth": true
       },
       "attr": {
         "id": "", // drawControl.getEntityById 所查詢的id
         "name": "",
         "remark": ""
       }
     },
     "geometry": {
       "type": "Point",
       "coordinates": [
         121.587937,
         31.247518,
         9.81
       ]
     }
    }
    ]
    });

更新標繪屬性

drawControl.updateMarkerAttribute(attributes, entity)

entity是標繪物件可從drawControl.getEntities() 獲得

attributes 示例如下

// 文字
const text = {
  type: 'label',
  style: {
    text: '文字', // 內容
    color: '#ffffff', // 顏色
    opacity: 1, // 透明度
    font_family: '楷體', // 字型
    font_size: 30, // 字型大小
    border: true, // 是否襯色
    border_color: '#000000', // 襯色顏色
    border_width: 3, // 襯色寬度
    background: false, // 是否背景
    background_color: '#000000', // 背景顏色
    background_opacity: 0.5, // 背景透明度
    font_weight: 'normal', // 是否加粗
    font_style: 'normal', // 是否斜體
    scaleByDistance: false, // 是否按視距縮放
    scaleByDistance_far: 1000000, // 上限
    scaleByDistance_farValue: 0.1, // 比例值
    scaleByDistance_near: 1000, // 下限
    scaleByDistance_nearValue: 1, // 比例值
    distanceDisplayCondition: false, // 是否按視距顯示
    distanceDisplayCondition_far: 10000, // 最大距離
    distanceDisplayCondition_near: 0, // 最小距離
    clampToGround: false, // 是否貼地
    visibleDepth: true, // 是否被遮擋
  },
};
// 點
const point = {
  type: 'point',
  style: {
    pixelSize: 10, // 畫素大小
    color: '#3388ff', // 顏色
    opacity: 1, // 透明度
    outline: true, // 是否邊框
    outlineColor: '#ffffff', // 邊框顏色
    outlineOpacity: 0.6, // 邊框透明度
    outlineWidth: 2, // 邊框寬度
    scaleByDistance: false, // 是否按視距縮放
    scaleByDistance_far: 1000000, // 上限
    scaleByDistance_farValue: 0.1, // 比例值
    scaleByDistance_near: 1000, // 下限
    scaleByDistance_nearValue: 1, // 比例值
    distanceDisplayCondition: false, // 是否按視距顯示
    distanceDisplayCondition_far: 10000, // 最大距離
    distanceDisplayCondition_near: 0, // 最小距離
    clampToGround: false, // 是否貼地
    visibleDepth: true, // 是否被遮擋
  },
};
// 圖示點標記
const billboard = {
  type: 'billboard',
  style: {
    image: 'img/marker.png', // 圖示
    opacity: 1, // 透明度
    scale: 1, // 大小比例
    rotation: 0, // 旋轉角度
    horizontalOrigin: 'CENTER', // 橫向對齊
    verticalOrigin: 'BOTTOM', // 垂直對齊
    scaleByDistance: false, // 是否按視距縮放
    scaleByDistance_far: 1000000, // 上限
    scaleByDistance_farValue: 0.1, // 比例值
    scaleByDistance_near: 1000, // 下限
    scaleByDistance_nearValue: 1, // 比例值
    distanceDisplayCondition: false, // 是否按視距顯示
    distanceDisplayCondition_far: 10000, // 最大距離
    distanceDisplayCondition_near: 0, // 最小距離
    clampToGround: false, // 是否貼地
    visibleDepth: true, // 是否被遮擋

  },
};
// 模型
const model = {
  type: 'model',
  style: {
    modelUrl: '', // 路徑
    scale: 1, // 比例
    heading: 0, // 方向角
    pitch: 0, // 俯仰角
    roll: 0, // 翻滾角
    fill: false, // 是否填充
    color: '#3388ff', // 顏色
    opacity: 1, // 透明度
    silhouette: false, // 是否輪廓
    silhouetteColor: '#ffffff', // 輪廓顏色
    silhouetteSize: 2, // 輪廓寬度
    silhouetteAlpha: 0.8, // 輪廓透明度
    clampToGround: false, // 是否貼地

  },
};
// 線
const polyline = {
  type: 'polyline',
  style: {
    lineType: 'solid', // 線型
    animationDuration: 1000, // 速度
    animationImage: 'img/textures/lineClr.png', // 圖片
    color: '#3388ff', // 顏色
    width: 4, // 線寬
    clampToGround: false, // 是否貼地
    outline: false, // 是否襯色
    outlineColor: '#ffffff', // 襯色顏色
    outlineWidth: 2, // 襯色寬度
    opacity: 1, // 透明度
    zIndex: 0, // 層級順序

  },
};
// 管道線
const polylineVolume = {
  type: 'polylineVolume',
  style: {
    color: '#00FF00', // 顏色
    radius: 10, // 半徑
    shape: 'pipeline', // 形狀
    outline: false, // 是否襯色
    outlineColor: '#ffffff', // 襯色顏色
    opacity: 1, // 透明度

  },
};
// 面
const polygon = {
  type: 'polygon',
  style: {
    fill: true, // 是否填充
    fillType: 'color', // 填充型別
    grid_lineCount: 8, // 網格數量
    grid_lineThickness: 2, // 網格寬度
    grid_cellAlpha: 0.1, // 填充透明度
    stripe_oddcolor: '#ffffff', // 條紋襯色
    stripe_repeat: 6, // 條紋數量
    checkerboard_oddcolor: '#ffffff', // 棋盤襯色
    checkerboard_repeat: 4, // 棋盤格數
    color: '#3388ff', // 顏色
    opacity: 0.6, // 透明度
    stRotation: 0, // 填充方向
    outline: true, // 是否邊框
    outlineWidth: 1, // 邊框寬度
    outlineColor: '#ffffff', // 邊框顏色
    outlineOpacity: 0.6, // 邊框透明度
    clampToGround: false, // 是否貼地
    zIndex: 0, // 層級順序
    extrudedHeight: 100, // 拉伸高度
  },
};
// 矩形
const rectangle = {
  type: 'rectangle',
  style: {
    height: 0, // 高程
    fill: true, // 是否填充
    fillType: 'color', // 填充型別
    grid_lineCount: 8, // 網格數量
    grid_lineThickness: 2, // 網格寬度
    grid_cellAlpha: 0.1, // 填充透明度
    stripe_oddcolor: '#ffffff', // 條紋襯色
    stripe_repeat: 6, // 條紋數量
    checkerboard_oddcolor: '#ffffff', // 棋盤襯色
    checkerboard_repeat: 4, // 棋盤格數
    color: '#3388ff', // 顏色
    opacity: 0.6, // 透明度
    outline: true, // 是否邊框
    outlineWidth: 1, // 邊框寬度
    outlineColor: '#ffffff', // 邊框顏色
    outlineOpacity: 0.6, // 邊框透明度
    rotation: 0, // 旋轉角度
    stRotation: 0, // 材質角度
    clampToGround: false, // 是否貼地
    zIndex: 0, // 層級順序
    extrudedHeight: 100, // 高度
  },
};
// 圓
const circle = {
  type: 'circle',
  style: {
    radius: 100, // 半徑
    height: 0, // 高程
    fill: true, // 是否填充
    fillType: 'color', // 填充型別
    animationDuration: 1000, // 速度
    animationCount: 1, // 圈數
    animationGradient: 0.1, // 圈間係數
    grid_lineCount: 8, // 網格數量
    grid_lineThickness: 2, // 網格寬度
    grid_cellAlpha: 0.1, // 填充透明度
    stripe_oddcolor: '#ffffff', // 條紋襯色
    stripe_repeat: 6, // 條紋數量
    checkerboard_oddcolor: '#ffffff', // 棋盤襯色
    checkerboard_repeat: 4, // 棋盤格數
    color: '#3388ff', // 填充顏色
    opacity: 0.6, // 透明度
    stRotation: 0, // 填充方向
    outline: true, // 是否邊框
    outlineWidth: 1, // 邊框寬度
    outlineColor: '#ffffff', // 邊框顏色
    outlineOpacity: 0.6, // 邊框透明度
    rotation: 0, // 旋轉角度
    clampToGround: false, // 是否貼地
    zIndex: 0, // 層級順序
    extrudedHeight: 100, // 拉伸高度
  },
};
// 橢圓
const ellipse = {
  type: 'ellipse',
  style: {
    semiMinorAxis: 100, // 短半徑
    semiMajorAxis: 100, // 長半徑
    height: 0, // 高程
    fill: true, // 是否填充
    fillType: 'color', // 填充型別
    animationDuration: 1000, // 速度
    animationCount: 1, // 圈數
    animationGradient: 0.1, // 圈間係數
    grid_lineCount: 8, // 網格數量
    grid_lineThickness: 2, // 網格寬度
    grid_cellAlpha: 0.1, // 填充透明度
    stripe_oddcolor: '#ffffff', // 條紋襯色
    stripe_repeat: 6, // 條紋數量
    checkerboard_oddcolor: '#ffffff', // 棋盤襯色
    checkerboard_repeat: 4, // 棋盤格數
    color: '#3388ff', // 填充顏色
    opacity: 0.6, // 透明度
    stRotation: 0, // 填充方向
    outline: true, // 是否邊框
    outlineWidth: 1, // 邊框寬度
    outlineColor: '#ffffff', // 邊框顏色
    outlineOpacity: 0.6, // 邊框透明度
    rotation: 0, // 旋轉角度
    clampToGround: false, // 是否貼地
    zIndex: 0, // 層級順序
    extrudedHeight: 100, // 拉伸高度
  },
};
// 圓錐體
const cylinder = {
  type: 'cylinder',
  style: {
    topRadius: 0, // 頂部半徑
    bottomRadius: 100, // 底部半徑
    length: 100, // 高度
    fill: true, // 是否填充
    fillType: 'color', // 填充型別
    animationDuration: 1000, // 速度
    animationCount: 1, // 圈數
    animationGradient: 0.1, // 圈間係數
    color: '#00FF00', // 填充顏色
    opacity: 0.6, // 透明度
    outline: false, // 是否邊框
    outlineWidth: 1, // 邊框寬度
    outlineColor: '#ffffff', // 邊框顏色
    outlineOpacity: 0.6, // 邊框透明度
  },
};
// 球體
const ellipsoid = {
  type: 'ellipsoid',
  style: {
    extentRadii: 100, // 長半徑
    widthRadii: 100, // 寬半徑
    heightRadii: 100, // 高半徑
    fill: true, // 是否填充
    fillType: 'color', // 填充型別
    grid_lineCount: 8, // 網格數量
    grid_lineThickness: 2, // 網格寬度
    grid_cellAlpha: 0.1, // 填充透明度
    stripe_oddcolor: '#ffffff', // 條紋襯色
    stripe_repeat: 6, // 條紋數量
    checkerboard_oddcolor: '#ffffff', // 棋盤襯色
    checkerboard_repeat: 4, // 棋盤格數
    color: '#00FF00', // 顏色
    opacity: 0.6, // 透明度
    outline: true, // 是否邊框
    outlineWidth: 1, // 邊框寬度
    outlineColor: '#ffffff', // 邊框顏色
    outlineOpacity: 0.6, // 邊框透明度
  },
};
// 平面
const plane = {
  type: 'plane',
  style: {
    dimensionsX: 100, // 長度
    dimensionsY: 100, // 寬度
    plane_normal: 'z', // 方向
    plane_distance: 0, // 偏移距離
    fill: true, // 是否填充
    fillType: 'color', // 填充型別
    grid_lineCount: 8, // 網格數量
    grid_lineThickness: 2, // 網格寬度
    grid_cellAlpha: 0.1, // 填充透明度
    stripe_oddcolor: '#ffffff', // 條紋襯色
    stripe_repeat: 6, // 條紋數量
    checkerboard_oddcolor: '#ffffff', // 棋盤襯色
    checkerboard_repeat: 4, // 棋盤格數
    color: '#00FF00', // 顏色
    opacity: 0.6, // 透明度
    outline: true, // 是否邊框
    outlineWidth: 1, // 邊框寬度
    outlineColor: '#ffffff', // 邊框顏色
    outlineOpacity: 0.6, // 邊框透明度
    distanceDisplayCondition: false, // 是否按視距顯示
    distanceDisplayCondition_far: 10000, // 最大距離
    distanceDisplayCondition_near: 0, // 最小距離
  },
};
// 盒子
const box = {
  type: 'box',
  style: {
    dimensionsX: 100, // 盒子長度
    dimensionsY: 100, // 盒子寬度
    dimensionsZ: 100, // 盒子高度
    fill: true, // 是否填充
    fillType: 'color', // 填充型別
    grid_lineCount: 8, // 網格數量
    grid_lineThickness: 2, // 網格寬度
    grid_cellAlpha: 0.1, // 填充透明度
    stripe_oddcolor: '#ffffff', // 條紋襯色
    stripe_repeat: 6, // 條紋數量
    checkerboard_oddcolor: '#ffffff', // 棋盤襯色
    checkerboard_repeat: 4, // 棋盤格數
    color: '#00FF00', // 顏色
    opacity: 0.6, // 透明度
    outline: true, // 是否邊框
    outlineWidth: 1, // 邊框寬度
    outlineColor: '#ffffff', // 邊框顏色
    outlineOpacity: 0.6, // 邊框透明度
    distanceDisplayCondition: false, // 是否按視距顯示
    distanceDisplayCondition_far: 10000, // 最大距離
    distanceDisplayCondition_near: 0, // 最小距離
    clampToGround: false, // 是否貼地
  },
};

更新標繪地理座標

drawControl.updateMarkerPosition(position, entity)
position是一個數組 [經度, 緯度, 高程]

刪除標繪

drawControl.deleteMarker(entity)

獲取所有標繪物件

drawControl.getEntities()
獲得標繪例項(entity)列表，entity上有該標繪的屬性

根據id獲取標繪物件

drawControl.getEntityById()
根據id獲得標繪例項(entity)entity上有該標繪的屬性，該id是傳入geojson的properties的attr屬性中的id，
當多個id相同時，返回第一個匹配的entity

將標繪移到視野中心

drawControl.flyTo(entity)

獲取所有標繪的geojson

drawControl.getGeoJson()

增加entity的事件監聽器

drawControl.addEntityEventListener(type, action)

已廢棄，請使用EntityEventHandler

引數名	型別	必填	預設值	說明
type	BaseMap.ScreenSpaceEventType	是	無	從BaseMap.ScreenSpaceEventType中取值
action	fucntion	是	無	回撥函式

刪除entity的事件監聽器

drawControl.removeEntityEventListener(type, action)

已廢棄，請使用EntityEventHandler

引數名	型別	必填	預設值	說明
type	BaseMap.ScreenSpaceEventType	是	無	從BaseMap.ScreenSpaceEventType中取值
action	fucntion	是	無	回撥函式

刪除全部的entity事件監聽器

drawControl.removeAllEventHandler()

已廢棄，請使用EntityEventHandler

刪除全部的標繪

drawControl.removeAll()

drawControl 支援的編輯事件

draw.event

引數名	說明
EditStart	編輯模式下點選標繪觸發
EditMovePoint	編輯模式下移動標繪觸發
EditStop	編輯模式下點選其他地方，標繪失去編輯中狀態時觸發
EditRemovePoint	刪除標繪時觸發

drawControl 註冊編輯事件

drawControl.on(EditEventType, fn)

引數名	型別	必填	預設值	說明
EditEventType	draw.event所列的型別	是	無	從draw.event中取值
fn	fucntion	是	無	回撥函式

drawControl 登出編輯事件

drawControl.off(EditEventType, fn)

引數名	型別	必填	預設值	說明
EditEventType	draw.event所列的型別	是	無	從draw.event中取值
fn	fucntion	是	無	回撥函式

drawControl 開啟位置編輯模式

drawControl.startPositionEdit()

程式碼示例

地圖上顯示一個圖示，並且監聽開始編輯、移動結束、結束編輯事件

var drawControl = new CMSRMap.draw.DrawControl(viewer);
//drawControl.initDrawPanel();
var entity = drawControl.addMarkerByGeoJson({"type":"FeatureCollection","features":[{"type":"Feature","properties":{"name":"圖示點2","type":"billboard","edittype":"billboard","style":{"image":"http://localhost:3000/zysy/img/marker/mark3.png"},"attr":{"id":"xiaomo","name":"","remark":""}},"geometry":{"type":"Point","coordinates":[121.60156,31.241837,-0.02]}}]});
viewer.flyTo(entity);
function fn(...rest){console.log(rest)};
drawControl.on(CMSRMap.draw.event.EditStart, fn);
drawControl.on(CMSRMap.draw.event.EditMovePoint, fn);
drawControl.on(CMSRMap.draw.event.EditStop, fn);
drawControl.startPositionEdit();

drawControl 關閉位置編輯模式

drawControl.stopPositionEdit()

drawControl 平滑移動標繪

updateMarkerPositionWithAnimation(entity, positionDict, options)

通過viewer內部時鐘平滑移動標繪

例項化引數

引數名	型別	必填	預設值	說明
entity	object	是	無	需要移動的entity
positionDict	object	是	無	座標位置描述
positionDict.longitude	number	是	無	經度
positionDict.latitude	number	是	無	緯度
positionDict.bearing	number	是	無	目標與正北方向的角度差，順時針為正
positionDict.height	number	是	無	海拔高度
options	object	否	無	配置項
options.duration	number	否	1	動畫時間，單位秒，預設1秒

drawControl 設定可保留的尾跡

drawControl.usePath(entity, options)

設定標繪在updateMarkerPositionWithAnimation方法的動畫中的尾跡，注意該方法是類方法

引數名	型別	必填	預設值	說明
entity	object	是	無	需要移動的entity
options	object	否	無	配置項
options.trailTime	number	否	undefined	尾跡顯示的時間，單位秒
options.width	number	否	undefined	尾跡顯示的寬度，單位畫素
options.material	object	否	undefined	尾跡顯示材質型別
options.material.type	string	否	undefined	尾跡顯示材質型別，有glow和stripe

options.material.type 為 glow-remain 時

引數名	型別	必填	預設值	說明
options.material.glowPower	number	否	0.25	指定發光強度，以匯流排寬的百分比表示
options.material.taperPower	string	否	1	指定漸縮效果的強度，以佔總線長的百分比表示。
如果為1.0或更高，則不使用錐度效果。
options.material.color	CMSRMap.BaseMap.Color	否	Color.WHITE	邊緣顏色

示例

var drawControl = new CMSRMap.draw.DrawControl(viewer);
var entity = drawControl.addMarkerByGeoJson({"type":"FeatureCollection","features":[{"type":"Feature","properties":{"name":"圖示點2","type":"billboard","edittype":"billboard","style":{"image":"https://webapi.amap.com/images/car.png"},"attr":{"id":"xiaomo","name":"","remark":""}},"geometry":{"type":"Point","coordinates":[121.593178,31.246319,0]}}]})[0];
drawControl.useRemainPath(entity, {trailTime:2,material:{type:'glow-remain'}});
drawControl.updateMarkerPositionWithAnimation(entity, {longitude: 121.793178, latitude: 31.446319, bearing: 0},{duration:10});

drawControl 是否有設定可保留尾跡

drawControl.hasPath(entity) -> boolean

drawControl 移除可保留尾跡

drawControl.removePath(entity) -> void

DrawControl 設定尾跡

DrawControl.usePath(entity, options)

設定標繪在updateMarkerPositionWithAnimation方法的動畫中的尾跡，注意該方法是類的靜態方法

引數名	型別	必填	預設值	說明
entity	object	是	無	需要移動的entity
options	object	否	無	配置項
options.trailTime	number	否	undefined	尾跡顯示的時間，單位秒
options.width	number	否	undefined	尾跡顯示的寬度，單位畫素
options.material	object	否	undefined	尾跡顯示材質型別
options.material.type	string	否	undefined	尾跡顯示材質型別，有glow和stripe

options.material.type 為 glow 時

引數名	型別	必填	預設值	說明
options.material.glowPower	number	否	0.25	指定發光強度，以匯流排寬的百分比表示
options.material.taperPower	string	否	1	指定漸縮效果的強度，以佔總線長的百分比表示。
如果為1.0或更高，則不使用錐度效果。
options.material.color	CMSRMap.BaseMap.Color	否	Color.WHITE	邊緣顏色

示例

import { draw, BaseMap } from '@cmsr/cmsr-map';
draw.DrawControl.usePath(entity, {
  trailTime: 7,
  width: 10,
  material: {
    type: 'glow',
    glowPower: 0.3,
    taperPower: 0.3,
    color: BaseMap.Color.fromCssColorString('#EEE8AA'),
  },
});

options.material.type 為 stripe 時

引數名	型別	必填	預設值	說明
options.material.orientation	CMSRMap.BaseMap.StripeOrientation	否	StripeOrientation.HORIZONTAL	指定條紋方向
options.material.evenColor	CMSRMap.BaseMap.Color	否	Color.WHITE	第一顏色
options.material.oddColor	CMSRMap.BaseMap.Color	否	Color.BLACK	第二顏色
options.material.offset	number	否	0	指定起始材料到圖案的距離
options.material.repeat	number	否	1	條紋重複的次數

示例

import { draw, BaseMap } from '@cmsr/cmsr-map';
draw.DrawControl.usePath(entity, {
  resolution: 1,
  trailTime: 60 * 2,
  width: 10,
  material: {
    type: 'stripe',
    evenColor: BaseMap.Color.fromCssColorString('#ffff00'),
    oddColor: BaseMap.Color.fromCssColorString('rgba(255,255,0,0.1)'),
    repeat: 1,
    offset: 0.25,
    orientation: BaseMap.StripeOrientation.VERTICAL,
  },
});

示例2

var drawControl = new CMSRMap.draw.DrawControl(viewer);
var entity = drawControl.addMarkerByGeoJson({"type":"FeatureCollection","features":[{"type":"Feature","properties":{"name":"圖示點2","type":"billboard","edittype":"billboard","style":{"image":"https://webapi.amap.com/images/car.png"},"attr":{"id":"xiaomo","name":"","remark":""}},"geometry":{"type":"Point","coordinates":[121.593178,31.246319,0]}}]})[0];
drawControl.usePathRemain(entity, {trailTime:2,material:{type:'glow-remain'}});
drawControl.updateMarkerPositionWithAnimation(entity, {longitude: 121.793178, latitude: 31.446319, bearing: 0},{duration:10});

DrawControl 是否有設定尾跡

DrawControl.hasPath(entity) -> boolean

DrawControl 移除尾跡

DrawControl.removePath(entity) -> void

銷燬方法

drawControl.destroy()

相機控制

CameraControl類

`CameraControl類`

相機控制類，下面介面說明中cameraControl代表類例項。

例項化引數

引數名	型別	必填	預設值	說明
viewer	object	是	無	initViewer函式的返回值

`cameraControl.trackEntity(entity, options) -> void`

引數名	型別	必填	預設值	說明
entity	object	是	無	要視角追蹤的entity
options	object	否	無	配置項
options.keepHeight	boolean	否	false	是否在初始化追蹤時保持相機高度
options.height	boolean	否	undefined	設定初始化追蹤時相機高度

追蹤一個entity，相機視角將隨entity位置變化而變化

示例

import {CameraControl} from '@cmsr/cmsr-map';
const cameraControl = new CameraControl(window.viewer);
cameraControl.trackEntity(carEntity, {keepHeight: true});

`cameraControl.stopTrackEntity() -> void`

停止追蹤

`cameraControl.getTrackedEntity() -> void`

獲取當前正在追蹤的entity

`cameraControl.getCameraPosition() -> {longitude,latitude,height}`

獲取相機位置

`cameraControl.getHeight() -> number`

獲取相機高度

`cameraControl.setHeight(height) -> void`

設定相機高度

例項化引數

引數名	型別	必填	預設值	說明
height	number	是	無	高度(米)

`cameraControl.getCenter() -> {longitude,latitude}`

獲取地圖中心點

`cameraControl.setCenter(longitude, latitude) -> void`

設定地圖中心點

`cameraControl.getZoomLevel() -> number`

獲取地圖層級

`cameraControl.setZoom(zoomLevel) -> void`

設定地圖層級

引數名	型別	必填	預設值	說明
zoomLevel	number	是	無	地圖層級

`cameraControl.getViewRect() -> ViewRect`

獲取地圖顯示範圍

ViewRect

屬性名	型別	必填	預設值	說明
west	number	是	無	最小經度
south	number	是	無	最小緯度
east	number	是	無	最大經度
north	number	是	無	最大緯度

`cameraControl.setViewRect(viewRect) -> void`

設定地圖顯示範圍

屬性名	型別	必填	預設值	說明
viewRect	ViewRect	是	無	地圖範圍
viewRect.west	number	是	無	最小經度
viewRect.south	number	是	無	最小緯度
viewRect.east	number	是	無	最大經度
viewRect.north	number	是	無	最大緯度

示例

var cc = new CMSRMap.CameraControl(viewer);
var rect = {west: 121.56856570625415, south: 31.20275811669924, east: 121.61389029374591, north: 31.225437883300746};
cc.setViewByRect(rect);

`cameraControl.getOrientation() -> {heading,pitch,roll}`

獲取相機視角

`cameraControl.setOrientation({heading,pitch,roll}) -> void`

設定相機視角

wms/wmts/wfs 載入

fileLoadControl.loadFile(fileUrl, fileType, viewer, needFlyTo = true, options)

載入檔案

引數名	型別	必填	預設值	說明
fileUrl	string	是		檔案url
fileType	string	是		檔案型別 ["wms", "wmts", "wfs"]
viewer	object	是		map viewer
needFlyTo	boolean	否	true	是否載入後立刻顯示到地圖中心
options	boolean	否		額外可配置的圖層屬性
options.alpha	number	否	40	圖層不透明度
options.rectangle	object	否	全球	圖層範圍

fileLoadControl.unloadFile(file, fileType, viewer)

移除檔案

引數名	型別	必填	說明
file	object	是	loadFile後得到的file物件
fileType	string	是	檔案型別 ["wms", "wmts", "wfs"]
viewer	object	是	map viewer

檔案載入

fileLoadControl.loadFile(fileUrl, fileType, viewer, needFlyTo = true, options)

載入檔案

引數名	型別	必填	預設值	說明
fileUrl	string	是		檔案url
fileType	string	是		檔案型別 ["json", "geojson", "topojson", "gltf", "glb", "3dtiles"]
viewer	object	是		map viewer
needFlyTo	boolean	否	true	是否載入後立刻顯示到地圖中心
options	boolean	否		額外可配置的圖層屬性
options.alpha	number	否	40	圖層不透明度
options.fillColor	string	否		圖層底色
options.strokeAlpha	number	否	100	符號不透明度
options.strokeColor	string	否		符號顏色
~~options.strokeWidth~~	number	否	2	符號粗細 px
options.clampToGround	boolean	否	false	是否貼地

fileLoadControl.unloadFile(file, fileType, viewer)

移除檔案

引數名	型別	必填	說明
file	object	是	loadFile後得到的file物件
fileType	string	是	檔案型別 ["json", "geojson", "topojson", "gltf", "glb", "3dtiles"]
viewer	object	是	map viewer

圖層樣式編輯

fileEditControl.editFile(file, fileType, options)

編輯檔案

引數名	型別	必填	預設值	說明
file	object	是		loadFile後得到的file物件
fileType	string	是		檔案型別 ["wms", "wmts", "wfs", "json", "geojson", "topojson", "gltf", "glb"]
options	boolean	否		額外可配置的圖層屬性
options.alpha	number	否	40	圖層不透明度
options.fillColor	string	否		圖層底色
options.strokeAlpha	number	否	100	符號不透明度
options.strokeColor	string	否		符號顏色
~~options.strokeWidth~~	number	否	2	符號粗細 px

fileLoadControl.flyToFile(file, fileType, viewer, options)

定位至檔案

引數名	型別	必填	說明
file	object	是
fileType	string	是
viewer	object	是	map viewer
options.pitch	number	否	俯角為負數取值為 0到-90
options.range	number	否	相機到圖層中心點的距離

空間量測

測量開啟後，左鍵加點，右鍵完成

measureControl.measurePoint()
開啟座標測量
measureControl.measureDistance()
開啟距離測量
measureControl.measure3dTiles(options)
開啟3d tiles上的測量，大範圍測量地形時可能數值不準

引數名	型別	必填	預設值	說明
options	object	是
options.showSpaceDistance	boolean	是	true	是否顯示空間距離
options.showHorizontalDistance	boolean	是	true	是否顯示水平距離
options.showVerticalDistance	boolean	是	true	是否顯示垂直距離

measureControl.measureAltitudeDiff()
開啟高差測量
measureControl.measureArea()
開啟面積測量
measureControl.clearMeasure()
刪除地圖上的測量標繪

3dtiles

3dtiles平移

tilesEditor.moveTo(tileLayer, longitude, latitude, height) static
@parm: tileLayer: 3dtiles 圖層 (loadFile返回值)
@parm：longitude：經度
@parm：latitude：緯度
@parm: height: 高度 defult 地形高度

3dtiles縮放

tilesEditor.scale(tileLayer, scaleFac) static
@parm: tileLayer: 3dtiles 圖層
@parm：scaleFac：縮放比例

3dtiles旋轉工具

tileEditorControl.enableTileRotate(tilelayer)

啟用旋轉工具，使用滑鼠編輯旋轉模型

@parm: tileLayer: 3dtiles 圖層 (loadFile返回值)

tileEditorControl.disableTileRotate()

關閉旋轉工具，結束滑鼠編輯

3dtiles平移工具

tileEditorControl.enableTileTranslate(tilelayer)

啟用旋轉工具，使用滑鼠編輯平移模型

@parm: tileLayer: 3dtiles 圖層 (loadFile返回值)

tileEditorControl.disableTileTranslate()

關閉平移工具，結束滑鼠編輯

layer 圖層管理

LayerControl類

`layer.LayerControl`

飛行漫遊控制類，下面介面說明中layerControl代表類例項。

例項化引數

引數名	型別	必填	預設值	說明
viewer	object	是	無	initViewer函式的返回值
options	object	否	無	配置項
options.autoCenter	object	否	false	是否在從不可見切換到可見時自動定位到圖層中央

例項化示例

var layerControl = new CMSRMap.layer.LayerControl(viewer);

`layerControl.addOperationalLayer(layerConfig) -> layer`

引數名	型別	必填	預設值	說明
layerConfig	object	是	無	圖層配置

新增圖層，返回單個圖層例項，返回的layer.config 中含有該圖層的id

示例

layers.addOperationalLayer( {
    pid: 3050, // 圖層的資料夾id，如無可不填
    type: 'kml', // 圖層型別
    name: '省界線2', // 圖層名稱
    url: 'http://localhost:3000/zysy/data/kml/province.kml', // 圖層連結
    symbol: { // 圖層樣式配置
            styleOptions: {
            color: '#00FF00',
            width: 2,
        },
    },
    visible: true, // 圖層載入時是否顯示
    flyTo: true // 圖層載入後定位到圖層
});

`layerControl.removeOperationalLayer(id) -> void`

引數名	型別	必填	預設值	說明
id	number	是	無	圖層id

根據移除圖層

`layerControl.getLayerById(id) -> layer`

引數名	型別	必填	預設值	說明
id	number	是	無	圖層id

根據id返回圖層

`layerControl.getLayers() -> layerDict`

獲得所有圖層

`layerControl.centerAtById(id) -> void`

引數名	型別	必填	預設值	說明
id	number	是	無	圖層id

定位到圖層

`layerControl.getLayerVisible(id) -> boolean`

引數名	型別	必填	預設值	說明
id	number	是	無	圖層id

根據id返回圖層是否設定為顯示

`layerControl.updateLayerVisibleById(id,visible) -> void`

引數名	型別	必填	預設值	說明
id	number	是	無	圖層id
visible	visible	是	無	是否可見

根據id設定圖層是否顯示

`layerControl.getBasemap() -> layer`

獲取當前底圖

`layerControl.changeBaseMap(name) -> void`

引數名	型別	必填	預設值	說明
name	string	是	無	initviewer basemaps 中圖層配置項裡的name

切換當前底圖

定位

~~layer.coordLocation(viewer, locationInfo)~~

~~已廢棄，經緯度定位(非同步)~~

引數名	型別	必填	預設值	說明
viewer	object	是	無	initViewer函式的返回值
locationInfo	array	是	無	經緯度陣列，單個經緯度形如 [ 經度, 緯度]

示例

CMSRMap.layerControl.coordLocation(viewer,[[116.3905,39.92195],[116.3505,39.917],[116.403,39.88]]);

viewer.flyTo(target)

圖層物件定位

引數名	型別	必填	預設值	說明
viewer	object	是	無	initViewer函式的返回值
target	object	是	無	fileLoadControl.loadFile 的返回引數，或者自定義標繪的entity

layer.locateByFeature(viewer, feature, options)

要素定位

引數名	型別	必填	預設值	說明
viewer	object	是	無	initViewer函式的返回值
feature	geojson	是	無	geojson格式的物件，需要第一層type為FeatureCollection
options	object	否	無	配置項
options.needFlyTo	boolean	否	false	是否需要飛行動畫
options.height	number	否	5000	相機高度，注意僅在座標只有一個時可用
options.orientation	object	否	{heading: 360,pitch: -90,roll: 0}	相機角度

示例

CMSRMap.layerControl.locateByFeature(viewer,{"type":"FeatureCollection","features":[
            {"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[116.39070510864258,39.9027571616608]}},
            {"type":"Feature","properties":{},"geometry":{"type":"LineString","coordinates":[[116.4605712890625,40.01367962745832],[116.47653579711913,40.013153729849954],           [116.49387359619142,39.99737491734879],[116.51052474975586,40.01210192247637],[116.52975082397461,40.02091030864033],[116.54794692993164,40.026825750639496]]}},    {"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[116.27792358398436,39.845449231287226],[116.28135681152342,39.83068633533497],            [116.33010864257814,39.832268225979355],[116.31088256835936,39.854937988531276],[116.27792358398436,39.845449231287226]]]}},
            {"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[116.20634078979491,39.92277071156262],[116.20548248291016,39.91579296675271],[116.22264862060547,39.91789953067524],[116.2217903137207,39.92303400876581],[116.20634078979491,39.92277071156262]]]}},
            {"type":"Feature","properties":{},"geometry":{"type":"LineString","coordinates":[[116.44821166992188,39.86099956341943],[116.47602081298827,39.836486422931394],[116.4997100830078,39.816975090490004],[116.52099609375,39.83253187087836],[116.54056549072267,39.847294370139394]]}}
        ]})

layer.locateByCoordinates(viewer, positionArray, options)

座標定位

引數名	型別	必填	預設值	說明
viewer	object	是	無	initViewer函式的返回值
positionArray	object	是	無	經緯度陣列，形如[[120,30],[110,20]]
options	object	否	無	配置項
options.needFlyTo	boolean	否	false	是否需要飛行動畫
options.height	number	否	5000	相機高度，注意僅在座標只有一個時可用
options.orientation	object	否	{heading: 360,pitch: -90,roll: 0}	相機角度

示例

CMSRMap.layer.locateByCoordinates(viewer, [[120,30],[110,20]],{orientation:{heading: 45, pitch: -70}, needFlyTo: true})

roam 飛行漫遊

使用方法

該模組包含UI和程式碼邏輯，主要依靠RoamControl類實現主要功能邏輯，zysy/widgets/roamLine包含飛行路線列表彈窗樣式程式碼，zysy/widgets/roamFly包含飛行資訊彈窗樣式程式碼，如有修改樣式的需求，可以直接修改上述兩個資料夾中的檔案。

RoamControl類

`roam.RoamControl`

飛行漫遊控制類，下面介面說明中roamControl代表類例項。

例項化引數

引數名	型別	必填	預設值	說明
viewer	object	是	無	initViewer函式的返回值
lineList	Array	是	無	飛行路線列表
modelDefine	object	否	預設有model_car和model_air	模型定義

例項化示例

var modelDefine = {
    "model_car": {
        "show": true, // 是否顯示
        "uri": "http://localhost:3000/zysy/data/gltf/qiche.gltf", // 模型位置
        "scale": 0.2, // 模型縮放比例
        "minimumPixelSize": 50 // 模型最小畫素大小
    },
    "model_air": {
        "show": true,
        "uri": "http://localhost:3000/zysy/data/gltf/feiji.glb",
        "scale": 0.1,
        "minimumPixelSize": 50
    }
};
var lineList = [
    {
        "id": "0911150734",// 唯一標記飛行路線的id
        "name": "貼地路線",// 飛行路線名稱
        "geometry": { // 地理資訊
            "type": "LineString", // 固定為 LineString
            // coordinates為座標點集，單個點為陣列，值分別為 [經度, 緯度, 高程]
            "coordinates": [[116.043233, 30.845286, 392.48], [116.046833, 30.846863, 411.33], [116.052137, 30.848801, 439.45], [116.060838, 30.850918, 442.91], [116.069013, 30.852035, 435.14], [116.18739, 30.854441, 244.53], [116.205214, 30.859332, 300.96]]
        },
        "properties": {
            "edittype": "polyline", // 固定為polyline
            "name": "線", // 固定為線
            "position": {
                "height": true,  // 是否顯示高程
                "minCount": 2, // 最少需幾個點
            },
            "style": {"color": "#ffff00", "width": 3, "show": true}, // 路線樣式
            "attr": {
                "id": "0911150734",// 唯一標記飛行路線的id
                "name": "貼地路線", // 飛行路線名稱
                "model": "model_car", // 模型型別
                "clampToGround": true, // 是否貼地
                "showGroundHeight": false, // 離地高度
                "showLabel": false, // 是否顯示軌跡名
                "showLine": true, // 是否顯示軌跡
                "showShadow": false, // 是否顯示投影
                "shadowType": "wall", // 投影型別，cylinder圓錐，wall線下軌跡
                "cameraType": "gs", // 飛行時相機視角配置，gs跟隨視角，sd鎖定視角，dy第一視角
                "followedX": 50, // 鎖定視角時距離
                "followedZ": 10, // 鎖定視角時高度
                "clockLoop": false, // 是否迴圈播放
                "remark": "備註"
            },
            "type": "polyline", // 固定為polyline
            "speed": 160 // 飛行速度 ，km/h
        }
    },
    {
        "id": "0629161546",
        "name": "城市飛行",
        "geometry": {
            "type": "LineString",
            "coordinates": [[117.128256, 31.852721, 600], [117.163191, 31.853176, 600], [117.181754, 31.854023, 600]]
        },
        "properties": {
            "edittype": "polyline",
            "name": "線",
            "position": {"height": true, "minCount": 2},
            "style": {
                "color": "#ffff00",
                "width": 3,
                "show": false,
                "opacity": 0.5,
                "lineType": "solid",
                "outline": false,
                "outlineColor": "#ffffff",
                "outlineWidth": 2,
                "clampToGround": false,
                "zIndex": 0
            },
            "attr": {
                "id": "0629161546",
                "name": "城市飛行2",
                "model": "model_air",
                "showGroundHeight": true,
                "showLabel": false,
                "showLine": true,
                "showShadow": true,
                "shadowType": "cylinder",
                "cameraType": "gs",
                "followedX": 50,
                "followedZ": 10,
                "clockLoop": false,
                "remark": ""
            },
            "type": "polyline"
        }
    },
    {
        "id": "0617105731",
        "name": "山區漫遊",
        "geometry": {
            "type": "LineString",
            "coordinates": [[116.025851, 30.848967, 1311.6], [116.098851, 30.833606, 1916.2], [116.154079, 30.86119, 1693.3], [116.171732, 30.927008, 1588.6], [116.142015, 30.980604, 1963.6], [116.080821, 31.001745, 2078.7], [116.022691, 30.965067, 1756.5], [116.016616, 30.904896, 1573.4]]
        },
        "properties": {
            "edittype": "polyline",
            "name": "線",
            "position": {"height": true, "minCount": 2},
            "style": {
                "color": "#ffff00",
                "show": false,
                "lineType": "solid",
                "width": 4,
                "clampToGround": false,
                "outline": false,
                "outlineColor": "#ffffff",
                "outlineWidth": 2,
                "opacity": 1,
                "zIndex": 0
            },
            "attr": {
                "id": "0617105731",
                "name": "山區漫遊",
                "point": "",
                "showLabel": false,
                "showLine": false,
                "showShadow": false,
                "showHeightWarn": false,
                "warnHeight": 500,
                "cameraType": "dy",
                "followedX": 50,
                "followedZ": 10,
                "remark": ""
            },
            "type": "polyline",
            "speed": 300
        }
    },
    {
        "id": "0617110137",
        "name": "工業區",
        "geometry": {
            "type": "LineString",
            "coordinates": [[106.714474, 26.838533, 1303.3], [106.714448, 26.839618, 1309.4], [106.714389, 26.840687, 1310.8], [106.714685, 26.842783, 1295], [106.715975, 26.846232, 1279.7], [106.718505, 26.852513, 1278.6]]
        },
        "properties": {
            "edittype": "polyline",
            "name": "線",
            "position": {"height": true, "minCount": 2},
            "style": {
                "color": "#ffff00",
                "show": false,
                "lineType": "solid",
                "width": 4,
                "clampToGround": false,
                "outline": false,
                "outlineColor": "#ffffff",
                "outlineWidth": 2,
                "opacity": 1,
                "zIndex": 0
            },
            "attr": {
                "id": "0617110137",
                "name": "工業區",
                "point": "point",
                "showLabel": false,
                "showLine": false,
                "showShadow": false,
                "showHeightWarn": false,
                "warnHeight": 500,
                "cameraType": "dy",
                "followedX": 200,
                "followedZ": 50,
                "model": "",
                "remark": ""
            },
            "type": "polyline"
        }
    },
];
var roamControl = new CMSRMap.roam.RoamControl(viewer, {
    lineList,
    modelDefine,
});
roamControl.start();

`roamControl.viewer`

傳入的viewer

`roamControl.lastEditEntity`

正在編輯的entity

`roamControl.isOnDraw`

是否正在編輯

`roamControl.arrFlyTable`

傳入的lineList，路線列表

`roamControl.modelDefine`

傳入的modelDefine，模型定義

`roamControl.roamLineWindow`

路線列表彈窗window例項

`roamControl.roamLineWidget`

路線列表彈窗widget例項

`roamControl.roamFlyWindow`

飛行路線資訊彈窗window例項

`roamControl.roamFlyWidget`

飛行路線資訊彈窗widget例項

`roamControl.start() -> void`

初始化飛行路線列表彈窗

`roamControl.toRoamFly(lineData) -> void`

傳入路線資料進入路線漫遊

引數名	型別	必填	預設值	說明
lineData	object	是	無	lineList中的一項

`roamControl.destroy() -> void`

銷燬roamControl

`roamControl.updateAttr2map(attr) -> void`

更新圖上資訊

引數名	型別	必填	預設值	說明
attr	object	是	無	lineData的properties部分

傳入路線資料進入路線漫遊

`roamControl.updateGeo2map(coords, withHeight) -> void`

引數名	型別	必填	預設值	說明
coords	Array	是	無	座標列表
withHeight	Array	是	無	coords列表是否包含高程資訊

更新圖上的幾何形狀、座標等

`roamControl.getGeoJson(id) -> geojson`

引數名	型別	必填	預設值	說明
id	string	是	無	路線id

返回路線的geojson

`roamControl.jsonToLayer(json, isClear, isFly) -> entity`

載入geojson，返回路線entity例項

`roamControl.deleteAll() -> void`

刪除地圖上所有路線及模型

`roamControl.deleteEntity(id) -> void`

引數名	型別	必填	預設值	說明
id	string	是	無	路線id

根據id在地圖上刪除對應路線

`roamControl.deleteCurrentEntity() -> void`

在地圖上刪除當前編輯路線

`roamControl.hasEdit(value) -> void`

引數名	型別	必填	預設值	說明
value	boolean	是	無	路線是否可編輯

路線是否可編輯

`roamControl.saveForGeoJson(lineData) -> file`

引數名	型別	必填	預設值	說明
lineData	Array	是	無	lineList中的一項

匯出geojson格式的路線列表

`roamControl.toRoamLine() -> void`

開啟路線列表彈窗

軌跡

TrackPlayControl類

`track.TrackPlayControl`

軌跡回放控制類，下面介面說明中trackPlayControl代表類例項。

例項化引數

引數名	型別	必填	預設值	說明
viewer	object	是	無	initViewer函式的返回值
options	object	否	無	配置項
options.trackStyle	object	否	DefaultTrackStyle	軌跡預設樣式
options.showTimeLine	boolean	否	false	是否顯示預設時間軸
options.clock.multiplier	number	否	10	軌跡播放倍數

引數 DefaultTrackStyle

const DefaultTrackStyle = {
  billboard: {
    show: false,
    image: 'zysy/data/img/car.png', // 圖片地址
    scale: 1, // 縮放比例
    rotation: 0,
    width: undefined, // 圖片寬(畫素)
    height: undefined, // 圖片高(畫素)
  },
  model: {
    show: true,
    uri: 'zysy/data/gltf/qiche.gltf', // 模型地址
    scale: 1, // 縮放比例
    minimumPixelSize: 24, // 最小畫素大小
  },
  path: {
    // lineType: 'dash',
    color: 'rgba(255,255,0, 0.5)', // 尾跡顏色
    width: 8, // 尾跡寬度
    show: true,
  },
  line: {
    show: true,
    width: 8, // 軌跡寬度
    material: 'rgba(8,112,247, 0.25)', // 軌跡顏色
    loop: false, // 是否迴圈播放
  },
  label: {
    font: 'bold small-caps normal 18px 楷體', // 標註字型
    style: BaseMap.LabelStyle.FILL, // 標註字型
    fillColor: BaseMap.Color.fromCssColorString('rgba(255,255,0, 1)'), // 標註顏色
    horizontalOrigin: BaseMap.HorizontalOrigin.CENTER, // 標註水平位置
    verticalOrigin: BaseMap.VerticalOrigin.TOP, // 標註垂直位置
    pixelOffset: new BaseMap.Cartesian2(0, 0), // 標註位移
    eyeOffset: new BaseMap.Cartesian3(0, 0, -50), // 標註視覺位移
  },
};

`trackPlayControl.play() -> void`

播放軌跡回放

`trackPlayControl.pause() -> void`

暫停軌跡回放

`trackPlayControl.setMultiplier(value) -> void`

設定軌跡回放速率

引數名	型別	必填	預設值	說明
value	number	是	1	軌跡回放速率

`trackPlayControl.setCurrentTime(date) -> void`

設定當前時間

引數名	型別	必填	預設值	說明
date	Date	是	無	當前時間

`trackPlayControl.addTrack() -> void`

新增軌跡

trackPlayControl.addTrack({
    id: id, // 軌跡id
    name: '加班呢啊', // 軌跡名稱
    autoHeading: false,
    trackStyle: { // 同初始化時設定DefaultTrackStyle
        model: {
            show: true,
            uri: 'zysy/data/gltf/qiche.gltf',
            scale: 1,
            minimumPixelSize: 64,
        },
        path: {
            // lineType: 'dash',
            color: 'rgba(255,255,0, 1)',
            width: 12,
            show: true,
        },
        label: {
            // text: '加班呢啊',
        },
    },
    popup: {
        anchor: [0, -20], // 左右、上下的偏移畫素值。
        timeRender: true, // 是否實時更新html
        html: (entity, currentTime) => {
        const html = '<div>加班呢</div>';
        return html;
        },
    },
    data: playPoints,
});
// playPoints 是由 newPoint 組成的陣列
const newPoint = {
    id: modifiedPoint.gpsid,
    longitude: modifiedPoint.modi_longitude,
    latitude: modifiedPoint.modi_latitude,
    createTime: point.collect_time,
    bearing: point.azimuth,
    speed: point.speed,
    altitude: point.height,
};

軌跡回放示例

var playPoints = [
    {
        "id": "29477",
        "longitude": 121.598349999999996,
        "latitude": 31.255749999999999,
        "createTime": "2020-05-29 10:21:01",
        "bearing": 180.599999999999994,
        "speed": 52.039999999999999,
        "altitude": 8.039999999999999
    },
    {
        "id": "29513",
        "longitude": 121.598083000000003,
        "latitude": 31.252967000000002,
        "createTime": "2020-05-29 10:21:37",
        "bearing": 186.199999999999989,
        "speed": 17.350000000000001,
        "altitude": 7.990000000000000
    },
    {
        "id": "29531",
        "longitude": 121.599249999999998,
        "latitude": 31.253050000000002,
        "createTime": "2020-05-29 10:21:56",
        "bearing": 70.120000000000005,
        "speed": 39.079999999999998,
        "altitude": 7.450000000000000
    },
    {
        "id": "29567",
        "longitude": 121.600166999999999,
        "latitude": 31.253333000000001,
        "createTime": "2020-05-29 10:22:32",
        "bearing": 70.849999999999994,
        "speed": 11.390000000000001,
        "altitude": 7.420000000000000
    }
];
var trackPlayControl = new CMSRMap.track.TrackPlayControl(window.viewer);
trackPlayControl.addTrack({
    id: 'id',
    name: '加班呢啊',
    autoHeading: false,
    data: playPoints,
});
trackPlayControl.play();

`trackPlayControl.getTrackItemById(id) -> TrackItem`

獲取軌跡

引數名	型別	必填	預設值	說明
id	string \| number	是	無	addTrack時設定的id

`trackPlayControl.removeTrackById(id) -> TrackItem`

移除軌跡

引數名	型別	必填	預設值	說明
id	string \| number	是	無	addTrack時設定的id

`trackPlayControl.hideAllPopup() -> void`

隱藏全部popup

`trackPlayControl.removeAllTrack() -> void`

刪除所有軌跡

`trackPlayControl.removeTimeLine() -> void`

刪除事件軸

`trackPlayControl.destroy() -> void`

銷燬物件

鷹眼地圖

OverflowControl類

`OverflowControl類`

鷹眼控制類，下面介面說明中ovflowControl代表類例項。

例項化引數

引數名	型別	必填	預設值	說明
viewer	object	是	無	initViewer函式的返回值
options	object	是	無	鷹眼初始化配置
options.container	string\|HTMLElement	是	無	鷹眼地圖的容器
options.outline	boolean	否	true	是否顯示邊框
options.outlineColor	cssColorString	否	rgba(68,68,187,0.25)	視野框邊框顏色
options.outlineWidth	number	否	5	視野框邊框寬度，單位畫素
options.fillColor	cssColorString	否	rgba(145,163,216,0.25)	視野框填充顏色
options.basemaps	Array	否	initViewer時配置的basemaps	鷹眼地圖顯示的地圖，配置同initViewer的basemaps

示例

var overviewControl = new CMSRMap.OverviewControl(viewer, {
    container: document.getElementById('eye'),
    outline: true,
    outlineColor: '#66ccff',
    outlineWidth: 2,
    fillColor: 'rgba(145,163,216,0.25)',
    basemaps: [
        {
            name: '高德',
            type: 'www_gaode',
            crs: 'gcj',
            layer: 'vec',
            visible: true,
        }
    ]
});

`ovflowControl.destroy() -> void`

銷燬ovflowControl

地圖搜尋

SpatialPropertyQuerier類

`SpatialPropertyQuerier類`

地圖搜尋類，下面介面說明中spatialPropertyQuerier代表類例項。

例項化引數

引數名	型別	必填	預設值	說明
viewer	object	是	無	initViewer函式的返回值

`spatialPropertyQuerier.initSpatialPropertyQuerier(queryConfig) -> void`

啟動地圖搜尋彈窗

示例


const layerList = [{
  name: '樣例資料',
  // wfs服務地址
  url: 'http://localhost:8080/geoserver/wfs',
  // wfs服務配置
  parameters: {
    service: 'WFS',
    request: 'GetFeature',
    typeName: 'zysy3d:t_data_querytest',
    version: '1.0.0',
    outputFormat: 'application/json',
    maxFeatures: 200,
  },
  // 搜尋結果點選時是否顯示彈窗
  popup: 'all',
  label: {},
}];

const queryConfig = {
  layerList,
  // 搜尋結果列表配置
  tableColumns: [
    {
      title: '序號',
      sortable: false,
      align: 'center',
      width: 50,
      formatter(value, row, index) {
        return index + 1;
      },
    },
  ],
  // 搜尋哪些欄位，不填則搜尋全部欄位
  queryField: {
    // namefield: ['lane_id', 'road_id'],
    // 指定時間欄位
    // timefield: 'time',
  },
  success: console.log,
};
// console.log('queryConfig', queryConfig);
const querier = new SpatialPropertyQuerier(window.viewer);
querier.initSpatialPropertyQuerier(queryConfig);

`spatialPropertyQuerier.destroy() -> void`

銷燬spatialPropertyQuerier

html控制元件

`DivPoint`類

html控制元件類，下面介面說明中divPoint代表類例項。

例項化引數

引數名	型別	必填	預設值	說明
viewer	object	是	無	initViewer函式的返回值
options	object	是	無	初始化配置
options.html	string\|HTMLElement	是	無	顯示在地圖上的內容
options.position	Cartesian3	是	無	顯示的座標地址

示例

// 初始化
var divPoint = new CMSRMap.DivPoint(
    viewer,
    {
        html:'<div id="container">html標記</div>',
        // (經度, 緯度, 海拔)
        position: CMSRMap.BaseMap.Cartesian3.fromDegrees(120, 31.5)
    }
);

// 掛載vue元件
// 注意div-point的div容器設定了 css屬性 pointer-events: none; 會使點選事件無效，如需點選事件可自行覆蓋該屬性
import Counter from './Counter.vue';
import Vue from 'vue';

var divPoint = new CMSRMap.DivPoint(viewer,{html:'<div id="container">文字</div>',  position: Cesium.Cartesian3.fromDegrees(
    120, // 經度
    31.5, // 緯度
  )});
setTimeout(() => {
  const CounterComponent = Vue.extend(Counter);
  new CounterComponent().$mount('#container');
}, 60);

// Counter.vue
<template>
  <div class="counter-con">
    <div>{{num}}</div>
    <el-button class="button" @click="incr">自增加一</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 0,
    };
  },
  methods: {
    incr() {
      this.num++;
    },
  },
};
</script>

`divPoint.setVisible(visible) -> void`

引數名	型別	必填	預設值	說明
visible	boolean	是	無	顯示還是隱藏html

顯示隱藏html

`divPoint.destroy() -> void`

銷燬divPoint

`LabelDivPoint`類

html控制元件類，下面介面說明中labelDivPoint代表類例項。

例項化引數

引數名	型別	必填	預設值	說明
viewer	object	是	無	initViewer函式的返回值
options	object	是	無	初始化配置
options.labelDivUrl	string	是	無	文字標註GeoJson資料
options.polygonShowBool	boolean	否	false	文字標註外部矩形顯示
options.labelId	string	否	ID	文字標註屬性中的ID取值，需為唯一值
options.labelContent	string	否	NAME	文字標註內容取值
options.direction	string	否	DIRECTION	文字標註方向取值，1表示自西向東，2表示自東向西
options.heightToScale	Array	否	[ { height: 20, scale: 1 }, { height: 40, scale: 0.8 },{ height: 60, scale: 0.6 },{ height: 80, scale: 0.4 },{ height: 160, scale: 0.2 }, ];	對不同高度控制顯示文字框的縮放級別，height表示高度，scale表示顯示文字標註縮放級別
options.labelColor	string	否	'RGB(204,204,204)'	文字顏色
options.labelBkgColor	string	否	'RGBA(0,0,0,0)'	文字背景顏色
options.labelFontFamily	string	否	'Microsoft YaHei'	文字字型
options.labelFontSize	string	否	'14px'	文字預設原始字型大小

示例

// 初始化
      var labelDivPoint = new CMSRMap.LabelDivPoint(viewer, {
        labelDivUrl: labelJson,
        polygonShowBool :false,
        labelContent:"VALUE",
        labelId:"ID",
      });

labelDivPoint.show()

顯示labelDivPoint

labelDivPoint.destroy() -> void

銷燬labelDivPoint

Entity事件

`EntityEventHandler`類

Entity事件類，下面介面說明中entityEventHandler代表類例項。

例項化引數

引數名	型別	必填	預設值	說明
viewer	object	是	無	initViewer函式的返回值
options	object	是	無	初始化配置
options.handleScreen	boolean	否	false	是否在未捕捉到entity時觸發事件，即觸發地圖的單擊、雙擊等等，並非所有事件都可用於地圖，例如拖拽事件不能用於地圖

示例

// 初始化
var entityEventHandler = new CMSRMap.EntityEventHandler(viewer, { handleScreen: true });
entityEventHandler.addEntityEventListener(CMSRMap.EntityEventHandler.EventTypes.LEFT_CLICK, (entity, screenPosition, coordinates) => console.log(entity, screenPosition, coordinates));
var ee = new CMSRMap.EntityEventHandler(viewer);
ee.addEntityEventListener('MOUSE_LEAVE',(...rest)=>{console.log('MOUSE_LEAVE',rest)});

`entityEventHandler.addEntityEventListener(type, action)`

增加entity的事件監聽器，注意需要entity所在drawControl開啟positionEdit，才可以拖拽。
事件型別包括單擊、雙擊、右擊、滑鼠移入、滑鼠移出、滑鼠在標繪上移動、拖拽開始、拖拽結束、拖拽中等等。

引數名	型別	必填	預設值	說明
type	EntityEventHandler.EventTypes	是	無	從EntityEventHandler.EventTypes中取值
action	fucntion	是	無	回撥函式

// 拖拽示例
var drawControl = new CMSRMap.draw.DrawControl(viewer);
var entity = drawControl.addMarkerByGeoJson({"type":"FeatureCollection","features":[{"type":"Feature","properties":{"name":"圖示點2","type":"billboard","edittype":"billboard","style":{"image":"https://webapi.amap.com/images/car.png"},"attr":{"id":"xiaomo","name":"","remark":""}},"geometry":{"type":"Point","coordinates":[121.60156,31.241837,-0.02]}}]})[0];
viewer.flyTo(entity);
drawControl.startPositionEdit();
var ee = new CMSRMap.EntityEventHandler(viewer);
ee.addEntityEventListener('DRAG',(...rest)=>{console.log('DRAG',rest)});

`entityEventHandler.removeEntityEventListener(type, action)`

刪除entity的事件監聽器

引數名	型別	必填	預設值	說明
type	EntityEventHandler.EventTypes	是	無	從EntityEventHandler.EventTypes中取值
action	fucntion	是	無	回撥函式

`entityEventHandler.removeAllEventHandler()`

刪除全部的entity事件監聽器

`entityEventHandler.destroy() -> void`

銷燬entityEventHandler

Camera事件

`CameraEventHandler`類

相機事件控制元件類，下面介面說明中cameraEventHandler代表類例項。

例項化引數

引數名	型別	必填	預設值	說明
viewer	object	是	無	initViewer函式的返回值

示例

// 初始化
var ce = new CMSRMap.CameraEventHandler(viewer);
function callback(...rest){
  console.log('coco', rest);
}
ce.addEventListener('CHANGE_HEIGHT',callback);

`cameraEventHandler.addEventListener(type, action)`

增加事件監聽。

引數名	型別	必填	預設值	說明
type	CameraEventHandler.EventTypes	是	無	CameraEventHandler.EventTypes中取值
action	fucntion	是	無	回撥函式

CameraEventHandler.EventTypes = {
  CHANGE: 'CHANGE', // 相機變化即地圖的高度或者可視區域變化
  CHANGE_HEIGHT: 'CHANGE_HEIGHT', // 高度變化
  CHANGE_ZOOM_LEVEL: 'CHANGE_ZOOM_LEVEL', // 層級變化
  MOVE_START: 'MOVE_START', // 相機開始移動
  MOVE_END: 'MOVE_END', // 相機停止移動
};

`cameraEventHandler.removeEventListener(type, action)`

刪除事件監聽器。

引數名	型別	必填	預設值	說明
type	CameraEventHandler.EventTypes	是	無	CameraEventHandler.EventTypes中取值
action	fucntion	是	無	回撥函式

`cameraEventHandler.destroy() -> void`

銷燬cameraEventHandler

工具方法

canvas座標系轉經緯度

CMSRMap.utils.canvasPositionToCoordinates(viewer,position)

引數名	型別	必填	預設值	說明
viewer	object	是	無	initViewer函式的返回值
position	object	是	無	{x:600,y:240} canvas上滑鼠點選的位置

示例

CMSRMap.utils.canvasPositionToCoordinates(viewer,{x:551,y:260});

經緯度轉canvas座標系

CMSRMap.utils.coordinatesToCanvasPosition(viewer,position)

引數名	型別	必填	預設值	說明
viewer	object	是	無	initViewer函式的返回值
position	object	是	無	[經度, 緯度]

示例

CMSRMap.utils.coordinatesToCanvasPosition(viewer,[120,30]);

內部cartesian3座標系轉經緯度

CMSRMap.utils.cartesian3ToCoordinates(viewer, position)

引數名	型別	必填	預設值	說明
viewer	object	是	無	initViewer函式的返回值
cartesian3	object	是	無	內部3維座標系 BaseMap.Cartesian3

示例

CMSRMap.utils.cartesian3ToCoordinates(viewer, cartesian3);

獲取entity經緯度

CMSRMap.utils.getEntityCoordinate(viewer, entity)

引數名	型別	必填	預設值	說明
viewer	object	是	無	initViewer函式的返回值
entity	object	是	無	entity

示例

CMSRMap.utils.getEntityCoordinate(viewer, entity);

是否有地形

CMSRMap.utils.hasTerrain(viewer)

引數名	型別	必填	預設值	說明
viewer	object	是	無	initViewer函式的返回值

示例

CMSRMap.utils.hasTerrain(viewer);

重新整理popup位置

CMSRMap.utils.refreshPopupPosition(viewer)

引數名	型別	必填	預設值	說明
viewer	object	是	無	initViewer函式的返回值

示例

CMSRMap.utils.refreshPopupPosition(viewer);

注意事項

不要把viewer設定到vue的data或者compute之類的屬性中，不要讓vue監聽viewer的資料變化，否則可能導致效能問題
儘量重複利用viewer，多次生成銷燬viewer而不重新整理頁面可能造成記憶體溢位
cesium 是3維引擎，2維模式下容易出現問題，請儘量使用3維模式，可以在3維模式下禁止旋轉來模仿2維，定位類介面因為flyTo介面可能會改變視角，如果要保持俯仰角為90度，可以使用經緯度定位。
```
// 模仿2維常用程式碼
viewer.scene.mode = 3; //使用3維地圖
viewer.scene.screenSpaceCameraController.enableTilt = false; //禁止旋轉
// viewer.scene.screenSpaceCameraController.enableRotate = false; //禁止拖動
```

CMSR 1.0.13

cmsr-map sdk 文件

如何使用

script 標籤引入

node_modules 引入

提供的API

地圖載入

程式碼示例

初始化地圖

示例 options.viewerConfig.center

地圖圖層配置（basemaps）

目前支援的 basemaps type 型別

basemaps各type的可選項

xyz 格式地址的瓦片圖層使用方式

OGC 標準 wms 服務圖層使用方式

傾斜攝影 3dtiles 模型

basemaps示例

標繪編輯

標繪的名稱空間放在draw下

設定標繪物件的popup彈窗

設定標繪物件的水波紋

獲取圖形頂點經緯度集合

手動繪製圖形

注意

啟動標繪視窗

從geojson載入標繪

更新標繪屬性

更新標繪地理座標

刪除標繪

獲取所有標繪物件

根據id獲取標繪物件

將標繪移到視野中心

獲取所有標繪的geojson

增加entity的事件監聽器

刪除entity的事件監聽器

刪除全部的entity事件監聽器

刪除全部的標繪

drawControl 支援的編輯事件

drawControl 註冊編輯事件

drawControl 登出編輯事件

drawControl 開啟位置編輯模式

drawControl 關閉位置編輯模式

drawControl 平滑移動標繪

drawControl 設定可保留的尾跡

drawControl 是否有設定可保留尾跡

drawControl 移除可保留尾跡

DrawControl 設定尾跡

DrawControl 是否有設定尾跡

DrawControl 移除尾跡

銷燬方法

相機控制

CameraControl類

CameraControl類

cameraControl.trackEntity(entity, options) -> void

cameraControl.stopTrackEntity() -> void

cameraControl.getTrackedEntity() -> void

cameraControl.getCameraPosition() -> {longitude,latitude,height}

cameraControl.getHeight() -> number

cameraControl.setHeight(height) -> void

cameraControl.getCenter() -> {longitude,latitude}

cameraControl.setCenter(longitude, latitude) -> void

cameraControl.getZoomLevel() -> number

cameraControl.setZoom(zoomLevel) -> void

cameraControl.getViewRect() -> ViewRect

cameraControl.setViewRect(viewRect) -> void

cameraControl.getOrientation() -> {heading,pitch,roll}

cameraControl.setOrientation({heading,pitch,roll}) -> void

wms/wmts/wfs 載入

檔案載入

圖層樣式編輯

空間量測

3dtiles

3dtiles平移

3dtiles縮放

3dtiles旋轉工具

3dtiles平移工具

layer 圖層管理

LayerControl類

layer.LayerControl

layerControl.addOperationalLayer(layerConfig) -> layer

示例 `options.viewerConfig.center`

`CameraControl類`

`cameraControl.trackEntity(entity, options) -> void`

`cameraControl.stopTrackEntity() -> void`

`cameraControl.getTrackedEntity() -> void`

`cameraControl.getCameraPosition() -> {longitude,latitude,height}`

`cameraControl.getHeight() -> number`

`cameraControl.setHeight(height) -> void`

`cameraControl.getCenter() -> {longitude,latitude}`

`cameraControl.setCenter(longitude, latitude) -> void`

`cameraControl.getZoomLevel() -> number`

`cameraControl.setZoom(zoomLevel) -> void`

`cameraControl.getViewRect() -> ViewRect`

`cameraControl.setViewRect(viewRect) -> void`

`cameraControl.getOrientation() -> {heading,pitch,roll}`

`cameraControl.setOrientation({heading,pitch,roll}) -> void`

`layer.LayerControl`

`layerControl.addOperationalLayer(layerConfig) -> layer`

`layerControl.removeOperationalLayer(id) -> void`

`layerControl.getLayerById(id) -> layer`

`layerControl.getLayers() -> layerDict`

`layerControl.centerAtById(id) -> void`

`layerControl.getLayerVisible(id) -> boolean`

`layerControl.updateLayerVisibleById(id,visible) -> void`

`layerControl.getBasemap() -> layer`

`layerControl.changeBaseMap(name) -> void`

`roam.RoamControl`

`roamControl.viewer`

`roamControl.lastEditEntity`

`roamControl.isOnDraw`

`roamControl.arrFlyTable`

`roamControl.modelDefine`

`roamControl.roamLineWindow`

`roamControl.roamLineWidget`

`roamControl.roamFlyWindow`

`roamControl.roamFlyWidget`

`roamControl.start() -> void`

`roamControl.toRoamFly(lineData) -> void`

`roamControl.destroy() -> void`

`roamControl.updateAttr2map(attr) -> void`

`roamControl.updateGeo2map(coords, withHeight) -> void`

`roamControl.getGeoJson(id) -> geojson`

`roamControl.jsonToLayer(json, isClear, isFly) -> entity`

`roamControl.deleteAll() -> void`

`roamControl.deleteEntity(id) -> void`

`roamControl.deleteCurrentEntity() -> void`

`roamControl.hasEdit(value) -> void`

`roamControl.saveForGeoJson(lineData) -> file`

`roamControl.toRoamLine() -> void`

`track.TrackPlayControl`

`trackPlayControl.play() -> void`

`trackPlayControl.pause() -> void`

`trackPlayControl.setMultiplier(value) -> void`

`trackPlayControl.setCurrentTime(date) -> void`

`trackPlayControl.addTrack() -> void`

`trackPlayControl.getTrackItemById(id) -> TrackItem`

`trackPlayControl.removeTrackById(id) -> TrackItem`

`trackPlayControl.hideAllPopup() -> void`

`trackPlayControl.removeAllTrack() -> void`

`trackPlayControl.removeTimeLine() -> void`

`trackPlayControl.destroy() -> void`

`OverflowControl類`

`ovflowControl.destroy() -> void`

`SpatialPropertyQuerier類`

`spatialPropertyQuerier.initSpatialPropertyQuerier(queryConfig) -> void`

`spatialPropertyQuerier.destroy() -> void`

`DivPoint`類

`divPoint.setVisible(visible) -> void`

`divPoint.destroy() -> void`

`LabelDivPoint`類

`EntityEventHandler`類

`entityEventHandler.addEntityEventListener(type, action)`

`entityEventHandler.removeEntityEventListener(type, action)`

`entityEventHandler.removeAllEventHandler()`

`entityEventHandler.destroy() -> void`