cmsr 1.0.6
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 | 水波紋顏色 |
注意
- 下面文件中的
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.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 | 否 | 符號顏色 | |
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 | 否 | 符號顏色 | |
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
Entity事件處理
EntityEventHandler
類
html控制元件類,下面介面說明中entityEventHandler
代表類例項。
例項化引數
引數名 | 型別 | 必填 | 預設值 | 說明 |
---|---|---|---|---|
viewer | object | 是 | 無 | initViewer函式的返回值 |
options | object | 是 | 無 | 初始化配置 |
options.handleScreen | boolean | 否 | false | 是否在未捕捉到entity時觸發事件 |
示例
// 初始化
var entityEventHandler = new CMSRMap.EntityEventHandler(viewer, { handleScreen: true });
entityEventHandler.addEntityEventListener(CMSRMap.BaseMap.ScreenSpaceEventType.LEFT_CLICK, (entity, screenPosition, coordinates) => console.log(entity, screenPosition, coordinates));
entityEventHandler.addEntityEventListener(type, action)
增加entity的事件監聽器
引數名 | 型別 | 必填 | 預設值 | 說明 |
---|---|---|---|---|
type | BaseMap.ScreenSpaceEventType | 是 | 無 | 從BaseMap.ScreenSpaceEventType中取值 |
action | fucntion | 是 | 無 | 回撥函式 |
entityEventHandler.removeEntityEventListener(type, action)
刪除entity的事件監聽器
引數名 | 型別 | 必填 | 預設值 | 說明 |
---|---|---|---|---|
type | BaseMap.ScreenSpaceEventType | 是 | 無 | 從BaseMap.ScreenSpaceEventType中取值 |
action | fucntion | 是 | 無 | 回撥函式 |
entityEventHandler.removeAllEventHandler()
刪除全部的entity事件監聽器
entityEventHandler.destroy() -> void
銷燬entityEventHandler
工具方法
canvas座標系轉經緯度
CMSRMap.utils.canvasPositionToCoordinates(viewer,position)
引數名 | 型別 | 必填 | 預設值 | 說明 |
---|---|---|---|---|
viewer | object | 是 | 無 | initViewer函式的返回值 |
position | object | 是 | 無 | {x:600,y:240} canvas上滑鼠點選的位置 |
示例
CMSRMap.utils.canvasPositionToCoordinates(viewer,{x:551,y:260});
內部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而不重新整理頁面可能造成記憶體溢位