diff --git a/.gitignore b/.gitignore index 5210144b7..36acd7e0d 100644 --- a/.gitignore +++ b/.gitignore @@ -7,7 +7,7 @@ /docs/mapboxgl/ /docs/openlayers/ /docs/cesium/ - +dist-libs /src/service/node_modules/ src/mapboxgl/node_modules/ /src/service/dist*/ diff --git a/README.md b/README.md index 25af6f129..fad92b38d 100644 --- a/README.md +++ b/README.md @@ -35,7 +35,7 @@ MapGIS Client for JavaScript：是增强的MapGIS Web开发平台，集成Openla ## 一、开始 ### 1、司马云 -[MapGIS Client for JavaScript](http://develop.smaryun.com:8899/) +[MapGIS Client for JavaScript](http://develop.smaryun.com/) > 本脚本所有的示例都在对应的演示站点有详细的说明教程 diff --git a/docs/jsdoc-config/leaflet/index.md b/docs/jsdoc-config/leaflet/index.md index e1dab62c5..beea464f4 100644 --- a/docs/jsdoc-config/leaflet/index.md +++ b/docs/jsdoc-config/leaflet/index.md @@ -16,7 +16,7 @@ 1. `移动设备`的支持-内部代码框架设计的时候考虑到移动设备的支持.针对移动设备天然支持. -* 官网(website)：[http://client.snanyun.com:8899/ui/index.html](http://client.snanyun.com:8899/ui/index.html) +* 官网(website)：[http://develop.smaryun.com/#/index](http://develop.smaryun.com/#/index) * 源码(source code)：[https://github.com/ParnDeedlit/WebClient-Leaflet](https://github.com/ParnDeedlit/WebClient-Leaflet) diff --git a/docs/jsdoc-config/mapboxgl/docs.json b/docs/jsdoc-config/mapboxgl/docs.json index adca77895..e6c4e8e05 100644 --- a/docs/jsdoc-config/mapboxgl/docs.json +++ b/docs/jsdoc-config/mapboxgl/docs.json @@ -21,7 +21,9 @@ "src/service/node_modules/turf-jsts", "src/service/node_modules/@turf", "src/service/node_modules/polygon-clipping", - "src/service/node_modules/splaytree" + "src/service/node_modules/splaytree", + "src/mapboxgl/node_modules", + "src/mapboxgl/theme" ] }, "plugins": ["plugins/markdown"], diff --git a/docs/jsdoc-config/mapboxgl/index.md b/docs/jsdoc-config/mapboxgl/index.md index 9e0de3b96..7e187abbf 100644 --- a/docs/jsdoc-config/mapboxgl/index.md +++ b/docs/jsdoc-config/mapboxgl/index.md @@ -6,16 +6,14 @@ #### MapboxGL 优点 -> leaflet是常规的的最适合常规gis开发的地图，因此核心功能就是`传统GIS`功能. +> MapboxGL是最适合常规gis开发的地图，因此核心功能就是`传统GIS`功能. 1. `高效矢量瓦片`-真正高效实用的矢量瓦片 1. 顶级可视化-真正`顶级的可视化渲染`，mapboxGL,echartGL，KeplerGl等。 1. `高清矢量图形`- 真正顶级的高清矢量图形绘制SVG，Canvas. 1. Top级互联网技术加持 - 国内Baidu，国外Uber，Mapbox等顶级可视化巨头技术加持. - - -* 官网(website)：[http://client.snanyun.com:8899/ui/index.html](http://client.snanyun.com:8899/ui/index.html) +* 官网(website)：[http://develop.smaryun.com/#/index](http://develop.smaryun.com/#/index) * 源码(source code)：[https://github.com/ParnDeedlit/WebClient-MapboxGL](https://github.com/ParnDeedlit/WebClient-mapboxgl) diff --git a/docs/jsdoc-config/openlayers/index.md b/docs/jsdoc-config/openlayers/index.md index c61789ce8..429c0cf0b 100644 --- a/docs/jsdoc-config/openlayers/index.md +++ b/docs/jsdoc-config/openlayers/index.md @@ -14,7 +14,7 @@ 1. 兼容性 - 兼容老的ie6789等疑难浏览器问题. -* 官网(website)：[http://client.snanyun.com:8899/ui/index.html](http://client.snanyun.com:8899/ui/index.html) +* 官网(website)：[http://develop.smaryun.com/#/index](http://develop.smaryun.com/#/index) * 源码(source code)：[https://github.com/ParnDeedlit/WebClient-openlayers](https://github.com/ParnDeedlit/WebClient-openlayers) diff --git "a/docs/jsdoc-config/service/tutorials/1.\345\277\253\351\200\237\345\205\245\351\227\250.md" "b/docs/jsdoc-config/service/tutorials/1.\345\277\253\351\200\237\345\205\245\351\227\250.md" new file mode 100644 index 000000000..e69de29bb diff --git a/package.json b/package.json index 591715135..7585777bf 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@mapgis/webclient", - "version": "10.5.4", + "version": "10.5.6", "description": "", "main": "index.js", "scripts": { @@ -35,7 +35,7 @@ "test-init": "node ./node_modules/karma/bin/karma init karma.conf.js" }, "author": "mapgis", - "license": "Apache2", + "license": "Apache-2.0", "devDependencies": { "babel-core": "^6.26.3", "babel-eslint": "^10.1.0", @@ -86,16 +86,19 @@ "@mapgis/mapbox-gl": "^1.9.0", "@turf/turf": "^6.3.0", "axios": "^0.18.0", - "cesium": "^1.70.1", + "cesium": "1.84.0", "d3": "^5.16.0", "echarts": "^4.4.0", "fast-xml-parser": "^3.17.6", + "fetch-ie8": "^1.5.0", "jsdoc": "^3.6.3", "leaflet": "^1.7.1", "mapv": "^2.0.40", "ol": "5.3.3", "proj4": "2.3.15", + "promise-polyfill": "^8.2.3", "qs": "^6.9.4", - "webfont-matcher": "^1.1.0" + "webfont-matcher": "^1.1.0", + "svg-pathdata": "^6.0.0" } } diff --git a/src/cesiumjs/index.js b/src/cesiumjs/index.js index b05aeaef7..313ba64c1 100644 --- a/src/cesiumjs/index.js +++ b/src/cesiumjs/index.js @@ -1,4 +1,3 @@ -import { CesiumZondy } from './core/Base'; export { CesiumZondy } from './core/Base'; export * from './ui'; @@ -454,4 +453,4 @@ export { WMTSCapabilities, OGCWMTSInfo, OGCWMSInfo -}; +}; \ No newline at end of file diff --git a/src/cesiumjs/layer/M3DLayer.js b/src/cesiumjs/layer/M3DLayer.js index 0ad208ff1..64a88d5cc 100644 --- a/src/cesiumjs/layer/M3DLayer.js +++ b/src/cesiumjs/layer/M3DLayer.js @@ -78,6 +78,7 @@ export default class M3DLayer extends BaseLayer { * @param {Boolean} [optionsParam.autoReset = true] 是否自动定位 * @param {Boolean} [optionsParam.synchronous = true] 是否异步请求 * @param {Function} [optionsParam.loaded = function] 回调函数 + * @param {Function} [options.getDocLayers = function] 回调函数，用于获取文档中的所有图层对象 * @param {DefaultProxy} [optionsParam.proxy = defaultProxy] 代理 * @param {Boolean} [optionsParam.showBoundingVolume = false] 是否显示包围盒 * @param {Number} [optionsParam.maximumScreenSpaceError = 16] 用于控制模型显示细节 值较大将会渲染更少的贴图,进而可以提高性能,而较低的值将提高视觉质量 @@ -95,12 +96,19 @@ export default class M3DLayer extends BaseLayer { * // layers=hide:0,1 表示只隐藏 layerIndex 为 0, 1 的图层 * * let result = m3d.append('http://develop.smaryun.com:6163/igs/rest/g3d/ModelM3D, { - * autoReset:false, - * synchronous:true, - * showBoundingVolume:false, - * maximumScreenSpaceError:16, - * layers:'layers=show:0', - * loaded:callBackfunction + * autoReset:false, + * synchronous:true, + * showBoundingVolume:false, + * maximumScreenSpaceError:16, + * layers:'layers=show:0', + * loaded:callBackfunction + * }); + * + * m3d.append('http://develop.smaryun.com:6163/igs/rest/g3d/ModelM3D', { + * autoReset:false, + * synchronous:true, + * layers: 'layers=show:0', + * getDocLayers: function (docLayers) { docLayers[0].flyTo(viewer); } * }); * */ @@ -156,6 +164,10 @@ export default class M3DLayer extends BaseLayer { synchronous = Cesium.defaultValue(options.synchronous, true); } + const docReadyPromise = new Cesium.when.defer(); + + docReadyPromise.resolve(docLayers); + const _callBack = (params) => { const _params = params; if (Cesium.defined(options.loaded) && typeof options.loaded === 'function') { @@ -163,12 +175,20 @@ export default class M3DLayer extends BaseLayer { } }; + const _callBack2 = (params) => { + const _params = params; + if (Cesium.defined(options.getDocLayers) && typeof options.getDocLayers === 'function') { + options.getDocLayers(_params); + } + }; + const parseDocInfo = (info) => { if (info !== undefined && info.sceneInfos.length > 0) { const { layers } = info.sceneInfos[0]; - layers.forEach((layer) => { + for (let i = 0; i < layers.length; i++) { + const layer = layers[i]; const type = parseInt(layer.layerType, 10); - if (type === LayerType.M3DLAYER) { + if (type === LayerType.M3DLAYER || type === LayerType.MODELLAYER) { const { layerRenderIndex, layerIndex, gdbpUrl, isVisible } = layer; let isShow = true; @@ -183,7 +203,10 @@ export default class M3DLayer extends BaseLayer { docLayers.push(m3d); m3d.readyPromise.then(_callBack); } - }); + } + if (docReadyPromise !== undefined) { + docReadyPromise.then(_callBack2); + } } }; diff --git a/src/cesiumjs/layer/TerrainLayer.js b/src/cesiumjs/layer/TerrainLayer.js index 293852010..6e320b190 100644 --- a/src/cesiumjs/layer/TerrainLayer.js +++ b/src/cesiumjs/layer/TerrainLayer.js @@ -113,8 +113,8 @@ export default class TerrainLayer extends BaseLayer { if (info !== undefined && info.sceneInfos.length > 0) { const { layers } = info.sceneInfos[0]; layers.forEach((layer) => { - const { layerType, layerRenderIndex, elevationScale, range, range3D , terrainLayer } = layer; - const { terrainColorTblInfo } = terrainLayer; + const { layerType, layerRenderIndex, range, range3D , terrainLayer } = layer; + const { terrainColorTblInfo, elevationScale } = terrainLayer; const type = parseInt(layerType, 10); if (type === LayerType.TERRAINLAYER) { const sceneIndex = 0; diff --git a/src/cesiumjs/layer/ThirdPartyLayer.js b/src/cesiumjs/layer/ThirdPartyLayer.js index 2c38514a6..d7d4d34dc 100644 --- a/src/cesiumjs/layer/ThirdPartyLayer.js +++ b/src/cesiumjs/layer/ThirdPartyLayer.js @@ -140,7 +140,7 @@ export default class ThirdPartyLayer extends BaseLayer { * let tilelayer = thirdLayer.appendBaiduMap({ptype:'sate'}); */ appendBaiduMap(optionsParam) { - const baiduProvider = this.viewer.imageryLayers.addImageryProvider(new Cesium.BaiduMapProvider(optionsParam)); + const baiduProvider = this.viewer.imageryLayers.addImageryProvider(new Cesium.BaiduMapImagerProvider(optionsParam)); return baiduProvider; } diff --git a/src/cesiumjs/manager/AnalysisManager.js b/src/cesiumjs/manager/AnalysisManager.js index 6865bcc2e..e3a9c36d5 100644 --- a/src/cesiumjs/manager/AnalysisManager.js +++ b/src/cesiumjs/manager/AnalysisManager.js @@ -556,7 +556,7 @@ export default class AnalysisManager { * @param {Object} tileset 图层集 * @param {Array} planes 平面集 * @param {Object} options 动态剖切参数 - * @param {Object} [options.color=Color.WHITE.withAlpha(0.5)] 材质 + * @param {Color} [options.color=Color.WHITE.withAlpha(0.5)] 材质 * @param {Number} [options.scaleHeight=2.5] 高度缩放比 * @param {Number} [options.scaleWidth=2.5] 宽度缩放比 * @param {Boolean} [options.interaction] 交互 @@ -567,8 +567,8 @@ export default class AnalysisManager { if (!Cesium.defined(tilesets) && tilesets.length > 0) { return undefined; } - var scaleHeight = defaultValue(options.scaleHeight, 2.5); - var scaleWidth = defaultValue(options.scaleWidth, 2.5); + var scaleHeight = Cesium.defaultValue(options.scaleHeight, 2.5); + var scaleWidth = Cesium.defaultValue(options.scaleWidth, 2.5); let material = Cesium.Color.WHITE.withAlpha(0.5); let interaction = false; const optionsParam = Cesium.defaultValue(options, {}); @@ -593,7 +593,7 @@ export default class AnalysisManager { for (let i = 0; i < planes.length; i += 1) { const normal = planes[i].normal._cartesian3; const planeEntity = this.viewer.entities.add({ - position: Cesium.CommFunction.getPointOntoPlane(center, normal, tileSet.boundingSphere.center, new Cesium.Cartesian3), + position: Cesium.CommonFunction.getPointOntoPlane(center, normal, tileset.boundingSphere.center, new Cesium.Cartesian3), plane: { dimensions: new Cesium.Cartesian2(radius * scaleWidth, radius * scaleHeight), material diff --git a/src/cesiumjs/manager/LabelLayer.js b/src/cesiumjs/manager/LabelLayer.js index 3accd5b4e..7476b0514 100644 --- a/src/cesiumjs/manager/LabelLayer.js +++ b/src/cesiumjs/manager/LabelLayer.js @@ -236,8 +236,9 @@ export default class LabelLayer extends BaseLayer { * @param {String} [options.labelHorizontalOrigin] 文字注记相对于原点的水平位置 默认值: HorizontalOrigin.BOTTOM * @param {String} [options.attribute] 属性参数 默认值: undefined * @example + * let labelLayer = new LabelLayer({viewer:viewer}); * const options = { iconUrl: '/car.png', text: '注记文本', font: '14pt 楷体', labelShowBackground: true, attribute: '这是属性信息查询时可以看到' } - * const labelIcon = webGlobe.appendLabelIconEx(110, 33, 0, options); + * const labelIcon = labelLayer.appendLabelIconEx(110, 33, 0, options); * @returns {Entity} labelIcon 图标注记对象 移除通过removeEntity(entity) */ appendLabelIconEx(lon, lat, height, options) { diff --git a/src/cesiumjs/manager/WebSceneControl.js b/src/cesiumjs/manager/WebSceneControl.js new file mode 100644 index 000000000..9d2370698 --- /dev/null +++ b/src/cesiumjs/manager/WebSceneControl.js @@ -0,0 +1,270 @@ +import { CesiumZondy } from '../core/Base'; + +/** + * 三维视图的主要类 + * @alias WebSceneControl + * @constructor + * @class module:客户端视图管理.WebSceneControl + * @param {Element|String} elementId 放置视图的div的id + * @param {Object} [options] 包含以下属性的对象 + * @param {String} [options.viewerMode=‘3D’] 初始视图模式默认为三维球视图 '2D'表示二维视图 'COLUMBUS_VIEW' 表示三维平面视图 + * @param {Boolean} [options.showInfo=false] 是否显示默认的属性信息框 + * @param {Boolean} [options.animation=true] 默认动画控制不显示 + * @param {Boolean} [options.baseLayerPicker=true] If set to false, the BaseLayerPicker widget will not be created. + * @param {Boolean} [options.fullscreenButton=true] If set to false, the FullscreenButton widget will not be created. + * @param {Boolean} [options.vrButton=false] If set to true, the VRButton widget will be created. + * @param {Boolean} [options.onCopy=false] 是否禁用复制，默认为false禁用 + * @example + * var webGlobe = new CesiumZondy.WebSceneControl('GlobeView'); + * + * var webGlobe = new CesiumZondy.WebSceneControl('GlobeView',{showInfo:true}); + * //或者如下 + * var options ={ + * showInfo:false, + * viewerMode:'3D', + * keyEventEnable:false + * }; + * var webGlobe = new CesiumZondy.WebSceneControl('GlobeView',options); + */ +export default class WebSceneControl { + constructor(elementId, op) { + const options = Cesium.defaultValue(op, {}); + + /** 默认动画控制不显示 */ + options.animation = Cesium.defaultValue(options.animation, false); + // 默认不显示图层控制显示 + options.baseLayerPicker = Cesium.defaultValue(options.baseLayerPicker, false); + // 默认不显示全屏控制按钮 + options.fullscreenButton = Cesium.defaultValue(options.fullscreenButton, false); + // 默认不显示地名查询框 + options.geocoder = Cesium.defaultValue(options.geocoder, false); + // 默认不显示复位按钮 + options.homeButton = Cesium.defaultValue(options.homeButton, false); + // 默认不显示信息框 + options.infoBox = Cesium.defaultValue(options.infoBox, false); + // 默认不显示3D/2D选择器 + options.sceneModePicker = Cesium.defaultValue(options.sceneModePicker, false); + // 默认不显示选取指示器组件 + options.selectionIndicator = Cesium.defaultValue(options.selectionIndicator, false); + // 默认创建但不显示时间轴 + options.timeline = Cesium.defaultValue(options.timeline, false); + // 默认不显示帮助按钮 + options.navigationHelpButton = Cesium.defaultValue(options.navigationHelpButton, false); + + options.navigationInstructionsInitiallyVisible = Cesium.defaultValue(options.navigationInstructionsInitiallyVisible, true); + // 默认不显示渲染错误信息面板 + options.showRenderLoopErrors = Cesium.defaultValue(options.showRenderLoopErrors, false); + // 默认场景为三维球面视图 + options.sceneMode = Cesium.defaultValue(options.sceneMode, Cesium.SceneMode.SCENE3D); + // 默认地图投影为web 墨卡托 + options.mapProjection = Cesium.defaultValue(options.mapProjection, new Cesium.WebMercatorProjection()); + // 默认可视化数据源集合 + options.dataSources = Cesium.defaultValue(options.dataSources, new Cesium.DataSourceCollection()); + // 默认支持阴影 + options.shadows = Cesium.defaultValue(options.shadows, false); + + // 使用 ThreeJS 默认要关闭自动渲染 + if (this._useThreeJs) { + options.useDefaultRenderLoop = false; + } + + this._threeContainer = undefined; + + // 管理append添加的图层组 + this._appendCollection = []; + + // 默认支持键盘事件 + this._keyEventEnable = Cesium.defaultValue(options.keyEventEnable, true); + // 创建默认视图对象 + this._viewer = new Cesium.Viewer(elementId, options); + + //隐藏版权信息 + this._viewer.cesiumWidget.creditContainer.style.display = 'none'; + + // 场景对象 + this._scene = this._viewer.scene; + + this._screenSpaceEventHandler = new Cesium.ScreenSpaceEventHandler(this._viewer.scene.canvas); + + this._elementID = elementId; + + this._popupContain = []; // 用于管理多个popup，主要考虑到多个popup场景变化时需响应其事件，改变其位置 + + const screenSpaceCameraController = this._viewer.scene.screenSpaceCameraController; + //默认关闭hdr + this._viewer.scene.highDynamicRange = false; + screenSpaceCameraController.minimumZoomDistance = 1; + screenSpaceCameraController.maximumZoomDistance = 2400000000000000; + this._viewer.canvas.onclick = function () { + this.focus(); + }; + + this._cameraParameter = {}; + const flags = { + looking: false, + rotateLeft: false, + rotateRight: false, + moveUp: false, + moveDown: false, + moveLeft: false, + moveRight: false, + goHome: false, + wireFrame: false, + showFPS: false + }; + + //与activex球保持一致 + function getFlagForKeyCode(keyCode) { + switch (keyCode) { + case 'W'.charCodeAt(0): //向下平移镜头 + return 'moveDown'; + case 'S'.charCodeAt(0): //向上平移镜头 + return 'moveUp'; + case 'A'.charCodeAt(0): //向右平移镜头 + return 'moveRight'; + case 'D'.charCodeAt(0): //向左平移镜头 + return 'moveLeft'; + case 'Q'.charCodeAt(0): //向右旋转镜头 + return 'rotateRight'; + case 'E'.charCodeAt(0): //向左旋转镜头 + return 'rotateLeft'; + case 'Z'.charCodeAt(0): //空格键复位 + return 'goHome'; + case 'G'.charCodeAt(0): //G键显示网 + return 'wireFrame'; + case 'F'.charCodeAt(0): //F键显示帧率 + return 'showFPS'; + default: + return undefined; + } + } + + document.addEventListener( + 'keydown', + function (e) { + const flagName = getFlagForKeyCode(e.keyCode); + if (typeof flagName !== 'undefined') { + flags[flagName] = true; + } + }, + false + ); + document.addEventListener( + 'keyup', + function (e) { + const flagName = getFlagForKeyCode(e.keyCode); + if (typeof flagName !== 'undefined') { + flags[flagName] = false; + } + }, + false + ); + + this._shouldAnimate = Cesium.defaultValue(options.shouldAnimate, false); //记录全局是否允许动画 + var that = this; + + this._viewer.clock.onTick.addEventListener(function () { + //获取相机高度 + if (that.keyEventEnable) { + const position = that._viewer.camera.position; + const cameraHeight = that._viewer.scene.globe.ellipsoid.cartesianToCartographic(position).height; + const moveRate = cameraHeight / 40.0; + if (flags.rotateLeft) { + that._viewer.camera.rotateLeft(0.01); + } + if (flags.rotateRight) { + that._viewer.camera.rotateRight(0.01); + } + if (flags.moveUp) { + that._viewer.camera.moveBackward(moveRate); + } + if (flags.moveDown) { + that._viewer.camera.moveForward(moveRate); + } + if (flags.moveLeft) { + that._viewer.camera.moveLeft(moveRate); + } + if (flags.moveRight) { + that._viewer.camera.moveRight(moveRate); + } + if (flags.goHome) { + that._viewer.camera.flyTo({ + destination: Cesium.Cartesian3.fromDegrees(104, 30, 15682725) + }); + } + if (flags.wireFrame) { + var bShowWireframe = that._viewer.scene.globe._surface.tileProvider._debug.wireframe; + that._viewer.scene.globe._surface.tileProvider._debug.wireframe = !bShowWireframe; + flags.wireFrame = false; + } + if (flags.showFPS) { + var bShowFPS = that._viewer.scene.debugShowFramesPerSecond; + that._viewer.scene.debugShowFramesPerSecond = !bShowFPS; + flags.showFPS = false; + } + } + }); + /** + * 禁用右键菜单 + */ + document.oncontextmenu = function () { + event.returnValue = false; + }; + // /** + // * 禁用选中功能 + // */ + // document.onselectstart = function(){ + // event.returnValue = false; + // }; + /** + * 禁用复制功能 + */ + document.oncopy = function () { + event.returnValue = that._onCopy; + }; + + this.scene.skyAtmosphere.showGroundAtmosphere = false; + this._isRecoverExplosion = false; + } + + /** + * 视图 + * @memberof WebSceneControl.prototype + * @type {Viewer} + * @readonly + */ + get viewer() { + return this._viewer; + } + + /** + * 场景 + * @memberof WebSceneControl.prototype + * @readonly + * @type {Scene} + */ + get scene() { + return this._scene; + } + + /** + * 事件句柄 + * @memberof WebSceneControl.prototype + * @readonly + */ + get screenSpaceEventHandler() { + return this._screenSpaceEventHandler; + } + + /** + * 当前椭球 + * @memberof WebSceneControl.prototype + * @type {Ellipsoid} + * @readonly + */ + get ellipsoid() { + return this._viewer.scene.globe.ellipsoid; + } +} + +CesiumZondy.WebSceneControl = WebSceneControl; diff --git a/src/cesiumjs/manager/index.js b/src/cesiumjs/manager/index.js index 3e6bb68e2..4dd2436f7 100644 --- a/src/cesiumjs/manager/index.js +++ b/src/cesiumjs/manager/index.js @@ -8,6 +8,7 @@ import LabelLayer from "./LabelLayer"; import MouseEventManager from "./MouseEventManager"; import PopupController from "./PopupController"; import SceneManager from "./SceneManager"; +import WebSceneControl from './WebSceneControl'; export { AnalysisManager, @@ -19,4 +20,5 @@ export { MouseEventManager, PopupController, SceneManager, + WebSceneControl }; \ No newline at end of file diff --git a/src/cesiumjs/overlay/MapvLayer.js b/src/cesiumjs/overlay/MapvLayer.js index d180714e4..9a08ec0ff 100644 --- a/src/cesiumjs/overlay/MapvLayer.js +++ b/src/cesiumjs/overlay/MapvLayer.js @@ -15,7 +15,7 @@ var idIndex = 0; * @param {Boolean} [mapVOptions.cesium.postRender=false] 是否实时渲染 * @param {Boolean} [mapVOptionscesium.cesium.postRenderFrame=30] 每间隔多少帧渲染一次 * @param container - {Element} 外部传入的div;外接的方式使用mapv - * @example + * @example * // 构建对应的dataset var dataSet = new mapv.DataSet(data); @@ -140,7 +140,7 @@ export default class MapvLayer { this.scene.camera.moveStart.removeEventListener(this.postStartEvent, this); this.scene.camera.moveEnd.removeEventListener(this.postEndEvent, this); } else { - let handler = this.handler; + let handler = this.handler; if (handler) { handler.removeInputAction(this.innerMoveEnd, Cesium.ScreenSpaceEventType.WHEEL); handler.removeInputAction(this.innerMoveStart, Cesium.ScreenSpaceEventType.LEFT_DOWN); @@ -274,10 +274,19 @@ export default class MapvLayer { canvas.style.pointerEvents = 'none'; canvas.style.zIndex = this.mapVOptions.zIndex || 100; - canvas.width = parseInt(this.map.canvas.width); - canvas.height = parseInt(this.map.canvas.height); - canvas.style.width = this.map.canvas.style.width; - canvas.style.height = this.map.canvas.style.height; + // canvas.width = parseInt(this.map.canvas.width); + // canvas.height = parseInt(this.map.canvas.height); + // canvas.style.width = this.map.canvas.style.width; + // canvas.style.height = this.map.canvas.style.height; + canvas.width = + parseInt(this.map.canvas.width) || + parseInt(this.map.container.offsetWidth); + canvas.height = + parseInt(this.map.canvas.height) || + parseInt(this.map.container.offsetHeight); + canvas.style.width = parseInt(this.map.container.offsetWidth) + "px"; + canvas.style.height = parseInt(this.map.container.offsetHeight) + "px"; + var devicePixelRatio = this.devicePixelRatio; if (this.mapVOptions.context == '2d') { canvas.getContext(this.mapVOptions.context).scale(devicePixelRatio, devicePixelRatio); @@ -296,10 +305,18 @@ export default class MapvLayer { canvas.style.pointerEvents = 'none'; canvas.style.zIndex = this.mapVOptions.zIndex || 100; - canvas.width = parseInt(this.map.canvas.width); - canvas.height = parseInt(this.map.canvas.height); - canvas.style.width = this.map.canvas.style.width; - canvas.style.height = this.map.canvas.style.height; + // canvas.width = parseInt(this.map.canvas.width); + // canvas.height = parseInt(this.map.canvas.height); + // canvas.style.width = this.map.canvas.style.width; + // canvas.style.height = this.map.canvas.style.height; + canvas.width = + parseInt(this.map.canvas.width) || + parseInt(this.map.container.offsetWidth); + canvas.height = + parseInt(this.map.canvas.height) || + parseInt(this.map.container.offsetHeight); + canvas.style.width = parseInt(this.map.container.offsetWidth) + "px"; + canvas.style.height = parseInt(this.map.container.offsetHeight) + "px"; var devicePixelRatio = this.devicePixelRatio; if (this.mapVOptions.context == '2d') { canvas.getContext('2d').scale(devicePixelRatio, devicePixelRatio); @@ -378,10 +395,18 @@ export default class MapvLayer { canvas.style.position = 'absolute'; canvas.style.top = '0px'; canvas.style.left = '0px'; - canvas.width = parseInt(this.map.canvas.width); - canvas.height = parseInt(this.map.canvas.height); + // canvas.width = parseInt(this.map.canvas.width); + // canvas.height = parseInt(this.map.canvas.height); //canvas.style.width = this.map.canvas.style.width; //canvas.style.height = this.map.canvas.style.height; + canvas.width = + parseInt(this.map.canvas.width) || + parseInt(this.map.container.offsetWidth) * this.devicePixelRatio; + canvas.height = + parseInt(this.map.canvas.height) || + parseInt(this.map.container.offsetHeight) * this.devicePixelRatio; + canvas.style.width = parseInt(this.map.container.offsetWidth) + 'px'; + canvas.style.height = parseInt(this.map.container.offsetHeight) + 'px'; var devicePixelRatio = this.devicePixelRatio; if (this.mapVOptions.context == '2d') { canvas.getContext('2d').scale(devicePixelRatio, devicePixelRatio); diff --git a/src/cesiumjs/overlay/PopupLayer.js b/src/cesiumjs/overlay/PopupLayer.js index 3d1b1f100..e8c34f718 100644 --- a/src/cesiumjs/overlay/PopupLayer.js +++ b/src/cesiumjs/overlay/PopupLayer.js @@ -1,7 +1,6 @@ import { CesiumZondy } from '../core/Base'; import { updataPopupPosition } from './popup/popup'; -import Cesium from '../../../node_modules/cesium/Source/Cesium'; var popupsIdIndex = 0; @@ -72,6 +71,7 @@ export default class PopupLayer { this.popupContentId = options.popupContentId || 'cesium-popup-content-id-' + popupsIdIndex++; this.options.postRender = this.options.postRender === undefined ? true : this.options.postRender; + this.Cesium = options.Cesium || window['Cesium']; this.scene = map.scene; this.camera = map.camera; @@ -80,10 +80,10 @@ export default class PopupLayer { if (options.callback) { const { onShow, onHide } = options.callback; this.onShow = onShow; - this.onHide = onHide + this.onHide = onHide; } - let ScreenSpaceEventHandler = Cesium.ScreenSpaceEventHandler || window['Cesium'].ScreenSpaceEventHandler; + let ScreenSpaceEventHandler = this.Cesium.ScreenSpaceEventHandler || window['Cesium'].ScreenSpaceEventHandler; this.handler = new ScreenSpaceEventHandler(this.scene.canvas); @@ -96,7 +96,7 @@ export default class PopupLayer { this.cartesian = this.cartesian || this.position.cartesian || - Cesium.Cartesian3.fromDegrees(this.position.longitude, this.position.latitude, this.position.height); + this.Cesium.Cartesian3.fromDegrees(this.position.longitude, this.position.latitude, this.position.height); let vc = this.map.container; let cesumWidgetContainer = undefined; @@ -136,18 +136,34 @@ export default class PopupLayer { let infoDiv = window.document.createElement('div'); infoDiv.id = this.popupId; infoDiv.style.display = 'none'; - infoDiv.innerHTML = - '
' + - // '×' + - '
' + - this.container + - '
' + - '
' + - '
' + - '
' + - '
'; + if (typeof this.container === 'string') { + infoDiv.innerHTML = + '
' + + '
' + + this.container + + '
' + + '
' + + '
' + + '
' + + '
'; + } else { + let popupContentDiv = window.document.createElement('div'); + popupContentDiv.id = this.popupContentId; + popupContentDiv.className = 'cesium-popup'; + let popupContentWrapperDiv = window.document.createElement('div'); + popupContentWrapperDiv.className = 'cesium-popup-content-wrapper'; + popupContentWrapperDiv.appendChild(this.container); + popupContentDiv.appendChild(popupContentWrapperDiv); + + let tipContainerDiv = window.document.createElement('div'); + tipContainerDiv.className = 'cesium-popup-tip-container'; + let tipDiv = window.document.createElement('div'); + tipDiv.className = 'cesium-popup-tip'; + tipContainerDiv.appendChild(tipDiv); + popupContentDiv.appendChild(tipContainerDiv); + infoDiv.appendChild(popupContentDiv); + } + let close = window.document.createElement('div'); close.className = 'cesium-popup-close-button'; close.addEventListener('click', () => self.hide()); @@ -163,7 +179,7 @@ export default class PopupLayer { bindEvent() { let self = this; - this.handler.setInputAction(this.movement, Cesium.ScreenSpaceEventType.LEFT_CLICK); + this.handler.setInputAction(this.movement, this.Cesium.ScreenSpaceEventType.LEFT_CLICK); if (!this.map) { return; } @@ -172,8 +188,8 @@ export default class PopupLayer { this.map.scene.postRender.addEventListener(() => self.update()); } else { this.map.camera.changed.addEventListener(() => self.update()); - this.handler.setInputAction(this.moveStart, Cesium.ScreenSpaceEventType.LEFT_DOWN); - this.handler.setInputAction(this.moveEnd, Cesium.ScreenSpaceEventType.LEFT_UP); + this.handler.setInputAction(this.moveStart, this.Cesium.ScreenSpaceEventType.LEFT_DOWN); + this.handler.setInputAction(this.moveEnd, this.Cesium.ScreenSpaceEventType.LEFT_UP); this.map.scene.camera.moveEnd.addEventListener(() => self.update()); } } @@ -195,8 +211,8 @@ export default class PopupLayer { movement(movement) { var pickedPrimitive = this.map.scene.pick(movement.position); - var pickedEntity = Cesium.defined(pickedPrimitive) ? pickedPrimitive.id : undefined; - if (Cesium.defined(pickedEntity) /* && Cesium.defined(pickedEntity.billboard) */) { + var pickedEntity = this.Cesium.defined(pickedPrimitive) ? pickedPrimitive.id : undefined; + if (this.Cesium.defined(pickedEntity) /* && Cesium.defined(pickedEntity.billboard) */) { if (this.position && this.position.entity) { pickedPrimitive.id === this.position.entity.id; this.show(); diff --git a/src/cesiumjs/overlay/popup/popup.js b/src/cesiumjs/overlay/popup/popup.js index a95127408..0fc8388fa 100644 --- a/src/cesiumjs/overlay/popup/popup.js +++ b/src/cesiumjs/overlay/popup/popup.js @@ -1,5 +1,3 @@ -import Cesium from '../../../../node_modules/cesium/Source/Cesium'; - /** * @description 用来调整相机视角的时候设置对应的 * @param {Viewer} viewer Cesium的viewer对象 @@ -10,56 +8,57 @@ import Cesium from '../../../../node_modules/cesium/Source/Cesium'; * @param {Object} [options.latitude] 传入的纬度,内部换算笛卡尔积 */ export function updataPopupPosition(viewer, cartesian, popupId, popupContentId, options) { - if(!cartesian) return ; + if (!cartesian) return; let scene = viewer.scene; let camera = viewer.camera; let rect = camera.computeViewRectangle(); - const south = Cesium.Math.toDegrees(rect.south) - const north = Cesium.Math.toDegrees(rect.north) - const east = Cesium.Math.toDegrees(rect.east) - const west = Cesium.Math.toDegrees(rect.west) + let Cesium = options.Cesium || window['Cesium']; + const south = Cesium.Math.toDegrees(rect.south); + const north = Cesium.Math.toDegrees(rect.north); + const east = Cesium.Math.toDegrees(rect.east); + const west = Cesium.Math.toDegrees(rect.west); let carto, longitude, latitude; - if(options && options.longitude && options.latitude){ + if (options && options.longitude && options.latitude) { longitude = options.position.longitude; latitude = options.position.latitude; if (longitude < west || longitude > east || latitude > north || latitude < south) { - popup.style.display = "none"; + popup.style.display = 'none'; return; } } else { - carto = Cesium.Ellipsoid.WGS84.cartesianToCartographic(cartesian); + carto = Cesium.Ellipsoid.WGS84.cartesianToCartographic(cartesian); longitude = Cesium.Math.toDegrees(carto.longitude); latitude = Cesium.Math.toDegrees(carto.latitude); } - + var px_position = Cesium.SceneTransforms.wgs84ToWindowCoordinates(scene, cartesian); - - if(!px_position) return; + + if (!px_position) return; var res = false; var e = cartesian, i = camera.position, n = scene.globe.ellipsoid.cartesianToCartographic(i).height; - if (!(n += 1 * scene.globe.ellipsoid.maximumRadius, Cesium.Cartesian3.distance(i, e) > n)) { + if (!((n += 1 * scene.globe.ellipsoid.maximumRadius), Cesium.Cartesian3.distance(i, e) > n)) { res = true; } if (longitude < west || longitude > east || latitude > north || latitude < south) { res = false; } - + let popup = window.document.getElementById(popupId); - if(!popup) return; + if (!popup) return; if (res) { - popup.style.display = "block"; + popup.style.display = 'block'; var trackPopUpContent = window.document.getElementById(popupContentId); var popw = document.getElementById(popupContentId).offsetWidth; var poph = document.getElementById(popupContentId).offsetHeight; - trackPopUpContent.style.left = px_position.x - (popw / 2) + "px"; - trackPopUpContent.style.top = px_position.y - (poph - 10) + "px"; + trackPopUpContent.style.left = px_position.x - popw / 2 + 'px'; + trackPopUpContent.style.top = px_position.y - (poph - 10) + 'px'; } else { - popup.style.display = "none"; + popup.style.display = 'none'; } -} \ No newline at end of file +} diff --git a/src/cesiumjs/render/VectorTileLayer.js b/src/cesiumjs/render/VectorTileLayer.js index 4e9779922..627539e07 100644 --- a/src/cesiumjs/render/VectorTileLayer.js +++ b/src/cesiumjs/render/VectorTileLayer.js @@ -4,7 +4,6 @@ import { getLayers, getFonts, getVectorTileSource, getSpritePng } from './vector import VectorTileProvider from './vectortile/VectorTileProvider'; import VectorTileStyle from './vectortile/MapgisVectorTileStyle'; import axios from 'axios'; -import { find } from 'ol/array'; /** * @author 基础平台/创新中心 潘卓然 ParnDeedlit @@ -138,6 +137,10 @@ export class VectorTileLayer { ); } + getLayer() { + return self.provider ? self.provider : undefined; + } + /** * 首先构造矢量瓦片样式，再添加图层 * @function module:客户端渲染.VectorTileLayer.prototype.addLayer diff --git a/src/leaflet/core/Base.js b/src/leaflet/core/Base.js index 4eb0b10ea..a5df7f68e 100644 --- a/src/leaflet/core/Base.js +++ b/src/leaflet/core/Base.js @@ -8,9 +8,13 @@ import L from "leaflet"; L.zondy = L.zondy || {}; L.zondy.control = L.zondy.control || {}; +L.mapgis = L.mapgis || {}; + /** * @module 客户端可视化 */ L.zondy.Clientview = L.zondy.Clientview || {}; L.CRS = L.CRS || {}; + +export {L}; diff --git a/src/leaflet/layer/MapLayer.js b/src/leaflet/layer/MapLayer.js new file mode 100644 index 000000000..ebd85ba4e --- /dev/null +++ b/src/leaflet/layer/MapLayer.js @@ -0,0 +1,148 @@ +import { newGuid } from '../../service/common/Util'; +import { L } from '../core/Base.js'; + +/** + * @class L.mapgis.MapLayer + * @classdesc 新版igserver地图服务加载类 + * @extends L.TileLayer + * @example + //地图容器 + var map = L.map('leaf_map', { + //添加缩放控件 + zoomControl: true, + //投影坐标系 + crs: L.CRS.EPSG4326, + //中心点[y,x] + center: [(30.86431739220 + 30.3383275329) / 2, (114.57307983700002 + 113.97889584400014)/ 2],//武汉建筑 + //最大级数 + maxZoom: 10, + //最小级数 + minZoom: 7, + //显示级数 + zoom: 8 + }); + + //创建地图图层 + var mapLayer = new L.mapgis.MapLayer("http://192.168.199.71:8089/igs/rest/services/layertest/武汉建筑/MapServer", { + layers:'show:0', + imageFormat: 'jpg', + filters:{"0":{"where":"Floor>10"}}, + styles: {"0":{"displayRegionBorder":true}}, + imageTransparent:false, + //只显示一个图层,不平铺显示 + noWrap: true + }).addTo(map); + */ + +var MapLayer = L.TileLayer.extend({ + options: { + imageFormat: null, + imageHeight: 512, + imageWidth: 512, + guid: null, + imageTransparent: null, + filters: null, + styles: null, + layers: null, + crs: null, + isAntialiasing: null + }, + /** + * + * @param url - {String} 必选，地图服务的基地址。例如"http://192.168.199.71:8089/igs/rest/services/layertest/武汉建筑/MapServer". + * @param options - {Object} 属性键值对，地图属性字段。 + * @param {String} [options.imageFormat = 'png'] 可选，图片的格式，支持png|jpg|gif。 + * @param {Object} [options.filters = null] 可选，图层的过滤信息。例如，{"0":{"where":"Floor>10"}}。 + * @param {Object} [options.styles = null] 可选，图层的样式。例如，{"0":{"displayRegionBorder":true}}。 + * @param {String} [options.layers = null] 可选，指定需要被取图的图层序列号。格式：show/hide/include/exclude: layerid1,layerid2。 + 1 show：仅仅显示指定了图层序号的图层 + 2 hide ：显示除hide参数指定图层外所有的图层 + 3 include：除显示默认图层（地图文档内图层状态为可见的图层）外，另追加这些被指定的图 层显示，追加的这些图层必须为地图中包含的图层。 + 4 exclude: 从默认图层列表里删除这些被指定的图层后，进行显示 + * @param {String} [options.crs = null] 可选，投影空间参照系，支持mapgis参照系名称和epsg编号。 + * @param {Number} [options.imageHeight = 512] 可选，图片的高度。 + * @param {Number} [options.imageWidth = 512] 可选，图片的宽度。 + * @param {Boolean} [options.isAntialiasing = false] 可选，返回的图片是否抗锯齿。 + * @param {Boolean} [options.imageTransparent = true] 可选，返回的图片是否透明。 + * @param {String} [options.guid = newGuid()] 可选。唯一ID，用户标识地图文档。 + * + */ + initialize: function (url, options) { + this.url = encodeURI(url + '/image'); + var imageHeight = options.imageHeight || 512; + var imageWidth = options.imageWidth || 512; + options.tileSize = window.L.point(imageWidth, imageHeight); + // console.log('maplayer_initialize', options); + L.TileLayer.prototype.initialize.apply(this, arguments); + L.setOptions(this, options); + L.stamp(this); + }, + + onAdd: function (map) { + this._crs = map.options.crs; + this._initLayerUrl(); + L.TileLayer.prototype.onAdd.call(this, map); + }, + + getTileUrl: function (coords) { + var tileBounds = this._tileCoordsToBounds(coords); + var nw = this._crs.project(tileBounds.getNorthWest()); + var se = this._crs.project(tileBounds.getSouthEast()); + var params = '&bbox=' + nw.x + ',' + se.y + ',' + se.x + ',' + nw.y; + return this._layerUrl + encodeURI(params); + }, + + _initLayerUrl: function () { + var vm = this; + var layerUrl = vm.url + '?'; + layerUrl += encodeURI(vm._initAllRequestParams().join('&')); + this._layerUrl = layerUrl; + // console.log('maplayer__initLayerUrl', layerUrl); + }, + + _initAllRequestParams: function () { + var vm = this, + options = vm.options || {}, + params = []; + + // console.log('maplayer_initAllRequestParams', options); + var imageHeight = options.imageHeight || 512; + var imageWidth = options.imageWidth || 512; + params.push('size=' + imageWidth + ',' + imageHeight); + + var guid = options.guid || newGuid(); + params.push('clientId=' + guid); + + if (options.imageFormat) { + params.push('format=' + options.imageFormat); + } + if (options.layers) { + params.push('layers=' + options.layers); + } + if (options.filters) { + params.push('layerFilters=' + JSON.stringify(options.filters)); + } + if (options.styles) { + params.push('layerStyles=' + JSON.stringify(options.styles)); + } + if (options.imageTransparent !== undefined && options.imageTransparent !== null) { + params.push('transparent=' + options.imageTransparent); + } + + if (options.crs) { + params.push('projectionSrs=' + options.crs); + } + + if (options.isAntialiasing !== undefined && options.isAntialiasing !== null) { + params.push('isAntialiasing=' + options.isAntialiasing); + } + + params.push('f=image'); + + return params; + } +}); + +export { MapLayer }; +L.mapgis.MapLayer = MapLayer; +export { L }; diff --git a/src/leaflet/layer/TileLayer.js b/src/leaflet/layer/TileLayer.js new file mode 100644 index 000000000..d30f0ad20 --- /dev/null +++ b/src/leaflet/layer/TileLayer.js @@ -0,0 +1,62 @@ +import {L} from '../core/Base.js'; + +/** + * @class L.mapgis.TileLayer + * @classdesc 新版igserver瓦片服务加载类 + * @extends L.TileLayer + * @example + //地图容器 + var map = L.map("leaf_map", { + //添加缩放控件 + zoomControl: true, + //投影坐标系 + crs: L.CRS.EPSG4326, + center: [(29.969811000000004 + 31.363327503204342) / 2, (113.69534616 + 115.07704496383667) / 2], + //最大级数 + maxZoom: 17, + //最小级数 + minZoom: 7, + //显示级数 + zoom: 8, + }); + + //瓦片地图 + var layer = new L.mapgis.TileLayer( + "http://192.168.199.71:8089/igs/rest/services/layertest/栅格瓦片/TileServer", + { + noWrap: true + } + ).addTo(map); + */ + +var TileLayer = L.TileLayer.extend({ + options: { + // blankTile:null + }, + + initialize: function(url,options){ + this.url = encodeURI(url + "/tileImage"); + L.TileLayer.prototype.initialize.apply(this, arguments); + L.setOptions(this,options); + L.stamp(this); + }, + + onAdd:function(map) { + L.TileLayer.prototype.onAdd.call(this,map); + }, + + getTileUrl: function (coords) { + // var vm = this, + // options = vm.options || {}; + var tileUrl = this.url + '/{z}/{y}/{x}?f=image'; + // if(options.blankTile !== undefined && options.blankTile !== null){ + // tileUrl = tileUrl + '&blankTile=' + options.blankTile; + // } + tileUrl = tileUrl.replace('{x}', coords.x.toString()).replace('{y}', coords.y.toString()).replace('{z}', coords.z.toString()); + return tileUrl; + } +}); + +export {TileLayer}; +L.mapgis.TileLayer = TileLayer; +export {L}; diff --git a/src/leaflet/layer/index.js b/src/leaflet/layer/index.js index ddab5ac91..3ed60a57f 100644 --- a/src/leaflet/layer/index.js +++ b/src/leaflet/layer/index.js @@ -1,5 +1,7 @@ import {MapDocLayer} from './mapDocLayer'; import {MapTileLayer} from './mapTileLayer'; +import {MapLayer} from './MapLayer'; +import {TileLayer} from './TileLayer'; import {MapWMTSLayer} from './mapWmtsLayer'; import {GeneralWMTSLayer} from './generalWmtsLayer'; import {MapVectorLayer} from './mapVectorLayer'; @@ -20,6 +22,8 @@ import { export {MapDocLayer}; export {MapTileLayer}; +export {MapLayer}; +export {TileLayer}; export {MapWMTSLayer}; export {GeneralWMTSLayer}; export {MapVectorLayer}; diff --git a/src/leaflet/layer/mapWmtsLayer.js b/src/leaflet/layer/mapWmtsLayer.js index b2d0b0135..752b99d4f 100644 --- a/src/leaflet/layer/mapWmtsLayer.js +++ b/src/leaflet/layer/mapWmtsLayer.js @@ -1,5 +1,5 @@ -import {Zondy} from '../../service/common/Base'; -import {L} from 'leaflet'; +import { Zondy } from '../../service/common/Base'; +import { L } from 'leaflet'; /** * @author 基础平台/产品2部 龚跃健 @@ -19,6 +19,8 @@ import {L} from 'leaflet'; * @param {String} [option.format = image/png ] 可选。图块输出格式。image/png或image/jpeg * @param {String} [option.tileSize = 256] 可选。瓦片大小 * @param {String} [option.version = 1.0.0] 可选。WMTS版本 + * @param {String} [option.tokenKey = ""] 可选。token的key值（token/tk） + * @param {String} [option.token = ""] 可选。token值 * @example new Zondy.Map.MapWMTSLayer({ //IGServer所在ip地址 @@ -34,116 +36,123 @@ import {L} from 'leaflet'; }) */ var MapWMTSLayer = window.L.TileLayer.extend({ - options: { - version: '1.0.0', - style: '', - serverName: '',//服务名 - tilematrixSet: '', //矩阵集名称 - layer: '', //图层名 - format: 'image/png', - tileSize: 256, - attribution: "Zondy WMTS Data", - noWrap: true - }, - //var layer3 = new ZondyMapWMTSLayer("http://localhost:6163/igs/rest/ogc/WMTSServer", { tilematrixSet: "EPSG:4326_世界地图经纬度LEVEL7_028mm_GB", layer: 'World_level7_WMTS' }).addTo(mymap); - // - initialize: function (options) { // (String, Object) - if (options.url) { - if (options.url.indexOf("?") > -1) { - this._url = options.url.split("?")[0] - } else { - this._url = options.url - } - } else { - var partUrl = '/igs/rest/ogc/WMTSServer' - if (options.serverName && options.serverName !== '') { - partUrl = '/igs/rest/ogc/' + options.serverName + '/WMTSServer' - } - var domain = options && options.domain ? options.domain : ''; - if (domain === '') { - this.networkProtocol = options.networkProtocol !== undefined ? options.networkProtocol : location.protocol.split(":")[0] || "http"; - var ip = options && options.ip ? options.ip : 'localhost'; - var port = options && options.port ? options.port : '6163'; - this._url = encodeURI(this.networkProtocol + '://' + ip + ':' + port + partUrl); - } else { - this._url = encodeURI(domain + partUrl); - } - } - if (this._url.toLowerCase().indexOf("ime-cloud") > -1) {//吉威的数据 - this._url += '?service=WMTS&REQUEST=GetTile' - } else { - this._url += '?service=WMTS&request=GetTile' - } - this.options.origin = options.origin ? options.origin : null; - window.L.setOptions(this, options); - }, - onAdd: function (map) { - this._crs = this.options.crs || map.options.crs; - let bounds = this._crs.projection.bounds; - let northWest = [bounds.min.x, bounds.max.y] - this._origin = this.options.origin ? this.options.origin : northWest - window.L.TileLayer.prototype.onAdd.call(this, map); - }, - /** - * @private - * @function Zondy.Map.MapWMTSLayer.prototype.getTileUrl - * @description 根据行列号获取瓦片地址。考虑发布的wmts的瓦片不按左上角为原点的情况，需另外处理 - * @param coords - {Object} 行列号 - * @return {string} 瓦片地址 - */ - getTileUrl: function (coords) { // (Point, Number) -> String - // var tileBounds = this._tileCoordsToBounds(coords); - // var ne = this._crs.project(tileBounds.getNorthEast()); - // var sw = this._crs.project(tileBounds.getSouthWest()); - // var tileSize = this.options.tileSize; - // var resolution = Math.max(Math.abs(ne.x - sw.x) / tileSize, Math.abs(ne.y - sw.y) / tileSize); - // - // var centerPnt = [(ne.x + sw.x) / 2, (ne.y + sw.y) / 2]; - // var dx = centerPnt[0] - (this._origin)[0]; - // var dy = centerPnt[1] - (this._origin)[1]; - // - // var xGrid = -1e8; - // var yGrid = -1e8; - // - // xGrid = Math.floor(dx / (tileSize * resolution)); - // if (this.options.yAxis === 'down') { - // yGrid = Math.floor(-dy / (tileSize * resolution)); - // } else { - // yGrid = Math.floor(dy / (tileSize * resolution)); - // } + options: { + version: '1.0.0', + style: '', + serverName: '', //服务名 + tilematrixSet: '', //矩阵集名称 + layer: '', //图层名 + format: 'image/png', + tileSize: 256, + attribution: 'Zondy WMTS Data', + noWrap: true + }, + //var layer3 = new ZondyMapWMTSLayer("http://localhost:6163/igs/rest/ogc/WMTSServer", { tilematrixSet: "EPSG:4326_世界地图经纬度LEVEL7_028mm_GB", layer: 'World_level7_WMTS' }).addTo(mymap); + // + initialize: function (options) { + // (String, Object) + if (options.url) { + if (options.url.indexOf('?') > -1) { + this._url = options.url.split('?')[0]; + } else { + this._url = options.url; + } + } else { + var partUrl = '/igs/rest/ogc/WMTSServer'; + if (options.serverName && options.serverName !== '') { + partUrl = '/igs/rest/ogc/' + options.serverName + '/WMTSServer'; + } + var domain = options && options.domain ? options.domain : ''; + if (domain === '') { + this.networkProtocol = options.networkProtocol !== undefined ? options.networkProtocol : location.protocol.split(':')[0] || 'http'; + var ip = options && options.ip ? options.ip : 'localhost'; + var port = options && options.port ? options.port : '6163'; + this._url = encodeURI(this.networkProtocol + '://' + ip + ':' + port + partUrl); + } else { + this._url = encodeURI(domain + partUrl); + } + } + if (this._url.toLowerCase().indexOf('ime-cloud') > -1) { + //吉威的数据 + this._url += '?service=WMTS&REQUEST=GetTile'; + } else { + this._url += '?service=WMTS&request=GetTile'; + } + this.options.origin = options.origin ? options.origin : null; + window.L.setOptions(this, options); + }, + onAdd: function (map) { + this._crs = this.options.crs || map.options.crs; + let bounds = this._crs.projection.bounds; + let northWest = [bounds.min.x, bounds.max.y]; + this._origin = this.options.origin ? this.options.origin : northWest; + window.L.TileLayer.prototype.onAdd.call(this, map); + }, + /** + * @private + * @function Zondy.Map.MapWMTSLayer.prototype.getTileUrl + * @description 根据行列号获取瓦片地址。考虑发布的wmts的瓦片不按左上角为原点的情况，需另外处理 + * @param coords - {Object} 行列号 + * @return {string} 瓦片地址 + */ + getTileUrl: function (coords) { + // (Point, Number) -> String + // var tileBounds = this._tileCoordsToBounds(coords); + // var ne = this._crs.project(tileBounds.getNorthEast()); + // var sw = this._crs.project(tileBounds.getSouthWest()); + // var tileSize = this.options.tileSize; + // var resolution = Math.max(Math.abs(ne.x - sw.x) / tileSize, Math.abs(ne.y - sw.y) / tileSize); + // + // var centerPnt = [(ne.x + sw.x) / 2, (ne.y + sw.y) / 2]; + // var dx = centerPnt[0] - (this._origin)[0]; + // var dy = centerPnt[1] - (this._origin)[1]; + // + // var xGrid = -1e8; + // var yGrid = -1e8; + // + // xGrid = Math.floor(dx / (tileSize * resolution)); + // if (this.options.yAxis === 'down') { + // yGrid = Math.floor(-dy / (tileSize * resolution)); + // } else { + // yGrid = Math.floor(dy / (tileSize * resolution)); + // } - var zoom = this._getZoomForUrl(); - var url = window.L.Util.template(this._url, {s: this._getSubdomain(coords)}); + var zoom = this._getZoomForUrl(); + var url = window.L.Util.template(this._url, { s: this._getSubdomain(coords) }); - var obj = { - version: this.options.version, - style: this.options.style, - tilematrixSet: this.options.tilematrixSet, - format: this.options.format, - layer: this.options.layer, - tilematrix: zoom, - tilerow: coords.y, - tilecol: coords.x - }; + var obj = { + version: this.options.version, + style: this.options.style, + tilematrixSet: this.options.tilematrixSet, + format: this.options.format, + layer: this.options.layer, + tilematrix: zoom, + tilerow: coords.y, + tilecol: coords.x + }; - //根据地图的不同，拼装不同的url参数 - if(url.indexOf('tianditu') > -1){ - obj.tilematrixSet = 'c'; - }else if(url.indexOf('geoserver') > -1){ - obj.tilematrix = this.options.tilematrixSet+ ':'+zoom; - } + //根据地图的不同，拼装不同的url参数 + if (url.indexOf('tianditu') > -1) { + obj.tilematrixSet = 'c'; + } else if (url.indexOf('geoserver') > -1) { + obj.tilematrix = this.options.tilematrixSet + ':' + zoom; + } - if (this.options.token) { - if(url.indexOf('tianditu') > -1){ - obj.tk = this.options.token - }else { - obj.token = this.options.token - } - } + if (this.options.token) { + if (this.options.tokenKey) { + obj[this.options.tokenKey] = this.options.token; + } else { + if (url.indexOf('tianditu') > -1) { + obj.tk = this.options.token; + } else { + obj.token = this.options.token; + } + } + } - return url + window.L.Util.getParamString(obj, url); - } + return url + window.L.Util.getParamString(obj, url); + } }); -export {MapWMTSLayer}; +export { MapWMTSLayer }; Zondy.Map.MapWMTSLayer = MapWMTSLayer; diff --git a/src/leaflet/overlay/stream/MapvStreamLayer.js b/src/leaflet/overlay/stream/MapvStreamLayer.js index e74d6b434..97c6f6925 100644 --- a/src/leaflet/overlay/stream/MapvStreamLayer.js +++ b/src/leaflet/overlay/stream/MapvStreamLayer.js @@ -1,5 +1,5 @@ -import L from "leaflet"; -import { MapvLayer } from "../MapvLayer"; +import L from 'leaflet'; +import { MapvLayer } from '../MapvLayer'; /** * @class MapvStreamLayer @@ -12,70 +12,69 @@ import { MapvLayer } from "../MapvLayer"; * @param {Object} options.field - geojson的唯一标识字段，请确保该字段的唯一性。 */ export var MapvStreamLayer = MapvLayer.extend({ - initialize: function(map, url, options) { - options = options || {}; + initialize: function (map, url, options) { + options = options || {}; - L.Util.setOptions(this, options); - - this.mapvOption = options.mapvOption || {}; - this.data = []; - this.lastDate = new Date(); - this.url = url; - this.fieldHash = {}; + L.Util.setOptions(this, options); - this.fieldDeg = options.fieldDeg; - this.iconUrl = options.iconUrl; - this.timeSpeed = options.timeSpeed || 100; - this.createIcon(); - - MapvLayer.prototype.initialize.call(this, map, new window.mapv.DataSet([]), this.mapvOption, options) - }, + this.mapvOption = options.mapvOption || {}; + this.data = []; + this.lastDate = new Date(); + this.url = url; + this.fieldHash = {}; - onMessage: function(msg) { - const feature = msg.feature; - const field = msg.feature.properties[this.options.field]; + this.fieldDeg = options.fieldDeg; + this.iconUrl = options.iconUrl; + this.timeSpeed = options.timeSpeed || 100; + this.createIcon(); - let layer = this.parasIcon(feature); + MapvLayer.prototype.initialize.call(this, map, new window.mapv.DataSet([]), this.mapvOption, options); + }, - if (field !== undefined && this.fieldHash[field]) { - this.data[this.fieldHash[field]] = layer; - } else { - if (field !== undefined) { - this.data.push(layer); - this.fieldHash[field] = this.data.length - 1; - } - } + onMessage: function (msg) { + const feature = msg.feature; + const field = msg.feature.properties[this.options.field]; + + let layer = this.parasIcon(feature); - this.updateLayer(); - }, + if (field !== undefined && this.fieldHash[field]) { + this.data[this.fieldHash[field]] = layer; + } else { + if (field !== undefined) { + this.data.push(layer); + this.fieldHash[field] = this.data.length - 1; + } + } - createIcon: function() { - var iconUrl = - this.iconUrl || "http://client.snanyun.com:8899/img/leaflet/marker/bike.png"; - this.icon = new Image(); - this.icon.src = iconUrl; - }, + this.updateLayer(); + }, - parasIcon: function(feature) { - this.mapvOption = { - draw: "icon" - }; - var deg = feature.properties[this.fieldDeg] || 0; - var icon = { - geometry: { - type: "Point", - coordinates: feature.geometry.coordinates - }, - deg: deg, - icon: this.icon - }; - return icon; - }, + createIcon: function () { + var iconUrl = this.iconUrl || 'http://client.snanyun.com:8899/img/leaflet/marker/bike.png'; + this.icon = new Image(); + this.icon.src = iconUrl; + }, - updateLayer: function() { - var currentDate = new Date(); - if (currentDate - this.lastDate < this.timeSpeed) return; - this.updateData(this.data, this.mapvOption); - this.lastDate = currentDate; - } + parasIcon: function (feature) { + this.mapvOption = { + draw: 'icon' + }; + var deg = feature.properties[this.fieldDeg] || 0; + var icon = { + geometry: { + type: 'Point', + coordinates: feature.geometry.coordinates + }, + deg: deg, + icon: this.icon + }; + return icon; + }, + + updateLayer: function () { + var currentDate = new Date(); + if (currentDate - this.lastDate < this.timeSpeed) return; + this.updateData(this.data, this.mapvOption); + this.lastDate = currentDate; + } }); diff --git a/src/leaflet/overlay/view/MarkerClusterLayer.js b/src/leaflet/overlay/view/MarkerClusterLayer.js index 321d0ce9f..86fe3429f 100644 --- a/src/leaflet/overlay/view/MarkerClusterLayer.js +++ b/src/leaflet/overlay/view/MarkerClusterLayer.js @@ -11,7 +11,7 @@ import '../../core/Base'; * @param options - {Object} mapv.options * @param options.zoom - {Number} 最大的`聚类级别` * @param options.title - {Number} 单个聚类点的`标题` 内容 - * @param options.field - {String} 选择对应的字段，该字段必须是`数字型`的字段，用来计算大小和颜色 + * @param options.field - {String} 选择对应的字段，该字段必须是`数字型`的字段，用来计算大小和颜色 * * @example * $.get('./static/data/geojson/point.json', function (json) { @@ -38,7 +38,7 @@ export var MarkerClusterLayer = L.Layer.extend({ initialize: function (map, geojson, options) { this.map = map; - let { field } = options; + let {field} = options; this.field = field; this.options = options; @@ -95,9 +95,9 @@ export var MarkerClusterLayer = L.Layer.extend({ var label = point.properties[title]; var marker = L.marker( L.latLng(point.geometry.coordinates[1], point.geometry.coordinates[0]), - { title: label } + {title: label} ); - marker.bindPopup(count); + marker.bindPopup(String(count)).openPopup(); this.layer.addLayer(marker); } map.addLayer(this.layer) diff --git a/src/mapboxgl/.eslintrc.json b/src/mapboxgl/.eslintrc.json new file mode 100644 index 000000000..5befb95ce --- /dev/null +++ b/src/mapboxgl/.eslintrc.json @@ -0,0 +1,83 @@ +// Use this file as a starting point for your project's .eslintrc. +// Copy this file, and add rule overrides as needed. +// +// Window 安装方法 eslit-aribnb安装地址https://www.npmjs.com/package/eslint-config-airbnb +// +// Mac 安装方法 转载地址 https://blog.csdn.net/m0_37068028/article/details/78548148 +// ( +// export PKG=eslint-config-airbnb; +// npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs npm install --save-dev "$PKG@latest" +// ) +// eslint + airbnb + prettier 维护代码风格 +// npm i eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier babel-eslint babel-plugin-import --save-dev +// 'extends': ['airbnb', 'plugin:prettier/recommended'], + +{ + /* "extends": ["airbnb", "plugin:prettier/recommended"], */ + // 默认情况下，ESLint 会在所有父级目录里寻找配置文件，一直到根目录。如果你想要你所有项目都遵循一个特定的约定时，这将会很有用， + // 但有时候会导致意想不到的结果。为了将 ESLint 限制到一个特定的项目，在你项目根目录下的 package.json 文件或者 .eslintrc.* 文件里的 + // eslintConfig 字段下设置 "root": true。ESLint 一旦发现配置文件中有 "root": true，它就会停止在父级目录中寻找。 + "root": true, + // 脚本在执行期间访问的额外的全局变量 + // 当访问未定义的变量时，no-undef 规则将发出警告。如果你想在一个文件里使用全局变量，推荐你定义这些全局变量，这样 ESLint 就不会发出警告了。你可以使用注释或在配置文件中定义全局变量。 + "globals": { + "window": true, + "document": true, + "$": true, + + // 可从外部导入 + "Cesium": "readonly" + }, + // 设置插件 + // "plugins": [ + // 'html' + // ], + + // 设置解析器选项（必须设置这个属性） + "parserOptions": { + "ecmaVersion": 7, + "sourceType": "module", + "parser": "babel-eslint", //配置解析es6 + "ecmaFeatures": { + "jsx": true + // "arrowFunctions": true, + // "experimentalObjectRestSpread": true, + // "classes": true, + // "modules": true, + // "defaultParams": true + } + }, + // 启用的规则及各自的错误级别 + "rules": { + // 禁止用console + "no-console": 1, + // 禁止用分号 + // "semi": [2, "never"], + // "prettier/prettier": ["error", {}, { "usePrettierrc": true , "singleQuote": true, "parser": "flow" } ], + // 在同一个作用域中禁止多次重复定义 + "no-redeclare": 1, + + // 暂时去掉私有变量下划线的问题 + "no-underscore-dangle": 0, + + // 针对 MapGIS 67 的要素修改规则 将参数的修改放开 先不搞 工作量实在太大了 + // 百度echarts 关键字 mapModel seriesModel + "no-param-reassign": ["error", { + "props": true, + "ignorePropertyModificationsForRegex": ["^mapModel", "^seriesModel"] + }], + // 针对百度echarts原型链的处理 + "no-unused-vars": ["error", { + "varsIgnorePattern": "[iI]gnored", + "argsIgnorePattern": "^_" + }] + // 百度mapv源代码需要设置原型链条件，看情况放开 + // "no-proto" : true + }, + // 指定你想启用的环境 + "env": { + "browser": true, + "es6": true, + "node": true + } +} \ No newline at end of file diff --git a/src/mapboxgl/core/Base.js b/src/mapboxgl/core/Base.js index d490a985e..6f80ed36c 100644 --- a/src/mapboxgl/core/Base.js +++ b/src/mapboxgl/core/Base.js @@ -4,12 +4,14 @@ */ import mapboxgl from '@mapgis/mapbox-gl'; -export var Zondy = (window.Zondy = window.Zondy || {}) +window.mapboxgl = mapboxgl; +mapboxgl.zondy = window.mapboxgl.zondy || {}; +var Zondy = window.mapboxgl.zondy || {}; +Zondy.Map = Zondy.Map || {}; +Zondy.Util = Zondy.Util || {}; +Zondy.Network = Zondy.Network || {}; +Zondy.Event = Zondy.Event || {}; +Zondy.Socket = Zondy.Socket || {}; -Zondy.Util = Zondy.Util || {} -Zondy.Network = Zondy.Network || {} - -Zondy.Event = Zondy.Event || {} -Zondy.Socket = Zondy.Socket || {} - -mapboxgl.zondy = mapboxgl.zondy || {} +export { Zondy }; +export { mapboxgl }; diff --git a/src/mapboxgl/index.js b/src/mapboxgl/index.js index a1fa10603..2dc6fe0a1 100644 --- a/src/mapboxgl/index.js +++ b/src/mapboxgl/index.js @@ -36,13 +36,15 @@ export { import { EchartsLayer, MapvLayer, - DeckglLayer + DeckglLayer, + FabricLayer /* StreamLayer */ } from './overlay/index.js'; export { EchartsLayer, MapvLayer, - DeckglLayer + DeckglLayer, + FabricLayer /* StreamLayer */ }; diff --git a/src/mapboxgl/layer/ArcGISLayer.js b/src/mapboxgl/layer/ArcGISLayer.js index 45004f9a1..087adb024 100644 --- a/src/mapboxgl/layer/ArcGISLayer.js +++ b/src/mapboxgl/layer/ArcGISLayer.js @@ -1,9 +1,6 @@ import {Zondy} from './mapboxBase'; //import {Zondy} from '../../service/common/Base'; -import { - newGuid, - extend -} from '../../service/common/Util'; +import { newGuid, extend } from '../util/Util'; /** * @author 基础平台/产品2部 龚跃健 diff --git a/src/mapboxgl/layer/TDTLayer.js b/src/mapboxgl/layer/TDTLayer.js index 4ecd6e8ef..f2dfb54f3 100644 --- a/src/mapboxgl/layer/TDTLayer.js +++ b/src/mapboxgl/layer/TDTLayer.js @@ -1,9 +1,6 @@ import {Zondy} from './mapboxBase'; //import {Zondy} from '../../service/common/Base'; -import { - newGuid, - extend -} from '../../service/common/Util'; +import { newGuid, extend } from '../util/Util'; /** * @author 基础平台/产品2部 龚跃健 @@ -102,8 +99,7 @@ var TDTLayer = function (option) { }; -TDTLayer.prototype.initialize = function (options) { - options = options || {}; +TDTLayer.prototype.initialize = function () { if (this.options.baseURL) { var str = this.options.baseURL.split("gov.cn/")[1]; if (this.options.baseURL.indexOf("?") > 0) { @@ -172,7 +168,7 @@ TDTLayer.prototype.addToMap = function (map) { }; TDTLayer.prototype._initLayerUrl = function () { - this._crs = this.options.crs || map.crs.epsgCode; + this._crs = this.options.crs || this.map.crs.epsgCode; this.options.tilematrixSet = this._crs === "EPSG:4326" ? "c" : "w"; let params = []; if (this.options.layerType.indexOf("igs") > 0) { diff --git a/src/mapboxgl/layer/mapDocLayer.js b/src/mapboxgl/layer/mapDocLayer.js index 9c8d1f0f9..84768815d 100644 --- a/src/mapboxgl/layer/mapDocLayer.js +++ b/src/mapboxgl/layer/mapDocLayer.js @@ -1,9 +1,6 @@ import {Zondy} from './mapboxBase'; //import {Zondy} from '../../service/common/Base'; -import { - newGuid, - extend -} from '../../service/common/Util'; +import { newGuid, extend } from '../util/Util'; /** * @author 基础平台/产品2部 龚跃健 diff --git a/src/mapboxgl/layer/mapTileLayer.js b/src/mapboxgl/layer/mapTileLayer.js index 415b9d2dd..b7f983d52 100644 --- a/src/mapboxgl/layer/mapTileLayer.js +++ b/src/mapboxgl/layer/mapTileLayer.js @@ -3,10 +3,7 @@ //那么在0级的时候就有4张瓦片，不能一一对应 import {Zondy} from './mapboxBase'; //import {Zondy} from '../../service/common/Base'; -import { - newGuid, - extend -} from '../../service/common/Util'; +import { newGuid, extend } from '../util/Util'; /** * @author 基础平台/产品2部 龚跃健 @@ -74,28 +71,31 @@ MapTileLayer.prototype.addToMap = function (map) { this.map = map; this._initLayerUrl(); var zoomOffset = this.options.zoomOffset; + //已将下列逻辑下沉到了@mapgis/mapbox-gl中 //重写mapbox中CanonicalTileID的url类，以支持非标准裁剪的瓦片（这里的非标准不是指任意裁剪瓦片，而是当前瓦片的0级不是mapbox定义的瓦片的0级，中间相差zoomOffset级） - mapboxgl.CanonicalTileID.prototype.url = function (urls, scheme) { - const bbox = this.getTileBBox(); - if (zoomOffset > this.z) { - zoomOffset = 0; - } - const quadkey = getQuadkey(this.z - zoomOffset, this.x, this.y); + // let mapboxgl = window.mapboxgl; + // mapboxgl.CanonicalTileID.prototype.url = function (urls, scheme) { + // const bbox = this.getTileBBox(); + // if (zoomOffset > this.z) { + // zoomOffset = 0; + // } + // const quadkey = getQuadkey(this.z - zoomOffset, this.x, this.y); - return urls[(this.x + this.y) % urls.length] - .replace('{prefix}', (this.x % 16).toString(16) + (this.y % 16).toString(16)) - .replace('{z}', String(this.z - zoomOffset)) - .replace('{x}', String(this.x)) - .replace('{y}', String(scheme === 'tms' ? (Math.pow(2, this.z) - this.y - 1) : this.y)) - .replace('{quadkey}', quadkey) - .replace('{bbox-epsg-3857}', bbox); - }; + // return urls[(this.x + this.y) % urls.length] + // .replace('{prefix}', (this.x % 16).toString(16) + (this.y % 16).toString(16)) + // .replace('{z}', String(this.z - zoomOffset)) + // .replace('{x}', String(this.x)) + // .replace('{y}', String(scheme === 'tms' ? (Math.pow(2, this.z) - this.y - 1) : this.y)) + // .replace('{quadkey}', quadkey) + // .replace('{bbox-epsg-3857}', bbox); + // }; var sourceID = this.sourceID || "source_" + newGuid(); var layerID = this.layerID || "layer_" + newGuid(); var tile_source = { 'type': 'raster',//数据源类型，因为wms返回图片数据，因此为该类型 'tiles': [this._layerUrl], - 'tileSize': this.options.tileSize || 512 //图片显示的大小，最好和上面大小保持一致 + 'tileSize': this.options.tileSize || 512, //图片显示的大小，最好和上面大小保持一致 + mapgisOffset: zoomOffset }; var mLayer = { 'id': layerID,//图层ID @@ -135,15 +135,15 @@ MapTileLayer.prototype._initLayerUrl = function () { this._layerUrl = layerUrl; }; -function getQuadkey(z, x, y) { - let quadkey = '', - mask; - for (let i = z; i > 0; i--) { - mask = 1 << (i - 1); - quadkey += ((x & mask ? 1 : 0) + (y & mask ? 2 : 0)); - } - return quadkey; -} +// function getQuadkey(z, x, y) { +// let quadkey = '', +// mask; +// for (let i = z; i > 0; i--) { +// mask = 1 << (i - 1); +// quadkey += ((x & mask ? 1 : 0) + (y & mask ? 2 : 0)); +// } +// return quadkey; +// } export {MapTileLayer}; Zondy.Map.MapTileLayer = MapTileLayer; diff --git a/src/mapboxgl/layer/mapVectorLayer.js b/src/mapboxgl/layer/mapVectorLayer.js index a75737340..b7a6946b2 100644 --- a/src/mapboxgl/layer/mapVectorLayer.js +++ b/src/mapboxgl/layer/mapVectorLayer.js @@ -1,9 +1,6 @@ import {Zondy} from './mapboxBase'; //import {Zondy} from '../../service/common/Base'; -import { - newGuid, - extend -} from '../../service/common/Util'; +import { newGuid, extend } from '../util/Util'; /** * @author 基础平台/产品2部 龚跃健 diff --git a/src/mapboxgl/layer/mapWmsLayer.js b/src/mapboxgl/layer/mapWmsLayer.js index 7a0f21866..93e765800 100644 --- a/src/mapboxgl/layer/mapWmsLayer.js +++ b/src/mapboxgl/layer/mapWmsLayer.js @@ -1,9 +1,6 @@ import {Zondy} from './mapboxBase'; //import {Zondy} from '../../service/common/Base'; -import { - newGuid, - extend -} from '../../service/common/Util'; +import { newGuid, extend } from '../util/Util'; /** * @author 基础平台/产品2部 龚跃健 diff --git a/src/mapboxgl/layer/mapWmtsLayer.js b/src/mapboxgl/layer/mapWmtsLayer.js index 8dfdb8fe2..7b684b18e 100644 --- a/src/mapboxgl/layer/mapWmtsLayer.js +++ b/src/mapboxgl/layer/mapWmtsLayer.js @@ -1,9 +1,6 @@ import {Zondy} from './mapboxBase'; //import {Zondy} from '../../service/common/Base'; -import { - newGuid, - extend -} from '../../service/common/Util'; +import { newGuid, extend } from '../util/Util'; /** * @author 基础平台/产品2部 龚跃健 diff --git a/src/mapboxgl/layer/mapboxBase.js b/src/mapboxgl/layer/mapboxBase.js index b0fd94ffc..b76500e04 100644 --- a/src/mapboxgl/layer/mapboxBase.js +++ b/src/mapboxgl/layer/mapboxBase.js @@ -1,6 +1,14 @@ -var mapboxgl = window.mapboxgl = window.mapboxgl || {}; +/* var mapboxgl = window.mapboxgl = window.mapboxgl || {}; mapboxgl.Zondy = mapboxgl.Zondy || {}; var Zondy = mapboxgl.Zondy || {}; Zondy.Map = Zondy.Map || {}; export {Zondy}; -export {mapboxgl} +export {mapboxgl} */ + +import mapboxgl from '@mapgis/mapbox-gl'; +window.mapboxgl = mapboxgl; +mapboxgl.Zondy = window.mapboxgl.Zondy || {}; +var Zondy = window.mapboxgl.Zondy || {}; +Zondy.Map = Zondy.Map || {}; +export { Zondy }; +export { mapboxgl }; diff --git a/src/mapboxgl/overlay/index.js b/src/mapboxgl/overlay/index.js index 36f40a198..35bbd31b5 100644 --- a/src/mapboxgl/overlay/index.js +++ b/src/mapboxgl/overlay/index.js @@ -1,3 +1,10 @@ +/* + * @Description: + * @Author: zk + * @Date: 2022-04-25 11:32:23 + * @LastEditors: Do not edit + * @LastEditTime: 2022-04-25 20:11:41 + */ /** * @module 客户端可视化 */ diff --git a/src/mapboxgl/package.json b/src/mapboxgl/package.json index 49a126567..de9083102 100644 --- a/src/mapboxgl/package.json +++ b/src/mapboxgl/package.json @@ -1,23 +1,39 @@ { - "name": "@mapgis/webclient-es6-mapboxgl", - "version": "10.5.4", - "description": "", - "module": "index.js", - "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" - }, - "keywords": [ - "zondy", - "service", - "&", - "mapboxgl" - ], - "author": "zondy", - "license": "ISC", - "dependencies": { - "@mapgis/webclient-es6-service": "^10.5.4", - "@mapgis/mapbox-gl": "^1.9.4", - "echarts": "^4.8.0", - "mapv": "^2.0.56" - } + "name": "@mapgis/webclient-es6-mapboxgl", + "version": "15.6.1", + "description": "", + "main1": "dist-libs/webclient-mapboxgl-plugin.min.js", + "module": "index.js", + "scripts": { + "build": "npm run build-debug && npm run build-release", + "build-debug": "webpack --config webpack/mapbox-es6-debug-config.js", + "build-release": "webpack --config webpack/mapbox-es6-release-config.js" + }, + "keywords": [ + "zondy", + "service", + "&", + "mapboxgl" + ], + "author": "Wuhan Zondy Cyber Science&Technology Co.Ltd.", + "license": "Apache-2.0", + "dependencies": { + "@mapgis/mapbox-gl": "^1.9.9", + "@mapgis/webclient-es6-service": "^10.5.7", + "core-js": "^3.21.1", + "echarts": "^4.8.0", + "mapv": "^2.0.56" + }, + "devDependencies": { + "@babel/core": "^7.16.0", + "@babel/preset-env": "^7.16.4", + "babel-loader": "^8.2.3", + "babel-plugin-add-module-exports": "^1.0.4", + "css-loader": "^6.5.1", + "html-webpack-plugin": "^5.5.0", + "sass-loader": "^12.4.0", + "style-loader": "^3.3.1", + "ts-loader": "^9.2.6", + "webpack": "^5.65.0" + } } diff --git a/src/mapboxgl/theme/GeoFeatureThemeLayer.js b/src/mapboxgl/theme/GeoFeatureThemeLayer.js index 2b09ee5af..fa42ba566 100644 --- a/src/mapboxgl/theme/GeoFeatureThemeLayer.js +++ b/src/mapboxgl/theme/GeoFeatureThemeLayer.js @@ -1,12 +1,11 @@ import mapboxgl from '@mapgis/mapbox-gl'; -import { Zondy } from '../../service/common/Base'; +import { Common } from '@mapgis/webclient-es6-service'; + import { ThemeLayer } from './ThemeLayer'; -import { extend } from '../../service/common/Util'; -import { copyAttributesWithClip } from '../../service/common/Util'; +import { ShapeFactory } from './common/overlay/feature/ShapeFactory'; +import { ThemeVector } from './common/overlay/ThemeVector'; -import { ShapeFactory } from '../../common/overlay/feature/ShapeFactory'; -import { ThemeVector } from '../../common/overlay/ThemeVector'; -import { FeatureSet } from '../../service/common/FeatureSet'; +const { extend, copyAttributesWithClip, FeatureSet, Zondy } = Common; /** * @class Zondy.Map.GeoFeatureThemeLayer diff --git a/src/mapboxgl/theme/GraphThemeLayer.js b/src/mapboxgl/theme/GraphThemeLayer.js index 7b20b6576..c8b209a55 100644 --- a/src/mapboxgl/theme/GraphThemeLayer.js +++ b/src/mapboxgl/theme/GraphThemeLayer.js @@ -1,9 +1,10 @@ -import mapboxgl from "@mapgis/mapbox-gl"; -import { Zondy } from "../../service/common/Base"; -import { ThemeLayer } from "./ThemeLayer"; -import { Theme as FeatureTheme } from "../../common/overlay/feature/Theme"; -import { Point2D } from "../../service/common/Point2D"; -import { FeatureSet } from "../../service/common/FeatureSet"; +import mapboxgl from '@mapgis/mapbox-gl'; +import { Common } from '@mapgis/webclient-es6-service'; + +import { ThemeLayer } from './ThemeLayer'; +import { Theme as FeatureTheme } from './common/overlay/feature/Theme'; + +const { FeatureSet, Zondy, Point2D } = Common; /** * @class Zondy.Map.graphThemeLayer @@ -32,498 +33,450 @@ import { FeatureSet } from "../../service/common/FeatureSet"; * @fires Zondy.Map.graphThemeLayer#beforefeaturesadded */ class GraphThemeLayer extends ThemeLayer { - constructor(name, chartsType, options) { - super(name, options); - this.chartsSetting = options.chartsSetting || {}; - this.themeFields = options.themeFields || null; - this.overlayWeightField = options.overlayWeightField || null; - this.isOverLay = options.isOverLay || true; - this.charts = options.charts || []; - this.cache = options.cache || {}; - this.chartsType = chartsType; - this.options = { - calGravity: options.calGravity || true - }; - } + constructor(name, chartsType, options) { + super(name, options); + this.chartsSetting = options.chartsSetting || {}; + this.themeFields = options.themeFields || null; + this.overlayWeightField = options.overlayWeightField || null; + this.isOverLay = options.isOverLay || true; + this.charts = options.charts || []; + this.cache = options.cache || {}; + this.chartsType = chartsType; + this.options = { + calGravity: options.calGravity || true + }; + } - /** - * @function Zondy.Map.graphThemeLayer.prototype.setChartsType - * @description 设置图表类型，此函数可动态改变图表类型。在调用此函数前请通过 chartsSetting 为新类型的图表做相关配置。 - * @param {string} [chartsType] - 图表类型。目前可用："Bar", "Line", "Pie"。 - */ - setChartsType(chartsType) { - this.chartsType = chartsType; - this.redraw(); - } + /** + * @function Zondy.Map.graphThemeLayer.prototype.setChartsType + * @description 设置图表类型，此函数可动态改变图表类型。在调用此函数前请通过 chartsSetting 为新类型的图表做相关配置。 + * @param {string} [chartsType] - 图表类型。目前可用："Bar", "Line", "Pie"。 + */ + setChartsType(chartsType) { + this.chartsType = chartsType; + this.redraw(); + } - /** - * @function Zondy.Map.graphThemeLayer.prototype.addFeatures - * @description 向专题图图层中添加数据，支持的 feature 类型为：iServer 返回的 feature JSON 对象。 - * @param {Object} features - 待添加的要素。 - */ - addFeatures(features) { - var me = this; - mapboxgl.Evented.prototype.fire("beforefeaturesadded", { - features: features - }); + /** + * @function Zondy.Map.graphThemeLayer.prototype.addFeatures + * @description 向专题图图层中添加数据，支持的 feature 类型为：iServer 返回的 feature JSON 对象。 + * @param {Object} features - 待添加的要素。 + */ + addFeatures(features) { + var me = this; + mapboxgl.Evented.prototype.fire('beforefeaturesadded', { + features: features + }); - if (features && (true || features instanceof FeatureSet)) { - var attrs = null; - var LabelDots = features.LabelDots; - var attstruct = features.AttStruct; - var feaArr = features.SFEleArray; - if (feaArr != null && feaArr.length > 0) { - for (var j = 0; j < feaArr.length; j++) { - var feature = feaArr[j]; - if (feature.AttValue != null && feature.AttValue.length > 0) { - var attrs = {}; - for (var i = 0; i < feature.AttValue.length; i++) { - attrs[attstruct.FldName[i]] = feature.AttValue[i]; + if (features && (true || features instanceof FeatureSet)) { + var attrs = null; + var LabelDots = features.LabelDots; + var attstruct = features.AttStruct; + var feaArr = features.SFEleArray; + if (feaArr != null && feaArr.length > 0) { + for (var j = 0; j < feaArr.length; j++) { + var feature = feaArr[j]; + if (feature.AttValue != null && feature.AttValue.length > 0) { + var attrs = {}; + for (var i = 0; i < feature.AttValue.length; i++) { + attrs[attstruct.FldName[i]] = feature.AttValue[i]; + } + attrs['FID'] = feature.FID; + } + feature.attributes = attrs; + LabelDots && LabelDots[j] && (feature.LabelDot = LabelDots[j]); + me.features.push(feature); + } } - attrs["FID"] = feature.FID; - } - feature.attributes = attrs; - LabelDots && LabelDots[j] && (feature.LabelDot = LabelDots[j]); - me.features.push(feature); } - } - } - //绘制专题要素 - if (this.renderer) { - this.redrawThematicFeatures(this.map.getBounds()); + //绘制专题要素 + if (this.renderer) { + this.redrawThematicFeatures(this.map.getBounds()); + } } - } - /** - * @function Zondy.Map.graphThemeLayer.prototype.redrawThematicFeatures - * @description 重绘所有专题要素。 - * 此方法包含绘制专题要素的所有步骤，包含用户数据到专题要素的转换，抽稀，缓存等步骤。 - * 地图漫游时调用此方法进行图层刷新。 - * @param {mapboxgl.LngLatBounds} extent - 重绘的范围。 - */ - redrawThematicFeatures(extent) { - // eslint-disable-line no-unused-vars - this.clearCache(); - //清除当前所有可视元素 - this.renderer.clearAll(); - var features = this.features; - // var bounds = null; - // if (extent && extent instanceof window.mapboxgl.LngLatBounds) { - // var lb = extent.getSouthWest(); - // var rt = extent.getNorthEast(); - // var lbM = this.lonLat2WebMercator(lb.lng,lb.lat); - // var rtM = this.lonLat2WebMercator(rt.lng,rt.lat); - // bounds = new Rectangle(lbM.x,lbM.y,rtM.x,rtM.y); - // } + /** + * @function Zondy.Map.graphThemeLayer.prototype.redrawThematicFeatures + * @description 重绘所有专题要素。 + * 此方法包含绘制专题要素的所有步骤，包含用户数据到专题要素的转换，抽稀，缓存等步骤。 + * 地图漫游时调用此方法进行图层刷新。 + * @param {mapboxgl.LngLatBounds} extent - 重绘的范围。 + */ + redrawThematicFeatures(extent) { + // eslint-disable-line no-unused-vars + this.clearCache(); + //清除当前所有可视元素 + this.renderer.clearAll(); + var features = this.features; + // var bounds = null; + // if (extent && extent instanceof window.mapboxgl.LngLatBounds) { + // var lb = extent.getSouthWest(); + // var rt = extent.getNorthEast(); + // var lbM = this.lonLat2WebMercator(lb.lng,lb.lat); + // var rtM = this.lonLat2WebMercator(rt.lng,rt.lat); + // bounds = new Rectangle(lbM.x,lbM.y,rtM.x,rtM.y); + // } - for (var i = 0, len = features.length; i < len; i++) { - var feature = features[i]; - // // 要素范围判断 - // var feaBounds = feature.bound; - // //剔除当前视图（地理）范围以外的数据 - // if (bounds && !bounds.intersectsBounds(feaBounds)) { - // continue; - // } - var cache = this.cache; - // 用feature id 做缓存标识 - var cacheField = feature.FID; - // 数据对应的图表是否已缓存，没缓存则重新创建图表 - if (cache[cacheField]) { - continue; - } - cache[cacheField] = cacheField; - var chart = this.createThematicFeature(feature); - // 压盖处理权重值 - if (chart && this.overlayWeightField) { - if ( - feature.attributes[this.overlayWeightField] && - !isNaN(feature.attributes[this.overlayWeightField]) - ) { - chart["__overlayWeight"] = - feature.attributes[this.overlayWeightField]; + for (var i = 0, len = features.length; i < len; i++) { + var feature = features[i]; + // // 要素范围判断 + // var feaBounds = feature.bound; + // //剔除当前视图（地理）范围以外的数据 + // if (bounds && !bounds.intersectsBounds(feaBounds)) { + // continue; + // } + var cache = this.cache; + // 用feature id 做缓存标识 + var cacheField = feature.FID; + // 数据对应的图表是否已缓存，没缓存则重新创建图表 + if (cache[cacheField]) { + continue; + } + cache[cacheField] = cacheField; + var chart = this.createThematicFeature(feature); + // 压盖处理权重值 + if (chart && this.overlayWeightField) { + if (feature.attributes[this.overlayWeightField] && !isNaN(feature.attributes[this.overlayWeightField])) { + chart['__overlayWeight'] = feature.attributes[this.overlayWeightField]; + } + } + if (chart) { + this.charts.push(chart); + } } - } - if (chart) { - this.charts.push(chart); - } + this.drawCharts(); } - this.drawCharts(); - } - /** - * @function Zondy.Map.graphThemeLayer.prototype.createThematicFeature - * @description 向专题图图层中添加数据, 支持的 feature 类型为:iServer 返回的 feature json 对象。 - * @param {Object} feature - 待添加的要素。 - * - */ - createThematicFeature(feature) { - var thematicFeature; - // 检查图表创建条件并创建图形 - if ( - FeatureTheme[this.chartsType] && - this.themeFields && - this.chartsSetting - ) { - thematicFeature = new FeatureTheme[this.chartsType]( - feature, - this, - this.themeFields, - this.chartsSetting, - null, - this.options - ); - } - // thematicFeature 是否创建成功 - if (!thematicFeature) { - return false; + /** + * @function Zondy.Map.graphThemeLayer.prototype.createThematicFeature + * @description 向专题图图层中添加数据, 支持的 feature 类型为:iServer 返回的 feature json 对象。 + * @param {Object} feature - 待添加的要素。 + * + */ + createThematicFeature(feature) { + var thematicFeature; + // 检查图表创建条件并创建图形 + if (FeatureTheme[this.chartsType] && this.themeFields && this.chartsSetting) { + thematicFeature = new FeatureTheme[this.chartsType](feature, this, this.themeFields, this.chartsSetting, null, this.options); + } + // thematicFeature 是否创建成功 + if (!thematicFeature) { + return false; + } + // 对专题要素执行图形装载 + thematicFeature.assembleShapes(); + return thematicFeature; } - // 对专题要素执行图形装载 - thematicFeature.assembleShapes(); - return thematicFeature; - } - /** - * @function Zondy.Map.graphThemeLayer.prototype.drawCharts - * @description 绘制图表。包含压盖处理。 - * - */ - drawCharts() { - // 判断 rendere r就绪 - if (!this.renderer) { - return; - } - var charts = this.charts; - // 图表权重值处理des - if (this.overlayWeightField) { - charts.sort(function(cs, ce) { - if ( - typeof cs["__overlayWeight"] == "undefined" && - typeof ce["__overlayWeight"] == "undefined" - ) { - return 0; - } else if ( - typeof cs["__overlayWeight"] != "undefined" && - typeof ce["__overlayWeight"] == "undefined" - ) { - return -1; - } else if ( - typeof cs["__overlayWeight"] == "undefined" && - typeof ce["__overlayWeight"] != "undefined" - ) { - return 1; - } else if ( - typeof cs["__overlayWeight"] != "undefined" && - typeof ce["__overlayWeight"] != "undefined" - ) { - if ( - parseFloat(cs["__overlayWeight"]) < - parseFloat(ce["__overlayWeight"]) - ) { - return 1; - } else { - return -1; - } + /** + * @function Zondy.Map.graphThemeLayer.prototype.drawCharts + * @description 绘制图表。包含压盖处理。 + * + */ + drawCharts() { + // 判断 rendere r就绪 + if (!this.renderer) { + return; } - return 0; - }); - } - // 不进行避让 - if (!this.isOverLay) { - for (var m = 0, len_m = charts.length; m < len_m; m++) { - var chart_m = charts[m]; - // 图形参考位置 (reSetLocation 会更新 chartBounds) - var shapeROP_m = chart_m.resetLocation(); - // 添加图形 - var shapes_m = chart_m.shapes; - for (var n = 0, slen_n = shapes_m.length; n < slen_n; n++) { - shapes_m[n].refOriginalPosition = shapeROP_m; - this.renderer.addShape(shapes_m[n]); + var charts = this.charts; + // 图表权重值处理des + if (this.overlayWeightField) { + charts.sort(function (cs, ce) { + if (typeof cs['__overlayWeight'] == 'undefined' && typeof ce['__overlayWeight'] == 'undefined') { + return 0; + } else if (typeof cs['__overlayWeight'] != 'undefined' && typeof ce['__overlayWeight'] == 'undefined') { + return -1; + } else if (typeof cs['__overlayWeight'] == 'undefined' && typeof ce['__overlayWeight'] != 'undefined') { + return 1; + } else if (typeof cs['__overlayWeight'] != 'undefined' && typeof ce['__overlayWeight'] != 'undefined') { + if (parseFloat(cs['__overlayWeight']) < parseFloat(ce['__overlayWeight'])) { + return 1; + } else { + return -1; + } + } + return 0; + }); } - } - } else { - // 压盖判断所需 chartsBounds 集合 - var chartsBounds = []; - // 压盖处理 & 添加图形 - for (let i = 0, len = charts.length; i < len; i++) { - var chart = charts[i]; - // 图形参考位置 (reSetLocation 会更新 chartBounds) - var shapeROP = chart.resetLocation(); - // 图表框 - var cbs = chart.chartBounds; - var cBounds = [ - { - x: cbs.xmin, - y: cbs.ymin - }, - { - x: cbs.xmin, - y: cbs.ymax - }, - { - x: cbs.xmax, - y: cbs.ymax - }, - { - x: cbs.xmax, - y: cbs.ymin - }, - { - x: cbs.xmin, - y: cbs.ymax - } - ]; - // // 地图范围外不绘制 - // if (mBounds) { - // // if (!this.isChartInMap(mBounds, cBounds)) continue; - // } - // 是否压盖 - var isOL = false; - if (i !== 0) { - for (let j = 0; j < chartsBounds.length; j++) { - //压盖判断 - if (this.isQuadrilateralOverLap(cBounds, chartsBounds[j])) { - isOL = true; - break; + // 不进行避让 + if (!this.isOverLay) { + for (var m = 0, len_m = charts.length; m < len_m; m++) { + var chart_m = charts[m]; + // 图形参考位置 (reSetLocation 会更新 chartBounds) + var shapeROP_m = chart_m.resetLocation(); + // 添加图形 + var shapes_m = chart_m.shapes; + for (var n = 0, slen_n = shapes_m.length; n < slen_n; n++) { + shapes_m[n].refOriginalPosition = shapeROP_m; + this.renderer.addShape(shapes_m[n]); + } } - } - } - if (isOL) { - continue; } else { - chartsBounds.push(cBounds); - } - // 添加图形 - var shapes = chart.shapes; - for (let j = 0, slen = shapes.length; j < slen; j++) { - shapes[j].refOriginalPosition = shapeROP; - this.renderer.addShape(shapes[j]); + // 压盖判断所需 chartsBounds 集合 + var chartsBounds = []; + // 压盖处理 & 添加图形 + for (let i = 0, len = charts.length; i < len; i++) { + var chart = charts[i]; + // 图形参考位置 (reSetLocation 会更新 chartBounds) + var shapeROP = chart.resetLocation(); + // 图表框 + var cbs = chart.chartBounds; + var cBounds = [ + { + x: cbs.xmin, + y: cbs.ymin + }, + { + x: cbs.xmin, + y: cbs.ymax + }, + { + x: cbs.xmax, + y: cbs.ymax + }, + { + x: cbs.xmax, + y: cbs.ymin + }, + { + x: cbs.xmin, + y: cbs.ymax + } + ]; + // // 地图范围外不绘制 + // if (mBounds) { + // // if (!this.isChartInMap(mBounds, cBounds)) continue; + // } + // 是否压盖 + var isOL = false; + if (i !== 0) { + for (let j = 0; j < chartsBounds.length; j++) { + //压盖判断 + if (this.isQuadrilateralOverLap(cBounds, chartsBounds[j])) { + isOL = true; + break; + } + } + } + if (isOL) { + continue; + } else { + chartsBounds.push(cBounds); + } + // 添加图形 + var shapes = chart.shapes; + for (let j = 0, slen = shapes.length; j < slen; j++) { + shapes[j].refOriginalPosition = shapeROP; + this.renderer.addShape(shapes[j]); + } + } } - } + // 绘制图形 + this.renderer.render(); } - // 绘制图形 - this.renderer.render(); - } - /** - * @function Zondy.Map.graphThemeLayer.prototype.getShapesByFeatureID - * @description 通过 FeatureID 获取 feature 关联的所有图形。如果不传入此参数，函数将返回所有图形。 - * @param {number} featureID - 要素 ID。 - */ - getShapesByFeatureID(featureID) { - var list = []; - var shapeList = this.renderer.getAllShapes(); - if (!featureID) { - return shapeList; - } - for (var i = 0, len = shapeList.length; i < len; i++) { - var si = shapeList[i]; - if (si.refDataID && featureID === si.refDataID) { - list.push(si); - } + /** + * @function Zondy.Map.graphThemeLayer.prototype.getShapesByFeatureID + * @description 通过 FeatureID 获取 feature 关联的所有图形。如果不传入此参数，函数将返回所有图形。 + * @param {number} featureID - 要素 ID。 + */ + getShapesByFeatureID(featureID) { + var list = []; + var shapeList = this.renderer.getAllShapes(); + if (!featureID) { + return shapeList; + } + for (var i = 0, len = shapeList.length; i < len; i++) { + var si = shapeList[i]; + if (si.refDataID && featureID === si.refDataID) { + list.push(si); + } + } + return list; } - return list; - } - /** - * @function Zondy.Map.graphThemeLayer.prototype.isQuadrilateralOverLap - * @description 判断两个四边形是否有压盖。 - * @param {Array.} quadrilateral - 四边形节点数组。 - * @param {Array.} quadrilateral2 - 第二个四边形节点数组。 - */ - isQuadrilateralOverLap(quadrilateral, quadrilateral2) { - var quadLen = quadrilateral.length, - quad2Len = quadrilateral2.length; - if (quadLen !== 5 || quad2Len !== 5) { - return null; - } //不是四边形 + /** + * @function Zondy.Map.graphThemeLayer.prototype.isQuadrilateralOverLap + * @description 判断两个四边形是否有压盖。 + * @param {Array.} quadrilateral - 四边形节点数组。 + * @param {Array.} quadrilateral2 - 第二个四边形节点数组。 + */ + isQuadrilateralOverLap(quadrilateral, quadrilateral2) { + var quadLen = quadrilateral.length, + quad2Len = quadrilateral2.length; + if (quadLen !== 5 || quad2Len !== 5) { + return null; + } //不是四边形 - var OverLap = false; - //如果两四边形互不包含对方的节点，则两个四边形不相交 - for (let i = 0; i < quadLen; i++) { - if (this.isPointInPoly(quadrilateral[i], quadrilateral2)) { - OverLap = true; - break; - } - } - for (let i = 0; i < quad2Len; i++) { - if (this.isPointInPoly(quadrilateral2[i], quadrilateral)) { - OverLap = true; - break; - } - } - //加上两矩形十字相交的情况 - for (let i = 0; i < quadLen - 1; i++) { - if (OverLap) { - break; - } - for (let j = 0; j < quad2Len - 1; j++) { - var isLineIn = this.lineIntersection( - quadrilateral[i], - quadrilateral[i + 1], - quadrilateral2[j], - quadrilateral2[j + 1] - ); - if (isLineIn.CLASS_NAME === "Zondy.Object.Point2D") { - OverLap = true; - break; + var OverLap = false; + //如果两四边形互不包含对方的节点，则两个四边形不相交 + for (let i = 0; i < quadLen; i++) { + if (this.isPointInPoly(quadrilateral[i], quadrilateral2)) { + OverLap = true; + break; + } + } + for (let i = 0; i < quad2Len; i++) { + if (this.isPointInPoly(quadrilateral2[i], quadrilateral)) { + OverLap = true; + break; + } + } + //加上两矩形十字相交的情况 + for (let i = 0; i < quadLen - 1; i++) { + if (OverLap) { + break; + } + for (let j = 0; j < quad2Len - 1; j++) { + var isLineIn = this.lineIntersection(quadrilateral[i], quadrilateral[i + 1], quadrilateral2[j], quadrilateral2[j + 1]); + if (isLineIn.CLASS_NAME === 'Zondy.Object.Point2D') { + OverLap = true; + break; + } + } } - } + return OverLap; } - return OverLap; - } - /** - * @description 判断两条线段是不是有交点。 - * @param a1 - {Zondy.Geometry.Point} 第一条线段的起始节点。 - * @param a2 - {Zondy.Geometry.Point} 第一条线段的结束节点。 - * @param b1 - {Zondy.Geometry.Point} 第二条线段的起始节点。 - * @param b2 - {Zondy.Geometry.Point} 第二条线段的结束节点。 - * @return {Object} 如果相交返回交点，如果不相交返回两条线段的位置关系。 - */ - lineIntersection(a1, a2, b1, b2) { - var intersectValue = null; - var k1; - var k2; - var b = (b2.x - b1.x) * (a1.y - b1.y) - (b2.y - b1.y) * (a1.x - b1.x); - var a = (a2.x - a1.x) * (a1.y - b1.y) - (a2.y - a1.y) * (a1.x - b1.x); - var ab = (b2.y - b1.y) * (a2.x - a1.x) - (b2.x - b1.x) * (a2.y - a1.y); - //ab==0代表两条线断的斜率一样 - if (ab !== 0) { - k1 = b / ab; - k2 = a / ab; + /** + * @description 判断两条线段是不是有交点。 + * @param a1 - {Zondy.Geometry.Point} 第一条线段的起始节点。 + * @param a2 - {Zondy.Geometry.Point} 第一条线段的结束节点。 + * @param b1 - {Zondy.Geometry.Point} 第二条线段的起始节点。 + * @param b2 - {Zondy.Geometry.Point} 第二条线段的结束节点。 + * @return {Object} 如果相交返回交点，如果不相交返回两条线段的位置关系。 + */ + lineIntersection(a1, a2, b1, b2) { + var intersectValue = null; + var k1; + var k2; + var b = (b2.x - b1.x) * (a1.y - b1.y) - (b2.y - b1.y) * (a1.x - b1.x); + var a = (a2.x - a1.x) * (a1.y - b1.y) - (a2.y - a1.y) * (a1.x - b1.x); + var ab = (b2.y - b1.y) * (a2.x - a1.x) - (b2.x - b1.x) * (a2.y - a1.y); + //ab==0代表两条线断的斜率一样 + if (ab !== 0) { + k1 = b / ab; + k2 = a / ab; - if (k1 >= 0 && k2 <= 1 && k1 <= 1 && k2 >= 0) { - intersectValue = new Point2D( - a1.x + k1 * (a2.x - a1.x), - a1.y + k1 * (a2.y - a1.y) - ); - } else { - intersectValue = "No Intersection"; - } - } else { - if (b === 0 && a === 0) { - var maxy = Math.max(a1.y, a2.y); - var miny = Math.min(a1.y, a2.y); - var maxx = Math.max(a1.x, a2.x); - var minx = Math.min(a1.x, a2.x); - if ( - (((b1.y >= miny && b1.y <= maxy) || (b2.y >= miny && b2.y <= maxy)) && - b1.x >= minx && b1.x <= maxx) || - (b2.x >= minx && b2.x <= maxx) - ) { - intersectValue = "Coincident"; //重合 + if (k1 >= 0 && k2 <= 1 && k1 <= 1 && k2 >= 0) { + intersectValue = new Point2D(a1.x + k1 * (a2.x - a1.x), a1.y + k1 * (a2.y - a1.y)); + } else { + intersectValue = 'No Intersection'; + } } else { - intersectValue = "Parallel"; //平行 + if (b === 0 && a === 0) { + var maxy = Math.max(a1.y, a2.y); + var miny = Math.min(a1.y, a2.y); + var maxx = Math.max(a1.x, a2.x); + var minx = Math.min(a1.x, a2.x); + if ( + (((b1.y >= miny && b1.y <= maxy) || (b2.y >= miny && b2.y <= maxy)) && b1.x >= minx && b1.x <= maxx) || + (b2.x >= minx && b2.x <= maxx) + ) { + intersectValue = 'Coincident'; //重合 + } else { + intersectValue = 'Parallel'; //平行 + } + } else { + intersectValue = 'Parallel'; //平行 + } } - } else { - intersectValue = "Parallel"; //平行 - } + return intersectValue; } - return intersectValue; - } - /** - * @function Zondy.Map.graphThemeLayer.prototype.isPointInPoly - * @description 判断一个点是否在多边形里面。(射线法) - * @param {Object} pt - 需要判定的点对象，该对象含有属性 x (横坐标)，属性 y (纵坐标)。 - * @param {Array.} poly - 多边形节点数组。 - */ - isPointInPoly(pt, poly) { - for (var isIn = false, i = -1, l = poly.length, j = l - 1; ++i < l; j = i) { - ((poly[i].y <= pt.y && pt.y < poly[j].y) || - (poly[j].y <= pt.y && pt.y < poly[i].y)) && - pt.x < - ((poly[j].x - poly[i].x) * (pt.y - poly[i].y)) / - (poly[j].y - poly[i].y) + - poly[i].x && - (isIn = !isIn); + /** + * @function Zondy.Map.graphThemeLayer.prototype.isPointInPoly + * @description 判断一个点是否在多边形里面。(射线法) + * @param {Object} pt - 需要判定的点对象，该对象含有属性 x (横坐标)，属性 y (纵坐标)。 + * @param {Array.} poly - 多边形节点数组。 + */ + isPointInPoly(pt, poly) { + for (var isIn = false, i = -1, l = poly.length, j = l - 1; ++i < l; j = i) { + ((poly[i].y <= pt.y && pt.y < poly[j].y) || (poly[j].y <= pt.y && pt.y < poly[i].y)) && + pt.x < ((poly[j].x - poly[i].x) * (pt.y - poly[i].y)) / (poly[j].y - poly[i].y) + poly[i].x && + (isIn = !isIn); + } + return isIn; } - return isIn; - } - /** - * @function Zondy.Map.graphThemeLayer.prototype.isChartInMap - * @description 判断图表是否在地图里。 - * @param {Zondy.Bounds} mapPxBounds - 地图像素范围。 - * @param {Array.} chartPxBounds - 图表范围的四边形节点数组。 - */ - isChartInMap(mapPxBounds, chartPxBounds) { - var mb = mapPxBounds; - var isIn = false; - for (var i = 0, len = chartPxBounds.length; i < len; i++) { - var cb = chartPxBounds[i]; + /** + * @function Zondy.Map.graphThemeLayer.prototype.isChartInMap + * @description 判断图表是否在地图里。 + * @param {Zondy.Bounds} mapPxBounds - 地图像素范围。 + * @param {Array.} chartPxBounds - 图表范围的四边形节点数组。 + */ + isChartInMap(mapPxBounds, chartPxBounds) { + var mb = mapPxBounds; + var isIn = false; + for (var i = 0, len = chartPxBounds.length; i < len; i++) { + var cb = chartPxBounds[i]; - if ( - cb.x >= mb.xmin && - cb.x <= mb.xmax && - cb.y >= mb.ymin && - cb.y <= mb.ymax - ) { - isIn = true; - break; - } + if (cb.x >= mb.xmin && cb.x <= mb.xmax && cb.y >= mb.ymin && cb.y <= mb.ymax) { + isIn = true; + break; + } + } + return isIn; } - return isIn; - } - /** - * @function Zondy.Map.graphThemeLayer.prototype.clearCache - * @description 清除缓存 - */ - clearCache() { - this.cache = {}; - this.charts = []; - } + /** + * @function Zondy.Map.graphThemeLayer.prototype.clearCache + * @description 清除缓存 + */ + clearCache() { + this.cache = {}; + this.charts = []; + } - /** - * @function Zondy.Map.graphThemeLayer.prototype.removeFeatures - * @description 从专题图中删除 feature。这个函数删除所有传递进来的矢量要素。参数中的 features 数组中的每一项，必须是已经添加到当前图层中的 feature。 - * @param {Zondy.Feature.Vector} features - 要删除的要素。 - */ - removeFeatures(features) { - this.clearCache(); - super.removeFeatures(features); - } + /** + * @function Zondy.Map.graphThemeLayer.prototype.removeFeatures + * @description 从专题图中删除 feature。这个函数删除所有传递进来的矢量要素。参数中的 features 数组中的每一项，必须是已经添加到当前图层中的 feature。 + * @param {Zondy.Feature.Vector} features - 要删除的要素。 + */ + removeFeatures(features) { + this.clearCache(); + super.removeFeatures(features); + } - /** - * @function Zondy.Map.graphThemeLayer.prototype.removeAllFeatures - * @description 移除所有的要素。 - */ - removeAllFeatures() { - this.clearCache(); - super.removeAllFeatures(); - } + /** + * @function Zondy.Map.graphThemeLayer.prototype.removeAllFeatures + * @description 移除所有的要素。 + */ + removeAllFeatures() { + this.clearCache(); + super.removeAllFeatures(); + } - /** - * @function Zondy.Map.graphThemeLayer.prototype.redraw - * @description 重绘该图层。 - */ - redraw() { - this.clearCache(); - if (this.renderer) { - this.redrawThematicFeatures(this.map.getBounds()); - return true; + /** + * @function Zondy.Map.graphThemeLayer.prototype.redraw + * @description 重绘该图层。 + */ + redraw() { + this.clearCache(); + if (this.renderer) { + this.redrawThematicFeatures(this.map.getBounds()); + return true; + } + return false; } - return false; - } - /** - * @function Zondy.Map.graphThemeLayer.prototype.clear - * @description 清除的内容包括数据（features） 、专题要素、缓存。 - */ - clear() { - if (this.renderer) { - this.renderer.clearAll(); - this.renderer.refresh(); + /** + * @function Zondy.Map.graphThemeLayer.prototype.clear + * @description 清除的内容包括数据（features） 、专题要素、缓存。 + */ + clear() { + if (this.renderer) { + this.renderer.clearAll(); + this.renderer.refresh(); + } + this.removeAllFeatures(); + this.clearCache(); } - this.removeAllFeatures(); - this.clearCache(); - } } -export var graphThemeLayer = function(name, chartsType, options) { - return new GraphThemeLayer(name, chartsType, options); +export var graphThemeLayer = function (name, chartsType, options) { + return new GraphThemeLayer(name, chartsType, options); }; export { GraphThemeLayer }; Zondy.Map.graphThemeLayer = graphThemeLayer; diff --git a/src/mapboxgl/theme/RandomThemeLayer.js b/src/mapboxgl/theme/RandomThemeLayer.js index 2510c3449..8798f3d6f 100644 --- a/src/mapboxgl/theme/RandomThemeLayer.js +++ b/src/mapboxgl/theme/RandomThemeLayer.js @@ -1,9 +1,11 @@ import mapboxgl from '@mapgis/mapbox-gl'; -import { Zondy } from '../../service/common/Base'; -import { copyAttributesWithClip } from '../../service/common/Util'; +import { Common } from '@mapgis/webclient-es6-service'; + import { GeoFeatureThemeLayer } from './GeoFeatureThemeLayer'; -import { ThemeVector } from '../../common/overlay/ThemeVector'; -import { ShapeFactory } from '../../common/overlay/feature/ShapeFactory'; +import { ThemeVector } from './common/overlay/ThemeVector'; +import { ShapeFactory } from './common/overlay/feature/ShapeFactory'; + +const { copyAttributesWithClip, Zondy } = Common; /** * @class Zondy.Map.randomThemeLayer diff --git a/src/mapboxgl/theme/RangeTheme3DLayer.js b/src/mapboxgl/theme/RangeTheme3DLayer.js index dac2e1a95..a43354233 100644 --- a/src/mapboxgl/theme/RangeTheme3DLayer.js +++ b/src/mapboxgl/theme/RangeTheme3DLayer.js @@ -1,6 +1,7 @@ -import { Zondy } from '../../service/common/Base'; +import { Common } from '@mapgis/webclient-es6-service'; import { Theme3DLayer } from './Theme3DLayer'; -import { extend } from '../../service/common/Util'; + +const { extend, Zondy } = Common; /** * @class RangeTheme3DLayer diff --git a/src/mapboxgl/theme/RangeThemeLayer.js b/src/mapboxgl/theme/RangeThemeLayer.js index 4e7493590..6fe68367a 100644 --- a/src/mapboxgl/theme/RangeThemeLayer.js +++ b/src/mapboxgl/theme/RangeThemeLayer.js @@ -1,9 +1,11 @@ -import mapboxgl from "@mapgis/mapbox-gl"; -import { Zondy } from "../../service/common/Base"; -import { copyAttributesWithClip } from "../../service/common/Util"; -import { GeoFeatureThemeLayer } from "./GeoFeatureThemeLayer"; -import { ThemeVector } from "../../common/overlay/ThemeVector"; -import { ShapeFactory } from "../../common/overlay/feature/ShapeFactory"; +import mapboxgl from '@mapgis/mapbox-gl'; +import { Common } from '@mapgis/webclient-es6-service'; + +import { GeoFeatureThemeLayer } from './GeoFeatureThemeLayer'; +import { ThemeVector } from './common/overlay/ThemeVector'; +import { ShapeFactory } from './common/overlay/feature/ShapeFactory'; + +const { copyAttributesWithClip, Zondy } = Common; /** * @class Zondy.Map.rangeThemeLayer @@ -22,96 +24,86 @@ import { ShapeFactory } from "../../common/overlay/feature/ShapeFactory"; * @extends {Zondy.Map.GeoFeatureThemeLayer} */ class RangeThemeLayer extends GeoFeatureThemeLayer { - constructor(name, options) { - super(name, options); - this.style = options.style; - this.isHoverAble = options.isHoverAble; - this.highlightStyle = options.highlightStyle; - this.themeField = options.themeField; - this.styleGroups = options.styleGroups; - } + constructor(name, options) { + super(name, options); + this.style = options.style; + this.isHoverAble = options.isHoverAble; + this.highlightStyle = options.highlightStyle; + this.themeField = options.themeField; + this.styleGroups = options.styleGroups; + } - /** - * @function Zondy.Map.rangeThemeLayer.prototype.createThematicFeature - * @description 创建专题图要素。 - * @param {Object} feature - 要创建的专题图形要素。 - */ - createThematicFeature(feature) { - //赋 style - var style = this.getStyleByData(feature); - //创建专题要素时的可选参数 - var options = {}; - options.nodesClipPixel = this.nodesClipPixel; - options.isHoverAble = this.isHoverAble; - options.isMultiHover = this.isMultiHover; - options.isClickAble = this.isClickAble; - options.highlightStyle = ShapeFactory.transformStyle(this.highlightStyle); + /** + * @function Zondy.Map.rangeThemeLayer.prototype.createThematicFeature + * @description 创建专题图要素。 + * @param {Object} feature - 要创建的专题图形要素。 + */ + createThematicFeature(feature) { + //赋 style + var style = this.getStyleByData(feature); + //创建专题要素时的可选参数 + var options = {}; + options.nodesClipPixel = this.nodesClipPixel; + options.isHoverAble = this.isHoverAble; + options.isMultiHover = this.isMultiHover; + options.isClickAble = this.isClickAble; + options.highlightStyle = ShapeFactory.transformStyle(this.highlightStyle); - //将数据转为专题要素（Vector） - var thematicFeature = new ThemeVector( - feature, - this, - ShapeFactory.transformStyle(style), - options - ); + //将数据转为专题要素（Vector） + var thematicFeature = new ThemeVector(feature, this, ShapeFactory.transformStyle(style), options); - //直接添加图形到渲染器 - for (var m = 0; m < thematicFeature.shapes.length; m++) { - this.renderer.addShape(thematicFeature.shapes[m]); + //直接添加图形到渲染器 + for (var m = 0; m < thematicFeature.shapes.length; m++) { + this.renderer.addShape(thematicFeature.shapes[m]); + } + return thematicFeature; } - return thematicFeature; - } - /** - * @private - * @function Zondy.Map.rangeThemeLayer.prototype.getStyleByData - * @description 通过数据获取 style。 - * @param {Object} fea - 要素数据。 - */ - getStyleByData(fea) { - var style = {}; - var feature = fea; - style = copyAttributesWithClip(style, this.style); - if ( - this.themeField && - this.styleGroups && - this.styleGroups.length > 0 && - feature.attributes - ) { - var Sf = this.themeField; - var Attrs = feature.attributes; - var Gro = this.styleGroups; - var isSfInAttrs = false; //指定的 themeField 是否是 feature 的属性字段之一 - var attr = null; //属性值 + /** + * @private + * @function Zondy.Map.rangeThemeLayer.prototype.getStyleByData + * @description 通过数据获取 style。 + * @param {Object} fea - 要素数据。 + */ + getStyleByData(fea) { + var style = {}; + var feature = fea; + style = copyAttributesWithClip(style, this.style); + if (this.themeField && this.styleGroups && this.styleGroups.length > 0 && feature.attributes) { + var Sf = this.themeField; + var Attrs = feature.attributes; + var Gro = this.styleGroups; + var isSfInAttrs = false; //指定的 themeField 是否是 feature 的属性字段之一 + var attr = null; //属性值 - for (var property in Attrs) { - if (Sf === property) { - isSfInAttrs = true; - attr = Attrs[property]; - break; + for (var property in Attrs) { + if (Sf === property) { + isSfInAttrs = true; + attr = Attrs[property]; + break; + } + } + //判断属性值是否属于styleGroups的某一个范围，以便对获取分组 style + if (isSfInAttrs) { + for (var i = 0, len = Gro.length; i < len; i++) { + if (attr >= Gro[i].start && attr < Gro[i].end) { + //feature.style = CommonUtil.copyAttributes(feature.style, this.defaultStyle); + var sty1 = Gro[i].style; + style = copyAttributesWithClip(style, sty1); + } + } + } } - } - //判断属性值是否属于styleGroups的某一个范围，以便对获取分组 style - if (isSfInAttrs) { - for (var i = 0, len = Gro.length; i < len; i++) { - if (attr >= Gro[i].start && attr < Gro[i].end) { - //feature.style = CommonUtil.copyAttributes(feature.style, this.defaultStyle); - var sty1 = Gro[i].style; - style = copyAttributesWithClip(style, sty1); - } + if (feature.style && this.isAllowFeatureStyle === true) { + style = copyAttributesWithClip(feature.style); } - } - } - if (feature.style && this.isAllowFeatureStyle === true) { - style = copyAttributesWithClip(feature.style); + return style; } - return style; - } } export { RangeThemeLayer }; -export var rangeThemeLayer = function(name, options) { - return new RangeThemeLayer(name, options); +export var rangeThemeLayer = function (name, options) { + return new RangeThemeLayer(name, options); }; Zondy.Map.rangeThemeLayer = rangeThemeLayer; diff --git a/src/mapboxgl/theme/RankSymbolThemeLayer.js b/src/mapboxgl/theme/RankSymbolThemeLayer.js index edec773d8..d6c798e9d 100644 --- a/src/mapboxgl/theme/RankSymbolThemeLayer.js +++ b/src/mapboxgl/theme/RankSymbolThemeLayer.js @@ -1,8 +1,11 @@ import mapboxgl from '@mapgis/mapbox-gl'; -import { Zondy } from '../../service/common/Base'; -import { Theme as FeatureTheme } from '../../common/overlay/feature/Theme'; +import { Common } from '@mapgis/webclient-es6-service'; + +import { Theme as FeatureTheme } from './common/overlay/feature/Theme'; import { GraphThemeLayer } from './GraphThemeLayer'; +const { Zondy } = Common; + /** * @class Zondy.Map.rankSymbolThemeLayer * @classdesc 等级符号专题图层。 diff --git a/src/mapboxgl/theme/SimpleThemeLayer.js b/src/mapboxgl/theme/SimpleThemeLayer.js index cd4f1c904..daf331f84 100644 --- a/src/mapboxgl/theme/SimpleThemeLayer.js +++ b/src/mapboxgl/theme/SimpleThemeLayer.js @@ -1,9 +1,11 @@ import mapboxgl from '@mapgis/mapbox-gl'; -import { Zondy } from '../../service/common/Base'; -import { copyAttributesWithClip } from '../../service/common/Util'; +import { Common } from '@mapgis/webclient-es6-service'; + import { GeoFeatureThemeLayer } from './GeoFeatureThemeLayer'; -import { ThemeVector } from '../../common/overlay/ThemeVector'; -import { ShapeFactory } from '../../common/overlay/feature/ShapeFactory'; +import { ThemeVector } from './common/overlay/ThemeVector'; +import { ShapeFactory } from './common/overlay/feature/ShapeFactory'; + +const { copyAttributesWithClip, Zondy } = Common; /** * @class Zondy.Map.simpleThemeLayer diff --git a/src/mapboxgl/theme/Theme3DLayer.js b/src/mapboxgl/theme/Theme3DLayer.js index 6aa1c89d7..505f8ed7c 100644 --- a/src/mapboxgl/theme/Theme3DLayer.js +++ b/src/mapboxgl/theme/Theme3DLayer.js @@ -1,6 +1,7 @@ -import { mapboxgl } from "@mapgis/mapbox-gl"; -import { Zondy } from "../../service/common/Base"; -import { extend } from "../../service/common/Util"; +import { mapboxgl } from '@mapgis/mapbox-gl'; +import { Common } from '@mapgis/webclient-es6-service'; + +const { extend, Zondy } = Common; /** * @class Theme3DLayer @@ -22,515 +23,497 @@ import { extend } from "../../service/common/Util"; * legendPosition -{string} 图例位置，取值：'top-right'|'top-left'|'bottom-left'|'bottom-right'
*/ class Theme3DLayer { - constructor(id, layerOptions) { - /** - * @member id -{string} - * @description mapbox gl图层id - */ - this.id = id; + constructor(id, layerOptions) { + /** + * @member id -{string} + * @description mapbox gl图层id + */ + this.id = id; + + /** + * @member map -{object} + * @description mapbox gl地图对象 + */ + this.map = null; + /** + * @member opacity -{number} + * @description 图层透明度，默认1 + */ + this.opacity = 1; + /** + * @member parseNumber -{boolean} + * @description 是否进行数据预处理,有些字段是string类型，需要转换为number + */ + this.parseNumber = false; + /** + * @member enableHighlight -{boolean} + * @description 是否开启高亮,默认false + */ + this.enableHighlight = false; + + /** + * @member highlight -{Object} + * @description 高亮相关配置,默认null + */ + this.highlight = { color: '#ADA91E' }; + + /** + * @member baseHeightField -{string} + * @description 数据中表示基础高度的字段 + */ + this.baseHeightField = null; + + /** + * @member height -{number} + * @description 高度。如果数据指定的heightField(默认height)没有可以表示高度的字段，可以为所有数据统一设置一个高度 + */ + this.height = null; + + /** + * @member heightField -{string} + * @description 数据中表示高度的字段 + */ + this.heightField = 'height'; + + /** + * @member themeField -{string} + * @description 专题展示的字段 + */ + this.themeField = this.heightField; + + /** + * @member showLegend -{Boolean} + * @description 是否显示图例 + */ + this.showLegend = true; + + /** + * @member legendTitle -{string} + * @description 图例标题 + */ + this.legendTitle = null; + + /** + * @member legendTheme -{string} + * @description 图例主题，取值：'light','dark' + * @default 'light' + */ + this.legendTheme = 'light'; + + /** + * @member legendOrientation -{string} + * @description 图例方向，取值：'horizontal','vertical'，默认：'horizontal' + * @default 'horizontal' + */ + this.legendOrientation = 'horizontal'; + /** + * @member legendPosition -{string} + * @description 图例位置，取值：'top-right'|'top-left'|'bottom-left'|'bottom-right' + * @default 'bottom-right' + */ + this.legendPosition = 'bottom-right'; + this.mousemoveOn = true; + extend(this, layerOptions); + } /** - * @member map -{object} - * @description mapbox gl地图对象 - */ - this.map = null; - /** - * @member opacity -{number} - * @description 图层透明度，默认1 + * @function setLayerOptions + * @description 设置图层相关参数 + * @param layerOptions -{object} 该专题图图层相关参数
+ * * opacity -{number} 图层透明度，默认1
+ * parseNumber -{boolean} 是否预处理数据，将数据转换为number，默认false
+ * baseHeightField -{string} 数据中表示基础高度的字段
+ * height -{number} 高度。如果数据指定的heightField(默认height)没有可以表示高度的字段，可以为所有数据统一设置一个高度
+ * heightField -{string} 数据中表示高度的字段
+ * themeField -{string} 专题展示的字段
+ * showLegend -{boolean} 是否显示图例,默认显示
+ * legendTitle -{string} 图例标题
+ * legendTheme -{string} 图例主题，取值：'light','dark',默认：'light'
+ * legendOrientation -{string} 图例方向，取值：'horizontal','vertical'，默认：'horizontal'
+ * legendPosition -{string} 图例位置，取值：'top-right'|'top-left'|'bottom-left'|'bottom-right'
+ * @returns {this} */ - this.opacity = 1; - /** - * @member parseNumber -{boolean} - * @description 是否进行数据预处理,有些字段是string类型，需要转换为number - */ - this.parseNumber = false; - /** - * @member enableHighlight -{boolean} - * @description 是否开启高亮,默认false - */ - this.enableHighlight = false; + setLayerOptions(layerOptions) { + extend(this, layerOptions); + return this; + } /** - * @member highlight -{Object} - * @description 高亮相关配置,默认null + * @function mapboxgl.zondy.Theme3DLayer.prototype.setHighlightStyleOptions + * @description 设置图层高亮相关参数 + * @param highlightOptions -{object} 该专题图图层高亮相关参数
+ * color -{string} 颜色
+ * callback -{function} 回调,返回数据参数（data,event）
+ * @returns {this} */ - this.highlight = { color: "#ADA91E" }; + setHighlightStyleOptions(highlightOptions) { + extend(this.highlight, highlightOptions); + return this; + } /** - * @member baseHeightField -{string} - * @description 数据中表示基础高度的字段 + * @function setData + * @description 设置数据，数据格式必须为geojson格式 + * @param data -{object} geojson格式数据 + * @param parseNumber -{object} 是否进行数据预处理,有些字段是string类型，需要转换为number */ - this.baseHeightField = null; + setData(data, parseNumber) { + var me = this; + me.data = data; + if (parseNumber != null) { + me.parseNumber = parseNumber; + } + me.parseNumber && + me.data && + me.data.features && + me.data.features.map(function (val) { + if (me.baseHeightField && val.properties[me.baseHeightField]) { + val.properties[me.baseHeightField] = parseFloat(val.properties[me.baseHeightField]); + } + if (me.heightField && val.properties[me.heightField]) { + val.properties[me.heightField] = parseFloat(val.properties[me.heightField]); + } + return val; + }); + return this; + } - /** - * @member height -{number} - * @description 高度。如果数据指定的heightField(默认height)没有可以表示高度的字段，可以为所有数据统一设置一个高度 - */ - this.height = null; + WebMercator2lonLat(cx, cy) { + var x = (cx / 20037508.34) * 180; + var y = (cy / 20037508.34) * 180; + y = (180 / Math.PI) * (2 * Math.atan(Math.exp((y * Math.PI) / 180)) - Math.PI / 2); + return [x, y]; + } + convertData(data) { + if (data != null && data.features != null && data.features.length > 0) { + for (var i = 0; i < data.features.length; i++) { + var temGeom = data.features[i].geometry; + if (temGeom != null && temGeom.coordinates != null && temGeom.coordinates.length > 0) { + if (temGeom.type == 'Polygon') { + var rings = temGeom.coordinates; + for (var j = 0; j < rings.length; j++) { + var ring = rings[j]; + if (ring != null && ring.length > 0) { + for (var k = 0; k < ring.length; k++) { + let coordinate = new mapboxgl.LngLat(ring[k][0], ring[k][1]); + let tempPoint = map.project(coordinate); + data.features[i].geometry.coordinates[j][k] = [tempPoint.x, tempPoint.y]; + } + } + } + } else if (temGeom.type == 'MultiPolygon') { + var polygons = temGeom.coordinates; + for (var m = 0; m < polygons.length; m++) { + var polygon = polygons[m]; + if (polygon != null && polygon.length > 0) { + for (var j = 0; j < polygon.length; j++) { + var ring = polygon[j]; + if (ring != null && ring.length > 0) { + for (var k = 0; k < ring.length; k++) { + let coordinate = new mapboxgl.LngLat(ring[k][0], ring[k][1]); + let tempPoint = map.project(coordinate); + data.features[i].geometry.coordinates[m][j][k] = [tempPoint.x, tempPoint.y]; + } + } + } + } + } + } + } + } + } + return data; + } /** - * @member heightField -{string} - * @description 数据中表示高度的字段 + * @function getData + * @description 获取数据，返回的数据格式为geojson + * @returns {Object} */ - this.heightField = "height"; + getData() { + return this.data; + } /** - * @member themeField -{string} - * @description 专题展示的字段 + * @function addTo + * @description 添加图层到地图上 + * @param map -{Object} mapboxgl 地图对象 + * @returns {this} */ - this.themeField = this.heightField; + addTo(map) { + this.map = map; + if (!this.map) { + return this; + } - /** - * @member showLegend -{Boolean} - * @description 是否显示图例 - */ - this.showLegend = true; + this.show(); + return this; + } /** - * @member legendTitle -{string} - * @description 图例标题 + * @function show + * @description 显示图层 + * @param options -{Object} 图层配置项 + * @returns {this} */ - this.legendTitle = null; + show(options) { + extend(this, options); + this._addLayer(); + if (this.enableHighlight) { + this._addHighLightLayer(); + } + if (this.showLegend) { + if (!this.legend) { + this.legend = this._createLegendControl(); + } + this.map.addControl(this.legend, this.legendPosition); + } + return this; + } /** - * @member legendTheme -{string} - * @description 图例主题，取值：'light','dark' - * @default 'light' + * @function remove + * @description 从地图上移除图层 + * @returns {this} */ - this.legendTheme = "light"; + remove() { + if (!this.map) { + return this; + } + var me = this; + me.mousemoveOn = false; + // this.map.off('mousemove',function(e){ + // me.mousemoveCallback(e,me); + // }); + //移除图层 + var layerId = this.id ? this.id : 'theme3DLayer'; + if (this.map.getLayer(layerId)) { + this.map.removeLayer(layerId); + } + //移除高亮图层 + var highlightLayerId = 'highlightLayer'; + if (this.map.getLayer(highlightLayerId)) { + this.map.removeLayer(highlightLayerId); + } + // if (!!this.map.getSource(this.sourceId)) { + // this.map.removeSource(this.sourceId); + // } + // if (!!this.map.getSource("highlight")) { + // this.map.removeSource("highlight"); + // } + + //移除图例 + if (this.legend) { + this.map.removeControl(this.legend); + } + + return this; + } /** - * @member legendOrientation -{string} - * @description 图例方向，取值：'horizontal','vertical'，默认：'horizontal' - * @default 'horizontal' + * @function getLayerStyleOptions + * @description 获取图层样式 + * @return {Object} mapbox gl样式对象 */ - this.legendOrientation = "horizontal"; + getLayerStyleOptions() { + //子类重写实现 + } + /** - * @member legendPosition -{string} - * @description 图例位置，取值：'top-right'|'top-left'|'bottom-left'|'bottom-right' - * @default 'bottom-right' + * @function mapboxgl.zondy.Theme3DLayer.prototype.getHighlightStyleOptions + * @description 获取高亮样式,子类重写实现 + * @returns {Object} mapbox gl样式对象 */ - this.legendPosition = "bottom-right"; - this.mousemoveOn = true; - extend(this, layerOptions); - } - - /** - * @function setLayerOptions - * @description 设置图层相关参数 - * @param layerOptions -{object} 该专题图图层相关参数
- * * opacity -{number} 图层透明度，默认1
- * parseNumber -{boolean} 是否预处理数据，将数据转换为number，默认false
- * baseHeightField -{string} 数据中表示基础高度的字段
- * height -{number} 高度。如果数据指定的heightField(默认height)没有可以表示高度的字段，可以为所有数据统一设置一个高度
- * heightField -{string} 数据中表示高度的字段
- * themeField -{string} 专题展示的字段
- * showLegend -{boolean} 是否显示图例,默认显示
- * legendTitle -{string} 图例标题
- * legendTheme -{string} 图例主题，取值：'light','dark',默认：'light'
- * legendOrientation -{string} 图例方向，取值：'horizontal','vertical'，默认：'horizontal'
- * legendPosition -{string} 图例位置，取值：'top-right'|'top-left'|'bottom-left'|'bottom-right'
- * @returns {this} - */ - setLayerOptions(layerOptions) { - extend(this, layerOptions); - return this; - } - - /** - * @function mapboxgl.zondy.Theme3DLayer.prototype.setHighlightStyleOptions - * @description 设置图层高亮相关参数 - * @param highlightOptions -{object} 该专题图图层高亮相关参数
- * color -{string} 颜色
- * callback -{function} 回调,返回数据参数（data,event）
- * @returns {this} - */ - setHighlightStyleOptions(highlightOptions) { - extend(this.highlight, highlightOptions); - return this; - } - - /** - * @function setData - * @description 设置数据，数据格式必须为geojson格式 - * @param data -{object} geojson格式数据 - * @param parseNumber -{object} 是否进行数据预处理,有些字段是string类型，需要转换为number - */ - setData(data, parseNumber) { - var me = this; - me.data = data; - if (parseNumber != null) { - me.parseNumber = parseNumber; + getHighlightStyleOptions() { + //子类重写实现 } - me.parseNumber && - me.data && - me.data.features && - me.data.features.map(function(val) { - if (me.baseHeightField && val.properties[me.baseHeightField]) { - val.properties[me.baseHeightField] = parseFloat( - val.properties[me.baseHeightField] - ); - } - if (me.heightField && val.properties[me.heightField]) { - val.properties[me.heightField] = parseFloat( - val.properties[me.heightField] - ); - } - return val; - }); - return this; - } - - WebMercator2lonLat(cx, cy) { - var x = (cx / 20037508.34) * 180; - var y = (cy / 20037508.34) * 180; - y = - (180 / Math.PI) * - (2 * Math.atan(Math.exp((y * Math.PI) / 180)) - Math.PI / 2); - return [x, y]; - } - - convertData(data) { - if (data != null && data.features != null && data.features.length > 0) { - for (var i = 0; i < data.features.length; i++) { - var temGeom = data.features[i].geometry; - if ( - temGeom != null && - temGeom.coordinates != null && - temGeom.coordinates.length > 0 - ) { - if (temGeom.type == "Polygon") { - var rings = temGeom.coordinates; - for (var j = 0; j < rings.length; j++) { - var ring = rings[j]; - if (ring != null && ring.length > 0) { - for (var k = 0; k < ring.length; k++) { - let coordinate = new mapboxgl.LngLat(ring[k][0], ring[k][1]); - let tempPoint = map.project(coordinate); - data.features[i].geometry.coordinates[j][ - k - ] = [tempPoint.x, tempPoint.y]; - } - } + + _createLegendControl(html) { + var me = this; + + function LegendControl() {} + + LegendControl.prototype.onAdd = function (map) { + this._map = map; + this._container = document.createElement('div'); + var className = 'mapboxgl-ctrl legend '; + var theme = 'legend-light'; + if (me.legendTheme === 'dark') { + theme = 'legend-dark'; } - } else if (temGeom.type == "MultiPolygon") { - var polygons = temGeom.coordinates; - for (var m = 0; m < polygons.length; m++) { - var polygon = polygons[m]; - if (polygon != null && polygon.length > 0) { - for (var j = 0; j < polygon.length; j++) { - var ring = polygon[j]; - if (ring != null && ring.length > 0) { - for (var k = 0; k < ring.length; k++) { - let coordinate = new mapboxgl.LngLat(ring[k][0], ring[k][1]); - let tempPoint = map.project(coordinate); - data.features[i].geometry.coordinates[m][j][ - k - ] = [tempPoint.x, tempPoint.y]; - } - } - } - } + var orientation = ' legend-horizontal'; + if (me.legendOrientation === 'vertical') { + orientation = ' legend-vertical'; } - } - } - } - } - return data; - } - /** - * @function getData - * @description 获取数据，返回的数据格式为geojson - * @returns {Object} - */ - getData() { - return this.data; - } - - /** - * @function addTo - * @description 添加图层到地图上 - * @param map -{Object} mapboxgl 地图对象 - * @returns {this} - */ - addTo(map) { - this.map = map; - if (!this.map) { - return this; - } + this._container.className = className + theme + orientation; + + if (html) { + this._container.innerHTML = html; + } else { + var legendTitle = me.legendTitle || ''; + var titleElement = "
" + legendTitle + '
'; + var content = me._createLegendElement.call(me) || ''; + var contentElement = "
" + content + '
'; + this._container.innerHTML = titleElement + contentElement; + } + me._appendLegendCSSStyle(); + return this._container; + }; - this.show(); - return this; - } - - /** - * @function show - * @description 显示图层 - * @param options -{Object} 图层配置项 - * @returns {this} - */ - show(options) { - extend(this, options); - this._addLayer(); - if (this.enableHighlight) { - this._addHighLightLayer(); - } - if (this.showLegend) { - if (!this.legend) { - this.legend = this._createLegendControl(); - } - this.map.addControl(this.legend, this.legendPosition); - } - return this; - } - - /** - * @function remove - * @description 从地图上移除图层 - * @returns {this} - */ - remove() { - if (!this.map) { - return this; - } - var me = this; - me.mousemoveOn = false; - // this.map.off('mousemove',function(e){ - // me.mousemoveCallback(e,me); - // }); - //移除图层 - var layerId = this.id ? this.id : "theme3DLayer"; - if (this.map.getLayer(layerId)) { - this.map.removeLayer(layerId); - } - //移除高亮图层 - var highlightLayerId = "highlightLayer"; - if (this.map.getLayer(highlightLayerId)) { - this.map.removeLayer(highlightLayerId); - } - // if (!!this.map.getSource(this.sourceId)) { - // this.map.removeSource(this.sourceId); - // } - // if (!!this.map.getSource("highlight")) { - // this.map.removeSource("highlight"); - // } - - //移除图例 - if (this.legend) { - this.map.removeControl(this.legend); - } + LegendControl.prototype.onRemove = function () { + this._container.parentNode.removeChild(this._container); + this._map = undefined; + }; - return this; - } - - /** - * @function getLayerStyleOptions - * @description 获取图层样式 - * @return {Object} mapbox gl样式对象 - */ - getLayerStyleOptions() { - //子类重写实现 - } - - /** - * @function mapboxgl.zondy.Theme3DLayer.prototype.getHighlightStyleOptions - * @description 获取高亮样式,子类重写实现 - * @returns {Object} mapbox gl样式对象 - */ - getHighlightStyleOptions() { - //子类重写实现 - } - - _createLegendControl(html) { - var me = this; - - function LegendControl() {} - - LegendControl.prototype.onAdd = function(map) { - this._map = map; - this._container = document.createElement("div"); - var className = "mapboxgl-ctrl legend "; - var theme = "legend-light"; - if (me.legendTheme === "dark") { - theme = "legend-dark"; - } - var orientation = " legend-horizontal"; - if (me.legendOrientation === "vertical") { - orientation = " legend-vertical"; - } - this._container.className = className + theme + orientation; - - if (html) { - this._container.innerHTML = html; - } else { - var legendTitle = me.legendTitle || ""; - var titleElement = - "
" + legendTitle + "
"; - var content = me._createLegendElement.call(me) || ""; - var contentElement = - "
" + content + "
"; - this._container.innerHTML = titleElement + contentElement; - } - me._appendLegendCSSStyle(); - return this._container; - }; - - LegendControl.prototype.onRemove = function() { - this._container.parentNode.removeChild(this._container); - this._map = undefined; - }; - - return new LegendControl(); - } - - _createLegendElement() { - //子类实现 - } - - _addLayer() { - var paintOptions = this.getLayerStyleOptions(); - var id = this.id ? this.id : "theme3DLayer"; - this.id = id; - var sourceId = (this.sourceId = id + "Source"); - if (!!this.map.getSource(sourceId)) { - this.map.removeSource(sourceId); - } - this.map.addSource(sourceId, { - type: "geojson", - data: this.data - }); - if (!!this.map.getLayer(id)) { - this.map.removeLayer(id); + return new LegendControl(); } - this.map.addLayer({ - id: id, - type: "fill-extrusion", - source: sourceId, - paint: paintOptions - }); - - this.map.moveLayer(id); - } - - //添加高亮图层 - _addHighLightLayer() { - if (!this.map) { - return; + + _createLegendElement() { + //子类实现 } - var map = this.map; - if (map.getSource("highlight")) { - map.removeSource("highlight"); + + _addLayer() { + var paintOptions = this.getLayerStyleOptions(); + var id = this.id ? this.id : 'theme3DLayer'; + this.id = id; + var sourceId = (this.sourceId = id + 'Source'); + if (!!this.map.getSource(sourceId)) { + this.map.removeSource(sourceId); + } + this.map.addSource(sourceId, { + type: 'geojson', + data: this.data + }); + if (!!this.map.getLayer(id)) { + this.map.removeLayer(id); + } + this.map.addLayer({ + id: id, + type: 'fill-extrusion', + source: sourceId, + paint: paintOptions + }); + + this.map.moveLayer(id); } - map.addSource("highlight", { - type: "geojson", - data: { - type: "FeatureCollection", - features: [] - } - }); - if (!!map.getLayer("highlightLayer")) { - map.removeLayer("highlightLayer"); + + //添加高亮图层 + _addHighLightLayer() { + if (!this.map) { + return; + } + var map = this.map; + if (map.getSource('highlight')) { + map.removeSource('highlight'); + } + map.addSource('highlight', { + type: 'geojson', + data: { + type: 'FeatureCollection', + features: [] + } + }); + if (!!map.getLayer('highlightLayer')) { + map.removeLayer('highlightLayer'); + } + map.addLayer({ + id: 'highlightLayer', + type: 'fill-extrusion', + source: 'highlight', + paint: this.getHighlightStyleOptions() + }); + + var me = this; + var featureId; + //map.on('mousemove',this.mousemoveCallback); + // map.on('mousemove',function(e){ + // if(!me.mousemoveOn) + // { + // return; + // } + // me.mousemoveCallback(e,me); + // }); + + map.on('mousemove', function (e) { + if (!me.mousemoveOn) { + return; + } + me.mousemoveOn = true; + var canvas = document.querySelector('.mapboxgl-canvas-container.mapboxgl-interactive'); + canvas.style.cursor = 'auto'; + + var features = me.map.queryRenderedFeatures(e.point, { layers: [me.id] }); + //var sta = me.map.getFeatureState(features[0]); + + if (me.highlight && me.highlight.callback) { + me.highlight.callback(features, e); + } + + if (!features || features.length < 1) { + me._clearHighlight.call(me); + return; + } + var id = features[0].properties.fid; + if (featureId === id) { + return; + } + featureId = id; + me._clearHighlight.call(me); + var sourceFeatures = me.map.querySourceFeatures(me.sourceId, { + filter: ['==', 'fid', id] + }); + var i, + len = sourceFeatures.length; + var geoFeatures = { type: 'FeatureCollection', features: [] }; + for (i = 0; i < len; i++) { + geoFeatures['features'].push(sourceFeatures[i].toJSON()); + } + me.map.getSource('highlight').setData(geoFeatures); + }); } - map.addLayer({ - id: "highlightLayer", - type: "fill-extrusion", - source: "highlight", - paint: this.getHighlightStyleOptions() - }); - - var me = this; - var featureId; - //map.on('mousemove',this.mousemoveCallback); - // map.on('mousemove',function(e){ - // if(!me.mousemoveOn) - // { - // return; + // mousemoveCallback (e,obj) { + // obj.mousemoveOn= true; + // var canvas = document.querySelector('.mapboxgl-canvas-container.mapboxgl-interactive'); + // canvas.style.cursor = 'auto'; + + // var features = obj.map.queryRenderedFeatures(e.point, {layers: [obj.id]}); + // if (obj.highlight && obj.highlight.callback) { + // obj.highlight.callback(features, e); + // } + + // if (!features || features.length < 1) { + // obj._clearHighlight.call(obj); + // return; + // } + // var id = features[0].properties.fid; + // if (featureId === id) { + // return; + // } + // featureId = id; + // obj._clearHighlight.call(obj); + // var sourceFeatures = obj.map.querySourceFeatures(obj.sourceId, {filter: ['==','fid',id]}); + // var i, len = sourceFeatures.length; + // var geoFeatures = {'type': 'FeatureCollection', 'features': []}; + // for (i = 0; i < len; i++) { + // geoFeatures['features'].push(sourceFeatures[i].toJSON()); + // } + // obj.map.getSource('highlight').setData(geoFeatures); // } - // me.mousemoveCallback(e,me); - // }); - - map.on("mousemove", function(e) { - if (!me.mousemoveOn) { - return; - } - me.mousemoveOn = true; - var canvas = document.querySelector( - ".mapboxgl-canvas-container.mapboxgl-interactive" - ); - canvas.style.cursor = "auto"; - - var features = me.map.queryRenderedFeatures(e.point, { layers: [me.id] }); - //var sta = me.map.getFeatureState(features[0]); - - if (me.highlight && me.highlight.callback) { - me.highlight.callback(features, e); - } - - if (!features || features.length < 1) { - me._clearHighlight.call(me); - return; - } - var id = features[0].properties.fid; - if (featureId === id) { - return; - } - featureId = id; - me._clearHighlight.call(me); - var sourceFeatures = me.map.querySourceFeatures(me.sourceId, { - filter: ["==", "fid", id] - }); - var i, - len = sourceFeatures.length; - var geoFeatures = { type: "FeatureCollection", features: [] }; - for (i = 0; i < len; i++) { - geoFeatures["features"].push(sourceFeatures[i].toJSON()); - } - me.map.getSource("highlight").setData(geoFeatures); - }); - } - // mousemoveCallback (e,obj) { - // obj.mousemoveOn= true; - // var canvas = document.querySelector('.mapboxgl-canvas-container.mapboxgl-interactive'); - // canvas.style.cursor = 'auto'; - - // var features = obj.map.queryRenderedFeatures(e.point, {layers: [obj.id]}); - // if (obj.highlight && obj.highlight.callback) { - // obj.highlight.callback(features, e); - // } - - // if (!features || features.length < 1) { - // obj._clearHighlight.call(obj); - // return; - // } - // var id = features[0].properties.fid; - // if (featureId === id) { - // return; - // } - // featureId = id; - // obj._clearHighlight.call(obj); - // var sourceFeatures = obj.map.querySourceFeatures(obj.sourceId, {filter: ['==','fid',id]}); - // var i, len = sourceFeatures.length; - // var geoFeatures = {'type': 'FeatureCollection', 'features': []}; - // for (i = 0; i < len; i++) { - // geoFeatures['features'].push(sourceFeatures[i].toJSON()); - // } - // obj.map.getSource('highlight').setData(geoFeatures); - // } - _clearHighlight() { - if (this.map) { - if (!!this.map.getSource("highlight")) { - this.map.getSource("highlight").setData({ - type: "FeatureCollection", - features: [] - }); - } + _clearHighlight() { + if (this.map) { + if (!!this.map.getSource('highlight')) { + this.map.getSource('highlight').setData({ + type: 'FeatureCollection', + features: [] + }); + } + } } - } - _appendLegendCSSStyle() { - var legendStyle = document.createElement("style"); - legendStyle.type = "text/css"; - var baseStyle = ` + _appendLegendCSSStyle() { + var legendStyle = document.createElement('style'); + legendStyle.type = 'text/css'; + var baseStyle = ` .legend { display: inline-block; border-radius: 2px; @@ -566,14 +549,14 @@ class Theme3DLayer { padding:6px 10px; } `; - legendStyle.innerHTML = baseStyle + this._legendCSSStyle(); - document.getElementsByTagName("head")[0].appendChild(legendStyle); - } - - //各种图层对应的自己的图例的样式 - _legendCSSStyle() { - //子类可重写实现 - return ` + legendStyle.innerHTML = baseStyle + this._legendCSSStyle(); + document.getElementsByTagName('head')[0].appendChild(legendStyle); + } + + //各种图层对应的自己的图例的样式 + _legendCSSStyle() { + //子类可重写实现 + return ` .legend ul { padding: 0; margin: 0 16px; @@ -635,7 +618,7 @@ class Theme3DLayer { text-align: center; } `; - } + } } export { Theme3DLayer }; Zondy.Map.Theme3DLayer = Theme3DLayer; diff --git a/src/mapboxgl/theme/ThemeLayer.js b/src/mapboxgl/theme/ThemeLayer.js index a9945c7c1..3a8ece304 100644 --- a/src/mapboxgl/theme/ThemeLayer.js +++ b/src/mapboxgl/theme/ThemeLayer.js @@ -1,10 +1,9 @@ import mapboxgl from '@mapgis/mapbox-gl'; -import { Zondy } from '../../service/common/Base'; -import { LevelRenderer } from '../../common/overlay/levelRender/LevelRenderer'; -import { modifyDOMElement } from '../../service/common/Util'; -import { isArray } from '../../service/common/Util'; -import { indexOf } from '../../service/common/Util'; -import { newGuid } from '../../service/common'; +import { Common } from '@mapgis/webclient-es6-service'; + +import { LevelRenderer } from './common/overlay/levelRender/LevelRenderer'; + +const { modifyDOMElement, isArray, indexOf, newGuid, Zondy } = Common; /** * @class Zondy.Map.ThemeLayer diff --git a/src/mapboxgl/theme/ThemeStyle.js b/src/mapboxgl/theme/ThemeStyle.js index 05cd57af4..4315557e0 100644 --- a/src/mapboxgl/theme/ThemeStyle.js +++ b/src/mapboxgl/theme/ThemeStyle.js @@ -1,5 +1,6 @@ -import { Zondy } from '../../service/common/Base'; -import { extend } from '../../service/common/Util'; +import { Common } from '@mapgis/webclient-es6-service'; + +const { extend, Zondy } = Common; /** * @class Zondy.Map.ThemeStyle diff --git a/src/mapboxgl/theme/UniqueTheme3DLayer.js b/src/mapboxgl/theme/UniqueTheme3DLayer.js index d4c2b7c30..1af358f01 100644 --- a/src/mapboxgl/theme/UniqueTheme3DLayer.js +++ b/src/mapboxgl/theme/UniqueTheme3DLayer.js @@ -1,7 +1,7 @@ -import { mapboxgl } from '@mapgis/mapbox-gl'; -import { Zondy } from '../../service/common/Base'; +import { Common } from '@mapgis/webclient-es6-service'; import { Theme3DLayer } from './Theme3DLayer'; -import { extend } from '../../service/common/Util'; + +const { extend, Zondy } = Common; /** * @class mapboxgl.zondy.UniqueTheme3DLayer diff --git a/src/mapboxgl/theme/UniqueThemeLayer.js b/src/mapboxgl/theme/UniqueThemeLayer.js index 7334405a4..78669c68c 100644 --- a/src/mapboxgl/theme/UniqueThemeLayer.js +++ b/src/mapboxgl/theme/UniqueThemeLayer.js @@ -1,9 +1,11 @@ import mapboxgl from '@mapgis/mapbox-gl'; -import { Zondy } from '../../service/common/Base'; -import { copyAttributesWithClip } from '../../service/common/Util'; +import { Common } from '@mapgis/webclient-es6-service'; + import { RangeThemeLayer } from './RangeThemeLayer'; -import { ShapeFactory } from '../../common/overlay/feature/ShapeFactory'; -import { ThemeVector } from '../../common/overlay'; +import { ShapeFactory } from './common/overlay/feature/ShapeFactory'; +import { ThemeVector } from './common/overlay'; + +const { copyAttributesWithClip, Zondy } = Common; /** * @class Zondy.Map.uniqueThemeLayer diff --git a/src/mapboxgl/theme/common/assets/image/bar.png b/src/mapboxgl/theme/common/assets/image/bar.png new file mode 100644 index 000000000..4730a0f54 Binary files /dev/null and b/src/mapboxgl/theme/common/assets/image/bar.png differ diff --git a/src/mapboxgl/theme/common/assets/image/bar3D.png b/src/mapboxgl/theme/common/assets/image/bar3D.png new file mode 100644 index 000000000..1a12ac321 Binary files /dev/null and b/src/mapboxgl/theme/common/assets/image/bar3D.png differ diff --git a/src/mapboxgl/theme/common/assets/image/ling.png b/src/mapboxgl/theme/common/assets/image/ling.png new file mode 100644 index 000000000..f8c0c4345 Binary files /dev/null and b/src/mapboxgl/theme/common/assets/image/ling.png differ diff --git a/src/mapboxgl/theme/common/assets/image/pie.png b/src/mapboxgl/theme/common/assets/image/pie.png new file mode 100644 index 000000000..e2ffaed17 Binary files /dev/null and b/src/mapboxgl/theme/common/assets/image/pie.png differ diff --git a/src/mapboxgl/theme/common/assets/image/point.png b/src/mapboxgl/theme/common/assets/image/point.png new file mode 100644 index 000000000..e13c17c18 Binary files /dev/null and b/src/mapboxgl/theme/common/assets/image/point.png differ diff --git a/src/mapboxgl/theme/common/assets/image/ring.png b/src/mapboxgl/theme/common/assets/image/ring.png new file mode 100644 index 000000000..1ca1504f4 Binary files /dev/null and b/src/mapboxgl/theme/common/assets/image/ring.png differ diff --git a/src/mapboxgl/theme/common/feature/Feature.js b/src/mapboxgl/theme/common/feature/Feature.js new file mode 100644 index 000000000..b4fbdfd67 --- /dev/null +++ b/src/mapboxgl/theme/common/feature/Feature.js @@ -0,0 +1,318 @@ +/** + * @module ol/Feature + */ +import BaseObject, {getChangeEventType} from './Object.js'; +import EventType from './events/EventType.js'; +import {assert} from './asserts.js'; +import {listen, unlistenByKey} from './events.js'; + +/** + * @typedef {typeof Feature|typeof import("./render/Feature.js").default} FeatureClass + */ + +/** + * @typedef {Feature|import("./render/Feature.js").default} FeatureLike + */ + +/** + * @classdesc + * A vector object for geographic features with a geometry and other + * attribute properties, similar to the features in vector file formats like + * GeoJSON. + * + * Features can be styled individually with `setStyle`; otherwise they use the + * style of their vector layer. + * + * Note that attribute properties are set as {@link module:ol/Object} properties on + * the feature object, so they are observable, and have get/set accessors. + * + * Typically, a feature has a single geometry property. You can set the + * geometry using the `setGeometry` method and get it with `getGeometry`. + * It is possible to store more than one geometry on a feature using attribute + * properties. By default, the geometry used for rendering is identified by + * the property name `geometry`. If you want to use another geometry property + * for rendering, use the `setGeometryName` method to change the attribute + * property associated with the geometry for the feature. For example: + * + * ```js + * + * import Feature from 'ol/Feature'; + * import Polygon from 'ol/geom/Polygon'; + * import Point from 'ol/geom/Point'; + * + * var feature = new Feature({ + * geometry: new Polygon(polyCoords), + * labelPoint: new Point(labelCoords), + * name: 'My Polygon' + * }); + * + * // get the polygon geometry + * var poly = feature.getGeometry(); + * + * // Render the feature as a point using the coordinates from labelPoint + * feature.setGeometryName('labelPoint'); + * + * // get the point geometry + * var point = feature.getGeometry(); + * ``` + * + * @api + * @template {import("./geom/Geometry.js").default} Geometry + */ +class Feature extends BaseObject { + /** + * @param {Geometry|Object=} opt_geometryOrProperties + * You may pass a Geometry object directly, or an object literal containing + * properties. If you pass an object literal, you may include a Geometry + * associated with a `geometry` key. + */ + constructor(opt_geometryOrProperties) { + super(); + + /** + * @private + * @type {number|string|undefined} + */ + this.id_ = undefined; + + /** + * @type {string} + * @private + */ + this.geometryName_ = 'geometry'; + + /** + * User provided style. + * @private + * @type {import("./style/Style.js").StyleLike} + */ + this.style_ = null; + + /** + * @private + * @type {import("./style/Style.js").StyleFunction|undefined} + */ + this.styleFunction_ = undefined; + + /** + * @private + * @type {?import("./events.js").EventsKey} + */ + this.geometryChangeKey_ = null; + + this.addEventListener( + getChangeEventType(this.geometryName_), + this.handleGeometryChanged_ + ); + + if (opt_geometryOrProperties) { + if ( + typeof ( + /** @type {?} */ (opt_geometryOrProperties).getSimplifiedGeometry + ) === 'function' + ) { + const geometry = /** @type {Geometry} */ (opt_geometryOrProperties); + this.setGeometry(geometry); + } else { + /** @type {Object} */ + const properties = opt_geometryOrProperties; + this.setProperties(properties); + } + } + } + + /** + * Clone this feature. If the original feature has a geometry it + * is also cloned. The feature id is not set in the clone. + * @return {Feature} The clone. + * @api + */ + clone() { + const clone = new Feature( + this.hasProperties() ? this.getProperties() : null + ); + clone.setGeometryName(this.getGeometryName()); + const geometry = this.getGeometry(); + if (geometry) { + clone.setGeometry(geometry.clone()); + } + const style = this.getStyle(); + if (style) { + clone.setStyle(style); + } + return clone; + } + + /** + * Get the feature's default geometry. A feature may have any number of named + * geometries. The "default" geometry (the one that is rendered by default) is + * set when calling {@link module:ol/Feature~Feature#setGeometry}. + * @return {Geometry|undefined} The default geometry for the feature. + * @api + * @observable + */ + getGeometry() { + return /** @type {Geometry|undefined} */ (this.get(this.geometryName_)); + } + + /** + * Get the feature identifier. This is a stable identifier for the feature and + * is either set when reading data from a remote source or set explicitly by + * calling {@link module:ol/Feature~Feature#setId}. + * @return {number|string|undefined} Id. + * @api + */ + getId() { + return this.id_; + } + + /** + * Get the name of the feature's default geometry. By default, the default + * geometry is named `geometry`. + * @return {string} Get the property name associated with the default geometry + * for this feature. + * @api + */ + getGeometryName() { + return this.geometryName_; + } + + /** + * Get the feature's style. Will return what was provided to the + * {@link module:ol/Feature~Feature#setStyle} method. + * @return {import("./style/Style.js").StyleLike|undefined} The feature style. + * @api + */ + getStyle() { + return this.style_; + } + + /** + * Get the feature's style function. + * @return {import("./style/Style.js").StyleFunction|undefined} Return a function + * representing the current style of this feature. + * @api + */ + getStyleFunction() { + return this.styleFunction_; + } + + /** + * @private + */ + handleGeometryChange_() { + this.changed(); + } + + /** + * @private + */ + handleGeometryChanged_() { + if (this.geometryChangeKey_) { + unlistenByKey(this.geometryChangeKey_); + this.geometryChangeKey_ = null; + } + const geometry = this.getGeometry(); + if (geometry) { + this.geometryChangeKey_ = listen( + geometry, + EventType.CHANGE, + this.handleGeometryChange_, + this + ); + } + this.changed(); + } + + /** + * Set the default geometry for the feature. This will update the property + * with the name returned by {@link module:ol/Feature~Feature#getGeometryName}. + * @param {Geometry|undefined} geometry The new geometry. + * @api + * @observable + */ + setGeometry(geometry) { + this.set(this.geometryName_, geometry); + } + + /** + * Set the style for the feature to override the layer style. This can be a + * single style object, an array of styles, or a function that takes a + * resolution and returns an array of styles. To unset the feature style, call + * `setStyle()` without arguments or a falsey value. + * @param {import("./style/Style.js").StyleLike=} opt_style Style for this feature. + * @api + * @fires module:ol/events/Event~BaseEvent#event:change + */ + setStyle(opt_style) { + this.style_ = opt_style; + this.styleFunction_ = !opt_style + ? undefined + : createStyleFunction(opt_style); + this.changed(); + } + + /** + * Set the feature id. The feature id is considered stable and may be used when + * requesting features or comparing identifiers returned from a remote source. + * The feature id can be used with the + * {@link module:ol/source/Vector~VectorSource#getFeatureById} method. + * @param {number|string|undefined} id The feature id. + * @api + * @fires module:ol/events/Event~BaseEvent#event:change + */ + setId(id) { + this.id_ = id; + this.changed(); + } + + /** + * Set the property name to be used when getting the feature's default geometry. + * When calling {@link module:ol/Feature~Feature#getGeometry}, the value of the property with + * this name will be returned. + * @param {string} name The property name of the default geometry. + * @api + */ + setGeometryName(name) { + this.removeEventListener( + getChangeEventType(this.geometryName_), + this.handleGeometryChanged_ + ); + this.geometryName_ = name; + this.addEventListener( + getChangeEventType(this.geometryName_), + this.handleGeometryChanged_ + ); + this.handleGeometryChanged_(); + } +} + +/** + * Convert the provided object into a feature style function. Functions passed + * through unchanged. Arrays of Style or single style objects wrapped + * in a new feature style function. + * @param {!import("./style/Style.js").StyleFunction|!Array|!import("./style/Style.js").default} obj + * A feature style function, a single style, or an array of styles. + * @return {import("./style/Style.js").StyleFunction} A style function. + */ +export function createStyleFunction(obj) { + if (typeof obj === 'function') { + return obj; + } else { + /** + * @type {Array} + */ + let styles; + if (Array.isArray(obj)) { + styles = obj; + } else { + assert(typeof (/** @type {?} */ (obj).getZIndex) === 'function', 41); // Expected an `import("./style/Style.js").Style` or an array of `import("./style/Style.js").Style` + const style = /** @type {import("./style/Style.js").default} */ (obj); + styles = [style]; + } + return function () { + return styles; + }; + } +} +export default Feature; \ No newline at end of file diff --git a/src/mapboxgl/theme/common/format/GML.js b/src/mapboxgl/theme/common/format/GML.js new file mode 100644 index 000000000..8b24bdd5b --- /dev/null +++ b/src/mapboxgl/theme/common/format/GML.js @@ -0,0 +1,40 @@ +/** + * @module ol/format/GML + */ +import GML3 from './GML3.js'; + +/** + * @classdesc + * Feature format for reading and writing data in the GML format + * version 3.1.1. + * Currently only supports GML 3.1.1 Simple Features profile. + * + * @param {import("./GMLBase.js").Options=} opt_options + * Optional configuration object. + * @api + */ +const GML = GML3; + +/** + * Encode an array of features in GML 3.1.1 Simple Features. + * + * @function + * @param {Array} features Features. + * @param {import("./Feature.js").WriteOptions=} opt_options Options. + * @return {string} Result. + * @api + */ +GML.prototype.writeFeatures; + +/** + * Encode an array of features in the GML 3.1.1 format as an XML node. + * + * @function + * @param {Array} features Features. + * @param {import("./Feature.js").WriteOptions=} opt_options Options. + * @return {Node} Node. + * @api + */ +GML.prototype.writeFeaturesNode; + +export default GML; \ No newline at end of file diff --git a/src/mapboxgl/theme/common/format/GML2.js b/src/mapboxgl/theme/common/format/GML2.js new file mode 100644 index 000000000..8010eaec0 --- /dev/null +++ b/src/mapboxgl/theme/common/format/GML2.js @@ -0,0 +1,785 @@ +/** + * @module ol/format/GML2 + */ +import GMLBase, {GMLNS} from './GMLBase.js'; +import { + OBJECT_PROPERTY_NODE_FACTORY, + createElementNS, + getAllTextContent, + makeArrayPusher, + makeChildAppender, + makeReplacer, + makeSimpleNodeFactory, + pushParseAndPop, + pushSerializeAndPop, +} from './util/xml.js'; +import {assign} from './util/obj.js'; +import {createOrUpdate} from '../extent.js'; +import {get as getProjection} from '../proj.js'; +import { + transformExtentWithOptions, + transformGeometryWithOptions, +} from './Feature.js'; +import {writeStringTextNode} from './xsd.js'; + +/** + * @const + * @type {string} + */ +const schemaLocation = + GMLNS + ' http://schemas.opengis.net/gml/2.1.2/feature.xsd'; + +/** + * @const + * @type {Object} + */ +const MULTIGEOMETRY_TO_MEMBER_NODENAME = { + 'MultiLineString': 'lineStringMember', + 'MultiCurve': 'curveMember', + 'MultiPolygon': 'polygonMember', + 'MultiSurface': 'surfaceMember', +}; + +/** + * @classdesc + * Feature format for reading and writing data in the GML format, + * version 2.1.2. + * + * @api + */ +class GML2 extends GMLBase { + /** + * @param {import("./GMLBase.js").Options=} opt_options Optional configuration object. + */ + constructor(opt_options) { + const options = + /** @type {import("./GMLBase.js").Options} */ + (opt_options ? opt_options : {}); + + super(options); + + this.FEATURE_COLLECTION_PARSERS[GMLNS]['featureMember'] = makeArrayPusher( + this.readFeaturesInternal + ); + + /** + * @type {string} + */ + this.schemaLocation = options.schemaLocation + ? options.schemaLocation + : schemaLocation; + } + + /** + * @param {Node} node Node. + * @param {Array<*>} objectStack Object stack. + * @return {Array|undefined} Flat coordinates. + */ + readFlatCoordinates(node, objectStack) { + const s = getAllTextContent(node, false).replace(/^\s*|\s*$/g, ''); + const context = /** @type {import("../xml.js").NodeStackItem} */ (objectStack[0]); + const containerSrs = context['srsName']; + let axisOrientation = 'enu'; + if (containerSrs) { + const proj = getProjection(containerSrs); + if (proj) { + axisOrientation = proj.getAxisOrientation(); + } + } + const coordsGroups = s.trim().split(/\s+/); + const flatCoordinates = []; + for (let i = 0, ii = coordsGroups.length; i < ii; i++) { + const coords = coordsGroups[i].split(/,+/); + const x = parseFloat(coords[0]); + const y = parseFloat(coords[1]); + const z = coords.length === 3 ? parseFloat(coords[2]) : 0; + if (axisOrientation.substr(0, 2) === 'en') { + flatCoordinates.push(x, y, z); + } else { + flatCoordinates.push(y, x, z); + } + } + return flatCoordinates; + } + + /** + * @param {Element} node Node. + * @param {Array<*>} objectStack Object stack. + * @return {import("../extent.js").Extent|undefined} Envelope. + */ + readBox(node, objectStack) { + /** @type {Array} */ + const flatCoordinates = pushParseAndPop( + [null], + this.BOX_PARSERS_, + node, + objectStack, + this + ); + return createOrUpdate( + flatCoordinates[1][0], + flatCoordinates[1][1], + flatCoordinates[1][3], + flatCoordinates[1][4] + ); + } + + /** + * @param {Element} node Node. + * @param {Array<*>} objectStack Object stack. + */ + innerBoundaryIsParser(node, objectStack) { + /** @type {Array|undefined} */ + const flatLinearRing = pushParseAndPop( + undefined, + this.RING_PARSERS, + node, + objectStack, + this + ); + if (flatLinearRing) { + const flatLinearRings = + /** @type {Array>} */ + (objectStack[objectStack.length - 1]); + flatLinearRings.push(flatLinearRing); + } + } + + /** + * @param {Element} node Node. + * @param {Array<*>} objectStack Object stack. + */ + outerBoundaryIsParser(node, objectStack) { + /** @type {Array|undefined} */ + const flatLinearRing = pushParseAndPop( + undefined, + this.RING_PARSERS, + node, + objectStack, + this + ); + if (flatLinearRing) { + const flatLinearRings = + /** @type {Array>} */ + (objectStack[objectStack.length - 1]); + flatLinearRings[0] = flatLinearRing; + } + } + + /** + * @const + * @param {*} value Value. + * @param {Array<*>} objectStack Object stack. + * @param {string=} opt_nodeName Node name. + * @return {Element|undefined} Node. + * @private + */ + GEOMETRY_NODE_FACTORY_(value, objectStack, opt_nodeName) { + const context = objectStack[objectStack.length - 1]; + const multiSurface = context['multiSurface']; + const surface = context['surface']; + const multiCurve = context['multiCurve']; + let nodeName; + if (!Array.isArray(value)) { + nodeName = /** @type {import("../geom/Geometry.js").default} */ (value).getType(); + if (nodeName === 'MultiPolygon' && multiSurface === true) { + nodeName = 'MultiSurface'; + } else if (nodeName === 'Polygon' && surface === true) { + nodeName = 'Surface'; + } else if (nodeName === 'MultiLineString' && multiCurve === true) { + nodeName = 'MultiCurve'; + } + } else { + nodeName = 'Envelope'; + } + return createElementNS('http://www.opengis.net/gml', nodeName); + } + + /** + * @param {Element} node Node. + * @param {import("../Feature.js").default} feature Feature. + * @param {Array<*>} objectStack Node stack. + */ + writeFeatureElement(node, feature, objectStack) { + const fid = feature.getId(); + if (fid) { + node.setAttribute('fid', /** @type {string} */ (fid)); + } + const context = /** @type {Object} */ (objectStack[objectStack.length - 1]); + const featureNS = context['featureNS']; + const geometryName = feature.getGeometryName(); + if (!context.serializers) { + context.serializers = {}; + context.serializers[featureNS] = {}; + } + const keys = []; + const values = []; + if (feature.hasProperties()) { + const properties = feature.getProperties(); + for (const key in properties) { + const value = properties[key]; + if (value !== null) { + keys.push(key); + values.push(value); + if ( + key == geometryName || + typeof (/** @type {?} */ (value).getSimplifiedGeometry) === + 'function' + ) { + if (!(key in context.serializers[featureNS])) { + context.serializers[featureNS][key] = makeChildAppender( + this.writeGeometryElement, + this + ); + } + } else { + if (!(key in context.serializers[featureNS])) { + context.serializers[featureNS][key] = makeChildAppender( + writeStringTextNode + ); + } + } + } + } + } + const item = assign({}, context); + item.node = node; + pushSerializeAndPop( + /** @type {import("../xml.js").NodeStackItem} */ + (item), + context.serializers, + makeSimpleNodeFactory(undefined, featureNS), + values, + objectStack, + keys + ); + } + + /** + * @param {Element} node Node. + * @param {import("../geom/LineString.js").default} geometry LineString geometry. + * @param {Array<*>} objectStack Node stack. + */ + writeCurveOrLineString(node, geometry, objectStack) { + const context = objectStack[objectStack.length - 1]; + const srsName = context['srsName']; + if (node.nodeName !== 'LineStringSegment' && srsName) { + node.setAttribute('srsName', srsName); + } + if ( + node.nodeName === 'LineString' || + node.nodeName === 'LineStringSegment' + ) { + const coordinates = this.createCoordinatesNode_(node.namespaceURI); + node.appendChild(coordinates); + this.writeCoordinates_(coordinates, geometry, objectStack); + } else if (node.nodeName === 'Curve') { + const segments = createElementNS(node.namespaceURI, 'segments'); + node.appendChild(segments); + this.writeCurveSegments_(segments, geometry, objectStack); + } + } + + /** + * @param {Element} node Node. + * @param {import("../geom/LineString.js").default} line LineString geometry. + * @param {Array<*>} objectStack Node stack. + */ + writeLineStringOrCurveMember(node, line, objectStack) { + const child = this.GEOMETRY_NODE_FACTORY_(line, objectStack); + if (child) { + node.appendChild(child); + this.writeCurveOrLineString(child, line, objectStack); + } + } + + /** + * @param {Element} node Node. + * @param {import("../geom/MultiLineString.js").default} geometry MultiLineString geometry. + * @param {Array<*>} objectStack Node stack. + */ + writeMultiCurveOrLineString(node, geometry, objectStack) { + const context = objectStack[objectStack.length - 1]; + const hasZ = context['hasZ']; + const srsName = context['srsName']; + const curve = context['curve']; + if (srsName) { + node.setAttribute('srsName', srsName); + } + const lines = geometry.getLineStrings(); + pushSerializeAndPop( + {node: node, hasZ: hasZ, srsName: srsName, curve: curve}, + this.LINESTRINGORCURVEMEMBER_SERIALIZERS, + this.MULTIGEOMETRY_MEMBER_NODE_FACTORY_, + lines, + objectStack, + undefined, + this + ); + } + + /** + * @param {Node} node Node. + * @param {import("../geom/Geometry.js").default|import("../extent.js").Extent} geometry Geometry. + * @param {Array<*>} objectStack Node stack. + */ + writeGeometryElement(node, geometry, objectStack) { + const context = /** @type {import("./Feature.js").WriteOptions} */ (objectStack[ + objectStack.length - 1 + ]); + const item = assign({}, context); + item['node'] = node; + let value; + if (Array.isArray(geometry)) { + value = transformExtentWithOptions( + /** @type {import("../extent.js").Extent} */ (geometry), + context + ); + } else { + value = transformGeometryWithOptions( + /** @type {import("../geom/Geometry.js").default} */ (geometry), + true, + context + ); + } + pushSerializeAndPop( + /** @type {import("../xml.js").NodeStackItem} */ + (item), + this.GEOMETRY_SERIALIZERS, + this.GEOMETRY_NODE_FACTORY_, + [value], + objectStack, + undefined, + this + ); + } + + /** + * @param {string} namespaceURI XML namespace. + * @return {Element} coordinates node. + * @private + */ + createCoordinatesNode_(namespaceURI) { + const coordinates = createElementNS(namespaceURI, 'coordinates'); + coordinates.setAttribute('decimal', '.'); + coordinates.setAttribute('cs', ','); + coordinates.setAttribute('ts', ' '); + + return coordinates; + } + + /** + * @param {Node} node Node. + * @param {import("../geom/LineString.js").default|import("../geom/LinearRing.js").default} value Geometry. + * @param {Array<*>} objectStack Node stack. + * @private + */ + writeCoordinates_(node, value, objectStack) { + const context = objectStack[objectStack.length - 1]; + const hasZ = context['hasZ']; + const srsName = context['srsName']; + // only 2d for simple features profile + const points = value.getCoordinates(); + const len = points.length; + const parts = new Array(len); + for (let i = 0; i < len; ++i) { + const point = points[i]; + parts[i] = this.getCoords_(point, srsName, hasZ); + } + writeStringTextNode(node, parts.join(' ')); + } + + /** + * @param {Node} node Node. + * @param {import("../geom/LineString.js").default} line LineString geometry. + * @param {Array<*>} objectStack Node stack. + * @private + */ + writeCurveSegments_(node, line, objectStack) { + const child = createElementNS(node.namespaceURI, 'LineStringSegment'); + node.appendChild(child); + this.writeCurveOrLineString(child, line, objectStack); + } + + /** + * @param {Element} node Node. + * @param {import("../geom/Polygon.js").default} geometry Polygon geometry. + * @param {Array<*>} objectStack Node stack. + */ + writeSurfaceOrPolygon(node, geometry, objectStack) { + const context = objectStack[objectStack.length - 1]; + const hasZ = context['hasZ']; + const srsName = context['srsName']; + if (node.nodeName !== 'PolygonPatch' && srsName) { + node.setAttribute('srsName', srsName); + } + if (node.nodeName === 'Polygon' || node.nodeName === 'PolygonPatch') { + const rings = geometry.getLinearRings(); + pushSerializeAndPop( + {node: node, hasZ: hasZ, srsName: srsName}, + this.RING_SERIALIZERS, + this.RING_NODE_FACTORY_, + rings, + objectStack, + undefined, + this + ); + } else if (node.nodeName === 'Surface') { + const patches = createElementNS(node.namespaceURI, 'patches'); + node.appendChild(patches); + this.writeSurfacePatches_(patches, geometry, objectStack); + } + } + + /** + * @param {*} value Value. + * @param {Array<*>} objectStack Object stack. + * @param {string=} opt_nodeName Node name. + * @return {Node} Node. + * @private + */ + RING_NODE_FACTORY_(value, objectStack, opt_nodeName) { + const context = objectStack[objectStack.length - 1]; + const parentNode = context.node; + const exteriorWritten = context['exteriorWritten']; + if (exteriorWritten === undefined) { + context['exteriorWritten'] = true; + } + return createElementNS( + parentNode.namespaceURI, + exteriorWritten !== undefined ? 'innerBoundaryIs' : 'outerBoundaryIs' + ); + } + + /** + * @param {Node} node Node. + * @param {import("../geom/Polygon.js").default} polygon Polygon geometry. + * @param {Array<*>} objectStack Node stack. + * @private + */ + writeSurfacePatches_(node, polygon, objectStack) { + const child = createElementNS(node.namespaceURI, 'PolygonPatch'); + node.appendChild(child); + this.writeSurfaceOrPolygon(child, polygon, objectStack); + } + + /** + * @param {Node} node Node. + * @param {import("../geom/LinearRing.js").default} ring LinearRing geometry. + * @param {Array<*>} objectStack Node stack. + */ + writeRing(node, ring, objectStack) { + const linearRing = createElementNS(node.namespaceURI, 'LinearRing'); + node.appendChild(linearRing); + this.writeLinearRing(linearRing, ring, objectStack); + } + + /** + * @param {Array} point Point geometry. + * @param {string=} opt_srsName Optional srsName + * @param {boolean=} opt_hasZ whether the geometry has a Z coordinate (is 3D) or not. + * @return {string} The coords string. + * @private + */ + getCoords_(point, opt_srsName, opt_hasZ) { + let axisOrientation = 'enu'; + if (opt_srsName) { + axisOrientation = getProjection(opt_srsName).getAxisOrientation(); + } + let coords = + axisOrientation.substr(0, 2) === 'en' + ? point[0] + ',' + point[1] + : point[1] + ',' + point[0]; + if (opt_hasZ) { + // For newly created points, Z can be undefined. + const z = point[2] || 0; + coords += ',' + z; + } + + return coords; + } + + /** + * @param {Element} node Node. + * @param {import("../geom/Point.js").default} geometry Point geometry. + * @param {Array<*>} objectStack Node stack. + */ + writePoint(node, geometry, objectStack) { + const context = objectStack[objectStack.length - 1]; + const hasZ = context['hasZ']; + const srsName = context['srsName']; + if (srsName) { + node.setAttribute('srsName', srsName); + } + const coordinates = this.createCoordinatesNode_(node.namespaceURI); + node.appendChild(coordinates); + const point = geometry.getCoordinates(); + const coord = this.getCoords_(point, srsName, hasZ); + writeStringTextNode(coordinates, coord); + } + + /** + * @param {Element} node Node. + * @param {import("../geom/MultiPoint.js").default} geometry MultiPoint geometry. + * @param {Array<*>} objectStack Node stack. + */ + writeMultiPoint(node, geometry, objectStack) { + const context = objectStack[objectStack.length - 1]; + const hasZ = context['hasZ']; + const srsName = context['srsName']; + if (srsName) { + node.setAttribute('srsName', srsName); + } + const points = geometry.getPoints(); + pushSerializeAndPop( + {node: node, hasZ: hasZ, srsName: srsName}, + this.POINTMEMBER_SERIALIZERS, + makeSimpleNodeFactory('pointMember'), + points, + objectStack, + undefined, + this + ); + } + + /** + * @param {Node} node Node. + * @param {import("../geom/Point.js").default} point Point geometry. + * @param {Array<*>} objectStack Node stack. + */ + writePointMember(node, point, objectStack) { + const child = createElementNS(node.namespaceURI, 'Point'); + node.appendChild(child); + this.writePoint(child, point, objectStack); + } + + /** + * @param {Element} node Node. + * @param {import("../geom/LinearRing.js").default} geometry LinearRing geometry. + * @param {Array<*>} objectStack Node stack. + */ + writeLinearRing(node, geometry, objectStack) { + const context = objectStack[objectStack.length - 1]; + const srsName = context['srsName']; + if (srsName) { + node.setAttribute('srsName', srsName); + } + const coordinates = this.createCoordinatesNode_(node.namespaceURI); + node.appendChild(coordinates); + this.writeCoordinates_(coordinates, geometry, objectStack); + } + + /** + * @param {Element} node Node. + * @param {import("../geom/MultiPolygon.js").default} geometry MultiPolygon geometry. + * @param {Array<*>} objectStack Node stack. + */ + writeMultiSurfaceOrPolygon(node, geometry, objectStack) { + const context = objectStack[objectStack.length - 1]; + const hasZ = context['hasZ']; + const srsName = context['srsName']; + const surface = context['surface']; + if (srsName) { + node.setAttribute('srsName', srsName); + } + const polygons = geometry.getPolygons(); + pushSerializeAndPop( + {node: node, hasZ: hasZ, srsName: srsName, surface: surface}, + this.SURFACEORPOLYGONMEMBER_SERIALIZERS, + this.MULTIGEOMETRY_MEMBER_NODE_FACTORY_, + polygons, + objectStack, + undefined, + this + ); + } + + /** + * @param {Node} node Node. + * @param {import("../geom/Polygon.js").default} polygon Polygon geometry. + * @param {Array<*>} objectStack Node stack. + */ + writeSurfaceOrPolygonMember(node, polygon, objectStack) { + const child = this.GEOMETRY_NODE_FACTORY_(polygon, objectStack); + if (child) { + node.appendChild(child); + this.writeSurfaceOrPolygon(child, polygon, objectStack); + } + } + + /** + * @param {Element} node Node. + * @param {import("../extent.js").Extent} extent Extent. + * @param {Array<*>} objectStack Node stack. + */ + writeEnvelope(node, extent, objectStack) { + const context = objectStack[objectStack.length - 1]; + const srsName = context['srsName']; + if (srsName) { + node.setAttribute('srsName', srsName); + } + const keys = ['lowerCorner', 'upperCorner']; + const values = [extent[0] + ' ' + extent[1], extent[2] + ' ' + extent[3]]; + pushSerializeAndPop( + /** @type {import("../xml.js").NodeStackItem} */ + ({node: node}), + this.ENVELOPE_SERIALIZERS, + OBJECT_PROPERTY_NODE_FACTORY, + values, + objectStack, + keys, + this + ); + } + + /** + * @const + * @param {*} value Value. + * @param {Array<*>} objectStack Object stack. + * @param {string=} opt_nodeName Node name. + * @return {Node|undefined} Node. + * @private + */ + MULTIGEOMETRY_MEMBER_NODE_FACTORY_(value, objectStack, opt_nodeName) { + const parentNode = objectStack[objectStack.length - 1].node; + return createElementNS( + 'http://www.opengis.net/gml', + MULTIGEOMETRY_TO_MEMBER_NODENAME[parentNode.nodeName] + ); + } +} + +/** + * @const + * @type {Object>} + */ +GML2.prototype.GEOMETRY_FLAT_COORDINATES_PARSERS = { + 'http://www.opengis.net/gml': { + 'coordinates': makeReplacer(GML2.prototype.readFlatCoordinates), + }, +}; + +/** + * @const + * @type {Object>} + */ +GML2.prototype.FLAT_LINEAR_RINGS_PARSERS = { + 'http://www.opengis.net/gml': { + 'innerBoundaryIs': GML2.prototype.innerBoundaryIsParser, + 'outerBoundaryIs': GML2.prototype.outerBoundaryIsParser, + }, +}; + +/** + * @const + * @type {Object>} + */ +GML2.prototype.BOX_PARSERS_ = { + 'http://www.opengis.net/gml': { + 'coordinates': makeArrayPusher(GML2.prototype.readFlatCoordinates), + }, +}; + +/** + * @const + * @type {Object>} + */ +GML2.prototype.GEOMETRY_PARSERS = { + 'http://www.opengis.net/gml': { + 'Point': makeReplacer(GMLBase.prototype.readPoint), + 'MultiPoint': makeReplacer(GMLBase.prototype.readMultiPoint), + 'LineString': makeReplacer(GMLBase.prototype.readLineString), + 'MultiLineString': makeReplacer(GMLBase.prototype.readMultiLineString), + 'LinearRing': makeReplacer(GMLBase.prototype.readLinearRing), + 'Polygon': makeReplacer(GMLBase.prototype.readPolygon), + 'MultiPolygon': makeReplacer(GMLBase.prototype.readMultiPolygon), + 'Box': makeReplacer(GML2.prototype.readBox), + }, +}; + +/** + * @const + * @type {Object>} + */ +GML2.prototype.GEOMETRY_SERIALIZERS = { + 'http://www.opengis.net/gml': { + 'Curve': makeChildAppender(GML2.prototype.writeCurveOrLineString), + 'MultiCurve': makeChildAppender(GML2.prototype.writeMultiCurveOrLineString), + 'Point': makeChildAppender(GML2.prototype.writePoint), + 'MultiPoint': makeChildAppender(GML2.prototype.writeMultiPoint), + 'LineString': makeChildAppender(GML2.prototype.writeCurveOrLineString), + 'MultiLineString': makeChildAppender( + GML2.prototype.writeMultiCurveOrLineString + ), + 'LinearRing': makeChildAppender(GML2.prototype.writeLinearRing), + 'Polygon': makeChildAppender(GML2.prototype.writeSurfaceOrPolygon), + 'MultiPolygon': makeChildAppender( + GML2.prototype.writeMultiSurfaceOrPolygon + ), + 'Surface': makeChildAppender(GML2.prototype.writeSurfaceOrPolygon), + 'MultiSurface': makeChildAppender( + GML2.prototype.writeMultiSurfaceOrPolygon + ), + 'Envelope': makeChildAppender(GML2.prototype.writeEnvelope), + }, +}; + +/** + * @type {Object>} + */ +GML2.prototype.LINESTRINGORCURVEMEMBER_SERIALIZERS = { + 'http://www.opengis.net/gml': { + 'lineStringMember': makeChildAppender( + GML2.prototype.writeLineStringOrCurveMember + ), + 'curveMember': makeChildAppender( + GML2.prototype.writeLineStringOrCurveMember + ), + }, +}; + +/** + * @type {Object>} + */ +GML2.prototype.RING_SERIALIZERS = { + 'http://www.opengis.net/gml': { + 'outerBoundaryIs': makeChildAppender(GML2.prototype.writeRing), + 'innerBoundaryIs': makeChildAppender(GML2.prototype.writeRing), + }, +}; + +/** + * @type {Object>} + */ +GML2.prototype.POINTMEMBER_SERIALIZERS = { + 'http://www.opengis.net/gml': { + 'pointMember': makeChildAppender(GML2.prototype.writePointMember), + }, +}; + +/** + * @const + * @type {Object>} + */ +GML2.prototype.SURFACEORPOLYGONMEMBER_SERIALIZERS = { + 'http://www.opengis.net/gml': { + 'surfaceMember': makeChildAppender( + GML2.prototype.writeSurfaceOrPolygonMember + ), + 'polygonMember': makeChildAppender( + GML2.prototype.writeSurfaceOrPolygonMember + ), + }, +}; + +/** + * @type {Object>} + */ +GML2.prototype.ENVELOPE_SERIALIZERS = { + 'http://www.opengis.net/gml': { + 'lowerCorner': makeChildAppender(writeStringTextNode), + 'upperCorner': makeChildAppender(writeStringTextNode), + }, +}; + +export default GML2; \ No newline at end of file diff --git a/src/mapboxgl/theme/common/format/GML3.js b/src/mapboxgl/theme/common/format/GML3.js new file mode 100644 index 000000000..d34ab2790 --- /dev/null +++ b/src/mapboxgl/theme/common/format/GML3.js @@ -0,0 +1,1261 @@ +/** + * @module ol/format/GML3 + */ +import GML2 from './GML2.js'; +import GMLBase, {GMLNS} from './GMLBase.js'; +import GeometryLayout from '../geom/GeometryLayout.js'; +import LineString from '../geom/LineString.js'; +import MultiLineString from '../geom/MultiLineString.js'; +import MultiPolygon from '../geom/MultiPolygon.js'; +import Polygon from '../geom/Polygon.js'; +import { + OBJECT_PROPERTY_NODE_FACTORY, + XML_SCHEMA_INSTANCE_URI, + createElementNS, + getAllTextContent, + makeArrayPusher, + makeChildAppender, + makeReplacer, + makeSimpleNodeFactory, + parseNode, + pushParseAndPop, + pushSerializeAndPop, +} from '../xml.js'; +import {assign} from '../obj.js'; +import {createOrUpdate} from '../extent.js'; +import {extend} from '../array.js'; +import {get as getProjection} from '../proj.js'; +import {readNonNegativeIntegerString, writeStringTextNode} from './xsd.js'; +import { + transformExtentWithOptions, + transformGeometryWithOptions, +} from './Feature.js'; + +/** + * @const + * @type {string} + * @private + */ +const schemaLocation = + GMLNS + + ' http://schemas.opengis.net/gml/3.1.1/profiles/gmlsfProfile/' + + '1.0.0/gmlsf.xsd'; + +/** + * @const + * @type {Object} + */ +const MULTIGEOMETRY_TO_MEMBER_NODENAME = { + 'MultiLineString': 'lineStringMember', + 'MultiCurve': 'curveMember', + 'MultiPolygon': 'polygonMember', + 'MultiSurface': 'surfaceMember', +}; + +/** + * @classdesc + * Feature format for reading and writing data in the GML format + * version 3.1.1. + * Currently only supports GML 3.1.1 Simple Features profile. + * + * @api + */ +class GML3 extends GMLBase { + /** + * @param {import("./GMLBase.js").Options=} opt_options Optional configuration object. + */ + constructor(opt_options) { + const options = + /** @type {import("./GMLBase.js").Options} */ + (opt_options ? opt_options : {}); + + super(options); + + /** + * @private + * @type {boolean} + */ + this.surface_ = options.surface !== undefined ? options.surface : false; + + /** + * @private + * @type {boolean} + */ + this.curve_ = options.curve !== undefined ? options.curve : false; + + /** + * @private + * @type {boolean} + */ + this.multiCurve_ = + options.multiCurve !== undefined ? options.multiCurve : true; + + /** + * @private + * @type {boolean} + */ + this.multiSurface_ = + options.multiSurface !== undefined ? options.multiSurface : true; + + /** + * @type {string} + */ + this.schemaLocation = options.schemaLocation + ? options.schemaLocation + : schemaLocation; + + /** + * @private + * @type {boolean} + */ + this.hasZ = options.hasZ !== undefined ? options.hasZ : false; + } + + /** + * @param {Element} node Node. + * @param {Array<*>} objectStack Object stack. + * @return {MultiLineString|undefined} MultiLineString. + */ + readMultiCurve(node, objectStack) { + /** @type {Array} */ + const lineStrings = pushParseAndPop( + [], + this.MULTICURVE_PARSERS, + node, + objectStack, + this + ); + if (lineStrings) { + const multiLineString = new MultiLineString(lineStrings); + return multiLineString; + } else { + return undefined; + } + } + + /** + * @param {Element} node Node. + * @param {Array<*>} objectStack Object stack. + * @return {MultiPolygon|undefined} MultiPolygon. + */ + readMultiSurface(node, objectStack) { + /** @type {Array} */ + const polygons = pushParseAndPop( + [], + this.MULTISURFACE_PARSERS, + node, + objectStack, + this + ); + if (polygons) { + return new MultiPolygon(polygons); + } + } + + /** + * @param {Element} node Node. + * @param {Array<*>} objectStack Object stack. + */ + curveMemberParser(node, objectStack) { + parseNode(this.CURVEMEMBER_PARSERS, node, objectStack, this); + } + + /** + * @param {Element} node Node. + * @param {Array<*>} objectStack Object stack. + */ + surfaceMemberParser(node, objectStack) { + parseNode(this.SURFACEMEMBER_PARSERS, node, objectStack, this); + } + + /** + * @param {Element} node Node. + * @param {Array<*>} objectStack Object stack. + * @return {Array<(Array)>|undefined} flat coordinates. + */ + readPatch(node, objectStack) { + return pushParseAndPop( + [null], + this.PATCHES_PARSERS, + node, + objectStack, + this + ); + } + + /** + * @param {Element} node Node. + * @param {Array<*>} objectStack Object stack. + * @return {Array|undefined} flat coordinates. + */ + readSegment(node, objectStack) { + return pushParseAndPop( + [null], + this.SEGMENTS_PARSERS, + node, + objectStack, + this + ); + } + + /** + * @param {Element} node Node. + * @param {Array<*>} objectStack Object stack. + * @return {Array<(Array)>|undefined} flat coordinates. + */ + readPolygonPatch(node, objectStack) { + return pushParseAndPop( + [null], + this.FLAT_LINEAR_RINGS_PARSERS, + node, + objectStack, + this + ); + } + + /** + * @param {Element} node Node. + * @param {Array<*>} objectStack Object stack. + * @return {Array|undefined} flat coordinates. + */ + readLineStringSegment(node, objectStack) { + return pushParseAndPop( + [null], + this.GEOMETRY_FLAT_COORDINATES_PARSERS, + node, + objectStack, + this + ); + } + + /** + * @param {Element} node Node. + * @param {Array<*>} objectStack Object stack. + */ + interiorParser(node, objectStack) { + /** @type {Array|undefined} */ + const flatLinearRing = pushParseAndPop( + undefined, + this.RING_PARSERS, + node, + objectStack, + this + ); + if (flatLinearRing) { + const flatLinearRings = + /** @type {Array>} */ + (objectStack[objectStack.length - 1]); + flatLinearRings.push(flatLinearRing); + } + } + + /** + * @param {Element} node Node. + * @param {Array<*>} objectStack Object stack. + */ + exteriorParser(node, objectStack) { + /** @type {Array|undefined} */ + const flatLinearRing = pushParseAndPop( + undefined, + this.RING_PARSERS, + node, + objectStack, + this + ); + if (flatLinearRing) { + const flatLinearRings = + /** @type {Array>} */ + (objectStack[objectStack.length - 1]); + flatLinearRings[0] = flatLinearRing; + } + } + + /** + * @param {Element} node Node. + * @param {Array<*>} objectStack Object stack. + * @return {Polygon|undefined} Polygon. + */ + readSurface(node, objectStack) { + /** @type {Array>} */ + const flatLinearRings = pushParseAndPop( + [null], + this.SURFACE_PARSERS, + node, + objectStack, + this + ); + if (flatLinearRings && flatLinearRings[0]) { + const flatCoordinates = flatLinearRings[0]; + const ends = [flatCoordinates.length]; + let i, ii; + for (i = 1, ii = flatLinearRings.length; i < ii; ++i) { + extend(flatCoordinates, flatLinearRings[i]); + ends.push(flatCoordinates.length); + } + return new Polygon(flatCoordinates, GeometryLayout.XYZ, ends); + } else { + return undefined; + } + } + + /** + * @param {Element} node Node. + * @param {Array<*>} objectStack Object stack. + * @return {LineString|undefined} LineString. + */ + readCurve(node, objectStack) { + /** @type {Array} */ + const flatCoordinates = pushParseAndPop( + [null], + this.CURVE_PARSERS, + node, + objectStack, + this + ); + if (flatCoordinates) { + const lineString = new LineString(flatCoordinates, GeometryLayout.XYZ); + return lineString; + } else { + return undefined; + } + } + + /** + * @param {Element} node Node. + * @param {Array<*>} objectStack Object stack. + * @return {import("../extent.js").Extent|undefined} Envelope. + */ + readEnvelope(node, objectStack) { + /** @type {Array} */ + const flatCoordinates = pushParseAndPop( + [null], + this.ENVELOPE_PARSERS, + node, + objectStack, + this + ); + return createOrUpdate( + flatCoordinates[1][0], + flatCoordinates[1][1], + flatCoordinates[2][0], + flatCoordinates[2][1] + ); + } + + /** + * @param {Node} node Node. + * @param {Array<*>} objectStack Object stack. + * @return {Array|undefined} Flat coordinates. + */ + readFlatPos(node, objectStack) { + let s = getAllTextContent(node, false); + const re = /^\s*([+\-]?\d*\.?\d+(?:[eE][+\-]?\d+)?)\s*/; + /** @type {Array} */ + const flatCoordinates = []; + let m; + while ((m = re.exec(s))) { + flatCoordinates.push(parseFloat(m[1])); + s = s.substr(m[0].length); + } + if (s !== '') { + return undefined; + } + const context = objectStack[0]; + const containerSrs = context['srsName']; + let axisOrientation = 'enu'; + if (containerSrs) { + const proj = getProjection(containerSrs); + axisOrientation = proj.getAxisOrientation(); + } + if (axisOrientation === 'neu') { + let i, ii; + for (i = 0, ii = flatCoordinates.length; i < ii; i += 3) { + const y = flatCoordinates[i]; + const x = flatCoordinates[i + 1]; + flatCoordinates[i] = x; + flatCoordinates[i + 1] = y; + } + } + const len = flatCoordinates.length; + if (len == 2) { + flatCoordinates.push(0); + } + if (len === 0) { + return undefined; + } + return flatCoordinates; + } + + /** + * @param {Element} node Node. + * @param {Array<*>} objectStack Object stack. + * @return {Array|undefined} Flat coordinates. + */ + readFlatPosList(node, objectStack) { + const s = getAllTextContent(node, false).replace(/^\s*|\s*$/g, ''); + const context = objectStack[0]; + const containerSrs = context['srsName']; + const contextDimension = context['srsDimension']; + let axisOrientation = 'enu'; + if (containerSrs) { + const proj = getProjection(containerSrs); + axisOrientation = proj.getAxisOrientation(); + } + const coords = s.split(/\s+/); + // The "dimension" attribute is from the GML 3.0.1 spec. + let dim = 2; + if (node.getAttribute('srsDimension')) { + dim = readNonNegativeIntegerString(node.getAttribute('srsDimension')); + } else if (node.getAttribute('dimension')) { + dim = readNonNegativeIntegerString(node.getAttribute('dimension')); + } else if ( + /** @type {Element} */ (node.parentNode).getAttribute('srsDimension') + ) { + dim = readNonNegativeIntegerString( + /** @type {Element} */ (node.parentNode).getAttribute('srsDimension') + ); + } else if (contextDimension) { + dim = readNonNegativeIntegerString(contextDimension); + } + let x, y, z; + const flatCoordinates = []; + for (let i = 0, ii = coords.length; i < ii; i += dim) { + x = parseFloat(coords[i]); + y = parseFloat(coords[i + 1]); + z = dim === 3 ? parseFloat(coords[i + 2]) : 0; + if (axisOrientation.substr(0, 2) === 'en') { + flatCoordinates.push(x, y, z); + } else { + flatCoordinates.push(y, x, z); + } + } + return flatCoordinates; + } + + /** + * @param {Element} node Node. + * @param {import("../geom/Point.js").default} value Point geometry. + * @param {Array<*>} objectStack Node stack. + * @private + */ + writePos_(node, value, objectStack) { + const context = objectStack[objectStack.length - 1]; + const hasZ = context['hasZ']; + const srsDimension = hasZ ? '3' : '2'; + node.setAttribute('srsDimension', srsDimension); + const srsName = context['srsName']; + let axisOrientation = 'enu'; + if (srsName) { + axisOrientation = getProjection(srsName).getAxisOrientation(); + } + const point = value.getCoordinates(); + let coords; + // only 2d for simple features profile + if (axisOrientation.substr(0, 2) === 'en') { + coords = point[0] + ' ' + point[1]; + } else { + coords = point[1] + ' ' + point[0]; + } + if (hasZ) { + // For newly created points, Z can be undefined. + const z = point[2] || 0; + coords += ' ' + z; + } + writeStringTextNode(node, coords); + } + + /** + * @param {Array} point Point geometry. + * @param {string=} opt_srsName Optional srsName + * @param {boolean=} opt_hasZ whether the geometry has a Z coordinate (is 3D) or not. + * @return {string} The coords string. + * @private + */ + getCoords_(point, opt_srsName, opt_hasZ) { + let axisOrientation = 'enu'; + if (opt_srsName) { + axisOrientation = getProjection(opt_srsName).getAxisOrientation(); + } + let coords = + axisOrientation.substr(0, 2) === 'en' + ? point[0] + ' ' + point[1] + : point[1] + ' ' + point[0]; + if (opt_hasZ) { + // For newly created points, Z can be undefined. + const z = point[2] || 0; + coords += ' ' + z; + } + + return coords; + } + + /** + * @param {Element} node Node. + * @param {LineString|import("../geom/LinearRing.js").default} value Geometry. + * @param {Array<*>} objectStack Node stack. + * @private + */ + writePosList_(node, value, objectStack) { + const context = objectStack[objectStack.length - 1]; + const hasZ = context['hasZ']; + const srsDimension = hasZ ? '3' : '2'; + node.setAttribute('srsDimension', srsDimension); + const srsName = context['srsName']; + // only 2d for simple features profile + const points = value.getCoordinates(); + const len = points.length; + const parts = new Array(len); + let point; + for (let i = 0; i < len; ++i) { + point = points[i]; + parts[i] = this.getCoords_(point, srsName, hasZ); + } + writeStringTextNode(node, parts.join(' ')); + } + + /** + * @param {Element} node Node. + * @param {import("../geom/Point.js").default} geometry Point geometry. + * @param {Array<*>} objectStack Node stack. + */ + writePoint(node, geometry, objectStack) { + const context = objectStack[objectStack.length - 1]; + const srsName = context['srsName']; + if (srsName) { + node.setAttribute('srsName', srsName); + } + const pos = createElementNS(node.namespaceURI, 'pos'); + node.appendChild(pos); + this.writePos_(pos, geometry, objectStack); + } + + /** + * @param {Element} node Node. + * @param {import("../extent.js").Extent} extent Extent. + * @param {Array<*>} objectStack Node stack. + */ + writeEnvelope(node, extent, objectStack) { + const context = objectStack[objectStack.length - 1]; + const srsName = context['srsName']; + if (srsName) { + node.setAttribute('srsName', srsName); + } + const keys = ['lowerCorner', 'upperCorner']; + const values = [extent[0] + ' ' + extent[1], extent[2] + ' ' + extent[3]]; + pushSerializeAndPop( + /** @type {import("../xml.js").NodeStackItem} */ + ({node: node}), + this.ENVELOPE_SERIALIZERS, + OBJECT_PROPERTY_NODE_FACTORY, + values, + objectStack, + keys, + this + ); + } + + /** + * @param {Element} node Node. + * @param {import("../geom/LinearRing.js").default} geometry LinearRing geometry. + * @param {Array<*>} objectStack Node stack. + */ + writeLinearRing(node, geometry, objectStack) { + const context = objectStack[objectStack.length - 1]; + const srsName = context['srsName']; + if (srsName) { + node.setAttribute('srsName', srsName); + } + const posList = createElementNS(node.namespaceURI, 'posList'); + node.appendChild(posList); + this.writePosList_(posList, geometry, objectStack); + } + + /** + * @param {*} value Value. + * @param {Array<*>} objectStack Object stack. + * @param {string=} opt_nodeName Node name. + * @return {Node} Node. + * @private + */ + RING_NODE_FACTORY_(value, objectStack, opt_nodeName) { + const context = objectStack[objectStack.length - 1]; + const parentNode = context.node; + const exteriorWritten = context['exteriorWritten']; + if (exteriorWritten === undefined) { + context['exteriorWritten'] = true; + } + return createElementNS( + parentNode.namespaceURI, + exteriorWritten !== undefined ? 'interior' : 'exterior' + ); + } + + /** + * @param {Element} node Node. + * @param {Polygon} geometry Polygon geometry. + * @param {Array<*>} objectStack Node stack. + */ + writeSurfaceOrPolygon(node, geometry, objectStack) { + const context = objectStack[objectStack.length - 1]; + const hasZ = context['hasZ']; + const srsName = context['srsName']; + if (node.nodeName !== 'PolygonPatch' && srsName) { + node.setAttribute('srsName', srsName); + } + if (node.nodeName === 'Polygon' || node.nodeName === 'PolygonPatch') { + const rings = geometry.getLinearRings(); + pushSerializeAndPop( + {node: node, hasZ: hasZ, srsName: srsName}, + this.RING_SERIALIZERS, + this.RING_NODE_FACTORY_, + rings, + objectStack, + undefined, + this + ); + } else if (node.nodeName === 'Surface') { + const patches = createElementNS(node.namespaceURI, 'patches'); + node.appendChild(patches); + this.writeSurfacePatches_(patches, geometry, objectStack); + } + } + + /** + * @param {Element} node Node. + * @param {LineString} geometry LineString geometry. + * @param {Array<*>} objectStack Node stack. + */ + writeCurveOrLineString(node, geometry, objectStack) { + const context = objectStack[objectStack.length - 1]; + const srsName = context['srsName']; + if (node.nodeName !== 'LineStringSegment' && srsName) { + node.setAttribute('srsName', srsName); + } + if ( + node.nodeName === 'LineString' || + node.nodeName === 'LineStringSegment' + ) { + const posList = createElementNS(node.namespaceURI, 'posList'); + node.appendChild(posList); + this.writePosList_(posList, geometry, objectStack); + } else if (node.nodeName === 'Curve') { + const segments = createElementNS(node.namespaceURI, 'segments'); + node.appendChild(segments); + this.writeCurveSegments_(segments, geometry, objectStack); + } + } + + /** + * @param {Element} node Node. + * @param {MultiPolygon} geometry MultiPolygon geometry. + * @param {Array<*>} objectStack Node stack. + */ + writeMultiSurfaceOrPolygon(node, geometry, objectStack) { + const context = objectStack[objectStack.length - 1]; + const hasZ = context['hasZ']; + const srsName = context['srsName']; + const surface = context['surface']; + if (srsName) { + node.setAttribute('srsName', srsName); + } + const polygons = geometry.getPolygons(); + pushSerializeAndPop( + {node: node, hasZ: hasZ, srsName: srsName, surface: surface}, + this.SURFACEORPOLYGONMEMBER_SERIALIZERS, + this.MULTIGEOMETRY_MEMBER_NODE_FACTORY_, + polygons, + objectStack, + undefined, + this + ); + } + + /** + * @param {Element} node Node. + * @param {import("../geom/MultiPoint.js").default} geometry MultiPoint geometry. + * @param {Array<*>} objectStack Node stack. + */ + writeMultiPoint(node, geometry, objectStack) { + const context = objectStack[objectStack.length - 1]; + const srsName = context['srsName']; + const hasZ = context['hasZ']; + if (srsName) { + node.setAttribute('srsName', srsName); + } + const points = geometry.getPoints(); + pushSerializeAndPop( + {node: node, hasZ: hasZ, srsName: srsName}, + this.POINTMEMBER_SERIALIZERS, + makeSimpleNodeFactory('pointMember'), + points, + objectStack, + undefined, + this + ); + } + + /** + * @param {Element} node Node. + * @param {MultiLineString} geometry MultiLineString geometry. + * @param {Array<*>} objectStack Node stack. + */ + writeMultiCurveOrLineString(node, geometry, objectStack) { + const context = objectStack[objectStack.length - 1]; + const hasZ = context['hasZ']; + const srsName = context['srsName']; + const curve = context['curve']; + if (srsName) { + node.setAttribute('srsName', srsName); + } + const lines = geometry.getLineStrings(); + pushSerializeAndPop( + {node: node, hasZ: hasZ, srsName: srsName, curve: curve}, + this.LINESTRINGORCURVEMEMBER_SERIALIZERS, + this.MULTIGEOMETRY_MEMBER_NODE_FACTORY_, + lines, + objectStack, + undefined, + this + ); + } + + /** + * @param {Node} node Node. + * @param {import("../geom/LinearRing.js").default} ring LinearRing geometry. + * @param {Array<*>} objectStack Node stack. + */ + writeRing(node, ring, objectStack) { + const linearRing = createElementNS(node.namespaceURI, 'LinearRing'); + node.appendChild(linearRing); + this.writeLinearRing(linearRing, ring, objectStack); + } + + /** + * @param {Node} node Node. + * @param {Polygon} polygon Polygon geometry. + * @param {Array<*>} objectStack Node stack. + */ + writeSurfaceOrPolygonMember(node, polygon, objectStack) { + const child = this.GEOMETRY_NODE_FACTORY_(polygon, objectStack); + if (child) { + node.appendChild(child); + this.writeSurfaceOrPolygon(child, polygon, objectStack); + } + } + + /** + * @param {Node} node Node. + * @param {import("../geom/Point.js").default} point Point geometry. + * @param {Array<*>} objectStack Node stack. + */ + writePointMember(node, point, objectStack) { + const child = createElementNS(node.namespaceURI, 'Point'); + node.appendChild(child); + this.writePoint(child, point, objectStack); + } + + /** + * @param {Node} node Node. + * @param {LineString} line LineString geometry. + * @param {Array<*>} objectStack Node stack. + */ + writeLineStringOrCurveMember(node, line, objectStack) { + const child = this.GEOMETRY_NODE_FACTORY_(line, objectStack); + if (child) { + node.appendChild(child); + this.writeCurveOrLineString(child, line, objectStack); + } + } + + /** + * @param {Node} node Node. + * @param {Polygon} polygon Polygon geometry. + * @param {Array<*>} objectStack Node stack. + * @private + */ + writeSurfacePatches_(node, polygon, objectStack) { + const child = createElementNS(node.namespaceURI, 'PolygonPatch'); + node.appendChild(child); + this.writeSurfaceOrPolygon(child, polygon, objectStack); + } + + /** + * @param {Node} node Node. + * @param {LineString} line LineString geometry. + * @param {Array<*>} objectStack Node stack. + * @private + */ + writeCurveSegments_(node, line, objectStack) { + const child = createElementNS(node.namespaceURI, 'LineStringSegment'); + node.appendChild(child); + this.writeCurveOrLineString(child, line, objectStack); + } + + /** + * @param {Node} node Node. + * @param {import("../geom/Geometry.js").default|import("../extent.js").Extent} geometry Geometry. + * @param {Array<*>} objectStack Node stack. + */ + writeGeometryElement(node, geometry, objectStack) { + const context = /** @type {import("./Feature.js").WriteOptions} */ (objectStack[ + objectStack.length - 1 + ]); + const item = assign({}, context); + item['node'] = node; + let value; + if (Array.isArray(geometry)) { + value = transformExtentWithOptions( + /** @type {import("../extent.js").Extent} */ (geometry), + context + ); + } else { + value = transformGeometryWithOptions( + /** @type {import("../geom/Geometry.js").default} */ (geometry), + true, + context + ); + } + pushSerializeAndPop( + /** @type {import("../xml.js").NodeStackItem} */ + (item), + this.GEOMETRY_SERIALIZERS, + this.GEOMETRY_NODE_FACTORY_, + [value], + objectStack, + undefined, + this + ); + } + + /** + * @param {Element} node Node. + * @param {import("../Feature.js").default} feature Feature. + * @param {Array<*>} objectStack Node stack. + */ + writeFeatureElement(node, feature, objectStack) { + const fid = feature.getId(); + if (fid) { + node.setAttribute('fid', /** @type {string} */ (fid)); + } + const context = /** @type {Object} */ (objectStack[objectStack.length - 1]); + const featureNS = context['featureNS']; + const geometryName = feature.getGeometryName(); + if (!context.serializers) { + context.serializers = {}; + context.serializers[featureNS] = {}; + } + const keys = []; + const values = []; + if (feature.hasProperties()) { + const properties = feature.getProperties(); + for (const key in properties) { + const value = properties[key]; + if (value !== null) { + keys.push(key); + values.push(value); + if ( + key == geometryName || + typeof (/** @type {?} */ (value).getSimplifiedGeometry) === + 'function' + ) { + if (!(key in context.serializers[featureNS])) { + context.serializers[featureNS][key] = makeChildAppender( + this.writeGeometryElement, + this + ); + } + } else { + if (!(key in context.serializers[featureNS])) { + context.serializers[featureNS][key] = makeChildAppender( + writeStringTextNode + ); + } + } + } + } + } + const item = assign({}, context); + item.node = node; + pushSerializeAndPop( + /** @type {import("../xml.js").NodeStackItem} */ + (item), + context.serializers, + makeSimpleNodeFactory(undefined, featureNS), + values, + objectStack, + keys + ); + } + + /** + * @param {Node} node Node. + * @param {Array} features Features. + * @param {Array<*>} objectStack Node stack. + * @private + */ + writeFeatureMembers_(node, features, objectStack) { + const context = /** @type {Object} */ (objectStack[objectStack.length - 1]); + const featureType = context['featureType']; + const featureNS = context['featureNS']; + /** @type {Object>} */ + const serializers = {}; + serializers[featureNS] = {}; + serializers[featureNS][featureType] = makeChildAppender( + this.writeFeatureElement, + this + ); + const item = assign({}, context); + item.node = node; + pushSerializeAndPop( + /** @type {import("../xml.js").NodeStackItem} */ + (item), + serializers, + makeSimpleNodeFactory(featureType, featureNS), + features, + objectStack + ); + } + + /** + * @const + * @param {*} value Value. + * @param {Array<*>} objectStack Object stack. + * @param {string=} opt_nodeName Node name. + * @return {Node|undefined} Node. + * @private + */ + MULTIGEOMETRY_MEMBER_NODE_FACTORY_(value, objectStack, opt_nodeName) { + const parentNode = objectStack[objectStack.length - 1].node; + return createElementNS( + this.namespace, + MULTIGEOMETRY_TO_MEMBER_NODENAME[parentNode.nodeName] + ); + } + + /** + * @const + * @param {*} value Value. + * @param {Array<*>} objectStack Object stack. + * @param {string=} opt_nodeName Node name. + * @return {Element|undefined} Node. + * @private + */ + GEOMETRY_NODE_FACTORY_(value, objectStack, opt_nodeName) { + const context = objectStack[objectStack.length - 1]; + const multiSurface = context['multiSurface']; + const surface = context['surface']; + const curve = context['curve']; + const multiCurve = context['multiCurve']; + let nodeName; + if (!Array.isArray(value)) { + nodeName = /** @type {import("../geom/Geometry.js").default} */ (value).getType(); + if (nodeName === 'MultiPolygon' && multiSurface === true) { + nodeName = 'MultiSurface'; + } else if (nodeName === 'Polygon' && surface === true) { + nodeName = 'Surface'; + } else if (nodeName === 'LineString' && curve === true) { + nodeName = 'Curve'; + } else if (nodeName === 'MultiLineString' && multiCurve === true) { + nodeName = 'MultiCurve'; + } + } else { + nodeName = 'Envelope'; + } + return createElementNS(this.namespace, nodeName); + } + + /** + * Encode a geometry in GML 3.1.1 Simple Features. + * + * @param {import("../geom/Geometry.js").default} geometry Geometry. + * @param {import("./Feature.js").WriteOptions=} opt_options Options. + * @return {Node} Node. + * @api + */ + writeGeometryNode(geometry, opt_options) { + opt_options = this.adaptOptions(opt_options); + const geom = createElementNS(this.namespace, 'geom'); + const context = { + node: geom, + hasZ: this.hasZ, + srsName: this.srsName, + curve: this.curve_, + surface: this.surface_, + multiSurface: this.multiSurface_, + multiCurve: this.multiCurve_, + }; + if (opt_options) { + assign(context, opt_options); + } + this.writeGeometryElement(geom, geometry, [context]); + return geom; + } + + /** + * Encode an array of features in the GML 3.1.1 format as an XML node. + * + * @param {Array} features Features. + * @param {import("./Feature.js").WriteOptions=} opt_options Options. + * @return {Element} Node. + * @api + */ + writeFeaturesNode(features, opt_options) { + opt_options = this.adaptOptions(opt_options); + const node = createElementNS(this.namespace, 'featureMembers'); + node.setAttributeNS( + XML_SCHEMA_INSTANCE_URI, + 'xsi:schemaLocation', + this.schemaLocation + ); + const context = { + srsName: this.srsName, + hasZ: this.hasZ, + curve: this.curve_, + surface: this.surface_, + multiSurface: this.multiSurface_, + multiCurve: this.multiCurve_, + featureNS: this.featureNS, + featureType: this.featureType, + }; + if (opt_options) { + assign(context, opt_options); + } + this.writeFeatureMembers_(node, features, [context]); + return node; + } +} + +/** + * @const + * @type {Object>} + */ +GML3.prototype.GEOMETRY_FLAT_COORDINATES_PARSERS = { + 'http://www.opengis.net/gml': { + 'pos': makeReplacer(GML3.prototype.readFlatPos), + 'posList': makeReplacer(GML3.prototype.readFlatPosList), + 'coordinates': makeReplacer(GML2.prototype.readFlatCoordinates), + }, +}; + +/** + * @const + * @type {Object>} + */ +GML3.prototype.FLAT_LINEAR_RINGS_PARSERS = { + 'http://www.opengis.net/gml': { + 'interior': GML3.prototype.interiorParser, + 'exterior': GML3.prototype.exteriorParser, + }, +}; + +/** + * @const + * @type {Object>} + */ +GML3.prototype.GEOMETRY_PARSERS = { + 'http://www.opengis.net/gml': { + 'Point': makeReplacer(GMLBase.prototype.readPoint), + 'MultiPoint': makeReplacer(GMLBase.prototype.readMultiPoint), + 'LineString': makeReplacer(GMLBase.prototype.readLineString), + 'MultiLineString': makeReplacer(GMLBase.prototype.readMultiLineString), + 'LinearRing': makeReplacer(GMLBase.prototype.readLinearRing), + 'Polygon': makeReplacer(GMLBase.prototype.readPolygon), + 'MultiPolygon': makeReplacer(GMLBase.prototype.readMultiPolygon), + 'Surface': makeReplacer(GML3.prototype.readSurface), + 'MultiSurface': makeReplacer(GML3.prototype.readMultiSurface), + 'Curve': makeReplacer(GML3.prototype.readCurve), + 'MultiCurve': makeReplacer(GML3.prototype.readMultiCurve), + 'Envelope': makeReplacer(GML3.prototype.readEnvelope), + }, +}; + +/** + * @const + * @type {Object>} + */ +GML3.prototype.MULTICURVE_PARSERS = { + 'http://www.opengis.net/gml': { + 'curveMember': makeArrayPusher(GML3.prototype.curveMemberParser), + 'curveMembers': makeArrayPusher(GML3.prototype.curveMemberParser), + }, +}; + +/** + * @const + * @type {Object>} + */ +GML3.prototype.MULTISURFACE_PARSERS = { + 'http://www.opengis.net/gml': { + 'surfaceMember': makeArrayPusher(GML3.prototype.surfaceMemberParser), + 'surfaceMembers': makeArrayPusher(GML3.prototype.surfaceMemberParser), + }, +}; + +/** + * @const + * @type {Object>} + */ +GML3.prototype.CURVEMEMBER_PARSERS = { + 'http://www.opengis.net/gml': { + 'LineString': makeArrayPusher(GMLBase.prototype.readLineString), + 'Curve': makeArrayPusher(GML3.prototype.readCurve), + }, +}; + +/** + * @const + * @type {Object>} + */ +GML3.prototype.SURFACEMEMBER_PARSERS = { + 'http://www.opengis.net/gml': { + 'Polygon': makeArrayPusher(GMLBase.prototype.readPolygon), + 'Surface': makeArrayPusher(GML3.prototype.readSurface), + }, +}; + +/** + * @const + * @type {Object>} + */ +GML3.prototype.SURFACE_PARSERS = { + 'http://www.opengis.net/gml': { + 'patches': makeReplacer(GML3.prototype.readPatch), + }, +}; + +/** + * @const + * @type {Object>} + */ +GML3.prototype.CURVE_PARSERS = { + 'http://www.opengis.net/gml': { + 'segments': makeReplacer(GML3.prototype.readSegment), + }, +}; + +/** + * @const + * @type {Object>} + */ +GML3.prototype.ENVELOPE_PARSERS = { + 'http://www.opengis.net/gml': { + 'lowerCorner': makeArrayPusher(GML3.prototype.readFlatPosList), + 'upperCorner': makeArrayPusher(GML3.prototype.readFlatPosList), + }, +}; + +/** + * @const + * @type {Object>} + */ +GML3.prototype.PATCHES_PARSERS = { + 'http://www.opengis.net/gml': { + 'PolygonPatch': makeReplacer(GML3.prototype.readPolygonPatch), + }, +}; + +/** + * @const + * @type {Object>} + */ +GML3.prototype.SEGMENTS_PARSERS = { + 'http://www.opengis.net/gml': { + 'LineStringSegment': makeReplacer(GML3.prototype.readLineStringSegment), + }, +}; + +/** + * Encode an array of features in GML 3.1.1 Simple Features. + * + * @function + * @param {Array} features Features. + * @param {import("./Feature.js").WriteOptions=} opt_options Options. + * @return {string} Result. + * @api + */ +GML3.prototype.writeFeatures; + +/** + * @type {Object>} + */ +GML3.prototype.RING_SERIALIZERS = { + 'http://www.opengis.net/gml': { + 'exterior': makeChildAppender(GML3.prototype.writeRing), + 'interior': makeChildAppender(GML3.prototype.writeRing), + }, +}; + +/** + * @type {Object>} + */ +GML3.prototype.ENVELOPE_SERIALIZERS = { + 'http://www.opengis.net/gml': { + 'lowerCorner': makeChildAppender(writeStringTextNode), + 'upperCorner': makeChildAppender(writeStringTextNode), + }, +}; + +/** + * @type {Object>} + */ +GML3.prototype.SURFACEORPOLYGONMEMBER_SERIALIZERS = { + 'http://www.opengis.net/gml': { + 'surfaceMember': makeChildAppender( + GML3.prototype.writeSurfaceOrPolygonMember + ), + 'polygonMember': makeChildAppender( + GML3.prototype.writeSurfaceOrPolygonMember + ), + }, +}; + +/** + * @type {Object>} + */ +GML3.prototype.POINTMEMBER_SERIALIZERS = { + 'http://www.opengis.net/gml': { + 'pointMember': makeChildAppender(GML3.prototype.writePointMember), + }, +}; + +/** + * @type {Object>} + */ +GML3.prototype.LINESTRINGORCURVEMEMBER_SERIALIZERS = { + 'http://www.opengis.net/gml': { + 'lineStringMember': makeChildAppender( + GML3.prototype.writeLineStringOrCurveMember + ), + 'curveMember': makeChildAppender( + GML3.prototype.writeLineStringOrCurveMember + ), + }, +}; + +/** + * @type {Object>} + */ +GML3.prototype.GEOMETRY_SERIALIZERS = { + 'http://www.opengis.net/gml': { + 'Curve': makeChildAppender(GML3.prototype.writeCurveOrLineString), + 'MultiCurve': makeChildAppender(GML3.prototype.writeMultiCurveOrLineString), + 'Point': makeChildAppender(GML3.prototype.writePoint), + 'MultiPoint': makeChildAppender(GML3.prototype.writeMultiPoint), + 'LineString': makeChildAppender(GML3.prototype.writeCurveOrLineString), + 'MultiLineString': makeChildAppender( + GML3.prototype.writeMultiCurveOrLineString + ), + 'LinearRing': makeChildAppender(GML3.prototype.writeLinearRing), + 'Polygon': makeChildAppender(GML3.prototype.writeSurfaceOrPolygon), + 'MultiPolygon': makeChildAppender( + GML3.prototype.writeMultiSurfaceOrPolygon + ), + 'Surface': makeChildAppender(GML3.prototype.writeSurfaceOrPolygon), + 'MultiSurface': makeChildAppender( + GML3.prototype.writeMultiSurfaceOrPolygon + ), + 'Envelope': makeChildAppender(GML3.prototype.writeEnvelope), + }, +}; + +export default GML3; \ No newline at end of file diff --git a/src/mapboxgl/theme/common/format/GML32.js b/src/mapboxgl/theme/common/format/GML32.js new file mode 100644 index 000000000..0b8a60c5e --- /dev/null +++ b/src/mapboxgl/theme/common/format/GML32.js @@ -0,0 +1,336 @@ +/** + * @module ol/format/GML32 + */ +import GML2 from './GML2.js'; +import GML3 from './GML32.js'; +import GMLBase from './GMLBase.js'; +import {makeArrayPusher, makeChildAppender, makeReplacer} from '../xml.js'; +import {writeStringTextNode} from '../format/xsd.js'; + +/** + * @classdesc Feature format for reading and writing data in the GML format + * version 3.2.1. + * @api + */ +class GML32 extends GML3 { + /** + * @param {import("./GMLBase.js").Options=} opt_options Optional configuration object. + */ + constructor(opt_options) { + const options = /** @type {import("./GMLBase.js").Options} */ (opt_options + ? opt_options + : {}); + + super(options); + + /** + * @type {string} + */ + this.schemaLocation = options.schemaLocation + ? options.schemaLocation + : this.namespace + ' http://schemas.opengis.net/gml/3.2.1/gml.xsd'; + } +} + +GML32.prototype.namespace = 'http://www.opengis.net/gml/3.2'; + +/** + * @const + * @type {Object>} + */ +GML32.prototype.GEOMETRY_FLAT_COORDINATES_PARSERS = { + 'http://www.opengis.net/gml/3.2': { + 'pos': makeReplacer(GML3.prototype.readFlatPos), + 'posList': makeReplacer(GML3.prototype.readFlatPosList), + 'coordinates': makeReplacer(GML2.prototype.readFlatCoordinates), + }, +}; + +/** + * @const + * @type {Object>} + */ +GML32.prototype.FLAT_LINEAR_RINGS_PARSERS = { + 'http://www.opengis.net/gml/3.2': { + 'interior': GML3.prototype.interiorParser, + 'exterior': GML3.prototype.exteriorParser, + }, +}; + +/** + * @const + * @type {Object>} + */ +GML32.prototype.GEOMETRY_PARSERS = { + 'http://www.opengis.net/gml/3.2': { + 'Point': makeReplacer(GMLBase.prototype.readPoint), + 'MultiPoint': makeReplacer(GMLBase.prototype.readMultiPoint), + 'LineString': makeReplacer(GMLBase.prototype.readLineString), + 'MultiLineString': makeReplacer(GMLBase.prototype.readMultiLineString), + 'LinearRing': makeReplacer(GMLBase.prototype.readLinearRing), + 'Polygon': makeReplacer(GMLBase.prototype.readPolygon), + 'MultiPolygon': makeReplacer(GMLBase.prototype.readMultiPolygon), + 'Surface': makeReplacer(GML32.prototype.readSurface), + 'MultiSurface': makeReplacer(GML3.prototype.readMultiSurface), + 'Curve': makeReplacer(GML32.prototype.readCurve), + 'MultiCurve': makeReplacer(GML3.prototype.readMultiCurve), + 'Envelope': makeReplacer(GML32.prototype.readEnvelope), + }, +}; + +/** + * @const + * @type {Object>} + */ +GML32.prototype.MULTICURVE_PARSERS = { + 'http://www.opengis.net/gml/3.2': { + 'curveMember': makeArrayPusher(GML3.prototype.curveMemberParser), + 'curveMembers': makeArrayPusher(GML3.prototype.curveMemberParser), + }, +}; + +/** + * @const + * @type {Object>} + */ +GML32.prototype.MULTISURFACE_PARSERS = { + 'http://www.opengis.net/gml/3.2': { + 'surfaceMember': makeArrayPusher(GML3.prototype.surfaceMemberParser), + 'surfaceMembers': makeArrayPusher(GML3.prototype.surfaceMemberParser), + }, +}; + +/** + * @const + * @type {Object>} + */ +GML32.prototype.CURVEMEMBER_PARSERS = { + 'http://www.opengis.net/gml/3.2': { + 'LineString': makeArrayPusher(GMLBase.prototype.readLineString), + 'Curve': makeArrayPusher(GML3.prototype.readCurve), + }, +}; + +/** + * @const + * @type {Object>} + */ +GML32.prototype.SURFACEMEMBER_PARSERS = { + 'http://www.opengis.net/gml/3.2': { + 'Polygon': makeArrayPusher(GMLBase.prototype.readPolygon), + 'Surface': makeArrayPusher(GML3.prototype.readSurface), + }, +}; + +/** + * @const + * @type {Object>} + */ +GML32.prototype.SURFACE_PARSERS = { + 'http://www.opengis.net/gml/3.2': { + 'patches': makeReplacer(GML3.prototype.readPatch), + }, +}; + +/** + * @const + * @type {Object>} + */ +GML32.prototype.CURVE_PARSERS = { + 'http://www.opengis.net/gml/3.2': { + 'segments': makeReplacer(GML3.prototype.readSegment), + }, +}; + +/** + * @const + * @type {Object>} + */ +GML32.prototype.ENVELOPE_PARSERS = { + 'http://www.opengis.net/gml/3.2': { + 'lowerCorner': makeArrayPusher(GML3.prototype.readFlatPosList), + 'upperCorner': makeArrayPusher(GML3.prototype.readFlatPosList), + }, +}; + +/** + * @const + * @type {Object>} + */ +GML32.prototype.PATCHES_PARSERS = { + 'http://www.opengis.net/gml/3.2': { + 'PolygonPatch': makeReplacer(GML3.prototype.readPolygonPatch), + }, +}; + +/** + * @const + * @type {Object>} + */ +GML32.prototype.SEGMENTS_PARSERS = { + 'http://www.opengis.net/gml/3.2': { + 'LineStringSegment': makeReplacer(GML3.prototype.readLineStringSegment), + }, +}; + +/** + * @const + * @type {Object>} + */ +GML32.prototype.MULTIPOINT_PARSERS = { + 'http://www.opengis.net/gml/3.2': { + 'pointMember': makeArrayPusher(GMLBase.prototype.pointMemberParser), + 'pointMembers': makeArrayPusher(GMLBase.prototype.pointMemberParser), + }, +}; + +/** + * @const + * @type {Object>} + */ +GML32.prototype.MULTILINESTRING_PARSERS = { + 'http://www.opengis.net/gml/3.2': { + 'lineStringMember': makeArrayPusher( + GMLBase.prototype.lineStringMemberParser + ), + 'lineStringMembers': makeArrayPusher( + GMLBase.prototype.lineStringMemberParser + ), + }, +}; + +/** + * @const + * @type {Object>} + */ +GML32.prototype.MULTIPOLYGON_PARSERS = { + 'http://www.opengis.net/gml/3.2': { + 'polygonMember': makeArrayPusher(GMLBase.prototype.polygonMemberParser), + 'polygonMembers': makeArrayPusher(GMLBase.prototype.polygonMemberParser), + }, +}; + +/** + * @const + * @type {Object>} + */ +GML32.prototype.POINTMEMBER_PARSERS = { + 'http://www.opengis.net/gml/3.2': { + 'Point': makeArrayPusher(GMLBase.prototype.readFlatCoordinatesFromNode), + }, +}; + +/** + * @const + * @type {Object>} + */ +GML32.prototype.LINESTRINGMEMBER_PARSERS = { + 'http://www.opengis.net/gml/3.2': { + 'LineString': makeArrayPusher(GMLBase.prototype.readLineString), + }, +}; + +/** + * @const + * @type {Object>} + */ +GML32.prototype.POLYGONMEMBER_PARSERS = { + 'http://www.opengis.net/gml/3.2': { + 'Polygon': makeArrayPusher(GMLBase.prototype.readPolygon), + }, +}; + +/** + * @const + * @type {Object>} + */ +GML32.prototype.RING_PARSERS = { + 'http://www.opengis.net/gml/3.2': { + 'LinearRing': makeReplacer(GMLBase.prototype.readFlatLinearRing), + }, +}; + +/** + * @type {Object>} + */ +GML32.prototype.RING_SERIALIZERS = { + 'http://www.opengis.net/gml/3.2': { + 'exterior': makeChildAppender(GML3.prototype.writeRing), + 'interior': makeChildAppender(GML3.prototype.writeRing), + }, +}; + +/** + * @type {Object>} + */ +GML32.prototype.ENVELOPE_SERIALIZERS = { + 'http://www.opengis.net/gml/3.2': { + 'lowerCorner': makeChildAppender(writeStringTextNode), + 'upperCorner': makeChildAppender(writeStringTextNode), + }, +}; + +/** + * @type {Object>} + */ +GML32.prototype.SURFACEORPOLYGONMEMBER_SERIALIZERS = { + 'http://www.opengis.net/gml/3.2': { + 'surfaceMember': makeChildAppender( + GML3.prototype.writeSurfaceOrPolygonMember + ), + 'polygonMember': makeChildAppender( + GML3.prototype.writeSurfaceOrPolygonMember + ), + }, +}; + +/** + * @type {Object>} + */ +GML32.prototype.POINTMEMBER_SERIALIZERS = { + 'http://www.opengis.net/gml/3.2': { + 'pointMember': makeChildAppender(GML3.prototype.writePointMember), + }, +}; + +/** + * @type {Object>} + */ +GML32.prototype.LINESTRINGORCURVEMEMBER_SERIALIZERS = { + 'http://www.opengis.net/gml/3.2': { + 'lineStringMember': makeChildAppender( + GML3.prototype.writeLineStringOrCurveMember + ), + 'curveMember': makeChildAppender( + GML3.prototype.writeLineStringOrCurveMember + ), + }, +}; + +/** + * @type {Object>} + */ +GML32.prototype.GEOMETRY_SERIALIZERS = { + 'http://www.opengis.net/gml/3.2': { + 'Curve': makeChildAppender(GML3.prototype.writeCurveOrLineString), + 'MultiCurve': makeChildAppender(GML3.prototype.writeMultiCurveOrLineString), + 'Point': makeChildAppender(GML32.prototype.writePoint), + 'MultiPoint': makeChildAppender(GML3.prototype.writeMultiPoint), + 'LineString': makeChildAppender(GML3.prototype.writeCurveOrLineString), + 'MultiLineString': makeChildAppender( + GML3.prototype.writeMultiCurveOrLineString + ), + 'LinearRing': makeChildAppender(GML3.prototype.writeLinearRing), + 'Polygon': makeChildAppender(GML3.prototype.writeSurfaceOrPolygon), + 'MultiPolygon': makeChildAppender( + GML3.prototype.writeMultiSurfaceOrPolygon + ), + 'Surface': makeChildAppender(GML3.prototype.writeSurfaceOrPolygon), + 'MultiSurface': makeChildAppender( + GML3.prototype.writeMultiSurfaceOrPolygon + ), + 'Envelope': makeChildAppender(GML3.prototype.writeEnvelope), + }, +}; + +export default GML32; \ No newline at end of file diff --git a/src/mapboxgl/theme/common/format/GMLBase.js b/src/mapboxgl/theme/common/format/GMLBase.js new file mode 100644 index 000000000..b28acebaa --- /dev/null +++ b/src/mapboxgl/theme/common/format/GMLBase.js @@ -0,0 +1,680 @@ +/** + * @module ol/format/GMLBase + */ +// FIXME Envelopes should not be treated as geometries! readEnvelope_ is part +// of GEOMETRY_PARSERS_ and methods using GEOMETRY_PARSERS_ do not expect +// envelopes/extents, only geometries! +import Feature from '../Feature.js'; +import GeometryLayout from '../geom/GeometryLayout.js'; +import LineString from '../geom/LineString.js'; +import LinearRing from '../geom/LinearRing.js'; +import MultiLineString from '../geom/MultiLineString.js'; +import MultiPoint from '../geom/MultiPoint.js'; +import MultiPolygon from '../geom/MultiPolygon.js'; +import Point from '../geom/Point.js'; +import Polygon from '../geom/Polygon.js'; +import XMLFeature from './XMLFeature.js'; +import {assign} from './util/obj.js'; +import {extend} from './util/array.js'; +import { + getAllTextContent, + getAttributeNS, + makeArrayPusher, + makeReplacer, + parseNode, + pushParseAndPop, +} from '../xml.js'; +import {get as getProjection} from '../proj.js'; +import { + transformExtentWithOptions, + transformGeometryWithOptions, +} from './Feature.js'; + +/** + * @const + * @type {string} + */ +export const GMLNS = 'http://www.opengis.net/gml'; + +/** + * A regular expression that matches if a string only contains whitespace + * characters. It will e.g. match `''`, `' '`, `'\n'` etc. The non-breaking + * space (0xa0) is explicitly included as IE doesn't include it in its + * definition of `\s`. + * + * Information from `goog.string.isEmptyOrWhitespace`: https://github.com/google/closure-library/blob/e877b1e/closure/goog/string/string.js#L156-L160 + * + * @const + * @type {RegExp} + */ +const ONLY_WHITESPACE_RE = /^[\s\xa0]*$/; + +/** + * @typedef {Object} Options + * @property {Object|string} [featureNS] Feature + * namespace. If not defined will be derived from GML. If multiple + * feature types have been configured which come from different feature + * namespaces, this will be an object with the keys being the prefixes used + * in the entries of featureType array. The values of the object will be the + * feature namespaces themselves. So for instance there might be a featureType + * item `topp:states` in the `featureType` array and then there will be a key + * `topp` in the featureNS object with value `http://www.openplans.org/topp`. + * @property {Array|string} [featureType] Feature type(s) to parse. + * If multiple feature types need to be configured + * which come from different feature namespaces, `featureNS` will be an object + * with the keys being the prefixes used in the entries of featureType array. + * The values of the object will be the feature namespaces themselves. + * So for instance there might be a featureType item `topp:states` and then + * there will be a key named `topp` in the featureNS object with value + * `http://www.openplans.org/topp`. + * @property {string} srsName srsName to use when writing geometries. + * @property {boolean} [surface=false] Write gml:Surface instead of gml:Polygon + * elements. This also affects the elements in multi-part geometries. + * @property {boolean} [curve=false] Write gml:Curve instead of gml:LineString + * elements. This also affects the elements in multi-part geometries. + * @property {boolean} [multiCurve=true] Write gml:MultiCurve instead of gml:MultiLineString. + * Since the latter is deprecated in GML 3. + * @property {boolean} [multiSurface=true] Write gml:multiSurface instead of + * gml:MultiPolygon. Since the latter is deprecated in GML 3. + * @property {string} [schemaLocation] Optional schemaLocation to use when + * writing out the GML, this will override the default provided. + * @property {boolean} [hasZ=false] If coordinates have a Z value. + */ + +/** + * @classdesc + * Abstract base class; normally only used for creating subclasses and not + * instantiated in apps. + * Feature base format for reading and writing data in the GML format. + * This class cannot be instantiated, it contains only base content that + * is shared with versioned format classes GML2 and GML3. + * + * @abstract + */ +class GMLBase extends XMLFeature { + /** + * @param {Options=} opt_options Optional configuration object. + */ + constructor(opt_options) { + super(); + + const options = /** @type {Options} */ (opt_options ? opt_options : {}); + + /** + * @protected + * @type {Array|string|undefined} + */ + this.featureType = options.featureType; + + /** + * @protected + * @type {Object|string|undefined} + */ + this.featureNS = options.featureNS; + + /** + * @protected + * @type {string} + */ + this.srsName = options.srsName; + + /** + * @protected + * @type {string} + */ + this.schemaLocation = ''; + + /** + * @type {Object>} + */ + this.FEATURE_COLLECTION_PARSERS = {}; + this.FEATURE_COLLECTION_PARSERS[this.namespace] = { + 'featureMember': makeArrayPusher(this.readFeaturesInternal), + 'featureMembers': makeReplacer(this.readFeaturesInternal), + }; + } + + /** + * @param {Element} node Node. + * @param {Array<*>} objectStack Object stack. + * @return {Array | undefined} Features. + */ + readFeaturesInternal(node, objectStack) { + const localName = node.localName; + let features = null; + if (localName == 'FeatureCollection') { + features = pushParseAndPop( + [], + this.FEATURE_COLLECTION_PARSERS, + node, + objectStack, + this + ); + } else if ( + localName == 'featureMembers' || + localName == 'featureMember' || + localName == 'member' + ) { + const context = objectStack[0]; + let featureType = context['featureType']; + let featureNS = context['featureNS']; + const prefix = 'p'; + const defaultPrefix = 'p0'; + if (!featureType && node.childNodes) { + (featureType = []), (featureNS = {}); + for (let i = 0, ii = node.childNodes.length; i < ii; ++i) { + const child = node.childNodes[i]; + if (child.nodeType === 1) { + const ft = child.nodeName.split(':').pop(); + if (featureType.indexOf(ft) === -1) { + let key = ''; + let count = 0; + const uri = child.namespaceURI; + for (const candidate in featureNS) { + if (featureNS[candidate] === uri) { + key = candidate; + break; + } + ++count; + } + if (!key) { + key = prefix + count; + featureNS[key] = uri; + } + featureType.push(key + ':' + ft); + } + } + } + if (localName != 'featureMember') { + // recheck featureType for each featureMember + context['featureType'] = featureType; + context['featureNS'] = featureNS; + } + } + if (typeof featureNS === 'string') { + const ns = featureNS; + featureNS = {}; + featureNS[defaultPrefix] = ns; + } + /** @type {Object>} */ + const parsersNS = {}; + const featureTypes = Array.isArray(featureType) + ? featureType + : [featureType]; + for (const p in featureNS) { + /** @type {Object} */ + const parsers = {}; + for (let i = 0, ii = featureTypes.length; i < ii; ++i) { + const featurePrefix = + featureTypes[i].indexOf(':') === -1 + ? defaultPrefix + : featureTypes[i].split(':')[0]; + if (featurePrefix === p) { + parsers[featureTypes[i].split(':').pop()] = + localName == 'featureMembers' + ? makeArrayPusher(this.readFeatureElement, this) + : makeReplacer(this.readFeatureElement, this); + } + } + parsersNS[featureNS[p]] = parsers; + } + if (localName == 'featureMember' || localName == 'member') { + features = pushParseAndPop(undefined, parsersNS, node, objectStack); + } else { + features = pushParseAndPop([], parsersNS, node, objectStack); + } + } + if (features === null) { + features = []; + } + return features; + } + + /** + * @param {Element} node Node. + * @param {Array<*>} objectStack Object stack. + * @return {import("../geom/Geometry.js").default|import("../extent.js").Extent|undefined} Geometry. + */ + readGeometryElement(node, objectStack) { + const context = /** @type {Object} */ (objectStack[0]); + context['srsName'] = node.firstElementChild.getAttribute('srsName'); + context['srsDimension'] = node.firstElementChild.getAttribute( + 'srsDimension' + ); + const geometry = pushParseAndPop( + null, + this.GEOMETRY_PARSERS, + node, + objectStack, + this + ); + if (geometry) { + if (Array.isArray(geometry)) { + return transformExtentWithOptions( + /** @type {import("../extent.js").Extent} */ (geometry), + context + ); + } else { + return transformGeometryWithOptions( + /** @type {import("../geom/Geometry.js").default} */ (geometry), + false, + context + ); + } + } else { + return undefined; + } + } + + /** + * @param {Element} node Node. + * @param {Array<*>} objectStack Object stack. + * @param {boolean} asFeature whether result should be wrapped as a feature. + * @return {Feature|Object} Feature + */ + readFeatureElementInternal(node, objectStack, asFeature) { + let geometryName; + const values = {}; + for (let n = node.firstElementChild; n; n = n.nextElementSibling) { + let value; + const localName = n.localName; + // first, check if it is simple attribute + if ( + n.childNodes.length === 0 || + (n.childNodes.length === 1 && + (n.firstChild.nodeType === 3 || n.firstChild.nodeType === 4)) + ) { + value = getAllTextContent(n, false); + if (ONLY_WHITESPACE_RE.test(value)) { + value = undefined; + } + } else { + if (asFeature) { + //if feature, try it as a geometry + value = this.readGeometryElement(n, objectStack); + } + if (!value) { + //if not a geometry or not a feature, treat it as a complex attribute + value = this.readFeatureElementInternal(n, objectStack, false); + } else if (localName !== 'boundedBy') { + // boundedBy is an extent and must not be considered as a geometry + geometryName = localName; + } + } + + if (values[localName]) { + if (!(values[localName] instanceof Array)) { + values[localName] = [values[localName]]; + } + values[localName].push(value); + } else { + values[localName] = value; + } + + const len = n.attributes.length; + if (len > 0) { + values[localName] = {_content_: values[localName]}; + for (let i = 0; i < len; i++) { + const attName = n.attributes[i].name; + values[localName][attName] = n.attributes[i].value; + } + } + } + if (!asFeature) { + return values; + } else { + const feature = new Feature(values); + if (geometryName) { + feature.setGeometryName(geometryName); + } + const fid = + node.getAttribute('fid') || getAttributeNS(node, this.namespace, 'id'); + if (fid) { + feature.setId(fid); + } + return feature; + } + } + + /** + * @param {Element} node Node. + * @param {Array<*>} objectStack Object stack. + * @return {Feature} Feature. + */ + readFeatureElement(node, objectStack) { + return this.readFeatureElementInternal(node, objectStack, true); + } + + /** + * @param {Element} node Node. + * @param {Array<*>} objectStack Object stack. + * @return {Point|undefined} Point. + */ + readPoint(node, objectStack) { + const flatCoordinates = this.readFlatCoordinatesFromNode(node, objectStack); + if (flatCoordinates) { + return new Point(flatCoordinates, GeometryLayout.XYZ); + } + } + + /** + * @param {Element} node Node. + * @param {Array<*>} objectStack Object stack. + * @return {MultiPoint|undefined} MultiPoint. + */ + readMultiPoint(node, objectStack) { + /** @type {Array>} */ + const coordinates = pushParseAndPop( + [], + this.MULTIPOINT_PARSERS, + node, + objectStack, + this + ); + if (coordinates) { + return new MultiPoint(coordinates); + } else { + return undefined; + } + } + + /** + * @param {Element} node Node. + * @param {Array<*>} objectStack Object stack. + * @return {MultiLineString|undefined} MultiLineString. + */ + readMultiLineString(node, objectStack) { + /** @type {Array} */ + const lineStrings = pushParseAndPop( + [], + this.MULTILINESTRING_PARSERS, + node, + objectStack, + this + ); + if (lineStrings) { + return new MultiLineString(lineStrings); + } + } + + /** + * @param {Element} node Node. + * @param {Array<*>} objectStack Object stack. + * @return {MultiPolygon|undefined} MultiPolygon. + */ + readMultiPolygon(node, objectStack) { + /** @type {Array} */ + const polygons = pushParseAndPop( + [], + this.MULTIPOLYGON_PARSERS, + node, + objectStack, + this + ); + if (polygons) { + return new MultiPolygon(polygons); + } + } + + /** + * @param {Element} node Node. + * @param {Array<*>} objectStack Object stack. + */ + pointMemberParser(node, objectStack) { + parseNode(this.POINTMEMBER_PARSERS, node, objectStack, this); + } + + /** + * @param {Element} node Node. + * @param {Array<*>} objectStack Object stack. + */ + lineStringMemberParser(node, objectStack) { + parseNode(this.LINESTRINGMEMBER_PARSERS, node, objectStack, this); + } + + /** + * @param {Element} node Node. + * @param {Array<*>} objectStack Object stack. + */ + polygonMemberParser(node, objectStack) { + parseNode(this.POLYGONMEMBER_PARSERS, node, objectStack, this); + } + + /** + * @param {Element} node Node. + * @param {Array<*>} objectStack Object stack. + * @return {LineString|undefined} LineString. + */ + readLineString(node, objectStack) { + const flatCoordinates = this.readFlatCoordinatesFromNode(node, objectStack); + if (flatCoordinates) { + const lineString = new LineString(flatCoordinates, GeometryLayout.XYZ); + return lineString; + } else { + return undefined; + } + } + + /** + * @param {Element} node Node. + * @param {Array<*>} objectStack Object stack. + * @return {Array|undefined} LinearRing flat coordinates. + */ + readFlatLinearRing(node, objectStack) { + const ring = pushParseAndPop( + null, + this.GEOMETRY_FLAT_COORDINATES_PARSERS, + node, + objectStack, + this + ); + if (ring) { + return ring; + } else { + return undefined; + } + } + + /** + * @param {Element} node Node. + * @param {Array<*>} objectStack Object stack. + * @return {LinearRing|undefined} LinearRing. + */ + readLinearRing(node, objectStack) { + const flatCoordinates = this.readFlatCoordinatesFromNode(node, objectStack); + if (flatCoordinates) { + return new LinearRing(flatCoordinates, GeometryLayout.XYZ); + } + } + + /** + * @param {Element} node Node. + * @param {Array<*>} objectStack Object stack. + * @return {Polygon|undefined} Polygon. + */ + readPolygon(node, objectStack) { + /** @type {Array>} */ + const flatLinearRings = pushParseAndPop( + [null], + this.FLAT_LINEAR_RINGS_PARSERS, + node, + objectStack, + this + ); + if (flatLinearRings && flatLinearRings[0]) { + const flatCoordinates = flatLinearRings[0]; + const ends = [flatCoordinates.length]; + let i, ii; + for (i = 1, ii = flatLinearRings.length; i < ii; ++i) { + extend(flatCoordinates, flatLinearRings[i]); + ends.push(flatCoordinates.length); + } + return new Polygon(flatCoordinates, GeometryLayout.XYZ, ends); + } else { + return undefined; + } + } + + /** + * @param {Element} node Node. + * @param {Array<*>} objectStack Object stack. + * @return {Array} Flat coordinates. + */ + readFlatCoordinatesFromNode(node, objectStack) { + return pushParseAndPop( + null, + this.GEOMETRY_FLAT_COORDINATES_PARSERS, + node, + objectStack, + this + ); + } + + /** + * @param {Element} node Node. + * @param {import("./Feature.js").ReadOptions=} opt_options Options. + * @protected + * @return {import("../geom/Geometry.js").default|import("../extent.js").Extent} Geometry. + */ + //@ts-ignore + readGeometryFromNode(node, opt_options) { + const geometry = this.readGeometryElement(node, [ + this.getReadOptions(node, opt_options ? opt_options : {}), + ]); + return geometry ? geometry : null; + } + + /** + * @param {Element} node Node. + * @param {import("./Feature.js").ReadOptions=} opt_options Options. + * @return {Array} Features. + */ + readFeaturesFromNode(node, opt_options) { + const options = { + featureType: this.featureType, + featureNS: this.featureNS, + }; + if (opt_options) { + assign(options, this.getReadOptions(node, opt_options)); + } + const features = this.readFeaturesInternal(node, [options]); + return features || []; + } + + /** + * @param {Element} node Node. + * @return {import("../proj/Projection.js").default} Projection. + */ + readProjectionFromNode(node) { + return getProjection( + this.srsName + ? this.srsName + : node.firstElementChild.getAttribute('srsName') + ); + } +} + +GMLBase.prototype.namespace = GMLNS; + +/** + * @const + * @type {Object>} + */ +GMLBase.prototype.FLAT_LINEAR_RINGS_PARSERS = { + 'http://www.opengis.net/gml': {}, +}; + +/** + * @const + * @type {Object>} + */ +GMLBase.prototype.GEOMETRY_FLAT_COORDINATES_PARSERS = { + 'http://www.opengis.net/gml': {}, +}; + +/** + * @const + * @type {Object>} + */ +GMLBase.prototype.GEOMETRY_PARSERS = { + 'http://www.opengis.net/gml': {}, +}; + +/** + * @const + * @type {Object>} + */ +GMLBase.prototype.MULTIPOINT_PARSERS = { + 'http://www.opengis.net/gml': { + 'pointMember': makeArrayPusher(GMLBase.prototype.pointMemberParser), + 'pointMembers': makeArrayPusher(GMLBase.prototype.pointMemberParser), + }, +}; + +/** + * @const + * @type {Object>} + */ +GMLBase.prototype.MULTILINESTRING_PARSERS = { + 'http://www.opengis.net/gml': { + 'lineStringMember': makeArrayPusher( + GMLBase.prototype.lineStringMemberParser + ), + 'lineStringMembers': makeArrayPusher( + GMLBase.prototype.lineStringMemberParser + ), + }, +}; + +/** + * @const + * @type {Object>} + */ +GMLBase.prototype.MULTIPOLYGON_PARSERS = { + 'http://www.opengis.net/gml': { + 'polygonMember': makeArrayPusher(GMLBase.prototype.polygonMemberParser), + 'polygonMembers': makeArrayPusher(GMLBase.prototype.polygonMemberParser), + }, +}; + +/** + * @const + * @type {Object>} + */ +GMLBase.prototype.POINTMEMBER_PARSERS = { + 'http://www.opengis.net/gml': { + 'Point': makeArrayPusher(GMLBase.prototype.readFlatCoordinatesFromNode), + }, +}; + +/** + * @const + * @type {Object>} + */ +GMLBase.prototype.LINESTRINGMEMBER_PARSERS = { + 'http://www.opengis.net/gml': { + 'LineString': makeArrayPusher(GMLBase.prototype.readLineString), + }, +}; + +/** + * @const + * @type {Object>} + */ +GMLBase.prototype.POLYGONMEMBER_PARSERS = { + 'http://www.opengis.net/gml': { + 'Polygon': makeArrayPusher(GMLBase.prototype.readPolygon), + }, +}; + +/** + * @const + * @type {Object>} + */ +GMLBase.prototype.RING_PARSERS = { + 'http://www.opengis.net/gml': { + 'LinearRing': makeReplacer(GMLBase.prototype.readFlatLinearRing), + }, +}; + +export default GMLBase; \ No newline at end of file diff --git a/src/mapboxgl/theme/common/format/XML.js b/src/mapboxgl/theme/common/format/XML.js new file mode 100644 index 000000000..a019a3bec --- /dev/null +++ b/src/mapboxgl/theme/common/format/XML.js @@ -0,0 +1,54 @@ +/** + * @module ol/format/XML + */ +import {isDocument, parse} from './util/xml.js'; + +/** + * @classdesc + * Generic format for reading non-feature XML data + * + * @abstract + */ +class XML { + /** + * Read the source document. + * + * @param {Document|Element|string} source The XML source. + * @return {Object} An object representing the source. + * @api + */ + read(source) { + if (!source) { + return null; + } else if (typeof source === 'string') { + const doc = parse(source); + return this.readFromDocument(doc); + } else if (isDocument(source)) { + return this.readFromDocument(/** @type {Document} */ (source)); + } else { + return this.readFromNode(/** @type {Element} */ (source)); + } + } + + /** + * @param {Document} doc Document. + * @return {Object} Object + */ + readFromDocument(doc) { + for (let n = doc.firstChild; n; n = n.nextSibling) { + if (n.nodeType == Node.ELEMENT_NODE) { + return this.readFromNode(/** @type {Element} */ (n)); + } + } + return null; + } + + /** + * @abstract + * @param {Element} node Node. + * @return {Object} Object + */ + readFromNode(node) {} +} + +export default XML; \ No newline at end of file diff --git a/src/mapboxgl/theme/common/format/util/array.js b/src/mapboxgl/theme/common/format/util/array.js new file mode 100644 index 000000000..3f7a03315 --- /dev/null +++ b/src/mapboxgl/theme/common/format/util/array.js @@ -0,0 +1,238 @@ +/** + * @module ol/array + */ + +/** + * Performs a binary search on the provided sorted list and returns the index of the item if found. If it can't be found it'll return -1. + * https://github.com/darkskyapp/binary-search + * + * @param {Array<*>} haystack Items to search through. + * @param {*} needle The item to look for. + * @param {Function=} opt_comparator Comparator function. + * @return {number} The index of the item if found, -1 if not. + */ +export function binarySearch(haystack, needle, opt_comparator) { + let mid, cmp; + const comparator = opt_comparator || numberSafeCompareFunction; + let low = 0; + let high = haystack.length; + let found = false; + + while (low < high) { + /* Note that "(low + high) >>> 1" may overflow, and results in a typecast + * to double (which gives the wrong results). */ + mid = low + ((high - low) >> 1); + cmp = +comparator(haystack[mid], needle); + + if (cmp < 0.0) { + /* Too low. */ + low = mid + 1; + } else { + /* Key found or too high */ + high = mid; + found = !cmp; + } + } + + /* Key not found. */ + return found ? low : ~low; + } + + /** + * Compare function for array sort that is safe for numbers. + * @param {*} a The first object to be compared. + * @param {*} b The second object to be compared. + * @return {number} A negative number, zero, or a positive number as the first + * argument is less than, equal to, or greater than the second. + */ + export function numberSafeCompareFunction(a, b) { + return a > b ? 1 : a < b ? -1 : 0; + } + + /** + * Whether the array contains the given object. + * @param {Array<*>} arr The array to test for the presence of the element. + * @param {*} obj The object for which to test. + * @return {boolean} The object is in the array. + */ + export function includes(arr, obj) { + return arr.indexOf(obj) >= 0; + } + + /** + * @param {Array} arr Array. + * @param {number} target Target. + * @param {number} direction 0 means return the nearest, > 0 + * means return the largest nearest, < 0 means return the + * smallest nearest. + * @return {number} Index. + */ + export function linearFindNearest(arr, target, direction) { + const n = arr.length; + if (arr[0] <= target) { + return 0; + } else if (target <= arr[n - 1]) { + return n - 1; + } else { + let i; + if (direction > 0) { + for (i = 1; i < n; ++i) { + if (arr[i] < target) { + return i - 1; + } + } + } else if (direction < 0) { + for (i = 1; i < n; ++i) { + if (arr[i] <= target) { + return i; + } + } + } else { + for (i = 1; i < n; ++i) { + if (arr[i] == target) { + return i; + } else if (arr[i] < target) { + if (arr[i - 1] - target < target - arr[i]) { + return i - 1; + } else { + return i; + } + } + } + } + return n - 1; + } + } + + /** + * @param {Array<*>} arr Array. + * @param {number} begin Begin index. + * @param {number} end End index. + */ + export function reverseSubArray(arr, begin, end) { + while (begin < end) { + const tmp = arr[begin]; + arr[begin] = arr[end]; + arr[end] = tmp; + ++begin; + --end; + } + } + + /** + * @param {Array} arr The array to modify. + * @param {!Array|VALUE} data The elements or arrays of elements to add to arr. + * @template VALUE + */ + export function extend(arr, data) { + const extension = Array.isArray(data) ? data : [data]; + const length = extension.length; + for (let i = 0; i < length; i++) { + arr[arr.length] = extension[i]; + } + } + + /** + * @param {Array} arr The array to modify. + * @param {VALUE} obj The element to remove. + * @template VALUE + * @return {boolean} If the element was removed. + */ + export function remove(arr, obj) { + const i = arr.indexOf(obj); + const found = i > -1; + if (found) { + arr.splice(i, 1); + } + return found; + } + + /** + * @param {Array} arr The array to search in. + * @param {function(VALUE, number, ?) : boolean} func The function to compare. + * @template VALUE + * @return {VALUE|null} The element found or null. + */ + export function find(arr, func) { + const length = arr.length >>> 0; + let value; + + for (let i = 0; i < length; i++) { + value = arr[i]; + if (func(value, i, arr)) { + return value; + } + } + return null; + } + + /** + * @param {Array|Uint8ClampedArray} arr1 The first array to compare. + * @param {Array|Uint8ClampedArray} arr2 The second array to compare. + * @return {boolean} Whether the two arrays are equal. + */ + export function equals(arr1, arr2) { + const len1 = arr1.length; + if (len1 !== arr2.length) { + return false; + } + for (let i = 0; i < len1; i++) { + if (arr1[i] !== arr2[i]) { + return false; + } + } + return true; + } + + /** + * Sort the passed array such that the relative order of equal elements is preverved. + * See https://en.wikipedia.org/wiki/Sorting_algorithm#Stability for details. + * @param {Array<*>} arr The array to sort (modifies original). + * @param {!function(*, *): number} compareFnc Comparison function. + * @api + */ + export function stableSort(arr, compareFnc) { + const length = arr.length; + const tmp = Array(arr.length); + let i; + for (i = 0; i < length; i++) { + tmp[i] = {index: i, value: arr[i]}; + } + tmp.sort(function (a, b) { + return compareFnc(a.value, b.value) || a.index - b.index; + }); + for (i = 0; i < arr.length; i++) { + arr[i] = tmp[i].value; + } + } + + /** + * @param {Array<*>} arr The array to search in. + * @param {Function} func Comparison function. + * @return {number} Return index. + */ + export function findIndex(arr, func) { + let index; + const found = !arr.every(function (el, idx) { + index = idx; + return !func(el, idx, arr); + }); + return found ? index : -1; + } + + /** + * @param {Array<*>} arr The array to test. + * @param {Function=} opt_func Comparison function. + * @param {boolean=} opt_strict Strictly sorted (default false). + * @return {boolean} Return index. + */ + export function isSorted(arr, opt_func, opt_strict) { + const compare = opt_func || numberSafeCompareFunction; + return arr.every(function (currentVal, index) { + if (index === 0) { + return true; + } + const res = compare(arr[index - 1], currentVal); + return !(res > 0 || (opt_strict && res === 0)); + }); + } \ No newline at end of file diff --git a/src/mapboxgl/theme/common/format/util/obj.js b/src/mapboxgl/theme/common/format/util/obj.js new file mode 100644 index 000000000..114bd0099 --- /dev/null +++ b/src/mapboxgl/theme/common/format/util/obj.js @@ -0,0 +1,76 @@ +/** + * @module ol/obj + */ + +/** + * Polyfill for Object.assign(). Assigns enumerable and own properties from + * one or more source objects to a target object. + * See https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign. + * + * @param {!Object} target The target object. + * @param {...Object} var_sources The source object(s). + * @return {!Object} The modified target object. + */ +export const assign = + typeof Object.assign === 'function' + ? Object.assign + : function (target, var_sources) { + if (target === undefined || target === null) { + throw new TypeError('Cannot convert undefined or null to object'); + } + + const output = Object(target); + for (let i = 1, ii = arguments.length; i < ii; ++i) { + const source = arguments[i]; + if (source !== undefined && source !== null) { + for (const key in source) { + if (source.hasOwnProperty(key)) { + output[key] = source[key]; + } + } + } + } + return output; + }; + +/** + * Removes all properties from an object. + * @param {Object} object The object to clear. + */ +export function clear(object) { + for (const property in object) { + delete object[property]; + } +} + +/** + * Polyfill for Object.values(). Get an array of property values from an object. + * See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values + * + * @param {!Object} object The object from which to get the values. + * @return {!Array} The property values. + * @template K,V + */ +export const getValues = + typeof Object.values === 'function' + ? Object.values + : function (object) { + const values = []; + for (const property in object) { + values.push(object[property]); + } + return values; + }; + +/** + * Determine if an object has any properties. + * @param {Object} object The object to check. + * @return {boolean} The object is empty. + */ +export function isEmpty(object) { + let property; + for (property in object) { + return false; + } + return !property; +} \ No newline at end of file diff --git a/src/mapboxgl/theme/common/format/util/xml.js b/src/mapboxgl/theme/common/format/util/xml.js new file mode 100644 index 000000000..5aad47f4a --- /dev/null +++ b/src/mapboxgl/theme/common/format/util/xml.js @@ -0,0 +1,591 @@ +/** + * @module ol/xml + */ +import {extend} from './array.js'; + +/** + * When using {@link module:ol/xml~makeChildAppender} or + * {@link module:ol/xml~makeSimpleNodeFactory}, the top `objectStack` item needs + * to have this structure. + * @typedef {Object} NodeStackItem + * @property {Node} node + */ + +/** + * @typedef {function(Element, Array<*>): void} Parser + */ + +/** + * @typedef {function(Element, *, Array<*>): void} Serializer + */ + +/** + * @type {string} + */ +export const XML_SCHEMA_INSTANCE_URI = + 'http://www.w3.org/2001/XMLSchema-instance'; + +/** + * @param {string} namespaceURI Namespace URI. + * @param {string} qualifiedName Qualified name. + * @return {Element} Node. + */ +export function createElementNS(namespaceURI, qualifiedName) { + return getDocument().createElementNS(namespaceURI, qualifiedName); +} + +/** + * Recursively grab all text content of child nodes into a single string. + * @param {Node} node Node. + * @param {boolean} normalizeWhitespace Normalize whitespace: remove all line + * breaks. + * @return {string} All text content. + * @api + */ +export function getAllTextContent(node, normalizeWhitespace) { + return getAllTextContent_(node, normalizeWhitespace, []).join(''); +} + +/** + * Recursively grab all text content of child nodes into a single string. + * @param {Node} node Node. + * @param {boolean} normalizeWhitespace Normalize whitespace: remove all line + * breaks. + * @param {Array} accumulator Accumulator. + * @private + * @return {Array} Accumulator. + */ +export function getAllTextContent_(node, normalizeWhitespace, accumulator) { + if ( + node.nodeType == Node.CDATA_SECTION_NODE || + node.nodeType == Node.TEXT_NODE + ) { + if (normalizeWhitespace) { + accumulator.push(String(node.nodeValue).replace(/(\r\n|\r|\n)/g, '')); + } else { + accumulator.push(node.nodeValue); + } + } else { + let n; + for (n = node.firstChild; n; n = n.nextSibling) { + getAllTextContent_(n, normalizeWhitespace, accumulator); + } + } + return accumulator; +} + +/** + * @param {Object} object Object. + * @return {boolean} Is a document. + */ +export function isDocument(object) { + return 'documentElement' in object; +} + +/** + * @param {Element} node Node. + * @param {?string} namespaceURI Namespace URI. + * @param {string} name Attribute name. + * @return {string} Value + */ +export function getAttributeNS(node, namespaceURI, name) { + return node.getAttributeNS(namespaceURI, name) || ''; +} + +/** + * Parse an XML string to an XML Document. + * @param {string} xml XML. + * @return {Document} Document. + * @api + */ +export function parse(xml) { + return new DOMParser().parseFromString(xml, 'application/xml'); +} + +/** + * Make an array extender function for extending the array at the top of the + * object stack. + * @param {function(this: T, Node, Array<*>): (Array<*>|undefined)} valueReader Value reader. + * @param {T=} opt_this The object to use as `this` in `valueReader`. + * @return {Parser} Parser. + * @template T + */ +export function makeArrayExtender(valueReader, opt_this) { + return ( + /** + * @param {Node} node Node. + * @param {Array<*>} objectStack Object stack. + */ + function (node, objectStack) { + const value = valueReader.call( + opt_this !== undefined ? opt_this : this, + node, + objectStack + ); + if (value !== undefined) { + const array = /** @type {Array<*>} */ (objectStack[ + objectStack.length - 1 + ]); + extend(array, value); + } + } + ); +} + +/** + * Make an array pusher function for pushing to the array at the top of the + * object stack. + * @param {function(this: T, Element, Array<*>): *} valueReader Value reader. + * @param {T=} opt_this The object to use as `this` in `valueReader`. + * @return {Parser} Parser. + * @template T + */ +export function makeArrayPusher(valueReader, opt_this) { + return ( + /** + * @param {Element} node Node. + * @param {Array<*>} objectStack Object stack. + */ + function (node, objectStack) { + const value = valueReader.call( + opt_this !== undefined ? opt_this : this, + node, + objectStack + ); + if (value !== undefined) { + const array = /** @type {Array<*>} */ (objectStack[ + objectStack.length - 1 + ]); + array.push(value); + } + } + ); +} + +/** + * Make an object stack replacer function for replacing the object at the + * top of the stack. + * @param {function(this: T, Node, Array<*>): *} valueReader Value reader. + * @param {T=} opt_this The object to use as `this` in `valueReader`. + * @return {Parser} Parser. + * @template T + */ +export function makeReplacer(valueReader, opt_this) { + return ( + /** + * @param {Node} node Node. + * @param {Array<*>} objectStack Object stack. + */ + function (node, objectStack) { + const value = valueReader.call( + opt_this !== undefined ? opt_this : this, + node, + objectStack + ); + if (value !== undefined) { + objectStack[objectStack.length - 1] = value; + } + } + ); +} + +/** + * Make an object property pusher function for adding a property to the + * object at the top of the stack. + * @param {function(this: T, Element, Array<*>): *} valueReader Value reader. + * @param {string=} opt_property Property. + * @param {T=} opt_this The object to use as `this` in `valueReader`. + * @return {Parser} Parser. + * @template T + */ +export function makeObjectPropertyPusher(valueReader, opt_property, opt_this) { + return ( + /** + * @param {Element} node Node. + * @param {Array<*>} objectStack Object stack. + */ + function (node, objectStack) { + const value = valueReader.call( + opt_this !== undefined ? opt_this : this, + node, + objectStack + ); + if (value !== undefined) { + const object = /** @type {!Object} */ (objectStack[ + objectStack.length - 1 + ]); + const property = + opt_property !== undefined ? opt_property : node.localName; + let array; + if (property in object) { + array = object[property]; + } else { + array = []; + object[property] = array; + } + array.push(value); + } + } + ); +} + +/** + * Make an object property setter function. + * @param {function(this: T, Element, Array<*>): *} valueReader Value reader. + * @param {string=} opt_property Property. + * @param {T=} opt_this The object to use as `this` in `valueReader`. + * @return {Parser} Parser. + * @template T + */ +export function makeObjectPropertySetter(valueReader, opt_property, opt_this) { + return ( + /** + * @param {Element} node Node. + * @param {Array<*>} objectStack Object stack. + */ + function (node, objectStack) { + const value = valueReader.call( + opt_this !== undefined ? opt_this : this, + node, + objectStack + ); + if (value !== undefined) { + const object = /** @type {!Object} */ (objectStack[ + objectStack.length - 1 + ]); + const property = + opt_property !== undefined ? opt_property : node.localName; + object[property] = value; + } + } + ); +} + +/** + * Create a serializer that appends nodes written by its `nodeWriter` to its + * designated parent. The parent is the `node` of the + * {@link module:ol/xml~NodeStackItem} at the top of the `objectStack`. + * @param {function(this: T, Node, V, Array<*>): void} nodeWriter Node writer. + * @param {T=} opt_this The object to use as `this` in `nodeWriter`. + * @return {Serializer} Serializer. + * @template T, V + */ +export function makeChildAppender(nodeWriter, opt_this) { + return function (node, value, objectStack) { + nodeWriter.call( + opt_this !== undefined ? opt_this : this, + node, + value, + objectStack + ); + const parent = /** @type {NodeStackItem} */ (objectStack[ + objectStack.length - 1 + ]); + const parentNode = parent.node; + parentNode.appendChild(node); + }; +} + +/** + * Create a serializer that calls the provided `nodeWriter` from + * {@link module:ol/xml~serialize}. This can be used by the parent writer to have the + * 'nodeWriter' called with an array of values when the `nodeWriter` was + * designed to serialize a single item. An example would be a LineString + * geometry writer, which could be reused for writing MultiLineString + * geometries. + * @param {function(this: T, Element, V, Array<*>): void} nodeWriter Node writer. + * @param {T=} opt_this The object to use as `this` in `nodeWriter`. + * @return {Serializer} Serializer. + * @template T, V + */ +export function makeArraySerializer(nodeWriter, opt_this) { + let serializersNS, nodeFactory; + return function (node, value, objectStack) { + if (serializersNS === undefined) { + serializersNS = {}; + const serializers = {}; + serializers[node.localName] = nodeWriter; + serializersNS[node.namespaceURI] = serializers; + nodeFactory = makeSimpleNodeFactory(node.localName); + } + serialize(serializersNS, nodeFactory, value, objectStack); + }; +} + +/** + * Create a node factory which can use the `opt_keys` passed to + * {@link module:ol/xml~serialize} or {@link module:ol/xml~pushSerializeAndPop} as node names, + * or a fixed node name. The namespace of the created nodes can either be fixed, + * or the parent namespace will be used. + * @param {string=} opt_nodeName Fixed node name which will be used for all + * created nodes. If not provided, the 3rd argument to the resulting node + * factory needs to be provided and will be the nodeName. + * @param {string=} opt_namespaceURI Fixed namespace URI which will be used for + * all created nodes. If not provided, the namespace of the parent node will + * be used. + * @return {function(*, Array<*>, string=): (Node|undefined)} Node factory. + */ +export function makeSimpleNodeFactory(opt_nodeName, opt_namespaceURI) { + const fixedNodeName = opt_nodeName; + return ( + /** + * @param {*} value Value. + * @param {Array<*>} objectStack Object stack. + * @param {string=} opt_nodeName Node name. + * @return {Node} Node. + */ + function (value, objectStack, opt_nodeName) { + const context = /** @type {NodeStackItem} */ (objectStack[ + objectStack.length - 1 + ]); + const node = context.node; + let nodeName = fixedNodeName; + if (nodeName === undefined) { + nodeName = opt_nodeName; + } + + const namespaceURI = + opt_namespaceURI !== undefined ? opt_namespaceURI : node.namespaceURI; + return createElementNS(namespaceURI, /** @type {string} */ (nodeName)); + } + ); +} + +/** + * A node factory that creates a node using the parent's `namespaceURI` and the + * `nodeName` passed by {@link module:ol/xml~serialize} or + * {@link module:ol/xml~pushSerializeAndPop} to the node factory. + * @const + * @type {function(*, Array<*>, string=): (Node|undefined)} + */ +export const OBJECT_PROPERTY_NODE_FACTORY = makeSimpleNodeFactory(); + +/** + * Create an array of `values` to be used with {@link module:ol/xml~serialize} or + * {@link module:ol/xml~pushSerializeAndPop}, where `orderedKeys` has to be provided as + * `opt_key` argument. + * @param {Object} object Key-value pairs for the sequence. Keys can + * be a subset of the `orderedKeys`. + * @param {Array} orderedKeys Keys in the order of the sequence. + * @return {Array<*>} Values in the order of the sequence. The resulting array + * has the same length as the `orderedKeys` array. Values that are not + * present in `object` will be `undefined` in the resulting array. + */ +export function makeSequence(object, orderedKeys) { + const length = orderedKeys.length; + const sequence = new Array(length); + for (let i = 0; i < length; ++i) { + sequence[i] = object[orderedKeys[i]]; + } + return sequence; +} + +/** + * Create a namespaced structure, using the same values for each namespace. + * This can be used as a starting point for versioned parsers, when only a few + * values are version specific. + * @param {Array} namespaceURIs Namespace URIs. + * @param {T} structure Structure. + * @param {Object=} opt_structureNS Namespaced structure to add to. + * @return {Object} Namespaced structure. + * @template T + */ +export function makeStructureNS(namespaceURIs, structure, opt_structureNS) { + /** + * @type {Object} + */ + const structureNS = opt_structureNS !== undefined ? opt_structureNS : {}; + let i, ii; + for (i = 0, ii = namespaceURIs.length; i < ii; ++i) { + structureNS[namespaceURIs[i]] = structure; + } + return structureNS; +} + +/** + * Parse a node using the parsers and object stack. + * @param {Object>} parsersNS + * Parsers by namespace. + * @param {Element} node Node. + * @param {Array<*>} objectStack Object stack. + * @param {*=} opt_this The object to use as `this`. + */ +export function parseNode(parsersNS, node, objectStack, opt_this) { + let n; + for (n = node.firstElementChild; n; n = n.nextElementSibling) { + const parsers = parsersNS[n.namespaceURI]; + if (parsers !== undefined) { + const parser = parsers[n.localName]; + if (parser !== undefined) { + parser.call(opt_this, n, objectStack); + } + } + } +} + +/** + * Push an object on top of the stack, parse and return the popped object. + * @param {T} object Object. + * @param {Object>} parsersNS + * Parsers by namespace. + * @param {Element} node Node. + * @param {Array<*>} objectStack Object stack. + * @param {*=} opt_this The object to use as `this`. + * @return {T} Object. + * @template T + */ +export function pushParseAndPop( + object, + parsersNS, + node, + objectStack, + opt_this +) { + objectStack.push(object); + parseNode(parsersNS, node, objectStack, opt_this); + return /** @type {T} */ (objectStack.pop()); +} + +/** + * Walk through an array of `values` and call a serializer for each value. + * @param {Object>} serializersNS + * Namespaced serializers. + * @param {function(this: T, *, Array<*>, (string|undefined)): (Node|undefined)} nodeFactory + * Node factory. The `nodeFactory` creates the node whose namespace and name + * will be used to choose a node writer from `serializersNS`. This + * separation allows us to decide what kind of node to create, depending on + * the value we want to serialize. An example for this would be different + * geometry writers based on the geometry type. + * @param {Array<*>} values Values to serialize. An example would be an array + * of {@link module:ol/Feature~Feature} instances. + * @param {Array<*>} objectStack Node stack. + * @param {Array=} opt_keys Keys of the `values`. Will be passed to the + * `nodeFactory`. This is used for serializing object literals where the + * node name relates to the property key. The array length of `opt_keys` has + * to match the length of `values`. For serializing a sequence, `opt_keys` + * determines the order of the sequence. + * @param {T=} opt_this The object to use as `this` for the node factory and + * serializers. + * @template T + */ +export function serialize( + serializersNS, + nodeFactory, + values, + objectStack, + opt_keys, + opt_this +) { + const length = (opt_keys !== undefined ? opt_keys : values).length; + let value, node; + for (let i = 0; i < length; ++i) { + value = values[i]; + if (value !== undefined) { + node = nodeFactory.call( + opt_this !== undefined ? opt_this : this, + value, + objectStack, + opt_keys !== undefined ? opt_keys[i] : undefined + ); + if (node !== undefined) { + serializersNS[node.namespaceURI][node.localName].call( + opt_this, + node, + value, + objectStack + ); + } + } + } +} + +/** + * @param {O} object Object. + * @param {Object>} serializersNS + * Namespaced serializers. + * @param {function(this: T, *, Array<*>, (string|undefined)): (Node|undefined)} nodeFactory + * Node factory. The `nodeFactory` creates the node whose namespace and name + * will be used to choose a node writer from `serializersNS`. This + * separation allows us to decide what kind of node to create, depending on + * the value we want to serialize. An example for this would be different + * geometry writers based on the geometry type. + * @param {Array<*>} values Values to serialize. An example would be an array + * of {@link module:ol/Feature~Feature} instances. + * @param {Array<*>} objectStack Node stack. + * @param {Array=} opt_keys Keys of the `values`. Will be passed to the + * `nodeFactory`. This is used for serializing object literals where the + * node name relates to the property key. The array length of `opt_keys` has + * to match the length of `values`. For serializing a sequence, `opt_keys` + * determines the order of the sequence. + * @param {T=} opt_this The object to use as `this` for the node factory and + * serializers. + * @return {O|undefined} Object. + * @template O, T + */ +export function pushSerializeAndPop( + object, + serializersNS, + nodeFactory, + values, + objectStack, + opt_keys, + opt_this +) { + objectStack.push(object); + serialize( + serializersNS, + nodeFactory, + values, + objectStack, + opt_keys, + opt_this + ); + return /** @type {O|undefined} */ (objectStack.pop()); +} + +let xmlSerializer_ = undefined; + +/** + * Register a XMLSerializer. Can be used to inject a XMLSerializer + * where there is no globally available implementation. + * + * @param {XMLSerializer} xmlSerializer A XMLSerializer. + * @api + */ +export function registerXMLSerializer(xmlSerializer) { + xmlSerializer_ = xmlSerializer; +} + +/** + * @return {XMLSerializer} The XMLSerializer. + */ +export function getXMLSerializer() { + if (xmlSerializer_ === undefined && typeof XMLSerializer !== 'undefined') { + xmlSerializer_ = new XMLSerializer(); + } + return xmlSerializer_; +} + +let document_ = undefined; + +/** + * Register a Document to use when creating nodes for XML serializations. Can be used + * to inject a Document where there is no globally available implementation. + * + * @param {Document} document A Document. + * @api + */ +export function registerDocument(document) { + document_ = document; +} + +/** + * Get a document that should be used when creating nodes for XML serializations. + * @return {Document} The document. + */ +export function getDocument() { + if (document_ === undefined && typeof document !== 'undefined') { + document_ = document.implementation.createDocument('', '', null); + } + return document_; +} \ No newline at end of file diff --git a/src/mapboxgl/theme/common/overlay/Bar.js b/src/mapboxgl/theme/common/overlay/Bar.js new file mode 100644 index 000000000..af7b1ecff --- /dev/null +++ b/src/mapboxgl/theme/common/overlay/Bar.js @@ -0,0 +1,351 @@ +import { Common } from '@mapgis/webclient-es6-service'; +const { Zondy, copyAttributesWithClip } = Common; + +import {ShapeFactory} from './feature/ShapeFactory'; +import {Polygon as FeaturePolygon} from './feature/Polygon'; +import {Color} from './levelRender/Color'; +import {Graph} from './Graph'; + +/** + * @private + * @class Zondy.Theme.Bar + * @classdesc 柱状图 。 + * @example + * // barStyleByCodomain参数用法如下： + * // barStyleByCodomain 的每个元素是个包含值域信息和与值域对应样式信息的对象，该对象（必须）有三个属性： + * // start: 值域值下限（包含）; + * // end: 值域值上限（不包含）; + * // style: 数据可视化图形的 style，这个样式对象的可设属性： 。 + * // barStyleByCodomain 数组形如： + * [ + * { + * start:0, + * end:250, + * style:{ + * fillColor:"#00CD00" + * } + * }, + * { + * start:250, + * end:500, + * style:{ + * fillColor:"#00EE00" + * } + * }, + * { + * start:500, + * end:750, + * style:{ + * fillColor:"#00FF7F" + * } + * }, + * { + * start:750, + * end:1500, + * style:{ + * fillColor:"#00FF00" + * } + * } + * ] + * @extends Zondy.Feature.Theme.Graph + * @param {Zondy.Feature.Vector} data - 用户数据。 + * @param {Zondy.Layer.Graph} layer - 此专题要素所在图层。 + * @param {Array.} fields - data 属性中的参与此图表生成的属性字段名称。 + * @param {Zondy.Theme.Bar.setting} setting - 图表配置对象。 + * @param {Zondy.LonLat} [lonlat] - 专题要素地理位置。默认为 data 指代的地理要素 Bounds 中心。 + * + * @typedef {Object} Zondy.Theme.Bar.setting + * @property {number} width - 专题要素（图表）宽度。 + * @property {number} height - 专题要素（图表）高度。 + * @property {Array.} codomain - 图表允许展示的数据值域，长度为 2 的一维数组，第一个元素表示值域下限，第二个元素表示值域上限。 + * @property {number} [XOffset] - 专题要素（图表）在 X 方向上的偏移值，单位像素。 + * @property {number} [YOffset] - 专题要素（图表）在 Y 方向上的偏移值，单位像素。 + * @property {Array.} [dataViewBoxParameter] - 数据视图框 dataViewBox 参数，它是指图表框 chartBox （由图表位置、图表宽度、图表高度构成的图表范围框） + * 在左、下，右，上四个方向上的内偏距值。当使用坐标轴时 dataViewBoxParameter 的默认值为：[45, 15, 15, 15]； + * 不使用坐标轴时 dataViewBoxParameter 的默认值为：[5, 5, 5, 5]。 + * @property {number} [decimalNumber] - 数据值数组 dataValues 元素值小数位数，数据的小数位处理参数，取值范围：[0, 16]。如果不设置此参数，在取数据值时不对数据做小数位处理。 + * @property {boolean} [useBackground=true] - 是否使用图表背景框。 + * @property {Zondy.Feature.ShapeParameters.Rectangle.style} [backgroundStyle] - 背景样式。 + * @property {Array.} [backgroundRadius=[0, 0, 0, 0]] - 背景框矩形圆角半径，可以用数组分别指定四个角的圆角半径，设：左上、右上、右下、左下角的半径依次为 r1、r2、r3、r4 , + * 则 backgroundRadius 为 [r1、r2、r3、r4]。 + * @property {Array.} xShapeBlank - 水平方向上的图形空白间隔参数。长度为 3 的数组，第一元素表示第一个图形左端与数据视图框左端的空白间距，第二个元素表示图形间空白间距， + * 第三个元素表示最后一个图形右端与数据视图框右端端的空白间距 。 + * @property {boolean} [showShadow=true] - 阴影开关。 + * @property {Object} [barShadowStyle] - 阴影样式,如：{shadowBlur : 8, shadowOffsetX: 2 , shadowOffsetY : 2,shadowColor : "rgba(100,100,100,0.8)"} + * @property {Array.} [barLinearGradient] - 按字段设置柱条样式[渐变开始颜色,渐变终止颜色] 与 themeLayer.themeFields 中的字段一一对应）， + * 如：[["#00FF00","#00CD00"],["#00CCFF","#5E87A2"],["#00FF66","#669985"],["#CCFF00","#94A25E"],["#FF9900","#A2945E"]] + * @property {boolean} [useAxis=true] - 是否使用坐标轴。
+ * @property {Zondy.Feature.ShapeParameters.Line.style} [axisStyle] - 坐标轴样式。 + * @property {boolean} [axisUseArrow=false] - 坐标轴是否使用箭头。 + * @property {number} [axisYTick=0] - y 轴刻度数量。 + * @property {Array.} [axisYLabels] - y 轴上的标签组内容，标签顺序沿着数据视图框左面条边自上而下，等距排布。例如：["1000", "750", "500", "250", "0"]。 + * @property {Zondy.Feature.ShapeParameters.Label.style} [axisYLabelsStyle] - y 轴上的标签组样式。 + * @property {Array.} [axisYLabelsOffset=[0,0]] - y 轴上的标签组偏移量。长度为 2 的数组，数组第一项表示 y 轴标签组横向上的偏移量，向左为正；数组第二项表示 y 轴标签组纵向上的偏移量，向下为正。 + * @property {Array.} [axisXLabels] - x 轴上的标签组内容，标签顺序沿着数据视图框下面条边自左向右排布，例如：["92年", "95年", "99年"]。标签排布规则：当标签数量与 xShapeInfo 中的属性 xShapeCenter 数量相同（即标签个数与数据个数相等时）, 按照 xShapeCenter 提供的位置排布标签,否则沿数据视图框下面条边等距排布标签。 + * @property {Zondy.Feature.ShapeParameters.Label.style} [axisXLabelsStyle] - x 轴上的标签组样式。 + * @property {Array.} [axisXLabelsOffset=[0,0]] - x 轴上的标签组偏移量。长度为 2 的数组，数组第一项表示 x 轴标签组横向上的偏移量，向左为正；数组第二项表示 x 轴标签组纵向上的偏移量，向下为正。 + * @property {boolean} [useXReferenceLine] - 是否使用水平参考线，如果为 true，在 axisYTick 大于 0 时有效，水平参考线是 y 轴刻度在数据视图框里的延伸。 + * @property {Zondy.Feature.ShapeParameters.Line.style} xReferenceLineStyle - 水平参考线样式。 + * @property {Object} barStyle - 柱状图柱条基础 style，此参数控制柱条基础样式，优先级低于 barStyleByFields 和 barStyleByCodomain。 + * @property {Array.} barStyleByFields - 按专题字段 themeFields（）为柱条赋 style，此参数按字段控制柱条样式，优先级低于 barStyleByCodomain，高于 barStyle。此数组中的元素是样式对象。此参数中的 style 与 themeFields 中的字段一一对应 。例如： themeFields（） 为 ["POP_1992", "POP_1995", "POP_1999"],barStyleByFields 为[style1, style2, style3]，则在图表中，字段 POP_1992 对应的柱条使用 style1，字段 POP_1995 对应的柱条使用 style2 ，字段 POP_1999 对应的柱条使用 style3。 + * @property {Array.} barStyleByCodomain - 按柱条代表的数据值所在值域范围控制柱条样式，优先级高于 barStyle 和 barStyleByFields。 + * @property {Object} [barHoverStyle] - 柱条 hover 状态时的样式，barHoverAble 为 true 时有效。 + * @property {Object} [barHoverAble] - 是否允许柱条使用 hover 状态，默认允许。同时设置 barHoverAble 和 barClickAble 为 false，可以直接屏蔽柱条对专题图层事件的响应。 + * @property {Object} [barClickAble] - 是否允许柱条被点击，默认允许。同时设置 barHoverAble 和 barClickAble 为 false，可以直接屏蔽柱条对专题图层事件的响应。 + */ +class Bar extends Graph { + + constructor(data, layer, fields, setting, lonlat, option) { + super(data, layer, fields, setting, lonlat, option); + this.CLASS_NAME = "Zondy.Theme.Bar"; + } + + /** + * @function Zondy.Theme.Bar.prototype.destroy + * @override + */ + destroy() { + super.destroy(); + } + + /** + * @function Zondy.Theme.Bar.prototype.assembleShapes + * @description 图表图形装配函数。 + */ + assembleShapes() { + //默认渐变颜色数组 + var deafaultColors = [["#00FF00", "#00CD00"], ["#00CCFF", "#5E87A2"], ["#00FF66", "#669985"], ["#CCFF00", "#94A25E"], ["#FF9900", "#A2945E"]]; + + //默认阴影 + var deafaultShawdow = { + showShadow: true, + shadowBlur: 8, + shadowColor: "rgba(100,100,100,0.8)", + shadowOffsetX: 2, + shadowOffsetY: 2 + }; + + // 图表配置对象 + var sets = this.setting; + + if (!sets.barLinearGradient) { + sets.barLinearGradient = deafaultColors; + } + + // 默认数据视图框 + if (!sets.dataViewBoxParameter) { + if (typeof (sets.useAxis) === "undefined" || sets.useAxis) { + sets.dataViewBoxParameter = [45, 15, 15, 15]; + } else { + sets.dataViewBoxParameter = [5, 5, 5, 5]; + } + } + + // 重要步骤：初始化参数 + if (!this.initBaseParameter()) { + return; + } + // 值域 + var codomain = this.DVBCodomain; + // 重要步骤：定义图表 Bar 数据视图框中单位值的含义 + this.DVBUnitValue = (codomain[1] - codomain[0]) / this.DVBHeight; + + // 数据视图域 + var dvb = this.dataViewBox; + // 用户数据值 + var fv = this.dataValues; + if (fv.length < 1) { + return; + } // 没有数据 + + // 数据溢出值域范围处理 + for (let i = 0, fvLen = fv.length; i < fvLen; i++) { + if (fv[i] < codomain[0] || fv[i] > codomain[1]) { + return; + } + } + + // 获取 x 轴上的图形信息 + var xShapeInfo = this.calculateXShapeInfo(); + if (!xShapeInfo) { + return; + } + // 每个柱条 x 位置 + var xsLoc = xShapeInfo.xPositions; + // 柱条宽度 + var xsWdith = xShapeInfo.width; + + // 背景框，默认启用 + if (typeof (sets.useBackground) === "undefined" || sets.useBackground) { + // 将背景框图形添加到模型的 shapes 数组，注意添加顺序，后添加的图形在先添加的图形之上。 + this.shapes.push(ShapeFactory.Background(this.shapeFactory, this.chartBox, sets)); + } + + // 坐标轴, 默认启用 + if (typeof (sets.useAxis) === "undefined" || sets.useAxis) { + // 添加坐标轴图形数组 + this.shapes = this.shapes.concat(ShapeFactory.GraphAxis(this.shapeFactory, dvb, sets, xShapeInfo)); + } + + for (var i = 0; i < fv.length; i++) { + // 计算柱条 top 边的 y 轴坐标值 + var yPx = dvb[1] - (fv[i] - codomain[0]) / this.DVBUnitValue; + + // 柱条节点数组 + var poiLists = [ + [xsLoc[i] - xsWdith / 2, dvb[1] - 1], + [xsLoc[i] + xsWdith / 2, dvb[1] - 1], + [xsLoc[i] + xsWdith / 2, yPx], + [xsLoc[i] - xsWdith / 2, yPx] + ]; + + // 柱条参数对象（一个面参数对象） + var barParams = new FeaturePolygon(poiLists); + + // 柱条 阴影 style + if (typeof (sets.showShadow) === "undefined" || sets.showShadow) { + if (sets.barShadowStyle) { + var sss = sets.barShadowStyle; + if (sss.shadowBlur) { + deafaultShawdow.shadowBlur = sss.shadowBlur; + } + if (sss.shadowColor) { + deafaultShawdow.shadowColor = sss.shadowColor; + } + if (sss.shadowOffsetX) { + deafaultShawdow.shadowOffsetX = sss.shadowOffsetX; + } + if (sss.shadowOffsetY) { + deafaultShawdow.shadowOffsetY = sss.shadowOffsetY; + } + } + barParams.style = {}; + copyAttributesWithClip(barParams.style, deafaultShawdow); + } + + // 图形携带的数据信息 + barParams.refDataID = this.data.FID; + barParams.dataInfo = { + field: this.fields[i], + value: fv[i] + }; + + // 柱条 hover click + if (typeof (sets.barHoverAble) !== "undefined") { + barParams.hoverable = sets.barHoverAble; + } + if (typeof (sets.barClickAble) !== "undefined") { + barParams.clickable = sets.barClickAble; + } + + // 创建柱条并添加到图表图形数组中 + this.shapes.push(this.shapeFactory.createShape(barParams)); + } + + // 重要步骤：将图形转为由相对坐标表示的图形，以便在地图平移缩放过程中快速重绘图形 + // （统计专题图模块从结构上要求使用相对坐标，assembleShapes() 函数必须在图形装配完成后调用 shapesConvertToRelativeCoordinate() 函数） + this.shapesConvertToRelativeCoordinate(); + } + + /** + * @function Zondy.Theme.Bar.prototype.calculateXShapeInfo + * @description 计算 X 轴方向上的图形信息，此信息是一个对象，包含两个属性， + * 属性 xPositions 是一个一维数组，该数组元素表示图形在 x 轴方向上的像素坐标值， + * 如果图形在 x 方向上有一定宽度，通常取图形在 x 方向上的中心点为图形在 x 方向上的坐标值。 + * width 表示图形的宽度（特别注意：点的宽度始终为 0，而不是其直径）。 + * 本函数中图形配置对象 setting 可设属性： + * xShapeBlank - {Array.} 水平方向上的图形空白间隔参数。 + * 长度为 3 的数组，第一元素表示第一个图形左端与数据视图框左端的空白间距，第二个元素表示图形间空白间距， + * 第三个元素表示最后一个图形右端与数据视图框右端端的空白间距 。 + * @returns {Object} 如果计算失败，返回 null；如果计算成功，返回 X 轴方向上的图形信息，此信息是一个对象，包含以下两个属性： + * xPositions - {Array.} 表示图形在 x 轴方向上的像素坐标值，如果图形在 x 方向上有一定宽度，通常取图形在 x 方向上的中心点为图形在 x 方向上的坐标值。 + * width - {number} 表示图形的宽度（特别注意：点的宽度始终为 0，而不是其直径）。 + * + */ + calculateXShapeInfo() { + var dvb = this.dataViewBox; // 数据视图框 + var sets = this.setting; // 图表配置对象 + var fvc = this.dataValues.length; // 数组值个数 + + if (fvc < 1) { + return null; + } + + var xBlank; // x 轴空白间隔参数 + var xShapePositions = []; // x 轴上图形的位置 + var xShapeWidth = 0; // x 轴上图形宽度(自适应) + var dvbWidth = this.DVBWidth; // 数据视图框宽度 + + // x 轴空白间隔参数处理 + if (sets.xShapeBlank && sets.xShapeBlank.length && sets.xShapeBlank.length === 3) { + xBlank = sets.xShapeBlank; + var xsLen = dvbWidth - (xBlank[0] + xBlank[2] + (fvc - 1) * xBlank[1]); + if (xsLen <= fvc) { + return null; + } + xShapeWidth = xsLen / fvc + } else { + // 默认使用等距离空白间隔，空白间隔为图形宽度 + xShapeWidth = dvbWidth / (2 * fvc + 1); + xBlank = [xShapeWidth, xShapeWidth, xShapeWidth]; + } + + // 图形 x 轴上的位置计算 + var xOffset = 0; + for (var i = 0; i < fvc; i++) { + if (i === 0) { + xOffset = xBlank[0] + xShapeWidth / 2; + } else { + xOffset += (xShapeWidth + xBlank[1]); + } + + xShapePositions.push(dvb[0] + xOffset); + } + + return { + "xPositions": xShapePositions, + "width": xShapeWidth + }; + } + + /** + * @function Zondy.Theme.Bar.prototype.resetLinearGradient + * @description 图表的相对坐标存在的时候，重新计算渐变的颜色(目前用于二维柱状图 所以子类实现此方法)。 + */ + resetLinearGradient() { + if (this.RelativeCoordinate) { + var shpelength = this.shapes.length; + var barLinearGradient = this.setting.barLinearGradient; + var index = -1; + for (var i = 0; i < shpelength; i++) { + var shape = this.shapes[i]; + if (shape.CLASS_NAME === "Zondy.LevelRenderer.Shape.SmicPolygon") { + var style = shape.style; + //计算出当前的绝对 x y + var x1 = this.location[0] + style.pointList[0][0]; + var x2 = this.location[0] + style.pointList[1][0]; + + //渐变颜色 + index++; + //以防定义的颜色数组不够用 + if (index >= barLinearGradient.length) { + index = index % barLinearGradient.length; + } + var color1 = barLinearGradient[index][0]; + var color2 = barLinearGradient[index][1]; + + //颜色 + var zcolor = new Color(); + var linearGradient = zcolor.getLinearGradient(x1, 0, x2, 0, + [[0, color1], [1, color2]]); + + //赋值 + shape.style.color = linearGradient; + } + } + } + } +} + +export {Bar}; +Zondy.Theme.Bar = Bar; \ No newline at end of file diff --git a/src/mapboxgl/theme/common/overlay/Bar3D.js b/src/mapboxgl/theme/common/overlay/Bar3D.js new file mode 100644 index 000000000..6655c75a1 --- /dev/null +++ b/src/mapboxgl/theme/common/overlay/Bar3D.js @@ -0,0 +1,433 @@ +import { Common } from '@mapgis/webclient-es6-service'; +const { Zondy, newGuid } = Common; + +import {ShapeFactory} from './feature/ShapeFactory'; +import {Polygon as FeaturePolygon} from './feature/Polygon'; +import {Graph} from './Graph'; + +/** + * @private + * @class Zondy.Theme.Bar3D + * @classdesc 三维柱状图 。 + * @extends Zondy.Feature.Theme.Graph + * @param {Zondy.Feature.Vector} data - 用户数据。 + * @param {Zondy.Layer.Graph} layer - 此专题要素所在图层。 + * @param {Array.} fields - data 中的参与此图表生成的字段名称。 + * @param {Zondy.Theme.Bar3D.setting} setting - 图表配置对象。 + * @param {Zondy.LonLat} [lonlat] - 专题要素地理位置，默认为 data 指代的地理要素 Bounds 中心。 + * + * @typedef {Object} Zondy.Theme.Bar3D.setting + * @property {number} width - 专题要素（图表）宽度。 + * @property {number} height - 专题要素（图表）高度。 + * @property {Array.} codomain - 图表允许展示的数据值域，长度为 2 的一维数组，第一个元素表示值域下限，第二个元素表示值域上限。 + * @property {number} [XOffset] - 专题要素（图表）在 X 方向上的偏移值，单位像素。 + * @property {number} [YOffset] - 专题要素（图表）在 Y 方向上的偏移值，单位像素。 + * @property {Array.} [dataViewBoxParameter] - 数据视图框 dataViewBox 参数，它是指图表框 chartBox （由图表位置、图表宽度、图表高度构成的图表范围框）在左、下，右，上四个方向上的内偏距值。当使用坐标轴时 dataViewBoxParameter 的默认值为：[45, 25, 20, 20]；不使用坐标轴时 dataViewBoxParameter 的默认值为：[5, 5, 5, 5]。 + * @property {number} [decimalNumber] - 数据值数组 dataValues 元素值小数位数，数据的小数位处理参数，取值范围：[0, 16]。如果不设置此参数，在取数据值时不对数据做小数位处理。 + * @property {boolean} [useBackground=true] - 是否使用图表背景框。 + * @property {Zondy.Feature.ShapeParameters.Rectangle.style} [backgroundStyle] - 背景样式。 + * @property {Array.} [backgroundRadius=[0, 0, 0, 0]] - 背景框矩形圆角半径，可以用数组分别指定四个角的圆角半径，设：左上、右上、右下、左下角的半径依次为 r1、r2、r3、r4 ,则 backgroundRadius 为 [r1、r2、r3、r4 ]。 + * @property {Array.} [xShapeBlank] - 水平方向上的图形空白间隔参数。长度为 3 的数组，第一元素表示第一个图形左端与数据视图框左端的空白间距，第二个元素表示图形间空白间距，第三个元素表示最后一个图形右端与数据视图框右端端的空白间距 。 + * @property {number} [bar3DParameter=10] - 3D 柱状参数，3d柱形正面相对于背面向 x 轴和 y 轴负方向偏移的绝对值。 + * @property {boolean} [useAxis=true] - 是否使用坐标轴。 + * @property {Zondy.Feature.ShapeParameters.Line.style} [axisStyle] - 坐标轴样式。 + * @property {boolean} [axisUseArrow=true] -坐标轴是否使用箭头。 + * @property {number} [axisYTick=0] - y 轴刻度数量。 + * @property {Array.} [axisYLabels] - y 轴上的标签组内容，标签顺序沿着数据视图框左面条边自上而下，等距排布。例如：["1000", "750", "500", "250", "0"]。 + * @property {Zondy.Feature.ShapeParameters.Label.style} [axisYLabelsStyle] - y 轴上的标签组样式。 + * @property {Array.} [axisYLabelsOffset=0] - y 轴上的标签组偏移量。长度为 2 的数组，数组第一项表示 y 轴标签组横向上的偏移量，向左为正，默认值：0；数组第二项表示 y 轴标签组纵向上的偏移量，向下为正。 + * @property {Array.} [axisXLabels] - x 轴上的标签组内容，标签顺序沿着数据视图框下面条边自左向右排布，例如：["92年", "95年", "99年"]。标签排布规则：当标签数量与 xShapeInfo 中的属性 xShapeCenter 数量相同（即标签个数与数据个数相等时）, 按照 xShapeCenter 提供的位置排布标签，否则沿数据视图框下面条边等距排布标签。 + * @property {Zondy.Feature.ShapeParameters.Label.style} axisXLabelsStyle - x 轴上的标签组样式。 + * @property {Array.} axisXLabelsOffset - x 轴上的标签组偏移量。长度为 2 的数组，数组第一项表示 x 轴标签组横向上的偏移量，向左为正，默认值：-10；数组第二项表示 x 轴标签组纵向上的偏移量，向下为正，默认值：10。 + * @property {boolean} [useXReferenceLine] - 是否使用水平参考线，如果为 true，在 axisYTick 大于 0 时有效，水平参考线是 y 轴刻度在数据视图框里的延伸。 + * @property {Zondy.Feature.ShapeParameters.Line.style} [xReferenceLineStyle] - 水平参考线样式。 + * @property {number} [axis3DParameter=20] - 3D 坐标轴参数，此属性值在大于等于 15 时有效。 + * @property {Zondy.Feature.ShapeParameters.Polygon.style} barFaceStyle - 3d 柱状图柱条正面基础 style，此参数控制柱条正面基础样式，优先级低于 barFaceStyleByFields 和 barFaceStyleByCodomain。 + * @property {Array.} [barFaceStyleByFields] - 按专题字段 themeFields（）为柱条正面赋 style，此参数按字段控制柱条正面样式，优先级低于 barFaceStyleByCodomain，高于 barFaceStyle。此数组中的元素是样式对象。此参数中的 style 与 themeFields 中的字段一一对应 。例如： themeFields（） 为 ["POP_1992", "POP_1995", "POP_1999"],barFaceStyleByFields 为[style1, style2, style3]，则在图表中，字段 POP_1992 对应的柱条正面使用 style1，字段 POP_1995 对应的柱条正面使用 style2 ，字段 POP_1999 对应的柱条正面使用 style3。 + * @property {Array.} [barFaceStyleByCodomain] - 按柱条正面代表的数据值所在值域范围控制柱条正面样式，优先级高于 barFaceStyle 和 barFaceStyleByFields。 + * @property {Zondy.Feature.ShapeParameters.Polygon.style} [barSideStyle=barFaceStyle] - 3d 柱状图柱条侧面基础 style，此参数控制柱条侧面基础样式，优先级低于 barSideStyleByFields 和 barSideStyleByCodomain。 + * @property {Array.} [barSideStyleByFields] - 按专题字段 themeFields（）为柱条侧面赋style，此数按字段控制柱条侧面样式，优先级低于 barSideStyleByCodomain，高于 barSideStyle。此数组中的元素是样式对象。此参数中的 style 与 themeFields 中的字段一一对应 。例如： themeFields（） 为 ["POP_1992", "POP_1995", "POP_1999"],barSideStyleByFields 为[style1, style2, style3]，则在图表中，字段 POP_1992 对应的柱条侧面使用 style1，字段 POP_1995对应的柱条侧面使用style2，字段POP_1999对应的柱条侧面使用style3。默认值：barFaceStyleByFields。 + * @property {Array.} [barSideStyleByCodomain=barFaceStyleByCodomain] - 按柱条侧面代表的数据值所在值域范围控制柱条侧面样式，优先级高于 barSideStyle 和 barSideStyleByFields。 + * @property {Object} [barFaceHoverStyle] - 3d 柱条正面 hover 状态时的样式，barHoverAble 为 true 时有效。 + * @property {Object} [barSideHoverStyle=barFaceHoverStyle] - 3d 柱条侧面 hover 状态时的样式，barHoverAble 为 true 时有效。 + * @property {Object} [barTopHoverStyle=barFaceHoverStyle] - 3d 柱条顶面 hover 状态时的样式，barHoverAble 为 true 时有效。 + * @property {boolean} [barHoverAble=true] - 是否允许柱条使用 hover 状态。同时设置 barHoverAble 和 barClickAble 为 false，可以直接屏蔽柱条对专题图层事件的响应。 + * @property {boolean} [barClickAble=true] - 是否允许柱条被点击。同时设置 barHoverAble 和 barClickAble 为 false，可以直接屏蔽柱条对专题图层事件的响应。 + * @property {Zondy.Feature.ShapeParameters.Polygon.style} [barTopStyle=barFaceStyle] - 3d 柱状图柱条顶面基础 style，此参数控制柱条顶面基础样式，优先级低于 barTopStyleByFields 和 barTopStyleByCodomain。 + * @property {Array.} [barTopStyleByFields=barFaceStyleByFields] - 按专题字段 themeFields（）为柱条顶面赋 style，此参数按字段控制柱条顶面样式，优先级低于 barTopStyleByCodomain，高于 barTopStyle。此数组中的元素是样式对象。此参数中的 style 与 themeFields 中的字段一一对应 。例如： themeFields（） 为 ["POP_1992", "POP_1995", "POP_1999"],barTopStyleByFields 为[style1, style2, style3]，则在图表中，字段 POP_1992 对应的柱条顶面使用 style1，字段 POP_1995 对应的柱条顶面使用 style2 ，字段 POP_1999 对应的柱条顶面使用 style3。 + * @property {Array.} [barTopStyleByCodomain=barFaceStyleByCodomain] - 按柱条顶面代表的数据值所在值域范围控制柱条顶面样式，优先级高于 barTopStyle 和 barTopStyleByFields。 + * + * @example + * // barFaceStyleByCodomain 用法示例如下： + * // barFaceStyleByCodomain 的每个元素是个包含值域信息和与值域对应样式信息的对象，该对象（必须）有三个属性： + * // start: 值域值下限（包含）; + * // end: 值域值上限（不包含）; + * // style: 数据可视化图形的 style，这个样式对象的可设属性： 。 + * // barFaceStyleByCodomain 数组形如： + * [ + * { + * start:0, + * end:250, + * style:{ + * fillColor:"#00CD00" + * } + * }, + * { + * start:250, + * end:500, + * style:{ + * fillColor:"#00EE00" + * } + * }, + * { + * start:500, + * end:750, + * style:{ + * fillColor:"#00FF7F" + * } + * }, + * { + * start:750, + * end:1500, + * style:{ + * fillColor:"#00FF00" + * } + * } + * ] + * + * @example + * // barSideStyleByCodomain 用法示例如下： + * // barSideStyleByCodomain 的每个元素是个包含值域信息和与值域对应样式信息的对象，该对象（必须）有三个属性： + * // start: 值域值下限（包含）; + * // end: 值域值上限（不包含）; + * // style: 数据可视化图形的 style，这个样式对象的可设属性： 。 + * // barSideStyleByCodomain 数组形如： + * [ + * { + * start:0, + * end:250, + * style:{ + * fillColor:"#00CD00" + * } + * }, + * { + * start:250, + * end:500, + * style:{ + * fillColor:"#00EE00" + * } + * }, + * { + * start:500, + * end:750, + * style:{ + * fillColor:"#00FF7F" + * } + * }, + * { + * start:750, + * end:1500, + * style:{ + * fillColor:"#00FF00" + * } + * } + * ] + * + * @example + * // barTopStyleByCodomain 用法示例如下： + * // barTopStyleByCodomain 的每个元素是个包含值域信息和与值域对应样式信息的对象，该对象（必须）有三个属性： + * // start: 值域值下限（包含）; + * // end: 值域值上限（不包含）; + * // style: 数据可视化图形的 style，这个样式对象的可设属性： 。 + * // barTopStyleByCodomain 数组形如： + * [ + * { + * start:0, + * end:250, + * style:{ + * fillColor:"#00CD00" + * } + * }, + * { + * start:250, + * end:500, + * style:{ + * fillColor:"#00EE00" + * } + * }, + * { + * start:500, + * end:750, + * style:{ + * fillColor:"#00FF7F" + * } + * }, + * { + * start:750, + * end:1500, + * style:{ + * fillColor:"#00FF00" + * } + * } + * ] + */ + +class Bar3D extends Graph { + + constructor(data, layer, fields, setting, lonlat, option) { + super(data, layer, fields, setting, lonlat, option); + this.CLASS_NAME = "Zondy.Theme.Bar3D"; + } + + /** + * @function Zondy.Theme.Bar3D.prototype.destroy + * @override + */ + destroy() { + super.destroy(); + } + + /** + * @function Zondy.Theme.Bar3D.prototype.assembleShapes + * @description 图形装配实现（扩展接口）。 + */ + assembleShapes() { + // 图表配置对象 + var sets = this.setting; + + // 默认数据视图框 + if (!sets.dataViewBoxParameter) { + if (typeof (sets.useAxis) === "undefined" || sets.useAxis) { + sets.dataViewBoxParameter = [45, 25, 20, 20]; + } else { + sets.dataViewBoxParameter = [5, 5, 5, 5]; + } + } + + // 3d 柱图的坐标轴默认使用坐标轴箭头 + sets.axisUseArrow = (typeof (sets.axisUseArrow) !== "undefined") ? sets.axisUseArrow : true; + sets.axisXLabelsOffset = (typeof (sets.axisXLabelsOffset) !== "undefined") ? sets.axisXLabelsOffset : [-10, 10]; + + // 重要步骤：初始化参数 + if (!this.initBaseParameter()) { + return; + } + + // 值域 + var codomain = this.DVBCodomain; + // 重要步骤：定义图表 Bar 数据视图框中单位值的含义 + this.DVBUnitValue = (codomain[1] - codomain[0]) / this.DVBHeight; + // 数据视图域 + var dvb = this.dataViewBox; + // 用户数据值 + var fv = this.dataValues; + if (fv.length < 1) { + return; + } // 没有数据 + + // 数据溢出值域范围处理 + for (let i = 0, fvLen = fv.length; i < fvLen; i++) { + if (fv[i] < codomain[0] || fv[i] > codomain[1]) { + return; + } + } + + // 获取 x 轴上的图形信息 + var xShapeInfo = this.calculateXShapeInfo(); + if (!xShapeInfo) { + return; + } + // 每个柱条 x 位置 + var xsLoc = xShapeInfo.xPositions; + // 柱条宽度 + var xsWdith = xShapeInfo.width; + + // 坐标轴, 默认启用 + if (typeof (sets.useBackground) === "undefined" || sets.useBackground) { + this.shapes.push(ShapeFactory.Background(this.shapeFactory, this.chartBox, sets)); + } + + // 坐标轴 + if (!sets.axis3DParameter || isNaN(sets.axis3DParameter) || sets.axis3DParameter < 15) { + sets.axis3DParameter = 20; + } + if (typeof (sets.useAxis) === "undefined" || sets.useAxis) { + this.shapes = this.shapes.concat(ShapeFactory.GraphAxis(this.shapeFactory, dvb, sets, xShapeInfo)); + } + + // 3d 偏移量, 默认值 10; + var offset3d = (sets.bar3DParameter && !isNaN(sets.bar3DParameter)) ? sets.bar3DParameter : 10; + + for (let i = 0; i < fv.length; i++) { + // 无 3d 偏移量时的柱面顶部 y 坐标 + var yPx = dvb[1] - (fv[i] - codomain[0]) / this.DVBUnitValue; + // 无 3d 偏移量时的柱面的左、右端 x 坐标 + var iPoiL = xsLoc[i] - xsWdith / 2; + var iPoiR = xsLoc[i] + xsWdith / 2; + + // 3d 柱顶面节点 + var bar3DTopPois = [ + [iPoiL, yPx], + [iPoiR, yPx], + [iPoiR - offset3d, yPx + offset3d], + [iPoiL - offset3d, yPx + offset3d] + ]; + + // 3d 柱侧面节点 + var bar3DSidePois = [ + [iPoiR, yPx], + [iPoiR - offset3d, yPx + offset3d], + [iPoiR - offset3d, dvb[1] + offset3d], + [iPoiR, dvb[1]] + ]; + + // 3d 柱正面节点 + var bar3DFacePois = [ + [iPoiL - offset3d, dvb[1] + offset3d], + [iPoiR - offset3d, dvb[1] + offset3d], + [iPoiR - offset3d, yPx + offset3d], + [iPoiL - offset3d, yPx + offset3d] + ]; + if (offset3d <= 0) { // offset3d <= 0 时正面不偏移 + bar3DFacePois = [ + [iPoiL, dvb[1]], + [iPoiR, dvb[1]], + [iPoiR, yPx], + [iPoiL, yPx] + ]; + } + + // 新建 3d 柱面顶面、侧面、正面图形参数对象 + var polyTopSP = new FeaturePolygon(bar3DTopPois); + var polySideSP = new FeaturePolygon(bar3DSidePois); + var polyFaceSP = new FeaturePolygon(bar3DFacePois); + + + // 侧面、正面图形 style 默认值 + sets.barSideStyle = sets.barSideStyle ? sets.barSideStyle : sets.barFaceStyle; + sets.barSideStyleByFields = sets.barSideStyleByFields ? sets.barSideStyleByFields : sets.barFaceStyleByFields; + sets.barSideStyleByCodomain = sets.barSideStyleByCodomain ? sets.barSideStyleByCodomain : sets.barFaceStyleByCodomain; + sets.barTopStyle = sets.barTopStyle ? sets.barTopStyle : sets.barFaceStyle; + sets.barTopStyleByFields = sets.barTopStyleByFields ? sets.barTopStyleByFields : sets.barFaceStyleByFields; + sets.barTopStyleByCodomain = sets.barTopStyleByCodomain ? sets.barTopStyleByCodomain : sets.barFaceStyleByCodomain; + // 顶面、侧面、正面图形 style + polyFaceSP.style = ShapeFactory.ShapeStyleTool({ + stroke: true, + strokeColor: "#ffffff", + fillColor: "#ee9900" + }, + sets.barFaceStyle, sets.barFaceStyleByFields, sets.barFaceStyleByCodomain, i, fv[i]); + polySideSP.style = ShapeFactory.ShapeStyleTool({ + stroke: true, + strokeColor: "#ffffff", + fillColor: "#ee9900" + }, + sets.barSideStyle, sets.barSideStyleByFields, sets.barSideStyleByCodomain, i, fv[i]); + polyTopSP.style = ShapeFactory.ShapeStyleTool({ + stroke: true, + strokeColor: "#ffffff", + fillColor: "#ee9900" + }, + sets.barTopStyle, sets.barTopStyleByFields, sets.barTopStyleByCodomain, i, fv[i]); + + // 3d 柱条高亮样式 + sets.barSideHoverStyle = sets.barSideHoverStyle ? sets.barSideHoverStyle : sets.barFaceHoverStyle; + sets.barTopHoverStyle = sets.barTopHoverStyle ? sets.barTopHoverStyle : sets.barFaceHoverStyle; + polyFaceSP.highlightStyle = ShapeFactory.ShapeStyleTool({stroke: true}, sets.barFaceHoverStyle); + polySideSP.highlightStyle = ShapeFactory.ShapeStyleTool({stroke: true}, sets.barSideHoverStyle); + polyTopSP.highlightStyle = ShapeFactory.ShapeStyleTool({stroke: true}, sets.barTopHoverStyle); + + // 图形携带的数据 id 信息 & 高亮模式 + polyTopSP.refDataID = polySideSP.refDataID = polyFaceSP.refDataID = this.data.FID; + // hover 模式（组合） + polyTopSP.isHoverByRefDataID = polySideSP.isHoverByRefDataID = polyFaceSP.isHoverByRefDataID = true; + // 高亮组(当鼠标 hover 到组内任何一个图形，整个组的图形都会高亮。refDataHoverGroup 在 isHoverByRefDataID 为 true 时有效) + polyTopSP.refDataHoverGroup = polySideSP.refDataHoverGroup = polyFaceSP.refDataHoverGroup = newGuid(); + // 图形携带的数据信息 + polyTopSP.dataInfo = polySideSP.dataInfo = polyFaceSP.dataInfo = { + field: this.fields[i], + value: fv[i] + }; + + // 3d 柱条顶面、侧面、正面图形 hover click 设置 + if (typeof (sets.barHoverAble) !== "undefined") { + polyTopSP.hoverable = polySideSP.hoverable = polyFaceSP.hoverable = sets.barHoverAble; + } + if (typeof (sets.barClickAble) !== "undefined") { + polyTopSP.clickable = polySideSP.clickable = polyFaceSP.clickable = sets.barClickAble; + } + + // 创建3d 柱条的顶面、侧面、正面图形并添加到图表的图形列表数组 + this.shapes.push(this.shapeFactory.createShape(polySideSP)); + this.shapes.push(this.shapeFactory.createShape(polyTopSP)); + this.shapes.push(this.shapeFactory.createShape(polyFaceSP)); + } + + // 重要步骤：将图形转为由相对坐标表示的图形，以便在地图平移缩放过程中快速重绘图形 + // （统计专题图模块从结构上要求使用相对坐标，assembleShapes() 函数必须在图形装配完成后调用 shapesConvertToRelativeCoordinate() 函数） + this.shapesConvertToRelativeCoordinate(); + } + + /** + * @function Zondy.Theme.Bar3D.prototype.calculateXShapeInfo + * @description 计算 X 轴方向上的图形信息，此信息是一个对象，包含两个属性， + * 属性 xPositions 是一个一维数组，该数组元素表示图形在 x 轴方向上的像素坐标值， + * 如果图形在 x 方向上有一定宽度，通常取图形在 x 方向上的中心点为图形在 x 方向上的坐标值。 + * width 表示图形的宽度（特别注意：点的宽度始终为 0，而不是其直径）。 + * 本函数中图形配置对象 setting 可设属性: + * xShapeBlank - {Array.} 水平方向上的图形空白间隔参数。 + * 长度为 3 的数组，第一元素表示第一个图形左端与数据视图框左端的空白间距，第二个元素表示图形间空白间距， + * 第三个元素表示最后一个图形右端与数据视图框右端端的空白间距 。 + * @returns {Object} 如果计算失败，返回 null；如果计算成功，返回 X 轴方向上的图形信息，此信息是一个对象，包含以下两个属性: + * xPositions - {Array.} 表示图形在 x 轴方向上的像素坐标值，如果图形在 x 方向上有一定宽度，通常取图形在 x 方向上的中心点为图形在 x 方向上的坐标值。 + * width - {number} 表示图形的宽度（特别注意：点的宽度始终为 0，而不是其直径）。 + */ + calculateXShapeInfo() { + var dvb = this.dataViewBox; // 数据视图框 + var sets = this.setting; // 图表配置对象 + var fvc = this.dataValues.length; // 数组值个数 + + if (fvc < 1) { + return null; + } + + var xBlank; // x 轴空白间隔参数 + var xShapePositions = []; // x 轴上图形的位置 + var xShapeWidth = 0; // x 轴上图形宽度(自适应) + var dvbWidth = this.DVBWidth; // 数据视图框宽度 + + // x 轴空白间隔参数处理 + if (sets.xShapeBlank && sets.xShapeBlank.length && sets.xShapeBlank.length === 3) { + xBlank = sets.xShapeBlank; + var xsLen = dvbWidth - (xBlank[0] + xBlank[2] + (fvc - 1) * xBlank[1]) + if (xsLen <= fvc) { + return null; + } + xShapeWidth = xsLen / fvc + } else { + // 默认使用等距离空白间隔，空白间隔为图形宽度 + xShapeWidth = dvbWidth / (2 * fvc + 1); + xBlank = [xShapeWidth, xShapeWidth, xShapeWidth]; + } + + // 图形 x 轴上的位置计算 + var xOffset = 0; + for (var i = 0; i < fvc; i++) { + if (i === 0) { + xOffset = xBlank[0] + xShapeWidth / 2; + } else { + xOffset += (xShapeWidth + xBlank[1]); + } + + xShapePositions.push(dvb[0] + xOffset); + } + + return { + "xPositions": xShapePositions, + "width": xShapeWidth + }; + } +} + +export {Bar3D}; +Zondy.Theme.Bar3D = Bar3D; \ No newline at end of file diff --git a/src/mapboxgl/theme/common/overlay/Circle.js b/src/mapboxgl/theme/common/overlay/Circle.js new file mode 100644 index 000000000..69e1115e6 --- /dev/null +++ b/src/mapboxgl/theme/common/overlay/Circle.js @@ -0,0 +1,155 @@ +import { Common } from '@mapgis/webclient-es6-service'; +const { Zondy } = Common; + +import {Theme as FeatureTheme} from './feature/Theme'; +import {Circle as FeatureCircle} from './feature/Circle'; +import {ShapeFactory} from './feature/ShapeFactory'; +import {RankSymbol} from './RankSymbol'; + +/** + * @private + * @class Zondy.Theme.Circle + * @classdesc 圆类。 + * @extends Zondy.Theme.RankSymbol + * @param {Zondy.Vector} data - 用户数据。 + * @param {Zondy.Layer.RankSymbol} layer - 此专题要素所在图层。 + * @param {Array.} fields - data 中的参与此图表生成的字段名称。 + * @param {Zondy.Theme.Circle.setting} setting - 图表配置对象。 + * @param {Zondy.LonLat} [lonlat] - 专题要素地理位置，默认为 data 指代的地理要素 Bounds 中心。 + * + * @typedef {Object} Zondy.Theme.Circle.setting + * @property {Array.} codomain - 图表允许展示的数据值域，长度为 2 的一维数组，第一个元素表示值域下限，第二个元素表示值域上限。 + * @property {number} [maxR] - 圆形的最大半径。 + * @property {number} [minR] - 圆形的最小半径。 + * @property {string} [fillColor] - 圆形的填充色，如：fillColor: "#FFB980"。 + * @property {Object} [circleStyle] - 圆形的基础 style，此参数控制圆形基础样式，优先级低于 circleStyleByFields 和 circleStyleByCodomain。 + * @property {number} [decimalNumber] - 数据值数组 dataValues 元素值小数位数，数据的小数位处理参数，取值范围：[0, 16]。如果不设置此参数，在取数据值时不对数据做小数位处理。 + * @property {Object} [circleHoverStyle] - 圆形 hover 状态时的样式，circleHoverAble 为 true 时有效。 + * @property {boolean} [circleHoverAble=true] - 是否允许圆形使用 hover 状态。同时设置 circleHoverAble 和 circleClickAble 为 false，可以直接屏蔽图形对专题图层事件的响应。 + * @property {boolean} [circleClickAble=true] - 是否允许圆形被点击。同时设置 circleHoverAble 和 circleClickAble 为 false，可以直接屏蔽图形对专题图层事件的响应。 + */ +class Circle extends RankSymbol { + + constructor(data, layer, fields, setting, lonlat, option) { + super(data, layer, fields, setting, lonlat, option); + this.CLASS_NAME = "Zondy.Theme.Circle"; + } + + /** + * @function Zondy.Theme.Circle.prototype.destroy + * @override + */ + destroy() { + super.destroy(); + } + + /** + * @function Zondy.Theme.Circle.prototype.assembleShapes + * @description 装配图形（扩展接口）。 + */ + assembleShapes() { + //默认填充颜色 + var defaultFillColor = "#ff9277"; + + // setting 属性是否已成功赋值 + if (!this.setting) { + return false; + } + var sets = this.setting; + // 检测 setting 的必设参数 + if (!(sets.codomain)) { + return false; + } + + // 数据 + var decimalNumber = (typeof (sets.decimalNumber) !== "undefined" && !isNaN(sets.decimalNumber)) ? sets.decimalNumber : -1; + var dataEffective = FeatureTheme.getDataValues(this.data, this.fields, decimalNumber); + this.dataValues = dataEffective ? dataEffective : []; + + // 数据值数组 + var fv = this.dataValues; + //if(fv.length != 1) return; // 没有数据 或者数据不唯一 + //if(fv[0] < 0) return; //数据为负值 + + //用户应该定义最大 最小半径 默认最大半径MaxR:100 最小半径MinR:0; + if (!sets.maxR) { + sets.maxR = 100; + } + if (!sets.minR) { + sets.minR = 0; + } + + // 值域范围 + var codomain = this.DVBCodomain; + + // 重要步骤：定义Circle数据视图框中单位值的含义，单位值：1所代表的长度 + // 用户定义了值域范围 + if (codomain && codomain[1] - codomain[0] > 0) { + this.DVBUnitValue = sets.maxR / (codomain[1] - codomain[0]); + } else { + //this.DVBUnitValue = sets.maxR / maxValue; + this.DVBUnitValue = sets.maxR; + } + + var uv = this.DVBUnitValue; + //圆半径 + var r = fv[0] * uv + sets.minR; + this.width = 2 * r; + this.height = 2 * r; + + // 重要步骤：初始化参数 + if (!this.initBaseParameter()) { + return; + } + + //假如用户设置了值域范围 没有在值域范围直接返回 + if (codomain) { + if (fv[0] < codomain[0] || fv[0] > codomain[1]) { + return; + } + } + + var dvbCenter = this.DVBCenterPoint; // 数据视图框中心作为圆心 + + //圆形对象参数 + var circleSP = new FeatureCircle(dvbCenter[0], dvbCenter[1], r); + + //circleSP.sytle 初始化 + circleSP.style = ShapeFactory.ShapeStyleTool(null, sets.circleStyle, null, null, 0); + //图形的填充颜色 + if (typeof (sets.fillColor) !== "undefined") { + //用户自定义 + circleSP.style.fillColor = sets.fillColor; + } else { + //当前默认 + circleSP.style.fillColor = defaultFillColor; + } + //圆形 Hover样式 + circleSP.highlightStyle = ShapeFactory.ShapeStyleTool(null, sets.circleHoverStyle); + //圆形 Hover 与 click 设置 + if (typeof (sets.circleHoverAble) !== "undefined") { + circleSP.hoverable = sets.circleHoverAble; + } + if (typeof (sets.circleClickAble) !== "undefined") { + circleSP.clickable = sets.circleClickAble; + } + + //图形携带的数据信息 + circleSP.refDataID = this.data.FID; + circleSP.dataInfo = { + field: this.fields[0], + r: r, + value: fv[0] + }; + + // 创建扇形并把此扇形添加到图表图形数组 + this.shapes.push(this.shapeFactory.createShape(circleSP)); + + // 重要步骤：将图形转为由相对坐标表示的图形，以便在地图平移缩放过程中快速重绘图形 + // （统计专题图模块从结构上要求使用相对坐标，assembleShapes() 函数必须在图形装配完成后调用 shapesConvertToRelativeCoordinate() 函数） + this.shapesConvertToRelativeCoordinate(); + } +} + +export {Circle}; +Zondy.Theme.Circle = Circle; \ No newline at end of file diff --git a/src/mapboxgl/theme/common/overlay/Graph.js b/src/mapboxgl/theme/common/overlay/Graph.js new file mode 100644 index 000000000..f667d0b78 --- /dev/null +++ b/src/mapboxgl/theme/common/overlay/Graph.js @@ -0,0 +1,592 @@ +import { Common } from '@mapgis/webclient-es6-service'; +const { Zondy, Rectangle } = Common; + +import {Theme} from './feature/Theme'; +import {ShapeFactory} from './feature/ShapeFactory'; + +/** + * @private + * @class Zondy.Theme.Graph + * @classdesc 统计专题要素基类。 + * @description 此类定义了统计专题要素基础模型，具体的图表模型通过继承此类，在子类中实现 assembleShapes 方法。 + * 统计专题要素模型采用了可视化图形大小自适应策略，用较少的参数控制着图表诸多图形，图表配置对象 的基础属性只有 7 个， + * 它们控制着图表结构、值域范围、数据小数位等基础图表形态。构成图表的图形必须在图表结构里自适应大小。 + * 此类不可实例化，此类的可实例化子类必须实现 assembleShapes() 方法。 + * @extends Zondy.Theme + * @param {Zondy.Vector} data - 用户数据。 + * @param {Zondy.Layer.Theme} layer - 此专题要素所在图层。 + * @param {Array.} fields - data 中的参与此图表生成的字段名称。 + * @param {Object} setting - 图表配置对象。 + * @param {Zondy.LonLat} [lonlat] - 专题要素地理位置。默认为 data 指代的地理要素 Bounds 中心。 + */ +class Graph extends Theme { + + + constructor(data, layer, fields, setting, lonlat, options) { + super(data, layer, fields, setting, lonlat, options); + + /** + * @member {Zondy.ShapeFactory} Zondy.Theme.Graph.prototype.shapeFactory + * @description 内置的图形工厂对象，调用其 createShape 方法创建图形。 + */ + this.shapeFactory = new ShapeFactory(); + + /** + * @member {Object} Zondy.Theme.Graph.prototype.shapeParameters + * @description 当前图形参数对象， 的子类对象。 + */ + this.shapeParameters = null; + + /** + * @member {boolean} [Zondy.Theme.Graph.prototype.RelativeCoordinate] + * @description 图形是否已经计算了相对坐标。 + */ + this.RelativeCoordinate = false; + + /** + * @member {Object} Zondy.Theme.Graph.prototype.setting + * @description 图表配置对象，该对象控制着图表的可视化显示。 + * @param {number} width - 专题要素（图表）宽度。 + * @param {number} height - 专题要素（图表）高度。 + * @param {Array.} codomain - 值域，长度为 2 的一维数组，第一个元素表示值域下限，第二个元素表示值域上限。 + * @param {number} [XOffset] - 专题要素（图表）在 X 方向上的偏移值，单位像素。 + * @param {number} [YOffset] - 专题要素（图表）在 Y 方向上的偏移值，单位像素。 + * @param {Array.} [dataViewBoxParameter] - 数据视图框 dataViewBox 参数，它是指图表框 chartBox + * （由图表位置、图表宽度、图表高度构成的图表范围框）在左、下，右，上四个方向上的内偏距值。 + * @param {number} [decimalNumber] - 数据值数组 dataValues 元素值小数位数，数据的小数位处理参数，取值范围：[0, 16]。 + * 如果不设置此参数，在取数据值时不对数据做小数位处理。 + * + */ + this.setting = null; + + /** + * @readonly + * @member {Array.} Zondy.Theme.Graph.prototype.origonPoint + * @description 专题要素（图表）原点，图表左上角点像素坐标，是长度为 2 的一维数组，第一个元素表示 x 坐标，第二个元素表示 y 坐标。 + */ + this.origonPoint = null; + + /** + * @readonly + * @member {Array.} Zondy.Theme.Graph.prototype.chartBox + * @description 专题要素（图表）区域，即图表框，长度为 4 的一维数组，数组的 4 个元素依次表示图表框左端 x 坐标值、 + * 下端 y坐标值、 右端 x坐标值、 上端 y 坐标值；[left, bottom, right, top]。 + */ + this.chartBox = null; + + /** + * @readonly + * @member {Zondy.Bounds} Zondy.Theme.Graph.prototype.chartBounds + * @description 图表 Bounds 随着 lonlat、XOffset、YOffset 更新，注意 chartBounds 是图表像素范围，不是地理范围。 + */ + this.chartBounds = null; + + /** + * @readonly + * @member {number} Zondy.Theme.Graph.prototype.width + * @description 专题要素（图表）宽度 。 + */ + this.width = null; + + /** + * @readonly + * @member {number} Zondy.Theme.Graph.prototype.height + * @description 专题要素（图表）高度 。 + */ + this.height = null; + + /** + * @readonly + * @member {number} Zondy.Theme.Graph.prototype.XOffset + * @description 专题要素（图表）在 X 方向上的偏移值，单位像素。 + */ + this.XOffset = 0; + + /** + * @readonly + * @member {number} Zondy.Theme.Graph.prototype.YOffset + * @description 专题要素（图表）在 Y 方向上的偏移值，单位像素。 + */ + this.YOffset = 0; + + /** + * @readonly + * @member {Array.} Zondy.Theme.Graph.prototype.DVBParameter + * @description 数据视图框参数，长度为 4 的一维数组（数组元素值 >= 0），[leftOffset, bottomOffset, rightOffset, topOffset]，chartBox 内偏距值。 + * 此属性用于指定数据视图框 dataViewBox 的范围。 + */ + this.DVBParameter = null; + + /** + * @readonly + * @member {Array.} Zondy.Theme.Graph.prototype.dataViewBox + * @description 数据视图框，长度为 4 的一维数组，[left, bottom, right, top]。 + * dataViewBox 是统计专题要素最核心的内容，它负责解释数据在一个像素区域里的数据可视化含义， + * 这种含义用可视化图形表达出来，这些表示数据的图形和一些辅助图形组合在一起构成统计专题图表。 + */ + this.dataViewBox = null; + + /** + * @readonly + * @member {Array.} Zondy.Theme.Graph.prototype.DVBCodomain + * @description 数据视图框的内允许展示的数据值域，长度为 2 的一维数组，第一个元素表示值域下限，第二个元素表示值域上限。 + * dataViewBox 中允许的数据范围，对数据溢出值域范围情况的处理需要在 assembleShapes 中进行。 + */ + this.DVBCodomain = null; + + /** + * @readonly + * @member {Array.} Zondy.Theme.Graph.prototype.DVBCenterPoint + * @description 数据视图框中心点，长度为 2 的一维数组，第一个元素表示 x 坐标，第二个元素表示 y 坐标。 + */ + this.DVBCenterPoint = null; + + /** + * @readonly + * @member {string} Zondy.Theme.Graph.prototype.DVBUnitValue + * @description 单位值。在 assembleShapes() 中初始化其具体意义，例如：饼图的 DVBUnitValue 可以定义为"360/数据总和"， + * 折线图的 DVBUnitValue 可以定义为 "DVBCodomain/DVBHeight"。 + */ + this.DVBUnitValue = null; + + /** + * @readonly + * @member {Array.} Zondy.Theme.Graph.prototype.DVBOrigonPoint + * @description 数据视图框原点，数据视图框左上角点，长度为 2 的一维数组，第一个元素表示 x 坐标，第二个元素表示 y 坐标。 + */ + this.DVBOrigonPoint = null; + + /** + * @readonly + * @member {number} Zondy.Theme.Graph.prototype.DVBWidth + * @description 数据视图框宽度。 + */ + this.DVBWidth = null; + + /** + * @readonly + * @member {number} Zondy.Theme.Graph.prototype.DVBHeight + * @description 数据视图框高度。 + */ + this.DVBHeight = null; + + /** + * @readonly + * @member {Array.} Zondy.Theme.Graph.prototype.origonPointOffset + * @description 数据视图框原点相对于图表框的原点偏移量，长度为 2 的一维数组，第一个元素表示 x 偏移量，第二个元素表示 y 偏移量。 + */ + this.origonPointOffset = null; + + /** + * @readonly + * @member {Array.} Zondy.Theme.Graph.prototype.fields + * @description 数据{Zondy.Vector}属性字段。 + */ + this.fields = fields || []; + + /** + * @readonly + * @member {Array.} Zondy.Theme.Graph.prototype.dataValues + * @description 图表展示的数据值，通过 fields 从数据 feature 属性中获得。 + */ + this.dataValues = null; + // 图表位置 + if (lonlat) { + this.lonlat = lonlat; + } else { + // 默认使用 bounds 中心 + if (options && options.calGravity) { + if (data.ftype === Zondy.Enum.FeatureType.Pnt) { + var centerDot = data.fGeom.PntGeom[0].Dot + this.lonlat = [centerDot.x, centerDot.y] + } else if (data.ftype === Zondy.Enum.FeatureType.Lin) { + var arcs = data.fGeom.LinGeom[0].Line.Arcs + var points = [] + arcs.forEach(function (item) { + const dots = item.Dots + points = [].concat(dots) + }) + var index = Math.ceil(points.length / 2) // 如果是多个点 则取中间范围的一个点 + var centerDot = points[index - 1] + this.lonlat = [centerDot.x, centerDot.y] + } else if (data.ftype === Zondy.Enum.FeatureType.Reg) { + this.lonlat = this.getCenterOfGravityPoint(data); + } else { + var dataBounds = data.bound; + this.lonlat = [(dataBounds.xmin + dataBounds.xmax) / 2.0, (dataBounds.ymin + dataBounds.ymax) / 2.0]; + } + } else { + var dataBounds = data.bound; + this.lonlat = [(dataBounds.xmin + dataBounds.xmax) / 2.0, (dataBounds.ymin + dataBounds.ymax) / 2.0]; + } + } + + // 配置项检测与赋值 + if (setting && setting.width && setting.height && setting.codomain) { + this.setting = setting; + } + this.CLASS_NAME = "Zondy.Feature.Theme.Graph"; + + } + + /** + * @function Zondy.Theme.Graph.prototype.destroy + * @description 销毁专题要素。 + */ + destroy() { + this.shapeFactory = null; + this.shapeParameters = null; + this.width = null; + this.height = null; + this.origonPoint = null; + this.chartBox = null; + this.dataViewBox = null; + this.chartBounds = null; + this.DVBParameter = null; + this.DVBOrigonPoint = null; + this.DVBCenterPoint = null; + this.DVBWidth = null; + this.DVBHeight = null; + this.DVBCodomain = null; + this.DVBUnitValue = null; + this.origonPointOffset = null; + this.XOffset = null; + this.YOffset = null; + this.fields = null; + this.dataValues = null; + this.setting = null; + super.destroy(); + } + + /** + * @function Zondy.Theme.Graph.prototype.initBaseParameter + * @description 初始化专题要素（图表）基础参数。在调用此方法前，此类的图表模型相关属性都是不可用的 ，此方法在 assembleShapes 函数中调用。 + * 调用此函数关系到 setting 对象的以下属性。 + * @param {number} width - 专题要素（图表）宽度。 + * @param {number} height - 专题要素（图表）高度。 + * @param {Array.} codomain - 值域，长度为 2 的一维数组，第一个元素表示值域下限，第二个元素表示值域上限。 + * @param {number} [XOffset] - 专题要素（图表）在 X 方向上的偏移值，单位像素。 + * @param {number} [YOffset] - 专题要素（图表）在 Y 方向上的偏移值，单位像素。 + * @param {Array.} [dataViewBoxParameter] - 数据视图框 dataViewBox 参数，它是指图表框 chartBox。 + * （由图表位置、图表宽度、图表高度构成的图表范围框）在左、下，右，上四个方向上的内偏距值。 + * @param {number} [decimalNumber] - 数据值数组 dataValues 元素值小数位数，数据的小数位处理参数，取值范围：[0, 16]。如果不设置此参数，在取数据值时不对数据做小数位处理。 + * @returns {boolean} 初始化参数是否成功。 + */ + initBaseParameter() { + // 参数初始化是否成功 + var isSuccess = true; + + // setting 属性是否已成功赋值 + if (!this.setting) { + return false; + } + var sets = this.setting; + // 检测 setting 的必设参数 + if (!(sets.width && sets.height && sets.codomain)) { + return false; + } + + // 数据 + var decimalNumber = (typeof (sets.decimalNumber) !== "undefined" && !isNaN(sets.decimalNumber)) ? sets.decimalNumber : -1; + var dataEffective = Theme.getDataValues(this.data, this.fields, decimalNumber); + this.dataValues = dataEffective ? dataEffective : []; + + // 基础参数 width, height, codomain + this.width = parseFloat(sets.width); + this.height = parseFloat(sets.height); + this.DVBCodomain = sets.codomain; + + // 图表偏移 + // if(sets.XOffset) {this.XOffset = sets.XOffset}; + // if(sets.YOffset) {this.YOffset = sets.YOffset}; + this.XOffset = sets.XOffset ? sets.XOffset : 0; + this.YOffset = sets.YOffset ? sets.YOffset : 0; + + // 其他默认值 + this.origonPoint = []; + this.chartBox = []; + this.dataViewBox = []; + + this.DVBParameter = sets.dataViewBoxParameter ? sets.dataViewBoxParameter : [0, 0, 0, 0]; + + this.DVBOrigonPoint = []; + this.DVBCenterPoint = []; + this.origonPointOffset = []; + + // 图表位置 + this.resetLocation(); + + // 专题要素宽度 w + var w = this.width; + // 专题要素高度 h + var h = this.height; + // 专题要素像素位置 loc + var loc = this.location; + + // 专题要素像素位置 loc + this.origonPoint = [loc[0] - w / 2, loc[1] - h / 2]; + // 专题要素原点（左上角） + var op = this.origonPoint; + + // 图表框（[left, bottom, right, top]） + this.chartBox = [op[0], op[1] + h, op[0] + w, op[1]]; + // 图表框 + var cb = this.chartBox; + + // 数据视图框参数，它是图表框各方向对应的内偏距 + var dbbP = this.DVBParameter; + // 数据视图框 （[left, bottom, right, top]） + this.dataViewBox = [cb[0] + dbbP[0], cb[1] - dbbP[1], cb[2] - dbbP[2], cb[3] + dbbP[3]]; + // 数据视图框 + var dvb = this.dataViewBox; + //检查数据视图框是否合法 + if (dvb[0] >= dvb[2] || dvb[1] <= dvb[3]) { + return false; + } + + // 数据视图框原点 + this.DVBOrigonPoint = [dvb[0], dvb[3]]; + // 数据视图框宽度 + this.DVBWidth = Math.abs(dvb[2] - dvb[0]); + // 数据视图框高度 + this.DVBHeight = Math.abs(dvb[1] - dvb[3]); + // 数据视图框中心点 + this.DVBCenterPoint = [this.DVBOrigonPoint[0] + this.DVBWidth / 2, this.DVBOrigonPoint[1] + this.DVBHeight / 2] + + // 数据视图框原点与图表框的原点偏移量 + this.origonPointOffset = [this.DVBOrigonPoint[0] - op[0], this.DVBOrigonPoint[1] - op[1]]; + + return isSuccess; + } + + /** + * @function Zondy.Theme.Graph.prototype.resetLocation + * @description 根据地理位置 lonlat 重置专题要素（图表）位置。 + * @param {Zondy.LonLat} lonlat - 专题要素新的像素中心位置。 + * @returns {Array.} - 新专题要素像素参考位置。长度为 2 的数组，第一个元素表示 x 坐标，第二个元素表示 y 坐标。 + */ + resetLocation(lonlat) { + if (lonlat) { + this.lonlat = lonlat; + } + + // 获取地理位置对应的像素坐标 newLocalLX + var newLocalLX = this.getLocalXY(this.lonlat); + // 处理偏移量 XOffset, YOffset + newLocalLX[0] += this.XOffset; + newLocalLX[1] += this.YOffset; + // 将图形位置赋予 location 属性（注意 location 属性表示的是专题要素中心位置） + this.location = newLocalLX; + + // 更新图表像素 Bounds + var w = this.width; + var h = this.height; + var loc = this.location; + this.chartBounds = new Rectangle(loc[0] - w / 2, loc[1] - h / 2, loc[0] + w / 2, loc[1] + h / 2); + + //重新计算当前渐变色 + this.resetLinearGradient(); + + return loc; + } + + /** + * @function Zondy.Theme.Graph.prototype.resetLinearGradient + * @description resetLocation 中调用 图表的相对坐标存在的时候，重新计算渐变的颜色（目前用于二维柱状图渐变色 所以子类实现此方法）。 + */ + resetLinearGradient() { + //子类实现此方法 + } + + /** + * @function Zondy.Theme.Graph.prototype.shapesConvertToRelativeCoordinate + * @description 将（构成图表）图形的节点转为相对坐标表示，此函数必须且只能在 assembleShapes() 结束时调用。 + */ + shapesConvertToRelativeCoordinate() { + var shapes = this.shapes; + var shapeROP = this.location; + for (var i = 0, len = shapes.length; i < len; i++) { + shapes[i].refOriginalPosition = shapeROP; + + var style = shapes[i].style; + + for (var sty in style) { + switch (sty) { + case "pointList": + var pl = style[sty]; + for (var j = 0, len2 = pl.length; j < len2; j++) { + pl[j][0] -= shapeROP[0]; + pl[j][1] -= shapeROP[1]; + } + break; + case "x": + style[sty] -= shapeROP[0]; + break; + case "y": + style[sty] -= shapeROP[1]; + break; + default: + break; + } + } + } + this.RelativeCoordinate = true; + } + + /** + * @function Zondy.Theme.Graph.prototype.assembleShapes + * @description 图形装配函数。抽象方法，可视化子类必须实现此方法。
+ * 重写此方法的步骤：
+ * 1. 图表的某些特殊配置项（setting）处理，例如多数图表模型需要重新指定 dataViewBoxParameter 的默认值。
+ * 2. 调用 initBaseParameter() 方法初始化模型属性值，此步骤必须执行，只有当 initBaseParameter 返回 true 时才可以允许进行后续步骤。
+ * 3. 计算图形参数，制作图形，图形组合。在组装图表过程中，应该特别注意数据视图框单位值的定义、数据值溢出值域范围的处理和图形大小自适应。
+ * 4. 调用 shapesConvertToRelativeCoordinate() 方法，将图形的坐标值转为相对坐标，此步骤必须执行。 + * @example + * //子类实现 assembleShapes() 接口的步骤示例： + * assembleShapes: function(){ + * // 第一步：图表的某些特殊配置项（setting）处理，例如多数图表模型需要重新指定 dataViewBoxParameter 的默认值。此步骤是非必须过程。 + * + * // 图表配置对象 + * var sets = this.setting; + * // 默认数据视图框，这里展示在使用坐标轴和不使用坐标轴情况下对数据视图框参数赋予不同的默认值 + * if(!sets.dataViewBoxParameter){ + * if(typeof(sets.useAxis) === "undefined" || sets.useAxis){ + * sets.dataViewBoxParameter = [45, 15, 15, 15]; + * } + * else{ + * sets.dataViewBoxParameter = [5, 5, 5, 5]; + * } + * } + * + * // 第二步：初始化图表模型基本参数，只有在图表模型基本参数初始化成功时才可模型相关属性，如 this.dataViewBox、 this.DVBCodomain等。此步骤是必须过程。 + * if(!this.initBaseParameter()) return; + * + * // 第三步：用图形组装图表，在组装图表过程中，应该特别注意数据视图框单位值的定义、数据值溢出值域范围的处理和图形大小自适应。 + * // 定义图表数据视图框中单位值的含义，下面行代码表示将数据视图框单位值定义为数据视图框高度上每像素代表的数据值 + * this.DVBUnitValue = (this.codomain[1] - this.codomain[0])/this.DVBHeight; + * var uv = this.DVBUnitValue; + * + * // 图形参数计算代码...... + * + * // 关于图形装配，实际上就是利用图形工程对象 this.shapeFactory 的 createShape() 方法通过图形参数对象创建可视化的图形对象，并把这些图形对象按序添加到模型的图形库（his.shapes）中。下面的代码演示创建一个面图形参数对象，并允许通过图形配置对象设置图形的 style 和 highlightStyle， + * var barParams = new Zondy.ShapeParameters.Polygon(poiLists); + * barParams.style = sets.barStyle? sets.barStyle:{fillColor: "lightblue"}; + * barParams.highlightStyle = sets.barHoverStyle? sets.barHoverStyle:{fillColor: "blue"}; + * // 图形携带数据ID信息 + * barParams.refDataID = this.data.id; + * // 创建图形并添加到图表图形数组中 + * this.shapes.push(this.shapeFactory.createShape(barParams)); + * + * // 第四步：调用 shapesConvertToRelativeCoordinate() 方法，将图形库（his.shapes）中的图形转为由相对坐标表示的图形，客户端统计专题图模块从结构上要求可视化图形使用相对坐标，assembleShapes() 函数必须在图形装配完成后调用 shapesConvertToRelativeCoordinate() 函数。此步骤是必须过程。 + * this.shapesConvertToRelativeCoordinate(); + * }, + */ + assembleShapes() { + //子类必须实现此方法 + } + + /** + * @function Zondy.Theme.Graph.prototype.getLocalXY + * @description 地理坐标转为像素坐标。 + * @param {Zondy.Lonlat} lonlat - 带转换的地理坐标。 + * @returns 屏幕像素坐标。 + */ + getLocalXY(lonlat) { + return this.layer.getLocalXY(lonlat); + } + + getCenterOfGravityPoint(fea) { + var mPoints = []; + var area = 0.0;//多边形面积 + var Gx = 0.0, + Gy = 0.0;// 重心的x、y + if (fea.ftype === Zondy.Enum.FeatureType.Reg) { + var GRegs = fea.fGeom.RegGeom; + for (var m = 0; m < GRegs.length; m++) { + var GReg = GRegs[m]; + if (GReg == null || GReg.Rings == null) { + continue; + } + var GLines = GReg.Rings; + + for (var i = 0; i < GLines.length; i++) { + var lin = GLines[i]; + if (lin == null || lin.Arcs == null) { + continue; + } + var arcs = lin.Arcs; + for (var j = 0; j < arcs.length; j++) { + var arc = arcs[j]; + if (arc == null || arc.Dots == null) { + continue; + } + var dots = arc.Dots; + for (var k = 0; k < dots.length; k++) { + mPoints.push(dots[k]); + } + } + } + } + } + for (var i = 1; i <= mPoints.length; i++) { + var iLat = mPoints[(i % mPoints.length)].x; + var iLng = mPoints[(i % mPoints.length)].y; + var nextLat = mPoints[(i - 1)].x; + var nextLng = mPoints[(i - 1)].y; + var temp = (iLat * nextLng - iLng * nextLat) / 2.0; + area += temp; + Gx += temp * (iLat + nextLat) / 3.0; + Gy += temp * (iLng + nextLng) / 3.0; + } + Gx = Gx / area; + Gy = Gy / area; + + return [Gx, Gy]; + }; +} + +/** + * @function Zondy.Theme.getDataValues + * @description 根据字段名数组获取指定数据（feature）的属性值数组。属性值类型必须为 Number。 + * @param {Zondy.Vector} data - 数据。 + * @param {Array.} [fields] - 字段名数组。 + * @param {number} [decimalNumber] - 小数位处理参数，对获取到的属性数据值进行小数位处理。 + * @returns {Array.} 字段名数组对应的属性数据值数组。 + */ +Theme.getDataValues = function (data, fields, decimalNumber) { + if (!data.attributes) { + return false; + } + + var fieldsValue = []; + + var attrs = data.attributes; + for (var i = 0; i < fields.length; i++) { + for (var field in attrs) { + if (field !== fields[i]) { + continue + } + if (attrs[field] === null || attrs[field] === undefined) { + continue + } + // 数字转换判断 + try { + if (!isNaN(decimalNumber) && decimalNumber >= 0) { + fieldsValue.push(parseFloat(attrs[field].toString()).toFixed(decimalNumber)); + } else { + fieldsValue.push(parseFloat(attrs[field].toString())); + } + } catch (e) { + throw new Error("not a number") + } + } + } + + if (fieldsValue.length === fields.length) { + return fieldsValue; + } else { + return false; + } +}; +export {Graph}; +Zondy.Theme.Graph = Graph; diff --git a/src/mapboxgl/theme/common/overlay/Line.js b/src/mapboxgl/theme/common/overlay/Line.js new file mode 100644 index 000000000..83e76b932 --- /dev/null +++ b/src/mapboxgl/theme/common/overlay/Line.js @@ -0,0 +1,299 @@ +import { Common } from '@mapgis/webclient-es6-service'; +const { Zondy } = Common; + +import {ShapeFactory} from './feature/ShapeFactory'; +import {Point} from './feature/Point'; +import {Line as FeatureLine} from './feature/Line'; +import {Graph} from './Graph'; + +/** + * @private + * @class Zondy.Theme.Line + * @classdesc 折线图。 + * + * @typedef {Object} Zondy.Theme.Line.setting + * @property {number} width - 专题要素（图表）宽度。 + * @property {number} height - 专题要素（图表）高度。 + * @property {Array.} codomain - 图表允许展示的数据值域，长度为 2 的一维数组，第一个元素表示值域下限，第二个元素表示值域上限。 + * @property {number} [XOffset] - 专题要素（图表）在 X 方向上的偏移值，单位像素。 + * @property {number} [YOffset] - 专题要素（图表）在 Y 方向上的偏移值，单位像素。 + * @property {Array.} [dataViewBoxParameter] - {Array.} 数据视图框 dataViewBox 参数， + * 它是指图表框 chartBox （由图表位置、图表宽度、图表高度构成的图表范围框）在左、下，右，上四个方向上的内偏距值。 + * 当使用坐标轴时 dataViewBoxParameter 的默认值为：[45, 15, 15, 15]；不使用坐标轴时 dataViewBoxParameter 的默认值为：[5, 5, 5, 5]。 + * @property {number} [decimalNumber] - 数据值数组 dataValues 元素值小数位数，数据的小数位处理参数，取值范围：[0, 16]。如果不设置此参数，在取数据值时不对数据做小数位处理。 + * @property {boolean} [useBackground] - 是否使用图表背景框。 + * @property {Zondy.Feature.ShapeParameters.Rectangle.style} backgroundStyle - 背景样式。 + * @property {Array.} [backgroundRadius=[0, 0, 0, 0]] - 背景框矩形圆角半径，可以用数组分别指定四个角的圆角半径，设：左上、右上、右下、左下角的半径依次为 r1、r2、r3、r4 , + * 则 backgroundRadius 为 [r1、r2、r3、r4 ]。 + * @property {Array.} xShapeBlank - 水平方向上的图形空白间隔参数。长度为 2 的数组，第一元素表示折线左端点与数据视图框左端的空白间距， + * 第二个元素表示折线右端点右端与数据视图框右端端的空白间距。 + * @property {Zondy.Feature.ShapeParameters.Line.style} [axisStyle] - 坐标轴样式。 + * @property {boolean} [axisUseArrow=false] - 坐标轴是否使用箭头。 + * @property {number} [axisYTick=0] - y 轴刻度数量。 + * @property {Array.} [axisYLabels] - y 轴上的标签组内容，标签顺序沿着数据视图框左面条边自上而下，等距排布。例如：["1000", "750", "500", "250", "0"]。 + * @property {Zondy.Feature.ShapeParameters.Label.style} [axisYLabelsStyle] - y 轴上的标签组样式。 + * @property {Array.} [axisYLabelsOffset=0] - y 轴上的标签组偏移量。长度为 2 的数组，数组第一项表示 y 轴标签组横向上的偏移量，向左为正。 + * 数组第二项表示 y 轴标签组纵向上的偏移量，向下为正。 + * @property {Array.} [axisXLabels] - x 轴上的标签组内容，标签顺序沿着数据视图框下面条边自左向右排布，例如：["92年", "95年", "99年"]。 + * 标签排布规则：当标签数量与 xShapeInfo 中的属性 xShapeCenter 数量相同（即标签个数与数据个数相等时）, 按照 xShapeCenter 提供的位置排布标签， + * 否则沿数据视图框下面条边等距排布标签。 + * @property {Zondy.Feature.ShapeParameters.Label.style} [axisXLabelsStyle] - x 轴上的标签组样式。 + * @property {Array.} [axisXLabelsOffset=0] - x 轴上的标签组偏移量。长度为 2 的数组，数组第一项表示 x 轴标签组横向上的偏移量，向左为正; + * 数组第二项表示 x 轴标签组纵向上的偏移量，向下为正; + * @property {boolean} [useXReferenceLine=true] - 是否使用水平参考线，如果为 true，在 axisYTick 大于 0 时有效，水平参考线是 y 轴刻度在数据视图框里的延伸。 + * @property {Zondy.Feature.ShapeParameters.Line.style} ]xReferenceLineStyle] - 水平参考线样式。 + * @property {Zondy.Feature.ShapeParameters.Line.style} [lineStyle] - 折线图中折线 style。 + * @property {Zondy.Feature.ShapeParameters.Point.style} [pointStyle] - 折线图中折线节点基础 style，此参数控制折线节点基础样式，优先级低于 pointStyleByFields 和 pointStyleByCodomain。 + * @property {Zondy.Feature.ShapeParameters.Point.style} [pointStyleByFields] - 按专题字段 themeFields（）为折线节点赋 style，此参数按字段控制折线节点样式， + * 优先级低于 pointStyleByCodomain，高于 pointStyle。此数组中的元素是样式对象。 + * 此参数中的 style 与 themeFields 中的字段一一对应 。例如： themeFields（） 为 ["POP_1992", "POP_1995", "POP_1999"], + * pointStyleByFields 为[style1, style2, style3]，则在图表中，字段 POP_1992 对应的折线节点使用 style1，字段 POP_1995 对应的折线节点使用 style2 ，字段 POP_1999 对应的折线节点使用 style3。 + * @property {Array.} pointStyleByCodomain - 按折线节点代表的数据值所在值域范围控制折线节点样式，优先级高于 pointStyle 和 pointStyleByFields。 + * @property {Object} [pointHoverStyle=true] - 折线节点 hover 状态时的样式，pointHoverAble 为 true 时有效。 + * @property {boolean} [pointHoverAble=true] - 是否允许折线节点使用 hover 状态。同时设置 pointHoverAble 和 pointClickAble 为 false，可以直接屏蔽折线节点对专题图层事件的响应。 + * @property {boolean} [pointClickAble=true] - 是否允许折线节点被点击。同时设置 pointHoverAble 和 pointClickAble 为 false，可以直接屏蔽折线节点对专题图层事件的响应。 + * + * @example + * // pointStyleByCodomain 参数用法示例 + * // pointStyleByCodomain 的每个元素是个包含值域信息和与值域对应样式信息的对象，该对象（必须）有三个属性： + * // start: 值域值下限（包含）; + * // end: 值域值上限（不包含）; + * // style: 数据可视化图形的 style，这个样式对象的可设属性： 。 + * // pointStyleByCodomain 数组形如： + * [ + * { + * start:0, + * end:250, + * style:{ + * fillColor:"#00CD00" + * } + * }, + * { + * start:250, + * end:500, + * style:{ + * fillColor:"#00EE00" + * } + * }, + * { + * start:500, + * end:750, + * style:{ + * fillColor:"#00FF7F" + * } + * }, + * { + * start:750, + * end:1500, + * style:{ + * fillColor:"#00FF00" + * } + * } + * ] + * + * @extends Zondy.Feature.Theme.Graph + * @param {Zondy.Feature.Vector} data - 用户数据。 + * @param {Zondy.Layer.Graph} layer - 此专题要素所在图层。 + * @param {Array.} fields - data 中的参与此图表生成的字段名称。 + * @param {Zondy.Theme.Line.setting} setting - 图表配置对象。 + * @param {Zondy.LonLat} [lonlat] - 专题要素地理位置。默认为 data 指代的地理要素 Bounds 中心。 + */ +class Line extends Graph { + + constructor(data, layer, fields, setting, lonlat, options) { + super(data, layer, fields, setting, lonlat, options); + this.CLASS_NAME = "Zondy.Theme.Line"; + } + + /** + * @function Zondy.Theme.Line.prototype.destroy + * @override + */ + destroy() { + super.destroy(); + } + + /** + * @function Zondy.Theme.Line.prototype.assembleShapes + * @description 装配图形（扩展接口）。 + */ + assembleShapes() { + // 图表配置对象 + var sets = this.setting; + + // 默认数据视图框 + if (!sets.dataViewBoxParameter) { + if (typeof (sets.useAxis) === "undefined" || sets.useAxis) { + sets.dataViewBoxParameter = [45, 15, 15, 15]; + } else { + sets.dataViewBoxParameter = [5, 5, 5, 5]; + } + } + + // 重要步骤：初始化参数 + if (!this.initBaseParameter()) { + return; + } + + var dvb = this.dataViewBox; + + // 值域 + var codomain = this.DVBCodomain; + // 重要步骤：定义图表 Bar 数据视图框中单位值的含义 + this.DVBUnitValue = (codomain[1] - codomain[0]) / this.DVBHeight; + var uv = this.DVBUnitValue; + // 数据值数组 + var fv = this.dataValues; + if (fv.length < 1) { + return; + } // 没有数据 + + // 获取 x 轴上的图形信息 + var xShapeInfo = this.calculateXShapeInfo(); + if (!xShapeInfo) { + return; + } + // 折线每个节点的 x 位置 + var xsLoc = xShapeInfo.xPositions; + + // 背景框，默认启用 + if (typeof (sets.useBackground) === "undefined" || sets.useBackground) { + // 将背景框图形添加到模型的 shapes 数组，注意添加顺序，后添加的图形在先添加的图形之上。 + this.shapes.push(ShapeFactory.Background(this.shapeFactory, this.chartBox, sets)); + } + + // 折线图必须使用坐标轴 + this.shapes = this.shapes.concat(ShapeFactory.GraphAxis(this.shapeFactory, dvb, sets, xShapeInfo)); + + // var isDataEffective = true; + + var xPx; // 折线节点 x 坐标 + var yPx; // 折线节点 y 坐标 + var poiLists = []; // 折线节点数组 + + var shapePois = []; // 折线节点图形数组 + for (var i = 0, len = fv.length; i < len; i++) { + // 数据溢出值域检查 + if (fv[i] < codomain[0] || fv[i] > codomain[1]) { + // isDataEffective = false; + return null; + } + + xPx = xsLoc[i]; + yPx = dvb[1] - (fv[i] - codomain[0]) / uv; + + // 折线节点参数对象 + var poiSP = new Point(xPx, yPx); + // 折线节点 style + poiSP.style = ShapeFactory.ShapeStyleTool({fillColor: "#ee9900"}, sets.pointStyle, sets.pointStyleByFields, sets.pointStyleByCodomain, i, fv[i]); + // 折线节点 hover 样式 + poiSP.highlightStyle = ShapeFactory.ShapeStyleTool(null, sets.pointHoverStyle); + + // 折线节点 hover click + if (typeof (sets.pointHoverAble) !== "undefined") { + poiSP.hoverable = sets.pointHoverAble; + } + if (typeof (sets.pointClickAble) !== "undefined") { + poiSP.clickable = sets.pointClickAble; + } + + // 图形携带的数据信息 + poiSP.refDataID = this.data.FID; + poiSP.dataInfo = { + field: this.fields[i], + value: fv[i] + }; + + // 创建图形并把此图形添加到折线节点图形数组 + shapePois.push(this.shapeFactory.createShape(poiSP)); + + // 添加折线节点到折线节点数组 + var poi = [xPx, yPx]; + poiLists.push(poi); + } + + // 折线参数对象 + var lineSP = new FeatureLine(poiLists); + lineSP.style = ShapeFactory.ShapeStyleTool({strokeColor: "#ee9900"}, sets.lineStyle); + // 禁止事件响应 + lineSP.clickable = false; + lineSP.hoverable = false; + var shapeLine = this.shapeFactory.createShape(lineSP); + this.shapes.push(shapeLine); + + // 添加节点到图表图形数组 + this.shapes = this.shapes.concat(shapePois); + + // // 数据范围检测未通过，清空图形 + // if (isDataEffective === false) { + // this.shapes = []; + // } + + // 重要步骤：将图形转为由相对坐标表示的图形，以便在地图平移缩放过程中快速重绘图形 + // （统计专题图模块从结构上要求使用相对坐标，assembleShapes() 函数必须在图形装配完成后调用 shapesConvertToRelativeCoordinate() 函数） + this.shapesConvertToRelativeCoordinate(); + } + + /** + * @function Zondy.Theme.Line.prototype.calculateXShapeInfo + * @description 计算 X 轴方向上的图形信息，此信息是一个对象，包含两个属性， + * 属性 xPositions 是一个一维数组，该数组元素表示图形在 x 轴方向上的像素坐标值， + * 如果图形在 x 方向上有一定宽度，通常取图形在 x 方向上的中心点为图形在 x 方向上的坐标值。 + * width 表示图形的宽度（特别注意：点的宽度始终为 0，而不是其直径）。 + * 本函数中图形配置对象 setting 可设属性：
+ * xShapeBlank - {Array.} 水平方向上的图形空白间隔参数。 + * 长度为 2 的数组，第一元素表示第折线左端点与数据视图框左端的空白间距，第二个元素表示折线右端点右端与数据视图框右端端的空白间距 。 + * @returns {Object} 如果计算失败，返回 null；如果计算成功，返回 X 轴方向上的图形信息，此信息是一个对象，包含以下两个属性：
+ * xPositions - {Array.} 表示图形在 x 轴方向上的像素坐标值，如果图形在 x 方向上有一定宽度，通常取图形在 x 方向上的中心点为图形在 x 方向上的坐标值。
+ * width - {number} 表示图形的宽度（特别注意：点的宽度始终为 0，而不是其直径）。 + */ + calculateXShapeInfo() { + var dvb = this.dataViewBox; // 数据视图框 + var sets = this.setting; // 图表配置对象 + var fvc = this.dataValues.length; // 数组值个数 + + if (fvc < 1) { + return null; + } + + var xBlank; // x 轴空白间隔参数 + var xShapePositions = []; // x 轴上图形的位置 + var xShapeWidth = 0; // x 轴上图形宽度(自适应) + var dvbWidth = this.DVBWidth; // 数据视图框宽度 + var unitOffset = 0; // 单位偏移量 + + // x 轴空白间隔参数处理 + if (sets.xShapeBlank && sets.xShapeBlank.length && sets.xShapeBlank.length === 2) { + xBlank = sets.xShapeBlank; + var xsLen = dvbWidth - (xBlank[0] + xBlank[1]); + if (xsLen <= fvc) { + return null; + } + unitOffset = xsLen / (fvc - 1); + } else { + // 默认使用等距离空白间隔，空白间隔为图形宽度 + unitOffset = dvbWidth / (fvc + 1); + xBlank = [unitOffset, unitOffset, unitOffset]; + } + + // 图形 x 轴上的位置计算 + var xOffset = 0; + for (var i = 0; i < fvc; i++) { + if (i === 0) { + xOffset = xBlank[0]; + } else { + xOffset += unitOffset; + } + + xShapePositions.push(dvb[0] + xOffset); + } + + return { + "xPositions": xShapePositions, + "width": xShapeWidth + }; + } +} + +export {Line}; +Zondy.Theme.Line = Line; \ No newline at end of file diff --git a/src/mapboxgl/theme/common/overlay/Pie.js b/src/mapboxgl/theme/common/overlay/Pie.js new file mode 100644 index 000000000..e043197ed --- /dev/null +++ b/src/mapboxgl/theme/common/overlay/Pie.js @@ -0,0 +1,208 @@ +import { Common } from '@mapgis/webclient-es6-service'; +const { Zondy } = Common; +import {ShapeFactory} from './feature/ShapeFactory'; +import {Sector} from './feature/Sector'; +import {Graph} from './Graph'; + +/** + * @private + * @class Zondy.Theme.Pie + * @classdesc 饼图。 + * @param {Zondy.Feature.Vector} data - 用户数据。 + * @param {Zondy.Layer.Graph} layer - 此专题要素所在图层。 + * @param {Array.} fields - data 中的参与此图表生成的字段名称。 + * @param {Zondy.Feature.Theme.Point.setting} setting - 图表配置对象。 + * @param {Zondy.LonLat} [lonlat] - 专题要素地理位置。默认为 data 指代的地理要素 Bounds 中心。 + * @extends Zondy.Feature.Theme.Graph + * + * @typedef {Object} Zondy.Theme.Pie.setting + * @property {number} width - 专题要素（图表）宽度。 + * @property {number} height - 专题要素（图表）高度。 + * @property {Array.} codomain - 图表允许展示的数据值域，长度为 2 的一维数组，第一个元素表示值域下限，第二个元素表示值域上限。 + * @property {number} [XOffset] - 专题要素（图表）在 X 方向上的偏移值，单位像素。 + * @property {number} [YOffset] - 专题要素（图表）在 Y 方向上的偏移值，单位像素。 + * @property {Array.} [dataViewBoxParameter=[0, 0, 0, 0]] - 数据视图框 dataViewBox 参数， + * 它是指图表框 chartBox （由图表位置、图表宽度、图表高度构成的图表范围框）在左、下，右，上四个方向上的内偏距值。 + * @property {Array.} decimalNumber - 数据值数组 dataValues 元素值小数位数，数据的小数位处理参数，取值范围：[0, 16]。如果不设置此参数，在取数据值时不对数据做小数位处理。 + * @property {boolean} [useBackground=false] - 是否使用图表背景框。 + * @property {Zondy.Feature.ShapeParameters.Rectangle.style} backgroundStyle - 背景样式。 + * @property {Array.} [backgroundRadius=[0, 0, 0, 0]] - 背景框矩形圆角半径，可以用数组分别指定四个角的圆角半径，设：左上、右上、右下、左下角的半径依次为 r1、r2、r3、r4 ，则 backgroundRadius 为 [r1、r2、r3、r4 ]。 + * @property {Zondy.Feature.ShapeParameters.Sector.style} sectorStyle - 饼图中扇形的基础 style，此参数控制饼图扇形基础样式，优先级低于 sectorStyleByFields 和 sectorStyleByCodomain。 + * @property {Array.} sectorStyleByFields - 按专题字段 themeFields（）为饼图扇形赋 style，此参数按字段控制饼图扇形样式，优先级低于 sectorStyleByCodomain，高于 sectorStyle。此参数中的 style 与 themeFields 中的字段一一对应 。例如： themeFields（） 为 ["POP_1992", "POP_1995", "POP_1999"], + * sectorStyleByFields 为[style1, style2, style3]，则在图表中，字段 POP_1992 对应的饼图扇形使用 style1，字段 POP_1995 对应的饼图扇形使用 style2 ，字段 POP_1999 对应的饼图扇形使用 style3。 + * @property {Array.} sectorStyleByCodomain - 按饼图扇形代表的数据值所在值域范围控制饼图扇形样式，优先级高于 sectorStyle 和 sectorStyleByFields。 + * @property {Object} [sectorHoverStyle] 饼图扇形 hover 状态时的样式，sectorHoverAble 为 true 时有效。 + * @property {boolean} [sectorHoverAble=true] 是否允许饼图扇形使用 hover 状态。同时设置 sectorHoverAble 和 sectorClickAble 为 false，可以直接屏蔽饼图扇形对专题图层事件的响应。 + * @property {boolean} [sectorClickAble=true] 是否允许饼图扇形被点击。同时设置 sectorHoverAble 和 sectorClickAble 为 false，可以直接屏蔽饼图扇形对专题图层事件的响应。 + * + * @example + * // sectorStyleByCodomain 的每个元素是个包含值域信息和与值域对应样式信息的对象，该对象（必须）有三个属性： + * // start: 值域值下限（包含）; + * // end: 值域值上限（不包含）; + * // style: 数据可视化图形的 style，这个样式对象的可设属性： 。 + * // sectorStyleByCodomain 数组形如： + * [ + * { + * start:0, + * end:250, + * style:{ + * fillColor:"#00CD00" + * } + * }, + * { + * start:250, + * end:500, + * style:{ + * fillColor:"#00EE00" + * } + * }, + * { + * start:500, + * end:750, + * style:{ + * fillColor:"#00FF7F" + * } + * }, + * { + * start:750, + * end:1500, + * style:{ + * fillColor:"#00FF00" + * } + * } + * ] + * @extends {Zondy.Feature.Theme.Graph} + */ +class Pie extends Graph { + + constructor(data, layer, fields, setting, lonlat, option) { + super(data, layer, fields, setting, lonlat, option); + this.CLASS_NAME = "Zondy.Theme.Pie"; + } + + /** + * @function Zondy.Theme.Pie.prototype.destroy + * @description 销毁此专题要素。调用 destroy 后此对象所以属性置为 null。 + */ + destroy() { + super.destroy(); + } + + /** + * @function Zondy.Theme.Pie.prototype.assembleShapes + * @description 装配图形（扩展接口）。 + */ + assembleShapes() { + // 图表配置对象 + var sets = this.setting; + + // 一个默认 style 组 + var defaultStyleGroup = [ + {fillColor: "#ff9277"}, {fillColor: "#dddd00"}, {fillColor: "#ffc877"}, {fillColor: "#bbe3ff"}, {fillColor: "#d5ffbb"}, + {fillColor: "#bbbbff"}, {fillColor: "#ddb000"}, {fillColor: "#b0dd00"}, {fillColor: "#e2bbff"}, {fillColor: "#ffbbe3"}, + {fillColor: "#ff7777"}, {fillColor: "#ff9900"}, {fillColor: "#83dd00"}, {fillColor: "#77e3ff"}, {fillColor: "#778fff"}, + {fillColor: "#c877ff"}, {fillColor: "#ff77ab"}, {fillColor: "#ff6600"}, {fillColor: "#aa8800"}, {fillColor: "#77c7ff"}, + {fillColor: "#ad77ff"}, {fillColor: "#ff77ff"}, {fillColor: "#dd0083"}, {fillColor: "#777700"}, {fillColor: "#00aa00"}, + {fillColor: "#0088aa"}, {fillColor: "#8400dd"}, {fillColor: "#aa0088"}, {fillColor: "#dd0000"}, {fillColor: "#772e00"} + ]; + + // 重要步骤：初始化参数 + if (!this.initBaseParameter()) { + return; + } + + // 背景框，默认不启用 + if (sets.useBackground) { + this.shapes.push(ShapeFactory.Background(this.shapeFactory, this.chartBox, sets)); + } + + // 数据值数组 + var fv = this.dataValues; + if (fv.length < 1) { + return; + } // 没有数据 + + // 值域范围 + var codomain = this.DVBCodomain; + // 值域范围检测 + for (let i = 0; i < fv.length; i++) { + if (fv[i] < codomain[0] || fv[i] > codomain[1]) { + return; + } + } + + // 值的绝对值总和 + var valueSum = 0; + for (let i = 0; i < fv.length; i++) { + valueSum += Math.abs(fv[i]); + } + + // 重要步骤：定义图表 Pie 数据视图框中单位值的含义，单位值：每度代表的数值 + this.DVBUnitValue = 360 / valueSum; + var uv = this.DVBUnitValue; + + var dvbCenter = this.DVBCenterPoint; // 数据视图框中心作为扇心 + + var startAngle = 0; // 扇形起始边角度 + var endAngle = 0; // 扇形终止边角度 + var startAngleTmp = startAngle; // 扇形临时起始边角度 + // 扇形（自适应）半径 + var r = this.DVBHeight < this.DVBWidth ? this.DVBHeight / 2 : this.DVBWidth / 2; + + for (var i = 0; i < fv.length; i++) { + var fvi = Math.abs(fv[i]); + //计算终止角 + if (i === 0) { + endAngle = startAngle + fvi * uv; + } else if (i === fvi.length - 1) { + endAngle = startAngleTmp; + } else { + endAngle = startAngle + fvi * uv; + } + //矫正误差计算 + if ((endAngle - startAngle) >= 360) { + endAngle = 359.9999999; + } + + // 扇形参数对象 + var sectorSP = new Sector(dvbCenter[0], dvbCenter[1], r, startAngle, endAngle); + // 扇形样式 + if (typeof (sets.sectorStyleByFields) === "undefined") { + // 使用默认 style 组 + var colorIndex = i % defaultStyleGroup.length; + sectorSP.style = ShapeFactory.ShapeStyleTool(null, sets.sectorStyle, defaultStyleGroup, null, colorIndex); + } else { + sectorSP.style = ShapeFactory.ShapeStyleTool(null, sets.sectorStyle, sets.sectorStyleByFields, sets.sectorStyleByCodomain, i, fv[i]); + } + + // 扇形 hover 样式 + sectorSP.highlightStyle = ShapeFactory.ShapeStyleTool(null, sets.sectorHoverStyle); + // 扇形 hover 与 click 设置 + if (typeof (sets.sectorHoverAble) !== "undefined") { + sectorSP.hoverable = sets.sectorHoverAble; + } + if (typeof (sets.sectorClickAble) !== "undefined") { + sectorSP.clickable = sets.sectorClickAble; + } + // 图形携带的数据信息 + sectorSP.refDataID = this.data.FID; + sectorSP.dataInfo = { + field: this.fields[i], + value: fv[i] + }; + + // 创建扇形并把此扇形添加到图表图形数组 + this.shapes.push(this.shapeFactory.createShape(sectorSP)); + + // 把上一次的结束角度作为下一次的起始角度 + startAngle = endAngle; + } + + // 重要步骤：将图形转为由相对坐标表示的图形，以便在地图平移缩放过程中快速重绘图形 + // （统计专题图模块从结构上要求使用相对坐标，assembleShapes() 函数必须在图形装配完成后调用 shapesConvertToRelativeCoordinate() 函数） + this.shapesConvertToRelativeCoordinate(); + } +} + +export {Pie}; +Zondy.Theme.Pie = Pie; \ No newline at end of file diff --git a/src/mapboxgl/theme/common/overlay/Point.js b/src/mapboxgl/theme/common/overlay/Point.js new file mode 100644 index 000000000..339c6c490 --- /dev/null +++ b/src/mapboxgl/theme/common/overlay/Point.js @@ -0,0 +1,269 @@ +import { Common } from '@mapgis/webclient-es6-service'; +const { Zondy } = Common; +import {ShapeFactory} from './feature/ShapeFactory'; +import {Point as FeaturePoint} from './feature/Point'; +import {Graph} from './Graph'; + +/** + * @private + * @class Zondy.Theme.Point + * @classdesc 点状图。 + * @param {Zondy.Feature.Vector} data - 用户数据。 + * @param {Zondy.Layer.Graph} layer - 此专题要素所在图层。 + * @param {Array.} fields - data 中的参与此图表生成的字段名称。 + * @param {Zondy.Theme.Point.setting} setting - 图表配置对象。 + * @param {Zondy.LonLat} [lonlat] - 专题要素地理位置。默认为 data 指代的地理要素 Bounds 中心。 + * + * @typedef {Object} Zondy.Theme.Point.setting + * @property {number} width - 专题要素（图表）宽度。 + * @property {number} height - 专题要素（图表）高度。 + * @property {Array.} codomain - 图表允许展示的数据值域，长度为 2 的一维数组，第一个元素表示值域下限，第二个元素表示值域上限。 + * @property {number} [XOffset] - 专题要素（图表）在 X 方向上的偏移值，单位像素。 + * @property {number} [YOffset] - 专题要素（图表）在 Y 方向上的偏移值，单位像素。 + * @property {Array.} [dataViewBoxParameter] - 数据视图框 dataViewBox 参数， + * 它是指图表框 chartBox （由图表位置、图表宽度、图表高度构成的图表范围框）在左、下，右，上四个方向上的内偏距值。 + * 当使用坐标轴时 dataViewBoxParameter 的默认值为：[45, 15, 15, 15]；不使用坐标轴时 dataViewBoxParameter 的默认值为：[5, 5, 5, 5]。 + * @property {number} [decimalNumber] - 数据值数组 dataValues 元素值小数位数，数据的小数位处理参数，取值范围：[0, 16]。如果不设置此参数，在取数据值时不对数据做小数位处理。 + * @property {boolean} [useBackground] - 是否使用图表背景框。 + * @property {Zondy.Feature.ShapeParameters.Rectangle.style} backgroundStyle - 背景样式。 + * @property {Array.} [backgroundRadius=[0, 0, 0, 0]] - 背景框矩形圆角半径，可以用数组分别指定四个角的圆角半径，设：左上、右上、右下、左下角的半径依次为 r1、r2、r3、r4 , + * 则 backgroundRadius 为 [r1、r2、r3、r4 ]。 + * @property {Array.} xShapeBlank - 水平方向上的图形空白间隔参数。 + * 长度为 2 的数组，第一个元素表示第一个（沿 x 轴方向）图形点与数据视图框左端的空白间距，第二个元素表示最后一个（沿 x 轴方向）图形点与数据视图框右端端的空白间距 。 + * @property {Object} axisStyle - 坐标轴样式。 + * @property {boolean} [axisUseArrow=false] - 坐标轴是否使用箭头。 + * @property {number} [axisYTick=0] - y 轴刻度数量。 + * @property {Array.} [axisYLabels] - y 轴上的标签组内容，标签顺序沿着数据视图框左面条边自上而下，等距排布。例如：["1000", "750", "500", "250", "0"]。 + * @property {Zondy.Feature.ShapeParameters.Label.style} [axisYLabelsStyle] - y 轴上的标签组样式。 + * @property {Array.} [axisYLabelsOffset=0] - y 轴上的标签组偏移量。长度为 2 的数组，数组第一项表示 y 轴标签组横向上的偏移量，向左为正； + * 数组第二项表示 y 轴标签组纵向上的偏移量，向下为正。 + * @property {Array.} [axisXLabels] - x 轴上的标签组内容，标签顺序沿着数据视图框下面条边自左向右排布，例如：["92年", "95年", "99年"]。 + * 标签排布规则：当标签数量与 xShapeInfo 中的属性 xShapeCenter 数量相同（即标签个数与数据个数相等时）, 按照 xShapeCenter 提供的位置排布标签， + * 否则沿数据视图框下面条边等距排布标签。 + * @property {Zondy.Feature.ShapeParameters.Label.style} [axisXLabelsStyle] - x 轴上的标签组样式。 + * @property {Array.} [axisXLabelsOffset=0] - x 轴上的标签组偏移量。长度为 2 的数组，数组第一项表示 x 轴标签组横向上的偏移量，向左为正， + * 数组第二项表示 x 轴标签组纵向上的偏移量，向下为正。 + * @property {boolean} [useXReferenceLine=true] - 是否使用水平参考线，如果为 true，在 axisYTick 大于 0 时有效，水平参考线是 y 轴刻度在数据视图框里的延伸。 + * @property {Zondy.Feature.ShapeParameters.Line.style} [xReferenceLineStyle] - 水平参考线样式。 + * @property {Zondy.Feature.ShapeParameters.Point.style} [pointStyle] - 点状图中图形点基础 style，此参数控制图形点基础样式，优先级低于 pointStyleByFields 和 pointStyleByCodomain。 + * @property {Array.} [pointStyleByFields] - 按专题字段 themeFields（）为图形点赋 style，此参数按字段控制图形点样式， + * 优先级低于 pointStyleByCodomain，高于 pointStyle。此数组中的元素是样式对象。 + * 此参数中的 style 与 themeFields 中的字段一一对应 。例如： themeFields（） 为 ["POP_1992", "POP_1995", "POP_1999"], + * pointStyleByFields 为[style1, style2, style3]，则在图表中，字段 POP_1992 对应的图形点使用 style1，字段 POP_1995 对应的图形点使用 style2 ，字段 POP_1999 对应的图形点使用 style3。 + * @property {Array.} pointStyleByCodomain - 按图形点代表的数据值所在值域范围控制图形点样式，优先级高于 pointStyle 和 pointStyleByFields。 + * @property {Object} [pointHoverStyle] - 图形点 hover 状态时的样式，pointHoverAble 为 true 时有效。 + * @property {Object} [pointHoverAble=true] - 是否允许图形点使用 hover 状态。同时设置 pointHoverAble 和 pointClickAble 为 false，可以直接屏蔽图形点对专题图层事件的响应。 + * @property {Object} [pointClickAble=true] - 是否允许图形点被点击。同时设置 pointHoverAble 和 pointClickAble 为 false，可以直接屏蔽图形点对专题图层事件的响应。 + * + * @example + * // pointStyleByCodomain 的每个元素是个包含值域信息和与值域对应样式信息的对象，该对象（必须）有三个属性： + * // start: 值域值下限（包含）; + * // end: 值域值上限（不包含）; + * // style: 数据可视化图形的 style，这个样式对象的可设属性： 。 + * // pointStyleByCodomain 数组形如： + * [ + * { + * start:0, + * end:250, + * style:{ + * fillColor:"#00CD00" + * } + * }, + * { + * start:250, + * end:500, + * style:{ + * fillColor:"#00EE00" + * } + * }, + * { + * start:500, + * end:750, + * style:{ + * fillColor:"#00FF7F" + * } + * }, + * { + * start:750, + * end:1500, + * style:{ + * fillColor:"#00FF00" + * } + * } + * ] + *@extends {Zondy.Feature.Theme.Graph} + */ +class Point extends Graph { + + constructor(data, layer, fields, setting, lonlat, options) { + super(data, layer, fields, setting, lonlat, options); + this.CLASS_NAME = "Zondy.Theme.Point"; + } + + /** + * @function Zondy.Theme.Point.prototype.destroy + * @description 销毁此专题要素。调用 destroy 后此对象所以属性置为 null。 + */ + destroy() { + super.destroy(); + } + + /** + * @function Zondy.Theme.Point.prototype.assembleShapes + * @description 装配图形（扩展接口）。 + */ + assembleShapes() { + // 图表配置对象 + var sets = this.setting; + + // 默认数据视图框 + if (!sets.dataViewBoxParameter) { + if (typeof (sets.useAxis) === "undefined" || sets.useAxis) { + sets.dataViewBoxParameter = [45, 15, 15, 15]; + } else { + sets.dataViewBoxParameter = [5, 5, 5, 5]; + } + } + + // 重要步骤：初始化参数 + if (!this.initBaseParameter()) { + return; + } + + var dvb = this.dataViewBox; + + // 值域 + var codomain = this.DVBCodomain; + // 重要步骤：定义图表 Bar 数据视图框中单位值的含义 + this.DVBUnitValue = (codomain[1] - codomain[0]) / this.DVBHeight; + var uv = this.DVBUnitValue; + var fv = this.dataValues; + + // 获取 x 轴上的图形信息 + var xShapeInfo = this.calculateXShapeInfo(); + if (!xShapeInfo) { + return; + } + // 折线每个节点的 x 位置 + var xsLoc = xShapeInfo.xPositions; + + // 背景框，默认启用 + if (typeof (sets.useBackground) === "undefined" || sets.useBackground) { + // 将背景框图形添加到模型的 shapes 数组，注意添加顺序，后添加的图形在先添加的图形之上。 + this.shapes.push(ShapeFactory.Background(this.shapeFactory, this.chartBox, sets)); + } + + // 点状图必须使用坐标轴 + this.shapes = this.shapes.concat(ShapeFactory.GraphAxis(this.shapeFactory, dvb, sets, xShapeInfo)); + + var xPx; // 图形点 x 坐标 + var yPx; // 图形点 y 坐标 + for (var i = 0, len = fv.length; i < len; i++) { + // 数据溢出值域检查 + if (fv[i] < codomain[0] || fv[i] > codomain[1]) { + //isDataEffective = false; + return null; + } + + xPx = xsLoc[i]; + yPx = dvb[1] - (fv[i] - codomain[0]) / uv; + + // 图形点参数对象 + var poiSP = new FeaturePoint(xPx, yPx); + // 图形点 style + poiSP.style = ShapeFactory.ShapeStyleTool({fillColor: "#ee9900"}, sets.pointStyle, sets.pointStyleByFields, sets.pointStyleByCodomain, i, fv[i]); + // 图形点 hover 样式 + poiSP.highlightStyle = ShapeFactory.ShapeStyleTool(null, sets.pointHoverStyle); + + // 图形点 hover click + if (typeof (sets.pointHoverAble) !== "undefined") { + poiSP.hoverable = sets.pointHoverAble; + } + if (typeof (sets.pointClickAble) !== "undefined") { + poiSP.clickable = sets.pointClickAble; + } + + // 图形携带的数据信息 + poiSP.refDataID = this.data.FID; + poiSP.dataInfo = { + field: this.fields[i], + value: fv[i] + }; + + // 创建图形点并把此图形添加到图表图形数组 + this.shapes.push(this.shapeFactory.createShape(poiSP)); + } + + // 数据范围检测未通过，清空图形 + // if (isDataEffective === false) { + // this.shapes = []; + // } + + // 重要步骤：将图形转为由相对坐标表示的图形，以便在地图平移缩放过程中快速重绘图形 + // （统计专题图模块从结构上要求使用相对坐标，assembleShapes() 函数必须在图形装配完成后调用 shapesConvertToRelativeCoordinate() 函数） + this.shapesConvertToRelativeCoordinate(); + } + + /** + * @function Zondy.Theme.Point.prototype.calculateXShapeInfo + * @description 计算 X 轴方向上的图形信息，此信息是一个对象，包含两个属性， + * 属性 xPositions 是一个一维数组，该数组元素表示图形在 x 轴方向上的像素坐标值， + * 如果图形在 x 方向上有一定宽度，通常取图形在 x 方向上的中心点为图形在 x 方向上的坐标值。 + * width 表示图形的宽度（特别注意：点的宽度始终为 0，而不是其直径）。 + * 本函数中图形配置对象 setting 可设属性：
+ * xShapeBlank - {Array.} 水平方向上的图形空白间隔参数。 + * 长度为 2 的数组，第一元素表示第折线左端点与数据视图框左端的空白间距，第二个元素表示折线右端点右端与数据视图框右端端的空白间距 。 + * @returns {Object} 如果计算失败，返回 null；如果计算成功，返回 X 轴方向上的图形信息，此信息是一个对象，包含以下两个属性：
+ * xPositions - {Array.} 表示图形在 x 轴方向上的像素坐标值，如果图形在 x 方向上有一定宽度，通常取图形在 x 方向上的中心点为图形在 x 方向上的坐标值。 + * width - {number}表示图形的宽度（特别注意：点的宽度始终为 0，而不是其直径）。 + */ + calculateXShapeInfo() { + var dvb = this.dataViewBox; // 数据视图框 + var sets = this.setting; // 图表配置对象 + var fvc = this.dataValues.length; // 数组值个数 + + if (fvc < 1) { + return null; + } + + var xBlank; // x 轴空白间隔参数 + var xShapePositions = []; // x 轴上图形的位置 + var xShapeWidth = 0; // x 轴上图形宽度(自适应) + var dvbWidth = this.DVBWidth; // 数据视图框宽度 + var unitOffset = 0; // 单位偏移量 + + // x 轴空白间隔参数处理 + if (sets.xShapeBlank && sets.xShapeBlank.length && sets.xShapeBlank.length === 2) { + xBlank = sets.xShapeBlank; + var xsLen = dvbWidth - (xBlank[0] + xBlank[1]); + if (xsLen <= fvc) { + return null; + } + unitOffset = xsLen / (fvc - 1); + } else { + // 默认使用等距离空白间隔，空白间隔为图形宽度 + unitOffset = dvbWidth / (fvc + 1); + xBlank = [unitOffset, unitOffset, unitOffset]; + } + + // 图形 x 轴上的位置计算 + var xOffset = 0; + for (var i = 0; i < fvc; i++) { + if (i === 0) { + xOffset = xBlank[0]; + } else { + xOffset += unitOffset; + } + + xShapePositions.push(dvb[0] + xOffset); + } + + return { + "xPositions": xShapePositions, + "width": xShapeWidth + }; + } +} + +export {Point}; +Zondy.Theme.Point = Point; \ No newline at end of file diff --git a/src/mapboxgl/theme/common/overlay/RankSymbol.js b/src/mapboxgl/theme/common/overlay/RankSymbol.js new file mode 100644 index 000000000..3d953f566 --- /dev/null +++ b/src/mapboxgl/theme/common/overlay/RankSymbol.js @@ -0,0 +1,147 @@ +import { Common } from '@mapgis/webclient-es6-service'; +const { Zondy } = Common; +import {Graph} from './Graph'; + +/** + * @private + * @class Zondy.Theme.RankSymbol + * @classdesc 符号专题要素基类。 + * @description 此类定义了符号专题要素基础模型，具体的图表模型通过继承此类，在子类中实现 assembleShapes 方法。 + * 符号专题要素模型采用了可视化图形大小自适应策略，用较少的参数控制着图表诸多图形，图表配置对象 的基础属性只有 5 个， + * 它们控制着图表结构、值域范围、数据小数位等基础图表形态。构成图表的图形必须在图表结构里自适应大小。 + * 此类不可实例化，此类的可实例化子类必须实现 assembleShapes() 方法。 + * @param {Zondy.Feature.Vector} data - 用户数据。 + * @param {Zondy.Layer.RankSymbol} layer - 此专题要素所在图层。 + * @param {Array.} fields - data 中的参与此图表生成的字段名称。 + * @param {Object} setting - 图表配置对象。 + * @param {Zondy.LonLat} [lonlat] - 专题要素地理位置。默认为 data 指代的地理要素 Bounds 中心。 + * + * @extends Zondy.Feature.Theme.Graph + * + */ +class RankSymbol extends Graph { + + constructor(data, layer, fields, setting, lonlat, options) { + super(data, layer, fields, setting, lonlat, options); + /** + * @member Zondy.Theme.RankSymbol.prototype.setting -{Object} + * @description 符号配置对象，该对象控制着图表的可视化显示。 + * 下面是此配置对象的 5 个基础可设属性：
+ * @param {Array.} codomain - 值域，长度为 2 的一维数组，第一个元素表示值域下限，第二个元素表示值域上限。 + * @param {number} [XOffset] - 专题要素（图表）在 X 方向上的偏移值，单位像素。 + * @param {number} [YOffset] - 专题要素（图表）在 Y 方向上的偏移值，单位像素。 + * @param {Array.} [dataViewBoxParameter] - 数据视图框 dataViewBox 参数，它是指图表框 chartBox （由图表位置、图表宽度、图表高度构成的图表范围框）在左、下，右，上四个方向上的内偏距值。 + * @param {number} [decimalNumber] - 数据值数组 dataValues 元素值小数位数，数据的小数位处理参数，取值范围：[0, 16]。如果不设置此参数，在取数据值时不对数据做小数位处理。 + * 除了以上 5 个基础属性，此对象的可设属性在不同子类中有较大差异，不同子类中对同一属性的解释也可能不同。 + * 请在此类的子类中查看 setting 对象的可设属性和属性含义。 + */ + this.setting = null; + // 配置项检测与赋值 + if (setting && setting.codomain) { + this.setting = setting; + this.DVBCodomain = this.setting.codomain; + } + this.CLASS_NAME = "Zondy.Theme.RankSymbol"; + } + + /** + * @function Zondy.Theme.RankSymbol.prototype.destroy + * @description 销毁专题要素。 + */ + destroy() { + this.setting = null; + super.destroy(); + } + + /** + * @function Zondy.Theme.RankSymbol.prototype.initBaseParameter + * @description 初始化专题要素（图形）基础参数。 + * 在调用此方法前，此类的图表模型相关属性都是不可用的 ，此方法在 assembleShapes 函数中调用。 + * 调用此函数关系到 setting 对象的以下属性。 + * @param {Array.} codomain - 值域，长度为 2 的一维数组，第一个元素表示值域下限，第二个元素表示值域上限。 + * @param {number} [XOffset] - 专题要素（图形）在 X 方向上的偏移值，单位像素。 + * @param {number} [YOffset] - 专题要素（图形）在 Y 方向上的偏移值，单位像素。 + * @param {Array.} [dataViewBoxParameter] - 数据视图框 dataViewBox 参数，它是指图形框 chartBox （由图表位置、图表宽度、图表高度构成的图表范围框）在左、下，右，上四个方向上的内偏距值。 + * @param {number} [decimalNumber] - 数据值数组 dataValues 元素值小数位数，数据的小数位处理参数，取值范围：[0, 16]。如果不设置此参数，在取数据值时不对数据做小数位处理。 + * @returns {boolean} 初始化参数是否成功。 + */ + initBaseParameter() { + // 参数初始化是否成功 + var isSuccess = true; + + // setting 属性是否已成功赋值 + if (!this.setting) { + return false; + } + var sets = this.setting; + + // 图表偏移 + if (sets.XOffset) { + this.XOffset = sets.XOffset; + } + if (sets.YOffset) { + this.YOffset = sets.YOffset; + } + this.XOffset = sets.XOffset ? sets.XOffset : 0; + this.YOffset = sets.YOffset ? sets.YOffset : 0; + + // 其他默认值 + this.origonPoint = []; + this.chartBox = []; + this.dataViewBox = []; + + this.DVBParameter = sets.dataViewBoxParameter ? sets.dataViewBoxParameter : [0, 0, 0, 0]; + + this.DVBOrigonPoint = []; + this.DVBCenterPoint = []; + this.origonPointOffset = []; + + // 图表位置 + this.resetLocation(); + + // 专题要素宽度 w + var w = this.width; + // 专题要素高度 h + var h = this.height; + // 专题要素像素位置 loc + var loc = this.location; + + // 专题要素像素位置 loc + this.origonPoint = [loc[0] - w / 2, loc[1] - h / 2]; + // 专题要素原点（左上角） + var op = this.origonPoint; + + // 图表框（[left, bottom, right, top]） + this.chartBox = [op[0], op[1] + h, op[0] + w, op[1]]; + // 图表框 + var cb = this.chartBox; + + // 数据视图框参数，它是图表框各方向对应的内偏距 + var dbbP = this.DVBParameter; + // 数据视图框 （[left, bottom, right, top]） + this.dataViewBox = [cb[0] + dbbP[0], cb[1] - dbbP[1], cb[2] - dbbP[2], cb[3] + dbbP[3]]; + // 数据视图框 + var dvb = this.dataViewBox; + //检查数据视图框是否合法 + if (dvb[0] >= dvb[2] || dvb[1] <= dvb[3]) { + return false; + } + + // 数据视图框原点 + this.DVBOrigonPoint = [dvb[0], dvb[3]]; + // 数据视图框宽度 + this.DVBWidth = Math.abs(dvb[2] - dvb[0]); + // 数据视图框高度 + this.DVBHeight = Math.abs(dvb[1] - dvb[3]); + // 数据视图框中心点 + this.DVBCenterPoint = [this.DVBOrigonPoint[0] + this.DVBWidth / 2, this.DVBOrigonPoint[1] + this.DVBHeight / 2]; + + // 数据视图框原点与图表框的原点偏移量 + this.origonPointOffset = [this.DVBOrigonPoint[0] - op[0], this.DVBOrigonPoint[1] - op[1]]; + + return isSuccess; + } +} + +export {RankSymbol}; +Zondy.Theme.RankSymbol = RankSymbol; \ No newline at end of file diff --git a/src/mapboxgl/theme/common/overlay/Ring.js b/src/mapboxgl/theme/common/overlay/Ring.js new file mode 100644 index 000000000..0d801851d --- /dev/null +++ b/src/mapboxgl/theme/common/overlay/Ring.js @@ -0,0 +1,213 @@ +import { Common } from '@mapgis/webclient-es6-service'; +const { Zondy } = Common; +import {ShapeFactory} from './feature/ShapeFactory'; +import {Sector} from './feature/Sector'; +import {Graph} from './Graph'; + +/** + * @private + * @class Zondy.Theme.Ring + * @classdesc 环状图。 + * @description 基于路由对象计算指定点 M 值操作的参数类。通过该类提供参数信息。 + + * @param {Zondy.Feature.Vector} data - 用户数据。 + * @param {Zondy.Layer.Graph} layer - 此专题要素所在图层。 + * @param {Array.} fields - data 中的参与此图表生成的字段名称。 + * @param {Zondy.Theme.Ring.setting} setting - 图表配置对象。 + * @param {Zondy.LonLat} [lonlat] - 专题要素地理位置。默认为 data 指代的地理要素 Bounds 中心。 + * + * @typedef {Object} Zondy.Theme.Ring.setting + * @property {number} width - 专题要素（图表）宽度。 + * @property {number} height - 专题要素（图表）高度。 + * @property {Array.} codomain - 图表允许展示的数据值域，长度为 2 的一维数组，第一个元素表示值域下限，第二个元素表示值域上限。 + * @property {number} [XOffset] - 专题要素（图表）在 X 方向上的偏移值，单位像素。 + * @property {number} [YOffset] - 专题要素（图表）在 Y 方向上的偏移值，单位像素。 + * @property {Array.} [dataViewBoxParameter=[0, 0, 0, 0]] - 数据视图框 dataViewBox 参数，它是指图表框 chartBox （由图表位置、图表宽度、图表高度构成的图表范围框）在左、下，右，上四个方向上的内偏距值。 + * @property {number} [decimalNumber] - 数据值数组 dataValues 元素值小数位数，数据的小数位处理参数，取值范围：[0, 16]。如果不设置此参数，在取数据值时不对数据做小数位处理。 + * @property {boolean} [useBackground=false] - 是否使用图表背景框。 + * @property {Zondy.Feature.ShapeParameters.Rectangle.style} [backgroundStyle] - 背景样式，此样式对象对象可设属性。 + * @property {Array.} [backgroundRadius=[0, 0, 0, 0]] - 背景框矩形圆角半径，可以用数组分别指定四个角的圆角半径，设：左上、右上、右下、左下角的半径依次为 r1、r2、r3、r4 ,则 backgroundRadius 为 [r1、r2、r3、r4 ]。 + * @property {number} [innerRingRadius=0] - 环状图内环半径，取值范围大于 0，小于外环半径（外环半径：数据视图框长和宽中较小值的二分之一）。 + * @property {Zondy.Feature.ShapeParameters.Sector.style} [sectorStyle] - 环状图中扇形的基础 style，此参数控制环状图扇形基础样式，优先级低于 sectorStyleByFields 和 sectorStyleByCodomain。 + * @property {Array.} [sectorStyleByFields] - 按专题字段 themeFields（{@link Zondy.Layer.Graph.themeFields}|{@link L.Zondy.graphThemeLayer.themeFields}|{@link ol.source.Graph.themeFields}|{@link mapboxgl.Zondy.GraphThemeLayer.themeFields}）为环状图扇形赋 style，此参数按字段控制环状图扇形样式，优先级低于 sectorStyleByCodomain，高于 sectorStyle。此数组中的元素是样式对象。此参数中的 style 与 themeFields 中的字段一一对应 。例如： themeFields（） 为 ["POP_1992", "POP_1995", "POP_1999"],sectorStyleByFields 为[style1, style2, style3]，则在图表中，字段 POP_1992 对应的环状图扇形使用 style1，字段 POP_1995 对应的环状图扇形使用 style2 ，字段 POP_1999 对应的环状图扇形使用 style3。 + * @property {Array.} [sectorStyleByCodomain] - 按环状图扇形代表的数据值所在值域范围控制环状图扇形样式，优先级高于 sectorStyle 和 sectorStyleByFields。 + * + * @example + * // sectorStyleByCodomain 的每个元素是个包含值域信息和与值域对应样式信息的对象，该对象（必须）有三个属性： + * // start: 值域值下限（包含）; + * // end: 值域值上限（不包含）; + * // style: 数据可视化图形的 style，这个样式对象的可设属性： 。 + * // sectorStyleByCodomain 数组形如： + * [ + * { + * start:0, + * end:250, + * style:{ + * fillColor:"#00CD00" + * } + * }, + * { + * start:250, + * end:500, + * style:{ + * fillColor:"#00EE00" + * } + * }, + * { + * start:500, + * end:750, + * style:{ + * fillColor:"#00FF7F" + * } + * }, + * { + * start:750, + * end:1500, + * style:{ + * fillColor:"#00FF00" + * } + * } + * ] + * @param {Object} [sectorHoverStyle=true] - 环状图扇形 hover 状态时的样式，sectorHoverAble 为 true 时有效。 + * @param {boolean} [sectorHoverAble=true] - 是否允许环状图扇形使用 hover 状态。同时设置 sectorHoverAble 和 sectorClickAble 为 false，可以直接屏蔽环状图扇形对专题图层事件的响应。 + * @param {boolean} [sectorClickAble=true] - 是否允许环状图扇形被点击。同时设置 sectorHoverAble 和 sectorClickAble 为 false，可以直接屏蔽环状图扇形对专题图层事件的响应。 + * + * @extends {Zondy.Feature.Theme.Graph} + */ +class Ring extends Graph { + + constructor(data, layer, fields, setting, lonlat, options) { + super(data, layer, fields, setting, lonlat, options); + this.CLASS_NAME = "Zondy.Theme.Ring"; + } + + /** + * @function Zondy.Theme.Ring.prototype.destroy + * @description 销毁此专题要素。调用 destroy 后此对象所以属性置为 null。 + */ + destroy() { + super.destroy(); + } + + /** + * @function Zondy.Theme.Ring.prototype.assembleShapes + * @description 装配图形（扩展接口）。 + */ + assembleShapes() { + // 重要步骤：初始化参数 + if (!this.initBaseParameter()) { + return; + } + + // 一个默认 style 组 + var defaultStyleGroup = [ + {fillColor: "#ff9277"}, {fillColor: "#dddd00"}, {fillColor: "#ffc877"}, {fillColor: "#bbe3ff"}, {fillColor: "#d5ffbb"}, + {fillColor: "#bbbbff"}, {fillColor: "#ddb000"}, {fillColor: "#b0dd00"}, {fillColor: "#e2bbff"}, {fillColor: "#ffbbe3"}, + {fillColor: "#ff7777"}, {fillColor: "#ff9900"}, {fillColor: "#83dd00"}, {fillColor: "#77e3ff"}, {fillColor: "#778fff"}, + {fillColor: "#c877ff"}, {fillColor: "#ff77ab"}, {fillColor: "#ff6600"}, {fillColor: "#aa8800"}, {fillColor: "#77c7ff"}, + {fillColor: "#ad77ff"}, {fillColor: "#ff77ff"}, {fillColor: "#dd0083"}, {fillColor: "#777700"}, {fillColor: "#00aa00"}, + {fillColor: "#0088aa"}, {fillColor: "#8400dd"}, {fillColor: "#aa0088"}, {fillColor: "#dd0000"}, {fillColor: "#772e00"} + ]; + + // 图表配置对象 + var sets = this.setting; + + // 背景框，默认不启用 + if (sets.useBackground) { + this.shapes.push(ShapeFactory.Background(this.shapeFactory, this.chartBox, sets)); + } + + // 数据值数组 + var fv = this.dataValues; + if (fv.length < 1) { + return; + } // 没有数据 + + // 值域范围 + var codomain = this.DVBCodomain; + // 值域范围检测 + for (let i = 0; i < fv.length; i++) { + if (fv[i] < codomain[0] || fv[i] > codomain[1]) { + return; + } + } + + // 值的绝对值总和 + var valueSum = 0; + for (let i = 0; i < fv.length; i++) { + valueSum += Math.abs(fv[i]); + } + + // 重要步骤：定义图表 Ring 数据视图框中单位值的含义，单位值：每度代表的数值 + this.DVBUnitValue = 360 / valueSum; + var uv = this.DVBUnitValue; + + var dvbCenter = this.DVBCenterPoint; // 数据视图框中心作为扇心 + + var startAngle = 0; // 扇形起始边角度 + var endAngle = 0; // 扇形终止边角度 + var startAngleTmp = startAngle; // 扇形临时起始边角度 + // 扇形外环（自适应）半径 + var r = this.DVBHeight < this.DVBWidth ? this.DVBHeight / 2 : this.DVBWidth / 2; + + // 扇形内环（自适应）半径 + var isInRange = sets.innerRingRadius >= 0 && sets.innerRingRadius < r; + var r0 = ( + typeof (sets.innerRingRadius) !== "undefined" + && !isNaN(sets.innerRingRadius) + && isInRange + ) ? sets.innerRingRadius : 0; + + for (var i = 0; i < fv.length; i++) { + var fvi = Math.abs(fv[i]); + + // 计算结束角度 + if (i === 0) { + endAngle = startAngle + fvi * uv; + } else if (i === fvi.length - 1) { + endAngle = startAngleTmp; + } else { + endAngle = startAngle + fvi * uv; + } + + // 扇形参数对象 + var sectorSP = new Sector(dvbCenter[0], dvbCenter[1], r, startAngle, endAngle, r0); + // 扇形样式 + if (typeof (sets.sectorStyleByFields) === "undefined") { + // 使用默认 style 组 + var colorIndex = i % defaultStyleGroup.length; + sectorSP.style = ShapeFactory.ShapeStyleTool(null, sets.sectorStyle, defaultStyleGroup, null, colorIndex); + } else { + sectorSP.style = ShapeFactory.ShapeStyleTool(null, sets.sectorStyle, sets.sectorStyleByFields, sets.sectorStyleByCodomain, i, fv[i]); + } + // 扇形 hover 样式 + sectorSP.highlightStyle = ShapeFactory.ShapeStyleTool(null, sets.sectorHoverStyle); + // 扇形 hover 与 click 设置 + if (typeof (sets.sectorHoverAble) !== "undefined") { + sectorSP.hoverable = sets.sectorHoverAble; + } + if (typeof (sets.sectorClickAble) !== "undefined") { + sectorSP.clickable = sets.sectorClickAble; + } + // 图形携带的数据信息 + sectorSP.refDataID = this.data.FID; + sectorSP.dataInfo = { + field: this.fields[i], + value: fv[i] + }; + + // 创建扇形并把此扇形添加到图表图形数组 + this.shapes.push(this.shapeFactory.createShape(sectorSP)); + + // 把上一次的结束角度作为下一次的起始角度 + startAngle = endAngle; + } + + // 重要步骤：将图形转为由相对坐标表示的图形，以便在地图平移缩放过程中快速重绘图形 + // （统计专题图模块从结构上要求使用相对坐标，assembleShapes() 函数必须在图形装配完成后调用 shapesConvertToRelativeCoordinate() 函数） + this.shapesConvertToRelativeCoordinate(); + } +} + +export {Ring}; +Zondy.Theme.Ring = Ring; \ No newline at end of file diff --git a/src/mapboxgl/theme/common/overlay/ThemeVector.js b/src/mapboxgl/theme/common/overlay/ThemeVector.js new file mode 100644 index 000000000..bba21c5a6 --- /dev/null +++ b/src/mapboxgl/theme/common/overlay/ThemeVector.js @@ -0,0 +1,477 @@ +import { Common } from '@mapgis/webclient-es6-service'; +const { Zondy, copyAttributesWithClip } = Common; + +import {Theme as FeatureTheme} from './feature/Theme'; +import {SmicBrokenLine} from './levelRender/SmicBrokenLine'; +import {SmicPoint} from './levelRender/SmicPoint'; +import {SmicPolygon} from './levelRender/SmicPolygon'; + +/** + * @private + * @class Zondy.Theme.ThemeVector + * @classdesc 矢量专题要素类。 + * @extends Zondy.Theme + * @param {Zondy.Feature.Vector} data - 用户数据，的类型为矢量数据 feature。 + * @param {Zondy.Layer} layer - 此专题要素所在图层。 + * @param {Object} style - 样式。 + * @param {Object} options - 创建专题要素时的可选参数。 + * @param {number} [options.nodesClipPixel=2] - 节点抽稀像素距离, 单位：像素。 + * @param {boolean} [options.isHoverAble=true] - 图形是否可 hover。 + * @param {boolean} [options.isMultiHover=true] - 是否使用多图形高亮，isHoverAble 为 true 时生效。 + * @param {boolean} [options.isClickAble=true] - 图形是否可点击。 + * @param {Object} [options.highlightStyle] - 高亮样式。 + */ +class ThemeVector extends FeatureTheme { + + constructor(data, layer, style, options, shapeOptions) { + super(data, layer); + //数据的 geometry 属性必须存在且类型是 Zondy.Geometry 或其子类的类型 + if (!data.fGeom) { + return; + } + + /** + * @member {Zondy.Bounds} [Zondy.Theme.ThemeVector.prototype.dataBounds] + * @description 用户数据的（feature.geometry）地理范围。 + */ + this.dataBounds = data.bound; + + /** + * @member {number} [Zondy.Theme.ThemeVector.prototype.nodesClipPixel=2] + * @description 节点抽稀像素距离。 + */ + this.nodesClipPixel = 2; + + /** + * @member {boolean} [Zondy.Theme.ThemeVector.prototype.isHoverAble=true] + * @description 图形是否可 hover。 + */ + this.isHoverAble = true; + + /** + * @member {boolean} [Zondy.Theme.ThemeVector.prototype.isMultiHover=true] + * @description 是否使用多图形高亮，isHoverAble 为 true 时生效。 + */ + this.isMultiHover = true; + + /** + * @member {boolean} [Zondy.Theme.ThemeVector.prototype.isClickAble=true] + * @description 图形是否可点击。 + */ + this.isClickAble = true; + + /** + * @member {Object} [Zondy.Theme.ThemeVector.prototype.highlightStyle] + * @description 高亮样式。 + */ + this.highlightStyle = null; + + /** + * @member {Object} [Zondy.Theme.ThemeVector.prototype.shapeOptions] + * @description 添加到渲染器前修改 shape 的一些属性，非特殊情况通常不允许这么做。 + */ + this.shapeOptions = {}; + + /** + * @member {Object} [Zondy.Theme.ThemeVector.prototype.style] + * @description 可视化图形的 style。在子类中规定其对象结构和默认属性值。 + */ + this.style = style || {}; + + + this.CLASS_NAME = "Zondy.Theme.ThemeVector"; + this.style = style ? style : {}; + if (options) { + copyAttributesWithClip(this, options, ["shapeOptions", "dataBounds"]) + } + if (shapeOptions) { + copyAttributesWithClip(this.shapeOptions, shapeOptions); + } + + //设置基础参数 dataBounds、lonlat、location + var geometry = data.fGeom; + this.lonlat = [(this.dataBounds.xmin + this.dataBounds.xmax) / 2.0, (this.dataBounds.ymin + this.dataBounds.ymax) / 2.0]; + this.location = this.getLocalXY(this.lonlat); + + //将地理要素转为专题要素 + switch (data.ftype) { + case 0: + break; + case 1: + this.pointsToTF(data.fGeom.PntGeom); + break; + case 2: + this.linesToTF(data.fGeom.LinGeom) + break; + case 3: + this.regsToTF(data.fGeom.RegGeom); + break; + } + } + + /** + * @function Zondy.Theme.ThemeVector.prototype.destroy + * @override + */ + destroy() { + this.style = null; + this.dataBounds = null; + this.nodesClipPixel = null; + this.isHoverAble = null; + this.isMultiHover = null; + this.isClickAble = null; + this.highlightStyle = null; + this.shapeOptions = null; + super.destroy(); + } + + /** + * @function Zondy.Theme.ThemeVector.prototype.pointsToTF + * @description 转换点要素。 + * @param {Zondy.Geometry} geometry - 用户数据几何地理信息，这里必须是点。 + */ + pointsToTF(geometry) { + if (geometry == null || geometry.length <= 0) { + return; + } + var components = geometry.components; + + //节点像素坐标 + var localLX = []; + //参考位置，参考中心为 + var refLocal = []; + var location = this.location; + var pointList = []; + + //节点抽稀距离 + var nCPx = this.nodesClipPixel; + + for (var i = 0; i < geometry.length; i++) { + var components_i = geometry[i]; + refLocal = []; + localLX = this.getLocalXY([components_i.Dot.x, components_i.Dot.y]); + + refLocal[0] = localLX[0] - location[0]; + refLocal[1] = localLX[1] - location[1]; + + //抽稀 + if (pointList.length > 0) { + var lastLocalXY = pointList[pointList.length - 1]; + if ((Math.abs(lastLocalXY[0] - refLocal[0]) <= nCPx) && (Math.abs(lastLocalXY[1] - refLocal[1]) <= nCPx)) { + continue; + } + } + + //使用参考点 + pointList.push(refLocal); + + //赋 style + var style = new Object(); + style.r = 6; //防止漏设此参数，默认 6 像素 + style = copyAttributesWithClip(style, this.style); + style.x = refLocal[0]; + style.y = refLocal[1]; + + //创建图形 + var shape = new SmicPoint({ + style: style, + clickable: this.isClickAble, + hoverable: this.isHoverAble + }); + + //设置高亮样式 + if (this.highlightStyle) { + shape.highlightStyle = this.highlightStyle; + } + + //设置参考中心，指定图形位置 + shape.refOriginalPosition = location; + + //储存数据 id 属性，用于事件 + shape.refDataID = this.data.FID; + + //储存数据 id 属性，用于事件-多图形同时高亮 + shape.isHoverByRefDataID = this.isMultiHover; + + //修改一些 shape 可选属性，通常不需要这么做 + if (this.shapeOptions) { + copyAttributesWithClip(shape, this.shapeOptions); + } + + this.shapes.push(shape); + } + } + + /** + * @function Zondy.Theme.ThemeVector.prototype.lineToTF + * @description 转换线要素。 + * @param {Zondy.Geometry} geometry - 用户数据几何地理信息，这里必须是线。 + */ + linesToTF(geometry) { + if (geometry == null || geometry.length <= 0) { + return; + } + for (var i = 0; i < geometry.length; i++) { + this.lineToTF(geometry[i]); + } + } + + lineToTF(geometry) { + var components = []; + if (geometry.Line != null && geometry.Line.Arcs != null && geometry.Line.Arcs.length > 0) { + var arcs = geometry.Line.Arcs; + for (var i = 0; i < arcs.length; i++) { + var dots = arcs[i].Dots; + for (var j = 0; j < dots.length; j++) { + components.push([dots[j].x, dots[j].y]); + } + } + } + if (components.length <= 0) { + return; + } + + //节点像素坐标 + var localLX = []; + //参考位置，参考中心为 + var refLocal = []; + var location = this.location; + var pointList = []; + + //节点抽稀距离 + var nCPx = this.nodesClipPixel; + + for (var i = 0; i < components.length; i++) { + var components_i = components[i]; + refLocal = []; + localLX = this.getLocalXY(components_i); + + refLocal[0] = localLX[0] - location[0]; + refLocal[1] = localLX[1] - location[1]; + + //抽稀 - 2 px + if (pointList.length > 0) { + var lastLocalXY = pointList[pointList.length - 1]; + if ((Math.abs(lastLocalXY[0] - refLocal[0]) <= nCPx) && (Math.abs(lastLocalXY[1] - refLocal[1]) <= nCPx)) { + continue; + } + } + + //使用参考点 + pointList.push(refLocal); + } + + if (pointList.length < 2) { + return null; + } + + //赋 style + var style = new Object(); + style = copyAttributesWithClip(style, this.style, ['pointList']); + style.pointList = pointList; + + //创建图形 + var shape = new SmicBrokenLine({ + style: style, + clickable: this.isClickAble, + hoverable: this.isHoverAble + }); + + //设置高亮样式 + if (this.highlightStyle) { + shape.highlightStyle = this.highlightStyle; + } + + //设置参考中心，指定图形位置 + shape.refOriginalPosition = this.location; + + //储存数据 id 属性，用于事件 + shape.refDataID = this.data.FID; + + //储存数据 id 属性，用于事件-多图形同时高亮 + shape.isHoverByRefDataID = this.isMultiHover; + + //添加到渲染器前修改 shape 的一些属性，非特殊情况通常不允许这么做 + if (this.shapeOptions) { + copyAttributesWithClip(shape, this.shapeOptions); + } + + this.shapes.push(shape); + } + + /** + * @function Zondy.Theme.ThemeVector.prototype.regsToTF + * @description 转面要素。 + * @param {Zondy.Geometry} geometry - 用户数据几何地理信息，这里必须是面。 + */ + regsToTF(geometry) { + if (geometry == null || geometry.length <= 0) { + return; + } + for (var i = 0; i < geometry.length; i++) { + this.regToTF(geometry[i]); + } + } + + regToTF(geometry) { + + var components = geometry.Rings; + if (components == null || components.length <= 0) { + return; + } + + //节点像素坐标 + var localLX = []; + //参考位置，参考中心为 + var refLocal = []; + var location = this.location; + var pointList = []; + + //岛洞 + var holePolygonPointList = []; + var holePolygonPointLists = []; + + //节点抽稀距离 + var nCPx = this.nodesClipPixel; + + for (var i = 0; i < components.length; i++) { + if (i === 0) { + // 第一个 component 正常绘制 + pointList = []; + if (components[i] != null && components[i].Arcs != null && components[i].Arcs.length > 0) { + var arcs = components[i].Arcs; + for (var j = 0; j < arcs.length; j++) { + var dots = arcs[j].Dots; + for (var k = 0; k < dots.length; k++) { + refLocal = []; + localLX = this.getLocalXY([dots[k].x, dots[k].y]); + refLocal[0] = localLX[0] - location[0]; + refLocal[1] = localLX[1] - location[1]; + //抽稀 - 2 px + if (pointList.length > 0) { + var lastLocalXY = pointList[pointList.length - 1]; + if ((Math.abs(lastLocalXY[0] - refLocal[0]) <= nCPx) && (Math.abs(lastLocalXY[1] - refLocal[1]) <= nCPx)) { + continue; + } + } + + //使用参考点 + pointList.push(refLocal); + } + } + } + } else { + // 其它 component 作为岛洞 + holePolygonPointList = []; + if (components[i] != null && components[i].Arcs != null && components[i].Arcs.length > 0) { + var arcs = components[i].Arcs; + for (var j = 0; j < arcs.length; j++) { + var dots = arcs[j].Dots; + for (var k = 0; k < dots.length; k++) { + refLocal = []; + localLX = this.getLocalXY([dots[k].x, dots[k].y]); + refLocal[0] = localLX[0] - location[0]; + refLocal[1] = localLX[1] - location[1]; + //抽稀 - 2 px + if (holePolygonPointList.length > 0) { + var lastXY = holePolygonPointList[holePolygonPointList.length - 1]; + if ((Math.abs(lastXY[0] - refLocal[0]) <= nCPx) && (Math.abs(lastXY[1] - refLocal[1]) <= nCPx)) { + continue; + } + } + + //使用参考点 + holePolygonPointList.push(refLocal); + } + } + } + } + + if (holePolygonPointList.length < 2) { + continue; + } + + holePolygonPointLists.push(holePolygonPointList); + } + + if (pointList.length < 2) { + return; + } + + //赋 style + var style = {}; + style = copyAttributesWithClip(style, this.style, ['pointList']); + style.pointList = pointList; + + //创建图形 + var shape = new SmicPolygon({ + style: style, + clickable: this.isClickAble, + hoverable: this.isHoverAble + }); + + //设置高亮样式 + if (this.highlightStyle) { + shape.highlightStyle = this.highlightStyle; + } + + //设置参考中心，指定图形位置 + shape.refOriginalPosition = this.location; + + //储存数据 id 属性，用于事件 + shape.refDataID = this.data.FID; + + //储存数据 id 属性，用于事件-多图形同时高亮 + shape.isHoverByRefDataID = this.isMultiHover; + + //岛洞面 + if (holePolygonPointLists.length > 0) { + shape.holePolygonPointLists = holePolygonPointLists; + } + + //修改一些 shape 可选属性，通常不需要这么做 + if (this.shapeOptions) { + copyAttributesWithClip(shape, this.shapeOptions); + } + + this.shapes.push(shape); + } + + /** + * @function Zondy.Theme.ThemeVector.prototype.updateAndAddShapes + * @description 修改位置，针对地图平移操作，地图漫游操作后调用此函数。 + */ + updateAndAddShapes() { + var newLocalLX = this.getLocalXY(this.lonlat); + this.location = newLocalLX; + + var render = this.layer.renderer; + for (var i = 0, len = this.shapes.length; i < len; i++) { + var shape = this.shapes[i]; + //设置参考中心，指定图形位置 + shape.refOriginalPosition = newLocalLX; + render.addShape(shape); + } + } + + /** + * @function Zondy.Theme.ThemeVector.prototype.getShapesCount + * @description 获得专题要素中可视化图形的数量。 + * @return {number} 可视化图形的数量。 + */ + getShapesCount() { + return this.shapes.length; + } + + /** + * @function Zondy.Theme.ThemeVector.prototype.getLocalXY + * @description 地理坐标转为像素坐标。 + * @param lonlat - {Zondy.LonLat} 专题要素地理位置。 + */ + getLocalXY(lonlat) { + return this.layer.getLocalXY(lonlat); + } +} + +export {ThemeVector}; +Zondy.Theme.ThemeVector = ThemeVector; diff --git a/src/mapboxgl/theme/common/overlay/feature/Circle.js b/src/mapboxgl/theme/common/overlay/feature/Circle.js new file mode 100644 index 000000000..dbd47f3d7 --- /dev/null +++ b/src/mapboxgl/theme/common/overlay/feature/Circle.js @@ -0,0 +1,71 @@ +import { Common } from '@mapgis/webclient-es6-service'; +import {ShapeParameters} from './ShapeParameters'; + +const { Zondy } = Common; + +/** + * @private + * @class Zondy.Feature.ShapeParameters.Circle + * @classdesc 圆形参数对象。 + * @extends {Zondy.Feature.ShapeParameters} + * + * @typedef {Object} Zondy.Feature.ShapeParameters.Circle.style + * @property {string} brushType - 画笔类型。可设值："fill", "stroke", "both"。默认值："fill"。 + * @property {string} color - 填充颜色,默认值"#000000" + * @property {string} strokeColor - 描边颜色,默认值为'#000000' + * @property {string} lineCape — 线帽样式，可以是 butt, round, square，默认是butt + * @property {number} lineWidth - 描边宽度、默认是1 + * @property {number} opacity - 绘制透明度、默认是1，不透明 + * @property {number} shadowBlur - 阴影模糊度，大于0有效，默认是0 + * @property {number} shadowColor - 阴影颜色，默认是'#000000' + * @property {number} shadowOffsetX - 阴影横向偏移，默认是0 + * @property {number} shadowOffsetY - 阴影纵向偏移，默认是0 + */ +class Circle extends ShapeParameters { + + /** + * @function Zondy.Feature.ShapeParameters.Circle.prototype.constructor + * @description 创建一个圆形参数对象。 + * @param {number} x - 圆心 x 坐标，必设参数。 + * @param {number} y - 圆心 y 坐标，必设参数。 + * @param {number} r - 圆半径，必设参数。 + * @returns {Zondy.Feature.ShapeParameters.Circle} 圆形参数对象。 + */ + constructor(x, y, r) { + super(x, y, r); + + /** + * @member {number} Zondy.Feature.ShapeParameters.Circle.prototype.x + * @description 圆心 x 坐标。 + */ + this.x = !isNaN(x) ? x : 0; + + /** + * @member {number} Zondy.Feature.ShapeParameters.Circle.prototype.y + * @description 圆心 y 坐标。 + */ + this.y = !isNaN(y) ? y : 0; + + /** + * @member {number} Zondy.Feature.ShapeParameters.Circle.prototype.r + * @description 圆半径。 + */ + this.r = !isNaN(r) ? r : 0; + + this.CLASS_NAME = "Zondy.Feature.ShapeParameters.Circle"; + } + + /** + * @function Zondy.Feature.ShapeParameters.Circle.prototype.destroy + * @description 销毁对象。 + */ + destroy() { + this.x = null; + this.y = null; + this.r = null; + super.destroy(); + } +} + +export {Circle}; +Zondy.Feature.ShapeParameters.Circle = Circle; diff --git a/src/mapboxgl/theme/common/overlay/feature/Image.js b/src/mapboxgl/theme/common/overlay/feature/Image.js new file mode 100644 index 000000000..ec3fa8c00 --- /dev/null +++ b/src/mapboxgl/theme/common/overlay/feature/Image.js @@ -0,0 +1,108 @@ +import { Common } from '@mapgis/webclient-es6-service'; +import {ShapeParameters} from './ShapeParameters'; + +const { Zondy } = Common; + +/** + * @private + * @class Zondy.Feature.ShapeParameters.Image + * @classdesc 图片参数对象。 + * @extends {Zondy.Feature.ShapeParameters} + */ +class Image extends ShapeParameters { + + /** + * @function Zondy.Feature.ShapeParameters.Image.prototype.constructor + * @description 创建一个图片参数对象。 + * @param {number} x - 左上角横坐标，必设参数。 + * @param {number} y - 左上角纵坐标，必设参数。 + * @param {(string|Object)} image - 图片地址或Cavans对象，必设参数。 + * @param {number} width - 绘制到画布上的宽度，默认为图片高度。 + * @param {number} height - 绘制到画布上的高度，默认为图片高度。 + * @param {number} sx - 从图片中裁剪的左上角横坐标。 + * @param {number} sy - 从图片中裁剪的左上角纵坐标。 + * @param {number} sWidth - 从图片中裁剪的宽度，默认为图片高度。 + * @param {number} sHeight - 绘制到画布上的高度，默认为图片高度。 + * @returns {Zondy.Feature.ShapeParameters.Image} 圆形参数对象。 + */ + constructor(x, y, image, width, height, sx, sy, sWidth, sHeight) { + super(x, y, image, width, height, sx, sy, sWidth, sHeight); + + /** + * @member {number} Zondy.Feature.ShapeParameters.Image.prototype.x + * @description 左上角横坐标，必设参数。 + */ + this.x = x; + + /** + * @member {number} Zondy.Feature.ShapeParameters.Image.prototype.y + * @description 左上角纵坐标，必设参数。 + */ + this.y = y; + + /** + * @member {(string|Object)} Zondy.Feature.ShapeParameters.Image.prototype.image + * @description 图片地址。 + */ + this.image = image; + + /** + * @member {number} Zondy.Feature.ShapeParameters.Image.prototype.width + * @description 绘制到画布上的宽度，默认为图片高度。 + */ + this.width = width; + + /** + * @member {number} Zondy.Feature.ShapeParameters.Image.prototype.height + * @description 绘制到画布上的高度，默认为图片高度。 + */ + this.height = height; + + /** + * @member {number} Zondy.Feature.ShapeParameters.Image.prototype.sx + * @description 从图片中裁剪的左上角横坐标。 + */ + this.sx = sx; + + /** + * @member {number} Zondy.Feature.ShapeParameters.Image.prototype.sy + * @description 从图片中裁剪的左上角纵坐标。 + */ + this.sy = sy; + + /** + * @member {number} Zondy.Feature.ShapeParameters.Image.prototype.sWidth + * @description 从图片中裁剪的宽度，默认为图片高度。 + */ + this.sWidth = sWidth; + + /** + * @member {number} Zondy.Feature.ShapeParameters.Image.prototype.sHeight + * @description 绘制到画布上的高度，默认为图片高度。 + */ + this.sHeight = sHeight; + + this.CLASS_NAME = "Zondy.Feature.ShapeParameters.Image"; + + } + + /** + * @function Zondy.Feature.ShapeParameters.Image.prototype.destroy + * @description 销毁对象。 + */ + destroy() { + this.x = null; + this.y = null; + this.image = null; + this.width = null; + this.height = null; + this.sx = null; + this.sy = null; + this.sWidth = null; + this.sHeight = null; + super.destroy(); + } +} + +export {Image}; +Zondy.Feature.ShapeParameters.Image = Image; \ No newline at end of file diff --git a/src/mapboxgl/theme/common/overlay/feature/Label.js b/src/mapboxgl/theme/common/overlay/feature/Label.js new file mode 100644 index 000000000..30502ea56 --- /dev/null +++ b/src/mapboxgl/theme/common/overlay/feature/Label.js @@ -0,0 +1,82 @@ +import { Common } from '@mapgis/webclient-es6-service'; +import {ShapeParameters} from './ShapeParameters'; + +const { Zondy } = Common; + +/** + * @private + * @class Zondy.Feature.ShapeParameters.Label + * @classdesc 标签参数对象。 + * @extent {Zondy.Feature.ShapeParameters} + * + * @typedef {Object} Zondy.Feature.ShapeParameters.Label.style + * @property {boolean} fill - 是否填充，不需要填充则设置为 false，默认值为 true。此属性与 stroke 不能同时为 false，如果 fill 与 stroke 同时为 false，将按 fill 与 stroke 的默认值渲染。 + * @property {string} fillColor - 十六进制填充颜色。默认值为 "#000000"。 + * @property {number} fillOpacity - 填充不透明度。取值范围[0, 1]，默认值 1。 + * @property {boolean} stroke - 是否描边，不需要描边则设置为false，默认值为 false。此属性与 fill 不能同时为 false，如果 fill 与 stroke 同时为 false，将按 fill 与 stroke 的默认值渲染。 + * @property {string} strokeColor - 十六进制描边颜色。 + * @property {number} strokeOpacity - 描边的不透明度。取值范围[0, 1]，默认值 1。 + * @property {number} strokeWidth -描边宽度，默认值 1。 + * @property {number} maxWidth - 最大宽度限制。默认值：null。 + * @property {number} fontSize - 标签文本字体大小。默认值 12，单位是像素。 + * @property {string} fontStyle - 标签文本字体样式。可设值："normal", "italic", "oblique"; 默认值："normal" 。 + * @property {string} fontVariant - 标签文本字体变体。可设值："normal", "small-caps"; 默认值："normal" 。 + * @property {string} fontWeight - 标签文本字体粗细。可设值："normal", "bold", "bolder", "lighter"; 默认值："normal" 。 + * @property {string} fontFamily - 标签文本字体系列。fontFamily 值是字体族名称或/及类族名称的一个优先表，每个值逗号分割，浏览器会使用它可识别的第一个值。 + * 可以使用具体的字体名称（"times"、"courier"、"arial"）或字体系列名称（"serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"）。默认值："arial,sans-serif". + * @property {string} labelBaseline - 标签文本垂直对齐, 可以是 'top', 'bottom', 'middle'，默认值 'middle'。 + * @property {string} labelAlign - 标签文本水平对齐。可以是 'left', 'right', 'center'; 默认值 'center'。 + * @property {number} shadowBlur - 阴影模糊度，大于 0 有效。默认值：0。 + * @property {number} shadowColor - 阴影颜色。默认值："#000000'"。 + * @property {number} shadowOffsetX - 阴影横向偏移。默认值：0。 + * @property {number} shadowOffsetY - 阴影纵向偏移。默认值：0。 + */ +class Label extends ShapeParameters { + + /** + * @function Zondy.Feature.ShapeParameters.Label.prototype.constructor + * @description 创建一个标签参数对象。 + * @param {number} x - 横坐标，必设参数。 + * @param {number} y - 纵坐标，必设参数。 + * @param {string} text - 图形中的附加文本，必设参数。 + * @returns {Zondy.Feature.ShapeParameters.Label} 标签参数对象。 + */ + constructor(x, y, text) { + super(x, y, text); + + /** + * @member {number} Zondy.Feature.ShapeParameters.Label.prototype.x + * @description 标签 x 坐标。 + */ + this.x = x; + + /** + * @member {number} Zondy.Feature.ShapeParameters.Label.prototype.y + * @description 标签 y 坐标。 + */ + this.y = y; + + /** + * @member {number} Zondy.Feature.ShapeParameters.Label.prototype.text + * @description 标签的文本内容。 + */ + this.text = text; + + this.CLASS_NAME = "Zondy.Feature.ShapeParameters.Label"; + } + + /** + * @function Zondy.Feature.ShapeParameters.Label.prototype.destroy + * @description 销毁对象。 + */ + destroy() { + this.x = null; + this.y = null; + this.text = null; + + super.destroy(); + } +} + +export {Label}; +Zondy.Feature.ShapeParameters.Label = Label; \ No newline at end of file diff --git a/src/mapboxgl/theme/common/overlay/feature/Line.js b/src/mapboxgl/theme/common/overlay/feature/Line.js new file mode 100644 index 000000000..210570109 --- /dev/null +++ b/src/mapboxgl/theme/common/overlay/feature/Line.js @@ -0,0 +1,63 @@ +import { Common } from '@mapgis/webclient-es6-service'; +import {ShapeParameters} from './ShapeParameters'; + +const { Zondy } = Common; + +/** + * @private + * @class Zondy.Feature.ShapeParameters.Line + * @classdesc 线参数对象。 + * @extends {Zondy.Feature.ShapeParameters} + * + * @typedef {Object} Zondy.Feature.ShapeParameters.Line.style + * @property {string} strokeColor - 十六进制线颜色。 + * @property {number} strokeWidth - 线宽度，默认值 1。 + * @property {string} strokeLinecap - 线帽样式；strokeLinecap 有三种类型 ：“butt", "round", "square"; 默认为"butt"。 + * @property {string} strokeLineJoin - 线段连接样式；strokeLineJoin 有三种类型： “miter", "round", "bevel"; 默认为"miter"。 + * @property {string} strokeDashstyle - 虚线类型； strokeDashstyle 有八种类型 ：“dot",“dash",“dashdot",“longdash",“longdashdot",“solid", "dashed", "dotted"; 默认值 "solid"。solid 表示实线。 + * @property {number} strokeOpacity - 线的不透明度。取值范围[0, 1]，默认值 1。 + * @property {number} shadowBlur - 阴影模糊度，（大于 0 有效; 默认值 0）。 + * @property {string} shadowColor - 阴影颜色; 默认值 '#000000'。 + * @property {number} shadowOffsetX - 阴影 X 方向偏移值; 默认值 0。 + * @property {number} shadowOffsetY - 阴影 Y 方向偏移值; 默认值 0。 + */ +class Line extends ShapeParameters { + /** + * @function Zondy.Feature.ShapeParameters.Line.prototype.constructor + * @description 创建一个图形线参数对象。 + * @param {Array} pointList - 线要素节点数组，二维数组，必设参数。 + * @returns {Zondy.Feature.ShapeParameters.Line} 圆形参数对象。 + */ + constructor(pointList) { + super(pointList); + + /** + * @member {Array} Zondy.Feature.ShapeParameters.Line.prototype.pointList + * @description 线要素节点数组，二维数组。 + * 数组形如： + * (start code) + * [ + * [10, 20], //节点 + * [30, 40], + * [25, 30] //最后一个节点和第一个节点不必相同，绘制时自动封闭 + * ] + * (end) + */ + this.pointList = pointList; + + this.CLASS_NAME = "Zondy.Feature.ShapeParameters.Line"; + + } + + /** + * @function Zondy.Feature.ShapeParameters.Line.prototype.destroy + * @description 销毁对象。 + */ + destroy() { + this.pointList = null; + super.destroy(); + } +} + +export {Line}; +Zondy.Feature.ShapeParameters.Line = Line; \ No newline at end of file diff --git a/src/mapboxgl/theme/common/overlay/feature/Point.js b/src/mapboxgl/theme/common/overlay/feature/Point.js new file mode 100644 index 000000000..430056ecc --- /dev/null +++ b/src/mapboxgl/theme/common/overlay/feature/Point.js @@ -0,0 +1,74 @@ +import { Common } from '@mapgis/webclient-es6-service'; + +import {ShapeParameters} from './ShapeParameters'; + +const { Zondy } = Common; + +/** + * @private + * @class Zondy.Feature.ShapeParameters.Point + * @classdesc 点参数对象。 + * @extends {Zondy.Feature.ShapeParameters} + * + * @typedef {Object} Zondy.Feature.ShapeParameters.Point.style + * @property {number} pointRadius - 点的半径，默认值：6。 + * @property {boolean} fill - 是否填充，不需要填充则设置为false，默认值为 true。此属性与 stroke 不能同时为 false，如果 fill 与 stroke 同时为 false，将按 fill 与 stroke 的默认值渲染。 + * @property {string} fillColor - 十六进制填充颜色。默认值为 "#000000"。 + * @property {number} fillOpacity - 填充不透明度。取值范围[0, 1]，默认值 1。 + * @property {boolean} stroke - 是否描边，不需要描边则设置为 false，默认值为 false。此属性与 fill 不能同时为 false，如果 fill 与 stroke 同时为 false，将按 fill 与 stroke 的默认值渲染。 + * @property {string} strokeColor - 十六进制描边颜色。 + * @property {number} strokeWidth - 描边宽度，默认值 1。 + * @property {number} strokeOpacity - 描边的不透明度。取值范围[0, 1]，默认值 1。 + * @property {number} shadowBlur - 阴影模糊度，（大于 0 有效; 默认值 0）。 + * @property {string} shadowColor - 阴影颜色; 默认值 '#000000'。 + * @property {number} shadowOffsetX - 阴影 X 方向偏移值; 默认值 0。 + * @property {number} shadowOffsetY - 阴影 Y 方向偏移值; 默认值 0。 + */ +class Point extends ShapeParameters { + + /** + * @function Zondy.Feature.ShapeParameters.Point.prototype.constructor + * @description 创建一个图形点参数对象。 + * @param {number} x - 点 x 坐标，必设参数。 + * @param {number} y - 点 y 坐标，必设参数。 + * @returns {Zondy.Feature.ShapeParameters.Point} 标签参数对象。 + */ + constructor(x, y) { + super(x, y); + + /** + * @member {number} Zondy.Feature.ShapeParameters.Point.prototype.x + * @description 点 x 坐标。 + */ + this.x = !isNaN(x) ? x : 0; + + /** + * @member {number} Zondy.Feature.ShapeParameters.Point.prototype.y + * @description 点 y 坐标。 + */ + this.y = !isNaN(y) ? y : 0; + + /** + * @member {number} Zondy.Feature.ShapeParameters.Point.prototype.r + * @description 点的半径。 + */ + this.r = 6; + + this.CLASS_NAME = "Zondy.Feature.ShapeParameters.Point"; + } + + /** + * @function Zondy.Feature.ShapeParameters.Point.prototype.destroy + * @description 销毁对象。 + */ + destroy() { + this.x = null; + this.y = null; + this.r = null; + + super.destroy(); + } +} + +export {Point}; +Zondy.Feature.ShapeParameters.Point = Point; \ No newline at end of file diff --git a/src/mapboxgl/theme/common/overlay/feature/Polygon.js b/src/mapboxgl/theme/common/overlay/feature/Polygon.js new file mode 100644 index 000000000..6a988bd9b --- /dev/null +++ b/src/mapboxgl/theme/common/overlay/feature/Polygon.js @@ -0,0 +1,74 @@ +import { Common } from '@mapgis/webclient-es6-service'; +import {ShapeParameters} from './ShapeParameters'; + +const { Zondy } = Common; + +/** + * @private + * @class Zondy.Feature.ShapeParameters.Polygon + * @classdesc 面参数对象。 + * @extends {Zondy.Feature.ShapeParameters} + * + * @typedef {Object} Zondy.Feature.ShapeParameters.Polygon.style + * @property {boolean} fill - 是否填充，不需要填充则设置为false，默认值为 true。此属性与 stroke 不能同时为 false，如果 fill 与 stroke 同时为 false，将按 fill 与 stroke 的默认值渲染。 + * @property {string} fillColor - 十六进制填充颜色。默认值为 "#000000"。 + * @property {number} fillOpacity - 填充不透明度。取值范围[0, 1]，默认值 1。 + * @property {boolean} stroke - 是否描边，不需要描边则设置为 false，默认值为 false。此属性与 fill 不能同时为 false，如果 fill 与 stroke 同时为 false，将按 fill 与 stroke 的默认值渲染。 + * @property {string} strokeColor - 十六进制描边颜色。 + * @property {number} strokeWidth - 描边宽度，默认值 1。 + * @property {number} strokeOpacity - 描边的不透明度。取值范围[0, 1]，默认值 1。 + * @property {string} strokeLinecap - 线帽样式；strokeLinecap 有三种类型 ：“butt", "round", "square"; 默认为"butt"。 + * @property {string} strokeLineJoin - 线段连接样式；strokeLineJoin 有三种类型： “miter", "round", "bevel"; 默认为"miter"。 + * @property {string} strokeDashstyle - 虚线类型； strokeDashstyle 有八种类型 ：“dot",“dash",“dashdot",“longdash",“longdashdot",“solid", "dashed", "dotted"; 默认值 "solid"。solid 表示实线。 + * @property {number} shadowBlur - 阴影模糊度，（大于 0 有效; 默认值 0）。 + * @property {string} shadowColor - 阴影颜色; 默认值 '#000000'。 + * @property {number} shadowOffsetX - 阴影 X 方向偏移值; 默认值 0。 + * @property {number} shadowOffsetY - 阴影 Y 方向偏移值; 默认值 0。 + */ +class Polygon extends ShapeParameters { + + /** + * @function Zondy.Feature.ShapeParameters.Polygon.prototype.constructor + * @description 创建一个图形面参数对象。 + * @param {Array} pointList - 横坐标，必设参数。 + * @returns {Zondy.Feature.ShapeParameters.Polygon} 标签参数对象。 + */ + constructor(pointList) { + super(pointList); + + /** + * @member {Array} Zondy.Feature.ShapeParameters.Polygon.prototype.pointList + * @description 面要素节点数组，二维数组。 + * 数组形如： + * (start code) + * [ + * [10, 20], //节点 + * [30, 40], + * [25, 30] //最后一个节点和第一个节点不必相同，绘制时自动封闭 + * ] + * (end) + */ + this.pointList = pointList; + + /** + * @member {Array} Zondy.Feature.ShapeParameters.Polygon.prototype.holePolygonPointLists + * @description 岛洞面多边形顶点数组（三维数组） + */ + this.holePolygonPointLists = null; + + this.CLASS_NAME = "Zondy.Feature.ShapeParameters.Polygon"; + } + + /** + * @function Zondy.Feature.ShapeParameters.Polygon.prototype.destroy + * @description 销毁对象。 + */ + destroy() { + this.pointList = null; + this.holePolygonPointLists = null; + super.destroy(); + } +} + +export {Polygon}; +Zondy.Feature.ShapeParameters.Polygon = Polygon; \ No newline at end of file diff --git a/src/mapboxgl/theme/common/overlay/feature/Rectangle.js b/src/mapboxgl/theme/common/overlay/feature/Rectangle.js new file mode 100644 index 000000000..6169e9634 --- /dev/null +++ b/src/mapboxgl/theme/common/overlay/feature/Rectangle.js @@ -0,0 +1,83 @@ +import { Common } from '@mapgis/webclient-es6-service'; +import {ShapeParameters} from './ShapeParameters'; + +const { Zondy } = Common; + +/** + * @private + * @class Zondy.Feature.ShapeParameters.Rectangle + * @classdesc 矩形参数对象。 + * @extends {Zondy.Feature.ShapeParameters} + * + * @typedef {Object} Zondy.Feature.ShapeParameters.Rectangle.style + * @property {boolean} fill - 是否填充，不需要填充则设置为false，默认值为 true。此属性与 stroke 不能同时为 false，如果 fill 与 stroke 同时为 false，将按 fill 与 stroke 的默认值渲染。 + * @property {string} fillColor - 十六进制填充颜色。默认值为 "#000000"。 + * @property {number} fillOpacity - 填充不透明度。取值范围[0, 1]，默认值 1。 + * @property {boolean} stroke - 是否描边，不需要描边则设置为 false，默认值为 false。此属性与 fill 不能同时为 false，如果 fill 与 stroke 同时为 false，将按 fill 与 stroke 的默认值渲染。 + * @property {string} strokeColor - 十六进制描边颜色。 + * @property {number} strokeWidth - 描边宽度，默认值 1。 + * @property {number} strokeOpacity - 描边的不透明度。取值范围[0, 1]，默认值 1。 + * @property {string} strokeLinecap - 线帽样式；strokeLinecap 有三种类型 ：“butt", "round", "square"; 默认为"butt"。 + * @property {string} strokeLineJoin - 线段连接样式；strokeLineJoin 有三种类型： “miter", "round", "bevel"; 默认为"miter"。 + * @property {string} strokeDashstyle - 虚线类型； strokeDashstyle 有八种类型 ：“dot",“dash",“dashdot",“longdash",“longdashdot",“solid", "dashed", "dotted"; 默认值 "solid"。solid 表示实线。 + * @property {number} shadowBlur - 阴影模糊度，（大于 0 有效; 默认值 0）。 + * @property {string} shadowColor - 阴影颜色; 默认值 '#000000'。 + * @property {number} shadowOffsetX - 阴影 X 方向偏移值; 默认值 0。 + * @property {number} shadowOffsetY - 阴影 Y 方向偏移值; 默认值 0。 + */ +class Rectangle extends ShapeParameters { + + /** + * @function Zondy.Feature.ShapeParameters.Rectangle.prototype.constructor + * @description 创建一个图形矩形参数对象。 + * @param {number} x - 矩形 x 坐标，必设参数。 + * @param {number} y - 矩形 y 坐标，必设参数。 + * @param {number} width - 矩形 width 坐标，必设参数。 + * @param {number} height - 矩形 height 坐标，必设参数。 + * @returns {Zondy.Feature.ShapeParameters.Rectangle} 图形矩形参数对象。 + */ + constructor(x, y, width, height) { + super(x, y, width, height); + + /** + * @member {number} Zondy.Feature.ShapeParameters.Rectangle.prototype.x + * @description 左上角 x 坐标。 + */ + this.x = !isNaN(x) ? x : 0; + + /** + * @member {number} Zondy.Feature.ShapeParameters.Rectangle.prototype.y + * @description 左上角 y 坐标。 + */ + this.y = !isNaN(x) ? y : 0; + + /** + * @member {number} Zondy.Feature.ShapeParameters.Rectangle.prototype.width + * @description 宽度。 + */ + this.width = !isNaN(width) ? width : 0; + + /** + * @member {number} Zondy.Feature.ShapeParameters.Rectangle.prototype.height + * @description 高度。 + */ + this.height = !isNaN(height) ? height : 0; + + this.CLASS_NAME = "Zondy.Feature.ShapeParameters.Rectangle"; + } + + /** + * @function Zondy.Feature.ShapeParameters.Rectangle.prototype.destroy + * @description 销毁对象。 + */ + destroy() { + this.x = null; + this.y = null; + this.width = null; + this.height = null; + super.destroy(); + } +} + +export {Rectangle}; +Zondy.Feature.ShapeParameters.Rectangle = Rectangle; \ No newline at end of file diff --git a/src/mapboxgl/theme/common/overlay/feature/Sector.js b/src/mapboxgl/theme/common/overlay/feature/Sector.js new file mode 100644 index 000000000..d7a204f87 --- /dev/null +++ b/src/mapboxgl/theme/common/overlay/feature/Sector.js @@ -0,0 +1,104 @@ +import { Common } from '@mapgis/webclient-es6-service'; +import {ShapeParameters} from './ShapeParameters'; + +const { Zondy } = Common; + +/** + * @private + * @class Zondy.Feature.ShapeParameters.Sector + * @classdesc 扇形参数对象。 + * @extends {Zondy.Feature.ShapeParameters} + * + * @typedef {Object} Zondy.Feature.ShapeParameters.Sector.style + * @property {boolean} fill - 是否填充，不需要填充则设置为false，默认值为 true。此属性与 stroke 不能同时为 false，如果 fill 与 stroke 同时为 false，将按 fill 与 stroke 的默认值渲染。 + * @property {string} fillColor - 十六进制填充颜色。默认值为 "#000000"。 + * @property {number} fillOpacity - 填充不透明度。取值范围[0, 1]，默认值 1。 + * @property {boolean} stroke - 是否描边，不需要描边则设置为 false，默认值为 false。此属性与 fill 不能同时为 false，如果 fill 与 stroke 同时为 false，将按 fill 与 stroke 的默认值渲染。 + * @property {string} strokeColor - 十六进制描边颜色。 + * @property {number} strokeWidth - 描边宽度，默认值 1。 + * @property {number} strokeOpacity - 描边的不透明度。取值范围[0, 1]，默认值 1。 + * @property {number} shadowBlur - 阴影模糊度，（大于 0 有效; 默认值 0）。 + * @property {string} shadowColor - 阴影颜色; 默认值 '#000000'。 + * @property {number} shadowOffsetX - 阴影 X 方向偏移值; 默认值 0。 + * @property {number} shadowOffsetY - 阴影 Y 方向偏移值; 默认值 0。 + */ +class Sector extends ShapeParameters { + + /** + * @function Zondy.Feature.ShapeParameters.Sector.prototype.constructor + * @description 创建一个扇形参数对象。 + * @param {number} x - 圆心 x 坐标，必设参数。 + * @param {number} y - 圆心 y 坐标，必设参数。 + * @param {number} r - 外圆半径，必设参数。 + * @param {number} startAngle - 起始角度，必设参数。取值范围[0, 360)。 + * @param {number} endAngle - 结束角度，必设参数。取值范围(0, 360]。 + * @param {number} [r0=0] - 内圆半径，指定后将出现内弧，同时扇边长度为'r - r0'。取值范围[0, r)。 + * @returns {Zondy.Feature.ShapeParameters.Sector} 扇形参数对象。 + */ + constructor(x, y, r, startAngle, endAngle, r0, clockWise) { + super(x, y, r, startAngle, endAngle, r0, clockWise); + + /** + * @member {number} Zondy.Feature.ShapeParameters.Sector.prototype.x + * @description 圆心 x 坐标。 + */ + this.x = !isNaN(x) ? x : 0; + + /** + * @member {number} Zondy.Feature.ShapeParameters.Sector.prototype.Y + * @description 圆心 Y 坐标。 + */ + this.y = !isNaN(y) ? y : 0; + + /** + * @member {number} Zondy.Feature.ShapeParameters.Sector.prototype.r + * @description 外圆半径。 + */ + this.r = !isNaN(r) ? r : 0; + + /** + * @member {number} Zondy.Feature.ShapeParameters.Sector.prototype.startAngle + * @description 起始角度。取值范围[0, 360)，默认值：null。 + */ + this.startAngle = !isNaN(startAngle) ? startAngle : 0; + + /** + * @member {number} Zondy.Feature.ShapeParameters.Sector.prototype.endAngle + * @description 结束角度。取值范围(0, 360]，默认值：null。 + */ + this.endAngle = !isNaN(endAngle) ? endAngle : 0; + + /** + * @member {number} [Zondy.Feature.ShapeParameters.Sector.prototype.r0=0] + * @description 内圆半径，指定后将出现内弧，同时扇边长度为 r 减 r0。取值范围[0, r)。 + */ + this.r0 = !isNaN(r0) ? r0 : 0; + + /** + * @member {number} [Zondy.Feature.ShapeParameters.Sector.prototype.clockWise=false] + * @description 是否是顺时针。默认值：false。 + */ + this.clockWise = clockWise; + + this.CLASS_NAME = "Zondy.Feature.ShapeParameters.Sector"; + } + + /** + * @function Zondy.Feature.ShapeParameters.Sector.prototype.destroy + * @description 销毁对象。 + */ + destroy() { + this.x = null; + this.y = null; + this.r = null; + this.startAngle = null; + this.endAngle = null; + this.r0 = null; + this.clockWise = null; + + super.destroy(); + } +} + +export {Sector}; +Zondy.Feature.ShapeParameters.Sector = Sector; \ No newline at end of file diff --git a/src/mapboxgl/theme/common/overlay/feature/ShapeFactory.js b/src/mapboxgl/theme/common/overlay/feature/ShapeFactory.js new file mode 100644 index 000000000..8942e9fb4 --- /dev/null +++ b/src/mapboxgl/theme/common/overlay/feature/ShapeFactory.js @@ -0,0 +1,823 @@ +import { Common } from '@mapgis/webclient-es6-service'; + +import {Point} from './Point'; +import {Line as FeatureLine} from './Line'; +import {Polygon as FeaturePolygon} from './Polygon'; +import {Rectangle as FeatureRectangle} from './Rectangle'; +import {Sector} from './Sector'; +import {Label} from './Label'; +import {Image} from './Image'; +import {Circle as FeatureCircle} from './Circle'; +import {SmicPoint} from '../levelRender/SmicPoint'; +import {SmicText} from '../levelRender/SmicText'; +import {SmicCircle} from '../levelRender/SmicCircle'; +import {SmicBrokenLine} from '../levelRender/SmicBrokenLine'; +import {SmicImage} from '../levelRender/SmicImage'; +import {SmicPolygon} from '../levelRender/SmicPolygon'; +import {SmicRectangle} from '../levelRender/SmicRectangle'; +import {SmicSector} from '../levelRender/SmicSector'; + +const { copyAttributesWithClip, Zondy } = Common; + +/** + * @private + * @class Zondy.Feature.ShapeFactory + * @classdesc 图形工厂类。 + * 目前支持创建的图形有：
+ * 用于统计专题图：
+ * 点 - 参数对象 <{@link Zondy.Feature.ShapeParameters.Point}>
+ * 线 - 参数对象 <{@link Zondy.Feature.ShapeParameters.Line}>
+ * 面 - 参数对象 <{@link Zondy.Feature.ShapeParameters.Polygon}>
+ * 矩形 - 参数对象 <{@link Zondy.Feature.ShapeParameters.Rectangle}>
+ * 扇形 - 参数对象 <{@link Zondy.Feature.ShapeParameters.Sector}>
+ * 标签 - 参数对象 <{@link Zondy.Feature.ShapeParameters.Label}>
+ * 图片 - 参数对象 <{@link Zondy.Feature.ShapeParameters.Image}>
+ * 用于符号专题图：
+ * 圆形 - 参数对象：<{@link Zondy.Feature.ShapeParameters.Cilcle}> + */ +class ShapeFactory { + + + /** + * @function Zondy.Feature.ShapeFactory.prototype.constructor + * @description 构建图形工厂对象。 + * @param {Object} shapeParameters - 图形参数对象，<{@link Zondy.Feature.ShapeParameters}> 子类对象，可选参数。 + * @returns {Zondy.Feature.ShapeFactory} 返回图形工厂类对象。 + */ + constructor(shapeParameters) { + /** + * @member {Object} Zondy.Feature.ShapeParameters.prototype.shapeParameters + * @description 图形参数对象，<{@link Zondy.Feature.ShapeParameters}> 子类对象。必设参数，默认值 null。 + */ + this.shapeParameters = shapeParameters; + + this.CLASS_NAME = "Zondy.Feature.ShapeFactory"; + } + + + /** + * @function Zondy.Feature.ShapeParameters.prototype.destroy + * @description 销毁图形工厂类对象。 + */ + destroy() { + this.shapeParameters = null; + } + + + /** + * @function Zondy.Feature.ShapeParameters.prototype.createShape + * @description 创建一个图形。具体图形由 shapeParameters 决定。 + * @param {Object} shapeParameters - 图形参数对象，<{@link Zondy.Feature.ShapeParameters}> 子类对象。 + * 此参数可选，如果使用此参数（不为 null），shapeParameters 属性值将被修改为参数的值，然后再使用 shapeParameters 属性值创建图形； + * 如果不使用此参数，createShape 方法将直接使用 shapeParameters 属性创建图形。 + * @returns {Object} 图形对象（或 null - 图形创建失败）。 + */ + createShape(shapeParameters) { + if (shapeParameters) { + this.shapeParameters = shapeParameters; + } + + if (!this.shapeParameters) { + return null; + } + + var sps = this.shapeParameters; + + + if (sps instanceof Point) { // 点 + //设置style + let style = new Object(); + style["x"] = sps.x; + style["y"] = sps.y; + style["r"] = sps.r; + + style = copyAttributesWithClip(style, sps.style, ['x', 'y']); + + //创建图形 + let shape = new SmicPoint(); + shape.style = ShapeFactory.transformStyle(style); + shape.highlightStyle = ShapeFactory.transformStyle(sps.highlightStyle); + copyAttributesWithClip(shape, sps, ['x', 'y', 'style', 'highlightStyle']); + + return shape; + } else if (sps instanceof FeatureLine) { // 线 + //检查参数 pointList 是否存在 + if (!sps.pointList) { + return null; + } + + // 设置style + let style = new Object(); + style["pointList"] = sps.pointList; + style = copyAttributesWithClip(style, sps.style, ['pointList']); + + // 创建图形 + let shape = new SmicBrokenLine(); + shape.style = ShapeFactory.transformStyle(style); + shape.highlightStyle = ShapeFactory.transformStyle(sps.highlightStyle); + copyAttributesWithClip(shape, sps, ['pointList', 'style', 'highlightStyle']); + + return shape; + } else if (sps instanceof FeaturePolygon) { // 面 + //检查参数 pointList 是否存在 + if (!sps.pointList) { + return null; + } + + //设置style + let style = new Object(); + style["pointList"] = sps.pointList; + style = copyAttributesWithClip(style, sps.style, ['pointList']); + + //创建图形 + let shape = new SmicPolygon(); + shape.style = ShapeFactory.transformStyle(style); + shape.highlightStyle = ShapeFactory.transformStyle(sps.highlightStyle); + copyAttributesWithClip(shape, sps, ['pointList', 'style', "highlightStyle"]); + + return shape; + } else if (sps instanceof FeatureRectangle) { // 矩形 + //检查参数 pointList 是否存在 + if (!sps.x && !sps.y & !sps.width & !sps.height) { + return null; + } + + //设置style + let style = new Object(); + style["x"] = sps.x; + style["y"] = sps.y; + style["width"] = sps.width; + style["height"] = sps.height; + + style = copyAttributesWithClip(style, sps.style, ['x', 'y', 'width', 'height']); + + //创建图形 + let shape = new SmicRectangle(); + shape.style = ShapeFactory.transformStyle(style); + shape.highlightStyle = ShapeFactory.transformStyle(sps.highlightStyle); + copyAttributesWithClip(shape, sps, ['x', 'y', 'width', 'height', 'style', 'highlightStyle']); + + return shape; + } else if (sps instanceof Sector) { // 扇形 + //设置style + let style = new Object(); + style["x"] = sps.x; + style["y"] = sps.y; + style["r"] = sps.r; + style["startAngle"] = sps.startAngle; + style["endAngle"] = sps.endAngle; + if (sps["r0"]) { + style["r0"] = sps.r0 + } + + if (sps["clockWise"]) { + style["clockWise"] = sps.clockWise + } + + + style = copyAttributesWithClip(style, sps.style, ['x', 'y', 'r', 'startAngle', 'endAngle', 'r0', 'endAngle']); + + //创建图形 + let shape = new SmicSector(); + shape.style = ShapeFactory.transformStyle(style); + shape.highlightStyle = ShapeFactory.transformStyle(sps.highlightStyle); + copyAttributesWithClip(shape, sps, ['x', 'y', 'r', 'startAngle', 'endAngle', 'r0', 'endAngle', 'style', 'highlightStyle']); + + return shape; + } else if (sps instanceof Label) { // 标签 + //设置style + let style = new Object(); + style["x"] = sps.x; + style["y"] = sps.y; + style["text"] = sps.text; + + style = copyAttributesWithClip(style, sps.style, ['x', 'y', 'text']); + + //创建图形 + let shape = new SmicText(); + shape.style = ShapeFactory.transformStyle(style); + shape.highlightStyle = ShapeFactory.transformStyle(sps.highlightStyle); + copyAttributesWithClip(shape, sps, ['x', 'y', 'text', 'style', 'highlightStyle']); + + return shape; + } else if (sps instanceof Image) { // 图片 + //设置style + let style = new Object(); + style["x"] = sps.x; + style["y"] = sps.y; + if (sps["image"]) { + style["image"] = sps.image; + } + if (sps["width"]) { + style["width"] = sps.width; + } + if (sps["height"]) { + style["height"] = sps.height; + } + if (sps["sx"]) { + style["sx"] = sps.sx; + } + if (sps["sy"]) { + style["sy"] = sps.sy; + } + if (sps["sWidth"]) { + style["sWidth"] = sps.sWidth + } + if (sps["sHeight"]) { + style["sHeight"] = sps.sHeight + } + + style = copyAttributesWithClip(style, sps.style, ['x', 'y', 'image', 'width', 'height', 'sx', 'sy', 'sWidth', 'sHeight']); + + //创建图形 + let shape = new SmicImage(); + shape.style = ShapeFactory.transformStyle(style); + shape.highlightStyle = ShapeFactory.transformStyle(sps.highlightStyle); + copyAttributesWithClip(shape, sps, ['x', 'y', 'image', 'width', 'height', 'style', 'highlightStyle']); + + return shape; + } else if (sps instanceof FeatureCircle) { //圆形 用于符号专题图 + //设置stytle + let style = new Object(); + style["x"] = sps.x; + style["r"] = sps.r; + style["y"] = sps.y; + + style = copyAttributesWithClip(style, sps.style, ['x', 'y', 'r']); + + //创建图形 + let shape = new SmicCircle(); + shape.style = new ShapeFactory.transformStyle(style); + shape.highlightStyle = new ShapeFactory.transformStyle(sps.highlightStyle); + copyAttributesWithClip(shape, sps, ['x', 'y', 'r', 'style', 'highlightStyle', 'lineWidth', 'text', 'textPosition']); + + return shape; + } + + return null + } + + + /** + * @function Zondy.Feature.ShapeParameters.prototype.transformStyle + * @description 将用户 feature.style (类 Svg style 标准) 的样式，转换为 levelRenderer 的样式标准（类 CSS-Canvas 样式） + * @param {Object} style - 用户 style。 + * @returns {Object} 符合 levelRenderer 的 style。 + */ + static transformStyle(style) { + var newStyle = {}; + + //字体 ["font-style", "font-variant", "font-weight", "font-size / line-height", "font-family"]; + var fontStr = ["normal", "normal", "normal", "12", "arial,sans-serif"]; + + //画笔类型 ["fill", "stroke"]; + var brushType = [true, false]; + + for (var ss in style) { + switch (ss) { + case "fill": + brushType[0] = style[ss]; + break; + case "fillColor": + newStyle["color"] = style[ss]; + break; + case "stroke": + brushType[1] = style[ss]; + break; + case "strokeWidth": + newStyle["lineWidth"] = style[ss]; + break; + case "strokeLinecap": + newStyle["lineCap"] = style[ss]; + break; + case "strokeLineJoin": + newStyle["lineJoin"] = style[ss]; + break; + case "strokeDashstyle": + newStyle["lineType"] = style[ss]; + break; + case "pointRadius": + newStyle["r"] = style[ss]; + break; + case "label": + newStyle["text"] = style[ss]; + break; + case "labelRect": + newStyle["labelRect"] = style[ss]; + break; + case "fontColor": + newStyle["textColor"] = style[ss]; + break; + case "fontStyle": + fontStr[0] = style[ss]; + break; + case "fontVariant": + fontStr[1] = style[ss]; + break; + case "fontWeight": + fontStr[2] = style[ss]; + break; + case "fontSize": + var unit = ""; + if (style[ss] && style[ss].toString().indexOf("px") < 0) { + unit = "px"; + } + fontStr[3] = style[ss] + unit; + break; + case "fontFamily": + fontStr[4] = style[ss]; + break; + case "fontOpacity": + newStyle["opacity"] = style[ss]; + break; + case "labelPosition": + newStyle["textPosition"] = style[ss]; + break; + case "labelAlign": + newStyle["textAlign"] = style[ss]; + break; + case "labelBaseline": + newStyle["textBaseline"] = style[ss]; + break; + case "labelRotation": + newStyle["textRotation"] = style[ss]; + break; + + default: + newStyle[ss] = style[ss]; + break; + } + } + + //拼接字体字符串 + newStyle["textFont"] = fontStr.join(" "); + + //画笔类型 + if (brushType[0] === true && brushType[1] === false) { + newStyle["brushType"] = "fill"; + } else if (brushType[0] === false && brushType[1] === true) { + newStyle["brushType"] = "stroke"; + } else if (brushType[0] === true && brushType[1] === true) { + newStyle["brushType"] = "both"; + } else { + newStyle["brushType"] = "fill"; + } + + //默认线宽 1 + if (newStyle["lineWidth"] == null) { + newStyle["lineWidth"] = 1; + } + + return newStyle; + } + + /** + * @function Zondy.Feature.ShapeParameters.prototype.Background + * @description 创建一个矩形背景框图形对象。 + * @param {Zondy.Feature.ShapeFactory} shapeFactory - 图形工厂对象，必设参数。 + * @param {Array.} box - 框区域，长度为 4 的一维数组，像素坐标，[left, bottom, right, top]，必设参数。 + * @param {Object} setting - 图表配置参数，必设参数。本函数中图形配置对象 setting 可设属性： + * @param {Object} setting.backgroundStyle - 背景样式，此样式对象对象可设属性：。 + * @param {Array} [setting.backgroundRadius=[0,0,0,0]] - 背景框矩形圆角半径，可以用数组分别指定四个角的圆角半径，设：左上、右上、右下、左下角的半径依次为 r1、r2、r3、r4，则 backgroundRadius 为 [r1、r2、r3、r4 ]。 + * @returns {Object} 背景框图形，一个可视化图形（矩形）对象。 + */ + static Background(shapeFactory, box, setting) { + var sets = setting ? setting : {}; + + // 背景框图形参数对象 + var bgSP = new FeatureRectangle(box[0], box[3], Math.abs(box[2] - box[0]), Math.abs(box[3] - box[1])); + + // 默认样式 + bgSP.style = { + fillColor: "#f3f3f3" + }; + + // 设置用户 style + if (sets.backgroundStyle) { + copyAttributesWithClip(bgSP.style, sets.backgroundStyle); + } + + // 设置背景框圆角参数 + if (sets.backgroundRadius) { + bgSP.style["radius"] = sets.backgroundRadius; + } + + // 禁止背景框响应事件 + bgSP.clickable = false; + bgSP.hoverable = false; + + return shapeFactory.createShape(bgSP); + } + + /** + * @function Zondy.Feature.ShapeParameters.prototype.GraphAxis + * @description 创建一个统计图表坐标轴图形对象组。 + * @param {Zondy.Feature.ShapeFactory} shapeFactory - 图形工厂对象，必设参数。 + * @param {Array.} dataViewBox - 统计图表模型的数据视图框，长度为 4 的一维数组，像素坐标，[left, bottom, right, top]，必设参数。 + * @param {Object} setting - 图表配置参数，必设参数。 + * @param {Object} setting.axisStyle - 坐标轴样式，此样式对象对象可设属性：。 + * @param {boolean} [setting.axisUseArrow=false] - 坐标轴是否使用箭头。 + * @param {number} [setting.axisYTick=0] - y 轴刻度数量，0表示不使用箭头。 + * @param {Array.} setting.axisYLabels - y 轴上的标签组内容，标签顺序沿着数据视图框左面条边自上而下，等距排布。例如：["1000", "750", "500", "250", "0"]。 + * @param {Object} setting.axisYLabelsStyle - y 轴上的标签组样式，此样式对象对象可设属性：。 + * @param {Array.} [setting.axisYLabelsOffset=[0,0]] - y 轴上的标签组偏移量。长度为 2 的数组，数组第一项表示 y 轴标签组横向上的偏移量，向左为正，默认值：0；数组第二项表示 y 轴标签组纵向上的偏移量，向下为正，默认值：0。 + * @param {Array.} setting.axisXLabels - x 轴上的标签组内容，标签顺序沿着数据视图框下面条边自左向右排布，例如：["92年", "95年", "99年"]。 + * 标签排布规则：当标签数量与 xShapeInfo 中的属性 xPositions 数量相同（即标签个数与数据个数相等时）, 按照 xPositions 提供的位置在水平方向上排布标签，否则沿数据视图框下面条边等距排布标签。 + * @param {Object} setting.axisXLabelsStyle - x 轴上的标签组样式，此样式对象对象可设属性：。 + * @param {Array.} [setting.axisXLabelsOffset=[0,0]] - x 轴上的标签组偏移量。长度为 2 的数组，数组第一项表示 x 轴标签组横向上的偏移量，向左为正，默认值：0；数组第二项表示 x 轴标签组纵向上的偏移量，向下为正，默认值：0。 + * @param {boolean} setting.useXReferenceLine - 是否使用水平参考线，如果为 true，在 axisYTick 大于 0 时有效，水平参考线是 y 轴刻度在数据视图框里的延伸。 + * @param {Object} setting.xReferenceLineStyle - 水平参考线样式，此样式对象对象可设属性：。 + * @param {number} [setting.axis3DParameter=0] - 3D 坐标轴参数，此属性值在大于等于 15 时有效。 + * @param {Object} xShapeInfo - X 方向上的图形信息对象，包含两个属性。 + * @param {Array.} xShapeInfo.xPositions - 图形在 x 轴方向上的像素坐标值，是一个一维数组，如果图形在 x 方向上有一定宽度，通常取图形在 x 方向上的中心点为图形在 x 方向上的坐标值。 + * @param {number} xShapeInfo.width - 图形的宽度（特别注意：点的宽度始终为 0，而不是其直径）。 + * @returns {Array.} 统计图表坐标轴图形对象数组。 + */ + static GraphAxis(shapeFactory, dataViewBox, setting, xShapeInfo) { + var dvb = dataViewBox; + var sets = setting ? setting : {}; + + // 参考线图形对象组 + var refLines = []; + //坐标轴箭头对象组 + var arrows = []; + // 是否使用参水平考线，默认不使用 + var isAddRefLine = sets.useXReferenceLine ? sets.useXReferenceLine : false; + // y 轴上的刻度 + var axisytick = (sets.axisYTick && !isNaN(sets.axisYTick)) ? sets.axisYTick : 0; + // 坐标轴节点数组 + var pois = []; + //z 轴箭头数组 + var zArrowPois = []; + // x,y 轴主干节点数组 + var xMainPois = []; + if (axisytick === 0) { + xMainPois.push([dvb[0], dvb[3] - 5]); + xMainPois.push([dvb[0], dvb[1]]); + + // 3D 坐标轴 第三象限平分线 + if (sets.axis3DParameter && !isNaN(sets.axis3DParameter) && sets.axis3DParameter >= 15) { + let axis3DParameter = parseInt(sets.axis3DParameter); + let axis3DPoi = [dvb[0] - axis3DParameter, dvb[1] + axis3DParameter]; + + // 添加 3D 轴节点 + if (sets.axisUseArrow) { // 添加 3D 轴箭头节点坐标 + //箭头坐标 + zArrowPois.push([axis3DPoi[0] + 1.5, axis3DPoi[1] - 7.5]); + zArrowPois.push([axis3DPoi[0] - 1, axis3DPoi[1] + 1]); + zArrowPois.push([axis3DPoi[0] + 7.5, axis3DPoi[1] - 1.5]); + //3D轴 + xMainPois.push([axis3DPoi[0], axis3DPoi[1]]); + } else { + xMainPois.push([axis3DPoi[0], axis3DPoi[1]]); + } + + xMainPois.push([dvb[0], dvb[1]]); + } + xMainPois.push([dvb[2] + 5, dvb[1]]); + } else { + // 单位刻度长度 + var unitTick = Math.abs(dvb[1] - dvb[3]) / axisytick; + // 刻度 y 坐标 + var thckY = dvb[3]; + + xMainPois.push([dvb[0], thckY - 5]); + + for (var i = 0; i < axisytick; i++) { + xMainPois.push([dvb[0], thckY]); + xMainPois.push([dvb[0] - 5, thckY]); + xMainPois.push([dvb[0], thckY]); + + // 参考线 + if (isAddRefLine) { + // 参考线参数对象 + var refLineSP = new FeatureLine([ + [dvb[0], thckY], + [dvb[2], thckY] + ]); + // 参考线默认样式对象 + refLineSP.style = { + strokeColor: "#cfcfcf", + strokeLinecap: "butt", + strokeLineJoin: "round", + strokeWidth: 1 + }; + // 禁止事件 + refLineSP.clickable = false; + refLineSP.hoverable = false; + // 用户style + if (sets.xReferenceLineStyle) { + copyAttributesWithClip(refLineSP.style, sets.xReferenceLineStyle); + } + // 生成参考线图形对象 + refLines.push(shapeFactory.createShape(refLineSP)) + } + + // y 刻度增量 + thckY += unitTick; + } + + xMainPois.push([dvb[0], dvb[1]]); + + // 3D 坐标轴 第三象限平分线 + if (sets.axis3DParameter && !isNaN(sets.axis3DParameter) && sets.axis3DParameter >= 15) { + let axis3DParameter = parseInt(sets.axis3DParameter); + let axis3DPoi = [dvb[0] - axis3DParameter, dvb[1] + axis3DParameter]; + + // 添加 3D 轴节点 + if (sets.axisUseArrow) { // 添加 3D 轴和箭头坐标 + //箭头坐标 + zArrowPois.push([axis3DPoi[0] + 1.5, axis3DPoi[1] - 7.5]); + zArrowPois.push([axis3DPoi[0] - 1, axis3DPoi[1] + 1]); + zArrowPois.push([axis3DPoi[0] + 7.5, axis3DPoi[1] - 1.5]); + //3D轴 + xMainPois.push([axis3DPoi[0], axis3DPoi[1]]); + } else { + xMainPois.push([axis3DPoi[0], axis3DPoi[1]]); + } + + xMainPois.push([dvb[0], dvb[1]]); + } + + xMainPois.push([dvb[2] + 5, dvb[1]]); + } + // 坐标轴箭头 + if (sets.axisUseArrow) { + // x 轴箭头节点数组 + var xArrowPois = [ + [dvb[2] + 5, dvb[1] + 4], + [dvb[2] + 13, dvb[1]], + [dvb[2] + 5, dvb[1] - 4] + ]; + + // y 轴箭头节点数组 + var yArrowPois = [ + [dvb[0] - 4, dvb[3] - 5], + [dvb[0], dvb[3] - 13], + [dvb[0] + 4, dvb[3] - 5] + ]; + + //x轴箭头 + var xSP = new FeaturePolygon(xArrowPois); + xSP.style = {fillColor: "#008acd"}; + copyAttributesWithClip(xSP.style, sets.axisStyle); + arrows.push(shapeFactory.createShape(xSP)); + + //y轴箭头 + var ySP = new FeaturePolygon(yArrowPois); + ySP.style = {fillColor: "#008acd"}; + copyAttributesWithClip(ySP.style, sets.axisStyle); + arrows.push(shapeFactory.createShape(ySP)); + + // z轴箭头 坐标轴箭头是否要使用 + if (sets.axis3DParameter && !isNaN(sets.axis3DParameter) && sets.axis3DParameter >= 15) { + var zSP = new FeaturePolygon(zArrowPois); + zSP.style = {fillColor: "#008acd"}; + copyAttributesWithClip(zSP.style, sets.axisStyle); + arrows.push(shapeFactory.createShape(zSP)); + } + + } + //不带箭头的坐标轴 + pois = xMainPois; + + // 坐标轴参数对象 + var axisSP = new FeatureLine(pois); + // 坐标轴默认style + axisSP.style = { + strokeLinecap: "butt", + strokeLineJoin: "round", + strokeColor: "#008acd", + strokeWidth: 1 + }; + // 用户 style + if (sets.axisStyle) { + copyAttributesWithClip(axisSP.style, sets.axisStyle); + } + // 禁止事件 + axisSP.clickable = false; + axisSP.hoverable = false; + // 创建坐标轴图形对象 + var axisMain = [shapeFactory.createShape(axisSP)]; + + // Y 轴标签 + var yLabels = []; + if (sets.axisYLabels && sets.axisYLabels.length && sets.axisYLabels.length > 0) { + var axisYLabels = sets.axisYLabels; + let len = axisYLabels.length; + + // 标签偏移量 + var ylOffset = [0, 0]; + if (sets.axisYLabelsOffset && sets.axisYLabelsOffset.length) { + ylOffset = sets.axisYLabelsOffset; + } + + if (len === 1) { + // 标签参数对象 + let labelYSP = new Label(dvb[0] - 5 + ylOffset[0], dvb[3] + ylOffset[1], axisYLabels[0]); + labelYSP.style = { + labelAlign: "right" + }; + // 用户 style + if (sets.axisYLabelsStyle) { + copyAttributesWithClip(labelYSP.style, sets.axisYLabelsStyle); + } + // 禁止事件 + labelYSP.clickable = false; + labelYSP.hoverable = false; + // 制作标签 + yLabels.push(shapeFactory.createShape(labelYSP)); + } else { + var labelY = dvb[3]; + // y 轴标签单位距离 + var yUnit = Math.abs(dvb[1] - dvb[3]) / (len - 1); + + for (var j = 0; j < len; j++) { + // 标签参数对象 + let labelYSP = new Label(dvb[0] - 5 + ylOffset[0], labelY + ylOffset[1], axisYLabels[j]); + labelYSP.style = { + labelAlign: "right" + }; + // 用户 style + if (sets.axisYLabelsStyle) { + copyAttributesWithClip(labelYSP.style, sets.axisYLabelsStyle); + } + // 禁止事件 + labelYSP.clickable = false; + labelYSP.hoverable = false; + // 制作标签 + yLabels.push(shapeFactory.createShape(labelYSP)); + // y 轴标签 y 方向增量 + labelY += yUnit; + } + } + } + + // X 轴标签 + var xLabels = []; + if (sets.axisXLabels && sets.axisXLabels.length && sets.axisXLabels.length > 0) { + let axisXLabels = sets.axisXLabels; + let len = axisXLabels.length; + + // 标签偏移量 + let xlOffset = [0, 0]; + if (sets.axisXLabelsOffset && sets.axisXLabelsOffset.length) { + xlOffset = sets.axisXLabelsOffset; + } + + // 标签个数与数据字段个数相等等时，标签在 x 轴均匀排列 + if (xShapeInfo && xShapeInfo.xPositions && xShapeInfo.xPositions.length && xShapeInfo.xPositions.length === len) { + let xsCenter = xShapeInfo.xPositions; + for (let K = 0; K < len; K++) { + // 标签参数对象 + let labelXSP = new Label(xsCenter[K] + xlOffset[0], dvb[1] + xlOffset[1], axisXLabels[K]); + // 默认 style + labelXSP.style = { + labelAlign: "center", + labelBaseline: "top" + }; + // 用户 style + if (sets.axisXLabelsStyle) { + copyAttributesWithClip(labelXSP.style, sets.axisXLabelsStyle); + } + // 禁止事件 + labelXSP.clickable = false; + labelXSP.hoverable = false; + // 创建标签对象 + xLabels.push(shapeFactory.createShape(labelXSP)); + } + } else { + if (len === 1) { + // 标签参数对象 + let labelXSP = new Label(dvb[0] - 5 + xlOffset[0], dvb[1] + xlOffset[0], axisXLabels[0]); + // 默认 style + labelXSP.style = { + labelAlign: "center", + labelBaseline: "top" + }; + // 用户 style + if (sets.axisXLabelsStyle) { + copyAttributesWithClip(labelXSP.style, sets.axisXLabelsStyle); + } + // 禁止事件 + labelXSP.clickable = false; + labelXSP.hoverable = false; + // 创建标签对象 + xLabels.push(shapeFactory.createShape(labelXSP)); + } else { + let labelX = dvb[0]; + // x 轴标签单位距离 + let xUnit = Math.abs(dvb[2] - dvb[0]) / (len - 1); + + for (let m = 0; m < len; m++) { + // 标签参数对象 + let labelXSP = new Label(labelX + xlOffset[0], dvb[1] + xlOffset[1], axisXLabels[m]); + // 默认 style + labelXSP.style = { + labelAlign: "center", + labelBaseline: "top" + }; + // 用户 style + if (sets.axisXLabelsStyle) { + copyAttributesWithClip(labelXSP.style, sets.axisXLabelsStyle); + } + // 禁止事件 + labelXSP.clickable = false; + labelXSP.hoverable = false; + // 创建标签对象 + xLabels.push(shapeFactory.createShape(labelXSP)); + // x 轴标签 x 方向增量 + labelX += xUnit; + } + } + } + } + + // 组装并返回构成坐标轴的图形 + return ((refLines.concat(axisMain)).concat(yLabels)).concat(xLabels).concat(arrows); + } + + /** + * @function Zondy.Feature.ShapeParameters.prototype.ShapeStyleTool + * @description 一个图形 style 处理工具。此工具将指定的默认 style，通用 style，按 styleGroup 取得的 style 和按数据值 value 范围取得的 style 进行合并，得到图形最终的 style。 + * @param {Object} defaultStyle - 默认style，此样式对象可设属性根据图形类型参考 <{@link Zondy.Feature.ShapeParameters}> 子类对象的 style 属性。 + * @param {Object} style - 图形对象基础 style，此参数控制图形的基础样式，可设属性根据图形类型参考 <{@link Zondy.Feature.ShapeParameters}> 子类对象的 style 属性。优先级低于 styleGroup，styleByCodomain。 + * @param {Array.} styleGroup - 一个 style 数组，优先级低于 styleByCodomain，高于 style。此数组每个元素是样式对象， + * 其可设属性根据图形类型参考 <{@link Zondy.Feature.ShapeParameters}> 子类对象的 style 属性。通过 index 参数从 styleGroup 中取 style。 + * @param {Array.} styleByCodomain - 按数据（参数 value）所在值域范围控制数据的可视化对象样式。 + * (start code) + * // styleByCodomain 的每个元素是个包含值域信息和与值域对应样式信息的对象，该对象（必须）有三个属性： + * // start: 值域值下限（包含）; + * // end: 值域值上限（不包含）; + * // style: 数据可视化图形的 style，其可设属性根据图形类型参考 子类对象的 style 属性。。 + * // dataStyleByCodomain 数组形如： + * [ + * { + * start:0, + * end:250, + * style:{ + * fillColor:"#00CD00" + * } + * }, + * { + * start:250, + * end:500, + * style:{ + * fillColor:"#00EE00" + * } + * }, + * { + * start:500, + * end:750, + * style:{ + * fillColor:"#00FF7F" + * } + * }, + * { + * start:750, + * end:1500, + * style:{ + * fillColor:"#00FF00" + * } + * } + * ] + * (end) + * @param {number} index - styleGroup 的索引值，用于取出 styleGroup 指定的 style。 + * @param {number} value - 数据值，用于取出 styleByCodomain 指定的 style。 + * @returns {Object} 合并后的样式 （style） 对象。 + */ + static ShapeStyleTool(defaultStyle, style, styleGroup, styleByCodomain, index, value) { + // 用 defaultStyle 初始化 style 对象 + var finalStyle = defaultStyle ? defaultStyle : {}; + + // 基础 style + if (style) { + copyAttributesWithClip(finalStyle, style); + } + + // 按索引赋 style + if (styleGroup && styleGroup.length && typeof (index) !== "undefined" && !isNaN(index) && index >= 0) { + if (styleGroup[index]) { + copyAttributesWithClip(finalStyle, styleGroup[index]); + } + } + + // 按值域赋 style + if (styleByCodomain && styleByCodomain.length && typeof (value) !== "undefined") { + var dsc = styleByCodomain; + var dscLen = dsc.length; + var v = parseFloat(value); + for (var i = 0; i < dscLen; i++) { + if (dsc[i].start <= v && v < dsc[i].end) { + copyAttributesWithClip(finalStyle, dsc[i].style); + break; + } + } + } + + return finalStyle; + } +} + +export {ShapeFactory}; +Zondy.Feature.ShapeFactory = ShapeFactory; \ No newline at end of file diff --git a/src/mapboxgl/theme/common/overlay/feature/ShapeParameters.js b/src/mapboxgl/theme/common/overlay/feature/ShapeParameters.js new file mode 100644 index 000000000..1a1eee6e4 --- /dev/null +++ b/src/mapboxgl/theme/common/overlay/feature/ShapeParameters.js @@ -0,0 +1,100 @@ +import { Common } from '@mapgis/webclient-es6-service'; +const { Zondy } = Common; + +/** + * @private + * @class Zondy.Feature.ShapeParameters + * @classdesc 图形参数基类，此类不可实例化 + */ +class ShapeParameters { + /** + * @function Zondy.Feature.ShapeParameters.prototype.constructor + * @description 图形参数对象。 + * @returns {Zondy.Feature.ShapeParameters} 图形参数对象。 + */ + constructor() { + /** + * @member {Array} [Zondy.Feature.ShapeParameters.prototype.refOriginalPosition=[0,0]] + * @description 图形参考原点位置，图形的参考中心位置。 + * refOriginalPosition 是长度为 2 的数组，第一个元素表示 x 坐标，第二个元素表示 y 坐标。 + * refOriginalPosition 表示图形的参考中心，通常情况下，图形是使用 canvas 的原点位置作为位置参考， + * 但 refOriginalPosition 可以改变图形的参考位置，例如： refOriginalPosition = [80, 80], + * 图形圆的 style.x = 20, style.y = 20，那么圆在 canvas 中的实际位置是 [100, 100]。 + * 图形（Shape） 的所有位置相关属性都是以 refOriginalPosition 为参考中心， + * 也就是说图形的所有位置信息在 canvas 中都是以 refOriginalPosition 为参考的相对位置，只有 + * refOriginalPosition 的值为 [0, 0] 时，图形的位置信息才是 canvas 绝对位置。 + * 图形的位置信息通常有：style.pointList，style.x，style.y。 + */ + this.refOriginalPosition = [0, 0]; + + /** + * @member {string} Zondy.Feature.ShapeParameters.prototype.refDataID + * @description 图形所关联数据的 ID（<{@link Zondy.Feature.Vector}> 的 id）。 + */ + this.refDataID = null; + + /** + * @member {boolean} Zondy.Feature.ShapeParameters.prototype.isHoverByRefDataID + * @description 是否根据 refDataID 进行高亮。用于同时高亮所有 refDataID 相同的图形。 + */ + this.isHoverByRefDataID = false; + + /** + * @member {string} Zondy.Feature.ShapeParameters.prototype.refDataHoverGroup + * @description 高亮图形组的组名。此属性在 refDataID 有效且 isHoverByRefDataID 为 true 时生效。 + * 一旦设置此属性，且属性值有效，只有关联同一个数据的图形且此属性相同的图形才会高亮。 + */ + this.refDataHoverGroup = null; + + /** + * @member {Object} Zondy.Feature.ShapeParameters.prototype.dataInfo + * @description 图形携带的附加数据。 + */ + this.dataInfo = null; + + /** + * @member {boolean} Zondy.Feature.ShapeParameters.prototype.clickable + * @description 是否可点击。 + */ + this.clickable = true; + + /** + * @member {boolean} Zondy.Feature.ShapeParameters.prototype.hoverable + * @description 是否可点击。 + */ + this.hoverable = true; + + /** + * @member {Object} Zondy.Feature.ShapeParameters.prototype.style + * @description 图形样式对象，可设样式属性在子类中确定。 + */ + this.style = null; + + /** + * @member {Object} Zondy.Feature.ShapeParameters.prototype.highlightStyle + * @description 高亮样式对象，可设样式属性与 style 的可设样式属性相同。 + */ + this.highlightStyle = {}; + + this.CLASS_NAME = "Zondy.Feature.ShapeParameters"; + } + + /** + * @function Zondy.Feature.ShapeParameters.prototype.destroy + * @description 销毁对象。 + */ + destroy() { + this.refOriginalPosition = null; + this.refDataID = null; + this.isHoverByRefDataID = null; + this.refDataHoverGroup = null; + this.dataInfo = null; + this.clickable = null; + this.hoverable = null; + this.style = null; + this.highlightStyle = null; + } +} + +export {ShapeParameters}; +Zondy.Feature.ShapeParameters = ShapeParameters; \ No newline at end of file diff --git a/src/mapboxgl/theme/common/overlay/feature/Theme.js b/src/mapboxgl/theme/common/overlay/feature/Theme.js new file mode 100644 index 000000000..8804c038e --- /dev/null +++ b/src/mapboxgl/theme/common/overlay/feature/Theme.js @@ -0,0 +1,87 @@ +import { Common } from '@mapgis/webclient-es6-service'; + +const { newGuid, Zondy } = Common; + +/** + * @private + * @class Zondy.Theme + * @classdesc 专题要素基类，此类不可实例化。 + */ +class Theme { + + /** + * @function Zondy.Theme.prototype.constructor + * @description 构造函数。 + * @param {Object} data - 用户数据，用于生成可视化 shape，必设参数。 + * @param {Zondy.Layer.Theme} layer - 此专题要素所在图层，必设参数。 + * @returns {Zondy.Theme} 返回一个专题要素。 + */ + constructor(data, layer) { + + if (!data) { + return; + } + // layer 必须已经添加到地图, 且已初始化渲染器 + if (!layer || !layer.map || !layer.renderer) { + return; + } + + /** + * @member {string} Zondy.Theme.prototype.id + * @description 专题要素唯一标识。 + */ + this.id = newGuid(); + + /** + * @member {Zondy.LonLat} Zondy.Theme.prototype.lonlat + * @description 专题要素地理参考位置。子类中必须根据用户数据（或地理位置参数）对其赋值。 + */ + this.lonlat = null; + + /** + * @member {Array} Zondy.Theme.prototype.location + * @description 专题要素像素参考位置。通常由地理参考位置决定。长度为 2 的数组，第一个元素表示 x 坐标，第二个元素表示 y 坐标。 + */ + this.location = []; + + /** + * @readonly + * @member {Object} Zondy.Theme.prototype.data + * @description 用户数据，用于生成可视化 shape，可在子类中规定数据格式或类型，如：。 + */ + this.data = data; + + /** + * @readonly + * @member {Array} Zondy.Theme.prototype.shapes + * @description 构成此专题要素的可视化图形对象数组，数组顺序控制渲染。 + */ + this.shapes = []; + + /** + * @readonly + * @member {Zondy.Layer.Theme} Zondy.Theme.prototype.layer + * @description 此专题要素所在专题图层。 + */ + this.layer = layer; + + this.CLASS_NAME = "Zondy.Feature.Theme"; + + } + + + /** + * @function Zondy.Theme.prototype.destroy + * @description 销毁专题要素。 + */ + destroy() { + this.data = null; + this.id = null; + this.lonlat = null; + this.location = null; + this.shapes = null; + this.layer = null; + } +} +export {Theme}; +Zondy.Theme = Theme; \ No newline at end of file diff --git a/src/mapboxgl/theme/common/overlay/feature/index.js b/src/mapboxgl/theme/common/overlay/feature/index.js new file mode 100644 index 000000000..76a56e560 --- /dev/null +++ b/src/mapboxgl/theme/common/overlay/feature/index.js @@ -0,0 +1,32 @@ +import {ShapeFactory} from './ShapeFactory'; +import {ShapeParameters} from './ShapeParameters'; +import {Circle as FeatureCircle} from './Circle'; +import {Image} from './Image'; +import {Label} from './Label'; +import {Line as FeatureLine} from './Line'; +import {Point} from './Point'; +import {Polygon as FeaturePolygon} from './Polygon'; +import {Rectangle as FeatureRectangle} from './Rectangle'; +import {Sector} from './Sector'; +import {Theme as FeatureTheme} from './Theme'; + +export {ShapeFactory} ; +export {ShapeParameters} ; +export {FeatureCircle} ; +export {Image}; +export {Label}; +export {FeatureLine}; +export {Point} ; +export {FeaturePolygon} ; +export {FeatureRectangle} ; +export {Sector} ; +export {FeatureTheme} ; + + + + + + + + + diff --git a/src/mapboxgl/theme/common/overlay/index.js b/src/mapboxgl/theme/common/overlay/index.js new file mode 100644 index 000000000..4de97e359 --- /dev/null +++ b/src/mapboxgl/theme/common/overlay/index.js @@ -0,0 +1,130 @@ +import {Bar} from "./Bar"; +import {Bar3D} from "./Bar3D"; +import {Circle as OverlayCircle} from "./Circle"; +import {Graph} from "./Graph"; +import {Line} from "./Line"; +import {Pie} from "./Pie"; +import {Point as OverlayPoint} from "./Point"; +import {RankSymbol} from "./RankSymbol"; +import {Ring} from "./Ring"; +import {ThemeVector} from "./ThemeVector"; +import { + ShapeFactory, + ShapeParameters, + FeatureCircle, + Image, + Label, + FeatureLine, + Point, + FeaturePolygon, + FeatureRectangle, + Sector, + FeatureTheme +} from './feature'; + +import { + LevelRenderer, + Render, + Animation, + Animator, + Area, + Clip, + Color, + ComputeBoundingBox, + Config, + LevelRendererCurve, + Easing, + Env, + LevelRendererEvent, + Eventful, + Group, + Handler, + Http, + Math, + Matrix, + Painter, + PaintLayer, + Shape, + SmicBrokenLine, + SmicCircle, + SmicEllipse, + SmicImage, + SmicIsogon, + SmicPoint, + SmicPolygon, + SmicRectangle, + SmicRing, + SmicSector, + SmicStar, + SmicText, + Storage, + Transformable, + Util, + LevelRendererVector, + SUtil +} from './levelRender'; + +export {Bar} ; +export {Bar3D} ; +export {OverlayCircle} ; +export {Graph} ; +export {Line} ; +export {Pie}; +export {OverlayPoint}; +export {RankSymbol}; +export {Ring} ; +export {ThemeVector}; +export { + ShapeFactory, + ShapeParameters, + FeatureCircle, + Image, + Label, + FeatureLine, + Point, + FeaturePolygon, + FeatureRectangle, + Sector, + FeatureTheme +}; +export { + LevelRenderer, + Render, + Animation, + Animator, + Area, + Clip, + Color, + ComputeBoundingBox, + Config, + LevelRendererCurve, + Easing, + Env, + LevelRendererEvent, + Eventful, + Group, + Handler, + Http, + Math, + Matrix, + Painter, + PaintLayer, + Shape, + SmicBrokenLine, + SmicCircle, + SmicEllipse, + SmicImage, + SmicIsogon, + SmicPoint, + SmicPolygon, + SmicRectangle, + SmicRing, + SmicSector, + SmicStar, + SmicText, + Storage, + Transformable, + Util, + LevelRendererVector, + SUtil +}; diff --git a/src/mapboxgl/theme/common/overlay/levelRender/Animation.js b/src/mapboxgl/theme/common/overlay/levelRender/Animation.js new file mode 100644 index 000000000..ac61cfcb5 --- /dev/null +++ b/src/mapboxgl/theme/common/overlay/levelRender/Animation.js @@ -0,0 +1,680 @@ +import { Common } from '@mapgis/webclient-es6-service'; +const { Zondy, extend } = Common; + +import {Util} from './Util'; +import {Eventful} from './Eventful'; +import {Clip} from './Clip'; +import {SUtil} from './SUtil'; + +/** + * @private + * @class Zondy.LevelRenderer.Animation + * @classdesc 动画主类, 调度和管理所有动画控制器 + * @extends {Zondy.LevelRenderer.Eventful} + */ +class Animation extends Eventful { + + /** + * @function Zondy.LevelRenderer.Animation.prototype.constructor + * @description 构造函数。 + * @param {Object} options - 动画参数。 + * @param {Object} options.onframe - onframe。 + * @param {Object} options.stage - stage。 + * (start code) + * var animation = new Zondy.LevelRenderer.Animation(); + * var obj = { + * x: 100, + * y: 100 + * }; + * animation.animate(node.position) + * .when(1000, { + * x: 500, + * y: 500 + * }) + * .when(2000, { + * x: 100, + * y: 100 + * }) + * .start('spline'); + * (end) + */ + constructor(options) { + super(options); + + options = options || {}; + /** + * @member {Object} Zondy.LevelRenderer.Animation.prototype.stage + * @description stage。 + */ + this.stage = {}; + + /** + * @member {Object} Zondy.LevelRenderer.Animation.prototype.onframe + * @description onframe。 + */ + this.onframe = function () { + }; + + /** + * @member {Array} Zondy.LevelRenderer.Animation.prototype._clips + * @description _clips。 + */ + this._clips = []; + + /** + * @member {boolean} Zondy.LevelRenderer.Animation.prototype._running + * @description _running。 + */ + this._running = false; + + /** + * @member {number} Zondy.LevelRenderer.Animation.prototype._time + * @description _time。 + */ + this._time = 0; + + extend(this, options); + + this.CLASS_NAME = "Zondy.LevelRenderer.Animation"; + + } + + /** + * @function Zondy.LevelRenderer.Animation.prototype.add + * @description 添加动画片段。 + * @param {Zondy.LevelRenderer.Animation.Clip} clip - 动画片段。 + */ + add(clip) { + this._clips.push(clip); + } + + /** + * @function Zondy.LevelRenderer.Animation.prototype.remove + * @description 删除动画片段。 + * @param {Zondy.LevelRenderer.Animation.Clip} clip - 动画片段。 + */ + remove(clip) { + var idx = new Util().indexOf(this._clips, clip); + if (idx >= 0) { + this._clips.splice(idx, 1); + } + } + + /** + * @function Zondy.LevelRenderer.Animation.prototype.update + * @description 更新动画片段。 + */ + _update() { + var time = new Date().getTime(); + var delta = time - this._time; + var clips = this._clips; + var len = clips.length; + + var deferredEvents = []; + var deferredClips = []; + for (let i = 0; i < len; i++) { + var clip = clips[i]; + var e = clip.step(time); + // Throw out the events need to be called after + // stage.update, like destroy + if (e) { + deferredEvents.push(e); + deferredClips.push(clip); + } + } + if (this.stage.update) { + this.stage.update(); + } + + // Remove the finished clip + for (let i = 0; i < len;) { + if (clips[i]._needsRemove) { + clips[i] = clips[len - 1]; + clips.pop(); + len--; + } else { + i++; + } + } + + len = deferredEvents.length; + for (let i = 0; i < len; i++) { + deferredClips[i].fire(deferredEvents[i]); + } + + this._time = time; + + this.onframe(delta); + + this.dispatch('frame', delta); + } + + /** + * @function Zondy.LevelRenderer.Animation.prototype.start + * @description 开始运行动画。 + */ + start() { + var requestAnimationFrame = window.requestAnimationFrame + || window.msRequestAnimationFrame + || window.mozRequestAnimationFrame + || window.webkitRequestAnimationFrame + || function (func) { + setTimeout(func, 16); + }; + + var self = this; + + this._running = true; + + function step() { + if (self._running) { + self._update(); + requestAnimationFrame(step); + } + } + + this._time = new Date().getTime(); + requestAnimationFrame(step); + } + + /** + * @function Zondy.LevelRenderer.Animation.prototype.stop + * @description 停止运行动画。 + */ + stop() { + this._running = false; + } + + /** + * @function Zondy.LevelRenderer.Animation.prototype.clear + * @description 清除所有动画片段。 + */ + clear() { + this._clips = []; + } + + /** + * @function Zondy.LevelRenderer.Animation.prototype.animate + * @description 对一个目标创建一个animator对象，可以指定目标中的属性使用动画。 + * @param {Object} target - 目标对象。 + * @param {Object} options - 动画参数选项。 + * @param {boolean} [options.loop=false] - 是否循环播放动画。 + * @param {function} [options.getter] - 如果指定getter函数，会通过getter函数取属性值。 + * @param {function} [options.setter] - 如果指定setter函数，会通过setter函数设置属性值。 + * @returns {Zondy.LevelRenderer.Animation.Animator} Animator。 + */ + animate(target, options) { + options = options || {}; + var deferred = new Animator( + target, + options.loop, + options.getter, + options.setter + ); + deferred.animation = this; + return deferred; + } + + static _interpolateNumber(p0, p1, percent) { + return (p1 - p0) * percent + p0; + } + + static _interpolateArray(p0, p1, percent, out, arrDim) { + var len = p0.length; + if (arrDim === 1) { + for (let i = 0; i < len; i++) { + out[i] = Animation._interpolateNumber(p0[i], p1[i], percent); + } + } else { + var len2 = p0[0].length; + for (let i = 0; i < len; i++) { + for (let j = 0; j < len2; j++) { + out[i][j] = Animation._interpolateNumber( + p0[i][j], p1[i][j], percent + ); + } + } + } + } + + static _isArrayLike(data) { + switch (typeof data) { + case 'undefined': + case 'string': + return false; + } + + return typeof data.length !== 'undefined'; + } + + static _catmullRomInterpolateArray(p0, p1, p2, p3, t, t2, t3, out, arrDim) { + var len = p0.length; + if (arrDim === 1) { + for (let i = 0; i < len; i++) { + out[i] = Animation._catmullRomInterpolate( + p0[i], p1[i], p2[i], p3[i], t, t2, t3 + ); + } + } else { + var len2 = p0[0].length; + for (let i = 0; i < len; i++) { + for (var j = 0; j < len2; j++) { + out[i][j] = Animation._catmullRomInterpolate( + p0[i][j], p1[i][j], p2[i][j], p3[i][j], + t, t2, t3 + ); + } + } + } + } + + static _catmullRomInterpolate(p0, p1, p2, p3, t, t2, t3) { + var v0 = (p2 - p0) * 0.5; + var v1 = (p3 - p1) * 0.5; + return (2 * (p1 - p2) + v0 + v1) * t3 + + (-3 * (p1 - p2) - 2 * v0 - v1) * t2 + + v0 * t + p1; + } + + static _cloneValue(value) { + var arraySlice = Array.prototype.slice; + + if (Animation._isArrayLike(value)) { + var len = value.length; + if (Animation._isArrayLike(value[0])) { + var ret = []; + for (var i = 0; i < len; i++) { + ret.push(arraySlice.call(value[i])); + } + return ret; + } else { + return arraySlice.call(value); + } + } else { + return value; + } + } + + static rgba2String(rgba) { + rgba[0] = Math.floor(rgba[0]); + rgba[1] = Math.floor(rgba[1]); + rgba[2] = Math.floor(rgba[2]); + + return 'rgba(' + rgba.join(',') + ')'; + } +} + +/** + * @class Zondy.LevelRenderer.Animation.Animator + */ +class Animator { + + /** + * @function Zondy.LevelRenderer.Animation.Animator.prototype.animate + * @description 构造函数 + * @param {Object} target - 目标对象。 + * @param {Object} options - 动画参数选项。 + * @param {boolean} [loop=false] - 是否循环播放动画。 + * @param {function} [getter] - 如果指定getter函数，会通过getter函数取属性值。 + * @param {function} [setter] - 如果指定setter函数，会通过setter函数设置属性值。 + */ + constructor(target, loop, getter, setter) { + /** + * @member {Object} Zondy.LevelRenderer.Animation.Animator.prototype._tracks + * @description _tracks。 + */ + this._tracks = {}; + + /** + * @member {Object} Zondy.LevelRenderer.Animation.Animator.prototype._target + * @description _target。 + */ + this._target = target; + + /** + * @member {boolean} Zondy.LevelRenderer.Animation.Animator.prototype._loop + * @description _loop。 + */ + this._loop = loop || false; + + /** + * @member {function} Zondy.LevelRenderer.Animation.Animator.prototype._getter + * @description _getter。 + */ + this._getter = getter || _defaultGetter; + + /** + * @member {function} Zondy.LevelRenderer.Animation.Animator.prototype._setter + * @description _setter。 + */ + this._setter = setter || _defaultSetter; + + /** + * @member {number} Zondy.LevelRenderer.Animation.Animator.prototype._clipCount + * @description _clipCount。 + */ + this._clipCount = 0; + + /** + * @member {number} Zondy.LevelRenderer.Animation.Animator.prototype._delay + * @description _delay。 + */ + this._delay = 0; + + /** + * @member {Array} Zondy.LevelRenderer.Animation.Animator.prototype._doneList + * @description _doneList。 + */ + this._doneList = []; + + /** + * @member {Array} Zondy.LevelRenderer.Animation.Animator.prototype._onframeList + * @description _onframeList。 + */ + this._onframeList = []; + + /** + * @member {Array} Zondy.LevelRenderer.Animation.Animator.prototype._clipList + * @description _clipList。 + */ + this._clipList = []; + this.CLASS_NAME = "Zondy.LevelRenderer.Animation.Animator"; + + //Function + function _defaultGetter(target, key) { + return target[key]; + } + + function _defaultSetter(target, key, value) { + target[key] = value; + } + } + + + /** + * @function Zondy.LevelRenderer.Animation.Animator.prototype.when + * @description 设置动画关键帧 + * @param {number} time - 关键帧时间，单位是ms + * @param {Object} props - 关键帧的属性值，key-value表示 + * @returns {Zondy.LevelRenderer.Animation.Animator} Animator + */ + when(time /* ms */, props) { + for (var propName in props) { + if (!this._tracks[propName]) { + this._tracks[propName] = []; + // If time is 0 + // Then props is given initialize value + // Else + // Initialize value from current prop value + if (time !== 0) { + this._tracks[propName].push({ + time: 0, + value: Animation._cloneValue( + this._getter(this._target, propName) + ) + }); + } + } + this._tracks[propName].push({ + time: parseInt(time, 10), + value: props[propName] + }); + } + return this; + } + + + /** + * @function Zondy.LevelRenderer.Animation.Animator.prototype.during + * @description 添加动画每一帧的回调函数 + * @param {RequestCallback} callback - 回调函数 + * @returns {Zondy.LevelRenderer.Animation.Animator} Animator + */ + during(callback) { + this._onframeList.push(callback); + return this; + } + + + /** + * @function Zondy.LevelRenderer.Animation.Animator.prototype.start + * @description 开始执行动画 + * @param {(string|function)} easing - 动画缓动函数。详见：<{@link Zondy.LevelRenderer.Animation.easing}>。 + * @returns {Zondy.LevelRenderer.Animation.Animator} Animator + */ + start(easing) { + var self = this; + var setter = this._setter; + var getter = this._getter; + var onFrameListLen = self._onframeList.length; + var useSpline = easing === 'spline'; + + var ondestroy = function () { + self._clipCount--; + if (self._clipCount === 0) { + // Clear all tracks + self._tracks = {}; + + var len = self._doneList.length; + for (var i = 0; i < len; i++) { + self._doneList[i].call(self); + } + } + }; + + var createTrackClip = function (keyframes, propName) { + var trackLen = keyframes.length; + if (!trackLen) { + return; + } + // Guess data type + var firstVal = keyframes[0].value; + var isValueArray = Animation._isArrayLike(firstVal); + var isValueColor = false; + + // For vertices morphing + var arrDim = ( + isValueArray + && Animation._isArrayLike(firstVal[0]) + ) + ? 2 : 1; + // Sort keyframe as ascending + keyframes.sort(function (a, b) { + return a.time - b.time; + }); + var trackMaxTime = keyframes[trackLen - 1].time; + // Percents of each keyframe + var kfPercents = []; + // Value of each keyframe + var kfValues = []; + for (let i = 0; i < trackLen; i++) { + kfPercents.push(keyframes[i].time / trackMaxTime); + // Assume value is a color when it is a string + var value = keyframes[i].value; + if (typeof (value) == 'string') { + value = SUtil.Util_color.toArray(value); + if (value.length === 0) { // Invalid color + value[0] = value[1] = value[2] = 0; + value[3] = 1; + } + isValueColor = true; + } + kfValues.push(value); + } + + // Cache the key of last frame to speed up when + // animation playback is sequency + var cacheKey = 0; + var cachePercent = 0; + var start; + var i; + var w; + var p0; + var p1; + var p2; + var p3; + + + if (isValueColor) { + var rgba = [0, 0, 0, 0]; + } + + var onframe = function (target, percent) { + // Find the range keyframes + // kf1-----kf2---------current--------kf3 + // find kf2 and kf3 and do interpolation + if (percent < cachePercent) { + // Start from next key + start = Math.min(cacheKey + 1, trackLen - 1); + for (i = start; i >= 0; i--) { + if (kfPercents[i] <= percent) { + break; + } + } + i = Math.min(i, trackLen - 2); + } else { + for (i = cacheKey; i < trackLen; i++) { + if (kfPercents[i] > percent) { + break; + } + } + i = Math.min(i - 1, trackLen - 2); + } + cacheKey = i; + cachePercent = percent; + + var range = (kfPercents[i + 1] - kfPercents[i]); + if (range === 0) { + return; + } else { + w = (percent - kfPercents[i]) / range; + } + if (useSpline) { + p1 = kfValues[i]; + p0 = kfValues[i === 0 ? i : i - 1]; + p2 = kfValues[i > trackLen - 2 ? trackLen - 1 : i + 1]; + p3 = kfValues[i > trackLen - 3 ? trackLen - 1 : i + 2]; + if (isValueArray) { + Animation._catmullRomInterpolateArray( + p0, p1, p2, p3, w, w * w, w * w * w, + getter(target, propName), + arrDim + ); + } else { + let value; + if (isValueColor) { + // value = Zondy.LevelRenderer.Animation._catmullRomInterpolateArray( + // p0, p1, p2, p3, w, w * w, w * w * w, + // rgba, 1 + // ); + value = Animation.rgba2String(rgba); + } else { + value = Animation._catmullRomInterpolate( + p0, p1, p2, p3, w, w * w, w * w * w + ); + } + setter( + target, + propName, + value + ); + } + } else { + if (isValueArray) { + Animation._interpolateArray( + kfValues[i], kfValues[i + 1], w, + getter(target, propName), + arrDim + ); + } else { + let value; + if (isValueColor) { + Animation._interpolateArray( + kfValues[i], kfValues[i + 1], w, + rgba, 1 + ); + value = Animation.rgba2String(rgba); + } else { + value = Animation._interpolateNumber(kfValues[i], kfValues[i + 1], w); + } + setter( + target, + propName, + value + ); + } + } + + for (i = 0; i < onFrameListLen; i++) { + self._onframeList[i](target, percent); + } + }; + + var clip = new Clip({ + target: self._target, + life: trackMaxTime, + loop: self._loop, + delay: self._delay, + onframe: onframe, + ondestroy: ondestroy + }); + + if (easing && easing !== 'spline') { + clip.easing = easing; + } + self._clipList.push(clip); + self._clipCount++; + self.animation.add(clip); + }; + + for (var propName in this._tracks) { + createTrackClip(this._tracks[propName], propName); + } + return this; + } + + + /** + * @function Zondy.LevelRenderer.Animation.Animator.prototype.stop + * @description 停止动画 + */ + stop() { + for (var i = 0; i < this._clipList.length; i++) { + var clip = this._clipList[i]; + this.animation.remove(clip); + } + this._clipList = []; + } + + /** + * @function Zondy.LevelRenderer.Animation.Animator.prototype.delay + * @description 设置动画延迟开始的时间 + * @param {number} time - 时间，单位ms + * @returns {Zondy.LevelRenderer.Animation.Animator} Animator + */ + delay(time) { + this._delay = time; + return this; + } + + /** + * @function Zondy.LevelRenderer.Animation.Animator.prototype.done + * @description 添加动画结束的回调 + * @param {function} cb - Function + * @returns {Zondy.LevelRenderer.Animation.Animator} Animator + */ + done(cb) { + if (cb) { + this._doneList.push(cb); + } + return this; + } +} + +export {Animation}; +Zondy.LevelRenderer.Animation = Animation; + +export {Animator}; +Zondy.LevelRenderer.Animation.Animator = Animator; + + diff --git a/src/mapboxgl/theme/common/overlay/levelRender/Area.js b/src/mapboxgl/theme/common/overlay/levelRender/Area.js new file mode 100644 index 000000000..4428f3523 --- /dev/null +++ b/src/mapboxgl/theme/common/overlay/levelRender/Area.js @@ -0,0 +1,1081 @@ +import { Common } from '@mapgis/webclient-es6-service'; +const { Zondy } = Common; + +import {Util} from './Util'; +import {Curve as LevelRendererCurve} from './Curve'; + +/** + * @private + * @class Zondy.LevelRenderer.Tool.Area + * @classdesc LevelRenderer 工具-图形范围判断 + */ +class Area { + + /** + * @function Zondy.LevelRenderer.Tool.Areal.prototype.constructor + * @description 构造函数。 + */ + constructor() { + /** + * @member {Zondy.LevelRenderer.Tool.Util} Zondy.LevelRenderer.Tool.Areal.prototype.util + * @description 基础工具对象。 + */ + this.util = new Util(); + + /** + * @member {Zondy.LevelRenderer.Tool.Curve} Zondy.LevelRenderer.Tool.Areal.prototype.curve + * @description 曲线工具对象 + */ + this.curve = new LevelRendererCurve(); + + /** + * @member {Object} Zondy.LevelRenderer.Tool.Areal.prototype._ctx + * @description Cavans2D 渲染上下文 + */ + this._ctx = null; + + /** + * @member {Object} Zondy.LevelRenderer.Tool.Areal.prototype._textWidthCache + * @description 文本宽度缓存 + */ + this._textWidthCache = {}; + + /** + * @member {Object} Zondy.LevelRenderer.Tool.Areal.prototype._textHeightCache + * @description 文本高度缓存 + */ + this._textHeightCache = {}; + + /** + * @member {number} Zondy.LevelRenderer.Tool.Areal.prototype._textWidthCacheCounter + * @description 文本宽度缓存数量 + */ + this._textWidthCacheCounter = 0; + + /** + * @member {number} Zondy.LevelRenderer.Tool.Areal.prototype._textHeightCacheCounter + * @description 文本高度缓存数量 + */ + this._textHeightCacheCounter = 0; + + /** + * @member {number} Zondy.LevelRenderer.Tool.Areal.prototype.TEXT_CACHE_MAX + * @description 文本最大缓存数量 + */ + this.TEXT_CACHE_MAX = 5000; + + /** + * @member {number} Zondy.LevelRenderer.Tool.Areal.prototype.PI2 + * @description 2*PI 的值 + */ + this.PI2 = Math.PI * 2; + + /** + * @member {Array} Zondy.LevelRenderer.Tool.Areal.prototype.roots + * @description 临时数组 + */ + this.roots = [-1, -1, -1]; + + /** + * @member {Array} Zondy.LevelRenderer.Tool.Areal.prototype.extrema + * @description 临时数组 + */ + this.extrema = [-1, -1]; + + this.CLASS_NAME = "Zondy.LevelRenderer.Tool.Area"; + } + + /** + * @function Zondy.LevelRenderer.Tool.Areal.prototype.normalizeRadian + * @description 弧度标准化函数。 + * @param {number} angle - 弧度值。 + * @returns {number} 标准化后的弧度值。 + */ + normalizeRadian(angle) { + angle %= this.PI2; + if (angle < 0) { + angle += this.PI2; + } + return angle; + } + + /** + * @function Zondy.LevelRenderer.Tool.Areal.prototype.isInside + * @description 包含判断。 + * @param {Object} shape - 图形。 + * @param {number} area - 目标区域。 + * @param {number} x - 横坐标。 + * @param {number} y - 纵坐标。 + * @returns {boolean} 图形是否包含鼠标位置。 + */ + isInside(shape, area, x, y) { + if (!area || !shape) { + // 无参数或不支持类型 + return false; + } + var zoneType = shape.type; + + this._ctx = this._ctx || this.util.getContext(); + + // 未实现或不可用时则数学运算，主要是line，brokenLine，ring + var _mathReturn = this._mathMethod(shape, area, x, y); + if (typeof _mathReturn != 'undefined') { + return _mathReturn; + } + + if (shape.buildPath && this._ctx.isPointInPath) { + return this._buildPathMethod(shape, this._ctx, area, x, y); + } + + // 上面的方法都行不通时 + switch (zoneType) { + case 'ellipse': // Todo，不精确 + case 'smicellipse': // Todo，不精确 + return true; + // 旋轮曲线 不准确 + case 'trochoid': + var _r = area.location === 'out' + ? area.r1 + area.r2 + area.d + : area.r1 - area.r2 + area.d; + return this.isInsideCircle(area, x, y, _r); + // 玫瑰线 不准确 + case 'rose' : + return this.isInsideCircle(area, x, y, area.maxr); + // 路径，椭圆，曲线等-----------------13 + default: + return false; // Todo，暂不支持 + } + } + + /** + * @function Zondy.LevelRenderer.Tool.Areal.prototype._mathMethod + * @description 包含判断。用数学方法判断，三个方法中最快，但是支持的shape少。 + * @param {Object} shape - 图形。 + * @param {number} area - 目标区域。 + * @param {number} x - 横坐标。 + * @param {number} y - 纵坐标。 + * @returns {boolean} 图形是否包含鼠标位置，true表示坐标处在图形中。 + */ + _mathMethod(shape, area, x, y) { + var zoneType = shape.type; + // 在矩形内则部分图形需要进一步判断 + switch (zoneType) { + // 贝塞尔曲线 + case 'bezier-curve': + if (typeof (area.cpX2) === 'undefined') { + return this.isInsideQuadraticStroke( + area.xStart, area.yStart, + area.cpX1, area.cpY1, + area.xEnd, area.yEnd, + area.lineWidth, x, y + ); + } + return this.isInsideCubicStroke( + area.xStart, area.yStart, + area.cpX1, area.cpY1, + area.cpX2, area.cpY2, + area.xEnd, area.yEnd, + area.lineWidth, x, y + ); + // 线 + case 'line': + return this.isInsideLine( + area.xStart, area.yStart, + area.xEnd, area.yEnd, + area.lineWidth, x, y + ); + // 折线 + case 'broken-line': + return this.isInsideBrokenLine( + area.pointList, area.lineWidth, x, y + ); + // 扩展折线 + case 'smicbroken-line': { + // SMIC-修改 - start + let icX = x; + let icY = y; + if (shape.refOriginalPosition) { + icX = x - shape.refOriginalPosition[0]; + icY = y - shape.refOriginalPosition[1]; + } + return this.isInsideBrokenLine( + area.pointList, area.lineWidth, icX, icY + ); + } + //初始代码： + // return isInsideBrokenLine( + // area.pointList, area.lineWidth, x, y + // ); + // SMIC-修改 - end + // 圆环 + case 'ring': + return this.isInsideRing( + area.x, area.y, area.r0, area.r, x, y + ); + case 'smicring': { + let areaX = area.x; + let areaY = area.y; + if (shape.refOriginalPosition) { + areaX = area.x + shape.refOriginalPosition[0]; + areaY = area.y + shape.refOriginalPosition[1]; + } + return this.isInsideRing( + areaX, areaY, area.r0, area.r, x, y + ); + } + // 圆形 + case 'circle': + return this.isInsideCircle( + area.x, area.y, area.r, x, y + ); + // 扩展-点 + case 'smicpoint': { + // SMIC-修改 - start + let icX = x; + let icY = y; + if (shape.refOriginalPosition) { + icX = x - shape.refOriginalPosition[0]; + icY = y - shape.refOriginalPosition[1]; + } + return this.isInsideCircle( + area.x, area.y, area.r, icX, icY + ); + } + //初始代码： + // 无 + // SMIC-修改 - end + // 扇形 + case 'sector': { + let startAngle = area.startAngle * Math.PI / 180; + let endAngle = area.endAngle * Math.PI / 180; + if (!area.clockWise) { + startAngle = -startAngle; + endAngle = -endAngle; + } + return this.isInsideSector( + area.x, area.y, area.r0, area.r, + startAngle, endAngle, + !area.clockWise, + x, y + ); + } + //初始代码： + // 无 + // SMIC-增加 - end + // 扇形 + case 'smicsector': { + let startAngle = area.startAngle * Math.PI / 180; + let endAngle = area.endAngle * Math.PI / 180; + if (!area.clockWise) { + startAngle = -startAngle; + endAngle = -endAngle; + } + + let areaX = area.x; + let areaY = area.y; + if (shape.refOriginalPosition) { + areaX = area.x + shape.refOriginalPosition[0]; + areaY = area.y + shape.refOriginalPosition[1]; + } + + return this.isInsideSector( + areaX, areaY, area.r0, area.r, + startAngle, endAngle, + !area.clockWise, + x, y + ); + } + // 多边形 + case 'path': + return this.isInsidePath( + area.pathArray, Math.max(area.lineWidth, 5), + area.brushType, x, y + ); + case 'polygon': + case 'star': + case 'smicstar': + case 'isogon': + case 'smicisogon': + return this.isInsidePolygon(area.pointList, x, y); + // 扩展多边形 + case 'smicpolygon': { + // SMIC-修改 - start + let icX = x; + let icY = y; + if (shape.refOriginalPosition) { + icX = x - shape.refOriginalPosition[0]; + icY = y - shape.refOriginalPosition[1]; + } + + //岛洞面 + if (shape.holePolygonPointLists && shape.holePolygonPointLists.length > 0) { + var isOnBase = this.isInsidePolygon(area.pointList, icX, icY); + + // 遍历岛洞子面 + var holePLS = shape.holePolygonPointLists; + var isOnHole = false; + for (var i = 0, holePLSen = holePLS.length; i < holePLSen; i++) { + var holePL = holePLS[i]; + var isOnSubHole = this.isInsidePolygon(holePL, icX, icY); + if (isOnSubHole === true) { + isOnHole = true; + } + } + + // 捕获判断 + return isOnBase === true && isOnHole === false; + } else { + return this.isInsidePolygon(area.pointList, icX, icY); + } + } + // 初始代码： + // 无 + // SMIC-修改 - end + // 文本 + case 'text': + var rect = area.__rect || shape.getRect(area); + return this.isInsideRect( + rect.x, rect.y, rect.width, rect.height, x, y + ); + // 扩展文本 + case 'smictext': + //用文本背景矩形判断 + var textBg = shape.getTextBackground(area); + return this.isInsidePolygon(textBg, x, y); + //初始代码： + // 无 + // SMIC-修改 - end + // 矩形 + case 'rectangle': + case 'image': + // 图片 + return this.isInsideRect( + area.x, area.y, area.width, area.height, x, y + ); + case 'smicimage': { + let areaX = area.x; + let areaY = area.y; + if (shape.refOriginalPosition) { + areaX = area.x + shape.refOriginalPosition[0]; + areaY = area.y + shape.refOriginalPosition[1]; + } + return this.isInsideRect( + areaX, areaY, area.width, area.height, x, y + ); + } + //// 扩展矩形 + //case 'smicpolygon': + // // SMIC-修改 - start + // var icX = x; + // var icY = y; + // if(shape.refOriginalPosition) { + // icX = x - shape.refOriginalPosition[0]; + // icY = y - shape.refOriginalPosition[1]; + // } + // return this.isInsideRect( + // area.x, area.y, area.width, area.height, icX, icY + // ); + //初始代码： + // 无 + // SMIC-修改 - end + } + } + + /** + * @function Zondy.LevelRenderer.Tool.Areal.prototype._buildPathMethod + * @description 包含判断。通过buildPath方法来判断，三个方法中较快，但是不支持线条类型的 shape。 + * @param {Object} shape - 图形。 + * @param {Object} context - 上下文。 + * @param {number} area - 目标区域。 + * @param {number} x - 横坐标。 + * @param {number} y - 纵坐标。 + * @returns {boolean} 图形是否包含鼠标位置，true表示坐标处在图形中。 + */ + _buildPathMethod(shape, context, area, x, y) { + // 图形类实现路径创建了则用类的path + context.beginPath(); + shape.buildPath(context, area); + context.closePath(); + return context.isPointInPath(x, y); + } + + /** + * @function Zondy.LevelRenderer.Tool.Areal.prototype.isOutside + * @description 图形是否不包含鼠标位置。 + * @param {Object} shape - 图形。 + * @param {number} area - 目标区域。 + * @param {number} x - 横坐标。 + * @param {number} y - 纵坐标。 + * @returns {boolean} 图形是否不包含鼠标位置, true表示坐标处在图形外。 + */ + isOutside(shape, area, x, y) { + return !this.isInside(shape, area, x, y); + } + + /** + * @function Zondy.LevelRenderer.Tool.Areal.prototype.isInsideLine + * @description 线段包含判断。 + * @param {number} x0 - 线起始点横坐标。 + * @param {number} y0 - 线起始点纵坐标。 + * @param {number} x1 - 线终点横坐标。 + * @param {number} y1 - 线终点纵坐标。 + * @param {number} lineWidth - 线宽。 + * @param {number} x - 鼠标位置横坐标。 + * @param {number} y - 鼠标位置纵坐标。 + * @returns {boolean} 图形是否包含鼠标位置，true表示坐标处在图形内。 + */ + isInsideLine(x0, y0, x1, y1, lineWidth, x, y) { + if (lineWidth === 0) { + return false; + } + var _l = Math.max(lineWidth, 5); + var _a = 0; + var _b = 0; + // Quick reject + if ( + (y > y0 + _l && y > y1 + _l) + || (y < y0 - _l && y < y1 - _l) + || (x > x0 + _l && x > x1 + _l) + || (x < x0 - _l && x < x1 - _l) + ) { + return false; + } + + if (x0 !== x1) { + _a = (y0 - y1) / (x0 - x1); + _b = (x0 * y1 - x1 * y0) / (x0 - x1); + } else { + return Math.abs(x - x0) <= _l / 2; + } + var tmp = _a * x - y + _b; + var _s = tmp * tmp / (_a * _a + 1); + return _s <= _l / 2 * _l / 2; + } + + /** + * @function Zondy.LevelRenderer.Tool.Areal.prototype.isInsideCubicStroke + * @description 三次贝塞尔曲线描边包含判断。 + * @param {number} x0 - 点1横坐标。 + * @param {number} y0 - 点1纵坐标。 + * @param {number} x1 - 点2横坐标。 + * @param {number} y1 - 点2纵坐标。 + * @param {number} x2 - 点3纵坐标。 + * @param {number} y2 - 点3纵坐标。 + * @param {number} lineWidth - 线宽。 + * @param {number} x - 鼠标位置横坐标。 + * @param {number} y - 鼠标位置纵坐标。 + * @returns {boolean} 图形是否包含鼠标位置, true表示坐标处在图形内。 + */ + isInsideCubicStroke(x0, y0, x1, y1, x2, y2, x3, y3, lineWidth, x, y) { + if (lineWidth === 0) { + return false; + } + var _l = Math.max(lineWidth, 5); + // Quick reject + if ( + (y > y0 + _l && y > y1 + _l && y > y2 + _l && y > y3 + _l) + || (y < y0 - _l && y < y1 - _l && y < y2 - _l && y < y3 - _l) + || (x > x0 + _l && x > x1 + _l && x > x2 + _l && x > x3 + _l) + || (x < x0 - _l && x < x1 - _l && x < x2 - _l && x < x3 - _l) + ) { + return false; + } + var d = this.curve.cubicProjectPoint( + x0, y0, x1, y1, x2, y2, x3, y3, + x, y, null + ); + return d <= _l / 2; + } + + /** + * @function Zondy.LevelRenderer.Tool.Areal.prototype.isInsideQuadraticStroke + * @description 二次贝塞尔曲线描边包含判断。 + * @param {number} x0 - 点1横坐标。 + * @param {number} y0 - 点1纵坐标。 + * @param {number} x1 - 点2横坐标。 + * @param {number} y1 - 点2纵坐标。 + * @param {number} x2 - 点3纵坐标。 + * @param {number} y2 - 点3纵坐标。 + * @param {number} lineWidth - 线宽。 + * @param {number} x - 鼠标位置横坐标。 + * @param {number} y - 鼠标位置纵坐标。 + * @returns {boolean} 图形是否包含鼠标位置, true表示坐标处在图形内。 + */ + isInsideQuadraticStroke(x0, y0, x1, y1, x2, y2, lineWidth, x, y) { + if (lineWidth === 0) { + return false; + } + var _l = Math.max(lineWidth, 5); + // Quick reject + if ( + (y > y0 + _l && y > y1 + _l && y > y2 + _l) + || (y < y0 - _l && y < y1 - _l && y < y2 - _l) + || (x > x0 + _l && x > x1 + _l && x > x2 + _l) + || (x < x0 - _l && x < x1 - _l && x < x2 - _l) + ) { + return false; + } + var d = this.curve.quadraticProjectPoint( + x0, y0, x1, y1, x2, y2, + x, y, null + ); + return d <= _l / 2; + } + + /** + * @function Zondy.LevelRenderer.Tool.Areal.prototype.isInsideArcStroke + * @description 圆弧描边包含判断。 + * @param {number} cx - 圆心横坐标。 + * @param {number} cy - 圆心纵坐标。 + * @param {number} r - 圆半径。 + * @param {number} startAngle - 起始角度。 + * @param {number} endAngle - 终止角度。 + * @param {number} anticlockwise - 顺时针还是逆时针。 + * @param {number} lineWidth - 线宽。 + * @param {number} x - 鼠标位置横坐标。 + * @param {number} y - 鼠标位置纵坐标。 + * @returns {boolean} 图形是否包含鼠标位置, true表示坐标处在图形内。 + */ + isInsideArcStroke(cx, cy, r, startAngle, endAngle, anticlockwise, lineWidth, x, y) { + var PI2 = this.PI2; + + if (lineWidth === 0) { + return false; + } + var _l = Math.max(lineWidth, 5); + + x -= cx; + y -= cy; + var d = Math.sqrt(x * x + y * y); + if ((d - _l > r) || (d + _l < r)) { + return false; + } + if (Math.abs(startAngle - endAngle) >= PI2) { + // Is a circle + return true; + } + if (anticlockwise) { + var tmp = startAngle; + startAngle = this.normalizeRadian(endAngle); + endAngle = this.normalizeRadian(tmp); + } else { + startAngle = this.normalizeRadian(startAngle); + endAngle = this.normalizeRadian(endAngle); + } + if (startAngle > endAngle) { + endAngle += PI2; + } + + var angle = Math.atan2(y, x); + if (angle < 0) { + angle += PI2; + } + return (angle >= startAngle && angle <= endAngle) + || (angle + PI2 >= startAngle && angle + PI2 <= endAngle); + } + + /** + * @function Zondy.LevelRenderer.Tool.Areal.prototype.isInsideBrokenLine + * @description 图形 BrokenLine 是否包含鼠标位置, true表示坐标处在图形内。 + * @param {Array} points - 曲线点对象。 + * @param {number} lineWidth - 线宽。 + * @param {number} x - 鼠标位置横坐标。 + * @param {number} y - 鼠标位置纵坐标。 + * @returns {boolean} 图形是否包含鼠标位置, true表示坐标处在图形内。 + */ + isInsideBrokenLine(points, lineWidth, x, y) { + var _lineWidth = Math.max(lineWidth, 10); + for (var i = 0, l = points.length - 1; i < l; i++) { + var x0 = points[i][0]; + var y0 = points[i][1]; + var x1 = points[i + 1][0]; + var y1 = points[i + 1][1]; + + if (this.isInsideLine(x0, y0, x1, y1, _lineWidth, x, y)) { + return true; + } + } + + return false; + } + + /** + * @function Zondy.LevelRenderer.Tool.Areal.prototype.isInsideRing + * @description 图形 Ring 是否包含鼠标位置, true表示坐标处在图形内。 + * @returns {boolean} 图形是否包含鼠标位置, true表示坐标处在图形内。 + */ + isInsideRing(cx, cy, r0, r, x, y) { + var d = (x - cx) * (x - cx) + (y - cy) * (y - cy); + return (d < r * r) && (d > r0 * r0); + } + + /** + * @function Zondy.LevelRenderer.Tool.Areal.prototype.isInsideRect + * @description 图形 Rect 是否包含鼠标位置, true表示坐标处在图形内。 + * @returns {boolean} 图形是否包含鼠标位置, true表示坐标处在图形内。 + */ + isInsideRect(x0, y0, width, height, x, y) { + return x >= x0 && x <= (x0 + width) && y >= y0 && y <= (y0 + height); + } + + /** + * @function Zondy.LevelRenderer.Tool.Areal.prototype.isInsideCircle + * @description 图形 Circle 是否包含鼠标位置, true表示坐标处在图形内。 + * @returns {boolean} 图形是否包含鼠标位置, true表示坐标处在图形内。 + */ + isInsideCircle(x0, y0, r, x, y) { + return (x - x0) * (x - x0) + (y - y0) * (y - y0) < r * r; + } + + /** + * @function Zondy.LevelRenderer.Tool.Areal.prototype.isInsideSector + * @description 图形 Sector 是否包含鼠标位置, true表示坐标处在图形内。 + * @returns {boolean} 图形是否包含鼠标位置, true表示坐标处在图形内。 + */ + isInsideSector(cx, cy, r0, r, startAngle, endAngle, anticlockwise, x, y) { + return this.isInsideArcStroke(cx, cy, (r0 + r) / 2, startAngle, endAngle, anticlockwise, r - r0, x, y); + } + + /** + * @function Zondy.LevelRenderer.Tool.Areal.prototype.isInsidePolygon + * @description 图形 Polygon 是否包含鼠标位置, true表示坐标处在图形内。与 canvas 一样采用 non-zero winding rule + * @returns {boolean} 图形是否包含鼠标位置, true表示坐标处在图形内。 + */ + isInsidePolygon(points, x, y) { + var N = points.length; + var w = 0; + + for (var i = 0, j = N - 1; i < N; i++) { + var x0 = points[j][0]; + var y0 = points[j][1]; + var x1 = points[i][0]; + var y1 = points[i][1]; + w += this.windingLine(x0, y0, x1, y1, x, y); + j = i; + } + return w !== 0; + } + + + /** + * @function Zondy.LevelRenderer.Tool.Areal.prototype.windingLine + */ + windingLine(x0, y0, x1, y1, x, y) { + if ((y > y0 && y > y1) || (y < y0 && y < y1)) { + return 0; + } + if (y1 == y0) { + return 0; + } + var dir = y1 < y0 ? 1 : -1; + var t = (y - y0) / (y1 - y0); + var x_ = t * (x1 - x0) + x0; + + return x_ > x ? dir : 0; + } + + /** + * @function Zondy.LevelRenderer.Tool.Areal.prototype.swapExtrema + */ + swapExtrema() { + var tmp = this.extrema[0]; + this.extrema[0] = this.extrema[1]; + this.extrema[1] = tmp; + } + + /** + * @function Zondy.LevelRenderer.Tool.Areal.prototype.windingCubic + */ + windingCubic(x0, y0, x1, y1, x2, y2, x3, y3, x, y) { + var curve = this.curve; + var roots = this.roots; + var extrema = this.extrema; + + // Quick reject + if ( + (y > y0 && y > y1 && y > y2 && y > y3) + || (y < y0 && y < y1 && y < y2 && y < y3) + ) { + return 0; + } + var nRoots = curve.cubicRootAt(y0, y1, y2, y3, y, roots); + if (nRoots === 0) { + return 0; + } else { + var w = 0; + var nExtrema = -1; + var y0_, + y1_; + for (var i = 0; i < nRoots; i++) { + var t = roots[i]; + var x_ = curve.cubicAt(x0, x1, x2, x3, t); + if (x_ < x) { // Quick reject + continue; + } + if (nExtrema < 0) { + nExtrema = curve.cubicExtrema(y0, y1, y2, y3, extrema); + if (extrema[1] < extrema[0] && nExtrema > 1) { + this.swapExtrema(); + } + y0_ = curve.cubicAt(y0, y1, y2, y3, extrema[0]); + if (nExtrema > 1) { + y1_ = curve.cubicAt(y0, y1, y2, y3, extrema[1]); + } + } + if (nExtrema === 2) { + // 分成三段单调函数 + if (t < extrema[0]) { + w += y0_ < y0 ? 1 : -1; + } else if (t < extrema[1]) { + w += y1_ < y0_ ? 1 : -1; + } else { + w += y3 < y1_ ? 1 : -1; + } + } else { + // 分成两段单调函数 + if (t < extrema[0]) { + w += y0_ < y0 ? 1 : -1; + } else { + w += y3 < y0_ ? 1 : -1; + } + } + } + return w; + } + } + + /** + * @function Zondy.LevelRenderer.Tool.Areal.prototype.windingQuadratic + */ + windingQuadratic(x0, y0, x1, y1, x2, y2, x, y) { + var curve = this.curve; + var roots = this.roots; + + // Quick reject + if ( + (y > y0 && y > y1 && y > y2) + || (y < y0 && y < y1 && y < y2) + ) { + return 0; + } + var nRoots = curve.quadraticRootAt(y0, y1, y2, y, roots); + if (nRoots === 0) { + return 0; + } else { + var t = curve.quadraticExtremum(y0, y1, y2); + if (t >= 0 && t <= 1) { + var w = 0; + var y_ = curve.quadraticAt(y0, y1, y2, t); + for (let i = 0; i < nRoots; i++) { + let x_ = curve.quadraticAt(x0, x1, x2, roots[i]); + if (x_ > x) { + continue; + } + if (roots[i] < t) { + w += y_ < y0 ? 1 : -1; + } else { + w += y2 < y_ ? 1 : -1; + } + } + return w; + } else { + let x_ = curve.quadraticAt(x0, x1, x2, roots[0]); + if (x_ > x) { + return 0; + } + return y2 < y0 ? 1 : -1; + } + } + } + + /** + * @function Zondy.LevelRenderer.Tool.Areal.prototype.windingArc + * // TODO Arc 旋转 + */ + windingArc(cx, cy, r, startAngle, endAngle, anticlockwise, x, y) { + var roots = this.roots; + var PI2 = this.PI2; + + y -= cy; + if (y > r || y < -r) { + return 0; + } + let tmp = Math.sqrt(r * r - y * y); + roots[0] = -tmp; + roots[1] = tmp; + + if (Math.abs(startAngle - endAngle) >= PI2) { + // Is a circle + startAngle = 0; + endAngle = PI2; + var dir = anticlockwise ? 1 : -1; + if (x >= roots[0] + cx && x <= roots[1] + cx) { + return dir; + } else { + return 0; + } + } + + if (anticlockwise) { + let tmp = startAngle; + startAngle = this.normalizeRadian(endAngle); + endAngle = this.normalizeRadian(tmp); + } else { + startAngle = this.normalizeRadian(startAngle); + endAngle = this.normalizeRadian(endAngle); + } + if (startAngle > endAngle) { + endAngle += PI2; + } + + var w = 0; + for (let i = 0; i < 2; i++) { + var x_ = roots[i]; + if (x_ + cx > x) { + let angle = Math.atan2(y, x_); + let dir = anticlockwise ? 1 : -1; + if (angle < 0) { + angle = PI2 + angle; + } + if ( + (angle >= startAngle && angle <= endAngle) + || (angle + PI2 >= startAngle && angle + PI2 <= endAngle) + ) { + if (angle > Math.PI / 2 && angle < Math.PI * 1.5) { + dir = -dir; + } + w += dir; + } + } + } + return w; + } + + + /** + * @function Zondy.LevelRenderer.Tool.Areal.prototype.isInsidePath + * @description 与 canvas 一样采用 non-zero winding rule + */ + isInsidePath(pathArray, lineWidth, brushType, x, y) { + var w = 0; + var xi = 0; + var yi = 0; + var x0 = 0; + var y0 = 0; + var beginSubpath = true; + var firstCmd = true; + + brushType = brushType || 'fill'; + + var hasStroke = brushType === 'stroke' || brushType === 'both'; + var hasFill = brushType === 'fill' || brushType === 'both'; + + // var roots = [-1, -1, -1]; + for (var i = 0; i < pathArray.length; i++) { + var seg = pathArray[i]; + var p = seg.points; + // Begin a new subpath + if (beginSubpath || seg.command === 'M') { + if (i > 0) { + // Close previous subpath + if (hasFill) { + w += this.windingLine(xi, yi, x0, y0, x, y); + } + if (w !== 0) { + return true; + } + } + x0 = p[p.length - 2]; + y0 = p[p.length - 1]; + beginSubpath = false; + if (firstCmd && seg.command !== 'A') { + // 如果第一个命令不是M, 是lineTo, bezierCurveTo + // 等绘制命令的话，是会从该绘制的起点开始算的 + // Arc 会在之后做单独处理所以这里忽略 + firstCmd = false; + xi = x0; + yi = y0; + } + } + switch (seg.command) { + case 'M': + xi = p[0]; + yi = p[1]; + break; + case 'L': + if (hasStroke) { + if (this.isInsideLine( + xi, yi, p[0], p[1], lineWidth, x, y + )) { + return true; + } + } + if (hasFill) { + w += this.windingLine(xi, yi, p[0], p[1], x, y); + } + xi = p[0]; + yi = p[1]; + break; + case 'C': + if (hasStroke) { + if (this.isInsideCubicStroke( + xi, yi, p[0], p[1], p[2], p[3], p[4], p[5], + lineWidth, x, y + )) { + return true; + } + } + if (hasFill) { + w += this.windingCubic( + xi, yi, p[0], p[1], p[2], p[3], p[4], p[5], x, y + ); + } + xi = p[4]; + yi = p[5]; + break; + case 'Q': + if (hasStroke) { + if (this.isInsideQuadraticStroke( + xi, yi, p[0], p[1], p[2], p[3], + lineWidth, x, y + )) { + return true; + } + } + if (hasFill) { + w += this.windingQuadratic( + xi, yi, p[0], p[1], p[2], p[3], x, y + ); + } + xi = p[2]; + yi = p[3]; + break; + case 'A': + // TODO Arc 旋转 + // TODO Arc 判断的开销比较大 + var cx = p[0]; + var cy = p[1]; + var rx = p[2]; + var ry = p[3]; + var theta = p[4]; + var dTheta = p[5]; + var x1 = Math.cos(theta) * rx + cx; + var y1 = Math.sin(theta) * ry + cy; + // 不是直接使用 arc 命令 + if (!firstCmd) { + w += this.windingLine(xi, yi, x1, y1); + } else { + firstCmd = false; + // 第一个命令起点还未定义 + x0 = x1; + y0 = y1; + } + // zr 使用scale来模拟椭圆, 这里也对x做一定的缩放 + var _x = (x - cx) * ry / rx + cx; + if (hasStroke) { + if (this.isInsideArcStroke( + cx, cy, ry, theta, theta + dTheta, 1 - p[7], + lineWidth, _x, y + )) { + return true; + } + } + if (hasFill) { + w += this.windingArc( + cx, cy, ry, theta, theta + dTheta, 1 - p[7], + _x, y + ); + } + xi = Math.cos(theta + dTheta) * rx + cx; + yi = Math.sin(theta + dTheta) * ry + cy; + break; + case 'z': + if (hasStroke) { + if (this.isInsideLine( + xi, yi, x0, y0, lineWidth, x, y + )) { + return true; + } + } + beginSubpath = true; + break; + } + } + if (hasFill) { + w += this.windingLine(xi, yi, x0, y0, x, y); + } + return w !== 0; + } + + /** + * @function Zondy.LevelRenderer.Tool.Areal.prototype.getTextWidth + * @description 测算多行文本宽度 + */ + getTextWidth(text, textFont) { + var key = text + ':' + textFont; + if (this._textWidthCache[key]) { + return this._textWidthCache[key]; + } + this._ctx = this._ctx || this.util.getContext(); + this._ctx.save(); + + if (textFont) { + this._ctx.font = textFont; + } + + text = (text + '').split('\n'); + var width = 0; + for (var i = 0, l = text.length; i < l; i++) { + width = Math.max( + this._ctx.measureText(text[i]).width, + width + ); + } + this._ctx.restore(); + + this._textWidthCache[key] = width; + if (++this._textWidthCacheCounter > this.TEXT_CACHE_MAX) { + // 内存释放 + this._textWidthCacheCounter = 0; + this._textWidthCache = {}; + } + + return width; + } + + /** + * @function Zondy.LevelRenderer.Tool.Areal.prototype.getTextHeight + * @description 测算多行文本高度 + */ + getTextHeight(text, textFont) { + var key = text + ':' + textFont; + if (this._textHeightCache[key]) { + return this._textHeightCache[key]; + } + + this._ctx = this._ctx || this.util.getContext(); + + this._ctx.save(); + if (textFont) { + this._ctx.font = textFont; + } + + text = (text + '').split('\n'); + // 比较粗暴 + //var height = (this._ctx.measureText('国').width + 2) * text.length; //打包不支持中文，替换掉 + var height = (this._ctx.measureText('ZH').width + 2) * text.length; + + this._ctx.restore(); + + this._textHeightCache[key] = height; + if (++this._textHeightCacheCounter > this.TEXT_CACHE_MAX) { + // 内存释放 + this._textHeightCacheCounter = 0; + this._textHeightCache = {}; + } + return height; + } +} + +export {Area}; +Zondy.LevelRenderer.Tool.Area = Area; \ No newline at end of file diff --git a/src/mapboxgl/theme/common/overlay/levelRender/Clip.js b/src/mapboxgl/theme/common/overlay/levelRender/Clip.js new file mode 100644 index 000000000..592d529ed --- /dev/null +++ b/src/mapboxgl/theme/common/overlay/levelRender/Clip.js @@ -0,0 +1,119 @@ +import { Common } from '@mapgis/webclient-es6-service'; +const { Zondy } = Common; +import {Easing as AEasing} from './Easing'; + +/** + * @private + * @class Zondy.LevelRenderer.Animation.Clip + * @classdec 动画片段 + */ +class Clip { + + /** + * @function Zondy.LevelRenderer.Animation.Clip.prototype.constructor + * @description 构造函数。 + * @param {Object} options - 参数。 + * @param {Object} options.target - 动画对象，可以是数组，如果是数组的话会批量分发 onframe 等事件。 + * @param {number} [options.life=1000] - 动画时长。 + * @param {number} [options.delay=0] - 动画延迟时间。 + * @param {boolean} [options.loop=true] - 是否循环。 + * @param {number} [options.gap=0] - 循环的间隔时间。 + * @param {Object} options.onframe - 帧。 + * @param {boolean} options.easing - 是否消除。 + * @param {boolean} options.ondestroy - 是否销毁。 + * @param {boolean} options.onrestart - 是否重播。 + */ + constructor(options) { + this._targetPool = options.target || {}; + if (!(this._targetPool instanceof Array)) { + this._targetPool = [this._targetPool]; + } + + // 生命周期 + this._life = options.life || 1000; + // 延时 + this._delay = options.delay || 0; + // 开始时间 + this._startTime = new Date().getTime() + this._delay;// 单位毫秒 + + // 结束时间 + this._endTime = this._startTime + this._life * 1000; + + // 是否循环 + this.loop = typeof options.loop == 'undefined' + ? false : options.loop; + + this.gap = options.gap || 0; + + this.easing = options.easing || 'Linear'; + + this.onframe = options.onframe; + this.ondestroy = options.ondestroy; + this.onrestart = options.onrestart; + this.CLASS_NAME = "Zondy.LevelRenderer.Animation.Clip"; + } + + /** + * @function Zondy.LevelRenderer.Animation.Clip.prototype.destroy + * @description 销毁对象，释放资源。调用此函数后所有属性将被置为 null。 + */ + destroy() { + + } + + step(time) { + var easing = new AEasing(); + var percent = (time - this._startTime) / this._life; + + // 还没开始 + if (percent < 0) { + return; + } + + percent = Math.min(percent, 1); + + var easingFunc = typeof this.easing == 'string' + ? easing[this.easing] + : this.easing; + var schedule = typeof easingFunc === 'function' + ? easingFunc(percent) + : percent; + + this.fire('frame', schedule); + + // 结束 + if (percent === 1) { + if (this.loop) { + this.restart(); + // 重新开始周期 + // 抛出而不是直接调用事件直到 stage.update 后再统一调用这些事件 + return 'restart'; + + } + + // 动画完成将这个控制器标识为待删除 + // 在Animation.update中进行批量删除 + this._needsRemove = true; + return 'destroy'; + } + + return null; + } + + restart() { + var time = new Date().getTime(); + var remainder = (time - this._startTime) % this._life; + this._startTime = new Date().getTime() - remainder + this.gap; + } + + fire(eventType, arg) { + for (var i = 0, len = this._targetPool.length; i < len; i++) { + if (this['on' + eventType]) { + this['on' + eventType](this._targetPool[i], arg); + } + } + } +} + +export {Clip}; +Zondy.LevelRenderer.Animation.Clip = Clip; \ No newline at end of file diff --git a/src/mapboxgl/theme/common/overlay/levelRender/Color.js b/src/mapboxgl/theme/common/overlay/levelRender/Color.js new file mode 100644 index 000000000..504b52834 --- /dev/null +++ b/src/mapboxgl/theme/common/overlay/levelRender/Color.js @@ -0,0 +1,1104 @@ +import { Common } from '@mapgis/webclient-es6-service'; +const { Zondy } = Common; +import {Util} from './Util'; + +/** + * @private + * @class Zondy.LevelRenderer.Tool.Color + * @classdesc LevelRenderer 工具-颜色辅助类 + */ +class Color { + constructor() { + /** + * @member {Zondy.LevelRenderer.Tool.Util} Zondy.LevelRenderer.Tool.Color.prototype.util + * @description LevelRenderer 基础工具对象。 + */ + this.util = new Util(); + + /** + * @member {Object} Zondy.LevelRenderer.Tool.Color.prototype._ctx + * @description _ctx。 + */ + this._ctx = null; + + /** + * @member {Array} Zondy.LevelRenderer.Tool.Color.prototype.palette + * @description 默认色板。色板是一个包含图表默认颜色系列的数组，当色板中所有颜色被使用过后，又将从新回到色板中的第一个颜色。 + */ + this.palette = [ + '#ff9277', ' #dddd00', ' #ffc877', ' #bbe3ff', ' #d5ffbb', + '#bbbbff', ' #ddb000', ' #b0dd00', ' #e2bbff', ' #ffbbe3', + '#ff7777', ' #ff9900', ' #83dd00', ' #77e3ff', ' #778fff', + '#c877ff', ' #ff77ab', ' #ff6600', ' #aa8800', ' #77c7ff', + '#ad77ff', ' #ff77ff', ' #dd0083', ' #777700', ' #00aa00', + '#0088aa', ' #8400dd', ' #aa0088', ' #dd0000', ' #772e00' + ]; + + /** + * @member {Array} Zondy.LevelRenderer.Tool.Color.prototype._palette + * @description 复位色板，用于复位 palette + */ + this._palette = this.palette; + + /** + * @member {string} Zondy.LevelRenderer.Tool.Color.prototype.highlightColor + * @description 高亮色 + */ + this.highlightColor = 'rgba(0,0,255,1)'; + + /** + * @member {string} Zondy.LevelRenderer.Tool.Color.prototype._highlightColor + * @description 复位高亮色 + */ + this._highlightColor = this.highlightColor; + + /** + * @member {string} Zondy.LevelRenderer.Tool.Color.prototype.colorRegExp + * @description 颜色格式，正则表达式。 + */ + this.colorRegExp = /^\s*((#[a-f\d]{6})|(#[a-f\d]{3})|rgba?\(\s*([\d\.]+%?\s*,\s*[\d\.]+%?\s*,\s*[\d\.]+%?(?:\s*,\s*[\d\.]+%?)?)\s*\)|hsba?\(\s*([\d\.]+(?:deg|\xb0|%)?\s*,\s*[\d\.]+%?\s*,\s*[\d\.]+%?(?:\s*,\s*[\d\.]+)?)%?\s*\)|hsla?\(\s*([\d\.]+(?:deg|\xb0|%)?\s*,\s*[\d\.]+%?\s*,\s*[\d\.]+%?(?:\s*,\s*[\d\.]+)?)%?\s*\))\s*$/i; + + /** + * @member {string} Zondy.LevelRenderer.Tool.Color.prototype._nameColors + * @description 颜色名。 + */ + this._nameColors = { + aliceblue: '#f0f8ff', + antiquewhite: '#faebd7', + aqua: '#0ff', + aquamarine: '#7fffd4', + azure: '#f0ffff', + beige: '#f5f5dc', + bisque: '#ffe4c4', + black: '#000', + blanchedalmond: '#ffebcd', + blue: '#00f', + blueviolet: '#8a2be2', + brown: '#a52a2a', + burlywood: '#deb887', + cadetblue: '#5f9ea0', + chartreuse: '#7fff00', + chocolate: '#d2691e', + coral: '#ff7f50', + cornflowerblue: '#6495ed', + cornsilk: '#fff8dc', + crimson: '#dc143c', + cyan: '#0ff', + darkblue: '#00008b', + darkcyan: '#008b8b', + darkgoldenrod: '#b8860b', + darkgray: '#a9a9a9', + darkgrey: '#a9a9a9', + darkgreen: '#006400', + darkkhaki: '#bdb76b', + darkmagenta: '#8b008b', + darkolivegreen: '#556b2f', + darkorange: '#ff8c00', + darkorchid: '#9932cc', + darkred: '#8b0000', + darksalmon: '#e9967a', + darkseagreen: '#8fbc8f', + darkslateblue: '#483d8b', + darkslategray: '#2f4f4f', + darkslategrey: '#2f4f4f', + darkturquoise: '#00ced1', + darkviolet: '#9400d3', + deeppink: '#ff1493', + deepskyblue: '#00bfff', + dimgray: '#696969', + dimgrey: '#696969', + dodgerblue: '#1e90ff', + firebrick: '#b22222', + floralwhite: '#fffaf0', + forestgreen: '#228b22', + fuchsia: '#f0f', + gainsboro: '#dcdcdc', + ghostwhite: '#f8f8ff', + gold: '#ffd700', + goldenrod: '#daa520', + gray: '#808080', + grey: '#808080', + green: '#008000', + greenyellow: '#adff2f', + honeydew: '#f0fff0', + hotpink: '#ff69b4', + indianred: '#cd5c5c', + indigo: '#4b0082', + ivory: '#fffff0', + khaki: '#f0e68c', + lavender: '#e6e6fa', + lavenderblush: '#fff0f5', + lawngreen: '#7cfc00', + lemonchiffon: '#fffacd', + lightblue: '#add8e6', + lightcoral: '#f08080', + lightcyan: '#e0ffff', + lightgoldenrodyellow: '#fafad2', + lightgray: '#d3d3d3', + lightgrey: '#d3d3d3', + lightgreen: '#90ee90', + lightpink: '#ffb6c1', + lightsalmon: '#ffa07a', + lightseagreen: '#20b2aa', + lightskyblue: '#87cefa', + lightslategray: '#789', + lightslategrey: '#789', + lightsteelblue: '#b0c4de', + lightyellow: '#ffffe0', + lime: '#0f0', + limegreen: '#32cd32', + linen: '#faf0e6', + magenta: '#f0f', + maroon: '#800000', + mediumaquamarine: '#66cdaa', + mediumblue: '#0000cd', + mediumorchid: '#ba55d3', + mediumpurple: '#9370d8', + mediumseagreen: '#3cb371', + mediumslateblue: '#7b68ee', + mediumspringgreen: '#00fa9a', + mediumturquoise: '#48d1cc', + mediumvioletred: '#c71585', + midnightblue: '#191970', + mintcream: '#f5fffa', + mistyrose: '#ffe4e1', + moccasin: '#ffe4b5', + navajowhite: '#ffdead', + navy: '#000080', + oldlace: '#fdf5e6', + olive: '#808000', + olivedrab: '#6b8e23', + orange: '#ffa500', + orangered: '#ff4500', + orchid: '#da70d6', + palegoldenrod: '#eee8aa', + palegreen: '#98fb98', + paleturquoise: '#afeeee', + palevioletred: '#d87093', + papayawhip: '#ffefd5', + peachpuff: '#ffdab9', + peru: '#cd853f', + pink: '#ffc0cb', + plum: '#dda0dd', + powderblue: '#b0e0e6', + purple: '#800080', + red: '#f00', + rosybrown: '#bc8f8f', + royalblue: '#4169e1', + saddlebrown: '#8b4513', + salmon: '#fa8072', + sandybrown: '#f4a460', + seagreen: '#2e8b57', + seashell: '#fff5ee', + sienna: '#a0522d', + silver: '#c0c0c0', + skyblue: '#87ceeb', + slateblue: '#6a5acd', + slategray: '#708090', + slategrey: '#708090', + snow: '#fffafa', + springgreen: '#00ff7f', + steelblue: '#4682b4', + tan: '#d2b48c', + teal: '#008080', + thistle: '#d8bfd8', + tomato: '#ff6347', + turquoise: '#40e0d0', + violet: '#ee82ee', + wheat: '#f5deb3', + white: '#fff', + whitesmoke: '#f5f5f5', + yellow: '#ff0', + yellowgreen: '#9acd32' + }; + + this.CLASS_NAME = "Zondy.LevelRenderer.Tool.Color"; + } + + /** + * @function Zondy.LevelRenderer.Tool.Color.prototype.customPalette + * @description 自定义调色板。 + * @param {Array} userPalete - 颜色板。 + */ + customPalette(userPalete) { + this.palette = userPalete; + } + + /** + * @function Zondy.LevelRenderer.Tool.Color.prototype.resetPalette + * @description 复位默认色板。 + */ + resetPalette() { + this.palette = this._palette; + } + + /** + * @function Zondy.LevelRenderer.Tool.Color.prototype.getColor + * @description 获取色板颜色。 + * @param {number} idx - 色板位置。 + * @param {Array} userPalete - 色板。 + * @returns {string} 颜色值。 + */ + getColor(idx, userPalete) { + idx = idx | 0; + userPalete = userPalete || this.palette; + return userPalete[idx % userPalete.length]; + } + + /** + * @function Zondy.LevelRenderer.Tool.Color.prototype.customHighlight + * @description 自定义默认高亮颜色。 + * @param {string} userHighlightColor - 自定义高亮色。 + */ + customHighlight(userHighlightColor) { + this.highlightColor = userHighlightColor; + } + + /** + * @function Zondy.LevelRenderer.Tool.Color.prototype.resetHighlight + * @description 重置默认高亮颜色。将当前的高亮色作为默认高亮颜色 + */ + resetHighlight() { + this.highlightColor = this._highlightColor; + } + + /** + * @function Zondy.LevelRenderer.Tool.Color.prototype.getHighlightColor + * @description 获取默认高亮颜色 + * @returns {string} 颜色值。 + */ + getHighlightColor() { + return this.highlightColor; + } + + /** + * @function Zondy.LevelRenderer.Tool.Color.prototype.getRadialGradient + * @description 径向渐变。 + * @param {number} x0 - 渐变起点横坐标。 + * @param {number} y0 - 渐变起点纵坐标。 + * @param {number} r0 - 半径 + * @param {number} x1 - 渐变终点横坐标。 + * @param {number} y1 - 渐变终点纵坐标。 + * @param {number} r1 - 半径 + * @param {Array} colorList - 颜色列表。 + * @returns {CanvasGradient} Cavans 渐变颜色。 + */ + getRadialGradient(x0, y0, r0, x1, y1, r1, colorList) { + var util = this.util; + + if (!this._ctx) { + this._ctx = util.getContext(); + } + var gradient = this._ctx.createRadialGradient(x0, y0, r0, x1, y1, r1); + for (var i = 0, l = colorList.length; i < l; i++) { + + gradient.addColorStop(colorList[i][0], colorList[i][1]); + } + gradient.__nonRecursion = true; + return gradient; + } + + /** + * @function Zondy.LevelRenderer.Tool.Color.prototype.getLinearGradient + * @description 线性渐变。 + * @param {number} x0 - 渐变起点横坐标。 + * @param {number} y0 - 渐变起点纵坐标。 + * @param {number} x1 - 渐变终点横坐标。 + * @param {number} y1 - 渐变终点纵坐标。 + * @param {Array} colorList - 颜色列表。 + * @returns {CanvasGradient} Cavans 渐变颜色。 + */ + getLinearGradient(x0, y0, x1, y1, colorList) { + var util = this.util; + + if (!this._ctx) { + this._ctx = util.getContext(); + } + var gradient = this._ctx.createLinearGradient(x0, y0, x1, y1); + for (var i = 0, l = colorList.length; i < l; i++) { + gradient.addColorStop(colorList[i][0], colorList[i][1]); + } + gradient.__nonRecursion = true; + return gradient; + } + + /** + * @function Zondy.LevelRenderer.Tool.Color.prototype.getStepColors + * @description 获取两种颜色之间渐变颜色数组。 + * @param {Object} start - 起始颜色对象。 + * @param {Object} end - 结束颜色对象。 + * @param {number} step - 渐变级数。 + * @returns {Array} 颜色数组。 + */ + getStepColors(start, end, step) { + start = this.toRGBA(start); + end = this.toRGBA(end); + start = this.getData(start); + end = this.getData(end); + + var colors = []; + var stepR = (end[0] - start[0]) / step; + var stepG = (end[1] - start[1]) / step; + var stepB = (end[2] - start[2]) / step; + var stepA = (end[3] - start[3]) / step; + // 生成颜色集合 + // fix by linfeng 颜色堆积 + for (var i = 0, r = start[0], g = start[1], b = start[2], a = start[3]; i < step; i++) { + colors[i] = this.toColor([ + this.adjust(Math.floor(r), [0, 255]), + this.adjust(Math.floor(g), [0, 255]), + this.adjust(Math.floor(b), [0, 255]), + a.toFixed(4) - 0 + ], 'rgba'); + r += stepR; + g += stepG; + b += stepB; + a += stepA; + } + r = end[0]; + g = end[1]; + b = end[2]; + a = end[3]; + colors[i] = this.toColor([r, g, b, a], 'rgba'); + return colors; + } + + /** + * @function Zondy.LevelRenderer.Tool.Color.prototype.getGradientColors + * @description 获取指定级数的渐变颜色数组。 + * @param {Array.} colors - 颜色数组。 + * @param {number} [step=20] - 渐变级数。 + * @returns {Array.} 颜色数组。 + */ + getGradientColors(colors, step) { + var ret = []; + var len = colors.length; + if (step === undefined) { + step = 20; + } + if (len === 1) { + ret = this.getStepColors(colors[0], colors[0], step); + } else if (len > 1) { + for (var i = 0, n = len - 1; i < n; i++) { + var steps = this.getStepColors(colors[i], colors[i + 1], step); + if (i < n - 1) { + steps.pop(); + } + ret = ret.concat(steps); + } + } + return ret; + } + + /** + * @function Zondy.LevelRenderer.Tool.Color.prototype.toColor + * @description 颜色值数组转为指定格式颜色。 + * @param {Array} data - 颜色值数组。 + * @param {string} format - 格式，默认'rgb' + * @returns {string} 颜色。 + */ + toColor(data, format) { + format = format || 'rgb'; + if (data && (data.length === 3 || data.length === 4)) { + data = this.map(data, + function (c) { + return c > 1 ? Math.ceil(c) : c; + } + ); + + if (format.indexOf('hex') > -1) { + return '#' + ((1 << 24) + (data[0] << 16) + (data[1] << 8) + (+data[2])).toString(16).slice(1); + } else if (format.indexOf('hs') > -1) { + var sx = this.map(data.slice(1, 3), + function (c) { + return c + '%'; + } + ); + data[1] = sx[0]; + data[2] = sx[1]; + } + + if (format.indexOf('a') > -1) { + if (data.length === 3) { + data.push(1); + } + data[3] = this.adjust(data[3], [0, 1]); + return format + '(' + data.slice(0, 4).join(',') + ')'; + } + + return format + '(' + data.slice(0, 3).join(',') + ')'; + } + } + + /** + * @function Zondy.LevelRenderer.Tool.Color.prototype.toArray + * @description 颜色字符串转换为rgba数组。 + * @param {string} color - 颜色。 + * @returns {Array.} 颜色值数组。 + */ + toArray(color) { + color = this.trim(color); + if (color.indexOf('rgba') < 0) { + color = this.toRGBA(color); + } + + var data = []; + var i = 0; + color.replace(/[\d.]+/g, function (n) { + if (i < 3) { + n = n | 0; + } else { + // Alpha + n = +n; + } + data[i++] = n; + }); + return data; + } + + /** + * @function Zondy.LevelRenderer.Tool.Color.prototype.convert + * @description 颜色格式转化。 + * @param {Array} data - 颜色值数组。 + * @param {string} format - 格式，默认'rgb' + * @returns {string} 颜色。 + */ + convert(color, format) { + if (!this.isCalculableColor(color)) { + return color; + } + var data = this.getData(color); + var alpha = data[3]; + if (typeof alpha === 'undefined') { + alpha = 1; + } + + if (color.indexOf('hsb') > -1) { + data = this._HSV_2_RGB(data); + } else if (color.indexOf('hsl') > -1) { + data = this._HSL_2_RGB(data); + } + + if (format.indexOf('hsb') > -1 || format.indexOf('hsv') > -1) { + data = this._RGB_2_HSB(data); + } else if (format.indexOf('hsl') > -1) { + data = this._RGB_2_HSL(data); + } + + data[3] = alpha; + + return this.toColor(data, format); + } + + /** + * @function Zondy.LevelRenderer.Tool.Color.prototype.toRGBA + * @description 转换为rgba格式的颜色。 + * @param {string} color - 颜色。 + * @returns {string} 颜色。 + */ + toRGBA(color) { + return this.convert(color, 'rgba'); + } + + /** + * @function Zondy.LevelRenderer.Tool.Color.prototype.toRGB + * @description 转换为rgb数字格式的颜色。 + * @param {string} color - 颜色。 + * @returns {string} 颜色。 + */ + toRGB(color) { + return this.convert(color, 'rgb'); + } + + /** + * @function Zondy.LevelRenderer.Tool.Color.prototype.toHex + * @description 转换为16进制颜色。 + * @param {string} color - 颜色。 + * @returns {string} 16进制颜色，#rrggbb格式 + */ + toHex(color) { + return this.convert(color, 'hex'); + } + + /** + * @function Zondy.LevelRenderer.Tool.Color.prototype.toHSVA + * @description 转换为HSV颜色。 + * @param {string} color - 颜色。 + * @returns {string} HSVA颜色，hsva(h,s,v,a) + */ + toHSVA(color) { + return this.convert(color, 'hsva'); + } + + /** + * @function Zondy.LevelRenderer.Tool.Color.prototype.toHSV + * @description 转换为HSV颜色。 + * @param {string} color - 颜色。 + * @returns {string} HSV颜色，hsv(h,s,v) + */ + toHSV(color) { + return this.convert(color, 'hsv'); + } + + /** + * @function Zondy.LevelRenderer.Tool.Color.prototype.toHSBA + * @description 转换为HSBA颜色。 + * @param {string} color - 颜色。 + * @returns {string} HSBA颜色，hsba(h,s,b,a) + */ + toHSBA(color) { + return this.convert(color, 'hsba'); + } + + /** + * @function Zondy.LevelRenderer.Tool.Color.prototype.toHSB + * @description 转换为HSB颜色。 + * @param {string} color - 颜色。 + * @returns {string} HSB颜色，hsb(h,s,b) + */ + toHSB(color) { + return this.convert(color, 'hsb'); + } + + /** + * @function Zondy.LevelRenderer.Tool.Color.prototype.toHSLA + * @description 转换为HSLA颜色。 + * @param {string} color - 颜色。 + * @returns {string} HSLA颜色，hsla(h,s,l,a) + */ + toHSLA(color) { + return this.convert(color, 'hsla'); + } + + /** + * @function Zondy.LevelRenderer.Tool.Color.prototype.toHSL + * @description 转换为HSL颜色。 + * @param {string} color - 颜色。 + * @returns {string} HSL颜色，hsl(h,s,l) + */ + toHSL(color) { + return this.convert(color, 'hsl'); + } + + /** + * @function Zondy.LevelRenderer.Tool.Color.prototype.toName + * @description 转换颜色名。 + * @param {string} color - 颜色。 + * @returns {string} 颜色名 + */ + toName(color) { + for (var key in this._nameColors) { + if (this.toHex(this._nameColors[key]) === this.toHex(color)) { + return key; + } + } + return null; + } + + /** + * @function Zondy.LevelRenderer.Tool.Color.prototype.trim + * @description 移除颜色中多余空格。 + * @param {string} color - 颜色。 + * @returns {string} 无空格颜色 + */ + trim(color) { + return String(color).replace(/\s+/g, ''); + } + + /** + * @function Zondy.LevelRenderer.Tool.Color.prototype.normalize + * @description 颜色规范化。 + * @param {string} color - 颜色。 + * @returns {string} 规范化后的颜色 + */ + normalize(color) { + // 颜色名 + if (this._nameColors[color]) { + color = this._nameColors[color]; + } + // 去掉空格 + color = this.trim(color); + // hsv与hsb等价 + color = color.replace(/hsv/i, 'hsb'); + // rgb转为rrggbb + if (/^#[\da-f]{3}$/i.test(color)) { + color = parseInt(color.slice(1), 16); + var r = (color & 0xf00) << 8; + var g = (color & 0xf0) << 4; + var b = color & 0xf; + + color = '#' + ((1 << 24) + (r << 4) + r + (g << 4) + g + (b << 4) + b).toString(16).slice(1); + } + // 或者使用以下正则替换，不过 chrome 下性能相对差点 + // color = color.replace(/^#([\da-f])([\da-f])([\da-f])$/i, '#$1$1$2$2$3$3'); + return color; + } + + /** + * @function Zondy.LevelRenderer.Tool.Color.prototype.lift + * @description 颜色加深或减淡，当level>0加深，当level<0减淡。 + * @param {string} color - 颜色。 + * @param {number} level - 升降程度，取值区间[-1,1]。 + * @returns {string} 加深或减淡后颜色值 + */ + lift(color, level) { + if (!this.isCalculableColor(color)) { + return color; + } + var direct = level > 0 ? 1 : -1; + if (typeof level === 'undefined') { + level = 0; + } + level = Math.abs(level) > 1 ? 1 : Math.abs(level); + color = this.toRGB(color); + var data = this.getData(color); + for (var i = 0; i < 3; i++) { + if (direct === 1) { + data[i] = data[i] * (1 - level) | 0; + } else { + data[i] = ((255 - data[i]) * level + data[i]) | 0; + } + } + return 'rgb(' + data.join(',') + ')'; + } + + /** + * @function Zondy.LevelRenderer.Tool.Color.prototype.reverse + * @description 颜色翻转。[255-r,255-g,255-b,1-a] + * @param {string} color - 颜色。 + * @returns {string} 翻转颜色 + */ + reverse(color) { + if (!this.isCalculableColor(color)) { + return color; + } + var data = this.getData(this.toRGBA(color)); + data = this.map(data, + function (c) { + return 255 - c; + } + ); + return this.toColor(data, 'rgb'); + } + + /** + * @function Zondy.LevelRenderer.Tool.Color.prototype.mix + * @description 简单两种颜色混合 + * @param {string} color1 - 第一种颜色。 + * @param {string} color2 - 第二种颜色。 + * @param {number} weight - 混合权重[0-1]。 + * @returns {string} 结果色。rgb(r,g,b)或rgba(r,g,b,a) + */ + mix(color1, color2, weight) { + if (!this.isCalculableColor(color1) || !this.isCalculableColor(color2)) { + return color1; + } + + if (typeof weight === 'undefined') { + weight = 0.5; + } + weight = 1 - this.adjust(weight, [0, 1]); + + var w = weight * 2 - 1; + var data1 = this.getData(this.toRGBA(color1)); + var data2 = this.getData(this.toRGBA(color2)); + + var d = data1[3] - data2[3]; + + var weight1 = (((w * d === -1) ? w : (w + d) / (1 + w * d)) + 1) / 2; + var weight2 = 1 - weight1; + + var data = []; + + for (var i = 0; i < 3; i++) { + data[i] = data1[i] * weight1 + data2[i] * weight2; + } + + var alpha = data1[3] * weight + data2[3] * (1 - weight); + alpha = Math.max(0, Math.min(1, alpha)); + + if (data1[3] === 1 && data2[3] === 1) {// 不考虑透明度 + return this.toColor(data, 'rgb'); + } + data[3] = alpha; + return this.toColor(data, 'rgba'); + } + + /** + * @function Zondy.LevelRenderer.Tool.Color.prototype.random + * @description 随机颜色 + * @returns {string} 颜色值，#rrggbb格式 + */ + random() { + return '#' + Math.random().toString(16).slice(2, 8); + } + + /** + * @function Zondy.LevelRenderer.Tool.Color.prototype.getData + * @description 获取颜色值数组，返回值范围。 + * RGB 范围[0-255] + * HSL/HSV/HSB 范围[0-1] + * A透明度范围[0-1] + * 支持格式： + * #rgb + * #rrggbb + * rgb(r,g,b) + * rgb(r%,g%,b%) + * rgba(r,g,b,a) + * hsb(h,s,b) // hsv与hsb等价 + * hsb(h%,s%,b%) + * hsba(h,s,b,a) + * hsl(h,s,l) + * hsl(h%,s%,l%) + * hsla(h,s,l,a) + * @param {string} color - 颜色。 + * @returns {Array.} 颜色值数组或null + */ + getData(color) { + color = this.normalize(color); + var r = color.match(this.colorRegExp); + if (r === null) { + throw new Error('The color format error'); // 颜色格式错误 + } + var d; + var a; + var data = []; + var rgb; + + if (r[2]) { + // #rrggbb + d = r[2].replace('#', '').split(''); + rgb = [d[0] + d[1], d[2] + d[3], d[4] + d[5]]; + data = this.map(rgb, + function (c) { + return Color.prototype.adjust.call(this, parseInt(c, 16), [0, 255]); + } + ); + + } else if (r[4]) { + // rgb rgba + var rgba = (r[4]).split(','); + a = rgba[3]; + rgb = rgba.slice(0, 3); + data = this.map( + rgb, + function (c) { + c = Math.floor( + c.indexOf('%') > 0 ? parseInt(c, 0) * 2.55 : c + ); + return Color.prototype.adjust.call(this, c, [0, 255]); + } + ); + + if (typeof a !== 'undefined') { + data.push(this.adjust(parseFloat(a), [0, 1])); + } + } else if (r[5] || r[6]) { + // hsb hsba hsl hsla + var hsxa = (r[5] || r[6]).split(','); + var h = parseInt(hsxa[0], 0) / 360; + var s = hsxa[1]; + var x = hsxa[2]; + a = hsxa[3]; + data = this.map([s, x], + function (c) { + return Color.prototype.adjust.call(this, parseFloat(c) / 100, [0, 1]); + } + ); + data.unshift(h); + if (typeof a !== 'undefined') { + data.push(this.adjust(parseFloat(a), [0, 1])); + } + } + return data; + } + + /** + * @function Zondy.LevelRenderer.Tool.Color.prototype.alpha + * @description 设置颜色透明度 + * @param {string} color - 颜色。 + * @param {number} a - 透明度,区间[0,1]。 + * @returns {string} rgba颜色值 + */ + alpha(color, a) { + if (!this.isCalculableColor(color)) { + return color; + } + if (a === null) { + a = 1; + } + var data = this.getData(this.toRGBA(color)); + data[3] = this.adjust(Number(a).toFixed(4), [0, 1]); + + return this.toColor(data, 'rgba'); + } + + /** + * @function Zondy.LevelRenderer.Tool.Color.prototype.map + * @description 数组映射 + * @param {Array} array - 数组。 + * @param {function} fun - 函数。 + * @returns {string} 数组映射结果 + */ + map(array, fun) { + if (typeof fun !== 'function') { + throw new TypeError(); + } + var len = array ? array.length : 0; + for (var i = 0; i < len; i++) { + array[i] = fun(array[i]); + } + return array; + } + + /** + * @function Zondy.LevelRenderer.Tool.Color.prototype.adjust + * @description 调整值区间 + * @param {Array.} value - 数组。 + * @param {Array.} region - 区间。 + * @returns {number} 调整后的值 + */ + adjust(value, region) { + // < to <= & > to >= + // modify by linzhifeng 2014-05-25 because -0 == 0 + if (value <= region[0]) { + value = region[0]; + } else if (value >= region[1]) { + value = region[1]; + } + return value; + } + + /** + * @function Zondy.LevelRenderer.Tool.Color.prototype.isCalculableColor + * @description 判断是否是可计算的颜色 + * @param {string} color - 颜色。 + * @returns {boolean} 是否是可计算的颜色 + */ + isCalculableColor(color) { + return color instanceof Array || typeof color === 'string'; + } + + /** + * @function Zondy.LevelRenderer.Tool.Color.prototype._HSV_2_RGB。参见{@link http://www.easyrgb.com/index.php?X=MATH} + */ + _HSV_2_RGB(data) { + var H = data[0]; + var S = data[1]; + var V = data[2]; + // HSV from 0 to 1 + var R; + var G; + var B; + if (S === 0) { + R = V * 255; + G = V * 255; + B = V * 255; + } else { + var h = H * 6; + if (h === 6) { + h = 0; + } + var i = h | 0; + var v1 = V * (1 - S); + var v2 = V * (1 - S * (h - i)); + var v3 = V * (1 - S * (1 - (h - i))); + var r = 0; + var g = 0; + var b = 0; + + if (i === 0) { + r = V; + g = v3; + b = v1; + } else if (i === 1) { + r = v2; + g = V; + b = v1; + } else if (i === 2) { + r = v1; + g = V; + b = v3; + } else if (i === 3) { + r = v1; + g = v2; + b = V; + } else if (i === 4) { + r = v3; + g = v1; + b = V; + } else { + r = V; + g = v1; + b = v2; + } + + // RGB results from 0 to 255 + R = r * 255; + G = g * 255; + B = b * 255; + } + return [R, G, B]; + } + + /** + * @function Zondy.LevelRenderer.Tool.Color.prototype._HSL_2_RGB。参见{@link http://www.easyrgb.com/index.php?X=MATH} + */ + _HSL_2_RGB(data) { + var H = data[0]; + var S = data[1]; + var L = data[2]; + // HSL from 0 to 1 + var R; + var G; + var B; + if (S === 0) { + R = L * 255; + G = L * 255; + B = L * 255; + } else { + var v2; + if (L < 0.5) { + v2 = L * (1 + S); + } else { + v2 = (L + S) - (S * L); + } + + var v1 = 2 * L - v2; + + R = 255 * this._HUE_2_RGB(v1, v2, H + (1 / 3)); + G = 255 * this._HUE_2_RGB(v1, v2, H); + B = 255 * this._HUE_2_RGB(v1, v2, H - (1 / 3)); + } + return [R, G, B]; + } + + /** + * @function Zondy.LevelRenderer.Tool.Color.prototype._HUE_2_RGB。参见{@link http://www.easyrgb.com/index.php?X=MATH} + */ + _HUE_2_RGB(v1, v2, vH) { + if (vH < 0) { + vH += 1; + } + if (vH > 1) { + vH -= 1; + } + if ((6 * vH) < 1) { + return (v1 + (v2 - v1) * 6 * vH); + } + if ((2 * vH) < 1) { + return (v2); + } + if ((3 * vH) < 2) { + return (v1 + (v2 - v1) * ((2 / 3) - vH) * 6); + } + return v1; + } + + /** + * @function Zondy.LevelRenderer.Tool.Color.prototype._RGB_2_HSB。参见{@link http://www.easyrgb.com/index.php?X=MATH} + */ + _RGB_2_HSB(data) { + // RGB from 0 to 255 + var R = (data[0] / 255); + var G = (data[1] / 255); + var B = (data[2] / 255); + + var vMin = Math.min(R, G, B); // Min. value of RGB + var vMax = Math.max(R, G, B); // Max. value of RGB + var delta = vMax - vMin; // Delta RGB value + var V = vMax; + var H; + var S; + + // HSV results from 0 to 1 + if (delta === 0) { + H = 0; + S = 0; + } else { + S = delta / vMax; + + var deltaR = (((vMax - R) / 6) + (delta / 2)) / delta; + var deltaG = (((vMax - G) / 6) + (delta / 2)) / delta; + var deltaB = (((vMax - B) / 6) + (delta / 2)) / delta; + + if (R === vMax) { + H = deltaB - deltaG; + } else if (G === vMax) { + H = (1 / 3) + deltaR - deltaB; + } else if (B === vMax) { + H = (2 / 3) + deltaG - deltaR; + } + + if (H < 0) { + H += 1; + } + if (H > 1) { + H -= 1; + } + } + H = H * 360; + S = S * 100; + V = V * 100; + return [H, S, V]; + } + + /** + * @function Zondy.LevelRenderer.Tool.Color.prototype._RGB_2_HSL。参见{@link http://www.easyrgb.com/index.php?X=MATH} + */ + _RGB_2_HSL(data) { + + // RGB from 0 to 255 + var R = (data[0] / 255); + var G = (data[1] / 255); + var B = (data[2] / 255); + + var vMin = Math.min(R, G, B); // Min. value of RGB + var vMax = Math.max(R, G, B); // Max. value of RGB + var delta = vMax - vMin; // Delta RGB value + + var L = (vMax + vMin) / 2; + var H; + var S; + // HSL results from 0 to 1 + if (delta === 0) { + H = 0; + S = 0; + } else { + if (L < 0.5) { + S = delta / (vMax + vMin); + } else { + S = delta / (2 - vMax - vMin); + } + + var deltaR = (((vMax - R) / 6) + (delta / 2)) / delta; + var deltaG = (((vMax - G) / 6) + (delta / 2)) / delta; + var deltaB = (((vMax - B) / 6) + (delta / 2)) / delta; + + if (R === vMax) { + H = deltaB - deltaG; + } else if (G === vMax) { + H = (1 / 3) + deltaR - deltaB; + } else if (B === vMax) { + H = (2 / 3) + deltaG - deltaR; + } + + if (H < 0) { + H += 1; + } + + if (H > 1) { + H -= 1; + } + } + + H = H * 360; + S = S * 100; + L = L * 100; + + return [H, S, L]; + } +} + +export {Color}; +Zondy.LevelRenderer.Tool.Color = Color; \ No newline at end of file diff --git a/src/mapboxgl/theme/common/overlay/levelRender/ComputeBoundingBox.js b/src/mapboxgl/theme/common/overlay/levelRender/ComputeBoundingBox.js new file mode 100644 index 000000000..171d8565c --- /dev/null +++ b/src/mapboxgl/theme/common/overlay/levelRender/ComputeBoundingBox.js @@ -0,0 +1,206 @@ +import { Common } from '@mapgis/webclient-es6-service'; +const { Zondy } = Common; +import {Curve as LevelRendererCurve} from './Curve'; +import {Vector as LevelRendererVector} from './Vector'; + +/** + * @private + * @class Zondy.LevelRenderer.Tool.ComputeBoundingBox + * @classdesc LevelRenderer 工具-图形 Bounds 计算 + */ +class ComputeBoundingBox { + + /** + * @function Zondy.LevelRenderer.Tool.ComputeBoundingBox.prototype.constructor + * @description 构造函数。 + */ + constructor() { + if (arguments.length === 3) { + this.computeBoundingBox(arguments); + } + + this.CLASS_NAME = "Zondy.LevelRenderer.Tool.ComputeBoundingBox"; + } + + /** + * @function Zondy.LevelRenderer.Tool.ComputeBoundingBox.prototype.computeBoundingBox + * @description 从顶点数组中计算出最小包围盒，写入'min'和'max'中。 + * @param {Array.} points - 顶点数组。 + * @param {Array} min - 最小 + * @param {Array} max - 最大 + */ + computeBoundingBox(points, min, max) { + if (points.length === 0) { + return; + } + var left = points[0][0]; + var right = points[0][0]; + var top = points[0][1]; + var bottom = points[0][1]; + + for (var i = 1; i < points.length; i++) { + var p = points[i]; + if (p[0] < left) { + left = p[0]; + } + if (p[0] > right) { + right = p[0]; + } + if (p[1] < top) { + top = p[1]; + } + if (p[1] > bottom) { + bottom = p[1]; + } + } + + min[0] = left; + min[1] = top; + max[0] = right; + max[1] = bottom; + } + + /** + * @function Zondy.LevelRenderer.Tool.ComputeBoundingBox.prototype.cubeBezier + * @description 从三阶贝塞尔曲线(p0, p1, p2, p3)中计算出最小包围盒，写入'min'和'max'中。原：computeCubeBezierBoundingBox。 + * @param {Array.} p0 - 三阶贝塞尔曲线p0点 + * @param {Array.} p1 - 三阶贝塞尔曲线p1点 + * @param {Array.} p2 - 三阶贝塞尔曲线p2点 + * @param {Array.} p3 - 三阶贝塞尔曲线p3点 + * @param {Array.} min - 最小 + * @param {Array.} max - 最大 + */ + cubeBezier(p0, p1, p2, p3, min, max) { + var curve = new LevelRendererCurve(); + + var xDim = []; + curve.cubicExtrema(p0[0], p1[0], p2[0], p3[0], xDim); + for (let i = 0; i < xDim.length; i++) { + xDim[i] = curve.cubicAt(p0[0], p1[0], p2[0], p3[0], xDim[i]); + } + var yDim = []; + curve.cubicExtrema(p0[1], p1[1], p2[1], p3[1], yDim); + for (let i = 0; i < yDim.length; i++) { + yDim[i] = curve.cubicAt(p0[1], p1[1], p2[1], p3[1], yDim[i]); + } + + xDim.push(p0[0], p3[0]); + yDim.push(p0[1], p3[1]); + + var left = Math.min.apply(null, xDim); + var right = Math.max.apply(null, xDim); + var top = Math.min.apply(null, yDim); + var bottom = Math.max.apply(null, yDim); + + min[0] = left; + min[1] = top; + max[0] = right; + max[1] = bottom; + } + + /** + * @function Zondy.LevelRenderer.Tool.ComputeBoundingBox.prototype.quadraticBezier + * @description 从二阶贝塞尔曲线(p0, p1, p2)中计算出最小包围盒，写入'min'和'max'中。原：computeQuadraticBezierBoundingBox。 + * @param {Array.} p0 - 二阶贝塞尔曲线p0点 + * @param {Array.} p1 - 二阶贝塞尔曲线p1点 + * @param {Array.} p2 - 二阶贝塞尔曲线p2点 + * @param {Array.} min - 最小 + * @param {Array.} max - 最大 + */ + quadraticBezier(p0, p1, p2, min, max) { + var curve = new LevelRendererCurve(); + + // Find extremities, where derivative in x dim or y dim is zero + var t1 = curve.quadraticExtremum(p0[0], p1[0], p2[0]); + var t2 = curve.quadraticExtremum(p0[1], p1[1], p2[1]); + + t1 = Math.max(Math.min(t1, 1), 0); + t2 = Math.max(Math.min(t2, 1), 0); + + var ct1 = 1 - t1; + var ct2 = 1 - t2; + + var x1 = ct1 * ct1 * p0[0] + + 2 * ct1 * t1 * p1[0] + + t1 * t1 * p2[0]; + var y1 = ct1 * ct1 * p0[1] + + 2 * ct1 * t1 * p1[1] + + t1 * t1 * p2[1]; + + var x2 = ct2 * ct2 * p0[0] + + 2 * ct2 * t2 * p1[0] + + t2 * t2 * p2[0]; + var y2 = ct2 * ct2 * p0[1] + + 2 * ct2 * t2 * p1[1] + + t2 * t2 * p2[1]; + min[0] = Math.min(p0[0], p2[0], x1, x2); + min[1] = Math.min(p0[1], p2[1], y1, y2); + max[0] = Math.max(p0[0], p2[0], x1, x2); + max[1] = Math.max(p0[1], p2[1], y1, y2); + } + + /** + * @function Zondy.LevelRenderer.Tool.ComputeBoundingBox.prototype.arc + * @description 从圆弧中计算出最小包围盒，写入'min'和'max'中。原：computeArcBoundingBox。 + * @param {number} x - 圆弧中心点 x + * @param {number} y - 圆弧中心点 y + * @param {number} r - 圆弧半径 + * @param {number} startAngle - 圆弧开始角度 + * @param {number} endAngle - 圆弧结束角度 + * @param {number} anticlockwise - 是否是顺时针 + * @param {number} min - 最小 + * @param {number} max - 最大 + */ + arc(x, y, r, startAngle, endAngle, anticlockwise, min, max) { + var vec2 = new LevelRendererVector(); + + var start = vec2.create(); + var end = vec2.create(); + var extremity = vec2.create(); + + start[0] = Math.cos(startAngle) * r + x; + start[1] = Math.sin(startAngle) * r + y; + + end[0] = Math.cos(endAngle) * r + x; + end[1] = Math.sin(endAngle) * r + y; + + vec2.min(min, start, end); + vec2.max(max, start, end); + + // Thresh to [0, Math.PI * 2] + startAngle = startAngle % (Math.PI * 2); + if (startAngle < 0) { + startAngle = startAngle + Math.PI * 2; + } + endAngle = endAngle % (Math.PI * 2); + if (endAngle < 0) { + endAngle = endAngle + Math.PI * 2; + } + + if (startAngle > endAngle && !anticlockwise) { + endAngle += Math.PI * 2; + } else if (startAngle < endAngle && anticlockwise) { + startAngle += Math.PI * 2; + } + if (anticlockwise) { + var tmp = endAngle; + endAngle = startAngle; + startAngle = tmp; + } + + // var number = 0; + // var step = (anticlockwise ? -Math.PI : Math.PI) / 2; + for (var angle = 0; angle < endAngle; angle += Math.PI / 2) { + if (angle > startAngle) { + extremity[0] = Math.cos(angle) * r + x; + extremity[1] = Math.sin(angle) * r + y; + + vec2.min(min, extremity, min); + vec2.max(max, extremity, max); + } + } + } +} + +export {ComputeBoundingBox}; +Zondy.LevelRenderer.Tool.ComputeBoundingBox = ComputeBoundingBox; \ No newline at end of file diff --git a/src/mapboxgl/theme/common/overlay/levelRender/Config.js b/src/mapboxgl/theme/common/overlay/levelRender/Config.js new file mode 100644 index 000000000..00a90115e --- /dev/null +++ b/src/mapboxgl/theme/common/overlay/levelRender/Config.js @@ -0,0 +1,88 @@ +import { Common } from '@mapgis/webclient-es6-service'; +const { Zondy } = Common; +class Config { + +} +/** + * @private + * @enum EVENT + * @description 事件 + * @type {Object} + */ +Config.EVENT = { + //窗口大小变化 + RESIZE: 'resize', + + //鼠标按钮被（手指）按下，事件对象是：目标图形元素或空 + CLICK: 'click', + + //双击事件 + DBLCLICK: 'dblclick', + + //鼠标滚轮变化，事件对象是：目标图形元素或空 + MOUSEWHEEL: 'mousewheel', + + //鼠标（手指）被移动，事件对象是：目标图形元素或空 + MOUSEMOVE: 'mousemove', + + //鼠标移到某图形元素之上，事件对象是：目标图形元素 + MOUSEOVER: 'mouseover', + + //鼠标从某图形元素移开，事件对象是：目标图形元素 + MOUSEOUT: 'mouseout', + + //鼠标按钮（手指）被按下，事件对象是：目标图形元素或空 + MOUSEDOWN: 'mousedown', + + //鼠标按键（手指）被松开，事件对象是：目标图形元素或空 + MOUSEUP: 'mouseup', + + //全局离开，MOUSEOUT触发比较频繁，一次离开优化绑定 + GLOBALOUT: 'globalout', + + // 一次成功元素拖拽的行为事件过程是： + // dragstart > dragenter > dragover [> dragleave] > drop > dragend + + //开始拖拽时触发，事件对象是：被拖拽图形元素 + DRAGSTART: 'dragstart', + + //拖拽完毕时触发（在drop之后触发），事件对象是：被拖拽图形元素 + DRAGEND: 'dragend', + + //拖拽图形元素进入目标图形元素时触发，事件对象是：目标图形元素 + DRAGENTER: 'dragenter', + + //拖拽图形元素在目标图形元素上移动时触发，事件对象是：目标图形元素 + DRAGOVER: 'dragover', + + //拖拽图形元素离开目标图形元素时触发，事件对象是：目标图形元素 + DRAGLEAVE: 'dragleave', + + //拖拽图形元素放在目标图形元素内时触发，事件对象是：目标图形元素 + DROP: 'drop', + + //touch end - start < delay is click + touchClickDelay: 300 +}; + +/** + * @private + * @enum catchBrushException + * @description 是否异常捕获 + * @type {boolean} + */ +Config.catchBrushException = false; + +/** + * @private + * @enum debugMode + * @description debug 日志选项：catchBrushException 为 true 下有效。 + * 0 : 不生成debug数据，发布用 + * 1 : 异常抛出，调试用 + * 2 : 控制台输出，调试用 + * @type {boolean} + */ +Config.debugMode = 0; + +export { Config }; +Zondy.LevelRenderer.Config = Config; \ No newline at end of file diff --git a/src/mapboxgl/theme/common/overlay/levelRender/Curve.js b/src/mapboxgl/theme/common/overlay/levelRender/Curve.js new file mode 100644 index 000000000..23bfb7146 --- /dev/null +++ b/src/mapboxgl/theme/common/overlay/levelRender/Curve.js @@ -0,0 +1,524 @@ +import { Common } from '@mapgis/webclient-es6-service'; +const { Zondy } = Common; +import {Vector as LevelRendererVector} from './Vector'; + +/** + * @private + * @class Zondy.LevelRenderer.Tool.Curve + * @classdesc LevelRenderer 工具-曲线 + */ +class Curve { + + /** + * @function Zondy.LevelRenderer.Tool.Curve.prototype.constructor + * @description 构造函数。 + */ + constructor() { + /** + * @member {Zondy.LevelRenderer.Tool.Vector} Zondy.LevelRenderer.Tool.Curve.prototype.vector + * @description 矢量工具。 + */ + this.vector = new LevelRendererVector(); + + /** + * @member {number} Zondy.LevelRenderer.Tool.Curve.prototype.EPSILON + * @description e。 + */ + this.EPSILON = 1e-4; + + /** + * @member {number} Zondy.LevelRenderer.Tool.Curve.prototype.THREE_SQRT + * @description 3 的平方根。 + */ + this.THREE_SQRT = Math.sqrt(3); + + /** + * @member {number} Zondy.LevelRenderer.Tool.Curve.prototype.ONE_THIRD + * @description 1/3。 + */ + this.ONE_THIRD = 1 / 3; + + this.CLASS_NAME = "Zondy.LevelRenderer.Tool.Curve"; + } + + /** + * @function Zondy.LevelRenderer.Tool.Curve.prototype.isAroundZero + * @description 判断一个值是否趋于0，判断参考值：1e-4。 + * @param {number} val - 值。 + * @returns {boolean} 值是否趋于0。 + */ + isAroundZero(val) { + return val > -this.EPSILON && val < this.EPSILON; + } + + + /** + * @function Zondy.LevelRenderer.Tool.Curve.prototype.isNotAroundZero + * @description 判断一个值是否不趋于0，判断参考值：1e-4。 + * @param {number} val - 值。 + * @returns {boolean} 值是否不趋于0。 + */ + isNotAroundZero(val) { + return val > this.EPSILON || val < -this.EPSILON; + } + + + /** + * @function Zondy.LevelRenderer.Tool.Curve.prototype.cubicAt + * @description 计算三次贝塞尔值 + * @param {number} p0 - 点p0。 + * @param {number} p1 - 点p1。 + * @param {number} p2 - 点p2。 + * @param {number} p3 - 点p3。 + * @param {number} t - t值。 + * @returns {number} 三次贝塞尔值。 + */ + cubicAt(p0, p1, p2, p3, t) { + var onet = 1 - t; + return onet * onet * (onet * p0 + 3 * t * p1) + + t * t * (t * p3 + 3 * onet * p2); + } + + + /** + * @function Zondy.LevelRenderer.Tool.Curve.prototype.cubicDerivativeAt + * @description 计算三次贝塞尔导数值 + * @param {number} p0 - 点p0。 + * @param {number} p1 - 点p1。 + * @param {number} p2 - 点p2。 + * @param {number} p3 - 点p3。 + * @param {number} t - t值。 + * @returns {number} 三次贝塞尔导数值。 + */ + cubicDerivativeAt(p0, p1, p2, p3, t) { + var onet = 1 - t; + return 3 * ( + ((p1 - p0) * onet + 2 * (p2 - p1) * t) * onet + + (p3 - p2) * t * t + ); + } + + + /** + * @function Zondy.LevelRenderer.Tool.Curve.prototype.cubicRootAt + * @description 计算三次贝塞尔方程根，使用盛金公式 + * @param {number} p0 - 点p0。 + * @param {number} p1 - 点p1。 + * @param {number} p2 - 点p2。 + * @param {number} p3 - 点p3。 + * @param {number} val - 值。 + * @param {Array.} roots - 有效根数目。 + * @returns {number} 有效根。 + */ + cubicRootAt(p0, p1, p2, p3, val, roots) { + // Evaluate roots of cubic functions + var a = p3 + 3 * (p1 - p2) - p0; + var b = 3 * (p2 - p1 * 2 + p0); + var c = 3 * (p1 - p0); + var d = p0 - val; + + var A = b * b - 3 * a * c; + var B = b * c - 9 * a * d; + var C = c * c - 3 * b * d; + + var n = 0; + + if (this.isAroundZero(A) && this.isAroundZero(B)) { + if (this.isAroundZero(b)) { + roots[0] = 0; + } else { + let t1 = -c / b; //t1, t2, t3, b is not zero + if (t1 >= 0 && t1 <= 1) { + roots[n++] = t1; + } + } + } else { + var disc = B * B - 4 * A * C; + + if (this.isAroundZero(disc)) { + var K = B / A; + let t1 = -b / a + K; // t1, a is not zero + let t2 = -K / 2; // t2, t3 + if (t1 >= 0 && t1 <= 1) { + roots[n++] = t1; + } + if (t2 >= 0 && t2 <= 1) { + roots[n++] = t2; + } + } else if (disc > 0) { + let discSqrt = Math.sqrt(disc); + let Y1 = A * b + 1.5 * a * (-B + discSqrt); + let Y2 = A * b + 1.5 * a * (-B - discSqrt); + if (Y1 < 0) { + Y1 = -Math.pow(-Y1, this.ONE_THIRD); + } else { + Y1 = Math.pow(Y1, this.ONE_THIRD); + } + if (Y2 < 0) { + Y2 = -Math.pow(-Y2, this.ONE_THIRD); + } else { + Y2 = Math.pow(Y2, this.ONE_THIRD); + } + let t1 = (-b - (Y1 + Y2)) / (3 * a); + if (t1 >= 0 && t1 <= 1) { + roots[n++] = t1; + } + } else { + var T = (2 * A * b - 3 * a * B) / (2 * Math.sqrt(A * A * A)); + var theta = Math.acos(T) / 3; + var ASqrt = Math.sqrt(A); + var tmp = Math.cos(theta); + + let t1 = (-b - 2 * ASqrt * tmp) / (3 * a); + let t2 = (-b + ASqrt * (tmp + this.THREE_SQRT * Math.sin(theta))) / (3 * a); + let t3 = (-b + ASqrt * (tmp - this.THREE_SQRT * Math.sin(theta))) / (3 * a); + if (t1 >= 0 && t1 <= 1) { + roots[n++] = t1; + } + if (t2 >= 0 && t2 <= 1) { + roots[n++] = t2; + } + if (t3 >= 0 && t3 <= 1) { + roots[n++] = t3; + } + } + } + return n; + } + + + /** + * @function Zondy.LevelRenderer.Tool.Curve.prototype.cubicRootAt + * @description 计算三次贝塞尔方程极限值的位置 + * @param {number} p0 - 点p0。 + * @param {number} p1 - 点p1。 + * @param {number} p2 - 点p2。 + * @param {number} p3 - 点p3。 + * @param {Array.} extrema - 值。 + * @returns {number} 有效数目。 + */ + cubicExtrema(p0, p1, p2, p3, extrema) { + var b = 6 * p2 - 12 * p1 + 6 * p0; + var a = 9 * p1 + 3 * p3 - 3 * p0 - 9 * p2; + var c = 3 * p1 - 3 * p0; + + var n = 0; + if (this.isAroundZero(a)) { + if (this.isNotAroundZero(b)) { + let t1 = -c / b; + if (t1 >= 0 && t1 <= 1) { + extrema[n++] = t1; + } + } + } else { + var disc = b * b - 4 * a * c; + if (this.isAroundZero(disc)) { + extrema[0] = -b / (2 * a); + } else if (disc > 0) { + let discSqrt = Math.sqrt(disc); + let t1 = (-b + discSqrt) / (2 * a); + let t2 = (-b - discSqrt) / (2 * a); + if (t1 >= 0 && t1 <= 1) { + extrema[n++] = t1; + } + if (t2 >= 0 && t2 <= 1) { + extrema[n++] = t2; + } + } + } + return n; + } + + + /** + * @function Zondy.LevelRenderer.Tool.Curve.prototype.cubicSubdivide + * @description 细分三次贝塞尔曲线 + * @param {number} p0 - 点p0。 + * @param {number} p1 - 点p1。 + * @param {number} p2 - 点p2。 + * @param {number} p3 - 点p3。 + * @param {number} t - t值。 + * @param {Array.} out - 投射点。 + * @returns {number} 投射点。 + */ + cubicSubdivide(p0, p1, p2, p3, t, out) { + var p01 = (p1 - p0) * t + p0; + var p12 = (p2 - p1) * t + p1; + var p23 = (p3 - p2) * t + p2; + + var p012 = (p12 - p01) * t + p01; + var p123 = (p23 - p12) * t + p12; + + var p0123 = (p123 - p012) * t + p012; + // Seg0 + out[0] = p0; + out[1] = p01; + out[2] = p012; + out[3] = p0123; + // Seg1 + out[4] = p0123; + out[5] = p123; + out[6] = p23; + out[7] = p3; + } + + + /** + * @function Zondy.LevelRenderer.Tool.Curve.prototype.cubicProjectPoint + * @description 投射点到三次贝塞尔曲线上，返回投射距离。投射点有可能会有一个或者多个，这里只返回其中距离最短的一个。 + * @param {number} x0 - 点p0横坐标。 + * @param {number} y0 - 点p0纵坐标。 + * @param {number} x1 - 点p1横坐标。 + * @param {number} y1 - 点p1纵坐标。 + * @param {number} x2 - 点p2横坐标。 + * @param {number} y2 - 点p2纵坐标。 + * @param {number} x3 - 点p3横坐标。 + * @param {number} y3 - 点p3纵坐标。 + * @param {number} x - 点p横坐标。 + * @param {number} y - 点p纵坐标。 + * @param {Array.} out - 投射点。 + * @returns {number} 投射点。 + */ + cubicProjectPoint(x0, y0, x1, y1, x2, y2, x3, y3, x, y, out) { + // 临时变量 + var _v0 = this.vector.create(); + var _v1 = this.vector.create(); + var _v2 = this.vector.create(); + // var _v3 = vector.create(); + + // http://pomax.github.io/bezierinfo/#projections + var t; + var interval = 0.005; + var d = Infinity; + + _v0[0] = x; + _v0[1] = y; + + // 先粗略估计一下可能的最小距离的 t 值 + // PENDING + for (let _t = 0; _t < 1; _t += 0.05) { + _v1[0] = this.cubicAt(x0, x1, x2, x3, _t); + _v1[1] = this.cubicAt(y0, y1, y2, y3, _t); + let d1 = this.vector.distSquare(_v0, _v1); + if (d1 < d) { + t = _t; + d = d1; + } + } + d = Infinity; + + // At most 32 iteration + for (let i = 0; i < 32; i++) { + if (interval < this.EPSILON) { + break; + } + let prev = t - interval; + let next = t + interval; + // t - interval + _v1[0] = this.cubicAt(x0, x1, x2, x3, prev); + _v1[1] = this.cubicAt(y0, y1, y2, y3, prev); + + let d1 = this.vector.distSquare(_v1, _v0); + + if (prev >= 0 && d1 < d) { + t = prev; + d = d1; + } else { + // t + interval + _v2[0] = this.cubicAt(x0, x1, x2, x3, next); + _v2[1] = this.cubicAt(y0, y1, y2, y3, next); + let d2 = this.vector.distSquare(_v2, _v0); + + if (next <= 1 && d2 < d) { + t = next; + d = d2; + } else { + interval *= 0.5; + } + } + } + // t + if (out) { + out[0] = this.cubicAt(x0, x1, x2, x3, t); + out[1] = this.cubicAt(y0, y1, y2, y3, t); + } + // console.log(interval, i); + return Math.sqrt(d); + } + + + /** + * @function Zondy.LevelRenderer.Tool.Curve.prototype.quadraticAt + * @description 计算二次方贝塞尔值。 + * @param {number} p0 - 点p0。 + * @param {number} p1 - 点p1。 + * @param {number} p2 - 点p2。 + * @param {number} t - t值。 + * @returns {number} 二次方贝塞尔值。 + */ + quadraticAt(p0, p1, p2, t) { + var onet = 1 - t; + return onet * (onet * p0 + 2 * t * p1) + t * t * p2; + } + + + /** + * @function Zondy.LevelRenderer.Tool.Curve.prototype.quadraticAt + * @description 计算二次方贝塞尔导数值。 + * @param {number} p0 - 点p0。 + * @param {number} p1 - 点p1。 + * @param {number} p2 - 点p2。 + * @param {number} t - t值。 + * @returns {number} 二次方贝塞尔导数值。 + */ + quadraticDerivativeAt(p0, p1, p2, t) { + return 2 * ((1 - t) * (p1 - p0) + t * (p2 - p1)); + } + + + /** + * @function Zondy.LevelRenderer.Tool.Curve.prototype.quadraticRootAt + * @description 计算二次方贝塞尔方程根 + * @param {number} p0 - 点p0。 + * @param {number} p1 - 点p1。 + * @param {number} p2 - 点p2。 + * @param {number} val - 值。 + * @param {Array.} roots - 有效根数目。 + * @returns {number} 有效根数目。 + */ + quadraticRootAt(p0, p1, p2, val, roots) { + var a = p0 - 2 * p1 + p2; + var b = 2 * (p1 - p0); + var c = p0 - val; + + var n = 0; + if (this.isAroundZero(a)) { + if (this.isNotAroundZero(b)) { + var t1 = -c / b; + if (t1 >= 0 && t1 <= 1) { + roots[n++] = t1; + } + } + } else { + var disc = b * b - 4 * a * c; + if (this.isAroundZero(disc)) { + let t1 = -b / (2 * a); + if (t1 >= 0 && t1 <= 1) { + roots[n++] = t1; + } + } else if (disc > 0) { + let discSqrt = Math.sqrt(disc); + let t1 = (-b + discSqrt) / (2 * a); + let t2 = (-b - discSqrt) / (2 * a); + if (t1 >= 0 && t1 <= 1) { + roots[n++] = t1; + } + if (t2 >= 0 && t2 <= 1) { + roots[n++] = t2; + } + } + } + return n; + } + + + /** + * @function Zondy.LevelRenderer.Tool.Curve.prototype.quadraticExtremum + * @description 计算二次贝塞尔方程极限值 + * @param {number} p0 - 点p0。 + * @param {number} p1 - 点p1。 + * @param {number} p2 - 点p2。 + * @returns {number} 二次贝塞尔方程极限值。 + */ + quadraticExtremum(p0, p1, p2) { + var divider = p0 + p2 - 2 * p1; + if (divider === 0) { + // p1 is center of p0 and p2 + return 0.5; + } else { + return (p0 - p1) / divider; + } + } + + /** + * @function Zondy.LevelRenderer.Tool.Curve.prototype.quadraticProjectPoint + * @description 投射点到二次贝塞尔曲线上，返回投射距离。投射点有可能会有一个或者多个，这里只返回其中距离最短的一个。 + * @param {number} x0 - 点p0横坐标。 + * @param {number} y0 - 点p0纵坐标。 + * @param {number} x1 - 点p1横坐标。 + * @param {number} y1 - 点p1纵坐标。 + * @param {number} x2 - 点p2横坐标。 + * @param {number} y2 - 点p2纵坐标。 + * @param {number} x - 点p横坐标。 + * @param {number} y - 点p纵坐标。 + * @param {Array.} out - 投射点。 + * @returns {number} 投射距离。 + */ + quadraticProjectPoint(x0, y0, x1, y1, x2, y2, x, y, out) { + // 临时变量 + var _v0 = this.vector.create(); + var _v1 = this.vector.create(); + var _v2 = this.vector.create(); + + // http://pomax.github.io/bezierinfo/#projections + var t; + var interval = 0.005; + var d = Infinity; + + _v0[0] = x; + _v0[1] = y; + + // 先粗略估计一下可能的最小距离的 t 值 + // PENDING + for (let _t = 0; _t < 1; _t += 0.05) { + _v1[0] = this.quadraticAt(x0, x1, x2, _t); + _v1[1] = this.quadraticAt(y0, y1, y2, _t); + let d1 = this.vector.distSquare(_v0, _v1); + if (d1 < d) { + t = _t; + d = d1; + } + } + d = Infinity; + + // At most 32 iteration + for (let i = 0; i < 32; i++) { + if (interval < this.EPSILON) { + break; + } + let prev = t - interval; + let next = t + interval; + // t - interval + _v1[0] = this.quadraticAt(x0, x1, x2, prev); + _v1[1] = this.quadraticAt(y0, y1, y2, prev); + + let d1 = this.vector.distSquare(_v1, _v0); + + if (prev >= 0 && d1 < d) { + t = prev; + d = d1; + } else { + // t + interval + _v2[0] = this.quadraticAt(x0, x1, x2, next); + _v2[1] = this.quadraticAt(y0, y1, y2, next); + let d2 = this.vector.distSquare(_v2, _v0); + if (next <= 1 && d2 < d) { + t = next; + d = d2; + } else { + interval *= 0.5; + } + } + } + // t + if (out) { + out[0] = this.quadraticAt(x0, x1, x2, t); + out[1] = this.quadraticAt(y0, y1, y2, t); + } + // console.log(interval, i); + return Math.sqrt(d); + } +} + +export {Curve}; +Zondy.LevelRenderer.Tool.Curve = Curve; \ No newline at end of file diff --git a/src/mapboxgl/theme/common/overlay/levelRender/Easing.js b/src/mapboxgl/theme/common/overlay/levelRender/Easing.js new file mode 100644 index 000000000..9d5957fe0 --- /dev/null +++ b/src/mapboxgl/theme/common/overlay/levelRender/Easing.js @@ -0,0 +1,440 @@ +import { Common } from '@mapgis/webclient-es6-service'; +const { Zondy } = Common; + +/** + * @private + * @class Zondy.LevelRenderer.Animation.Easing + * @classdesc 缓动 + */ +class Easing { + + /** + * @function Zondy.LevelRenderer.Animation.Easing.prototype.constructor + * @description 构造函数。 + */ + constructor() { + this.CLASS_NAME = "Zondy.LevelRenderer.Animation.Easing"; + } + + /** + * @function Zondy.LevelRenderer.Animation.Easing.prototype.destroy + * @description 销毁对象，释放资源。调用此函数后所有属性将被置为 null。 + */ + destroy() { + + } + + /** + * @function Zondy.LevelRenderer.Animation.Easing.prototype.Linear + * @description 线性缓动 + * @param {number} k - 参数 + * @return {number} 输入值 + */ + Linear(k) { + return k; + } + + /** + * @function Zondy.LevelRenderer.Animation.Easing.prototype.QuadraticIn + * @description 二次方的缓动（t^2） + * @param {number} k - 参数 + * @return {number} 二次方的缓动的值 + */ + QuadraticIn(k) { + return k * k; + } + + /** + * @function Zondy.LevelRenderer.Animation.Easing.prototype.QuadraticOut + * @description 返回按二次方缓动退出的值 + * @param {number} k - 参数 + * @return {number} 按二次方缓动退出的值 + */ + QuadraticOut(k) { + return k * (2 - k); + } + + /** + * @function Zondy.LevelRenderer.Animation.Easing.prototype.QuadraticInOut + * @description 返回按二次方缓动进入和退出的值 + * @param {number} k - 参数 + * @return {number} 按二次方缓动进入和退出的值 + */ + QuadraticInOut(k) { + if ((k *= 2) < 1) { + return 0.5 * k * k; + } + return -0.5 * (--k * (k - 2) - 1); + } + + /** + * @function Zondy.LevelRenderer.Animation.Easing.prototype.CubicIn + * @description 三次方的缓动（t^3） + * @param {number} k - 参数 + * @return {number} 按三次方缓动的值 + */ + CubicIn(k) { + return k * k * k; + } + + /** + * @function Zondy.LevelRenderer.Animation.Easing.prototype.CubicOut + * @description 返回按三次方缓动退出的值 + * @param {number} k - 参数 + * @return {number} 按三次方缓动退出的值 + */ + CubicOut(k) { + return --k * k * k + 1; + } + + /** + * @function Zondy.LevelRenderer.Animation.Easing.prototype.CubicInOut + * @description 返回按三次方缓动进入退出的值 + * @param {number} k - 参数 + * @return {number} 按三次方缓动进入退出的值 + */ + CubicInOut(k) { + if ((k *= 2) < 1) { + return 0.5 * k * k * k; + } + return 0.5 * ((k -= 2) * k * k + 2); + } + + /** + * @function Zondy.LevelRenderer.Animation.Easing.prototype.QuarticIn + * @description 返回按四次方缓动进入的值 + * @param {number} k - 参数 + * @return {number} 按四次方缓动进入的值 + */ + QuarticIn(k) { + return k * k * k * k; + } + + /** + * @function Zondy.LevelRenderer.Animation.Easing.prototype.QuarticOut + * @description 返回按四次方缓动退出的值 + * @param {number} k - 参数 + * @return {number} 按四次方缓动退出的值 + */ + QuarticOut(k) { + return 1 - (--k * k * k * k); + } + + /** + * @function Zondy.LevelRenderer.Animation.Easing.prototype.QuarticInOut + * @description 返回按四次方缓动进入退出的值 + * @param {number} k - 参数 + * @return {number} 按四次方缓动进入退出的值 + */ + QuarticInOut(k) { + if ((k *= 2) < 1) { + return 0.5 * k * k * k * k; + } + return -0.5 * ((k -= 2) * k * k * k - 2); + } + + // 五次方的缓动（t^5） + /** + * @function Zondy.LevelRenderer.Animation.Easing.prototype.QuinticIn + * @description 返回按五次方缓动的值 + * @param {number} k - 参数 + * @return {number} 按五次方缓动的值 + */ + QuinticIn(k) { + return k * k * k * k * k; + } + + /** + * @function Zondy.LevelRenderer.Animation.Easing.prototype.QuinticOut + * @description 返回按五次方缓动退出的值 + * @param {number} k - 参数 + * @return {number} 按五次方缓动退出的值 + */ + QuinticOut(k) { + return --k * k * k * k * k + 1; + } + + /** + * @function Zondy.LevelRenderer.Animation.Easing.prototype.QuinticInOut + * @description 返回按五次方缓动进入退出的值 + * @param {number} k - 参数 + * @return {number} 按五次方缓动进入退出的值 + */ + QuinticInOut(k) { + if ((k *= 2) < 1) { + return 0.5 * k * k * k * k * k; + } + return 0.5 * ((k -= 2) * k * k * k * k + 2); + } + + // 正弦曲线的缓动（sin(t)） + /** + * @function Zondy.LevelRenderer.Animation.Easing.prototype.SinusoidalIn + * @description 返回按正弦曲线的缓动进入的值 + * @param {number} k - 参数 + * @return {number} 按正弦曲线的缓动进入的值 + */ + SinusoidalIn(k) { + return 1 - Math.cos(k * Math.PI / 2); + } + + /** + * @function Zondy.LevelRenderer.Animation.Easing.prototype.SinusoidalOut + * @description 返回按正弦曲线的缓动退出的值 + * @param {number} k - 参数 + * @return {number} 按正弦曲线的缓动退出的值 + */ + SinusoidalOut(k) { + return Math.sin(k * Math.PI / 2); + } + + /** + * @function Zondy.LevelRenderer.Animation.Easing.prototype.SinusoidalInOut + * @description 返回按正弦曲线的缓动进入退出的值 + * @param {number} k - 参数 + * @return {number} 按正弦曲线的缓动进入退出的值 + */ + SinusoidalInOut(k) { + return 0.5 * (1 - Math.cos(Math.PI * k)); + } + + // 指数曲线的缓动（2^t） + /** + * @function Zondy.LevelRenderer.Animation.Easing.prototype.ExponentialIn + * @description 返回按指数曲线的缓动进入的值 + * @param {number} k - 参数 + * @return {number} 按指数曲线的缓动进入的值 + */ + ExponentialIn(k) { + return k === 0 ? 0 : Math.pow(1024, k - 1); + } + + /** + * @function Zondy.LevelRenderer.Animation.Easing.prototype.ExponentialOut + * @description 返回按指数曲线的缓动退出的值 + * @param {number} k - 参数 + * @return {number} 按指数曲线的缓动退出的值 + */ + ExponentialOut(k) { + return k === 1 ? 1 : 1 - Math.pow(2, -10 * k); + } + + /** + * @function Zondy.LevelRenderer.Animation.Easing.prototype.ExponentialInOut + * @description 返回按指数曲线的缓动进入退出的值 + * @param {number} k - 参数 + * @return {number} 按指数曲线的缓动进入退出的值 + */ + ExponentialInOut(k) { + if (k === 0) { + return 0; + } + if (k === 1) { + return 1; + } + if ((k *= 2) < 1) { + return 0.5 * Math.pow(1024, k - 1); + } + return 0.5 * (-Math.pow(2, -10 * (k - 1)) + 2); + } + + // 圆形曲线的缓动（sqrt(1-t^2)） + /** + * @function Zondy.LevelRenderer.Animation.Easing.prototype.CircularIn + * @description 返回按圆形曲线的缓动进入的值 + * @param {number} k - 参数 + * @return {number} 按圆形曲线的缓动进入的值 + */ + CircularIn(k) { + return 1 - Math.sqrt(1 - k * k); + } + + /** + * @function Zondy.LevelRenderer.Animation.Easing.prototype.CircularOut + * @description 返回按圆形曲线的缓动退出的值 + * @param {number} k - 参数 + * @return {number} 按圆形曲线的缓动退出的值 + */ + CircularOut(k) { + return Math.sqrt(1 - (--k * k)); + } + + /** + * @function Zondy.LevelRenderer.Animation.Easing.prototype.CircularInOut + * @description 返回按圆形曲线的缓动进入退出的值 + * @param {number} k - 参数 + * @return {number} 按圆形曲线的缓动进入退出的值 + */ + CircularInOut(k) { + if ((k *= 2) < 1) { + return -0.5 * (Math.sqrt(1 - k * k) - 1); + } + return 0.5 * (Math.sqrt(1 - (k -= 2) * k) + 1); + } + + // 创建类似于弹簧在停止前来回振荡的动画 + /** + * @function Zondy.LevelRenderer.Animation.Easing.prototype.ElasticIn + * @description 返回按类似于弹簧在停止前来回振荡的动画的缓动进入的值 + * @param {number} k - 参数 + * @return {number} 按类似于弹簧在停止前来回振荡的动画的缓动进入的值 + */ + ElasticIn(k) { + var s; + var a = 0.1; + var p = 0.4; + if (k === 0) { + return 0; + } + if (k === 1) { + return 1; + } + if (!a || a < 1) { + a = 1; + s = p / 4; + } else { + s = p * Math.asin(1 / a) / (2 * Math.PI); + } + return -(a * Math.pow(2, 10 * (k -= 1)) * + Math.sin((k - s) * (2 * Math.PI) / p)); + } + + /** + * @function Zondy.LevelRenderer.Animation.Easing.prototype.ElasticOut + * @description 返回按类似于弹簧在停止前来回振荡的动画的缓动退出的值 + * @param {number} k - 参数 + * @return {number} 按类似于弹簧在停止前来回振荡的动画的缓动退出的值 + */ + ElasticOut(k) { + var s; + var a = 0.1; + var p = 0.4; + if (k === 0) { + return 0; + } + if (k === 1) { + return 1; + } + if (!a || a < 1) { + a = 1; + s = p / 4; + } else { + s = p * Math.asin(1 / a) / (2 * Math.PI); + } + return (a * Math.pow(2, -10 * k) * + Math.sin((k - s) * (2 * Math.PI) / p) + 1); + } + + /** + * @function Zondy.LevelRenderer.Animation.Easing.prototype.ElasticInOut + * @description 返回按类似于弹簧在停止前来回振荡的动画的缓动进入退出的值 + * @param {number} k - 参数 + * @return {number} 按类似于弹簧在停止前来回振荡的动画的缓动进入退出的值 + */ + ElasticInOut(k) { + var s; + var a = 0.1; + var p = 0.4; + if (k === 0) { + return 0; + } + if (k === 1) { + return 1; + } + if (!a || a < 1) { + a = 1; + s = p / 4; + } else { + s = p * Math.asin(1 / a) / (2 * Math.PI); + } + if ((k *= 2) < 1) { + return -0.5 * (a * Math.pow(2, 10 * (k -= 1)) + * Math.sin((k - s) * (2 * Math.PI) / p)); + } + return a * Math.pow(2, -10 * (k -= 1)) + * Math.sin((k - s) * (2 * Math.PI) / p) * 0.5 + 1; + + } + + // 在某一动画开始沿指示的路径进行动画处理前稍稍收回该动画的移动 + /** + * @function Zondy.LevelRenderer.Animation.Easing.prototype.BackIn + * @description 返回按在某一动画开始沿指示的路径进行动画处理前稍稍收回该动画的移动的缓动进入的值 + * @param {number} k - 参数 + * @return {number} 按在某一动画开始沿指示的路径进行动画处理前稍稍收回该动画的移动的缓动进入的值 + */ + BackIn(k) { + var s = 1.70158; + return k * k * ((s + 1) * k - s); + } + + /** + * @function Zondy.LevelRenderer.Animation.Easing.prototype.BackOut + * @description 返回按在某一动画开始沿指示的路径进行动画处理前稍稍收回该动画的移动的缓动退出的值 + * @param {number} k - 参数 + * @return {number} 按在某一动画开始沿指示的路径进行动画处理前稍稍收回该动画的移动的缓动退出的值 + */ + BackOut(k) { + var s = 1.70158; + return --k * k * ((s + 1) * k + s) + 1; + } + + /** + * @function Zondy.LevelRenderer.Animation.Easing.prototype.BackInOut + * @description 返回按在某一动画开始沿指示的路径进行动画处理前稍稍收回该动画的移动的缓动进入退出的值 + * @param {number} k - 参数 + * @return {number} 按在某一动画开始沿指示的路径进行动画处理前稍稍收回该动画的移动的缓动进入退出的值 + */ + BackInOut(k) { + var s = 1.70158 * 1.525; + if ((k *= 2) < 1) { + return 0.5 * (k * k * ((s + 1) * k - s)); + } + return 0.5 * ((k -= 2) * k * ((s + 1) * k + s) + 2); + } + + // 创建弹跳效果 + /** + * @function Zondy.LevelRenderer.Animation.Easing.prototype.BounceIn + * @description 返回按弹跳效果的缓动进入的值 + * @param {number} k - 参数 + * @return {number} 按弹跳效果的缓动进入的值 + */ + BounceIn(k) { + return 1 - this.BounceOut(1 - k); + } + + /** + * @function Zondy.LevelRenderer.Animation.Easing.prototype.BounceOut + * @description 返回按弹跳效果的缓动退出的值 + * @param {number} k - 参数 + * @return {number} 按弹跳效果的缓动退出的值 + */ + BounceOut(k) { + if (k < (1 / 2.75)) { + return 7.5625 * k * k; + } else if (k < (2 / 2.75)) { + return 7.5625 * (k -= (1.5 / 2.75)) * k + 0.75; + } else if (k < (2.5 / 2.75)) { + return 7.5625 * (k -= (2.25 / 2.75)) * k + 0.9375; + } else { + return 7.5625 * (k -= (2.625 / 2.75)) * k + 0.984375; + } + } + + /** + * @function Zondy.LevelRenderer.Animation.Easing.BounceInOut + * @description 返回按弹跳效果的缓动进入退出的值 + * @param {number} k - 参数 + * @return {number} 按弹跳效果的缓动进入退出的值 + */ + BounceInOut(k) { + if (k < 0.5) { + return this.BounceIn(k * 2) * 0.5; + } + return this.BounceOut(k * 2 - 1) * 0.5 + 0.5; + } +} + +export {Easing}; +Zondy.LevelRenderer.Animation.Easing = Easing; \ No newline at end of file diff --git a/src/mapboxgl/theme/common/overlay/levelRender/Env.js b/src/mapboxgl/theme/common/overlay/levelRender/Env.js new file mode 100644 index 000000000..f4940ef0b --- /dev/null +++ b/src/mapboxgl/theme/common/overlay/levelRender/Env.js @@ -0,0 +1,145 @@ +import { Common } from '@mapgis/webclient-es6-service'; +const { Zondy } = Common; + +/** + * @private + * @class Zondy.LevelRenderer.Tool.Env + * @classdesc 环境识别 + */ +class Env { + constructor() { + // Zepto.js + // (c) 2010-2013 Thomas Fuchs + // Zepto.js may be freely distributed under the MIT license. + this.CLASS_NAME = "Zondy.LevelRenderer.Tool.Env"; + var me = this; + + function detect(ua) { + var os = me.os = {}; + var browser = me.browser = {}; + var webkit = ua.match(/Web[kK]it[\/]{0,1}([\d.]+)/); + var android = ua.match(/(Android);?[\s\/]+([\d.]+)?/); + var ipad = ua.match(/(iPad).*OS\s([\d_]+)/); + var ipod = ua.match(/(iPod)(.*OS\s([\d_]+))?/); + var iphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/); + var webos = ua.match(/(webOS|hpwOS)[\s\/]([\d.]+)/); + var touchpad = webos && ua.match(/TouchPad/); + var kindle = ua.match(/Kindle\/([\d.]+)/); + var silk = ua.match(/Silk\/([\d._]+)/); + var blackberry = ua.match(/(BlackBerry).*Version\/([\d.]+)/); + var bb10 = ua.match(/(BB10).*Version\/([\d.]+)/); + var rimtabletos = ua.match(/(RIM\sTablet\sOS)\s([\d.]+)/); + var playbook = ua.match(/PlayBook/); + var chrome = ua.match(/Chrome\/([\d.]+)/) || ua.match(/CriOS\/([\d.]+)/); + var firefox = ua.match(/Firefox\/([\d.]+)/); + var ie = ua.match(/MSIE ([\d.]+)/); + var safari = webkit && ua.match(/Mobile\//) && !chrome; + var webview = ua.match(/(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/) && !chrome; + + // Todo: clean this up with a better OS/browser seperation: + // - discern (more) between multiple browsers on android + // - decide if kindle fire in silk mode is android or not + // - Firefox on Android doesn't specify the Android version + // - possibly devide in os, device and browser hashes + + /*eslint-disable*/ + if (browser.webkit = !!webkit) { + browser.version = webkit[1]; + } + + if (android) { + os.android = true; + os.version = android[2]; + } + if (iphone && !ipod) { + os.ios = os.iphone = true; + os.version = iphone[2].replace(/_/g, '.'); + } + if (ipad) { + os.ios = os.ipad = true; + os.version = ipad[2].replace(/_/g, '.'); + } + if (ipod) { + os.ios = os.ipod = true; + os.version = ipod[3] ? ipod[3].replace(/_/g, '.') : null; + } + if (webos) { + os.webos = true; + os.version = webos[2]; + } + if (touchpad) { + os.touchpad = true; + } + if (blackberry) { + os.blackberry = true; + os.version = blackberry[2]; + } + if (bb10) { + os.bb10 = true; + os.version = bb10[2]; + } + if (rimtabletos) { + os.rimtabletos = true; + os.version = rimtabletos[2]; + } + if (playbook) { + browser.playbook = true; + } + if (kindle) { + os.kindle = true; + os.version = kindle[1]; + } + if (silk) { + browser.silk = true; + browser.version = silk[1]; + } + if (!silk && os.android && ua.match(/Kindle Fire/)) { + browser.silk = true; + } + if (chrome) { + browser.chrome = true; + browser.version = chrome[1]; + } + if (firefox) { + browser.firefox = true; + browser.version = firefox[1]; + } + if (ie) { + browser.ie = true; + browser.version = ie[1]; + } + if (safari && (ua.match(/Safari/) || !!os.ios)) { + browser.safari = true; + } + if (webview) { + browser.webview = true; + } + if (ie) { + browser.ie = true; + browser.version = ie[1]; + } + + os.tablet = !!(ipad || playbook || (android && !ua.match(/Mobile/)) || + (firefox && ua.match(/Tablet/)) || (ie && !ua.match(/Phone/) && ua.match(/Touch/))); + os.phone = !!(!os.tablet && !os.ipod && (android || iphone || webos || blackberry || bb10 || + (chrome && ua.match(/Android/)) || (chrome && ua.match(/CriOS\/([\d.]+)/)) || + (firefox && ua.match(/Mobile/)) || (ie && ua.match(/Touch/)))); + + return { + browser: browser, + os: os, + // 原生canvas支持 + canvasSupported: document.createElement('canvas').getContext ? true : false + }; + } + + return detect(navigator.userAgent); + } + + destory() { + return true; + } +} + +export {Env}; +Zondy.LevelRenderer.Tool.Env = Env; \ No newline at end of file diff --git a/src/mapboxgl/theme/common/overlay/levelRender/Event.js b/src/mapboxgl/theme/common/overlay/levelRender/Event.js new file mode 100644 index 000000000..73d0ae939 --- /dev/null +++ b/src/mapboxgl/theme/common/overlay/levelRender/Event.js @@ -0,0 +1,78 @@ +import { Common } from '@mapgis/webclient-es6-service'; +const { Zondy } = Common; + +/** + * @private + * @class Zondy.LevelRenderer.Tool.Event + * @classdesc LevelRenderer 工具-事件辅助类 + */ +class Event { + + + /** + * @function Zondy.LevelRenderer.Tool.Event.prototype.constructor + * @description 构造函数。 + */ + constructor() { + /** + * @member {function} Zondy.LevelRenderer.Tool.Event.prototype.stop + * @description 停止冒泡和阻止默认行为 + */ + this.stop = typeof window.addEventListener === 'function' + ? function (e) { + e.preventDefault(); + e.stopPropagation(); + e.cancelBubble = true; + } + : function (e) { + e.returnValue = false; + e.cancelBubble = true; + }; + + this.CLASS_NAME = "Zondy.LevelRenderer.Tool.Event"; + } + + + /** + * @function Zondy.LevelRenderer.Tool.Event.prototype.getX + * @description 提取鼠标（手指）x坐标。 + * @param {Event} e - 事件。 + * @returns {number} 鼠标（手指）x坐标。 + */ + getX(e) { + return typeof e.zrenderX != 'undefined' && e.zrenderX + || typeof e.offsetX != 'undefined' && e.offsetX + || typeof e.layerX != 'undefined' && e.layerX + || typeof e.clientX != 'undefined' && e.clientX; + } + + + /** + * @function Zondy.LevelRenderer.Tool.Event.prototype.getY + * @description 提取鼠标（手指）y坐标。 + * @param {Event} e - 事件。 + * @returns {number} 鼠标（手指）y坐标。 + */ + getY(e) { + return typeof e.zrenderY != 'undefined' && e.zrenderY + || typeof e.offsetY != 'undefined' && e.offsetY + || typeof e.layerY != 'undefined' && e.layerY + || typeof e.clientY != 'undefined' && e.clientY; + } + + + /** + * @function Zondy.LevelRenderer.Tool.Event.prototype.getDelta + * @description 提取鼠标滚轮变化。 + * @param {Event} e - 事件。 + * @returns {number} 滚轮变化，正值说明滚轮是向上滚动，如果是负值说明滚轮是向下滚动。 + */ + getDelta(e) { + return typeof e.zrenderDelta != 'undefined' && e.zrenderDelta + || typeof e.wheelDelta != 'undefined' && e.wheelDelta + || typeof e.detail != 'undefined' && -e.detail; + } +} + +export {Event}; +Zondy.LevelRenderer.Tool.Event = Event; \ No newline at end of file diff --git a/src/mapboxgl/theme/common/overlay/levelRender/Eventful.js b/src/mapboxgl/theme/common/overlay/levelRender/Eventful.js new file mode 100644 index 000000000..47b562dc2 --- /dev/null +++ b/src/mapboxgl/theme/common/overlay/levelRender/Eventful.js @@ -0,0 +1,236 @@ +import { Common } from '@mapgis/webclient-es6-service'; +const { Zondy } = Common; + +/** + * @private + * @class Zondy.LevelRenderer.Eventful + * @classdesc 事件分发器超类，所有支持事件处理的类均是此类的子类。 + * 此类不可实例化。 + */ +class Eventful { + + /** + * @function Zondy.LevelRenderer.Eventful.prototype.constructor + * @description 构造函数。对象可以通过 onxxxx 绑定事件。 + * 支持的事件： + * Symbolizer properties: + * onclick - {function} 默认值：null。 + * onmouseover - {function} 默认值：null。 + * onmouseout - {function} 默认值：null。 + * onmousemove - {function} 默认值：null。 + * onmousewheel - {function} 默认值：null。 + * onmousedown - {function} 默认值：null。 + * onmouseup - {function} 默认值：null。 + * ondragstart - {function} 默认值：null。 + * ondragend - {function} 默认值：null。 + * ondragenter - {function} 默认值：null。 + * ondragleave - {function} 默认值：null。 + * ondragover - {function} 默认值：null。 + * ondrop - {function} 默认值：null。 + */ + constructor() { + /** + * @member {Object} Zondy.LevelRenderer.Eventful.prototype._handlers + * @description 事件处理对象（事件分发器）。 + */ + this._handlers = {}; + this.CLASS_NAME = "Zondy.LevelRenderer.Eventful"; + } + + /** + * @function {Object} Zondy.LevelRenderer.Eventful.prototype.destroy + * @description 销毁对象，释放资源。调用此函数后所有属性将被置为 null。 + */ + destroy() { + this._handlers = null; + } + + /** + * @function Zondy.LevelRenderer.Eventful.prototype.one + * @description 单次触发绑定，dispatch后销毁。 + * @param {string} event - 事件名。 + * @param {boolean} handler - 响应函数。 + * @param {Object} context - context。 + * @returns {Zondy.LevelRenderer.Eventful} this + */ + one(event, handler, context) { + var _h = this._handlers; + + if (!handler || !event) { + return this; + } + + if (!_h[event]) { + _h[event] = []; + } + + _h[event].push({ + h: handler, + one: true, + ctx: context || this + }); + + return this; + } + + /** + * @function Zondy.LevelRenderer.Eventful.prototype.bind + * @description 绑定事件。 + * @param {string} event - 事件名。 + * @param {boolean} handler - 响应函数。 + * @param {Object} context - context。 + * @returns {Zondy.LevelRenderer.Eventful} this + */ + bind(event, handler, context) { + var _h = this._handlers; + + if (!handler || !event) { + return this; + } + + if (!_h[event]) { + _h[event] = []; + } + + _h[event].push({ + h: handler, + one: false, + ctx: context || this + }); + + return this; + } + + /** + * @function Zondy.LevelRenderer.Eventful.prototype.unbind + * @description 解绑事件。 + * @param {string} event - 事件名。 + * @param {boolean} handler - 响应函数。 + * @returns {Zondy.LevelRenderer.Eventful} this + */ + unbind(event, handler) { + var _h = this._handlers; + + if (!event) { + this._handlers = {}; + return this; + } + + if (handler) { + if (_h[event]) { + var newList = []; + for (var i = 0, l = _h[event].length; i < l; i++) { + if (_h[event][i]['h'] !== handler) { + newList.push(_h[event][i]); + } + } + _h[event] = newList; + } + + if (_h[event] && _h[event].length === 0) { + delete _h[event]; + } + } else { + delete _h[event]; + } + + return this; + } + + /** + * @function Zondy.LevelRenderer.Eventful.prototype.dispatch + * @description 事件分发。 + * @param {string} type - 事件类型。 + * @returns {Zondy.LevelRenderer.Eventful} this + */ + dispatch(type) { + if (this._handlers[type]) { + var args = arguments; + var argLen = args.length; + + if (argLen > 3) { + args = Array.prototype.slice.call(args, 1); + } + + var _h = this._handlers[type]; + var len = _h.length; + for (var i = 0; i < len;) { + // Optimize advise from backbone + switch (argLen) { + case 1: + _h[i]['h'].call(_h[i]['ctx']); + break; + case 2: + _h[i]['h'].call(_h[i]['ctx'], args[1]); + break; + case 3: + _h[i]['h'].call(_h[i]['ctx'], args[1], args[2]); + break; + default: + // have more than 2 given arguments + _h[i]['h'].apply(_h[i]['ctx'], args); + break; + } + + if (_h[i]['one']) { + _h.splice(i, 1); + len--; + } else { + i++; + } + } + } + + return this; + } + + /** + * @function Zondy.LevelRenderer.Eventful.prototype.dispatchWithContext + * @description 带有context的事件分发，最后一个参数是事件回调的 context。 + * @param {string} type - 事件类型。 + * @returns {Zondy.LevelRenderer.Eventful} this + */ + dispatchWithContext(type) { + if (this._handlers[type]) { + var args = arguments; + var argLen = args.length; + + if (argLen > 4) { + args = Array.prototype.slice.call(args, 1, args.length - 1); + } + var ctx = args[args.length - 1]; + + var _h = this._handlers[type]; + var len = _h.length; + for (var i = 0; i < len;) { + // Optimize advise from backbone + switch (argLen) { + case 1: + _h[i]['h'].call(ctx); + break; + case 2: + _h[i]['h'].call(ctx, args[1]); + break; + case 3: + _h[i]['h'].call(ctx, args[1], args[2]); + break; + default: + // have more than 2 given arguments + _h[i]['h'].apply(ctx, args); + break; + } + + if (_h[i]['one']) { + _h.splice(i, 1); + len--; + } else { + i++; + } + } + } + return this; + } +} + +export {Eventful}; +Zondy.LevelRenderer.Eventful = Eventful; \ No newline at end of file diff --git a/src/mapboxgl/theme/common/overlay/levelRender/Group.js b/src/mapboxgl/theme/common/overlay/levelRender/Group.js new file mode 100644 index 000000000..0bf93b1f4 --- /dev/null +++ b/src/mapboxgl/theme/common/overlay/levelRender/Group.js @@ -0,0 +1,253 @@ +import { Common } from '@mapgis/webclient-es6-service'; +const { Zondy, mixin, indexOf, extend, newGuid } = Common; + +import {Eventful} from './Eventful'; +import {Transformable} from './Transformable'; + +/** + * @private + * @class Zondy.LevelRenderer.Group + * @classdesc Group 是一个容器，可以插入子节点，Group 的变换也会被应用到子节点上。 + * @extends {Zondy.LevelRenderer.Transformable} + * (code) + * var g = new Zondy.LevelRenderer.Group(); + * var Circle = new Zondy.LevelRenderer.Shape.Circle(); + * g.position[0] = 100; + * g.position[1] = 100; + * g.addChild(new Circle({ + * style: { + * x: 100, + * y: 100, + * r: 20, + * brushType: 'fill' + * } + * })); + * LR.addGroup(g); + * (end) + */ +class Group extends mixin(Eventful, Transformable) { + + /** + * @function Zondy.LevelRenderer.Group.prototype.constructor + * @description 构造函数。 + * @param {Array} options - Group 的配置（options）项，可以是 Group 的自有属性，也可以是自定义的属性。 + */ + constructor(options) { + super(options); + options = options || {}; + /** + * @member {string} Zondy.LevelRenderer.Group.prototype.id + * @description Group 的唯一标识。 + */ + this.id = null; + + /** + * @readonly + * @member {string} [Zondy.LevelRenderer.Group.prototype.type='group'] + * @description 类型。 + */ + this.type = 'group'; + + //http://www.w3.org/TR/2dcontext/#clipping-region + /** + * @member {string} Zondy.LevelRenderer.Group.prototype.clipShape + * @description 用于裁剪的图形(shape)，所有 Group 内的图形在绘制时都会被这个图形裁剪，该图形会继承 Group 的变换。 + */ + this.clipShape = null; + + /** + * @member {Array} Zondy.LevelRenderer.Group.prototype._children + * @description _children。 + */ + this._children = []; + + /** + * @member {Array} Zondy.LevelRenderer.Group.prototype._storage + * @description _storage。 + */ + this._storage = null; + + /** + * @member {boolean} [Zondy.LevelRenderer.Group.prototype.__dirty=true] + * @description __dirty。 + */ + this.__dirty = true; + + /** + * @member {boolean} [Zondy.LevelRenderer.Group.prototype.ignore=false] + * @description 是否忽略该 Group 及其所有子节点。 + */ + this.ignore = false; + extend(this, options); + this.id = this.id || newGuid(); + this.CLASS_NAME = "Zondy.LevelRenderer.Group"; + } + + /** + * @function Zondy.LevelRenderer.Group.prototype.destroy + * @description 销毁对象，释放资源。调用此函数后所有属性将被置为 null。 + */ + destroy() { + this.id = null; + this.type = null; + this.clipShape = null; + this._children = null; + this._storage = null; + this.__dirty = null; + this.ignore = null; + + super.destroy(); + } + + /** + * @function Zondy.LevelRenderer.Group.prototype.children + * @description 复制并返回一份新的包含所有儿子节点的数组。 + * @returns {Array.} 图形数组。 + */ + children() { + return this._children.slice(); + } + + /** + * @function Zondy.LevelRenderer.Group.prototype.childAt + * @description 获取指定 index 的儿子节点 + * @param {number} idx - 节点索引。 + * @returns {Zondy.LevelRenderer.Shape} 图形。 + */ + childAt(idx) { + return this._children[idx]; + } + + /** + * @function Zondy.LevelRenderer.Group.prototype.addChild + * @description 添加子节点，可以是 Shape 或者 Group。 + * @param {(Zondy.LevelRenderer.Shape|Zondy.LevelRenderer.Group)} child - 节点图形。 + */ + // TODO Type Check + addChild(child) { + if (child === this) { + return; + } + + if (child.parent === this) { + return; + } + if (child.parent) { + child.parent.removeChild(child); + } + + this._children.push(child); + child.parent = this; + + if (this._storage && this._storage !== child._storage) { + + this._storage.addToMap(child); + + if (child instanceof Group) { + child.addChildrenToStorage(this._storage); + } + } + } + + /** + * @function Zondy.LevelRenderer.Group.prototype.removeChild + * @description 移除子节点。 + * @param {Zondy.LevelRenderer.Shape} child - 需要移除的子节点图形。 + */ + removeChild(child) { + var idx = indexOf(this._children, child); + + this._children.splice(idx, 1); + child.parent = null; + + if (this._storage) { + + this._storage.delFromMap(child.id); + + if (child instanceof Group) { + child.delChildrenFromStorage(this._storage); + } + } + } + + /** + * @function Zondy.LevelRenderer.Group.prototype.eachChild + * @description 遍历所有子节点。 + * @param {function} cb - 回调函数。 + * @param {Object} context - 上下文。 + */ + eachChild(cb, context) { + var haveContext = !!context; + for (var i = 0; i < this._children.length; i++) { + var child = this._children[i]; + if (haveContext) { + cb.call(context, child); + } else { + cb(child); + } + } + } + + /** + * @function Zondy.LevelRenderer.Group.prototype.traverse + * @description 深度优先遍历所有子孙节点。 + * @param {function} cb - 回调函数。 + * @param {Object} context - 上下文。 + */ + traverse(cb, context) { + var haveContext = !!context; + for (var i = 0; i < this._children.length; i++) { + var child = this._children[i]; + if (haveContext) { + cb.call(context, child); + } else { + cb(child); + } + + if (child.type === 'group') { + child.traverse(cb, context); + } + } + } + + /** + * @function Zondy.LevelRenderer.Group.prototype.addChildrenToStorage + * @description 把子图形添加到仓库。 + * @param {Zondy.LevelRenderer.Storage} storage - 图形仓库。 + */ + addChildrenToStorage(storage) { + for (var i = 0; i < this._children.length; i++) { + var child = this._children[i]; + storage.addToMap(child); + if (child.type === 'group') { + child.addChildrenToStorage(storage); + } + } + } + + /** + * @function Zondy.LevelRenderer.Group.prototype.delChildrenFromStorage + * @description 从仓库把子图形删除。 + * @param {Zondy.LevelRenderer.Storage} storage - 图形仓库。 + */ + delChildrenFromStorage(storage) { + for (var i = 0; i < this._children.length; i++) { + var child = this._children[i]; + storage.delFromMap(child.id); + if (child.type === 'group') { + child.delChildrenFromStorage(storage); + } + } + } + + /** + * @function Zondy.LevelRenderer.Group.prototype.modSelf + * @description 是否修改。 + */ + modSelf() { + this.__dirty = true; + } +} + +export {Group}; +Zondy.LevelRenderer.Group = Group; \ No newline at end of file diff --git a/src/mapboxgl/theme/common/overlay/levelRender/Handler.js b/src/mapboxgl/theme/common/overlay/levelRender/Handler.js new file mode 100644 index 000000000..5806f44ee --- /dev/null +++ b/src/mapboxgl/theme/common/overlay/levelRender/Handler.js @@ -0,0 +1,1105 @@ +import { Common } from '@mapgis/webclient-es6-service'; +const { Zondy } = Common; + +import {Eventful} from './Eventful'; +import {Config} from './Config'; +import {SUtil} from './SUtil'; + +/** + * @private + * @class Zondy.LevelRenderer.Handler + * @classdesc Handler控制模块。 + * @extends {Zondy.LevelRenderer.Eventful} + */ +class Handler extends Eventful { + + /** + * @function Zondy.LevelRenderer.Handler.constructor + * @description 构造函数。 + * @param {HTMLElement} root - 绘图区域。 + * @param {Zondy.LevelRenderer.Storage} storage - Storage 实例。 + * @param {Zondy.LevelRenderer.Painter} painter - Painter 实例。 + */ + constructor(root, storage, painter) { + super(root, storage, painter); + /** + * @member {HTMLElement} Zondy.LevelRenderer.Handler.prototype.root + * @description 绘图区域 + */ + this.root = root; + /** + * @member {Zondy.LevelRenderer.Storage} Zondy.LevelRenderer.Handler.prototype.storage + * @description Storage 实例 + */ + this.storage = storage; + /** + * @member {Zondy.LevelRenderer.Painter} Zondy.LevelRenderer.Handler.prototype.Painter + * @description Painter 实例 + */ + this.painter = painter; + /** + * @member {number} [Zondy.LevelRenderer.Handler.prototype._lastX=0] + * @description 上一次鼠标位置x坐标值 + */ + this._lastX = 0; + /** + * @member {number} [Zondy.LevelRenderer.Handler.prototype._lastY=0] + * @description 上一次鼠标位置y坐标值 + */ + this._lastY = 0; + /** + * @member {number} [Zondy.LevelRenderer.Handler.prototype._mouseX=0] + * @description 当前鼠标位置x坐标值 + */ + this._mouseX = 0; + /** + * @member {number} [Zondy.LevelRenderer.Handler.prototype._mouseY=0] + * @description 当前鼠标位置y坐标值 + */ + this._mouseY = 0; + /** + * @member {Function} Zondy.LevelRenderer.Handler.prototype._findHover + * @description 查找 Hover 图形 + */ + this._findHover = null; + /** + * @member {Object} Zondy.LevelRenderer.Handler.prototype._domHover + * @description 高亮 DOM + */ + this._domHover = null; + + // 各种事件标识的私有变量 + // this._hasfound = false; // 是否找到 hover 图形元素 + // this._lastHover = null; // 最后一个 hover 图形元素 + // this._mouseDownTarget = null; + // this._draggingTarget = null; // 当前被拖拽的图形元素 + // this._isMouseDown = false; + // this._isDragging = false; + // this._lastMouseDownMoment; + // this._lastTouchMoment; + // this._lastDownButton; + + this._findHover = bind3Arg(findHover, this); + this._domHover = painter.getDomHover(); + + this.CLASS_NAME = "Zondy.LevelRenderer.Handler"; + var domHandlers = { + /** + * Method: resize + * 窗口大小改变响应函数。 + * + * Parameters: + * event - {Event} event。 + * + */ + resize: function (event) { + event = event || window.event; + this._lastHover = null; + this._isMouseDown = 0; + + // 分发Zondy.LevelRenderer.Config.EVENT.RESIZE事件，global + this.dispatch(Config.EVENT.RESIZE, event); + }, + + /** + * Method: click + * 点击响应函数。 + * + * Parameters: + * event - {Event} event。 + * + */ + click: function (event) { + event = this._zrenderEventFixed(event); + + // 分发Zondy.LevelRenderer.Config.EVENT.CLICK事件 + var _lastHover = this._lastHover; + if ((_lastHover && _lastHover.clickable) + || !_lastHover + ) { + + // 判断没有发生拖拽才触发click事件 + if (this._clickThreshold < 10) { + this._dispatchAgency(_lastHover, Config.EVENT.CLICK, event); + } + } + + this._mousemoveHandler(event); + }, + + /** + * Method: dblclick + * 双击响应函数。 + * + * Parameters: + * event - {Event} event。 + * + */ + dblclick: function (event) { + event = event || window.event; + event = this._zrenderEventFixed(event); + + // 分发Zondy.LevelRenderer.Config.EVENT.DBLCLICK事件 + var _lastHover = this._lastHover; + if ((_lastHover && _lastHover.clickable) + || !_lastHover + ) { + + // 判断没有发生拖拽才触发dblclick事件 + if (this._clickThreshold < 5) { + this._dispatchAgency(_lastHover, Config.EVENT.DBLCLICK, event); + } + } + + this._mousemoveHandler(event); + }, + + /** + * Method: mousewheel + * 鼠标滚轮响应函数。 + * + * Parameters: + * event - {Event} event。 + * + */ + mousewheel: function (event) { + event = this._zrenderEventFixed(event); + + // http://www.sitepoint.com/html5-javascript-mouse-wheel/ + // https://developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/mousewheel + var delta = event.wheelDelta // Webkit + || -event.detail; // Firefox + var scale = delta > 0 ? 1.1 : 1 / 1.1; + + var layers = this.painter.getLayers(); + + var needsRefresh = false; + for (var z in layers) { + if (z !== 'hover') { + var layer = layers[z]; + var pos = layer.position; + if (layer.zoomable) { + layer.__zoom = layer.__zoom || 1; + var newZoom = layer.__zoom; + newZoom *= scale; + newZoom = Math.max( + Math.min(layer.maxZoom, newZoom), + layer.minZoom + ); + scale = newZoom / layer.__zoom; + layer.__zoom = newZoom; + // Keep the mouse center when scaling + pos[0] -= (this._mouseX - pos[0]) * (scale - 1); + pos[1] -= (this._mouseY - pos[1]) * (scale - 1); + layer.scale[0] *= scale; + layer.scale[1] *= scale; + layer.dirty = true; + needsRefresh = true; + } + } + } + if (needsRefresh) { + this.painter.refresh(); + } + + // 分发Zondy.LevelRenderer.Config.EVENT.MOUSEWHEEL事件 + this._dispatchAgency(this._lastHover, Config.EVENT.MOUSEWHEEL, event); + this._mousemoveHandler(event); + }, + + /** + * Method: mousemove + * 鼠标（手指）移动响应函数。 + * + * Parameters: + * event - {Event} event。 + * + */ + mousemove: function (event) { + // 拖拽不触发click事件 + this._clickThreshold++; + + event = this._zrenderEventFixed(event); + this._lastX = this._mouseX; + this._lastY = this._mouseY; + this._mouseX = SUtil.Util_event.getX(event); + this._mouseY = SUtil.Util_event.getY(event); + var dx = this._mouseX - this._lastX; + var dy = this._mouseY - this._lastY; + + // 避免手抖点击误认为拖拽 + // if (this._mouseX - this._lastX > 1 || this._mouseY - this._lastY > 1) { + this._processDragStart(event); + // } + this._hasfound = 0; + this._event = event; + + this._iterateAndFindHover(); + + // 找到的在迭代函数里做了处理，没找到得在迭代完后处理 + if (!this._hasfound) { + // 过滤首次拖拽产生的mouseout和dragLeave + if (!this._draggingTarget + || (this._lastHover && this._lastHover !== this._draggingTarget) + ) { + + this._processOutShape(event); + this._processDragLeave(event); + } + + this._lastHover = null; + this.storage.delHover(); + this.painter.clearHover(); + } + + // set cursor for root element + var cursor = ''; + + // 如果存在拖拽中元素，被拖拽的图形元素最后addHover + if (this._draggingTarget) { + this.storage.drift(this._draggingTarget.id, dx, dy); + this._draggingTarget.modSelf(); + this.storage.addHover(this._draggingTarget); + } else if (this._isMouseDown) { + // Layer dragging + var layers = this.painter.getLayers(); + + var needsRefresh = false; + for (var z in layers) { + if (z !== 'hover') { + var layer = layers[z]; + if (layer.panable) { + // PENDING + cursor = 'move'; + // Keep the mouse center when scaling + layer.position[0] += dx; + layer.position[1] += dy; + needsRefresh = true; + layer.dirty = true; + } + } + } + if (needsRefresh) { + this.painter.refresh(); + } + } + + if (this._draggingTarget || (this._hasfound && this._lastHover.draggable)) { + cursor = 'move'; + } else if (this._hasfound && this._lastHover.clickable) { + cursor = 'pointer'; + } + this.root.style.cursor = cursor; + + // 分发Zondy.LevelRenderer.Config.EVENT.MOUSEMOVE事件 + this._dispatchAgency(this._lastHover, Config.EVENT.MOUSEMOVE, event); + + if (this._draggingTarget || this._hasfound || this.storage.hasHoverShape()) { + this.painter.refreshHover(); + } + }, + + /** + * Method: mouseout + * 鼠标（手指）离开响应函数。 + * + * Parameters: + * event - {Event} event。 + * + */ + mouseout: function (event) { + event = this._zrenderEventFixed(event); + + var element = event.toElement || event.relatedTarget; + if (element !== this.root) { + while (element && element.nodeType !== 9) { + // 忽略包含在root中的dom引起的mouseOut + if (element === this.root) { + this._mousemoveHandler(event); + return; + } + + element = element.parentNode; + } + } + + event.zrenderX = this._lastX; + event.zrenderY = this._lastY; + this.root.style.cursor = ''; + this._isMouseDown = 0; + + this._processOutShape(event); + this._processDrop(event); + this._processDragEnd(event); + + this.painter.refreshHover(); + + this.dispatch(Config.EVENT.GLOBALOUT, event); + }, + + /** + * Method: mousedown + * 鼠标（手指）按下响应函数。 + * + * Parameters: + * event - {Event} event。 + * + */ + mousedown: function (event) { + // 重置 clickThreshold + this._clickThreshold = 0; + + if (this._lastDownButton === 2) { + this._lastDownButton = event.button; + this._mouseDownTarget = null; + // 仅作为关闭右键菜单使用 + return; + } + + this._lastMouseDownMoment = new Date(); + event = this._zrenderEventFixed(event); + this._isMouseDown = 1; + + // 分发Zondy.LevelRenderer.Config.EVENT.MOUSEDOWN事件 + this._mouseDownTarget = this._lastHover; + this._dispatchAgency(this._lastHover, Config.EVENT.MOUSEDOWN, event); + this._lastDownButton = event.button; + }, + + /** + * Method: mouseup + * 鼠标（手指）抬起响应函数。 + * + * Parameters: + * event - {Event} event。 + * + */ + mouseup: function (event) { + event = this._zrenderEventFixed(event); + this.root.style.cursor = ''; + this._isMouseDown = 0; + this._mouseDownTarget = null; + + // 分发Zondy.LevelRenderer.Config.EVENT.MOUSEUP事件 + this._dispatchAgency(this._lastHover, Config.EVENT.MOUSEUP, event); + this._processDrop(event); + this._processDragEnd(event); + }, + + /** + * Method: touchstart + * Touch 开始响应函数。 + * + * Parameters: + * event - {Event} event。 + * + */ + touchstart: function (event) { + // SUtil.Util_event.stop(event);// 阻止浏览器默认事件，重要 + event = this._zrenderEventFixed(event, true); + this._lastTouchMoment = new Date(); + + // 平板补充一次findHover + this._mobildFindFixed(event); + this._mousedownHandler(event); + }, + + /** + * Method: touchmove + * Touch 移动响应函数。 + * + * Parameters: + * event - {Event} event。 + * + */ + touchmove: function (event) { + event = this._zrenderEventFixed(event, true); + this._mousemoveHandler(event); + if (this._isDragging) { + SUtil.Util_event.stop(event);// 阻止浏览器默认事件，重要 + } + }, + + /** + * Method: touchend + * Touch 结束响应函数。 + * + * Parameters: + * event - {Event} event。 + * + */ + touchend: function (event) { + // SUtil.Util_event.stop(event);// 阻止浏览器默认事件，重要 + event = this._zrenderEventFixed(event, true); + this._mouseupHandler(event); + + var now = new Date(); + if (now - this._lastTouchMoment < Config.EVENT.touchClickDelay) { + this._mobildFindFixed(event); + this._clickHandler(event); + if (now - this._lastClickMoment < Config.EVENT.touchClickDelay / 2) { + this._dblclickHandler(event); + if (this._lastHover && this._lastHover.clickable) { + SUtil.Util_event.stop(event);// 阻止浏览器默认事件，重要 + } + } + this._lastClickMoment = now; + } + this.painter.clearHover(); + } + }; + + initDomHandler(this); + + // 初始化，事件绑定，支持的所有事件都由如下原生事件计算得来 + if (window.addEventListener) { + window.addEventListener('resize', this._resizeHandler); + + if (SUtil.Util_env.os.tablet || SUtil.Util_env.os.phone) { + // mobile支持 + root.addEventListener('touchstart', this._touchstartHandler); + root.addEventListener('touchmove', this._touchmoveHandler); + root.addEventListener('touchend', this._touchendHandler); + } else { + // mobile的click/move/up/down自己模拟 + root.addEventListener('click', this._clickHandler); + root.addEventListener('dblclick', this._dblclickHandler); + root.addEventListener('mousewheel', this._mousewheelHandler); + root.addEventListener('mousemove', this._mousemoveHandler); + root.addEventListener('mousedown', this._mousedownHandler); + root.addEventListener('mouseup', this._mouseupHandler); + } + root.addEventListener('DOMMouseScroll', this._mousewheelHandler); + root.addEventListener('mouseout', this._mouseoutHandler); + } else { + window.attachEvent('onresize', this._resizeHandler); + + root.attachEvent('onclick', this._clickHandler); + //root.attachEvent('ondblclick ', this._dblclickHandler); + root.ondblclick = this._dblclickHandler; + root.attachEvent('onmousewheel', this._mousewheelHandler); + root.attachEvent('onmousemove', this._mousemoveHandler); + root.attachEvent('onmouseout', this._mouseoutHandler); + root.attachEvent('onmousedown', this._mousedownHandler); + root.attachEvent('onmouseup', this._mouseupHandler); + } + + // 辅助函数 start + /** + * Method: bind1Arg + * bind 一个参数的 function。 + * + * Parameters: + * handler - {Function} 要 bind 的 function。 + * context - {Object} 运行时 this 环境。 + * + * Returns: + * {Function} + */ + function bind1Arg(handler, context) { + return function (e) { + return handler.call(context, e); + }; + } + + /* + // bind 两个参数的 function + function bind2Arg(handler, context) { + return function (arg1, arg2) { + return handler.call(context, arg1, arg2); + }; + } + */ + + // bind 三个参数的 function + function bind3Arg(handler, context) { + return function (arg1, arg2, arg3) { + return handler.call(context, arg1, arg2, arg3); + }; + } + + /** + * Method: initDomHandler + * 为控制类实例初始化 dom 事件处理函数。 + * + * Parameters: + * instance - {} 控制类实例 。 + * + * Returns: + * {Function} + */ + function initDomHandler(instance) { + var domHandlerNames = [ + 'resize', 'click', 'dblclick', + 'mousewheel', 'mousemove', 'mouseout', 'mouseup', 'mousedown', + 'touchstart', 'touchend', 'touchmove' + ]; + + var len = domHandlerNames.length; + while (len--) { + var name = domHandlerNames[len]; + instance['_' + name + 'Handler'] = bind1Arg(domHandlers[name], instance); + } + } + + /** + * Method: findHover + * 迭代函数，查找 hover 到的图形元素并即时做些事件分发。 + * + * Parameters: + * shape - {Object} 图形。 + * x - {Number} 鼠标 x。 + * y - {Number} 鼠标 y。 + * + * Returns: + * {Boolean} 是否找到图形。 + * + */ + function findHover(shape, x, y) { + var me = this; + if ( + (me._draggingTarget && me._draggingTarget.id === shape.id) // 迭代到当前拖拽的图形上 + || shape.isSilent() // 打酱油的路过，啥都不响应的shape~ + ) { + return false; + } + + var event = me._event; + if (shape.isCover(x, y)) { + if (shape.hoverable) { + // SMIC-修改 - start + if (shape.isHoverByRefDataID && shape.isHoverByRefDataID === true) { + if (shape.refDataID) { + var fid = shape.refDataID; + //me.painter.clearHover(); + //me.storage.delHover(); + + var hoverGroup = null; + if (shape.refDataHoverGroup) { + hoverGroup = shape.refDataHoverGroup; + } + + //查找同一个用户数据 feature 的所有图形 + var shapeList = me.storage._shapeList; + for (var i = 0, len = shapeList.length; i < len; i++) { + var si = shapeList[i]; + if (si.refDataID && fid === si.refDataID) { + if (hoverGroup) { + if (si.refDataHoverGroup && hoverGroup === si.refDataHoverGroup) { + me.storage.addHover(si); + } + } else { + me.storage.addHover(si); + } + } + } + } + } else { + me.storage.addHover(shape); + } + //初始代码： + // me.storage.addHover(shape); + // SMIC-修改 - end + } + // 查找是否在 clipShape 中 + var p = shape.parent; + while (p) { + if (p.clipShape && !p.clipShape.isCover(me._mouseX, me._mouseY)) { + // 已经被祖先 clip 掉了 + return false; + } + p = p.parent; + } + + if (me._lastHover !== shape) { + me._processOutShape(event); + me._processDragLeave(event); + me._lastHover = shape; + me._processDragEnter(event); + } + + me._processOverShape(event); + me._processDragOver(event); + + me._hasfound = 1; + + return true; // 找到则中断迭代查找 + } + + return false; + } + + // 辅助函数 end + } + + /** + * @function Zondy.LevelRenderer.Handler.prototype.destroy + * @description 销毁对象，释放资源。调用此函数后所有属性将被置为null。 + */ + destroy() { + this.dispose(); + this._lastX = null; + this._lastY = null; + this._mouseX = null; + this._mouseY = null; + this._findHover = null; + + Eventful.prototype.destroy.apply(this, arguments); + } + + /** + * @function Zondy.LevelRenderer.Handler.prototype.on + * @description 自定义事件绑定。 + * @param {string} eventName - 事件名称，resize、hover、drag等。 + * @param {function} handler - 响应函数。 + * @returns {Zondy.LevelRenderer.Handler} this。 + */ + on(eventName, handler) { + this.bind(eventName, handler); + return this; + } + + /** + * @function Zondy.LevelRenderer.Handler.prototype.un + * @description 自定义事件解除绑定。 + * @param {string} eventName - 事件名称，resize、hover、drag等。 + * @param {function} handler - 响应函数。 + * @returns {Zondy.LevelRenderer.Handler} this。 + */ + un(eventName, handler) { + this.unbind(eventName, handler); + return this; + } + + /** + * @function Zondy.LevelRenderer.Handler.prototype.trigger + * @description 事件触发。 + * @param {string} eventName - 事件名称，resize、hover、drag等。 + * @param {event} eventArgs - dom事件对象。 + */ + trigger(eventName, eventArgs) { + var EVENT = Config.EVENT; + switch (eventName) { + case EVENT.RESIZE: + case EVENT.CLICK: + case EVENT.DBLCLICK: + case EVENT.MOUSEWHEEL: + case EVENT.MOUSEMOVE: + case EVENT.MOUSEDOWN: + case EVENT.MOUSEUP: + case EVENT.MOUSEOUT: + this['_' + eventName + 'Handler'](eventArgs); + break; + } + } + + /** + * @function Zondy.LevelRenderer.Handler.prototype.dispose + * @description 释放，解绑所有事件。 + */ + dispose() { + var root = this.root; + + if (window.removeEventListener) { + window.removeEventListener('resize', this._resizeHandler); + + if (SUtil.Util_env.os.tablet || SUtil.Util_env.os.phone) { + // mobile支持 + root.removeEventListener('touchstart', this._touchstartHandler); + root.removeEventListener('touchmove', this._touchmoveHandler); + root.removeEventListener('touchend', this._touchendHandler); + } else { + // mobile的click自己模拟 + root.removeEventListener('click', this._clickHandler); + root.removeEventListener('dblclick', this._dblclickHandler); + root.removeEventListener('mousewheel', this._mousewheelHandler); + root.removeEventListener('mousemove', this._mousemoveHandler); + root.removeEventListener('mousedown', this._mousedownHandler); + root.removeEventListener('mouseup', this._mouseupHandler); + } + root.removeEventListener('DOMMouseScroll', this._mousewheelHandler); + root.removeEventListener('mouseout', this._mouseoutHandler); + } else { + window.detachEvent('onresize', this._resizeHandler); + + root.detachEvent('onclick', this._clickHandler); + root.detachEvent('dblclick', this._dblclickHandler); + root.detachEvent('onmousewheel', this._mousewheelHandler); + root.detachEvent('onmousemove', this._mousemoveHandler); + root.detachEvent('onmouseout', this._mouseoutHandler); + root.detachEvent('onmousedown', this._mousedownHandler); + root.detachEvent('onmouseup', this._mouseupHandler); + } + + this.root = null; + this._domHover = null; + this.storage = null; + this.painter = null; + + this.un(); + } + + /** + * Method: _processDragStart + * 拖拽开始。 + * + * Parameters: + * event - {Object} 事件对象。 + * + */ + _processDragStart(event) { + var _lastHover = this._lastHover; + + if (this._isMouseDown + && _lastHover + && _lastHover.draggable + && !this._draggingTarget + && this._mouseDownTarget === _lastHover + ) { + // 拖拽点击生效时长阀门，某些场景需要降低拖拽敏感度 + if (_lastHover.dragEnableTime && + new Date() - this._lastMouseDownMoment < _lastHover.dragEnableTime + ) { + return; + } + + var _draggingTarget = _lastHover; + this._draggingTarget = _draggingTarget; + this._isDragging = 1; + + _draggingTarget.invisible = true; + this.storage.mod(_draggingTarget.id); + + // 分发 Config.EVENT.DRAGSTART事件 + this._dispatchAgency( + _draggingTarget, + Config.EVENT.DRAGSTART, + event + ); + this.painter.refresh(); + } + } + + /** + * Method: _processDragEnter + * 拖拽进入目标元素。 + * + * Parameters: + * event - {Object} 事件对象。 + * + */ + _processDragEnter(event) { + if (this._draggingTarget) { + // 分发Zondy.LevelRenderer.Config.EVENT.DRAGENTER事件 + this._dispatchAgency( + this._lastHover, + Config.EVENT.DRAGENTER, + event, + this._draggingTarget + ); + } + } + + /** + * Method: _processDragOver + * 拖拽在目标元素上移动。 + * + * Parameters: + * event - {Object} 事件对象。 + * + */ + _processDragOver(event) { + if (this._draggingTarget) { + // 分发Zondy.LevelRenderer.Config.EVENT.DRAGOVER事件 + this._dispatchAgency( + this._lastHover, + Config.EVENT.DRAGOVER, + event, + this._draggingTarget + ); + } + } + + /** + * Method: _processDragLeave + * 拖拽离开目标元素。 + * + * Parameters: + * event - {Object} 事件对象。 + * + */ + _processDragLeave(event) { + if (this._draggingTarget) { + // 分发Zondy.LevelRenderer.Config.EVENT.DRAGLEAVE事件 + this._dispatchAgency( + this._lastHover, + Config.EVENT.DRAGLEAVE, + event, + this._draggingTarget + ); + } + } + + /** + * Method: _processDrop + * 拖拽在目标元素上完成。 + * + * Parameters: + * event - {Object} 事件对象。 + * + */ + _processDrop(event) { + if (this._draggingTarget) { + this._draggingTarget.invisible = false; + this.storage.mod(this._draggingTarget.id); + this.painter.refresh(); + + // 分发Zondy.LevelRenderer.Config.EVENT.DROP事件 + this._dispatchAgency( + this._lastHover, + Config.EVENT.DROP, + event, + this._draggingTarget + ); + } + } + + /** + * Method: _processDragEnd + * 拖拽结束。 + * + * Parameters: + * event - {Object} 事件对象。 + * + */ + _processDragEnd(event) { + if (this._draggingTarget) { + // 分发Zondy.LevelRenderer.Config.EVENT.DRAGEND事件 + this._dispatchAgency( + this._draggingTarget, + Config.EVENT.DRAGEND, + event + ); + + this._lastHover = null; + } + + this._isDragging = 0; + this._draggingTarget = null; + } + + /** + * Method: _processOverShape + * 鼠标在某个图形元素上移动。 + * + * Parameters: + * event - {Object} 事件对象。 + * + */ + _processOverShape(event) { + // 分发Zondy.LevelRenderer.Config.EVENT.MOUSEOVER事件 + this._dispatchAgency(this._lastHover, Config.EVENT.MOUSEOVER, event); + } + + /** + * Method: _processOutShape + * 鼠标离开某个图形元素。 + * + * Parameters: + * event - {Object} 事件对象。 + * + */ + _processOutShape(event) { + // 分发Zondy.LevelRenderer.Config.EVENT.MOUSEOUT事件 + this._dispatchAgency(this._lastHover, Config.EVENT.MOUSEOUT, event); + } + + /** + * Method: _dispatchAgency + * 鼠标离开某个图形元素。 + * + * Parameters: + * targetShape - {Object} 目标图形元素。 + * eventName - {Object} 事件名称。 + * event - {Object} 事件对象。 + * draggedShape - {Object} 拖拽事件特有，当前被拖拽图形元素。 + * + */ + _dispatchAgency(targetShape, eventName, event, draggedShape) { + var eventHandler = 'on' + eventName; + var eventPacket = { + type: eventName, + event: event, + target: targetShape, + cancelBubble: false + }; + + var el = targetShape; + + if (draggedShape) { + eventPacket.dragged = draggedShape; + } + + while (el) { + el[eventHandler] + && (eventPacket.cancelBubble = el[eventHandler](eventPacket)); + el.dispatch(eventName, eventPacket); + + el = el.parent; + + if (eventPacket.cancelBubble) { + break; + } + } + + if (targetShape) { + // 冒泡到顶级 zrender 对象 + if (!eventPacket.cancelBubble) { + this.dispatch(eventName, eventPacket); + } + } else if (!draggedShape) { + // 无hover目标，无拖拽对象，原生事件分发 + this.dispatch(eventName, { + type: eventName, + event: event + }); + } + } + + /** + * Method: _iterateAndFindHover + * 迭代寻找 hover shape。 + * + */ + _iterateAndFindHover() { + var invTransform = SUtil.Util_matrix.create(); + + var list = this.storage.getShapeList(); + var currentZLevel; + var currentLayer; + var tmp = [0, 0]; + for (var i = list.length - 1; i >= 0; i--) { + var shape = list[i]; + + if (currentZLevel !== shape.zlevel) { + currentLayer = this.painter.getLayer(shape.zlevel, currentLayer); + tmp[0] = this._mouseX; + tmp[1] = this._mouseY; + + if (currentLayer.needTransform) { + SUtil.Util_matrix.invert(invTransform, currentLayer.transform); + SUtil.Util_vector.applyTransform(tmp, tmp, invTransform); + } + } + + if (this._findHover(shape, tmp[0], tmp[1])) { + break; + } + } + } + + /** + * Method: _mobildFindFixed + * touch 有指尖错觉，四向尝试，让touch上的点击更好触发事件。 + * + * Parameters: + * event - {Object} 事件对象。 + * + */ + _mobildFindFixed(event) { + // touch指尖错觉的尝试偏移量配置 + var MOBILE_TOUCH_OFFSETS = [ + {x: 10}, + {x: -20}, + { + x: 10, + y: 10 + }, + {y: -20} + ]; + + this._lastHover = null; + this._mouseX = event.zrenderX; + this._mouseY = event.zrenderY; + + this._event = event; + + this._iterateAndFindHover(); + + for (var i = 0; !this._lastHover && i < MOBILE_TOUCH_OFFSETS.length; i++) { + var offset = MOBILE_TOUCH_OFFSETS[i]; + offset.x && (this._mouseX += offset.x); + offset.y && (this._mouseX += offset.y); + + this._iterateAndFindHover(); + } + + if (this._lastHover) { + event.zrenderX = this._mouseX; + event.zrenderY = this._mouseY; + } + } + + /** + * Method: _zrenderEventFixed + * 如果存在第三方嵌入的一些dom触发的事件，或touch事件，需要转换一下事件坐标 。 + * + * Parameters: + * event - {Object} 事件。 + * isTouch - {Boolean} 是否触摸。 + * + */ + _zrenderEventFixed(event, isTouch) { + if (event.zrenderFixed) { + return event; + } + + if (!isTouch) { + event = event || window.event; + // 进入对象优先~ + var target = event.toElement + || event.relatedTarget + || event.srcElement + || event.target; + + if (target && target !== this._domHover) { + event.zrenderX = (typeof event.offsetX != 'undefined' + ? event.offsetX + : event.layerX) + + target.offsetLeft; + event.zrenderY = (typeof event.offsetY != 'undefined' + ? event.offsetY + : event.layerY) + + target.offsetTop; + } + } else { + var touch = event.type !== 'touchend' + ? event.targetTouches[0] + : event.changedTouches[0]; + if (touch) { + var rBounding = this.root.getBoundingClientRect(); + // touch事件坐标是全屏的~ + event.zrenderX = touch.clientX - rBounding.left; + event.zrenderY = touch.clientY - rBounding.top; + } + } + + event.zrenderFixed = 1; + return event; + } + + // SMIC-方法扩展 - start + /** + * @function Zondy.LevelRenderer.Handler.prototype.getLastHoverOne + * @description 获取单个高亮图形 + */ + getLastHoverOne() { + if (this._lastHover) { + return this._lastHover; + } + return null; + } +} + +export {Handler}; +Zondy.LevelRenderer.Handler = Handler; \ No newline at end of file diff --git a/src/mapboxgl/theme/common/overlay/levelRender/Http.js b/src/mapboxgl/theme/common/overlay/levelRender/Http.js new file mode 100644 index 000000000..75a910469 --- /dev/null +++ b/src/mapboxgl/theme/common/overlay/levelRender/Http.js @@ -0,0 +1,58 @@ +import { Common } from '@mapgis/webclient-es6-service'; +const { Zondy } = Common; + +/** + * @private + * @class Zondy.LevelRenderer.Tool.Http + * @classdesc LevelRenderer 工具-Http + */ +class Http { + + /** + * @function Zondy.LevelRenderer.Tool.Http.constructor + * @description 构造函数。 + */ + constructor() { + this.CLASS_NAME = "Zondy.LevelRenderer.Tool.Http" + + } + + /** + * @function Zondy.LevelRenderer.Tool.Http.prototype.get + * @description get请求。 + * @param {(string|IHTTPGetOption)} url - 请求url + * @param {function} onsuccess - 请求成功函数 + * @param {function} onerror - 请求失败函数 + * @param {Object} opts - 额外参数 + * @returns {number} cos值 + */ + get(url, onsuccess, onerror) { + if (typeof (url) === 'object') { + var obj = url; + url = obj.url; + onsuccess = obj.onsuccess; + onerror = obj.onerror; + + } + var xhr = window.XMLHttpRequest + ? new XMLHttpRequest() + : new window.ActiveXObject('Microsoft.XMLHTTP'); + xhr.open('GET', url, true); + xhr.onreadystatechange = function () { + if (xhr.readyState === 4) { + if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) { + onsuccess && onsuccess(xhr.responseText); + } else { + onerror && onerror(); + } + xhr.onreadystatechange = new Function(); + xhr = null; + } + }; + + xhr.send(null); + } +} + +export {Http}; +Zondy.LevelRenderer.Tool.Http = Http; \ No newline at end of file diff --git a/src/mapboxgl/theme/common/overlay/levelRender/LevelRenderer.js b/src/mapboxgl/theme/common/overlay/levelRender/LevelRenderer.js new file mode 100644 index 000000000..ef8bc1894 --- /dev/null +++ b/src/mapboxgl/theme/common/overlay/levelRender/LevelRenderer.js @@ -0,0 +1,106 @@ +import { Common } from '@mapgis/webclient-es6-service'; +import { Render } from './Render'; + +const { newGuid, Zondy } = Common; + +/** + * @private + * @class Zondy.LevelRenderer + * @classdesc LevelRenderer 渲染器 + */ +class LevelRenderer { + /** + * @function Zondy.LevelRenderer.constructor + * @description 构造函数。 + * @example + * //在渲染器上加上图形 + * var levelRenderer = new Zondy.LevelRenderer(); + * var zr = levelRenderer.init(document.getElementById('lRendertest')); + * zr.clear(); + * zr.addShape(new Zondy.LevelRenderer.Shape.Circle({ + * style:{ + * x : 100, + * y : 100, + * r : 50, + * brushType: 'fill' + * } + * })); + * zr.render(); + */ + constructor() { + /** + * @member {Object} Zondy.LevelRenderer.prototype._instances + * @description LevelRenderer 实例 map 索引 + */ + LevelRenderer._instances = {}; + LevelRenderer.Tool = {}; + this.CLASS_NAME = 'Zondy.LevelRenderer'; + } + + /** + * @function Zondy.LevelRenderer.prototype.destroy + * @description 销毁对象，释放资源。调用此函数后所有属性将被置为null。 + */ + destroy() { + this.dispose(); + } + + /** + * @function Zondy.LevelRenderer.prototype.init + * @description 创建 LevelRenderer 实例。 + * @param {HTMLElement} dom - 绘图容器。 + * @returns {Zondy.LevelRenderer} LevelRenderer 实例。 + */ + init(dom) { + var zr = new Render(newGuid(), dom); + LevelRenderer._instances[zr.id] = zr; + return zr; + } + + /** + * @function Zondy.LevelRenderer.prototype.dispose + * @description LevelRenderer 实例销毁。 + * 可以通过 zrender.dispose(zr) 销毁指定 Zondy.LevelRenderer.Render 实例。 + * 也可以通过 zr.dispose() 直接销毁 + * @param {Zondy.LevelRenderer.Render} zr - ZRender对象，不传此参数则销毁全部。 + * @returns {Zondy.LevelRenderer} this。 + */ + dispose(zr) { + if (zr) { + zr.dispose(); + this.delInstance(zr.id); + } else { + for (var key in LevelRenderer._instances) { + LevelRenderer._instances[key].dispose(); + } + LevelRenderer._instances = {}; + } + + return this; + } + + /** + * @function Zondy.LevelRenderer.prototype.getInstance + * @description 获取 Zondy.LevelRenderer.Render 实例。 + * @param {string} id - ZRender对象索引。 + * @returns {Zondy.LevelRenderer.Render} Zondy.LevelRenderer.Render 实例。 + */ + getInstance(id) { + return LevelRenderer._instances[id]; + } + + /** + * @function Zondy.LevelRenderer.prototype.delInstance + * @description 删除 zrender 实例，Zondy.LevelRenderer.Render 实例 dispose 时会调用，删除后 getInstance 则返回 undefined + * @param {string} id - ZRender对象索引。 + * @param {string} id - Zondy.LevelRenderer.Render 对象索引。 + * @returns {Zondy.LevelRenderer} this。 + */ + delInstance(id) { + delete LevelRenderer._instances[id]; + return this; + } +} + +export { LevelRenderer }; +Zondy.LevelRenderer = LevelRenderer; diff --git a/src/mapboxgl/theme/common/overlay/levelRender/Math.js b/src/mapboxgl/theme/common/overlay/levelRender/Math.js new file mode 100644 index 000000000..3d6da2121 --- /dev/null +++ b/src/mapboxgl/theme/common/overlay/levelRender/Math.js @@ -0,0 +1,71 @@ +import { Common } from '@mapgis/webclient-es6-service'; +const { Zondy } = Common; + +/** + * @private + * @class Zondy.LevelRenderer.Tool.Math + * @classdesc LevelRenderer 工具-数学辅助类 + */ +class Math { + + /** + * @function Zondy.LevelRenderer.Tool.Math.constructor + * @description 构造函数。 + */ + constructor() { + /** + * @member {number} Zondy.LevelRenderer.Tool.Math._radians + * @description 角度与弧度转化参数 + */ + this._radians = window.Math.PI / 180; + + this.CLASS_NAME = "Zondy.LevelRenderer.Tool.Math"; + } + + /** + * @function Zondy.LevelRenderer.Tool.Math.prototype.sin + * @description 正弦函数。 + * @param {number} angle - 弧度（角度）参数。 + * @param {boolean} [isDegrees=false] - angle参数是否为角度计算，angle为以弧度计量的角度。 + * @returns {number} sin 值。 + */ + sin(angle, isDegrees) { + return window.Math.sin(isDegrees ? angle * this._radians : angle); + } + + /** + * @function Zondy.LevelRenderer.Tool.Math.prototype.cos + * @description 余弦函数。 + * @param {number} angle - 弧度（角度）参数。 + * @param {boolean} [isDegrees=false] - angle参数是否为角度计算，angle为以弧度计量的角度。 + * @returns {number} cos 值。 + */ + cos(angle, isDegrees) { + return window.Math.cos(isDegrees ? angle * this._radians : angle); + } + + /** + * @function Zondy.LevelRenderer.Tool.Math.prototype.degreeToRadian + * @description 角度转弧度。 + * @param {number} angle - 弧度（角度）参数。 + * @param {boolean} [isDegrees=false] - angle参数是否为角度计算，angle为以弧度计量的角度。 + * @returns {number} 弧度值。 + */ + degreeToRadian(angle) { + return angle * this._radians; + } + + /** + * @function Zondy.LevelRenderer.Tool.Math.prototype.radianToDegree + * @description 弧度转角度。 + * @param {number} angle - 弧度（角度）参数。 + * @param {boolean} [isDegrees=false] - angle参数是否为角度计算，angle为以弧度计量的角度。 + * @returns {number} 角度。 + */ + radianToDegree(angle) { + return angle / this._radians; + } +} + +export {Math}; +Zondy.LevelRenderer.Tool.Math = Math; \ No newline at end of file diff --git a/src/mapboxgl/theme/common/overlay/levelRender/Matrix.js b/src/mapboxgl/theme/common/overlay/levelRender/Matrix.js new file mode 100644 index 000000000..ec3d0a127 --- /dev/null +++ b/src/mapboxgl/theme/common/overlay/levelRender/Matrix.js @@ -0,0 +1,209 @@ +import { Common } from '@mapgis/webclient-es6-service'; +const { Zondy } = Common; + +/** + * @private + * @class Zondy.LevelRenderer.Tool.Matrix + * @classdesc LevelRenderer 工具-3x2矩阵操作类 + */ +class Matrix { + + /** + * @function Zondy.LevelRenderer.Tool.Matrix.constructor + * @description 构造函数。 + */ + constructor() { + /** + * @member {Object} Zondy.LevelRenderer.Tool.Matrix.prototype.ArrayCtor + * @description 数组类型控制 + */ + this.ArrayCtor = typeof Float32Array === 'undefined' + ? Array + : Float32Array; + + this.CLASS_NAME = "Zondy.LevelRenderer.Tool.Matrix"; + } + + /** + * @function Zondy.LevelRenderer.Tool.Matrix.prototype.create + * @description 创建一个单位矩阵。 + * @returns {(Float32Array|Array.)} 单位矩阵。 + */ + create() { + var ArrayCtor = this.ArrayCtor; + var out = new ArrayCtor(6); + this.identity(out); + + return out; + } + + /** + * @function Zondy.LevelRenderer.Tool.Matrix.prototype.identity + * @description 设置矩阵为单位矩阵。 + * @param {(Float32Array|Array.)} out - 单位矩阵。 + * @returns {(Float32Array|Array.)} 单位矩阵。 + */ + identity(out) { + out[0] = 1; + out[1] = 0; + out[2] = 0; + out[3] = 1; + out[4] = 0; + out[5] = 0; + return out; + } + + /** + * @function Zondy.LevelRenderer.Tool.Matrix.prototype.copy + * @description 复制矩阵。 + * @param {(Float32Array|Array.)} out - 单位矩阵。 + * @returns {(Float32Array|Array.)} 克隆矩阵。 + */ + copy(out, m) { + out[0] = m[0]; + out[1] = m[1]; + out[2] = m[2]; + out[3] = m[3]; + out[4] = m[4]; + out[5] = m[5]; + return out; + } + + /** + * @function Zondy.LevelRenderer.Tool.Matrix.prototype.mul + * @description 矩阵相乘。 + * @param {(Float32Array|Array.)} out - 单位矩阵。 + * @param {(Float32Array|Array.)} m1 - 矩阵m1。 + * @param {(Float32Array|Array.)} m2- 矩阵m2。 + * @returns {(Float32Array|Array.)} 结果矩阵。 + */ + mul(out, m1, m2) { + out[0] = m1[0] * m2[0] + m1[2] * m2[1]; + out[1] = m1[1] * m2[0] + m1[3] * m2[1]; + out[2] = m1[0] * m2[2] + m1[2] * m2[3]; + out[3] = m1[1] * m2[2] + m1[3] * m2[3]; + out[4] = m1[0] * m2[4] + m1[2] * m2[5] + m1[4]; + out[5] = m1[1] * m2[4] + m1[3] * m2[5] + m1[5]; + return out; + } + + /** + * @function Zondy.LevelRenderer.Tool.Matrix.prototype.mul + * @description 平移变换。 + * @param {(Float32Array|Array.)} out - 单位矩阵。 + * @param {(Float32Array|Array.)} a - 矩阵。 + * @param {(Float32Array|Array.)} v- 平移参数。 + * @returns {(Float32Array|Array.)} 结果矩阵。 + */ + translate(out, a, v) { + out[0] = a[0]; + out[1] = a[1]; + out[2] = a[2]; + out[3] = a[3]; + out[4] = a[4] + v[0]; + out[5] = a[5] + v[1]; + return out; + } + + /** + * @function Zondy.LevelRenderer.Tool.Matrix.prototype.rotate + * @description 平移变换。 + * @param {(Float32Array|Array.)} out - 单位矩阵。 + * @param {(Float32Array|Array.)} a - 矩阵。 + * @param {(Float32Array|Array.)} rad - 旋转参数。 + * @returns {(Float32Array|Array.)} 结果矩阵。 + */ + rotate(out, a, rad) { + var aa = a[0]; + var ac = a[2]; + var atx = a[4]; + var ab = a[1]; + var ad = a[3]; + var aty = a[5]; + var st = Math.sin(rad); + var ct = Math.cos(rad); + + out[0] = aa * ct + ab * st; + out[1] = -aa * st + ab * ct; + out[2] = ac * ct + ad * st; + out[3] = -ac * st + ct * ad; + out[4] = ct * atx + st * aty; + out[5] = ct * aty - st * atx; + return out; + } + + /** + * @function Zondy.LevelRenderer.Tool.Matrix.prototype.scale + * @description 缩放变换。 + * @param {(Float32Array|Array.)} out - 单位矩阵。 + * @param {(Float32Array|Array.)} a - 矩阵。 + * @param {(Float32Array|Array.)} v - 缩放参数。 + * @returns {(Float32Array|Array.)} 结果矩阵。 + */ + scale(out, a, v) { + var vx = v[0]; + var vy = v[1]; + out[0] = a[0] * vx; + out[1] = a[1] * vy; + out[2] = a[2] * vx; + out[3] = a[3] * vy; + out[4] = a[4] * vx; + out[5] = a[5] * vy; + return out; + } + + /** + * @function Zondy.LevelRenderer.Tool.Matrix.prototype.invert + * @description 求逆矩阵。 + * @param {(Float32Array|Array.)} out - 单位矩阵。 + * @param {(Float32Array|Array.)} a - 矩阵。 + * @returns {(Float32Array|Array.)} 结果矩阵。 + */ + invert(out, a) { + var aa = a[0]; + var ac = a[2]; + var atx = a[4]; + var ab = a[1]; + var ad = a[3]; + var aty = a[5]; + + var det = aa * ad - ab * ac; + if (!det) { + return null; + } + det = 1.0 / det; + + out[0] = ad * det; + out[1] = -ab * det; + out[2] = -ac * det; + out[3] = aa * det; + out[4] = (ac * aty - ad * atx) * det; + out[5] = (ab * atx - aa * aty) * det; + return out; + } + + /** + * @function Zondy.LevelRenderer.Tool.Matrix.prototype.mulVector + * @description 矩阵左乘向量。 + * @param {(Float32Array|Array.)} out - 单位矩阵。 + * @param {(Float32Array|Array.)} a - 矩阵。 + * @param {(Float32Array|Array.)} v - 缩放参数。 + * @returns {(Float32Array|Array.)} 结果矩阵。 + */ + mulVector(out, a, v) { + var aa = a[0]; + var ac = a[2]; + var atx = a[4]; + var ab = a[1]; + var ad = a[3]; + var aty = a[5]; + + out[0] = v[0] * aa + v[1] * ac + atx; + out[1] = v[0] * ab + v[1] * ad + aty; + + return out; + } +} + +export {Matrix}; +Zondy.LevelRenderer.Tool.Matrix = Matrix; diff --git a/src/mapboxgl/theme/common/overlay/levelRender/Painter.js b/src/mapboxgl/theme/common/overlay/levelRender/Painter.js new file mode 100644 index 000000000..221e52dc4 --- /dev/null +++ b/src/mapboxgl/theme/common/overlay/levelRender/Painter.js @@ -0,0 +1,1114 @@ +import { Common } from '@mapgis/webclient-es6-service'; +const { Zondy, newGuid } = Common; + +import {Util} from './Util'; +import {Transformable} from './Transformable'; +import {Config} from './Config'; +import {SUtil} from './SUtil'; +import {SmicImage} from './SmicImage'; + +/** + * @private + * @class Zondy.LevelRenderer.Painter + * @classdesc Painter 绘图模块。 + */ +class Painter { + + /** + * @function Zondy.LevelRenderer.Painter.constructor + * @description 构造函数。 + * + * @param {HTMLElement} root - 绘图区域（DIV）。 + * @param {Zondy.LevelRenderer.Storage} storage - Storage 实例。 + * + */ + constructor(root, storage) { + /** + * @member {HTMLElement} Zondy.LevelRenderer.Painter.prototype.root + * @description 绘图容器。 + * + */ + this.root = root; + + /** + * @member {Array} Zondy.LevelRenderer.Painter.prototype.storage + * @description 图形仓库。 + * + */ + this.storage = storage; + + /** + * @member {HTMLElement} Zondy.LevelRenderer.Painter.prototype._domRoot + * @description 容器根 dom 对象。 + * + */ + this._domRoot = null; + + /** + * @member {Object} Zondy.LevelRenderer.Painter.prototype._layers + * @description 绘制层对象。 + * + */ + this._layers = {}; + + /** + * @member {Array} Zondy.LevelRenderer.Painter.prototype._zlevelList + * @description 层列表。 + * + */ + this._zlevelList = []; + + /** + * @member {Object} Zondy.LevelRenderer.Painter.prototype._layerConfig + * @description 绘制层配置对象。 + * + */ + this._layerConfig = {}; + + /** + * @member {Object} Zondy.LevelRenderer.Painter.prototype._bgDom + * @description 背景层 Canvas （Dom）。 + * + */ + this._bgDom = null; + + /** + * @member {Function} Zondy.LevelRenderer.Painter.prototype.shapeToImage + * @description 形状转图像函数。 + * + */ + this.shapeToImage = null; + // retina 屏幕优化 + Painter.devicePixelRatio = Math.max((window.devicePixelRatio || 1), 1); + + this.CLASS_NAME = "Zondy.LevelRenderer.Painter"; + this.root.innerHTML = ''; + this._width = this._getWidth(); // 宽，缓存记录 + this._height = this._getHeight(); // 高，缓存记录 + + var domRoot = document.createElement('div'); + this._domRoot = domRoot; + + // domRoot.onselectstart = returnFalse; // 避免页面选中的尴尬 + domRoot.style.position = 'relative'; + domRoot.style.overflow = 'hidden'; + domRoot.style.width = this._width + 'px'; + domRoot.style.height = this._height + 'px'; + this.root.appendChild(domRoot); + + this.shapeToImage = this._createShapeToImageProcessor(); + + // 创建各层canvas + // 背景 + //this._bgDom = Painter.createDom('bg', 'div', this); + this._bgDom = Painter.createDom(newGuid(), 'div', this); + domRoot.appendChild(this._bgDom); + this._bgDom.onselectstart = returnFalse; + this._bgDom.style['-webkit-user-select'] = 'none'; + this._bgDom.style['user-select'] = 'none'; + this._bgDom.style['-webkit-touch-callout'] = 'none'; + + // 高亮 + //var hoverLayer = new PaintLayer('_hoverLayer_', this); + var hoverLayer = new PaintLayer(newGuid(), this); + this._layers['hover'] = hoverLayer; + domRoot.appendChild(hoverLayer.dom); + hoverLayer.initContext(); + + hoverLayer.dom.onselectstart = returnFalse; + hoverLayer.dom.style['-webkit-user-select'] = 'none'; + hoverLayer.dom.style['user-select'] = 'none'; + hoverLayer.dom.style['-webkit-touch-callout'] = 'none'; + + var me = this; + this.updatePainter = function (shapeList, callback) { + me.refreshShapes(shapeList, callback); + }; + + // 返回false的方法，用于避免页面被选中 + function returnFalse() { + return false; + } + + /* eslint-disable */ + + // 什么都不干的空方法 + function doNothing() { //NOSONAR + } + + /* eslint-enable */ + } + + /** + * @function Zondy.LevelRenderer.Painter.prototype.destroy + * @description 销毁对象，释放资源。调用此函数后所有属性将被置为 null。 + */ + destroy() { + this.dispose(); + this._zlevelList = null; + this._layerConfig = null; + this._bgDom = null; + this.shapeToImage = null; + } + + /** + * @function Zondy.LevelRenderer.Painter.prototype.render + * @description 渲染。首次绘图，创建各种 dom 和 context。 + * + * @param {Function} callback - 绘画结束后的回调函数。 + * @return {Zondy.LevelRenderer.Painter} this。 + */ + render(callback) { + // TODO + this.refresh(callback, true); + + return this; + } + + /** + * @function Zondy.LevelRenderer.Painter.prototype.refresh + * @description 刷新。 + * + * @param {Function} callback - 刷新结束后的回调函数。 + * @param {boolean} paintAll - 强制绘制所有 shape。 + * @return {Zondy.LevelRenderer.Painter} this。 + */ + refresh(callback, paintAll) { + var list = this.storage.getShapeList(true); + this._paintList(list, paintAll); + + if (typeof callback == 'function') { + callback(); + } + + return this; + } + + /** + * Method: _paintList + * 按列表绘制图形。 + */ + _paintList(list, paintAll) { + if (typeof (paintAll) == 'undefined') { + paintAll = false; + } + + this._updateLayerStatus(list); + + var currentLayer; + var currentZLevel; + var ctx; + + for (var id in this._layers) { + if (id !== 'hover') { + this._layers[id].unusedCount++; + this._layers[id].updateTransform(); + } + } + + var invTransform = []; + + for (var i = 0, l = list.length; i < l; i++) { + var shape = list[i]; + + if (currentZLevel !== shape.zlevel) { + if (currentLayer && currentLayer.needTransform) { + ctx.restore(); + } + + currentLayer = this.getLayer(shape.zlevel); + ctx = currentLayer.ctx; + currentZLevel = shape.zlevel; + + // Reset the count + currentLayer.unusedCount = 0; + + if (currentLayer.dirty || paintAll) { + currentLayer.clear(); + } + + if (currentLayer.needTransform) { + ctx.save(); + currentLayer.setTransform(ctx); + } + } + + // Start group clipping + if (ctx && shape.__startClip) { + var clipShape = shape.__startClip; + ctx.save(); + // Set transform + if (clipShape.needTransform) { + let m = clipShape.transform; + SUtil.Util_matrix.invert(invTransform, m); + ctx.transform( + m[0], m[1], + m[2], m[3], + m[4], m[5] + ); + } + + ctx.beginPath(); + clipShape.buildPath(ctx, clipShape.style); + ctx.clip(); + + // Transform back + if (clipShape.needTransform) { + let m = invTransform; + ctx.transform( + m[0], m[1], + m[2], m[3], + m[4], m[5] + ); + } + } + + if (((currentLayer && currentLayer.dirty) || paintAll) && !shape.invisible) { + if ( + !shape.onbrush + || (shape.onbrush && !shape.onbrush(ctx, false)) + ) { + if (Config.catchBrushException) { + try { + shape.brush(ctx, false, this.updatePainter); + } catch (error) { + } + } else { + shape.brush(ctx, false, this.updatePainter); + } + } + } + + // Stop group clipping + if (ctx && shape.__stopClip) { + ctx.restore(); + } + + shape.__dirty = false; + } + + if (ctx && currentLayer && currentLayer.needTransform) { + ctx.restore(); + } + + for (let id in this._layers) { + if (id !== 'hover') { + var layer = this._layers[id]; + layer.dirty = false; + // 删除过期的层 + // PENDING + // if (layer.unusedCount >= 500) { + // this.delLayer(id); + // } + if (layer.unusedCount === 1) { + layer.clear(); + } + } + } + + } + + /** + * @function Zondy.LevelRenderer.Painter.prototype.getLayer + * @description 获取 zlevel 所在层，如果不存在则会创建一个新的层。 + * + * @param {number} zlevel - zlevel。 + * @return {Zondy.LevelRenderer.Painter} this。 + */ + getLayer(zlevel) { + // Change draw layer + var currentLayer = this._layers[zlevel]; + if (!currentLayer) { + var len = this._zlevelList.length; + var prevLayer = null; + var i = -1; + if (len > 0 && zlevel > this._zlevelList[0]) { + for (i = 0; i < len - 1; i++) { + if ( + this._zlevelList[i] < zlevel + && this._zlevelList[i + 1] > zlevel + ) { + break; + } + } + prevLayer = this._layers[this._zlevelList[i]]; + } + this._zlevelList.splice(i + 1, 0, zlevel); + + // Create a new layer + //currentLayer = new PaintLayer(zlevel, this); + currentLayer = new PaintLayer(newGuid(), this); + var prevDom = prevLayer ? prevLayer.dom : this._bgDom; + if (prevDom.nextSibling) { + prevDom.parentNode.insertBefore( + currentLayer.dom, + prevDom.nextSibling + ); + } else { + prevDom.parentNode.appendChild( + currentLayer.dom + ); + } + currentLayer.initContext(); + + this._layers[zlevel] = currentLayer; + + if (this._layerConfig[zlevel]) { + new Util().merge(currentLayer, this._layerConfig[zlevel], true); + } + + currentLayer.updateTransform(); + } + + return currentLayer; + } + + /** + * @function Zondy.LevelRenderer.Painter.prototype.getLayers + * @description 获取所有已创建的层。 + * @return {Array.} 已创建的层 + */ + getLayers() { + return this._layers; + } + + /** + * Method: _updateLayerStatus + * 更新绘制层状态。 + */ + _updateLayerStatus(list) { + var layers = this._layers; + + var elCounts = {}; + for (let z in layers) { + if (z !== 'hover') { + elCounts[z] = layers[z].elCount; + layers[z].elCount = 0; + } + } + + for (let i = 0; i < list.length; i++) { + var shape = list[i]; + var zlevel = shape.zlevel; + var layer = layers[zlevel]; + if (layer) { + layer.elCount++; + // 已经被标记为需要刷新 + if (layer.dirty) { + continue; + } + layer.dirty = shape.__dirty; + } + } + + // 层中的元素数量有发生变化 + for (let z in layers) { + if (z !== 'hover') { + if (elCounts[z] !== layers[z].elCount) { + layers[z].dirty = true; + } + } + } + } + + /** + * @function Zondy.LevelRenderer.Painter.prototype.refreshShapes + * @description 更新的图形元素列表。 + * + * @param {number} shapeList - 需要更新的图形元素列表。 + * @param {number} callback - 视图更新后回调函数。 + * @return {Zondy.LevelRenderer.Painter} this。 + */ + refreshShapes(shapeList, callback) { + for (var i = 0, l = shapeList.length; i < l; i++) { + var shape = shapeList[i]; + this.storage.mod(shape.id); + } + + this.refresh(callback); + return this; + } + + /** + * @function Zondy.LevelRenderer.Painter.prototype.clear + * @description 清除 hover 层外所有内容。 + * @return {Zondy.LevelRenderer.Painter} this。 + */ + clear() { + for (var k in this._layers) { + if (k === 'hover') { + continue; + } + this._layers[k].clear(); + } + + return this; + } + + /** + * @function Zondy.LevelRenderer.Painter.prototype.modLayer + * @description 修改指定 zlevel 的绘制参数。 + * + * @param {string} zlevel - zlevel。 + * @param {Object} config - 配置对象。 + * @param {string} [config.clearColor=0] - 每次清空画布的颜色。 + * @param {boolean} [config.motionBlur=false] - 是否开启动态模糊。 + * @param {number} [config.lastFrameAlpha=0.7] - 在开启动态模糊的时候使用，与上一帧混合的alpha值，值越大尾迹越明显。默认值：0.7。 + * @param {Array.} config.position - 层的平移。 + * @param {Array.} config.rotation - 层的旋转。 + * @param {Array.} config.scale - 层的缩放。 + * @param {boolean} config.zoomable - 层是否支持鼠标缩放操作。默认值：false。 + * @param {boolean} config.panable - 层是否支持鼠标平移操作。默认值：false。 + * + */ + modLayer(zlevel, config) { + if (config) { + if (!this._layerConfig[zlevel]) { + this._layerConfig[zlevel] = config; + } else { + new Util().merge(this._layerConfig[zlevel], config, true); + } + + var layer = this._layers[zlevel]; + + if (layer) { + new Util().merge(layer, this._layerConfig[zlevel], true); + } + } + } + + /** + * @function Zondy.LevelRenderer.Painter.prototype.delLayer + * @description 删除指定层。 + * + * @param {string} zlevel - 层所在的 zlevel。 + */ + delLayer(zlevel) { + var layer = this._layers[zlevel]; + if (!layer) { + return; + } + // Save config + this.modLayer(zlevel, { + position: layer.position, + rotation: layer.rotation, + scale: layer.scale + }); + layer.dom.parentNode.removeChild(layer.dom); + delete this._layers[zlevel]; + + this._zlevelList.splice(new Util().indexOf(this._zlevelList, zlevel), 1); + } + + /** + * @function Zondy.LevelRenderer.Painter.prototype.refreshHover + * @description 刷新 hover 层。 + * @return {Zondy.LevelRenderer.Painter} this。 + */ + refreshHover() { + this.clearHover(); + var list = this.storage.getHoverShapes(true); + for (var i = 0, l = list.length; i < l; i++) { + this._brushHover(list[i]); + } + this.storage.delHover(); + + return this; + } + + /** + * @function Zondy.LevelRenderer.Painter.prototype.clearHover + * @description 清除 hover 层所有内容。 + * @return {Zondy.LevelRenderer.Painter} this。 + */ + clearHover() { + var hover = this._layers.hover; + hover && hover.clear(); + + return this; + } + + /** + * @function Zondy.LevelRenderer.Painter.prototype.resize + * @description 区域大小变化后重绘。 + * @return {Zondy.LevelRenderer.Painter} this。 + */ + resize() { + var domRoot = this._domRoot; + domRoot.style.display = 'none'; + + var width = this._getWidth(); + var height = this._getHeight(); + + domRoot.style.display = ''; + + // 优化没有实际改变的resize + if (this._width !== width || height !== this._height) { + this._width = width; + this._height = height; + + domRoot.style.width = width + 'px'; + domRoot.style.height = height + 'px'; + + for (var id in this._layers) { + + this._layers[id].resize(width, height); + } + + this.refresh(null, true); + } + + return this; + } + + /** + * @function Zondy.LevelRenderer.Painter.prototype.clearLayer + * @description 清除指定的一个层。 + * @param {number} zLevel - 层。 + */ + clearLayer(zLevel) { + var layer = this._layers[zLevel]; + if (layer) { + layer.clear(); + } + } + + /** + * @function Zondy.LevelRenderer.Painter.prototype.dispose + * @description 释放。 + * + */ + dispose() { + this.root.innerHTML = ''; + + this.root = null; + this.storage = null; + this._domRoot = null; + this._layers = null; + } + + /** + * @function Zondy.LevelRenderer.Painter.prototype.getDomHover + * @description 获取 Hover 层的 Dom。 + */ + getDomHover() { + return this._layers.hover.dom; + } + + /** + * @function Zondy.LevelRenderer.Painter.prototype.toDataURL + * @description 图像导出。 + * @param {string} type - 图片类型。 + * @param {string} backgroundColor - 背景色。默认值：'#fff'。 + * @param {Object} args + * @return {string} 图片的Base64 url。 + */ + toDataURL(type, backgroundColor, args) { + //var imageDom = Painter.createDom('image', 'canvas', this); + var imageDom = Painter.createDom(newGuid(), 'canvas', this); + this._bgDom.appendChild(imageDom); + var ctx = imageDom.getContext('2d'); + Painter.devicePixelRatio !== 1 + && ctx.scale(Painter.devicePixelRatio, Painter.devicePixelRatio); + + ctx.fillStyle = backgroundColor || '#fff'; + ctx.rect( + 0, 0, + this._width * Painter.devicePixelRatio, + this._height * Painter.devicePixelRatio + ); + ctx.fill(); + + var self = this; + // 升序遍历，shape上的zlevel指定绘画图层的z轴层叠 + + this.storage.iterShape( + function (shape) { + if (!shape.invisible) { + if (!shape.onbrush // 没有onbrush + // 有onbrush并且调用执行返回false或undefined则继续粉刷 + || (shape.onbrush && !shape.onbrush(ctx, false)) + ) { + if (Config.catchBrushException) { + try { + shape.brush(ctx, false, self.updatePainter); + } catch (error) { + } + } else { + shape.brush(ctx, false, self.updatePainter); + } + } + } + }, + { + normal: 'up', + update: true + } + ); + var image = imageDom.toDataURL(type, args); + ctx = null; + this._bgDom.removeChild(imageDom); + return image; + } + + /** + * @function Zondy.LevelRenderer.Painter.prototype.getWidth + * @description 获取绘图区域宽度。 + * @return {number} 绘图区域宽度。 + */ + getWidth() { + return this._width; + } + + /** + * @function Zondy.LevelRenderer.Painter.prototype.getHeight + * @description 获取绘图区域高度。 + * @return {number} 绘图区域高度。 + */ + getHeight() { + return this._height; + } + + /** + * Method: _getWidth + * + */ + _getWidth() { + var root = this.root; + var stl = root.currentStyle + || document.defaultView.getComputedStyle(root); + + return ((root.clientWidth || parseInt(stl.width, 10)) + - parseInt(stl.paddingLeft, 10) + - parseInt(stl.paddingRight, 10)).toFixed(0) - 0; + } + + /** + * Method: _getHeight + * + */ + _getHeight() { + var root = this.root; + var stl = root.currentStyle + || document.defaultView.getComputedStyle(root); + + return ((root.clientHeight || parseInt(stl.height, 10)) + - parseInt(stl.paddingTop, 10) + - parseInt(stl.paddingBottom, 10)).toFixed(0) - 0; + } + + /** + * Method: _brushHover + * + */ + _brushHover(shape) { + var ctx = this._layers.hover.ctx; + + if (!shape.onbrush // 没有onbrush + // 有onbrush并且调用执行返回false或undefined则继续粉刷 + || (shape.onbrush && !shape.onbrush(ctx, true)) + ) { + var layer = this.getLayer(shape.zlevel); + if (layer.needTransform) { + ctx.save(); + layer.setTransform(ctx); + } + // Retina 优化 + if (Config.catchBrushException) { + try { + shape.brush(ctx, true, this.updatePainter); + } catch (error) { + } + } else { + shape.brush(ctx, true, this.updatePainter); + } + if (layer.needTransform) { + ctx.restore(); + } + } + + } + + /** + * Method: _shapeToImage + * + */ + _shapeToImage(id, shape, width, height, devicePixelRatio) { + var canvas = document.createElement('canvas'); + var ctx = canvas.getContext('2d'); + var _devicePixelRatio = devicePixelRatio || window.devicePixelRatio || 1; + + canvas.style.width = width + 'px'; + canvas.style.height = height + 'px'; + canvas.setAttribute('width', width * _devicePixelRatio); + canvas.setAttribute('height', height * _devicePixelRatio); + + ctx.clearRect(0, 0, width * _devicePixelRatio, height * _devicePixelRatio); + + var shapeTransform = { + position: shape.position, + rotation: shape.rotation, + scale: shape.scale + }; + shape.position = [0, 0, 0]; + shape.rotation = 0; + shape.scale = [1, 1]; + if (shape) { + shape.brush(ctx, false); + } + + var imgShape = new SmicImage({ + id: id, + style: { + x: 0, + y: 0, + image: canvas + } + }); + + if (shapeTransform.position != null) { + imgShape.position = shape.position = shapeTransform.position; + } + + if (shapeTransform.rotation != null) { + imgShape.rotation = shape.rotation = shapeTransform.rotation; + } + + if (shapeTransform.scale != null) { + imgShape.scale = shape.scale = shapeTransform.scale; + } + + return imgShape; + } + + /** + * Method: _createShapeToImageProcessor + * + */ + _createShapeToImageProcessor() { + var me = this; + + return function (id, e, width, height) { + return me._shapeToImage( + id, e, width, height, Painter.devicePixelRatio + ); + }; + } + + // SMIC-方法扩展 - start + /** + * @function Zondy.LevelRenderer.Painter.prototype.updateHoverLayer + * @description 更新设置显示高亮图层。 + * @param {Array} shapes - 图形数组。 + */ + updateHoverLayer(shapes) { + if (!(shapes instanceof Array)) { + return this; + } + + //清除高亮 + this.clearHover(); + this.storage.delHover(); + + for (var i = 0; i < shapes.length; i++) { + this.storage.addHover(shapes[i]); + this._brushHover(shapes[i]); + } + } + + /** + * @function Zondy.LevelRenderer.Painter.prototype.createDom + * @description 创建 Dom。 + * + * @param {string} id - Dom id + * @param {string} type - Dom type + * @param {Zondy.LevelRenderer.Painter} painter - Painter 实例。 + * @return {Object} Dom + */ + static createDom(id, type, painter) { + var newDom = document.createElement(type); + var width = painter._width; + var height = painter._height; + + newDom.style.position = 'absolute'; + newDom.style.left = 0; + newDom.style.top = 0; + newDom.style.width = width + 'px'; + newDom.style.height = height + 'px'; + newDom.setAttribute('width', width * Painter.devicePixelRatio); + newDom.setAttribute('height', height * Painter.devicePixelRatio); + + // id不作为索引用，避免可能造成的重名，定义为私有属性 + //newDom.setAttribute('data-zr-dom-id', id); + newDom.setAttribute('id', id); + return newDom; + } +} + +/** + * @private + * @class Painter.Layer + * @classdesc 绘制层类。 + * @extends Zondy.LevelRenderer.Transformable + */ +class PaintLayer extends Transformable { + + /** + * @function Painter.Layer.constructor + * @description 构造函数。 + * + * @param {string} id - id。 + * @param {Zondy.LevelRenderer.Painter} painter - Painter 实例。 + * + */ + constructor(id, painter) { + super(id, painter); + /** + * @member {Object} Painter.Layer.prototype.dom + * @description dom。 + */ + this.dom = null; + + /** + * @member {Object} Painter.Layer.prototype.domBack + * @description domBack。 + */ + this.domBack = null; + + /** + * @member {Object} Painter.Layer.prototype.ctxBack + * @description ctxBack。 + */ + this.ctxBack = null; + + /** + * @member {Zondy.LevelRenderer.Painter} Painter.Layer.prototype.painter + * @description painter。 + */ + this.painter = painter; + + /** + * @member {number} Painter.Layer.prototype.unusedCount + * @description unusedCount。 + */ + this.unusedCount = 0; + + /** + * @member {Object} Painter.Layer.prototype.config + * @description config。 + */ + this.config = null; + + /** + * @member {boolean} Painter.Layer.prototype.dirty + * @description dirty。 + */ + this.dirty = true; + + /** + * @member {number} Painter.Layer.prototype.elCount + * @description elCount。 + */ + this.elCount = 0; + + // Configs + /** + * @member {string} Painter.Layer.prototype.clearColor + * @description 每次清空画布的颜色。默认值：0； + */ + this.clearColor = 0; + + /** + * @member {boolean} Painter.Layer.prototype.motionBlur + * @description 是否开启动态模糊。默认值：false； + */ + this.motionBlur = false; + + /** + * @member {number} Painter.Layer.prototype.lastFrameAlpha + * @description 在开启动态模糊的时候使用，与上一帧混合的alpha值，值越大尾迹越明显 + */ + this.lastFrameAlpha = 0.7; + + /** + * @member {boolean} Painter.Layer.prototype.zoomable + * @description 层是否支持鼠标平移操作。默认值：false； + */ + this.zoomable = false; + + /** + * @member {boolean} Painter.Layer.prototype.panable + * @description 层是否支持鼠标缩放操作。默认值：false； + */ + this.panable = false; + + /** + * @member {number} Painter.Layer.prototype.maxZoom + * @description maxZoom。默认值：Infinity。 + */ + this.maxZoom = Infinity; + + /** + * @member {number} Painter.Layer.prototype.minZoom + * @description minZoom。默认值：0。 + */ + this.minZoom = 0; + + /** + * @member {number} Painter.Layer.prototype.ctx + * @description Canvas 上下文。 + */ + this.ctx = null; + this.dom = Painter.createDom(newGuid(), 'canvas', painter); + this.dom.onselectstart = returnFalse; // 避免页面选中的尴尬 + this.dom.style['-webkit-user-select'] = 'none'; + this.dom.style['user-select'] = 'none'; + this.dom.style['-webkit-touch-callout'] = 'none'; + // Function + // 返回false的方法，用于避免页面被选中 + function returnFalse() { + return false; + } + + this.CLASS_NAME = "Zondy.LevelRenderer.Painter.Layer"; + } + + /** + * @function Painter.Layer.prototype.destroy + * @description 销毁对象，释放资源。调用此函数后所有属性将被置为 null。 + */ + destroy() { + this.dom = null; + this.domBack = null; + this.ctxBack = null; + this.painter = null; + this.unusedCount = null; + this.config = null; + this.dirty = null; + this.elCount = null; + this.clearColor = null; + this.motionBlur = null; + this.lastFrameAlpha = null; + this.zoomable = null; + this.panable = null; + this.maxZoom = null; + this.minZoom = null; + this.ctx = null; + + Transformable.destroy.apply(this, arguments); + } + + /** + * @function Painter.Layer.prototype.initContext + * @description 初始化 Canvan 2D 上下文。 + */ + initContext() { + this.ctx = this.dom.getContext('2d'); + if (Painter.devicePixelRatio !== 1) { + this.ctx.scale(Painter.devicePixelRatio, Painter.devicePixelRatio); + } + } + + /** + * @function Painter.Layer.prototype.createBackBuffer + * @description 创建备份缓冲。 + */ + createBackBuffer() { + this.domBack = Painter.createDom(newGuid(), 'canvas', this.painter); + this.ctxBack = this.domBack.getContext('2d'); + + if (Painter.devicePixelRatio !== 1) { + this.ctxBack.scale(Painter.devicePixelRatio, Painter.devicePixelRatio); + } + } + + /** + * @function Painter.Layer.prototype.resize + * @description 改变大小。 + * + * @param {number} width - 宽。 + * @param {number} height - 高。 + */ + resize(width, height) { + this.dom.style.width = width + 'px'; + this.dom.style.height = height + 'px'; + + this.dom.setAttribute('width', width * Painter.devicePixelRatio); + this.dom.setAttribute('height', height * Painter.devicePixelRatio); + + if (Painter.devicePixelRatio !== 1) { + this.ctx.scale(Painter.devicePixelRatio, Painter.devicePixelRatio); + } + + if (this.domBack) { + this.domBack.setAttribute('width', width * Painter.devicePixelRatio); + this.domBack.setAttribute('height', height * Painter.devicePixelRatio); + + if (Painter.devicePixelRatio !== 1) { + this.ctxBack.scale(Painter.devicePixelRatio, Painter.devicePixelRatio); + } + } + } + + /** + * @function Painter.Layer.prototype.clear + * @description 清空该层画布。 + */ + clear() { + var dom = this.dom; + var ctx = this.ctx; + var width = dom.width; + var height = dom.height; + + var haveClearColor = this.clearColor; + var haveMotionBLur = this.motionBlur; + var lastFrameAlpha = this.lastFrameAlpha; + + if (haveMotionBLur) { + if (!this.domBack) { + this.createBackBuffer(); + } + + this.ctxBack.globalCompositeOperation = 'copy'; + this.ctxBack.drawImage( + dom, 0, 0, + width / Painter.devicePixelRatio, + height / Painter.devicePixelRatio + ); + } + + if (haveClearColor) { + ctx.save(); + ctx.fillStyle = this.config.clearColor; + ctx.fillRect( + 0, 0, + width / Painter.devicePixelRatio, + height / Painter.devicePixelRatio + ); + ctx.restore(); + } else { + ctx.clearRect( + 0, 0, + width / Painter.devicePixelRatio, + height / Painter.devicePixelRatio + ); + } + + if (haveMotionBLur) { + var domBack = this.domBack; + ctx.save(); + ctx.globalAlpha = lastFrameAlpha; + ctx.drawImage( + domBack, 0, 0, + width / Painter.devicePixelRatio, + height / Painter.devicePixelRatio + ); + ctx.restore(); + } + } +} + +export {Painter}; +Zondy.LevelRenderer.Painter = Painter; +export {PaintLayer}; +Zondy.LevelRenderer.PaintLayer = PaintLayer; \ No newline at end of file diff --git a/src/mapboxgl/theme/common/overlay/levelRender/Render.js b/src/mapboxgl/theme/common/overlay/levelRender/Render.js new file mode 100644 index 000000000..8ced1f095 --- /dev/null +++ b/src/mapboxgl/theme/common/overlay/levelRender/Render.js @@ -0,0 +1,545 @@ +import { Common } from '@mapgis/webclient-es6-service'; +const { Zondy, indexOf, newGuid } = Common; +import {Storage} from './Storage'; +import {Painter} from './Painter'; +import {Handler} from './Handler'; +import {Animation} from './Animation'; + +/** + * @private + * @class Zondy.LevelRenderer.Render + * @classdesc Render 接口类，对外可用的所有接口都在这里。内部使用非 get 接口统一返回 this 对象，支持链式调用。 + */ + +class Render { + + /** + * @function Zondy.LevelRenderer.Render.constructor + * @description 构造函数。 + * + * @param {string} id - 唯一标识。 + * @param {HTMLElement} dom - Dom 对象。 + */ + constructor(id, dom) { + /** + * @member {string} Zondy.LevelRenderer.Render.prototype.id + * @description 唯一标识。 + */ + this.id = id; + + /** + * @member {Zondy.LevelRenderer.Storage} Zondy.LevelRenderer.Render.prototype.storage + * @description 图形仓库对象。 + */ + this.storage = new Storage(); + + /** + * @member {Zondy.LevelRenderer.Painter} Zondy.LevelRenderer.Render.prototype.painter + * @description 绘制器对象。 + * + */ + this.painter = new Painter(dom, this.storage); + + /** + * @member {Zondy.LevelRenderer.Handler} Zondy.LevelRenderer.Render.prototype.handler + * @description 事件处理对象。 + * + */ + this.handler = new Handler(dom, this.storage, this.painter); + + /** + * @member {Array} Zondy.LevelRenderer.Render.prototype.animatingElements + * @description 动画控制数组。 + * + */ + this.animatingElements = []; + + /** + * @member {Zondy.LevelRenderer.animation.Animation} Zondy.LevelRenderer.Render.prototype.animation + * @description 动画对象。 + * + */ + this.animation = new Animation({ + stage: { + update: Render.getFrameCallback(this) + } + }); + + /** + * @member {boolean} Zondy.LevelRenderer.Render.prototype._needsRefreshNextFrame + * @description 是否需要刷新下一帧。 + * + */ + this._needsRefreshNextFrame = false; + this.animation.start(); + this.CLASS_NAME = "Zondy.LevelRenderer.Render"; + + } + + /** + * @function Zondy.LevelRenderer.Render.prototype.destory + * @description 销毁对象，释放资源。调用此函数后所有属性将被置为 null。 + */ + destroy() { + this.id = null; + this.storage = null; + this.painter = null; + this.handler = null; + this.animatingElements = null; + this.animation = null; + this._needsRefreshNextFrame = null; + } + + /** + * @function Zondy.LevelRenderer.Render.prototype.getId + * @description 获取实例唯一标识。 + * @return {string} 实例唯一标识。 + */ + getId() { + return this.id; + } + + /** + * @function Zondy.LevelRenderer.Render.prototype.addShape + * @description 添加图形形状到根节点。 + * + * @param {Zondy.LevelRenderer.Shape} shape - 图形对象，可用属性全集，详见各 shape。 + * @return {Zondy.LevelRenderer.Render} this。 + */ + addShape(shape) { + this.storage.addRoot(shape); + return this; + } + + /** + * @function Zondy.LevelRenderer.Render.prototype.addGroup + * @description 添加组到根节点。 + * + * (code) + * //添加组到根节点例子 + * var render = new Zondy.LevelRenderer.Render("Render",document.getElementById('lRendertest')); + * render.clear(); + * var g = new Zondy.LevelRenderer.Group(); + * g.addChild(new Zondy.LevelRenderer.Shape.Circle({ + * style: { + * x: 100, + * y: 100, + * r: 20, + * brushType: 'fill' + * } + * })); + * render.addGroup(g); + * render.render(); + * (end) + * + * @param {Zondy.LevelRenderer.Group} group - 组对象。 + * @return {Zondy.LevelRenderer.Render} this。 + */ + addGroup(group) { + this.storage.addRoot(group); + return this; + } + + /** + * @function Zondy.LevelRenderer.Render.prototype.delShape + * @description 从根节点删除图形形状。 + * + * @param {string} shapeId - 图形对象唯一标识。 + * @return {Zondy.LevelRenderer.Render} this。 + */ + delShape(shapeId) { + this.storage.delRoot(shapeId); + return this; + } + + /** + * @function Zondy.LevelRenderer.Render.prototype.delGroup + * @description 从根节点删除组。 + * + * @param {string} groupId - 组对象唯一标识。 + * @return {Zondy.LevelRenderer.Render} this。 + */ + delGroup(groupId) { + this.storage.delRoot(groupId); + return this; + } + + /** + * @function Zondy.LevelRenderer.Render.prototype.modShape + * @description 修改图形形状。 + * + * @param {string} shapeId - 图形对象唯一标识。 + * @param {Zondy.LevelRenderer.Shape} shape - 图形对象。 + * @return {Zondy.LevelRenderer.Render} this。 + */ + modShape(shapeId, shape) { + this.storage.mod(shapeId, shape); + return this; + } + + /** + * @function Zondy.LevelRenderer.Render.prototype.modGroup + * @description 修改组。 + * + * @param {string} groupId - 组对象唯一标识。 + * @param {Zondy.LevelRenderer.Group} group - 组对象。 + * @return {Zondy.LevelRenderer.Render} this。 + */ + modGroup(groupId, group) { + this.storage.mod(groupId, group); + return this; + } + + /** + * @function Zondy.LevelRenderer.Render.prototype.modLayer + * @description 修改指定 zlevel 的绘制配置项。 + * + * @param {string} zLevel - 组对象唯一标识。 + * @param {Object} config - 配置对象。 + * @param {string} clearColor - 每次清空画布的颜色。默认值：0。 + * @param {boolean} motionBlur - 是否开启动态模糊。默认值：false。 + * @param {number} lastFrameAlpha - 在开启动态模糊的时候使用，与上一帧混合的alpha值，值越大尾迹越明显。默认值：0.7。 + * @param {Array.} position - 层的平移。 + * @param {Array.} rotation - 层的旋转。 + * @param {Array.} scale - 层的缩放。 + * @param {boolean} zoomable - 层是否支持鼠标缩放操作。默认值：false。 + * @param {boolean} panable - 层是否支持鼠标平移操作。默认值：false。 + * @return {Zondy.LevelRenderer.Render} this。 + */ + modLayer(zLevel, config) { + this.painter.modLayer(zLevel, config); + return this; + } + + /** + * @function Zondy.LevelRenderer.Render.prototype.addHoverShape + * @description 添加额外高亮层显示，仅提供添加方法，每次刷新后高亮层图形均被清空。 + * + * @param {Zondy.LevelRenderer.Shape} shape - 图形对象。 + * @return {Zondy.LevelRenderer.Render} this。 + */ + addHoverShape(shape) { + this.storage.addHover(shape); + return this; + } + + /** + * @function Zondy.LevelRenderer.Render.prototype.render + * @description 渲染。 + * + * @callback {Function} callback - 渲染结束后回调函数。 + * @return {Zondy.LevelRenderer.Render} this。 + */ + render(callback) { + this.painter.render(callback); + this._needsRefreshNextFrame = false; + return this; + } + + /** + * @function Zondy.LevelRenderer.Render.prototype.refresh + * @description 视图更新。 + * + * @callback {Function} callback - 视图更新后回调函数。 + * @return {Zondy.LevelRenderer.Render} this。 + */ + refresh(callback) { + this.painter.refresh(callback); + this._needsRefreshNextFrame = false; + return this; + } + + /** + * @function Zondy.LevelRenderer.Render.prototype.refreshNextFrame + * @description 标记视图在浏览器下一帧需要绘制。 + * @return {Zondy.LevelRenderer.Render} this。 + */ + refreshNextFrame() { + this._needsRefreshNextFrame = true; + return this; + } + + /** + * @function Zondy.LevelRenderer.Render.prototype.refreshHover + * @description 绘制（视图更新）高亮层。 + * @callback {Function} callback - 视图更新后回调函数。 + * @return {Zondy.LevelRenderer.Render} this。 + */ + refreshHover(callback) { + this.painter.refreshHover(callback); + return this; + } + + /** + * @function Zondy.LevelRenderer.Render.prototype.refreshShapes + * @description 视图更新。 + * + * @param {Array.} shapeList - 需要更新的图形列表。 + * @callback {Function} callback - 视图更新后回调函数。 + * @return {Zondy.LevelRenderer.Render} this。 + */ + refreshShapes(shapeList, callback) { + this.painter.refreshShapes(shapeList, callback); + return this; + } + + /** + * @function Zondy.LevelRenderer.Render.prototype.resize + * @description 调整视图大小。 + * @return {Zondy.LevelRenderer.Render} this。 + */ + resize() { + this.painter.resize(); + return this; + } + + /** + * @function Zondy.LevelRenderer.Render.prototype.animate + * @description 动画。 + * + * @example + * zr.animate(circle.id, 'style', false) + * .when(1000, {x: 10} ) + * .done(function(){ // Animation done }) + * .start() + * + * + * @param {Array.<(Zondy.LevelRenderer.Shape/Zondy.LevelRenderer.Group)>} el - 动画对象。 + * @param {string} path - 需要添加动画的属性获取路径，可以通过 a.b.c 来获取深层的属性。若传入对象为,path需为空字符串。 + * @param {Function} loop - 动画是否循环。 + * @return {Zondy.LevelRenderer.animation.Animator} Animator。 + */ + animate(el, path, loop) { + if (typeof (el) === 'string') { + el = this.storage.get(el); + } + if (el) { + var target; + if (path) { + var pathSplitted = path.split('.'); + var prop = el; + for (var i = 0, l = pathSplitted.length; i < l; i++) { + if (!prop) { + continue; + } + prop = prop[pathSplitted[i]]; + } + if (prop) { + target = prop; + } + } else { + target = el; + } + + if (!target) { + return; + } + + var animatingElements = this.animatingElements; + if (typeof el.__aniCount === 'undefined') { + // 正在进行的动画记数 + el.__aniCount = 0; + } + if (el.__aniCount === 0) { + animatingElements.push(el); + } + el.__aniCount++; + + return this.animation.animate(target, {loop: loop}) + .done(function () { + el.__aniCount--; + if (el.__aniCount === 0) { + // 从animatingElements里移除 + var idx = indexOf(animatingElements, el); + animatingElements.splice(idx, 1); + } + }); + } + } + + /** + * @function Zondy.LevelRenderer.Render.prototype.clearAnimation + * @description 停止所有动画。 + * + */ + clearAnimation() { + this.animation.clear(); + } + + /** + * @function Zondy.LevelRenderer.Render.prototype.getWidth + * @description 获取视图宽度。 + * @return {number} 视图宽度。 + */ + getWidth() { + return this.painter.getWidth(); + } + + /** + * @function Zondy.LevelRenderer.Render.prototype.getHeight + * @description 获取视图高度。 + * @return {number} 视图高度。 + */ + getHeight() { + return this.painter.getHeight(); + } + + /** + * @function Zondy.LevelRenderer.Render.prototype.toDataURL + * @description 图像导出。 + * + * @param {string} type - 类型。 + * @param {string} backgroundColor - 背景色，默认值："#FFFFFF"。 + * @param {string} args - 参数。 + * @return {string} 图片的 Base64 url。 + */ + toDataURL(type, backgroundColor, args) { + return this.painter.toDataURL(type, backgroundColor, args); + } + + /** + * @function Zondy.LevelRenderer.Render.prototype.shapeToImage + * @description 将常规 shape 转成 image shape。 + * + * @param {Zondy.LevelRenderer.Shape} e - 图形。 + * @param {number} width - 宽度。 + * @param {number} height - 高度。 + * @return {Object} image shape。 + */ + shapeToImage(e, width, height) { + var id = newGuid(); + return this.painter.shapeToImage(id, e, width, height); + } + + /** + * @function Zondy.LevelRenderer.Render.prototype.on + * @description 事件绑定。 + * + * @param {string} eventName - 事件名称。 + * @param {Function} eventHandler - 响应函数。 + * @return {Zondy.LevelRenderer.Render} this。 + */ + on(eventName, eventHandler) { + this.handler.on(eventName, eventHandler); + return this; + } + + /** + * @function Zondy.LevelRenderer.Render.prototype.un + * @description 事件解绑定，参数为空则解绑所有自定义事件。 + * + * @param {string} eventName - 事件名称。 + * @param {Function} eventHandler - 响应函数。 + * @return {Zondy.LevelRenderer.Render} this。 + */ + un(eventName, eventHandler) { + this.handler.un(eventName, eventHandler); + return this; + } + + /** + * @function Zondy.LevelRenderer.Render.prototype.trigger + * @description 事件触发。 + * + * @param {string} eventName - 事件名称，resize，hover，drag，etc。 + * @param {event} event - event dom事件对象。 + * @return {Zondy.LevelRenderer.Render} this。 + */ + trigger(eventName, event) { + this.handler.trigger(eventName, event); + this.handler.dispatch(eventName, event); + return this; + } + + /** + * @function Zondy.LevelRenderer.Render.prototype.clear + * @description 清除当前 Render 下所有类图的数据和显示，clear 后 MVC 和已绑定事件均还存在在，Render 可用。 + * @return {Zondy.LevelRenderer.Render} this。 + */ + clear() { + this.storage.delRoot(); + this.painter.clear(); + return this; + } + + /** + * @function Zondy.LevelRenderer.Render.prototype.dispose + * @description 释放当前 Render 实例（删除包括 dom，数据、显示和事件绑定），dispose后 Render 不可用。 + */ + dispose() { + this.animation.stop(); + + this.clear(); + this.storage.dispose(); + this.painter.dispose(); + this.handler.dispose(); + + this.animation = null; + this.animatingElements = null; + this.storage = null; + this.painter = null; + this.handler = null; + } + + // SMIC-方法扩展 - start + /** + * @function Zondy.LevelRenderer.Render.prototype.updateHoverShapes + * @description 更新设置显示高亮图层。 + * + * @param {Array.} shapes - 图形数组。 + * @return {Zondy.LevelRenderer.Render} this。 + */ + updateHoverShapes(shapes) { + this.painter.updateHoverLayer(shapes); + return this; + } + + /** + * @function Zondy.LevelRenderer.Render.prototype.getAllShapes + * @description 获取所有图形。 + * @return {Array.} 图形数组。 + */ + getAllShapes() { + return this.storage._shapeList; + } + + /** + * @function Zondy.LevelRenderer.Render.prototype.clearAll + * @description 清除高亮和图形图层。 + * @return {Zondy.LevelRenderer.Render} this。 + */ + clearAll() { + this.clear(); + this.painter.clearHover(); + return this; + } + + /** + * @function Zondy.LevelRenderer.Render.prototype.getHoverOne + * @description 获取单个高亮图形，当前鼠标对应。 + * @return {Zondy.LevelRenderer.Shape} 高亮图形。 + */ + getHoverOne() { + return this.handler.getLastHoverOne(); + } + + static getFrameCallback(renderInstance) { + return function () { + var animatingElements = renderInstance.animatingElements; + + //animatingElements instanceof Array 临时解决 destory 报错 + if (animatingElements instanceof Array) { + for (var i = 0, l = animatingElements.length; i < l; i++) { + renderInstance.storage.mod(animatingElements[i].id); + } + + if (animatingElements.length || renderInstance._needsRefreshNextFrame) { + renderInstance.refresh(); + } + } + }; + } +} + +export {Render}; +Zondy.LevelRenderer.Render = Render; \ No newline at end of file diff --git a/src/mapboxgl/theme/common/overlay/levelRender/SUtil.js b/src/mapboxgl/theme/common/overlay/levelRender/SUtil.js new file mode 100644 index 000000000..69f579d2a --- /dev/null +++ b/src/mapboxgl/theme/common/overlay/levelRender/SUtil.js @@ -0,0 +1,242 @@ +import { Common } from '@mapgis/webclient-es6-service'; +const { Zondy } = Common; +import {Area} from './Area'; +import {Color} from './Color'; +import {ComputeBoundingBox} from './ComputeBoundingBox'; +import {Curve as LevelRendererCurve} from './Curve'; +import {Env} from './Env'; +import {Event as LevelRendererEvent} from './Event'; +import {Http} from './Http'; +import {Math as SMath} from './Math'; +import {Matrix} from './Matrix'; +import {Util} from './Util'; +import {Vector as LevelRendererVector} from './Vector'; +/** + * @private + * @class Zondy.LevelRenderer.SUtil + */ +class SUtil { + /** + * @function Zondy.LevelRenderer.SUtil.SUtil_smoothBezier + * @description 贝塞尔平滑曲线。 + * @private + * @param {Array} points - 线段顶点数组。 + * @param {number} smooth - 平滑等级, 0-1。 + * @param {boolean} isLoop - isLoop。 + * @param {Array} constraint - 将计算出来的控制点约束在一个包围盒内，比如 [[0, 0], [100, 100]], 这个包围盒会与整个折线的包围盒做一个并集用来约束控制点。 + * @param {Array} [originalPosition=[0, 0]] - 参考原点。 + * @return {Array} 生成的平滑节点数组。 + */ + static SUtil_smoothBezier(points, smooth, isLoop, constraint, originalPosition) { + if (!originalPosition || originalPosition !== 2) { + originalPosition = [0, 0]; + } + var __OP = originalPosition; + + var cps = []; + + var v = []; + var v1 = []; + var v2 = []; + + var hasConstraint = !!constraint; + var min, + max; + if (hasConstraint) { + min = [Infinity, Infinity]; + max = [-Infinity, -Infinity]; + let len = points.length; + for (let i = 0; i < len; i++) { + SUtil.Util_vector.min(min, min, [points[i][0] + __OP[0], points[i][1] + __OP[1]]); + SUtil.Util_vector.max(max, max, [points[i][0] + __OP[0], points[i][1] + __OP[1]]); + } + // 与指定的包围盒做并集 + SUtil.Util_vector.min(min, min, constraint[0]); + SUtil.Util_vector.max(max, max, constraint[1]); + } + + let len = points.length; + for (let i = 0; i < len; i++) { + let point = [points[i][0] + __OP[0], points[i][1] + __OP[1]]; + let prevPoint; + let nextPoint; + + if (isLoop) { + prevPoint = [points[i ? i - 1 : len - 1][0] + __OP[0], points[i ? i - 1 : len - 1][1] + __OP[1]]; + nextPoint = [points[(i + 1) % len][0] + __OP[0], points[(i + 1) % len][1] + __OP[1]]; + } else { + if (i === 0 || i === len - 1) { + cps.push([points[i][0] + __OP[0], points[i][1] + __OP[1]]); + continue; + } else { + prevPoint = [points[i - 1][0] + __OP[0], points[i - 1][1] + __OP[1]]; + nextPoint = [points[i + 1][0] + __OP[0], points[i + 1][1] + __OP[1]]; + } + } + + SUtil.Util_vector.sub(v, nextPoint, prevPoint); + + // use degree to scale the handle length + SUtil.Util_vector.scale(v, v, smooth); + + let d0 = SUtil.Util_vector.distance(point, prevPoint); + let d1 = SUtil.Util_vector.distance(point, nextPoint); + let sum = d0 + d1; + if (sum !== 0) { + d0 /= sum; + d1 /= sum; + } + + SUtil.Util_vector.scale(v1, v, -d0); + SUtil.Util_vector.scale(v2, v, d1); + let cp0 = SUtil.Util_vector.add([], point, v1); + let cp1 = SUtil.Util_vector.add([], point, v2); + if (hasConstraint) { + SUtil.Util_vector.max(cp0, cp0, min); + SUtil.Util_vector.min(cp0, cp0, max); + SUtil.Util_vector.max(cp1, cp1, min); + SUtil.Util_vector.min(cp1, cp1, max); + } + cps.push(cp0); + cps.push(cp1); + } + + if (isLoop) { + cps.push(cps.shift()); + } + + return cps; + } + + /** + * @function Zondy.LevelRenderer.SUtil.SUtil_smoothSpline + * @description 插值折线。 + * @private + * @param {Array} points - 线段顶点数组。 + * @param {boolean} isLoop - isLoop。 + * @param {Array} constraint - 将计算出来的控制点约束在一个包围盒内，比如 [[0, 0], [100, 100]], 这个包围盒会与整个折线的包围盒做一个并集用来约束控制点。 + * @param {Array} originalPosition - 参考原点。默认值：[0, 0]。 + * @return {Array} 生成的平滑节点数组。 + */ + static SUtil_smoothSpline(points, isLoop, constraint, originalPosition) { + if (!originalPosition || originalPosition !== 2) { + originalPosition = [0, 0]; + } + var __OP = originalPosition; + + var len = points.length; + var ret = []; + + var distance = 0; + for (let i = 1; i < len; i++) { + distance += SUtil.Util_vector.distance([points[i - 1][0] + __OP[0], points[i - 1][1] + __OP[1]], [points[i][0] + __OP[0], points[i][1] + __OP[1]]); + } + + var segs = distance / 5; + segs = segs < len ? len : segs; + for (let i = 0; i < segs; i++) { + let pos = i / (segs - 1) * (isLoop ? len : len - 1); + let idx = Math.floor(pos); + + let w = pos - idx; + + let p0; + let p1 = [points[idx % len][0] + __OP[0], points[idx % len][1] + __OP[1]]; + let p2; + let p3; + if (!isLoop) { + p0 = [points[idx === 0 ? idx : idx - 1][0] + __OP[0], points[idx === 0 ? idx : idx - 1][1] + __OP[1]]; + p2 = [points[idx > len - 2 ? len - 1 : idx + 1][0] + __OP[0], points[idx > len - 2 ? len - 1 : idx + 1][1] + __OP[1]]; + p3 = [points[idx > len - 3 ? len - 1 : idx + 2][0] + __OP[0], points[idx > len - 3 ? len - 1 : idx + 2][1] + __OP[1]]; + } else { + + p0 = [points[(idx - 1 + len) % len][0] + __OP[0], points[(idx - 1 + len) % len][1] + __OP[1]]; + p2 = [points[(idx + 1) % len][0] + __OP[0], points[(idx + 1) % len][1] + __OP[1]]; + p3 = [points[(idx + 2) % len][0] + __OP[0], points[(idx + 2) % len][1] + __OP[1]]; + } + + let w2 = w * w; + let w3 = w * w2; + + ret.push([ + interpolate(p0[0], p1[0], p2[0], p3[0], w, w2, w3), + interpolate(p0[1], p1[1], p2[1], p3[1], w, w2, w3) + ]); + } + return ret; + + // inner Function + function interpolate(p0, p1, p2, p3, t, t2, t3) { + var v0 = (p2 - p0) * 0.5; + var v1 = (p3 - p1) * 0.5; + return (2 * (p1 - p2) + v0 + v1) * t3 + + (-3 * (p1 - p2) - 2 * v0 - v1) * t2 + + v0 * t + p1; + } + } + + /** + * @function Zondy.LevelRenderer.SUtil.SUtil_dashedLineTo + * @description 虚线 lineTo。 + */ + static SUtil_dashedLineTo(ctx, x1, y1, x2, y2, dashLength, customDashPattern) { + // http://msdn.microsoft.com/en-us/library/ie/dn265063(v=vs.85).aspx + var dashPattern = [5, 5]; + dashLength = typeof dashLength != 'number' + ? 5 + : dashLength; + + if (ctx.setLineDash) { + dashPattern[0] = dashLength; + dashPattern[1] = dashLength; + + if (customDashPattern && (customDashPattern instanceof Array)) { + ctx.setLineDash(customDashPattern); + } else { + ctx.setLineDash(dashPattern); + } + // ctx.setLineDash(dashPattern); + + ctx.moveTo(x1, y1); + ctx.lineTo(x2, y2); + return; + } + + var dx = x2 - x1; + var dy = y2 - y1; + var numDashes = Math.floor( + Math.sqrt(dx * dx + dy * dy) / dashLength + ); + dx = dx / numDashes; + dy = dy / numDashes; + var flag = true; + for (var i = 0; i < numDashes; ++i) { + if (flag) { + ctx.moveTo(x1, y1); + } else { + ctx.lineTo(x1, y1); + } + flag = !flag; + x1 += dx; + y1 += dy; + } + ctx.lineTo(x2, y2); + } +}; + +// 把所有工具对象放到全局静态变量上，以便直接调用工具方法， +// 避免使用工具时频繁的创建工具对象带来的性能消耗。 +SUtil.Util_area = new Area(); +SUtil.Util_color = new Color(); +SUtil.Util_computeBoundingBox = new ComputeBoundingBox(); +SUtil.Util_curve = new LevelRendererCurve(); +SUtil.Util_env = new Env(); +SUtil.Util_event = new LevelRendererEvent(); +SUtil.Util_http = new Http(); +SUtil.Util_math = new SMath(); +SUtil.Util_matrix = new Matrix(); +SUtil.Util = new Util(); +SUtil.Util_vector = new LevelRendererVector(); + +export {SUtil}; +Zondy.LevelRenderer.SUtil = SUtil; diff --git a/src/mapboxgl/theme/common/overlay/levelRender/Shape.js b/src/mapboxgl/theme/common/overlay/levelRender/Shape.js new file mode 100644 index 000000000..3b3e98235 --- /dev/null +++ b/src/mapboxgl/theme/common/overlay/levelRender/Shape.js @@ -0,0 +1,901 @@ +import { Common } from '@mapgis/webclient-es6-service'; +const { Zondy, mixin, newGuid, extend } = Common; + +import {Eventful} from './Eventful'; +import {Transformable} from './Transformable'; +import {SUtil} from './SUtil'; + +/** + * @private + * @class Zondy.LevelRenderer.Shape + * @classdesc 图形（shape）基类。 + * @extends Zondy.LevelRenderer.Eventful + * @extends Zondy.LevelRenderer.Transformable + */ +class Shape extends mixin(Eventful, Transformable) { + + /** + * @function Zondy.LevelRenderer.Shape.constructor + * @description 构造函数。 + * + * @param {Array} options - shape 的配置（options）项，可以是 shape 的自有属性，也可以是自定义的属性。 + * + */ + constructor(options) { + super(options); + + options = options || {}; + /** + * @member {string} Zondy.LevelRenderer.Shape.prototype.id + * @description 唯一标识。 + */ + this.id = null; + + /** + * @member {Object} Zondy.LevelRenderer.Shape.prototype.style + * @description 基础绘制样式。 + * @param {string} style.brushType - 画笔类型。可设值："fill", "stroke", "both"。默认值："fill"。 + * @param {string} style.color - 填充颜色。默认值："#000000'"。 + * @param {string} style.strokeColor - 描边颜色。默认值："#000000'"。 + * @param {string} style.lineCape - 线帽样式。可设值："butt", "round", "square"。默认值："butt"。 + * @param {number} style.lineWidth - 描边宽度。默认值：1。 + * @param {number} style.opacity - 绘制透明度。默认值：1。 + * @param {number} style.shadowBlur - 阴影模糊度，大于0有效。默认值：0。 + * @param {number} style.shadowColor - 阴影颜色。默认值："#000000'"。 + * @param {number} style.shadowOffsetX - 阴影横向偏移。默认值：0。 + * @param {number} style.shadowOffsetY - 阴影纵向偏移。默认值：0。 + * @param {string} style.text - 图形中的附加文本。默认值：""。 + * @param {string} style.textColor - 文本颜色。默认值："#000000'"。 + * @param {string} style.textFont - 附加文本样式。示例:'bold 18px verdana'。 + * @param {string} style.textPosition - 附加文本位置。可设值："inside", "left", "right", top", "bottom", "end"。默认值："end"。 + * @param {string} style.textAlign - 附加文本水平对齐。可设值："start", "end", "left", "right", "center"。默认根据 textPosition 自动设置。 + * @param {string} style.textBaseline - 附加文本垂直对齐。可设值："top", "bottom", "middle", "alphabetic", "hanging", "ideographic"。默认根据 textPosition 自动设置。 + * + */ + this.style = {}; + + /** + * @member {Object} Zondy.LevelRenderer.Shape.prototype.style.__rect + * @description 包围图形的最小矩形盒子。 + * + * @param {number} x - 左上角顶点x轴坐标。 + * @param {number} y - 左上角顶点y轴坐标。 + * @param {number} width - 包围盒矩形宽度。 + * @param {number} height - 包围盒矩形高度。 + */ + + /** + * @member {Object} Zondy.LevelRenderer.Shape.prototype.highlightStyle + * @description 高亮样式。 + * + * @param {string} highlightStyle.brushType - 画笔类型。可设值："fill", "stroke", "both"。默认值："fill"。 + * @param {string} highlightStyle.color - 填充颜色。默认值："#000000'"。 + * @param {string} highlightStyle.strokeColor - 描边颜色。默认值："#000000'"。 + * @param {string} highlightStyle.lineCape - 线帽样式。可设值："butt", "round", "square"。默认值："butt"。 + * @param {number} highlightStyle.lineWidth - 描边宽度。默认值：1。 + * @param {number} highlightStyle.opacity - 绘制透明度。默认值：1。 + * @param {number} highlightStyle.shadowBlur - 阴影模糊度，大于0有效。默认值：0。 + * @param {number} highlightStyle.shadowColor - 阴影颜色。默认值："#000000'"。 + * @param {number} highlightStyle.shadowOffsetX - 阴影横向偏移。默认值：0。 + * @param {number} highlightStyle.shadowOffsetY - 阴影纵向偏移。默认值：0。 + * @param {string} highlightStyle.text - 图形中的附加文本。默认值：""。 + * @param {string} highlightStyle.textColor - 文本颜色。默认值："#000000'"。 + * @param {string} highlightStyle.textFont - 附加文本样式。示例:'bold 18px verdana'。 + * @param {string} highlightStyle.textPosition - 附加文本位置。可设值："inside", "left", "right", top", "bottom", "end"。默认值："end"。 + * @param {string} highlightStyle.textAlign - 附加文本水平对齐。可设值："start", "end", "left", "right", "center"。默认根据 textPosition 自动设置。 + * @param {string} highlightStyle.textBaseline - 附加文本垂直对齐。可设值："top", "bottom", "middle", "alphabetic", "hanging", "ideographic"。默认根据 textPosition 自动设置。 + */ + this.highlightStyle = null; + + /** + * @member {Object} Zondy.LevelRenderer.Shape.prototype.parent + * @description 父节点，只读属性。 + */ + this.parent = null; + + /** + * @member {boolean} Zondy.LevelRenderer.Shape.prototype.__dirty + * @description {boolean} + */ + this.__dirty = true; + + /** + * @member {Array} Zondy.LevelRenderer.Shape.prototype.__clipShapes + * @description {Array} + * + */ + this.__clipShapes = []; + + /** + * @member {boolean} Zondy.LevelRenderer.Shape.prototype.invisible + * @description 图形是否可见，为 true 时不绘制图形，但是仍能触发鼠标事件。默认值：false。 + */ + this.invisible = false; + + /** + * @member {boolean} Zondy.LevelRenderer.Shape.prototype.ignore + * @description 图形是否忽略，为 true 时忽略图形的绘制以及事件触发。默认值：false。 + */ + this.ignore = false; + + /** + * @member {boolean} Zondy.LevelRenderer.Shape.prototype.zlevel + * @description z 层 level，决定绘画在哪层 canvas 中。默认值：0。 + */ + this.zlevel = 0; + + /** + * @member {boolean} Zondy.LevelRenderer.Shape.prototype.draggable + * @description 是否可拖拽。默认值：false。 + */ + this.draggable = false; + + /** + * @member {boolean} Zondy.LevelRenderer.Shape.prototype.clickable + * @description 是否可点击。默认值：false。 + */ + this.clickable = false; + + /** + * @member {boolean} Zondy.LevelRenderer.Shape.prototype.hoverable + * @description 是否可以 hover。默认值：true。 + */ + this.hoverable = true; + + /** + * @member {number} Zondy.LevelRenderer.Shape.prototype.z + * @description z值，跟zlevel一样影响shape绘制的前后顺序，z值大的shape会覆盖在z值小的上面，但是并不会创建新的canvas，所以优先级低于zlevel，而且频繁改动的开销比zlevel小很多。默认值：0。 + */ + this.z = 0; + + //地理扩展 + /** + * @member {Array} Zondy.LevelRenderer.Shape.prototype.refOriginalPosition + * @description 图形参考原点位置，图形的参考中心位置。 + * refOriginalPosition 是长度为 2 的数组，第一个元素表示 x 坐标，第二个元素表示 y 坐标。 + * + * refOriginalPosition 表示图形的参考中心，通常情况下，图形是使用 canvas 的原点位置作为位置参考， + * 但 refOriginalPosition 可以改变图形的参考位置，例如： refOriginalPosition = [80, 80], + * 图形圆的 style.x = 20, style.y = 20，那么圆在 canvas 中的实际位置是 [100, 100]。 + * + * 图形（Shape） 的所有位置相关属性都是以 refOriginalPosition 为参考中心， + * 也就是说图形的所有位置信息在 canvas 中都是以 refOriginalPosition 为参考的相对位置，只有 + * refOriginalPosition 的值为 [0, 0] 时，形的位置信息才是 canvas 绝对位置。 + * + * 图形的位置信息通常有：style.pointList，style.x，style.y。 + * + * refOriginalPosition。默认值是： [0, 0]。 + */ + this.refOriginalPosition = [0, 0]; + + /** + * @member {string} Zondy.LevelRenderer.Shape.prototype.refDataID + * @description 图形所关联数据的 ID。 + * + */ + this.refDataID = null; + + /** + * @member {boolean} Zondy.LevelRenderer.Shape.prototype.isHoverByRefDataID + * @description 是否根据 refDataID 进行高亮。用于同时高亮所有 refDataID 相同的图形。 + * + */ + this.isHoverByRefDataID = false; + + /** + * @member {string} Zondy.LevelRenderer.Shape.prototype.refDataHoverGroup + * @description 高亮图形组的组名。此属性在 refDataID 有效且 isHoverByRefDataID 为 true 时生效。 + * 一旦设置此属性，且属性值有效，只有关联同一个数据的图形且此属性相同的图形才会高亮。 + * + */ + this.refDataHoverGroup = null; + + /** + * @member {Object} Zondy.LevelRenderer.Shape.prototype.dataInfo + * @description 图形的数据信息。 + * + */ + this.dataInfo = null; + extend(this, options); + this.id = this.id || newGuid(); + this.CLASS_NAME = "Zondy.LevelRenderer.Shape"; + /** + * @function Zondy.LevelRenderer.Shape.prototype.getTansform + * @description 变换鼠标位置到 shape 的局部坐标空间 + * + */ + this.getTansform = (function () { + var invTransform = []; + + return function (x, y) { + var originPos = [x, y]; + // 对鼠标的坐标也做相同的变换 + if (this.needTransform && this.transform) { + SUtil.Util_matrix.invert(invTransform, this.transform); + + SUtil.Util_matrix.mulVector(originPos, invTransform, [x, y, 1]); + + if (x === originPos[0] && y === originPos[1]) { + // 避免外部修改导致的 needTransform 不准确 + this.updateNeedTransform(); + } + } + return originPos; + }; + })(); + + } + + /** + * @function Zondy.LevelRenderer.Shape.prototype.destroy + * @description 销毁对象，释放资源。调用此函数后所有属性将被置为 null。 + */ + destroy() { + this.id = null; + this.style = null; + this.highlightStyle = null; + this.parent = null; + this.__dirty = null; + this.__clipShapes = null; + this.invisible = null; + this.ignore = null; + this.zlevel = null; + this.draggable = null; + this.clickable = null; + this.hoverable = null; + this.z = null; + + this.refOriginalPosition = null; + this.refDataID = null; + this.refDataHoverGroup = null; + this.isHoverByRefDataID = null; + this.dataInfo = null; + super.destroy(); + } + + /** + * @function Zondy.LevelRenderer.Shape.prototype.brush + * @description 绘制图形。 + * + * @param {CanvasRenderingContext2D} ctx - Context2D 上下文。 + * @param {boolean} isHighlight - 是否使用高亮属性。 + * @param {Function} updateCallback - 需要异步加载资源的 shape 可以通过这个 callback(e),让painter更新视图，base.brush 没用，需要的话重载 brush。 + */ + brush(ctx, isHighlight) { + + var style = this.beforeBrush(ctx, isHighlight); + + ctx.beginPath(); + this.buildPath(ctx, style); + + switch (style.brushType) { + /* jshint ignore:start */ + case 'both': + this.setCtxGlobalAlpha(ctx, "fill", style); + ctx.fill(); + if (style.lineWidth > 0) { + this.setCtxGlobalAlpha(ctx, "stroke", style); + ctx.stroke(); + } + this.setCtxGlobalAlpha(ctx, "reset", style); + break; + case 'stroke': + this.setCtxGlobalAlpha(ctx, "stroke", style); + style.lineWidth > 0 && ctx.stroke(); + this.setCtxGlobalAlpha(ctx, "reset", style); + break; + /* jshint ignore:end */ + default: + this.setCtxGlobalAlpha(ctx, "fill", style); + ctx.fill(); + this.setCtxGlobalAlpha(ctx, "reset", style); + break; + } + + this.drawText(ctx, style, this.style); + + this.afterBrush(ctx); + } + + + /** + * @function Zondy.LevelRenderer.Shape.prototype.beforeBrush + * @description 具体绘制操作前的一些公共操作。 + * + * @param {CanvasRenderingContext2D} ctx - Context2D 上下文。 + * @param {boolean} isHighlight - 是否使用高亮属性。 + * @return {Object} 处理后的样式。 + */ + beforeBrush(ctx, isHighlight) { + var style = this.style; + + if (this.brushTypeOnly) { + style.brushType = this.brushTypeOnly; + } + + if (isHighlight) { + // 根据style扩展默认高亮样式 + style = this.getHighlightStyle( + style, + this.highlightStyle || {}, + this.brushTypeOnly + ); + } + + if (this.brushTypeOnly === 'stroke') { + style.strokeColor = style.strokeColor || style.color; + } + + ctx.save(); + + this.doClip(ctx); + + this.setContext(ctx, style); + + // 设置transform + this.setTransform(ctx); + + return style; + } + + /** + * @function Zondy.LevelRenderer.Shape.prototype.afterBrush + * @description 绘制后的处理。 + * + * @param {CanvasRenderingContext2D} ctx - Context2D 上下文。 + * + */ + afterBrush(ctx) { + ctx.restore(); + } + + /** + * @function Zondy.LevelRenderer.Shape.prototype.setContext + * @description 设置 fillStyle, strokeStyle, shadow 等通用绘制样式。 + * + * @param {CanvasRenderingContext2D} ctx - Context2D 上下文。 + * @param {Object} style - 样式。 + * + */ + setContext(ctx, style) { + var STYLE_CTX_MAP = [ + ['color', 'fillStyle'], + ['strokeColor', 'strokeStyle'], + ['opacity', 'globalAlpha'], + ['lineCap', 'lineCap'], + ['lineJoin', 'lineJoin'], + ['miterLimit', 'miterLimit'], + ['lineWidth', 'lineWidth'], + ['shadowBlur', 'shadowBlur'], + ['shadowColor', 'shadowColor'], + ['shadowOffsetX', 'shadowOffsetX'], + ['shadowOffsetY', 'shadowOffsetY'] + ]; + + for (var i = 0, len = STYLE_CTX_MAP.length; i < len; i++) { + var styleProp = STYLE_CTX_MAP[i][0]; + var styleValue = style[styleProp]; + var ctxProp = STYLE_CTX_MAP[i][1]; + + if (typeof styleValue != 'undefined') { + ctx[ctxProp] = styleValue; + } + } + } + + /** + * @function Zondy.LevelRenderer.Shape.prototype.doClip + * + */ + doClip(ctx) { + var clipShapeInvTransform = SUtil.Util_matrix.create(); + + if (this.__clipShapes) { + for (var i = 0; i < this.__clipShapes.length; i++) { + var clipShape = this.__clipShapes[i]; + if (clipShape.needTransform) { + let m = clipShape.transform; + SUtil.Util_matrix.invert(clipShapeInvTransform, m); + ctx.transform( + m[0], m[1], + m[2], m[3], + m[4], m[5] + ); + } + ctx.beginPath(); + clipShape.buildPath(ctx, clipShape.style); + ctx.clip(); + // Transform back + if (clipShape.needTransform) { + let m = clipShapeInvTransform; + ctx.transform( + m[0], m[1], + m[2], m[3], + m[4], m[5] + ); + } + } + } + } + + /** + * @function Zondy.LevelRenderer.Shape.prototype.getHighlightStyle + * @description 根据默认样式扩展高亮样式 + * + * @param {Object} style - 样式。 + * @param {Object} highlightStyle - 高亮样式。 + * @param {string} brushTypeOnly - brushTypeOnly。 + * + */ + getHighlightStyle(style, highlightStyle, brushTypeOnly) { + var newStyle = {}; + for (let k in style) { + newStyle[k] = style[k]; + } + + var highlightColor = SUtil.Util_color.getHighlightColor(); + // 根据highlightStyle扩展 + if (style.brushType !== 'stroke') { + // 带填充则用高亮色加粗边线 + newStyle.strokeColor = highlightColor; + // SMIC-方法修改 - start + newStyle.lineWidth = (style.lineWidth || 1); + // 原始代码 + // newStyle.lineWidth = (style.lineWidth || 1) + // + this.getHighlightZoom(); + // 修改代码1 + // if(!style.lineType || style.lineType === "solid"){ + // newStyle.lineWidth = (style.lineWidth || 1) + // + this.getHighlightZoom(); + // } + // else{ + // newStyle.lineWidth = (style.lineWidth || 1); + // } + // SMIC-方法修改 - end + newStyle.brushType = 'both'; + } else { + if (brushTypeOnly !== 'stroke') { + // 描边型的则用原色加工高亮 + newStyle.strokeColor = highlightColor; + // SMIC-方法修改 - start + newStyle.lineWidth = (style.lineWidth || 1); + // 原始代码 + // newStyle.lineWidth = (style.lineWidth || 1) + // + this.getHighlightZoom(); + // 修改代码1 + // if(!style.lineType || style.lineType === "solid"){ + // newStyle.lineWidth = (style.lineWidth || 1) + // + this.getHighlightZoom(); + // } + // else{ + // newStyle.lineWidth = (style.lineWidth || 1); + // } + // SMIC-方法修改 - end + } else { + // 线型的则用原色加工高亮 + newStyle.strokeColor = highlightStyle.strokeColor + || SUtil.Util_color.mix( + style.strokeColor, + SUtil.Util_color.toRGB(highlightColor) + ); + } + } + + // 可自定义覆盖默认值 + for (let k in highlightStyle) { + if (typeof highlightStyle[k] != 'undefined') { + newStyle[k] = highlightStyle[k]; + } + } + + return newStyle; + } + + + /** + * @function Zondy.LevelRenderer.Shape.prototype.getHighlightZoom + * @description 高亮放大效果参数，当前统一设置为6，如有需要差异设置，通过 this.type 判断实例类型 + * + */ + getHighlightZoom() { + return this.type !== 'text' ? 6 : 2; + } + + + /** + * @function Zondy.LevelRenderer.Shape.prototype.drift + * @description 移动位置 + * + * @param {Object} dx - 横坐标变化。 + * @param {Object} dy - 纵坐标变化。 + * + */ + drift(dx, dy) { + this.position[0] += dx; + this.position[1] += dy; + } + + /** + * @function Zondy.LevelRenderer.Shape.prototype.buildPath + * @description 构建绘制的Path。子类必须重新实现此方法。 + * + * @param {CanvasRenderingContext2D} ctx - Context2D 上下文。 + * @param {Object} style - 样式。 + */ + buildPath(ctx, style) { // eslint-disable-line no-unused-vars + + } + + /** + * @function Zondy.LevelRenderer.Shape.prototype.getRect + * @description 计算返回包围盒矩形。子类必须重新实现此方法。 + * + * @param {Object} style - 样式。 + */ + getRect(style) { // eslint-disable-line no-unused-vars + + } + + /** + * @function Zondy.LevelRenderer.Shape.prototype.isCover + * @description 判断鼠标位置是否在图形内。 + * + * @param {number} x - x。 + * @param {number} y - y。 + */ + isCover(x, y) { + var originPos = this.getTansform(x, y); + x = originPos[0]; + y = originPos[1]; + + // 快速预判并保留判断矩形 + var rect = this.style.__rect; + if (!rect) { + rect = this.style.__rect = this.getRect(this.style); + } + + if (x >= rect.x + && x <= (rect.x + rect.width) + && y >= rect.y + && y <= (rect.y + rect.height) + ) { + // 矩形内 + return SUtil.Util_area.isInside(this, this.style, x, y); + } + + return false; + } + + /** + * @function Zondy.LevelRenderer.Shape.prototype.drawText + * @description 绘制附加文本。 + * + * @param {CanvasRenderingContext2D} ctx - Context2D 上下文。 + * @param {string} style - 样式。 + * @param {string} normalStyle - normalStyle 默认样式，用于定位文字显示。 + */ + drawText(ctx, style, normalStyle) { + if (typeof (style.text) == 'undefined' || style.text === false) { + return; + } + // 字体颜色策略 + var textColor = style.textColor || style.color || style.strokeColor; + ctx.fillStyle = textColor; + + // 文本与图形间空白间隙 + var dd = 10; + var al; // 文本水平对齐 + var bl; // 文本垂直对齐 + var tx; // 文本横坐标 + var ty; // 文本纵坐标 + + var textPosition = style.textPosition // 用户定义 + || this.textPosition // shape默认 + || 'top'; // 全局默认 + + // Smic 方法修改 -start + var __OP = []; + if (!this.refOriginalPosition || this.refOriginalPosition.length !== 2) { + __OP = [0, 0]; + } else { + __OP = this.refOriginalPosition; + } + //原代码： + // Smic 方法修改 -end + + switch (textPosition) { + case 'inside': + case 'top': + case 'bottom': + case 'left': + case 'right': + if (this.getRect) { + var rect = (normalStyle || style).__rect + || this.getRect(normalStyle || style); + + switch (textPosition) { + case 'inside': + tx = rect.x + rect.width / 2; + ty = rect.y + rect.height / 2; + al = 'center'; + bl = 'middle'; + if (style.brushType !== 'stroke' + && textColor === style.color + ) { + ctx.fillStyle = '#fff'; + } + break; + case 'left': + tx = rect.x - dd; + ty = rect.y + rect.height / 2; + al = 'end'; + bl = 'middle'; + break; + case 'right': + tx = rect.x + rect.width + dd; + ty = rect.y + rect.height / 2; + al = 'start'; + bl = 'middle'; + break; + case 'top': + tx = rect.x + rect.width / 2; + ty = rect.y - dd; + al = 'center'; + bl = 'bottom'; + break; + case 'bottom': + tx = rect.x + rect.width / 2; + ty = rect.y + rect.height + dd; + al = 'center'; + bl = 'top'; + break; + } + } + break; + case 'start': + case 'end': + var xStart = 0; + var xEnd = 0; + var yStart = 0; + var yEnd = 0; + if (typeof style.pointList != 'undefined') { + var pointList = style.pointList; + if (pointList.length < 2) { + // 少于2个点就不画了~ + return; + } + var length = pointList.length; + switch (textPosition) { + // Smic 方法修改 -start + case 'start': + xStart = pointList[0][0] + __OP[0]; + xEnd = pointList[1][0] + __OP[0]; + yStart = pointList[0][1] + __OP[1]; + yEnd = pointList[1][1] + __OP[1]; + break; + case 'end': + xStart = pointList[length - 2][0] + __OP[0]; + xEnd = pointList[length - 1][0] + __OP[0]; + yStart = pointList[length - 2][1] + __OP[1]; + yEnd = pointList[length - 1][1] + __OP[1]; + break; + //原代码： + /* + case 'start': + xStart = pointList[0][0]; + xEnd = pointList[1][0]; + yStart = pointList[0][1]; + yEnd = pointList[1][1]; + break; + case 'end': + xStart = pointList[length - 2][0]; + xEnd = pointList[length - 1][0]; + yStart = pointList[length - 2][1]; + yEnd = pointList[length - 1][1]; + break; + */ + // Smic 方法修改 -end + } + } else { + // Smic 方法修改 -start + xStart = (style.xStart + __OP[0]) || 0; + xEnd = (style.xEnd + __OP[0]) || 0; + yStart = (style.yStart + __OP[1]) || 0; + yEnd = (style.yEnd + __OP[1]) || 0; + //原代码： + /* + xStart = style.xStart || 0; + xEnd = style.xEnd || 0; + yStart = style.yStart || 0; + yEnd = style.yEnd || 0; + */ + // Smic 方法修改 -end + } + + switch (textPosition) { + case 'start': + al = xStart < xEnd ? 'end' : 'start'; + bl = yStart < yEnd ? 'bottom' : 'top'; + tx = xStart; + ty = yStart; + break; + case 'end': + al = xStart < xEnd ? 'start' : 'end'; + bl = yStart < yEnd ? 'top' : 'bottom'; + tx = xEnd; + ty = yEnd; + break; + } + dd -= 4; + if (xStart && xEnd && xStart !== xEnd) { + tx -= (al === 'end' ? dd : -dd); + } else { + al = 'center'; + } + + if (yStart !== yEnd) { + ty -= (bl === 'bottom' ? dd : -dd); + } else { + bl = 'middle'; + } + break; + case 'specific': + tx = style.textX || 0; + ty = style.textY || 0; + al = 'start'; + bl = 'middle'; + break; + } + + // Smic 方法修改 -start + if (style.labelXOffset && !isNaN(style.labelXOffset)) { + tx += style.labelXOffset; + } + if (style.labelYOffset && !isNaN(style.labelYOffset)) { + ty += style.labelYOffset; + } + //原代码： + // Smic 方法修改 -end + + if (tx != null && ty != null) { + Shape._fillText( + ctx, + style.text, + tx, ty, + style.textFont, + style.textAlign || al, + style.textBaseline || bl + ); + } + } + + /** + * @function Zondy.LevelRenderer.Shape.prototype.modSelf + * @description 图形发生改变 + */ + modSelf() { + this.__dirty = true; + if (this.style) { + this.style.__rect = null; + } + if (this.highlightStyle) { + this.highlightStyle.__rect = null; + } + } + + /** + * @function Zondy.LevelRenderer.Shape.prototype.isSilent + * @description 图形是否会触发事件，通过 bind 绑定的事件 + */ + isSilent() { + return !( + this.hoverable || this.draggable || this.clickable + || this.onmousemove || this.onmouseover || this.onmouseout + || this.onmousedown || this.onmouseup || this.onclick + || this.ondragenter || this.ondragover || this.ondragleave + || this.ondrop + ); + } + + /** + * @function Zondy.LevelRenderer.Shape.prototype.setCtxGlobalAlpha + * @description 设置 Cavans 上下文全局透明度 + * + * @param {Object} _ctx - Cavans 上下文 + * @param {string} type - one of 'stroke', 'fill', or 'reset' + * @param {Object} style - Symbolizer hash + */ + setCtxGlobalAlpha(_ctx, type, style) { + if (type === "fill") { + _ctx.globalAlpha = typeof (style["fillOpacity"]) === "undefined" ? (typeof (style["opacity"]) === "undefined" ? 1 : style['opacity']) : style['fillOpacity']; + } else if (type === "stroke") { + _ctx.globalAlpha = typeof (style["strokeOpacity"]) === "undefined" ? (typeof (style["opacity"]) === "undefined" ? 1 : style['opacity']) : style['strokeOpacity']; + } else { + _ctx.globalAlpha = typeof (style["opacity"]) === "undefined" ? 1 : style['opacity']; + } + } + + /** + * @function Zondy.LevelRenderer.Shape.prototype._fillText + * @description 填充文本 + */ + static _fillText(ctx, text, x, y, textFont, textAlign, textBaseline) { + if (textFont) { + ctx.font = textFont; + } + ctx.textAlign = textAlign; + ctx.textBaseline = textBaseline; + var rect = Shape._getTextRect( + text, x, y, textFont, textAlign, textBaseline + ); + + text = (text + '').split('\n'); + + var lineHeight = SUtil.Util_area.getTextHeight('ZH', textFont); + + switch (textBaseline) { + case 'top': + y = rect.y; + break; + case 'bottom': + y = rect.y + lineHeight; + break; + default: + y = rect.y + lineHeight / 2; + } + + for (var i = 0, l = text.length; i < l; i++) { + ctx.fillText(text[i], x, y); + y += lineHeight; + } + } + + /** + * @function Zondy.LevelRenderer.Shape._getTextRect + * @description 返回矩形区域，用于局部刷新和文字定位 + * + * @param {string} text - text。 + * @param {number} x - x。 + * @param {number} y - y。 + * @param {string} textFont - textFont。 + * @param {string} textAlign - textAlign。 + * @param {string} textBaseline - textBaseline。 + * @return {Object} 矩形区域。 + */ + static _getTextRect(text, x, y, textFont, textAlign, textBaseline) { + var width = SUtil.Util_area.getTextWidth(text, textFont); + var lineHeight = SUtil.Util_area.getTextHeight('ZH', textFont); + + text = (text + '').split('\n'); + + switch (textAlign) { + case 'end': + case 'right': + x -= width; + break; + case 'center': + x -= (width / 2); + break; + } + + switch (textBaseline) { + case 'top': + break; + case 'bottom': + y -= lineHeight * text.length; + break; + default: + y -= lineHeight * text.length / 2; + } + + return { + x: x, + y: y, + width: width, + height: lineHeight * text.length + }; + } +} + +export {Shape}; +Zondy.LevelRenderer.Shape = Shape; diff --git a/src/mapboxgl/theme/common/overlay/levelRender/SmicBrokenLine.js b/src/mapboxgl/theme/common/overlay/levelRender/SmicBrokenLine.js new file mode 100644 index 000000000..d428b8282 --- /dev/null +++ b/src/mapboxgl/theme/common/overlay/levelRender/SmicBrokenLine.js @@ -0,0 +1,329 @@ +import { Common } from '@mapgis/webclient-es6-service'; +const { Zondy } = Common; +import {Shape} from './Shape'; +import {SmicPolygon} from './SmicPolygon'; +import {SUtil} from './SUtil'; + +/** + * @private + * @class Zondy.LevelRenderer.SmicBrokenLine + * @classdesc 折线(ic)。 + * @extends Zondy.LevelRenderer.Shape + * @example + * var shape = new Zondy.LevelRenderer.SmicBrokenLine({ + * style: { + * pointList: [[0, 0], [100, 100], [100, 0]], + * smooth: 'bezier', + * strokeColor: 'purple' + * } + * }); + * levelRenderer.addShape(shape); + */ +class SmicBrokenLine extends Shape { + + /** + * @member {Object} Zondy.LevelRenderer.SmicBrokenLine.prototype.style + * @description 绘制样式。 + * + * @param {Array} pointList - 节点数组，二维数组。默认值：null，必设参数。其形式如下： + * (code) + * (start code) + * [ + * [10, 20], //单个节点 + * [30, 40], + * [25, 30] + * ] + * (end) + * @param {string} smooth - 是否做平滑插值, 平滑算法可以选择 "bezier", "spline"。默认值：""; + * @param {number} smoothConstraint - 平滑约束。 + * @param {string} strokeColor - 描边颜色。默认值："#000000'"。 + * @param {string} lineCape - 线帽样式。可设值："butt", "round", "square"。默认值："butt"。 + * @param {number} lineWidth - 描边宽度。默认值：1。 + * @param {number} opacity - 绘制透明度。默认值：1。 + * @param {number} shadowBlur - 阴影模糊度，大于0有效。默认值：0。 + * @param {number} shadowColor - 阴影颜色。默认值："#000000'"。 + * @param {number} shadowOffsetX - 阴影横向偏移。默认值：0。 + * @param {number} shadowOffsetY - 阴影纵向偏移。默认值：0。 + * @param {string} text - 图形中的附加文本。默认值：""。 + * @param {string} textColor - 文本颜色。默认值："#000000'"。 + * @param {string} textFont - 附加文本样式。示例:'bold 18px verdana'。 + * @param {string} textPosition - 附加文本位置。可设值："inside", "left", "right", top", "bottom", "end"。默认值："end"。 + * @param {string} textAlign - 附加文本水平对齐。可设值："start", "end", "left", "right", "center"。默认根据 textPosition 自动设置。 + * @param {string} textBaseline - 附加文本垂直对齐。可设值："top", "bottom", "middle", "alphabetic", "hanging", "ideographic"。默认根据 textPosition 自动设置。 + */ + /** + * @function Zondy.LevelRenderer.SmicBrokenLine.constructor + * @description 构造函数。 + * + * @param {Array} options - shape 的配置（options）项，可以是 shape 的自有属性，也可以是自定义的属性。 + * + */ + constructor(options) { + super(options); + /** + * @member {string} Zondy.LevelRenderer.SmicBrokenLine.prototype.brushTypeOnly + * @description 线条只能描边。 + */ + this.brushTypeOnly = 'stroke'; + + /** + * @member {string} Zondy.LevelRenderer.SmicBrokenLine.prototype.textPosition + * @description 文本位置。 + */ + this.textPosition = 'end'; + + /** + * @member {string} Zondy.LevelRenderer.SmicBrokenLine.prototype.type + * @description 图形类型. + */ + this.type = 'smicbroken-line'; + if (!this.refOriginalPosition || this.refOriginalPosition.length !== 2) { + this.refOriginalPosition = [0, 0]; + } + + this.CLASS_NAME = "Zondy.LevelRenderer.Shape.SmicBrokenLine"; + } + + /** + * @function Zondy.LevelRenderer.SmicBrokenLine.prototype.destroy + * @description 销毁对象，释放资源。调用此函数后所有属性将被置为 null。 + */ + destroy() { + this.brushTypeOnly = null; + this.textPosition = null; + this.type = null; + + super.destroy(); + } + + /** + * @function Zondy.LevelRenderer.SmicBrokenLine.prototype.buildPath + * @description 创建折线路径。 + * + * @param {CanvasRenderingContext2D} ctx - Context2D 上下文。 + * @param {Object} style - style。 + * + */ + buildPath(ctx, style) { + if (!this.refOriginalPosition || this.refOriginalPosition.length !== 2) { + this.refOriginalPosition = [0, 0]; + } + + var __OP = this.refOriginalPosition; + + var pointList = style.pointList; + if (pointList.length < 2) { + // 少于2个点就不画了~ + return; + } + + var len = Math.min(style.pointList.length, Math.round(style.pointListLength || style.pointList.length)); + + if (style.smooth && style.smooth !== 'spline') { + var controlPoints = SUtil.SUtil_smoothBezier(pointList, style.smooth, false, style.smoothConstraint, __OP); + + ctx.moveTo(pointList[0][0] + __OP[0], pointList[0][1] + __OP[1]); + var cp1; + var cp2; + var p; + for (let i = 0; i < len - 1; i++) { + cp1 = controlPoints[i * 2]; + cp2 = controlPoints[i * 2 + 1]; + p = [pointList[i + 1][0] + __OP[0], pointList[i + 1][1] + __OP[1]]; + ctx.bezierCurveTo( + cp1[0], cp1[1], cp2[0], cp2[1], p[0], p[1] + ); + } + } else { + if (style.smooth === 'spline') { + pointList = SUtil.SUtil_smoothSpline(pointList, null, null, __OP); + len = pointList.length; + } + if (!style.lineType || style.lineType === 'solid') { + // 默认为实线 + ctx.moveTo(pointList[0][0] + __OP[0], pointList[0][1] + __OP[1]); + for (let i = 1; i < len; i++) { + ctx.lineTo(pointList[i][0] + __OP[0], pointList[i][1] + __OP[1]); + } + } else if (style.lineType === 'dashed' + || style.lineType === 'dotted' + || style.lineType === 'dot' + || style.lineType === 'dash' + || style.lineType === 'longdash' + ) { + let dashLength = (style.lineWidth || 1); + let pattern1 = dashLength; + let pattern2 = dashLength; + + //dashed + if (style.lineType === 'dashed') { + pattern1 *= 5; + pattern2 *= 5; + if (style.lineCap && style.lineCap !== "butt") { + pattern1 -= dashLength; + pattern2 += dashLength; + } + } + + //dotted + if (style.lineType === 'dotted') { + if (style.lineCap && style.lineCap !== "butt") { + pattern1 = 1; + pattern2 += dashLength; + } + } + + //dot + if (style.lineType === 'dot') { + pattern2 *= 4; + if (style.lineCap && style.lineCap !== "butt") { + pattern1 = 1; + pattern2 += dashLength; + } + } + + //dash + if (style.lineType === 'dash') { + pattern1 *= 4; + pattern2 *= 4; + if (style.lineCap && style.lineCap !== "butt") { + pattern1 -= dashLength; + pattern2 += dashLength; + } + } + + //longdash + if (style.lineType === 'longdash') { + pattern1 *= 8; + pattern2 *= 4; + if (style.lineCap && style.lineCap !== "butt") { + pattern1 -= dashLength; + pattern2 += dashLength; + } + } + + ctx.moveTo(pointList[0][0] + __OP[0], pointList[0][1] + __OP[1]); + for (var i = 1; i < len; i++) { + SUtil.SUtil_dashedLineTo( + ctx, + pointList[i - 1][0] + __OP[0], pointList[i - 1][1] + __OP[1], + pointList[i][0] + __OP[0], pointList[i][1] + __OP[1], + dashLength, + [pattern1, pattern2] + ); + } + } else if (style.lineType === 'dashot' + || style.lineType === 'longdashdot' + ) { + let dashLength = (style.lineWidth || 1); + let pattern1 = dashLength; + let pattern2 = dashLength; + let pattern3 = dashLength; + let pattern4 = dashLength; + + //dashot + if (style.lineType === 'dashot') { + pattern1 *= 4; + pattern2 *= 4; + pattern4 *= 4; + if (style.lineCap && style.lineCap !== "butt") { + pattern1 -= dashLength; + pattern2 += dashLength; + pattern3 = 1; + pattern4 += dashLength; + } + } + + //longdashdot + if (style.lineType === 'longdashdot') { + pattern1 *= 8; + pattern2 *= 4; + pattern4 *= 4; + if (style.lineCap && style.lineCap !== "butt") { + pattern1 -= dashLength; + pattern2 += dashLength; + pattern3 = 1; + pattern4 += dashLength; + } + } + + dashLength = (style.lineWidth || 1) + * (style.lineType === 'dashed' ? 5 : 1); + ctx.moveTo(pointList[0][0] + __OP[0], pointList[0][1] + __OP[1]); + for (let i = 1; i < len; i++) { + SUtil.SUtil_dashedLineTo( + ctx, + pointList[i - 1][0] + __OP[0], pointList[i - 1][1] + __OP[1], + pointList[i][0] + __OP[0], pointList[i][1] + __OP[1], + dashLength, + [pattern1, pattern2, pattern3, pattern4] + ); + } + } + + } + return; + } + + /** + * @function Zondy.LevelRenderer.SmicBrokenLine.prototype.getRect + * @description 计算返回折线包围盒矩形。该包围盒是直接从四个控制点计算，并非最小包围盒。 + * + * @param {Object} style - style + * @return {Object} 边框对象。包含属性：x，y，width，height。 + */ + getRect(style) { + if (!this.refOriginalPosition || this.refOriginalPosition.length !== 2) { + this.refOriginalPosition = [0, 0]; + } + var __OP = this.refOriginalPosition; + return SmicPolygon.prototype.getRect.apply(this, [style, __OP]); + } + + /** + * @function Zondy.LevelRenderer.Shape.prototype.brush + * @description 绘制图形。 + * + * @param {CanvasRenderingContext2D} ctx - Context2D 上下文。 + * @param {boolean} isHighlight - 是否使用高亮属性。 + * @param {Function} updateCallback - 需要异步加载资源的 shape 可以通过这个 callback(e),让painter更新视图，base.brush 没用，需要的话重载 brush。 + */ + brush(ctx, isHighlight) { + + var style = this.beforeBrush(ctx, isHighlight); + + ctx.beginPath(); + this.buildPath(ctx, style); + + switch (style.brushType) { + /* jshint ignore:start */ + case 'both': + this.setCtxGlobalAlpha(ctx, "fill", style); + //ctx.fill(); + if (style.lineWidth > 0) { + this.setCtxGlobalAlpha(ctx, "stroke", style); + ctx.stroke(); + } + this.setCtxGlobalAlpha(ctx, "reset", style); + break; + case 'stroke': + this.setCtxGlobalAlpha(ctx, "stroke", style); + style.lineWidth > 0 && ctx.stroke(); + this.setCtxGlobalAlpha(ctx, "reset", style); + break; + /* jshint ignore:end */ + default: + this.setCtxGlobalAlpha(ctx, "fill", style); + //ctx.fill(); + this.setCtxGlobalAlpha(ctx, "reset", style); + break; + } + + this.drawText(ctx, style, this.style); + + this.afterBrush(ctx); + } +} + +export {SmicBrokenLine}; +Zondy.LevelRenderer.SmicBrokenLine = SmicBrokenLine; diff --git a/src/mapboxgl/theme/common/overlay/levelRender/SmicCircle.js b/src/mapboxgl/theme/common/overlay/levelRender/SmicCircle.js new file mode 100644 index 000000000..5d4dc9f60 --- /dev/null +++ b/src/mapboxgl/theme/common/overlay/levelRender/SmicCircle.js @@ -0,0 +1,145 @@ +import { Common } from '@mapgis/webclient-es6-service'; +const { Zondy } = Common; +import {Shape} from './Shape'; + +/** + * @private + * @class Zondy.LevelRenderer.SmicCircle + * @classdesc 圆形 + * @extends Zondy.LevelRenderer.Shape + * @example + * var shape = new Zondy.LevelRenderer.SmicCircle({ + * style: { + * x: 100, + * y: 100, + * r: 60, + * brushType: "both", + * color: "blue", + * strokeColor: "red", + * lineWidth: 3, + * text: "Circle" + * } + * }); + * levelRenderer.addShape(shape); + */ +class SmicCircle extends Shape { + + /** + * @member {Object} Zondy.LevelRenderer.SmicCircle.prototype.style + * @description 绘制样式。 + * + * @param {number} x - 圆心x坐标,必设参数 + * @param {number} y - 圆心y坐标，必设参数 + * @param {number} r - 半径，必设参数 + * @param {string} brushType - 画笔类型。可设值："fill", "stroke", "both"。默认值："fill"。 + * @param {string} color - 填充颜色,默认值"#000000" + * @param {string} strokeColor - 描边颜色,默认值为'#000000' + * @param {string} lineCape — 线帽样式，可以是 butt, round, square，默认是butt + * @param {number} lineWidth - 描边宽度、默认是1 + * @param {number} opacity - 绘制透明度、默认是1，不透明 + * @param {number} shadowBlur - 阴影模糊度，大于0有效，默认是0 + * @param {string} shadowColor - 阴影颜色，默认是'#000000' + * @param {number} shadowOffsetX - 阴影横向偏移，默认是0 + * @param {number} shadowOffsetY - 阴影纵向偏移，默认是0 + * @param {string} text - 图形中的附加文本，默认是0 + * @param {string} textColor - 文本颜色，默认是'#000000' + * @param {string} textFont - 附加文本样式，eg:'bold 18px verdana' + * @param {string} textPosition - 附加文本位置, 可以是 inside, left, right, top, bottom + * @param {string} textAlign - 默认根据textPosition自动设置，附加文本水平对齐。可以是start, end, left, right, center + * @param {string} textBaseline 默认根据textPosition自动设置，附加文本垂直对齐。可以是top, bottom, middle, alphabetic, hanging, ideographic + */ + + /** + * @function Zondy.LevelRenderer.SmicCircle.constructor + * @description 构造函数。 + * + * @param {Array} options - shape 的配置（options）项，可以是 shape 的自有属性，也可以是自定义的属性。 + * + */ + constructor(options) { + super(options); + /** + * @member {string} Zondy.LevelRenderer.SmicCircle.prototype.type + * @description 图形类型。 + */ + this.type = 'smiccircle'; + + if (!this.refOriginalPosition || this.refOriginalPosition.length !== 2) { + this.refOriginalPosition = [0, 0]; + } + this.CLASS_NAME = "Zondy.LevelRenderer.SmicCircle"; + } + + /** + * @function Zondy.LevelRenderer.SmicCircle.prototype.destroy + * @description 销毁对象，释放资源。调用此函数后所有属性将被置为 null。 + */ + destroy() { + this.type = null; + super.destroy(); + } + + /** + * @function Zondy.LevelRenderer.SmicCircle.prototype.buildPath + * @description 创建图形路径。 + * + * @param {CanvasRenderingContext2D} ctx - Context2D 上下文。 + * @param {Object} style - style。 + * + */ + buildPath(ctx, style) { + if (!this.refOriginalPosition || this.refOriginalPosition.length !== 2) { + this.refOriginalPosition = [0, 0]; + } + var __OP = this.refOriginalPosition; + + var x = style.x + __OP[0]; // 圆心x + var y = style.y + __OP[1]; // 圆心y + + ctx.moveTo(x + style.r, y); + ctx.arc(x, y, style.r, 0, Math.PI * 2, true); + + return true; + } + + /** + * @function Zondy.LevelRenderer.SmicCircle.prototype.getRect + * @description 返回圆形包围盒矩形 + * + * @param {Object} style - style + * @return {Object} 边框对象。包含属性：x，y，width，height。 + * + */ + getRect(style) { + if (style.__rect) { + return style.__rect; + } + + if (!this.refOriginalPosition || this.refOriginalPosition.length !== 2) { + this.refOriginalPosition = [0, 0]; + } + var __OP = this.refOriginalPosition; + + var x = style.x + __OP[0]; // 圆心x + var y = style.y + __OP[1]; // 圆心y + var r = style.r; // 圆r + + var lineWidth; + if (style.brushType === 'stroke' || style.brushType === 'fill') { + lineWidth = style.lineWidth || 1; + } else { + lineWidth = 0; + } + style.__rect = { + x: Math.round(x - r - lineWidth / 2), + y: Math.round(y - r - lineWidth / 2), + width: r * 2 + lineWidth, + height: r * 2 + lineWidth + }; + + return style.__rect; + } +} + +export {SmicCircle}; +Zondy.LevelRenderer.SmicCircle = SmicCircle; \ No newline at end of file diff --git a/src/mapboxgl/theme/common/overlay/levelRender/SmicEllipse.js b/src/mapboxgl/theme/common/overlay/levelRender/SmicEllipse.js new file mode 100644 index 000000000..f3bee7f24 --- /dev/null +++ b/src/mapboxgl/theme/common/overlay/levelRender/SmicEllipse.js @@ -0,0 +1,150 @@ +import { Common } from '@mapgis/webclient-es6-service'; +const { Zondy } = Common; +import {Shape} from './Shape'; + +/** + * @private + * @class Zondy.LevelRenderer.SmicEllipse + * @classdesc 椭圆。 + * @extends Zondy.LevelRenderer.Shape + * @example + * var shape = new Zondy.LevelRenderer.SmicEllipse({ + * style: { + * x: 100, + * y: 100, + * a: 40, + * b: 20, + * brushType: 'both', + * color: 'blue', + * strokeColor: 'red', + * lineWidth: 3, + * text: 'SmicEllipse' + * } + * }); + * levelRenderer.addShape(shape); + */ +class SmicEllipse extends Shape { + + /** + * @member {Object} Zondy.LevelRenderer.SmicEllipse.style + * @description 绘制样式。 + * + * @param {number} style.x - 圆心 x 坐标，必设参数。 + * @param {number} style.y - 圆心 y 坐标，必设参数。 + * @param {number} style.a - 横轴半径，必设参数。 + * @param {number} style.b - 纵轴半径，必设参数。 + * @param {string} style.brushType - 画笔类型。可设值："fill", "stroke", "both"。默认值："fill"。 + * @param {string} style.color - 填充颜色。默认值："#000000'"。 + * @param {string} style.strokeColor - 描边颜色。默认值："#000000'"。 + * @param {string} style.lineCape - 线帽样式。可设值："butt", "round", "square"。默认值："butt"。 + * @param {number} style.lineWidth - 描边宽度。默认值：1。 + * @param {number} style.opacity - 绘制透明度。默认值：1。 + * @param {number} style.shadowBlur - 阴影模糊度，大于0有效。默认值：0。 + * @param {number} style.shadowColor - 阴影颜色。默认值："#000000'"。 + * @param {number} style.shadowOffsetX - 阴影横向偏移。默认值：0。 + * @param {number} style.shadowOffsetY - 阴影纵向偏移。默认值：0。 + * @param {string} style.text - 图形中的附加文本。默认值：""。 + * @param {string} style.textColor - 文本颜色。默认值："#000000'"。 + * @param {string} style.textFont - 附加文本样式。示例:'bold 18px verdana'。 + * @param {string} style.textPosition - 附加文本位置。可设值："inside", "left", "right", top", "bottom", "end"。默认值："end"。 + * @param {string} style.textAlign - 附加文本水平对齐。可设值："start", "end", "left", "right", "center"。默认根据 textPosition 自动设置。 + * @param {string} style.textBaseline - 附加文本垂直对齐。可设值："top", "bottom", "middle", "alphabetic", "hanging", "ideographic"。默认根据 textPosition 自动设置。 + */ + /** + * @function Zondy.LevelRenderer.SmicEllipse.constructor + * @description 构造函数。 + * + * @param {Array} options - shape 的配置（options）项，可以是 shape 的自有属性，也可以是自定义的属性。 + * + */ + constructor(options) { + super(options); + + /** + * @member {string} Zondy.LevelRenderer.SmicEllipse.prototype.type + * @description 图形类型。 + */ + this.type = 'smicellipse'; + + if (!this.refOriginalPosition || this.refOriginalPosition.length !== 2) { + this.refOriginalPosition = [0, 0]; + } + + this.CLASS_NAME = "Zondy.LevelRenderer.Shape.SmicEllipse"; + } + + /** + * @function Zondy.LevelRenderer.SmicEllipse.prototype.destroy + * @description 销毁对象，释放资源。调用此函数后所有属性将被置为 null。 + */ + destroy() { + this.type = null; + super.destroy(); + } + + /** + * @function Zondy.LevelRenderer.SmicEllipse.prototype.buildPath + * @description 构建椭圆的 Path。 + * + * @param {CanvasRenderingContext2D} ctx - Context2D 上下文。 + * @param {Object} style - style。 + */ + buildPath(ctx, style) { + if (!this.refOriginalPosition || this.refOriginalPosition.length !== 2) { + this.refOriginalPosition = [0, 0]; + } + var __OP = this.refOriginalPosition; + + var k = 0.5522848; + var x = style.x + __OP[0]; + var y = style.y + __OP[1]; + var a = style.a; + var b = style.b; + var ox = a * k; // 水平控制点偏移量 + var oy = b * k; // 垂直控制点偏移量 + // 从椭圆的左端点开始顺时针绘制四条三次贝塞尔曲线 + ctx.moveTo(x - a, y); + ctx.bezierCurveTo(x - a, y - oy, x - ox, y - b, x, y - b); + ctx.bezierCurveTo(x + ox, y - b, x + a, y - oy, x + a, y); + ctx.bezierCurveTo(x + a, y + oy, x + ox, y + b, x, y + b); + ctx.bezierCurveTo(x - ox, y + b, x - a, y + oy, x - a, y); + ctx.closePath(); + } + + /** + * @function Zondy.LevelRenderer.SmicEllipse.prototype.getRect + * @description 计算返回椭圆包围盒矩形 + * + * @param {Object} style - style + * @return {Object} 边框对象。包含属性：x，y，width，height。 + * + */ + getRect(style) { + if (style.__rect) { + return style.__rect; + } + + if (!this.refOriginalPosition || this.refOriginalPosition.length !== 2) { + this.refOriginalPosition = [0, 0]; + } + var __OP = this.refOriginalPosition; + + var lineWidth; + if (style.brushType === 'stroke' || style.brushType === 'fill') { + lineWidth = style.lineWidth || 1; + } else { + lineWidth = 0; + } + style.__rect = { + x: Math.round((style.x + __OP[0]) - style.a - lineWidth / 2), + y: Math.round((style.x + __OP[1]) - style.b - lineWidth / 2), + width: style.a * 2 + lineWidth, + height: style.b * 2 + lineWidth + }; + + return style.__rect; + } +} + +export {SmicEllipse}; +Zondy.LevelRenderer.SmicEllipse = SmicEllipse; \ No newline at end of file diff --git a/src/mapboxgl/theme/common/overlay/levelRender/SmicImage.js b/src/mapboxgl/theme/common/overlay/levelRender/SmicImage.js new file mode 100644 index 000000000..4b2691489 --- /dev/null +++ b/src/mapboxgl/theme/common/overlay/levelRender/SmicImage.js @@ -0,0 +1,240 @@ +import { Common } from '@mapgis/webclient-es6-service'; +const { Zondy } = Common; +import {Shape} from './Shape'; + +/** + * @private + * @class Zondy.LevelRenderer.SmicImage + * @classdesc 图片绘制。 + * @extends Zondy.LevelRenderer.Shape + * @example + * var shape = new Zondy.LevelRenderer.SmicImage({ + * style: { + * image: 'test.jpg', + * x: 100, + * y: 100 + * } + * }); + * levelRenderer.addShape(shape); + */ +class SmicImage extends Shape { + + /** + * @member {Object} Zondy.LevelRenderer.SmicImage.prototype.style + * @description 绘制样式。 + * + * @param {number} style.x - 左上角横坐标，必设参数。 + * @param {number} style.y - 左上角纵坐标，必设参数。 + * @param {(string/Cavans)} style.image - 图片地址或cavans对象，必设参数。 + * @param {number} style.width - 绘制到画布上的宽度，默认为图片高度。 + * @param {number} style.height - 绘制到画布上的高度，默认为图片高度。 + * @param {number} style.sx - 从图片中裁剪的左上角横坐标。 + * @param {number} style.sy - 从图片中裁剪的左上角纵坐标。 + * @param {number} style.sWidth - 从图片中裁剪的宽度，默认为图片高度。 + * @param {number} style.sHeight - 绘制到画布上的高度，默认为图片高度。 + * @param {number} style.opacity - 绘制透明度。默认值：1。 + * @param {number} style.shadowBlur - 阴影模糊度，大于0有效。默认值：0。 + * @param {number} style.shadowColor - 阴影颜色。默认值："#000000'"。 + * @param {number} style.shadowOffsetX - 阴影横向偏移。默认值：0。 + * @param {number} style.shadowOffsetY - 阴影纵向偏移。默认值：0。 + * @param {string} style.text - 图形中的附加文本。默认值：""。 + * @param {string} style.textColor - 文本颜色。默认值："#000000'"。 + * @param {string} style.textFont - 附加文本样式。示例:'bold 18px verdana'。 + * @param {string} style.textPosition - 附加文本位置。可设值："inside", "left", "right", top", "bottom", "end"。默认值："end"。 + * @param {string} style.textAlign - 附加文本水平对齐。可设值："start", "end", "left", "right", "center"。默认根据 textPosition 自动设置。 + * @param {string} style.textBaseline - 附加文本垂直对齐。可设值："top", "bottom", "middle", "alphabetic", "hanging", "ideographic"。默认根据 textPosition 自动设置。 + */ + /** + * @function Zondy.LevelRenderer.SmicImage.constructor + * @description 构造函数。 + * @param {Array} options - shape 的配置（options）项，可以是 shape 的自有属性，也可以是自定义的属性。 + * + */ + constructor(options) { + super(options); + /** + * @member {string} Zondy.LevelRenderer.SmicImage.prototype.type + * @description 图形类型。 + */ + this.type = 'smicimage'; + + /** + * @member {string} Zondy.LevelRenderer.SmicImage.prototype._imageCache + * @description 图片缓存。 + */ + this._imageCache = {}; + if (!this.refOriginalPosition || this.refOriginalPosition.length !== 2) { + this.refOriginalPosition = [0, 0]; + } + this.CLASS_NAME = "Zondy.LevelRenderer.Shape.SmicImage"; + } + + /** + * @function Zondy.LevelRenderer.SmicImage.prototype.destroy + * @description 销毁对象，释放资源。调用此函数后所有属性将被置为 null。 + */ + destroy() { + this.type = null; + this._imageCache = null; + super.destroy(); + } + + /** + * @function Zondy.LevelRenderer.SmicImage.prototype.buildPath + * @description 创建图片。 + * + * @param {CanvasRenderingContext2D} ctx - Context2D 上下文。 + * @param {Object} style - style。 + * + */ + brush(ctx, isHighlight, refresh) { + if (!this.refOriginalPosition || this.refOriginalPosition.length !== 2) { + this.refOriginalPosition = [0, 0]; + } + var __OP = this.refOriginalPosition; + + var style = this.style || {}; + + if (isHighlight) { + // 根据style扩展默认高亮样式 + style = this.getHighlightStyle( + style, this.highlightStyle || {} + ); + } + + var image = style.image; + var me = this; + + if (typeof (image) === 'string') { + var src = image; + if (this._imageCache[src]) { + image = this._imageCache[src]; + } else { + image = new Image(); + image.onload = function () { + image.onload = null; + clearTimeout(SmicImage._refreshTimeout); + SmicImage._needsRefresh.push(me); + // 防止因为缓存短时间内触发多次onload事件 + SmicImage._refreshTimeout = setTimeout(function () { + refresh && refresh(SmicImage._needsRefresh); + // 清空 needsRefresh + SmicImage._needsRefresh = []; + }, 10); + }; + + image.src = src; + this._imageCache[src] = image; + } + } + if (image) { + // 图片已经加载完成 + if (image.nodeName.toUpperCase() === 'IMG') { + if (window.ActiveXObject) { + if (image.readyState !== 'complete') { + return; + } + } else { + if (!image.complete) { + return; + } + } + } + // Else is canvas + var width = style.width || image.width; + var height = style.height || image.height; + var x = style.x + __OP[0]; + var y = style.y + __OP[1]; + + // 图片加载失败 + if (!image.width || !image.height) { + return; + } + + ctx.save(); + + this.doClip(ctx); + + this.setContext(ctx, style); + + // 设置transform + this.setTransform(ctx); + + if (style.sWidth && style.sHeight) { + let sx = (style.sx + __OP[0]) || 0; + let sy = (style.sy + __OP[1]) || 0; + ctx.drawImage( + image, + sx, sy, style.sWidth, style.sHeight, + x, y, width, height + ); + } else if (style.sx && style.sy) { + let sx = style.sx + __OP[0]; + let sy = style.sy + __OP[1]; + var sWidth = width - sx; + var sHeight = height - sy; + ctx.drawImage( + image, + sx, sy, sWidth, sHeight, + x, y, width, height + ); + } else { + ctx.drawImage(image, x, y, width, height); + } + // 如果没设置宽和高的话自动根据图片宽高设置 + if (!style.width) { + style.width = width; + } + if (!style.height) { + style.height = height; + } + if (!this.style.width) { + this.style.width = width; + } + if (!this.style.height) { + this.style.height = height; + } + this.drawText(ctx, style, this.style); + ctx.restore(); + } + } + + /** + * @function Zondy.LevelRenderer.SmicImage.prototype.getRect + * @description 计算返回图片的包围盒矩形。 + * + * @param {Object} style - style + * @return {Object} 边框对象。包含属性：x，y，width，height。 + */ + getRect(style) { + if (!this.refOriginalPosition || this.refOriginalPosition.length !== 2) { + this.refOriginalPosition = [0, 0]; + } + var __OP = this.refOriginalPosition; + + return { + x: style.x + __OP[0], + y: style.y + __OP[1], + width: style.width, + height: style.height + }; + } + + /** + * @function Zondy.LevelRenderer.SmicImage.prototype.clearCache + * @description 清除图片缓存。 + * + * @param {Object} style - style + * @return {Object} 边框对象。包含属性：x，y，width，height。 + * + */ + clearCache() { + this._imageCache = {}; + } +} + +SmicImage._needsRefresh = []; +SmicImage._refreshTimeout = null; + +export {SmicImage}; +Zondy.LevelRenderer.SmicImage = SmicImage; \ No newline at end of file diff --git a/src/mapboxgl/theme/common/overlay/levelRender/SmicIsogon.js b/src/mapboxgl/theme/common/overlay/levelRender/SmicIsogon.js new file mode 100644 index 000000000..55b36072f --- /dev/null +++ b/src/mapboxgl/theme/common/overlay/levelRender/SmicIsogon.js @@ -0,0 +1,156 @@ +import { Common } from '@mapgis/webclient-es6-service'; +const { Zondy } = Common; +import {Shape} from './Shape'; +import {SUtil} from './SUtil'; + +/** + * @private + * @class Zondy.LevelRenderer.SmicIsogon + * @classdesc 正多边形。 + * @extends Zondy.LevelRenderer.Shape + */ +class SmicIsogon extends Shape { + + /** + * @member {Object} Zondy.LevelRenderer.SmicIsogon.prototype.style + * @description 绘制样式。 + * + * @param {number} x - 正 n 边形外接圆心 x 坐标，必设参数。 + * @param {number} y - 正 n 边形外接圆心 y 坐标，必设参数。 + * @param {number} r - 正n边形外接圆半径，必设参数。 + * @param {number} ｎ - 指明正几边形，必设参数（n>=3）。 + * @param {string} brushType - 画笔类型。可设值："fill", "stroke", "both"。默认值："fill"。 + * @param {string} color - 填充颜色。默认值："#000000'"。 + * @param {string} strokeColor - 描边颜色。默认值："#000000'"。 + * @param {string} lineCape - 线帽样式。可设值："butt", "round", "square"。默认值："butt"。 + * @param {number} lineWidth - 描边宽度。默认值：1。 + * @param {number} opacity - 绘制透明度。默认值：1。 + * @param {number} shadowBlur - 阴影模糊度，大于0有效。默认值：0。 + * @param {number} shadowColor - 阴影颜色。默认值："#000000'"。 + * @param {number} shadowOffsetX - 阴影横向偏移。默认值：0。 + * @param {number} shadowOffsetY - 阴影纵向偏移。默认值：0。 + * @param {string} text - 图形中的附加文本。默认值：""。 + * @param {string} textColor -文本颜色。默认值："#000000'"。 + * @param {string} textFont - 附加文本样式。示例:'bold 18px verdana'。 + * @param {string} textPosition - 附加文本位置。可设值："inside", "left", "right", top", "bottom", "end"。默认值："end"。 + * @param {string} textAlign - 附加文本水平对齐。可设值："start", "end", "left", "right", "center"。默认根据 textPosition 自动设置。 + * @param {string} textBaseline - 附加文本垂直对齐。可设值："top", "bottom", "middle", "alphabetic", "hanging", "ideographic"。默认根据 textPosition 自动设置。 + */ + /** + * @function Zondy.LevelRenderer.SmicIsogon.constructor + * @description 构造函数。 + * + * @param {Array} options - shape 的配置（options）项，可以是 shape 的自有属性，也可以是自定义的属性。 + * + */ + constructor(options) { + super(options); + /** + * @member {string} Zondy.LevelRenderer.SmicIsogon.prototype.type + * @description 图形类型。 + */ + this.type = 'smicisogon'; + if (!this.refOriginalPosition || this.refOriginalPosition.length !== 2) { + this.refOriginalPosition = [0, 0]; + } + this.CLASS_NAME = "Zondy.LevelRenderer.SmicIsogon"; + } + + + /** + * @function Zondy.LevelRenderer.SmicIsogon.prototype.destroy + * @description 销毁对象，释放资源。调用此函数后所有属性将被置为 null。 + */ + destroy() { + this.type = null; + super.destroy(); + } + + /** + * @function Zondy.LevelRenderer.SmicIsogon.prototype.buildPath + * @description 创建n角星（n>=3）路径。 + * + * @param {CanvasRenderingContext2D} ctx - Context2D 上下文。 + * @param {Object} style - style。 + * + */ + buildPath(ctx, style) { + if (!this.refOriginalPosition || this.refOriginalPosition.length !== 2) { + this.refOriginalPosition = [0, 0]; + } + var __OP = this.refOriginalPosition; + + var sin = SUtil.Util_math.sin; + var cos = SUtil.Util_math.cos; + var PI = Math.PI; + + var n = style.n; + if (!n || n < 2) { + return; + } + + var x = style.x + __OP[0]; + var y = style.y + __OP[1]; + var r = style.r; + + var dStep = 2 * PI / n; + var deg = -PI / 2; + var xStart = x + r * cos(deg); + var yStart = y + r * sin(deg); + deg += dStep; + + // 记录边界点，用于判断insight + var pointList = style.pointList = []; + pointList.push([xStart, yStart]); + for (let i = 0, end = n - 1; i < end; i++) { + pointList.push([x + r * cos(deg), y + r * sin(deg)]); + deg += dStep; + } + pointList.push([xStart, yStart]); + + // 绘制 + ctx.moveTo(pointList[0][0], pointList[0][1]); + for (let i = 0; i < pointList.length; i++) { + ctx.lineTo(pointList[i][0], pointList[i][1]); + } + ctx.closePath(); + return; + } + + + /** + * @function Zondy.LevelRenderer.SmicIsogon.prototype.getRect + * @description 计算返回正多边形的包围盒矩形。 + * + * @param {Object} style - style + * @return {Object} 边框对象。包含属性：x，y，width，height。 + */ + getRect(style) { + if (style.__rect) { + return style.__rect; + } + + if (!this.refOriginalPosition || this.refOriginalPosition.length !== 2) { + this.refOriginalPosition = [0, 0]; + } + var __OP = this.refOriginalPosition; + + var lineWidth; + if (style.brushType === 'stroke' || style.brushType === 'fill') { + lineWidth = style.lineWidth || 1; + } else { + lineWidth = 0; + } + style.__rect = { + x: Math.round((style.x + __OP[0]) - style.r - lineWidth / 2), + y: Math.round((style.y + __OP[1]) - style.r - lineWidth / 2), + width: style.r * 2 + lineWidth, + height: style.r * 2 + lineWidth + }; + + return style.__rect; + } +} + +export {SmicIsogon}; +Zondy.LevelRenderer.SmicIsogon = SmicIsogon; \ No newline at end of file diff --git a/src/mapboxgl/theme/common/overlay/levelRender/SmicPoint.js b/src/mapboxgl/theme/common/overlay/levelRender/SmicPoint.js new file mode 100644 index 000000000..f5769fd28 --- /dev/null +++ b/src/mapboxgl/theme/common/overlay/levelRender/SmicPoint.js @@ -0,0 +1,140 @@ +import { Common } from '@mapgis/webclient-es6-service'; +const { Zondy } = Common; +import {Shape} from './Shape'; + +/** + * @private + * @class Zondy.LevelRenderer.SmicPoint + * @classdesc 点。 + * @extends Zondy.LevelRenderer.Shape + * @example + * var shape = new Zondy.LevelRenderer.SmicPoint({ + * style: { + * x: 100, + * y: 100, + * r: 40, + * brushType: 'both', + * color: 'blue', + * strokeColor: 'red', + * lineWidth: 3, + * text: 'point' + * } + * }); + * levelRenderer.addShape(shape); + * + * + */ +class SmicPoint extends Shape { + + /** + * @member {Object} Zondy.LevelRenderer.SmicPoint.prototype.style + * @description 绘制样式。 + * + * @param {number} style.x - 圆心x坐标，必设参数。 + * @param {number} style.y - 圆心y坐标，必设参数。 + * @param {number} style.r - 半径，必设参数。 + * @param {string} style.brushType - 画笔类型。可设值："fill", "stroke", "both"。默认值："fill"。 + * @param {string} style.color - 填充颜色。默认值："#000000'"。 + * @param {string} style.strokeColor - 描边颜色。默认值："#000000'"。 + * @param {string} style.lineCape - 线帽样式。可设值："butt", "round", "square"。默认值："butt"。 + * @param {number} style.lineWidth - 描边宽度。默认值：1。 + * @param {number} style.opacity - 绘制透明度。默认值：1。 + * @param {number} style.shadowBlur - 阴影模糊度，大于0有效。默认值：0。 + * @param {number} style.shadowColor - 阴影颜色。默认值："#000000'"。 + * @param {number} style.shadowOffsetX - 阴影横向偏移。默认值：0。 + * @param {number} style.shadowOffsetY - 阴影纵向偏移。默认值：0。 + * @param {string} style.text - 图形中的附加文本。默认值：""。 + * @param {string} style.textColor - 文本颜色。默认值："#000000'"。 + * @param {string} style.textFont - 附加文本样式。示例:'bold 18px verdana'。 + * @param {string} style.textPosition - 附加文本位置。可设值："inside", "left", "right", top", "bottom", "end"。默认值："end"。 + * @param {string} style.textAlign - 附加文本水平对齐。可设值："start", "end", "left", "right", "center"。默认根据 textPosition 自动设置。 + * @param {string} style.textBaseline - 附加文本垂直对齐。可设值："top", "bottom", "middle", "alphabetic", "hanging", "ideographic"。默认根据 textPosition 自动设置。 + */ + + /** + * @function Zondy.LevelRenderer.SmicPoint.constructor + * @description 构造函数。 + * + * @param {Array} options - shape 的配置（options）项，可以是 shape 的自有属性，也可以是自定义的属性。 + * + */ + constructor(options) { + super(options); + /** + * @member {string} Zondy.LevelRenderer.SmicPoint.prototype.type + * @description 图形类型。 + */ + this.type = 'smicpoint'; + if (!this.refOriginalPosition || this.refOriginalPosition.length !== 2) { + this.refOriginalPosition = [0, 0]; + } + + this.CLASS_NAME = "Zondy.LevelRenderer.Shape.SmicPoint"; + } + + + /** + * @function cdestroy + * @description 销毁对象，释放资源。调用此函数后所有属性将被置为 null。 + */ + destroy() { + this.type = null; + super.destroy(); + } + + + /** + * @function Zondy.LevelRenderer.SmicPoint.prototype.buildPath + * @description 创建点触。 + * + * @param {CanvasRenderingContext2D} ctx - Context2D 上下文。 + * @param {Object} style - style。 + * + */ + buildPath(ctx, style) { + if (!this.refOriginalPosition || this.refOriginalPosition.length !== 2) { + this.refOriginalPosition = [0, 0]; + } + var __OP = this.refOriginalPosition; + + ctx.arc(style.x + __OP[0], style.y + __OP[1], style.r, 0, Math.PI * 2, true); + return; + } + + + /** + * @function Zondy.LevelRenderer.SmicPoint.prototype.getRect + * @description 计算返回点的包围盒矩形。该包围盒是直接从四个控制点计算，并非最小包围盒。 + * + * @param {Object} style - style + * @return {Object} 边框对象。包含属性：x，y，width，height。 + */ + getRect(style) { + if (!this.refOriginalPosition || this.refOriginalPosition.length !== 2) { + this.refOriginalPosition = [0, 0]; + } + var __OP = this.refOriginalPosition; + + if (style.__rect) { + return style.__rect; + } + + var lineWidth; + if (style.brushType === 'stroke' || style.brushType === 'fill') { + lineWidth = style.lineWidth || 1; + } else { + lineWidth = 0; + } + style.__rect = { + x: Math.round((style.x + __OP[0]) - style.r - lineWidth / 2), + y: Math.round((style.y + __OP[1]) - style.r - lineWidth / 2), + width: style.r * 2 + lineWidth, + height: style.r * 2 + lineWidth + }; + + return style.__rect; + } +} + +export {SmicPoint}; +Zondy.LevelRenderer.SmicPoint = SmicPoint; \ No newline at end of file diff --git a/src/mapboxgl/theme/common/overlay/levelRender/SmicPolygon.js b/src/mapboxgl/theme/common/overlay/levelRender/SmicPolygon.js new file mode 100644 index 000000000..1343c0b3c --- /dev/null +++ b/src/mapboxgl/theme/common/overlay/levelRender/SmicPolygon.js @@ -0,0 +1,491 @@ +import { Common } from '@mapgis/webclient-es6-service'; +const { Zondy, cloneObject } = Common; +import {Shape} from './Shape'; +import {SUtil} from './SUtil'; + +/** + * @private + * @class Zondy.LevelRenderer.SmicPolygon + * @classdesc 多边形。 + * @extends Zondy.LevelRenderer.Shape + * @example + * var shape = new Zondy.LevelRenderer.SmicPolygon({ + * style: { + * // 100x100 的正方形 + * pointList: [[0, 0], [100, 0], [100, 100], [0, 100]], + * color: 'blue' + * } + * }); + * levelRenderer.addShape(shape); + * + */ +class SmicPolygon extends Shape { + + /** + * @member {Object} Zondy.LevelRenderer.SmicPolygon.prototype.style + * @description 绘制样式。 + * + * @param {Array} pointList - 节点数组，二维数组。默认值：null，必设参数。其形式如下： + * (code) + * (start code) + * [ + * [10, 20], //单个节点 + * [30, 40], + * [25, 30] + * ] + * (end) + * @param {string} style.smooth - 是否做平滑插值, 平滑算法可以选择 "bezier", "spline"。默认值：""; + * @param {number} style.smoothConstraint - 平滑约束。 + * @param {string} style.brushType - 画笔类型。可设值："fill", "stroke", "both"。默认值："fill"。 + * @param {string} style.color - 填充颜色。默认值："#000000'"。 + * @param {string} style.strokeColor - 描边颜色。默认值："#000000'"。 + * @param {string} style.lineCape - 线帽样式。可设值："butt", "round", "square"。默认值："butt"。 + * @param {number} style.lineWidth - 描边宽度。默认值：1。 + * @param {number} style.opacity - 绘制透明度。默认值：1。 + * @param {number} style.shadowBlur - 阴影模糊度，大于0有效。默认值：0。 + * @param {number} style.shadowColor - 阴影颜色。默认值："#000000'"。 + * @param {number} style.shadowOffsetX - 阴影横向偏移。默认值：0。 + * @param {number} style.shadowOffsetY - 阴影纵向偏移。默认值：0。 + * @param {string} style.text - 图形中的附加文本。默认值：""。 + * @param {string} style.textColor - 文本颜色。默认值："#000000'"。 + * @param {string} style.textFont - 附加文本样式。示例:'bold 18px verdana'。 + * @param {string} style.textPosition - 附加文本位置。可设值："inside", "left", "right", top", "bottom", "end"。默认值："end"。 + * @param {string} style.textAlign - 附加文本水平对齐。可设值："start", "end", "left", "right", "center"。默认根据 textPosition 自动设置。 + * @param {string} style.textBaseline - 附加文本垂直对齐。可设值："top", "bottom", "middle", "alphabetic", "hanging", "ideographic"。默认根据 textPosition 自动设置。 + */ + /** + * @function Zondy.LevelRenderer.SmicPolygon.constructor + * @description 构造函数。 + * + * @param {Array} options - shape 的配置（options）项，可以是 shape 的自有属性，也可以是自定义的属性。 + * + */ + constructor(options) { + super(options); + /** + * @member {string} Zondy.LevelRenderer.SmicPolygon.prototype.type + * @description 图形类型. + */ + this.type = 'smicpolygon'; + + /** + * @member {Array} Zondy.LevelRenderer.SmicPolygon.prototype._holePolygonPointList + * @description 岛洞面多边形顶点数组（三维数组） + * + */ + this.holePolygonPointLists = null; + + if (!this.refOriginalPosition || this.refOriginalPosition.length !== 2) { + this.refOriginalPosition = [0, 0]; + } + this.CLASS_NAME = "Zondy.LevelRenderer.Shape.SmicPolygon"; + } + + /** + * @function Zondy.LevelRenderer.SmicPolygon.prototype.destroy + * @description 销毁对象，释放资源。调用此函数后所有属性将被置为 null。 + */ + destroy() { + this.type = null; + this.holePolygonPointLists = null; + super.destroy(); + } + + /** + * @function Zondy.LevelRenderer.SmicPolygon.prototype.brush + * @description 笔触。 + * + * @param {CanvasRenderingContext2D} ctx - Context2D 上下文。 + * @param {boolean} isHighlight - 是否使用高亮属性。 + * + */ + brush(ctx, isHighlight) { + if (!this.refOriginalPosition || this.refOriginalPosition.length !== 2) { + this.refOriginalPosition = [0, 0]; + } + + var style = this.style; + if (isHighlight) { + // 根据style扩展默认高亮样式 + style = this.getHighlightStyle( + style, + this.highlightStyle || {} + ); + } + + ctx.save(); + this.setContext(ctx, style); + + // 设置 transform + this.setTransform(ctx); + + // 先 fill 再stroke + var hasPath = false; + if (style.brushType === 'fill' || style.brushType === 'both' || typeof style.brushType === 'undefined') { // 默认为fill + ctx.beginPath(); + if (style.lineType === 'dashed' + || style.lineType === 'dotted' + || style.lineType === 'dot' + || style.lineType === 'dash' + || style.lineType === 'dashot' + || style.lineType === 'longdash' + || style.lineType === 'longdashdot' + ) { + // 特殊处理，虚线围不成path，实线再build一次 + this.buildPath(ctx, { + lineType: 'solid', + lineWidth: style.lineWidth, + pointList: style.pointList + } + ); + } else { + this.buildPath(ctx, style); + hasPath = true; // 这个path能用 + } + ctx.closePath(); + this.setCtxGlobalAlpha(ctx, "fill", style); + ctx.fill(); + this.setCtxGlobalAlpha(ctx, "reset", style); + } + + if (style.lineWidth > 0 && (style.brushType === 'stroke' || style.brushType === 'both')) { + if (!hasPath) { + ctx.beginPath(); + this.buildPath(ctx, style); + } + this.setCtxGlobalAlpha(ctx, "stroke", style); + ctx.stroke(); + this.setCtxGlobalAlpha(ctx, "reset", style); + } + + this.drawText(ctx, style, this.style); + + //岛洞 + var hpStyle = cloneObject(style); + + if (hpStyle.pointList) { + if (this.holePolygonPointLists && this.holePolygonPointLists.length > 0) { + var holePLS = this.holePolygonPointLists; + var holePLSen = holePLS.length; + for (var i = 0; i < holePLSen; i++) { + var holePL = holePLS[i]; + //岛洞面 + hpStyle.pointList = holePL; + + ctx.globalCompositeOperation = "destination-out"; + // 先 fill 再stroke + hasPath = false; + if (hpStyle.brushType === 'fill' || hpStyle.brushType === 'both' || typeof hpStyle.brushType == 'undefined') { // 默认为fill + ctx.beginPath(); + if (hpStyle.lineType === 'dashed' + || hpStyle.lineType === 'dotted' + || hpStyle.lineType === 'dot' + || hpStyle.lineType === 'dash' + || hpStyle.lineType === 'dashot' + || hpStyle.lineType === 'longdash' + || hpStyle.lineType === 'longdashdot' + ) { + // 特殊处理，虚线围不成path，实线再build一次 + this.buildPath(ctx, { + lineType: 'solid', + lineWidth: hpStyle.lineWidth, + pointList: hpStyle.pointList + } + ); + } else { + this.buildPath(ctx, hpStyle); + hasPath = true; // 这个path能用 + } + ctx.closePath(); + this.setCtxGlobalAlpha(ctx, "fill", hpStyle); + ctx.fill(); + this.setCtxGlobalAlpha(ctx, "reset", hpStyle); + } + + if (hpStyle.lineWidth > 0 && (hpStyle.brushType === 'stroke' || hpStyle.brushType === 'both')) { + if (!hasPath) { + ctx.beginPath(); + this.buildPath(ctx, hpStyle); + } + //如果描边，先回复 globalCompositeOperation 默认值再描边。 + ctx.globalCompositeOperation = "source-over"; + this.setCtxGlobalAlpha(ctx, "stroke", hpStyle); + ctx.stroke(); + this.setCtxGlobalAlpha(ctx, "reset", hpStyle); + } else { + ctx.globalCompositeOperation = "source-over"; + } + } + } + + } + ctx.restore(); + return; + } + + /** + * @function Zondy.LevelRenderer.SmicPolygon.prototype.buildPath + * @description 创建多边形路径。 + * + * @param {CanvasRenderingContext2D} ctx - Context2D 上下文。 + * @param {Object} style - style。 + * + */ + buildPath(ctx, style) { + if (style.showShadow) { + ctx.shadowBlur = style.shadowBlur; + ctx.shadowColor = style.shadowColor; + ctx.shadowOffsetX = style.shadowOffsetX; + ctx.shadowOffsetY = style.shadowOffsetY; + } + if (!this.refOriginalPosition || this.refOriginalPosition.length !== 2) { + this.refOriginalPosition = [0, 0]; + } + var __OP = this.refOriginalPosition; + + // 虽然能重用 brokenLine，但底层图形基于性能考虑，重复代码减少调用吧 + var pointList = style.pointList; + + if (pointList.length < 2) { + // 少于2个点就不画了~ + return; + } + + if (style.smooth && style.smooth !== 'spline') { + var controlPoints = SUtil.SUtil_smoothBezier(pointList, style.smooth, true, style.smoothConstraint, __OP); + + ctx.moveTo(pointList[0][0] + __OP[0], pointList[0][1] + __OP[1]); + var cp1; + var cp2; + var p; + var len = pointList.length; + for (var i = 0; i < len; i++) { + cp1 = controlPoints[i * 2]; + cp2 = controlPoints[i * 2 + 1]; + p = [pointList[(i + 1) % len][0] + __OP[0], pointList[(i + 1) % len][1] + __OP[1]]; + ctx.bezierCurveTo( + cp1[0], cp1[1], cp2[0], cp2[1], p[0], p[1] + ); + } + } else { + if (style.smooth === 'spline') { + pointList = SUtil.SUtil_smoothSpline(pointList, true, null, __OP); + } + + if (!style.lineType || style.lineType === 'solid') { + // 默认为实线 + ctx.moveTo(pointList[0][0] + __OP[0], pointList[0][1] + __OP[1]); + for (let i = 1; i < pointList.length; i++) { + ctx.lineTo(pointList[i][0] + __OP[0], pointList[i][1] + __OP[1]); + } + ctx.lineTo(pointList[0][0] + __OP[0], pointList[0][1] + __OP[1]); + } else if (style.lineType === 'dashed' + || style.lineType === 'dotted' + || style.lineType === 'dot' + || style.lineType === 'dash' + || style.lineType === 'longdash' + ) { + // SMIC-方法修改 - start + let dashLengthForStyle = style._dashLength || (style.lineWidth || 1) * (style.lineType === 'dashed' ? 5 : 1); + style._dashLength = dashLengthForStyle; + + let dashLength = (style.lineWidth || 1); + let pattern1 = dashLength; + let pattern2 = dashLength; + + //dashed + if (style.lineType === 'dashed') { + pattern1 *= 5; + pattern2 *= 5; + if (style.lineCap && style.lineCap !== "butt") { + pattern1 -= dashLength; + pattern2 += dashLength; + } + } + + //dotted + if (style.lineType === 'dotted') { + if (style.lineCap && style.lineCap !== "butt") { + pattern1 = 1; + pattern2 += dashLength; + } + } + + //dot + if (style.lineType === 'dot') { + pattern2 *= 4; + if (style.lineCap && style.lineCap !== "butt") { + pattern1 = 1; + pattern2 += dashLength; + } + } + + //dash + if (style.lineType === 'dash') { + pattern1 *= 4; + pattern2 *= 4; + if (style.lineCap && style.lineCap !== "butt") { + pattern1 -= dashLength; + pattern2 += dashLength; + } + } + + //longdash + if (style.lineType === 'longdash') { + pattern1 *= 8; + pattern2 *= 4; + if (style.lineCap && style.lineCap !== "butt") { + pattern1 -= dashLength; + pattern2 += dashLength; + } + } + + + ctx.moveTo(pointList[0][0] + __OP[0], pointList[0][1] + __OP[1]); + for (let i = 1; i < pointList.length; i++) { + SUtil.SUtil_dashedLineTo( + ctx, + pointList[i - 1][0] + __OP[0], + pointList[i - 1][1] + __OP[1], + pointList[i][0] + __OP[0], + pointList[i][1] + __OP[1], + dashLength, + [pattern1, pattern2] + ); + } + SUtil.SUtil_dashedLineTo( + ctx, + pointList[pointList.length - 1][0] + __OP[0], + pointList[pointList.length - 1][1] + __OP[1], + pointList[0][0] + __OP[0], + pointList[0][1] + __OP[1], + dashLength, + [pattern1, pattern2] + ); + } else if (style.lineType === 'dashot' + || style.lineType === 'longdashdot' + ) { + let dashLengthForStyle = style._dashLength || (style.lineWidth || 1) * (style.lineType === 'dashed' ? 5 : 1); + style._dashLength = dashLengthForStyle; + + let dashLength = (style.lineWidth || 1); + let pattern1 = dashLength; + let pattern2 = dashLength; + let pattern3 = dashLength; + let pattern4 = dashLength; + + //dashot + if (style.lineType === 'dashot') { + pattern1 *= 4; + pattern2 *= 4; + pattern4 *= 4; + if (style.lineCap && style.lineCap !== "butt") { + pattern1 -= dashLength; + pattern2 += dashLength; + pattern3 = 1; + pattern4 += dashLength; + } + } + + //longdashdot + if (style.lineType === 'longdashdot') { + pattern1 *= 8; + pattern2 *= 4; + pattern4 *= 4; + if (style.lineCap && style.lineCap !== "butt") { + pattern1 -= dashLength; + pattern2 += dashLength; + pattern3 = 1; + pattern4 += dashLength; + } + } + + + ctx.moveTo(pointList[0][0] + __OP[0], pointList[0][1] + __OP[1]); + for (let i = 1; i < pointList.length; i++) { + SUtil.SUtil_dashedLineTo( + ctx, + pointList[i - 1][0] + __OP[0], + pointList[i - 1][1] + __OP[1], + pointList[i][0] + __OP[0], + pointList[i][1] + __OP[1], + dashLength, + [pattern1, pattern2, pattern3, pattern4] + ); + } + SUtil.SUtil_dashedLineTo( + ctx, + pointList[pointList.length - 1][0] + __OP[0], + pointList[pointList.length - 1][1] + __OP[1], + pointList[0][0] + __OP[0], + pointList[0][1] + __OP[1], + dashLength, + [pattern1, pattern2, pattern3, pattern4] + ); + } + + } + return; + } + + /** + * @function Zondy.LevelRenderer.SmicPolygon.prototype.getRect + * @description 计算返回多边形包围盒矩阵。该包围盒是直接从四个控制点计算，并非最小包围盒。 + * @param {Object} style - style + * @return {Object} 边框对象。包含属性：x，y，width，height。 + */ + getRect(style, refOriginalPosition) { + var __OP; + if (!refOriginalPosition) { + if (!this.refOriginalPosition || this.refOriginalPosition.length !== 2) { + this.refOriginalPosition = [0, 0]; + } + __OP = this.refOriginalPosition; + } else { + __OP = refOriginalPosition; + } + + if (style.__rect) { + return style.__rect; + } + + var minX = Number.MAX_VALUE; + var maxX = Number.MIN_VALUE; + var minY = Number.MAX_VALUE; + var maxY = Number.MIN_VALUE; + + var pointList = style.pointList; + for (var i = 0, l = pointList.length; i < l; i++) { + if (pointList[i][0] + __OP[0] < minX) { + minX = pointList[i][0] + __OP[0]; + } + if (pointList[i][0] + __OP[0] > maxX) { + maxX = pointList[i][0] + __OP[0]; + } + if (pointList[i][1] + __OP[1] < minY) { + minY = pointList[i][1] + __OP[1]; + } + if (pointList[i][1] + __OP[1] > maxY) { + maxY = pointList[i][1] + __OP[1]; + } + } + + var lineWidth; + if (style.brushType === 'stroke' || style.brushType === 'fill') { + lineWidth = style.lineWidth || 1; + } else { + lineWidth = 0; + } + + style.__rect = { + x: Math.round(minX - lineWidth / 2), + y: Math.round(minY - lineWidth / 2), + width: maxX - minX + lineWidth, + height: maxY - minY + lineWidth + }; + return style.__rect; + } +} + +export {SmicPolygon}; +Zondy.LevelRenderer.SmicPolygon = SmicPolygon; \ No newline at end of file diff --git a/src/mapboxgl/theme/common/overlay/levelRender/SmicRectangle.js b/src/mapboxgl/theme/common/overlay/levelRender/SmicRectangle.js new file mode 100644 index 000000000..f29fc8219 --- /dev/null +++ b/src/mapboxgl/theme/common/overlay/levelRender/SmicRectangle.js @@ -0,0 +1,232 @@ +import { Common } from '@mapgis/webclient-es6-service'; +const { Zondy } = Common; +import {Shape} from './Shape'; + +/** + * @private + * @class Zondy.LevelRenderer.SmicRectangle + * @classdesc 矩形。 + * @extends Zondy.LevelRenderer.Shape + * @example + * var shape = new Zondy.LevelRenderer.SmicRectangle({ + * style: { + * x: 0, + * y: 0, + * width: 100, + * height: 100, + * radius: 20 + * } + * }); + * levelRenderer.addShape(shape); + */ +class SmicRectangle extends Shape { + + /** + * @member {Object} Zondy.LevelRenderer.SmicRectangle.prototype.style + * @description 绘制样式。 + * + * @param {number} style.x - 左上角 x 坐标，必设参数。 + * @param {number} style.y - 左上角 y 坐标，必设参数。 + * @param {number} style.width - 宽度，必设参数。 + * @param {number} style.height - 高度，必设参数。 + * @param {Array} style.radius - 矩形圆角，可以用数组分别指定四个角的圆角，设：左上、右上、右下、左下角的半径依次为 r1、r2、r3、r4 则 radius为 [r1、r2、r3、r4 ]。 + * @param {string} style.brushType - 画笔类型。可设值："fill", "stroke", "both"。默认值："fill"。 + * @param {string} style.color - 填充颜色。默认值："#000000'"。 + * @param {string} style.strokeColor - 描边颜色。默认值："#000000'"。 + * @param {string} style.lineCape - 线帽样式。可设值："butt", "round", "square"。默认值："butt"。 + * @param {number} style.lineWidth - 描边宽度。默认值：1。 + * @param {number} style.opacity - 绘制透明度。默认值：1。 + * @param {number} style.shadowBlur - 阴影模糊度，大于0有效。默认值：0。 + * @param {number} style.shadowColor - 阴影颜色。默认值："#000000'"。 + * @param {number} style.shadowOffsetX - 阴影横向偏移。默认值：0。 + * @param {number} style.shadowOffsetY - 阴影纵向偏移。默认值：0。 + * @param {string} style.text - 图形中的附加文本。默认值：""。 + * @param {string} style.textColor - 文本颜色。默认值："#000000'"。 + * @param {string} style.textFont - 附加文本样式。示例:'bold 18px verdana'。 + * @param {string} style.textPosition - 附加文本位置。可设值："inside", "left", "right", top", "bottom", "end"。默认值："end"。 + * @param {string} style.textAlign - 附加文本水平对齐。可设值："start", "end", "left", "right", "center"。默认根据 textPosition 自动设置。 + * @param {string} style.textBaseline - 附加文本垂直对齐。可设值："top", "bottom", "middle", "alphabetic", "hanging", "ideographic"。默认根据 textPosition 自动设置。 + */ + /** + * @function Zondy.LevelRenderer.SmicRectangle.constructor + * @description 构造函数。 + * + * @param {Array} options - shape 的配置（options）项，可以是 shape 的自有属性，也可以是自定义的属性。 + * + */ + constructor(options) { + super(options); + /** + * @member {string} Zondy.LevelRenderer.SmicRectangle.prototype.type + * @description 图形类型. + */ + this.type = 'smicrectangle'; + if (!this.refOriginalPosition || this.refOriginalPosition.length !== 2) { + this.refOriginalPosition = [0, 0]; + } + this.CLASS_NAME = "Zondy.LevelRenderer.Shape.SmicRectangle"; + } + + /** + * @function Zondy.LevelRenderer.SmicRectangle.prototype.destroy + * @description 销毁对象，释放资源。调用此函数后所有属性将被置为 null。 + */ + destroy() { + this.type = null; + super.destroy(); + } + + /** + * APIMethod: _buildRadiusPath + * 创建矩形的圆角路径。 + * + * Parameters: + * ctx - {CanvasRenderingContext2D} Context2D 上下文。 + * style - {Object} style。 + * + */ + _buildRadiusPath(ctx, style) { + if (!this.refOriginalPosition || this.refOriginalPosition.length !== 2) { + this.refOriginalPosition = [0, 0]; + } + var __OP = this.refOriginalPosition; + + // 左上、右上、右下、左下角的半径依次为r1、r2、r3、r4 + // r缩写为1 相当于 [1, 1, 1, 1] + // r缩写为[1] 相当于 [1, 1, 1, 1] + // r缩写为[1, 2] 相当于 [1, 2, 1, 2] + // r缩写为[1, 2, 3] 相当于 [1, 2, 3, 2] + var x = style.x + __OP[0]; + var y = style.y + __OP[1]; + var width = style.width; + var height = style.height; + var r = style.radius; + var r1; + var r2; + var r3; + var r4; + + if (typeof r === 'number') { + r1 = r2 = r3 = r4 = r; + } else if (r instanceof Array) { + if (r.length === 1) { + r1 = r2 = r3 = r4 = r[0]; + } else if (r.length === 2) { + r1 = r3 = r[0]; + r2 = r4 = r[1]; + } else if (r.length === 3) { + r1 = r[0]; + r2 = r4 = r[1]; + r3 = r[2]; + } else { + r1 = r[0]; + r2 = r[1]; + r3 = r[2]; + r4 = r[3]; + } + } else { + r1 = r2 = r3 = r4 = 0; + } + + var total; + if (r1 + r2 > width) { + total = r1 + r2; + r1 *= width / total; + r2 *= width / total; + } + if (r3 + r4 > width) { + total = r3 + r4; + r3 *= width / total; + r4 *= width / total; + } + if (r2 + r3 > height) { + total = r2 + r3; + r2 *= height / total; + r3 *= height / total; + } + if (r1 + r4 > height) { + total = r1 + r4; + r1 *= height / total; + r4 *= height / total; + } + ctx.moveTo(x + r1, y); + ctx.lineTo(x + width - r2, y); + r2 !== 0 && ctx.quadraticCurveTo( + x + width, y, x + width, y + r2 + ); + ctx.lineTo(x + width, y + height - r3); + r3 !== 0 && ctx.quadraticCurveTo( + x + width, y + height, x + width - r3, y + height + ); + ctx.lineTo(x + r4, y + height); + r4 !== 0 && ctx.quadraticCurveTo( + x, y + height, x, y + height - r4 + ); + ctx.lineTo(x, y + r1); + r1 !== 0 && ctx.quadraticCurveTo(x, y, x + r1, y); + } + + /** + * @function Zondy.LevelRenderer.SmicRectangle.prototype.buildPath + * @description 创建矩形路径。 + * + * @param {CanvasRenderingContext2D} ctx - Context2D 上下文。 + * @param {Object} style - style。 + * + */ + buildPath(ctx, style) { + if (!this.refOriginalPosition || this.refOriginalPosition.length !== 2) { + this.refOriginalPosition = [0, 0]; + } + var __OP = this.refOriginalPosition; + + if (!style.radius) { + ctx.moveTo(style.x + __OP[0], style.y + __OP[1]); + ctx.lineTo((style.x + __OP[0]) + style.width, (style.y + __OP[1])); + ctx.lineTo((style.x + __OP[0]) + style.width, (style.y + __OP[1]) + style.height); + ctx.lineTo((style.x + __OP[0]), (style.y + __OP[1]) + style.height); + ctx.lineTo(style.x + __OP[0], style.y + __OP[1]); + // ctx.rect(style.x, style.y, style.width, style.height); + } else { + this._buildRadiusPath(ctx, style); + } + ctx.closePath(); + return; + } + + /** + * @function Zondy.LevelRenderer.SmicRectangle.prototype.getRect + * @description 计算返回矩形包围盒矩阵。该包围盒是直接从四个控制点计算，并非最小包围盒。 + * + * @param {Object} style - style + * @return {Object} 边框对象。包含属性：x，y，width，height。 + */ + getRect(style) { + if (!this.refOriginalPosition || this.refOriginalPosition.length !== 2) { + this.refOriginalPosition = [0, 0]; + } + var __OP = this.refOriginalPosition; + + if (style.__rect) { + return style.__rect; + } + + var lineWidth; + if (style.brushType === 'stroke' || style.brushType === 'fill') { + lineWidth = style.lineWidth || 1; + } else { + lineWidth = 0; + } + style.__rect = { + x: Math.round((style.x + __OP[0]) - lineWidth / 2), + y: Math.round((style.y + __OP[1]) - lineWidth / 2), + width: style.width + lineWidth, + height: style.height + lineWidth + }; + + return style.__rect; + } +} + +export {SmicRectangle}; +Zondy.LevelRenderer.SmicRectangle = SmicRectangle; \ No newline at end of file diff --git a/src/mapboxgl/theme/common/overlay/levelRender/SmicRing.js b/src/mapboxgl/theme/common/overlay/levelRender/SmicRing.js new file mode 100644 index 000000000..0e5a0596f --- /dev/null +++ b/src/mapboxgl/theme/common/overlay/levelRender/SmicRing.js @@ -0,0 +1,131 @@ +import { Common } from '@mapgis/webclient-es6-service'; +const { Zondy } = Common; +import {Shape} from './Shape'; + +/** + * @private + * @class Zondy.LevelRenderer.SmicRing + * @classdesc 圆环。 + * @extends Zondy.LevelRenderer.Shape + * @example + * var shape = new Zondy.LevelRenderer.SmicRing({ + * style: { + * x: 100, + * y: 100, + * r0: 30, + * r: 50 + * } + * }); + * levelRenderer.addShape(shape); + */ +class SmicRing extends Shape { + + /** + * @member {Object} Zondy.LevelRenderer.SmicRing.prototype.style + * @description 绘制样式。 + * + * @param {number} x - 圆心 x 坐标，必设参数。 + * @param {number} y - 圆心 y 坐标，必设参数。 + * @param {number} r - 外圆半径，必设参数。 + * @param {number} r0 - 内圆半径，必设参数。 + * @param {string} brushType - 画笔类型。可设值："fill", "stroke", "both"。默认值："fill"。 + * @param {string} color - 填充颜色。默认值："#000000'"。 + * @param {string} strokeColor - 描边颜色。默认值："#000000'"。 + * @param {string} lineCape - 线帽样式。可设值："butt", "round", "square"。默认值："butt"。 + * @param {number} lineWidth -描边宽度。默认值：1。 + * @param {number} opacity - 绘制透明度。默认值：1。 + * @param {number} shadowBlur - 阴影模糊度，大于0有效。默认值：0。 + * @param {number} shadowColor - 阴影颜色。默认值："#000000'"。 + * @param {number} shadowOffsetX - 阴影横向偏移。默认值：0。 + * @param {number} shadowOffsetY - 阴影纵向偏移。默认值：0。 + * @param {string} text -图形中的附加文本。默认值：""。 + * @param {string} textColor - 文本颜色。默认值："#000000'"。 + * @param {string} textFont - 附加文本样式。示例:'bold 18px verdana'。 + * @param {string} textPosition - 附加文本位置。可设值："inside", "left", "right", top", "bottom", "end"。默认值："end"。 + * @param {string} textAlign - 附加文本水平对齐。可设值："start", "end", "left", "right", "center"。默认根据 textPosition 自动设置。 + * @param {string} textBaseline - 附加文本垂直对齐。可设值："top", "bottom", "middle", "alphabetic", "hanging", "ideographic"。默认根据 textPosition 自动设置。 + */ + /** + * @function Zondy.LevelRenderer.SmicRing.constructor + * @description 构造函数。 + * + * @param {Array} options - shape 的配置（options）项，可以是 shape 的自有属性，也可以是自定义的属性。 + */ + constructor(options) { + super(options); + /** + * @member {string} Zondy.LevelRenderer.SmicRing.prototype.type + * @description 图形类型。 + */ + this.type = 'smicring'; + if (!this.refOriginalPosition || this.refOriginalPosition.length !== 2) { + this.refOriginalPosition = [0, 0]; + } + this.CLASS_NAME = "Zondy.LevelRenderer.Shape.SmicRing"; + } + + /** + * @function Zondy.LevelRenderer.SmicRing.prototype.destroy + * @description 销毁对象，释放资源。调用此函数后所有属性将被置为 null。 + */ + destroy() { + this.type = null; + super.destroy(); + } + + /** + * @function Zondy.LevelRenderer.SmicRing.prototype.buildPath + * @description 创建圆环路径。 + * + * @param {CanvasRenderingContext2D} ctx - Context2D 上下文。 + * @param {Object} style - style。 + */ + buildPath(ctx, style) { + if (!this.refOriginalPosition || this.refOriginalPosition.length !== 2) { + this.refOriginalPosition = [0, 0]; + } + var __OP = this.refOriginalPosition; + + // 非零环绕填充优化 + ctx.arc(style.x + __OP[0], style.y + __OP[1], style.r, 0, Math.PI * 2, false); + ctx.moveTo((style.x + __OP[0]) + style.r0, style.y + __OP[1]); + ctx.arc(style.x + __OP[0], style.y + __OP[1], style.r0, 0, Math.PI * 2, true); + return; + } + + /** + * @function Zondy.LevelRenderer.SmicRing.prototype.getRect + * @description 计算返回圆环包围盒矩阵 + * + * @param {Object} style - style + * @return {Object} 边框对象。包含属性：x，y，width，height。 + */ + getRect(style) { + if (style.__rect) { + return style.__rect; + } + + if (!this.refOriginalPosition || this.refOriginalPosition.length !== 2) { + this.refOriginalPosition = [0, 0]; + } + var __OP = this.refOriginalPosition; + + var lineWidth; + if (style.brushType === 'stroke' || style.brushType === 'fill') { + lineWidth = style.lineWidth || 1; + } else { + lineWidth = 0; + } + style.__rect = { + x: Math.round((style.x + __OP[0]) - style.r - lineWidth / 2), + y: Math.round((style.y + __OP[1]) - style.r - lineWidth / 2), + width: style.r * 2 + lineWidth, + height: style.r * 2 + lineWidth + }; + + return style.__rect; + } +} + +export {SmicRing}; +Zondy.LevelRenderer.SmicRing = SmicRing; \ No newline at end of file diff --git a/src/mapboxgl/theme/common/overlay/levelRender/SmicSector.js b/src/mapboxgl/theme/common/overlay/levelRender/SmicSector.js new file mode 100644 index 000000000..88c105386 --- /dev/null +++ b/src/mapboxgl/theme/common/overlay/levelRender/SmicSector.js @@ -0,0 +1,204 @@ +import { Common } from '@mapgis/webclient-es6-service'; +const { Zondy } = Common; +import {Shape} from './Shape'; +import {SUtil} from './SUtil'; + +/** + * @private + * @class Zondy.LevelRenderer.SmicSector + * @classdesc 扇形。 + * @extends Zondy.LevelRenderer.Shape + * @example + * var shape = new Zondy.LevelRenderer.SmicSector({ + * style: { + * x: 100, + * y: 100, + * r: 60, + * r0: 30, + * startAngle: 0, + * endEngle: 180 + * } + * }); + * levelRenderer.addShape(shape); + */ +class SmicSector extends Shape { + + /** + * @member {Object} Zondy.LevelRenderer.SmicSector.prototype.style + * @description 绘制样式。 + * + * @param {number} style.x - 圆心 x 坐标，必设参数。 + * @param {number} style.y - 圆心 y 坐标，必设参数。 + * @param {number} style.r - 外圆半径，必设参数。 + * @param {number} style.r0 - 内圆半径，指定后将出现内弧，同时扇边长度为`r - r0`。取值范围[0, r)，默认值：0。 + * @param {number} style.startAngle - 起始角度，必设参数。取值范围[0, 360)。 + * @param {number} style.endAngle - 结束角度，必设参数。取值范围(0, 360。 + * @param {boolean} style.clockWise - 是否是顺时针。默认值：false。 + * @param {string} style.brushType - 画笔类型。可设值："fill", "stroke", "both"。默认值："fill"。 + * @param {string} style.color - 填充颜色。默认值："#000000'"。 + * @param {string} style.strokeColor - 描边颜色。默认值："#000000'"。 + * @param {string} style.lineCape - 线帽样式。可设值："butt", "round", "square"。默认值："butt"。 + * @param {number} style.lineWidth - 描边宽度。默认值：1。 + * @param {number} style.opacity - 绘制透明度。默认值：1。 + * @param {number} style.shadowBlur - 阴影模糊度，大于0有效。默认值：0。 + * @param {number} style.shadowColor - 阴影颜色。默认值："#000000'"。 + * @param {number} style.shadowOffsetX - 阴影横向偏移。默认值：0。 + * @param {number} style.shadowOffsetY - 阴影纵向偏移。默认值：0。 + * @param {string} style.text - 图形中的附加文本。默认值：""。 + * @param {string} style.textColor - 文本颜色。默认值："#000000'"。 + * @param {string} style.textFont - 附加文本样式。示例:'bold 18px verdana'。 + * @param {string} style.textPosition - 附加文本位置。可设值："inside", "left", "right", top", "bottom", "end"。默认值："end"。 + * @param {string} style.textAlign - 附加文本水平对齐。可设值："start", "end", "left", "right", "center"。默认根据 textPosition 自动设置。 + * @param {string} style.textBaseline - 附加文本垂直对齐。可设值："top", "bottom", "middle", "alphabetic", "hanging", "ideographic"。默认根据 textPosition 自动设置。 + */ + /** + * @function Zondy.LevelRenderer.SmicSector.constructor + * @description 构造函数。 + * + * @param {Array} options - shape 的配置（options）项，可以是 shape 的自有属性，也可以是自定义的属性。 + * + */ + constructor(options) { + super(options); + /** + * @member {string} Zondy.LevelRenderer.SmicSector.protptype.type + * @description 图形类型。 + */ + this.type = 'smicsector'; + if (!this.refOriginalPosition || this.refOriginalPosition.length !== 2) { + this.refOriginalPosition = [0, 0]; + } + this.CLASS_NAME = "Zondy.LevelRenderer.Shape.SmicSector"; + } + + /** + * @function Zondy.LevelRenderer.SmicSector.prototype.destroy + * @description 销毁对象，释放资源。调用此函数后所有属性将被置为 null。 + */ + destroy() { + this.type = null; + super.destroy(); + } + + /** + * @function Zondy.LevelRenderer.SmicSector.prototype.buildPath + * @description 创建扇形路径。 + * + * @param {CanvasRenderingContext2D} ctx - Context2D 上下文。 + * @param {Object} style - style。 + * + */ + buildPath(ctx, style) { + if (!this.refOriginalPosition || this.refOriginalPosition.length !== 2) { + this.refOriginalPosition = [0, 0]; + } + var __OP = this.refOriginalPosition; + + var x = style.x + __OP[0]; // 圆心x + var y = style.y + __OP[1]; // 圆心y + var r0 = style.r0 || 0; // 形内半径[0,r) + var r = style.r; // 扇形外半径(0,r] + var startAngle = style.startAngle; // 起始角度[0,360) + var endAngle = style.endAngle; // 结束角度(0,360] + var clockWise = style.clockWise || false; + + startAngle = SUtil.Util_math.degreeToRadian(startAngle); + endAngle = SUtil.Util_math.degreeToRadian(endAngle); + + if (!clockWise) { + // 扇形默认是逆时针方向，Y轴向上 + // 这个跟arc的标准不一样，为了兼容echarts + startAngle = -startAngle; + endAngle = -endAngle; + } + + var unitX = SUtil.Util_math.cos(startAngle); + var unitY = SUtil.Util_math.sin(startAngle); + ctx.moveTo( + unitX * r0 + x, + unitY * r0 + y + ); + + ctx.lineTo( + unitX * r + x, + unitY * r + y + ); + + ctx.arc(x, y, r, startAngle, endAngle, !clockWise); + + ctx.lineTo( + SUtil.Util_math.cos(endAngle) * r0 + x, + SUtil.Util_math.sin(endAngle) * r0 + y + ); + + if (r0 !== 0) { + ctx.arc(x, y, r0, endAngle, startAngle, clockWise); + } + + ctx.closePath(); + + return; + } + + /** + * @function Zondy.LevelRenderer.SmicSector.prototype.getRect + * @description 返回扇形包围盒矩形 + * + * @param {Object} style - style + * @return {Object} 边框对象。包含属性：x，y，width，height。 + * + */ + getRect(style) { + if (style.__rect) { + return style.__rect; + } + + if (!this.refOriginalPosition || this.refOriginalPosition.length !== 2) { + this.refOriginalPosition = [0, 0]; + } + var __OP = this.refOriginalPosition; + + var min0 = SUtil.Util_vector.create(); + var min1 = SUtil.Util_vector.create(); + var max0 = SUtil.Util_vector.create(); + var max1 = SUtil.Util_vector.create(); + + var x = style.x + __OP[0]; // 圆心x + var y = style.y + __OP[1]; // 圆心y + var r0 = style.r0 || 0; // 形内半径[0,r) + var r = style.r; // 扇形外半径(0,r] + var startAngle = SUtil.Util_math.degreeToRadian(style.startAngle); + var endAngle = SUtil.Util_math.degreeToRadian(style.endAngle); + var clockWise = style.clockWise; + + if (!clockWise) { + startAngle = -startAngle; + endAngle = -endAngle; + } + + if (r0 > 1) { + SUtil.Util_computeBoundingBox.arc( + x, y, r0, startAngle, endAngle, !clockWise, min0, max0 + ); + } else { + min0[0] = max0[0] = x; + min0[1] = max0[1] = y; + } + SUtil.Util_computeBoundingBox.arc( + x, y, r, startAngle, endAngle, !clockWise, min1, max1 + ); + + SUtil.Util_vector.min(min0, min0, min1); + SUtil.Util_vector.max(max0, max0, max1); + style.__rect = { + x: min0[0], + y: min0[1], + width: max0[0] - min0[0], + height: max0[1] - min0[1] + }; + return style.__rect; + } +} + +export {SmicSector}; +Zondy.LevelRenderer.SmicSector = SmicSector; \ No newline at end of file diff --git a/src/mapboxgl/theme/common/overlay/levelRender/SmicStar.js b/src/mapboxgl/theme/common/overlay/levelRender/SmicStar.js new file mode 100644 index 000000000..11da89692 --- /dev/null +++ b/src/mapboxgl/theme/common/overlay/levelRender/SmicStar.js @@ -0,0 +1,182 @@ +import { Common } from '@mapgis/webclient-es6-service'; +const { Zondy } = Common; +import {Shape} from './Shape'; +import {SUtil} from './SUtil'; + +/** + * @private + * @class Zondy.LevelRenderer.SmicStar + * @classdesc n 角星（n>3）。 + * @extends Zondy.LevelRenderer.Shape + * @example + * var shape = new Zondy.LevelRenderer.SmicStar({ + * style: { + * x: 200, + * y: 100, + * r: 150, + * n: 5, + * text: '五角星' + * } + * }); + * levelRenderer.addShape(shape); + */ +class SmicStar extends Shape { + + /** + * @member {Object} Zondy.LevelRenderer.SmicStar.prototype.style + * @description 绘制样式。 + * + * @param {number} style.x - n 角星外接圆心 x 坐标，必设参数。 + * @param {number} style.y - n 角星外接圆心 y 坐标，必设参数。 + * @param {number} style.r - n 角星外接圆半径，必设参数。 + * @param {number} style.r0 - n 角星内部顶点（凹点）的外接圆半径。如果不指定此参数，则自动计算：取相隔外部顶点连线的交点作内部顶点。 + * @param {number} style.n -指明几角星，必设参数。 + * @param {string} style.brushType - 画笔类型。可设值："fill", "stroke", "both"。默认值："fill"。 + * @param {string} style.color - 填充颜色。默认值："#000000'"。 + * @param {string} style.strokeColor - 描边颜色。默认值："#000000'"。 + * @param {string} style.lineCape - 线帽样式。可设值："butt", "round", "square"。默认值："butt"。 + * @param {number} style.lineWidth - 描边宽度。默认值：1。 + * @param {number} style.opacity - 绘制透明度。默认值：1。 + * @param {number} style.shadowBlur - 阴影模糊度，大于0有效。默认值：0。 + * @param {number} style.shadowColor - 阴影颜色。默认值："#000000'"。 + * @param {number} style.shadowOffsetX - 阴影横向偏移。默认值：0。 + * @param {number} style.shadowOffsetY - 阴影纵向偏移。默认值：0。 + * @param {string} style.text - 图形中的附加文本。默认值：""。 + * @param {string} style.textColor - 文本颜色。默认值："#000000'"。 + * @param {string} style.textFont - 附加文本样式。示例:'bold 18px verdana'。 + * @param {string} style.textPosition - 附加文本位置。可设值："inside", "left", "right", top", "bottom", "end"。默认值："end"。 + * @param {string} style.textAlign - 附加文本水平对齐。可设值："start", "end", "left", "right", "center"。默认根据 textPosition 自动设置。 + * @param {string} style.textBaseline - 附加文本垂直对齐。可设值："top", "bottom", "middle", "alphabetic", "hanging", "ideographic"。默认根据 textPosition 自动设置。 + */ + /** + * @function Zondy.LevelRenderer.SmicStar.constructor + * @description 构造函数。 + * + * @param {Array} options - shape 的配置（options）项，可以是 shape 的自有属性，也可以是自定义的属性。 + * + */ + constructor(options) { + super(options); + /** + * @member {string} Zondy.LevelRenderer.SmicStar.prototype.type + * @description 图形类型。 + */ + this.type = 'smicstar'; + + if (!this.refOriginalPosition || this.refOriginalPosition.length !== 2) { + this.refOriginalPosition = [0, 0]; + } + + this.CLASS_NAME = "Zondy.LevelRenderer.Shape.SmicStar"; + } + + /** + * @function Zondy.LevelRenderer.SmicStar.prototype.destroy + * @description 销毁对象，释放资源。调用此函数后所有属性将被置为 null。 + */ + destroy() { + this.type = null; + super.destroy(); + } + + /** + * @function Zondy.LevelRenderer.SmicStar.prototype.buildPath + * @description 创建n 角星（n>3）路径。 + * + * @param {CanvasRenderingContext2D} ctx - Context2D 上下文。 + * @param {Object} style - style。 + * + */ + buildPath(ctx, style) { + if (!this.refOriginalPosition || this.refOriginalPosition.length !== 2) { + this.refOriginalPosition = [0, 0]; + } + var __OP = this.refOriginalPosition; + + var n = style.n; + if (!n || n < 2) { + return; + } + + var sin = SUtil.Util_math.sin; + var cos = SUtil.Util_math.cos; + var PI = Math.PI; + + var x = style.x + __OP[0]; + var y = style.y + __OP[1]; + var r = style.r; + var r0 = style.r0; + + // 如果未指定内部顶点外接圆半径，则自动计算 + if (r0 == null) { + r0 = n > 4 + // 相隔的外部顶点的连线的交点， + // 被取为内部交点，以此计算r0 + ? r * cos(2 * PI / n) / cos(PI / n) + // 二三四角星的特殊处理 + : r / 3; + } + + var dStep = PI / n; + var deg = -PI / 2; + var xStart = x + r * cos(deg); + var yStart = y + r * sin(deg); + deg += dStep; + + // 记录边界点，用于判断inside + var pointList = style.pointList = []; + pointList.push([xStart, yStart]); + for (var i = 0, end = n * 2 - 1, ri; i < end; i++) { + ri = i % 2 === 0 ? r0 : r; + pointList.push([x + ri * cos(deg), y + ri * sin(deg)]); + deg += dStep; + } + pointList.push([xStart, yStart]); + + // 绘制 + ctx.moveTo(pointList[0][0], pointList[0][1]); + for (let i = 0; i < pointList.length; i++) { + ctx.lineTo(pointList[i][0], pointList[i][1]); + } + + ctx.closePath(); + + return; + } + + /** + * @function Zondy.LevelRenderer.SmicStar.prototype.getRect + * @description 返回 n 角星包围盒矩形。 + * + * @param {Object} style - style + * @return {Object} 边框对象。包含属性：x，y，width，height。 + */ + getRect(style) { + if (style.__rect) { + return style.__rect; + } + + if (!this.refOriginalPosition || this.refOriginalPosition.length !== 2) { + this.refOriginalPosition = [0, 0]; + } + var __OP = this.refOriginalPosition; + + var lineWidth; + if (style.brushType === 'stroke' || style.brushType === 'fill') { + lineWidth = style.lineWidth || 1; + } else { + lineWidth = 0; + } + style.__rect = { + x: Math.round((style.x + __OP[0]) - style.r - lineWidth / 2), + y: Math.round((style.y + __OP[1]) - style.r - lineWidth / 2), + width: style.r * 2 + lineWidth, + height: style.r * 2 + lineWidth + }; + + return style.__rect; + } +} + +export {SmicStar}; +Zondy.LevelRenderer.SmicStar = SmicStar; \ No newline at end of file diff --git a/src/mapboxgl/theme/common/overlay/levelRender/SmicText.js b/src/mapboxgl/theme/common/overlay/levelRender/SmicText.js new file mode 100644 index 000000000..e083648e4 --- /dev/null +++ b/src/mapboxgl/theme/common/overlay/levelRender/SmicText.js @@ -0,0 +1,515 @@ +import { Common } from '@mapgis/webclient-es6-service'; +const { Zondy } = Common; +import {Shape} from './Shape'; +import {SUtil} from './SUtil'; + +/** + * @private + * @class Zondy.LevelRenderer.SmicText + * @extends {Zondy.LevelRenderer.Shape} + * @example + * var shape = new Zondy.LevelRenderer.SmicText({ + * style: { + * text: 'Label', + * x: 100, + * y: 100, + * textFont: '14px Arial' + * } + * }); + * levelRenderer.addShape(shape); + * + */ +class SmicText extends Shape { + + /** + * @member {Object} Zondy.LevelRenderer.SmicText.prototype.style + * @description 绘制样式。 + * + * @param {number} style.x - 横坐标，必设参数。 + * @param {number} style.y - 纵坐标，必设参数。 + * @param {string} style.text - 图形中的附加文本。默认值：""。 + * @param {number} style.maxWidth - 最大宽度限制。默认值：null。 + * @param {string} style.textFont - 附加文本样式。示例:'bold 18px verdana'。 + * @param {string} style.textAlign - 附加文本水平对齐。可设值："start", "end", "left", "right", "center"。默认根据 textPosition 自动设置。 + * @param {string} style.textBaseline - 附加文本垂直对齐。可设值："top", "bottom", "middle", "alphabetic", "hanging", "ideographic"。默认根据 textPosition 自动设置。 + * @param {string} style.brushType -画笔类型。可设值："fill", "stroke", "both"。默认值："fill"。 + * @param {string} style.color - 填充颜色。默认值："#000000'"。 + * @param {string} style.strokeColor - 描边颜色。默认值："#000000'"。 + * @param {number} style.lineWidth - 描边宽度。默认值：1。 + * @param {number} style.opacity - 绘制透明度。默认值：1。 + * @param {number} style.shadowBlur - 阴影模糊度，大于0有效。默认值：0。 + * @param {number} style.shadowColor - 阴影颜色。默认值："#000000'"。 + * @param {number} style.shadowOffsetX - 阴影横向偏移。默认值：0。 + * @param {number} style.shadowOffsetY - 阴影纵向偏移。默认值：0。 + */ + + /** + * @function Zondy.LevelRenderer.SmicText.constructor + * @description 构造函数。 + * + * @param {Array} options - shape 的配置（options）项，可以是 shape 的自有属性，也可以是自定义的属性。 + * + */ + constructor(options) { + super(options); + /** + * @member {string} Zondy.LevelRenderer.SmicText.prototype.type + * @description 图形类型. + */ + this.type = 'smictext'; + if (!this.refOriginalPosition || this.refOriginalPosition.length !== 2) { + this.refOriginalPosition = [0, 0]; + } + this.CLASS_NAME = "Zondy.LevelRenderer.SmicText"; + } + + /** + * @function Zondy.LevelRenderer.SmicText.prototype.destroy + * @description 销毁对象，释放资源。调用此函数后所有属性将被置为 null。 + */ + destroy() { + this.type = null; + + super.destroy(); + } + + /** + * @function Zondy.LevelRenderer.SmicText.prototype.brush + * @description 笔触。 + * + * @param {CanvasRenderingContext2D} ctx - Context2D 上下文。 + * @param {boolean} isHighlight - 是否使用高亮属性。 + * + */ + brush(ctx, isHighlight) { + if (!this.refOriginalPosition || this.refOriginalPosition.length !== 2) { + this.refOriginalPosition = [0, 0]; + } + var __OP = this.refOriginalPosition; + + var style = this.style; + if (isHighlight) { + // 根据style扩展默认高亮样式 + style = this.getHighlightStyle( + style, this.highlightStyle || {} + ); + } + + if (typeof (style.text) == 'undefined' || style.text === false) { + return; + } + + ctx.save(); + this.doClip(ctx); + + this.setContext(ctx, style); + + // 设置transform + this.setTransform(ctx); + + if (style.textFont) { + ctx.font = style.textFont; + } + ctx.textAlign = style.textAlign || 'start'; + ctx.textBaseline = style.textBaseline || 'middle'; + + var text = (style.text + '').split('\n'); + var lineHeight = SUtil.Util_area.getTextHeight('ZH', style.textFont); + var rect = this.getRectNoRotation(style); + // var x = style.x; + var x = style.x + __OP[0]; + var y; + if (style.textBaseline === 'top') { + y = rect.y; + } else if (style.textBaseline === 'bottom') { + y = rect.y + lineHeight; + } else { + y = rect.y + lineHeight / 2; + } + var ox = style.x + __OP[0]; + var oy = style.y + __OP[1]; + + //文本绘制 + for (var i = 0, l = text.length; i < l; i++) { + //是否渲染矩形背景及颜色 + if (style.labelRect) { + //+4,-2是为了让文字距边框左右边缘有点间隔 + ctx.fillRect(rect.x - 2, rect.y, rect.width + 4, rect.height); + ctx.fillStyle = style.strokeColor; + ctx.strokeRect(rect.x - 2, rect.y, rect.width + 4, rect.height); + ctx.fillStyle = style.textColor; + } + + switch (style.brushType) { + case 'stroke': + this.setCtxGlobalAlpha(ctx, "stroke", style); + if (style.textRotation && style.textRotation !== 0) { + ctx.save(); + ctx.translate(ox, oy); + ctx.rotate(style.textRotation * Math.PI / 180); + if (style.textBaseline === 'top') { + if (style.maxWidth) { + ctx.strokeText(text[i], 0, lineHeight * i, style.maxWidth); + } else { + ctx.strokeText(text[i], 0, lineHeight * i); + } + } else if (style.textBaseline === 'bottom') { + if (style.maxWidth) { + ctx.strokeText(text[i], 0, lineHeight * (i + 1) - rect.height, style.maxWidth); + } else { + ctx.strokeText(text[i], 0, lineHeight * (i + 1) - rect.height); + } + } else { + if (style.maxWidth) { + ctx.strokeText(text[i], 0, lineHeight * (i + 1) - rect.height / 2 - lineHeight / 2, style.maxWidth); + } else { + ctx.strokeText(text[i], 0, lineHeight * (i + 1) - rect.height / 2 - lineHeight / 2); + } + } + ctx.restore(); + } else { + if (style.maxWidth) { + ctx.strokeText(text[i], x, y, style.maxWidth); + } else { + ctx.strokeText(text[i], x, y); + } + } + this.setCtxGlobalAlpha(ctx, "reset", style); + break; + case 'both': + if (style.textRotation && style.textRotation !== 0) { + ctx.save(); + ctx.translate(ox, oy); + ctx.rotate(style.textRotation * Math.PI / 180); + if (style.textBaseline === 'top') { + if (style.maxWidth) { + this.setCtxGlobalAlpha(ctx, "fill", style); + ctx.fillText(text[i], 0, lineHeight * i, style.maxWidth); + this.setCtxGlobalAlpha(ctx, "reset", style); + + this.setCtxGlobalAlpha(ctx, "stroke", style); + ctx.strokeText(text[i], 0, lineHeight * i, style.maxWidth); + this.setCtxGlobalAlpha(ctx, "reset", style); + } else { + this.setCtxGlobalAlpha(ctx, "fill", style); + ctx.fillText(text[i], 0, lineHeight * i); + this.setCtxGlobalAlpha(ctx, "reset", style); + + this.setCtxGlobalAlpha(ctx, "stroke", style); + ctx.strokeText(text[i], 0, lineHeight * i); + this.setCtxGlobalAlpha(ctx, "reset", style); + } + } else if (style.textBaseline === 'bottom') { + if (style.maxWidth) { + this.setCtxGlobalAlpha(ctx, "fill", style); + ctx.fillText(text[i], 0, lineHeight * (i + 1) - rect.height, style.maxWidth); + this.setCtxGlobalAlpha(ctx, "reset", style); + + this.setCtxGlobalAlpha(ctx, "stroke", style); + ctx.strokeText(text[i], 0, lineHeight * (i + 1) - rect.height, style.maxWidth); + this.setCtxGlobalAlpha(ctx, "reset", style); + } else { + this.setCtxGlobalAlpha(ctx, "fill", style); + ctx.fillText(text[i], 0, lineHeight * (i + 1) - rect.height); + this.setCtxGlobalAlpha(ctx, "reset", style); + + this.setCtxGlobalAlpha(ctx, "stroke", style); + ctx.strokeText(text[i], 0, lineHeight * (i + 1) - rect.height); + this.setCtxGlobalAlpha(ctx, "reset", style); + } + } else { + if (style.maxWidth) { + this.setCtxGlobalAlpha(ctx, "fill", style); + ctx.fillText(text[i], 0, lineHeight * (i + 1) - rect.height / 2 - lineHeight / 2, style.maxWidth); + this.setCtxGlobalAlpha(ctx, "reset", style); + + this.setCtxGlobalAlpha(ctx, "stroke", style); + ctx.strokeText(text[i], 0, lineHeight * (i + 1) - rect.height / 2 - lineHeight / 2, style.maxWidth); + this.setCtxGlobalAlpha(ctx, "reset", style); + } else { + this.setCtxGlobalAlpha(ctx, "fill", style); + ctx.fillText(text[i], 0, lineHeight * (i + 1) - rect.height / 2 - lineHeight / 2); + this.setCtxGlobalAlpha(ctx, "reset", style); + + this.setCtxGlobalAlpha(ctx, "stroke", style); + ctx.strokeText(text[i], 0, lineHeight * (i + 1) - rect.height / 2 - lineHeight / 2); + this.setCtxGlobalAlpha(ctx, "reset", style); + } + } + ctx.restore(); + } else { + if (style.maxWidth) { + this.setCtxGlobalAlpha(ctx, "fill", style); + ctx.fillText(text[i], x, y, style.maxWidth); + this.setCtxGlobalAlpha(ctx, "reset", style); + + this.setCtxGlobalAlpha(ctx, "stroke", style); + ctx.strokeText(text[i], x, y, style.maxWidth); + this.setCtxGlobalAlpha(ctx, "reset", style); + } else { + this.setCtxGlobalAlpha(ctx, "fill", style); + ctx.fillText(text[i], x, y); + this.setCtxGlobalAlpha(ctx, "reset", style); + + this.setCtxGlobalAlpha(ctx, "stroke", style); + ctx.strokeText(text[i], x, y); + this.setCtxGlobalAlpha(ctx, "reset", style); + } + } + break; + default: + //fill or others + this.setCtxGlobalAlpha(ctx, "fill", style); + if (style.textRotation && style.textRotation !== 0) { + ctx.save(); + ctx.translate(ox, oy); + ctx.rotate(style.textRotation * Math.PI / 180); + if (style.textBaseline === 'top') { + if (style.maxWidth) { + ctx.fillText(text[i], 0, lineHeight * i, style.maxWidth); + } else { + ctx.fillText(text[i], 0, lineHeight * i); + } + } else if (style.textBaseline === 'bottom') { + if (style.maxWidth) { + ctx.fillText(text[i], 0, lineHeight * (i + 1) - rect.height, style.maxWidth); + } else { + ctx.fillText(text[i], 0, lineHeight * (i + 1) - rect.height); + } + } else { + if (style.maxWidth) { + ctx.fillText(text[i], 0, lineHeight * (i + 1) - rect.height / 2 - lineHeight / 2, style.maxWidth); + } else { + ctx.fillText(text[i], 0, lineHeight * (i + 1) - rect.height / 2 - lineHeight / 2); + } + } + ctx.restore(); + } else { + if (style.maxWidth) { + ctx.fillText(text[i], x, y, style.maxWidth); + } else { + ctx.fillText(text[i], x, y); + } + } + this.setCtxGlobalAlpha(ctx, "reset", style); + } + y += lineHeight; + } + + ctx.restore(); + return; + } + + /** + * @function Zondy.LevelRenderer.SmicText.prototype.getRect + * @description 返回文字包围盒矩形 + */ + getRect(style) { + if (style.__rect) { + return style.__rect; + } + + var left, + top, + right, + bottom; + var tbg = this.getTextBackground(style, true); + for (var i = 0, len = tbg.length; i < len; i++) { + var poi = tbg[i]; + + //用第一个点初始化 + if (i === 0) { + left = poi[0]; + right = poi[0]; + top = poi[1]; + bottom = poi[1]; + } else { + if (poi[0] < left) { + left = poi[0] + } + if (poi[0] > right) { + right = poi[0] + } + if (poi[1] < top) { + top = poi[1] + } + if (poi[1] > bottom) { + bottom = poi[1] + } + } + } + + style.__rect = { + x: left, + y: top, + width: right - left, + height: bottom - top + }; + + return style.__rect; + } + + + /** + * @function Zondy.LevelRenderer.SmicText.prototype.getRectNoRotation + * @description 返回忽略旋转和maxWidth时文字包围盒矩形 + */ + getRectNoRotation(style) { + + if (!this.refOriginalPosition || this.refOriginalPosition.length !== 2) { + this.refOriginalPosition = [0, 0]; + } + var __OP = this.refOriginalPosition; + + var lineHeight = SUtil.Util_area.getTextHeight('ZH', style.textFont); + + var width = SUtil.Util_area.getTextWidth(style.text, style.textFont); + var height = SUtil.Util_area.getTextHeight(style.text, style.textFont); + + //处理文字位置，注：文本的绘制是由此 rect 决定 + var textX = style.x + __OP[0]; // 默认start == left + if (style.textAlign === 'end' || style.textAlign === 'right') { + textX -= width; + } else if (style.textAlign === 'center') { + textX -= (width / 2); + } + + var textY; + if (style.textBaseline === 'top') { + // textY = style.y; + textY = style.y + __OP[1]; + } else if (style.textBaseline === 'bottom') { + textY = (style.y + __OP[1]) - height; + } else { + // middle + textY = (style.y + __OP[1]) - height / 2; + } + + var isWidthChangeByMaxWidth = false; + var widthBeforeChangeByMaxWidth; + + //处理 maxWidth + if (style.maxWidth) { + var maxWidth = parseInt(style.maxWidth); + if (maxWidth < width) { + widthBeforeChangeByMaxWidth = width; + isWidthChangeByMaxWidth = true; + width = maxWidth; + } + + textX = style.x + __OP[0]; + if (style.textAlign === 'end' || style.textAlign === 'right') { + textX -= width; + } else if (style.textAlign === 'center') { + textX -= (width / 2); + } + } + + //处理斜体字 + if (style.textFont) { + var textFont = style.textFont; + var textFontStr = textFont.toLowerCase() + if (textFontStr.indexOf("italic") > -1) { + if (widthBeforeChangeByMaxWidth && isWidthChangeByMaxWidth === true) { + width += (lineHeight / 3) * (width / widthBeforeChangeByMaxWidth); + } else { + width += lineHeight / 3; + } + } + } + + var rect = { + x: textX, + y: textY, + width: width, + height: height + }; + + return rect; + } + + /** + * @function Zondy.LevelRenderer.SmicText.prototype.getTextBackground + * @description 获取文本背景框范围 + * + * @param {Object} style - 样式。 + * @param {boolean} redo - 是否强制重新计算 textBackground。 + */ + getTextBackground(style, redo) { + if (!this.refOriginalPosition || this.refOriginalPosition.length !== 2) { + this.refOriginalPosition = [0, 0]; + } + var __OP = this.refOriginalPosition; + + if ((!redo || redo === false) && style.__textBackground) { + return style.__textBackground; + } + + //不旋转时矩形框 + var rect = this.getRectNoRotation(style); + + //旋转中心点 + var ox = style.x + __OP[0]; + var oy = style.y + __OP[1]; + + //背景框 + var background = []; + + if (style.textRotation && style.textRotation !== 0) { + let textRotation = style.textRotation; + let ltPoi = this.getRotatedLocation(rect.x, rect.y, ox, oy, textRotation); + let rtPoi = this.getRotatedLocation(rect.x + rect.width, rect.y, ox, oy, textRotation); + let rbPoi = this.getRotatedLocation(rect.x + rect.width, rect.y + rect.height, ox, oy, textRotation); + let lbPoi = this.getRotatedLocation(rect.x, rect.y + rect.height, ox, oy, textRotation); + + background.push(ltPoi); + background.push(rtPoi); + background.push(rbPoi); + background.push(lbPoi); + } else { + let ltPoi = [rect.x, rect.y]; + let rtPoi = [rect.x + rect.width, rect.y]; + let rbPoi = [rect.x + rect.width, rect.y + rect.height]; + let lbPoi = [rect.x, rect.y + rect.height]; + + background.push(ltPoi); + background.push(rtPoi); + background.push(rbPoi); + background.push(lbPoi); + } + + style.__textBackground = background; + + return style.__textBackground; + } + + /** + * @function Zondy.LevelRenderer.SmicText.prototype.getRotatedLocation + * @description 获取一个点绕旋转中心顺时针旋转后的位置。（此方法用于屏幕坐标） + * + * @param {number} x - 旋转点横坐标。 + * @param {number} y - 旋转点纵坐标。 + * @param {number} rx - 旋转中心点横坐标。 + * @param {number} ry - 旋转中心点纵坐标。 + * @param {number} angle - 旋转角度（度）。 + * @return {Array} 旋转后的坐标位置，长度为 2 的一维数组，数组第一个元素表示 x 坐标，第二个元素表示 y 坐标。 + */ + getRotatedLocation(x, y, rx, ry, angle) { + var loc = new Array(), + x0, + y0; + + y = -y; + ry = -ry; + angle = -angle;//顺时针旋转 + x0 = (x - rx) * Math.cos((angle / 180) * Math.PI) - (y - ry) * Math.sin((angle / 180) * Math.PI) + rx; + y0 = (x - rx) * Math.sin((angle / 180) * Math.PI) + (y - ry) * Math.cos((angle / 180) * Math.PI) + ry; + + loc[0] = x0; + loc[1] = -y0; + return loc; + } +} + +export {SmicText}; +Zondy.LevelRenderer.SmicText = SmicText; \ No newline at end of file diff --git a/src/mapboxgl/theme/common/overlay/levelRender/Storage.js b/src/mapboxgl/theme/common/overlay/levelRender/Storage.js new file mode 100644 index 000000000..9c676ab73 --- /dev/null +++ b/src/mapboxgl/theme/common/overlay/levelRender/Storage.js @@ -0,0 +1,477 @@ +import { Common } from '@mapgis/webclient-es6-service'; +const { Zondy, indexOf, merge } = Common; +import {Group} from './Group'; + +/** + * @private + * @class Zondy.LevelRenderer.Storage + * @classdesc 内容（图像）仓库 (M) 。 + */ +class Storage { + /** + * @function Zondy.LevelRenderer.Storage.constructor + * @description 构造函数。 + */ + constructor() { + /** + * @member {Object} Zondy.LevelRenderer.Storage.prototype._elements + * @description 所有常规形状，id 索引的 map。 + */ + this._elements = {}; + + /** + * @member {Array} Zondy.LevelRenderer.Storage.prototype._hoverElements + * @description 高亮层形状，不稳定，动态增删，数组位置也是 z 轴方向，靠前显示在下方。 + * + */ + this._hoverElements = []; + + /** + * @member {Array} Zondy.LevelRenderer.Storage.prototype._roots + * @description _roots。 + * + */ + this._roots = []; + + /** + * @member {Array} Zondy.LevelRenderer.Storage.prototype._shapeList + * @description _shapeList。 + * + */ + this._shapeList = []; + + /** + * @member {number} Zondy.LevelRenderer.Storage.prototype._shapeListOffset + * @description _shapeListOffset。默认值：0。 + * + */ + this._shapeListOffset = 0; + + this.CLASS_NAME = "Zondy.LevelRenderer.Storage"; + } + + /** + * @function Zondy.LevelRenderer.Storage.prototype.destroy + * @description 销毁对象，释放资源。调用此函数后所有属性将被置为 null。 + */ + destroy() { + this.dispose(); + this._shapeList = null; + this._shapeListOffset = null; + } + + /** + * @function Zondy.LevelRenderer.Storage.prototype.iterShape + * @description 遍历迭代器。 + * + * @param {Function} fun - 迭代回调函数，return true终止迭代。 + * @param {Object} option - 迭代参数，缺省为仅降序遍历普通层图形。 + * @param {boolean} [hover=true] - 是否是高亮层图形。 + * @param {string} [normal='down'] - 是否是普通层图形，迭代时是否指定及z轴顺序。可设值：'down' ，'up'。 + * @param {boolean} [update=false] - 是否在迭代前更新形状列表。 + * @return {Zondy.LevelRenderer.Storage} this。 + */ + iterShape(fun, option) { + if (!option) { + var defaultIterateOption = { + hover: false, + normal: 'down', + update: false + }; + option = defaultIterateOption; + } + + if (option.hover) { + // 高亮层数据遍历 + for (var i = 0, l = this._hoverElements.length; i < l; i++) { + var el = this._hoverElements[i]; + el.updateTransform(); + if (fun(el)) { + return this; + } + } + } + + if (option.update) { + this.updateShapeList(); + } + + // 遍历: 'down' | 'up' + switch (option.normal) { + case 'down': { + // 降序遍历，高层优先 + let l = this._shapeList.length; + while (l--) { + if (fun(this._shapeList[l])) { + return this; + } + } + break; + } + // case 'up': + default: { + // 升序遍历，底层优先 + for (let i = 0, l = this._shapeList.length; i < l; i++) { + if (fun(this._shapeList[i])) { + return this; + } + } + break; + } + } + + return this; + } + + /** + * @function Zondy.LevelRenderer.Storage.prototype.getHoverShapes + * @param {boolean} [update=false] - 是否在返回前更新图形的变换。 + * @return {Array.} 图形数组。 + */ + getHoverShapes(update) { + // hoverConnect + var hoverElements = [], + len = this._hoverElements.length; + for (let i = 0; i < len; i++) { + hoverElements.push(this._hoverElements[i]); + var target = this._hoverElements[i].hoverConnect; + if (target) { + var shape; + target = target instanceof Array ? target : [target]; + for (var j = 0, k = target.length; j < k; j++) { + shape = target[j].id ? target[j] : this.get(target[j]); + if (shape) { + hoverElements.push(shape); + } + } + } + } + hoverElements.sort(Storage.shapeCompareFunc); + if (update) { + for (let i = 0, l = hoverElements.length; i < l; i++) { + hoverElements[i].updateTransform(); + } + } + return hoverElements; + } + + /** + * @function Zondy.LevelRenderer.Storage.prototype.getShapeList + * @description 返回所有图形的绘制队列。 + * + * @param {boolean} [update=false] - 是否在返回前更新该数组。 详见： updateShapeList。 + * @return {Zondy.LevelRenderer.Shape} 图形。 + */ + getShapeList(update) { + if (update) { + this.updateShapeList(); + } + return this._shapeList; + } + + /** + * @function Zondy.LevelRenderer.Storage.prototype.updateShapeList + * @description 更新图形的绘制队列。每次绘制前都会调用，该方法会先深度优先遍历整个树，更新所有Group和Shape的变换并且把所有可见的Shape保存到数组中，最后根据绘制的优先级（zlevel > z > 插入顺序）排序得到绘制队列。 + */ + updateShapeList() { + this._shapeListOffset = 0; + var rootsLen = this._roots.length; + for (let i = 0; i < rootsLen; i++) { + let root = this._roots[i]; + this._updateAndAddShape(root); + } + this._shapeList.length = this._shapeListOffset; + + var shapeListLen = this._shapeList.length; + for (let i = 0; i < shapeListLen; i++) { + this._shapeList[i].__renderidx = i; + } + + this._shapeList.sort(Storage.shapeCompareFunc); + } + + /** + * @function Zondy.LevelRenderer.Storage.prototype._updateAndAddShape + * @description 更新并添加图形。 + */ + _updateAndAddShape(el, clipShapes) { + if (el.ignore) { + return; + } + + el.updateTransform(); + + if (el.type === 'group') { + + if (el.clipShape) { + // clipShape 的变换是基于 group 的变换 + el.clipShape.parent = el; + el.clipShape.updateTransform(); + + // PENDING 效率影响 + if (clipShapes) { + clipShapes = clipShapes.slice(); + clipShapes.push(el.clipShape); + } else { + clipShapes = [el.clipShape]; + } + } + + for (var i = 0; i < el._children.length; i++) { + var child = el._children[i]; + + // Force to mark as dirty if group is dirty + child.__dirty = el.__dirty || child.__dirty; + + this._updateAndAddShape(child, clipShapes); + } + + // Mark group clean here + el.__dirty = false; + + } else { + el.__clipShapes = clipShapes; + + this._shapeList[this._shapeListOffset++] = el; + } + } + + /** + * @function Zondy.LevelRenderer.Storage.prototype.mod + * @description 修改图形(Shape)或者组(Group)。 + * + * @param {string} elId - 唯一标识。 + * @param {Object} params - 参数。 + * @return {Zondy.LevelRenderer.Storage} this。 + */ + mod(elId, params) { + var el = this._elements[elId]; + if (el) { + + el.modSelf(); + + if (params) { + // 如果第二个参数直接使用 shape + // parent, _storage, __startClip 三个属性会有循环引用 + if (params.parent || params._storage || params.__startClip) { + var target = {}; + for (var name in params) { + if ( + name === 'parent' + || name === '_storage' + || name === '__startClip' + ) { + continue; + } + if (params.hasOwnProperty(name)) { + target[name] = params[name]; + } + } + merge(el, target, true); + } else { + merge(el, params, true); + } + } + } + + return this; + } + + /** + * @function Zondy.LevelRenderer.Storage.prototype.drift + * @description 移动指定的图形(Shape)的位置。 + * @param {string} shapeId - 唯一标识。 + * @param {number} dx + * @param {number} dy + * @return {Zondy.LevelRenderer.Storage} this。 + */ + drift(shapeId, dx, dy) { + var shape = this._elements[shapeId]; + if (shape) { + shape.needTransform = true; + if (shape.draggable === 'horizontal') { + dy = 0; + } else if (shape.draggable === 'vertical') { + dx = 0; + } + if (!shape.ondrift // ondrift + // 有onbrush并且调用执行返回false或undefined则继续 + || (shape.ondrift && !shape.ondrift(dx, dy)) + ) { + shape.drift(dx, dy); + } + } + + return this; + } + + /** + * @function Zondy.LevelRenderer.Storage.prototype.addHover + * @description 添加高亮层数据。 + * @param {Zondy.LevelRenderer.Shape} shape - 图形。 + * @return {Zondy.LevelRenderer.Storage} this。 + */ + addHover(shape) { + shape.updateNeedTransform(); + this._hoverElements.push(shape); + return this; + } + + /** + * @function Zondy.LevelRenderer.Storage.prototype.delHover + * @description 清空高亮层数据。 + * @return {Zondy.LevelRenderer.Storage} this。 + */ + delHover() { + this._hoverElements = []; + return this; + } + + /** + * @function Zondy.LevelRenderer.Storage.prototype.hasHoverShape + * @description 是否有图形在高亮层里。 + * @return {boolean} 是否有图形在高亮层里。 + */ + hasHoverShape() { + return this._hoverElements.length > 0; + } + + /** + * @function Zondy.LevelRenderer.Storage.prototype.addRoot + * @description 添加图形(Shape)或者组(Group)到根节点。 + * + * @param {(Zondy.LevelRenderer.Shape/Zondy.LevelRenderer.Group)} el - 图形。 + * + */ + addRoot(el) { + if (el instanceof Group) { + el.addChildrenToStorage(this); + } + + this.addToMap(el); + this._roots.push(el); + } + + /** + * @function Zondy.LevelRenderer.Storage.prototype.delRoot + * @description 删除指定的图形(Shape)或者组(Group)。 + * + * @param {Array.} elId - 删除图形(Shape)或者组(Group)的 id 数组。如果为空清空整个Storage。 + * + */ + delRoot(elId) { + if (typeof (elId) == 'undefined') { + // 不指定elId清空 + for (var i = 0; i < this._roots.length; i++) { + var root = this._roots[i]; + + if (root instanceof Group) { + root.delChildrenFromStorage(this); + } + } + + this._elements = {}; + this._hoverElements = []; + this._roots = []; + + return; + } + + if (elId instanceof Array) { + var elIdLen = elId.length; + for (let i = 0; i < elIdLen; i++) { + this.delRoot(elId[i]); + } + return; + } + + var el; + if (typeof (elId) == 'string') { + el = this._elements[elId]; + } else { + el = elId; + } + + var idx = indexOf(this._roots, el); + if (idx >= 0) { + this.delFromMap(el.id); + this._roots.splice(idx, 1); + if (el instanceof Group) { + el.delChildrenFromStorage(this); + } + } + } + + /** + * @function Zondy.LevelRenderer.Storage.prototype.addToMap + * @description 添加图形到 map。 + * + * @param {Zondy.LevelRenderer.Shape} el - 图形。 + * @return {Zondy.LevelRenderer.Storage} this。 + */ + addToMap(el) { + if (el instanceof Group) { + el._storage = this; + } + el.modSelf(); + + this._elements[el.id] = el; + + return this; + } + + /** + * @function Zondy.LevelRenderer.Storage.prototype.get + * @description 获取指定图形。 + * + * @param {string} elId - 图形 id。 + * @return {Zondy.LevelRenderer.Shape} 图形。 + */ + get(elId) { + return this._elements[elId]; + } + + /** + * @function Zondy.LevelRenderer.Storage.prototype.delFromMap + * @description 从 map 中删除指定图形。 + * + * @param {string} elId - 图形id。 + * @return {Zondy.LevelRenderer.Storage} this。 + */ + delFromMap(elId) { + var el = this._elements[elId]; + if (el) { + delete this._elements[elId]; + + if (el instanceof Group) { + el._storage = null; + } + } + + return this; + } + + /** + * @function Zondy.LevelRenderer.Storage.prototype.dispose + * @description 清空并且释放 Storage。 + */ + dispose() { + this._elements = null; + // this._renderList = null; + this._roots = null; + this._hoverElements = null; + } + + static shapeCompareFunc(a, b) { + if (a.zlevel === b.zlevel) { + if (a.z === b.z) { + return a.__renderidx - b.__renderidx; + } + return a.z - b.z; + } + return a.zlevel - b.zlevel; + } +} + +export {Storage}; +Zondy.LevelRenderer.Storage = Storage; \ No newline at end of file diff --git a/src/mapboxgl/theme/common/overlay/levelRender/Transformable.js b/src/mapboxgl/theme/common/overlay/levelRender/Transformable.js new file mode 100644 index 000000000..f158a2620 --- /dev/null +++ b/src/mapboxgl/theme/common/overlay/levelRender/Transformable.js @@ -0,0 +1,265 @@ +import { Common } from '@mapgis/webclient-es6-service'; +const { Zondy } = Common; +import {SUtil} from './SUtil'; + +/** + * @private + * @class Zondy.LevelRenderer.Transformable + * @classdesc 可变换超类，所有支持 Canvas Transform 变换操作的类均是此类的子类。此类不可实例化。 + */ +class Transformable { + + /** + * @function Zondy.LevelRenderer.Transformable.constructor + * @description 构造函数。 + */ + constructor() { + /** + * @member {Array.} Zondy.LevelRenderer.Transformable.prototype.position + * @description 平移， 默认值：[0, 0]。 + */ + this.position = [0, 0]; + + /** + * @member {Array.} Zondy.LevelRenderer.Transformable.prototype.rotation + * @description 旋转，可以通过数组二三项指定旋转的原点， 默认值：[0, 0, 0]。 + */ + this.rotation = [0, 0, 0]; + + /** + * @member {Array.} Zondy.LevelRenderer.Transformable.prototype.scale + * @description 缩放，可以通过数组三四项指定缩放的原点， 默认值：[1, 1, 0, 0]。 + */ + this.scale = [1, 1, 0, 0]; + + /** + * @member {boolean} Zondy.LevelRenderer.Transformable.prototype.needLocalTransform + * @description 是否变换。默认值：false。 + */ + this.needLocalTransform = false; + + /** + * @member {boolean} Zondy.LevelRenderer.Transformable.prototype.needTransform + * @description 是否有坐标变换。默认值：false。 + */ + this.needTransform = false; + + this.CLASS_NAME = "Zondy.LevelRenderer.Transformable"; + /** + * @function Zondy.LevelRenderer.Transformable.prototype.lookAt + * @description 设置图形的朝向。 + */ + this.lookAt = (function () { + var v = SUtil.Util_vector.create(); + // {Array{Number}|Float32Array} target + return function (target) { + if (!this.transform) { + this.transform = SUtil.Util_matrix.create(); + } + var m = this.transform; + SUtil.Util_vector.sub(v, target, this.position); + if (isAroundZero(v[0]) && isAroundZero(v[1])) { + return; + } + SUtil.Util_vector.normalize(v, v); + // Y Axis + // TODO Scale origin ? + m[2] = v[0] * this.scale[1]; + m[3] = v[1] * this.scale[1]; + // X Axis + m[0] = v[1] * this.scale[0]; + m[1] = -v[0] * this.scale[0]; + // Position + m[4] = this.position[0]; + m[5] = this.position[1]; + + this.decomposeTransform(); + + function isAroundZero(val) { + var EPSILON = 5e-5; + return val > -EPSILON && val < EPSILON; + } + }; + })(); + } + + /** + * @function Zondy.LevelRenderer.Transformable.prototype.destroy + * @description 销毁对象，释放资源。调用此函数后所有属性将被置为 null。 + */ + destroy() { + this.position = null; + this.rotation = null; + this.scale = null; + this.needLocalTransform = null; + this.needTransform = null; + } + + /** + * @function Zondy.LevelRenderer.Transformable.prototype.updateNeedTransform + * @description 更新 needLocalTransform + */ + updateNeedTransform() { + this.needLocalTransform = isNotAroundZero(this.rotation[0]) + || isNotAroundZero(this.position[0]) + || isNotAroundZero(this.position[1]) + || isNotAroundZero(this.scale[0] - 1) + || isNotAroundZero(this.scale[1] - 1); + + function isNotAroundZero(val) { + var EPSILON = 5e-5; + return val > EPSILON || val < -EPSILON; + } + } + + /** + * @function Zondy.LevelRenderer.Transformable.prototype.updateTransform + * @description 判断是否需要有坐标变换，更新 needTransform 属性。如果有坐标变换, 则从 position, rotation, scale 以及父节点的 transform 计算出自身的 transform 矩阵 + */ + updateTransform() { + this.updateNeedTransform(); + + if (this.parent) { + this.needTransform = this.needLocalTransform || this.parent.needTransform; + } else { + this.needTransform = this.needLocalTransform; + } + + if (!this.needTransform) { + return; + } + + var origin = [0, 0]; + + var m = this.transform || SUtil.Util_matrix.create(); + SUtil.Util_matrix.identity(m); + + if (this.needLocalTransform) { + if ( + isNotAroundZero(this.scale[0]) + || isNotAroundZero(this.scale[1]) + ) { + origin[0] = -this.scale[2] || 0; + origin[1] = -this.scale[3] || 0; + let haveOrigin = isNotAroundZero(origin[0]) + || isNotAroundZero(origin[1]); + if (haveOrigin) { + SUtil.Util_matrix.translate( + m, m, origin + ); + } + SUtil.Util_matrix.scale(m, m, this.scale); + if (haveOrigin) { + origin[0] = -origin[0]; + origin[1] = -origin[1]; + SUtil.Util_matrix.translate( + m, m, origin + ); + } + } + + if (this.rotation instanceof Array) { + if (this.rotation[0] !== 0) { + origin[0] = -this.rotation[1] || 0; + origin[1] = -this.rotation[2] || 0; + let haveOrigin = isNotAroundZero(origin[0]) + || isNotAroundZero(origin[1]); + if (haveOrigin) { + SUtil.Util_matrix.translate( + m, m, origin + ); + } + SUtil.Util_matrix.rotate(m, m, this.rotation[0]); + if (haveOrigin) { + origin[0] = -origin[0]; + origin[1] = -origin[1]; + SUtil.Util_matrix.translate( + m, m, origin + ); + } + } + } else { + if (this.rotation !== 0) { + SUtil.Util_matrix.rotate(m, m, this.rotation); + } + } + + if ( + isNotAroundZero(this.position[0]) || isNotAroundZero(this.position[1]) + ) { + SUtil.Util_matrix.translate(m, m, this.position); + } + } + + // 保存这个变换矩阵 + this.transform = m; + + // 应用父节点变换 + if (this.parent && this.parent.needTransform) { + if (this.needLocalTransform) { + SUtil.Util_matrix.mul(this.transform, this.parent.transform, this.transform); + } else { + SUtil.Util_matrix.copy(this.transform, this.parent.transform); + } + } + + function isNotAroundZero(val) { + var EPSILON = 5e-5; + return val > EPSILON || val < -EPSILON; + } + } + + /** + * @function Zondy.LevelRenderer.Transformable.prototype.setTransform + * @description 将自己的 transform 应用到 context 上。 + * + * @param {Context2D} ctx - Context2D 上下文。 + */ + setTransform(ctx) { + if (this.needTransform) { + var m = this.transform; + ctx.transform( + m[0], m[1], + m[2], m[3], + m[4], m[5] + ); + } + } + + /** + * @function Zondy.LevelRenderer.Transformable.prototype.decomposeTransform + * @description 分解`transform`矩阵到`position`, `rotation`, `scale` 。 + */ + decomposeTransform() { + if (!this.transform) { + return; + } + var m = this.transform; + var sx = m[0] * m[0] + m[1] * m[1]; + var position = this.position; + var scale = this.scale; + var rotation = this.rotation; + if (isNotAroundZero(sx - 1)) { + sx = Math.sqrt(sx); + } + var sy = m[2] * m[2] + m[3] * m[3]; + if (isNotAroundZero(sy - 1)) { + sy = Math.sqrt(sy); + } + position[0] = m[4]; + position[1] = m[5]; + scale[0] = sx; + scale[1] = sy; + scale[2] = scale[3] = 0; + rotation[0] = Math.atan2(-m[1] / sy, m[0] / sx); + rotation[1] = rotation[2] = 0; + + function isNotAroundZero(val) { + var EPSILON = 5e-5; + return val > EPSILON || val < -EPSILON; + } + } +} + +export {Transformable}; +Zondy.LevelRenderer.Transformable = Transformable; \ No newline at end of file diff --git a/src/mapboxgl/theme/common/overlay/levelRender/Util.js b/src/mapboxgl/theme/common/overlay/levelRender/Util.js new file mode 100644 index 000000000..901127fad --- /dev/null +++ b/src/mapboxgl/theme/common/overlay/levelRender/Util.js @@ -0,0 +1,283 @@ +import { Common } from '@mapgis/webclient-es6-service'; +const { Zondy } = Common; + +/** + * @private + * @class Zondy.LevelRenderer.Tool.Util + * LevelRenderer 基础工具类 + * + */ +class Util { + + /** + * @function Zondy.LevelRenderer.Tool.Util.constructor + * @description 构造函数。 + * + */ + constructor() { + /** + * @member {Object} Zondy.LevelRenderer.Tool.Util.prototype.BUILTIN_OBJECT + * @description 用于处理merge时无法遍历Date等对象的问题 + */ + this.BUILTIN_OBJECT = { + '[object Function]': 1, + '[object RegExp]': 1, + '[object Date]': 1, + '[object Error]': 1, + '[object CanvasGradient]': 1 + }; + + /** + * @member {Object} Zondy.LevelRenderer.Tool.Util.prototype._ctx + */ + this._ctx = null; + + /** + * Property: _canvas + * {Object} + */ + this._canvas = null; + + /** + * Property: _pixelCtx + * {Object} + */ + this._pixelCtx = null; + + /** + * Property: _width + * {Object} + */ + this._width = null; + + /** + * Property: _height + * {Object} + */ + this._height = null; + + /** + * Property: _offsetX + * {Object} + */ + this._offsetX = 0; + + /** + * Property: _offsetY + * {Object} + */ + this._offsetY = 0; + + this.CLASS_NAME = "Zondy.LevelRenderer.Tool.Util"; + } + + /** + * @function Zondy.LevelRenderer.Tool.Util.prototype.clone + * @description 对一个object进行深度拷贝。 + * + * @param {Object} source - 需要进行拷贝的对象。 + * @return {Object} 拷贝后的新对象。 + */ + clone(source) { + var BUILTIN_OBJECT = this.BUILTIN_OBJECT; + if (typeof source == 'object' && source !== null) { + var result = source; + if (source instanceof Array) { + result = []; + for (var i = 0, len = source.length; i < len; i++) { + result[i] = this.clone(source[i]); + } + } else if (!BUILTIN_OBJECT[Object.prototype.toString.call(source)]) { + result = {}; + for (var key in source) { + if (source.hasOwnProperty(key)) { + result[key] = this.clone(source[key]); + } + } + } + + return result; + } + + return source; + } + + /** + * @function Zondy.LevelRenderer.Tool.Util.prototype.mergeItem + * @description 合并源对象的单个属性到目标对象。 + * + * @param {Object} target - 目标对象。 + * @param {Object} source - 源对象。 + * @param {string} key - 键。 + * @param {boolean} overwrite - 是否覆盖。 + * @return {Object} 目标对象 + */ + mergeItem(target, source, key, overwrite) { + var BUILTIN_OBJECT = this.BUILTIN_OBJECT; + if (source.hasOwnProperty(key)) { + if (typeof target[key] == 'object' + && !BUILTIN_OBJECT[Object.prototype.toString.call(target[key])] + ) { + // 如果需要递归覆盖，就递归调用merge + this.merge( + target[key], + source[key], + overwrite + ); + } else if (overwrite || !(key in target)) { + // 否则只处理overwrite为true，或者在目标对象中没有此属性的情况 + target[key] = source[key]; + } + } + } + + /** + * @function Zondy.LevelRenderer.Tool.Util.prototype.merge + * @description 合并源对象的属性到目标对象。 + * + * @param {Object} target - 目标对象。 + * @param {Object} source - 源对象。 + * @param {boolean} overwrite - 是否覆盖。 + * @return {Object} 目标对象。 + */ + merge(target, source, overwrite) { + for (var i in source) { + this.mergeItem(target, source, i, overwrite); + } + + return target; + } + + /** + * @function Zondy.LevelRenderer.Tool.Util.prototype.getContext + * @description 获取 Canvas 上下文。 + * @return {Object} 上下文。 + */ + getContext() { + if (!this._ctx) { + this._ctx = document.createElement('canvas').getContext('2d'); + } + return this._ctx; + } + + /** + * @function Zondy.LevelRenderer.Tool.Util.prototype.getPixelContext + * @description 获取像素拾取专用的上下文。 + * @return {Object} 像素拾取专用的上下文。 + */ + getPixelContext() { + if (!this._pixelCtx) { + this._canvas = document.createElement('canvas'); + this._width = this._canvas.width; + this._height = this._canvas.height; + this._pixelCtx = this._canvas.getContext('2d'); + } + return this._pixelCtx; + } + + /** + * @function Zondy.LevelRenderer.Tool.Util.prototype.adjustCanvasSize + * @description 如果坐标处在_canvas外部，改变_canvas的大小，修改canvas的大小 需要重新设置translate + * + * @param {number} x - 横坐标。 + * @param {number} y - 纵坐标。 + * + */ + adjustCanvasSize(x, y) { + var _canvas = this._canvas; + var _pixelCtx = this._pixelCtx; + var _width = this._width; + var _height = this._height; + var _offsetX = this._offsetX; + var _offsetY = this._offsetY; + + // 每次加的长度 + var _v = 100; + var _flag; + + if (x + _offsetX > _width) { + _width = x + _offsetX + _v; + _canvas.width = _width; + _flag = true; + } + + if (y + _offsetY > _height) { + _height = y + _offsetY + _v; + _canvas.height = _height; + _flag = true; + } + + if (x < -_offsetX) { + _offsetX = Math.ceil(-x / _v) * _v; + _width += _offsetX; + _canvas.width = _width; + _flag = true; + } + + if (y < -_offsetY) { + _offsetY = Math.ceil(-y / _v) * _v; + _height += _offsetY; + _canvas.height = _height; + _flag = true; + } + + if (_flag) { + _pixelCtx.translate(_offsetX, _offsetY); + } + } + + /** + * @function Zondy.LevelRenderer.Tool.Util.prototype.getPixelOffset + * @description 获取像素canvas的偏移量。 + * @return {Object} 偏移量。 + */ + getPixelOffset() { + return { + x: this._offsetX, + y: this._offsetY + }; + } + + /** + * @function Zondy.LevelRenderer.Tool.Util.prototype.indexOf + * @description 查询数组中元素的index + * @return {Object} 偏移量。 + */ + indexOf(array, value) { + if (array.indexOf) { + return array.indexOf(value); + } + for (var i = 0, len = array.length; i < len; i++) { + if (array[i] === value) { + return i; + } + } + return -1; + } + + /** + * @function Zondy.LevelRenderer.Tool.Util.prototype.inherits + * @description 构造类继承关系 + * + * @param {Function} clazz - 源类。 + * @param {Function} baseClazz - 基类。 + * @return {Object} 偏移量。 + */ + inherits(clazz, baseClazz) { + var clazzPrototype = clazz.prototype; + + function F() { + } + + F.prototype = baseClazz.prototype; + clazz.prototype = new F(); + + for (var prop in clazzPrototype) { + clazz.prototype[prop] = clazzPrototype[prop]; + } + clazz.constructor = clazz; + } +} + +export {Util}; +Zondy.LevelRenderer.Tool.Util = Util; \ No newline at end of file diff --git a/src/mapboxgl/theme/common/overlay/levelRender/Vector.js b/src/mapboxgl/theme/common/overlay/levelRender/Vector.js new file mode 100644 index 000000000..2811c2db4 --- /dev/null +++ b/src/mapboxgl/theme/common/overlay/levelRender/Vector.js @@ -0,0 +1,364 @@ +import { Common } from '@mapgis/webclient-es6-service'; +const { Zondy } = Common; + +/** + * @private + * @class Zondy.LevelRenderer.Tool.Vector + * @classdesc LevelRenderer 二维向量类 + * + */ +class Vector { + + /** + * @function Zondy.LevelRenderer.Tool.Vector.constructor + * @description 构造函数 + */ + constructor() { + this.ArrayCtor = typeof Float32Array === 'undefined' + ? Array + : Float32Array; + + this.CLASS_NAME = "Zondy.LevelRenderer.Tool.Vector"; + } + + /** + * @function Zondy.LevelRenderer.Tool.Vector.prototype.create + * @description 创建一个向量。 + * + * @param {number} x - x坐标 + * @param {number} y - Y坐标 + * @return {Vector2} 向量。 + */ + create(x, y) { + var ArrayCtor = this.ArrayCtor; + + var out = new ArrayCtor(2); + out[0] = x || 0; + out[1] = y || 0; + + return out; + } + + /** + * @function Zondy.LevelRenderer.Tool.Vector.prototype.copy + * @description 复制一个向量。 + * + * @param {Vector2} out - 基础向量。 + * @param {Vector2} v - 向量。 + * @return {Vector2} 克隆向量。 + */ + copy(out, v) { + out[0] = v[0]; + out[1] = v[1]; + return out; + } + + /** + * @function Zondy.LevelRenderer.Tool.Vector.prototype.set + * @description 设置向量的两个项。 + * + * @param {Vector2} out - 基础向量。 + * @param {number} a - 项 a。 + * @param {number} b - 项 b。 + * @return {Vector2} 结果。 + */ + set(out, a, b) { + out[0] = a; + out[1] = b; + return out; + } + + /** + * @function Zondy.LevelRenderer.Tool.Vector.prototype.add + * @description 向量相加。 + * + * @param {Vector2} out - 基础向量。 + * @param {Vector2} v1 - 向量 v1。 + * @param {Vector2} v2 - 向量 v2。 + * @return {Vector2} 结果。 + */ + add(out, v1, v2) { + out[0] = v1[0] + v2[0]; + out[1] = v1[1] + v2[1]; + return out; + } + + /** + * @function Zondy.LevelRenderer.Tool.Vector.prototype.scaleAndAdd + * @description 向量缩放后相加。 + * @param {Vector2} out - 基础向量。 + * @param {Vector2} v1 - 向量 v1。 + * @param {Vector2} v2 - 向量 v2（缩放向量）。 + * @param {number} a - 缩放参数。 + * @return {Vector2} 结果。 + */ + scaleAndAdd(out, v1, v2, a) { + out[0] = v1[0] + v2[0] * a; + out[1] = v1[1] + v2[1] * a; + return out; + } + + /** + * @function Zondy.LevelRenderer.Tool.Vector.prototype.sub + * @description 向量相减。 + * @param {Vector2} out - 基础向量。 + * @param {Vector2} v1 - 向量 v1。 + * @param {Vector2} v2 - 向量 v2。 + * @return {Vector2} 结果。 + */ + sub(out, v1, v2) { + out[0] = v1[0] - v2[0]; + out[1] = v1[1] - v2[1]; + return out; + } + + /** + * @function Zondy.LevelRenderer.Tool.Vector.prototype.len + * @description 向量长度。 + * @param {Vector2} v - 向量。 + * @return {number} 向量长度。 + */ + len(v) { + return Math.sqrt(this.lenSquare(v)); + } + + /** + * @function Zondy.LevelRenderer.Tool.Vector.prototype.lenSquare + * @description 向量长度平方。 + * @param {Vector2} v - 向量。 + * @return {number} 向量长度平方。 + */ + lenSquare(v) { + return v[0] * v[0] + v[1] * v[1]; + } + + /** + * @function Zondy.LevelRenderer.Tool.Vector.prototype.mul + * @description 向量乘法。 + * @param {Vector2} out - 基础向量。 + * @param {Vector2} v1 - 向量 v1。 + * @param {Vector2} v2 - 向量 v2。 + * @return {Vector2} 结果。 + */ + mul(out, v1, v2) { + out[0] = v1[0] * v2[0]; + out[1] = v1[1] * v2[1]; + return out; + } + + /** + * @function Zondy.LevelRenderer.Tool.Vector.prototype.div + * @description 向量除法。 + * + * @param {Vector2} out - 基础向量。 + * @param {Vector2} v1 - 向量 v1。 + * @param {Vector2} v2 - 向量 v2。 + * @return {Vector2} 结果。 + */ + div(out, v1, v2) { + out[0] = v1[0] / v2[0]; + out[1] = v1[1] / v2[1]; + return out; + } + + /** + * @function Zondy.LevelRenderer.Tool.Vector.prototype.dot + * @description 向量点乘。 + * + * @param {Vector2} v1 - 向量 v1。 + * @param {Vector2} v2 - 向量 v2。 + * @return {number} 向量点乘。 + */ + dot(v1, v2) { + return v1[0] * v2[0] + v1[1] * v2[1]; + } + + /** + * @function Zondy.LevelRenderer.Tool.Vector.prototype.scale + * @description 向量缩放。 + * + * @param {Vector2} out - 基础向量。 + * @param {Vector2} v - 向量v。 + * @param {number} s -缩放参数。 + * @return {Vector2} 结果。 + */ + scale(out, v, s) { + out[0] = v[0] * s; + out[1] = v[1] * s; + return out; + } + + /** + * @function Zondy.LevelRenderer.Tool.Vector.prototype.normalize + * @description 向量归一化。 + * + * @param {Vector2} out - 基础向量。 + * @param {Vector2} v - 向量 v。 + * @return {Vector2} 结果。 + */ + normalize(out, v) { + var d = this.len(v); + if (d === 0) { + out[0] = 0; + out[1] = 0; + } else { + out[0] = v[0] / d; + out[1] = v[1] / d; + } + return out; + } + + /** + * @function Zondy.LevelRenderer.Tool.Vector.prototype.distance + * @description 计算向量间距离。 + * + * @param {Vector2} v1 - 向量 v1。 + * @param {Vector2} v2 - 向量 v2。 + * @return {number} 向量间距离。 + */ + distance(v1, v2) { + return Math.sqrt( + (v1[0] - v2[0]) * (v1[0] - v2[0]) + + (v1[1] - v2[1]) * (v1[1] - v2[1]) + ); + } + + /** + * @function Zondy.LevelRenderer.Tool.Vector.prototype.distanceSquare + * @description 向量距离平方。 + * + * @param {Vector2} v1 - 向量 v1。 + * @param {Vector2} v2 - 向量 v2。 + * @return {number} 向量距离平方。 + */ + distanceSquare(v1, v2) { + return (v1[0] - v2[0]) * (v1[0] - v2[0]) + + (v1[1] - v2[1]) * (v1[1] - v2[1]); + } + + /** + * @function Zondy.LevelRenderer.Tool.Vector.prototype.negate + * @description 求负向量。 + * + * @param {Vector2} out - 基础向量。 + * @param {Vector2} v - 向量 v。 + * @return {Vector2} 负向量。 + */ + negate(out, v) { + out[0] = -v[0]; + out[1] = -v[1]; + return out; + } + + /** + * @function Zondy.LevelRenderer.Tool.Vector.prototype.lerp + * @description 两点之间线性插值。 + * + * @param {Vector2} out - 基础向量。 + * @param {Vector2} v1 - 向量 v1。 + * @param {Vector2} v2 - 向量 v2。 + * @param {number} t + * @return {Vector2} 结果。 + */ + lerp(out, v1, v2, t) { + out[0] = v1[0] + t * (v2[0] - v1[0]); + out[1] = v1[1] + t * (v2[1] - v1[1]); + return out; + } + + /** + * @function Zondy.LevelRenderer.Tool.Vector.prototype.applyTransform + * @description 矩阵左乘向量。 + * + * @param {Vector2} out - 基础向量。 + * @param {Vector2} v1 - 向量 v1。 + * @param {Vector2} v2 - 向量 v2。 + * @return {Vector2} 结果。 + */ + applyTransform(out, v, m) { + var x = v[0]; + var y = v[1]; + out[0] = m[0] * x + m[2] * y + m[4]; + out[1] = m[1] * x + m[3] * y + m[5]; + return out; + } + + /** + * @function Zondy.LevelRenderer.Tool.Vector.prototype.min + * @description 求两个向量最小值。 + * @param {Vector2} out - 基础向量。 + * @param {Vector2} v1 - 向量 v1。 + * @param {Vector2} v2 - 向量 v2。 + * @return {Vector2} 结果。 + */ + min(out, v1, v2) { + out[0] = Math.min(v1[0], v2[0]); + out[1] = Math.min(v1[1], v2[1]); + return out; + } + + /** + * @function Zondy.LevelRenderer.Tool.Vector.prototype.max + * @description 求两个向量最大值。 + * + * @param {Vector2} out - 基础向量。 + * @param {Vector2} v1 - 向量 v1。 + * @param {Vector2} v2 - 向量 v2。 + * @return {Vector2} 结果。 + */ + max(out, v1, v2) { + out[0] = Math.max(v1[0], v2[0]); + out[1] = Math.max(v1[1], v2[1]); + return out; + } + + + /** + * @function Zondy.LevelRenderer.Tool.Vector.prototype.length + * @description 向量长度。 + * + * @param {Vector2} v - 向量。 + * @return {number} 向量长度。 + */ + length(v) { + return this.len(v); + } + + /** + * @function Zondy.LevelRenderer.Tool.Vector.prototype.lengthSquare + * @description 向量长度平方。 + * + * @param {Vector2} v - 向量。 + * @return {number} 向量长度平方。 + */ + lengthSquare(v) { + return this.lenSquare(v); + } + + /** + * @function Zondy.LevelRenderer.Tool.Vector.prototype.dist + * @description 计算向量间距离。 + * + * @param {Vector2} v1 - 向量 v1。 + * @param {Vector2} v2 - 向量 v2。 + * @return {number} 向量间距离。 + */ + dist(v1, v2) { + return this.distance(v1, v2); + } + + /** + * @function Zondy.LevelRenderer.Tool.Vector.prototype.distSquare + * @description 向量距离平方。 + * + * @param {Vector2} v1 - 向量 v1。 + * @param {Vector2} v2 - 向量 v2。 + * @return {number} 向量距离平方 + */ + distSquare(v1, v2) { + return this.distanceSquare(v1, v2); + } +} + +export {Vector}; +Zondy.LevelRenderer.Tool.Vector = Vector; \ No newline at end of file diff --git a/src/mapboxgl/theme/common/overlay/levelRender/index.js b/src/mapboxgl/theme/common/overlay/levelRender/index.js new file mode 100644 index 000000000..2f0d7ce77 --- /dev/null +++ b/src/mapboxgl/theme/common/overlay/levelRender/index.js @@ -0,0 +1,75 @@ +import {LevelRenderer} from './LevelRenderer'; +import {Render} from './Render'; +import {Animation, Animator} from './Animation'; +import {Area} from './Area'; +import {Clip} from './Clip'; +import {Color} from './Color'; +import {ComputeBoundingBox} from './ComputeBoundingBox'; +import {Config} from './Config'; +import {Curve as LevelRendererCurve} from './Curve'; +import {Easing} from './Easing'; +import {Env} from './Env'; +import {Event as LevelRendererEvent} from './Event'; +import {Eventful} from './Eventful'; +import {Group} from './Group'; +import {Handler} from './Handler'; +import {Http} from './Http'; +import {Math} from './Math'; +import {Matrix} from './Matrix'; +import {Painter, PaintLayer} from './Painter'; +import {Shape} from './Shape'; +import {SmicBrokenLine} from './SmicBrokenLine'; +import {SmicCircle} from './SmicCircle'; +import {SmicEllipse} from './SmicEllipse'; +import {SmicImage} from './SmicImage'; +import {SmicIsogon} from './SmicIsogon'; +import {SmicPoint} from './SmicPoint'; +import {SmicPolygon} from './SmicPolygon'; +import {SmicRectangle} from './SmicRectangle'; +import {SmicRing} from './SmicRing'; +import {SmicSector} from './SmicSector'; +import {SmicStar} from './SmicStar'; +import {SmicText} from './SmicText'; +import {Storage} from './Storage'; +import {Transformable} from './Transformable'; +import {Util} from './Util'; +import {Vector as LevelRendererVector} from './Vector'; +import {SUtil} from './SUtil'; + +export {LevelRenderer}; +export {Render}; +export {Animation, Animator}; +export {Area}; +export {Clip}; +export {Color}; +export {ComputeBoundingBox}; +export {Config}; +export {LevelRendererCurve}; +export {Easing}; +export {Env}; +export {LevelRendererEvent}; +export {Eventful}; +export {Group}; +export {Handler}; +export {Http}; +export {Math}; +export {Matrix}; +export {Painter, PaintLayer}; +export {Shape}; +export {SmicBrokenLine}; +export {SmicCircle}; +export {SmicEllipse}; +export {SmicImage}; +export {SmicIsogon}; +export {SmicPoint}; +export {SmicPolygon}; +export {SmicRectangle}; +export {SmicRing}; +export {SmicSector}; +export {SmicStar}; +export {SmicText}; +export {Storage}; +export {Transformable}; +export {Util}; +export {LevelRendererVector}; +export {SUtil}; \ No newline at end of file diff --git a/src/mapboxgl/util/Util.js b/src/mapboxgl/util/Util.js index a7590e712..635dc0b45 100644 --- a/src/mapboxgl/util/Util.js +++ b/src/mapboxgl/util/Util.js @@ -13,8 +13,8 @@ export var Util = (Zondy.Util = Zondy.Util || {}) * @param source - {Object} 源对象，其属性将被设置到目标对象上。 * @return {Object} 目标对象。 */ -export var extend = function(destination, source) { - destination = destination || {} +export var extend = function(dest, source) { + var destination = dest || {} if (source) { for (var property in source) { var value = source[property] @@ -49,6 +49,18 @@ export var extend = function(destination, source) { return destination } +export var newGuid = function () { + /// 生成一个guid + var guid = ""; + for (var i = 1; i <= 32; i++) { + var n = Math.floor(Math.random() * 16.0).toString(16); + guid += n; + if ((i == 8) || (i == 12) || (i == 16) || (i == 20)) + guid += "-"; + } + return guid; +}; + /** * @description 给url追加参数。 * @param url - {string} 待追加参数的url字符串。 @@ -77,7 +89,8 @@ export var appendUrl = function(url, paramStr) { * @param sources -{Array} 源对象数据，每个对象都会给目的对象设置对应的属性值 * @private */ -export var extendFromArray = function(dest, sources) { +export var extendFromArray = function(des, sources) { + var dest = des; for (const src of sources) { for (const k in src) { dest[k] = src[k] @@ -214,7 +227,8 @@ export function splitWords(str) { // @function setOptions(obj: Object, options: Object): Object // Merges the given properties to the `options` of the `obj` object, returning the resulting options. See `Class options`. Has an `L.setOptions` shortcut. -export function setOptions(obj, options) { +export function setOptions(o, options) { + var obj = o; if (!obj.hasOwnProperty('options')) { obj.options = obj.options ? create(obj.options) : {} } diff --git a/src/mapboxgl/webpack/mapbox-es6-debug-config.js b/src/mapboxgl/webpack/mapbox-es6-debug-config.js new file mode 100644 index 000000000..1fd848a3e --- /dev/null +++ b/src/mapboxgl/webpack/mapbox-es6-debug-config.js @@ -0,0 +1,48 @@ +var webpack = require('webpack'); +var path = require('path'); +var os = require('os'); + +module.exports = { + mode: 'development', + entry: path.join(__dirname, '..', 'index.js'), + output: { + path: path.join(__dirname, '..', 'dist-libs'), //打包后的文件存放的地方 + filename: 'webclient-es6-mapboxgl.js' //打包后输出文件的文件名 + }, + externals: { + '@mapgis/mapbox-gl': 'mapboxgl', + mapv: 'function(){try{return mapv}catch(e){return {}}}()', + echarts: 'function(){try{return echarts}catch(e){return {}}}()' + }, + module: { + rules: [ + { + test: /\.m?js$/, + exclude: /(node_modules|bower_components)/, + use: { + loader: 'babel-loader', + options: { + presets: ['@babel/preset-env'] + } + } + }, + { + test: /\.css$/, + use: [ + { loader: 'style-loader' }, + { + loader: 'css-loader', + options: { + modules: true + } + }, + { loader: 'sass-loader' } + ] + }, + { test: /\.ts$/, use: 'ts-loader' }, + ] + }, + plugins: [ + + ] +}; diff --git a/src/mapboxgl/webpack/mapbox-es6-release-config.js b/src/mapboxgl/webpack/mapbox-es6-release-config.js new file mode 100644 index 000000000..e97ed6db6 --- /dev/null +++ b/src/mapboxgl/webpack/mapbox-es6-release-config.js @@ -0,0 +1,47 @@ +var webpack = require('webpack'); +var path = require('path'); +var os = require('os'); + +module.exports = { + mode: 'production', + entry: path.join(__dirname, '..', 'index.js'), + output: { + path: path.join(__dirname, '..', 'dist-libs'), //打包后的文件存放的地方 + filename: 'webclient-es6-mapboxgl.min.js' //打包后输出文件的文件名 + }, + externals: { + '@mapgis/mapbox-gl': 'mapboxgl', + mapv: 'function(){try{return mapv}catch(e){return {}}}()', + echarts: 'function(){try{return echarts}catch(e){return {}}}()' + }, + module: { + rules: [ + { + test: /\.m?js$/, + exclude: /(node_modules|bower_components)/, + use: { + loader: 'babel-loader', + options: { + presets: ['@babel/preset-env'] + } + } + }, + { + test: /\.css$/, + use: [ + { loader: 'style-loader' }, + { + loader: 'css-loader', + options: { + modules: true + } + }, + { loader: 'sass-loader' } + ] + }, + { test: /\.ts$/, use: 'ts-loader' }, + ] + }, + plugins: [ + ] +}; diff --git a/src/mapboxgl/webpack/mapbox-plugin-debug-config.js b/src/mapboxgl/webpack/mapbox-plugin-debug-config.js deleted file mode 100644 index be9842d1f..000000000 --- a/src/mapboxgl/webpack/mapbox-plugin-debug-config.js +++ /dev/null @@ -1,61 +0,0 @@ -var webpack = require('webpack'); -var path = require('path'); -var HappyPack = require('happypack');//多线程loader 加快编译速度 -var os = require('os'); -var happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length }); -var HtmlWebpackPlugin = require('html-webpack-plugin'); -const BuildInfo = require('./version/version.js') - -module.exports = { - mode:'development', - devtool: 'eval-source-map', - entry: path.join(__dirname, '.', 'index.js'), - output: { - path: path.join(__dirname, '.', 'output'),//打包后的文件存放的地方 - filename: "webclient-mapboxgl-plugin.js"//打包后输出文件的文件名 - }, - externals: { - '@mapgis/mapbox-gl': 'mapboxgl', - 'mapv': "function(){try{return mapv}catch(e){return {}}}()", - 'echarts': 'function(){try{return echarts}catch(e){return {}}}()' - }, - module: { - // noParse: /[\/\\]mapbox-gl\.js$/, - // noParse: /3rdLib[^.*mapbox]\.js$/, - - //script-loader - rules: [ - { - test: /(\.js)$/, - use: 'happypack/loader?id=js', - exclude: [/node_modules/,/leaflet/,/openlayers/] - } - ] - }, - plugins: [ - new HappyPack({ - id: 'js', - // threads: 4, - threadPool: happyThreadPool, - loaders: [{ - loader: 'babel-loader', - options: { - presets: ['es2015'], - cacheDirectory: true, - plugins: ['transform-runtime', 'transform-decorators-legacy', 'transform-class-properties'] - } - }] - }), - new HtmlWebpackPlugin({ - filename: 'webclient-mapboxgl-plugin.html', - template: 'src/config/opensource/version/version.html', - inject: false,//不插入生成的js 仅用于版本声明 - minify: { - removeComments: false, - collapseWhitespace: true, - removeAttributeQuotes: true - }, - buildInfo: BuildInfo - }) - ] -} \ No newline at end of file diff --git a/src/mapboxgl/webpack/mapbox-plugin-release-config.js b/src/mapboxgl/webpack/mapbox-plugin-release-config.js deleted file mode 100644 index 76dae1e27..000000000 --- a/src/mapboxgl/webpack/mapbox-plugin-release-config.js +++ /dev/null @@ -1,82 +0,0 @@ -var webpack = require('webpack'); -var path = require('path'); -const uglify = require('uglifyjs-webpack-plugin'); -var HappyPack = require('happypack');//多线程loader 加快编译速度 -var os = require('os'); -var happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length }); -var HtmlWebpackPlugin = require('html-webpack-plugin'); -const BuildInfo = require('./version/version.js') - -module.exports = { - mode: 'production', - entry: path.join(__dirname, '.', 'index.js'),//已多次提及的唯一入口文件 - output: { - path: path.join(__dirname, '..', 'dist'),//打包后的文件存放的地方 - filename: "webclient-mapboxgl-plugin.min.js" //打包后输出文件的文件名 - }, - module: { - rules: [{ - test: /(\.js)$/, - use: 'happypack/loader?id=js', - exclude: [/node_modules/, /leaflet/, /openlayers/, /cesium/] - }] - // rules: [ - // { - // test: /(\.js)$/, - // use: { - // loader: "babel-loader", - // options: { - // presets: ['es2015'], - // plugins: ['transform-runtime'] - // } - // }, - // exclude: [/node_modules/,/mapgislayerForLeaf/,/clientThemeLeaf/] - // } - // ] - }, - externals: { - '@mapgis/mapbox-gl': 'mapboxgl', - 'mapv': "function(){try{return mapv}catch(e){return {}}}()", - 'echarts': 'function(){try{return echarts}catch(e){return {}}}()' - }, - // devtool: 'cheap-module-source-map', - plugins: [ - new HappyPack({ - id: 'js', - // threads: 4, - threadPool: happyThreadPool, - loaders: [{ - loader: 'babel-loader', - options: { - presets: ['env'], - cacheDirectory: true, - plugins: ['transform-runtime', 'transform-decorators-legacy', 'transform-class-properties'] - } - }] - }), - new webpack.DefinePlugin({ - 'process.env': { - NODE_ENV: JSON.stringify(process.env.NODE_ENV) - //NODE_ENV: JSON.stringify("production") - } - }), - new webpack.NoEmitOnErrorsPlugin(), - new webpack.optimize.OccurrenceOrderPlugin(), - new webpack.optimize.AggressiveMergingPlugin(), - new HtmlWebpackPlugin({ - filename: 'webclient-mapboxgl-plugin.min.html', - template: 'src/config/opensource/version/version.html', - inject: false,//不插入生成的js 仅用于版本声明 - minify: { - removeComments: false, - collapseWhitespace: true, - removeAttributeQuotes: true - }, - buildInfo: BuildInfo - }) - - ], - optimization: { - minimizer: [new uglify({ uglifyOptions: { compress: false } })] - } -} \ No newline at end of file diff --git a/src/mapboxgl/webpack/version/version.css b/src/mapboxgl/webpack/version/version.css new file mode 100644 index 000000000..a1368b2ba --- /dev/null +++ b/src/mapboxgl/webpack/version/version.css @@ -0,0 +1,14 @@ +.mapgis-header .mapgis-webclient-header .mapgis-webclient-text { + width : -webkit-fit-content; + width : -moz-fit-content; + width : fit-content; + height : 24px; + margin-left : 13px; + color : #fff; + line-height : 24px; + font-size : 22px; + font-weight : 700; + font-style : italic; + font-stretch : normal; + letter-spacing: 1.5px; +} \ No newline at end of file diff --git a/src/mapboxgl/webpack/version/version.html b/src/mapboxgl/webpack/version/version.html new file mode 100644 index 000000000..22e70bae7 --- /dev/null +++ b/src/mapboxgl/webpack/version/version.html @@ -0,0 +1,36 @@ + + + + + + + 版本声明 + + + + +

提交记录:<%= htmlWebpackPlugin.options.buildInfo.commit %>

+

提交用户:<%= htmlWebpackPlugin.options.buildInfo.commitUserName %>

+

提交日期: <%= htmlWebpackPlugin.options.buildInfo.commitDate %>

+

编译用户: <%= htmlWebpackPlugin.options.buildInfo.buildUserName %>

+

编译邮箱: <%= htmlWebpackPlugin.options.buildInfo.buildUserMail %>

+

编译日期: <%= htmlWebpackPlugin.options.buildInfo.buildDate %>

+ + + + \ No newline at end of file diff --git a/src/mapboxgl/webpack/version/version.js b/src/mapboxgl/webpack/version/version.js new file mode 100644 index 000000000..903820c36 --- /dev/null +++ b/src/mapboxgl/webpack/version/version.js @@ -0,0 +1,26 @@ +const child_process = require('child_process'); + +// git 最后一次提交的 Head +const commit = child_process.execSync('git show -s --format=%H').toString().trim(); +const commitUserName = child_process.execSync('git show -s --format=%cn').toString().trim(); +const commitUserMail = child_process.execSync('git show -s --format=%ce').toString().trim(); +const commitDateObj = new Date(child_process.execSync(`git show -s --format=%cd`).toString()); +const commitDate = `${ + commitDateObj.getFullYear() + + '-' + + (commitDateObj.getMonth() + 1) + + '-' + + commitDateObj.getDate() + + ' ' + + commitDateObj.getHours() + + ':' + + commitDateObj.getMinutes() +}`; +const buildUserName = child_process.execSync('git config user.name').toString().trim(); +const buildUserMail = child_process.execSync('git config user.email').toString().trim(); +const nowDate = new Date(); +const buildDate = `${ + nowDate.getFullYear() + '-' + (nowDate.getMonth() + 1) + '-' + nowDate.getDate() + ' ' + nowDate.getHours() + ':' + nowDate.getMinutes() +}`; + +module.exports = { commit, commitUserName, commitUserMail, commitDate, buildUserName, buildUserMail, buildDate }; diff --git a/src/openlayers/layer/tileMapLayer.js b/src/openlayers/layer/tileMapLayer.js index d2670e262..b5b28ca77 100644 --- a/src/openlayers/layer/tileMapLayer.js +++ b/src/openlayers/layer/tileMapLayer.js @@ -215,22 +215,22 @@ Zondy.Source.TileLayerSource = TileLayerSource; * @param {String} [opt_options.ip = ''] 服务器ip地址，本地为“127.0.0.1”或“localhost”。 * @param {String} [opt_options.port = ''] 服务器端口号，默认为6163 * @param {String} [opt_options.domain = ''] 服务器域名，注意：传入ip、port和传入domain两种方式二选一，代理服务器不提供端口号时可采用传入domain的方式。例如：domain:`http://www.sgic.net.cn/CoCloud3`。 - * @param {ol.ProjectionLike} [opt_options.projection = ''] 必选项，瓦片地图投影信息，通过如下方法获得 + * @param {ol.ProjectionLike} [opt_options.projection = ''] 可选项，瓦片地图投影信息，通过如下方法获得 * //projectionExtent为图层左下角到右上角坐标范围 * var projectionExtent = [114.12567815477894, 30.457571584721734, 114.47583026053915, 30.708389893334449]; * var projection = new ol.proj.Projection({ units: ol.proj.Units.DEGREES, extent: projectionExtent }); - * @param {Boolean} [opt_options.isAutoConfig = 'true'] 可选项，是否自动配置，默认为true + * @param {Boolean} [opt_options.isAutoConfig = 'true'] 可选项，是否自动配置瓦片服务参数，默认为true，注意：该参数为true时调用GetMapInfoService，获取瓦片的范围、分辨率等参数，为false时需要手动添加这些参数，且参数列表中必须指定projection，否则瓦片无法正常显示 * @param {Boolean} [opt_options.cache = 'false'] 可选项，瓦片地图是否为地图文档发布动态裁图方式，默认为false * @param {String} [opt_options.token = ''] 可选项，服务访问控制，如果在 MapGIS Server Manager 服务管理中开启token，须设置此项，其key值可在设置处获取。 * @param {Number} [opt_options.maxResolution = ''] 可选项，最大分辨率 - * @param {Number} [opt_options.minZoom = ''] 可选项，最小分辨率 - * @param {Number} [opt_options.maxZoom = ''] 可选项，最大分辨率 + * @param {Number} [opt_options.minZoom = ''] 可选项，最小缩放级别 + * @param {Number} [opt_options.maxZoom = ''] 可选项，最大缩放级别 * @param {String} [opt_options.tileOriginType = 'leftTop'] 可选项，瓦片裁剪方式，是左上还是左下的方式，即是新瓦片裁剪的方式还是旧瓦片。一般无需设置此参数，直接由原点和中心点进行判断，只有在某些特殊的裁剪的瓦片中需要用到。例如若裁剪瓦片时以左下角为原点，方式却是新瓦片的方式则需要设置此参数为leftTop。 * @param {Number} [opt_options.tileSize = '256'] 可选项，地图图片大小 - * @example + * @example1 function init() { //瓦片投影，包含单位，坐标范围 var projectionExtent = [114.12567815477894, 30.457571584721734, 114.47583026053915, 30.708389893334449]; @@ -272,6 +272,7 @@ Zondy.Source.TileLayerSource = TileLayerSource; */ + var TileLayer_mapgis = function (opt_name, opt_hdfName, opt_options) { var options = opt_options ? opt_options : {}; assign(options, { 'layerName': opt_name }); diff --git a/src/service/.eslintrc.js b/src/service/.eslintrc.js new file mode 100644 index 000000000..2c44087ca --- /dev/null +++ b/src/service/.eslintrc.js @@ -0,0 +1,14 @@ +module.exports = { + root: true, + env: { + node: true + }, + extends: ["plugin:vue/essential"], + rules: { + "no-console": process.env.NODE_ENV === "production" ? "error" : "off", + "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off" + }, + parserOptions: { + parser: "babel-eslint" + } +}; diff --git a/src/service/.yarnrc b/src/service/.yarnrc new file mode 100644 index 000000000..96fe37344 --- /dev/null +++ b/src/service/.yarnrc @@ -0,0 +1 @@ +registry "http://192.168.82.89:4873" \ No newline at end of file diff --git a/src/service/ArcGis/Circle.js b/src/service/ArcGis/Circle.js new file mode 100644 index 000000000..69c945c9e --- /dev/null +++ b/src/service/ArcGis/Circle.js @@ -0,0 +1,38 @@ +import { + Zondy, extend +} from "../common"; +import {ArcGisGeometry} from "./Geometry"; +import * as T from '@turf/turf' +import * as H from '@turf/helpers' + +/** + * @class module:ArcGis.ArcGisCircle + * @description ArcGis服务 + * @author 基础平台-杨琨 + * @param options - {Object} 必选项，构造圆对象参数。 + * @param {String} [options.center] 可选项。圆的中心点坐标，默认[0, 0]。 + * @param {String} [options.radius] 可选项。圆的半径，默认1000。 + * @param {String} [options.radiusUnit] 可选项。圆的半径单位，默认米，可选值["feet"|"kilometers"|"meters"|"miles"|"nautical-miles"|"yards"]。 + * @param {String} [options.numberOfPoints] 可选项。构成圆弧的插值数量，默认60。 + * @param {String} [options.geodesic] 可选项。启用自定义坐标系，默认false。 + * @param {ArcGisSpatialReference} [options.spatialReference] 可选项。多边形的空间坐标系，默认4326。 + */ +class ArcGisCircle extends ArcGisGeometry{ + constructor(options) { + super(options); + this.center = [0, 0]; + this.radius = 1000; + this.radiusUnit = "meters"; + this.numberOfPoints = 60; + this.geodesic = false; + this.type = "circle"; + + extend(this,options); + let opts = {steps: this.numberOfPoints, units: this.radiusUnit}; + let circle = T.circle(this.center, this.radius, opts); + this.rings = circle.geometry.coordinates; + } +} + +export {ArcGisCircle}; +Zondy.Service.ArcGisCircle = ArcGisCircle; \ No newline at end of file diff --git a/src/service/ArcGis/QueryTask.js b/src/service/ArcGis/QueryTask.js index 6a7db4785..acdc5df61 100644 --- a/src/service/ArcGis/QueryTask.js +++ b/src/service/ArcGis/QueryTask.js @@ -1,19 +1,25 @@ -import {Zondy} from '../common/Base'; +import {Zondy} from '../common'; import { - getPromise,getPromiseP,formatQuery,formatEdits,extend + formatQuery,extend } from '../common'; +import {ArcGisServiceBase} from "./ServiceBase"; class ArcGisQueryTask { constructor(options) { - this.options = { - url: null, - gdbVersion: null - } - extend(this.options,options); + this.url = null; + this.gdbVersion = null; + extend(this,options); } } -ArcGisQueryTask.prototype.execute = function (query, requestOptions) {} +ArcGisQueryTask.prototype.execute = function () {} +ArcGisQueryTask.prototype.queryByLayer = function (layerId, queryParams) { + queryParams.outFields = queryParams.outFields || "*"; + let url = this.url + "/" + layerId + "/query?f=json"; + let service = new ArcGisServiceBase(); + url = formatQuery(queryParams,url,["geometry"],null); + return service.getPromise(url); +} ArcGisQueryTask.prototype.executeAttachmentQuery = function () {} ArcGisQueryTask.prototype.executeForCount = function () {} ArcGisQueryTask.prototype.executeForExtent = function () {} diff --git a/src/service/ArcGis/index.js b/src/service/ArcGis/index.js index d7a633335..36f060686 100644 --- a/src/service/ArcGis/index.js +++ b/src/service/ArcGis/index.js @@ -16,6 +16,7 @@ import { ArcGisMultipoint } from './Multipoint'; import { ArcGisPolyline } from './Polyline'; import { ArcGisGraphic } from './Graphic'; import { ArcGisExtent } from './Extent'; +import {ArcGisCircle} from "./Circle"; export { ArcGisFeatureLayer, @@ -30,6 +31,7 @@ export { ArcGisMultipoint, ArcGisPolyline, ArcGisPolygon, + ArcGisCircle, ArcGisGraphic, ArcGisExtent }; @@ -47,6 +49,7 @@ const ArcGis = { ArcGisMultipoint, ArcGisPolyline, ArcGisPolygon, + ArcGisCircle, ArcGisGraphic, ArcGisExtent }; diff --git a/src/service/Igserver/G3D/G3DMapDoc.js b/src/service/Igserver/G3D/G3DMapDoc.js index 3fd8c1416..d976c9cec 100644 --- a/src/service/Igserver/G3D/G3DMapDoc.js +++ b/src/service/Igserver/G3D/G3DMapDoc.js @@ -1,7 +1,7 @@ -import {Zondy} from "../../common/Base"; -import {newGuid} from "../../common/Util"; -import {G3DService} from "./G3DService"; -import {IgsServiceBase} from "../../baseserver/IServiceBase"; +import { Zondy } from '../../common/Base'; +import { newGuid } from '../../common/Util'; +import { G3DService } from './G3DService'; +import { IgsServiceBase } from '../../baseserver/IServiceBase'; /** * @author 基础平台/产品2部 龚跃健 @@ -29,6 +29,7 @@ import {IgsServiceBase} from "../../baseserver/IServiceBase"; * @param {String} [option.format=json] 回结果的格式,缺省xml(json / xml) * @param {String} [option.systemLib=null] 系统库名称或者guid * @param {String} [option.layerRenderIndex=0] 图层layerRenderIndex + * @param {String} [option.extendedPropKeys=null] 扩展属性的key列表，多个用","分隔，"*"为获取所有,缺省为null */ class G3DMapDoc extends G3DService { constructor(option) { @@ -218,6 +219,15 @@ class G3DMapDoc extends G3DService { * @default null */ this.layerRenderIndex = options.layerRenderIndex || 0; + + /** + * @private + * @member Zondy.Catalog.G3DMapDoc.prototype.extendedPropKeys + * @type {String} + * @description 扩展属性的key列表，多个用","分隔，"*"为获取所有,缺省为"" + * @default null + */ + this.extendedKeys = option.extendedPropKeys || null; } /** @@ -239,7 +249,7 @@ class G3DMapDoc extends G3DService { */ GetDocList(onSuccess, onError) { var me = this; - me.partUrl = "GetDocList"; + me.partUrl = 'GetDocList'; var url = me.getFullUrl(); var service = new IgsServiceBase(url, { eventListeners: { @@ -256,6 +266,7 @@ class G3DMapDoc extends G3DService { * @function Zondy.Catalog.G3DMapDoc.prototype.GetDocInfo * @param option - {Object} 属性键值对，地图属性字段。
* @param {String} [option.docName = null] 【必选】三维服务名称 + * @param {String} [option.extendedPropKeys=""] 扩展属性的key列表，多个用","分隔，"*"为获取所有,缺省为"" * @param onSuccess - {Function} 成功回调函数。 * @param onError - {Function} 失败回调函数。 * @example @@ -273,7 +284,11 @@ class G3DMapDoc extends G3DService { */ GetDocInfo(onSuccess, onError) { var me = this; - me.partUrl = me.docName + "/GetDocInfo?&f=json"; + me.partUrl = me.docName + '/GetDocInfo?&f=json'; + + if (me.extendedKeys) { + me.partUrl += '&extendedKeys=' + me.extendedKeys; + } var url = me.getFullUrl(); var service = new IgsServiceBase(url, { eventListeners: { @@ -311,18 +326,18 @@ class G3DMapDoc extends G3DService { */ GetLayerInfo(onSuccess, onError) { var me = this; - var str = "layerinfo?gdbp=" + this.gdbp; + var str = 'layerinfo?gdbp=' + this.gdbp; if (me.proj) { - str += "&proj=" + me.proj; + str += '&proj=' + me.proj; } if (me.f) { - str += "&f=" + me.f; + str += '&f=' + me.f; } if (me.guid) { - str += "&guid=" + me.guid; + str += '&guid=' + me.guid; } if (me.encryptPassword) { - str += "&encryptPassword=" + me.encryptPassword; + str += '&encryptPassword=' + me.encryptPassword; } me.partUrl = str; var url = me.getFullUrl(); @@ -372,64 +387,63 @@ class G3DMapDoc extends G3DService { */ GetFeature(onSuccess, onError) { var me = this; - var str = "getFeature?"; + var str = 'getFeature?'; if (me.gdbp && me.gdbp !== '') { - str += "gdbp=" + me.gdbp; + str += 'gdbp=' + me.gdbp; } else if (me.docName) { - str += "docName=" + me.docName + "&layerindex=" + me.layerindex; + str += 'docName=' + me.docName + '&layerindex=' + me.layerindex; } - if (me.geometryType) { - str += "&geometryType=" + me.geometryType; + str += '&geometryType=' + me.geometryType; } if (me.geometry) { - str += "&geometry=" + me.geometry; + str += '&geometry=' + me.geometry; } if (me.where) { - str += "&where=" + me.where; + str += '&where=' + me.where; } if (me.structs) { - str += "&structs=" + JSON.stringify(me.structs); + str += '&structs=' + JSON.stringify(me.structs); } if (me.page) { - str += "&page=" + me.page; + str += '&page=' + me.page; } if (me.pageCount) { - str += "&pageCount=" + me.pageCount; + str += '&pageCount=' + me.pageCount; } if (me.objectIds) { - str += "&objectIds=" + me.objectIds; + str += '&objectIds=' + me.objectIds; } if (me.orderField) { - str += "&orderField=" + me.orderField; + str += '&orderField=' + me.orderField; } if (me.rtnLabel) { - str += "&rtnLabel=" + me.rtnLabel; + str += '&rtnLabel=' + me.rtnLabel; } if (me.isAsc) { - str += "&isAsc=" + me.isAsc; + str += '&isAsc=' + me.isAsc; } if (me.guid) { - str += "&guid=" + me.guid; + str += '&guid=' + me.guid; } if (me.format) { - str += "&format=" + me.format; + str += '&format=' + me.format; } if (me.f) { - str += "&f=" + me.f; + str += '&f=' + me.f; } me.partUrl = str; @@ -445,7 +459,6 @@ class G3DMapDoc extends G3DService { service.processAsync(); } - /** * @function Zondy.Catalog.G3DMapDoc.prototype.SetSystemLibraryByDoc * @description 设置三维文档下图层系统库接口 @@ -472,13 +485,13 @@ class G3DMapDoc extends G3DService { */ SetSystemLibraryByDoc(onSuccess, onError) { var me = this; - var str = me.docName + "/setSystemLibrary?systemLib=" + me.systemLib + "&layerRenderIndex=" + me.layerRenderIndex; + var str = me.docName + '/setSystemLibrary?systemLib=' + me.systemLib + '&layerRenderIndex=' + me.layerRenderIndex; if (me.f) { - str += "&f=" + me.f; + str += '&f=' + me.f; } if (me.guid) { - str += "&guid=" + me.guid; + str += '&guid=' + me.guid; } me.partUrl = str; var url = me.getFullUrl(); @@ -493,5 +506,5 @@ class G3DMapDoc extends G3DService { } } -export {G3DMapDoc}; -Zondy.Catalog.G3DMapDoc = G3DMapDoc; \ No newline at end of file +export { G3DMapDoc }; +Zondy.Catalog.G3DMapDoc = G3DMapDoc; diff --git a/src/service/Igserver/G3D/G3dEnum.js b/src/service/Igserver/G3D/G3dEnum.js new file mode 100644 index 000000000..5e259d8be --- /dev/null +++ b/src/service/Igserver/G3D/G3dEnum.js @@ -0,0 +1,181 @@ +/** + * @class G3DLayerType + * @author 基础平台-潘卓然 + * @description G3D-图层类型枚举 + * @example + * let g3dLayer = viewer.scene.layers.getLayer(g3dLayerIndex); + let indexes = g3dLayer.getTerrainLayerIndexes(); + indexes.forEach(i => { + let terrain = g3dLayer.getLayer(i); + let info = g3dLayer.getLayerInfo(i); + const { layerType } = info; // 此时的layerType是字符串类型，后续需要处理成数值型 + let type = parseInt(layerType); + }); + */ +export const G3DLayerType = { + g3dNone: 0, + /** + * @description 三维矢量数据图层 + */ + g3dVectorLayer: 1, + /** + * @description 三维模型图层 + */ + g3dModelLayer: 2, + /** + * @description 三维地形图层 + */ + g3dTerrainLayer: 3, + /** + * @description 三维注记图层 + */ + g3dLabelLayer: 4, + /** + * @description 三维云图层 + */ + g3dCloudLayer: 5, + /** + * @description 三维街景图层 + */ + g3dPanoramaLayer: 6, + /** + * @description 二维Map引用图层 + */ + type2DMapRefLayer: 7, + /** + * @description 三维服务图层 + */ + g3dServerLayer: 8, + /** + * @description 三维组图层 + */ + g3dGroupLayer: 9, + /** + * @description 三维缓存图层 + */ + g3dCacheLayer: 10, + /** + * @description 三维点云图层 + */ + g3dPointCloudLayer: 11, + /** + * @description 三维的网格模型图层 + */ + g3dGridModelLayer: 12 +}; + +/** + * @class M3DTileDataInfo + * @author 基础平台-潘卓然 + * @description M3D-图层类型枚举，该枚举是针对的G3DLayerType.g3dCacheLayer的二级分类 + * @link G3DLayerType.g3dCacheLayer + * @example + * let tilset = scene.primitives.add(new Cesium.MapGISM3DSet({ + url : 'http://localhost:6163/M3D/layer/文件格式.mcj' + })); + * let type = tileset._content._dataType; + // 如果是树形结构，并且只在后面的节点又对应的数据，则需要遍历节点才能获取对应的的类型 + export function loopM3ds(m3ds, callback) { + const vm = this; + let dataCallback = cbtype => { + if (loop) { + window.clearInterval(loop); + loop = undefined; + let types = []; + m3ds.forEach(m3d => { + let type = checkType(m3d); + m3d.type = type || cbtype; + types.push(m3d.type); + if (callback) { + callback(types); + } + }); + } + }; + let loop = window.setInterval(() => { + m3ds.forEach(m3d => { + checkType(m3d, dataCallback); + }); + }, 100); + } + + export function checkType(tileset, callback) { + const vm = this; + let m3dType = M3dType.UnKnow; + const { root } = tileset; + if (!root) return m3dType; + const version = root.tileset._version; + let { children } = root; + if (version == "0.0" || version == "1.0") { + // m3d 0.x 1.x版本逻辑判断 type =0是模型 =1是示例化数据 =2是点云 + if (!children || children.length <= 0) return m3dType; + children.forEach(child => { + let tempType = checkTypeNode(child, version, callback); + m3dType = tempType || m3dType; + }); + } else if (version == "2.0") { + if (!children || children.length <= 0) return m3dType; + children.forEach(child => { + let tempType = checkTypeNode(child, version, callback); + m3dType = tempType ? tempType : m3dType; + }); + } + + return m3dType; + } + export function checkTypeNode(tileset, version, callback) { + let m3dType; + const vm = this; + if (!tileset) return m3dType; + if (tileset._content) { + m3dType = tileset._content._dataType; + } + if (callback) { + callback(m3dType); + } + return m3dType; + } + */ +export const M3DTileDataInfo = { + UnKnow: 'UnKnow', + /** + * @description 矢量数据 + */ + Vector: 'Vector', + /** + * @description 倾斜摄影 + */ + TiltPhotography: 'TiltPhotography', + /** + * @description 模型 + */ + Model: 'Model', + /** + * @description 城市建筑模型 + */ + BIM: 'BIM', + /** + * @description 点云 + */ + PointCloud: 'PointCloud', + /** + * @description 管线 + */ + PipeLine: 'PipeLine', + /** + * @description 地质模型 + */ + GeoModel: 'GeoModel', + /** + * @description 地质网格 + */ + GeoGrid: 'GeoGrid', + /** + * @description 地质钻孔 + */ + GeoDrill: 'GeoDrill', + /** + * @description 地质切片 + */ + GeoSection: 'GeoSection' +}; diff --git a/src/service/Igserver/G3D/index.js b/src/service/Igserver/G3D/index.js index ba0d6c3d8..9fae67924 100644 --- a/src/service/Igserver/G3D/index.js +++ b/src/service/Igserver/G3D/index.js @@ -1,6 +1,7 @@ -import {G3DMapDoc} from './G3DMapDoc'; -import {G3DService} from './G3DService'; - -export {G3DMapDoc}; -export {G3DService}; +import { G3DLayerType, M3DTileDataInfo } from './G3dEnum'; +import { G3DMapDoc } from './G3DMapDoc'; +import { G3DService } from './G3DService'; +export { G3DLayerType, M3DTileDataInfo }; +export { G3DMapDoc }; +export { G3DService }; diff --git a/src/service/Igserver/MRCS/CatalogMapDoc.js b/src/service/Igserver/MRCS/CatalogMapDoc.js index 0c3728d96..22c1c1026 100644 --- a/src/service/Igserver/MRCS/CatalogMapDoc.js +++ b/src/service/Igserver/MRCS/CatalogMapDoc.js @@ -1,8 +1,8 @@ -import {Zondy} from "../../common/Base"; -import {toJSON} from "../../common/Util"; -import {newGuid} from "../../common/Util"; -import {CatalogService} from "./CatalogService"; -import {IgsServiceBase} from "../../baseserver/IServiceBase"; +import { Zondy } from '../../common/Base'; +import { toJSON } from '../../common/Util'; +import { newGuid } from '../../common/Util'; +import { CatalogService } from './CatalogService'; +import { IgsServiceBase } from '../../baseserver/IServiceBase'; /** * @author 基础平台/产品2部 龚跃健 @@ -66,7 +66,7 @@ class MapDoc extends CatalogService { * @description 指定地图文档相关信息的结构，默认includeDetails为true ,includeSubs为false * @default {includeDetails:true,includeSubs:false} */ - this.include = options.include !== undefined ? options.include : "{includeDetails:true,includeSubs:false}"; + this.include = options.include !== undefined ? options.include : '{includeDetails:true,includeSubs:false}'; /** * @private @@ -108,7 +108,7 @@ class MapDoc extends CatalogService { */ getMapDocList(onSuccess, onError) { var me = this; - me.partUrl = "docs?v=" + this.version + "&f=json"; + me.partUrl = 'docs?v=' + this.version + '&f=json'; var url = me.getFullUrl(); var service = new IgsServiceBase(url, { eventListeners: { @@ -142,17 +142,17 @@ class MapDoc extends CatalogService { */ getMapDocInfo(onSuccess, details, subs, onError, returnFullStyle) { var me = this; - if (typeof (returnFullStyle) === "boolean") { + if (typeof returnFullStyle === 'boolean') { me.returnFullStyle = returnFullStyle; } - if (typeof (details) === "boolean" || typeof (subs) === "boolean") { + if (typeof details === 'boolean' || typeof subs === 'boolean') { var includeObj = { - includeDetails: (typeof (details) === "boolean") ? details : true, - includeSubs: (typeof (subs) === "boolean") ? subs : false + includeDetails: typeof details === 'boolean' ? details : true, + includeSubs: typeof subs === 'boolean' ? subs : false }; me.include = toJSON(includeObj); } - me.partUrl = "docs/" + me.docName + "?include=" + me.include + "&returnFullStyle=" + me.returnFullStyle + "&guid=" + me.guid + "&f=json"; + me.partUrl = 'docs/' + me.docName + '?include=' + me.include + '&returnFullStyle=' + me.returnFullStyle + '&guid=' + me.guid + '&f=json'; var url = me.getFullUrl(); var service = new IgsServiceBase(url, { eventListeners: { @@ -178,16 +178,16 @@ class MapDoc extends CatalogService { }); mapdoc.getMapInfo(function(res){ console.log(res) - },false,false,function (error) { + },false,function (error) { console.log(error) }); */ getMapInfo(onSuccess, returnFullStyle, onError) { var me = this; - if (typeof (returnFullStyle) === "boolean") { + if (typeof returnFullStyle === 'boolean') { me.returnFullStyle = returnFullStyle; } - me.partUrl = "docs/" + me.docName + "/" + me.mapIndex + "?returnFullStyle=" + me.returnFullStyle + "&guid=" + me.guid + "&f=json"; + me.partUrl = 'docs/' + me.docName + '/' + me.mapIndex + '?returnFullStyle=' + me.returnFullStyle + '&guid=' + me.guid + '&f=json'; var url = me.getFullUrl(); var service = new IgsServiceBase(url, { eventListeners: { @@ -218,7 +218,7 @@ class MapDoc extends CatalogService { */ getMapDocTree(onSuccess, onError) { var me = this; - me.partUrl = "docs/" + me.docName + "?tree=true&guid=" + me.guid + "&f=json"; + me.partUrl = 'docs/' + me.docName + '?tree=true&guid=' + me.guid + '&f=json'; var url = me.getFullUrl(); var service = new IgsServiceBase(url, { eventListeners: { @@ -230,7 +230,6 @@ class MapDoc extends CatalogService { service.processAsync(); } - /** * 获取指定地图下指定图层的相关信息 * @function Zondy.Catalog.MapDoc.prototype.getLayerInfo @@ -251,7 +250,8 @@ class MapDoc extends CatalogService { */ getLayerInfo(onSuccess, onError) { var me = this; - me.partUrl = "docs/" + me.docName + "/" + me.mapIndex + "/" + me.layerID + "?returnFullStyle=" + me.returnFullStyle + "&guid=" + me.guid + "&f=json"; + me.partUrl = + 'docs/' + me.docName + '/' + me.mapIndex + '/' + me.layerID + '?returnFullStyle=' + me.returnFullStyle + '&guid=' + me.guid + '&f=json'; var url = me.getFullUrl(); var service = new IgsServiceBase(url, { eventListeners: { @@ -282,7 +282,7 @@ class MapDoc extends CatalogService { */ getLayersInfo(onSuccess, onError) { var me = this; - me.partUrl = "docs/" + me.docName + "/" + me.mapIndex + "/layers?f=json"; + me.partUrl = 'docs/' + me.docName + '/' + me.mapIndex + '/layers?f=json'; var url = me.getFullUrl(); var service = new IgsServiceBase(url, { eventListeners: { @@ -315,7 +315,7 @@ class MapDoc extends CatalogService { */ deleteLayer(onSuccess, onError) { var me = this; - me.partUrl = "docs/" + me.docName + "/" + me.mapIndex + "/layers/delete?layerIDs=" + me.layerID + "&guid=" + me.guid + "&f=json"; + me.partUrl = 'docs/' + me.docName + '/' + me.mapIndex + '/layers/delete?layerIDs=' + me.layerID + '&guid=' + me.guid + '&f=json'; var url = me.getFullUrl(); var service = new IgsServiceBase(url, { eventListeners: { @@ -356,7 +356,7 @@ class MapDoc extends CatalogService { */ addLayer(addLayerInfos, onSuccess, onError) { var me = this; - me.partUrl = "docs/" + me.docName + "/" + me.mapIndex + "/layers/add?guid=" + me.guid + "&f=json"; + me.partUrl = 'docs/' + me.docName + '/' + me.mapIndex + '/layers/add?guid=' + me.guid + '&f=json'; var url = me.getFullUrl(); var service = new IgsServiceBase(url, { eventListeners: { @@ -368,7 +368,7 @@ class MapDoc extends CatalogService { service.processAsync({ method: 'POST', data: JSON.stringify(addLayerInfos), - headers: {'Content-Type': 'text/plain;charset=UTF-8'} + headers: { 'Content-Type': 'text/plain;charset=UTF-8' } }); } @@ -393,7 +393,7 @@ class MapDoc extends CatalogService { */ changeIndex(newIndexArray, onSuccess, onError) { var me = this; - me.partUrl = "docs/" + me.docName + "/" + me.mapIndex + "/layers/index?guid=" + me.guid + "&f=json"; + me.partUrl = 'docs/' + me.docName + '/' + me.mapIndex + '/layers/index?guid=' + me.guid + '&f=json'; var url = me.getFullUrl(); var service = new IgsServiceBase(url, { eventListeners: { @@ -405,7 +405,7 @@ class MapDoc extends CatalogService { service.processAsync({ method: 'POST', data: JSON.stringify(newIndexArray), - header: {'Content-Type': 'text/plain;charset=UTF-8'} + header: { 'Content-Type': 'text/plain;charset=UTF-8' } }); } @@ -431,7 +431,7 @@ class MapDoc extends CatalogService { */ getLegendInfo(layerIDs, fields, onSuccess, onError) { var me = this; - me.partUrl = "legendInfo/" + me.docName + "?f=json&layerIndexes=" + layerIDs + "&fields=" + fields; + me.partUrl = 'legendInfo/' + me.docName + '?f=json&layerIndexes=' + layerIDs + '&fields=' + fields; var url = me.getFullUrl(); var service = new IgsServiceBase(url, { eventListeners: { @@ -443,5 +443,5 @@ class MapDoc extends CatalogService { service.processAsync(); } } -export {MapDoc}; -Zondy.Catalog.MapDoc = MapDoc; \ No newline at end of file +export { MapDoc }; +Zondy.Catalog.MapDoc = MapDoc; diff --git a/src/service/Igserver/MRCS/CatalogVectorLayer.js b/src/service/Igserver/MRCS/CatalogVectorLayer.js index 8a87c2465..17cf96bbe 100644 --- a/src/service/Igserver/MRCS/CatalogVectorLayer.js +++ b/src/service/Igserver/MRCS/CatalogVectorLayer.js @@ -620,7 +620,13 @@ class VectorLayer extends GDBInfo { */ getLayerInfo(gdbpUrl, onSuccess, onError, encryptPassword) { var me = this; - me.partUrl = 'layerinfo?gdbpUrl=' + gdbpUrl + '&f=json' + '&encryptPassword=' + encryptPassword + '&proj=' + this.proj; + me.partUrl = 'layerinfo?gdbpUrl=' + gdbpUrl + '&f=json'; + if (encryptPassword) { + me.partUrl += '&encryptPassword=' + encryptPassword; + } + if (this.proj) { + me.partUrl += '&proj=' + this.proj; + } var url = me.getFullUrl(); var service = new IgsServiceBase(url, { eventListeners: { diff --git a/src/service/Igserver/MRFS/Feature.js b/src/service/Igserver/MRFS/Feature.js index 573ef9492..14c5afcb8 100644 --- a/src/service/Igserver/MRFS/Feature.js +++ b/src/service/Igserver/MRFS/Feature.js @@ -1,224 +1,324 @@ -import {extend, Zondy} from "../../common"; -import {VPoint} from "./Point"; -import {VPolyline} from "./Polyline"; -import {VPolygon} from "./Polygon"; +import { extend, Zondy } from '../../common'; +import { VPoint } from './Point'; +import { VPolyline } from './Polyline'; +import { VPolygon } from './Polygon'; class VFeature { - static fromQueryResult(result) { - if ( - !result.hasOwnProperty("SFEleArray") || - !result.hasOwnProperty("AttStruct") || - (result.hasOwnProperty("SFEleArray") && !result.SFEleArray) || - (result.hasOwnProperty("AttStruct") && !result.AttStruct) - ) { - return []; - } - let SFEleArray = result.SFEleArray; - let AttStruct = result.AttStruct; - let features = [], - feature; - for (let i = 0; i < SFEleArray.length; i++) { - let attributes = {}, - geometry = [], - geometryType; - for (let j = 0; j < SFEleArray[i].AttValue.length; j++) { - if (SFEleArray[i].AttValue[j] !== "") { - attributes[AttStruct.FldName[j]] = SFEleArray[i].AttValue[j]; + static fromQueryResult(result) { + if ( + !result.hasOwnProperty('SFEleArray') || + !result.hasOwnProperty('AttStruct') || + (result.hasOwnProperty('SFEleArray') && !result.SFEleArray) || + (result.hasOwnProperty('AttStruct') && !result.AttStruct) + ) { + return []; } - } - if (SFEleArray[i].fGeom) { - switch (SFEleArray[i].ftype) { - case 1: - let PntGeom = SFEleArray[i].fGeom.PntGeom; - for (let k = 0; k < PntGeom.length; k++) { - let point = new VPoint({ - coordinates: [PntGeom[k].Dot.x, PntGeom[k].Dot.y] - }); - geometry.push(point); - geometryType = "Point"; + let SFEleArray = result.SFEleArray; + let AttStruct = result.AttStruct; + let features = [], + feature; + for (let i = 0; i < SFEleArray.length; i++) { + let attributes = {}, + geometry = [], + geometryType; + for (let j = 0; j < SFEleArray[i].AttValue.length; j++) { + if (SFEleArray[i].AttValue[j] !== '') { + attributes[AttStruct.FldName[j]] = SFEleArray[i].AttValue[j]; + } } - break; - case 2: - let LinGeom = SFEleArray[i].fGeom.LinGeom; - for (let k = 0; k < LinGeom.length; k++) { - let polyline = new VPolyline({ - coordinates: LinGeom[k].Line.Arcs[0].Dots - }); - geometry.push(polyline); - geometryType = "LineString"; + if (SFEleArray[i].fGeom) { + switch (SFEleArray[i].ftype) { + case 1: + let PntGeom = SFEleArray[i].fGeom.PntGeom; + for (let k = 0; k < PntGeom.length; k++) { + let point = new VPoint({ + coordinates: [PntGeom[k].Dot.x, PntGeom[k].Dot.y] + }); + geometry.push(point); + geometryType = 'Point'; + } + break; + case 2: + let LinGeom = SFEleArray[i].fGeom.LinGeom; + for (let k = 0; k < LinGeom.length; k++) { + let polyline = new VPolyline({ + coordinates: LinGeom[k].Line.Arcs[0].Dots + }); + geometry.push(polyline); + geometryType = 'LineString'; + } + break; + case 3: + let RegGeom = SFEleArray[i].fGeom.RegGeom; + for (let k = 0; k < RegGeom.length; k++) { + let polygon = new VPolygon(); + polygon.exterior = RegGeom[k].Rings[0].Arcs[0].Dots; + for (let m = 1; m < RegGeom[k].Rings.length; m++) { + polygon.interior.push(RegGeom[k].Rings[m].Arcs[0].Dots); + } + geometry.push(polygon); + geometryType = 'Polygon'; + } + break; + } } - break; - case 3: - let RegGeom = SFEleArray[i].fGeom.RegGeom; - for (let k = 0; k < RegGeom.length; k++) { - let polygon = new VPolygon(); - polygon.exterior = RegGeom[k].Rings[0].Arcs[0].Dots; - for (let m = 1; m < RegGeom[k].Rings.length; m++) { - polygon.interior.push(RegGeom[k].Rings[m].Arcs[0].Dots); - } - geometry.push(polygon); - geometryType = "Polygon"; + let style; + if (SFEleArray[i].GraphicInfo) { + let GraphicInfo = SFEleArray[i].GraphicInfo; + switch (GraphicInfo.InfoType) { + case 1: + style = GraphicInfo.PntInfo; + break; + case 2: + style = GraphicInfo.LinInfo; + break; + case 3: + style = GraphicInfo.RegInfo; + break; + } } - break; + + feature = new VFeature({ + attributes: attributes, + FID: SFEleArray[i].FID, + geometry: geometry, + geometryType: geometryType, + style: style + }); + features.push(feature); } - } - let style; - if (SFEleArray[i].GraphicInfo) { - let GraphicInfo = SFEleArray[i].GraphicInfo; - switch (GraphicInfo.InfoType) { - case 1: - style = GraphicInfo.PntInfo; - break; - case 2: - style = GraphicInfo.LinInfo; - break; - case 3: - style = GraphicInfo.RegInfo; - break; + return features; + } + static fromGeoJSON(geoJSON) { + let feature, + features = []; + if (!geoJSON.hasOwnProperty('type')) { + throw new Error('请输入正确的geoJSON'); } - } - - feature = new VFeature({ - attributes: attributes, - FID: SFEleArray[i].FID, - geometry: geometry, - geometryType: geometryType, - style: style - }); - features.push(feature); + if (geoJSON.type === 'Feature') { + feature = new VFeature({ + geometry: VFeature.geometry, + attributes: geoJSON.properties + }); + return feature; + } else if (geoJSON.type === 'FeatureCollection') { + let featureCollection = geoJSON.features, + geometry, + coordinates, + fCoordinates; + for (let i = 0; i < featureCollection.length; i++) { + geometry = []; + fCoordinates = featureCollection[i].geometry.coordinates; + switch (featureCollection[i].geometry.type) { + case 'Point': + geometry.push(featureCollection[i].geometry); + break; + case 'LineString': + coordinates = []; + for (let j = 0; j < fCoordinates.length; j++) { + coordinates.push({ + x: Number(fCoordinates[j][0]), + y: Number(fCoordinates[j][1]) + }); + } + featureCollection[i].geometry.coordinates = coordinates; + geometry.push(featureCollection[i].geometry); + break; + case 'Polygon': + let polygon = new VPolygon(); + for (let j = 0; j < fCoordinates[0].length; j++) { + polygon.exterior.push({ + x: Number(fCoordinates[0][j][0]), + y: Number(fCoordinates[0][j][1]) + }); + } + for (let j = 1; j < fCoordinates.length; j++) { + let ext = []; + for (let k = 0; k < fCoordinates[j].length; k++) { + ext.push({ + x: Number(fCoordinates[j][k][0]), + y: Number(fCoordinates[j][k][1]) + }); + } + polygon.exterior.push(ext); + } + geometry.push(polygon); + break; + } + feature = new VFeature({ + geometry: geometry, + attributes: featureCollection[i].properties, + geometryType: featureCollection[i].geometry.type + }); + features.push(feature); + } + return features; + } else { + throw new Error('不支持的geoJSON类型'); + } + } + static toAntTableData(result) { + let data = []; + let featureSet = VFeature.fromQueryResult(result); + for (let i = 0; i < featureSet.length; i++) { + data.push( + Object.assign(featureSet[i].attributes, { + key: featureSet[i].FID ? featureSet[i].FID : i + }) + ); + } + return data; } - return features; - }; - static fromGeoJSON(geoJSON) { - let feature, - features = []; - if (!geoJSON.hasOwnProperty("type")) { - throw new Error("请输入正确的geoJSON"); + static resultToGeojson(result) { + let geo = VFeature.fromQueryResult(result); + let featureSet = []; + geo = JSON.parse( + JSON.stringify(geo) + .replace(/attributes/g, 'properties') + .replace(/geometryType/g, 'type') + ); + let feature; + for (let i = 0; i < geo.length; i++) { + feature = VFeature.polygonToGeojson(geo[i]); + featureSet = featureSet.concat(feature); + } + let geojson = { + type: 'FeatureCollection', + features: featureSet + }; + return geojson; } - if (geoJSON.type === "Feature") { - feature = new VFeature({ - geometry: VFeature.geometry, - attributes: geoJSON.properties - }); - return feature; - } else if (geoJSON.type === "FeatureCollection") { - let featureCollection = geoJSON.features, - geometry, - coordinates, - fCoordinates; - for (let i = 0; i < featureCollection.length; i++) { - geometry = []; - fCoordinates = featureCollection[i].geometry.coordinates; - switch (featureCollection[i].geometry.type) { - case "Point": - geometry.push(featureCollection[i].geometry); - break; - case "LineString": - coordinates = []; - for (let j = 0; j < fCoordinates.length; j++) { - coordinates.push({ - x: Number(fCoordinates[j][0]), - y: Number(fCoordinates[j][1]) - }); - } - featureCollection[i].geometry.coordinates = coordinates; - geometry.push(featureCollection[i].geometry); - break; - case "Polygon": - let polygon = new VPolygon(); - for (let j = 0; j < fCoordinates[0].length; j++) { - polygon.exterior.push({ - x: Number(fCoordinates[0][j][0]), - y: Number(fCoordinates[0][j][1]) - }); - } - for (let j = 1; j < fCoordinates.length; j++) { - let ext = []; - for (let k = 0; k < fCoordinates[j].length; k++) { - ext.push({ - x: Number(fCoordinates[j][k][0]), - y: Number(fCoordinates[j][k][1]) - }); - } - polygon.exterior.push(ext); + + static polygonToGeojson(vfeature) { + let feature, + features = []; + let geomArr = vfeature.geometry; + let properties = vfeature.properties; + + for (let i = 0; i < geomArr.length; i++) { + feature = {}; + //处理数据coordinates + if (geomArr[i].type === 'Polygon') { + geomArr[i].coordinates = [geomArr[i].coordinates.concat(geomArr[i].exterior, geomArr[i].interior)]; } - geometry.push(polygon); - break; + feature.geometry = geomArr[i]; + feature.properties = properties; + feature.type = 'Feature'; + features.push(feature); } - feature = new VFeature({ - geometry: geometry, - attributes: featureCollection[i].properties, - geometryType: featureCollection[i].geometry.type - }); - features.push(feature); - } - return features; - } else { - throw new Error("不支持的geoJSON类型"); + return features; } - }; - static toAntTableData(result) { - let data = []; - let featureSet = VFeature.fromQueryResult(result); - for (let i = 0; i < featureSet.length; i++) { - data.push( - Object.assign(featureSet[i].attributes, { - key: featureSet[i].FID ? featureSet[i].FID : i - }) - ); + + /** + * @description 将传入得要素类转换成对应的GeoJSON格式对象 + * @param {VFeature} feature 要素类 + * @returns 对应的GeoJSON格式的要素 + */ + static featureToGeojson(feature) { + let json = { + type: 'FeatureCollection', + features: [] + }; + let features = []; + const { geometryType } = feature; + if (geometryType == 'Polygon') { + features = this.polyToGeojson(feature); + } else if (geometryType == 'LineString') { + features = this.lineToGeojson(feature); + } else if (geometryType == 'Point') { + features = this.pointToGeojson(feature); + } + json.features = features; + return json; } - return data; - }; - static resultToGeojson(result) { - let geo = VFeature.fromQueryResult(result); - let featureSet = []; - geo = JSON.parse( - JSON.stringify(geo) - .replace(/attributes/g, "properties") - .replace(/geometryType/g, "type") - ); - let feature; - for (let i = 0; i < geo.length; i++) { - feature = VFeature.polygonToGeojson(geo[i]); - featureSet = featureSet.concat(feature); + + /** + * @description 将区要素转换成GeoJSON格式的要素 + * @param {*} vfeature + * @returns GeoJSON格式的区要素 + */ + static polyToGeojson(vfeature) { + let feature, + features = []; + let geomArr = vfeature.geometry; + let properties = vfeature.properties; + + for (let i = 0; i < geomArr.length; i++) { + feature = {}; + if (geomArr[i].type === 'Polygon') { + let exterior = geomArr[i].exterior.map((i) => [i.x, i.y]); + let interior = geomArr[i].interior.map((i) => [i.x, i.y]); + geomArr[i].coordinates = [geomArr[i].coordinates.concat(exterior, interior)]; + } + feature.geometry = geomArr[i]; + feature.properties = properties; + feature.type = 'Feature'; + delete feature.geometry.exterior; + delete feature.geometry.interior; + features.push(feature); + } + return features; } - let geojson = { - type: "feature", - features: featureSet - }; - return geojson; - }; - static polygonToGeojson(VFeature) { - let feature, - features = []; - let geomArr = VFeature.geometry; - let properties = VFeature.properties; - for (let i = 0; i < geomArr.length; i++) { - feature = {}; - //处理数据coordinates - if (geomArr[i].type === "Polygon") { - geomArr[i].coordinates = geomArr[i].coordinates.concat( - geomArr[i].exterior, - geomArr[i].interior - ); - } - feature.geometry = geomArr[i]; - feature.properties = properties; - features.push(feature); + /** + * @description 将线要素转换成GeoJSON格式的要素 + * @param {*} vfeature + * @returns GeoJSON格式的线要素 + */ + static lineToGeojson(vfeature) { + let feature, + features = []; + let geomArr = vfeature.geometry; + let properties = vfeature.properties; + + for (let i = 0; i < geomArr.length; i++) { + feature = {}; + if (geomArr[i].type === 'LineString') { + let coords = geomArr[i].coordinates.map((i) => [i.x, i.y]); + geomArr[i].coordinates = coords; + } + feature.geometry = geomArr[i]; + feature.properties = properties; + feature.type = 'Feature'; + features.push(feature); + } + return features; + } + + /** + * @description 将点要素转换成GeoJSON格式的要素 + * @param {*} vfeature + * @returns GeoJSON格式的点要素 + */ + static pointToGeojson(vfeature) { + let feature, + features = []; + let geomArr = vfeature.geometry; + let properties = vfeature.properties; + + for (let i = 0; i < geomArr.length; i++) { + feature = {}; + //处理数据coordinates + if (geomArr[i].type === 'Point') { + geomArr[i].coordinates = geomArr[i].coordinates; + } + feature.geometry = geomArr[i]; + feature.properties = properties; + feature.type = 'Feature'; + features.push(feature); + } + return features; } - return features; - }; - constructor(options) { - this.geometry = undefined; - this.geometryType = undefined; - this.attributes = undefined; - this.style = undefined; - this.FID = undefined; + constructor(options) { + this.geometry = undefined; + this.geometryType = undefined; + this.attributes = undefined; + this.style = undefined; + this.FID = undefined; - extend(this, options); - } + extend(this, options); + } } export { VFeature }; diff --git a/src/service/Igserver/MRFS/FeatureService.js b/src/service/Igserver/MRFS/FeatureService.js index f38d83415..7b7e36b51 100644 --- a/src/service/Igserver/MRFS/FeatureService.js +++ b/src/service/Igserver/MRFS/FeatureService.js @@ -22,7 +22,7 @@ import { } from "../../common"; class FeatureService { - static get(url, fn, error) { + static get(url, fn, error, option) { // XMLHttpRequest对象用于在后台与服务器交换数据 let xhr = new XMLHttpRequest(); xhr.open("GET", url, true); @@ -30,13 +30,13 @@ class FeatureService { // readyState == 4说明请求已完成 if ((xhr.readyState == 4 && xhr.status == 200) || xhr.status == 304) { // 从服务器获得数据 - fn.call(this, xhr.responseText); + fn.call(this, xhr.responseText, option); } else if ( xhr.readyState === 4 && xhr.status !== 200 && xhr.status !== 304 ) { - error.call(this, xhr.responseText); + error.call(this, xhr.responseText, option); } }; xhr.send(); diff --git a/src/service/Igserver/MRFS/QueryDocFeature.js b/src/service/Igserver/MRFS/QueryDocFeature.js index 004525c51..18ae9dfdf 100644 --- a/src/service/Igserver/MRFS/QueryDocFeature.js +++ b/src/service/Igserver/MRFS/QueryDocFeature.js @@ -53,6 +53,8 @@ import {QueryServiceBase} from "./QueryServiceBase"; ip: "develop.smaryun.com", //端口号 port: "6163" + //请求方式 GET|POST + requestType:"GET" }); //执行查询操作，querySuccess为成功回调，queryError为失败回调 queryService.query(function (res) { diff --git a/src/service/Igserver/MRFS/QueryServiceBase.js b/src/service/Igserver/MRFS/QueryServiceBase.js index 0aeb47e85..87ab4fab3 100644 --- a/src/service/Igserver/MRFS/QueryServiceBase.js +++ b/src/service/Igserver/MRFS/QueryServiceBase.js @@ -74,7 +74,7 @@ class QueryServiceBase extends ServiceBase { * @param restUrl - {String} 查询路径。 * @param dataObject - {Object} 数据对象。
* @param onSuccess - {Function} 查询成功回调函数。
- * @param way - {String} 请求方式。
+ * @param way - {String} 请求方式 GET|POST
* @param onError - {Function} 查询失败回调函数。
* @param resultFormat - {String} 结果返回格式。 */ @@ -104,7 +104,7 @@ class QueryServiceBase extends ServiceBase { * @function Zondy.Service.QueryServiceBase.prototype.query * @param onSuccess - {Function} 查询成功回调函数。 * @param onError - {Function} 查询失败回调函数。 - * @param requestType - {Boolean} 响应类型。 + * @param requestType - {Boolean} 请求类型，根据Boolean判断走GET还是POST请求。 */ query(onSuccess, onError, requestType) { if (this.queryParam === null) { diff --git a/src/service/Igserver/MRGS/ProjectRang.js b/src/service/Igserver/MRGS/ProjectRang.js index e2c3d4b03..adc6f5a83 100644 --- a/src/service/Igserver/MRGS/ProjectRang.js +++ b/src/service/Igserver/MRGS/ProjectRang.js @@ -1,12 +1,6 @@ -import { - Zondy -} from '../../common/Base'; -import { - GeometryAnalysisBase -} from "./GeometryAnalysisBase"; -import { - IgsServiceBase -} from "../../baseserver/IServiceBase"; +import { Zondy } from '../../common/Base'; +import { GeometryAnalysisBase } from './GeometryAnalysisBase'; +import { IgsServiceBase } from '../../baseserver/IServiceBase'; /** * 对矩形范围坐标点进行投影转换 @@ -18,7 +12,9 @@ import { * @param {String} [option.gdbsvrName = "MapGISLocal"] 数据源名称 * @param {String} [option.gdbName = null] 数据库名称 * @param {Number} [option.srefID = 0] 源投影参考系ID + * @param {Number} [option.srefName = null] 源投影参考系名 * @param {Number} [option.desfID = 0] 目的投影参考系ID + * @param {Number} [option.desfName = null] 目的投影参考系名 * @param {String} [option.userName = null] 地理数据源/地理数据库账户名 * @param {String} [option.password = null] 地理数据源/地理数据库密码 * @example @@ -30,10 +26,10 @@ import { gdbsvrName: "MapGISLocal", //数据库名称 gdbName: "OpenLayerVecterMap", - //源投影参考系ID - srefID: 10, - //目的投影参考系ID - desfID: 601, + //源投影参考系名 + srefName: "地理坐标系(北京)_度", + //目的投影参考系名 + desfName: "地理坐标系(西安)_度", //服务器地址 ip: "develop.smaryun.com", //服务器端口 @@ -57,7 +53,7 @@ class ProjectRang extends GeometryAnalysisBase { * @description 数据源名称 * @default MapGISLocal */ - this.gdbsvrName = options.gdbsvrName !== undefined ? options.gdbsvrName : "MapGISLocal"; + this.gdbsvrName = options.gdbsvrName !== undefined ? options.gdbsvrName : 'MapGISLocal'; /** * @private @@ -77,6 +73,15 @@ class ProjectRang extends GeometryAnalysisBase { */ this.srefID = options.srefID !== undefined ? options.srefID : 0; + /** + * @private + * @member Zondy.Service.ProjectRang.prototype.srefName + * @type {Number} + * @description 源投影参考系名 + * @default null + */ + this.srefName = options.srefName !== undefined ? options.srefName : null; + /** * @private * @member Zondy.Service.ProjectRang.prototype.desfID @@ -86,6 +91,15 @@ class ProjectRang extends GeometryAnalysisBase { */ this.desfID = options.desfID !== undefined ? options.desfID : 0; + /** + * @private + * @member Zondy.Service.ProjectRang.prototype.desfName + * @type {Number} + * @description 目的投影参考系名 + * @default null + */ + this.desfName = options.desfName !== undefined ? options.desfName : null; + /** * @private * @member Zondy.Service.ProjectRang.prototype.userName @@ -113,14 +127,20 @@ class ProjectRang extends GeometryAnalysisBase { * @param {callback} onError 执行失败后的回调函数 */ execute(rectangle, onSuccess, onError) { - var rang = ""; + var rang = ''; if (rectangle) { - rang = rectangle.xmin + "$" + rectangle.ymin + "$" + rectangle.xmax + "$" + rectangle.ymax; + rang = rectangle.xmin + '$' + rectangle.ymin + '$' + rectangle.xmax + '$' + rectangle.ymax; + } + this.partUrl = `geomservice/${this.gdbsvrName}/${this.gdbName}`; + if (this.desfName && this.srefName) { + this.partUrl += `?f=json&rang=${rang}`; + this.partUrl += `&srefName=${this.srefName}&desfName=${this.desfName}`; + } else if (this.desfID && this.srefID) { + this.partUrl += `/${this.srefID}/${this.desfID}`; + this.partUrl += `?f=json&rang=${rang}`; } - if (this.userName === null || this.password === null) { - this.partUrl = "geomservice/" + this.gdbsvrName + "/" + this.gdbName + "/" + this.srefID + "/" + this.desfID + "?f=json&rang=" + rang; - } else { - this.partUrl = "geomservice/" + this.gdbsvrName + "/" + this.gdbName + "/" + this.srefID + "/" + this.desfID + "?f=json&rang=" + rang + "&userName=" + this.userName + "&password=" + this.password; + if (this.userName && this.password) { + this.partUrl += `&userName=${this.userName}&password=${this.password}`; } var url = this.getFullUrl(); var me = this; @@ -133,9 +153,6 @@ class ProjectRang extends GeometryAnalysisBase { }); service.processAsync(); } - } -export { - ProjectRang -}; -Zondy.Service.ProjectRang = ProjectRang; \ No newline at end of file +export { ProjectRang }; +Zondy.Service.ProjectRang = ProjectRang; diff --git a/src/service/Igserver/common/IgsServiceParse.js b/src/service/Igserver/common/IgsServiceParse.js new file mode 100644 index 000000000..0aecc4c50 --- /dev/null +++ b/src/service/Igserver/common/IgsServiceParse.js @@ -0,0 +1,124 @@ +import IgsServiceType from './IgsServiceType'; + +/** + * @private + * @description 内部引擎切换，不对外暴露 + */ +const MapRules = [ + { + type: 'mapboxgl', + rule: '{z}/{y}/{x}' + }, + { + type: 'cesium', + rule: '{z}/{y}/{x}' + } +]; + +/** + * @author 基础平台 潘卓然 + * @class module:IGServer基类.IgsServiceParse + * @classdesc MapGIS IGServer服务解析器 + * @description Zondy.Service.IgsServiceParse + * @example + * // es 6 + * import IgsServiceParse from '@mapgis/webclient-es6-service'; + * let parse = new IgsServiceParse(); + * let url = parse.GetMapboxUrl(10, 'localhost', '6163', '世界地图'); + * // 浏览器 + * let parse = new Zondy.Service.IgsServiceParse(); + * let url = parse.GetMapboxUrl(10, 'localhost', '6163', '世界地图'); + */ +export class IgsServiceParse { + /** + * @private + * @function module:IGServer基类.IgsServiceParse.prototype.get + * @param {String | Number} id 服务名称或者对应的Number型枚举值 + * @param {String} ip 服务的IP地址 + * @param {String} port 服务的端口地址 + * @param {String} serverName 服务的名称 + * @param {String } [baseUrl] urlType 服务的地址类型 + * @param {String } [GetMap] type 服务的类型 + * @example + * let parse = new IgsServiceParse(); + * let url = parse.get(10, 'localhost', '6163', '世界地图'); + */ + get(id, ip, port, serverName, urlType = 'baseUrl', type = 'GetMap', map = 'mapboxgl') { + let find = undefined; + if (typeof id === 'number') { + find = IgsServiceType.find((r) => { + return r.id === id; + }); + } else if (typeof id === 'string') { + find = IgsServiceType.find((r) => { + return r.id == id || r.title == id || r.type == id; + }); + } + if (!find) return undefined; + let url = find[urlType][type]; + url = url.replace('{ip}', ip); + url = url.replace('{port}', port); + while (url.indexOf('{serverName}') >= 0) { + url = url.replace('{serverName}', serverName); + } + let rule; + switch (map) { + case 'mapboxgl': + rule = MapRules.filter((item) => item.type === 'mapboxgl'); + url = url.replace('{level}/{row}/{col}', rule[0].rule); + url = url.replace('tilematrix={tilematrix}&tilerow={tilerow}&tilecol={tilecol}', 'tilematrix={z}&tilerow={y}&tilecol={x}'); + url = url.replace('w={w}&h={h}&f={f}', 'w=512&h=512&f=png'); + case 'cesium': + rule = MapRules.filter((item) => item.type === 'cesium'); + url = url.replace('{level}/{row}/{col}', rule[0].rule); + } + return url; + } + + /** + * @function module:IGServer基类.IgsServiceParse.prototype.GetCapabilities + * @param {String | Number} id 服务名称或者对应的Number型枚举值 + * @param {String} ip 服务的IP地址 + * @param {String} port 服务的端口地址 + * @param {String} serverName 服务的名称 + * @param {String } [baseUrl] urlType 服务的地址类型 + * @example + * let parse = new IgsServiceParse(); + * let url = parse.GetCapabilities(10, 'localhost', '6163', '世界地图'); + */ + GetCapabilities(id, ip, port, serverName, urlType = 'baseUrl') { + return this.get(id, ip, port, serverName, urlType, 'GetCapabilities'); + } + + /** + * @function module:IGServer基类.IgsServiceParse.prototype.GetMap + * @param {String | Number} id 服务名称或者对应的Number型枚举值 + * @param {String} ip 服务的IP地址 + * @param {String} port 服务的端口地址 + * @param {String} serverName 服务的名称 + * @param {String } [baseUrl] urlType 服务的地址类型 + * @example + * let parse = new IgsServiceParse(); + * let url = parse.GetMap(10, 'localhost', '6163', '世界地图'); + */ + GetMap(id, ip, port, serverName, urlType = 'baseUrl', map = 'mapboxgl') { + return this.get(id, ip, port, serverName, urlType, 'GetMap', map); + } + + /** + * @function module:IGServer基类.IgsServiceParse.prototype.GetFeatureInfo + * @param {String | Number} id 服务名称或者对应的Number型枚举值 + * @param {String} ip 服务的IP地址 + * @param {String} port 服务的端口地址 + * @param {String} serverName 服务的名称 + * @param {String } [baseUrl] urlType 服务的地址类型 + * @example + * let parse = new IgsServiceParse(); + * let url = parse.GetFeatureInfo(10, 'localhost', '6163', '世界地图'); + */ + GetFeatureInfo(id, ip, port, serverName, urlType = 'baseUrl') { + return this.get(id, ip, port, serverName, urlType, 'GetFeatureInfo'); + } +} + +export default IgsServiceParse; diff --git a/src/service/Igserver/common/IgsServiceType.js b/src/service/Igserver/common/IgsServiceType.js new file mode 100644 index 000000000..c98a616fd --- /dev/null +++ b/src/service/Igserver/common/IgsServiceType.js @@ -0,0 +1,239 @@ +export const IgsServiceEnum = { + IGSRestMap2D: 'IGSRestMap2D', + IGSRestMap3D: 'IGSRestMap3D', + IGSRestTile: 'IGSRestTile', + ArcGISRestMapServer: 'ArcGISRestMapServer', + ArcGISRestFeatureServer: 'ArcGISRestFeatureServer', + IGSRestMap3DCache: 'IGSRestMap3DCache', + IGSRestMap3DModel: 'IGSRestMap3DModel', + IGSRestMap3DTerrain: 'IGSRestMap3DTerrain', + WMS: 'WMS', + WFS: 'WFS', + WMTS: 'WMTS', + WCS: 'WCS', + ArcGISRestVectorTileServer: 'ArcGISRestVectorTileServer' +} + +/** + * @description 服务协议类别,保证稳定性，注意不要重构枚举名和枚举值 + */ +export const IgsServiceType = [ + { + type: 'IGSRestMap2D', + id: 1, + title: 'IGServer二维地图服务', + description: 'IGServer自定义二维文档REST，包括地图服务、要素服务、目录服务', + url: { + GetCapabilities: 'http://{ip}:{port}/igs/rest/mrcs/docs/{serverName}/0/layers?f=json', + GetMap: 'http://{ip}:{port}/igs/rest/mrms/docs/{serverName}?bbox={bbox}&w={w}&h={h}&f={f}', + GetFeatureInfo: '' + }, + baseUrl: { + GetCapabilities: 'http://{ip}:{port}/igs/rest/mrcs/docs/{serverName}/0/layers?f=json', + GetMap: 'http://{ip}:{port}/igs/rest/mrms/docs/{serverName}?bbox={bbox}', + GetFeatureInfo: '' + } + }, + { + type: 'IGSRestMap3D', + id: 2, + title: 'IGServer三维地图服务', + description: 'IGServer自定义三维文档REST', + url: { + GetCapabilities: 'http://{ip}:{port}/igs/rest/g3d/{serverName}/GetDocInfo', + GetMap: 'http://{ip}:{port}/igs/rest/mrms/tile/{serverName}/{level}/{row}/{col}', + GetFeatureInfo: '', + GetCovering: 'http://{ip}:{port}/igs/rest/g3d/{serverName}/GetCovering?sceneIndex={sceneIndex}&layerIndex={layerIndex}&level={level}&row={row}&col={col}&xDensity={xDensity}&yDensity={yDensity}', + GetLabels: 'http://{ip}:{port}/igs/rest/g3d/{serverName}/GetLabels?sceneIndex={sceneIndex}&layerIndex={layerIndex}&level={level}&row={row}&col={col}&xDensity={xDensity}&yDensity={yDensity}', + GetModels: 'http://{ip}:{port}/igs/rest/g3d/{serverName}/GetModels?sceneIndex={sceneIndex}&layerIndex={layerIndex}&level={level}&row={row}&col={col}&xDensity={xDensity}&yDensity={yDensity}', + GetTerrain: 'http://{ip}:{port}/igs/rest/g3d/{serverName}/GetTerrain?sceneIndex={sceneIndex}&layerIndex={layerIndex}&level={level}&row={row}&col={col}&xDensity={xDensity}&yDensity={yDensity}', + }, + baseUrl: { + GetCapabilities: '', + GetMap: '', + GetFeatureInfo: '', + GetCovering: 'http://{ip}:{port}/igs/rest/g3d/{serverName}/GetCovering?sceneIndex={sceneIndex}&layerIndex={layerIndex}&level={level}&row={row}&col={col}&xDensity={xDensity}&yDensity={yDensity}', + GetLabels: 'http://{ip}:{port}/igs/rest/g3d/{serverName}/GetLabels?sceneIndex={sceneIndex}&layerIndex={layerIndex}&level={level}&row={row}&col={col}&xDensity={xDensity}&yDensity={yDensity}', + GetModels: 'http://{ip}:{port}/igs/rest/g3d/{serverName}/GetModels?sceneIndex={sceneIndex}&layerIndex={layerIndex}&level={level}&row={row}&col={col}&xDensity={xDensity}&yDensity={yDensity}', + GetTerrain: 'http://{ip}:{port}/igs/rest/g3d/{serverName}/GetTerrain?sceneIndex={sceneIndex}&layerIndex={layerIndex}&level={level}&row={row}&col={col}&xDensity={xDensity}&yDensity={yDensity}', + } + }, + { + type: 'IGSRestTile', + id: 3, + title: 'IGServer瓦片服务', + description: 'IGServer自定义瓦片REST', + url: { + GetCapabilities: 'http://{ip}:{port}/igs/rest/mrcs/tiles/{serverName}?f=json&v=2.0', + GetMap: 'http://{ip}:{port}/igs/rest/mrms/tile/{serverName}/{level}/{row}/{col}', + GetFeatureInfo: '' + }, + baseUrl: { + GetCapabilities: 'http://{ip}:{port}/igs/rest/mrcs/tiles/{serverName}?f=json&v=2.0', + GetMap: 'http://{ip}:{port}/igs/rest/mrms/tile/{serverName}', + GetFeatureInfo: '' + } + }, + { + type: 'ArcGISRestMapServer', + id: 4, + title: 'ArcGIS Rest地图服务', + description: 'ArcGIS Rest地图服务协议', + url: { + GetCapabilities: '', + GetMap: '', + GetFeatureInfo: '' + }, + baseUrl: { + GetCapabilities: '', + GetMap: '', + GetFeatureInfo: '' + } + }, + { + type: 'ArcGISRestFeatureServer', + id: 5, + title: 'ArcGIS Rest要素服务', + description: 'ArcGIS Rest要素服务协议', + url: { + GetCapabilities: '', + GetMap: '', + GetFeatureInfo: '' + }, + baseUrl: { + GetCapabilities: '', + GetMap: '', + GetFeatureInfo: '' + } + }, + { + type: 'IGSRestMap3DCache', + id: 6, + title: 'IGServer三维缓存服务', + description: 'IGServer三维缓存服务', + url: { + GetCapabilities: '', + GetMap: '', + GetFeatureInfo: '' + }, + baseUrl: { + GetCapabilities: '', + GetMap: '', + GetFeatureInfo: '' + } + }, + { + type: 'IGSRestMap3DModel', + id: 7, + title: 'IGServer三维模型服务', + description: 'IGServer三维模型服务', + url: { + GetCapabilities: '', + GetMap: '', + GetFeatureInfo: '' + }, + baseUrl: { + GetCapabilities: '', + GetMap: '', + GetFeatureInfo: '' + } + }, + { + type: 'IGSRestMap3DTerrain', + id: 8, + title: 'IGServer三维地形服务', + description: 'IGServer三维地形服务', + url: { + GetCapabilities: '', + GetMap: '', + GetFeatureInfo: '' + }, + baseUrl: { + GetCapabilities: '', + GetMap: '', + GetFeatureInfo: '' + } + }, + { + type: 'WMS', + id: 17, + title: 'OGC-WMS', + description: 'OGC-WMS服务', + url: { + GetCapabilities: 'http://{ip}:{port}/igs/rest/ogc/doc/{serverName}/WMSServer', + GetMap: 'http://{ip}:{port}/igs/rest/ogc/doc/{serverName}/WMSServer', + GetFeatureInfo: '' + }, + baseUrl: { + GetCapabilities: 'http://{ip}:{port}/igs/rest/ogc/doc/{serverName}/WMSServer', + GetMap: 'http://{ip}:{port}/igs/rest/ogc/{serverName}/WMSServer', + GetFeatureInfo: '' + } + }, + { + type: 'WFS', + id: 18, + title: 'OGC WFS', + description: 'OGC WFS服务', + url: { + GetCapabilities: '', + GetMap: '', + GetFeatureInfo: '' + }, + baseUrl: { + GetCapabilities: '', + GetMap: '', + GetFeatureInfo: '' + } + }, + { + type: 'WMTS', + id: 19, + title: 'OGC WMTS', + description: 'OGC WMTS服务', + url: { + GetCapabilities: 'http://{ip}:{port}/igs/rest/ogc/{serverName}/WMTSServer/1.0.0/WMTSCapabilities.xml', + GetMap: 'http://{ip}:{port}/igs/rest/ogc/{serverName}/WMTSServer?service=WMTS&request=GetTile&version=1.0.0&style=default&format=image/png&layer={serverName}&tilematrix={tilematrix}&tilerow={tilerow}&tilecol={tilecol}', + GetFeatureInfo: '' + }, + baseUrl: { + GetCapabilities: 'http://{ip}:{port}/igs/rest/ogc/{serverName}/WMTSServer/1.0.0/WMTSCapabilities.xml', + GetMap: 'http://{ip}:{port}/igs/rest/ogc/{serverName}/WMTSServerr', + GetFeatureInfo: '' + } + }, + { + type: 'WCS', + id: 20, + title: 'OGC WCS', + description: 'OGC WCS服务', + url: { + GetCapabilities: '', + GetMap: '', + GetFeatureInfo: '' + }, + baseUrl: { + GetCapabilities: '', + GetMap: '', + GetFeatureInfo: '' + } + }, + { + type: 'ArcGISRestVectorTileServer', + id: 32, + title: 'ArcGIS Rest矢量瓦片服务', + description: 'ArcGIS Rest矢量瓦片服务', + url: { + GetCapabilities: '', + GetMap: '', + GetFeatureInfo: '' + }, + baseUrl: { + GetCapabilities: '', + GetMap: '', + GetFeatureInfo: '' + } + }, +]; + +export default IgsServiceType; \ No newline at end of file diff --git a/src/service/Igserver/common/inde.js b/src/service/Igserver/common/inde.js new file mode 100644 index 000000000..1ce5ded36 --- /dev/null +++ b/src/service/Igserver/common/inde.js @@ -0,0 +1,6 @@ +/** + * @module IGServer基类 + */ +import { IgsServiceEnum, IgsServiceType } from './IgsServiceType'; +import { IgsServiceParse } from './IgsServiceParse'; +export { IgsServiceEnum, IgsServiceType, IgsServiceParse }; diff --git a/src/service/Igserver/extend/RuleParas.js b/src/service/Igserver/extend/RuleParas.js deleted file mode 100644 index e482d1b22..000000000 --- a/src/service/Igserver/extend/RuleParas.js +++ /dev/null @@ -1,201 +0,0 @@ -export const MapRules = [ - { - type: 'mapboxgl', - rule: '{z}/{y}/{x}' - }, - { - type: 'cesium', - rule: '{z}/{y}/{x}' - } -]; - -export const IgserverRules = [ - { - type: 'DynamicTile', - id: 2, - title: '动态裁图', - description: '动态裁图为IGSMap2D的额外特性，为服务的功能', - url: { - GetCapabilities: '', - GetMap: 'http://{ip}:{port}/igs/rest/mrms/tile/{serverName}/{level}/{row}/{col}', - GetFeatureInfo: '' - }, - baseUrl: { - GetCapabilities: '', - GetMap: 'http://{ip}:{port}/igs/rest/mrms/tile/{serverName}', - GetFeatureInfo: '' - } - }, - { - type: 'IGSMap2D', - id: 3, - title: '二维文档服务', - description: 'IGServer自定义的二维文档REST服务', - url: { - GetCapabilities: '', - GetMap: 'http://{ip}:{port}/igs/rest/mrms/docs/{serverName}?bbox={bbox}&w={w}&h={h}&f={f}', - GetFeatureInfo: '' - }, - baseUrl: { - GetCapabilities: '', - GetMap: 'http://{ip}:{port}/igs/rest/mrms/docs/{serverName}?bbox={bbox}', - GetFeatureInfo: '' - } - }, - { - type: 'IGSTile', - id: 5, - title: '瓦片服务', - description: 'IGServer自定义的瓦片REST服务', - url: { - GetCapabilities: 'http://{ip}:{port}/igs/rest/mrcs/tiles/{serverName}?f=json&v=2.0', - GetMap: 'http://{ip}:{port}/igs/rest/mrms/tile/{serverName}/{level}/{row}/{col}', - GetFeatureInfo: '' - }, - baseUrl: { - GetCapabilities: 'http://{ip}:{port}/igs/rest/mrcs/tiles/{serverName}?f=json&v=2.0', - GetMap: 'http://{ip}:{port}/igs/rest/mrms/tile/{serverName}', - GetFeatureInfo: '' - } - }, - { - type: 'WMS', - id: 8, - title: 'WMS', - description: 'OGC-WMS服务', - url: { - GetCapabilities: 'http://{ip}:{port}/igs/rest/ogc/doc/{serverName}/WMSServer', - GetMap: 'http://{ip}:{port}/igs/rest/ogc/doc/{serverName}/WMSServer', - GetFeatureInfo: '' - }, - baseUrl: { - GetCapabilities: 'http://{ip}:{port}/igs/rest/ogc/doc/{serverName}/WMSServer', - GetMap: 'http://{ip}:{port}/igs/rest/ogc/{serverName}/WMSServer', - GetFeatureInfo: '' - } - }, - { - type: 'WMTS', - id: 10, - title: 'WMTS', - description: 'OGC-WMTS服务', - url: { - GetCapabilities: 'http://{ip}:{port}/igs/rest/ogc/{serverName}/WMTSServer/1.0.0/WMTSCapabilities.xml', - GetMap: 'http://{ip}:{port}/igs/rest/ogc/{serverName}/WMTSServer?service=WMTS&request=GetTile&version=1.0.0&style=default&format=image/png&layer={serverName}&tilematrix={tilematrix}&tilerow={tilerow}&tilecol={tilecol}', - GetFeatureInfo: '' - }, - baseUrl: { - GetCapabilities: 'http://{ip}:{port}/igs/rest/ogc/{serverName}/WMTSServer/1.0.0/WMTSCapabilities.xml', - GetMap: 'http://{ip}:{port}/igs/rest/ogc/{serverName}/WMTSServerr', - GetFeatureInfo: '' - } - } -]; - -/** - * @author 基础平台 潘卓然 - * @class module:拓展服务.RuleParse - * @classdesc MapGIS IGServer服务解析器 - * @description Zondy.Service.RuleParse - * @example - * // es 6 - * import RuleParse from '@mapgis/webclient-es6-service'; - * let parse = new RuleParse(); - * let url = parse.GetMapboxUrl(10, 'localhost', '6163', '世界地图'); - * // 浏览器 - * let parse = new Zondy.Service.RuleParse(); - * let url = parse.GetMapboxUrl(10, 'localhost', '6163', '世界地图'); - */ -export class RuleParse { - /** - * @private - * @function module:拓展服务.RuleParse.prototype.get - * @param {String | Number} id 服务名称或者对应的Number型枚举值 - * @param {String} ip 服务的IP地址 - * @param {String} port 服务的端口地址 - * @param {String} serverName 服务的名称 - * @param {String } [baseUrl] urlType 服务的地址类型 - * @param {String } [GetMap] type 服务的类型 - * @example - * let parse = new RuleParse(); - * let url = parse.get(10, 'localhost', '6163', '世界地图'); - */ - get(id, ip, port, serverName, urlType = 'baseUrl', type = 'GetMap', map = 'mapboxgl') { - let find = undefined; - if (typeof id === 'number') { - find = IgserverRules.find((r) => { - return r.id === id; - }); - } else if (typeof id === 'string') { - find = IgserverRules.find((r) => { - return r.title == id; - }); - } - if (!find) return undefined; - let url = find[urlType][type]; - url = url.replace('{ip}', ip); - url = url.replace('{port}', port); - while (url.indexOf('{serverName}') >= 0) { - url = url.replace('{serverName}', serverName); - } - let rule; - switch (map) { - case 'mapboxgl': - rule = MapRules.filter((item) => item.type === 'mapboxgl'); - url = url.replace('{level}/{row}/{col}', rule[0].rule); - url = url.replace('tilematrix={tilematrix}&tilerow={tilerow}&tilecol={tilecol}', 'tilematrix={z}&tilerow={y}&tilecol={x}'); - url = url.replace('w={w}&h={h}&f={f}', 'w=512&h=512&f=png'); - case 'cesium': - rule = MapRules.filter((item) => item.type === 'cesium'); - url = url.replace('{level}/{row}/{col}', rule[0].rule); - } - return url; - } - - /** - * @function module:拓展服务.RuleParse.prototype.GetCapabilities - * @param {String | Number} id 服务名称或者对应的Number型枚举值 - * @param {String} ip 服务的IP地址 - * @param {String} port 服务的端口地址 - * @param {String} serverName 服务的名称 - * @param {String } [baseUrl] urlType 服务的地址类型 - * @example - * let parse = new RuleParse(); - * let url = parse.GetCapabilities(10, 'localhost', '6163', '世界地图'); - */ - GetCapabilities(id, ip, port, serverName, urlType = 'baseUrl') { - return get(id, ip, port, serverName, urlType, 'GetCapabilities'); - } - - /** - * @function module:拓展服务.RuleParse.prototype.GetMap - * @param {String | Number} id 服务名称或者对应的Number型枚举值 - * @param {String} ip 服务的IP地址 - * @param {String} port 服务的端口地址 - * @param {String} serverName 服务的名称 - * @param {String } [baseUrl] urlType 服务的地址类型 - * @example - * let parse = new RuleParse(); - * let url = parse.GetMap(10, 'localhost', '6163', '世界地图'); - */ - GetMap(id, ip, port, serverName, urlType = 'baseUrl', map = 'mapboxgl') { - return this.get(id, ip, port, serverName, urlType, 'GetMap', map); - } - - /** - * @function module:拓展服务.RuleParse.prototype.GetFeatureInfo - * @param {String | Number} id 服务名称或者对应的Number型枚举值 - * @param {String} ip 服务的IP地址 - * @param {String} port 服务的端口地址 - * @param {String} serverName 服务的名称 - * @param {String } [baseUrl] urlType 服务的地址类型 - * @example - * let parse = new RuleParse(); - * let url = parse.GetFeatureInfo(10, 'localhost', '6163', '世界地图'); - */ - GetFeatureInfo(id, ip, port, serverName, urlType = 'baseUrl') { - return get(id, ip, port, serverName, urlType, 'GetFeatureInfo'); - } -} - -export default RuleParse; diff --git a/src/service/Igserver/extend/index.js b/src/service/Igserver/extend/index.js index b3f4787de..7fe84cd06 100644 --- a/src/service/Igserver/extend/index.js +++ b/src/service/Igserver/extend/index.js @@ -9,7 +9,6 @@ import { MeshingParam } from './MeshingParam'; import { NetAnalyse } from './NetAnalyse'; import { NetAnalysisExtent } from './NetAnalysisExtent'; import { SlopLineParam } from './SlopLineParam'; -import { RuleParse } from './RuleParas'; export { ContourNoteParam }; export { ContourParam }; @@ -19,4 +18,3 @@ export { MeshingParam }; export { NetAnalyse }; export { NetAnalysisExtent }; export { SlopLineParam }; -export { RuleParse }; diff --git a/src/service/Portal/PortalServiceParse.js b/src/service/Portal/PortalServiceParse.js new file mode 100644 index 000000000..c545954b7 --- /dev/null +++ b/src/service/Portal/PortalServiceParse.js @@ -0,0 +1,124 @@ +import PortalServiceType from './PortalServiceType'; + +/** + * @private + * @description 内部引擎切换，不对外暴露 + */ +const MapRules = [ + { + type: 'mapboxgl', + rule: '{z}/{y}/{x}' + }, + { + type: 'cesium', + rule: '{z}/{y}/{x}' + } +]; + +/** + * @author 基础平台 潘卓然 + * @class module:门户.PortalServiceParse + * @classdesc MapGIS IGServer服务解析器 + * @description Zondy.Service.PortalServiceParse + * @example + * // es 6 + * import PortalServiceParse from '@mapgis/webclient-es6-service'; + * let parse = new PortalServiceParse(); + * let url = parse.GetMapboxUrl(10, 'localhost', '6163', '世界地图'); + * // 浏览器 + * let parse = new Zondy.Service.PortalServiceParse(); + * let url = parse.GetMapboxUrl(10, 'localhost', '6163', '世界地图'); + */ +export class PortalServiceParse { + /** + * @private + * @function module:门户.PortalServiceParse.prototype.get + * @param {String | Number} id 服务名称或者对应的Number型枚举值 + * @param {String} ip 服务的IP地址 + * @param {String} port 服务的端口地址 + * @param {String} serverName 服务的名称 + * @param {String } [baseUrl] urlType 服务的地址类型 + * @param {String } [GetMap] type 服务的类型 + * @example + * let parse = new PortalServiceParse(); + * let url = parse.get(10, 'localhost', '6163', '世界地图'); + */ + get(id, ip, port, serverName, urlType = 'baseUrl', type = 'GetMap', map = 'mapboxgl') { + let find = undefined; + if (typeof id === 'number') { + find = PortalServiceType.find((r) => { + return r.id === id; + }); + } else if (typeof id === 'string') { + find = PortalServiceType.find((r) => { + return r.title == id; + }); + } + if (!find) return undefined; + let url = find[urlType][type]; + url = url.replace('{ip}', ip); + url = url.replace('{port}', port); + while (url.indexOf('{serverName}') >= 0) { + url = url.replace('{serverName}', serverName); + } + let rule; + switch (map) { + case 'mapboxgl': + rule = MapRules.filter((item) => item.type === 'mapboxgl'); + url = url.replace('{level}/{row}/{col}', rule[0].rule); + url = url.replace('tilematrix={tilematrix}&tilerow={tilerow}&tilecol={tilecol}', 'tilematrix={z}&tilerow={y}&tilecol={x}'); + url = url.replace('w={w}&h={h}&f={f}', 'w=512&h=512&f=png'); + case 'cesium': + rule = MapRules.filter((item) => item.type === 'cesium'); + url = url.replace('{level}/{row}/{col}', rule[0].rule); + } + return url; + } + + /** + * @function module:门户.PortalServiceParse.prototype.GetCapabilities + * @param {String | Number} id 服务名称或者对应的Number型枚举值 + * @param {String} ip 服务的IP地址 + * @param {String} port 服务的端口地址 + * @param {String} serverName 服务的名称 + * @param {String } [baseUrl] urlType 服务的地址类型 + * @example + * let parse = new PortalServiceParse(); + * let url = parse.GetCapabilities(10, 'localhost', '6163', '世界地图'); + */ + GetCapabilities(id, ip, port, serverName, urlType = 'baseUrl') { + return this.get(id, ip, port, serverName, urlType, 'GetCapabilities'); + } + + /** + * @function module:门户.PortalServiceParse.prototype.GetMap + * @param {String | Number} id 服务名称或者对应的Number型枚举值 + * @param {String} ip 服务的IP地址 + * @param {String} port 服务的端口地址 + * @param {String} serverName 服务的名称 + * @param {String } [baseUrl] urlType 服务的地址类型 + * @example + * let parse = new PortalServiceParse(); + * let url = parse.GetMap(10, 'localhost', '6163', '世界地图'); + */ + GetMap(id, ip, port, serverName, urlType = 'baseUrl', map = 'mapboxgl') { + return this.get(id, ip, port, serverName, urlType, 'GetMap', map); + } + + /** + * @function module:门户.PortalServiceParse.prototype.GetFeatureInfo + * @param {String | Number} id 服务名称或者对应的Number型枚举值 + * @param {String} ip 服务的IP地址 + * @param {String} port 服务的端口地址 + * @param {String} serverName 服务的名称 + * @param {String } [baseUrl] urlType 服务的地址类型 + * @example + * let parse = new PortalServiceParse(); + * let url = parse.GetFeatureInfo(10, 'localhost', '6163', '世界地图'); + */ + GetFeatureInfo(id, ip, port, serverName, urlType = 'baseUrl') { + return this.get(id, ip, port, serverName, urlType, 'GetFeatureInfo'); + } +} + +export default PortalServiceParse; diff --git a/src/service/Portal/PortalServiceType.js b/src/service/Portal/PortalServiceType.js new file mode 100644 index 000000000..01e0b1788 --- /dev/null +++ b/src/service/Portal/PortalServiceType.js @@ -0,0 +1,96 @@ +export const PortalServiceEnum = { + DynamicTile: 'DynamicTile', + IGSMap2D: 'IGSMap2D', + IGSTile: 'IGSTile', + WMS: 'WMS', + WMTS: 'WMTS' +}; + +/** + * @class module:门户.PortalServiceType + * @description 门户类型枚举类 + */ +export const PortalServiceType = [ + { + type: 'DynamicTile', + id: 2, + title: '动态裁图', + description: '动态裁图为IGSMap2D的额外特性，为服务的功能', + url: { + GetCapabilities: '', + GetMap: 'http://{ip}:{port}/igs/rest/mrms/tile/{serverName}/{level}/{row}/{col}', + GetFeatureInfo: '' + }, + baseUrl: { + GetCapabilities: '', + GetMap: 'http://{ip}:{port}/igs/rest/mrms/tile/{serverName}', + GetFeatureInfo: '' + } + }, + { + type: 'IGSMap2D', + id: 3, + title: '二维文档服务', + description: 'IGServer自定义的二维文档REST服务', + url: { + GetCapabilities: '', + GetMap: 'http://{ip}:{port}/igs/rest/mrms/docs/{serverName}?bbox={bbox}&w={w}&h={h}&f={f}', + GetFeatureInfo: '' + }, + baseUrl: { + GetCapabilities: '', + GetMap: 'http://{ip}:{port}/igs/rest/mrms/docs/{serverName}?bbox={bbox}', + GetFeatureInfo: '' + } + }, + { + type: 'IGSTile', + id: 5, + title: '瓦片服务', + description: 'IGServer自定义的瓦片REST服务', + url: { + GetCapabilities: 'http://{ip}:{port}/igs/rest/mrcs/tiles/{serverName}?f=json&v=2.0', + GetMap: 'http://{ip}:{port}/igs/rest/mrms/tile/{serverName}/{level}/{row}/{col}', + GetFeatureInfo: '' + }, + baseUrl: { + GetCapabilities: 'http://{ip}:{port}/igs/rest/mrcs/tiles/{serverName}?f=json&v=2.0', + GetMap: 'http://{ip}:{port}/igs/rest/mrms/tile/{serverName}', + GetFeatureInfo: '' + } + }, + { + type: 'WMS', + id: 8, + title: 'WMS', + description: 'OGC-WMS服务', + url: { + GetCapabilities: 'http://{ip}:{port}/igs/rest/ogc/doc/{serverName}/WMSServer', + GetMap: 'http://{ip}:{port}/igs/rest/ogc/doc/{serverName}/WMSServer', + GetFeatureInfo: '' + }, + baseUrl: { + GetCapabilities: 'http://{ip}:{port}/igs/rest/ogc/doc/{serverName}/WMSServer', + GetMap: 'http://{ip}:{port}/igs/rest/ogc/{serverName}/WMSServer', + GetFeatureInfo: '' + } + }, + { + type: 'WMTS', + id: 10, + title: 'WMTS', + description: 'OGC-WMTS服务', + url: { + GetCapabilities: 'http://{ip}:{port}/igs/rest/ogc/{serverName}/WMTSServer/1.0.0/WMTSCapabilities.xml', + GetMap: 'http://{ip}:{port}/igs/rest/ogc/{serverName}/WMTSServer?service=WMTS&request=GetTile&version=1.0.0&style=default&format=image/png&layer={serverName}&tilematrix={tilematrix}&tilerow={tilerow}&tilecol={tilecol}', + GetFeatureInfo: '' + }, + baseUrl: { + GetCapabilities: 'http://{ip}:{port}/igs/rest/ogc/{serverName}/WMTSServer/1.0.0/WMTSCapabilities.xml', + GetMap: 'http://{ip}:{port}/igs/rest/ogc/{serverName}/WMTSServerr', + GetFeatureInfo: '' + } + } +]; + +export default PortalServiceType; diff --git a/src/service/Portal/index.js b/src/service/Portal/index.js new file mode 100644 index 000000000..4bd10f188 --- /dev/null +++ b/src/service/Portal/index.js @@ -0,0 +1,7 @@ +/** + * @module 门户 + */ +import { PortalServiceEnum, PortalServiceType } from './PortalServiceType'; +import { PortalServiceParse } from './PortalServiceParse'; + +export { PortalServiceEnum, PortalServiceType, PortalServiceParse }; diff --git a/src/service/README.md b/src/service/README.md new file mode 100644 index 000000000..bd713da65 --- /dev/null +++ b/src/service/README.md @@ -0,0 +1,79 @@ +# MapGIS Client for JavaScript - Service + +[![npm version][npm-img]][npm-url] +[![apache licensed](https://img.shields.io/badge/license-Apache%202.0-orange.svg?style=flat-square)](https://github.com/MapGIS/WebClient-JavaScript/blob/master/LICENSE) + +[npm-img]: https://img.shields.io/badge/npm-10.5.5-brightgreen +[npm-url]: https://www.npmjs.com/package/@mapgis/webclient + +MapGIS Client for JavaScript - Service：是增强的MapGIS Web开发平台，集成Fetch、ES6、Promise等现代特性，在传统WebGIS开发基础之上，增强大数据、实时流数据的高效可视化表达和分析，为用户带来全新开发体验。 + +![框架](assets/logo/framework.png) + +[在线文档](http://develop.smaryun.com/docs/mapboxgl/index.html) + +## 环境 +> 由于core-js2和core-js3的在vue-cli4的不同的前置依赖导致了在vue2的环境下core-js不能把对应的依赖版本加入到package.json中，但是实际上package.json中引用的是core-js3的版本，一旦显示的描述会导致所有引用webclient-vue-ui的库的库都会强行自动升级core-js3，导致整个环境冲突问题。这个问题只能通过升级vue3来解决。 +## 目录 +针对MapGIS提供的IGServer/IGServer-X/IGServer-S/DataStore/ArcGIS等多种服务进行封装 +``` js +{ + Style, + Crs, + Common, + BaseServer, + // igserver + Extend, + G3D, + MRCS, + MRFS, + MRFWS, + MRGS, + MRMS, + Info, + OGC, + // datastore + ElasticSearch, + PostGIS, + CloudDisk, + // arcgis + ArcGis +}; +``` + +## 使用 +``` js +import { Style } from "@mapgis/webclient-es6-service"; +const { MarkerStyle, LineStyle, PointStyle, FillStyle } = Style; + +let layerStyle = new PointStyle({ + radius: 12, + color: "#ffffff", + opacity: 0.8, + outlineWidth: 5, + outlineColor: "#52B883", +}); +``` + +## 调试 +> 默认的引入方式是main +``` json +{ + "main": "dist-libs/webclient-es6-service.min.js", + "module1": "index.js", +} +``` +> 如果需要试试调试请修改成如下: +``` json +{ + "main1": "dist-libs/webclient-es6-service.min.js", + "module": "index.js", +} +``` +> 同时安装对应的所需依赖 +``` sh +# 使用yarn +yarn +# 或者使用npm +npm install +``` \ No newline at end of file diff --git a/src/service/assets/logo/framework.png b/src/service/assets/logo/framework.png new file mode 100644 index 000000000..4ed3b64a5 Binary files /dev/null and b/src/service/assets/logo/framework.png differ diff --git a/src/service/base/common/base.js b/src/service/base/common/base.js new file mode 100644 index 000000000..1b0d01855 --- /dev/null +++ b/src/service/base/common/base.js @@ -0,0 +1,11 @@ +// 新版本的设计框架 +var mapgis = (window.mapgis = window.mapgis || {}); + + +mapgis.style = mapgis.style || {}; +mapgis.symbols = mapgis.symbols || {}; +mapgis.renderer = mapgis.renderer || {}; + + + +export { mapgis }; diff --git a/src/service/base/crs/epsg/EPSG.js b/src/service/base/crs/epsg/EPSG.js new file mode 100644 index 000000000..1c4c01b14 --- /dev/null +++ b/src/service/base/crs/epsg/EPSG.js @@ -0,0 +1,183 @@ +export const EPSG = { + WGS84: [ + { id: 4326, name: "WGS1984_度", type: 0, strProject: "+proj=longlat +datum=WGS84 +no_defs" } + ], + Web墨卡托: [ + { id: 3857, name: "Web墨卡托_WGS1984", type: 1, strProject: "+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext +no_defs" } + ], + 经纬度西安80: [ + { id: 4610, name: "地理坐标系(西安)_度", type: 0, strProject: "+proj=longlat +a=6378140 +b=6356755.288157528 +units=degrees +no_defs" } + ], + 经纬度北京54: [ + { id: 4214, name: "地理坐标系(北京)_度", type: 0, strProject: "+proj=longlat +ellps=krass +towgs84=15.8,-154.4,-82.3,0,0,0,0 +no_defs" } + ], + 经纬度中国2000: [ + { id: 4490, name: "中国2000国家大地坐标系_度", type: 0, strProject: "+proj=longlat +ellps=GRS80 +units=degrees +no_defs" } + ], + 高斯西安80: [ + { id: 2348, name: "高斯大地坐标系_西安80_23带6_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=135 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2347, name: "高斯大地坐标系_西安80_22带6_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=129 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2346, name: "高斯大地坐标系_西安80_21带6_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=123 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2345, name: "高斯大地坐标系_西安80_20带6_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=117 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2344, name: "高斯大地坐标系_西安80_19带6_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=111 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2343, name: "高斯大地坐标系_西安80_18带6_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=105 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2342, name: "高斯大地坐标系_西安80_17带6_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=99 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2341, name: "高斯大地坐标系_西安80_16带6_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=93 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2340, name: "高斯大地坐标系_西安80_15带6_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=87 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2339, name: "高斯大地坐标系_西安80_14带6_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=75 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2338, name: "高斯大地坐标系_西安80_13带6_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=75 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2390, name: "高斯大地坐标系_西安80_45带3_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=135 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2389, name: "高斯大地坐标系_西安80_44带3_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=132 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2388, name: "高斯大地坐标系_西安80_43带3_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=129 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2387, name: "高斯大地坐标系_西安80_42带3_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=126 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2386, name: "高斯大地坐标系_西安80_41带3_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=123 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2385, name: "高斯大地坐标系_西安80_40带3_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=120 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2384, name: "高斯大地坐标系_西安80_39带3_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=117 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2383, name: "高斯大地坐标系_西安80_38带3_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=114 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2382, name: "高斯大地坐标系_西安80_37带3_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=111 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2381, name: "高斯大地坐标系_西安80_36带3_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=108 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2380, name: "高斯大地坐标系_西安80_35带3_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=105 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2379, name: "高斯大地坐标系_西安80_34带3_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=102 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2378, name: "高斯大地坐标系_西安80_33带3_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=99 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2377, name: "高斯大地坐标系_西安80_32带3_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=96 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2376, name: "高斯大地坐标系_西安80_31带3_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=93 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2375, name: "高斯大地坐标系_西安80_30带3_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=90 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2374, name: "高斯大地坐标系_西安80_29带3_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=87 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2373, name: "高斯大地坐标系_西安80_28带3_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=84 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2372, name: "高斯大地坐标系_西安80_27带3_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=81 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2371, name: "高斯大地坐标系_西安80_26带3_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=78 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2370, name: "高斯大地坐标系_西安80_25带3_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=75 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2327, name: "高斯大地坐标系_西安80_13带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=75 +k=1 +x_0=13500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2328, name: "高斯大地坐标系_西安80_14带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=81 +k=1 +x_0=14500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2329, name: "高斯大地坐标系_西安80_15带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=87 +k=1 +x_0=15500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2330, name: "高斯大地坐标系_西安80_16带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=93 +k=1 +x_0=16500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2331, name: "高斯大地坐标系_西安80_17带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=99 +k=1 +x_0=17500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2332, name: "高斯大地坐标系_西安80_18带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=105 +k=1 +x_0=18500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2333, name: "高斯大地坐标系_西安80_19带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=111 +k=1 +x_0=19500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2334, name: "高斯大地坐标系_西安80_20带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=117 +k=1 +x_0=20500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2335, name: "高斯大地坐标系_西安80_21带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=123 +k=1 +x_0=21500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2336, name: "高斯大地坐标系_西安80_22带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=129 +k=1 +x_0=22500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2337, name: "高斯大地坐标系_西安80_23带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=135 +k=1 +x_0=23500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2403, name: "高斯大地坐标系_西安80_27带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=81 +k=1 +x_0=27500000 +y_0=0 +ellps=krass +towgs84=15.8,-154.4,-82.3,0,0,0,0 +units=m +no_defs" }, + { id: 2404, name: "高斯大地坐标系_西安80_28带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=84 +k=1 +x_0=28500000 +y_0=0 +ellps=krass +towgs84=15.8,-154.4,-82.3,0,0,0,0 +units=m +no_defs" }, + { id: 2405, name: "高斯大地坐标系_西安80_29带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=87 +k=1 +x_0=29500000 +y_0=0 +ellps=krass +towgs84=15.8,-154.4,-82.3,0,0,0,0 +units=m +no_defs" }, + { id: 2406, name: "高斯大地坐标系_西安80_30带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=90 +k=1 +x_0=30500000 +y_0=0 +ellps=krass +towgs84=15.8,-154.4,-82.3,0,0,0,0 +units=m +no_defs" }, + { id: 2407, name: "高斯大地坐标系_西安80_31带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=93 +k=1 +x_0=31500000 +y_0=0 +ellps=krass +towgs84=15.8,-154.4,-82.3,0,0,0,0 +units=m +no_defs" }, + { id: 2408, name: "高斯大地坐标系_西安80_32带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=96 +k=1 +x_0=32500000 +y_0=0 +ellps=krass +towgs84=15.8,-154.4,-82.3,0,0,0,0 +units=m +no_defs" }, + { id: 2409, name: "高斯大地坐标系_西安80_33带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=99 +k=1 +x_0=33500000 +y_0=0 +ellps=krass +towgs84=15.8,-154.4,-82.3,0,0,0,0 +units=m +no_defs" }, + { id: 2410, name: "高斯大地坐标系_西安80_34带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=102 +k=1 +x_0=34500000 +y_0=0 +ellps=krass +towgs84=15.8,-154.4,-82.3,0,0,0,0 +units=m +no_defs" }, + { id: 2411, name: "高斯大地坐标系_西安80_35带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=105 +k=1 +x_0=35500000 +y_0=0 +ellps=krass +towgs84=15.8,-154.4,-82.3,0,0,0,0 +units=m +no_defs" }, + { id: 2412, name: "高斯大地坐标系_西安80_36带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=108 +k=1 +x_0=36500000 +y_0=0 +ellps=krass +towgs84=15.8,-154.4,-82.3,0,0,0,0 +units=m +no_defs" }, + { id: 2413, name: "高斯大地坐标系_西安80_37带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=111 +k=1 +x_0=37500000 +y_0=0 +ellps=krass +towgs84=15.8,-154.4,-82.3,0,0,0,0 +units=m +no_defs" }, + { id: 2414, name: "高斯大地坐标系_西安80_38带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=114 +k=1 +x_0=38500000 +y_0=0 +ellps=krass +towgs84=15.8,-154.4,-82.3,0,0,0,0 +units=m +no_defs" }, + { id: 2415, name: "高斯大地坐标系_西安80_39带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=117 +k=1 +x_0=39500000 +y_0=0 +ellps=krass +towgs84=15.8,-154.4,-82.3,0,0,0,0 +units=m +no_defs" }, + { id: 2416, name: "高斯大地坐标系_西安80_40带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=120 +k=1 +x_0=40500000 +y_0=0 +ellps=krass +towgs84=15.8,-154.4,-82.3,0,0,0,0 +units=m +no_defs" }, + { id: 2417, name: "高斯大地坐标系_西安80_41带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=123 +k=1 +x_0=41500000 +y_0=0 +ellps=krass +towgs84=15.8,-154.4,-82.3,0,0,0,0 +units=m +no_defs" }, + { id: 2418, name: "高斯大地坐标系_西安80_42带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=126 +k=1 +x_0=42500000 +y_0=0 +ellps=krass +towgs84=15.8,-154.4,-82.3,0,0,0,0 +units=m +no_defs" }, + { id: 2419, name: "高斯大地坐标系_西安80_43带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=129 +k=1 +x_0=43500000 +y_0=0 +ellps=krass +towgs84=15.8,-154.4,-82.3,0,0,0,0 +units=m +no_defs" }, + { id: 2420, name: "高斯大地坐标系_西安80_44带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=132 +k=1 +x_0=44500000 +y_0=0 +ellps=krass +towgs84=15.8,-154.4,-82.3,0,0,0,0 +units=m +no_defs" }, + { id: 2421, name: "高斯大地坐标系_西安80_45带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=135 +k=1 +x_0=45500000 +y_0=0 +ellps=krass +towgs84=15.8,-154.4,-82.3,0,0,0,0 +units=m +no_defs" }, + { id: 2349, name: "高斯大地坐标系_西安80_25带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=75 +k=1 +x_0=25500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2350, name: "高斯大地坐标系_西安80_26带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=78 +k=1 +x_0=26500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2351, name: "高斯大地坐标系_西安80_27带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=81 +k=1 +x_0=27500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2352, name: "高斯大地坐标系_西安80_28带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=84 +k=1 +x_0=28500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2353, name: "高斯大地坐标系_西安80_29带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=87 +k=1 +x_0=29500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2354, name: "高斯大地坐标系_西安80_30带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=90 +k=1 +x_0=30500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2355, name: "高斯大地坐标系_西安80_31带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=93 +k=1 +x_0=31500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2356, name: "高斯大地坐标系_西安80_32带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=96 +k=1 +x_0=32500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2357, name: "高斯大地坐标系_西安80_33带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=99 +k=1 +x_0=33500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2358, name: "高斯大地坐标系_西安80_34带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=102 +k=1 +x_0=34500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2359, name: "高斯大地坐标系_西安80_35带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=105 +k=1 +x_0=35500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2360, name: "高斯大地坐标系_西安80_36带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=108 +k=1 +x_0=36500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2361, name: "高斯大地坐标系_西安80_37带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=111 +k=1 +x_0=37500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2362, name: "高斯大地坐标系_西安80_38带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=114 +k=1 +x_0=38500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2363, name: "高斯大地坐标系_西安80_39带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=117 +k=1 +x_0=39500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2364, name: "高斯大地坐标系_西安80_40带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=120 +k=1 +x_0=40500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2365, name: "高斯大地坐标系_西安80_41带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=123 +k=1 +x_0=41500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2366, name: "高斯大地坐标系_西安80_42带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=126 +k=1 +x_0=42500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2367, name: "高斯大地坐标系_西安80_43带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=129 +k=1 +x_0=43500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2368, name: "高斯大地坐标系_西安80_44带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=132 +k=1 +x_0=44500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2369, name: "高斯大地坐标系_西安80_45带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=135 +k=1 +x_0=45500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" } + ], + 高斯北京54: [ + { id: 21413, name: "高斯大地坐标系_北京54_13带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=75 +k=1 +x_0=13500000 +y_0=0 +ellps=krass +towgs84=15.8,-154.4,-82.3,0,0,0,0 +units=m +no_defs" }, + { id: 21414, name: "高斯大地坐标系_北京54_14带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=81 +k=1 +x_0=14500000 +y_0=0 +ellps=krass +towgs84=15.8,-154.4,-82.3,0,0,0,0 +units=m +no_defs" }, + { id: 21415, name: "高斯大地坐标系_北京54_15带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=87 +k=1 +x_0=15500000 +y_0=0 +ellps=krass +towgs84=15.8,-154.4,-82.3,0,0,0,0 +units=m +no_defs" }, + { id: 21416, name: "高斯大地坐标系_北京54_16带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=93 +k=1 +x_0=16500000 +y_0=0 +ellps=krass +towgs84=15.8,-154.4,-82.3,0,0,0,0 +units=m +no_defs" }, + { id: 21417, name: "高斯大地坐标系_北京54_17带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=99 +k=1 +x_0=17500000 +y_0=0 +ellps=krass +towgs84=15.8,-154.4,-82.3,0,0,0,0 +units=m +no_defs" }, + { id: 21418, name: "高斯大地坐标系_北京54_18带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=105 +k=1 +x_0=18500000 +y_0=0 +ellps=krass +towgs84=15.8,-154.4,-82.3,0,0,0,0 +units=m +no_defs" }, + { id: 21419, name: "高斯大地坐标系_北京54_19带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=111 +k=1 +x_0=19500000 +y_0=0 +ellps=krass +towgs84=15.8,-154.4,-82.3,0,0,0,0 +units=m +no_defs" }, + { id: 21420, name: "高斯大地坐标系_北京54_20带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=117 +k=1 +x_0=20500000 +y_0=0 +ellps=krass +towgs84=15.8,-154.4,-82.3,0,0,0,0 +units=m +no_defs" }, + { id: 21421, name: "高斯大地坐标系_北京54_21带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=123 +k=1 +x_0=21500000 +y_0=0 +ellps=krass +towgs84=15.8,-154.4,-82.3,0,0,0,0 +units=m +no_defs" }, + { id: 21422, name: "高斯大地坐标系_北京54_22带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=129 +k=1 +x_0=22500000 +y_0=0 +ellps=krass +towgs84=15.8,-154.4,-82.3,0,0,0,0 +units=m +no_defs" }, + { id: 21423, name: "高斯大地坐标系_北京54_23带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=135 +k=1 +x_0=23500000 +y_0=0 +ellps=krass +towgs84=15.8,-154.4,-82.3,0,0,0,0 +units=m +no_defs" }, + { id: 2431, name: "高斯大地坐标系_北京54_34带3_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=102 +k=1 +x_0=500000 +y_0=0 +ellps=krass +towgs84=15.8,-154.4,-82.3,0,0,0,0 +units=m +no_defs" }, + { id: 2401, name: "高斯大地坐标系_北京54_25带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=75 +k=1 +x_0=25500000 +y_0=0 +ellps=krass +towgs84=15.8,-154.4,-82.3,0,0,0,0 +units=m +no_defs" }, + { id: 2402, name: "高斯大地坐标系_北京54_26带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=78 +k=1 +x_0=26500000 +y_0=0 +ellps=krass +towgs84=15.8,-154.4,-82.3,0,0,0,0 +units=m +no_defs" }, + { id: 32646, name: "Beijing 1954 / 3-degree Gauss-Kruger CM 102E", type: 1, strProject: "+proj=utm +zone=46 +datum=WGS84 +units=m +no_defs" } + ], + 高斯中国2000: [ + { id: 4502, name: "高斯大地坐标系_中国2000_13带6_北", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=75 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" }, + { id: 4503, name: "高斯大地坐标系_中国2000_14带6_北", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=81 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" }, + { id: 4504, name: "高斯大地坐标系_中国2000_15带6_北", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=87 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" }, + { id: 4505, name: "高斯大地坐标系_中国2000_16带6_北", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=93 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" }, + { id: 4506, name: "高斯大地坐标系_中国2000_17带6_北", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=99 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" }, + { id: 4507, name: "高斯大地坐标系_中国2000_18带6_北", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=105 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" }, + { id: 4508, name: "高斯大地坐标系_中国2000_19带6_北", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=111 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" }, + { id: 4509, name: "高斯大地坐标系_中国2000_20带6_北", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=117 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" }, + { id: 4510, name: "高斯大地坐标系_中国2000_21带6_北", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=123 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" }, + { id: 4511, name: "高斯大地坐标系_中国2000_22带6_北", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=129 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" }, + { id: 4512, name: "高斯大地坐标系_中国2000_23带6_北", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=135 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" }, + { id: 4513, name: "高斯大地坐标系_中国2000_25带6_北", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=75 +k=1 +x_0=25500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" }, + { id: 4514, name: "高斯大地坐标系_中国2000_26带6_北", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=78 +k=1 +x_0=26500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" }, + { id: 4515, name: "高斯大地坐标系_中国2000_27带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=81 +k=1 +x_0=27500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" }, + { id: 4516, name: "高斯大地坐标系_中国2000_28带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=84 +k=1 +x_0=28500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" }, + { id: 4517, name: "高斯大地坐标系_中国2000_29带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=87 +k=1 +x_0=29500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" }, + { id: 4518, name: "高斯大地坐标系_中国2000_30带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=90 +k=1 +x_0=30500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" }, + { id: 4519, name: "高斯大地坐标系_中国2000_31带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=93 +k=1 +x_0=31500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" }, + { id: 4520, name: "高斯大地坐标系_中国2000_32带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=96 +k=1 +x_0=32500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" }, + { id: 4521, name: "高斯大地坐标系_中国2000_33带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=99 +k=1 +x_0=33500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" }, + { id: 4522, name: "高斯大地坐标系_中国2000_34带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=102 +k=1 +x_0=34500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" }, + { id: 4523, name: "高斯大地坐标系_中国2000_35带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=105 +k=1 +x_0=35500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" }, + { id: 4524, name: "高斯大地坐标系_中国2000_36带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=108 +k=1 +x_0=36500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" }, + { id: 4525, name: "高斯大地坐标系_中国2000_37带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=111 +k=1 +x_0=37500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" }, + { id: 4526, name: "高斯大地坐标系_中国2000_38带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=114 +k=1 +x_0=38500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" }, + { id: 4527, name: "高斯大地坐标系_中国2000_39带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=117 +k=1 +x_0=39500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" }, + { id: 4528, name: "高斯大地坐标系_中国2000_40带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=120 +k=1 +x_0=40500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" }, + { id: 4529, name: "高斯大地坐标系_中国2000_41带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=123 +k=1 +x_0=41500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" }, + { id: 4530, name: "高斯大地坐标系_中国2000_42带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=126 +k=1 +x_0=42500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" }, + { id: 4531, name: "高斯大地坐标系_中国2000_43带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=129 +k=1 +x_0=43500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" }, + { id: 4532, name: "高斯大地坐标系_中国2000_44带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=132 +k=1 +x_0=44500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" }, + { id: 4533, name: "高斯大地坐标系_中国2000_45带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=135 +k=1 +x_0=45500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" }, + { id: 4546, name: "高斯大地坐标系_中国2000_37带3_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=111 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" }, + { id: 4547, name: "高斯大地坐标系_中国2000_38带3_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=114 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" }, + { id: 4545, name: "高斯大地坐标系_中国2000_36带3_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=108 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" } + ] +}; + + +export function epsgId(epsg) { + if (typeof epsg === 'string') { + const str = epsg.toUpperCase() + let result; + + if (str.indexOf('EPSG:') >= 0) { + result = str.split('EPSG:') + } else if (str.indexOf('EPSG_') >= 0) { + result = str.split('EPSG_') + } else if (str.indexOf('EPSG') >= 0) { + result = str.split('EPSG') + } else { + return parseInt(epsg, 10) + } + if (result.length >= 2) { + return parseInt(result[1], 10) + } else { + return 4326 + } + } else { + return epsg; + } +} + +export default EPSG; diff --git a/src/service/base/crs/epsg/index.js b/src/service/base/crs/epsg/index.js new file mode 100644 index 000000000..9f87220d9 --- /dev/null +++ b/src/service/base/crs/epsg/index.js @@ -0,0 +1,2 @@ +import { EPSG, epsgId } from './EPSG'; +export { EPSG, epsgId }; diff --git a/src/service/base/crs/index.js b/src/service/base/crs/index.js new file mode 100644 index 000000000..be3955e23 --- /dev/null +++ b/src/service/base/crs/index.js @@ -0,0 +1,4 @@ +import { EPSG } from './epsg'; +import { ProjectTool } from './proj'; + +export { EPSG, ProjectTool }; diff --git a/src/service/base/crs/proj/index.js b/src/service/base/crs/proj/index.js new file mode 100644 index 000000000..01ee3b3e1 --- /dev/null +++ b/src/service/base/crs/proj/index.js @@ -0,0 +1,2 @@ +import { ProjectTool } from './project'; +export { ProjectTool }; diff --git a/src/service/base/crs/proj/project.js b/src/service/base/crs/proj/project.js new file mode 100644 index 000000000..4efe88a5a --- /dev/null +++ b/src/service/base/crs/proj/project.js @@ -0,0 +1,63 @@ +import { EPSG, epsgId } from '../epsg/EPSG'; + +// import * as proj4 from "proj4"; +// import proj4 from "proj4"; + +import * as proj4x from 'proj4'; +const proj4 = proj4x.default; + +export class ProjectTool { + static getProj4sCascader() { + const options = Object.keys(EPSG).map((key) => { + const menu = { + value: key, + label: key, + children: [] + }; + menu.children = EPSG[key].map((epsg) => { + return { value: epsg.id, label: epsg.name }; + }); + return menu; + }); + return options; + } + + static getProj4sDetail(id) { + let detail = ''; + const keys = Object.keys(EPSG); + for (const key of keys) { + const epsgs = EPSG[key]; + for (const item of epsgs) { + if (item.id === id) { + detail = item.strProject; + break; + } + } + if (detail !== '') { + break; + } + } + return detail; + } + + static proj4TransformByEpsg(sourceid, destinationid, point) { + let sId = epsgId(sourceid); + let desId = epsgId(destinationid); + + let source = ProjectTool.getProj4sDetail(sId); + let destination = ProjectTool.getProj4sDetail(desId); + + let proj = proj4(source, destination); + let projpoint = proj.forward(point); + + return projpoint; + } + + static proj4Transform(source, destination, point) { + let proj = proj4(source, destination); + let projpoint = proj.forward(point); + return projpoint; + } +} + +export default ProjectTool; diff --git a/src/service/base/crs/proj/test/test_proj.js b/src/service/base/crs/proj/test/test_proj.js new file mode 100644 index 000000000..d76f18353 --- /dev/null +++ b/src/service/base/crs/proj/test/test_proj.js @@ -0,0 +1,232 @@ +// import * as proj4x from 'proj4'; +// const proj4 = proj4x.default; +let proj4 = require('proj4'); + +export const EPSG = { + WGS84: [ + { id: 4326, name: "WGS1984_度", type: 0, strProject: "+proj=longlat +datum=WGS84 +no_defs" } + ], + Web墨卡托: [ + { id: 3857, name: "Web墨卡托_WGS1984", type: 1, strProject: "+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext +no_defs" } + ], + 经纬度西安80: [ + { id: 4610, name: "地理坐标系(西安)_度", type: 0, strProject: "+proj=longlat +a=6378140 +b=6356755.288157528 +units=degrees +no_defs" } + ], + 经纬度北京54: [ + { id: 4214, name: "地理坐标系(北京)_度", type: 0, strProject: "+proj=longlat +ellps=krass +towgs84=15.8,-154.4,-82.3,0,0,0,0 +no_defs" } + ], + 经纬度中国2000: [ + { id: 4490, name: "中国2000国家大地坐标系_度", type: 0, strProject: "+proj=longlat +ellps=GRS80 +units=degrees +no_defs" } + ], + 高斯西安80: [ + { id: 2348, name: "高斯大地坐标系_西安80_23带6_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=135 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2347, name: "高斯大地坐标系_西安80_22带6_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=129 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2346, name: "高斯大地坐标系_西安80_21带6_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=123 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2345, name: "高斯大地坐标系_西安80_20带6_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=117 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2344, name: "高斯大地坐标系_西安80_19带6_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=111 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2343, name: "高斯大地坐标系_西安80_18带6_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=105 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2342, name: "高斯大地坐标系_西安80_17带6_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=99 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2341, name: "高斯大地坐标系_西安80_16带6_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=93 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2340, name: "高斯大地坐标系_西安80_15带6_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=87 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2339, name: "高斯大地坐标系_西安80_14带6_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=75 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2338, name: "高斯大地坐标系_西安80_13带6_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=75 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2390, name: "高斯大地坐标系_西安80_45带3_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=135 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2389, name: "高斯大地坐标系_西安80_44带3_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=132 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2388, name: "高斯大地坐标系_西安80_43带3_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=129 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2387, name: "高斯大地坐标系_西安80_42带3_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=126 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2386, name: "高斯大地坐标系_西安80_41带3_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=123 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2385, name: "高斯大地坐标系_西安80_40带3_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=120 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2384, name: "高斯大地坐标系_西安80_39带3_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=117 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2383, name: "高斯大地坐标系_西安80_38带3_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=114 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2382, name: "高斯大地坐标系_西安80_37带3_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=111 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2381, name: "高斯大地坐标系_西安80_36带3_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=108 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2380, name: "高斯大地坐标系_西安80_35带3_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=105 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2379, name: "高斯大地坐标系_西安80_34带3_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=102 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2378, name: "高斯大地坐标系_西安80_33带3_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=99 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2377, name: "高斯大地坐标系_西安80_32带3_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=96 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2376, name: "高斯大地坐标系_西安80_31带3_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=93 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2375, name: "高斯大地坐标系_西安80_30带3_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=90 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2374, name: "高斯大地坐标系_西安80_29带3_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=87 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2373, name: "高斯大地坐标系_西安80_28带3_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=84 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2372, name: "高斯大地坐标系_西安80_27带3_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=81 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2371, name: "高斯大地坐标系_西安80_26带3_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=78 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2370, name: "高斯大地坐标系_西安80_25带3_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=75 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2327, name: "高斯大地坐标系_西安80_13带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=75 +k=1 +x_0=13500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2328, name: "高斯大地坐标系_西安80_14带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=81 +k=1 +x_0=14500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2329, name: "高斯大地坐标系_西安80_15带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=87 +k=1 +x_0=15500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2330, name: "高斯大地坐标系_西安80_16带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=93 +k=1 +x_0=16500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2331, name: "高斯大地坐标系_西安80_17带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=99 +k=1 +x_0=17500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2332, name: "高斯大地坐标系_西安80_18带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=105 +k=1 +x_0=18500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2333, name: "高斯大地坐标系_西安80_19带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=111 +k=1 +x_0=19500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2334, name: "高斯大地坐标系_西安80_20带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=117 +k=1 +x_0=20500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2335, name: "高斯大地坐标系_西安80_21带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=123 +k=1 +x_0=21500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2336, name: "高斯大地坐标系_西安80_22带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=129 +k=1 +x_0=22500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2337, name: "高斯大地坐标系_西安80_23带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=135 +k=1 +x_0=23500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2403, name: "高斯大地坐标系_西安80_27带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=81 +k=1 +x_0=27500000 +y_0=0 +ellps=krass +towgs84=15.8,-154.4,-82.3,0,0,0,0 +units=m +no_defs" }, + { id: 2404, name: "高斯大地坐标系_西安80_28带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=84 +k=1 +x_0=28500000 +y_0=0 +ellps=krass +towgs84=15.8,-154.4,-82.3,0,0,0,0 +units=m +no_defs" }, + { id: 2405, name: "高斯大地坐标系_西安80_29带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=87 +k=1 +x_0=29500000 +y_0=0 +ellps=krass +towgs84=15.8,-154.4,-82.3,0,0,0,0 +units=m +no_defs" }, + { id: 2406, name: "高斯大地坐标系_西安80_30带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=90 +k=1 +x_0=30500000 +y_0=0 +ellps=krass +towgs84=15.8,-154.4,-82.3,0,0,0,0 +units=m +no_defs" }, + { id: 2407, name: "高斯大地坐标系_西安80_31带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=93 +k=1 +x_0=31500000 +y_0=0 +ellps=krass +towgs84=15.8,-154.4,-82.3,0,0,0,0 +units=m +no_defs" }, + { id: 2408, name: "高斯大地坐标系_西安80_32带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=96 +k=1 +x_0=32500000 +y_0=0 +ellps=krass +towgs84=15.8,-154.4,-82.3,0,0,0,0 +units=m +no_defs" }, + { id: 2409, name: "高斯大地坐标系_西安80_33带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=99 +k=1 +x_0=33500000 +y_0=0 +ellps=krass +towgs84=15.8,-154.4,-82.3,0,0,0,0 +units=m +no_defs" }, + { id: 2410, name: "高斯大地坐标系_西安80_34带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=102 +k=1 +x_0=34500000 +y_0=0 +ellps=krass +towgs84=15.8,-154.4,-82.3,0,0,0,0 +units=m +no_defs" }, + { id: 2411, name: "高斯大地坐标系_西安80_35带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=105 +k=1 +x_0=35500000 +y_0=0 +ellps=krass +towgs84=15.8,-154.4,-82.3,0,0,0,0 +units=m +no_defs" }, + { id: 2412, name: "高斯大地坐标系_西安80_36带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=108 +k=1 +x_0=36500000 +y_0=0 +ellps=krass +towgs84=15.8,-154.4,-82.3,0,0,0,0 +units=m +no_defs" }, + { id: 2413, name: "高斯大地坐标系_西安80_37带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=111 +k=1 +x_0=37500000 +y_0=0 +ellps=krass +towgs84=15.8,-154.4,-82.3,0,0,0,0 +units=m +no_defs" }, + { id: 2414, name: "高斯大地坐标系_西安80_38带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=114 +k=1 +x_0=38500000 +y_0=0 +ellps=krass +towgs84=15.8,-154.4,-82.3,0,0,0,0 +units=m +no_defs" }, + { id: 2415, name: "高斯大地坐标系_西安80_39带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=117 +k=1 +x_0=39500000 +y_0=0 +ellps=krass +towgs84=15.8,-154.4,-82.3,0,0,0,0 +units=m +no_defs" }, + { id: 2416, name: "高斯大地坐标系_西安80_40带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=120 +k=1 +x_0=40500000 +y_0=0 +ellps=krass +towgs84=15.8,-154.4,-82.3,0,0,0,0 +units=m +no_defs" }, + { id: 2417, name: "高斯大地坐标系_西安80_41带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=123 +k=1 +x_0=41500000 +y_0=0 +ellps=krass +towgs84=15.8,-154.4,-82.3,0,0,0,0 +units=m +no_defs" }, + { id: 2418, name: "高斯大地坐标系_西安80_42带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=126 +k=1 +x_0=42500000 +y_0=0 +ellps=krass +towgs84=15.8,-154.4,-82.3,0,0,0,0 +units=m +no_defs" }, + { id: 2419, name: "高斯大地坐标系_西安80_43带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=129 +k=1 +x_0=43500000 +y_0=0 +ellps=krass +towgs84=15.8,-154.4,-82.3,0,0,0,0 +units=m +no_defs" }, + { id: 2420, name: "高斯大地坐标系_西安80_44带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=132 +k=1 +x_0=44500000 +y_0=0 +ellps=krass +towgs84=15.8,-154.4,-82.3,0,0,0,0 +units=m +no_defs" }, + { id: 2421, name: "高斯大地坐标系_西安80_45带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=135 +k=1 +x_0=45500000 +y_0=0 +ellps=krass +towgs84=15.8,-154.4,-82.3,0,0,0,0 +units=m +no_defs" }, + { id: 2349, name: "高斯大地坐标系_西安80_25带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=75 +k=1 +x_0=25500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2350, name: "高斯大地坐标系_西安80_26带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=78 +k=1 +x_0=26500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2351, name: "高斯大地坐标系_西安80_27带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=81 +k=1 +x_0=27500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2352, name: "高斯大地坐标系_西安80_28带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=84 +k=1 +x_0=28500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2353, name: "高斯大地坐标系_西安80_29带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=87 +k=1 +x_0=29500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2354, name: "高斯大地坐标系_西安80_30带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=90 +k=1 +x_0=30500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2355, name: "高斯大地坐标系_西安80_31带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=93 +k=1 +x_0=31500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2356, name: "高斯大地坐标系_西安80_32带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=96 +k=1 +x_0=32500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2357, name: "高斯大地坐标系_西安80_33带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=99 +k=1 +x_0=33500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2358, name: "高斯大地坐标系_西安80_34带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=102 +k=1 +x_0=34500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2359, name: "高斯大地坐标系_西安80_35带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=105 +k=1 +x_0=35500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2360, name: "高斯大地坐标系_西安80_36带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=108 +k=1 +x_0=36500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2361, name: "高斯大地坐标系_西安80_37带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=111 +k=1 +x_0=37500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2362, name: "高斯大地坐标系_西安80_38带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=114 +k=1 +x_0=38500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2363, name: "高斯大地坐标系_西安80_39带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=117 +k=1 +x_0=39500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2364, name: "高斯大地坐标系_西安80_40带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=120 +k=1 +x_0=40500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2365, name: "高斯大地坐标系_西安80_41带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=123 +k=1 +x_0=41500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2366, name: "高斯大地坐标系_西安80_42带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=126 +k=1 +x_0=42500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2367, name: "高斯大地坐标系_西安80_43带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=129 +k=1 +x_0=43500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2368, name: "高斯大地坐标系_西安80_44带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=132 +k=1 +x_0=44500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" }, + { id: 2369, name: "高斯大地坐标系_西安80_45带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=135 +k=1 +x_0=45500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs" } + ], + 高斯北京54: [ + { id: 21413, name: "高斯大地坐标系_北京54_13带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=75 +k=1 +x_0=13500000 +y_0=0 +ellps=krass +towgs84=15.8,-154.4,-82.3,0,0,0,0 +units=m +no_defs" }, + { id: 21414, name: "高斯大地坐标系_北京54_14带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=81 +k=1 +x_0=14500000 +y_0=0 +ellps=krass +towgs84=15.8,-154.4,-82.3,0,0,0,0 +units=m +no_defs" }, + { id: 21415, name: "高斯大地坐标系_北京54_15带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=87 +k=1 +x_0=15500000 +y_0=0 +ellps=krass +towgs84=15.8,-154.4,-82.3,0,0,0,0 +units=m +no_defs" }, + { id: 21416, name: "高斯大地坐标系_北京54_16带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=93 +k=1 +x_0=16500000 +y_0=0 +ellps=krass +towgs84=15.8,-154.4,-82.3,0,0,0,0 +units=m +no_defs" }, + { id: 21417, name: "高斯大地坐标系_北京54_17带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=99 +k=1 +x_0=17500000 +y_0=0 +ellps=krass +towgs84=15.8,-154.4,-82.3,0,0,0,0 +units=m +no_defs" }, + { id: 21418, name: "高斯大地坐标系_北京54_18带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=105 +k=1 +x_0=18500000 +y_0=0 +ellps=krass +towgs84=15.8,-154.4,-82.3,0,0,0,0 +units=m +no_defs" }, + { id: 21419, name: "高斯大地坐标系_北京54_19带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=111 +k=1 +x_0=19500000 +y_0=0 +ellps=krass +towgs84=15.8,-154.4,-82.3,0,0,0,0 +units=m +no_defs" }, + { id: 21420, name: "高斯大地坐标系_北京54_20带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=117 +k=1 +x_0=20500000 +y_0=0 +ellps=krass +towgs84=15.8,-154.4,-82.3,0,0,0,0 +units=m +no_defs" }, + { id: 21421, name: "高斯大地坐标系_北京54_21带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=123 +k=1 +x_0=21500000 +y_0=0 +ellps=krass +towgs84=15.8,-154.4,-82.3,0,0,0,0 +units=m +no_defs" }, + { id: 21422, name: "高斯大地坐标系_北京54_22带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=129 +k=1 +x_0=22500000 +y_0=0 +ellps=krass +towgs84=15.8,-154.4,-82.3,0,0,0,0 +units=m +no_defs" }, + { id: 21423, name: "高斯大地坐标系_北京54_23带6_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=135 +k=1 +x_0=23500000 +y_0=0 +ellps=krass +towgs84=15.8,-154.4,-82.3,0,0,0,0 +units=m +no_defs" }, + { id: 2431, name: "高斯大地坐标系_北京54_34带3_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=102 +k=1 +x_0=500000 +y_0=0 +ellps=krass +towgs84=15.8,-154.4,-82.3,0,0,0,0 +units=m +no_defs" }, + { id: 2401, name: "高斯大地坐标系_北京54_25带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=75 +k=1 +x_0=25500000 +y_0=0 +ellps=krass +towgs84=15.8,-154.4,-82.3,0,0,0,0 +units=m +no_defs" }, + { id: 2402, name: "高斯大地坐标系_北京54_26带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=78 +k=1 +x_0=26500000 +y_0=0 +ellps=krass +towgs84=15.8,-154.4,-82.3,0,0,0,0 +units=m +no_defs" }, + { id: 32646, name: "Beijing 1954 / 3-degree Gauss-Kruger CM 102E", type: 1, strProject: "+proj=utm +zone=46 +datum=WGS84 +units=m +no_defs" } + ], + 高斯中国2000: [ + { id: 4502, name: "高斯大地坐标系_中国2000_13带6_北", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=75 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" }, + { id: 4503, name: "高斯大地坐标系_中国2000_14带6_北", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=81 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" }, + { id: 4504, name: "高斯大地坐标系_中国2000_15带6_北", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=87 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" }, + { id: 4505, name: "高斯大地坐标系_中国2000_16带6_北", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=93 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" }, + { id: 4506, name: "高斯大地坐标系_中国2000_17带6_北", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=99 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" }, + { id: 4507, name: "高斯大地坐标系_中国2000_18带6_北", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=105 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" }, + { id: 4508, name: "高斯大地坐标系_中国2000_19带6_北", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=111 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" }, + { id: 4509, name: "高斯大地坐标系_中国2000_20带6_北", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=117 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" }, + { id: 4510, name: "高斯大地坐标系_中国2000_21带6_北", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=123 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" }, + { id: 4511, name: "高斯大地坐标系_中国2000_22带6_北", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=129 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" }, + { id: 4512, name: "高斯大地坐标系_中国2000_23带6_北", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=135 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" }, + { id: 4513, name: "高斯大地坐标系_中国2000_25带6_北", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=75 +k=1 +x_0=25500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" }, + { id: 4514, name: "高斯大地坐标系_中国2000_26带6_北", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=78 +k=1 +x_0=26500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" }, + { id: 4515, name: "高斯大地坐标系_中国2000_27带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=81 +k=1 +x_0=27500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" }, + { id: 4516, name: "高斯大地坐标系_中国2000_28带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=84 +k=1 +x_0=28500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" }, + { id: 4517, name: "高斯大地坐标系_中国2000_29带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=87 +k=1 +x_0=29500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" }, + { id: 4518, name: "高斯大地坐标系_中国2000_30带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=90 +k=1 +x_0=30500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" }, + { id: 4519, name: "高斯大地坐标系_中国2000_31带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=93 +k=1 +x_0=31500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" }, + { id: 4520, name: "高斯大地坐标系_中国2000_32带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=96 +k=1 +x_0=32500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" }, + { id: 4521, name: "高斯大地坐标系_中国2000_33带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=99 +k=1 +x_0=33500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" }, + { id: 4522, name: "高斯大地坐标系_中国2000_34带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=102 +k=1 +x_0=34500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" }, + { id: 4523, name: "高斯大地坐标系_中国2000_35带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=105 +k=1 +x_0=35500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" }, + { id: 4524, name: "高斯大地坐标系_中国2000_36带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=108 +k=1 +x_0=36500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" }, + { id: 4525, name: "高斯大地坐标系_中国2000_37带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=111 +k=1 +x_0=37500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" }, + { id: 4526, name: "高斯大地坐标系_中国2000_38带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=114 +k=1 +x_0=38500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" }, + { id: 4527, name: "高斯大地坐标系_中国2000_39带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=117 +k=1 +x_0=39500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" }, + { id: 4528, name: "高斯大地坐标系_中国2000_40带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=120 +k=1 +x_0=40500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" }, + { id: 4529, name: "高斯大地坐标系_中国2000_41带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=123 +k=1 +x_0=41500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" }, + { id: 4530, name: "高斯大地坐标系_中国2000_42带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=126 +k=1 +x_0=42500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" }, + { id: 4531, name: "高斯大地坐标系_中国2000_43带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=129 +k=1 +x_0=43500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" }, + { id: 4532, name: "高斯大地坐标系_中国2000_44带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=132 +k=1 +x_0=44500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" }, + { id: 4533, name: "高斯大地坐标系_中国2000_45带3_北2", type: 0, strProject: "+proj=tmerc +lat_0=0 +lon_0=135 +k=1 +x_0=45500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" }, + { id: 4546, name: "高斯大地坐标系_中国2000_37带3_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=111 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" }, + { id: 4547, name: "高斯大地坐标系_中国2000_38带3_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=114 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" }, + { id: 4545, name: "高斯大地坐标系_中国2000_36带3_北", type: 1, strProject: "+proj=tmerc +lat_0=0 +lon_0=108 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs" } + ] +}; + +export function epsgId(epsg) { + if (typeof epsg === 'string') { + const str = epsg.toUpperCase() + let result; + + if (str.indexOf('EPSG:') >= 0) { + result = str.split('EPSG:') + } else if (str.indexOf('EPSG_') >= 0) { + result = str.split('EPSG_') + } else if (str.indexOf('EPSG') >= 0) { + result = str.split('EPSG') + } else { + return parseInt(epsg, 10) + } + if (result.length >= 2) { + return parseInt(result[1], 10) + } else { + return 4326 + } + } else { + return epsg; + } +} + +export class ProjectTool { + static getProj4sCascader() { + const options = Object.keys(EPSG).map((key) => { + const menu = { + value: key, + label: key, + children: [] + }; + menu.children = EPSG[key].map((epsg) => { + return { value: epsg.id, label: epsg.name }; + }); + return menu; + }); + return options; + } + + static getProj4sDetail(id) { + let detail = ''; + const keys = Object.keys(EPSG); + for (const key of keys) { + const epsgs = EPSG[key]; + for (const item of epsgs) { + if (item.id === id) { + detail = item.strProject; + break; + } + } + if (detail !== '') { + break; + } + } + return detail; + } + + static proj4Transform(source, destination, point) { + let proj = proj4(source, destination); + let projpoint = proj.forward(point); + return projpoint; + } +} + + +let source = epsgId("EPSG:4326"); +let des = epsgId("EPSG:3857"); +let point = [110, 30] +let result = ProjectTool.proj4Transform(source, des, point); +console.log('result', result); \ No newline at end of file diff --git a/src/service/base/format/geojson/geohash.js b/src/service/base/format/geojson/geohash.js new file mode 100644 index 000000000..86d54209b --- /dev/null +++ b/src/service/base/format/geojson/geohash.js @@ -0,0 +1,165 @@ +// geohash.js +// Geohash library for Javascript +// (c) 2008 David Troy +// Distributed under the MIT License + +let BITS = [16, 8, 4, 2, 1]; + +let BASE32 = "0123456789bcdefghjkmnpqrstuvwxyz"; +let NEIGHBORS = { + right: {even: "bc01fg45238967deuvhjyznpkmstqrwx"}, + left: {even: "238967debc01fg45kmstqrwxuvhjyznp"}, + top: {even: "p0r21436x8zb9dcf5h7kjnmqesgutwvy"}, + bottom: {even: "14365h7k9dcfesgujnmqp0r2twvyx8zb"} +}; +let BORDERS = { + right: {even: "bcfguvyz"}, + left: {even: "0145hjnp"}, + top: {even: "prxz"}, + bottom: {even: "028b"} +}; + +NEIGHBORS.bottom.odd = NEIGHBORS.left.even; +NEIGHBORS.top.odd = NEIGHBORS.right.even; +NEIGHBORS.left.odd = NEIGHBORS.bottom.even; +NEIGHBORS.right.odd = NEIGHBORS.top.even; + +BORDERS.bottom.odd = BORDERS.left.even; +BORDERS.top.odd = BORDERS.right.even; +BORDERS.left.odd = BORDERS.bottom.even; +BORDERS.right.odd = BORDERS.top.even; + +var lat_err; +var lon_err; +var geohash; +function refine_interval(interval, cd, mask) { + if (cd & mask) + interval[0] = (interval[0] + interval[1]) / 2; + else + interval[1] = (interval[0] + interval[1]) / 2; +} + +function calculateAdjacent(srcHash, dir) { + srcHash = srcHash.toLowerCase(); + var lastChr = srcHash.charAt(srcHash.length - 1); + var type = (srcHash.length % 2) ? 'odd' : 'even'; + var base = srcHash.substring(0, srcHash.length - 1); + if (BORDERS[dir][type].indexOf(lastChr) != -1) + base = calculateAdjacent(base, dir); + return base + BASE32[NEIGHBORS[dir][type].indexOf(lastChr)]; +} + +function decodeGeoHash(geohash) { + var is_even = 1; + var lat = []; + var lon = []; + lat[0] = -90.0; + lat[1] = 90.0; + lon[0] = -180.0; + lon[1] = 180.0; + lat_err = 90.0; + lon_err = 180.0; + + for (let i = 0; i < geohash.length; i++) { + let c = geohash[i]; + let cd = BASE32.indexOf(c); + for (let j = 0; j < 5; j++) { + let mask = BITS[j]; + if (is_even) { + lon_err /= 2; + refine_interval(lon, cd, mask); + } else { + lat_err /= 2; + refine_interval(lat, cd, mask); + } + is_even = !is_even; + } + } + lat[2] = (lat[0] + lat[1]) / 2; + lon[2] = (lon[0] + lon[1]) / 2; + + return {latitude: lat, longitude: lon}; +} + +function encodeGeoHash(latitude, longitude) { + var is_even = 1; + var i = 0; + var lat = []; + var lon = []; + var bit = 0; + var ch = 0; + var precision = 12; + geohash = ""; + + lat[0] = -90.0; + lat[1] = 90.0; + lon[0] = -180.0; + lon[1] = 180.0; + + while (geohash.length < precision) { + if (is_even) { + let mid = (lon[0] + lon[1]) / 2; + if (longitude > mid) { + ch |= BITS[bit]; + lon[0] = mid; + } else + lon[1] = mid; + } else { + let mid = (lat[0] + lat[1]) / 2; + if (latitude > mid) { + ch |= BITS[bit]; + lat[0] = mid; + } else + lat[1] = mid; + } + + is_even = !is_even; + if (bit < 4) + bit++; + else { + geohash += BASE32[ch]; + bit = 0; + ch = 0; + } + } + return geohash; +} + +function decodeGeoHashToPolygon(geohash) { + var is_even = 1; + var lat = []; + var lon = []; + lat[0] = -90.0; + lat[1] = 90.0; + lon[0] = -180.0; + lon[1] = 180.0; + lat_err = 90.0; + lon_err = 180.0; + + for (let i = 0; i < geohash.length; i++) { + let c = geohash[i]; + let cd = BASE32.indexOf(c); + for (let j = 0; j < 5; j++) { + let mask = BITS[j]; + if (is_even) { + lon_err /= 2; + refine_interval(lon, cd, mask); + } else { + lat_err /= 2; + refine_interval(lat, cd, mask); + } + is_even = !is_even; + } + } + lat[2] = (lat[0] + lat[1]) / 2; + lon[2] = (lon[0] + lon[1]) / 2; + + var top_left = [lon[0], lat[1]]; + var top_right = [lon[1], lat[1]]; + var bottom_right = [lon[1], lat[0]]; + var bottom_left = [lon[0], lat[0]]; + + return [[top_left, top_right, bottom_right, bottom_left, top_left]]; +} + +export {decodeGeoHash, decodeGeoHashToPolygon, encodeGeoHash}; \ No newline at end of file diff --git a/src/service/base/format/geojson/geojson.js b/src/service/base/format/geojson/geojson.js new file mode 100644 index 000000000..4e7bb6ff2 --- /dev/null +++ b/src/service/base/format/geojson/geojson.js @@ -0,0 +1,131 @@ +import turfbbox from '@turf/bbox'; + +/* type GeoJSONPosition = [number, number] | [number, number, number]; +type Geometry = { type: T, coordinates: C }; + +export type GeoJSONPoint = Geometry<'Point', GeoJSONPosition>; +export type GeoJSONMultiPoint = Geometry<'MultiPoint', Array>; + +export type GeoJSONLineString = Geometry<'LineString', Array>; +export type GeoJSONMultiLineString = Geometry<'MultiLineString', Array>>; + +export type GeoJSONPolygon = Geometry<'Polygon', Array>>; +export type GeoJSONMultiPolygon = Geometry<'MultiPolygon', Array>>>; + +export type GeoJSONGeometry = + | GeoJSONPoint + | GeoJSONMultiPoint + | GeoJSONLineString + | GeoJSONMultiLineString + | GeoJSONPolygon + | GeoJSONMultiPolygon + | GeoJSONGeometryCollection; + +export type GeoJSONGeometryCollection = { + type: 'GeometryCollection', + geometries: Array +}; + +export type GeoJSONFeature = { + type: 'Feature', + geometry?: GeoJSONGeometry, + properties?: {}, + id?: number | string +}; + +export type GeoJSONFeatureCollection = { + type: 'FeatureCollection', + features: Array +}; + +export type GeoJSON = GeoJSONGeometry | GeoJSONFeature | GeoJSONFeatureCollection; + +export let EmptyGeoJSONFeatureCollection: GeoJSONFeatureCollection = { + type: 'FeatureCollection', + features: [] +}; */ + +export class GeojsonFeature { + constructor() { + // constructor + this.feature = undefined; + this.bounds = undefined; + } + + createFeature(feature) { + this.feature = feature; + } + + createGeomtry(geometry) { + this.feature = { + geometry + }; + } + + createProperties(properties) { + this.feature = { + properties + }; + } + + getFeature() { + return this.feature; + } + + getBounds(maprender) { + this.bbox(); + const { bounds } = this; + return [ + [bounds[0], bounds[1]], + [bounds[2], bounds[3]] + ]; + } + + bbox() { + this.bounds = turfbbox(this.feature); + return this.bounds; + } +} + +export class GeojsonCollection { + constructor(features) { + this.bounds = undefined; + this.data = { + type: 'FeatureCollection', + features: [] + }; + + if (features instanceof Array) { + this.data.features = features || []; + } else { + this.data.features = [features]; + } + } + + addFeature(feature) { + if (feature instanceof GeojsonFeature) { + this.data.features.push(feature.getFeature()); + } else { + this.data.features.push(feature); + } + } + + setFeatures(features) { + this.data.features = features; + } + + getData() { + return this.data; + } + + getBounds() { + this.bbox(); + const { bounds } = this; + return bounds; + } + + bbox() { + this.bounds = turfbbox(this.data); + return this.bounds; + } +} diff --git a/src/service/base/format/geojson/index.js b/src/service/base/format/geojson/index.js new file mode 100644 index 000000000..2c93c75e2 --- /dev/null +++ b/src/service/base/format/geojson/index.js @@ -0,0 +1,3 @@ +import {decodeGeoHash, decodeGeoHashToPolygon, encodeGeoHash} from "./geohash" + +export {decodeGeoHash, decodeGeoHashToPolygon, encodeGeoHash}; diff --git a/src/service/base/index.js b/src/service/base/index.js new file mode 100644 index 000000000..a5e343047 --- /dev/null +++ b/src/service/base/index.js @@ -0,0 +1,76 @@ +import { + Shadow, + VectorStyle, + PointStyle, + MarkerStyle, + LineStyle, + FillStyle, + ExtrudeStyle, + TextStyle, + FontStyle, + ModelStyle, + TrackStyle +} from './style'; + +export { Shadow, VectorStyle, PointStyle, MarkerStyle, LineStyle, FillStyle, ExtrudeStyle, TextStyle, FontStyle, ModelStyle, TrackStyle }; + +import { + Enum, + Symbol, + Symbol3D, + Symbol3DLayer, + Font, + MarkerSymbol, + LineSymbol, + FillSymbol, + TextSymbol, + PictureMarkerSymbol, + SimpleMarkerSymbol, + SimpleLineSymbol, + SimpleFillSymbol, + PictureFillSymbol, + LineSymbolMarker, + PointSymbol3D, + LineSymbol3D, + PolygonSymbol3D, + LabelSymbol3D, + IconSymbol3DLayer, + ObjectSymbol3DLayer, + LineSymbol3DLayer, + PathSymbol3DLayer, + FillSymbol3DLayer, + ExtrudeSymbol3DLayer, + TextSymbol3DLayer +} from './symbols'; + +export { + Enum, + Symbol, + Symbol3D, + Symbol3DLayer, + Font, + MarkerSymbol, + LineSymbol, + FillSymbol, + TextSymbol, + PictureMarkerSymbol, + SimpleMarkerSymbol, + SimpleLineSymbol, + SimpleFillSymbol, + PictureFillSymbol, + LineSymbolMarker, + PointSymbol3D, + LineSymbol3D, + PolygonSymbol3D, + LabelSymbol3D, + IconSymbol3DLayer, + ObjectSymbol3DLayer, + LineSymbol3DLayer, + PathSymbol3DLayer, + FillSymbol3DLayer, + ExtrudeSymbol3DLayer, + TextSymbol3DLayer +}; + +import { decodeGeoHash, decodeGeoHashToPolygon, encodeGeoHash } from './format/geojson'; +export { decodeGeoHash, decodeGeoHashToPolygon, encodeGeoHash }; diff --git a/src/service/base/renderer/ClassBreakInfo.js b/src/service/base/renderer/ClassBreakInfo.js new file mode 100644 index 000000000..89bf6f372 --- /dev/null +++ b/src/service/base/renderer/ClassBreakInfo.js @@ -0,0 +1,61 @@ +import { mapgis } from '../common/base'; +import { cloneDeep } from 'lodash'; +import { Renderer } from './Renderer'; + +import { PointSymbol3D, PolygonSymbol3D, LineSymbol3D } from "../symbols/index"; + +/** + * 三维专题图-分段信息 + * @class mapgis.renderer.ClassBreakInfo + * @classdesc 三维专题图-分段信息 + * @param {Number} [minValue] 设置分段间隔的最小值 + * @param {Number} [maxValue] 设置分段间隔的最大值 + * @param {Symbol} [symbol] 符号，用来渲染分段间隔最小-最大值之间的要素 + * @param {String} [label] 标签，用来描述符号表示的值 + */ +export default class ClassBreakInfo { + constructor(option) { + var options = option ? option : {}; + const { minValue, maxValue, symbol, label } = options; + this.minValue = minValue; + this.maxValue = maxValue; + this.symbol = symbol; + this.label = label; + } + + /** + * @description 克隆函数 + */ + clone() { + return cloneDeep(this); + } + + /** + * @description 将JSON格式的分段信息转换为JS对象 + * @param {Object} json 分段信息的实例化JSON + */ + fromJSON(json) { + json = json || {}; + const { minValue, maxValue, symbol, label } = json; + this.minValue = minValue; + this.maxValue = maxValue; + this.symbol = symbol; + this.label = label; + } + + /** + * 将JS对象转换为JSON格式 + * @returns {Object} 分段信息的实例化JSON + */ + toJSON() { + return { + minValue: this.minValue, + maxValue: this.maxValue, + symbol: this.symbol, + label: this.label, + }; + } +} + +export { ClassBreakInfo }; +mapgis.renderer.ClassBreakInfo = ClassBreakInfo; diff --git a/src/service/base/renderer/ClassBreaksRenderer.js b/src/service/base/renderer/ClassBreaksRenderer.js new file mode 100644 index 000000000..d220ea08c --- /dev/null +++ b/src/service/base/renderer/ClassBreaksRenderer.js @@ -0,0 +1,140 @@ +import { mapgis } from '../common/base'; +import { cloneDeep } from 'lodash'; +import { Renderer } from './Renderer'; + +import { PointSymbol3D, PolygonSymbol3D, LineSymbol3D } from "../symbols/index"; + +/** + * 三维专题图-分段专题图 + * @class mapgis.renderer.ClassBreaksRenderer + * @classdesc 三维专题图-分段专题图 + * @param {String} [type] 专题图类型，只能是'class-breaks' + * @param {String} [field] 专题图字段名称，用来确定分段要素 + * @param {Symbol} [defaultSymbol] 专题图默认符号样式，用来绘制具有与给定中断值不匹配的要素 + * @param {String} [defaultLabel] 专题图图例标签，用来描述分配了默认符号的元素 + * @param {Array} [classBreakInfos] 专题图分段信息 + * @param {Array} [visualVariables] 专题图视觉变量，可选 "color"|"opacity"|"size"|"rotation" + * @param {PolygonSymbol3D} [backgroundFillSymbol] 专题图边界变量，使用分级符号对面要素进行符号化时，在此属性上设置以可视化每个要素的边界 + * @param {Object} [legendOptions] 专题图图例选项，用来在图例中展示符号信息 + * @param {String} [normalizationType] 专题图归一化类型，可选 "field"|"percent-of-total"|"log" + * @param {String} [normalizationField] 专题图归一化字段，将数据值除以对应字段数据值 + * @param {Number} [normalizationTotal] 专题图归一化值，将数据值除以所有数据值的总和 + * @param {String} [valueExpression] 专题图计算表达式，用来对要素中的单/多个属性进行数学计算 + * @param {String} [valueExpressionTitle] 专题图计算表达式标题，在legendOptions属性中没有提供的情况下，将显示为图例中的标题 + */ +export default class ClassBreaksRenderer extends Renderer { + constructor(option) { + super(option); + var options = option ? option : {}; + const { type = "class-breaks" } = options; + this.type = type; + const { field, defaultSymbol, defaultLabel, classBreakInfos, visualVariables, backgroundFillSymbol, legendOptions, normalizationType, normalizationField, normalizationTotal, valueExpression, valueExpressionTitle } = options; + this.field = field; + this.defaultSymbol = defaultSymbol; + this.defaultLabel = defaultLabel; + this.classBreakInfos = classBreakInfos; + this.visualVariables = visualVariables; + this.backgroundFillSymbol = backgroundFillSymbol; + this.legendOptions = legendOptions; + this.normalizationType = normalizationType; + this.normalizationField = normalizationField; + this.normalizationTotal = normalizationTotal; + this.valueExpression = valueExpression; + this.valueExpressionTitle = valueExpressionTitle; + } + + /** + * @description 克隆函数 + */ + clone() { + return cloneDeep(this); + } + + /** + * @description 将JSON格式的渲染规则转换为JS对象 + * @param {Object} json 渲染规则的实例化JSON + */ + fromJSON(json) { + json = json || {}; + const { type = "class-breaks" } = json; + this.type = type; + const { field, defaultSymbol, defaultLabel, classBreakInfos, visualVariables, backgroundFillSymbol, legendOptions, normalizationType, normalizationField, normalizationTotal, valueExpression, valueExpressionTitle } = json; + this.field = field; + this.defaultSymbol = defaultSymbol; + this.defaultLabel = defaultLabel; + this.classBreakInfos = classBreakInfos; + this.visualVariables = visualVariables; + this.backgroundFillSymbol = backgroundFillSymbol; + this.legendOptions = legendOptions; + this.normalizationType = normalizationType; + this.normalizationField = normalizationField; + this.normalizationTotal = normalizationTotal; + this.valueExpression = valueExpression; + this.valueExpressionTitle = valueExpressionTitle; + } + + /** + * 将JS对象转换为JSON格式 + * @returns {Object} 渲染规则的实例化JSON + */ + toJSON() { + return { + type: this.type, + field: this.field, + defaultSymbol: this.defaultSymbol, + defaultLabel: this.defaultLabel, + classBreakInfos: this.classBreakInfos, + visualVariables: this.visualVariables, + backgroundFillSymbol: this.backgroundFillSymbol, + legendOptions: this.legendOptions, + normalizationType: this.normalizationType, + normalizationField: this.normalizationField, + normalizationTotal: this.normalizationTotal, + valueExpression: this.valueExpression, + valueExpressionTitle: this.valueExpressionTitle + }; + } + + /** + * @description 添加分段信息 + * @param {Object} info 分段信息的实例化对象 + */ + addClassBreakInfo(info) { + info = info || {}; + this.classBreakInfos.push(info); + } + + /** + * @description 获取分段信息 + * @param {Object} info 分段信息的实例化对象 + * @returns {Object} 根据info查询到的分段信息 + */ + getClassBreakInfo(info) { + info = info || {}; + const { minValue, maxValue, symbol, label } = info; + for(let i = 0; i < this.classBreakInfos.length; i++) { + let item = this.classBreakInfos[i]; + if (item.minValue == minValue && item.maxValue == maxValue) { + return item; + } + } + } + + /** + * @description 移除分段信息 + * @param {Object} info 分段信息的实例化对象 + */ + removeClassBreakInfo(info) { + info = info || {}; + const { minValue, maxValue, symbol, label } = info; + for(let i = 0; i < this.classBreakInfos.length; i++) { + let item = this.classBreakInfos[i]; + if (item.minValue == minValue && item.maxValue == maxValue) { + this.classBreakInfos.splice(i, 1); + } + } + } +} + +export { ClassBreaksRenderer }; +mapgis.renderer.ClassBreaksRenderer = ClassBreaksRenderer; diff --git a/src/service/base/renderer/ColorVariable.js b/src/service/base/renderer/ColorVariable.js new file mode 100644 index 000000000..5cef93e5d --- /dev/null +++ b/src/service/base/renderer/ColorVariable.js @@ -0,0 +1,78 @@ +import { mapgis } from '../common/base'; +import { cloneDeep } from 'lodash'; +import { VisualVariable } from './VisualVariable'; + +/** + * 视觉变量-颜色视觉变量 + * @class mapgis.renderer.ColorVariable + * @classdesc 视觉变量-颜色视觉变量 + * @param {String} [type] 视觉变量类型，只能是 'color' + * @param {String} [field] 视觉变量字段 + * @param {String} [valueExpression] 计算表达式，用来对要素中的单/多个属性进行数学计算 + * @param {String} [valueExpressionTitle] 计算表达式标题 + * @param {String} [normalizationType] 归一化类型，可选 "field"|"percent-of-total"|"log" + * @param {String} [normalizationField] 归一化字段，将renderer中对应字段数据值除以归一化字段数据值 + * @param {Number} [normalizationTotal] 归一化值，将renderer中对应字段数据值除以所有数据值的总和 + * @param {Array} [stops] 视觉变量颜色数组，定义在一系列停靠点中应用于要素的连续色带的颜色 + */ +export default class ColorVariable extends VisualVariable { + constructor(option) { + super(option); + var options = option ? option : {}; + const { type = "color" } = options; + this.type = type; + const { field, valueExpression, valueExpressionTitle, normalizationType, normalizationField, normalizationTotal, stops } = options; + this.field = field; + this.valueExpression = valueExpression; + this.valueExpressionTitle = valueExpressionTitle; + this.normalizationType = normalizationType; + this.normalizationField = normalizationField; + this.normalizationTotal = normalizationTotal; + this.stops = stops; + } + + /** + * @description 克隆函数 + */ + clone() { + return cloneDeep(this); + } + + /** + * @description 将JSON格式的视觉变量转换为JS对象 + * @param {Object} json 视觉变量的实例化JSON + */ + fromJSON(json) { + json = json || {}; + const { type = "color" } = json; + this.type = type; + const { field, valueExpression, valueExpressionTitle, normalizationType, normalizationField, normalizationTotal, stops } = json; + this.field = field; + this.valueExpression = valueExpression; + this.valueExpressionTitle = valueExpressionTitle; + this.normalizationType = normalizationType; + this.normalizationField = normalizationField; + this.normalizationTotal = normalizationTotal; + this.stops = stops; + } + + /** + * 将JS对象转换为JSON格式 + * @returns {Object} 视觉变量的实例化JSON + */ + toJSON() { + return { + type: this.type, + field: this.field, + valueExpression: this.valueExpression, + valueExpressionTitle: this.valueExpressionTitle, + normalizationType: this.normalizationType, + normalizationField: this.normalizationField, + normalizationTotal: this.normalizationTotal, + stops: this.stops, + }; + } +} + +export { ColorVariable }; +mapgis.renderer.ColorVariable = ColorVariable; diff --git a/src/service/base/renderer/OpacityVariable.js b/src/service/base/renderer/OpacityVariable.js new file mode 100644 index 000000000..00c3f8821 --- /dev/null +++ b/src/service/base/renderer/OpacityVariable.js @@ -0,0 +1,78 @@ +import { mapgis } from '../common/base'; +import { cloneDeep } from 'lodash'; +import { VisualVariable } from './VisualVariable'; + +/** + * 视觉变量-透明度视觉变量 + * @class mapgis.renderer.OpacityVariable + * @classdesc 视觉变量-透明度视觉变量 + * @param {String} [type] 视觉变量类型，只能是 'opacity' + * @param {String} [field] 视觉变量字段 + * @param {String} [valueExpression] 计算表达式，用来对要素中的单/多个属性进行数学计算 + * @param {String} [valueExpressionTitle] 计算表达式标题 + * @param {String} [normalizationType] 归一化类型，可选 "field"|"percent-of-total"|"log" + * @param {String} [normalizationField] 归一化字段，将renderer中对应字段数据值除以归一化字段数据值 + * @param {Number} [normalizationTotal] 归一化值，将renderer中对应字段数据值除以所有数据值的总和 + * @param {Array} [stops] 视觉变量透明度数组，定义在一系列停靠点中应用于要素的透明度 + */ +export default class OpacityVariable extends VisualVariable { + constructor(option) { + super(option); + var options = option ? option : {}; + const { type = "opacity" } = options; + this.type = type; + const { field, valueExpression, valueExpressionTitle, normalizationType, normalizationField, normalizationTotal, stops } = options; + this.field = field; + this.valueExpression = valueExpression; + this.valueExpressionTitle = valueExpressionTitle; + this.normalizationType = normalizationType; + this.normalizationField = normalizationField; + this.normalizationTotal = normalizationTotal; + this.stops = stops; + } + + /** + * @description 克隆函数 + */ + clone() { + return cloneDeep(this); + } + + /** + * @description 将JSON格式的视觉变量转换为JS对象 + * @param {Object} json 视觉变量的实例化JSON + */ + fromJSON(json) { + json = json || {}; + const { type = "opacity" } = json; + this.type = type; + const { field, valueExpression, valueExpressionTitle, normalizationType, normalizationField, normalizationTotal, stops } = json; + this.field = field; + this.valueExpression = valueExpression; + this.valueExpressionTitle = valueExpressionTitle; + this.normalizationType = normalizationType; + this.normalizationField = normalizationField; + this.normalizationTotal = normalizationTotal; + this.stops = stops; + } + + /** + * 将JS对象转换为JSON格式 + * @returns {Object} 视觉变量的实例化JSON + */ + toJSON() { + return { + type: this.type, + field: this.field, + valueExpression: this.valueExpression, + valueExpressionTitle: this.valueExpressionTitle, + normalizationType: this.normalizationType, + normalizationField: this.normalizationField, + normalizationTotal: this.normalizationTotal, + stops: this.stops, + }; + } +} + +export { OpacityVariable }; +mapgis.renderer.OpacityVariable = OpacityVariable; diff --git a/src/service/base/renderer/Renderer.js b/src/service/base/renderer/Renderer.js new file mode 100644 index 000000000..586a512be --- /dev/null +++ b/src/service/base/renderer/Renderer.js @@ -0,0 +1,42 @@ +import { mapgis } from '../common/base'; + +/** + * 三维专题图渲染基类 + * @class mapgis.renderer.Renderer + * @classdesc 三维专题图渲染基类 + * @param {String} [type] 三维专题图类型，可选 "simple"|"unique-value"|"class-breaks" + * @param {Object} [authoringInfo] 三维专题图创建的元信息 + */ +export default class Renderer { + constructor(option) { + var options = option ? option : {}; + const { type, authoringInfo } = options; + this.type = type; + this.authoringInfo = authoringInfo; + } + + /** + * @description 将JSON格式的渲染规则转换为JS对象 + * @param {Object} json 渲染规则的实例化JSON + */ + fromJSON(json) { + json = json || {}; + const { type, authoringInfo } = json; + this.type = type; + this.authoringInfo = authoringInfo; + } + + /** + * 将JS对象转换为JSON格式 + * @returns {Object} 渲染规则的实例化JSON + */ + toJSON() { + return { + type: this.type, + authoringInfo: this.authoringInfo, + }; + } +} + +export { Renderer }; +mapgis.renderer.Renderer = Renderer; diff --git a/src/service/base/renderer/RotationVariable.js b/src/service/base/renderer/RotationVariable.js new file mode 100644 index 000000000..5950ce68f --- /dev/null +++ b/src/service/base/renderer/RotationVariable.js @@ -0,0 +1,58 @@ +import { mapgis } from '../common/base'; +import { cloneDeep } from 'lodash'; +import { VisualVariable } from './VisualVariable'; + +/** + * 视觉变量-旋转视觉变量 + * @class mapgis.renderer.RotationVariable + * @classdesc 视觉变量-旋转视觉变量 + * @param {String} [type] 视觉变量类型，只能是 'rotation' + * @param {String} [axis] 符号旋转所绕的轴，可选 "heading"|"tilt"|"roll" + * @param {String} [rotationType] 符号旋转方向，此属性仅适用于绕heading轴旋转，可选 "geographic"|"arithmetic" + */ +export default class RotationVariable extends VisualVariable { + constructor(option) { + super(option); + var options = option ? option : {}; + const { type = "rotation" } = options; + this.type = type; + const { axis, rotationType } = options; + this.axis = axis; + this.rotationType = rotationType; + } + + /** + * @description 克隆函数 + */ + clone() { + return cloneDeep(this); + } + + /** + * @description 将JSON格式的视觉变量转换为JS对象 + * @param {Object} json 视觉变量的实例化JSON + */ + fromJSON(json) { + json = json || {}; + const { type = "rotation" } = json; + this.type = type; + const { axis, rotationType } = options; + this.axis = axis; + this.rotationType = rotationType; + } + + /** + * 将JS对象转换为JSON格式 + * @returns {Object} 视觉变量的实例化JSON + */ + toJSON() { + return { + type: this.type, + axis: this.axis, + rotationType: this.rotationType, + }; + } +} + +export { RotationVariable }; +mapgis.renderer.RotationVariable = RotationVariable; diff --git a/src/service/base/renderer/SimpleRenderer.js b/src/service/base/renderer/SimpleRenderer.js new file mode 100644 index 000000000..a401ebc02 --- /dev/null +++ b/src/service/base/renderer/SimpleRenderer.js @@ -0,0 +1,65 @@ +import { mapgis } from '../common/base'; +import { cloneDeep } from 'lodash'; +import { Renderer } from './Renderer'; + +import { PointSymbol3D, PolygonSymbol3D, LineSymbol3D } from "../symbols/index"; + +/** + * 三维专题图-统一专题图 + * @class mapgis.renderer.SimpleRenderer + * @classdesc 三维专题图-统一专题图 + * @param {String} [type] 专题图类型，只能是'simple' + * @param {Symbol} [symbol] 专题图符号样式 + * @param {String} [label] 专题图图例标签，用来描述分配了默认符号的元素 + * @param {Array} [visualVariables] 专题图视觉变量，可选 "color"|"opacity"|"size"|"rotation" + * @param {Object} [legendOptions] 专题图图例选项，用来在图例中展示符号信息 + */ +export default class SimpleRenderer extends Renderer { + constructor(option) { + super(option); + var options = option ? option : {}; + const { type = "simple" } = options; + this.type = type; + const { symbol, label, visualVariables } = options; + this.symbol = symbol; + this.label = label; + this.visualVariables = visualVariables; + } + + /** + * @description 克隆函数 + */ + clone() { + return cloneDeep(this); + } + + /** + * @description 将JSON格式的渲染规则转换为JS对象 + * @param {Object} json 渲染规则的实例化JSON + */ + fromJSON(json) { + json = json || {}; + const { type = "simple" } = json; + this.type = type; + const { symbol, label, visualVariables } = json; + this.symbol = symbol; + this.label = label; + this.visualVariables = visualVariables; + } + + /** + * 将JS对象转换为JSON格式 + * @returns {Object} 渲染规则的实例化JSON + */ + toJSON() { + return { + type: this.type, + symbol: this.symbol, + label: this.label, + visualVariables: this.visualVariables + }; + } +} + +export { SimpleRenderer }; +mapgis.renderer.SimpleRenderer = SimpleRenderer; diff --git a/src/service/base/renderer/SizeVariable.js b/src/service/base/renderer/SizeVariable.js new file mode 100644 index 000000000..7f33292c0 --- /dev/null +++ b/src/service/base/renderer/SizeVariable.js @@ -0,0 +1,98 @@ +import { mapgis } from '../common/base'; +import { cloneDeep } from 'lodash'; +import { VisualVariable } from './VisualVariable'; + +/** + * 视觉变量-大小视觉变量 + * @class mapgis.renderer.SizeVariable + * @classdesc 视觉变量-大小视觉变量 + * @param {String} [type] 视觉变量类型，只能是 'size' + * @param {String} [axis] 轴，可选 "heading"|"tilt"|"roll" + * @param {Object} [legendOptions] 图例选项，用来在图例中展示符号信息 + * @param {Number} [maxDataValue] 尺寸渐变中使用的最大数据值 + * @param {Number} [maxSize] 最大数据值的要素尺寸的大小 + * @param {Number} [minDataValue] 尺寸渐变中使用的最小数据值 + * @param {Number} [minSize] 最小数据值的要素尺寸的大小 + * @param {String} [normalizationField] 标准化数据所依据的数字属性字段的名称，将数据值除以对应字段数据值 + * @param {Array} [stops] 视觉变量尺寸数组，定义从field或valueExpression返回的数据值到符号大小的映射的对象数组 + * @param {String} [target] outline在根据视图比例缩放多边形轮廓宽度时，必须使用此值 + * @param {Boolean} [useSymbolValue] 使用符号值，当使用ObjectSymbol3DLayer在渲染器上设置大小可视变量时，此属性指示是否将由height、width或depth属性定义的值应用于此可视变量的相应轴，而不是按比例缩放此轴的值 + * @param {String} [valueRepresentation] 指定在映射实际大小时如何应用数据值 + * @param {String} [valueUnit] 度量单位，用于field或valueExpression返回的值上 + */ +export default class SizeVariable extends VisualVariable { + constructor(option) { + super(option); + var options = option ? option : {}; + const { type = "size" } = options; + this.type = type; + const { axis, legendOptions, maxDataValue, maxSize, minDataValue, minSize, normalizationField, stops, target, useSymbolValue, valueRepresentation, valueUnit } = options; + this.axis = axis; + this.legendOptions = legendOptions; + this.maxDataValue = maxDataValue; + this.maxSize = maxSize; + this.minDataValue = minDataValue; + this.minSize = minSize; + this.normalizationField = normalizationField; + this.stops = stops; + this.target = target; + this.useSymbolValue = useSymbolValue; + this.valueRepresentation = valueRepresentation; + this.valueUnit = valueUnit; + } + + /** + * @description 克隆函数 + */ + clone() { + return cloneDeep(this); + } + + /** + * @description 将JSON格式的视觉变量转换为JS对象 + * @param {Object} json 视觉变量的实例化JSON + */ + fromJSON(json) { + json = json || {}; + const { type = "size" } = json; + this.type = type; + const { axis, legendOptions, maxDataValue, maxSize, minDataValue, minSize, normalizationField, stops, target, useSymbolValue, valueRepresentation, valueUnit } = json; + this.axis = axis; + this.legendOptions = legendOptions; + this.maxDataValue = maxDataValue; + this.maxSize = maxSize; + this.minDataValue = minDataValue; + this.minSize = minSize; + this.normalizationField = normalizationField; + this.stops = stops; + this.target = target; + this.useSymbolValue = useSymbolValue; + this.valueRepresentation = valueRepresentation; + this.valueUnit = valueUnit; + } + + /** + * 将JS对象转换为JSON格式 + * @returns {Object} 视觉变量的实例化JSON + */ + toJSON() { + return { + type: this.type, + axis: this.axis, + legendOptions: this.legendOptions, + maxDataValue: this.maxDataValue, + maxSize: this.maxSize, + minDataValue: this.minDataValue, + minSize: this.minSize, + normalizationField: this.normalizationField, + stops: this.stops, + target: this.target, + useSymbolValue: this.useSymbolValue, + valueRepresentation: this.valueRepresentation, + valueUnit: this.valueUnit, + }; + } +} + +export { SizeVariable }; +mapgis.renderer.SizeVariable = SizeVariable; diff --git a/src/service/base/renderer/UniqueValueInfo.js b/src/service/base/renderer/UniqueValueInfo.js new file mode 100644 index 000000000..980b83436 --- /dev/null +++ b/src/service/base/renderer/UniqueValueInfo.js @@ -0,0 +1,57 @@ +import { mapgis } from '../common/base'; +import { cloneDeep } from 'lodash'; +import { Renderer } from './Renderer'; + +import { PointSymbol3D, PolygonSymbol3D, LineSymbol3D } from "../symbols/index"; + +/** + * 三维专题图-单值信息 + * @class mapgis.renderer.UniqueValueInfo + * @classdesc 三维专题图-单值信息 + * @param {String|Number} [value] 指定字段下的要素值，具有此值的要素将使用给定的符号可视化 + * @param {Symbol} [symbol] 符号，用来渲染指定要素 + * @param {String} [label] 标签，用来描述符号表示的值 + */ +export default class UniqueValueInfo { + constructor(option) { + var options = option ? option : {}; + const { value, symbol, label } = options; + this.value = value; + this.symbol = symbol; + this.label = label; + } + + /** + * @description 克隆函数 + */ + clone() { + return cloneDeep(this); + } + + /** + * @description 将JSON格式的单值信息转换为JS对象 + * @param {Object} json 单值信息的实例化JSON + */ + fromJSON(json) { + json = json || {}; + const { value, symbol, label } = json; + this.value = value; + this.symbol = symbol; + this.label = label; + } + + /** + * 将JS对象转换为JSON格式 + * @returns {Object} 单值信息的实例化JSON + */ + toJSON() { + return { + value: this.value, + symbol: this.symbol, + label: this.label, + }; + } +} + +export { UniqueValueInfo }; +mapgis.renderer.UniqueValueInfo = UniqueValueInfo; diff --git a/src/service/base/renderer/UniqueValueRenderer.js b/src/service/base/renderer/UniqueValueRenderer.js new file mode 100644 index 000000000..44a68bbef --- /dev/null +++ b/src/service/base/renderer/UniqueValueRenderer.js @@ -0,0 +1,140 @@ +import { mapgis } from '../common/base'; +import { cloneDeep } from 'lodash'; +import { Renderer } from './Renderer'; + +import { PointSymbol3D, PolygonSymbol3D, LineSymbol3D } from "../symbols/index"; + +/** + * 三维专题图-单值专题图 + * @class mapgis.renderer.UniqueValueRenderer + * @classdesc 三维专题图-单值专题图 + * @param {String} [type] 专题图类型，只能是'unique-value' + * @param {String} [field] 专题图字段名称，用来确定分段要素 + * @param {String} [field2] 专题图字段名称，用来确定分段要素 + * @param {String} [field3] 专题图字段名称，用来确定分段要素 + * @param {Symbol} [defaultSymbol] 专题图默认符号样式，用来绘制具有与给定单值不匹配的要素 + * @param {String} [defaultLabel] 专题图图例标签，用来描述分配了默认符号的元素 + * @param {Array} [uniqueValueInfos] 专题图单值信息 + * @param {Array} [visualVariables] 专题图视觉变量，可选 "color"|"opacity"|"size"|"rotation" + * @param {PolygonSymbol3D} [backgroundFillSymbol] 专题图边界变量，使用分级符号对面要素进行符号化时，在此属性上设置以可视化每个要素的边界 + * @param {String} [fieldDelimiter] 专题图字段分隔符，如果指定了多个属性字段，则在值之间插入字符串 + * @param {Object} [legendOptions] 专题图图例选项，用来在图例中展示符号信息 + * @param {String} [valueExpression] 专题图计算表达式，用来对要素中的单/多个属性进行数学计算 + * @param {String} [valueExpressionTitle] 专题图计算表达式标题，在legendOptions属性中没有提供的情况下，将显示为图例中的标题 + */ +export default class UniqueValueRenderer extends Renderer { + constructor(option) { + super(option); + var options = option ? option : {}; + const { type = "unique-value" } = options; + this.type = type; + const { field, field2, field3, defaultSymbol, defaultLabel, uniqueValueInfos, visualVariables, backgroundFillSymbol, fieldDelimiter, legendOptions, valueExpression, valueExpressionTitle } = options; + this.field = field; + this.field2 = field2; + this.field3 = field3; + this.defaultSymbol = defaultSymbol; + this.defaultLabel = defaultLabel; + this.uniqueValueInfos = uniqueValueInfos; + this.visualVariables = visualVariables; + this.backgroundFillSymbol = backgroundFillSymbol; + this.fieldDelimiter = fieldDelimiter; + this.legendOptions = legendOptions; + this.valueExpression = valueExpression; + this.valueExpressionTitle = valueExpressionTitle; + } + + /** + * @description 克隆函数 + */ + clone() { + return cloneDeep(this); + } + + /** + * @description 将JSON格式的渲染规则转换为JS对象 + * @param {Object} json 渲染规则的实例化JSON + */ + fromJSON(json) { + json = json || {}; + const { type = "unique-value" } = json; + this.type = type; + const { field, field2, field3, defaultSymbol, defaultLabel, uniqueValueInfos, visualVariables, backgroundFillSymbol, fieldDelimiter, legendOptions, valueExpression, valueExpressionTitle } = json; + this.field = field; + this.field2 = field2; + this.field3 = field3; + this.defaultSymbol = defaultSymbol; + this.defaultLabel = defaultLabel; + this.uniqueValueInfos = uniqueValueInfos; + this.visualVariables = visualVariables; + this.backgroundFillSymbol = backgroundFillSymbol; + this.fieldDelimiter = fieldDelimiter; + this.legendOptions = legendOptions; + this.valueExpression = valueExpression; + this.valueExpressionTitle = valueExpressionTitle; + } + + /** + * 将JS对象转换为JSON格式 + * @returns {Object} 渲染规则的实例化JSON + */ + toJSON() { + return { + type: this.type, + field: this.field, + field2: this.field2, + field3: this.field3, + defaultSymbol: this.defaultSymbol, + defaultLabel: this.defaultLabel, + uniqueValueInfos: this.uniqueValueInfos, + visualVariables: this.visualVariables, + backgroundFillSymbol: this.backgroundFillSymbol, + fieldDelimiter: this.fieldDelimiter, + legendOptions: this.legendOptions, + valueExpression: this.valueExpression, + valueExpressionTitle: this.valueExpressionTitle, + }; + } + + /** + * @description 添加单值信息 + * @param {Object} info 单值信息的实例化对象 + */ + addUniqueValueInfo(info) { + info = info || {}; + this.uniqueValueInfos.push(info); + } + + /** + * @description 获取单值信息 + * @param {Object} info 单值信息的实例化对象 + * @returns {Object} 根据info查询到的单值信息 + */ + getUniqueValueInfo(info) { + info = info || {}; + const { value, symbol, label } = info; + for(let i = 0; i < this.uniqueValueInfos.length; i++) { + let item = this.uniqueValueInfos[i]; + if (item.value == value) { + return item; + } + } + } + + /** + * @description 移除单值信息 + * @param {Object} json 渲染规则的实例化JSON + */ + removeUniqueValueInfo(info) { + info = info || {}; + const { value, symbol, label } = info; + for(let i = 0; i < this.uniqueValueInfos.length; i++) { + let item = this.uniqueValueInfos[i]; + if (item.value == value) { + this.uniqueValueInfos.splice(i, 1); + } + } + } +} + +export { UniqueValueRenderer }; +mapgis.renderer.UniqueValueRenderer = UniqueValueRenderer; diff --git a/src/service/base/renderer/VisualVariable.js b/src/service/base/renderer/VisualVariable.js new file mode 100644 index 000000000..51146dc23 --- /dev/null +++ b/src/service/base/renderer/VisualVariable.js @@ -0,0 +1,54 @@ +import { mapgis } from '../common/base'; + +/** + * 视觉变量基类 + * @class mapgis.renderer.VisualVariable + * @classdesc 视觉变量基类 + * @param {String} [type] 视觉变量类型，可选 "color"|"opacity"|"rotation"|"size" + * @param {String} [field] 字段名称，包含用于确定每个要素的颜色/不透明度/大小/旋转的数据值的数字属性字段的名称 + * @param {Object} [legendOptions] 图例选项，用来在图例中展示视觉变量信息 + * @param {String} [valueExpression] 计算表达式，用来对要素中的单/多个属性进行数学计算 + * @param {String} [valueExpressionTitle] 计算表达式标题，在legendOptions属性中没有提供的情况下，将显示为图例中的标题 + */ +export default class VisualVariable { + constructor(option) { + var options = option ? option : {}; + const { type, field, legendOptions, valueExpression, valueExpressionTitle } = options; + this.type = type; + this.field = field; + this.legendOptions = legendOptions; + this.valueExpression = valueExpression; + this.valueExpressionTitle = valueExpressionTitle; + } + + /** + * @description 将JSON格式的视觉变量转换为JS对象 + * @param {Object} json 视觉变量的实例化JSON + */ + fromJSON(json) { + json = json || {}; + const { type, field, legendOptions, valueExpression, valueExpressionTitle } = json; + this.type = type; + this.field = field; + this.legendOptions = legendOptions; + this.valueExpression = valueExpression; + this.valueExpressionTitle = valueExpressionTitle; + } + + /** + * 将JS对象转换为JSON格式 + * @returns {Object} 视觉变量的实例化JSON + */ + toJSON() { + return { + type: this.type, + field: this.field, + legendOptions: this.legendOptions, + valueExpression: this.valueExpression, + valueExpressionTitle: this.valueExpressionTitle, + }; + } +} + +export { VisualVariable }; +mapgis.renderer.VisualVariable = VisualVariable; diff --git a/src/service/base/renderer/index.js b/src/service/base/renderer/index.js new file mode 100644 index 000000000..07ac0dbb5 --- /dev/null +++ b/src/service/base/renderer/index.js @@ -0,0 +1,41 @@ +// 原子级专题图渲染规则 +import { Renderer } from "./Renderer"; + +// 原子级专题图信息 +import { UniqueValueInfo } from "./UniqueValueInfo"; +import { ClassBreakInfo } from "./ClassBreakInfo"; + +// 原子级专题图视觉变量 +import { VisualVariable } from "./VisualVariable"; + +// 三维专题图渲染规则 +import { SimpleRenderer } from "./SimpleRenderer"; +import { UniqueValueRenderer } from "./UniqueValueRenderer"; +import { ClassBreaksRenderer } from "./ClassBreaksRenderer"; + +// 三维专题图视觉变量 +import { ColorVariable } from "./ColorVariable"; +import { OpacityVariable } from "./OpacityVariable"; +import { SizeVariable } from "./SizeVariable"; +import { RotationVariable } from "./RotationVariable"; + +// 原子级专题图渲染规则 +export { Renderer }; + +// 原子级专题图信息 +export { UniqueValueInfo }; +export { ClassBreakInfo }; + +// 原子级专题图视觉变量 +export { VisualVariable }; + +// 三维专题图渲染规则 +export { SimpleRenderer }; +export { UniqueValueRenderer }; +export { ClassBreaksRenderer }; + +// 三维专题图视觉变量 +export { ColorVariable }; +export { OpacityVariable }; +export { SizeVariable }; +export { RotationVariable }; diff --git a/src/service/base/style/Enum.js b/src/service/base/style/Enum.js new file mode 100644 index 000000000..1f5f29d56 --- /dev/null +++ b/src/service/base/style/Enum.js @@ -0,0 +1,205 @@ +/** + * @enum MarkStyle + * @description 标注样式 + */ +export const MarkStyle = { + circle: 'circle', + cross: 'cross', + diamond: 'diamond', + square: 'square', + triangle: 'triangle', + x: 'x' +}; + +/** + * @enum LineStyle + * @description 标注样式 + */ +export const LineStyle = { + dash: 'dash', + 'dash-dot': 'dash-dot', + dot: 'dot', + 'long-dash': 'long-dash', + 'long-dash-dot': 'long-dash-dot', + 'long-dash-dot-dot': 'long-dash-dot-dot', + none: 'none', + 'short-dash': 'short-dash', + 'short-dash-dot': 'short-dash-dot', + 'short-dash-dot-dot': 'short-dash-dot-dot', + 'short-dot': 'short-dot', + solid: 'solid' +}; + +/** + * @enum LineMarkerStyle + * @description 线样式 + */ +export const LineMarkerStyle = { + arrow: 'arrow', + circle: 'circle', + square: 'square', + diamond: 'diamond', + cross: 'cross', + x: 'x' +}; + +/** + * @enum FillStyle + * @description 填充样式 + */ +export const FillStyle = { + 'backward-diagonal': 'backward-diagonal', + cross: 'cross', + 'diagonal-cross': 'diagonal-cross', + 'forward-diagonal': 'forward-diagonal', + horizontal: 'horizontal', + none: 'none', + solid: 'solid', + vertical: 'vertical' +}; + +/** + * @enum FontStyle + * @description 字体样式 + */ +export const FontStyle = { + normal: 'normal', + italic: 'italic', + oblique: 'oblique' +}; + +/** + * @enum FontWeight + * @description 字体权重 + */ +export const FontWeight = { + normal: 'normal', + bold: 'bold', + bolder: 'bolder', + lighter: 'lighter' +}; + +/** + * @enum FontDecoration + * @description 字体权重 + */ +export const FontDecoration = { + underline: 'underline', + 'line-through': 'line-through', + none: 'none' +}; + +/** + * @enum HorizontalAlignment + * @description 水平对齐方向 + */ +export const HorizontalAlignment = { + left: 'left', + center: 'center', + right: 'right' +}; + +/** + * @enum VerticalAlignment + * @description 竖直对齐方向 + */ +export const VerticalAlignment = { + baseline: 'baseline', + top: 'top', + middle: 'middle', + bottom: 'bottom' +}; + +/** + * @enum Cap + * @description 线头类型 + */ +export const Cap = { + /** + * 尖头 + */ + butt: 'butt', + /** + * 圆头 + */ + round: 'round', + /** + * 平头 + */ + square: 'square', + /** + * 无，仅三维生效 + */ + none: 'none' +}; + +/** + * @enum Join + * @description 拐角类型 + */ +export const Join = { + /** + * 平拐 + */ + bevel: 'bevel', + /** + * 圆拐 + */ + round: 'round', + /** + * 棱拐 + */ + miter: 'miter' +}; + +/** + * @enum LineMarkerPlacement + * @description 标记线标记点位置 + */ +export const LineMarkerPlacement = { + begin: 'begin', + end: 'end', + 'begin-end': 'begin-end' +}; + +/** + * @enum Anchor + * @description 锚点方向 + */ +export const Anchor = { + center: 'center', + left: 'left', + right: 'right', + top: 'top', + bottom: 'bottom', + 'top-left': 'top-left', + 'top-right': 'top-right', + 'bottom-left': 'bottom-left', + 'bottom-right': 'bottom-right', + origin: 'origin', + relative: 'relative' +}; +/** + * @enum Align + * @description 对齐方向 + */ +export const Align = { + left: 'left', + center: 'center', + right: 'right' +}; + +/** + * @enum TextPlacement + * @description 文字方向 mapboxgl引擎特有属性 + */ +export const TextPlacement = { + /** + * 中心点/静态注记 + */ + point: 'point', + /** + * 动态注记-沿线方向 + */ + line: 'line' +}; diff --git a/src/service/base/style/ExtrudeStyle.js b/src/service/base/style/ExtrudeStyle.js new file mode 100644 index 000000000..a07396a10 --- /dev/null +++ b/src/service/base/style/ExtrudeStyle.js @@ -0,0 +1,70 @@ +import { extend } from '../../common/Util'; +import { mapgis } from '../common/base'; +import { Symbol } from './Symbol'; +import { Graphic } from './Graphic'; + +/** + * 拉伸体样式 + * @class mapgis.symbols.ExtrudeStyle + * @classdesc 拉伸体样式 + * @param {String} [color = #FFFFFF] 拉伸体外边线颜色，16进制颜色或rgb值或rgba值，默认#FFFFFF，白色 + * @param {Object} [shadowStyle = undefined] 阴影样式，默认undefined + * @param {Object} [symbolStyle = undefined] 填充图案样式，默认undefined + * @param {Object} [outlineSymbolStyle = undefined] 拉伸体外边线填充图案样式，默认undefined + */ +export default class ExtrudeStyle extends Symbol { + constructor(option) { + super(); + var options = option ? option : {}; + const { color = '#FFFFFF', opacity = 1.0, symbol } = options; + const { castShadows = true, edges, size = 1, material } = options; + + this.type = 'extrude'; + + this.color = color; + this.opacity = opacity; + this.symbolStyle = symbol || new Graphic(); + + this.castShadows = castShadows; + this.edges = edges; + this.material = material || color; + this.size = size; + + extend(this, options); + } + + /** + * @param {Boolean} [highlight = false] 是否激活高亮样式 + * @link https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#fill-extrusion + * @returns MapboxGL线格式的样式 + */ + toMapboxStyle(options) { + options = options || {}; + const { highlight = false } = options; + let { material, size, opacity, symbolStyle } = this; + const { pattern, xoffset, yoffset } = symbolStyle; + let style = { + filter: ['==', '$type', 'Polygon'], + paint: { + 'fill-extrusion-base': 0, + 'fill-extrusion-color': material, + 'fill-extrusion-height': size, + 'fill-extrusion-opacity': opacity, + 'fill-extrusion-translate': [xoffset, yoffset], + 'fill-extrusion-translate-anchor': 'map', + 'fill-extrusion-vertical-gradient': true + } + }; + if (symbolStyle && pattern) { + style.paint['fill-extrusion-pattern'] = pattern; + } + if (highlight) { + style.paint['fill-extrusion-color'] = ['case', ['boolean', ['feature-state', 'hover'], false], material, 'rgba(0,0,0,0)']; + style.paint['fill-extrusion-base'] = ['case', ['boolean', ['feature-state', 'hover'], false], 100, 0]; + } + return style; + } +} + +export { ExtrudeStyle }; +mapgis.symbols.ExtrudeStyle = ExtrudeStyle; diff --git a/src/service/base/style/FillStyle.js b/src/service/base/style/FillStyle.js new file mode 100644 index 000000000..3e3ecb8e5 --- /dev/null +++ b/src/service/base/style/FillStyle.js @@ -0,0 +1,89 @@ +import { extend } from '../../common/Util'; +import { mapgis } from '../common/base'; +import { VectorStyle } from './VectorStyle'; +import { Graphic } from './Graphic'; +import { Shadow } from './Shadow'; + +/** + * 多边形样式 + * @class mapgis.style.FillStyle + * @classdesc 多边形样式 + * @param {Number} [outlineWidth = 0] 多边形外边线宽度，默认为1 + * @param {String} [outlineColor = #FFFFFF] 多边形外边线颜色，16进制颜色或rgb值或rgba值，默认#FFFFFF，白色 + * @param {String} [outlineDashArray = line] 多边形外边线样式，默认line，即实线 + * @param {Object} [shadowStyle = undefined] 阴影样式，默认undefined + * @param {Object} [symbolStyle = undefined] 填充图案样式，默认undefined + * @param {Object} [outlineSymbolStyle = undefined] 多边形外边线填充图案样式，默认undefined + */ +export default class FillStyle extends VectorStyle { + constructor(option) { + super(); + var options = option ? option : {}; + const { + outlineWidth = 1, + outlineColor = '#FFFFFF', + outlineDashArray = 'line', + offsetX = 0, + offsetY = 0, + shadow, + symbol, + outlineSymbolStyle + } = options; + this.type = 'fill'; + this.outlineWidth = outlineWidth; + this.outlineColor = outlineColor; + this.outlineDashArray = outlineDashArray; + this.offsetX = offsetX; + this.offsetY = offsetY; + this.shadowStyle = shadow || new Shadow(); + this.symbolStyle = symbol || new Graphic(); + this.outlineSymbolStyle = outlineSymbolStyle || new Graphic(); + extend(this, options); + } + + /** + * @param {Boolean} [highlight = false] 是否激活高亮样式 + * @link https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#fill + * @returns MapboxGL线格式的样式 + */ + toMapboxStyle(options) { + options = options || {}; + const { highlight = false } = options; + let { color, opacity, outlineColor, symbolStyle, offsetX, offsetY } = this; + let style = { + filter: ['==', '$type', 'Polygon'], + paint: { + 'fill-antialias': true, //抗锯齿，true表示针对边界缝隙进行填充 + 'fill-color': color, + 'fill-opacity': opacity, + 'fill-outline-color': outlineColor + } + }; + if (symbolStyle && symbolStyle.symbol) { + style.paint['fill-pattern'] = symbolStyle.symbol; + } + if (offsetX || offsetY) { + style.paint['fill-translate'] = [offsetX, offsetY]; + } + if (highlight) { + // mapbox 区高亮用的是line的样式，因此此处不做处理 + style.paint['fill-color'] = ['case', ['boolean', ['feature-state', 'hover'], false], color, 'rgba(0,0,0,0)']; + style.paint['fill-outline-color'] = ['case', ['boolean', ['feature-state', 'hover'], false], outlineColor, 'rgba(0,0,0,0)']; + } + return style; + } + + /** + * @link https://sandcastle.cesium.com/index.html?src=Polygon.html + * @returns Cesium区格式的样式 + */ + toCesiumStyle(Cesium) { + let { color, opacity, outlineColor } = this; + let material = new Cesium.ColorMaterialProperty(Cesium.Color.fromCssColorString(color).withAlpha(opacity)); + let outline = new Cesium.Color.fromCssColorString(outlineColor); + return { material, outlineColor: outline }; + } +} + +export { FillStyle }; +mapgis.style.FillStyle = FillStyle; diff --git a/src/service/base/style/FontStyle.js b/src/service/base/style/FontStyle.js new file mode 100644 index 000000000..9be547c97 --- /dev/null +++ b/src/service/base/style/FontStyle.js @@ -0,0 +1,27 @@ +import { extend } from '../../common/Util'; +import { mapgis } from '../common/base'; + +/** + * 符号样式 + * @class mapgis.style.FontStyle + * @classdesc 符号样式 + * @param {String} [family = 黑体] 字体类型 + * @param {Number} [size = 16] 字体大小 + * @param {String} [style = normal] 字体样式: "normal" 常规 | "italic" 斜体 | "oblique" + * @param {String} [weight = normal] Y轴偏移 + */ +export default class FontStyle { + constructor(option) { + var options = option ? option : {}; + const { family = '黑体', size = 12, style = 'normal', weight = 'normal' } = options; + // this.decoration; 暂不支持 + this.family = family; + this.size = size; + this.style = style; + this.weight = weight; + extend(this, options); + } +} + +export { FontStyle }; +mapgis.style.FontStyle = FontStyle; diff --git a/src/service/base/style/Graphic.js b/src/service/base/style/Graphic.js new file mode 100644 index 000000000..1fa1a7a7d --- /dev/null +++ b/src/service/base/style/Graphic.js @@ -0,0 +1,40 @@ +import { extend } from '../../common/Util'; +import { mapgis } from '../common/base'; +import { Anchor } from './Enum'; + +/** + * 符号样式 + * @class mapgis.style.GraphicStyle + * @classdesc 符号样式 + * @param {String} [pattern = ""] 符号名称或url + * @param {Number} [opacity = 1] 透明度，0~1之间的值，默认为1，不透明 + * @param {String} [color = #FFFFFF] 颜色，十六进制或RGB，默认为#FFFFFF，白色 + * @param {Number} [size = 1] 符号大小 + * @param {Number} [rotate = 0] 旋转角度，0~360度 + * @param {Number} [offsetX = 0] X轴偏移 + * @param {Number} [offsetY = 0] Y轴偏移 + * @param {String} [anchor = center] 锚点 + */ +export default class Graphic { + constructor(option) { + var options = option ? option : {}; + const { pattern = undefined, opacity = 1.0, allowOverlap = false } = options; + const { color = '#FFFFFF', size = 1, rotate = 0 } = options; + const { xoffset = 0, yoffset = 0 } = options; + + this.allowOverlap = allowOverlap; + this.pattern = pattern; + this.opacity = opacity; + this.color = color; + this.size = size; + this.rotate = rotate; + this.xoffset = xoffset; + this.yoffset = yoffset; + this.anchor = Anchor.center; + + extend(this, options); + } +} + +export { Graphic }; +mapgis.style.GraphicStyle = Graphic; diff --git a/src/service/base/style/LineStyle.js b/src/service/base/style/LineStyle.js new file mode 100644 index 000000000..de22a09d0 --- /dev/null +++ b/src/service/base/style/LineStyle.js @@ -0,0 +1,107 @@ +import { extend } from '../../common'; +import { mapgis } from '../common/base'; +import { VectorStyle } from './VectorStyle'; +import { Cap, Join } from './Enum'; +import { Shadow } from './Shadow'; +import { Graphic } from './Graphic'; + +/** + * 线样式 + * @class mapgis.style.LineStyle + * @classdesc 线样式 + * @param {Number} [width = 1] 线宽度，默认为1 + * @param {String} [type = 'line'] 线的样式，默认line，即为实线 + * @param {String} [dashArray = [5, 5]] 虚实组合关系 + * @param {String} [cap = butt] 线头样式，默认butt + * @param {String} [join = miter] 拐角样式，默认miter + * @param {Object} [shadowStyle = undefined] 阴影样式，默认undefined + */ +export default class LineStyle extends VectorStyle { + constructor(option) { + super(); + var options = option ? option : {}; + const { + width = 1, + dashArray, + cap = Cap.butt, + join = Join.miter, + shadow, + symbol + } = options; + this.type = 'line'; + this.width = width; + this.dashArray = dashArray; + this.cap = cap; + this.join = join; + this.shadowStyle = shadow || new Shadow(); + this.symbolStyle = symbol || new Graphic(); + extend(this, options); + } + + /** + * @param {Boolean} [highlight = false] 是否激活高亮样式 + * @link https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#line + * @returns MapboxGL线格式的样式 + */ + toMapboxStyle(options) { + options = options || {}; + const { highlight = false } = options; + let { color, opacity, width, cap, join, blur, dashArray, shadowStyle, symbolStyle } = this; + if (shadowStyle) { + blur = shadowStyle.blur; + width = width + blur; + } + let style = { + filter: ['==', '$type', 'LineString'], + layout: { + 'line-cap': cap, + 'line-join': join + }, + paint: { + 'line-width': width, + 'line-color': color, + 'line-opacity': opacity, //透明度 `0 ~ 1.0` + 'line-blur': blur + } + }; + if (symbolStyle && symbolStyle.symbol) { + style.paint['line-pattern'] = symbolStyle.symbol; + } + if (dashArray) { + style.paint['line-dasharray'] = dashArray; + } + if (highlight) { + style.paint['line-width'] = ['case', ['boolean', ['feature-state', 'hover'], false], width, 0]; + } + return style; + } + + /** + * @link https://sandcastle.cesium.com/index.html?src=Polyline.html&label=Geometries + * @returns Cesium线格式的样式 + */ + toCesiumStyle(Cesium) { + let material; + let { dashArray, shadowStyle, color, opacity, width } = this; + // PolylineArrowMaterialProperty + if (dashArray) { + material = new Cesium.PolylineDashMaterialProperty({ + color: Cesium.Color.fromCssColorString(color) + }); + } else if (shadowStyle && shadowStyle.blur > 0) { + width = width + shadowStyle.blur; + material = new Cesium.PolylineGlowMaterialProperty({ + glowPower: 0.2, + taperPower: 0.5, + color: Cesium.Color.fromCssColorString(shadowStyle.color) + }); + } else { + material = new Cesium.ColorMaterialProperty(Cesium.Color.fromCssColorString(color).withAlpha(opacity)); + } + + return { material, width }; + } +} + +export { LineStyle }; +mapgis.style.LineStyle = LineStyle; diff --git a/src/service/base/style/MarkerStyle.js b/src/service/base/style/MarkerStyle.js new file mode 100644 index 000000000..491c48d42 --- /dev/null +++ b/src/service/base/style/MarkerStyle.js @@ -0,0 +1,118 @@ +import { mapgis } from '../common/base'; + +import { Symbol } from './Symbol'; +import { Graphic } from './Graphic'; + +const DefaultMarkerImagePlotting = + 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAuCAYAAABEbmvDAAAAAXNSR0IB2cksfwAAAAlwSFlzAAASdAAAEnQB3mYfeAAABjNJREFUeJztWF1MFFcUnsSY8NjEmJj0xRfTJk19sEkfffGpsWn9Q5HFYX9nd9lZVkgb2/ovC11cRRRYQLYIrAK2WrUNVK3SqtFapU1t0xrTRK1UrEbEv/fT75thXWphf2DAh/YmX2Zn5t5zv3vOd86du4ryf5um9uTJkwWPHj3SHj58uHl4eLg5Cd7z+ePHj99++vTpnGkhw4k46YMHD768OXBb4ke/kffrD0tReL8s/iBuXEtqDsru7pNy5ervMjQ01E+iXMSUkSIhTvTpyQuyqLxZZi6pFmVprSjL6kRZ1STKymZcgZUxPNstyrvbZb6vXiIdPXL33j0hQUs9SGMM0ZnLv8jCtY2iLNlhEihoFcXWIUpRAtdRMO7x3NaGfi0G+bnqTsO79LQl3qMRGosdOiV5y6pNz3BCTl7cOYKuMTDyjv2K2kVZDYLvRKW4KiGDd/4S6m9SniKp8rrPjLAYxlV4ovhAipC9e3zwvaMrRbDgEyPEb5bsket/DEycHMMXSfQiFAidDUbtMO7oNCdzdo/gYBqM9GF/jlPpPXg7v04WlsUM3eUcVgr1SN9FmbEkIkrhKE/9g1QOMDx3wFycCnJLd4nj44ShuaxJcRXUwVw7PQVNqdCIYz8m6DLh7s4dybEuksMi18SRRBH54ttLwmzP2ltMcWVFDUjtA6mEadCFcLi6JoFOE1wkvVYQk/neWqPWZSwj7MDYzy5EBhahJNhhwAVD7k4LQUnQa9AtamFHz9nMXmOH/b1nRVmOLFQx0NFuGiI8ndYgScyOaBTWy1vrmjJrjZlYHMGgAlRuJwa68NsDQ95O60B7bsqjzYhKXn6lkaFpw0nmbwRBytaQIqYxlFYDxDyIhh1JsDwifd//NHZdI1uCQpxlQ4lQkY1ObDkaiSVMclbCzUi0mcRWRiV+7PTYOhshJvfv35eZS7eh5kD4rlZzsDdhPbhgFyJiR41cFZWart60xAyP5eVvxQBs1k6sRiOxDuuhIYweLNyxFx6rlr1HT6XPTGpsfgCFVcWnjKvFHOwluXaLAZseZL2bn0qVcvx8f/q9k1mp10IDRTsxEKvRMNgPI/52CwF7GmWChTtj8tKacOaspDt7zl3CKsIYiATQEE4fjPihB59FMGxhwR54a02NrKhoyVzHyBoJMDjXWQWdoWxo8JqfXgO5kn2TB+0QGmUCHReE5XDfhez2S4ZzW/sR1DKUDW9jilyg1Rr4Wsxo2GvlVV81K8FgVp/cFOHNgT9lVnEFsgZe88KID+QCIKe3ThwcT3gRQi/OBYWV0nD4hHEWyEhqtNc+iuPL1YaQerEL+GHMj5UG4hMHx/uxQB9LUY28pm/P/WORXrs9eEde1irhdpyESppMcjqM6/EJgIvaa9rRUIpWb5VDfedz89ZorzV8fhyZg5CW1ANYqQ5ypZgkFM8e7K9TClwcQuiMyqINddlr6/lGF3Pw6yEkgQd1LQCjOowHMUmoJXsER5HSamVm4Sa5eOXX7L9cx2p09bEz38kMdQu0hpDqSXLN2YP9Oc63BztKWEINB3L71h+rJfdPdTtC4oDecPQyJglhslIg1Dw+jPfsBwkEkUDaDplXUinU7qTOlclGl9+4NSBz3FsM40oQetMxUajRnDgtGs3+vhqZYdsoX124PDHBj9eYCG29p5EIm+C1XfACJgvFzInLmv4Ng3TM7BeABBwV4q9rz+7gkUtLJsLirUh1e9ic7Bk5oKwxheQzvtcRencEIaywLoTPN4b02vUbMtu9GYmAU1QpJg2RHMK6NpYC7/mc7/1RyVPXy7kff7Y2hM83hrT7a5yi1A3GpEoptqwykFjbkALv+dzH77qNUnuoZ/JZmKk9y9Id3IhReAOob6E9JpnyEVK853NXhSyvajAK6ZT+cZds1MnA7UGZF8AnuIa9VMeJvRSaC+02r7zHc75nNk+qkObaqJezP1yRvOIPkaXYGUpBJrjLvOKez/l+SnU1Vkv+dxY9eAwnqvUIHU7uwah5xT2f8/20/Tk8ulE31NuyKujKhfrmrTSuqyIxo15Ni67Ga9TbLejtFR0lRF0nC8rDcufu3ampV7k2eqb/t2syz/WeXL1+M/1p50W0oeHh/hfN4b/d/gYnm2n24iputAAAAABJRU5ErkJggg=='; + +/** + * 点样式 + * @class mapgis.style.PointStyle + * @classdesc 点样式 + * @param {Number} [symbol] 符号样式 + * @param {Number} [size] 符号大小 + */ +export default class MarkerStyle extends Symbol { + constructor(option) { + super(); + var options = option ? option : {}; + const { symbol, size = 1.0, show = true } = options; + this.type = 'marker'; + this.show = show; + this.size = size; + this.symbol = symbol || new Graphic({ symbol: DefaultMarkerImagePlotting }); + } + + /** + * @param {Boolean} [highlight = false] 是否激活高亮样式 + * @link https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#symbol + * @returns MapboxGL点格式的样式 + */ + toMapboxStyle(options) { + options = options || {}; + const { highlight = false } = options; + const { symbol } = this; + const { allowOverlap, color, pattern, opacity } = symbol; + const { size, rotate, xoffset, yoffset } = symbol; + + let mapstyle = { + paint: { + 'icon-color': color, + 'icon-opacity': opacity + }, + layout: { + 'icon-allow-overlap': allowOverlap, + 'icon-offset': [xoffset, yoffset], + 'icon-size': size, + 'icon-rotate': rotate + } + }; + if (pattern) { + mapstyle.layout['icon-image'] = pattern; + } + if (highlight) { + } + return mapstyle; + } + + /** + * @link https://sandcastle.cesium.com/index.html?src=Circles%20and%20Ellipses.html&label=Geometries + * @returns Cesium点格式的样式 + */ + toCesiumStyle(options, feature, Cesium) { + const { + field = '', + scale = 1, + backgroundColor = '#FFFFFF', + backgroundOpacity = 0, + color = '#FFFFFF', + opacity = 1, + outlineColor = '#FFFFFF', + outlineOpacity = 1, + outlineWidth = 0, + xOffset = 0, + yOffset = 0, + text, + show = true + } = options; + const { url = '', rotation = 0, imageScale = 1, width, height } = options; + let labelText; + if (field && feature.properties && feature.properties[field]) { + labelText = feature.properties[field]; + } + if (text) { + labelText = text; + } + let billboard = { + show: show, + image: url, + rotation: rotation, + scale: imageScale, + pixelOffset: new Cesium.Cartesian2(xOffset, yOffset) + }; + if (width) { + billboard.width = width; + } + if (height) { + billboard.height = height; + } + return { + label: { + show: show, + text: labelText, + scale: scale, + showBackground: true, + fillColor: Cesium.Color.fromCssColorString(color).withAlpha(opacity), + outlineColor: Cesium.Color.fromCssColorString(outlineColor).withAlpha(outlineOpacity), + outlineWidth: outlineWidth, + backgroundColor: Cesium.Color.fromCssColorString(backgroundColor).withAlpha(backgroundOpacity), + pixelOffset: new Cesium.Cartesian2(xOffset, yOffset * -1) + }, + billboard: billboard + }; + } +} + +export { MarkerStyle }; +mapgis.symbols.MarkerStyle = MarkerStyle; diff --git a/src/service/base/style/ModelStyle.js b/src/service/base/style/ModelStyle.js new file mode 100644 index 000000000..8145f702c --- /dev/null +++ b/src/service/base/style/ModelStyle.js @@ -0,0 +1,45 @@ +import { extend } from '../../common/Util'; +import { mapgis } from '../common/base'; +import { VectorStyle } from './VectorStyle'; +import { Anchor } from './Enum'; + +/** + * 模型样式 + * @class mapgis.style.ModelStyle + * @classdesc 模型样式 + * @param {Number} [radius = 1] 半径 + * @param {Number} [outlineWidth = 0] 外边线宽度，默认0，没有外边线 + * @param {String} [outlineColor = #FFFFFF] 外边线颜色，16进制颜色或rgb值或rgba值，默认#FFFFFF，白色 + * @param {String} [anchor = center] 锚点，默center + */ +export default class ModelStyle extends VectorStyle { + constructor(option) { + super(); + let options = option ? option : {}; + const { scale = 1, url, show = true } = options; + this.type = 'model'; + this.url = url; + this.scale = scale; + this.show = show; + extend(this, options); + } + + toMapboxStyle() { + } + + /** + * @link https://sandcastle.cesium.com/index.html?src=Circles%20and%20Ellipses.html&label=Geometries + * @returns Cesium点格式的样式 + */ + toCesiumStyle(Cesium) { + let { url, scale, show = true } = this; + return { + uri: url, + show: show, + scale: scale + }; + } +} + +export { ModelStyle }; +mapgis.style.ModelStyle = ModelStyle; diff --git a/src/service/base/style/PointStyle.js b/src/service/base/style/PointStyle.js new file mode 100644 index 000000000..c1c89e57c --- /dev/null +++ b/src/service/base/style/PointStyle.js @@ -0,0 +1,74 @@ +import { extend } from '../../common/Util'; +import { mapgis } from '../common/base'; +import { VectorStyle } from './VectorStyle'; +import { Anchor } from './Enum'; + +/** + * 点样式 + * @class mapgis.style.PointStyle + * @classdesc 点样式 + * @param {Number} [radius = 1] 半径 + * @param {Number} [outlineWidth = 0] 外边线宽度，默认0，没有外边线 + * @param {String} [outlineColor = #FFFFFF] 外边线颜色，16进制颜色或rgb值或rgba值，默认#FFFFFF，白色 + * @param {String} [anchor = center] 锚点，默center + */ +export default class PointStyle extends VectorStyle { + constructor(option) { + super(); + var options = option ? option : {}; + const { radius = 5, opacity = 1, outlineColor = '#FFFFFF', outlineWidth = 0, anchor = Anchor.center, outlineOpacity = 1, show = true } = options; + this.type = 'point'; + this.radius = radius; + this.opacity = opacity; + this.outlineColor = outlineColor; + this.outlineWidth = outlineWidth; + this.outlineOpacity = outlineOpacity; + this.anchor = anchor; + this.show = show; + extend(this, options); + } + + /** + * @param {Boolean} [highlight = false] 是否激活高亮样式 + * @link https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#circle + * @returns MapboxGL点格式的样式 + */ + toMapboxStyle(options) { + options = options || {}; + const { highlight = false } = options; + const { color, opacity, radius, outlineColor, outlineWidth } = this; + let style = { + filter: ['==', '$type', 'Point'], + paint: { + 'circle-radius': radius, + 'circle-color': color, + 'circle-opacity': opacity, + 'circle-stroke-width': outlineWidth, + 'circle-stroke-color': outlineColor + } + }; + if (highlight) { + style.paint['circle-color'] = ['case', ['boolean', ['feature-state', 'hover'], false], color, 'rgba(0, 0, 0, 0)']; + style.paint['circle-stroke-width'] = ['case', ['boolean', ['feature-state', 'hover'], false], outlineWidth, 0]; + } + return style; + } + + /** + * @link https://sandcastle.cesium.com/index.html?src=Circles%20and%20Ellipses.html&label=Geometries + * @returns Cesium点格式的样式 + */ + toCesiumStyle(Cesium) { + let { color = "#FFFFFF", opacity = 1, radius, outlineColor = "#000000", outlineWidth = 1, outlineOpacity = 1, show = true } = this; + return { + show: show, + pixelSize: radius, + color: Cesium.Color.fromCssColorString(color).withAlpha(opacity), + outlineWidth: outlineWidth, + outlineColor: Cesium.Color.fromCssColorString(outlineColor).withAlpha(outlineOpacity), + }; + } +} + +export { PointStyle }; +mapgis.style.PointStyle = PointStyle; diff --git a/src/service/base/style/Shadow.js b/src/service/base/style/Shadow.js new file mode 100644 index 000000000..4c879ff43 --- /dev/null +++ b/src/service/base/style/Shadow.js @@ -0,0 +1,26 @@ +import { extend } from '../../common/Util'; +import { mapgis } from '../common/base'; + +/** + * 阴影样式 + * @class mapgis.style.Shadow + * @classdesc 阴影样式 + * @param {Number} [blur = 0] 阴影模糊度，默认为0，大于0有效 + * @param {String} [color = #000000] 阴影颜色，16进制颜色或rgb值或rgba值，默认黑色 + * @param {Number} [offsetX = 0] 阴影X轴偏移，默认0 + * @param {Number} [offsetY = 0] 阴影Y轴偏移，默认0 + */ +export default class Shadow { + constructor(option) { + var options = option ? option : {}; + const { blur = 0, color = '#000000', offsetX = 0, offsetY = 0 } = options; + this.blur = blur; + this.color = color; + this.offsetX = offsetX; + this.offsetY = offsetY; + extend(this, options); + } +} + +export { Shadow }; +mapgis.style.Shadow = Shadow; diff --git a/src/service/base/style/Symbol.js b/src/service/base/style/Symbol.js new file mode 100644 index 000000000..87fc60bb6 --- /dev/null +++ b/src/service/base/style/Symbol.js @@ -0,0 +1,40 @@ +import { extend } from '../../common/Util'; +import { mapgis } from '../common/base'; +import { Anchor } from './Enum'; + +/** + * 符号样式 + * @class mapgis.style.SymbolStyle + * @classdesc 符号样式 + * @param {String} [pattern = ""] 符号名称或url + * @param {Number} [opacity = 1] 透明度，0~1之间的值，默认为1，不透明 + * @param {String} [color = #FFFFFF] 颜色，十六进制或RGB，默认为#FFFFFF，白色 + * @param {Number} [size = 1] 符号大小 + * @param {Number} [rotate = 0] 旋转角度，0~360度 + * @param {Number} [offsetX = 0] X轴偏移 + * @param {Number} [offsetY = 0] Y轴偏移 + * @param {String} [anchor = center] 锚点 + */ +export default class Symbol { + constructor(option) { + var options = option ? option : {}; + const { pattern = undefined, opacity = 1.0, allowOverlap = false } = options; + const { color = '#FFFFFF', size = 1, rotate = 0 } = options; + const { xoffset = 0, yoffset = 0 } = options; + + this.allowOverlap = allowOverlap; + this.pattern = pattern; + this.opacity = opacity; + this.color = color; + this.size = size; + this.rotate = rotate; + this.xoffset = xoffset; + this.yoffset = yoffset; + this.anchor = Anchor.center; + + extend(this, options); + } +} + +export { Symbol }; +mapgis.style.SymbolStyle = Symbol; \ No newline at end of file diff --git a/src/service/base/style/TextStyle.js b/src/service/base/style/TextStyle.js new file mode 100644 index 000000000..d009aaa84 --- /dev/null +++ b/src/service/base/style/TextStyle.js @@ -0,0 +1,120 @@ +import { extend } from '../../common/Util'; +import { mapgis } from '../common/base'; +import { FontStyle } from './FontStyle'; +import { VectorStyle } from './VectorStyle'; +import { TextPlacement, HorizontalAlignment, VerticalAlignment } from './Enum'; + +/** + * 点样式 + * @class mapgis.style.TextStyle + * @classdesc 文字样式 + * @param {String} [fontFamily = 宋体] 字体 + * @param {String} [fontColor = #000000] 字体颜色，16进制颜色或rgb值或rgba值，默认#000000，黑色 + * @param {Number} [fontSize = 12] 字体大小，默认12 + * @param {Number} [angle = 0] 文字角度，默认0 + * @param {String} [spacing = 0] 文字间距，默认0 + * @param {Number} [rotate = 0] 文字间距，默认0 + * @param {Number} [xOffset = 0] X轴偏移，默认0 + * @param {Number} [yOffset = 0] Y轴偏移，默认0 + * @param {Number} [lineHeight = 1.2] 行高，默认1.2 + * @param {Number} [maxWidth = 10] 一行最大宽度，默认10 + * @param {Number} [align = center] 对齐方式 + * @param {Number} [haloBlur = 0] 描边模糊度，默认0 + * @param {String} [haloColor = #000000] 描边颜色 + * @param {Number} [haloWidth = 0] 描边宽度 + * @param {String} [placement = point] 文字放置位置，默认point，按点的方式放置 + */ +export default class TextStyle extends VectorStyle { + constructor(option) { + super(); + var options = option ? option : {}; + const { angle = 0, allowOverlap = false } = options; + const { backgroundColor, borderLineColor, borderLineSize } = options; + const { color = '#000000', font } = options; + const { haloColor = '#000000', haloSize = 0, horizontalAlignment = HorizontalAlignment.center } = options; + const { kerning = true, lineHeight = 1.0, lineWidth = 192 } = options; + const { rotated = false, text = '', type = 'text', verticalAlignment = VerticalAlignment.baseline } = options; + const { xoffset = 0, yoffset = 0 } = options; + + this.allowOverlap = allowOverlap; + this.angle = angle; + this.backgroundColor = backgroundColor; + this.borderLineColor = borderLineColor; + this.borderLineSize = borderLineSize; + this.color = color; + this.font = font || new FontStyle(); + this.haloColor = haloColor; + this.haloSize = haloSize; + this.horizontalAlignment = horizontalAlignment; + this.kerning = kerning; + this.lineHeight = lineHeight; + this.lineWidth = lineWidth; + this.rotated = rotated; + this.text = text; + this.type = 'text'; + this.verticalAlignment = verticalAlignment; + this.xoffset = xoffset; + this.yoffset = yoffset; + + extend(this, options); + } + + /** + * @param {Boolean} [highlight = false] 是否激活高亮样式 + * @link https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#symbol + * @returns MapboxGL点格式的样式 + */ + toMapboxStyle(options) { + options = options || {}; + const { highlight = false } = options; + const { angle, allowOverlap, color, font } = this; + const { family, size, style, weight } = font; + const { backgroundColor, borderLineColor, borderLineSize } = this; + const { haloColor, haloSize, horizontalAlignment } = this; + const { kerning, lineHeight, lineWidth } = this; + const { rotated, text, type, verticalAlignment } = this; + const { xoffset, yoffset } = this; + + let mapstyle = { + paint: { + 'text-color': color, + 'text-halo-color': haloColor, + 'text-halo-width': haloSize + }, + layout: { + 'text-rotate': angle, + 'text-font': [family, family], + 'text-line-height': lineHeight, + 'text-max-width': lineWidth, + 'text-field': text, + 'text-offset': [xoffset, yoffset], + 'text-size': size, + 'text-allow-overlap': allowOverlap + } + }; + if (highlight) { + let highsize = size * 1.5; + mapstyle.paint['text-color'] = ['case', ['boolean', ['feature-state', 'hover'], false], color, 'rgba(0, 0, 0, 0)']; + // mapstyle.layout['text-size'] = ['case', ['boolean', ['feature-state', 'hover'], false], highsize, 0]; + } + return mapstyle; + } + + /** + * @link https://sandcastle.cesium.com/index.html?src=Circles%20and%20Ellipses.html&label=Geometries + * @returns Cesium点格式的样式 + */ + toCesiumStyle(Cesium) { + let { color = '#FFFFFF', opacity = 1, radius, outlineColor = '#000000', outlineWidth = 1, outlineOpacity = 1, show = true } = this; + return { + show: show, + pixelSize: radius, + color: Cesium.Color.fromCssColorString(color).withAlpha(opacity), + outlineWidth: outlineWidth, + outlineColor: Cesium.Color.fromCssColorString(outlineColor).withAlpha(outlineOpacity) + }; + } +} + +export { TextStyle }; +mapgis.style.TextStyle = TextStyle; diff --git a/src/service/base/style/TrackStyle.js b/src/service/base/style/TrackStyle.js new file mode 100644 index 000000000..3456467cc --- /dev/null +++ b/src/service/base/style/TrackStyle.js @@ -0,0 +1,132 @@ +import {extend} from '../../common/Util'; +import {mapgis} from '../common/base'; +import {VectorStyle} from './VectorStyle'; +import {Anchor} from './Enum'; + +function hex2int(hex) { + let len = hex.length, a = new Array(len), code; + for (let i = 0; i < len; i++) { + code = hex.charCodeAt(i); + if (48 <= code && code < 58) { + code -= 48; + } else { + code = (code & 0xdf) - 65 + 10; + } + a[i] = code; + } + + return a.reduce(function (acc, c) { + acc = 16 * acc + c; + return acc; + }, 0); +} + +function formatColor(color, opacity) { + let newColor; + if (typeof color === "string") { + if ((color.length === 7 || color.length === 4) && color.indexOf("#") === 0) { + let c1 = color.split("#")[0].substr(0, 2); + c1 = hex2int(c1); + let c2 = color.split("#")[0].substr(2, 2); + c2 = hex2int(c2); + let c3 = color.split("#")[0].substr(4, 2); + c3 = hex2int(c3); + let cp = Math.floor(opacity / 1 * 255); + newColor = [c1, c2, c3, cp]; + } else if (color.indexOf("rgba") === 0) { + let cStr = color.split("rgba(")[1]; + cStr = cStr.split(")")[0]; + let c1 = Number(cStr.split(",")[0]); + let c2 = Number(cStr.split(",")[1]); + let c3 = Number(cStr.split(",")[2]); + let cp = Math.floor(Number(cStr.split(",")[3]) / 1 * 255); + newColor = [c1, c2, c3, cp]; + } else if (color.indexOf("rgb") === 0) { + let cStr = color.split("rgb(")[1]; + cStr = cStr.split(")")[0]; + let c1 = Number(cStr.split(",")[0]); + let c2 = Number(cStr.split(",")[1]); + let c3 = Number(cStr.split(",")[2]); + let cp = Math.floor(opacity / 1 * 255); + newColor = [c1, c2, c3, cp]; + } + } else if (color instanceof Array && color.length === 4) { + newColor = color; + } + return newColor; +} + +/** + * 轨迹样式 + * @class mapgis.style.TrackStyle + * @classdesc 模型样式 + * @param {Number} [radius = 1] 半径 + * @param {Number} [outlineWidth = 0] 外边线宽度，默认0，没有外边线 + * @param {String} [outlineColor = #FFFFFF] 外边线颜色，16进制颜色或rgb值或rgba值，默认#FFFFFF，白色 + * @param {String} [anchor = center] 锚点，默center + */ +export default class TrackStyle extends VectorStyle { + constructor(option) { + super(); + let options = option ? option : {}; + const {show, width, color, opacity, outlineColor, outlineOpacity, outlineWidth} = options; + this.type = 'track'; + this.show = show; + this.width = width; + this.color = color; + this.opacity = opacity; + this.outlineColor = outlineColor; + this.outlineWidth = outlineWidth; + this.outlineOpacity = outlineOpacity; + extend(this, options); + } + + toMapboxStyle() { + } + + /** + * @link https://sandcastle.cesium.com/index.html?src=Circles%20and%20Ellipses.html&label=Geometries + * @returns Cesium点格式的样式 + */ + toCesiumStyle(Cesium) { + const { + show = true, + width = 8, + color = [255, 0, 255], + opacity = 1, + outlineColor = [0, 255, 255], + outlineWidth = 5, + outlineOpacity = 1 + } = this; + let newColor, newOutlineColor; + newColor = formatColor(color, opacity); + newOutlineColor = formatColor(outlineColor, outlineOpacity); + if (!newColor) { + newColor = [255, 0, 255, 255]; + } + if(!newOutlineColor){ + newOutlineColor = [0, 255, 255, 255]; + } + return { + show: show, + material: { + polylineOutline: { + color: { + rgba: newColor, + }, + outlineColor: { + rgba: newOutlineColor, + }, + outlineWidth: outlineWidth, + }, + }, + width: width, + leadTime: 0, + trailTime: 1000, + resolution: 5, + }; + } +} + +export {TrackStyle}; +mapgis.style.TrackStyle = TrackStyle; diff --git a/src/service/base/style/VectorStyle.js b/src/service/base/style/VectorStyle.js new file mode 100644 index 000000000..95dac920b --- /dev/null +++ b/src/service/base/style/VectorStyle.js @@ -0,0 +1,23 @@ +import { extend } from '../../common/Util'; +import { mapgis } from '../common/base'; + +/** + * 矢量样式基类 + * @class mapgis.style.VectorStyle + * @classdesc 矢量样式基类 + * @param {Number} [opacity = 1] 透明度，0~1之间的值，默认为1，不透明 + * @param {String} [color = #FFFFFF] 颜色，十六进制或RGB，默认为#FFFFFF，白色 + */ +export default class VectorStyle { + constructor(option) { + var options = option ? option : {}; + const { opacity = 1, color = '#FFFFFF' } = options; + this.type = undefined; + this.opacity = opacity; + this.color = color; + extend(this, options); + } +} + +export { VectorStyle }; +mapgis.style.VectorStyle = VectorStyle; \ No newline at end of file diff --git a/src/service/base/style/index.js b/src/service/base/style/index.js new file mode 100644 index 000000000..c135135e9 --- /dev/null +++ b/src/service/base/style/index.js @@ -0,0 +1,22 @@ +// 枚举 +import { Align, Anchor, Cap, Join, TextPlacement } from './Enum'; + +// 原子级样式 +import { Symbol } from './Symbol'; +import { Shadow } from './Shadow'; + +// 要素样式 +import { VectorStyle } from './VectorStyle'; +import { PointStyle } from './PointStyle'; +import { MarkerStyle } from './MarkerStyle'; +import { ModelStyle } from './ModelStyle'; +import { TrackStyle } from './TrackStyle'; +import { LineStyle } from './LineStyle'; +import { FillStyle } from './FillStyle'; +import { ExtrudeStyle } from './ExtrudeStyle'; +import { TextStyle } from './TextStyle'; +import { FontStyle } from './FontStyle'; + +export { Align, Anchor, Cap, Join, TextPlacement }; +export { Symbol, Shadow }; +export { VectorStyle, PointStyle, MarkerStyle, ModelStyle, LineStyle, FillStyle, ExtrudeStyle, TextStyle, FontStyle, TrackStyle }; \ No newline at end of file diff --git a/src/service/base/symbols/Enum.js b/src/service/base/symbols/Enum.js new file mode 100644 index 000000000..1f5f29d56 --- /dev/null +++ b/src/service/base/symbols/Enum.js @@ -0,0 +1,205 @@ +/** + * @enum MarkStyle + * @description 标注样式 + */ +export const MarkStyle = { + circle: 'circle', + cross: 'cross', + diamond: 'diamond', + square: 'square', + triangle: 'triangle', + x: 'x' +}; + +/** + * @enum LineStyle + * @description 标注样式 + */ +export const LineStyle = { + dash: 'dash', + 'dash-dot': 'dash-dot', + dot: 'dot', + 'long-dash': 'long-dash', + 'long-dash-dot': 'long-dash-dot', + 'long-dash-dot-dot': 'long-dash-dot-dot', + none: 'none', + 'short-dash': 'short-dash', + 'short-dash-dot': 'short-dash-dot', + 'short-dash-dot-dot': 'short-dash-dot-dot', + 'short-dot': 'short-dot', + solid: 'solid' +}; + +/** + * @enum LineMarkerStyle + * @description 线样式 + */ +export const LineMarkerStyle = { + arrow: 'arrow', + circle: 'circle', + square: 'square', + diamond: 'diamond', + cross: 'cross', + x: 'x' +}; + +/** + * @enum FillStyle + * @description 填充样式 + */ +export const FillStyle = { + 'backward-diagonal': 'backward-diagonal', + cross: 'cross', + 'diagonal-cross': 'diagonal-cross', + 'forward-diagonal': 'forward-diagonal', + horizontal: 'horizontal', + none: 'none', + solid: 'solid', + vertical: 'vertical' +}; + +/** + * @enum FontStyle + * @description 字体样式 + */ +export const FontStyle = { + normal: 'normal', + italic: 'italic', + oblique: 'oblique' +}; + +/** + * @enum FontWeight + * @description 字体权重 + */ +export const FontWeight = { + normal: 'normal', + bold: 'bold', + bolder: 'bolder', + lighter: 'lighter' +}; + +/** + * @enum FontDecoration + * @description 字体权重 + */ +export const FontDecoration = { + underline: 'underline', + 'line-through': 'line-through', + none: 'none' +}; + +/** + * @enum HorizontalAlignment + * @description 水平对齐方向 + */ +export const HorizontalAlignment = { + left: 'left', + center: 'center', + right: 'right' +}; + +/** + * @enum VerticalAlignment + * @description 竖直对齐方向 + */ +export const VerticalAlignment = { + baseline: 'baseline', + top: 'top', + middle: 'middle', + bottom: 'bottom' +}; + +/** + * @enum Cap + * @description 线头类型 + */ +export const Cap = { + /** + * 尖头 + */ + butt: 'butt', + /** + * 圆头 + */ + round: 'round', + /** + * 平头 + */ + square: 'square', + /** + * 无，仅三维生效 + */ + none: 'none' +}; + +/** + * @enum Join + * @description 拐角类型 + */ +export const Join = { + /** + * 平拐 + */ + bevel: 'bevel', + /** + * 圆拐 + */ + round: 'round', + /** + * 棱拐 + */ + miter: 'miter' +}; + +/** + * @enum LineMarkerPlacement + * @description 标记线标记点位置 + */ +export const LineMarkerPlacement = { + begin: 'begin', + end: 'end', + 'begin-end': 'begin-end' +}; + +/** + * @enum Anchor + * @description 锚点方向 + */ +export const Anchor = { + center: 'center', + left: 'left', + right: 'right', + top: 'top', + bottom: 'bottom', + 'top-left': 'top-left', + 'top-right': 'top-right', + 'bottom-left': 'bottom-left', + 'bottom-right': 'bottom-right', + origin: 'origin', + relative: 'relative' +}; +/** + * @enum Align + * @description 对齐方向 + */ +export const Align = { + left: 'left', + center: 'center', + right: 'right' +}; + +/** + * @enum TextPlacement + * @description 文字方向 mapboxgl引擎特有属性 + */ +export const TextPlacement = { + /** + * 中心点/静态注记 + */ + point: 'point', + /** + * 动态注记-沿线方向 + */ + line: 'line' +}; diff --git a/src/service/base/symbols/ExtrudeSymbol3DLayer.js b/src/service/base/symbols/ExtrudeSymbol3DLayer.js new file mode 100644 index 000000000..8d1a35bef --- /dev/null +++ b/src/service/base/symbols/ExtrudeSymbol3DLayer.js @@ -0,0 +1,82 @@ +import { mapgis } from '../common/base'; +import { cloneDeep } from 'lodash'; + +import Symbol3DLayer from './Symbol3DLayer'; + +/** + * 三维线图层 + * @author 基础平台-潘卓然 + * @class mapgis.symbols.ExtrudeSymbol3DLayer + * @classdesc 三维区图层 + * @param {String} [type] 类型,只能是'extrude' + * @param {Object} [castShadows=true] 阴影，默认激活 + * @param {Edges3D} [edges] 轮廓线 + * @param {Object} [material] 材质 + * @param {String} [material.color='rgb(255,255,255)'] 材质-颜色,默认白色 + * @param {Number} [size=1] 大小，当设置sizeField后size不起作用，通过sizeField和sizeRatio计算，若未设置sizeField则直接使用size值 + * @param {Number} [sizeField] 拉伸字段 + * @param {Number} [sizeRatio=1] 拉伸比例 + */ +export default class ExtrudeSymbol3DLayer extends Symbol3DLayer { + constructor(option) { + super(option); + var option = option ? option : {}; + const { castShadows = true, edges = undefined, sizeField = undefined } = option; + const { material = { color: 'rgb(255,255,255)' } } = option; + const { size = 1, sizeRatio = 1 } = option; + + this.type = 'extrude'; + this.castShadows = castShadows; + this.edges = edges; + this.material = material; + this.size = size; + this.sizeField = sizeField; + this.sizeRatio = sizeRatio; + } + + /** + * @description 克隆函数 + */ + clone() { + return cloneDeep(this); + } + + /** + * @description 将JSON格式的符号转换为JS对象 + * @param {Object} json 符号的实例化JSON + */ + fromJSON(json) { + json = json || {}; + const { type = 'extrude' } = json; + const { castShadows = true, edges = undefined, sizeField = undefined } = json; + const { material = { color: 'rgb(255,255,255)' } } = json; + const { size = 1, sizeRatio = 1 } = json; + this.type = type; + + this.castShadows = castShadows; + this.edges = edges; + this.material = material; + this.size = size; + this.sizeField = sizeField; + this.sizeRatio = sizeRatio; + } + + /** + * 将JS对象转换为JSON格式 + * @returns {Object} 符号的实例化JSON + */ + toJSON() { + return { + type: this.type, + castShadows: this.castShadows, + edges: this.edges, + material: this.material, + size: this.size, + sizeField: this.sizeField, + sizeRatio: this.sizeRatio + }; + } +} + +export { ExtrudeSymbol3DLayer }; +mapgis.symbols.ExtrudeSymbol3DLayer = ExtrudeSymbol3DLayer; diff --git a/src/service/base/symbols/FillSymbol.js b/src/service/base/symbols/FillSymbol.js new file mode 100644 index 000000000..a645b30ff --- /dev/null +++ b/src/service/base/symbols/FillSymbol.js @@ -0,0 +1,54 @@ +import { mapgis } from '../common/base'; + +import { Symbol } from './Symbol'; +import SimpleLineSymbol from './SimpleLineSymbol'; + +/** + * 标记符号 + * @author 基础平台-潘卓然 + * @class mapgis.symbols.PointStyle + * @classdesc 线符号 + * @param {String} [type = 'simple-fill'] marker类型:可选值"simple-fill"|"picture-fill" + * @param {SimpleLineSymbol} [outline] 简单标记轮廓线符号 + */ +export default class FillSymbol extends Symbol { + constructor(option) { + super(option); + var options = option ? option : {}; + const { color = 'rgb(0,0,0)', outline = undefined } = options; + this.type = 'simple-fill'; + this.outline = outline ? new SimpleLineSymbol(outline) : undefined; + } + + /** + * @description 将JSON格式的符号转换为JS对象 + * @param {Object} json 符号的实例化JSON + */ + fromJSON(json) { + json = json || {}; + const { opacity = 1.0 } = json; + const { type = 'simple-fill' } = json; + const { outline = undefined } = json; + + // 父类属性Symbol.fromJSON + this.opacity = opacity; + + // 自身属性 + this.type = type; + this.outline = outline; + } + + /** + * 将JS对象转换为JSON格式 + * @returns {Object} 符号的实例化JSON + */ + toJSON() { + return { + type: this.type, + outline: this.outline + }; + } +} + +export { FillSymbol }; +mapgis.symbols.FillSymbol = FillSymbol; diff --git a/src/service/base/symbols/FillSymbol3DLayer.js b/src/service/base/symbols/FillSymbol3DLayer.js new file mode 100644 index 000000000..403401699 --- /dev/null +++ b/src/service/base/symbols/FillSymbol3DLayer.js @@ -0,0 +1,84 @@ +import { mapgis } from '../common/base'; +import { cloneDeep } from 'lodash'; + +import Symbol3DLayer from './Symbol3DLayer'; +import { Cap } from './Enum'; + +/** + * 三维填充图层 + * @author 基础平台-潘卓然 + * @class mapgis.symbols.FillSymbol3DLayer + * @classdesc 三维填充图层 + * @param {String} [type] 类型,只能是'fill' + * @param {Boolean} [castShadows = true] 阴影,默认激活 + * @param {Edges3D} [edges] 轮廓线 + * @param {Object} [material] 材质 + * @param {String} [material.color] 材质颜色 + * @param {String} [material.colorMixMode = 'multiply'] 材质颜色混合模式，可选"tint"|"replace"|"multiply" + * @param {Object} [outline] 轮廓外包线 + * @param {String} [outline.color] 轮廓外包线-颜色 + * @param {Number} [outline.size] 轮廓外包线-大小 + * @param {LineStylePattern3D} [outline.pattern] 轮廓外包线-模式 + * @param {Cap} [outline.patternCap] 轮廓外包线-线头模式,可选"butt" 平头 |"round" 圆头 |"square" 方头 + * @param {StylePattern3D} [pattern] + */ +export default class FillSymbol3DLayer extends Symbol3DLayer { + constructor(option) { + super(option); + var option = option ? option : {}; + const { castShadows = undefined, edges = undefined } = option; + const { material = undefined, outline = undefined, pattern = undefined } = option; + + this.type = 'fill'; + + this.castShadows = castShadows; + this.edges = edges; + this.material = material; + this.outline = outline; + this.pattern = pattern; + } + + /** + * @description 克隆函数 + */ + clone() { + return cloneDeep(this); + } + + /** + * @description 将JSON格式的符号转换为JS对象 + * @param {Object} json 符号的实例化JSON + */ + fromJSON(json) { + json = json || {}; + const { type = 'fill' } = json; + const { castShadows = undefined, edges = undefined } = json; + const { material = undefined, outline = undefined, pattern = undefined } = json; + + this.type = type; + + this.castShadows = castShadows; + this.edges = edges; + this.material = material; + this.outline = outline; + this.pattern = pattern; + } + + /** + * 将JS对象转换为JSON格式 + * @returns {Object} 符号的实例化JSON + */ + toJSON() { + return { + type: this.type, + castShadows: this.castShadows, + edges: this.edges, + material: this.material, + outline: this.outline, + pattern: this.pattern + }; + } +} + +export { FillSymbol3DLayer }; +mapgis.symbols.FillSymbol3DLayer = FillSymbol3DLayer; diff --git a/src/service/base/symbols/Font.js b/src/service/base/symbols/Font.js new file mode 100644 index 000000000..06be697e0 --- /dev/null +++ b/src/service/base/symbols/Font.js @@ -0,0 +1,68 @@ +import { mapgis } from '../common/base'; + +import { FontDecoration, FontStyle, FontWeight } from './Enum'; + +/** + * 字体 + * @author 基础平台-潘卓然 + * @class mapgis.symbols.Font + * @classdesc 字体 + * @param {String} [decoration = 'none'] 字体装饰，可选"underline"|"line-through"|"none" + * @param {String} [family = '宋体'] 字号 + * @param {Number} [size = 9] 字体大小 + * @param {FontStyle} [style = 'normal'] 字体样式, 可选"normal"|"italic"|"oblique" + * @param {FontWeight} [weight = 'normal'] 字体粗细, 可选"normal"|"bold"|"bolder"|"lighter" + */ +export default class Font { + constructor(option) { + var options = option ? option : {}; + const { decoration = FontDecoration.none, family = '宋体' } = options; + const { size = 9, style = FontStyle.normal, weight = FontWeight.normal } = options; + + this.decoration = decoration; + this.family = family; + this.size = size; + this.style = style; + this.weight = weight; + } + + /** + * @description 克隆函数 + */ + clone() { + return cloneDeep(this); + } + + /** + * @description 将JSON格式的符号转换为JS对象 + * @param {Object} json 符号的实例化JSON + */ + fromJSON(json) { + json = json || {}; + const { decoration = FontDecoration.none, family = '宋体' } = json; + const { size = 9, style = FontStyle.normal, weight = FontWeight.normal } = json; + + this.decoration = decoration; + this.family = family; + this.size = size; + this.style = style; + this.weight = weight; + } + + /** + * 将JS对象转换为JSON格式 + * @returns {Object} 符号的实例化JSON + */ + toJSON() { + return { + decoration: this.decoration, + family: this.family, + size: this.size, + style: this.style, + weight: this.weight + }; + } +} + +export { Font }; +mapgis.symbols.Font = Font; diff --git a/src/service/base/symbols/IconSymbol3DLayer.js b/src/service/base/symbols/IconSymbol3DLayer.js new file mode 100644 index 000000000..6eb5cd652 --- /dev/null +++ b/src/service/base/symbols/IconSymbol3DLayer.js @@ -0,0 +1,89 @@ +import { mapgis } from '../common/base'; +import { cloneDeep } from 'lodash'; + +import Symbol3DLayer from './Symbol3DLayer'; +import { Anchor } from './Enum'; + +/** + * 三维图标图层 + * @author 基础平台-潘卓然 + * @class mapgis.symbols.IconSymbol3DLayer + * @classdesc 三维图标图层 + * @param {String} [type] 类型,只能是'icon' + * @param {Anchor} [anchor='center'] 锚点位置, 可选"center"|"left"|"right"|"top"|"bottom"|"top-left"|"top-right"|"bottom-left"|"bottom-right"|"relative" + * @param {Object} [anchorPosition ={x:0, y:0}] 锚点偏移 + * @param {Object} [material] 材质 + * @param {String} [material.color] 材质颜色 + * @param {Object} [outline] 轮廓 {color: 'rgba(255, 255,255,1)', size: 4} + * @param {String} [outline.color] 轮廓颜色 + * @param {Number} [outline.size] 轮廓大小 + * @param {Object} [resource = { primitive: "circle" }] 资源，默认{ primitive: "circle" } + * @param {Object} [resource.primitive="circle"] 资源-图元,使用内置的形状'circle', 'square', 'cross','x', 'kite','triangle' + * @param {Object} [resource.href] 资源-引用，引用SVG的路径URL/URI，SVG的root node必须设置width和height + * @param {Number} [size=12] 大小 + */ +export default class IconSymbol3DLayer extends Symbol3DLayer { + constructor(option) { + super(option); + var option = option ? option : {}; + const { anchor = Anchor.center, anchorPosition = { x: 0, y: 0 } } = option; + const { material = undefined, outline = undefined, resource = { primitive: 'circle' } } = option; + const { size = 12 } = option; + + this.type = 'icon'; + + this.anchor = Anchor.center; + this.anchorPosition = anchorPosition; + this.material = material; + this.outline = outline; + this.resource = resource; + this.size = size; + } + + /** + * @description 克隆函数 + */ + clone() { + return cloneDeep(this); + } + + /** + * @description 将JSON格式的符号转换为JS对象 + * @param {Object} json 符号的实例化JSON + */ + fromJSON(json) { + json = json || {}; + const { type = 'icon' } = json; + const { anchor = Anchor.center, anchorPosition = { x: 0, y: 0 } } = json; + const { material = undefined, outline = undefined, resource = { primitive: 'circle' } } = json; + const { size = 12 } = json; + + this.type = undefined; + + this.anchor = Anchor.center; + this.anchorPosition = anchorPosition; + this.material = material; + this.outline = outline; + this.resource = resource; + this.size = size; + } + + /** + * 将JS对象转换为JSON格式 + * @returns {Object} 符号的实例化JSON + */ + toJSON() { + return { + type: this.type, + anchor: this.anchor, + anchorPosition: this.anchorPosition, + material: this.material, + outline: this.outline, + resource: this.resource, + size: this.size + }; + } +} + +export { IconSymbol3DLayer }; +mapgis.symbols.IconSymbol3DLayer = IconSymbol3DLayer; diff --git a/src/service/base/symbols/LabelSymbol3D.js b/src/service/base/symbols/LabelSymbol3D.js new file mode 100644 index 000000000..dd8f36a61 --- /dev/null +++ b/src/service/base/symbols/LabelSymbol3D.js @@ -0,0 +1,82 @@ +import { mapgis } from '../common/base'; +import { cloneDeep } from 'lodash'; + +import Symbol3D from './Symbol3D'; + +/** + * 三维文本符号 + * @author 基础平台-潘卓然 + * @class mapgis.symbols.LabelSymbol3D + * @classdesc 三维文本符号 + * @param {String} [type] 类型，只能是'label-3d' + * @param {String} [callout] 插图线，连接点与地形高度之间的示意线 + * @param {Object} [styleOrigin] 样式起源，{ name: '', [styleName|styleUrl] :'' } + * @param {Object} [styleOrigin.name] 样式起源-名称，表示引用样式的名称 + * @param {Object} [styleOrigin.styleName] 样式起源-样式名称，表示默认的内置的MapGIS的样式 + * @param {Object} [styleOrigin.styleUrl] 样式起源-样式地址，表示样式Url路径 + * @param {Array} [symbolLayers] 图层集合，用来可视化要素和制图综合 + * @param {Object} [verticalOffset] 垂直偏移策略 + * @param {Object} [verticalOffset.screenLength ] 垂直偏移策略-屏幕高度 + * @param {Object} [verticalOffset.minWorldLength ] 垂直偏移策略-最小世界高度 + * @param {Object} [verticalOffset.maxWorldLength ] 垂直偏移策略-最大世界高度 + */ +export default class LabelSymbol3D extends Symbol3D { + constructor(option) { + super(option); + var options = option ? option : {}; + + const { callout = undefined } = options; + const { styleOrigin = { name: 'mapgis-style', styleName: 'styleName' } } = options; + const { symbolLayers, verticalOffset } = options; + + this.type = 'label-3d'; + + this.callout = callout; + this.styleOrigin = styleOrigin; + this.symbolLayers = symbolLayers; + this.verticalOffset = verticalOffset; + } + + /** + * @description 克隆函数 + */ + clone() { + return cloneDeep(this); + } + + /** + * @description 将JSON格式的符号转换为JS对象 + * @param {Object} json 符号的实例化JSON + */ + fromJSON(json) { + json = json || {}; + const { type = 'label-3d' } = json; + const { callout = undefined } = options; + const { styleOrigin = { name: 'mapgis-style', styleName: 'styleName' } } = options; + const { symbolLayers, verticalOffset } = options; + + this.type = type; + + this.callout = callout; + this.styleOrigin = styleOrigin; + this.symbolLayers = symbolLayers; + this.verticalOffset = verticalOffset; + } + + /** + * 将JS对象转换为JSON格式 + * @returns {Object} 符号的实例化JSON + */ + toJSON() { + return { + type: this.type, + callout: this.callout, + styleOrigin: this.styleOrigin, + symbolLayers: this.symbolLayers, + verticalOffset: this.verticalOffset + }; + } +} + +export { LabelSymbol3D }; +mapgis.symbols.LabelSymbol3D = LabelSymbol3D; diff --git a/src/service/base/symbols/LineSymbol.js b/src/service/base/symbols/LineSymbol.js new file mode 100644 index 000000000..c19f746ac --- /dev/null +++ b/src/service/base/symbols/LineSymbol.js @@ -0,0 +1,56 @@ +import { mapgis } from '../common/base'; + +import { Symbol } from './Symbol'; + +/** + * 标记符号 + * @author 基础平台-潘卓然 + * @class mapgis.symbols.PointStyle + * @classdesc 线符号 + * @param {String} [type = 'simple-line'] marker类型:只能是'simple-line' + * @param {String} [color = 0] 线符号颜色，默认为'rgb(0,0,0)' + * @param {Number} [width = 0] 线符号宽度，默认为0.75像素 + */ +export default class LineSymbol extends Symbol { + constructor(option) { + super(option); + var options = option ? option : {}; + const { color = 'rgb(0,0,0)', width = 0.75 } = options; + this.type = 'simple-line'; + this.color = color; + this.width = width; + } + + /** + * @description 将JSON格式的符号转换为JS对象 + * @param {Object} json 符号的实例化JSON + */ + fromJSON(json) { + json = json || {}; + const { opacity = 1.0 } = json; + const { type = 'simple-line', color = 'rgb(0,0,0)', width = 0.75 } = json; + + // 父类属性Symbol.fromJSON + this.opacity = opacity; + + // 自身属性 + this.type = type; + this.color = color; + this.width = width; + } + + /** + * 将JS对象转换为JSON格式 + * @returns {Object} 符号的实例化JSON + */ + toJSON() { + return { + type: this.type, + color: this.color, + width: this.width + }; + } +} + +export { LineSymbol }; +mapgis.symbols.LineSymbol = LineSymbol; diff --git a/src/service/base/symbols/LineSymbol3D.js b/src/service/base/symbols/LineSymbol3D.js new file mode 100644 index 000000000..deae82985 --- /dev/null +++ b/src/service/base/symbols/LineSymbol3D.js @@ -0,0 +1,68 @@ +import { mapgis } from '../common/base'; +import { cloneDeep } from 'lodash'; + +import Symbol3D from './Symbol3D'; + +/** + * 三维线符号 + * @author 基础平台-潘卓然 + * @class mapgis.symbols.Symbol3D + * @classdesc 三维线符号 + * @param {String} [type] 类型，只能是'line-3d' + * @param {Object} [styleOrigin] 样式起源，{ name: '', [styleName|styleUrl] :'' } + * @param {Object} [styleOrigin.name] 样式起源-名称，表示引用样式的名称 + * @param {Object} [styleOrigin.styleName] 样式起源-样式名称，表示默认的内置的MapGIS的样式 + * @param {Object} [styleOrigin.styleUrl] 样式起源-样式地址，表示样式Url路径 + * @param {Array} [symbolLayers] 图层集合，用来可视化要素和制图综合 + */ +export default class LineSymbol3D extends Symbol3D { + constructor(option) { + super(option); + var options = option ? option : {}; + const { styleOrigin = { name: 'mapgis-style', styleName: 'styleName' } } = options; + const { symbolLayers } = options; + + this.type = 'line-3d'; + + this.styleOrigin = styleOrigin; + this.symbolLayers = symbolLayers; + } + + /** + * @description 克隆函数 + */ + clone() { + return cloneDeep(this); + } + + /** + * @description 将JSON格式的符号转换为JS对象 + * @param {Object} json 符号的实例化JSON + */ + fromJSON(json) { + json = json || {}; + const { type = 'line-3d' } = json; + const { styleOrigin = { name: 'mapgis-style', styleName: 'styleName' } } = json; + const { symbolLayers } = json; + + this.type = type; + + this.styleOrigin = styleOrigin; + this.symbolLayers = symbolLayers; + } + + /** + * 将JS对象转换为JSON格式 + * @returns {Object} 符号的实例化JSON + */ + toJSON() { + return { + type: this.type, + styleOrigin: this.styleOrigin, + symbolLayers: this.symbolLayers, + }; + } +} + +export { LineSymbol3D }; +mapgis.symbols.LineSymbol3D = LineSymbol3D; diff --git a/src/service/base/symbols/LineSymbol3DLayer.js b/src/service/base/symbols/LineSymbol3DLayer.js new file mode 100644 index 000000000..16cec8265 --- /dev/null +++ b/src/service/base/symbols/LineSymbol3DLayer.js @@ -0,0 +1,85 @@ +import { mapgis } from '../common/base'; +import { cloneDeep } from 'lodash'; + +import Symbol3DLayer from './Symbol3DLayer'; +import { Cap, Join } from './Enum'; + +/** + * 三维线图层 + * @author 基础平台-潘卓然 + * @class mapgis.symbols.LineSymbol3DLayer + * @classdesc 三维线图层 + * @param {String} [type] 类型,只能是'line' + * @param {Cap} [cap = 'butt'] 线头类型，默认为平头butt, 可选"butt" 平头 |"round" 圆头 |"square" 方头 + * @param {Join} [join = 'miter'] 拐角类型,可选"miter" 尖角 |"round" 圆角 |"bevel" 平角 + * @param {LineStyleMarker3D} [marker] 标注类型 + * @param {Object} [material] 材质 + * @param {String} [material.color] 材质颜色 + * @param {LineStylePattern3D} [pattern] 模式 + * @param {Number} [size=1] 宽度，默认1像素 + */ +export default class LineSymbol3DLayer extends Symbol3DLayer { + constructor(option) { + super(option); + var option = option ? option : {}; + const { cap = Cap.butt, join = Join.miter } = option; + const { marker = undefined, material = undefined, pattern = undefined } = option; + const { size = 1 } = option; + + this.type = 'line'; + + this.cap = cap; + this.join = join; + this.marker = marker; + this.material = material; + this.pattern = pattern; + this.size = size; + } + + /** + * @description 克隆函数 + */ + clone() { + return cloneDeep(this); + } + + /** + * @description 将JSON格式的符号转换为JS对象 + * @param {Object} json 符号的实例化JSON + */ + fromJSON(json) { + json = json || {}; + const { type = 'line' } = json; + const { cap = Cap.butt, join = Join.miter } = option; + const { marker = undefined, material = undefined, pattern = undefined } = option; + const { size = 1 } = option; + + this.type = type; + + this.cap = cap; + this.join = join; + this.marker = marker; + this.material = material; + this.pattern = pattern; + this.size = size; + } + + /** + * 将JS对象转换为JSON格式 + * @returns {Object} 符号的实例化JSON + */ + toJSON() { + return { + type: this.type, + cap: this.cap, + join: this.join, + marker: this.marker, + material: this.material, + pattern: this.pattern, + size: this.size + }; + } +} + +export { LineSymbol3DLayer }; +mapgis.symbols.LineSymbol3DLayer = LineSymbol3DLayer; diff --git a/src/service/base/symbols/LineSymbolMarker.js b/src/service/base/symbols/LineSymbolMarker.js new file mode 100644 index 000000000..2f8071ebe --- /dev/null +++ b/src/service/base/symbols/LineSymbolMarker.js @@ -0,0 +1,27 @@ +import { mapgis } from '../common/base'; + +import { LineMarkerStyle, LineMarkerPlacement } from './Enum'; + +/** + * 标记符号 + * @author 基础平台-潘卓然 + * @class mapgis.symbols.LineSymbolMarker + * @classdesc 线符号标记 + * @param {String} [type = 'line-marker'] marker类型:只能是'line-marker' + * @param {String} [color = 'rgb(0,0,0)'] 线符号标记颜色，默认为'rgb(0,0,0)' + * @param {Number} [placement = "begin-end"] 线符号标记摆放位置，"begin"|"end"|"begin-end" + * @param {LineMarkerStyle} [style = 'arrow'] 线符号标记样式，可选值"arrow"|"circle"|"square"|"diamond"|"cross"|"x" + */ +export default class LineSymbolMarker { + constructor(option) { + var options = option ? option : {}; + const { color = 'rgb(0,0,0)', placement = LineMarkerPlacement.begin_end, style = LineMarkerStyle.arrow } = options; + this.type = 'line-marker'; + this.color = color; + this.placement = placement; + this.style = style; + } +} + +export { LineSymbolMarker }; +mapgis.symbols.LineSymbolMarker = LineSymbolMarker; diff --git a/src/service/base/symbols/MarkerSymbol.js b/src/service/base/symbols/MarkerSymbol.js new file mode 100644 index 000000000..8a0a5f229 --- /dev/null +++ b/src/service/base/symbols/MarkerSymbol.js @@ -0,0 +1,63 @@ +import { mapgis } from '../common/base'; + +import { Symbol } from './Symbol'; + +/** + * 标记符号 + * @author 基础平台-潘卓然 + * @class mapgis.symbols.PointStyle + * @classdesc 标记符号 + * @param {String} [type = 'simple-marker'] marker类型:可选"simple-marker"|"picture-marker" + * @param {Number} [angle = 0] 标记角度，默认为0 + * @param {Number} [xoffset = 0] 标记x偏移，默认为0像素 + * @param {Number} [yoffset = 0] 标记y偏移，默认为0像素 + */ +export default class MarkerSymbol extends Symbol { + constructor(option) { + super(option); + var options = option ? option : {}; + const { angle = 0.0, xoffset = 0, yoffset = 0 } = options; + this.type = 'simple-marker'; + this.angle = angle; + this.xoffset = xoffset; + this.yoffset = yoffset; + } + + /** + * @description 将JSON格式的符号转换为JS对象 + * @param {Object} json 符号的实例化JSON + */ + fromJSON(json) { + json = json || {}; + const { type = 'simple-marker', opacity = 1.0, color = '#FFFFFF' } = json; + const { angle = 0.0, xoffset = 0, yoffset = 0 } = json; + + // 父类属性Symbol.fromJSON + this.color = color; + this.opacity = opacity; + + // 自身属性 + this.type = type; + this.angle = angle; + this.xoffset = xoffset; + this.yoffset = yoffset; + } + + /** + * 将JS对象转换为JSON格式 + * @returns {Object} 符号的实例化JSON + */ + toJSON() { + return { + type: this.type, + color: this.color, + opacity: this.opacity, + angle: this.angle, + xoffset: this.xoffset, + yoffset: this.yoffset + }; + } +} + +export { MarkerSymbol }; +mapgis.symbols.MarkerSymbol = MarkerSymbol; diff --git a/src/service/base/symbols/ObjectSymbol3DLayer.js b/src/service/base/symbols/ObjectSymbol3DLayer.js new file mode 100644 index 000000000..3a61a8bf9 --- /dev/null +++ b/src/service/base/symbols/ObjectSymbol3DLayer.js @@ -0,0 +1,118 @@ +import { mapgis } from '../common/base'; +import { cloneDeep } from 'lodash'; + +import Symbol3DLayer from './Symbol3DLayer'; +import { Anchor } from './Enum'; + +/** + * 三维对象图层 + * @author 基础平台-潘卓然 + * @class mapgis.symbols.ObjectSymbol3DLayer + * @classdesc 三维对象图层 + * @param {String} [type] 类型,只能是'object' + * @param {Anchor} [anchor='origin'] 锚点,可选值"center"|"top"|"bottom"|"origin"|"relative"。 + * 1. 当图元为球，立方，菱形时,origin在中心位置; + * 2. 当图元为圆柱、锥、四面体时，origin在底部； + * 3. 当图元为href时，origin为模型的原点； + * 4. 如果anchor设置为relative，通过anchorPosition辅助外包盒 + * @param {Object} [anchorPosition] 锚点偏移位置 {x:0,y:0,z:0} + * @param {Object} [castShadows=true] 阴影，默认激活 + * @param {Number} [depth=10] 深度或者南北直径，传undefined会基于模型重新计算 + * @param {Number} [heading] 偏航角,Z轴旋转角度 + * @param {Number} [height=10] 高度，传undefined会基于模型重新计算 + * @param {Object} [material] 材质 + * @param {String} [material.color='rgb(255,255,255)'] 材质-颜色,默认白色 + * @param {Object} [resource = { primitive: "sphere" }] 资源，默认{ primitive: "sphere" } + * @param {Object} [resource.primitive="sphere"] 资源-图元,使用内置的形状'sphere', 'cylinder', 'cube','cone', 'inverted-cone','diamond', 'tetrahedron' + * @param {String} [resource.href] 资源-引用，引用GLTF的路径URL/URI + * @param {Number} [roll] 滚转角,Y轴旋转角度 + * @param {Number} [tilt] 倾斜角,X轴旋转角度,对应pitch + * @param {Number} [width=10] 宽度或者东西直径，传undefined会基于模型重新计算 + */ +export default class ObjectSymbol3DLayer extends Symbol3DLayer { + constructor(option) { + super(option); + var option = option ? option : {}; + + const { anchor = Anchor.origin, anchorPosition = { x: 0, y: 0, z: 0 } } = option; + const { castShadows = true } = option; + const { material = { color: 'rgb(255,255,255)' } } = option; + const { resource = { primitive: 'sphere' } } = option; + const { heading, roll, tilt } = option; + const { depth = 10, height = 10, width = 10 } = option; + + this.type = 'object'; + + this.anchor = anchor; + this.anchorPosition = anchorPosition; + this.castShadows = castShadows; + this.height = height; + this.width = width; + this.depth = depth; + this.material = material; + this.resource = resource; + this.heading = heading; + this.roll = roll; + this.tilt = tilt; + } + + /** + * @description 克隆函数 + */ + clone() { + return cloneDeep(this); + } + + /** + * @description 将JSON格式的符号转换为JS对象 + * @param {Object} json 符号的实例化JSON + */ + fromJSON(json) { + json = json || {}; + const { type = 'object' } = json; + const { anchor = Anchor.origin, anchorPosition = { x: 0, y: 0, z: 0 } } = json; + const { castShadows = true } = json; + const { material = { color: 'rgb(255,255,255)' } } = json; + const { resource = { primitive: 'sphere' } } = json; + const { heading, roll, tilt } = json; + const { depth = 10, height = 10, width = 10 } = json; + + this.type = type; + + this.anchor = anchor; + this.anchorPosition = anchorPosition; + this.castShadows = castShadows; + this.height = height; + this.width = width; + this.depth = depth; + this.material = material; + this.resource = resource; + this.heading = heading; + this.roll = roll; + this.tilt = tilt; + } + + /** + * 将JS对象转换为JSON格式 + * @returns {Object} 符号的实例化JSON + */ + toJSON() { + return { + type: this.type, + anchor: this.anchor, + anchorPosition: this.anchorPosition, + castShadows: this.castShadows, + height: this.height, + width: this.width, + depth: this.depth, + material: this.material, + resource: this.resource, + heading: this.heading, + roll: this.roll, + tilt: this.tilt + }; + } +} + +export { ObjectSymbol3DLayer }; +mapgis.symbols.ObjectSymbol3DLayer = ObjectSymbol3DLayer; diff --git a/src/service/base/symbols/PathSymbol3DLayer.js b/src/service/base/symbols/PathSymbol3DLayer.js new file mode 100644 index 000000000..5e4055493 --- /dev/null +++ b/src/service/base/symbols/PathSymbol3DLayer.js @@ -0,0 +1,98 @@ +import { mapgis } from '../common/base'; +import { cloneDeep } from 'lodash'; + +import Symbol3DLayer from './Symbol3DLayer'; +import { Anchor, Cap, Join } from './Enum'; + +/** + * 三维线图层 + * @author 基础平台-潘卓然 + * @class mapgis.symbols.PathSymbol3DLayer + * @classdesc 三维线图层 + * @param {String} [type] 类型,只能是'path' + * @param {Anchor} [anchor='center'] 锚点,可选值"center"|"bottom"|"top" + * @param {Cap} [cap = 'butt'] 线头类型，默认为平头butt, 可选"butt" 平头 |"round" 圆头 |"square" 方头|"none" 无 + * @param {Object} [castShadows=true] 阴影，默认激活 + * @param {Number} [height] 高度 + * @param {Join} [join = 'miter'] 拐角类型,可选"miter" 尖角 |"round" 圆角 |"bevel" 平角 + * @param {Object} [material] 材质 + * @param {String} [material.color='rgb(255,255,255)'] 材质-颜色,默认白色 + * @param {String} [profile="circle"] 横截面，可选"circle"|"quad" + * @param {String} [profileRotation="all"] 横截面旋转角度，可选"heading"|"all" + * @param {Number} [width=10] 宽度或者东西直径，传undefined会基于模型重新计算 + */ +export default class PathSymbol3DLayer extends Symbol3DLayer { + constructor(option) { + super(option); + var option = option ? option : {}; + const { anchor = Anchor.center, castShadows = true } = option; + const { cap = Cap.butt, join = Join.miter } = option; + const { height, width } = option; + const { material, profile, profileRotation } = option; + + this.type = 'path'; + this.anchor = anchor; + this.cap = cap; + this.castShadows = castShadows; + this.height = height; + this.join = join; + this.material = material; + this.profile = profile; + this.profileRotation = profileRotation; + this.width = width; + } + + /** + * @description 克隆函数 + */ + clone() { + return cloneDeep(this); + } + + /** + * @description 将JSON格式的符号转换为JS对象 + * @param {Object} json 符号的实例化JSON + */ + fromJSON(json) { + json = json || {}; + const { type = 'path' } = json; + const { anchor = Anchor.center, castShadows = true } = json; + const { cap = Cap.butt, join = Join.miter } = json; + const { height, width } = json; + const { material, profile, profileRotation } = json; + + this.type = type; + + this.anchor = anchor; + this.cap = cap; + this.castShadows = castShadows; + this.height = height; + this.join = join; + this.material = material; + this.profile = profile; + this.profileRotation = profileRotation; + this.width = width; + } + + /** + * 将JS对象转换为JSON格式 + * @returns {Object} 符号的实例化JSON + */ + toJSON() { + return { + type: this.type, + anchor: this.anchor, + cap: this.cap, + castShadows: this.castShadows, + height: this.height, + join: this.join, + material: this.material, + profile: this.profile, + profileRotation: this.profileRotation, + width: this.width + }; + } +} + +export { PathSymbol3DLayer }; +mapgis.symbols.PathSymbol3DLayer = PathSymbol3DLayer; diff --git a/src/service/base/symbols/PictureFillSymbol.js b/src/service/base/symbols/PictureFillSymbol.js new file mode 100644 index 000000000..f6e69436b --- /dev/null +++ b/src/service/base/symbols/PictureFillSymbol.js @@ -0,0 +1,96 @@ +import { mapgis } from '../common/base'; +import { cloneDeep } from 'lodash'; + +import { FillSymbol } from './FillSymbol'; +import SimpleLineSymbol from './SimpleLineSymbol'; + +/** + * 简单标记符号 + * @author 基础平台-潘卓然 + * @class mapgis.symbols.PointStyle + * @classdesc 图片填充符号 + * @param {String} [type = 'picture-fill'] 简单填充符号类型，只能是picture-fill + * @param {Number} [height=12] 简单填充符号颜色，默认为12 + * @param {SimpleLineSymbol} [outline] 简单填充符号轮廓 + * @param {String} [url] 简单填充符号颜色 + * @param {Number} [width=12] 简单填充符号颜色，默认为12 + * @param {Number} [xoffset=0] 简单填充符号颜色，默认为0 + * @param {Number} [xscale=1] 简单填充符号颜色，默认为1 + * @param {Number} [yoffset=0] 简单填充符号颜色，默认为0 + * @param {Number} [yscale=1] 简单填充符号颜色，默认为1 + */ +export default class PictureFillSymbol extends FillSymbol { + constructor(option) { + super(option); + var options = option ? option : {}; + const { outline = undefined, height = 12, width = 12 } = options; + const { xoffset = 0, xscale = 1, yoffset = 0, yscale = 1 } = options; + + this.type = 'picture-fill'; + + this.height = height; + this.outline = outline; + this.url = url; + this.width = width; + this.xoffset = xoffset; + this.xscale = xscale; + this.yoffset = yoffset; + this.yscale = yscale; + } + + /** + * @description 克隆函数 + */ + clone() { + return cloneDeep(this); + } + + /** + * @description 将JSON格式的符号转换为JS对象 + * @param {Object} json 符号的实例化JSON + */ + fromJSON(json) { + json = json || {}; + const { type = 'picture-fill' } = json; + const { opacity = 1 } = json; + const { outline = undefined, height = 12, width = 12 } = json; + const { xoffset = 0, xscale = 1, yoffset = 0, yscale = 1 } = json; + + // 基类属性Symbol.fromJSON + this.opacity = opacity; + + // 父类属性MarkerSymbol.fromJSON + this.outline = outline; + + // 自身属性 + this.type = type; + this.height = height; + this.url = url; + this.width = width; + this.xoffset = xoffset; + this.xscale = xscale; + this.yoffset = yoffset; + this.yscale = yscale; + } + + /** + * 将JS对象转换为JSON格式 + * @returns {Object} 符号的实例化JSON + */ + toJSON() { + return { + type: this.type, + height: this.height, + outline: this.outline, + url: this.url, + width: this.width, + xoffset: this.xoffset, + xscale: this.xscale, + yoffset: this.yoffset, + yscale: this.yscale + }; + } +} + +export { PictureFillSymbol }; +mapgis.symbols.PictureFillSymbol = PictureFillSymbol; diff --git a/src/service/base/symbols/PictureMarkerSymbol.js b/src/service/base/symbols/PictureMarkerSymbol.js new file mode 100644 index 000000000..9bcdc03bf --- /dev/null +++ b/src/service/base/symbols/PictureMarkerSymbol.js @@ -0,0 +1,86 @@ +import { mapgis } from '../common/base'; +import { cloneDeep } from 'lodash'; + +import MarkerSymbol from './MarkerSymbol'; + +/** + * 简单标记符号 + * @author 基础平台-潘卓然 + * @class mapgis.symbols.PictureMarkerSymbol + * @classdesc 图片标记符号 + * @param {String} [type = 'picture-marker'] 图片标记符号类型，只能是picture-marker + * @param {Number} [angle = 0] 图片标记符号角度，默认为0 + * @param {Number} [height = 12] 图片标记符号高度，默认为12 + * @param {String} [url] 图片标记符号url路径 + * @param {Number} [width = 12] 图片标记符号宽度，默认为12像素 + * @param {Number} [xoffset = 0] 图片标记符号x偏移，默认为0像素 + * @param {Number} [yoffset = 0] 图片标记符号y偏移，默认为0像素 + */ +export default class PictureMarkerSymbol extends MarkerSymbol { + constructor(option) { + super(option); + var options = option ? option : {}; + const { angle = 0, height = 12, url = undefined, width = 12 } = options; + const { xoffset = 0, yoffset = 0 } = options; + this.type = 'picture-marker'; + + this.angle = angle; + this.height = height; + this.url = url; + this.width = width; + this.xoffset = xoffset; + this.yoffset = yoffset; + } + + /** + * @description 克隆函数 + */ + clone() { + return cloneDeep(this); + } + + /** + * @description 将JSON格式的符号转换为JS对象 + * @param {Object} json 符号的实例化JSON + */ + fromJSON(json) { + json = json || {}; + const { type = 'picture-marker' } = json; + const { opacity = 1.0 } = json; + const { angle = 0, height = 12, url = undefined, width = 12 } = options; + const { xoffset = 0, yoffset = 0 } = options; + + // 基类属性Symbol.fromJSON + this.opacity = opacity; + + // 父类属性MarkerSymbol.fromJSON + this.angle = angle; + this.xoffset = xoffset; + this.yoffset = yoffset; + + // 自身属性 + this.type = type; + this.height = height; + this.width = width; + this.url = url; + } + + /** + * 将JS对象转换为JSON格式 + * @returns {Object} 符号的实例化JSON + */ + toJSON() { + return { + type: this.type, + angle: this.angle, + height: this.height, + url: this.url, + width: this.width, + xoffset: this.xoffset, + yoffset: this.yoffset + }; + } +} + +export { PictureMarkerSymbol }; +mapgis.symbols.PictureMarkerSymbol = PictureMarkerSymbol; diff --git a/src/service/base/symbols/PointSymbol3D.js b/src/service/base/symbols/PointSymbol3D.js new file mode 100644 index 000000000..bec379de6 --- /dev/null +++ b/src/service/base/symbols/PointSymbol3D.js @@ -0,0 +1,81 @@ +import { mapgis } from '../common/base'; +import { cloneDeep } from 'lodash'; + +import Symbol3D from './Symbol3D'; + +/** + * 三维点符号 + * @author 基础平台-潘卓然 + * @class mapgis.symbols.Symbol3D + * @classdesc 三维点符号 + * @param {String} [type] 类型，只能是'point-3d' + * @param {String} [callout] 插图线，连接点与地形高度之间的示意线 + * @param {Object} [styleOrigin] 样式起源，{ name: '', [styleName|styleUrl] :'' } + * @param {Object} [styleOrigin.name] 样式起源-名称，表示引用样式的名称 + * @param {Object} [styleOrigin.styleName] 样式起源-样式名称，表示默认的内置的MapGIS的样式 + * @param {Object} [styleOrigin.styleUrl] 样式起源-样式地址，表示样式Url路径 + * @param {Array} [symbolLayers] 图层集合，用来可视化要素和制图综合 + * @param {Object} [verticalOffset] 垂直偏移策略 + * @param {Object} [verticalOffset.screenLength ] 垂直偏移策略-屏幕高度 + * @param {Object} [verticalOffset.minWorldLength ] 垂直偏移策略-最小世界高度 + * @param {Object} [verticalOffset.maxWorldLength ] 垂直偏移策略-最大世界高度 + */ +export default class PointSymbol3D extends Symbol3D { + constructor(option) { + super(option); + var options = option ? option : {}; + const { callout = undefined } = options; + const { styleOrigin = { name: 'mapgis-style', styleName: 'styleName' } } = options; + const { symbolLayers, verticalOffset } = options; + + this.type = 'point-3d'; + + this.callout = callout; + this.styleOrigin = styleOrigin; + this.symbolLayers = symbolLayers; + this.verticalOffset = verticalOffset; + } + + /** + * @description 克隆函数 + */ + clone() { + return cloneDeep(this); + } + + /** + * @description 将JSON格式的符号转换为JS对象 + * @param {Object} json 符号的实例化JSON + */ + fromJSON(json) { + json = json || {}; + const { type = 'point-3d' } = json; + const { callout = undefined } = json; + const { styleOrigin = { name: 'mapgis-style', styleName: 'styleName' } } = json; + const { symbolLayers, verticalOffset } = json; + + this.type = type; + + this.callout = callout; + this.styleOrigin = styleOrigin; + this.symbolLayers = symbolLayers; + this.verticalOffset = verticalOffset; + } + + /** + * 将JS对象转换为JSON格式 + * @returns {Object} 符号的实例化JSON + */ + toJSON() { + return { + type: this.type, + callout: this.callout, + styleOrigin: this.styleOrigin, + symbolLayers: this.symbolLayers, + verticalOffset: this.verticalOffset + }; + } +} + +export { PointSymbol3D }; +mapgis.symbols.PointSymbol3D = PointSymbol3D; diff --git a/src/service/base/symbols/PolygonSymbol3D.js b/src/service/base/symbols/PolygonSymbol3D.js new file mode 100644 index 000000000..9aba83967 --- /dev/null +++ b/src/service/base/symbols/PolygonSymbol3D.js @@ -0,0 +1,68 @@ +import { mapgis } from '../common/base'; +import { cloneDeep } from 'lodash'; + +import Symbol3D from './Symbol3D'; + +/** + * 三维点符号 + * @author 基础平台-潘卓然 + * @class mapgis.symbols.PolygonSymbol3D + * @classdesc 三维点符号 + * @param {String} [type] 类型，只能是'polygon-3d' + * @param {Object} [styleOrigin] 样式起源，{ name: '', [styleName|styleUrl] :'' } + * @param {Object} [styleOrigin.name] 样式起源-名称，表示引用样式的名称 + * @param {Object} [styleOrigin.styleName] 样式起源-样式名称，表示默认的内置的MapGIS的样式 + * @param {Object} [styleOrigin.styleUrl] 样式起源-样式地址，表示样式Url路径 + * @param {Array} [symbolLayers] 图层集合，用来可视化要素和制图综合 + */ +export default class PolygonSymbol3D extends Symbol3D { + constructor(option) { + super(option); + var options = option ? option : {}; + const { styleOrigin = { name: 'mapgis-style', styleName: 'styleName' } } = options; + const { symbolLayers } = options; + + this.type = 'polygon-3d'; + + this.styleOrigin = styleOrigin; + this.symbolLayers = symbolLayers; + } + + /** + * @description 克隆函数 + */ + clone() { + return cloneDeep(this); + } + + /** + * @description 将JSON格式的符号转换为JS对象 + * @param {Object} json 符号的实例化JSON + */ + fromJSON(json) { + json = json || {}; + const { type = 'polygon-3d' } = json; + const { styleOrigin = { name: 'mapgis-style', styleName: 'styleName' } } = json; + const { symbolLayers } = json; + + this.type = type; + + this.styleOrigin = styleOrigin; + this.symbolLayers = symbolLayers; + } + + /** + * 将JS对象转换为JSON格式 + * @returns {Object} 符号的实例化JSON + */ + toJSON() { + return { + type: this.type, + styleOrigin: this.styleOrigin, + symbolLayers: this.symbolLayers + }; + } +} + +export { PolygonSymbol3D }; +mapgis.symbols.PolygonSymbol3D = PolygonSymbol3D; diff --git a/src/service/base/symbols/SimpleFillSymbol.js b/src/service/base/symbols/SimpleFillSymbol.js new file mode 100644 index 000000000..4ea0cb732 --- /dev/null +++ b/src/service/base/symbols/SimpleFillSymbol.js @@ -0,0 +1,75 @@ +import { mapgis } from '../common/base'; +import { cloneDeep } from 'lodash'; + +import { FillSymbol } from './FillSymbol'; +import SimpleLineSymbol from './SimpleLineSymbol'; +import { FillStyle } from './Enum'; + +/** + * 简单标记符号 + * @author 基础平台-潘卓然 + * @class mapgis.symbols.PointStyle + * @classdesc 简单填充符号 + * @param {String} [type = 'simple-fill'] 简单填充符号类型，只能是simple-line + * @param {String} [color = 'rgba(0, 0, 0, 0.25)'] 简单填充符号颜色，默认为'rgba(0, 0, 0, 0.25)' + * @param {SimpleLineSymbol} [outline] 简单填充符号轮廓 + * @param {FillStyle} [style = 'solid'] 简单填充符号样式类型，可选"backward-diagonal"|"cross"|"diagonal-cross"|"forward-diagonal"|"horizontal"|"none"|"solid"|"vertical" + */ +export default class SimpleFillSymbol extends FillSymbol { + constructor(option) { + super(option); + var options = option ? option : {}; + const { color = 'rgba(0, 0, 0, 0.25)', outline = undefined, style = FillStyle.solid } = options; + + this.type = 'simple-fill'; + + this.color = color; + this.outline = this.outline; + this.style = style; + } + + /** + * @description 克隆函数 + */ + clone() { + return cloneDeep(this); + } + + /** + * @description 将JSON格式的符号转换为JS对象 + * @param {Object} json 符号的实例化JSON + */ + fromJSON(json) { + json = json || {}; + const { type = 'simple-marker' } = json; + const { opacity = 1 } = json; + const { color = 'rgba(0, 0, 0, 0.25)', outline = undefined, style = FillStyle.solid } = options; + + // 基类属性Symbol.fromJSON + this.opacity = opacity; + + // 父类属性MarkerSymbol.fromJSON + this.outline = outline; + + // 自身属性 + this.type = type; + this.color = color; + this.style = style; + } + + /** + * 将JS对象转换为JSON格式 + * @returns {Object} 符号的实例化JSON + */ + toJSON() { + return { + type: this.type, + color: this.color, + outline: this.outline, + style: this.style + }; + } +} + +export { SimpleFillSymbol }; +mapgis.symbols.SimpleFillSymbol = SimpleFillSymbol; diff --git a/src/service/base/symbols/SimpleLineSymbol.js b/src/service/base/symbols/SimpleLineSymbol.js new file mode 100644 index 000000000..cfdf5376b --- /dev/null +++ b/src/service/base/symbols/SimpleLineSymbol.js @@ -0,0 +1,92 @@ +import { mapgis } from '../common/base'; +import { cloneDeep } from 'lodash'; + +import { LineSymbol } from './LineSymbol'; +import { Cap, Join, LineStyle } from './Enum'; + +/** + * 简单标记符号 + * @author 基础平台-潘卓然 + * @class mapgis.symbols.PointStyle + * @classdesc 简单线符号 + * @param {String} [type = 'simple-line'] 类型，只能是simple-line + * @param {Cap} [cap = 'round'] 线头类型，默认为圆头round, 可选"butt" 平头 |"round" 圆头 |"square" 方头 + * @param {String} [color = 'rgb(0, 0, 0)'] 符号颜色，默认为'rgb(0, 0, 0)' + * @param {Join} [join = 'bevel'] 拐角类型,可选"miter" 尖角 |"round" 圆角 |"bevel" 平角 + * @param {LineSymbolMarker} [marker] 标注类型 + * @param {Number} [miterLimit = 2] 最大挂角宽度，默认为2 + * @param {LineStyle} [style = 'solid'] 样式类型，可选"dash"|"dash-dot"|"dot"|"long-dash"|"long-dash-dot"|"long-dash-dot-dot"|"none"|"short-dash"|"short-dash-dot"|"short-dash-dot-dot"|"short-dot"|"solid" + * @param {Number} [width = 0.75] 宽度，默认为0.75 + */ +export default class SimpleLineSymbol extends LineSymbol { + constructor(option) { + super(option); + var options = option ? option : {}; + const { cap = Cap.round, color = 'rgb(0, 0, 0)', join = Join.bevel } = options; + const { marker = undefined, miterLimit = 2, style = LineStyle.solid } = options; + const { width = 0.75 } = options; + + this.type = 'simple-line'; + + this.cap = cap; + this.color = color; + this.join = join; + this.marker = marker; + this.miterLimit = miterLimit; + this.style = style; + this.width = width; + } + + /** + * @description 克隆函数 + */ + clone() { + return cloneDeep(this); + } + + /** + * @description 将JSON格式的符号转换为JS对象 + * @param {Object} json 符号的实例化JSON + */ + fromJSON(json) { + json = json || {}; + const { type = 'simple-line' } = json; + const { cap = Cap.round, color = 'rgb(0, 0, 0)', join = Join.bevel } = json; + const { marker = undefined, miterLimit = 2, style = LineStyle.solid } = json; + const { width = 0.75 } = json; + + // 基类属性Symbol.fromJSON + this.opacity = opacity; + + // 父类属性MarkerSymbol.fromJSON + this.angle = angle; + this.xoffset = xoffset; + this.yoffset = yoffset; + + // 自身属性 + this.type = type; + this.color = color; + this.outline = outline; + this.path = path; + this.size = size; + this.style = style; + } + + /** + * 将JS对象转换为JSON格式 + * @returns {Object} 符号的实例化JSON + */ + toJSON() { + return { + type: this.type, + color: this.color, + opacity: this.opacity, + angle: this.angle, + xoffset: this.xoffset, + yoffset: this.yoffset + }; + } +} + +export { SimpleLineSymbol }; +mapgis.symbols.SimpleLineSymbol = SimpleLineSymbol; diff --git a/src/service/base/symbols/SimpleMarkerSymbol.js b/src/service/base/symbols/SimpleMarkerSymbol.js new file mode 100644 index 000000000..995f33e04 --- /dev/null +++ b/src/service/base/symbols/SimpleMarkerSymbol.js @@ -0,0 +1,95 @@ +import { mapgis } from '../common/base'; +import { cloneDeep } from 'lodash'; + +import MarkerSymbol from './MarkerSymbol'; +import SimpleLineSymbol from './SimpleLineSymbol'; +import { MarkStyle } from './Enum'; + +/** + * 简单标记符号 + * @author 基础平台-潘卓然 + * @class mapgis.symbols.PointStyle + * @classdesc 简单标记符号 + * @param {String} [type = 'simple-marker'] marker类型，只能是simple-marker + * @param {Number} [angle = 0] 标记角度，默认为0 + * @param {String} [color = 0] 简单标记颜色，默认为'rgba(255, 255, 255, 0.25)' + * @param {SimpleLineSymbol} [outline] 简单标记轮廓线符号 + * @param {Number} [path] 简单标记SVG路径 + * @param {Number} [size = 12] 简单标记大小，默认为12像素 + * @param {MarkStyle} [style = 'circle'] 简单标记样式类型，可选"circle"|"square"|"cross"|"x"|"diamond"|"triangle"|"path" + * @param {Number} [xoffset = 0] 简单标记x偏移，默认为0像素 + * @param {Number} [yoffset = 0] 简单标记y偏移，默认为0像素 + */ +export default class SimpleMarkerSymbol extends MarkerSymbol { + constructor(option) { + super(option); + var options = option ? option : {}; + const { angle = 0.0, color = 'rgba(255, 255, 255, 0.25)', outline = undefined } = options; + const { path = undefined, size = 12, style = MarkStyle.circle } = options; + const { xoffset = 0, yoffset = 0 } = options; + this.type = 'simple-marker'; + + this.angle = angle; + this.color = color; + this.outline = outline ? new SimpleLineSymbol(outline) : undefined; + this.path = path; + this.size = size; + this.style = style; + this.xoffset = xoffset; + this.yoffset = yoffset; + } + + /** + * @description 克隆函数 + */ + clone() { + return cloneDeep(this); + } + + /** + * @description 将JSON格式的符号转换为JS对象 + * @param {Object} json 符号的实例化JSON + */ + fromJSON(json) { + json = json || {}; + const { type = 'simple-marker' } = json; + const { opacity = 1.0 } = json; + const { angle = 0.0, color = 'rgba(255, 255, 255, 0.25)', outline = 0 } = json; + const { path = undefined, size = 12, style = MarkStyle.circle } = json; + const { xoffset = 0, yoffset = 0 } = json; + + // 基类属性Symbol.fromJSON + this.opacity = opacity; + + // 父类属性MarkerSymbol.fromJSON + this.angle = angle; + this.xoffset = xoffset; + this.yoffset = yoffset; + + // 自身属性 + this.type = type; + this.color = color; + this.outline = outline; + this.path = path; + this.size = size; + this.style = style; + } + + /** + * 将JS对象转换为JSON格式 + * @returns {Object} 符号的实例化JSON + */ + toJSON() { + return { + type: this.type, + color: this.color, + opacity: this.opacity, + angle: this.angle, + xoffset: this.xoffset, + yoffset: this.yoffset + }; + } +} + +export { SimpleMarkerSymbol }; +mapgis.symbols.SimpleMarkerSymbol = SimpleMarkerSymbol; diff --git a/src/service/base/symbols/Symbol.js b/src/service/base/symbols/Symbol.js new file mode 100644 index 000000000..bb3071665 --- /dev/null +++ b/src/service/base/symbols/Symbol.js @@ -0,0 +1,46 @@ +import { mapgis } from '../common/base'; + +/** + * 符号基类 + * @author 基础平台-潘卓然 + * @class mapgis.symbols.Symbol + * @classdesc 符号基类 + * @param {Number} [opacity = 1] 透明度，0~1之间的值，默认为1，不透明 + * @param {String} [color = #FFFFFF] 颜色，十六进制或RGB，默认为#FFFFFF，白色 + */ +export default class Symbol { + constructor(option) { + var options = option ? option : {}; + const { opacity = 1, color = '#FFFFFF' } = options; + this.type = undefined; + this.opacity = opacity; + this.color = color; + } + + /** + * @description 将JSON格式的符号转换为JS对象 + * @param {Object} json 符号的实例化JSON + */ + fromJSON(json) { + json = json || {}; + const { type = 'unkown', opacity = 1, color = '#FFFFFF' } = json; + this.type = type; + this.color = color; + this.opacity = opacity; + } + + /** + * 将JS对象转换为JSON格式 + * @returns {Object} 符号的实例化JSON + */ + toJSON() { + return { + type: this.type, + color: this.color, + opacity: this.opacity + }; + } +} + +export { Symbol }; +mapgis.symbols.Symbol = Symbol; diff --git a/src/service/base/symbols/Symbol3D.js b/src/service/base/symbols/Symbol3D.js new file mode 100644 index 000000000..cbbd05be9 --- /dev/null +++ b/src/service/base/symbols/Symbol3D.js @@ -0,0 +1,54 @@ +import { mapgis } from '../common/base'; + +import Symbol from './Symbol'; + +/** + * 三维符号基类 + * @author 基础平台-潘卓然 + * @class mapgis.symbols.Symbol3D + * @classdesc 三维符号基类 + * @param {String} [type] 简单填充符号类型，可选 point-3d"|"line-3d"|"polygon-3d"|"mesh-3d"|"label-3d" + * @param {Object} [styleOrigin] 三维符号样式起源，{ name: '', [styleName|styleUrl] :'' } + * @param {Object} [styleOrigin.name] 三维符号样式起源-名称，表示引用样式的名称 + * @param {Object} [styleOrigin.styleName] 三维符号样式起源-样式名称，表示默认的内置的MapGIS的样式 + * @param {Object} [styleOrigin.styleUrl] 三维符号样式起源-样式地址，表示样式Url路径 + * @param {Array} [symbolLayers] 三维符号图层集合，用来可视化要素和制图综合 + */ +export default class Symbol3D extends Symbol { + constructor(option) { + super(option); + var options = option ? option : {}; + const { styleOrigin = { name: 'mapgis-style', styleName: 'styleName' } } = options; + const { symbolLayers } = options; + this.type = undefined; + this.styleOrigin = styleOrigin; + this.symbolLayers = symbolLayers; + } + + /** + * @description 将JSON格式的符号转换为JS对象 + * @param {Object} json 符号的实例化JSON + */ + fromJSON(json) { + json = json || {}; + const { type = 'unkown', opacity = 1, color = '#FFFFFF' } = json; + this.type = type; + this.color = color; + this.opacity = opacity; + } + + /** + * 将JS对象转换为JSON格式 + * @returns {Object} 符号的实例化JSON + */ + toJSON() { + return { + type: this.type, + color: this.color, + opacity: this.opacity + }; + } +} + +export { Symbol }; +mapgis.symbols.Symbol = Symbol; diff --git a/src/service/base/symbols/Symbol3DLayer.js b/src/service/base/symbols/Symbol3DLayer.js new file mode 100644 index 000000000..5caf16890 --- /dev/null +++ b/src/service/base/symbols/Symbol3DLayer.js @@ -0,0 +1,38 @@ +import { mapgis } from '../common/base'; + +/** + * 三维符号图层 + * @author 基础平台-潘卓然 + * @class mapgis.symbols.Symbol3DLayer + * @classdesc 三维符号图层 + * @param {String} [type] 简单填充符号类型，可选 "icon"|"object"|"line"|"path"|"fill"|"water"|"extrude"|"text" + */ +export default class Symbol3DLayer { + constructor(option) { + var option = option ? option : {}; + this.type = undefined; + } + + /** + * @description 将JSON格式的符号转换为JS对象 + * @param {Object} json 符号的实例化JSON + */ + fromJSON(json) { + json = json || {}; + const { type = 'unkown' } = json; + this.type = type; + } + + /** + * 将JS对象转换为JSON格式 + * @returns {Object} 符号的实例化JSON + */ + toJSON() { + return { + type: this.type + }; + } +} + +export { Symbol3DLayer }; +mapgis.symbols.Symbol3DLayer = Symbol3DLayer; diff --git a/src/service/base/symbols/TextSymbol.js b/src/service/base/symbols/TextSymbol.js new file mode 100644 index 000000000..3b872498c --- /dev/null +++ b/src/service/base/symbols/TextSymbol.js @@ -0,0 +1,129 @@ +import { mapgis } from '../common/base'; + +import { HorizontalAlignment, VerticalAlignment } from './Enum'; +import Symbol from './Symbol'; +import Font from './Font'; + +/** + * 文本符号 + * @author 基础平台-潘卓然 + * @class mapgis.symbols.PointStyle + * @classdesc 文本符号 + * @param {String} [type = 'text'] marker类型:只能是"text" + * @param {Number} [angle = 0] 角度 + * @param {String} [backgroundColor] 背景颜色 + * @param {String} [borderLineColor] 边界颜色 + * @param {Number} [borderLineSize] 边界宽度 + * @param {String} [color='rgb(0,0,0)'] 颜色 + * @param {Font} [font] 字体 + * @param {String} [haloColor] 光晕颜色 + * @param {Number} [haloSize] 光晕大小 + * @param {HorizontalAlignment} [horizontalAlignment='center'] 水平方向，可选"left"|"right"|"center" + * @param {Boolean} [kerning=true] 空格间距 + * @param {Number} [lineHeight=1.0] 行高 + * @param {Number} [lineWidth=192] 行宽 + * @param {Boolean} [rotated=false] 是否旋转 + * @param {String} [text] 显示内容 + * @param {VerticalAlignment} [verticalAlignment='baseline'] 垂直对齐,可选"baseline"|"top"|"middle"|"bottom" + * @param {Number} [xoffset=0] x偏移 + * @param {Number} [yoffset=0] y偏移 + */ +export default class TextSymbol extends Symbol { + constructor(option) { + super(option); + var options = option ? option : {}; + const { angle = 0, backgroundColor, borderLineColor, borderLineSize } = options; + const { color = 'rgb(0,0,0)', font, haloColor, haloSize } = options; + const { horizontalAlignment = HorizontalAlignment.center, verticalAlignment = VerticalAlignment.baseline } = options; + const { kerning = true, lineHeight = 1.0, lineWidth = 192, rotated = false } = options; + const { text, xoffset = 0, yoffset = 0 } = options; + + this.type = 'text'; + this.angle = angle; + this.backgroundColor = backgroundColor; + this.borderLineColor = borderLineColor; + this.borderLineSize = borderLineSize; + this.color = color; + this.font = font ? new Font(font) : undefined; + this.haloColor = haloColor; + this.haloSize = haloSize; + this.horizontalAlignment = horizontalAlignment; + this.kerning = kerning; + this.lineHeight = lineHeight; + this.lineWidth = lineWidth; + this.rotated = rotated; + this.text = text; + this.verticalAlignment = verticalAlignment; + this.xoffset = xoffset; + this.yoffset = yoffset; + } + + /** + * @description 将JSON格式的符号转换为JS对象 + * @param {Object} json 符号的实例化JSON + */ + fromJSON(json) { + json = json || {}; + const { opacity = 1.0 } = json; + const { type = 'text' } = json; + const { angle = 0, backgroundColor, borderLineColor, borderLineSize } = json; + const { color = 'rgb(0,0,0)', font, haloColor, haloSize } = json; + const { horizontalAlignment = HorizontalAlignment.center, verticalAlignment = VerticalAlignment.baseline } = json; + const { kerning = true, lineHeight = 1.0, lineWidth = 192, rotated = false } = json; + const { text, xoffset = 0, yoffset = 0 } = json; + + // 父类属性Symbol.fromJSON + this.opacity = opacity; + + // 自身属性 + this.type = type; + this.angle = angle; + this.backgroundColor = backgroundColor; + this.borderLineColor = borderLineColor; + this.borderLineSize = borderLineSize; + this.color = color; + this.font = font; + this.haloColor = haloColor; + this.haloSize = haloSize; + this.horizontalAlignment = horizontalAlignment; + this.kerning = kerning; + this.lineHeight = lineHeight; + this.lineWidth = lineWidth; + this.rotated = rotated; + this.text = text; + this.verticalAlignment = verticalAlignment; + this.xoffset = xoffset; + this.yoffset = yoffset; + } + + /** + * 将JS对象转换为JSON格式 + * @returns {Object} 符号的实例化JSON + */ + toJSON() { + return { + type: this.type, + type: this.type, + angle: this.angle, + backgroundColor: this.backgroundColor, + borderLineColor: this.borderLineColor, + borderLineSize: this.borderLineSize, + color: this.color, + font: this.font, + haloColor: this.haloColor, + haloSize: this.haloSize, + horizontalAlignment: this.horizontalAlignment, + kerning: this.kerning, + lineHeight: this.lineHeight, + lineWidth: this.lineWidth, + rotated: this.rotated, + text: this.text, + verticalAlignment: this.verticalAlignment, + xoffset: this.xoffset, + yoffset: this.yoffset + }; + } +} + +export { TextSymbol }; +mapgis.symbols.TextSymbol = TextSymbol; diff --git a/src/service/base/symbols/TextSymbol3DLayer.js b/src/service/base/symbols/TextSymbol3DLayer.js new file mode 100644 index 000000000..bbdf00327 --- /dev/null +++ b/src/service/base/symbols/TextSymbol3DLayer.js @@ -0,0 +1,102 @@ +import { mapgis } from '../common/base'; +import { cloneDeep } from 'lodash'; + +import Symbol3DLayer from './Symbol3DLayer'; +import { HorizontalAlignment, VerticalAlignment } from './Enum'; + +/** + * 三维文本图层 + * @author 基础平台-潘卓然 + * @class mapgis.symbols.TextSymbol3DLayer + * @classdesc 三维文本图层 + * @param {String} [type] 类型,只能是'text' + * @param {Object} [background] 背景 + * @param {String} [background.color] 背景-颜色 + * @param {Font} [font] 字体 + * @param {Object} [halo] 光晕 + * @param {Object} [halo.color = 'rgb(0,0,0)'] 光晕颜色,默认'rgb(0,0,0)' + * @param {Object} [halo.size = 0] 光晕大小,默认0 + * @param {HorizontalAlignment} [horizontalAlignment='center'] 水平方向，可选"left"|"right"|"center" + * @param {Number} [lineHeight=1.0] 行高 + * @param {Object} [material] 材质 + * @param {Object} [material.color='rgb(255,255,255)'] 材质-颜色,默认白色 + * @param {Number} [size = 9] 大小 + * @param {String} [text] 显示内容 + * @param {VerticalAlignment} [verticalAlignment='baseline'] 垂直对齐,可选"baseline"|"top"|"middle"|"bottom" + */ +export default class TextSymbol3DLayer extends Symbol3DLayer { + constructor(option) { + super(option); + var option = option ? option : {}; + const { background = undefined, font, halo = { color: 'rgb(0,0,0)', size: 0 } } = option; + const { horizontalAlignment = HorizontalAlignment.center, verticalAlignment = VerticalAlignment.baseline } = option; + const { lineHeight = 1.0, material = { color: 'rgb(255,255,255)' }, size = 9 } = option; + const { text } = option; + + this.type = 'text'; + + this.background = background; + this.font = font; + this.halo = halo; + this.horizontalAlignment = horizontalAlignment; + this.lineHeight = lineHeight; + this.material = material; + this.size = size; + this.text = text; + this.verticalAlignment = verticalAlignment; + } + + /** + * @description 克隆函数 + */ + clone() { + return cloneDeep(this); + } + + /** + * @description 将JSON格式的符号转换为JS对象 + * @param {Object} json 符号的实例化JSON + */ + fromJSON(json) { + json = json || {}; + const { type = 'text' } = json; + const { background = undefined, font, halo = { color: 'rgb(0,0,0)', size: 0 } } = json; + const { horizontalAlignment = HorizontalAlignment.center, verticalAlignment = VerticalAlignment.baseline } = json; + const { lineHeight = 1.0, material = { color: 'rgb(255,255,255)' }, size = 9 } = json; + const { text } = option; + + this.type = undefined; + + this.background = background; + this.font = font; + this.halo = halo; + this.horizontalAlignment = horizontalAlignment; + this.lineHeight = lineHeight; + this.material = material; + this.size = size; + this.text = text; + this.verticalAlignment = verticalAlignment; + } + + /** + * 将JS对象转换为JSON格式 + * @returns {Object} 符号的实例化JSON + */ + toJSON() { + return { + type: this.type, + background: this.background, + font: this.font, + halo: this.halo, + horizontalAlignment: this.horizontalAlignment, + lineHeight: this.lineHeight, + material: this.material, + size: this.size, + text: this.text, + verticalAlignment: this.verticalAlignment + }; + } +} + +export { TextSymbol3DLayer }; +mapgis.symbols.TextSymbol3DLayer = TextSymbol3DLayer; diff --git a/src/service/base/symbols/index.js b/src/service/base/symbols/index.js new file mode 100644 index 000000000..6d1255d90 --- /dev/null +++ b/src/service/base/symbols/index.js @@ -0,0 +1,75 @@ +// 枚举 +import { MarkStyle, LineStyle, LineMarkerStyle, FillStyle } from './Enum'; +import { FontStyle, FontWeight, FontDecoration } from './Enum'; +import { HorizontalAlignment, VerticalAlignment } from './Enum'; +import { Cap, Join, LineMarkerPlacement } from './Enum'; +import { Anchor, Align, TextPlacement } from './Enum'; + +// 原子级符号 +import Symbol from './Symbol'; +import Symbol3D from './Symbol3D'; +import Symbol3DLayer from './Symbol3DLayer'; +import Font from './Font'; + +// 二维符号 +import MarkerSymbol from './MarkerSymbol'; +import LineSymbol from './LineSymbol'; +import FillSymbol from './FillSymbol'; +import TextSymbol from './TextSymbol'; +import PictureMarkerSymbol from './PictureMarkerSymbol'; +import SimpleMarkerSymbol from './SimpleMarkerSymbol'; +import SimpleLineSymbol from './SimpleLineSymbol'; +import SimpleFillSymbol from './SimpleFillSymbol'; +import PictureFillSymbol from './PictureFillSymbol'; +import LineSymbolMarker from './LineSymbolMarker'; + +// 三维符号 +import PointSymbol3D from './PointSymbol3D'; +import LineSymbol3D from './LineSymbol3D'; +import PolygonSymbol3D from './PolygonSymbol3D'; +import LabelSymbol3D from './LabelSymbol3D'; +import IconSymbol3DLayer from './IconSymbol3DLayer'; +import ObjectSymbol3DLayer from './ObjectSymbol3DLayer'; +import LineSymbol3DLayer from './LineSymbol3DLayer'; +import PathSymbol3DLayer from './PathSymbol3DLayer'; +import FillSymbol3DLayer from './FillSymbol3DLayer'; +import ExtrudeSymbol3DLayer from './ExtrudeSymbol3DLayer'; +import TextSymbol3DLayer from './TextSymbol3DLayer'; + +// 枚举 +export { MarkStyle, LineStyle, LineMarkerStyle, FillStyle }; +export { FontStyle, FontWeight, FontDecoration }; +export { HorizontalAlignment, VerticalAlignment }; +export { Cap, Join, LineMarkerPlacement }; +export { Anchor, Align, TextPlacement }; + +// 原子级符号 +export { Symbol }; +export { Symbol3D }; +export { Symbol3DLayer }; +export { Font }; + +// 二维符号 +export { MarkerSymbol }; +export { LineSymbol }; +export { FillSymbol }; +export { TextSymbol }; +export { PictureMarkerSymbol }; +export { SimpleMarkerSymbol }; +export { SimpleLineSymbol }; +export { SimpleFillSymbol }; +export { PictureFillSymbol }; +export { LineSymbolMarker }; + +// 三维符号 +export { PointSymbol3D }; +export { LineSymbol3D }; +export { PolygonSymbol3D }; +export { LabelSymbol3D }; +export { IconSymbol3DLayer }; +export { ObjectSymbol3DLayer }; +export { LineSymbol3DLayer }; +export { PathSymbol3DLayer }; +export { FillSymbol3DLayer }; +export { ExtrudeSymbol3DLayer }; +export { TextSymbol3DLayer }; diff --git a/src/service/baseserver/CommonServiceBase.js b/src/service/baseserver/CommonServiceBase.js index 3d6459556..2e5857a35 100644 --- a/src/service/baseserver/CommonServiceBase.js +++ b/src/service/baseserver/CommonServiceBase.js @@ -1,14 +1,14 @@ -import {Zondy} from "../common/Base"; -import {extend} from "../common/Util"; -import {isArray} from "../common/Util"; -import {isInTheSameDomain} from "../common/Util"; -import {transformResult} from "../common/Util"; -import {urlAppend} from "../common/Util"; -import {getParameterString} from "../common/Util"; -import {bind} from "../common/Util"; -import {Events} from "./Events"; -import {JSONFormat} from "./JSONFormat"; -import {FetchRequest} from "./FetchRequest"; +import { Zondy } from '../common/Base'; +import { extend } from '../common/Util'; +import { isArray } from '../common/Util'; +import { isInTheSameDomain } from '../common/Util'; +import { transformResult } from '../common/Util'; +import { urlAppend } from '../common/Util'; +import { getParameterString } from '../common/Util'; +import { bind } from '../common/Util'; +import { Events } from './Events'; +import { JSONFormat } from './JSONFormat'; +import { FetchRequest } from './FetchRequest'; /** * @private @@ -22,7 +22,7 @@ import {FetchRequest} from "./FetchRequest"; class CommonServiceBase { constructor(url, options) { var me = this; - this.EVENT_TYPES = ["processCompleted", "processFailed"]; + this.EVENT_TYPES = ['processCompleted', 'processFailed']; this.events = null; this.eventListeners = null; @@ -142,7 +142,6 @@ class CommonServiceBase { me._processSuccess(result); } - /** * @function CommonServiceBase.prototype.getUrlFailed * @description 请求失败后执行此方法。 @@ -158,7 +157,6 @@ class CommonServiceBase { } } - /** * * @function CommonServiceBase.prototype.ajaxPolling @@ -176,7 +174,6 @@ class CommonServiceBase { me._commit(me.options); } - /** * @function CommonServiceBase.prototype.calculatePollingTimes * @description 计算剩余请求失败执行次数。 @@ -195,7 +192,6 @@ class CommonServiceBase { me.totalTimes = me.times; } } - } else { if (me.totalTimes > me.POLLING_TIMES) { me.totalTimes = me.POLLING_TIMES; @@ -204,7 +200,6 @@ class CommonServiceBase { me.totalTimes--; } - /** * @function CommonServiceBase.prototype.serviceProcessCompleted * @description 状态完成，执行此方法。 @@ -212,7 +207,7 @@ class CommonServiceBase { */ serviceProcessCompleted(result) { result = transformResult(result); - this.events.triggerEvent("processCompleted", {result: result}); + this.events.triggerEvent('processCompleted', { result: result }); } /** @@ -223,14 +218,13 @@ class CommonServiceBase { serviceProcessFailed(result) { result = transformResult(result); var error = result; - this.events.triggerEvent("processFailed", {error: error}); + this.events.triggerEvent('processFailed', { result: error }); } _commit(options) { - if (options.method === "POST" || options.method === "PUT") { + if (options.method === 'POST' || options.method === 'PUT') { if (options.params) { - options.url = urlAppend(options.url, - getParameterString(options.params || {})); + options.url = urlAppend(options.url, getParameterString(options.params || {})); } options.params = options.data; } @@ -240,67 +234,106 @@ class CommonServiceBase { timeout: options.async ? 0 : null, proxy: options.proxy }) - .then(function (response) { - if (response.text) { - return response.text(); - } - return response.json(); - }) - .catch(function(error) { - let result = {error: true, value: {}}; - var failure = (options.scope) ? bind(options.failure, options.scope) : options.failure; - failure(result); - }) - .then(function (text) { - if (!text) return; - var result = null; - if (typeof text === "string" && (text.toLowerCase() === 'true' || text.toLowerCase() === 'false')) { - result = {}; - if (text.toLowerCase() === 'true') { - result.success = true; - } - else { - result.error = true; + .then(function (response) { + // console.log('【服务】【基础服务】【抽象类Fetch返回状态】', response); + let check; + if (response.text) { + check = () => response.text(); + } else { + check = () => response.json(); } - } - else if (typeof text === "string") { - result = new JSONFormat().read(text); - } + if (response.status == 200) { + return new Promise( + (resolve) => { + check().then(function (text) { + if (!text) return; + var result = null; + if (typeof text === 'string' && (text.toLowerCase() === 'true' || text.toLowerCase() === 'false')) { + result = {}; + if (text.toLowerCase() === 'true') { + result.succeed = true; + } else { + result.succeed = false; + result.error = true; + } + } else if (typeof text === 'string') { + result = new JSONFormat().read(text); + } + if ((!result && isNaN(result)) || result.error) { + if (result && result.error) { + result = { error: result.error }; + } else { + result = { error: true }; + } + } + if (result.error) { + var failure = options.scope ? bind(options.failure, options.scope) : options.failure; + failure(result); + } else { + if (!isNaN(result)) { + //为数字 + result = { value: result }; + } + if (typeof result === 'string') { + result = { value: result }; + } + if (Object.prototype.toString.call(result) !== '[object Array]') { + result.succeed = result.succeed === undefined ? true : result.succeed; + } else { + result = { + value: result, + succeed: true + }; + } - if ((!result && isNaN(result)) || result.error) { - if (result && result.error) { - result = {error: result.error}; + var success = options.scope ? bind(options.success, options.scope) : options.success; + success(result); + } + }); + resolve(response.status); + }, + (reject) => { + console.log('【服务】【基础服务】【抽象类Fetch返回异常】', reject); + } + ); } else { - result = {error: true}; + return new Promise( + (resolve) => { + // console.log('【服务】【基础服务】【抽象类Fetch异常信息：4xx/5xx-resoleve】'); + check().then(function (text) { + // console.log('【服务】【基础服务】【抽象类Fetch异常信息：4xx/5xx】', text); + if (!text) return; + var result = null; + if (typeof text === 'string' && (text.toLowerCase() === 'true' || text.toLowerCase() === 'false')) { + result = {}; + result.succeed = false; + } else if (typeof text === 'string') { + result = new JSONFormat().read(text); + } + + if ((!result && isNaN(result)) || !result.success) { + result = { succeed: false }; + } + + var failure = options.scope ? bind(options.failure, options.scope) : options.failure; + failure(result); + }); + resolve(response.status); + }, + (reject) => { + console.log('【服务】【基础服务】【抽象类Fetch返回异常】', reject); + } + ); } - } - if (result.error) { - var failure = (options.scope) ? bind(options.failure, options.scope) : options.failure; + }) + .catch(function (error) { + let result = { error: true, value: {} }; + var failure = options.scope ? bind(options.failure, options.scope) : options.failure; failure(result); - } else { - if (!isNaN(result)) //为数字 - { - result = {value: result}; - } - if (typeof result === "string") { - result = {value: result}; - } - if (Object.prototype.toString.call(result) !== '[object Array]') { - result.success = result.success === undefined ? true : result.success; - } - else { - result = { - value: result, - success: true - }; - } - - var success = (options.scope) ? bind(options.success, options.scope) : options.success; - success(result); - } - }); + }) + .then(function (text, status) {}); } } -export {CommonServiceBase}; +export { CommonServiceBase }; Zondy.Service.CommonServiceBase = CommonServiceBase; diff --git a/src/service/baseserver/FetchRequest.js b/src/service/baseserver/FetchRequest.js index dcb80bf71..73529ba53 100644 --- a/src/service/baseserver/FetchRequest.js +++ b/src/service/baseserver/FetchRequest.js @@ -1,7 +1,5 @@ -import { extend } from "../common/Util"; -import "./PromisePolyfill" -import './fetch' - +import 'promise-polyfill/dist/polyfill'; +import 'fetch-ie8'; var fetch = window.fetch; @@ -210,4 +208,4 @@ var FetchRequest = Zondy.FetchRequest = { export { CORS,RequestTimeout,FetchRequest}; Zondy.Service.FetchRequest = FetchRequest; Zondy.Service.CORS = CORS; -Zondy.Service.RequestTimeout = RequestTimeout; \ No newline at end of file +Zondy.Service.RequestTimeout = RequestTimeout; diff --git a/src/service/baseserver/IServiceBase.js b/src/service/baseserver/IServiceBase.js index 7d4901443..2ac76b878 100644 --- a/src/service/baseserver/IServiceBase.js +++ b/src/service/baseserver/IServiceBase.js @@ -46,7 +46,7 @@ class IgsServiceBase extends CommonServiceBase { result = transformResult(result); // bug 13893 后统改succeed 为 success，这就导致如果项目上的版本是用的这个节点前的igserver的版本 // webclient-es6-service只能使用10.5.4-1之前的版本，需要慎重处理 - if (result.success) { + if (result.succeed) { me.events && me.events.triggerEvent('processCompleted', { result: result }); } else { ////在没有token是返回的是200，但是其实是没有权限，所以这里也应该是触发失败事件 diff --git a/src/service/baseserver/PromisePolyfill.js b/src/service/baseserver/PromisePolyfill.js deleted file mode 100644 index 06d089e12..000000000 --- a/src/service/baseserver/PromisePolyfill.js +++ /dev/null @@ -1,2 +0,0 @@ -import Promise from './promise-polyfill'; -window.Promise = Promise; \ No newline at end of file diff --git a/src/service/baseserver/promise-polyfill.js b/src/service/baseserver/promise-polyfill.js deleted file mode 100644 index 860e2e470..000000000 --- a/src/service/baseserver/promise-polyfill.js +++ /dev/null @@ -1,233 +0,0 @@ -(function (global, factory) { - typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : - typeof define === 'function' && define.amd ? define(factory) : - (global.Promise = factory()); -}(this, (function () { 'use strict'; - -// Store setTimeout reference so promise-polyfill will be unaffected by -// other code modifying setTimeout (like sinon.useFakeTimers()) -var setTimeoutFunc = setTimeout; - -function noop() {} - -// Polyfill for Function.prototype.bind -function bind(fn, thisArg) { - return function() { - fn.apply(thisArg, arguments); - }; -} - -function handle(self, deferred) { - while (self._state === 3) { - self = self._value; - } - if (self._state === 0) { - self._deferreds.push(deferred); - return; - } - self._handled = true; - Promise._immediateFn(function() { - var cb = self._state === 1 ? deferred.onFulfilled : deferred.onRejected; - if (cb === null) { - (self._state === 1 ? resolve : reject)(deferred.promise, self._value); - return; - } - var ret; - try { - ret = cb(self._value); - } catch (e) { - reject(deferred.promise, e); - return; - } - resolve(deferred.promise, ret); - }); -} - -function resolve(self, newValue) { - try { - // Promise Resolution Procedure: https://github.com/promises-aplus/promises-spec#the-promise-resolution-procedure - if (newValue === self) - throw new TypeError('A promise cannot be resolved with itself.'); - if ( - newValue && - (typeof newValue === 'object' || typeof newValue === 'function') - ) { - var then = newValue.then; - if (newValue instanceof Promise) { - self._state = 3; - self._value = newValue; - finale(self); - return; - } else if (typeof then === 'function') { - doResolve(bind(then, newValue), self); - return; - } - } - self._state = 1; - self._value = newValue; - finale(self); - } catch (e) { - reject(self, e); - } -} - -function reject(self, newValue) { - self._state = 2; - self._value = newValue; - finale(self); -} - -function finale(self) { - if (self._state === 2 && self._deferreds.length === 0) { - Promise._immediateFn(function() { - if (!self._handled) { - Promise._unhandledRejectionFn(self._value); - } - }); - } - - for (var i = 0, len = self._deferreds.length; i < len; i++) { - handle(self, self._deferreds[i]); - } - self._deferreds = null; -} - -function Handler(onFulfilled, onRejected, promise) { - this.onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : null; - this.onRejected = typeof onRejected === 'function' ? onRejected : null; - this.promise = promise; -} - -/** - * Take a potentially misbehaving resolver function and make sure - * onFulfilled and onRejected are only called once. - * - * Makes no guarantees about asynchrony. - */ -function doResolve(fn, self) { - var done = false; - try { - fn( - function(value) { - if (done) return; - done = true; - resolve(self, value); - }, - function(reason) { - if (done) return; - done = true; - reject(self, reason); - } - ); - } catch (ex) { - if (done) return; - done = true; - reject(self, ex); - } -} - -function Promise(fn) { - if (!(this instanceof Promise)) - throw new TypeError('Promises must be constructed via new'); - if (typeof fn !== 'function') throw new TypeError('not a function'); - this._state = 0; - this._handled = false; - this._value = undefined; - this._deferreds = []; - - doResolve(fn, this); -} - -var _proto = Promise.prototype; -_proto.catch = function(onRejected) { - return this.then(null, onRejected); -}; - -_proto.then = function(onFulfilled, onRejected) { - var prom = new this.constructor(noop); - - handle(this, new Handler(onFulfilled, onRejected, prom)); - return prom; -}; - -Promise.all = function(arr) { - return new Promise(function(resolve, reject) { - if (!arr || typeof arr.length === 'undefined') - throw new TypeError('Promise.all accepts an array'); - var args = Array.prototype.slice.call(arr); - if (args.length === 0) return resolve([]); - var remaining = args.length; - - function res(i, val) { - try { - if (val && (typeof val === 'object' || typeof val === 'function')) { - var then = val.then; - if (typeof then === 'function') { - then.call( - val, - function(val) { - res(i, val); - }, - reject - ); - return; - } - } - args[i] = val; - if (--remaining === 0) { - resolve(args); - } - } catch (ex) { - reject(ex); - } - } - - for (var i = 0; i < args.length; i++) { - res(i, args[i]); - } - }); -}; - -Promise.resolve = function(value) { - if (value && typeof value === 'object' && value.constructor === Promise) { - return value; - } - - return new Promise(function(resolve) { - resolve(value); - }); -}; - -Promise.reject = function(value) { - return new Promise(function(resolve, reject) { - reject(value); - }); -}; - -Promise.race = function(values) { - return new Promise(function(resolve, reject) { - for (var i = 0, len = values.length; i < len; i++) { - values[i].then(resolve, reject); - } - }); -}; - -// Use polyfill for setImmediate for performance gains -Promise._immediateFn = - (typeof setImmediate === 'function' && - function(fn) { - setImmediate(fn); - }) || - function(fn) { - setTimeoutFunc(fn, 0); - }; - -Promise._unhandledRejectionFn = function _unhandledRejectionFn(err) { - if (typeof console !== 'undefined' && console) { - console.warn('Possible Unhandled Promise Rejection:', err); // eslint-disable-line no-console - } -}; - -return Promise; - -}))); \ No newline at end of file diff --git a/src/service/common/Base.js b/src/service/common/Base.js index 8c7d664f7..e26a43b9c 100644 --- a/src/service/common/Base.js +++ b/src/service/common/Base.js @@ -1,11 +1,12 @@ -var Zondy = (window.Zondy = window.Zondy || {}); + +var Zondy = (window.Zondy = window.Zondy || {}); Zondy.Event = Zondy.Event || {}; Zondy.Object = Zondy.Object || {}; Zondy.Object.ContourAnalyse = Zondy.Object.ContourAnalyse || {}; Zondy.Object.Theme = Zondy.Object.Theme || {}; -Zondy.Theme = Zondy.Theme || {} // 客户端专题图 +Zondy.Theme = Zondy.Theme || {}; // 客户端专题图 Zondy.Service = Zondy.Service || {}; Zondy.Socket = Zondy.Socket || {}; @@ -54,4 +55,6 @@ Zondy.CloudDisk.Model = Zondy.CloudDisk.Model || {}; Zondy.IGServerX = Zondy.IGServerX || {}; Zondy.IGServerX.Vector = Zondy.IGServerX.Vector || {}; -export { Zondy }; +Zondy.Plot = Zondy.Plot || {}; + +export { Zondy }; \ No newline at end of file diff --git a/src/service/common/CDisplayStyle.js b/src/service/common/CDisplayStyle.js index 11cfe5834..c83554e61 100644 --- a/src/service/common/CDisplayStyle.js +++ b/src/service/common/CDisplayStyle.js @@ -1,12 +1,6 @@ -import { - Zondy -} from './Base'; -import { - extend -} from "./Util"; -import { - DynShowStyle -} from './DynShowStyle' +import { Zondy } from './Base'; +import { extend } from './Util'; +import { DynShowStyle } from './DynShowStyle'; /** * 地图文档显示样式对象 @@ -26,11 +20,23 @@ import { * @param {Boolean} [option.ShowCoordPnt = false] 显示坐标点 * @param {Boolean} [option.ShowElemRect = false] 显示元素的外包矩形 * @param {Array} [option.ShowStyle = null] 图层显示参数 Array, {@link Zondy.Object.DynShowStyle} + * @param {Array} [option.LayerStyles = null] 图层显示参数 Map, {@link Zondy.Object.DynShowStyle} * @param {Boolean} [option.SymbleShow = false] 是否进行还原显示 * @see Zondy.Service.GetDocImageService + * @example + * var layerStyle = new Zondy.Object.DynShowStyle({ + Alpha: 50 + }); + var style = new Zondy.Object.CDisplayStyle({ + LayerStyles: { + 0: layerStyle, + 1: layerStyle, + '2-0': layerStyle + } + }); */ var CDisplayStyle = function (option) { - var options = (option !== undefined) ? option : {}; + var options = option !== undefined ? option : {}; extend(this, options); /** @@ -40,7 +46,7 @@ var CDisplayStyle = function (option) { * @description 注记符号大小固定 * @default false */ - this.AnnSizeFixed = (options.AnnSizeFixed !== undefined) ? options.AnnSizeFixed : false; + this.AnnSizeFixed = options.AnnSizeFixed !== undefined ? options.AnnSizeFixed : false; /** * @private @@ -49,7 +55,7 @@ var CDisplayStyle = function (option) { * @description 图像质量可选值为：1（低）、2（中）、3（高） * @default 0 */ - this.DriverQuality = (options.DriverQuality !== undefined) ? options.DriverQuality : 0; + this.DriverQuality = options.DriverQuality !== undefined ? options.DriverQuality : 0; /** * @private @@ -58,7 +64,7 @@ var CDisplayStyle = function (option) { * @description 是否动态投影 * @default false */ - this.DynProjFlag = (options.DynProjFlag !== undefined) ? options.DynProjFlag : false; + this.DynProjFlag = options.DynProjFlag !== undefined ? options.DynProjFlag : false; /** * @private @@ -67,7 +73,7 @@ var CDisplayStyle = function (option) { * @description 符号是否跟随显示放大（该属性已过时，请使用各个要素类的大小固定及线宽固定） * @default false */ - this.FollowScale = (options.FollowScale !== undefined) ? options.FollowScale : false; + this.FollowScale = options.FollowScale !== undefined ? options.FollowScale : false; /** * @private @@ -76,7 +82,7 @@ var CDisplayStyle = function (option) { * @description 线状符号线宽固定 * @default false */ - this.LinPenWidFixed = (options.LinPenWidFixed !== undefined) ? options.LinPenWidFixed : false; + this.LinPenWidFixed = options.LinPenWidFixed !== undefined ? options.LinPenWidFixed : false; /** * @private @@ -85,7 +91,7 @@ var CDisplayStyle = function (option) { * @description 线状符号大小固定 * @default false */ - this.LinSizeFixed = (options.LinSizeFixed !== undefined) ? options.LinSizeFixed : false; + this.LinSizeFixed = options.LinSizeFixed !== undefined ? options.LinSizeFixed : false; /** * @private @@ -94,7 +100,7 @@ var CDisplayStyle = function (option) { * @description 点状符号线宽固定 * @default false */ - this.PntPenWidFixed = (options.PntPenWidFixed !== undefined) ? options.PntPenWidFixed : false; + this.PntPenWidFixed = options.PntPenWidFixed !== undefined ? options.PntPenWidFixed : false; /** * @private @@ -103,7 +109,7 @@ var CDisplayStyle = function (option) { * @description 点状符号大小固定 * @default false */ - this.PntSizeFixed = (options.PntSizeFixed !== undefined) ? options.PntSizeFixed : false; + this.PntSizeFixed = options.PntSizeFixed !== undefined ? options.PntSizeFixed : false; /** * @private @@ -112,7 +118,7 @@ var CDisplayStyle = function (option) { * @description 填充符号线宽固定 * @default false */ - this.RegPenWidFixed = (options.RegPenWidFixed !== undefined) ? options.RegPenWidFixed : false; + this.RegPenWidFixed = options.RegPenWidFixed !== undefined ? options.RegPenWidFixed : false; /** * @private @@ -121,7 +127,7 @@ var CDisplayStyle = function (option) { * @description 填充符号大小固定 * @default false */ - this.RegSizeFixed = (options.RegSizeFixed !== undefined) ? options.RegSizeFixed : false; + this.RegSizeFixed = options.RegSizeFixed !== undefined ? options.RegSizeFixed : false; /** * @private @@ -130,7 +136,7 @@ var CDisplayStyle = function (option) { * @description 显示坐标点 * @default false */ - this.ShowCoordPnt = (options.ShowCoordPnt !== undefined) ? options.ShowCoordPnt : false; + this.ShowCoordPnt = options.ShowCoordPnt !== undefined ? options.ShowCoordPnt : false; /** * @private @@ -139,7 +145,7 @@ var CDisplayStyle = function (option) { * @description 显示元素的外包矩形 * @default false */ - this.ShowElemRect = (options.ShowElemRect !== undefined) ? options.ShowElemRect : false; + this.ShowElemRect = options.ShowElemRect !== undefined ? options.ShowElemRect : false; /** * @private @@ -148,7 +154,16 @@ var CDisplayStyle = function (option) { * @description 图层显示参数Array<{@link Zondy.Object.DynShowStyle}> * @default null */ - this.ShowStyle = (options.ShowStyle !== undefined) ? options.ShowStyle : null; + this.ShowStyle = options.ShowStyle !== undefined ? options.ShowStyle : null; + + /** + * @private + * @member Zondy.Object.CDisplayStyle.prototype.LayerStyles + * @type {Map} + * @description 图层显示参数Map<{@link Zondy.Object.DynShowStyle}> + * @default null + */ + this.LayerStyles = options.LayerStyles !== undefined ? options.LayerStyles : null; /** * @private @@ -157,10 +172,8 @@ var CDisplayStyle = function (option) { * @description 是否进行还原显示 * @default false */ - this.SymbleShow = (options.SymbleShow !== undefined) ? options.SymbleShow : false; + this.SymbleShow = options.SymbleShow !== undefined ? options.SymbleShow : false; }; -export { - CDisplayStyle -}; -Zondy.Object.CDisplayStyle = CDisplayStyle; \ No newline at end of file +export { CDisplayStyle }; +Zondy.Object.CDisplayStyle = CDisplayStyle; diff --git a/src/service/common/DynShowStyle.js b/src/service/common/DynShowStyle.js index bf8aed57b..5dffd2da4 100644 --- a/src/service/common/DynShowStyle.js +++ b/src/service/common/DynShowStyle.js @@ -1,31 +1,17 @@ -import { - Zondy -} from './Base'; -import { - extend -} from "./Util"; -import { - CDynNoteInfo -} from "./CDynNoteInfo"; -import { - ISShowArc -} from "./EnumComm"; -import { - CLineInfo -} from "./CLineInfo"; -import { - CPointInfo -} from "./CPointInfo"; -import { - CRegionInfo -} from "./CRegionInfo"; +import { Zondy } from './Base'; +import { extend } from './Util'; +import { CDynNoteInfo } from './CDynNoteInfo'; +import { ISShowArc } from './EnumComm'; +import { CLineInfo } from './CLineInfo'; +import { CPointInfo } from './CPointInfo'; +import { CRegionInfo } from './CRegionInfo'; /** * 图层动态显示样式对象 * @class Zondy.Object.DynShowStyle * @classdesc 地图文档显示样式对象构造函数 * @param {Object} option 属性键值对 - * @param {Number} [option.Alpha = 0] 透明度 + * @param {Number} [option.Alpha = 0] 透明度（0-100）,0表示全部显示，100表示隐藏，50表示半透明 * @param {Boolean} [option.BugSpare = false] 是否使用错误处理符号 * @param {Boolean} [option.CustomRender = false] 是否自绘驱动 * @param {String} [option.CustomRenderPath = false] 自绘驱动路径设置 @@ -47,7 +33,7 @@ import { * @see Zondy.Object.CDisplayStyle */ var DynShowStyle = function (option) { - var options = (option !== undefined) ? option : {}; + var options = option !== undefined ? option : {}; extend(this, options); /** @@ -56,7 +42,7 @@ var DynShowStyle = function (option) { * @description 透明度 * @default 0 */ - this.Alpha = (options.Alpha !== undefined) ? options.Alpha : 0; + this.Alpha = options.Alpha !== undefined ? options.Alpha : 0; /** * @member Zondy.Object.DynShowStyle.prototype.BugSpare @@ -64,7 +50,7 @@ var DynShowStyle = function (option) { * @description 是否使用错误处理符号 * @default false */ - this.BugSpare = (options.BugSpare !== undefined) ? options.BugSpare : false; + this.BugSpare = options.BugSpare !== undefined ? options.BugSpare : false; /** * @member Zondy.Object.DynShowStyle.prototype.CustomRender @@ -72,7 +58,7 @@ var DynShowStyle = function (option) { * @description 是否自绘驱动 * @default false */ - this.CustomRender = (options.CustomRender !== undefined) ? options.CustomRender : false; + this.CustomRender = options.CustomRender !== undefined ? options.CustomRender : false; /** * @member Zondy.Object.DynShowStyle.prototype.CustomRenderPath @@ -80,7 +66,7 @@ var DynShowStyle = function (option) { * @description 自绘驱动路径设置 * @default null */ - this.CustomRenderPath = (options.CustomRenderPath !== undefined) ? options.CustomRenderPath : null; + this.CustomRenderPath = options.CustomRenderPath !== undefined ? options.CustomRenderPath : null; /** * @member Zondy.Object.DynShowStyle.prototype.DirectionLineClr @@ -88,7 +74,7 @@ var DynShowStyle = function (option) { * @description 显示的线方向线符号(只适用于其颜色) * @default 0 */ - this.DirectionLineClr = (options.DirectionLineClr !== undefined) ? options.DirectionLineClr : 0; + this.DirectionLineClr = options.DirectionLineClr !== undefined ? options.DirectionLineClr : 0; /** * @member Zondy.Object.DynShowStyle.prototype.DynNoteFlag @@ -96,7 +82,7 @@ var DynShowStyle = function (option) { * @description 是否动态注记 * @default false */ - this.DynNoteFlag = (options.DynNoteFlag !== undefined) ? options.DynNoteFlag : false; + this.DynNoteFlag = options.DynNoteFlag !== undefined ? options.DynNoteFlag : false; /** * @member Zondy.Object.DynShowStyle.prototype.DynNoteInfo @@ -104,7 +90,7 @@ var DynShowStyle = function (option) { * @description 动态注记参数 * @default null */ - this.DynNoteInfo = (options.DynNoteInfo !== undefined) ? options.DynNoteInfo : null; + this.DynNoteInfo = options.DynNoteInfo !== undefined ? options.DynNoteInfo : null; /** * @member Zondy.Object.DynShowStyle.prototype.IsShowArc @@ -113,7 +99,7 @@ var DynShowStyle = function (option) { * 取值范围： 1（Zondy.Enum.ISShowArc.Reg）,2（Zondy.Enum.ISShowArc.Arc）,3（Zondy.Enum.ISShowArc.All） * @default 0 */ - this.IsShowArc = (options.IsShowArc !== undefined) ? options.IsShowArc : 0; + this.IsShowArc = options.IsShowArc !== undefined ? options.IsShowArc : 0; /** * @member Zondy.Object.DynShowStyle.prototype.ISShowLineDirection @@ -121,7 +107,7 @@ var DynShowStyle = function (option) { * @description 是否显示线方向 * @default false */ - this.ISShowLineDirection = (options.ISShowLineDirection !== undefined) ? options.ISShowLineDirection : false; + this.ISShowLineDirection = options.ISShowLineDirection !== undefined ? options.ISShowLineDirection : false; /** * @member Zondy.Object.DynShowStyle.prototype.LineInfo @@ -129,7 +115,7 @@ var DynShowStyle = function (option) { * @description 显示的弧段样式(只适用于其颜色) * @default null */ - this.LineInfo = (options.LineInfo !== undefined) ? options.LineInfo : null; + this.LineInfo = options.LineInfo !== undefined ? options.LineInfo : null; /** * @member Zondy.Object.DynShowStyle.prototype.MaxScale @@ -137,7 +123,7 @@ var DynShowStyle = function (option) { * @description 最大显示比率 * @default 0.00 */ - this.MaxScale = (options.MaxScale !== undefined) ? options.MaxScale : 0.00; + this.MaxScale = options.MaxScale !== undefined ? options.MaxScale : 0.0; /** * @member Zondy.Object.DynShowStyle.prototype.MinScale @@ -145,7 +131,7 @@ var DynShowStyle = function (option) { * @description 最小显示比率 * @default 0.00 */ - this.MinScale = (options.MinScale !== undefined) ? options.MinScale : 0.00; + this.MinScale = options.MinScale !== undefined ? options.MinScale : 0.0; /** * @member Zondy.Object.DynShowStyle.prototype.ShowCoordPnt @@ -153,7 +139,7 @@ var DynShowStyle = function (option) { * @description 显示坐标点 * @default false */ - this.ShowCoordPnt = (options.ShowCoordPnt !== undefined) ? options.ShowCoordPnt : false; + this.ShowCoordPnt = options.ShowCoordPnt !== undefined ? options.ShowCoordPnt : false; /** * @member Zondy.Object.DynShowStyle.prototype.SpareLineInfo @@ -161,7 +147,7 @@ var DynShowStyle = function (option) { * @description 错误处理线符号 * @default null */ - this.SpareLineInfo = (options.SpareLineInfo !== undefined) ? options.SpareLineInfo : null; + this.SpareLineInfo = options.SpareLineInfo !== undefined ? options.SpareLineInfo : null; /** * @member Zondy.Object.DynShowStyle.prototype.SparePointInfo @@ -169,7 +155,7 @@ var DynShowStyle = function (option) { * @description 错误处理点符号 * @default null */ - this.SparePointInfo = (options.SparePointInfo !== undefined) ? options.SparePointInfo : null; + this.SparePointInfo = options.SparePointInfo !== undefined ? options.SparePointInfo : null; /** * @member Zondy.Object.DynShowStyle.prototype.SpareRegInfo @@ -177,7 +163,7 @@ var DynShowStyle = function (option) { * @description 错误处理区符号 * @default null */ - this.SpareRegInfo = (options.SpareRegInfo !== undefined) ? options.SpareRegInfo : null; + this.SpareRegInfo = options.SpareRegInfo !== undefined ? options.SpareRegInfo : null; /** * @member Zondy.Object.DynShowStyle.prototype.SymbleScale @@ -185,9 +171,7 @@ var DynShowStyle = function (option) { * @description 符号显示比例 * @default 0.00 */ - this.SymbleScale = (options.SymbleScale !== undefined) ? options.SymbleScale : 0.00; + this.SymbleScale = options.SymbleScale !== undefined ? options.SymbleScale : 0.0; }; -export { - DynShowStyle -}; -Zondy.Object.DynShowStyle = DynShowStyle; \ No newline at end of file +export { DynShowStyle }; +Zondy.Object.DynShowStyle = DynShowStyle; diff --git a/src/service/common/Util.js b/src/service/common/Util.js index 7811f6795..b3bd907f1 100644 --- a/src/service/common/Util.js +++ b/src/service/common/Util.js @@ -1057,11 +1057,17 @@ var formatQuery = function (query,url,paramArr,formatObj) { if(param.type === "polyline"){ geometry["paths"] = query[key]["paths"]; } + if(param.type === "circle"){ + param.type = "polygon"; + geometry["rings"] = query[key]["rings"]; + } geometry["spatialReference"] = query[key]["spatialReference"]; param = geometry; url += "&geometryType=esriGeometry" + query[key]["type"].charAt(0).toUpperCase() + query[key]["type"].slice(1); + param = encodeURI(JSON.stringify(param)); + }else { + param = JSON.stringify(param); } - param = JSON.stringify(param); } if(formatObj && formatObj.hasOwnProperty(key)){ keyStr = formatObj[key]; diff --git a/src/service/docs/webpack4/mapboxgl/babel.config.js b/src/service/docs/webpack4/mapboxgl/babel.config.js new file mode 100644 index 000000000..3ecebf1a5 --- /dev/null +++ b/src/service/docs/webpack4/mapboxgl/babel.config.js @@ -0,0 +1,3 @@ +module.exports = { + presets: ["@vue/app"] +}; diff --git a/src/service/docs/webpack4/mapboxgl/package.json b/src/service/docs/webpack4/mapboxgl/package.json new file mode 100644 index 000000000..52d0dca5e --- /dev/null +++ b/src/service/docs/webpack4/mapboxgl/package.json @@ -0,0 +1,81 @@ +{ + "name": "@mapgis/webclient-vue-mapboxgl", + "version": "10.5.8", + "description": "中地数码webclient-vue-mapboxgl", + "main": "dist-libs/webclient-vue-mapboxgl.umd.min.js", + "module1": "src/main.js", + "scripts": { + "build": "node --max_old_space_size=8196 ./node_modules/@vue/cli-service/bin/vue-cli-service build --target lib --name webclient-vue-mapboxgl src/main.js", + "serve": "vue-cli-service build --target lib --name webclient-vue-mapboxgl src/index.js --watch", + "lint": "vue-cli-service lint", + "docs:serve": "vuepress dev docs", + "docs:build": "vuepress build docs" + }, + "husky": { + "hooks": { + "pre-commit": "lint-staged" + } + }, + "lint-staged": { + "*.{js,json,css,md}": [ + "prettier --write", + "git add" + ] + }, + "dependencies": { + "@mapbox/mapbox-gl-draw": "^1.3.0", + "@mapbox/mapbox-gl-draw-static-mode": "^1.0.1", + "@mapgis/mapbox-gl": "^1.9.12", + "@mapgis/mapbox-gl-compare": "^0.4.0", + "@mapgis/mapbox-gl-draw-circle": "^10.5.5", + "@mapgis/mapbox-gl-draw-radius": "^1.0.0", + "@mapgis/mapbox-gl-inspect": "^10.5.6", + "@mapgis/webclient-es6-service": "^10.5.8", + "@mapgis/webclient-store": "^10.5.5", + "@mapgis/webclient-vue-ui": "^10.5.8", + "@turf/turf": "^6.5.0", + "echarts": "^5.3.0", + "file-saver": "^2.0.5", + "html2canvas": "^1.4.1", + "map-promisified": "^0.4.0", + "mapbox-gl-draw-circle": "^1.1.2", + "mapbox-gl-draw-rectangle-mode": "^1.0.4", + "mapv": "^2.0.62", + "moment": "^2.29.1", + "node-sql-parser": "^4.1.1", + "postcss-inline-svg": "4.1.0", + "resize-detector": "^0.3.0", + "v-contextmenu": "^2.9.0", + "v-jsoneditor": "^1.4.5", + "vcolorpicker": "^1.1.0", + "vue-runtime-helpers": "^1.1.2", + "vuepress": "^1.9.7" + }, + "devDependencies": { + "@vue/cli-plugin-babel": "^3.2.0", + "@vue/cli-plugin-eslint": "^3.2.1", + "@vue/cli-service": "^3.2.0", + "@vue/eslint-config-prettier": "^4.0.1", + "babel-eslint": "^10.0.1", + "eslint": "^5.10.0", + "eslint-loader": "2.1.1", + "eslint-plugin-prettier": "^3.1.2", + "eslint-plugin-vue": "^6.1.2", + "husky": "^1.2.0", + "less": "3.12.2", + "less-loader": "7.0.2", + "lint-staged": "^8.1.0", + "node-sass": "^4.14.1", + "sass-loader": "10.1.1", + "vue": "^2.6.6", + "vue-cli-plugin-webpack-bundle-analyzer": "^4.0.0", + "vue-template-compiler": "^2.6.6", + "webpack-bundle-analyzer": "^4.4.2" + }, + "keywords": [ + "vue", + "mapbox" + ], + "author": "Wuhan Zondy Cyber Science&Technology Co.Ltd.", + "license": "Apache2" +} diff --git a/src/service/docs/webpack4/mapboxgl/vue.config.js b/src/service/docs/webpack4/mapboxgl/vue.config.js new file mode 100644 index 000000000..62121fc0d --- /dev/null +++ b/src/service/docs/webpack4/mapboxgl/vue.config.js @@ -0,0 +1,31 @@ +module.exports = { + productionSourceMap: false, + outputDir: "dist-libs", + pluginOptions: { + /* webpackBundleAnalyzer: { + openAnalyzer: false + } */ + }, + configureWebpack: { + externals: { + "mapbox-gl": { + commonjs: "mapbox-gl", + commonjs2: "mapbox-gl", + amd: "mapbox-gl", + root: "mapbox-gl" + }, + vue: { + commonjs: "vue", + commonjs2: "vue", + amd: "vue", + root: "vue" + }, + "map-promisified": { + commonjs: "map-promisified", + commonjs2: "map-promisified", + amd: "map-promisified", + root: "map-promisified" + } + } + } +}; diff --git a/src/service/docs/webpack4/service/package.json b/src/service/docs/webpack4/service/package.json new file mode 100644 index 000000000..b6b84437d --- /dev/null +++ b/src/service/docs/webpack4/service/package.json @@ -0,0 +1,28 @@ +{ + "name": "@mapgis/webclient-es6-service", + "version": "10.5.8", + "description": "中地数码基于ES6语法针对igserver的服务封装", + "main": "dist-libs/webclient-es6-service.min.js", + "module1": "index.js", + "scripts": { + "build": "npm run build-debug && npm run build-release", + "build-debug": "webpack --config webpack/service-debug-config.js", + "build-release": "webpack --config webpack/service-release-config.js" + }, + "author": "Wuhan Zondy Cyber Science&Technology Co.Ltd.", + "license": "Apache-2.0", + "dependencies": { + "@turf/turf": "^6.5.0", + "fast-xml-parser": "^3.17.6", + "fetch-ie8": "^1.5.0", + "promise-polyfill": "^8.2.1", + "qs": "^6.9.4" + }, + "devDependencies": { + "happypack": "^5.0.0", + "webpack": "4.19.1", + "webpack-cleanup-plugin": "0.4.2", + "webpack-cli": "2.1.5", + "webpack-parallel-uglify-plugin": "0.4.2" + } +} diff --git a/src/service/docs/webpack4/service/webpack/service-debug-config.js b/src/service/docs/webpack4/service/webpack/service-debug-config.js new file mode 100644 index 000000000..d28aaf02b --- /dev/null +++ b/src/service/docs/webpack4/service/webpack/service-debug-config.js @@ -0,0 +1,42 @@ +var webpack = require('webpack'); +var path = require('path'); +var HappyPack = require('happypack'); //多线程loader 加快编译速度 +var os = require('os'); +var happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length }); + +module.exports = { + mode: 'development', + devtool: 'eval-source-map', + entry: path.join(__dirname, '..', 'index.js'), //已多次提及的唯一入口文件 + output: { + path: path.join(__dirname, '..', 'dist-libs'), //打包后的文件存放的地方 + filename: 'webclient-es6-service.js', //打包后输出文件的文件名 + libraryTarget: 'umd' + }, + externals: {}, + module: { + rules: [ + { + test: /(\.js)$/, + use: 'happypack/loader?id=js', + exclude: [/node_modules/] + } + ] + }, + plugins: [ + new HappyPack({ + id: 'js', + threadPool: happyThreadPool, + loaders: [ + { + loader: 'babel-loader', + options: { + presets: ['es2015'], + cacheDirectory: true, + plugins: ['transform-runtime', 'transform-decorators-legacy', 'transform-class-properties'] + } + } + ] + }) + ] +}; diff --git a/src/service/docs/webpack4/service/webpack/service-release-config.js b/src/service/docs/webpack4/service/webpack/service-release-config.js new file mode 100644 index 000000000..620713a92 --- /dev/null +++ b/src/service/docs/webpack4/service/webpack/service-release-config.js @@ -0,0 +1,52 @@ +var webpack = require('webpack'); +var path = require('path'); + +var HappyPack = require('happypack'); //多线程loader 加快编译速度 +const uglify = require('uglifyjs-webpack-plugin'); +var os = require('os'); +var happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length }); + +module.exports = { + mode: 'none', + entry: path.join(__dirname, '..', 'index.js'), //已多次提及的唯一入口文件 + output: { + path: path.join(__dirname, '..', 'dist-libs'), //打包后的文件存放的地方 + filename: 'webclient-es6-service.min.js', //打包后输出文件的文件名 + libraryTarget: 'umd' + }, + devtool: 'sourcemap', //生成用来调试的map + externals: {}, + module: { + rules: [ + { + test: /(\.js)$/, + use: 'happypack/loader?id=js', + exclude: [/node_modules/] + } + ] + }, + plugins: [ + new HappyPack({ + id: 'js', + threadPool: happyThreadPool, + loaders: [ + { + loader: 'babel-loader', + options: { + presets: ['es2015'], + cacheDirectory: true, + plugins: ['transform-decorators-legacy', 'transform-class-properties'] + } + } + ] + }), + new uglify(), + new webpack.optimize.OccurrenceOrderPlugin(), + new webpack.optimize.AggressiveMergingPlugin(), + new webpack.DefinePlugin({ + 'process.env': { + NODE_ENV: JSON.stringify(process.env.NODE_ENV) + } + }) + ] +}; \ No newline at end of file diff --git a/src/service/docs/webpack5/service/babel.config.json b/src/service/docs/webpack5/service/babel.config.json new file mode 100644 index 000000000..c3867b2e9 --- /dev/null +++ b/src/service/docs/webpack5/service/babel.config.json @@ -0,0 +1,19 @@ +{ + "presets": [ + [ + "@babel/preset-env", + { + "targets": { + "edge": "17", + "firefox": "60", + "chrome": "67", + "safari": "11.1" + }, + "useBuiltIns": "usage", + "corejs": "3.21.1" // 2.6.12 3.21.1 + } + ] + ], + "plugins": ["@babel/plugin-transform-runtime"], + "sourceType": "unambiguous" +} diff --git a/src/service/docs/webpack5/service/package.json b/src/service/docs/webpack5/service/package.json new file mode 100644 index 000000000..c15cbf9f4 --- /dev/null +++ b/src/service/docs/webpack5/service/package.json @@ -0,0 +1,37 @@ +{ + "name": "@mapgis/webclient-es6-service", + "version": "10.5.8", + "description": "中地数码基于ES6语法针对igserver的服务封装", + "main": "dist-libs/webclient-es6-service.min.js", + "module1": "index.js", + "scripts": { + "build": "npm run build-debug && npm run build-release", + "build-debug": "webpack --config webpack/service-debug-config.js", + "build-release": "webpack --config webpack/service-release-config.js" + }, + "author": "Wuhan Zondy Cyber Science&Technology Co.Ltd.", + "license": "Apache-2.0", + "dependencies": { + "@turf/turf": "^6.5.0", + "fast-xml-parser": "^3.17.6", + "core-js": "^3.21.1", + "fetch-ie8": "^1.5.0", + "promise-polyfill": "^8.2.1", + "qs": "^6.9.4" + }, + "devDependencies": { + "@babel/cli": "^7.17.6", + "@babel/core": "^7.17.5", + "@babel/plugin-transform-runtime": "^7.17.0", + "@babel/preset-env": "^7.16.11", + "babel-loader": "^8.2.3", + "compression-webpack-plugin": "^9.2.0", + "css-loader": "^6.5.1", + "sass-loader": "^12.4.0", + "style-loader": "^3.3.1", + "terser-webpack-plugin": "^5.3.1", + "ts-loader": "^9.2.6", + "webpack": "^5.69.1", + "webpack-cli": "^4.9.2" + } +} diff --git "a/src/service/docs/\347\274\226\350\257\221\346\265\201\347\250\213.pdf" "b/src/service/docs/\347\274\226\350\257\221\346\265\201\347\250\213.pdf" new file mode 100644 index 000000000..02bc1d9d7 Binary files /dev/null and "b/src/service/docs/\347\274\226\350\257\221\346\265\201\347\250\213.pdf" differ diff --git "a/src/service/docs/\347\274\226\350\257\221\346\265\201\347\250\213.png" "b/src/service/docs/\347\274\226\350\257\221\346\265\201\347\250\213.png" new file mode 100644 index 000000000..49fa35ce0 Binary files /dev/null and "b/src/service/docs/\347\274\226\350\257\221\346\265\201\347\250\213.png" differ diff --git "a/src/service/docs/\347\274\226\350\257\221\346\265\201\347\250\213.vsdx" "b/src/service/docs/\347\274\226\350\257\221\346\265\201\347\250\213.vsdx" new file mode 100644 index 000000000..88002adfa Binary files /dev/null and "b/src/service/docs/\347\274\226\350\257\221\346\265\201\347\250\213.vsdx" differ diff --git a/src/service/index copy.js b/src/service/index copy.js deleted file mode 100644 index c30b2108b..000000000 --- a/src/service/index copy.js +++ /dev/null @@ -1,545 +0,0 @@ -import { - AnyLine, - Arc, - Zondy, - CAttStruct, - CAttDataRow, - CDisplayStyle, - CDisplayStyleExtend, - CDynNoteInfo, - CGDBInfo, - Circle, - CLineInfo, - CPointInfo, - CRegionInfo, - DynNoteLableType, - DynShowStyle, - XClsType, - VectClsType, - FeatureType, - FontShape, - LabelLinType, - LabelRegType, - LabelPntType, - RepeatType, - LabelSpreadType, - LineConstrain, - EightDirType, - ISShowArc, - NetAnalyType, - NetElemType, - CLinAdjustType, - CLinHeadType, - CLinJointType, - CLinStyleMakeType, - CItemType, - MapType, - LayerStatusType, - Feature, - FeatureGeometry, - FeatureGraphicBase, - FeatureSet, - GLine, - GPoint, - GRegion, - LabelLinInfo, - LabelRegInfo, - LablePntInfo, - MultiPolygon, - Point2D, - Polygon, - PolyLine, - Rectangle, - Tangram, - VectCls, - WebGraphicsInfo, - extend, - isArray, - extendDeep, - copy, - copyExcluce, - reset, - getElement, - isElement, - removeItem, - indexOf, - modifyDOMElement, - applyDefaults, - getParameterString, - getWFParameterString, - urlAppend, - getParameters, - IS_GECKO, - Browser, - getBrowser, - isSupportCanvas, - supportCanvas, - isInTheSameDomain, - toJSON, - transformResult, - copyAttributes, - copyAttributesWithClip, - cloneObject, - newGuid, - bind, - bindAsEventListener, - getTopAnalysisResult, - ChineseToUtf8, - DeepMerge, - merge, - mixin -} from './common'; - -export const Common = { - AnyLine, - Arc, - Zondy, - CAttStruct, - CAttDataRow, - CDisplayStyle, - CDisplayStyleExtend, - CDynNoteInfo, - CGDBInfo, - Circle, - CLineInfo, - CPointInfo, - CRegionInfo, - DynNoteLableType, - DynShowStyle, - XClsType, - VectClsType, - FeatureType, - FontShape, - LabelLinType, - LabelRegType, - LabelPntType, - RepeatType, - LabelSpreadType, - LineConstrain, - EightDirType, - ISShowArc, - NetAnalyType, - NetElemType, - CLinAdjustType, - CLinHeadType, - CLinJointType, - CLinStyleMakeType, - CItemType, - MapType, - LayerStatusType, - Feature, - FeatureGeometry, - FeatureGraphicBase, - FeatureSet, - GLine, - GPoint, - GRegion, - LabelLinInfo, - LabelRegInfo, - LablePntInfo, - MultiPolygon, - Point2D, - Polygon, - PolyLine, - Rectangle, - Tangram, - VectCls, - WebGraphicsInfo, - extend, - isArray, - extendDeep, - copy, - copyExcluce, - reset, - getElement, - isElement, - removeItem, - indexOf, - modifyDOMElement, - applyDefaults, - getParameterString, - getWFParameterString, - urlAppend, - getParameters, - IS_GECKO, - Browser, - getBrowser, - isSupportCanvas, - supportCanvas, - isInTheSameDomain, - toJSON, - transformResult, - copyAttributes, - copyAttributesWithClip, - cloneObject, - newGuid, - bind, - bindAsEventListener, - getTopAnalysisResult, - ChineseToUtf8, - DeepMerge, - merge, - mixin -}; - -import { - ContourNoteParam, - ContourParam, - ContourZValue, - ContourRegionInfo, - MeshingParam, - NetAnalyse, - NetAnalysisExtent, - SlopLineParam, - RuleParse -} from './Igserver/extend'; - -export const Extend = { - ContourNoteParam, - ContourParam, - ContourZValue, - ContourRegionInfo, - MeshingParam, - NetAnalyse, - NetAnalysisExtent, - SlopLineParam, - RuleParse -}; - -import { G3DMapDoc, G3DService } from './Igserver/G3D'; - -export const G3D = { - G3DMapDoc, - G3DService -}; - -import { CommonServiceBase, Events, CORS, RequestTimeout, FetchRequest, IgsServiceBase, JSONFormat } from './baseserver'; - -export const BaseServer = { - CommonServiceBase, - Events, - CORS, - RequestTimeout, - FetchRequest, - IgsServiceBase, - JSONFormat -}; - -import { ColorInfo, GDBInfo, MapDoc, CatalogService, TileLayer, VectorLayer, SystomInfo } from './Igserver/MRCS'; - -export const MRCS = { - ColorInfo, - GDBInfo, - MapDoc, - CatalogService, - TileLayer, - VectorLayer, - SystomInfo -}; - -import { - EditDocFeature, - EditLayerFeature, - EditServiceBase, - MultiGeoQuery, - MultiGeoQueryParameter, - ObjClsQuery, - ObjClsQueryParameter, - QueryByLayerParameter, - QueryDocFeature, - QueryFeatureRule, - QueryFeatureStruct, - QueryLayerFeature, - QueryParameter, - QueryParameterBase, - QueryServiceBase, - QueryUnifyParameter, - SQLParameter, - GeometryParameter, - FeatureService, - VFeature -} from './Igserver/MRFS'; - -export const MRFS = { - EditDocFeature, - EditLayerFeature, - EditServiceBase, - MultiGeoQuery, - MultiGeoQueryParameter, - ObjClsQuery, - ObjClsQueryParameter, - QueryByLayerParameter, - QueryDocFeature, - QueryFeatureRule, - QueryFeatureStruct, - QueryLayerFeature, - QueryParameter, - QueryParameterBase, - QueryServiceBase, - QueryUnifyParameter, - SQLParameter, - GeometryParameter, - VFeature, - FeatureService -}; - -import { - AnalysisBase, - ClassBufferBase, - ClassBufferByMultiplyRing, - ClassBufferBySingleRing, - ClipBase, - ClipByCircle, - ClipByLayer, - ClipByPolygon, - ContourAnalyse, - FeatureBuffBase, - FeatureBuffByMultiplyRing, - FeatureBuffBySingleRing, - NetAnalysis, - OverlayBase, - OverlayByLayer, - OverlayByPolygon, - ProjectBase, - ProjectByLayer, - ProjectBySRID -} from './Igserver/MRFWS'; - -export const MRFWS = { - AnalysisBase, - ClassBufferBase, - ClassBufferByMultiplyRing, - ClassBufferBySingleRing, - ClipBase, - ClipByCircle, - ClipByLayer, - ClipByPolygon, - ContourAnalyse, - FeatureBuffBase, - FeatureBuffByMultiplyRing, - FeatureBuffBySingleRing, - NetAnalysis, - OverlayBase, - OverlayByLayer, - OverlayByPolygon, - ProjectBase, - ProjectByLayer, - ProjectBySRID -}; - -import { - CalArea, - CalPolyLineLength, - CalServiceBase, - CProjectBySRSID, - CProjectParam, - GeometryAnalysisBase, - ProjectDots, - ProjectRang, - Smooth, - TopAnalysis -} from './Igserver/MRGS'; - -export const MRGS = { - CalArea, - CalPolyLineLength, - CalServiceBase, - CProjectBySRSID, - CProjectParam, - GeometryAnalysisBase, - ProjectDots, - ProjectRang, - Smooth, - TopAnalysis -}; - -import { - GetDocImageService, - GetLayerImageService, - GetMapImageService, - GetMapInfoService, - GetTileImageService, - MapServiceBase -} from './Igserver/MRMS'; - -export const MRMS = { - GetDocImageService, - GetLayerImageService, - GetMapImageService, - GetMapInfoService, - GetTileImageService, - MapServiceBase -}; - -import { - CAllOtherDataItemInfoSource, - CAnnInfo, - CChartLabelFormat, - CChartTheme, - CChartThemeInfo, - CChartThemeRepresentInfo, - CChartType, - CDotDensityTheme, - CFourColorTheme, - CGraduatedSymbolTheme, - CLinInfo, - CMultiClassTheme, - CPntInfo, - CRandomTheme, - CRangeTheme, - CRangeThemeInfo, - CRegInfo, - CSimpleTheme, - CTheme, - CThemeInfo, - CUniqueTheme, - CUniqueThemeInfo, - ExpInfo, - FolderInfo, - FolderInfoAttribute, - ItemValue, - ThemeOper, - ThemesInfo -} from './Igserver/theme'; - -export const Info = { - CAllOtherDataItemInfoSource, - CAnnInfo, - CChartLabelFormat, - CChartTheme, - CChartThemeInfo, - CChartThemeRepresentInfo, - CChartType, - CDotDensityTheme, - CFourColorTheme, - CGraduatedSymbolTheme, - CLinInfo, - CMultiClassTheme, - CPntInfo, - CRandomTheme, - CRangeTheme, - CRangeThemeInfo, - CRegInfo, - CSimpleTheme, - CTheme, - CThemeInfo, - CUniqueTheme, - CUniqueThemeInfo, - ExpInfo, - FolderInfo, - FolderInfoAttribute, - ItemValue, - ThemeOper, - ThemesInfo -}; - -import { WMSCapabilities, WMTSCapabilities, OGCWMTSInfo, OGCWMSInfo } from './OGC'; -import { WMS, WFS } from './OpenGeospatialConsortium'; - -export const OGC = { - WMSCapabilities, - WMTSCapabilities, - OGCWMTSInfo, - OGCWMSInfo, - WMS, - WFS -}; - -import { - EsCatlogType, - EsCatlogName, - EsGeoHashType, - EsCatlogService, - ESGeoCode, - ESGeoDecode, - ESQueryStats, - EsTableService, - EsSpaceTimeQueryByAgg -} from './datastore/elasticsearch'; - -import { - PostgisCatlogService, - PostgisCustomQueryService, - PostgisQueryService, - PostgisTableService, - PostgisVectorTileService -} from './datastore/postgis'; - -export const ElasticSearch = { - EsCatlogType, - EsCatlogName, - EsGeoHashType, - EsCatlogService, - ESGeoCode, - ESGeoDecode, - ESQueryStats, - EsTableService, - EsSpaceTimeQueryByAgg -}; - -export const PostGIS = { - PostgisCatlogService, - PostgisCustomQueryService, - PostgisQueryService, - PostgisTableService, - PostgisVectorTileService -}; - -export const DataStore = { - EsCatlogType, - EsCatlogName, - EsGeoHashType, - EsCatlogService, - ESGeoCode, - ESGeoDecode, - ESQueryStats, - EsTableService, - EsSpaceTimeQueryByAgg -}; - -import { UserService, GeoDatasetService, CalculateModelService } from './clouddisk'; - -export const CloudDisk = { - UserService, - GeoDatasetService, - CalculateModelService -}; - -import { - ArcGisFeatureLayer, - ArcGisFindParameters, - ArcGisFindTask, - ArcGisIdentifyTask, - ArcGisIdentifyParameters, - ArcGisGeometry, - ArcGisQuery, - ArcGisQueryTask, - ArcGisPoint, - ArcGisMultipoint, - ArcGisPolyline, - ArcGisPolygon, - ArcGisGraphic, - ArcGisExtent -} from './ArcGis'; - -export const ArcGis = { - ArcGisFeatureLayer, - ArcGisFindParameters, - ArcGisFindTask, - ArcGisIdentifyTask, - ArcGisIdentifyParameters, - ArcGisGeometry, - ArcGisQuery, - ArcGisQueryTask, - ArcGisPoint, - ArcGisMultipoint, - ArcGisPolyline, - ArcGisPolygon, - ArcGisGraphic, - ArcGisExtent -}; -export default { - MRFS, - MRFWS, - ArcGis -}; diff --git a/src/service/index.js b/src/service/index.js index 203962b75..43a1ddac5 100644 --- a/src/service/index.js +++ b/src/service/index.js @@ -1,3 +1,20 @@ +/* + * @Description: + * @Author: zk + * @Date: 2022-05-10 12:45:10 + * @LastEditors: zk + * @LastEditTime: 2022-06-22 19:49:31 + */ +//-------命名空间 mapgis 开始----- +import * as Util from './utils'; +import * as Symbol from './base/symbols'; +import * as Style from './base/style'; +import * as Renderer from './base/renderer'; +import * as geoJSON from './base/format/geojson'; +import * as Crs from './base/crs'; +//-------命名空间 mapgis 结束----- + +//-------命名空间 Zondy 开始----- import * as Common from './common'; import BaseServer from './baseserver'; import { Extend, G3D, MRCS, MRFS, MRFWS, MRGS, MRMS, Info } from './Igserver'; @@ -19,9 +36,41 @@ import PostGIS from './datastore/postgis'; import CloudDisk from './clouddisk'; import ArcGis from './ArcGis'; -export { Common, BaseServer, Extend, G3D, MRCS, MRFS, MRFWS, MRGS, MRMS, Info, OGC, ElasticSearch, PostGIS, CloudDisk, ArcGis }; +export { + Util, + Symbol, + Style, + Renderer, + geoJSON, + Crs, + Common, + BaseServer, + Extend, + G3D, + MRCS, + MRFS, + MRFWS, + MRGS, + MRMS, + Info, + OGC, + ElasticSearch, + PostGIS, + CloudDisk, + ArcGis +}; +//-------命名空间 Zondy 结束----- const All = { + //-------命名空间 mapgis 开始----- + Symbol, + Style, + Renderer, + geoJSON, + Util, + Crs, + //-------命名空间 mapgis 结束----- + //-------命名空间 Zondy 开始----- Common, BaseServer, // igserver @@ -39,6 +88,7 @@ const All = { PostGIS, CloudDisk, ArcGis + //-------命名空间 Zondy 结束----- }; export default All; diff --git a/src/service/package.json b/src/service/package.json index 9629654f9..13ebcb242 100644 --- a/src/service/package.json +++ b/src/service/package.json @@ -1,20 +1,26 @@ { "name": "@mapgis/webclient-es6-service", - "version": "10.5.4", + "version": "15.6.1", "description": "中地数码基于ES6语法针对igserver的服务封装", - "main": "dist-libs/webclient-es6-service.min.js", + "main1": "dist-libs/webclient-es6-service.min.js", "module": "index.js", "scripts": { "build": "npm run build-debug && npm run build-release", "build-debug": "webpack --config webpack/service-debug-config.js", "build-release": "webpack --config webpack/service-release-config.js" }, - "author": "mapgis", - "license": "Apache2", + "author": "Wuhan Zondy Cyber Science&Technology Co.Ltd.", + "license": "Apache-2.0", "dependencies": { - "@turf/turf": "^6.3.0", + "@turf/turf": "^6.5.0", + "axios": "^0.26.0", + "core-js": "^3.21.1", "fast-xml-parser": "^3.17.6", - "qs": "^6.9.4" + "fetch-ie8": "^1.5.0", + "proj4": "^2.7.5", + "promise-polyfill": "^8.2.1", + "qs": "^6.9.4", + "svg-pathdata": "^6.0.0" }, "devDependencies": { "happypack": "^5.0.0", diff --git a/src/service/uml/Symbols.mdj b/src/service/uml/Symbols.mdj new file mode 100644 index 000000000..2816a6a59 --- /dev/null +++ b/src/service/uml/Symbols.mdj @@ -0,0 +1,18065 @@ +{ + "_type": "Project", + "_id": "AAAAAAFF+h6SjaM2Hec=", + "name": "Untitled", + "ownedElements": [ + { + "_type": "UMLModel", + "_id": "AAAAAAFF+qBWK6M3Z8Y=", + "_parent": { + "$ref": "AAAAAAFF+h6SjaM2Hec=" + }, + "name": "Model", + "ownedElements": [ + { + "_type": "UMLClassDiagram", + "_id": "AAAAAAFF+qBtyKM79qY=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "Main", + "defaultDiagram": true, + "ownedViews": [ + { + "_type": "UMLClassView", + "_id": "AAAAAAGAO1MYek/JnBg=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAO1MYeU/HxR0=" + }, + "subViews": [ + { + "_type": "UMLNameCompartmentView", + "_id": "AAAAAAGAO1MYek/KY2Y=", + "_parent": { + "$ref": "AAAAAAGAO1MYek/JnBg=" + }, + "model": { + "$ref": "AAAAAAGAO1MYeU/HxR0=" + }, + "subViews": [ + { + "_type": "LabelView", + "_id": "AAAAAAGAO1MYek/LgeU=", + "_parent": { + "$ref": "AAAAAAGAO1MYek/KY2Y=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2656, + "top": 1856, + "height": 13 + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAO1MYe0/M6PU=", + "_parent": { + "$ref": "AAAAAAGAO1MYek/KY2Y=" + }, + "font": "Arial;13;3", + "left": 1469, + "top": 1047, + "width": 80.57080078125, + "height": 13, + "text": "Symbol" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAO1MYe0/N9fA=", + "_parent": { + "$ref": "AAAAAAGAO1MYek/KY2Y=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2656, + "top": 1856, + "width": 73.67724609375, + "height": 13, + "text": "(from Model)" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAO1MYe0/OGZc=", + "_parent": { + "$ref": "AAAAAAGAO1MYek/KY2Y=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2656, + "top": 1856, + "height": 13, + "horizontalAlignment": 1 + } + ], + "font": "Arial;13;0", + "left": 1464, + "top": 1040, + "width": 90.57080078125, + "height": 25, + "stereotypeLabel": { + "$ref": "AAAAAAGAO1MYek/LgeU=" + }, + "nameLabel": { + "$ref": "AAAAAAGAO1MYe0/M6PU=" + }, + "namespaceLabel": { + "$ref": "AAAAAAGAO1MYe0/N9fA=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAO1MYe0/OGZc=" + } + }, + { + "_type": "UMLAttributeCompartmentView", + "_id": "AAAAAAGAO1MYe0/PFXM=", + "_parent": { + "$ref": "AAAAAAGAO1MYek/JnBg=" + }, + "model": { + "$ref": "AAAAAAGAO1MYeU/HxR0=" + }, + "subViews": [ + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAO1M4vE/0AZw=", + "_parent": { + "$ref": "AAAAAAGAO1MYe0/PFXM=" + }, + "model": { + "$ref": "AAAAAAGAO1M4mE/xJtQ=" + }, + "font": "Arial;13;0", + "left": 1469, + "top": 1070, + "width": 80.57080078125, + "height": 13, + "text": "+type", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAO1NDbU/6l7g=", + "_parent": { + "$ref": "AAAAAAGAO1MYe0/PFXM=" + }, + "model": { + "$ref": "AAAAAAGAO1NDTE/3Mpo=" + }, + "font": "Arial;13;0", + "left": 1469, + "top": 1085, + "width": 80.57080078125, + "height": 13, + "text": "+color", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAO1NF21AAY2Y=", + "_parent": { + "$ref": "AAAAAAGAO1MYe0/PFXM=" + }, + "model": { + "$ref": "AAAAAAGAO1NFuk/9tZ0=" + }, + "font": "Arial;13;0", + "left": 1469, + "top": 1100, + "width": 80.57080078125, + "height": 13, + "text": "-opacity", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 1464, + "top": 1065, + "width": 90.57080078125, + "height": 53 + }, + { + "_type": "UMLOperationCompartmentView", + "_id": "AAAAAAGAO1MYe0/Qbfc=", + "_parent": { + "$ref": "AAAAAAGAO1MYek/JnBg=" + }, + "model": { + "$ref": "AAAAAAGAO1MYeU/HxR0=" + }, + "subViews": [ + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAO1QI21AKpLU=", + "_parent": { + "$ref": "AAAAAAGAO1MYe0/Qbfc=" + }, + "model": { + "$ref": "AAAAAAGAO1QIuVAHl58=" + }, + "font": "Arial;13;0", + "left": 1469, + "top": 1123, + "width": 80.57080078125, + "height": 13, + "text": "+fromJSON()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAO1QR1VAQzNY=", + "_parent": { + "$ref": "AAAAAAGAO1MYe0/Qbfc=" + }, + "model": { + "$ref": "AAAAAAGAO1QRq1ANbHM=" + }, + "font": "Arial;13;0", + "left": 1469, + "top": 1138, + "width": 80.57080078125, + "height": 13, + "text": "+toJSON()", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 1464, + "top": 1118, + "width": 90.57080078125, + "height": 38 + }, + { + "_type": "UMLReceptionCompartmentView", + "_id": "AAAAAAGAO1MYe0/RU/o=", + "_parent": { + "$ref": "AAAAAAGAO1MYek/JnBg=" + }, + "model": { + "$ref": "AAAAAAGAO1MYeU/HxR0=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1328, + "top": 928, + "width": 10, + "height": 10 + }, + { + "_type": "UMLTemplateParameterCompartmentView", + "_id": "AAAAAAGAO1MYe0/S0T0=", + "_parent": { + "$ref": "AAAAAAGAO1MYek/JnBg=" + }, + "model": { + "$ref": "AAAAAAGAO1MYeU/HxR0=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1328, + "top": 928, + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "containerChangeable": true, + "left": 1464, + "top": 1040, + "width": 90.57080078125, + "height": 116, + "nameCompartment": { + "$ref": "AAAAAAGAO1MYek/KY2Y=" + }, + "attributeCompartment": { + "$ref": "AAAAAAGAO1MYe0/PFXM=" + }, + "operationCompartment": { + "$ref": "AAAAAAGAO1MYe0/Qbfc=" + }, + "receptionCompartment": { + "$ref": "AAAAAAGAO1MYe0/RU/o=" + }, + "templateParameterCompartment": { + "$ref": "AAAAAAGAO1MYe0/S0T0=" + } + }, + { + "_type": "UMLClassView", + "_id": "AAAAAAGAO4K5hlAZreY=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAO4K5hVAX2y8=" + }, + "subViews": [ + { + "_type": "UMLNameCompartmentView", + "_id": "AAAAAAGAO4K5hlAaHxg=", + "_parent": { + "$ref": "AAAAAAGAO4K5hlAZreY=" + }, + "model": { + "$ref": "AAAAAAGAO4K5hVAX2y8=" + }, + "subViews": [ + { + "_type": "LabelView", + "_id": "AAAAAAGAO4K5hlAbL2E=", + "_parent": { + "$ref": "AAAAAAGAO4K5hlAaHxg=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2128, + "top": 1872, + "height": 13 + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAO4K5hlAcyhk=", + "_parent": { + "$ref": "AAAAAAGAO4K5hlAaHxg=" + }, + "font": "Arial;13;3", + "left": 1181, + "top": 1287, + "width": 89.5908203125, + "height": 13, + "text": "MarkerSymbol" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAO4K5hlAdskM=", + "_parent": { + "$ref": "AAAAAAGAO4K5hlAaHxg=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2128, + "top": 1872, + "width": 73.67724609375, + "height": 13, + "text": "(from Model)" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAO4K5hlAe7O4=", + "_parent": { + "$ref": "AAAAAAGAO4K5hlAaHxg=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2128, + "top": 1872, + "height": 13, + "horizontalAlignment": 1 + } + ], + "font": "Arial;13;0", + "left": 1176, + "top": 1280, + "width": 99.5908203125, + "height": 25, + "stereotypeLabel": { + "$ref": "AAAAAAGAO4K5hlAbL2E=" + }, + "nameLabel": { + "$ref": "AAAAAAGAO4K5hlAcyhk=" + }, + "namespaceLabel": { + "$ref": "AAAAAAGAO4K5hlAdskM=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAO4K5hlAe7O4=" + } + }, + { + "_type": "UMLAttributeCompartmentView", + "_id": "AAAAAAGAO4K5hlAfRpQ=", + "_parent": { + "$ref": "AAAAAAGAO4K5hlAZreY=" + }, + "model": { + "$ref": "AAAAAAGAO4K5hVAX2y8=" + }, + "subViews": [ + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAO4p0BZr4gb8=", + "_parent": { + "$ref": "AAAAAAGAO4K5hlAfRpQ=" + }, + "model": { + "$ref": "AAAAAAGAO4pz5Zr153M=" + }, + "font": "Arial;13;0", + "left": 1181, + "top": 1310, + "width": 89.5908203125, + "height": 13, + "text": "+type", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAO4mT4prSiMQ=", + "_parent": { + "$ref": "AAAAAAGAO4K5hlAfRpQ=" + }, + "model": { + "$ref": "AAAAAAGAO4mTwJrPb7w=" + }, + "font": "Arial;13;0", + "left": 1181, + "top": 1325, + "width": 89.5908203125, + "height": 13, + "text": "+angle", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAO4qdoZsDpGc=", + "_parent": { + "$ref": "AAAAAAGAO4K5hlAfRpQ=" + }, + "model": { + "$ref": "AAAAAAGAO4qdgZsAE80=" + }, + "font": "Arial;13;0", + "left": 1181, + "top": 1340, + "width": 89.5908203125, + "height": 13, + "text": "+color", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAO4mfvZrYhZg=", + "_parent": { + "$ref": "AAAAAAGAO4K5hlAfRpQ=" + }, + "model": { + "$ref": "AAAAAAGAO4mfnZrVlig=" + }, + "font": "Arial;13;0", + "left": 1181, + "top": 1355, + "width": 89.5908203125, + "height": 13, + "text": "+xoffset", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAO4mirJreNX8=", + "_parent": { + "$ref": "AAAAAAGAO4K5hlAfRpQ=" + }, + "model": { + "$ref": "AAAAAAGAO4mihZrbRuU=" + }, + "font": "Arial;13;0", + "left": 1181, + "top": 1370, + "width": 89.5908203125, + "height": 13, + "text": "+yoffset", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 1176, + "top": 1305, + "width": 99.5908203125, + "height": 83 + }, + { + "_type": "UMLOperationCompartmentView", + "_id": "AAAAAAGAO4K5hlAg2rk=", + "_parent": { + "$ref": "AAAAAAGAO4K5hlAZreY=" + }, + "model": { + "$ref": "AAAAAAGAO4K5hVAX2y8=" + }, + "subViews": [ + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAO4niGZrnj9g=", + "_parent": { + "$ref": "AAAAAAGAO4K5hlAg2rk=" + }, + "model": { + "$ref": "AAAAAAGAO4nh+prkPOw=" + }, + "font": "Arial;13;0", + "left": 1181, + "top": 1393, + "width": 89.5908203125, + "height": 13, + "text": "+fromJSON()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAO4n8uZruYQg=", + "_parent": { + "$ref": "AAAAAAGAO4K5hlAg2rk=" + }, + "model": { + "$ref": "AAAAAAGAO4n8mJrrxks=" + }, + "font": "Arial;13;0", + "left": 1181, + "top": 1408, + "width": 89.5908203125, + "height": 13, + "text": "+toJSON()", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 1176, + "top": 1388, + "width": 99.5908203125, + "height": 38 + }, + { + "_type": "UMLReceptionCompartmentView", + "_id": "AAAAAAGAO4K5hlAh8MY=", + "_parent": { + "$ref": "AAAAAAGAO4K5hlAZreY=" + }, + "model": { + "$ref": "AAAAAAGAO4K5hVAX2y8=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1064, + "top": 936, + "width": 10, + "height": 10 + }, + { + "_type": "UMLTemplateParameterCompartmentView", + "_id": "AAAAAAGAO4K5hlAi2GE=", + "_parent": { + "$ref": "AAAAAAGAO4K5hlAZreY=" + }, + "model": { + "$ref": "AAAAAAGAO4K5hVAX2y8=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1064, + "top": 936, + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "containerChangeable": true, + "left": 1176, + "top": 1280, + "width": 99.5908203125, + "height": 146, + "nameCompartment": { + "$ref": "AAAAAAGAO4K5hlAaHxg=" + }, + "attributeCompartment": { + "$ref": "AAAAAAGAO4K5hlAfRpQ=" + }, + "operationCompartment": { + "$ref": "AAAAAAGAO4K5hlAg2rk=" + }, + "receptionCompartment": { + "$ref": "AAAAAAGAO4K5hlAh8MY=" + }, + "templateParameterCompartment": { + "$ref": "AAAAAAGAO4K5hlAi2GE=" + } + }, + { + "_type": "UMLGeneralizationView", + "_id": "AAAAAAGAO4k9eZq+zz8=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAO4k9d5q8o/w=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAO4k9eZq/7Fk=", + "_parent": { + "$ref": "AAAAAAGAO4k9eZq+zz8=" + }, + "model": { + "$ref": "AAAAAAGAO4k9d5q8o/w=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1359, + "top": 1204, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAO4k9eZq+zz8=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAO4k9eprAyRg=", + "_parent": { + "$ref": "AAAAAAGAO4k9eZq+zz8=" + }, + "model": { + "$ref": "AAAAAAGAO4k9d5q8o/w=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 1349, + "top": 1193, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAO4k9eZq+zz8=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAO4k9eprBcRg=", + "_parent": { + "$ref": "AAAAAAGAO4k9eZq+zz8=" + }, + "model": { + "$ref": "AAAAAAGAO4k9d5q8o/w=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1378, + "top": 1227, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAO4k9eZq+zz8=" + }, + "edgePosition": 1 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAO1MYek/JnBg=" + }, + "tail": { + "$ref": "AAAAAAGAO4K5hlAZreY=" + }, + "lineStyle": 1, + "points": "1276:1306;1463:1138", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAO4k9eZq/7Fk=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAO4k9eprAyRg=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAO4k9eprBcRg=" + } + }, + { + "_type": "UMLClassView", + "_id": "AAAAAAGAO5gALZsP5fo=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAO5gALZsNaqc=" + }, + "subViews": [ + { + "_type": "UMLNameCompartmentView", + "_id": "AAAAAAGAO5gALZsQXyM=", + "_parent": { + "$ref": "AAAAAAGAO5gALZsP5fo=" + }, + "model": { + "$ref": "AAAAAAGAO5gALZsNaqc=" + }, + "subViews": [ + { + "_type": "LabelView", + "_id": "AAAAAAGAO5gALZsREwU=", + "_parent": { + "$ref": "AAAAAAGAO5gALZsQXyM=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1968, + "top": 1888, + "height": 13 + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAO5gALZsSpDs=", + "_parent": { + "$ref": "AAAAAAGAO5gALZsQXyM=" + }, + "font": "Arial;13;1", + "left": 1141, + "top": 1503, + "width": 168.0224609375, + "height": 13, + "text": "SimpleMarkerSymbol" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAO5gALpsT33s=", + "_parent": { + "$ref": "AAAAAAGAO5gALZsQXyM=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1968, + "top": 1888, + "width": 73.67724609375, + "height": 13, + "text": "(from Model)" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAO5gALpsUJRw=", + "_parent": { + "$ref": "AAAAAAGAO5gALZsQXyM=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1968, + "top": 1888, + "height": 13, + "horizontalAlignment": 1 + } + ], + "font": "Arial;13;0", + "left": 1136, + "top": 1496, + "width": 178.0224609375, + "height": 25, + "stereotypeLabel": { + "$ref": "AAAAAAGAO5gALZsREwU=" + }, + "nameLabel": { + "$ref": "AAAAAAGAO5gALZsSpDs=" + }, + "namespaceLabel": { + "$ref": "AAAAAAGAO5gALpsT33s=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAO5gALpsUJRw=" + } + }, + { + "_type": "UMLAttributeCompartmentView", + "_id": "AAAAAAGAO5gALpsV0BA=", + "_parent": { + "$ref": "AAAAAAGAO5gALZsP5fo=" + }, + "model": { + "$ref": "AAAAAAGAO5gALZsNaqc=" + }, + "subViews": [ + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAO5hkWZtP8PU=", + "_parent": { + "$ref": "AAAAAAGAO5gALpsV0BA=" + }, + "model": { + "$ref": "AAAAAAGAO5hkNptMOqw=" + }, + "font": "Arial;13;0", + "left": 1141, + "top": 1526, + "width": 168.0224609375, + "height": 13, + "text": "+type", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAO5hwcZtVFjw=", + "_parent": { + "$ref": "AAAAAAGAO5gALpsV0BA=" + }, + "model": { + "$ref": "AAAAAAGAO5hwUJtS32g=" + }, + "font": "Arial;13;0", + "left": 1141, + "top": 1541, + "width": 168.0224609375, + "height": 13, + "text": "+angle", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAO5hyo5tbu24=", + "_parent": { + "$ref": "AAAAAAGAO5gALpsV0BA=" + }, + "model": { + "$ref": "AAAAAAGAO5hygptYMPQ=" + }, + "font": "Arial;13;0", + "left": 1141, + "top": 1556, + "width": 168.0224609375, + "height": 13, + "text": "+color", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAO5pIyZug9DU=", + "_parent": { + "$ref": "AAAAAAGAO5gALpsV0BA=" + }, + "model": { + "$ref": "AAAAAAGAO5pIqJud5fM=" + }, + "font": "Arial;13;0", + "left": 1141, + "top": 1571, + "width": 168.0224609375, + "height": 13, + "text": "+outline: SimpleLineSymbol", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAO5h1Fpth6Io=", + "_parent": { + "$ref": "AAAAAAGAO5gALpsV0BA=" + }, + "model": { + "$ref": "AAAAAAGAO5h09pteLz4=" + }, + "font": "Arial;13;0", + "left": 1141, + "top": 1586, + "width": 168.0224609375, + "height": 13, + "text": "+path", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAO5h3AJtnyLU=", + "_parent": { + "$ref": "AAAAAAGAO5gALpsV0BA=" + }, + "model": { + "$ref": "AAAAAAGAO5h23Jtkc88=" + }, + "font": "Arial;13;0", + "left": 1141, + "top": 1601, + "width": 168.0224609375, + "height": 13, + "text": "+size", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAO5h4s5ttpWM=", + "_parent": { + "$ref": "AAAAAAGAO5gALpsV0BA=" + }, + "model": { + "$ref": "AAAAAAGAO5h4k5tqygA=" + }, + "font": "Arial;13;0", + "left": 1141, + "top": 1616, + "width": 168.0224609375, + "height": 13, + "text": "+style", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAO5h7JZtzPks=", + "_parent": { + "$ref": "AAAAAAGAO5gALpsV0BA=" + }, + "model": { + "$ref": "AAAAAAGAO5h7A5tw0cA=" + }, + "font": "Arial;13;0", + "left": 1141, + "top": 1631, + "width": 168.0224609375, + "height": 13, + "text": "+xoffset", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAO5h9KJt5VaY=", + "_parent": { + "$ref": "AAAAAAGAO5gALpsV0BA=" + }, + "model": { + "$ref": "AAAAAAGAO5h9B5t2d9Q=" + }, + "font": "Arial;13;0", + "left": 1141, + "top": 1646, + "width": 168.0224609375, + "height": 13, + "text": "+yoffset", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 1136, + "top": 1521, + "width": 178.0224609375, + "height": 143 + }, + { + "_type": "UMLOperationCompartmentView", + "_id": "AAAAAAGAO5gALpsWEzw=", + "_parent": { + "$ref": "AAAAAAGAO5gALZsP5fo=" + }, + "model": { + "$ref": "AAAAAAGAO5gALZsNaqc=" + }, + "subViews": [ + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAO5iarJuLMpA=", + "_parent": { + "$ref": "AAAAAAGAO5gALpsWEzw=" + }, + "model": { + "$ref": "AAAAAAGAO5iajJuIBOs=" + }, + "font": "Arial;13;0", + "left": 1141, + "top": 1669, + "width": 168.0224609375, + "height": 13, + "text": "+clone()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAO5iP6Zt/is8=", + "_parent": { + "$ref": "AAAAAAGAO5gALpsWEzw=" + }, + "model": { + "$ref": "AAAAAAGAO5iPxpt81pU=" + }, + "font": "Arial;13;0", + "left": 1141, + "top": 1684, + "width": 168.0224609375, + "height": 13, + "text": "+fromJSON()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAO5iYEJuFzf0=", + "_parent": { + "$ref": "AAAAAAGAO5gALpsWEzw=" + }, + "model": { + "$ref": "AAAAAAGAO5iX6JuC7TA=" + }, + "font": "Arial;13;0", + "left": 1141, + "top": 1699, + "width": 168.0224609375, + "height": 13, + "text": "+toJSON()", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 1136, + "top": 1664, + "width": 178.0224609375, + "height": 53 + }, + { + "_type": "UMLReceptionCompartmentView", + "_id": "AAAAAAGAO5gALpsX4xs=", + "_parent": { + "$ref": "AAAAAAGAO5gALZsP5fo=" + }, + "model": { + "$ref": "AAAAAAGAO5gALZsNaqc=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 984, + "top": 944, + "width": 10, + "height": 10 + }, + { + "_type": "UMLTemplateParameterCompartmentView", + "_id": "AAAAAAGAO5gALpsYIWU=", + "_parent": { + "$ref": "AAAAAAGAO5gALZsP5fo=" + }, + "model": { + "$ref": "AAAAAAGAO5gALZsNaqc=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 984, + "top": 944, + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "containerChangeable": true, + "left": 1136, + "top": 1496, + "width": 178.0224609375, + "height": 221, + "nameCompartment": { + "$ref": "AAAAAAGAO5gALZsQXyM=" + }, + "attributeCompartment": { + "$ref": "AAAAAAGAO5gALpsV0BA=" + }, + "operationCompartment": { + "$ref": "AAAAAAGAO5gALpsWEzw=" + }, + "receptionCompartment": { + "$ref": "AAAAAAGAO5gALpsX4xs=" + }, + "templateParameterCompartment": { + "$ref": "AAAAAAGAO5gALpsYIWU=" + } + }, + { + "_type": "UMLGeneralizationView", + "_id": "AAAAAAGAO5hIaJs96IQ=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAO5hIZ5s7B30=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAO5hIaJs+4Ok=", + "_parent": { + "$ref": "AAAAAAGAO5hIaJs96IQ=" + }, + "model": { + "$ref": "AAAAAAGAO5hIZ5s7B30=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1209, + "top": 1453, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAO5hIaJs96IQ=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAO5hIaZs/RMg=", + "_parent": { + "$ref": "AAAAAAGAO5hIaJs96IQ=" + }, + "model": { + "$ref": "AAAAAAGAO5hIZ5s7B30=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 1194, + "top": 1453, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAO5hIaJs96IQ=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAO5hIaZtAgEI=", + "_parent": { + "$ref": "AAAAAAGAO5hIaJs96IQ=" + }, + "model": { + "$ref": "AAAAAAGAO5hIZ5s7B30=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1238, + "top": 1454, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAO5hIaJs96IQ=" + }, + "edgePosition": 1 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAO4K5hlAZreY=" + }, + "tail": { + "$ref": "AAAAAAGAO5gALZsP5fo=" + }, + "lineStyle": 1, + "points": "1224:1495;1225:1426", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAO5hIaJs+4Ok=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAO5hIaZs/RMg=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAO5hIaZtAgEI=" + } + }, + { + "_type": "UMLClassView", + "_id": "AAAAAAGAPAEECJu1N1A=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAPAEEB5uzp5s=" + }, + "subViews": [ + { + "_type": "UMLNameCompartmentView", + "_id": "AAAAAAGAPAEECJu2GKs=", + "_parent": { + "$ref": "AAAAAAGAPAEECJu1N1A=" + }, + "model": { + "$ref": "AAAAAAGAPAEEB5uzp5s=" + }, + "subViews": [ + { + "_type": "LabelView", + "_id": "AAAAAAGAPAEECJu37WA=", + "_parent": { + "$ref": "AAAAAAGAPAEECJu2GKs=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1232, + "top": 2048, + "height": 13 + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAPAEECJu4rMc=", + "_parent": { + "$ref": "AAAAAAGAPAEECJu2GKs=" + }, + "font": "Arial;13;3", + "left": 1389, + "top": 1287, + "width": 80.57080078125, + "height": 13, + "text": "LineSymbol" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAPAEECJu5XS0=", + "_parent": { + "$ref": "AAAAAAGAPAEECJu2GKs=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1232, + "top": 2048, + "width": 73.67724609375, + "height": 13, + "text": "(from Model)" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAPAEECJu6Xx8=", + "_parent": { + "$ref": "AAAAAAGAPAEECJu2GKs=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1232, + "top": 2048, + "height": 13, + "horizontalAlignment": 1 + } + ], + "font": "Arial;13;0", + "left": 1384, + "top": 1280, + "width": 90.57080078125, + "height": 25, + "stereotypeLabel": { + "$ref": "AAAAAAGAPAEECJu37WA=" + }, + "nameLabel": { + "$ref": "AAAAAAGAPAEECJu4rMc=" + }, + "namespaceLabel": { + "$ref": "AAAAAAGAPAEECJu5XS0=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAPAEECJu6Xx8=" + } + }, + { + "_type": "UMLAttributeCompartmentView", + "_id": "AAAAAAGAPAEECJu7Y48=", + "_parent": { + "$ref": "AAAAAAGAPAEECJu1N1A=" + }, + "model": { + "$ref": "AAAAAAGAPAEEB5uzp5s=" + }, + "subViews": [ + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPAKLfZvgDgI=", + "_parent": { + "$ref": "AAAAAAGAPAEECJu7Y48=" + }, + "model": { + "$ref": "AAAAAAGAPAKLVpvdNNE=" + }, + "font": "Arial;13;0", + "left": 1389, + "top": 1310, + "width": 80.57080078125, + "height": 13, + "text": "+type", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPAKR8JvmJRQ=", + "_parent": { + "$ref": "AAAAAAGAPAEECJu7Y48=" + }, + "model": { + "$ref": "AAAAAAGAPAKRz5vj6lU=" + }, + "font": "Arial;13;0", + "left": 1389, + "top": 1325, + "width": 80.57080078125, + "height": 13, + "text": "+color", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPAKawZvsFL8=", + "_parent": { + "$ref": "AAAAAAGAPAEECJu7Y48=" + }, + "model": { + "$ref": "AAAAAAGAPAKan5vpoKk=" + }, + "font": "Arial;13;0", + "left": 1389, + "top": 1340, + "width": 80.57080078125, + "height": 13, + "text": "+width", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 1384, + "top": 1305, + "width": 90.57080078125, + "height": 53 + }, + { + "_type": "UMLOperationCompartmentView", + "_id": "AAAAAAGAPAEECJu8gpg=", + "_parent": { + "$ref": "AAAAAAGAPAEECJu1N1A=" + }, + "model": { + "$ref": "AAAAAAGAPAEEB5uzp5s=" + }, + "subViews": [ + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAPALTA5v1qYw=", + "_parent": { + "$ref": "AAAAAAGAPAEECJu8gpg=" + }, + "model": { + "$ref": "AAAAAAGAPALS25vyQdo=" + }, + "font": "Arial;13;0", + "left": 1389, + "top": 1363, + "width": 80.57080078125, + "height": 13, + "text": "+fromJSON()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAPALeV5v77pQ=", + "_parent": { + "$ref": "AAAAAAGAPAEECJu8gpg=" + }, + "model": { + "$ref": "AAAAAAGAPALeMZv49lY=" + }, + "font": "Arial;13;0", + "left": 1389, + "top": 1378, + "width": 80.57080078125, + "height": 13, + "text": "+toJSON()", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 1384, + "top": 1358, + "width": 90.57080078125, + "height": 38 + }, + { + "_type": "UMLReceptionCompartmentView", + "_id": "AAAAAAGAPAEECJu9bYo=", + "_parent": { + "$ref": "AAAAAAGAPAEECJu1N1A=" + }, + "model": { + "$ref": "AAAAAAGAPAEEB5uzp5s=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 616, + "top": 1024, + "width": 10, + "height": 10 + }, + { + "_type": "UMLTemplateParameterCompartmentView", + "_id": "AAAAAAGAPAEECJu+TtY=", + "_parent": { + "$ref": "AAAAAAGAPAEECJu1N1A=" + }, + "model": { + "$ref": "AAAAAAGAPAEEB5uzp5s=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 616, + "top": 1024, + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "containerChangeable": true, + "left": 1384, + "top": 1280, + "width": 90.57080078125, + "height": 116, + "nameCompartment": { + "$ref": "AAAAAAGAPAEECJu2GKs=" + }, + "attributeCompartment": { + "$ref": "AAAAAAGAPAEECJu7Y48=" + }, + "operationCompartment": { + "$ref": "AAAAAAGAPAEECJu8gpg=" + }, + "receptionCompartment": { + "$ref": "AAAAAAGAPAEECJu9bYo=" + }, + "templateParameterCompartment": { + "$ref": "AAAAAAGAPAEECJu+TtY=" + } + }, + { + "_type": "UMLClassView", + "_id": "AAAAAAGAPAMK75wCNw0=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + }, + "subViews": [ + { + "_type": "UMLNameCompartmentView", + "_id": "AAAAAAGAPAMK75wDgvA=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wCNw0=" + }, + "model": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + }, + "subViews": [ + { + "_type": "LabelView", + "_id": "AAAAAAGAPAMK75wEXt4=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wDgvA=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1168, + "top": 1888, + "height": 13 + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAPAMK75wFMJ8=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wDgvA=" + }, + "font": "Arial;13;1", + "left": 1341, + "top": 1503, + "width": 163.63623046875, + "height": 13, + "text": "SimpleLineSymbol" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAPAMK75wGU50=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wDgvA=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1168, + "top": 1888, + "width": 73.67724609375, + "height": 13, + "text": "(from Model)" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAPAMK75wH9ao=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wDgvA=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1168, + "top": 1888, + "height": 13, + "horizontalAlignment": 1 + } + ], + "font": "Arial;13;0", + "left": 1336, + "top": 1496, + "width": 173.63623046875, + "height": 25, + "stereotypeLabel": { + "$ref": "AAAAAAGAPAMK75wEXt4=" + }, + "nameLabel": { + "$ref": "AAAAAAGAPAMK75wFMJ8=" + }, + "namespaceLabel": { + "$ref": "AAAAAAGAPAMK75wGU50=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAPAMK75wH9ao=" + } + }, + { + "_type": "UMLAttributeCompartmentView", + "_id": "AAAAAAGAPAMK75wIQws=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wCNw0=" + }, + "model": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + }, + "subViews": [ + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPAQZ9ZxPVZ4=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wIQws=" + }, + "model": { + "$ref": "AAAAAAGAPAQZ0pxMviw=" + }, + "font": "Arial;13;0", + "left": 1341, + "top": 1526, + "width": 163.63623046875, + "height": 13, + "text": "+type", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPAQgupxVbQ0=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wIQws=" + }, + "model": { + "$ref": "AAAAAAGAPAQglpxSlAw=" + }, + "font": "Arial;13;0", + "left": 1341, + "top": 1541, + "width": 163.63623046875, + "height": 13, + "text": "+cap", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPAQjcJxbkyI=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wIQws=" + }, + "model": { + "$ref": "AAAAAAGAPAQjTpxYRgc=" + }, + "font": "Arial;13;0", + "left": 1341, + "top": 1556, + "width": 163.63623046875, + "height": 13, + "text": "+color", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPAQlhJxh1vo=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wIQws=" + }, + "model": { + "$ref": "AAAAAAGAPAQlXpxeKLg=" + }, + "font": "Arial;13;0", + "left": 1341, + "top": 1571, + "width": 163.63623046875, + "height": 13, + "text": "+join", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPAQnqJxnLvE=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wIQws=" + }, + "model": { + "$ref": "AAAAAAGAPAQnhpxkzMk=" + }, + "font": "Arial;13;0", + "left": 1341, + "top": 1586, + "width": 163.63623046875, + "height": 13, + "text": "+marker: LineSymbolMarker", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPAQp2JxtOVk=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wIQws=" + }, + "model": { + "$ref": "AAAAAAGAPAQprpxqv+k=" + }, + "font": "Arial;13;0", + "left": 1341, + "top": 1601, + "width": 163.63623046875, + "height": 13, + "text": "+miterLimit", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPAQsE5xzh2M=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wIQws=" + }, + "model": { + "$ref": "AAAAAAGAPAQr7pxwm+c=" + }, + "font": "Arial;13;0", + "left": 1341, + "top": 1616, + "width": 163.63623046875, + "height": 13, + "text": "+style", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPAQuOpx5WOc=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wIQws=" + }, + "model": { + "$ref": "AAAAAAGAPAQuFpx2vEw=" + }, + "font": "Arial;13;0", + "left": 1341, + "top": 1631, + "width": 163.63623046875, + "height": 13, + "text": "+width", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 1336, + "top": 1521, + "width": 173.63623046875, + "height": 128 + }, + { + "_type": "UMLOperationCompartmentView", + "_id": "AAAAAAGAPAMK75wJsVE=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wCNw0=" + }, + "model": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + }, + "subViews": [ + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAPCva0a3oEDg=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wJsVE=" + }, + "model": { + "$ref": "AAAAAAGAPCvaqK3lziY=" + }, + "font": "Arial;13;0", + "left": 1341, + "top": 1654, + "width": 163.63623046875, + "height": 13, + "text": "+clone()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAPCvhoa4eijc=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wJsVE=" + }, + "model": { + "$ref": "AAAAAAGAPCvhf64bbOg=" + }, + "font": "Arial;13;0", + "left": 1341, + "top": 1669, + "width": 163.63623046875, + "height": 13, + "text": "+fromJSON()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAPCvkQq5CWqQ=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wJsVE=" + }, + "model": { + "$ref": "AAAAAAGAPCvkHq4/nNg=" + }, + "font": "Arial;13;0", + "left": 1341, + "top": 1684, + "width": 163.63623046875, + "height": 13, + "text": "+toJSON()", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 1336, + "top": 1649, + "width": 173.63623046875, + "height": 53 + }, + { + "_type": "UMLReceptionCompartmentView", + "_id": "AAAAAAGAPAMK75wKurQ=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wCNw0=" + }, + "model": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 584, + "top": 944, + "width": 10, + "height": 10 + }, + { + "_type": "UMLTemplateParameterCompartmentView", + "_id": "AAAAAAGAPAMK75wL/Ow=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wCNw0=" + }, + "model": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 584, + "top": 944, + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "containerChangeable": true, + "left": 1336, + "top": 1496, + "width": 173.63623046875, + "height": 206, + "nameCompartment": { + "$ref": "AAAAAAGAPAMK75wDgvA=" + }, + "attributeCompartment": { + "$ref": "AAAAAAGAPAMK75wIQws=" + }, + "operationCompartment": { + "$ref": "AAAAAAGAPAMK75wJsVE=" + }, + "receptionCompartment": { + "$ref": "AAAAAAGAPAMK75wKurQ=" + }, + "templateParameterCompartment": { + "$ref": "AAAAAAGAPAMK75wL/Ow=" + } + }, + { + "_type": "UMLGeneralizationView", + "_id": "AAAAAAGAPAMl+Jws8Rc=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAPAMl+Jwq3y8=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPAMl+JwtX/4=", + "_parent": { + "$ref": "AAAAAAGAPAMl+Jws8Rc=" + }, + "model": { + "$ref": "AAAAAAGAPAMl+Jwq3y8=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1452, + "top": 1206, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAPAMl+Jws8Rc=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPAMl+Jwu10s=", + "_parent": { + "$ref": "AAAAAAGAPAMl+Jws8Rc=" + }, + "model": { + "$ref": "AAAAAAGAPAMl+Jwq3y8=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 1438, + "top": 1201, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAPAMl+Jws8Rc=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPAMl+Jwvxu0=", + "_parent": { + "$ref": "AAAAAAGAPAMl+Jws8Rc=" + }, + "model": { + "$ref": "AAAAAAGAPAMl+Jwq3y8=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1481, + "top": 1215, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAPAMl+Jws8Rc=" + }, + "edgePosition": 1 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAO1MYek/JnBg=" + }, + "tail": { + "$ref": "AAAAAAGAPAEECJu1N1A=" + }, + "lineStyle": 1, + "points": "1447:1279;1488:1156", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAPAMl+JwtX/4=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAPAMl+Jwu10s=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAPAMl+Jwvxu0=" + } + }, + { + "_type": "UMLGeneralizationView", + "_id": "AAAAAAGAPAM0X5w94vo=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAPAM0X5w7CQk=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPAM0X5w+PYk=", + "_parent": { + "$ref": "AAAAAAGAPAM0X5w94vo=" + }, + "model": { + "$ref": "AAAAAAGAPAM0X5w7CQk=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1410, + "top": 1438, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAPAM0X5w94vo=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPAM0YJw/sFo=", + "_parent": { + "$ref": "AAAAAAGAPAM0X5w94vo=" + }, + "model": { + "$ref": "AAAAAAGAPAM0X5w7CQk=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 1395, + "top": 1437, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAPAM0X5w94vo=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPAM0YJxAm/U=", + "_parent": { + "$ref": "AAAAAAGAPAM0X5w94vo=" + }, + "model": { + "$ref": "AAAAAAGAPAM0X5w7CQk=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1439, + "top": 1439, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAPAM0X5w94vo=" + }, + "edgePosition": 1 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAPAEECJu1N1A=" + }, + "tail": { + "$ref": "AAAAAAGAPAMK75wCNw0=" + }, + "lineStyle": 1, + "points": "1424:1495;1427:1396", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAPAM0X5w+PYk=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAPAM0YJw/sFo=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAPAM0YJxAm/U=" + } + }, + { + "_type": "UMLAssociationView", + "_id": "AAAAAAGAPAZXyJz7pes=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAPAZXyJz3JCA=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPAZXyJz8vTg=", + "_parent": { + "$ref": "AAAAAAGAPAZXyJz7pes=" + }, + "model": { + "$ref": "AAAAAAGAPAZXyJz3JCA=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1324, + "top": 1581, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAPAZXyJz7pes=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPAZXyJz9jgA=", + "_parent": { + "$ref": "AAAAAAGAPAZXyJz7pes=" + }, + "model": { + "$ref": "AAAAAAGAPAZXyJz3JCA=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 1324, + "top": 1566, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAPAZXyJz7pes=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPAZXyJz+i7M=", + "_parent": { + "$ref": "AAAAAAGAPAZXyJz7pes=" + }, + "model": { + "$ref": "AAAAAAGAPAZXyJz3JCA=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1324, + "top": 1611, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAPAZXyJz7pes=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPAZXyJz/1qs=", + "_parent": { + "$ref": "AAAAAAGAPAZXyJz7pes=" + }, + "model": { + "$ref": "AAAAAAGAPAZXyJz4H6A=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1339, + "top": 1581, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAPAZXyJz7pes=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPAZXyJ0AVnY=", + "_parent": { + "$ref": "AAAAAAGAPAZXyJz7pes=" + }, + "model": { + "$ref": "AAAAAAGAPAZXyJz4H6A=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1342, + "top": 1567, + "height": 13, + "alpha": 0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAPAZXyJz7pes=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPAZXyJ0BuAo=", + "_parent": { + "$ref": "AAAAAAGAPAZXyJz7pes=" + }, + "model": { + "$ref": "AAAAAAGAPAZXyJz4H6A=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1335, + "top": 1608, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAPAZXyJz7pes=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPAZXyJ0CqJk=", + "_parent": { + "$ref": "AAAAAAGAPAZXyJz7pes=" + }, + "model": { + "$ref": "AAAAAAGAPAZXyJz5qwM=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1309, + "top": 1581, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAPAZXyJz7pes=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPAZXyJ0DRxo=", + "_parent": { + "$ref": "AAAAAAGAPAZXyJz7pes=" + }, + "model": { + "$ref": "AAAAAAGAPAZXyJz5qwM=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1306, + "top": 1567, + "height": 13, + "alpha": -0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAPAZXyJz7pes=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPAZXyJ0EjG8=", + "_parent": { + "$ref": "AAAAAAGAPAZXyJz7pes=" + }, + "model": { + "$ref": "AAAAAAGAPAZXyJz5qwM=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1313, + "top": 1608, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAPAZXyJz7pes=" + } + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAPAZXyJ0FhtE=", + "_parent": { + "$ref": "AAAAAAGAPAZXyJz7pes=" + }, + "model": { + "$ref": "AAAAAAGAPAZXyJz4H6A=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 576, + "top": 1024, + "width": 10, + "height": 10 + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAPAZXyJ0Gq9E=", + "_parent": { + "$ref": "AAAAAAGAPAZXyJz7pes=" + }, + "model": { + "$ref": "AAAAAAGAPAZXyJz5qwM=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 576, + "top": 1024, + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAPAMK75wCNw0=" + }, + "tail": { + "$ref": "AAAAAAGAO5gALZsP5fo=" + }, + "lineStyle": 1, + "points": "1314:1602;1335:1602", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAPAZXyJz8vTg=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAPAZXyJz9jgA=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAPAZXyJz+i7M=" + }, + "tailRoleNameLabel": { + "$ref": "AAAAAAGAPAZXyJz/1qs=" + }, + "tailPropertyLabel": { + "$ref": "AAAAAAGAPAZXyJ0AVnY=" + }, + "tailMultiplicityLabel": { + "$ref": "AAAAAAGAPAZXyJ0BuAo=" + }, + "headRoleNameLabel": { + "$ref": "AAAAAAGAPAZXyJ0CqJk=" + }, + "headPropertyLabel": { + "$ref": "AAAAAAGAPAZXyJ0DRxo=" + }, + "headMultiplicityLabel": { + "$ref": "AAAAAAGAPAZXyJ0EjG8=" + }, + "tailQualifiersCompartment": { + "$ref": "AAAAAAGAPAZXyJ0FhtE=" + }, + "headQualifiersCompartment": { + "$ref": "AAAAAAGAPAZXyJ0Gq9E=" + } + }, + { + "_type": "UMLClassView", + "_id": "AAAAAAGAPAZ6f51RxO8=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAPAZ6f51PAmE=" + }, + "subViews": [ + { + "_type": "UMLNameCompartmentView", + "_id": "AAAAAAGAPAZ6f51SOeE=", + "_parent": { + "$ref": "AAAAAAGAPAZ6f51RxO8=" + }, + "model": { + "$ref": "AAAAAAGAPAZ6f51PAmE=" + }, + "subViews": [ + { + "_type": "LabelView", + "_id": "AAAAAAGAPAZ6f51TTAU=", + "_parent": { + "$ref": "AAAAAAGAPAZ6f51SOeE=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 560, + "top": 2752, + "height": 13 + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAPAZ6f51UoT0=", + "_parent": { + "$ref": "AAAAAAGAPAZ6f51SOeE=" + }, + "font": "Arial;13;1", + "left": 1365, + "top": 1751, + "width": 116.314453125, + "height": 13, + "text": "LineSymbolMarker" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAPAZ6f51V14E=", + "_parent": { + "$ref": "AAAAAAGAPAZ6f51SOeE=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 560, + "top": 2752, + "width": 73.67724609375, + "height": 13, + "text": "(from Model)" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAPAZ6f51W2RM=", + "_parent": { + "$ref": "AAAAAAGAPAZ6f51SOeE=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 560, + "top": 2752, + "height": 13, + "horizontalAlignment": 1 + } + ], + "font": "Arial;13;0", + "left": 1360, + "top": 1744, + "width": 126.314453125, + "height": 25, + "stereotypeLabel": { + "$ref": "AAAAAAGAPAZ6f51TTAU=" + }, + "nameLabel": { + "$ref": "AAAAAAGAPAZ6f51UoT0=" + }, + "namespaceLabel": { + "$ref": "AAAAAAGAPAZ6f51V14E=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAPAZ6f51W2RM=" + } + }, + { + "_type": "UMLAttributeCompartmentView", + "_id": "AAAAAAGAPAZ6f51XwF4=", + "_parent": { + "$ref": "AAAAAAGAPAZ6f51RxO8=" + }, + "model": { + "$ref": "AAAAAAGAPAZ6f51PAmE=" + }, + "subViews": [ + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPAaeH52jAV8=", + "_parent": { + "$ref": "AAAAAAGAPAZ6f51XwF4=" + }, + "model": { + "$ref": "AAAAAAGAPAad+p2dGzE=" + }, + "font": "Arial;13;0", + "left": 1365, + "top": 1774, + "width": 116.314453125, + "height": 13, + "text": "+type", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPAaku53Bq+k=", + "_parent": { + "$ref": "AAAAAAGAPAZ6f51XwF4=" + }, + "model": { + "$ref": "AAAAAAGAPAakl5275T8=" + }, + "font": "Arial;13;0", + "left": 1365, + "top": 1789, + "width": 116.314453125, + "height": 13, + "text": "+color", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPAam3p3W7Sk=", + "_parent": { + "$ref": "AAAAAAGAPAZ6f51XwF4=" + }, + "model": { + "$ref": "AAAAAAGAPAamt53QDe4=" + }, + "font": "Arial;13;0", + "left": 1365, + "top": 1804, + "width": 116.314453125, + "height": 13, + "text": "+placement", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPAapVJ3rP5A=", + "_parent": { + "$ref": "AAAAAAGAPAZ6f51XwF4=" + }, + "model": { + "$ref": "AAAAAAGAPAapL53l9Sc=" + }, + "font": "Arial;13;0", + "left": 1365, + "top": 1819, + "width": 116.314453125, + "height": 13, + "text": "+style", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 1360, + "top": 1769, + "width": 126.314453125, + "height": 68 + }, + { + "_type": "UMLOperationCompartmentView", + "_id": "AAAAAAGAPAZ6f51YMfU=", + "_parent": { + "$ref": "AAAAAAGAPAZ6f51RxO8=" + }, + "model": { + "$ref": "AAAAAAGAPAZ6f51PAmE=" + }, + "font": "Arial;13;0", + "left": 1360, + "top": 1837, + "width": 126.314453125, + "height": 10 + }, + { + "_type": "UMLReceptionCompartmentView", + "_id": "AAAAAAGAPAZ6f51Z/g8=", + "_parent": { + "$ref": "AAAAAAGAPAZ6f51RxO8=" + }, + "model": { + "$ref": "AAAAAAGAPAZ6f51PAmE=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 280, + "top": 1376, + "width": 10, + "height": 10 + }, + { + "_type": "UMLTemplateParameterCompartmentView", + "_id": "AAAAAAGAPAZ6f51a1Yg=", + "_parent": { + "$ref": "AAAAAAGAPAZ6f51RxO8=" + }, + "model": { + "$ref": "AAAAAAGAPAZ6f51PAmE=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 280, + "top": 1376, + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "containerChangeable": true, + "left": 1360, + "top": 1744, + "width": 126.314453125, + "height": 103, + "nameCompartment": { + "$ref": "AAAAAAGAPAZ6f51SOeE=" + }, + "attributeCompartment": { + "$ref": "AAAAAAGAPAZ6f51XwF4=" + }, + "operationCompartment": { + "$ref": "AAAAAAGAPAZ6f51YMfU=" + }, + "receptionCompartment": { + "$ref": "AAAAAAGAPAZ6f51Z/g8=" + }, + "templateParameterCompartment": { + "$ref": "AAAAAAGAPAZ6f51a1Yg=" + } + }, + { + "_type": "UMLAssociationView", + "_id": "AAAAAAGAPAgXl59w9tY=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAPAgXl59swT0=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPAgXmJ9x8Wc=", + "_parent": { + "$ref": "AAAAAAGAPAgXl59w9tY=" + }, + "model": { + "$ref": "AAAAAAGAPAgXl59swT0=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1436, + "top": 1715, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAPAgXl59w9tY=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPAgXmJ9yGZE=", + "_parent": { + "$ref": "AAAAAAGAPAgXl59w9tY=" + }, + "model": { + "$ref": "AAAAAAGAPAgXl59swT0=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 1451, + "top": 1715, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAPAgXl59w9tY=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPAgXmJ9zKjU=", + "_parent": { + "$ref": "AAAAAAGAPAgXl59w9tY=" + }, + "model": { + "$ref": "AAAAAAGAPAgXl59swT0=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1407, + "top": 1716, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAPAgXl59w9tY=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPAgXmJ90XoY=", + "_parent": { + "$ref": "AAAAAAGAPAgXl59w9tY=" + }, + "model": { + "$ref": "AAAAAAGAPAgXl59tmOM=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1437, + "top": 1721, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAPAgXl59w9tY=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPAgXmJ91D64=", + "_parent": { + "$ref": "AAAAAAGAPAgXl59w9tY=" + }, + "model": { + "$ref": "AAAAAAGAPAgXl59tmOM=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1450, + "top": 1724, + "height": 13, + "alpha": 0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAPAgXl59w9tY=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPAgXmJ92hKk=", + "_parent": { + "$ref": "AAAAAAGAPAgXl59w9tY=" + }, + "model": { + "$ref": "AAAAAAGAPAgXl59tmOM=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1409, + "top": 1717, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAPAgXl59w9tY=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPAgXmJ93qTo=", + "_parent": { + "$ref": "AAAAAAGAPAgXl59w9tY=" + }, + "model": { + "$ref": "AAAAAAGAPAgXl59uDWo=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1437, + "top": 1711, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAPAgXl59w9tY=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPAgXmJ945Nk=", + "_parent": { + "$ref": "AAAAAAGAPAgXl59w9tY=" + }, + "model": { + "$ref": "AAAAAAGAPAgXl59uDWo=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1450, + "top": 1708, + "height": 13, + "alpha": -0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAPAgXl59w9tY=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPAgXmJ951JU=", + "_parent": { + "$ref": "AAAAAAGAPAgXl59w9tY=" + }, + "model": { + "$ref": "AAAAAAGAPAgXl59uDWo=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1409, + "top": 1715, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAPAgXl59w9tY=" + } + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAPAgXmJ96iVI=", + "_parent": { + "$ref": "AAAAAAGAPAgXl59w9tY=" + }, + "model": { + "$ref": "AAAAAAGAPAgXl59tmOM=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 576, + "top": 1024, + "width": 10, + "height": 10 + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAPAgXmJ97Rxw=", + "_parent": { + "$ref": "AAAAAAGAPAgXl59w9tY=" + }, + "model": { + "$ref": "AAAAAAGAPAgXl59uDWo=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 576, + "top": 1024, + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAPAZ6f51RxO8=" + }, + "tail": { + "$ref": "AAAAAAGAPAMK75wCNw0=" + }, + "lineStyle": 1, + "points": "1422:1702;1422:1743", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAPAgXmJ9x8Wc=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAPAgXmJ9yGZE=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAPAgXmJ9zKjU=" + }, + "tailRoleNameLabel": { + "$ref": "AAAAAAGAPAgXmJ90XoY=" + }, + "tailPropertyLabel": { + "$ref": "AAAAAAGAPAgXmJ91D64=" + }, + "tailMultiplicityLabel": { + "$ref": "AAAAAAGAPAgXmJ92hKk=" + }, + "headRoleNameLabel": { + "$ref": "AAAAAAGAPAgXmJ93qTo=" + }, + "headPropertyLabel": { + "$ref": "AAAAAAGAPAgXmJ945Nk=" + }, + "headMultiplicityLabel": { + "$ref": "AAAAAAGAPAgXmJ951JU=" + }, + "tailQualifiersCompartment": { + "$ref": "AAAAAAGAPAgXmJ96iVI=" + }, + "headQualifiersCompartment": { + "$ref": "AAAAAAGAPAgXmJ97Rxw=" + } + }, + { + "_type": "UMLClassView", + "_id": "AAAAAAGAPBd73qHscQA=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAPBd73aHqdKY=" + }, + "subViews": [ + { + "_type": "UMLNameCompartmentView", + "_id": "AAAAAAGAPBd73qHtjz8=", + "_parent": { + "$ref": "AAAAAAGAPBd73qHscQA=" + }, + "model": { + "$ref": "AAAAAAGAPBd73aHqdKY=" + }, + "subViews": [ + { + "_type": "LabelView", + "_id": "AAAAAAGAPBd73qHudqQ=", + "_parent": { + "$ref": "AAAAAAGAPBd73qHtjz8=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 896, + "top": 1920, + "height": 13 + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAPBd73qHvzLw=", + "_parent": { + "$ref": "AAAAAAGAPBd73qHtjz8=" + }, + "font": "Arial;13;1", + "left": 981, + "top": 1503, + "width": 133.66259765625, + "height": 13, + "text": "PictureMarkerSymbol" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAPBd73qHwpPE=", + "_parent": { + "$ref": "AAAAAAGAPBd73qHtjz8=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 896, + "top": 1920, + "width": 73.67724609375, + "height": 13, + "text": "(from Model)" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAPBd73qHxJhQ=", + "_parent": { + "$ref": "AAAAAAGAPBd73qHtjz8=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 896, + "top": 1920, + "height": 13, + "horizontalAlignment": 1 + } + ], + "font": "Arial;13;0", + "left": 976, + "top": 1496, + "width": 143.66259765625, + "height": 25, + "stereotypeLabel": { + "$ref": "AAAAAAGAPBd73qHudqQ=" + }, + "nameLabel": { + "$ref": "AAAAAAGAPBd73qHvzLw=" + }, + "namespaceLabel": { + "$ref": "AAAAAAGAPBd73qHwpPE=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAPBd73qHxJhQ=" + } + }, + { + "_type": "UMLAttributeCompartmentView", + "_id": "AAAAAAGAPBd736Hy3vE=", + "_parent": { + "$ref": "AAAAAAGAPBd73qHscQA=" + }, + "model": { + "$ref": "AAAAAAGAPBd73aHqdKY=" + }, + "subViews": [ + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPBe8LKL7BvY=", + "_parent": { + "$ref": "AAAAAAGAPBd736Hy3vE=" + }, + "model": { + "$ref": "AAAAAAGAPBe8CaLygzQ=" + }, + "font": "Arial;13;0", + "left": 981, + "top": 1526, + "width": 133.66259765625, + "height": 13, + "text": "+type", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPBfDAaMxM0g=", + "_parent": { + "$ref": "AAAAAAGAPBd736Hy3vE=" + }, + "model": { + "$ref": "AAAAAAGAPBfC3qMo4vU=" + }, + "font": "Arial;13;0", + "left": 981, + "top": 1541, + "width": 133.66259765625, + "height": 13, + "text": "+angle", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPBfF1qNVuNA=", + "_parent": { + "$ref": "AAAAAAGAPBd736Hy3vE=" + }, + "model": { + "$ref": "AAAAAAGAPBfFsKNMfiQ=" + }, + "font": "Arial;13;0", + "left": 981, + "top": 1556, + "width": 133.66259765625, + "height": 13, + "text": "+height", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPBfIGaN5OJU=", + "_parent": { + "$ref": "AAAAAAGAPBd736Hy3vE=" + }, + "model": { + "$ref": "AAAAAAGAPBfH9qNwFW8=" + }, + "font": "Arial;13;0", + "left": 981, + "top": 1571, + "width": 133.66259765625, + "height": 13, + "text": "+url", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPBfKMKOdoEo=", + "_parent": { + "$ref": "AAAAAAGAPBd736Hy3vE=" + }, + "model": { + "$ref": "AAAAAAGAPBfKDqOUl0Y=" + }, + "font": "Arial;13;0", + "left": 981, + "top": 1586, + "width": 133.66259765625, + "height": 13, + "text": "+width", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPBfMSaPBn5I=", + "_parent": { + "$ref": "AAAAAAGAPBd736Hy3vE=" + }, + "model": { + "$ref": "AAAAAAGAPBfMJqO4ULE=" + }, + "font": "Arial;13;0", + "left": 981, + "top": 1601, + "width": 133.66259765625, + "height": 13, + "text": "+xoffset", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPBfOiaPlYo4=", + "_parent": { + "$ref": "AAAAAAGAPBd736Hy3vE=" + }, + "model": { + "$ref": "AAAAAAGAPBfOZ6Pcm9c=" + }, + "font": "Arial;13;0", + "left": 981, + "top": 1616, + "width": 133.66259765625, + "height": 13, + "text": "+yoffset", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 976, + "top": 1521, + "width": 143.66259765625, + "height": 113 + }, + { + "_type": "UMLOperationCompartmentView", + "_id": "AAAAAAGAPBd736HzKbk=", + "_parent": { + "$ref": "AAAAAAGAPBd73qHscQA=" + }, + "model": { + "$ref": "AAAAAAGAPBd73aHqdKY=" + }, + "subViews": [ + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAPBeuDKLFpuw=", + "_parent": { + "$ref": "AAAAAAGAPBd736HzKbk=" + }, + "model": { + "$ref": "AAAAAAGAPBet6aK8jQc=" + }, + "font": "Arial;13;0", + "left": 981, + "top": 1639, + "width": 133.66259765625, + "height": 13, + "text": "+clone()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAPBhv66W3Wa4=", + "_parent": { + "$ref": "AAAAAAGAPBd736HzKbk=" + }, + "model": { + "$ref": "AAAAAAGAPBhvx6Wusf8=" + }, + "font": "Arial;13;0", + "left": 981, + "top": 1654, + "width": 133.66259765625, + "height": 13, + "text": "+fromJSON()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAPBhyDaXb2Ko=", + "_parent": { + "$ref": "AAAAAAGAPBd736HzKbk=" + }, + "model": { + "$ref": "AAAAAAGAPBhx56XShSk=" + }, + "font": "Arial;13;0", + "left": 981, + "top": 1669, + "width": 133.66259765625, + "height": 13, + "text": "+toJSON()", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 976, + "top": 1634, + "width": 143.66259765625, + "height": 53 + }, + { + "_type": "UMLReceptionCompartmentView", + "_id": "AAAAAAGAPBd736H0W7E=", + "_parent": { + "$ref": "AAAAAAGAPBd73qHscQA=" + }, + "model": { + "$ref": "AAAAAAGAPBd73aHqdKY=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 448, + "top": 960, + "width": 10, + "height": 10 + }, + { + "_type": "UMLTemplateParameterCompartmentView", + "_id": "AAAAAAGAPBd736H1Moo=", + "_parent": { + "$ref": "AAAAAAGAPBd73qHscQA=" + }, + "model": { + "$ref": "AAAAAAGAPBd73aHqdKY=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 448, + "top": 960, + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "containerChangeable": true, + "left": 976, + "top": 1496, + "width": 143.66259765625, + "height": 191, + "nameCompartment": { + "$ref": "AAAAAAGAPBd73qHtjz8=" + }, + "attributeCompartment": { + "$ref": "AAAAAAGAPBd736Hy3vE=" + }, + "operationCompartment": { + "$ref": "AAAAAAGAPBd736HzKbk=" + }, + "receptionCompartment": { + "$ref": "AAAAAAGAPBd736H0W7E=" + }, + "templateParameterCompartment": { + "$ref": "AAAAAAGAPBd736H1Moo=" + } + }, + { + "_type": "UMLGeneralizationView", + "_id": "AAAAAAGAPBeg7KJxVzQ=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAPBeg7KJvEiE=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPBeg7KJySLo=", + "_parent": { + "$ref": "AAAAAAGAPBeg7KJxVzQ=" + }, + "model": { + "$ref": "AAAAAAGAPBeg7KJvEiE=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1134, + "top": 1441, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAPBeg7KJxVzQ=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPBeg7KJzizU=", + "_parent": { + "$ref": "AAAAAAGAPBeg7KJxVzQ=" + }, + "model": { + "$ref": "AAAAAAGAPBeg7KJvEiE=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 1122, + "top": 1432, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAPBeg7KJxVzQ=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPBeg7KJ008o=", + "_parent": { + "$ref": "AAAAAAGAPBeg7KJxVzQ=" + }, + "model": { + "$ref": "AAAAAAGAPBeg7KJvEiE=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1157, + "top": 1460, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAPBeg7KJxVzQ=" + }, + "edgePosition": 1 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAO4K5hlAZreY=" + }, + "tail": { + "$ref": "AAAAAAGAPBd73qHscQA=" + }, + "lineStyle": 1, + "points": "1118:1495;1175:1419", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAPBeg7KJySLo=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAPBeg7KJzizU=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAPBeg7KJ008o=" + } + }, + { + "_type": "UMLClassView", + "_id": "AAAAAAGAPCD46KeYkpo=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAPCD456eWclQ=" + }, + "subViews": [ + { + "_type": "UMLNameCompartmentView", + "_id": "AAAAAAGAPCD46KeZWB4=", + "_parent": { + "$ref": "AAAAAAGAPCD46KeYkpo=" + }, + "model": { + "$ref": "AAAAAAGAPCD456eWclQ=" + }, + "subViews": [ + { + "_type": "LabelView", + "_id": "AAAAAAGAPCD46KeaMOQ=", + "_parent": { + "$ref": "AAAAAAGAPCD46KeZWB4=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1040, + "top": 2000, + "height": 13 + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAPCD46KebbT8=", + "_parent": { + "$ref": "AAAAAAGAPCD46KeZWB4=" + }, + "font": "Arial;13;3", + "left": 1525, + "top": 1287, + "width": 160.7861328125, + "height": 13, + "text": "FillSymbol" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAPCD46Kechlw=", + "_parent": { + "$ref": "AAAAAAGAPCD46KeZWB4=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1040, + "top": 2000, + "width": 73.67724609375, + "height": 13, + "text": "(from Model)" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAPCD46Ked/xc=", + "_parent": { + "$ref": "AAAAAAGAPCD46KeZWB4=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1040, + "top": 2000, + "height": 13, + "horizontalAlignment": 1 + } + ], + "font": "Arial;13;0", + "left": 1520, + "top": 1280, + "width": 170.7861328125, + "height": 25, + "stereotypeLabel": { + "$ref": "AAAAAAGAPCD46KeaMOQ=" + }, + "nameLabel": { + "$ref": "AAAAAAGAPCD46KebbT8=" + }, + "namespaceLabel": { + "$ref": "AAAAAAGAPCD46Kechlw=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAPCD46Ked/xc=" + } + }, + { + "_type": "UMLAttributeCompartmentView", + "_id": "AAAAAAGAPCD46Kee1O0=", + "_parent": { + "$ref": "AAAAAAGAPCD46KeYkpo=" + }, + "model": { + "$ref": "AAAAAAGAPCD456eWclQ=" + }, + "subViews": [ + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPCEdTKhxXM4=", + "_parent": { + "$ref": "AAAAAAGAPCD46Kee1O0=" + }, + "model": { + "$ref": "AAAAAAGAPCEdKahoOMM=" + }, + "font": "Arial;13;0", + "left": 1525, + "top": 1310, + "width": 160.7861328125, + "height": 13, + "text": "+type", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPCEmM6i5bsM=", + "_parent": { + "$ref": "AAAAAAGAPCD46Kee1O0=" + }, + "model": { + "$ref": "AAAAAAGAPCEmEKiwQC0=" + }, + "font": "Arial;13;0", + "left": 1525, + "top": 1325, + "width": 160.7861328125, + "height": 13, + "text": "+outline: SimpleLineSymbol", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 1520, + "top": 1305, + "width": 170.7861328125, + "height": 38 + }, + { + "_type": "UMLOperationCompartmentView", + "_id": "AAAAAAGAPCD46aefwOo=", + "_parent": { + "$ref": "AAAAAAGAPCD46KeYkpo=" + }, + "model": { + "$ref": "AAAAAAGAPCD456eWclQ=" + }, + "subViews": [ + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAPCEvp6jvsj4=", + "_parent": { + "$ref": "AAAAAAGAPCD46aefwOo=" + }, + "model": { + "$ref": "AAAAAAGAPCEvg6jm2cI=" + }, + "font": "Arial;13;0", + "left": 1525, + "top": 1348, + "width": 160.7861328125, + "height": 13, + "text": "+fromJSON()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAPCE2o6kl+ZE=", + "_parent": { + "$ref": "AAAAAAGAPCD46aefwOo=" + }, + "model": { + "$ref": "AAAAAAGAPCE2f6kc9N4=" + }, + "font": "Arial;13;0", + "left": 1525, + "top": 1363, + "width": 160.7861328125, + "height": 13, + "text": "+toJSON()", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 1520, + "top": 1343, + "width": 170.7861328125, + "height": 38 + }, + { + "_type": "UMLReceptionCompartmentView", + "_id": "AAAAAAGAPCD46aeg9BU=", + "_parent": { + "$ref": "AAAAAAGAPCD46KeYkpo=" + }, + "model": { + "$ref": "AAAAAAGAPCD456eWclQ=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 520, + "top": 1000, + "width": 10, + "height": 10 + }, + { + "_type": "UMLTemplateParameterCompartmentView", + "_id": "AAAAAAGAPCD46aehjMA=", + "_parent": { + "$ref": "AAAAAAGAPCD46KeYkpo=" + }, + "model": { + "$ref": "AAAAAAGAPCD456eWclQ=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 520, + "top": 1000, + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "containerChangeable": true, + "left": 1520, + "top": 1280, + "width": 170.7861328125, + "height": 101, + "nameCompartment": { + "$ref": "AAAAAAGAPCD46KeZWB4=" + }, + "attributeCompartment": { + "$ref": "AAAAAAGAPCD46Kee1O0=" + }, + "operationCompartment": { + "$ref": "AAAAAAGAPCD46aefwOo=" + }, + "receptionCompartment": { + "$ref": "AAAAAAGAPCD46aeg9BU=" + }, + "templateParameterCompartment": { + "$ref": "AAAAAAGAPCD46aehjMA=" + } + }, + { + "_type": "UMLGeneralizationView", + "_id": "AAAAAAGAPCEOcKgdRwY=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAPCEOb6gbYVs=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPCEOcKgezAQ=", + "_parent": { + "$ref": "AAAAAAGAPCEOcKgdRwY=" + }, + "model": { + "$ref": "AAAAAAGAPCEOb6gbYVs=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1543, + "top": 1216, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAPCEOcKgdRwY=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPCEOcKgfges=", + "_parent": { + "$ref": "AAAAAAGAPCEOcKgdRwY=" + }, + "model": { + "$ref": "AAAAAAGAPCEOb6gbYVs=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 1529, + "top": 1222, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAPCEOcKgdRwY=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPCEOcKggoCI=", + "_parent": { + "$ref": "AAAAAAGAPCEOcKgdRwY=" + }, + "model": { + "$ref": "AAAAAAGAPCEOb6gbYVs=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1570, + "top": 1205, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAPCEOcKgdRwY=" + }, + "edgePosition": 1 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAO1MYek/JnBg=" + }, + "tail": { + "$ref": "AAAAAAGAPCD46KeYkpo=" + }, + "lineStyle": 1, + "points": "1583:1279;1532:1156", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAPCEOcKgezAQ=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAPCEOcKgfges=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAPCEOcKggoCI=" + } + }, + { + "_type": "UMLClassView", + "_id": "AAAAAAGAPCnyRqqSpVk=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAPCnyRqqQR0M=" + }, + "subViews": [ + { + "_type": "UMLNameCompartmentView", + "_id": "AAAAAAGAPCnyR6qT0qo=", + "_parent": { + "$ref": "AAAAAAGAPCnyRqqSpVk=" + }, + "model": { + "$ref": "AAAAAAGAPCnyRqqQR0M=" + }, + "subViews": [ + { + "_type": "LabelView", + "_id": "AAAAAAGAPCnyR6qUmU8=", + "_parent": { + "$ref": "AAAAAAGAPCnyR6qT0qo=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 992, + "top": 1872, + "height": 13 + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAPCnyR6qVskM=", + "_parent": { + "$ref": "AAAAAAGAPCnyR6qT0qo=" + }, + "font": "Arial;13;1", + "left": 1533, + "top": 1503, + "width": 160.7861328125, + "height": 13, + "text": "SimpleFillSymbol" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAPCnyR6qWzlw=", + "_parent": { + "$ref": "AAAAAAGAPCnyR6qT0qo=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 992, + "top": 1872, + "width": 73.67724609375, + "height": 13, + "text": "(from Model)" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAPCnyR6qX0jU=", + "_parent": { + "$ref": "AAAAAAGAPCnyR6qT0qo=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 992, + "top": 1872, + "height": 13, + "horizontalAlignment": 1 + } + ], + "font": "Arial;13;0", + "left": 1528, + "top": 1496, + "width": 170.7861328125, + "height": 25, + "stereotypeLabel": { + "$ref": "AAAAAAGAPCnyR6qUmU8=" + }, + "nameLabel": { + "$ref": "AAAAAAGAPCnyR6qVskM=" + }, + "namespaceLabel": { + "$ref": "AAAAAAGAPCnyR6qWzlw=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAPCnyR6qX0jU=" + } + }, + { + "_type": "UMLAttributeCompartmentView", + "_id": "AAAAAAGAPCnyR6qYf2U=", + "_parent": { + "$ref": "AAAAAAGAPCnyRqqSpVk=" + }, + "model": { + "$ref": "AAAAAAGAPCnyRqqQR0M=" + }, + "subViews": [ + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPCqTNquhaEY=", + "_parent": { + "$ref": "AAAAAAGAPCnyR6qYf2U=" + }, + "model": { + "$ref": "AAAAAAGAPCqTEauYd9c=" + }, + "font": "Arial;13;0", + "left": 1533, + "top": 1526, + "width": 160.7861328125, + "height": 13, + "text": "+type", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPCqZmqvXg2I=", + "_parent": { + "$ref": "AAAAAAGAPCnyR6qYf2U=" + }, + "model": { + "$ref": "AAAAAAGAPCqZd6vOxgQ=" + }, + "font": "Arial;13;0", + "left": 1533, + "top": 1541, + "width": 160.7861328125, + "height": 13, + "text": "+color", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPCqcsqv7lf8=", + "_parent": { + "$ref": "AAAAAAGAPCnyR6qYf2U=" + }, + "model": { + "$ref": "AAAAAAGAPCqcjqvys9Y=" + }, + "font": "Arial;13;0", + "left": 1533, + "top": 1556, + "width": 160.7861328125, + "height": 13, + "text": "+outline: SimpleLineSymbol", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPCqfm6wfWwQ=", + "_parent": { + "$ref": "AAAAAAGAPCnyR6qYf2U=" + }, + "model": { + "$ref": "AAAAAAGAPCqfd6wWjho=" + }, + "font": "Arial;13;0", + "left": 1533, + "top": 1571, + "width": 160.7861328125, + "height": 13, + "text": "+style", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 1528, + "top": 1521, + "width": 170.7861328125, + "height": 68 + }, + { + "_type": "UMLOperationCompartmentView", + "_id": "AAAAAAGAPCnyR6qZZbw=", + "_parent": { + "$ref": "AAAAAAGAPCnyRqqSpVk=" + }, + "model": { + "$ref": "AAAAAAGAPCnyRqqQR0M=" + }, + "subViews": [ + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAPCp9CqsRn5Y=", + "_parent": { + "$ref": "AAAAAAGAPCnyR6qZZbw=" + }, + "model": { + "$ref": "AAAAAAGAPCp84qsIizc=" + }, + "font": "Arial;13;0", + "left": 1533, + "top": 1594, + "width": 160.7861328125, + "height": 13, + "text": "+clone()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAPCqE2qtH91E=", + "_parent": { + "$ref": "AAAAAAGAPCnyR6qZZbw=" + }, + "model": { + "$ref": "AAAAAAGAPCqEt6s+HlI=" + }, + "font": "Arial;13;0", + "left": 1533, + "top": 1609, + "width": 160.7861328125, + "height": 13, + "text": "+fromJSON()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAPCqItatrJLk=", + "_parent": { + "$ref": "AAAAAAGAPCnyR6qZZbw=" + }, + "model": { + "$ref": "AAAAAAGAPCqIjqtiAxk=" + }, + "font": "Arial;13;0", + "left": 1533, + "top": 1624, + "width": 160.7861328125, + "height": 13, + "text": "+toJSON()", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 1528, + "top": 1589, + "width": 170.7861328125, + "height": 53 + }, + { + "_type": "UMLReceptionCompartmentView", + "_id": "AAAAAAGAPCnyR6qacBE=", + "_parent": { + "$ref": "AAAAAAGAPCnyRqqSpVk=" + }, + "model": { + "$ref": "AAAAAAGAPCnyRqqQR0M=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 496, + "top": 936, + "width": 10, + "height": 10 + }, + { + "_type": "UMLTemplateParameterCompartmentView", + "_id": "AAAAAAGAPCnyR6qbhsM=", + "_parent": { + "$ref": "AAAAAAGAPCnyRqqSpVk=" + }, + "model": { + "$ref": "AAAAAAGAPCnyRqqQR0M=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 496, + "top": 936, + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "containerChangeable": true, + "left": 1528, + "top": 1496, + "width": 170.7861328125, + "height": 146, + "nameCompartment": { + "$ref": "AAAAAAGAPCnyR6qT0qo=" + }, + "attributeCompartment": { + "$ref": "AAAAAAGAPCnyR6qYf2U=" + }, + "operationCompartment": { + "$ref": "AAAAAAGAPCnyR6qZZbw=" + }, + "receptionCompartment": { + "$ref": "AAAAAAGAPCnyR6qacBE=" + }, + "templateParameterCompartment": { + "$ref": "AAAAAAGAPCnyR6qbhsM=" + } + }, + { + "_type": "UMLGeneralizationView", + "_id": "AAAAAAGAPCwoxq9nUGU=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAPCwoxq9lm94=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPCwoxq9ow70=", + "_parent": { + "$ref": "AAAAAAGAPCwoxq9nUGU=" + }, + "model": { + "$ref": "AAAAAAGAPCwoxq9lm94=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1593, + "top": 1432, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAPCwoxq9nUGU=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPCwoxq9pgNU=", + "_parent": { + "$ref": "AAAAAAGAPCwoxq9nUGU=" + }, + "model": { + "$ref": "AAAAAAGAPCwoxq9lm94=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 1578, + "top": 1433, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAPCwoxq9nUGU=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPCwoxq9qtb4=", + "_parent": { + "$ref": "AAAAAAGAPCwoxq9nUGU=" + }, + "model": { + "$ref": "AAAAAAGAPCwoxq9lm94=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1622, + "top": 1431, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAPCwoxq9nUGU=" + }, + "edgePosition": 1 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAPCD46KeYkpo=" + }, + "tail": { + "$ref": "AAAAAAGAPCnyRqqSpVk=" + }, + "lineStyle": 1, + "points": "1610:1495;1606:1381", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAPCwoxq9ow70=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAPCwoxq9pgNU=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAPCwoxq9qtb4=" + } + }, + { + "_type": "UMLClassView", + "_id": "AAAAAAGAPQMJ63hIQC8=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAPQMJ6nhGP6w=" + }, + "subViews": [ + { + "_type": "UMLNameCompartmentView", + "_id": "AAAAAAGAPQMJ63hJTUk=", + "_parent": { + "$ref": "AAAAAAGAPQMJ63hIQC8=" + }, + "model": { + "$ref": "AAAAAAGAPQMJ6nhGP6w=" + }, + "subViews": [ + { + "_type": "LabelView", + "_id": "AAAAAAGAPQMJ63hKJJk=", + "_parent": { + "$ref": "AAAAAAGAPQMJ63hJTUk=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1088, + "top": 1920, + "height": 13 + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAPQMJ63hLNu0=", + "_parent": { + "$ref": "AAAAAAGAPQMJ63hJTUk=" + }, + "font": "Arial;13;1", + "left": 1717, + "top": 1503, + "width": 160.7861328125, + "height": 13, + "text": "PictureFillSymbol" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAPQMJ63hM0WA=", + "_parent": { + "$ref": "AAAAAAGAPQMJ63hJTUk=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1088, + "top": 1920, + "width": 73.67724609375, + "height": 13, + "text": "(from Model)" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAPQMJ63hNiQU=", + "_parent": { + "$ref": "AAAAAAGAPQMJ63hJTUk=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1088, + "top": 1920, + "height": 13, + "horizontalAlignment": 1 + } + ], + "font": "Arial;13;0", + "left": 1712, + "top": 1496, + "width": 170.7861328125, + "height": 25, + "stereotypeLabel": { + "$ref": "AAAAAAGAPQMJ63hKJJk=" + }, + "nameLabel": { + "$ref": "AAAAAAGAPQMJ63hLNu0=" + }, + "namespaceLabel": { + "$ref": "AAAAAAGAPQMJ63hM0WA=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAPQMJ63hNiQU=" + } + }, + { + "_type": "UMLAttributeCompartmentView", + "_id": "AAAAAAGAPQMJ63hOhZk=", + "_parent": { + "$ref": "AAAAAAGAPQMJ63hIQC8=" + }, + "model": { + "$ref": "AAAAAAGAPQMJ6nhGP6w=" + }, + "subViews": [ + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPQM7f3jBJ7M=", + "_parent": { + "$ref": "AAAAAAGAPQMJ63hOhZk=" + }, + "model": { + "$ref": "AAAAAAGAPQM7WHi4dEU=" + }, + "font": "Arial;13;0", + "left": 1717, + "top": 1526, + "width": 160.7861328125, + "height": 13, + "text": "+type", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPQND4Xj379s=", + "_parent": { + "$ref": "AAAAAAGAPQMJ63hOhZk=" + }, + "model": { + "$ref": "AAAAAAGAPQNDuXjuWOY=" + }, + "font": "Arial;13;0", + "left": 1717, + "top": 1541, + "width": 160.7861328125, + "height": 13, + "text": "+height", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPQNGE3kbdFg=", + "_parent": { + "$ref": "AAAAAAGAPQMJ63hOhZk=" + }, + "model": { + "$ref": "AAAAAAGAPQNF6nkSbuY=" + }, + "font": "Arial;13;0", + "left": 1717, + "top": 1556, + "width": 160.7861328125, + "height": 13, + "text": "+outline: SimpleLineSymbol", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPQNIx3k/XFc=", + "_parent": { + "$ref": "AAAAAAGAPQMJ63hOhZk=" + }, + "model": { + "$ref": "AAAAAAGAPQNIonk2nHk=" + }, + "font": "Arial;13;0", + "left": 1717, + "top": 1571, + "width": 160.7861328125, + "height": 13, + "text": "+url", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPQNKqnljCV0=", + "_parent": { + "$ref": "AAAAAAGAPQMJ63hOhZk=" + }, + "model": { + "$ref": "AAAAAAGAPQNKhXlabsA=" + }, + "font": "Arial;13;0", + "left": 1717, + "top": 1586, + "width": 160.7861328125, + "height": 13, + "text": "+width", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPQNMZnmH/hI=", + "_parent": { + "$ref": "AAAAAAGAPQMJ63hOhZk=" + }, + "model": { + "$ref": "AAAAAAGAPQNMP3l+opg=" + }, + "font": "Arial;13;0", + "left": 1717, + "top": 1601, + "width": 160.7861328125, + "height": 13, + "text": "+xoffset", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPQNOvHmrcrM=", + "_parent": { + "$ref": "AAAAAAGAPQMJ63hOhZk=" + }, + "model": { + "$ref": "AAAAAAGAPQNOl3miql8=" + }, + "font": "Arial;13;0", + "left": 1717, + "top": 1616, + "width": 160.7861328125, + "height": 13, + "text": "+xscale", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPQNQdXnPFQ0=", + "_parent": { + "$ref": "AAAAAAGAPQMJ63hOhZk=" + }, + "model": { + "$ref": "AAAAAAGAPQNQUnnGgkw=" + }, + "font": "Arial;13;0", + "left": 1717, + "top": 1631, + "width": 160.7861328125, + "height": 13, + "text": "+yoffset", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPQNVUHoXv8w=", + "_parent": { + "$ref": "AAAAAAGAPQMJ63hOhZk=" + }, + "model": { + "$ref": "AAAAAAGAPQNVK3oOyW0=" + }, + "font": "Arial;13;0", + "left": 1717, + "top": 1646, + "width": 160.7861328125, + "height": 13, + "text": "+yscale", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 1712, + "top": 1521, + "width": 170.7861328125, + "height": 143 + }, + { + "_type": "UMLOperationCompartmentView", + "_id": "AAAAAAGAPQMJ63hPGHg=", + "_parent": { + "$ref": "AAAAAAGAPQMJ63hIQC8=" + }, + "model": { + "$ref": "AAAAAAGAPQMJ6nhGP6w=" + }, + "subViews": [ + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAPQP0snvrEeE=", + "_parent": { + "$ref": "AAAAAAGAPQMJ63hPGHg=" + }, + "model": { + "$ref": "AAAAAAGAPQP0jXviawc=" + }, + "font": "Arial;13;0", + "left": 1717, + "top": 1669, + "width": 160.7861328125, + "height": 13, + "text": "+clone()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAPQP6XHwh97M=", + "_parent": { + "$ref": "AAAAAAGAPQMJ63hPGHg=" + }, + "model": { + "$ref": "AAAAAAGAPQP6OHwYjDU=" + }, + "font": "Arial;13;0", + "left": 1717, + "top": 1684, + "width": 160.7861328125, + "height": 13, + "text": "+fromJSON()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAPQP9KXxFN3I=", + "_parent": { + "$ref": "AAAAAAGAPQMJ63hPGHg=" + }, + "model": { + "$ref": "AAAAAAGAPQP8/nw8tdI=" + }, + "font": "Arial;13;0", + "left": 1717, + "top": 1699, + "width": 160.7861328125, + "height": 13, + "text": "+toJSON()", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 1712, + "top": 1664, + "width": 170.7861328125, + "height": 53 + }, + { + "_type": "UMLReceptionCompartmentView", + "_id": "AAAAAAGAPQMJ63hQXkg=", + "_parent": { + "$ref": "AAAAAAGAPQMJ63hIQC8=" + }, + "model": { + "$ref": "AAAAAAGAPQMJ6nhGP6w=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 544, + "top": 960, + "width": 10, + "height": 10 + }, + { + "_type": "UMLTemplateParameterCompartmentView", + "_id": "AAAAAAGAPQMJ63hRc7s=", + "_parent": { + "$ref": "AAAAAAGAPQMJ63hIQC8=" + }, + "model": { + "$ref": "AAAAAAGAPQMJ6nhGP6w=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 544, + "top": 960, + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "containerChangeable": true, + "left": 1712, + "top": 1496, + "width": 170.7861328125, + "height": 221, + "nameCompartment": { + "$ref": "AAAAAAGAPQMJ63hJTUk=" + }, + "attributeCompartment": { + "$ref": "AAAAAAGAPQMJ63hOhZk=" + }, + "operationCompartment": { + "$ref": "AAAAAAGAPQMJ63hPGHg=" + }, + "receptionCompartment": { + "$ref": "AAAAAAGAPQMJ63hQXkg=" + }, + "templateParameterCompartment": { + "$ref": "AAAAAAGAPQMJ63hRc7s=" + } + }, + { + "_type": "UMLGeneralizationView", + "_id": "AAAAAAGAPQQ/rX0URLo=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAPQQ/rX0Sm58=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPQQ/rX0VtkM=", + "_parent": { + "$ref": "AAAAAAGAPQQ/rX0URLo=" + }, + "model": { + "$ref": "AAAAAAGAPQQ/rX0Sm58=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1666, + "top": 1440, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAPQQ/rX0URLo=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPQQ/rX0Wl60=", + "_parent": { + "$ref": "AAAAAAGAPQQ/rX0URLo=" + }, + "model": { + "$ref": "AAAAAAGAPQQ/rX0Sm58=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 1654, + "top": 1449, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAPQQ/rX0URLo=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPQQ/rX0XM6s=", + "_parent": { + "$ref": "AAAAAAGAPQQ/rX0URLo=" + }, + "model": { + "$ref": "AAAAAAGAPQQ/rX0Sm58=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1691, + "top": 1423, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAPQQ/rX0URLo=" + }, + "edgePosition": 1 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAPCD46KeYkpo=" + }, + "tail": { + "$ref": "AAAAAAGAPQMJ63hIQC8=" + }, + "lineStyle": 1, + "points": "1719:1495;1639:1381", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAPQQ/rX0VtkM=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAPQQ/rX0Wl60=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAPQQ/rX0XM6s=" + } + }, + { + "_type": "UMLAssociationView", + "_id": "AAAAAAGAPQTeDH32cnY=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAPQTeDH3yZgM=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPQTeDX33gTs=", + "_parent": { + "$ref": "AAAAAAGAPQTeDH32cnY=" + }, + "model": { + "$ref": "AAAAAAGAPQTeDH3yZgM=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1521, + "top": 1590, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAPQTeDH32cnY=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPQTeDX34DKc=", + "_parent": { + "$ref": "AAAAAAGAPQTeDH32cnY=" + }, + "model": { + "$ref": "AAAAAAGAPQTeDH3yZgM=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 1525, + "top": 1605, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAPQTeDH32cnY=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPQTeDX35nSg=", + "_parent": { + "$ref": "AAAAAAGAPQTeDH32cnY=" + }, + "model": { + "$ref": "AAAAAAGAPQTeDH3yZgM=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1514, + "top": 1561, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAPQTeDH32cnY=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPQTeDX3618o=", + "_parent": { + "$ref": "AAAAAAGAPQTeDH32cnY=" + }, + "model": { + "$ref": "AAAAAAGAPQTeDH3zm0M=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1504, + "top": 1594, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAPQTeDH32cnY=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPQTeDX37f5c=", + "_parent": { + "$ref": "AAAAAAGAPQTeDH32cnY=" + }, + "model": { + "$ref": "AAAAAAGAPQTeDH3zm0M=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1504, + "top": 1607, + "height": 13, + "alpha": 0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAPQTeDH32cnY=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPQTeDX38gSU=", + "_parent": { + "$ref": "AAAAAAGAPQTeDH32cnY=" + }, + "model": { + "$ref": "AAAAAAGAPQTeDH3zm0M=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1503, + "top": 1566, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAPQTeDH32cnY=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPQTeDX39Vcs=", + "_parent": { + "$ref": "AAAAAAGAPQTeDH32cnY=" + }, + "model": { + "$ref": "AAAAAAGAPQTeDH30fcw=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1538, + "top": 1588, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAPQTeDH32cnY=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPQTeDX3+aTI=", + "_parent": { + "$ref": "AAAAAAGAPQTeDH32cnY=" + }, + "model": { + "$ref": "AAAAAAGAPQTeDH30fcw=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1542, + "top": 1600, + "height": 13, + "alpha": -0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAPQTeDH32cnY=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPQTeDX3/PDY=", + "_parent": { + "$ref": "AAAAAAGAPQTeDH32cnY=" + }, + "model": { + "$ref": "AAAAAAGAPQTeDH30fcw=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1529, + "top": 1561, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAPQTeDH32cnY=" + } + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAPQTeDX4Auts=", + "_parent": { + "$ref": "AAAAAAGAPQTeDH32cnY=" + }, + "model": { + "$ref": "AAAAAAGAPQTeDH3zm0M=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 576, + "top": 1024, + "width": 10, + "height": 10 + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAPQTeDX4BSzc=", + "_parent": { + "$ref": "AAAAAAGAPQTeDH32cnY=" + }, + "model": { + "$ref": "AAAAAAGAPQTeDH30fcw=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 576, + "top": 1024, + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAPAMK75wCNw0=" + }, + "tail": { + "$ref": "AAAAAAGAPCnyRqqSpVk=" + }, + "lineStyle": 1, + "points": "1527:1581;1510:1584", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAPQTeDX33gTs=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAPQTeDX34DKc=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAPQTeDX35nSg=" + }, + "tailRoleNameLabel": { + "$ref": "AAAAAAGAPQTeDX3618o=" + }, + "tailPropertyLabel": { + "$ref": "AAAAAAGAPQTeDX37f5c=" + }, + "tailMultiplicityLabel": { + "$ref": "AAAAAAGAPQTeDX38gSU=" + }, + "headRoleNameLabel": { + "$ref": "AAAAAAGAPQTeDX39Vcs=" + }, + "headPropertyLabel": { + "$ref": "AAAAAAGAPQTeDX3+aTI=" + }, + "headMultiplicityLabel": { + "$ref": "AAAAAAGAPQTeDX3/PDY=" + }, + "tailQualifiersCompartment": { + "$ref": "AAAAAAGAPQTeDX4Auts=" + }, + "headQualifiersCompartment": { + "$ref": "AAAAAAGAPQTeDX4BSzc=" + } + }, + { + "_type": "UMLAssociationView", + "_id": "AAAAAAGAPQTsHn5p+g8=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAPQTsGX5l7I8=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPQTsHn5qTWg=", + "_parent": { + "$ref": "AAAAAAGAPQTsHn5p+g8=" + }, + "model": { + "$ref": "AAAAAAGAPQTsGX5l7I8=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1609, + "top": 1670, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAPQTsHn5p+g8=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPQTsHn5rB/w=", + "_parent": { + "$ref": "AAAAAAGAPQTsHn5p+g8=" + }, + "model": { + "$ref": "AAAAAAGAPQTsGX5l7I8=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 1609, + "top": 1685, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAPQTsHn5p+g8=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPQTsHn5stGY=", + "_parent": { + "$ref": "AAAAAAGAPQTsHn5p+g8=" + }, + "model": { + "$ref": "AAAAAAGAPQTsGX5l7I8=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1610, + "top": 1640, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAPQTsHn5p+g8=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPQTsHn5tREM=", + "_parent": { + "$ref": "AAAAAAGAPQTsHn5p+g8=" + }, + "model": { + "$ref": "AAAAAAGAPQTsGX5mdOE=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1686, + "top": 1669, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAPQTsHn5p+g8=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPQTsHn5uFV8=", + "_parent": { + "$ref": "AAAAAAGAPQTsHn5p+g8=" + }, + "model": { + "$ref": "AAAAAAGAPQTsGX5mdOE=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1683, + "top": 1683, + "height": 13, + "alpha": 0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAPQTsHn5p+g8=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPQTsHn5vvws=", + "_parent": { + "$ref": "AAAAAAGAPQTsHn5p+g8=" + }, + "model": { + "$ref": "AAAAAAGAPQTsGX5mdOE=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1690, + "top": 1642, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAPQTsHn5p+g8=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPQTsHn5wMFQ=", + "_parent": { + "$ref": "AAAAAAGAPQTsHn5p+g8=" + }, + "model": { + "$ref": "AAAAAAGAPQTsGX5nfsI=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1534, + "top": 1669, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAPQTsHn5p+g8=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPQTsHn5xqQc=", + "_parent": { + "$ref": "AAAAAAGAPQTsHn5p+g8=" + }, + "model": { + "$ref": "AAAAAAGAPQTsGX5nfsI=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1537, + "top": 1683, + "height": 13, + "alpha": -0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAPQTsHn5p+g8=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPQTsHn5y2DI=", + "_parent": { + "$ref": "AAAAAAGAPQTsHn5p+g8=" + }, + "model": { + "$ref": "AAAAAAGAPQTsGX5nfsI=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1530, + "top": 1642, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAPQTsHn5p+g8=" + } + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAPQTsHn5zeYw=", + "_parent": { + "$ref": "AAAAAAGAPQTsHn5p+g8=" + }, + "model": { + "$ref": "AAAAAAGAPQTsGX5mdOE=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 576, + "top": 1024, + "width": 10, + "height": 10 + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAPQTsHn505Lo=", + "_parent": { + "$ref": "AAAAAAGAPQTsHn5p+g8=" + }, + "model": { + "$ref": "AAAAAAGAPQTsGX5nfsI=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 576, + "top": 1024, + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAPAMK75wCNw0=" + }, + "tail": { + "$ref": "AAAAAAGAPQMJ63hIQC8=" + }, + "points": "1712:1661;1509:1661", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAPQTsHn5qTWg=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAPQTsHn5rB/w=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAPQTsHn5stGY=" + }, + "tailRoleNameLabel": { + "$ref": "AAAAAAGAPQTsHn5tREM=" + }, + "tailPropertyLabel": { + "$ref": "AAAAAAGAPQTsHn5uFV8=" + }, + "tailMultiplicityLabel": { + "$ref": "AAAAAAGAPQTsHn5vvws=" + }, + "headRoleNameLabel": { + "$ref": "AAAAAAGAPQTsHn5wMFQ=" + }, + "headPropertyLabel": { + "$ref": "AAAAAAGAPQTsHn5xqQc=" + }, + "headMultiplicityLabel": { + "$ref": "AAAAAAGAPQTsHn5y2DI=" + }, + "tailQualifiersCompartment": { + "$ref": "AAAAAAGAPQTsHn5zeYw=" + }, + "headQualifiersCompartment": { + "$ref": "AAAAAAGAPQTsHn505Lo=" + } + }, + { + "_type": "UMLClassView", + "_id": "AAAAAAGAPQff+YT4B2c=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "subViews": [ + { + "_type": "UMLNameCompartmentView", + "_id": "AAAAAAGAPQff+YT5brs=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT4B2c=" + }, + "model": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "subViews": [ + { + "_type": "LabelView", + "_id": "AAAAAAGAPQff+YT6ibA=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT5brs=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 912, + "top": 1984, + "height": 13 + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAPQff+YT73zw=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT5brs=" + }, + "font": "Arial;13;1", + "left": 1909, + "top": 1287, + "width": 121.76708984375, + "height": 13, + "text": "TextSymbol" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAPQff+YT8ACs=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT5brs=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 912, + "top": 1984, + "width": 73.67724609375, + "height": 13, + "text": "(from Model)" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAPQff+oT9tm4=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT5brs=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 912, + "top": 1984, + "height": 13, + "horizontalAlignment": 1 + } + ], + "font": "Arial;13;0", + "left": 1904, + "top": 1280, + "width": 131.76708984375, + "height": 25, + "stereotypeLabel": { + "$ref": "AAAAAAGAPQff+YT6ibA=" + }, + "nameLabel": { + "$ref": "AAAAAAGAPQff+YT73zw=" + }, + "namespaceLabel": { + "$ref": "AAAAAAGAPQff+YT8ACs=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAPQff+oT9tm4=" + } + }, + { + "_type": "UMLAttributeCompartmentView", + "_id": "AAAAAAGAPQff+oT+U9k=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT4B2c=" + }, + "model": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "subViews": [ + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPSAILpBJc2o=", + "_parent": { + "$ref": "AAAAAAGAPQff+oT+U9k=" + }, + "model": { + "$ref": "AAAAAAGAPSAICJA6v/o=" + }, + "font": "Arial;13;0", + "left": 1909, + "top": 1310, + "width": 121.76708984375, + "height": 13, + "text": "+type", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPSAORZCvhv0=", + "_parent": { + "$ref": "AAAAAAGAPQff+oT+U9k=" + }, + "model": { + "$ref": "AAAAAAGAPSAOIJCgc6M=" + }, + "font": "Arial;13;0", + "left": 1909, + "top": 1325, + "width": 121.76708984375, + "height": 13, + "text": "+angle", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPSARAZDxqV8=", + "_parent": { + "$ref": "AAAAAAGAPQff+oT+U9k=" + }, + "model": { + "$ref": "AAAAAAGAPSAQ2ZDiIF4=" + }, + "font": "Arial;13;0", + "left": 1909, + "top": 1340, + "width": 121.76708984375, + "height": 13, + "text": "+backgroundColor", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPSATSZEzAa4=", + "_parent": { + "$ref": "AAAAAAGAPQff+oT+U9k=" + }, + "model": { + "$ref": "AAAAAAGAPSATI5Ek4IM=" + }, + "font": "Arial;13;0", + "left": 1909, + "top": 1355, + "width": 121.76708984375, + "height": 13, + "text": "+borderLineColor", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPSAVNZF1V5s=", + "_parent": { + "$ref": "AAAAAAGAPQff+oT+U9k=" + }, + "model": { + "$ref": "AAAAAAGAPSAVEZFmIR8=" + }, + "font": "Arial;13;0", + "left": 1909, + "top": 1370, + "width": 121.76708984375, + "height": 13, + "text": "+borderLineSize", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPSAXNpG3Gb0=", + "_parent": { + "$ref": "AAAAAAGAPQff+oT+U9k=" + }, + "model": { + "$ref": "AAAAAAGAPSAXEZGod8M=" + }, + "font": "Arial;13;0", + "left": 1909, + "top": 1385, + "width": 121.76708984375, + "height": 13, + "text": "+color", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPSAZe5H5/4w=", + "_parent": { + "$ref": "AAAAAAGAPQff+oT+U9k=" + }, + "model": { + "$ref": "AAAAAAGAPSAZV5HqksU=" + }, + "font": "Arial;13;0", + "left": 1909, + "top": 1400, + "width": 121.76708984375, + "height": 13, + "text": "+font: Font", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPSAcbJI7qJg=", + "_parent": { + "$ref": "AAAAAAGAPQff+oT+U9k=" + }, + "model": { + "$ref": "AAAAAAGAPSAcR5Is1X4=" + }, + "font": "Arial;13;0", + "left": 1909, + "top": 1415, + "width": 121.76708984375, + "height": 13, + "text": "+haloColor", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPSAebJJ9kFc=", + "_parent": { + "$ref": "AAAAAAGAPQff+oT+U9k=" + }, + "model": { + "$ref": "AAAAAAGAPSAeRZJuhG0=" + }, + "font": "Arial;13;0", + "left": 1909, + "top": 1430, + "width": 121.76708984375, + "height": 13, + "text": "+haloSize", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPSAgsJK/da8=", + "_parent": { + "$ref": "AAAAAAGAPQff+oT+U9k=" + }, + "model": { + "$ref": "AAAAAAGAPSAgi5KwfFQ=" + }, + "font": "Arial;13;0", + "left": 1909, + "top": 1445, + "width": 121.76708984375, + "height": 13, + "text": "+horizontalAlignment", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPSAi3JMB7Lg=", + "_parent": { + "$ref": "AAAAAAGAPQff+oT+U9k=" + }, + "model": { + "$ref": "AAAAAAGAPSAitpLy8xw=" + }, + "font": "Arial;13;0", + "left": 1909, + "top": 1460, + "width": 121.76708984375, + "height": 13, + "text": "+kerning", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPSAlBZNDIlM=", + "_parent": { + "$ref": "AAAAAAGAPQff+oT+U9k=" + }, + "model": { + "$ref": "AAAAAAGAPSAk2pM04uU=" + }, + "font": "Arial;13;0", + "left": 1909, + "top": 1475, + "width": 121.76708984375, + "height": 13, + "text": "+lineHeight", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPSAnOJOFtK8=", + "_parent": { + "$ref": "AAAAAAGAPQff+oT+U9k=" + }, + "model": { + "$ref": "AAAAAAGAPSAnFJN2K9s=" + }, + "font": "Arial;13;0", + "left": 1909, + "top": 1490, + "width": 121.76708984375, + "height": 13, + "text": "+lineWidth", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPSApW5PHPKo=", + "_parent": { + "$ref": "AAAAAAGAPQff+oT+U9k=" + }, + "model": { + "$ref": "AAAAAAGAPSApNZO4TrY=" + }, + "font": "Arial;13;0", + "left": 1909, + "top": 1505, + "width": 121.76708984375, + "height": 13, + "text": "+rotated", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPSDpdpiVETQ=", + "_parent": { + "$ref": "AAAAAAGAPQff+oT+U9k=" + }, + "model": { + "$ref": "AAAAAAGAPSDpSpiG08U=" + }, + "font": "Arial;13;0", + "left": 1909, + "top": 1520, + "width": 121.76708984375, + "height": 13, + "text": "+text", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPSDysJkT9m8=", + "_parent": { + "$ref": "AAAAAAGAPQff+oT+U9k=" + }, + "model": { + "$ref": "AAAAAAGAPSDyipkENGA=" + }, + "font": "Arial;13;0", + "left": 1909, + "top": 1535, + "width": 121.76708984375, + "height": 13, + "text": "+verticalAlignment", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPSD1pZlVxKo=", + "_parent": { + "$ref": "AAAAAAGAPQff+oT+U9k=" + }, + "model": { + "$ref": "AAAAAAGAPSD1fJlGhvw=" + }, + "font": "Arial;13;0", + "left": 1909, + "top": 1550, + "width": 121.76708984375, + "height": 13, + "text": "+xoffset", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPSFI3pt8ews=", + "_parent": { + "$ref": "AAAAAAGAPQff+oT+U9k=" + }, + "model": { + "$ref": "AAAAAAGAPSFIs5ttMYs=" + }, + "font": "Arial;13;0", + "left": 1909, + "top": 1565, + "width": 121.76708984375, + "height": 13, + "text": "+yoffset", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 1904, + "top": 1305, + "width": 131.76708984375, + "height": 278 + }, + { + "_type": "UMLOperationCompartmentView", + "_id": "AAAAAAGAPQff+oT/0h0=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT4B2c=" + }, + "model": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "subViews": [ + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAPR/v/48X06k=", + "_parent": { + "$ref": "AAAAAAGAPQff+oT/0h0=" + }, + "model": { + "$ref": "AAAAAAGAPR/v2o8IG9I=" + }, + "font": "Arial;13;0", + "left": 1909, + "top": 1588, + "width": 121.76708984375, + "height": 13, + "text": "+clone()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAPR/8/I+hiJ0=", + "_parent": { + "$ref": "AAAAAAGAPQff+oT/0h0=" + }, + "model": { + "$ref": "AAAAAAGAPR/81I+SarM=" + }, + "font": "Arial;13;0", + "left": 1909, + "top": 1603, + "width": 121.76708984375, + "height": 13, + "text": "+fromJSON()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAPR//VY/j/To=", + "_parent": { + "$ref": "AAAAAAGAPQff+oT/0h0=" + }, + "model": { + "$ref": "AAAAAAGAPR//MI/UW7w=" + }, + "font": "Arial;13;0", + "left": 1909, + "top": 1618, + "width": 121.76708984375, + "height": 13, + "text": "+toJSON()", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 1904, + "top": 1583, + "width": 131.76708984375, + "height": 53 + }, + { + "_type": "UMLReceptionCompartmentView", + "_id": "AAAAAAGAPQff+oUASTM=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT4B2c=" + }, + "model": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 456, + "top": 992, + "width": 10, + "height": 10 + }, + { + "_type": "UMLTemplateParameterCompartmentView", + "_id": "AAAAAAGAPQff+oUBbVo=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT4B2c=" + }, + "model": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 456, + "top": 992, + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "containerChangeable": true, + "left": 1904, + "top": 1280, + "width": 131.76708984375, + "height": 356, + "nameCompartment": { + "$ref": "AAAAAAGAPQff+YT5brs=" + }, + "attributeCompartment": { + "$ref": "AAAAAAGAPQff+oT+U9k=" + }, + "operationCompartment": { + "$ref": "AAAAAAGAPQff+oT/0h0=" + }, + "receptionCompartment": { + "$ref": "AAAAAAGAPQff+oUASTM=" + }, + "templateParameterCompartment": { + "$ref": "AAAAAAGAPQff+oUBbVo=" + } + }, + { + "_type": "UMLGeneralizationView", + "_id": "AAAAAAGAPQhWsoWnkVI=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAPQhWsoWl3dc=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPQhWsoWo0Ew=", + "_parent": { + "$ref": "AAAAAAGAPQhWsoWnkVI=" + }, + "model": { + "$ref": "AAAAAAGAPQhWsoWl3dc=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1719, + "top": 1274, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAPQhWsoWnkVI=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPQhWsoWpfhI=", + "_parent": { + "$ref": "AAAAAAGAPQhWsoWnkVI=" + }, + "model": { + "$ref": "AAAAAAGAPQhWsoWl3dc=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 1710, + "top": 1286, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAPQhWsoWnkVI=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPQhWsoWqvn0=", + "_parent": { + "$ref": "AAAAAAGAPQhWsoWnkVI=" + }, + "model": { + "$ref": "AAAAAAGAPQhWsoWl3dc=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1738, + "top": 1251, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAPQhWsoWnkVI=" + }, + "edgePosition": 1 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAO1MYek/JnBg=" + }, + "tail": { + "$ref": "AAAAAAGAPQff+YT4B2c=" + }, + "lineStyle": 1, + "points": "1903:1405;1555:1133", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAPQhWsoWo0Ew=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAPQhWsoWpfhI=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAPQhWsoWqvn0=" + } + }, + { + "_type": "UMLClassView", + "_id": "AAAAAAGAPS3xYKL0b/4=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAPS3xX6LyqAQ=" + }, + "subViews": [ + { + "_type": "UMLNameCompartmentView", + "_id": "AAAAAAGAPS3xYKL1KHw=", + "_parent": { + "$ref": "AAAAAAGAPS3xYKL0b/4=" + }, + "model": { + "$ref": "AAAAAAGAPS3xX6LyqAQ=" + }, + "subViews": [ + { + "_type": "LabelView", + "_id": "AAAAAAGAPS3xYKL2ebU=", + "_parent": { + "$ref": "AAAAAAGAPS3xYKL1KHw=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 976, + "top": 1952, + "height": 13 + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAPS3xYKL35s8=", + "_parent": { + "$ref": "AAAAAAGAPS3xYKL1KHw=" + }, + "font": "Arial;13;1", + "left": 1933, + "top": 1679, + "width": 80.57080078125, + "height": 13, + "text": "Font" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAPS3xYKL41mk=", + "_parent": { + "$ref": "AAAAAAGAPS3xYKL1KHw=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 976, + "top": 1952, + "width": 73.67724609375, + "height": 13, + "text": "(from Model)" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAPS3xYKL5gP4=", + "_parent": { + "$ref": "AAAAAAGAPS3xYKL1KHw=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 976, + "top": 1952, + "height": 13, + "horizontalAlignment": 1 + } + ], + "font": "Arial;13;0", + "left": 1928, + "top": 1672, + "width": 90.57080078125, + "height": 25, + "stereotypeLabel": { + "$ref": "AAAAAAGAPS3xYKL2ebU=" + }, + "nameLabel": { + "$ref": "AAAAAAGAPS3xYKL35s8=" + }, + "namespaceLabel": { + "$ref": "AAAAAAGAPS3xYKL41mk=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAPS3xYKL5gP4=" + } + }, + { + "_type": "UMLAttributeCompartmentView", + "_id": "AAAAAAGAPS3xYKL6R/Y=", + "_parent": { + "$ref": "AAAAAAGAPS3xYKL0b/4=" + }, + "model": { + "$ref": "AAAAAAGAPS3xX6LyqAQ=" + }, + "subViews": [ + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPS4SpKO7AQ4=", + "_parent": { + "$ref": "AAAAAAGAPS3xYKL6R/Y=" + }, + "model": { + "$ref": "AAAAAAGAPS4SfqOsEp4=" + }, + "font": "Arial;13;0", + "left": 1933, + "top": 1702, + "width": 80.57080078125, + "height": 13, + "text": "+decoration", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPS4ZkqQheL8=", + "_parent": { + "$ref": "AAAAAAGAPS3xYKL6R/Y=" + }, + "model": { + "$ref": "AAAAAAGAPS4ZY6QSK9k=" + }, + "font": "Arial;13;0", + "left": 1933, + "top": 1717, + "width": 80.57080078125, + "height": 13, + "text": "+family", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPS4cCaRjfvc=", + "_parent": { + "$ref": "AAAAAAGAPS3xYKL6R/Y=" + }, + "model": { + "$ref": "AAAAAAGAPS4b4KRUp0w=" + }, + "font": "Arial;13;0", + "left": 1933, + "top": 1732, + "width": 80.57080078125, + "height": 13, + "text": "+size", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPS4eT6SlCv0=", + "_parent": { + "$ref": "AAAAAAGAPS3xYKL6R/Y=" + }, + "model": { + "$ref": "AAAAAAGAPS4eKqSWMIQ=" + }, + "font": "Arial;13;0", + "left": 1933, + "top": 1747, + "width": 80.57080078125, + "height": 13, + "text": "+style", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPS4gZ6TnLcg=", + "_parent": { + "$ref": "AAAAAAGAPS3xYKL6R/Y=" + }, + "model": { + "$ref": "AAAAAAGAPS4gOqTYZto=" + }, + "font": "Arial;13;0", + "left": 1933, + "top": 1762, + "width": 80.57080078125, + "height": 13, + "text": "+weight", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 1928, + "top": 1697, + "width": 90.57080078125, + "height": 83 + }, + { + "_type": "UMLOperationCompartmentView", + "_id": "AAAAAAGAPS3xYKL7b/k=", + "_parent": { + "$ref": "AAAAAAGAPS3xYKL0b/4=" + }, + "model": { + "$ref": "AAAAAAGAPS3xX6LyqAQ=" + }, + "subViews": [ + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAPS8byazlViU=", + "_parent": { + "$ref": "AAAAAAGAPS3xYKL7b/k=" + }, + "model": { + "$ref": "AAAAAAGAPS8boazWojk=" + }, + "font": "Arial;13;0", + "left": 1933, + "top": 1785, + "width": 80.57080078125, + "height": 13, + "text": "+clone()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAPS8jN61jd0Y=", + "_parent": { + "$ref": "AAAAAAGAPS3xYKL7b/k=" + }, + "model": { + "$ref": "AAAAAAGAPS8jDq1UJEA=" + }, + "font": "Arial;13;0", + "left": 1933, + "top": 1800, + "width": 80.57080078125, + "height": 13, + "text": "+fromJSON()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAPS8lh620UOM=", + "_parent": { + "$ref": "AAAAAAGAPS3xYKL7b/k=" + }, + "model": { + "$ref": "AAAAAAGAPS8lYK2li7A=" + }, + "font": "Arial;13;0", + "left": 1933, + "top": 1815, + "width": 80.57080078125, + "height": 13, + "text": "+toJSON()", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 1928, + "top": 1780, + "width": 90.57080078125, + "height": 53 + }, + { + "_type": "UMLReceptionCompartmentView", + "_id": "AAAAAAGAPS3xYKL8wkA=", + "_parent": { + "$ref": "AAAAAAGAPS3xYKL0b/4=" + }, + "model": { + "$ref": "AAAAAAGAPS3xX6LyqAQ=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 488, + "top": 976, + "width": 10, + "height": 10 + }, + { + "_type": "UMLTemplateParameterCompartmentView", + "_id": "AAAAAAGAPS3xYKL9dXs=", + "_parent": { + "$ref": "AAAAAAGAPS3xYKL0b/4=" + }, + "model": { + "$ref": "AAAAAAGAPS3xX6LyqAQ=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 488, + "top": 976, + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "containerChangeable": true, + "left": 1928, + "top": 1672, + "width": 90.57080078125, + "height": 161, + "nameCompartment": { + "$ref": "AAAAAAGAPS3xYKL1KHw=" + }, + "attributeCompartment": { + "$ref": "AAAAAAGAPS3xYKL6R/Y=" + }, + "operationCompartment": { + "$ref": "AAAAAAGAPS3xYKL7b/k=" + }, + "receptionCompartment": { + "$ref": "AAAAAAGAPS3xYKL8wkA=" + }, + "templateParameterCompartment": { + "$ref": "AAAAAAGAPS3xYKL9dXs=" + } + }, + { + "_type": "UMLAssociationView", + "_id": "AAAAAAGAPS6KpabfujQ=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAPS6KpKbbg5c=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPS6KpabgWK0=", + "_parent": { + "$ref": "AAAAAAGAPS6KpabfujQ=" + }, + "model": { + "$ref": "AAAAAAGAPS6KpKbbg5c=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1985, + "top": 1646, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAPS6KpabfujQ=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPS6KpabhLRk=", + "_parent": { + "$ref": "AAAAAAGAPS6KpabfujQ=" + }, + "model": { + "$ref": "AAAAAAGAPS6KpKbbg5c=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 2000, + "top": 1646, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAPS6KpabfujQ=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPS6KpabiqxA=", + "_parent": { + "$ref": "AAAAAAGAPS6KpabfujQ=" + }, + "model": { + "$ref": "AAAAAAGAPS6KpKbbg5c=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1956, + "top": 1647, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAPS6KpabfujQ=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPS6KpabjOP8=", + "_parent": { + "$ref": "AAAAAAGAPS6KpabfujQ=" + }, + "model": { + "$ref": "AAAAAAGAPS6KpKbc4jk=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1986, + "top": 1655, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAPS6KpabfujQ=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPS6KpabkrpE=", + "_parent": { + "$ref": "AAAAAAGAPS6KpabfujQ=" + }, + "model": { + "$ref": "AAAAAAGAPS6KpKbc4jk=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1999, + "top": 1658, + "height": 13, + "alpha": 0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAPS6KpabfujQ=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPS6KpabltA0=", + "_parent": { + "$ref": "AAAAAAGAPS6KpabfujQ=" + }, + "model": { + "$ref": "AAAAAAGAPS6KpKbc4jk=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1958, + "top": 1651, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAPS6KpabfujQ=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPS6Kpabmkkw=", + "_parent": { + "$ref": "AAAAAAGAPS6KpabfujQ=" + }, + "model": { + "$ref": "AAAAAAGAPS6KpKbd/TA=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1986, + "top": 1639, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAPS6KpabfujQ=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPS6KpabnrMk=", + "_parent": { + "$ref": "AAAAAAGAPS6KpabfujQ=" + }, + "model": { + "$ref": "AAAAAAGAPS6KpKbd/TA=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1999, + "top": 1636, + "height": 13, + "alpha": -0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAPS6KpabfujQ=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPS6Kpabo7ro=", + "_parent": { + "$ref": "AAAAAAGAPS6KpabfujQ=" + }, + "model": { + "$ref": "AAAAAAGAPS6KpKbd/TA=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1958, + "top": 1643, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAPS6KpabfujQ=" + } + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAPS6KpabpliQ=", + "_parent": { + "$ref": "AAAAAAGAPS6KpabfujQ=" + }, + "model": { + "$ref": "AAAAAAGAPS6KpKbc4jk=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 576, + "top": 1024, + "width": 10, + "height": 10 + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAPS6KpabqOVc=", + "_parent": { + "$ref": "AAAAAAGAPS6KpabfujQ=" + }, + "model": { + "$ref": "AAAAAAGAPS6KpKbd/TA=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 576, + "top": 1024, + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAPS3xYKL0b/4=" + }, + "tail": { + "$ref": "AAAAAAGAPQff+YT4B2c=" + }, + "lineStyle": 1, + "points": "1971:1636;1971:1671", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAPS6KpabgWK0=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAPS6KpabhLRk=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAPS6KpabiqxA=" + }, + "tailRoleNameLabel": { + "$ref": "AAAAAAGAPS6KpabjOP8=" + }, + "tailPropertyLabel": { + "$ref": "AAAAAAGAPS6KpabkrpE=" + }, + "tailMultiplicityLabel": { + "$ref": "AAAAAAGAPS6KpabltA0=" + }, + "headRoleNameLabel": { + "$ref": "AAAAAAGAPS6Kpabmkkw=" + }, + "headPropertyLabel": { + "$ref": "AAAAAAGAPS6KpabnrMk=" + }, + "headMultiplicityLabel": { + "$ref": "AAAAAAGAPS6Kpabo7ro=" + }, + "tailQualifiersCompartment": { + "$ref": "AAAAAAGAPS6KpabpliQ=" + }, + "headQualifiersCompartment": { + "$ref": "AAAAAAGAPS6KpabqOVc=" + } + }, + { + "_type": "UMLClassView", + "_id": "AAAAAAGAP6S17MjIqpw=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAP6S168jGsxA=" + }, + "subViews": [ + { + "_type": "UMLNameCompartmentView", + "_id": "AAAAAAGAP6S17MjJsCI=", + "_parent": { + "$ref": "AAAAAAGAP6S17MjIqpw=" + }, + "model": { + "$ref": "AAAAAAGAP6S168jGsxA=" + }, + "subViews": [ + { + "_type": "LabelView", + "_id": "AAAAAAGAP6S17MjK9LY=", + "_parent": { + "$ref": "AAAAAAGAP6S17MjJsCI=" + }, + "visible": false, + "font": "Arial;13;0", + "left": -592, + "top": 336, + "height": 13 + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAP6S17MjL4mU=", + "_parent": { + "$ref": "AAAAAAGAP6S17MjJsCI=" + }, + "font": "Arial;13;1", + "left": 2093, + "top": 1055, + "width": 187.4970703125, + "height": 13, + "text": "Symbol3D" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAP6S17MjMWnM=", + "_parent": { + "$ref": "AAAAAAGAP6S17MjJsCI=" + }, + "visible": false, + "font": "Arial;13;0", + "left": -592, + "top": 336, + "width": 73.67724609375, + "height": 13, + "text": "(from Model)" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAP6S17MjN+/8=", + "_parent": { + "$ref": "AAAAAAGAP6S17MjJsCI=" + }, + "visible": false, + "font": "Arial;13;0", + "left": -592, + "top": 336, + "height": 13, + "horizontalAlignment": 1 + } + ], + "font": "Arial;13;0", + "left": 2088, + "top": 1048, + "width": 197.4970703125, + "height": 25, + "stereotypeLabel": { + "$ref": "AAAAAAGAP6S17MjK9LY=" + }, + "nameLabel": { + "$ref": "AAAAAAGAP6S17MjL4mU=" + }, + "namespaceLabel": { + "$ref": "AAAAAAGAP6S17MjMWnM=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAP6S17MjN+/8=" + } + }, + { + "_type": "UMLAttributeCompartmentView", + "_id": "AAAAAAGAP6S17MjOyVk=", + "_parent": { + "$ref": "AAAAAAGAP6S17MjIqpw=" + }, + "model": { + "$ref": "AAAAAAGAP6S168jGsxA=" + }, + "subViews": [ + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAP6byBMxNWNw=", + "_parent": { + "$ref": "AAAAAAGAP6S17MjOyVk=" + }, + "model": { + "$ref": "AAAAAAGAP6bx38w7uLM=" + }, + "font": "Arial;13;0", + "left": 2093, + "top": 1078, + "width": 187.4970703125, + "height": 13, + "text": "+type", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAP6bpZMt+sLY=", + "_parent": { + "$ref": "AAAAAAGAP6S17MjOyVk=" + }, + "model": { + "$ref": "AAAAAAGAP6bpOstslHY=" + }, + "font": "Arial;13;0", + "left": 2093, + "top": 1093, + "width": 187.4970703125, + "height": 13, + "text": "+styleOrigin", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAP6bvwcv8vqE=", + "_parent": { + "$ref": "AAAAAAGAP6S17MjOyVk=" + }, + "model": { + "$ref": "AAAAAAGAP6bvnMvqZyg=" + }, + "font": "Arial;13;0", + "left": 2093, + "top": 1108, + "width": 187.4970703125, + "height": 13, + "text": "+symbolLayers: Symbol3DLayer", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 2088, + "top": 1073, + "width": 197.4970703125, + "height": 53 + }, + { + "_type": "UMLOperationCompartmentView", + "_id": "AAAAAAGAP6S17MjP11s=", + "_parent": { + "$ref": "AAAAAAGAP6S17MjIqpw=" + }, + "model": { + "$ref": "AAAAAAGAP6S168jGsxA=" + }, + "font": "Arial;13;0", + "left": 2088, + "top": 1126, + "width": 197.4970703125, + "height": 10 + }, + { + "_type": "UMLReceptionCompartmentView", + "_id": "AAAAAAGAP6S17MjQSC4=", + "_parent": { + "$ref": "AAAAAAGAP6S17MjIqpw=" + }, + "model": { + "$ref": "AAAAAAGAP6S168jGsxA=" + }, + "visible": false, + "font": "Arial;13;0", + "left": -296, + "top": 168, + "width": 10, + "height": 10 + }, + { + "_type": "UMLTemplateParameterCompartmentView", + "_id": "AAAAAAGAP6S17MjRxnU=", + "_parent": { + "$ref": "AAAAAAGAP6S17MjIqpw=" + }, + "model": { + "$ref": "AAAAAAGAP6S168jGsxA=" + }, + "visible": false, + "font": "Arial;13;0", + "left": -296, + "top": 168, + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "containerChangeable": true, + "left": 2088, + "top": 1048, + "width": 197.4970703125, + "height": 103, + "nameCompartment": { + "$ref": "AAAAAAGAP6S17MjJsCI=" + }, + "attributeCompartment": { + "$ref": "AAAAAAGAP6S17MjOyVk=" + }, + "operationCompartment": { + "$ref": "AAAAAAGAP6S17MjP11s=" + }, + "receptionCompartment": { + "$ref": "AAAAAAGAP6S17MjQSC4=" + }, + "templateParameterCompartment": { + "$ref": "AAAAAAGAP6S17MjRxnU=" + } + }, + { + "_type": "UMLGeneralizationView", + "_id": "AAAAAAGAP6VdPsogt5M=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAP6VdPsoeetU=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAP6VdPsohCjE=", + "_parent": { + "$ref": "AAAAAAGAP6VdPsogt5M=" + }, + "model": { + "$ref": "AAAAAAGAP6VdPsoeetU=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1820, + "top": 1106, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAP6VdPsogt5M=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAP6VdPsoiBVU=", + "_parent": { + "$ref": "AAAAAAGAP6VdPsogt5M=" + }, + "model": { + "$ref": "AAAAAAGAP6VdPsoeetU=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 1820, + "top": 1121, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAP6VdPsogt5M=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAP6VdPsojJm4=", + "_parent": { + "$ref": "AAAAAAGAP6VdPsogt5M=" + }, + "model": { + "$ref": "AAAAAAGAP6VdPsoeetU=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1821, + "top": 1077, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAP6VdPsogt5M=" + }, + "edgePosition": 1 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAO1MYek/JnBg=" + }, + "tail": { + "$ref": "AAAAAAGAP6S17MjIqpw=" + }, + "lineStyle": 1, + "points": "2087:1099;1555:1097", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAP6VdPsohCjE=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAP6VdPsoiBVU=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAP6VdPsojJm4=" + } + }, + { + "_type": "UMLClassView", + "_id": "AAAAAAGAP8/5/T2zufk=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAP8/5/D2x644=" + }, + "subViews": [ + { + "_type": "UMLNameCompartmentView", + "_id": "AAAAAAGAP8/5/T20DgQ=", + "_parent": { + "$ref": "AAAAAAGAP8/5/T2zufk=" + }, + "model": { + "$ref": "AAAAAAGAP8/5/D2x644=" + }, + "subViews": [ + { + "_type": "LabelView", + "_id": "AAAAAAGAP8/5/T21uxE=", + "_parent": { + "$ref": "AAAAAAGAP8/5/T20DgQ=" + }, + "visible": false, + "font": "Arial;13;0", + "left": -352, + "top": 1984, + "height": 13 + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAP8/5/T22bXc=", + "_parent": { + "$ref": "AAAAAAGAP8/5/T20DgQ=" + }, + "font": "Arial;13;1", + "left": 2133, + "top": 2055, + "width": 98.26171875, + "height": 13, + "text": "Symbol3DLayer" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAP8/5/T23zRY=", + "_parent": { + "$ref": "AAAAAAGAP8/5/T20DgQ=" + }, + "visible": false, + "font": "Arial;13;0", + "left": -352, + "top": 1984, + "width": 73.67724609375, + "height": 13, + "text": "(from Model)" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAP8/5/T24vDs=", + "_parent": { + "$ref": "AAAAAAGAP8/5/T20DgQ=" + }, + "visible": false, + "font": "Arial;13;0", + "left": -352, + "top": 1984, + "height": 13, + "horizontalAlignment": 1 + } + ], + "font": "Arial;13;0", + "left": 2128, + "top": 2048, + "width": 108.26171875, + "height": 25, + "stereotypeLabel": { + "$ref": "AAAAAAGAP8/5/T21uxE=" + }, + "nameLabel": { + "$ref": "AAAAAAGAP8/5/T22bXc=" + }, + "namespaceLabel": { + "$ref": "AAAAAAGAP8/5/T23zRY=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAP8/5/T24vDs=" + } + }, + { + "_type": "UMLAttributeCompartmentView", + "_id": "AAAAAAGAP8/5/T25IMk=", + "_parent": { + "$ref": "AAAAAAGAP8/5/T2zufk=" + }, + "model": { + "$ref": "AAAAAAGAP8/5/D2x644=" + }, + "subViews": [ + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAP9Vqf0BVvHk=", + "_parent": { + "$ref": "AAAAAAGAP8/5/T25IMk=" + }, + "model": { + "$ref": "AAAAAAGAP9VqWEBDC5M=" + }, + "font": "Arial;13;0", + "left": 2133, + "top": 2078, + "width": 98.26171875, + "height": 13, + "text": "+type", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 2128, + "top": 2073, + "width": 108.26171875, + "height": 23 + }, + { + "_type": "UMLOperationCompartmentView", + "_id": "AAAAAAGAP8/5/T26ZYI=", + "_parent": { + "$ref": "AAAAAAGAP8/5/T2zufk=" + }, + "model": { + "$ref": "AAAAAAGAP8/5/D2x644=" + }, + "subViews": [ + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAP9WNUUGXHo8=", + "_parent": { + "$ref": "AAAAAAGAP8/5/T26ZYI=" + }, + "model": { + "$ref": "AAAAAAGAP9WNLEGF+44=" + }, + "font": "Arial;13;0", + "left": 2133, + "top": 2101, + "width": 98.26171875, + "height": 13, + "text": "+fromJSON()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAP9WlTEMkprQ=", + "_parent": { + "$ref": "AAAAAAGAP8/5/T26ZYI=" + }, + "model": { + "$ref": "AAAAAAGAP9WlJEMSNXw=" + }, + "font": "Arial;13;0", + "left": 2133, + "top": 2116, + "width": 98.26171875, + "height": 13, + "text": "+toJSON()", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 2128, + "top": 2096, + "width": 108.26171875, + "height": 38 + }, + { + "_type": "UMLReceptionCompartmentView", + "_id": "AAAAAAGAP8/5/T27SB0=", + "_parent": { + "$ref": "AAAAAAGAP8/5/T2zufk=" + }, + "model": { + "$ref": "AAAAAAGAP8/5/D2x644=" + }, + "visible": false, + "font": "Arial;13;0", + "left": -208, + "top": 328, + "width": 10, + "height": 10 + }, + { + "_type": "UMLTemplateParameterCompartmentView", + "_id": "AAAAAAGAP8/5/T28FXA=", + "_parent": { + "$ref": "AAAAAAGAP8/5/T2zufk=" + }, + "model": { + "$ref": "AAAAAAGAP8/5/D2x644=" + }, + "visible": false, + "font": "Arial;13;0", + "left": -208, + "top": 328, + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "containerChangeable": true, + "left": 2128, + "top": 2048, + "width": 108.26171875, + "height": 86, + "nameCompartment": { + "$ref": "AAAAAAGAP8/5/T20DgQ=" + }, + "attributeCompartment": { + "$ref": "AAAAAAGAP8/5/T25IMk=" + }, + "operationCompartment": { + "$ref": "AAAAAAGAP8/5/T26ZYI=" + }, + "receptionCompartment": { + "$ref": "AAAAAAGAP8/5/T27SB0=" + }, + "templateParameterCompartment": { + "$ref": "AAAAAAGAP8/5/T28FXA=" + } + }, + { + "_type": "UMLAssociationView", + "_id": "AAAAAAGAP9XAwkPvc1M=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAP9XAwkPrzU4=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAP9XAwkPwXAY=", + "_parent": { + "$ref": "AAAAAAGAP9XAwkPvc1M=" + }, + "model": { + "$ref": "AAAAAAGAP9XAwkPrzU4=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2197, + "top": 1593, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAP9XAwkPvc1M=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAP9XAwkPxHKM=", + "_parent": { + "$ref": "AAAAAAGAP9XAwkPvc1M=" + }, + "model": { + "$ref": "AAAAAAGAP9XAwkPrzU4=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 2212, + "top": 1593, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAP9XAwkPvc1M=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAP9XAwkPyQeI=", + "_parent": { + "$ref": "AAAAAAGAP9XAwkPvc1M=" + }, + "model": { + "$ref": "AAAAAAGAP9XAwkPrzU4=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2168, + "top": 1592, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAP9XAwkPvc1M=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAP9XAwkPzAt0=", + "_parent": { + "$ref": "AAAAAAGAP9XAwkPvc1M=" + }, + "model": { + "$ref": "AAAAAAGAP9XAwkPs9B8=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2200, + "top": 1171, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAP9XAwkPvc1M=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAP9XAw0P0LwY=", + "_parent": { + "$ref": "AAAAAAGAP9XAwkPvc1M=" + }, + "model": { + "$ref": "AAAAAAGAP9XAwkPs9B8=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2214, + "top": 1173, + "height": 13, + "alpha": 0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAP9XAwkPvc1M=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAP9XAw0P1d9g=", + "_parent": { + "$ref": "AAAAAAGAP9XAwkPvc1M=" + }, + "model": { + "$ref": "AAAAAAGAP9XAwkPs9B8=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2173, + "top": 1166, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAP9XAwkPvc1M=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAP9XAw0P2EkY=", + "_parent": { + "$ref": "AAAAAAGAP9XAwkPvc1M=" + }, + "model": { + "$ref": "AAAAAAGAP9XAwkPtw8Y=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2196, + "top": 2015, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAP9XAwkPvc1M=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAP9XAw0P3VJo=", + "_parent": { + "$ref": "AAAAAAGAP9XAwkPvc1M=" + }, + "model": { + "$ref": "AAAAAAGAP9XAwkPtw8Y=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2209, + "top": 2012, + "height": 13, + "alpha": -0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAP9XAwkPvc1M=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAP9XAw0P4O+I=", + "_parent": { + "$ref": "AAAAAAGAP9XAwkPvc1M=" + }, + "model": { + "$ref": "AAAAAAGAP9XAwkPtw8Y=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2168, + "top": 2019, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAP9XAwkPvc1M=" + } + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAP9XAw0P5lng=", + "_parent": { + "$ref": "AAAAAAGAP9XAwkPvc1M=" + }, + "model": { + "$ref": "AAAAAAGAP9XAwkPs9B8=" + }, + "visible": false, + "font": "Arial;13;0", + "width": 10, + "height": 10 + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAP9XAw0P6/Tc=", + "_parent": { + "$ref": "AAAAAAGAP9XAwkPvc1M=" + }, + "model": { + "$ref": "AAAAAAGAP9XAwkPtw8Y=" + }, + "visible": false, + "font": "Arial;13;0", + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAP8/5/T2zufk=" + }, + "tail": { + "$ref": "AAAAAAGAP6S17MjIqpw=" + }, + "lineStyle": 1, + "points": "2186:1151;2181:2047", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAP9XAwkPwXAY=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAP9XAwkPxHKM=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAP9XAwkPyQeI=" + }, + "tailRoleNameLabel": { + "$ref": "AAAAAAGAP9XAwkPzAt0=" + }, + "tailPropertyLabel": { + "$ref": "AAAAAAGAP9XAw0P0LwY=" + }, + "tailMultiplicityLabel": { + "$ref": "AAAAAAGAP9XAw0P1d9g=" + }, + "headRoleNameLabel": { + "$ref": "AAAAAAGAP9XAw0P2EkY=" + }, + "headPropertyLabel": { + "$ref": "AAAAAAGAP9XAw0P3VJo=" + }, + "headMultiplicityLabel": { + "$ref": "AAAAAAGAP9XAw0P4O+I=" + }, + "tailQualifiersCompartment": { + "$ref": "AAAAAAGAP9XAw0P5lng=" + }, + "headQualifiersCompartment": { + "$ref": "AAAAAAGAP9XAw0P6/Tc=" + } + }, + { + "_type": "UMLClassView", + "_id": "AAAAAAGAQHO4GV0qRew=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAQHO4GV0oLfI=" + }, + "subViews": [ + { + "_type": "UMLNameCompartmentView", + "_id": "AAAAAAGAQHO4GV0r5pY=", + "_parent": { + "$ref": "AAAAAAGAQHO4GV0qRew=" + }, + "model": { + "$ref": "AAAAAAGAQHO4GV0oLfI=" + }, + "subViews": [ + { + "_type": "LabelView", + "_id": "AAAAAAGAQHO4Gl0su54=", + "_parent": { + "$ref": "AAAAAAGAQHO4GV0r5pY=" + }, + "visible": false, + "font": "Arial;13;0", + "top": 112, + "height": 13 + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAQHO4Gl0tCEM=", + "_parent": { + "$ref": "AAAAAAGAQHO4GV0r5pY=" + }, + "font": "Arial;13;1", + "left": 2301, + "top": 1303, + "width": 96.0654296875, + "height": 13, + "text": "PointSymbol3D" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAQHO4Gl0u6Pc=", + "_parent": { + "$ref": "AAAAAAGAQHO4GV0r5pY=" + }, + "visible": false, + "font": "Arial;13;0", + "top": 112, + "width": 73.67724609375, + "height": 13, + "text": "(from Model)" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAQHO4Gl0vKA4=", + "_parent": { + "$ref": "AAAAAAGAQHO4GV0r5pY=" + }, + "visible": false, + "font": "Arial;13;0", + "top": 112, + "height": 13, + "horizontalAlignment": 1 + } + ], + "font": "Arial;13;0", + "left": 2296, + "top": 1296, + "width": 106.0654296875, + "height": 25, + "stereotypeLabel": { + "$ref": "AAAAAAGAQHO4Gl0su54=" + }, + "nameLabel": { + "$ref": "AAAAAAGAQHO4Gl0tCEM=" + }, + "namespaceLabel": { + "$ref": "AAAAAAGAQHO4Gl0u6Pc=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAQHO4Gl0vKA4=" + } + }, + { + "_type": "UMLAttributeCompartmentView", + "_id": "AAAAAAGAQHO4Gl0wYjk=", + "_parent": { + "$ref": "AAAAAAGAQHO4GV0qRew=" + }, + "model": { + "$ref": "AAAAAAGAQHO4GV0oLfI=" + }, + "subViews": [ + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQHPbt14/Mhk=", + "_parent": { + "$ref": "AAAAAAGAQHO4Gl0wYjk=" + }, + "model": { + "$ref": "AAAAAAGAQHPbk14qDNA=" + }, + "font": "Arial;13;0", + "left": 2301, + "top": 1326, + "width": 96.0654296875, + "height": 13, + "text": "+type", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQHPo+V8v5gQ=", + "_parent": { + "$ref": "AAAAAAGAQHO4Gl0wYjk=" + }, + "model": { + "$ref": "AAAAAAGAQHPo018aeJo=" + }, + "font": "Arial;13;0", + "left": 2301, + "top": 1341, + "width": 96.0654296875, + "height": 13, + "text": "+callout", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQHPrE1+Pxyw=", + "_parent": { + "$ref": "AAAAAAGAQHO4Gl0wYjk=" + }, + "model": { + "$ref": "AAAAAAGAQHPq7F96x14=" + }, + "font": "Arial;13;0", + "left": 2301, + "top": 1356, + "width": 96.0654296875, + "height": 13, + "text": "+styleOrigin", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQHPtJl/vZKM=", + "_parent": { + "$ref": "AAAAAAGAQHO4Gl0wYjk=" + }, + "model": { + "$ref": "AAAAAAGAQHPtAV/aljM=" + }, + "font": "Arial;13;0", + "left": 2301, + "top": 1371, + "width": 96.0654296875, + "height": 13, + "text": "+symbolLayers", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQHPu7WBPLOE=", + "_parent": { + "$ref": "AAAAAAGAQHO4Gl0wYjk=" + }, + "model": { + "$ref": "AAAAAAGAQHPuxGA6UBk=" + }, + "font": "Arial;13;0", + "left": 2301, + "top": 1386, + "width": 96.0654296875, + "height": 13, + "text": "+verticalOffset", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 2296, + "top": 1321, + "width": 106.0654296875, + "height": 83 + }, + { + "_type": "UMLOperationCompartmentView", + "_id": "AAAAAAGAQHO4Gl0xIS8=", + "_parent": { + "$ref": "AAAAAAGAQHO4GV0qRew=" + }, + "model": { + "$ref": "AAAAAAGAQHO4GV0oLfI=" + }, + "subViews": [ + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAQHYPjWRlPzk=", + "_parent": { + "$ref": "AAAAAAGAQHO4Gl0xIS8=" + }, + "model": { + "$ref": "AAAAAAGAQHYPZmRQTEw=" + }, + "font": "Arial;13;0", + "left": 2301, + "top": 1409, + "width": 96.0654296875, + "height": 13, + "text": "+clone()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAQHYV+mT76q4=", + "_parent": { + "$ref": "AAAAAAGAQHO4Gl0xIS8=" + }, + "model": { + "$ref": "AAAAAAGAQHYVz2Tm/qo=" + }, + "font": "Arial;13;0", + "left": 2301, + "top": 1424, + "width": 96.0654296875, + "height": 13, + "text": "+fromJSON()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAQHYYXWVbi8o=", + "_parent": { + "$ref": "AAAAAAGAQHO4Gl0xIS8=" + }, + "model": { + "$ref": "AAAAAAGAQHYYN2VGn1k=" + }, + "font": "Arial;13;0", + "left": 2301, + "top": 1439, + "width": 96.0654296875, + "height": 13, + "text": "+toJSON()", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 2296, + "top": 1404, + "width": 106.0654296875, + "height": 53 + }, + { + "_type": "UMLReceptionCompartmentView", + "_id": "AAAAAAGAQHO4Gl0yzMo=", + "_parent": { + "$ref": "AAAAAAGAQHO4GV0qRew=" + }, + "model": { + "$ref": "AAAAAAGAQHO4GV0oLfI=" + }, + "visible": false, + "font": "Arial;13;0", + "top": 56, + "width": 10, + "height": 10 + }, + { + "_type": "UMLTemplateParameterCompartmentView", + "_id": "AAAAAAGAQHO4Gl0z6yU=", + "_parent": { + "$ref": "AAAAAAGAQHO4GV0qRew=" + }, + "model": { + "$ref": "AAAAAAGAQHO4GV0oLfI=" + }, + "visible": false, + "font": "Arial;13;0", + "top": 56, + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "containerChangeable": true, + "left": 2296, + "top": 1296, + "width": 106.0654296875, + "height": 161, + "nameCompartment": { + "$ref": "AAAAAAGAQHO4GV0r5pY=" + }, + "attributeCompartment": { + "$ref": "AAAAAAGAQHO4Gl0wYjk=" + }, + "operationCompartment": { + "$ref": "AAAAAAGAQHO4Gl0xIS8=" + }, + "receptionCompartment": { + "$ref": "AAAAAAGAQHO4Gl0yzMo=" + }, + "templateParameterCompartment": { + "$ref": "AAAAAAGAQHO4Gl0z6yU=" + } + }, + { + "_type": "UMLGeneralizationView", + "_id": "AAAAAAGAQHbWNI6go9U=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAQHbWNI6eATI=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQHbWNI6hWow=", + "_parent": { + "$ref": "AAAAAAGAQHbWNI6go9U=" + }, + "model": { + "$ref": "AAAAAAGAQHbWNI6eATI=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2245, + "top": 1224, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQHbWNI6go9U=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQHbWNI6i6Gc=", + "_parent": { + "$ref": "AAAAAAGAQHbWNI6go9U=" + }, + "model": { + "$ref": "AAAAAAGAQHbWNI6eATI=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 2232, + "top": 1232, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQHbWNI6go9U=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQHbWNI6j2Xk=", + "_parent": { + "$ref": "AAAAAAGAQHbWNI6go9U=" + }, + "model": { + "$ref": "AAAAAAGAQHbWNI6eATI=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2270, + "top": 1209, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQHbWNI6go9U=" + }, + "edgePosition": 1 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAP6S17MjIqpw=" + }, + "tail": { + "$ref": "AAAAAAGAQHO4GV0qRew=" + }, + "lineStyle": 1, + "points": "2301:1295;2216:1151", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAQHbWNI6hWow=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAQHbWNI6i6Gc=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAQHbWNI6j2Xk=" + } + }, + { + "_type": "UMLClassView", + "_id": "AAAAAAGAQHci648v8Jg=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAQHci6o8tBGM=" + }, + "subViews": [ + { + "_type": "UMLNameCompartmentView", + "_id": "AAAAAAGAQHci648wfDg=", + "_parent": { + "$ref": "AAAAAAGAQHci648v8Jg=" + }, + "model": { + "$ref": "AAAAAAGAQHci6o8tBGM=" + }, + "subViews": [ + { + "_type": "LabelView", + "_id": "AAAAAAGAQHci648xm3U=", + "_parent": { + "$ref": "AAAAAAGAQHci648wfDg=" + }, + "visible": false, + "font": "Arial;13;0", + "left": -576, + "top": 416, + "height": 13 + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAQHci648y398=", + "_parent": { + "$ref": "AAAAAAGAQHci648wfDg=" + }, + "font": "Arial;13;1", + "left": 2205, + "top": 1663, + "width": 124.9853515625, + "height": 13, + "text": "IconSymbol3DLayer" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAQHci648zUvA=", + "_parent": { + "$ref": "AAAAAAGAQHci648wfDg=" + }, + "visible": false, + "font": "Arial;13;0", + "left": -576, + "top": 416, + "width": 73.67724609375, + "height": 13, + "text": "(from Model)" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAQHci6480uGg=", + "_parent": { + "$ref": "AAAAAAGAQHci648wfDg=" + }, + "visible": false, + "font": "Arial;13;0", + "left": -576, + "top": 416, + "height": 13, + "horizontalAlignment": 1 + } + ], + "font": "Arial;13;0", + "left": 2200, + "top": 1656, + "width": 134.9853515625, + "height": 25, + "stereotypeLabel": { + "$ref": "AAAAAAGAQHci648xm3U=" + }, + "nameLabel": { + "$ref": "AAAAAAGAQHci648y398=" + }, + "namespaceLabel": { + "$ref": "AAAAAAGAQHci648zUvA=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAQHci6480uGg=" + } + }, + { + "_type": "UMLAttributeCompartmentView", + "_id": "AAAAAAGAQHci6481mLQ=", + "_parent": { + "$ref": "AAAAAAGAQHci648v8Jg=" + }, + "model": { + "$ref": "AAAAAAGAQHci6o8tBGM=" + }, + "subViews": [ + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQHiSDaEIOXU=", + "_parent": { + "$ref": "AAAAAAGAQHci6481mLQ=" + }, + "model": { + "$ref": "AAAAAAGAQHiR5aDzLYY=" + }, + "font": "Arial;13;0", + "left": 2205, + "top": 1686, + "width": 124.9853515625, + "height": 13, + "text": "+type", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQHiYZ6GekyE=", + "_parent": { + "$ref": "AAAAAAGAQHci6481mLQ=" + }, + "model": { + "$ref": "AAAAAAGAQHiYP6GJhto=" + }, + "font": "Arial;13;0", + "left": 2205, + "top": 1701, + "width": 124.9853515625, + "height": 13, + "text": "+anchor", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQHiaXaH+jCo=", + "_parent": { + "$ref": "AAAAAAGAQHci6481mLQ=" + }, + "model": { + "$ref": "AAAAAAGAQHiaNaHpMeE=" + }, + "font": "Arial;13;0", + "left": 2205, + "top": 1716, + "width": 124.9853515625, + "height": 13, + "text": "+anchorPosition", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQHicMqJeplA=", + "_parent": { + "$ref": "AAAAAAGAQHci6481mLQ=" + }, + "model": { + "$ref": "AAAAAAGAQHicC6JJ2ps=" + }, + "font": "Arial;13;0", + "left": 2205, + "top": 1731, + "width": 124.9853515625, + "height": 13, + "text": "+material", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQHidn6K+gmY=", + "_parent": { + "$ref": "AAAAAAGAQHci6481mLQ=" + }, + "model": { + "$ref": "AAAAAAGAQHidd6KpQY0=" + }, + "font": "Arial;13;0", + "left": 2205, + "top": 1746, + "width": 124.9853515625, + "height": 13, + "text": "+outline", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQHift6MepBw=", + "_parent": { + "$ref": "AAAAAAGAQHci6481mLQ=" + }, + "model": { + "$ref": "AAAAAAGAQHifkKMJgeQ=" + }, + "font": "Arial;13;0", + "left": 2205, + "top": 1761, + "width": 124.9853515625, + "height": 13, + "text": "+resource", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQHihY6N+OW8=", + "_parent": { + "$ref": "AAAAAAGAQHci6481mLQ=" + }, + "model": { + "$ref": "AAAAAAGAQHihOaNp1o4=" + }, + "font": "Arial;13;0", + "left": 2205, + "top": 1776, + "width": 124.9853515625, + "height": 13, + "text": "+size", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 2200, + "top": 1681, + "width": 134.9853515625, + "height": 113 + }, + { + "_type": "UMLOperationCompartmentView", + "_id": "AAAAAAGAQHci6482BLA=", + "_parent": { + "$ref": "AAAAAAGAQHci648v8Jg=" + }, + "model": { + "$ref": "AAAAAAGAQHci6o8tBGM=" + }, + "subViews": [ + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAQHlBOamqzMI=", + "_parent": { + "$ref": "AAAAAAGAQHci6482BLA=" + }, + "model": { + "$ref": "AAAAAAGAQHlBEamVlhM=" + }, + "font": "Arial;13;0", + "left": 2205, + "top": 1799, + "width": 124.9853515625, + "height": 13, + "text": "+clone()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAQHlHeapAByk=", + "_parent": { + "$ref": "AAAAAAGAQHci6482BLA=" + }, + "model": { + "$ref": "AAAAAAGAQHlHU6orzwA=" + }, + "font": "Arial;13;0", + "left": 2205, + "top": 1814, + "width": 124.9853515625, + "height": 13, + "text": "+fromJSON()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAQHlJkqqg+fk=", + "_parent": { + "$ref": "AAAAAAGAQHci6482BLA=" + }, + "model": { + "$ref": "AAAAAAGAQHlJbKqLtE0=" + }, + "font": "Arial;13;0", + "left": 2205, + "top": 1829, + "width": 124.9853515625, + "height": 13, + "text": "+toJSON()", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 2200, + "top": 1794, + "width": 134.9853515625, + "height": 53 + }, + { + "_type": "UMLReceptionCompartmentView", + "_id": "AAAAAAGAQHci6483qFU=", + "_parent": { + "$ref": "AAAAAAGAQHci648v8Jg=" + }, + "model": { + "$ref": "AAAAAAGAQHci6o8tBGM=" + }, + "visible": false, + "font": "Arial;13;0", + "left": -312, + "top": 336, + "width": 10, + "height": 10 + }, + { + "_type": "UMLTemplateParameterCompartmentView", + "_id": "AAAAAAGAQHci6484OCg=", + "_parent": { + "$ref": "AAAAAAGAQHci648v8Jg=" + }, + "model": { + "$ref": "AAAAAAGAQHci6o8tBGM=" + }, + "visible": false, + "font": "Arial;13;0", + "left": -312, + "top": 336, + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "containerChangeable": true, + "left": 2200, + "top": 1656, + "width": 134.9853515625, + "height": 191, + "nameCompartment": { + "$ref": "AAAAAAGAQHci648wfDg=" + }, + "attributeCompartment": { + "$ref": "AAAAAAGAQHci6481mLQ=" + }, + "operationCompartment": { + "$ref": "AAAAAAGAQHci6482BLA=" + }, + "receptionCompartment": { + "$ref": "AAAAAAGAQHci6483qFU=" + }, + "templateParameterCompartment": { + "$ref": "AAAAAAGAQHci6484OCg=" + } + }, + { + "_type": "UMLGeneralizationView", + "_id": "AAAAAAGAQHcyhZBoBpU=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAQHcyhZBm0hs=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQHcyhZBpnaU=", + "_parent": { + "$ref": "AAAAAAGAQHcyhZBoBpU=" + }, + "model": { + "$ref": "AAAAAAGAQHcyhZBm0hs=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2231, + "top": 1944, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQHcyhZBoBpU=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQHcyhZBqlPU=", + "_parent": { + "$ref": "AAAAAAGAQHcyhZBoBpU=" + }, + "model": { + "$ref": "AAAAAAGAQHcyhZBm0hs=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 2246, + "top": 1948, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQHcyhZBoBpU=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQHcyhZBrWm8=", + "_parent": { + "$ref": "AAAAAAGAQHcyhZBoBpU=" + }, + "model": { + "$ref": "AAAAAAGAQHcyhZBm0hs=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2202, + "top": 1937, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQHcyhZBoBpU=" + }, + "edgePosition": 1 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAP8/5/T2zufk=" + }, + "tail": { + "$ref": "AAAAAAGAQHci648v8Jg=" + }, + "lineStyle": 1, + "points": "2242:1847;2192:2047", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAQHcyhZBpnaU=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAQHcyhZBqlPU=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAQHcyhZBrWm8=" + } + }, + { + "_type": "UMLAssociationView", + "_id": "AAAAAAGAQHpof7ePZ3E=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAQHpofreL/lM=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQHpof7eQAD8=", + "_parent": { + "$ref": "AAAAAAGAQHpof7ePZ3E=" + }, + "model": { + "$ref": "AAAAAAGAQHpofreL/lM=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2345, + "top": 1549, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQHpof7ePZ3E=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQHpof7eRS9Q=", + "_parent": { + "$ref": "AAAAAAGAQHpof7ePZ3E=" + }, + "model": { + "$ref": "AAAAAAGAQHpofreL/lM=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 2360, + "top": 1549, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQHpof7ePZ3E=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQHpof7eSzzw=", + "_parent": { + "$ref": "AAAAAAGAQHpof7ePZ3E=" + }, + "model": { + "$ref": "AAAAAAGAQHpofreL/lM=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2315, + "top": 1550, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQHpof7ePZ3E=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQHpof7eTIUI=", + "_parent": { + "$ref": "AAAAAAGAQHpof7ePZ3E=" + }, + "model": { + "$ref": "AAAAAAGAQHpofreMF+Y=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2345, + "top": 1475, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQHpof7ePZ3E=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQHpof7eUIc0=", + "_parent": { + "$ref": "AAAAAAGAQHpof7ePZ3E=" + }, + "model": { + "$ref": "AAAAAAGAQHpofreMF+Y=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2358, + "top": 1478, + "height": 13, + "alpha": 0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAQHpof7ePZ3E=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQHpof7eVYJY=", + "_parent": { + "$ref": "AAAAAAGAQHpof7ePZ3E=" + }, + "model": { + "$ref": "AAAAAAGAQHpofreMF+Y=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2317, + "top": 1471, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAQHpof7ePZ3E=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQHpof7eWbVI=", + "_parent": { + "$ref": "AAAAAAGAQHpof7ePZ3E=" + }, + "model": { + "$ref": "AAAAAAGAQHpofreNRd8=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2345, + "top": 1624, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQHpof7ePZ3E=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQHpof7eXzL0=", + "_parent": { + "$ref": "AAAAAAGAQHpof7ePZ3E=" + }, + "model": { + "$ref": "AAAAAAGAQHpofreNRd8=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2358, + "top": 1621, + "height": 13, + "alpha": -0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAQHpof7ePZ3E=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQHpof7eYolo=", + "_parent": { + "$ref": "AAAAAAGAQHpof7ePZ3E=" + }, + "model": { + "$ref": "AAAAAAGAQHpofreNRd8=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2317, + "top": 1628, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAQHpof7ePZ3E=" + } + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAQHpof7eZQkE=", + "_parent": { + "$ref": "AAAAAAGAQHpof7ePZ3E=" + }, + "model": { + "$ref": "AAAAAAGAQHpofreMF+Y=" + }, + "visible": false, + "font": "Arial;13;0", + "width": 10, + "height": 10 + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAQHpof7eadhQ=", + "_parent": { + "$ref": "AAAAAAGAQHpof7ePZ3E=" + }, + "model": { + "$ref": "AAAAAAGAQHpofreNRd8=" + }, + "visible": false, + "font": "Arial;13;0", + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAQHci648v8Jg=" + }, + "tail": { + "$ref": "AAAAAAGAQHO4GV0qRew=" + }, + "points": "2330:1456;2330:1656", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAQHpof7eQAD8=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAQHpof7eRS9Q=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAQHpof7eSzzw=" + }, + "tailRoleNameLabel": { + "$ref": "AAAAAAGAQHpof7eTIUI=" + }, + "tailPropertyLabel": { + "$ref": "AAAAAAGAQHpof7eUIc0=" + }, + "tailMultiplicityLabel": { + "$ref": "AAAAAAGAQHpof7eVYJY=" + }, + "headRoleNameLabel": { + "$ref": "AAAAAAGAQHpof7eWbVI=" + }, + "headPropertyLabel": { + "$ref": "AAAAAAGAQHpof7eXzL0=" + }, + "headMultiplicityLabel": { + "$ref": "AAAAAAGAQHpof7eYolo=" + }, + "tailQualifiersCompartment": { + "$ref": "AAAAAAGAQHpof7eZQkE=" + }, + "headQualifiersCompartment": { + "$ref": "AAAAAAGAQHpof7eadhQ=" + } + }, + { + "_type": "UMLClassView", + "_id": "AAAAAAGAQI6jGOak5LQ=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAQI6jF+ainB0=" + }, + "subViews": [ + { + "_type": "UMLNameCompartmentView", + "_id": "AAAAAAGAQI6jGOalULs=", + "_parent": { + "$ref": "AAAAAAGAQI6jGOak5LQ=" + }, + "model": { + "$ref": "AAAAAAGAQI6jF+ainB0=" + }, + "subViews": [ + { + "_type": "LabelView", + "_id": "AAAAAAGAQI6jGOamfLc=", + "_parent": { + "$ref": "AAAAAAGAQI6jGOalULs=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 48, + "height": 13 + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAQI6jGOan4lw=", + "_parent": { + "$ref": "AAAAAAGAQI6jGOalULs=" + }, + "font": "Arial;13;1", + "left": 2557, + "top": 1311, + "width": 90.29541015625, + "height": 13, + "text": "LineSymbol3D" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAQI6jGOaon5I=", + "_parent": { + "$ref": "AAAAAAGAQI6jGOalULs=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 48, + "width": 73.67724609375, + "height": 13, + "text": "(from Model)" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAQI6jGOaphYg=", + "_parent": { + "$ref": "AAAAAAGAQI6jGOalULs=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 48, + "height": 13, + "horizontalAlignment": 1 + } + ], + "font": "Arial;13;0", + "left": 2552, + "top": 1304, + "width": 100.29541015625, + "height": 25, + "stereotypeLabel": { + "$ref": "AAAAAAGAQI6jGOamfLc=" + }, + "nameLabel": { + "$ref": "AAAAAAGAQI6jGOan4lw=" + }, + "namespaceLabel": { + "$ref": "AAAAAAGAQI6jGOaon5I=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAQI6jGOaphYg=" + } + }, + { + "_type": "UMLAttributeCompartmentView", + "_id": "AAAAAAGAQI6jGOaqStk=", + "_parent": { + "$ref": "AAAAAAGAQI6jGOak5LQ=" + }, + "model": { + "$ref": "AAAAAAGAQI6jF+ainB0=" + }, + "subViews": [ + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQI7RZehHBIg=", + "_parent": { + "$ref": "AAAAAAGAQI6jGOaqStk=" + }, + "model": { + "$ref": "AAAAAAGAQI7RO+gvDaw=" + }, + "font": "Arial;13;0", + "left": 2557, + "top": 1334, + "width": 90.29541015625, + "height": 13, + "text": "+type", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQI7YSuj1EEw=", + "_parent": { + "$ref": "AAAAAAGAQI6jGOaqStk=" + }, + "model": { + "$ref": "AAAAAAGAQI7YIujdTVQ=" + }, + "font": "Arial;13;0", + "left": 2557, + "top": 1349, + "width": 90.29541015625, + "height": 13, + "text": "+styleOrigin", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQI7fRenNc5E=", + "_parent": { + "$ref": "AAAAAAGAQI6jGOaqStk=" + }, + "model": { + "$ref": "AAAAAAGAQI7fHum1PPw=" + }, + "font": "Arial;13;0", + "left": 2557, + "top": 1364, + "width": 90.29541015625, + "height": 13, + "text": "+symbolLayers", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 2552, + "top": 1329, + "width": 100.29541015625, + "height": 53 + }, + { + "_type": "UMLOperationCompartmentView", + "_id": "AAAAAAGAQI6jGOarZ7Y=", + "_parent": { + "$ref": "AAAAAAGAQI6jGOak5LQ=" + }, + "model": { + "$ref": "AAAAAAGAQI6jF+ainB0=" + }, + "subViews": [ + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAQI83ZO7MOkU=", + "_parent": { + "$ref": "AAAAAAGAQI6jGOarZ7Y=" + }, + "model": { + "$ref": "AAAAAAGAQI83Pu60uKU=" + }, + "font": "Arial;13;0", + "left": 2557, + "top": 1387, + "width": 90.29541015625, + "height": 13, + "text": "+clone()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAQI89tO96OHs=", + "_parent": { + "$ref": "AAAAAAGAQI6jGOarZ7Y=" + }, + "model": { + "$ref": "AAAAAAGAQI89iO9irzg=" + }, + "font": "Arial;13;0", + "left": 2557, + "top": 1402, + "width": 90.29541015625, + "height": 13, + "text": "+fromJSON()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAQI8/5+/pUmk=", + "_parent": { + "$ref": "AAAAAAGAQI6jGOarZ7Y=" + }, + "model": { + "$ref": "AAAAAAGAQI8/v+/RXtM=" + }, + "font": "Arial;13;0", + "left": 2557, + "top": 1417, + "width": 90.29541015625, + "height": 13, + "text": "+toJSON()", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 2552, + "top": 1382, + "width": 100.29541015625, + "height": 53 + }, + { + "_type": "UMLReceptionCompartmentView", + "_id": "AAAAAAGAQI6jGOaspYk=", + "_parent": { + "$ref": "AAAAAAGAQI6jGOak5LQ=" + }, + "model": { + "$ref": "AAAAAAGAQI6jF+ainB0=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 24, + "width": 10, + "height": 10 + }, + { + "_type": "UMLTemplateParameterCompartmentView", + "_id": "AAAAAAGAQI6jGOatLLQ=", + "_parent": { + "$ref": "AAAAAAGAQI6jGOak5LQ=" + }, + "model": { + "$ref": "AAAAAAGAQI6jF+ainB0=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 24, + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "containerChangeable": true, + "left": 2552, + "top": 1304, + "width": 100.29541015625, + "height": 131, + "nameCompartment": { + "$ref": "AAAAAAGAQI6jGOalULs=" + }, + "attributeCompartment": { + "$ref": "AAAAAAGAQI6jGOaqStk=" + }, + "operationCompartment": { + "$ref": "AAAAAAGAQI6jGOarZ7Y=" + }, + "receptionCompartment": { + "$ref": "AAAAAAGAQI6jGOaspYk=" + }, + "templateParameterCompartment": { + "$ref": "AAAAAAGAQI6jGOatLLQ=" + } + }, + { + "_type": "UMLGeneralizationView", + "_id": "AAAAAAGAQJBZ8ACOlRk=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAQJBZ8ACM7PY=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQJBZ8ACPeVE=", + "_parent": { + "$ref": "AAAAAAGAQJBZ8ACOlRk=" + }, + "model": { + "$ref": "AAAAAAGAQJBZ8ACM7PY=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2399, + "top": 1249, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQJBZ8ACOlRk=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQJBZ8ACQETM=", + "_parent": { + "$ref": "AAAAAAGAQJBZ8ACOlRk=" + }, + "model": { + "$ref": "AAAAAAGAQJBZ8ACM7PY=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 2391, + "top": 1262, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQJBZ8ACOlRk=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQJBZ8ACRbEc=", + "_parent": { + "$ref": "AAAAAAGAQJBZ8ACOlRk=" + }, + "model": { + "$ref": "AAAAAAGAQJBZ8ACM7PY=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2416, + "top": 1224, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQJBZ8ACOlRk=" + }, + "edgePosition": 1 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAP6S17MjIqpw=" + }, + "tail": { + "$ref": "AAAAAAGAQI6jGOak5LQ=" + }, + "lineStyle": 1, + "points": "2551:1336;2266:1151", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAQJBZ8ACPeVE=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAQJBZ8ACQETM=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAQJBZ8ACRbEc=" + } + }, + { + "_type": "UMLGeneralizationView", + "_id": "AAAAAAGAQJBpFAEyXK4=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAQJBpFAEwA94=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQJBpFAEzB1w=", + "_parent": { + "$ref": "AAAAAAGAQJBpFAEyXK4=" + }, + "model": { + "$ref": "AAAAAAGAQJBpFAEwA94=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2380, + "top": 1932, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQJBpFAEyXK4=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQJBpFAE0Dy4=", + "_parent": { + "$ref": "AAAAAAGAQJBpFAEyXK4=" + }, + "model": { + "$ref": "AAAAAAGAQJBpFAEwA94=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 2390, + "top": 1943, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQJBpFAEyXK4=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQJBpFAE1gVA=", + "_parent": { + "$ref": "AAAAAAGAQJBpFAEyXK4=" + }, + "model": { + "$ref": "AAAAAAGAQJBpFAEwA94=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2361, + "top": 1909, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQJBpFAEyXK4=" + }, + "edgePosition": 1 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAP8/5/T2zufk=" + }, + "tail": { + "$ref": "AAAAAAGAQI6qsOc2n1Y=" + }, + "lineStyle": 1, + "points": "2511:1808;2231:2047", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAQJBpFAEzB1w=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAQJBpFAE0Dy4=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAQJBpFAE1gVA=" + } + }, + { + "_type": "UMLAssociationView", + "_id": "AAAAAAGAQJB91wHYp2s=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAQJB91wHUuZ8=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQJB91wHZ4Fw=", + "_parent": { + "$ref": "AAAAAAGAQJB91wHYp2s=" + }, + "model": { + "$ref": "AAAAAAGAQJB91wHUuZ8=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2604, + "top": 1539, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQJB91wHYp2s=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQJB91wHaANg=", + "_parent": { + "$ref": "AAAAAAGAQJB91wHYp2s=" + }, + "model": { + "$ref": "AAAAAAGAQJB91wHUuZ8=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 2619, + "top": 1540, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQJB91wHYp2s=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQJB91wHbV8A=", + "_parent": { + "$ref": "AAAAAAGAQJB91wHYp2s=" + }, + "model": { + "$ref": "AAAAAAGAQJB91wHUuZ8=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2575, + "top": 1538, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQJB91wHYp2s=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQJB91wHcJGw=", + "_parent": { + "$ref": "AAAAAAGAQJB91wHYp2s=" + }, + "model": { + "$ref": "AAAAAAGAQJB91wHV5+E=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2610, + "top": 1455, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQJB91wHYp2s=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQJB91wHdzyA=", + "_parent": { + "$ref": "AAAAAAGAQJB91wHYp2s=" + }, + "model": { + "$ref": "AAAAAAGAQJB91wHV5+E=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2623, + "top": 1458, + "height": 13, + "alpha": 0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAQJB91wHYp2s=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQJB91wHev5k=", + "_parent": { + "$ref": "AAAAAAGAQJB91wHYp2s=" + }, + "model": { + "$ref": "AAAAAAGAQJB91wHV5+E=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2583, + "top": 1449, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAQJB91wHYp2s=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQJB91wHf4ho=", + "_parent": { + "$ref": "AAAAAAGAQJB91wHYp2s=" + }, + "model": { + "$ref": "AAAAAAGAQJB91wHWZ0U=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2600, + "top": 1623, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQJB91wHYp2s=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQJB91wHgUDE=", + "_parent": { + "$ref": "AAAAAAGAQJB91wHYp2s=" + }, + "model": { + "$ref": "AAAAAAGAQJB91wHWZ0U=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2613, + "top": 1622, + "height": 13, + "alpha": -0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAQJB91wHYp2s=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQJB91wHhRqY=", + "_parent": { + "$ref": "AAAAAAGAQJB91wHYp2s=" + }, + "model": { + "$ref": "AAAAAAGAQJB91wHWZ0U=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2572, + "top": 1626, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAQJB91wHYp2s=" + } + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAQJB91wHidSU=", + "_parent": { + "$ref": "AAAAAAGAQJB91wHYp2s=" + }, + "model": { + "$ref": "AAAAAAGAQJB91wHV5+E=" + }, + "visible": false, + "font": "Arial;13;0", + "width": 10, + "height": 10 + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAQJB91wHj0Is=", + "_parent": { + "$ref": "AAAAAAGAQJB91wHYp2s=" + }, + "model": { + "$ref": "AAAAAAGAQJB91wHWZ0U=" + }, + "visible": false, + "font": "Arial;13;0", + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAQI6qsOc2n1Y=" + }, + "tail": { + "$ref": "AAAAAAGAQI6jGOak5LQ=" + }, + "lineStyle": 1, + "points": "2597:1435;2584:1655", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAQJB91wHZ4Fw=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAQJB91wHaANg=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAQJB91wHbV8A=" + }, + "tailRoleNameLabel": { + "$ref": "AAAAAAGAQJB91wHcJGw=" + }, + "tailPropertyLabel": { + "$ref": "AAAAAAGAQJB91wHdzyA=" + }, + "tailMultiplicityLabel": { + "$ref": "AAAAAAGAQJB91wHev5k=" + }, + "headRoleNameLabel": { + "$ref": "AAAAAAGAQJB91wHf4ho=" + }, + "headPropertyLabel": { + "$ref": "AAAAAAGAQJB91wHgUDE=" + }, + "headMultiplicityLabel": { + "$ref": "AAAAAAGAQJB91wHhRqY=" + }, + "tailQualifiersCompartment": { + "$ref": "AAAAAAGAQJB91wHidSU=" + }, + "headQualifiersCompartment": { + "$ref": "AAAAAAGAQJB91wHj0Is=" + } + }, + { + "_type": "UMLClassView", + "_id": "AAAAAAGAQJPNQDjq3dQ=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "subViews": [ + { + "_type": "UMLNameCompartmentView", + "_id": "AAAAAAGAQJPNQDjrEHc=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjq3dQ=" + }, + "model": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "subViews": [ + { + "_type": "LabelView", + "_id": "AAAAAAGAQJPNQDjsZh8=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjrEHc=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 256, + "top": -16, + "height": 13 + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAQJPNQDjtVq4=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjrEHc=" + }, + "font": "Arial;13;1", + "left": 2797, + "top": 1295, + "width": 114.84814453125, + "height": 13, + "text": "PolygonSymbol3D" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAQJPNQDju7ps=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjrEHc=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 256, + "top": -16, + "width": 73.67724609375, + "height": 13, + "text": "(from Model)" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAQJPNQDjv96U=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjrEHc=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 256, + "top": -16, + "height": 13, + "horizontalAlignment": 1 + } + ], + "font": "Arial;13;0", + "left": 2792, + "top": 1288, + "width": 124.84814453125, + "height": 25, + "stereotypeLabel": { + "$ref": "AAAAAAGAQJPNQDjsZh8=" + }, + "nameLabel": { + "$ref": "AAAAAAGAQJPNQDjtVq4=" + }, + "namespaceLabel": { + "$ref": "AAAAAAGAQJPNQDju7ps=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAQJPNQDjv96U=" + } + }, + { + "_type": "UMLAttributeCompartmentView", + "_id": "AAAAAAGAQJPNQDjwCpo=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjq3dQ=" + }, + "model": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "subViews": [ + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQJPv2zpN3O0=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjwCpo=" + }, + "model": { + "$ref": "AAAAAAGAQJPvrzoyMNs=" + }, + "font": "Arial;13;0", + "left": 2797, + "top": 1318, + "width": 114.84814453125, + "height": 13, + "text": "+type", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQJP6zjtbIHg=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjwCpo=" + }, + "model": { + "$ref": "AAAAAAGAQJP6pjtAYNM=" + }, + "font": "Arial;13;0", + "left": 2797, + "top": 1333, + "width": 114.84814453125, + "height": 13, + "text": "+styleOrigin", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQJP9JTvZiSI=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjwCpo=" + }, + "model": { + "$ref": "AAAAAAGAQJP8/ju+xJc=" + }, + "font": "Arial;13;0", + "left": 2797, + "top": 1348, + "width": 114.84814453125, + "height": 13, + "text": "+symbolLayers", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 2792, + "top": 1313, + "width": 124.84814453125, + "height": 53 + }, + { + "_type": "UMLOperationCompartmentView", + "_id": "AAAAAAGAQJPNQDjxeds=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjq3dQ=" + }, + "model": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "subViews": [ + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAQJQJdjzP6kM=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjxeds=" + }, + "model": { + "$ref": "AAAAAAGAQJQJTTy0Pz0=" + }, + "font": "Arial;13;0", + "left": 2797, + "top": 1371, + "width": 114.84814453125, + "height": 13, + "text": "+clone()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAQJQQIz2Vo/k=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjxeds=" + }, + "model": { + "$ref": "AAAAAAGAQJQP+D16Vf8=" + }, + "font": "Arial;13;0", + "left": 2797, + "top": 1386, + "width": 114.84814453125, + "height": 13, + "text": "+fromJSON()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAQJQShD4TuAw=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjxeds=" + }, + "model": { + "$ref": "AAAAAAGAQJQSWz34cwY=" + }, + "font": "Arial;13;0", + "left": 2797, + "top": 1401, + "width": 114.84814453125, + "height": 13, + "text": "+toJSON()", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 2792, + "top": 1366, + "width": 124.84814453125, + "height": 53 + }, + { + "_type": "UMLReceptionCompartmentView", + "_id": "AAAAAAGAQJPNQDjybwU=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjq3dQ=" + }, + "model": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 128, + "top": -8, + "width": 10, + "height": 10 + }, + { + "_type": "UMLTemplateParameterCompartmentView", + "_id": "AAAAAAGAQJPNQDjzOsI=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjq3dQ=" + }, + "model": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 128, + "top": -8, + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "containerChangeable": true, + "left": 2792, + "top": 1288, + "width": 124.84814453125, + "height": 131, + "nameCompartment": { + "$ref": "AAAAAAGAQJPNQDjrEHc=" + }, + "attributeCompartment": { + "$ref": "AAAAAAGAQJPNQDjwCpo=" + }, + "operationCompartment": { + "$ref": "AAAAAAGAQJPNQDjxeds=" + }, + "receptionCompartment": { + "$ref": "AAAAAAGAQJPNQDjybwU=" + }, + "templateParameterCompartment": { + "$ref": "AAAAAAGAQJPNQDjzOsI=" + } + }, + { + "_type": "UMLGeneralizationView", + "_id": "AAAAAAGAQJR3UkvOHJo=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAQJR3UUvMi3E=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQJR3UkvPfd4=", + "_parent": { + "$ref": "AAAAAAGAQJR3UkvOHJo=" + }, + "model": { + "$ref": "AAAAAAGAQJR3UUvMi3E=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2831, + "top": 1159, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQJR3UkvOHJo=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQJR3UkvQei4=", + "_parent": { + "$ref": "AAAAAAGAQJR3UkvOHJo=" + }, + "model": { + "$ref": "AAAAAAGAQJR3UUvMi3E=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 2831, + "top": 1174, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQJR3UkvOHJo=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQJR3UkvRy1w=", + "_parent": { + "$ref": "AAAAAAGAQJR3UkvOHJo=" + }, + "model": { + "$ref": "AAAAAAGAQJR3UUvMi3E=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2832, + "top": 1129, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQJR3UkvOHJo=" + }, + "edgePosition": 1 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAP6S17MjIqpw=" + }, + "tail": { + "$ref": "AAAAAAGAQJPNQDjq3dQ=" + }, + "points": "2832:1288;2832:1150;2284:1150", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAQJR3UkvPfd4=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAQJR3UkvQei4=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAQJR3UkvRy1w=" + } + }, + { + "_type": "UMLGeneralizationView", + "_id": "AAAAAAGAQKMeBnOU3pU=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAQKMeBnOSzgA=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQKMeBnOVxvY=", + "_parent": { + "$ref": "AAAAAAGAQKMeBnOU3pU=" + }, + "model": { + "$ref": "AAAAAAGAQKMeBnOSzgA=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2894, + "top": 2072, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQKMeBnOU3pU=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQKMeBnOWsmM=", + "_parent": { + "$ref": "AAAAAAGAQKMeBnOU3pU=" + }, + "model": { + "$ref": "AAAAAAGAQKMeBnOSzgA=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 2894, + "top": 2087, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQKMeBnOU3pU=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQKMeBnOXDsI=", + "_parent": { + "$ref": "AAAAAAGAQKMeBnOU3pU=" + }, + "model": { + "$ref": "AAAAAAGAQKMeBnOSzgA=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2895, + "top": 2042, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQKMeBnOU3pU=" + }, + "edgePosition": 1 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAP8/5/T2zufk=" + }, + "tail": { + "$ref": "AAAAAAGAQKIeqWLv2j0=" + }, + "points": "2895:1831;2895:2063;2235:2063", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAQKMeBnOVxvY=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAQKMeBnOWsmM=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAQKMeBnOXDsI=" + } + }, + { + "_type": "UMLAssociationView", + "_id": "AAAAAAGAQKMnaHQfR5Y=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAQKMnaHQbRW0=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQKMnaXQgNHo=", + "_parent": { + "$ref": "AAAAAAGAQKMnaHQfR5Y=" + }, + "model": { + "$ref": "AAAAAAGAQKMnaHQbRW0=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2875, + "top": 1530, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQKMnaHQfR5Y=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQKMnaXQhhl4=", + "_parent": { + "$ref": "AAAAAAGAQKMnaHQfR5Y=" + }, + "model": { + "$ref": "AAAAAAGAQKMnaHQbRW0=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 2890, + "top": 1530, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQKMnaHQfR5Y=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQKMnaXQi6TY=", + "_parent": { + "$ref": "AAAAAAGAQKMnaHQfR5Y=" + }, + "model": { + "$ref": "AAAAAAGAQKMnaHQbRW0=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2845, + "top": 1531, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQKMnaHQfR5Y=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQKMnaXQjj+M=", + "_parent": { + "$ref": "AAAAAAGAQKMnaHQfR5Y=" + }, + "model": { + "$ref": "AAAAAAGAQKMnaHQc7Rs=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2875, + "top": 1437, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQKMnaHQfR5Y=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQKMnaXQkBlA=", + "_parent": { + "$ref": "AAAAAAGAQKMnaHQfR5Y=" + }, + "model": { + "$ref": "AAAAAAGAQKMnaHQc7Rs=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2888, + "top": 1440, + "height": 13, + "alpha": 0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAQKMnaHQfR5Y=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQKMnaXQlgk0=", + "_parent": { + "$ref": "AAAAAAGAQKMnaHQfR5Y=" + }, + "model": { + "$ref": "AAAAAAGAQKMnaHQc7Rs=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2847, + "top": 1433, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAQKMnaHQfR5Y=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQKMnaXQmq5o=", + "_parent": { + "$ref": "AAAAAAGAQKMnaHQfR5Y=" + }, + "model": { + "$ref": "AAAAAAGAQKMnaHQdqUs=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2875, + "top": 1624, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQKMnaHQfR5Y=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQKMnaXQnK7k=", + "_parent": { + "$ref": "AAAAAAGAQKMnaHQfR5Y=" + }, + "model": { + "$ref": "AAAAAAGAQKMnaHQdqUs=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2888, + "top": 1621, + "height": 13, + "alpha": -0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAQKMnaHQfR5Y=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQKMnaXQonBQ=", + "_parent": { + "$ref": "AAAAAAGAQKMnaHQfR5Y=" + }, + "model": { + "$ref": "AAAAAAGAQKMnaHQdqUs=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2847, + "top": 1628, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAQKMnaHQfR5Y=" + } + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAQKMnaXQpT2Q=", + "_parent": { + "$ref": "AAAAAAGAQKMnaHQfR5Y=" + }, + "model": { + "$ref": "AAAAAAGAQKMnaHQc7Rs=" + }, + "visible": false, + "font": "Arial;13;0", + "width": 10, + "height": 10 + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAQKMnaXQqcZE=", + "_parent": { + "$ref": "AAAAAAGAQKMnaHQfR5Y=" + }, + "model": { + "$ref": "AAAAAAGAQKMnaHQdqUs=" + }, + "visible": false, + "font": "Arial;13;0", + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAQKIeqWLv2j0=" + }, + "tail": { + "$ref": "AAAAAAGAQJPNQDjq3dQ=" + }, + "points": "2860:1418;2860:1656", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAQKMnaXQgNHo=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAQKMnaXQhhl4=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAQKMnaXQi6TY=" + }, + "tailRoleNameLabel": { + "$ref": "AAAAAAGAQKMnaXQjj+M=" + }, + "tailPropertyLabel": { + "$ref": "AAAAAAGAQKMnaXQkBlA=" + }, + "tailMultiplicityLabel": { + "$ref": "AAAAAAGAQKMnaXQlgk0=" + }, + "headRoleNameLabel": { + "$ref": "AAAAAAGAQKMnaXQmq5o=" + }, + "headPropertyLabel": { + "$ref": "AAAAAAGAQKMnaXQnK7k=" + }, + "headMultiplicityLabel": { + "$ref": "AAAAAAGAQKMnaXQonBQ=" + }, + "tailQualifiersCompartment": { + "$ref": "AAAAAAGAQKMnaXQpT2Q=" + }, + "headQualifiersCompartment": { + "$ref": "AAAAAAGAQKMnaXQqcZE=" + } + }, + { + "_type": "UMLClassView", + "_id": "AAAAAAGAQLjRBoVMI9U=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAQLjRBoVK/Ro=" + }, + "subViews": [ + { + "_type": "UMLNameCompartmentView", + "_id": "AAAAAAGAQLjRBoVNFhk=", + "_parent": { + "$ref": "AAAAAAGAQLjRBoVMI9U=" + }, + "model": { + "$ref": "AAAAAAGAQLjRBoVK/Ro=" + }, + "subViews": [ + { + "_type": "LabelView", + "_id": "AAAAAAGAQLjRBoVO9Fw=", + "_parent": { + "$ref": "AAAAAAGAQLjRBoVNFhk=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 560, + "top": -16, + "height": 13 + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAQLjRBoVPLIA=", + "_parent": { + "$ref": "AAAAAAGAQLjRBoVNFhk=" + }, + "font": "Arial;13;1", + "left": 3141, + "top": 1303, + "width": 150.6689453125, + "height": 13, + "text": "LabelSymbol3D" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAQLjRBoVQcTM=", + "_parent": { + "$ref": "AAAAAAGAQLjRBoVNFhk=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 560, + "top": -16, + "width": 73.67724609375, + "height": 13, + "text": "(from Model)" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAQLjRBoVRh+I=", + "_parent": { + "$ref": "AAAAAAGAQLjRBoVNFhk=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 560, + "top": -16, + "height": 13, + "horizontalAlignment": 1 + } + ], + "font": "Arial;13;0", + "left": 3136, + "top": 1296, + "width": 160.6689453125, + "height": 25, + "stereotypeLabel": { + "$ref": "AAAAAAGAQLjRBoVO9Fw=" + }, + "nameLabel": { + "$ref": "AAAAAAGAQLjRBoVPLIA=" + }, + "namespaceLabel": { + "$ref": "AAAAAAGAQLjRBoVQcTM=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAQLjRBoVRh+I=" + } + }, + { + "_type": "UMLAttributeCompartmentView", + "_id": "AAAAAAGAQLjRBoVSSjQ=", + "_parent": { + "$ref": "AAAAAAGAQLjRBoVMI9U=" + }, + "model": { + "$ref": "AAAAAAGAQLjRBoVK/Ro=" + }, + "subViews": [ + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQLkJQIqgt9U=", + "_parent": { + "$ref": "AAAAAAGAQLjRBoVSSjQ=" + }, + "model": { + "$ref": "AAAAAAGAQLkJF4qC7uw=" + }, + "font": "Arial;13;0", + "left": 3141, + "top": 1326, + "width": 150.6689453125, + "height": 13, + "text": "+type", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQLkP1Yt+nAw=", + "_parent": { + "$ref": "AAAAAAGAQLjRBoVSSjQ=" + }, + "model": { + "$ref": "AAAAAAGAQLkPq4tgUdM=" + }, + "font": "Arial;13;0", + "left": 3141, + "top": 1341, + "width": 150.6689453125, + "height": 13, + "text": "+callout", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQLkR04wL9EQ=", + "_parent": { + "$ref": "AAAAAAGAQLjRBoVSSjQ=" + }, + "model": { + "$ref": "AAAAAAGAQLkRqYvtqAE=" + }, + "font": "Arial;13;0", + "left": 3141, + "top": 1356, + "width": 150.6689453125, + "height": 13, + "text": "+styleOrigin", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQLkUA4yYwFg=", + "_parent": { + "$ref": "AAAAAAGAQLjRBoVSSjQ=" + }, + "model": { + "$ref": "AAAAAAGAQLkT24x6g2s=" + }, + "font": "Arial;13;0", + "left": 3141, + "top": 1371, + "width": 150.6689453125, + "height": 13, + "text": "+symbolLayers", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQLkWgI0lYgg=", + "_parent": { + "$ref": "AAAAAAGAQLjRBoVSSjQ=" + }, + "model": { + "$ref": "AAAAAAGAQLkWVo0H4Q8=" + }, + "font": "Arial;13;0", + "left": 3141, + "top": 1386, + "width": 150.6689453125, + "height": 13, + "text": "+verticalOffset", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 3136, + "top": 1321, + "width": 160.6689453125, + "height": 83 + }, + { + "_type": "UMLOperationCompartmentView", + "_id": "AAAAAAGAQLjRBoVT+pk=", + "_parent": { + "$ref": "AAAAAAGAQLjRBoVMI9U=" + }, + "model": { + "$ref": "AAAAAAGAQLjRBoVK/Ro=" + }, + "subViews": [ + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAQLjfqIbWTPM=", + "_parent": { + "$ref": "AAAAAAGAQLjRBoVT+pk=" + }, + "model": { + "$ref": "AAAAAAGAQLjff4a4sxM=" + }, + "font": "Arial;13;0", + "left": 3141, + "top": 1409, + "width": 150.6689453125, + "height": 13, + "text": "+clone()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAQLjl84e03IQ=", + "_parent": { + "$ref": "AAAAAAGAQLjRBoVT+pk=" + }, + "model": { + "$ref": "AAAAAAGAQLjlyoeW4cw=" + }, + "font": "Arial;13;0", + "left": 3141, + "top": 1424, + "width": 150.6689453125, + "height": 13, + "text": "+fromJSON()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAQLjoMohBjUc=", + "_parent": { + "$ref": "AAAAAAGAQLjRBoVT+pk=" + }, + "model": { + "$ref": "AAAAAAGAQLjoBYgjCv8=" + }, + "font": "Arial;13;0", + "left": 3141, + "top": 1439, + "width": 150.6689453125, + "height": 13, + "text": "+toJSON()", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 3136, + "top": 1404, + "width": 160.6689453125, + "height": 53 + }, + { + "_type": "UMLReceptionCompartmentView", + "_id": "AAAAAAGAQLjRBoVUyQg=", + "_parent": { + "$ref": "AAAAAAGAQLjRBoVMI9U=" + }, + "model": { + "$ref": "AAAAAAGAQLjRBoVK/Ro=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 280, + "top": -8, + "width": 10, + "height": 10 + }, + { + "_type": "UMLTemplateParameterCompartmentView", + "_id": "AAAAAAGAQLjRB4VVp9k=", + "_parent": { + "$ref": "AAAAAAGAQLjRBoVMI9U=" + }, + "model": { + "$ref": "AAAAAAGAQLjRBoVK/Ro=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 3165, + "top": 1296, + "width": 130.6689453125, + "height": 10 + } + ], + "font": "Arial;13;0", + "containerChangeable": true, + "left": 3136, + "top": 1296, + "width": 160.6689453125, + "height": 161, + "nameCompartment": { + "$ref": "AAAAAAGAQLjRBoVNFhk=" + }, + "attributeCompartment": { + "$ref": "AAAAAAGAQLjRBoVSSjQ=" + }, + "operationCompartment": { + "$ref": "AAAAAAGAQLjRBoVT+pk=" + }, + "receptionCompartment": { + "$ref": "AAAAAAGAQLjRBoVUyQg=" + }, + "templateParameterCompartment": { + "$ref": "AAAAAAGAQLjRB4VVp9k=" + } + }, + { + "_type": "UMLGeneralizationView", + "_id": "AAAAAAGAQLnZqZjXg3U=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAQLnZqZjVkdk=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQLnZqZjYgFI=", + "_parent": { + "$ref": "AAAAAAGAQLnZqZjXg3U=" + }, + "model": { + "$ref": "AAAAAAGAQLnZqZjVkdk=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 3215, + "top": 1159, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQLnZqZjXg3U=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQLnZqZjZLo0=", + "_parent": { + "$ref": "AAAAAAGAQLnZqZjXg3U=" + }, + "model": { + "$ref": "AAAAAAGAQLnZqZjVkdk=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 3215, + "top": 1174, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQLnZqZjXg3U=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQLnZqZjaT2c=", + "_parent": { + "$ref": "AAAAAAGAQLnZqZjXg3U=" + }, + "model": { + "$ref": "AAAAAAGAQLnZqZjVkdk=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 3216, + "top": 1129, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQLnZqZjXg3U=" + }, + "edgePosition": 1 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAP6S17MjIqpw=" + }, + "tail": { + "$ref": "AAAAAAGAQLjRBoVMI9U=" + }, + "points": "3216:1296;3216:1150;2284:1150", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAQLnZqZjYgFI=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAQLnZqZjZLo0=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAQLnZqZjaT2c=" + } + }, + { + "_type": "UMLClassView", + "_id": "AAAAAAGAQLns6JmlVRk=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAQLns6Jmj0x4=" + }, + "subViews": [ + { + "_type": "UMLNameCompartmentView", + "_id": "AAAAAAGAQLns6ZmmuQ4=", + "_parent": { + "$ref": "AAAAAAGAQLns6JmlVRk=" + }, + "model": { + "$ref": "AAAAAAGAQLns6Jmj0x4=" + }, + "subViews": [ + { + "_type": "LabelView", + "_id": "AAAAAAGAQLns6ZmnQz0=", + "_parent": { + "$ref": "AAAAAAGAQLns6ZmmuQ4=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 624, + "top": 240, + "height": 13 + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAQLns6ZmoUbY=", + "_parent": { + "$ref": "AAAAAAGAQLns6ZmmuQ4=" + }, + "font": "Arial;13;1", + "left": 3165, + "top": 1655, + "width": 124.02685546875, + "height": 13, + "text": "TextSymbol3DLayer" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAQLns6Zmp+VU=", + "_parent": { + "$ref": "AAAAAAGAQLns6ZmmuQ4=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 624, + "top": 240, + "width": 73.67724609375, + "height": 13, + "text": "(from Model)" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAQLns6ZmqOIg=", + "_parent": { + "$ref": "AAAAAAGAQLns6ZmmuQ4=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 624, + "top": 240, + "height": 13, + "horizontalAlignment": 1 + } + ], + "font": "Arial;13;0", + "left": 3160, + "top": 1648, + "width": 134.02685546875, + "height": 25, + "stereotypeLabel": { + "$ref": "AAAAAAGAQLns6ZmnQz0=" + }, + "nameLabel": { + "$ref": "AAAAAAGAQLns6ZmoUbY=" + }, + "namespaceLabel": { + "$ref": "AAAAAAGAQLns6Zmp+VU=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAQLns6ZmqOIg=" + } + }, + { + "_type": "UMLAttributeCompartmentView", + "_id": "AAAAAAGAQLns6Zmrs/4=", + "_parent": { + "$ref": "AAAAAAGAQLns6JmlVRk=" + }, + "model": { + "$ref": "AAAAAAGAQLns6Jmj0x4=" + }, + "subViews": [ + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQLoWUpuBuNA=", + "_parent": { + "$ref": "AAAAAAGAQLns6Zmrs/4=" + }, + "model": { + "$ref": "AAAAAAGAQLoWJ5tje4c=" + }, + "font": "Arial;13;0", + "left": 3165, + "top": 1678, + "width": 124.02685546875, + "height": 13, + "text": "+type", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQLocfpxfnd8=", + "_parent": { + "$ref": "AAAAAAGAQLns6Zmrs/4=" + }, + "model": { + "$ref": "AAAAAAGAQLocVpxB5AM=" + }, + "font": "Arial;13;0", + "left": 3165, + "top": 1693, + "width": 124.02685546875, + "height": 13, + "text": "+background", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQLofKJzsoYc=", + "_parent": { + "$ref": "AAAAAAGAQLns6Zmrs/4=" + }, + "model": { + "$ref": "AAAAAAGAQLofAJzO1GA=" + }, + "font": "Arial;13;0", + "left": 3165, + "top": 1708, + "width": 124.02685546875, + "height": 13, + "text": "+font", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQLohDJ15dOM=", + "_parent": { + "$ref": "AAAAAAGAQLns6Zmrs/4=" + }, + "model": { + "$ref": "AAAAAAGAQLog4Z1bzo4=" + }, + "font": "Arial;13;0", + "left": 3165, + "top": 1723, + "width": 124.02685546875, + "height": 13, + "text": "+halo", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQLojPJ4GhSY=", + "_parent": { + "$ref": "AAAAAAGAQLns6Zmrs/4=" + }, + "model": { + "$ref": "AAAAAAGAQLojE53omX0=" + }, + "font": "Arial;13;0", + "left": 3165, + "top": 1738, + "width": 124.02685546875, + "height": 13, + "text": "+horizontalAlignment", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQLolfZ6T3fI=", + "_parent": { + "$ref": "AAAAAAGAQLns6Zmrs/4=" + }, + "model": { + "$ref": "AAAAAAGAQLolVZ51Tdg=" + }, + "font": "Arial;13;0", + "left": 3165, + "top": 1753, + "width": 124.02685546875, + "height": 13, + "text": "+lineHeight", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQLonc58goqg=", + "_parent": { + "$ref": "AAAAAAGAQLns6Zmrs/4=" + }, + "model": { + "$ref": "AAAAAAGAQLonSp8CGas=" + }, + "font": "Arial;13;0", + "left": 3165, + "top": 1768, + "width": 124.02685546875, + "height": 13, + "text": "+material", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQLopup+tBm8=", + "_parent": { + "$ref": "AAAAAAGAQLns6Zmrs/4=" + }, + "model": { + "$ref": "AAAAAAGAQLopjp+PrHs=" + }, + "font": "Arial;13;0", + "left": 3165, + "top": 1783, + "width": 124.02685546875, + "height": 13, + "text": "+size", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQLosE6A6wU8=", + "_parent": { + "$ref": "AAAAAAGAQLns6Zmrs/4=" + }, + "model": { + "$ref": "AAAAAAGAQLor6qAcWyY=" + }, + "font": "Arial;13;0", + "left": 3165, + "top": 1798, + "width": 124.02685546875, + "height": 13, + "text": "+text", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQLq7R6iEU80=", + "_parent": { + "$ref": "AAAAAAGAQLns6Zmrs/4=" + }, + "model": { + "$ref": "AAAAAAGAQLq7GahmsQQ=" + }, + "font": "Arial;13;0", + "left": 3165, + "top": 1813, + "width": 124.02685546875, + "height": 13, + "text": "+verticalAlignment", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 3160, + "top": 1673, + "width": 134.02685546875, + "height": 158 + }, + { + "_type": "UMLOperationCompartmentView", + "_id": "AAAAAAGAQLns6Zmsbbk=", + "_parent": { + "$ref": "AAAAAAGAQLns6JmlVRk=" + }, + "model": { + "$ref": "AAAAAAGAQLns6Jmj0x4=" + }, + "subViews": [ + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAQLrMgqpWe4I=", + "_parent": { + "$ref": "AAAAAAGAQLns6Zmsbbk=" + }, + "model": { + "$ref": "AAAAAAGAQLrMV6o4fWE=" + }, + "font": "Arial;13;0", + "left": 3165, + "top": 1836, + "width": 124.02685546875, + "height": 13, + "text": "+clone()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAQLrS4as0gpM=", + "_parent": { + "$ref": "AAAAAAGAQLns6Zmsbbk=" + }, + "model": { + "$ref": "AAAAAAGAQLrSt6sWGnA=" + }, + "font": "Arial;13;0", + "left": 3165, + "top": 1851, + "width": 124.02685546875, + "height": 13, + "text": "+fromJSON()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAQLrVDqvBW34=", + "_parent": { + "$ref": "AAAAAAGAQLns6Zmsbbk=" + }, + "model": { + "$ref": "AAAAAAGAQLrU4qujo+U=" + }, + "font": "Arial;13;0", + "left": 3165, + "top": 1866, + "width": 124.02685546875, + "height": 13, + "text": "+toJSON()", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 3160, + "top": 1831, + "width": 134.02685546875, + "height": 53 + }, + { + "_type": "UMLReceptionCompartmentView", + "_id": "AAAAAAGAQLns6Zmtu+E=", + "_parent": { + "$ref": "AAAAAAGAQLns6JmlVRk=" + }, + "model": { + "$ref": "AAAAAAGAQLns6Jmj0x4=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 312, + "top": 120, + "width": 10, + "height": 10 + }, + { + "_type": "UMLTemplateParameterCompartmentView", + "_id": "AAAAAAGAQLns6ZmulWE=", + "_parent": { + "$ref": "AAAAAAGAQLns6JmlVRk=" + }, + "model": { + "$ref": "AAAAAAGAQLns6Jmj0x4=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 312, + "top": 120, + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "containerChangeable": true, + "left": 3160, + "top": 1648, + "width": 134.02685546875, + "height": 236, + "nameCompartment": { + "$ref": "AAAAAAGAQLns6ZmmuQ4=" + }, + "attributeCompartment": { + "$ref": "AAAAAAGAQLns6Zmrs/4=" + }, + "operationCompartment": { + "$ref": "AAAAAAGAQLns6Zmsbbk=" + }, + "receptionCompartment": { + "$ref": "AAAAAAGAQLns6Zmtu+E=" + }, + "templateParameterCompartment": { + "$ref": "AAAAAAGAQLns6ZmulWE=" + } + }, + { + "_type": "UMLAssociationView", + "_id": "AAAAAAGAQLsG/7AEF2M=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAQLsG/7AAptg=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQLsG/7AFuFA=", + "_parent": { + "$ref": "AAAAAAGAQLsG/7AEF2M=" + }, + "model": { + "$ref": "AAAAAAGAQLsG/7AAptg=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 3234, + "top": 1545, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQLsG/7AEF2M=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQLsG/7AGddo=", + "_parent": { + "$ref": "AAAAAAGAQLsG/7AEF2M=" + }, + "model": { + "$ref": "AAAAAAGAQLsG/7AAptg=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 3249, + "top": 1545, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQLsG/7AEF2M=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQLsG/7AHS58=", + "_parent": { + "$ref": "AAAAAAGAQLsG/7AEF2M=" + }, + "model": { + "$ref": "AAAAAAGAQLsG/7AAptg=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 3205, + "top": 1546, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQLsG/7AEF2M=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQLsG/7AIFAY=", + "_parent": { + "$ref": "AAAAAAGAQLsG/7AEF2M=" + }, + "model": { + "$ref": "AAAAAAGAQLsG/7ABSMo=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 3232, + "top": 1476, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQLsG/7AEF2M=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQLsG/7AJvLI=", + "_parent": { + "$ref": "AAAAAAGAQLsG/7AEF2M=" + }, + "model": { + "$ref": "AAAAAAGAQLsG/7ABSMo=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 3246, + "top": 1478, + "height": 13, + "alpha": 0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAQLsG/7AEF2M=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQLsG/7AKKlA=", + "_parent": { + "$ref": "AAAAAAGAQLsG/7AEF2M=" + }, + "model": { + "$ref": "AAAAAAGAQLsG/7ABSMo=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 3205, + "top": 1473, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAQLsG/7AEF2M=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQLsG/7ALPOs=", + "_parent": { + "$ref": "AAAAAAGAQLsG/7AEF2M=" + }, + "model": { + "$ref": "AAAAAAGAQLsG/7ACCWw=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 3237, + "top": 1614, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQLsG/7AEF2M=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQLsG/7AMZ1k=", + "_parent": { + "$ref": "AAAAAAGAQLsG/7AEF2M=" + }, + "model": { + "$ref": "AAAAAAGAQLsG/7ACCWw=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 3250, + "top": 1611, + "height": 13, + "alpha": -0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAQLsG/7AEF2M=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQLsG/7ANfkw=", + "_parent": { + "$ref": "AAAAAAGAQLsG/7AEF2M=" + }, + "model": { + "$ref": "AAAAAAGAQLsG/7ACCWw=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 3209, + "top": 1619, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAQLsG/7AEF2M=" + } + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAQLsG/7AOwEs=", + "_parent": { + "$ref": "AAAAAAGAQLsG/7AEF2M=" + }, + "model": { + "$ref": "AAAAAAGAQLsG/7ABSMo=" + }, + "visible": false, + "font": "Arial;13;0", + "width": 10, + "height": 10 + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAQLsG/7APzkw=", + "_parent": { + "$ref": "AAAAAAGAQLsG/7AEF2M=" + }, + "model": { + "$ref": "AAAAAAGAQLsG/7ACCWw=" + }, + "visible": false, + "font": "Arial;13;0", + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAQLns6JmlVRk=" + }, + "tail": { + "$ref": "AAAAAAGAQLjRBoVMI9U=" + }, + "lineStyle": 1, + "points": "3217:1457;3223:1647", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAQLsG/7AFuFA=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAQLsG/7AGddo=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAQLsG/7AHS58=" + }, + "tailRoleNameLabel": { + "$ref": "AAAAAAGAQLsG/7AIFAY=" + }, + "tailPropertyLabel": { + "$ref": "AAAAAAGAQLsG/7AJvLI=" + }, + "tailMultiplicityLabel": { + "$ref": "AAAAAAGAQLsG/7AKKlA=" + }, + "headRoleNameLabel": { + "$ref": "AAAAAAGAQLsG/7ALPOs=" + }, + "headPropertyLabel": { + "$ref": "AAAAAAGAQLsG/7AMZ1k=" + }, + "headMultiplicityLabel": { + "$ref": "AAAAAAGAQLsG/7ANfkw=" + }, + "tailQualifiersCompartment": { + "$ref": "AAAAAAGAQLsG/7AOwEs=" + }, + "headQualifiersCompartment": { + "$ref": "AAAAAAGAQLsG/7APzkw=" + } + }, + { + "_type": "UMLGeneralizationView", + "_id": "AAAAAAGAQLsTnLEIRdg=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAQLsTnLEG5Uo=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQLsTnLEJqIk=", + "_parent": { + "$ref": "AAAAAAGAQLsTnLEIRdg=" + }, + "model": { + "$ref": "AAAAAAGAQLsTnLEG5Uo=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 3225, + "top": 2082, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQLsTnLEIRdg=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQLsTnLEKkkU=", + "_parent": { + "$ref": "AAAAAAGAQLsTnLEIRdg=" + }, + "model": { + "$ref": "AAAAAAGAQLsTnLEG5Uo=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 3225, + "top": 2097, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQLsTnLEIRdg=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQLsTnLELziw=", + "_parent": { + "$ref": "AAAAAAGAQLsTnLEIRdg=" + }, + "model": { + "$ref": "AAAAAAGAQLsTnLEG5Uo=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 3226, + "top": 2052, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQLsTnLEIRdg=" + }, + "edgePosition": 1 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAP8/5/T2zufk=" + }, + "tail": { + "$ref": "AAAAAAGAQLns6JmlVRk=" + }, + "points": "3226:1883;3226:2073;2235:2073", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAQLsTnLEJqIk=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAQLsTnLEKkkU=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAQLsTnLELziw=" + } + }, + { + "_type": "UMLClassView", + "_id": "AAAAAAGAQPnVf+rFgxs=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAQPnVfurDxP4=" + }, + "subViews": [ + { + "_type": "UMLNameCompartmentView", + "_id": "AAAAAAGAQPnVf+rG/uI=", + "_parent": { + "$ref": "AAAAAAGAQPnVf+rFgxs=" + }, + "model": { + "$ref": "AAAAAAGAQPnVfurDxP4=" + }, + "subViews": [ + { + "_type": "LabelView", + "_id": "AAAAAAGAQPnVf+rH+X4=", + "_parent": { + "$ref": "AAAAAAGAQPnVf+rG/uI=" + }, + "visible": false, + "font": "Arial;13;0", + "left": -208, + "top": 224, + "height": 13 + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAQPnVf+rIOQ8=", + "_parent": { + "$ref": "AAAAAAGAQPnVf+rG/uI=" + }, + "font": "Arial;13;1", + "left": 2349, + "top": 1663, + "width": 138.71533203125, + "height": 13, + "text": "ObjectSymbol3DLayer" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAQPnVf+rJBmE=", + "_parent": { + "$ref": "AAAAAAGAQPnVf+rG/uI=" + }, + "visible": false, + "font": "Arial;13;0", + "left": -208, + "top": 224, + "width": 73.67724609375, + "height": 13, + "text": "(from Model)" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAQPnVf+rKhyE=", + "_parent": { + "$ref": "AAAAAAGAQPnVf+rG/uI=" + }, + "visible": false, + "font": "Arial;13;0", + "left": -208, + "top": 224, + "height": 13, + "horizontalAlignment": 1 + } + ], + "font": "Arial;13;0", + "left": 2344, + "top": 1656, + "width": 148.71533203125, + "height": 25, + "stereotypeLabel": { + "$ref": "AAAAAAGAQPnVf+rH+X4=" + }, + "nameLabel": { + "$ref": "AAAAAAGAQPnVf+rIOQ8=" + }, + "namespaceLabel": { + "$ref": "AAAAAAGAQPnVf+rJBmE=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAQPnVf+rKhyE=" + } + }, + { + "_type": "UMLAttributeCompartmentView", + "_id": "AAAAAAGAQPnVf+rLrvw=", + "_parent": { + "$ref": "AAAAAAGAQPnVf+rFgxs=" + }, + "model": { + "$ref": "AAAAAAGAQPnVfurDxP4=" + }, + "subViews": [ + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQPoqJ+3fVWM=", + "_parent": { + "$ref": "AAAAAAGAQPnVf+rLrvw=" + }, + "model": { + "$ref": "AAAAAAGAQPop+u2+iXY=" + }, + "font": "Arial;13;0", + "left": 2349, + "top": 1686, + "width": 138.71533203125, + "height": 13, + "text": "+type", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQPozO+7VY3Y=", + "_parent": { + "$ref": "AAAAAAGAQPnVf+rLrvw=" + }, + "model": { + "$ref": "AAAAAAGAQPozEe604dA=" + }, + "font": "Arial;13;0", + "left": 2349, + "top": 1701, + "width": 138.71533203125, + "height": 13, + "text": "+anchor", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQPo2Qu9xHwE=", + "_parent": { + "$ref": "AAAAAAGAQPnVf+rLrvw=" + }, + "model": { + "$ref": "AAAAAAGAQPo2Gu9Q5Ck=" + }, + "font": "Arial;13;0", + "left": 2349, + "top": 1716, + "width": 138.71533203125, + "height": 13, + "text": "+anchorPosition", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQPo4sPANIaw=", + "_parent": { + "$ref": "AAAAAAGAQPnVf+rLrvw=" + }, + "model": { + "$ref": "AAAAAAGAQPo4he/sG20=" + }, + "font": "Arial;13;0", + "left": 2349, + "top": 1731, + "width": 138.71533203125, + "height": 13, + "text": "+castShadows", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQPo7GfCpnZQ=", + "_parent": { + "$ref": "AAAAAAGAQPnVf+rLrvw=" + }, + "model": { + "$ref": "AAAAAAGAQPo66/CIc7k=" + }, + "font": "Arial;13;0", + "left": 2349, + "top": 1746, + "width": 138.71533203125, + "height": 13, + "text": "+depth", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQPo9VvFFjYg=", + "_parent": { + "$ref": "AAAAAAGAQPnVf+rLrvw=" + }, + "model": { + "$ref": "AAAAAAGAQPo9LPEkQrk=" + }, + "font": "Arial;13;0", + "left": 2349, + "top": 1761, + "width": 138.71533203125, + "height": 13, + "text": "+heading", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQPo/evHhEZs=", + "_parent": { + "$ref": "AAAAAAGAQPnVf+rLrvw=" + }, + "model": { + "$ref": "AAAAAAGAQPo/TvHAQDk=" + }, + "font": "Arial;13;0", + "left": 2349, + "top": 1776, + "width": 138.71533203125, + "height": 13, + "text": "+height", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQPpB7fJ90ko=", + "_parent": { + "$ref": "AAAAAAGAQPnVf+rLrvw=" + }, + "model": { + "$ref": "AAAAAAGAQPpBxPJcIdQ=" + }, + "font": "Arial;13;0", + "left": 2349, + "top": 1791, + "width": 138.71533203125, + "height": 13, + "text": "+material", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQPpEo/MZpZ8=", + "_parent": { + "$ref": "AAAAAAGAQPnVf+rLrvw=" + }, + "model": { + "$ref": "AAAAAAGAQPpEefL4VGc=" + }, + "font": "Arial;13;0", + "left": 2349, + "top": 1806, + "width": 138.71533203125, + "height": 13, + "text": "+resource", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQPsGmfymRn8=", + "_parent": { + "$ref": "AAAAAAGAQPnVf+rLrvw=" + }, + "model": { + "$ref": "AAAAAAGAQPsGafyFSfs=" + }, + "font": "Arial;13;0", + "left": 2349, + "top": 1821, + "width": 138.71533203125, + "height": 13, + "text": "+roll", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQPsI9P1C/aQ=", + "_parent": { + "$ref": "AAAAAAGAQPnVf+rLrvw=" + }, + "model": { + "$ref": "AAAAAAGAQPsIyv0hvRE=" + }, + "font": "Arial;13;0", + "left": 2349, + "top": 1836, + "width": 138.71533203125, + "height": 13, + "text": "+tilt", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQPsLS/3eFgo=", + "_parent": { + "$ref": "AAAAAAGAQPnVf+rLrvw=" + }, + "model": { + "$ref": "AAAAAAGAQPsLH/2976o=" + }, + "font": "Arial;13;0", + "left": 2349, + "top": 1851, + "width": 138.71533203125, + "height": 13, + "text": "+width", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 2344, + "top": 1681, + "width": 148.71533203125, + "height": 188 + }, + { + "_type": "UMLOperationCompartmentView", + "_id": "AAAAAAGAQPnVf+rMRGw=", + "_parent": { + "$ref": "AAAAAAGAQPnVf+rFgxs=" + }, + "model": { + "$ref": "AAAAAAGAQPnVfurDxP4=" + }, + "font": "Arial;13;0", + "left": 2344, + "top": 1869, + "width": 148.71533203125, + "height": 10 + }, + { + "_type": "UMLReceptionCompartmentView", + "_id": "AAAAAAGAQPnVf+rNwuY=", + "_parent": { + "$ref": "AAAAAAGAQPnVf+rFgxs=" + }, + "model": { + "$ref": "AAAAAAGAQPnVfurDxP4=" + }, + "visible": false, + "font": "Arial;13;0", + "left": -104, + "top": 240, + "width": 10, + "height": 10 + }, + { + "_type": "UMLTemplateParameterCompartmentView", + "_id": "AAAAAAGAQPnVf+rOqqQ=", + "_parent": { + "$ref": "AAAAAAGAQPnVf+rFgxs=" + }, + "model": { + "$ref": "AAAAAAGAQPnVfurDxP4=" + }, + "visible": false, + "font": "Arial;13;0", + "left": -104, + "top": 240, + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "containerChangeable": true, + "left": 2344, + "top": 1656, + "width": 148.71533203125, + "height": 223, + "nameCompartment": { + "$ref": "AAAAAAGAQPnVf+rG/uI=" + }, + "attributeCompartment": { + "$ref": "AAAAAAGAQPnVf+rLrvw=" + }, + "operationCompartment": { + "$ref": "AAAAAAGAQPnVf+rMRGw=" + }, + "receptionCompartment": { + "$ref": "AAAAAAGAQPnVf+rNwuY=" + }, + "templateParameterCompartment": { + "$ref": "AAAAAAGAQPnVf+rOqqQ=" + } + }, + { + "_type": "UMLAssociationView", + "_id": "AAAAAAGAQPx5LwekjGk=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAQPx5Lwegxog=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQPx5LwelExo=", + "_parent": { + "$ref": "AAAAAAGAQPx5LwekjGk=" + }, + "model": { + "$ref": "AAAAAAGAQPx5Lwegxog=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2377, + "top": 1549, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQPx5LwekjGk=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQPx5LwemrGk=", + "_parent": { + "$ref": "AAAAAAGAQPx5LwekjGk=" + }, + "model": { + "$ref": "AAAAAAGAQPx5Lwegxog=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 2392, + "top": 1549, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQPx5LwekjGk=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQPx5LwenPhw=", + "_parent": { + "$ref": "AAAAAAGAQPx5LwekjGk=" + }, + "model": { + "$ref": "AAAAAAGAQPx5Lwegxog=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2347, + "top": 1550, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQPx5LwekjGk=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQPx5Lweorws=", + "_parent": { + "$ref": "AAAAAAGAQPx5LwekjGk=" + }, + "model": { + "$ref": "AAAAAAGAQPx5LwehMeE=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2377, + "top": 1475, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQPx5LwekjGk=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQPx5Lwep3bw=", + "_parent": { + "$ref": "AAAAAAGAQPx5LwekjGk=" + }, + "model": { + "$ref": "AAAAAAGAQPx5LwehMeE=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2390, + "top": 1478, + "height": 13, + "alpha": 0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAQPx5LwekjGk=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQPx5Lwequps=", + "_parent": { + "$ref": "AAAAAAGAQPx5LwekjGk=" + }, + "model": { + "$ref": "AAAAAAGAQPx5LwehMeE=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2349, + "top": 1471, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAQPx5LwekjGk=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQPx5Lwer26o=", + "_parent": { + "$ref": "AAAAAAGAQPx5LwekjGk=" + }, + "model": { + "$ref": "AAAAAAGAQPx5LweiweU=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2377, + "top": 1624, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQPx5LwekjGk=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQPx5Lwesa/g=", + "_parent": { + "$ref": "AAAAAAGAQPx5LwekjGk=" + }, + "model": { + "$ref": "AAAAAAGAQPx5LweiweU=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2390, + "top": 1621, + "height": 13, + "alpha": -0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAQPx5LwekjGk=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQPx5Lwet0DI=", + "_parent": { + "$ref": "AAAAAAGAQPx5LwekjGk=" + }, + "model": { + "$ref": "AAAAAAGAQPx5LweiweU=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2349, + "top": 1628, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAQPx5LwekjGk=" + } + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAQPx5MAeuGxQ=", + "_parent": { + "$ref": "AAAAAAGAQPx5LwekjGk=" + }, + "model": { + "$ref": "AAAAAAGAQPx5LwehMeE=" + }, + "visible": false, + "font": "Arial;13;0", + "width": 10, + "height": 10 + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAQPx5MAevwVI=", + "_parent": { + "$ref": "AAAAAAGAQPx5LwekjGk=" + }, + "model": { + "$ref": "AAAAAAGAQPx5LweiweU=" + }, + "visible": false, + "font": "Arial;13;0", + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAQPnVf+rFgxs=" + }, + "tail": { + "$ref": "AAAAAAGAQHO4GV0qRew=" + }, + "points": "2362:1456;2362:1656", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAQPx5LwelExo=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAQPx5LwemrGk=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAQPx5LwenPhw=" + }, + "tailRoleNameLabel": { + "$ref": "AAAAAAGAQPx5Lweorws=" + }, + "tailPropertyLabel": { + "$ref": "AAAAAAGAQPx5Lwep3bw=" + }, + "tailMultiplicityLabel": { + "$ref": "AAAAAAGAQPx5Lwequps=" + }, + "headRoleNameLabel": { + "$ref": "AAAAAAGAQPx5Lwer26o=" + }, + "headPropertyLabel": { + "$ref": "AAAAAAGAQPx5Lwesa/g=" + }, + "headMultiplicityLabel": { + "$ref": "AAAAAAGAQPx5Lwet0DI=" + }, + "tailQualifiersCompartment": { + "$ref": "AAAAAAGAQPx5MAeuGxQ=" + }, + "headQualifiersCompartment": { + "$ref": "AAAAAAGAQPx5MAevwVI=" + } + }, + { + "_type": "UMLAssociationView", + "_id": "AAAAAAGAQPyJKAjgoMc=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAQPyJKAjcvoE=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQPyJKAjheM8=", + "_parent": { + "$ref": "AAAAAAGAQPyJKAjgoMc=" + }, + "model": { + "$ref": "AAAAAAGAQPyJKAjcvoE=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2754, + "top": 1515, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQPyJKAjgoMc=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQPyJKAjifbw=", + "_parent": { + "$ref": "AAAAAAGAQPyJKAjgoMc=" + }, + "model": { + "$ref": "AAAAAAGAQPyJKAjcvoE=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 2754, + "top": 1500, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQPyJKAjgoMc=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQPyJKAjj/Y8=", + "_parent": { + "$ref": "AAAAAAGAQPyJKAjgoMc=" + }, + "model": { + "$ref": "AAAAAAGAQPyJKAjcvoE=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2754, + "top": 1545, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQPyJKAjgoMc=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQPyJKAjkbqg=", + "_parent": { + "$ref": "AAAAAAGAQPyJKAjgoMc=" + }, + "model": { + "$ref": "AAAAAAGAQPyJKAjdEa4=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2363, + "top": 1475, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQPyJKAjgoMc=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQPyJKAjl6r0=", + "_parent": { + "$ref": "AAAAAAGAQPyJKAjgoMc=" + }, + "model": { + "$ref": "AAAAAAGAQPyJKAjdEa4=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2376, + "top": 1478, + "height": 13, + "alpha": 0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAQPyJKAjgoMc=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQPyJKAjm/ws=", + "_parent": { + "$ref": "AAAAAAGAQPyJKAjgoMc=" + }, + "model": { + "$ref": "AAAAAAGAQPyJKAjdEa4=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2335, + "top": 1471, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAQPyJKAjgoMc=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQPyJKAjnFYU=", + "_parent": { + "$ref": "AAAAAAGAQPyJKAjgoMc=" + }, + "model": { + "$ref": "AAAAAAGAQPyJKAjecM4=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 3175, + "top": 1616, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQPyJKAjgoMc=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQPyJKAjogAo=", + "_parent": { + "$ref": "AAAAAAGAQPyJKAjgoMc=" + }, + "model": { + "$ref": "AAAAAAGAQPyJKAjecM4=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 3188, + "top": 1613, + "height": 13, + "alpha": -0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAQPyJKAjgoMc=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQPyJKAjpL0Q=", + "_parent": { + "$ref": "AAAAAAGAQPyJKAjgoMc=" + }, + "model": { + "$ref": "AAAAAAGAQPyJKAjecM4=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 3147, + "top": 1620, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAQPyJKAjgoMc=" + } + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAQPyJKAjq8as=", + "_parent": { + "$ref": "AAAAAAGAQPyJKAjgoMc=" + }, + "model": { + "$ref": "AAAAAAGAQPyJKAjdEa4=" + }, + "visible": false, + "font": "Arial;13;0", + "width": 10, + "height": 10 + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAQPyJKAjr9jk=", + "_parent": { + "$ref": "AAAAAAGAQPyJKAjgoMc=" + }, + "model": { + "$ref": "AAAAAAGAQPyJKAjecM4=" + }, + "visible": false, + "font": "Arial;13;0", + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAQLns6JmlVRk=" + }, + "tail": { + "$ref": "AAAAAAGAQHO4GV0qRew=" + }, + "lineStyle": 2, + "points": "2348:1456;2348:1536;3160:1536;3160:1648", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAQPyJKAjheM8=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAQPyJKAjifbw=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAQPyJKAjj/Y8=" + }, + "tailRoleNameLabel": { + "$ref": "AAAAAAGAQPyJKAjkbqg=" + }, + "tailPropertyLabel": { + "$ref": "AAAAAAGAQPyJKAjl6r0=" + }, + "tailMultiplicityLabel": { + "$ref": "AAAAAAGAQPyJKAjm/ws=" + }, + "headRoleNameLabel": { + "$ref": "AAAAAAGAQPyJKAjnFYU=" + }, + "headPropertyLabel": { + "$ref": "AAAAAAGAQPyJKAjogAo=" + }, + "headMultiplicityLabel": { + "$ref": "AAAAAAGAQPyJKAjpL0Q=" + }, + "tailQualifiersCompartment": { + "$ref": "AAAAAAGAQPyJKAjq8as=" + }, + "headQualifiersCompartment": { + "$ref": "AAAAAAGAQPyJKAjr9jk=" + } + }, + { + "_type": "UMLGeneralizationView", + "_id": "AAAAAAGAQP3Zl0BOeuY=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAQP3ZlkBMubY=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQP3Zl0BPyaY=", + "_parent": { + "$ref": "AAAAAAGAQP3Zl0BOeuY=" + }, + "model": { + "$ref": "AAAAAAGAQP3ZlkBMubY=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2289, + "top": 1959, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQP3Zl0BOeuY=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQP3Zl0BQzP8=", + "_parent": { + "$ref": "AAAAAAGAQP3Zl0BOeuY=" + }, + "model": { + "$ref": "AAAAAAGAQP3ZlkBMubY=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 2301, + "top": 1968, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQP3Zl0BOeuY=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQP3Zl0BRot4=", + "_parent": { + "$ref": "AAAAAAGAQP3Zl0BOeuY=" + }, + "model": { + "$ref": "AAAAAAGAQP3ZlkBMubY=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2264, + "top": 1942, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQP3Zl0BOeuY=" + }, + "edgePosition": 1 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAP8/5/T2zufk=" + }, + "tail": { + "$ref": "AAAAAAGAQPnVf+rFgxs=" + }, + "lineStyle": 1, + "points": "2343:1868;2212:2047", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAQP3Zl0BPyaY=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAQP3Zl0BQzP8=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAQP3Zl0BRot4=" + } + }, + { + "_type": "UMLClassView", + "_id": "AAAAAAGAQQuTLkcBevI=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAQQuTLUb/9Rg=" + }, + "subViews": [ + { + "_type": "UMLNameCompartmentView", + "_id": "AAAAAAGAQQuTLkcC9fI=", + "_parent": { + "$ref": "AAAAAAGAQQuTLkcBevI=" + }, + "model": { + "$ref": "AAAAAAGAQQuTLUb/9Rg=" + }, + "subViews": [ + { + "_type": "LabelView", + "_id": "AAAAAAGAQQuTLkcDgPU=", + "_parent": { + "$ref": "AAAAAAGAQQuTLkcC9fI=" + }, + "visible": false, + "font": "Arial;13;0", + "left": -80, + "top": -16, + "height": 13 + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAQQuTLkcEsG0=", + "_parent": { + "$ref": "AAAAAAGAQQuTLkcC9fI=" + }, + "font": "Arial;13;1", + "left": 2669, + "top": 1663, + "width": 126.4326171875, + "height": 13, + "text": "PathSymbol3DLayer" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAQQuTLkcF42M=", + "_parent": { + "$ref": "AAAAAAGAQQuTLkcC9fI=" + }, + "visible": false, + "font": "Arial;13;0", + "left": -80, + "top": -16, + "width": 73.67724609375, + "height": 13, + "text": "(from Model)" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAQQuTLkcGurk=", + "_parent": { + "$ref": "AAAAAAGAQQuTLkcC9fI=" + }, + "visible": false, + "font": "Arial;13;0", + "left": -80, + "top": -16, + "height": 13, + "horizontalAlignment": 1 + } + ], + "font": "Arial;13;0", + "left": 2664, + "top": 1656, + "width": 136.4326171875, + "height": 25, + "stereotypeLabel": { + "$ref": "AAAAAAGAQQuTLkcDgPU=" + }, + "nameLabel": { + "$ref": "AAAAAAGAQQuTLkcEsG0=" + }, + "namespaceLabel": { + "$ref": "AAAAAAGAQQuTLkcF42M=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAQQuTLkcGurk=" + } + }, + { + "_type": "UMLAttributeCompartmentView", + "_id": "AAAAAAGAQQuTLkcHnPo=", + "_parent": { + "$ref": "AAAAAAGAQQuTLkcBevI=" + }, + "model": { + "$ref": "AAAAAAGAQQuTLUb/9Rg=" + }, + "subViews": [ + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQQvIoU3KW5A=", + "_parent": { + "$ref": "AAAAAAGAQQuTLkcHnPo=" + }, + "model": { + "$ref": "AAAAAAGAQQvIck2jTQg=" + }, + "font": "Arial;13;0", + "left": 2669, + "top": 1686, + "width": 126.4326171875, + "height": 13, + "text": "+type", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQQvOwE7wXsc=", + "_parent": { + "$ref": "AAAAAAGAQQuTLkcHnPo=" + }, + "model": { + "$ref": "AAAAAAGAQQvOlU7J+Js=" + }, + "font": "Arial;13;0", + "left": 2669, + "top": 1701, + "width": 126.4326171875, + "height": 13, + "text": "+anchor", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQQvRhE+qEgM=", + "_parent": { + "$ref": "AAAAAAGAQQuTLkcHnPo=" + }, + "model": { + "$ref": "AAAAAAGAQQvRWk+D8Kk=" + }, + "font": "Arial;13;0", + "left": 2669, + "top": 1716, + "width": 126.4326171875, + "height": 13, + "text": "+cap", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQQvUL1Bk2Jw=", + "_parent": { + "$ref": "AAAAAAGAQQuTLkcHnPo=" + }, + "model": { + "$ref": "AAAAAAGAQQvUBFA9SC8=" + }, + "font": "Arial;13;0", + "left": 2669, + "top": 1731, + "width": 126.4326171875, + "height": 13, + "text": "+castShadows", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQQvWKlEe1YQ=", + "_parent": { + "$ref": "AAAAAAGAQQuTLkcHnPo=" + }, + "model": { + "$ref": "AAAAAAGAQQvWAFD3ufw=" + }, + "font": "Arial;13;0", + "left": 2669, + "top": 1746, + "width": 126.4326171875, + "height": 13, + "text": "+height", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQQvYzVHYs68=", + "_parent": { + "$ref": "AAAAAAGAQQuTLkcHnPo=" + }, + "model": { + "$ref": "AAAAAAGAQQvYoVGxGiQ=" + }, + "font": "Arial;13;0", + "left": 2669, + "top": 1761, + "width": 126.4326171875, + "height": 13, + "text": "+join", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQQva51KS5U8=", + "_parent": { + "$ref": "AAAAAAGAQQuTLkcHnPo=" + }, + "model": { + "$ref": "AAAAAAGAQQvaulJrSXY=" + }, + "font": "Arial;13;0", + "left": 2669, + "top": 1776, + "width": 126.4326171875, + "height": 13, + "text": "+material", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQQvdWlNM1OI=", + "_parent": { + "$ref": "AAAAAAGAQQuTLkcHnPo=" + }, + "model": { + "$ref": "AAAAAAGAQQvdLlMlZuI=" + }, + "font": "Arial;13;0", + "left": 2669, + "top": 1791, + "width": 126.4326171875, + "height": 13, + "text": "+profile", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQQyX/2QpKPI=", + "_parent": { + "$ref": "AAAAAAGAQQuTLkcHnPo=" + }, + "model": { + "$ref": "AAAAAAGAQQyXzmQCWwQ=" + }, + "font": "Arial;13;0", + "left": 2669, + "top": 1806, + "width": 126.4326171875, + "height": 13, + "text": "+profileRotation", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQQya+GTjnuA=", + "_parent": { + "$ref": "AAAAAAGAQQuTLkcHnPo=" + }, + "model": { + "$ref": "AAAAAAGAQQyayGS8q5c=" + }, + "font": "Arial;13;0", + "left": 2669, + "top": 1821, + "width": 126.4326171875, + "height": 13, + "text": "+width", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 2664, + "top": 1681, + "width": 136.4326171875, + "height": 158 + }, + { + "_type": "UMLOperationCompartmentView", + "_id": "AAAAAAGAQQuTLkcIZQI=", + "_parent": { + "$ref": "AAAAAAGAQQuTLkcBevI=" + }, + "model": { + "$ref": "AAAAAAGAQQuTLUb/9Rg=" + }, + "subViews": [ + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAQQvrFlTegUc=", + "_parent": { + "$ref": "AAAAAAGAQQuTLkcIZQI=" + }, + "model": { + "$ref": "AAAAAAGAQQvq6VS33RQ=" + }, + "font": "Arial;13;0", + "left": 2669, + "top": 1844, + "width": 126.4326171875, + "height": 13, + "text": "+clone()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAQQvyaFYESws=", + "_parent": { + "$ref": "AAAAAAGAQQuTLkcIZQI=" + }, + "model": { + "$ref": "AAAAAAGAQQvyP1Xdy/A=" + }, + "font": "Arial;13;0", + "left": 2669, + "top": 1859, + "width": 126.4326171875, + "height": 13, + "text": "+fromJSON()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAQQv1q1a+rRA=", + "_parent": { + "$ref": "AAAAAAGAQQuTLkcIZQI=" + }, + "model": { + "$ref": "AAAAAAGAQQv1gFaXIyU=" + }, + "font": "Arial;13;0", + "left": 2669, + "top": 1874, + "width": 126.4326171875, + "height": 13, + "text": "+toJSON()", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 2664, + "top": 1839, + "width": 136.4326171875, + "height": 53 + }, + { + "_type": "UMLReceptionCompartmentView", + "_id": "AAAAAAGAQQuTLkcJ1Lw=", + "_parent": { + "$ref": "AAAAAAGAQQuTLkcBevI=" + }, + "model": { + "$ref": "AAAAAAGAQQuTLUb/9Rg=" + }, + "visible": false, + "font": "Arial;13;0", + "left": -16, + "top": 120, + "width": 10, + "height": 10 + }, + { + "_type": "UMLTemplateParameterCompartmentView", + "_id": "AAAAAAGAQQuTLkcKQJM=", + "_parent": { + "$ref": "AAAAAAGAQQuTLkcBevI=" + }, + "model": { + "$ref": "AAAAAAGAQQuTLUb/9Rg=" + }, + "visible": false, + "font": "Arial;13;0", + "left": -16, + "top": 120, + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "containerChangeable": true, + "left": 2664, + "top": 1656, + "width": 136.4326171875, + "height": 236, + "nameCompartment": { + "$ref": "AAAAAAGAQQuTLkcC9fI=" + }, + "attributeCompartment": { + "$ref": "AAAAAAGAQQuTLkcHnPo=" + }, + "operationCompartment": { + "$ref": "AAAAAAGAQQuTLkcIZQI=" + }, + "receptionCompartment": { + "$ref": "AAAAAAGAQQuTLkcJ1Lw=" + }, + "templateParameterCompartment": { + "$ref": "AAAAAAGAQQuTLkcKQJM=" + } + }, + { + "_type": "UMLAssociationView", + "_id": "AAAAAAGAQQzoZmpqp3M=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAQQzoZWpmJZ0=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQQzoZmprD4I=", + "_parent": { + "$ref": "AAAAAAGAQQzoZmpqp3M=" + }, + "model": { + "$ref": "AAAAAAGAQQzoZWpmJZ0=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2671, + "top": 1534, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQQzoZmpqp3M=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQQzoZmpspdQ=", + "_parent": { + "$ref": "AAAAAAGAQQzoZmpqp3M=" + }, + "model": { + "$ref": "AAAAAAGAQQzoZWpmJZ0=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 2685, + "top": 1529, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQQzoZmpqp3M=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQQzoZmptR4s=", + "_parent": { + "$ref": "AAAAAAGAQQzoZmpqp3M=" + }, + "model": { + "$ref": "AAAAAAGAQQzoZWpmJZ0=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2642, + "top": 1543, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQQzoZmpqp3M=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQQzoZmpuXcM=", + "_parent": { + "$ref": "AAAAAAGAQQzoZmpqp3M=" + }, + "model": { + "$ref": "AAAAAAGAQQzoZWpnhlg=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2644, + "top": 1449, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQQzoZmpqp3M=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQQzoZmpv0rc=", + "_parent": { + "$ref": "AAAAAAGAQQzoZmpqp3M=" + }, + "model": { + "$ref": "AAAAAAGAQQzoZWpnhlg=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2657, + "top": 1447, + "height": 13, + "alpha": 0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAQQzoZmpqp3M=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQQzoZmpwlDI=", + "_parent": { + "$ref": "AAAAAAGAQQzoZmpqp3M=" + }, + "model": { + "$ref": "AAAAAAGAQQzoZWpnhlg=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2616, + "top": 1453, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAQQzoZmpqp3M=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQQzoZmpxJrc=", + "_parent": { + "$ref": "AAAAAAGAQQzoZmpqp3M=" + }, + "model": { + "$ref": "AAAAAAGAQQzoZWposbQ=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2699, + "top": 1619, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQQzoZmpqp3M=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQQzoZmpyIqM=", + "_parent": { + "$ref": "AAAAAAGAQQzoZmpqp3M=" + }, + "model": { + "$ref": "AAAAAAGAQQzoZWposbQ=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2711, + "top": 1613, + "height": 13, + "alpha": -0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAQQzoZmpqp3M=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQQzoZmpz2Hg=", + "_parent": { + "$ref": "AAAAAAGAQQzoZmpqp3M=" + }, + "model": { + "$ref": "AAAAAAGAQQzoZWposbQ=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2674, + "top": 1632, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAQQzoZmpqp3M=" + } + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAQQzoZmp0WHs=", + "_parent": { + "$ref": "AAAAAAGAQQzoZmpqp3M=" + }, + "model": { + "$ref": "AAAAAAGAQQzoZWpnhlg=" + }, + "visible": false, + "font": "Arial;13;0", + "width": 10, + "height": 10 + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAQQzoZmp1EFk=", + "_parent": { + "$ref": "AAAAAAGAQQzoZmpqp3M=" + }, + "model": { + "$ref": "AAAAAAGAQQzoZWposbQ=" + }, + "visible": false, + "font": "Arial;13;0", + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAQQuTLkcBevI=" + }, + "tail": { + "$ref": "AAAAAAGAQI6jGOak5LQ=" + }, + "lineStyle": 1, + "points": "2622:1435;2693:1655", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAQQzoZmprD4I=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAQQzoZmpspdQ=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAQQzoZmptR4s=" + }, + "tailRoleNameLabel": { + "$ref": "AAAAAAGAQQzoZmpuXcM=" + }, + "tailPropertyLabel": { + "$ref": "AAAAAAGAQQzoZmpv0rc=" + }, + "tailMultiplicityLabel": { + "$ref": "AAAAAAGAQQzoZmpwlDI=" + }, + "headRoleNameLabel": { + "$ref": "AAAAAAGAQQzoZmpxJrc=" + }, + "headPropertyLabel": { + "$ref": "AAAAAAGAQQzoZmpyIqM=" + }, + "headMultiplicityLabel": { + "$ref": "AAAAAAGAQQzoZmpz2Hg=" + }, + "tailQualifiersCompartment": { + "$ref": "AAAAAAGAQQzoZmp0WHs=" + }, + "headQualifiersCompartment": { + "$ref": "AAAAAAGAQQzoZmp1EFk=" + } + }, + { + "_type": "UMLGeneralizationView", + "_id": "AAAAAAGAQQz8yG323pI=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAQQz8x230K8E=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQQz8yG336r0=", + "_parent": { + "$ref": "AAAAAAGAQQz8yG323pI=" + }, + "model": { + "$ref": "AAAAAAGAQQz8x230K8E=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2730, + "top": 2067, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQQz8yG323pI=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQQz8yG34XJw=", + "_parent": { + "$ref": "AAAAAAGAQQz8yG323pI=" + }, + "model": { + "$ref": "AAAAAAGAQQz8x230K8E=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 2730, + "top": 2082, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQQz8yG323pI=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQQz8yG35oyg=", + "_parent": { + "$ref": "AAAAAAGAQQz8yG323pI=" + }, + "model": { + "$ref": "AAAAAAGAQQz8x230K8E=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2731, + "top": 2037, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQQz8yG323pI=" + }, + "edgePosition": 1 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAP8/5/T2zufk=" + }, + "tail": { + "$ref": "AAAAAAGAQQuTLkcBevI=" + }, + "points": "2731:1891;2731:2058;2235:2058", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAQQz8yG336r0=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAQQz8yG34XJw=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAQQz8yG35oyg=" + } + }, + { + "_type": "UMLClassView", + "_id": "AAAAAAGAQI6qsOc2n1Y=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAQI6qsOc0DIE=" + }, + "subViews": [ + { + "_type": "UMLNameCompartmentView", + "_id": "AAAAAAGAQI6qsOc3FW8=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc2n1Y=" + }, + "model": { + "$ref": "AAAAAAGAQI6qsOc0DIE=" + }, + "subViews": [ + { + "_type": "LabelView", + "_id": "AAAAAAGAQI6qsOc4SMo=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc3FW8=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 32, + "top": 272, + "height": 13 + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAQI6qsOc5HLY=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc3FW8=" + }, + "font": "Arial;13;1", + "left": 2517, + "top": 1663, + "width": 124.9853515625, + "height": 13, + "text": "LineSymbol3DLayer" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAQI6qsOc6mDQ=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc3FW8=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 32, + "top": 272, + "width": 73.67724609375, + "height": 13, + "text": "(from Model)" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAQI6qsOc7Vpo=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc3FW8=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 32, + "top": 272, + "height": 13, + "horizontalAlignment": 1 + } + ], + "font": "Arial;13;0", + "left": 2512, + "top": 1656, + "width": 134.9853515625, + "height": 25, + "stereotypeLabel": { + "$ref": "AAAAAAGAQI6qsOc4SMo=" + }, + "nameLabel": { + "$ref": "AAAAAAGAQI6qsOc5HLY=" + }, + "namespaceLabel": { + "$ref": "AAAAAAGAQI6qsOc6mDQ=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAQI6qsOc7Vpo=" + } + }, + { + "_type": "UMLAttributeCompartmentView", + "_id": "AAAAAAGAQI6qsOc83nc=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc2n1Y=" + }, + "model": { + "$ref": "AAAAAAGAQI6qsOc0DIE=" + }, + "subViews": [ + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQI/M2vf+oXE=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc83nc=" + }, + "model": { + "$ref": "AAAAAAGAQI/Ms/fm62A=" + }, + "font": "Arial;13;0", + "left": 2517, + "top": 1686, + "width": 124.9853515625, + "height": 13, + "text": "+type", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQI/S7fisuuE=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc83nc=" + }, + "model": { + "$ref": "AAAAAAGAQI/SxfiUCXU=" + }, + "font": "Arial;13;0", + "left": 2517, + "top": 1701, + "width": 124.9853515625, + "height": 13, + "text": "+cap", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQI/VHvkb5w4=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc83nc=" + }, + "model": { + "$ref": "AAAAAAGAQI/U9/kDTG0=" + }, + "font": "Arial;13;0", + "left": 2517, + "top": 1716, + "width": 124.9853515625, + "height": 13, + "text": "+join", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQI/XEfmKdbM=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc83nc=" + }, + "model": { + "$ref": "AAAAAAGAQI/W6PlyuF4=" + }, + "font": "Arial;13;0", + "left": 2517, + "top": 1731, + "width": 124.9853515625, + "height": 13, + "text": "+marker", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQI/yCvs2lr0=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc83nc=" + }, + "model": { + "$ref": "AAAAAAGAQI/x4vseoP0=" + }, + "font": "Arial;13;0", + "left": 2517, + "top": 1746, + "width": 124.9853515625, + "height": 13, + "text": "+material", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQI/0WfulqSU=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc83nc=" + }, + "model": { + "$ref": "AAAAAAGAQI/0MvuNWWU=" + }, + "font": "Arial;13;0", + "left": 2517, + "top": 1761, + "width": 124.9853515625, + "height": 13, + "text": "+pattern", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQI/2O/wUaY0=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc83nc=" + }, + "model": { + "$ref": "AAAAAAGAQI/2Efv8elc=" + }, + "font": "Arial;13;0", + "left": 2517, + "top": 1776, + "width": 124.9853515625, + "height": 13, + "text": "+size", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 2512, + "top": 1681, + "width": 134.9853515625, + "height": 113 + }, + { + "_type": "UMLOperationCompartmentView", + "_id": "AAAAAAGAQI6qsOc9LOA=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc2n1Y=" + }, + "model": { + "$ref": "AAAAAAGAQI6qsOc0DIE=" + }, + "subViews": [ + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAQI+3G/X0hfw=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc9LOA=" + }, + "model": { + "$ref": "AAAAAAGAQI+28vXcViw=" + }, + "font": "Arial;13;0", + "left": 2517, + "top": 1799, + "width": 124.9853515625, + "height": 13, + "text": "+clone()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAQI/BfPbh9OM=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc9LOA=" + }, + "model": { + "$ref": "AAAAAAGAQI/BU/bJXC8=" + }, + "font": "Arial;13;0", + "left": 2517, + "top": 1814, + "width": 124.9853515625, + "height": 13, + "text": "+fromJSON()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAQI/DyfdQ/Sc=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc9LOA=" + }, + "model": { + "$ref": "AAAAAAGAQI/Do/c45mg=" + }, + "font": "Arial;13;0", + "left": 2517, + "top": 1829, + "width": 124.9853515625, + "height": 13, + "text": "+toJSON()", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 2512, + "top": 1794, + "width": 134.9853515625, + "height": 53 + }, + { + "_type": "UMLReceptionCompartmentView", + "_id": "AAAAAAGAQI6qsOc+n3A=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc2n1Y=" + }, + "model": { + "$ref": "AAAAAAGAQI6qsOc0DIE=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 24, + "top": 264, + "width": 10, + "height": 10 + }, + { + "_type": "UMLTemplateParameterCompartmentView", + "_id": "AAAAAAGAQI6qsOc/vKw=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc2n1Y=" + }, + "model": { + "$ref": "AAAAAAGAQI6qsOc0DIE=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 24, + "top": 264, + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "containerChangeable": true, + "left": 2512, + "top": 1656, + "width": 134.9853515625, + "height": 191, + "nameCompartment": { + "$ref": "AAAAAAGAQI6qsOc3FW8=" + }, + "attributeCompartment": { + "$ref": "AAAAAAGAQI6qsOc83nc=" + }, + "operationCompartment": { + "$ref": "AAAAAAGAQI6qsOc9LOA=" + }, + "receptionCompartment": { + "$ref": "AAAAAAGAQI6qsOc+n3A=" + }, + "templateParameterCompartment": { + "$ref": "AAAAAAGAQI6qsOc/vKw=" + } + }, + { + "_type": "UMLClassView", + "_id": "AAAAAAGAQYqXdn+2K7I=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAQYqXdX+0wEk=" + }, + "subViews": [ + { + "_type": "UMLNameCompartmentView", + "_id": "AAAAAAGAQYqXdn+3DBc=", + "_parent": { + "$ref": "AAAAAAGAQYqXdn+2K7I=" + }, + "model": { + "$ref": "AAAAAAGAQYqXdX+0wEk=" + }, + "subViews": [ + { + "_type": "LabelView", + "_id": "AAAAAAGAQYqXdn+4LmU=", + "_parent": { + "$ref": "AAAAAAGAQYqXdn+3DBc=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 272, + "top": -608, + "height": 13 + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAQYqXdn+5yHM=", + "_parent": { + "$ref": "AAAAAAGAQYqXdn+3DBc=" + }, + "font": "Arial;13;1", + "left": 2989, + "top": 1663, + "width": 146.66259765625, + "height": 13, + "text": "ExtrudeSymbol3DLayer" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAQYqXdn+6S/c=", + "_parent": { + "$ref": "AAAAAAGAQYqXdn+3DBc=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 272, + "top": -608, + "width": 73.67724609375, + "height": 13, + "text": "(from Model)" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAQYqXdn+7ohw=", + "_parent": { + "$ref": "AAAAAAGAQYqXdn+3DBc=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 272, + "top": -608, + "height": 13, + "horizontalAlignment": 1 + } + ], + "font": "Arial;13;0", + "left": 2984, + "top": 1656, + "width": 156.66259765625, + "height": 25, + "stereotypeLabel": { + "$ref": "AAAAAAGAQYqXdn+4LmU=" + }, + "nameLabel": { + "$ref": "AAAAAAGAQYqXdn+5yHM=" + }, + "namespaceLabel": { + "$ref": "AAAAAAGAQYqXdn+6S/c=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAQYqXdn+7ohw=" + } + }, + { + "_type": "UMLAttributeCompartmentView", + "_id": "AAAAAAGAQYqXdn+8FmQ=", + "_parent": { + "$ref": "AAAAAAGAQYqXdn+2K7I=" + }, + "model": { + "$ref": "AAAAAAGAQYqXdX+0wEk=" + }, + "subViews": [ + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQYrtG4fWan4=", + "_parent": { + "$ref": "AAAAAAGAQYqXdn+8FmQ=" + }, + "model": { + "$ref": "AAAAAAGAQYrs74espQ8=" + }, + "font": "Arial;13;0", + "left": 2989, + "top": 1686, + "width": 146.66259765625, + "height": 13, + "text": "+type", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQYr0dYks/wg=", + "_parent": { + "$ref": "AAAAAAGAQYqXdn+8FmQ=" + }, + "model": { + "$ref": "AAAAAAGAQYr0SYkCuFQ=" + }, + "font": "Arial;13;0", + "left": 2989, + "top": 1701, + "width": 146.66259765625, + "height": 13, + "text": "+castShadows", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQYr3GIoEiD8=", + "_parent": { + "$ref": "AAAAAAGAQYqXdn+8FmQ=" + }, + "model": { + "$ref": "AAAAAAGAQYr27InaovU=" + }, + "font": "Arial;13;0", + "left": 2989, + "top": 1716, + "width": 146.66259765625, + "height": 13, + "text": "+edges", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQYr5iorc0jw=", + "_parent": { + "$ref": "AAAAAAGAQYqXdn+8FmQ=" + }, + "model": { + "$ref": "AAAAAAGAQYr5XIqy5mU=" + }, + "font": "Arial;13;0", + "left": 2989, + "top": 1731, + "width": 146.66259765625, + "height": 13, + "text": "+material", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQYr+cou0D1I=", + "_parent": { + "$ref": "AAAAAAGAQYqXdn+8FmQ=" + }, + "model": { + "$ref": "AAAAAAGAQYr+RIuK/FY=" + }, + "font": "Arial;13;0", + "left": 2989, + "top": 1746, + "width": 146.66259765625, + "height": 13, + "text": "+size", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 2984, + "top": 1681, + "width": 156.66259765625, + "height": 83 + }, + { + "_type": "UMLOperationCompartmentView", + "_id": "AAAAAAGAQYqXdn+9yYI=", + "_parent": { + "$ref": "AAAAAAGAQYqXdn+2K7I=" + }, + "model": { + "$ref": "AAAAAAGAQYqXdX+0wEk=" + }, + "subViews": [ + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAQYt7fZSblX8=", + "_parent": { + "$ref": "AAAAAAGAQYqXdn+9yYI=" + }, + "model": { + "$ref": "AAAAAAGAQYt7S5Rx0RQ=" + }, + "font": "Arial;13;0", + "left": 2989, + "top": 1769, + "width": 146.66259765625, + "height": 13, + "text": "+clone()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAQYuCcZXxhxk=", + "_parent": { + "$ref": "AAAAAAGAQYqXdn+9yYI=" + }, + "model": { + "$ref": "AAAAAAGAQYuCRZXHU2w=" + }, + "font": "Arial;13;0", + "left": 2989, + "top": 1784, + "width": 146.66259765625, + "height": 13, + "text": "+fromJSON()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAQYuFNJbJFPY=", + "_parent": { + "$ref": "AAAAAAGAQYqXdn+9yYI=" + }, + "model": { + "$ref": "AAAAAAGAQYuFBpaftPw=" + }, + "font": "Arial;13;0", + "left": 2989, + "top": 1799, + "width": 146.66259765625, + "height": 13, + "text": "+toJSON()", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 2984, + "top": 1764, + "width": 156.66259765625, + "height": 53 + }, + { + "_type": "UMLReceptionCompartmentView", + "_id": "AAAAAAGAQYqXdn++XHc=", + "_parent": { + "$ref": "AAAAAAGAQYqXdn+2K7I=" + }, + "model": { + "$ref": "AAAAAAGAQYqXdX+0wEk=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 136, + "top": -304, + "width": 10, + "height": 10 + }, + { + "_type": "UMLTemplateParameterCompartmentView", + "_id": "AAAAAAGAQYqXdn+//9c=", + "_parent": { + "$ref": "AAAAAAGAQYqXdn+2K7I=" + }, + "model": { + "$ref": "AAAAAAGAQYqXdX+0wEk=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 136, + "top": -304, + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "containerChangeable": true, + "left": 2984, + "top": 1656, + "width": 156.66259765625, + "height": 161, + "nameCompartment": { + "$ref": "AAAAAAGAQYqXdn+3DBc=" + }, + "attributeCompartment": { + "$ref": "AAAAAAGAQYqXdn+8FmQ=" + }, + "operationCompartment": { + "$ref": "AAAAAAGAQYqXdn+9yYI=" + }, + "receptionCompartment": { + "$ref": "AAAAAAGAQYqXdn++XHc=" + }, + "templateParameterCompartment": { + "$ref": "AAAAAAGAQYqXdn+//9c=" + } + }, + { + "_type": "UMLAssociationView", + "_id": "AAAAAAGAQYq/foR37Qo=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAQYq/foRzh3g=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQYq/foR4+uY=", + "_parent": { + "$ref": "AAAAAAGAQYq/foR37Qo=" + }, + "model": { + "$ref": "AAAAAAGAQYq/foRzh3g=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2963, + "top": 1587, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQYq/foR37Qo=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQYq/foR5GLE=", + "_parent": { + "$ref": "AAAAAAGAQYq/foR37Qo=" + }, + "model": { + "$ref": "AAAAAAGAQYq/foRzh3g=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 2963, + "top": 1572, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQYq/foR37Qo=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQYq/foR64b0=", + "_parent": { + "$ref": "AAAAAAGAQYq/foR37Qo=" + }, + "model": { + "$ref": "AAAAAAGAQYq/foRzh3g=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2963, + "top": 1617, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQYq/foR37Qo=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQYq/foR7QWc=", + "_parent": { + "$ref": "AAAAAAGAQYq/foR37Qo=" + }, + "model": { + "$ref": "AAAAAAGAQYq/foR06rU=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2886, + "top": 1437, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQYq/foR37Qo=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQYq/foR8Oh4=", + "_parent": { + "$ref": "AAAAAAGAQYq/foR37Qo=" + }, + "model": { + "$ref": "AAAAAAGAQYq/foR06rU=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2899, + "top": 1440, + "height": 13, + "alpha": 0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAQYq/foR37Qo=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQYq/foR9S74=", + "_parent": { + "$ref": "AAAAAAGAQYq/foR37Qo=" + }, + "model": { + "$ref": "AAAAAAGAQYq/foR06rU=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2858, + "top": 1433, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAQYq/foR37Qo=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQYq/foR+RBM=", + "_parent": { + "$ref": "AAAAAAGAQYq/foR37Qo=" + }, + "model": { + "$ref": "AAAAAAGAQYq/foR197U=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 3071, + "top": 1624, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQYq/foR37Qo=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQYq/foR/oTw=", + "_parent": { + "$ref": "AAAAAAGAQYq/foR37Qo=" + }, + "model": { + "$ref": "AAAAAAGAQYq/foR197U=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 3084, + "top": 1621, + "height": 13, + "alpha": -0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAQYq/foR37Qo=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQYq/foSAW70=", + "_parent": { + "$ref": "AAAAAAGAQYq/foR37Qo=" + }, + "model": { + "$ref": "AAAAAAGAQYq/foR197U=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 3043, + "top": 1628, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAQYq/foR37Qo=" + } + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAQYq/f4SB/Ng=", + "_parent": { + "$ref": "AAAAAAGAQYq/foR37Qo=" + }, + "model": { + "$ref": "AAAAAAGAQYq/foR06rU=" + }, + "visible": false, + "font": "Arial;13;0", + "width": 10, + "height": 10 + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAQYq/f4SCkwA=", + "_parent": { + "$ref": "AAAAAAGAQYq/foR37Qo=" + }, + "model": { + "$ref": "AAAAAAGAQYq/foR197U=" + }, + "visible": false, + "font": "Arial;13;0", + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAQYqXdn+2K7I=" + }, + "tail": { + "$ref": "AAAAAAGAQJPNQDjq3dQ=" + }, + "points": "2871:1418;2871:1608;3056:1608;3056:1656", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAQYq/foR4+uY=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAQYq/foR5GLE=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAQYq/foR64b0=" + }, + "tailRoleNameLabel": { + "$ref": "AAAAAAGAQYq/foR7QWc=" + }, + "tailPropertyLabel": { + "$ref": "AAAAAAGAQYq/foR8Oh4=" + }, + "tailMultiplicityLabel": { + "$ref": "AAAAAAGAQYq/foR9S74=" + }, + "headRoleNameLabel": { + "$ref": "AAAAAAGAQYq/foR+RBM=" + }, + "headPropertyLabel": { + "$ref": "AAAAAAGAQYq/foR/oTw=" + }, + "headMultiplicityLabel": { + "$ref": "AAAAAAGAQYq/foSAW70=" + }, + "tailQualifiersCompartment": { + "$ref": "AAAAAAGAQYq/f4SB/Ng=" + }, + "headQualifiersCompartment": { + "$ref": "AAAAAAGAQYq/f4SCkwA=" + } + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQKKoDGxLvTU=", + "font": "Arial;13;0", + "left": 2837, + "top": 1686, + "width": 117.0380859375, + "height": 13, + "text": "+type", + "horizontalAlignment": 0 + }, + { + "_type": "UMLGeneralizationView", + "_id": "AAAAAAGAQYrN7oX5Qwo=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAQYrN7oX36Ng=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQYrN7oX6FtM=", + "_parent": { + "$ref": "AAAAAAGAQYrN7oX5Qwo=" + }, + "model": { + "$ref": "AAAAAAGAQYrN7oX36Ng=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 3060, + "top": 2077, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQYrN7oX5Qwo=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQYrN7oX7C7s=", + "_parent": { + "$ref": "AAAAAAGAQYrN7oX5Qwo=" + }, + "model": { + "$ref": "AAAAAAGAQYrN7oX36Ng=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 3060, + "top": 2092, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQYrN7oX5Qwo=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQYrN7oX8Jdk=", + "_parent": { + "$ref": "AAAAAAGAQYrN7oX5Qwo=" + }, + "model": { + "$ref": "AAAAAAGAQYrN7oX36Ng=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 3061, + "top": 2047, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQYrN7oX5Qwo=" + }, + "edgePosition": 1 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAP8/5/T2zufk=" + }, + "tail": { + "$ref": "AAAAAAGAQYqXdn+2K7I=" + }, + "points": "3061:1816;3061:2068;2235:2068", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAQYrN7oX6FtM=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAQYrN7oX7C7s=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAQYrN7oX8Jdk=" + } + }, + { + "_type": "UMLClassView", + "_id": "AAAAAAGAQKIeqWLv2j0=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAQKIeqWLtb7A=" + }, + "subViews": [ + { + "_type": "UMLNameCompartmentView", + "_id": "AAAAAAGAQKIeqmLwPvU=", + "_parent": { + "$ref": "AAAAAAGAQKIeqWLv2j0=" + }, + "model": { + "$ref": "AAAAAAGAQKIeqWLtb7A=" + }, + "subViews": [ + { + "_type": "LabelView", + "_id": "AAAAAAGAQKIeqmLxGTE=", + "_parent": { + "$ref": "AAAAAAGAQKIeqmLwPvU=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 336, + "top": 256, + "height": 13 + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAQKIeqmLyYNk=", + "_parent": { + "$ref": "AAAAAAGAQKIeqmLwPvU=" + }, + "font": "Arial;13;1", + "left": 2837, + "top": 1663, + "width": 117.0380859375, + "height": 13, + "text": "FillSymbol3DLayer" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAQKIeqmLzzjA=", + "_parent": { + "$ref": "AAAAAAGAQKIeqmLwPvU=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 336, + "top": 256, + "width": 73.67724609375, + "height": 13, + "text": "(from Model)" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAQKIeqmL0DUA=", + "_parent": { + "$ref": "AAAAAAGAQKIeqmLwPvU=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 336, + "top": 256, + "height": 13, + "horizontalAlignment": 1 + } + ], + "font": "Arial;13;0", + "left": 2832, + "top": 1656, + "width": 127.0380859375, + "height": 25, + "stereotypeLabel": { + "$ref": "AAAAAAGAQKIeqmLxGTE=" + }, + "nameLabel": { + "$ref": "AAAAAAGAQKIeqmLyYNk=" + }, + "namespaceLabel": { + "$ref": "AAAAAAGAQKIeqmLzzjA=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAQKIeqmL0DUA=" + } + }, + { + "_type": "UMLAttributeCompartmentView", + "_id": "AAAAAAGAQKIeqmL15DU=", + "_parent": { + "$ref": "AAAAAAGAQKIeqWLv2j0=" + }, + "model": { + "$ref": "AAAAAAGAQKIeqWLtb7A=" + }, + "subViews": [ + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQKKoDGxLvTU=", + "_parent": { + "$ref": "AAAAAAGAQKIeqmL15DU=" + }, + "model": { + "$ref": "AAAAAAGAQKKn5Gwwvc4=" + }, + "font": "Arial;13;0", + "left": 2837, + "top": 1686, + "width": 117.0380859375, + "height": 13, + "text": "+type", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQKKuJm0R9gw=", + "_parent": { + "$ref": "AAAAAAGAQKIeqmL15DU=" + }, + "model": { + "$ref": "AAAAAAGAQKKt/Wz2iEA=" + }, + "font": "Arial;13;0", + "left": 2837, + "top": 1701, + "width": 117.0380859375, + "height": 13, + "text": "+castShadows", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQKKwDW2PUPU=", + "_parent": { + "$ref": "AAAAAAGAQKIeqmL15DU=" + }, + "model": { + "$ref": "AAAAAAGAQKKv4210K3A=" + }, + "font": "Arial;13;0", + "left": 2837, + "top": 1716, + "width": 117.0380859375, + "height": 13, + "text": "+edges", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQKKywm4NF+I=", + "_parent": { + "$ref": "AAAAAAGAQKIeqmL15DU=" + }, + "model": { + "$ref": "AAAAAAGAQKKymW3yL3A=" + }, + "font": "Arial;13;0", + "left": 2837, + "top": 1731, + "width": 117.0380859375, + "height": 13, + "text": "+material", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQKK0tG6LD/o=", + "_parent": { + "$ref": "AAAAAAGAQKIeqmL15DU=" + }, + "model": { + "$ref": "AAAAAAGAQKK0i25wkdY=" + }, + "font": "Arial;13;0", + "left": 2837, + "top": 1746, + "width": 117.0380859375, + "height": 13, + "text": "+outline", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQKK2l28JCeE=", + "_parent": { + "$ref": "AAAAAAGAQKIeqmL15DU=" + }, + "model": { + "$ref": "AAAAAAGAQKK2bm7uffg=" + }, + "font": "Arial;13;0", + "left": 2837, + "top": 1761, + "width": 117.0380859375, + "height": 13, + "text": "+pattern", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 2832, + "top": 1681, + "width": 127.0380859375, + "height": 98 + }, + { + "_type": "UMLOperationCompartmentView", + "_id": "AAAAAAGAQKIeqmL2dy0=", + "_parent": { + "$ref": "AAAAAAGAQKIeqWLv2j0=" + }, + "model": { + "$ref": "AAAAAAGAQKIeqWLtb7A=" + }, + "subViews": [ + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAQKI2X2Rqdhc=", + "_parent": { + "$ref": "AAAAAAGAQKIeqmL2dy0=" + }, + "model": { + "$ref": "AAAAAAGAQKI2N2RPsfU=" + }, + "font": "Arial;13;0", + "left": 2837, + "top": 1784, + "width": 117.0380859375, + "height": 13, + "text": "+clone()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAQKI9uGUwjGE=", + "_parent": { + "$ref": "AAAAAAGAQKIeqmL2dy0=" + }, + "model": { + "$ref": "AAAAAAGAQKI9kGUVE0M=" + }, + "font": "Arial;13;0", + "left": 2837, + "top": 1799, + "width": 117.0380859375, + "height": 13, + "text": "+fromJSON()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAQKJAC2WuxLo=", + "_parent": { + "$ref": "AAAAAAGAQKIeqmL2dy0=" + }, + "model": { + "$ref": "AAAAAAGAQKI/4mWTMrg=" + }, + "font": "Arial;13;0", + "left": 2837, + "top": 1814, + "width": 117.0380859375, + "height": 13, + "text": "+toJSON()", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 2832, + "top": 1779, + "width": 127.0380859375, + "height": 53 + }, + { + "_type": "UMLReceptionCompartmentView", + "_id": "AAAAAAGAQKIeqmL3t4E=", + "_parent": { + "$ref": "AAAAAAGAQKIeqWLv2j0=" + }, + "model": { + "$ref": "AAAAAAGAQKIeqWLtb7A=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 168, + "top": 128, + "width": 10, + "height": 10 + }, + { + "_type": "UMLTemplateParameterCompartmentView", + "_id": "AAAAAAGAQKIeqmL4wsU=", + "_parent": { + "$ref": "AAAAAAGAQKIeqWLv2j0=" + }, + "model": { + "$ref": "AAAAAAGAQKIeqWLtb7A=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 168, + "top": 128, + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "containerChangeable": true, + "left": 2832, + "top": 1656, + "width": 127.0380859375, + "height": 176, + "nameCompartment": { + "$ref": "AAAAAAGAQKIeqmLwPvU=" + }, + "attributeCompartment": { + "$ref": "AAAAAAGAQKIeqmL15DU=" + }, + "operationCompartment": { + "$ref": "AAAAAAGAQKIeqmL2dy0=" + }, + "receptionCompartment": { + "$ref": "AAAAAAGAQKIeqmL3t4E=" + }, + "templateParameterCompartment": { + "$ref": "AAAAAAGAQKIeqmL4wsU=" + } + }, + { + "_type": "UMLAssociationView", + "_id": "AAAAAAGAQZEEMWQzWag=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAQZEEMGQvP4A=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZEEMWQ06Ho=", + "_parent": { + "$ref": "AAAAAAGAQZEEMWQzWag=" + }, + "model": { + "$ref": "AAAAAAGAQZEEMGQvP4A=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2652, + "top": 1557, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQZEEMWQzWag=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZEEMWQ1eXY=", + "_parent": { + "$ref": "AAAAAAGAQZEEMWQzWag=" + }, + "model": { + "$ref": "AAAAAAGAQZEEMGQvP4A=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 2662, + "top": 1568, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQZEEMWQzWag=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZEEMWQ2OMA=", + "_parent": { + "$ref": "AAAAAAGAQZEEMWQzWag=" + }, + "model": { + "$ref": "AAAAAAGAQZEEMGQvP4A=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2631, + "top": 1536, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQZEEMWQzWag=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZEEMWQ3Fys=", + "_parent": { + "$ref": "AAAAAAGAQZEEMWQzWag=" + }, + "model": { + "$ref": "AAAAAAGAQZEEMGQwxWs=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2782, + "top": 1434, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQZEEMWQzWag=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZEEMWQ4Qow=", + "_parent": { + "$ref": "AAAAAAGAQZEEMWQzWag=" + }, + "model": { + "$ref": "AAAAAAGAQZEEMGQwxWs=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2789, + "top": 1445, + "height": 13, + "alpha": 0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAQZEEMWQzWag=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZEEMWQ5gR8=", + "_parent": { + "$ref": "AAAAAAGAQZEEMWQzWag=" + }, + "model": { + "$ref": "AAAAAAGAQZEEMGQwxWs=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2766, + "top": 1411, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAQZEEMWQzWag=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZEEMWQ6sCU=", + "_parent": { + "$ref": "AAAAAAGAQZEEMWQzWag=" + }, + "model": { + "$ref": "AAAAAAGAQZEEMGQx3vs=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2522, + "top": 1681, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQZEEMWQzWag=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZEEMWQ75iI=", + "_parent": { + "$ref": "AAAAAAGAQZEEMWQzWag=" + }, + "model": { + "$ref": "AAAAAAGAQZEEMGQx3vs=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2532, + "top": 1690, + "height": 13, + "alpha": -0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAQZEEMWQzWag=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZEEMWQ8Hek=", + "_parent": { + "$ref": "AAAAAAGAQZEEMWQzWag=" + }, + "model": { + "$ref": "AAAAAAGAQZEEMGQx3vs=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2500, + "top": 1665, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAQZEEMWQzWag=" + } + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAQZEEMWQ9h1s=", + "_parent": { + "$ref": "AAAAAAGAQZEEMWQzWag=" + }, + "model": { + "$ref": "AAAAAAGAQZEEMGQwxWs=" + }, + "visible": false, + "font": "Arial;13;0", + "left": -56, + "top": -8, + "width": 10, + "height": 10 + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAQZEEMWQ+R10=", + "_parent": { + "$ref": "AAAAAAGAQZEEMWQzWag=" + }, + "model": { + "$ref": "AAAAAAGAQZEEMGQx3vs=" + }, + "visible": false, + "font": "Arial;13;0", + "left": -56, + "top": -8, + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAQPnVf+rFgxs=" + }, + "tail": { + "$ref": "AAAAAAGAQJPNQDjq3dQ=" + }, + "lineStyle": 1, + "points": "2791:1412;2493:1695", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAQZEEMWQ06Ho=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAQZEEMWQ1eXY=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAQZEEMWQ2OMA=" + }, + "tailRoleNameLabel": { + "$ref": "AAAAAAGAQZEEMWQ3Fys=" + }, + "tailPropertyLabel": { + "$ref": "AAAAAAGAQZEEMWQ4Qow=" + }, + "tailMultiplicityLabel": { + "$ref": "AAAAAAGAQZEEMWQ5gR8=" + }, + "headRoleNameLabel": { + "$ref": "AAAAAAGAQZEEMWQ6sCU=" + }, + "headPropertyLabel": { + "$ref": "AAAAAAGAQZEEMWQ75iI=" + }, + "headMultiplicityLabel": { + "$ref": "AAAAAAGAQZEEMWQ8Hek=" + }, + "tailQualifiersCompartment": { + "$ref": "AAAAAAGAQZEEMWQ9h1s=" + }, + "headQualifiersCompartment": { + "$ref": "AAAAAAGAQZEEMWQ+R10=" + } + }, + { + "_type": "UMLAssociationView", + "_id": "AAAAAAGAQZE2+meDj0I=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAQZE2+md/zbs=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZE2+meE0dA=", + "_parent": { + "$ref": "AAAAAAGAQZE2+meDj0I=" + }, + "model": { + "$ref": "AAAAAAGAQZE2+md/zbs=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2571, + "top": 1555, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQZE2+meDj0I=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZE2+meFKgw=", + "_parent": { + "$ref": "AAAAAAGAQZE2+meDj0I=" + }, + "model": { + "$ref": "AAAAAAGAQZE2+md/zbs=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 2579, + "top": 1567, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQZE2+meDj0I=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZE2+meGnAQ=", + "_parent": { + "$ref": "AAAAAAGAQZE2+meDj0I=" + }, + "model": { + "$ref": "AAAAAAGAQZE2+md/zbs=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2554, + "top": 1530, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQZE2+meDj0I=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZE2+meHJn0=", + "_parent": { + "$ref": "AAAAAAGAQZE2+meDj0I=" + }, + "model": { + "$ref": "AAAAAAGAQZE2+meABCg=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2777, + "top": 1415, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQZE2+meDj0I=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZE2+meIuKI=", + "_parent": { + "$ref": "AAAAAAGAQZE2+meDj0I=" + }, + "model": { + "$ref": "AAAAAAGAQZE2+meABCg=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2783, + "top": 1428, + "height": 13, + "alpha": 0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAQZE2+meDj0I=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZE2+meJZnE=", + "_parent": { + "$ref": "AAAAAAGAQZE2+meDj0I=" + }, + "model": { + "$ref": "AAAAAAGAQZE2+meABCg=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2766, + "top": 1390, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAQZE2+meDj0I=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZE2+meKXaM=", + "_parent": { + "$ref": "AAAAAAGAQZE2+meDj0I=" + }, + "model": { + "$ref": "AAAAAAGAQZE2+meB18I=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2364, + "top": 1695, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQZE2+meDj0I=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZE2+meLG60=", + "_parent": { + "$ref": "AAAAAAGAQZE2+meDj0I=" + }, + "model": { + "$ref": "AAAAAAGAQZE2+meB18I=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2374, + "top": 1705, + "height": 13, + "alpha": -0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAQZE2+meDj0I=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZE2+meM+Xk=", + "_parent": { + "$ref": "AAAAAAGAQZE2+meDj0I=" + }, + "model": { + "$ref": "AAAAAAGAQZE2+meB18I=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2345, + "top": 1675, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAQZE2+meDj0I=" + } + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAQZE2+meN3Qs=", + "_parent": { + "$ref": "AAAAAAGAQZE2+meDj0I=" + }, + "model": { + "$ref": "AAAAAAGAQZE2+meABCg=" + }, + "visible": false, + "font": "Arial;13;0", + "left": -56, + "top": -8, + "width": 10, + "height": 10 + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAQZE2+meO9iI=", + "_parent": { + "$ref": "AAAAAAGAQZE2+meDj0I=" + }, + "model": { + "$ref": "AAAAAAGAQZE2+meB18I=" + }, + "visible": false, + "font": "Arial;13;0", + "left": -56, + "top": -8, + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAQHci648v8Jg=" + }, + "tail": { + "$ref": "AAAAAAGAQJPNQDjq3dQ=" + }, + "lineStyle": 1, + "points": "2791:1395;2335:1704", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAQZE2+meE0dA=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAQZE2+meFKgw=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAQZE2+meGnAQ=" + }, + "tailRoleNameLabel": { + "$ref": "AAAAAAGAQZE2+meHJn0=" + }, + "tailPropertyLabel": { + "$ref": "AAAAAAGAQZE2+meIuKI=" + }, + "tailMultiplicityLabel": { + "$ref": "AAAAAAGAQZE2+meJZnE=" + }, + "headRoleNameLabel": { + "$ref": "AAAAAAGAQZE2+meKXaM=" + }, + "headPropertyLabel": { + "$ref": "AAAAAAGAQZE2+meLG60=" + }, + "headMultiplicityLabel": { + "$ref": "AAAAAAGAQZE2+meM+Xk=" + }, + "tailQualifiersCompartment": { + "$ref": "AAAAAAGAQZE2+meN3Qs=" + }, + "headQualifiersCompartment": { + "$ref": "AAAAAAGAQZE2+meO9iI=" + } + }, + { + "_type": "UMLAssociationView", + "_id": "AAAAAAGAQZOWEGpdhEY=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAQZOWEGpZGhg=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZOWEGpeioI=", + "_parent": { + "$ref": "AAAAAAGAQZOWEGpdhEY=" + }, + "model": { + "$ref": "AAAAAAGAQZOWEGpZGhg=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 3040, + "top": 1499, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQZOWEGpdhEY=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZOWEGpfios=", + "_parent": { + "$ref": "AAAAAAGAQZOWEGpdhEY=" + }, + "model": { + "$ref": "AAAAAAGAQZOWEGpZGhg=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 3040, + "top": 1484, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQZOWEGpdhEY=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZOWEGpgu4U=", + "_parent": { + "$ref": "AAAAAAGAQZOWEGpdhEY=" + }, + "model": { + "$ref": "AAAAAAGAQZOWEGpZGhg=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 3040, + "top": 1529, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQZOWEGpdhEY=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZOWEGph92Q=", + "_parent": { + "$ref": "AAAAAAGAQZOWEGpdhEY=" + }, + "model": { + "$ref": "AAAAAAGAQZOWEGpaZS4=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2895, + "top": 1437, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQZOWEGpdhEY=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZOWEGpin14=", + "_parent": { + "$ref": "AAAAAAGAQZOWEGpdhEY=" + }, + "model": { + "$ref": "AAAAAAGAQZOWEGpaZS4=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2908, + "top": 1440, + "height": 13, + "alpha": 0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAQZOWEGpdhEY=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZOWEGpjFv8=", + "_parent": { + "$ref": "AAAAAAGAQZOWEGpdhEY=" + }, + "model": { + "$ref": "AAAAAAGAQZOWEGpaZS4=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2867, + "top": 1433, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAQZOWEGpdhEY=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZOWEGpkaFo=", + "_parent": { + "$ref": "AAAAAAGAQZOWEGpdhEY=" + }, + "model": { + "$ref": "AAAAAAGAQZOWEGpb1vk=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 3215, + "top": 1616, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQZOWEGpdhEY=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZOWEGplaes=", + "_parent": { + "$ref": "AAAAAAGAQZOWEGpdhEY=" + }, + "model": { + "$ref": "AAAAAAGAQZOWEGpb1vk=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 3228, + "top": 1613, + "height": 13, + "alpha": -0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAQZOWEGpdhEY=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZOWEGpmhpw=", + "_parent": { + "$ref": "AAAAAAGAQZOWEGpdhEY=" + }, + "model": { + "$ref": "AAAAAAGAQZOWEGpb1vk=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 3187, + "top": 1620, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAQZOWEGpdhEY=" + } + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAQZOWEGpnTsQ=", + "_parent": { + "$ref": "AAAAAAGAQZOWEGpdhEY=" + }, + "model": { + "$ref": "AAAAAAGAQZOWEGpaZS4=" + }, + "visible": false, + "font": "Arial;13;0", + "width": 10, + "height": 10 + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAQZOWEGpo40M=", + "_parent": { + "$ref": "AAAAAAGAQZOWEGpdhEY=" + }, + "model": { + "$ref": "AAAAAAGAQZOWEGpb1vk=" + }, + "visible": false, + "font": "Arial;13;0", + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAQLns6JmlVRk=" + }, + "tail": { + "$ref": "AAAAAAGAQJPNQDjq3dQ=" + }, + "points": "2880:1418;2880:1520;3200:1520;3200:1648", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAQZOWEGpeioI=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAQZOWEGpfios=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAQZOWEGpgu4U=" + }, + "tailRoleNameLabel": { + "$ref": "AAAAAAGAQZOWEGph92Q=" + }, + "tailPropertyLabel": { + "$ref": "AAAAAAGAQZOWEGpin14=" + }, + "tailMultiplicityLabel": { + "$ref": "AAAAAAGAQZOWEGpjFv8=" + }, + "headRoleNameLabel": { + "$ref": "AAAAAAGAQZOWEGpkaFo=" + }, + "headPropertyLabel": { + "$ref": "AAAAAAGAQZOWEGplaes=" + }, + "headMultiplicityLabel": { + "$ref": "AAAAAAGAQZOWEGpmhpw=" + }, + "tailQualifiersCompartment": { + "$ref": "AAAAAAGAQZOWEGpnTsQ=" + }, + "headQualifiersCompartment": { + "$ref": "AAAAAAGAQZOWEGpo40M=" + } + }, + { + "_type": "UMLAssociationView", + "_id": "AAAAAAGAQZO4TGv2Wb8=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAQZO4TGvycxc=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZO4TGv36pE=", + "_parent": { + "$ref": "AAAAAAGAQZO4TGv2Wb8=" + }, + "model": { + "$ref": "AAAAAAGAQZO4TGvycxc=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2737, + "top": 1539, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQZO4TGv2Wb8=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZO4TGv4yKA=", + "_parent": { + "$ref": "AAAAAAGAQZO4TGv2Wb8=" + }, + "model": { + "$ref": "AAAAAAGAQZO4TGvycxc=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 2749, + "top": 1547, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQZO4TGv2Wb8=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZO4TGv5lrs=", + "_parent": { + "$ref": "AAAAAAGAQZO4TGv2Wb8=" + }, + "model": { + "$ref": "AAAAAAGAQZO4TGvycxc=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2712, + "top": 1522, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQZO4TGv2Wb8=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZO4TGv6LtA=", + "_parent": { + "$ref": "AAAAAAGAQZO4TGv2Wb8=" + }, + "model": { + "$ref": "AAAAAAGAQZO4TGvzO6Q=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2804, + "top": 1442, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQZO4TGv2Wb8=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZO4TGv7sK8=", + "_parent": { + "$ref": "AAAAAAGAQZO4TGv2Wb8=" + }, + "model": { + "$ref": "AAAAAAGAQZO4TGvzO6Q=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2814, + "top": 1452, + "height": 13, + "alpha": 0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAQZO4TGv2Wb8=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZO4TGv8jXU=", + "_parent": { + "$ref": "AAAAAAGAQZO4TGv2Wb8=" + }, + "model": { + "$ref": "AAAAAAGAQZO4TGvzO6Q=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2784, + "top": 1423, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAQZO4TGv2Wb8=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZO4TGv9Ta4=", + "_parent": { + "$ref": "AAAAAAGAQZO4TGv2Wb8=" + }, + "model": { + "$ref": "AAAAAAGAQZO4TGv03hE=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2671, + "top": 1636, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQZO4TGv2Wb8=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZO4TGv+EKc=", + "_parent": { + "$ref": "AAAAAAGAQZO4TGv2Wb8=" + }, + "model": { + "$ref": "AAAAAAGAQZO4TGv03hE=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2683, + "top": 1641, + "height": 13, + "alpha": -0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAQZO4TGv2Wb8=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZO4TGv/ouA=", + "_parent": { + "$ref": "AAAAAAGAQZO4TGv2Wb8=" + }, + "model": { + "$ref": "AAAAAAGAQZO4TGv03hE=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2646, + "top": 1624, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAQZO4TGv2Wb8=" + } + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAQZO4TWwAL+8=", + "_parent": { + "$ref": "AAAAAAGAQZO4TGv2Wb8=" + }, + "model": { + "$ref": "AAAAAAGAQZO4TGvzO6Q=" + }, + "visible": false, + "font": "Arial;13;0", + "width": 10, + "height": 10 + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAQZO4TWwBVw0=", + "_parent": { + "$ref": "AAAAAAGAQZO4TGv2Wb8=" + }, + "model": { + "$ref": "AAAAAAGAQZO4TGv03hE=" + }, + "visible": false, + "font": "Arial;13;0", + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAQI6qsOc2n1Y=" + }, + "tail": { + "$ref": "AAAAAAGAQJPNQDjq3dQ=" + }, + "lineStyle": 1, + "points": "2807:1419;2644:1655", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAQZO4TGv36pE=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAQZO4TGv4yKA=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAQZO4TGv5lrs=" + }, + "tailRoleNameLabel": { + "$ref": "AAAAAAGAQZO4TGv6LtA=" + }, + "tailPropertyLabel": { + "$ref": "AAAAAAGAQZO4TGv7sK8=" + }, + "tailMultiplicityLabel": { + "$ref": "AAAAAAGAQZO4TGv8jXU=" + }, + "headRoleNameLabel": { + "$ref": "AAAAAAGAQZO4TGv9Ta4=" + }, + "headPropertyLabel": { + "$ref": "AAAAAAGAQZO4TGv+EKc=" + }, + "headMultiplicityLabel": { + "$ref": "AAAAAAGAQZO4TGv/ouA=" + }, + "tailQualifiersCompartment": { + "$ref": "AAAAAAGAQZO4TWwAL+8=" + }, + "headQualifiersCompartment": { + "$ref": "AAAAAAGAQZO4TWwBVw0=" + } + } + ] + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAO1MYeU/HxR0=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "Symbol", + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAO1M4mE/xJtQ=", + "_parent": { + "$ref": "AAAAAAGAO1MYeU/HxR0=" + }, + "name": "type", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAO1NDTE/3Mpo=", + "_parent": { + "$ref": "AAAAAAGAO1MYeU/HxR0=" + }, + "name": "color", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAO1NFuk/9tZ0=", + "_parent": { + "$ref": "AAAAAAGAO1MYeU/HxR0=" + }, + "name": "opacity", + "visibility": "private", + "type": "" + } + ], + "operations": [ + { + "_type": "UMLOperation", + "_id": "AAAAAAGAO1QIuVAHl58=", + "_parent": { + "$ref": "AAAAAAGAO1MYeU/HxR0=" + }, + "name": "fromJSON" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAO1QRq1ANbHM=", + "_parent": { + "$ref": "AAAAAAGAO1MYeU/HxR0=" + }, + "name": "toJSON" + } + ], + "isAbstract": true + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAO4K5hVAX2y8=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "MarkerSymbol", + "ownedElements": [ + { + "_type": "UMLGeneralization", + "_id": "AAAAAAGAO4k9d5q8o/w=", + "_parent": { + "$ref": "AAAAAAGAO4K5hVAX2y8=" + }, + "source": { + "$ref": "AAAAAAGAO4K5hVAX2y8=" + }, + "target": { + "$ref": "AAAAAAGAO1MYeU/HxR0=" + } + } + ], + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAO4pz5Zr153M=", + "_parent": { + "$ref": "AAAAAAGAO4K5hVAX2y8=" + }, + "name": "type", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAO4mTwJrPb7w=", + "_parent": { + "$ref": "AAAAAAGAO4K5hVAX2y8=" + }, + "name": "angle", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAO4qdgZsAE80=", + "_parent": { + "$ref": "AAAAAAGAO4K5hVAX2y8=" + }, + "name": "color", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAO4mfnZrVlig=", + "_parent": { + "$ref": "AAAAAAGAO4K5hVAX2y8=" + }, + "name": "xoffset", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAO4mihZrbRuU=", + "_parent": { + "$ref": "AAAAAAGAO4K5hVAX2y8=" + }, + "name": "yoffset", + "type": "" + } + ], + "operations": [ + { + "_type": "UMLOperation", + "_id": "AAAAAAGAO4nh+prkPOw=", + "_parent": { + "$ref": "AAAAAAGAO4K5hVAX2y8=" + }, + "name": "fromJSON" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAO4n8mJrrxks=", + "_parent": { + "$ref": "AAAAAAGAO4K5hVAX2y8=" + }, + "name": "toJSON" + } + ], + "isAbstract": true + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAO5gALZsNaqc=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "SimpleMarkerSymbol", + "ownedElements": [ + { + "_type": "UMLGeneralization", + "_id": "AAAAAAGAO5hIZ5s7B30=", + "_parent": { + "$ref": "AAAAAAGAO5gALZsNaqc=" + }, + "source": { + "$ref": "AAAAAAGAO5gALZsNaqc=" + }, + "target": { + "$ref": "AAAAAAGAO4K5hVAX2y8=" + } + }, + { + "_type": "UMLAssociation", + "_id": "AAAAAAGAPAUdsZyKUJw=", + "_parent": { + "$ref": "AAAAAAGAO5gALZsNaqc=" + }, + "end1": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAPAUdsZyL/EI=", + "_parent": { + "$ref": "AAAAAAGAPAUdsZyKUJw=" + }, + "reference": { + "$ref": "AAAAAAGAO5gALZsNaqc=" + } + }, + "end2": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAPAUdsZyMSoA=", + "_parent": { + "$ref": "AAAAAAGAPAUdsZyKUJw=" + }, + "reference": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + } + } + }, + { + "_type": "UMLAssociation", + "_id": "AAAAAAGAPAZXyJz3JCA=", + "_parent": { + "$ref": "AAAAAAGAO5gALZsNaqc=" + }, + "end1": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAPAZXyJz4H6A=", + "_parent": { + "$ref": "AAAAAAGAPAZXyJz3JCA=" + }, + "reference": { + "$ref": "AAAAAAGAO5gALZsNaqc=" + }, + "navigable": false + }, + "end2": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAPAZXyJz5qwM=", + "_parent": { + "$ref": "AAAAAAGAPAZXyJz3JCA=" + }, + "reference": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + } + } + } + ], + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAO5hkNptMOqw=", + "_parent": { + "$ref": "AAAAAAGAO5gALZsNaqc=" + }, + "name": "type", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAO5hwUJtS32g=", + "_parent": { + "$ref": "AAAAAAGAO5gALZsNaqc=" + }, + "name": "angle", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAO5hygptYMPQ=", + "_parent": { + "$ref": "AAAAAAGAO5gALZsNaqc=" + }, + "name": "color", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAO5pIqJud5fM=", + "_parent": { + "$ref": "AAAAAAGAO5gALZsNaqc=" + }, + "name": "outline", + "type": "SimpleLineSymbol" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAO5h09pteLz4=", + "_parent": { + "$ref": "AAAAAAGAO5gALZsNaqc=" + }, + "name": "path", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAO5h23Jtkc88=", + "_parent": { + "$ref": "AAAAAAGAO5gALZsNaqc=" + }, + "name": "size", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAO5h4k5tqygA=", + "_parent": { + "$ref": "AAAAAAGAO5gALZsNaqc=" + }, + "name": "style", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAO5h7A5tw0cA=", + "_parent": { + "$ref": "AAAAAAGAO5gALZsNaqc=" + }, + "name": "xoffset", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAO5h9B5t2d9Q=", + "_parent": { + "$ref": "AAAAAAGAO5gALZsNaqc=" + }, + "name": "yoffset", + "type": "" + } + ], + "operations": [ + { + "_type": "UMLOperation", + "_id": "AAAAAAGAO5iajJuIBOs=", + "_parent": { + "$ref": "AAAAAAGAO5gALZsNaqc=" + }, + "name": "clone" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAO5iPxpt81pU=", + "_parent": { + "$ref": "AAAAAAGAO5gALZsNaqc=" + }, + "name": "fromJSON" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAO5iX6JuC7TA=", + "_parent": { + "$ref": "AAAAAAGAO5gALZsNaqc=" + }, + "name": "toJSON" + } + ] + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAPAEEB5uzp5s=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "LineSymbol", + "ownedElements": [ + { + "_type": "UMLGeneralization", + "_id": "AAAAAAGAPAMl+Jwq3y8=", + "_parent": { + "$ref": "AAAAAAGAPAEEB5uzp5s=" + }, + "source": { + "$ref": "AAAAAAGAPAEEB5uzp5s=" + }, + "target": { + "$ref": "AAAAAAGAO1MYeU/HxR0=" + } + } + ], + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPAKLVpvdNNE=", + "_parent": { + "$ref": "AAAAAAGAPAEEB5uzp5s=" + }, + "name": "type", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPAKRz5vj6lU=", + "_parent": { + "$ref": "AAAAAAGAPAEEB5uzp5s=" + }, + "name": "color", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPAKan5vpoKk=", + "_parent": { + "$ref": "AAAAAAGAPAEEB5uzp5s=" + }, + "name": "width", + "type": "" + } + ], + "operations": [ + { + "_type": "UMLOperation", + "_id": "AAAAAAGAPALS25vyQdo=", + "_parent": { + "$ref": "AAAAAAGAPAEEB5uzp5s=" + }, + "name": "fromJSON" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAPALeMZv49lY=", + "_parent": { + "$ref": "AAAAAAGAPAEEB5uzp5s=" + }, + "name": "toJSON" + } + ], + "isAbstract": true + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAPAMK75wAYR4=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "SimpleLineSymbol", + "ownedElements": [ + { + "_type": "UMLGeneralization", + "_id": "AAAAAAGAPAM0X5w7CQk=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + }, + "source": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + }, + "target": { + "$ref": "AAAAAAGAPAEEB5uzp5s=" + } + }, + { + "_type": "UMLAssociation", + "_id": "AAAAAAGAPAgXl59swT0=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + }, + "end1": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAPAgXl59tmOM=", + "_parent": { + "$ref": "AAAAAAGAPAgXl59swT0=" + }, + "reference": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + }, + "navigable": false + }, + "end2": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAPAgXl59uDWo=", + "_parent": { + "$ref": "AAAAAAGAPAgXl59swT0=" + }, + "reference": { + "$ref": "AAAAAAGAPAZ6f51PAmE=" + } + } + } + ], + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPAQZ0pxMviw=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + }, + "name": "type", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPAQglpxSlAw=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + }, + "name": "cap", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPAQjTpxYRgc=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + }, + "name": "color", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPAQlXpxeKLg=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + }, + "name": "join", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPAQnhpxkzMk=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + }, + "name": "marker", + "type": "LineSymbolMarker" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPAQprpxqv+k=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + }, + "name": "miterLimit", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPAQr7pxwm+c=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + }, + "name": "style", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPAQuFpx2vEw=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + }, + "name": "width", + "type": "" + } + ], + "operations": [ + { + "_type": "UMLOperation", + "_id": "AAAAAAGAPCvaqK3lziY=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + }, + "name": "clone" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAPCvhf64bbOg=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + }, + "name": "fromJSON" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAPCvkHq4/nNg=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + }, + "name": "toJSON" + } + ] + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAPAZ6f51PAmE=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "LineSymbolMarker", + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPAad+p2dGzE=", + "_parent": { + "$ref": "AAAAAAGAPAZ6f51PAmE=" + }, + "name": "type", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPAakl5275T8=", + "_parent": { + "$ref": "AAAAAAGAPAZ6f51PAmE=" + }, + "name": "color", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPAamt53QDe4=", + "_parent": { + "$ref": "AAAAAAGAPAZ6f51PAmE=" + }, + "name": "placement", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPAapL53l9Sc=", + "_parent": { + "$ref": "AAAAAAGAPAZ6f51PAmE=" + }, + "name": "style", + "type": "" + } + ] + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAPBd73aHqdKY=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "PictureMarkerSymbol", + "ownedElements": [ + { + "_type": "UMLGeneralization", + "_id": "AAAAAAGAPBeg7KJvEiE=", + "_parent": { + "$ref": "AAAAAAGAPBd73aHqdKY=" + }, + "source": { + "$ref": "AAAAAAGAPBd73aHqdKY=" + }, + "target": { + "$ref": "AAAAAAGAO4K5hVAX2y8=" + } + } + ], + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPBe8CaLygzQ=", + "_parent": { + "$ref": "AAAAAAGAPBd73aHqdKY=" + }, + "name": "type", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPBfC3qMo4vU=", + "_parent": { + "$ref": "AAAAAAGAPBd73aHqdKY=" + }, + "name": "angle", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPBfFsKNMfiQ=", + "_parent": { + "$ref": "AAAAAAGAPBd73aHqdKY=" + }, + "name": "height", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPBfH9qNwFW8=", + "_parent": { + "$ref": "AAAAAAGAPBd73aHqdKY=" + }, + "name": "url", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPBfKDqOUl0Y=", + "_parent": { + "$ref": "AAAAAAGAPBd73aHqdKY=" + }, + "name": "width", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPBfMJqO4ULE=", + "_parent": { + "$ref": "AAAAAAGAPBd73aHqdKY=" + }, + "name": "xoffset", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPBfOZ6Pcm9c=", + "_parent": { + "$ref": "AAAAAAGAPBd73aHqdKY=" + }, + "name": "yoffset", + "type": "" + } + ], + "operations": [ + { + "_type": "UMLOperation", + "_id": "AAAAAAGAPBet6aK8jQc=", + "_parent": { + "$ref": "AAAAAAGAPBd73aHqdKY=" + }, + "name": "clone" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAPBhvx6Wusf8=", + "_parent": { + "$ref": "AAAAAAGAPBd73aHqdKY=" + }, + "name": "fromJSON" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAPBhx56XShSk=", + "_parent": { + "$ref": "AAAAAAGAPBd73aHqdKY=" + }, + "name": "toJSON" + } + ] + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAPCD456eWclQ=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "FillSymbol", + "ownedElements": [ + { + "_type": "UMLGeneralization", + "_id": "AAAAAAGAPCEOb6gbYVs=", + "_parent": { + "$ref": "AAAAAAGAPCD456eWclQ=" + }, + "source": { + "$ref": "AAAAAAGAPCD456eWclQ=" + }, + "target": { + "$ref": "AAAAAAGAO1MYeU/HxR0=" + } + } + ], + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPCEdKahoOMM=", + "_parent": { + "$ref": "AAAAAAGAPCD456eWclQ=" + }, + "name": "type", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPCEmEKiwQC0=", + "_parent": { + "$ref": "AAAAAAGAPCD456eWclQ=" + }, + "name": "outline", + "type": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + } + } + ], + "operations": [ + { + "_type": "UMLOperation", + "_id": "AAAAAAGAPCEvg6jm2cI=", + "_parent": { + "$ref": "AAAAAAGAPCD456eWclQ=" + }, + "name": "fromJSON" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAPCE2f6kc9N4=", + "_parent": { + "$ref": "AAAAAAGAPCD456eWclQ=" + }, + "name": "toJSON" + } + ], + "isAbstract": true + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAPCnyRqqQR0M=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "SimpleFillSymbol", + "ownedElements": [ + { + "_type": "UMLGeneralization", + "_id": "AAAAAAGAPCwoxq9lm94=", + "_parent": { + "$ref": "AAAAAAGAPCnyRqqQR0M=" + }, + "source": { + "$ref": "AAAAAAGAPCnyRqqQR0M=" + }, + "target": { + "$ref": "AAAAAAGAPCD456eWclQ=" + } + }, + { + "_type": "UMLAssociation", + "_id": "AAAAAAGAPQTeDH3yZgM=", + "_parent": { + "$ref": "AAAAAAGAPCnyRqqQR0M=" + }, + "end1": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAPQTeDH3zm0M=", + "_parent": { + "$ref": "AAAAAAGAPQTeDH3yZgM=" + }, + "reference": { + "$ref": "AAAAAAGAPCnyRqqQR0M=" + }, + "navigable": false + }, + "end2": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAPQTeDH30fcw=", + "_parent": { + "$ref": "AAAAAAGAPQTeDH3yZgM=" + }, + "reference": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + } + } + } + ], + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPCqTEauYd9c=", + "_parent": { + "$ref": "AAAAAAGAPCnyRqqQR0M=" + }, + "name": "type", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPCqZd6vOxgQ=", + "_parent": { + "$ref": "AAAAAAGAPCnyRqqQR0M=" + }, + "name": "color", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPCqcjqvys9Y=", + "_parent": { + "$ref": "AAAAAAGAPCnyRqqQR0M=" + }, + "name": "outline", + "type": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + } + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPCqfd6wWjho=", + "_parent": { + "$ref": "AAAAAAGAPCnyRqqQR0M=" + }, + "name": "style", + "type": "" + } + ], + "operations": [ + { + "_type": "UMLOperation", + "_id": "AAAAAAGAPCp84qsIizc=", + "_parent": { + "$ref": "AAAAAAGAPCnyRqqQR0M=" + }, + "name": "clone" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAPCqEt6s+HlI=", + "_parent": { + "$ref": "AAAAAAGAPCnyRqqQR0M=" + }, + "name": "fromJSON" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAPCqIjqtiAxk=", + "_parent": { + "$ref": "AAAAAAGAPCnyRqqQR0M=" + }, + "name": "toJSON" + } + ] + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAPQMJ6nhGP6w=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "PictureFillSymbol", + "ownedElements": [ + { + "_type": "UMLGeneralization", + "_id": "AAAAAAGAPQQ/rX0Sm58=", + "_parent": { + "$ref": "AAAAAAGAPQMJ6nhGP6w=" + }, + "source": { + "$ref": "AAAAAAGAPQMJ6nhGP6w=" + }, + "target": { + "$ref": "AAAAAAGAPCD456eWclQ=" + } + }, + { + "_type": "UMLAssociation", + "_id": "AAAAAAGAPQTsGX5l7I8=", + "_parent": { + "$ref": "AAAAAAGAPQMJ6nhGP6w=" + }, + "end1": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAPQTsGX5mdOE=", + "_parent": { + "$ref": "AAAAAAGAPQTsGX5l7I8=" + }, + "reference": { + "$ref": "AAAAAAGAPQMJ6nhGP6w=" + }, + "navigable": false + }, + "end2": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAPQTsGX5nfsI=", + "_parent": { + "$ref": "AAAAAAGAPQTsGX5l7I8=" + }, + "reference": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + } + } + } + ], + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPQM7WHi4dEU=", + "_parent": { + "$ref": "AAAAAAGAPQMJ6nhGP6w=" + }, + "name": "type", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPQNDuXjuWOY=", + "_parent": { + "$ref": "AAAAAAGAPQMJ6nhGP6w=" + }, + "name": "height", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPQNF6nkSbuY=", + "_parent": { + "$ref": "AAAAAAGAPQMJ6nhGP6w=" + }, + "name": "outline", + "type": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + } + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPQNIonk2nHk=", + "_parent": { + "$ref": "AAAAAAGAPQMJ6nhGP6w=" + }, + "name": "url", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPQNKhXlabsA=", + "_parent": { + "$ref": "AAAAAAGAPQMJ6nhGP6w=" + }, + "name": "width", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPQNMP3l+opg=", + "_parent": { + "$ref": "AAAAAAGAPQMJ6nhGP6w=" + }, + "name": "xoffset", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPQNOl3miql8=", + "_parent": { + "$ref": "AAAAAAGAPQMJ6nhGP6w=" + }, + "name": "xscale", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPQNQUnnGgkw=", + "_parent": { + "$ref": "AAAAAAGAPQMJ6nhGP6w=" + }, + "name": "yoffset", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPQNVK3oOyW0=", + "_parent": { + "$ref": "AAAAAAGAPQMJ6nhGP6w=" + }, + "name": "yscale", + "type": "" + } + ], + "operations": [ + { + "_type": "UMLOperation", + "_id": "AAAAAAGAPQP0jXviawc=", + "_parent": { + "$ref": "AAAAAAGAPQMJ6nhGP6w=" + }, + "name": "clone" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAPQP6OHwYjDU=", + "_parent": { + "$ref": "AAAAAAGAPQMJ6nhGP6w=" + }, + "name": "fromJSON" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAPQP8/nw8tdI=", + "_parent": { + "$ref": "AAAAAAGAPQMJ6nhGP6w=" + }, + "name": "toJSON" + } + ] + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAPQff+YT2kWw=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "TextSymbol", + "ownedElements": [ + { + "_type": "UMLGeneralization", + "_id": "AAAAAAGAPQhWsoWl3dc=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "source": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "target": { + "$ref": "AAAAAAGAO1MYeU/HxR0=" + } + }, + { + "_type": "UMLAssociation", + "_id": "AAAAAAGAPS6KpKbbg5c=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "end1": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAPS6KpKbc4jk=", + "_parent": { + "$ref": "AAAAAAGAPS6KpKbbg5c=" + }, + "reference": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "navigable": false + }, + "end2": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAPS6KpKbd/TA=", + "_parent": { + "$ref": "AAAAAAGAPS6KpKbbg5c=" + }, + "reference": { + "$ref": "AAAAAAGAPS3xX6LyqAQ=" + } + } + } + ], + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPSAICJA6v/o=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "name": "type", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPSAOIJCgc6M=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "name": "angle", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPSAQ2ZDiIF4=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "name": "backgroundColor", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPSATI5Ek4IM=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "name": "borderLineColor", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPSAVEZFmIR8=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "name": "borderLineSize", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPSAXEZGod8M=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "name": "color", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPSAZV5HqksU=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "name": "font", + "type": "Font" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPSAcR5Is1X4=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "name": "haloColor", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPSAeRZJuhG0=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "name": "haloSize", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPSAgi5KwfFQ=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "name": "horizontalAlignment", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPSAitpLy8xw=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "name": "kerning", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPSAk2pM04uU=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "name": "lineHeight", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPSAnFJN2K9s=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "name": "lineWidth", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPSApNZO4TrY=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "name": "rotated", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPSDpSpiG08U=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "name": "text", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPSDyipkENGA=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "name": "verticalAlignment", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPSD1fJlGhvw=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "name": "xoffset", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPSFIs5ttMYs=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "name": "yoffset", + "type": "" + } + ], + "operations": [ + { + "_type": "UMLOperation", + "_id": "AAAAAAGAPR/v2o8IG9I=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "name": "clone" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAPR/81I+SarM=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "name": "fromJSON" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAPR//MI/UW7w=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "name": "toJSON" + } + ] + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAPS3xX6LyqAQ=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "Font", + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPS4SfqOsEp4=", + "_parent": { + "$ref": "AAAAAAGAPS3xX6LyqAQ=" + }, + "name": "decoration", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPS4ZY6QSK9k=", + "_parent": { + "$ref": "AAAAAAGAPS3xX6LyqAQ=" + }, + "name": "family", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPS4b4KRUp0w=", + "_parent": { + "$ref": "AAAAAAGAPS3xX6LyqAQ=" + }, + "name": "size", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPS4eKqSWMIQ=", + "_parent": { + "$ref": "AAAAAAGAPS3xX6LyqAQ=" + }, + "name": "style", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPS4gOqTYZto=", + "_parent": { + "$ref": "AAAAAAGAPS3xX6LyqAQ=" + }, + "name": "weight", + "type": "" + } + ], + "operations": [ + { + "_type": "UMLOperation", + "_id": "AAAAAAGAPS8boazWojk=", + "_parent": { + "$ref": "AAAAAAGAPS3xX6LyqAQ=" + }, + "name": "clone" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAPS8jDq1UJEA=", + "_parent": { + "$ref": "AAAAAAGAPS3xX6LyqAQ=" + }, + "name": "fromJSON" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAPS8lYK2li7A=", + "_parent": { + "$ref": "AAAAAAGAPS3xX6LyqAQ=" + }, + "name": "toJSON" + } + ] + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAP6S168jGsxA=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "Symbol3D", + "ownedElements": [ + { + "_type": "UMLGeneralization", + "_id": "AAAAAAGAP6VdPsoeetU=", + "_parent": { + "$ref": "AAAAAAGAP6S168jGsxA=" + }, + "source": { + "$ref": "AAAAAAGAP6S168jGsxA=" + }, + "target": { + "$ref": "AAAAAAGAO1MYeU/HxR0=" + } + }, + { + "_type": "UMLAssociation", + "_id": "AAAAAAGAP9XAwkPrzU4=", + "_parent": { + "$ref": "AAAAAAGAP6S168jGsxA=" + }, + "end1": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAP9XAwkPs9B8=", + "_parent": { + "$ref": "AAAAAAGAP9XAwkPrzU4=" + }, + "reference": { + "$ref": "AAAAAAGAP6S168jGsxA=" + }, + "navigable": false + }, + "end2": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAP9XAwkPtw8Y=", + "_parent": { + "$ref": "AAAAAAGAP9XAwkPrzU4=" + }, + "reference": { + "$ref": "AAAAAAGAP8/5/D2x644=" + } + } + } + ], + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAP6bx38w7uLM=", + "_parent": { + "$ref": "AAAAAAGAP6S168jGsxA=" + }, + "name": "type", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAP6bpOstslHY=", + "_parent": { + "$ref": "AAAAAAGAP6S168jGsxA=" + }, + "name": "styleOrigin", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAP6bvnMvqZyg=", + "_parent": { + "$ref": "AAAAAAGAP6S168jGsxA=" + }, + "name": "symbolLayers", + "type": { + "$ref": "AAAAAAGAP8/5/D2x644=" + } + } + ] + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAP8/5/D2x644=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "Symbol3DLayer", + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAP9VqWEBDC5M=", + "_parent": { + "$ref": "AAAAAAGAP8/5/D2x644=" + }, + "name": "type", + "type": "" + } + ], + "operations": [ + { + "_type": "UMLOperation", + "_id": "AAAAAAGAP9WNLEGF+44=", + "_parent": { + "$ref": "AAAAAAGAP8/5/D2x644=" + }, + "name": "fromJSON" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAP9WlJEMSNXw=", + "_parent": { + "$ref": "AAAAAAGAP8/5/D2x644=" + }, + "name": "toJSON" + } + ] + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAQHO4GV0oLfI=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "PointSymbol3D", + "ownedElements": [ + { + "_type": "UMLGeneralization", + "_id": "AAAAAAGAQHbWNI6eATI=", + "_parent": { + "$ref": "AAAAAAGAQHO4GV0oLfI=" + }, + "source": { + "$ref": "AAAAAAGAQHO4GV0oLfI=" + }, + "target": { + "$ref": "AAAAAAGAP6S168jGsxA=" + } + }, + { + "_type": "UMLAssociation", + "_id": "AAAAAAGAQHpofreL/lM=", + "_parent": { + "$ref": "AAAAAAGAQHO4GV0oLfI=" + }, + "end1": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQHpofreMF+Y=", + "_parent": { + "$ref": "AAAAAAGAQHpofreL/lM=" + }, + "reference": { + "$ref": "AAAAAAGAQHO4GV0oLfI=" + }, + "navigable": false + }, + "end2": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQHpofreNRd8=", + "_parent": { + "$ref": "AAAAAAGAQHpofreL/lM=" + }, + "reference": { + "$ref": "AAAAAAGAQHci6o8tBGM=" + } + } + }, + { + "_type": "UMLAssociation", + "_id": "AAAAAAGAQPx5Lwegxog=", + "_parent": { + "$ref": "AAAAAAGAQHO4GV0oLfI=" + }, + "end1": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQPx5LwehMeE=", + "_parent": { + "$ref": "AAAAAAGAQPx5Lwegxog=" + }, + "reference": { + "$ref": "AAAAAAGAQHO4GV0oLfI=" + }, + "navigable": false + }, + "end2": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQPx5LweiweU=", + "_parent": { + "$ref": "AAAAAAGAQPx5Lwegxog=" + }, + "reference": { + "$ref": "AAAAAAGAQPnVfurDxP4=" + } + } + }, + { + "_type": "UMLAssociation", + "_id": "AAAAAAGAQPyJKAjcvoE=", + "_parent": { + "$ref": "AAAAAAGAQHO4GV0oLfI=" + }, + "end1": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQPyJKAjdEa4=", + "_parent": { + "$ref": "AAAAAAGAQPyJKAjcvoE=" + }, + "reference": { + "$ref": "AAAAAAGAQHO4GV0oLfI=" + }, + "navigable": false + }, + "end2": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQPyJKAjecM4=", + "_parent": { + "$ref": "AAAAAAGAQPyJKAjcvoE=" + }, + "reference": { + "$ref": "AAAAAAGAQLns6Jmj0x4=" + } + } + } + ], + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQHPbk14qDNA=", + "_parent": { + "$ref": "AAAAAAGAQHO4GV0oLfI=" + }, + "name": "type", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQHPo018aeJo=", + "_parent": { + "$ref": "AAAAAAGAQHO4GV0oLfI=" + }, + "name": "callout", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQHPq7F96x14=", + "_parent": { + "$ref": "AAAAAAGAQHO4GV0oLfI=" + }, + "name": "styleOrigin", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQHPtAV/aljM=", + "_parent": { + "$ref": "AAAAAAGAQHO4GV0oLfI=" + }, + "name": "symbolLayers", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQHPuxGA6UBk=", + "_parent": { + "$ref": "AAAAAAGAQHO4GV0oLfI=" + }, + "name": "verticalOffset", + "type": "" + } + ], + "operations": [ + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQHYPZmRQTEw=", + "_parent": { + "$ref": "AAAAAAGAQHO4GV0oLfI=" + }, + "name": "clone" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQHYVz2Tm/qo=", + "_parent": { + "$ref": "AAAAAAGAQHO4GV0oLfI=" + }, + "name": "fromJSON" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQHYYN2VGn1k=", + "_parent": { + "$ref": "AAAAAAGAQHO4GV0oLfI=" + }, + "name": "toJSON" + } + ] + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAQHci6o8tBGM=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "IconSymbol3DLayer", + "ownedElements": [ + { + "_type": "UMLGeneralization", + "_id": "AAAAAAGAQHcyhZBm0hs=", + "_parent": { + "$ref": "AAAAAAGAQHci6o8tBGM=" + }, + "source": { + "$ref": "AAAAAAGAQHci6o8tBGM=" + }, + "target": { + "$ref": "AAAAAAGAP8/5/D2x644=" + } + } + ], + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQHiR5aDzLYY=", + "_parent": { + "$ref": "AAAAAAGAQHci6o8tBGM=" + }, + "name": "type", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQHiYP6GJhto=", + "_parent": { + "$ref": "AAAAAAGAQHci6o8tBGM=" + }, + "name": "anchor", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQHiaNaHpMeE=", + "_parent": { + "$ref": "AAAAAAGAQHci6o8tBGM=" + }, + "name": "anchorPosition", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQHicC6JJ2ps=", + "_parent": { + "$ref": "AAAAAAGAQHci6o8tBGM=" + }, + "name": "material", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQHidd6KpQY0=", + "_parent": { + "$ref": "AAAAAAGAQHci6o8tBGM=" + }, + "name": "outline", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQHifkKMJgeQ=", + "_parent": { + "$ref": "AAAAAAGAQHci6o8tBGM=" + }, + "name": "resource", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQHihOaNp1o4=", + "_parent": { + "$ref": "AAAAAAGAQHci6o8tBGM=" + }, + "name": "size", + "type": "" + } + ], + "operations": [ + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQHlBEamVlhM=", + "_parent": { + "$ref": "AAAAAAGAQHci6o8tBGM=" + }, + "name": "clone" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQHlHU6orzwA=", + "_parent": { + "$ref": "AAAAAAGAQHci6o8tBGM=" + }, + "name": "fromJSON" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQHlJbKqLtE0=", + "_parent": { + "$ref": "AAAAAAGAQHci6o8tBGM=" + }, + "name": "toJSON" + } + ] + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAQI6jF+ainB0=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "LineSymbol3D", + "ownedElements": [ + { + "_type": "UMLGeneralization", + "_id": "AAAAAAGAQJBZ8ACM7PY=", + "_parent": { + "$ref": "AAAAAAGAQI6jF+ainB0=" + }, + "source": { + "$ref": "AAAAAAGAQI6jF+ainB0=" + }, + "target": { + "$ref": "AAAAAAGAP6S168jGsxA=" + } + }, + { + "_type": "UMLAssociation", + "_id": "AAAAAAGAQJB91wHUuZ8=", + "_parent": { + "$ref": "AAAAAAGAQI6jF+ainB0=" + }, + "end1": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQJB91wHV5+E=", + "_parent": { + "$ref": "AAAAAAGAQJB91wHUuZ8=" + }, + "reference": { + "$ref": "AAAAAAGAQI6jF+ainB0=" + }, + "navigable": false + }, + "end2": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQJB91wHWZ0U=", + "_parent": { + "$ref": "AAAAAAGAQJB91wHUuZ8=" + }, + "reference": { + "$ref": "AAAAAAGAQI6qsOc0DIE=" + } + } + }, + { + "_type": "UMLAssociation", + "_id": "AAAAAAGAQQzoZWpmJZ0=", + "_parent": { + "$ref": "AAAAAAGAQI6jF+ainB0=" + }, + "end1": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQQzoZWpnhlg=", + "_parent": { + "$ref": "AAAAAAGAQQzoZWpmJZ0=" + }, + "reference": { + "$ref": "AAAAAAGAQI6jF+ainB0=" + }, + "navigable": false + }, + "end2": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQQzoZWposbQ=", + "_parent": { + "$ref": "AAAAAAGAQQzoZWpmJZ0=" + }, + "reference": { + "$ref": "AAAAAAGAQQuTLUb/9Rg=" + } + } + } + ], + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQI7RO+gvDaw=", + "_parent": { + "$ref": "AAAAAAGAQI6jF+ainB0=" + }, + "name": "type", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQI7YIujdTVQ=", + "_parent": { + "$ref": "AAAAAAGAQI6jF+ainB0=" + }, + "name": "styleOrigin", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQI7fHum1PPw=", + "_parent": { + "$ref": "AAAAAAGAQI6jF+ainB0=" + }, + "name": "symbolLayers", + "type": "" + } + ], + "operations": [ + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQI83Pu60uKU=", + "_parent": { + "$ref": "AAAAAAGAQI6jF+ainB0=" + }, + "name": "clone" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQI89iO9irzg=", + "_parent": { + "$ref": "AAAAAAGAQI6jF+ainB0=" + }, + "name": "fromJSON" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQI8/v+/RXtM=", + "_parent": { + "$ref": "AAAAAAGAQI6jF+ainB0=" + }, + "name": "toJSON" + } + ] + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAQI6qsOc0DIE=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "LineSymbol3DLayer", + "ownedElements": [ + { + "_type": "UMLGeneralization", + "_id": "AAAAAAGAQJBpFAEwA94=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc0DIE=" + }, + "source": { + "$ref": "AAAAAAGAQI6qsOc0DIE=" + }, + "target": { + "$ref": "AAAAAAGAP8/5/D2x644=" + } + } + ], + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQI/Ms/fm62A=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc0DIE=" + }, + "name": "type", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQI/SxfiUCXU=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc0DIE=" + }, + "name": "cap", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQI/U9/kDTG0=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc0DIE=" + }, + "name": "join", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQI/W6PlyuF4=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc0DIE=" + }, + "name": "marker", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQI/x4vseoP0=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc0DIE=" + }, + "name": "material", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQI/0MvuNWWU=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc0DIE=" + }, + "name": "pattern", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQI/2Efv8elc=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc0DIE=" + }, + "name": "size", + "type": "" + } + ], + "operations": [ + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQI+28vXcViw=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc0DIE=" + }, + "name": "clone" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQI/BU/bJXC8=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc0DIE=" + }, + "name": "fromJSON" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQI/Do/c45mg=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc0DIE=" + }, + "name": "toJSON" + } + ] + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAQJPNQDjoUDE=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "PolygonSymbol3D", + "ownedElements": [ + { + "_type": "UMLGeneralization", + "_id": "AAAAAAGAQJR3UUvMi3E=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "source": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "target": { + "$ref": "AAAAAAGAP6S168jGsxA=" + } + }, + { + "_type": "UMLAssociation", + "_id": "AAAAAAGAQKMnaHQbRW0=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "end1": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQKMnaHQc7Rs=", + "_parent": { + "$ref": "AAAAAAGAQKMnaHQbRW0=" + }, + "reference": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "navigable": false + }, + "end2": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQKMnaHQdqUs=", + "_parent": { + "$ref": "AAAAAAGAQKMnaHQbRW0=" + }, + "reference": { + "$ref": "AAAAAAGAQKIeqWLtb7A=" + } + } + }, + { + "_type": "UMLAssociation", + "_id": "AAAAAAGAQYq/foRzh3g=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "end1": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQYq/foR06rU=", + "_parent": { + "$ref": "AAAAAAGAQYq/foRzh3g=" + }, + "reference": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "navigable": false + }, + "end2": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQYq/foR197U=", + "_parent": { + "$ref": "AAAAAAGAQYq/foRzh3g=" + }, + "reference": { + "$ref": "AAAAAAGAQYqXdX+0wEk=" + } + } + }, + { + "_type": "UMLAssociation", + "_id": "AAAAAAGAQZEEMGQvP4A=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "end1": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQZEEMGQwxWs=", + "_parent": { + "$ref": "AAAAAAGAQZEEMGQvP4A=" + }, + "reference": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "navigable": false + }, + "end2": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQZEEMGQx3vs=", + "_parent": { + "$ref": "AAAAAAGAQZEEMGQvP4A=" + }, + "reference": { + "$ref": "AAAAAAGAQPnVfurDxP4=" + } + } + }, + { + "_type": "UMLAssociation", + "_id": "AAAAAAGAQZEYe2XL0XM=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "end1": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQZEYe2XM+rA=", + "_parent": { + "$ref": "AAAAAAGAQZEYe2XL0XM=" + }, + "reference": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "navigable": false + }, + "end2": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQZEYe2XNnz8=", + "_parent": { + "$ref": "AAAAAAGAQZEYe2XL0XM=" + }, + "reference": { + "$ref": "AAAAAAGAQQuTLUb/9Rg=" + } + } + }, + { + "_type": "UMLAssociation", + "_id": "AAAAAAGAQZE2+md/zbs=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "end1": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQZE2+meABCg=", + "_parent": { + "$ref": "AAAAAAGAQZE2+md/zbs=" + }, + "reference": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "navigable": false + }, + "end2": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQZE2+meB18I=", + "_parent": { + "$ref": "AAAAAAGAQZE2+md/zbs=" + }, + "reference": { + "$ref": "AAAAAAGAQHci6o8tBGM=" + } + } + }, + { + "_type": "UMLAssociation", + "_id": "AAAAAAGAQZOWEGpZGhg=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "end1": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQZOWEGpaZS4=", + "_parent": { + "$ref": "AAAAAAGAQZOWEGpZGhg=" + }, + "reference": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "navigable": false + }, + "end2": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQZOWEGpb1vk=", + "_parent": { + "$ref": "AAAAAAGAQZOWEGpZGhg=" + }, + "reference": { + "$ref": "AAAAAAGAQLns6Jmj0x4=" + } + } + }, + { + "_type": "UMLAssociation", + "_id": "AAAAAAGAQZO4TGvycxc=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "end1": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQZO4TGvzO6Q=", + "_parent": { + "$ref": "AAAAAAGAQZO4TGvycxc=" + }, + "reference": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "navigable": false + }, + "end2": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQZO4TGv03hE=", + "_parent": { + "$ref": "AAAAAAGAQZO4TGvycxc=" + }, + "reference": { + "$ref": "AAAAAAGAQI6qsOc0DIE=" + } + } + } + ], + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQJPvrzoyMNs=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "name": "type", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQJP6pjtAYNM=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "name": "styleOrigin", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQJP8/ju+xJc=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "name": "symbolLayers", + "type": "" + } + ], + "operations": [ + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQJQJTTy0Pz0=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "name": "clone" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQJQP+D16Vf8=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "name": "fromJSON" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQJQSWz34cwY=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "name": "toJSON" + } + ] + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAQKIeqWLtb7A=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "FillSymbol3DLayer", + "ownedElements": [ + { + "_type": "UMLGeneralization", + "_id": "AAAAAAGAQKMeBnOSzgA=", + "_parent": { + "$ref": "AAAAAAGAQKIeqWLtb7A=" + }, + "source": { + "$ref": "AAAAAAGAQKIeqWLtb7A=" + }, + "target": { + "$ref": "AAAAAAGAP8/5/D2x644=" + } + } + ], + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQKKn5Gwwvc4=", + "_parent": { + "$ref": "AAAAAAGAQKIeqWLtb7A=" + }, + "name": "type", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQKKt/Wz2iEA=", + "_parent": { + "$ref": "AAAAAAGAQKIeqWLtb7A=" + }, + "name": "castShadows", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQKKv4210K3A=", + "_parent": { + "$ref": "AAAAAAGAQKIeqWLtb7A=" + }, + "name": "edges", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQKKymW3yL3A=", + "_parent": { + "$ref": "AAAAAAGAQKIeqWLtb7A=" + }, + "name": "material", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQKK0i25wkdY=", + "_parent": { + "$ref": "AAAAAAGAQKIeqWLtb7A=" + }, + "name": "outline", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQKK2bm7uffg=", + "_parent": { + "$ref": "AAAAAAGAQKIeqWLtb7A=" + }, + "name": "pattern", + "type": "" + } + ], + "operations": [ + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQKI2N2RPsfU=", + "_parent": { + "$ref": "AAAAAAGAQKIeqWLtb7A=" + }, + "name": "clone" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQKI9kGUVE0M=", + "_parent": { + "$ref": "AAAAAAGAQKIeqWLtb7A=" + }, + "name": "fromJSON" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQKI/4mWTMrg=", + "_parent": { + "$ref": "AAAAAAGAQKIeqWLtb7A=" + }, + "name": "toJSON" + } + ] + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAQLjRBoVK/Ro=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "LabelSymbol3D", + "ownedElements": [ + { + "_type": "UMLGeneralization", + "_id": "AAAAAAGAQLnZqZjVkdk=", + "_parent": { + "$ref": "AAAAAAGAQLjRBoVK/Ro=" + }, + "source": { + "$ref": "AAAAAAGAQLjRBoVK/Ro=" + }, + "target": { + "$ref": "AAAAAAGAP6S168jGsxA=" + } + }, + { + "_type": "UMLAssociation", + "_id": "AAAAAAGAQLsG/7AAptg=", + "_parent": { + "$ref": "AAAAAAGAQLjRBoVK/Ro=" + }, + "end1": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQLsG/7ABSMo=", + "_parent": { + "$ref": "AAAAAAGAQLsG/7AAptg=" + }, + "reference": { + "$ref": "AAAAAAGAQLjRBoVK/Ro=" + }, + "navigable": false + }, + "end2": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQLsG/7ACCWw=", + "_parent": { + "$ref": "AAAAAAGAQLsG/7AAptg=" + }, + "reference": { + "$ref": "AAAAAAGAQLns6Jmj0x4=" + } + } + } + ], + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQLkJF4qC7uw=", + "_parent": { + "$ref": "AAAAAAGAQLjRBoVK/Ro=" + }, + "name": "type", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQLkPq4tgUdM=", + "_parent": { + "$ref": "AAAAAAGAQLjRBoVK/Ro=" + }, + "name": "callout", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQLkRqYvtqAE=", + "_parent": { + "$ref": "AAAAAAGAQLjRBoVK/Ro=" + }, + "name": "styleOrigin", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQLkT24x6g2s=", + "_parent": { + "$ref": "AAAAAAGAQLjRBoVK/Ro=" + }, + "name": "symbolLayers", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQLkWVo0H4Q8=", + "_parent": { + "$ref": "AAAAAAGAQLjRBoVK/Ro=" + }, + "name": "verticalOffset", + "type": "" + } + ], + "operations": [ + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQLjff4a4sxM=", + "_parent": { + "$ref": "AAAAAAGAQLjRBoVK/Ro=" + }, + "name": "clone" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQLjlyoeW4cw=", + "_parent": { + "$ref": "AAAAAAGAQLjRBoVK/Ro=" + }, + "name": "fromJSON" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQLjoBYgjCv8=", + "_parent": { + "$ref": "AAAAAAGAQLjRBoVK/Ro=" + }, + "name": "toJSON" + } + ] + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAQLns6Jmj0x4=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "TextSymbol3DLayer", + "ownedElements": [ + { + "_type": "UMLGeneralization", + "_id": "AAAAAAGAQLsTnLEG5Uo=", + "_parent": { + "$ref": "AAAAAAGAQLns6Jmj0x4=" + }, + "source": { + "$ref": "AAAAAAGAQLns6Jmj0x4=" + }, + "target": { + "$ref": "AAAAAAGAP8/5/D2x644=" + } + } + ], + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQLoWJ5tje4c=", + "_parent": { + "$ref": "AAAAAAGAQLns6Jmj0x4=" + }, + "name": "type", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQLocVpxB5AM=", + "_parent": { + "$ref": "AAAAAAGAQLns6Jmj0x4=" + }, + "name": "background", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQLofAJzO1GA=", + "_parent": { + "$ref": "AAAAAAGAQLns6Jmj0x4=" + }, + "name": "font", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQLog4Z1bzo4=", + "_parent": { + "$ref": "AAAAAAGAQLns6Jmj0x4=" + }, + "name": "halo", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQLojE53omX0=", + "_parent": { + "$ref": "AAAAAAGAQLns6Jmj0x4=" + }, + "name": "horizontalAlignment", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQLolVZ51Tdg=", + "_parent": { + "$ref": "AAAAAAGAQLns6Jmj0x4=" + }, + "name": "lineHeight", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQLonSp8CGas=", + "_parent": { + "$ref": "AAAAAAGAQLns6Jmj0x4=" + }, + "name": "material", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQLopjp+PrHs=", + "_parent": { + "$ref": "AAAAAAGAQLns6Jmj0x4=" + }, + "name": "size", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQLor6qAcWyY=", + "_parent": { + "$ref": "AAAAAAGAQLns6Jmj0x4=" + }, + "name": "text", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQLq7GahmsQQ=", + "_parent": { + "$ref": "AAAAAAGAQLns6Jmj0x4=" + }, + "name": "verticalAlignment", + "type": "" + } + ], + "operations": [ + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQLrMV6o4fWE=", + "_parent": { + "$ref": "AAAAAAGAQLns6Jmj0x4=" + }, + "name": "clone" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQLrSt6sWGnA=", + "_parent": { + "$ref": "AAAAAAGAQLns6Jmj0x4=" + }, + "name": "fromJSON" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQLrU4qujo+U=", + "_parent": { + "$ref": "AAAAAAGAQLns6Jmj0x4=" + }, + "name": "toJSON" + } + ] + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAQPnVfurDxP4=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "ObjectSymbol3DLayer", + "ownedElements": [ + { + "_type": "UMLGeneralization", + "_id": "AAAAAAGAQP3ZlkBMubY=", + "_parent": { + "$ref": "AAAAAAGAQPnVfurDxP4=" + }, + "source": { + "$ref": "AAAAAAGAQPnVfurDxP4=" + }, + "target": { + "$ref": "AAAAAAGAP8/5/D2x644=" + } + } + ], + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQPop+u2+iXY=", + "_parent": { + "$ref": "AAAAAAGAQPnVfurDxP4=" + }, + "name": "type", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQPozEe604dA=", + "_parent": { + "$ref": "AAAAAAGAQPnVfurDxP4=" + }, + "name": "anchor", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQPo2Gu9Q5Ck=", + "_parent": { + "$ref": "AAAAAAGAQPnVfurDxP4=" + }, + "name": "anchorPosition", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQPo4he/sG20=", + "_parent": { + "$ref": "AAAAAAGAQPnVfurDxP4=" + }, + "name": "castShadows", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQPo66/CIc7k=", + "_parent": { + "$ref": "AAAAAAGAQPnVfurDxP4=" + }, + "name": "depth", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQPo9LPEkQrk=", + "_parent": { + "$ref": "AAAAAAGAQPnVfurDxP4=" + }, + "name": "heading", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQPo/TvHAQDk=", + "_parent": { + "$ref": "AAAAAAGAQPnVfurDxP4=" + }, + "name": "height", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQPpBxPJcIdQ=", + "_parent": { + "$ref": "AAAAAAGAQPnVfurDxP4=" + }, + "name": "material", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQPpEefL4VGc=", + "_parent": { + "$ref": "AAAAAAGAQPnVfurDxP4=" + }, + "name": "resource", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQPsGafyFSfs=", + "_parent": { + "$ref": "AAAAAAGAQPnVfurDxP4=" + }, + "name": "roll", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQPsIyv0hvRE=", + "_parent": { + "$ref": "AAAAAAGAQPnVfurDxP4=" + }, + "name": "tilt", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQPsLH/2976o=", + "_parent": { + "$ref": "AAAAAAGAQPnVfurDxP4=" + }, + "name": "width", + "type": "" + } + ] + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAQQuTLUb/9Rg=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "PathSymbol3DLayer", + "ownedElements": [ + { + "_type": "UMLGeneralization", + "_id": "AAAAAAGAQQz8x230K8E=", + "_parent": { + "$ref": "AAAAAAGAQQuTLUb/9Rg=" + }, + "source": { + "$ref": "AAAAAAGAQQuTLUb/9Rg=" + }, + "target": { + "$ref": "AAAAAAGAP8/5/D2x644=" + } + } + ], + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQQvIck2jTQg=", + "_parent": { + "$ref": "AAAAAAGAQQuTLUb/9Rg=" + }, + "name": "type", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQQvOlU7J+Js=", + "_parent": { + "$ref": "AAAAAAGAQQuTLUb/9Rg=" + }, + "name": "anchor", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQQvRWk+D8Kk=", + "_parent": { + "$ref": "AAAAAAGAQQuTLUb/9Rg=" + }, + "name": "cap", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQQvUBFA9SC8=", + "_parent": { + "$ref": "AAAAAAGAQQuTLUb/9Rg=" + }, + "name": "castShadows", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQQvWAFD3ufw=", + "_parent": { + "$ref": "AAAAAAGAQQuTLUb/9Rg=" + }, + "name": "height", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQQvYoVGxGiQ=", + "_parent": { + "$ref": "AAAAAAGAQQuTLUb/9Rg=" + }, + "name": "join", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQQvaulJrSXY=", + "_parent": { + "$ref": "AAAAAAGAQQuTLUb/9Rg=" + }, + "name": "material", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQQvdLlMlZuI=", + "_parent": { + "$ref": "AAAAAAGAQQuTLUb/9Rg=" + }, + "name": "profile", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQQyXzmQCWwQ=", + "_parent": { + "$ref": "AAAAAAGAQQuTLUb/9Rg=" + }, + "name": "profileRotation", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQQyayGS8q5c=", + "_parent": { + "$ref": "AAAAAAGAQQuTLUb/9Rg=" + }, + "name": "width", + "type": "" + } + ], + "operations": [ + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQQvq6VS33RQ=", + "_parent": { + "$ref": "AAAAAAGAQQuTLUb/9Rg=" + }, + "name": "clone" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQQvyP1Xdy/A=", + "_parent": { + "$ref": "AAAAAAGAQQuTLUb/9Rg=" + }, + "name": "fromJSON" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQQv1gFaXIyU=", + "_parent": { + "$ref": "AAAAAAGAQQuTLUb/9Rg=" + }, + "name": "toJSON" + } + ] + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAQYqXdX+0wEk=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "ExtrudeSymbol3DLayer", + "ownedElements": [ + { + "_type": "UMLGeneralization", + "_id": "AAAAAAGAQYrN7oX36Ng=", + "_parent": { + "$ref": "AAAAAAGAQYqXdX+0wEk=" + }, + "source": { + "$ref": "AAAAAAGAQYqXdX+0wEk=" + }, + "target": { + "$ref": "AAAAAAGAP8/5/D2x644=" + } + } + ], + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQYrs74espQ8=", + "_parent": { + "$ref": "AAAAAAGAQYqXdX+0wEk=" + }, + "name": "type", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQYr0SYkCuFQ=", + "_parent": { + "$ref": "AAAAAAGAQYqXdX+0wEk=" + }, + "name": "castShadows", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQYr27InaovU=", + "_parent": { + "$ref": "AAAAAAGAQYqXdX+0wEk=" + }, + "name": "edges", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQYr5XIqy5mU=", + "_parent": { + "$ref": "AAAAAAGAQYqXdX+0wEk=" + }, + "name": "material", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQYr+RIuK/FY=", + "_parent": { + "$ref": "AAAAAAGAQYqXdX+0wEk=" + }, + "name": "size", + "type": "" + } + ], + "operations": [ + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQYt7S5Rx0RQ=", + "_parent": { + "$ref": "AAAAAAGAQYqXdX+0wEk=" + }, + "name": "clone" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQYuCRZXHU2w=", + "_parent": { + "$ref": "AAAAAAGAQYqXdX+0wEk=" + }, + "name": "fromJSON" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQYuFBpaftPw=", + "_parent": { + "$ref": "AAAAAAGAQYqXdX+0wEk=" + }, + "name": "toJSON" + } + ] + } + ] + } + ] +} \ No newline at end of file diff --git a/src/service/uml/Symbols2D.mdj b/src/service/uml/Symbols2D.mdj new file mode 100644 index 000000000..db216675f --- /dev/null +++ b/src/service/uml/Symbols2D.mdj @@ -0,0 +1,9253 @@ +{ + "_type": "Project", + "_id": "AAAAAAFF+h6SjaM2Hec=", + "name": "Untitled", + "ownedElements": [ + { + "_type": "UMLModel", + "_id": "AAAAAAFF+qBWK6M3Z8Y=", + "_parent": { + "$ref": "AAAAAAFF+h6SjaM2Hec=" + }, + "name": "Model", + "ownedElements": [ + { + "_type": "UMLClassDiagram", + "_id": "AAAAAAFF+qBtyKM79qY=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "Main", + "defaultDiagram": true, + "ownedViews": [ + { + "_type": "UMLClassView", + "_id": "AAAAAAGAO1MYek/JnBg=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAO1MYeU/HxR0=" + }, + "subViews": [ + { + "_type": "UMLNameCompartmentView", + "_id": "AAAAAAGAO1MYek/KY2Y=", + "_parent": { + "$ref": "AAAAAAGAO1MYek/JnBg=" + }, + "model": { + "$ref": "AAAAAAGAO1MYeU/HxR0=" + }, + "subViews": [ + { + "_type": "LabelView", + "_id": "AAAAAAGAO1MYek/LgeU=", + "_parent": { + "$ref": "AAAAAAGAO1MYek/KY2Y=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2656, + "top": 1856, + "height": 13 + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAO1MYe0/M6PU=", + "_parent": { + "$ref": "AAAAAAGAO1MYek/KY2Y=" + }, + "font": "Arial;13;3", + "left": 1469, + "top": 1047, + "width": 80.57080078125, + "height": 13, + "text": "Symbol" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAO1MYe0/N9fA=", + "_parent": { + "$ref": "AAAAAAGAO1MYek/KY2Y=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2656, + "top": 1856, + "width": 73.67724609375, + "height": 13, + "text": "(from Model)" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAO1MYe0/OGZc=", + "_parent": { + "$ref": "AAAAAAGAO1MYek/KY2Y=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2656, + "top": 1856, + "height": 13, + "horizontalAlignment": 1 + } + ], + "font": "Arial;13;0", + "left": 1464, + "top": 1040, + "width": 90.57080078125, + "height": 25, + "stereotypeLabel": { + "$ref": "AAAAAAGAO1MYek/LgeU=" + }, + "nameLabel": { + "$ref": "AAAAAAGAO1MYe0/M6PU=" + }, + "namespaceLabel": { + "$ref": "AAAAAAGAO1MYe0/N9fA=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAO1MYe0/OGZc=" + } + }, + { + "_type": "UMLAttributeCompartmentView", + "_id": "AAAAAAGAO1MYe0/PFXM=", + "_parent": { + "$ref": "AAAAAAGAO1MYek/JnBg=" + }, + "model": { + "$ref": "AAAAAAGAO1MYeU/HxR0=" + }, + "subViews": [ + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAO1M4vE/0AZw=", + "_parent": { + "$ref": "AAAAAAGAO1MYe0/PFXM=" + }, + "model": { + "$ref": "AAAAAAGAO1M4mE/xJtQ=" + }, + "font": "Arial;13;0", + "left": 1469, + "top": 1070, + "width": 80.57080078125, + "height": 13, + "text": "+type", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAO1NDbU/6l7g=", + "_parent": { + "$ref": "AAAAAAGAO1MYe0/PFXM=" + }, + "model": { + "$ref": "AAAAAAGAO1NDTE/3Mpo=" + }, + "font": "Arial;13;0", + "left": 1469, + "top": 1085, + "width": 80.57080078125, + "height": 13, + "text": "+color", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAO1NF21AAY2Y=", + "_parent": { + "$ref": "AAAAAAGAO1MYe0/PFXM=" + }, + "model": { + "$ref": "AAAAAAGAO1NFuk/9tZ0=" + }, + "font": "Arial;13;0", + "left": 1469, + "top": 1100, + "width": 80.57080078125, + "height": 13, + "text": "-opacity", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 1464, + "top": 1065, + "width": 90.57080078125, + "height": 53 + }, + { + "_type": "UMLOperationCompartmentView", + "_id": "AAAAAAGAO1MYe0/Qbfc=", + "_parent": { + "$ref": "AAAAAAGAO1MYek/JnBg=" + }, + "model": { + "$ref": "AAAAAAGAO1MYeU/HxR0=" + }, + "subViews": [ + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAO1QI21AKpLU=", + "_parent": { + "$ref": "AAAAAAGAO1MYe0/Qbfc=" + }, + "model": { + "$ref": "AAAAAAGAO1QIuVAHl58=" + }, + "font": "Arial;13;0", + "left": 1469, + "top": 1123, + "width": 80.57080078125, + "height": 13, + "text": "+fromJSON()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAO1QR1VAQzNY=", + "_parent": { + "$ref": "AAAAAAGAO1MYe0/Qbfc=" + }, + "model": { + "$ref": "AAAAAAGAO1QRq1ANbHM=" + }, + "font": "Arial;13;0", + "left": 1469, + "top": 1138, + "width": 80.57080078125, + "height": 13, + "text": "+toJSON()", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 1464, + "top": 1118, + "width": 90.57080078125, + "height": 38 + }, + { + "_type": "UMLReceptionCompartmentView", + "_id": "AAAAAAGAO1MYe0/RU/o=", + "_parent": { + "$ref": "AAAAAAGAO1MYek/JnBg=" + }, + "model": { + "$ref": "AAAAAAGAO1MYeU/HxR0=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1328, + "top": 928, + "width": 10, + "height": 10 + }, + { + "_type": "UMLTemplateParameterCompartmentView", + "_id": "AAAAAAGAO1MYe0/S0T0=", + "_parent": { + "$ref": "AAAAAAGAO1MYek/JnBg=" + }, + "model": { + "$ref": "AAAAAAGAO1MYeU/HxR0=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1328, + "top": 928, + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "containerChangeable": true, + "left": 1464, + "top": 1040, + "width": 90.57080078125, + "height": 116, + "nameCompartment": { + "$ref": "AAAAAAGAO1MYek/KY2Y=" + }, + "attributeCompartment": { + "$ref": "AAAAAAGAO1MYe0/PFXM=" + }, + "operationCompartment": { + "$ref": "AAAAAAGAO1MYe0/Qbfc=" + }, + "receptionCompartment": { + "$ref": "AAAAAAGAO1MYe0/RU/o=" + }, + "templateParameterCompartment": { + "$ref": "AAAAAAGAO1MYe0/S0T0=" + } + }, + { + "_type": "UMLClassView", + "_id": "AAAAAAGAO4K5hlAZreY=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAO4K5hVAX2y8=" + }, + "subViews": [ + { + "_type": "UMLNameCompartmentView", + "_id": "AAAAAAGAO4K5hlAaHxg=", + "_parent": { + "$ref": "AAAAAAGAO4K5hlAZreY=" + }, + "model": { + "$ref": "AAAAAAGAO4K5hVAX2y8=" + }, + "subViews": [ + { + "_type": "LabelView", + "_id": "AAAAAAGAO4K5hlAbL2E=", + "_parent": { + "$ref": "AAAAAAGAO4K5hlAaHxg=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2128, + "top": 1872, + "height": 13 + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAO4K5hlAcyhk=", + "_parent": { + "$ref": "AAAAAAGAO4K5hlAaHxg=" + }, + "font": "Arial;13;3", + "left": 1181, + "top": 1287, + "width": 89.5908203125, + "height": 13, + "text": "MarkerSymbol" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAO4K5hlAdskM=", + "_parent": { + "$ref": "AAAAAAGAO4K5hlAaHxg=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2128, + "top": 1872, + "width": 73.67724609375, + "height": 13, + "text": "(from Model)" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAO4K5hlAe7O4=", + "_parent": { + "$ref": "AAAAAAGAO4K5hlAaHxg=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2128, + "top": 1872, + "height": 13, + "horizontalAlignment": 1 + } + ], + "font": "Arial;13;0", + "left": 1176, + "top": 1280, + "width": 99.5908203125, + "height": 25, + "stereotypeLabel": { + "$ref": "AAAAAAGAO4K5hlAbL2E=" + }, + "nameLabel": { + "$ref": "AAAAAAGAO4K5hlAcyhk=" + }, + "namespaceLabel": { + "$ref": "AAAAAAGAO4K5hlAdskM=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAO4K5hlAe7O4=" + } + }, + { + "_type": "UMLAttributeCompartmentView", + "_id": "AAAAAAGAO4K5hlAfRpQ=", + "_parent": { + "$ref": "AAAAAAGAO4K5hlAZreY=" + }, + "model": { + "$ref": "AAAAAAGAO4K5hVAX2y8=" + }, + "subViews": [ + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAO4p0BZr4gb8=", + "_parent": { + "$ref": "AAAAAAGAO4K5hlAfRpQ=" + }, + "model": { + "$ref": "AAAAAAGAO4pz5Zr153M=" + }, + "font": "Arial;13;0", + "left": 1181, + "top": 1310, + "width": 89.5908203125, + "height": 13, + "text": "+type", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAO4mT4prSiMQ=", + "_parent": { + "$ref": "AAAAAAGAO4K5hlAfRpQ=" + }, + "model": { + "$ref": "AAAAAAGAO4mTwJrPb7w=" + }, + "font": "Arial;13;0", + "left": 1181, + "top": 1325, + "width": 89.5908203125, + "height": 13, + "text": "+angle", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAO4qdoZsDpGc=", + "_parent": { + "$ref": "AAAAAAGAO4K5hlAfRpQ=" + }, + "model": { + "$ref": "AAAAAAGAO4qdgZsAE80=" + }, + "font": "Arial;13;0", + "left": 1181, + "top": 1340, + "width": 89.5908203125, + "height": 13, + "text": "+color", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAO4mfvZrYhZg=", + "_parent": { + "$ref": "AAAAAAGAO4K5hlAfRpQ=" + }, + "model": { + "$ref": "AAAAAAGAO4mfnZrVlig=" + }, + "font": "Arial;13;0", + "left": 1181, + "top": 1355, + "width": 89.5908203125, + "height": 13, + "text": "+xoffset", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAO4mirJreNX8=", + "_parent": { + "$ref": "AAAAAAGAO4K5hlAfRpQ=" + }, + "model": { + "$ref": "AAAAAAGAO4mihZrbRuU=" + }, + "font": "Arial;13;0", + "left": 1181, + "top": 1370, + "width": 89.5908203125, + "height": 13, + "text": "+yoffset", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 1176, + "top": 1305, + "width": 99.5908203125, + "height": 83 + }, + { + "_type": "UMLOperationCompartmentView", + "_id": "AAAAAAGAO4K5hlAg2rk=", + "_parent": { + "$ref": "AAAAAAGAO4K5hlAZreY=" + }, + "model": { + "$ref": "AAAAAAGAO4K5hVAX2y8=" + }, + "subViews": [ + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAO4niGZrnj9g=", + "_parent": { + "$ref": "AAAAAAGAO4K5hlAg2rk=" + }, + "model": { + "$ref": "AAAAAAGAO4nh+prkPOw=" + }, + "font": "Arial;13;0", + "left": 1181, + "top": 1393, + "width": 89.5908203125, + "height": 13, + "text": "+fromJSON()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAO4n8uZruYQg=", + "_parent": { + "$ref": "AAAAAAGAO4K5hlAg2rk=" + }, + "model": { + "$ref": "AAAAAAGAO4n8mJrrxks=" + }, + "font": "Arial;13;0", + "left": 1181, + "top": 1408, + "width": 89.5908203125, + "height": 13, + "text": "+toJSON()", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 1176, + "top": 1388, + "width": 99.5908203125, + "height": 38 + }, + { + "_type": "UMLReceptionCompartmentView", + "_id": "AAAAAAGAO4K5hlAh8MY=", + "_parent": { + "$ref": "AAAAAAGAO4K5hlAZreY=" + }, + "model": { + "$ref": "AAAAAAGAO4K5hVAX2y8=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1064, + "top": 936, + "width": 10, + "height": 10 + }, + { + "_type": "UMLTemplateParameterCompartmentView", + "_id": "AAAAAAGAO4K5hlAi2GE=", + "_parent": { + "$ref": "AAAAAAGAO4K5hlAZreY=" + }, + "model": { + "$ref": "AAAAAAGAO4K5hVAX2y8=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1064, + "top": 936, + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "containerChangeable": true, + "left": 1176, + "top": 1280, + "width": 99.5908203125, + "height": 146, + "nameCompartment": { + "$ref": "AAAAAAGAO4K5hlAaHxg=" + }, + "attributeCompartment": { + "$ref": "AAAAAAGAO4K5hlAfRpQ=" + }, + "operationCompartment": { + "$ref": "AAAAAAGAO4K5hlAg2rk=" + }, + "receptionCompartment": { + "$ref": "AAAAAAGAO4K5hlAh8MY=" + }, + "templateParameterCompartment": { + "$ref": "AAAAAAGAO4K5hlAi2GE=" + } + }, + { + "_type": "UMLGeneralizationView", + "_id": "AAAAAAGAO4k9eZq+zz8=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAO4k9d5q8o/w=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAO4k9eZq/7Fk=", + "_parent": { + "$ref": "AAAAAAGAO4k9eZq+zz8=" + }, + "model": { + "$ref": "AAAAAAGAO4k9d5q8o/w=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1359, + "top": 1204, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAO4k9eZq+zz8=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAO4k9eprAyRg=", + "_parent": { + "$ref": "AAAAAAGAO4k9eZq+zz8=" + }, + "model": { + "$ref": "AAAAAAGAO4k9d5q8o/w=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 1349, + "top": 1193, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAO4k9eZq+zz8=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAO4k9eprBcRg=", + "_parent": { + "$ref": "AAAAAAGAO4k9eZq+zz8=" + }, + "model": { + "$ref": "AAAAAAGAO4k9d5q8o/w=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1378, + "top": 1227, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAO4k9eZq+zz8=" + }, + "edgePosition": 1 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAO1MYek/JnBg=" + }, + "tail": { + "$ref": "AAAAAAGAO4K5hlAZreY=" + }, + "lineStyle": 1, + "points": "1276:1306;1463:1138", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAO4k9eZq/7Fk=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAO4k9eprAyRg=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAO4k9eprBcRg=" + } + }, + { + "_type": "UMLClassView", + "_id": "AAAAAAGAO5gALZsP5fo=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAO5gALZsNaqc=" + }, + "subViews": [ + { + "_type": "UMLNameCompartmentView", + "_id": "AAAAAAGAO5gALZsQXyM=", + "_parent": { + "$ref": "AAAAAAGAO5gALZsP5fo=" + }, + "model": { + "$ref": "AAAAAAGAO5gALZsNaqc=" + }, + "subViews": [ + { + "_type": "LabelView", + "_id": "AAAAAAGAO5gALZsREwU=", + "_parent": { + "$ref": "AAAAAAGAO5gALZsQXyM=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1968, + "top": 1888, + "height": 13 + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAO5gALZsSpDs=", + "_parent": { + "$ref": "AAAAAAGAO5gALZsQXyM=" + }, + "font": "Arial;13;1", + "left": 1141, + "top": 1503, + "width": 168.0224609375, + "height": 13, + "text": "SimpleMarkerSymbol" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAO5gALpsT33s=", + "_parent": { + "$ref": "AAAAAAGAO5gALZsQXyM=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1968, + "top": 1888, + "width": 73.67724609375, + "height": 13, + "text": "(from Model)" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAO5gALpsUJRw=", + "_parent": { + "$ref": "AAAAAAGAO5gALZsQXyM=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1968, + "top": 1888, + "height": 13, + "horizontalAlignment": 1 + } + ], + "font": "Arial;13;0", + "left": 1136, + "top": 1496, + "width": 178.0224609375, + "height": 25, + "stereotypeLabel": { + "$ref": "AAAAAAGAO5gALZsREwU=" + }, + "nameLabel": { + "$ref": "AAAAAAGAO5gALZsSpDs=" + }, + "namespaceLabel": { + "$ref": "AAAAAAGAO5gALpsT33s=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAO5gALpsUJRw=" + } + }, + { + "_type": "UMLAttributeCompartmentView", + "_id": "AAAAAAGAO5gALpsV0BA=", + "_parent": { + "$ref": "AAAAAAGAO5gALZsP5fo=" + }, + "model": { + "$ref": "AAAAAAGAO5gALZsNaqc=" + }, + "subViews": [ + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAO5hkWZtP8PU=", + "_parent": { + "$ref": "AAAAAAGAO5gALpsV0BA=" + }, + "model": { + "$ref": "AAAAAAGAO5hkNptMOqw=" + }, + "font": "Arial;13;0", + "left": 1141, + "top": 1526, + "width": 168.0224609375, + "height": 13, + "text": "+type", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAO5hwcZtVFjw=", + "_parent": { + "$ref": "AAAAAAGAO5gALpsV0BA=" + }, + "model": { + "$ref": "AAAAAAGAO5hwUJtS32g=" + }, + "font": "Arial;13;0", + "left": 1141, + "top": 1541, + "width": 168.0224609375, + "height": 13, + "text": "+angle", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAO5hyo5tbu24=", + "_parent": { + "$ref": "AAAAAAGAO5gALpsV0BA=" + }, + "model": { + "$ref": "AAAAAAGAO5hygptYMPQ=" + }, + "font": "Arial;13;0", + "left": 1141, + "top": 1556, + "width": 168.0224609375, + "height": 13, + "text": "+color", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAO5pIyZug9DU=", + "_parent": { + "$ref": "AAAAAAGAO5gALpsV0BA=" + }, + "model": { + "$ref": "AAAAAAGAO5pIqJud5fM=" + }, + "font": "Arial;13;0", + "left": 1141, + "top": 1571, + "width": 168.0224609375, + "height": 13, + "text": "+outline: SimpleLineSymbol", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAO5h1Fpth6Io=", + "_parent": { + "$ref": "AAAAAAGAO5gALpsV0BA=" + }, + "model": { + "$ref": "AAAAAAGAO5h09pteLz4=" + }, + "font": "Arial;13;0", + "left": 1141, + "top": 1586, + "width": 168.0224609375, + "height": 13, + "text": "+path", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAO5h3AJtnyLU=", + "_parent": { + "$ref": "AAAAAAGAO5gALpsV0BA=" + }, + "model": { + "$ref": "AAAAAAGAO5h23Jtkc88=" + }, + "font": "Arial;13;0", + "left": 1141, + "top": 1601, + "width": 168.0224609375, + "height": 13, + "text": "+size", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAO5h4s5ttpWM=", + "_parent": { + "$ref": "AAAAAAGAO5gALpsV0BA=" + }, + "model": { + "$ref": "AAAAAAGAO5h4k5tqygA=" + }, + "font": "Arial;13;0", + "left": 1141, + "top": 1616, + "width": 168.0224609375, + "height": 13, + "text": "+style", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAO5h7JZtzPks=", + "_parent": { + "$ref": "AAAAAAGAO5gALpsV0BA=" + }, + "model": { + "$ref": "AAAAAAGAO5h7A5tw0cA=" + }, + "font": "Arial;13;0", + "left": 1141, + "top": 1631, + "width": 168.0224609375, + "height": 13, + "text": "+xoffset", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAO5h9KJt5VaY=", + "_parent": { + "$ref": "AAAAAAGAO5gALpsV0BA=" + }, + "model": { + "$ref": "AAAAAAGAO5h9B5t2d9Q=" + }, + "font": "Arial;13;0", + "left": 1141, + "top": 1646, + "width": 168.0224609375, + "height": 13, + "text": "+yoffset", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 1136, + "top": 1521, + "width": 178.0224609375, + "height": 143 + }, + { + "_type": "UMLOperationCompartmentView", + "_id": "AAAAAAGAO5gALpsWEzw=", + "_parent": { + "$ref": "AAAAAAGAO5gALZsP5fo=" + }, + "model": { + "$ref": "AAAAAAGAO5gALZsNaqc=" + }, + "subViews": [ + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAO5iarJuLMpA=", + "_parent": { + "$ref": "AAAAAAGAO5gALpsWEzw=" + }, + "model": { + "$ref": "AAAAAAGAO5iajJuIBOs=" + }, + "font": "Arial;13;0", + "left": 1141, + "top": 1669, + "width": 168.0224609375, + "height": 13, + "text": "+clone()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAO5iP6Zt/is8=", + "_parent": { + "$ref": "AAAAAAGAO5gALpsWEzw=" + }, + "model": { + "$ref": "AAAAAAGAO5iPxpt81pU=" + }, + "font": "Arial;13;0", + "left": 1141, + "top": 1684, + "width": 168.0224609375, + "height": 13, + "text": "+fromJSON()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAO5iYEJuFzf0=", + "_parent": { + "$ref": "AAAAAAGAO5gALpsWEzw=" + }, + "model": { + "$ref": "AAAAAAGAO5iX6JuC7TA=" + }, + "font": "Arial;13;0", + "left": 1141, + "top": 1699, + "width": 168.0224609375, + "height": 13, + "text": "+toJSON()", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 1136, + "top": 1664, + "width": 178.0224609375, + "height": 53 + }, + { + "_type": "UMLReceptionCompartmentView", + "_id": "AAAAAAGAO5gALpsX4xs=", + "_parent": { + "$ref": "AAAAAAGAO5gALZsP5fo=" + }, + "model": { + "$ref": "AAAAAAGAO5gALZsNaqc=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 984, + "top": 944, + "width": 10, + "height": 10 + }, + { + "_type": "UMLTemplateParameterCompartmentView", + "_id": "AAAAAAGAO5gALpsYIWU=", + "_parent": { + "$ref": "AAAAAAGAO5gALZsP5fo=" + }, + "model": { + "$ref": "AAAAAAGAO5gALZsNaqc=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 984, + "top": 944, + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "containerChangeable": true, + "left": 1136, + "top": 1496, + "width": 178.0224609375, + "height": 221, + "nameCompartment": { + "$ref": "AAAAAAGAO5gALZsQXyM=" + }, + "attributeCompartment": { + "$ref": "AAAAAAGAO5gALpsV0BA=" + }, + "operationCompartment": { + "$ref": "AAAAAAGAO5gALpsWEzw=" + }, + "receptionCompartment": { + "$ref": "AAAAAAGAO5gALpsX4xs=" + }, + "templateParameterCompartment": { + "$ref": "AAAAAAGAO5gALpsYIWU=" + } + }, + { + "_type": "UMLGeneralizationView", + "_id": "AAAAAAGAO5hIaJs96IQ=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAO5hIZ5s7B30=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAO5hIaJs+4Ok=", + "_parent": { + "$ref": "AAAAAAGAO5hIaJs96IQ=" + }, + "model": { + "$ref": "AAAAAAGAO5hIZ5s7B30=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1209, + "top": 1453, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAO5hIaJs96IQ=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAO5hIaZs/RMg=", + "_parent": { + "$ref": "AAAAAAGAO5hIaJs96IQ=" + }, + "model": { + "$ref": "AAAAAAGAO5hIZ5s7B30=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 1194, + "top": 1453, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAO5hIaJs96IQ=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAO5hIaZtAgEI=", + "_parent": { + "$ref": "AAAAAAGAO5hIaJs96IQ=" + }, + "model": { + "$ref": "AAAAAAGAO5hIZ5s7B30=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1238, + "top": 1454, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAO5hIaJs96IQ=" + }, + "edgePosition": 1 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAO4K5hlAZreY=" + }, + "tail": { + "$ref": "AAAAAAGAO5gALZsP5fo=" + }, + "lineStyle": 1, + "points": "1224:1495;1225:1426", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAO5hIaJs+4Ok=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAO5hIaZs/RMg=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAO5hIaZtAgEI=" + } + }, + { + "_type": "UMLClassView", + "_id": "AAAAAAGAPAEECJu1N1A=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAPAEEB5uzp5s=" + }, + "subViews": [ + { + "_type": "UMLNameCompartmentView", + "_id": "AAAAAAGAPAEECJu2GKs=", + "_parent": { + "$ref": "AAAAAAGAPAEECJu1N1A=" + }, + "model": { + "$ref": "AAAAAAGAPAEEB5uzp5s=" + }, + "subViews": [ + { + "_type": "LabelView", + "_id": "AAAAAAGAPAEECJu37WA=", + "_parent": { + "$ref": "AAAAAAGAPAEECJu2GKs=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1232, + "top": 2048, + "height": 13 + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAPAEECJu4rMc=", + "_parent": { + "$ref": "AAAAAAGAPAEECJu2GKs=" + }, + "font": "Arial;13;3", + "left": 1389, + "top": 1287, + "width": 80.57080078125, + "height": 13, + "text": "LineSymbol" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAPAEECJu5XS0=", + "_parent": { + "$ref": "AAAAAAGAPAEECJu2GKs=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1232, + "top": 2048, + "width": 73.67724609375, + "height": 13, + "text": "(from Model)" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAPAEECJu6Xx8=", + "_parent": { + "$ref": "AAAAAAGAPAEECJu2GKs=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1232, + "top": 2048, + "height": 13, + "horizontalAlignment": 1 + } + ], + "font": "Arial;13;0", + "left": 1384, + "top": 1280, + "width": 90.57080078125, + "height": 25, + "stereotypeLabel": { + "$ref": "AAAAAAGAPAEECJu37WA=" + }, + "nameLabel": { + "$ref": "AAAAAAGAPAEECJu4rMc=" + }, + "namespaceLabel": { + "$ref": "AAAAAAGAPAEECJu5XS0=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAPAEECJu6Xx8=" + } + }, + { + "_type": "UMLAttributeCompartmentView", + "_id": "AAAAAAGAPAEECJu7Y48=", + "_parent": { + "$ref": "AAAAAAGAPAEECJu1N1A=" + }, + "model": { + "$ref": "AAAAAAGAPAEEB5uzp5s=" + }, + "subViews": [ + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPAKLfZvgDgI=", + "_parent": { + "$ref": "AAAAAAGAPAEECJu7Y48=" + }, + "model": { + "$ref": "AAAAAAGAPAKLVpvdNNE=" + }, + "font": "Arial;13;0", + "left": 1389, + "top": 1310, + "width": 80.57080078125, + "height": 13, + "text": "+type", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPAKR8JvmJRQ=", + "_parent": { + "$ref": "AAAAAAGAPAEECJu7Y48=" + }, + "model": { + "$ref": "AAAAAAGAPAKRz5vj6lU=" + }, + "font": "Arial;13;0", + "left": 1389, + "top": 1325, + "width": 80.57080078125, + "height": 13, + "text": "+color", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPAKawZvsFL8=", + "_parent": { + "$ref": "AAAAAAGAPAEECJu7Y48=" + }, + "model": { + "$ref": "AAAAAAGAPAKan5vpoKk=" + }, + "font": "Arial;13;0", + "left": 1389, + "top": 1340, + "width": 80.57080078125, + "height": 13, + "text": "+width", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 1384, + "top": 1305, + "width": 90.57080078125, + "height": 53 + }, + { + "_type": "UMLOperationCompartmentView", + "_id": "AAAAAAGAPAEECJu8gpg=", + "_parent": { + "$ref": "AAAAAAGAPAEECJu1N1A=" + }, + "model": { + "$ref": "AAAAAAGAPAEEB5uzp5s=" + }, + "subViews": [ + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAPALTA5v1qYw=", + "_parent": { + "$ref": "AAAAAAGAPAEECJu8gpg=" + }, + "model": { + "$ref": "AAAAAAGAPALS25vyQdo=" + }, + "font": "Arial;13;0", + "left": 1389, + "top": 1363, + "width": 80.57080078125, + "height": 13, + "text": "+fromJSON()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAPALeV5v77pQ=", + "_parent": { + "$ref": "AAAAAAGAPAEECJu8gpg=" + }, + "model": { + "$ref": "AAAAAAGAPALeMZv49lY=" + }, + "font": "Arial;13;0", + "left": 1389, + "top": 1378, + "width": 80.57080078125, + "height": 13, + "text": "+toJSON()", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 1384, + "top": 1358, + "width": 90.57080078125, + "height": 38 + }, + { + "_type": "UMLReceptionCompartmentView", + "_id": "AAAAAAGAPAEECJu9bYo=", + "_parent": { + "$ref": "AAAAAAGAPAEECJu1N1A=" + }, + "model": { + "$ref": "AAAAAAGAPAEEB5uzp5s=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 616, + "top": 1024, + "width": 10, + "height": 10 + }, + { + "_type": "UMLTemplateParameterCompartmentView", + "_id": "AAAAAAGAPAEECJu+TtY=", + "_parent": { + "$ref": "AAAAAAGAPAEECJu1N1A=" + }, + "model": { + "$ref": "AAAAAAGAPAEEB5uzp5s=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 616, + "top": 1024, + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "containerChangeable": true, + "left": 1384, + "top": 1280, + "width": 90.57080078125, + "height": 116, + "nameCompartment": { + "$ref": "AAAAAAGAPAEECJu2GKs=" + }, + "attributeCompartment": { + "$ref": "AAAAAAGAPAEECJu7Y48=" + }, + "operationCompartment": { + "$ref": "AAAAAAGAPAEECJu8gpg=" + }, + "receptionCompartment": { + "$ref": "AAAAAAGAPAEECJu9bYo=" + }, + "templateParameterCompartment": { + "$ref": "AAAAAAGAPAEECJu+TtY=" + } + }, + { + "_type": "UMLClassView", + "_id": "AAAAAAGAPAMK75wCNw0=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + }, + "subViews": [ + { + "_type": "UMLNameCompartmentView", + "_id": "AAAAAAGAPAMK75wDgvA=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wCNw0=" + }, + "model": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + }, + "subViews": [ + { + "_type": "LabelView", + "_id": "AAAAAAGAPAMK75wEXt4=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wDgvA=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1168, + "top": 1888, + "height": 13 + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAPAMK75wFMJ8=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wDgvA=" + }, + "font": "Arial;13;1", + "left": 1341, + "top": 1503, + "width": 163.63623046875, + "height": 13, + "text": "SimpleLineSymbol" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAPAMK75wGU50=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wDgvA=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1168, + "top": 1888, + "width": 73.67724609375, + "height": 13, + "text": "(from Model)" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAPAMK75wH9ao=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wDgvA=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1168, + "top": 1888, + "height": 13, + "horizontalAlignment": 1 + } + ], + "font": "Arial;13;0", + "left": 1336, + "top": 1496, + "width": 173.63623046875, + "height": 25, + "stereotypeLabel": { + "$ref": "AAAAAAGAPAMK75wEXt4=" + }, + "nameLabel": { + "$ref": "AAAAAAGAPAMK75wFMJ8=" + }, + "namespaceLabel": { + "$ref": "AAAAAAGAPAMK75wGU50=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAPAMK75wH9ao=" + } + }, + { + "_type": "UMLAttributeCompartmentView", + "_id": "AAAAAAGAPAMK75wIQws=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wCNw0=" + }, + "model": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + }, + "subViews": [ + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPAQZ9ZxPVZ4=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wIQws=" + }, + "model": { + "$ref": "AAAAAAGAPAQZ0pxMviw=" + }, + "font": "Arial;13;0", + "left": 1341, + "top": 1526, + "width": 163.63623046875, + "height": 13, + "text": "+type", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPAQgupxVbQ0=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wIQws=" + }, + "model": { + "$ref": "AAAAAAGAPAQglpxSlAw=" + }, + "font": "Arial;13;0", + "left": 1341, + "top": 1541, + "width": 163.63623046875, + "height": 13, + "text": "+cap", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPAQjcJxbkyI=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wIQws=" + }, + "model": { + "$ref": "AAAAAAGAPAQjTpxYRgc=" + }, + "font": "Arial;13;0", + "left": 1341, + "top": 1556, + "width": 163.63623046875, + "height": 13, + "text": "+color", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPAQlhJxh1vo=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wIQws=" + }, + "model": { + "$ref": "AAAAAAGAPAQlXpxeKLg=" + }, + "font": "Arial;13;0", + "left": 1341, + "top": 1571, + "width": 163.63623046875, + "height": 13, + "text": "+join", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPAQnqJxnLvE=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wIQws=" + }, + "model": { + "$ref": "AAAAAAGAPAQnhpxkzMk=" + }, + "font": "Arial;13;0", + "left": 1341, + "top": 1586, + "width": 163.63623046875, + "height": 13, + "text": "+marker: LineSymbolMarker", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPAQp2JxtOVk=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wIQws=" + }, + "model": { + "$ref": "AAAAAAGAPAQprpxqv+k=" + }, + "font": "Arial;13;0", + "left": 1341, + "top": 1601, + "width": 163.63623046875, + "height": 13, + "text": "+miterLimit", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPAQsE5xzh2M=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wIQws=" + }, + "model": { + "$ref": "AAAAAAGAPAQr7pxwm+c=" + }, + "font": "Arial;13;0", + "left": 1341, + "top": 1616, + "width": 163.63623046875, + "height": 13, + "text": "+style", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPAQuOpx5WOc=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wIQws=" + }, + "model": { + "$ref": "AAAAAAGAPAQuFpx2vEw=" + }, + "font": "Arial;13;0", + "left": 1341, + "top": 1631, + "width": 163.63623046875, + "height": 13, + "text": "+width", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 1336, + "top": 1521, + "width": 173.63623046875, + "height": 128 + }, + { + "_type": "UMLOperationCompartmentView", + "_id": "AAAAAAGAPAMK75wJsVE=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wCNw0=" + }, + "model": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + }, + "subViews": [ + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAPCva0a3oEDg=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wJsVE=" + }, + "model": { + "$ref": "AAAAAAGAPCvaqK3lziY=" + }, + "font": "Arial;13;0", + "left": 1341, + "top": 1654, + "width": 163.63623046875, + "height": 13, + "text": "+clone()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAPCvhoa4eijc=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wJsVE=" + }, + "model": { + "$ref": "AAAAAAGAPCvhf64bbOg=" + }, + "font": "Arial;13;0", + "left": 1341, + "top": 1669, + "width": 163.63623046875, + "height": 13, + "text": "+fromJSON()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAPCvkQq5CWqQ=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wJsVE=" + }, + "model": { + "$ref": "AAAAAAGAPCvkHq4/nNg=" + }, + "font": "Arial;13;0", + "left": 1341, + "top": 1684, + "width": 163.63623046875, + "height": 13, + "text": "+toJSON()", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 1336, + "top": 1649, + "width": 173.63623046875, + "height": 53 + }, + { + "_type": "UMLReceptionCompartmentView", + "_id": "AAAAAAGAPAMK75wKurQ=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wCNw0=" + }, + "model": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 584, + "top": 944, + "width": 10, + "height": 10 + }, + { + "_type": "UMLTemplateParameterCompartmentView", + "_id": "AAAAAAGAPAMK75wL/Ow=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wCNw0=" + }, + "model": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 584, + "top": 944, + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "containerChangeable": true, + "left": 1336, + "top": 1496, + "width": 173.63623046875, + "height": 206, + "nameCompartment": { + "$ref": "AAAAAAGAPAMK75wDgvA=" + }, + "attributeCompartment": { + "$ref": "AAAAAAGAPAMK75wIQws=" + }, + "operationCompartment": { + "$ref": "AAAAAAGAPAMK75wJsVE=" + }, + "receptionCompartment": { + "$ref": "AAAAAAGAPAMK75wKurQ=" + }, + "templateParameterCompartment": { + "$ref": "AAAAAAGAPAMK75wL/Ow=" + } + }, + { + "_type": "UMLGeneralizationView", + "_id": "AAAAAAGAPAMl+Jws8Rc=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAPAMl+Jwq3y8=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPAMl+JwtX/4=", + "_parent": { + "$ref": "AAAAAAGAPAMl+Jws8Rc=" + }, + "model": { + "$ref": "AAAAAAGAPAMl+Jwq3y8=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1452, + "top": 1206, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAPAMl+Jws8Rc=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPAMl+Jwu10s=", + "_parent": { + "$ref": "AAAAAAGAPAMl+Jws8Rc=" + }, + "model": { + "$ref": "AAAAAAGAPAMl+Jwq3y8=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 1438, + "top": 1201, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAPAMl+Jws8Rc=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPAMl+Jwvxu0=", + "_parent": { + "$ref": "AAAAAAGAPAMl+Jws8Rc=" + }, + "model": { + "$ref": "AAAAAAGAPAMl+Jwq3y8=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1481, + "top": 1215, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAPAMl+Jws8Rc=" + }, + "edgePosition": 1 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAO1MYek/JnBg=" + }, + "tail": { + "$ref": "AAAAAAGAPAEECJu1N1A=" + }, + "lineStyle": 1, + "points": "1447:1279;1488:1156", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAPAMl+JwtX/4=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAPAMl+Jwu10s=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAPAMl+Jwvxu0=" + } + }, + { + "_type": "UMLGeneralizationView", + "_id": "AAAAAAGAPAM0X5w94vo=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAPAM0X5w7CQk=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPAM0X5w+PYk=", + "_parent": { + "$ref": "AAAAAAGAPAM0X5w94vo=" + }, + "model": { + "$ref": "AAAAAAGAPAM0X5w7CQk=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1410, + "top": 1438, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAPAM0X5w94vo=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPAM0YJw/sFo=", + "_parent": { + "$ref": "AAAAAAGAPAM0X5w94vo=" + }, + "model": { + "$ref": "AAAAAAGAPAM0X5w7CQk=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 1395, + "top": 1437, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAPAM0X5w94vo=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPAM0YJxAm/U=", + "_parent": { + "$ref": "AAAAAAGAPAM0X5w94vo=" + }, + "model": { + "$ref": "AAAAAAGAPAM0X5w7CQk=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1439, + "top": 1439, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAPAM0X5w94vo=" + }, + "edgePosition": 1 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAPAEECJu1N1A=" + }, + "tail": { + "$ref": "AAAAAAGAPAMK75wCNw0=" + }, + "lineStyle": 1, + "points": "1424:1495;1427:1396", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAPAM0X5w+PYk=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAPAM0YJw/sFo=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAPAM0YJxAm/U=" + } + }, + { + "_type": "UMLAssociationView", + "_id": "AAAAAAGAPAZXyJz7pes=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAPAZXyJz3JCA=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPAZXyJz8vTg=", + "_parent": { + "$ref": "AAAAAAGAPAZXyJz7pes=" + }, + "model": { + "$ref": "AAAAAAGAPAZXyJz3JCA=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1324, + "top": 1581, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAPAZXyJz7pes=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPAZXyJz9jgA=", + "_parent": { + "$ref": "AAAAAAGAPAZXyJz7pes=" + }, + "model": { + "$ref": "AAAAAAGAPAZXyJz3JCA=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 1324, + "top": 1566, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAPAZXyJz7pes=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPAZXyJz+i7M=", + "_parent": { + "$ref": "AAAAAAGAPAZXyJz7pes=" + }, + "model": { + "$ref": "AAAAAAGAPAZXyJz3JCA=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1324, + "top": 1611, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAPAZXyJz7pes=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPAZXyJz/1qs=", + "_parent": { + "$ref": "AAAAAAGAPAZXyJz7pes=" + }, + "model": { + "$ref": "AAAAAAGAPAZXyJz4H6A=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1339, + "top": 1581, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAPAZXyJz7pes=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPAZXyJ0AVnY=", + "_parent": { + "$ref": "AAAAAAGAPAZXyJz7pes=" + }, + "model": { + "$ref": "AAAAAAGAPAZXyJz4H6A=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1342, + "top": 1567, + "height": 13, + "alpha": 0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAPAZXyJz7pes=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPAZXyJ0BuAo=", + "_parent": { + "$ref": "AAAAAAGAPAZXyJz7pes=" + }, + "model": { + "$ref": "AAAAAAGAPAZXyJz4H6A=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1335, + "top": 1608, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAPAZXyJz7pes=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPAZXyJ0CqJk=", + "_parent": { + "$ref": "AAAAAAGAPAZXyJz7pes=" + }, + "model": { + "$ref": "AAAAAAGAPAZXyJz5qwM=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1309, + "top": 1581, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAPAZXyJz7pes=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPAZXyJ0DRxo=", + "_parent": { + "$ref": "AAAAAAGAPAZXyJz7pes=" + }, + "model": { + "$ref": "AAAAAAGAPAZXyJz5qwM=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1306, + "top": 1567, + "height": 13, + "alpha": -0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAPAZXyJz7pes=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPAZXyJ0EjG8=", + "_parent": { + "$ref": "AAAAAAGAPAZXyJz7pes=" + }, + "model": { + "$ref": "AAAAAAGAPAZXyJz5qwM=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1313, + "top": 1608, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAPAZXyJz7pes=" + } + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAPAZXyJ0FhtE=", + "_parent": { + "$ref": "AAAAAAGAPAZXyJz7pes=" + }, + "model": { + "$ref": "AAAAAAGAPAZXyJz4H6A=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 576, + "top": 1024, + "width": 10, + "height": 10 + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAPAZXyJ0Gq9E=", + "_parent": { + "$ref": "AAAAAAGAPAZXyJz7pes=" + }, + "model": { + "$ref": "AAAAAAGAPAZXyJz5qwM=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 576, + "top": 1024, + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAPAMK75wCNw0=" + }, + "tail": { + "$ref": "AAAAAAGAO5gALZsP5fo=" + }, + "lineStyle": 1, + "points": "1314:1602;1335:1602", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAPAZXyJz8vTg=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAPAZXyJz9jgA=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAPAZXyJz+i7M=" + }, + "tailRoleNameLabel": { + "$ref": "AAAAAAGAPAZXyJz/1qs=" + }, + "tailPropertyLabel": { + "$ref": "AAAAAAGAPAZXyJ0AVnY=" + }, + "tailMultiplicityLabel": { + "$ref": "AAAAAAGAPAZXyJ0BuAo=" + }, + "headRoleNameLabel": { + "$ref": "AAAAAAGAPAZXyJ0CqJk=" + }, + "headPropertyLabel": { + "$ref": "AAAAAAGAPAZXyJ0DRxo=" + }, + "headMultiplicityLabel": { + "$ref": "AAAAAAGAPAZXyJ0EjG8=" + }, + "tailQualifiersCompartment": { + "$ref": "AAAAAAGAPAZXyJ0FhtE=" + }, + "headQualifiersCompartment": { + "$ref": "AAAAAAGAPAZXyJ0Gq9E=" + } + }, + { + "_type": "UMLClassView", + "_id": "AAAAAAGAPAZ6f51RxO8=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAPAZ6f51PAmE=" + }, + "subViews": [ + { + "_type": "UMLNameCompartmentView", + "_id": "AAAAAAGAPAZ6f51SOeE=", + "_parent": { + "$ref": "AAAAAAGAPAZ6f51RxO8=" + }, + "model": { + "$ref": "AAAAAAGAPAZ6f51PAmE=" + }, + "subViews": [ + { + "_type": "LabelView", + "_id": "AAAAAAGAPAZ6f51TTAU=", + "_parent": { + "$ref": "AAAAAAGAPAZ6f51SOeE=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 560, + "top": 2752, + "height": 13 + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAPAZ6f51UoT0=", + "_parent": { + "$ref": "AAAAAAGAPAZ6f51SOeE=" + }, + "font": "Arial;13;1", + "left": 1365, + "top": 1751, + "width": 116.314453125, + "height": 13, + "text": "LineSymbolMarker" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAPAZ6f51V14E=", + "_parent": { + "$ref": "AAAAAAGAPAZ6f51SOeE=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 560, + "top": 2752, + "width": 73.67724609375, + "height": 13, + "text": "(from Model)" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAPAZ6f51W2RM=", + "_parent": { + "$ref": "AAAAAAGAPAZ6f51SOeE=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 560, + "top": 2752, + "height": 13, + "horizontalAlignment": 1 + } + ], + "font": "Arial;13;0", + "left": 1360, + "top": 1744, + "width": 126.314453125, + "height": 25, + "stereotypeLabel": { + "$ref": "AAAAAAGAPAZ6f51TTAU=" + }, + "nameLabel": { + "$ref": "AAAAAAGAPAZ6f51UoT0=" + }, + "namespaceLabel": { + "$ref": "AAAAAAGAPAZ6f51V14E=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAPAZ6f51W2RM=" + } + }, + { + "_type": "UMLAttributeCompartmentView", + "_id": "AAAAAAGAPAZ6f51XwF4=", + "_parent": { + "$ref": "AAAAAAGAPAZ6f51RxO8=" + }, + "model": { + "$ref": "AAAAAAGAPAZ6f51PAmE=" + }, + "subViews": [ + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPAaeH52jAV8=", + "_parent": { + "$ref": "AAAAAAGAPAZ6f51XwF4=" + }, + "model": { + "$ref": "AAAAAAGAPAad+p2dGzE=" + }, + "font": "Arial;13;0", + "left": 1365, + "top": 1774, + "width": 116.314453125, + "height": 13, + "text": "+type", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPAaku53Bq+k=", + "_parent": { + "$ref": "AAAAAAGAPAZ6f51XwF4=" + }, + "model": { + "$ref": "AAAAAAGAPAakl5275T8=" + }, + "font": "Arial;13;0", + "left": 1365, + "top": 1789, + "width": 116.314453125, + "height": 13, + "text": "+color", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPAam3p3W7Sk=", + "_parent": { + "$ref": "AAAAAAGAPAZ6f51XwF4=" + }, + "model": { + "$ref": "AAAAAAGAPAamt53QDe4=" + }, + "font": "Arial;13;0", + "left": 1365, + "top": 1804, + "width": 116.314453125, + "height": 13, + "text": "+placement", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPAapVJ3rP5A=", + "_parent": { + "$ref": "AAAAAAGAPAZ6f51XwF4=" + }, + "model": { + "$ref": "AAAAAAGAPAapL53l9Sc=" + }, + "font": "Arial;13;0", + "left": 1365, + "top": 1819, + "width": 116.314453125, + "height": 13, + "text": "+style", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 1360, + "top": 1769, + "width": 126.314453125, + "height": 68 + }, + { + "_type": "UMLOperationCompartmentView", + "_id": "AAAAAAGAPAZ6f51YMfU=", + "_parent": { + "$ref": "AAAAAAGAPAZ6f51RxO8=" + }, + "model": { + "$ref": "AAAAAAGAPAZ6f51PAmE=" + }, + "font": "Arial;13;0", + "left": 1360, + "top": 1837, + "width": 126.314453125, + "height": 10 + }, + { + "_type": "UMLReceptionCompartmentView", + "_id": "AAAAAAGAPAZ6f51Z/g8=", + "_parent": { + "$ref": "AAAAAAGAPAZ6f51RxO8=" + }, + "model": { + "$ref": "AAAAAAGAPAZ6f51PAmE=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 280, + "top": 1376, + "width": 10, + "height": 10 + }, + { + "_type": "UMLTemplateParameterCompartmentView", + "_id": "AAAAAAGAPAZ6f51a1Yg=", + "_parent": { + "$ref": "AAAAAAGAPAZ6f51RxO8=" + }, + "model": { + "$ref": "AAAAAAGAPAZ6f51PAmE=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 280, + "top": 1376, + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "containerChangeable": true, + "left": 1360, + "top": 1744, + "width": 126.314453125, + "height": 103, + "nameCompartment": { + "$ref": "AAAAAAGAPAZ6f51SOeE=" + }, + "attributeCompartment": { + "$ref": "AAAAAAGAPAZ6f51XwF4=" + }, + "operationCompartment": { + "$ref": "AAAAAAGAPAZ6f51YMfU=" + }, + "receptionCompartment": { + "$ref": "AAAAAAGAPAZ6f51Z/g8=" + }, + "templateParameterCompartment": { + "$ref": "AAAAAAGAPAZ6f51a1Yg=" + } + }, + { + "_type": "UMLAssociationView", + "_id": "AAAAAAGAPAgXl59w9tY=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAPAgXl59swT0=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPAgXmJ9x8Wc=", + "_parent": { + "$ref": "AAAAAAGAPAgXl59w9tY=" + }, + "model": { + "$ref": "AAAAAAGAPAgXl59swT0=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1436, + "top": 1715, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAPAgXl59w9tY=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPAgXmJ9yGZE=", + "_parent": { + "$ref": "AAAAAAGAPAgXl59w9tY=" + }, + "model": { + "$ref": "AAAAAAGAPAgXl59swT0=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 1451, + "top": 1715, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAPAgXl59w9tY=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPAgXmJ9zKjU=", + "_parent": { + "$ref": "AAAAAAGAPAgXl59w9tY=" + }, + "model": { + "$ref": "AAAAAAGAPAgXl59swT0=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1407, + "top": 1716, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAPAgXl59w9tY=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPAgXmJ90XoY=", + "_parent": { + "$ref": "AAAAAAGAPAgXl59w9tY=" + }, + "model": { + "$ref": "AAAAAAGAPAgXl59tmOM=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1437, + "top": 1721, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAPAgXl59w9tY=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPAgXmJ91D64=", + "_parent": { + "$ref": "AAAAAAGAPAgXl59w9tY=" + }, + "model": { + "$ref": "AAAAAAGAPAgXl59tmOM=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1450, + "top": 1724, + "height": 13, + "alpha": 0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAPAgXl59w9tY=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPAgXmJ92hKk=", + "_parent": { + "$ref": "AAAAAAGAPAgXl59w9tY=" + }, + "model": { + "$ref": "AAAAAAGAPAgXl59tmOM=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1409, + "top": 1717, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAPAgXl59w9tY=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPAgXmJ93qTo=", + "_parent": { + "$ref": "AAAAAAGAPAgXl59w9tY=" + }, + "model": { + "$ref": "AAAAAAGAPAgXl59uDWo=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1437, + "top": 1711, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAPAgXl59w9tY=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPAgXmJ945Nk=", + "_parent": { + "$ref": "AAAAAAGAPAgXl59w9tY=" + }, + "model": { + "$ref": "AAAAAAGAPAgXl59uDWo=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1450, + "top": 1708, + "height": 13, + "alpha": -0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAPAgXl59w9tY=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPAgXmJ951JU=", + "_parent": { + "$ref": "AAAAAAGAPAgXl59w9tY=" + }, + "model": { + "$ref": "AAAAAAGAPAgXl59uDWo=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1409, + "top": 1715, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAPAgXl59w9tY=" + } + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAPAgXmJ96iVI=", + "_parent": { + "$ref": "AAAAAAGAPAgXl59w9tY=" + }, + "model": { + "$ref": "AAAAAAGAPAgXl59tmOM=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 576, + "top": 1024, + "width": 10, + "height": 10 + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAPAgXmJ97Rxw=", + "_parent": { + "$ref": "AAAAAAGAPAgXl59w9tY=" + }, + "model": { + "$ref": "AAAAAAGAPAgXl59uDWo=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 576, + "top": 1024, + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAPAZ6f51RxO8=" + }, + "tail": { + "$ref": "AAAAAAGAPAMK75wCNw0=" + }, + "lineStyle": 1, + "points": "1422:1702;1422:1743", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAPAgXmJ9x8Wc=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAPAgXmJ9yGZE=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAPAgXmJ9zKjU=" + }, + "tailRoleNameLabel": { + "$ref": "AAAAAAGAPAgXmJ90XoY=" + }, + "tailPropertyLabel": { + "$ref": "AAAAAAGAPAgXmJ91D64=" + }, + "tailMultiplicityLabel": { + "$ref": "AAAAAAGAPAgXmJ92hKk=" + }, + "headRoleNameLabel": { + "$ref": "AAAAAAGAPAgXmJ93qTo=" + }, + "headPropertyLabel": { + "$ref": "AAAAAAGAPAgXmJ945Nk=" + }, + "headMultiplicityLabel": { + "$ref": "AAAAAAGAPAgXmJ951JU=" + }, + "tailQualifiersCompartment": { + "$ref": "AAAAAAGAPAgXmJ96iVI=" + }, + "headQualifiersCompartment": { + "$ref": "AAAAAAGAPAgXmJ97Rxw=" + } + }, + { + "_type": "UMLClassView", + "_id": "AAAAAAGAPBd73qHscQA=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAPBd73aHqdKY=" + }, + "subViews": [ + { + "_type": "UMLNameCompartmentView", + "_id": "AAAAAAGAPBd73qHtjz8=", + "_parent": { + "$ref": "AAAAAAGAPBd73qHscQA=" + }, + "model": { + "$ref": "AAAAAAGAPBd73aHqdKY=" + }, + "subViews": [ + { + "_type": "LabelView", + "_id": "AAAAAAGAPBd73qHudqQ=", + "_parent": { + "$ref": "AAAAAAGAPBd73qHtjz8=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 896, + "top": 1920, + "height": 13 + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAPBd73qHvzLw=", + "_parent": { + "$ref": "AAAAAAGAPBd73qHtjz8=" + }, + "font": "Arial;13;1", + "left": 981, + "top": 1503, + "width": 133.66259765625, + "height": 13, + "text": "PictureMarkerSymbol" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAPBd73qHwpPE=", + "_parent": { + "$ref": "AAAAAAGAPBd73qHtjz8=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 896, + "top": 1920, + "width": 73.67724609375, + "height": 13, + "text": "(from Model)" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAPBd73qHxJhQ=", + "_parent": { + "$ref": "AAAAAAGAPBd73qHtjz8=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 896, + "top": 1920, + "height": 13, + "horizontalAlignment": 1 + } + ], + "font": "Arial;13;0", + "left": 976, + "top": 1496, + "width": 143.66259765625, + "height": 25, + "stereotypeLabel": { + "$ref": "AAAAAAGAPBd73qHudqQ=" + }, + "nameLabel": { + "$ref": "AAAAAAGAPBd73qHvzLw=" + }, + "namespaceLabel": { + "$ref": "AAAAAAGAPBd73qHwpPE=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAPBd73qHxJhQ=" + } + }, + { + "_type": "UMLAttributeCompartmentView", + "_id": "AAAAAAGAPBd736Hy3vE=", + "_parent": { + "$ref": "AAAAAAGAPBd73qHscQA=" + }, + "model": { + "$ref": "AAAAAAGAPBd73aHqdKY=" + }, + "subViews": [ + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPBe8LKL7BvY=", + "_parent": { + "$ref": "AAAAAAGAPBd736Hy3vE=" + }, + "model": { + "$ref": "AAAAAAGAPBe8CaLygzQ=" + }, + "font": "Arial;13;0", + "left": 981, + "top": 1526, + "width": 133.66259765625, + "height": 13, + "text": "+type", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPBfDAaMxM0g=", + "_parent": { + "$ref": "AAAAAAGAPBd736Hy3vE=" + }, + "model": { + "$ref": "AAAAAAGAPBfC3qMo4vU=" + }, + "font": "Arial;13;0", + "left": 981, + "top": 1541, + "width": 133.66259765625, + "height": 13, + "text": "+angle", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPBfF1qNVuNA=", + "_parent": { + "$ref": "AAAAAAGAPBd736Hy3vE=" + }, + "model": { + "$ref": "AAAAAAGAPBfFsKNMfiQ=" + }, + "font": "Arial;13;0", + "left": 981, + "top": 1556, + "width": 133.66259765625, + "height": 13, + "text": "+height", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPBfIGaN5OJU=", + "_parent": { + "$ref": "AAAAAAGAPBd736Hy3vE=" + }, + "model": { + "$ref": "AAAAAAGAPBfH9qNwFW8=" + }, + "font": "Arial;13;0", + "left": 981, + "top": 1571, + "width": 133.66259765625, + "height": 13, + "text": "+url", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPBfKMKOdoEo=", + "_parent": { + "$ref": "AAAAAAGAPBd736Hy3vE=" + }, + "model": { + "$ref": "AAAAAAGAPBfKDqOUl0Y=" + }, + "font": "Arial;13;0", + "left": 981, + "top": 1586, + "width": 133.66259765625, + "height": 13, + "text": "+width", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPBfMSaPBn5I=", + "_parent": { + "$ref": "AAAAAAGAPBd736Hy3vE=" + }, + "model": { + "$ref": "AAAAAAGAPBfMJqO4ULE=" + }, + "font": "Arial;13;0", + "left": 981, + "top": 1601, + "width": 133.66259765625, + "height": 13, + "text": "+xoffset", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPBfOiaPlYo4=", + "_parent": { + "$ref": "AAAAAAGAPBd736Hy3vE=" + }, + "model": { + "$ref": "AAAAAAGAPBfOZ6Pcm9c=" + }, + "font": "Arial;13;0", + "left": 981, + "top": 1616, + "width": 133.66259765625, + "height": 13, + "text": "+yoffset", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 976, + "top": 1521, + "width": 143.66259765625, + "height": 113 + }, + { + "_type": "UMLOperationCompartmentView", + "_id": "AAAAAAGAPBd736HzKbk=", + "_parent": { + "$ref": "AAAAAAGAPBd73qHscQA=" + }, + "model": { + "$ref": "AAAAAAGAPBd73aHqdKY=" + }, + "subViews": [ + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAPBeuDKLFpuw=", + "_parent": { + "$ref": "AAAAAAGAPBd736HzKbk=" + }, + "model": { + "$ref": "AAAAAAGAPBet6aK8jQc=" + }, + "font": "Arial;13;0", + "left": 981, + "top": 1639, + "width": 133.66259765625, + "height": 13, + "text": "+clone()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAPBhv66W3Wa4=", + "_parent": { + "$ref": "AAAAAAGAPBd736HzKbk=" + }, + "model": { + "$ref": "AAAAAAGAPBhvx6Wusf8=" + }, + "font": "Arial;13;0", + "left": 981, + "top": 1654, + "width": 133.66259765625, + "height": 13, + "text": "+fromJSON()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAPBhyDaXb2Ko=", + "_parent": { + "$ref": "AAAAAAGAPBd736HzKbk=" + }, + "model": { + "$ref": "AAAAAAGAPBhx56XShSk=" + }, + "font": "Arial;13;0", + "left": 981, + "top": 1669, + "width": 133.66259765625, + "height": 13, + "text": "+toJSON()", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 976, + "top": 1634, + "width": 143.66259765625, + "height": 53 + }, + { + "_type": "UMLReceptionCompartmentView", + "_id": "AAAAAAGAPBd736H0W7E=", + "_parent": { + "$ref": "AAAAAAGAPBd73qHscQA=" + }, + "model": { + "$ref": "AAAAAAGAPBd73aHqdKY=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 448, + "top": 960, + "width": 10, + "height": 10 + }, + { + "_type": "UMLTemplateParameterCompartmentView", + "_id": "AAAAAAGAPBd736H1Moo=", + "_parent": { + "$ref": "AAAAAAGAPBd73qHscQA=" + }, + "model": { + "$ref": "AAAAAAGAPBd73aHqdKY=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 448, + "top": 960, + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "containerChangeable": true, + "left": 976, + "top": 1496, + "width": 143.66259765625, + "height": 191, + "nameCompartment": { + "$ref": "AAAAAAGAPBd73qHtjz8=" + }, + "attributeCompartment": { + "$ref": "AAAAAAGAPBd736Hy3vE=" + }, + "operationCompartment": { + "$ref": "AAAAAAGAPBd736HzKbk=" + }, + "receptionCompartment": { + "$ref": "AAAAAAGAPBd736H0W7E=" + }, + "templateParameterCompartment": { + "$ref": "AAAAAAGAPBd736H1Moo=" + } + }, + { + "_type": "UMLGeneralizationView", + "_id": "AAAAAAGAPBeg7KJxVzQ=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAPBeg7KJvEiE=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPBeg7KJySLo=", + "_parent": { + "$ref": "AAAAAAGAPBeg7KJxVzQ=" + }, + "model": { + "$ref": "AAAAAAGAPBeg7KJvEiE=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1134, + "top": 1441, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAPBeg7KJxVzQ=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPBeg7KJzizU=", + "_parent": { + "$ref": "AAAAAAGAPBeg7KJxVzQ=" + }, + "model": { + "$ref": "AAAAAAGAPBeg7KJvEiE=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 1122, + "top": 1432, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAPBeg7KJxVzQ=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPBeg7KJ008o=", + "_parent": { + "$ref": "AAAAAAGAPBeg7KJxVzQ=" + }, + "model": { + "$ref": "AAAAAAGAPBeg7KJvEiE=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1157, + "top": 1460, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAPBeg7KJxVzQ=" + }, + "edgePosition": 1 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAO4K5hlAZreY=" + }, + "tail": { + "$ref": "AAAAAAGAPBd73qHscQA=" + }, + "lineStyle": 1, + "points": "1118:1495;1175:1419", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAPBeg7KJySLo=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAPBeg7KJzizU=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAPBeg7KJ008o=" + } + }, + { + "_type": "UMLClassView", + "_id": "AAAAAAGAPCD46KeYkpo=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAPCD456eWclQ=" + }, + "subViews": [ + { + "_type": "UMLNameCompartmentView", + "_id": "AAAAAAGAPCD46KeZWB4=", + "_parent": { + "$ref": "AAAAAAGAPCD46KeYkpo=" + }, + "model": { + "$ref": "AAAAAAGAPCD456eWclQ=" + }, + "subViews": [ + { + "_type": "LabelView", + "_id": "AAAAAAGAPCD46KeaMOQ=", + "_parent": { + "$ref": "AAAAAAGAPCD46KeZWB4=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1040, + "top": 2000, + "height": 13 + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAPCD46KebbT8=", + "_parent": { + "$ref": "AAAAAAGAPCD46KeZWB4=" + }, + "font": "Arial;13;3", + "left": 1525, + "top": 1287, + "width": 160.7861328125, + "height": 13, + "text": "FillSymbol" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAPCD46Kechlw=", + "_parent": { + "$ref": "AAAAAAGAPCD46KeZWB4=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1040, + "top": 2000, + "width": 73.67724609375, + "height": 13, + "text": "(from Model)" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAPCD46Ked/xc=", + "_parent": { + "$ref": "AAAAAAGAPCD46KeZWB4=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1040, + "top": 2000, + "height": 13, + "horizontalAlignment": 1 + } + ], + "font": "Arial;13;0", + "left": 1520, + "top": 1280, + "width": 170.7861328125, + "height": 25, + "stereotypeLabel": { + "$ref": "AAAAAAGAPCD46KeaMOQ=" + }, + "nameLabel": { + "$ref": "AAAAAAGAPCD46KebbT8=" + }, + "namespaceLabel": { + "$ref": "AAAAAAGAPCD46Kechlw=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAPCD46Ked/xc=" + } + }, + { + "_type": "UMLAttributeCompartmentView", + "_id": "AAAAAAGAPCD46Kee1O0=", + "_parent": { + "$ref": "AAAAAAGAPCD46KeYkpo=" + }, + "model": { + "$ref": "AAAAAAGAPCD456eWclQ=" + }, + "subViews": [ + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPCEdTKhxXM4=", + "_parent": { + "$ref": "AAAAAAGAPCD46Kee1O0=" + }, + "model": { + "$ref": "AAAAAAGAPCEdKahoOMM=" + }, + "font": "Arial;13;0", + "left": 1525, + "top": 1310, + "width": 160.7861328125, + "height": 13, + "text": "+type", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPCEmM6i5bsM=", + "_parent": { + "$ref": "AAAAAAGAPCD46Kee1O0=" + }, + "model": { + "$ref": "AAAAAAGAPCEmEKiwQC0=" + }, + "font": "Arial;13;0", + "left": 1525, + "top": 1325, + "width": 160.7861328125, + "height": 13, + "text": "+outline: SimpleLineSymbol", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 1520, + "top": 1305, + "width": 170.7861328125, + "height": 38 + }, + { + "_type": "UMLOperationCompartmentView", + "_id": "AAAAAAGAPCD46aefwOo=", + "_parent": { + "$ref": "AAAAAAGAPCD46KeYkpo=" + }, + "model": { + "$ref": "AAAAAAGAPCD456eWclQ=" + }, + "subViews": [ + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAPCEvp6jvsj4=", + "_parent": { + "$ref": "AAAAAAGAPCD46aefwOo=" + }, + "model": { + "$ref": "AAAAAAGAPCEvg6jm2cI=" + }, + "font": "Arial;13;0", + "left": 1525, + "top": 1348, + "width": 160.7861328125, + "height": 13, + "text": "+fromJSON()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAPCE2o6kl+ZE=", + "_parent": { + "$ref": "AAAAAAGAPCD46aefwOo=" + }, + "model": { + "$ref": "AAAAAAGAPCE2f6kc9N4=" + }, + "font": "Arial;13;0", + "left": 1525, + "top": 1363, + "width": 160.7861328125, + "height": 13, + "text": "+toJSON()", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 1520, + "top": 1343, + "width": 170.7861328125, + "height": 38 + }, + { + "_type": "UMLReceptionCompartmentView", + "_id": "AAAAAAGAPCD46aeg9BU=", + "_parent": { + "$ref": "AAAAAAGAPCD46KeYkpo=" + }, + "model": { + "$ref": "AAAAAAGAPCD456eWclQ=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 520, + "top": 1000, + "width": 10, + "height": 10 + }, + { + "_type": "UMLTemplateParameterCompartmentView", + "_id": "AAAAAAGAPCD46aehjMA=", + "_parent": { + "$ref": "AAAAAAGAPCD46KeYkpo=" + }, + "model": { + "$ref": "AAAAAAGAPCD456eWclQ=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 520, + "top": 1000, + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "containerChangeable": true, + "left": 1520, + "top": 1280, + "width": 170.7861328125, + "height": 101, + "nameCompartment": { + "$ref": "AAAAAAGAPCD46KeZWB4=" + }, + "attributeCompartment": { + "$ref": "AAAAAAGAPCD46Kee1O0=" + }, + "operationCompartment": { + "$ref": "AAAAAAGAPCD46aefwOo=" + }, + "receptionCompartment": { + "$ref": "AAAAAAGAPCD46aeg9BU=" + }, + "templateParameterCompartment": { + "$ref": "AAAAAAGAPCD46aehjMA=" + } + }, + { + "_type": "UMLGeneralizationView", + "_id": "AAAAAAGAPCEOcKgdRwY=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAPCEOb6gbYVs=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPCEOcKgezAQ=", + "_parent": { + "$ref": "AAAAAAGAPCEOcKgdRwY=" + }, + "model": { + "$ref": "AAAAAAGAPCEOb6gbYVs=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1543, + "top": 1216, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAPCEOcKgdRwY=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPCEOcKgfges=", + "_parent": { + "$ref": "AAAAAAGAPCEOcKgdRwY=" + }, + "model": { + "$ref": "AAAAAAGAPCEOb6gbYVs=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 1529, + "top": 1222, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAPCEOcKgdRwY=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPCEOcKggoCI=", + "_parent": { + "$ref": "AAAAAAGAPCEOcKgdRwY=" + }, + "model": { + "$ref": "AAAAAAGAPCEOb6gbYVs=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1570, + "top": 1205, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAPCEOcKgdRwY=" + }, + "edgePosition": 1 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAO1MYek/JnBg=" + }, + "tail": { + "$ref": "AAAAAAGAPCD46KeYkpo=" + }, + "lineStyle": 1, + "points": "1583:1279;1532:1156", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAPCEOcKgezAQ=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAPCEOcKgfges=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAPCEOcKggoCI=" + } + }, + { + "_type": "UMLClassView", + "_id": "AAAAAAGAPCnyRqqSpVk=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAPCnyRqqQR0M=" + }, + "subViews": [ + { + "_type": "UMLNameCompartmentView", + "_id": "AAAAAAGAPCnyR6qT0qo=", + "_parent": { + "$ref": "AAAAAAGAPCnyRqqSpVk=" + }, + "model": { + "$ref": "AAAAAAGAPCnyRqqQR0M=" + }, + "subViews": [ + { + "_type": "LabelView", + "_id": "AAAAAAGAPCnyR6qUmU8=", + "_parent": { + "$ref": "AAAAAAGAPCnyR6qT0qo=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 992, + "top": 1872, + "height": 13 + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAPCnyR6qVskM=", + "_parent": { + "$ref": "AAAAAAGAPCnyR6qT0qo=" + }, + "font": "Arial;13;1", + "left": 1533, + "top": 1503, + "width": 160.7861328125, + "height": 13, + "text": "SimpleFillSymbol" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAPCnyR6qWzlw=", + "_parent": { + "$ref": "AAAAAAGAPCnyR6qT0qo=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 992, + "top": 1872, + "width": 73.67724609375, + "height": 13, + "text": "(from Model)" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAPCnyR6qX0jU=", + "_parent": { + "$ref": "AAAAAAGAPCnyR6qT0qo=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 992, + "top": 1872, + "height": 13, + "horizontalAlignment": 1 + } + ], + "font": "Arial;13;0", + "left": 1528, + "top": 1496, + "width": 170.7861328125, + "height": 25, + "stereotypeLabel": { + "$ref": "AAAAAAGAPCnyR6qUmU8=" + }, + "nameLabel": { + "$ref": "AAAAAAGAPCnyR6qVskM=" + }, + "namespaceLabel": { + "$ref": "AAAAAAGAPCnyR6qWzlw=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAPCnyR6qX0jU=" + } + }, + { + "_type": "UMLAttributeCompartmentView", + "_id": "AAAAAAGAPCnyR6qYf2U=", + "_parent": { + "$ref": "AAAAAAGAPCnyRqqSpVk=" + }, + "model": { + "$ref": "AAAAAAGAPCnyRqqQR0M=" + }, + "subViews": [ + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPCqTNquhaEY=", + "_parent": { + "$ref": "AAAAAAGAPCnyR6qYf2U=" + }, + "model": { + "$ref": "AAAAAAGAPCqTEauYd9c=" + }, + "font": "Arial;13;0", + "left": 1533, + "top": 1526, + "width": 160.7861328125, + "height": 13, + "text": "+type", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPCqZmqvXg2I=", + "_parent": { + "$ref": "AAAAAAGAPCnyR6qYf2U=" + }, + "model": { + "$ref": "AAAAAAGAPCqZd6vOxgQ=" + }, + "font": "Arial;13;0", + "left": 1533, + "top": 1541, + "width": 160.7861328125, + "height": 13, + "text": "+color", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPCqcsqv7lf8=", + "_parent": { + "$ref": "AAAAAAGAPCnyR6qYf2U=" + }, + "model": { + "$ref": "AAAAAAGAPCqcjqvys9Y=" + }, + "font": "Arial;13;0", + "left": 1533, + "top": 1556, + "width": 160.7861328125, + "height": 13, + "text": "+outline: SimpleLineSymbol", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPCqfm6wfWwQ=", + "_parent": { + "$ref": "AAAAAAGAPCnyR6qYf2U=" + }, + "model": { + "$ref": "AAAAAAGAPCqfd6wWjho=" + }, + "font": "Arial;13;0", + "left": 1533, + "top": 1571, + "width": 160.7861328125, + "height": 13, + "text": "+style", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 1528, + "top": 1521, + "width": 170.7861328125, + "height": 68 + }, + { + "_type": "UMLOperationCompartmentView", + "_id": "AAAAAAGAPCnyR6qZZbw=", + "_parent": { + "$ref": "AAAAAAGAPCnyRqqSpVk=" + }, + "model": { + "$ref": "AAAAAAGAPCnyRqqQR0M=" + }, + "subViews": [ + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAPCp9CqsRn5Y=", + "_parent": { + "$ref": "AAAAAAGAPCnyR6qZZbw=" + }, + "model": { + "$ref": "AAAAAAGAPCp84qsIizc=" + }, + "font": "Arial;13;0", + "left": 1533, + "top": 1594, + "width": 160.7861328125, + "height": 13, + "text": "+clone()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAPCqE2qtH91E=", + "_parent": { + "$ref": "AAAAAAGAPCnyR6qZZbw=" + }, + "model": { + "$ref": "AAAAAAGAPCqEt6s+HlI=" + }, + "font": "Arial;13;0", + "left": 1533, + "top": 1609, + "width": 160.7861328125, + "height": 13, + "text": "+fromJSON()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAPCqItatrJLk=", + "_parent": { + "$ref": "AAAAAAGAPCnyR6qZZbw=" + }, + "model": { + "$ref": "AAAAAAGAPCqIjqtiAxk=" + }, + "font": "Arial;13;0", + "left": 1533, + "top": 1624, + "width": 160.7861328125, + "height": 13, + "text": "+toJSON()", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 1528, + "top": 1589, + "width": 170.7861328125, + "height": 53 + }, + { + "_type": "UMLReceptionCompartmentView", + "_id": "AAAAAAGAPCnyR6qacBE=", + "_parent": { + "$ref": "AAAAAAGAPCnyRqqSpVk=" + }, + "model": { + "$ref": "AAAAAAGAPCnyRqqQR0M=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 496, + "top": 936, + "width": 10, + "height": 10 + }, + { + "_type": "UMLTemplateParameterCompartmentView", + "_id": "AAAAAAGAPCnyR6qbhsM=", + "_parent": { + "$ref": "AAAAAAGAPCnyRqqSpVk=" + }, + "model": { + "$ref": "AAAAAAGAPCnyRqqQR0M=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 496, + "top": 936, + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "containerChangeable": true, + "left": 1528, + "top": 1496, + "width": 170.7861328125, + "height": 146, + "nameCompartment": { + "$ref": "AAAAAAGAPCnyR6qT0qo=" + }, + "attributeCompartment": { + "$ref": "AAAAAAGAPCnyR6qYf2U=" + }, + "operationCompartment": { + "$ref": "AAAAAAGAPCnyR6qZZbw=" + }, + "receptionCompartment": { + "$ref": "AAAAAAGAPCnyR6qacBE=" + }, + "templateParameterCompartment": { + "$ref": "AAAAAAGAPCnyR6qbhsM=" + } + }, + { + "_type": "UMLGeneralizationView", + "_id": "AAAAAAGAPCwoxq9nUGU=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAPCwoxq9lm94=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPCwoxq9ow70=", + "_parent": { + "$ref": "AAAAAAGAPCwoxq9nUGU=" + }, + "model": { + "$ref": "AAAAAAGAPCwoxq9lm94=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1593, + "top": 1432, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAPCwoxq9nUGU=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPCwoxq9pgNU=", + "_parent": { + "$ref": "AAAAAAGAPCwoxq9nUGU=" + }, + "model": { + "$ref": "AAAAAAGAPCwoxq9lm94=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 1578, + "top": 1433, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAPCwoxq9nUGU=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPCwoxq9qtb4=", + "_parent": { + "$ref": "AAAAAAGAPCwoxq9nUGU=" + }, + "model": { + "$ref": "AAAAAAGAPCwoxq9lm94=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1622, + "top": 1431, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAPCwoxq9nUGU=" + }, + "edgePosition": 1 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAPCD46KeYkpo=" + }, + "tail": { + "$ref": "AAAAAAGAPCnyRqqSpVk=" + }, + "lineStyle": 1, + "points": "1610:1495;1606:1381", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAPCwoxq9ow70=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAPCwoxq9pgNU=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAPCwoxq9qtb4=" + } + }, + { + "_type": "UMLClassView", + "_id": "AAAAAAGAPQMJ63hIQC8=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAPQMJ6nhGP6w=" + }, + "subViews": [ + { + "_type": "UMLNameCompartmentView", + "_id": "AAAAAAGAPQMJ63hJTUk=", + "_parent": { + "$ref": "AAAAAAGAPQMJ63hIQC8=" + }, + "model": { + "$ref": "AAAAAAGAPQMJ6nhGP6w=" + }, + "subViews": [ + { + "_type": "LabelView", + "_id": "AAAAAAGAPQMJ63hKJJk=", + "_parent": { + "$ref": "AAAAAAGAPQMJ63hJTUk=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1088, + "top": 1920, + "height": 13 + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAPQMJ63hLNu0=", + "_parent": { + "$ref": "AAAAAAGAPQMJ63hJTUk=" + }, + "font": "Arial;13;1", + "left": 1717, + "top": 1503, + "width": 160.7861328125, + "height": 13, + "text": "PictureFillSymbol" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAPQMJ63hM0WA=", + "_parent": { + "$ref": "AAAAAAGAPQMJ63hJTUk=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1088, + "top": 1920, + "width": 73.67724609375, + "height": 13, + "text": "(from Model)" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAPQMJ63hNiQU=", + "_parent": { + "$ref": "AAAAAAGAPQMJ63hJTUk=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1088, + "top": 1920, + "height": 13, + "horizontalAlignment": 1 + } + ], + "font": "Arial;13;0", + "left": 1712, + "top": 1496, + "width": 170.7861328125, + "height": 25, + "stereotypeLabel": { + "$ref": "AAAAAAGAPQMJ63hKJJk=" + }, + "nameLabel": { + "$ref": "AAAAAAGAPQMJ63hLNu0=" + }, + "namespaceLabel": { + "$ref": "AAAAAAGAPQMJ63hM0WA=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAPQMJ63hNiQU=" + } + }, + { + "_type": "UMLAttributeCompartmentView", + "_id": "AAAAAAGAPQMJ63hOhZk=", + "_parent": { + "$ref": "AAAAAAGAPQMJ63hIQC8=" + }, + "model": { + "$ref": "AAAAAAGAPQMJ6nhGP6w=" + }, + "subViews": [ + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPQM7f3jBJ7M=", + "_parent": { + "$ref": "AAAAAAGAPQMJ63hOhZk=" + }, + "model": { + "$ref": "AAAAAAGAPQM7WHi4dEU=" + }, + "font": "Arial;13;0", + "left": 1717, + "top": 1526, + "width": 160.7861328125, + "height": 13, + "text": "+type", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPQND4Xj379s=", + "_parent": { + "$ref": "AAAAAAGAPQMJ63hOhZk=" + }, + "model": { + "$ref": "AAAAAAGAPQNDuXjuWOY=" + }, + "font": "Arial;13;0", + "left": 1717, + "top": 1541, + "width": 160.7861328125, + "height": 13, + "text": "+height", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPQNGE3kbdFg=", + "_parent": { + "$ref": "AAAAAAGAPQMJ63hOhZk=" + }, + "model": { + "$ref": "AAAAAAGAPQNF6nkSbuY=" + }, + "font": "Arial;13;0", + "left": 1717, + "top": 1556, + "width": 160.7861328125, + "height": 13, + "text": "+outline: SimpleLineSymbol", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPQNIx3k/XFc=", + "_parent": { + "$ref": "AAAAAAGAPQMJ63hOhZk=" + }, + "model": { + "$ref": "AAAAAAGAPQNIonk2nHk=" + }, + "font": "Arial;13;0", + "left": 1717, + "top": 1571, + "width": 160.7861328125, + "height": 13, + "text": "+url", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPQNKqnljCV0=", + "_parent": { + "$ref": "AAAAAAGAPQMJ63hOhZk=" + }, + "model": { + "$ref": "AAAAAAGAPQNKhXlabsA=" + }, + "font": "Arial;13;0", + "left": 1717, + "top": 1586, + "width": 160.7861328125, + "height": 13, + "text": "+width", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPQNMZnmH/hI=", + "_parent": { + "$ref": "AAAAAAGAPQMJ63hOhZk=" + }, + "model": { + "$ref": "AAAAAAGAPQNMP3l+opg=" + }, + "font": "Arial;13;0", + "left": 1717, + "top": 1601, + "width": 160.7861328125, + "height": 13, + "text": "+xoffset", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPQNOvHmrcrM=", + "_parent": { + "$ref": "AAAAAAGAPQMJ63hOhZk=" + }, + "model": { + "$ref": "AAAAAAGAPQNOl3miql8=" + }, + "font": "Arial;13;0", + "left": 1717, + "top": 1616, + "width": 160.7861328125, + "height": 13, + "text": "+xscale", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPQNQdXnPFQ0=", + "_parent": { + "$ref": "AAAAAAGAPQMJ63hOhZk=" + }, + "model": { + "$ref": "AAAAAAGAPQNQUnnGgkw=" + }, + "font": "Arial;13;0", + "left": 1717, + "top": 1631, + "width": 160.7861328125, + "height": 13, + "text": "+yoffset", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPQNVUHoXv8w=", + "_parent": { + "$ref": "AAAAAAGAPQMJ63hOhZk=" + }, + "model": { + "$ref": "AAAAAAGAPQNVK3oOyW0=" + }, + "font": "Arial;13;0", + "left": 1717, + "top": 1646, + "width": 160.7861328125, + "height": 13, + "text": "+yscale", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 1712, + "top": 1521, + "width": 170.7861328125, + "height": 143 + }, + { + "_type": "UMLOperationCompartmentView", + "_id": "AAAAAAGAPQMJ63hPGHg=", + "_parent": { + "$ref": "AAAAAAGAPQMJ63hIQC8=" + }, + "model": { + "$ref": "AAAAAAGAPQMJ6nhGP6w=" + }, + "subViews": [ + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAPQP0snvrEeE=", + "_parent": { + "$ref": "AAAAAAGAPQMJ63hPGHg=" + }, + "model": { + "$ref": "AAAAAAGAPQP0jXviawc=" + }, + "font": "Arial;13;0", + "left": 1717, + "top": 1669, + "width": 160.7861328125, + "height": 13, + "text": "+clone()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAPQP6XHwh97M=", + "_parent": { + "$ref": "AAAAAAGAPQMJ63hPGHg=" + }, + "model": { + "$ref": "AAAAAAGAPQP6OHwYjDU=" + }, + "font": "Arial;13;0", + "left": 1717, + "top": 1684, + "width": 160.7861328125, + "height": 13, + "text": "+fromJSON()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAPQP9KXxFN3I=", + "_parent": { + "$ref": "AAAAAAGAPQMJ63hPGHg=" + }, + "model": { + "$ref": "AAAAAAGAPQP8/nw8tdI=" + }, + "font": "Arial;13;0", + "left": 1717, + "top": 1699, + "width": 160.7861328125, + "height": 13, + "text": "+toJSON()", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 1712, + "top": 1664, + "width": 170.7861328125, + "height": 53 + }, + { + "_type": "UMLReceptionCompartmentView", + "_id": "AAAAAAGAPQMJ63hQXkg=", + "_parent": { + "$ref": "AAAAAAGAPQMJ63hIQC8=" + }, + "model": { + "$ref": "AAAAAAGAPQMJ6nhGP6w=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 544, + "top": 960, + "width": 10, + "height": 10 + }, + { + "_type": "UMLTemplateParameterCompartmentView", + "_id": "AAAAAAGAPQMJ63hRc7s=", + "_parent": { + "$ref": "AAAAAAGAPQMJ63hIQC8=" + }, + "model": { + "$ref": "AAAAAAGAPQMJ6nhGP6w=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 544, + "top": 960, + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "containerChangeable": true, + "left": 1712, + "top": 1496, + "width": 170.7861328125, + "height": 221, + "nameCompartment": { + "$ref": "AAAAAAGAPQMJ63hJTUk=" + }, + "attributeCompartment": { + "$ref": "AAAAAAGAPQMJ63hOhZk=" + }, + "operationCompartment": { + "$ref": "AAAAAAGAPQMJ63hPGHg=" + }, + "receptionCompartment": { + "$ref": "AAAAAAGAPQMJ63hQXkg=" + }, + "templateParameterCompartment": { + "$ref": "AAAAAAGAPQMJ63hRc7s=" + } + }, + { + "_type": "UMLGeneralizationView", + "_id": "AAAAAAGAPQQ/rX0URLo=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAPQQ/rX0Sm58=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPQQ/rX0VtkM=", + "_parent": { + "$ref": "AAAAAAGAPQQ/rX0URLo=" + }, + "model": { + "$ref": "AAAAAAGAPQQ/rX0Sm58=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1666, + "top": 1440, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAPQQ/rX0URLo=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPQQ/rX0Wl60=", + "_parent": { + "$ref": "AAAAAAGAPQQ/rX0URLo=" + }, + "model": { + "$ref": "AAAAAAGAPQQ/rX0Sm58=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 1654, + "top": 1449, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAPQQ/rX0URLo=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPQQ/rX0XM6s=", + "_parent": { + "$ref": "AAAAAAGAPQQ/rX0URLo=" + }, + "model": { + "$ref": "AAAAAAGAPQQ/rX0Sm58=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1691, + "top": 1423, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAPQQ/rX0URLo=" + }, + "edgePosition": 1 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAPCD46KeYkpo=" + }, + "tail": { + "$ref": "AAAAAAGAPQMJ63hIQC8=" + }, + "lineStyle": 1, + "points": "1719:1495;1639:1381", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAPQQ/rX0VtkM=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAPQQ/rX0Wl60=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAPQQ/rX0XM6s=" + } + }, + { + "_type": "UMLAssociationView", + "_id": "AAAAAAGAPQTeDH32cnY=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAPQTeDH3yZgM=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPQTeDX33gTs=", + "_parent": { + "$ref": "AAAAAAGAPQTeDH32cnY=" + }, + "model": { + "$ref": "AAAAAAGAPQTeDH3yZgM=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1521, + "top": 1590, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAPQTeDH32cnY=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPQTeDX34DKc=", + "_parent": { + "$ref": "AAAAAAGAPQTeDH32cnY=" + }, + "model": { + "$ref": "AAAAAAGAPQTeDH3yZgM=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 1525, + "top": 1605, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAPQTeDH32cnY=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPQTeDX35nSg=", + "_parent": { + "$ref": "AAAAAAGAPQTeDH32cnY=" + }, + "model": { + "$ref": "AAAAAAGAPQTeDH3yZgM=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1514, + "top": 1561, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAPQTeDH32cnY=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPQTeDX3618o=", + "_parent": { + "$ref": "AAAAAAGAPQTeDH32cnY=" + }, + "model": { + "$ref": "AAAAAAGAPQTeDH3zm0M=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1504, + "top": 1594, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAPQTeDH32cnY=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPQTeDX37f5c=", + "_parent": { + "$ref": "AAAAAAGAPQTeDH32cnY=" + }, + "model": { + "$ref": "AAAAAAGAPQTeDH3zm0M=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1504, + "top": 1607, + "height": 13, + "alpha": 0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAPQTeDH32cnY=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPQTeDX38gSU=", + "_parent": { + "$ref": "AAAAAAGAPQTeDH32cnY=" + }, + "model": { + "$ref": "AAAAAAGAPQTeDH3zm0M=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1503, + "top": 1566, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAPQTeDH32cnY=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPQTeDX39Vcs=", + "_parent": { + "$ref": "AAAAAAGAPQTeDH32cnY=" + }, + "model": { + "$ref": "AAAAAAGAPQTeDH30fcw=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1538, + "top": 1588, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAPQTeDH32cnY=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPQTeDX3+aTI=", + "_parent": { + "$ref": "AAAAAAGAPQTeDH32cnY=" + }, + "model": { + "$ref": "AAAAAAGAPQTeDH30fcw=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1542, + "top": 1600, + "height": 13, + "alpha": -0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAPQTeDH32cnY=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPQTeDX3/PDY=", + "_parent": { + "$ref": "AAAAAAGAPQTeDH32cnY=" + }, + "model": { + "$ref": "AAAAAAGAPQTeDH30fcw=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1529, + "top": 1561, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAPQTeDH32cnY=" + } + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAPQTeDX4Auts=", + "_parent": { + "$ref": "AAAAAAGAPQTeDH32cnY=" + }, + "model": { + "$ref": "AAAAAAGAPQTeDH3zm0M=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 576, + "top": 1024, + "width": 10, + "height": 10 + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAPQTeDX4BSzc=", + "_parent": { + "$ref": "AAAAAAGAPQTeDH32cnY=" + }, + "model": { + "$ref": "AAAAAAGAPQTeDH30fcw=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 576, + "top": 1024, + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAPAMK75wCNw0=" + }, + "tail": { + "$ref": "AAAAAAGAPCnyRqqSpVk=" + }, + "lineStyle": 1, + "points": "1527:1581;1510:1584", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAPQTeDX33gTs=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAPQTeDX34DKc=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAPQTeDX35nSg=" + }, + "tailRoleNameLabel": { + "$ref": "AAAAAAGAPQTeDX3618o=" + }, + "tailPropertyLabel": { + "$ref": "AAAAAAGAPQTeDX37f5c=" + }, + "tailMultiplicityLabel": { + "$ref": "AAAAAAGAPQTeDX38gSU=" + }, + "headRoleNameLabel": { + "$ref": "AAAAAAGAPQTeDX39Vcs=" + }, + "headPropertyLabel": { + "$ref": "AAAAAAGAPQTeDX3+aTI=" + }, + "headMultiplicityLabel": { + "$ref": "AAAAAAGAPQTeDX3/PDY=" + }, + "tailQualifiersCompartment": { + "$ref": "AAAAAAGAPQTeDX4Auts=" + }, + "headQualifiersCompartment": { + "$ref": "AAAAAAGAPQTeDX4BSzc=" + } + }, + { + "_type": "UMLAssociationView", + "_id": "AAAAAAGAPQTsHn5p+g8=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAPQTsGX5l7I8=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPQTsHn5qTWg=", + "_parent": { + "$ref": "AAAAAAGAPQTsHn5p+g8=" + }, + "model": { + "$ref": "AAAAAAGAPQTsGX5l7I8=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1609, + "top": 1670, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAPQTsHn5p+g8=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPQTsHn5rB/w=", + "_parent": { + "$ref": "AAAAAAGAPQTsHn5p+g8=" + }, + "model": { + "$ref": "AAAAAAGAPQTsGX5l7I8=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 1609, + "top": 1685, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAPQTsHn5p+g8=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPQTsHn5stGY=", + "_parent": { + "$ref": "AAAAAAGAPQTsHn5p+g8=" + }, + "model": { + "$ref": "AAAAAAGAPQTsGX5l7I8=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1610, + "top": 1640, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAPQTsHn5p+g8=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPQTsHn5tREM=", + "_parent": { + "$ref": "AAAAAAGAPQTsHn5p+g8=" + }, + "model": { + "$ref": "AAAAAAGAPQTsGX5mdOE=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1686, + "top": 1669, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAPQTsHn5p+g8=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPQTsHn5uFV8=", + "_parent": { + "$ref": "AAAAAAGAPQTsHn5p+g8=" + }, + "model": { + "$ref": "AAAAAAGAPQTsGX5mdOE=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1683, + "top": 1683, + "height": 13, + "alpha": 0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAPQTsHn5p+g8=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPQTsHn5vvws=", + "_parent": { + "$ref": "AAAAAAGAPQTsHn5p+g8=" + }, + "model": { + "$ref": "AAAAAAGAPQTsGX5mdOE=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1690, + "top": 1642, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAPQTsHn5p+g8=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPQTsHn5wMFQ=", + "_parent": { + "$ref": "AAAAAAGAPQTsHn5p+g8=" + }, + "model": { + "$ref": "AAAAAAGAPQTsGX5nfsI=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1534, + "top": 1669, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAPQTsHn5p+g8=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPQTsHn5xqQc=", + "_parent": { + "$ref": "AAAAAAGAPQTsHn5p+g8=" + }, + "model": { + "$ref": "AAAAAAGAPQTsGX5nfsI=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1537, + "top": 1683, + "height": 13, + "alpha": -0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAPQTsHn5p+g8=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPQTsHn5y2DI=", + "_parent": { + "$ref": "AAAAAAGAPQTsHn5p+g8=" + }, + "model": { + "$ref": "AAAAAAGAPQTsGX5nfsI=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1530, + "top": 1642, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAPQTsHn5p+g8=" + } + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAPQTsHn5zeYw=", + "_parent": { + "$ref": "AAAAAAGAPQTsHn5p+g8=" + }, + "model": { + "$ref": "AAAAAAGAPQTsGX5mdOE=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 576, + "top": 1024, + "width": 10, + "height": 10 + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAPQTsHn505Lo=", + "_parent": { + "$ref": "AAAAAAGAPQTsHn5p+g8=" + }, + "model": { + "$ref": "AAAAAAGAPQTsGX5nfsI=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 576, + "top": 1024, + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAPAMK75wCNw0=" + }, + "tail": { + "$ref": "AAAAAAGAPQMJ63hIQC8=" + }, + "points": "1712:1661;1509:1661", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAPQTsHn5qTWg=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAPQTsHn5rB/w=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAPQTsHn5stGY=" + }, + "tailRoleNameLabel": { + "$ref": "AAAAAAGAPQTsHn5tREM=" + }, + "tailPropertyLabel": { + "$ref": "AAAAAAGAPQTsHn5uFV8=" + }, + "tailMultiplicityLabel": { + "$ref": "AAAAAAGAPQTsHn5vvws=" + }, + "headRoleNameLabel": { + "$ref": "AAAAAAGAPQTsHn5wMFQ=" + }, + "headPropertyLabel": { + "$ref": "AAAAAAGAPQTsHn5xqQc=" + }, + "headMultiplicityLabel": { + "$ref": "AAAAAAGAPQTsHn5y2DI=" + }, + "tailQualifiersCompartment": { + "$ref": "AAAAAAGAPQTsHn5zeYw=" + }, + "headQualifiersCompartment": { + "$ref": "AAAAAAGAPQTsHn505Lo=" + } + }, + { + "_type": "UMLClassView", + "_id": "AAAAAAGAPQff+YT4B2c=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "subViews": [ + { + "_type": "UMLNameCompartmentView", + "_id": "AAAAAAGAPQff+YT5brs=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT4B2c=" + }, + "model": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "subViews": [ + { + "_type": "LabelView", + "_id": "AAAAAAGAPQff+YT6ibA=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT5brs=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 912, + "top": 1984, + "height": 13 + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAPQff+YT73zw=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT5brs=" + }, + "font": "Arial;13;1", + "left": 1909, + "top": 1287, + "width": 121.76708984375, + "height": 13, + "text": "TextSymbol" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAPQff+YT8ACs=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT5brs=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 912, + "top": 1984, + "width": 73.67724609375, + "height": 13, + "text": "(from Model)" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAPQff+oT9tm4=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT5brs=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 912, + "top": 1984, + "height": 13, + "horizontalAlignment": 1 + } + ], + "font": "Arial;13;0", + "left": 1904, + "top": 1280, + "width": 131.76708984375, + "height": 25, + "stereotypeLabel": { + "$ref": "AAAAAAGAPQff+YT6ibA=" + }, + "nameLabel": { + "$ref": "AAAAAAGAPQff+YT73zw=" + }, + "namespaceLabel": { + "$ref": "AAAAAAGAPQff+YT8ACs=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAPQff+oT9tm4=" + } + }, + { + "_type": "UMLAttributeCompartmentView", + "_id": "AAAAAAGAPQff+oT+U9k=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT4B2c=" + }, + "model": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "subViews": [ + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPSAILpBJc2o=", + "_parent": { + "$ref": "AAAAAAGAPQff+oT+U9k=" + }, + "model": { + "$ref": "AAAAAAGAPSAICJA6v/o=" + }, + "font": "Arial;13;0", + "left": 1909, + "top": 1310, + "width": 121.76708984375, + "height": 13, + "text": "+type", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPSAORZCvhv0=", + "_parent": { + "$ref": "AAAAAAGAPQff+oT+U9k=" + }, + "model": { + "$ref": "AAAAAAGAPSAOIJCgc6M=" + }, + "font": "Arial;13;0", + "left": 1909, + "top": 1325, + "width": 121.76708984375, + "height": 13, + "text": "+angle", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPSARAZDxqV8=", + "_parent": { + "$ref": "AAAAAAGAPQff+oT+U9k=" + }, + "model": { + "$ref": "AAAAAAGAPSAQ2ZDiIF4=" + }, + "font": "Arial;13;0", + "left": 1909, + "top": 1340, + "width": 121.76708984375, + "height": 13, + "text": "+backgroundColor", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPSATSZEzAa4=", + "_parent": { + "$ref": "AAAAAAGAPQff+oT+U9k=" + }, + "model": { + "$ref": "AAAAAAGAPSATI5Ek4IM=" + }, + "font": "Arial;13;0", + "left": 1909, + "top": 1355, + "width": 121.76708984375, + "height": 13, + "text": "+borderLineColor", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPSAVNZF1V5s=", + "_parent": { + "$ref": "AAAAAAGAPQff+oT+U9k=" + }, + "model": { + "$ref": "AAAAAAGAPSAVEZFmIR8=" + }, + "font": "Arial;13;0", + "left": 1909, + "top": 1370, + "width": 121.76708984375, + "height": 13, + "text": "+borderLineSize", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPSAXNpG3Gb0=", + "_parent": { + "$ref": "AAAAAAGAPQff+oT+U9k=" + }, + "model": { + "$ref": "AAAAAAGAPSAXEZGod8M=" + }, + "font": "Arial;13;0", + "left": 1909, + "top": 1385, + "width": 121.76708984375, + "height": 13, + "text": "+color", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPSAZe5H5/4w=", + "_parent": { + "$ref": "AAAAAAGAPQff+oT+U9k=" + }, + "model": { + "$ref": "AAAAAAGAPSAZV5HqksU=" + }, + "font": "Arial;13;0", + "left": 1909, + "top": 1400, + "width": 121.76708984375, + "height": 13, + "text": "+font: Font", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPSAcbJI7qJg=", + "_parent": { + "$ref": "AAAAAAGAPQff+oT+U9k=" + }, + "model": { + "$ref": "AAAAAAGAPSAcR5Is1X4=" + }, + "font": "Arial;13;0", + "left": 1909, + "top": 1415, + "width": 121.76708984375, + "height": 13, + "text": "+haloColor", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPSAebJJ9kFc=", + "_parent": { + "$ref": "AAAAAAGAPQff+oT+U9k=" + }, + "model": { + "$ref": "AAAAAAGAPSAeRZJuhG0=" + }, + "font": "Arial;13;0", + "left": 1909, + "top": 1430, + "width": 121.76708984375, + "height": 13, + "text": "+haloSize", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPSAgsJK/da8=", + "_parent": { + "$ref": "AAAAAAGAPQff+oT+U9k=" + }, + "model": { + "$ref": "AAAAAAGAPSAgi5KwfFQ=" + }, + "font": "Arial;13;0", + "left": 1909, + "top": 1445, + "width": 121.76708984375, + "height": 13, + "text": "+horizontalAlignment", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPSAi3JMB7Lg=", + "_parent": { + "$ref": "AAAAAAGAPQff+oT+U9k=" + }, + "model": { + "$ref": "AAAAAAGAPSAitpLy8xw=" + }, + "font": "Arial;13;0", + "left": 1909, + "top": 1460, + "width": 121.76708984375, + "height": 13, + "text": "+kerning", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPSAlBZNDIlM=", + "_parent": { + "$ref": "AAAAAAGAPQff+oT+U9k=" + }, + "model": { + "$ref": "AAAAAAGAPSAk2pM04uU=" + }, + "font": "Arial;13;0", + "left": 1909, + "top": 1475, + "width": 121.76708984375, + "height": 13, + "text": "+lineHeight", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPSAnOJOFtK8=", + "_parent": { + "$ref": "AAAAAAGAPQff+oT+U9k=" + }, + "model": { + "$ref": "AAAAAAGAPSAnFJN2K9s=" + }, + "font": "Arial;13;0", + "left": 1909, + "top": 1490, + "width": 121.76708984375, + "height": 13, + "text": "+lineWidth", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPSApW5PHPKo=", + "_parent": { + "$ref": "AAAAAAGAPQff+oT+U9k=" + }, + "model": { + "$ref": "AAAAAAGAPSApNZO4TrY=" + }, + "font": "Arial;13;0", + "left": 1909, + "top": 1505, + "width": 121.76708984375, + "height": 13, + "text": "+rotated", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPSDpdpiVETQ=", + "_parent": { + "$ref": "AAAAAAGAPQff+oT+U9k=" + }, + "model": { + "$ref": "AAAAAAGAPSDpSpiG08U=" + }, + "font": "Arial;13;0", + "left": 1909, + "top": 1520, + "width": 121.76708984375, + "height": 13, + "text": "+text", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPSDysJkT9m8=", + "_parent": { + "$ref": "AAAAAAGAPQff+oT+U9k=" + }, + "model": { + "$ref": "AAAAAAGAPSDyipkENGA=" + }, + "font": "Arial;13;0", + "left": 1909, + "top": 1535, + "width": 121.76708984375, + "height": 13, + "text": "+verticalAlignment", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPSD1pZlVxKo=", + "_parent": { + "$ref": "AAAAAAGAPQff+oT+U9k=" + }, + "model": { + "$ref": "AAAAAAGAPSD1fJlGhvw=" + }, + "font": "Arial;13;0", + "left": 1909, + "top": 1550, + "width": 121.76708984375, + "height": 13, + "text": "+xoffset", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPSFI3pt8ews=", + "_parent": { + "$ref": "AAAAAAGAPQff+oT+U9k=" + }, + "model": { + "$ref": "AAAAAAGAPSFIs5ttMYs=" + }, + "font": "Arial;13;0", + "left": 1909, + "top": 1565, + "width": 121.76708984375, + "height": 13, + "text": "+yoffset", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 1904, + "top": 1305, + "width": 131.76708984375, + "height": 278 + }, + { + "_type": "UMLOperationCompartmentView", + "_id": "AAAAAAGAPQff+oT/0h0=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT4B2c=" + }, + "model": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "subViews": [ + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAPR/v/48X06k=", + "_parent": { + "$ref": "AAAAAAGAPQff+oT/0h0=" + }, + "model": { + "$ref": "AAAAAAGAPR/v2o8IG9I=" + }, + "font": "Arial;13;0", + "left": 1909, + "top": 1588, + "width": 121.76708984375, + "height": 13, + "text": "+clone()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAPR/8/I+hiJ0=", + "_parent": { + "$ref": "AAAAAAGAPQff+oT/0h0=" + }, + "model": { + "$ref": "AAAAAAGAPR/81I+SarM=" + }, + "font": "Arial;13;0", + "left": 1909, + "top": 1603, + "width": 121.76708984375, + "height": 13, + "text": "+fromJSON()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAPR//VY/j/To=", + "_parent": { + "$ref": "AAAAAAGAPQff+oT/0h0=" + }, + "model": { + "$ref": "AAAAAAGAPR//MI/UW7w=" + }, + "font": "Arial;13;0", + "left": 1909, + "top": 1618, + "width": 121.76708984375, + "height": 13, + "text": "+toJSON()", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 1904, + "top": 1583, + "width": 131.76708984375, + "height": 53 + }, + { + "_type": "UMLReceptionCompartmentView", + "_id": "AAAAAAGAPQff+oUASTM=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT4B2c=" + }, + "model": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 456, + "top": 992, + "width": 10, + "height": 10 + }, + { + "_type": "UMLTemplateParameterCompartmentView", + "_id": "AAAAAAGAPQff+oUBbVo=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT4B2c=" + }, + "model": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 456, + "top": 992, + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "containerChangeable": true, + "left": 1904, + "top": 1280, + "width": 131.76708984375, + "height": 356, + "nameCompartment": { + "$ref": "AAAAAAGAPQff+YT5brs=" + }, + "attributeCompartment": { + "$ref": "AAAAAAGAPQff+oT+U9k=" + }, + "operationCompartment": { + "$ref": "AAAAAAGAPQff+oT/0h0=" + }, + "receptionCompartment": { + "$ref": "AAAAAAGAPQff+oUASTM=" + }, + "templateParameterCompartment": { + "$ref": "AAAAAAGAPQff+oUBbVo=" + } + }, + { + "_type": "UMLGeneralizationView", + "_id": "AAAAAAGAPQhWsoWnkVI=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAPQhWsoWl3dc=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPQhWsoWo0Ew=", + "_parent": { + "$ref": "AAAAAAGAPQhWsoWnkVI=" + }, + "model": { + "$ref": "AAAAAAGAPQhWsoWl3dc=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1719, + "top": 1274, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAPQhWsoWnkVI=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPQhWsoWpfhI=", + "_parent": { + "$ref": "AAAAAAGAPQhWsoWnkVI=" + }, + "model": { + "$ref": "AAAAAAGAPQhWsoWl3dc=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 1710, + "top": 1286, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAPQhWsoWnkVI=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPQhWsoWqvn0=", + "_parent": { + "$ref": "AAAAAAGAPQhWsoWnkVI=" + }, + "model": { + "$ref": "AAAAAAGAPQhWsoWl3dc=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1738, + "top": 1251, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAPQhWsoWnkVI=" + }, + "edgePosition": 1 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAO1MYek/JnBg=" + }, + "tail": { + "$ref": "AAAAAAGAPQff+YT4B2c=" + }, + "lineStyle": 1, + "points": "1903:1405;1555:1133", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAPQhWsoWo0Ew=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAPQhWsoWpfhI=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAPQhWsoWqvn0=" + } + }, + { + "_type": "UMLClassView", + "_id": "AAAAAAGAPS3xYKL0b/4=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAPS3xX6LyqAQ=" + }, + "subViews": [ + { + "_type": "UMLNameCompartmentView", + "_id": "AAAAAAGAPS3xYKL1KHw=", + "_parent": { + "$ref": "AAAAAAGAPS3xYKL0b/4=" + }, + "model": { + "$ref": "AAAAAAGAPS3xX6LyqAQ=" + }, + "subViews": [ + { + "_type": "LabelView", + "_id": "AAAAAAGAPS3xYKL2ebU=", + "_parent": { + "$ref": "AAAAAAGAPS3xYKL1KHw=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 976, + "top": 1952, + "height": 13 + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAPS3xYKL35s8=", + "_parent": { + "$ref": "AAAAAAGAPS3xYKL1KHw=" + }, + "font": "Arial;13;1", + "left": 1933, + "top": 1679, + "width": 80.57080078125, + "height": 13, + "text": "Font" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAPS3xYKL41mk=", + "_parent": { + "$ref": "AAAAAAGAPS3xYKL1KHw=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 976, + "top": 1952, + "width": 73.67724609375, + "height": 13, + "text": "(from Model)" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAPS3xYKL5gP4=", + "_parent": { + "$ref": "AAAAAAGAPS3xYKL1KHw=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 976, + "top": 1952, + "height": 13, + "horizontalAlignment": 1 + } + ], + "font": "Arial;13;0", + "left": 1928, + "top": 1672, + "width": 90.57080078125, + "height": 25, + "stereotypeLabel": { + "$ref": "AAAAAAGAPS3xYKL2ebU=" + }, + "nameLabel": { + "$ref": "AAAAAAGAPS3xYKL35s8=" + }, + "namespaceLabel": { + "$ref": "AAAAAAGAPS3xYKL41mk=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAPS3xYKL5gP4=" + } + }, + { + "_type": "UMLAttributeCompartmentView", + "_id": "AAAAAAGAPS3xYKL6R/Y=", + "_parent": { + "$ref": "AAAAAAGAPS3xYKL0b/4=" + }, + "model": { + "$ref": "AAAAAAGAPS3xX6LyqAQ=" + }, + "subViews": [ + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPS4SpKO7AQ4=", + "_parent": { + "$ref": "AAAAAAGAPS3xYKL6R/Y=" + }, + "model": { + "$ref": "AAAAAAGAPS4SfqOsEp4=" + }, + "font": "Arial;13;0", + "left": 1933, + "top": 1702, + "width": 80.57080078125, + "height": 13, + "text": "+decoration", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPS4ZkqQheL8=", + "_parent": { + "$ref": "AAAAAAGAPS3xYKL6R/Y=" + }, + "model": { + "$ref": "AAAAAAGAPS4ZY6QSK9k=" + }, + "font": "Arial;13;0", + "left": 1933, + "top": 1717, + "width": 80.57080078125, + "height": 13, + "text": "+family", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPS4cCaRjfvc=", + "_parent": { + "$ref": "AAAAAAGAPS3xYKL6R/Y=" + }, + "model": { + "$ref": "AAAAAAGAPS4b4KRUp0w=" + }, + "font": "Arial;13;0", + "left": 1933, + "top": 1732, + "width": 80.57080078125, + "height": 13, + "text": "+size", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPS4eT6SlCv0=", + "_parent": { + "$ref": "AAAAAAGAPS3xYKL6R/Y=" + }, + "model": { + "$ref": "AAAAAAGAPS4eKqSWMIQ=" + }, + "font": "Arial;13;0", + "left": 1933, + "top": 1747, + "width": 80.57080078125, + "height": 13, + "text": "+style", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAPS4gZ6TnLcg=", + "_parent": { + "$ref": "AAAAAAGAPS3xYKL6R/Y=" + }, + "model": { + "$ref": "AAAAAAGAPS4gOqTYZto=" + }, + "font": "Arial;13;0", + "left": 1933, + "top": 1762, + "width": 80.57080078125, + "height": 13, + "text": "+weight", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 1928, + "top": 1697, + "width": 90.57080078125, + "height": 83 + }, + { + "_type": "UMLOperationCompartmentView", + "_id": "AAAAAAGAPS3xYKL7b/k=", + "_parent": { + "$ref": "AAAAAAGAPS3xYKL0b/4=" + }, + "model": { + "$ref": "AAAAAAGAPS3xX6LyqAQ=" + }, + "subViews": [ + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAPS8byazlViU=", + "_parent": { + "$ref": "AAAAAAGAPS3xYKL7b/k=" + }, + "model": { + "$ref": "AAAAAAGAPS8boazWojk=" + }, + "font": "Arial;13;0", + "left": 1933, + "top": 1785, + "width": 80.57080078125, + "height": 13, + "text": "+clone()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAPS8jN61jd0Y=", + "_parent": { + "$ref": "AAAAAAGAPS3xYKL7b/k=" + }, + "model": { + "$ref": "AAAAAAGAPS8jDq1UJEA=" + }, + "font": "Arial;13;0", + "left": 1933, + "top": 1800, + "width": 80.57080078125, + "height": 13, + "text": "+fromJSON()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAPS8lh620UOM=", + "_parent": { + "$ref": "AAAAAAGAPS3xYKL7b/k=" + }, + "model": { + "$ref": "AAAAAAGAPS8lYK2li7A=" + }, + "font": "Arial;13;0", + "left": 1933, + "top": 1815, + "width": 80.57080078125, + "height": 13, + "text": "+toJSON()", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 1928, + "top": 1780, + "width": 90.57080078125, + "height": 53 + }, + { + "_type": "UMLReceptionCompartmentView", + "_id": "AAAAAAGAPS3xYKL8wkA=", + "_parent": { + "$ref": "AAAAAAGAPS3xYKL0b/4=" + }, + "model": { + "$ref": "AAAAAAGAPS3xX6LyqAQ=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 488, + "top": 976, + "width": 10, + "height": 10 + }, + { + "_type": "UMLTemplateParameterCompartmentView", + "_id": "AAAAAAGAPS3xYKL9dXs=", + "_parent": { + "$ref": "AAAAAAGAPS3xYKL0b/4=" + }, + "model": { + "$ref": "AAAAAAGAPS3xX6LyqAQ=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 488, + "top": 976, + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "containerChangeable": true, + "left": 1928, + "top": 1672, + "width": 90.57080078125, + "height": 161, + "nameCompartment": { + "$ref": "AAAAAAGAPS3xYKL1KHw=" + }, + "attributeCompartment": { + "$ref": "AAAAAAGAPS3xYKL6R/Y=" + }, + "operationCompartment": { + "$ref": "AAAAAAGAPS3xYKL7b/k=" + }, + "receptionCompartment": { + "$ref": "AAAAAAGAPS3xYKL8wkA=" + }, + "templateParameterCompartment": { + "$ref": "AAAAAAGAPS3xYKL9dXs=" + } + }, + { + "_type": "UMLAssociationView", + "_id": "AAAAAAGAPS6KpabfujQ=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAPS6KpKbbg5c=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPS6KpabgWK0=", + "_parent": { + "$ref": "AAAAAAGAPS6KpabfujQ=" + }, + "model": { + "$ref": "AAAAAAGAPS6KpKbbg5c=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1985, + "top": 1646, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAPS6KpabfujQ=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPS6KpabhLRk=", + "_parent": { + "$ref": "AAAAAAGAPS6KpabfujQ=" + }, + "model": { + "$ref": "AAAAAAGAPS6KpKbbg5c=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 2000, + "top": 1646, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAPS6KpabfujQ=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPS6KpabiqxA=", + "_parent": { + "$ref": "AAAAAAGAPS6KpabfujQ=" + }, + "model": { + "$ref": "AAAAAAGAPS6KpKbbg5c=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1956, + "top": 1647, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAPS6KpabfujQ=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPS6KpabjOP8=", + "_parent": { + "$ref": "AAAAAAGAPS6KpabfujQ=" + }, + "model": { + "$ref": "AAAAAAGAPS6KpKbc4jk=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1986, + "top": 1655, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAPS6KpabfujQ=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPS6KpabkrpE=", + "_parent": { + "$ref": "AAAAAAGAPS6KpabfujQ=" + }, + "model": { + "$ref": "AAAAAAGAPS6KpKbc4jk=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1999, + "top": 1658, + "height": 13, + "alpha": 0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAPS6KpabfujQ=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPS6KpabltA0=", + "_parent": { + "$ref": "AAAAAAGAPS6KpabfujQ=" + }, + "model": { + "$ref": "AAAAAAGAPS6KpKbc4jk=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1958, + "top": 1651, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAPS6KpabfujQ=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPS6Kpabmkkw=", + "_parent": { + "$ref": "AAAAAAGAPS6KpabfujQ=" + }, + "model": { + "$ref": "AAAAAAGAPS6KpKbd/TA=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1986, + "top": 1639, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAPS6KpabfujQ=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPS6KpabnrMk=", + "_parent": { + "$ref": "AAAAAAGAPS6KpabfujQ=" + }, + "model": { + "$ref": "AAAAAAGAPS6KpKbd/TA=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1999, + "top": 1636, + "height": 13, + "alpha": -0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAPS6KpabfujQ=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAPS6Kpabo7ro=", + "_parent": { + "$ref": "AAAAAAGAPS6KpabfujQ=" + }, + "model": { + "$ref": "AAAAAAGAPS6KpKbd/TA=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 1958, + "top": 1643, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAPS6KpabfujQ=" + } + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAPS6KpabpliQ=", + "_parent": { + "$ref": "AAAAAAGAPS6KpabfujQ=" + }, + "model": { + "$ref": "AAAAAAGAPS6KpKbc4jk=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 576, + "top": 1024, + "width": 10, + "height": 10 + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAPS6KpabqOVc=", + "_parent": { + "$ref": "AAAAAAGAPS6KpabfujQ=" + }, + "model": { + "$ref": "AAAAAAGAPS6KpKbd/TA=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 576, + "top": 1024, + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAPS3xYKL0b/4=" + }, + "tail": { + "$ref": "AAAAAAGAPQff+YT4B2c=" + }, + "lineStyle": 1, + "points": "1971:1636;1971:1671", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAPS6KpabgWK0=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAPS6KpabhLRk=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAPS6KpabiqxA=" + }, + "tailRoleNameLabel": { + "$ref": "AAAAAAGAPS6KpabjOP8=" + }, + "tailPropertyLabel": { + "$ref": "AAAAAAGAPS6KpabkrpE=" + }, + "tailMultiplicityLabel": { + "$ref": "AAAAAAGAPS6KpabltA0=" + }, + "headRoleNameLabel": { + "$ref": "AAAAAAGAPS6Kpabmkkw=" + }, + "headPropertyLabel": { + "$ref": "AAAAAAGAPS6KpabnrMk=" + }, + "headMultiplicityLabel": { + "$ref": "AAAAAAGAPS6Kpabo7ro=" + }, + "tailQualifiersCompartment": { + "$ref": "AAAAAAGAPS6KpabpliQ=" + }, + "headQualifiersCompartment": { + "$ref": "AAAAAAGAPS6KpabqOVc=" + } + } + ] + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAO1MYeU/HxR0=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "Symbol", + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAO1M4mE/xJtQ=", + "_parent": { + "$ref": "AAAAAAGAO1MYeU/HxR0=" + }, + "name": "type", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAO1NDTE/3Mpo=", + "_parent": { + "$ref": "AAAAAAGAO1MYeU/HxR0=" + }, + "name": "color", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAO1NFuk/9tZ0=", + "_parent": { + "$ref": "AAAAAAGAO1MYeU/HxR0=" + }, + "name": "opacity", + "visibility": "private", + "type": "" + } + ], + "operations": [ + { + "_type": "UMLOperation", + "_id": "AAAAAAGAO1QIuVAHl58=", + "_parent": { + "$ref": "AAAAAAGAO1MYeU/HxR0=" + }, + "name": "fromJSON" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAO1QRq1ANbHM=", + "_parent": { + "$ref": "AAAAAAGAO1MYeU/HxR0=" + }, + "name": "toJSON" + } + ], + "isAbstract": true + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAO4K5hVAX2y8=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "MarkerSymbol", + "ownedElements": [ + { + "_type": "UMLGeneralization", + "_id": "AAAAAAGAO4k9d5q8o/w=", + "_parent": { + "$ref": "AAAAAAGAO4K5hVAX2y8=" + }, + "source": { + "$ref": "AAAAAAGAO4K5hVAX2y8=" + }, + "target": { + "$ref": "AAAAAAGAO1MYeU/HxR0=" + } + } + ], + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAO4pz5Zr153M=", + "_parent": { + "$ref": "AAAAAAGAO4K5hVAX2y8=" + }, + "name": "type", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAO4mTwJrPb7w=", + "_parent": { + "$ref": "AAAAAAGAO4K5hVAX2y8=" + }, + "name": "angle", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAO4qdgZsAE80=", + "_parent": { + "$ref": "AAAAAAGAO4K5hVAX2y8=" + }, + "name": "color", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAO4mfnZrVlig=", + "_parent": { + "$ref": "AAAAAAGAO4K5hVAX2y8=" + }, + "name": "xoffset", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAO4mihZrbRuU=", + "_parent": { + "$ref": "AAAAAAGAO4K5hVAX2y8=" + }, + "name": "yoffset", + "type": "" + } + ], + "operations": [ + { + "_type": "UMLOperation", + "_id": "AAAAAAGAO4nh+prkPOw=", + "_parent": { + "$ref": "AAAAAAGAO4K5hVAX2y8=" + }, + "name": "fromJSON" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAO4n8mJrrxks=", + "_parent": { + "$ref": "AAAAAAGAO4K5hVAX2y8=" + }, + "name": "toJSON" + } + ], + "isAbstract": true + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAO5gALZsNaqc=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "SimpleMarkerSymbol", + "ownedElements": [ + { + "_type": "UMLGeneralization", + "_id": "AAAAAAGAO5hIZ5s7B30=", + "_parent": { + "$ref": "AAAAAAGAO5gALZsNaqc=" + }, + "source": { + "$ref": "AAAAAAGAO5gALZsNaqc=" + }, + "target": { + "$ref": "AAAAAAGAO4K5hVAX2y8=" + } + }, + { + "_type": "UMLAssociation", + "_id": "AAAAAAGAPAUdsZyKUJw=", + "_parent": { + "$ref": "AAAAAAGAO5gALZsNaqc=" + }, + "end1": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAPAUdsZyL/EI=", + "_parent": { + "$ref": "AAAAAAGAPAUdsZyKUJw=" + }, + "reference": { + "$ref": "AAAAAAGAO5gALZsNaqc=" + } + }, + "end2": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAPAUdsZyMSoA=", + "_parent": { + "$ref": "AAAAAAGAPAUdsZyKUJw=" + }, + "reference": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + } + } + }, + { + "_type": "UMLAssociation", + "_id": "AAAAAAGAPAZXyJz3JCA=", + "_parent": { + "$ref": "AAAAAAGAO5gALZsNaqc=" + }, + "end1": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAPAZXyJz4H6A=", + "_parent": { + "$ref": "AAAAAAGAPAZXyJz3JCA=" + }, + "reference": { + "$ref": "AAAAAAGAO5gALZsNaqc=" + }, + "navigable": false + }, + "end2": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAPAZXyJz5qwM=", + "_parent": { + "$ref": "AAAAAAGAPAZXyJz3JCA=" + }, + "reference": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + } + } + } + ], + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAO5hkNptMOqw=", + "_parent": { + "$ref": "AAAAAAGAO5gALZsNaqc=" + }, + "name": "type", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAO5hwUJtS32g=", + "_parent": { + "$ref": "AAAAAAGAO5gALZsNaqc=" + }, + "name": "angle", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAO5hygptYMPQ=", + "_parent": { + "$ref": "AAAAAAGAO5gALZsNaqc=" + }, + "name": "color", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAO5pIqJud5fM=", + "_parent": { + "$ref": "AAAAAAGAO5gALZsNaqc=" + }, + "name": "outline", + "type": "SimpleLineSymbol" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAO5h09pteLz4=", + "_parent": { + "$ref": "AAAAAAGAO5gALZsNaqc=" + }, + "name": "path", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAO5h23Jtkc88=", + "_parent": { + "$ref": "AAAAAAGAO5gALZsNaqc=" + }, + "name": "size", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAO5h4k5tqygA=", + "_parent": { + "$ref": "AAAAAAGAO5gALZsNaqc=" + }, + "name": "style", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAO5h7A5tw0cA=", + "_parent": { + "$ref": "AAAAAAGAO5gALZsNaqc=" + }, + "name": "xoffset", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAO5h9B5t2d9Q=", + "_parent": { + "$ref": "AAAAAAGAO5gALZsNaqc=" + }, + "name": "yoffset", + "type": "" + } + ], + "operations": [ + { + "_type": "UMLOperation", + "_id": "AAAAAAGAO5iajJuIBOs=", + "_parent": { + "$ref": "AAAAAAGAO5gALZsNaqc=" + }, + "name": "clone" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAO5iPxpt81pU=", + "_parent": { + "$ref": "AAAAAAGAO5gALZsNaqc=" + }, + "name": "fromJSON" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAO5iX6JuC7TA=", + "_parent": { + "$ref": "AAAAAAGAO5gALZsNaqc=" + }, + "name": "toJSON" + } + ] + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAPAEEB5uzp5s=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "LineSymbol", + "ownedElements": [ + { + "_type": "UMLGeneralization", + "_id": "AAAAAAGAPAMl+Jwq3y8=", + "_parent": { + "$ref": "AAAAAAGAPAEEB5uzp5s=" + }, + "source": { + "$ref": "AAAAAAGAPAEEB5uzp5s=" + }, + "target": { + "$ref": "AAAAAAGAO1MYeU/HxR0=" + } + } + ], + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPAKLVpvdNNE=", + "_parent": { + "$ref": "AAAAAAGAPAEEB5uzp5s=" + }, + "name": "type", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPAKRz5vj6lU=", + "_parent": { + "$ref": "AAAAAAGAPAEEB5uzp5s=" + }, + "name": "color", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPAKan5vpoKk=", + "_parent": { + "$ref": "AAAAAAGAPAEEB5uzp5s=" + }, + "name": "width", + "type": "" + } + ], + "operations": [ + { + "_type": "UMLOperation", + "_id": "AAAAAAGAPALS25vyQdo=", + "_parent": { + "$ref": "AAAAAAGAPAEEB5uzp5s=" + }, + "name": "fromJSON" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAPALeMZv49lY=", + "_parent": { + "$ref": "AAAAAAGAPAEEB5uzp5s=" + }, + "name": "toJSON" + } + ], + "isAbstract": true + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAPAMK75wAYR4=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "SimpleLineSymbol", + "ownedElements": [ + { + "_type": "UMLGeneralization", + "_id": "AAAAAAGAPAM0X5w7CQk=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + }, + "source": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + }, + "target": { + "$ref": "AAAAAAGAPAEEB5uzp5s=" + } + }, + { + "_type": "UMLAssociation", + "_id": "AAAAAAGAPAgXl59swT0=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + }, + "end1": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAPAgXl59tmOM=", + "_parent": { + "$ref": "AAAAAAGAPAgXl59swT0=" + }, + "reference": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + }, + "navigable": false + }, + "end2": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAPAgXl59uDWo=", + "_parent": { + "$ref": "AAAAAAGAPAgXl59swT0=" + }, + "reference": { + "$ref": "AAAAAAGAPAZ6f51PAmE=" + } + } + } + ], + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPAQZ0pxMviw=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + }, + "name": "type", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPAQglpxSlAw=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + }, + "name": "cap", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPAQjTpxYRgc=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + }, + "name": "color", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPAQlXpxeKLg=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + }, + "name": "join", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPAQnhpxkzMk=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + }, + "name": "marker", + "type": "LineSymbolMarker" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPAQprpxqv+k=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + }, + "name": "miterLimit", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPAQr7pxwm+c=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + }, + "name": "style", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPAQuFpx2vEw=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + }, + "name": "width", + "type": "" + } + ], + "operations": [ + { + "_type": "UMLOperation", + "_id": "AAAAAAGAPCvaqK3lziY=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + }, + "name": "clone" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAPCvhf64bbOg=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + }, + "name": "fromJSON" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAPCvkHq4/nNg=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + }, + "name": "toJSON" + } + ] + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAPAZ6f51PAmE=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "LineSymbolMarker", + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPAad+p2dGzE=", + "_parent": { + "$ref": "AAAAAAGAPAZ6f51PAmE=" + }, + "name": "type", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPAakl5275T8=", + "_parent": { + "$ref": "AAAAAAGAPAZ6f51PAmE=" + }, + "name": "color", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPAamt53QDe4=", + "_parent": { + "$ref": "AAAAAAGAPAZ6f51PAmE=" + }, + "name": "placement", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPAapL53l9Sc=", + "_parent": { + "$ref": "AAAAAAGAPAZ6f51PAmE=" + }, + "name": "style", + "type": "" + } + ] + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAPBd73aHqdKY=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "PictureMarkerSymbol", + "ownedElements": [ + { + "_type": "UMLGeneralization", + "_id": "AAAAAAGAPBeg7KJvEiE=", + "_parent": { + "$ref": "AAAAAAGAPBd73aHqdKY=" + }, + "source": { + "$ref": "AAAAAAGAPBd73aHqdKY=" + }, + "target": { + "$ref": "AAAAAAGAO4K5hVAX2y8=" + } + } + ], + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPBe8CaLygzQ=", + "_parent": { + "$ref": "AAAAAAGAPBd73aHqdKY=" + }, + "name": "type", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPBfC3qMo4vU=", + "_parent": { + "$ref": "AAAAAAGAPBd73aHqdKY=" + }, + "name": "angle", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPBfFsKNMfiQ=", + "_parent": { + "$ref": "AAAAAAGAPBd73aHqdKY=" + }, + "name": "height", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPBfH9qNwFW8=", + "_parent": { + "$ref": "AAAAAAGAPBd73aHqdKY=" + }, + "name": "url", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPBfKDqOUl0Y=", + "_parent": { + "$ref": "AAAAAAGAPBd73aHqdKY=" + }, + "name": "width", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPBfMJqO4ULE=", + "_parent": { + "$ref": "AAAAAAGAPBd73aHqdKY=" + }, + "name": "xoffset", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPBfOZ6Pcm9c=", + "_parent": { + "$ref": "AAAAAAGAPBd73aHqdKY=" + }, + "name": "yoffset", + "type": "" + } + ], + "operations": [ + { + "_type": "UMLOperation", + "_id": "AAAAAAGAPBet6aK8jQc=", + "_parent": { + "$ref": "AAAAAAGAPBd73aHqdKY=" + }, + "name": "clone" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAPBhvx6Wusf8=", + "_parent": { + "$ref": "AAAAAAGAPBd73aHqdKY=" + }, + "name": "fromJSON" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAPBhx56XShSk=", + "_parent": { + "$ref": "AAAAAAGAPBd73aHqdKY=" + }, + "name": "toJSON" + } + ] + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAPCD456eWclQ=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "FillSymbol", + "ownedElements": [ + { + "_type": "UMLGeneralization", + "_id": "AAAAAAGAPCEOb6gbYVs=", + "_parent": { + "$ref": "AAAAAAGAPCD456eWclQ=" + }, + "source": { + "$ref": "AAAAAAGAPCD456eWclQ=" + }, + "target": { + "$ref": "AAAAAAGAO1MYeU/HxR0=" + } + } + ], + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPCEdKahoOMM=", + "_parent": { + "$ref": "AAAAAAGAPCD456eWclQ=" + }, + "name": "type", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPCEmEKiwQC0=", + "_parent": { + "$ref": "AAAAAAGAPCD456eWclQ=" + }, + "name": "outline", + "type": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + } + } + ], + "operations": [ + { + "_type": "UMLOperation", + "_id": "AAAAAAGAPCEvg6jm2cI=", + "_parent": { + "$ref": "AAAAAAGAPCD456eWclQ=" + }, + "name": "fromJSON" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAPCE2f6kc9N4=", + "_parent": { + "$ref": "AAAAAAGAPCD456eWclQ=" + }, + "name": "toJSON" + } + ], + "isAbstract": true + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAPCnyRqqQR0M=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "SimpleFillSymbol", + "ownedElements": [ + { + "_type": "UMLGeneralization", + "_id": "AAAAAAGAPCwoxq9lm94=", + "_parent": { + "$ref": "AAAAAAGAPCnyRqqQR0M=" + }, + "source": { + "$ref": "AAAAAAGAPCnyRqqQR0M=" + }, + "target": { + "$ref": "AAAAAAGAPCD456eWclQ=" + } + }, + { + "_type": "UMLAssociation", + "_id": "AAAAAAGAPQTeDH3yZgM=", + "_parent": { + "$ref": "AAAAAAGAPCnyRqqQR0M=" + }, + "end1": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAPQTeDH3zm0M=", + "_parent": { + "$ref": "AAAAAAGAPQTeDH3yZgM=" + }, + "reference": { + "$ref": "AAAAAAGAPCnyRqqQR0M=" + }, + "navigable": false + }, + "end2": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAPQTeDH30fcw=", + "_parent": { + "$ref": "AAAAAAGAPQTeDH3yZgM=" + }, + "reference": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + } + } + } + ], + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPCqTEauYd9c=", + "_parent": { + "$ref": "AAAAAAGAPCnyRqqQR0M=" + }, + "name": "type", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPCqZd6vOxgQ=", + "_parent": { + "$ref": "AAAAAAGAPCnyRqqQR0M=" + }, + "name": "color", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPCqcjqvys9Y=", + "_parent": { + "$ref": "AAAAAAGAPCnyRqqQR0M=" + }, + "name": "outline", + "type": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + } + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPCqfd6wWjho=", + "_parent": { + "$ref": "AAAAAAGAPCnyRqqQR0M=" + }, + "name": "style", + "type": "" + } + ], + "operations": [ + { + "_type": "UMLOperation", + "_id": "AAAAAAGAPCp84qsIizc=", + "_parent": { + "$ref": "AAAAAAGAPCnyRqqQR0M=" + }, + "name": "clone" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAPCqEt6s+HlI=", + "_parent": { + "$ref": "AAAAAAGAPCnyRqqQR0M=" + }, + "name": "fromJSON" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAPCqIjqtiAxk=", + "_parent": { + "$ref": "AAAAAAGAPCnyRqqQR0M=" + }, + "name": "toJSON" + } + ] + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAPQMJ6nhGP6w=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "PictureFillSymbol", + "ownedElements": [ + { + "_type": "UMLGeneralization", + "_id": "AAAAAAGAPQQ/rX0Sm58=", + "_parent": { + "$ref": "AAAAAAGAPQMJ6nhGP6w=" + }, + "source": { + "$ref": "AAAAAAGAPQMJ6nhGP6w=" + }, + "target": { + "$ref": "AAAAAAGAPCD456eWclQ=" + } + }, + { + "_type": "UMLAssociation", + "_id": "AAAAAAGAPQTsGX5l7I8=", + "_parent": { + "$ref": "AAAAAAGAPQMJ6nhGP6w=" + }, + "end1": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAPQTsGX5mdOE=", + "_parent": { + "$ref": "AAAAAAGAPQTsGX5l7I8=" + }, + "reference": { + "$ref": "AAAAAAGAPQMJ6nhGP6w=" + }, + "navigable": false + }, + "end2": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAPQTsGX5nfsI=", + "_parent": { + "$ref": "AAAAAAGAPQTsGX5l7I8=" + }, + "reference": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + } + } + } + ], + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPQM7WHi4dEU=", + "_parent": { + "$ref": "AAAAAAGAPQMJ6nhGP6w=" + }, + "name": "type", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPQNDuXjuWOY=", + "_parent": { + "$ref": "AAAAAAGAPQMJ6nhGP6w=" + }, + "name": "height", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPQNF6nkSbuY=", + "_parent": { + "$ref": "AAAAAAGAPQMJ6nhGP6w=" + }, + "name": "outline", + "type": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + } + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPQNIonk2nHk=", + "_parent": { + "$ref": "AAAAAAGAPQMJ6nhGP6w=" + }, + "name": "url", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPQNKhXlabsA=", + "_parent": { + "$ref": "AAAAAAGAPQMJ6nhGP6w=" + }, + "name": "width", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPQNMP3l+opg=", + "_parent": { + "$ref": "AAAAAAGAPQMJ6nhGP6w=" + }, + "name": "xoffset", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPQNOl3miql8=", + "_parent": { + "$ref": "AAAAAAGAPQMJ6nhGP6w=" + }, + "name": "xscale", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPQNQUnnGgkw=", + "_parent": { + "$ref": "AAAAAAGAPQMJ6nhGP6w=" + }, + "name": "yoffset", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPQNVK3oOyW0=", + "_parent": { + "$ref": "AAAAAAGAPQMJ6nhGP6w=" + }, + "name": "yscale", + "type": "" + } + ], + "operations": [ + { + "_type": "UMLOperation", + "_id": "AAAAAAGAPQP0jXviawc=", + "_parent": { + "$ref": "AAAAAAGAPQMJ6nhGP6w=" + }, + "name": "clone" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAPQP6OHwYjDU=", + "_parent": { + "$ref": "AAAAAAGAPQMJ6nhGP6w=" + }, + "name": "fromJSON" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAPQP8/nw8tdI=", + "_parent": { + "$ref": "AAAAAAGAPQMJ6nhGP6w=" + }, + "name": "toJSON" + } + ] + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAPQff+YT2kWw=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "TextSymbol", + "ownedElements": [ + { + "_type": "UMLGeneralization", + "_id": "AAAAAAGAPQhWsoWl3dc=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "source": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "target": { + "$ref": "AAAAAAGAO1MYeU/HxR0=" + } + }, + { + "_type": "UMLAssociation", + "_id": "AAAAAAGAPS6KpKbbg5c=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "end1": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAPS6KpKbc4jk=", + "_parent": { + "$ref": "AAAAAAGAPS6KpKbbg5c=" + }, + "reference": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "navigable": false + }, + "end2": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAPS6KpKbd/TA=", + "_parent": { + "$ref": "AAAAAAGAPS6KpKbbg5c=" + }, + "reference": { + "$ref": "AAAAAAGAPS3xX6LyqAQ=" + } + } + } + ], + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPSAICJA6v/o=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "name": "type", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPSAOIJCgc6M=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "name": "angle", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPSAQ2ZDiIF4=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "name": "backgroundColor", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPSATI5Ek4IM=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "name": "borderLineColor", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPSAVEZFmIR8=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "name": "borderLineSize", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPSAXEZGod8M=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "name": "color", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPSAZV5HqksU=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "name": "font", + "type": "Font" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPSAcR5Is1X4=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "name": "haloColor", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPSAeRZJuhG0=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "name": "haloSize", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPSAgi5KwfFQ=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "name": "horizontalAlignment", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPSAitpLy8xw=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "name": "kerning", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPSAk2pM04uU=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "name": "lineHeight", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPSAnFJN2K9s=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "name": "lineWidth", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPSApNZO4TrY=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "name": "rotated", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPSDpSpiG08U=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "name": "text", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPSDyipkENGA=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "name": "verticalAlignment", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPSD1fJlGhvw=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "name": "xoffset", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPSFIs5ttMYs=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "name": "yoffset", + "type": "" + } + ], + "operations": [ + { + "_type": "UMLOperation", + "_id": "AAAAAAGAPR/v2o8IG9I=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "name": "clone" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAPR/81I+SarM=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "name": "fromJSON" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAPR//MI/UW7w=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "name": "toJSON" + } + ] + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAPS3xX6LyqAQ=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "Font", + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPS4SfqOsEp4=", + "_parent": { + "$ref": "AAAAAAGAPS3xX6LyqAQ=" + }, + "name": "decoration", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPS4ZY6QSK9k=", + "_parent": { + "$ref": "AAAAAAGAPS3xX6LyqAQ=" + }, + "name": "family", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPS4b4KRUp0w=", + "_parent": { + "$ref": "AAAAAAGAPS3xX6LyqAQ=" + }, + "name": "size", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPS4eKqSWMIQ=", + "_parent": { + "$ref": "AAAAAAGAPS3xX6LyqAQ=" + }, + "name": "style", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPS4gOqTYZto=", + "_parent": { + "$ref": "AAAAAAGAPS3xX6LyqAQ=" + }, + "name": "weight", + "type": "" + } + ], + "operations": [ + { + "_type": "UMLOperation", + "_id": "AAAAAAGAPS8boazWojk=", + "_parent": { + "$ref": "AAAAAAGAPS3xX6LyqAQ=" + }, + "name": "clone" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAPS8jDq1UJEA=", + "_parent": { + "$ref": "AAAAAAGAPS3xX6LyqAQ=" + }, + "name": "fromJSON" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAPS8lYK2li7A=", + "_parent": { + "$ref": "AAAAAAGAPS3xX6LyqAQ=" + }, + "name": "toJSON" + } + ] + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAP6S168jGsxA=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "Symbol3D", + "ownedElements": [ + { + "_type": "UMLGeneralization", + "_id": "AAAAAAGAP6VdPsoeetU=", + "_parent": { + "$ref": "AAAAAAGAP6S168jGsxA=" + }, + "source": { + "$ref": "AAAAAAGAP6S168jGsxA=" + }, + "target": { + "$ref": "AAAAAAGAO1MYeU/HxR0=" + } + }, + { + "_type": "UMLAssociation", + "_id": "AAAAAAGAP9XAwkPrzU4=", + "_parent": { + "$ref": "AAAAAAGAP6S168jGsxA=" + }, + "end1": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAP9XAwkPs9B8=", + "_parent": { + "$ref": "AAAAAAGAP9XAwkPrzU4=" + }, + "reference": { + "$ref": "AAAAAAGAP6S168jGsxA=" + }, + "navigable": false + }, + "end2": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAP9XAwkPtw8Y=", + "_parent": { + "$ref": "AAAAAAGAP9XAwkPrzU4=" + }, + "reference": { + "$ref": "AAAAAAGAP8/5/D2x644=" + } + } + } + ], + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAP6bx38w7uLM=", + "_parent": { + "$ref": "AAAAAAGAP6S168jGsxA=" + }, + "name": "type", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAP6bpOstslHY=", + "_parent": { + "$ref": "AAAAAAGAP6S168jGsxA=" + }, + "name": "styleOrigin", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAP6bvnMvqZyg=", + "_parent": { + "$ref": "AAAAAAGAP6S168jGsxA=" + }, + "name": "symbolLayers", + "type": { + "$ref": "AAAAAAGAP8/5/D2x644=" + } + } + ] + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAP8/5/D2x644=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "Symbol3DLayer", + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAP9VqWEBDC5M=", + "_parent": { + "$ref": "AAAAAAGAP8/5/D2x644=" + }, + "name": "type", + "type": "" + } + ], + "operations": [ + { + "_type": "UMLOperation", + "_id": "AAAAAAGAP9WNLEGF+44=", + "_parent": { + "$ref": "AAAAAAGAP8/5/D2x644=" + }, + "name": "fromJSON" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAP9WlJEMSNXw=", + "_parent": { + "$ref": "AAAAAAGAP8/5/D2x644=" + }, + "name": "toJSON" + } + ] + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAQHO4GV0oLfI=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "PointSymbol3D", + "ownedElements": [ + { + "_type": "UMLGeneralization", + "_id": "AAAAAAGAQHbWNI6eATI=", + "_parent": { + "$ref": "AAAAAAGAQHO4GV0oLfI=" + }, + "source": { + "$ref": "AAAAAAGAQHO4GV0oLfI=" + }, + "target": { + "$ref": "AAAAAAGAP6S168jGsxA=" + } + }, + { + "_type": "UMLAssociation", + "_id": "AAAAAAGAQHpofreL/lM=", + "_parent": { + "$ref": "AAAAAAGAQHO4GV0oLfI=" + }, + "end1": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQHpofreMF+Y=", + "_parent": { + "$ref": "AAAAAAGAQHpofreL/lM=" + }, + "reference": { + "$ref": "AAAAAAGAQHO4GV0oLfI=" + }, + "navigable": false + }, + "end2": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQHpofreNRd8=", + "_parent": { + "$ref": "AAAAAAGAQHpofreL/lM=" + }, + "reference": { + "$ref": "AAAAAAGAQHci6o8tBGM=" + } + } + }, + { + "_type": "UMLAssociation", + "_id": "AAAAAAGAQPx5Lwegxog=", + "_parent": { + "$ref": "AAAAAAGAQHO4GV0oLfI=" + }, + "end1": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQPx5LwehMeE=", + "_parent": { + "$ref": "AAAAAAGAQPx5Lwegxog=" + }, + "reference": { + "$ref": "AAAAAAGAQHO4GV0oLfI=" + }, + "navigable": false + }, + "end2": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQPx5LweiweU=", + "_parent": { + "$ref": "AAAAAAGAQPx5Lwegxog=" + }, + "reference": { + "$ref": "AAAAAAGAQPnVfurDxP4=" + } + } + }, + { + "_type": "UMLAssociation", + "_id": "AAAAAAGAQPyJKAjcvoE=", + "_parent": { + "$ref": "AAAAAAGAQHO4GV0oLfI=" + }, + "end1": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQPyJKAjdEa4=", + "_parent": { + "$ref": "AAAAAAGAQPyJKAjcvoE=" + }, + "reference": { + "$ref": "AAAAAAGAQHO4GV0oLfI=" + }, + "navigable": false + }, + "end2": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQPyJKAjecM4=", + "_parent": { + "$ref": "AAAAAAGAQPyJKAjcvoE=" + }, + "reference": { + "$ref": "AAAAAAGAQLns6Jmj0x4=" + } + } + } + ], + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQHPbk14qDNA=", + "_parent": { + "$ref": "AAAAAAGAQHO4GV0oLfI=" + }, + "name": "type", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQHPo018aeJo=", + "_parent": { + "$ref": "AAAAAAGAQHO4GV0oLfI=" + }, + "name": "callout", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQHPq7F96x14=", + "_parent": { + "$ref": "AAAAAAGAQHO4GV0oLfI=" + }, + "name": "styleOrigin", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQHPtAV/aljM=", + "_parent": { + "$ref": "AAAAAAGAQHO4GV0oLfI=" + }, + "name": "symbolLayers", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQHPuxGA6UBk=", + "_parent": { + "$ref": "AAAAAAGAQHO4GV0oLfI=" + }, + "name": "verticalOffset", + "type": "" + } + ], + "operations": [ + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQHYPZmRQTEw=", + "_parent": { + "$ref": "AAAAAAGAQHO4GV0oLfI=" + }, + "name": "clone" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQHYVz2Tm/qo=", + "_parent": { + "$ref": "AAAAAAGAQHO4GV0oLfI=" + }, + "name": "fromJSON" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQHYYN2VGn1k=", + "_parent": { + "$ref": "AAAAAAGAQHO4GV0oLfI=" + }, + "name": "toJSON" + } + ] + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAQHci6o8tBGM=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "IconSymbol3DLayer", + "ownedElements": [ + { + "_type": "UMLGeneralization", + "_id": "AAAAAAGAQHcyhZBm0hs=", + "_parent": { + "$ref": "AAAAAAGAQHci6o8tBGM=" + }, + "source": { + "$ref": "AAAAAAGAQHci6o8tBGM=" + }, + "target": { + "$ref": "AAAAAAGAP8/5/D2x644=" + } + } + ], + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQHiR5aDzLYY=", + "_parent": { + "$ref": "AAAAAAGAQHci6o8tBGM=" + }, + "name": "type", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQHiYP6GJhto=", + "_parent": { + "$ref": "AAAAAAGAQHci6o8tBGM=" + }, + "name": "anchor", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQHiaNaHpMeE=", + "_parent": { + "$ref": "AAAAAAGAQHci6o8tBGM=" + }, + "name": "anchorPosition", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQHicC6JJ2ps=", + "_parent": { + "$ref": "AAAAAAGAQHci6o8tBGM=" + }, + "name": "material", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQHidd6KpQY0=", + "_parent": { + "$ref": "AAAAAAGAQHci6o8tBGM=" + }, + "name": "outline", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQHifkKMJgeQ=", + "_parent": { + "$ref": "AAAAAAGAQHci6o8tBGM=" + }, + "name": "resource", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQHihOaNp1o4=", + "_parent": { + "$ref": "AAAAAAGAQHci6o8tBGM=" + }, + "name": "size", + "type": "" + } + ], + "operations": [ + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQHlBEamVlhM=", + "_parent": { + "$ref": "AAAAAAGAQHci6o8tBGM=" + }, + "name": "clone" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQHlHU6orzwA=", + "_parent": { + "$ref": "AAAAAAGAQHci6o8tBGM=" + }, + "name": "fromJSON" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQHlJbKqLtE0=", + "_parent": { + "$ref": "AAAAAAGAQHci6o8tBGM=" + }, + "name": "toJSON" + } + ] + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAQI6jF+ainB0=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "LineSymbol3D", + "ownedElements": [ + { + "_type": "UMLGeneralization", + "_id": "AAAAAAGAQJBZ8ACM7PY=", + "_parent": { + "$ref": "AAAAAAGAQI6jF+ainB0=" + }, + "source": { + "$ref": "AAAAAAGAQI6jF+ainB0=" + }, + "target": { + "$ref": "AAAAAAGAP6S168jGsxA=" + } + }, + { + "_type": "UMLAssociation", + "_id": "AAAAAAGAQJB91wHUuZ8=", + "_parent": { + "$ref": "AAAAAAGAQI6jF+ainB0=" + }, + "end1": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQJB91wHV5+E=", + "_parent": { + "$ref": "AAAAAAGAQJB91wHUuZ8=" + }, + "reference": { + "$ref": "AAAAAAGAQI6jF+ainB0=" + }, + "navigable": false + }, + "end2": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQJB91wHWZ0U=", + "_parent": { + "$ref": "AAAAAAGAQJB91wHUuZ8=" + }, + "reference": { + "$ref": "AAAAAAGAQI6qsOc0DIE=" + } + } + }, + { + "_type": "UMLAssociation", + "_id": "AAAAAAGAQQzoZWpmJZ0=", + "_parent": { + "$ref": "AAAAAAGAQI6jF+ainB0=" + }, + "end1": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQQzoZWpnhlg=", + "_parent": { + "$ref": "AAAAAAGAQQzoZWpmJZ0=" + }, + "reference": { + "$ref": "AAAAAAGAQI6jF+ainB0=" + }, + "navigable": false + }, + "end2": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQQzoZWposbQ=", + "_parent": { + "$ref": "AAAAAAGAQQzoZWpmJZ0=" + }, + "reference": { + "$ref": "AAAAAAGAQQuTLUb/9Rg=" + } + } + } + ], + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQI7RO+gvDaw=", + "_parent": { + "$ref": "AAAAAAGAQI6jF+ainB0=" + }, + "name": "type", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQI7YIujdTVQ=", + "_parent": { + "$ref": "AAAAAAGAQI6jF+ainB0=" + }, + "name": "styleOrigin", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQI7fHum1PPw=", + "_parent": { + "$ref": "AAAAAAGAQI6jF+ainB0=" + }, + "name": "symbolLayers", + "type": "" + } + ], + "operations": [ + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQI83Pu60uKU=", + "_parent": { + "$ref": "AAAAAAGAQI6jF+ainB0=" + }, + "name": "clone" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQI89iO9irzg=", + "_parent": { + "$ref": "AAAAAAGAQI6jF+ainB0=" + }, + "name": "fromJSON" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQI8/v+/RXtM=", + "_parent": { + "$ref": "AAAAAAGAQI6jF+ainB0=" + }, + "name": "toJSON" + } + ] + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAQI6qsOc0DIE=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "LineSymbol3DLayer", + "ownedElements": [ + { + "_type": "UMLGeneralization", + "_id": "AAAAAAGAQJBpFAEwA94=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc0DIE=" + }, + "source": { + "$ref": "AAAAAAGAQI6qsOc0DIE=" + }, + "target": { + "$ref": "AAAAAAGAP8/5/D2x644=" + } + } + ], + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQI/Ms/fm62A=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc0DIE=" + }, + "name": "type", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQI/SxfiUCXU=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc0DIE=" + }, + "name": "cap", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQI/U9/kDTG0=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc0DIE=" + }, + "name": "join", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQI/W6PlyuF4=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc0DIE=" + }, + "name": "marker", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQI/x4vseoP0=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc0DIE=" + }, + "name": "material", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQI/0MvuNWWU=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc0DIE=" + }, + "name": "pattern", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQI/2Efv8elc=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc0DIE=" + }, + "name": "size", + "type": "" + } + ], + "operations": [ + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQI+28vXcViw=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc0DIE=" + }, + "name": "clone" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQI/BU/bJXC8=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc0DIE=" + }, + "name": "fromJSON" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQI/Do/c45mg=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc0DIE=" + }, + "name": "toJSON" + } + ] + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAQJPNQDjoUDE=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "PolygonSymbol3D", + "ownedElements": [ + { + "_type": "UMLGeneralization", + "_id": "AAAAAAGAQJR3UUvMi3E=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "source": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "target": { + "$ref": "AAAAAAGAP6S168jGsxA=" + } + }, + { + "_type": "UMLAssociation", + "_id": "AAAAAAGAQKMnaHQbRW0=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "end1": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQKMnaHQc7Rs=", + "_parent": { + "$ref": "AAAAAAGAQKMnaHQbRW0=" + }, + "reference": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "navigable": false + }, + "end2": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQKMnaHQdqUs=", + "_parent": { + "$ref": "AAAAAAGAQKMnaHQbRW0=" + }, + "reference": { + "$ref": "AAAAAAGAQKIeqWLtb7A=" + } + } + }, + { + "_type": "UMLAssociation", + "_id": "AAAAAAGAQYq/foRzh3g=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "end1": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQYq/foR06rU=", + "_parent": { + "$ref": "AAAAAAGAQYq/foRzh3g=" + }, + "reference": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "navigable": false + }, + "end2": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQYq/foR197U=", + "_parent": { + "$ref": "AAAAAAGAQYq/foRzh3g=" + }, + "reference": { + "$ref": "AAAAAAGAQYqXdX+0wEk=" + } + } + }, + { + "_type": "UMLAssociation", + "_id": "AAAAAAGAQZEEMGQvP4A=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "end1": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQZEEMGQwxWs=", + "_parent": { + "$ref": "AAAAAAGAQZEEMGQvP4A=" + }, + "reference": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "navigable": false + }, + "end2": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQZEEMGQx3vs=", + "_parent": { + "$ref": "AAAAAAGAQZEEMGQvP4A=" + }, + "reference": { + "$ref": "AAAAAAGAQPnVfurDxP4=" + } + } + }, + { + "_type": "UMLAssociation", + "_id": "AAAAAAGAQZEYe2XL0XM=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "end1": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQZEYe2XM+rA=", + "_parent": { + "$ref": "AAAAAAGAQZEYe2XL0XM=" + }, + "reference": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "navigable": false + }, + "end2": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQZEYe2XNnz8=", + "_parent": { + "$ref": "AAAAAAGAQZEYe2XL0XM=" + }, + "reference": { + "$ref": "AAAAAAGAQQuTLUb/9Rg=" + } + } + }, + { + "_type": "UMLAssociation", + "_id": "AAAAAAGAQZE2+md/zbs=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "end1": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQZE2+meABCg=", + "_parent": { + "$ref": "AAAAAAGAQZE2+md/zbs=" + }, + "reference": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "navigable": false + }, + "end2": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQZE2+meB18I=", + "_parent": { + "$ref": "AAAAAAGAQZE2+md/zbs=" + }, + "reference": { + "$ref": "AAAAAAGAQHci6o8tBGM=" + } + } + }, + { + "_type": "UMLAssociation", + "_id": "AAAAAAGAQZOWEGpZGhg=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "end1": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQZOWEGpaZS4=", + "_parent": { + "$ref": "AAAAAAGAQZOWEGpZGhg=" + }, + "reference": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "navigable": false + }, + "end2": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQZOWEGpb1vk=", + "_parent": { + "$ref": "AAAAAAGAQZOWEGpZGhg=" + }, + "reference": { + "$ref": "AAAAAAGAQLns6Jmj0x4=" + } + } + }, + { + "_type": "UMLAssociation", + "_id": "AAAAAAGAQZO4TGvycxc=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "end1": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQZO4TGvzO6Q=", + "_parent": { + "$ref": "AAAAAAGAQZO4TGvycxc=" + }, + "reference": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "navigable": false + }, + "end2": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQZO4TGv03hE=", + "_parent": { + "$ref": "AAAAAAGAQZO4TGvycxc=" + }, + "reference": { + "$ref": "AAAAAAGAQI6qsOc0DIE=" + } + } + } + ], + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQJPvrzoyMNs=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "name": "type", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQJP6pjtAYNM=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "name": "styleOrigin", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQJP8/ju+xJc=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "name": "symbolLayers", + "type": "" + } + ], + "operations": [ + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQJQJTTy0Pz0=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "name": "clone" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQJQP+D16Vf8=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "name": "fromJSON" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQJQSWz34cwY=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "name": "toJSON" + } + ] + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAQKIeqWLtb7A=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "FillSymbol3DLayer", + "ownedElements": [ + { + "_type": "UMLGeneralization", + "_id": "AAAAAAGAQKMeBnOSzgA=", + "_parent": { + "$ref": "AAAAAAGAQKIeqWLtb7A=" + }, + "source": { + "$ref": "AAAAAAGAQKIeqWLtb7A=" + }, + "target": { + "$ref": "AAAAAAGAP8/5/D2x644=" + } + } + ], + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQKKn5Gwwvc4=", + "_parent": { + "$ref": "AAAAAAGAQKIeqWLtb7A=" + }, + "name": "type", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQKKt/Wz2iEA=", + "_parent": { + "$ref": "AAAAAAGAQKIeqWLtb7A=" + }, + "name": "castShadows", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQKKv4210K3A=", + "_parent": { + "$ref": "AAAAAAGAQKIeqWLtb7A=" + }, + "name": "edges", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQKKymW3yL3A=", + "_parent": { + "$ref": "AAAAAAGAQKIeqWLtb7A=" + }, + "name": "material", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQKK0i25wkdY=", + "_parent": { + "$ref": "AAAAAAGAQKIeqWLtb7A=" + }, + "name": "outline", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQKK2bm7uffg=", + "_parent": { + "$ref": "AAAAAAGAQKIeqWLtb7A=" + }, + "name": "pattern", + "type": "" + } + ], + "operations": [ + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQKI2N2RPsfU=", + "_parent": { + "$ref": "AAAAAAGAQKIeqWLtb7A=" + }, + "name": "clone" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQKI9kGUVE0M=", + "_parent": { + "$ref": "AAAAAAGAQKIeqWLtb7A=" + }, + "name": "fromJSON" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQKI/4mWTMrg=", + "_parent": { + "$ref": "AAAAAAGAQKIeqWLtb7A=" + }, + "name": "toJSON" + } + ] + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAQLjRBoVK/Ro=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "LabelSymbol3D", + "ownedElements": [ + { + "_type": "UMLGeneralization", + "_id": "AAAAAAGAQLnZqZjVkdk=", + "_parent": { + "$ref": "AAAAAAGAQLjRBoVK/Ro=" + }, + "source": { + "$ref": "AAAAAAGAQLjRBoVK/Ro=" + }, + "target": { + "$ref": "AAAAAAGAP6S168jGsxA=" + } + }, + { + "_type": "UMLAssociation", + "_id": "AAAAAAGAQLsG/7AAptg=", + "_parent": { + "$ref": "AAAAAAGAQLjRBoVK/Ro=" + }, + "end1": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQLsG/7ABSMo=", + "_parent": { + "$ref": "AAAAAAGAQLsG/7AAptg=" + }, + "reference": { + "$ref": "AAAAAAGAQLjRBoVK/Ro=" + }, + "navigable": false + }, + "end2": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQLsG/7ACCWw=", + "_parent": { + "$ref": "AAAAAAGAQLsG/7AAptg=" + }, + "reference": { + "$ref": "AAAAAAGAQLns6Jmj0x4=" + } + } + } + ], + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQLkJF4qC7uw=", + "_parent": { + "$ref": "AAAAAAGAQLjRBoVK/Ro=" + }, + "name": "type", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQLkPq4tgUdM=", + "_parent": { + "$ref": "AAAAAAGAQLjRBoVK/Ro=" + }, + "name": "callout", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQLkRqYvtqAE=", + "_parent": { + "$ref": "AAAAAAGAQLjRBoVK/Ro=" + }, + "name": "styleOrigin", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQLkT24x6g2s=", + "_parent": { + "$ref": "AAAAAAGAQLjRBoVK/Ro=" + }, + "name": "symbolLayers", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQLkWVo0H4Q8=", + "_parent": { + "$ref": "AAAAAAGAQLjRBoVK/Ro=" + }, + "name": "verticalOffset", + "type": "" + } + ], + "operations": [ + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQLjff4a4sxM=", + "_parent": { + "$ref": "AAAAAAGAQLjRBoVK/Ro=" + }, + "name": "clone" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQLjlyoeW4cw=", + "_parent": { + "$ref": "AAAAAAGAQLjRBoVK/Ro=" + }, + "name": "fromJSON" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQLjoBYgjCv8=", + "_parent": { + "$ref": "AAAAAAGAQLjRBoVK/Ro=" + }, + "name": "toJSON" + } + ] + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAQLns6Jmj0x4=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "TextSymbol3DLayer", + "ownedElements": [ + { + "_type": "UMLGeneralization", + "_id": "AAAAAAGAQLsTnLEG5Uo=", + "_parent": { + "$ref": "AAAAAAGAQLns6Jmj0x4=" + }, + "source": { + "$ref": "AAAAAAGAQLns6Jmj0x4=" + }, + "target": { + "$ref": "AAAAAAGAP8/5/D2x644=" + } + } + ], + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQLoWJ5tje4c=", + "_parent": { + "$ref": "AAAAAAGAQLns6Jmj0x4=" + }, + "name": "type", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQLocVpxB5AM=", + "_parent": { + "$ref": "AAAAAAGAQLns6Jmj0x4=" + }, + "name": "background", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQLofAJzO1GA=", + "_parent": { + "$ref": "AAAAAAGAQLns6Jmj0x4=" + }, + "name": "font", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQLog4Z1bzo4=", + "_parent": { + "$ref": "AAAAAAGAQLns6Jmj0x4=" + }, + "name": "halo", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQLojE53omX0=", + "_parent": { + "$ref": "AAAAAAGAQLns6Jmj0x4=" + }, + "name": "horizontalAlignment", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQLolVZ51Tdg=", + "_parent": { + "$ref": "AAAAAAGAQLns6Jmj0x4=" + }, + "name": "lineHeight", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQLonSp8CGas=", + "_parent": { + "$ref": "AAAAAAGAQLns6Jmj0x4=" + }, + "name": "material", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQLopjp+PrHs=", + "_parent": { + "$ref": "AAAAAAGAQLns6Jmj0x4=" + }, + "name": "size", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQLor6qAcWyY=", + "_parent": { + "$ref": "AAAAAAGAQLns6Jmj0x4=" + }, + "name": "text", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQLq7GahmsQQ=", + "_parent": { + "$ref": "AAAAAAGAQLns6Jmj0x4=" + }, + "name": "verticalAlignment", + "type": "" + } + ], + "operations": [ + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQLrMV6o4fWE=", + "_parent": { + "$ref": "AAAAAAGAQLns6Jmj0x4=" + }, + "name": "clone" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQLrSt6sWGnA=", + "_parent": { + "$ref": "AAAAAAGAQLns6Jmj0x4=" + }, + "name": "fromJSON" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQLrU4qujo+U=", + "_parent": { + "$ref": "AAAAAAGAQLns6Jmj0x4=" + }, + "name": "toJSON" + } + ] + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAQPnVfurDxP4=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "ObjectSymbol3DLayer", + "ownedElements": [ + { + "_type": "UMLGeneralization", + "_id": "AAAAAAGAQP3ZlkBMubY=", + "_parent": { + "$ref": "AAAAAAGAQPnVfurDxP4=" + }, + "source": { + "$ref": "AAAAAAGAQPnVfurDxP4=" + }, + "target": { + "$ref": "AAAAAAGAP8/5/D2x644=" + } + } + ], + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQPop+u2+iXY=", + "_parent": { + "$ref": "AAAAAAGAQPnVfurDxP4=" + }, + "name": "type", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQPozEe604dA=", + "_parent": { + "$ref": "AAAAAAGAQPnVfurDxP4=" + }, + "name": "anchor", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQPo2Gu9Q5Ck=", + "_parent": { + "$ref": "AAAAAAGAQPnVfurDxP4=" + }, + "name": "anchorPosition", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQPo4he/sG20=", + "_parent": { + "$ref": "AAAAAAGAQPnVfurDxP4=" + }, + "name": "castShadows", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQPo66/CIc7k=", + "_parent": { + "$ref": "AAAAAAGAQPnVfurDxP4=" + }, + "name": "depth", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQPo9LPEkQrk=", + "_parent": { + "$ref": "AAAAAAGAQPnVfurDxP4=" + }, + "name": "heading", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQPo/TvHAQDk=", + "_parent": { + "$ref": "AAAAAAGAQPnVfurDxP4=" + }, + "name": "height", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQPpBxPJcIdQ=", + "_parent": { + "$ref": "AAAAAAGAQPnVfurDxP4=" + }, + "name": "material", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQPpEefL4VGc=", + "_parent": { + "$ref": "AAAAAAGAQPnVfurDxP4=" + }, + "name": "resource", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQPsGafyFSfs=", + "_parent": { + "$ref": "AAAAAAGAQPnVfurDxP4=" + }, + "name": "roll", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQPsIyv0hvRE=", + "_parent": { + "$ref": "AAAAAAGAQPnVfurDxP4=" + }, + "name": "tilt", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQPsLH/2976o=", + "_parent": { + "$ref": "AAAAAAGAQPnVfurDxP4=" + }, + "name": "width", + "type": "" + } + ] + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAQQuTLUb/9Rg=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "PathSymbol3DLayer", + "ownedElements": [ + { + "_type": "UMLGeneralization", + "_id": "AAAAAAGAQQz8x230K8E=", + "_parent": { + "$ref": "AAAAAAGAQQuTLUb/9Rg=" + }, + "source": { + "$ref": "AAAAAAGAQQuTLUb/9Rg=" + }, + "target": { + "$ref": "AAAAAAGAP8/5/D2x644=" + } + } + ], + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQQvIck2jTQg=", + "_parent": { + "$ref": "AAAAAAGAQQuTLUb/9Rg=" + }, + "name": "type", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQQvOlU7J+Js=", + "_parent": { + "$ref": "AAAAAAGAQQuTLUb/9Rg=" + }, + "name": "anchor", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQQvRWk+D8Kk=", + "_parent": { + "$ref": "AAAAAAGAQQuTLUb/9Rg=" + }, + "name": "cap", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQQvUBFA9SC8=", + "_parent": { + "$ref": "AAAAAAGAQQuTLUb/9Rg=" + }, + "name": "castShadows", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQQvWAFD3ufw=", + "_parent": { + "$ref": "AAAAAAGAQQuTLUb/9Rg=" + }, + "name": "height", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQQvYoVGxGiQ=", + "_parent": { + "$ref": "AAAAAAGAQQuTLUb/9Rg=" + }, + "name": "join", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQQvaulJrSXY=", + "_parent": { + "$ref": "AAAAAAGAQQuTLUb/9Rg=" + }, + "name": "material", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQQvdLlMlZuI=", + "_parent": { + "$ref": "AAAAAAGAQQuTLUb/9Rg=" + }, + "name": "profile", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQQyXzmQCWwQ=", + "_parent": { + "$ref": "AAAAAAGAQQuTLUb/9Rg=" + }, + "name": "profileRotation", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQQyayGS8q5c=", + "_parent": { + "$ref": "AAAAAAGAQQuTLUb/9Rg=" + }, + "name": "width", + "type": "" + } + ], + "operations": [ + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQQvq6VS33RQ=", + "_parent": { + "$ref": "AAAAAAGAQQuTLUb/9Rg=" + }, + "name": "clone" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQQvyP1Xdy/A=", + "_parent": { + "$ref": "AAAAAAGAQQuTLUb/9Rg=" + }, + "name": "fromJSON" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQQv1gFaXIyU=", + "_parent": { + "$ref": "AAAAAAGAQQuTLUb/9Rg=" + }, + "name": "toJSON" + } + ] + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAQYqXdX+0wEk=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "ExtrudeSymbol3DLayer", + "ownedElements": [ + { + "_type": "UMLGeneralization", + "_id": "AAAAAAGAQYrN7oX36Ng=", + "_parent": { + "$ref": "AAAAAAGAQYqXdX+0wEk=" + }, + "source": { + "$ref": "AAAAAAGAQYqXdX+0wEk=" + }, + "target": { + "$ref": "AAAAAAGAP8/5/D2x644=" + } + } + ], + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQYrs74espQ8=", + "_parent": { + "$ref": "AAAAAAGAQYqXdX+0wEk=" + }, + "name": "type", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQYr0SYkCuFQ=", + "_parent": { + "$ref": "AAAAAAGAQYqXdX+0wEk=" + }, + "name": "castShadows", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQYr27InaovU=", + "_parent": { + "$ref": "AAAAAAGAQYqXdX+0wEk=" + }, + "name": "edges", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQYr5XIqy5mU=", + "_parent": { + "$ref": "AAAAAAGAQYqXdX+0wEk=" + }, + "name": "material", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQYr+RIuK/FY=", + "_parent": { + "$ref": "AAAAAAGAQYqXdX+0wEk=" + }, + "name": "size", + "type": "" + } + ], + "operations": [ + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQYt7S5Rx0RQ=", + "_parent": { + "$ref": "AAAAAAGAQYqXdX+0wEk=" + }, + "name": "clone" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQYuCRZXHU2w=", + "_parent": { + "$ref": "AAAAAAGAQYqXdX+0wEk=" + }, + "name": "fromJSON" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQYuFBpaftPw=", + "_parent": { + "$ref": "AAAAAAGAQYqXdX+0wEk=" + }, + "name": "toJSON" + } + ] + } + ] + } + ] +} \ No newline at end of file diff --git a/src/service/uml/Symbols3D.mdj b/src/service/uml/Symbols3D.mdj new file mode 100644 index 000000000..b3146d9e0 --- /dev/null +++ b/src/service/uml/Symbols3D.mdj @@ -0,0 +1,12153 @@ +{ + "_type": "Project", + "_id": "AAAAAAFF+h6SjaM2Hec=", + "name": "Untitled", + "ownedElements": [ + { + "_type": "UMLModel", + "_id": "AAAAAAFF+qBWK6M3Z8Y=", + "_parent": { + "$ref": "AAAAAAFF+h6SjaM2Hec=" + }, + "name": "Model", + "ownedElements": [ + { + "_type": "UMLClassDiagram", + "_id": "AAAAAAFF+qBtyKM79qY=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "Main", + "defaultDiagram": true, + "ownedViews": [ + { + "_type": "UMLClassView", + "_id": "AAAAAAGAO1MYek/JnBg=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAO1MYeU/HxR0=" + }, + "subViews": [ + { + "_type": "UMLNameCompartmentView", + "_id": "AAAAAAGAO1MYek/KY2Y=", + "_parent": { + "$ref": "AAAAAAGAO1MYek/JnBg=" + }, + "model": { + "$ref": "AAAAAAGAO1MYeU/HxR0=" + }, + "subViews": [ + { + "_type": "LabelView", + "_id": "AAAAAAGAO1MYek/LgeU=", + "_parent": { + "$ref": "AAAAAAGAO1MYek/KY2Y=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 4880, + "top": 2096, + "height": 13 + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAO1MYe0/M6PU=", + "_parent": { + "$ref": "AAAAAAGAO1MYek/KY2Y=" + }, + "font": "Arial;13;3", + "left": 2581, + "top": 1167, + "width": 80.57080078125, + "height": 13, + "text": "Symbol" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAO1MYe0/N9fA=", + "_parent": { + "$ref": "AAAAAAGAO1MYek/KY2Y=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 4880, + "top": 2096, + "width": 73.67724609375, + "height": 13, + "text": "(from Model)" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAO1MYe0/OGZc=", + "_parent": { + "$ref": "AAAAAAGAO1MYek/KY2Y=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 4880, + "top": 2096, + "height": 13, + "horizontalAlignment": 1 + } + ], + "font": "Arial;13;0", + "left": 2576, + "top": 1160, + "width": 90.57080078125, + "height": 25, + "stereotypeLabel": { + "$ref": "AAAAAAGAO1MYek/LgeU=" + }, + "nameLabel": { + "$ref": "AAAAAAGAO1MYe0/M6PU=" + }, + "namespaceLabel": { + "$ref": "AAAAAAGAO1MYe0/N9fA=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAO1MYe0/OGZc=" + } + }, + { + "_type": "UMLAttributeCompartmentView", + "_id": "AAAAAAGAO1MYe0/PFXM=", + "_parent": { + "$ref": "AAAAAAGAO1MYek/JnBg=" + }, + "model": { + "$ref": "AAAAAAGAO1MYeU/HxR0=" + }, + "subViews": [ + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAO1M4vE/0AZw=", + "_parent": { + "$ref": "AAAAAAGAO1MYe0/PFXM=" + }, + "model": { + "$ref": "AAAAAAGAO1M4mE/xJtQ=" + }, + "font": "Arial;13;0", + "left": 2581, + "top": 1190, + "width": 80.57080078125, + "height": 13, + "text": "+type", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAO1NDbU/6l7g=", + "_parent": { + "$ref": "AAAAAAGAO1MYe0/PFXM=" + }, + "model": { + "$ref": "AAAAAAGAO1NDTE/3Mpo=" + }, + "font": "Arial;13;0", + "left": 2581, + "top": 1205, + "width": 80.57080078125, + "height": 13, + "text": "+color", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAO1NF21AAY2Y=", + "_parent": { + "$ref": "AAAAAAGAO1MYe0/PFXM=" + }, + "model": { + "$ref": "AAAAAAGAO1NFuk/9tZ0=" + }, + "font": "Arial;13;0", + "left": 2581, + "top": 1220, + "width": 80.57080078125, + "height": 13, + "text": "-opacity", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 2576, + "top": 1185, + "width": 90.57080078125, + "height": 53 + }, + { + "_type": "UMLOperationCompartmentView", + "_id": "AAAAAAGAO1MYe0/Qbfc=", + "_parent": { + "$ref": "AAAAAAGAO1MYek/JnBg=" + }, + "model": { + "$ref": "AAAAAAGAO1MYeU/HxR0=" + }, + "subViews": [ + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAO1QI21AKpLU=", + "_parent": { + "$ref": "AAAAAAGAO1MYe0/Qbfc=" + }, + "model": { + "$ref": "AAAAAAGAO1QIuVAHl58=" + }, + "font": "Arial;13;0", + "left": 2581, + "top": 1243, + "width": 80.57080078125, + "height": 13, + "text": "+fromJSON()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAO1QR1VAQzNY=", + "_parent": { + "$ref": "AAAAAAGAO1MYe0/Qbfc=" + }, + "model": { + "$ref": "AAAAAAGAO1QRq1ANbHM=" + }, + "font": "Arial;13;0", + "left": 2581, + "top": 1258, + "width": 80.57080078125, + "height": 13, + "text": "+toJSON()", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 2576, + "top": 1238, + "width": 90.57080078125, + "height": 38 + }, + { + "_type": "UMLReceptionCompartmentView", + "_id": "AAAAAAGAO1MYe0/RU/o=", + "_parent": { + "$ref": "AAAAAAGAO1MYek/JnBg=" + }, + "model": { + "$ref": "AAAAAAGAO1MYeU/HxR0=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2440, + "top": 1048, + "width": 10, + "height": 10 + }, + { + "_type": "UMLTemplateParameterCompartmentView", + "_id": "AAAAAAGAO1MYe0/S0T0=", + "_parent": { + "$ref": "AAAAAAGAO1MYek/JnBg=" + }, + "model": { + "$ref": "AAAAAAGAO1MYeU/HxR0=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2440, + "top": 1048, + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "containerChangeable": true, + "left": 2576, + "top": 1160, + "width": 90.57080078125, + "height": 116, + "nameCompartment": { + "$ref": "AAAAAAGAO1MYek/KY2Y=" + }, + "attributeCompartment": { + "$ref": "AAAAAAGAO1MYe0/PFXM=" + }, + "operationCompartment": { + "$ref": "AAAAAAGAO1MYe0/Qbfc=" + }, + "receptionCompartment": { + "$ref": "AAAAAAGAO1MYe0/RU/o=" + }, + "templateParameterCompartment": { + "$ref": "AAAAAAGAO1MYe0/S0T0=" + } + }, + { + "_type": "UMLClassView", + "_id": "AAAAAAGAP6S17MjIqpw=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAP6S168jGsxA=" + }, + "subViews": [ + { + "_type": "UMLNameCompartmentView", + "_id": "AAAAAAGAP6S17MjJsCI=", + "_parent": { + "$ref": "AAAAAAGAP6S17MjIqpw=" + }, + "model": { + "$ref": "AAAAAAGAP6S168jGsxA=" + }, + "subViews": [ + { + "_type": "LabelView", + "_id": "AAAAAAGAP6S17MjK9LY=", + "_parent": { + "$ref": "AAAAAAGAP6S17MjJsCI=" + }, + "visible": false, + "font": "Arial;13;0", + "left": -592, + "top": 704, + "height": 13 + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAP6S17MjL4mU=", + "_parent": { + "$ref": "AAAAAAGAP6S17MjJsCI=" + }, + "font": "Arial;13;1", + "left": 2093, + "top": 1239, + "width": 187.4970703125, + "height": 13, + "text": "Symbol3D" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAP6S17MjMWnM=", + "_parent": { + "$ref": "AAAAAAGAP6S17MjJsCI=" + }, + "visible": false, + "font": "Arial;13;0", + "left": -592, + "top": 704, + "width": 73.67724609375, + "height": 13, + "text": "(from Model)" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAP6S17MjN+/8=", + "_parent": { + "$ref": "AAAAAAGAP6S17MjJsCI=" + }, + "visible": false, + "font": "Arial;13;0", + "left": -592, + "top": 704, + "height": 13, + "horizontalAlignment": 1 + } + ], + "font": "Arial;13;0", + "left": 2088, + "top": 1232, + "width": 197.4970703125, + "height": 25, + "stereotypeLabel": { + "$ref": "AAAAAAGAP6S17MjK9LY=" + }, + "nameLabel": { + "$ref": "AAAAAAGAP6S17MjL4mU=" + }, + "namespaceLabel": { + "$ref": "AAAAAAGAP6S17MjMWnM=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAP6S17MjN+/8=" + } + }, + { + "_type": "UMLAttributeCompartmentView", + "_id": "AAAAAAGAP6S17MjOyVk=", + "_parent": { + "$ref": "AAAAAAGAP6S17MjIqpw=" + }, + "model": { + "$ref": "AAAAAAGAP6S168jGsxA=" + }, + "subViews": [ + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAP6byBMxNWNw=", + "_parent": { + "$ref": "AAAAAAGAP6S17MjOyVk=" + }, + "model": { + "$ref": "AAAAAAGAP6bx38w7uLM=" + }, + "font": "Arial;13;0", + "left": 2093, + "top": 1262, + "width": 187.4970703125, + "height": 13, + "text": "+type", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAP6bpZMt+sLY=", + "_parent": { + "$ref": "AAAAAAGAP6S17MjOyVk=" + }, + "model": { + "$ref": "AAAAAAGAP6bpOstslHY=" + }, + "font": "Arial;13;0", + "left": 2093, + "top": 1277, + "width": 187.4970703125, + "height": 13, + "text": "+styleOrigin", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAP6bvwcv8vqE=", + "_parent": { + "$ref": "AAAAAAGAP6S17MjOyVk=" + }, + "model": { + "$ref": "AAAAAAGAP6bvnMvqZyg=" + }, + "font": "Arial;13;0", + "left": 2093, + "top": 1292, + "width": 187.4970703125, + "height": 13, + "text": "+symbolLayers: Symbol3DLayer", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 2088, + "top": 1257, + "width": 197.4970703125, + "height": 53 + }, + { + "_type": "UMLOperationCompartmentView", + "_id": "AAAAAAGAP6S17MjP11s=", + "_parent": { + "$ref": "AAAAAAGAP6S17MjIqpw=" + }, + "model": { + "$ref": "AAAAAAGAP6S168jGsxA=" + }, + "font": "Arial;13;0", + "left": 2088, + "top": 1310, + "width": 197.4970703125, + "height": 10 + }, + { + "_type": "UMLReceptionCompartmentView", + "_id": "AAAAAAGAP6S17MjQSC4=", + "_parent": { + "$ref": "AAAAAAGAP6S17MjIqpw=" + }, + "model": { + "$ref": "AAAAAAGAP6S168jGsxA=" + }, + "visible": false, + "font": "Arial;13;0", + "left": -296, + "top": 352, + "width": 10, + "height": 10 + }, + { + "_type": "UMLTemplateParameterCompartmentView", + "_id": "AAAAAAGAP6S17MjRxnU=", + "_parent": { + "$ref": "AAAAAAGAP6S17MjIqpw=" + }, + "model": { + "$ref": "AAAAAAGAP6S168jGsxA=" + }, + "visible": false, + "font": "Arial;13;0", + "left": -296, + "top": 352, + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "containerChangeable": true, + "left": 2088, + "top": 1232, + "width": 197.4970703125, + "height": 103, + "nameCompartment": { + "$ref": "AAAAAAGAP6S17MjJsCI=" + }, + "attributeCompartment": { + "$ref": "AAAAAAGAP6S17MjOyVk=" + }, + "operationCompartment": { + "$ref": "AAAAAAGAP6S17MjP11s=" + }, + "receptionCompartment": { + "$ref": "AAAAAAGAP6S17MjQSC4=" + }, + "templateParameterCompartment": { + "$ref": "AAAAAAGAP6S17MjRxnU=" + } + }, + { + "_type": "UMLGeneralizationView", + "_id": "AAAAAAGAP6VdPsogt5M=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAP6VdPsoeetU=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAP6VdPsohCjE=", + "_parent": { + "$ref": "AAAAAAGAP6VdPsogt5M=" + }, + "model": { + "$ref": "AAAAAAGAP6VdPsoeetU=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2430, + "top": 1227, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAP6VdPsogt5M=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAP6VdPsoiBVU=", + "_parent": { + "$ref": "AAAAAAGAP6VdPsogt5M=" + }, + "model": { + "$ref": "AAAAAAGAP6VdPsoeetU=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 2430, + "top": 1212, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAP6VdPsogt5M=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAP6VdPsojJm4=", + "_parent": { + "$ref": "AAAAAAGAP6VdPsogt5M=" + }, + "model": { + "$ref": "AAAAAAGAP6VdPsoeetU=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2430, + "top": 1257, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAP6VdPsogt5M=" + }, + "edgePosition": 1 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAO1MYek/JnBg=" + }, + "tail": { + "$ref": "AAAAAAGAP6S17MjIqpw=" + }, + "points": "2284:1248;2576:1248", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAP6VdPsohCjE=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAP6VdPsoiBVU=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAP6VdPsojJm4=" + } + }, + { + "_type": "UMLClassView", + "_id": "AAAAAAGAP8/5/T2zufk=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAP8/5/D2x644=" + }, + "subViews": [ + { + "_type": "UMLNameCompartmentView", + "_id": "AAAAAAGAP8/5/T20DgQ=", + "_parent": { + "$ref": "AAAAAAGAP8/5/T2zufk=" + }, + "model": { + "$ref": "AAAAAAGAP8/5/D2x644=" + }, + "subViews": [ + { + "_type": "LabelView", + "_id": "AAAAAAGAP8/5/T21uxE=", + "_parent": { + "$ref": "AAAAAAGAP8/5/T20DgQ=" + }, + "visible": false, + "font": "Arial;13;0", + "left": -336, + "top": 1744, + "height": 13 + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAP8/5/T22bXc=", + "_parent": { + "$ref": "AAAAAAGAP8/5/T20DgQ=" + }, + "font": "Arial;13;1", + "left": 2141, + "top": 1935, + "width": 98.26171875, + "height": 13, + "text": "Symbol3DLayer" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAP8/5/T23zRY=", + "_parent": { + "$ref": "AAAAAAGAP8/5/T20DgQ=" + }, + "visible": false, + "font": "Arial;13;0", + "left": -336, + "top": 1744, + "width": 73.67724609375, + "height": 13, + "text": "(from Model)" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAP8/5/T24vDs=", + "_parent": { + "$ref": "AAAAAAGAP8/5/T20DgQ=" + }, + "visible": false, + "font": "Arial;13;0", + "left": -336, + "top": 1744, + "height": 13, + "horizontalAlignment": 1 + } + ], + "font": "Arial;13;0", + "left": 2136, + "top": 1928, + "width": 108.26171875, + "height": 25, + "stereotypeLabel": { + "$ref": "AAAAAAGAP8/5/T21uxE=" + }, + "nameLabel": { + "$ref": "AAAAAAGAP8/5/T22bXc=" + }, + "namespaceLabel": { + "$ref": "AAAAAAGAP8/5/T23zRY=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAP8/5/T24vDs=" + } + }, + { + "_type": "UMLAttributeCompartmentView", + "_id": "AAAAAAGAP8/5/T25IMk=", + "_parent": { + "$ref": "AAAAAAGAP8/5/T2zufk=" + }, + "model": { + "$ref": "AAAAAAGAP8/5/D2x644=" + }, + "subViews": [ + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAP9Vqf0BVvHk=", + "_parent": { + "$ref": "AAAAAAGAP8/5/T25IMk=" + }, + "model": { + "$ref": "AAAAAAGAP9VqWEBDC5M=" + }, + "font": "Arial;13;0", + "left": 2141, + "top": 1958, + "width": 98.26171875, + "height": 13, + "text": "+type", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 2136, + "top": 1953, + "width": 108.26171875, + "height": 23 + }, + { + "_type": "UMLOperationCompartmentView", + "_id": "AAAAAAGAP8/5/T26ZYI=", + "_parent": { + "$ref": "AAAAAAGAP8/5/T2zufk=" + }, + "model": { + "$ref": "AAAAAAGAP8/5/D2x644=" + }, + "subViews": [ + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAP9WNUUGXHo8=", + "_parent": { + "$ref": "AAAAAAGAP8/5/T26ZYI=" + }, + "model": { + "$ref": "AAAAAAGAP9WNLEGF+44=" + }, + "font": "Arial;13;0", + "left": 2141, + "top": 1981, + "width": 98.26171875, + "height": 13, + "text": "+fromJSON()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAP9WlTEMkprQ=", + "_parent": { + "$ref": "AAAAAAGAP8/5/T26ZYI=" + }, + "model": { + "$ref": "AAAAAAGAP9WlJEMSNXw=" + }, + "font": "Arial;13;0", + "left": 2141, + "top": 1996, + "width": 98.26171875, + "height": 13, + "text": "+toJSON()", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 2136, + "top": 1976, + "width": 108.26171875, + "height": 38 + }, + { + "_type": "UMLReceptionCompartmentView", + "_id": "AAAAAAGAP8/5/T27SB0=", + "_parent": { + "$ref": "AAAAAAGAP8/5/T2zufk=" + }, + "model": { + "$ref": "AAAAAAGAP8/5/D2x644=" + }, + "visible": false, + "font": "Arial;13;0", + "left": -200, + "top": 208, + "width": 10, + "height": 10 + }, + { + "_type": "UMLTemplateParameterCompartmentView", + "_id": "AAAAAAGAP8/5/T28FXA=", + "_parent": { + "$ref": "AAAAAAGAP8/5/T2zufk=" + }, + "model": { + "$ref": "AAAAAAGAP8/5/D2x644=" + }, + "visible": false, + "font": "Arial;13;0", + "left": -200, + "top": 208, + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "containerChangeable": true, + "left": 2136, + "top": 1928, + "width": 108.26171875, + "height": 86, + "nameCompartment": { + "$ref": "AAAAAAGAP8/5/T20DgQ=" + }, + "attributeCompartment": { + "$ref": "AAAAAAGAP8/5/T25IMk=" + }, + "operationCompartment": { + "$ref": "AAAAAAGAP8/5/T26ZYI=" + }, + "receptionCompartment": { + "$ref": "AAAAAAGAP8/5/T27SB0=" + }, + "templateParameterCompartment": { + "$ref": "AAAAAAGAP8/5/T28FXA=" + } + }, + { + "_type": "UMLAssociationView", + "_id": "AAAAAAGAP9XAwkPvc1M=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAP9XAwkPrzU4=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAP9XAwkPwXAY=", + "_parent": { + "$ref": "AAAAAAGAP9XAwkPvc1M=" + }, + "model": { + "$ref": "AAAAAAGAP9XAwkPrzU4=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2201, + "top": 1624, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAP9XAwkPvc1M=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAP9XAwkPxHKM=", + "_parent": { + "$ref": "AAAAAAGAP9XAwkPvc1M=" + }, + "model": { + "$ref": "AAAAAAGAP9XAwkPrzU4=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 2216, + "top": 1624, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAP9XAwkPvc1M=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAP9XAwkPyQeI=", + "_parent": { + "$ref": "AAAAAAGAP9XAwkPvc1M=" + }, + "model": { + "$ref": "AAAAAAGAP9XAwkPrzU4=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2172, + "top": 1625, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAP9XAwkPvc1M=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAP9XAwkPzAt0=", + "_parent": { + "$ref": "AAAAAAGAP9XAwkPvc1M=" + }, + "model": { + "$ref": "AAAAAAGAP9XAwkPs9B8=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2201, + "top": 1354, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAP9XAwkPvc1M=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAP9XAw0P0LwY=", + "_parent": { + "$ref": "AAAAAAGAP9XAwkPvc1M=" + }, + "model": { + "$ref": "AAAAAAGAP9XAwkPs9B8=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2214, + "top": 1357, + "height": 13, + "alpha": 0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAP9XAwkPvc1M=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAP9XAw0P1d9g=", + "_parent": { + "$ref": "AAAAAAGAP9XAwkPvc1M=" + }, + "model": { + "$ref": "AAAAAAGAP9XAwkPs9B8=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2173, + "top": 1350, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAP9XAwkPvc1M=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAP9XAw0P2EkY=", + "_parent": { + "$ref": "AAAAAAGAP9XAwkPvc1M=" + }, + "model": { + "$ref": "AAAAAAGAP9XAwkPtw8Y=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2203, + "top": 1894, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAP9XAwkPvc1M=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAP9XAw0P3VJo=", + "_parent": { + "$ref": "AAAAAAGAP9XAwkPvc1M=" + }, + "model": { + "$ref": "AAAAAAGAP9XAwkPtw8Y=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2217, + "top": 1892, + "height": 13, + "alpha": -0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAP9XAwkPvc1M=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAP9XAw0P4O+I=", + "_parent": { + "$ref": "AAAAAAGAP9XAwkPvc1M=" + }, + "model": { + "$ref": "AAAAAAGAP9XAwkPtw8Y=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2176, + "top": 1899, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAP9XAwkPvc1M=" + } + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAP9XAw0P5lng=", + "_parent": { + "$ref": "AAAAAAGAP9XAwkPvc1M=" + }, + "model": { + "$ref": "AAAAAAGAP9XAwkPs9B8=" + }, + "visible": false, + "font": "Arial;13;0", + "width": 10, + "height": 10 + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAP9XAw0P6/Tc=", + "_parent": { + "$ref": "AAAAAAGAP9XAwkPvc1M=" + }, + "model": { + "$ref": "AAAAAAGAP9XAwkPtw8Y=" + }, + "visible": false, + "font": "Arial;13;0", + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAP8/5/T2zufk=" + }, + "tail": { + "$ref": "AAAAAAGAP6S17MjIqpw=" + }, + "lineStyle": 1, + "points": "2186:1335;2189:1927", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAP9XAwkPwXAY=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAP9XAwkPxHKM=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAP9XAwkPyQeI=" + }, + "tailRoleNameLabel": { + "$ref": "AAAAAAGAP9XAwkPzAt0=" + }, + "tailPropertyLabel": { + "$ref": "AAAAAAGAP9XAw0P0LwY=" + }, + "tailMultiplicityLabel": { + "$ref": "AAAAAAGAP9XAw0P1d9g=" + }, + "headRoleNameLabel": { + "$ref": "AAAAAAGAP9XAw0P2EkY=" + }, + "headPropertyLabel": { + "$ref": "AAAAAAGAP9XAw0P3VJo=" + }, + "headMultiplicityLabel": { + "$ref": "AAAAAAGAP9XAw0P4O+I=" + }, + "tailQualifiersCompartment": { + "$ref": "AAAAAAGAP9XAw0P5lng=" + }, + "headQualifiersCompartment": { + "$ref": "AAAAAAGAP9XAw0P6/Tc=" + } + }, + { + "_type": "UMLClassView", + "_id": "AAAAAAGAQHO4GV0qRew=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAQHO4GV0oLfI=" + }, + "subViews": [ + { + "_type": "UMLNameCompartmentView", + "_id": "AAAAAAGAQHO4GV0r5pY=", + "_parent": { + "$ref": "AAAAAAGAQHO4GV0qRew=" + }, + "model": { + "$ref": "AAAAAAGAQHO4GV0oLfI=" + }, + "subViews": [ + { + "_type": "LabelView", + "_id": "AAAAAAGAQHO4Gl0su54=", + "_parent": { + "$ref": "AAAAAAGAQHO4GV0r5pY=" + }, + "visible": false, + "font": "Arial;13;0", + "top": 384, + "height": 13 + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAQHO4Gl0tCEM=", + "_parent": { + "$ref": "AAAAAAGAQHO4GV0r5pY=" + }, + "font": "Arial;13;1", + "left": 2301, + "top": 1439, + "width": 96.0654296875, + "height": 13, + "text": "PointSymbol3D" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAQHO4Gl0u6Pc=", + "_parent": { + "$ref": "AAAAAAGAQHO4GV0r5pY=" + }, + "visible": false, + "font": "Arial;13;0", + "top": 384, + "width": 73.67724609375, + "height": 13, + "text": "(from Model)" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAQHO4Gl0vKA4=", + "_parent": { + "$ref": "AAAAAAGAQHO4GV0r5pY=" + }, + "visible": false, + "font": "Arial;13;0", + "top": 384, + "height": 13, + "horizontalAlignment": 1 + } + ], + "font": "Arial;13;0", + "left": 2296, + "top": 1432, + "width": 106.0654296875, + "height": 25, + "stereotypeLabel": { + "$ref": "AAAAAAGAQHO4Gl0su54=" + }, + "nameLabel": { + "$ref": "AAAAAAGAQHO4Gl0tCEM=" + }, + "namespaceLabel": { + "$ref": "AAAAAAGAQHO4Gl0u6Pc=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAQHO4Gl0vKA4=" + } + }, + { + "_type": "UMLAttributeCompartmentView", + "_id": "AAAAAAGAQHO4Gl0wYjk=", + "_parent": { + "$ref": "AAAAAAGAQHO4GV0qRew=" + }, + "model": { + "$ref": "AAAAAAGAQHO4GV0oLfI=" + }, + "subViews": [ + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQHPbt14/Mhk=", + "_parent": { + "$ref": "AAAAAAGAQHO4Gl0wYjk=" + }, + "model": { + "$ref": "AAAAAAGAQHPbk14qDNA=" + }, + "font": "Arial;13;0", + "left": 2301, + "top": 1462, + "width": 96.0654296875, + "height": 13, + "text": "+type", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQHPo+V8v5gQ=", + "_parent": { + "$ref": "AAAAAAGAQHO4Gl0wYjk=" + }, + "model": { + "$ref": "AAAAAAGAQHPo018aeJo=" + }, + "font": "Arial;13;0", + "left": 2301, + "top": 1477, + "width": 96.0654296875, + "height": 13, + "text": "+callout", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQHPrE1+Pxyw=", + "_parent": { + "$ref": "AAAAAAGAQHO4Gl0wYjk=" + }, + "model": { + "$ref": "AAAAAAGAQHPq7F96x14=" + }, + "font": "Arial;13;0", + "left": 2301, + "top": 1492, + "width": 96.0654296875, + "height": 13, + "text": "+styleOrigin", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQHPtJl/vZKM=", + "_parent": { + "$ref": "AAAAAAGAQHO4Gl0wYjk=" + }, + "model": { + "$ref": "AAAAAAGAQHPtAV/aljM=" + }, + "font": "Arial;13;0", + "left": 2301, + "top": 1507, + "width": 96.0654296875, + "height": 13, + "text": "+symbolLayers", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQHPu7WBPLOE=", + "_parent": { + "$ref": "AAAAAAGAQHO4Gl0wYjk=" + }, + "model": { + "$ref": "AAAAAAGAQHPuxGA6UBk=" + }, + "font": "Arial;13;0", + "left": 2301, + "top": 1522, + "width": 96.0654296875, + "height": 13, + "text": "+verticalOffset", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 2296, + "top": 1457, + "width": 106.0654296875, + "height": 83 + }, + { + "_type": "UMLOperationCompartmentView", + "_id": "AAAAAAGAQHO4Gl0xIS8=", + "_parent": { + "$ref": "AAAAAAGAQHO4GV0qRew=" + }, + "model": { + "$ref": "AAAAAAGAQHO4GV0oLfI=" + }, + "subViews": [ + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAQHYPjWRlPzk=", + "_parent": { + "$ref": "AAAAAAGAQHO4Gl0xIS8=" + }, + "model": { + "$ref": "AAAAAAGAQHYPZmRQTEw=" + }, + "font": "Arial;13;0", + "left": 2301, + "top": 1545, + "width": 96.0654296875, + "height": 13, + "text": "+clone()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAQHYV+mT76q4=", + "_parent": { + "$ref": "AAAAAAGAQHO4Gl0xIS8=" + }, + "model": { + "$ref": "AAAAAAGAQHYVz2Tm/qo=" + }, + "font": "Arial;13;0", + "left": 2301, + "top": 1560, + "width": 96.0654296875, + "height": 13, + "text": "+fromJSON()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAQHYYXWVbi8o=", + "_parent": { + "$ref": "AAAAAAGAQHO4Gl0xIS8=" + }, + "model": { + "$ref": "AAAAAAGAQHYYN2VGn1k=" + }, + "font": "Arial;13;0", + "left": 2301, + "top": 1575, + "width": 96.0654296875, + "height": 13, + "text": "+toJSON()", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 2296, + "top": 1540, + "width": 106.0654296875, + "height": 53 + }, + { + "_type": "UMLReceptionCompartmentView", + "_id": "AAAAAAGAQHO4Gl0yzMo=", + "_parent": { + "$ref": "AAAAAAGAQHO4GV0qRew=" + }, + "model": { + "$ref": "AAAAAAGAQHO4GV0oLfI=" + }, + "visible": false, + "font": "Arial;13;0", + "top": 192, + "width": 10, + "height": 10 + }, + { + "_type": "UMLTemplateParameterCompartmentView", + "_id": "AAAAAAGAQHO4Gl0z6yU=", + "_parent": { + "$ref": "AAAAAAGAQHO4GV0qRew=" + }, + "model": { + "$ref": "AAAAAAGAQHO4GV0oLfI=" + }, + "visible": false, + "font": "Arial;13;0", + "top": 192, + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "containerChangeable": true, + "left": 2296, + "top": 1432, + "width": 106.0654296875, + "height": 161, + "nameCompartment": { + "$ref": "AAAAAAGAQHO4GV0r5pY=" + }, + "attributeCompartment": { + "$ref": "AAAAAAGAQHO4Gl0wYjk=" + }, + "operationCompartment": { + "$ref": "AAAAAAGAQHO4Gl0xIS8=" + }, + "receptionCompartment": { + "$ref": "AAAAAAGAQHO4Gl0yzMo=" + }, + "templateParameterCompartment": { + "$ref": "AAAAAAGAQHO4Gl0z6yU=" + } + }, + { + "_type": "UMLGeneralizationView", + "_id": "AAAAAAGAQHbWNI6go9U=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAQHbWNI6eATI=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQHbWNI6hWow=", + "_parent": { + "$ref": "AAAAAAGAQHbWNI6go9U=" + }, + "model": { + "$ref": "AAAAAAGAQHbWNI6eATI=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2246, + "top": 1388, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQHbWNI6go9U=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQHbWNI6i6Gc=", + "_parent": { + "$ref": "AAAAAAGAQHbWNI6go9U=" + }, + "model": { + "$ref": "AAAAAAGAQHbWNI6eATI=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 2234, + "top": 1397, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQHbWNI6go9U=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQHbWNI6j2Xk=", + "_parent": { + "$ref": "AAAAAAGAQHbWNI6go9U=" + }, + "model": { + "$ref": "AAAAAAGAQHbWNI6eATI=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2271, + "top": 1371, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQHbWNI6go9U=" + }, + "edgePosition": 1 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAP6S17MjIqpw=" + }, + "tail": { + "$ref": "AAAAAAGAQHO4GV0qRew=" + }, + "lineStyle": 1, + "points": "2295:1437;2223:1335", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAQHbWNI6hWow=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAQHbWNI6i6Gc=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAQHbWNI6j2Xk=" + } + }, + { + "_type": "UMLClassView", + "_id": "AAAAAAGAQHci648v8Jg=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAQHci6o8tBGM=" + }, + "subViews": [ + { + "_type": "UMLNameCompartmentView", + "_id": "AAAAAAGAQHci648wfDg=", + "_parent": { + "$ref": "AAAAAAGAQHci648v8Jg=" + }, + "model": { + "$ref": "AAAAAAGAQHci6o8tBGM=" + }, + "subViews": [ + { + "_type": "LabelView", + "_id": "AAAAAAGAQHci648xm3U=", + "_parent": { + "$ref": "AAAAAAGAQHci648wfDg=" + }, + "visible": false, + "font": "Arial;13;0", + "left": -576, + "top": 416, + "height": 13 + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAQHci648y398=", + "_parent": { + "$ref": "AAAAAAGAQHci648wfDg=" + }, + "font": "Arial;13;1", + "left": 2205, + "top": 1663, + "width": 124.9853515625, + "height": 13, + "text": "IconSymbol3DLayer" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAQHci648zUvA=", + "_parent": { + "$ref": "AAAAAAGAQHci648wfDg=" + }, + "visible": false, + "font": "Arial;13;0", + "left": -576, + "top": 416, + "width": 73.67724609375, + "height": 13, + "text": "(from Model)" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAQHci6480uGg=", + "_parent": { + "$ref": "AAAAAAGAQHci648wfDg=" + }, + "visible": false, + "font": "Arial;13;0", + "left": -576, + "top": 416, + "height": 13, + "horizontalAlignment": 1 + } + ], + "font": "Arial;13;0", + "left": 2200, + "top": 1656, + "width": 134.9853515625, + "height": 25, + "stereotypeLabel": { + "$ref": "AAAAAAGAQHci648xm3U=" + }, + "nameLabel": { + "$ref": "AAAAAAGAQHci648y398=" + }, + "namespaceLabel": { + "$ref": "AAAAAAGAQHci648zUvA=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAQHci6480uGg=" + } + }, + { + "_type": "UMLAttributeCompartmentView", + "_id": "AAAAAAGAQHci6481mLQ=", + "_parent": { + "$ref": "AAAAAAGAQHci648v8Jg=" + }, + "model": { + "$ref": "AAAAAAGAQHci6o8tBGM=" + }, + "subViews": [ + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQHiSDaEIOXU=", + "_parent": { + "$ref": "AAAAAAGAQHci6481mLQ=" + }, + "model": { + "$ref": "AAAAAAGAQHiR5aDzLYY=" + }, + "font": "Arial;13;0", + "left": 2205, + "top": 1686, + "width": 124.9853515625, + "height": 13, + "text": "+type", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQHiYZ6GekyE=", + "_parent": { + "$ref": "AAAAAAGAQHci6481mLQ=" + }, + "model": { + "$ref": "AAAAAAGAQHiYP6GJhto=" + }, + "font": "Arial;13;0", + "left": 2205, + "top": 1701, + "width": 124.9853515625, + "height": 13, + "text": "+anchor", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQHiaXaH+jCo=", + "_parent": { + "$ref": "AAAAAAGAQHci6481mLQ=" + }, + "model": { + "$ref": "AAAAAAGAQHiaNaHpMeE=" + }, + "font": "Arial;13;0", + "left": 2205, + "top": 1716, + "width": 124.9853515625, + "height": 13, + "text": "+anchorPosition", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQHicMqJeplA=", + "_parent": { + "$ref": "AAAAAAGAQHci6481mLQ=" + }, + "model": { + "$ref": "AAAAAAGAQHicC6JJ2ps=" + }, + "font": "Arial;13;0", + "left": 2205, + "top": 1731, + "width": 124.9853515625, + "height": 13, + "text": "+material", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQHidn6K+gmY=", + "_parent": { + "$ref": "AAAAAAGAQHci6481mLQ=" + }, + "model": { + "$ref": "AAAAAAGAQHidd6KpQY0=" + }, + "font": "Arial;13;0", + "left": 2205, + "top": 1746, + "width": 124.9853515625, + "height": 13, + "text": "+outline", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQHift6MepBw=", + "_parent": { + "$ref": "AAAAAAGAQHci6481mLQ=" + }, + "model": { + "$ref": "AAAAAAGAQHifkKMJgeQ=" + }, + "font": "Arial;13;0", + "left": 2205, + "top": 1761, + "width": 124.9853515625, + "height": 13, + "text": "+resource", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQHihY6N+OW8=", + "_parent": { + "$ref": "AAAAAAGAQHci6481mLQ=" + }, + "model": { + "$ref": "AAAAAAGAQHihOaNp1o4=" + }, + "font": "Arial;13;0", + "left": 2205, + "top": 1776, + "width": 124.9853515625, + "height": 13, + "text": "+size", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 2200, + "top": 1681, + "width": 134.9853515625, + "height": 113 + }, + { + "_type": "UMLOperationCompartmentView", + "_id": "AAAAAAGAQHci6482BLA=", + "_parent": { + "$ref": "AAAAAAGAQHci648v8Jg=" + }, + "model": { + "$ref": "AAAAAAGAQHci6o8tBGM=" + }, + "subViews": [ + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAQHlBOamqzMI=", + "_parent": { + "$ref": "AAAAAAGAQHci6482BLA=" + }, + "model": { + "$ref": "AAAAAAGAQHlBEamVlhM=" + }, + "font": "Arial;13;0", + "left": 2205, + "top": 1799, + "width": 124.9853515625, + "height": 13, + "text": "+clone()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAQHlHeapAByk=", + "_parent": { + "$ref": "AAAAAAGAQHci6482BLA=" + }, + "model": { + "$ref": "AAAAAAGAQHlHU6orzwA=" + }, + "font": "Arial;13;0", + "left": 2205, + "top": 1814, + "width": 124.9853515625, + "height": 13, + "text": "+fromJSON()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAQHlJkqqg+fk=", + "_parent": { + "$ref": "AAAAAAGAQHci6482BLA=" + }, + "model": { + "$ref": "AAAAAAGAQHlJbKqLtE0=" + }, + "font": "Arial;13;0", + "left": 2205, + "top": 1829, + "width": 124.9853515625, + "height": 13, + "text": "+toJSON()", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 2200, + "top": 1794, + "width": 134.9853515625, + "height": 53 + }, + { + "_type": "UMLReceptionCompartmentView", + "_id": "AAAAAAGAQHci6483qFU=", + "_parent": { + "$ref": "AAAAAAGAQHci648v8Jg=" + }, + "model": { + "$ref": "AAAAAAGAQHci6o8tBGM=" + }, + "visible": false, + "font": "Arial;13;0", + "left": -312, + "top": 336, + "width": 10, + "height": 10 + }, + { + "_type": "UMLTemplateParameterCompartmentView", + "_id": "AAAAAAGAQHci6484OCg=", + "_parent": { + "$ref": "AAAAAAGAQHci648v8Jg=" + }, + "model": { + "$ref": "AAAAAAGAQHci6o8tBGM=" + }, + "visible": false, + "font": "Arial;13;0", + "left": -312, + "top": 336, + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "containerChangeable": true, + "left": 2200, + "top": 1656, + "width": 134.9853515625, + "height": 191, + "nameCompartment": { + "$ref": "AAAAAAGAQHci648wfDg=" + }, + "attributeCompartment": { + "$ref": "AAAAAAGAQHci6481mLQ=" + }, + "operationCompartment": { + "$ref": "AAAAAAGAQHci6482BLA=" + }, + "receptionCompartment": { + "$ref": "AAAAAAGAQHci6483qFU=" + }, + "templateParameterCompartment": { + "$ref": "AAAAAAGAQHci6484OCg=" + } + }, + { + "_type": "UMLGeneralizationView", + "_id": "AAAAAAGAQHcyhZBoBpU=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAQHcyhZBm0hs=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQHcyhZBpnaU=", + "_parent": { + "$ref": "AAAAAAGAQHcyhZBoBpU=" + }, + "model": { + "$ref": "AAAAAAGAQHcyhZBm0hs=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2232, + "top": 1885, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQHcyhZBoBpU=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQHcyhZBqlPU=", + "_parent": { + "$ref": "AAAAAAGAQHcyhZBoBpU=" + }, + "model": { + "$ref": "AAAAAAGAQHcyhZBm0hs=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 2246, + "top": 1890, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQHcyhZBoBpU=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQHcyhZBrWm8=", + "_parent": { + "$ref": "AAAAAAGAQHcyhZBoBpU=" + }, + "model": { + "$ref": "AAAAAAGAQHcyhZBm0hs=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2203, + "top": 1876, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQHcyhZBoBpU=" + }, + "edgePosition": 1 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAP8/5/T2zufk=" + }, + "tail": { + "$ref": "AAAAAAGAQHci648v8Jg=" + }, + "lineStyle": 1, + "points": "2232:1847;2204:1927", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAQHcyhZBpnaU=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAQHcyhZBqlPU=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAQHcyhZBrWm8=" + } + }, + { + "_type": "UMLAssociationView", + "_id": "AAAAAAGAQHpof7ePZ3E=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAQHpofreL/lM=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQHpof7eQAD8=", + "_parent": { + "$ref": "AAAAAAGAQHpof7ePZ3E=" + }, + "model": { + "$ref": "AAAAAAGAQHpofreL/lM=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2344, + "top": 1617, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQHpof7ePZ3E=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQHpof7eRS9Q=", + "_parent": { + "$ref": "AAAAAAGAQHpof7ePZ3E=" + }, + "model": { + "$ref": "AAAAAAGAQHpofreL/lM=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 2359, + "top": 1617, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQHpof7ePZ3E=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQHpof7eSzzw=", + "_parent": { + "$ref": "AAAAAAGAQHpof7ePZ3E=" + }, + "model": { + "$ref": "AAAAAAGAQHpofreL/lM=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2315, + "top": 1618, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQHpof7ePZ3E=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQHpof7eTIUI=", + "_parent": { + "$ref": "AAAAAAGAQHpof7ePZ3E=" + }, + "model": { + "$ref": "AAAAAAGAQHpofreMF+Y=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2345, + "top": 1611, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQHpof7ePZ3E=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQHpof7eUIc0=", + "_parent": { + "$ref": "AAAAAAGAQHpof7ePZ3E=" + }, + "model": { + "$ref": "AAAAAAGAQHpofreMF+Y=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2358, + "top": 1614, + "height": 13, + "alpha": 0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAQHpof7ePZ3E=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQHpof7eVYJY=", + "_parent": { + "$ref": "AAAAAAGAQHpof7ePZ3E=" + }, + "model": { + "$ref": "AAAAAAGAQHpofreMF+Y=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2317, + "top": 1607, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAQHpof7ePZ3E=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQHpof7eWbVI=", + "_parent": { + "$ref": "AAAAAAGAQHpof7ePZ3E=" + }, + "model": { + "$ref": "AAAAAAGAQHpofreNRd8=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2345, + "top": 1624, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQHpof7ePZ3E=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQHpof7eXzL0=", + "_parent": { + "$ref": "AAAAAAGAQHpof7ePZ3E=" + }, + "model": { + "$ref": "AAAAAAGAQHpofreNRd8=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2358, + "top": 1621, + "height": 13, + "alpha": -0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAQHpof7ePZ3E=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQHpof7eYolo=", + "_parent": { + "$ref": "AAAAAAGAQHpof7ePZ3E=" + }, + "model": { + "$ref": "AAAAAAGAQHpofreNRd8=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2317, + "top": 1628, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAQHpof7ePZ3E=" + } + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAQHpof7eZQkE=", + "_parent": { + "$ref": "AAAAAAGAQHpof7ePZ3E=" + }, + "model": { + "$ref": "AAAAAAGAQHpofreMF+Y=" + }, + "visible": false, + "font": "Arial;13;0", + "width": 10, + "height": 10 + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAQHpof7eadhQ=", + "_parent": { + "$ref": "AAAAAAGAQHpof7ePZ3E=" + }, + "model": { + "$ref": "AAAAAAGAQHpofreNRd8=" + }, + "visible": false, + "font": "Arial;13;0", + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAQHci648v8Jg=" + }, + "tail": { + "$ref": "AAAAAAGAQHO4GV0qRew=" + }, + "points": "2330:1592;2330:1656", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAQHpof7eQAD8=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAQHpof7eRS9Q=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAQHpof7eSzzw=" + }, + "tailRoleNameLabel": { + "$ref": "AAAAAAGAQHpof7eTIUI=" + }, + "tailPropertyLabel": { + "$ref": "AAAAAAGAQHpof7eUIc0=" + }, + "tailMultiplicityLabel": { + "$ref": "AAAAAAGAQHpof7eVYJY=" + }, + "headRoleNameLabel": { + "$ref": "AAAAAAGAQHpof7eWbVI=" + }, + "headPropertyLabel": { + "$ref": "AAAAAAGAQHpof7eXzL0=" + }, + "headMultiplicityLabel": { + "$ref": "AAAAAAGAQHpof7eYolo=" + }, + "tailQualifiersCompartment": { + "$ref": "AAAAAAGAQHpof7eZQkE=" + }, + "headQualifiersCompartment": { + "$ref": "AAAAAAGAQHpof7eadhQ=" + } + }, + { + "_type": "UMLClassView", + "_id": "AAAAAAGAQI6jGOak5LQ=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAQI6jF+ainB0=" + }, + "subViews": [ + { + "_type": "UMLNameCompartmentView", + "_id": "AAAAAAGAQI6jGOalULs=", + "_parent": { + "$ref": "AAAAAAGAQI6jGOak5LQ=" + }, + "model": { + "$ref": "AAAAAAGAQI6jF+ainB0=" + }, + "subViews": [ + { + "_type": "LabelView", + "_id": "AAAAAAGAQI6jGOamfLc=", + "_parent": { + "$ref": "AAAAAAGAQI6jGOalULs=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 32, + "top": 240, + "height": 13 + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAQI6jGOan4lw=", + "_parent": { + "$ref": "AAAAAAGAQI6jGOalULs=" + }, + "font": "Arial;13;1", + "left": 2549, + "top": 1431, + "width": 90.29541015625, + "height": 13, + "text": "LineSymbol3D" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAQI6jGOaon5I=", + "_parent": { + "$ref": "AAAAAAGAQI6jGOalULs=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 32, + "top": 240, + "width": 73.67724609375, + "height": 13, + "text": "(from Model)" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAQI6jGOaphYg=", + "_parent": { + "$ref": "AAAAAAGAQI6jGOalULs=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 32, + "top": 240, + "height": 13, + "horizontalAlignment": 1 + } + ], + "font": "Arial;13;0", + "left": 2544, + "top": 1424, + "width": 100.29541015625, + "height": 25, + "stereotypeLabel": { + "$ref": "AAAAAAGAQI6jGOamfLc=" + }, + "nameLabel": { + "$ref": "AAAAAAGAQI6jGOan4lw=" + }, + "namespaceLabel": { + "$ref": "AAAAAAGAQI6jGOaon5I=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAQI6jGOaphYg=" + } + }, + { + "_type": "UMLAttributeCompartmentView", + "_id": "AAAAAAGAQI6jGOaqStk=", + "_parent": { + "$ref": "AAAAAAGAQI6jGOak5LQ=" + }, + "model": { + "$ref": "AAAAAAGAQI6jF+ainB0=" + }, + "subViews": [ + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQI7RZehHBIg=", + "_parent": { + "$ref": "AAAAAAGAQI6jGOaqStk=" + }, + "model": { + "$ref": "AAAAAAGAQI7RO+gvDaw=" + }, + "font": "Arial;13;0", + "left": 2549, + "top": 1454, + "width": 90.29541015625, + "height": 13, + "text": "+type", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQI7YSuj1EEw=", + "_parent": { + "$ref": "AAAAAAGAQI6jGOaqStk=" + }, + "model": { + "$ref": "AAAAAAGAQI7YIujdTVQ=" + }, + "font": "Arial;13;0", + "left": 2549, + "top": 1469, + "width": 90.29541015625, + "height": 13, + "text": "+styleOrigin", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQI7fRenNc5E=", + "_parent": { + "$ref": "AAAAAAGAQI6jGOaqStk=" + }, + "model": { + "$ref": "AAAAAAGAQI7fHum1PPw=" + }, + "font": "Arial;13;0", + "left": 2549, + "top": 1484, + "width": 90.29541015625, + "height": 13, + "text": "+symbolLayers", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 2544, + "top": 1449, + "width": 100.29541015625, + "height": 53 + }, + { + "_type": "UMLOperationCompartmentView", + "_id": "AAAAAAGAQI6jGOarZ7Y=", + "_parent": { + "$ref": "AAAAAAGAQI6jGOak5LQ=" + }, + "model": { + "$ref": "AAAAAAGAQI6jF+ainB0=" + }, + "subViews": [ + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAQI83ZO7MOkU=", + "_parent": { + "$ref": "AAAAAAGAQI6jGOarZ7Y=" + }, + "model": { + "$ref": "AAAAAAGAQI83Pu60uKU=" + }, + "font": "Arial;13;0", + "left": 2549, + "top": 1507, + "width": 90.29541015625, + "height": 13, + "text": "+clone()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAQI89tO96OHs=", + "_parent": { + "$ref": "AAAAAAGAQI6jGOarZ7Y=" + }, + "model": { + "$ref": "AAAAAAGAQI89iO9irzg=" + }, + "font": "Arial;13;0", + "left": 2549, + "top": 1522, + "width": 90.29541015625, + "height": 13, + "text": "+fromJSON()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAQI8/5+/pUmk=", + "_parent": { + "$ref": "AAAAAAGAQI6jGOarZ7Y=" + }, + "model": { + "$ref": "AAAAAAGAQI8/v+/RXtM=" + }, + "font": "Arial;13;0", + "left": 2549, + "top": 1537, + "width": 90.29541015625, + "height": 13, + "text": "+toJSON()", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 2544, + "top": 1502, + "width": 100.29541015625, + "height": 53 + }, + { + "_type": "UMLReceptionCompartmentView", + "_id": "AAAAAAGAQI6jGOaspYk=", + "_parent": { + "$ref": "AAAAAAGAQI6jGOak5LQ=" + }, + "model": { + "$ref": "AAAAAAGAQI6jF+ainB0=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 16, + "top": 120, + "width": 10, + "height": 10 + }, + { + "_type": "UMLTemplateParameterCompartmentView", + "_id": "AAAAAAGAQI6jGOatLLQ=", + "_parent": { + "$ref": "AAAAAAGAQI6jGOak5LQ=" + }, + "model": { + "$ref": "AAAAAAGAQI6jF+ainB0=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 16, + "top": 120, + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "containerChangeable": true, + "left": 2544, + "top": 1424, + "width": 100.29541015625, + "height": 131, + "nameCompartment": { + "$ref": "AAAAAAGAQI6jGOalULs=" + }, + "attributeCompartment": { + "$ref": "AAAAAAGAQI6jGOaqStk=" + }, + "operationCompartment": { + "$ref": "AAAAAAGAQI6jGOarZ7Y=" + }, + "receptionCompartment": { + "$ref": "AAAAAAGAQI6jGOaspYk=" + }, + "templateParameterCompartment": { + "$ref": "AAAAAAGAQI6jGOatLLQ=" + } + }, + { + "_type": "UMLGeneralizationView", + "_id": "AAAAAAGAQJBZ8ACOlRk=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAQJBZ8ACM7PY=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQJBZ8ACPeVE=", + "_parent": { + "$ref": "AAAAAAGAQJBZ8ACOlRk=" + }, + "model": { + "$ref": "AAAAAAGAQJBZ8ACM7PY=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2407, + "top": 1405, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQJBZ8ACOlRk=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQJBZ8ACQETM=", + "_parent": { + "$ref": "AAAAAAGAQJBZ8ACOlRk=" + }, + "model": { + "$ref": "AAAAAAGAQJBZ8ACM7PY=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 2400, + "top": 1418, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQJBZ8ACOlRk=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQJBZ8ACRbEc=", + "_parent": { + "$ref": "AAAAAAGAQJBZ8ACOlRk=" + }, + "model": { + "$ref": "AAAAAAGAQJBZ8ACM7PY=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2420, + "top": 1378, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQJBZ8ACOlRk=" + }, + "edgePosition": 1 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAP6S17MjIqpw=" + }, + "tail": { + "$ref": "AAAAAAGAQI6jGOak5LQ=" + }, + "lineStyle": 1, + "points": "2543:1464;2285:1333", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAQJBZ8ACPeVE=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAQJBZ8ACQETM=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAQJBZ8ACRbEc=" + } + }, + { + "_type": "UMLGeneralizationView", + "_id": "AAAAAAGAQJBpFAEyXK4=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAQJBpFAEwA94=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQJBpFAEzB1w=", + "_parent": { + "$ref": "AAAAAAGAQJBpFAEyXK4=" + }, + "model": { + "$ref": "AAAAAAGAQJBpFAEwA94=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2384, + "top": 1871, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQJBpFAEyXK4=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQJBpFAE0Dy4=", + "_parent": { + "$ref": "AAAAAAGAQJBpFAEyXK4=" + }, + "model": { + "$ref": "AAAAAAGAQJBpFAEwA94=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 2391, + "top": 1884, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQJBpFAEyXK4=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQJBpFAE1gVA=", + "_parent": { + "$ref": "AAAAAAGAQJBpFAEyXK4=" + }, + "model": { + "$ref": "AAAAAAGAQJBpFAEwA94=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2369, + "top": 1844, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQJBpFAEyXK4=" + }, + "edgePosition": 1 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAP8/5/T2zufk=" + }, + "tail": { + "$ref": "AAAAAAGAQI6qsOc2n1Y=" + }, + "lineStyle": 1, + "points": "2511:1789;2244:1939", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAQJBpFAEzB1w=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAQJBpFAE0Dy4=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAQJBpFAE1gVA=" + } + }, + { + "_type": "UMLAssociationView", + "_id": "AAAAAAGAQJB91wHYp2s=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAQJB91wHUuZ8=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQJB91wHZ4Fw=", + "_parent": { + "$ref": "AAAAAAGAQJB91wHYp2s=" + }, + "model": { + "$ref": "AAAAAAGAQJB91wHUuZ8=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2600, + "top": 1599, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQJB91wHYp2s=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQJB91wHaANg=", + "_parent": { + "$ref": "AAAAAAGAQJB91wHYp2s=" + }, + "model": { + "$ref": "AAAAAAGAQJB91wHUuZ8=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 2615, + "top": 1600, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQJB91wHYp2s=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQJB91wHbV8A=", + "_parent": { + "$ref": "AAAAAAGAQJB91wHYp2s=" + }, + "model": { + "$ref": "AAAAAAGAQJB91wHUuZ8=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2571, + "top": 1598, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQJB91wHYp2s=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQJB91wHcJGw=", + "_parent": { + "$ref": "AAAAAAGAQJB91wHYp2s=" + }, + "model": { + "$ref": "AAAAAAGAQJB91wHV5+E=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2602, + "top": 1575, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQJB91wHYp2s=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQJB91wHdzyA=", + "_parent": { + "$ref": "AAAAAAGAQJB91wHYp2s=" + }, + "model": { + "$ref": "AAAAAAGAQJB91wHV5+E=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2615, + "top": 1578, + "height": 13, + "alpha": 0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAQJB91wHYp2s=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQJB91wHev5k=", + "_parent": { + "$ref": "AAAAAAGAQJB91wHYp2s=" + }, + "model": { + "$ref": "AAAAAAGAQJB91wHV5+E=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2575, + "top": 1569, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAQJB91wHYp2s=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQJB91wHf4ho=", + "_parent": { + "$ref": "AAAAAAGAQJB91wHYp2s=" + }, + "model": { + "$ref": "AAAAAAGAQJB91wHWZ0U=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2599, + "top": 1623, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQJB91wHYp2s=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQJB91wHgUDE=", + "_parent": { + "$ref": "AAAAAAGAQJB91wHYp2s=" + }, + "model": { + "$ref": "AAAAAAGAQJB91wHWZ0U=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2612, + "top": 1622, + "height": 13, + "alpha": -0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAQJB91wHYp2s=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQJB91wHhRqY=", + "_parent": { + "$ref": "AAAAAAGAQJB91wHYp2s=" + }, + "model": { + "$ref": "AAAAAAGAQJB91wHWZ0U=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2571, + "top": 1626, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAQJB91wHYp2s=" + } + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAQJB91wHidSU=", + "_parent": { + "$ref": "AAAAAAGAQJB91wHYp2s=" + }, + "model": { + "$ref": "AAAAAAGAQJB91wHV5+E=" + }, + "visible": false, + "font": "Arial;13;0", + "width": 10, + "height": 10 + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAQJB91wHj0Is=", + "_parent": { + "$ref": "AAAAAAGAQJB91wHYp2s=" + }, + "model": { + "$ref": "AAAAAAGAQJB91wHWZ0U=" + }, + "visible": false, + "font": "Arial;13;0", + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAQI6qsOc2n1Y=" + }, + "tail": { + "$ref": "AAAAAAGAQI6jGOak5LQ=" + }, + "lineStyle": 1, + "points": "2589:1555;2583:1655", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAQJB91wHZ4Fw=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAQJB91wHaANg=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAQJB91wHbV8A=" + }, + "tailRoleNameLabel": { + "$ref": "AAAAAAGAQJB91wHcJGw=" + }, + "tailPropertyLabel": { + "$ref": "AAAAAAGAQJB91wHdzyA=" + }, + "tailMultiplicityLabel": { + "$ref": "AAAAAAGAQJB91wHev5k=" + }, + "headRoleNameLabel": { + "$ref": "AAAAAAGAQJB91wHf4ho=" + }, + "headPropertyLabel": { + "$ref": "AAAAAAGAQJB91wHgUDE=" + }, + "headMultiplicityLabel": { + "$ref": "AAAAAAGAQJB91wHhRqY=" + }, + "tailQualifiersCompartment": { + "$ref": "AAAAAAGAQJB91wHidSU=" + }, + "headQualifiersCompartment": { + "$ref": "AAAAAAGAQJB91wHj0Is=" + } + }, + { + "_type": "UMLClassView", + "_id": "AAAAAAGAQJPNQDjq3dQ=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "subViews": [ + { + "_type": "UMLNameCompartmentView", + "_id": "AAAAAAGAQJPNQDjrEHc=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjq3dQ=" + }, + "model": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "subViews": [ + { + "_type": "LabelView", + "_id": "AAAAAAGAQJPNQDjsZh8=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjrEHc=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 240, + "top": 272, + "height": 13 + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAQJPNQDjtVq4=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjrEHc=" + }, + "font": "Arial;13;1", + "left": 2789, + "top": 1439, + "width": 114.84814453125, + "height": 13, + "text": "PolygonSymbol3D" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAQJPNQDju7ps=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjrEHc=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 240, + "top": 272, + "width": 73.67724609375, + "height": 13, + "text": "(from Model)" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAQJPNQDjv96U=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjrEHc=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 240, + "top": 272, + "height": 13, + "horizontalAlignment": 1 + } + ], + "font": "Arial;13;0", + "left": 2784, + "top": 1432, + "width": 124.84814453125, + "height": 25, + "stereotypeLabel": { + "$ref": "AAAAAAGAQJPNQDjsZh8=" + }, + "nameLabel": { + "$ref": "AAAAAAGAQJPNQDjtVq4=" + }, + "namespaceLabel": { + "$ref": "AAAAAAGAQJPNQDju7ps=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAQJPNQDjv96U=" + } + }, + { + "_type": "UMLAttributeCompartmentView", + "_id": "AAAAAAGAQJPNQDjwCpo=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjq3dQ=" + }, + "model": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "subViews": [ + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQJPv2zpN3O0=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjwCpo=" + }, + "model": { + "$ref": "AAAAAAGAQJPvrzoyMNs=" + }, + "font": "Arial;13;0", + "left": 2789, + "top": 1462, + "width": 114.84814453125, + "height": 13, + "text": "+type", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQJP6zjtbIHg=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjwCpo=" + }, + "model": { + "$ref": "AAAAAAGAQJP6pjtAYNM=" + }, + "font": "Arial;13;0", + "left": 2789, + "top": 1477, + "width": 114.84814453125, + "height": 13, + "text": "+styleOrigin", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQJP9JTvZiSI=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjwCpo=" + }, + "model": { + "$ref": "AAAAAAGAQJP8/ju+xJc=" + }, + "font": "Arial;13;0", + "left": 2789, + "top": 1492, + "width": 114.84814453125, + "height": 13, + "text": "+symbolLayers", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 2784, + "top": 1457, + "width": 124.84814453125, + "height": 53 + }, + { + "_type": "UMLOperationCompartmentView", + "_id": "AAAAAAGAQJPNQDjxeds=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjq3dQ=" + }, + "model": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "subViews": [ + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAQJQJdjzP6kM=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjxeds=" + }, + "model": { + "$ref": "AAAAAAGAQJQJTTy0Pz0=" + }, + "font": "Arial;13;0", + "left": 2789, + "top": 1515, + "width": 114.84814453125, + "height": 13, + "text": "+clone()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAQJQQIz2Vo/k=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjxeds=" + }, + "model": { + "$ref": "AAAAAAGAQJQP+D16Vf8=" + }, + "font": "Arial;13;0", + "left": 2789, + "top": 1530, + "width": 114.84814453125, + "height": 13, + "text": "+fromJSON()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAQJQShD4TuAw=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjxeds=" + }, + "model": { + "$ref": "AAAAAAGAQJQSWz34cwY=" + }, + "font": "Arial;13;0", + "left": 2789, + "top": 1545, + "width": 114.84814453125, + "height": 13, + "text": "+toJSON()", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 2784, + "top": 1510, + "width": 124.84814453125, + "height": 53 + }, + { + "_type": "UMLReceptionCompartmentView", + "_id": "AAAAAAGAQJPNQDjybwU=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjq3dQ=" + }, + "model": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 120, + "top": 136, + "width": 10, + "height": 10 + }, + { + "_type": "UMLTemplateParameterCompartmentView", + "_id": "AAAAAAGAQJPNQDjzOsI=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjq3dQ=" + }, + "model": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 120, + "top": 136, + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "containerChangeable": true, + "left": 2784, + "top": 1432, + "width": 124.84814453125, + "height": 131, + "nameCompartment": { + "$ref": "AAAAAAGAQJPNQDjrEHc=" + }, + "attributeCompartment": { + "$ref": "AAAAAAGAQJPNQDjwCpo=" + }, + "operationCompartment": { + "$ref": "AAAAAAGAQJPNQDjxeds=" + }, + "receptionCompartment": { + "$ref": "AAAAAAGAQJPNQDjybwU=" + }, + "templateParameterCompartment": { + "$ref": "AAAAAAGAQJPNQDjzOsI=" + } + }, + { + "_type": "UMLGeneralizationView", + "_id": "AAAAAAGAQJR3UkvOHJo=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAQJR3UUvMi3E=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQJR3UkvPfd4=", + "_parent": { + "$ref": "AAAAAAGAQJR3UkvOHJo=" + }, + "model": { + "$ref": "AAAAAAGAQJR3UUvMi3E=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2831, + "top": 1300, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQJR3UkvOHJo=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQJR3UkvQei4=", + "_parent": { + "$ref": "AAAAAAGAQJR3UkvOHJo=" + }, + "model": { + "$ref": "AAAAAAGAQJR3UUvMi3E=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 2831, + "top": 1315, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQJR3UkvOHJo=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQJR3UkvRy1w=", + "_parent": { + "$ref": "AAAAAAGAQJR3UkvOHJo=" + }, + "model": { + "$ref": "AAAAAAGAQJR3UUvMi3E=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2832, + "top": 1270, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQJR3UkvOHJo=" + }, + "edgePosition": 1 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAP6S17MjIqpw=" + }, + "tail": { + "$ref": "AAAAAAGAQJPNQDjq3dQ=" + }, + "points": "2832:1432;2832:1291;2284:1291", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAQJR3UkvPfd4=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAQJR3UkvQei4=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAQJR3UkvRy1w=" + } + }, + { + "_type": "UMLGeneralizationView", + "_id": "AAAAAAGAQKMeBnOU3pU=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAQKMeBnOSzgA=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQKMeBnOVxvY=", + "_parent": { + "$ref": "AAAAAAGAQKMeBnOU3pU=" + }, + "model": { + "$ref": "AAAAAAGAQKMeBnOSzgA=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2894, + "top": 1979, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQKMeBnOU3pU=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQKMeBnOWsmM=", + "_parent": { + "$ref": "AAAAAAGAQKMeBnOU3pU=" + }, + "model": { + "$ref": "AAAAAAGAQKMeBnOSzgA=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 2894, + "top": 1994, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQKMeBnOU3pU=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQKMeBnOXDsI=", + "_parent": { + "$ref": "AAAAAAGAQKMeBnOU3pU=" + }, + "model": { + "$ref": "AAAAAAGAQKMeBnOSzgA=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2895, + "top": 1949, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQKMeBnOU3pU=" + }, + "edgePosition": 1 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAP8/5/T2zufk=" + }, + "tail": { + "$ref": "AAAAAAGAQKIeqWLv2j0=" + }, + "points": "2895:1831;2895:1970;2243:1970", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAQKMeBnOVxvY=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAQKMeBnOWsmM=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAQKMeBnOXDsI=" + } + }, + { + "_type": "UMLAssociationView", + "_id": "AAAAAAGAQKMnaHQfR5Y=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAQKMnaHQbRW0=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQKMnaXQgNHo=", + "_parent": { + "$ref": "AAAAAAGAQKMnaHQfR5Y=" + }, + "model": { + "$ref": "AAAAAAGAQKMnaHQbRW0=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2874, + "top": 1602, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQKMnaHQfR5Y=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQKMnaXQhhl4=", + "_parent": { + "$ref": "AAAAAAGAQKMnaHQfR5Y=" + }, + "model": { + "$ref": "AAAAAAGAQKMnaHQbRW0=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 2889, + "top": 1602, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQKMnaHQfR5Y=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQKMnaXQi6TY=", + "_parent": { + "$ref": "AAAAAAGAQKMnaHQfR5Y=" + }, + "model": { + "$ref": "AAAAAAGAQKMnaHQbRW0=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2845, + "top": 1603, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQKMnaHQfR5Y=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQKMnaXQjj+M=", + "_parent": { + "$ref": "AAAAAAGAQKMnaHQfR5Y=" + }, + "model": { + "$ref": "AAAAAAGAQKMnaHQc7Rs=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2875, + "top": 1581, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQKMnaHQfR5Y=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQKMnaXQkBlA=", + "_parent": { + "$ref": "AAAAAAGAQKMnaHQfR5Y=" + }, + "model": { + "$ref": "AAAAAAGAQKMnaHQc7Rs=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2888, + "top": 1584, + "height": 13, + "alpha": 0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAQKMnaHQfR5Y=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQKMnaXQlgk0=", + "_parent": { + "$ref": "AAAAAAGAQKMnaHQfR5Y=" + }, + "model": { + "$ref": "AAAAAAGAQKMnaHQc7Rs=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2847, + "top": 1577, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAQKMnaHQfR5Y=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQKMnaXQmq5o=", + "_parent": { + "$ref": "AAAAAAGAQKMnaHQfR5Y=" + }, + "model": { + "$ref": "AAAAAAGAQKMnaHQdqUs=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2875, + "top": 1624, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQKMnaHQfR5Y=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQKMnaXQnK7k=", + "_parent": { + "$ref": "AAAAAAGAQKMnaHQfR5Y=" + }, + "model": { + "$ref": "AAAAAAGAQKMnaHQdqUs=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2888, + "top": 1621, + "height": 13, + "alpha": -0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAQKMnaHQfR5Y=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQKMnaXQonBQ=", + "_parent": { + "$ref": "AAAAAAGAQKMnaHQfR5Y=" + }, + "model": { + "$ref": "AAAAAAGAQKMnaHQdqUs=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2847, + "top": 1628, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAQKMnaHQfR5Y=" + } + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAQKMnaXQpT2Q=", + "_parent": { + "$ref": "AAAAAAGAQKMnaHQfR5Y=" + }, + "model": { + "$ref": "AAAAAAGAQKMnaHQc7Rs=" + }, + "visible": false, + "font": "Arial;13;0", + "width": 10, + "height": 10 + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAQKMnaXQqcZE=", + "_parent": { + "$ref": "AAAAAAGAQKMnaHQfR5Y=" + }, + "model": { + "$ref": "AAAAAAGAQKMnaHQdqUs=" + }, + "visible": false, + "font": "Arial;13;0", + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAQKIeqWLv2j0=" + }, + "tail": { + "$ref": "AAAAAAGAQJPNQDjq3dQ=" + }, + "points": "2860:1562;2860:1656", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAQKMnaXQgNHo=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAQKMnaXQhhl4=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAQKMnaXQi6TY=" + }, + "tailRoleNameLabel": { + "$ref": "AAAAAAGAQKMnaXQjj+M=" + }, + "tailPropertyLabel": { + "$ref": "AAAAAAGAQKMnaXQkBlA=" + }, + "tailMultiplicityLabel": { + "$ref": "AAAAAAGAQKMnaXQlgk0=" + }, + "headRoleNameLabel": { + "$ref": "AAAAAAGAQKMnaXQmq5o=" + }, + "headPropertyLabel": { + "$ref": "AAAAAAGAQKMnaXQnK7k=" + }, + "headMultiplicityLabel": { + "$ref": "AAAAAAGAQKMnaXQonBQ=" + }, + "tailQualifiersCompartment": { + "$ref": "AAAAAAGAQKMnaXQpT2Q=" + }, + "headQualifiersCompartment": { + "$ref": "AAAAAAGAQKMnaXQqcZE=" + } + }, + { + "_type": "UMLClassView", + "_id": "AAAAAAGAQLjRBoVMI9U=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAQLjRBoVK/Ro=" + }, + "subViews": [ + { + "_type": "UMLNameCompartmentView", + "_id": "AAAAAAGAQLjRBoVNFhk=", + "_parent": { + "$ref": "AAAAAAGAQLjRBoVMI9U=" + }, + "model": { + "$ref": "AAAAAAGAQLjRBoVK/Ro=" + }, + "subViews": [ + { + "_type": "LabelView", + "_id": "AAAAAAGAQLjRBoVO9Fw=", + "_parent": { + "$ref": "AAAAAAGAQLjRBoVNFhk=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 544, + "top": 240, + "height": 13 + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAQLjRBoVPLIA=", + "_parent": { + "$ref": "AAAAAAGAQLjRBoVNFhk=" + }, + "font": "Arial;13;1", + "left": 3133, + "top": 1431, + "width": 150.6689453125, + "height": 13, + "text": "LabelSymbol3D" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAQLjRBoVQcTM=", + "_parent": { + "$ref": "AAAAAAGAQLjRBoVNFhk=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 544, + "top": 240, + "width": 73.67724609375, + "height": 13, + "text": "(from Model)" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAQLjRBoVRh+I=", + "_parent": { + "$ref": "AAAAAAGAQLjRBoVNFhk=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 544, + "top": 240, + "height": 13, + "horizontalAlignment": 1 + } + ], + "font": "Arial;13;0", + "left": 3128, + "top": 1424, + "width": 160.6689453125, + "height": 25, + "stereotypeLabel": { + "$ref": "AAAAAAGAQLjRBoVO9Fw=" + }, + "nameLabel": { + "$ref": "AAAAAAGAQLjRBoVPLIA=" + }, + "namespaceLabel": { + "$ref": "AAAAAAGAQLjRBoVQcTM=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAQLjRBoVRh+I=" + } + }, + { + "_type": "UMLAttributeCompartmentView", + "_id": "AAAAAAGAQLjRBoVSSjQ=", + "_parent": { + "$ref": "AAAAAAGAQLjRBoVMI9U=" + }, + "model": { + "$ref": "AAAAAAGAQLjRBoVK/Ro=" + }, + "subViews": [ + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQLkJQIqgt9U=", + "_parent": { + "$ref": "AAAAAAGAQLjRBoVSSjQ=" + }, + "model": { + "$ref": "AAAAAAGAQLkJF4qC7uw=" + }, + "font": "Arial;13;0", + "left": 3133, + "top": 1454, + "width": 150.6689453125, + "height": 13, + "text": "+type", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQLkP1Yt+nAw=", + "_parent": { + "$ref": "AAAAAAGAQLjRBoVSSjQ=" + }, + "model": { + "$ref": "AAAAAAGAQLkPq4tgUdM=" + }, + "font": "Arial;13;0", + "left": 3133, + "top": 1469, + "width": 150.6689453125, + "height": 13, + "text": "+callout", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQLkR04wL9EQ=", + "_parent": { + "$ref": "AAAAAAGAQLjRBoVSSjQ=" + }, + "model": { + "$ref": "AAAAAAGAQLkRqYvtqAE=" + }, + "font": "Arial;13;0", + "left": 3133, + "top": 1484, + "width": 150.6689453125, + "height": 13, + "text": "+styleOrigin", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQLkUA4yYwFg=", + "_parent": { + "$ref": "AAAAAAGAQLjRBoVSSjQ=" + }, + "model": { + "$ref": "AAAAAAGAQLkT24x6g2s=" + }, + "font": "Arial;13;0", + "left": 3133, + "top": 1499, + "width": 150.6689453125, + "height": 13, + "text": "+symbolLayers", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQLkWgI0lYgg=", + "_parent": { + "$ref": "AAAAAAGAQLjRBoVSSjQ=" + }, + "model": { + "$ref": "AAAAAAGAQLkWVo0H4Q8=" + }, + "font": "Arial;13;0", + "left": 3133, + "top": 1514, + "width": 150.6689453125, + "height": 13, + "text": "+verticalOffset", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 3128, + "top": 1449, + "width": 160.6689453125, + "height": 83 + }, + { + "_type": "UMLOperationCompartmentView", + "_id": "AAAAAAGAQLjRBoVT+pk=", + "_parent": { + "$ref": "AAAAAAGAQLjRBoVMI9U=" + }, + "model": { + "$ref": "AAAAAAGAQLjRBoVK/Ro=" + }, + "subViews": [ + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAQLjfqIbWTPM=", + "_parent": { + "$ref": "AAAAAAGAQLjRBoVT+pk=" + }, + "model": { + "$ref": "AAAAAAGAQLjff4a4sxM=" + }, + "font": "Arial;13;0", + "left": 3133, + "top": 1537, + "width": 150.6689453125, + "height": 13, + "text": "+clone()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAQLjl84e03IQ=", + "_parent": { + "$ref": "AAAAAAGAQLjRBoVT+pk=" + }, + "model": { + "$ref": "AAAAAAGAQLjlyoeW4cw=" + }, + "font": "Arial;13;0", + "left": 3133, + "top": 1552, + "width": 150.6689453125, + "height": 13, + "text": "+fromJSON()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAQLjoMohBjUc=", + "_parent": { + "$ref": "AAAAAAGAQLjRBoVT+pk=" + }, + "model": { + "$ref": "AAAAAAGAQLjoBYgjCv8=" + }, + "font": "Arial;13;0", + "left": 3133, + "top": 1567, + "width": 150.6689453125, + "height": 13, + "text": "+toJSON()", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 3128, + "top": 1532, + "width": 160.6689453125, + "height": 53 + }, + { + "_type": "UMLReceptionCompartmentView", + "_id": "AAAAAAGAQLjRBoVUyQg=", + "_parent": { + "$ref": "AAAAAAGAQLjRBoVMI9U=" + }, + "model": { + "$ref": "AAAAAAGAQLjRBoVK/Ro=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 272, + "top": 120, + "width": 10, + "height": 10 + }, + { + "_type": "UMLTemplateParameterCompartmentView", + "_id": "AAAAAAGAQLjRB4VVp9k=", + "_parent": { + "$ref": "AAAAAAGAQLjRBoVMI9U=" + }, + "model": { + "$ref": "AAAAAAGAQLjRBoVK/Ro=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 3157, + "top": 1424, + "width": 130.6689453125, + "height": 10 + } + ], + "font": "Arial;13;0", + "containerChangeable": true, + "left": 3128, + "top": 1424, + "width": 160.6689453125, + "height": 161, + "nameCompartment": { + "$ref": "AAAAAAGAQLjRBoVNFhk=" + }, + "attributeCompartment": { + "$ref": "AAAAAAGAQLjRBoVSSjQ=" + }, + "operationCompartment": { + "$ref": "AAAAAAGAQLjRBoVT+pk=" + }, + "receptionCompartment": { + "$ref": "AAAAAAGAQLjRBoVUyQg=" + }, + "templateParameterCompartment": { + "$ref": "AAAAAAGAQLjRB4VVp9k=" + } + }, + { + "_type": "UMLGeneralizationView", + "_id": "AAAAAAGAQLnZqZjXg3U=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAQLnZqZjVkdk=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQLnZqZjYgFI=", + "_parent": { + "$ref": "AAAAAAGAQLnZqZjXg3U=" + }, + "model": { + "$ref": "AAAAAAGAQLnZqZjVkdk=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 3215, + "top": 1300, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQLnZqZjXg3U=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQLnZqZjZLo0=", + "_parent": { + "$ref": "AAAAAAGAQLnZqZjXg3U=" + }, + "model": { + "$ref": "AAAAAAGAQLnZqZjVkdk=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 3215, + "top": 1315, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQLnZqZjXg3U=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQLnZqZjaT2c=", + "_parent": { + "$ref": "AAAAAAGAQLnZqZjXg3U=" + }, + "model": { + "$ref": "AAAAAAGAQLnZqZjVkdk=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 3216, + "top": 1270, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQLnZqZjXg3U=" + }, + "edgePosition": 1 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAP6S17MjIqpw=" + }, + "tail": { + "$ref": "AAAAAAGAQLjRBoVMI9U=" + }, + "points": "3216:1424;3216:1291;2284:1291", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAQLnZqZjYgFI=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAQLnZqZjZLo0=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAQLnZqZjaT2c=" + } + }, + { + "_type": "UMLClassView", + "_id": "AAAAAAGAQLns6JmlVRk=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAQLns6Jmj0x4=" + }, + "subViews": [ + { + "_type": "UMLNameCompartmentView", + "_id": "AAAAAAGAQLns6ZmmuQ4=", + "_parent": { + "$ref": "AAAAAAGAQLns6JmlVRk=" + }, + "model": { + "$ref": "AAAAAAGAQLns6Jmj0x4=" + }, + "subViews": [ + { + "_type": "LabelView", + "_id": "AAAAAAGAQLns6ZmnQz0=", + "_parent": { + "$ref": "AAAAAAGAQLns6ZmmuQ4=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 624, + "top": 240, + "height": 13 + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAQLns6ZmoUbY=", + "_parent": { + "$ref": "AAAAAAGAQLns6ZmmuQ4=" + }, + "font": "Arial;13;1", + "left": 3165, + "top": 1655, + "width": 124.02685546875, + "height": 13, + "text": "TextSymbol3DLayer" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAQLns6Zmp+VU=", + "_parent": { + "$ref": "AAAAAAGAQLns6ZmmuQ4=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 624, + "top": 240, + "width": 73.67724609375, + "height": 13, + "text": "(from Model)" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAQLns6ZmqOIg=", + "_parent": { + "$ref": "AAAAAAGAQLns6ZmmuQ4=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 624, + "top": 240, + "height": 13, + "horizontalAlignment": 1 + } + ], + "font": "Arial;13;0", + "left": 3160, + "top": 1648, + "width": 134.02685546875, + "height": 25, + "stereotypeLabel": { + "$ref": "AAAAAAGAQLns6ZmnQz0=" + }, + "nameLabel": { + "$ref": "AAAAAAGAQLns6ZmoUbY=" + }, + "namespaceLabel": { + "$ref": "AAAAAAGAQLns6Zmp+VU=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAQLns6ZmqOIg=" + } + }, + { + "_type": "UMLAttributeCompartmentView", + "_id": "AAAAAAGAQLns6Zmrs/4=", + "_parent": { + "$ref": "AAAAAAGAQLns6JmlVRk=" + }, + "model": { + "$ref": "AAAAAAGAQLns6Jmj0x4=" + }, + "subViews": [ + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQLoWUpuBuNA=", + "_parent": { + "$ref": "AAAAAAGAQLns6Zmrs/4=" + }, + "model": { + "$ref": "AAAAAAGAQLoWJ5tje4c=" + }, + "font": "Arial;13;0", + "left": 3165, + "top": 1678, + "width": 124.02685546875, + "height": 13, + "text": "+type", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQLocfpxfnd8=", + "_parent": { + "$ref": "AAAAAAGAQLns6Zmrs/4=" + }, + "model": { + "$ref": "AAAAAAGAQLocVpxB5AM=" + }, + "font": "Arial;13;0", + "left": 3165, + "top": 1693, + "width": 124.02685546875, + "height": 13, + "text": "+background", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQLofKJzsoYc=", + "_parent": { + "$ref": "AAAAAAGAQLns6Zmrs/4=" + }, + "model": { + "$ref": "AAAAAAGAQLofAJzO1GA=" + }, + "font": "Arial;13;0", + "left": 3165, + "top": 1708, + "width": 124.02685546875, + "height": 13, + "text": "+font", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQLohDJ15dOM=", + "_parent": { + "$ref": "AAAAAAGAQLns6Zmrs/4=" + }, + "model": { + "$ref": "AAAAAAGAQLog4Z1bzo4=" + }, + "font": "Arial;13;0", + "left": 3165, + "top": 1723, + "width": 124.02685546875, + "height": 13, + "text": "+halo", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQLojPJ4GhSY=", + "_parent": { + "$ref": "AAAAAAGAQLns6Zmrs/4=" + }, + "model": { + "$ref": "AAAAAAGAQLojE53omX0=" + }, + "font": "Arial;13;0", + "left": 3165, + "top": 1738, + "width": 124.02685546875, + "height": 13, + "text": "+horizontalAlignment", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQLolfZ6T3fI=", + "_parent": { + "$ref": "AAAAAAGAQLns6Zmrs/4=" + }, + "model": { + "$ref": "AAAAAAGAQLolVZ51Tdg=" + }, + "font": "Arial;13;0", + "left": 3165, + "top": 1753, + "width": 124.02685546875, + "height": 13, + "text": "+lineHeight", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQLonc58goqg=", + "_parent": { + "$ref": "AAAAAAGAQLns6Zmrs/4=" + }, + "model": { + "$ref": "AAAAAAGAQLonSp8CGas=" + }, + "font": "Arial;13;0", + "left": 3165, + "top": 1768, + "width": 124.02685546875, + "height": 13, + "text": "+material", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQLopup+tBm8=", + "_parent": { + "$ref": "AAAAAAGAQLns6Zmrs/4=" + }, + "model": { + "$ref": "AAAAAAGAQLopjp+PrHs=" + }, + "font": "Arial;13;0", + "left": 3165, + "top": 1783, + "width": 124.02685546875, + "height": 13, + "text": "+size", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQLosE6A6wU8=", + "_parent": { + "$ref": "AAAAAAGAQLns6Zmrs/4=" + }, + "model": { + "$ref": "AAAAAAGAQLor6qAcWyY=" + }, + "font": "Arial;13;0", + "left": 3165, + "top": 1798, + "width": 124.02685546875, + "height": 13, + "text": "+text", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQLq7R6iEU80=", + "_parent": { + "$ref": "AAAAAAGAQLns6Zmrs/4=" + }, + "model": { + "$ref": "AAAAAAGAQLq7GahmsQQ=" + }, + "font": "Arial;13;0", + "left": 3165, + "top": 1813, + "width": 124.02685546875, + "height": 13, + "text": "+verticalAlignment", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 3160, + "top": 1673, + "width": 134.02685546875, + "height": 158 + }, + { + "_type": "UMLOperationCompartmentView", + "_id": "AAAAAAGAQLns6Zmsbbk=", + "_parent": { + "$ref": "AAAAAAGAQLns6JmlVRk=" + }, + "model": { + "$ref": "AAAAAAGAQLns6Jmj0x4=" + }, + "subViews": [ + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAQLrMgqpWe4I=", + "_parent": { + "$ref": "AAAAAAGAQLns6Zmsbbk=" + }, + "model": { + "$ref": "AAAAAAGAQLrMV6o4fWE=" + }, + "font": "Arial;13;0", + "left": 3165, + "top": 1836, + "width": 124.02685546875, + "height": 13, + "text": "+clone()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAQLrS4as0gpM=", + "_parent": { + "$ref": "AAAAAAGAQLns6Zmsbbk=" + }, + "model": { + "$ref": "AAAAAAGAQLrSt6sWGnA=" + }, + "font": "Arial;13;0", + "left": 3165, + "top": 1851, + "width": 124.02685546875, + "height": 13, + "text": "+fromJSON()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAQLrVDqvBW34=", + "_parent": { + "$ref": "AAAAAAGAQLns6Zmsbbk=" + }, + "model": { + "$ref": "AAAAAAGAQLrU4qujo+U=" + }, + "font": "Arial;13;0", + "left": 3165, + "top": 1866, + "width": 124.02685546875, + "height": 13, + "text": "+toJSON()", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 3160, + "top": 1831, + "width": 134.02685546875, + "height": 53 + }, + { + "_type": "UMLReceptionCompartmentView", + "_id": "AAAAAAGAQLns6Zmtu+E=", + "_parent": { + "$ref": "AAAAAAGAQLns6JmlVRk=" + }, + "model": { + "$ref": "AAAAAAGAQLns6Jmj0x4=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 312, + "top": 120, + "width": 10, + "height": 10 + }, + { + "_type": "UMLTemplateParameterCompartmentView", + "_id": "AAAAAAGAQLns6ZmulWE=", + "_parent": { + "$ref": "AAAAAAGAQLns6JmlVRk=" + }, + "model": { + "$ref": "AAAAAAGAQLns6Jmj0x4=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 312, + "top": 120, + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "containerChangeable": true, + "left": 3160, + "top": 1648, + "width": 134.02685546875, + "height": 236, + "nameCompartment": { + "$ref": "AAAAAAGAQLns6ZmmuQ4=" + }, + "attributeCompartment": { + "$ref": "AAAAAAGAQLns6Zmrs/4=" + }, + "operationCompartment": { + "$ref": "AAAAAAGAQLns6Zmsbbk=" + }, + "receptionCompartment": { + "$ref": "AAAAAAGAQLns6Zmtu+E=" + }, + "templateParameterCompartment": { + "$ref": "AAAAAAGAQLns6ZmulWE=" + } + }, + { + "_type": "UMLAssociationView", + "_id": "AAAAAAGAQLsG/7AEF2M=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAQLsG/7AAptg=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQLsG/7AFuFA=", + "_parent": { + "$ref": "AAAAAAGAQLsG/7AEF2M=" + }, + "model": { + "$ref": "AAAAAAGAQLsG/7AAptg=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 3229, + "top": 1609, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQLsG/7AEF2M=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQLsG/7AGddo=", + "_parent": { + "$ref": "AAAAAAGAQLsG/7AEF2M=" + }, + "model": { + "$ref": "AAAAAAGAQLsG/7AAptg=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 3244, + "top": 1608, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQLsG/7AEF2M=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQLsG/7AHS58=", + "_parent": { + "$ref": "AAAAAAGAQLsG/7AEF2M=" + }, + "model": { + "$ref": "AAAAAAGAQLsG/7AAptg=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 3200, + "top": 1610, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQLsG/7AEF2M=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQLsG/7AIFAY=", + "_parent": { + "$ref": "AAAAAAGAQLsG/7AEF2M=" + }, + "model": { + "$ref": "AAAAAAGAQLsG/7ABSMo=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 3229, + "top": 1603, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQLsG/7AEF2M=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQLsG/7AJvLI=", + "_parent": { + "$ref": "AAAAAAGAQLsG/7AEF2M=" + }, + "model": { + "$ref": "AAAAAAGAQLsG/7ABSMo=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 3243, + "top": 1605, + "height": 13, + "alpha": 0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAQLsG/7AEF2M=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQLsG/7AKKlA=", + "_parent": { + "$ref": "AAAAAAGAQLsG/7AEF2M=" + }, + "model": { + "$ref": "AAAAAAGAQLsG/7ABSMo=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 3201, + "top": 1601, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAQLsG/7AEF2M=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQLsG/7ALPOs=", + "_parent": { + "$ref": "AAAAAAGAQLsG/7AEF2M=" + }, + "model": { + "$ref": "AAAAAAGAQLsG/7ACCWw=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 3230, + "top": 1614, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQLsG/7AEF2M=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQLsG/7AMZ1k=", + "_parent": { + "$ref": "AAAAAAGAQLsG/7AEF2M=" + }, + "model": { + "$ref": "AAAAAAGAQLsG/7ACCWw=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 3243, + "top": 1610, + "height": 13, + "alpha": -0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAQLsG/7AEF2M=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQLsG/7ANfkw=", + "_parent": { + "$ref": "AAAAAAGAQLsG/7AEF2M=" + }, + "model": { + "$ref": "AAAAAAGAQLsG/7ACCWw=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 3203, + "top": 1620, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAQLsG/7AEF2M=" + } + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAQLsG/7AOwEs=", + "_parent": { + "$ref": "AAAAAAGAQLsG/7AEF2M=" + }, + "model": { + "$ref": "AAAAAAGAQLsG/7ABSMo=" + }, + "visible": false, + "font": "Arial;13;0", + "width": 10, + "height": 10 + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAQLsG/7APzkw=", + "_parent": { + "$ref": "AAAAAAGAQLsG/7AEF2M=" + }, + "model": { + "$ref": "AAAAAAGAQLsG/7ACCWw=" + }, + "visible": false, + "font": "Arial;13;0", + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAQLns6JmlVRk=" + }, + "tail": { + "$ref": "AAAAAAGAQLjRBoVMI9U=" + }, + "lineStyle": 1, + "points": "3213:1585;3217:1647", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAQLsG/7AFuFA=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAQLsG/7AGddo=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAQLsG/7AHS58=" + }, + "tailRoleNameLabel": { + "$ref": "AAAAAAGAQLsG/7AIFAY=" + }, + "tailPropertyLabel": { + "$ref": "AAAAAAGAQLsG/7AJvLI=" + }, + "tailMultiplicityLabel": { + "$ref": "AAAAAAGAQLsG/7AKKlA=" + }, + "headRoleNameLabel": { + "$ref": "AAAAAAGAQLsG/7ALPOs=" + }, + "headPropertyLabel": { + "$ref": "AAAAAAGAQLsG/7AMZ1k=" + }, + "headMultiplicityLabel": { + "$ref": "AAAAAAGAQLsG/7ANfkw=" + }, + "tailQualifiersCompartment": { + "$ref": "AAAAAAGAQLsG/7AOwEs=" + }, + "headQualifiersCompartment": { + "$ref": "AAAAAAGAQLsG/7APzkw=" + } + }, + { + "_type": "UMLGeneralizationView", + "_id": "AAAAAAGAQLsTnLEIRdg=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAQLsTnLEG5Uo=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQLsTnLEJqIk=", + "_parent": { + "$ref": "AAAAAAGAQLsTnLEIRdg=" + }, + "model": { + "$ref": "AAAAAAGAQLsTnLEG5Uo=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 3225, + "top": 1979, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQLsTnLEIRdg=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQLsTnLEKkkU=", + "_parent": { + "$ref": "AAAAAAGAQLsTnLEIRdg=" + }, + "model": { + "$ref": "AAAAAAGAQLsTnLEG5Uo=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 3225, + "top": 1994, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQLsTnLEIRdg=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQLsTnLELziw=", + "_parent": { + "$ref": "AAAAAAGAQLsTnLEIRdg=" + }, + "model": { + "$ref": "AAAAAAGAQLsTnLEG5Uo=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 3226, + "top": 1949, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQLsTnLEIRdg=" + }, + "edgePosition": 1 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAP8/5/T2zufk=" + }, + "tail": { + "$ref": "AAAAAAGAQLns6JmlVRk=" + }, + "points": "3226:1883;3226:1970;2243:1970", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAQLsTnLEJqIk=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAQLsTnLEKkkU=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAQLsTnLELziw=" + } + }, + { + "_type": "UMLClassView", + "_id": "AAAAAAGAQPnVf+rFgxs=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAQPnVfurDxP4=" + }, + "subViews": [ + { + "_type": "UMLNameCompartmentView", + "_id": "AAAAAAGAQPnVf+rG/uI=", + "_parent": { + "$ref": "AAAAAAGAQPnVf+rFgxs=" + }, + "model": { + "$ref": "AAAAAAGAQPnVfurDxP4=" + }, + "subViews": [ + { + "_type": "LabelView", + "_id": "AAAAAAGAQPnVf+rH+X4=", + "_parent": { + "$ref": "AAAAAAGAQPnVf+rG/uI=" + }, + "visible": false, + "font": "Arial;13;0", + "left": -208, + "top": 224, + "height": 13 + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAQPnVf+rIOQ8=", + "_parent": { + "$ref": "AAAAAAGAQPnVf+rG/uI=" + }, + "font": "Arial;13;1", + "left": 2349, + "top": 1663, + "width": 138.71533203125, + "height": 13, + "text": "ObjectSymbol3DLayer" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAQPnVf+rJBmE=", + "_parent": { + "$ref": "AAAAAAGAQPnVf+rG/uI=" + }, + "visible": false, + "font": "Arial;13;0", + "left": -208, + "top": 224, + "width": 73.67724609375, + "height": 13, + "text": "(from Model)" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAQPnVf+rKhyE=", + "_parent": { + "$ref": "AAAAAAGAQPnVf+rG/uI=" + }, + "visible": false, + "font": "Arial;13;0", + "left": -208, + "top": 224, + "height": 13, + "horizontalAlignment": 1 + } + ], + "font": "Arial;13;0", + "left": 2344, + "top": 1656, + "width": 148.71533203125, + "height": 25, + "stereotypeLabel": { + "$ref": "AAAAAAGAQPnVf+rH+X4=" + }, + "nameLabel": { + "$ref": "AAAAAAGAQPnVf+rIOQ8=" + }, + "namespaceLabel": { + "$ref": "AAAAAAGAQPnVf+rJBmE=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAQPnVf+rKhyE=" + } + }, + { + "_type": "UMLAttributeCompartmentView", + "_id": "AAAAAAGAQPnVf+rLrvw=", + "_parent": { + "$ref": "AAAAAAGAQPnVf+rFgxs=" + }, + "model": { + "$ref": "AAAAAAGAQPnVfurDxP4=" + }, + "subViews": [ + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQPoqJ+3fVWM=", + "_parent": { + "$ref": "AAAAAAGAQPnVf+rLrvw=" + }, + "model": { + "$ref": "AAAAAAGAQPop+u2+iXY=" + }, + "font": "Arial;13;0", + "left": 2349, + "top": 1686, + "width": 138.71533203125, + "height": 13, + "text": "+type", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQPozO+7VY3Y=", + "_parent": { + "$ref": "AAAAAAGAQPnVf+rLrvw=" + }, + "model": { + "$ref": "AAAAAAGAQPozEe604dA=" + }, + "font": "Arial;13;0", + "left": 2349, + "top": 1701, + "width": 138.71533203125, + "height": 13, + "text": "+anchor", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQPo2Qu9xHwE=", + "_parent": { + "$ref": "AAAAAAGAQPnVf+rLrvw=" + }, + "model": { + "$ref": "AAAAAAGAQPo2Gu9Q5Ck=" + }, + "font": "Arial;13;0", + "left": 2349, + "top": 1716, + "width": 138.71533203125, + "height": 13, + "text": "+anchorPosition", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQPo4sPANIaw=", + "_parent": { + "$ref": "AAAAAAGAQPnVf+rLrvw=" + }, + "model": { + "$ref": "AAAAAAGAQPo4he/sG20=" + }, + "font": "Arial;13;0", + "left": 2349, + "top": 1731, + "width": 138.71533203125, + "height": 13, + "text": "+castShadows", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQPo7GfCpnZQ=", + "_parent": { + "$ref": "AAAAAAGAQPnVf+rLrvw=" + }, + "model": { + "$ref": "AAAAAAGAQPo66/CIc7k=" + }, + "font": "Arial;13;0", + "left": 2349, + "top": 1746, + "width": 138.71533203125, + "height": 13, + "text": "+depth", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQPo9VvFFjYg=", + "_parent": { + "$ref": "AAAAAAGAQPnVf+rLrvw=" + }, + "model": { + "$ref": "AAAAAAGAQPo9LPEkQrk=" + }, + "font": "Arial;13;0", + "left": 2349, + "top": 1761, + "width": 138.71533203125, + "height": 13, + "text": "+heading", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQPo/evHhEZs=", + "_parent": { + "$ref": "AAAAAAGAQPnVf+rLrvw=" + }, + "model": { + "$ref": "AAAAAAGAQPo/TvHAQDk=" + }, + "font": "Arial;13;0", + "left": 2349, + "top": 1776, + "width": 138.71533203125, + "height": 13, + "text": "+height", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQPpB7fJ90ko=", + "_parent": { + "$ref": "AAAAAAGAQPnVf+rLrvw=" + }, + "model": { + "$ref": "AAAAAAGAQPpBxPJcIdQ=" + }, + "font": "Arial;13;0", + "left": 2349, + "top": 1791, + "width": 138.71533203125, + "height": 13, + "text": "+material", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQPpEo/MZpZ8=", + "_parent": { + "$ref": "AAAAAAGAQPnVf+rLrvw=" + }, + "model": { + "$ref": "AAAAAAGAQPpEefL4VGc=" + }, + "font": "Arial;13;0", + "left": 2349, + "top": 1806, + "width": 138.71533203125, + "height": 13, + "text": "+resource", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQPsGmfymRn8=", + "_parent": { + "$ref": "AAAAAAGAQPnVf+rLrvw=" + }, + "model": { + "$ref": "AAAAAAGAQPsGafyFSfs=" + }, + "font": "Arial;13;0", + "left": 2349, + "top": 1821, + "width": 138.71533203125, + "height": 13, + "text": "+roll", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQPsI9P1C/aQ=", + "_parent": { + "$ref": "AAAAAAGAQPnVf+rLrvw=" + }, + "model": { + "$ref": "AAAAAAGAQPsIyv0hvRE=" + }, + "font": "Arial;13;0", + "left": 2349, + "top": 1836, + "width": 138.71533203125, + "height": 13, + "text": "+tilt", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQPsLS/3eFgo=", + "_parent": { + "$ref": "AAAAAAGAQPnVf+rLrvw=" + }, + "model": { + "$ref": "AAAAAAGAQPsLH/2976o=" + }, + "font": "Arial;13;0", + "left": 2349, + "top": 1851, + "width": 138.71533203125, + "height": 13, + "text": "+width", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 2344, + "top": 1681, + "width": 148.71533203125, + "height": 188 + }, + { + "_type": "UMLOperationCompartmentView", + "_id": "AAAAAAGAQPnVf+rMRGw=", + "_parent": { + "$ref": "AAAAAAGAQPnVf+rFgxs=" + }, + "model": { + "$ref": "AAAAAAGAQPnVfurDxP4=" + }, + "font": "Arial;13;0", + "left": 2344, + "top": 1869, + "width": 148.71533203125, + "height": 10 + }, + { + "_type": "UMLReceptionCompartmentView", + "_id": "AAAAAAGAQPnVf+rNwuY=", + "_parent": { + "$ref": "AAAAAAGAQPnVf+rFgxs=" + }, + "model": { + "$ref": "AAAAAAGAQPnVfurDxP4=" + }, + "visible": false, + "font": "Arial;13;0", + "left": -104, + "top": 240, + "width": 10, + "height": 10 + }, + { + "_type": "UMLTemplateParameterCompartmentView", + "_id": "AAAAAAGAQPnVf+rOqqQ=", + "_parent": { + "$ref": "AAAAAAGAQPnVf+rFgxs=" + }, + "model": { + "$ref": "AAAAAAGAQPnVfurDxP4=" + }, + "visible": false, + "font": "Arial;13;0", + "left": -104, + "top": 240, + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "containerChangeable": true, + "left": 2344, + "top": 1656, + "width": 148.71533203125, + "height": 223, + "nameCompartment": { + "$ref": "AAAAAAGAQPnVf+rG/uI=" + }, + "attributeCompartment": { + "$ref": "AAAAAAGAQPnVf+rLrvw=" + }, + "operationCompartment": { + "$ref": "AAAAAAGAQPnVf+rMRGw=" + }, + "receptionCompartment": { + "$ref": "AAAAAAGAQPnVf+rNwuY=" + }, + "templateParameterCompartment": { + "$ref": "AAAAAAGAQPnVf+rOqqQ=" + } + }, + { + "_type": "UMLAssociationView", + "_id": "AAAAAAGAQPx5LwekjGk=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAQPx5Lwegxog=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQPx5LwelExo=", + "_parent": { + "$ref": "AAAAAAGAQPx5LwekjGk=" + }, + "model": { + "$ref": "AAAAAAGAQPx5Lwegxog=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2376, + "top": 1617, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQPx5LwekjGk=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQPx5LwemrGk=", + "_parent": { + "$ref": "AAAAAAGAQPx5LwekjGk=" + }, + "model": { + "$ref": "AAAAAAGAQPx5Lwegxog=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 2391, + "top": 1617, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQPx5LwekjGk=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQPx5LwenPhw=", + "_parent": { + "$ref": "AAAAAAGAQPx5LwekjGk=" + }, + "model": { + "$ref": "AAAAAAGAQPx5Lwegxog=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2347, + "top": 1618, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQPx5LwekjGk=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQPx5Lweorws=", + "_parent": { + "$ref": "AAAAAAGAQPx5LwekjGk=" + }, + "model": { + "$ref": "AAAAAAGAQPx5LwehMeE=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2377, + "top": 1611, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQPx5LwekjGk=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQPx5Lwep3bw=", + "_parent": { + "$ref": "AAAAAAGAQPx5LwekjGk=" + }, + "model": { + "$ref": "AAAAAAGAQPx5LwehMeE=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2390, + "top": 1614, + "height": 13, + "alpha": 0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAQPx5LwekjGk=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQPx5Lwequps=", + "_parent": { + "$ref": "AAAAAAGAQPx5LwekjGk=" + }, + "model": { + "$ref": "AAAAAAGAQPx5LwehMeE=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2349, + "top": 1607, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAQPx5LwekjGk=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQPx5Lwer26o=", + "_parent": { + "$ref": "AAAAAAGAQPx5LwekjGk=" + }, + "model": { + "$ref": "AAAAAAGAQPx5LweiweU=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2377, + "top": 1624, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQPx5LwekjGk=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQPx5Lwesa/g=", + "_parent": { + "$ref": "AAAAAAGAQPx5LwekjGk=" + }, + "model": { + "$ref": "AAAAAAGAQPx5LweiweU=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2390, + "top": 1621, + "height": 13, + "alpha": -0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAQPx5LwekjGk=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQPx5Lwet0DI=", + "_parent": { + "$ref": "AAAAAAGAQPx5LwekjGk=" + }, + "model": { + "$ref": "AAAAAAGAQPx5LweiweU=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2349, + "top": 1628, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAQPx5LwekjGk=" + } + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAQPx5MAeuGxQ=", + "_parent": { + "$ref": "AAAAAAGAQPx5LwekjGk=" + }, + "model": { + "$ref": "AAAAAAGAQPx5LwehMeE=" + }, + "visible": false, + "font": "Arial;13;0", + "width": 10, + "height": 10 + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAQPx5MAevwVI=", + "_parent": { + "$ref": "AAAAAAGAQPx5LwekjGk=" + }, + "model": { + "$ref": "AAAAAAGAQPx5LweiweU=" + }, + "visible": false, + "font": "Arial;13;0", + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAQPnVf+rFgxs=" + }, + "tail": { + "$ref": "AAAAAAGAQHO4GV0qRew=" + }, + "points": "2362:1592;2362:1656", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAQPx5LwelExo=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAQPx5LwemrGk=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAQPx5LwenPhw=" + }, + "tailRoleNameLabel": { + "$ref": "AAAAAAGAQPx5Lweorws=" + }, + "tailPropertyLabel": { + "$ref": "AAAAAAGAQPx5Lwep3bw=" + }, + "tailMultiplicityLabel": { + "$ref": "AAAAAAGAQPx5Lwequps=" + }, + "headRoleNameLabel": { + "$ref": "AAAAAAGAQPx5Lwer26o=" + }, + "headPropertyLabel": { + "$ref": "AAAAAAGAQPx5Lwesa/g=" + }, + "headMultiplicityLabel": { + "$ref": "AAAAAAGAQPx5Lwet0DI=" + }, + "tailQualifiersCompartment": { + "$ref": "AAAAAAGAQPx5MAeuGxQ=" + }, + "headQualifiersCompartment": { + "$ref": "AAAAAAGAQPx5MAevwVI=" + } + }, + { + "_type": "UMLAssociationView", + "_id": "AAAAAAGAQPyJKAjgoMc=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAQPyJKAjcvoE=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQPyJKAjheM8=", + "_parent": { + "$ref": "AAAAAAGAQPyJKAjgoMc=" + }, + "model": { + "$ref": "AAAAAAGAQPyJKAjcvoE=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 3175, + "top": 1529, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQPyJKAjgoMc=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQPyJKAjifbw=", + "_parent": { + "$ref": "AAAAAAGAQPyJKAjgoMc=" + }, + "model": { + "$ref": "AAAAAAGAQPyJKAjcvoE=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 3190, + "top": 1529, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQPyJKAjgoMc=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQPyJKAjj/Y8=", + "_parent": { + "$ref": "AAAAAAGAQPyJKAjgoMc=" + }, + "model": { + "$ref": "AAAAAAGAQPyJKAjcvoE=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 3145, + "top": 1530, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQPyJKAjgoMc=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQPyJKAjkbqg=", + "_parent": { + "$ref": "AAAAAAGAQPyJKAjgoMc=" + }, + "model": { + "$ref": "AAAAAAGAQPyJKAjdEa4=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2426, + "top": 1515, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQPyJKAjgoMc=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQPyJKAjl6r0=", + "_parent": { + "$ref": "AAAAAAGAQPyJKAjgoMc=" + }, + "model": { + "$ref": "AAAAAAGAQPyJKAjdEa4=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2429, + "top": 1501, + "height": 13, + "alpha": 0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAQPyJKAjgoMc=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQPyJKAjm/ws=", + "_parent": { + "$ref": "AAAAAAGAQPyJKAjgoMc=" + }, + "model": { + "$ref": "AAAAAAGAQPyJKAjdEa4=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2422, + "top": 1542, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAQPyJKAjgoMc=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQPyJKAjnFYU=", + "_parent": { + "$ref": "AAAAAAGAQPyJKAjgoMc=" + }, + "model": { + "$ref": "AAAAAAGAQPyJKAjecM4=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 3175, + "top": 1616, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQPyJKAjgoMc=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQPyJKAjogAo=", + "_parent": { + "$ref": "AAAAAAGAQPyJKAjgoMc=" + }, + "model": { + "$ref": "AAAAAAGAQPyJKAjecM4=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 3188, + "top": 1613, + "height": 13, + "alpha": -0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAQPyJKAjgoMc=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQPyJKAjpL0Q=", + "_parent": { + "$ref": "AAAAAAGAQPyJKAjgoMc=" + }, + "model": { + "$ref": "AAAAAAGAQPyJKAjecM4=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 3147, + "top": 1620, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAQPyJKAjgoMc=" + } + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAQPyJKAjq8as=", + "_parent": { + "$ref": "AAAAAAGAQPyJKAjgoMc=" + }, + "model": { + "$ref": "AAAAAAGAQPyJKAjdEa4=" + }, + "visible": false, + "font": "Arial;13;0", + "width": 10, + "height": 10 + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAQPyJKAjr9jk=", + "_parent": { + "$ref": "AAAAAAGAQPyJKAjgoMc=" + }, + "model": { + "$ref": "AAAAAAGAQPyJKAjecM4=" + }, + "visible": false, + "font": "Arial;13;0", + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAQLns6JmlVRk=" + }, + "tail": { + "$ref": "AAAAAAGAQHO4GV0qRew=" + }, + "lineStyle": 2, + "points": "2401:1536;3160:1536;3160:1648", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAQPyJKAjheM8=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAQPyJKAjifbw=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAQPyJKAjj/Y8=" + }, + "tailRoleNameLabel": { + "$ref": "AAAAAAGAQPyJKAjkbqg=" + }, + "tailPropertyLabel": { + "$ref": "AAAAAAGAQPyJKAjl6r0=" + }, + "tailMultiplicityLabel": { + "$ref": "AAAAAAGAQPyJKAjm/ws=" + }, + "headRoleNameLabel": { + "$ref": "AAAAAAGAQPyJKAjnFYU=" + }, + "headPropertyLabel": { + "$ref": "AAAAAAGAQPyJKAjogAo=" + }, + "headMultiplicityLabel": { + "$ref": "AAAAAAGAQPyJKAjpL0Q=" + }, + "tailQualifiersCompartment": { + "$ref": "AAAAAAGAQPyJKAjq8as=" + }, + "headQualifiersCompartment": { + "$ref": "AAAAAAGAQPyJKAjr9jk=" + } + }, + { + "_type": "UMLGeneralizationView", + "_id": "AAAAAAGAQP3Zl0BOeuY=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAQP3ZlkBMubY=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQP3Zl0BPyaY=", + "_parent": { + "$ref": "AAAAAAGAQP3Zl0BOeuY=" + }, + "model": { + "$ref": "AAAAAAGAQP3ZlkBMubY=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2299, + "top": 1885, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQP3Zl0BOeuY=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQP3Zl0BQzP8=", + "_parent": { + "$ref": "AAAAAAGAQP3Zl0BOeuY=" + }, + "model": { + "$ref": "AAAAAAGAQP3ZlkBMubY=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 2309, + "top": 1896, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQP3Zl0BOeuY=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQP3Zl0BRot4=", + "_parent": { + "$ref": "AAAAAAGAQP3Zl0BOeuY=" + }, + "model": { + "$ref": "AAAAAAGAQP3ZlkBMubY=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2280, + "top": 1862, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQP3Zl0BOeuY=" + }, + "edgePosition": 1 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAP8/5/T2zufk=" + }, + "tail": { + "$ref": "AAAAAAGAQPnVf+rFgxs=" + }, + "lineStyle": 1, + "points": "2343:1833;2237:1927", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAQP3Zl0BPyaY=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAQP3Zl0BQzP8=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAQP3Zl0BRot4=" + } + }, + { + "_type": "UMLClassView", + "_id": "AAAAAAGAQQuTLkcBevI=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAQQuTLUb/9Rg=" + }, + "subViews": [ + { + "_type": "UMLNameCompartmentView", + "_id": "AAAAAAGAQQuTLkcC9fI=", + "_parent": { + "$ref": "AAAAAAGAQQuTLkcBevI=" + }, + "model": { + "$ref": "AAAAAAGAQQuTLUb/9Rg=" + }, + "subViews": [ + { + "_type": "LabelView", + "_id": "AAAAAAGAQQuTLkcDgPU=", + "_parent": { + "$ref": "AAAAAAGAQQuTLkcC9fI=" + }, + "visible": false, + "font": "Arial;13;0", + "left": -80, + "top": -16, + "height": 13 + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAQQuTLkcEsG0=", + "_parent": { + "$ref": "AAAAAAGAQQuTLkcC9fI=" + }, + "font": "Arial;13;1", + "left": 2669, + "top": 1663, + "width": 126.4326171875, + "height": 13, + "text": "PathSymbol3DLayer" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAQQuTLkcF42M=", + "_parent": { + "$ref": "AAAAAAGAQQuTLkcC9fI=" + }, + "visible": false, + "font": "Arial;13;0", + "left": -80, + "top": -16, + "width": 73.67724609375, + "height": 13, + "text": "(from Model)" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAQQuTLkcGurk=", + "_parent": { + "$ref": "AAAAAAGAQQuTLkcC9fI=" + }, + "visible": false, + "font": "Arial;13;0", + "left": -80, + "top": -16, + "height": 13, + "horizontalAlignment": 1 + } + ], + "font": "Arial;13;0", + "left": 2664, + "top": 1656, + "width": 136.4326171875, + "height": 25, + "stereotypeLabel": { + "$ref": "AAAAAAGAQQuTLkcDgPU=" + }, + "nameLabel": { + "$ref": "AAAAAAGAQQuTLkcEsG0=" + }, + "namespaceLabel": { + "$ref": "AAAAAAGAQQuTLkcF42M=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAQQuTLkcGurk=" + } + }, + { + "_type": "UMLAttributeCompartmentView", + "_id": "AAAAAAGAQQuTLkcHnPo=", + "_parent": { + "$ref": "AAAAAAGAQQuTLkcBevI=" + }, + "model": { + "$ref": "AAAAAAGAQQuTLUb/9Rg=" + }, + "subViews": [ + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQQvIoU3KW5A=", + "_parent": { + "$ref": "AAAAAAGAQQuTLkcHnPo=" + }, + "model": { + "$ref": "AAAAAAGAQQvIck2jTQg=" + }, + "font": "Arial;13;0", + "left": 2669, + "top": 1686, + "width": 126.4326171875, + "height": 13, + "text": "+type", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQQvOwE7wXsc=", + "_parent": { + "$ref": "AAAAAAGAQQuTLkcHnPo=" + }, + "model": { + "$ref": "AAAAAAGAQQvOlU7J+Js=" + }, + "font": "Arial;13;0", + "left": 2669, + "top": 1701, + "width": 126.4326171875, + "height": 13, + "text": "+anchor", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQQvRhE+qEgM=", + "_parent": { + "$ref": "AAAAAAGAQQuTLkcHnPo=" + }, + "model": { + "$ref": "AAAAAAGAQQvRWk+D8Kk=" + }, + "font": "Arial;13;0", + "left": 2669, + "top": 1716, + "width": 126.4326171875, + "height": 13, + "text": "+cap", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQQvUL1Bk2Jw=", + "_parent": { + "$ref": "AAAAAAGAQQuTLkcHnPo=" + }, + "model": { + "$ref": "AAAAAAGAQQvUBFA9SC8=" + }, + "font": "Arial;13;0", + "left": 2669, + "top": 1731, + "width": 126.4326171875, + "height": 13, + "text": "+castShadows", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQQvWKlEe1YQ=", + "_parent": { + "$ref": "AAAAAAGAQQuTLkcHnPo=" + }, + "model": { + "$ref": "AAAAAAGAQQvWAFD3ufw=" + }, + "font": "Arial;13;0", + "left": 2669, + "top": 1746, + "width": 126.4326171875, + "height": 13, + "text": "+height", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQQvYzVHYs68=", + "_parent": { + "$ref": "AAAAAAGAQQuTLkcHnPo=" + }, + "model": { + "$ref": "AAAAAAGAQQvYoVGxGiQ=" + }, + "font": "Arial;13;0", + "left": 2669, + "top": 1761, + "width": 126.4326171875, + "height": 13, + "text": "+join", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQQva51KS5U8=", + "_parent": { + "$ref": "AAAAAAGAQQuTLkcHnPo=" + }, + "model": { + "$ref": "AAAAAAGAQQvaulJrSXY=" + }, + "font": "Arial;13;0", + "left": 2669, + "top": 1776, + "width": 126.4326171875, + "height": 13, + "text": "+material", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQQvdWlNM1OI=", + "_parent": { + "$ref": "AAAAAAGAQQuTLkcHnPo=" + }, + "model": { + "$ref": "AAAAAAGAQQvdLlMlZuI=" + }, + "font": "Arial;13;0", + "left": 2669, + "top": 1791, + "width": 126.4326171875, + "height": 13, + "text": "+profile", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQQyX/2QpKPI=", + "_parent": { + "$ref": "AAAAAAGAQQuTLkcHnPo=" + }, + "model": { + "$ref": "AAAAAAGAQQyXzmQCWwQ=" + }, + "font": "Arial;13;0", + "left": 2669, + "top": 1806, + "width": 126.4326171875, + "height": 13, + "text": "+profileRotation", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQQya+GTjnuA=", + "_parent": { + "$ref": "AAAAAAGAQQuTLkcHnPo=" + }, + "model": { + "$ref": "AAAAAAGAQQyayGS8q5c=" + }, + "font": "Arial;13;0", + "left": 2669, + "top": 1821, + "width": 126.4326171875, + "height": 13, + "text": "+width", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 2664, + "top": 1681, + "width": 136.4326171875, + "height": 158 + }, + { + "_type": "UMLOperationCompartmentView", + "_id": "AAAAAAGAQQuTLkcIZQI=", + "_parent": { + "$ref": "AAAAAAGAQQuTLkcBevI=" + }, + "model": { + "$ref": "AAAAAAGAQQuTLUb/9Rg=" + }, + "subViews": [ + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAQQvrFlTegUc=", + "_parent": { + "$ref": "AAAAAAGAQQuTLkcIZQI=" + }, + "model": { + "$ref": "AAAAAAGAQQvq6VS33RQ=" + }, + "font": "Arial;13;0", + "left": 2669, + "top": 1844, + "width": 126.4326171875, + "height": 13, + "text": "+clone()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAQQvyaFYESws=", + "_parent": { + "$ref": "AAAAAAGAQQuTLkcIZQI=" + }, + "model": { + "$ref": "AAAAAAGAQQvyP1Xdy/A=" + }, + "font": "Arial;13;0", + "left": 2669, + "top": 1859, + "width": 126.4326171875, + "height": 13, + "text": "+fromJSON()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAQQv1q1a+rRA=", + "_parent": { + "$ref": "AAAAAAGAQQuTLkcIZQI=" + }, + "model": { + "$ref": "AAAAAAGAQQv1gFaXIyU=" + }, + "font": "Arial;13;0", + "left": 2669, + "top": 1874, + "width": 126.4326171875, + "height": 13, + "text": "+toJSON()", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 2664, + "top": 1839, + "width": 136.4326171875, + "height": 53 + }, + { + "_type": "UMLReceptionCompartmentView", + "_id": "AAAAAAGAQQuTLkcJ1Lw=", + "_parent": { + "$ref": "AAAAAAGAQQuTLkcBevI=" + }, + "model": { + "$ref": "AAAAAAGAQQuTLUb/9Rg=" + }, + "visible": false, + "font": "Arial;13;0", + "left": -16, + "top": 120, + "width": 10, + "height": 10 + }, + { + "_type": "UMLTemplateParameterCompartmentView", + "_id": "AAAAAAGAQQuTLkcKQJM=", + "_parent": { + "$ref": "AAAAAAGAQQuTLkcBevI=" + }, + "model": { + "$ref": "AAAAAAGAQQuTLUb/9Rg=" + }, + "visible": false, + "font": "Arial;13;0", + "left": -16, + "top": 120, + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "containerChangeable": true, + "left": 2664, + "top": 1656, + "width": 136.4326171875, + "height": 236, + "nameCompartment": { + "$ref": "AAAAAAGAQQuTLkcC9fI=" + }, + "attributeCompartment": { + "$ref": "AAAAAAGAQQuTLkcHnPo=" + }, + "operationCompartment": { + "$ref": "AAAAAAGAQQuTLkcIZQI=" + }, + "receptionCompartment": { + "$ref": "AAAAAAGAQQuTLkcJ1Lw=" + }, + "templateParameterCompartment": { + "$ref": "AAAAAAGAQQuTLkcKQJM=" + } + }, + { + "_type": "UMLAssociationView", + "_id": "AAAAAAGAQQzoZmpqp3M=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAQQzoZWpmJZ0=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQQzoZmprD4I=", + "_parent": { + "$ref": "AAAAAAGAQQzoZmpqp3M=" + }, + "model": { + "$ref": "AAAAAAGAQQzoZWpmJZ0=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2662, + "top": 1592, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQQzoZmpqp3M=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQQzoZmpspdQ=", + "_parent": { + "$ref": "AAAAAAGAQQzoZmpqp3M=" + }, + "model": { + "$ref": "AAAAAAGAQQzoZWpmJZ0=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 2675, + "top": 1585, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQQzoZmpqp3M=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQQzoZmptR4s=", + "_parent": { + "$ref": "AAAAAAGAQQzoZmpqp3M=" + }, + "model": { + "$ref": "AAAAAAGAQQzoZWpmJZ0=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2635, + "top": 1605, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQQzoZmpqp3M=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQQzoZmpuXcM=", + "_parent": { + "$ref": "AAAAAAGAQQzoZmpqp3M=" + }, + "model": { + "$ref": "AAAAAAGAQQzoZWpnhlg=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2649, + "top": 1565, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQQzoZmpqp3M=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQQzoZmpv0rc=", + "_parent": { + "$ref": "AAAAAAGAQQzoZmpqp3M=" + }, + "model": { + "$ref": "AAAAAAGAQQzoZWpnhlg=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2662, + "top": 1561, + "height": 13, + "alpha": 0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAQQzoZmpqp3M=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQQzoZmpwlDI=", + "_parent": { + "$ref": "AAAAAAGAQQzoZmpqp3M=" + }, + "model": { + "$ref": "AAAAAAGAQQzoZWpnhlg=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2623, + "top": 1573, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAQQzoZmpqp3M=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQQzoZmpxJrc=", + "_parent": { + "$ref": "AAAAAAGAQQzoZmpqp3M=" + }, + "model": { + "$ref": "AAAAAAGAQQzoZWposbQ=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2676, + "top": 1619, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQQzoZmpqp3M=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQQzoZmpyIqM=", + "_parent": { + "$ref": "AAAAAAGAQQzoZmpqp3M=" + }, + "model": { + "$ref": "AAAAAAGAQQzoZWposbQ=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2686, + "top": 1611, + "height": 13, + "alpha": -0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAQQzoZmpqp3M=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQQzoZmpz2Hg=", + "_parent": { + "$ref": "AAAAAAGAQQzoZmpqp3M=" + }, + "model": { + "$ref": "AAAAAAGAQQzoZWposbQ=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2653, + "top": 1635, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAQQzoZmpqp3M=" + } + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAQQzoZmp0WHs=", + "_parent": { + "$ref": "AAAAAAGAQQzoZmpqp3M=" + }, + "model": { + "$ref": "AAAAAAGAQQzoZWpnhlg=" + }, + "visible": false, + "font": "Arial;13;0", + "width": 10, + "height": 10 + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAQQzoZmp1EFk=", + "_parent": { + "$ref": "AAAAAAGAQQzoZmpqp3M=" + }, + "model": { + "$ref": "AAAAAAGAQQzoZWposbQ=" + }, + "visible": false, + "font": "Arial;13;0", + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAQQuTLkcBevI=" + }, + "tail": { + "$ref": "AAAAAAGAQI6jGOak5LQ=" + }, + "lineStyle": 1, + "points": "2625:1555;2674:1655", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAQQzoZmprD4I=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAQQzoZmpspdQ=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAQQzoZmptR4s=" + }, + "tailRoleNameLabel": { + "$ref": "AAAAAAGAQQzoZmpuXcM=" + }, + "tailPropertyLabel": { + "$ref": "AAAAAAGAQQzoZmpv0rc=" + }, + "tailMultiplicityLabel": { + "$ref": "AAAAAAGAQQzoZmpwlDI=" + }, + "headRoleNameLabel": { + "$ref": "AAAAAAGAQQzoZmpxJrc=" + }, + "headPropertyLabel": { + "$ref": "AAAAAAGAQQzoZmpyIqM=" + }, + "headMultiplicityLabel": { + "$ref": "AAAAAAGAQQzoZmpz2Hg=" + }, + "tailQualifiersCompartment": { + "$ref": "AAAAAAGAQQzoZmp0WHs=" + }, + "headQualifiersCompartment": { + "$ref": "AAAAAAGAQQzoZmp1EFk=" + } + }, + { + "_type": "UMLGeneralizationView", + "_id": "AAAAAAGAQQz8yG323pI=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAQQz8x230K8E=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQQz8yG336r0=", + "_parent": { + "$ref": "AAAAAAGAQQz8yG323pI=" + }, + "model": { + "$ref": "AAAAAAGAQQz8x230K8E=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2730, + "top": 1979, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQQz8yG323pI=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQQz8yG34XJw=", + "_parent": { + "$ref": "AAAAAAGAQQz8yG323pI=" + }, + "model": { + "$ref": "AAAAAAGAQQz8x230K8E=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 2730, + "top": 1994, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQQz8yG323pI=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQQz8yG35oyg=", + "_parent": { + "$ref": "AAAAAAGAQQz8yG323pI=" + }, + "model": { + "$ref": "AAAAAAGAQQz8x230K8E=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2731, + "top": 1949, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQQz8yG323pI=" + }, + "edgePosition": 1 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAP8/5/T2zufk=" + }, + "tail": { + "$ref": "AAAAAAGAQQuTLkcBevI=" + }, + "points": "2731:1891;2731:1970;2243:1970", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAQQz8yG336r0=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAQQz8yG34XJw=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAQQz8yG35oyg=" + } + }, + { + "_type": "UMLClassView", + "_id": "AAAAAAGAQI6qsOc2n1Y=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAQI6qsOc0DIE=" + }, + "subViews": [ + { + "_type": "UMLNameCompartmentView", + "_id": "AAAAAAGAQI6qsOc3FW8=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc2n1Y=" + }, + "model": { + "$ref": "AAAAAAGAQI6qsOc0DIE=" + }, + "subViews": [ + { + "_type": "LabelView", + "_id": "AAAAAAGAQI6qsOc4SMo=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc3FW8=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 32, + "top": 272, + "height": 13 + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAQI6qsOc5HLY=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc3FW8=" + }, + "font": "Arial;13;1", + "left": 2517, + "top": 1663, + "width": 124.9853515625, + "height": 13, + "text": "LineSymbol3DLayer" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAQI6qsOc6mDQ=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc3FW8=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 32, + "top": 272, + "width": 73.67724609375, + "height": 13, + "text": "(from Model)" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAQI6qsOc7Vpo=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc3FW8=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 32, + "top": 272, + "height": 13, + "horizontalAlignment": 1 + } + ], + "font": "Arial;13;0", + "left": 2512, + "top": 1656, + "width": 134.9853515625, + "height": 25, + "stereotypeLabel": { + "$ref": "AAAAAAGAQI6qsOc4SMo=" + }, + "nameLabel": { + "$ref": "AAAAAAGAQI6qsOc5HLY=" + }, + "namespaceLabel": { + "$ref": "AAAAAAGAQI6qsOc6mDQ=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAQI6qsOc7Vpo=" + } + }, + { + "_type": "UMLAttributeCompartmentView", + "_id": "AAAAAAGAQI6qsOc83nc=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc2n1Y=" + }, + "model": { + "$ref": "AAAAAAGAQI6qsOc0DIE=" + }, + "subViews": [ + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQI/M2vf+oXE=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc83nc=" + }, + "model": { + "$ref": "AAAAAAGAQI/Ms/fm62A=" + }, + "font": "Arial;13;0", + "left": 2517, + "top": 1686, + "width": 124.9853515625, + "height": 13, + "text": "+type", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQI/S7fisuuE=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc83nc=" + }, + "model": { + "$ref": "AAAAAAGAQI/SxfiUCXU=" + }, + "font": "Arial;13;0", + "left": 2517, + "top": 1701, + "width": 124.9853515625, + "height": 13, + "text": "+cap", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQI/VHvkb5w4=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc83nc=" + }, + "model": { + "$ref": "AAAAAAGAQI/U9/kDTG0=" + }, + "font": "Arial;13;0", + "left": 2517, + "top": 1716, + "width": 124.9853515625, + "height": 13, + "text": "+join", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQI/XEfmKdbM=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc83nc=" + }, + "model": { + "$ref": "AAAAAAGAQI/W6PlyuF4=" + }, + "font": "Arial;13;0", + "left": 2517, + "top": 1731, + "width": 124.9853515625, + "height": 13, + "text": "+marker", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQI/yCvs2lr0=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc83nc=" + }, + "model": { + "$ref": "AAAAAAGAQI/x4vseoP0=" + }, + "font": "Arial;13;0", + "left": 2517, + "top": 1746, + "width": 124.9853515625, + "height": 13, + "text": "+material", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQI/0WfulqSU=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc83nc=" + }, + "model": { + "$ref": "AAAAAAGAQI/0MvuNWWU=" + }, + "font": "Arial;13;0", + "left": 2517, + "top": 1761, + "width": 124.9853515625, + "height": 13, + "text": "+pattern", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQI/2O/wUaY0=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc83nc=" + }, + "model": { + "$ref": "AAAAAAGAQI/2Efv8elc=" + }, + "font": "Arial;13;0", + "left": 2517, + "top": 1776, + "width": 124.9853515625, + "height": 13, + "text": "+size", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 2512, + "top": 1681, + "width": 134.9853515625, + "height": 113 + }, + { + "_type": "UMLOperationCompartmentView", + "_id": "AAAAAAGAQI6qsOc9LOA=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc2n1Y=" + }, + "model": { + "$ref": "AAAAAAGAQI6qsOc0DIE=" + }, + "subViews": [ + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAQI+3G/X0hfw=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc9LOA=" + }, + "model": { + "$ref": "AAAAAAGAQI+28vXcViw=" + }, + "font": "Arial;13;0", + "left": 2517, + "top": 1799, + "width": 124.9853515625, + "height": 13, + "text": "+clone()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAQI/BfPbh9OM=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc9LOA=" + }, + "model": { + "$ref": "AAAAAAGAQI/BU/bJXC8=" + }, + "font": "Arial;13;0", + "left": 2517, + "top": 1814, + "width": 124.9853515625, + "height": 13, + "text": "+fromJSON()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAQI/DyfdQ/Sc=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc9LOA=" + }, + "model": { + "$ref": "AAAAAAGAQI/Do/c45mg=" + }, + "font": "Arial;13;0", + "left": 2517, + "top": 1829, + "width": 124.9853515625, + "height": 13, + "text": "+toJSON()", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 2512, + "top": 1794, + "width": 134.9853515625, + "height": 53 + }, + { + "_type": "UMLReceptionCompartmentView", + "_id": "AAAAAAGAQI6qsOc+n3A=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc2n1Y=" + }, + "model": { + "$ref": "AAAAAAGAQI6qsOc0DIE=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 24, + "top": 264, + "width": 10, + "height": 10 + }, + { + "_type": "UMLTemplateParameterCompartmentView", + "_id": "AAAAAAGAQI6qsOc/vKw=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc2n1Y=" + }, + "model": { + "$ref": "AAAAAAGAQI6qsOc0DIE=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 24, + "top": 264, + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "containerChangeable": true, + "left": 2512, + "top": 1656, + "width": 134.9853515625, + "height": 191, + "nameCompartment": { + "$ref": "AAAAAAGAQI6qsOc3FW8=" + }, + "attributeCompartment": { + "$ref": "AAAAAAGAQI6qsOc83nc=" + }, + "operationCompartment": { + "$ref": "AAAAAAGAQI6qsOc9LOA=" + }, + "receptionCompartment": { + "$ref": "AAAAAAGAQI6qsOc+n3A=" + }, + "templateParameterCompartment": { + "$ref": "AAAAAAGAQI6qsOc/vKw=" + } + }, + { + "_type": "UMLClassView", + "_id": "AAAAAAGAQYqXdn+2K7I=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAQYqXdX+0wEk=" + }, + "subViews": [ + { + "_type": "UMLNameCompartmentView", + "_id": "AAAAAAGAQYqXdn+3DBc=", + "_parent": { + "$ref": "AAAAAAGAQYqXdn+2K7I=" + }, + "model": { + "$ref": "AAAAAAGAQYqXdX+0wEk=" + }, + "subViews": [ + { + "_type": "LabelView", + "_id": "AAAAAAGAQYqXdn+4LmU=", + "_parent": { + "$ref": "AAAAAAGAQYqXdn+3DBc=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 272, + "top": -608, + "height": 13 + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAQYqXdn+5yHM=", + "_parent": { + "$ref": "AAAAAAGAQYqXdn+3DBc=" + }, + "font": "Arial;13;1", + "left": 2989, + "top": 1663, + "width": 146.66259765625, + "height": 13, + "text": "ExtrudeSymbol3DLayer" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAQYqXdn+6S/c=", + "_parent": { + "$ref": "AAAAAAGAQYqXdn+3DBc=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 272, + "top": -608, + "width": 73.67724609375, + "height": 13, + "text": "(from Model)" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAQYqXdn+7ohw=", + "_parent": { + "$ref": "AAAAAAGAQYqXdn+3DBc=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 272, + "top": -608, + "height": 13, + "horizontalAlignment": 1 + } + ], + "font": "Arial;13;0", + "left": 2984, + "top": 1656, + "width": 156.66259765625, + "height": 25, + "stereotypeLabel": { + "$ref": "AAAAAAGAQYqXdn+4LmU=" + }, + "nameLabel": { + "$ref": "AAAAAAGAQYqXdn+5yHM=" + }, + "namespaceLabel": { + "$ref": "AAAAAAGAQYqXdn+6S/c=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAQYqXdn+7ohw=" + } + }, + { + "_type": "UMLAttributeCompartmentView", + "_id": "AAAAAAGAQYqXdn+8FmQ=", + "_parent": { + "$ref": "AAAAAAGAQYqXdn+2K7I=" + }, + "model": { + "$ref": "AAAAAAGAQYqXdX+0wEk=" + }, + "subViews": [ + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQYrtG4fWan4=", + "_parent": { + "$ref": "AAAAAAGAQYqXdn+8FmQ=" + }, + "model": { + "$ref": "AAAAAAGAQYrs74espQ8=" + }, + "font": "Arial;13;0", + "left": 2989, + "top": 1686, + "width": 146.66259765625, + "height": 13, + "text": "+type", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQYr0dYks/wg=", + "_parent": { + "$ref": "AAAAAAGAQYqXdn+8FmQ=" + }, + "model": { + "$ref": "AAAAAAGAQYr0SYkCuFQ=" + }, + "font": "Arial;13;0", + "left": 2989, + "top": 1701, + "width": 146.66259765625, + "height": 13, + "text": "+castShadows", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQYr3GIoEiD8=", + "_parent": { + "$ref": "AAAAAAGAQYqXdn+8FmQ=" + }, + "model": { + "$ref": "AAAAAAGAQYr27InaovU=" + }, + "font": "Arial;13;0", + "left": 2989, + "top": 1716, + "width": 146.66259765625, + "height": 13, + "text": "+edges", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQYr5iorc0jw=", + "_parent": { + "$ref": "AAAAAAGAQYqXdn+8FmQ=" + }, + "model": { + "$ref": "AAAAAAGAQYr5XIqy5mU=" + }, + "font": "Arial;13;0", + "left": 2989, + "top": 1731, + "width": 146.66259765625, + "height": 13, + "text": "+material", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQYr+cou0D1I=", + "_parent": { + "$ref": "AAAAAAGAQYqXdn+8FmQ=" + }, + "model": { + "$ref": "AAAAAAGAQYr+RIuK/FY=" + }, + "font": "Arial;13;0", + "left": 2989, + "top": 1746, + "width": 146.66259765625, + "height": 13, + "text": "+size", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 2984, + "top": 1681, + "width": 156.66259765625, + "height": 83 + }, + { + "_type": "UMLOperationCompartmentView", + "_id": "AAAAAAGAQYqXdn+9yYI=", + "_parent": { + "$ref": "AAAAAAGAQYqXdn+2K7I=" + }, + "model": { + "$ref": "AAAAAAGAQYqXdX+0wEk=" + }, + "subViews": [ + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAQYt7fZSblX8=", + "_parent": { + "$ref": "AAAAAAGAQYqXdn+9yYI=" + }, + "model": { + "$ref": "AAAAAAGAQYt7S5Rx0RQ=" + }, + "font": "Arial;13;0", + "left": 2989, + "top": 1769, + "width": 146.66259765625, + "height": 13, + "text": "+clone()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAQYuCcZXxhxk=", + "_parent": { + "$ref": "AAAAAAGAQYqXdn+9yYI=" + }, + "model": { + "$ref": "AAAAAAGAQYuCRZXHU2w=" + }, + "font": "Arial;13;0", + "left": 2989, + "top": 1784, + "width": 146.66259765625, + "height": 13, + "text": "+fromJSON()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAQYuFNJbJFPY=", + "_parent": { + "$ref": "AAAAAAGAQYqXdn+9yYI=" + }, + "model": { + "$ref": "AAAAAAGAQYuFBpaftPw=" + }, + "font": "Arial;13;0", + "left": 2989, + "top": 1799, + "width": 146.66259765625, + "height": 13, + "text": "+toJSON()", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 2984, + "top": 1764, + "width": 156.66259765625, + "height": 53 + }, + { + "_type": "UMLReceptionCompartmentView", + "_id": "AAAAAAGAQYqXdn++XHc=", + "_parent": { + "$ref": "AAAAAAGAQYqXdn+2K7I=" + }, + "model": { + "$ref": "AAAAAAGAQYqXdX+0wEk=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 136, + "top": -304, + "width": 10, + "height": 10 + }, + { + "_type": "UMLTemplateParameterCompartmentView", + "_id": "AAAAAAGAQYqXdn+//9c=", + "_parent": { + "$ref": "AAAAAAGAQYqXdn+2K7I=" + }, + "model": { + "$ref": "AAAAAAGAQYqXdX+0wEk=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 136, + "top": -304, + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "containerChangeable": true, + "left": 2984, + "top": 1656, + "width": 156.66259765625, + "height": 161, + "nameCompartment": { + "$ref": "AAAAAAGAQYqXdn+3DBc=" + }, + "attributeCompartment": { + "$ref": "AAAAAAGAQYqXdn+8FmQ=" + }, + "operationCompartment": { + "$ref": "AAAAAAGAQYqXdn+9yYI=" + }, + "receptionCompartment": { + "$ref": "AAAAAAGAQYqXdn++XHc=" + }, + "templateParameterCompartment": { + "$ref": "AAAAAAGAQYqXdn+//9c=" + } + }, + { + "_type": "UMLAssociationView", + "_id": "AAAAAAGAQYq/foR37Qo=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAQYq/foRzh3g=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQYq/foR4+uY=", + "_parent": { + "$ref": "AAAAAAGAQYq/foR37Qo=" + }, + "model": { + "$ref": "AAAAAAGAQYq/foRzh3g=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2963, + "top": 1587, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQYq/foR37Qo=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQYq/foR5GLE=", + "_parent": { + "$ref": "AAAAAAGAQYq/foR37Qo=" + }, + "model": { + "$ref": "AAAAAAGAQYq/foRzh3g=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 2963, + "top": 1572, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQYq/foR37Qo=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQYq/foR64b0=", + "_parent": { + "$ref": "AAAAAAGAQYq/foR37Qo=" + }, + "model": { + "$ref": "AAAAAAGAQYq/foRzh3g=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2963, + "top": 1617, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQYq/foR37Qo=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQYq/foR7QWc=", + "_parent": { + "$ref": "AAAAAAGAQYq/foR37Qo=" + }, + "model": { + "$ref": "AAAAAAGAQYq/foR06rU=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2886, + "top": 1581, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQYq/foR37Qo=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQYq/foR8Oh4=", + "_parent": { + "$ref": "AAAAAAGAQYq/foR37Qo=" + }, + "model": { + "$ref": "AAAAAAGAQYq/foR06rU=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2899, + "top": 1584, + "height": 13, + "alpha": 0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAQYq/foR37Qo=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQYq/foR9S74=", + "_parent": { + "$ref": "AAAAAAGAQYq/foR37Qo=" + }, + "model": { + "$ref": "AAAAAAGAQYq/foR06rU=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2858, + "top": 1577, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAQYq/foR37Qo=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQYq/foR+RBM=", + "_parent": { + "$ref": "AAAAAAGAQYq/foR37Qo=" + }, + "model": { + "$ref": "AAAAAAGAQYq/foR197U=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 3071, + "top": 1624, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQYq/foR37Qo=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQYq/foR/oTw=", + "_parent": { + "$ref": "AAAAAAGAQYq/foR37Qo=" + }, + "model": { + "$ref": "AAAAAAGAQYq/foR197U=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 3084, + "top": 1621, + "height": 13, + "alpha": -0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAQYq/foR37Qo=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQYq/foSAW70=", + "_parent": { + "$ref": "AAAAAAGAQYq/foR37Qo=" + }, + "model": { + "$ref": "AAAAAAGAQYq/foR197U=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 3043, + "top": 1628, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAQYq/foR37Qo=" + } + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAQYq/f4SB/Ng=", + "_parent": { + "$ref": "AAAAAAGAQYq/foR37Qo=" + }, + "model": { + "$ref": "AAAAAAGAQYq/foR06rU=" + }, + "visible": false, + "font": "Arial;13;0", + "width": 10, + "height": 10 + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAQYq/f4SCkwA=", + "_parent": { + "$ref": "AAAAAAGAQYq/foR37Qo=" + }, + "model": { + "$ref": "AAAAAAGAQYq/foR197U=" + }, + "visible": false, + "font": "Arial;13;0", + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAQYqXdn+2K7I=" + }, + "tail": { + "$ref": "AAAAAAGAQJPNQDjq3dQ=" + }, + "points": "2871:1562;2871:1608;3056:1608;3056:1656", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAQYq/foR4+uY=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAQYq/foR5GLE=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAQYq/foR64b0=" + }, + "tailRoleNameLabel": { + "$ref": "AAAAAAGAQYq/foR7QWc=" + }, + "tailPropertyLabel": { + "$ref": "AAAAAAGAQYq/foR8Oh4=" + }, + "tailMultiplicityLabel": { + "$ref": "AAAAAAGAQYq/foR9S74=" + }, + "headRoleNameLabel": { + "$ref": "AAAAAAGAQYq/foR+RBM=" + }, + "headPropertyLabel": { + "$ref": "AAAAAAGAQYq/foR/oTw=" + }, + "headMultiplicityLabel": { + "$ref": "AAAAAAGAQYq/foSAW70=" + }, + "tailQualifiersCompartment": { + "$ref": "AAAAAAGAQYq/f4SB/Ng=" + }, + "headQualifiersCompartment": { + "$ref": "AAAAAAGAQYq/f4SCkwA=" + } + }, + { + "_type": "UMLGeneralizationView", + "_id": "AAAAAAGAQYrN7oX5Qwo=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAQYrN7oX36Ng=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQYrN7oX6FtM=", + "_parent": { + "$ref": "AAAAAAGAQYrN7oX5Qwo=" + }, + "model": { + "$ref": "AAAAAAGAQYrN7oX36Ng=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 3060, + "top": 1979, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQYrN7oX5Qwo=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQYrN7oX7C7s=", + "_parent": { + "$ref": "AAAAAAGAQYrN7oX5Qwo=" + }, + "model": { + "$ref": "AAAAAAGAQYrN7oX36Ng=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 3060, + "top": 1994, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQYrN7oX5Qwo=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQYrN7oX8Jdk=", + "_parent": { + "$ref": "AAAAAAGAQYrN7oX5Qwo=" + }, + "model": { + "$ref": "AAAAAAGAQYrN7oX36Ng=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 3061, + "top": 1949, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQYrN7oX5Qwo=" + }, + "edgePosition": 1 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAP8/5/T2zufk=" + }, + "tail": { + "$ref": "AAAAAAGAQYqXdn+2K7I=" + }, + "points": "3061:1816;3061:1970;2243:1970", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAQYrN7oX6FtM=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAQYrN7oX7C7s=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAQYrN7oX8Jdk=" + } + }, + { + "_type": "UMLClassView", + "_id": "AAAAAAGAQKIeqWLv2j0=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAQKIeqWLtb7A=" + }, + "subViews": [ + { + "_type": "UMLNameCompartmentView", + "_id": "AAAAAAGAQKIeqmLwPvU=", + "_parent": { + "$ref": "AAAAAAGAQKIeqWLv2j0=" + }, + "model": { + "$ref": "AAAAAAGAQKIeqWLtb7A=" + }, + "subViews": [ + { + "_type": "LabelView", + "_id": "AAAAAAGAQKIeqmLxGTE=", + "_parent": { + "$ref": "AAAAAAGAQKIeqmLwPvU=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 336, + "top": 256, + "height": 13 + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAQKIeqmLyYNk=", + "_parent": { + "$ref": "AAAAAAGAQKIeqmLwPvU=" + }, + "font": "Arial;13;1", + "left": 2837, + "top": 1663, + "width": 117.0380859375, + "height": 13, + "text": "FillSymbol3DLayer" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAQKIeqmLzzjA=", + "_parent": { + "$ref": "AAAAAAGAQKIeqmLwPvU=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 336, + "top": 256, + "width": 73.67724609375, + "height": 13, + "text": "(from Model)" + }, + { + "_type": "LabelView", + "_id": "AAAAAAGAQKIeqmL0DUA=", + "_parent": { + "$ref": "AAAAAAGAQKIeqmLwPvU=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 336, + "top": 256, + "height": 13, + "horizontalAlignment": 1 + } + ], + "font": "Arial;13;0", + "left": 2832, + "top": 1656, + "width": 127.0380859375, + "height": 25, + "stereotypeLabel": { + "$ref": "AAAAAAGAQKIeqmLxGTE=" + }, + "nameLabel": { + "$ref": "AAAAAAGAQKIeqmLyYNk=" + }, + "namespaceLabel": { + "$ref": "AAAAAAGAQKIeqmLzzjA=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAQKIeqmL0DUA=" + } + }, + { + "_type": "UMLAttributeCompartmentView", + "_id": "AAAAAAGAQKIeqmL15DU=", + "_parent": { + "$ref": "AAAAAAGAQKIeqWLv2j0=" + }, + "model": { + "$ref": "AAAAAAGAQKIeqWLtb7A=" + }, + "subViews": [ + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQKKoDGxLvTU=", + "_parent": { + "$ref": "AAAAAAGAQKIeqmL15DU=" + }, + "model": { + "$ref": "AAAAAAGAQKKn5Gwwvc4=" + }, + "font": "Arial;13;0", + "left": 2837, + "top": 1686, + "width": 117.0380859375, + "height": 13, + "text": "+type", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQKKuJm0R9gw=", + "_parent": { + "$ref": "AAAAAAGAQKIeqmL15DU=" + }, + "model": { + "$ref": "AAAAAAGAQKKt/Wz2iEA=" + }, + "font": "Arial;13;0", + "left": 2837, + "top": 1701, + "width": 117.0380859375, + "height": 13, + "text": "+castShadows", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQKKwDW2PUPU=", + "_parent": { + "$ref": "AAAAAAGAQKIeqmL15DU=" + }, + "model": { + "$ref": "AAAAAAGAQKKv4210K3A=" + }, + "font": "Arial;13;0", + "left": 2837, + "top": 1716, + "width": 117.0380859375, + "height": 13, + "text": "+edges", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQKKywm4NF+I=", + "_parent": { + "$ref": "AAAAAAGAQKIeqmL15DU=" + }, + "model": { + "$ref": "AAAAAAGAQKKymW3yL3A=" + }, + "font": "Arial;13;0", + "left": 2837, + "top": 1731, + "width": 117.0380859375, + "height": 13, + "text": "+material", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQKK0tG6LD/o=", + "_parent": { + "$ref": "AAAAAAGAQKIeqmL15DU=" + }, + "model": { + "$ref": "AAAAAAGAQKK0i25wkdY=" + }, + "font": "Arial;13;0", + "left": 2837, + "top": 1746, + "width": 117.0380859375, + "height": 13, + "text": "+outline", + "horizontalAlignment": 0 + }, + { + "_type": "UMLAttributeView", + "_id": "AAAAAAGAQKK2l28JCeE=", + "_parent": { + "$ref": "AAAAAAGAQKIeqmL15DU=" + }, + "model": { + "$ref": "AAAAAAGAQKK2bm7uffg=" + }, + "font": "Arial;13;0", + "left": 2837, + "top": 1761, + "width": 117.0380859375, + "height": 13, + "text": "+pattern", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 2832, + "top": 1681, + "width": 127.0380859375, + "height": 98 + }, + { + "_type": "UMLOperationCompartmentView", + "_id": "AAAAAAGAQKIeqmL2dy0=", + "_parent": { + "$ref": "AAAAAAGAQKIeqWLv2j0=" + }, + "model": { + "$ref": "AAAAAAGAQKIeqWLtb7A=" + }, + "subViews": [ + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAQKI2X2Rqdhc=", + "_parent": { + "$ref": "AAAAAAGAQKIeqmL2dy0=" + }, + "model": { + "$ref": "AAAAAAGAQKI2N2RPsfU=" + }, + "font": "Arial;13;0", + "left": 2837, + "top": 1784, + "width": 117.0380859375, + "height": 13, + "text": "+clone()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAQKI9uGUwjGE=", + "_parent": { + "$ref": "AAAAAAGAQKIeqmL2dy0=" + }, + "model": { + "$ref": "AAAAAAGAQKI9kGUVE0M=" + }, + "font": "Arial;13;0", + "left": 2837, + "top": 1799, + "width": 117.0380859375, + "height": 13, + "text": "+fromJSON()", + "horizontalAlignment": 0 + }, + { + "_type": "UMLOperationView", + "_id": "AAAAAAGAQKJAC2WuxLo=", + "_parent": { + "$ref": "AAAAAAGAQKIeqmL2dy0=" + }, + "model": { + "$ref": "AAAAAAGAQKI/4mWTMrg=" + }, + "font": "Arial;13;0", + "left": 2837, + "top": 1814, + "width": 117.0380859375, + "height": 13, + "text": "+toJSON()", + "horizontalAlignment": 0 + } + ], + "font": "Arial;13;0", + "left": 2832, + "top": 1779, + "width": 127.0380859375, + "height": 53 + }, + { + "_type": "UMLReceptionCompartmentView", + "_id": "AAAAAAGAQKIeqmL3t4E=", + "_parent": { + "$ref": "AAAAAAGAQKIeqWLv2j0=" + }, + "model": { + "$ref": "AAAAAAGAQKIeqWLtb7A=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 168, + "top": 128, + "width": 10, + "height": 10 + }, + { + "_type": "UMLTemplateParameterCompartmentView", + "_id": "AAAAAAGAQKIeqmL4wsU=", + "_parent": { + "$ref": "AAAAAAGAQKIeqWLv2j0=" + }, + "model": { + "$ref": "AAAAAAGAQKIeqWLtb7A=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 168, + "top": 128, + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "containerChangeable": true, + "left": 2832, + "top": 1656, + "width": 127.0380859375, + "height": 176, + "nameCompartment": { + "$ref": "AAAAAAGAQKIeqmLwPvU=" + }, + "attributeCompartment": { + "$ref": "AAAAAAGAQKIeqmL15DU=" + }, + "operationCompartment": { + "$ref": "AAAAAAGAQKIeqmL2dy0=" + }, + "receptionCompartment": { + "$ref": "AAAAAAGAQKIeqmL3t4E=" + }, + "templateParameterCompartment": { + "$ref": "AAAAAAGAQKIeqmL4wsU=" + } + }, + { + "_type": "UMLAssociationView", + "_id": "AAAAAAGAQZEEMWQzWag=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAQZEEMGQvP4A=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZEEMWQ06Ho=", + "_parent": { + "$ref": "AAAAAAGAQZEEMWQzWag=" + }, + "model": { + "$ref": "AAAAAAGAQZEEMGQvP4A=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2646, + "top": 1633, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQZEEMWQzWag=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZEEMWQ1eXY=", + "_parent": { + "$ref": "AAAAAAGAQZEEMWQzWag=" + }, + "model": { + "$ref": "AAAAAAGAQZEEMGQvP4A=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 2654, + "top": 1646, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQZEEMWQzWag=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZEEMWQ2OMA=", + "_parent": { + "$ref": "AAAAAAGAQZEEMWQzWag=" + }, + "model": { + "$ref": "AAAAAAGAQZEEMGQvP4A=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2629, + "top": 1608, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQZEEMWQzWag=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZEEMWQ3Fys=", + "_parent": { + "$ref": "AAAAAAGAQZEEMWQzWag=" + }, + "model": { + "$ref": "AAAAAAGAQZEEMGQwxWs=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2769, + "top": 1556, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQZEEMWQzWag=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZEEMWQ4Qow=", + "_parent": { + "$ref": "AAAAAAGAQZEEMWQzWag=" + }, + "model": { + "$ref": "AAAAAAGAQZEEMGQwxWs=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2774, + "top": 1569, + "height": 13, + "alpha": 0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAQZEEMWQzWag=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZEEMWQ5gR8=", + "_parent": { + "$ref": "AAAAAAGAQZEEMWQzWag=" + }, + "model": { + "$ref": "AAAAAAGAQZEEMGQwxWs=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2758, + "top": 1530, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAQZEEMWQzWag=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZEEMWQ6sCU=", + "_parent": { + "$ref": "AAAAAAGAQZEEMWQzWag=" + }, + "model": { + "$ref": "AAAAAAGAQZEEMGQx3vs=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2522, + "top": 1711, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQZEEMWQzWag=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZEEMWQ75iI=", + "_parent": { + "$ref": "AAAAAAGAQZEEMWQzWag=" + }, + "model": { + "$ref": "AAAAAAGAQZEEMGQx3vs=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2532, + "top": 1721, + "height": 13, + "alpha": -0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAQZEEMWQzWag=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZEEMWQ8Hek=", + "_parent": { + "$ref": "AAAAAAGAQZEEMWQzWag=" + }, + "model": { + "$ref": "AAAAAAGAQZEEMGQx3vs=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2504, + "top": 1690, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAQZEEMWQzWag=" + } + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAQZEEMWQ9h1s=", + "_parent": { + "$ref": "AAAAAAGAQZEEMWQzWag=" + }, + "model": { + "$ref": "AAAAAAGAQZEEMGQwxWs=" + }, + "visible": false, + "font": "Arial;13;0", + "left": -56, + "top": -8, + "width": 10, + "height": 10 + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAQZEEMWQ+R10=", + "_parent": { + "$ref": "AAAAAAGAQZEEMWQzWag=" + }, + "model": { + "$ref": "AAAAAAGAQZEEMGQx3vs=" + }, + "visible": false, + "font": "Arial;13;0", + "left": -56, + "top": -8, + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAQPnVf+rFgxs=" + }, + "tail": { + "$ref": "AAAAAAGAQJPNQDjq3dQ=" + }, + "lineStyle": 1, + "points": "2783:1536;2493:1719", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAQZEEMWQ06Ho=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAQZEEMWQ1eXY=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAQZEEMWQ2OMA=" + }, + "tailRoleNameLabel": { + "$ref": "AAAAAAGAQZEEMWQ3Fys=" + }, + "tailPropertyLabel": { + "$ref": "AAAAAAGAQZEEMWQ4Qow=" + }, + "tailMultiplicityLabel": { + "$ref": "AAAAAAGAQZEEMWQ5gR8=" + }, + "headRoleNameLabel": { + "$ref": "AAAAAAGAQZEEMWQ6sCU=" + }, + "headPropertyLabel": { + "$ref": "AAAAAAGAQZEEMWQ75iI=" + }, + "headMultiplicityLabel": { + "$ref": "AAAAAAGAQZEEMWQ8Hek=" + }, + "tailQualifiersCompartment": { + "$ref": "AAAAAAGAQZEEMWQ9h1s=" + }, + "headQualifiersCompartment": { + "$ref": "AAAAAAGAQZEEMWQ+R10=" + } + }, + { + "_type": "UMLAssociationView", + "_id": "AAAAAAGAQZE2+meDj0I=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAQZE2+md/zbs=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZE2+meE0dA=", + "_parent": { + "$ref": "AAAAAAGAQZE2+meDj0I=" + }, + "model": { + "$ref": "AAAAAAGAQZE2+md/zbs=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2565, + "top": 1629, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQZE2+meDj0I=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZE2+meFKgw=", + "_parent": { + "$ref": "AAAAAAGAQZE2+meDj0I=" + }, + "model": { + "$ref": "AAAAAAGAQZE2+md/zbs=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 2571, + "top": 1643, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQZE2+meDj0I=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZE2+meGnAQ=", + "_parent": { + "$ref": "AAAAAAGAQZE2+meDj0I=" + }, + "model": { + "$ref": "AAAAAAGAQZE2+md/zbs=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2552, + "top": 1602, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQZE2+meDj0I=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZE2+meHJn0=", + "_parent": { + "$ref": "AAAAAAGAQZE2+meDj0I=" + }, + "model": { + "$ref": "AAAAAAGAQZE2+meABCg=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2765, + "top": 1542, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQZE2+meDj0I=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZE2+meIuKI=", + "_parent": { + "$ref": "AAAAAAGAQZE2+meDj0I=" + }, + "model": { + "$ref": "AAAAAAGAQZE2+meABCg=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2768, + "top": 1555, + "height": 13, + "alpha": 0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAQZE2+meDj0I=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZE2+meJZnE=", + "_parent": { + "$ref": "AAAAAAGAQZE2+meDj0I=" + }, + "model": { + "$ref": "AAAAAAGAQZE2+meABCg=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2758, + "top": 1515, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAQZE2+meDj0I=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZE2+meKXaM=", + "_parent": { + "$ref": "AAAAAAGAQZE2+meDj0I=" + }, + "model": { + "$ref": "AAAAAAGAQZE2+meB18I=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2364, + "top": 1718, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQZE2+meDj0I=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZE2+meLG60=", + "_parent": { + "$ref": "AAAAAAGAQZE2+meDj0I=" + }, + "model": { + "$ref": "AAAAAAGAQZE2+meB18I=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2372, + "top": 1729, + "height": 13, + "alpha": -0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAQZE2+meDj0I=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZE2+meM+Xk=", + "_parent": { + "$ref": "AAAAAAGAQZE2+meDj0I=" + }, + "model": { + "$ref": "AAAAAAGAQZE2+meB18I=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2349, + "top": 1694, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAQZE2+meDj0I=" + } + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAQZE2+meN3Qs=", + "_parent": { + "$ref": "AAAAAAGAQZE2+meDj0I=" + }, + "model": { + "$ref": "AAAAAAGAQZE2+meABCg=" + }, + "visible": false, + "font": "Arial;13;0", + "left": -56, + "top": -8, + "width": 10, + "height": 10 + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAQZE2+meO9iI=", + "_parent": { + "$ref": "AAAAAAGAQZE2+meDj0I=" + }, + "model": { + "$ref": "AAAAAAGAQZE2+meB18I=" + }, + "visible": false, + "font": "Arial;13;0", + "left": -56, + "top": -8, + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAQHci648v8Jg=" + }, + "tail": { + "$ref": "AAAAAAGAQJPNQDjq3dQ=" + }, + "lineStyle": 1, + "points": "2783:1524;2335:1721", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAQZE2+meE0dA=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAQZE2+meFKgw=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAQZE2+meGnAQ=" + }, + "tailRoleNameLabel": { + "$ref": "AAAAAAGAQZE2+meHJn0=" + }, + "tailPropertyLabel": { + "$ref": "AAAAAAGAQZE2+meIuKI=" + }, + "tailMultiplicityLabel": { + "$ref": "AAAAAAGAQZE2+meJZnE=" + }, + "headRoleNameLabel": { + "$ref": "AAAAAAGAQZE2+meKXaM=" + }, + "headPropertyLabel": { + "$ref": "AAAAAAGAQZE2+meLG60=" + }, + "headMultiplicityLabel": { + "$ref": "AAAAAAGAQZE2+meM+Xk=" + }, + "tailQualifiersCompartment": { + "$ref": "AAAAAAGAQZE2+meN3Qs=" + }, + "headQualifiersCompartment": { + "$ref": "AAAAAAGAQZE2+meO9iI=" + } + }, + { + "_type": "UMLAssociationView", + "_id": "AAAAAAGAQZOWEGpdhEY=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAQZOWEGpZGhg=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZOWEGpeioI=", + "_parent": { + "$ref": "AAAAAAGAQZOWEGpdhEY=" + }, + "model": { + "$ref": "AAAAAAGAQZOWEGpZGhg=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 3215, + "top": 1513, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQZOWEGpdhEY=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZOWEGpfios=", + "_parent": { + "$ref": "AAAAAAGAQZOWEGpdhEY=" + }, + "model": { + "$ref": "AAAAAAGAQZOWEGpZGhg=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 3230, + "top": 1513, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQZOWEGpdhEY=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZOWEGpgu4U=", + "_parent": { + "$ref": "AAAAAAGAQZOWEGpdhEY=" + }, + "model": { + "$ref": "AAAAAAGAQZOWEGpZGhg=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 3185, + "top": 1514, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQZOWEGpdhEY=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZOWEGph92Q=", + "_parent": { + "$ref": "AAAAAAGAQZOWEGpdhEY=" + }, + "model": { + "$ref": "AAAAAAGAQZOWEGpaZS4=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2933, + "top": 1499, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQZOWEGpdhEY=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZOWEGpin14=", + "_parent": { + "$ref": "AAAAAAGAQZOWEGpdhEY=" + }, + "model": { + "$ref": "AAAAAAGAQZOWEGpaZS4=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2936, + "top": 1485, + "height": 13, + "alpha": 0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAQZOWEGpdhEY=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZOWEGpjFv8=", + "_parent": { + "$ref": "AAAAAAGAQZOWEGpdhEY=" + }, + "model": { + "$ref": "AAAAAAGAQZOWEGpaZS4=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2929, + "top": 1526, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAQZOWEGpdhEY=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZOWEGpkaFo=", + "_parent": { + "$ref": "AAAAAAGAQZOWEGpdhEY=" + }, + "model": { + "$ref": "AAAAAAGAQZOWEGpb1vk=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 3215, + "top": 1616, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQZOWEGpdhEY=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZOWEGplaes=", + "_parent": { + "$ref": "AAAAAAGAQZOWEGpdhEY=" + }, + "model": { + "$ref": "AAAAAAGAQZOWEGpb1vk=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 3228, + "top": 1613, + "height": 13, + "alpha": -0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAQZOWEGpdhEY=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZOWEGpmhpw=", + "_parent": { + "$ref": "AAAAAAGAQZOWEGpdhEY=" + }, + "model": { + "$ref": "AAAAAAGAQZOWEGpb1vk=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 3187, + "top": 1620, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAQZOWEGpdhEY=" + } + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAQZOWEGpnTsQ=", + "_parent": { + "$ref": "AAAAAAGAQZOWEGpdhEY=" + }, + "model": { + "$ref": "AAAAAAGAQZOWEGpaZS4=" + }, + "visible": false, + "font": "Arial;13;0", + "width": 10, + "height": 10 + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAQZOWEGpo40M=", + "_parent": { + "$ref": "AAAAAAGAQZOWEGpdhEY=" + }, + "model": { + "$ref": "AAAAAAGAQZOWEGpb1vk=" + }, + "visible": false, + "font": "Arial;13;0", + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAQLns6JmlVRk=" + }, + "tail": { + "$ref": "AAAAAAGAQJPNQDjq3dQ=" + }, + "points": "2908:1520;3200:1520;3200:1648", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAQZOWEGpeioI=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAQZOWEGpfios=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAQZOWEGpgu4U=" + }, + "tailRoleNameLabel": { + "$ref": "AAAAAAGAQZOWEGph92Q=" + }, + "tailPropertyLabel": { + "$ref": "AAAAAAGAQZOWEGpin14=" + }, + "tailMultiplicityLabel": { + "$ref": "AAAAAAGAQZOWEGpjFv8=" + }, + "headRoleNameLabel": { + "$ref": "AAAAAAGAQZOWEGpkaFo=" + }, + "headPropertyLabel": { + "$ref": "AAAAAAGAQZOWEGplaes=" + }, + "headMultiplicityLabel": { + "$ref": "AAAAAAGAQZOWEGpmhpw=" + }, + "tailQualifiersCompartment": { + "$ref": "AAAAAAGAQZOWEGpnTsQ=" + }, + "headQualifiersCompartment": { + "$ref": "AAAAAAGAQZOWEGpo40M=" + } + }, + { + "_type": "UMLAssociationView", + "_id": "AAAAAAGAQZO4TGv2Wb8=", + "_parent": { + "$ref": "AAAAAAFF+qBtyKM79qY=" + }, + "model": { + "$ref": "AAAAAAGAQZO4TGvycxc=" + }, + "subViews": [ + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZO4TGv36pE=", + "_parent": { + "$ref": "AAAAAAGAQZO4TGv2Wb8=" + }, + "model": { + "$ref": "AAAAAAGAQZO4TGvycxc=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2725, + "top": 1624, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQZO4TGv2Wb8=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZO4TGv4yKA=", + "_parent": { + "$ref": "AAAAAAGAQZO4TGv2Wb8=" + }, + "model": { + "$ref": "AAAAAAGAQZO4TGvycxc=" + }, + "visible": null, + "font": "Arial;13;0", + "left": 2735, + "top": 1635, + "height": 13, + "alpha": 1.5707963267948966, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQZO4TGv2Wb8=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZO4TGv5lrs=", + "_parent": { + "$ref": "AAAAAAGAQZO4TGv2Wb8=" + }, + "model": { + "$ref": "AAAAAAGAQZO4TGvycxc=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2704, + "top": 1603, + "height": 13, + "alpha": -1.5707963267948966, + "distance": 15, + "hostEdge": { + "$ref": "AAAAAAGAQZO4TGv2Wb8=" + }, + "edgePosition": 1 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZO4TGv6LtA=", + "_parent": { + "$ref": "AAAAAAGAQZO4TGv2Wb8=" + }, + "model": { + "$ref": "AAAAAAGAQZO4TGvzO6Q=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2774, + "top": 1578, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQZO4TGv2Wb8=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZO4TGv7sK8=", + "_parent": { + "$ref": "AAAAAAGAQZO4TGv2Wb8=" + }, + "model": { + "$ref": "AAAAAAGAQZO4TGvzO6Q=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2781, + "top": 1589, + "height": 13, + "alpha": 0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAQZO4TGv2Wb8=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZO4TGv8jXU=", + "_parent": { + "$ref": "AAAAAAGAQZO4TGv2Wb8=" + }, + "model": { + "$ref": "AAAAAAGAQZO4TGvzO6Q=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2758, + "top": 1555, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAQZO4TGv2Wb8=" + }, + "edgePosition": 2 + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZO4TGv9Ta4=", + "_parent": { + "$ref": "AAAAAAGAQZO4TGv2Wb8=" + }, + "model": { + "$ref": "AAAAAAGAQZO4TGv03hE=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2676, + "top": 1672, + "height": 13, + "alpha": -0.5235987755982988, + "distance": 30, + "hostEdge": { + "$ref": "AAAAAAGAQZO4TGv2Wb8=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZO4TGv+EKc=", + "_parent": { + "$ref": "AAAAAAGAQZO4TGv2Wb8=" + }, + "model": { + "$ref": "AAAAAAGAQZO4TGv03hE=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2686, + "top": 1680, + "height": 13, + "alpha": -0.7853981633974483, + "distance": 40, + "hostEdge": { + "$ref": "AAAAAAGAQZO4TGv2Wb8=" + } + }, + { + "_type": "EdgeLabelView", + "_id": "AAAAAAGAQZO4TGv/ouA=", + "_parent": { + "$ref": "AAAAAAGAQZO4TGv2Wb8=" + }, + "model": { + "$ref": "AAAAAAGAQZO4TGv03hE=" + }, + "visible": false, + "font": "Arial;13;0", + "left": 2654, + "top": 1655, + "height": 13, + "alpha": 0.5235987755982988, + "distance": 25, + "hostEdge": { + "$ref": "AAAAAAGAQZO4TGv2Wb8=" + } + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAQZO4TWwAL+8=", + "_parent": { + "$ref": "AAAAAAGAQZO4TGv2Wb8=" + }, + "model": { + "$ref": "AAAAAAGAQZO4TGvzO6Q=" + }, + "visible": false, + "font": "Arial;13;0", + "width": 10, + "height": 10 + }, + { + "_type": "UMLQualifierCompartmentView", + "_id": "AAAAAAGAQZO4TWwBVw0=", + "_parent": { + "$ref": "AAAAAAGAQZO4TGv2Wb8=" + }, + "model": { + "$ref": "AAAAAAGAQZO4TGv03hE=" + }, + "visible": false, + "font": "Arial;13;0", + "width": 10, + "height": 10 + } + ], + "font": "Arial;13;0", + "head": { + "$ref": "AAAAAAGAQI6qsOc2n1Y=" + }, + "tail": { + "$ref": "AAAAAAGAQJPNQDjq3dQ=" + }, + "lineStyle": 1, + "points": "2783:1556;2647:1685", + "showVisibility": true, + "nameLabel": { + "$ref": "AAAAAAGAQZO4TGv36pE=" + }, + "stereotypeLabel": { + "$ref": "AAAAAAGAQZO4TGv4yKA=" + }, + "propertyLabel": { + "$ref": "AAAAAAGAQZO4TGv5lrs=" + }, + "tailRoleNameLabel": { + "$ref": "AAAAAAGAQZO4TGv6LtA=" + }, + "tailPropertyLabel": { + "$ref": "AAAAAAGAQZO4TGv7sK8=" + }, + "tailMultiplicityLabel": { + "$ref": "AAAAAAGAQZO4TGv8jXU=" + }, + "headRoleNameLabel": { + "$ref": "AAAAAAGAQZO4TGv9Ta4=" + }, + "headPropertyLabel": { + "$ref": "AAAAAAGAQZO4TGv+EKc=" + }, + "headMultiplicityLabel": { + "$ref": "AAAAAAGAQZO4TGv/ouA=" + }, + "tailQualifiersCompartment": { + "$ref": "AAAAAAGAQZO4TWwAL+8=" + }, + "headQualifiersCompartment": { + "$ref": "AAAAAAGAQZO4TWwBVw0=" + } + } + ] + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAO1MYeU/HxR0=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "Symbol", + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAO1M4mE/xJtQ=", + "_parent": { + "$ref": "AAAAAAGAO1MYeU/HxR0=" + }, + "name": "type", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAO1NDTE/3Mpo=", + "_parent": { + "$ref": "AAAAAAGAO1MYeU/HxR0=" + }, + "name": "color", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAO1NFuk/9tZ0=", + "_parent": { + "$ref": "AAAAAAGAO1MYeU/HxR0=" + }, + "name": "opacity", + "visibility": "private", + "type": "" + } + ], + "operations": [ + { + "_type": "UMLOperation", + "_id": "AAAAAAGAO1QIuVAHl58=", + "_parent": { + "$ref": "AAAAAAGAO1MYeU/HxR0=" + }, + "name": "fromJSON" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAO1QRq1ANbHM=", + "_parent": { + "$ref": "AAAAAAGAO1MYeU/HxR0=" + }, + "name": "toJSON" + } + ], + "isAbstract": true + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAO4K5hVAX2y8=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "MarkerSymbol", + "ownedElements": [ + { + "_type": "UMLGeneralization", + "_id": "AAAAAAGAO4k9d5q8o/w=", + "_parent": { + "$ref": "AAAAAAGAO4K5hVAX2y8=" + }, + "source": { + "$ref": "AAAAAAGAO4K5hVAX2y8=" + }, + "target": { + "$ref": "AAAAAAGAO1MYeU/HxR0=" + } + } + ], + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAO4pz5Zr153M=", + "_parent": { + "$ref": "AAAAAAGAO4K5hVAX2y8=" + }, + "name": "type", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAO4mTwJrPb7w=", + "_parent": { + "$ref": "AAAAAAGAO4K5hVAX2y8=" + }, + "name": "angle", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAO4qdgZsAE80=", + "_parent": { + "$ref": "AAAAAAGAO4K5hVAX2y8=" + }, + "name": "color", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAO4mfnZrVlig=", + "_parent": { + "$ref": "AAAAAAGAO4K5hVAX2y8=" + }, + "name": "xoffset", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAO4mihZrbRuU=", + "_parent": { + "$ref": "AAAAAAGAO4K5hVAX2y8=" + }, + "name": "yoffset", + "type": "" + } + ], + "operations": [ + { + "_type": "UMLOperation", + "_id": "AAAAAAGAO4nh+prkPOw=", + "_parent": { + "$ref": "AAAAAAGAO4K5hVAX2y8=" + }, + "name": "fromJSON" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAO4n8mJrrxks=", + "_parent": { + "$ref": "AAAAAAGAO4K5hVAX2y8=" + }, + "name": "toJSON" + } + ], + "isAbstract": true + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAO5gALZsNaqc=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "SimpleMarkerSymbol", + "ownedElements": [ + { + "_type": "UMLGeneralization", + "_id": "AAAAAAGAO5hIZ5s7B30=", + "_parent": { + "$ref": "AAAAAAGAO5gALZsNaqc=" + }, + "source": { + "$ref": "AAAAAAGAO5gALZsNaqc=" + }, + "target": { + "$ref": "AAAAAAGAO4K5hVAX2y8=" + } + }, + { + "_type": "UMLAssociation", + "_id": "AAAAAAGAPAUdsZyKUJw=", + "_parent": { + "$ref": "AAAAAAGAO5gALZsNaqc=" + }, + "end1": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAPAUdsZyL/EI=", + "_parent": { + "$ref": "AAAAAAGAPAUdsZyKUJw=" + }, + "reference": { + "$ref": "AAAAAAGAO5gALZsNaqc=" + } + }, + "end2": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAPAUdsZyMSoA=", + "_parent": { + "$ref": "AAAAAAGAPAUdsZyKUJw=" + }, + "reference": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + } + } + }, + { + "_type": "UMLAssociation", + "_id": "AAAAAAGAPAZXyJz3JCA=", + "_parent": { + "$ref": "AAAAAAGAO5gALZsNaqc=" + }, + "end1": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAPAZXyJz4H6A=", + "_parent": { + "$ref": "AAAAAAGAPAZXyJz3JCA=" + }, + "reference": { + "$ref": "AAAAAAGAO5gALZsNaqc=" + }, + "navigable": false + }, + "end2": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAPAZXyJz5qwM=", + "_parent": { + "$ref": "AAAAAAGAPAZXyJz3JCA=" + }, + "reference": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + } + } + } + ], + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAO5hkNptMOqw=", + "_parent": { + "$ref": "AAAAAAGAO5gALZsNaqc=" + }, + "name": "type", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAO5hwUJtS32g=", + "_parent": { + "$ref": "AAAAAAGAO5gALZsNaqc=" + }, + "name": "angle", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAO5hygptYMPQ=", + "_parent": { + "$ref": "AAAAAAGAO5gALZsNaqc=" + }, + "name": "color", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAO5pIqJud5fM=", + "_parent": { + "$ref": "AAAAAAGAO5gALZsNaqc=" + }, + "name": "outline", + "type": "SimpleLineSymbol" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAO5h09pteLz4=", + "_parent": { + "$ref": "AAAAAAGAO5gALZsNaqc=" + }, + "name": "path", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAO5h23Jtkc88=", + "_parent": { + "$ref": "AAAAAAGAO5gALZsNaqc=" + }, + "name": "size", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAO5h4k5tqygA=", + "_parent": { + "$ref": "AAAAAAGAO5gALZsNaqc=" + }, + "name": "style", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAO5h7A5tw0cA=", + "_parent": { + "$ref": "AAAAAAGAO5gALZsNaqc=" + }, + "name": "xoffset", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAO5h9B5t2d9Q=", + "_parent": { + "$ref": "AAAAAAGAO5gALZsNaqc=" + }, + "name": "yoffset", + "type": "" + } + ], + "operations": [ + { + "_type": "UMLOperation", + "_id": "AAAAAAGAO5iajJuIBOs=", + "_parent": { + "$ref": "AAAAAAGAO5gALZsNaqc=" + }, + "name": "clone" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAO5iPxpt81pU=", + "_parent": { + "$ref": "AAAAAAGAO5gALZsNaqc=" + }, + "name": "fromJSON" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAO5iX6JuC7TA=", + "_parent": { + "$ref": "AAAAAAGAO5gALZsNaqc=" + }, + "name": "toJSON" + } + ] + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAPAEEB5uzp5s=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "LineSymbol", + "ownedElements": [ + { + "_type": "UMLGeneralization", + "_id": "AAAAAAGAPAMl+Jwq3y8=", + "_parent": { + "$ref": "AAAAAAGAPAEEB5uzp5s=" + }, + "source": { + "$ref": "AAAAAAGAPAEEB5uzp5s=" + }, + "target": { + "$ref": "AAAAAAGAO1MYeU/HxR0=" + } + } + ], + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPAKLVpvdNNE=", + "_parent": { + "$ref": "AAAAAAGAPAEEB5uzp5s=" + }, + "name": "type", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPAKRz5vj6lU=", + "_parent": { + "$ref": "AAAAAAGAPAEEB5uzp5s=" + }, + "name": "color", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPAKan5vpoKk=", + "_parent": { + "$ref": "AAAAAAGAPAEEB5uzp5s=" + }, + "name": "width", + "type": "" + } + ], + "operations": [ + { + "_type": "UMLOperation", + "_id": "AAAAAAGAPALS25vyQdo=", + "_parent": { + "$ref": "AAAAAAGAPAEEB5uzp5s=" + }, + "name": "fromJSON" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAPALeMZv49lY=", + "_parent": { + "$ref": "AAAAAAGAPAEEB5uzp5s=" + }, + "name": "toJSON" + } + ], + "isAbstract": true + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAPAMK75wAYR4=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "SimpleLineSymbol", + "ownedElements": [ + { + "_type": "UMLGeneralization", + "_id": "AAAAAAGAPAM0X5w7CQk=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + }, + "source": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + }, + "target": { + "$ref": "AAAAAAGAPAEEB5uzp5s=" + } + }, + { + "_type": "UMLAssociation", + "_id": "AAAAAAGAPAgXl59swT0=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + }, + "end1": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAPAgXl59tmOM=", + "_parent": { + "$ref": "AAAAAAGAPAgXl59swT0=" + }, + "reference": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + }, + "navigable": false + }, + "end2": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAPAgXl59uDWo=", + "_parent": { + "$ref": "AAAAAAGAPAgXl59swT0=" + }, + "reference": { + "$ref": "AAAAAAGAPAZ6f51PAmE=" + } + } + } + ], + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPAQZ0pxMviw=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + }, + "name": "type", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPAQglpxSlAw=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + }, + "name": "cap", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPAQjTpxYRgc=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + }, + "name": "color", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPAQlXpxeKLg=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + }, + "name": "join", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPAQnhpxkzMk=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + }, + "name": "marker", + "type": "LineSymbolMarker" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPAQprpxqv+k=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + }, + "name": "miterLimit", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPAQr7pxwm+c=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + }, + "name": "style", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPAQuFpx2vEw=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + }, + "name": "width", + "type": "" + } + ], + "operations": [ + { + "_type": "UMLOperation", + "_id": "AAAAAAGAPCvaqK3lziY=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + }, + "name": "clone" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAPCvhf64bbOg=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + }, + "name": "fromJSON" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAPCvkHq4/nNg=", + "_parent": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + }, + "name": "toJSON" + } + ] + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAPAZ6f51PAmE=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "LineSymbolMarker", + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPAad+p2dGzE=", + "_parent": { + "$ref": "AAAAAAGAPAZ6f51PAmE=" + }, + "name": "type", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPAakl5275T8=", + "_parent": { + "$ref": "AAAAAAGAPAZ6f51PAmE=" + }, + "name": "color", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPAamt53QDe4=", + "_parent": { + "$ref": "AAAAAAGAPAZ6f51PAmE=" + }, + "name": "placement", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPAapL53l9Sc=", + "_parent": { + "$ref": "AAAAAAGAPAZ6f51PAmE=" + }, + "name": "style", + "type": "" + } + ] + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAPBd73aHqdKY=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "PictureMarkerSymbol", + "ownedElements": [ + { + "_type": "UMLGeneralization", + "_id": "AAAAAAGAPBeg7KJvEiE=", + "_parent": { + "$ref": "AAAAAAGAPBd73aHqdKY=" + }, + "source": { + "$ref": "AAAAAAGAPBd73aHqdKY=" + }, + "target": { + "$ref": "AAAAAAGAO4K5hVAX2y8=" + } + } + ], + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPBe8CaLygzQ=", + "_parent": { + "$ref": "AAAAAAGAPBd73aHqdKY=" + }, + "name": "type", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPBfC3qMo4vU=", + "_parent": { + "$ref": "AAAAAAGAPBd73aHqdKY=" + }, + "name": "angle", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPBfFsKNMfiQ=", + "_parent": { + "$ref": "AAAAAAGAPBd73aHqdKY=" + }, + "name": "height", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPBfH9qNwFW8=", + "_parent": { + "$ref": "AAAAAAGAPBd73aHqdKY=" + }, + "name": "url", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPBfKDqOUl0Y=", + "_parent": { + "$ref": "AAAAAAGAPBd73aHqdKY=" + }, + "name": "width", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPBfMJqO4ULE=", + "_parent": { + "$ref": "AAAAAAGAPBd73aHqdKY=" + }, + "name": "xoffset", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPBfOZ6Pcm9c=", + "_parent": { + "$ref": "AAAAAAGAPBd73aHqdKY=" + }, + "name": "yoffset", + "type": "" + } + ], + "operations": [ + { + "_type": "UMLOperation", + "_id": "AAAAAAGAPBet6aK8jQc=", + "_parent": { + "$ref": "AAAAAAGAPBd73aHqdKY=" + }, + "name": "clone" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAPBhvx6Wusf8=", + "_parent": { + "$ref": "AAAAAAGAPBd73aHqdKY=" + }, + "name": "fromJSON" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAPBhx56XShSk=", + "_parent": { + "$ref": "AAAAAAGAPBd73aHqdKY=" + }, + "name": "toJSON" + } + ] + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAPCD456eWclQ=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "FillSymbol", + "ownedElements": [ + { + "_type": "UMLGeneralization", + "_id": "AAAAAAGAPCEOb6gbYVs=", + "_parent": { + "$ref": "AAAAAAGAPCD456eWclQ=" + }, + "source": { + "$ref": "AAAAAAGAPCD456eWclQ=" + }, + "target": { + "$ref": "AAAAAAGAO1MYeU/HxR0=" + } + } + ], + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPCEdKahoOMM=", + "_parent": { + "$ref": "AAAAAAGAPCD456eWclQ=" + }, + "name": "type", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPCEmEKiwQC0=", + "_parent": { + "$ref": "AAAAAAGAPCD456eWclQ=" + }, + "name": "outline", + "type": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + } + } + ], + "operations": [ + { + "_type": "UMLOperation", + "_id": "AAAAAAGAPCEvg6jm2cI=", + "_parent": { + "$ref": "AAAAAAGAPCD456eWclQ=" + }, + "name": "fromJSON" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAPCE2f6kc9N4=", + "_parent": { + "$ref": "AAAAAAGAPCD456eWclQ=" + }, + "name": "toJSON" + } + ], + "isAbstract": true + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAPCnyRqqQR0M=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "SimpleFillSymbol", + "ownedElements": [ + { + "_type": "UMLGeneralization", + "_id": "AAAAAAGAPCwoxq9lm94=", + "_parent": { + "$ref": "AAAAAAGAPCnyRqqQR0M=" + }, + "source": { + "$ref": "AAAAAAGAPCnyRqqQR0M=" + }, + "target": { + "$ref": "AAAAAAGAPCD456eWclQ=" + } + }, + { + "_type": "UMLAssociation", + "_id": "AAAAAAGAPQTeDH3yZgM=", + "_parent": { + "$ref": "AAAAAAGAPCnyRqqQR0M=" + }, + "end1": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAPQTeDH3zm0M=", + "_parent": { + "$ref": "AAAAAAGAPQTeDH3yZgM=" + }, + "reference": { + "$ref": "AAAAAAGAPCnyRqqQR0M=" + }, + "navigable": false + }, + "end2": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAPQTeDH30fcw=", + "_parent": { + "$ref": "AAAAAAGAPQTeDH3yZgM=" + }, + "reference": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + } + } + } + ], + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPCqTEauYd9c=", + "_parent": { + "$ref": "AAAAAAGAPCnyRqqQR0M=" + }, + "name": "type", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPCqZd6vOxgQ=", + "_parent": { + "$ref": "AAAAAAGAPCnyRqqQR0M=" + }, + "name": "color", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPCqcjqvys9Y=", + "_parent": { + "$ref": "AAAAAAGAPCnyRqqQR0M=" + }, + "name": "outline", + "type": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + } + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPCqfd6wWjho=", + "_parent": { + "$ref": "AAAAAAGAPCnyRqqQR0M=" + }, + "name": "style", + "type": "" + } + ], + "operations": [ + { + "_type": "UMLOperation", + "_id": "AAAAAAGAPCp84qsIizc=", + "_parent": { + "$ref": "AAAAAAGAPCnyRqqQR0M=" + }, + "name": "clone" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAPCqEt6s+HlI=", + "_parent": { + "$ref": "AAAAAAGAPCnyRqqQR0M=" + }, + "name": "fromJSON" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAPCqIjqtiAxk=", + "_parent": { + "$ref": "AAAAAAGAPCnyRqqQR0M=" + }, + "name": "toJSON" + } + ] + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAPQMJ6nhGP6w=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "PictureFillSymbol", + "ownedElements": [ + { + "_type": "UMLGeneralization", + "_id": "AAAAAAGAPQQ/rX0Sm58=", + "_parent": { + "$ref": "AAAAAAGAPQMJ6nhGP6w=" + }, + "source": { + "$ref": "AAAAAAGAPQMJ6nhGP6w=" + }, + "target": { + "$ref": "AAAAAAGAPCD456eWclQ=" + } + }, + { + "_type": "UMLAssociation", + "_id": "AAAAAAGAPQTsGX5l7I8=", + "_parent": { + "$ref": "AAAAAAGAPQMJ6nhGP6w=" + }, + "end1": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAPQTsGX5mdOE=", + "_parent": { + "$ref": "AAAAAAGAPQTsGX5l7I8=" + }, + "reference": { + "$ref": "AAAAAAGAPQMJ6nhGP6w=" + }, + "navigable": false + }, + "end2": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAPQTsGX5nfsI=", + "_parent": { + "$ref": "AAAAAAGAPQTsGX5l7I8=" + }, + "reference": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + } + } + } + ], + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPQM7WHi4dEU=", + "_parent": { + "$ref": "AAAAAAGAPQMJ6nhGP6w=" + }, + "name": "type", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPQNDuXjuWOY=", + "_parent": { + "$ref": "AAAAAAGAPQMJ6nhGP6w=" + }, + "name": "height", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPQNF6nkSbuY=", + "_parent": { + "$ref": "AAAAAAGAPQMJ6nhGP6w=" + }, + "name": "outline", + "type": { + "$ref": "AAAAAAGAPAMK75wAYR4=" + } + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPQNIonk2nHk=", + "_parent": { + "$ref": "AAAAAAGAPQMJ6nhGP6w=" + }, + "name": "url", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPQNKhXlabsA=", + "_parent": { + "$ref": "AAAAAAGAPQMJ6nhGP6w=" + }, + "name": "width", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPQNMP3l+opg=", + "_parent": { + "$ref": "AAAAAAGAPQMJ6nhGP6w=" + }, + "name": "xoffset", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPQNOl3miql8=", + "_parent": { + "$ref": "AAAAAAGAPQMJ6nhGP6w=" + }, + "name": "xscale", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPQNQUnnGgkw=", + "_parent": { + "$ref": "AAAAAAGAPQMJ6nhGP6w=" + }, + "name": "yoffset", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPQNVK3oOyW0=", + "_parent": { + "$ref": "AAAAAAGAPQMJ6nhGP6w=" + }, + "name": "yscale", + "type": "" + } + ], + "operations": [ + { + "_type": "UMLOperation", + "_id": "AAAAAAGAPQP0jXviawc=", + "_parent": { + "$ref": "AAAAAAGAPQMJ6nhGP6w=" + }, + "name": "clone" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAPQP6OHwYjDU=", + "_parent": { + "$ref": "AAAAAAGAPQMJ6nhGP6w=" + }, + "name": "fromJSON" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAPQP8/nw8tdI=", + "_parent": { + "$ref": "AAAAAAGAPQMJ6nhGP6w=" + }, + "name": "toJSON" + } + ] + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAPQff+YT2kWw=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "TextSymbol", + "ownedElements": [ + { + "_type": "UMLGeneralization", + "_id": "AAAAAAGAPQhWsoWl3dc=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "source": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "target": { + "$ref": "AAAAAAGAO1MYeU/HxR0=" + } + }, + { + "_type": "UMLAssociation", + "_id": "AAAAAAGAPS6KpKbbg5c=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "end1": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAPS6KpKbc4jk=", + "_parent": { + "$ref": "AAAAAAGAPS6KpKbbg5c=" + }, + "reference": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "navigable": false + }, + "end2": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAPS6KpKbd/TA=", + "_parent": { + "$ref": "AAAAAAGAPS6KpKbbg5c=" + }, + "reference": { + "$ref": "AAAAAAGAPS3xX6LyqAQ=" + } + } + } + ], + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPSAICJA6v/o=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "name": "type", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPSAOIJCgc6M=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "name": "angle", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPSAQ2ZDiIF4=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "name": "backgroundColor", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPSATI5Ek4IM=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "name": "borderLineColor", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPSAVEZFmIR8=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "name": "borderLineSize", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPSAXEZGod8M=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "name": "color", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPSAZV5HqksU=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "name": "font", + "type": "Font" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPSAcR5Is1X4=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "name": "haloColor", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPSAeRZJuhG0=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "name": "haloSize", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPSAgi5KwfFQ=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "name": "horizontalAlignment", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPSAitpLy8xw=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "name": "kerning", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPSAk2pM04uU=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "name": "lineHeight", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPSAnFJN2K9s=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "name": "lineWidth", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPSApNZO4TrY=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "name": "rotated", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPSDpSpiG08U=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "name": "text", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPSDyipkENGA=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "name": "verticalAlignment", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPSD1fJlGhvw=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "name": "xoffset", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPSFIs5ttMYs=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "name": "yoffset", + "type": "" + } + ], + "operations": [ + { + "_type": "UMLOperation", + "_id": "AAAAAAGAPR/v2o8IG9I=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "name": "clone" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAPR/81I+SarM=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "name": "fromJSON" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAPR//MI/UW7w=", + "_parent": { + "$ref": "AAAAAAGAPQff+YT2kWw=" + }, + "name": "toJSON" + } + ] + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAPS3xX6LyqAQ=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "Font", + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPS4SfqOsEp4=", + "_parent": { + "$ref": "AAAAAAGAPS3xX6LyqAQ=" + }, + "name": "decoration", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPS4ZY6QSK9k=", + "_parent": { + "$ref": "AAAAAAGAPS3xX6LyqAQ=" + }, + "name": "family", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPS4b4KRUp0w=", + "_parent": { + "$ref": "AAAAAAGAPS3xX6LyqAQ=" + }, + "name": "size", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPS4eKqSWMIQ=", + "_parent": { + "$ref": "AAAAAAGAPS3xX6LyqAQ=" + }, + "name": "style", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAPS4gOqTYZto=", + "_parent": { + "$ref": "AAAAAAGAPS3xX6LyqAQ=" + }, + "name": "weight", + "type": "" + } + ], + "operations": [ + { + "_type": "UMLOperation", + "_id": "AAAAAAGAPS8boazWojk=", + "_parent": { + "$ref": "AAAAAAGAPS3xX6LyqAQ=" + }, + "name": "clone" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAPS8jDq1UJEA=", + "_parent": { + "$ref": "AAAAAAGAPS3xX6LyqAQ=" + }, + "name": "fromJSON" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAPS8lYK2li7A=", + "_parent": { + "$ref": "AAAAAAGAPS3xX6LyqAQ=" + }, + "name": "toJSON" + } + ] + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAP6S168jGsxA=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "Symbol3D", + "ownedElements": [ + { + "_type": "UMLGeneralization", + "_id": "AAAAAAGAP6VdPsoeetU=", + "_parent": { + "$ref": "AAAAAAGAP6S168jGsxA=" + }, + "source": { + "$ref": "AAAAAAGAP6S168jGsxA=" + }, + "target": { + "$ref": "AAAAAAGAO1MYeU/HxR0=" + } + }, + { + "_type": "UMLAssociation", + "_id": "AAAAAAGAP9XAwkPrzU4=", + "_parent": { + "$ref": "AAAAAAGAP6S168jGsxA=" + }, + "end1": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAP9XAwkPs9B8=", + "_parent": { + "$ref": "AAAAAAGAP9XAwkPrzU4=" + }, + "reference": { + "$ref": "AAAAAAGAP6S168jGsxA=" + }, + "navigable": false + }, + "end2": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAP9XAwkPtw8Y=", + "_parent": { + "$ref": "AAAAAAGAP9XAwkPrzU4=" + }, + "reference": { + "$ref": "AAAAAAGAP8/5/D2x644=" + } + } + } + ], + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAP6bx38w7uLM=", + "_parent": { + "$ref": "AAAAAAGAP6S168jGsxA=" + }, + "name": "type", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAP6bpOstslHY=", + "_parent": { + "$ref": "AAAAAAGAP6S168jGsxA=" + }, + "name": "styleOrigin", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAP6bvnMvqZyg=", + "_parent": { + "$ref": "AAAAAAGAP6S168jGsxA=" + }, + "name": "symbolLayers", + "type": { + "$ref": "AAAAAAGAP8/5/D2x644=" + } + } + ] + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAP8/5/D2x644=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "Symbol3DLayer", + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAP9VqWEBDC5M=", + "_parent": { + "$ref": "AAAAAAGAP8/5/D2x644=" + }, + "name": "type", + "type": "" + } + ], + "operations": [ + { + "_type": "UMLOperation", + "_id": "AAAAAAGAP9WNLEGF+44=", + "_parent": { + "$ref": "AAAAAAGAP8/5/D2x644=" + }, + "name": "fromJSON" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAP9WlJEMSNXw=", + "_parent": { + "$ref": "AAAAAAGAP8/5/D2x644=" + }, + "name": "toJSON" + } + ] + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAQHO4GV0oLfI=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "PointSymbol3D", + "ownedElements": [ + { + "_type": "UMLGeneralization", + "_id": "AAAAAAGAQHbWNI6eATI=", + "_parent": { + "$ref": "AAAAAAGAQHO4GV0oLfI=" + }, + "source": { + "$ref": "AAAAAAGAQHO4GV0oLfI=" + }, + "target": { + "$ref": "AAAAAAGAP6S168jGsxA=" + } + }, + { + "_type": "UMLAssociation", + "_id": "AAAAAAGAQHpofreL/lM=", + "_parent": { + "$ref": "AAAAAAGAQHO4GV0oLfI=" + }, + "end1": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQHpofreMF+Y=", + "_parent": { + "$ref": "AAAAAAGAQHpofreL/lM=" + }, + "reference": { + "$ref": "AAAAAAGAQHO4GV0oLfI=" + }, + "navigable": false + }, + "end2": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQHpofreNRd8=", + "_parent": { + "$ref": "AAAAAAGAQHpofreL/lM=" + }, + "reference": { + "$ref": "AAAAAAGAQHci6o8tBGM=" + } + } + }, + { + "_type": "UMLAssociation", + "_id": "AAAAAAGAQPx5Lwegxog=", + "_parent": { + "$ref": "AAAAAAGAQHO4GV0oLfI=" + }, + "end1": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQPx5LwehMeE=", + "_parent": { + "$ref": "AAAAAAGAQPx5Lwegxog=" + }, + "reference": { + "$ref": "AAAAAAGAQHO4GV0oLfI=" + }, + "navigable": false + }, + "end2": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQPx5LweiweU=", + "_parent": { + "$ref": "AAAAAAGAQPx5Lwegxog=" + }, + "reference": { + "$ref": "AAAAAAGAQPnVfurDxP4=" + } + } + }, + { + "_type": "UMLAssociation", + "_id": "AAAAAAGAQPyJKAjcvoE=", + "_parent": { + "$ref": "AAAAAAGAQHO4GV0oLfI=" + }, + "end1": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQPyJKAjdEa4=", + "_parent": { + "$ref": "AAAAAAGAQPyJKAjcvoE=" + }, + "reference": { + "$ref": "AAAAAAGAQHO4GV0oLfI=" + }, + "navigable": false + }, + "end2": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQPyJKAjecM4=", + "_parent": { + "$ref": "AAAAAAGAQPyJKAjcvoE=" + }, + "reference": { + "$ref": "AAAAAAGAQLns6Jmj0x4=" + } + } + } + ], + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQHPbk14qDNA=", + "_parent": { + "$ref": "AAAAAAGAQHO4GV0oLfI=" + }, + "name": "type", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQHPo018aeJo=", + "_parent": { + "$ref": "AAAAAAGAQHO4GV0oLfI=" + }, + "name": "callout", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQHPq7F96x14=", + "_parent": { + "$ref": "AAAAAAGAQHO4GV0oLfI=" + }, + "name": "styleOrigin", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQHPtAV/aljM=", + "_parent": { + "$ref": "AAAAAAGAQHO4GV0oLfI=" + }, + "name": "symbolLayers", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQHPuxGA6UBk=", + "_parent": { + "$ref": "AAAAAAGAQHO4GV0oLfI=" + }, + "name": "verticalOffset", + "type": "" + } + ], + "operations": [ + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQHYPZmRQTEw=", + "_parent": { + "$ref": "AAAAAAGAQHO4GV0oLfI=" + }, + "name": "clone" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQHYVz2Tm/qo=", + "_parent": { + "$ref": "AAAAAAGAQHO4GV0oLfI=" + }, + "name": "fromJSON" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQHYYN2VGn1k=", + "_parent": { + "$ref": "AAAAAAGAQHO4GV0oLfI=" + }, + "name": "toJSON" + } + ] + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAQHci6o8tBGM=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "IconSymbol3DLayer", + "ownedElements": [ + { + "_type": "UMLGeneralization", + "_id": "AAAAAAGAQHcyhZBm0hs=", + "_parent": { + "$ref": "AAAAAAGAQHci6o8tBGM=" + }, + "source": { + "$ref": "AAAAAAGAQHci6o8tBGM=" + }, + "target": { + "$ref": "AAAAAAGAP8/5/D2x644=" + } + } + ], + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQHiR5aDzLYY=", + "_parent": { + "$ref": "AAAAAAGAQHci6o8tBGM=" + }, + "name": "type", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQHiYP6GJhto=", + "_parent": { + "$ref": "AAAAAAGAQHci6o8tBGM=" + }, + "name": "anchor", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQHiaNaHpMeE=", + "_parent": { + "$ref": "AAAAAAGAQHci6o8tBGM=" + }, + "name": "anchorPosition", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQHicC6JJ2ps=", + "_parent": { + "$ref": "AAAAAAGAQHci6o8tBGM=" + }, + "name": "material", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQHidd6KpQY0=", + "_parent": { + "$ref": "AAAAAAGAQHci6o8tBGM=" + }, + "name": "outline", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQHifkKMJgeQ=", + "_parent": { + "$ref": "AAAAAAGAQHci6o8tBGM=" + }, + "name": "resource", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQHihOaNp1o4=", + "_parent": { + "$ref": "AAAAAAGAQHci6o8tBGM=" + }, + "name": "size", + "type": "" + } + ], + "operations": [ + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQHlBEamVlhM=", + "_parent": { + "$ref": "AAAAAAGAQHci6o8tBGM=" + }, + "name": "clone" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQHlHU6orzwA=", + "_parent": { + "$ref": "AAAAAAGAQHci6o8tBGM=" + }, + "name": "fromJSON" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQHlJbKqLtE0=", + "_parent": { + "$ref": "AAAAAAGAQHci6o8tBGM=" + }, + "name": "toJSON" + } + ] + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAQI6jF+ainB0=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "LineSymbol3D", + "ownedElements": [ + { + "_type": "UMLGeneralization", + "_id": "AAAAAAGAQJBZ8ACM7PY=", + "_parent": { + "$ref": "AAAAAAGAQI6jF+ainB0=" + }, + "source": { + "$ref": "AAAAAAGAQI6jF+ainB0=" + }, + "target": { + "$ref": "AAAAAAGAP6S168jGsxA=" + } + }, + { + "_type": "UMLAssociation", + "_id": "AAAAAAGAQJB91wHUuZ8=", + "_parent": { + "$ref": "AAAAAAGAQI6jF+ainB0=" + }, + "end1": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQJB91wHV5+E=", + "_parent": { + "$ref": "AAAAAAGAQJB91wHUuZ8=" + }, + "reference": { + "$ref": "AAAAAAGAQI6jF+ainB0=" + }, + "navigable": false + }, + "end2": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQJB91wHWZ0U=", + "_parent": { + "$ref": "AAAAAAGAQJB91wHUuZ8=" + }, + "reference": { + "$ref": "AAAAAAGAQI6qsOc0DIE=" + } + } + }, + { + "_type": "UMLAssociation", + "_id": "AAAAAAGAQQzoZWpmJZ0=", + "_parent": { + "$ref": "AAAAAAGAQI6jF+ainB0=" + }, + "end1": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQQzoZWpnhlg=", + "_parent": { + "$ref": "AAAAAAGAQQzoZWpmJZ0=" + }, + "reference": { + "$ref": "AAAAAAGAQI6jF+ainB0=" + }, + "navigable": false + }, + "end2": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQQzoZWposbQ=", + "_parent": { + "$ref": "AAAAAAGAQQzoZWpmJZ0=" + }, + "reference": { + "$ref": "AAAAAAGAQQuTLUb/9Rg=" + } + } + } + ], + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQI7RO+gvDaw=", + "_parent": { + "$ref": "AAAAAAGAQI6jF+ainB0=" + }, + "name": "type", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQI7YIujdTVQ=", + "_parent": { + "$ref": "AAAAAAGAQI6jF+ainB0=" + }, + "name": "styleOrigin", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQI7fHum1PPw=", + "_parent": { + "$ref": "AAAAAAGAQI6jF+ainB0=" + }, + "name": "symbolLayers", + "type": "" + } + ], + "operations": [ + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQI83Pu60uKU=", + "_parent": { + "$ref": "AAAAAAGAQI6jF+ainB0=" + }, + "name": "clone" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQI89iO9irzg=", + "_parent": { + "$ref": "AAAAAAGAQI6jF+ainB0=" + }, + "name": "fromJSON" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQI8/v+/RXtM=", + "_parent": { + "$ref": "AAAAAAGAQI6jF+ainB0=" + }, + "name": "toJSON" + } + ] + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAQI6qsOc0DIE=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "LineSymbol3DLayer", + "ownedElements": [ + { + "_type": "UMLGeneralization", + "_id": "AAAAAAGAQJBpFAEwA94=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc0DIE=" + }, + "source": { + "$ref": "AAAAAAGAQI6qsOc0DIE=" + }, + "target": { + "$ref": "AAAAAAGAP8/5/D2x644=" + } + } + ], + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQI/Ms/fm62A=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc0DIE=" + }, + "name": "type", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQI/SxfiUCXU=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc0DIE=" + }, + "name": "cap", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQI/U9/kDTG0=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc0DIE=" + }, + "name": "join", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQI/W6PlyuF4=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc0DIE=" + }, + "name": "marker", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQI/x4vseoP0=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc0DIE=" + }, + "name": "material", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQI/0MvuNWWU=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc0DIE=" + }, + "name": "pattern", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQI/2Efv8elc=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc0DIE=" + }, + "name": "size", + "type": "" + } + ], + "operations": [ + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQI+28vXcViw=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc0DIE=" + }, + "name": "clone" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQI/BU/bJXC8=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc0DIE=" + }, + "name": "fromJSON" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQI/Do/c45mg=", + "_parent": { + "$ref": "AAAAAAGAQI6qsOc0DIE=" + }, + "name": "toJSON" + } + ] + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAQJPNQDjoUDE=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "PolygonSymbol3D", + "ownedElements": [ + { + "_type": "UMLGeneralization", + "_id": "AAAAAAGAQJR3UUvMi3E=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "source": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "target": { + "$ref": "AAAAAAGAP6S168jGsxA=" + } + }, + { + "_type": "UMLAssociation", + "_id": "AAAAAAGAQKMnaHQbRW0=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "end1": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQKMnaHQc7Rs=", + "_parent": { + "$ref": "AAAAAAGAQKMnaHQbRW0=" + }, + "reference": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "navigable": false + }, + "end2": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQKMnaHQdqUs=", + "_parent": { + "$ref": "AAAAAAGAQKMnaHQbRW0=" + }, + "reference": { + "$ref": "AAAAAAGAQKIeqWLtb7A=" + } + } + }, + { + "_type": "UMLAssociation", + "_id": "AAAAAAGAQYq/foRzh3g=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "end1": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQYq/foR06rU=", + "_parent": { + "$ref": "AAAAAAGAQYq/foRzh3g=" + }, + "reference": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "navigable": false + }, + "end2": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQYq/foR197U=", + "_parent": { + "$ref": "AAAAAAGAQYq/foRzh3g=" + }, + "reference": { + "$ref": "AAAAAAGAQYqXdX+0wEk=" + } + } + }, + { + "_type": "UMLAssociation", + "_id": "AAAAAAGAQZEEMGQvP4A=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "end1": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQZEEMGQwxWs=", + "_parent": { + "$ref": "AAAAAAGAQZEEMGQvP4A=" + }, + "reference": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "navigable": false + }, + "end2": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQZEEMGQx3vs=", + "_parent": { + "$ref": "AAAAAAGAQZEEMGQvP4A=" + }, + "reference": { + "$ref": "AAAAAAGAQPnVfurDxP4=" + } + } + }, + { + "_type": "UMLAssociation", + "_id": "AAAAAAGAQZEYe2XL0XM=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "end1": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQZEYe2XM+rA=", + "_parent": { + "$ref": "AAAAAAGAQZEYe2XL0XM=" + }, + "reference": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "navigable": false + }, + "end2": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQZEYe2XNnz8=", + "_parent": { + "$ref": "AAAAAAGAQZEYe2XL0XM=" + }, + "reference": { + "$ref": "AAAAAAGAQQuTLUb/9Rg=" + } + } + }, + { + "_type": "UMLAssociation", + "_id": "AAAAAAGAQZE2+md/zbs=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "end1": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQZE2+meABCg=", + "_parent": { + "$ref": "AAAAAAGAQZE2+md/zbs=" + }, + "reference": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "navigable": false + }, + "end2": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQZE2+meB18I=", + "_parent": { + "$ref": "AAAAAAGAQZE2+md/zbs=" + }, + "reference": { + "$ref": "AAAAAAGAQHci6o8tBGM=" + } + } + }, + { + "_type": "UMLAssociation", + "_id": "AAAAAAGAQZOWEGpZGhg=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "end1": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQZOWEGpaZS4=", + "_parent": { + "$ref": "AAAAAAGAQZOWEGpZGhg=" + }, + "reference": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "navigable": false + }, + "end2": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQZOWEGpb1vk=", + "_parent": { + "$ref": "AAAAAAGAQZOWEGpZGhg=" + }, + "reference": { + "$ref": "AAAAAAGAQLns6Jmj0x4=" + } + } + }, + { + "_type": "UMLAssociation", + "_id": "AAAAAAGAQZO4TGvycxc=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "end1": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQZO4TGvzO6Q=", + "_parent": { + "$ref": "AAAAAAGAQZO4TGvycxc=" + }, + "reference": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "navigable": false + }, + "end2": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQZO4TGv03hE=", + "_parent": { + "$ref": "AAAAAAGAQZO4TGvycxc=" + }, + "reference": { + "$ref": "AAAAAAGAQI6qsOc0DIE=" + } + } + } + ], + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQJPvrzoyMNs=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "name": "type", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQJP6pjtAYNM=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "name": "styleOrigin", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQJP8/ju+xJc=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "name": "symbolLayers", + "type": "" + } + ], + "operations": [ + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQJQJTTy0Pz0=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "name": "clone" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQJQP+D16Vf8=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "name": "fromJSON" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQJQSWz34cwY=", + "_parent": { + "$ref": "AAAAAAGAQJPNQDjoUDE=" + }, + "name": "toJSON" + } + ] + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAQKIeqWLtb7A=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "FillSymbol3DLayer", + "ownedElements": [ + { + "_type": "UMLGeneralization", + "_id": "AAAAAAGAQKMeBnOSzgA=", + "_parent": { + "$ref": "AAAAAAGAQKIeqWLtb7A=" + }, + "source": { + "$ref": "AAAAAAGAQKIeqWLtb7A=" + }, + "target": { + "$ref": "AAAAAAGAP8/5/D2x644=" + } + } + ], + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQKKn5Gwwvc4=", + "_parent": { + "$ref": "AAAAAAGAQKIeqWLtb7A=" + }, + "name": "type", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQKKt/Wz2iEA=", + "_parent": { + "$ref": "AAAAAAGAQKIeqWLtb7A=" + }, + "name": "castShadows", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQKKv4210K3A=", + "_parent": { + "$ref": "AAAAAAGAQKIeqWLtb7A=" + }, + "name": "edges", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQKKymW3yL3A=", + "_parent": { + "$ref": "AAAAAAGAQKIeqWLtb7A=" + }, + "name": "material", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQKK0i25wkdY=", + "_parent": { + "$ref": "AAAAAAGAQKIeqWLtb7A=" + }, + "name": "outline", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQKK2bm7uffg=", + "_parent": { + "$ref": "AAAAAAGAQKIeqWLtb7A=" + }, + "name": "pattern", + "type": "" + } + ], + "operations": [ + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQKI2N2RPsfU=", + "_parent": { + "$ref": "AAAAAAGAQKIeqWLtb7A=" + }, + "name": "clone" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQKI9kGUVE0M=", + "_parent": { + "$ref": "AAAAAAGAQKIeqWLtb7A=" + }, + "name": "fromJSON" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQKI/4mWTMrg=", + "_parent": { + "$ref": "AAAAAAGAQKIeqWLtb7A=" + }, + "name": "toJSON" + } + ] + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAQLjRBoVK/Ro=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "LabelSymbol3D", + "ownedElements": [ + { + "_type": "UMLGeneralization", + "_id": "AAAAAAGAQLnZqZjVkdk=", + "_parent": { + "$ref": "AAAAAAGAQLjRBoVK/Ro=" + }, + "source": { + "$ref": "AAAAAAGAQLjRBoVK/Ro=" + }, + "target": { + "$ref": "AAAAAAGAP6S168jGsxA=" + } + }, + { + "_type": "UMLAssociation", + "_id": "AAAAAAGAQLsG/7AAptg=", + "_parent": { + "$ref": "AAAAAAGAQLjRBoVK/Ro=" + }, + "end1": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQLsG/7ABSMo=", + "_parent": { + "$ref": "AAAAAAGAQLsG/7AAptg=" + }, + "reference": { + "$ref": "AAAAAAGAQLjRBoVK/Ro=" + }, + "navigable": false + }, + "end2": { + "_type": "UMLAssociationEnd", + "_id": "AAAAAAGAQLsG/7ACCWw=", + "_parent": { + "$ref": "AAAAAAGAQLsG/7AAptg=" + }, + "reference": { + "$ref": "AAAAAAGAQLns6Jmj0x4=" + } + } + } + ], + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQLkJF4qC7uw=", + "_parent": { + "$ref": "AAAAAAGAQLjRBoVK/Ro=" + }, + "name": "type", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQLkPq4tgUdM=", + "_parent": { + "$ref": "AAAAAAGAQLjRBoVK/Ro=" + }, + "name": "callout", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQLkRqYvtqAE=", + "_parent": { + "$ref": "AAAAAAGAQLjRBoVK/Ro=" + }, + "name": "styleOrigin", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQLkT24x6g2s=", + "_parent": { + "$ref": "AAAAAAGAQLjRBoVK/Ro=" + }, + "name": "symbolLayers", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQLkWVo0H4Q8=", + "_parent": { + "$ref": "AAAAAAGAQLjRBoVK/Ro=" + }, + "name": "verticalOffset", + "type": "" + } + ], + "operations": [ + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQLjff4a4sxM=", + "_parent": { + "$ref": "AAAAAAGAQLjRBoVK/Ro=" + }, + "name": "clone" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQLjlyoeW4cw=", + "_parent": { + "$ref": "AAAAAAGAQLjRBoVK/Ro=" + }, + "name": "fromJSON" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQLjoBYgjCv8=", + "_parent": { + "$ref": "AAAAAAGAQLjRBoVK/Ro=" + }, + "name": "toJSON" + } + ] + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAQLns6Jmj0x4=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "TextSymbol3DLayer", + "ownedElements": [ + { + "_type": "UMLGeneralization", + "_id": "AAAAAAGAQLsTnLEG5Uo=", + "_parent": { + "$ref": "AAAAAAGAQLns6Jmj0x4=" + }, + "source": { + "$ref": "AAAAAAGAQLns6Jmj0x4=" + }, + "target": { + "$ref": "AAAAAAGAP8/5/D2x644=" + } + } + ], + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQLoWJ5tje4c=", + "_parent": { + "$ref": "AAAAAAGAQLns6Jmj0x4=" + }, + "name": "type", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQLocVpxB5AM=", + "_parent": { + "$ref": "AAAAAAGAQLns6Jmj0x4=" + }, + "name": "background", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQLofAJzO1GA=", + "_parent": { + "$ref": "AAAAAAGAQLns6Jmj0x4=" + }, + "name": "font", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQLog4Z1bzo4=", + "_parent": { + "$ref": "AAAAAAGAQLns6Jmj0x4=" + }, + "name": "halo", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQLojE53omX0=", + "_parent": { + "$ref": "AAAAAAGAQLns6Jmj0x4=" + }, + "name": "horizontalAlignment", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQLolVZ51Tdg=", + "_parent": { + "$ref": "AAAAAAGAQLns6Jmj0x4=" + }, + "name": "lineHeight", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQLonSp8CGas=", + "_parent": { + "$ref": "AAAAAAGAQLns6Jmj0x4=" + }, + "name": "material", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQLopjp+PrHs=", + "_parent": { + "$ref": "AAAAAAGAQLns6Jmj0x4=" + }, + "name": "size", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQLor6qAcWyY=", + "_parent": { + "$ref": "AAAAAAGAQLns6Jmj0x4=" + }, + "name": "text", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQLq7GahmsQQ=", + "_parent": { + "$ref": "AAAAAAGAQLns6Jmj0x4=" + }, + "name": "verticalAlignment", + "type": "" + } + ], + "operations": [ + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQLrMV6o4fWE=", + "_parent": { + "$ref": "AAAAAAGAQLns6Jmj0x4=" + }, + "name": "clone" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQLrSt6sWGnA=", + "_parent": { + "$ref": "AAAAAAGAQLns6Jmj0x4=" + }, + "name": "fromJSON" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQLrU4qujo+U=", + "_parent": { + "$ref": "AAAAAAGAQLns6Jmj0x4=" + }, + "name": "toJSON" + } + ] + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAQPnVfurDxP4=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "ObjectSymbol3DLayer", + "ownedElements": [ + { + "_type": "UMLGeneralization", + "_id": "AAAAAAGAQP3ZlkBMubY=", + "_parent": { + "$ref": "AAAAAAGAQPnVfurDxP4=" + }, + "source": { + "$ref": "AAAAAAGAQPnVfurDxP4=" + }, + "target": { + "$ref": "AAAAAAGAP8/5/D2x644=" + } + } + ], + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQPop+u2+iXY=", + "_parent": { + "$ref": "AAAAAAGAQPnVfurDxP4=" + }, + "name": "type", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQPozEe604dA=", + "_parent": { + "$ref": "AAAAAAGAQPnVfurDxP4=" + }, + "name": "anchor", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQPo2Gu9Q5Ck=", + "_parent": { + "$ref": "AAAAAAGAQPnVfurDxP4=" + }, + "name": "anchorPosition", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQPo4he/sG20=", + "_parent": { + "$ref": "AAAAAAGAQPnVfurDxP4=" + }, + "name": "castShadows", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQPo66/CIc7k=", + "_parent": { + "$ref": "AAAAAAGAQPnVfurDxP4=" + }, + "name": "depth", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQPo9LPEkQrk=", + "_parent": { + "$ref": "AAAAAAGAQPnVfurDxP4=" + }, + "name": "heading", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQPo/TvHAQDk=", + "_parent": { + "$ref": "AAAAAAGAQPnVfurDxP4=" + }, + "name": "height", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQPpBxPJcIdQ=", + "_parent": { + "$ref": "AAAAAAGAQPnVfurDxP4=" + }, + "name": "material", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQPpEefL4VGc=", + "_parent": { + "$ref": "AAAAAAGAQPnVfurDxP4=" + }, + "name": "resource", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQPsGafyFSfs=", + "_parent": { + "$ref": "AAAAAAGAQPnVfurDxP4=" + }, + "name": "roll", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQPsIyv0hvRE=", + "_parent": { + "$ref": "AAAAAAGAQPnVfurDxP4=" + }, + "name": "tilt", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQPsLH/2976o=", + "_parent": { + "$ref": "AAAAAAGAQPnVfurDxP4=" + }, + "name": "width", + "type": "" + } + ] + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAQQuTLUb/9Rg=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "PathSymbol3DLayer", + "ownedElements": [ + { + "_type": "UMLGeneralization", + "_id": "AAAAAAGAQQz8x230K8E=", + "_parent": { + "$ref": "AAAAAAGAQQuTLUb/9Rg=" + }, + "source": { + "$ref": "AAAAAAGAQQuTLUb/9Rg=" + }, + "target": { + "$ref": "AAAAAAGAP8/5/D2x644=" + } + } + ], + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQQvIck2jTQg=", + "_parent": { + "$ref": "AAAAAAGAQQuTLUb/9Rg=" + }, + "name": "type", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQQvOlU7J+Js=", + "_parent": { + "$ref": "AAAAAAGAQQuTLUb/9Rg=" + }, + "name": "anchor", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQQvRWk+D8Kk=", + "_parent": { + "$ref": "AAAAAAGAQQuTLUb/9Rg=" + }, + "name": "cap", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQQvUBFA9SC8=", + "_parent": { + "$ref": "AAAAAAGAQQuTLUb/9Rg=" + }, + "name": "castShadows", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQQvWAFD3ufw=", + "_parent": { + "$ref": "AAAAAAGAQQuTLUb/9Rg=" + }, + "name": "height", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQQvYoVGxGiQ=", + "_parent": { + "$ref": "AAAAAAGAQQuTLUb/9Rg=" + }, + "name": "join", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQQvaulJrSXY=", + "_parent": { + "$ref": "AAAAAAGAQQuTLUb/9Rg=" + }, + "name": "material", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQQvdLlMlZuI=", + "_parent": { + "$ref": "AAAAAAGAQQuTLUb/9Rg=" + }, + "name": "profile", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQQyXzmQCWwQ=", + "_parent": { + "$ref": "AAAAAAGAQQuTLUb/9Rg=" + }, + "name": "profileRotation", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQQyayGS8q5c=", + "_parent": { + "$ref": "AAAAAAGAQQuTLUb/9Rg=" + }, + "name": "width", + "type": "" + } + ], + "operations": [ + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQQvq6VS33RQ=", + "_parent": { + "$ref": "AAAAAAGAQQuTLUb/9Rg=" + }, + "name": "clone" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQQvyP1Xdy/A=", + "_parent": { + "$ref": "AAAAAAGAQQuTLUb/9Rg=" + }, + "name": "fromJSON" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQQv1gFaXIyU=", + "_parent": { + "$ref": "AAAAAAGAQQuTLUb/9Rg=" + }, + "name": "toJSON" + } + ] + }, + { + "_type": "UMLClass", + "_id": "AAAAAAGAQYqXdX+0wEk=", + "_parent": { + "$ref": "AAAAAAFF+qBWK6M3Z8Y=" + }, + "name": "ExtrudeSymbol3DLayer", + "ownedElements": [ + { + "_type": "UMLGeneralization", + "_id": "AAAAAAGAQYrN7oX36Ng=", + "_parent": { + "$ref": "AAAAAAGAQYqXdX+0wEk=" + }, + "source": { + "$ref": "AAAAAAGAQYqXdX+0wEk=" + }, + "target": { + "$ref": "AAAAAAGAP8/5/D2x644=" + } + } + ], + "attributes": [ + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQYrs74espQ8=", + "_parent": { + "$ref": "AAAAAAGAQYqXdX+0wEk=" + }, + "name": "type", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQYr0SYkCuFQ=", + "_parent": { + "$ref": "AAAAAAGAQYqXdX+0wEk=" + }, + "name": "castShadows", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQYr27InaovU=", + "_parent": { + "$ref": "AAAAAAGAQYqXdX+0wEk=" + }, + "name": "edges", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQYr5XIqy5mU=", + "_parent": { + "$ref": "AAAAAAGAQYqXdX+0wEk=" + }, + "name": "material", + "type": "" + }, + { + "_type": "UMLAttribute", + "_id": "AAAAAAGAQYr+RIuK/FY=", + "_parent": { + "$ref": "AAAAAAGAQYqXdX+0wEk=" + }, + "name": "size", + "type": "" + } + ], + "operations": [ + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQYt7S5Rx0RQ=", + "_parent": { + "$ref": "AAAAAAGAQYqXdX+0wEk=" + }, + "name": "clone" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQYuCRZXHU2w=", + "_parent": { + "$ref": "AAAAAAGAQYqXdX+0wEk=" + }, + "name": "fromJSON" + }, + { + "_type": "UMLOperation", + "_id": "AAAAAAGAQYuFBpaftPw=", + "_parent": { + "$ref": "AAAAAAGAQYqXdX+0wEk=" + }, + "name": "toJSON" + } + ] + } + ] + } + ] +} \ No newline at end of file diff --git a/src/service/utils/index.js b/src/service/utils/index.js new file mode 100644 index 000000000..6770237a0 --- /dev/null +++ b/src/service/utils/index.js @@ -0,0 +1,2 @@ +import { TileInfo, TileResolution } from './tile'; +export { TileInfo, TileResolution }; diff --git a/src/service/utils/tile/TileInfo.js b/src/service/utils/tile/TileInfo.js new file mode 100644 index 000000000..4bbb3f6b3 --- /dev/null +++ b/src/service/utils/tile/TileInfo.js @@ -0,0 +1,108 @@ +import xml from 'fast-xml-parser'; + +import { IgsServiceEnum, IgsServiceType } from '../../Igserver/common/IgsServiceType'; +import { PortalServiceEnum, PortalServiceType } from '../../Portal/PortalServiceType'; + +import { IgsServiceParse } from '../../Igserver/common/IgsServiceParse'; +import { PortalServiceParse } from '../../Portal/PortalServiceParse'; + +import { TileResolution } from './TileResolution'; +import { TileScale } from './TileScale'; + +const XmlFormat = [IgsServiceEnum.WMS, IgsServiceEnum.WMTS, IgsServiceEnum.WFS, IgsServiceEnum.WCS, PortalServiceEnum.WMTS, PortalServiceEnum.WMS]; + +/** + * @author 基础平台-潘卓然 + * @description 通过比例尺或者分辨率来计算是否是对应的瓦片错级 + * @example + let tileinfo = new TileInfo(); + let zoomOffset = await tileinfo.getZoomOffset( + IgsServiceEnum.WMTS, // IgsServiceEnum.IGSRestTile PortalServiceEnum.WMTS PortalServiceEnum.IGSTile + "localhost", + "6163", + "epsg_standard" + ); + */ +export class TileInfo { + constructor(options) { + let option = options || {}; + const { ip, port, serverName } = option; + this.ip = ip; + this.port = port; + this.serverName = serverName; + } + + async getZoomOffset(type, ip, port, serverName, options) { + options = options || {}; + let { mapmode = "mapboxgl", tileschame = "EPSG:3587", tilesize = 256 } = options; + let zoomoffset = 0; + ip = ip || this.ip; + port = port || this.port; + serverName = serverName || this.serverName; + + let isPortal = false; + let isIGServer = false; + let isJson = true; + + IgsServiceType.forEach((s) => { + if (s.type === type) { + isIGServer = true; + if (XmlFormat.indexOf(type) >= 0) { + isJson = false; + } + } + }); + PortalServiceType.forEach((s) => { + if (s.type === type) { + isPortal = true; + if (XmlFormat.indexOf(type) >= 0) { + isJson = false; + } + } + }); + + if (isPortal) { + this.parse = new PortalServiceParse(); + } else if (isIGServer) { + this.parse = new IgsServiceParse(); + } + if (this.parse) { + let capability = this.parse.GetCapabilities(type, ip, port, serverName); + if (isJson) { + try { + let res = await fetch(capability); + let json = await res.json(); + let util = new TileResolution(); + const { TileInfo2 } = json; + const { tileInfo } = TileInfo2; + zoomoffset = util.getZoomOffsetByTileInfo(tileInfo); + } catch (error) { } + } else { + let res = await fetch(capability); + let text = await res.text(); + let obj = xml.getTraversalObj(text, {}); + let json = xml.convertToJson(obj, {}); + let tms = json.Capabilities.Contents.TileMatrixSet; + let TileMatrixSet = tms[tms.length - 1]; + let tmsName = TileMatrixSet['ows:Identifier']; + let tmx = TileMatrixSet.TileMatrix; + let tmxobj = tmx && tmx.length > 0 ? tmx[0] : tmx; + let tmxname = tmxobj['ows:Identifier']; + let exp = new RegExp(/EPSG:[0-9]*/); + let schame = exp.exec(tmxname); + tileschame = schame && schame.length > 0 ? schame[0] : tileschame; + let tmxlevels = tmxname.split(`${tmsName}:`) + let tmxlevel = tmxlevels && tmxlevels.length > 1 ? parseInt(tmxlevels[1]) : 0; + let scale = tmxobj.ScaleDenominator; + let tileInfo = { lods: [{ resolution: scale, level: tmxlevel }] }; + let util = new TileScale(); + let isCesium = mapmode == "cesium"; + zoomoffset = util.getZoomOffsetByTileInfo(tileInfo, isCesium, tilesize, tileschame); + } + } + + return zoomoffset; + } +} + +export default TileInfo; diff --git a/src/service/utils/tile/TileResolution.js b/src/service/utils/tile/TileResolution.js new file mode 100644 index 000000000..23e7d3930 --- /dev/null +++ b/src/service/utils/tile/TileResolution.js @@ -0,0 +1,104 @@ +/** + * @author 基础平台-龚瑞强 + * @description 针对不同分辨率来计算对应的瓦片错级 + */ +export class TileResolution { + constructor() { + /** + * key：瓦片尺寸 “256,512,1024” + * val: 层级与分辨关系数组 + */ + this.levelResolutionToTileSizes = {}; + } + + // 赤道周长（单位：m） + static get EQUATOR_PERIMTER() { + return 6378137; + } + + /** + * 通过瓦片大小获取层级与分辨关系的数组 + * @param {*} tileSize 瓦片尺寸，三维用的瓦片尺寸为512的levelResolution数组 + * @returns 层级与分辨关系的数组 + */ + getLevelResolutionByTileSize(tileSize) { + if (!this.levelResolutionToTileSizes[tileSize]) { + const arr = []; + for (let level = 0; level <= 24; level++) { + const r = TileResolution.EQUATOR_PERIMTER; // 赤道半径 + const resolutionOnTheEquator = 360 / (tileSize * 2 ** level); + arr.push({ + level, + resolution: resolutionOnTheEquator + }); + } + this.levelResolutionToTileSizes[tileSize] = arr; + } + return this.levelResolutionToTileSizes[tileSize]; + } + + /** + * 获取cesium层级与分辨率关系的数组 + * @returns 层级与分辨率关系的数组 + */ + getLevelResolutionCesium() { + return this.getLevelResolutionByTileSize(512); + } + + /** + * 通过分辨率获取其在地图里面对应的层级 + * @param {number} resolution 当前层级分辨率 + * @param {Array>} levelResolutions 地图的层级与最大分辨率的对应关系 + * @returns 当前分辨对应地图里面的层级 + */ + getNearLevel(resolution, levelResolutions) { + const levelResolutionsTemp = JSON.parse(JSON.stringify(levelResolutions)); + const nearlevel = levelResolutionsTemp.sort(function (a, b) { + return Math.abs(a.resolution - resolution) - Math.abs(b.resolution - resolution); + })[0].level; + return nearlevel; + } + + /** + * 通过分辨率来计算偏移量 + * @param {number} resolution 当前层级分辨率 + * @param {Array>} levelResolutions 当前层级与分辨率关系数组 + * @param {number} levelValue 初始层级 + * @returns 偏移量 + */ + getZoomOffsetByResolution({ resolution, levelResolutions, levelValue }) { + // 获取当前分辨率对应cesium里面的层级，计算偏移量 + const level = this.getNearLevel(resolution, levelResolutions); + const zoomOffset = levelValue - level; + + return zoomOffset; + } + + /** + * 通过瓦片信息来计算偏移量 + * @param {number} tileInfo 瓦片信息 + * @param {boolean} isCesium 如果是三维图层，则不需要通过size去计算层级与瓦片的数组 + * @returns 偏移量 + */ + getZoomOffsetByTileInfo(tileInfo, isCesium = false, tileSize = 256) { + let levelResolutions = []; + const lodBegin = tileInfo.lods[0]; + if (!isCesium) { + tileSize = tileSize || 256; + if (tileInfo.size && tileInfo.size.length > 0) { + tileSize = tileInfo.size[0]; + } + levelResolutions = this.getLevelResolutionByTileSize(tileSize); + } else { + levelResolutions = this.getLevelResolutionCesium(); + } + let zoomOffset = this.getZoomOffsetByResolution({ + resolution: lodBegin.resolution, + levelResolutions: levelResolutions, + levelValue: lodBegin.level + }); + + return zoomOffset; + } +} +export default TileResolution; diff --git a/src/service/utils/tile/TileScale.js b/src/service/utils/tile/TileScale.js new file mode 100644 index 000000000..90c5d2cf4 --- /dev/null +++ b/src/service/utils/tile/TileScale.js @@ -0,0 +1,120 @@ +/** + * @author 基础平台-王魁帅 + * @description 针对不同比例尺来计算对应的瓦片错级 + */ +export class TileScale { + constructor() { + /** + * key：瓦片尺寸 “256,512,1024” + * val: 层级与分辨关系数组 + */ + this.levelScales = {}; + } + + // 赤道周长（单位：m） + static ZERO_SCALE(tileschame) { + let scale = 295829355.45 * 2; + + switch (tileschame) { + case 'EPSG:3857': + case '3857': + scale = 295829355.45 * 2 + break; + case 'EPSG:4326': + case '4326': + case 'EPSG:4490': + case '4490': + case 'EPSG:4610': + case '4610': + scale = 295829355.45; + break; + } + return scale; + } + + /** + * 通过瓦片大小获取层级与分辨关系的数组 + * @param {*} tileSize 瓦片尺寸，三维用的瓦片尺寸为512的levelResolution数组 + * @returns 层级与分辨关系的数组 + */ + getLevelScale(tileSize, tileschame) { + if (!this.levelScales[tileSize]) { + const arr = []; + for (let level = 0; level <= 24; level++) { + const zero = TileScale.ZERO_SCALE(tileschame); + const resolutionOnTheEquator = zero / 2 ** level; + arr.push({ + level, + resolution: resolutionOnTheEquator + }); + } + this.levelScales[tileSize] = arr; + } + return this.levelScales[tileSize]; + } + + /** + * 获取cesium层级与分辨率关系的数组 + * @returns 层级与分辨率关系的数组 + */ + getLevelScaleCesium(tileschame) { + return this.getLevelScale(512, tileschame); + } + + /** + * 通过分辨率获取其在地图里面对应的层级 + * @param {number} resolution 当前层级分辨率 + * @param {Array>} levelResolutions 地图的层级与最大分辨率的对应关系 + * @returns 当前分辨对应地图里面的层级 + */ + getNearLevel(resolution, levelResolutions) { + const levelResolutionsTemp = JSON.parse(JSON.stringify(levelResolutions)); + const nearlevel = levelResolutionsTemp.sort(function (a, b) { + return Math.abs(a.resolution - resolution) - Math.abs(b.resolution - resolution); + })[0].level; + return nearlevel; + } + + /** + * 通过分辨率来计算偏移量 + * @param {number} resolution 当前层级分辨率 + * @param {Array>} levelResolutions 当前层级与分辨率关系数组 + * @param {number} levelValue 初始层级 + * @returns 偏移量 + */ + getZoomOffsetByScale({ resolution, levelResolutions, levelValue }) { + // 获取当前分辨率对应cesium里面的层级，计算偏移量 + const level = this.getNearLevel(resolution, levelResolutions); + const zoomOffset = levelValue - level; + + return zoomOffset; + } + + /** + * 通过瓦片信息来计算偏移量 + * @param {number} tileInfo 瓦片信息 + * @param {boolean} isCesium 如果是三维图层，则不需要通过size去计算层级与瓦片的数组 + * @returns 偏移量 + */ + getZoomOffsetByTileInfo(tileInfo, isCesium = false, tileSize = 256, tileschame = 'EPSG:3857') { + let levelResolutions = []; + const lodBegin = tileInfo.lods[0]; + if (!isCesium) { + tileSize = tileSize || 256; + if (tileInfo.size && tileInfo.size.length > 0) { + tileSize = tileInfo.size[0]; + } + levelResolutions = this.getLevelScale(tileSize, tileschame); + } else { + levelResolutions = this.getLevelScaleCesium(tileschame); + } + let zoomOffset = this.getZoomOffsetByScale({ + resolution: lodBegin.resolution, + levelResolutions: levelResolutions, + levelValue: lodBegin.level + }); + + return zoomOffset; + } +} +export default TileScale; diff --git a/src/service/utils/tile/index.js b/src/service/utils/tile/index.js new file mode 100644 index 000000000..2c7a95c05 --- /dev/null +++ b/src/service/utils/tile/index.js @@ -0,0 +1,4 @@ +import { TileInfo } from './TileInfo'; +import { TileResolution } from './TileResolution'; + +export { TileInfo, TileResolution }; diff --git a/src/service/webpack/service-debug-config.js b/src/service/webpack/service-debug-config.js index 045fc84d7..d28aaf02b 100644 --- a/src/service/webpack/service-debug-config.js +++ b/src/service/webpack/service-debug-config.js @@ -11,7 +11,7 @@ module.exports = { output: { path: path.join(__dirname, '..', 'dist-libs'), //打包后的文件存放的地方 filename: 'webclient-es6-service.js', //打包后输出文件的文件名 - libraryTarget: 'commonjs' + libraryTarget: 'umd' }, externals: {}, module: { diff --git a/src/service/webpack/service-release-config.js b/src/service/webpack/service-release-config.js index 42bfd27bb..620713a92 100644 --- a/src/service/webpack/service-release-config.js +++ b/src/service/webpack/service-release-config.js @@ -12,7 +12,7 @@ module.exports = { output: { path: path.join(__dirname, '..', 'dist-libs'), //打包后的文件存放的地方 filename: 'webclient-es6-service.min.js', //打包后输出文件的文件名 - libraryTarget: 'commonjs' + libraryTarget: 'umd' }, devtool: 'sourcemap', //生成用来调试的map externals: {}, @@ -49,4 +49,4 @@ module.exports = { } }) ] -}; +}; \ No newline at end of file diff --git a/website/README.md b/website/README.md index eb1831490..b0cde491b 100644 --- a/website/README.md +++ b/website/README.md @@ -116,7 +116,6 @@ yarn build ### 1. Windows > 对于 Windows 2008 后（包括 2008）的版本，直接使用 IIS 将 website/dist 目录发布到 IIS 服务中即可正常使用。 - #### MIME | 后缀 | 类型 | @@ -140,6 +139,7 @@ yarn build #### IIS WebConfig > 为了解决 jsdoc 在 window 下的`IIS请求筛选模块被配置为拒绝包含双重转义序列的请求`，需要设置以下安全策略 +web.config 文件如下： ```xml diff --git a/website/package.json b/website/package.json index 0193180a4..e258348ce 100644 --- a/website/package.json +++ b/website/package.json @@ -1,6 +1,6 @@ { "name": "webclient-javascript-website", - "version": "10.5.0", + "version": "10.5.5", "private": true, "scripts": { "start": "npm run serve", @@ -16,11 +16,11 @@ "element-ui": "^2.12.0", "github-markdown-css": "^4.0.0", "js-cookie": "^2.2.1", - "less": "^3.10.3", - "less-loader": "^5.0.0", - "node-sass": "^4.13.0", + "less": "3.12.2", + "less-loader": "7.0.2", + "node-sass": "4.12.0", "prismjs": "^1.20.0", - "sass-loader": "^8.0.0", + "sass-loader": "10.1.1", "splitpanes": "^2.0.0", "vue": "^2.6.10", "vue-codemirror": "^4.0.6", @@ -63,4 +63,4 @@ "> 1%", "last 2 versions" ] -} \ No newline at end of file +} diff --git a/website/public/static/assets/guid/vectorStep1.png b/website/public/static/assets/guid/vectorStep1.png new file mode 100644 index 000000000..6f5f69e6e Binary files /dev/null and b/website/public/static/assets/guid/vectorStep1.png differ diff --git a/website/public/static/assets/guid/vectorStep2.png b/website/public/static/assets/guid/vectorStep2.png new file mode 100644 index 000000000..b75915196 Binary files /dev/null and b/website/public/static/assets/guid/vectorStep2.png differ diff --git a/website/public/static/assets/guid/vectorStep3.png b/website/public/static/assets/guid/vectorStep3.png new file mode 100644 index 000000000..be18762ed Binary files /dev/null and b/website/public/static/assets/guid/vectorStep3.png differ diff --git a/website/public/static/assets/guid/vectorStep4.png b/website/public/static/assets/guid/vectorStep4.png new file mode 100644 index 000000000..d4acf599f Binary files /dev/null and b/website/public/static/assets/guid/vectorStep4.png differ diff --git a/website/public/static/assets/guid/vectorStep5.png b/website/public/static/assets/guid/vectorStep5.png new file mode 100644 index 000000000..2fdbb3003 Binary files /dev/null and b/website/public/static/assets/guid/vectorStep5.png differ diff --git a/website/public/static/assets/guid/vectorStep6.png b/website/public/static/assets/guid/vectorStep6.png new file mode 100644 index 000000000..142b28469 Binary files /dev/null and b/website/public/static/assets/guid/vectorStep6.png differ diff --git a/website/public/static/assets/guid/vectorStep7.png b/website/public/static/assets/guid/vectorStep7.png new file mode 100644 index 000000000..e852bf2c4 Binary files /dev/null and b/website/public/static/assets/guid/vectorStep7.png differ diff --git a/website/public/static/assets/logo/mapgis_logo.png b/website/public/static/assets/logo/mapgis_logo.png new file mode 100644 index 000000000..29e2a3a0c Binary files /dev/null and b/website/public/static/assets/logo/mapgis_logo.png differ diff --git a/website/public/static/demo/cesium-new/example/analysis/analysis-animation.htm b/website/public/static/demo/cesium-new/example/analysis/analysis-animation.htm new file mode 100644 index 000000000..9fb058f1c --- /dev/null +++ b/website/public/static/demo/cesium-new/example/analysis/analysis-animation.htm @@ -0,0 +1,266 @@ + + + + + + + 动画漫游 + + + + + + + + + +
+
+ + + +
+
+ +
+ + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
漫游方式 + + + + +
俯仰角 + + +
方位角 + + +
距离 + + +
播放速度 + + +
+
+ + + + \ No newline at end of file diff --git a/website/public/static/demo/cesium-new/example/analysis/analysis-aspectAnalysis-normal.htm b/website/public/static/demo/cesium-new/example/analysis/analysis-aspectAnalysis-normal.htm new file mode 100644 index 000000000..6ec1148d9 --- /dev/null +++ b/website/public/static/demo/cesium-new/example/analysis/analysis-aspectAnalysis-normal.htm @@ -0,0 +1,107 @@ + + + + + + 坡向分析 + + + + + + + + + +
+ + diff --git a/website/public/static/demo/cesium-new/example/analysis/analysis-aspectAnalysis.htm b/website/public/static/demo/cesium-new/example/analysis/analysis-aspectAnalysis.htm new file mode 100644 index 000000000..a449b7e24 --- /dev/null +++ b/website/public/static/demo/cesium-new/example/analysis/analysis-aspectAnalysis.htm @@ -0,0 +1,79 @@ + + + + + + + 坡向分析 + + + + + + + + + +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/cesium-new/example/analysis/analysis-cube.htm b/website/public/static/demo/cesium-new/example/analysis/analysis-cube.htm new file mode 100644 index 000000000..752e51bdf --- /dev/null +++ b/website/public/static/demo/cesium-new/example/analysis/analysis-cube.htm @@ -0,0 +1,234 @@ + + + + + + + 填挖方计算 + + + + + + + + + + +
+
+

参数

+ + + + + + + + + + + + + + + +
x方向采样点个数 + +
y方向采样点个数 + +
填挖规整高度 + +
+
+
+

填挖结果

+ + + + + + + + + + + + + + + + + + + +
高程范围： + +
表面积： + +
挖体积： + +
填体积： + +
+
+
+ + + \ No newline at end of file diff --git a/website/public/static/demo/cesium-new/example/analysis/analysis-dynamiccut.htm b/website/public/static/demo/cesium-new/example/analysis/analysis-dynamiccut.htm new file mode 100644 index 000000000..94797a9ed --- /dev/null +++ b/website/public/static/demo/cesium-new/example/analysis/analysis-dynamiccut.htm @@ -0,0 +1,104 @@ + + + + + + + 动态剖切 + + + + + + + + + +
+
+ + 剖切距离： + +
+
+ + + \ No newline at end of file diff --git a/website/public/static/demo/cesium-new/example/analysis/analysis-excavate.htm b/website/public/static/demo/cesium-new/example/analysis/analysis-excavate.htm new file mode 100644 index 000000000..b36245112 --- /dev/null +++ b/website/public/static/demo/cesium-new/example/analysis/analysis-excavate.htm @@ -0,0 +1,132 @@ + + + + + + + 开挖分析 + + + + + + + + + +
+
+ + 开挖深度： + +
+
+ + + \ No newline at end of file diff --git a/website/public/static/demo/cesium-new/example/analysis/analysis-explosion.htm b/website/public/static/demo/cesium-new/example/analysis/analysis-explosion.htm new file mode 100644 index 000000000..de6bec5d3 --- /dev/null +++ b/website/public/static/demo/cesium-new/example/analysis/analysis-explosion.htm @@ -0,0 +1,92 @@ + + + + + + + 爆炸分析 + + + + + + + + + +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/cesium-new/example/analysis/analysis-floor.htm b/website/public/static/demo/cesium-new/example/analysis/analysis-floor.htm new file mode 100644 index 000000000..1c061bd80 --- /dev/null +++ b/website/public/static/demo/cesium-new/example/analysis/analysis-floor.htm @@ -0,0 +1,207 @@ + + + + + + + 洪水淹没分析 + + + + + + + + + + +
+
+

参数

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
淹没最底高度 + +
淹没最高高度 + +
洪水上涨速度 + +
波浪个数 + +
波浪速度 + +
波浪高度 + +
+
+ + + +
+
+
+
+ + + \ No newline at end of file diff --git a/website/public/static/demo/cesium-new/example/analysis/analysis-modelflatten.htm b/website/public/static/demo/cesium-new/example/analysis/analysis-modelflatten.htm new file mode 100644 index 000000000..4b4037d00 --- /dev/null +++ b/website/public/static/demo/cesium-new/example/analysis/analysis-modelflatten.htm @@ -0,0 +1,123 @@ + + + + + + + 模型压平 + + + + + + + + + +
+ +
+ + +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/cesium-new/example/analysis/analysis-rollershutters.htm b/website/public/static/demo/cesium-new/example/analysis/analysis-rollershutters.htm new file mode 100644 index 000000000..d9bea7081 --- /dev/null +++ b/website/public/static/demo/cesium-new/example/analysis/analysis-rollershutters.htm @@ -0,0 +1,129 @@ + + + + + + + 动态卷帘 + + + + + + + + + + +
+
+ + 卷帘距离： + +
+
+ + + \ No newline at end of file diff --git a/website/public/static/demo/cesium-new/example/analysis/analysis-sceneprojection copy.htm b/website/public/static/demo/cesium-new/example/analysis/analysis-sceneprojection copy.htm new file mode 100644 index 000000000..b0d1484e8 --- /dev/null +++ b/website/public/static/demo/cesium-new/example/analysis/analysis-sceneprojection copy.htm @@ -0,0 +1,277 @@ + + + + + + 场景投放 + + + + + + + + + + +
+ + + + + + + +
+
+ 鼠标左键选择观察点 +
+ 点击鼠标右键完成场景投放 +
+
+ + + \ No newline at end of file diff --git a/website/public/static/demo/cesium-new/example/analysis/analysis-sceneprojection.htm b/website/public/static/demo/cesium-new/example/analysis/analysis-sceneprojection.htm new file mode 100644 index 000000000..5d95240f0 --- /dev/null +++ b/website/public/static/demo/cesium-new/example/analysis/analysis-sceneprojection.htm @@ -0,0 +1,149 @@ + + + + + + + 场景投放 + + + + + + + + + +
+
+ 鼠标左键选择观察点 +
+ 点击鼠标左键或右键完成场景投放 +
+
+ + + \ No newline at end of file diff --git a/website/public/static/demo/cesium-new/example/analysis/analysis-skyline.htm b/website/public/static/demo/cesium-new/example/analysis/analysis-skyline.htm new file mode 100644 index 000000000..d1a41cd20 --- /dev/null +++ b/website/public/static/demo/cesium-new/example/analysis/analysis-skyline.htm @@ -0,0 +1,102 @@ + + + + + + + 天际线分析 + + + + + + + + + +
+
+ 鼠标左键点击执行天际线分析 +
+
+ + + \ No newline at end of file diff --git a/website/public/static/demo/cesium-new/example/analysis/analysis-slopeAnalysis-normal.htm b/website/public/static/demo/cesium-new/example/analysis/analysis-slopeAnalysis-normal.htm new file mode 100644 index 000000000..ebff391d3 --- /dev/null +++ b/website/public/static/demo/cesium-new/example/analysis/analysis-slopeAnalysis-normal.htm @@ -0,0 +1,107 @@ + + + + + + 坡度分析 + + + + + + + + + +
+ + diff --git a/website/public/static/demo/cesium-new/example/analysis/analysis-slopeAnalysis.htm b/website/public/static/demo/cesium-new/example/analysis/analysis-slopeAnalysis.htm new file mode 100644 index 000000000..4aa7fd363 --- /dev/null +++ b/website/public/static/demo/cesium-new/example/analysis/analysis-slopeAnalysis.htm @@ -0,0 +1,79 @@ + + + + + + + 坡度分析 + + + + + + + + + +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/cesium-new/example/analysis/analysis-visibility.htm b/website/public/static/demo/cesium-new/example/analysis/analysis-visibility.htm new file mode 100644 index 000000000..3ac30ba29 --- /dev/null +++ b/website/public/static/demo/cesium-new/example/analysis/analysis-visibility.htm @@ -0,0 +1,165 @@ + + + + + + + 通视分析 + + + + + + + + + + + +
+
+ 鼠标左键选择起点 +
+ 右键选择结束点并执行通视分析 +
+
+ + + \ No newline at end of file diff --git a/website/public/static/demo/cesium-new/example/analysis/analysis-visiblerange.htm b/website/public/static/demo/cesium-new/example/analysis/analysis-visiblerange.htm new file mode 100644 index 000000000..148a4656b --- /dev/null +++ b/website/public/static/demo/cesium-new/example/analysis/analysis-visiblerange.htm @@ -0,0 +1,163 @@ + + + + + + + 可视域分析 + + + + + + + + + + +
+
+ 鼠标左键选择观察点 +
+ 点击鼠标左键或右键完成可视域分析 +
+
+ + + \ No newline at end of file diff --git a/website/public/static/demo/cesium-new/example/m3d/m3d-instance.htm b/website/public/static/demo/cesium-new/example/m3d/m3d-instance.htm new file mode 100644 index 000000000..9fb058f1c --- /dev/null +++ b/website/public/static/demo/cesium-new/example/m3d/m3d-instance.htm @@ -0,0 +1,266 @@ + + + + + + + 动画漫游 + + + + + + + + + +
+
+ + + +
+
+ +
+ + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
漫游方式 + + + + +
俯仰角 + + +
方位角 + + +
距离 + + +
播放速度 + + +
+
+ + + + \ No newline at end of file diff --git a/website/public/static/demo/cesium-new/example/mapgis/mapboxstyle.htm b/website/public/static/demo/cesium-new/example/mapgis/mapboxstyle.htm new file mode 100644 index 000000000..8f292cc05 --- /dev/null +++ b/website/public/static/demo/cesium-new/example/mapgis/mapboxstyle.htm @@ -0,0 +1,57 @@ + + + + + + + 地层分析 + + + + + + + + + +
+ +
+ + +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/cesium-new/example/mapgis/mapgis-2d-doc.htm b/website/public/static/demo/cesium-new/example/mapgis/mapgis-2d-doc.htm new file mode 100644 index 000000000..36c3738f8 --- /dev/null +++ b/website/public/static/demo/cesium-new/example/mapgis/mapgis-2d-doc.htm @@ -0,0 +1,90 @@ + + + + + + 加载IGServer二维矢量地图服务 + + + + + + + + + + + +
+ +
+ +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/cesium-new/example/mapgis/mapgis-2d-layer.htm b/website/public/static/demo/cesium-new/example/mapgis/mapgis-2d-layer.htm new file mode 100644 index 000000000..944dbe478 --- /dev/null +++ b/website/public/static/demo/cesium-new/example/mapgis/mapgis-2d-layer.htm @@ -0,0 +1,89 @@ + + + + + + 加载IGServer二维矢量图层服务 + + + + + + + + + + + +
+ +
+ +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/cesium-new/example/mapgis/mapgis-2d-tile.htm b/website/public/static/demo/cesium-new/example/mapgis/mapgis-2d-tile.htm new file mode 100644 index 000000000..b93650cd8 --- /dev/null +++ b/website/public/static/demo/cesium-new/example/mapgis/mapgis-2d-tile.htm @@ -0,0 +1,69 @@ + + + + + + 加载IGServer二维瓦片地图服务 + + + + + + + + + + + +
+
+ + + diff --git a/website/public/static/demo/cesium-new/example/mapgis/mapgis-2dtile.htm b/website/public/static/demo/cesium-new/example/mapgis/mapgis-2dtile.htm new file mode 100644 index 000000000..a0d147592 --- /dev/null +++ b/website/public/static/demo/cesium-new/example/mapgis/mapgis-2dtile.htm @@ -0,0 +1,89 @@ + + + + + + + 加载二维瓦片地图 + + + + + + + + + +
+
+ +
+ + +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/cesium-new/example/mapgis/mapgis-2dvector.htm b/website/public/static/demo/cesium-new/example/mapgis/mapgis-2dvector.htm new file mode 100644 index 000000000..6528830ea --- /dev/null +++ b/website/public/static/demo/cesium-new/example/mapgis/mapgis-2dvector.htm @@ -0,0 +1,96 @@ + + + + + + + 加载WMS服务 + + + + + + + +
+ + +
+
+ +
+ + +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/cesium-new/example/mapgis/mapgis-dem.htm b/website/public/static/demo/cesium-new/example/mapgis/mapgis-dem.htm new file mode 100644 index 000000000..044e3339d --- /dev/null +++ b/website/public/static/demo/cesium-new/example/mapgis/mapgis-dem.htm @@ -0,0 +1,79 @@ + + + + + + 加载WMS服务 + + + + + + + + + + + +
+ +
+ +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/cesium-new/example/mapgis/mapgis-dem250.htm b/website/public/static/demo/cesium-new/example/mapgis/mapgis-dem250.htm new file mode 100644 index 000000000..49cfad60f --- /dev/null +++ b/website/public/static/demo/cesium-new/example/mapgis/mapgis-dem250.htm @@ -0,0 +1,84 @@ + + + + + + + 加载WMS服务 + + + + + + + + +
+ +
+ + +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/cesium-new/example/mapgis/mapgis-oblique.htm b/website/public/static/demo/cesium-new/example/mapgis/mapgis-oblique.htm new file mode 100644 index 000000000..5ea1eac0e --- /dev/null +++ b/website/public/static/demo/cesium-new/example/mapgis/mapgis-oblique.htm @@ -0,0 +1,78 @@ + + + + + + 倾斜摄影 + + + + + + + + + + + +
+ +
+ +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/cesium-new/example/mapgis/mapgis-raster.htm b/website/public/static/demo/cesium-new/example/mapgis/mapgis-raster.htm new file mode 100644 index 000000000..e0800c937 --- /dev/null +++ b/website/public/static/demo/cesium-new/example/mapgis/mapgis-raster.htm @@ -0,0 +1,73 @@ + + + + + + 加载WMS服务 + + + + + + + + + + + +
+ +
+ +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/cesium-new/example/mapgis/mapgis-raster250.htm b/website/public/static/demo/cesium-new/example/mapgis/mapgis-raster250.htm new file mode 100644 index 000000000..09ec84c3e --- /dev/null +++ b/website/public/static/demo/cesium-new/example/mapgis/mapgis-raster250.htm @@ -0,0 +1,63 @@ + + + + + + 加载WMS服务 + + + + + + + + +
+ +
+ + +
+ + diff --git a/website/public/static/demo/cesium-new/example/mapgis/mapgis-terrain.htm b/website/public/static/demo/cesium-new/example/mapgis/mapgis-terrain.htm new file mode 100644 index 000000000..5b6a1e408 --- /dev/null +++ b/website/public/static/demo/cesium-new/example/mapgis/mapgis-terrain.htm @@ -0,0 +1,80 @@ + + + + + + 地形数据显示 + + + + + + + + + + + +
+ +
+ +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/cesium-new/example/mapgis/mapgis-vectortile-4326.htm b/website/public/static/demo/cesium-new/example/mapgis/mapgis-vectortile-4326.htm new file mode 100644 index 000000000..6df0791f6 --- /dev/null +++ b/website/public/static/demo/cesium-new/example/mapgis/mapgis-vectortile-4326.htm @@ -0,0 +1,78 @@ + + + + + 地层分析 + + + + + + + + + + +
+ +
+ + +
+ + diff --git a/website/public/static/demo/cesium-new/example/mapgis/mapgis-vectortile-darkstyle.htm b/website/public/static/demo/cesium-new/example/mapgis/mapgis-vectortile-darkstyle.htm new file mode 100644 index 000000000..971f12ffc --- /dev/null +++ b/website/public/static/demo/cesium-new/example/mapgis/mapgis-vectortile-darkstyle.htm @@ -0,0 +1,72 @@ + + + + + + + 地层分析 + + + + + + + + + +
+ +
+ + +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/cesium-new/example/mapgis/mapgis-vectortile-lightstyle.htm b/website/public/static/demo/cesium-new/example/mapgis/mapgis-vectortile-lightstyle.htm new file mode 100644 index 000000000..f83b6e777 --- /dev/null +++ b/website/public/static/demo/cesium-new/example/mapgis/mapgis-vectortile-lightstyle.htm @@ -0,0 +1,72 @@ + + + + + + + 地层分析 + + + + + + + + + +
+ +
+ + +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/cesium-new/example/mapgis/mapgis-vectortile-streetstyle.htm b/website/public/static/demo/cesium-new/example/mapgis/mapgis-vectortile-streetstyle.htm new file mode 100644 index 000000000..6d87d42d5 --- /dev/null +++ b/website/public/static/demo/cesium-new/example/mapgis/mapgis-vectortile-streetstyle.htm @@ -0,0 +1,72 @@ + + + + + + + 地层分析 + + + + + + + + + +
+ +
+ + +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/cesium-new/example/mapgis/mapgis-vectortile.htm b/website/public/static/demo/cesium-new/example/mapgis/mapgis-vectortile.htm new file mode 100644 index 000000000..477bc27e7 --- /dev/null +++ b/website/public/static/demo/cesium-new/example/mapgis/mapgis-vectortile.htm @@ -0,0 +1,87 @@ + + + + + + 地层分析 + + + + + + + + + + +
+ +
+ + +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/cesium-new/example/style.css b/website/public/static/demo/cesium-new/example/style.css new file mode 100644 index 000000000..1518ae0bb --- /dev/null +++ b/website/public/static/demo/cesium-new/example/style.css @@ -0,0 +1,14 @@ +#mapgis-3d-viewer { + width: 100%; + height: 100%; + position: absolute; +} + +.mapgis-3d-output-cemera { + position: absolute; + z-index: 2000; + top: 10px; + right: 10px; + background: #ffffff; + border-radius: 2px; +} diff --git a/website/public/static/demo/cesium-new/example/symbols/point-symbol-3d.htm b/website/public/static/demo/cesium-new/example/symbols/point-symbol-3d.htm new file mode 100644 index 000000000..2bf2598ac --- /dev/null +++ b/website/public/static/demo/cesium-new/example/symbols/point-symbol-3d.htm @@ -0,0 +1,55 @@ + + + + + + + 动画漫游 + + + + + + + + + +
+
+ + + \ No newline at end of file diff --git a/website/public/static/demo/cesium-new/example/terrian/cesium-terrian-common.htm b/website/public/static/demo/cesium-new/example/terrian/cesium-terrian-common.htm new file mode 100644 index 000000000..9fb058f1c --- /dev/null +++ b/website/public/static/demo/cesium-new/example/terrian/cesium-terrian-common.htm @@ -0,0 +1,266 @@ + + + + + + + 动画漫游 + + + + + + + + + +
+
+ + + +
+
+ +
+ + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
漫游方式 + + + + +
俯仰角 + + +
方位角 + + +
距离 + + +
播放速度 + + +
+
+ + + + \ No newline at end of file diff --git a/website/public/static/demo/cesium-new/example/terrian/cesium-terrian-stk.htm b/website/public/static/demo/cesium-new/example/terrian/cesium-terrian-stk.htm new file mode 100644 index 000000000..9fb058f1c --- /dev/null +++ b/website/public/static/demo/cesium-new/example/terrian/cesium-terrian-stk.htm @@ -0,0 +1,266 @@ + + + + + + + 动画漫游 + + + + + + + + + +
+
+ + + +
+
+ +
+ + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
漫游方式 + + + + +
俯仰角 + + +
方位角 + + +
距离 + + +
播放速度 + + +
+
+ + + + \ No newline at end of file diff --git a/website/public/static/demo/cesium-new/example/terrian/mapgis-terrian-common.htm b/website/public/static/demo/cesium-new/example/terrian/mapgis-terrian-common.htm new file mode 100644 index 000000000..176ffc12b --- /dev/null +++ b/website/public/static/demo/cesium-new/example/terrian/mapgis-terrian-common.htm @@ -0,0 +1,76 @@ + + + + + + + 动画漫游 + + + + + + + + + +
+
+
输出相机视角
+ + + \ No newline at end of file diff --git a/website/public/static/demo/cesium-new/example/terrian/mapgis-terrian-normal.htm b/website/public/static/demo/cesium-new/example/terrian/mapgis-terrian-normal.htm new file mode 100644 index 000000000..e9791cb28 --- /dev/null +++ b/website/public/static/demo/cesium-new/example/terrian/mapgis-terrian-normal.htm @@ -0,0 +1,77 @@ + + + + + + + 动画漫游 + + + + + + + + + +
+
+
输出相机视角
+ + + \ No newline at end of file diff --git a/website/public/static/demo/cesium-new/example/tool/graohic-layer-2d-advance.htm b/website/public/static/demo/cesium-new/example/tool/graohic-layer-2d-advance.htm new file mode 100644 index 000000000..58c8ae0a9 --- /dev/null +++ b/website/public/static/demo/cesium-new/example/tool/graohic-layer-2d-advance.htm @@ -0,0 +1,227 @@ + + + + + + + 标绘工具（二维）- 进阶 + + + + + + + + + + +
+
+ +
开始绘制
+ + + \ No newline at end of file diff --git a/website/public/static/demo/cesium-new/example/tool/graohic-layer-2d.htm b/website/public/static/demo/cesium-new/example/tool/graohic-layer-2d.htm new file mode 100644 index 000000000..6a2b3106c --- /dev/null +++ b/website/public/static/demo/cesium-new/example/tool/graohic-layer-2d.htm @@ -0,0 +1,185 @@ + + + + + + + 标绘工具（二维） + + + + + + + + + + +
+
+ +
开始绘制
+ + + \ No newline at end of file diff --git a/website/public/static/demo/cesium-new/example/tool/graohic-layer-3d.htm b/website/public/static/demo/cesium-new/example/tool/graohic-layer-3d.htm new file mode 100644 index 000000000..3232c243b --- /dev/null +++ b/website/public/static/demo/cesium-new/example/tool/graohic-layer-3d.htm @@ -0,0 +1,103 @@ + + + + + + + 标绘工具（三维） + + + + + + + + + + +
+
+ +
开始绘制
+ + + \ No newline at end of file diff --git a/website/public/static/demo/cesium-new/example/view/theme-layer.htm b/website/public/static/demo/cesium-new/example/view/theme-layer.htm new file mode 100644 index 000000000..ea4716ec0 --- /dev/null +++ b/website/public/static/demo/cesium-new/example/view/theme-layer.htm @@ -0,0 +1,129 @@ + + + + + + + 洪水淹没分析 + + + + + + + + + + +
+
+
+ + + + +
+
+
+
+ + + \ No newline at end of file diff --git a/website/public/static/demo/cesium-new/gallery/analysis/analysis-animation.png b/website/public/static/demo/cesium-new/gallery/analysis/analysis-animation.png new file mode 100644 index 000000000..028e41e50 Binary files /dev/null and b/website/public/static/demo/cesium-new/gallery/analysis/analysis-animation.png differ diff --git a/website/public/static/demo/cesium-new/gallery/analysis/analysis-aspectAnalysis-normal.png b/website/public/static/demo/cesium-new/gallery/analysis/analysis-aspectAnalysis-normal.png new file mode 100644 index 000000000..5fe81cff2 Binary files /dev/null and b/website/public/static/demo/cesium-new/gallery/analysis/analysis-aspectAnalysis-normal.png differ diff --git a/website/public/static/demo/cesium-new/gallery/analysis/analysis-aspectAnalysis.png b/website/public/static/demo/cesium-new/gallery/analysis/analysis-aspectAnalysis.png new file mode 100644 index 000000000..a811e5890 Binary files /dev/null and b/website/public/static/demo/cesium-new/gallery/analysis/analysis-aspectAnalysis.png differ diff --git a/website/public/static/demo/cesium-new/gallery/analysis/analysis-cube.png b/website/public/static/demo/cesium-new/gallery/analysis/analysis-cube.png new file mode 100644 index 000000000..93586eaea Binary files /dev/null and b/website/public/static/demo/cesium-new/gallery/analysis/analysis-cube.png differ diff --git a/website/public/static/demo/cesium-new/gallery/analysis/analysis-dynamiccut.png b/website/public/static/demo/cesium-new/gallery/analysis/analysis-dynamiccut.png new file mode 100644 index 000000000..9d953e695 Binary files /dev/null and b/website/public/static/demo/cesium-new/gallery/analysis/analysis-dynamiccut.png differ diff --git a/website/public/static/demo/cesium-new/gallery/analysis/analysis-excavate.png b/website/public/static/demo/cesium-new/gallery/analysis/analysis-excavate.png new file mode 100644 index 000000000..5607baec5 Binary files /dev/null and b/website/public/static/demo/cesium-new/gallery/analysis/analysis-excavate.png differ diff --git a/website/public/static/demo/cesium-new/gallery/analysis/analysis-explosion.png b/website/public/static/demo/cesium-new/gallery/analysis/analysis-explosion.png new file mode 100644 index 000000000..2b69ef1d8 Binary files /dev/null and b/website/public/static/demo/cesium-new/gallery/analysis/analysis-explosion.png differ diff --git a/website/public/static/demo/cesium-new/gallery/analysis/analysis-floor.png b/website/public/static/demo/cesium-new/gallery/analysis/analysis-floor.png new file mode 100644 index 000000000..af7cafe7b Binary files /dev/null and b/website/public/static/demo/cesium-new/gallery/analysis/analysis-floor.png differ diff --git a/website/public/static/demo/cesium-new/gallery/analysis/analysis-modelflatten.png b/website/public/static/demo/cesium-new/gallery/analysis/analysis-modelflatten.png new file mode 100644 index 000000000..008dceaf2 Binary files /dev/null and b/website/public/static/demo/cesium-new/gallery/analysis/analysis-modelflatten.png differ diff --git a/website/public/static/demo/cesium-new/gallery/analysis/analysis-rollershutters.png b/website/public/static/demo/cesium-new/gallery/analysis/analysis-rollershutters.png new file mode 100644 index 000000000..0f35b87e1 Binary files /dev/null and b/website/public/static/demo/cesium-new/gallery/analysis/analysis-rollershutters.png differ diff --git a/website/public/static/demo/cesium-new/gallery/analysis/analysis-sceneprojection.png b/website/public/static/demo/cesium-new/gallery/analysis/analysis-sceneprojection.png new file mode 100644 index 000000000..40b8d1454 Binary files /dev/null and b/website/public/static/demo/cesium-new/gallery/analysis/analysis-sceneprojection.png differ diff --git a/website/public/static/demo/cesium-new/gallery/analysis/analysis-skyline.png b/website/public/static/demo/cesium-new/gallery/analysis/analysis-skyline.png new file mode 100644 index 000000000..499619f12 Binary files /dev/null and b/website/public/static/demo/cesium-new/gallery/analysis/analysis-skyline.png differ diff --git a/website/public/static/demo/cesium-new/gallery/analysis/analysis-slopeAnalysis-normal.png b/website/public/static/demo/cesium-new/gallery/analysis/analysis-slopeAnalysis-normal.png new file mode 100644 index 000000000..14ef37693 Binary files /dev/null and b/website/public/static/demo/cesium-new/gallery/analysis/analysis-slopeAnalysis-normal.png differ diff --git a/website/public/static/demo/cesium-new/gallery/analysis/analysis-slopeAnalysis.png b/website/public/static/demo/cesium-new/gallery/analysis/analysis-slopeAnalysis.png new file mode 100644 index 000000000..21078934c Binary files /dev/null and b/website/public/static/demo/cesium-new/gallery/analysis/analysis-slopeAnalysis.png differ diff --git a/website/public/static/demo/cesium-new/gallery/analysis/analysis-visibility.png b/website/public/static/demo/cesium-new/gallery/analysis/analysis-visibility.png new file mode 100644 index 000000000..7f52192cb Binary files /dev/null and b/website/public/static/demo/cesium-new/gallery/analysis/analysis-visibility.png differ diff --git a/website/public/static/demo/cesium-new/gallery/analysis/analysis-visiblerange.png b/website/public/static/demo/cesium-new/gallery/analysis/analysis-visiblerange.png new file mode 100644 index 000000000..6b61647ce Binary files /dev/null and b/website/public/static/demo/cesium-new/gallery/analysis/analysis-visiblerange.png differ diff --git a/website/public/static/demo/cesium-new/gallery/terrian/mapgis-terrian-common.png b/website/public/static/demo/cesium-new/gallery/terrian/mapgis-terrian-common.png new file mode 100644 index 000000000..569e2aba6 Binary files /dev/null and b/website/public/static/demo/cesium-new/gallery/terrian/mapgis-terrian-common.png differ diff --git a/website/public/static/demo/cesium-new/gallery/terrian/mapgis-terrian-normal.png b/website/public/static/demo/cesium-new/gallery/terrian/mapgis-terrian-normal.png new file mode 100644 index 000000000..97f74b492 Binary files /dev/null and b/website/public/static/demo/cesium-new/gallery/terrian/mapgis-terrian-normal.png differ diff --git a/website/public/static/demo/cesium-new/gallery/view/theme-layer.png b/website/public/static/demo/cesium-new/gallery/view/theme-layer.png new file mode 100644 index 000000000..4175d6a34 Binary files /dev/null and b/website/public/static/demo/cesium-new/gallery/view/theme-layer.png differ diff --git a/website/public/static/demo/cesium-new/markdown/analysis/analysis-animation.md b/website/public/static/demo/cesium-new/markdown/analysis/analysis-animation.md new file mode 100644 index 000000000..857c86b58 --- /dev/null +++ b/website/public/static/demo/cesium-new/markdown/analysis/analysis-animation.md @@ -0,0 +1,197 @@ +## 动画漫游 + +### 常见问题 +1. 轨迹出来了，模型不移动 + ![speed](../../static/demo/cesium/markdown/analysis/bug/speed.png) +2. 轨迹出来了，模型看不见 + 1. 模型太大，还在网络传输中 + ![speed](../../static/demo/cesium/markdown/analysis/bug/delay.png) + 2. 缺失模型，网络报错 + ![speed](../../static/demo/cesium/markdown/analysis/bug/nofind.png) +3. 模型下载地址 + 1. [MapGIS默认模型](/#/total/download) + 2. https://sketchfab.com/3d-models?date=week&features=downloadable&sort_by=-likeCount + 3. https://free3d.com/zh/ + +### 示例功能 + +    此功能用于在三维场景中实现动画漫游功能，即让模型沿着路径漫游，默认为第一人称漫游，可修改动画漫游方式。本示例实现让飞机模型按既定的路径漫游。在实际应用中，可结合具体应用场景开发，如绘制路径进行动画漫游等功能需求等。 + +### 示例实现： + +    本示例需要使用【include-cesium-local.js】开发库实现，初始化高级分析功能管理类 `CesiumZondy.Manager.AdvancedAnalysisManager` 对象，调用高级分析功能管理类的 `createAnimation()` 方法创建动画漫游对象实例实现动画漫游功能。 + +### 实现步骤： + +**Step 1. 引用开发库**： +    本示例引用local本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维WebGL的功能； + +**Step 2. 创建三维地图容器并加载三维球控件**： +    创建 `id='GlobeView'` 的div作为三维视图的容器，并设置其样式，初始化Cesium三维球控件 `Cesium.WebSceneControl()` ，完成此步后可在三维场景中加载三维球控件； + +* Example: + ``` Javascript + //构造三维视图类（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', { + terrainExaggeration: 1, + }); + ``` + +* Example: + ``` html +
+ ``` + +**Step 3. 加载底图数据**： +    初始化第三方图层类`CesiumZondy.Layer.ThirdPartyLayer`对象，调用 `appendGoogleMapExt()` 方法加载谷歌地图数据作为底图； + +* Example: + ``` Javascript + //构造第三方图层对象 + var thirdPartyLayer = new CesiumZondy.Layer.ThirdPartyLayer({ + viewer: webGlobe.viewer + }); + //加载天地图 + var tdtLayer = thirdPartyLayer.appendTDTuMap({ + //天地图经纬度数据 + url: 'http://t0.tianditu.com/DataServer?T=vec_c&X={x}&Y={y}&L={l}', + //开发token （请到天地图官网申请自己的开发token，自带token仅做功能验证随时可能失效） + token: "9c157e9585486c02edf817d2ecbc7752", + //地图类型 'vec'矢量 'img'影像 'ter'地形 + ptype: "img" + }); + ``` + +**Step 4. 显示常用控件，并实现跳转定位**： +    调用`showPosition()`、`createNavigationTool()`方法显示常用控件，调用 `flyToEx()` 方法定位到指定点； + +* Example: + ``` Javascript + //视点跳转（经度，纬度，视角高度，方位角，俯仰角，翻滚角） + webGlobe.flyToEx(117.213063, 31.812956, { + height: 200, + heading: 90, + pitch: 0, + roll: 0 + }); + //显示鼠标位置控件 + webGlobe.showPosition('coordinate_location'); + //显示导航控件（罗盘、比例尺、场景导航） + webGlobe.createNavigationTool({ + enableCompass: true, + enableZoomControls: true, + enableDistanceLegend: true + }); + ``` + +**Step 5. 创建动画漫游对象**： +    初始化高级分析功能管理类对象`CesiumZondy.Manager.AdvancedAnalysisManager`，调用`createAnimation()`方法创建动画漫游对象； + +* Example: + ``` Javascript + //初始化高级分析功能管理类 + var advancedAnalysisManager = new CesiumZondy.Manager.AdvancedAnalysisManager({ + viewer: webGlobe.viewer + }); + //创建动画漫游对象 + animation = advancedAnalysisManager.createAnimation({ + exHeight: 9, + isLoop: false, + //漫游模型url + modelUrl: './static/data/model/WuRenJi.glb', + //完成动画漫游回调函数 + complete: function () { + alert('完毕'); + } + }); + ``` + +**Step 6. 实现动画漫游控制**： +    通过动画漫游对象的属性和方法实现动画漫游控制，即通过属性设置漫游路径、漫游方式、速度、俯仰角、方位角等参数，分别通过调用方法`start()`、`stop()`开始和结束漫游。 + +* Example: + ``` Javascript + //漫游路径 + positions = Cesium.Cartesian3.fromDegreesArray([ + 117.213063, 31.812956, 117.213162, 31.812389, 117.212929, 31.812056, 117.213275, 31.811582, + 117.21348, 31.811513, 117.214141, 31.811682, 117.21497, 31.811691, 117.216318, 31.811454, + 117.216962, 31.812037, 117.217893, 31.812298, 117.218607, 31.811488, 117.219466, 31.810935, + 117.224439, 31.810929, 117.225266, 31.811119, 117.225308, 31.81131, 117.224819, 31.811724, + 117.225189, 31.811928, 117.225676, 31.811624, 117.225843, 31.811943, 117.22625, 31.812183, + 117.226292, 31.81281, 117.225888, 31.813287, 117.226093, 31.814059, 117.22564, 31.814582, + 117.225953, 31.814731, 117.225611, 31.814954, 117.22576, 31.815233, 117.224073, 31.816329, + 117.223694, 31.81627, 117.222769, 31.817007, 117.222259, 31.816871, 117.221922, 31.816707, + 117.221653, 31.816788, 117.22151, 31.817002, 117.221039, 31.816891, 117.220395, 31.816352, + 117.220166, 31.815734, 117.219804, 31.815607, 117.219461, 31.815122, 117.21878, 31.814846, + 117.218297, 31.815275, 117.217975, 31.815172, 117.217142, 31.815229, 117.216753, 31.815124, + 117.216652, 31.814308, 117.215726, 31.814049, 117.214769, 31.813517, 117.214111, 31.813717, + 117.213552, 31.814099, 117.213024, 31.813954, 117.212897, 31.813892, 117.213224, 31.813681, + 117.212788, 31.813147, 117.212928, 31.813018, 117.213063, 31.812956 + ]); + //设置路径 + animation.positions = positions; + //漫游方式：1-跟随、2-锁定第一视角、3-上帝视角 + animation.animationType = 2; + //漫游速度 + animation.speed = 1; + ``` + +* Example: + ``` Javascript + function start() { + //开始漫游 + animation.start(); + } + function pause() { + //暂停漫游 + animation.pause = true; + } + function stop() { + //停止漫游 + animation.stop(); + } + ``` + +### 关键接口 + +#### 1.【三维视图的主要类】 `Cesium.WebSceneControl` + +#### 2.【场景视图管理类】 `CesiumZondy.Manager.SceneManager` + +##### 【method】 `showPosition()`： 鼠标坐标位置控件 + +##### 【method】 `createNavigationTool()`： 常用导航控件 + +##### 【method】 `flyToEx()`： 视点跳转 + + +#### 3.【高级分析功能管理类】`CesiumZondy.Manager.AdvancedAnalysisManager` + +##### 【method】 `createAnimation(optionsParam) → {Object}` ：创建动画漫游对象, 返回动画漫游实例Animation(Object) + +|参数名|类型|说明| +|-|-|-| +|optionsParam|Object|动画漫游参数| + +* `optionsParam` 主要参数 + +|参数名|类型|说 明| +|-|-|-| +|exHeight|Number|（可选）附加高程| +|isLoop|Boolean|（可选）是否循环| +|modelUrl|Object|模型url| +|callback|function|（可选）完成动漫漫游后的回调函数| + +##### 【返回值】 `Animation`的属性与方法 + +|属性名|类型|说 明| +|-|-|-| +|positions|Array|漫游路径，Cesium.Cartesian3.fromDegreesArray的经纬度值数组| +|animationType|Number|漫游方式：1-跟随、2-锁定第一视角、3-上帝视角| +|speed|Number|漫游速度| + + +|方法名|说 明| +|-|-| +|start|开始漫游| +|stop|结束漫游| diff --git a/website/public/static/demo/cesium-new/markdown/analysis/analysis-aspectAnalysis.md b/website/public/static/demo/cesium-new/markdown/analysis/analysis-aspectAnalysis.md new file mode 100644 index 000000000..0e3526f53 --- /dev/null +++ b/website/public/static/demo/cesium-new/markdown/analysis/analysis-aspectAnalysis.md @@ -0,0 +1,99 @@ +## 坡向分析 + +### 示例功能 + +    此功能用于地形数据的坡向分析。 坡向是指地表面上一点的切平面的法线在水平面的投影与该点的正北方向的夹角，描述该点高程值改变量的最大变化方向。坡向分析作用是：决定地表面局部地面接收阳光和重新分配太阳辐射量的重要地形因子，直接造成局部地区气候特征差异，影响各项农业生产指标。 + +### 示例实现： + +    本示例需要使用【include-cesium-local.js】开发库实现，初始化 Cesium 三维球控件 `Cesium.WebSceneControl()` ，初始化地形图层管理类 `CesiumZondy.Layer.TerrainLayer` 并调用 `append()` 方法加载地形数据后，跳转视点，创建高级分析功能管理类 `CesiumZondy.Manager.AdvancedAnalysisManager()` ，调用 `createAspectAnalysis()` 方法进行坡向分析。 + +### 实现步骤： + +**Step 1. 引用开发库**： +    本示例引用 local 本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维 WebGL 的功能； + +**Step 2. 创建三维地图容器并加载三维球控件**： +    创建 `id='GlobeView'` 的 div 作为三维视图的容器，并设置其样式，初始化 Cesium 三维球控件 `Cesium.WebSceneControl()` ，完成此步后可在三维场景中加载三维球控件； + +- Example: + + ```Javascript + //构造三维视图类（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', { + terrainExaggeration: 1, + }); + ``` + +- Example: + ```html +
+ ``` + +**Step 3. 加载数据**： +    初始化地形图层管理类 `CesiumZondy.Layer.TerrainLayer` 并调用 `append()` 方法传入三维地形数据地图服务地址，即可加载浏览数据； + +- Example: + ```Javascript + //构造地形图层管理类 + var terrain = new CesiumZondy.Layer.TerrainLayer({ + viewer: webGlobe.viewer + }); + //加载三维地形地图文档（服务地址，配置参数） + var { protocol, ip, port } = window.webclient; + var terrainlayer = terrain.append(`http://develop.smaryun.com:6163/igs/rest/g3d/terrain`, {}); + //初始化视图功能管理类 + var sceneManager = new CesiumZondy.Manager.SceneManager({ + viewer: webGlobe.viewer + }); + ``` + +**Step 4. 坡向分析**： +    创建高级分析功能管理类 `CesiumZondy.Manager.AdvancedAnalysisManager()` ，调用 `createAspectAnalysis()` 方法进行坡向分析。 + +- Example: + ```Javascript + //初始化高级分析功能管理类 + var advancedAnalysisManager = new CesiumZondy.Manager.AdvancedAnalysisManager({ + viewer: webGlobe.viewer + }); + webGlobe.viewer.scene.globe.depthTestAgainstTerrain = true; + //进行坡向分析 + var aspectAna = advancedAnalysisManager.createAspectAnalysis([ + Cesium.Color.ALICEBLUE, + Cesium.Color.ANTIQUEWHITE, + Cesium.Color.AQUA, + Cesium.Color.AQUAMARINE, + Cesium.Color.AZURE, + Cesium.Color.BEIGE + ]); + ``` + +### 关键接口 + +#### 1.【三维视图的主要类】 `Cesium.WebSceneControl` + +#### 2.【地形图层管理类】`CesiumZondy.Layer.TerrainLayer` + +##### 【method】 `append(url, options)` ：添加地形地图文档 + +| 参数名 | 类型 | 说明 | +| ------- | ------ | ----------------------------------------------------------------------------------------------- | +| url | String | 事件类型 LEFT_CLICK RIGHT_CLICK MOUSE_MOVE LEFT_DOUBLE_CLICK RIGHT_DOUBLE_CLICK WHEEL(鼠标滚轮) | +| options | Object | 可选参数 | + +- `options` 主要参数 + +| 参数名 | 类型 | 默认值 | 说明 | +| ----------- | ------------ | -------- | ------------------ | +| synchronous | Boolean | true | (可选)是否异步请求 | +| loaded | function | function | (可选)回调函数 | +| 代理 | DefaultProxy | 暂无 | 暂无 | + +#### 3.【高级分析功能管理类】`CesiumZondy.Manager.AdvancedAnalysisManager` + +##### 【method】 `createAspectAnalysis(color) → {Object}`： 坡向分析，返回坡向分析实例 + +| 参数名 | 类型 | 说 明 | +| ------ | ------------- | ------------------------- | +| color | Array. | 坡向分层颜色信息，分 6 层 | diff --git a/website/public/static/demo/cesium-new/markdown/analysis/analysis-cube.md b/website/public/static/demo/cesium-new/markdown/analysis/analysis-cube.md new file mode 100644 index 000000000..e0ba1de39 --- /dev/null +++ b/website/public/static/demo/cesium-new/markdown/analysis/analysis-cube.md @@ -0,0 +1,142 @@ +## 填挖方计算 + +### 示例功能 + +    此功能提供用于计算将一定范围内的地形填平到某一高度时，需要挖开或填充的空间体积，可以应用于智慧城市，地质，公安等多个领域的业务功能，实用性强。 + +### 示例实现： + +    本示例需要使用【include-cesium-local.js】开发库实现，初始化Cesium三维球控件 `Cesium.WebSceneControl()` ，初始化地形图层管理类 `CesiumZondy.Layer.TerrainLayer()` 的 `append()` 方法加载地形数据后，初始化 `Cesium.DrawElement()` 对象在三维场景中添加交互式绘制区控件用来界定量算区域，初始化高级分析功能管理类 `CesiumZondy.Manager.AdvancedAnalysisManager()` 对象，调用高级分析功能管理类的 `createCutFill()` 方法创建填挖方分析对象, 调用高级分析功能管理类的 `startCutFill()` 方法执行填挖方分析。 + +### 实现步骤： + +**Step 1. 引用开发库**： +    本示例引用local本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维WebGL的功能； + +**Step 2. 创建三维地图容器并加载三维球控件**： +    创建 `id='GlobeView'` 的div作为三维视图的容器，并设置其样式，初始化Cesium三维球控件 `Cesium.WebSceneControl()` ，初始化地形图层管理类 `CesiumZondy.Layer.TerrainLayer()` 的 `append()` 方法加载地形数据，完成此步后可在三维场景中加载三维球控件并加载数据； + +* Example: + ``` Javascript + //构造三维视图类（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', { + terrainExaggeration: 1, + }); + //添加Google地图 + webGlobe.appendGoogleMapExt({ + ptype: 's@130' + }); + //构造地形图层管理类 + var terrain = new CesiumZondy.Layer.TerrainLayer({ + viewer: webGlobe.viewer + }); + //加载三维地形地图文档（服务地址，配置参数） + terrainlayer = terrain.append("http://develop.smaryun.com:6163/igs/rest/g3d/terrain", {}); + ``` + +* Example: + ``` html +
+ ``` + +**Step 3. 创建交互式绘制工具**： +    初始化 `Cesium.DrawElement()` 对象，完成交互式绘制工具的创建； + +* Example: + ``` Javascript + //创建交互式绘制工具 + var drawElement = new Cesium.DrawElement(webGlobe.viewer); + ``` + +**Step 4. 激活交互式绘制区工具**： +    调用 `Cesium.DrawElement()` 对象的startDrawingPolygon()方法，激活交互式绘制区工具，完成此步后，可在三维场景中通过鼠标左键点击绘制多边形； + +* Example: + ``` Javascript + //激活交互式绘制区工具 + drawElement.startDrawingPolygon(); + ``` + +**Step 5. 创建填挖方分析**： +    初始化高级分析功能管理类 `CesiumZondy.Manager.AdvancedAnalysisManager（）` 对象，调用高级分析功能管理类的 `createCutFill()` 方法创建填挖方分析对象； + +* Example: + ``` Javascript + //初始化高级分析功能管理类 + var advancedAnalysisManager = new CesiumZondy.Manager.AdvancedAnalysisManager({ + viewer: viewer + }); + //创建填挖方实例 + cutFill = advancedAnalysisManager.createCutFill(0.0, { + //设置x方向采样点个数 + xPaneNum: document.getElementById("x").value <= 0 ? 16 : document.getElementById("x").value, + //设置y方向采样点个数参数 + yPaneNum: document.getElementById("y").value <= 0 ? 16 : document.getElementById("y").value, + //设置填挖规整高度 + Height: document.getElementById("z").value <= 0 ? 16 : document.getElementById("z").value, + //返回结果的回调函数 + callback: function(result) { + document.getElementById("height").value = result.minHeight.toFixed(2) + '~' + result.maxHeight.toFixed(2); + document.getElementById("surfaceArea").value = result.surfaceArea; + document.getElementById("cutVolume").value = result.cutVolume; + document.getElementById("fillVolume").value = result.fillVolume; + } + }); + ``` + +**Step 6. 执行填挖方分析**： +    调用高级分析功能管理类的 `startCutFill()` 方法执行填挖方分析。 + +* Example: + ``` Javascript + //开始执行填挖方分析 + advancedAnalysisManager.startCutFill(cutFill, positions); + ``` + +### 关键接口 + +#### 1.【三维视图的主要类】 `Cesium.WebSceneControl` + +#### 2.【地形图层管理类】`CesiumZondy.Layer.TerrainLayer` + +##### 【method】 `append(url, options)` ：添加地形地图文档 + +|参数名|类型|说明| +|-|-|-| +|url|String|事件类型 LEFT_CLICK RIGHT_CLICK MOUSE_MOVE LEFT_DOUBLE_CLICK RIGHT_DOUBLE_CLICK WHEEL(鼠标滚轮)| +|options|Object|可选参数| + +* `options` 主要参数 + +|参数名|类型|默认值|说明| +|-|-|-|-| +|synchronous|Boolean|true|(可选)是否异步请求| +|loaded|function|function|(可选)回调函数| +|代理|DefaultProxy|暂无|暂无| + +#### 2.【交互式绘制类】`Cesium. DrawElement` + +#### 3.【高级分析功能管理类】`CesiumZondy.Manager.AdvancedAnalysisManager` + +##### 【method】 `createCutFill(dataType, options)` ：创建填挖方实例 + +|参数名|类型|说明| +|-|-|-| +|dataType|Number|针对地形进行填挖方分析| +|options|Object|可选参数| + +* `options` 主要参数 + +|参数名|类型|说明| +|-|-|-|-| +|xPaneNum|Number|x方向采样点个数| +|yPaneNum|Number|y方向采样点个数| +|Height|Number|设定的填挖规整高度| +|callback|function|返回结果的回调函数| + +##### 【method】 `startCutFill(cutFill, positions)` ：开始执行填挖方分析 + +|参数名|类型|说明| +|-|-|-| +|cutFill|object|填挖方实例| +|positions|Array|填挖区域多边形的顶点数组| diff --git a/website/public/static/demo/cesium-new/markdown/analysis/analysis-dynamiccut.md b/website/public/static/demo/cesium-new/markdown/analysis/analysis-dynamiccut.md new file mode 100644 index 000000000..bd58ed0a2 --- /dev/null +++ b/website/public/static/demo/cesium-new/markdown/analysis/analysis-dynamiccut.md @@ -0,0 +1,144 @@ +## 动态剖切 + +### 示例功能 + +    此功能对已加载的M3D数据进行任意距离的剖切，动态的显示或隐藏一部分数据。 + +### 示例实现： + +    本示例需要使用【include-cesium-local.js】开发库实现，初始化Cesium三维球控件 `Cesium.WebSceneControl()` ，初始化M3D模型层管理类 `CesiumZondy.Layer.M3DLayer` 并调用 `append()` 方法加载M3D数据后，创建分析功能管理类 `CesiumZondy.Manager.AnalysisManager()` ，调用 `createDynamicCutting()` 方法创建剖切对象实例，通过设置剖切面距离进行数据剖切分析。 + +### 实现步骤： + +**Step 1. 引用开发库**： +    本示例引用local本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维WebGL的功能； + +**Step 2. 创建三维地图容器并加载三维球控件**： +    创建 `id='GlobeView'` 的div作为三维视图的容器，并设置其样式，初始化Cesium三维球控件 `Cesium.WebSceneControl()` ，完成此步后可在三维场景中加载三维球控件； + +* Example: + ``` Javascript + //构造三维视图类（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', { + terrainExaggeration: 1, + }); + ``` + +* Example: + ``` html +
+ ``` + +**Step 3. 加载数据**： +    初始化M3D模型层管理类 `CesiumZondy.Layer.M3DLayer` 并调用 `append()` 方法传入M3D数据服务地址，即可加载浏览数据； + +* Example: + ``` Javascript + //构造M3D模型层管理对象 + var m3dLayer = new CesiumZondy.Layer.M3DLayer({ + viewer: webGlobe.viewer + }); + var drilllayer = m3dLayer.append( + "http://develop.smaryun.com:6163/igs/rest/g3d/钻孔_2_钻孔模型s", { + autoReset: false, + } + ); + //加载M3D地图文档（服务地址，配置参数） + landscapeLayer = m3dLayer.append('http://develop.smaryun.com:6163/igs/rest/g3d/钻孔分层点_Sur_000_Ent', {}); + ``` + +**Step 4. 跳转定位**： +    调用视图功能管理类 CesiumZondy. Manager. SceneManager() ` 的 ` flyToEx()` 方法跳转到数据显示的范围； + +* Example: + ``` Javascript + //初始化视图功能管理类 + var sceneManager = new CesiumZondy.Manager.SceneManager({ + viewer: webGlobe.viewer + }); + //视点跳转 + sceneManager.flyToEx(112.94845170512113, 30.004246325952618, { + height: 2600, + heading: 67, + pitch: -30, + roll: 0 + }); + ``` + +**Step 5. 创建切面**： +    初始化切面对象 `Cesium.ClippingPlane()` ; + +* Example: + ``` Javascript + //进行剖切分析的面，从上往下切，Cesium.Cartesian3中第一个参数是左右，第二个参数是前后，第三个参数是上下 + var plane = new Cesium.ClippingPlane(new Cesium.Cartesian3(0.0, 0.0, -1.0), -500.0) + ``` + +**Step 6. 获取剖切切面**： +    创建分析功能管理类 `CesiumZondy.Manager.AnalysisManager()` ，调用 `createDynamicCutting()` 方法创建剖切对象实例, 并获取剖切切面； + +* Example: + ``` Javascript + //初始化分析功能管理类 + var analysisManager = new CesiumZondy.Manager.AnalysisManager({ + viewer: webGlobe.viewer + }); + //创建剖切对象实例 + dynaCut = analysisManager.createDynamicCutting(landscapeLayer, [plane], { + color: new Cesium.Color(0.0, 1.0, 1.0, 0.3) + }); + ``` + +**Step 7. 设置剖切面距离**： +    通过设置切面回调函数，动态设置剖切面距离完成动态剖切分析。 + +* Example: + ``` Javascript + //设置切面回调函数 + dynaCut.planes[0].plane.plane = new Cesium.CallbackProperty(function(date) { + //设置剖切面距离 + plane.distance = distance; + return Cesium.Plane.transform(plane, landscapeLayer[0].modelMatrix, new Cesium.ClippingPlane(Cesium.Cartesian3.UNIT_X, 0.0)); + }, false); + ``` + +### 关键接口 + +#### 1.【三维视图的主要类】 `Cesium.WebSceneControl` + +#### 2.【M3D模型层管理类】 `CesiumZondy.Layer.M3DLayer` + +##### 【method】 `append(url, options)` ：添加M3D地图文档 + +|参数名|类型|说明| +|-|-|-| +|url|String|事件类型 LEFT_CLICK RIGHT_CLICK MOUSE_MOVE LEFT_DOUBLE_CLICK RIGHT_DOUBLE_CLICK WHEEL(鼠标滚轮)| +|options|Object|可选参数| + +* `options` 主要参数 + +|参数名|类型|默认值|说明| +|-|-|-|-| +|autoReset|Boolean|true|(可选)是否自动定位| +|synchronous|Boolean|true|(可选)是否异步请求| +|loaded|function|function|(可选)回调函数| +|proxy|DefaultProxy|defaultProxy|代理| +|showBoundingVolume|Boolean|false|是否显示包围盒| +|maximumScreenSpaceError|Number|16|用于控制模型显示细节| + +#### 3. 【裁剪平面类】 `Cesium.ClippingPlane` + +|参数名|类型|说 明| +|-|-|-| +|normal|Cartesian3|法线| +|distance|Number|最短距离| + +#### 4.【分析功能管理类】 `CesiumZondy.Manager.AnalysisManager` + +##### 【method】 `createDynamicCutting(tileSets, planes, options)`：创建动态剖切实例 + +|参数名|类型|说明| +|-|-|-| +|tileSets|Object|图层集| +|planes|Object|平面集| +|options|Object|暂无| diff --git a/website/public/static/demo/cesium-new/markdown/analysis/analysis-excavate.md b/website/public/static/demo/cesium-new/markdown/analysis/analysis-excavate.md new file mode 100644 index 000000000..f83b056b4 --- /dev/null +++ b/website/public/static/demo/cesium-new/markdown/analysis/analysis-excavate.md @@ -0,0 +1,163 @@ +## 开挖深度 + +### 示例功能 + +    此功能对已加载的M3D数据进行任意距离深度开挖，动态的显示或隐藏一部分数据。 + +### 示例实现： + +    本示例需要使用【include-cesium-local.js】开发库实现，初始化Cesium三维球控件 `Cesium.WebSceneControl()` ， 初始化M3D模型层管理类 `CesiumZondy.Layer.M3DLayer` 并调用 `append()` 方法加载M3D数据后，创建 `Cesium.ClippingPlane()` 切面对象，创建分析功能管理类 `CesiumZondy.Manager.AnalysisManager()` ，调用 `createDynamicCutting()` 方法创建开挖分析对象通过设置剖切面距离进行数据开挖分析。 + +### 实现步骤： + +**Step 1. 引用开发库**： +    本示例引用local本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维WebGL的功能； + +**Step 2. 创建三维地图容器并加载三维球控件**： +    创建 `id='GlobeView'` 的div作为三维视图的容器，并设置其样式，初始化Cesium三维球控件 `Cesium.WebSceneControl()` ，完成此步后可在三维场景中加载三维球控件； + +* Example: + ``` Javascript + //构造三维视图类（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', { + terrainExaggeration: 1, + }); + ``` + +* Example: + ``` html +
+ ``` + +**Step 3. 加载数据**： +    初始化M3D模型层管理类 `CesiumZondy.Layer.M3DLayer` 并调用 `append()` 方法传入M3D数据服务地址，即可加载浏览数据； + +* Example: + ``` Javascript + //构造M3D模型层管理对象 + var m3dLayer = new CesiumZondy.Layer.M3DLayer({ + viewer: webGlobe.viewer + }); + var drilllayer = m3dLayer.append( + "http://develop.smaryun.com:6163/igs/rest/g3d/钻孔_2_钻孔模型s", { + autoReset: false, + } + ); + //加载M3D地图文档（服务地址，配置参数） + landscapeLayer = m3dLayer.append('http://develop.smaryun.com:6163/igs/rest/g3d/钻孔分层点_Sur_000_Ent', {}); + ``` + +**Step 4. 创建切面**： +    初始化切面对象 `Cesium.ClippingPlane()` ; + +* Example: + ``` Javascript + //开挖面设置,这五个面分别表示前后左右，底面，其中底面用于控制开挖深度 + var clippingPlanes = [ + new Cesium.ClippingPlane(new Cesium.Cartesian3(3, 0.0, 0.0), -1500.0), + new Cesium.ClippingPlane(new Cesium.Cartesian3(-3, 0.0, 0.0), -1500.0), + new Cesium.ClippingPlane(new Cesium.Cartesian3(0.0, 3, 0.0), -1500.0), + new Cesium.ClippingPlane(new Cesium.Cartesian3(0.0, -3, 0.0), -1500.0), + new Cesium.ClippingPlane(new Cesium.Cartesian3(0.0, 0.0, -5), 0.0) + ] + ``` + +**Step 5. 创建开挖分析**： +    化M3D模型层管理类 `CesiumZondy.Layer.M3DLayer` 并调用 `append()` 方法加载M3D数据后，创建 `Cesium.ClippingPlane()` 切面对象，创建分析功能管理类 `CesiumZondy.Manager.AnalysisManager()` ，调用 `createDynamicCutting()` 方法创建开挖分析对象, 并获取剖切切面； + +* Example: + ``` Javascript + //初始化分析功能管理类 + var analysisManager = new CesiumZondy.Manager.AnalysisManager({ + viewer: webGlobe.viewer + }); + //创建开挖分析实例 + dynaCut = analysisManager.createExcavateAnalysis({ + //图层信息 + tileSet: landscapeLayer[0], + //开挖面的形状 + planes: planes, + //裁剪面材质 + material: new Cesium.Color(0.2, 0.4, 0.3, 0.7), + //边界线颜色 + edgeColor: new Cesium.Color(0.2, 0.4, 0.3, 0.7), + //边界线宽度 + edgeWidth: 3, + //裁减法线方向，默认值为 false + unionClippingRegions: false, + //开挖坐标 + longitude: 113.0402, + latitude: 30.0264, + height: 0 + }); + ``` + +**Step 6. 设置剖切面距离**： +    通过设置切面回调函数，动态设置剖切面距离完成动态剖切分析。 + +* Example: + ``` Javascript + dynaCut.planes[0].plane.plane = new Cesium.CallbackProperty(function(date) { + console.log(planes); + for (var i = 0; i < planes.length; i++) { + if (i === planes.length - 1) { + var plane = planes[i]; + plane.distance = distance; + Cesium.Plane.transform(plane, landscapeLayer[0].modelMatrix, new Cesium.ClippingPlane(Cesium.Cartesian3.UNIT_X, 0.0)); + } + } + }, false); + ``` + +### 关键接口 + +#### 1.【三维视图的主要类】 `Cesium.WebSceneControl` + +#### 2.【M3D模型层管理类】 `CesiumZondy.Layer.M3DLayer` + +##### 【method】 `append(url, options)` ：添加M3D地图文档 + +|参数名|类型|说明| +|-|-|-| +|url|String|事件类型 LEFT_CLICK RIGHT_CLICK MOUSE_MOVE LEFT_DOUBLE_CLICK RIGHT_DOUBLE_CLICK WHEEL(鼠标滚轮)| +|options|Object|可选参数| + +* `options` 主要参数 + +|参数名|类型|默认值|说明| +|-|-|-|-| +|autoReset|Boolean|true|(可选)是否自动定位| +|synchronous|Boolean|true|(可选)是否异步请求| +|loaded|function|function|(可选)回调函数| +|proxy|DefaultProxy|defaultProxy|代理| +|showBoundingVolume|Boolean|false|是否显示包围盒| +|maximumScreenSpaceError|Number|16|用于控制模型显示细节| + +#### 3.【裁剪平面类】 `Cesium.ClippingPlane(normal, distance)` + +|参数名|类型|说 明| +|-|-|-| +|normal|Cartesian3|法线| +|distance|Number|最短距离| + +#### 4.【分析功能管理类】 `CesiumZondy.Manager.AnalysisManager` + +##### 【method】 `createExcavateAnalysis(option)`：创建开挖实例 + +|参数名|类型|说明| +|-|-|-| +|option|Object|参数设置| + +* `options` 主要参数 + +|参数名|类型|说明| +|---|---|---| +|tileSet|Object|图层信息| +|planes|Object|开挖面的形状| +|material|Object|裁剪面材质| +|edgeColor|Object|边界线颜色| +|edgeWidth|Object|边界线宽度| +|unionClippingRegions|Object|裁减法线方向，默认值为 false| +|longitude|Object|开挖面定位点经度| +|latitude|Object|开挖面定位点纬度| +|height|Object|开挖面定位点高度| \ No newline at end of file diff --git a/website/public/static/demo/cesium-new/markdown/analysis/analysis-explosion.md b/website/public/static/demo/cesium-new/markdown/analysis/analysis-explosion.md new file mode 100644 index 000000000..c829097b2 --- /dev/null +++ b/website/public/static/demo/cesium-new/markdown/analysis/analysis-explosion.md @@ -0,0 +1,92 @@ +## 爆炸分析 + +### 示例功能 + +    此功能用于将M3D数据爆炸分析，将数据朝指定炸开。 + +### 示例实现： + +    本示例需要使用【include-cesium-local.js】开发库实现，初始化Cesium三维球控件 `Cesium.WebSceneControl()` ，初始化M3D模型层管理类 `CesiumZondy.Layer.M3DLayer` 并调用 `append()` 方法加载M3D数据后，创建分析功能管理类 `CesiumZondy.Manager.AnalysisManager()` ，调用 `createExplosion()` 方法爆炸模型。 + +### 实现步骤： + +**Step 1. 引用开发库**： +    本示例引用local本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维WebGL的功能； + +**Step 2. 创建三维地图容器并加载三维球控件**： +    创建 `id='GlobeView'` 的div作为三维视图的容器，并设置其样式，初始化Cesium三维球控件 `Cesium.WebSceneControl()` ，完成此步后可在三维场景中加载三维球控件； + +* Example: + ``` Javascript + //构造三维视图类（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', { + terrainExaggeration: 1, + }); + ``` + +* Example: + ``` html +
+ ``` + +**Step 3. 加载数据**： +    初始化M3D模型层管理类 `CesiumZondy.Layer.M3DLayer` 并调用 `append()` 方法传入M3D数据服务地址，即可加载浏览数据； + +* Example: + ``` Javascript + //构造M3D模型层管理对象 + var m3dLayer = new CesiumZondy.Layer.M3DLayer({ + viewer: webGlobe.viewer + }); + //加载M3D地图文档（服务地址，配置参数） + landscapeLayer = m3dLayer.append('http://develop.smaryun.com:6163/igs/rest/g3d/ZondyModels', {}); + ``` + +**Step 4. 爆炸模型**： +    创建分析功能管理类 `CesiumZondy.Manager.AnalysisManager()` ，调用 `createExplosion()` 方法爆炸模型。 + +* Example: + ``` Javascript + //初始化分析功能管理类 + var analysisManager = new CesiumZondy.Manager.AnalysisManager({ + viewer: webGlobe.viewer + }); + analysisManager.createExplosion(option); + ``` + +### 关键接口 + +#### 1.【三维视图的主要类】 `Cesium.WebSceneControl` + +#### 2.【M3D模型层管理类】 `CesiumZondy.Layer.M3DLayer` + +##### 【method】 `append(url, options)` ：添加M3D地图文档 + +|参数名|类型|说明| +|-|-|-| +|url|String|事件类型 LEFT_CLICK RIGHT_CLICK MOUSE_MOVE LEFT_DOUBLE_CLICK RIGHT_DOUBLE_CLICK WHEEL(鼠标滚轮)| +|options|Object|可选参数| + +* `options` 主要参数 + +|参数名|类型|默认值|说明| +|-|-|-|-| +|autoReset|Boolean|true|(可选)是否自动定位| +|synchronous|Boolean|true|(可选)是否异步请求| +|loaded|function|function|(可选)回调函数| +|proxy|DefaultProxy|defaultProxy|代理| +|showBoundingVolume|Boolean|false|是否显示包围盒| +|maximumScreenSpaceError|Number|16|用于控制模型显示细节| + +#### 3.【分析功能管理类】 `CesiumZondy.Manager.AnalysisManager` + +##### 【method】 `createExplosion(options)` ：创建模型爆炸动画实例 + +* `options` 主要参数 + +|参数名|类型|说明| +|---|---|---| +|children|Array|当前图层子节点| +|center|Cartesian3|爆炸中心| +|direction|Cartesian3|图层整体爆炸方向| +|distance|Number|沿当前方向移动距离| \ No newline at end of file diff --git a/website/public/static/demo/cesium-new/markdown/analysis/analysis-floor.md b/website/public/static/demo/cesium-new/markdown/analysis/analysis-floor.md new file mode 100644 index 000000000..37dbb7a76 --- /dev/null +++ b/website/public/static/demo/cesium-new/markdown/analysis/analysis-floor.md @@ -0,0 +1,175 @@ +## 洪水淹没分析 + +### 示例功能 + +    此功能用于在三维场景中添加洪水淹没的效果。 + +### 示例实现： + +    本示例需要使用【include-cesium-local.js】开发库实现，初始化Cesium三维球控件 `Cesium.WebSceneControl()` ， 初始化M3D模型层管理类 `CesiumZondy.Layer.M3DLayer` 并调用 `append()` 方法加载M3D数据后，添加交互式绘制工具 `Cesium.DrawPolygonTool()` 选择绘制区域, 初始化高级分析功能管理类 `CesiumZondy.Manager.AdvancedAnalysisManager()` 对象，调用高级分析功能管理类的 `createFlood()` 方法创建洪水淹没分析示例，将结果显示到三维球控件上。 + +### 实现步骤： + +**Step 1. 引用开发库**： +    本示例引用local本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维WebGL的功能； + +**Step 2. 创建三维地图容器并加载三维球控件**： +    创建 `id='GlobeView'` 的div作为三维视图的容器，并设置其样式，初始化Cesium三维球控件 `Cesium.WebSceneControl()` ，完成此步后可在三维场景中加载三维球控件； + +* Example: + ``` Javascript + //构造三维视图类（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', { + terrainExaggeration: 1, + }); + ``` + +* Example: + ``` html +
+ ``` + +**Step 3. 加载数据**： +    初始化M3D模型层管理类 `CesiumZondy.Layer.M3DLayer` 并调用 `append()` 方法传入M3D数据服务地址，即可加载浏览数据； + +* Example: + ``` Javascript + //构造M3D模型层管理对象 + var m3dLayer = new CesiumZondy.Layer.M3DLayer({ + viewer: webGlobe.viewer + }); + //加载M3D地图文档（服务地址，配置参数） + geobodyLayer = m3dLayer.append('http://develop.smaryun.com:6163/igs/rest/g3d/ZondyModels', {}); + ``` + +**Step 4. 创建交互式绘制区工具**： +    初始化 `Cesium.DrawPolygonTool()` 对象，完成交互式绘制区工具的创建； + +* Example: + ``` Javascript + //创建交互式绘制区工具 + var drawPolygon = new Cesium.DrawPolygonTool(webGlobe.viewer, getDrawResult); + ``` + +**Step 5. 激活交互式绘制区工具**： +    调用 `Cesium.DrawPolygonTool()` 对象的activeTool()方法，激活交互式绘制区工具，完成此步后，可在三维场景中通过鼠标左键点击绘制多边形。 + +* Example: + ``` Javascript + //激活交互式绘制区工具 + drawPolygon.activeTool(); + ``` + +**Step 6. 统一高度**： +    将交互式选取的点的高度统一； + +* Example: + ``` Javascript + var array = new Array(); + for (let i = 0; i < e.points.length; i++) { + let point = e.points[i]; + let resPoint = new Cesium.Cartesian3; + let invserTran = new Cesium.Matrix4; + Cesium.Matrix4.inverse(tileset[0].root.transform, invserTran); + Cesium.Matrix4.multiplyByPoint(invserTran, point, resPoint); + array.push(new Cesium.Cartesian3(resPoint.x, resPoint.y, resPoint.z)); + } + var hight = null; + for (var arraylength = 0; arraylength < array.length; arraylength++) { + hight = hight < array[arraylength].z ? array[arraylength].z : hight; + } + var newArray = new Array(); + for (var arraylength = 0; arraylength < array.length; arraylength++) { + array[arraylength].z = hight; + let point = array[arraylength]; + let resPoint = new Cesium.Cartesian3; + let invserTran = new Cesium.Matrix4; + Cesium.Matrix4.multiplyByPoint(tileset[0].root.transform, point, resPoint); + newArray.push(new Cesium.Cartesian3(resPoint.x, resPoint.y, resPoint.z)); + } + ``` + +**Step 7. 创建洪水淹没分析**： +    初始化高级分析功能管理类 `CesiumZondy.Manager.AdvancedAnalysisManager()` 对象，调用高级分析功能管理类的 `createFlood()` 方法创建洪水淹没分析示例； + +* Example: + ``` Javascript + //初始化高级分析功能管理类 + var advancedAnalysisManager = new CesiumZondy.Manager.AdvancedAnalysisManager({ + viewer: viewer + }); + //初始化洪水淹没分析类 + flood = advancedAnalysisManager.createFlood(); + //设置洪水淹没分析区域点集 + flood.dotsList = newArray; + //设置洪水淹没区域最底高度 + flood.minHeight = Number(document.getElementById('minHeight').value <= 0 ? 0 : document.getElementById('minHeight').value); + //设置洪水淹没区域最高高度 + flood.maxHeight = Number(document.getElementById('maxHeight').value <= 0 ? 30 : document.getElementById('maxHeight').value); + //设置洪水上涨速度 + flood.floodSpeed = Number(document.getElementById('floodSpeed').value <= 0 ? 1 : document.getElementById('floodSpeed').value); + //水纹频率 指波浪的个数 + flood.frequency = Number(document.getElementById('frequency').value <= 0 ? 1000 : document.getElementById('frequency').value); + //水纹速度 + flood.animationSpeed = Number(document.getElementById('animationSpeed').value <= 0 ? 0.01 : document.getElementById('animationSpeed').value); + //水波的高度 + flood.amplitude = Number(document.getElementById('amplitude').value <= 0 ? 10 : document.getElementById('amplitude').value); + //指定水面颜色 和 透明度 + flood.floodColor = new Cesium.Color(0.2, 0.5, 0.4, 0.7); + // 指定光线强度 + flood.specularIntensity = 3.0; + ``` + +**Step 8. 洪水淹没结果显示**： +    将结果显示到三维球控件上。 + +* Example: + ``` Javascript + //添加洪水淹没结果显示 + webGlobe.scene.VisualAnalysisManager.add(flood); + ``` + +### 关键接口 + +#### 1.【三维视图的主要类】 `Cesium.WebSceneControl` + +#### 2.【M3D模型层管理类】 `CesiumZondy.Layer.M3DLayer` + +##### 【method】 `append(url, options)` ：添加M3D地图文档 + +|参数名|类型|说明| +|-|-|-| +|url|String|事件类型 LEFT_CLICK RIGHT_CLICK MOUSE_MOVE LEFT_DOUBLE_CLICK RIGHT_DOUBLE_CLICK WHEEL(鼠标滚轮)| +|options|Object|可选参数| + +* `options` 主要参数 + +|参数名|类型|默认值|说明| +|-|-|-|-| +|autoReset|Boolean|true|(可选)是否自动定位| +|synchronous|Boolean|true|(可选)是否异步请求| +|loaded|function|function|(可选)回调函数| +|proxy|DefaultProxy|defaultProxy|代理| +|showBoundingVolume|Boolean|false|是否显示包围盒| +|maximumScreenSpaceError|Number|16|用于控制模型显示细节| + +#### 3. 【交互式绘制区工具类】 `Cesium.DrawPolygonTool` + +|参数名|类型|说 明| +|-|-|-| +|viewer|View|视图| +|getDrawResult|function|回调函数| + +##### 【method】 `activeTool()` ：激活交互式绘制区工具方法 + +#### 4.【高级分析功能管理类】`CesiumZondy.Manager.AdvancedAnalysisManager` + +##### 【method】 `createFlood(options)`： 创建填挖方实例 + +* `options` 主要参数 + +|参数名|类型|说 明| +|-|-|-| +|minHeight|Number|最低洪水水位高度| +|maxHeight|Number|最高洪水水位高度| +|floodSpeed|Number|洪水上涨速度| diff --git a/website/public/static/demo/cesium-new/markdown/analysis/analysis-modelflatten.md b/website/public/static/demo/cesium-new/markdown/analysis/analysis-modelflatten.md new file mode 100644 index 000000000..9d5ac0cb2 --- /dev/null +++ b/website/public/static/demo/cesium-new/markdown/analysis/analysis-modelflatten.md @@ -0,0 +1,161 @@ +## 模型压平 + +### 示例功能 + +    此功能用于将加载完成的M3D数据进行压平处理。 + +### 示例实现： + +    本示例需要使用【include-cesium-local.js】开发库实现，初始化Cesium三维球控件 `Cesium.WebSceneControl()` ， 初始化M3D模型层管理类 `CesiumZondy.Layer.M3DLayer` 并调用 `append()` 方法加载M3D数据后，添加交互式绘制工具 `Cesium.DrawPolygonTool()` 选择绘制区域, 初始化高级分析功能管理类 `CesiumZondy.Manager.AdvancedAnalysisManager()` 对象，调用高级分析功能管理类的 `createModelFlatten()` 方法，创建模型压平分析，将结果显示到三维球控件上。 + +### 实现步骤： + +**Step 1. 引用开发库**： +    本示例引用local本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维WebGL的功能； + +**Step 2. 创建三维地图容器并加载三维球控件**： +    创建 `id='GlobeView'` 的div作为三维视图的容器，并设置其样式，初始化Cesium三维球控件 `Cesium.WebSceneControl()` ，完成此步后可在三维场景中加载三维球控件； + +* Example: + ``` Javascript + //构造三维视图类（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', { + terrainExaggeration: 1, + }); + ``` + +* Example: + ``` html +
+ ``` + +**Step 3. 加载数据**： +    初始化M3D模型层管理类 `CesiumZondy.Layer.M3DLayer` 并调用 `append()` 方法传入M3D数据服务地址，即可加载浏览数据； + +* Example: + ``` Javascript + //构造M3D模型层管理对象 + var m3dLayer = new CesiumZondy.Layer.M3DLayer({ + viewer: webGlobe.viewer + }); + //加载M3D地图文档（服务地址，配置参数） + landscapeLayer = m3dLayer.append('http://develop.smaryun.com:6163/igs/rest/g3d/ZondyModels', {}); + ``` + +**Step 4. 创建交互式绘制区工具**： +    初始化 `Cesium.DrawPolygonTool()` 对象，完成交互式绘制区工具的创建； + +* Example: + ``` Javascript + //创建交互式绘制区工具 + var drawPolygon = new Cesium.DrawPolygonTool(webGlobe.viewer, getDrawResult); + ``` + +**Step 5. 激活交互式绘制区工具**： +    调用 `Cesium.DrawPolygonTool()` 对象的activeTool()方法，激活交互式绘制区工具，完成此步后，可在三维场景中通过鼠标左键点击绘制多边形。 + +* Example: + ``` Javascript + //激活交互式绘制区工具 + drawPolygon.activeTool(); + ``` + +**Step 6. 顶点处理**： +    将交互式选取的点处理； + +* Example: + ``` Javascript + /*对绘制区域的顶点循环处理一下，以便用于模型压平参数的赋值*/ + var array = []; + for (let i = 0; i < positionsArray.length; i++) { + let point = positionsArray[i]; + let resPoint = new Cesium.Cartesian3; + let invserTran = new Cesium.Matrix4; + Cesium.Matrix4.inverse(tileset[0]._root.transform, invserTran); + Cesium.Matrix4.multiplyByPoint(invserTran, point, resPoint); + resPoint.y = -resPoint.y; + array.push(new Cesium.Cartesian2(resPoint.x, resPoint.y)); + } + array.push(array[0]); + ``` + +**Step 7. 创建模型压平分析**： +    初始化高级分析功能管理类 `CesiumZondy.Manager.AdvancedAnalysisManager()` 对象，调用高级分析功能管理类的 `createModelFlatten()` 方法，创建模型压平分析 + +* Example: + ``` Javascript + //初始化高级分析功能管理类 + var advancedAnalysisManager = new CesiumZondy.Manager.AdvancedAnalysisManager({ + viewer: webGlobe.viewer + }); + advancedAnalysisManager.createModelFlatten(landscapeLayer[0], { + //是否进行压平。值为true时执行压平 + isFlatten: true, + //将高度压到0 + height: 0, + //压平多边形的顶点序列长度 + arrayLength: positionsArray.length, + //顶点序列。顶点序列需要闭合，也就是说，例如一个矩形是四个顶点ABCD，那序列就应该是【ABCDA】 + array: array + }); + ``` + +**Step 8. 结果显示**： +    将结果显示到三维球控件上。 + +* Example: + ``` Javascript + //场景渲染（渲染最新的压平效果） + webGlobe.viewer.scene.requestRender(); + ``` + +### 关键接口 + +#### 1.【三维视图的主要类】 `Cesium.WebSceneControl` + +#### 2.【M3D模型层管理类】 `CesiumZondy.Layer.M3DLayer` + +##### 【method】 `append(url, options)`：添加M3D地图文档 + +|参数名|类型|说明| +|-|-|-| +|url|String|事件类型 LEFT_CLICK RIGHT_CLICK MOUSE_MOVE LEFT_DOUBLE_CLICK RIGHT_DOUBLE_CLICK WHEEL(鼠标滚轮)| +|options|Object|可选参数| + +* `options` 主要参数 + +|参数名|类型|默认值|说明| +|-|-|-|-| +|autoReset|Boolean|true|(可选)是否自动定位| +|synchronous|Boolean|true|(可选)是否异步请求| +|loaded|function|function|(可选)回调函数| +|proxy|DefaultProxy|defaultProxy|代理| +|showBoundingVolume|Boolean|false|是否显示包围盒| +|maximumScreenSpaceError|Number|16|用于控制模型显示细节| + +#### 3. 【交互式绘制区工具类】 `Cesium.DrawPolygonTool` + +|参数名|类型|说 明| +|-|-|-| +|viewer|View|视图| +|getDrawResult|function|回调函数| + +##### 【method】 `activeTool()` ：激活交互式绘制区工具方法 + +#### 4.【高级分析功能管理类】`CesiumZondy.Manager.AdvancedAnalysisManager` + +##### 【method】 `createModelFlatten(tileset, options)` ：创建模型压平分析实例 + +|参数名|类型|说 明| +|-|-|-| +|tileset|object|图层信息| +|options|object|参数设置| + +* `options` 主要参数 + +|参数名|类型|说 明| +|-|-|-| +|isFlatten|Boolean|是否执行模型压平| +|height|Number|压平到指定高度| +|arrayLength|Number|压平区域顶点数组长度| +|array|Array|压平区域顶点数组| \ No newline at end of file diff --git a/website/public/static/demo/cesium-new/markdown/analysis/analysis-rollershutters.md b/website/public/static/demo/cesium-new/markdown/analysis/analysis-rollershutters.md new file mode 100644 index 000000000..aa9506ede --- /dev/null +++ b/website/public/static/demo/cesium-new/markdown/analysis/analysis-rollershutters.md @@ -0,0 +1,153 @@ +## 卷帘分析 + +### 示例功能 + +    此功能对已加载的两个M3D数据进行任意距离的剖切，动态的显示或隐藏一部分数据，一个显示的同时不显示另一个数据，打到卷帘效果。 + +### 示例实现： + +    本示例需要使用【include-cesium-local.js】开发库实现，初始化Cesium三维球控件 `Cesium.WebSceneControl()` ，初始化M3D模型层管理类 `CesiumZondy.Layer.M3DLayer` 并调用 `append()` 方法加载M3D数据后，创建分析功能管理类 `CesiumZondy.Manager.AnalysisManager()` ，调用 `createDynamicCutting()` 方法创建两个M3D数据的切面对象通过设置剖切面距离进行数据剖切分析。 + +### 实现步骤： + +**Step 1. 引用开发库**： +    本示例引用local本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维WebGL的功能； + +**Step 2. 创建三维地图容器并加载三维球控件**： +    创建 `id='GlobeView'` 的div作为三维视图的容器，并设置其样式，初始化Cesium三维球控件 `Cesium.WebSceneControl()` ，完成此步后可在三维场景中加载三维球控件； + +* Example: + ``` Javascript + //构造三维视图类（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', { + terrainExaggeration: 1, + }); + ``` + + * Example: + ``` html +
+ ``` + +**Step 3. 加载数据**： +    初始化M3D模型层管理类 `CesiumZondy.Layer.M3DLayer` 并调用 `append()` 方法传入M3D数据服务地址，即可加载浏览数据； + +* Example: + ``` Javascript + //构造M3D模型层管理对象 + var m3dLayer = new CesiumZondy.Layer.M3DLayer({ + viewer: webGlobe.viewer + }); + var drilllayer = m3dLayer.append( + "http://develop.smaryun.com:6163/igs/rest/g3d/钻孔_2_钻孔模型s", { + autoReset: false, + } + ); + //加载M3D地图文档（服务地址，配置参数） + landscapeLayer = m3dLayer.append('http://develop.smaryun.com:6163/igs/rest/g3d/钻孔分层点_Sur_000_Ent', {}); + ``` + +**Step 4. 地图跳转**： +    调用视图功能管理类 CesiumZondy. Manager. SceneManager() ` 的 ` flyToEx()` 方法跳转到数据显示的范围； + +* Example: + ``` Javascript + //初始化视图功能管理类 + var sceneManager = new CesiumZondy.Manager.SceneManager({ + viewer: webGlobe.viewer + }); + //视点跳转 + sceneManager.flyToEx(112.94845170512113, 30.004246325952618, { + height: 2600, + heading: 67, + pitch: -30, + roll: 0 + }); + ``` + +**Step 5. 创建切面对象**： +    创建切面对象 `Cesium.ClippingPlane()` ; + +* Example: + ``` Javascript + //进行剖切分析的面，向右切 + var plane = new Cesium.ClippingPlane(new Cesium.Cartesian3(1, 0, 0), -200.0) + //进行剖切分析的面，向左切 + var plane1 = new Cesium.ClippingPlane(new Cesium.Cartesian3(-1, 0, 0), -200.0) + ``` + +**Step 6. 创建剖切对象**： +    创建分析功能管理类 `CesiumZondy.Manager.AnalysisManager()` ，调用 `createDynamicCutting()` 方法创建剖切对象实例, 并获取剖切切面； + +* Example: + ``` Javascript + //初始化分析功能管理类 + var analysisManager = new CesiumZondy.Manager.AnalysisManager({ + viewer: webGlobe.viewer + }); + //创建剖切对象实例 + dynaCut = analysisManager.createDynamicCutting(landscapeLayer, [plane], { + color: new Cesium.Color(0.0, 1.0, 1.0, 0.3) + }); + ``` + +**Step 7. 通过切面回调完成动态剖切分析**： +    通过设置切面回调函数，动态设置剖切面距离完成动态剖切分析。 + +* Example: + ``` Javascript + //设置切面回调函数 + planetEntity.plane.plane = new Cesium.CallbackProperty(function(date) { + //设置剖切面距离 + plane.distance = distance; + return Cesium.Plane.transform(plane, tileset[0].modelMatrix, new Cesium.ClippingPlane(Cesium.Cartesian3.UNIT_X, 0.0)); + }, false); + //设置切面回调函数 + planetEntity1.plane.plane = new Cesium.CallbackProperty(function(date) { + //设置剖切面距离 + plane1.distance = distance1; + return Cesium.Plane.transform(plane1, tileset[0].modelMatrix, new Cesium.ClippingPlane(Cesium.Cartesian3.UNIT_X, 0.0)); + }, false); + ``` + +### 关键接口 + +#### 1.【三维视图的主要类】 `Cesium.WebSceneControl` + +#### 2.【M3D模型层管理类】 `CesiumZondy.Layer.M3DLayer` + +##### 【method】 `append(url, options)`：添加M3D地图文档 + +|参数名|类型|说明| +|-|-|-| +|url|String|事件类型 LEFT_CLICK RIGHT_CLICK MOUSE_MOVE LEFT_DOUBLE_CLICK RIGHT_DOUBLE_CLICK WHEEL(鼠标滚轮)| +|options|Object|可选参数| + +* `options` 主要参数 + +|参数名|类型|默认值|说明| +|-|-|-|-| +|autoReset|Boolean|true|(可选)是否自动定位| +|synchronous|Boolean|true|(可选)是否异步请求| +|loaded|function|function|(可选)回调函数| +|proxy|DefaultProxy|defaultProxy|代理| +|showBoundingVolume|Boolean|false|是否显示包围盒| +|maximumScreenSpaceError|Number|16|用于控制模型显示细节| + +#### 3. 【裁剪平面类】 `Cesium.ClippingPlane` + +|参数名|类型|说 明| +|-|-|-| +|normal|Cartesian3|法线| +|distance|Number|最短距离| + +#### 4.【分析功能管理类】 `CesiumZondy.Manager.AnalysisManager` + +##### 【method】 `createDynamicCutting(tileSets, planes, options)` ：创建动态剖切实例 + +|参数名|类型|说明| +|-|-|-| +|tileSets|Object|图层集| +|planes|Object|平面集| +|options|Object|暂无| + diff --git a/website/public/static/demo/cesium-new/markdown/analysis/analysis-sceneprojection.md b/website/public/static/demo/cesium-new/markdown/analysis/analysis-sceneprojection.md new file mode 100644 index 000000000..d78897174 --- /dev/null +++ b/website/public/static/demo/cesium-new/markdown/analysis/analysis-sceneprojection.md @@ -0,0 +1,125 @@ +## 场景投放 + +### 示例功能 + +    此功能用于在三维场景中加载色块、图片、视屏等功能。 + +### 示例实现： + +    本示例需要使用【include-cesium-local.js】开发库实现，初始化Cesium三维球控件 `Cesium.WebSceneControl()` ，初始化M3D模型层管理类 `CesiumZondy.Layer.M3DLayer` 并调用 `append()` 方法加载M3D数据后，通过Cesium三维球控件 `Cesium.WebSceneControl()` 对象的 `registerMouseEvent()` 方法在三维场景里面自定义注册鼠标事件完成场景投放点的拾取，初始化高级分析功能管理类 `CesiumZondy.Manager.AdvancedAnalysisManager()` 对象，调用高级分析功能管理类的 `createSceneProjector` 方法创建场景投放示例，实现场景投影分析。 + +### 实现步骤： + +**Step 1. 引用开发库**： +    本示例引用local本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维WebGL的功能； + +**Step 2. 创建三维地图容器并加载三维球控件**： +    创建 `id='GlobeView'` 的div作为三维视图的容器，并设置其样式，初始化Cesium三维球控件 `Cesium.WebSceneControl()` ，完成此步后可在三维场景中加载三维球控件； + +* Example: + ``` Javascript + //构造三维视图类（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', { + terrainExaggeration: 1, + }); + ``` + +* Example: + ``` html +
+ ``` + +**Step 3. 加载数据**： +    初始化M3D模型层管理类 `CesiumZondy.Layer.M3DLayer` 并调用 `append()` 方法传入M3D数据服务地址，即可加载浏览数据； + +* Example: + ``` Javascript + //构造M3D模型层管理对象 + var m3dLayer = new CesiumZondy.Layer.M3DLayer({ + viewer: webGlobe.viewer + }); + //加载M3D地图文档（服务地址，配置参数） + landscapeLayer = m3dLayer.append('http://develop.smaryun.com:6163/igs/rest/g3d/ZondyModels', {}); + ``` + +**Step 4. 创建场景投影对象**： +    初始化高级分析功能管理类 `CesiumZondy.Manager.AdvancedAnalysisManager()` 对象，调用高级分析功能管理类的 `createSceneProjector` 方法创建场景投放示例; + +* Example: + ``` Javascript + //初始化高级分析功能管理类 + var advancedAnalysisManager = new CesiumZondy.Manager.AdvancedAnalysisManager({ + viewer: viewer + }); + //初始化场景投影对象 + scenePro = advancedAnalysisManager.createSceneProjector(2); + ``` + +**Step 5. 注册鼠标事件**： +    调用Cesium三维球控件 `Cesium.WebSceneControl()` 的 `registerMouseEvent()` 方法注册鼠标事件, 以下事例中的匿名函数为触发鼠标事件后执行的方法，完成此步后，在三维场景中点击鼠标左键可触发点击事件，点击完成后进入匿名函数； + +* Example: + ``` Javascript + //注册事件 + webGlobe.registerMouseEvent('LEFT_CLICK', function(e) {}); + webGlobe.registerMouseEvent('RIGHT_CLICK', function(e) {}); + ``` + +**Step 6. 设置场景投影参数**： +    给场景投影对象设置进行场景投影使用的必要参数。 + +* Example: + ``` Javascript + //设置投影观察点 + scenePro.viewPosition = cartesian; + //数据url路径 + scenePro.textureSource = './static/data/picture/world.jpg'; + //设置场景投影结果点 + scenePro.targetPosition = cartesian; + ``` + +### 关键接口 + +#### 1.【三维视图的主要类】 `Cesium.WebSceneControl` + +##### 【method】 `registerMouseEvent(eventType, callbackFun, handler)`：注册鼠标事件方法 + +|参数名|类型|说明| +|-|-|-| +|eventType|String|事件类型 LEFT_CLICK RIGHT_CLICK MOUSE_MOVE LEFT_DOUBLE_CLICK RIGHT_DOUBLE_CLICK WHEEL(鼠标滚轮)| +|callbackFun|function|回调函数| +|handler|Object|回调函数| + +##### 【method】 `unRegisterMouseEvent(eventType)`：注销鼠标事件方法 + +|参数名|类型|说明| +|-|-|-| +|eventType|String|事件类型 LEFT_CLICK RIGHT_CLICK MOUSE_MOVE LEFT_DOUBLE_CLICK RIGHT_DOUBLE_CLICK WHEEL(鼠标滚轮)| + +#### 2.【M3D模型层管理类】 `CesiumZondy.Layer.M3DLayer` + +##### 【method】 `append(url, options)`：添加M3D地图文档 + +|参数名|类型|说明| +|-|-|-| +|url|String|事件类型 LEFT_CLICK RIGHT_CLICK MOUSE_MOVE LEFT_DOUBLE_CLICK RIGHT_DOUBLE_CLICK WHEEL(鼠标滚轮)| +|options|Object|可选参数| + +* `options` 主要参数 + +|参数名|类型|默认值|说明| +|-|-|-|-| +|autoReset|Boolean|true|(可选)是否自动定位| +|synchronous|Boolean|true|(可选)是否异步请求| +|loaded|function|function|(可选)回调函数| +|proxy|DefaultProxy|defaultProxy|代理| +|showBoundingVolume|Boolean|false|是否显示包围盒| +|maximumScreenSpaceError|Number|16|用于控制模型显示细节| + +#### 3.【高级分析功能管理类】`CesiumZondy.Manager.AdvancedAnalysisManager` + +##### 【method】 `createSceneProjector(type) `：创建场景投放实例 + +|参数名|类型|说明| +|-|-|-| +|type|Number|场景投放的类型| diff --git a/website/public/static/demo/cesium-new/markdown/analysis/analysis-skyline.md b/website/public/static/demo/cesium-new/markdown/analysis/analysis-skyline.md new file mode 100644 index 000000000..37554c534 --- /dev/null +++ b/website/public/static/demo/cesium-new/markdown/analysis/analysis-skyline.md @@ -0,0 +1,85 @@ +## 天际线 + +### 示例功能 + +    此功能用于检测当前视角的天际线，并绘制在三维场景中。 + +### 示例实现： + +    本示例需要使用【include-cesium-local.js】开发库实现，初始化 Cesium 三维球控件 `Cesium.WebSceneControl()` ，初始化 M3D 模型层管理类 `CesiumZondy.Layer.M3DLayer` 并调用 `append()` 方法加载 M3D 数据后，初始化高级分析功能管理类 `CesiumZondy.Manager.AdvancedAnalysisManager()` 对象，调用高级分析功能管理类的 `createSkyLine()` 方法创建天际线分析。 + +### 实现步骤： + +**Step 1. 引用开发库**： +    本示例引用 local 本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维 WebGL 的功能； + +**Step 2. 创建三维地图容器并加载三维球控件**： +    创建 `id='GlobeView'` 的 div 作为三维视图的容器，并设置其样式，初始化 Cesium 三维球控件 `Cesium.WebSceneControl()` ，完成此步后可在三维场景中加载三维球控件； + +- Example: + + ```Javascript + //构造三维视图类（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', { + terrainExaggeration: 1, + }); + ``` + +- Example: + ```html +
+ ``` + +**Step 3. 加载数据**： +    初始化 M3D 模型层管理类 `CesiumZondy.Layer.M3DLayer` 并调用 `append()` 方法传入 M3D 数据服务地址，即可加载浏览数据； + +- Example: + ```Javascript + //构造M3D模型层管理对象 + var m3dLayer = new CesiumZondy.Layer.M3DLayer({ + viewer: webGlobe.viewer + }); + //加载M3D地图文档（服务地址，配置参数） + landscapeLayer = m3dLayer.append('http://develop.smaryun.com:6163/igs/rest/g3d/ZondyModels', {}); + ``` + +**Step 4. 创建天际线分析**： +    初始化高级分析功能管理类 `CesiumZondy.Manager.AdvancedAnalysisManager()` 对象，调用高级分析功能管理类的 `createSkyLine()` 方法创建天际线分析。 + +- Example: + ```Javascript + //初始化高级分析功能管理类 + var advancedAnalysisManager = new CesiumZondy.Manager.AdvancedAnalysisManager({ + viewer: webGlobe.viewer + }); + //创建天际线实例 + skyLineAn = advancedAnalysisManager.createSkyLine() + ``` + +### 关键接口 + +#### 1.【三维视图的主要类】 `Cesium.WebSceneControl` + +#### 2.【M3D 模型层管理类】 `CesiumZondy.Layer.M3DLayer` + +##### 【method】 `append(url, options)` ：添加 M3D 地图文档 + +| 参数名 | 类型 | 说明 | +| ------- | ------ | ----------------------------------------------------------------------------------------------- | +| url | String | 事件类型 LEFT_CLICK RIGHT_CLICK MOUSE_MOVE LEFT_DOUBLE_CLICK RIGHT_DOUBLE_CLICK WHEEL(鼠标滚轮) | +| options | Object | 可选参数 | + +- `options` 主要参数 + +| 参数名 | 类型 | 默认值 | 说明 | +| ----------------------- | ------------ | ------------ | -------------------- | +| autoReset | Boolean | true | (可选)是否自动定位 | +| synchronous | Boolean | true | (可选)是否异步请求 | +| loaded | function | function | (可选)回调函数 | +| proxy | DefaultProxy | defaultProxy | 代理 | +| showBoundingVolume | Boolean | false | 是否显示包围盒 | +| maximumScreenSpaceError | Number | 16 | 用于控制模型显示细节 | + +#### 3.【高级分析功能管理类】`CesiumZondy.Manager.AdvancedAnalysisManager` + +##### 【method】 `createSkyLine()` ：创建天际线实例 diff --git a/website/public/static/demo/cesium-new/markdown/analysis/analysis-slopeAnalysis.md b/website/public/static/demo/cesium-new/markdown/analysis/analysis-slopeAnalysis.md new file mode 100644 index 000000000..3af23ea97 --- /dev/null +++ b/website/public/static/demo/cesium-new/markdown/analysis/analysis-slopeAnalysis.md @@ -0,0 +1,99 @@ +## 坡度分析 + +### 示例功能 + +    此功能用于地形数据的坡度分析。 坡度是指过地表一点的切平面与水平面的夹角，描述地表面在该点的倾斜程度。坡度分析的作用是：影响地表物质流动与能量转换的规模与强度，制约生产力空间布局。 + +### 示例实现： + +    本示例需要使用【include-cesium-local.js】开发库实现，初始化 Cesium 三维球控件 `Cesium.WebSceneControl()` ，初始化地形图层管理类 `CesiumZondy.Layer.TerrainLayer` 并调用 `append()` 方法加载地形数据后，跳转视点，创建高级分析功能管理类 `CesiumZondy.Manager.AdvancedAnalysisManager()` ，调用 `createSlopeAnalysis()` 方法进行坡度分析。 + +### 实现步骤： + +**Step 1. 引用开发库**： +    本示例引用 local 本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维 WebGL 的功能； + +**Step 2. 创建三维地图容器并加载三维球控件**： +    创建 `id='GlobeView'` 的 div 作为三维视图的容器，并设置其样式，初始化 Cesium 三维球控件 `Cesium.WebSceneControl()` ，完成此步后可在三维场景中加载三维球控件； + +- Example: + + ```Javascript + //构造三维视图类（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', { + terrainExaggeration: 1, + }); + ``` + +- Example: + ```html +
+ ``` + +**Step 3. 加载数据**： +    初始化地形图层管理类 `CesiumZondy.Layer.TerrainLayer` 并调用 `append()` 方法传入三维地形数据地图服务地址，即可加载浏览数据； + +- Example: + ```Javascript + //构造地形图层管理类 + var terrain = new CesiumZondy.Layer.TerrainLayer({ + viewer: webGlobe.viewer + }); + //加载三维地形地图文档（服务地址，配置参数） + var { protocol, ip, port } = window.webclient; + var terrainlayer = terrain.append(`http://develop.smaryun.com:6163/igs/rest/g3d/terrain`, {}); + //初始化视图功能管理类 + var sceneManager = new CesiumZondy.Manager.SceneManager({ + viewer: webGlobe.viewer + }); + ``` + +**Step 4. 坡度分析**： +    创建高级分析功能管理类 `CesiumZondy.Manager.AdvancedAnalysisManager()` ，调用 `createSlopeAnalysis()` 方法进行坡度分析。 + +- Example: + ```Javascript + //初始化高级分析功能管理类 + var advancedAnalysisManager = new CesiumZondy.Manager.AdvancedAnalysisManager({ + viewer: webGlobe.viewer + }); + webGlobe.viewer.scene.globe.depthTestAgainstTerrain = true; + //进行坡度分析 + var slopeAna = advancedAnalysisManager.createSlopeAnalysis([ + Cesium.Color.ALICEBLUE, + Cesium.Color.ANTIQUEWHITE, + Cesium.Color.AQUA, + Cesium.Color.AQUAMARINE, + Cesium.Color.AZURE, + Cesium.Color.BEIGE + ]); + ``` + +### 关键接口 + +#### 1.【三维视图的主要类】 `Cesium.WebSceneControl` + +#### 2.【地形图层管理类】`CesiumZondy.Layer.TerrainLayer` + +##### 【method】 `append(url, options)` ：添加地形地图文档 + +| 参数名 | 类型 | 说明 | +| ------- | ------ | ----------------------------------------------------------------------------------------------- | +| url | String | 事件类型 LEFT_CLICK RIGHT_CLICK MOUSE_MOVE LEFT_DOUBLE_CLICK RIGHT_DOUBLE_CLICK WHEEL(鼠标滚轮) | +| options | Object | 可选参数 | + +- `options` 主要参数 + +| 参数名 | 类型 | 默认值 | 说明 | +| ----------- | ------------ | -------- | ------------------ | +| synchronous | Boolean | true | (可选)是否异步请求 | +| loaded | function | function | (可选)回调函数 | +| 代理 | DefaultProxy | 暂无 | 暂无 | + +#### 3.【高级分析功能管理类】`CesiumZondy.Manager.AdvancedAnalysisManager` + +##### 【method】 `createSlopeAnalysis(color) → {Object}`： 坡度分析，返回坡度分析实例 + +| 参数名 | 类型 | 说 明 | +| ------ | ------------- | ------------------------- | +| color | Array. | 坡度分层颜色信息，分 6 层 | diff --git a/website/public/static/demo/cesium-new/markdown/analysis/analysis-visibility.md b/website/public/static/demo/cesium-new/markdown/analysis/analysis-visibility.md new file mode 100644 index 000000000..45cdf8ce3 --- /dev/null +++ b/website/public/static/demo/cesium-new/markdown/analysis/analysis-visibility.md @@ -0,0 +1,116 @@ +## 通视分析 + +### 示例功能 + +    此功能用于检测当前三维场景中两点之间是否可以没有阻碍的看到。 + +### 示例实现： + +    本示例需要使用【include-cesium-local.js】开发库实现，通过 Cesium 三维球控件 `Cesium.WebSceneControl()` 的 `append()` 加载 M3D 数据后，通过 Cesium 三维球控件 `Cesium.WebSceneControl()` 对象的 `registerMouseEvent()` 方法在三维场景里面自定义注册鼠标事件完成通视分析两个点的拾取，通过两点通视分析对象 `Cesium.VisiblityAnalysis()`实现两点通视分析。 + +### 实现步骤： + +**Step 1. 引用开发库**： +    本示例引用 local 本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维 WebGL 的功能； + +**Step 2. 创建三维地图容器并加载三维球控件**： +    创建 `id='GlobeView'` 的 div 作为三维视图的容器，并设置其样式，初始化 Cesium 三维球控件 `Cesium.WebSceneControl()` ，完成此步后可在三维场景中加载三维球控件； + +- Example: + + ```Javascript + //构造三维视图类（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', { + terrainExaggeration: 1, + }); + ``` + +- Example: + ```html +
+ ``` + +**Step 3. 加载数据**： +    调用 Cesium 三维球控件 `Cesium.WebSceneControl()` 的 `append()` 方法传入 M3D 数据服务地址，即可加载浏览数据； + +- Example: + ```Javascript + //加载数据 + var tileset = webGlobe.append('http://develop.smaryun.com:6163/igs/rest/g3d/M3D', {}); + ``` + +**Step 4. 创建通视分析**： +    初始化两点通视分析对象 `Cesium.VisiblityAnalysis()` ; + +- Example: + ```Javascript + //初始化通视分析类 + visiblity = new Cesium.VisiblityAnalysis(); + ``` + +**Step 5. 添加通视分析**： +    将两点通视分析对象 `Cesium.VisiblityAnalysis()` 添加到 Cesium 三维球控件中; + +- Example: + ```Javascript + //添加通视分析显示 + viewer.scene.VisualAnalysisManager.add(visiblity); + ``` + +**Step 6. 注册鼠标事件**： +    调用 Cesium 三维球控件 `Cesium.WebSceneControl()` 的 `registerMouseEvent()` 方法注册鼠标事件, 以下事例中的匿名函数为触发鼠标事件后执行的方法，完成此步后，在三维场景中点击鼠标左键可触发点击事件，点击完成后进入匿名函数； + +- Example: + ```Javascript + //注册事件 + webGlobe.registerMouseEvent('LEFT_CLICK', function(e) {}); + webGlobe.registerMouseEvent('RIGHT_CLICK', function(e) {}); + webGlobe.registerMouseEvent('MOUSE_MOVE', function(e) {}); + ``` + +**Step 7. 设置两点通视分析参数**： +    给两点通视分析对象设置进行两点通视分析使用的必要参数。 + +- Example: + ```Javascript + //设置通视分析观察点 + visiblity.viewPosition = cartesian; + //设置通视分析结果点 + visiblity.targetPosition = cartesian; + ``` + +### 关键接口 + +#### 1. 【三维视图的主要类】`Cesium.WebSceneControl(elementId, options)` + +##### 【method】 `append(url, options, 代理)` ：添加地图文档 + +| 参数名 | 类型 | 说明 | +| ------- | ------------ | ----------------------------------------------------------------------------------------------- | +| url | String | 事件类型 LEFT_CLICK RIGHT_CLICK MOUSE_MOVE LEFT_DOUBLE_CLICK RIGHT_DOUBLE_CLICK WHEEL(鼠标滚轮) | +| options | Object | 可选参数 | +| 代理 | DefaultProxy | 暂无 | + +- `options` 主要参数 + +| 参数名 | 类型 | 默认值 | 说明 | +| ----------- | -------- | -------- | ------------------ | +| autoReset | Boolean | true | (可选)是否自动定位 | +| synchronous | Boolean | true | (可选)是否异步请求 | +| loaded | function | function | (可选)回调函数 | + +##### 【method】 `registerMouseEvent(eventType, callbackFun, handler)` ：注册鼠标事件方法 + +| 参数名 | 类型 | 说明 | +| ----------- | -------- | ----------------------------------------------------------------------------------------------- | +| eventType | String | 事件类型 LEFT_CLICK RIGHT_CLICK MOUSE_MOVE LEFT_DOUBLE_CLICK RIGHT_DOUBLE_CLICK WHEEL(鼠标滚轮) | +| callbackFun | function | 回调函数 | +| handler | Object | 回调函数 | + +##### 【method】 `unRegisterMouseEvent(eventType)` ：注销鼠标事件方法 + +| 参数名 | 类型 | 说明 | +| --------- | ------ | ----------------------------------------------------------------------------------------------- | +| eventType | String | 事件类型 LEFT_CLICK RIGHT_CLICK MOUSE_MOVE LEFT_DOUBLE_CLICK RIGHT_DOUBLE_CLICK WHEEL(鼠标滚轮) | + +#### 2.【两点通视分析主要类】 `Cesium.VisiblityAnalysis()` diff --git a/website/public/static/demo/cesium-new/markdown/analysis/analysis-visiblerange.md b/website/public/static/demo/cesium-new/markdown/analysis/analysis-visiblerange.md new file mode 100644 index 000000000..d676b7f70 --- /dev/null +++ b/website/public/static/demo/cesium-new/markdown/analysis/analysis-visiblerange.md @@ -0,0 +1,130 @@ +## 可视分析 + +### 示例功能 + +    此功能用于检测当前三维场景中某个点朝一个方向看的时候可以看到的区域。 + +### 示例实现： + +    本示例需要使用【include-cesium-local.js】开发库实现，初始化 Cesium 三维球控件 `Cesium.WebSceneControl()` ，初始化 M3D 模型层管理类 `CesiumZondy.Layer.M3DLayer` 并调用 `append()` 方法加载 M3D 数据后，通过 Cesium 三维球控件 `Cesium.WebSceneControl()` 对象的 `registerMouseEvent()` 方法在三维场景里面自定义注册鼠标事件完成可视域分析点的拾取，初始化高级分析功能管理类 `CesiumZondy.Manager.AdvancedAnalysisManager()` 对象，调用高级分析功能管理类的 `createViewshedAnalysis()` 方法实现可视域分析。 + +### 实现步骤： + +**Step 1. 引用开发库**： +    本示例引用 local 本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维 WebGL 的功能； + +**Step 2. 创建三维地图容器并加载三维球控件**： +    创建 `id='GlobeView'` 的 div 作为三维视图的容器，并设置其样式，初始化 Cesium 三维球控件 `Cesium.WebSceneControl()` ，完成此步后可在三维场景中加载三维球控件； + +- Example: + + ```Javascript + //构造三维视图类（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', { + terrainExaggeration: 1, + }); + ``` + +- Example: + ```html +
+ ``` + +**Step 3. 加载数据**： +    初始化 M3D 模型层管理类 `CesiumZondy.Layer.M3DLayer` 并调用 `append()` 方法传入 M3D 数据服务地址，即可加载浏览数据； + +- Example: + ```Javascript + //构造M3D模型层管理对象 + var m3dLayer = new CesiumZondy.Layer.M3DLayer({ + viewer: webGlobe.viewer + }); + //加载M3D地图文档（服务地址，配置参数） + landscapeLayer = m3dLayer.append('http://develop.smaryun.com:6163/igs/rest/g3d/ZondyModels', {}); + ``` + +**Step 4. 创建可视域分析**： +    初始化高级分析功能管理类 `CesiumZondy.Manager.AdvancedAnalysisManager()` 对象，调用高级分析功能管理类的 `createViewshedAnalysis()` 方法实现可视域分析; + +- Example: + ```Javascript + //初始化高级分析功能管理类 + var advancedAnalysisManager = new CesiumZondy.Manager.AdvancedAnalysisManager({ + viewer: viewer + }); + //创建可视化分析对象 + viewshed3d = advancedAnalysisManager.createViewshedAnalysis(); + ``` + +**Step 5. 注册鼠标事件**： +    调用 Cesium 三维球控件 `Cesium.WebSceneControl()` 的 `registerMouseEvent()` 方法注册鼠标事件, 以下事例中的匿名函数为触发鼠标事件后执行的方法，完成此步后，在三维场景中点击鼠标左键可触发点击事件，点击完成后进入匿名函数； + +- Example: + ```Javascript + //注册事件 + webGlobe.registerMouseEvent('LEFT_CLICK', function(e) {}); + webGlobe.registerMouseEvent('RIGHT_CLICK', function(e) {}); + webGlobe.registerMouseEvent('MOUSE_MOVE', function(e) {}); + ``` + +**Step 6. 设置可视域分析参数**： +    给可视域分析对象设置进行可视域分析使用的必要参数； + +- Example: + ```Javascript + //设置观察点坐标 + viewshed3d.viewPosition = cartesian; + //设置可视域结果点 + viewshed3d.targetPosition = cartesian; + ``` + +**Step 7. 添加可视域分析**： +    将可视域分析对象 `Cesium.ViewshedAnalysis()` 添加到 Cesium 三维球控件中。 + +- Example: + ```Javascript + //添加可视域分析结果显示 + viewer.scene.VisualAnalysisManager.add(viewshed3d); + ``` + +### 关键接口 + +#### 1.【三维视图的主要类】 `Cesium.WebSceneControl` + +##### 【method】 `registerMouseEvent(eventType, callbackFun, handler)` ：注册鼠标事件方法 + +| 参数名 | 类型 | 说明 | +| ----------- | -------- | ----------------------------------------------------------------------------------------------- | +| eventType | String | 事件类型 LEFT_CLICK RIGHT_CLICK MOUSE_MOVE LEFT_DOUBLE_CLICK RIGHT_DOUBLE_CLICK WHEEL(鼠标滚轮) | +| callbackFun | function | 回调函数 | +| handler | Object | 回调函数 | + +##### 【method】 `unRegisterMouseEvent(eventType)` ：注销鼠标事件方法 + +| 参数名 | 类型 | 说明 | +| --------- | ------ | ----------------------------------------------------------------------------------------------- | +| eventType | String | 事件类型 LEFT_CLICK RIGHT_CLICK MOUSE_MOVE LEFT_DOUBLE_CLICK RIGHT_DOUBLE_CLICK WHEEL(鼠标滚轮) | + +#### 2.【M3D 模型层管理类】 `CesiumZondy.Layer.M3DLayer` + +##### 【method】 `append(url, options)` ：添加 M3D 地图文档 + +| 参数名 | 类型 | 说明 | +| ------- | ------ | ----------------------------------------------------------------------------------------------- | +| url | String | 事件类型 LEFT_CLICK RIGHT_CLICK MOUSE_MOVE LEFT_DOUBLE_CLICK RIGHT_DOUBLE_CLICK WHEEL(鼠标滚轮) | +| options | Object | 可选参数 | + +- `options` 主要参数 + +| 参数名 | 类型 | 默认值 | 说明 | +| ----------------------- | ------------ | ------------ | -------------------- | +| autoReset | Boolean | true | (可选)是否自动定位 | +| synchronous | Boolean | true | (可选)是否异步请求 | +| loaded | function | function | (可选)回调函数 | +| proxy | DefaultProxy | defaultProxy | 代理 | +| showBoundingVolume | Boolean | false | 是否显示包围盒 | +| maximumScreenSpaceError | Number | 16 | 用于控制模型显示细节 | + +#### 3.【高级分析功能管理类】`CesiumZondy.Manager.AdvancedAnalysisManager` + +##### 【method】 `createViewshedAnalysis()` ：创建可视域实例 diff --git a/website/public/static/demo/cesium-new/markdown/analysis/bug/delay.png b/website/public/static/demo/cesium-new/markdown/analysis/bug/delay.png new file mode 100644 index 000000000..0b4d67f77 Binary files /dev/null and b/website/public/static/demo/cesium-new/markdown/analysis/bug/delay.png differ diff --git a/website/public/static/demo/cesium-new/markdown/analysis/bug/gltf.png b/website/public/static/demo/cesium-new/markdown/analysis/bug/gltf.png new file mode 100644 index 000000000..82a28ada8 Binary files /dev/null and b/website/public/static/demo/cesium-new/markdown/analysis/bug/gltf.png differ diff --git a/website/public/static/demo/cesium-new/markdown/analysis/bug/nofind.png b/website/public/static/demo/cesium-new/markdown/analysis/bug/nofind.png new file mode 100644 index 000000000..a18c61ff6 Binary files /dev/null and b/website/public/static/demo/cesium-new/markdown/analysis/bug/nofind.png differ diff --git a/website/public/static/demo/cesium-new/markdown/analysis/bug/preview.png b/website/public/static/demo/cesium-new/markdown/analysis/bug/preview.png new file mode 100644 index 000000000..295afde38 Binary files /dev/null and b/website/public/static/demo/cesium-new/markdown/analysis/bug/preview.png differ diff --git a/website/public/static/demo/cesium-new/markdown/analysis/bug/speed.png b/website/public/static/demo/cesium-new/markdown/analysis/bug/speed.png new file mode 100644 index 000000000..bb54f0c4d Binary files /dev/null and b/website/public/static/demo/cesium-new/markdown/analysis/bug/speed.png differ diff --git a/website/public/static/demo/cesium-new/markdown/internet/baidu.md b/website/public/static/demo/cesium-new/markdown/internet/baidu.md new file mode 100644 index 000000000..6e041cda1 --- /dev/null +++ b/website/public/static/demo/cesium-new/markdown/internet/baidu.md @@ -0,0 +1,94 @@ +# 原理 + +国内的图商数据都强制要求数据加密一次火星坐标系 (GCJ-02) ,因此整个地图是产生了偏移。 + +## 核心原理 + +1. 通过 **反解析** 火星坐标系 (GCJ-02) 得到 **WGS84（CGCS2000椭球）无偏数据** +2. 然后根据无偏数据在Cesium的切分模型上进行对应的**纠偏校正处理** +3. ![](./images/tileschame.png) + +## 高德 + +高德相对简单就是基于墨卡托投影的前提下进行简单的位置纠偏 + +![](./images/mercator.png) + +![](./images/format.png) + +![](./images/geom.png) + + + +| 纠偏前 | 纠偏后 | +| ------------------------------ | ----------------------------- | +| ![](./images/gaode_before.png) | ![](./images/gaode_after.png) | + +## 百度 + +分2类：WGS84椭球纠偏和 BD09坐标系的偏移 + +``` js +this._crs = options.crs || 'BD09'; + if (options.crs === 'WGS84') { + var resolutions = []; + for (var i = 0; i < 19; i++) { + resolutions[i] = 256 * Math.pow(2, 18 - i); + } + this._tilingScheme = new BaiduTilingScheme({ + resolutions: resolutions, + rectangleSouthwestInMeters: new Cartesian2(-20037726.37, -12474104.17), + rectangleNortheastInMeters: new Cartesian2(20037726.37, 12474104.17) + }); + } else { + this._tilingScheme = new WebMercatorTilingScheme({ + rectangleSouthwestInMeters: new Cartesian2(-33554054, -33746824), + rectangleNortheastInMeters: new Cartesian2(33554054, 33746824) + }); + } +``` + + + +### BD09坐标系 + +原理和高德纠偏几乎一致 + +![](./images/mercator.png) + +### WGS84坐标系 + +基于百度独特的**最后一级256像素**的分辨率机制进行对应的计算 + +| 级别 | 分辨率 resolutions = 256 * Math.pow(2, 18 - level) | +| ---- | ------------------------------------------------------ | +| 0 | 33554432 | +| 1 | 16777216 | +| 2 | 8388608 | +| 3 | 4194304 | +| 4 | 2097152 | +| 5 | 1048576 | +| 6 | 524288 | +| 7 | 262144 | +| 8 | 131072 | +| 9 | 65536 | +| 10 | 32768 | +| 11 | 16384 | +| 12 | 8192 | +| 13 | 4096 | +| 14 | 2048 | +| 15 | 1024 | +| 16 | 512 | +| 17 | 256 | + +上面的表格对应百度独特的切分模型经纬网，需要建立一个百度特有的网格切分模型**BaiduTilingScheme** + +| 纠偏前 | 纠偏后 | +| ------------------------------ | ----------------------------- | +| ![](./images/baidu_before.png) | ![](./images/baidu_after.png) | + + + +## 任意投影 + 瓦片切分规则 + +**已实现，不公开原理** \ No newline at end of file diff --git a/website/public/static/demo/cesium-new/markdown/internet/images/baidu_after.png b/website/public/static/demo/cesium-new/markdown/internet/images/baidu_after.png new file mode 100644 index 000000000..a1d64cb3b Binary files /dev/null and b/website/public/static/demo/cesium-new/markdown/internet/images/baidu_after.png differ diff --git a/website/public/static/demo/cesium-new/markdown/internet/images/baidu_before.png b/website/public/static/demo/cesium-new/markdown/internet/images/baidu_before.png new file mode 100644 index 000000000..52dc7579f Binary files /dev/null and b/website/public/static/demo/cesium-new/markdown/internet/images/baidu_before.png differ diff --git a/website/public/static/demo/cesium-new/markdown/internet/images/format.png b/website/public/static/demo/cesium-new/markdown/internet/images/format.png new file mode 100644 index 000000000..d8fe8c0e2 Binary files /dev/null and b/website/public/static/demo/cesium-new/markdown/internet/images/format.png differ diff --git a/website/public/static/demo/cesium-new/markdown/internet/images/gaode_after.png b/website/public/static/demo/cesium-new/markdown/internet/images/gaode_after.png new file mode 100644 index 000000000..392a3b32b Binary files /dev/null and b/website/public/static/demo/cesium-new/markdown/internet/images/gaode_after.png differ diff --git a/website/public/static/demo/cesium-new/markdown/internet/images/gaode_before.png b/website/public/static/demo/cesium-new/markdown/internet/images/gaode_before.png new file mode 100644 index 000000000..b8e41a479 Binary files /dev/null and b/website/public/static/demo/cesium-new/markdown/internet/images/gaode_before.png differ diff --git a/website/public/static/demo/cesium-new/markdown/internet/images/geom.png b/website/public/static/demo/cesium-new/markdown/internet/images/geom.png new file mode 100644 index 000000000..6b8649e4a Binary files /dev/null and b/website/public/static/demo/cesium-new/markdown/internet/images/geom.png differ diff --git a/website/public/static/demo/cesium-new/markdown/internet/images/mercator.png b/website/public/static/demo/cesium-new/markdown/internet/images/mercator.png new file mode 100644 index 000000000..d7bd72691 Binary files /dev/null and b/website/public/static/demo/cesium-new/markdown/internet/images/mercator.png differ diff --git a/website/public/static/demo/cesium-new/markdown/internet/images/tileschame.png b/website/public/static/demo/cesium-new/markdown/internet/images/tileschame.png new file mode 100644 index 000000000..8f5641d8c Binary files /dev/null and b/website/public/static/demo/cesium-new/markdown/internet/images/tileschame.png differ diff --git a/website/public/static/demo/cesium-new/markdown/view/theme-layer.md b/website/public/static/demo/cesium-new/markdown/view/theme-layer.md new file mode 100644 index 000000000..65c2ac795 --- /dev/null +++ b/website/public/static/demo/cesium-new/markdown/view/theme-layer.md @@ -0,0 +1,184 @@ +## 统计专题图 + +### 示例功能 + +    此功能用于在三维场景中添加专题图，包括垂直柱状图、水平柱状图、饼状图，可以根据需要选择。 + +### 示例实现： + +    本示例需要使用【include-cesium-local.js】开发库实现，初始化专题图类 `Cesium.ThemeManager` 对象，调用专题图类的`query()`方法查询结果，并通过 `addByQueryResult()` 方法将查询结果用于添加专题图，或者使用`addByGeoJson()`方法将geojson数据用于添加专题图。 + +### 实现步骤： + +**Step 1. 引用开发库**： +    本示例引用local本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维WebGL的功能； + +**Step 2. 创建三维地图容器并加载三维球控件**： +    创建 `id='GlobeView'` 的div作为三维视图的容器，并设置其样式，初始化Cesium三维球控件 `Cesium.Viewer()` ，完成此步后可在三维场景中加载三维球控件； + +* Example: + ``` Javascript + //构造三维视图类（视图容器div的id，三维视图设置参数） + var viewer = new Cesium.Viewer('GlobeView', { + infoBox: false, + selectionIndicator: false, + shouldAnimate: true + }); + ``` + +* Example: + ``` html +
+ ``` + +**Step 3. 加载底图数据**： +    初始化天地图`Cesium.TiandituImageryProvider`对象，调用viewer.imageryLayers的 `addImageryProvider()` 方法加载天地图作为底图； + +* Example: + ``` Javascript + //构造第三方图层对象 + var thirdPartyLayer = new CesiumZondy.Layer.ThirdPartyLayer({ + viewer: webGlobe.viewer + }); + //加载天地图 + var tdt = new Cesium.TiandituImageryProvider({ + url: 'http://t1.tianditu.com/DataServer', + tileType: 'vec', + token: '2ddaabf906d4b5418aed0078e1657029' + }); + + viewer.imageryLayers.addImageryProvider(tdt); + ``` + +**Step 4. 显示常用控件，并实现跳转定位**： +    调用`showPosition()`、`createNavigationTool()`方法显示常用控件； + +* Example: + ``` Javascript + //显示鼠标位置控件 + viewer.showPosition('coordinate_location'); + //显示导航控件（罗盘、比例尺、场景导航） + viewer.createNavigationTool({ + enableCompass: true, + enableZoomControls: true, + enableDistanceLegend: true + }); + ``` + +**Step 5. 创建专题图对象**： +    初始化专题图类对象`Cesium.ThemeManager`，调用`createAnimation()`方法创建动画漫游对象； + +* Example: + ``` Javascript + //初始化专题图类 + var themeLayer = new Cesium.ThemeManager(viewer, { + successCallback: successCallback, + errorCallback: errorCallback, + // 在定义专题图对象时，设置好属性与对应颜色 + attributeName: ['GDP_2007', 'GDP_2008'], + attributeColor: [new Cesium.Color(234 / 255, 175 / 255, 200 / 255), new Cesium.Color(/ 255, 239 / 255, 125 / 255)], + width: 50000 + }); + var queryResult; + function successCallback(result) { + console.log('查询成功'); + queryResult = result; + } + function errorCallback(result) { + console.log(result); + } + ``` + +**Step 6. 添加专题图**： +    通过专题图类的属性和方法实现添加对应的专题图，即通过属性设置用于生成专题图的属性及其对应颜色、添加专题类型等参数，分别通过调用专题图类的`query()`方法查询结果，并通过 `addByQueryResult()` 方法将查询结果用于添加专题图，或者使用`addByGeoJson()`方法将geojson数据用于添加专题图。 + +* Example: + ``` Javascript + //通过查询结果添加水平柱状专题图 + function addByQuery() { + this.removeLayer(); + //加载矢量地图 + var url = 'http://192.168.21.191:6163/igs/rest/mrfs/layer'; + var layers = 'gdbp://MapGISLocal/专题图数据/sfcls/省级行政区x'; + viewer.scene.layers.appendVectorLayer(url, { + loadAll: true, + layers: layers, + getDocLayerIndexes: function (indexs) { + var layerIndex = indexs[0]; + var layer = viewer.scene.layers.getLayer(layerIndex); + } + }); + + var queryUrl ="http://192.168.21.191:6163/igs/rest/mrfs/layer/query?page=0&pageCount=9999f=json&structs={'IncludeAttribute':true,'IncludeGeometry':true,'IncludeWebGraphic':false}&rule{'CompareRectOnly':false,'EnableDisplayCondition':false,'Intersect':true,'MustInside':false}rtnLabel=true&fields=面积,周长,省名,GDP_2007,GDP_2008&coordPrecision=2&guid=__readonly_user__cursorType=forward&gdbp=gdbp://MapGISLocal/专题图数据/sfcls/省级行政区x"; + themeLayer.query(queryUrl); + + // 设置用于展示的属性名 + themeLayer.attributeName = ['GDP_2007', 'GDP_2008']; + themeLayer.attributeColor = [new Cesium.Color(234 / 255, 175 / 255, 200 / 255), new Cesium.Colo(56 / 255, 239 / 255, 125 / 255)]; + themeLayer.width = 50000; + //水平柱状图 + themeLayer.addByQueryResult('HorizontalColumn'); + } + ``` + +* Example: + ``` Javascript + //通过geojson添加垂直柱状图 + function addByGeojson() { + this.removeLayer(); + var geojsonUrl = './static/data/geojson/省级行政区.geojson'; + var geojsonResource = Cesium.Resource.createIfNeeded(geojsonUrl); + var geojson; + var promise = geojsonResource.fetchJson(); + promise.then(function (json) { + geojson = json; + }); + + themeLayer.addGeoGeometry = false; + themeLayer.attributeName = ['GDP_2007', 'GDP_2008']; + themeLayer.attributeColor = [new Cesium.Color(234 / 255, 175 / 255, 200 / 255), new Cesium.Colo(56 / 255, 239 / 255, 125 / 255)]; + //垂直柱状图 + themeLayer.addByGeoJson(geojson, 'VerticalColumn'); + } + ``` + +* Example: + ``` Javascript + //移除专题图 + function removeLayer() { + themeLayer.remove(); + } + ``` + + +### 关键接口 + +#### 1.【三维视图的主要类】 `Cesium.Viewer` + +##### 【method】 `showPosition()`： 鼠标坐标位置控件 + +##### 【method】 `createNavigationTool()`： 常用导航控件 + +#### 2.【专题图类】`Cesium.ThemeManager` + +##### 【method】 `query(queryUrl) → {Object}` ：查询。 + +##### 【method】 `addByQueryResult(optionsParam) ` ：通过查询结果添加专题图。 + +##### 【method】 `addByGeoJson(optionsParam)` ：通过geojson数据添加专题图。 + +##### 【method】 `remove()` ：移除添加的专题图。 + +|参数名|类型|说明| +|-|-|-| +|optionsParam|Object|动画漫游参数| + +* `optionsParam` 主要参数 + +|参数名|类型|说 明| +|-|-|-| +|queryUrl|String|（可选）通过查询结果添加时使用的查询地址。| +|successCallback|function|（可选）查询成功的回调函数| +|errorCallback|function|（可选）查询失败的回调函数| +|attributeName|Array|生成专题图的属性| +|attributeColor|Array|专题图属性的颜色| \ No newline at end of file diff --git a/website/public/static/demo/cesium/example/analysis/analysis-animation.htm b/website/public/static/demo/cesium/example/analysis/analysis-animation.htm index 9fb058f1c..575aee49e 100644 --- a/website/public/static/demo/cesium/example/analysis/analysis-animation.htm +++ b/website/public/static/demo/cesium/example/analysis/analysis-animation.htm @@ -7,7 +7,7 @@ 动画漫游 - + + + + + + + + +
+ + diff --git a/website/public/static/demo/cesium/example/analysis/analysis-aspectAnalysis.htm b/website/public/static/demo/cesium/example/analysis/analysis-aspectAnalysis.htm index a449b7e24..66f336946 100644 --- a/website/public/static/demo/cesium/example/analysis/analysis-aspectAnalysis.htm +++ b/website/public/static/demo/cesium/example/analysis/analysis-aspectAnalysis.htm @@ -7,7 +7,7 @@ 坡向分析 - + - + - + - + - + - + - + - + - + - + - + + + + + + + + +
+ + diff --git a/website/public/static/demo/cesium/example/analysis/analysis-slopeAnalysis.htm b/website/public/static/demo/cesium/example/analysis/analysis-slopeAnalysis.htm index 4aa7fd363..c46fc094e 100644 --- a/website/public/static/demo/cesium/example/analysis/analysis-slopeAnalysis.htm +++ b/website/public/static/demo/cesium/example/analysis/analysis-slopeAnalysis.htm @@ -7,7 +7,7 @@ 坡度分析 - + - + - + - + diff --git a/website/public/static/demo/cesium/example/clientAnalysis/clientAnalysis-bezierspline.htm b/website/public/static/demo/cesium/example/clientAnalysis/clientAnalysis-bezierspline.htm index 7f23d7dd0..1c1d25433 100644 --- a/website/public/static/demo/cesium/example/clientAnalysis/clientAnalysis-bezierspline.htm +++ b/website/public/static/demo/cesium/example/clientAnalysis/clientAnalysis-bezierspline.htm @@ -8,7 +8,7 @@ - + diff --git a/website/public/static/demo/cesium/example/clientAnalysis/clientAnalysis-buffer.htm b/website/public/static/demo/cesium/example/clientAnalysis/clientAnalysis-buffer.htm index 06dc23407..ea4ba1a4d 100644 --- a/website/public/static/demo/cesium/example/clientAnalysis/clientAnalysis-buffer.htm +++ b/website/public/static/demo/cesium/example/clientAnalysis/clientAnalysis-buffer.htm @@ -6,7 +6,7 @@ Buffer缓冲区分析 - + diff --git a/website/public/static/demo/cesium/example/clientAnalysis/clientAnalysis-centroid.htm b/website/public/static/demo/cesium/example/clientAnalysis/clientAnalysis-centroid.htm index 5ce9f6e0b..c606c6932 100644 --- a/website/public/static/demo/cesium/example/clientAnalysis/clientAnalysis-centroid.htm +++ b/website/public/static/demo/cesium/example/clientAnalysis/clientAnalysis-centroid.htm @@ -6,7 +6,7 @@ Measure distances - + diff --git a/website/public/static/demo/cesium/example/clientAnalysis/clientAnalysis-intersect.htm b/website/public/static/demo/cesium/example/clientAnalysis/clientAnalysis-intersect.htm index ad8337e82..bc6d44bca 100644 --- a/website/public/static/demo/cesium/example/clientAnalysis/clientAnalysis-intersect.htm +++ b/website/public/static/demo/cesium/example/clientAnalysis/clientAnalysis-intersect.htm @@ -6,7 +6,7 @@ Along - + diff --git a/website/public/static/demo/cesium/example/clientAnalysis/clientAnalysis-tin.htm b/website/public/static/demo/cesium/example/clientAnalysis/clientAnalysis-tin.htm index 57a4ea12c..6ac29ca87 100644 --- a/website/public/static/demo/cesium/example/clientAnalysis/clientAnalysis-tin.htm +++ b/website/public/static/demo/cesium/example/clientAnalysis/clientAnalysis-tin.htm @@ -6,7 +6,7 @@ Measure distances - + diff --git a/website/public/static/demo/cesium/example/clientAnalysis/clientAnalysis-voronoi.htm b/website/public/static/demo/cesium/example/clientAnalysis/clientAnalysis-voronoi.htm index fd87e68c1..0b1c4a703 100644 --- a/website/public/static/demo/cesium/example/clientAnalysis/clientAnalysis-voronoi.htm +++ b/website/public/static/demo/cesium/example/clientAnalysis/clientAnalysis-voronoi.htm @@ -6,7 +6,7 @@ Measure distances - + diff --git a/website/public/static/demo/cesium/example/clientView/clientView-.htm b/website/public/static/demo/cesium/example/clientView/clientView-.htm index e0f573765..255a38050 100644 --- a/website/public/static/demo/cesium/example/clientView/clientView-.htm +++ b/website/public/static/demo/cesium/example/clientView/clientView-.htm @@ -7,7 +7,7 @@ 添加图片 - + - + - + - + - + - + - + - + - + - + - + - + - + diff --git a/website/public/static/demo/cesium/example/clientView_Echarts/echarts-bigline.htm b/website/public/static/demo/cesium/example/clientView_Echarts/echarts-bigline.htm index ec5da4186..694e23403 100644 --- a/website/public/static/demo/cesium/example/clientView_Echarts/echarts-bigline.htm +++ b/website/public/static/demo/cesium/example/clientView_Echarts/echarts-bigline.htm @@ -6,7 +6,7 @@ 渐进线-纽约街道 - + diff --git a/website/public/static/demo/cesium/example/clientView_Echarts/echarts-bigpoint.htm b/website/public/static/demo/cesium/example/clientView_Echarts/echarts-bigpoint.htm index 0d13b2371..e4f4f294e 100644 --- a/website/public/static/demo/cesium/example/clientView_Echarts/echarts-bigpoint.htm +++ b/website/public/static/demo/cesium/example/clientView_Echarts/echarts-bigpoint.htm @@ -6,7 +6,7 @@ 散点图-纽约热力 - + diff --git a/website/public/static/demo/cesium/example/clientView_Echarts/echarts-bigroad.htm b/website/public/static/demo/cesium/example/clientView_Echarts/echarts-bigroad.htm index 0dbcde836..b6ceb1f16 100644 --- a/website/public/static/demo/cesium/example/clientView_Echarts/echarts-bigroad.htm +++ b/website/public/static/demo/cesium/example/clientView_Echarts/echarts-bigroad.htm @@ -6,7 +6,7 @@ 路径图-中国主干 - + diff --git a/website/public/static/demo/cesium/example/clientView_Echarts/echarts-grid.htm b/website/public/static/demo/cesium/example/clientView_Echarts/echarts-grid.htm index ab3d32338..9fcc643bb 100644 --- a/website/public/static/demo/cesium/example/clientView_Echarts/echarts-grid.htm +++ b/website/public/static/demo/cesium/example/clientView_Echarts/echarts-grid.htm @@ -7,7 +7,7 @@ 自定义-网格专题 - + diff --git a/website/public/static/demo/cesium/example/clientView_Echarts/echarts-heater.htm b/website/public/static/demo/cesium/example/clientView_Echarts/echarts-heater.htm index ed967c126..450b77281 100644 --- a/website/public/static/demo/cesium/example/clientView_Echarts/echarts-heater.htm +++ b/website/public/static/demo/cesium/example/clientView_Echarts/echarts-heater.htm @@ -7,7 +7,7 @@ 热力图-空气质量 - + - + - + - + - + diff --git a/website/public/static/demo/cesium/example/clientView_MapV/mapv-heater.htm b/website/public/static/demo/cesium/example/clientView_MapV/mapv-heater.htm index a05c1bd2b..7fcd90c93 100644 --- a/website/public/static/demo/cesium/example/clientView_MapV/mapv-heater.htm +++ b/website/public/static/demo/cesium/example/clientView_MapV/mapv-heater.htm @@ -6,7 +6,7 @@ 热力图 - + diff --git a/website/public/static/demo/cesium/example/clientView_MapV/mapv-migrate.htm b/website/public/static/demo/cesium/example/clientView_MapV/mapv-migrate.htm index e91233e7e..c7022779b 100644 --- a/website/public/static/demo/cesium/example/clientView_MapV/mapv-migrate.htm +++ b/website/public/static/demo/cesium/example/clientView_MapV/mapv-migrate.htm @@ -6,7 +6,7 @@ 迁移图 - + diff --git a/website/public/static/demo/cesium/example/clientView_MapV/mapv-path_converge.htm b/website/public/static/demo/cesium/example/clientView_MapV/mapv-path_converge.htm index 63f3a3acf..20f4e82bb 100644 --- a/website/public/static/demo/cesium/example/clientView_MapV/mapv-path_converge.htm +++ b/website/public/static/demo/cesium/example/clientView_MapV/mapv-path_converge.htm @@ -6,7 +6,7 @@ 轨迹汇聚 - + diff --git a/website/public/static/demo/cesium/example/clientView_MapV/mapv-point_animate.htm b/website/public/static/demo/cesium/example/clientView_MapV/mapv-point_animate.htm index e6e0d83ba..363f3c857 100644 --- a/website/public/static/demo/cesium/example/clientView_MapV/mapv-point_animate.htm +++ b/website/public/static/demo/cesium/example/clientView_MapV/mapv-point_animate.htm @@ -6,7 +6,7 @@ 点数据播放 - + diff --git a/website/public/static/demo/cesium/example/clientView_MapV/mapv-point_grid.htm b/website/public/static/demo/cesium/example/clientView_MapV/mapv-point_grid.htm index 9633d8c81..a241720ae 100644 --- a/website/public/static/demo/cesium/example/clientView_MapV/mapv-point_grid.htm +++ b/website/public/static/demo/cesium/example/clientView_MapV/mapv-point_grid.htm @@ -6,7 +6,7 @@ Along - + diff --git a/website/public/static/demo/cesium/example/clientView_MapV/mapv-point_honeycomb.htm b/website/public/static/demo/cesium/example/clientView_MapV/mapv-point_honeycomb.htm index db6cb1312..56fb68891 100644 --- a/website/public/static/demo/cesium/example/clientView_MapV/mapv-point_honeycomb.htm +++ b/website/public/static/demo/cesium/example/clientView_MapV/mapv-point_honeycomb.htm @@ -6,7 +6,7 @@ 蜂窝形密度 - + diff --git a/website/public/static/demo/cesium/example/clientView_MapV/mapv-point_mutilanimate.htm b/website/public/static/demo/cesium/example/clientView_MapV/mapv-point_mutilanimate.htm index 7de8b61b8..7cf28992f 100644 --- a/website/public/static/demo/cesium/example/clientView_MapV/mapv-point_mutilanimate.htm +++ b/website/public/static/demo/cesium/example/clientView_MapV/mapv-point_mutilanimate.htm @@ -5,7 +5,7 @@ 点重叠播放 - + diff --git a/website/public/static/demo/cesium/example/clientView_MapV/mapv-point_weibo.htm b/website/public/static/demo/cesium/example/clientView_MapV/mapv-point_weibo.htm index 0b6b16854..9f0c2e27c 100644 --- a/website/public/static/demo/cesium/example/clientView_MapV/mapv-point_weibo.htm +++ b/website/public/static/demo/cesium/example/clientView_MapV/mapv-point_weibo.htm @@ -5,7 +5,7 @@ 点微博数据 - + diff --git a/website/public/static/demo/cesium/example/clientView_MapV/mapv-render_polygon.htm b/website/public/static/demo/cesium/example/clientView_MapV/mapv-render_polygon.htm index c5bfa3356..64d19014c 100644 --- a/website/public/static/demo/cesium/example/clientView_MapV/mapv-render_polygon.htm +++ b/website/public/static/demo/cesium/example/clientView_MapV/mapv-render_polygon.htm @@ -6,7 +6,7 @@ 区数据渲染 - + diff --git a/website/public/static/demo/cesium/example/clientView_MapV/mapv-simplemigrate.htm b/website/public/static/demo/cesium/example/clientView_MapV/mapv-simplemigrate.htm index ec29de2a8..95f4e9c54 100644 --- a/website/public/static/demo/cesium/example/clientView_MapV/mapv-simplemigrate.htm +++ b/website/public/static/demo/cesium/example/clientView_MapV/mapv-simplemigrate.htm @@ -6,7 +6,7 @@ 单一迁移轨迹 - + @@ -259,13 +259,6 @@ }; // 声明cesium的mapv图层并将其显示到三维球上 var mapv5 = new CesiumZondy.Overlayer.MapvLayer(map, timeDataSet, timeOptions); - window.setTimeout(() => { - mapv1.remove(); - mapv2.remove(); - mapv3.remove(); - mapv4.remove(); - mapv5.remove(); - }, 5000); }); } diff --git a/website/public/static/demo/cesium/example/clientView_MapV/mapv-tracker.htm b/website/public/static/demo/cesium/example/clientView_MapV/mapv-tracker.htm index 09dec0527..30b3f9981 100644 --- a/website/public/static/demo/cesium/example/clientView_MapV/mapv-tracker.htm +++ b/website/public/static/demo/cesium/example/clientView_MapV/mapv-tracker.htm @@ -6,7 +6,7 @@ 动态轨迹 - + diff --git a/website/public/static/demo/cesium/example/clientView_MapV/mapv-trackerline.htm b/website/public/static/demo/cesium/example/clientView_MapV/mapv-trackerline.htm index 0f7ee196c..4493bc0eb 100644 --- a/website/public/static/demo/cesium/example/clientView_MapV/mapv-trackerline.htm +++ b/website/public/static/demo/cesium/example/clientView_MapV/mapv-trackerline.htm @@ -8,7 +8,7 @@ content="initial-scale=1,maximum-scale=1,user-scalable=no" /> - + @@ -32,9 +32,9 @@ initMapv(); function initMap() { - var center = Cesium.Cartesian3.fromDegrees(114, 30, 5000000.0); + var center = Cesium.Cartesian3.fromDegrees(106.553587, 29.57837677, 50000.0); map.scene.camera.setView({ - destination: center, + destination: center, }); } diff --git a/website/public/static/demo/cesium/example/data/data-3Dtiles.htm b/website/public/static/demo/cesium/example/data/data-3Dtiles.htm index 8ae8c6fd1..3cd9b63f2 100644 --- a/website/public/static/demo/cesium/example/data/data-3Dtiles.htm +++ b/website/public/static/demo/cesium/example/data/data-3Dtiles.htm @@ -7,7 +7,7 @@ - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + + - #map { - position: absolute; - top: 0; - bottom: 0; - width: 100%; - } - - + +
+ - - - \ No newline at end of file + function updateView() { + L.geoJson(simpleLine).addTo(map); + L.geoJson(route).addTo(map); + } + + + diff --git a/website/public/static/demo/leaflet/example/ogc/wfs.htm b/website/public/static/demo/leaflet/example/ogc/wfs.htm index 90d99e772..6f3a4da70 100644 --- a/website/public/static/demo/leaflet/example/ogc/wfs.htm +++ b/website/public/static/demo/leaflet/example/ogc/wfs.htm @@ -42,12 +42,10 @@ }).addTo(map); //WFS服务地址 var baseurl = `${protocol}://${ip}:${port}/igs/rest/ogc/doc/WorldJWVector/WFSServer?REQUEST=GetFeature&version=1.1.0&service=wfs&typename=WorldJWVector:主要城市&maxfeatures=600`; - //通过一般处理程序解决跨域 - var url = './static/libs/cdn/zondyclient/ZDproxy.ashx?url=' + baseurl; //发送Ajax请求获取数据 $.ajax({ type: 'get', - url: url, + url: baseurl, dataType: 'xml', contentType: "application/x-www-form-urlencoded", success: function (result) { diff --git a/website/public/static/demo/leaflet/example/realtime/multi-target.htm b/website/public/static/demo/leaflet/example/realtime/multi-target.htm new file mode 100644 index 000000000..0d20c9e3a --- /dev/null +++ b/website/public/static/demo/leaflet/example/realtime/multi-target.htm @@ -0,0 +1,165 @@ + + + + WFS地图显示 + + + + + + +
+ + diff --git a/website/public/static/demo/leaflet/gallery/realtime/multi-target.png b/website/public/static/demo/leaflet/gallery/realtime/multi-target.png new file mode 100644 index 000000000..15579b4c8 Binary files /dev/null and b/website/public/static/demo/leaflet/gallery/realtime/multi-target.png differ diff --git a/website/public/static/demo/leaflet/source/img/webclient-leaflet-plugin.png b/website/public/static/demo/leaflet/source/img/webclient-leaflet-plugin.png new file mode 100644 index 000000000..8d7f76254 Binary files /dev/null and b/website/public/static/demo/leaflet/source/img/webclient-leaflet-plugin.png differ diff --git a/website/public/static/demo/leaflet/source/produce_leaflet.md b/website/public/static/demo/leaflet/source/produce_leaflet.md index 3a493edd4..92d5f76ea 100644 --- a/website/public/static/demo/leaflet/source/produce_leaflet.md +++ b/website/public/static/demo/leaflet/source/produce_leaflet.md @@ -18,7 +18,7 @@ ### Leaflet -    Lefalet是一个为建设移动设备友好的互动地图而开发的现代的、开源的JavaScript库，目前发展为主流的开源GIS前端开发库之一。它是由VladimirAgafonkin带领一个专业贡献者团队开发，虽然代码仅有31KB，但它具有开发人员开发在线地图的大部分功能。Leaflet 设计坚持简便、高性能和可用性好的思想，在所有主要桌面和移动平台能高效运作，在现代浏览器上会利用HTML5和CSS3的优势，同时也支持旧的浏览器访问。基于插件开发理念，支持插件扩展，有一个友好、易于使用的API文档和一个简单的、可读的源代码。在GitHub平台上已发布了海量的Leaflet插件，可极大提升开发者的开发效率，节约开发成本。 +    Leaflet是一个为建设移动设备友好的互动地图而开发的现代的、开源的JavaScript库，目前发展为主流的开源GIS前端开发库之一。它是由VladimirAgafonkin带领一个专业贡献者团队开发，虽然代码仅有31KB，但它具有开发人员开发在线地图的大部分功能。Leaflet 设计坚持简便、高性能和可用性好的思想，在所有主要桌面和移动平台能高效运作，在现代浏览器上会利用HTML5和CSS3的优势，同时也支持旧的浏览器访问。基于插件开发理念，支持插件扩展，有一个友好、易于使用的API文档和一个简单的、可读的源代码。在GitHub平台上已发布了海量的Leaflet插件，可极大提升开发者的开发效率，节约开发成本。 >详情请参考Leaflet官网地址 @@ -43,7 +43,7 @@ ## 开发环境     MapGIS Client for JavaScript产品已开源不收取费用，开发者可自行下载开发资源。 -    基于MapGIS服务器产品的WebGIS系统应用开发，__开发免费，商用收费__。对系统硬件环境没有特别要求，操作系统支持Microsoft Windows系列，包括Win7、Win8、Win10、Win Server2003、Win Server2008、Win Server2012、Win XP等，以及Linux 系列，包括redHat、ubnutu、centos等操作系统，均支持32位与64位机器。一般需要依次安装配置下列软件环境： +    基于MapGIS服务器产品的WebGIS系统应用开发，__开发免费，商用收费__。对系统硬件环境没有特别要求，操作系统支持Microsoft Windows系列，包括Win7、Win8、Win10、Win Server2003、Win Server2008、Win Server2012、Win XP等，以及Linux 系列，包括redHat、ubuntu、centos等操作系统，均支持32位与64位机器。一般需要依次安装配置下列软件环境： ### MapGIS开发平台： @@ -122,6 +122,8 @@ MapGIS Client for JavaScript（Leaflet）对接云GIS产品，提供地图显示 ### API 功能体系（功能导图） +![webclient-leaflet-plugin](./img/webclient-leaflet-plugin.png) + ### API 结构说明     MapGIS Client for JavaScript（Leaflet）的**核心库**为**webclient-leaflet-plugin.min.js**，此开发库实质上是在Web客户端层对调用MapGIS IGServer等云GIS服务器提供的服务的接口封装，通过简便的功能控件、接口便能直接获取使用云GIS服务器提供的数据与功能服务资源。 @@ -257,17 +259,17 @@ MapGIS Client for JavaScript（Leaflet）对接云GIS产品，提供地图显示 -- Leaflet：领先的用于移动友好交互式地图的开源JavaScript库，目前主流地图可视化引擎之一（https://leafletjs.com/） +- Leaflet：领先的用于移动友好交互式地图的开源JavaScript库，目前主流地图可视化引擎之一(https://leafletjs.com/) -- ECharts：基于 JavaScript 的开源可视化图表库（https://echarts.apache.org/zh/index.html） +- ECharts：基于 JavaScript 的开源可视化图表库(https://echarts.apache.org/zh/index.html) -- MapV：地理信息可视化开源库（https://mapv.baidu.com/） +- MapV：地理信息可视化开源库(https://mapv.baidu.com/) -- Turf：客户端空间分析开源库（https://turfjs.org/） +- Turf：客户端空间分析开源库(https://turfjs.org/) -- ElasticSearch：分布式搜索与分析引擎（https://www.elastic.co/cn/） +- ElasticSearch：分布式搜索与分析引擎(https://www.elastic.co/cn/) -- D3：基于Web标准的JavaScript图形可视化库（https://d3js.org/） +- D3：基于Web标准的JavaScript图形可视化库(https://d3js.org/) diff --git a/website/public/static/demo/mapboxgl/example/client-analysis/dp.htm b/website/public/static/demo/mapboxgl/example/client-analysis/dp.htm new file mode 100644 index 000000000..22f69fa8b --- /dev/null +++ b/website/public/static/demo/mapboxgl/example/client-analysis/dp.htm @@ -0,0 +1,169 @@ + + + + + 化简曲线 + + + + + + + + +
+
+
+ + + diff --git a/website/public/static/demo/mapboxgl/example/client-view/clienttheme/graphic.htm b/website/public/static/demo/mapboxgl/example/client-view/clienttheme/graphic.htm index 8ced68d30..451d4b049 100644 --- a/website/public/static/demo/mapboxgl/example/client-view/clienttheme/graphic.htm +++ b/website/public/static/demo/mapboxgl/example/client-view/clienttheme/graphic.htm @@ -267,13 +267,7 @@ } /** 重置地图状态*/ - function initStatus() { - removeClassAttribute('graph', 'active'); - if (themeLayer) { - themeLayer.removeFromMap(); - themeLayer = null; - } - } + function initStatus() {} /** 移除类属性*/ function removeClassAttribute(className, att) { diff --git a/website/public/static/demo/mapboxgl/example/client-view/echarts/echartsflight.htm b/website/public/static/demo/mapboxgl/example/client-view/echarts/echartsflight.htm index d5c766c5d..bc46d8413 100644 --- a/website/public/static/demo/mapboxgl/example/client-view/echarts/echartsflight.htm +++ b/website/public/static/demo/mapboxgl/example/client-view/echarts/echartsflight.htm @@ -1,109 +1,114 @@ - + - - 飞行航线 - - - - + #map { + position: absolute; + top: 0; + bottom: 0; + width: 100%; + } + -
-
+
+
-
- + diff --git a/website/public/static/demo/mapboxgl/example/client-view/echarts/echartsline.htm b/website/public/static/demo/mapboxgl/example/client-view/echarts/echartsline.htm index 079dfb3af..4245f27c2 100644 --- a/website/public/static/demo/mapboxgl/example/client-view/echarts/echartsline.htm +++ b/website/public/static/demo/mapboxgl/example/client-view/echarts/echartsline.htm @@ -1,102 +1,105 @@ - + - - 渐进绘制 - - - - + #map { + position: absolute; + top: 0; + bottom: 0; + width: 100%; + } + -
-
+
+
-
- + diff --git a/website/public/static/demo/mapboxgl/example/client-view/echarts/echartslineanimate.htm b/website/public/static/demo/mapboxgl/example/client-view/echarts/echartslineanimate.htm index fb1da1cbd..133304469 100644 --- a/website/public/static/demo/mapboxgl/example/client-view/echarts/echartslineanimate.htm +++ b/website/public/static/demo/mapboxgl/example/client-view/echarts/echartslineanimate.htm @@ -1,125 +1,128 @@ - + - - 公交路线 - - - - + #map { + position: absolute; + top: 0; + bottom: 0; + width: 100%; + } + -
-
+
+
-
- + diff --git a/website/public/static/demo/mapboxgl/example/client-view/echarts/echartsweibo.htm b/website/public/static/demo/mapboxgl/example/client-view/echarts/echartsweibo.htm index 7b8c78b8f..cec0c9ca2 100644 --- a/website/public/static/demo/mapboxgl/example/client-view/echarts/echartsweibo.htm +++ b/website/public/static/demo/mapboxgl/example/client-view/echarts/echartsweibo.htm @@ -1,156 +1,159 @@ - + - - 微博签到 - - - - + #map { + position: absolute; + top: 0; + bottom: 0; + width: 100%; + } + -
-
+
+
-
- + diff --git a/website/public/static/demo/mapboxgl/example/client-view/mapv/mapvpoint_animate.htm b/website/public/static/demo/mapboxgl/example/client-view/mapv/mapvpoint_animate.htm index 874fa320b..8099bba19 100644 --- a/website/public/static/demo/mapboxgl/example/client-view/mapv/mapvpoint_animate.htm +++ b/website/public/static/demo/mapboxgl/example/client-view/mapv/mapvpoint_animate.htm @@ -50,6 +50,9 @@ var data = []; $.get('../../static/data/mapv/china-point.geojson', function (rs) { + if (typeof rs === "string"){ + rs = JSON.parse(rs); + } for (var i = 0; i < rs[0].length; i++) { var geoCoord = rs[0][i].geoCoord; data.push({ diff --git a/website/public/static/demo/mapboxgl/example/client-view/mapv/mapvpoint_weibo.htm b/website/public/static/demo/mapboxgl/example/client-view/mapv/mapvpoint_weibo.htm index b1244b462..799e64779 100644 --- a/website/public/static/demo/mapboxgl/example/client-view/mapv/mapvpoint_weibo.htm +++ b/website/public/static/demo/mapboxgl/example/client-view/mapv/mapvpoint_weibo.htm @@ -1,137 +1,140 @@ - + - - 点微博数据 - - - - + #map { + position: absolute; + top: 0; + bottom: 0; + width: 100%; + } + -
-
+
+
-
- + diff --git a/website/public/static/demo/mapboxgl/example/client-view/mapv/mapvsimplemigrate.htm b/website/public/static/demo/mapboxgl/example/client-view/mapv/mapvsimplemigrate.htm index dd7a175ef..80d2cc043 100644 --- a/website/public/static/demo/mapboxgl/example/client-view/mapv/mapvsimplemigrate.htm +++ b/website/public/static/demo/mapboxgl/example/client-view/mapv/mapvsimplemigrate.htm @@ -1,269 +1,272 @@ - + - - 单一迁移轨迹 - - - - + + 单一迁移轨迹 + + + + -
-
+
+
-
- + diff --git a/website/public/static/demo/mapboxgl/example/client-view/vectortile/tiledelay.htm b/website/public/static/demo/mapboxgl/example/client-view/vectortile/tiledelay.htm new file mode 100644 index 000000000..ee6e85032 --- /dev/null +++ b/website/public/static/demo/mapboxgl/example/client-view/vectortile/tiledelay.htm @@ -0,0 +1,124 @@ + + + + + + 瓦片延申 + + + + + + +
+
+
+
+ + + + + + \ No newline at end of file diff --git a/website/public/static/demo/mapboxgl/example/control/compare-hori.htm b/website/public/static/demo/mapboxgl/example/control/compare-hori.htm index d81e9dbdb..6073ac045 100644 --- a/website/public/static/demo/mapboxgl/example/control/compare-hori.htm +++ b/website/public/static/demo/mapboxgl/example/control/compare-hori.htm @@ -36,8 +36,6 @@
-
取消 -
@@ -141,13 +139,6 @@ options ); - var closeButton = document.getElementById('close-button'); - - closeButton.addEventListener('click', function (e) { - after.getContainer().style.display = 'none'; - window.compare.remove(); - after.remove(); - }); //注册鼠标移动事件 before.on('mousemove', function (e) { document.getElementById('mouse-position').innerHTML = "经度：" + e.lngLat.lng.toFixed(2) + "，纬度：" + e.lngLat.lat.toFixed(2); diff --git a/website/public/static/demo/mapboxgl/example/control/compare.htm b/website/public/static/demo/mapboxgl/example/control/compare.htm index 39005ad1b..7a3c78e4a 100644 --- a/website/public/static/demo/mapboxgl/example/control/compare.htm +++ b/website/public/static/demo/mapboxgl/example/control/compare.htm @@ -36,7 +36,6 @@
-
取消
@@ -140,13 +139,6 @@ // options ); - var closeButton = document.getElementById('close-button'); - - closeButton.addEventListener('click', function (e) { - after.getContainer().style.display = 'none'; - window.compare.remove(); - after.remove(); - }); //注册鼠标移动事件 before.on('mousemove', function (e) { document.getElementById('mouse-position').innerHTML = "经度：" + e.lngLat.lng.toFixed(2) + "，纬度：" + e.lngLat.lat.toFixed(2); diff --git a/website/public/static/demo/mapboxgl/example/industry/military/cluster.htm b/website/public/static/demo/mapboxgl/example/industry/military/cluster.htm new file mode 100644 index 000000000..14cd7164c --- /dev/null +++ b/website/public/static/demo/mapboxgl/example/industry/military/cluster.htm @@ -0,0 +1,277 @@ + + + + + + 聚类分析 + + + + + + + + +
+
+ 热力展示 + 网格展示 +
+ + + + \ No newline at end of file diff --git a/website/public/static/demo/mapboxgl/example/industry/military/echart_line.htm b/website/public/static/demo/mapboxgl/example/industry/military/echart_line.htm new file mode 100644 index 000000000..3d6ab6249 --- /dev/null +++ b/website/public/static/demo/mapboxgl/example/industry/military/echart_line.htm @@ -0,0 +1,136 @@ + + + + + + 公交路线 + + + + + + + +
+
+
+
+ + + + + + \ No newline at end of file diff --git a/website/public/static/demo/mapboxgl/example/industry/military/multil_line.htm b/website/public/static/demo/mapboxgl/example/industry/military/multil_line.htm new file mode 100644 index 000000000..97c2390cf --- /dev/null +++ b/website/public/static/demo/mapboxgl/example/industry/military/multil_line.htm @@ -0,0 +1,202 @@ + + + + + + 北京公交夜景 + + + + + + + +
+
+
+
+ + + + \ No newline at end of file diff --git a/website/public/static/demo/mapboxgl/example/industry/military/tracker.htm b/website/public/static/demo/mapboxgl/example/industry/military/tracker.htm new file mode 100644 index 000000000..bd4c4036e --- /dev/null +++ b/website/public/static/demo/mapboxgl/example/industry/military/tracker.htm @@ -0,0 +1,211 @@ + + + + + + + 轨迹显示 + + + + + + + +
+
+
+ + + \ No newline at end of file diff --git a/website/public/static/demo/mapboxgl/example/industry/military/webclient.code-workspace b/website/public/static/demo/mapboxgl/example/industry/military/webclient.code-workspace new file mode 100644 index 000000000..41be6472b --- /dev/null +++ b/website/public/static/demo/mapboxgl/example/industry/military/webclient.code-workspace @@ -0,0 +1,13 @@ +{ + "folders": [ + { + "path": "..\\..\\..\\..\\..\\..\\..\\..\\..\\WebClient-GNSS" + }, + { + "path": "..\\..\\..\\..\\..\\..\\..\\.." + }, + { + "path": "..\\..\\..\\..\\..\\..\\..\\..\\..\\Webclient-Plot" + } + ] +} \ No newline at end of file diff --git a/website/public/static/demo/mapboxgl/example/internet/arcgis.htm b/website/public/static/demo/mapboxgl/example/internet/arcgis.htm index 65d0bfb8c..027c4c31e 100644 --- a/website/public/static/demo/mapboxgl/example/internet/arcgis.htm +++ b/website/public/static/demo/mapboxgl/example/internet/arcgis.htm @@ -120,6 +120,17 @@ //移除图层 map.removeLayer(Layers[i].id); } + switch (src){ + default: + document.querySelector("#dropdownMenu1").innerHTML='street '; + break; + case 'imgsrc': + document.querySelector("#dropdownMenu1").innerHTML='raster '; + break; + case 'terrainsrc': + document.querySelector("#dropdownMenu1").innerHTML='terrain '; + break; + } //添加图层 map.addLayer({ "id": src, diff --git a/website/public/static/demo/mapboxgl/example/internet/tianditu.htm b/website/public/static/demo/mapboxgl/example/internet/tianditu.htm index 3ccc28a87..cacd8f856 100644 --- a/website/public/static/demo/mapboxgl/example/internet/tianditu.htm +++ b/website/public/static/demo/mapboxgl/example/internet/tianditu.htm @@ -160,6 +160,17 @@ //移除图层 map.removeLayer(Layers[i].id); } + switch (src){ + default: + document.querySelector("#dropdownMenu1").innerHTML='street '; + break; + case 'imgsrc': + document.querySelector("#dropdownMenu1").innerHTML='raster '; + break; + case 'tersrc': + document.querySelector("#dropdownMenu1").innerHTML='terrain '; + break; + } //添加图层 map.addLayer({ "id": src, diff --git a/website/public/static/demo/mapboxgl/example/internet/tianditu4326.htm b/website/public/static/demo/mapboxgl/example/internet/tianditu4326.htm index 1b2b3d801..10937020d 100644 --- a/website/public/static/demo/mapboxgl/example/internet/tianditu4326.htm +++ b/website/public/static/demo/mapboxgl/example/internet/tianditu4326.htm @@ -160,6 +160,17 @@ //移除图层 map.removeLayer(Layers[i].id); } + switch (src){ + default: + document.querySelector("#dropdownMenu1").innerHTML='street '; + break; + case 'imgsrc': + document.querySelector("#dropdownMenu1").innerHTML='raster '; + break; + case 'tersrc': + document.querySelector("#dropdownMenu1").innerHTML='terrain '; + break; + } //添加图层 map.addLayer({ "id": src, @@ -168,6 +179,7 @@ "minzoom": 0, "maxzoom": 22 }); + if (src == "vecsrc") { map.addLayer( { @@ -189,6 +201,7 @@ "minzoom": 0, "maxzoom": 22 }); + } } diff --git a/website/public/static/demo/mapboxgl/example/mapgis-igserver/calc/calc-length.htm b/website/public/static/demo/mapboxgl/example/mapgis-igserver/calc/calc-length.htm index eeede0ce6..a25919793 100644 --- a/website/public/static/demo/mapboxgl/example/mapgis-igserver/calc/calc-length.htm +++ b/website/public/static/demo/mapboxgl/example/mapgis-igserver/calc/calc-length.htm @@ -44,7 +44,69 @@ line_string: true, polygon: false, trash: true - } + }, + styles:[ + { + 'id': 'gl-draw-line-inactive', + 'type': 'line', + 'filter': ['all', + ['==', 'active', 'false'], + ['==', '$type', 'LineString'], + ['!=', 'mode', 'static'] + ], + 'layout': { + 'line-cap': 'round', + 'line-join': 'round' + }, + 'paint': { + 'line-color': '#3bb2d0', + 'line-width': 2 + } + }, + { + 'id': 'gl-draw-line-active', + 'type': 'line', + 'filter': ['all', + ['==', '$type', 'LineString'], + ['==', 'active', 'true'] + ], + 'layout': { + 'line-cap': 'round', + 'line-join': 'round' + }, + 'paint': { + 'line-color': '#fb3b3b', + 'line-dasharray': [0.2, 2], + 'line-width': 2 + } + }, + { + 'id': 'gl-draw-polygon-and-line-vertex-stroke-inactive', + 'type': 'circle', + 'filter': ['all', + ['==', 'meta', 'vertex'], + ['==', '$type', 'Point'], + ['!=', 'mode', 'static'] + ], + 'paint': { + 'circle-radius': 5, + 'circle-color': '#fff' + } + }, + { + 'id': 'gl-draw-polygon-and-line-vertex-inactive', + 'type': 'circle', + 'filter': ['all', + ['==', 'meta', 'vertex'], + ['==', '$type', 'Point'], + ['!=', 'mode', 'static'] + ], + 'paint': { + 'circle-radius': 3, + 'circle-color': '#fb3b3b' + } + }, + ], }); map.addControl(navigationControl, 'top-left');//导航条 diff --git a/website/public/static/demo/mapboxgl/gallery/client-analysis/dp.png b/website/public/static/demo/mapboxgl/gallery/client-analysis/dp.png new file mode 100644 index 000000000..74698a892 Binary files /dev/null and b/website/public/static/demo/mapboxgl/gallery/client-analysis/dp.png differ diff --git a/website/public/static/demo/mapboxgl/gallery/client-view/vectortile/tiledelay.png b/website/public/static/demo/mapboxgl/gallery/client-view/vectortile/tiledelay.png new file mode 100644 index 000000000..a7dffca94 Binary files /dev/null and b/website/public/static/demo/mapboxgl/gallery/client-view/vectortile/tiledelay.png differ diff --git a/website/public/static/demo/mapboxgl/gallery/industry/military/cluster.png b/website/public/static/demo/mapboxgl/gallery/industry/military/cluster.png new file mode 100644 index 000000000..98dd976e9 Binary files /dev/null and b/website/public/static/demo/mapboxgl/gallery/industry/military/cluster.png differ diff --git a/website/public/static/demo/mapboxgl/gallery/industry/military/courgette.log b/website/public/static/demo/mapboxgl/gallery/industry/military/courgette.log new file mode 100644 index 000000000..e69de29bb diff --git a/website/public/static/demo/mapboxgl/gallery/industry/military/echart_line.png b/website/public/static/demo/mapboxgl/gallery/industry/military/echart_line.png new file mode 100644 index 000000000..b51c54aed Binary files /dev/null and b/website/public/static/demo/mapboxgl/gallery/industry/military/echart_line.png differ diff --git a/website/public/static/demo/mapboxgl/gallery/industry/military/multil_line.png b/website/public/static/demo/mapboxgl/gallery/industry/military/multil_line.png new file mode 100644 index 000000000..0f11bb7d2 Binary files /dev/null and b/website/public/static/demo/mapboxgl/gallery/industry/military/multil_line.png differ diff --git a/website/public/static/demo/mapboxgl/helper/tilesize/tile/256.png b/website/public/static/demo/mapboxgl/helper/tilesize/tile/256.png new file mode 100644 index 000000000..a12b551d0 Binary files /dev/null and b/website/public/static/demo/mapboxgl/helper/tilesize/tile/256.png differ diff --git a/website/public/static/demo/mapboxgl/helper/tilesize/tile/512.png b/website/public/static/demo/mapboxgl/helper/tilesize/tile/512.png new file mode 100644 index 000000000..758df4a85 Binary files /dev/null and b/website/public/static/demo/mapboxgl/helper/tilesize/tile/512.png differ diff --git a/website/public/static/demo/mapboxgl/helper/tilesize/tilesize.md b/website/public/static/demo/mapboxgl/helper/tilesize/tilesize.md new file mode 100644 index 000000000..45c397d2c --- /dev/null +++ b/website/public/static/demo/mapboxgl/helper/tilesize/tilesize.md @@ -0,0 +1,73 @@ +# 显示模糊 + +## `tileSize` + - **类型:** `Number` +- **默认值:** `512` +- **描述:** 加载瓦片的大小，如果数据瓦片本身是256大小的设置512大小会被强制拉伸至512大小。 + +| 512 | 256 | +| :---------------------------------------------------------- | :---------------------------------------------------------- | +| ![512](./static/demo/mapboxgl/helper/tilesize/tile/512.png) | ![256](./static/demo/mapboxgl/helper/tilesize/tile/256.png) | + +> tip 天地图模糊 +>> 请传入tileSize为256即可，2种方式 + +``` js +//实例化要加载的source来源对象（世界矢量地图） + var tianditu4326 = { + type: "raster", + tiles: [ + //来源请求地址，请求天地图提供的全球矢量地图WMTS服务 + "http://t" + + Math.round(Math.random() * 7) + + ".tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0" + + "&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles" + + "&TILECOL=" + + "{x}" + + "&TILEROW=" + + "{y}" + + "&TILEMATRIX=" + + "{z}" + + "&tk=" + + tiandituKey, + ], + //栅格瓦片的分辨率 + tileSize: 256, + }; + //实例化Map对象加载地图 + map = new mapboxgl.Map({ + crs: "EPSG:4326", //经纬度一定要设置crs参数 + maxBounds: [ + [-180, -90], + [180, 90], + ], + //地图容器div的id + container: "map", + //设置地图样式信息 + style: { + //设置版本号，一定要设置 + version: 8, + //添加来源 + sources: { + tianditu4326: tianditu4326, + }, + //设置加载并显示来源的图层信息 + layers: [ + { + //图层id，要保证唯一性 + id: "tianditu4326", + //图层类型 + type: "raster", + //连接图层来源 + source: "tianditu4326", + //图层最小缩放级数 + minzoom: 0, + //图层最大缩放级数 + maxzoom: 22, + }, + ], + }, + zoom: 7.5, + center: [116.39, 40.20] + }); +``` \ No newline at end of file diff --git "a/website/public/static/demo/mapboxgl/helper/vectortile/delay/\351\273\230\350\256\244\350\243\201\345\211\252\347\272\247\345\210\253.png" "b/website/public/static/demo/mapboxgl/helper/vectortile/delay/\351\273\230\350\256\244\350\243\201\345\211\252\347\272\247\345\210\253.png" new file mode 100644 index 000000000..88e74ceee Binary files /dev/null and "b/website/public/static/demo/mapboxgl/helper/vectortile/delay/\351\273\230\350\256\244\350\243\201\345\211\252\347\272\247\345\210\253.png" differ diff --git a/website/public/static/demo/mapboxgl/helper/vectortile/java.md b/website/public/static/demo/mapboxgl/helper/vectortile/java.md new file mode 100644 index 000000000..141f4e6e6 --- /dev/null +++ b/website/public/static/demo/mapboxgl/helper/vectortile/java.md @@ -0,0 +1,41 @@ +## 问题描述 + +> mapgis桌面程序导出矢量瓦片数据是，里面所有的链接地址都是localhost:6163，上传到igs（JAVA）服务器后，链接地址仍未做修改，因此或造成客户端无法访问服务器资源的问题。 + +## 如何解决 + +# 一、矢量瓦片数据已经上传到到igs（JAVA）服务器，但未保存最原始的样式文件 + +> 1、进入管理台 +> 2、点击左边菜单栏的地图与数据服务 + +步骤一 + +> 3、点击矢量瓦片资源管理，选择上传按钮，上传数据 + +步骤二 + +> 4、上传完成后点击矢量瓦片资源管理，选择查看按钮 + +步骤三 + +> 5、这里可以看到已上传的矢量瓦片资源 + +步骤四 + +> 6、在右侧的资源列表里选择你刚刚发布的资源，我这里选择名称为‘北京市_Java’的矢量瓦片，并点击预览按钮，进入到矢量瓦片编辑页面 + +步骤五 + +> 7、在编辑界面的最上方的工具栏中选择保存按钮，点击下载样式按钮，下载刚刚上传矢量瓦片资源 + +步骤五 +步骤五 + +> 8、打开下载好的样式文件，将所有的locaolhost:6163替换为当前igs（JAVA）服务的地址即可，之后重复第三步上传矢量瓦片资源， +> 由于下载的文件名英文字母会全部变成小写，请在上传前确保文件名与地图名称完全一致，这样即可正常访问矢量瓦片。 + +# 二、可以拿到最原始的样式文件 + +> 1、打开原样式文件，将所有的locaolhost:6163替换为当前igs（JAVA）服务的地址即可，之后重复上述第三步上传矢量瓦片资源， +> 由于下载的文件名英文字母会全部变成小写，请在上传前确保文件名与地图名称完全一致，这样即可正常访问矢量瓦片。 \ No newline at end of file diff --git a/website/public/static/demo/mapboxgl/helper/vectortile/mbtiles.md b/website/public/static/demo/mapboxgl/helper/vectortile/mbtiles.md new file mode 100644 index 000000000..cc9959576 --- /dev/null +++ b/website/public/static/demo/mapboxgl/helper/vectortile/mbtiles.md @@ -0,0 +1,149 @@ +# 0 矢量瓦片的核心5大服务 +1. 元数据信息服务 (**mbtile**中的**metadata**表) +2. 瓦片服务 (**mbtile**中的**tiles**表/视图) +3. 地图文档服务 (**mapgis**生成的样式文件 **xxx_style.json**) ~~mbtile未定义~~ +4. 字体服务 (**mapgis**生成的样式文件 xxx_style.json中的**glyphs**) ~~mbtile未定义~~ +5. 符号库服务 (**mapgis**生成的样式文件 xxx_style.json中的**sprite**) ~~mbtile未定义~~ + +# 1 MBTiles格式 +1. 为什么要使用MBTiles? +2. MBTiles解决了什么问题? +3. MBTiles的局限? +4. MBTiles注意的细节? + +## 1. 为什么要使用MBTiles +1.1 mbtiles本质上是sqlite，sqlite是开源公有领域项目。它的设计目标是嵌入式的，占用资源非常的低，适合嵌入式设备/移动端设备。 +1.2 mbtiles本质上文件数据库，方便拷贝与传输。 +1.3 mapboxgl公司规定了mbtiles的规范与[协议](https://github.com/mapbox/mbtiles-spec) +1.4 简单方便容易上手 + +## 2. MBTiles解决了什么问题 +2.1 矢量瓦片的元数据信息和瓦片信息 + 1. 元数据信息，下图中的空间范围、发布的图层、中心点、最大最小级别等 + 2. 瓦片信息，下图中的实际的点线面图元 +2.2 方便geoserver/qgis/mapbox-mobile等不同的开源体系之间数据交换（未解决制图综合的交换问题） +> 以下是4种不同平台打开/生产mbtiles的效果图 + +| **mapgis** | +| :------------------------------------------------------------------------------- | +| ![mapgis](../../static/demo/mapboxgl/helper/vectortile/mbtiles/mapgis.png) | +| **geoserver** + mbtiles-store-plugin + mbtiles-plugin | +| ![geoserver](../../static/demo/mapboxgl/helper/vectortile/mbtiles/geoserver.png) | +| **qgis** | +| ![qgis](../../static/demo/mapboxgl/helper/vectortile/mbtiles/qgis.png) | +| **mapbox-mobile** | +| ![qgis](../../static/demo/mapboxgl/helper/vectortile/mbtiles/mapbox-mobile.png) | + +2.3 可以发现一个mbtile在不同的平台都可以展示对应的底图信息，但是不同平台的展示效果各不相同，这是因为mbtiles没有记录对应的地图文档信息导致的。这也是下一章节要重点说明的。 + +## 3. MBTiles没解决什么问题 +1. ~~地图文档服务~~ ~~mbtile未定义~~ (**mapgis**生成的样式文件 **xxx_style.json**中) +2. ~~字体服务~~ ~~mbtile未定义~~ (**mapgis**生成的样式文件 xxx_style.json中的**glyphs**) +3. ~~符号库服务~~ ~~mbtile未定义~~ (**mapgis**生成的样式文件 xxx_style.json中的**sprite**) + +### 3.1 针对地图文档服务： +(**mapgis**生成的样式文件 **xxx_style.json**) 通过文件服务转发即可。内部做了规则转换保证桌面和web端的显示保持尽可能一致,**一次编图制图，全平台重复使用** +| 平台样式 | web端样式 | +| :------------------------------------------------------------------------- | :-------- | +| ![mapgis](../../static/demo/mapboxgl/helper/vectortile/mbtiles/mapgis.png) | ![mapgis](../../static/demo/mapboxgl/helper/vectortile/mbtiles/web.png) | + + +### 3.2 针对字体服务： + (**mapgis**提供的字体文件库) 通过文件服务转发即可 +![字体](../../static/demo/mapboxgl/helper/vectortile/mbtiles/font.png) + +### 3.3 针对符号服务： +(**mapgis**提供的符号库 sprite.json sprite.png sprite@2x.json sprite@2x.png) 通过文件服务转发即可 +**会在裁剪目录下生成** sprite.json sprite.png sprite@2x.json sprite@2x.png 4个文件 +![符号](../../static/demo/mapboxgl/helper/vectortile/mbtiles/sprites.png) + +## 4. MBTiles的局限 +由于MBTiles本身没有设计对应的机制，因此需要人为的约定一些规范操作 + +### 4.1 **数据量上限**，由于瓦片在切片+过滤的过程中会出现如下的情况 + +| 级别 | 平均大小 | 该级别瓦片张数 | +| :--- | :------- | :------------- | +| 1 | 1.69M | 1 | +| 2 | 471Kb | 4 | +| 3 | 256Kb | 8 | +| 4 | 144Kb | 17 | +| 5 | 61Kb | 47 | +| 6 | 40Kb | 155 | +| 7 | 20Kb | 559 | +| 8 | 2 Kb | 2117 | +| 9 | 800字节 | 8208 | +| 10 | 250字节 | 366 | + + 简而言之就是： + 1. 前面几级单张瓦片存储空间大（空间范围过大导致的图元化简力度大+图元过滤多） + 2. 中间几级瓦片图元数量多（化简力度适中+图元过滤少） + 3. 尾部几级（图元无过滤+图元无化简） + 4. **关系型数据库**（按行存储）在处理这类每条记录都大小不一致(**方差较大**)的情形下没有**NoSQL**(按列存储 monggodb)的高效 +### 4.2 坐标系支持相对单一 + 1. 瓦片数据**只支持EPSG:3857** web墨卡托投影 + ![EPSG:3857](../../static/demo/mapboxgl/helper/vectortile/mbtiles/epsg3857.png) + 2. mapboxgl-2.6.0的版本支持了6类投影，但是最新的1.3的版本协议中仍然只支持EPSG:3857 + 3. 元数据的坐标却是采取经纬度表示，没有从坐标上统一参考系 + ![EPSG:4326](../../static/demo/mapboxgl/helper/vectortile/mbtiles/epsg4326.png) +### 4.3 数据只记录了元数据信息和瓦片信息，缺失**符号**信息和**字体**信息与**地图文档**信息 +### 4.4 不明确是否**采取gzip的compress**[压缩策略](https://github.com/mapbox/mbtiles-spec/blob/master/1.3/spec.md#future-directions) + ![compress](../../static/demo/mapboxgl/helper/vectortile/mbtiles/compress.png) +### 4.5. tms的瓦片切片策略与直观的xyz不符合，需要前端主动传入(tms切片格式)或者后台转发处理成xyz格式 + +## 5. 如何避免MBTiles的局限 +### 5.1 针对数据量上限 +MapGIS桌面生成矢量瓦片的时候尽量只生成0-16级的瓦片，剩余的17-20通过mapbox的[瓦片延申机制实现](/#/demo/mapboxgl/client-view/vectortile/tiledelay) +### 5.2 针对坐标系 +统一采取 **EPSG3857-Web墨卡托坐标系** +![compress](../../static/demo/mapboxgl/helper/vectortile/mbtiles/proj.png) + +### 5.3 针对符号/字体/地图文档 +通过上面提到文件服务发布对应的3类服务 + +### 5.4 针对压缩策略 +**特别注意** geoserver/qgis需要二次压缩操作 +请生产端和服务端保持下面**策略一致**即可 + +|桌面生产端 |服务端| +|:---|:---| +|![压缩](../../static/demo/mapboxgl/helper/vectortile/mbtiles/compress_bool.png)|**1.** sprint/nodejs/NET需要主动给对应的瓦片服务一个G-ZIP的标识**Accept-Encoding: gzip** **Content-Encodin:gzip**| +|![未压缩](../../static/demo/mapboxgl/helper/vectortile/mbtiles/compress_unbool.png)|**2.** spring/nodejs/NET**直接转发**即可| +|![未压缩](../../static/demo/mapboxgl/helper/vectortile/mbtiles/compress_unbool.png)|**3.** spring/nodejs/NET **服务端进行gzip二次压缩**，并加入G-ZIP的标识**Accept-Encoding: gzip** **Content-Encodin:gzip**| + +### 5.5 针对瓦片切片策略 +1. [xyz](http://docs.opengeospatial.org/is/13-082r2/13-082r2.html#32)瓦片 最容易理解与认识 (monggo postgis mapgis mapboxgl arcgis的默认规则) + 1. 原点在左上角 + ![左上角](../../static/demo/mapboxgl/helper/vectortile/mbtiles/xyz_rule.png) + 2. 计算规则得出的xyz就是文件夹中的 x <-> column; y <-> row; z <-> level + ``` js + let x = x; + let y = y; + let z = z; + ``` +2. [tms](https://wiki.osgeo.org/wiki/Tile_Map_Service_Specification)瓦片 移动设备的切片策略 (mapboxgl-mobile的默认规则) + 1. 原点在左下角 + ![左下角](../../static/demo/mapboxgl/helper/vectortile/mbtiles/tms_rule.png) + 2. 计算规则,得出的xyz就是mbtiles中的 x <-> tile_column; y <-> tile_row; z <-> tile_level + ``` js + let x = x; + let y = Math.pow(2, z) - y - 1; // Tiles on database are tms (inverted y axis) + let z = z; + ``` + +|桌面生产端 |服务端| +|:---|:---| +|![xyz](../../static/demo/mapboxgl/helper/vectortile/mbtiles/xyz.png)|**1.** sprint/nodejs/NET发布一个**xyz**的瓦片服务即可| +|![tms](../../static/demo/mapboxgl/helper/vectortile/mbtiles/tms.png)|**2.** sprint/nodejs/NET发布一个**tms**的瓦片服务即可| + +目录型瓦片（xyz）转 MBtiles (tms) +|桌面生产端 |服务端| +|:---|:---| +|![xyz](../../static/demo/mapboxgl/helper/vectortile/mbtiles/xyz_tms.png)|**3.** sprint/nodejs/NET发布一个**tms**的瓦片服务即可| + +## 6.建议 +1. 生成**文件型**的目录瓦片作为**中间交换格式**，然后**不设置**对应的压缩策略 +2. 根据需求定制不同的策略 + 1. 针对**移动端**通过矢量瓦片转换目录型-> mbtiles,移动端**离线**使用 + 2. 针**对在线大数据**，通过批处理脚本加入mongodb中（**3台节点**配置） +3. 如果需要二次压缩建议是**服务端**进行操作，这样加gzip的标签由服务端**统一规划** \ No newline at end of file diff --git a/website/public/static/demo/mapboxgl/helper/vectortile/mbtiles/compress.png b/website/public/static/demo/mapboxgl/helper/vectortile/mbtiles/compress.png new file mode 100644 index 000000000..1fba361c1 Binary files /dev/null and b/website/public/static/demo/mapboxgl/helper/vectortile/mbtiles/compress.png differ diff --git a/website/public/static/demo/mapboxgl/helper/vectortile/mbtiles/compress_bool.png b/website/public/static/demo/mapboxgl/helper/vectortile/mbtiles/compress_bool.png new file mode 100644 index 000000000..ff30e682f Binary files /dev/null and b/website/public/static/demo/mapboxgl/helper/vectortile/mbtiles/compress_bool.png differ diff --git a/website/public/static/demo/mapboxgl/helper/vectortile/mbtiles/compress_unbool.png b/website/public/static/demo/mapboxgl/helper/vectortile/mbtiles/compress_unbool.png new file mode 100644 index 000000000..4c1a8a139 Binary files /dev/null and b/website/public/static/demo/mapboxgl/helper/vectortile/mbtiles/compress_unbool.png differ diff --git a/website/public/static/demo/mapboxgl/helper/vectortile/mbtiles/epsg3857.png b/website/public/static/demo/mapboxgl/helper/vectortile/mbtiles/epsg3857.png new file mode 100644 index 000000000..5a27ccb05 Binary files /dev/null and b/website/public/static/demo/mapboxgl/helper/vectortile/mbtiles/epsg3857.png differ diff --git a/website/public/static/demo/mapboxgl/helper/vectortile/mbtiles/epsg4326.png b/website/public/static/demo/mapboxgl/helper/vectortile/mbtiles/epsg4326.png new file mode 100644 index 000000000..8cc8f089d Binary files /dev/null and b/website/public/static/demo/mapboxgl/helper/vectortile/mbtiles/epsg4326.png differ diff --git a/website/public/static/demo/mapboxgl/helper/vectortile/mbtiles/font.png b/website/public/static/demo/mapboxgl/helper/vectortile/mbtiles/font.png new file mode 100644 index 000000000..9e169eb5b Binary files /dev/null and b/website/public/static/demo/mapboxgl/helper/vectortile/mbtiles/font.png differ diff --git a/website/public/static/demo/mapboxgl/helper/vectortile/mbtiles/geoserver.png b/website/public/static/demo/mapboxgl/helper/vectortile/mbtiles/geoserver.png new file mode 100644 index 000000000..d0e5d26ad Binary files /dev/null and b/website/public/static/demo/mapboxgl/helper/vectortile/mbtiles/geoserver.png differ diff --git a/website/public/static/demo/mapboxgl/helper/vectortile/mbtiles/mapbox-mobile.png b/website/public/static/demo/mapboxgl/helper/vectortile/mbtiles/mapbox-mobile.png new file mode 100644 index 000000000..43502094b Binary files /dev/null and b/website/public/static/demo/mapboxgl/helper/vectortile/mbtiles/mapbox-mobile.png differ diff --git a/website/public/static/demo/mapboxgl/helper/vectortile/mbtiles/mapgis.png b/website/public/static/demo/mapboxgl/helper/vectortile/mbtiles/mapgis.png new file mode 100644 index 000000000..a0fb1fc7d Binary files /dev/null and b/website/public/static/demo/mapboxgl/helper/vectortile/mbtiles/mapgis.png differ diff --git a/website/public/static/demo/mapboxgl/helper/vectortile/mbtiles/proj.png b/website/public/static/demo/mapboxgl/helper/vectortile/mbtiles/proj.png new file mode 100644 index 000000000..e4d5100b9 Binary files /dev/null and b/website/public/static/demo/mapboxgl/helper/vectortile/mbtiles/proj.png differ diff --git a/website/public/static/demo/mapboxgl/helper/vectortile/mbtiles/qgis.png b/website/public/static/demo/mapboxgl/helper/vectortile/mbtiles/qgis.png new file mode 100644 index 000000000..6418e01d6 Binary files /dev/null and b/website/public/static/demo/mapboxgl/helper/vectortile/mbtiles/qgis.png differ diff --git a/website/public/static/demo/mapboxgl/helper/vectortile/mbtiles/sprites.png b/website/public/static/demo/mapboxgl/helper/vectortile/mbtiles/sprites.png new file mode 100644 index 000000000..62a691ed7 Binary files /dev/null and b/website/public/static/demo/mapboxgl/helper/vectortile/mbtiles/sprites.png differ diff --git a/website/public/static/demo/mapboxgl/helper/vectortile/mbtiles/tms.png b/website/public/static/demo/mapboxgl/helper/vectortile/mbtiles/tms.png new file mode 100644 index 000000000..f1fd2ac9d Binary files /dev/null and b/website/public/static/demo/mapboxgl/helper/vectortile/mbtiles/tms.png differ diff --git a/website/public/static/demo/mapboxgl/helper/vectortile/mbtiles/tms_rule.png b/website/public/static/demo/mapboxgl/helper/vectortile/mbtiles/tms_rule.png new file mode 100644 index 000000000..e31f2dcc7 Binary files /dev/null and b/website/public/static/demo/mapboxgl/helper/vectortile/mbtiles/tms_rule.png differ diff --git a/website/public/static/demo/mapboxgl/helper/vectortile/mbtiles/web.png b/website/public/static/demo/mapboxgl/helper/vectortile/mbtiles/web.png new file mode 100644 index 000000000..ad4f858c7 Binary files /dev/null and b/website/public/static/demo/mapboxgl/helper/vectortile/mbtiles/web.png differ diff --git a/website/public/static/demo/mapboxgl/helper/vectortile/mbtiles/xyz.png b/website/public/static/demo/mapboxgl/helper/vectortile/mbtiles/xyz.png new file mode 100644 index 000000000..7f79c7ac0 Binary files /dev/null and b/website/public/static/demo/mapboxgl/helper/vectortile/mbtiles/xyz.png differ diff --git a/website/public/static/demo/mapboxgl/helper/vectortile/mbtiles/xyz_rule.png b/website/public/static/demo/mapboxgl/helper/vectortile/mbtiles/xyz_rule.png new file mode 100644 index 000000000..04082b18c Binary files /dev/null and b/website/public/static/demo/mapboxgl/helper/vectortile/mbtiles/xyz_rule.png differ diff --git a/website/public/static/demo/mapboxgl/helper/vectortile/mbtiles/xyz_tms.png b/website/public/static/demo/mapboxgl/helper/vectortile/mbtiles/xyz_tms.png new file mode 100644 index 000000000..600f0352a Binary files /dev/null and b/website/public/static/demo/mapboxgl/helper/vectortile/mbtiles/xyz_tms.png differ diff --git a/website/public/static/demo/mapboxgl/helper/vectortile/publish.md b/website/public/static/demo/mapboxgl/helper/vectortile/publish.md new file mode 100644 index 000000000..141f4e6e6 --- /dev/null +++ b/website/public/static/demo/mapboxgl/helper/vectortile/publish.md @@ -0,0 +1,41 @@ +## 问题描述 + +> mapgis桌面程序导出矢量瓦片数据是，里面所有的链接地址都是localhost:6163，上传到igs（JAVA）服务器后，链接地址仍未做修改，因此或造成客户端无法访问服务器资源的问题。 + +## 如何解决 + +# 一、矢量瓦片数据已经上传到到igs（JAVA）服务器，但未保存最原始的样式文件 + +> 1、进入管理台 +> 2、点击左边菜单栏的地图与数据服务 + +步骤一 + +> 3、点击矢量瓦片资源管理，选择上传按钮，上传数据 + +步骤二 + +> 4、上传完成后点击矢量瓦片资源管理，选择查看按钮 + +步骤三 + +> 5、这里可以看到已上传的矢量瓦片资源 + +步骤四 + +> 6、在右侧的资源列表里选择你刚刚发布的资源，我这里选择名称为‘北京市_Java’的矢量瓦片，并点击预览按钮，进入到矢量瓦片编辑页面 + +步骤五 + +> 7、在编辑界面的最上方的工具栏中选择保存按钮，点击下载样式按钮，下载刚刚上传矢量瓦片资源 + +步骤五 +步骤五 + +> 8、打开下载好的样式文件，将所有的locaolhost:6163替换为当前igs（JAVA）服务的地址即可，之后重复第三步上传矢量瓦片资源， +> 由于下载的文件名英文字母会全部变成小写，请在上传前确保文件名与地图名称完全一致，这样即可正常访问矢量瓦片。 + +# 二、可以拿到最原始的样式文件 + +> 1、打开原样式文件，将所有的locaolhost:6163替换为当前igs（JAVA）服务的地址即可，之后重复上述第三步上传矢量瓦片资源， +> 由于下载的文件名英文字母会全部变成小写，请在上传前确保文件名与地图名称完全一致，这样即可正常访问矢量瓦片。 \ No newline at end of file diff --git a/website/public/static/demo/mapboxgl/helper/web/publish.md b/website/public/static/demo/mapboxgl/helper/web/publish.md new file mode 100644 index 000000000..aaa4408a4 --- /dev/null +++ b/website/public/static/demo/mapboxgl/helper/web/publish.md @@ -0,0 +1,95 @@ +# Nginx + +## 安装 & 权限 +> Nginx最常见的问题是安全权限问题 + +1. 安装指南 + ``` sh + yum install epel-release -y + yum install nginx -y + ``` +2. 配置规则 /etc/nginx/nginx.conf + ``` conf + user root; # 用户建议改成root + server { + listen 8086; + + root /opt/webclient/site; # 指定位置，关键点1 + index index.html # 指定入口得index.html + } + ``` +3. 修改指定位置权限，由于关键点1使用的是自定义的位置 /opt/webclient/site，因此需要修改系统权限，详情请看[Nginx-SELinux](https://goodmemory.cc/selinux%E7%9B%B8%E5%85%B3%E7%9A%84permission-denied%E9%97%AE%E9%A2%98/) + ``` sh + chcon -R -u system_u /opt/webclient/site/ + chcon -R -t usr_t /opt/webclient/site/ + ``` + +## Https / Http的处理方式 + +``` conf +#user nobody; +worker_processes 1; + +#error_log logs/error.log; +#error_log logs/error.log notice; +#error_log logs/error.log info; + +#pid logs/nginx.pid; + +events { + worker_connections 1024; +} + +http { + include mime.types; + default_type application/octet-stream; + + #log_format main '$remote_addr - $remote_user [$time_local] "$request" ' + # '$status $body_bytes_sent "$http_referer" ' + # '"$http_user_agent" "$http_x_forwarded_for"'; + + #access_log logs/access.log main; + + sendfile on; + #tcp_nopush on; + + #keepalive_timeout 0; + keepalive_timeout 65; + + #gzip on; + + server { + listen 6163; + server_name develop.smaryun.com; + root html; + index index.html index.htm; + location / { + #下面的改成自己tomcat项目的地址 9007必须是内部非对外开放的端口 可以再igserver里面修改 + proxy_pass http://127.0.0.1:9007; + } + } + server { + listen 443 ssl; + server_name develop.smaryun.com; + + ssl_certificate cert/develop.pem; + ssl_certificate_key cert/develop.key; + + # ssl_session_cache shared:SSL:1m; + # ssl_session_timeout 5m; + + # ssl_ciphers HIGH:!aNULL:!MD5; + # ssl_prefer_server_ciphers on; + + location / { + #下面的改成自己tomcat项目的地址 9007必须是内部非对外开放的端口 可以再igserver里面修改 + proxy_pass http://127.0.0.1:9007; + } + + # location / { + # root html; + # index index.html index.htm; + # } + } +} +``` \ No newline at end of file diff --git a/website/public/static/demo/mapboxgl/markdown/client-view/vectortile/tiledelay.md b/website/public/static/demo/mapboxgl/markdown/client-view/vectortile/tiledelay.md new file mode 100644 index 000000000..5819063b5 --- /dev/null +++ b/website/public/static/demo/mapboxgl/markdown/client-view/vectortile/tiledelay.md @@ -0,0 +1,86 @@ +# 瓦片延申显示 +> 实际在生产瓦片的时候无法一次性生产大数据大范围下的瓦片，尤其是16级以后的瓦片，因此可以利用mapboxgl延申瓦片的特性减少瓦片的裁剪 +> +> mapboxgl最大的精度为向后延申4级 默认extent `4096 = 256 * 2^4` +> +> 只需将图层的"maxzoom": level + 4, //往后延申设置4级为8级 + +## 桌面生产 +![默认裁剪级别](../../static/demo/mapboxgl/helper/vectortile/delay/默认裁剪级别.png) + +## 前端修改样式 +``` json +{ + "version": 8, + "name": "世界行政区 Style", + "sources": { + "世界行政区": { + "type": "vector", + "tiles": [ + "http://develop.smaryun.com:6163/igs/rest/mrms/tile/世界行政区/{z}/{y}/{x}?type=cpbf" + ], + "minZoom": 0, + "maxZoom": 4 + } + }, + "sprite": "http://develop.smaryun.com:6163/igs/rest/mrms/vtiles/sprite", + "glyphs": "http://develop.smaryun.com:6163/igs/rest/mrms/vtiles/fonts/{fontstack}/{range}.pbf", + "layers": [ + { + "id": "背景", + "type": "background", + "paint": { + "background-color": "rgba(247, 247, 247, 1)" + } + }, + { + "id": "世界海洋", + "type": "fill", + "source": "世界行政区", + "source-layer": "世界海洋", + "minzoom": 0, + "maxzoom": 4, + "layout": { + "visibility": "visible" + }, + "paint": { + "fill-outline-color": "rgba(221, 92, 92, 1)", + "fill-color": "rgba(241, 109, 122, 1)" + } + }, + { + "id": "世界行政区", + "type": "fill", + "source": "世界行政区", + "source-layer": "世界行政区", + "minzoom": 0, + "maxzoom": 4, + "layout": { + "visibility": "visible" + }, + "paint": { + "fill-outline-color": "rgba(221, 92, 92, 1)", + "fill-color": "rgba(184, 241, 237, 1)" + } + }, + { + "id": "中国", + "type": "fill", + "source": "世界行政区", + "source-layer": "中国", + "minzoom": 0, + "maxzoom": 8, //往后延申设置4级为8级 + "layout": { + "visibility": "visible" + }, + "paint": { + "fill-outline-color": "rgba(221, 92, 92, 1)", + "fill-color": "rgba(225, 98, 47, 1)" + } + } + ], + "id": "世界行政区-id", + "crs": null, + "path": "D:\\平台二次开发部门资源\\阿里云服务器数据\\new\\webClient\\世界行政区\\世界行政区" +} +``` \ No newline at end of file diff --git a/website/public/static/demo/mapboxgl/source/img/webclient-mapbox-plugin.png b/website/public/static/demo/mapboxgl/source/img/webclient-mapbox-plugin.png new file mode 100644 index 000000000..7293ebdd2 Binary files /dev/null and b/website/public/static/demo/mapboxgl/source/img/webclient-mapbox-plugin.png differ diff --git a/website/public/static/demo/mapboxgl/source/produce_mapboxgl.md b/website/public/static/demo/mapboxgl/source/produce_mapboxgl.md index 2d8b6c172..54f5d57c0 100644 --- a/website/public/static/demo/mapboxgl/source/produce_mapboxgl.md +++ b/website/public/static/demo/mapboxgl/source/produce_mapboxgl.md @@ -125,6 +125,8 @@ MapGIS Client for JavaScript（MapboxGL）对接云GIS产品，提供地图显 ### API 功能体系（导图） +![webclient-mapbox-plugin](./img/webclient-mapbox-plugin.png) + ### API 结构说明     MapGIS Client for JavaScript（MapboxGL）的**核心库**为**webclient-mapboxgl-plugin.min.js**，此开发库实质上是在Web客户端层对调用MapGIS IGServer等云GIS服务器提供的服务的接口封装，通过简便的功能控件、接口便能直接获取使用云GIS服务器提供的数据与功能服务资源。 @@ -242,19 +244,19 @@ MapGIS Client for JavaScript（MapboxGL）对接云GIS产品，提供地图显 -- MapboxGL：使用WebGL技术独立渲染的开源JavaScript库，作为前端渲染矢量瓦片交互地图的工具（https://docs.mapbox.com/mapbox-gl-js/api/） +- MapboxGL：使用WebGL技术独立渲染的开源JavaScript库，作为前端渲染矢量瓦片交互地图的工具(https://docs.mapbox.com/mapbox-gl-js/api/) -- ECharts：基于 JavaScript 的开源可视化图表库（https://echarts.apache.org/zh/index.html） +- ECharts：基于 JavaScript 的开源可视化图表库(https://echarts.apache.org/zh/index.html) -- MapV：地理信息可视化开源库（https://mapv.baidu.com/） +- MapV：地理信息可视化开源库(https://mapv.baidu.com/) -- Turf：客户端空间分析开源库（https://turfjs.org/） +- Turf：客户端空间分析开源库(https://turfjs.org/) -- D3：基于Web标准的JavaScript图形可视化库（https://d3js.org/） +- D3：基于Web标准的JavaScript图形可视化库(https://d3js.org/) -- ElasticSearch：分布式搜索与分析引擎（https://www.elastic.co/cn/） +- ElasticSearch：分布式搜索与分析引擎(https://www.elastic.co/cn/) -- PostGIS：是PostgreSQL的一个扩展，遵循OpenGIS的规范，提供空间信息服务功能-空间对象、空间索引、空间操作函数和空间操作符（http://postgis.net/） +- PostGIS：是PostgreSQL的一个扩展，遵循OpenGIS的规范，提供空间信息服务功能-空间对象、空间索引、空间操作函数和空间操作符(http://postgis.net/) diff --git a/website/public/static/demo/military/example/analysis/analysis-animation.htm b/website/public/static/demo/military/example/analysis/analysis-animation.htm new file mode 100644 index 000000000..9fb058f1c --- /dev/null +++ b/website/public/static/demo/military/example/analysis/analysis-animation.htm @@ -0,0 +1,266 @@ + + + + + + + 动画漫游 + + + + + + + + + +
+
+ + + +
+
+ +
+ + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
漫游方式 + + + + +
俯仰角 + + +
方位角 + + +
距离 + + +
播放速度 + + +
+
+ + + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/analysis/analysis-aspectAnalysis-normal.htm b/website/public/static/demo/military/example/analysis/analysis-aspectAnalysis-normal.htm new file mode 100644 index 000000000..6ec1148d9 --- /dev/null +++ b/website/public/static/demo/military/example/analysis/analysis-aspectAnalysis-normal.htm @@ -0,0 +1,107 @@ + + + + + + 坡向分析 + + + + + + + + + +
+ + diff --git a/website/public/static/demo/military/example/analysis/analysis-aspectAnalysis.htm b/website/public/static/demo/military/example/analysis/analysis-aspectAnalysis.htm new file mode 100644 index 000000000..a449b7e24 --- /dev/null +++ b/website/public/static/demo/military/example/analysis/analysis-aspectAnalysis.htm @@ -0,0 +1,79 @@ + + + + + + + 坡向分析 + + + + + + + + + +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/analysis/analysis-cube.htm b/website/public/static/demo/military/example/analysis/analysis-cube.htm new file mode 100644 index 000000000..752e51bdf --- /dev/null +++ b/website/public/static/demo/military/example/analysis/analysis-cube.htm @@ -0,0 +1,234 @@ + + + + + + + 填挖方计算 + + + + + + + + + + +
+
+

参数

+ + + + + + + + + + + + + + + +
x方向采样点个数 + +
y方向采样点个数 + +
填挖规整高度 + +
+
+
+

填挖结果

+ + + + + + + + + + + + + + + + + + + +
高程范围： + +
表面积： + +
挖体积： + +
填体积： + +
+
+
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/analysis/analysis-dynamiccut.htm b/website/public/static/demo/military/example/analysis/analysis-dynamiccut.htm new file mode 100644 index 000000000..94797a9ed --- /dev/null +++ b/website/public/static/demo/military/example/analysis/analysis-dynamiccut.htm @@ -0,0 +1,104 @@ + + + + + + + 动态剖切 + + + + + + + + + +
+
+ + 剖切距离： + +
+
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/analysis/analysis-excavate.htm b/website/public/static/demo/military/example/analysis/analysis-excavate.htm new file mode 100644 index 000000000..b36245112 --- /dev/null +++ b/website/public/static/demo/military/example/analysis/analysis-excavate.htm @@ -0,0 +1,132 @@ + + + + + + + 开挖分析 + + + + + + + + + +
+
+ + 开挖深度： + +
+
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/analysis/analysis-explosion.htm b/website/public/static/demo/military/example/analysis/analysis-explosion.htm new file mode 100644 index 000000000..de6bec5d3 --- /dev/null +++ b/website/public/static/demo/military/example/analysis/analysis-explosion.htm @@ -0,0 +1,92 @@ + + + + + + + 爆炸分析 + + + + + + + + + +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/analysis/analysis-floor.htm b/website/public/static/demo/military/example/analysis/analysis-floor.htm new file mode 100644 index 000000000..1c061bd80 --- /dev/null +++ b/website/public/static/demo/military/example/analysis/analysis-floor.htm @@ -0,0 +1,207 @@ + + + + + + + 洪水淹没分析 + + + + + + + + + + +
+
+

参数

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
淹没最底高度 + +
淹没最高高度 + +
洪水上涨速度 + +
波浪个数 + +
波浪速度 + +
波浪高度 + +
+
+ + + +
+
+
+
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/analysis/analysis-modelflatten.htm b/website/public/static/demo/military/example/analysis/analysis-modelflatten.htm new file mode 100644 index 000000000..4b4037d00 --- /dev/null +++ b/website/public/static/demo/military/example/analysis/analysis-modelflatten.htm @@ -0,0 +1,123 @@ + + + + + + + 模型压平 + + + + + + + + + +
+ +
+ + +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/analysis/analysis-rollershutters.htm b/website/public/static/demo/military/example/analysis/analysis-rollershutters.htm new file mode 100644 index 000000000..d9bea7081 --- /dev/null +++ b/website/public/static/demo/military/example/analysis/analysis-rollershutters.htm @@ -0,0 +1,129 @@ + + + + + + + 动态卷帘 + + + + + + + + + + +
+
+ + 卷帘距离： + +
+
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/analysis/analysis-sceneprojection copy.htm b/website/public/static/demo/military/example/analysis/analysis-sceneprojection copy.htm new file mode 100644 index 000000000..b0d1484e8 --- /dev/null +++ b/website/public/static/demo/military/example/analysis/analysis-sceneprojection copy.htm @@ -0,0 +1,277 @@ + + + + + + 场景投放 + + + + + + + + + + +
+ + + + + + + +
+
+ 鼠标左键选择观察点 +
+ 点击鼠标右键完成场景投放 +
+
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/analysis/analysis-sceneprojection.htm b/website/public/static/demo/military/example/analysis/analysis-sceneprojection.htm new file mode 100644 index 000000000..5d95240f0 --- /dev/null +++ b/website/public/static/demo/military/example/analysis/analysis-sceneprojection.htm @@ -0,0 +1,149 @@ + + + + + + + 场景投放 + + + + + + + + + +
+
+ 鼠标左键选择观察点 +
+ 点击鼠标左键或右键完成场景投放 +
+
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/analysis/analysis-skyline.htm b/website/public/static/demo/military/example/analysis/analysis-skyline.htm new file mode 100644 index 000000000..d1a41cd20 --- /dev/null +++ b/website/public/static/demo/military/example/analysis/analysis-skyline.htm @@ -0,0 +1,102 @@ + + + + + + + 天际线分析 + + + + + + + + + +
+
+ 鼠标左键点击执行天际线分析 +
+
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/analysis/analysis-slopeAnalysis-normal.htm b/website/public/static/demo/military/example/analysis/analysis-slopeAnalysis-normal.htm new file mode 100644 index 000000000..ebff391d3 --- /dev/null +++ b/website/public/static/demo/military/example/analysis/analysis-slopeAnalysis-normal.htm @@ -0,0 +1,107 @@ + + + + + + 坡度分析 + + + + + + + + + +
+ + diff --git a/website/public/static/demo/military/example/analysis/analysis-slopeAnalysis.htm b/website/public/static/demo/military/example/analysis/analysis-slopeAnalysis.htm new file mode 100644 index 000000000..4aa7fd363 --- /dev/null +++ b/website/public/static/demo/military/example/analysis/analysis-slopeAnalysis.htm @@ -0,0 +1,79 @@ + + + + + + + 坡度分析 + + + + + + + + + +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/analysis/analysis-visibility.htm b/website/public/static/demo/military/example/analysis/analysis-visibility.htm new file mode 100644 index 000000000..3ac30ba29 --- /dev/null +++ b/website/public/static/demo/military/example/analysis/analysis-visibility.htm @@ -0,0 +1,165 @@ + + + + + + + 通视分析 + + + + + + + + + + + +
+
+ 鼠标左键选择起点 +
+ 右键选择结束点并执行通视分析 +
+
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/analysis/analysis-visiblerange.htm b/website/public/static/demo/military/example/analysis/analysis-visiblerange.htm new file mode 100644 index 000000000..148a4656b --- /dev/null +++ b/website/public/static/demo/military/example/analysis/analysis-visiblerange.htm @@ -0,0 +1,163 @@ + + + + + + + 可视域分析 + + + + + + + + + + +
+
+ 鼠标左键选择观察点 +
+ 点击鼠标左键或右键完成可视域分析 +
+
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/clientAnalysis/clientAnalysis-along.htm b/website/public/static/demo/military/example/clientAnalysis/clientAnalysis-along.htm new file mode 100644 index 000000000..d612a737c --- /dev/null +++ b/website/public/static/demo/military/example/clientAnalysis/clientAnalysis-along.htm @@ -0,0 +1,160 @@ + + + + + + Along + + + + + + + + + + + +
+ + + + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/clientAnalysis/clientAnalysis-bezierspline.htm b/website/public/static/demo/military/example/clientAnalysis/clientAnalysis-bezierspline.htm new file mode 100644 index 000000000..7f23d7dd0 --- /dev/null +++ b/website/public/static/demo/military/example/clientAnalysis/clientAnalysis-bezierspline.htm @@ -0,0 +1,105 @@ + + + + + + Along + + + + + + + + + + + +
+ + + + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/clientAnalysis/clientAnalysis-buffer.htm b/website/public/static/demo/military/example/clientAnalysis/clientAnalysis-buffer.htm new file mode 100644 index 000000000..06dc23407 --- /dev/null +++ b/website/public/static/demo/military/example/clientAnalysis/clientAnalysis-buffer.htm @@ -0,0 +1,111 @@ + + + + + + Buffer缓冲区分析 + + + + + + + + +
+ + + + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/clientAnalysis/clientAnalysis-centroid.htm b/website/public/static/demo/military/example/clientAnalysis/clientAnalysis-centroid.htm new file mode 100644 index 000000000..5ce9f6e0b --- /dev/null +++ b/website/public/static/demo/military/example/clientAnalysis/clientAnalysis-centroid.htm @@ -0,0 +1,93 @@ + + + + + + Measure distances + + + + + + + + + +
+ + + + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/clientAnalysis/clientAnalysis-intersect.htm b/website/public/static/demo/military/example/clientAnalysis/clientAnalysis-intersect.htm new file mode 100644 index 000000000..ad8337e82 --- /dev/null +++ b/website/public/static/demo/military/example/clientAnalysis/clientAnalysis-intersect.htm @@ -0,0 +1,105 @@ + + + + + + Along + + + + + + + + + +
+ + + + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/clientAnalysis/clientAnalysis-tin.htm b/website/public/static/demo/military/example/clientAnalysis/clientAnalysis-tin.htm new file mode 100644 index 000000000..57a4ea12c --- /dev/null +++ b/website/public/static/demo/military/example/clientAnalysis/clientAnalysis-tin.htm @@ -0,0 +1,75 @@ + + + + + + Measure distances + + + + + + + + + +
+ + + + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/clientAnalysis/clientAnalysis-voronoi.htm b/website/public/static/demo/military/example/clientAnalysis/clientAnalysis-voronoi.htm new file mode 100644 index 000000000..fd87e68c1 --- /dev/null +++ b/website/public/static/demo/military/example/clientAnalysis/clientAnalysis-voronoi.htm @@ -0,0 +1,78 @@ + + + + + + Measure distances + + + + + + + + + +
+ + + + + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/clientView/clientView-.htm b/website/public/static/demo/military/example/clientView/clientView-.htm new file mode 100644 index 000000000..e0f573765 --- /dev/null +++ b/website/public/static/demo/military/example/clientView/clientView-.htm @@ -0,0 +1,121 @@ + + + + + + + 添加图片 + + + + + + + + + +
+
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/clientView/clientView-appendImage.htm b/website/public/static/demo/military/example/clientView/clientView-appendImage.htm new file mode 100644 index 000000000..fbecbbda4 --- /dev/null +++ b/website/public/static/demo/military/example/clientView/clientView-appendImage.htm @@ -0,0 +1,74 @@ + + + + + + + 添加图片 + + + + + + + + + +
+
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/clientView/clientView-dynamiccircle.htm b/website/public/static/demo/military/example/clientView/clientView-dynamiccircle.htm new file mode 100644 index 000000000..b273bcf2f --- /dev/null +++ b/website/public/static/demo/military/example/clientView/clientView-dynamiccircle.htm @@ -0,0 +1,82 @@ + + + + + + + 动态圆 + + + + + + + + + +
+
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/clientView/clientView-fire.htm b/website/public/static/demo/military/example/clientView/clientView-fire.htm new file mode 100644 index 000000000..381713d5c --- /dev/null +++ b/website/public/static/demo/military/example/clientView/clientView-fire.htm @@ -0,0 +1,217 @@ + + + + + + + 火焰特效 + + + + + + + + + +
+ +
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
排放率(emissionRate) + + +
图像尺寸(imageSize) + + +
粒子生命(particleLife) + + +
速度(speed) + + +
起始规模(startScale) + + +
终止规模(endScale) + + +
+
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/clientView/clientView-firework.htm b/website/public/static/demo/military/example/clientView/clientView-firework.htm new file mode 100644 index 000000000..bd5322dc1 --- /dev/null +++ b/website/public/static/demo/military/example/clientView/clientView-firework.htm @@ -0,0 +1,60 @@ + + + + + + + 烟花特效 + + + + + + + + + +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/clientView/clientView-fog.htm b/website/public/static/demo/military/example/clientView/clientView-fog.htm new file mode 100644 index 000000000..46c89fa26 --- /dev/null +++ b/website/public/static/demo/military/example/clientView/clientView-fog.htm @@ -0,0 +1,71 @@ + + + + + + + 雾特效 + + + + + + + + + +
+
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/clientView/clientView-heatmap.htm b/website/public/static/demo/military/example/clientView/clientView-heatmap.htm new file mode 100644 index 000000000..b9e8eedf8 --- /dev/null +++ b/website/public/static/demo/military/example/clientView/clientView-heatmap.htm @@ -0,0 +1,163 @@ + + + + + + 热力图计算 + + + + + + + + + + +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/clientView/clientView-radarscanning.htm b/website/public/static/demo/military/example/clientView/clientView-radarscanning.htm new file mode 100644 index 000000000..7ee87947d --- /dev/null +++ b/website/public/static/demo/military/example/clientView/clientView-radarscanning.htm @@ -0,0 +1,103 @@ + + + + + + 雷达扫描圆 + + + + + + + + + + +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/clientView/clientView-rain.htm b/website/public/static/demo/military/example/clientView/clientView-rain.htm new file mode 100644 index 000000000..848326345 --- /dev/null +++ b/website/public/static/demo/military/example/clientView/clientView-rain.htm @@ -0,0 +1,70 @@ + + + + + + 下雨特效 + + + + + + + + + + +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/clientView/clientView-smoke.htm b/website/public/static/demo/military/example/clientView/clientView-smoke.htm new file mode 100644 index 000000000..d111530f5 --- /dev/null +++ b/website/public/static/demo/military/example/clientView/clientView-smoke.htm @@ -0,0 +1,224 @@ + + + + + + + 烟雾特效 + + + + + + + + + +
+ +
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
排放率(emissionRate) + + +
图像尺寸(imageSize) + + +
粒子生命(particleLife) + + +
速度(speed) + + +
起始规模(startScale) + + +
终止规模(endScale) + + +
+
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/clientView/clientView-snow.htm b/website/public/static/demo/military/example/clientView/clientView-snow.htm new file mode 100644 index 000000000..ef54de489 --- /dev/null +++ b/website/public/static/demo/military/example/clientView/clientView-snow.htm @@ -0,0 +1,78 @@ + + + + + + 下雪特效 + + + + + + + + + + +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/clientView_Echarts/echarts-air.htm b/website/public/static/demo/military/example/clientView_Echarts/echarts-air.htm new file mode 100644 index 000000000..fd1f37547 --- /dev/null +++ b/website/public/static/demo/military/example/clientView_Echarts/echarts-air.htm @@ -0,0 +1,1122 @@ + + + + + + + 散点图-空气质量 + + + + + + + + + +
+
+ + +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/clientView_Echarts/echarts-biggps.htm b/website/public/static/demo/military/example/clientView_Echarts/echarts-biggps.htm new file mode 100644 index 000000000..12f0d145a --- /dev/null +++ b/website/public/static/demo/military/example/clientView_Echarts/echarts-biggps.htm @@ -0,0 +1,126 @@ + + + + + + 散点图-世界GPS + + + + + + + + +
+ + + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/clientView_Echarts/echarts-bigline.htm b/website/public/static/demo/military/example/clientView_Echarts/echarts-bigline.htm new file mode 100644 index 000000000..ec5da4186 --- /dev/null +++ b/website/public/static/demo/military/example/clientView_Echarts/echarts-bigline.htm @@ -0,0 +1,130 @@ + + + + + + 渐进线-纽约街道 + + + + + + + + +
+ + + + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/clientView_Echarts/echarts-bigpoint.htm b/website/public/static/demo/military/example/clientView_Echarts/echarts-bigpoint.htm new file mode 100644 index 000000000..0d13b2371 --- /dev/null +++ b/website/public/static/demo/military/example/clientView_Echarts/echarts-bigpoint.htm @@ -0,0 +1,122 @@ + + + + + + 散点图-纽约热力 + + + + + + + + +
+ + + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/clientView_Echarts/echarts-bigroad.htm b/website/public/static/demo/military/example/clientView_Echarts/echarts-bigroad.htm new file mode 100644 index 000000000..0dbcde836 --- /dev/null +++ b/website/public/static/demo/military/example/clientView_Echarts/echarts-bigroad.htm @@ -0,0 +1,122 @@ + + + + + + 路径图-中国主干 + + + + + + + + +
+ + + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/clientView_Echarts/echarts-grid.htm b/website/public/static/demo/military/example/clientView_Echarts/echarts-grid.htm new file mode 100644 index 000000000..ab3d32338 --- /dev/null +++ b/website/public/static/demo/military/example/clientView_Echarts/echarts-grid.htm @@ -0,0 +1,196 @@ + + + + + + + 自定义-网格专题 + + + + + + + + + + +
+
+ + +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/clientView_Echarts/echarts-heater.htm b/website/public/static/demo/military/example/clientView_Echarts/echarts-heater.htm new file mode 100644 index 000000000..ed967c126 --- /dev/null +++ b/website/public/static/demo/military/example/clientView_Echarts/echarts-heater.htm @@ -0,0 +1,1066 @@ + + + + + + + 热力图-空气质量 + + + + + + + + + +
+
+ + +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/clientView_Echarts/echarts-line.htm b/website/public/static/demo/military/example/clientView_Echarts/echarts-line.htm new file mode 100644 index 000000000..b41cbc23c --- /dev/null +++ b/website/public/static/demo/military/example/clientView_Echarts/echarts-line.htm @@ -0,0 +1,107 @@ + + + + + + + 路径图-渐进绘制 + + + + + + + + + +
+
+ + +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/clientView_Echarts/echarts-lineanimate.htm b/website/public/static/demo/military/example/clientView_Echarts/echarts-lineanimate.htm new file mode 100644 index 000000000..4e6a35bea --- /dev/null +++ b/website/public/static/demo/military/example/clientView_Echarts/echarts-lineanimate.htm @@ -0,0 +1,134 @@ + + + + + + + 路径图-公交路线 + + + + + + + + + +
+
+ + +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/clientView_Echarts/echarts-migarate.htm b/website/public/static/demo/military/example/clientView_Echarts/echarts-migarate.htm new file mode 100644 index 000000000..5dc17dbf6 --- /dev/null +++ b/website/public/static/demo/military/example/clientView_Echarts/echarts-migarate.htm @@ -0,0 +1,587 @@ + + + + + + + 路径图-模拟迁徙 + + + + + + + + + +
+
+ + +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/clientView_Echarts/echarts-weibo.htm b/website/public/static/demo/military/example/clientView_Echarts/echarts-weibo.htm new file mode 100644 index 000000000..7c8e08e15 --- /dev/null +++ b/website/public/static/demo/military/example/clientView_Echarts/echarts-weibo.htm @@ -0,0 +1,154 @@ + + + + + + + 散点图-微博签到 + + + + + + + + + + +
+
+ + +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/clientView_MapV/mapv-heater.htm b/website/public/static/demo/military/example/clientView_MapV/mapv-heater.htm new file mode 100644 index 000000000..a05c1bd2b --- /dev/null +++ b/website/public/static/demo/military/example/clientView_MapV/mapv-heater.htm @@ -0,0 +1,135 @@ + + + + + + 热力图 + + + + + + + + +
+ + + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/clientView_MapV/mapv-migrate.htm b/website/public/static/demo/military/example/clientView_MapV/mapv-migrate.htm new file mode 100644 index 000000000..e91233e7e --- /dev/null +++ b/website/public/static/demo/military/example/clientView_MapV/mapv-migrate.htm @@ -0,0 +1,163 @@ + + + + + + 迁移图 + + + + + + + + +
+ + + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/clientView_MapV/mapv-path_converge.htm b/website/public/static/demo/military/example/clientView_MapV/mapv-path_converge.htm new file mode 100644 index 000000000..63f3a3acf --- /dev/null +++ b/website/public/static/demo/military/example/clientView_MapV/mapv-path_converge.htm @@ -0,0 +1,196 @@ + + + + + + 轨迹汇聚 + + + + + + + + +
+ + + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/clientView_MapV/mapv-point_animate.htm b/website/public/static/demo/military/example/clientView_MapV/mapv-point_animate.htm new file mode 100644 index 000000000..e6e0d83ba --- /dev/null +++ b/website/public/static/demo/military/example/clientView_MapV/mapv-point_animate.htm @@ -0,0 +1,104 @@ + + + + + + 点数据播放 + + + + + + + + +
+ + + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/clientView_MapV/mapv-point_grid.htm b/website/public/static/demo/military/example/clientView_MapV/mapv-point_grid.htm new file mode 100644 index 000000000..9633d8c81 --- /dev/null +++ b/website/public/static/demo/military/example/clientView_MapV/mapv-point_grid.htm @@ -0,0 +1,102 @@ + + + + + + Along + + + + + + + + +
+ + + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/clientView_MapV/mapv-point_honeycomb.htm b/website/public/static/demo/military/example/clientView_MapV/mapv-point_honeycomb.htm new file mode 100644 index 000000000..db6cb1312 --- /dev/null +++ b/website/public/static/demo/military/example/clientView_MapV/mapv-point_honeycomb.htm @@ -0,0 +1,98 @@ + + + + + + 蜂窝形密度 + + + + + + + + +
+ + + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/clientView_MapV/mapv-point_mutilanimate.htm b/website/public/static/demo/military/example/clientView_MapV/mapv-point_mutilanimate.htm new file mode 100644 index 000000000..7de8b61b8 --- /dev/null +++ b/website/public/static/demo/military/example/clientView_MapV/mapv-point_mutilanimate.htm @@ -0,0 +1,118 @@ + + + + + 点重叠播放 + + + + + + + + +
+ + + diff --git a/website/public/static/demo/military/example/clientView_MapV/mapv-point_weibo.htm b/website/public/static/demo/military/example/clientView_MapV/mapv-point_weibo.htm new file mode 100644 index 000000000..0b6b16854 --- /dev/null +++ b/website/public/static/demo/military/example/clientView_MapV/mapv-point_weibo.htm @@ -0,0 +1,137 @@ + + + + + 点微博数据 + + + + + + + + +
+ + + diff --git a/website/public/static/demo/military/example/clientView_MapV/mapv-render_polygon.htm b/website/public/static/demo/military/example/clientView_MapV/mapv-render_polygon.htm new file mode 100644 index 000000000..c5bfa3356 --- /dev/null +++ b/website/public/static/demo/military/example/clientView_MapV/mapv-render_polygon.htm @@ -0,0 +1,61 @@ + + + + + + 区数据渲染 + + + + + + + + +
+ + + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/clientView_MapV/mapv-simplemigrate.htm b/website/public/static/demo/military/example/clientView_MapV/mapv-simplemigrate.htm new file mode 100644 index 000000000..fce6d87a9 --- /dev/null +++ b/website/public/static/demo/military/example/clientView_MapV/mapv-simplemigrate.htm @@ -0,0 +1,267 @@ + + + + + + 单一迁移轨迹 + + + + + + + + +
+ + + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/clientView_MapV/mapv-tracker.htm b/website/public/static/demo/military/example/clientView_MapV/mapv-tracker.htm new file mode 100644 index 000000000..09dec0527 --- /dev/null +++ b/website/public/static/demo/military/example/clientView_MapV/mapv-tracker.htm @@ -0,0 +1,119 @@ + + + + + + 动态轨迹 + + + + + + + + +
+ + + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/clientView_MapV/mapv-trackerline.htm b/website/public/static/demo/military/example/clientView_MapV/mapv-trackerline.htm new file mode 100644 index 000000000..18f49331d --- /dev/null +++ b/website/public/static/demo/military/example/clientView_MapV/mapv-trackerline.htm @@ -0,0 +1,59 @@ + + + + + 交通轨迹 + + + + + + + + +
+ + + diff --git a/website/public/static/demo/military/example/data/data-3Dtiles.htm b/website/public/static/demo/military/example/data/data-3Dtiles.htm new file mode 100644 index 000000000..8ae8c6fd1 --- /dev/null +++ b/website/public/static/demo/military/example/data/data-3Dtiles.htm @@ -0,0 +1,61 @@ + + + + + + 3DTile数据加载 + + + + + + + + + + + +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/data/data-addgltf.htm b/website/public/static/demo/military/example/data/data-addgltf.htm new file mode 100644 index 000000000..db1e6b160 --- /dev/null +++ b/website/public/static/demo/military/example/data/data-addgltf.htm @@ -0,0 +1,93 @@ + + + + + + 添加Gltf模型 + + + + + + + + + + + +
+ +
+ +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/data/data-addgltfs.htm b/website/public/static/demo/military/example/data/data-addgltfs.htm new file mode 100644 index 000000000..453fe2ee4 --- /dev/null +++ b/website/public/static/demo/military/example/data/data-addgltfs.htm @@ -0,0 +1,142 @@ + + + + + + 批量添加Gltf模型 + + + + + + + + + + + +
+ +
+ +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/data/data-czml.htm b/website/public/static/demo/military/example/data/data-czml.htm new file mode 100644 index 000000000..74d37986f --- /dev/null +++ b/website/public/static/demo/military/example/data/data-czml.htm @@ -0,0 +1,85 @@ + + + + + + 添加CZML数据 + + + + + + + + + + + +
+ +
+ +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/data/data-geojson.htm b/website/public/static/demo/military/example/data/data-geojson.htm new file mode 100644 index 000000000..6291970b4 --- /dev/null +++ b/website/public/static/demo/military/example/data/data-geojson.htm @@ -0,0 +1,74 @@ + + + + + + 添加GeoJson数据 + + + + + + + + + + + +
+ +
+ +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/data/data-kml.htm b/website/public/static/demo/military/example/data/data-kml.htm new file mode 100644 index 000000000..a3a0c5e45 --- /dev/null +++ b/website/public/static/demo/military/example/data/data-kml.htm @@ -0,0 +1,80 @@ + + + + + + 添加KML数据 + + + + + + + + + + + +
+ +
+ +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/data/data-kmz.htm b/website/public/static/demo/military/example/data/data-kmz.htm new file mode 100644 index 000000000..e08a6dca1 --- /dev/null +++ b/website/public/static/demo/military/example/data/data-kmz.htm @@ -0,0 +1,74 @@ + + + + + + 添加KMZ数据 + + + + + + + + + + + +
+ +
+ +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/data/data-movegltf.htm b/website/public/static/demo/military/example/data/data-movegltf.htm new file mode 100644 index 000000000..0324bec8b --- /dev/null +++ b/website/public/static/demo/military/example/data/data-movegltf.htm @@ -0,0 +1,151 @@ + + + + + + 交互式移动模型数据 + + + + + + + + + + + +
+
+ +
+
+ +
+ +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/data/data-onlineImage.htm b/website/public/static/demo/military/example/data/data-onlineImage.htm new file mode 100644 index 000000000..2faef74f1 --- /dev/null +++ b/website/public/static/demo/military/example/data/data-onlineImage.htm @@ -0,0 +1,89 @@ + + + + + + + 添加在线图片数据 + + + + + + + + + +
+
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/data/data-outlineImage.htm b/website/public/static/demo/military/example/data/data-outlineImage.htm new file mode 100644 index 000000000..6d8961550 --- /dev/null +++ b/website/public/static/demo/military/example/data/data-outlineImage.htm @@ -0,0 +1,64 @@ + + + + + + 添加本地图片数据 + + + + + + + + + + + +
+ +
+ +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/drawGraphic/drawGraphic-groundhole.htm b/website/public/static/demo/military/example/drawGraphic/drawGraphic-groundhole.htm new file mode 100644 index 000000000..a5d95771d --- /dev/null +++ b/website/public/static/demo/military/example/drawGraphic/drawGraphic-groundhole.htm @@ -0,0 +1,157 @@ + + + + + + 贴地带洞多边形 + + + + + + + + + + + +
+ +
+ +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/drawGraphic/drawGraphic-groundline.htm b/website/public/static/demo/military/example/drawGraphic/drawGraphic-groundline.htm new file mode 100644 index 000000000..59b497a76 --- /dev/null +++ b/website/public/static/demo/military/example/drawGraphic/drawGraphic-groundline.htm @@ -0,0 +1,86 @@ + + + + + + 贴地球线绘制 + + + + + + + + + + + +
+ +
+ +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/drawGraphic/drawGraphic-groundpolygon.htm b/website/public/static/demo/military/example/drawGraphic/drawGraphic-groundpolygon.htm new file mode 100644 index 000000000..a372de96b --- /dev/null +++ b/website/public/static/demo/military/example/drawGraphic/drawGraphic-groundpolygon.htm @@ -0,0 +1,93 @@ + + + + + + 贴地多边形绘制 + + + + + + + + + + + +
+ +
+ +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/drawGraphic/drawGraphic-hole.htm b/website/public/static/demo/military/example/drawGraphic/drawGraphic-hole.htm new file mode 100644 index 000000000..a7008d98b --- /dev/null +++ b/website/public/static/demo/military/example/drawGraphic/drawGraphic-hole.htm @@ -0,0 +1,129 @@ + + + + + + 绘制带洞区 + + + + + + + + + + + +
+ +
+ +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/drawGraphic/drawGraphic-icon.htm b/website/public/static/demo/military/example/drawGraphic/drawGraphic-icon.htm new file mode 100644 index 000000000..a196b0107 --- /dev/null +++ b/website/public/static/demo/military/example/drawGraphic/drawGraphic-icon.htm @@ -0,0 +1,86 @@ + + + + + + 图片标签 + + + + + + + + + + + +
+ +
+ +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/drawGraphic/drawGraphic-interaction.htm b/website/public/static/demo/military/example/drawGraphic/drawGraphic-interaction.htm new file mode 100644 index 000000000..ccd62b68a --- /dev/null +++ b/website/public/static/demo/military/example/drawGraphic/drawGraphic-interaction.htm @@ -0,0 +1,268 @@ + + + + + + 交互式图形绘制 + + + + + + + + + + + +
+
+ + + + +
+
+ +
+ +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/drawGraphic/drawGraphic-label.htm b/website/public/static/demo/military/example/drawGraphic/drawGraphic-label.htm new file mode 100644 index 000000000..5c31aede0 --- /dev/null +++ b/website/public/static/demo/military/example/drawGraphic/drawGraphic-label.htm @@ -0,0 +1,101 @@ + + + + + + 文本标注 + + + + + + + + + + + +
+ +
+ +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/drawGraphic/drawGraphic-labelicon.htm b/website/public/static/demo/military/example/drawGraphic/drawGraphic-labelicon.htm new file mode 100644 index 000000000..072c4210d --- /dev/null +++ b/website/public/static/demo/military/example/drawGraphic/drawGraphic-labelicon.htm @@ -0,0 +1,143 @@ + + + + + + 地标绘制 + + + + + + + + + + + +
+ +
+ +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/drawGraphic/drawGraphic-line.htm b/website/public/static/demo/military/example/drawGraphic/drawGraphic-line.htm new file mode 100644 index 000000000..3d8324f45 --- /dev/null +++ b/website/public/static/demo/military/example/drawGraphic/drawGraphic-line.htm @@ -0,0 +1,109 @@ + + + + + + 线实体绘制 + + + + + + + + + + + +
+ +
+ +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/drawGraphic/drawGraphic-militarysymbol.htm b/website/public/static/demo/military/example/drawGraphic/drawGraphic-militarysymbol.htm new file mode 100644 index 000000000..3c894f366 --- /dev/null +++ b/website/public/static/demo/military/example/drawGraphic/drawGraphic-militarysymbol.htm @@ -0,0 +1,30 @@ + + + + + + 动态圆 + + + + + + + + + + +
+ + \ No newline at end of file diff --git a/website/public/static/demo/military/example/drawGraphic/drawGraphic-picsymbol.htm b/website/public/static/demo/military/example/drawGraphic/drawGraphic-picsymbol.htm new file mode 100644 index 000000000..0c3624193 --- /dev/null +++ b/website/public/static/demo/military/example/drawGraphic/drawGraphic-picsymbol.htm @@ -0,0 +1,115 @@ + + + + + + 地标绘制 + + + + + + + + + + + +
+ +
+ +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/drawGraphic/drawGraphic-picture.htm b/website/public/static/demo/military/example/drawGraphic/drawGraphic-picture.htm new file mode 100644 index 000000000..b5bda4545 --- /dev/null +++ b/website/public/static/demo/military/example/drawGraphic/drawGraphic-picture.htm @@ -0,0 +1,64 @@ + + + + + + 图片展示 + + + + + + + + + + + +
+ +
+ +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/drawGraphic/drawGraphic-point.htm b/website/public/static/demo/military/example/drawGraphic/drawGraphic-point.htm new file mode 100644 index 000000000..93d981d37 --- /dev/null +++ b/website/public/static/demo/military/example/drawGraphic/drawGraphic-point.htm @@ -0,0 +1,105 @@ + + + + + + 点实体绘制 + + + + + + + + + + + +
+ +
+ +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/drawGraphic/drawGraphic-polygon.htm b/website/public/static/demo/military/example/drawGraphic/drawGraphic-polygon.htm new file mode 100644 index 000000000..c8f727d05 --- /dev/null +++ b/website/public/static/demo/military/example/drawGraphic/drawGraphic-polygon.htm @@ -0,0 +1,102 @@ + + + + + + 立体区绘制 + + + + + + + + + + + +
+ +
+ +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/drawGraphic/drawGraphic-popup.htm b/website/public/static/demo/military/example/drawGraphic/drawGraphic-popup.htm new file mode 100644 index 000000000..47d2f7650 --- /dev/null +++ b/website/public/static/demo/military/example/drawGraphic/drawGraphic-popup.htm @@ -0,0 +1,101 @@ + + + + + + 气泡弹窗 + + + + + + + + + + + +
+ + +
+ +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/drawGraphic/drawGraphic-stretchpolygon.htm b/website/public/static/demo/military/example/drawGraphic/drawGraphic-stretchpolygon.htm new file mode 100644 index 000000000..95d81030f --- /dev/null +++ b/website/public/static/demo/military/example/drawGraphic/drawGraphic-stretchpolygon.htm @@ -0,0 +1,123 @@ + + + + + + 拉伸区绘制 + + + + + + + + + + + +
+ +
+ +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/drawGraphic/drawGraphic-symbol.htm b/website/public/static/demo/military/example/drawGraphic/drawGraphic-symbol.htm new file mode 100644 index 000000000..8e43832d4 --- /dev/null +++ b/website/public/static/demo/military/example/drawGraphic/drawGraphic-symbol.htm @@ -0,0 +1,81 @@ + + + + + + + 注记 + + + + + + + + +
+
+ +
+ + +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/drawGraphic/drawGraphic-terrainline.htm b/website/public/static/demo/military/example/drawGraphic/drawGraphic-terrainline.htm new file mode 100644 index 000000000..258361baa --- /dev/null +++ b/website/public/static/demo/military/example/drawGraphic/drawGraphic-terrainline.htm @@ -0,0 +1,117 @@ + + + + + + 贴地形线绘制 + + + + + + + + + + + +
+ +
+ +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/drawGraphic/drawGraphic-terrainpolygon.htm b/website/public/static/demo/military/example/drawGraphic/drawGraphic-terrainpolygon.htm new file mode 100644 index 000000000..1bd542677 --- /dev/null +++ b/website/public/static/demo/military/example/drawGraphic/drawGraphic-terrainpolygon.htm @@ -0,0 +1,107 @@ + + + + + + 贴地形区绘制 + + + + + + + + + + + +
+
+ +
+ +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/globe/chicago.htm b/website/public/static/demo/military/example/globe/chicago.htm new file mode 100644 index 000000000..c0f58b043 --- /dev/null +++ b/website/public/static/demo/military/example/globe/chicago.htm @@ -0,0 +1,166 @@ + + + + + + + 加载WMS服务 + + + + + + + + +
+ +
+ + +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/globe/paris.htm b/website/public/static/demo/military/example/globe/paris.htm new file mode 100644 index 000000000..afef91ccb --- /dev/null +++ b/website/public/static/demo/military/example/globe/paris.htm @@ -0,0 +1,169 @@ + + + + + + + 加载WMS服务 + + + + + + + + +
+ +
+ + +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/globe/washington.htm b/website/public/static/demo/military/example/globe/washington.htm new file mode 100644 index 000000000..995b7a087 --- /dev/null +++ b/website/public/static/demo/military/example/globe/washington.htm @@ -0,0 +1,200 @@ + + + + + + + 加载WMS服务 + + + + + + + + +
+ +
+ + +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/gnss/animiator.htm b/website/public/static/demo/military/example/gnss/animiator.htm new file mode 100644 index 000000000..ccd1f0734 --- /dev/null +++ b/website/public/static/demo/military/example/gnss/animiator.htm @@ -0,0 +1,38 @@ + + + + + + Along + + + + + + + +
+ + + + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/gnss/boom.htm b/website/public/static/demo/military/example/gnss/boom.htm new file mode 100644 index 000000000..9dcb32dcd --- /dev/null +++ b/website/public/static/demo/military/example/gnss/boom.htm @@ -0,0 +1,368 @@ + + + + + + Along + + + + + + + +
+ + + + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/gnss/communicate.htm b/website/public/static/demo/military/example/gnss/communicate.htm new file mode 100644 index 000000000..4ea72f38d --- /dev/null +++ b/website/public/static/demo/military/example/gnss/communicate.htm @@ -0,0 +1,38 @@ + + + + + + Along + + + + + + + +
+ + + + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/gnss/fire.htm b/website/public/static/demo/military/example/gnss/fire.htm new file mode 100644 index 000000000..5b4028393 --- /dev/null +++ b/website/public/static/demo/military/example/gnss/fire.htm @@ -0,0 +1,37 @@ + + + + + + Along + + + + + + + +
+ + + + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/gnss/flight.htm b/website/public/static/demo/military/example/gnss/flight.htm new file mode 100644 index 000000000..9430f6eeb --- /dev/null +++ b/website/public/static/demo/military/example/gnss/flight.htm @@ -0,0 +1,38 @@ + + + + + + Along + + + + + + + +
+ + + + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/gnss/mutil_bloom.htm b/website/public/static/demo/military/example/gnss/mutil_bloom.htm new file mode 100644 index 000000000..5e208a037 --- /dev/null +++ b/website/public/static/demo/military/example/gnss/mutil_bloom.htm @@ -0,0 +1,38 @@ + + + + + + Along + + + + + + + +
+ + + + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/gnss/saastamonien.htm b/website/public/static/demo/military/example/gnss/saastamonien.htm new file mode 100644 index 000000000..6fff70d82 --- /dev/null +++ b/website/public/static/demo/military/example/gnss/saastamonien.htm @@ -0,0 +1,38 @@ + + + + + + Along + + + + + + + +
+ + + + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/gnss/satellite.htm b/website/public/static/demo/military/example/gnss/satellite.htm new file mode 100644 index 000000000..fdd858f2d --- /dev/null +++ b/website/public/static/demo/military/example/gnss/satellite.htm @@ -0,0 +1,61 @@ + + + + + + Along + + + + + + + +
+ + + + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/gnss/ship.htm b/website/public/static/demo/military/example/gnss/ship.htm new file mode 100644 index 000000000..cf053c737 --- /dev/null +++ b/website/public/static/demo/military/example/gnss/ship.htm @@ -0,0 +1,37 @@ + + + + + + Along + + + + + + + +
+ + + + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/gnss/track.htm b/website/public/static/demo/military/example/gnss/track.htm new file mode 100644 index 000000000..6a9737e39 --- /dev/null +++ b/website/public/static/demo/military/example/gnss/track.htm @@ -0,0 +1,38 @@ + + + + + + Along + + + + + + + +
+ + + + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/m3d/m3d-analysis.htm b/website/public/static/demo/military/example/m3d/m3d-analysis.htm new file mode 100644 index 000000000..059969fde --- /dev/null +++ b/website/public/static/demo/military/example/m3d/m3d-analysis.htm @@ -0,0 +1,203 @@ + + + + + + 地层分析 + + + + + + + + + + +
+ +
+ + +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/m3d/m3d-bim.htm b/website/public/static/demo/military/example/m3d/m3d-bim.htm new file mode 100644 index 000000000..246719493 --- /dev/null +++ b/website/public/static/demo/military/example/m3d/m3d-bim.htm @@ -0,0 +1,69 @@ + + + + + + M3D-BIM模型数据展示 + + + + + + + + + + + +
+ +
+ +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/m3d/m3d-drill.htm b/website/public/static/demo/military/example/m3d/m3d-drill.htm new file mode 100644 index 000000000..9c8685784 --- /dev/null +++ b/website/public/static/demo/military/example/m3d/m3d-drill.htm @@ -0,0 +1,176 @@ + + + + + + M3D-地质钻孔数据展示 + + + + + + + + + + + +
+ +
+ +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/m3d/m3d-fileserver.htm b/website/public/static/demo/military/example/m3d/m3d-fileserver.htm new file mode 100644 index 000000000..a2425a39d --- /dev/null +++ b/website/public/static/demo/military/example/m3d/m3d-fileserver.htm @@ -0,0 +1,76 @@ + + + + + M3D-景观模型数据展示 + + + + + + + + + + + +
+ +
+ +
+ + diff --git a/website/public/static/demo/military/example/m3d/m3d-geobody-showlayer.htm b/website/public/static/demo/military/example/m3d/m3d-geobody-showlayer.htm new file mode 100644 index 000000000..a0a53bc2d --- /dev/null +++ b/website/public/static/demo/military/example/m3d/m3d-geobody-showlayer.htm @@ -0,0 +1,215 @@ + + + + + + M3D-地质体分层展示 + + + + + + + + + + + +
+ +
+ +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/m3d/m3d-geobody.htm b/website/public/static/demo/military/example/m3d/m3d-geobody.htm new file mode 100644 index 000000000..f0b53a43e --- /dev/null +++ b/website/public/static/demo/military/example/m3d/m3d-geobody.htm @@ -0,0 +1,131 @@ + + + + + + M3D-地质体数据展示 + + + + + + + + + + + +
+ +
+ +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/m3d/m3d-geobody1.htm b/website/public/static/demo/military/example/m3d/m3d-geobody1.htm new file mode 100644 index 000000000..d3212dcbf --- /dev/null +++ b/website/public/static/demo/military/example/m3d/m3d-geobody1.htm @@ -0,0 +1,67 @@ + + + + + + M3D-地质体数据展示1 + + + + + + + + + + +
+
+ +
+ +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/m3d/m3d-geobody2.htm b/website/public/static/demo/military/example/m3d/m3d-geobody2.htm new file mode 100644 index 000000000..60b70a75f --- /dev/null +++ b/website/public/static/demo/military/example/m3d/m3d-geobody2.htm @@ -0,0 +1,95 @@ + + + + + + + 加载WMS服务 + + + + + + + + +
+ +
+ + +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/m3d/m3d-geobodygrid.htm b/website/public/static/demo/military/example/m3d/m3d-geobodygrid.htm new file mode 100644 index 000000000..209978e98 --- /dev/null +++ b/website/public/static/demo/military/example/m3d/m3d-geobodygrid.htm @@ -0,0 +1,76 @@ + + + + + + M3D-地质体网格数据展示 + + + + + + + + + + + +
+ +
+ +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/m3d/m3d-landscape.htm b/website/public/static/demo/military/example/m3d/m3d-landscape.htm new file mode 100644 index 000000000..db7c02634 --- /dev/null +++ b/website/public/static/demo/military/example/m3d/m3d-landscape.htm @@ -0,0 +1,82 @@ + + + + + + M3D-景观模型数据展示 + + + + + + + + + + + +
+ +
+ +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/m3d/m3d-oblique.htm b/website/public/static/demo/military/example/m3d/m3d-oblique.htm new file mode 100644 index 000000000..24073315c --- /dev/null +++ b/website/public/static/demo/military/example/m3d/m3d-oblique.htm @@ -0,0 +1,80 @@ + + + + + + M3D-倾斜摄影数据展示 + + + + + + + + + + + +
+ +
+ +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/m3d/m3d-pointcloud.htm b/website/public/static/demo/military/example/m3d/m3d-pointcloud.htm new file mode 100644 index 000000000..71d77b813 --- /dev/null +++ b/website/public/static/demo/military/example/m3d/m3d-pointcloud.htm @@ -0,0 +1,76 @@ + + + + + + M3D-点云数据展示 + + + + + + + + + + + +
+ +
+ +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/m3d/m3d-roughmodel.htm b/website/public/static/demo/military/example/m3d/m3d-roughmodel.htm new file mode 100644 index 000000000..886252a2e --- /dev/null +++ b/website/public/static/demo/military/example/m3d/m3d-roughmodel.htm @@ -0,0 +1,83 @@ + + + + + + M3D-建筑粗模数据展示 + + + + + + + + + + + +
+ +
+ +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/m3d/m3d-terrain.htm b/website/public/static/demo/military/example/m3d/m3d-terrain.htm new file mode 100644 index 000000000..c1be06f5a --- /dev/null +++ b/website/public/static/demo/military/example/m3d/m3d-terrain.htm @@ -0,0 +1,71 @@ + + + + + + M3D-地形数据展示 + + + + + + + + + + +
+
+ +
+ +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/m3d/m3d-underpipe.htm b/website/public/static/demo/military/example/m3d/m3d-underpipe.htm new file mode 100644 index 000000000..76e8b7616 --- /dev/null +++ b/website/public/static/demo/military/example/m3d/m3d-underpipe.htm @@ -0,0 +1,92 @@ + + + + + + M3D-地下管线数据展示 + + + + + + + + + + + +
+
+ + 透明度： +
+
+ +
+ +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/mapgis/mapboxstyle.htm b/website/public/static/demo/military/example/mapgis/mapboxstyle.htm new file mode 100644 index 000000000..cd7989d99 --- /dev/null +++ b/website/public/static/demo/military/example/mapgis/mapboxstyle.htm @@ -0,0 +1,57 @@ + + + + + + + 地层分析 + + + + + + + + + +
+ +
+ + +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/mapgis/mapgis-2d-doc.htm b/website/public/static/demo/military/example/mapgis/mapgis-2d-doc.htm new file mode 100644 index 000000000..37424a208 --- /dev/null +++ b/website/public/static/demo/military/example/mapgis/mapgis-2d-doc.htm @@ -0,0 +1,90 @@ + + + + + + 加载IGServer二维矢量地图服务 + + + + + + + + + + + +
+ +
+ +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/mapgis/mapgis-2d-layer.htm b/website/public/static/demo/military/example/mapgis/mapgis-2d-layer.htm new file mode 100644 index 000000000..7e8505299 --- /dev/null +++ b/website/public/static/demo/military/example/mapgis/mapgis-2d-layer.htm @@ -0,0 +1,89 @@ + + + + + + 加载IGServer二维矢量图层服务 + + + + + + + + + + + +
+ +
+ +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/mapgis/mapgis-2d-tile.htm b/website/public/static/demo/military/example/mapgis/mapgis-2d-tile.htm new file mode 100644 index 000000000..1a100ab4a --- /dev/null +++ b/website/public/static/demo/military/example/mapgis/mapgis-2d-tile.htm @@ -0,0 +1,90 @@ + + + + + + 加载IGServer二维瓦片地图服务 + + + + + + + + + + + +
+ +
+ +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/mapgis/mapgis-2dtile.htm b/website/public/static/demo/military/example/mapgis/mapgis-2dtile.htm new file mode 100644 index 000000000..572517194 --- /dev/null +++ b/website/public/static/demo/military/example/mapgis/mapgis-2dtile.htm @@ -0,0 +1,89 @@ + + + + + + + 加载二维瓦片地图 + + + + + + + + + +
+
+ +
+ + +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/mapgis/mapgis-2dvector.htm b/website/public/static/demo/military/example/mapgis/mapgis-2dvector.htm new file mode 100644 index 000000000..281d5ea0e --- /dev/null +++ b/website/public/static/demo/military/example/mapgis/mapgis-2dvector.htm @@ -0,0 +1,96 @@ + + + + + + + 加载WMS服务 + + + + + + + +
+ + +
+
+ +
+ + +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/mapgis/mapgis-dem.htm b/website/public/static/demo/military/example/mapgis/mapgis-dem.htm new file mode 100644 index 000000000..65f55ec3e --- /dev/null +++ b/website/public/static/demo/military/example/mapgis/mapgis-dem.htm @@ -0,0 +1,79 @@ + + + + + + 加载WMS服务 + + + + + + + + + + + +
+ +
+ +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/mapgis/mapgis-dem250.htm b/website/public/static/demo/military/example/mapgis/mapgis-dem250.htm new file mode 100644 index 000000000..dce08fc0f --- /dev/null +++ b/website/public/static/demo/military/example/mapgis/mapgis-dem250.htm @@ -0,0 +1,84 @@ + + + + + + + 加载WMS服务 + + + + + + + + +
+ +
+ + +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/mapgis/mapgis-oblique.htm b/website/public/static/demo/military/example/mapgis/mapgis-oblique.htm new file mode 100644 index 000000000..5c9ba499c --- /dev/null +++ b/website/public/static/demo/military/example/mapgis/mapgis-oblique.htm @@ -0,0 +1,78 @@ + + + + + + 倾斜摄影 + + + + + + + + + + + +
+ +
+ +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/mapgis/mapgis-raster.htm b/website/public/static/demo/military/example/mapgis/mapgis-raster.htm new file mode 100644 index 000000000..3fa03404c --- /dev/null +++ b/website/public/static/demo/military/example/mapgis/mapgis-raster.htm @@ -0,0 +1,73 @@ + + + + + + 加载WMS服务 + + + + + + + + + + + +
+ +
+ +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/mapgis/mapgis-raster250.htm b/website/public/static/demo/military/example/mapgis/mapgis-raster250.htm new file mode 100644 index 000000000..a1e540500 --- /dev/null +++ b/website/public/static/demo/military/example/mapgis/mapgis-raster250.htm @@ -0,0 +1,63 @@ + + + + + + 加载WMS服务 + + + + + + + + +
+ +
+ + +
+ + diff --git a/website/public/static/demo/military/example/mapgis/mapgis-terrain.htm b/website/public/static/demo/military/example/mapgis/mapgis-terrain.htm new file mode 100644 index 000000000..96f15d28d --- /dev/null +++ b/website/public/static/demo/military/example/mapgis/mapgis-terrain.htm @@ -0,0 +1,80 @@ + + + + + + 地形数据显示 + + + + + + + + + + + +
+ +
+ +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/mapgis/mapgis-vectortile-4326.htm b/website/public/static/demo/military/example/mapgis/mapgis-vectortile-4326.htm new file mode 100644 index 000000000..d139f6f42 --- /dev/null +++ b/website/public/static/demo/military/example/mapgis/mapgis-vectortile-4326.htm @@ -0,0 +1,78 @@ + + + + + 地层分析 + + + + + + + + + + +
+ +
+ + +
+ + diff --git a/website/public/static/demo/military/example/mapgis/mapgis-vectortile-darkstyle.htm b/website/public/static/demo/military/example/mapgis/mapgis-vectortile-darkstyle.htm new file mode 100644 index 000000000..dd068c478 --- /dev/null +++ b/website/public/static/demo/military/example/mapgis/mapgis-vectortile-darkstyle.htm @@ -0,0 +1,72 @@ + + + + + + + 地层分析 + + + + + + + + + +
+ +
+ + +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/mapgis/mapgis-vectortile-lightstyle.htm b/website/public/static/demo/military/example/mapgis/mapgis-vectortile-lightstyle.htm new file mode 100644 index 000000000..c9ba4ae1c --- /dev/null +++ b/website/public/static/demo/military/example/mapgis/mapgis-vectortile-lightstyle.htm @@ -0,0 +1,72 @@ + + + + + + + 地层分析 + + + + + + + + + +
+ +
+ + +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/mapgis/mapgis-vectortile-streetstyle.htm b/website/public/static/demo/military/example/mapgis/mapgis-vectortile-streetstyle.htm new file mode 100644 index 000000000..4e42fce2b --- /dev/null +++ b/website/public/static/demo/military/example/mapgis/mapgis-vectortile-streetstyle.htm @@ -0,0 +1,72 @@ + + + + + + + 地层分析 + + + + + + + + + +
+ +
+ + +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/mapgis/mapgis-vectortile.htm b/website/public/static/demo/military/example/mapgis/mapgis-vectortile.htm new file mode 100644 index 000000000..59740e44f --- /dev/null +++ b/website/public/static/demo/military/example/mapgis/mapgis-vectortile.htm @@ -0,0 +1,87 @@ + + + + + + 地层分析 + + + + + + + + + + +
+ +
+ + +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/measure/measure-area.htm b/website/public/static/demo/military/example/measure/measure-area.htm new file mode 100644 index 000000000..3e8a21de9 --- /dev/null +++ b/website/public/static/demo/military/example/measure/measure-area.htm @@ -0,0 +1,96 @@ + + + + + + + 计算面积 + + + + + + + + + + +
+
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/measure/measure-length.htm b/website/public/static/demo/military/example/measure/measure-length.htm new file mode 100644 index 000000000..7baf8a5f9 --- /dev/null +++ b/website/public/static/demo/military/example/measure/measure-length.htm @@ -0,0 +1,96 @@ + + + + + + + 计算长度 + + + + + + + + + + +
+
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/measure/measure-slpoe.htm b/website/public/static/demo/military/example/measure/measure-slpoe.htm new file mode 100644 index 000000000..fc28d2c53 --- /dev/null +++ b/website/public/static/demo/military/example/measure/measure-slpoe.htm @@ -0,0 +1,96 @@ + + + + + + + 测量坡度 + + + + + + + + + + +
+
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/measure/measure-triangle.htm b/website/public/static/demo/military/example/measure/measure-triangle.htm new file mode 100644 index 000000000..7ed5db4a6 --- /dev/null +++ b/website/public/static/demo/military/example/measure/measure-triangle.htm @@ -0,0 +1,96 @@ + + + + + + + 三角测量 + + + + + + + + + + +
+
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/ogc/ogc-wms.htm b/website/public/static/demo/military/example/ogc/ogc-wms.htm new file mode 100644 index 000000000..59f64b206 --- /dev/null +++ b/website/public/static/demo/military/example/ogc/ogc-wms.htm @@ -0,0 +1,80 @@ + + + + + + 加载WMS服务地图 + + + + + + + + + + + +
+ +
+ +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/ogc/ogc-wmts.htm b/website/public/static/demo/military/example/ogc/ogc-wmts.htm new file mode 100644 index 000000000..bff310a03 --- /dev/null +++ b/website/public/static/demo/military/example/ogc/ogc-wmts.htm @@ -0,0 +1,81 @@ + + + + + + 加载WMTS服务地图 + + + + + + + + + + + +
+ +
+ +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/query/query-2dByAtt.htm b/website/public/static/demo/military/example/query/query-2dByAtt.htm new file mode 100644 index 000000000..1cf221fb9 --- /dev/null +++ b/website/public/static/demo/military/example/query/query-2dByAtt.htm @@ -0,0 +1,176 @@ + + + + + + 加载IGServer二维矢量地图服务 + + + + + + + + + + + +
+
+ +
+
+

查询结果

+ + + + + + + + + + + + + + + + + + + +
行政区代码： + +
省名： + +
拼音： + +
人口数 + +
+
+
+ +
+ +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/query/query-2dByOID.htm b/website/public/static/demo/military/example/query/query-2dByOID.htm new file mode 100644 index 000000000..ed1a9fcea --- /dev/null +++ b/website/public/static/demo/military/example/query/query-2dByOID.htm @@ -0,0 +1,174 @@ + + + + + + 加载IGServer二维矢量地图服务 + + + + + + + + + + + +
+
+ +
+
+

查询结果

+ + + + + + + + + + + + + + + + + + + +
行政区代码： + +
省名： + +
拼音： + +
人口数 + +
+
+
+ +
+ +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/query/query-2dBygeometry.htm b/website/public/static/demo/military/example/query/query-2dBygeometry.htm new file mode 100644 index 000000000..0fb3fa110 --- /dev/null +++ b/website/public/static/demo/military/example/query/query-2dBygeometry.htm @@ -0,0 +1,175 @@ + + + + + + 加载IGServer二维矢量地图服务 + + + + + + + + + + + +
+
+ +
+
+

查询结果

+ + + + + + + + + + + + + + + + + + + +
行政区代码： + +
省名： + +
拼音： + +
人口数 + +
+
+
+ +
+ +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/query/query-attquery.htm b/website/public/static/demo/military/example/query/query-attquery.htm new file mode 100644 index 000000000..297a8b431 --- /dev/null +++ b/website/public/static/demo/military/example/query/query-attquery.htm @@ -0,0 +1,128 @@ + + + + + + + 属性查询 + + + + + + + + + +
+
+

查询结果

+ + + + + + + + + + + + + + + + + + + +
楼层： + +
层高： + +
房屋类型： + +
test: + +
+
+
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/query/query-geomquery.htm b/website/public/static/demo/military/example/query/query-geomquery.htm new file mode 100644 index 000000000..9e1abb3be --- /dev/null +++ b/website/public/static/demo/military/example/query/query-geomquery.htm @@ -0,0 +1,130 @@ + + + + + + + 动态圆 + + + + + + + + + +
+
+

查询结果

+ + + + + + + + + + + + + + + + + + + +
楼层： + +
层高： + +
房屋类型： + +
test: + +
+
+
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/query/query-m3deditor.htm b/website/public/static/demo/military/example/query/query-m3deditor.htm new file mode 100644 index 000000000..f1420ac79 --- /dev/null +++ b/website/public/static/demo/military/example/query/query-m3deditor.htm @@ -0,0 +1,138 @@ + + + + + + 交互式移动M3D数据 + + + + + + + + + + + +
+ +
+ +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/query/query-m3dquery.htm b/website/public/static/demo/military/example/query/query-m3dquery.htm new file mode 100644 index 000000000..bf6dd109b --- /dev/null +++ b/website/public/static/demo/military/example/query/query-m3dquery.htm @@ -0,0 +1,171 @@ + + + + + + M3D数据单体查询 + + + + + + + + + + + +
+ +
+ +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/query/query-oidquery.htm b/website/public/static/demo/military/example/query/query-oidquery.htm new file mode 100644 index 000000000..706d0804f --- /dev/null +++ b/website/public/static/demo/military/example/query/query-oidquery.htm @@ -0,0 +1,127 @@ + + + + + + + 动态圆 + + + + + + + + + +
+
+

查询结果

+ + + + + + + + + + + + + + + + + + + +
楼层： + +
层高： + +
房屋类型： + +
test: + +
+
+
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/scene/scene-2D.htm b/website/public/static/demo/military/example/scene/scene-2D.htm new file mode 100644 index 000000000..a28e3e494 --- /dev/null +++ b/website/public/static/demo/military/example/scene/scene-2D.htm @@ -0,0 +1,53 @@ + + + + + + + 二维模式 + + + + + + + + + + +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/scene/scene-3Dground.htm b/website/public/static/demo/military/example/scene/scene-3Dground.htm new file mode 100644 index 000000000..caa67fcec --- /dev/null +++ b/website/public/static/demo/military/example/scene/scene-3Dground.htm @@ -0,0 +1,53 @@ + + + + + + + 平面三维 + + + + + + + + + + +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/scene/scene-changeSkyBox.htm b/website/public/static/demo/military/example/scene/scene-changeSkyBox.htm new file mode 100644 index 000000000..ec7a58406 --- /dev/null +++ b/website/public/static/demo/military/example/scene/scene-changeSkyBox.htm @@ -0,0 +1,53 @@ + + + + + + + 修改场景的天空盒 + + + + + + + + + +
+
+ +
+
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/scene/scene-fly.htm b/website/public/static/demo/military/example/scene/scene-fly.htm new file mode 100644 index 000000000..77926d04b --- /dev/null +++ b/website/public/static/demo/military/example/scene/scene-fly.htm @@ -0,0 +1,132 @@ + + + + + + + 跳转定位 + + + + + + + + + + +
+
+ + + + + +
+
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/scene/scene-openRotation.htm b/website/public/static/demo/military/example/scene/scene-openRotation.htm new file mode 100644 index 000000000..1b86f590a --- /dev/null +++ b/website/public/static/demo/military/example/scene/scene-openRotation.htm @@ -0,0 +1,53 @@ + + + + + + + 自转与复位 + + + + + + + + + +
+
+ + + +
+
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/scene/scene-operation.htm b/website/public/static/demo/military/example/scene/scene-operation.htm new file mode 100644 index 000000000..9ee3b48b9 --- /dev/null +++ b/website/public/static/demo/military/example/scene/scene-operation.htm @@ -0,0 +1,159 @@ + + + + + + + 场景操作 + + + + + + + + + +
+
+ + + + + + +
+
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/scene/scene-rotationView.htm b/website/public/static/demo/military/example/scene/scene-rotationView.htm new file mode 100644 index 000000000..fc733a192 --- /dev/null +++ b/website/public/static/demo/military/example/scene/scene-rotationView.htm @@ -0,0 +1,114 @@ + + + + + + + 绕点旋转 + + + + + + + + + +
+
+ + + + +
+
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/scene/scene-sceneMode.htm b/website/public/static/demo/military/example/scene/scene-sceneMode.htm new file mode 100644 index 000000000..907078a2e --- /dev/null +++ b/website/public/static/demo/military/example/scene/scene-sceneMode.htm @@ -0,0 +1,71 @@ + + + + + + + 场景视图模式 + + + + + + + + + + +
+ + +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/scene/scene-sceneOut.htm b/website/public/static/demo/military/example/scene/scene-sceneOut.htm new file mode 100644 index 000000000..234b23a69 --- /dev/null +++ b/website/public/static/demo/military/example/scene/scene-sceneOut.htm @@ -0,0 +1,105 @@ + + + + + + + 图片输出 + + + + + + + + + + +
+
+ + +
+
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/scene/scene-screenPosition.htm b/website/public/static/demo/military/example/scene/scene-screenPosition.htm new file mode 100644 index 000000000..ea41f1e1c --- /dev/null +++ b/website/public/static/demo/military/example/scene/scene-screenPosition.htm @@ -0,0 +1,177 @@ + + + + + + 屏幕坐标转换计算 + + + + + + + + + + +
+
+ + + +
+
+ 操作：先单击功能按钮，然后鼠标左键单击 +
+
+

屏幕坐标转换计算

+ + 屏幕坐标值: + + +
+ + 转换坐标值: + + +
+ + 高度值: + +
+
+
+
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/scene/scene-setView.htm b/website/public/static/demo/military/example/scene/scene-setView.htm new file mode 100644 index 000000000..d9a02a2d0 --- /dev/null +++ b/website/public/static/demo/military/example/scene/scene-setView.htm @@ -0,0 +1,70 @@ + + + + + + + 设置当前视图范围 + + + + + + + + + +
+
+ + +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/scene/scene-showPosition.htm b/website/public/static/demo/military/example/scene/scene-showPosition.htm new file mode 100644 index 000000000..0f6d10eee --- /dev/null +++ b/website/public/static/demo/military/example/scene/scene-showPosition.htm @@ -0,0 +1,49 @@ + + + + + + + 常用控件 + + + + + + + + + + +
+
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/scene/scene-undergroundMode.htm b/website/public/static/demo/military/example/scene/scene-undergroundMode.htm new file mode 100644 index 000000000..940d4bcee --- /dev/null +++ b/website/public/static/demo/military/example/scene/scene-undergroundMode.htm @@ -0,0 +1,86 @@ + + + + + + + 地下模式 + + + + + + + + + + +
+
+ + + +
+
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/scene/scene-undergroundOne.htm b/website/public/static/demo/military/example/scene/scene-undergroundOne.htm new file mode 100644 index 000000000..678d3be64 --- /dev/null +++ b/website/public/static/demo/military/example/scene/scene-undergroundOne.htm @@ -0,0 +1,36 @@ + + + + + + + 地下模式 + + + + + + + + + + +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/scene/scene-undergroundTwo.htm b/website/public/static/demo/military/example/scene/scene-undergroundTwo.htm new file mode 100644 index 000000000..f822b3939 --- /dev/null +++ b/website/public/static/demo/military/example/scene/scene-undergroundTwo.htm @@ -0,0 +1,40 @@ + + + + + + + 地下模式 + + + + + + + + + + +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/third/third-amap.htm b/website/public/static/demo/military/example/third/third-amap.htm new file mode 100644 index 000000000..11fbad3f1 --- /dev/null +++ b/website/public/static/demo/military/example/third/third-amap.htm @@ -0,0 +1,92 @@ + + + + + + 高德地图显示 + + + + + + + + + + + +
+
+ +
+
+ +
+ +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/third/third-baidu.htm b/website/public/static/demo/military/example/third/third-baidu.htm new file mode 100644 index 000000000..a0bf4f2c9 --- /dev/null +++ b/website/public/static/demo/military/example/third/third-baidu.htm @@ -0,0 +1,85 @@ + + + + + + 百度地图显示 + + + + + + + + + + + +
+ + +
+ +
+ +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/third/third-geoway.htm b/website/public/static/demo/military/example/third/third-geoway.htm new file mode 100644 index 000000000..c6c360ba1 --- /dev/null +++ b/website/public/static/demo/military/example/third/third-geoway.htm @@ -0,0 +1,57 @@ + + + + + + GeoWay地图显示 + + + + + + + + + + + +
+ +
+ +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/third/third-google.htm b/website/public/static/demo/military/example/third/third-google.htm new file mode 100644 index 000000000..fa60b9d9c --- /dev/null +++ b/website/public/static/demo/military/example/third/third-google.htm @@ -0,0 +1,118 @@ + + + + + + 谷歌地图显示 + + + + + + + + + + + +
+ + +
+ +
+ +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/third/third-openweather.htm b/website/public/static/demo/military/example/third/third-openweather.htm new file mode 100644 index 000000000..2b9032b9c --- /dev/null +++ b/website/public/static/demo/military/example/third/third-openweather.htm @@ -0,0 +1,57 @@ + + + + + + OpenWeather地图显示 + + + + + + + + + + + +
+ +
+ +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/third/third-osm.htm b/website/public/static/demo/military/example/third/third-osm.htm new file mode 100644 index 000000000..714a762b8 --- /dev/null +++ b/website/public/static/demo/military/example/third/third-osm.htm @@ -0,0 +1,57 @@ + + + + + + osm显示 + + + + + + + + + + + +
+ +
+ +
+ +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/third/third-osm.md b/website/public/static/demo/military/example/third/third-osm.md new file mode 100644 index 000000000..c61612daf --- /dev/null +++ b/website/public/static/demo/military/example/third/third-osm.md @@ -0,0 +1,77 @@ +## 加载 OSM 地图 + +### 示例功能 + +        本示例对接高德地图服务，实现在三维场景中加载高德地图，坐标系为 EPSG:3857，即 Web 墨卡托坐标系，网络为公网地址。 + +### 示例实现 + +        本示例需要使用【include-cesium-local.js】开发库实现，关键接口为 `CesiumZondy. Layer. ThirdPartyLayer` 类提供的 `appendOsmMap()` 方法，以此来加载高德地图。 + +> 开发库使用请参见*首页-概述-原生 JS 调用*内容。 + +> 特别说明：使用 osm 地图请注意 `藏南` 与 `南海九段线` 问题，建议使用天地图。 + +### 实现步骤 + +**Step 1. 引用开发库**： + +        本示例引用 local 本地【include-cesium-local.js】开发库，完成此步骤后才可调用三维 WebGL 的功能； + +**Step 2. 创建布局**： + +        创建 `id='GlobeView'` 的 div 作为三维视图的容器，并设置其样式； + +**Step 3. 构造三维场景控件**： + +        实例化 `Cesium. WebSceneControl` 对象，完成此步骤后可在三维场景中加载三维球控件； + +- Example: + + ```javascript + //构造三维视图对象（视图容器 div 的 id，三维视图设置参数） + webGlobe = new Cesium.WebSceneControl('GlobeView', {}); + ``` + +**Step 4. 加载数据**: + +        加载数据：创建第三方数据图层类 `CesiumZondy. Layer. ThirdPartyLayer` 的对象，调用 `appendOsmMap()` 方法加载 osm 地图。 + +- Example: + + ```javascript + //构造第三方图层对象 + thirdPartyLayer = new CesiumZondy.Layer.ThirdPartyLayer({ + viewer: webGlobe.viewer + }); + //加载OSM地图 + var osm = thirdPartyLayer.appendOsmMap(); + ``` + +### 关键接口 + +#### 1.【三维场景控件类】 `Cesium. WebSceneControl(elementId, options)` + +| 参数名 | 类 型 | 说 明 | +| --------- | ----------------- | -------------------- | +| elementId | Element \| String | 放置视图的 div 的 id | +| options | Object | （可选）附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ---------------- | ------- | ------ | -------------------------------------------------------------------------------------- | +| viewerMode | String | ‘3D’ | （可选）初始视图模式默认为三维球视图 '2D'表示二维视图 'COLUMBUS_VIEW' 表示三维平面视图 | +| showInfo | Boolean | false | （可选）是否显示默认的属性信息框 | +| animation | Boolean | true | （可选）默认动画控制不显示 | +| baseLayerPicker | Boolean | true | （可选）是否创建图层控制显示小组件 | +| fullscreenButton | Boolean | true | （可选）是否创建全屏控制按钮 | +| vrButton | Boolean | false | （可选）是否创建 VR 按钮 | + +#### 2.【第三方数据图层类】 `CesiumZondy. Layer. ThirdPartyLayer` + +##### 【method】 `appendOsmMap(optionsParam) → {ImageryLayer}` ：添加 osm 地图服务。 + +| 参数名 | 类 型 | 说 明 | +| ------------ | ------ | -------- | +| optionsParam | Object | 附加属性 | diff --git a/website/public/static/demo/military/example/third/third-tianditu-wmts.htm b/website/public/static/demo/military/example/third/third-tianditu-wmts.htm new file mode 100644 index 000000000..76739f3f7 --- /dev/null +++ b/website/public/static/demo/military/example/third/third-tianditu-wmts.htm @@ -0,0 +1,92 @@ + + + + + + 天地图WMTS显示 + + + + + + + + + + + +
+ + +
+ +
+ +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/third/third-tianditu.htm b/website/public/static/demo/military/example/third/third-tianditu.htm new file mode 100644 index 000000000..720f8bce9 --- /dev/null +++ b/website/public/static/demo/military/example/third/third-tianditu.htm @@ -0,0 +1,109 @@ + + + + + + 天地图显示 + + + + + + + + + + + +
+ + +
+ +
+ +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/track/track-dynamicflight.htm b/website/public/static/demo/military/example/track/track-dynamicflight.htm new file mode 100644 index 000000000..d9b050e28 --- /dev/null +++ b/website/public/static/demo/military/example/track/track-dynamicflight.htm @@ -0,0 +1,138 @@ + + + + + + 动态航线 + + + + + + + + + + + +
+ +
+ +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/track/track-flow.htm b/website/public/static/demo/military/example/track/track-flow.htm new file mode 100644 index 000000000..772b98685 --- /dev/null +++ b/website/public/static/demo/military/example/track/track-flow.htm @@ -0,0 +1,127 @@ + + + + + + 模型漫游 + + + + + + + + + + + +
+
+ +
+ +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/track/track-groundflow.htm b/website/public/static/demo/military/example/track/track-groundflow.htm new file mode 100644 index 000000000..1bb860b4a --- /dev/null +++ b/website/public/static/demo/military/example/track/track-groundflow.htm @@ -0,0 +1,166 @@ + + + + + + 模型沿地形漫游 + + + + + + + + + + + +
+ +
+ +
+ +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/vectortile/darkstyle.htm b/website/public/static/demo/military/example/vectortile/darkstyle.htm new file mode 100644 index 000000000..e2a3ed1f3 --- /dev/null +++ b/website/public/static/demo/military/example/vectortile/darkstyle.htm @@ -0,0 +1,84 @@ + + + + + + 地层分析 + + + + + + + + +
+ +
+ + +
+ + diff --git a/website/public/static/demo/military/example/vectortile/lightstyle.htm b/website/public/static/demo/military/example/vectortile/lightstyle.htm new file mode 100644 index 000000000..aba4b0ece --- /dev/null +++ b/website/public/static/demo/military/example/vectortile/lightstyle.htm @@ -0,0 +1,84 @@ + + + + + + 地层分析 + + + + + + + + +
+ +
+ + +
+ + diff --git a/website/public/static/demo/military/example/vectortile/mapboxstyle.htm b/website/public/static/demo/military/example/vectortile/mapboxstyle.htm new file mode 100644 index 000000000..e9502bf0c --- /dev/null +++ b/website/public/static/demo/military/example/vectortile/mapboxstyle.htm @@ -0,0 +1,70 @@ + + + + + + 地层分析 + + + + + + + + +
+ +
+ + +
+ + diff --git a/website/public/static/demo/military/example/vectortile/mapgis-vectortile-3857.htm b/website/public/static/demo/military/example/vectortile/mapgis-vectortile-3857.htm new file mode 100644 index 000000000..b51a90191 --- /dev/null +++ b/website/public/static/demo/military/example/vectortile/mapgis-vectortile-3857.htm @@ -0,0 +1,93 @@ + + + + + 地层分析 + + + + + + + + + + +
+ +
+ + +
+ + diff --git a/website/public/static/demo/military/example/vectortile/mapgis-vectortile-4326.htm b/website/public/static/demo/military/example/vectortile/mapgis-vectortile-4326.htm new file mode 100644 index 000000000..85d97409d --- /dev/null +++ b/website/public/static/demo/military/example/vectortile/mapgis-vectortile-4326.htm @@ -0,0 +1,126 @@ + + + + + 地层分析 + + + + + + + + + + + +
+ +
+ + +
+
+
改变布局属性
+
改变画笔属性
+
改变过滤属性
+
改变整体样式
+
+ + diff --git a/website/public/static/demo/military/example/vectortile/mapgis-vectortile-ast.htm b/website/public/static/demo/military/example/vectortile/mapgis-vectortile-ast.htm new file mode 100644 index 000000000..4fd9721f8 --- /dev/null +++ b/website/public/static/demo/military/example/vectortile/mapgis-vectortile-ast.htm @@ -0,0 +1,79 @@ + + + + + 地层分析 + + + + + + + + + + +
+ +
+ + +
+ + diff --git a/website/public/static/demo/military/example/vectortile/mapgis-vectortile-symbol.htm b/website/public/static/demo/military/example/vectortile/mapgis-vectortile-symbol.htm new file mode 100644 index 000000000..73e407068 --- /dev/null +++ b/website/public/static/demo/military/example/vectortile/mapgis-vectortile-symbol.htm @@ -0,0 +1,70 @@ + + + + + + 地层分析 + + + + + + + + + + +
+ +
+ + +
+ + + \ No newline at end of file diff --git a/website/public/static/demo/military/example/vectortile/mapgisstyle.htm b/website/public/static/demo/military/example/vectortile/mapgisstyle.htm new file mode 100644 index 000000000..99c8c25b0 --- /dev/null +++ b/website/public/static/demo/military/example/vectortile/mapgisstyle.htm @@ -0,0 +1,84 @@ + + + + + + 地层分析 + + + + + + + + +
+ +
+ + +
+ + diff --git a/website/public/static/demo/military/gallery/analysis/analysis-animation.png b/website/public/static/demo/military/gallery/analysis/analysis-animation.png new file mode 100644 index 000000000..028e41e50 Binary files /dev/null and b/website/public/static/demo/military/gallery/analysis/analysis-animation.png differ diff --git a/website/public/static/demo/military/gallery/analysis/analysis-aspectAnalysis-normal.png b/website/public/static/demo/military/gallery/analysis/analysis-aspectAnalysis-normal.png new file mode 100644 index 000000000..5fe81cff2 Binary files /dev/null and b/website/public/static/demo/military/gallery/analysis/analysis-aspectAnalysis-normal.png differ diff --git a/website/public/static/demo/military/gallery/analysis/analysis-aspectAnalysis.png b/website/public/static/demo/military/gallery/analysis/analysis-aspectAnalysis.png new file mode 100644 index 000000000..a811e5890 Binary files /dev/null and b/website/public/static/demo/military/gallery/analysis/analysis-aspectAnalysis.png differ diff --git a/website/public/static/demo/military/gallery/analysis/analysis-cube.png b/website/public/static/demo/military/gallery/analysis/analysis-cube.png new file mode 100644 index 000000000..93586eaea Binary files /dev/null and b/website/public/static/demo/military/gallery/analysis/analysis-cube.png differ diff --git a/website/public/static/demo/military/gallery/analysis/analysis-dynamiccut.png b/website/public/static/demo/military/gallery/analysis/analysis-dynamiccut.png new file mode 100644 index 000000000..9d953e695 Binary files /dev/null and b/website/public/static/demo/military/gallery/analysis/analysis-dynamiccut.png differ diff --git a/website/public/static/demo/military/gallery/analysis/analysis-excavate.png b/website/public/static/demo/military/gallery/analysis/analysis-excavate.png new file mode 100644 index 000000000..5607baec5 Binary files /dev/null and b/website/public/static/demo/military/gallery/analysis/analysis-excavate.png differ diff --git a/website/public/static/demo/military/gallery/analysis/analysis-explosion.png b/website/public/static/demo/military/gallery/analysis/analysis-explosion.png new file mode 100644 index 000000000..2b69ef1d8 Binary files /dev/null and b/website/public/static/demo/military/gallery/analysis/analysis-explosion.png differ diff --git a/website/public/static/demo/military/gallery/analysis/analysis-floor.png b/website/public/static/demo/military/gallery/analysis/analysis-floor.png new file mode 100644 index 000000000..af7cafe7b Binary files /dev/null and b/website/public/static/demo/military/gallery/analysis/analysis-floor.png differ diff --git a/website/public/static/demo/military/gallery/analysis/analysis-modelflatten.png b/website/public/static/demo/military/gallery/analysis/analysis-modelflatten.png new file mode 100644 index 000000000..008dceaf2 Binary files /dev/null and b/website/public/static/demo/military/gallery/analysis/analysis-modelflatten.png differ diff --git a/website/public/static/demo/military/gallery/analysis/analysis-rollershutters.png b/website/public/static/demo/military/gallery/analysis/analysis-rollershutters.png new file mode 100644 index 000000000..0f35b87e1 Binary files /dev/null and b/website/public/static/demo/military/gallery/analysis/analysis-rollershutters.png differ diff --git a/website/public/static/demo/military/gallery/analysis/analysis-sceneprojection.png b/website/public/static/demo/military/gallery/analysis/analysis-sceneprojection.png new file mode 100644 index 000000000..40b8d1454 Binary files /dev/null and b/website/public/static/demo/military/gallery/analysis/analysis-sceneprojection.png differ diff --git a/website/public/static/demo/military/gallery/analysis/analysis-skyline.png b/website/public/static/demo/military/gallery/analysis/analysis-skyline.png new file mode 100644 index 000000000..499619f12 Binary files /dev/null and b/website/public/static/demo/military/gallery/analysis/analysis-skyline.png differ diff --git a/website/public/static/demo/military/gallery/analysis/analysis-slopeAnalysis-normal.png b/website/public/static/demo/military/gallery/analysis/analysis-slopeAnalysis-normal.png new file mode 100644 index 000000000..14ef37693 Binary files /dev/null and b/website/public/static/demo/military/gallery/analysis/analysis-slopeAnalysis-normal.png differ diff --git a/website/public/static/demo/military/gallery/analysis/analysis-slopeAnalysis.png b/website/public/static/demo/military/gallery/analysis/analysis-slopeAnalysis.png new file mode 100644 index 000000000..21078934c Binary files /dev/null and b/website/public/static/demo/military/gallery/analysis/analysis-slopeAnalysis.png differ diff --git a/website/public/static/demo/military/gallery/analysis/analysis-visibility.png b/website/public/static/demo/military/gallery/analysis/analysis-visibility.png new file mode 100644 index 000000000..7f52192cb Binary files /dev/null and b/website/public/static/demo/military/gallery/analysis/analysis-visibility.png differ diff --git a/website/public/static/demo/military/gallery/analysis/analysis-visiblerange.png b/website/public/static/demo/military/gallery/analysis/analysis-visiblerange.png new file mode 100644 index 000000000..6b61647ce Binary files /dev/null and b/website/public/static/demo/military/gallery/analysis/analysis-visiblerange.png differ diff --git a/website/public/static/demo/military/gallery/clientAnalysis/clientAnalysis-along.png b/website/public/static/demo/military/gallery/clientAnalysis/clientAnalysis-along.png new file mode 100644 index 000000000..ee1f0ce2f Binary files /dev/null and b/website/public/static/demo/military/gallery/clientAnalysis/clientAnalysis-along.png differ diff --git a/website/public/static/demo/military/gallery/clientAnalysis/clientAnalysis-bezierspline.png b/website/public/static/demo/military/gallery/clientAnalysis/clientAnalysis-bezierspline.png new file mode 100644 index 000000000..b8fb63b4f Binary files /dev/null and b/website/public/static/demo/military/gallery/clientAnalysis/clientAnalysis-bezierspline.png differ diff --git a/website/public/static/demo/military/gallery/clientAnalysis/clientAnalysis-buffer.png b/website/public/static/demo/military/gallery/clientAnalysis/clientAnalysis-buffer.png new file mode 100644 index 000000000..60d56044f Binary files /dev/null and b/website/public/static/demo/military/gallery/clientAnalysis/clientAnalysis-buffer.png differ diff --git a/website/public/static/demo/military/gallery/clientAnalysis/clientAnalysis-centroid.png b/website/public/static/demo/military/gallery/clientAnalysis/clientAnalysis-centroid.png new file mode 100644 index 000000000..511342ae4 Binary files /dev/null and b/website/public/static/demo/military/gallery/clientAnalysis/clientAnalysis-centroid.png differ diff --git a/website/public/static/demo/military/gallery/clientAnalysis/clientAnalysis-intersect.png b/website/public/static/demo/military/gallery/clientAnalysis/clientAnalysis-intersect.png new file mode 100644 index 000000000..c2a1dc233 Binary files /dev/null and b/website/public/static/demo/military/gallery/clientAnalysis/clientAnalysis-intersect.png differ diff --git a/website/public/static/demo/military/gallery/clientAnalysis/clientAnalysis-tin.png b/website/public/static/demo/military/gallery/clientAnalysis/clientAnalysis-tin.png new file mode 100644 index 000000000..58ed2c751 Binary files /dev/null and b/website/public/static/demo/military/gallery/clientAnalysis/clientAnalysis-tin.png differ diff --git a/website/public/static/demo/military/gallery/clientAnalysis/clientAnalysis-voronoi.png b/website/public/static/demo/military/gallery/clientAnalysis/clientAnalysis-voronoi.png new file mode 100644 index 000000000..133d48c01 Binary files /dev/null and b/website/public/static/demo/military/gallery/clientAnalysis/clientAnalysis-voronoi.png differ diff --git a/website/public/static/demo/military/gallery/clientView/clientView-appendImage.png b/website/public/static/demo/military/gallery/clientView/clientView-appendImage.png new file mode 100644 index 000000000..53bb46a2e Binary files /dev/null and b/website/public/static/demo/military/gallery/clientView/clientView-appendImage.png differ diff --git a/website/public/static/demo/military/gallery/clientView/clientView-dynamiccircle.png b/website/public/static/demo/military/gallery/clientView/clientView-dynamiccircle.png new file mode 100644 index 000000000..95c477918 Binary files /dev/null and b/website/public/static/demo/military/gallery/clientView/clientView-dynamiccircle.png differ diff --git a/website/public/static/demo/military/gallery/clientView/clientView-fire.png b/website/public/static/demo/military/gallery/clientView/clientView-fire.png new file mode 100644 index 000000000..9ea10dc91 Binary files /dev/null and b/website/public/static/demo/military/gallery/clientView/clientView-fire.png differ diff --git a/website/public/static/demo/military/gallery/clientView/clientView-fireword.png b/website/public/static/demo/military/gallery/clientView/clientView-fireword.png new file mode 100644 index 000000000..ffcff1528 Binary files /dev/null and b/website/public/static/demo/military/gallery/clientView/clientView-fireword.png differ diff --git a/website/public/static/demo/military/gallery/clientView/clientView-firework.png b/website/public/static/demo/military/gallery/clientView/clientView-firework.png new file mode 100644 index 000000000..ffcff1528 Binary files /dev/null and b/website/public/static/demo/military/gallery/clientView/clientView-firework.png differ diff --git a/website/public/static/demo/military/gallery/clientView/clientView-fog.png b/website/public/static/demo/military/gallery/clientView/clientView-fog.png new file mode 100644 index 000000000..31574f4ee Binary files /dev/null and b/website/public/static/demo/military/gallery/clientView/clientView-fog.png differ diff --git a/website/public/static/demo/military/gallery/clientView/clientView-heatmap.png b/website/public/static/demo/military/gallery/clientView/clientView-heatmap.png new file mode 100644 index 000000000..b741f303b Binary files /dev/null and b/website/public/static/demo/military/gallery/clientView/clientView-heatmap.png differ diff --git a/website/public/static/demo/military/gallery/clientView/clientView-radarscanning.png b/website/public/static/demo/military/gallery/clientView/clientView-radarscanning.png new file mode 100644 index 000000000..105b749b8 Binary files /dev/null and b/website/public/static/demo/military/gallery/clientView/clientView-radarscanning.png differ diff --git a/website/public/static/demo/military/gallery/clientView/clientView-rain.png b/website/public/static/demo/military/gallery/clientView/clientView-rain.png new file mode 100644 index 000000000..676cf336f Binary files /dev/null and b/website/public/static/demo/military/gallery/clientView/clientView-rain.png differ diff --git a/website/public/static/demo/military/gallery/clientView/clientView-smoke.png b/website/public/static/demo/military/gallery/clientView/clientView-smoke.png new file mode 100644 index 000000000..2101f5d30 Binary files /dev/null and b/website/public/static/demo/military/gallery/clientView/clientView-smoke.png differ diff --git a/website/public/static/demo/military/gallery/clientView/clientView-snow.png b/website/public/static/demo/military/gallery/clientView/clientView-snow.png new file mode 100644 index 000000000..d2c029303 Binary files /dev/null and b/website/public/static/demo/military/gallery/clientView/clientView-snow.png differ diff --git a/website/public/static/demo/military/gallery/clientView_Echarts/echarts-air.png b/website/public/static/demo/military/gallery/clientView_Echarts/echarts-air.png new file mode 100644 index 000000000..86ccdfaae Binary files /dev/null and b/website/public/static/demo/military/gallery/clientView_Echarts/echarts-air.png differ diff --git a/website/public/static/demo/military/gallery/clientView_Echarts/echarts-biggps.png b/website/public/static/demo/military/gallery/clientView_Echarts/echarts-biggps.png new file mode 100644 index 000000000..81ef97344 Binary files /dev/null and b/website/public/static/demo/military/gallery/clientView_Echarts/echarts-biggps.png differ diff --git a/website/public/static/demo/military/gallery/clientView_Echarts/echarts-bigline.png b/website/public/static/demo/military/gallery/clientView_Echarts/echarts-bigline.png new file mode 100644 index 000000000..7f9ed8fd9 Binary files /dev/null and b/website/public/static/demo/military/gallery/clientView_Echarts/echarts-bigline.png differ diff --git a/website/public/static/demo/military/gallery/clientView_Echarts/echarts-bigpoint.png b/website/public/static/demo/military/gallery/clientView_Echarts/echarts-bigpoint.png new file mode 100644 index 000000000..a48623c51 Binary files /dev/null and b/website/public/static/demo/military/gallery/clientView_Echarts/echarts-bigpoint.png differ diff --git a/website/public/static/demo/military/gallery/clientView_Echarts/echarts-bigroad.png b/website/public/static/demo/military/gallery/clientView_Echarts/echarts-bigroad.png new file mode 100644 index 000000000..2d48bb8e8 Binary files /dev/null and b/website/public/static/demo/military/gallery/clientView_Echarts/echarts-bigroad.png differ diff --git a/website/public/static/demo/military/gallery/clientView_Echarts/echarts-grid.png b/website/public/static/demo/military/gallery/clientView_Echarts/echarts-grid.png new file mode 100644 index 000000000..bc529ecf1 Binary files /dev/null and b/website/public/static/demo/military/gallery/clientView_Echarts/echarts-grid.png differ diff --git a/website/public/static/demo/military/gallery/clientView_Echarts/echarts-heater.png b/website/public/static/demo/military/gallery/clientView_Echarts/echarts-heater.png new file mode 100644 index 000000000..8a267cc7d Binary files /dev/null and b/website/public/static/demo/military/gallery/clientView_Echarts/echarts-heater.png differ diff --git a/website/public/static/demo/military/gallery/clientView_Echarts/echarts-line.png b/website/public/static/demo/military/gallery/clientView_Echarts/echarts-line.png new file mode 100644 index 000000000..0592ca987 Binary files /dev/null and b/website/public/static/demo/military/gallery/clientView_Echarts/echarts-line.png differ diff --git a/website/public/static/demo/military/gallery/clientView_Echarts/echarts-lineanimate.png b/website/public/static/demo/military/gallery/clientView_Echarts/echarts-lineanimate.png new file mode 100644 index 000000000..76d802aa3 Binary files /dev/null and b/website/public/static/demo/military/gallery/clientView_Echarts/echarts-lineanimate.png differ diff --git a/website/public/static/demo/military/gallery/clientView_Echarts/echarts-migarate.png b/website/public/static/demo/military/gallery/clientView_Echarts/echarts-migarate.png new file mode 100644 index 000000000..a0247612f Binary files /dev/null and b/website/public/static/demo/military/gallery/clientView_Echarts/echarts-migarate.png differ diff --git a/website/public/static/demo/military/gallery/clientView_Echarts/echarts-weibo.png b/website/public/static/demo/military/gallery/clientView_Echarts/echarts-weibo.png new file mode 100644 index 000000000..3604c9d43 Binary files /dev/null and b/website/public/static/demo/military/gallery/clientView_Echarts/echarts-weibo.png differ diff --git a/website/public/static/demo/military/gallery/clientView_MapV/mapv-heater.png b/website/public/static/demo/military/gallery/clientView_MapV/mapv-heater.png new file mode 100644 index 000000000..8b477d85d Binary files /dev/null and b/website/public/static/demo/military/gallery/clientView_MapV/mapv-heater.png differ diff --git a/website/public/static/demo/military/gallery/clientView_MapV/mapv-migrate.png b/website/public/static/demo/military/gallery/clientView_MapV/mapv-migrate.png new file mode 100644 index 000000000..c064cb5d5 Binary files /dev/null and b/website/public/static/demo/military/gallery/clientView_MapV/mapv-migrate.png differ diff --git a/website/public/static/demo/military/gallery/clientView_MapV/mapv-path_converge.png b/website/public/static/demo/military/gallery/clientView_MapV/mapv-path_converge.png new file mode 100644 index 000000000..a7f7b83c1 Binary files /dev/null and b/website/public/static/demo/military/gallery/clientView_MapV/mapv-path_converge.png differ diff --git a/website/public/static/demo/military/gallery/clientView_MapV/mapv-point_animate.png b/website/public/static/demo/military/gallery/clientView_MapV/mapv-point_animate.png new file mode 100644 index 000000000..992086040 Binary files /dev/null and b/website/public/static/demo/military/gallery/clientView_MapV/mapv-point_animate.png differ diff --git a/website/public/static/demo/military/gallery/clientView_MapV/mapv-point_grid.png b/website/public/static/demo/military/gallery/clientView_MapV/mapv-point_grid.png new file mode 100644 index 000000000..3bfff42ea Binary files /dev/null and b/website/public/static/demo/military/gallery/clientView_MapV/mapv-point_grid.png differ diff --git a/website/public/static/demo/military/gallery/clientView_MapV/mapv-point_honeycomb.png b/website/public/static/demo/military/gallery/clientView_MapV/mapv-point_honeycomb.png new file mode 100644 index 000000000..4e18aab7b Binary files /dev/null and b/website/public/static/demo/military/gallery/clientView_MapV/mapv-point_honeycomb.png differ diff --git a/website/public/static/demo/military/gallery/clientView_MapV/mapv-point_mutilanimate.png b/website/public/static/demo/military/gallery/clientView_MapV/mapv-point_mutilanimate.png new file mode 100644 index 000000000..186122851 Binary files /dev/null and b/website/public/static/demo/military/gallery/clientView_MapV/mapv-point_mutilanimate.png differ diff --git a/website/public/static/demo/military/gallery/clientView_MapV/mapv-point_weibo.png b/website/public/static/demo/military/gallery/clientView_MapV/mapv-point_weibo.png new file mode 100644 index 000000000..25c117659 Binary files /dev/null and b/website/public/static/demo/military/gallery/clientView_MapV/mapv-point_weibo.png differ diff --git a/website/public/static/demo/military/gallery/clientView_MapV/mapv-render_polygon.png b/website/public/static/demo/military/gallery/clientView_MapV/mapv-render_polygon.png new file mode 100644 index 000000000..cdf77b644 Binary files /dev/null and b/website/public/static/demo/military/gallery/clientView_MapV/mapv-render_polygon.png differ diff --git a/website/public/static/demo/military/gallery/clientView_MapV/mapv-simplemigrate.png b/website/public/static/demo/military/gallery/clientView_MapV/mapv-simplemigrate.png new file mode 100644 index 000000000..676aa0ffc Binary files /dev/null and b/website/public/static/demo/military/gallery/clientView_MapV/mapv-simplemigrate.png differ diff --git a/website/public/static/demo/military/gallery/clientView_MapV/mapv-tracker.png b/website/public/static/demo/military/gallery/clientView_MapV/mapv-tracker.png new file mode 100644 index 000000000..b8d43bc2e Binary files /dev/null and b/website/public/static/demo/military/gallery/clientView_MapV/mapv-tracker.png differ diff --git a/website/public/static/demo/military/gallery/clientView_MapV/mapv-trackerline.png b/website/public/static/demo/military/gallery/clientView_MapV/mapv-trackerline.png new file mode 100644 index 000000000..6e5ee993c Binary files /dev/null and b/website/public/static/demo/military/gallery/clientView_MapV/mapv-trackerline.png differ diff --git a/website/public/static/demo/military/gallery/data/data-3Dtiles.png b/website/public/static/demo/military/gallery/data/data-3Dtiles.png new file mode 100644 index 000000000..af71bc8d6 Binary files /dev/null and b/website/public/static/demo/military/gallery/data/data-3Dtiles.png differ diff --git a/website/public/static/demo/military/gallery/data/data-addgltf.png b/website/public/static/demo/military/gallery/data/data-addgltf.png new file mode 100644 index 000000000..38ed792c0 Binary files /dev/null and b/website/public/static/demo/military/gallery/data/data-addgltf.png differ diff --git a/website/public/static/demo/military/gallery/data/data-addgltfs.png b/website/public/static/demo/military/gallery/data/data-addgltfs.png new file mode 100644 index 000000000..c9a1ac8cc Binary files /dev/null and b/website/public/static/demo/military/gallery/data/data-addgltfs.png differ diff --git a/website/public/static/demo/military/gallery/data/data-czml.png b/website/public/static/demo/military/gallery/data/data-czml.png new file mode 100644 index 000000000..9f30757e3 Binary files /dev/null and b/website/public/static/demo/military/gallery/data/data-czml.png differ diff --git a/website/public/static/demo/military/gallery/data/data-geojson.png b/website/public/static/demo/military/gallery/data/data-geojson.png new file mode 100644 index 000000000..b8aa7abb8 Binary files /dev/null and b/website/public/static/demo/military/gallery/data/data-geojson.png differ diff --git a/website/public/static/demo/military/gallery/data/data-kml.png b/website/public/static/demo/military/gallery/data/data-kml.png new file mode 100644 index 000000000..a40677e40 Binary files /dev/null and b/website/public/static/demo/military/gallery/data/data-kml.png differ diff --git a/website/public/static/demo/military/gallery/data/data-kmz.png b/website/public/static/demo/military/gallery/data/data-kmz.png new file mode 100644 index 000000000..b74fc90a0 Binary files /dev/null and b/website/public/static/demo/military/gallery/data/data-kmz.png differ diff --git a/website/public/static/demo/military/gallery/data/data-movegltf.png b/website/public/static/demo/military/gallery/data/data-movegltf.png new file mode 100644 index 000000000..2148968ee Binary files /dev/null and b/website/public/static/demo/military/gallery/data/data-movegltf.png differ diff --git a/website/public/static/demo/military/gallery/data/data-onlineImage.png b/website/public/static/demo/military/gallery/data/data-onlineImage.png new file mode 100644 index 000000000..53bb46a2e Binary files /dev/null and b/website/public/static/demo/military/gallery/data/data-onlineImage.png differ diff --git a/website/public/static/demo/military/gallery/data/data-outlineImage.png b/website/public/static/demo/military/gallery/data/data-outlineImage.png new file mode 100644 index 000000000..173f8d4ca Binary files /dev/null and b/website/public/static/demo/military/gallery/data/data-outlineImage.png differ diff --git a/website/public/static/demo/military/gallery/drawGraphic/drawGraphic-groundhole.png b/website/public/static/demo/military/gallery/drawGraphic/drawGraphic-groundhole.png new file mode 100644 index 000000000..f64fb0664 Binary files /dev/null and b/website/public/static/demo/military/gallery/drawGraphic/drawGraphic-groundhole.png differ diff --git a/website/public/static/demo/military/gallery/drawGraphic/drawGraphic-groundline.png b/website/public/static/demo/military/gallery/drawGraphic/drawGraphic-groundline.png new file mode 100644 index 000000000..27e02863e Binary files /dev/null and b/website/public/static/demo/military/gallery/drawGraphic/drawGraphic-groundline.png differ diff --git a/website/public/static/demo/military/gallery/drawGraphic/drawGraphic-groundpolygon.png b/website/public/static/demo/military/gallery/drawGraphic/drawGraphic-groundpolygon.png new file mode 100644 index 000000000..564dc1232 Binary files /dev/null and b/website/public/static/demo/military/gallery/drawGraphic/drawGraphic-groundpolygon.png differ diff --git a/website/public/static/demo/military/gallery/drawGraphic/drawGraphic-hole.png b/website/public/static/demo/military/gallery/drawGraphic/drawGraphic-hole.png new file mode 100644 index 000000000..5f818afb2 Binary files /dev/null and b/website/public/static/demo/military/gallery/drawGraphic/drawGraphic-hole.png differ diff --git a/website/public/static/demo/military/gallery/drawGraphic/drawGraphic-icon.png b/website/public/static/demo/military/gallery/drawGraphic/drawGraphic-icon.png new file mode 100644 index 000000000..ff9dcf815 Binary files /dev/null and b/website/public/static/demo/military/gallery/drawGraphic/drawGraphic-icon.png differ diff --git a/website/public/static/demo/military/gallery/drawGraphic/drawGraphic-interaction.png b/website/public/static/demo/military/gallery/drawGraphic/drawGraphic-interaction.png new file mode 100644 index 000000000..88ff3f726 Binary files /dev/null and b/website/public/static/demo/military/gallery/drawGraphic/drawGraphic-interaction.png differ diff --git a/website/public/static/demo/military/gallery/drawGraphic/drawGraphic-label.png b/website/public/static/demo/military/gallery/drawGraphic/drawGraphic-label.png new file mode 100644 index 000000000..0328363e8 Binary files /dev/null and b/website/public/static/demo/military/gallery/drawGraphic/drawGraphic-label.png differ diff --git a/website/public/static/demo/military/gallery/drawGraphic/drawGraphic-labelicon.png b/website/public/static/demo/military/gallery/drawGraphic/drawGraphic-labelicon.png new file mode 100644 index 000000000..0981eb15a Binary files /dev/null and b/website/public/static/demo/military/gallery/drawGraphic/drawGraphic-labelicon.png differ diff --git a/website/public/static/demo/military/gallery/drawGraphic/drawGraphic-line.png b/website/public/static/demo/military/gallery/drawGraphic/drawGraphic-line.png new file mode 100644 index 000000000..023287c7f Binary files /dev/null and b/website/public/static/demo/military/gallery/drawGraphic/drawGraphic-line.png differ diff --git a/website/public/static/demo/military/gallery/drawGraphic/drawGraphic-militarysymbol.png b/website/public/static/demo/military/gallery/drawGraphic/drawGraphic-militarysymbol.png new file mode 100644 index 000000000..ffcff1528 Binary files /dev/null and b/website/public/static/demo/military/gallery/drawGraphic/drawGraphic-militarysymbol.png differ diff --git a/website/public/static/demo/military/gallery/drawGraphic/drawGraphic-picsymbol.png b/website/public/static/demo/military/gallery/drawGraphic/drawGraphic-picsymbol.png new file mode 100644 index 000000000..4268d539c Binary files /dev/null and b/website/public/static/demo/military/gallery/drawGraphic/drawGraphic-picsymbol.png differ diff --git a/website/public/static/demo/military/gallery/drawGraphic/drawGraphic-picture.png b/website/public/static/demo/military/gallery/drawGraphic/drawGraphic-picture.png new file mode 100644 index 000000000..173f8d4ca Binary files /dev/null and b/website/public/static/demo/military/gallery/drawGraphic/drawGraphic-picture.png differ diff --git a/website/public/static/demo/military/gallery/drawGraphic/drawGraphic-point.png b/website/public/static/demo/military/gallery/drawGraphic/drawGraphic-point.png new file mode 100644 index 000000000..594ca8dc7 Binary files /dev/null and b/website/public/static/demo/military/gallery/drawGraphic/drawGraphic-point.png differ diff --git a/website/public/static/demo/military/gallery/drawGraphic/drawGraphic-polygon.png b/website/public/static/demo/military/gallery/drawGraphic/drawGraphic-polygon.png new file mode 100644 index 000000000..4f8146c2e Binary files /dev/null and b/website/public/static/demo/military/gallery/drawGraphic/drawGraphic-polygon.png differ diff --git a/website/public/static/demo/military/gallery/drawGraphic/drawGraphic-popup.png b/website/public/static/demo/military/gallery/drawGraphic/drawGraphic-popup.png new file mode 100644 index 000000000..273d1facc Binary files /dev/null and b/website/public/static/demo/military/gallery/drawGraphic/drawGraphic-popup.png differ diff --git a/website/public/static/demo/military/gallery/drawGraphic/drawGraphic-stretchpolygon.png b/website/public/static/demo/military/gallery/drawGraphic/drawGraphic-stretchpolygon.png new file mode 100644 index 000000000..fbb0eca45 Binary files /dev/null and b/website/public/static/demo/military/gallery/drawGraphic/drawGraphic-stretchpolygon.png differ diff --git a/website/public/static/demo/military/gallery/drawGraphic/drawGraphic-symbol.png b/website/public/static/demo/military/gallery/drawGraphic/drawGraphic-symbol.png new file mode 100644 index 000000000..0c1b5a397 Binary files /dev/null and b/website/public/static/demo/military/gallery/drawGraphic/drawGraphic-symbol.png differ diff --git a/website/public/static/demo/military/gallery/drawGraphic/drawGraphic-terrainline.png b/website/public/static/demo/military/gallery/drawGraphic/drawGraphic-terrainline.png new file mode 100644 index 000000000..e5422b52d Binary files /dev/null and b/website/public/static/demo/military/gallery/drawGraphic/drawGraphic-terrainline.png differ diff --git a/website/public/static/demo/military/gallery/drawGraphic/drawGraphic-terrainpolygon.png b/website/public/static/demo/military/gallery/drawGraphic/drawGraphic-terrainpolygon.png new file mode 100644 index 000000000..31f671f7c Binary files /dev/null and b/website/public/static/demo/military/gallery/drawGraphic/drawGraphic-terrainpolygon.png differ diff --git a/website/public/static/demo/military/gallery/globe/chicago.png b/website/public/static/demo/military/gallery/globe/chicago.png new file mode 100644 index 000000000..70f90b29f Binary files /dev/null and b/website/public/static/demo/military/gallery/globe/chicago.png differ diff --git a/website/public/static/demo/military/gallery/globe/paris.png b/website/public/static/demo/military/gallery/globe/paris.png new file mode 100644 index 000000000..feb2b7f4c Binary files /dev/null and b/website/public/static/demo/military/gallery/globe/paris.png differ diff --git a/website/public/static/demo/military/gallery/globe/washington.png b/website/public/static/demo/military/gallery/globe/washington.png new file mode 100644 index 000000000..c9aa1adab Binary files /dev/null and b/website/public/static/demo/military/gallery/globe/washington.png differ diff --git a/website/public/static/demo/military/gallery/gnss/boom.gif b/website/public/static/demo/military/gallery/gnss/boom.gif new file mode 100644 index 000000000..71c425514 Binary files /dev/null and b/website/public/static/demo/military/gallery/gnss/boom.gif differ diff --git a/website/public/static/demo/military/gallery/gnss/boom.png b/website/public/static/demo/military/gallery/gnss/boom.png new file mode 100644 index 000000000..633cbf62a Binary files /dev/null and b/website/public/static/demo/military/gallery/gnss/boom.png differ diff --git a/website/public/static/demo/military/gallery/gnss/communicate.png b/website/public/static/demo/military/gallery/gnss/communicate.png new file mode 100644 index 000000000..4001952d7 Binary files /dev/null and b/website/public/static/demo/military/gallery/gnss/communicate.png differ diff --git a/website/public/static/demo/military/gallery/gnss/fire.png b/website/public/static/demo/military/gallery/gnss/fire.png new file mode 100644 index 000000000..1a5319583 Binary files /dev/null and b/website/public/static/demo/military/gallery/gnss/fire.png differ diff --git a/website/public/static/demo/military/gallery/gnss/flight.png b/website/public/static/demo/military/gallery/gnss/flight.png new file mode 100644 index 000000000..4b88eca5d Binary files /dev/null and b/website/public/static/demo/military/gallery/gnss/flight.png differ diff --git a/website/public/static/demo/military/gallery/gnss/mutil_bloom.png b/website/public/static/demo/military/gallery/gnss/mutil_bloom.png new file mode 100644 index 000000000..de018ee34 Binary files /dev/null and b/website/public/static/demo/military/gallery/gnss/mutil_bloom.png differ diff --git a/website/public/static/demo/military/gallery/gnss/saastamonien.png b/website/public/static/demo/military/gallery/gnss/saastamonien.png new file mode 100644 index 000000000..ca1c717e6 Binary files /dev/null and b/website/public/static/demo/military/gallery/gnss/saastamonien.png differ diff --git a/website/public/static/demo/military/gallery/gnss/satellite.png b/website/public/static/demo/military/gallery/gnss/satellite.png new file mode 100644 index 000000000..5707f993d Binary files /dev/null and b/website/public/static/demo/military/gallery/gnss/satellite.png differ diff --git a/website/public/static/demo/military/gallery/gnss/ship.png b/website/public/static/demo/military/gallery/gnss/ship.png new file mode 100644 index 000000000..cf2a9b4d5 Binary files /dev/null and b/website/public/static/demo/military/gallery/gnss/ship.png differ diff --git a/website/public/static/demo/military/gallery/gnss/track.png b/website/public/static/demo/military/gallery/gnss/track.png new file mode 100644 index 000000000..c07e9f3c3 Binary files /dev/null and b/website/public/static/demo/military/gallery/gnss/track.png differ diff --git a/website/public/static/demo/military/gallery/m3d/m3d-analysis.png b/website/public/static/demo/military/gallery/m3d/m3d-analysis.png new file mode 100644 index 000000000..59b17d63b Binary files /dev/null and b/website/public/static/demo/military/gallery/m3d/m3d-analysis.png differ diff --git a/website/public/static/demo/military/gallery/m3d/m3d-bim.png b/website/public/static/demo/military/gallery/m3d/m3d-bim.png new file mode 100644 index 000000000..e065634ea Binary files /dev/null and b/website/public/static/demo/military/gallery/m3d/m3d-bim.png differ diff --git a/website/public/static/demo/military/gallery/m3d/m3d-drill.png b/website/public/static/demo/military/gallery/m3d/m3d-drill.png new file mode 100644 index 000000000..b80b6d25e Binary files /dev/null and b/website/public/static/demo/military/gallery/m3d/m3d-drill.png differ diff --git a/website/public/static/demo/military/gallery/m3d/m3d-geobody-showlayer.png b/website/public/static/demo/military/gallery/m3d/m3d-geobody-showlayer.png new file mode 100644 index 000000000..1b525ec05 Binary files /dev/null and b/website/public/static/demo/military/gallery/m3d/m3d-geobody-showlayer.png differ diff --git a/website/public/static/demo/military/gallery/m3d/m3d-geobody.png b/website/public/static/demo/military/gallery/m3d/m3d-geobody.png new file mode 100644 index 000000000..d2bd2fe86 Binary files /dev/null and b/website/public/static/demo/military/gallery/m3d/m3d-geobody.png differ diff --git a/website/public/static/demo/military/gallery/m3d/m3d-geobody1.png b/website/public/static/demo/military/gallery/m3d/m3d-geobody1.png new file mode 100644 index 000000000..fb4df1bc3 Binary files /dev/null and b/website/public/static/demo/military/gallery/m3d/m3d-geobody1.png differ diff --git a/website/public/static/demo/military/gallery/m3d/m3d-geobody2.png b/website/public/static/demo/military/gallery/m3d/m3d-geobody2.png new file mode 100644 index 000000000..757e5618d Binary files /dev/null and b/website/public/static/demo/military/gallery/m3d/m3d-geobody2.png differ diff --git a/website/public/static/demo/military/gallery/m3d/m3d-geobodygrid.png b/website/public/static/demo/military/gallery/m3d/m3d-geobodygrid.png new file mode 100644 index 000000000..0feba1f54 Binary files /dev/null and b/website/public/static/demo/military/gallery/m3d/m3d-geobodygrid.png differ diff --git a/website/public/static/demo/military/gallery/m3d/m3d-landscape.png b/website/public/static/demo/military/gallery/m3d/m3d-landscape.png new file mode 100644 index 000000000..f044c29b1 Binary files /dev/null and b/website/public/static/demo/military/gallery/m3d/m3d-landscape.png differ diff --git a/website/public/static/demo/military/gallery/m3d/m3d-oblique.png b/website/public/static/demo/military/gallery/m3d/m3d-oblique.png new file mode 100644 index 000000000..7ac0b02b2 Binary files /dev/null and b/website/public/static/demo/military/gallery/m3d/m3d-oblique.png differ diff --git a/website/public/static/demo/military/gallery/m3d/m3d-pointcloud.png b/website/public/static/demo/military/gallery/m3d/m3d-pointcloud.png new file mode 100644 index 000000000..4855383a9 Binary files /dev/null and b/website/public/static/demo/military/gallery/m3d/m3d-pointcloud.png differ diff --git a/website/public/static/demo/military/gallery/m3d/m3d-roughmodel.png b/website/public/static/demo/military/gallery/m3d/m3d-roughmodel.png new file mode 100644 index 000000000..317d987b9 Binary files /dev/null and b/website/public/static/demo/military/gallery/m3d/m3d-roughmodel.png differ diff --git a/website/public/static/demo/military/gallery/m3d/m3d-terrain.png b/website/public/static/demo/military/gallery/m3d/m3d-terrain.png new file mode 100644 index 000000000..29453cb8d Binary files /dev/null and b/website/public/static/demo/military/gallery/m3d/m3d-terrain.png differ diff --git a/website/public/static/demo/military/gallery/m3d/m3d-underpipe.png b/website/public/static/demo/military/gallery/m3d/m3d-underpipe.png new file mode 100644 index 000000000..96d769688 Binary files /dev/null and b/website/public/static/demo/military/gallery/m3d/m3d-underpipe.png differ diff --git a/website/public/static/demo/military/gallery/mapgis/mapgis-2d-doc.png b/website/public/static/demo/military/gallery/mapgis/mapgis-2d-doc.png new file mode 100644 index 000000000..28d5897c5 Binary files /dev/null and b/website/public/static/demo/military/gallery/mapgis/mapgis-2d-doc.png differ diff --git a/website/public/static/demo/military/gallery/mapgis/mapgis-2d-layer.png b/website/public/static/demo/military/gallery/mapgis/mapgis-2d-layer.png new file mode 100644 index 000000000..9af49252a Binary files /dev/null and b/website/public/static/demo/military/gallery/mapgis/mapgis-2d-layer.png differ diff --git a/website/public/static/demo/military/gallery/mapgis/mapgis-2d-tile.png b/website/public/static/demo/military/gallery/mapgis/mapgis-2d-tile.png new file mode 100644 index 000000000..44d2e8cf0 Binary files /dev/null and b/website/public/static/demo/military/gallery/mapgis/mapgis-2d-tile.png differ diff --git a/website/public/static/demo/military/gallery/mapgis/mapgis-2dtile.png b/website/public/static/demo/military/gallery/mapgis/mapgis-2dtile.png new file mode 100644 index 000000000..bd7c8666f Binary files /dev/null and b/website/public/static/demo/military/gallery/mapgis/mapgis-2dtile.png differ diff --git a/website/public/static/demo/military/gallery/mapgis/mapgis-2dvector.png b/website/public/static/demo/military/gallery/mapgis/mapgis-2dvector.png new file mode 100644 index 000000000..b96cbb1c2 Binary files /dev/null and b/website/public/static/demo/military/gallery/mapgis/mapgis-2dvector.png differ diff --git a/website/public/static/demo/military/gallery/mapgis/mapgis-dem.png b/website/public/static/demo/military/gallery/mapgis/mapgis-dem.png new file mode 100644 index 000000000..2981fd85e Binary files /dev/null and b/website/public/static/demo/military/gallery/mapgis/mapgis-dem.png differ diff --git a/website/public/static/demo/military/gallery/mapgis/mapgis-dem250.png b/website/public/static/demo/military/gallery/mapgis/mapgis-dem250.png new file mode 100644 index 000000000..2981fd85e Binary files /dev/null and b/website/public/static/demo/military/gallery/mapgis/mapgis-dem250.png differ diff --git a/website/public/static/demo/military/gallery/mapgis/mapgis-oblique.png b/website/public/static/demo/military/gallery/mapgis/mapgis-oblique.png new file mode 100644 index 000000000..5543b2809 Binary files /dev/null and b/website/public/static/demo/military/gallery/mapgis/mapgis-oblique.png differ diff --git a/website/public/static/demo/military/gallery/mapgis/mapgis-raster.png b/website/public/static/demo/military/gallery/mapgis/mapgis-raster.png new file mode 100644 index 000000000..81f23237f Binary files /dev/null and b/website/public/static/demo/military/gallery/mapgis/mapgis-raster.png differ diff --git a/website/public/static/demo/military/gallery/mapgis/mapgis-raster250.png b/website/public/static/demo/military/gallery/mapgis/mapgis-raster250.png new file mode 100644 index 000000000..63e8769b5 Binary files /dev/null and b/website/public/static/demo/military/gallery/mapgis/mapgis-raster250.png differ diff --git a/website/public/static/demo/military/gallery/mapgis/mapgis-terrain.png b/website/public/static/demo/military/gallery/mapgis/mapgis-terrain.png new file mode 100644 index 000000000..29453cb8d Binary files /dev/null and b/website/public/static/demo/military/gallery/mapgis/mapgis-terrain.png differ diff --git a/website/public/static/demo/military/gallery/mapgis/mapgis-vectortile-darkstyle.png b/website/public/static/demo/military/gallery/mapgis/mapgis-vectortile-darkstyle.png new file mode 100644 index 000000000..65714c10a Binary files /dev/null and b/website/public/static/demo/military/gallery/mapgis/mapgis-vectortile-darkstyle.png differ diff --git a/website/public/static/demo/military/gallery/mapgis/mapgis-vectortile-lightstyle.png b/website/public/static/demo/military/gallery/mapgis/mapgis-vectortile-lightstyle.png new file mode 100644 index 000000000..684ede35b Binary files /dev/null and b/website/public/static/demo/military/gallery/mapgis/mapgis-vectortile-lightstyle.png differ diff --git a/website/public/static/demo/military/gallery/mapgis/mapgis-vectortile-streetstyle.png b/website/public/static/demo/military/gallery/mapgis/mapgis-vectortile-streetstyle.png new file mode 100644 index 000000000..9dd970beb Binary files /dev/null and b/website/public/static/demo/military/gallery/mapgis/mapgis-vectortile-streetstyle.png differ diff --git a/website/public/static/demo/military/gallery/mapgis/mapgis-vectortile.png b/website/public/static/demo/military/gallery/mapgis/mapgis-vectortile.png new file mode 100644 index 000000000..1bb4b5ad9 Binary files /dev/null and b/website/public/static/demo/military/gallery/mapgis/mapgis-vectortile.png differ diff --git a/website/public/static/demo/military/gallery/measure/measure-area.png b/website/public/static/demo/military/gallery/measure/measure-area.png new file mode 100644 index 000000000..af45fbfac Binary files /dev/null and b/website/public/static/demo/military/gallery/measure/measure-area.png differ diff --git a/website/public/static/demo/military/gallery/measure/measure-length.png b/website/public/static/demo/military/gallery/measure/measure-length.png new file mode 100644 index 000000000..a78850da1 Binary files /dev/null and b/website/public/static/demo/military/gallery/measure/measure-length.png differ diff --git a/website/public/static/demo/military/gallery/measure/measure-slpoe.png b/website/public/static/demo/military/gallery/measure/measure-slpoe.png new file mode 100644 index 000000000..20814ab5b Binary files /dev/null and b/website/public/static/demo/military/gallery/measure/measure-slpoe.png differ diff --git a/website/public/static/demo/military/gallery/measure/measure-triangle.png b/website/public/static/demo/military/gallery/measure/measure-triangle.png new file mode 100644 index 000000000..fd095a5bc Binary files /dev/null and b/website/public/static/demo/military/gallery/measure/measure-triangle.png differ diff --git a/website/public/static/demo/military/gallery/ogc/ogc-wms.png b/website/public/static/demo/military/gallery/ogc/ogc-wms.png new file mode 100644 index 000000000..11ecb09e5 Binary files /dev/null and b/website/public/static/demo/military/gallery/ogc/ogc-wms.png differ diff --git a/website/public/static/demo/military/gallery/ogc/ogc-wmts.png b/website/public/static/demo/military/gallery/ogc/ogc-wmts.png new file mode 100644 index 000000000..160a066a9 Binary files /dev/null and b/website/public/static/demo/military/gallery/ogc/ogc-wmts.png differ diff --git a/website/public/static/demo/military/gallery/query/query-2dByAtt.png b/website/public/static/demo/military/gallery/query/query-2dByAtt.png new file mode 100644 index 000000000..42ca105b8 Binary files /dev/null and b/website/public/static/demo/military/gallery/query/query-2dByAtt.png differ diff --git a/website/public/static/demo/military/gallery/query/query-2dByOID.png b/website/public/static/demo/military/gallery/query/query-2dByOID.png new file mode 100644 index 000000000..d843d6eea Binary files /dev/null and b/website/public/static/demo/military/gallery/query/query-2dByOID.png differ diff --git a/website/public/static/demo/military/gallery/query/query-2dBygeometry.png b/website/public/static/demo/military/gallery/query/query-2dBygeometry.png new file mode 100644 index 000000000..c71d1825c Binary files /dev/null and b/website/public/static/demo/military/gallery/query/query-2dBygeometry.png differ diff --git a/website/public/static/demo/military/gallery/query/query-attquery.png b/website/public/static/demo/military/gallery/query/query-attquery.png new file mode 100644 index 000000000..7dd3f4279 Binary files /dev/null and b/website/public/static/demo/military/gallery/query/query-attquery.png differ diff --git a/website/public/static/demo/military/gallery/query/query-geomquery.png b/website/public/static/demo/military/gallery/query/query-geomquery.png new file mode 100644 index 000000000..c469790c9 Binary files /dev/null and b/website/public/static/demo/military/gallery/query/query-geomquery.png differ diff --git a/website/public/static/demo/military/gallery/query/query-m3deditor.png b/website/public/static/demo/military/gallery/query/query-m3deditor.png new file mode 100644 index 000000000..73174c4af Binary files /dev/null and b/website/public/static/demo/military/gallery/query/query-m3deditor.png differ diff --git a/website/public/static/demo/military/gallery/query/query-m3dquery.png b/website/public/static/demo/military/gallery/query/query-m3dquery.png new file mode 100644 index 000000000..c38528736 Binary files /dev/null and b/website/public/static/demo/military/gallery/query/query-m3dquery.png differ diff --git a/website/public/static/demo/military/gallery/query/query-oidquery.png b/website/public/static/demo/military/gallery/query/query-oidquery.png new file mode 100644 index 000000000..acae04dfc Binary files /dev/null and b/website/public/static/demo/military/gallery/query/query-oidquery.png differ diff --git a/website/public/static/demo/military/gallery/scene/scene-2D.png b/website/public/static/demo/military/gallery/scene/scene-2D.png new file mode 100644 index 000000000..0c1d56883 Binary files /dev/null and b/website/public/static/demo/military/gallery/scene/scene-2D.png differ diff --git a/website/public/static/demo/military/gallery/scene/scene-3Dground.png b/website/public/static/demo/military/gallery/scene/scene-3Dground.png new file mode 100644 index 000000000..8e8db9767 Binary files /dev/null and b/website/public/static/demo/military/gallery/scene/scene-3Dground.png differ diff --git a/website/public/static/demo/military/gallery/scene/scene-changeSkyBox.png b/website/public/static/demo/military/gallery/scene/scene-changeSkyBox.png new file mode 100644 index 000000000..59b17d63b Binary files /dev/null and b/website/public/static/demo/military/gallery/scene/scene-changeSkyBox.png differ diff --git a/website/public/static/demo/military/gallery/scene/scene-fly.png b/website/public/static/demo/military/gallery/scene/scene-fly.png new file mode 100644 index 000000000..c6a742192 Binary files /dev/null and b/website/public/static/demo/military/gallery/scene/scene-fly.png differ diff --git a/website/public/static/demo/military/gallery/scene/scene-operation.png b/website/public/static/demo/military/gallery/scene/scene-operation.png new file mode 100644 index 000000000..f909a2446 Binary files /dev/null and b/website/public/static/demo/military/gallery/scene/scene-operation.png differ diff --git a/website/public/static/demo/military/gallery/scene/scene-rotationView.png b/website/public/static/demo/military/gallery/scene/scene-rotationView.png new file mode 100644 index 000000000..d0a943084 Binary files /dev/null and b/website/public/static/demo/military/gallery/scene/scene-rotationView.png differ diff --git a/website/public/static/demo/military/gallery/scene/scene-sceneMode.png b/website/public/static/demo/military/gallery/scene/scene-sceneMode.png new file mode 100644 index 000000000..0c1d56883 Binary files /dev/null and b/website/public/static/demo/military/gallery/scene/scene-sceneMode.png differ diff --git a/website/public/static/demo/military/gallery/scene/scene-sceneOut.png b/website/public/static/demo/military/gallery/scene/scene-sceneOut.png new file mode 100644 index 000000000..60a51c037 Binary files /dev/null and b/website/public/static/demo/military/gallery/scene/scene-sceneOut.png differ diff --git a/website/public/static/demo/military/gallery/scene/scene-screenPosition.png b/website/public/static/demo/military/gallery/scene/scene-screenPosition.png new file mode 100644 index 000000000..5777fdd83 Binary files /dev/null and b/website/public/static/demo/military/gallery/scene/scene-screenPosition.png differ diff --git a/website/public/static/demo/military/gallery/scene/scene-setView.png b/website/public/static/demo/military/gallery/scene/scene-setView.png new file mode 100644 index 000000000..df1bd2590 Binary files /dev/null and b/website/public/static/demo/military/gallery/scene/scene-setView.png differ diff --git a/website/public/static/demo/military/gallery/scene/scene-showPosition.png b/website/public/static/demo/military/gallery/scene/scene-showPosition.png new file mode 100644 index 000000000..0b3310dee Binary files /dev/null and b/website/public/static/demo/military/gallery/scene/scene-showPosition.png differ diff --git a/website/public/static/demo/military/gallery/scene/scene-undergroundMode.png b/website/public/static/demo/military/gallery/scene/scene-undergroundMode.png new file mode 100644 index 000000000..8e1b4667e Binary files /dev/null and b/website/public/static/demo/military/gallery/scene/scene-undergroundMode.png differ diff --git a/website/public/static/demo/military/gallery/scene/scene-undergroundOne.png b/website/public/static/demo/military/gallery/scene/scene-undergroundOne.png new file mode 100644 index 000000000..8e1b4667e Binary files /dev/null and b/website/public/static/demo/military/gallery/scene/scene-undergroundOne.png differ diff --git a/website/public/static/demo/military/gallery/scene/scene-undergroundTwo.png b/website/public/static/demo/military/gallery/scene/scene-undergroundTwo.png new file mode 100644 index 000000000..a43eae552 Binary files /dev/null and b/website/public/static/demo/military/gallery/scene/scene-undergroundTwo.png differ diff --git a/website/public/static/demo/military/gallery/third/third-amap.png b/website/public/static/demo/military/gallery/third/third-amap.png new file mode 100644 index 000000000..5cd893bd1 Binary files /dev/null and b/website/public/static/demo/military/gallery/third/third-amap.png differ diff --git a/website/public/static/demo/military/gallery/third/third-baidu.png b/website/public/static/demo/military/gallery/third/third-baidu.png new file mode 100644 index 000000000..8444e1be3 Binary files /dev/null and b/website/public/static/demo/military/gallery/third/third-baidu.png differ diff --git a/website/public/static/demo/military/gallery/third/third-geoway.png b/website/public/static/demo/military/gallery/third/third-geoway.png new file mode 100644 index 000000000..3b801430e Binary files /dev/null and b/website/public/static/demo/military/gallery/third/third-geoway.png differ diff --git a/website/public/static/demo/military/gallery/third/third-google.png b/website/public/static/demo/military/gallery/third/third-google.png new file mode 100644 index 000000000..9a630f926 Binary files /dev/null and b/website/public/static/demo/military/gallery/third/third-google.png differ diff --git a/website/public/static/demo/military/gallery/third/third-openweather.png b/website/public/static/demo/military/gallery/third/third-openweather.png new file mode 100644 index 000000000..fd4ceb714 Binary files /dev/null and b/website/public/static/demo/military/gallery/third/third-openweather.png differ diff --git a/website/public/static/demo/military/gallery/third/third-osm.png b/website/public/static/demo/military/gallery/third/third-osm.png new file mode 100644 index 000000000..acd7f8e45 Binary files /dev/null and b/website/public/static/demo/military/gallery/third/third-osm.png differ diff --git a/website/public/static/demo/military/gallery/third/third-tianditu-wmts.png b/website/public/static/demo/military/gallery/third/third-tianditu-wmts.png new file mode 100644 index 000000000..eefaac56f Binary files /dev/null and b/website/public/static/demo/military/gallery/third/third-tianditu-wmts.png differ diff --git a/website/public/static/demo/military/gallery/third/third-tianditu.png b/website/public/static/demo/military/gallery/third/third-tianditu.png new file mode 100644 index 000000000..d12a413ea Binary files /dev/null and b/website/public/static/demo/military/gallery/third/third-tianditu.png differ diff --git a/website/public/static/demo/military/gallery/track/track-dynamicflight.png b/website/public/static/demo/military/gallery/track/track-dynamicflight.png new file mode 100644 index 000000000..a9523e816 Binary files /dev/null and b/website/public/static/demo/military/gallery/track/track-dynamicflight.png differ diff --git a/website/public/static/demo/military/gallery/track/track-flow.png b/website/public/static/demo/military/gallery/track/track-flow.png new file mode 100644 index 000000000..4cfee56c8 Binary files /dev/null and b/website/public/static/demo/military/gallery/track/track-flow.png differ diff --git a/website/public/static/demo/military/gallery/track/track-groundflow.png b/website/public/static/demo/military/gallery/track/track-groundflow.png new file mode 100644 index 000000000..a804dbe6c Binary files /dev/null and b/website/public/static/demo/military/gallery/track/track-groundflow.png differ diff --git a/website/public/static/demo/military/gallery/vectortile/bluestyle.png b/website/public/static/demo/military/gallery/vectortile/bluestyle.png new file mode 100644 index 000000000..5c89f2262 Binary files /dev/null and b/website/public/static/demo/military/gallery/vectortile/bluestyle.png differ diff --git a/website/public/static/demo/military/gallery/vectortile/darkstyle.png b/website/public/static/demo/military/gallery/vectortile/darkstyle.png new file mode 100644 index 000000000..9d55f761c Binary files /dev/null and b/website/public/static/demo/military/gallery/vectortile/darkstyle.png differ diff --git a/website/public/static/demo/military/gallery/vectortile/lightstyle.png b/website/public/static/demo/military/gallery/vectortile/lightstyle.png new file mode 100644 index 000000000..5b9364b81 Binary files /dev/null and b/website/public/static/demo/military/gallery/vectortile/lightstyle.png differ diff --git a/website/public/static/demo/military/gallery/vectortile/mapboxstyle.png b/website/public/static/demo/military/gallery/vectortile/mapboxstyle.png new file mode 100644 index 000000000..32987b483 Binary files /dev/null and b/website/public/static/demo/military/gallery/vectortile/mapboxstyle.png differ diff --git a/website/public/static/demo/military/gallery/vectortile/mapgis-vectortile-3857.png b/website/public/static/demo/military/gallery/vectortile/mapgis-vectortile-3857.png new file mode 100644 index 000000000..1bb4b5ad9 Binary files /dev/null and b/website/public/static/demo/military/gallery/vectortile/mapgis-vectortile-3857.png differ diff --git a/website/public/static/demo/military/gallery/vectortile/mapgis-vectortile-4326.png b/website/public/static/demo/military/gallery/vectortile/mapgis-vectortile-4326.png new file mode 100644 index 000000000..d3191b216 Binary files /dev/null and b/website/public/static/demo/military/gallery/vectortile/mapgis-vectortile-4326.png differ diff --git a/website/public/static/demo/military/gallery/vectortile/mapgisstyle.png b/website/public/static/demo/military/gallery/vectortile/mapgisstyle.png new file mode 100644 index 000000000..e1dc63f33 Binary files /dev/null and b/website/public/static/demo/military/gallery/vectortile/mapgisstyle.png differ diff --git a/website/public/static/demo/military/gallery/vectortile/vt-dark.png b/website/public/static/demo/military/gallery/vectortile/vt-dark.png new file mode 100644 index 000000000..6e6a66372 Binary files /dev/null and b/website/public/static/demo/military/gallery/vectortile/vt-dark.png differ diff --git a/website/public/static/demo/military/gallery/vectortile/vt-light.png b/website/public/static/demo/military/gallery/vectortile/vt-light.png new file mode 100644 index 000000000..2f37129ab Binary files /dev/null and b/website/public/static/demo/military/gallery/vectortile/vt-light.png differ diff --git a/website/public/static/demo/military/gallery/vectortile/vt-street.png b/website/public/static/demo/military/gallery/vectortile/vt-street.png new file mode 100644 index 000000000..75c66d657 Binary files /dev/null and b/website/public/static/demo/military/gallery/vectortile/vt-street.png differ diff --git a/website/public/static/demo/military/helper/ogc/wmts/2397.png b/website/public/static/demo/military/helper/ogc/wmts/2397.png new file mode 100644 index 000000000..eaa0dac96 Binary files /dev/null and b/website/public/static/demo/military/helper/ogc/wmts/2397.png differ diff --git a/website/public/static/demo/military/helper/ogc/wmts/WMTS.md b/website/public/static/demo/military/helper/ogc/wmts/WMTS.md new file mode 100644 index 000000000..3ff5a6b51 --- /dev/null +++ b/website/public/static/demo/military/helper/ogc/wmts/WMTS.md @@ -0,0 +1,107 @@ +# 0. wmts - 教程 + +[标准的 WMTS 元数据](http://develop.smaryun.com:6163/igs/rest/ogc/SAMPLETILE/WMTSServer) + +![说明](./static/demo/cesium/helper/ogc/wmts/gettile.png) + +## 1. restful 调用 - 使用受限 + +> `restful调用`的核心是将所有的 级别 行列 图层 样式 的参数统一明码的标记在 url 请求中 +> 使用这种方式 级别 行列号 都一定是`数字型` 这里很关键 , 常见的金字塔模型里面的级别 都`一般是整数表示`。 + +```js +var tianditu = new Cesium.WebMapTileServiceImageryProvider({ + url: 'http://t0.tianditu.com/DataServer?T=vec_w&L={TileMatrix}&Y={TileRow}&X={TileCol}&tk=9c157e9585486c02edf817d2ecbc7752', + maximumLevel: 19, + credit: new Cesium.Credit('3857') +}); +webGlobe.viewer.imageryLayers.addImageryProvider(tianditu); +``` + +![restful](./static/demo/cesium/helper/ogc/wmts/restful.png) + +> 这一种是最常见的 WMTS 加载方式， 但这种方式一般只能处理全球裁瓦片的方式： 如经纬度 EPSG:4326/4490/4610 或者墨卡托 EPSG:3857 + +## 2. kvp - 推荐使用 + +> restful 调用 一般处理数值型的 全球金字塔瓦片， kvp 一般处理高斯 或者 局部裁剪的金字塔瓦片 + +### 2.1 kvp 参数说明 + +| 参数 | 类型 | OGC-名称 | 图片说明 | +| :------------------- | :------------ | :------------------------ | :------------------------------------------------------------------- | +| layer | 字符串 | Layer | ![图层](./static/demo/cesium/helper/ogc/wmts/layer.png) | +| style | 字符串 | Style | ![样式](./static/demo/cesium/helper/ogc/wmts/style-type.png) | +| format | 字符串 | Format | ![样式](./static/demo/cesium/helper/ogc/wmts/wmts-format.png) | +| tileMatrixLabels | Array<字符串> | ArrayM | ![级别](./static/demo/cesium/helper/ogc/wmts/tilematrixset.png) | +| layertileMatrixSetID | 字符串 | TileMatrixSet | ![总称](./static/demo/cesium/helper/ogc/wmts/tilematrixset-name.png) | + +> 用通俗的话说 +> +> 1. `TileMatrix`对应瓦片的某一级 +> 1. `TileMatrixSet` 对应多个级别合并成的金字塔集合， +> 1. `TileMatrixLabels` 对应各个级别的称呼（一般是整数，特定情况是`字符串型`） +> 1. `layertileMatrixSetID` 对应整个金字塔的模型的名称 + +`tileMatrixLabels` 一般 restful 的金字塔级别都是数值型。 但是一些特定的投影方式或者坐标处理方式无法采取对应的整数级别来表示，需要一长串的字符型来具体表达对应的数据细节，因此这个地方就是来替代原来的整数级别。 + +如传统的 [0 , 1, 2, 3 , 4] 替换成 ['EPSG:2379_SAMPLETILE_dpi96_GB:11', EPSG:2379_SAMPLETILE_dpi96_GB:12', 'EPSG:2379_SAMPLETILE_dpi96_GB:13', 'EPSG:2379_SAMPLETILE_dpi96_GB:14'] + +上面的 EPSG:2379_SAMPLETILE_dpi96_GB:11 的名字命名不重要，关键的是对应的自定义裁图的方式，如果此处是 EPSG:3857_SAMPLETILE_dpi96_GB:0 几乎等效于 墨卡托的 0 级。 + +### 2.2 kvp 举例说明 + +原始数据是高斯投影的 ，其元数据信息如下： +![gauss](./static/demo/cesium/helper/ogc/wmts/2397.png) + +对应的 wmts 的描述如下： +![原始瓦片](./static/demo/cesium/helper/ogc/wmts/origin-data.png) + +```js +var lnglat = new Cesium.WebMapTileServiceImageryProvider({ + url: 'http://develop.smaryun.com:6163/igs/rest/ogc/SAMPLETILE/WMTSServer', + layer: 'SAMPLETILE', + style: 'default', + format: 'image/png', + tilingScheme: new Cesium.WebMercatorTilingScheme(), + tileMatrixLabels: [ + 'EPSG:2379_SAMPLETILE_dpi96_GB:11', + 'EPSG:2379_SAMPLETILE_dpi96_GB:12', + 'EPSG:2379_SAMPLETILE_dpi96_GB:13', + 'EPSG:2379_SAMPLETILE_dpi96_GB:14', + 'EPSG:2379_SAMPLETILE_dpi96_GB:15', + 'EPSG:2379_SAMPLETILE_dpi96_GB:16', + 'EPSG:2379_SAMPLETILE_dpi96_GB:17' + ], + tileMatrixSetID: 'GoogleMapsCompatible_GB', + maximumLevel: 19, + credit: new Cesium.Credit('3857') +}); +``` + +结果如下： +![kvp](./static/demo/cesium/helper/ogc/wmts/wmts-kvp.png) + +## 3. WMTS 元数据信息不可信！！ + +与其说 WMTS 元数据信息不可信，本质上是说实际线下实操人员的操作不可信。以上面为例 + +> 原始数据明明只有 1 种 高斯的处理方式 +> ![原始数据](./static/demo/cesium/helper/ogc/wmts/origin-data.png) +> 但是元数据信息描述里面的矩阵集居然有 2 类，其中一类是全球墨卡托， Orz.... +> ![错误描述](./static/demo/cesium/helper/ogc/wmts/error-info.png) + +### 3.1 出现过该场景的情况 + +> 从下面数据情况几乎可以得出结论，无法避免不同平台不同版本带来的差异， `强烈推荐`使用`KVP`的方式`手动匹配`来统一处理，而不是自动解析 WMTS.xml 的元数据信息 + +1. MapGIS 平台官方测试数据 [MapGIS 10.3 & OGC 1.0.0](http://develop.smaryun.com:6163/igs/rest/ogc/SAMPLETILE/WMTSServer) +1. MapGIS 九州官方测试数据 [MapGIS 10.5 & OGC 1.0.0]() +1. ArcGIS 官方测试数据 [ArcServer 10.8 & OGC 1.0.0](https://gibs.earthdata.nasa.gov/wmts/epsg4326/best/1.0.0/WMTSCapabilities.xml) +1. ArcGIS 官方测试数据 [ArcServer 10.7 OGC 1.0.0](http://219.142.81.85/arcgis/rest/services/10wanZH/MapServer/WMTS/1.0.0/WMTSCapabilities.xml) +1. 西安测绘总站 ArcMap 10.2 & OGC 1.0.0 +1. 北京发改委 ArcMap 10.5 & OGC 1.0.0 +1. 深圳信息中心 ArcMap 10.6 & OGC 1.3.0 +1. 深圳工程中心 ArcMap 10.6 & OGC 1.3.0 +1. 深圳规划中心 ArcMap 10.6 & OGC 1.3.0 +1. 地矿云南项目 MapGIS 10.3 & OGC 1.0.0 diff --git a/website/public/static/demo/military/helper/ogc/wmts/error-info.png b/website/public/static/demo/military/helper/ogc/wmts/error-info.png new file mode 100644 index 000000000..c7ccce7c0 Binary files /dev/null and b/website/public/static/demo/military/helper/ogc/wmts/error-info.png differ diff --git a/website/public/static/demo/military/helper/ogc/wmts/gettile.png b/website/public/static/demo/military/helper/ogc/wmts/gettile.png new file mode 100644 index 000000000..99eab9301 Binary files /dev/null and b/website/public/static/demo/military/helper/ogc/wmts/gettile.png differ diff --git a/website/public/static/demo/military/helper/ogc/wmts/layer.png b/website/public/static/demo/military/helper/ogc/wmts/layer.png new file mode 100644 index 000000000..f7d976c61 Binary files /dev/null and b/website/public/static/demo/military/helper/ogc/wmts/layer.png differ diff --git a/website/public/static/demo/military/helper/ogc/wmts/origin-data.png b/website/public/static/demo/military/helper/ogc/wmts/origin-data.png new file mode 100644 index 000000000..890690e06 Binary files /dev/null and b/website/public/static/demo/military/helper/ogc/wmts/origin-data.png differ diff --git a/website/public/static/demo/military/helper/ogc/wmts/restful.png b/website/public/static/demo/military/helper/ogc/wmts/restful.png new file mode 100644 index 000000000..60618a748 Binary files /dev/null and b/website/public/static/demo/military/helper/ogc/wmts/restful.png differ diff --git a/website/public/static/demo/military/helper/ogc/wmts/style-type.png b/website/public/static/demo/military/helper/ogc/wmts/style-type.png new file mode 100644 index 000000000..14ab00b26 Binary files /dev/null and b/website/public/static/demo/military/helper/ogc/wmts/style-type.png differ diff --git a/website/public/static/demo/military/helper/ogc/wmts/style.png b/website/public/static/demo/military/helper/ogc/wmts/style.png new file mode 100644 index 000000000..69d6a3b99 Binary files /dev/null and b/website/public/static/demo/military/helper/ogc/wmts/style.png differ diff --git a/website/public/static/demo/military/helper/ogc/wmts/tilematrixset-name.png b/website/public/static/demo/military/helper/ogc/wmts/tilematrixset-name.png new file mode 100644 index 000000000..c1e4af8ae Binary files /dev/null and b/website/public/static/demo/military/helper/ogc/wmts/tilematrixset-name.png differ diff --git a/website/public/static/demo/military/helper/ogc/wmts/tilematrixset.png b/website/public/static/demo/military/helper/ogc/wmts/tilematrixset.png new file mode 100644 index 000000000..c5427eac3 Binary files /dev/null and b/website/public/static/demo/military/helper/ogc/wmts/tilematrixset.png differ diff --git a/website/public/static/demo/military/helper/ogc/wmts/wmts-format.png b/website/public/static/demo/military/helper/ogc/wmts/wmts-format.png new file mode 100644 index 000000000..b2294a8b0 Binary files /dev/null and b/website/public/static/demo/military/helper/ogc/wmts/wmts-format.png differ diff --git a/website/public/static/demo/military/helper/ogc/wmts/wmts-kvp.png b/website/public/static/demo/military/helper/ogc/wmts/wmts-kvp.png new file mode 100644 index 000000000..143193274 Binary files /dev/null and b/website/public/static/demo/military/helper/ogc/wmts/wmts-kvp.png differ diff --git a/website/public/static/demo/military/helper/vue/import/cesium_dist.png b/website/public/static/demo/military/helper/vue/import/cesium_dist.png new file mode 100644 index 000000000..ee03c73fd Binary files /dev/null and b/website/public/static/demo/military/helper/vue/import/cesium_dist.png differ diff --git a/website/public/static/demo/military/helper/vue/import/index.md b/website/public/static/demo/military/helper/vue/import/index.md new file mode 100644 index 000000000..539d60552 --- /dev/null +++ b/website/public/static/demo/military/helper/vue/import/index.md @@ -0,0 +1,117 @@ +# Vue组件引入 +> 由于 Cesium 本身就存在纹理/多线程等重框架，导致无法像 leaflet/openalers 一样简单的独立引用，因此很容易导致引入失败 + +[官方解决方案-强烈不推荐-除非你使用纯开源版本Cesium](https://cesium.com/docs/tutorials/cesium-and-webpack/); + +> 由于 cesium 本身`涉及大量的纹理材质以及多线程Worker`， 公司内部修改版实现`M3D格式`， M3D`不是`3dtile，是中地数码自己独特的格式，与开源的 3dtile 不是一种格式。很多高级分析功能`只能作用于M3D`,而不支持 3d tile. + +webclient-vue-cesium 支持一层封装，除了本身需要安装以外，你还需要拷贝@mapgis/cesium + +## 源问题 +如果使用`淘宝源`，则导致下载的@mapgis/cesium很容易是1.0.0或者较低的版本.通过npm的淘宝镜像源下载的@mapgis/cesium库存在版本偏差问题，例如当前最新版本为1.59.0，使用淘宝镜像源下载的最新的版本只有1.0.0，可以关掉淘宝镜再行下载。 +目前最新的公网版本是 [NPM-Verison](https://www.npmjs.com/package/@mapgis/cesium?activeTab=versions) +![代码结构](./static/demo/cesium/helper/vue/import/version.png) + +```bash +# 不同时安装@mapgis/cesium的原因在于这个对外的是非高级版本，事业部一般全内部使用高级版本开发 +npm install --save @mapgis/webclient-vue-cesium +``` +> 要实现 cesium 主体的引入，一定要看下面的`文件拷贝`章节, 光是@mapgis/webclient-vue-cesium 是无法正常开发的 Orz... + +## 文件拷贝 + +由于标准的 Cesium 在支持 Webpack 编译的时候也是采取的 copy 插件来执行对应的文件夹拷贝操作。 因此为了统一处理，这里`统一不采取`手动修改 webpack.config 的方式，而是将 cesium 的所有文件放在 public 或者 asset 的某个目录下，自己`手动实现`静态资料的拷贝 + +> 这样做的本质原因是，MapGIS 的高级版本的 Cesium 是只对内不对外提供，导致不同事业部的 Cesium 版本各不一致 + +以`@mapgis/cesium`的包结构展示如下： +![代码结构](./static/demo/cesium/helper/vue/import/cesium_dist.png) + +> 请将上述文件统一拷贝到你的 vue 工程对应的 public 文件夹下的某个目录中，记录对应的路径为 + +```sh +# quasar 的静态资源目录为src/static +# 常见的静态资源目录为 public +# 主Cesium主体路径 +path/to/statics/cesium/Cesium.js +# Cesium拓展插件路径 +path/to/statics/cesium/webclient-cesium-plugins.min.js +``` + +> 如果在浏览器中 访问 `http://localhost:xxxx/path/to/statics/cesium/Cesium.js` 成功则说明整个 Cesium 的环境准备已经完毕。 + +## 引入 + +### 全局引入 +在main.js中实现以下代码 +``` javascript +import VueCesium from '@mapgis/webclient-vue-cesium'; +vue.use(VueCesium); +``` + +### 局部引入 +``` javascript +import { MapgisWebScene } from '@mapgis/webclient-vue-cesium'; + +export default { + components: { + MapgisWebScene + }, +} +``` + +## 开发结构 + +> 强烈建议使用前了解基本的cesium引导[Cesium - 向导](https://cesium.com/docs/) 以及 cesium 的开发方式[cesium - API](https://cesium.com/docs/cesiumjs-ref-doc/) + +如果你使用的地形是 cesium 提供的地形, 需要设置[Cesium ion](https://cesium.com/docs/oauth/). 更多细节请查看[Ion](https://cesium.com/ion). + +如果你使用`MapGIS-IGServer`提供的地形数据，你可以忽略该参数 + +上一章节文件`拷贝目录`中的2个路径，这里初始化的时候就需要传入`libPath`以及`pluginPath` 如果不传入则从司马云上自动下载对应的网络地址，没有互联网则无法下载 + +``` sh +# quasar 的静态资源目录为src/static +# 常见的静态资源目录为 public +# 主Cesium主体路径 对应 libPath +path/to/statics/cesium/Cesium.js +# Cesium拓展插件路径 对应 pluginPath +path/to/statics/cesium/webclient-cesium-plugin.min.js +``` + +``` javascript + + + + + +``` + + + diff --git a/website/public/static/demo/military/helper/vue/import/version.png b/website/public/static/demo/military/helper/vue/import/version.png new file mode 100644 index 000000000..7ca3a8ec9 Binary files /dev/null and b/website/public/static/demo/military/helper/vue/import/version.png differ diff --git a/website/public/static/demo/military/helper/vue/memery/error.png b/website/public/static/demo/military/helper/vue/memery/error.png new file mode 100644 index 000000000..e17897022 Binary files /dev/null and b/website/public/static/demo/military/helper/vue/memery/error.png differ diff --git a/website/public/static/demo/military/helper/vue/memery/index.md b/website/public/static/demo/military/helper/vue/memery/index.md new file mode 100644 index 000000000..61dacc63c --- /dev/null +++ b/website/public/static/demo/military/helper/vue/memery/index.md @@ -0,0 +1,69 @@ +# Vue 内存溢出 + +> 由于 Cesium 本身就存在纹理/多线程等重框架，导致无法像 leaflet/openalers 一样简单的独立引用，因此很容易导致内存溢出问题 + +## 表现 + +```sh +// JVM Out Of Memery +使用最新的@mapgis/webclient-vue-cesium组件库时，可能会遇到内存不足而导致编译失败的问题，可以在package.json文件中添加启动命令行"node --max_old_space_size=8196 ./node_modules/@vue/cli-service/bin/vue-cli-service serve"，增加编译允许的最大内存，编译运行时使用该命令行，如下所示编译时使用npm run dev-memery命令 +``` +> 由于内存不够可能导致一些特殊的情况，在调用一些正常的功能的时候报错如下：经排查是@mapgis/webclient-vue-cesium组件库版本的问题，我使用的版本为1.0.4，更新到目前最新的版本1.0.6后，报错解决，igserver瓦片正常加载。 +![错误](./static/demo/cesium/helper/vue/memery/error.png) + +## 解决方式 + +针对该问题的统一解决方式是提升 NodeJS 的运行内存 `node --max_old_space_size=8196` + +1. `Vue CLi 2.0` 的工程命令 + 通过 Vue Cli 2.0 建立的工程的 package.json 的内容如下： + + ```json + { + "scripts": { + "serve": "vue-cli-service serve", + "build": "vue-cli-service build", + "lint": "vue-cli-service lint" + } + } + ``` + + 将上面的`vue-cli-service`修改为`node --max_old_space_size=8196 ./node_modules/@vue/cli-service/bin/vue-cli-service serve` + + 修改后结果为 + + ```json + { + "scripts": { + "serve": "node --max_old_space_size=8196 ./node_modules/@vue/cli-service/bin/vue-cli-service serve", + "build": "node --max_old_space_size=8196 ./node_modules/@vue/cli-service/bin/vue-cli-service build", + "lint": "node --max_old_space_size=8196 ./node_modules/@vue/cli-service/bin/vue-cli-service lint" + } + } + ``` + +2. 自定义运行命令 + 参照上面的命名按照 ./node_modules/目录下的内容进行修改替换 + +3. 屏蔽编译选项 + 在 ./node_modules/@mapgis/webclient-vue-cesium/package.json 下，其内容如下： + ```json + { + "name": "@mapgis/webclient-vue-cesium", + "version": "1.0.6", + "description": "mapgis webclient-vue-cesium", + "main": "dist/webclient-vue-cesium.umd.1.js", + "module": "src/index.js" + } + ``` + 上面的module表示，如果你的工程存在对应的ES6依赖环境，会走编译模式，`可以进行代码调试`，main表示直接走编译后的运行包，`无法代码调试`。 + 直接`删除module`或者`重命名module`, 让其直接走main分支，进行运行时开发。 + ```json + { + "name": "@mapgis/webclient-vue-cesium", + "version": "1.0.5", + "description": "mapgis webclient-vue-cesium", + "main": "dist/webclient-vue-cesium.umd.1.js", + "module-bakup": "src/index.js" + } + ``` \ No newline at end of file diff --git a/website/public/static/demo/military/helper/vue/route/index.md b/website/public/static/demo/military/helper/vue/route/index.md new file mode 100644 index 000000000..5e9cf22d6 --- /dev/null +++ b/website/public/static/demo/military/helper/vue/route/index.md @@ -0,0 +1,36 @@ +# Vue 路由问题 + +> 由于中地数码-Cesium在销毁的时候需要考虑多线程问题以及卸载WebGL不能即刻销毁的原因，因此如果需要切换cesium视图的时候需要将cesium组件保活处理。 + +常见情况： +> 二维和三维地图需要在同一页面上加载和切换展示时，只能用v-show来控制组件的显示与隐藏，同时需要用来包裹三维地图组件，否则组件来回切换时，三维地球会加载不出来，出现空白。代码示例如下所示 + +1. 路由切换,导致Cesium视图创建/销毁 +2. v-if/v-show切换,导致 Cesium视图创建/销毁 + +核心解决方案如下： `keep-alive` +``` javascript + +``` + diff --git a/website/public/static/demo/military/markdown/analysis/analysis-animation.md b/website/public/static/demo/military/markdown/analysis/analysis-animation.md new file mode 100644 index 000000000..16e56f717 --- /dev/null +++ b/website/public/static/demo/military/markdown/analysis/analysis-animation.md @@ -0,0 +1,184 @@ +## 动画漫游 + +### 示例功能 + +    此功能用于在三维场景中实现动画漫游功能，即让模型沿着路径漫游，默认为第一人称漫游，可修改动画漫游方式。本示例实现让飞机模型按既定的路径漫游。在实际应用中，可结合具体应用场景开发，如绘制路径进行动画漫游等功能需求等。 + +### 示例实现： + +    本示例需要使用【include-cesium-local.js】开发库实现，初始化高级分析功能管理类 `CesiumZondy.Manager.AdvancedAnalysisManager` 对象，调用高级分析功能管理类的 `createAnimation()` 方法创建动画漫游对象实例实现动画漫游功能。 + +### 实现步骤： + +**Step 1. 引用开发库**： +    本示例引用local本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维WebGL的功能； + +**Step 2. 创建三维地图容器并加载三维球控件**： +    创建 `id='GlobeView'` 的div作为三维视图的容器，并设置其样式，初始化Cesium三维球控件 `Cesium.WebSceneControl()` ，完成此步后可在三维场景中加载三维球控件； + +* Example: + ``` Javascript + //构造三维视图类（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', { + terrainExaggeration: 1, + }); + ``` + +* Example: + ``` html +
+ ``` + +**Step 3. 加载底图数据**： +    初始化第三方图层类`CesiumZondy.Layer.ThirdPartyLayer`对象，调用 `appendGoogleMapExt()` 方法加载谷歌地图数据作为底图； + +* Example: + ``` Javascript + //构造第三方图层对象 + var thirdPartyLayer = new CesiumZondy.Layer.ThirdPartyLayer({ + viewer: webGlobe.viewer + }); + //加载天地图 + var tdtLayer = thirdPartyLayer.appendTDTuMap({ + //天地图经纬度数据 + url: 'http://t0.tianditu.com/DataServer?T=vec_c&X={x}&Y={y}&L={l}', + //开发token （请到天地图官网申请自己的开发token，自带token仅做功能验证随时可能失效） + token: "9c157e9585486c02edf817d2ecbc7752", + //地图类型 'vec'矢量 'img'影像 'ter'地形 + ptype: "img" + }); + ``` + +**Step 4. 显示常用控件，并实现跳转定位**： +    调用`showPosition()`、`createNavigationTool()`方法显示常用控件，调用 `flyToEx()` 方法定位到指定点； + +* Example: + ``` Javascript + //视点跳转（经度，纬度，视角高度，方位角，俯仰角，翻滚角） + webGlobe.flyToEx(117.213063, 31.812956, { + height: 200, + heading: 90, + pitch: 0, + roll: 0 + }); + //显示鼠标位置控件 + webGlobe.showPosition('coordinate_location'); + //显示导航控件（罗盘、比例尺、场景导航） + webGlobe.createNavigationTool({ + enableCompass: true, + enableZoomControls: true, + enableDistanceLegend: true + }); + ``` + +**Step 5. 创建动画漫游对象**： +    初始化高级分析功能管理类对象`CesiumZondy.Manager.AdvancedAnalysisManager`，调用`createAnimation()`方法创建动画漫游对象； + +* Example: + ``` Javascript + //初始化高级分析功能管理类 + var advancedAnalysisManager = new CesiumZondy.Manager.AdvancedAnalysisManager({ + viewer: webGlobe.viewer + }); + //创建动画漫游对象 + animation = advancedAnalysisManager.createAnimation({ + exHeight: 9, + isLoop: false, + //漫游模型url + modelUrl: './static/data/model/WuRenJi.glb', + //完成动画漫游回调函数 + complete: function () { + alert('完毕'); + } + }); + ``` + +**Step 6. 实现动画漫游控制**： +    通过动画漫游对象的属性和方法实现动画漫游控制，即通过属性设置漫游路径、漫游方式、速度、俯仰角、方位角等参数，分别通过调用方法`start()`、`stop()`开始和结束漫游。 + +* Example: + ``` Javascript + //漫游路径 + positions = Cesium.Cartesian3.fromDegreesArray([ + 117.213063, 31.812956, 117.213162, 31.812389, 117.212929, 31.812056, 117.213275, 31.811582, + 117.21348, 31.811513, 117.214141, 31.811682, 117.21497, 31.811691, 117.216318, 31.811454, + 117.216962, 31.812037, 117.217893, 31.812298, 117.218607, 31.811488, 117.219466, 31.810935, + 117.224439, 31.810929, 117.225266, 31.811119, 117.225308, 31.81131, 117.224819, 31.811724, + 117.225189, 31.811928, 117.225676, 31.811624, 117.225843, 31.811943, 117.22625, 31.812183, + 117.226292, 31.81281, 117.225888, 31.813287, 117.226093, 31.814059, 117.22564, 31.814582, + 117.225953, 31.814731, 117.225611, 31.814954, 117.22576, 31.815233, 117.224073, 31.816329, + 117.223694, 31.81627, 117.222769, 31.817007, 117.222259, 31.816871, 117.221922, 31.816707, + 117.221653, 31.816788, 117.22151, 31.817002, 117.221039, 31.816891, 117.220395, 31.816352, + 117.220166, 31.815734, 117.219804, 31.815607, 117.219461, 31.815122, 117.21878, 31.814846, + 117.218297, 31.815275, 117.217975, 31.815172, 117.217142, 31.815229, 117.216753, 31.815124, + 117.216652, 31.814308, 117.215726, 31.814049, 117.214769, 31.813517, 117.214111, 31.813717, + 117.213552, 31.814099, 117.213024, 31.813954, 117.212897, 31.813892, 117.213224, 31.813681, + 117.212788, 31.813147, 117.212928, 31.813018, 117.213063, 31.812956 + ]); + //设置路径 + animation.positions = positions; + //漫游方式：1-跟随、2-锁定第一视角、3-上帝视角 + animation.animationType = 2; + //漫游速度 + animation.speed = 1; + ``` + +* Example: + ``` Javascript + function start() { + //开始漫游 + animation.start(); + } + function pause() { + //暂停漫游 + animation.pause = true; + } + function stop() { + //停止漫游 + animation.stop(); + } + ``` + +### 关键接口 + +#### 1.【三维视图的主要类】 `Cesium.WebSceneControl` + +#### 2.【场景视图管理类】 `CesiumZondy.Manager.SceneManager` + +##### 【method】 `showPosition()`： 鼠标坐标位置控件 + +##### 【method】 `createNavigationTool()`： 常用导航控件 + +##### 【method】 `flyToEx()`： 视点跳转 + + +#### 3.【高级分析功能管理类】`CesiumZondy.Manager.AdvancedAnalysisManager` + +##### 【method】 `createAnimation(optionsParam) → {Object}` ：创建动画漫游对象, 返回动画漫游实例Animation(Object) + +|参数名|类型|说明| +|-|-|-| +|optionsParam|Object|动画漫游参数| + +* `optionsParam` 主要参数 + +|参数名|类型|说 明| +|-|-|-| +|exHeight|Number|（可选）附加高程| +|isLoop|Boolean|（可选）是否循环| +|modelUrl|Object|模型url| +|callback|function|（可选）完成动漫漫游后的回调函数| + +##### 【返回值】 `Animation`的属性与方法 + +|属性名|类型|说 明| +|-|-|-| +|positions|Array|漫游路径，Cesium.Cartesian3.fromDegreesArray的经纬度值数组| +|animationType|Number|漫游方式：1-跟随、2-锁定第一视角、3-上帝视角| +|speed|Number|漫游速度| + + +|方法名|说 明| +|-|-| +|start|开始漫游| +|stop|结束漫游| diff --git a/website/public/static/demo/military/markdown/analysis/analysis-aspectAnalysis.md b/website/public/static/demo/military/markdown/analysis/analysis-aspectAnalysis.md new file mode 100644 index 000000000..0e3526f53 --- /dev/null +++ b/website/public/static/demo/military/markdown/analysis/analysis-aspectAnalysis.md @@ -0,0 +1,99 @@ +## 坡向分析 + +### 示例功能 + +    此功能用于地形数据的坡向分析。 坡向是指地表面上一点的切平面的法线在水平面的投影与该点的正北方向的夹角，描述该点高程值改变量的最大变化方向。坡向分析作用是：决定地表面局部地面接收阳光和重新分配太阳辐射量的重要地形因子，直接造成局部地区气候特征差异，影响各项农业生产指标。 + +### 示例实现： + +    本示例需要使用【include-cesium-local.js】开发库实现，初始化 Cesium 三维球控件 `Cesium.WebSceneControl()` ，初始化地形图层管理类 `CesiumZondy.Layer.TerrainLayer` 并调用 `append()` 方法加载地形数据后，跳转视点，创建高级分析功能管理类 `CesiumZondy.Manager.AdvancedAnalysisManager()` ，调用 `createAspectAnalysis()` 方法进行坡向分析。 + +### 实现步骤： + +**Step 1. 引用开发库**： +    本示例引用 local 本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维 WebGL 的功能； + +**Step 2. 创建三维地图容器并加载三维球控件**： +    创建 `id='GlobeView'` 的 div 作为三维视图的容器，并设置其样式，初始化 Cesium 三维球控件 `Cesium.WebSceneControl()` ，完成此步后可在三维场景中加载三维球控件； + +- Example: + + ```Javascript + //构造三维视图类（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', { + terrainExaggeration: 1, + }); + ``` + +- Example: + ```html +
+ ``` + +**Step 3. 加载数据**： +    初始化地形图层管理类 `CesiumZondy.Layer.TerrainLayer` 并调用 `append()` 方法传入三维地形数据地图服务地址，即可加载浏览数据； + +- Example: + ```Javascript + //构造地形图层管理类 + var terrain = new CesiumZondy.Layer.TerrainLayer({ + viewer: webGlobe.viewer + }); + //加载三维地形地图文档（服务地址，配置参数） + var { protocol, ip, port } = window.webclient; + var terrainlayer = terrain.append(`http://develop.smaryun.com:6163/igs/rest/g3d/terrain`, {}); + //初始化视图功能管理类 + var sceneManager = new CesiumZondy.Manager.SceneManager({ + viewer: webGlobe.viewer + }); + ``` + +**Step 4. 坡向分析**： +    创建高级分析功能管理类 `CesiumZondy.Manager.AdvancedAnalysisManager()` ，调用 `createAspectAnalysis()` 方法进行坡向分析。 + +- Example: + ```Javascript + //初始化高级分析功能管理类 + var advancedAnalysisManager = new CesiumZondy.Manager.AdvancedAnalysisManager({ + viewer: webGlobe.viewer + }); + webGlobe.viewer.scene.globe.depthTestAgainstTerrain = true; + //进行坡向分析 + var aspectAna = advancedAnalysisManager.createAspectAnalysis([ + Cesium.Color.ALICEBLUE, + Cesium.Color.ANTIQUEWHITE, + Cesium.Color.AQUA, + Cesium.Color.AQUAMARINE, + Cesium.Color.AZURE, + Cesium.Color.BEIGE + ]); + ``` + +### 关键接口 + +#### 1.【三维视图的主要类】 `Cesium.WebSceneControl` + +#### 2.【地形图层管理类】`CesiumZondy.Layer.TerrainLayer` + +##### 【method】 `append(url, options)` ：添加地形地图文档 + +| 参数名 | 类型 | 说明 | +| ------- | ------ | ----------------------------------------------------------------------------------------------- | +| url | String | 事件类型 LEFT_CLICK RIGHT_CLICK MOUSE_MOVE LEFT_DOUBLE_CLICK RIGHT_DOUBLE_CLICK WHEEL(鼠标滚轮) | +| options | Object | 可选参数 | + +- `options` 主要参数 + +| 参数名 | 类型 | 默认值 | 说明 | +| ----------- | ------------ | -------- | ------------------ | +| synchronous | Boolean | true | (可选)是否异步请求 | +| loaded | function | function | (可选)回调函数 | +| 代理 | DefaultProxy | 暂无 | 暂无 | + +#### 3.【高级分析功能管理类】`CesiumZondy.Manager.AdvancedAnalysisManager` + +##### 【method】 `createAspectAnalysis(color) → {Object}`： 坡向分析，返回坡向分析实例 + +| 参数名 | 类型 | 说 明 | +| ------ | ------------- | ------------------------- | +| color | Array. | 坡向分层颜色信息，分 6 层 | diff --git a/website/public/static/demo/military/markdown/analysis/analysis-cube.md b/website/public/static/demo/military/markdown/analysis/analysis-cube.md new file mode 100644 index 000000000..e0ba1de39 --- /dev/null +++ b/website/public/static/demo/military/markdown/analysis/analysis-cube.md @@ -0,0 +1,142 @@ +## 填挖方计算 + +### 示例功能 + +    此功能提供用于计算将一定范围内的地形填平到某一高度时，需要挖开或填充的空间体积，可以应用于智慧城市，地质，公安等多个领域的业务功能，实用性强。 + +### 示例实现： + +    本示例需要使用【include-cesium-local.js】开发库实现，初始化Cesium三维球控件 `Cesium.WebSceneControl()` ，初始化地形图层管理类 `CesiumZondy.Layer.TerrainLayer()` 的 `append()` 方法加载地形数据后，初始化 `Cesium.DrawElement()` 对象在三维场景中添加交互式绘制区控件用来界定量算区域，初始化高级分析功能管理类 `CesiumZondy.Manager.AdvancedAnalysisManager()` 对象，调用高级分析功能管理类的 `createCutFill()` 方法创建填挖方分析对象, 调用高级分析功能管理类的 `startCutFill()` 方法执行填挖方分析。 + +### 实现步骤： + +**Step 1. 引用开发库**： +    本示例引用local本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维WebGL的功能； + +**Step 2. 创建三维地图容器并加载三维球控件**： +    创建 `id='GlobeView'` 的div作为三维视图的容器，并设置其样式，初始化Cesium三维球控件 `Cesium.WebSceneControl()` ，初始化地形图层管理类 `CesiumZondy.Layer.TerrainLayer()` 的 `append()` 方法加载地形数据，完成此步后可在三维场景中加载三维球控件并加载数据； + +* Example: + ``` Javascript + //构造三维视图类（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', { + terrainExaggeration: 1, + }); + //添加Google地图 + webGlobe.appendGoogleMapExt({ + ptype: 's@130' + }); + //构造地形图层管理类 + var terrain = new CesiumZondy.Layer.TerrainLayer({ + viewer: webGlobe.viewer + }); + //加载三维地形地图文档（服务地址，配置参数） + terrainlayer = terrain.append("http://develop.smaryun.com:6163/igs/rest/g3d/terrain", {}); + ``` + +* Example: + ``` html +
+ ``` + +**Step 3. 创建交互式绘制工具**： +    初始化 `Cesium.DrawElement()` 对象，完成交互式绘制工具的创建； + +* Example: + ``` Javascript + //创建交互式绘制工具 + var drawElement = new Cesium.DrawElement(webGlobe.viewer); + ``` + +**Step 4. 激活交互式绘制区工具**： +    调用 `Cesium.DrawElement()` 对象的startDrawingPolygon()方法，激活交互式绘制区工具，完成此步后，可在三维场景中通过鼠标左键点击绘制多边形； + +* Example: + ``` Javascript + //激活交互式绘制区工具 + drawElement.startDrawingPolygon(); + ``` + +**Step 5. 创建填挖方分析**： +    初始化高级分析功能管理类 `CesiumZondy.Manager.AdvancedAnalysisManager（）` 对象，调用高级分析功能管理类的 `createCutFill()` 方法创建填挖方分析对象； + +* Example: + ``` Javascript + //初始化高级分析功能管理类 + var advancedAnalysisManager = new CesiumZondy.Manager.AdvancedAnalysisManager({ + viewer: viewer + }); + //创建填挖方实例 + cutFill = advancedAnalysisManager.createCutFill(0.0, { + //设置x方向采样点个数 + xPaneNum: document.getElementById("x").value <= 0 ? 16 : document.getElementById("x").value, + //设置y方向采样点个数参数 + yPaneNum: document.getElementById("y").value <= 0 ? 16 : document.getElementById("y").value, + //设置填挖规整高度 + Height: document.getElementById("z").value <= 0 ? 16 : document.getElementById("z").value, + //返回结果的回调函数 + callback: function(result) { + document.getElementById("height").value = result.minHeight.toFixed(2) + '~' + result.maxHeight.toFixed(2); + document.getElementById("surfaceArea").value = result.surfaceArea; + document.getElementById("cutVolume").value = result.cutVolume; + document.getElementById("fillVolume").value = result.fillVolume; + } + }); + ``` + +**Step 6. 执行填挖方分析**： +    调用高级分析功能管理类的 `startCutFill()` 方法执行填挖方分析。 + +* Example: + ``` Javascript + //开始执行填挖方分析 + advancedAnalysisManager.startCutFill(cutFill, positions); + ``` + +### 关键接口 + +#### 1.【三维视图的主要类】 `Cesium.WebSceneControl` + +#### 2.【地形图层管理类】`CesiumZondy.Layer.TerrainLayer` + +##### 【method】 `append(url, options)` ：添加地形地图文档 + +|参数名|类型|说明| +|-|-|-| +|url|String|事件类型 LEFT_CLICK RIGHT_CLICK MOUSE_MOVE LEFT_DOUBLE_CLICK RIGHT_DOUBLE_CLICK WHEEL(鼠标滚轮)| +|options|Object|可选参数| + +* `options` 主要参数 + +|参数名|类型|默认值|说明| +|-|-|-|-| +|synchronous|Boolean|true|(可选)是否异步请求| +|loaded|function|function|(可选)回调函数| +|代理|DefaultProxy|暂无|暂无| + +#### 2.【交互式绘制类】`Cesium. DrawElement` + +#### 3.【高级分析功能管理类】`CesiumZondy.Manager.AdvancedAnalysisManager` + +##### 【method】 `createCutFill(dataType, options)` ：创建填挖方实例 + +|参数名|类型|说明| +|-|-|-| +|dataType|Number|针对地形进行填挖方分析| +|options|Object|可选参数| + +* `options` 主要参数 + +|参数名|类型|说明| +|-|-|-|-| +|xPaneNum|Number|x方向采样点个数| +|yPaneNum|Number|y方向采样点个数| +|Height|Number|设定的填挖规整高度| +|callback|function|返回结果的回调函数| + +##### 【method】 `startCutFill(cutFill, positions)` ：开始执行填挖方分析 + +|参数名|类型|说明| +|-|-|-| +|cutFill|object|填挖方实例| +|positions|Array|填挖区域多边形的顶点数组| diff --git a/website/public/static/demo/military/markdown/analysis/analysis-dynamiccut.md b/website/public/static/demo/military/markdown/analysis/analysis-dynamiccut.md new file mode 100644 index 000000000..bd58ed0a2 --- /dev/null +++ b/website/public/static/demo/military/markdown/analysis/analysis-dynamiccut.md @@ -0,0 +1,144 @@ +## 动态剖切 + +### 示例功能 + +    此功能对已加载的M3D数据进行任意距离的剖切，动态的显示或隐藏一部分数据。 + +### 示例实现： + +    本示例需要使用【include-cesium-local.js】开发库实现，初始化Cesium三维球控件 `Cesium.WebSceneControl()` ，初始化M3D模型层管理类 `CesiumZondy.Layer.M3DLayer` 并调用 `append()` 方法加载M3D数据后，创建分析功能管理类 `CesiumZondy.Manager.AnalysisManager()` ，调用 `createDynamicCutting()` 方法创建剖切对象实例，通过设置剖切面距离进行数据剖切分析。 + +### 实现步骤： + +**Step 1. 引用开发库**： +    本示例引用local本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维WebGL的功能； + +**Step 2. 创建三维地图容器并加载三维球控件**： +    创建 `id='GlobeView'` 的div作为三维视图的容器，并设置其样式，初始化Cesium三维球控件 `Cesium.WebSceneControl()` ，完成此步后可在三维场景中加载三维球控件； + +* Example: + ``` Javascript + //构造三维视图类（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', { + terrainExaggeration: 1, + }); + ``` + +* Example: + ``` html +
+ ``` + +**Step 3. 加载数据**： +    初始化M3D模型层管理类 `CesiumZondy.Layer.M3DLayer` 并调用 `append()` 方法传入M3D数据服务地址，即可加载浏览数据； + +* Example: + ``` Javascript + //构造M3D模型层管理对象 + var m3dLayer = new CesiumZondy.Layer.M3DLayer({ + viewer: webGlobe.viewer + }); + var drilllayer = m3dLayer.append( + "http://develop.smaryun.com:6163/igs/rest/g3d/钻孔_2_钻孔模型s", { + autoReset: false, + } + ); + //加载M3D地图文档（服务地址，配置参数） + landscapeLayer = m3dLayer.append('http://develop.smaryun.com:6163/igs/rest/g3d/钻孔分层点_Sur_000_Ent', {}); + ``` + +**Step 4. 跳转定位**： +    调用视图功能管理类 CesiumZondy. Manager. SceneManager() ` 的 ` flyToEx()` 方法跳转到数据显示的范围； + +* Example: + ``` Javascript + //初始化视图功能管理类 + var sceneManager = new CesiumZondy.Manager.SceneManager({ + viewer: webGlobe.viewer + }); + //视点跳转 + sceneManager.flyToEx(112.94845170512113, 30.004246325952618, { + height: 2600, + heading: 67, + pitch: -30, + roll: 0 + }); + ``` + +**Step 5. 创建切面**： +    初始化切面对象 `Cesium.ClippingPlane()` ; + +* Example: + ``` Javascript + //进行剖切分析的面，从上往下切，Cesium.Cartesian3中第一个参数是左右，第二个参数是前后，第三个参数是上下 + var plane = new Cesium.ClippingPlane(new Cesium.Cartesian3(0.0, 0.0, -1.0), -500.0) + ``` + +**Step 6. 获取剖切切面**： +    创建分析功能管理类 `CesiumZondy.Manager.AnalysisManager()` ，调用 `createDynamicCutting()` 方法创建剖切对象实例, 并获取剖切切面； + +* Example: + ``` Javascript + //初始化分析功能管理类 + var analysisManager = new CesiumZondy.Manager.AnalysisManager({ + viewer: webGlobe.viewer + }); + //创建剖切对象实例 + dynaCut = analysisManager.createDynamicCutting(landscapeLayer, [plane], { + color: new Cesium.Color(0.0, 1.0, 1.0, 0.3) + }); + ``` + +**Step 7. 设置剖切面距离**： +    通过设置切面回调函数，动态设置剖切面距离完成动态剖切分析。 + +* Example: + ``` Javascript + //设置切面回调函数 + dynaCut.planes[0].plane.plane = new Cesium.CallbackProperty(function(date) { + //设置剖切面距离 + plane.distance = distance; + return Cesium.Plane.transform(plane, landscapeLayer[0].modelMatrix, new Cesium.ClippingPlane(Cesium.Cartesian3.UNIT_X, 0.0)); + }, false); + ``` + +### 关键接口 + +#### 1.【三维视图的主要类】 `Cesium.WebSceneControl` + +#### 2.【M3D模型层管理类】 `CesiumZondy.Layer.M3DLayer` + +##### 【method】 `append(url, options)` ：添加M3D地图文档 + +|参数名|类型|说明| +|-|-|-| +|url|String|事件类型 LEFT_CLICK RIGHT_CLICK MOUSE_MOVE LEFT_DOUBLE_CLICK RIGHT_DOUBLE_CLICK WHEEL(鼠标滚轮)| +|options|Object|可选参数| + +* `options` 主要参数 + +|参数名|类型|默认值|说明| +|-|-|-|-| +|autoReset|Boolean|true|(可选)是否自动定位| +|synchronous|Boolean|true|(可选)是否异步请求| +|loaded|function|function|(可选)回调函数| +|proxy|DefaultProxy|defaultProxy|代理| +|showBoundingVolume|Boolean|false|是否显示包围盒| +|maximumScreenSpaceError|Number|16|用于控制模型显示细节| + +#### 3. 【裁剪平面类】 `Cesium.ClippingPlane` + +|参数名|类型|说 明| +|-|-|-| +|normal|Cartesian3|法线| +|distance|Number|最短距离| + +#### 4.【分析功能管理类】 `CesiumZondy.Manager.AnalysisManager` + +##### 【method】 `createDynamicCutting(tileSets, planes, options)`：创建动态剖切实例 + +|参数名|类型|说明| +|-|-|-| +|tileSets|Object|图层集| +|planes|Object|平面集| +|options|Object|暂无| diff --git a/website/public/static/demo/military/markdown/analysis/analysis-excavate.md b/website/public/static/demo/military/markdown/analysis/analysis-excavate.md new file mode 100644 index 000000000..f83b056b4 --- /dev/null +++ b/website/public/static/demo/military/markdown/analysis/analysis-excavate.md @@ -0,0 +1,163 @@ +## 开挖深度 + +### 示例功能 + +    此功能对已加载的M3D数据进行任意距离深度开挖，动态的显示或隐藏一部分数据。 + +### 示例实现： + +    本示例需要使用【include-cesium-local.js】开发库实现，初始化Cesium三维球控件 `Cesium.WebSceneControl()` ， 初始化M3D模型层管理类 `CesiumZondy.Layer.M3DLayer` 并调用 `append()` 方法加载M3D数据后，创建 `Cesium.ClippingPlane()` 切面对象，创建分析功能管理类 `CesiumZondy.Manager.AnalysisManager()` ，调用 `createDynamicCutting()` 方法创建开挖分析对象通过设置剖切面距离进行数据开挖分析。 + +### 实现步骤： + +**Step 1. 引用开发库**： +    本示例引用local本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维WebGL的功能； + +**Step 2. 创建三维地图容器并加载三维球控件**： +    创建 `id='GlobeView'` 的div作为三维视图的容器，并设置其样式，初始化Cesium三维球控件 `Cesium.WebSceneControl()` ，完成此步后可在三维场景中加载三维球控件； + +* Example: + ``` Javascript + //构造三维视图类（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', { + terrainExaggeration: 1, + }); + ``` + +* Example: + ``` html +
+ ``` + +**Step 3. 加载数据**： +    初始化M3D模型层管理类 `CesiumZondy.Layer.M3DLayer` 并调用 `append()` 方法传入M3D数据服务地址，即可加载浏览数据； + +* Example: + ``` Javascript + //构造M3D模型层管理对象 + var m3dLayer = new CesiumZondy.Layer.M3DLayer({ + viewer: webGlobe.viewer + }); + var drilllayer = m3dLayer.append( + "http://develop.smaryun.com:6163/igs/rest/g3d/钻孔_2_钻孔模型s", { + autoReset: false, + } + ); + //加载M3D地图文档（服务地址，配置参数） + landscapeLayer = m3dLayer.append('http://develop.smaryun.com:6163/igs/rest/g3d/钻孔分层点_Sur_000_Ent', {}); + ``` + +**Step 4. 创建切面**： +    初始化切面对象 `Cesium.ClippingPlane()` ; + +* Example: + ``` Javascript + //开挖面设置,这五个面分别表示前后左右，底面，其中底面用于控制开挖深度 + var clippingPlanes = [ + new Cesium.ClippingPlane(new Cesium.Cartesian3(3, 0.0, 0.0), -1500.0), + new Cesium.ClippingPlane(new Cesium.Cartesian3(-3, 0.0, 0.0), -1500.0), + new Cesium.ClippingPlane(new Cesium.Cartesian3(0.0, 3, 0.0), -1500.0), + new Cesium.ClippingPlane(new Cesium.Cartesian3(0.0, -3, 0.0), -1500.0), + new Cesium.ClippingPlane(new Cesium.Cartesian3(0.0, 0.0, -5), 0.0) + ] + ``` + +**Step 5. 创建开挖分析**： +    化M3D模型层管理类 `CesiumZondy.Layer.M3DLayer` 并调用 `append()` 方法加载M3D数据后，创建 `Cesium.ClippingPlane()` 切面对象，创建分析功能管理类 `CesiumZondy.Manager.AnalysisManager()` ，调用 `createDynamicCutting()` 方法创建开挖分析对象, 并获取剖切切面； + +* Example: + ``` Javascript + //初始化分析功能管理类 + var analysisManager = new CesiumZondy.Manager.AnalysisManager({ + viewer: webGlobe.viewer + }); + //创建开挖分析实例 + dynaCut = analysisManager.createExcavateAnalysis({ + //图层信息 + tileSet: landscapeLayer[0], + //开挖面的形状 + planes: planes, + //裁剪面材质 + material: new Cesium.Color(0.2, 0.4, 0.3, 0.7), + //边界线颜色 + edgeColor: new Cesium.Color(0.2, 0.4, 0.3, 0.7), + //边界线宽度 + edgeWidth: 3, + //裁减法线方向，默认值为 false + unionClippingRegions: false, + //开挖坐标 + longitude: 113.0402, + latitude: 30.0264, + height: 0 + }); + ``` + +**Step 6. 设置剖切面距离**： +    通过设置切面回调函数，动态设置剖切面距离完成动态剖切分析。 + +* Example: + ``` Javascript + dynaCut.planes[0].plane.plane = new Cesium.CallbackProperty(function(date) { + console.log(planes); + for (var i = 0; i < planes.length; i++) { + if (i === planes.length - 1) { + var plane = planes[i]; + plane.distance = distance; + Cesium.Plane.transform(plane, landscapeLayer[0].modelMatrix, new Cesium.ClippingPlane(Cesium.Cartesian3.UNIT_X, 0.0)); + } + } + }, false); + ``` + +### 关键接口 + +#### 1.【三维视图的主要类】 `Cesium.WebSceneControl` + +#### 2.【M3D模型层管理类】 `CesiumZondy.Layer.M3DLayer` + +##### 【method】 `append(url, options)` ：添加M3D地图文档 + +|参数名|类型|说明| +|-|-|-| +|url|String|事件类型 LEFT_CLICK RIGHT_CLICK MOUSE_MOVE LEFT_DOUBLE_CLICK RIGHT_DOUBLE_CLICK WHEEL(鼠标滚轮)| +|options|Object|可选参数| + +* `options` 主要参数 + +|参数名|类型|默认值|说明| +|-|-|-|-| +|autoReset|Boolean|true|(可选)是否自动定位| +|synchronous|Boolean|true|(可选)是否异步请求| +|loaded|function|function|(可选)回调函数| +|proxy|DefaultProxy|defaultProxy|代理| +|showBoundingVolume|Boolean|false|是否显示包围盒| +|maximumScreenSpaceError|Number|16|用于控制模型显示细节| + +#### 3.【裁剪平面类】 `Cesium.ClippingPlane(normal, distance)` + +|参数名|类型|说 明| +|-|-|-| +|normal|Cartesian3|法线| +|distance|Number|最短距离| + +#### 4.【分析功能管理类】 `CesiumZondy.Manager.AnalysisManager` + +##### 【method】 `createExcavateAnalysis(option)`：创建开挖实例 + +|参数名|类型|说明| +|-|-|-| +|option|Object|参数设置| + +* `options` 主要参数 + +|参数名|类型|说明| +|---|---|---| +|tileSet|Object|图层信息| +|planes|Object|开挖面的形状| +|material|Object|裁剪面材质| +|edgeColor|Object|边界线颜色| +|edgeWidth|Object|边界线宽度| +|unionClippingRegions|Object|裁减法线方向，默认值为 false| +|longitude|Object|开挖面定位点经度| +|latitude|Object|开挖面定位点纬度| +|height|Object|开挖面定位点高度| \ No newline at end of file diff --git a/website/public/static/demo/military/markdown/analysis/analysis-explosion.md b/website/public/static/demo/military/markdown/analysis/analysis-explosion.md new file mode 100644 index 000000000..c829097b2 --- /dev/null +++ b/website/public/static/demo/military/markdown/analysis/analysis-explosion.md @@ -0,0 +1,92 @@ +## 爆炸分析 + +### 示例功能 + +    此功能用于将M3D数据爆炸分析，将数据朝指定炸开。 + +### 示例实现： + +    本示例需要使用【include-cesium-local.js】开发库实现，初始化Cesium三维球控件 `Cesium.WebSceneControl()` ，初始化M3D模型层管理类 `CesiumZondy.Layer.M3DLayer` 并调用 `append()` 方法加载M3D数据后，创建分析功能管理类 `CesiumZondy.Manager.AnalysisManager()` ，调用 `createExplosion()` 方法爆炸模型。 + +### 实现步骤： + +**Step 1. 引用开发库**： +    本示例引用local本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维WebGL的功能； + +**Step 2. 创建三维地图容器并加载三维球控件**： +    创建 `id='GlobeView'` 的div作为三维视图的容器，并设置其样式，初始化Cesium三维球控件 `Cesium.WebSceneControl()` ，完成此步后可在三维场景中加载三维球控件； + +* Example: + ``` Javascript + //构造三维视图类（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', { + terrainExaggeration: 1, + }); + ``` + +* Example: + ``` html +
+ ``` + +**Step 3. 加载数据**： +    初始化M3D模型层管理类 `CesiumZondy.Layer.M3DLayer` 并调用 `append()` 方法传入M3D数据服务地址，即可加载浏览数据； + +* Example: + ``` Javascript + //构造M3D模型层管理对象 + var m3dLayer = new CesiumZondy.Layer.M3DLayer({ + viewer: webGlobe.viewer + }); + //加载M3D地图文档（服务地址，配置参数） + landscapeLayer = m3dLayer.append('http://develop.smaryun.com:6163/igs/rest/g3d/ZondyModels', {}); + ``` + +**Step 4. 爆炸模型**： +    创建分析功能管理类 `CesiumZondy.Manager.AnalysisManager()` ，调用 `createExplosion()` 方法爆炸模型。 + +* Example: + ``` Javascript + //初始化分析功能管理类 + var analysisManager = new CesiumZondy.Manager.AnalysisManager({ + viewer: webGlobe.viewer + }); + analysisManager.createExplosion(option); + ``` + +### 关键接口 + +#### 1.【三维视图的主要类】 `Cesium.WebSceneControl` + +#### 2.【M3D模型层管理类】 `CesiumZondy.Layer.M3DLayer` + +##### 【method】 `append(url, options)` ：添加M3D地图文档 + +|参数名|类型|说明| +|-|-|-| +|url|String|事件类型 LEFT_CLICK RIGHT_CLICK MOUSE_MOVE LEFT_DOUBLE_CLICK RIGHT_DOUBLE_CLICK WHEEL(鼠标滚轮)| +|options|Object|可选参数| + +* `options` 主要参数 + +|参数名|类型|默认值|说明| +|-|-|-|-| +|autoReset|Boolean|true|(可选)是否自动定位| +|synchronous|Boolean|true|(可选)是否异步请求| +|loaded|function|function|(可选)回调函数| +|proxy|DefaultProxy|defaultProxy|代理| +|showBoundingVolume|Boolean|false|是否显示包围盒| +|maximumScreenSpaceError|Number|16|用于控制模型显示细节| + +#### 3.【分析功能管理类】 `CesiumZondy.Manager.AnalysisManager` + +##### 【method】 `createExplosion(options)` ：创建模型爆炸动画实例 + +* `options` 主要参数 + +|参数名|类型|说明| +|---|---|---| +|children|Array|当前图层子节点| +|center|Cartesian3|爆炸中心| +|direction|Cartesian3|图层整体爆炸方向| +|distance|Number|沿当前方向移动距离| \ No newline at end of file diff --git a/website/public/static/demo/military/markdown/analysis/analysis-floor.md b/website/public/static/demo/military/markdown/analysis/analysis-floor.md new file mode 100644 index 000000000..37dbb7a76 --- /dev/null +++ b/website/public/static/demo/military/markdown/analysis/analysis-floor.md @@ -0,0 +1,175 @@ +## 洪水淹没分析 + +### 示例功能 + +    此功能用于在三维场景中添加洪水淹没的效果。 + +### 示例实现： + +    本示例需要使用【include-cesium-local.js】开发库实现，初始化Cesium三维球控件 `Cesium.WebSceneControl()` ， 初始化M3D模型层管理类 `CesiumZondy.Layer.M3DLayer` 并调用 `append()` 方法加载M3D数据后，添加交互式绘制工具 `Cesium.DrawPolygonTool()` 选择绘制区域, 初始化高级分析功能管理类 `CesiumZondy.Manager.AdvancedAnalysisManager()` 对象，调用高级分析功能管理类的 `createFlood()` 方法创建洪水淹没分析示例，将结果显示到三维球控件上。 + +### 实现步骤： + +**Step 1. 引用开发库**： +    本示例引用local本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维WebGL的功能； + +**Step 2. 创建三维地图容器并加载三维球控件**： +    创建 `id='GlobeView'` 的div作为三维视图的容器，并设置其样式，初始化Cesium三维球控件 `Cesium.WebSceneControl()` ，完成此步后可在三维场景中加载三维球控件； + +* Example: + ``` Javascript + //构造三维视图类（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', { + terrainExaggeration: 1, + }); + ``` + +* Example: + ``` html +
+ ``` + +**Step 3. 加载数据**： +    初始化M3D模型层管理类 `CesiumZondy.Layer.M3DLayer` 并调用 `append()` 方法传入M3D数据服务地址，即可加载浏览数据； + +* Example: + ``` Javascript + //构造M3D模型层管理对象 + var m3dLayer = new CesiumZondy.Layer.M3DLayer({ + viewer: webGlobe.viewer + }); + //加载M3D地图文档（服务地址，配置参数） + geobodyLayer = m3dLayer.append('http://develop.smaryun.com:6163/igs/rest/g3d/ZondyModels', {}); + ``` + +**Step 4. 创建交互式绘制区工具**： +    初始化 `Cesium.DrawPolygonTool()` 对象，完成交互式绘制区工具的创建； + +* Example: + ``` Javascript + //创建交互式绘制区工具 + var drawPolygon = new Cesium.DrawPolygonTool(webGlobe.viewer, getDrawResult); + ``` + +**Step 5. 激活交互式绘制区工具**： +    调用 `Cesium.DrawPolygonTool()` 对象的activeTool()方法，激活交互式绘制区工具，完成此步后，可在三维场景中通过鼠标左键点击绘制多边形。 + +* Example: + ``` Javascript + //激活交互式绘制区工具 + drawPolygon.activeTool(); + ``` + +**Step 6. 统一高度**： +    将交互式选取的点的高度统一； + +* Example: + ``` Javascript + var array = new Array(); + for (let i = 0; i < e.points.length; i++) { + let point = e.points[i]; + let resPoint = new Cesium.Cartesian3; + let invserTran = new Cesium.Matrix4; + Cesium.Matrix4.inverse(tileset[0].root.transform, invserTran); + Cesium.Matrix4.multiplyByPoint(invserTran, point, resPoint); + array.push(new Cesium.Cartesian3(resPoint.x, resPoint.y, resPoint.z)); + } + var hight = null; + for (var arraylength = 0; arraylength < array.length; arraylength++) { + hight = hight < array[arraylength].z ? array[arraylength].z : hight; + } + var newArray = new Array(); + for (var arraylength = 0; arraylength < array.length; arraylength++) { + array[arraylength].z = hight; + let point = array[arraylength]; + let resPoint = new Cesium.Cartesian3; + let invserTran = new Cesium.Matrix4; + Cesium.Matrix4.multiplyByPoint(tileset[0].root.transform, point, resPoint); + newArray.push(new Cesium.Cartesian3(resPoint.x, resPoint.y, resPoint.z)); + } + ``` + +**Step 7. 创建洪水淹没分析**： +    初始化高级分析功能管理类 `CesiumZondy.Manager.AdvancedAnalysisManager()` 对象，调用高级分析功能管理类的 `createFlood()` 方法创建洪水淹没分析示例； + +* Example: + ``` Javascript + //初始化高级分析功能管理类 + var advancedAnalysisManager = new CesiumZondy.Manager.AdvancedAnalysisManager({ + viewer: viewer + }); + //初始化洪水淹没分析类 + flood = advancedAnalysisManager.createFlood(); + //设置洪水淹没分析区域点集 + flood.dotsList = newArray; + //设置洪水淹没区域最底高度 + flood.minHeight = Number(document.getElementById('minHeight').value <= 0 ? 0 : document.getElementById('minHeight').value); + //设置洪水淹没区域最高高度 + flood.maxHeight = Number(document.getElementById('maxHeight').value <= 0 ? 30 : document.getElementById('maxHeight').value); + //设置洪水上涨速度 + flood.floodSpeed = Number(document.getElementById('floodSpeed').value <= 0 ? 1 : document.getElementById('floodSpeed').value); + //水纹频率 指波浪的个数 + flood.frequency = Number(document.getElementById('frequency').value <= 0 ? 1000 : document.getElementById('frequency').value); + //水纹速度 + flood.animationSpeed = Number(document.getElementById('animationSpeed').value <= 0 ? 0.01 : document.getElementById('animationSpeed').value); + //水波的高度 + flood.amplitude = Number(document.getElementById('amplitude').value <= 0 ? 10 : document.getElementById('amplitude').value); + //指定水面颜色 和 透明度 + flood.floodColor = new Cesium.Color(0.2, 0.5, 0.4, 0.7); + // 指定光线强度 + flood.specularIntensity = 3.0; + ``` + +**Step 8. 洪水淹没结果显示**： +    将结果显示到三维球控件上。 + +* Example: + ``` Javascript + //添加洪水淹没结果显示 + webGlobe.scene.VisualAnalysisManager.add(flood); + ``` + +### 关键接口 + +#### 1.【三维视图的主要类】 `Cesium.WebSceneControl` + +#### 2.【M3D模型层管理类】 `CesiumZondy.Layer.M3DLayer` + +##### 【method】 `append(url, options)` ：添加M3D地图文档 + +|参数名|类型|说明| +|-|-|-| +|url|String|事件类型 LEFT_CLICK RIGHT_CLICK MOUSE_MOVE LEFT_DOUBLE_CLICK RIGHT_DOUBLE_CLICK WHEEL(鼠标滚轮)| +|options|Object|可选参数| + +* `options` 主要参数 + +|参数名|类型|默认值|说明| +|-|-|-|-| +|autoReset|Boolean|true|(可选)是否自动定位| +|synchronous|Boolean|true|(可选)是否异步请求| +|loaded|function|function|(可选)回调函数| +|proxy|DefaultProxy|defaultProxy|代理| +|showBoundingVolume|Boolean|false|是否显示包围盒| +|maximumScreenSpaceError|Number|16|用于控制模型显示细节| + +#### 3. 【交互式绘制区工具类】 `Cesium.DrawPolygonTool` + +|参数名|类型|说 明| +|-|-|-| +|viewer|View|视图| +|getDrawResult|function|回调函数| + +##### 【method】 `activeTool()` ：激活交互式绘制区工具方法 + +#### 4.【高级分析功能管理类】`CesiumZondy.Manager.AdvancedAnalysisManager` + +##### 【method】 `createFlood(options)`： 创建填挖方实例 + +* `options` 主要参数 + +|参数名|类型|说 明| +|-|-|-| +|minHeight|Number|最低洪水水位高度| +|maxHeight|Number|最高洪水水位高度| +|floodSpeed|Number|洪水上涨速度| diff --git a/website/public/static/demo/military/markdown/analysis/analysis-modelflatten.md b/website/public/static/demo/military/markdown/analysis/analysis-modelflatten.md new file mode 100644 index 000000000..9d5ac0cb2 --- /dev/null +++ b/website/public/static/demo/military/markdown/analysis/analysis-modelflatten.md @@ -0,0 +1,161 @@ +## 模型压平 + +### 示例功能 + +    此功能用于将加载完成的M3D数据进行压平处理。 + +### 示例实现： + +    本示例需要使用【include-cesium-local.js】开发库实现，初始化Cesium三维球控件 `Cesium.WebSceneControl()` ， 初始化M3D模型层管理类 `CesiumZondy.Layer.M3DLayer` 并调用 `append()` 方法加载M3D数据后，添加交互式绘制工具 `Cesium.DrawPolygonTool()` 选择绘制区域, 初始化高级分析功能管理类 `CesiumZondy.Manager.AdvancedAnalysisManager()` 对象，调用高级分析功能管理类的 `createModelFlatten()` 方法，创建模型压平分析，将结果显示到三维球控件上。 + +### 实现步骤： + +**Step 1. 引用开发库**： +    本示例引用local本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维WebGL的功能； + +**Step 2. 创建三维地图容器并加载三维球控件**： +    创建 `id='GlobeView'` 的div作为三维视图的容器，并设置其样式，初始化Cesium三维球控件 `Cesium.WebSceneControl()` ，完成此步后可在三维场景中加载三维球控件； + +* Example: + ``` Javascript + //构造三维视图类（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', { + terrainExaggeration: 1, + }); + ``` + +* Example: + ``` html +
+ ``` + +**Step 3. 加载数据**： +    初始化M3D模型层管理类 `CesiumZondy.Layer.M3DLayer` 并调用 `append()` 方法传入M3D数据服务地址，即可加载浏览数据； + +* Example: + ``` Javascript + //构造M3D模型层管理对象 + var m3dLayer = new CesiumZondy.Layer.M3DLayer({ + viewer: webGlobe.viewer + }); + //加载M3D地图文档（服务地址，配置参数） + landscapeLayer = m3dLayer.append('http://develop.smaryun.com:6163/igs/rest/g3d/ZondyModels', {}); + ``` + +**Step 4. 创建交互式绘制区工具**： +    初始化 `Cesium.DrawPolygonTool()` 对象，完成交互式绘制区工具的创建； + +* Example: + ``` Javascript + //创建交互式绘制区工具 + var drawPolygon = new Cesium.DrawPolygonTool(webGlobe.viewer, getDrawResult); + ``` + +**Step 5. 激活交互式绘制区工具**： +    调用 `Cesium.DrawPolygonTool()` 对象的activeTool()方法，激活交互式绘制区工具，完成此步后，可在三维场景中通过鼠标左键点击绘制多边形。 + +* Example: + ``` Javascript + //激活交互式绘制区工具 + drawPolygon.activeTool(); + ``` + +**Step 6. 顶点处理**： +    将交互式选取的点处理； + +* Example: + ``` Javascript + /*对绘制区域的顶点循环处理一下，以便用于模型压平参数的赋值*/ + var array = []; + for (let i = 0; i < positionsArray.length; i++) { + let point = positionsArray[i]; + let resPoint = new Cesium.Cartesian3; + let invserTran = new Cesium.Matrix4; + Cesium.Matrix4.inverse(tileset[0]._root.transform, invserTran); + Cesium.Matrix4.multiplyByPoint(invserTran, point, resPoint); + resPoint.y = -resPoint.y; + array.push(new Cesium.Cartesian2(resPoint.x, resPoint.y)); + } + array.push(array[0]); + ``` + +**Step 7. 创建模型压平分析**： +    初始化高级分析功能管理类 `CesiumZondy.Manager.AdvancedAnalysisManager()` 对象，调用高级分析功能管理类的 `createModelFlatten()` 方法，创建模型压平分析 + +* Example: + ``` Javascript + //初始化高级分析功能管理类 + var advancedAnalysisManager = new CesiumZondy.Manager.AdvancedAnalysisManager({ + viewer: webGlobe.viewer + }); + advancedAnalysisManager.createModelFlatten(landscapeLayer[0], { + //是否进行压平。值为true时执行压平 + isFlatten: true, + //将高度压到0 + height: 0, + //压平多边形的顶点序列长度 + arrayLength: positionsArray.length, + //顶点序列。顶点序列需要闭合，也就是说，例如一个矩形是四个顶点ABCD，那序列就应该是【ABCDA】 + array: array + }); + ``` + +**Step 8. 结果显示**： +    将结果显示到三维球控件上。 + +* Example: + ``` Javascript + //场景渲染（渲染最新的压平效果） + webGlobe.viewer.scene.requestRender(); + ``` + +### 关键接口 + +#### 1.【三维视图的主要类】 `Cesium.WebSceneControl` + +#### 2.【M3D模型层管理类】 `CesiumZondy.Layer.M3DLayer` + +##### 【method】 `append(url, options)`：添加M3D地图文档 + +|参数名|类型|说明| +|-|-|-| +|url|String|事件类型 LEFT_CLICK RIGHT_CLICK MOUSE_MOVE LEFT_DOUBLE_CLICK RIGHT_DOUBLE_CLICK WHEEL(鼠标滚轮)| +|options|Object|可选参数| + +* `options` 主要参数 + +|参数名|类型|默认值|说明| +|-|-|-|-| +|autoReset|Boolean|true|(可选)是否自动定位| +|synchronous|Boolean|true|(可选)是否异步请求| +|loaded|function|function|(可选)回调函数| +|proxy|DefaultProxy|defaultProxy|代理| +|showBoundingVolume|Boolean|false|是否显示包围盒| +|maximumScreenSpaceError|Number|16|用于控制模型显示细节| + +#### 3. 【交互式绘制区工具类】 `Cesium.DrawPolygonTool` + +|参数名|类型|说 明| +|-|-|-| +|viewer|View|视图| +|getDrawResult|function|回调函数| + +##### 【method】 `activeTool()` ：激活交互式绘制区工具方法 + +#### 4.【高级分析功能管理类】`CesiumZondy.Manager.AdvancedAnalysisManager` + +##### 【method】 `createModelFlatten(tileset, options)` ：创建模型压平分析实例 + +|参数名|类型|说 明| +|-|-|-| +|tileset|object|图层信息| +|options|object|参数设置| + +* `options` 主要参数 + +|参数名|类型|说 明| +|-|-|-| +|isFlatten|Boolean|是否执行模型压平| +|height|Number|压平到指定高度| +|arrayLength|Number|压平区域顶点数组长度| +|array|Array|压平区域顶点数组| \ No newline at end of file diff --git a/website/public/static/demo/military/markdown/analysis/analysis-rollershutters.md b/website/public/static/demo/military/markdown/analysis/analysis-rollershutters.md new file mode 100644 index 000000000..aa9506ede --- /dev/null +++ b/website/public/static/demo/military/markdown/analysis/analysis-rollershutters.md @@ -0,0 +1,153 @@ +## 卷帘分析 + +### 示例功能 + +    此功能对已加载的两个M3D数据进行任意距离的剖切，动态的显示或隐藏一部分数据，一个显示的同时不显示另一个数据，打到卷帘效果。 + +### 示例实现： + +    本示例需要使用【include-cesium-local.js】开发库实现，初始化Cesium三维球控件 `Cesium.WebSceneControl()` ，初始化M3D模型层管理类 `CesiumZondy.Layer.M3DLayer` 并调用 `append()` 方法加载M3D数据后，创建分析功能管理类 `CesiumZondy.Manager.AnalysisManager()` ，调用 `createDynamicCutting()` 方法创建两个M3D数据的切面对象通过设置剖切面距离进行数据剖切分析。 + +### 实现步骤： + +**Step 1. 引用开发库**： +    本示例引用local本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维WebGL的功能； + +**Step 2. 创建三维地图容器并加载三维球控件**： +    创建 `id='GlobeView'` 的div作为三维视图的容器，并设置其样式，初始化Cesium三维球控件 `Cesium.WebSceneControl()` ，完成此步后可在三维场景中加载三维球控件； + +* Example: + ``` Javascript + //构造三维视图类（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', { + terrainExaggeration: 1, + }); + ``` + + * Example: + ``` html +
+ ``` + +**Step 3. 加载数据**： +    初始化M3D模型层管理类 `CesiumZondy.Layer.M3DLayer` 并调用 `append()` 方法传入M3D数据服务地址，即可加载浏览数据； + +* Example: + ``` Javascript + //构造M3D模型层管理对象 + var m3dLayer = new CesiumZondy.Layer.M3DLayer({ + viewer: webGlobe.viewer + }); + var drilllayer = m3dLayer.append( + "http://develop.smaryun.com:6163/igs/rest/g3d/钻孔_2_钻孔模型s", { + autoReset: false, + } + ); + //加载M3D地图文档（服务地址，配置参数） + landscapeLayer = m3dLayer.append('http://develop.smaryun.com:6163/igs/rest/g3d/钻孔分层点_Sur_000_Ent', {}); + ``` + +**Step 4. 地图跳转**： +    调用视图功能管理类 CesiumZondy. Manager. SceneManager() ` 的 ` flyToEx()` 方法跳转到数据显示的范围； + +* Example: + ``` Javascript + //初始化视图功能管理类 + var sceneManager = new CesiumZondy.Manager.SceneManager({ + viewer: webGlobe.viewer + }); + //视点跳转 + sceneManager.flyToEx(112.94845170512113, 30.004246325952618, { + height: 2600, + heading: 67, + pitch: -30, + roll: 0 + }); + ``` + +**Step 5. 创建切面对象**： +    创建切面对象 `Cesium.ClippingPlane()` ; + +* Example: + ``` Javascript + //进行剖切分析的面，向右切 + var plane = new Cesium.ClippingPlane(new Cesium.Cartesian3(1, 0, 0), -200.0) + //进行剖切分析的面，向左切 + var plane1 = new Cesium.ClippingPlane(new Cesium.Cartesian3(-1, 0, 0), -200.0) + ``` + +**Step 6. 创建剖切对象**： +    创建分析功能管理类 `CesiumZondy.Manager.AnalysisManager()` ，调用 `createDynamicCutting()` 方法创建剖切对象实例, 并获取剖切切面； + +* Example: + ``` Javascript + //初始化分析功能管理类 + var analysisManager = new CesiumZondy.Manager.AnalysisManager({ + viewer: webGlobe.viewer + }); + //创建剖切对象实例 + dynaCut = analysisManager.createDynamicCutting(landscapeLayer, [plane], { + color: new Cesium.Color(0.0, 1.0, 1.0, 0.3) + }); + ``` + +**Step 7. 通过切面回调完成动态剖切分析**： +    通过设置切面回调函数，动态设置剖切面距离完成动态剖切分析。 + +* Example: + ``` Javascript + //设置切面回调函数 + planetEntity.plane.plane = new Cesium.CallbackProperty(function(date) { + //设置剖切面距离 + plane.distance = distance; + return Cesium.Plane.transform(plane, tileset[0].modelMatrix, new Cesium.ClippingPlane(Cesium.Cartesian3.UNIT_X, 0.0)); + }, false); + //设置切面回调函数 + planetEntity1.plane.plane = new Cesium.CallbackProperty(function(date) { + //设置剖切面距离 + plane1.distance = distance1; + return Cesium.Plane.transform(plane1, tileset[0].modelMatrix, new Cesium.ClippingPlane(Cesium.Cartesian3.UNIT_X, 0.0)); + }, false); + ``` + +### 关键接口 + +#### 1.【三维视图的主要类】 `Cesium.WebSceneControl` + +#### 2.【M3D模型层管理类】 `CesiumZondy.Layer.M3DLayer` + +##### 【method】 `append(url, options)`：添加M3D地图文档 + +|参数名|类型|说明| +|-|-|-| +|url|String|事件类型 LEFT_CLICK RIGHT_CLICK MOUSE_MOVE LEFT_DOUBLE_CLICK RIGHT_DOUBLE_CLICK WHEEL(鼠标滚轮)| +|options|Object|可选参数| + +* `options` 主要参数 + +|参数名|类型|默认值|说明| +|-|-|-|-| +|autoReset|Boolean|true|(可选)是否自动定位| +|synchronous|Boolean|true|(可选)是否异步请求| +|loaded|function|function|(可选)回调函数| +|proxy|DefaultProxy|defaultProxy|代理| +|showBoundingVolume|Boolean|false|是否显示包围盒| +|maximumScreenSpaceError|Number|16|用于控制模型显示细节| + +#### 3. 【裁剪平面类】 `Cesium.ClippingPlane` + +|参数名|类型|说 明| +|-|-|-| +|normal|Cartesian3|法线| +|distance|Number|最短距离| + +#### 4.【分析功能管理类】 `CesiumZondy.Manager.AnalysisManager` + +##### 【method】 `createDynamicCutting(tileSets, planes, options)` ：创建动态剖切实例 + +|参数名|类型|说明| +|-|-|-| +|tileSets|Object|图层集| +|planes|Object|平面集| +|options|Object|暂无| + diff --git a/website/public/static/demo/military/markdown/analysis/analysis-sceneprojection.md b/website/public/static/demo/military/markdown/analysis/analysis-sceneprojection.md new file mode 100644 index 000000000..d78897174 --- /dev/null +++ b/website/public/static/demo/military/markdown/analysis/analysis-sceneprojection.md @@ -0,0 +1,125 @@ +## 场景投放 + +### 示例功能 + +    此功能用于在三维场景中加载色块、图片、视屏等功能。 + +### 示例实现： + +    本示例需要使用【include-cesium-local.js】开发库实现，初始化Cesium三维球控件 `Cesium.WebSceneControl()` ，初始化M3D模型层管理类 `CesiumZondy.Layer.M3DLayer` 并调用 `append()` 方法加载M3D数据后，通过Cesium三维球控件 `Cesium.WebSceneControl()` 对象的 `registerMouseEvent()` 方法在三维场景里面自定义注册鼠标事件完成场景投放点的拾取，初始化高级分析功能管理类 `CesiumZondy.Manager.AdvancedAnalysisManager()` 对象，调用高级分析功能管理类的 `createSceneProjector` 方法创建场景投放示例，实现场景投影分析。 + +### 实现步骤： + +**Step 1. 引用开发库**： +    本示例引用local本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维WebGL的功能； + +**Step 2. 创建三维地图容器并加载三维球控件**： +    创建 `id='GlobeView'` 的div作为三维视图的容器，并设置其样式，初始化Cesium三维球控件 `Cesium.WebSceneControl()` ，完成此步后可在三维场景中加载三维球控件； + +* Example: + ``` Javascript + //构造三维视图类（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', { + terrainExaggeration: 1, + }); + ``` + +* Example: + ``` html +
+ ``` + +**Step 3. 加载数据**： +    初始化M3D模型层管理类 `CesiumZondy.Layer.M3DLayer` 并调用 `append()` 方法传入M3D数据服务地址，即可加载浏览数据； + +* Example: + ``` Javascript + //构造M3D模型层管理对象 + var m3dLayer = new CesiumZondy.Layer.M3DLayer({ + viewer: webGlobe.viewer + }); + //加载M3D地图文档（服务地址，配置参数） + landscapeLayer = m3dLayer.append('http://develop.smaryun.com:6163/igs/rest/g3d/ZondyModels', {}); + ``` + +**Step 4. 创建场景投影对象**： +    初始化高级分析功能管理类 `CesiumZondy.Manager.AdvancedAnalysisManager()` 对象，调用高级分析功能管理类的 `createSceneProjector` 方法创建场景投放示例; + +* Example: + ``` Javascript + //初始化高级分析功能管理类 + var advancedAnalysisManager = new CesiumZondy.Manager.AdvancedAnalysisManager({ + viewer: viewer + }); + //初始化场景投影对象 + scenePro = advancedAnalysisManager.createSceneProjector(2); + ``` + +**Step 5. 注册鼠标事件**： +    调用Cesium三维球控件 `Cesium.WebSceneControl()` 的 `registerMouseEvent()` 方法注册鼠标事件, 以下事例中的匿名函数为触发鼠标事件后执行的方法，完成此步后，在三维场景中点击鼠标左键可触发点击事件，点击完成后进入匿名函数； + +* Example: + ``` Javascript + //注册事件 + webGlobe.registerMouseEvent('LEFT_CLICK', function(e) {}); + webGlobe.registerMouseEvent('RIGHT_CLICK', function(e) {}); + ``` + +**Step 6. 设置场景投影参数**： +    给场景投影对象设置进行场景投影使用的必要参数。 + +* Example: + ``` Javascript + //设置投影观察点 + scenePro.viewPosition = cartesian; + //数据url路径 + scenePro.textureSource = './static/data/picture/world.jpg'; + //设置场景投影结果点 + scenePro.targetPosition = cartesian; + ``` + +### 关键接口 + +#### 1.【三维视图的主要类】 `Cesium.WebSceneControl` + +##### 【method】 `registerMouseEvent(eventType, callbackFun, handler)`：注册鼠标事件方法 + +|参数名|类型|说明| +|-|-|-| +|eventType|String|事件类型 LEFT_CLICK RIGHT_CLICK MOUSE_MOVE LEFT_DOUBLE_CLICK RIGHT_DOUBLE_CLICK WHEEL(鼠标滚轮)| +|callbackFun|function|回调函数| +|handler|Object|回调函数| + +##### 【method】 `unRegisterMouseEvent(eventType)`：注销鼠标事件方法 + +|参数名|类型|说明| +|-|-|-| +|eventType|String|事件类型 LEFT_CLICK RIGHT_CLICK MOUSE_MOVE LEFT_DOUBLE_CLICK RIGHT_DOUBLE_CLICK WHEEL(鼠标滚轮)| + +#### 2.【M3D模型层管理类】 `CesiumZondy.Layer.M3DLayer` + +##### 【method】 `append(url, options)`：添加M3D地图文档 + +|参数名|类型|说明| +|-|-|-| +|url|String|事件类型 LEFT_CLICK RIGHT_CLICK MOUSE_MOVE LEFT_DOUBLE_CLICK RIGHT_DOUBLE_CLICK WHEEL(鼠标滚轮)| +|options|Object|可选参数| + +* `options` 主要参数 + +|参数名|类型|默认值|说明| +|-|-|-|-| +|autoReset|Boolean|true|(可选)是否自动定位| +|synchronous|Boolean|true|(可选)是否异步请求| +|loaded|function|function|(可选)回调函数| +|proxy|DefaultProxy|defaultProxy|代理| +|showBoundingVolume|Boolean|false|是否显示包围盒| +|maximumScreenSpaceError|Number|16|用于控制模型显示细节| + +#### 3.【高级分析功能管理类】`CesiumZondy.Manager.AdvancedAnalysisManager` + +##### 【method】 `createSceneProjector(type) `：创建场景投放实例 + +|参数名|类型|说明| +|-|-|-| +|type|Number|场景投放的类型| diff --git a/website/public/static/demo/military/markdown/analysis/analysis-skyline.md b/website/public/static/demo/military/markdown/analysis/analysis-skyline.md new file mode 100644 index 000000000..37554c534 --- /dev/null +++ b/website/public/static/demo/military/markdown/analysis/analysis-skyline.md @@ -0,0 +1,85 @@ +## 天际线 + +### 示例功能 + +    此功能用于检测当前视角的天际线，并绘制在三维场景中。 + +### 示例实现： + +    本示例需要使用【include-cesium-local.js】开发库实现，初始化 Cesium 三维球控件 `Cesium.WebSceneControl()` ，初始化 M3D 模型层管理类 `CesiumZondy.Layer.M3DLayer` 并调用 `append()` 方法加载 M3D 数据后，初始化高级分析功能管理类 `CesiumZondy.Manager.AdvancedAnalysisManager()` 对象，调用高级分析功能管理类的 `createSkyLine()` 方法创建天际线分析。 + +### 实现步骤： + +**Step 1. 引用开发库**： +    本示例引用 local 本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维 WebGL 的功能； + +**Step 2. 创建三维地图容器并加载三维球控件**： +    创建 `id='GlobeView'` 的 div 作为三维视图的容器，并设置其样式，初始化 Cesium 三维球控件 `Cesium.WebSceneControl()` ，完成此步后可在三维场景中加载三维球控件； + +- Example: + + ```Javascript + //构造三维视图类（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', { + terrainExaggeration: 1, + }); + ``` + +- Example: + ```html +
+ ``` + +**Step 3. 加载数据**： +    初始化 M3D 模型层管理类 `CesiumZondy.Layer.M3DLayer` 并调用 `append()` 方法传入 M3D 数据服务地址，即可加载浏览数据； + +- Example: + ```Javascript + //构造M3D模型层管理对象 + var m3dLayer = new CesiumZondy.Layer.M3DLayer({ + viewer: webGlobe.viewer + }); + //加载M3D地图文档（服务地址，配置参数） + landscapeLayer = m3dLayer.append('http://develop.smaryun.com:6163/igs/rest/g3d/ZondyModels', {}); + ``` + +**Step 4. 创建天际线分析**： +    初始化高级分析功能管理类 `CesiumZondy.Manager.AdvancedAnalysisManager()` 对象，调用高级分析功能管理类的 `createSkyLine()` 方法创建天际线分析。 + +- Example: + ```Javascript + //初始化高级分析功能管理类 + var advancedAnalysisManager = new CesiumZondy.Manager.AdvancedAnalysisManager({ + viewer: webGlobe.viewer + }); + //创建天际线实例 + skyLineAn = advancedAnalysisManager.createSkyLine() + ``` + +### 关键接口 + +#### 1.【三维视图的主要类】 `Cesium.WebSceneControl` + +#### 2.【M3D 模型层管理类】 `CesiumZondy.Layer.M3DLayer` + +##### 【method】 `append(url, options)` ：添加 M3D 地图文档 + +| 参数名 | 类型 | 说明 | +| ------- | ------ | ----------------------------------------------------------------------------------------------- | +| url | String | 事件类型 LEFT_CLICK RIGHT_CLICK MOUSE_MOVE LEFT_DOUBLE_CLICK RIGHT_DOUBLE_CLICK WHEEL(鼠标滚轮) | +| options | Object | 可选参数 | + +- `options` 主要参数 + +| 参数名 | 类型 | 默认值 | 说明 | +| ----------------------- | ------------ | ------------ | -------------------- | +| autoReset | Boolean | true | (可选)是否自动定位 | +| synchronous | Boolean | true | (可选)是否异步请求 | +| loaded | function | function | (可选)回调函数 | +| proxy | DefaultProxy | defaultProxy | 代理 | +| showBoundingVolume | Boolean | false | 是否显示包围盒 | +| maximumScreenSpaceError | Number | 16 | 用于控制模型显示细节 | + +#### 3.【高级分析功能管理类】`CesiumZondy.Manager.AdvancedAnalysisManager` + +##### 【method】 `createSkyLine()` ：创建天际线实例 diff --git a/website/public/static/demo/military/markdown/analysis/analysis-slopeAnalysis.md b/website/public/static/demo/military/markdown/analysis/analysis-slopeAnalysis.md new file mode 100644 index 000000000..3af23ea97 --- /dev/null +++ b/website/public/static/demo/military/markdown/analysis/analysis-slopeAnalysis.md @@ -0,0 +1,99 @@ +## 坡度分析 + +### 示例功能 + +    此功能用于地形数据的坡度分析。 坡度是指过地表一点的切平面与水平面的夹角，描述地表面在该点的倾斜程度。坡度分析的作用是：影响地表物质流动与能量转换的规模与强度，制约生产力空间布局。 + +### 示例实现： + +    本示例需要使用【include-cesium-local.js】开发库实现，初始化 Cesium 三维球控件 `Cesium.WebSceneControl()` ，初始化地形图层管理类 `CesiumZondy.Layer.TerrainLayer` 并调用 `append()` 方法加载地形数据后，跳转视点，创建高级分析功能管理类 `CesiumZondy.Manager.AdvancedAnalysisManager()` ，调用 `createSlopeAnalysis()` 方法进行坡度分析。 + +### 实现步骤： + +**Step 1. 引用开发库**： +    本示例引用 local 本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维 WebGL 的功能； + +**Step 2. 创建三维地图容器并加载三维球控件**： +    创建 `id='GlobeView'` 的 div 作为三维视图的容器，并设置其样式，初始化 Cesium 三维球控件 `Cesium.WebSceneControl()` ，完成此步后可在三维场景中加载三维球控件； + +- Example: + + ```Javascript + //构造三维视图类（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', { + terrainExaggeration: 1, + }); + ``` + +- Example: + ```html +
+ ``` + +**Step 3. 加载数据**： +    初始化地形图层管理类 `CesiumZondy.Layer.TerrainLayer` 并调用 `append()` 方法传入三维地形数据地图服务地址，即可加载浏览数据； + +- Example: + ```Javascript + //构造地形图层管理类 + var terrain = new CesiumZondy.Layer.TerrainLayer({ + viewer: webGlobe.viewer + }); + //加载三维地形地图文档（服务地址，配置参数） + var { protocol, ip, port } = window.webclient; + var terrainlayer = terrain.append(`http://develop.smaryun.com:6163/igs/rest/g3d/terrain`, {}); + //初始化视图功能管理类 + var sceneManager = new CesiumZondy.Manager.SceneManager({ + viewer: webGlobe.viewer + }); + ``` + +**Step 4. 坡度分析**： +    创建高级分析功能管理类 `CesiumZondy.Manager.AdvancedAnalysisManager()` ，调用 `createSlopeAnalysis()` 方法进行坡度分析。 + +- Example: + ```Javascript + //初始化高级分析功能管理类 + var advancedAnalysisManager = new CesiumZondy.Manager.AdvancedAnalysisManager({ + viewer: webGlobe.viewer + }); + webGlobe.viewer.scene.globe.depthTestAgainstTerrain = true; + //进行坡度分析 + var slopeAna = advancedAnalysisManager.createSlopeAnalysis([ + Cesium.Color.ALICEBLUE, + Cesium.Color.ANTIQUEWHITE, + Cesium.Color.AQUA, + Cesium.Color.AQUAMARINE, + Cesium.Color.AZURE, + Cesium.Color.BEIGE + ]); + ``` + +### 关键接口 + +#### 1.【三维视图的主要类】 `Cesium.WebSceneControl` + +#### 2.【地形图层管理类】`CesiumZondy.Layer.TerrainLayer` + +##### 【method】 `append(url, options)` ：添加地形地图文档 + +| 参数名 | 类型 | 说明 | +| ------- | ------ | ----------------------------------------------------------------------------------------------- | +| url | String | 事件类型 LEFT_CLICK RIGHT_CLICK MOUSE_MOVE LEFT_DOUBLE_CLICK RIGHT_DOUBLE_CLICK WHEEL(鼠标滚轮) | +| options | Object | 可选参数 | + +- `options` 主要参数 + +| 参数名 | 类型 | 默认值 | 说明 | +| ----------- | ------------ | -------- | ------------------ | +| synchronous | Boolean | true | (可选)是否异步请求 | +| loaded | function | function | (可选)回调函数 | +| 代理 | DefaultProxy | 暂无 | 暂无 | + +#### 3.【高级分析功能管理类】`CesiumZondy.Manager.AdvancedAnalysisManager` + +##### 【method】 `createSlopeAnalysis(color) → {Object}`： 坡度分析，返回坡度分析实例 + +| 参数名 | 类型 | 说 明 | +| ------ | ------------- | ------------------------- | +| color | Array. | 坡度分层颜色信息，分 6 层 | diff --git a/website/public/static/demo/military/markdown/analysis/analysis-visibility.md b/website/public/static/demo/military/markdown/analysis/analysis-visibility.md new file mode 100644 index 000000000..45cdf8ce3 --- /dev/null +++ b/website/public/static/demo/military/markdown/analysis/analysis-visibility.md @@ -0,0 +1,116 @@ +## 通视分析 + +### 示例功能 + +    此功能用于检测当前三维场景中两点之间是否可以没有阻碍的看到。 + +### 示例实现： + +    本示例需要使用【include-cesium-local.js】开发库实现，通过 Cesium 三维球控件 `Cesium.WebSceneControl()` 的 `append()` 加载 M3D 数据后，通过 Cesium 三维球控件 `Cesium.WebSceneControl()` 对象的 `registerMouseEvent()` 方法在三维场景里面自定义注册鼠标事件完成通视分析两个点的拾取，通过两点通视分析对象 `Cesium.VisiblityAnalysis()`实现两点通视分析。 + +### 实现步骤： + +**Step 1. 引用开发库**： +    本示例引用 local 本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维 WebGL 的功能； + +**Step 2. 创建三维地图容器并加载三维球控件**： +    创建 `id='GlobeView'` 的 div 作为三维视图的容器，并设置其样式，初始化 Cesium 三维球控件 `Cesium.WebSceneControl()` ，完成此步后可在三维场景中加载三维球控件； + +- Example: + + ```Javascript + //构造三维视图类（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', { + terrainExaggeration: 1, + }); + ``` + +- Example: + ```html +
+ ``` + +**Step 3. 加载数据**： +    调用 Cesium 三维球控件 `Cesium.WebSceneControl()` 的 `append()` 方法传入 M3D 数据服务地址，即可加载浏览数据； + +- Example: + ```Javascript + //加载数据 + var tileset = webGlobe.append('http://develop.smaryun.com:6163/igs/rest/g3d/M3D', {}); + ``` + +**Step 4. 创建通视分析**： +    初始化两点通视分析对象 `Cesium.VisiblityAnalysis()` ; + +- Example: + ```Javascript + //初始化通视分析类 + visiblity = new Cesium.VisiblityAnalysis(); + ``` + +**Step 5. 添加通视分析**： +    将两点通视分析对象 `Cesium.VisiblityAnalysis()` 添加到 Cesium 三维球控件中; + +- Example: + ```Javascript + //添加通视分析显示 + viewer.scene.VisualAnalysisManager.add(visiblity); + ``` + +**Step 6. 注册鼠标事件**： +    调用 Cesium 三维球控件 `Cesium.WebSceneControl()` 的 `registerMouseEvent()` 方法注册鼠标事件, 以下事例中的匿名函数为触发鼠标事件后执行的方法，完成此步后，在三维场景中点击鼠标左键可触发点击事件，点击完成后进入匿名函数； + +- Example: + ```Javascript + //注册事件 + webGlobe.registerMouseEvent('LEFT_CLICK', function(e) {}); + webGlobe.registerMouseEvent('RIGHT_CLICK', function(e) {}); + webGlobe.registerMouseEvent('MOUSE_MOVE', function(e) {}); + ``` + +**Step 7. 设置两点通视分析参数**： +    给两点通视分析对象设置进行两点通视分析使用的必要参数。 + +- Example: + ```Javascript + //设置通视分析观察点 + visiblity.viewPosition = cartesian; + //设置通视分析结果点 + visiblity.targetPosition = cartesian; + ``` + +### 关键接口 + +#### 1. 【三维视图的主要类】`Cesium.WebSceneControl(elementId, options)` + +##### 【method】 `append(url, options, 代理)` ：添加地图文档 + +| 参数名 | 类型 | 说明 | +| ------- | ------------ | ----------------------------------------------------------------------------------------------- | +| url | String | 事件类型 LEFT_CLICK RIGHT_CLICK MOUSE_MOVE LEFT_DOUBLE_CLICK RIGHT_DOUBLE_CLICK WHEEL(鼠标滚轮) | +| options | Object | 可选参数 | +| 代理 | DefaultProxy | 暂无 | + +- `options` 主要参数 + +| 参数名 | 类型 | 默认值 | 说明 | +| ----------- | -------- | -------- | ------------------ | +| autoReset | Boolean | true | (可选)是否自动定位 | +| synchronous | Boolean | true | (可选)是否异步请求 | +| loaded | function | function | (可选)回调函数 | + +##### 【method】 `registerMouseEvent(eventType, callbackFun, handler)` ：注册鼠标事件方法 + +| 参数名 | 类型 | 说明 | +| ----------- | -------- | ----------------------------------------------------------------------------------------------- | +| eventType | String | 事件类型 LEFT_CLICK RIGHT_CLICK MOUSE_MOVE LEFT_DOUBLE_CLICK RIGHT_DOUBLE_CLICK WHEEL(鼠标滚轮) | +| callbackFun | function | 回调函数 | +| handler | Object | 回调函数 | + +##### 【method】 `unRegisterMouseEvent(eventType)` ：注销鼠标事件方法 + +| 参数名 | 类型 | 说明 | +| --------- | ------ | ----------------------------------------------------------------------------------------------- | +| eventType | String | 事件类型 LEFT_CLICK RIGHT_CLICK MOUSE_MOVE LEFT_DOUBLE_CLICK RIGHT_DOUBLE_CLICK WHEEL(鼠标滚轮) | + +#### 2.【两点通视分析主要类】 `Cesium.VisiblityAnalysis()` diff --git a/website/public/static/demo/military/markdown/analysis/analysis-visiblerange.md b/website/public/static/demo/military/markdown/analysis/analysis-visiblerange.md new file mode 100644 index 000000000..d676b7f70 --- /dev/null +++ b/website/public/static/demo/military/markdown/analysis/analysis-visiblerange.md @@ -0,0 +1,130 @@ +## 可视分析 + +### 示例功能 + +    此功能用于检测当前三维场景中某个点朝一个方向看的时候可以看到的区域。 + +### 示例实现： + +    本示例需要使用【include-cesium-local.js】开发库实现，初始化 Cesium 三维球控件 `Cesium.WebSceneControl()` ，初始化 M3D 模型层管理类 `CesiumZondy.Layer.M3DLayer` 并调用 `append()` 方法加载 M3D 数据后，通过 Cesium 三维球控件 `Cesium.WebSceneControl()` 对象的 `registerMouseEvent()` 方法在三维场景里面自定义注册鼠标事件完成可视域分析点的拾取，初始化高级分析功能管理类 `CesiumZondy.Manager.AdvancedAnalysisManager()` 对象，调用高级分析功能管理类的 `createViewshedAnalysis()` 方法实现可视域分析。 + +### 实现步骤： + +**Step 1. 引用开发库**： +    本示例引用 local 本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维 WebGL 的功能； + +**Step 2. 创建三维地图容器并加载三维球控件**： +    创建 `id='GlobeView'` 的 div 作为三维视图的容器，并设置其样式，初始化 Cesium 三维球控件 `Cesium.WebSceneControl()` ，完成此步后可在三维场景中加载三维球控件； + +- Example: + + ```Javascript + //构造三维视图类（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', { + terrainExaggeration: 1, + }); + ``` + +- Example: + ```html +
+ ``` + +**Step 3. 加载数据**： +    初始化 M3D 模型层管理类 `CesiumZondy.Layer.M3DLayer` 并调用 `append()` 方法传入 M3D 数据服务地址，即可加载浏览数据； + +- Example: + ```Javascript + //构造M3D模型层管理对象 + var m3dLayer = new CesiumZondy.Layer.M3DLayer({ + viewer: webGlobe.viewer + }); + //加载M3D地图文档（服务地址，配置参数） + landscapeLayer = m3dLayer.append('http://develop.smaryun.com:6163/igs/rest/g3d/ZondyModels', {}); + ``` + +**Step 4. 创建可视域分析**： +    初始化高级分析功能管理类 `CesiumZondy.Manager.AdvancedAnalysisManager()` 对象，调用高级分析功能管理类的 `createViewshedAnalysis()` 方法实现可视域分析; + +- Example: + ```Javascript + //初始化高级分析功能管理类 + var advancedAnalysisManager = new CesiumZondy.Manager.AdvancedAnalysisManager({ + viewer: viewer + }); + //创建可视化分析对象 + viewshed3d = advancedAnalysisManager.createViewshedAnalysis(); + ``` + +**Step 5. 注册鼠标事件**： +    调用 Cesium 三维球控件 `Cesium.WebSceneControl()` 的 `registerMouseEvent()` 方法注册鼠标事件, 以下事例中的匿名函数为触发鼠标事件后执行的方法，完成此步后，在三维场景中点击鼠标左键可触发点击事件，点击完成后进入匿名函数； + +- Example: + ```Javascript + //注册事件 + webGlobe.registerMouseEvent('LEFT_CLICK', function(e) {}); + webGlobe.registerMouseEvent('RIGHT_CLICK', function(e) {}); + webGlobe.registerMouseEvent('MOUSE_MOVE', function(e) {}); + ``` + +**Step 6. 设置可视域分析参数**： +    给可视域分析对象设置进行可视域分析使用的必要参数； + +- Example: + ```Javascript + //设置观察点坐标 + viewshed3d.viewPosition = cartesian; + //设置可视域结果点 + viewshed3d.targetPosition = cartesian; + ``` + +**Step 7. 添加可视域分析**： +    将可视域分析对象 `Cesium.ViewshedAnalysis()` 添加到 Cesium 三维球控件中。 + +- Example: + ```Javascript + //添加可视域分析结果显示 + viewer.scene.VisualAnalysisManager.add(viewshed3d); + ``` + +### 关键接口 + +#### 1.【三维视图的主要类】 `Cesium.WebSceneControl` + +##### 【method】 `registerMouseEvent(eventType, callbackFun, handler)` ：注册鼠标事件方法 + +| 参数名 | 类型 | 说明 | +| ----------- | -------- | ----------------------------------------------------------------------------------------------- | +| eventType | String | 事件类型 LEFT_CLICK RIGHT_CLICK MOUSE_MOVE LEFT_DOUBLE_CLICK RIGHT_DOUBLE_CLICK WHEEL(鼠标滚轮) | +| callbackFun | function | 回调函数 | +| handler | Object | 回调函数 | + +##### 【method】 `unRegisterMouseEvent(eventType)` ：注销鼠标事件方法 + +| 参数名 | 类型 | 说明 | +| --------- | ------ | ----------------------------------------------------------------------------------------------- | +| eventType | String | 事件类型 LEFT_CLICK RIGHT_CLICK MOUSE_MOVE LEFT_DOUBLE_CLICK RIGHT_DOUBLE_CLICK WHEEL(鼠标滚轮) | + +#### 2.【M3D 模型层管理类】 `CesiumZondy.Layer.M3DLayer` + +##### 【method】 `append(url, options)` ：添加 M3D 地图文档 + +| 参数名 | 类型 | 说明 | +| ------- | ------ | ----------------------------------------------------------------------------------------------- | +| url | String | 事件类型 LEFT_CLICK RIGHT_CLICK MOUSE_MOVE LEFT_DOUBLE_CLICK RIGHT_DOUBLE_CLICK WHEEL(鼠标滚轮) | +| options | Object | 可选参数 | + +- `options` 主要参数 + +| 参数名 | 类型 | 默认值 | 说明 | +| ----------------------- | ------------ | ------------ | -------------------- | +| autoReset | Boolean | true | (可选)是否自动定位 | +| synchronous | Boolean | true | (可选)是否异步请求 | +| loaded | function | function | (可选)回调函数 | +| proxy | DefaultProxy | defaultProxy | 代理 | +| showBoundingVolume | Boolean | false | 是否显示包围盒 | +| maximumScreenSpaceError | Number | 16 | 用于控制模型显示细节 | + +#### 3.【高级分析功能管理类】`CesiumZondy.Manager.AdvancedAnalysisManager` + +##### 【method】 `createViewshedAnalysis()` ：创建可视域实例 diff --git a/website/public/static/demo/military/markdown/clientAnalysis/clientAnalysis-along.md b/website/public/static/demo/military/markdown/clientAnalysis/clientAnalysis-along.md new file mode 100644 index 000000000..f1716d225 --- /dev/null +++ b/website/public/static/demo/military/markdown/clientAnalysis/clientAnalysis-along.md @@ -0,0 +1,163 @@ +## 线插值操作 Along + +### 示例功能 + +    本示例用于线插值，线插值操作是通过 `计算起点-终点长度` , 然后再根据长度等分计算需要插值的点, 最后再把这些点插入到原始数据中. + +### 示例实现： + +    本示例需要使用【include-cesium-local.js】开发库实现，过 Cesium 三维球控件 `Cesium.WebSceneControl()` 加载三维场景控件后根据已有的线计算插值点形成新的线数据，添加线显示完成此功能。 + +#### Turf.js + +> turf 是 JavaScript 编写的模块化地理空间引擎，具体使用请查看turf 官方教程和下载 + +#### GeoJSON.js + +> 地理数据转换成GeoJSON格式，GeoJSON.js 官方地址 + +### 实现步骤： + +**Step 1. 引用开发库**： +    本示例引用 local 本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维 WebGL 的功能； + +**Step 2. 创建三维地图容器并加载三维球控件**： +    创建 `id='GlobeView'` 的 div 作为三维视图的容器，并设置其样式，初始化 Cesium 三维球控件 `Cesium.WebSceneControl()` ，完成此步后可在三维场景中加载三维球控件； + +- Example: + + ```Javascript + //构造三维视图类（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', { + terrainExaggeration: 1, + }); + ``` + +- Example: + ```html +
+ ``` + +**Step 3. 计算线长度**： +    通过 `turf` 对象的 `distance()` 方法计算线长度； + +- Example: + ```Javascript + //计算距离 + var lineDistance = turf.distance(origin, destination, { + units: 'kilometers' + }); + ``` + +**Step 4. 等分线长度**： +    将线长度平均分； + +- Example: + ```Javascript + //将均分线插值 + for (var i = 0; i < lineDistance; i += clip) { + //计算对应第i个插值点的位置 + var segment = turf.along(route.features[0], i, { + units: 'kilometers' + }); + //将插值点加入到原始数据中 + arc.push(segment.geometry.coordinates); + } + ``` + +**Step 5. 显示结果**： +    将插完值的线显示出来。 + +- Example: + ```Javascript + //更新视图函数 + function updateView() { + //添加路线显示 + var routedatasource = map.dataSources.add(Cesium.GeoJsonDataSource.load(route, { + //线颜色 + stroke: Cesium.Color.GRAY, + //填充色 + fill: Cesium.Color.GRAY, + //线宽 + strokeWidth: 5 + })); + //添加简单线显示 + var simpledatasource = map.dataSources.add(Cesium.GeoJsonDataSource.load(simpleLine, { + //线颜色 + stroke: Cesium.Color.RED, + //填充色 + fill: Cesium.Color.RED, + //线宽 + strokeWidth: 5 + })); + //跳转至路线 + map.flyTo(routedatasource); + } + ``` + +### 关键接口 + +#### 1.【客户端空间分析库】`Turf` + +##### 【method】`turf.distance(from,to,options)`：量算距离 + +    计算两点之间的距离，以度、弧度、英里或公里为单位。 + +| 参数 | 类型 | 说明 | +| ------- | ------------------------------------------------------------------------------------- | ---------------------------- | +| from | Coord | 起点 | +| to | Coord | 终点 | +| options | Object | 其他参数，请看下面的单位参数 | + +- `options`参数属性说明 + +| 名称 | 类型 | 描述 | +| ----- | ------ | ------------ | +| units | string | "kilometers" | 可以是 `degrees` 度, `radians` 弧度, `miles` 英里, or `kilometers` 千米 | + +- `distance()`返回值 + +> number - 两点之间的距离 + +- Example: + + ```javascript + var from = turf.point([-75.343, 39.984]) + var to = turf.point([-75.534, 39.123]) + var options = { units: 'miles' } + var distance = turf.distance(from, to, options) + ``` + +##### 【method】`turf.along(line,distance,options)`：线插值 + +    线插值，接收一个线要素，并沿线返回指定距离处的点。 + +| 参数 | 类型 | 描述 | +| -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | +| line | Feature<LineString> | 原始线段，至少要有 2 个点 | +| distance | number | 距离起点的插入距离 | +| options | Object | 其他参数，请看下面的单位参数 | + +- `options`参数属性说明 + +| 名称 | 类型 | 默认值 | 描述 | +| ----- | ------ | ------------ | ------------------------------------------------------------------ | +| units | string | "kilometers" | 可以是`degrees`度, `radians`弧度, `miles`英里, or `kilometers`千米 | + +> Feature 指得是 GeoJSON 格式的要素集合，因此请重点复习`GeoJSON专题`，`GeoJSON.parse`方法在后面的场景中将会反复出现，请熟练掌握其用法 + +- `along()`返回值 + +> Feature<Point > - Point 距离起点长度为 distance 的点 + +- Example: + + ```javascript + var line = turf.lineString([ + [-83, 30], + [-84, 36], + [-78, 41], + ]) + var options = { units: 'miles' } + var along = turf.along(line, 200, options) + ``` diff --git a/website/public/static/demo/military/markdown/clientAnalysis/clientAnalysis-bezierspline.md b/website/public/static/demo/military/markdown/clientAnalysis/clientAnalysis-bezierspline.md new file mode 100644 index 000000000..09dc33185 --- /dev/null +++ b/website/public/static/demo/military/markdown/clientAnalysis/clientAnalysis-bezierspline.md @@ -0,0 +1,92 @@ +## 贝塞尔曲线 bezierspline + +### 示例功能 + +    本示例用于针对给定的线生成对应的贝塞尔曲线。 + +### 示例实现： + +    本示例需要使用【include-cesium-local.js】开发库实现，过 Cesium 三维球控件 `Cesium.WebSceneControl()` 加载三维场景控件后使用 `Turf.js` 空间分析库的 `bezierSpline()` 方法对指定线进行贝塞尔曲线分析。 + +#### Turf.js + +> turf 是 JavaScript 编写的模块化地理空间引擎，具体使用请查看turf 官方教程和下载 + +#### GeoJSON.js + +> 地理数据转换成GeoJSON格式，GeoJSON.js 官方地址 + +### 实现步骤： + +**Step 1. 引用开发库**： +    本示例引用 local 本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维 WebGL 的功能； + +**Step 2. 创建三维地图容器并加载三维球控件**： +    创建 `id='GlobeView'` 的 div 作为三维视图的容器，并设置其样式，初始化 Cesium 三维球控件 `Cesium.WebSceneControl()` ，完成此步后可在三维场景中加载三维球控件； + +- Example: + + ```Javascript + //构造三维视图类（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', { + terrainExaggeration: 1, + }); + ``` + +- Example: + ```html +
+ ``` + +**Step 3. 执行贝塞尔曲线分析**： +    创建一条线， `Turf.js` 空间分析库的 `bezierSpline()` 方法对该线进行贝塞尔曲线分析； + +- Example: + ```Javascript + line = turf.lineString([ + [-76.091308, 18.427501], + [-76.695556, 18.729501], + [-76.552734, 19.40443], + [-74.61914, 19.134789], + [-73.652343, 20.07657], + [-73.157958, 20.210656] + ]); + geojson = turf.bezierSpline(line); + ``` + +**Step 4. 显示分析结果**： +    将线和经过贝塞尔曲线分析得到的线显示出来。 + +- Example: + ```Javascript + //添加线显示 + var routedatasource = map.dataSources.add(Cesium.GeoJsonDataSource.load(line, { + //线颜色 + stroke: Cesium.Color.GRAY, + //填充色 + fill: Cesium.Color.GRAY, + //线宽 + strokeWidth: 5 + })); + //添加贝兹曲线显示 + var simpledatasource = map.dataSources.add(Cesium.GeoJsonDataSource.load(geojson, { + //线颜色 + stroke: Cesium.Color.RED, + //填充色 + fill: Cesium.Color.RED, + //线宽 + strokeWidth: 5 + })); + //跳转至显示线的区域 + map.flyTo(routedatasource); + ``` + +#### 参数 + +#### 1.【客户端空间分析库】`Turf` + +##### 【method】`turf.bezierSpline(line)`:根据输入线生成贝塞尔曲线 + +| 参数 | 类型 | 描述 | +| :--- | ----------------------- | :------------------------- | +| line | GeoJSON< `LineString` > | 输入线, 用于生成贝塞尔曲线 | diff --git a/website/public/static/demo/military/markdown/clientAnalysis/clientAnalysis-buffer.md b/website/public/static/demo/military/markdown/clientAnalysis/clientAnalysis-buffer.md new file mode 100644 index 000000000..e454c7dc3 --- /dev/null +++ b/website/public/static/demo/military/markdown/clientAnalysis/clientAnalysis-buffer.md @@ -0,0 +1,156 @@ +## 缓冲区分析 + +### 示例功能 + +    给定一个缓冲半径进行缓冲区分析，单位支持 `miles 米`，`kilometers 千米`，`degrees 度`。 + +### 示例实现 + +    本示例需要使用【include-cesium-local.js】开发库实现，先通过Cesium三维球控件 `Cesium.WebSceneControl()` 加载三维场景控件后，使用 `Turf.js` 空间分析库的 `turf.buffer()` 方法进行缓冲区分析。 + + +#### Turf.js + +> turf是JavaScript编写的模块化地理空间引擎，具体使用请查看turf官方教程和下载 + +#### GeoJSON.js + +> 地理数据转换成GeoJSON格式，GeoJSON.js官方地址 + +### 实现步骤 + +**Step 1. 引用开发库**： +    本示例引用local本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维WebGL的功能； + +**Step 2. 创建三维地图容器并加载三维球控件**： +    创建 `id='GlobeView'` 的div作为三维视图的容器，并设置其样式，初始化Cesium三维球控件 `Cesium.WebSceneControl()` ，完成此步后可在三维场景中加载三维球控件； + +* Example: + ``` Javascript + //构造三维视图类（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', { + terrainExaggeration: 1, + }); + ``` + +* Example: + ``` html +
+ ``` + +**Step 3. 执行缓冲区分析**： +      准备`点`、`线`、`面`要素数据，根据`缓冲区分析算法`得到缓冲区分析结果，实现关键步骤如下： + +   （1）准备`点`、`线`、`面`要素数据 + +* Example: + ```javascript + var origindata = { + "type": "FeatureCollection", + "features": [{ + "type": "Feature", + "properties": {}, + "geometry": { + "type": "Point", + "coordinates": [114.24270629882811,30.622550184776674] + } + }, + { + "type": "Feature", + "properties": {}, + "geometry": { + "type": "LineString", + "coordinates": [ + [114.34810638427734,30.634958017061198], + [114.2856216430664,30.554869984737515], + [114.246826171875,30.4954261715298] + ] + } + }, + { + "type": "Feature", + "properties": {}, + "geometry": { + "type": "Polygon", + "coordinates": [ + [ + [114.33815002441406,30.502230042106245], + [114.34398651123045,30.485071542395932], + [114.3728256225586,30.472348632640834], + [114.38278198242188,30.49010107130931], + [114.35256958007811,30.50518809826035], + [114.33815002441406,30.502230042106245] + ] + ] + } + } + ] + }; + ``` + +   （2）执行 `缓冲区分析算法`，返回缓冲结果要素数据 + +* Example: + ```javascript + geojson = turf.buffer(origindata, 1.5, { + units: 'miles' + }); + ``` + +**Step 4. 显示缓冲区分析结果**： +      更新数据，将得到的缓冲结果要素数据添加到地图中。 + +* Example: + ```javascript + map.dataSources.add(Cesium.GeoJsonDataSource.load(geojson, { + stroke: Cesium.Color.BLACK, + fill: Cesium.Color.GRAY, + strokeWidth: 15 + })); + ``` + +### 关键接口 + +#### 1.【客户端空间分析库】`Turf` + +##### 【method】`turf.buffer(coordinates,properties,options)`:缓冲分析方法 + +    计算给定半径的输入要素的缓冲区。 支持的单位是英里，公里和度。 + +|参数 |类型 |描述| +|---|---|---| +|geojson |任何Geojson格式|输入数据,标准的geojson格式即可| +|radius |number |缓冲距离(`允许负数`)| +|options |Object| 其他参数,请看下面的单位参数| + +* `options`参数属性说明 + +|名称 |类型 |默认值| 描述| +|---|---|---|---| +|units |string |"kilometers" |turf支持的任何单位选项| +|steps| number |64| 步数 | + +* `buffer()`返回值 + +> - FeatureCollection `geojson要素集合` +> - Feature `<(Polygon|MultiPolygon)>` 区或者多区 +> - undefined `失败`返回 undefined + + +* Example: + ```javascript + var point = turf.point([-90.548630, 14.616599]); + var buffered = turf.buffer(point, 500, {units: 'miles'}); + //----------建议使用下面的标准的geojson格式----------- + var GeoPoint = { + "type": "Feature", + "geometry": { + "type": "Point", + "coordinates": [114.289398,30.59418] + }, + "properties": { + "name": "点", + } + }; + var buffered = turf.buffer(GeoPoint, 500, {units: 'miles'}); + ``` diff --git a/website/public/static/demo/military/markdown/clientAnalysis/clientAnalysis-centroid.md b/website/public/static/demo/military/markdown/clientAnalysis/clientAnalysis-centroid.md new file mode 100644 index 000000000..252be984f --- /dev/null +++ b/website/public/static/demo/military/markdown/clientAnalysis/clientAnalysis-centroid.md @@ -0,0 +1,131 @@ +## 中心点提取 + +### 示例功能 + +    计算给定GeoJSON的数据中心，支持所有的GeoJSON类型。 + +### 示例实现 + +    本示例需要使用【include-cesium-local.js】开发库实现，先通过Cesium三维球控件 `Cesium.WebSceneControl()` 加载三维场景控件后，使用 `Turf.js` 空间分析库的关键接口`turf.centroid()`进行中心点提取。 + +#### Turf.js + +> turf是JavaScript编写的模块化地理空间引擎，具体使用请查看turf官方教程和下载 + +#### GeoJSON.js + +> 地理数据转换成GeoJSON格式，GeoJSON.js官方地址 + +### 实现步骤 + +**Step 1. 引用开发库**： +    本示例引用local本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维WebGL的功能； + +**Step 2. 创建三维地图容器并加载三维球控件**： +    创建 `id='GlobeView'` 的div作为三维视图的容器，并设置其样式，初始化Cesium三维球控件 `Cesium.WebSceneControl()` ，完成此步后可在三维场景中加载三维球控件； + +* Example: + ``` Javascript + //构造三维视图类（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', { + terrainExaggeration: 1, + }); + ``` + +* Example: + ``` html +
+ ``` + +**Step 3. 执行中心点提取操作**： +      准备要素数据用作提取中心点， `中心点提取`关键步骤，**一共分为二步**： + +   （1）准备要素数据 + +* Example: + ```javascript + $.getJSON('./static/data/client-analysis/buffer-hash-4.json', function(data) { + convertDataToGeoJson(data); + }); + + function convertDataToGeoJson(origindata) { + var columnarPoints = []; + var points; + origindata.aggregations.geohash.buckets.forEach(function(bucket) { + var coordinates = decodeGeoHash(bucket.key); + var countNumber = bucket.doc_count; + var point = { + pointKey: [ + coordinates.longitude[2], coordinates.latitude[2] + ], + count: bucket.doc_count + }; //[0] min [1]max [2] 中心点 + columnarPoints.push(point); + }); + points = GeoJSON.parse(columnarPoints, { + 'Point': 'pointKey' + }); + } + ``` + +   （2）执行 `提取中心点算法`，返回中心点要素数据 + +* Example: + ```javascript + geojson = turf.centroid(points); + ``` + +**Step 4. 显示分析结果**： +      更新数据，将得到的中心点要素数据添加到地图中。 + +* Example: + ```javascript + updateView(geojson); + function updateView(data) { + var centerdatasource = map.dataSources.add(Cesium.GeoJsonDataSource.load(data, { + markerColor: Cesium.Color.RED, + markerSize: 50 + })); + } + ``` + +### 关键接口 + +#### 1.【客户端空间分析库】`Turf` + +##### 【method】`turf.centroid(geojson,properties)`：提取中心点 + +     选取一个或多个要素，并使用所有顶点的平均值计算质心。 + +| 参数 | 类型 | 描述 | +| --------- | ----------- | ---------------------------- | +| geojson | GeoJSON格式 | 输入Geojson,用于计算中心点 | +| properties | Object | 使用geojson中的properties字段 | + +* `centroid()`返回值 + +> Feature <`Point`> - GeoJSON的中心点 + +* Example: + ```javascript + var polygon = turf.polygon([[[-81, 41], [-88, 36], [-84, 31], [-80, 33], [-77, 39], [-81, 41]]]); + var centroid = turf.centroid(polygon); + + //----------建议使用下面的标准的geojson格式----------- + var FeatureCollection = { + "type":"FeatureCollection", + "features":[GeoPoint1, GeoPoint2, ... GeoPoint100] + }; + var GeoPoint = { + "type": "Feature", + "geometry": { + "type": "Point", + "coordinates": [114.289398,30.59418] + }, + "properties": { + "name": "点", + } + }; + var buffered = turf.centroid(FeatureCollection); + ``` + diff --git a/website/public/static/demo/military/markdown/clientAnalysis/clientAnalysis-intersect.md b/website/public/static/demo/military/markdown/clientAnalysis/clientAnalysis-intersect.md new file mode 100644 index 000000000..bbec647cf --- /dev/null +++ b/website/public/static/demo/military/markdown/clientAnalysis/clientAnalysis-intersect.md @@ -0,0 +1,212 @@ +## 多边形相交 + +### 示例功能 + +    两个多边形求取交集。 如果他们共享边界，则返回边界；如果它们不相交，则返回 undefined。 + +### 示例实现 + +    本示例需要使用【include-cesium-local.js】开发库实现，先通过 Cesium 三维球控件 `Cesium.WebSceneControl()` 加载三维场景控件后，使用 `Turf.js` 空间分析库的关键接口`turf.intersect()`进行多边形相交计算。 + +#### Turf.js + +> turf 是 JavaScript 编写的模块化地理空间引擎，具体使用请查看turf 官方教程和下载 + +#### GeoJSON.js + +> 地理数据转换成GeoJSON格式，GeoJSON.js 官方地址 + +### 实现步骤 + +**Step 1. 引用开发库**： +    本示例引用 local 本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维 WebGL 的功能； + +**Step 2. 创建三维地图容器并加载三维球控件**： +    创建 `id='GlobeView'` 的 div 作为三维视图的容器，并设置其样式，初始化 Cesium 三维球控件 `Cesium.WebSceneControl()` ，完成此步后可在三维场景中加载三维球控件； + +- Example: + + ```Javascript + //构造三维视图类（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', { + terrainExaggeration: 1, + }); + ``` + +- Example: + ```html +
+ ``` + +**Step 3. 执行多边形相交操作**： +     准备 2 个多边形要素数据用作相交运算，`多边形相交`关键步骤**一共分为二步**： + +  （1）准备 2 个多边形要素数据 + +- Example: + + ```javascript + poly1 = turf.polygon([ + [ + [-122.801742, 45.48565], + [-122.801742, 45.60491], + [-122.584762, 45.60491], + [-122.584762, 45.48565], + [-122.801742, 45.48565], + ], + ]) + poly2 = turf.polygon([ + [ + [-122.520217, 45.535693], + [-122.64038, 45.553967], + [-122.720031, 45.526554], + [-122.669906, 45.507309], + [-122.723464, 45.446643], + [-122.532577, 45.408574], + [-122.487258, 45.477466], + [-122.520217, 45.535693], + ], + ]) + ``` + +  （2）执行 `多边形相交算法`，返回相交的结果多边形要素数据 + +- Example: + ```javascript + geojson = turf.intersect(poly1, poly2) + ``` + +**Step 4. 显示分析结果**： +     更新数据，将得到的相交的结果多边形要素数据添加到地图中。 + +- Example: + ```javascript + var simpledatasource = map.dataSources.add( + Cesium.GeoJsonDataSource.load(geojson, { + stroke: Cesium.Color.RED, + fill: Cesium.Color.RED, + strokeWidth: 5, + }) + ) + ``` + +### 关键接口 + +#### 1.【客户端空间分析库】`Turf` + +##### 【method】`turf.intersect(poly1,poly2)`:多边形相交 + +     取两个多边形并找到它们的交点。 如果他们共享边界，则返回边界；否则，返回边界。 如果它们不相交，则返回 undefined。 + +| 参数 | 类型 | 描述 | +| ----- | ---------------------------- | ------------------------------ | +| poly1 | FeatureCollection(`Polygon`) | 输入数据，用于生成第一个多边形 | +| poly2 | FeatureCollection(`Polygon`) | 输入数据，用于生成第二个多边形 | + +- `intersect()`返回值 + +> - FeatureCollection<`Polygon`> 当共享点或线时，`返回geojson相交区要素集`. +> - null 当没有共享点时，`则返回空值`. + +- Example: + ```javascript + var poly1 = turf.polygon([ + [ + [-122.801742, 45.48565], + [-122.801742, 45.60491], + [-122.584762, 45.60491], + [-122.584762, 45.48565], + [-122.801742, 45.48565], + ], + ]) + var poly2 = turf.polygon([ + [ + [-122.520217, 45.535693], + [-122.64038, 45.553967], + [-122.720031, 45.526554], + [-122.669906, 45.507309], + [-122.723464, 45.446643], + [-122.532577, 45.408574], + [-122.487258, 45.477466], + [-122.520217, 45.535693], + ], + ]) + var intersection = turf.intersect(poly1, poly2) + //----------建议使用下面的标准的geojson格式----------- + var FeatureCollection = { + type: 'Feature', + geometry: { + type: 'Polygon', + coordinates: [114.289398, 30.59418], + }, + properties: { + name: '面', + }, + } + var intersection = turf.intersect(FeatureCollection) + ``` + +> 两个多边形求取交集。 如果他们共享边界，则返回边界; 如果它们不相交，则返回 undefined。 + +--- + +#### 提交 BUG + +> 找到 bug 请提交[issue](https://github.com/ParnDeedlit/WebClient-Leaflet/issues) + +--- + +#### 参数 + +| 参数 | 类型 | 描述 | +| :---- | ---------------------------- | :----------------------------- | +| poly1 | FeatureCollection(`Polygon`) | 输入数据，用于生成第一个多边形 | +| poly2 | FeatureCollection(`Polygon`) | 输入数据，用于生成第二个多边形 | + +--- + +#### 返回值 + +> - FeatureCollection<`Polygon`> 当共享点或线时，`返回geojson相交区要素集`. +> - null 当没有共享点时，`则返回空值`. + +--- + +#### 示例 + +```javascript +var poly1 = turf.polygon([ + [ + [-122.801742, 45.48565], + [-122.801742, 45.60491], + [-122.584762, 45.60491], + [-122.584762, 45.48565], + [-122.801742, 45.48565], + ], +]) +var poly2 = turf.polygon([ + [ + [-122.520217, 45.535693], + [-122.64038, 45.553967], + [-122.720031, 45.526554], + [-122.669906, 45.507309], + [-122.723464, 45.446643], + [-122.532577, 45.408574], + [-122.487258, 45.477466], + [-122.520217, 45.535693], + ], +]) +var intersection = turf.intersect(poly1, poly2) +//----------建议使用下面的标准的geojson格式----------- +var FeatureCollection = { + type: 'Feature', + geometry: { + type: 'Polygon', + coordinates: [114.289398, 30.59418], + }, + properties: { + name: '面', + }, +} +var intersection = turf.intersect(FeatureCollection) +``` diff --git a/website/public/static/demo/military/markdown/clientAnalysis/clientAnalysis-tin.md b/website/public/static/demo/military/markdown/clientAnalysis/clientAnalysis-tin.md new file mode 100644 index 000000000..ba777652e --- /dev/null +++ b/website/public/static/demo/military/markdown/clientAnalysis/clientAnalysis-tin.md @@ -0,0 +1,119 @@ +## 不规则三角网分析 TIN + +### 示例功能 + +    TIN方法将无重复点的散乱数据点集按某种规则(如Delaunay 规则) 进行三角剖分，使这些散乱点形成连续但不重叠的不规则三角面片网，并以此来描述3D 物体的表面。 + +### 示例实现 + +    本示例需要使用【include-cesium-local.js】开发库实现，先通过Cesium三维球控件 `Cesium.WebSceneControl()` 加载三维场景控件后，使用 `Turf.js` 空间分析库的关键接口`turf.tin()`进行不规则三角网分析。 + +#### Turf.js + +> turf是JavaScript编写的模块化地理空间引擎，具体使用请查看turf官方教程和下载 + +#### GeoJSON.js + +> 地理数据转换成GeoJSON格式，GeoJSON.js官方地址 + +### 实现步骤 + +**Step 1. 引用开发库**： +    本示例引用local本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维WebGL的功能； + +**Step 2. 创建三维地图容器并加载三维球控件**： +    创建 `id='GlobeView'` 的div作为三维视图的容器，并设置其样式，初始化Cesium三维球控件 `Cesium.WebSceneControl()` ，完成此步后可在三维场景中加载三维球控件； + +* Example: + ``` Javascript + //构造三维视图类（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', { + terrainExaggeration: 1, + }); + ``` + +* Example: + ``` html +
+ ``` + +**Step 3. 执行不规则三角网分析**： +      `不规则三角网分析`关键步骤，准备不规则的点要素数据用作不规则三角网分析，**一共分为二步**： + +   （1）准备点要素数据 + + * Example: + ```javascript + $.getJSON('./static/data/client-analysis/point.json', function(data) { + convertDataToGeoJson(data); + updateView(geojson); + }); + ``` + +   （2）执行 `不规则三角网分析算法`，返回结果三角网多边形要素数据 + +* Example: + ```javascript + function convertDataToGeoJson(origindata) { + var points = origindata; + geojson = turf.tin(points); + } + ``` + +**Step 4. 显示分析结果**： +      更新数据，将得到的三角网多边形要素数据添加到地图中。 + +* Example: + ```javascript + function updateView(data) { + var tindatasource = map.dataSources.add(Cesium.GeoJsonDataSource.load(data, { + stroke: Cesium.Color.BLACK, + fill: Cesium.Color.GRAY, + strokeWidth: 15 + })); + map.flyTo(tindatasource); + } + ``` + +### 关键接口 + +#### 1.【客户端空间分析库】`Turf` + +##### 【method】`turf.tin(points,z)`:不规则三角网分析 + +      取得一组点，然后创建不规则三角测量网络（简称TIN），以多边形集合的形式返回。 这些通常用于开发高程等高线图或阶梯式热可视化。 + +| 参数 | 类型 | 描述 | +| ----- | ------------------------ | ----------------------------------------------------------- | +| points | FeatureCollection | Geojson点要素集合 | +| z | (String) | 要从哪个属性中提取z值，可选参数:如果没有给，那么就不会有额外的信息添加到派生的三角形中 | + +* `tin()`返回值 + +> FeatureCollection <`Polygon`> - TIN输出GeoJSON的要素区集合 + +* Example: + ```javascript + var points = turf.randomPoint(30, {bbox: [50, 30, 70, 50]}); + for (var i = 0; i < points.features.length; i++) { + points.features[i].properties.z = ~~(Math.random() * 9); + } + var tin = turf.tin(points, 'z'); + + //----------建议使用下面的标准的geojson格式----------- + var FeatureCollection = { + "type":"FeatureCollection", + "features":[GeoPoint1, GeoPoint2, ... GeoPoint100] + }; + var GeoPoint = { + "type": "Feature", + "geometry": { + "type": "Point", + "coordinates": [114.289398,30.59418] + }, + "properties": { + "name": "点", + } + }; + var buffered = turf.tin(FeatureCollection); + ``` diff --git a/website/public/static/demo/military/markdown/clientAnalysis/clientAnalysis-voronoi.md b/website/public/static/demo/military/markdown/clientAnalysis/clientAnalysis-voronoi.md new file mode 100644 index 000000000..1903d7365 --- /dev/null +++ b/website/public/static/demo/military/markdown/clientAnalysis/clientAnalysis-voronoi.md @@ -0,0 +1,128 @@ +## 泰森多边形 + +### 示例功能 + +    针对给定的点生成泰森多边形，请注意一定要传入bbox参数，`如果没有绘制对应的多边形，那么肯定是bbox的范围没有包含住所有的点集`，*这点非常重要*。 + +### 示例实现 + +    本示例需要使用【include-cesium-local.js】开发库实现，先通过Cesium三维球控件 `Cesium.WebSceneControl()` 加载三维场景控件后，使用 `Turf.js` 空间分析库的关键接口`turf.voronoi()`进行泰森多边形分析。 + +#### Turf.js + +> turf是JavaScript编写的模块化地理空间引擎，具体使用请查看turf官方教程和下载 + +#### GeoJSON.js + +> 地理数据转换成GeoJSON格式，GeoJSON.js官方地址 + +### 实现步骤 + +**Step 1. 引用开发库**： +    本示例引用local本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维WebGL的功能； + +**Step 2. 创建三维地图容器并加载三维球控件**： +    创建 `id='GlobeView'` 的div作为三维视图的容器，并设置其样式，初始化Cesium三维球控件 `Cesium.WebSceneControl()` ，完成此步后可在三维场景中加载三维球控件； + +* Example: + ``` Javascript + //构造三维视图类（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', { + terrainExaggeration: 1, + }); + ``` + +* Example: + ``` html +
+ ``` + +**Step 3. 执行泰森多边形分析**： +      准备点要素数据用作泰森多边形分析， `泰森多边形分析`关键步骤如下： + +   （1）准备点要素数据 + +* Example: + ```javascript + $.getJSON('./static/data/client-analysis/point.json', function (data) { + convertDataToGeoJson(data); + }); + ``` + +   （2）执行 `泰森多边形分析算法`，返回结果三角网多边形要素数据 + +* Example: + ```javascript + function convertDataToGeoJson(origindata) { + var points = origindata; + geojson = turf.voronoi(points, { + bbox: [113.67, 30.00, 115.20, 31.41] + }); + } + ``` + +**Step 4. 显示分析结果**： +     更新数据，将得到的三角网多边形要素数据添加到地图中。 + +* Example: + ```javascript + var voronoidatasource = map.dataSources.add(Cesium.GeoJsonDataSource.load(data, { + stroke: Cesium.Color.BLACK, + fill: Cesium.Color.GRAY, + strokeWidth: 15 + })); + ``` + +### 关键接口 + +#### 1.【客户端空间分析库】`Turf` + +##### 【method】`turf.voronoi(points,options)`:泰森多边形分析 + +    根据点的要素数据集和边界框返回泰森多边形的要素数据集。 + +| 参数 | 类型 | 描述 | +| ------ | -------------------------- | -------------------------- | +| points | FeatureCollection<`Point`> | 输入数据,用于生成泰森多边形 | +| options | Object对象 | 其他参数,请看下面的参数 | + +* options参数属性说明 + +| 名称 | 类型 | 默认值 | 描述 | +| --- | -------- | ----------------- | -------- | +| bbox | Array数组 | [-180,-85,180,-85] | `裁剪框` | + +`注意`：*bbox特别重要一定要包含所有的点,要不然无法生成泰森多边形,换言之,这个矩形的范围要够大* + +* `voronoi()`返回值 + +> FeatureCollection<`Polygon`> `geojson区要素集合`,每一个输入点都一定有一个输出区与之一一对应。 + +* Example: + ```javascript + var options = { + bbox: [-70, 40, -60, 60] + }; + var points = turf.randomPoint(100, options); + var voronoiPolygons = turf.voronoi(points, options); + //----------建议使用下面的标准的geojson格式----------- + var FeatureCollection = { + "type":"FeatureCollection", + "features":[GeoPoint1, GeoPoint2, ... GeoPoint100] + }; + var GeoPoint = { + "type": "Feature", + "geometry": { + "type": "Point", + "coordinates": [114.289398,30.59418] + }, + "properties": { + "name": "点", + } + }; + var options = { + bbox: [-180,-85,180,-85] + }; + var voronois = turf.voronoi(FeatureCollection, options); + ``` + diff --git a/website/public/static/demo/military/markdown/clientView/clientView-appendImage.md b/website/public/static/demo/military/markdown/clientView/clientView-appendImage.md new file mode 100644 index 000000000..e892841fa --- /dev/null +++ b/website/public/static/demo/military/markdown/clientView/clientView-appendImage.md @@ -0,0 +1,70 @@ +## 叠加图片数据 + +### 示例功能 + +    此功能用于在当前场景中叠加显示图片文件数据，支持本地数据和网络数据加载。 + +### 示例实现： + +    本示例需要使用【include-cesium-local.js】开发库实现，关键接口为`CesiumZondy.Manager.CommonDataManager`类提供的`appendImageByUrl()`方法与`removeImage()`方法，实现图片叠加显示与移除功能。 + +> 开发库使用请参见首页-概述-原生 JS 调用内容。 + +### 实现步骤： + +**Step 1. 引用开发库**： +    本示例引用 local 本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维 WebGL 的功能； + +**Step 2. 创建三维地图容器加载三维球控件,并加载底图**： +    创建 `id='GlobeView'` 的 div 作为三维视图的容器，并设置其样式，初始化 Cesium 三维球控件 `Cesium.WebSceneControl()` ，并调用`appendTDTuMap()` 方法加载天地图数据作为底图显示； + +**Step 3. 叠加显示图片文件数据**： +    首先构造`CesiumZondy.Manager.CommonDataManager`通用数据管理类对象，然后调用`appendImageByUrl()`方法加载，须设置图片的 URL 与经纬度参数。相对加载功能，移除则调用`removeImage()`方法实现。 + +- Example: + + ```javascript + //实例化通用数据管理类 + var commonDataManager = new CesiumZondy.Manager.CommonDataManager({ + viewer: webGlobe.viewer, + }) + //通过地址添加图片，支持本地图片和网络图片 + var imgObj = commonDataManager.appendImageByUrl( + //图片URL + 'http://5b0988e595225.cdn.sohucs.com/images/20180917/455c51316ec24a97958a254dc66c18f6.jpeg', + //东经 + 114.3473, + //北纬 + 30.5479, + //西经 + 114.4637, + //南纬 + 30.612 + ) + //定位跳转 + sceneManager.flyToComm(114.4, 30.55, 30000) + ``` + +### 关键接口 + +#### 1.【三维场景控件】 `CesiumZondy.WebSceneControl` + +#### 2.【通用数据管理类】 `CesiumZondy.Manager.CommonDataManager` + +##### 【method】 `appendImageByUrl(url, west, south, east, north, options) → {Object}` :通过路径添加图片数据，返回图片数据对象（Object） + +| 参数名 | 类型 | 说明 | +| ------- | ------ | ------------------------------------------------------------------------------------------------------- | +| url | String | 图片地址，本地数据路径设置如“./static/data/imge/xxx.png”，网络数据路径设置如“http://{域名或IP}/xxx.jpg” | +| west | Number | 西经 | +| south | Number | 南纬 | +| east | Number | 东经 | +| north | Number | 北纬 | +| options | Object | 扩展参数 | + +##### 【method】 `removeImage(imageryLayer, isDestroy)` ：移除添加的图片 + +| 参数名 | 类型 | 说明 | +| ------------ | ------- | ------------------------------------------------------ | +| imageryLayer | Object | 添加的图片对象，即 appendImageByUrl 方法返回的数据对象 | +| isDestroy | Boolean | 是否销毁图片对象 | diff --git a/website/public/static/demo/military/markdown/clientView/clientView-dynamiccircle.md b/website/public/static/demo/military/markdown/clientView/clientView-dynamiccircle.md new file mode 100644 index 000000000..84164ef8d --- /dev/null +++ b/website/public/static/demo/military/markdown/clientView/clientView-dynamiccircle.md @@ -0,0 +1,85 @@ +## 动态圆 + +### 示例功能 + +    此功能用于在当前场景中绘制动态的圆显示效果，可应用于任意场景中。 + +### 示例实现： + +    本示例需要使用【include-cesium-local.js】开发库实现，初始化 `Cesium.CircleScanEffect()` 动态圆对象，然后通过分析功能管理类`CesiumZondy.Manager.AnalysisManager` 的`addSceneEffect()`方法添加动态圆显示；`removeSceneEffect()`方法移除动态圆显示。 + +### 实现步骤： + +**Step 1. 引用开发库**： +    本示例引用local本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维WebGL的功能； + +**Step 2. 创建三维地图容器加载三维球控件,并加载底图**： +    创建 `id='GlobeView'` 的div作为三维视图的容器，并设置其样式，初始化Cesium三维球控件 `Cesium.WebSceneControl()` ，并调用`appendGoogleMapExt()` 方法加载Google地图作为底图显示； + +**Step 3. 跳转定位**： +    调用Cesium三维球场景视图管理类 `CesiumZondy.Manager.SceneManager` 的 `flyTo()` 方法定位到指定点； + +* Example: + ``` Javascript + //初始化视图功能管理类 + var sceneManager = new CesiumZondy.Manager.SceneManager({ + viewer: webGlobe.viewer + }); + //定位跳转 + sceneManager.flyTo(114.06, 22.54, 20000, 2); + ``` + +**Step 4. 创建动态圆**： +    初始化动态圆对象 `Cesium.CircleScanEffect()`，注意使用动态圆功能`必须开启深度检测` ； + +* Example: + ``` Javascript + //开启地形深度检测（必须） + webGlobe.viewer.scene.globe.depthTestAgainstTerrain = true; + //初始化动态圆对象 + var scanEffect = new Cesium.CircleScanEffect(webGlobe.viewer, { + center: Cesium.Cartesian3.fromDegrees(114.06, 22.54, 20), + maxRadius: 5000, + scanColor: new Cesium.Color(1, 0, 0, 1), + duration: 8000 + }); + ``` + +**Step 5. 添加/移除动态圆**： +    调用Cesium三维球分析功能管理类`CesiumZondy.Manager.AnalysisManager` 的`addSceneEffect()`方法添加动态圆显示，相应可调用`removeSceneEffect()`方法移除。 + +* Example: + ``` Javascript + //初始化分析功能管理类 + var analysisManager = new CesiumZondy.Manager.AnalysisManager({ + viewer: webGlobe.viewer + }); + //添加添加场景特效-动态圆 + analysisManager.addSceneEffect(scanEffect); + //通过removeSceneEffect()移除场景特效 + //analysisManager.removeSceneEffect(scanEffect); + ``` + +### 关键接口 + +#### 1.【三维场景控件】 `CesiumZondy.WebSceneControl` + +#### 2.【实体绘制控制器类】 `CesiumZondy.Manager.CommonDataManager` + +##### 【method】 `appendPoint()` ：添加点 + +#### 3.【动态圆对象类】 `Cesium.CircleScanEffect`，Cesium原生类 + +#### 4.【分析功能管理类】 `CesiumZondy.Manager.AnalysisManager` + +##### 【method】 `addSceneEffect(effect)` ：添加场景特效 + +|参数名|类型|说明| +|-|-|-| +|effect|Object|场景特效实例，如动态圆场景特效Cesium.CircleScanEffect对象| + +##### 【method】 `removeSceneEffect(effect)` ：移除场景特效 + +|参数名|类型|说明| +|-|-|-| +|effect|Object|场景特效实例，如动态圆场景特效Cesium.CircleScanEffect对象| diff --git a/website/public/static/demo/military/markdown/clientView/clientView-fire.md b/website/public/static/demo/military/markdown/clientView/clientView-fire.md new file mode 100644 index 000000000..05413157c --- /dev/null +++ b/website/public/static/demo/military/markdown/clientView/clientView-fire.md @@ -0,0 +1,92 @@ +## 粒子特效-火焰 + +### 示例功能 + +    此功能用于添加火焰粒子特效，可以模拟火灾等各类火焰相关的场景。 + +### 示例实现： + +    本示例需要使用【include-cesium-local.js】开发库实现，关键接口为`CesiumZondy.Manager.AdvancedAnalysisManager`类提供的`createFire()`方法，实现添加火焰粒子特效功能。 + +> 开发库使用请参见首页-概述-原生 JS 调用内容。 + +### 实现步骤： + +**Step 1. 引用开发库**： +    本示例引用 local 本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维 WebGL 的功能； + +**Step 2. 创建三维地图容器加载三维球控件,并加载底图**： +    创建 `id='GlobeView'` 的 div 作为三维视图的容器，并设置其样式，初始化 Cesium 三维球控件 `Cesium.WebSceneControl()` ，并调用`appendTDTuMap()` 方法加载天地图数据作为底图显示，然后再叠加显示 M3D 服务的建筑模型； + +**Step 3. 添加火焰粒子特效**： +    首先构造`CesiumZondy.Manager.AdvancedAnalysisManager`高级分析功能类对象，然后调用`createFire()`方法添加火焰粒子特效，可通过可选参数实现火焰特效的调整。 + +- Example: + + ```javascript + //初始化高级分析功能管理类 + var advancedAnalysisManager = new CesiumZondy.Manager.AdvancedAnalysisManager({ viewer: webGlobe.viewer }) + //位置点 + let position = [114.40103, 30.4679, 12] + //火焰图片url + let imageUrl = './static/data/effect/fire.png' + //添加火焰粒子特效 + fireObj = advancedAnalysisManager.createFire(imageUrl, position) + ``` + +- Example: + ```Javascript + if (name === 'emissionRate') { + //排放率 + fireObj.emissionRate = parseFloat(newValue); + } + if (name === 'particleSize') { + var particleSize = parseFloat(newValue); + //图像尺寸 + fireObj.imageSize = new Cesium.Cartesian2(particleSize, particleSize); + } + if (name === 'particleLife') { + //粒子生命 + fireObj.particleLife = parseFloat(newValue); + } + if (name === 'speed') { + //速度 + fireObj.speed = parseFloat(newValue); + } + if (name === 'startScale') { + //起始规模 + fireObj.startScale = parseFloat(newValue); + } + if (name === 'endScale') { + //终止规模 + fireObj.endScale = parseFloat(newValue); + } + ``` + +### 关键接口 + +#### 1.【三维场景控件】 `CesiumZondy.WebSceneControl` + +#### 2.【高级分析功能管理类】 `CesiumZondy.Manager.AdvancedAnalysisManager` + +##### 【method】 `createFire(imageUrl, position, options) → {Object}` ：创建火焰或烟雾粒子特效，返回火焰特效实例（Object） + +| 参数名 | 类型 | 说明 | +| -------- | -------------- | ---------------- | +| imageUrl | String | 粒子特效图片 url | +| position | Array. | 粒子特效位置点 | +| options | Object | 粒子特效参数 | + +- `options` 主要属性 + +| 参数名 | 类型 | 说明 | +| ---------------- | ---------- | ------------------------ | +| modelUrl | String | （可选）模型 url | +| minimumPixelSize | Number | （可选）模型最小像素尺寸 | +| startScale | Number | （可选）起始规模 | +| endScale | Number | （可选）终止规模 | +| particleLife | Number | （可选）粒子生命 | +| speed | Number | （可选）速度 | +| imageSize | Cartesian2 | （可选）图像尺寸 | +| emissionRate | Number | （可选）排放率 | +| lifetime | Number | （可选）持续时间 | diff --git a/website/public/static/demo/military/markdown/clientView/clientView-firework.md b/website/public/static/demo/military/markdown/clientView/clientView-firework.md new file mode 100644 index 000000000..f7a5314ef --- /dev/null +++ b/website/public/static/demo/military/markdown/clientView/clientView-firework.md @@ -0,0 +1,146 @@ +## 粒子特效-烟雾 + +### 示例功能 + +    此功能用于添加烟雾粒子特效，可以模拟火灾等各类火焰相关的场景。 + +### 示例实现： + +    本示例需要使用【include-cesium-local.js】开发库实现，关键接口为`CesiumZondy.Manager.AdvancedAnalysisManager`类提供的`createStableParticle()`方法，实现添加火焰+烟雾粒子特效功能。 + +>开发库使用请参见首页-概述-原生JS调用内容。 + +### 实现步骤： + +**Step 1. 引用开发库**： +    本示例引用local本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维WebGL的功能； + +**Step 2. 创建三维地图容器加载三维球控件,并加载底图**： +    创建 `id='GlobeView'` 的div作为三维视图的容器，并设置其样式，初始化Cesium三维球控件 `Cesium.WebSceneControl()` ，并调用`appendTDTuMap()` 方法加载天地图数据作为底图显示，然后再叠加显示M3D服务的建筑模型； + +**Step 3. 添加烟雾粒子特效**： +    构造`CesiumZondy.Manager.AdvancedAnalysisManager`高级分析功能类对象，然后调用`createStableParticle()`方法分别添加火焰与烟雾粒子特效，通过可选参数实现火焰特效的调整。 + +* Example: + ``` Javascript + //初始化高级分析功能管理类 + var advancedAnalysisManager = new CesiumZondy.Manager.AdvancedAnalysisManager({ + viewer: webGlobe.viewer + }); + //粒子发射位置点 + let position = [114.40103, 30.4679, 12]; + //火焰与烟雾图片url + let imageUrl1 = './static/data/effect/fire1.png'; + let imageUrl2 = './static/data/effect/smoke1.png'; + //添加烟雾粒子特效 + fireObj = advancedAnalysisManager.createStableParticle(imageUrl1, position, { + emissionRate: 3, + startScale: 1, + endScale: 3 + }); + //添加烟雾粒子特效 + smokeObj = advancedAnalysisManager.createStableParticle(imageUrl2, position, { + emissionRate: 35, + startScale: 5, + endScale: 8 + }); + ``` + +* Example: + ``` Javascript + //火焰烟雾特效初始参数 + var viewModel = { + emissionRate: 35.0, //排放率 + particleLife: 1.2, //粒子生命 + speed: 2.0, //速度 + startScale: 5.0, //起始规模 + endScale: 8.0, //终止规模 + particleSize: 25.0 //图像尺寸 + }; + //火焰烟雾参数设置绑定UI + Cesium.knockout.track(viewModel); + var toolbar = document.getElementById('toolbar'); + Cesium.knockout.applyBindings(viewModel, toolbar); + function subscribeParameter(name) { + Cesium.knockout.getObservable(viewModel, name).subscribe( + function(newValue) { + if (name === 'emissionRate') { + //排放率 + smokeObj.emissionRate = parseFloat(newValue); + } + if (name === 'particleSize') { + var particleSize = parseFloat(newValue); + //图像尺寸 + smokeObj.imageSize = new Cesium.Cartesian2(particleSize, particleSize); + + } + if (name === 'particleLife') { + smokeObj.particleLife = parseFloat(newValue); + } + if (name === 'speed') { + smokeObj.speed = parseFloat(newValue); + } + + if (name === 'startScale') { + //起始规模 + smokeObj.startScale = parseFloat(newValue); + } + if (name === 'endScale') { + //终止规模 + smokeObj.endScale = parseFloat(newValue); + } + } + ); + scene.requestRender(); + } + //改变属性值时调用 + subscribeParameter('emissionRate'); + subscribeParameter('particleSize'); + subscribeParameter('particleLife'); + subscribeParameter('speed'); + subscribeParameter('startScale'); + subscribeParameter('endScale'); + ``` + +### 关键接口 + +#### 1.【三维场景控件】 `CesiumZondy.WebSceneControl` + +#### 2.【高级分析功能管理类】 `CesiumZondy.Manager.AdvancedAnalysisManager` + +##### 【method】 `createStableParticle(imageUrl, position, options) → {Object}` ：固定位置粒子特效，可通过更改image与附加参数来实现火焰、喷泉、烟雾等粒子特效，返回粒子特效实例（Object） + +|参数名|类型|说明| +|-|-|-| +|imageUrl|String |粒子特效图片url| +|position|Cartesian3 |粒子特效位置点| +|options|Object|粒子特效参数| + +* `options` 主要属性 + +|参数名|类型|说明| +|-|-|-| +|modelUrl|String|模型url| +|minimumPixelSize|Number|（可选）模型最小像素尺寸| +|startColor|Color|（可选）开始的颜色| +|endColor|Color|（可选）结束的颜色| +|startScale|Number|（可选）起始尺寸| +|endScale|Number|（可选）结束尺寸| +|minimumParticleLife|Number|（可选）最小粒子周期| +|maximumParticleLife|Number|（可选）最大粒子周期| +|minimumSpeed|Number|（可选）最小速率| +|maximumSpeed|Number|（可选）最大速率| +|imageSize|Cartesian2|（可选）粒子图像大小| +|emissionRate|Number|（可选）排放率| +|minimumImageSize|Number|（可选）最小Image尺寸| +|maximumImageSize|Number|（可选）最大Image尺寸| +|lifetime|Number|（可选）单个粒子生命周期| +|emitter|Object|（可选）粒子发射器类型| +|gravity|Number|（可选）粒子重力| +|viewHeight|Number|（可选）用于控制粒子特效在0到该值范围内可见，范围外不可见，当值为-1时，默认全部可见| +|heading|Number|（可选）俯仰角| +|pitch|Number|（可选）偏航角| +|roll|Number|（可选）翻滚角| + + + diff --git a/website/public/static/demo/military/markdown/clientView/clientView-fog.md b/website/public/static/demo/military/markdown/clientView/clientView-fog.md new file mode 100644 index 000000000..a821bec25 --- /dev/null +++ b/website/public/static/demo/military/markdown/clientView/clientView-fog.md @@ -0,0 +1,52 @@ +## 粒子特效-雾 + +### 示例功能 + +    此功能用于在场景中添加雾粒子特效功能，模拟雾天场景。 + +### 示例实现： + +    本示例需要使用【include-cesium-local.js】开发库实现，关键接口为`CesiumZondy.Manager.AdvancedAnalysisManager`类提供的`createFog()`方法，实现添加雾粒子特效功能。 + +>开发库使用请参见首页-概述-原生JS调用内容。 + +### 实现步骤： + +**Step 1. 引用开发库**： +    本示例引用local本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维WebGL的功能； + +**Step 2. 创建三维地图容器加载三维球控件,并加载底图**： +    创建 `id='GlobeView'` 的div作为三维视图的容器，并设置其样式，初始化Cesium三维球控件 `Cesium.WebSceneControl()` ，并调用`appendTDTuMap()` 方法加载天地图数据作为底图显示，然后再叠加显示M3D服务的大雁塔数据； + +**Step 3. 添加雾粒子特效**： +    首先构造`CesiumZondy.Manager.AdvancedAnalysisManager`高级分析功能类对象，然后调用`createFog()`方法添加雾粒子特效，可通过可选参数实现雾效的调整。 + +* Example: + ``` Javascript + //初始化高级分析功能管理类 + var advancedAnalysisManager = new CesiumZondy.Manager.AdvancedAnalysisManager({ viewer: webGlobe.viewer }); + //添加雾效 + advancedAnalysisManager.createFog({ + //雾特效透明度 + alpha:0.5 + }); + ``` + + +### 关键接口 + +#### 1.【三维场景控件】 `CesiumZondy.WebSceneControl` + +#### 2.【高级分析功能管理类】 `CesiumZondy.Manager.AdvancedAnalysisManager` + +##### 【method】 `createFog(optionsParam) → {Object}` ：创建雾特效，返回雾特效实例（Object） + +|参数名|类型|说明| +|-|-|-| +|optionsParam|Object|雾特效参数| + +* `optionsParam` 主要属性 + +|参数名|类型|说明| +|-|-|-| +|alpha|Number|（可选）雾特效透明度| diff --git a/website/public/static/demo/military/markdown/clientView/clientView-heatmap.md b/website/public/static/demo/military/markdown/clientView/clientView-heatmap.md new file mode 100644 index 000000000..1b8532ede --- /dev/null +++ b/website/public/static/demo/military/markdown/clientView/clientView-heatmap.md @@ -0,0 +1,57 @@ +## 热力图 + +### 示例功能 + +    此功能用于在当前三维场景中添加热力图显示效果。 + +### 示例实现： + +    本示例需要使用【include-cesium-local.js】开发库实现，先初始化Cesium三维球控件 `Cesium.WebSceneControl()` , 创建分析功能管理类 `CesiumZondy.Manager.AnalysisManager()` ，调用关键接口 `createHeatMap()` 添加热力图。 + +### 实现步骤： + +**Step 1. 引用开发库**： +    本示例引用local本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维WebGL的功能； + +**Step 2. 创建三维地图容器并加载三维球控件**： +    创建 `id='GlobeView'` 的div作为三维视图的容器，并设置其样式，初始化Cesium三维球控件 `Cesium.WebSceneControl()` ，完成此步后可在三维场景中加载三维球控件； + +* Example: + ``` Javascript + //构造三维视图类（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', { + terrainExaggeration: 1, + }); + ``` + +* Example: + ``` html +
+ ``` + +**Step 3. 添加热力图**： +    创建分析功能管理类 `CesiumZondy.Manager.AnalysisManager()` ，调用 `createHeatMap()` 方法添加热力图。 + +* Example: + ``` Javascript + var analysisManager = new CesiumZondy.Manager.AnalysisManager({ + viewer: webGlobe.viewer + }) + //创建热力图（范围、最大值、最小值） + var instance = analysisManager.createHeatMap(bounds, valueMin, valueMax, data, options); + ``` + +### 关键接口 + +#### 1.【三维场景控件】 `CesiumZondy.WebSceneControl` + +#### 2.【分析功能管理类】 `CesiumZondy.Manager.AnalysisManager` + +##### 【method】 `createHeatMap(bounds, minValue, maxValue, data, options)` ：创建热力图 + +|参数名|类型|说明| +|-|-|-| +|bounds|object|：WGS84 bounding box {north, east, south, west}| +|maxValue|Number|最大值| +|minValue|Number|最小值| +|data|Array.|Array<[{'x':, 'y':, 'value':}]>| diff --git a/website/public/static/demo/military/markdown/clientView/clientView-radarscanning.md b/website/public/static/demo/military/markdown/clientView/clientView-radarscanning.md new file mode 100644 index 000000000..b8bd3a8cc --- /dev/null +++ b/website/public/static/demo/military/markdown/clientView/clientView-radarscanning.md @@ -0,0 +1,106 @@ +## 雷达扫描圆 + +### 示例功能 + +    此功能用于在当前场景中添加雷达扫描圆显示效果，可应用于任意场景中。 + +### 示例实现： + +    本示例需要使用【include-cesium-local.js】开发库实现，初始化高级分析管理类 `CesiumZondy.Manager.AdvancedAnalysisManager` 的`createRadarScan()`方法创建雷达扫描圆对象，然后分别通过分析功能管理类`CesiumZondy.Manager.AnalysisManager` 的`addSceneEffect()`方法与`removeSceneEffect()`方法来添加与移除雷达扫描圆显示功能。 + +### 实现步骤： + +**Step 1. 引用开发库**： +    本示例引用local本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维WebGL的功能； + +**Step 2. 创建三维地图容器加载三维球控件,并加载底图**： +    创建 `id='GlobeView'` 的div作为三维视图的容器，并设置其样式，初始化Cesium三维球控件 `Cesium.WebSceneControl()` ，并调用`appendGoogleMapExt()` 方法加载Google地图作为底图显示,同时叠加地形数据； + +**Step 3. 跳转定位**： +    调用Cesium三维球场景视图管理类 `CesiumZondy.Manager.SceneManager` 的 `flyToEx()` 方法定位到指定点； + +* Example: + ``` Javascript + //初始化视图功能管理类 + var sceneManager = new CesiumZondy.Manager.SceneManager({ viewer: webGlobe.viewer }); + //视点跳转 + sceneManager.flyToEx(120.8642, 23.3351, { + height: 10000,//视角高度 + heading: 35,//方位角 + pitch: -30,//俯仰角 + roll: 0 //翻滚角 + }); + ``` + + +**Step 4. 创建雷达扫描圆**： +    初始化高级分析功能管理类对象 `CesiumZondy.Manager.AdvancedAnalysisManager` ，调用`createRadarScan()`方法创建雷达扫描圆对象，注意`必须开启深度检测` ； + +* Example: + ``` Javascript + //开启深度检测（必须） + webGlobe.viewer.scene.globe.depthTestAgainstTerrain = true; + //初始化高级分析功能管理类 + var advancedAnalysisManager = new CesiumZondy.Manager.AdvancedAnalysisManager({ viewer: webGlobe.viewer }); + //创建一个雷达扫描圆对象 + var radarScanEffect = advancedAnalysisManager.createRadarScan( + //雷达中心点 + Cesium.Cartesian3.fromDegrees(120.9558, 23.4481, 3657), + //扫描半径 + 5000, + //扫描区域颜色 + new Cesium.Color(255 / 255, 0 / 255, 0 / 255, 1), + //周期时间,单位毫秒 + 8000 + ); + + ``` + +**Step 5. 添加/移除雷达扫描圆显示**： +    调用分析功能管理类`CesiumZondy.Manager.AnalysisManager` 的`addSceneEffect()`方法添加雷达扫描圆显示，相应可调用`removeSceneEffect()`方法移除。 + +* Example: + ``` Javascript + //初始化分析功能管理类 + var analysisManager = new CesiumZondy.Manager.AnalysisManager({ + viewer: webGlobe.viewer + }); + //添加场景特效-雷达扫描圆 + analysisManager.addSceneEffect(radarScanEffect); + //移除场景特效-雷达扫描圆 + //analysisManager.removeSceneEffect(radarScanEffect); + ``` + +### 关键接口 + +#### 1.【三维场景控件】 `CesiumZondy.WebSceneControl` + +#### 2.【实体绘制控制器类】 `CesiumZondy.Layer.CesiumFuncManager` + +##### 【method】 `appendPoint()`:添加点 + +#### 3.【高级分析功能管理类】`CesiumZondy.Manager.AdvancedAnalysisManager` + +##### 【method】 `createRadarScan(center, radius, scanColor, duration) → {Object}` ：创建雷达扫描圆，返回雷达扫描实例RadarScan（Object） + +| 参数名 | 类型 | 说明 | +| --------- | ---------- | ----------------- | +| center | Cartesian3 | 雷达中心点 | +| radius | Number | 扫描半径 | +| scanColor | Color | 扫描区域颜色 | +| duration | Number | 周期时间,单位毫秒 | + +#### 4.【分析功能管理类】 `CesiumZondy.Manager.AnalysisManager` + +##### 【method】 `addSceneEffect(effect)` ：添加场景特效 + +| 参数名 | 类型 | 说明 | +| ------ | ------ | --------------------------------------------------------- | +| effect | Object | 场景特效实例，如动态圆场景特效Cesium.CircleScanEffect对象 | + +##### 【method】 `removeSceneEffect(effect)` ：移除场景特效 + +| 参数名 | 类型 | 说明 | +| ------ | ------ | --------------------------------------------------------- | +| effect | Object | 场景特效实例，如动态圆场景特效Cesium.CircleScanEffect对象 | + diff --git a/website/public/static/demo/military/markdown/clientView/clientView-rain.md b/website/public/static/demo/military/markdown/clientView/clientView-rain.md new file mode 100644 index 000000000..61efafbf0 --- /dev/null +++ b/website/public/static/demo/military/markdown/clientView/clientView-rain.md @@ -0,0 +1,57 @@ +## 粒子特效-降雨 + +### 示例功能 + +    此功能用于在场景中添加降雨粒子特效功能，模拟降雨场景。 + +### 示例实现： + +    本示例需要使用【include-cesium-local.js】开发库实现，关键接口为`CesiumZondy.Manager.AdvancedAnalysisManager`类提供的`createRain()`方法，实现添加降雨粒子特效功能。 + +>开发库使用请参见首页-概述-原生JS调用内容。 + +### 实现步骤： + +**Step 1. 引用开发库**： +    本示例引用local本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维WebGL的功能； + +**Step 2. 创建三维地图容器加载三维球控件,并加载底图**： +    创建 `id='GlobeView'` 的div作为三维视图的容器，并设置其样式，初始化Cesium三维球控件 `Cesium.WebSceneControl()` ，并调用`appendTDTuMap()` 方法加载天地图数据作为底图显示； + +**Step 3. 添加降雨粒子特效**： +    首先构造`CesiumZondy.Manager.AdvancedAnalysisManager`高级分析功能类对象，然后调用`createRain()`方法添加降雨粒子特效，可通过可选参数实现降雨效果的调整。 + +* Example: + ``` Javascript + //初始化高级分析功能管理类 + var advancedAnalysisManager = new CesiumZondy.Manager.AdvancedAnalysisManager({ viewer: webGlobe.viewer }); + //添加下雨特效 + advancedAnalysisManager.createRain({ + //色调调整 + hueShift: 0.7 + }); + ``` + + +### 关键接口 + +#### 1.【三维场景控件】 `CesiumZondy.WebSceneControl` + +#### 2.【高级分析功能管理类】 `CesiumZondy.Manager.AdvancedAnalysisManager` + +##### 【method】 `createRain(options) → {Object}` ：创建下雨特效，返回下雨特效实例（Object） + + +|参数名|类型|说明| +|-|-|-| +|options|Object|下雨特效参数| + +* `options` 主要属性 + +|参数名|类型|说明| +|-|-|-| +|hueShift|Number|（可选）色调| +|saturationShift|Number|（可选）饱和度| +|brightnessShift|Number|（可选）亮度| +|density|Number|（可选）密度| +|minimumBrightness|Number|（可选）最小亮度| diff --git a/website/public/static/demo/military/markdown/clientView/clientView-smoke.md b/website/public/static/demo/military/markdown/clientView/clientView-smoke.md new file mode 100644 index 000000000..d61bd8170 --- /dev/null +++ b/website/public/static/demo/military/markdown/clientView/clientView-smoke.md @@ -0,0 +1,117 @@ +## 粒子特效-烟雾 + +### 示例功能 + +    此功能用于添加烟雾粒子特效，与火焰粒子特效相同，可以模拟火灾等各类火焰烟雾、水汽烟雾相关的场景。 + +### 示例实现： + +    本示例需要使用【include-cesium-local.js】开发库实现，关键接口为`CesiumZondy.Manager.AdvancedAnalysisManager`类提供的`createStableParticle()`方法，实现添加烟雾粒子特效功能。 + + +>开发库使用请参见首页-概述-原生JS调用内容。 + +### 实现步骤： + +**Step 1. 引用开发库**： +    本示例引用local本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维WebGL的功能； + +**Step 2. 创建三维地图容器加载三维球控件,并加载底图**： +    创建 `id='GlobeView'` 的div作为三维视图的容器，并设置其样式，初始化Cesium三维球控件 `Cesium.WebSceneControl()` ，并调用`appendTDTuMap()` 方法加载天地图数据作为底图显示，然后再叠加显示M3D服务的建筑模型； + +**Step 3. 添加火焰烟雾粒子特效**： +    首先构造`CesiumZondy.Manager.AdvancedAnalysisManager`高级分析功能类对象，然后调用`createStableParticle()`方法分别添加火焰与烟雾粒子特效，可通过可选参数实现烟雾特效的调整。 + +* Example: + ``` Javascript + //初始化高级分析功能管理类 + var advancedAnalysisManager = new CesiumZondy.Manager.AdvancedAnalysisManager({ + viewer: webGlobe.viewer + }); + //粒子发射位置点 + let position = [114.40103, 30.4679, 12]; + //火焰与烟雾图片url + let imageUrl1 = './static/data/effect/fire1.png'; + let imageUrl2 = './static/data/effect/smoke1.png'; + //添加烟雾粒子特效 + fireObj = advancedAnalysisManager.createStableParticle(imageUrl1, position, { + emissionRate: 3, + startScale: 1, + endScale: 3 + }); + //添加烟雾粒子特效 + smokeObj = advancedAnalysisManager.createStableParticle(imageUrl2, position, { + emissionRate: 35, + startScale: 5, + endScale: 8 + }); + ``` + +* Example: + ``` Javascript + if (name === 'emissionRate') { + //排放率 + smokeObj.emissionRate = parseFloat(newValue); + } + if (name === 'particleSize') { + var particleSize = parseFloat(newValue); + //图像尺寸 + smokeObj.imageSize = new Cesium.Cartesian2(particleSize, particleSize); + + } + if (name === 'particleLife') { + smokeObj.particleLife = parseFloat(newValue); + } + if (name === 'speed') { + smokeObj.speed = parseFloat(newValue); + } + + if (name === 'startScale') { + //起始规模 + smokeObj.startScale = parseFloat(newValue); + } + if (name === 'endScale') { + //终止规模 + smokeObj.endScale = parseFloat(newValue); + } + ``` + +### 关键接口 + +#### 1.【三维场景控件】 `CesiumZondy.WebSceneControl` + +#### 2.【高级分析功能管理类】 `CesiumZondy.Manager.AdvancedAnalysisManager` + +##### 【method】 `createStableParticle(imageUrl, position, options) → {Object}` ：固定位置粒子特效，可通过更改image与附加参数来实现火焰、喷泉、烟雾等粒子特效，返回粒子特效实例（Object） + +|参数名|类型|说明| +|-|-|-| +|imageUrl|String |粒子特效图片url| +|position|Cartesian3 |粒子特效位置点| +|options|Object|粒子特效参数| + +* `options` 主要属性 + +|参数名|类型|说明| +|-|-|-| +|modelUrl|String|模型url| +|minimumPixelSize|Number|（可选）模型最小像素尺寸| +|startColor|Color|（可选）开始的颜色| +|endColor|Color|（可选）结束的颜色| +|startScale|Number|（可选）起始尺寸| +|endScale|Number|（可选）结束尺寸| +|minimumParticleLife|Number|（可选）最小粒子周期| +|maximumParticleLife|Number|（可选）最大粒子周期| +|minimumSpeed|Number|（可选）最小速率| +|maximumSpeed|Number|（可选）最大速率| +|imageSize|Cartesian2|（可选）粒子图像大小| +|emissionRate|Number|（可选）排放率| +|minimumImageSize|Number|（可选）最小Image尺寸| +|maximumImageSize|Number|（可选）最大Image尺寸| +|lifetime|Number|（可选）单个粒子生命周期| +|emitter|Object|（可选）粒子发射器类型| +|gravity|Number|（可选）粒子重力| +|viewHeight|Number|（可选）用于控制粒子特效在0到该值范围内可见，范围外不可见，当值为-1时，默认全部可见| +|heading|Number|（可选）俯仰角| +|pitch|Number|（可选）偏航角| +|roll|Number|（可选）翻滚角| diff --git a/website/public/static/demo/military/markdown/clientView/clientView-snow.md b/website/public/static/demo/military/markdown/clientView/clientView-snow.md new file mode 100644 index 000000000..2909a17ba --- /dev/null +++ b/website/public/static/demo/military/markdown/clientView/clientView-snow.md @@ -0,0 +1,56 @@ +## 粒子特效-降雪 + +### 示例功能 + +    此功能用于在场景中添加降雪粒子特效功能，模拟降雪场景。 + +### 示例实现： + +    本示例需要使用【include-cesium-local.js】开发库实现，关键接口为`CesiumZondy.Manager.AdvancedAnalysisManager`类提供的`createSnow()`方法，实现添加降雪粒子特效功能。 + +>开发库使用请参见首页-概述-原生JS调用内容。 + +### 实现步骤： + +**Step 1. 引用开发库**： +    本示例引用local本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维WebGL的功能； + +**Step 2. 创建三维地图容器加载三维球控件,并加载底图**： +    创建 `id='GlobeView'` 的div作为三维视图的容器，并设置其样式，初始化Cesium三维球控件 `Cesium.WebSceneControl()` ，并调用`appendTDTuMap()` 方法加载天地图数据作为底图显示； + +**Step 3. 添加降雪粒子特效**： +    首先构造`CesiumZondy.Manager.AdvancedAnalysisManager`高级分析功能类对象，然后调用`createSnow()`方法添加降雪粒子特效，可通过可选参数实现降雪效果的调整。 + +* Example: + ``` Javascript + //初始化高级分析功能管理类 + var advancedAnalysisManager = new CesiumZondy.Manager.AdvancedAnalysisManager({ viewer: webGlobe.viewer }); + //添加下雪特效 + advancedAnalysisManager.createSnow({ + //色调 + hueShift: 0.7 + }); + ``` + + +### 关键接口 + +#### 1.【三维场景控件】 `CesiumZondy.WebSceneControl` + +#### 2.【高级分析功能管理类】 `CesiumZondy.Manager.AdvancedAnalysisManager` + +##### 【method】 `createSnow(options) → {Object}` ：创建下雪特效，返回下雪特效实例（Object） + +|参数名|类型|说明| +|-|-|-| +|options|Object|下雪特效参数| + +* `options` 主要属性 + +|参数名|类型|说明| +|-|-|-| +|hueShift|Number|（可选）色调| +|saturationShift|Number|（可选）饱和度| +|brightnessShift|Number|（可选）亮度| +|density|Number|（可选）密度| +|minimumBrightness|Number|（可选）最小亮度| \ No newline at end of file diff --git a/website/public/static/demo/military/markdown/clientView_Echarts/echarts-air.md b/website/public/static/demo/military/markdown/clientView_Echarts/echarts-air.md new file mode 100644 index 000000000..b7f943150 --- /dev/null +++ b/website/public/static/demo/military/markdown/clientView_Echarts/echarts-air.md @@ -0,0 +1,191 @@ +## 散点图-空气质量 + +### 示例功能 + +    本示例对接百度ECharts，实现在三维场景中加载ECharts散点图，基于全国主要城市空气质量数据实现散点图的可视化。 + +> 百度 ECharts + +ECharts完整、详细使用方法可参考：官方教程API，开发库下载可参考：官方下载 + +### 示例实现 + +    本示例需要使用【include-cesium-local.js】开发库实现，通过关键接口`CesiumZondy.Overlayer.EchartsLayer()`来实现ECharts图层的加载。 + +> 开发库使用请参见**首页**-**概述**-**原生JS调用**内容 + +> 特别说明：MapGIS Client for JavaScript在Cesium中对接了百度Echarts图表插件，若插件本身存在问题，请优先参考Echarts官网解决方案。 + +### 实现步骤 + +**Step 1. 引用开发库**： +    本示例引用local本地【include-cesium-local.js】开发库，需要设置`include`属性为`echarts`； + +* Example: + ```javascript + + ``` + +**Step 2. 创建三维地图容器加载三维球控件,并加载底图**： +    创建三维视图容器，构造三维场景控件，构造并设置鼠标位置显示控件，并加载第三方互联网地图作为底图； + +**Step 3. 数据准备**： +    准备全国主要城市的数据，包括名称、坐标点、空气质量，并按照格式要求进行处理； + +* Example: + ```javascript + function initData() { + data = [ + {name: '海门',value: 9}, + {name: '鄂尔多斯',value: 12}, + {name: '招远',value: 12}, + {name: '舟山',value: 12}, + ··· + ]; + geoCoordMap = { + '海门': [121.15, 31.89], + '鄂尔多斯': [109.781327, 39.608266], + '招远': [120.38, 37.35], + '舟山': [122.207216, 29.985295], + ··· + }; + } + + function convertData(data) { + var res = []; + for (var i = 0; i < data.length; i++) { + var geoCoord = geoCoordMap[data[i].name]; + if (geoCoord) { + res.push({ + name: data[i].name, + value: geoCoord.concat(data[i].value) + }); + } + } + return res; + }; + ``` + +**Step 4. 配置参数项**： +    创建各种需要的组件，如标题、图例、提示框等，其中最关键的是“series-系列”组件，构造完成后，即可调用`CesiumZondy.Overlayer.EchartsLayer(map, option).addTo(map)`方法，将ECharts图层添加到三维场景中。 + +* Example: + ```javascript + function initEcharts() { + option = { + title: { + text: '全国主要城市空气质量 - 百度地图提供数据', + textStyle: { + color: '#eee' + }, + subtext: 'data from PM25.in', + sublink: 'http://www.pm25.in', + left: 'center' + }, + legend: { + orient: 'vertical', + y: 'top', + x: 'left', + data: ['pm2.5'], + textStyle: { + color: '#fff' + } + }, + tooltip: { + trigger: 'item' + }, + cesium: { + roam: true + }, + series: [{ + name: 'pm2.5', + type: 'scatter', + coordinateSystem: 'cesium', + data: convertData(data), + symbolSize: function (val) { + return val[2] / 10; + }, + showEffectOn: 'render', + rippleEffect: { + brushType: 'stroke' + }, + hoverAnimation: true, + label: { + normal: { + formatter: '{b}', + position: 'right', + show: false + }, + emphasis: { + show: true + } + }, + itemStyle: { + normal: { + color: '#ddb926' + } + }, + zlevel: 1 + }, + { + name: 'Top 5', + type: 'effectScatter', + coordinateSystem: 'cesium', + data: convertData(data.sort(function (a, b) { + return b.value - a.value; + }).slice(0, 6)), + symbolSize: function (val) { + return val[2] / 10; + }, + showEffectOn: 'render', + rippleEffect: { + brushType: 'stroke' + }, + hoverAnimation: true, + label: { + normal: { + formatter: '{b}', + position: 'right', + show: true + } + }, + itemStyle: { + normal: { + color: '#f4e925', + shadowBlur: 10, + shadowColor: '#333' + } + }, + zlevel: 1 + } + ] + } + layer = new CesiumZondy.Overlayer.EchartsLayer(map, option).addTo(map); + } + ``` + + +### 关键接口 + +#### 1.【ECharts图层类】`CesiumZondy.Overlayer.EchartsLayer(map, option)` + +    基于mapboxgl的Layer对象进行的拓展，通过该拓展可以提供echarts的可视化功能。 + +| 参数名 | 类型 | 描述 | +| ------- | ------ | ------------------------------------------------------------ | +| map | Object | 传入的Cesium的地图对象 | +| option | Object | echarts.options 使用 option 来描述其对图表的各种需求，包括：有什么数据、要画什么图表、图表长什么样子、含有什么组件、组件能操作什么事情等等。简而言之，option 表述了：数据、数据如何映射成图形、交互行为。 | + +##### 【method】`hide()`：隐藏图层 + +##### 【method】`remove()`：删除图层 + +##### 【method】`show()`：显示图层 + +##### 【method】`update(option)`：更新图层 + +    ECharts 由数据驱动，数据的改变驱动图表展现的改变，因此动态数据的实现也变得异常简单。所有数据的更新都通过 setOption实现，你只需要定时获取数据，setOption 填入数据，而不用考虑数据到底产生了那些变化，ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。 + +| 参数 | 类型 | 描述 | +| ------ | ---- | -------------- | +| option | * | echarts.option | diff --git a/website/public/static/demo/military/markdown/clientView_Echarts/echarts-biggps.md b/website/public/static/demo/military/markdown/clientView_Echarts/echarts-biggps.md new file mode 100644 index 000000000..65d1554dc --- /dev/null +++ b/website/public/static/demo/military/markdown/clientView_Echarts/echarts-biggps.md @@ -0,0 +1,133 @@ +## 散点图-世界1000万GPS点 + +### 示例功能 + +    本示例对接百度ECharts，实现在三维场景中加载ECharts散点图，基于世界1000万GPS点数据实现散点图的可视化。 + +> 百度 ECharts + +    ECharts完整、详细使用方法可参考：官方教程API，开发库下载可参考：官方下载 + +### 示例实现 + +    本示例需要使用【include-cesium-local.js】开发库实现，通过关键接口`CesiumZondy.Overlayer.EchartsLayer()`来实现ECharts图层的加载。 + +> 开发库使用请参见**首页**-**概述**-**原生JS调用**内容 + +> 特别说明：MapGIS Client for JavaScript在Cesium中对接了百度Echarts图表插件，若插件本身存在问题，请优先参考Echarts官网解决方案。 + +### 实现步骤 + +**Step 1. 引用开发库**： +    本示例引用local本地【include-cesium-local.js】开发库，需要设置`include`属性为`echarts`； + +* Example: + ```javascript + + ``` + +**Step 2. 创建三维地图容器加载三维球控件,并加载底图**： +     创建三维视图容器，构造三维场景控件，构造并设置鼠标位置显示控件，并加载第三方互联网地图作为底图； + +**Step 3. 数据准备**： +    本示例从离线数据文件中获取世界1000万GPS数据点，然后按照格式要求进行处理； + +* Example: + ```javascript + var dataCount = 0; + var CHUNK_COUNT = 230; + function fetchData(idx) { + if (idx >= CHUNK_COUNT) { + return; + } + var dataURL = `./static/data/echarts/gps/gps_${idx}.bin`; + var xhr = new XMLHttpRequest(); + xhr.open('GET', dataURL, true); + xhr.responseType = 'arraybuffer'; + xhr.onload = function (e) { + var rawData = new Int32Array(this.response); + var data = new Float32Array(rawData.length); + var addedDataCount = rawData.length / 2; + for (var i = 0; i < rawData.length; i += 2) { + data[i] = rawData[i + 1] / 1e7; + data[i + 1] = rawData[i] / 1e7; + } + layer.chart.appendData({ + seriesIndex: 0, + data: data + }); + fetchData(idx + 1); + } + xhr.send(); + } + ``` + +**Step 4. 配置参数项**： +    创建各种需要的组件，如标题、图例、提示框等，其中最关键的是“series-系列”组件，构造完成后，即可调用`CesiumZondy.Overlayer.EchartsLayer(map, option).addTo(map)`方法，将ECharts图层添加到三维场景中。 + +* Example: + ```javascript + function initEcharts() { + var option = { + //backgroundColor: '#000', + title: { + text: 'OSM公开GPS轨迹（千万级）', + left: 'center', + textStyle: { + color: '#fff' + } + }, + cesium: { + roam: false + }, + series: [{ + name: '弱', + type: 'scatterGL', + progressive: 20000, + coordinateSystem: 'cesium', + symbolSize: 1, + zoomScale: 0.002, + blendMode: 'lighter', + largeThreshold: 50000, + large: true, + itemStyle: { + color: 'rgb(20, 15, 2)' + }, + postEffect: { + enable: true + }, + silent: true, + dimensions: ['lng', 'lat'], + data: new Float32Array() + }] + }; + layer = new CesiumZondy.Overlayer.EchartsLayer(map, option).addTo(map); + fetchData(0); + } + ``` + + +### 关键接口 + +#### 1.【ECharts图层类】`CesiumZondy.Overlayer.EchartsLayer(map, option)` + +    基于mapboxgl的Layer对象进行的拓展，通过该拓展可以提供echarts的可视化功能。 + +| 参数名 | 类型 | 描述 | +| ------- | ------ | ------------------------------------------------------------ | +| map | Object | 传入的Cesium的地图对象 | +| option | Object | echarts.options 使用 option 来描述其对图表的各种需求，包括：有什么数据、要画什么图表、图表长什么样子、含有什么组件、组件能操作什么事情等等。简而言之，option 表述了：数据、数据如何映射成图形、交互行为。 | + +##### 【method】`hide()`：隐藏图层 + +##### 【method】`remove()`：删除图层 + +##### 【method】`show()`：显示图层 + +##### 【method】`update(option)`：更新图层 + +    ECharts 由数据驱动，数据的改变驱动图表展现的改变，因此动态数据的实现也变得异常简单。所有数据的更新都通过 setOption实现，你只需要定时获取数据，setOption 填入数据，而不用考虑数据到底产生了那些变化，ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。 + +| 参数 | 类型 | 描述 | +| ------ | ---- | -------------- | +| option | * | echarts.option | diff --git a/website/public/static/demo/military/markdown/clientView_Echarts/echarts-bigline.md b/website/public/static/demo/military/markdown/clientView_Echarts/echarts-bigline.md new file mode 100644 index 000000000..26df4ccd4 --- /dev/null +++ b/website/public/static/demo/military/markdown/clientView_Echarts/echarts-bigline.md @@ -0,0 +1,130 @@ +## 路径图-纽约100万线 + +### 示例功能 + +    本示例对接百度ECharts，实现在三维场景中加载ECharts路径图，基于纽约100万线数据实现路径图的可视化。 + +> 百度 ECharts + +    ECharts完整、详细使用方法可参考：官方教程API，开发库下载可参考：官方下载 + +### 示例实现 + +    本示例需要使用【include-cesium-local.js】开发库实现，通过关键接口`CesiumZondy.Overlayer.EchartsLayer()`来实现ECharts图层的加载。 + +> 开发库使用请参见**首页**-**概述**-**原生JS调用**内容 + +> 特别说明：MapGIS Client for JavaScript在Cesium中对接了百度Echarts图表插件，若插件本身存在问题，请优先参考Echarts官网解决方案。 + +### 实现步骤 + +**Step 1. 引用开发库**： +    本示例引用local本地【include-cesium-local.js】开发库，需要设置`include`属性为`echarts`； + +* Example: + ```javascript + + ``` + +**Step 2. 创建三维地图容器加载三维球控件,并加载底图**： +    创建三维视图容器，构造三维场景控件，构造并设置鼠标位置显示控件，并加载第三方互联网地图作为底图； + +**Step 3. 数据准备**： +    本示例从离线数据文件中获取纽约100万线数据，然后按照格式要求进行处理； + +* Example: + ```javascript + var CHUNK_COUNT = 32; + var dataCount = 0; + function fetchData(idx) { + if (idx >= CHUNK_COUNT) { + return; + } + var dataURL = `./static/data/echarts/line/links_ny_${idx}.bin`; + var xhr = new XMLHttpRequest(); + xhr.open('GET', dataURL, true); + xhr.responseType = 'arraybuffer'; + xhr.onload = function (e) { + var rawData = new Float32Array(this.response); + var data = new Float64Array(rawData.length - 2); + var offsetX = rawData[0]; + var offsetY = rawData[1]; + var off = 0; + var addedDataCount = 0; + for (var i = 2; i < rawData.length;) { + var count = rawData[i++]; + data[off++] = count; + for (var k = 0; k < count; k++) { + var x = rawData[i++] + offsetX; + var y = rawData[i++] + offsetY; + data[off++] = x; + data[off++] = y; + + addedDataCount++; + } + } + layer.chart.appendData({ + seriesIndex: 0, + data: data + }); + dataCount += addedDataCount; + fetchData(idx + 1); + } + xhr.send(); + } + ``` + +**Step 4. 配置参数项**： +    创建各种需要的组件，如标题、图例、提示框等，其中最关键的是“series-系列”组件，构造完成后，即可调用`CesiumZondy.Overlayer.EchartsLayer(map, option).addTo(map)`方法，将ECharts图层添加到三维场景中。 + +* Example: + ```javascript + function initEcharts() { + var option = { + progressive: 2000, + cesium: { + roam: true + }, + series: [{ + type: 'lines', + coordinateSystem: 'cesium', + blendMode: 'lighter', + dimensions: ['value'], + data: new Float64Array(), + polyline: true, + large: true, + lineStyle: { + color: 'red', + width: 0.5, + opacity: 0.3 + } + }] + } + layer = new CesiumZondy.Overlayer.EchartsLayer(map, option).addTo(map); + } + ``` + +### 关键接口 + +#### 1.【ECharts图层类】`CesiumZondy.Overlayer.EchartsLayer(map, option)` + +    基于mapboxgl的Layer对象进行的拓展，通过该拓展可以提供echarts的可视化功能。 + +| 参数名 | 类型 | 描述 | +| ------- | ------ | ------------------------------------------------------------ | +| map | Object | 传入的Cesium的地图对象 | +| option | Object | echarts.options 使用 option 来描述其对图表的各种需求，包括：有什么数据、要画什么图表、图表长什么样子、含有什么组件、组件能操作什么事情等等。简而言之，option 表述了：数据、数据如何映射成图形、交互行为。 | + +##### 【method】`hide()`：隐藏图层 + +##### 【method】`remove()`：删除图层 + +##### 【method】`show()`：显示图层 + +##### 【method】`update(option)`：更新图层 + +    ECharts 由数据驱动，数据的改变驱动图表展现的改变，因此动态数据的实现也变得异常简单。所有数据的更新都通过 setOption实现，你只需要定时获取数据，setOption 填入数据，而不用考虑数据到底产生了那些变化，ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。 + +| 参数 | 类型 | 描述 | +| ------ | ---- | -------------- | +| option | * | echarts.option | \ No newline at end of file diff --git a/website/public/static/demo/military/markdown/clientView_Echarts/echarts-bigpoint.md b/website/public/static/demo/military/markdown/clientView_Echarts/echarts-bigpoint.md new file mode 100644 index 000000000..d01ae8a65 --- /dev/null +++ b/website/public/static/demo/military/markdown/clientView_Echarts/echarts-bigpoint.md @@ -0,0 +1,126 @@ +## 散点图-140万纽约出租车 + +### 示例功能 + +    本示例对接百度ECharts，实现在三维场景中加载ECharts散点图，基于纽约140万出租车数据实现散点图的可视化。 + +> 百度 ECharts + +    ECharts完整、详细使用方法可参考：官方教程API，开发库下载可参考：官方下载 + +### 示例实现 + +    本示例需要使用【include-cesium-local.js】开发库实现，通过关键接口`CesiumZondy.Overlayer.EchartsLayer()`来实现ECharts图层的加载。 + +> 开发库使用请参见**首页**-**概述**-**原生JS调用**内容 + +> 特别说明：MapGIS Client for JavaScript在Cesium中对接了百度Echarts图表插件，若插件本身存在问题，请优先参考Echarts官网解决方案。 + +### 实现步骤 + +**Step 1. 引用开发库**： +    本示例引用local本地【include-cesium-local.js】开发库，需要设置`include`属性为`echarts`； + +* Example: + ```javascript + + ``` + +**Step 2. 创建三维地图容器加载三维球控件,并加载底图**： +     创建三维视图容器，构造三维场景控件，构造并设置鼠标位置显示控件，并加载第三方互联网地图作为底图； + +**Step 3. 数据准备**： +    本示例从离线数据文件中获取纽约市140万出租车的数据点，然后按照格式要求进行处理； + +* Example: + ```javascript + var CHUNK_COUNT = 19; + function fetchData(idx) { + if (idx >= CHUNK_COUNT) { + return; + } + var dataURL = `./static/data/echarts/point/data_${idx}.bin`; + var xhr = new XMLHttpRequest(); + xhr.open('GET', dataURL, true); + xhr.responseType = 'arraybuffer'; + xhr.onload = function (e) { + var rawData = new Float32Array(this.response); + layer.chart + .appendData({ + seriesIndex: 0, + data: rawData + }); + fetchData(idx + 1); + }; + xhr.send(); + } + ``` + +**Step 4. 配置参数项**： +    创建各种需要的组件，如标题、图例、提示框等，其中最关键的是“series-系列”组件，构造完成后，即可调用`CesiumZondy.Overlayer.EchartsLayer(map, option).addTo(map)`方法，将ECharts图层添加到三维场景中。 + +* Example: + ```javascript + function initEcharts() { + var option = { + title: { + top: '10px', + text: "140万纽约出租车", + subtext: "数据来自纽约出租车以及Uber", + left: 'center', + textStyle: { + color: '#fff' + }, + subtextStyle: { + color: '#fff' + } + }, + cesium: { + roam: true + }, + series: [{ + type: 'scatterGL', + progressive: 2000, + coordinateSystem: 'cesium', + symbolSize: 0.5, + blendMode: 'lighter', + large: true, + itemStyle: { + color: '#FF0000', + }, + postEffect: { + enable: true + }, + silent: true, + dimensions: ['lng', 'lat'], + data: new Float32Array() + }] + }; + layer = new CesiumZondy.Overlayer.EchartsLayer(map, option).addTo(map); + } + ``` + +### 关键接口 + +#### 1.【ECharts图层类】`CesiumZondy.Overlayer.EchartsLayer(map, option)` + +    基于mapboxgl的Layer对象进行的拓展，通过该拓展可以提供echarts的可视化功能。 + +| 参数名 | 类型 | 描述 | +| ------- | ------ | ------------------------------------------------------------ | +| map | Object | 传入的Cesium的地图对象 | +| option | Object | echarts.options 使用 option 来描述其对图表的各种需求，包括：有什么数据、要画什么图表、图表长什么样子、含有什么组件、组件能操作什么事情等等。简而言之，option 表述了：数据、数据如何映射成图形、交互行为。 | + +##### 【method】`hide()`：隐藏图层 + +##### 【method】`remove()`：删除图层 + +##### 【method】`show()`：显示图层 + +##### 【method】`update(option)`：更新图层 + +    ECharts 由数据驱动，数据的改变驱动图表展现的改变，因此动态数据的实现也变得异常简单。所有数据的更新都通过 setOption实现，你只需要定时获取数据，setOption 填入数据，而不用考虑数据到底产生了那些变化，ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。 + +| 参数 | 类型 | 描述 | +| ------ | ---- | -------------- | +| option | * | echarts.option | diff --git a/website/public/static/demo/military/markdown/clientView_Echarts/echarts-bigroad.md b/website/public/static/demo/military/markdown/clientView_Echarts/echarts-bigroad.md new file mode 100644 index 000000000..54e73824c --- /dev/null +++ b/website/public/static/demo/military/markdown/clientView_Echarts/echarts-bigroad.md @@ -0,0 +1,121 @@ +## 路径图-中国100万线 + +### 示例功能 + +    本示例对接百度ECharts，实现在三维场景中加载ECharts路径图，基于中国100万线数据实现路径图的可视化。 + +> 百度 ECharts + +    ECharts完整、详细使用方法可参考：官方教程API，开发库下载可参考：官方下载 + +### 示例实现 + +    本示例需要使用【include-cesium-local.js】开发库实现，通过关键接口`CesiumZondy.Overlayer.EchartsLayer()`来实现ECharts图层的加载。 + +> 开发库使用请参见**首页**-**概述**-**原生JS调用**内容 + +> 特别说明：MapGIS Client for JavaScript在Cesium中对接了百度Echarts图表插件，若插件本身存在问题，请优先参考Echarts官网解决方案。 + +### 实现步骤 + +**Step 1. 引用开发库**： +    本示例引用local本地【include-cesium-local.js】开发库，需要设置`include`属性为`echarts`； + +* Example: + ```javascript + + ``` + +**Step 2. 创建三维地图容器加载三维球控件,并加载底图**： +     创建三维视图容器，构造三维场景控件，构造并设置鼠标位置显示控件，并加载第三方互联网地图作为底图； + +**Step 3. 数据准备**： +    本示例从离线数据文件中获取中国100万线数据，然后按照格式要求进行处理； + +* Example: + ```javascript + var CHUNK_COUNT = 28; + var dataCount = 0; + function fetchData(idx) { + if (idx >= CHUNK_COUNT) { + return; + } + var dataURL = `./static/data/echarts/road/road_${idx}.bin`; + var xhr = new XMLHttpRequest(); + xhr.open('GET', dataURL, true); + xhr.responseType = 'arraybuffer'; + xhr.onload = function (e) { + var rawData = new Float32Array(this.response); + var addedDataCount = 0; + layer.chart.appendData({ + seriesIndex: 0, + data: rawData + }); + dataCount += addedDataCount; + fetchData(idx + 1); + } + xhr.send(); + } + ``` + +**Step 4. 配置参数项**： +    创建各种需要的组件，如标题、图例、提示框等，其中最关键的是“series-系列”组件，构造完成后，即可调用`CesiumZondy.Overlayer.EchartsLayer(map, option).addTo(map)`方法，将ECharts图层添加到三维场景中。 + +* Example: + ```javascript + function initEcharts() { + var option = { + title: { + text: '全国道路（百万级）', + left: 'center', + textStyle: { + color: '#fff' + } + }, + progressive: 5000, + cesium: { + roam: true + }, + series: [{ + type: 'lines', + coordinateSystem: 'cesium', + blendMode: 'lighter', + dimensions: ['value'], + data: new Float64Array(), + polyline: true, + large: true, + lineStyle: { + color: 'blue', + width: 1.0, + opacity: 0.9 + } + }] + } + layer = new CesiumZondy.Overlayer.EchartsLayer(map, option).addTo(map); + } + ``` + +### 关键接口 + +#### 1.【ECharts图层类】`CesiumZondy.Overlayer.EchartsLayer(map, option)` + +    基于mapboxgl的Layer对象进行的拓展，通过该拓展可以提供echarts的可视化功能。 + +| 参数名 | 类型 | 描述 | +| ------- | ------ | ------------------------------------------------------------ | +| map | Object | 传入的Cesium的地图对象 | +| option | Object | echarts.options 使用 option 来描述其对图表的各种需求，包括：有什么数据、要画什么图表、图表长什么样子、含有什么组件、组件能操作什么事情等等。简而言之，option 表述了：数据、数据如何映射成图形、交互行为。 | + +##### 【method】`hide()`：隐藏图层 + +##### 【method】`remove()`：删除图层 + +##### 【method】`show()`：显示图层 + +##### 【method】`update(option)`：更新图层 + +    ECharts 由数据驱动，数据的改变驱动图表展现的改变，因此动态数据的实现也变得异常简单。所有数据的更新都通过 setOption实现，你只需要定时获取数据，setOption 填入数据，而不用考虑数据到底产生了那些变化，ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。 + +| 参数 | 类型 | 描述 | +| ------ | ---- | -------------- | +| option | * | echarts.option | diff --git a/website/public/static/demo/military/markdown/clientView_Echarts/echarts-grid.md b/website/public/static/demo/military/markdown/clientView_Echarts/echarts-grid.md new file mode 100644 index 000000000..2095f1eff --- /dev/null +++ b/website/public/static/demo/military/markdown/clientView_Echarts/echarts-grid.md @@ -0,0 +1,158 @@ +## 自定义-网格专题图 + +### 示例功能 + +    本示例对接百度ECharts，实现在三维场景中加载自定义的网格专题图。 + +> 百度 ECharts + +    ECharts完整、详细使用方法可参考：官方教程API，开发库下载可参考：官方下载 + +### 示例实现 + +    本示例需要使用【include-cesium-local.js】开发库实现，通过关键接口`CesiumZondy.Overlayer.EchartsLayer()`来实现ECharts图层的加载。 + +> 开发库使用请参见**首页**-**概述**-**原生JS调用**内容 + +> 特别说明：MapGIS Client for JavaScript在Cesium中对接了百度Echarts图表插件，若插件本身存在问题，请优先参考Echarts官网解决方案。 + +### 实现步骤 + +**Step 1. 引用开发库**： +    本示例引用local本地【include-cesium-local.js】开发库，需要设置`include`属性为`echarts`； + +* Example: + ```javascript + + ``` + +**Step 2. 创建三维地图容器加载三维球控件,并加载底图**： +     创建三维视图容器，构造三维场景控件，构造并设置鼠标位置显示控件，并加载第三方互联网地图作为底图； + +**Step 3. 数据准备**： +    准备网格数据，并按照格式要求进行处理； + +* Example: + ```javascript + function renderItemFunc(params, api) { + var context = params.context; + var lngIndex = api.value(0); + var latIndex = api.value(1); + var coordLeftTop = [+(latExtent[0] + lngIndex * cellSizeCoord[0]).toFixed(6), +(lngExtent[0] + latIndex * + cellSizeCoord[1]).toFixed(6)]; + var pointLeftTop = getCoord(params, api, lngIndex, latIndex); + var pointRightBottom = getCoord(params, api, lngIndex + 1, latIndex + 1); + return { + type: 'rect', + shape: { + x: pointLeftTop[0], + y: pointLeftTop[1], + width: pointRightBottom[0] - pointLeftTop[0], + height: pointRightBottom[1] - pointLeftTop[1] + }, + style: api.style({ + stroke: 'rgba(0,0,0,0.1)' + }), + styleEmphasis: api.styleEmphasis() + }; + } + function getCoord(params, api, lngIndex, latIndex) { + var coords = params.context.coords || (params.context.coords = []); + var key = lngIndex + '-' + latIndex; + return coords[key] || (coords[key] = api.coord([+(latExtent[0] + lngIndex * cellSizeCoord[0]).toFixed(6), + + (lngExtent[0] + latIndex * cellSizeCoord[1]).toFixed(6) + ])); + } + ``` + +**Step 4. 配置参数项**： +    创建各种需要的组件，如标题、图例、提示框等，其中最关键的是“series-系列”组件，构造完成后，即可调用`CesiumZondy.Overlayer.EchartsLayer(map, option).addTo(map)`方法，将ECharts图层添加到三维场景中。 + +* Example: + ```javascript + function initEcharts() { + var option = { + tooltip: {}, + visualMap: { + type: 'piecewise', + inverse: true, + top: 10, + left: 10, + pieces: [{ + value: 0, + color: COLORS[0] + }, { + value: 1, + color: COLORS[1] + }, { + value: 2, + color: COLORS[2] + }, { + value: 3, + color: COLORS[3] + }, { + value: 4, + color: COLORS[4] + }, { + value: 5, + color: COLORS[5] + }], + borderColor: '#ccc', + borderWidth: 1, + backgroundColor: '#eee', + dimension: 2, + inRange: { + color: COLORS, + opacity: 0.8 + } + }, + cesium: { + roam: true + }, + geo: { + geoIndex: 0 + }, + series: [{ + type: 'custom', + coordinateSystem: 'cesium', + data: griddata, + renderItem: renderItemFunc, + animation: false, + itemStyle: { + emphasis: { + color: 'yellow' + } + }, + encode: { + tooltip: 2 + } + }] + }; + layer = new CesiumZondy.Overlayer.EchartsLayer(map, option).addTo(map); + } + ``` + +### 关键接口 + +#### 1.【ECharts图层类】`CesiumZondy.Overlayer.EchartsLayer(map, option)` + +    基于mapboxgl的Layer对象进行的拓展，通过该拓展可以提供echarts的可视化功能。 + +| 参数名 | 类型 | 描述 | +| ------- | ------ | ------------------------------------------------------------ | +| map | Object | 传入的Cesium的地图对象 | +| option | Object | echarts.options 使用 option 来描述其对图表的各种需求，包括：有什么数据、要画什么图表、图表长什么样子、含有什么组件、组件能操作什么事情等等。简而言之，option 表述了：数据、数据如何映射成图形、交互行为。 | + +##### 【method】`hide()`：隐藏图层 + +##### 【method】`remove()`：删除图层 + +##### 【method】`show()`：显示图层 + +##### 【method】`update(option)`：更新图层 + +    ECharts 由数据驱动，数据的改变驱动图表展现的改变，因此动态数据的实现也变得异常简单。所有数据的更新都通过 setOption实现，你只需要定时获取数据，setOption 填入数据，而不用考虑数据到底产生了那些变化，ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。 + +| 参数 | 类型 | 描述 | +| ------ | ---- | -------------- | +| option | * | echarts.option | diff --git a/website/public/static/demo/military/markdown/clientView_Echarts/echarts-heater.md b/website/public/static/demo/military/markdown/clientView_Echarts/echarts-heater.md new file mode 100644 index 000000000..8990c6cbf --- /dev/null +++ b/website/public/static/demo/military/markdown/clientView_Echarts/echarts-heater.md @@ -0,0 +1,132 @@ +## 热力图-主要城市PM 2.5 + +### 示例功能 + +    本示例对接百度ECharts，实现在三维场景中加载ECharts热力图，基于全国主要城市PM 2.5数据实现热力图的可视化。热力图采用特殊高亮的形式显示访客热衷的页面区域和访客所在的地理区域。 + +> 百度 ECharts + +    ECharts完整、详细使用方法可参考：官方教程API，开发库下载可参考：官方下载 + +### 示例实现 + +    本示例需要使用【include-cesium-local.js】开发库实现，通过关键接口`CesiumZondy.Overlayer.EchartsLayer()`来实现ECharts图层的加载。 + +> 开发库使用请参见**首页**-**概述**-**原生JS调用**内容 + +> 特别说明：MapGIS Client for JavaScript在Cesium中对接了百度Echarts图表插件，若插件本身存在问题，请优先参考Echarts官网解决方案。 + +### 实现步骤 + +**Step 1. 引用开发库**： +    本示例引用local本地【include-cesium-local.js】开发库，需要设置`include`属性为`echarts`； + +* Example: + ```javascript + + ``` + +**Step 2. 创建三维地图容器加载三维球控件,并加载底图**： +     创建三维视图容器，构造三维场景控件，构造并设置鼠标位置显示控件，并加第三方互联网地图作为底图； + +**Step 3. 数据准备**： +    准备全国主要城市的数据，包括名称、坐标点、PM 2.5值，并按照格式要求进行处理； + +* Example: + ```javascript + function initData() { + data = [ + {name: "海门",value: 9,}, + {name: "鄂尔多斯",value: 12,}, + {name: "招远",value: 12,}, + ··· + ]; + geoCoordMap = { + 海门: [121.15, 31.89], + 鄂尔多斯: [109.781327, 39.608266], + 招远: [120.38, 37.35], + ··· + }; + } + function convertData(data) { + var res = []; + for (var i = 0; i < data.length; i++) { + var geoCoord = geoCoordMap[data[i].name]; + if (geoCoord) { + res.push({ + name: data[i].name, + value: geoCoord.concat(data[i].value), + }); + } + } + return res; + } + ``` + +**Step 4. 配置参数项**： +    创建各种需要的组件，如标题、图例、提示框等，其中最关键的是“series-系列”组件，构造完成后，即可调用`CesiumZondy.Overlayer.EchartsLayer(map, option).addTo(map)`方法，将ECharts图层添加到三维场景中。 + +* Example: + ```javascript + option = { + title: { + text: "全国主要城市PM 2.5热力图", + textStyle: { + color: "#eee", + }, + subtext: "data from PM25.in", + sublink: "http://www.pm25.in", + left: "center", + }, + cesium: { + roam: false, + }, + visualMap: { + show: false, + top: "top", + min: 0, + max: 5, + seriesIndex: 0, + calculable: true, + inRange: { + color: ["blue", "blue", "green", "yellow", "red"], + }, + }, + series: [ + { + name: "热力图", + type: "heatmap", + coordinateSystem: "cesium", + data: convertData(data), + pointSize: 5, + blurSize: 6, + }, + ], + }; + layer = new CesiumZondy.Overlayer.EchartsLayer(map, option).addTo(map); + ``` + +### 关键接口 + +#### 1.【ECharts图层类】`CesiumZondy.Overlayer.EchartsLayer(map, option)` + +    基于mapboxgl的Layer对象进行的拓展，通过该拓展可以提供echarts的可视化功能。 + +| 参数名 | 类型 | 描述 | +| ------- | ------ | ------------------------------------------------------------ | +| map | Object | 传入的Cesium的地图对象 | +| option | Object | echarts.options 使用 option 来描述其对图表的各种需求，包括：有什么数据、要画什么图表、图表长什么样子、含有什么组件、组件能操作什么事情等等。简而言之，option 表述了：数据、数据如何映射成图形、交互行为。 | + +##### 【method】`hide()`：隐藏图层 + +##### 【method】`remove()`：删除图层 + +##### 【method】`show()`：显示图层 + +##### 【method】`update(option)`：更新图层 + +    ECharts 由数据驱动，数据的改变驱动图表展现的改变，因此动态数据的实现也变得异常简单。所有数据的更新都通过 setOption实现，你只需要定时获取数据，setOption 填入数据，而不用考虑数据到底产生了那些变化，ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。 + +| 参数 | 类型 | 描述 | +| ------ | ---- | -------------- | +| option | * | echarts.option | diff --git a/website/public/static/demo/military/markdown/clientView_Echarts/echarts-line.md b/website/public/static/demo/military/markdown/clientView_Echarts/echarts-line.md new file mode 100644 index 000000000..0372345f2 --- /dev/null +++ b/website/public/static/demo/military/markdown/clientView_Echarts/echarts-line.md @@ -0,0 +1,106 @@ +## 路径图-渐进绘制 + +### 示例功能 + +    本示例对接百度ECharts，实现在三维场景中加载ECharts路径图，基于北京市公交路线数据实现路径图的渐进绘制。 + +> 百度 ECharts + +    ECharts完整、详细使用方法可参考：官方教程API，开发库下载可参考：官方下载 + +### 示例实现 + +    本示例需要使用【include-cesium-local.js】开发库实现，通过关键接口`CesiumZondy.Overlayer.EchartsLayer()`来实现ECharts图层的加载。 + +> 开发库使用请参见**首页**-**概述**-**原生JS调用**内容 + +> 特别说明：MapGIS Client for JavaScript在Cesium中对接了百度Echarts图表插件，若插件本身存在问题，请优先参考Echarts官网解决方案。 + +### 实现步骤 + +**Step 1. 引用开发库**： +    本示例引用local本地【include-cesium-local.js】开发库，需要设置`include`属性为`echarts`； + +* Example: + ```javascript + + ``` + +**Step 2. 创建三维地图容器加载三维球控件,并加载底图**： +     创建三维视图容器，构造三维场景控件，构造并设置鼠标位置显示控件，并加载第三方互联网地图作为底图； + +**Step 3. 数据准备、配置参数项**： +    本示例从json文件中读取北京市公交路线数据，并按照格式要求进行处理；然后构建配置项，并创建各种需要的组件，其中最关键的是“series-系列”组件；构造完成后，即可调用`CesiumZondy.Overlayer.EchartsLayer(map, option).addTo(map)`方法，将ECharts图层添加到三维场景中。 + +* Example: + ```javascript + $.get('./static/data/echarts/line-bus.json', function (data) { + busLines = [].concat.apply([], data.map(function (busLine, idx) { + var prevPt; + var points = []; + for (var i = 0; i < busLine.length; i += 2) { + var pt = [busLine[i], busLine[i + 1]]; + if (i > 0) { + pt = [ + prevPt[0] + pt[0], + prevPt[1] + pt[1] + ]; + } + prevPt = pt; + points.push([pt[0] / 1e4, pt[1] / 1e4]); + } + return { + coords: points + }; + })); + var option = { + cesium: { + roam: true + }, + series: [{ + type: 'lines', + coordinateSystem: 'cesium', + polyline: true, + data: busLines, + silent: true, + lineStyle: { + normal: { + color: '#c23531', + color: 'rgb(200, 35, 45)', + opacity: 0.2, + width: 1 + } + }, + progressiveThreshold: 500, + progressive: 200 + }] + } + layer = new CesiumZondy.Overlayer.EchartsLayer(map, option).addTo(map); + }); + ``` + +### 关键接口 + +#### 1.【ECharts图层类】`CesiumZondy.Overlayer.EchartsLayer(map, option)` + +    基于mapboxgl的Layer对象进行的拓展，通过该拓展可以提供echarts的可视化功能。 + +| 参数名 | 类型 | 描述 | +| ------- | ------ | ------------------------------------------------------------ | +| map | Object | 传入的Cesium的地图对象 | +| option | Object | echarts.options 使用 option 来描述其对图表的各种需求，包括：有什么数据、要画什么图表、图表长什么样子、含有什么组件、组件能操作什么事情等等。简而言之，option 表述了：数据、数据如何映射成图形、交互行为。 | + +##### 【method】`hide()`：隐藏图层 + +##### 【method】`remove()`：删除图层 + +##### 【method】`show()`：显示图层 + +##### 【method】`update(option)`：更新图层 + +    ECharts 由数据驱动，数据的改变驱动图表展现的改变，因此动态数据的实现也变得异常简单。所有数据的更新都通过 setOption实现，你只需要定时获取数据，setOption 填入数据，而不用考虑数据到底产生了那些变化，ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。 + +| 参数 | 类型 | 描述 | +| ------ | ---- | -------------- | +| option | * | echarts.option | + diff --git a/website/public/static/demo/military/markdown/clientView_Echarts/echarts-lineanimate.md b/website/public/static/demo/military/markdown/clientView_Echarts/echarts-lineanimate.md new file mode 100644 index 000000000..2c541ae90 --- /dev/null +++ b/website/public/static/demo/military/markdown/clientView_Echarts/echarts-lineanimate.md @@ -0,0 +1,129 @@ +## 路径图-公交路线 + +### 示例功能 + +    本示例对接百度ECharts，实现在三维场景中加载ECharts路径图，基于北京市公交路线数据实现路径图的绘制。 + +> 百度 ECharts + +    ECharts完整、详细使用方法可参考：官方教程API，开发库下载可参考：官方下载 + +### 示例实现 + +    本示例需要使用【include-cesium-local.js】开发库实现，通过关键接口`CesiumZondy.Overlayer.EchartsLayer()`来实现ECharts图层的加载。 + +> 开发库使用请参见**首页**-**概述**-**原生JS调用**内容 + +> 特别说明：MapGIS Client for JavaScript在Cesium中对接了百度Echarts图表插件，若插件本身存在问题，请优先参考Echarts官网解决方案。 + +### 实现步骤 + +**Step 1. 引用开发库**： +    本示例引用local本地【include-cesium-local.js】开发库，需要设置`include`属性为`echarts`； + +* Example: + ```javascript + + ``` + +**Step 2. 创建三维地图容器加载三维球控件,并加载底图**： +     创建三维视图容器，构造三维场景控件，构造并设置鼠标位置显示控件，并加载第三方互联网地图作为底图； + +**Step 3. 数据准备、配置参数项**： +    本示例从json文件中读取北京市公交路线数据，并按照格式要求进行处理；然后构建配置项，并创建各种需要的组件，其中最关键的是“series-系列”组件；构造完成后，即可调用`CesiumZondy.Overlayer.EchartsLayer(map, option).addTo(map)`方法，将ECharts图层添加到三维场景中。 + +* Example: + ```javascript + $.get('./static/data/echarts/line-bus.json', function (data) { + var hStep = 300 / (data.length - 1); + busLines = [].concat.apply([], data.map(function (busLine, idx) { + var prevPt; + var points = []; + for (var i = 0; i < busLine.length; i += 2) { + var pt = [busLine[i], busLine[i + 1]]; + if (i > 0) { + pt = [ + prevPt[0] + pt[0], + prevPt[1] + pt[1] + ]; + } + prevPt = pt; + + points.push([pt[0] / 1e4, pt[1] / 1e4]); + } + return { + coords: points, + lineStyle: { + normal: { + color: echarts.color.modifyHSL('#5A94DF', Math.round(hStep * idx)) + } + } + }; + })); + var option = { + cesium: { + roam: true + }, + series: [{ + type: 'lines', + coordinateSystem: 'cesium', + polyline: true, + data: busLines, + silent: true, + lineStyle: { + normal: { + // color: '#c23531', + // color: 'rgb(200, 35, 45)', + opacity: 0.2, + width: 1 + } + }, + progressiveThreshold: 500, + progressive: 200 + }, { + type: 'lines', + coordinateSystem: 'cesium', + polyline: true, + data: busLines, + lineStyle: { + normal: { + width: 0 + } + }, + effect: { + constantSpeed: 20, + show: true, + trailLength: 0.1, + symbolSize: 1.5 + }, + zlevel: 1 + }] + } + layer = new CesiumZondy.Overlayer.EchartsLayer(map, option).addTo(map); + }); + ``` + +### 关键接口 + +#### 1.【ECharts图层类】`CesiumZondy.Overlayer.EchartsLayer(map, option)` + +    基于mapboxgl的Layer对象进行的拓展，通过该拓展可以提供echarts的可视化功能。 + +| 参数名 | 类型 | 描述 | +| ------- | ------ | ------------------------------------------------------------ | +| map | Object | 传入的Cesium的地图对象 | +| option | Object | echarts.options 使用 option 来描述其对图表的各种需求，包括：有什么数据、要画什么图表、图表长什么样子、含有什么组件、组件能操作什么事情等等。简而言之，option 表述了：数据、数据如何映射成图形、交互行为。 | + +##### 【method】`hide()`：隐藏图层 + +##### 【method】`remove()`：删除图层 + +##### 【method】`show()`：显示图层 + +##### 【method】`update(option)`：更新图层 + +    ECharts 由数据驱动，数据的改变驱动图表展现的改变，因此动态数据的实现也变得异常简单。所有数据的更新都通过 setOption实现，你只需要定时获取数据，setOption 填入数据，而不用考虑数据到底产生了那些变化，ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。 + +| 参数 | 类型 | 描述 | +| ------ | ---- | -------------- | +| option | * | echarts.option | diff --git a/website/public/static/demo/military/markdown/clientView_Echarts/echarts-migarate.md b/website/public/static/demo/military/markdown/clientView_Echarts/echarts-migarate.md new file mode 100644 index 000000000..2247c9a41 --- /dev/null +++ b/website/public/static/demo/military/markdown/clientView_Echarts/echarts-migarate.md @@ -0,0 +1,211 @@ +## 路径图-模拟迁徙 + +### 示例功能 + +    本示例对接百度ECharts，实现在三维场景中加载ECharts路径图，根据虚拟数据实现“模拟迁徙”地图可视化。路径图用于带有起点和终点信息的线数据的绘制，主要用于地图上的航线，路线的可视化。 + +> 百度 ECharts + +    ECharts完整、详细使用方法可参考：官方教程API，开发库下载可参考：官方下载 + +### 示例实现 + +    本示例需要使用【include-cesium-local.js】开发库实现，通过关键接口`CesiumZondy.Overlayer.EchartsLayer()`来实现ECharts图层的加载。 + +> 开发库使用请参见**首页**-**概述**-**原生JS调用**内容 + +> 特别说明：MapGIS Client for JavaScript在Cesium中对接了百度Echarts图表插件，若插件本身存在问题，请优先参考Echarts官网解决方案。 + +### 实现步骤 + +**Step 1. 引用开发库**： +    本示例引用local本地【include-cesium-local.js】开发库，需要设置`include`属性为`echarts`； + +* Example: + ```javascript + + ``` + +**Step 2. 创建三维地图容器加载三维球控件,并加载底图**： +     创建三维视图容器，构造三维场景控件，构造并设置鼠标位置显示控件，并加载第三方互联网地图作为底图； + +**Step 3. 数据准备**： +    准备全国主要城市的坐标数据，以及迁徙的数据，并按照格式要求进行处理； + +* Example: + ``` javascript + var geoCoordMap = { + '上海': [121.4648, 31.2891], + '东莞': [113.8953, 22.901], + '东营': [118.7073, 37.5513], + '中山': [113.4229, 22.478], + ··· + }; + var BJData = [ + [{name: '北京'}, {name: '上海',value: 95}], + [{name: '北京'}, {name: '广州',value: 90}], + [{name: '北京'}, {name: '大连',value: 80}], + ··· + ]; + + var convertData = function (data) { + var res = []; + for (var i = 0; i < data.length; i++) { + var dataItem = data[i]; + var fromCoord = geoCoordMap[dataItem[0].name]; + var toCoord = geoCoordMap[dataItem[1].name]; + if (fromCoord && toCoord) { + res.push({ + fromName: dataItem[0].name, + toName: dataItem[1].name, + coords: [fromCoord, toCoord] + }); + } + } + return res; + }; + ``` + +**Step 4. 配置参数项**： +    创建各种需要的组件，如标题、图例、提示框等，其中最关键的是“series-系列”组件，构造完成后，即可调用`CesiumZondy.Overlayer.EchartsLayer(map, option).addTo(map)`方法，将ECharts图层添加到三维场景中。 + +* Example: + ``` javascript + var planePath ='path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z'; + var color = ['#a6c84c', '#ffa022', '#46bee9']; + var series = []; + [ + ['北京', BJData], + ['上海', SHData], + ['广州', GZData] + ].forEach(function (item, i) { + series.push({ + name: item[0] + ' Top10', + coordinateSystem: 'cesium', + type: 'lines', + zlevel: 1, + effect: { + show: true, + period: 6, + trailLength: 0.7, + color: '#fff', + symbolSize: 3 + }, + lineStyle: { + normal: { + color: color[i], + width: 0, + curveness: 0.2 + } + }, + data: convertData(item[1]) + }, { + name: item[0] + ' Top10', + coordinateSystem: 'cesium', + type: 'lines', + zlevel: 2, + effect: { + show: true, + period: 6, + trailLength: 0, + symbol: planePath, + symbolSize: 15 + }, + lineStyle: { + normal: { + color: color[i], + width: 1, + opacity: 0.4, + curveness: 0.2 + } + }, + data: convertData(item[1]) + }, { + name: item[0] + ' Top10', + type: 'effectScatter', + coordinateSystem: 'cesium', + zlevel: 2, + rippleEffect: { + brushType: 'stroke' + }, + label: { + normal: { + show: true, + position: 'right', + formatter: '{b}' + } + }, + symbolSize: function (val) { + return val[2] / 8; + }, + itemStyle: { + normal: { + color: color[i] + } + }, + data: item[1].map(function (dataItem) { + return { + name: dataItem[1].name, + value: geoCoordMap[dataItem[1].name].concat([ + dataItem[1].value + ]) + }; + }) + }); + }); + option = { + cesium: { + roam: true + }, + coordinateSystem: 'cesium', + title: { + text: '模拟迁徙', + subtext: '数据纯属虚构', + left: 'center', + textStyle: { + color: '#fff' + } + }, + tooltip: { + trigger: 'item' + }, + legend: { + orient: 'vertical', + top: 'top', + left: 'left', + data: ['北京 Top10', '上海 Top10', '广州 Top10'], + textStyle: { + color: '#fff' + }, + selectedMode: 'single' + }, + series: series + }; + layer = new CesiumZondy.Overlayer.EchartsLayer(map, option).addTo(map); + ``` + + +### 关键接口 + +#### 1.【ECharts图层类】`CesiumZondy.Overlayer.EchartsLayer(map, option)` + +    基于mapboxgl的Layer对象进行的拓展，通过该拓展可以提供echarts的可视化功能。 + +| 参数名 | 类型 | 描述 | +| ------- | ------ | ------------------------------------------------------------ | +| map | Object | 传入的Cesium的地图对象 | +| option | Object | echarts.options 使用 option 来描述其对图表的各种需求，包括：有什么数据、要画什么图表、图表长什么样子、含有什么组件、组件能操作什么事情等等。简而言之，option 表述了：数据、数据如何映射成图形、交互行为。 | + +##### 【method】`hide()`：隐藏图层 + +##### 【method】`remove()`：删除图层 + +##### 【method】`show()`：显示图层 + +##### 【method】`update(option)`：更新图层 + +    ECharts 由数据驱动，数据的改变驱动图表展现的改变，因此动态数据的实现也变得异常简单。所有数据的更新都通过 setOption实现，你只需要定时获取数据，setOption 填入数据，而不用考虑数据到底产生了那些变化，ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。 + +| 参数 | 类型 | 描述 | +| ------ | ---- | -------------- | +| option | * | echarts.option | diff --git a/website/public/static/demo/military/markdown/clientView_Echarts/echarts-weibo.md b/website/public/static/demo/military/markdown/clientView_Echarts/echarts-weibo.md new file mode 100644 index 000000000..6a055654f --- /dev/null +++ b/website/public/static/demo/military/markdown/clientView_Echarts/echarts-weibo.md @@ -0,0 +1,157 @@ +## 散点图-微博签到图 + +### 示例功能 + +    本示例对接百度ECharts，实现在三维场景中加载ECharts散点图，基于微博官方的签到数据实现“微博签到点亮中国”地图可视化。 + +> 百度 ECharts + +    ECharts完整、详细使用方法可参考：官方教程API，开发库下载可参考：官方下载 + +### 示例实现 + +    本示例需要使用【include-cesium-local.js】开发库实现，通过关键接口`CesiumZondy.Overlayer.EchartsLayer()`来实现ECharts图层的加载。 + +> 开发库使用请参见**首页**-**概述**-**原生JS调用**内容 + +> 特别说明：MapGIS Client for JavaScript在Cesium中对接了百度Echarts图表插件，若插件本身存在问题，请优先参考Echarts官网解决方案。 + +### 实现步骤 + +**Step 1. 引用开发库**： +    本示例引用local本地【include-cesium-local.js】开发库，需要设置`include`属性为`echarts`； + +* Example: + ```javascript + + ``` + +**Step 2. 创建三维地图容器加载三维球控件,并加载底图**： +     创建三维视图容器，构造三维场景控件，构造并设置鼠标位置显示控件，并加载第三方互联网地图作为底图； + +**Step 3. 数据准备、配置参数项**： +    本示例从json文件中读取数据，并按照格式要求进行处理；然后构建配置项，并创建各种需要的组件，如标题、图例、提示框等，其中最关键的是“series-系列”组件；构造完成后，即可调用`CesiumZondy.Overlayer.EchartsLayer(map, option).addTo(map)`方法，将ECharts图层添加到三维场景中。 + +* Example: + ``` javascript + var grade = [ + "强", + "中", + "弱" + ] + var layer; + $.get('./static/data/echarts/weibo.json', function (weiboData) { + weiboData = weiboData.map(function (serieData, idx) { + var px = serieData[0] / 1000; + var py = serieData[1] / 1000; + var res = [ + [px, py] + ]; + for (var i = 2; i < serieData.length; i += 2) { + var dx = serieData[i] / 1000; + var dy = serieData[i + 1] / 1000; + var x = px + dx; + var y = py + dy; + res.push([x.toFixed(2), y.toFixed(2), 1]); + px = x; + py = y; + } + return res; + }); + option = { + cesium: { + roam: true + }, + coordinateSystem: 'cesium', + title: { + text: "中国微博签到图", + subtext: 'From MapGIS', + sublink: 'http://www.smaryun.com', + left: 'center', + top: 'top', + textStyle: { + color: '#fff' + } + }, + tooltip: {}, + legend: { + left: 'right', + top: 'top', + data: [grade[0], grade[1], grade[2]], + textStyle: { + color: '#ccc' + } + }, + series: [{ + name: grade[2], + type: 'scatter', + coordinateSystem: 'cesium', + symbolSize: 1, + large: true, + itemStyle: { + normal: { + shadowBlur: 2, + shadowColor: 'rgba(37, 140, 249, 0.8)', + color: 'rgba(37, 140, 249, 0.8)' + } + }, + data: weiboData[0] + }, { + name: grade[1], + type: 'scatter', + coordinateSystem: 'cesium', + symbolSize: 1, + large: true, + itemStyle: { + normal: { + shadowBlur: 2, + shadowColor: 'rgba(14, 241, 242, 0.8)', + color: 'rgba(14, 241, 242, 0.8)' + } + }, + data: weiboData[1] + }, { + name: grade[0], + type: 'scatter', + coordinateSystem: 'cesium', + symbolSize: 1, + large: true, + itemStyle: { + normal: { + shadowBlur: 2, + shadowColor: 'rgba(255, 255, 255, 0.8)', + color: 'rgba(255, 255, 255, 0.8)' + } + }, + data: weiboData[2] + }] + }; + layer = new CesiumZondy.Overlayer.EchartsLayer(map, option).addTo(map); + }); + ``` + +### 关键接口 + +#### 1.【ECharts图层类】`CesiumZondy.Overlayer.EchartsLayer(map, option)` + +    基于mapboxgl的Layer对象进行的拓展，通过该拓展可以提供echarts的可视化功能。 + +| 参数名 | 类型 | 描述 | +| ------- | ------ | ------------------------------------------------------------ | +| map | Object | 传入的Cesium的地图对象 | +| option | Object | echarts.options 使用 option 来描述其对图表的各种需求，包括：有什么数据、要画什么图表、图表长什么样子、含有什么组件、组件能操作什么事情等等。简而言之，option 表述了：数据、数据如何映射成图形、交互行为。 | + +##### 【method】`hide()`：隐藏图层 + +##### 【method】`remove()`：删除图层 + +##### 【method】`show()`：显示图层 + +##### 【method】`update(option)`：更新图层 + +    ECharts 由数据驱动，数据的改变驱动图表展现的改变，因此动态数据的实现也变得异常简单。所有数据的更新都通过 setOption实现，你只需要定时获取数据，setOption 填入数据，而不用考虑数据到底产生了那些变化，ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。 + +| 参数 | 类型 | 描述 | +| ------ | ---- | -------------- | +| option | * | echarts.option | + diff --git a/website/public/static/demo/military/markdown/clientView_MapV/mapv-heater.md b/website/public/static/demo/military/markdown/clientView_MapV/mapv-heater.md new file mode 100644 index 000000000..0abbaf0a9 --- /dev/null +++ b/website/public/static/demo/military/markdown/clientView_MapV/mapv-heater.md @@ -0,0 +1,392 @@ +## 热力图 + +### 示例功能 + +    本示例对接MapV，实现在三维场景中加载MapV热力图。热力图采用特殊高亮的形式显示访客热衷的页面区域和访客所在的地理区域。 + +### 示例实现 + +    本示例需要使用【include-cesium-local.js】开发库实现，初始化Cesium三维球控件 `Cesium.WebSceneControl()` 后构造热力图数据，通过mapv图层对象类 `CesiumZondy.Overlayer.MapvLayer` 来实现MapV图层的加载。 + +> 开发库使用请参见**首页**-**概述**-**原生JS调用**内容 + +#### Mapv + +> 特别说明：MapGIS Client for JavaScript在Cesium中对接了MapV插件，若插件本身存在问题，请优先参考Mapv官方教程寻找解决方案 + +### 实现步骤 + +**Step 1. 引用开发库**： +    本示例引用local本地【include-cesium-local.js】开发库，需要设置 `include` 属性为 `mapv` ； + +* Example: + ``` javascript + < script include ="mapv" src = "./static/libs/include-cesium-local.js" > < /script> + ``` + +**Step 2. 创建三维地图容器加载三维球控件,并加载底图**： +     创建三维视图容器，构造三维场景控件，构造并设置鼠标位置显示控件，并加载第三方互联网地图作为底图； + +**Step 3. 创建 `DataSet` 对象**： +    首先构造DataSet对象需要的数据，然后使用数据创建DataSet对象。DataSet对象使用Mapv框架的原生API创建，更多详细信息参考Mapv官方教程； + +* Example: + ``` javascript + var randomCount = 1000; + var data = []; + var citys = ["北京", "天津", "上海", "重庆", "石家庄", "太原", "呼和浩特", "哈尔滨", "长春", "沈阳", "济南", "南京", "合肥", "杭州", "南昌", "福州", + "郑州", "武汉", "长沙", "广州", "南宁", "西安", "银川", "兰州", "西宁", "乌鲁木齐", "成都", "贵阳", "昆明", "拉萨", "海口" + ]; + // 构造数据 + while (randomCount--) { + var cityCenter = mapv.utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length)]); + data.push({ + geometry: { + type: 'Point', + coordinates: [cityCenter.lng - 2 + Math.random() * 4, cityCenter.lat - 2 + Math.random() * 4] + }, + count: 30 * Math.random(), + time: 100 * Math.random() + }); + } + var dataSet = new mapv.DataSet(data); + ``` + +**Step 4. 构造 `options` 参数**： +    options参数参考Mapv框架的原生API创建，更多详细信息参考Mapv官方教程； + +* Example: + ``` javascript + var options = { + context: '2d', + size: 13, + gradient: { + 0.25: "rgb(0,0,255)", + 0.55: "rgb(0,255,0)", + 0.85: "yellow", + 1.0: "rgb(255,0,0)" + }, + max: 60, + animation: { + type: 'time', + stepsRange: { + start: 0, + end: 100 + }, + trails: 10, + duration: 4, + }, + draw: 'heatmap' + } + ``` + +**Step 5. 数据展示**： +    根据前面的步骤，将 `map` 、 `dataSet` 、 `options` 三个参数传入 `CesiumZondy.Overlayer.MapvLayer` 中创建对象，创建完成数据在三维场景中加载展示。 + +* Example: + ``` javascript + var mapvLayer = new CesiumZondy.Overlayer.MapvLayer(map, dataSet, options); + ``` + +### 关键接口 + +#### 1.【百度地图mapv图层】`mapv.baiduMapLayer` + +    mapv原生的创建地图方式为：`new mapv.baiduMapLayer(map, dataSet, options)`，示例中使用`CesiumZondy.Overlayer.MapvLayer(map, dataSet, options)`作为原生方式的替换，替换后的参数个数、参数类型、返回值等等都不会改变，具体的参数设置参考Mapv官网。 + +| 参数名 | 类型 | 说明 | +| ------- | ------ | --------------------------------------------------------- | +| map | Object | 地图对象 | +| dataSet | Object | DasetSet是mapv中统一规范的数据对象，用来保存javascript数据对象，可以增删改查数据，并且可以订阅数据修改事件 | +| options | Object | 其他参数 | + + +* `options`通用属性 + +* Example: + ``` json + { + zIndex: 1, // 层级 + size: 5, // 大小值 + unit: 'px', // 'px': 以像素为单位绘制,默认值。'm': 以米制为单位绘制，会跟随地图比例放大缩小 + mixBlendMode: 'normal', // 不同图层之间的叠加模式，参考[https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode) + fillStyle: 'rgba(200, 200, 50, 1)', // 填充颜色 + strokeStyle: 'rgba(0, 0, 255, 1)', // 描边颜色 + lineWidth: 4, // 描边宽度 + globalAlpha: 1, // 透明度 + globalCompositeOperation: 'lighter', // 颜色叠加方式 + coordType: 'bd09ll', // 可选百度墨卡托坐标类型bd09mc和百度经纬度坐标类型bd09ll(默认) + shadowColor: 'rgba(255, 255, 255, 1)', // 投影颜色 + shadowBlur: 35, // 投影模糊级数 + updateCallback: function (time) { // 重绘回调函数，如果是时间动画、返回当前帧的时间 + }, + shadowOffsetX: 0, + shadowOffsetY: 0, + context: '2d', // 可选2d和webgl，webgl目前只支持画simple模式的点和线 + lineCap: 'butt', + lineJoin: 'miter', + miterLimit: 10, + methods: { // 一些事件回调函数 + click: function (item) { // 点击事件，返回对应点击元素的对象值 + console.log(item); + }, + mousemove: function(item) { // 鼠标移动事件，对应鼠标经过的元素对象值 + console.log(item); + }, + tap: function(item) { + console.log(item) // 只针对移动端,点击事件 + } + }, + animation: { + type: 'time', // 按时间展示动画 + stepsRange: { // 动画时间范围,time字段中值 + start: 0, + end: 100 + }, + trails: 10, // 时间动画的拖尾大小 + duration: 5, // 单个动画的时间，单位秒 + } + } + ``` + +* `options.draw ` + + * simple 最直接的方式绘制点线面 + * time 按时间字段来动画展示数据 + * heatmap 热力图展示 + * grid 网格状展示 + * honeycomb 蜂窝状展示 + * bubble 用不同大小的圆来展示 + * intensity 根据不同的值对应按渐变色中颜色进行展示 + * category 按不同的值进行分类，并使用对应的颜色展示 + * choropleth 按不同的值区间进行分类，并使用对应的颜色展示 + * text 展示文本 + * icon 展示icon + + +* `simple-最直接的方式绘制点线面`：示例地址 + +    dataSet中也可直接配置每个数据项的样式 + +* Example: + ``` javascript + { + draw: 'simple', + geometry: { + type: 'Point', + coordinates: [123, 23] + }, + size: 10, // 点数据时候使用 + fillStyle: 'red', // 点数据时候使用 + strokeStyle: 'red' // 线数据时候使用 + } + ``` + +* `heatmap-热力图展示`：示例地址 + +* Example: + ``` javascript + var options = { + draw: 'heatmap', + size: 13, // 每个热力点半径大小 + gradient: { + // 热力图渐变色 + 0.25: 'rgb(0,0,255)', + 0.55: 'rgb(0,255,0)', + 0.85: 'yellow', + 1.0: 'rgb(255,0,0)', + }, + max: 100, // 最大权重值 + } + //dataSet中加count字段，代表权重，根据上面配置用以计算它的热度 + ``` + +* `grid-网格状展示`：示例地址 + +* Example: + ``` javascript + { + draw: 'grid', + size: 40, + label: { // 网格中显示累加的值总和 + show: true, + fillStyle: 'white', + shadowColor: 'yellow', + font: '20px Arial', + shadowBlur: 10, + }, + gradient: { 0.25: "rgb(0,0,255)", 0.55: "rgb(0,255,0)", 0.85: "yellow", 1.0: "rgb(255,0,0)"}, + } + ``` + +* `honeycomb-蜂窝状展示`：示例地址 + +* Example: + ``` javascript + { + draw: 'honeycomb', + size: 40, + label: { // 网格中显示累加的值总和 + show: true, + fillStyle: 'white', + shadowColor: 'yellow', + font: '20px Arial', + shadowBlur: 10, + }, + gradient: { 0.25: "rgb(0,0,255)", 0.55: "rgb(0,255,0)", 0.85: "yellow", 1.0: "rgb(255,0,0)"}, + } + ``` + + +* `bubble-用不同大小的圆来展示`：示例地址 + +* Example: + ``` javascript + { + draw: 'bubble', + max: 100, // 数值最大值范围 + maxSize: 10, // 显示的圆最大半径大小 + } + ``` +    dataSet中加count字段，代表权重，根据上面配置用以计算它实际展示的大小 + +`intensity-根据不同的值对应按渐变色中颜色进行展示`：示例地址 + +* Example: + ``` javascript + { + draw: 'intensity', + max: 100, // 最大阈值 + min: 0, // 最小阈值 + gradient: { // 显示的颜色渐变范围$ + '0': 'blue', + '0.6': 'cyan', + '0.7': 'lime', + '0.8': 'yellow', + '1.0': 'red' + }$ + } + ``` + +`category-按不同的值进行分类并使用对应的颜色展示`：示例地址 + +* Example: + ```javascript + { + draw: 'category', + splitList: { // 按对应的值按相应颜色展示 + other: 'rgba(255, 255, 0, 0.8)', + 1: 'rgba(253, 98, 104, 0.8)', + 2: 'rgba(255, 146, 149, 0.8)', + 3: 'rgba(255, 241, 193, 0.8)', + 4: 'rgba(110, 176, 253, 0.8)', + 5: 'rgba(52, 139, 251, 0.8)', + 6: 'rgba(17, 102, 252)' + } + } + ``` + +`choropleth-按不同的值区间进行分类并使用对应的颜色展示`：示例地址 + +* Example: + ```javascript + { + draw: 'choropleth', + // 按数值区间来展示不同颜色的点 + splitList: [ + { + start: 0, + end: 2, + color: randomColor() + },{ + start: 2, + end: 4, + color: randomColor() + },{ + start: 4, + end: 6, + color: randomColor() + },{ + start: 6, + end: 8, + color: randomColor() + },{ + start: 8, + color: randomColor() + } + ] + } + ``` + +`icon-展示icon`：示例地址 + +* Example: + ```javascript + { + draw: 'icon', + rotate: '90', // 图片旋转角度 + width: 10, // 规定图像的宽度 + height: 10, // 规定图像的高度 + size: 10, // 添加点击事件时候可以用来设置点击范围 + sx: 10, // 开始剪切的 x 坐标位置 + sy: 10, // 开始剪切的 y 坐标位置 + swidth: 10, // 被剪切图像的宽度 + sheight: 10, // 被剪切图像的高度 + } + ``` + +    dataSet中添加字段： + +* Example: + ```javascript + { + icon: Image, // 加载好的Image对象 + rotate: '90', // 图片旋转角度 + } + ``` + +`text-展示文本`：示例地址 + +* Example: + ```javascript + { + draw: 'text', + fillStyle: 'white', + textAlign: 'center', + avoid: true, // 开启文本标注避让 + textBaseline: 'middle', + offset: { // 文本便宜值 + x: 0, + y: 0 + } + } + ``` + +    dataSet中添加字段： + +* Example: + ``` javascript + { + text: '文本内容' + } + ``` + + +`animation-展示动画`：点动画1  点动画2  线动画 + +* Example: + ```json + { + "draw": "simple", + "animation": { + "type": "time", // 按时间展示动画 + "stepsRange": { + // 动画时间范围,time字段中值 + "start": 0, + "end": 100 + }, + "trails": 10, // 时间动画的拖尾大小 + "duration": 5 // 单个动画的时间，单位秒 + } + } + ``` diff --git a/website/public/static/demo/military/markdown/clientView_MapV/mapv-migrate.md b/website/public/static/demo/military/markdown/clientView_MapV/mapv-migrate.md new file mode 100644 index 000000000..250111dbe --- /dev/null +++ b/website/public/static/demo/military/markdown/clientView_MapV/mapv-migrate.md @@ -0,0 +1,400 @@ +## 迁移图 + +### 示例功能 + +    本示例对接MapV，实现在三维场景中加载MapV迁移图。 + +### 示例实现 + +    本示例需要使用【include-cesium-local.js】开发库实现，初始化Cesium三维球控件 `Cesium.WebSceneControl()` 后构造热力图数据，通过mapv图层对象类 `CesiumZondy.Overlayer.MapvLayer` 来实现MapV图层的加载。 + +> 开发库使用请参见**首页**-**概述**-**原生JS调用**内容 + +#### Mapv + +> 特别说明：MapGIS Client for JavaScript在Cesium中对接了MapV插件，若插件本身存在问题，请优先参考Mapv官方教程寻找解决方案 + +### 实现步骤 + +**Step 1. 引用开发库**： +    本示例引用local本地【include-cesium-local.js】开发库，需要设置 `include` 属性为 `mapv` ； + +* Example: + ``` javascript + + ``` + +**Step 2. 创建三维地图容器加载三维球控件,并加载底图**： +     创建三维视图容器，构造三维场景控件，构造并设置鼠标位置显示控件，并加载第三方互联网地图作为底图； + +**Step 3. 创建 `DataSet` 对象**： +     首先构造DataSet对象需要的数据，然后使用数据创建DataSet对象。DataSet对象使用Mapv框架的原生API创建，更多详细信息参考Mapv官方教程； + +* Example: + ``` javascript + var items = rs.split('|'); + for (var i = 0; i < items.length; i++) { + var itemArr = items[i].split(/\n/); + for (var k = 0; k < itemArr.length; k++) { + if (!!itemArr[k]) { + var item = itemArr[k].split(/\t/); + if (item[0] === '起点城市' || item[0] === '迁出城市') { + var cityBegin = item[1]; + } + if (item[0] !== '起点城市' || item[0] !== '迁出城市' && item.length > 1) { + var cityCenter1 = mapv.utilCityCenter.getCenterByCityName(item[0].replace(/市|省/, "")); + var cityCenter2 = mapv.utilCityCenter.getCenterByCityName(cityBegin.replace(/市|省/, "").trim()); + if (cityCenter1) { + if (Math.random() > 0.7) { + curive(cityCenter2, cityCenter1, 50); + } + data.push({ + geometry: { + type: 'LineString', + coordinates: [ + [cityCenter1.lng, cityCenter1.lat], + [cityCenter2.lng, cityCenter2.lat] + ] + }, + count: 100 * Math.random() + }); + } + } + } + } + } + var dataSet = new mapv.DataSet(data); + ``` + +**Step 4. 构造 `options` 参数**： +    options参数参考Mapv框架的原生API创建，更多详细信息参考Mapv官方教程； + +* Example: + ``` javascript + var options = { + context: '2d', + strokeStyle: 'rgba(55, 50, 250, 0.3)', + globalCompositeOperation: 'lighter', + shadowColor: 'rgba(55, 50, 250, 0.5)', + methods: { + click: function(item) {} + }, + gradient: { + 0: 'rgba(55, 50, 250, 0)', + 1: 'rgba(55, 50, 250, 1)' + }, + lineWidth: .2, + draw: 'intensity' + }; + ``` + +**Step 5. 数据展示**： +    根据前面的步骤，将 `map` 、 `dataSet` 、 `options` 三个参数传入 `CesiumZondy.Overlayer.MapvLayer` 中创建对象，创建完成数据在三维场景中加载展示。 + +* Example: + ``` javascript + var mapvLayer = new CesiumZondy.Overlayer.MapvLayer(map, dataSet, options); + ``` + +### 关键接口 + +#### 1.【百度地图mapv图层】`mapv.baiduMapLayer` + +    mapv原生的创建地图方式为：`new mapv.baiduMapLayer(map, dataSet, options)`，示例中使用`CesiumZondy.Overlayer.MapvLayer(map, dataSet, options)`作为原生方式的替换，替换后的参数个数、参数类型、返回值等等都不会改变，具体的参数设置参考Mapv官网。 + +| 参数名 | 类型 | 说明 | +| ------- | ------ | --------------------------------------------------------- | +| map | Object | 地图对象 | +| dataSet | Object | DasetSet是mapv中统一规范的数据对象，用来保存javascript数据对象，可以增删改查数据，并且可以订阅数据修改事件 | +| options | Object | 其他参数 | + + +* `options`通用属性 + +* Example: + ``` json + { + zIndex: 1, // 层级 + size: 5, // 大小值 + unit: 'px', // 'px': 以像素为单位绘制,默认值。'm': 以米制为单位绘制，会跟随地图比例放大缩小 + mixBlendMode: 'normal', // 不同图层之间的叠加模式，参考[https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode) + fillStyle: 'rgba(200, 200, 50, 1)', // 填充颜色 + strokeStyle: 'rgba(0, 0, 255, 1)', // 描边颜色 + lineWidth: 4, // 描边宽度 + globalAlpha: 1, // 透明度 + globalCompositeOperation: 'lighter', // 颜色叠加方式 + coordType: 'bd09ll', // 可选百度墨卡托坐标类型bd09mc和百度经纬度坐标类型bd09ll(默认) + shadowColor: 'rgba(255, 255, 255, 1)', // 投影颜色 + shadowBlur: 35, // 投影模糊级数 + updateCallback: function (time) { // 重绘回调函数，如果是时间动画、返回当前帧的时间 + }, + shadowOffsetX: 0, + shadowOffsetY: 0, + context: '2d', // 可选2d和webgl，webgl目前只支持画simple模式的点和线 + lineCap: 'butt', + lineJoin: 'miter', + miterLimit: 10, + methods: { // 一些事件回调函数 + click: function (item) { // 点击事件，返回对应点击元素的对象值 + console.log(item); + }, + mousemove: function(item) { // 鼠标移动事件，对应鼠标经过的元素对象值 + console.log(item); + }, + tap: function(item) { + console.log(item) // 只针对移动端,点击事件 + } + }, + animation: { + type: 'time', // 按时间展示动画 + stepsRange: { // 动画时间范围,time字段中值 + start: 0, + end: 100 + }, + trails: 10, // 时间动画的拖尾大小 + duration: 5, // 单个动画的时间，单位秒 + } + } + ``` + +* `options.draw ` + + * simple 最直接的方式绘制点线面 + * time 按时间字段来动画展示数据 + * heatmap 热力图展示 + * grid 网格状展示 + * honeycomb 蜂窝状展示 + * bubble 用不同大小的圆来展示 + * intensity 根据不同的值对应按渐变色中颜色进行展示 + * category 按不同的值进行分类，并使用对应的颜色展示 + * choropleth 按不同的值区间进行分类，并使用对应的颜色展示 + * text 展示文本 + * icon 展示icon + + +* `simple-最直接的方式绘制点线面`：示例地址 + +    dataSet中也可直接配置每个数据项的样式 + +* Example: + ``` javascript + { + draw: 'simple', + geometry: { + type: 'Point', + coordinates: [123, 23] + }, + size: 10, // 点数据时候使用 + fillStyle: 'red', // 点数据时候使用 + strokeStyle: 'red' // 线数据时候使用 + } + ``` + +* `heatmap-热力图展示`：示例地址 + +* Example: + ``` javascript + var options = { + draw: 'heatmap', + size: 13, // 每个热力点半径大小 + gradient: { + // 热力图渐变色 + 0.25: 'rgb(0,0,255)', + 0.55: 'rgb(0,255,0)', + 0.85: 'yellow', + 1.0: 'rgb(255,0,0)', + }, + max: 100, // 最大权重值 + } + //dataSet中加count字段，代表权重，根据上面配置用以计算它的热度 + ``` + +* `grid-网格状展示`：示例地址 + +* Example: + ``` javascript + { + draw: 'grid', + size: 40, + label: { // 网格中显示累加的值总和 + show: true, + fillStyle: 'white', + shadowColor: 'yellow', + font: '20px Arial', + shadowBlur: 10, + }, + gradient: { 0.25: "rgb(0,0,255)", 0.55: "rgb(0,255,0)", 0.85: "yellow", 1.0: "rgb(255,0,0)"}, + } + ``` + +* `honeycomb-蜂窝状展示`：示例地址 + +* Example: + ``` javascript + { + draw: 'honeycomb', + size: 40, + label: { // 网格中显示累加的值总和 + show: true, + fillStyle: 'white', + shadowColor: 'yellow', + font: '20px Arial', + shadowBlur: 10, + }, + gradient: { 0.25: "rgb(0,0,255)", 0.55: "rgb(0,255,0)", 0.85: "yellow", 1.0: "rgb(255,0,0)"}, + } + ``` + + +* `bubble-用不同大小的圆来展示`：示例地址 + +* Example: + ``` javascript + { + draw: 'bubble', + max: 100, // 数值最大值范围 + maxSize: 10, // 显示的圆最大半径大小 + } + ``` +    dataSet中加count字段，代表权重，根据上面配置用以计算它实际展示的大小 + +`intensity-根据不同的值对应按渐变色中颜色进行展示`：示例地址 + +* Example: + ``` javascript + { + draw: 'intensity', + max: 100, // 最大阈值 + min: 0, // 最小阈值 + gradient: { // 显示的颜色渐变范围$ + '0': 'blue', + '0.6': 'cyan', + '0.7': 'lime', + '0.8': 'yellow', + '1.0': 'red' + }$ + } + ``` + +`category-按不同的值进行分类并使用对应的颜色展示`：示例地址 + +* Example: + ```javascript + { + draw: 'category', + splitList: { // 按对应的值按相应颜色展示 + other: 'rgba(255, 255, 0, 0.8)', + 1: 'rgba(253, 98, 104, 0.8)', + 2: 'rgba(255, 146, 149, 0.8)', + 3: 'rgba(255, 241, 193, 0.8)', + 4: 'rgba(110, 176, 253, 0.8)', + 5: 'rgba(52, 139, 251, 0.8)', + 6: 'rgba(17, 102, 252)' + } + } + ``` + +`choropleth-按不同的值区间进行分类并使用对应的颜色展示`：示例地址 + +* Example: + ```javascript + { + draw: 'choropleth', + // 按数值区间来展示不同颜色的点 + splitList: [ + { + start: 0, + end: 2, + color: randomColor() + },{ + start: 2, + end: 4, + color: randomColor() + },{ + start: 4, + end: 6, + color: randomColor() + },{ + start: 6, + end: 8, + color: randomColor() + },{ + start: 8, + color: randomColor() + } + ] + } + ``` + +`icon-展示icon`：示例地址 + +* Example: + ```javascript + { + draw: 'icon', + rotate: '90', // 图片旋转角度 + width: 10, // 规定图像的宽度 + height: 10, // 规定图像的高度 + size: 10, // 添加点击事件时候可以用来设置点击范围 + sx: 10, // 开始剪切的 x 坐标位置 + sy: 10, // 开始剪切的 y 坐标位置 + swidth: 10, // 被剪切图像的宽度 + sheight: 10, // 被剪切图像的高度 + } + ``` + +    dataSet中添加字段： + +* Example: + ```javascript + { + icon: Image, // 加载好的Image对象 + rotate: '90', // 图片旋转角度 + } + ``` + +`text-展示文本`：示例地址 + +* Example: + ```javascript + { + draw: 'text', + fillStyle: 'white', + textAlign: 'center', + avoid: true, // 开启文本标注避让 + textBaseline: 'middle', + offset: { // 文本便宜值 + x: 0, + y: 0 + } + } + ``` + +    dataSet中添加字段： + +* Example: + ``` javascript + { + text: '文本内容' + } + ``` + + +`animation-展示动画`：点动画1  点动画2  线动画 + +* Example: + ```json + { + "draw": "simple", + "animation": { + "type": "time", // 按时间展示动画 + "stepsRange": { + // 动画时间范围,time字段中值 + "start": 0, + "end": 100 + }, + "trails": 10, // 时间动画的拖尾大小 + "duration": 5 // 单个动画的时间，单位秒 + } + } + ``` diff --git a/website/public/static/demo/military/markdown/clientView_MapV/mapv-path_converge.md b/website/public/static/demo/military/markdown/clientView_MapV/mapv-path_converge.md new file mode 100644 index 000000000..5ddea510b --- /dev/null +++ b/website/public/static/demo/military/markdown/clientView_MapV/mapv-path_converge.md @@ -0,0 +1,449 @@ +## 轨迹汇聚 + +### 示例功能 + +    本示例对接MapV，实现在三维场景中加载MapV轨迹汇聚图。 + +### 示例实现 + +    本示例需要使用【include-cesium-local.js】开发库实现，初始化Cesium三维球控件 `Cesium.WebSceneControl()` 后构造热力图数据，通过mapv图层对象类 `CesiumZondy.Overlayer.MapvLayer` 来实现MapV图层的加载。 + +> 开发库使用请参见**首页**-**概述**-**原生JS调用**内容 + +#### Mapv + +> 特别说明：MapGIS Client for JavaScript在Cesium中对接了MapV插件，若插件本身存在问题，请优先参考Mapv官方教程寻找解决方案 + +### 实现步骤 + +**Step 1. 引用开发库**： +    本示例引用local本地【include-cesium-local.js】开发库，需要设置 `include` 属性为 `mapv` ； + +* Example: + ``` javascript + < script include = "mapv" + src = "./static/libs/include-cesium-local.js" > < /script> + ``` + +**Step 2. 创建三维地图容器加载三维球控件,并加载底图**： +     创建三维视图容器，构造三维场景控件，构造并设置鼠标位置显示控件，并加载第三方互联网地图作为底图； + +**Step 3. 创建 `DataSet` 对象**： +     首先构造DataSet对象需要的数据，然后使用数据创建DataSet对象。DataSet对象使用Mapv框架的原生API创建，更多详细信息参考Mapv官方教程； + +* Example: + ``` javascript + var randomCount = 500; + var node_data = { + "0": { + "x": 108.154518, + "y": 36.643346 + }, + "1": { + "x": 121.485124, + "y": 31.235317 + }, + }; + var edge_data = [{ + "source": "1", + "target": "0" + }]; + var citys = ["北京", "天津", "上海", "重庆", "石家庄", "太原", "呼和浩特", "哈尔滨", "长春", "沈阳", "济南", "南京", "合肥", "杭州", "南昌", "福州", + "郑州", "武汉", "长沙", "广州", "南宁", "西安", "银川", "兰州", "西宁", "乌鲁木齐", "成都", "贵阳", "昆明", "拉萨", "海口" + ]; + // 构造数据 + for (var i = 1; i < randomCount; i++) { + var cityCenter = mapv.utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length)]); + node_data[i] = { + x: cityCenter.lng - 5 + Math.random() * 10, + y: cityCenter.lat - 5 + Math.random() * 10, + }; + edge_data.push({ + "source": ~~(i * Math.random()), + "target": '0' + }); + } + var fbundling = mapv.utilForceEdgeBundling() + .nodes(node_data) + .edges(edge_data); + var results = fbundling(); + var data = []; + var timeData = []; + for (var i = 0; i < results.length; i++) { + var line = results[i]; + var coordinates = []; + for (var j = 0; j < line.length; j++) { + coordinates.push([line[j].x, line[j].y]); + timeData.push({ + geometry: { + type: 'Point', + coordinates: [line[j].x, line[j].y] + }, + count: 1, + time: j + }); + } + + data.push({ + geometry: { + type: 'LineString', + coordinates: transformCoords(coordinates) + } + }); + + function transformCoords(coordinates) { + var coords = []; + coordinates.map(function(coordinate) { + coords.push(coordinate); + }); + return coords; + } + } + var dataSet = new mapv.DataSet(data); + ``` + +**Step 4. 构造 `options` 参数**： +    options参数参考Mapv框架的原生API创建，更多详细信息参考Mapv官方教程； + +* Example: + ``` javascript + var options = { + context: '2d', + strokeStyle: 'rgba(55, 50, 250, 0.3)', + globalCompositeOperation: 'lighter', + shadowColor: 'rgba(55, 50, 250, 0.5)', + shadowBlur: 10, + lineWidth: 1.0, + draw: 'simple' + }; + new CesiumZondy.Overlayer.MapvLayer(map, dataSet, options); + var dataSet = new mapv.DataSet(timeData); + var options = { + context: '2d', + fillStyle: 'rgba(255, 250, 250, 0.9)', + globalCompositeOperation: 'lighter', + size: 1.5, + animation: { + type: 'time', + stepsRange: { + start: 0, + end: 100 + }, + trails: 1, + duration: 5 + }, + draw: 'simple' + }; + ``` + +**Step 5. 数据展示**： +    根据前面的步骤，将 `map` 、 `dataSet` 、 `options` 三个参数传入 `CesiumZondy.Overlayer.MapvLayer` 中创建对象，创建完成数据在三维场景中加载展示。 + +* Example: + ``` javascript + var mapvLayer = new CesiumZondy.Overlayer.MapvLayer(map, dataSet, options); + ``` + + +### 关键接口 + +#### 1.【百度地图mapv图层】`mapv.baiduMapLayer` + +    mapv原生的创建地图方式为：`new mapv.baiduMapLayer(map, dataSet, options)`，示例中使用`CesiumZondy.Overlayer.MapvLayer(map, dataSet, options)`作为原生方式的替换，替换后的参数个数、参数类型、返回值等等都不会改变，具体的参数设置参考Mapv官网。 + +| 参数名 | 类型 | 说明 | +| ------- | ------ | --------------------------------------------------------- | +| map | Object | 地图对象 | +| dataSet | Object | DasetSet是mapv中统一规范的数据对象，用来保存javascript数据对象，可以增删改查数据，并且可以订阅数据修改事件 | +| options | Object | 其他参数 | + + +* `options`通用属性 + +* Example: + ``` json + { + zIndex: 1, // 层级 + size: 5, // 大小值 + unit: 'px', // 'px': 以像素为单位绘制,默认值。'm': 以米制为单位绘制，会跟随地图比例放大缩小 + mixBlendMode: 'normal', // 不同图层之间的叠加模式，参考[https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode) + fillStyle: 'rgba(200, 200, 50, 1)', // 填充颜色 + strokeStyle: 'rgba(0, 0, 255, 1)', // 描边颜色 + lineWidth: 4, // 描边宽度 + globalAlpha: 1, // 透明度 + globalCompositeOperation: 'lighter', // 颜色叠加方式 + coordType: 'bd09ll', // 可选百度墨卡托坐标类型bd09mc和百度经纬度坐标类型bd09ll(默认) + shadowColor: 'rgba(255, 255, 255, 1)', // 投影颜色 + shadowBlur: 35, // 投影模糊级数 + updateCallback: function (time) { // 重绘回调函数，如果是时间动画、返回当前帧的时间 + }, + shadowOffsetX: 0, + shadowOffsetY: 0, + context: '2d', // 可选2d和webgl，webgl目前只支持画simple模式的点和线 + lineCap: 'butt', + lineJoin: 'miter', + miterLimit: 10, + methods: { // 一些事件回调函数 + click: function (item) { // 点击事件，返回对应点击元素的对象值 + console.log(item); + }, + mousemove: function(item) { // 鼠标移动事件，对应鼠标经过的元素对象值 + console.log(item); + }, + tap: function(item) { + console.log(item) // 只针对移动端,点击事件 + } + }, + animation: { + type: 'time', // 按时间展示动画 + stepsRange: { // 动画时间范围,time字段中值 + start: 0, + end: 100 + }, + trails: 10, // 时间动画的拖尾大小 + duration: 5, // 单个动画的时间，单位秒 + } + } + ``` + +* `options.draw ` + + * simple 最直接的方式绘制点线面 + * time 按时间字段来动画展示数据 + * heatmap 热力图展示 + * grid 网格状展示 + * honeycomb 蜂窝状展示 + * bubble 用不同大小的圆来展示 + * intensity 根据不同的值对应按渐变色中颜色进行展示 + * category 按不同的值进行分类，并使用对应的颜色展示 + * choropleth 按不同的值区间进行分类，并使用对应的颜色展示 + * text 展示文本 + * icon 展示icon + + +* `simple-最直接的方式绘制点线面`：示例地址 + +    dataSet中也可直接配置每个数据项的样式 + +* Example: + ``` javascript + { + draw: 'simple', + geometry: { + type: 'Point', + coordinates: [123, 23] + }, + size: 10, // 点数据时候使用 + fillStyle: 'red', // 点数据时候使用 + strokeStyle: 'red' // 线数据时候使用 + } + ``` + +* `heatmap-热力图展示`：示例地址 + +* Example: + ``` javascript + var options = { + draw: 'heatmap', + size: 13, // 每个热力点半径大小 + gradient: { + // 热力图渐变色 + 0.25: 'rgb(0,0,255)', + 0.55: 'rgb(0,255,0)', + 0.85: 'yellow', + 1.0: 'rgb(255,0,0)', + }, + max: 100, // 最大权重值 + } + //dataSet中加count字段，代表权重，根据上面配置用以计算它的热度 + ``` + +* `grid-网格状展示`：示例地址 + +* Example: + ``` javascript + { + draw: 'grid', + size: 40, + label: { // 网格中显示累加的值总和 + show: true, + fillStyle: 'white', + shadowColor: 'yellow', + font: '20px Arial', + shadowBlur: 10, + }, + gradient: { 0.25: "rgb(0,0,255)", 0.55: "rgb(0,255,0)", 0.85: "yellow", 1.0: "rgb(255,0,0)"}, + } + ``` + +* `honeycomb-蜂窝状展示`：示例地址 + +* Example: + ``` javascript + { + draw: 'honeycomb', + size: 40, + label: { // 网格中显示累加的值总和 + show: true, + fillStyle: 'white', + shadowColor: 'yellow', + font: '20px Arial', + shadowBlur: 10, + }, + gradient: { 0.25: "rgb(0,0,255)", 0.55: "rgb(0,255,0)", 0.85: "yellow", 1.0: "rgb(255,0,0)"}, + } + ``` + + +* `bubble-用不同大小的圆来展示`：示例地址 + +* Example: + ``` javascript + { + draw: 'bubble', + max: 100, // 数值最大值范围 + maxSize: 10, // 显示的圆最大半径大小 + } + ``` +    dataSet中加count字段，代表权重，根据上面配置用以计算它实际展示的大小 + +`intensity-根据不同的值对应按渐变色中颜色进行展示`：示例地址 + +* Example: + ``` javascript + { + draw: 'intensity', + max: 100, // 最大阈值 + min: 0, // 最小阈值 + gradient: { // 显示的颜色渐变范围$ + '0': 'blue', + '0.6': 'cyan', + '0.7': 'lime', + '0.8': 'yellow', + '1.0': 'red' + } + } + ``` + +`category-按不同的值进行分类并使用对应的颜色展示`：示例地址 + +* Example: + ```javascript + { + draw: 'category', + splitList: { // 按对应的值按相应颜色展示 + other: 'rgba(255, 255, 0, 0.8)', + 1: 'rgba(253, 98, 104, 0.8)', + 2: 'rgba(255, 146, 149, 0.8)', + 3: 'rgba(255, 241, 193, 0.8)', + 4: 'rgba(110, 176, 253, 0.8)', + 5: 'rgba(52, 139, 251, 0.8)', + 6: 'rgba(17, 102, 252)' + } + } + ``` + +`choropleth-按不同的值区间进行分类并使用对应的颜色展示`：示例地址 + +* Example: + ```javascript + { + draw: 'choropleth', + // 按数值区间来展示不同颜色的点 + splitList: [ + { + start: 0, + end: 2, + color: randomColor() + },{ + start: 2, + end: 4, + color: randomColor() + },{ + start: 4, + end: 6, + color: randomColor() + },{ + start: 6, + end: 8, + color: randomColor() + },{ + start: 8, + color: randomColor() + } + ] + } + ``` + +`icon-展示icon`：示例地址 + +* Example: + ```javascript + { + draw: 'icon', + rotate: '90', // 图片旋转角度 + width: 10, // 规定图像的宽度 + height: 10, // 规定图像的高度 + size: 10, // 添加点击事件时候可以用来设置点击范围 + sx: 10, // 开始剪切的 x 坐标位置 + sy: 10, // 开始剪切的 y 坐标位置 + swidth: 10, // 被剪切图像的宽度 + sheight: 10, // 被剪切图像的高度 + } + ``` + +    dataSet中添加字段： + +* Example: + ```javascript + { + icon: Image, // 加载好的Image对象 + rotate: '90', // 图片旋转角度 + } + ``` + +`text-展示文本`：示例地址 + +* Example: + ```javascript + { + draw: 'text', + fillStyle: 'white', + textAlign: 'center', + avoid: true, // 开启文本标注避让 + textBaseline: 'middle', + offset: { // 文本便宜值 + x: 0, + y: 0 + } + } + ``` + +    dataSet中添加字段： + +* Example: + ``` javascript + { + text: '文本内容' + } + ``` + + +`animation-展示动画`：点动画1  点动画2  线动画 + +* Example: + ```json + { + "draw": "simple", + "animation": { + "type": "time", // 按时间展示动画 + "stepsRange": { + // 动画时间范围,time字段中值 + "start": 0, + "end": 100 + }, + "trails": 10, // 时间动画的拖尾大小 + "duration": 5 // 单个动画的时间，单位秒 + } + } + ``` \ No newline at end of file diff --git a/website/public/static/demo/military/markdown/clientView_MapV/mapv-point_animate.md b/website/public/static/demo/military/markdown/clientView_MapV/mapv-point_animate.md new file mode 100644 index 000000000..7ad1292e1 --- /dev/null +++ b/website/public/static/demo/military/markdown/clientView_MapV/mapv-point_animate.md @@ -0,0 +1,383 @@ +## 点数据播放 + +### 示例功能 + +    本示例对接MapV，实现在三维场景中加载MapV点数据播放图。 + +### 示例实现 + +    本示例需要使用【include-cesium-local.js】开发库实现，初始化Cesium三维球控件 `Cesium.WebSceneControl()` 后构造热力图数据，通过mapv图层对象类 `CesiumZondy.Overlayer.MapvLayer` 来实现MapV图层的加载。 + +> 开发库使用请参见**首页**-**概述**-**原生JS调用**内容 + +#### Mapv + +> 特别说明：MapGIS Client for JavaScript在Cesium中对接了MapV插件，若插件本身存在问题，请优先参考Mapv官方教程寻找解决方案 + +### 实现步骤 + +**Step 1. 引用开发库**： +    本示例引用local本地【include-cesium-local.js】开发库，需要设置 `include` 属性为 `mapv` ； + +* Example: + ``` javascript + < script include = "mapv" src = "./static/libs/include-cesium-local.js" > < /script> + ``` + +**Step 2. 创建三维地图容器加载三维球控件,并加载底图**： +     创建三维视图容器，构造三维场景控件，构造并设置鼠标位置显示控件，并加载第三方互联网地图作为底图； + +**Step 3. 创建 `DataSet` 对象**： +    首先构造DataSet对象需要的数据，然后使用数据创建DataSet对象。DataSet对象使用Mapv框架的原生API创建，更多详细信息参考Mapv官方教程； + +* Example: + ``` javascript + for (var i = 0; i < rs[0].length; i++) { + var geoCoord = rs[0][i].geoCoord; + data.push({ + geometry: { + type: 'Point', + coordinates: geoCoord + }, + time: Math.random() * 10 + }); + } + var dataSet = new mapv.DataSet(data); + ``` + +**Step 4. 构造 `options` 参数**： +    options参数参考Mapv框架的原生API创建，更多详细信息参考Mapv官方教程； + +* Example: + ``` javascript + var options = { + context: '2d', + fillStyle: 'rgba(255, 250, 50, 0.6)', + updateCallback: function(time) { + time = time.toFixed(2); + $('#time').html('时间' + time); + }, + size: 3, + draw: 'simple', + animation: { + type: 'time', + stepsRange: { + start: 0, + end: 10 + }, + trails: 1, + duration: 6, + } + } + ``` + +**Step 5. 数据展示**： +    根据前面的步骤，将 `map` 、 `dataSet` 、 `options` 三个参数传入 `CesiumZondy.Overlayer.MapvLayer` 中创建对象，创建完成数据在三维场景中加载展示。 + +* Example: + ``` javascript + var mapvLayer = new CesiumZondy.Overlayer.MapvLayer(map, dataSet, options); + ``` + +### 关键接口 + +#### 1.【百度地图mapv图层】`mapv.baiduMapLayer` + +    mapv原生的创建地图方式为：`new mapv.baiduMapLayer(map, dataSet, options)`，示例中使用`CesiumZondy.Overlayer.MapvLayer(map, dataSet, options)`作为原生方式的替换，替换后的参数个数、参数类型、返回值等等都不会改变，具体的参数设置参考Mapv官网。 + +| 参数名 | 类型 | 说明 | +| ------- | ------ | --------------------------------------------------------- | +| map | Object | 地图对象 | +| dataSet | Object | DasetSet是mapv中统一规范的数据对象，用来保存javascript数据对象，可以增删改查数据，并且可以订阅数据修改事件 | +| options | Object | 其他参数 | + + +* `options`通用属性 + +* Example: + ``` json + { + zIndex: 1, // 层级 + size: 5, // 大小值 + unit: 'px', // 'px': 以像素为单位绘制,默认值。'm': 以米制为单位绘制，会跟随地图比例放大缩小 + mixBlendMode: 'normal', // 不同图层之间的叠加模式，参考[https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode) + fillStyle: 'rgba(200, 200, 50, 1)', // 填充颜色 + strokeStyle: 'rgba(0, 0, 255, 1)', // 描边颜色 + lineWidth: 4, // 描边宽度 + globalAlpha: 1, // 透明度 + globalCompositeOperation: 'lighter', // 颜色叠加方式 + coordType: 'bd09ll', // 可选百度墨卡托坐标类型bd09mc和百度经纬度坐标类型bd09ll(默认) + shadowColor: 'rgba(255, 255, 255, 1)', // 投影颜色 + shadowBlur: 35, // 投影模糊级数 + updateCallback: function (time) { // 重绘回调函数，如果是时间动画、返回当前帧的时间 + }, + shadowOffsetX: 0, + shadowOffsetY: 0, + context: '2d', // 可选2d和webgl，webgl目前只支持画simple模式的点和线 + lineCap: 'butt', + lineJoin: 'miter', + miterLimit: 10, + methods: { // 一些事件回调函数 + click: function (item) { // 点击事件，返回对应点击元素的对象值 + console.log(item); + }, + mousemove: function(item) { // 鼠标移动事件，对应鼠标经过的元素对象值 + console.log(item); + }, + tap: function(item) { + console.log(item) // 只针对移动端,点击事件 + } + }, + animation: { + type: 'time', // 按时间展示动画 + stepsRange: { // 动画时间范围,time字段中值 + start: 0, + end: 100 + }, + trails: 10, // 时间动画的拖尾大小 + duration: 5, // 单个动画的时间，单位秒 + } + } + ``` + +* `options.draw ` + + * simple 最直接的方式绘制点线面 + * time 按时间字段来动画展示数据 + * heatmap 热力图展示 + * grid 网格状展示 + * honeycomb 蜂窝状展示 + * bubble 用不同大小的圆来展示 + * intensity 根据不同的值对应按渐变色中颜色进行展示 + * category 按不同的值进行分类，并使用对应的颜色展示 + * choropleth 按不同的值区间进行分类，并使用对应的颜色展示 + * text 展示文本 + * icon 展示icon + + +* `simple-最直接的方式绘制点线面`：示例地址 + +    dataSet中也可直接配置每个数据项的样式 + +* Example: + ``` javascript + { + draw: 'simple', + geometry: { + type: 'Point', + coordinates: [123, 23] + }, + size: 10, // 点数据时候使用 + fillStyle: 'red', // 点数据时候使用 + strokeStyle: 'red' // 线数据时候使用 + } + ``` + +* `heatmap-热力图展示`：示例地址 + +* Example: + ``` javascript + var options = { + draw: 'heatmap', + size: 13, // 每个热力点半径大小 + gradient: { + // 热力图渐变色 + 0.25: 'rgb(0,0,255)', + 0.55: 'rgb(0,255,0)', + 0.85: 'yellow', + 1.0: 'rgb(255,0,0)', + }, + max: 100, // 最大权重值 + } + //dataSet中加count字段，代表权重，根据上面配置用以计算它的热度 + ``` + +* `grid-网格状展示`：示例地址 + +* Example: + ``` javascript + { + draw: 'grid', + size: 40, + label: { // 网格中显示累加的值总和 + show: true, + fillStyle: 'white', + shadowColor: 'yellow', + font: '20px Arial', + shadowBlur: 10, + }, + gradient: { 0.25: "rgb(0,0,255)", 0.55: "rgb(0,255,0)", 0.85: "yellow", 1.0: "rgb(255,0,0)"}, + } + ``` + +* `honeycomb-蜂窝状展示`：示例地址 + +* Example: + ``` javascript + { + draw: 'honeycomb', + size: 40, + label: { // 网格中显示累加的值总和 + show: true, + fillStyle: 'white', + shadowColor: 'yellow', + font: '20px Arial', + shadowBlur: 10, + }, + gradient: { 0.25: "rgb(0,0,255)", 0.55: "rgb(0,255,0)", 0.85: "yellow", 1.0: "rgb(255,0,0)"}, + } + ``` + + +* `bubble-用不同大小的圆来展示`：示例地址 + +* Example: + ``` javascript + { + draw: 'bubble', + max: 100, // 数值最大值范围 + maxSize: 10, // 显示的圆最大半径大小 + } + ``` +    dataSet中加count字段，代表权重，根据上面配置用以计算它实际展示的大小 + +`intensity-根据不同的值对应按渐变色中颜色进行展示`：示例地址 + +* Example: + ``` javascript + { + draw: 'intensity', + max: 100, // 最大阈值 + min: 0, // 最小阈值 + gradient: { // 显示的颜色渐变范围$ + '0': 'blue', + '0.6': 'cyan', + '0.7': 'lime', + '0.8': 'yellow', + '1.0': 'red' + }$ + } + ``` + +`category-按不同的值进行分类并使用对应的颜色展示`：示例地址 + +* Example: + ```javascript + { + draw: 'category', + splitList: { // 按对应的值按相应颜色展示 + other: 'rgba(255, 255, 0, 0.8)', + 1: 'rgba(253, 98, 104, 0.8)', + 2: 'rgba(255, 146, 149, 0.8)', + 3: 'rgba(255, 241, 193, 0.8)', + 4: 'rgba(110, 176, 253, 0.8)', + 5: 'rgba(52, 139, 251, 0.8)', + 6: 'rgba(17, 102, 252)' + } + } + ``` + +`choropleth-按不同的值区间进行分类并使用对应的颜色展示`：示例地址 + +* Example: + ```javascript + { + draw: 'choropleth', + // 按数值区间来展示不同颜色的点 + splitList: [ + { + start: 0, + end: 2, + color: randomColor() + },{ + start: 2, + end: 4, + color: randomColor() + },{ + start: 4, + end: 6, + color: randomColor() + },{ + start: 6, + end: 8, + color: randomColor() + },{ + start: 8, + color: randomColor() + } + ] + } + ``` + +`icon-展示icon`：示例地址 + +* Example: + ```javascript + { + draw: 'icon', + rotate: '90', // 图片旋转角度 + width: 10, // 规定图像的宽度 + height: 10, // 规定图像的高度 + size: 10, // 添加点击事件时候可以用来设置点击范围 + sx: 10, // 开始剪切的 x 坐标位置 + sy: 10, // 开始剪切的 y 坐标位置 + swidth: 10, // 被剪切图像的宽度 + sheight: 10, // 被剪切图像的高度 + } + ``` + +    dataSet中添加字段： + +* Example: + ```javascript + { + icon: Image, // 加载好的Image对象 + rotate: '90', // 图片旋转角度 + } + ``` + +`text-展示文本`：示例地址 + +* Example: + ```javascript + { + draw: 'text', + fillStyle: 'white', + textAlign: 'center', + avoid: true, // 开启文本标注避让 + textBaseline: 'middle', + offset: { // 文本便宜值 + x: 0, + y: 0 + } + } + ``` + +    dataSet中添加字段： + +* Example: + ``` javascript + { + text: '文本内容' + } + ``` + + +`animation-展示动画`：点动画1  点动画2  线动画 + +* Example: + ```json + { + "draw": "simple", + "animation": { + "type": "time", // 按时间展示动画 + "stepsRange": { + // 动画时间范围,time字段中值 + "start": 0, + "end": 100 + }, + "trails": 10, // 时间动画的拖尾大小 + "duration": 5 // 单个动画的时间，单位秒 + } + } + ``` diff --git a/website/public/static/demo/military/markdown/clientView_MapV/mapv-point_grid.md b/website/public/static/demo/military/markdown/clientView_MapV/mapv-point_grid.md new file mode 100644 index 000000000..673340946 --- /dev/null +++ b/website/public/static/demo/military/markdown/clientView_MapV/mapv-point_grid.md @@ -0,0 +1,394 @@ +## 方形网格密度 + +### 示例功能 + +    本示例对接MapV，实现在三维场景中加载MapV方形网格密度图。 + +### 示例实现 + +    本示例需要使用【include-cesium-local.js】开发库实现，初始化Cesium三维球控件 `Cesium.WebSceneControl()` 后构造热力图数据，通过mapv图层对象类 `CesiumZondy.Overlayer.MapvLayer` 来实现MapV图层的加载。 + +> 开发库使用请参见**首页**-**概述**-**原生JS调用**内容 + +#### Mapv + +> 特别说明：MapGIS Client for JavaScript在Cesium中对接了MapV插件，若插件本身存在问题，请优先参考Mapv官方教程寻找解决方案 + +### 实现步骤 + +**Step 1. 引用开发库**： +    本示例引用local本地【include-cesium-local.js】开发库，需要设置 `include` 属性为 `mapv` ； + +* Example: + ``` javascript + < script include = "mapv" src = "./static/libs/include-cesium-local.js" > < /script> + ``` + +**Step 2. 创建三维地图容器加载三维球控件,并加载底图**： +     创建三维视图容器，构造三维场景控件，构造并设置鼠标位置显示控件，并加载第三方互联网地图作为底图； + +**Step 3. 创建 `DataSet` 对象**： +    首先构造DataSet对象需要的数据，然后使用数据创建DataSet对象。DataSet对象使用Mapv框架的原生API创建，更多详细信息参考Mapv官方教程； + +* Example: + ``` javascript + var randomCount = 500; + var data = []; + while (randomCount--) { + data.push({ + geometry: { + type: 'Point', + coordinates: [75 + Math.random() * 50, 20.3 + Math.random() * 20] + }, + count: 30 * Math.random() + }); + } + var dataSet = new mapv.DataSet(data); + ``` + +**Step 4. 构造 `options` 参数**： +    options参数参考Mapv框架的原生API创建，更多详细信息参考Mapv官方教程； + +* Example: + ``` javascript + var options = { + context: '2d', + fillStyle: 'rgba(55, 50, 250, 0.8)', + size: 40, + globalAlpha: 0.5, + label: { + show: true, + fillStyle: 'white', + shadowColor: 'yellow', + font: '15px Arial', + shadowBlur: 10 + }, + gradient: { + 0: "rgba(49, 54, 149, 0)", + 0.2: "rgba(69,117,180, 0.7)", + 0.3: "rgba(116,173,209, 0.7)", + 0.4: "rgba(171,217,233, 0.7)", + 0.5: "rgba(224,243,248, 0.7)", + 0.6: "rgba(254,224,144,0.7)", + 0.7: "rgba(253,174,97,0.7)", + 0.8: "rgba(244,109,67,0.8)", + 0.9: "rgba(215,48,39,0.8)", + 0.95: "rgba(165, 0, 38,0.8)" + }, + shadowColor: 'rgba(255, 255, 50, 1)', + shadowBlur: 10, + max: 100, + draw: 'grid' + } + ``` + +**Step 5. 数据展示**： +    根据前面的步骤，将 `map` 、 `dataSet` 、 `options` 三个参数传入 `CesiumZondy.Overlayer.MapvLayer` 中创建对象，创建完成数据在三维场景中加载展示。 + +* Example: + ``` javascript + var mapvLayer = new CesiumZondy.Overlayer.MapvLayer(map, dataSet, options); + ``` + +### 关键接口 + +#### 1.【百度地图mapv图层】`mapv.baiduMapLayer` + +    mapv原生的创建地图方式为：`new mapv.baiduMapLayer(map, dataSet, options)`，示例中使用`CesiumZondy.Overlayer.MapvLayer(map, dataSet, options)`作为原生方式的替换，替换后的参数个数、参数类型、返回值等等都不会改变，具体的参数设置参考Mapv官网。 + +| 参数名 | 类型 | 说明 | +| ------- | ------ | --------------------------------------------------------- | +| map | Object | 地图对象 | +| dataSet | Object | DasetSet是mapv中统一规范的数据对象，用来保存javascript数据对象，可以增删改查数据，并且可以订阅数据修改事件 | +| options | Object | 其他参数 | + + +* `options`通用属性 + +* Example: + ``` json + { + zIndex: 1, // 层级 + size: 5, // 大小值 + unit: 'px', // 'px': 以像素为单位绘制,默认值。'm': 以米制为单位绘制，会跟随地图比例放大缩小 + mixBlendMode: 'normal', // 不同图层之间的叠加模式，参考[https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode) + fillStyle: 'rgba(200, 200, 50, 1)', // 填充颜色 + strokeStyle: 'rgba(0, 0, 255, 1)', // 描边颜色 + lineWidth: 4, // 描边宽度 + globalAlpha: 1, // 透明度 + globalCompositeOperation: 'lighter', // 颜色叠加方式 + coordType: 'bd09ll', // 可选百度墨卡托坐标类型bd09mc和百度经纬度坐标类型bd09ll(默认) + shadowColor: 'rgba(255, 255, 255, 1)', // 投影颜色 + shadowBlur: 35, // 投影模糊级数 + updateCallback: function (time) { // 重绘回调函数，如果是时间动画、返回当前帧的时间 + }, + shadowOffsetX: 0, + shadowOffsetY: 0, + context: '2d', // 可选2d和webgl，webgl目前只支持画simple模式的点和线 + lineCap: 'butt', + lineJoin: 'miter', + miterLimit: 10, + methods: { // 一些事件回调函数 + click: function (item) { // 点击事件，返回对应点击元素的对象值 + console.log(item); + }, + mousemove: function(item) { // 鼠标移动事件，对应鼠标经过的元素对象值 + console.log(item); + }, + tap: function(item) { + console.log(item) // 只针对移动端,点击事件 + } + }, + animation: { + type: 'time', // 按时间展示动画 + stepsRange: { // 动画时间范围,time字段中值 + start: 0, + end: 100 + }, + trails: 10, // 时间动画的拖尾大小 + duration: 5, // 单个动画的时间，单位秒 + } + } + ``` + +* `options.draw ` + + * simple 最直接的方式绘制点线面 + * time 按时间字段来动画展示数据 + * heatmap 热力图展示 + * grid 网格状展示 + * honeycomb 蜂窝状展示 + * bubble 用不同大小的圆来展示 + * intensity 根据不同的值对应按渐变色中颜色进行展示 + * category 按不同的值进行分类，并使用对应的颜色展示 + * choropleth 按不同的值区间进行分类，并使用对应的颜色展示 + * text 展示文本 + * icon 展示icon + + +* `simple-最直接的方式绘制点线面`：示例地址 + +    dataSet中也可直接配置每个数据项的样式 + +* Example: + ``` javascript + { + draw: 'simple', + geometry: { + type: 'Point', + coordinates: [123, 23] + }, + size: 10, // 点数据时候使用 + fillStyle: 'red', // 点数据时候使用 + strokeStyle: 'red' // 线数据时候使用 + } + ``` + +* `heatmap-热力图展示`：示例地址 + +* Example: + ``` javascript + var options = { + draw: 'heatmap', + size: 13, // 每个热力点半径大小 + gradient: { + // 热力图渐变色 + 0.25: 'rgb(0,0,255)', + 0.55: 'rgb(0,255,0)', + 0.85: 'yellow', + 1.0: 'rgb(255,0,0)', + }, + max: 100, // 最大权重值 + } + //dataSet中加count字段，代表权重，根据上面配置用以计算它的热度 + ``` + +* `grid-网格状展示`：示例地址 + +* Example: + ``` javascript + { + draw: 'grid', + size: 40, + label: { // 网格中显示累加的值总和 + show: true, + fillStyle: 'white', + shadowColor: 'yellow', + font: '20px Arial', + shadowBlur: 10, + }, + gradient: { 0.25: "rgb(0,0,255)", 0.55: "rgb(0,255,0)", 0.85: "yellow", 1.0: "rgb(255,0,0)"}, + } + ``` + +* `honeycomb-蜂窝状展示`：示例地址 + +* Example: + ``` javascript + { + draw: 'honeycomb', + size: 40, + label: { // 网格中显示累加的值总和 + show: true, + fillStyle: 'white', + shadowColor: 'yellow', + font: '20px Arial', + shadowBlur: 10, + }, + gradient: { 0.25: "rgb(0,0,255)", 0.55: "rgb(0,255,0)", 0.85: "yellow", 1.0: "rgb(255,0,0)"}, + } + ``` + + +* `bubble-用不同大小的圆来展示`：示例地址 + +* Example: + ``` javascript + { + draw: 'bubble', + max: 100, // 数值最大值范围 + maxSize: 10, // 显示的圆最大半径大小 + } + ``` +    dataSet中加count字段，代表权重，根据上面配置用以计算它实际展示的大小 + +`intensity-根据不同的值对应按渐变色中颜色进行展示`：示例地址 + +* Example: + ``` javascript + { + draw: 'intensity', + max: 100, // 最大阈值 + min: 0, // 最小阈值 + gradient: { // 显示的颜色渐变范围$ + '0': 'blue', + '0.6': 'cyan', + '0.7': 'lime', + '0.8': 'yellow', + '1.0': 'red' + }$ + } + ``` + +`category-按不同的值进行分类并使用对应的颜色展示`：示例地址 + +* Example: + ```javascript + { + draw: 'category', + splitList: { // 按对应的值按相应颜色展示 + other: 'rgba(255, 255, 0, 0.8)', + 1: 'rgba(253, 98, 104, 0.8)', + 2: 'rgba(255, 146, 149, 0.8)', + 3: 'rgba(255, 241, 193, 0.8)', + 4: 'rgba(110, 176, 253, 0.8)', + 5: 'rgba(52, 139, 251, 0.8)', + 6: 'rgba(17, 102, 252)' + } + } + ``` + +`choropleth-按不同的值区间进行分类并使用对应的颜色展示`：示例地址 + +* Example: + ```javascript + { + draw: 'choropleth', + // 按数值区间来展示不同颜色的点 + splitList: [ + { + start: 0, + end: 2, + color: randomColor() + },{ + start: 2, + end: 4, + color: randomColor() + },{ + start: 4, + end: 6, + color: randomColor() + },{ + start: 6, + end: 8, + color: randomColor() + },{ + start: 8, + color: randomColor() + } + ] + } + ``` + +`icon-展示icon`：示例地址 + +* Example: + ```javascript + { + draw: 'icon', + rotate: '90', // 图片旋转角度 + width: 10, // 规定图像的宽度 + height: 10, // 规定图像的高度 + size: 10, // 添加点击事件时候可以用来设置点击范围 + sx: 10, // 开始剪切的 x 坐标位置 + sy: 10, // 开始剪切的 y 坐标位置 + swidth: 10, // 被剪切图像的宽度 + sheight: 10, // 被剪切图像的高度 + } + ``` + +    dataSet中添加字段： + +* Example: + ```javascript + { + icon: Image, // 加载好的Image对象 + rotate: '90', // 图片旋转角度 + } + ``` + +`text-展示文本`：示例地址 + +* Example: + ```javascript + { + draw: 'text', + fillStyle: 'white', + textAlign: 'center', + avoid: true, // 开启文本标注避让 + textBaseline: 'middle', + offset: { // 文本便宜值 + x: 0, + y: 0 + } + } + ``` + +    dataSet中添加字段： + +* Example: + ``` javascript + { + text: '文本内容' + } + ``` + + +`animation-展示动画`：点动画1  点动画2  线动画 + +* Example: + ```json + { + "draw": "simple", + "animation": { + "type": "time", // 按时间展示动画 + "stepsRange": { + // 动画时间范围,time字段中值 + "start": 0, + "end": 100 + }, + "trails": 10, // 时间动画的拖尾大小 + "duration": 5 // 单个动画的时间，单位秒 + } + } + ``` diff --git a/website/public/static/demo/military/markdown/clientView_MapV/mapv-point_honeycomb.md b/website/public/static/demo/military/markdown/clientView_MapV/mapv-point_honeycomb.md new file mode 100644 index 000000000..edffacace --- /dev/null +++ b/website/public/static/demo/military/markdown/clientView_MapV/mapv-point_honeycomb.md @@ -0,0 +1,393 @@ +## 蜂窝形密度 + +### 示例功能 + +    本示例对接MapV，实现在三维场景中加载MapV蜂窝形密度图。 + +### 示例实现 + +    本示例需要使用【include-cesium-local.js】开发库实现，初始化Cesium三维球控件 `Cesium.WebSceneControl()` 后构造热力图数据，通过mapv图层对象类 `CesiumZondy.Overlayer.MapvLayer` 来实现MapV图层的加载。 + +> 开发库使用请参见**首页**-**概述**-**原生JS调用**内容 + +#### Mapv + +> 特别说明：MapGIS Client for JavaScript在Cesium中对接了MapV插件，若插件本身存在问题，请优先参考Mapv官方教程寻找解决方案 + +### 实现步骤 + +**Step 1. 引用开发库**： +    本示例引用local本地【include-cesium-local.js】开发库，需要设置 `include` 属性为 `mapv` ； + +* Example: + ``` javascript + < script include = "mapv" src = "./static/libs/include-cesium-local.js" > < /script> + ``` + +**Step 2. 创建三维地图容器加载三维球控件,并加载底图**： +    创建三维视图容器，构造三维场景控件，构造并设置鼠标位置显示控件，并加载第三方互联网地图作为底图； + +**Step 3. 创建 `DataSet` 对象**： +     首先构造DataSet对象需要的数据，然后使用数据创建DataSet对象。DataSet对象使用Mapv框架的原生API创建，更多详细信息参考Mapv官方教程； + +* Example: + ``` javascript + var randomCount = 500; + var data = []; + while (randomCount--) { + data.push({ + geometry: { + type: 'Point', + coordinates: [75 + Math.random() * 50, 20.3 + Math.random() * 20] + }, + count: 30 * Math.random() + }); + } + var dataSet = new mapv.DataSet(data); + ``` + +**Step 4. 构造 `options` 参数**： +    options参数参考Mapv框架的原生API创建，更多详细信息参考Mapv官方教程； + +* Example: + ``` javascript + var options = { + context: '2d', + //fillStyle: 'rgba(255, 250, 50, 0.7)', + label: { + show: true, + fillStyle: 'white', + shadowColor: 'yellow', + font: '15px Arial', + shadowBlur: 10 + }, + size: 30, + gradient: { + 0: "rgba(49, 54, 149, 0)", + 0.2: "rgba(69,117,180, 0.7)", + 0.3: "rgba(116,173,209, 0.7)", + 0.4: "rgba(171,217,233, 0.7)", + 0.5: "rgba(224,243,248, 0.7)", + 0.6: "rgba(254,224,144,0.7)", + 0.7: "rgba(253,174,97,0.7)", + 0.8: "rgba(244,109,67,0.8)", + 0.9: "rgba(215,48,39,0.8)", + 0.95: "rgba(165, 0, 38,0.8)" + }, + max: 100, + draw: 'honeycomb' + } + ``` + +**Step 5. 数据展示**： +    根据前面的步骤，将 `map` 、 `dataSet` 、 `options` 三个参数传入 `CesiumZondy.Overlayer.MapvLayer` 中创建对象，创建完成数据在三维场景中加载展示。 + +* Example: + ``` javascript + var mapvLayer = new CesiumZondy.Overlayer.MapvLayer(map, dataSet, options); + ``` + +### 关键接口 + +#### 1.【百度地图mapv图层】`mapv.baiduMapLayer` + +    mapv原生的创建地图方式为：`new mapv.baiduMapLayer(map, dataSet, options)`，示例中使用`CesiumZondy.Overlayer.MapvLayer(map, dataSet, options)`作为原生方式的替换，替换后的参数个数、参数类型、返回值等等都不会改变，具体的参数设置参考Mapv官网。 + +| 参数名 | 类型 | 说明 | +| ------- | ------ | --------------------------------------------------------- | +| map | Object | 地图对象 | +| dataSet | Object | DasetSet是mapv中统一规范的数据对象，用来保存javascript数据对象，可以增删改查数据，并且可以订阅数据修改事件 | +| options | Object | 其他参数 | + + +* `options`通用属性 + +* Example: + ``` json + { + zIndex: 1, // 层级 + size: 5, // 大小值 + unit: 'px', // 'px': 以像素为单位绘制,默认值。'm': 以米制为单位绘制，会跟随地图比例放大缩小 + mixBlendMode: 'normal', // 不同图层之间的叠加模式，参考[https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode) + fillStyle: 'rgba(200, 200, 50, 1)', // 填充颜色 + strokeStyle: 'rgba(0, 0, 255, 1)', // 描边颜色 + lineWidth: 4, // 描边宽度 + globalAlpha: 1, // 透明度 + globalCompositeOperation: 'lighter', // 颜色叠加方式 + coordType: 'bd09ll', // 可选百度墨卡托坐标类型bd09mc和百度经纬度坐标类型bd09ll(默认) + shadowColor: 'rgba(255, 255, 255, 1)', // 投影颜色 + shadowBlur: 35, // 投影模糊级数 + updateCallback: function (time) { // 重绘回调函数，如果是时间动画、返回当前帧的时间 + }, + shadowOffsetX: 0, + shadowOffsetY: 0, + context: '2d', // 可选2d和webgl，webgl目前只支持画simple模式的点和线 + lineCap: 'butt', + lineJoin: 'miter', + miterLimit: 10, + methods: { // 一些事件回调函数 + click: function (item) { // 点击事件，返回对应点击元素的对象值 + console.log(item); + }, + mousemove: function(item) { // 鼠标移动事件，对应鼠标经过的元素对象值 + console.log(item); + }, + tap: function(item) { + console.log(item) // 只针对移动端,点击事件 + } + }, + animation: { + type: 'time', // 按时间展示动画 + stepsRange: { // 动画时间范围,time字段中值 + start: 0, + end: 100 + }, + trails: 10, // 时间动画的拖尾大小 + duration: 5, // 单个动画的时间，单位秒 + } + } + ``` + + +* `options.draw ` + + * simple 最直接的方式绘制点线面 + * time 按时间字段来动画展示数据 + * heatmap 热力图展示 + * grid 网格状展示 + * honeycomb 蜂窝状展示 + * bubble 用不同大小的圆来展示 + * intensity 根据不同的值对应按渐变色中颜色进行展示 + * category 按不同的值进行分类，并使用对应的颜色展示 + * choropleth 按不同的值区间进行分类，并使用对应的颜色展示 + * text 展示文本 + * icon 展示icon + + +* `simple-最直接的方式绘制点线面`：示例地址 + +    dataSet中也可直接配置每个数据项的样式 + +* Example: + ``` javascript + { + draw: 'simple', + geometry: { + type: 'Point', + coordinates: [123, 23] + }, + size: 10, // 点数据时候使用 + fillStyle: 'red', // 点数据时候使用 + strokeStyle: 'red' // 线数据时候使用 + } + ``` + +* `heatmap-热力图展示`：示例地址 + +* Example: + ``` javascript + var options = { + draw: 'heatmap', + size: 13, // 每个热力点半径大小 + gradient: { + // 热力图渐变色 + 0.25: 'rgb(0,0,255)', + 0.55: 'rgb(0,255,0)', + 0.85: 'yellow', + 1.0: 'rgb(255,0,0)', + }, + max: 100, // 最大权重值 + } + //dataSet中加count字段，代表权重，根据上面配置用以计算它的热度 + ``` + +* `grid-网格状展示`：示例地址 + +* Example: + ``` javascript + { + draw: 'grid', + size: 40, + label: { // 网格中显示累加的值总和 + show: true, + fillStyle: 'white', + shadowColor: 'yellow', + font: '20px Arial', + shadowBlur: 10, + }, + gradient: { 0.25: "rgb(0,0,255)", 0.55: "rgb(0,255,0)", 0.85: "yellow", 1.0: "rgb(255,0,0)"}, + } + ``` + +* `honeycomb-蜂窝状展示`：示例地址 + +* Example: + ``` javascript + { + draw: 'honeycomb', + size: 40, + label: { // 网格中显示累加的值总和 + show: true, + fillStyle: 'white', + shadowColor: 'yellow', + font: '20px Arial', + shadowBlur: 10, + }, + gradient: { 0.25: "rgb(0,0,255)", 0.55: "rgb(0,255,0)", 0.85: "yellow", 1.0: "rgb(255,0,0)"}, + } + ``` + + +* `bubble-用不同大小的圆来展示`：示例地址 + +* Example: + ``` javascript + { + draw: 'bubble', + max: 100, // 数值最大值范围 + maxSize: 10, // 显示的圆最大半径大小 + } + ``` +    dataSet中加count字段，代表权重，根据上面配置用以计算它实际展示的大小 + +`intensity-根据不同的值对应按渐变色中颜色进行展示`：示例地址 + +* Example: + ``` javascript + { + draw: 'intensity', + max: 100, // 最大阈值 + min: 0, // 最小阈值 + gradient: { // 显示的颜色渐变范围$ + '0': 'blue', + '0.6': 'cyan', + '0.7': 'lime', + '0.8': 'yellow', + '1.0': 'red' + } + } + ``` + +`category-按不同的值进行分类并使用对应的颜色展示`：示例地址 + +* Example: + ```javascript + { + draw: 'category', + splitList: { // 按对应的值按相应颜色展示 + other: 'rgba(255, 255, 0, 0.8)', + 1: 'rgba(253, 98, 104, 0.8)', + 2: 'rgba(255, 146, 149, 0.8)', + 3: 'rgba(255, 241, 193, 0.8)', + 4: 'rgba(110, 176, 253, 0.8)', + 5: 'rgba(52, 139, 251, 0.8)', + 6: 'rgba(17, 102, 252)' + } + } + ``` + +`choropleth-按不同的值区间进行分类并使用对应的颜色展示`：示例地址 + +* Example: + ```javascript + { + draw: 'choropleth', + // 按数值区间来展示不同颜色的点 + splitList: [ + { + start: 0, + end: 2, + color: randomColor() + },{ + start: 2, + end: 4, + color: randomColor() + },{ + start: 4, + end: 6, + color: randomColor() + },{ + start: 6, + end: 8, + color: randomColor() + },{ + start: 8, + color: randomColor() + } + ] + } + ``` + +`icon-展示icon`：示例地址 + +* Example: + ```javascript + { + draw: 'icon', + rotate: '90', // 图片旋转角度 + width: 10, // 规定图像的宽度 + height: 10, // 规定图像的高度 + size: 10, // 添加点击事件时候可以用来设置点击范围 + sx: 10, // 开始剪切的 x 坐标位置 + sy: 10, // 开始剪切的 y 坐标位置 + swidth: 10, // 被剪切图像的宽度 + sheight: 10, // 被剪切图像的高度 + } + ``` + +    dataSet中添加字段： + +* Example: + ```javascript + { + icon: Image, // 加载好的Image对象 + rotate: '90', // 图片旋转角度 + } + ``` + +`text-展示文本`：示例地址 + +* Example: + ```javascript + { + draw: 'text', + fillStyle: 'white', + textAlign: 'center', + avoid: true, // 开启文本标注避让 + textBaseline: 'middle', + offset: { // 文本便宜值 + x: 0, + y: 0 + } + } + ``` + +    dataSet中添加字段： + +* Example: + ``` javascript + { + text: '文本内容' + } + ``` + + +`animation-展示动画`：点动画1  点动画2  线动画 + +* Example: + ```json + { + "draw": "simple", + "animation": { + "type": "time", // 按时间展示动画 + "stepsRange": { + // 动画时间范围,time字段中值 + "start": 0, + "end": 100 + }, + "trails": 10, // 时间动画的拖尾大小 + "duration": 5 // 单个动画的时间，单位秒 + } + } + ``` + diff --git a/website/public/static/demo/military/markdown/clientView_MapV/mapv-point_mutilanimate.md b/website/public/static/demo/military/markdown/clientView_MapV/mapv-point_mutilanimate.md new file mode 100644 index 000000000..76354b46e --- /dev/null +++ b/website/public/static/demo/military/markdown/clientView_MapV/mapv-point_mutilanimate.md @@ -0,0 +1,390 @@ +## 点重叠播放 + +### 示例功能 + +    本示例对接MapV，实现在三维场景中加载MapV点重叠播放图。 + +### 示例实现 + +    本示例需要使用【include-cesium-local.js】开发库实现，初始化Cesium三维球控件 `Cesium.WebSceneControl()` 后构造热力图数据，通过mapv图层对象类 `CesiumZondy.Overlayer.MapvLayer` 来实现MapV图层的加载。 + +> 开发库使用请参见**首页**-**概述**-**原生JS调用**内容 + +#### Mapv + +> 特别说明：MapGIS Client for JavaScript在Cesium中对接了MapV插件，若插件本身存在问题，请优先参考Mapv官方教程寻找解决方案 + +### 实现步骤 + +**Step 1. 引用开发库**： +    本示例引用local本地【include-cesium-local.js】开发库，需要设置 `include` 属性为 `mapv` ； + +* Example: + ``` javascript + < script include = "mapv" src = "./static/libs/include-cesium-local.js" > < /script> + ``` + +**Step 2. 创建三维地图容器加载三维球控件,并加载底图**： +     创建三维视图容器，构造三维场景控件，构造并设置鼠标位置显示控件，并加载第三方互联网地图作为底图； + +**Step 3. 创建 `DataSet` 对象**： +     首先构造DataSet对象需要的数据，然后使用数据创建DataSet对象。DataSet对象使用Mapv框架的原生API创建，更多详细信息参考Mapv官方教程； + +* Example: + ``` javascript + var randomCount = 1000; + var data = []; + var citys = ["北京", "天津", "上海", "重庆", "石家庄", "太原", "呼和浩特", "哈尔滨", "长春", "沈阳", "济南", "南京", "合肥", "杭州", "南昌", "福州", + "郑州", "武汉", "长沙", "广州", "南宁", "西安", "银川", "兰州", "西宁", "乌鲁木齐", "成都", "贵阳", "昆明", "拉萨", "海口" + ]; + // 构造数据 + while (randomCount--) { + var cityCenter = mapv.utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length)]); + data.push({ + geometry: { + type: 'Point', + coordinates: [cityCenter.lng - 2 + Math.random() * 4, cityCenter.lat - 2 + Math.random() * 4] + }, + count: 30 * Math.random(), + time: 100 * Math.random() + }); + } + var dataSet = new mapv.DataSet(data); + ``` + +**Step 4. 构造 `options` 参数**： +    options参数参考Mapv框架的原生API创建，更多详细信息参考Mapv官方教程； + +* Example: + ``` javascript + var options = { + context: '2d', + fillStyle: 'rgba(55, 50, 250, 0.2)', + globalCompositeOperation: "lighter", + size: 10, + animation: { + type: 'time', + stepsRange: { + start: 0, + end: 100 + }, + trails: 10, + duration: 5, + }, + draw: 'simple' + }; + ``` + +**Step 5. 数据展示**： +    根据前面的步骤，将 `map` 、 `dataSet` 、 `options` 三个参数传入 `CesiumZondy.Overlayer.MapvLayer` 中创建对象，创建完成数据在三维场景中加载展示。 + +* Example: + ``` javascript + var mapvLayer = new CesiumZondy.Overlayer.MapvLayer(map, dataSet, options); + ``` + +### 关键接口 + +#### 1.【百度地图mapv图层】`mapv.baiduMapLayer` + +    mapv原生的创建地图方式为：`new mapv.baiduMapLayer(map, dataSet, options)`，示例中使用`CesiumZondy.Overlayer.MapvLayer(map, dataSet, options)`作为原生方式的替换，替换后的参数个数、参数类型、返回值等等都不会改变，具体的参数设置参考Mapv官网。 + +| 参数名 | 类型 | 说明 | +| ------- | ------ | --------------------------------------------------------- | +| map | Object | 地图对象 | +| dataSet | Object | DasetSet是mapv中统一规范的数据对象，用来保存javascript数据对象，可以增删改查数据，并且可以订阅数据修改事件 | +| options | Object | 其他参数 | + + +* `options`通用属性 + +* Example: + ``` json + { + zIndex: 1, // 层级 + size: 5, // 大小值 + unit: 'px', // 'px': 以像素为单位绘制,默认值。'm': 以米制为单位绘制，会跟随地图比例放大缩小 + mixBlendMode: 'normal', // 不同图层之间的叠加模式，参考[https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode) + fillStyle: 'rgba(200, 200, 50, 1)', // 填充颜色 + strokeStyle: 'rgba(0, 0, 255, 1)', // 描边颜色 + lineWidth: 4, // 描边宽度 + globalAlpha: 1, // 透明度 + globalCompositeOperation: 'lighter', // 颜色叠加方式 + coordType: 'bd09ll', // 可选百度墨卡托坐标类型bd09mc和百度经纬度坐标类型bd09ll(默认) + shadowColor: 'rgba(255, 255, 255, 1)', // 投影颜色 + shadowBlur: 35, // 投影模糊级数 + updateCallback: function (time) { // 重绘回调函数，如果是时间动画、返回当前帧的时间 + }, + shadowOffsetX: 0, + shadowOffsetY: 0, + context: '2d', // 可选2d和webgl，webgl目前只支持画simple模式的点和线 + lineCap: 'butt', + lineJoin: 'miter', + miterLimit: 10, + methods: { // 一些事件回调函数 + click: function (item) { // 点击事件，返回对应点击元素的对象值 + console.log(item); + }, + mousemove: function(item) { // 鼠标移动事件，对应鼠标经过的元素对象值 + console.log(item); + }, + tap: function(item) { + console.log(item) // 只针对移动端,点击事件 + } + }, + animation: { + type: 'time', // 按时间展示动画 + stepsRange: { // 动画时间范围,time字段中值 + start: 0, + end: 100 + }, + trails: 10, // 时间动画的拖尾大小 + duration: 5, // 单个动画的时间，单位秒 + } + } + ``` + +* `options.draw ` + + * simple 最直接的方式绘制点线面 + * time 按时间字段来动画展示数据 + * heatmap 热力图展示 + * grid 网格状展示 + * honeycomb 蜂窝状展示 + * bubble 用不同大小的圆来展示 + * intensity 根据不同的值对应按渐变色中颜色进行展示 + * category 按不同的值进行分类，并使用对应的颜色展示 + * choropleth 按不同的值区间进行分类，并使用对应的颜色展示 + * text 展示文本 + * icon 展示icon + + +* `simple-最直接的方式绘制点线面`：示例地址 + +    dataSet中也可直接配置每个数据项的样式 + +* Example: + ``` javascript + { + draw: 'simple', + geometry: { + type: 'Point', + coordinates: [123, 23] + }, + size: 10, // 点数据时候使用 + fillStyle: 'red', // 点数据时候使用 + strokeStyle: 'red' // 线数据时候使用 + } + ``` + +* `heatmap-热力图展示`：示例地址 + +* Example: + ``` javascript + var options = { + draw: 'heatmap', + size: 13, // 每个热力点半径大小 + gradient: { + // 热力图渐变色 + 0.25: 'rgb(0,0,255)', + 0.55: 'rgb(0,255,0)', + 0.85: 'yellow', + 1.0: 'rgb(255,0,0)', + }, + max: 100, // 最大权重值 + } + //dataSet中加count字段，代表权重，根据上面配置用以计算它的热度 + ``` + +* `grid-网格状展示`：示例地址 + +* Example: + ``` javascript + { + draw: 'grid', + size: 40, + label: { // 网格中显示累加的值总和 + show: true, + fillStyle: 'white', + shadowColor: 'yellow', + font: '20px Arial', + shadowBlur: 10, + }, + gradient: { 0.25: "rgb(0,0,255)", 0.55: "rgb(0,255,0)", 0.85: "yellow", 1.0: "rgb(255,0,0)"}, + } + ``` + +* `honeycomb-蜂窝状展示`：示例地址 + +* Example: + ``` javascript + { + draw: 'honeycomb', + size: 40, + label: { // 网格中显示累加的值总和 + show: true, + fillStyle: 'white', + shadowColor: 'yellow', + font: '20px Arial', + shadowBlur: 10, + }, + gradient: { 0.25: "rgb(0,0,255)", 0.55: "rgb(0,255,0)", 0.85: "yellow", 1.0: "rgb(255,0,0)"}, + } + ``` + + +* `bubble-用不同大小的圆来展示`：示例地址 + +* Example: + ``` javascript + { + draw: 'bubble', + max: 100, // 数值最大值范围 + maxSize: 10, // 显示的圆最大半径大小 + } + ``` +    dataSet中加count字段，代表权重，根据上面配置用以计算它实际展示的大小 + +`intensity-根据不同的值对应按渐变色中颜色进行展示`：示例地址 + +* Example: + ``` javascript + { + draw: 'intensity', + max: 100, // 最大阈值 + min: 0, // 最小阈值 + gradient: { // 显示的颜色渐变范围$ + '0': 'blue', + '0.6': 'cyan', + '0.7': 'lime', + '0.8': 'yellow', + '1.0': 'red' + } + } + ``` + +`category-按不同的值进行分类并使用对应的颜色展示`：示例地址 + +* Example: + ```javascript + { + draw: 'category', + splitList: { // 按对应的值按相应颜色展示 + other: 'rgba(255, 255, 0, 0.8)', + 1: 'rgba(253, 98, 104, 0.8)', + 2: 'rgba(255, 146, 149, 0.8)', + 3: 'rgba(255, 241, 193, 0.8)', + 4: 'rgba(110, 176, 253, 0.8)', + 5: 'rgba(52, 139, 251, 0.8)', + 6: 'rgba(17, 102, 252)' + } + } + ``` + +`choropleth-按不同的值区间进行分类并使用对应的颜色展示`：示例地址 + +* Example: + ```javascript + { + draw: 'choropleth', + // 按数值区间来展示不同颜色的点 + splitList: [ + { + start: 0, + end: 2, + color: randomColor() + },{ + start: 2, + end: 4, + color: randomColor() + },{ + start: 4, + end: 6, + color: randomColor() + },{ + start: 6, + end: 8, + color: randomColor() + },{ + start: 8, + color: randomColor() + } + ] + } + ``` + +`icon-展示icon`：示例地址 + +* Example: + ```javascript + { + draw: 'icon', + rotate: '90', // 图片旋转角度 + width: 10, // 规定图像的宽度 + height: 10, // 规定图像的高度 + size: 10, // 添加点击事件时候可以用来设置点击范围 + sx: 10, // 开始剪切的 x 坐标位置 + sy: 10, // 开始剪切的 y 坐标位置 + swidth: 10, // 被剪切图像的宽度 + sheight: 10, // 被剪切图像的高度 + } + ``` + +    dataSet中添加字段： + +* Example: + ```javascript + { + icon: Image, // 加载好的Image对象 + rotate: '90', // 图片旋转角度 + } + ``` + +`text-展示文本`：示例地址 + +* Example: + ```javascript + { + draw: 'text', + fillStyle: 'white', + textAlign: 'center', + avoid: true, // 开启文本标注避让 + textBaseline: 'middle', + offset: { // 文本便宜值 + x: 0, + y: 0 + } + } + ``` + +    dataSet中添加字段： + +* Example: + ``` javascript + { + text: '文本内容' + } + ``` + + +`animation-展示动画`：点动画1  点动画2  线动画 + +* Example: + ```json + { + "draw": "simple", + "animation": { + "type": "time", // 按时间展示动画 + "stepsRange": { + // 动画时间范围,time字段中值 + "start": 0, + "end": 100 + }, + "trails": 10, // 时间动画的拖尾大小 + "duration": 5 // 单个动画的时间，单位秒 + } + } + ``` + + + diff --git a/website/public/static/demo/military/markdown/clientView_MapV/mapv-point_weibo.md b/website/public/static/demo/military/markdown/clientView_MapV/mapv-point_weibo.md new file mode 100644 index 000000000..5031f9283 --- /dev/null +++ b/website/public/static/demo/military/markdown/clientView_MapV/mapv-point_weibo.md @@ -0,0 +1,403 @@ +## 点微博数据 + +### 示例功能 + +    本示例对接MapV，实现在三维场景中加载MapV点微博数据图。 + +### 示例实现 + +    本示例需要使用【include-cesium-local.js】开发库实现，初始化Cesium三维球控件 `Cesium.WebSceneControl()` 后构造热力图数据，通过mapv图层对象类 `CesiumZondy.Overlayer.MapvLayer` 来实现MapV图层的加载。 + +> 开发库使用请参见**首页**-**概述**-**原生JS调用**内容 + +#### Mapv + +> 特别说明：MapGIS Client for JavaScript在Cesium中对接了MapV插件，若插件本身存在问题，请优先参考Mapv官方教程寻找解决方案 + +### 实现步骤 + +**Step 1. 引用开发库**： +    本示例引用local本地【include-cesium-local.js】开发库，需要设置 `include` 属性为 `mapv` ； + +* Example: + ``` javascript + < script include = "mapv" src = "./static/libs/include-cesium-local.js" > < /script> + ``` + +**Step 2. 创建三维地图容器加载三维球控件,并加载底图**： +     创建三维视图容器，构造三维场景控件，构造并设置鼠标位置显示控件，并加载第三方互联网地图作为底图； + +**Step 3. 创建 `DataSet` 对象**： +     首先构造DataSet对象需要的数据，然后使用数据创建DataSet对象。DataSet对象使用Mapv框架的原生API创建，更多详细信息参考Mapv官方教程； + +* Example: + ``` javascript + var data1 = []; + var data2 = []; + var data3 = []; + var data4 = []; + for (var i = 0; i < rs[0].length; i++) { + var geoCoord = rs[0][i].geoCoord; + data1.push({ + geometry: { + type: 'Point', + coordinates: geoCoord + } + }); + } + for (var i = 0; i < rs[1].length; i++) { + var geoCoord = rs[1][i].geoCoord; + data2.push({ + geometry: { + type: 'Point', + coordinates: geoCoord + }, + time: Math.random() * 10 + }); + } + for (var i = 0; i < rs[2].length; i++) { + var geoCoord = rs[2][i].geoCoord; + data3.push({ + geometry: { + type: 'Point', + coordinates: geoCoord + }, + }); + } + var dataSet = new mapv.DataSet(data1); + ``` + +**Step 4. 构造 `options` 参数**： +    options参数参考Mapv框架的原生API创建，更多详细信息参考Mapv官方教程； + +* Example: + ``` javascript + var options = { + context: '2d', + fillStyle: 'rgba(200, 200, 0, 0.8)', + bigData: 'Point', + size: 0.7, + draw: 'simple', + } + var mapvLayer = new CesiumZondy.Overlayer.MapvLayer(map, dataSet, options); + + var dataSet = new mapv.DataSet(data2); + var options = { + context: '2d', + fillStyle: 'rgba(255, 250, 0, 0.8)', + size: 0.7, + bigData: 'Point', + draw: 'simple', + } + ``` + +**Step 5. 数据展示**： +    根据前面的步骤，将 `map` 、 `dataSet` 、 `options` 三个参数传入 `CesiumZondy.Overlayer.MapvLayer` 中创建对象，创建完成数据在三维场景中加载展示。 + +* Example: + ``` javascript + var mapvLayer = new CesiumZondy.Overlayer.MapvLayer(map, dataSet, options); + ``` + +### 关键接口 + +#### 1.【百度地图mapv图层】`mapv.baiduMapLayer` + +    mapv原生的创建地图方式为：`new mapv.baiduMapLayer(map, dataSet, options)`，示例中使用`CesiumZondy.Overlayer.MapvLayer(map, dataSet, options)`作为原生方式的替换，替换后的参数个数、参数类型、返回值等等都不会改变，具体的参数设置参考Mapv官网。 + +| 参数名 | 类型 | 说明 | +| ------- | ------ | --------------------------------------------------------- | +| map | Object | 地图对象 | +| dataSet | Object | DasetSet是mapv中统一规范的数据对象，用来保存javascript数据对象，可以增删改查数据，并且可以订阅数据修改事件 | +| options | Object | 其他参数 | + + +* `options`通用属性 + +* Example: + ``` json + { + zIndex: 1, // 层级 + size: 5, // 大小值 + unit: 'px', // 'px': 以像素为单位绘制,默认值。'm': 以米制为单位绘制，会跟随地图比例放大缩小 + mixBlendMode: 'normal', // 不同图层之间的叠加模式，参考[https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode) + fillStyle: 'rgba(200, 200, 50, 1)', // 填充颜色 + strokeStyle: 'rgba(0, 0, 255, 1)', // 描边颜色 + lineWidth: 4, // 描边宽度 + globalAlpha: 1, // 透明度 + globalCompositeOperation: 'lighter', // 颜色叠加方式 + coordType: 'bd09ll', // 可选百度墨卡托坐标类型bd09mc和百度经纬度坐标类型bd09ll(默认) + shadowColor: 'rgba(255, 255, 255, 1)', // 投影颜色 + shadowBlur: 35, // 投影模糊级数 + updateCallback: function (time) { // 重绘回调函数，如果是时间动画、返回当前帧的时间 + }, + shadowOffsetX: 0, + shadowOffsetY: 0, + context: '2d', // 可选2d和webgl，webgl目前只支持画simple模式的点和线 + lineCap: 'butt', + lineJoin: 'miter', + miterLimit: 10, + methods: { // 一些事件回调函数 + click: function (item) { // 点击事件，返回对应点击元素的对象值 + console.log(item); + }, + mousemove: function(item) { // 鼠标移动事件，对应鼠标经过的元素对象值 + console.log(item); + }, + tap: function(item) { + console.log(item) // 只针对移动端,点击事件 + } + }, + animation: { + type: 'time', // 按时间展示动画 + stepsRange: { // 动画时间范围,time字段中值 + start: 0, + end: 100 + }, + trails: 10, // 时间动画的拖尾大小 + duration: 5, // 单个动画的时间，单位秒 + } + } + ``` + +* `options.draw ` + + * simple 最直接的方式绘制点线面 + * time 按时间字段来动画展示数据 + * heatmap 热力图展示 + * grid 网格状展示 + * honeycomb 蜂窝状展示 + * bubble 用不同大小的圆来展示 + * intensity 根据不同的值对应按渐变色中颜色进行展示 + * category 按不同的值进行分类，并使用对应的颜色展示 + * choropleth 按不同的值区间进行分类，并使用对应的颜色展示 + * text 展示文本 + * icon 展示icon + + +* `simple-最直接的方式绘制点线面`：示例地址 + +    dataSet中也可直接配置每个数据项的样式 + +* Example: + ``` javascript + { + draw: 'simple', + geometry: { + type: 'Point', + coordinates: [123, 23] + }, + size: 10, // 点数据时候使用 + fillStyle: 'red', // 点数据时候使用 + strokeStyle: 'red' // 线数据时候使用 + } + ``` + +* `heatmap-热力图展示`：示例地址 + +* Example: + ``` javascript + var options = { + draw: 'heatmap', + size: 13, // 每个热力点半径大小 + gradient: { + // 热力图渐变色 + 0.25: 'rgb(0,0,255)', + 0.55: 'rgb(0,255,0)', + 0.85: 'yellow', + 1.0: 'rgb(255,0,0)', + }, + max: 100, // 最大权重值 + } + //dataSet中加count字段，代表权重，根据上面配置用以计算它的热度 + ``` + +* `grid-网格状展示`：示例地址 + +* Example: + ``` javascript + { + draw: 'grid', + size: 40, + label: { // 网格中显示累加的值总和 + show: true, + fillStyle: 'white', + shadowColor: 'yellow', + font: '20px Arial', + shadowBlur: 10, + }, + gradient: { 0.25: "rgb(0,0,255)", 0.55: "rgb(0,255,0)", 0.85: "yellow", 1.0: "rgb(255,0,0)"}, + } + ``` + +* `honeycomb-蜂窝状展示`：示例地址 + +* Example: + ``` javascript + { + draw: 'honeycomb', + size: 40, + label: { // 网格中显示累加的值总和 + show: true, + fillStyle: 'white', + shadowColor: 'yellow', + font: '20px Arial', + shadowBlur: 10, + }, + gradient: { 0.25: "rgb(0,0,255)", 0.55: "rgb(0,255,0)", 0.85: "yellow", 1.0: "rgb(255,0,0)"}, + } + ``` + + +* `bubble-用不同大小的圆来展示`：示例地址 + +* Example: + ``` javascript + { + draw: 'bubble', + max: 100, // 数值最大值范围 + maxSize: 10, // 显示的圆最大半径大小 + } + ``` +    dataSet中加count字段，代表权重，根据上面配置用以计算它实际展示的大小 + +`intensity-根据不同的值对应按渐变色中颜色进行展示`：示例地址 + +* Example: + ``` javascript + { + draw: 'intensity', + max: 100, // 最大阈值 + min: 0, // 最小阈值 + gradient: { // 显示的颜色渐变范围$ + '0': 'blue', + '0.6': 'cyan', + '0.7': 'lime', + '0.8': 'yellow', + '1.0': 'red' + } + } + ``` + +`category-按不同的值进行分类并使用对应的颜色展示`：示例地址 + +* Example: + ```javascript + { + draw: 'category', + splitList: { // 按对应的值按相应颜色展示 + other: 'rgba(255, 255, 0, 0.8)', + 1: 'rgba(253, 98, 104, 0.8)', + 2: 'rgba(255, 146, 149, 0.8)', + 3: 'rgba(255, 241, 193, 0.8)', + 4: 'rgba(110, 176, 253, 0.8)', + 5: 'rgba(52, 139, 251, 0.8)', + 6: 'rgba(17, 102, 252)' + } + } + ``` + +`choropleth-按不同的值区间进行分类并使用对应的颜色展示`：示例地址 + +* Example: + ```javascript + { + draw: 'choropleth', + // 按数值区间来展示不同颜色的点 + splitList: [ + { + start: 0, + end: 2, + color: randomColor() + },{ + start: 2, + end: 4, + color: randomColor() + },{ + start: 4, + end: 6, + color: randomColor() + },{ + start: 6, + end: 8, + color: randomColor() + },{ + start: 8, + color: randomColor() + } + ] + } + ``` + +`icon-展示icon`：示例地址 + +* Example: + ```javascript + { + draw: 'icon', + rotate: '90', // 图片旋转角度 + width: 10, // 规定图像的宽度 + height: 10, // 规定图像的高度 + size: 10, // 添加点击事件时候可以用来设置点击范围 + sx: 10, // 开始剪切的 x 坐标位置 + sy: 10, // 开始剪切的 y 坐标位置 + swidth: 10, // 被剪切图像的宽度 + sheight: 10, // 被剪切图像的高度 + } + ``` + +    dataSet中添加字段： + +* Example: + ```javascript + { + icon: Image, // 加载好的Image对象 + rotate: '90', // 图片旋转角度 + } + ``` + +`text-展示文本`：示例地址 + +* Example: + ```javascript + { + draw: 'text', + fillStyle: 'white', + textAlign: 'center', + avoid: true, // 开启文本标注避让 + textBaseline: 'middle', + offset: { // 文本便宜值 + x: 0, + y: 0 + } + } + ``` + +    dataSet中添加字段： + +* Example: + ``` javascript + { + text: '文本内容' + } + ``` + + +`animation-展示动画`：点动画1  点动画2  线动画 + +* Example: + ```json + { + "draw": "simple", + "animation": { + "type": "time", // 按时间展示动画 + "stepsRange": { + // 动画时间范围,time字段中值 + "start": 0, + "end": 100 + }, + "trails": 10, // 时间动画的拖尾大小 + "duration": 5 // 单个动画的时间，单位秒 + } + } + ``` \ No newline at end of file diff --git a/website/public/static/demo/military/markdown/clientView_MapV/mapv-render_polygon.md b/website/public/static/demo/military/markdown/clientView_MapV/mapv-render_polygon.md new file mode 100644 index 000000000..9f67f5e97 --- /dev/null +++ b/website/public/static/demo/military/markdown/clientView_MapV/mapv-render_polygon.md @@ -0,0 +1,363 @@ +## 区数据渲染 + +### 示例功能 + +    本示例对接MapV，实现在三维场景中加载MapV区数据渲染图。 + +### 示例实现 + +    本示例需要使用【include-cesium-local.js】开发库实现，初始化Cesium三维球控件 `Cesium.WebSceneControl()` 后构造热力图数据，通过mapv图层对象类 `CesiumZondy.Overlayer.MapvLayer` 来实现MapV图层的加载。 + +> 开发库使用请参见**首页**-**概述**-**原生JS调用**内容 + +#### Mapv + +> 特别说明：MapGIS Client for JavaScript在Cesium中对接了MapV插件，若插件本身存在问题，请优先参考Mapv官方教程寻找解决方案 + +### 实现步骤 + +**Step 1. 引用开发库**： +    本示例引用local本地【include-cesium-local.js】开发库，需要设置 `include` 属性为 `mapv` ； + +* Example: + ``` javascript + < script include = "mapv" src = "./static/libs/include-cesium-local.js" > < /script> + ``` + +**Step 2. 创建三维地图容器加载三维球控件,并加载底图**： +     创建三维视图容器，构造三维场景控件，构造并设置鼠标位置显示控件，并加载第三方互联网地图作为底图； + +**Step 3. 创建 `DataSet` 对象**： +     首先构造DataSet对象需要的数据，然后使用数据创建DataSet对象。DataSet对象使用Mapv框架的原生API创建，更多详细信息参考Mapv官方教程； + +* Example: + ``` javascript + var dataSet = new mapv.DataSet(data); + ``` + +**Step 4. 构造 `options` 参数**： +    options参数参考Mapv框架的原生API创建，更多详细信息参考Mapv官方教程； + +* Example: + ``` javascript + var options = { + context: '2d', + fillStyle: 'rgba(255, 80, 53, 0.8)', + strokeStyle: 'rgba(250, 255, 53, 0.8)', + size: 3, + lineWidth: 1, + draw: 'simple' + }; + ``` + +**Step 5. 数据展示**： +    根据前面的步骤，将 `map` 、 `dataSet` 、 `options` 三个参数传入 `CesiumZondy.Overlayer.MapvLayer` 中创建对象，创建完成数据在三维场景中加载展示。 + +* Example: + ``` javascript + var mapvLayer = new CesiumZondy.Overlayer.MapvLayer(map, dataSet, options); + ``` + +### 关键接口 + +#### 1.【百度地图mapv图层】`mapv.baiduMapLayer` + +    mapv原生的创建地图方式为：`new mapv.baiduMapLayer(map, dataSet, options)`，示例中使用`CesiumZondy.Overlayer.MapvLayer(map, dataSet, options)`作为原生方式的替换，替换后的参数个数、参数类型、返回值等等都不会改变，具体的参数设置参考Mapv官网。 + +| 参数名 | 类型 | 说明 | +| ------- | ------ | --------------------------------------------------------- | +| map | Object | 地图对象 | +| dataSet | Object | DasetSet是mapv中统一规范的数据对象，用来保存javascript数据对象，可以增删改查数据，并且可以订阅数据修改事件 | +| options | Object | 其他参数 | + + +* `options`通用属性 + +* Example: + ``` json + { + zIndex: 1, // 层级 + size: 5, // 大小值 + unit: 'px', // 'px': 以像素为单位绘制,默认值。'm': 以米制为单位绘制，会跟随地图比例放大缩小 + mixBlendMode: 'normal', // 不同图层之间的叠加模式，参考[https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode) + fillStyle: 'rgba(200, 200, 50, 1)', // 填充颜色 + strokeStyle: 'rgba(0, 0, 255, 1)', // 描边颜色 + lineWidth: 4, // 描边宽度 + globalAlpha: 1, // 透明度 + globalCompositeOperation: 'lighter', // 颜色叠加方式 + coordType: 'bd09ll', // 可选百度墨卡托坐标类型bd09mc和百度经纬度坐标类型bd09ll(默认) + shadowColor: 'rgba(255, 255, 255, 1)', // 投影颜色 + shadowBlur: 35, // 投影模糊级数 + updateCallback: function (time) { // 重绘回调函数，如果是时间动画、返回当前帧的时间 + }, + shadowOffsetX: 0, + shadowOffsetY: 0, + context: '2d', // 可选2d和webgl，webgl目前只支持画simple模式的点和线 + lineCap: 'butt', + lineJoin: 'miter', + miterLimit: 10, + methods: { // 一些事件回调函数 + click: function (item) { // 点击事件，返回对应点击元素的对象值 + console.log(item); + }, + mousemove: function(item) { // 鼠标移动事件，对应鼠标经过的元素对象值 + console.log(item); + }, + tap: function(item) { + console.log(item) // 只针对移动端,点击事件 + } + }, + animation: { + type: 'time', // 按时间展示动画 + stepsRange: { // 动画时间范围,time字段中值 + start: 0, + end: 100 + }, + trails: 10, // 时间动画的拖尾大小 + duration: 5, // 单个动画的时间，单位秒 + } + } + ``` + +* `options.draw ` + + * simple 最直接的方式绘制点线面 + * time 按时间字段来动画展示数据 + * heatmap 热力图展示 + * grid 网格状展示 + * honeycomb 蜂窝状展示 + * bubble 用不同大小的圆来展示 + * intensity 根据不同的值对应按渐变色中颜色进行展示 + * category 按不同的值进行分类，并使用对应的颜色展示 + * choropleth 按不同的值区间进行分类，并使用对应的颜色展示 + * text 展示文本 + * icon 展示icon + + +* `simple-最直接的方式绘制点线面`：示例地址 + +    dataSet中也可直接配置每个数据项的样式 + +* Example: + ``` javascript + { + draw: 'simple', + geometry: { + type: 'Point', + coordinates: [123, 23] + }, + size: 10, // 点数据时候使用 + fillStyle: 'red', // 点数据时候使用 + strokeStyle: 'red' // 线数据时候使用 + } + ``` + +* `heatmap-热力图展示`：示例地址 + +* Example: + ``` javascript + var options = { + draw: 'heatmap', + size: 13, // 每个热力点半径大小 + gradient: { + // 热力图渐变色 + 0.25: 'rgb(0,0,255)', + 0.55: 'rgb(0,255,0)', + 0.85: 'yellow', + 1.0: 'rgb(255,0,0)', + }, + max: 100, // 最大权重值 + } + //dataSet中加count字段，代表权重，根据上面配置用以计算它的热度 + ``` + +* `grid-网格状展示`：示例地址 + +* Example: + ``` javascript + { + draw: 'grid', + size: 40, + label: { // 网格中显示累加的值总和 + show: true, + fillStyle: 'white', + shadowColor: 'yellow', + font: '20px Arial', + shadowBlur: 10, + }, + gradient: { 0.25: "rgb(0,0,255)", 0.55: "rgb(0,255,0)", 0.85: "yellow", 1.0: "rgb(255,0,0)"}, + } + ``` + +* `honeycomb-蜂窝状展示`：示例地址 + +* Example: + ``` javascript + { + draw: 'honeycomb', + size: 40, + label: { // 网格中显示累加的值总和 + show: true, + fillStyle: 'white', + shadowColor: 'yellow', + font: '20px Arial', + shadowBlur: 10, + }, + gradient: { 0.25: "rgb(0,0,255)", 0.55: "rgb(0,255,0)", 0.85: "yellow", 1.0: "rgb(255,0,0)"}, + } + ``` + + +* `bubble-用不同大小的圆来展示`：示例地址 + +* Example: + ``` javascript + { + draw: 'bubble', + max: 100, // 数值最大值范围 + maxSize: 10, // 显示的圆最大半径大小 + } + ``` +    dataSet中加count字段，代表权重，根据上面配置用以计算它实际展示的大小 + +`intensity-根据不同的值对应按渐变色中颜色进行展示`：示例地址 + +* Example: + ``` javascript + { + draw: 'intensity', + max: 100, // 最大阈值 + min: 0, // 最小阈值 + gradient: { // 显示的颜色渐变范围$ + '0': 'blue', + '0.6': 'cyan', + '0.7': 'lime', + '0.8': 'yellow', + '1.0': 'red' + } + } + ``` + +`category-按不同的值进行分类并使用对应的颜色展示`：示例地址 + +* Example: + ```javascript + { + draw: 'category', + splitList: { // 按对应的值按相应颜色展示 + other: 'rgba(255, 255, 0, 0.8)', + 1: 'rgba(253, 98, 104, 0.8)', + 2: 'rgba(255, 146, 149, 0.8)', + 3: 'rgba(255, 241, 193, 0.8)', + 4: 'rgba(110, 176, 253, 0.8)', + 5: 'rgba(52, 139, 251, 0.8)', + 6: 'rgba(17, 102, 252)' + } + } + ``` + +`choropleth-按不同的值区间进行分类并使用对应的颜色展示`：示例地址 + +* Example: + ```javascript + { + draw: 'choropleth', + // 按数值区间来展示不同颜色的点 + splitList: [ + { + start: 0, + end: 2, + color: randomColor() + },{ + start: 2, + end: 4, + color: randomColor() + },{ + start: 4, + end: 6, + color: randomColor() + },{ + start: 6, + end: 8, + color: randomColor() + },{ + start: 8, + color: randomColor() + } + ] + } + ``` + +`icon-展示icon`：示例地址 + +* Example: + ```javascript + { + draw: 'icon', + rotate: '90', // 图片旋转角度 + width: 10, // 规定图像的宽度 + height: 10, // 规定图像的高度 + size: 10, // 添加点击事件时候可以用来设置点击范围 + sx: 10, // 开始剪切的 x 坐标位置 + sy: 10, // 开始剪切的 y 坐标位置 + swidth: 10, // 被剪切图像的宽度 + sheight: 10, // 被剪切图像的高度 + } + ``` + +    dataSet中添加字段： + +* Example: + ```javascript + { + icon: Image, // 加载好的Image对象 + rotate: '90', // 图片旋转角度 + } + ``` + +`text-展示文本`：示例地址 + +* Example: + ```javascript + { + draw: 'text', + fillStyle: 'white', + textAlign: 'center', + avoid: true, // 开启文本标注避让 + textBaseline: 'middle', + offset: { // 文本便宜值 + x: 0, + y: 0 + } + } + ``` + +    dataSet中添加字段： + +* Example: + ``` javascript + { + text: '文本内容' + } + ``` + + +`animation-展示动画`：点动画1  点动画2  线动画 + +* Example: + ```json + { + "draw": "simple", + "animation": { + "type": "time", // 按时间展示动画 + "stepsRange": { + // 动画时间范围,time字段中值 + "start": 0, + "end": 100 + }, + "trails": 10, // 时间动画的拖尾大小 + "duration": 5 // 单个动画的时间，单位秒 + } + } + ``` + diff --git a/website/public/static/demo/military/markdown/clientView_MapV/mapv-simplemigrate.md b/website/public/static/demo/military/markdown/clientView_MapV/mapv-simplemigrate.md new file mode 100644 index 000000000..b588e4045 --- /dev/null +++ b/website/public/static/demo/military/markdown/clientView_MapV/mapv-simplemigrate.md @@ -0,0 +1,372 @@ +## 单一迁移轨迹 + +### 示例功能 + +    本示例对接MapV，实现在三维场景中加载MapV单一迁移轨迹图。 + +### 示例实现 + +    本示例需要使用【include-cesium-local.js】开发库实现，初始化Cesium三维球控件 `Cesium.WebSceneControl()` 后构造热力图数据，通过mapv图层对象类 `CesiumZondy.Overlayer.MapvLayer` 来实现MapV图层的加载。 + +> 开发库使用请参见**首页**-**概述**-**原生JS调用**内容 + +#### Mapv + +> 特别说明：MapGIS Client for JavaScript在Cesium中对接了MapV插件，若插件本身存在问题，请优先参考Mapv官方教程寻找解决方案 + +### 实现步骤 + +**Step 1. 引用开发库**： +    本示例引用local本地【include-cesium-local.js】开发库，需要设置 `include` 属性为 `mapv` ； + +* Example: + ``` javascript + < script include = "mapv" src = "./static/libs/include-cesium-local.js" > < /script> + ``` + +**Step 2. 创建三维地图容器加载三维球控件,并加载底图**： +     创建三维视图容器，构造三维场景控件，构造并设置鼠标位置显示控件，并加载第三方互联网地图作为底图； + +**Step 3. 创建 `DataSet` 对象**： +    首先构造DataSet对象需要的数据，然后使用数据创建DataSet对象。DataSet对象使用Mapv框架的原生API创建，更多详细信息参考Mapv官方教程； + +* Example: + ``` javascript + var timeDataSet = new mapv.DataSet(timeData); + ``` + +**Step 4. 构造 `options` 参数**： +    options参数参考Mapv框架的原生API创建，更多详细信息参考Mapv官方教程； + +* Example: + ``` javascript + var timeOptions = { + context: '2d', + fillStyle: 'rgba(255, 250, 250, 0.5)', + zIndex: 200, + size: 2.5, + animation: { + type: 'time', + stepsRange: { + start: 0, + end: 50 + }, + trails: 10, + duration: 2, + }, + draw: 'simple' + } + ``` + +**Step 5. 数据展示**： +    根据前面的步骤，将 `map` 、 `dataSet` 、 `options` 三个参数传入 `CesiumZondy.Overlayer.MapvLayer` 中创建对象，创建完成数据在三维场景中加载展示。 + +* Example: + ``` javascript + var mapvLayer = new CesiumZondy.Overlayer.MapvLayer(map, dataSet, options); + ``` + +### 关键接口 + +#### 1.【百度地图mapv图层】`mapv.baiduMapLayer` + +    mapv原生的创建地图方式为：`new mapv.baiduMapLayer(map, dataSet, options)`，示例中使用`CesiumZondy.Overlayer.MapvLayer(map, dataSet, options)`作为原生方式的替换，替换后的参数个数、参数类型、返回值等等都不会改变，具体的参数设置参考Mapv官网。 + +| 参数名 | 类型 | 说明 | +| ------- | ------ | --------------------------------------------------------- | +| map | Object | 地图对象 | +| dataSet | Object | DasetSet是mapv中统一规范的数据对象，用来保存javascript数据对象，可以增删改查数据，并且可以订阅数据修改事件 | +| options | Object | 其他参数 | + + +* `options`通用属性 + +* Example: + ``` json + { + zIndex: 1, // 层级 + size: 5, // 大小值 + unit: 'px', // 'px': 以像素为单位绘制,默认值。'm': 以米制为单位绘制，会跟随地图比例放大缩小 + mixBlendMode: 'normal', // 不同图层之间的叠加模式，参考[https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode) + fillStyle: 'rgba(200, 200, 50, 1)', // 填充颜色 + strokeStyle: 'rgba(0, 0, 255, 1)', // 描边颜色 + lineWidth: 4, // 描边宽度 + globalAlpha: 1, // 透明度 + globalCompositeOperation: 'lighter', // 颜色叠加方式 + coordType: 'bd09ll', // 可选百度墨卡托坐标类型bd09mc和百度经纬度坐标类型bd09ll(默认) + shadowColor: 'rgba(255, 255, 255, 1)', // 投影颜色 + shadowBlur: 35, // 投影模糊级数 + updateCallback: function (time) { // 重绘回调函数，如果是时间动画、返回当前帧的时间 + }, + shadowOffsetX: 0, + shadowOffsetY: 0, + context: '2d', // 可选2d和webgl，webgl目前只支持画simple模式的点和线 + lineCap: 'butt', + lineJoin: 'miter', + miterLimit: 10, + methods: { // 一些事件回调函数 + click: function (item) { // 点击事件，返回对应点击元素的对象值 + console.log(item); + }, + mousemove: function(item) { // 鼠标移动事件，对应鼠标经过的元素对象值 + console.log(item); + }, + tap: function(item) { + console.log(item) // 只针对移动端,点击事件 + } + }, + animation: { + type: 'time', // 按时间展示动画 + stepsRange: { // 动画时间范围,time字段中值 + start: 0, + end: 100 + }, + trails: 10, // 时间动画的拖尾大小 + duration: 5, // 单个动画的时间，单位秒 + } + } + ``` + + +* `options.draw ` + + * simple 最直接的方式绘制点线面 + * time 按时间字段来动画展示数据 + * heatmap 热力图展示 + * grid 网格状展示 + * honeycomb 蜂窝状展示 + * bubble 用不同大小的圆来展示 + * intensity 根据不同的值对应按渐变色中颜色进行展示 + * category 按不同的值进行分类，并使用对应的颜色展示 + * choropleth 按不同的值区间进行分类，并使用对应的颜色展示 + * text 展示文本 + * icon 展示icon + + +* `simple-最直接的方式绘制点线面`：示例地址 + +    dataSet中也可直接配置每个数据项的样式 + +* Example: + ``` javascript + { + draw: 'simple', + geometry: { + type: 'Point', + coordinates: [123, 23] + }, + size: 10, // 点数据时候使用 + fillStyle: 'red', // 点数据时候使用 + strokeStyle: 'red' // 线数据时候使用 + } + ``` + +* `heatmap-热力图展示`：示例地址 + +* Example: + ``` javascript + var options = { + draw: 'heatmap', + size: 13, // 每个热力点半径大小 + gradient: { + // 热力图渐变色 + 0.25: 'rgb(0,0,255)', + 0.55: 'rgb(0,255,0)', + 0.85: 'yellow', + 1.0: 'rgb(255,0,0)', + }, + max: 100, // 最大权重值 + } + //dataSet中加count字段，代表权重，根据上面配置用以计算它的热度 + ``` + +* `grid-网格状展示`：示例地址 + +* Example: + ``` javascript + { + draw: 'grid', + size: 40, + label: { // 网格中显示累加的值总和 + show: true, + fillStyle: 'white', + shadowColor: 'yellow', + font: '20px Arial', + shadowBlur: 10, + }, + gradient: { 0.25: "rgb(0,0,255)", 0.55: "rgb(0,255,0)", 0.85: "yellow", 1.0: "rgb(255,0,0)"}, + } + ``` + +* `honeycomb-蜂窝状展示`：示例地址 + +* Example: + ``` javascript + { + draw: 'honeycomb', + size: 40, + label: { // 网格中显示累加的值总和 + show: true, + fillStyle: 'white', + shadowColor: 'yellow', + font: '20px Arial', + shadowBlur: 10, + }, + gradient: { 0.25: "rgb(0,0,255)", 0.55: "rgb(0,255,0)", 0.85: "yellow", 1.0: "rgb(255,0,0)"}, + } + ``` + + +* `bubble-用不同大小的圆来展示`：示例地址 + +* Example: + ``` javascript + { + draw: 'bubble', + max: 100, // 数值最大值范围 + maxSize: 10, // 显示的圆最大半径大小 + } + ``` +    dataSet中加count字段，代表权重，根据上面配置用以计算它实际展示的大小 + +`intensity-根据不同的值对应按渐变色中颜色进行展示`：示例地址 + +* Example: + ``` javascript + { + draw: 'intensity', + max: 100, // 最大阈值 + min: 0, // 最小阈值 + gradient: { // 显示的颜色渐变范围$ + '0': 'blue', + '0.6': 'cyan', + '0.7': 'lime', + '0.8': 'yellow', + '1.0': 'red' + } + } + ``` + +`category-按不同的值进行分类并使用对应的颜色展示`：示例地址 + +* Example: + ```javascript + { + draw: 'category', + splitList: { // 按对应的值按相应颜色展示 + other: 'rgba(255, 255, 0, 0.8)', + 1: 'rgba(253, 98, 104, 0.8)', + 2: 'rgba(255, 146, 149, 0.8)', + 3: 'rgba(255, 241, 193, 0.8)', + 4: 'rgba(110, 176, 253, 0.8)', + 5: 'rgba(52, 139, 251, 0.8)', + 6: 'rgba(17, 102, 252)' + } + } + ``` + +`choropleth-按不同的值区间进行分类并使用对应的颜色展示`：示例地址 + +* Example: + ```javascript + { + draw: 'choropleth', + // 按数值区间来展示不同颜色的点 + splitList: [ + { + start: 0, + end: 2, + color: randomColor() + },{ + start: 2, + end: 4, + color: randomColor() + },{ + start: 4, + end: 6, + color: randomColor() + },{ + start: 6, + end: 8, + color: randomColor() + },{ + start: 8, + color: randomColor() + } + ] + } + ``` + +`icon-展示icon`：示例地址 + +* Example: + ```javascript + { + draw: 'icon', + rotate: '90', // 图片旋转角度 + width: 10, // 规定图像的宽度 + height: 10, // 规定图像的高度 + size: 10, // 添加点击事件时候可以用来设置点击范围 + sx: 10, // 开始剪切的 x 坐标位置 + sy: 10, // 开始剪切的 y 坐标位置 + swidth: 10, // 被剪切图像的宽度 + sheight: 10, // 被剪切图像的高度 + } + ``` + +    dataSet中添加字段： + +* Example: + ```javascript + { + icon: Image, // 加载好的Image对象 + rotate: '90', // 图片旋转角度 + } + ``` + +`text-展示文本`：示例地址 + +* Example: + ```javascript + { + draw: 'text', + fillStyle: 'white', + textAlign: 'center', + avoid: true, // 开启文本标注避让 + textBaseline: 'middle', + offset: { // 文本便宜值 + x: 0, + y: 0 + } + } + ``` + +    dataSet中添加字段： + +* Example: + ``` javascript + { + text: '文本内容' + } + ``` + + +`animation-展示动画`：点动画1  点动画2  线动画 + +* Example: + ```json + { + "draw": "simple", + "animation": { + "type": "time", // 按时间展示动画 + "stepsRange": { + // 动画时间范围,time字段中值 + "start": 0, + "end": 100 + }, + "trails": 10, // 时间动画的拖尾大小 + "duration": 5 // 单个动画的时间，单位秒 + } + } + ``` + diff --git a/website/public/static/demo/military/markdown/clientView_MapV/mapv-tracker.md b/website/public/static/demo/military/markdown/clientView_MapV/mapv-tracker.md new file mode 100644 index 000000000..d09467db8 --- /dev/null +++ b/website/public/static/demo/military/markdown/clientView_MapV/mapv-tracker.md @@ -0,0 +1,397 @@ +## 动态轨迹 + +### 示例功能 + +    本示例对接MapV，实现在三维场景中加载MapV动态轨迹图。 + +### 示例实现 + +    本示例需要使用【include-cesium-local.js】开发库实现，初始化Cesium三维球控件 `Cesium.WebSceneControl()` 后构造热力图数据，通过mapv图层对象类 `CesiumZondy.Overlayer.MapvLayer` 来实现MapV图层的加载。 + +> 开发库使用请参见**首页**-**概述**-**原生JS调用**内容 + +#### Mapv + +> 特别说明：MapGIS Client for JavaScript在Cesium中对接了MapV插件，若插件本身存在问题，请优先参考Mapv官方教程寻找解决方案 + +### 实现步骤 + +**Step 1. 引用开发库**： +    本示例引用local本地【include-cesium-local.js】开发库，需要设置 `include` 属性为 `mapv` ； + +* Example: + ``` javascript + < script include = "mapv" + src = "./static/libs/include-cesium-local.js" > < /script> + ``` + +**Step 2. 创建三维地图容器加载三维球控件,并加载底图**： +     创建三维视图容器，构造三维场景控件，构造并设置鼠标位置显示控件，并加载第三方互联网地图作为底图； + +**Step 3. 创建 `DataSet` 对象**： +    首先构造DataSet对象需要的数据，然后使用数据创建DataSet对象。DataSet对象使用Mapv框架的原生API创建，更多详细信息参考Mapv官方教程； + +* Example: + ``` javascript + var data = []; + var timeData = []; + rs = rs.split("\n"); + var maxLength = 0; + for (var i = 0; i < rs.length; i++) { + var item = rs[i].split(','); + var coordinates = []; + if (item.length > maxLength) { + maxLength = item.length; + } + for (j = 0; j < item.length; j += 2) { + if (item.length === 1) { + continue; + } + coordinates.push(proj4('EPSG:3857', 'EPSG:4326', [item[j], item[j + 1]])); + timeData.push({ + geometry: { + type: 'Point', + coordinates: proj4('EPSG:3857', 'EPSG:4326', [item[j], item[j + 1]]) + }, + count: 1, + time: j + }); + } + data.push({ + geometry: { + type: 'LineString', + coordinates: coordinates + } + }); + } + var dataSet1 = new mapv.DataSet(data); + ``` + +**Step 4. 构造 `options` 参数**： +    options参数参考Mapv框架的原生API创建，更多详细信息参考Mapv官方教程； + +* Example: + ``` javascript + var options = { + context: '2d', + strokeStyle: 'rgba(53,57,255,0.5)', + coordType: 'bd09mc', + shadowColor: 'rgba(53,57,255,0.2)', + shadowBlur: 3, + lineWidth: 3.0, + draw: 'simple' + }; + ``` + +**Step 5. 数据展示**： +    根据前面的步骤，将 `map` 、 `dataSet` 、 `options` 三个参数传入 `CesiumZondy.Overlayer.MapvLayer` 中创建对象，创建完成数据在三维场景中加载展示。 + +* Example: + ``` javascript + var mapvLayer = new CesiumZondy.Overlayer.MapvLayer(map, dataSet, options); + ``` + +### 关键接口 + +#### 1.【百度地图mapv图层】`mapv.baiduMapLayer` + +    mapv原生的创建地图方式为：`new mapv.baiduMapLayer(map, dataSet, options)`，示例中使用`CesiumZondy.Overlayer.MapvLayer(map, dataSet, options)`作为原生方式的替换，替换后的参数个数、参数类型、返回值等等都不会改变，具体的参数设置参考Mapv官网。 + +| 参数名 | 类型 | 说明 | +| ------- | ------ | --------------------------------------------------------- | +| map | Object | 地图对象 | +| dataSet | Object | DasetSet是mapv中统一规范的数据对象，用来保存javascript数据对象，可以增删改查数据，并且可以订阅数据修改事件 | +| options | Object | 其他参数 | + + +* `options`通用属性 + +* Example: + ``` json + { + zIndex: 1, // 层级 + size: 5, // 大小值 + unit: 'px', // 'px': 以像素为单位绘制,默认值。'm': 以米制为单位绘制，会跟随地图比例放大缩小 + mixBlendMode: 'normal', // 不同图层之间的叠加模式，参考[https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode) + fillStyle: 'rgba(200, 200, 50, 1)', // 填充颜色 + strokeStyle: 'rgba(0, 0, 255, 1)', // 描边颜色 + lineWidth: 4, // 描边宽度 + globalAlpha: 1, // 透明度 + globalCompositeOperation: 'lighter', // 颜色叠加方式 + coordType: 'bd09ll', // 可选百度墨卡托坐标类型bd09mc和百度经纬度坐标类型bd09ll(默认) + shadowColor: 'rgba(255, 255, 255, 1)', // 投影颜色 + shadowBlur: 35, // 投影模糊级数 + updateCallback: function (time) { // 重绘回调函数，如果是时间动画、返回当前帧的时间 + }, + shadowOffsetX: 0, + shadowOffsetY: 0, + context: '2d', // 可选2d和webgl，webgl目前只支持画simple模式的点和线 + lineCap: 'butt', + lineJoin: 'miter', + miterLimit: 10, + methods: { // 一些事件回调函数 + click: function (item) { // 点击事件，返回对应点击元素的对象值 + console.log(item); + }, + mousemove: function(item) { // 鼠标移动事件，对应鼠标经过的元素对象值 + console.log(item); + }, + tap: function(item) { + console.log(item) // 只针对移动端,点击事件 + } + }, + animation: { + type: 'time', // 按时间展示动画 + stepsRange: { // 动画时间范围,time字段中值 + start: 0, + end: 100 + }, + trails: 10, // 时间动画的拖尾大小 + duration: 5, // 单个动画的时间，单位秒 + } + } + ``` + + +* `options.draw ` + + * simple 最直接的方式绘制点线面 + * time 按时间字段来动画展示数据 + * heatmap 热力图展示 + * grid 网格状展示 + * honeycomb 蜂窝状展示 + * bubble 用不同大小的圆来展示 + * intensity 根据不同的值对应按渐变色中颜色进行展示 + * category 按不同的值进行分类，并使用对应的颜色展示 + * choropleth 按不同的值区间进行分类，并使用对应的颜色展示 + * text 展示文本 + * icon 展示icon + + +* `simple-最直接的方式绘制点线面`：示例地址 + +    dataSet中也可直接配置每个数据项的样式 + +* Example: + ``` javascript + { + draw: 'simple', + geometry: { + type: 'Point', + coordinates: [123, 23] + }, + size: 10, // 点数据时候使用 + fillStyle: 'red', // 点数据时候使用 + strokeStyle: 'red' // 线数据时候使用 + } + ``` + +* `heatmap-热力图展示`：示例地址 + +* Example: + ``` javascript + var options = { + draw: 'heatmap', + size: 13, // 每个热力点半径大小 + gradient: { + // 热力图渐变色 + 0.25: 'rgb(0,0,255)', + 0.55: 'rgb(0,255,0)', + 0.85: 'yellow', + 1.0: 'rgb(255,0,0)', + }, + max: 100, // 最大权重值 + } + //dataSet中加count字段，代表权重，根据上面配置用以计算它的热度 + ``` + +* `grid-网格状展示`：示例地址 + +* Example: + ``` javascript + { + draw: 'grid', + size: 40, + label: { // 网格中显示累加的值总和 + show: true, + fillStyle: 'white', + shadowColor: 'yellow', + font: '20px Arial', + shadowBlur: 10, + }, + gradient: { 0.25: "rgb(0,0,255)", 0.55: "rgb(0,255,0)", 0.85: "yellow", 1.0: "rgb(255,0,0)"}, + } + ``` + +* `honeycomb-蜂窝状展示`：示例地址 + +* Example: + ``` javascript + { + draw: 'honeycomb', + size: 40, + label: { // 网格中显示累加的值总和 + show: true, + fillStyle: 'white', + shadowColor: 'yellow', + font: '20px Arial', + shadowBlur: 10, + }, + gradient: { 0.25: "rgb(0,0,255)", 0.55: "rgb(0,255,0)", 0.85: "yellow", 1.0: "rgb(255,0,0)"}, + } + ``` + + +* `bubble-用不同大小的圆来展示`：示例地址 + +* Example: + ``` javascript + { + draw: 'bubble', + max: 100, // 数值最大值范围 + maxSize: 10, // 显示的圆最大半径大小 + } + ``` +    dataSet中加count字段，代表权重，根据上面配置用以计算它实际展示的大小 + +`intensity-根据不同的值对应按渐变色中颜色进行展示`：示例地址 + +* Example: + ``` javascript + { + draw: 'intensity', + max: 100, // 最大阈值 + min: 0, // 最小阈值 + gradient: { // 显示的颜色渐变范围$ + '0': 'blue', + '0.6': 'cyan', + '0.7': 'lime', + '0.8': 'yellow', + '1.0': 'red' + } + } + ``` + +`category-按不同的值进行分类并使用对应的颜色展示`：示例地址 + +* Example: + ```javascript + { + draw: 'category', + splitList: { // 按对应的值按相应颜色展示 + other: 'rgba(255, 255, 0, 0.8)', + 1: 'rgba(253, 98, 104, 0.8)', + 2: 'rgba(255, 146, 149, 0.8)', + 3: 'rgba(255, 241, 193, 0.8)', + 4: 'rgba(110, 176, 253, 0.8)', + 5: 'rgba(52, 139, 251, 0.8)', + 6: 'rgba(17, 102, 252)' + } + } + ``` + +`choropleth-按不同的值区间进行分类并使用对应的颜色展示`：示例地址 + +* Example: + ```javascript + { + draw: 'choropleth', + // 按数值区间来展示不同颜色的点 + splitList: [ + { + start: 0, + end: 2, + color: randomColor() + },{ + start: 2, + end: 4, + color: randomColor() + },{ + start: 4, + end: 6, + color: randomColor() + },{ + start: 6, + end: 8, + color: randomColor() + },{ + start: 8, + color: randomColor() + } + ] + } + ``` + +`icon-展示icon`：示例地址 + +* Example: + ```javascript + { + draw: 'icon', + rotate: '90', // 图片旋转角度 + width: 10, // 规定图像的宽度 + height: 10, // 规定图像的高度 + size: 10, // 添加点击事件时候可以用来设置点击范围 + sx: 10, // 开始剪切的 x 坐标位置 + sy: 10, // 开始剪切的 y 坐标位置 + swidth: 10, // 被剪切图像的宽度 + sheight: 10, // 被剪切图像的高度 + } + ``` + +    dataSet中添加字段： + +* Example: + ```javascript + { + icon: Image, // 加载好的Image对象 + rotate: '90', // 图片旋转角度 + } + ``` + +`text-展示文本`：示例地址 + +* Example: + ```javascript + { + draw: 'text', + fillStyle: 'white', + textAlign: 'center', + avoid: true, // 开启文本标注避让 + textBaseline: 'middle', + offset: { // 文本便宜值 + x: 0, + y: 0 + } + } + ``` + +    dataSet中添加字段： + +* Example: + ``` javascript + { + text: '文本内容' + } + ``` + + +`animation-展示动画`：点动画1  点动画2  线动画 + +* Example: + ```json + { + "draw": "simple", + "animation": { + "type": "time", // 按时间展示动画 + "stepsRange": { + // 动画时间范围,time字段中值 + "start": 0, + "end": 100 + }, + "trails": 10, // 时间动画的拖尾大小 + "duration": 5 // 单个动画的时间，单位秒 + } + } + ``` + diff --git a/website/public/static/demo/military/markdown/clientView_MapV/mapv-trackerline.md b/website/public/static/demo/military/markdown/clientView_MapV/mapv-trackerline.md new file mode 100644 index 000000000..69a8eefed --- /dev/null +++ b/website/public/static/demo/military/markdown/clientView_MapV/mapv-trackerline.md @@ -0,0 +1,363 @@ +## 交通轨迹 + +### 示例功能 + +    本示例对接MapV，实现在三维场景中加载MapV交通轨迹图。 + +### 示例实现 + +    本示例需要使用【include-cesium-local.js】开发库实现，初始化Cesium三维球控件 `Cesium.WebSceneControl()` 后构造热力图数据，通过mapv图层对象类 `CesiumZondy.Overlayer.MapvLayer` 来实现MapV图层的加载。 + +> 开发库使用请参见**首页**-**概述**-**原生JS调用**内容 + +#### Mapv + +> 特别说明：MapGIS Client for JavaScript在Cesium中对接了MapV插件，若插件本身存在问题，请优先参考Mapv官方教程寻找解决方案 + +### 实现步骤 + +**Step 1. 引用开发库**： +    本示例引用local本地【include-cesium-local.js】开发库，需要设置 `include` 属性为 `mapv` ； + +* Example: + ``` javascript + < script include = "mapv" src = "./static/libs/include-cesium-local.js" > < /script> + ``` + +**Step 2. 创建三维地图容器加载三维球控件,并加载底图**： +     创建三维视图容器，构造三维场景控件，构造并设置鼠标位置显示控件，并加载第三方互联网地图作为底图； + +**Step 3. 创建 `DataSet` 对象**： +    首先构造DataSet对象需要的数据，然后使用数据创建DataSet对象。DataSet对象使用Mapv框架的原生API创建，更多详细信息参考Mapv官方教程； + +* Example: + ``` javascript + var dataSet = mapv.csv.getDataSet(csvstr); + ``` + +**Step 4. 构造 `options` 参数**： +    options参数参考Mapv框架的原生API创建，更多详细信息参考Mapv官方教程； + +* Example: + ``` javascript + var options = { + context: '2d', + strokeStyle: 'rgba(50, 50, 255, 0.8)', + lineWidth: 0.05, + globalCompositeOperation: 'lighter', + draw: 'simple' + }; + ``` + +**Step 5. 数据展示**： +    根据前面的步骤，将 `map` 、 `dataSet` 、 `options` 三个参数传入 `CesiumZondy.Overlayer.MapvLayer` 中创建对象，创建完成数据在三维场景中加载展示。 + +* Example: + ``` javascript + var mapvLayer = new CesiumZondy.Overlayer.MapvLayer(map, dataSet, options); + ``` + +### 关键接口 + +#### 1.【百度地图mapv图层】`mapv.baiduMapLayer` + +    mapv原生的创建地图方式为：`new mapv.baiduMapLayer(map, dataSet, options)`，示例中使用`CesiumZondy.Overlayer.MapvLayer(map, dataSet, options)`作为原生方式的替换，替换后的参数个数、参数类型、返回值等等都不会改变，具体的参数设置参考Mapv官网。 + +| 参数名 | 类型 | 说明 | +| ------- | ------ | --------------------------------------------------------- | +| map | Object | 地图对象 | +| dataSet | Object | DasetSet是mapv中统一规范的数据对象，用来保存javascript数据对象，可以增删改查数据，并且可以订阅数据修改事件 | +| options | Object | 其他参数 | + + +* `options`通用属性 + +* Example: + ``` json + { + zIndex: 1, // 层级 + size: 5, // 大小值 + unit: 'px', // 'px': 以像素为单位绘制,默认值。'm': 以米制为单位绘制，会跟随地图比例放大缩小 + mixBlendMode: 'normal', // 不同图层之间的叠加模式，参考[https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode) + fillStyle: 'rgba(200, 200, 50, 1)', // 填充颜色 + strokeStyle: 'rgba(0, 0, 255, 1)', // 描边颜色 + lineWidth: 4, // 描边宽度 + globalAlpha: 1, // 透明度 + globalCompositeOperation: 'lighter', // 颜色叠加方式 + coordType: 'bd09ll', // 可选百度墨卡托坐标类型bd09mc和百度经纬度坐标类型bd09ll(默认) + shadowColor: 'rgba(255, 255, 255, 1)', // 投影颜色 + shadowBlur: 35, // 投影模糊级数 + updateCallback: function (time) { // 重绘回调函数，如果是时间动画、返回当前帧的时间 + }, + shadowOffsetX: 0, + shadowOffsetY: 0, + context: '2d', // 可选2d和webgl，webgl目前只支持画simple模式的点和线 + lineCap: 'butt', + lineJoin: 'miter', + miterLimit: 10, + methods: { // 一些事件回调函数 + click: function (item) { // 点击事件，返回对应点击元素的对象值 + console.log(item); + }, + mousemove: function(item) { // 鼠标移动事件，对应鼠标经过的元素对象值 + console.log(item); + }, + tap: function(item) { + console.log(item) // 只针对移动端,点击事件 + } + }, + animation: { + type: 'time', // 按时间展示动画 + stepsRange: { // 动画时间范围,time字段中值 + start: 0, + end: 100 + }, + trails: 10, // 时间动画的拖尾大小 + duration: 5, // 单个动画的时间，单位秒 + } + } + ``` + + +* `options.draw ` + + * simple 最直接的方式绘制点线面 + * time 按时间字段来动画展示数据 + * heatmap 热力图展示 + * grid 网格状展示 + * honeycomb 蜂窝状展示 + * bubble 用不同大小的圆来展示 + * intensity 根据不同的值对应按渐变色中颜色进行展示 + * category 按不同的值进行分类，并使用对应的颜色展示 + * choropleth 按不同的值区间进行分类，并使用对应的颜色展示 + * text 展示文本 + * icon 展示icon + + +* `simple-最直接的方式绘制点线面`：示例地址 + +    dataSet中也可直接配置每个数据项的样式 + +* Example: + ``` javascript + { + draw: 'simple', + geometry: { + type: 'Point', + coordinates: [123, 23] + }, + size: 10, // 点数据时候使用 + fillStyle: 'red', // 点数据时候使用 + strokeStyle: 'red' // 线数据时候使用 + } + ``` + +* `heatmap-热力图展示`：示例地址 + +* Example: + ``` javascript + var options = { + draw: 'heatmap', + size: 13, // 每个热力点半径大小 + gradient: { + // 热力图渐变色 + 0.25: 'rgb(0,0,255)', + 0.55: 'rgb(0,255,0)', + 0.85: 'yellow', + 1.0: 'rgb(255,0,0)', + }, + max: 100, // 最大权重值 + } + //dataSet中加count字段，代表权重，根据上面配置用以计算它的热度 + ``` + +* `grid-网格状展示`：示例地址 + +* Example: + ``` javascript + { + draw: 'grid', + size: 40, + label: { // 网格中显示累加的值总和 + show: true, + fillStyle: 'white', + shadowColor: 'yellow', + font: '20px Arial', + shadowBlur: 10, + }, + gradient: { 0.25: "rgb(0,0,255)", 0.55: "rgb(0,255,0)", 0.85: "yellow", 1.0: "rgb(255,0,0)"}, + } + ``` + +* `honeycomb-蜂窝状展示`：示例地址 + +* Example: + ``` javascript + { + draw: 'honeycomb', + size: 40, + label: { // 网格中显示累加的值总和 + show: true, + fillStyle: 'white', + shadowColor: 'yellow', + font: '20px Arial', + shadowBlur: 10, + }, + gradient: { 0.25: "rgb(0,0,255)", 0.55: "rgb(0,255,0)", 0.85: "yellow", 1.0: "rgb(255,0,0)"}, + } + ``` + + +* `bubble-用不同大小的圆来展示`：示例地址 + +* Example: + ``` javascript + { + draw: 'bubble', + max: 100, // 数值最大值范围 + maxSize: 10, // 显示的圆最大半径大小 + } + ``` +    dataSet中加count字段，代表权重，根据上面配置用以计算它实际展示的大小 + +`intensity-根据不同的值对应按渐变色中颜色进行展示`：示例地址 + +* Example: + ``` javascript + { + draw: 'intensity', + max: 100, // 最大阈值 + min: 0, // 最小阈值 + gradient: { // 显示的颜色渐变范围$ + '0': 'blue', + '0.6': 'cyan', + '0.7': 'lime', + '0.8': 'yellow', + '1.0': 'red' + } + } + ``` + +`category-按不同的值进行分类并使用对应的颜色展示`：示例地址 + +* Example: + ```javascript + { + draw: 'category', + splitList: { // 按对应的值按相应颜色展示 + other: 'rgba(255, 255, 0, 0.8)', + 1: 'rgba(253, 98, 104, 0.8)', + 2: 'rgba(255, 146, 149, 0.8)', + 3: 'rgba(255, 241, 193, 0.8)', + 4: 'rgba(110, 176, 253, 0.8)', + 5: 'rgba(52, 139, 251, 0.8)', + 6: 'rgba(17, 102, 252)' + } + } + ``` + +`choropleth-按不同的值区间进行分类并使用对应的颜色展示`：示例地址 + +* Example: + ```javascript + { + draw: 'choropleth', + // 按数值区间来展示不同颜色的点 + splitList: [ + { + start: 0, + end: 2, + color: randomColor() + },{ + start: 2, + end: 4, + color: randomColor() + },{ + start: 4, + end: 6, + color: randomColor() + },{ + start: 6, + end: 8, + color: randomColor() + },{ + start: 8, + color: randomColor() + } + ] + } + ``` + +`icon-展示icon`：示例地址 + +* Example: + ```javascript + { + draw: 'icon', + rotate: '90', // 图片旋转角度 + width: 10, // 规定图像的宽度 + height: 10, // 规定图像的高度 + size: 10, // 添加点击事件时候可以用来设置点击范围 + sx: 10, // 开始剪切的 x 坐标位置 + sy: 10, // 开始剪切的 y 坐标位置 + swidth: 10, // 被剪切图像的宽度 + sheight: 10, // 被剪切图像的高度 + } + ``` + +    dataSet中添加字段： + +* Example: + ```javascript + { + icon: Image, // 加载好的Image对象 + rotate: '90', // 图片旋转角度 + } + ``` + +`text-展示文本`：示例地址 + +* Example: + ```javascript + { + draw: 'text', + fillStyle: 'white', + textAlign: 'center', + avoid: true, // 开启文本标注避让 + textBaseline: 'middle', + offset: { // 文本便宜值 + x: 0, + y: 0 + } + } + ``` + +    dataSet中添加字段： + +* Example: + ``` javascript + { + text: '文本内容' + } + ``` + + +`animation-展示动画`：点动画1  点动画2  线动画 + +* Example: + ```json + { + "draw": "simple", + "animation": { + "type": "time", // 按时间展示动画 + "stepsRange": { + // 动画时间范围,time字段中值 + "start": 0, + "end": 100 + }, + "trails": 10, // 时间动画的拖尾大小 + "duration": 5 // 单个动画的时间，单位秒 + } + } + ``` + diff --git a/website/public/static/demo/military/markdown/data/data-3Dtiles.md b/website/public/static/demo/military/markdown/data/data-3Dtiles.md new file mode 100644 index 000000000..acc243d4d --- /dev/null +++ b/website/public/static/demo/military/markdown/data/data-3Dtiles.md @@ -0,0 +1,68 @@ +## 3DTiles 数据加载 + +### 示例功能 + +    此功能用于在当前场景中加载 3DTiles 数据，支持本地数据和网络数据加载。 + +### 3DTiles + +    3D Tiles 是用于流式传输大规模异构 3D 地理空间数据集的开放规范。为了扩展 Cesium 的地形和图像流，3D Tiles 将用于流式传输 3D 内容，包括建筑物，树木，点云和矢量数据。关于 3D Tiles 可自行了解其更多内容。 + +### 示例实现： + +    本示例需要使用【include-cesium-local.js】开发库实现，关键接口为`CesiumZondy.Manager.CommonDataManager`类提供的`append3DTile()`方法与`remove3DTile()`方法，实现 3D Tiles 数据的加载与移除功能。 + +> 开发库使用请参见*首页-概述-调用方式*。 + +### 实现步骤： + +**Step 1. 引用开发库**： +    本示例引用 local 本地【include-cesium-local.js】开发库，完成此步骤后才可调用三维 WebGL 的功能； + +**Step 2. 创建布局**： +    创建三维视图 Div 容器，构造三维场景控件 WebSceneControl，构造并设置鼠标位置信息显示控件，加载 Google 地图作为底图显示； + +**Step 3. 加载 3DTiles 数据**: +    首先构造`CesiumZondy.Manager.CommonDataManager`通用数据管理对象，然后调用`append3DTile()`方法加载，须设置 3DTiles 数据的 URL 参数，通过加载成功回调函数定位跳转到所加载的 3DTiles 数据范围。相对加载功能，移除则调用`remove3DTile()`方法实现。 + +- Example: + ```Javascript + //构造通用数据管理对象 + var commonDataManager = new CesiumZondy.Manager.CommonDataManager({ + viewer: webGlobe.viewer + }); + //加载3DTile数据 + var tiles = commonDataManager.append3DTile( + //3DTile数据路径，支持本地与网络数据 + './static/data/3DTile/BatchedTilesets/tileset.json', + //成功回调函数 + load + ); + function load(layer) { + //加载成功后定位跳转 + webGlobe.viewer.flyTo(layer); + console.log("这是一个加载成功回调"); + } + //通过remove3DTile方法移除 + //commonDataManager.remove3DTile(tiles); + ``` + +### 关键接口 + +#### 1.【三维场景控件】 `CesiumZondy.WebSceneControl` + +#### 2.【通用数据管理类】 CesiumZondy.Manager.CommonDataManager + +##### 【method】 `append3DTile(url, onsuccess, options) → {Object}` 通过路径添加 3DTile 数据，返回 kml 数据对象（Object） + +| 参数名 | 类型 | 说明 | +| --------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------- | +| url | String | 3DTile 数据路径，本地数据路径设置如“./static/data/3DTile/BatchedTilesets/tileset.json”，网络数据路径设置如“http://{域名或IP}/xxx.json” | +| onsuccess | function | 加载成功回调函数 | +| options | Object | 扩展参数 | + +##### 【method】 `remove3DTile(tileset)` 移除 3DTiles 数据对象 + +| 参数名 | 类型 | 说明 | +| ------- | ------ | ---------------------------------------------------- | +| tileset | Object | 3DTiles 数据对象，即 append3DTile 方法返回的数据对象 | diff --git a/website/public/static/demo/military/markdown/data/data-addgltf.md b/website/public/static/demo/military/markdown/data/data-addgltf.md new file mode 100644 index 000000000..6f8bdc693 --- /dev/null +++ b/website/public/static/demo/military/markdown/data/data-addgltf.md @@ -0,0 +1,76 @@ +## GLTF 数据加载 + +### 示例功能 + +    本示例实现在三维场景中添加 GLTF 模型。 + +> 什么是 GLTF？ + +    GLTF（GL Transmission Format），即图形语言交换格式，是一种三维数据的格式标准，由 Khronos Group 推出。由于三维数据格式众多，所以其致力于成为像音频界的 MP3、图像界的 JPEG 那样的 3D 领域通用的数据格式。目前多款三维软件支持了 GLTF 格式数据的读写，如 Maya、3dmax、unity 等等。采用 GLTF 可避免不同软件中数据转换操作造成的各方面问题。 +GLTF 官方介绍 + +### 示例实现 + +    本示例需要使用【include-cesium-local.js】开发库实现，关键接口为`CesiumZondy.Manager.CommonDataManager`类提供的`appendModel()`方法，实现 GLTF 模型数据的加载。 + +> 开发库使用请参见*首页-概述-原生 JS 调用*内容。 + +### 实现步骤 + +**Step 1. 引用开发库**： +    本示例引用 local 本地【include-cesium-local.js】开发库，完成此步骤后才可调用三维 WebGL 的功能； + +**Step 2. 创建布局**： +    构造三维场景控件 WebSceneControl，构造并设置鼠标位置信息显示控件，加载 Google 地图作为底图显示； + +**Step 3. 添加模型**: +    首先构造`CesiumZondy.Manager.CommonDataManager`通用数据管理对象，然后调用`appendModel()`方法，并设置模型 id、模型文件 URL 路径、模型所在经纬度、高度、缩放比参数信息，即可实现 GLTF 模型的加载。如果模型自带动画，需要设置`webGlobe.viewer.clock.shouldAnimate`参数为 true 来开启动画。 + +- Example: + ```javascript + //构造通用数据管理对象 + var commonDataManager = new CesiumZondy.Manager.CommonDataManager({ + viewer: webGlobe.viewer, + }) + //开启动画：如果模型自带动画，需开启此参数 + webGlobe.viewer.clock.shouldAnimate = true + //添加模型（gltf文件） + var model = commonDataManager.appendModel( + //模型id + 'model', + //模型文件URL路径 + './static/data/model/WuRenJi/WuRenJi.gltf', + //模型经度、纬度、高度 + 114.3938, + 30.5045, + 200, + //缩放比 + 200 + ) + ``` + +### 关键接口 + +#### 1.【三维场景控件】WebSceneControl + +#### 2.【通用数据管理类】CesiumZondy.Manager.CommonDataManager + +##### 【method】`appendModel(id, url, lon, lat, height, scale) → {Object}`：添加模型（gltf 文件） + +| 参数名 | 类 型 | 说 明 | +| ------- | ------ | ------------- | +| id | Number | 模型 id | +| url | String | 模型 url 路径 | +| lon | Number | 模型所在经度 | +| lat | Number | 模型坐在纬度 | +| height | Number | 高度 | +| scale | Number | 缩放比 | +| options | Object | 附加参数 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 说 明 | +| ---------------- | -------------- | -------------------------------------- | +| color | Color | 颜色 | +| colorBlendMode | ColorBlendMode | 颜色混合模式 Cesium.ColorBlendMode.MIX | +| colorBlendAmount | Number | 颜色混合程度 | diff --git a/website/public/static/demo/military/markdown/data/data-addgltfs.md b/website/public/static/demo/military/markdown/data/data-addgltfs.md new file mode 100644 index 000000000..d80872ddf --- /dev/null +++ b/website/public/static/demo/military/markdown/data/data-addgltfs.md @@ -0,0 +1,111 @@ +## 批量添加 GLTF 模型 + +### 示例功能 + +    本示例实现在三维场景中批量添加多个 GLTF 模型数据。常用于需要一次性添加多个模型的应用场景，多个模型可为相同数据，也可以是不同数据，参数单独设置，简化代码操作步骤。 + +### 示例实现 + +    本示例需要使用【include-cesium-local.js】开发库实现，关键接口为`CesiumZondy.Manager.CommonDataManager`类提供的`appendModels()`方法，实现多个模型数据的批量加载。 + +> 开发库使用请参见*首页-概述-原生 JS 调用*内容。 + +### 实现步骤 + +**Step 1. 引用开发库**： +    本示例引用 local 本地【include-cesium-local.js】开发库，完成此步骤后才可调用三维 WebGL 的功能； + +**Step 2. 创建布局**： +    创建三维视图 Div 容器，构造三维场景控件 WebSceneControl，构造并设置鼠标位置信息显示控件，加载 Google 地图作为底图显示； + +**Step 3. 添加模型**: +    首先构造`CesiumZondy.Manager.CommonDataManager`通用数据管理对象，构造多模型对象 models，构造时需传递模型 ID、模型名称、描述、添加的位置、模型文件路径、模型缩放比例等信息，然后调用`appendModels()`方法即可实现多模型的批量加载； + +- Example: + ```javascript + //多个模型 + var models = [ + { + id: 'document', + name: 'Models', + version: '1.0', + }, + { + //模型的ID + id: 'aerogenerator1', + //模型的名字 + name: '风机1', + //模型要添加的坐标位置 + position: { + cartographicDegrees: [118.0385, 42.6374, -5], + }, + //模型文件参数 + model: { + //模型文件的路径 + gltf: './static/data/model/donghua.gltf', + //模型的比例 + scale: 50, + //模型最小显示的像素 + minimumPixelSize: 16, + }, + //描述 + description: '这是1号风机', + }, + { + //模型的ID + id: 'aerogenerator2', + //模型的名字 + name: '风机2', + //模型要添加的坐标位置 + position: { + cartographicDegrees: [118.0356, 42.6354, -5], + }, + //模型文件参数 + model: { + //模型文件的路径 + gltf: './static/data/model/donghua.gltf', + //模型的比例 + scale: 50, + //模型最小显示的像素 + minimumPixelSize: 16, + }, + //描述 + description: '这是2号风机', + }, + ] + //开启动画：如果模型自带动画，需开启此参数 + webGlobe.viewer.clock.shouldAnimate = true + //构造通用数据管理对象 + var commonDataManager = new CesiumZondy.Manager.CommonDataManager({ + viewer: webGlobe.viewer, + }) + //添加多个模型 + modelSource = commonDataManager.appendModels(models) + ``` + +添加完模型后，可利用以下方法跳转到模型所在处； + +- Example: + ```javascript + //跳转到模型处 + webGlobe.viewer.zoomTo(modelSource) + ``` + +### 关键接口 + +#### 1.【三维场景控件】`WebSceneControl` + +#### 2.【通用数据管理类】`CesiumZondy.Manager.CommonDataManager` + +##### 【method】`appendModels(modelsString, successCall)`：批量添加模型 + +| 参数名 | 类 型 | 说 明 | +| ------------ | -------- | ------------ | +| modelsString | String | 模型组织 | +| successCall | function | 成功后的回调 | + +##### 【method】`removeModels(models)`：移除通过 appendModelsByFile()和 appendModels()添加的模型 + +| 参数名 | 类 型 | 说 明 | +| ------ | ---------- | -------- | +| models | DataSource | 模型组织 | diff --git a/website/public/static/demo/military/markdown/data/data-czml.md b/website/public/static/demo/military/markdown/data/data-czml.md new file mode 100644 index 000000000..66c8d8517 --- /dev/null +++ b/website/public/static/demo/military/markdown/data/data-czml.md @@ -0,0 +1,74 @@ +## CZML 数据加载 + +### 示例功能 + +    本示例实现在三维场景中添加 CZML 数据。 + +> 什么是 CZML？ + +    CZML，是一种用来描述动态场景的 JSON 架构的地理数据可视化语言，可以用来描述点、线、布告板、模型以及其他的图元，不仅提供了丰富的图形及其外观选择，还专注于表现动态地理数据的变化特征，主要用于 Cesium 在浏览器中的展示。 +CZML 介绍参考 + +### 示例实现 + +    本示例需要使用【include-cesium-local.js】开发库实现，关键接口为`CesiumZondy.Manager.CommonDataManager`类提供的`appendCZML()`方法，实现 CZML 数据的加载；对应可通过`removeDataSource()`方法移除。 + +> 开发库使用请参见*首页-概述-原生 JS 调用*内容。 + +### 实现步骤 + +**Step 1. 引用开发库**： +    本示例引用 local 本地【include-cesium-local.js】开发库； + +**Step 2. 创建布局**： +    创建三维视图容器，构造三维场景控件，构造并设置鼠标位置显示控件，并加载 Google 地图作为底图； + +**Step 3. 添加 CZML 数据**: +    调用`appendCZML()`方法，传入 CZML 文件的地址即可实现数据的加载，并可添加回调函数，根据 CZML 文件中某一模型 ID 判断是否添加成功； + +- Example: + ```javascript + //构造通用数据管理对象 + var commonDataManager = new CesiumZondy.Manager.CommonDataManager({ + viewer: webGlobe.viewer, + }) + //添加CZML数据 + var datasource = commonDataManager.appendCZML( + //CZML文件地址 + './static/data/czml/fengji.czml', + //成功回调 + function(entities) { + //判断是否添加成功 + var enti = entities.getById('aerogenerator10') + if (enti == undefined) { + alert('失败') + } + } + ) + ``` + +### 关键接口 + +#### 1.【三维场景控件】WebSceneControl + +#### 2.【通用数据管理类】CesiumZondy.Manager.CommonDataManager + +##### 【method】`appendCZML(url, successCall) → {CzmlDataSource}`：添加 czml 文件数据，返回数据对象（CzmlDataSource） + +| 参数名 | 类 型 | 说 明 | +| ----------- | -------- | ---------------------------------------------------------------------------------------------------------------- | +| url | String | 数据文件地址，本地数据路径设置如“./static/data/czml/fengji.czml”，网络数据路径设置如“http://{域名或IP}/xxx.czml” | +| successCall | function | 成功后的回调 | + +##### 【method】 `removeDataSource(datasource, isDestroy)` 移除数据对象 + +| 参数名 | 类型 | 说明 | +| ---------- | ---------- | -------- | +| datasource | DataSource | 数据对象 | +| isDestroy | Boolean | 是否销毁 | + +##### 【method】 `removeAllDataSource(isDestroy)` 移除所有数据对象 + +| 参数名 | 类型 | 说明 | +| --------- | ------- | -------- | +| isDestroy | Boolean | 是否销毁 | diff --git a/website/public/static/demo/military/markdown/data/data-geojson.md b/website/public/static/demo/military/markdown/data/data-geojson.md new file mode 100644 index 000000000..97dfce212 --- /dev/null +++ b/website/public/static/demo/military/markdown/data/data-geojson.md @@ -0,0 +1,62 @@ +## GeoJSON 数据加载 + +### 示例功能 + +    本示例实现在三维场景中添加 GeoJSON 数据。 + +> 什么是 GeoJSON？ + +    GeoJSON，是一种对各种地理数据结构进行编码的格式，基于 Javascript 对象表示法的地理空间信息数据交换格式。通过键值对的方式表达几何、特征或者特征集合，能够支持点、线、面、多点、多线、多面和几何集合的数据类型。 +GeoJSON 官方介绍 + +### 示例实现 + +    本示例需要使用【include-cesium-local.js】开发库实现，关键接口为`CesiumZondy.Manager.CommonDataManager`类提供的`appendGeoJson()`方法，实现 GeoJSON 数据的加载；对应可通过`removeDataSource()`方法移除。 + +> 开发库使用请参见*首页-概述-原生 JS 调用*内容。 + +### 实现步骤 + +**Step 1. 引用开发库**： +    本示例引用 local 本地【include-cesium-local.js】开发库； + +**Step 2. 创建布局**： +    创建三维视图容器，构造三维场景控件，构造并设置鼠标位置显示控件，并加载 Google 地图作为底图； + +**Step 3. 添加 GeoJSON**: +    调用`appendGeoJson()`方法，传入 GeoJSON 文件地址，即可实现数据的加载，在此以本地文件为例； + +- Example: + ```javascript + //构造通用数据管理对象 + var commonDataManager = new CesiumZondy.Manager.CommonDataManager({ + viewer: webGlobe.viewer, + }) + //添加GeoJson数据（GeoJson文件地址） + var datasource = commonDataManager.appendGeoJson('./static/data/geojson/wuhan_bounds.geojson') + ``` + +### 关键接口 + +#### 1.【三维场景控件】`WebSceneControl` + +#### 2.【通用数据管理类】`CesiumZondy.Manager.CommonDataManager` + +##### 【method】`appendGeoJson(url) → {GeoJsonDataSource}`：添加 GeoJson 文件，返回数据对象（GeoJsonDataSource） + +| 参数名 | 类 型 | 说 明 | +| ------ | ------ | --------------------------------------------------------------------------------------------------------------------------------------- | +| url | String | GeoJSON 数据文件地址，本地数据路径设置如“./static/data/geojson/wuhan_bounds.geojson”，网络数据路径设置如“http://{域名或IP}/xxx.geojson” | + +##### 【method】 `removeDataSource(datasource, isDestroy)` 移除数据对象 + +| 参数名 | 类型 | 说明 | +| ---------- | ---------- | -------- | +| datasource | DataSource | 数据对象 | +| isDestroy | Boolean | 是否销毁 | + +##### 【method】 `removeAllDataSource(isDestroy)` 移除所有数据对象 + +| 参数名 | 类型 | 说明 | +| --------- | ------- | -------- | +| isDestroy | Boolean | 是否销毁 | diff --git a/website/public/static/demo/military/markdown/data/data-kml.md b/website/public/static/demo/military/markdown/data/data-kml.md new file mode 100644 index 000000000..115e83de5 --- /dev/null +++ b/website/public/static/demo/military/markdown/data/data-kml.md @@ -0,0 +1,63 @@ +## KML 数据加载 + +### 示例功能 + +    本示例实现在三维场景中添加 KML 数据。 + +> 什么是 KML？ + +    KML（Keyhole Markup Language，Keyhole 标记语言）是由 Google 旗下的 Keyhole 公司开发和维护的一种基于 XML 的标记语言，可用于描述和保存地理空间信息（如点、线、面、图像、模型等），适合网络环境下的地理信息协作与共享。KML 在 2008 年 4 月被 OGC（开放地理信息系统协会）宣布成为开放地理信息编码标准。KML 是纯粹的 xml 文本格式，两者之间最大的区别就在于 KML 描述的是地理信息数据。 +KML 百科介绍 + +### 示例实现 + +    本示例需要使用【include-cesium-local.js】开发库实现，关键接口为`CesiumZondy.Manager.CommonDataManager`类提供的`appendKml()`方法，实现 KML 数据的加载；对应可通过`removeDataSource()`方法移除。 + +> 开发库使用请参见*首页-概述-原生 JS 调用*内容。 + +### 实现步骤 + +**Step 1. 引用开发库**： +    本示例引用 local 本地【include-cesium-local.js】开发库，完成此步骤后才可调用三维 WebGL 的功能； + +**Step 2. 创建布局**： +    创建三维视图 Div 容器，构造三维场景控件 WebSceneControl，构造并设置鼠标位置信息显示控件，加载 Google 地图作为底图显示； + +**Step 3. 添加 KML 数据**: +    首先构造`CesiumZondy.Manager.CommonDataManager`通用数据管理对象，然后调用`appendKml()`方法，传入 KML 文件地址，即可实现 KML 数据的加载，在此以本地文件为例； + +- Example: + ```javascript + //构造通用数据管理对象 + var commonDataManager = new CesiumZondy.Manager.CommonDataManager({ + viewer: webGlobe.viewer, + }) + //添加KML数据 + datasource = commonDataManager.appendKml('./static/data/kml/bikeRide_wuhan.kml') + ``` + +### 关键接口 + +#### 1.【三维场景控件】`WebSceneControl` + +#### 2.【通用数据管理类】`CesiumZondy.Manager.CommonDataManager` + +##### 【method】`appendKml(url, options) → {KmlDataSource}`：加载 KML、KMZ 数据，返回 KML 数据对象（KmlDataSource） + +| 参数名 | 类 型 | 说 明 | +| ------- | ------ | --------------------------------------------------------------------------------------------------------------------- | +| url | String | 数据文件地址，本地数据路径设置如“./static/data/kml/bikeRide_wuhan.kml”，网络数据路径设置如“http://{域名或IP}/xxx.kml” | +| options | Object | 可选扩展参数 | + +##### 【method】 `removeDataSource(datasource, isDestroy)` 移除数据对象 + +| 参数名 | 类型 | 说明 | +| ---------- | ---------- | -------- | +| datasource | DataSource | 数据对象 | +| isDestroy | Boolean | 是否销毁 | + +##### 【method】 `removeAllDataSource(isDestroy)` 移除所有数据对象 + +| 参数名 | 类型 | 说明 | +| --------- | ------- | -------- | +| isDestroy | Boolean | 是否销毁 | diff --git a/website/public/static/demo/military/markdown/data/data-kmz.md b/website/public/static/demo/military/markdown/data/data-kmz.md new file mode 100644 index 000000000..832c47d14 --- /dev/null +++ b/website/public/static/demo/military/markdown/data/data-kmz.md @@ -0,0 +1,62 @@ +## KMZ 数据加载 + +### 示例功能 + +    本示例实现在三维场景中添加 KMZ 数据。 + +> 什么是 KMZ？ + +    KMZ 文件是经过压缩的 KML 文件，将其解压后即可获得最原始的 KML 文件。与 KML 不同的是，由于 KMZ 是压缩包文件，所以其中不仅可以包括 KML 文本文件，还可以包括其他类型的文件，如图片等，所以 KMZ 能够表达的信息可以更加丰富多样。 + +### 示例实现 + +    本示例需要使用【include-cesium-local.js】开发库实现，实现 KMZ 数据的加载与 KML 数据的方法一样，都采用`CesiumZondy.Manager.CommonDataManager`类提供的`appendKml()`方法；对应可通过`removeDataSource()`方法移除。 + +> 开发库使用请参见*首页-概述-原生 JS 调用*内容。 + +### 实现步骤 + +**Step 1. 引用开发库**： +    本示例引用 local 本地【include-cesium-local.js】开发库； + +**Step 2. 创建布局**： +    创建三维视图容器，构造三维场景控件，构造并设置鼠标位置显示控件，并加载 Google 地图作为底图； + +**Step 3. 添加 KMZ 数据**: +    调用`appendKml()`方法，传入 KMZ 文件地址，即可实现数据的加载，在此以本地文件为例； + +- Example: + ```javascript + //构造通用数据管理对象 + var commonDataManager = new CesiumZondy.Manager.CommonDataManager({ + viewer: webGlobe.viewer, + }) + //添加KMZ数据 + var datasource = commonDataManager.appendKml('./static/data/kmz/sample.kmz') + ``` + +### 关键接口 + +#### 1.【三维场景控件】`WebSceneControl` + +#### 2.【通用数据管理类】`CesiumZondy.Manager.CommonDataManager` + +##### 【method】`appendKml(url, options) → {KmlDataSource}`：加载 KML、KMZ 数据，返回 KML 数据对象（KmlDataSource） + +| 参数名 | 类 型 | 说 明 | +| ------- | ------ | ------------------------------------------------------------------------------------------------------------- | +| url | String | 数据文件地址，本地数据路径设置如“./static/data/kmz/sample.kmz”，网络数据路径设置如“http://{域名或IP}/xxx.kmz” | +| options | Object | 可选扩展参数 | + +##### 【method】 `removeDataSource(datasource, isDestroy)` 移除数据对象 + +| 参数名 | 类型 | 说明 | +| ---------- | ---------- | -------- | +| datasource | DataSource | 数据对象 | +| isDestroy | Boolean | 是否销毁 | + +##### 【method】 `removeAllDataSource(isDestroy)` 移除所有数据对象 + +| 参数名 | 类型 | 说明 | +| --------- | ------- | -------- | +| isDestroy | Boolean | 是否销毁 | diff --git a/website/public/static/demo/military/markdown/data/data-movegltf.md b/website/public/static/demo/military/markdown/data/data-movegltf.md new file mode 100644 index 000000000..2b519cd55 --- /dev/null +++ b/website/public/static/demo/military/markdown/data/data-movegltf.md @@ -0,0 +1,101 @@ +## 交互式移动模型数据 + +### 示例功能 + +    此功能用于移动在三维场景中加载的模型数据，模型数据是临时移动，不会修改数据本身。 + +### 示例实现： + +    本示例需要使用【include-cesium-local.js】开发库实现，通过 Cesium 三维球控件 `Cesium.WebSceneControl()`的`appendModel()`加载模型数据后，通过创建 `Cesium.TransformEditor()` 平移编辑器对象，获取 `Cesium.TransformEditor` 平移编辑器对象的 `viewModel` 模型视图成员，调用模型视图的 `setModeTranslation()` 设置模型视图平移方法，调用模型视图的 `activate()` 激活平移工具，完成此功能。 + +> 开发库使用请参见*首页-概述-原生 JS 调用*内容。 + +### 实现步骤： + +**Step 1. 引用开发库**： +    本示例引用 local 本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维 WebGL 的功能； + +**Step 2. 创建布局**： +    创建 `id='GlobeView'` 的 div 作为三维视图的容器，并设置其样式，初始化 Cesium 三维球控件 `Cesium.WebSceneControl()` ，完成此步后可在三维场景中加载三维球控件； + +**Step 3. 加载数据**: +    调用 Cesium 三维球控件 `Cesium.WebSceneControl()` 的 `appendModel()` 方法传入模型数据地址，即可加载浏览数据； + +- Example: + ```Javascript + //构造通用数据管理对象 + var commonDataManager = new CesiumZondy.Manager.CommonDataManager({ + viewer: webGlobe.viewer + }); + //添加模型（gltf文件） + var model = commonDataManager.appendModel( + //模型id + 'model', + //模型url路径 + './static/data/model/donghua.gltf', + //模型经度、纬度、高度 + 118.0385, 42.6374, -5, + //缩放比 + 50 + ); + ``` + +**Step 4. 创建平移编辑器**: +    初始化 `Cesium.TransformEditor()`平移编辑器对象； + +- Example: + ```Javascript + //创建平移编辑器 + var transformEditor = new Cesium.TransformEditor({ + container: webGlobe.viewer.container, + scene: webGlobe.viewer.scene, + transform: model.modelMatrix, + boundingSphere: model.boundingSphere + }); + ``` + +**Step 5. 设置模型视图平移**: +    调用模型视图的 `setModeTranslation()` 设置模型视图平移; + +- Example: + ```Javascript + //获取模型视图对象 + var viewModel = transformEditor.viewModel; + //设置模型视图平移 + viewModel.setModeTranslation(); + ``` + +**Step 6. 激活平移工具**: +    调用模型视图的 `activate()` 激活平移工具; + +- Example: + ```Javascript + //激活平移工具 + viewModel.activate(); + ``` + +### 关键接口 + +#### 1. `Cesium.WebSceneControl(elementId, options)` : 三维视图的主要类 + +##### 【method】`appendModel(id, url, lon, lat, height, scale) → {Object}`：添加模型（gltf 文件） + +| 参数名 | 类 型 | 说 明 | +| ------- | ------ | ------------- | +| id | Number | 模型 id | +| url | String | 模型 url 路径 | +| lon | Number | 模型所在经度 | +| lat | Number | 模型坐在纬度 | +| height | Number | 高度 | +| scale | Number | 缩放比 | +| options | Object | 附加参数 | + +> `options`属性主要参数 + +| 参数名 | 类 型 | 说 明 | +| ---------------- | -------------- | -------------------------------------- | +| color | Color | 颜色 | +| colorBlendMode | ColorBlendMode | 颜色混合模式 Cesium.ColorBlendMode.MIX | +| colorBlendAmount | Number | 颜色混合程度 | + +#### 2. `Cesium.TransformEditor(options)` : 平移编辑器类（API 暂无） diff --git a/website/public/static/demo/military/markdown/data/data-onlineImage.md b/website/public/static/demo/military/markdown/data/data-onlineImage.md new file mode 100644 index 000000000..96585b30b --- /dev/null +++ b/website/public/static/demo/military/markdown/data/data-onlineImage.md @@ -0,0 +1,74 @@ +## 添加在线图片数据 + +### 示例功能 + +    此功能用于在当前场景中叠加显示图片文件数据，支持本地数据和网络数据加载。 + +### 示例实现： + +    本示例需要使用【include-cesium-local.js】开发库实现，关键接口为`CesiumZondy.Manager.CommonDataManager`类提供的`appendImageByUrl()`方法与`removeImage()`方法，实现图片叠加显示与移除功能。 + +> 开发库使用请参见*首页-概述-调用方式*。 + +### 实现步骤： + +**Step 1. 引用开发库**： +    本示例引用 local 本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维 WebGL 的功能； + +**Step 2. 创建布局**： +    创建三维地图容器加载三维球控件,并加载底图;：创建 `id='GlobeView'` 的 div 作为三维视图的容器，并设置其样式，初始化 Cesium 三维球控件 `Cesium.WebSceneControl()` ，并调用`appendTDTuMap()` 方法加载天地图数据作为底图显示； + +**Step 3. 叠加显示图片文件数据**: +    首先构造`CesiumZondy.Manager.CommonDataManager`实体绘制控制器类对象，然后调用`appendImageByUrl()`方法加载，须设置图片的 URL 与经纬度参数。相对加载功能，移除则调用`removeImage()`方法实现。 + +- Example: + + ```Javascript + //构造通用数据管理对象 + var commonDataManager = new CesiumZondy.Manager.CommonDataManager({ + viewer: webGlobe.viewer + }); + + //通过地址添加图片，支持本地图片和网络图片 + var imgObj = commonDataManager.appendImageByUrl( + //图片URL + 'http://5b0988e595225.cdn.sohucs.com/images/20180917/455c51316ec24a97958a254dc66c18f6.jpeg', + //东经 + 114.3473, + //北纬 + 30.5479, + //西经 + 114.4637, + //南纬 + 30.6120 + ); + //定位跳转 + sceneManager.flyToComm(114.4, 30.55, 30000); + + //通过removeImage()删除 + //commonDataManager.removeImage(imgObj,false); + ``` + +### 关键接口 + +#### 1.【三维场景控件】 `CesiumZondy.WebSceneControl` + +#### 2.【实体绘制控制器类】 `CesiumZondy.Manager.CommonDataManager` + +##### 【method】 `appendImageByUrl(url, west, south, east, north, options) → {Object}` 通过路径添加图片数据，返回图片数据对象（Object） + +| 参数名 | 类型 | 说明 | +| ------- | ------ | ------------------------------------------------------------------------------------------------------- | +| url | String | 图片地址，本地数据路径设置如“./static/data/imge/xxx.png”，网络数据路径设置如“http://{域名或IP}/xxx.jpg” | +| west | Number | 西经 | +| south | Number | 南纬 | +| east | Number | 东经 | +| north | Number | 北纬 | +| options | Object | 扩展参数 | + +##### 【method】 `removeImage(imageryLayer, isDestroy)` 移除添加的图片 + +| 参数名 | 类型 | 说明 | +| ------------ | ------- | ------------------------------------------------------ | +| imageryLayer | Object | 添加的图片对象，即 appendImageByUrl 方法返回的数据对象 | +| isDestroy | Boolean | 是否销毁图片对象 | diff --git a/website/public/static/demo/military/markdown/data/data-outlineImage.md b/website/public/static/demo/military/markdown/data/data-outlineImage.md new file mode 100644 index 000000000..a478fbdfa --- /dev/null +++ b/website/public/static/demo/military/markdown/data/data-outlineImage.md @@ -0,0 +1,57 @@ +## 添加本地图片数据 + +### 示例功能 + +    本示例实现在三维场景中添加图片。 + +### 示例实现 + +    本示例需要使用【include-cesium-local.js】开发库实现，关键接口为`CesiumZondy.Manager.CommonDataManager`类提供的`appendImageByUrl()`方法，实现图片的添加。 + +> 开发库使用请参见*首页-概述-原生 JS 调用*内容。 + +### 实现步骤 + +**Step 1. 引用开发库**： +    本示例引用 local 本地【include-cesium-local.js】开发库，完成此步骤后才可调用三维 WebGL 的功能； + +**Step 2. 创建布局**： +    创建三维视图 Div 容器，构造三维场景控件 WebSceneControl，构造并设置鼠标位置信息显示控件； + +**Step 3. 添加图片**: +    添加图片：首先构造`CesiumZondy.Manager.CommonDataManager`通用数据管理对象，然后调用`appendImageByUrl()`方法，需要传入图片的地址（可为本地图片地址，也可以为网络图片的 URL），以及图片显示的坐标范围； + +- Example: + ```javascript + //构造通用数据管理对象 + var commonDataManager = new CesiumZondy.Manager.CommonDataManager({ + viewer: webGlobe.viewer, + }) + //添加图片 + var image = commonDataManager.appendImageByUrl( + //本地图片地址 + './static/data/picture/world.jpg', + //图片显示范围（西经、南纬、东经、北纬） + -180.0, + -90, + 180.0, + 90 + ) + ``` + +### 关键接口 + +#### 1.【三维场景控件】`WebSceneControl` + +#### 2.【通用数据管理类】`CesiumZondy.Manager.CommonDataManager` + +##### 【method】`appendImageByUrl(url, west, south, east, north, options)`：通过地址添加图片，包括本地图片和网络图片 + +| 参数名 | 类 型 | 说 明 | +| ------- | ------ | -------- | +| url | String | 图片地址 | +| west | Number | 西经 | +| south | Number | 南纬 | +| east | Number | 东经 | +| north | Number | 北纬 | +| options | Object | 扩展参数 | diff --git a/website/public/static/demo/military/markdown/drawGraphic/drawGraphic-groundhole.md b/website/public/static/demo/military/markdown/drawGraphic/drawGraphic-groundhole.md new file mode 100644 index 000000000..e69de29bb diff --git a/website/public/static/demo/military/markdown/drawGraphic/drawGraphic-groundline.md b/website/public/static/demo/military/markdown/drawGraphic/drawGraphic-groundline.md new file mode 100644 index 000000000..d85f395aa --- /dev/null +++ b/website/public/static/demo/military/markdown/drawGraphic/drawGraphic-groundline.md @@ -0,0 +1,67 @@ +## 绘制贴地球线 + +### 示例功能 + +    本示例实现在三维场景中绘制贴地球模式的线实体。 + +### 示例实现 + +    本示例需要使用【include-cesium-local.js】开发库实现，关键接口为`CesiumZondy.Manager.EntityController`类提供的`appendGroundLine()`方法，实现贴地球线的添加绘制。 + +> 开发库使用请参见*首页-概述-原生 JS 调用*内容。 + +### 实现步骤 + +**Step 1. 引用开发库**： +    引用开发库：本示例引用 local 本地【include-cesium-local.js】开发库，完成此步骤后才可调用三维 WebGL 的功能； + +**Step 2. 创建布局**： +    创建三维视图 Div 容器，构造三维场景控件 WebSceneControl，构造并设置鼠标位置信息显示控件，加载 Google 地图作为底图显示； + +**Step 3. 绘制贴地球线**: +    绘制贴地球线：首先构造`CesiumZondy.Manager.EntityController`几何绘制控制对象，然后调用`appendGroundLine()`方法，传入定义的坐标数组、颜色、线宽，即可实现贴地线的添加绘制。 + +- Example: + + ```javascript + //构造几何绘制控制对象 + var entityController = new CesiumZondy.Manager.EntityController({ + viewer: webGlobe.viewer, + }) + //定义一组坐标位置 + var pointArr = [114.29326686402278, 30.54691048615991, 114.28238521698825, 30.552850641911828, 114.27353580837766, 30.536521489533488, 114.29257062566866, 30.525800315003725] + //颜色 + var color = new Cesium.ColorGeometryInstanceAttribute(1, 0, 0, 0.5) + //绘制贴地线（坐标点数组，线颜色，线宽） + var groundLine = entityController.appendGroundLine(pointArr, color, 40) + ``` + +### 关键接口 + +#### 1.【三维场景控件类】`Cesium.WebSceneControl(elementId, options)` + +| 参数名 | 类 型 | 说 明 | +| --------- | ----------------- | -------------------- | +| elementId | Element \| String | 放置视图的 div 的 id | +| options | Object | （可选）附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ---------------- | ------- | ------ | -------------------------------------------------------------------------------------- | +| viewerMode | String | ‘3D’ | （可选）初始视图模式默认为三维球视图 '2D'表示二维视图 'COLUMBUS_VIEW' 表示三维平面视图 | +| showInfo | Boolean | false | （可选）是否显示默认的属性信息框 | +| animation | Boolean | true | （可选）默认动画控制不显示 | +| baseLayerPicker | Boolean | true | （可选）是否创建图层控制显示小组件 | +| fullscreenButton | Boolean | true | （可选）是否创建全屏控制按钮 | +| vrButton | Boolean | false | （可选）是否创建 VR 按钮 | + +#### 2.【几何绘制控制类】`CesiumZondy.Manager.EntityController` + +##### 【method】`appendGroundLine(pnts, color, width) → {Object}`：绘制贴地球线 + +| 参数名 | 类 型 | 说 明 | +| ------ | ------ | ---------------------------------- | +| pnts | Array | X、Y 坐标数组：[x1,y1,x2,y2,x3,y3] | +| color | Color | 颜色 | +| width | Number | 宽度参数 | diff --git a/website/public/static/demo/military/markdown/drawGraphic/drawGraphic-groundpolygon.md b/website/public/static/demo/military/markdown/drawGraphic/drawGraphic-groundpolygon.md new file mode 100644 index 000000000..221c55636 --- /dev/null +++ b/website/public/static/demo/military/markdown/drawGraphic/drawGraphic-groundpolygon.md @@ -0,0 +1,74 @@ +## 绘制贴地球区 + +### 示例功能 + +    本示例实现在三维场景中绘制贴地球区。 + +### 示例实现 + +    本示例需要使用【include-cesium-local.js】开发库实现，关键接口为`CesiumZondy.Manager.EntityController`类提供的`appendGroundPolygon()`方法，实现贴地球区的添加绘制。 + +> 开发库使用请参见*首页-概述-原生 JS 调用*内容。 + +### 实现步骤 + +**Step 1. 引用开发库**： +    引用开发库：本示例引用 local 本地【include-cesium-local.js】开发库，完成此步骤后才可调用三维 WebGL 的功能； + +**Step 2. 创建布局**： +    创建三维视图 Div 容器，构造三维场景控件 WebSceneControl，构造并设置鼠标位置信息显示控件，加载 Google 地图作为底图显示； + +**Step 3. 创建贴地区**: +    绘制贴地区：首先构造`CesiumZondy.Manager.EntityController`几何绘制控制对象、构造外圈坐标数组、内圈坐标数组、填充颜色对象等信息，然后调用`appendGroundPolygon()`方法，即可实现贴地区的添加绘制。如果要绘制单圈的不带洞区，内圈坐标数组传空即可。 + +- Example: + ```javascript + //构造几何绘制控制对象 + var entityController = new CesiumZondy.Manager.EntityController({ + viewer: webGlobe.viewer, + }) + //坐标点数组（经纬度） + var point_out = [70, 0, 150, 0, 150, 60, 70, 60, 70, 0] + //根据给定点画贴地多边形 + var groundPolygon = webGlobe.appendGroundPolygon( + //外圈坐标数组（经纬度） + point_out, + //内圈坐标数组（经纬度） + null, + //填充颜色 + new Cesium.ColorGeometryInstanceAttribute(255 / 255, 255 / 255, 0 / 255, 0.5), + //附加属性 + {} + ) + ``` + +### 关键接口 + +#### 1.【三维场景控件类】`Cesium.WebSceneControl(elementId, options)` + +| 参数名 | 类 型 | 说 明 | +| --------- | ----------------- | -------------------- | +| elementId | Element \| String | 放置视图的 div 的 id | +| options | Object | （可选）附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ---------------- | ------- | ------ | -------------------------------------------------------------------------------------- | +| viewerMode | String | ‘3D’ | （可选）初始视图模式默认为三维球视图 '2D'表示二维视图 'COLUMBUS_VIEW' 表示三维平面视图 | +| showInfo | Boolean | false | （可选）是否显示默认的属性信息框 | +| animation | Boolean | true | （可选）默认动画控制不显示 | +| baseLayerPicker | Boolean | true | （可选）是否创建图层控制显示小组件 | +| fullscreenButton | Boolean | true | （可选）是否创建全屏控制按钮 | +| vrButton | Boolean | false | （可选）是否创建 VR 按钮 | + +#### 2.【几何绘制控制类】`CesiumZondy.Manager.EntityController` + +##### 【method】`appendGroundPolygon(outPnts, innerPnts, color, options) → {Object}`：根据给定点画贴地区 + +| 参数名 | 类 型 | 说 明 | +| --------- | ------- | -------------------------------------------------- | +| outPnts | Array | 外圈坐标数组（经纬度）：[x1,y1,x2,y2,x3,y3] | +| innerPnts | Array | 内圈坐标数组（经纬度）：Array<[x1,y1,x2,y2,x3,y3]> | +| color | Color | 填充颜色(默认不指定时为蓝色) | +| options | Options | 可选扩展参数 | diff --git a/website/public/static/demo/military/markdown/drawGraphic/drawGraphic-hole.md b/website/public/static/demo/military/markdown/drawGraphic/drawGraphic-hole.md new file mode 100644 index 000000000..cc62f40e7 --- /dev/null +++ b/website/public/static/demo/military/markdown/drawGraphic/drawGraphic-hole.md @@ -0,0 +1,89 @@ +## 绘制带洞区 + +### 示例功能 + +    本示例实现在三维场景中绘制带洞区。 + +### 示例实现 + +    本示例需要使用【include-cesium-local.js】开发库实现，关键接口为`CesiumZondy.Manager.EntityController`类提供的`appendHolePolygon()`方法，实现带洞区的添加绘制。 + +> 开发库使用请参见*首页-概述-原生 JS 调用*内容。 + +### 实现步骤 + +**Step 1. 引用开发库**： +    引用开发库：本示例引用 local 本地【include-cesium-local.js】开发库，完成此步骤后才可调用三维 WebGL 的功能； + +**Step 2. 创建布局**： +    创建三维视图 Div 容器，构造三维场景控件 WebSceneControl，构造并设置鼠标位置信息显示控件，加载 Google 地图作为底图显示； + +**Step 3. 绘制带洞区**； +    绘制带洞区：首先构造`CesiumZondy.Manager.EntityController`几何绘制控制对象，构造外圈、内圈坐标点数组，然后调用`appendHolePolygon()`方法，设置信息：区名称、内圈与外圈坐标点数组、区填充色，即可实现带洞区的添加绘制。每一圈坐标点序列，都必须首尾点一致形成闭合区，并且可以添加多圈内圈坐标。 + +- Example： + ```javascript + //构造几何绘制控制对象 + var entityController = new CesiumZondy.Manager.EntityController({ + viewer: webGlobe.viewer, + }) + //外圈坐标点 + var point_out = [114.40328987990017, 30.479789358042233, 114.40255973680176, 30.473707285934392, 114.40905754990294, 30.473938016458956, 114.40971219770601, 30.479196348500707, 114.40328987990017, 30.479789358042233] + //内圈坐标点（可添加多圈内圈坐标点） + var point_in = [ + [114.40788399535329, 30.47712432587247, 114.4077781482791, 30.47586494219165, 114.40919532034856, 30.47700722872353, 114.40788399535329, 30.47712432587247], + [114.40582893901652, 30.478599513299535, 114.40570115301699, 30.47795978731544, 114.40655655628692, 30.478318639933967, 114.40582893901652, 30.478599513299535], + ] + //添加带洞多边形 + var holePolygon = entityController.appendHolePolygon( + //名称 + '带洞区', + //外圈坐标 + point_out, + //内圈坐标 + point_in, + { + //颜色 + material: new Cesium.Color(0 / 255, 0 / 255, 255 / 255, 0.5), + //多边形相对于地球表面的高度 + extrudedHeight: 100, + } + ) + ``` + +### 关键接口 + +#### 1.【三维场景控件类】`Cesium.WebSceneControl(elementId, options)` + +| 参数名 | 类 型 | 说 明 | +| --------- | ----------------- | -------------------- | +| elementId | Element \| String | 放置视图的 div 的 id | +| options | Object | （可选）附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ---------------- | ------- | ------ | -------------------------------------------------------------------------------------- | +| viewerMode | String | ‘3D’ | （可选）初始视图模式默认为三维球视图 '2D'表示二维视图 'COLUMBUS_VIEW' 表示三维平面视图 | +| showInfo | Boolean | false | （可选）是否显示默认的属性信息框 | +| animation | Boolean | true | （可选）默认动画控制不显示 | +| baseLayerPicker | Boolean | true | （可选）是否创建图层控制显示小组件 | +| fullscreenButton | Boolean | true | （可选）是否创建全屏控制按钮 | +| vrButton | Boolean | false | （可选）是否创建 VR 按钮 | + +#### 2.【几何绘制控制类】`CesiumZondy.Manager.EntityController` + +##### 【method】`appendHolePolygon(name, latLonsOut, latLonsIn, options) → {Entity}`：添加带洞区（二维） + +| 参数名 | 类 型 | 说 明 | +| ---------- | ------ | ------------------------------------ | +| name | String | 名称 | +| latLonsOut | Array | 外圈坐标：[x1,y1,x2,y2,x3,y3] | +| latLonsIn | Array | 内圈坐标：Array<[x1,y1,x2,y2,x3,y3]> | +| options | Object | 附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 说 明 | +| -------- | ----- | --------------------------------------------- | +| material | Color | （可选）填充颜色 new Cesium.Color(0, 0, 1, 1) | diff --git a/website/public/static/demo/military/markdown/drawGraphic/drawGraphic-icon.md b/website/public/static/demo/military/markdown/drawGraphic/drawGraphic-icon.md new file mode 100644 index 000000000..2735333cc --- /dev/null +++ b/website/public/static/demo/military/markdown/drawGraphic/drawGraphic-icon.md @@ -0,0 +1,74 @@ +## 添加图标 + +### 示例功能 + +    本示例实现在三维场景中添加图片标注。 + +### 示例实现 + +    本示例需要使用【include-cesium-local.js】开发库实现，关键接口为`CesiumZondy.Manager.LabelLayer`类提供的`appendBillboard()`方法，实现图片标注的添加。 + +> 开发库使用请参见*首页-概述-原生 JS 调用*内容。 + +### 实现步骤 + +**Step 1. 引用开发库**： +    引用开发库：本示例引用 local 本地【include-cesium-local.js】开发库，完成此步骤后才可调用三维 WebGL 的功能； + +**Step 2. 创建布局**： +    创建三维视图 Div 容器，构造三维场景控件 WebSceneControl，构造并设置鼠标位置信息显示控件，加载 Google 地图作为底图显示； + +**Step 3. 添加文本标注**: +    添加文本标注：首先构造`CesiumZondy.Manager.LabelLayer`注记图层管理对象，调用`appendBillboard()`方法可实现图片标注的添加，需要设置基本必要信息，如：图片标注的经纬度、高程、名称、图标文件路径、图片宽度、高度等信息。 + +- Example: + + ```javascript + //构造注记图层管理对象 + var labelLayer = new CesiumZondy.Manager.LabelLayer({ + viewer: webGlobe.viewer, + }) + //添加图片标注（经度、纬度、高程、名称、图片地址、图标宽度、图标高度） + var icon = labelLayer.appendBillboard(114.3992, 30.5062, 0, '图标', './static/data/picture/icon.png', 50, 50) + ``` + +### 关键接口 + +#### 1.【三维场景控件类】`Cesium.WebSceneControl(elementId, options)` + +| 参数名 | 类 型 | 说 明 | +| --------- | ----------------- | -------------------- | +| elementId | Element \| String | 放置视图的 div 的 id | +| options | Object | （可选）附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ---------------- | ------- | ------ | -------------------------------------------------------------------------------------- | +| viewerMode | String | ‘3D’ | （可选）初始视图模式默认为三维球视图 '2D'表示二维视图 'COLUMBUS_VIEW' 表示三维平面视图 | +| showInfo | Boolean | false | （可选）是否显示默认的属性信息框 | +| animation | Boolean | true | （可选）默认动画控制不显示 | +| baseLayerPicker | Boolean | true | （可选）是否创建图层控制显示小组件 | +| fullscreenButton | Boolean | true | （可选）是否创建全屏控制按钮 | +| vrButton | Boolean | false | （可选）是否创建 VR 按钮 | + +#### 2.【注记图层管理类】`CesiumZondy.Manager.LabelLayer` + +##### 【method】`appendBillboard(lat, lon, height, name, bImageUrl, bWidth, bHeight, optionsParam) → {Entity}`：添加图片标签，返回添加的公告板对象（Entity） + +| 参数名 | 类 型 | 说 明 | +| ------------ | ------ | -------- | +| lat | Number | 经度 | +| lon | Number | 纬度 | +| height | Number | 高度 | +| name | String | 名称 | +| bImageUrl | String | 图片地址 | +| bWidth | Number | 图片宽度 | +| bHeight | Number | 图片高度 | +| optionsParam | Object | 扩展参数 | + +- `optionsParam`属性主要参数 + +| 参数名 | 类 型 | 说 明 | +| ----------- | ------ | ---------------- | +| description | String | （可选）描述信息 | diff --git a/website/public/static/demo/military/markdown/drawGraphic/drawGraphic-interaction.md b/website/public/static/demo/military/markdown/drawGraphic/drawGraphic-interaction.md new file mode 100644 index 000000000..b68815e23 --- /dev/null +++ b/website/public/static/demo/military/markdown/drawGraphic/drawGraphic-interaction.md @@ -0,0 +1,145 @@ +## 交互式绘制 + +### 示例功能 + +    此功能用于在三维球上使用鼠标完成点、线、区等图形的绘制，绘制的图形在临时图层上，绘制结果不会被保存，可应用于各个场景，满足用户在三维球上使用鼠标交互式绘制显示区域，或将此功能和其他功能混合使用，将其他功能变成交互式的功能。 + +### 示例实现 + +    本示例需要使用 include-cesium-local.js 开发库实现。通过几何绘制控制`CesiumZondy.Manager.EntityController`的方法实现点、线、区的添加绘制，结合三维场景鼠标事件即 `Cesium.WebSceneControl()` 对象的 `registerMouseEvent()` 方法实现鼠标交互绘制图形功能。其中，可通过 `Cesium.DrawPolygonTool()` 在三维场景中添加交互式绘制区控件，实现交互式绘制区功能。 + +> 开发库使用请参见*首页-概述-原生 JS 调用*内容。 + +### 实现步骤： + +**Step 1. 引用开发库**： +    引用开发库：本示例引用 local 本地【include-cesium-local.js】开发库，完成此步骤后才可调用三维 WebGL 的功能； + +**Step 2. 创建布局**： +    创建三维视图 Div 容器，构造三维场景控件 WebSceneControl，构造并设置鼠标位置信息显示控件，加载 Google 地图作为底图显示，并加载一个三维模型数据； + +以下分别对绘制点绘制线绘制区的实现步骤进行介绍： + +#### 绘制点、绘制线 + +**Step 3. 注册鼠标事件**： +    调用 Cesium 三维球控件 `Cesium.WebSceneControl()` 的 `registerMouseEvent()` 方法注册鼠标事件, 以下示例中的匿名函数为触发鼠标事件后执行的方法，完成此步后，在三维场景中点击鼠标左键可触发点击事件，点击完成后进入匿名函数； + +- Example： + ```Javascript + //注册事件 + webGlobe.registerMouseEvent('LEFT_CLICK', function(e) {}) + ``` + +**Step 4. 坐标转换**: +    鼠标事件执行方法中的形参包含当前鼠标点击的一些信息,可以获取其中的 position 位置信息用于图形绘制，其中鼠标点击获取到的 position 位置坐标为屏幕坐标，需要将屏幕坐标转换为经纬度坐标进行图形绘制； + +- Example: + ```Javascript + //屏幕坐标转世界坐标 + var cartesian = webGlobe.viewer.getCartesian3Position(movement.position, cartesian); + //世界坐标转地理坐标（弧度） + var cartographic = Cesium.Cartographic.fromCartesian(cartesian); + //地理坐标（弧度）转经纬度坐标：纬度、经度、高程 + var lng = Cesium.Math.toDegrees(cartographic.longitude); + var lat = Cesium.Math.toDegrees(cartographic.latitude); + var height = cartographic.height; + ``` + +**Step 5. 添加点、线实体**: +    调用几何绘制控制 `CesiumZondy.Manager.EntityController` 的 `appendPoint()` 方法/ `appendLine()` 方法传入相关经纬度坐标信息以及其他的信息添加图形，完成此步后可在三维场景中看到添加的点/线等图形； + +- Example: + + ```Javascript + //构造几何绘制控制对象 + var entityController = new CesiumZondy.Manager.EntityController({ + viewer: webGlobe.viewer + }); + //添加点：经度、纬度、高程、名称、像素大小、颜色、外边线颜色、边线宽度 + entityController.appendPoint(lng, lat, height, '点', 10, new Cesium.Color(1, 0, 0, 1), new Cesium.Color(1, 1, 0, 1), 2); + ``` + + ```Javascript + //添加线：名称、点数组、线宽、线颜色、是否贴地形 + entityController.appendLine('不贴地线', allPoint, 2, new Cesium.Color(1, 0, 0, 0.8), true, {}); + ``` + +**Step 6. 注销鼠标事件**: +    调用 Cesium 三维球控件 `Cesium.WebSceneControl()` 的 `unRegisterMouseEvent()` 方法注销已添加的鼠标事件，完成此步后，点击鼠标不再触发鼠标事件。 + +- Example: + ```Javascript + //注销鼠标事件 + webGlobe.unRegisterMouseEvent('LEFT_CLICK'); + ``` + +### 关键接口 + +#### 1.【三维场景控件类】`Cesium.WebSceneControl(elementId, options)` + +| 参数名 | 类 型 | 说 明 | +| --------- | ----------------- | -------------------- | +| elementId | Element \| String | 放置视图的 div 的 id | +| options | Object | （可选）附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ---------------- | ------- | ------ | -------------------------------------------------------------------------------------- | +| viewerMode | String | ‘3D’ | （可选）初始视图模式默认为三维球视图 '2D'表示二维视图 'COLUMBUS_VIEW' 表示三维平面视图 | +| showInfo | Boolean | false | （可选）是否显示默认的属性信息框 | +| animation | Boolean | true | （可选）默认动画控制不显示 | +| baseLayerPicker | Boolean | true | （可选）是否创建图层控制显示小组件 | +| fullscreenButton | Boolean | true | （可选）是否创建全屏控制按钮 | +| vrButton | Boolean | false | （可选）是否创建 VR 按钮 | + +##### 【method】 `registerMouseEvent(eventType, callbackFun, handler)` 注册鼠标事件方法 + +- `registerMouseEvent` 方法主要参数 + +| 参数名 | 类型 | 说明 | +| ----------- | -------- | ----------------------------------------------------------------------------------------------- | +| eventType | String | 事件类型 LEFT_CLICK RIGHT_CLICK MOUSE_MOVE LEFT_DOUBLE_CLICK RIGHT_DOUBLE_CLICK WHEEL(鼠标滚轮) | +| callbackFun | function | 回调函数 | +| handler | Object | 回调函数 | + +##### 【method】 `unRegisterMouseEvent(eventType)` 注销鼠标事件方法 + +| 参数名 | 类型 | 说明 | +| --------- | ------ | ----------------------------------------------------------------------------------------------- | +| eventType | String | 事件类型 LEFT_CLICK RIGHT_CLICK MOUSE_MOVE LEFT_DOUBLE_CLICK RIGHT_DOUBLE_CLICK WHEEL(鼠标滚轮) | + +##### 【method】 `appendPoint(lat, lon, height, pName, pPixelSize, pColor, pOutlineColor, pOutlineWidth, description)` 添加点方法 + +| 参数名 | 类型 | 说明 | +| ------------- | ------ | ---------------------------------- | +| lat | Number | 经度 | +| lon | Number | 纬度 | +| height | Number | 高程 | +| pName | String | 名称 | +| pPixelSize | Number | 像素大小 | +| pColor | Color | (new Cesium.Color(1, 0, 0, 1))颜色 | +| pOutlineColor | Color | 外边线颜色 | +| pOutlineWidth | Number | 边线宽度 | +| description | String | 属性描述信息 | + +##### 【method】`appendLine(name, pointsArray, width, color, isGround, options)`：根据给定点画线 + +| 参数名 | 类 型 | 说 明 | +| ----------- | ------- | ---------------------------------- | +| name | String | 名称 | +| pointsArray | Array | 点数组 | +| width | Number | 线的宽度 | +| color | Color | 线颜色(默认不指定时为蓝色) | +| isGround | Boolean | 设置为是否贴地(可识别带高度的坐标) | +| options | Object | 包含的附加属性 | + +#### 2. `Cesium.DrawPolygonTool(webGlobe.viewer, getDrawResult)` : 交互式绘制区工具 + +| 参数名 | 类型 | 说 明 | +| ------------- | -------- | -------- | +| viewer | View | 视图 | +| getDrawResult | function | 回调函数 | + +##### 【method】 `activeTool()` 激活交互式绘制区工具方法 diff --git a/website/public/static/demo/military/markdown/drawGraphic/drawGraphic-label.md b/website/public/static/demo/military/markdown/drawGraphic/drawGraphic-label.md new file mode 100644 index 000000000..ce4600626 --- /dev/null +++ b/website/public/static/demo/military/markdown/drawGraphic/drawGraphic-label.md @@ -0,0 +1,102 @@ +## 添加文本 + +### 示例功能 + +    本示例实现在三维场景中添加文本标注。 + +### 示例实现 + +    本示例需要使用【include-cesium-local.js】开发库实现，关键接口为`CesiumZondy.Manager.LabelLayer`类提供的`appendLabel()`方法，实现文本标注的添加。 + +> 开发库使用请参见*首页-概述-原生 JS 调用*内容。 + +### 实现步骤 + +**Step 1. 引用开发库**： +    引用开发库：本示例引用 local 本地【include-cesium-local.js】开发库，完成此步骤后才可调用三维 WebGL 的功能； + +**Step 2. 创建布局**： +    创建三维视图 Div 容器，构造三维场景控件 WebSceneControl，构造并设置鼠标位置信息显示控件，加载 Google 地图作为底图显示； + +**Step 3. 添加文本标注**: +    添加文本标注：首先构造`CesiumZondy.Manager.LabelLayer`注记图层管理对象，调用`appendLabel()`方法可实现文本标注的添加，需要设置基本必要信息，如：文本标注的经纬度、高程、文本内容；还可设置各项样式信息：字体、颜色、样式、标签位置等。 + +- Example: + + ```javascript + //构造注记图层管理对象 + var labelLayer = new CesiumZondy.Manager.LabelLayer({ + viewer: webGlobe.viewer, + }) + //添加文字标注 + label = labelLayer.appendLabel( + //经度、纬度、高程 + 114.3992, + 30.5062, + 0, + //文本内容 + '光谷广场', + { + //文字大小、字体样式 + font: '20pt 楷体', + //文本颜色 + fillColor: Cesium.Color.YELLOW, + //文本样式，FILL：只填充；OUTLINE：只显示轮廓；FILL_AND_OUTLINE：填充颜色并显示轮廓 + style: Cesium.LabelStyle.FILL_AND_OUTLINE, + //边线颜色 + outlineColor: Cesium.Color.RED, + //边线宽度 + outlineWidth: 2, + //文本垂直方向与坐标点的相对位置：LEFT、CENTER、RIGHT + verticalOrigin: Cesium.VerticalOrigin.CENTER, + //文本水平方向与坐标点的相对位置：LEFT、CENTER、RIGHT + horizontalOrigin: Cesium.HorizontalOrigin.CENTER, + } + ) + ``` + +### 关键接口 + +#### 1.【三维场景控件类】`Cesium.WebSceneControl(elementId, options)` + +| 参数名 | 类 型 | 说 明 | +| --------- | ----------------- | -------------------- | +| elementId | Element \| String | 放置视图的 div 的 id | +| options | Object | （可选）附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ---------------- | ------- | ------ | -------------------------------------------------------------------------------------- | +| viewerMode | String | ‘3D’ | （可选）初始视图模式默认为三维球视图 '2D'表示二维视图 'COLUMBUS_VIEW' 表示三维平面视图 | +| showInfo | Boolean | false | （可选）是否显示默认的属性信息框 | +| animation | Boolean | true | （可选）默认动画控制不显示 | +| baseLayerPicker | Boolean | true | （可选）是否创建图层控制显示小组件 | +| fullscreenButton | Boolean | true | （可选）是否创建全屏控制按钮 | +| vrButton | Boolean | false | （可选）是否创建 VR 按钮 | + +#### 2.【注记图层管理类】`CesiumZondy.Manager.LabelLayer` + +##### 【method】`appendLabel(lat, lon, height, lText, optionsParam) → {Entity}`：添加文字标签，返回标签对象（Entity） + +| 参数名 | 类 型 | 说 明 | +| ------------ | ------ | -------- | +| lat | Number | 经度 | +| lon | Number | 纬度 | +| height | Number | 高程 | +| lText | String | 标签内容 | +| optionsParam | Object | 附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ---------------- | ---------------- | ---------------------------------- | --------------------------------------------------------------------------------------------------- | +| font | String | '14pt monospace' | （可选）字体 | +| fillColor | Color | Cesium.Color.WHITE | （可选）字体的填充色 | +| outlineColor | Color | Cesium.Color.WHITE | （可选）字体的填充色 | +| style | LabelStyle | Cesium.LabelStyle.FILL_AND_OUTLINE | （可选）样式 | +| outlineWidth | Number | 1 | （可选）外边线宽度 | +| heightReference | Number | Cesium.HeightReference.NONE | （可选）外边线宽度 | +| verticalOrigin | VerticalOrigin | Cesium.VerticalOrigin.CENTER | （可选）标签位置 Cesium.VerticalOrigin.Cesium.VerticalOrigin.LEFT Cesium.VerticalOrigin.RIGHT | +| horizontalOrigin | HorizontalOrigin | Cesium.HorizontalOrigin.CENTER | （可选）标签位置 Cesium.HorizontalOrigin.Cesium.HorizontalOrigin.LEFT Cesium.HorizontalOrigin.RIGHT | +| description | String | | （可选）属性描述 | diff --git a/website/public/static/demo/military/markdown/drawGraphic/drawGraphic-labelicon.md b/website/public/static/demo/military/markdown/drawGraphic/drawGraphic-labelicon.md new file mode 100644 index 000000000..989f29008 --- /dev/null +++ b/website/public/static/demo/military/markdown/drawGraphic/drawGraphic-labelicon.md @@ -0,0 +1,162 @@ +## 添加图文标注 + +### 示例功能 + +    本示例实现在三维场景中添加图文标注，与单纯的文本、图片标注不同的是，图文标注可同时包括图片和文字信息。 + +### 示例实现 + +    本示例需要使用【include-cesium-local.js】开发库实现，关键接口为`CesiumZondy.Manager.LabelLayer`类提供的`appendLabelIconComm()`方法、`appendLabelIcon()`方法，实现图文标注的添加。 + +> 开发库使用请参见*首页-概述-原生 JS 调用*内容。 + +### 实现步骤 + +**Step 1. 引用开发库**： +    引用开发库：本示例引用 local 本地【include-cesium-local.js】开发库，完成此步骤后才可调用三维 WebGL 的功能； + +**Step 2. 创建布局**： +    创建三维视图 Div 容器，构造三维场景控件 WebSceneControl，构造并设置鼠标位置信息显示控件，加载 Google 地图作为底图显示； + +**Step 3. 添加图文标注**: +    添加图文标注：构造`CesiumZondy.Manager.LabelLayer`注记图层管理对象，构造必要的位置、图片、文本对象等参数信息，可调用以下两种方法实现图文标注的添加，在实际应用场景中可根据具体应用需求选择调用不同的方法。 + +（1）调用`appendLabelIconComm()`方法，设置各项基本信息，可实现图文标注的添加； + +- Example: + ```javascript + //构造注记图层管理对象 + var labelLayer = new CesiumZondy.Manager.LabelLayer({ + viewer: webGlobe.viewer, + }) + //方法一 + var labelIcon = labelLayer.appendLabelIcon( + //文本内容 + '湖北省老年大学', + //经度、纬度、高度 + 114.3639, + 30.5603, + 0, + //文字大小、字体 + '16pt 宋体', + //文字颜色 + new Cesium.Color(0 / 255, 0 / 255, 0 / 255, 0.8), + //图片地址 + './static/data/picture/icon.png', + //图片宽度、高度 + 50, + 50, + //最远显示距离：相机到注记的距离大于该值 注记不显示 + 10000000, + //最近显示距离：相机到注记的距离小于该值 注记不显示 + 1, + //图片位置：'center','top','bottom' + 'center' + ) + ``` + +（2）调用`appendLabelIcon()`方法，传入构造的位置、图片、文本对象等参数信息，同样也可实现图文标注的添加，此方法对接 Cesium 原生属性，可实现更加丰富的效果； + +- Example: + ```javascript + //位置（x、y、z） + var position = Cesium.Cartesian3.fromDegrees(114.36517991431259, 30.56206615740468, 10) + //图片对象 + var billboardGraphics = new Cesium.BillboardGraphics({ + //图片地址 + image: './static/data/picture/icon.png', + //图片宽度 + width: 64, + //图片高度 + height: 64, + //随远近缩放 + pixelOffsetScaleByDistance: new Cesium.NearFarScalar(1.5e5, 3.0, 1.5e7, 0.5), + //随远近隐藏 + translucencyByDistance: new Cesium.NearFarScalar(1.5e5, 1.0, 1.5e7, 0.0), + }) + //文本对象 + var labelGraphics = new Cesium.LabelGraphics({ + //文本 + text: '湖北省博物馆', + //文字大小、字体 + font: '20pt 宋体', + //文字颜色 + fillColor: Cesium.Color.BLACK, + //文本垂直位置 + verticalOrigin: Cesium.VerticalOrigin.BOTTOM, + //文本水平位置 + horizontalOrigin: Cesium.HorizontalOrigin.BOTTOM, + //偏移量 + pixelOffset: new Cesium.Cartesian2(0.0, -64 / 4), //x,y方向偏移 相对于屏幕 + //随远近缩放 + pixelOffsetScaleByDistance: new Cesium.NearFarScalar(1.5e2, 3.0, 1.5e7, 0.5), + //随远近隐藏 + translucencyByDistance: new Cesium.NearFarScalar(1.5e5, 1.0, 1.5e7, 0.0), + }) + //添加图标注记（文字内容、描述、位置、图片对象、文本对象） + labelIcon1 = labelLayer.appendLabelIconComm('湖北省博物馆', '坐落于湖北省武汉市武昌区东湖风景区', position, billboardGraphics, labelGraphics) + ``` + +    其中，位置对象需使用 Cesium.Cartesian3 类来构造，图片对象需由 Cesium.BillboardGraphics 构造，文本对象需由 Cesium.LabelGraphics 构造，这三个类都属于 Cesium 原生提供的类，具体用法可参考其 API 文档。 + +### 关键接口 + +#### 1.【三维场景控件类】`Cesium.WebSceneControl(elementId, options)` + +| 参数名 | 类 型 | 说 明 | +| --------- | ----------------- | ----------------- | +| elementId | Element \| String | 放置视图的div的id | +| options | Object | （可选）附加属性 | + +* `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ---------------- | ------- | -------- | ------------------------------------------------------------ | +| viewerMode | String | ‘3D’ | （可选）初始视图模式默认为三维球视图 '2D'表示二维视图 'COLUMBUS_VIEW' 表示三维平面视图 | +| showInfo | Boolean | false | （可选）是否显示默认的属性信息框 | +| animation | Boolean | true | （可选）默认动画控制不显示 | +| baseLayerPicker | Boolean | true | （可选）是否创建图层控制显示小组件 | +| fullscreenButton | Boolean | true | （可选）是否创建全屏控制按钮 | +| vrButton | Boolean | false | （可选）是否创建VR按钮 | + +#### 2.【注记图层管理类】`CesiumZondy.Manager.LabelLayer` + +##### 【method】`appendLabelIcon(text, lon, lat, height, font, fillColor, iconUrl, iconWidth, iconHeight, farDist, nearDist, txtPos, attribute) → {Entity}`：添加图标注记 + +| 参数名 | 类 型 | 说 明 | +| ----------- | ------ | ------------------------------------------------ | +| text | String | 注记文字内容 | +| lon | Number | 经度 | +| lat | Number | 纬度 | +| height | Number | 高程 | +| font | String | 字体，这里将字体和大小放在一起 eg:'14pt 楷体' | +| fillColor | Color | 字体的填充色 | +| iconUrl | String | 图标路径 | +| iconWidth | Number | 图标宽度 | +| iconHeight | Number | 图标高度 | +| farDist | Number | 最远显示距离,相机到注记的距离大于该值 注记不显示 | +| nearDist | Number | 最近显示距离,相机到注记的距离小于该值 注记不显示 | +| txtPosParam | String | 图片位置 'center','top','bottom' | +| attribute | String | 其他属性信息 | + +##### 【method】`appendLabelIconComm(name, description, position, billboardGraphics, labelGraphics)`：添加图标注记，通用接口 + +- `appendLabelIconComm`方法主要参数 + +| 参数名 | 类 型 | 说 明 | +| ----------------- | ----------------- | ------------ | +| name | String | 注记文字内容 | +| description | String | 描述 | +| position | Cartesian3 | 位置 | +| billboardGraphics | BillboardGraphics | 图片对象 | +| labelGraphics | LabelGraphics | 文本对象 | + +#### 2.【三维笛卡尔点】`Cartesian3` + +##### 【method】`new Cartesian3(x, y, z)`：构造函数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ------ | ------ | ------ | -------------- | +| x | Number | 0.0 | （可选）X 坐标 | +| y | Number | 0.0 | （可选）Y 坐标 | +| z | Number | 0.0 | （可选）Z 坐标 | diff --git a/website/public/static/demo/military/markdown/drawGraphic/drawGraphic-line.md b/website/public/static/demo/military/markdown/drawGraphic/drawGraphic-line.md new file mode 100644 index 000000000..3e979b9a2 --- /dev/null +++ b/website/public/static/demo/military/markdown/drawGraphic/drawGraphic-line.md @@ -0,0 +1,83 @@ +## 绘制立体线 + +### 示例功能 + +    本示例实现在三维场景中绘制立体线实体。 + +### 示例实现 + +    本示例需要使用【include-cesium-local.js】开发库实现，关键接口为`CesiumZondy.Manager.EntityController`类提供的`appendLine()`方法，实现立体线的添加绘制。 + +> 开发库使用请参见*首页-概述-原生 JS 调用*内容。 + +### 实现步骤 + +**Step 1. 引用开发库**： +    引用开发库：本示例引用 local 本地【include-cesium-local.js】开发库，完成此步骤后才可调用三维 WebGL 的功能； + +**Step 2. 创建布局**： +    创建三维视图 Div 容器，构造三维场景控件 WebSceneControl，构造并设置鼠标位置信息显示控件，加载 Google 地图作为底图显示； + +**Step 3. 绘制立体实线**: +    绘制立体线实体：首先构造`CesiumZondy.Manager.EntityController`几何绘制控制对象，调用`appendLine()`方法，设置：线名称、线坐标点数组、线宽、线颜色、是否识别带高度的坐标（如果为 true 即代表立体线）、是否贴地形等信息，即可实现立体线实体的添加绘制。 + +- Example: + ```javascript + //构造几何绘制控制对象 + var entityController = new CesiumZondy.Manager.EntityController({ + viewer: webGlobe.viewer, + }) + //点数组 + var pointArr = [114.3984603010489, 30.506836857208143, 90, 114.39820581466965, 30.50638419163618, 0, 114.39817448017338, 30.505889144282214, 50] + //绘制立体线实体 + var line = entityController.appendLine( + //名称 + '立体线', + //点数组 + pointArr, + //线宽 + 2, + //线颜色 + new Cesium.Color(255 / 255, 0 / 255, 0 / 255, 1), + //是否识别带高度的坐标（如果为true即代表立体线） + true, + //是否贴地形 + false, + //附加属性 + {} + ) + ``` + +### 关键接口 + +#### 1.【三维场景控件类】`Cesium.WebSceneControl(elementId, options)` + +| 参数名 | 类 型 | 说 明 | +| --------- | ----------------- | -------------------- | +| elementId | Element \| String | 放置视图的 div 的 id | +| options | Object | （可选）附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ---------------- | ------- | ------ | -------------------------------------------------------------------------------------- | +| viewerMode | String | ‘3D’ | （可选）初始视图模式默认为三维球视图 '2D'表示二维视图 'COLUMBUS_VIEW' 表示三维平面视图 | +| showInfo | Boolean | false | （可选）是否显示默认的属性信息框 | +| animation | Boolean | true | （可选）默认动画控制不显示 | +| baseLayerPicker | Boolean | true | （可选）是否创建图层控制显示小组件 | +| fullscreenButton | Boolean | true | （可选）是否创建全屏控制按钮 | +| vrButton | Boolean | false | （可选）是否创建 VR 按钮 | + +#### 2.【几何绘制控制类】`CesiumZondy.Manager.EntityController` + +##### 【method】`appendLine(name, pointsArray, width, color, isHeight, clampToGround, options) → {Entity}`：绘制线，可绘制贴地形线 + +| 参数名 | 类 型 | 说 明 | +| ------------- | ------- | ------------------------ | +| name | String | 名称 | +| pointsArray | Array | 点数组 | +| width | Number | 线的宽度 | +| color | Color | 线颜色(默认为蓝色) | +| isHeight | Boolean | 设置是否识别带高度的坐标 | +| clampToGround | Boolean | 设置是否贴地形 | +| options | Object | 包含的附加属性 | diff --git a/website/public/static/demo/military/markdown/drawGraphic/drawGraphic-militarysymbol.md b/website/public/static/demo/military/markdown/drawGraphic/drawGraphic-militarysymbol.md new file mode 100644 index 000000000..aef1429cc --- /dev/null +++ b/website/public/static/demo/military/markdown/drawGraphic/drawGraphic-militarysymbol.md @@ -0,0 +1,47 @@ +## 军标 + +### 示例功能 + +    此功能用于计算绘制线的长度，可以应用于各个场景，满足用户在使用时进行两点之间距离测量，多点之间距离测量等业务需求。 + +### 示例实现： + +    本示例需要使用 【include-cesium-local.js】 开发库实现。 + +### 实现步骤： + +**Step 1. 引用开发库**: +    本示例引用 local 本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维 WebGL 的功能； + +**Step 2. 创建布局**： +    创建 `id='GlobeView'` 的 div 作为三维视图的容器，并设置其样式，初始化 Cesium 三维球控件 `Cesium.WebSceneControl()` ，完成此步后可在三维场景中加载三维球控件； + +- Example: + + ```Javascript + //构造三维视图类（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', { + terrainExaggeration: 1, + }); + ``` + + ```html +
+ ``` + +**Step 3. 加载数据**: +    调用 Cesium 三维球控件 `Cesium.WebSceneControl()` 的 `append()` 方法传入 M3D 数据服务地址，即可加载浏览数据。 + +- Example: + ```Javascript + //加载数据 + var tileset = webGlobe.append('http://develop.smaryun.com:6163/igs/rest/g3d/M3D', {}); + ``` + +### 关键接口 + +### 【method】 `showPosition(elementId, options)` : 显示经纬度 高程 视角高度 + +- `append` 方法主要参数 + +- `options` 属性说明 diff --git a/website/public/static/demo/military/markdown/drawGraphic/drawGraphic-picsymbol.md b/website/public/static/demo/military/markdown/drawGraphic/drawGraphic-picsymbol.md new file mode 100644 index 000000000..1d2ce9e9f --- /dev/null +++ b/website/public/static/demo/military/markdown/drawGraphic/drawGraphic-picsymbol.md @@ -0,0 +1,97 @@ +## 添加图文标注 + +### 示例功能 + +本示例实现在三维场景中添加图文标注。 + +### 示例实现 + +本示例需要使用【include-cesium-local.js】开发库实现，关键接口为`CesiumZondy.Manager.LabelLayer`类提供的`appendLabelIconComm()`方法，实现图文标注的添加。 + +> 开发库使用请参见*首页-概述-原生JS调用*内容。 + +### 实现步骤 + +1. 引用开发库：本示例引用local本地【include-cesium-local.js】开发库，完成此步骤后才可调用三维WebGL的功能； + +2. 创建三维视图Div容器，构造三维场景控件WebSceneControl，构造并设置鼠标位置信息显示控件，加载Google地图作为底图显示； + +3. 添加图文标注：首先构造`CesiumZondy.Manager.LabelLayer`注记图层管理对象，构造位置、图片、文本对象，这三部分内容是图文标注必备的三种信息，构造后作为参数调用`appendLabelIconComm()`方法，即可实现图文标注的添加； + + ``` javascript + //位置（x、y、z） + var position = Cesium.Cartesian3.fromDegrees(114.36517991431259, 30.56206615740468, 10); + //图片对象 + var billboardGraphics = new Cesium.BillboardGraphics({ + image: "./static/data/picture/icon.png", + width: 64, + height: 64, + //随远近缩放 + pixelOffsetScaleByDistance: new Cesium.NearFarScalar(1.5e5, 3.0, 1.5e7, 0.5), + //随远近隐藏 + translucencyByDistance: new Cesium.NearFarScalar(1.5e5, 1.0, 1.5e7, 0.0), + }); + //文本对象 + var labelGraphics = new Cesium.LabelGraphics({ + //文本 + text: "湖北省博物馆", + //文字大小、字体 + font: "20pt 宋体", + //文字颜色 + fillColor: Cesium.Color.BLACK, + //文本垂直位置 + verticalOrigin: Cesium.VerticalOrigin.BOTTOM, + //文本水平位置 + horizontalOrigin: Cesium.HorizontalOrigin.BOTTOM, + //随远近缩放 + pixelOffset: new Cesium.Cartesian2(0.0, -64 / 4), //x,y方向偏移 相对于屏幕 + pixelOffsetScaleByDistance: new Cesium.NearFarScalar(1.5e2, 3.0, 1.5e7, 0.5), + //随远近隐藏 + translucencyByDistance: new Cesium.NearFarScalar(1.5e5, 1.0, 1.5e7, 0.0) + }); + + //构造注记图层管理对象 + var labelLayer = new CesiumZondy.Manager.LabelLayer({ + viewer: webGlobe.viewer + }); + //添加图标注记（文字内容、描述、位置、图片对象、文本对象） + var labelIcon = labelLayer.appendLabelIconComm( + "湖北省博物馆", + "坐落于湖北省武汉市武昌区东湖风景区", + position, + billboardGraphics, + labelGraphics + ); + ``` + + 其中，位置对象需使用Cesium.Cartesian3类来构造，图片对象需由Cesium.BillboardGraphics构造，文本对象需由Cesium.LabelGraphics构造，这三个类都属于Cesium原生提供的类，具体用法可参考API文档。 + +### 关键接口 + +#### 1.【三维场景控件】WebSceneControl + +#### 2.【注记图层管理类】CesiumZondy.Manager.LabelLayer + +##### （1）`appendLabelIconComm(name, description, position, billboardGraphics, labelGraphics)`：添加图标注记 + +> `appendLabelIconComm`方法主要参数 + +|参数名|类 型|说 明| +|-|-|-| +|name|String|注记文字内容| +|description|String|描述| +|position|Cartesian3|位置| +|billboardGraphics|BillboardGraphics|图片对象| +|labelGraphics|LabelGraphics|文本对象| + +#### 2.【三维笛卡尔点】Cartesian3 + +##### （1）`new Cartesian3(x, y, z)`：构造函数 + +> `Cartesian3`构造函数主要参数 + +|参数名|类 型|默认值|说 明| +|-|-|-|-| +|x|Number|0.0|（可选）X 坐标| +|y|Number|0.0|（可选）Y 坐标| +|z|Number|0.0|（可选）Z 坐标| diff --git a/website/public/static/demo/military/markdown/drawGraphic/drawGraphic-picture.md b/website/public/static/demo/military/markdown/drawGraphic/drawGraphic-picture.md new file mode 100644 index 000000000..62bd67532 --- /dev/null +++ b/website/public/static/demo/military/markdown/drawGraphic/drawGraphic-picture.md @@ -0,0 +1,53 @@ +## 添加图片 + +### 示例功能 + +本示例实现在三维场景中添加图片。 + +### 示例实现 + +本示例需要使用【include-cesium-local.js】开发库实现，关键接口为`CesiumZondy.Manager.LayerManager`类提供的`appendImageByUrl()`方法，实现图片的添加。 + +> 开发库使用请参见*首页-概述-原生JS调用*内容。 + +### 实现步骤 + +1. 引用开发库：本示例引用local本地【include-cesium-local.js】开发库，完成此步骤后才可调用三维WebGL的功能； + +2. 创建三维视图Div容器，构造三维场景控件WebSceneControl，构造并设置鼠标位置信息显示控件，加载Google地图作为底图显示； + +3. 添加图片：首先构造`CesiumZondy.Manager.LayerManager`图层管理对象，然后调用`appendImageByUrl()`方法，需要传入图片的地址（可为本地图片地址，也可以为网络图片的URL），以及图片显示的坐标范围； + + ``` javascript + //构造注记图层管理对象 + var layerManager = new CesiumZondy.Manager.LayerManager({ + viewer: webGlobe.viewer + }); + + //添加图片 + var image = layerManager.appendImageByUrl( + //本地图片地址 + './static/data/picture/world.jpg', + //图片显示范围（西经、南纬、东经、北纬） + -180.0, -90, 180.0, 90 + ); + ``` + +### 关键接口 + +#### 1.【三维场景控件】WebSceneControl + +#### 2.【图层管理类】CesiumZondy.Manager.LayerManager + +##### （1）`appendImageByUrl(url, west, south, east, north)`：通过地址添加图片，包括本地图片和网络图片 + +> `appendImageByUrl`方法主要参数 + +|参数名|类 型|说 明| +|-|-|-| +|url|String|图片地址| +|west|float|西经| +|south|float|南纬| +|east|float|东经| +|north|float|北纬| +|options|Object|扩展参数| diff --git a/website/public/static/demo/military/markdown/drawGraphic/drawGraphic-point.md b/website/public/static/demo/military/markdown/drawGraphic/drawGraphic-point.md new file mode 100644 index 000000000..180e7c7d2 --- /dev/null +++ b/website/public/static/demo/military/markdown/drawGraphic/drawGraphic-point.md @@ -0,0 +1,98 @@ +## 绘制点 + +### 示例功能 + +    本示例实现在三维场景中绘制点实体。 + +### 示例实现 + +    本示例需要使用【include-cesium-local.js】开发库实现，关键接口为`CesiumZondy.Manager.EntityController`类提供的`appendPoint()`或`appendPointComm()`方法，实现点实体的添加绘制。 + +> 开发库使用请参见*首页-概述-原生 JS 调用*内容。 + +### 实现步骤 + +**Step 1. 引用开发库**： +    引用开发库：本示例引用 local 本地【include-cesium-local.js】开发库，完成此步骤后才可调用三维 WebGL 的功能； + +**Step 2. 创建布局**： +    创建三维视图 Div 容器，构造三维场景控件 WebSceneControl，构造并设置鼠标位置信息显示控件，加载 Google 地图作为底图显示； + +**Step 3. 绘制点实体**: +    绘制点实体：首先构造`CesiumZondy.Manager.EntityController`几何绘制控制对象，然后调用`appendPoint()`方法，设置点实体所在经纬度、高程，以及名称、像素大小、颜色、边线颜色、边线宽度信息，即可添加绘制点实体。 + +- Example: + + ```javascript + //构造几何绘制控制对象 + var entityController = new CesiumZondy.Manager.EntityController({ + viewer: webGlobe.viewer, + }) + //添加点实体：经度、纬度、高程、名称、大小（像素单位）、颜色、外边线颜色、边线宽度 + var point = entityController.appendPoint(114.30252625376454, 30.544631482624357, 20, '黄鹤楼', 12, new Cesium.Color(255 / 255, 255 / 255, 0 / 255, 1), new Cesium.Color(255 / 255, 0 / 255, 0 / 255, 1), 2) + + //方法二：添加点通用方法，对接Cesium原生，可设置更多属性 + point4 = entityController.appendPointComm( + //经度、纬度、高程 + 114.28478689925817, + 30.555691346035022, + 0, + //名称、描述 + '晴川阁', + '晴川阁景点', + //附加属性：像素大小、颜色、外边线颜色、边线宽度 + { + pixelSize: 12, + color: new Cesium.Color(255 / 255, 255 / 255, 0 / 255, 1), + outlineColor: new Cesium.Color(255 / 255, 0 / 255, 0 / 255, 1), + outlineWidth: 2, + } + ) + ``` + +### 关键接口 + +#### 1.【三维场景控件类】`Cesium.WebSceneControl(elementId, options)` + +| 参数名 | 类 型 | 说 明 | +| --------- | ----------------- | -------------------- | +| elementId | Element \| String | 放置视图的 div 的 id | +| options | Object | （可选）附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ---------------- | ------- | ------ | -------------------------------------------------------------------------------------- | +| viewerMode | String | ‘3D’ | （可选）初始视图模式默认为三维球视图 '2D'表示二维视图 'COLUMBUS_VIEW' 表示三维平面视图 | +| showInfo | Boolean | false | （可选）是否显示默认的属性信息框 | +| animation | Boolean | true | （可选）默认动画控制不显示 | +| baseLayerPicker | Boolean | true | （可选）是否创建图层控制显示小组件 | +| fullscreenButton | Boolean | true | （可选）是否创建全屏控制按钮 | +| vrButton | Boolean | false | （可选）是否创建 VR 按钮 | + +#### 2.【几何绘制控制类】`CesiumZondy.Manager.EntityController` + +##### 【method】`appendPoint(lat, lon, height, name, pixelSize, color, outlineColor, outlineWidth, description) → {Entity}`：添加点 + +| 参数名 | 类 型 | 说 明 | +| ------------ | ------ | ------------------------------- | +| lat | Number | 经度 | +| lon | Number | 纬度 | +| height | Number | 高程 | +| name | String | 名称 | +| pixelSize | Number | 像素大小 | +| color | Color | 颜色(new Cesium.Color(1,0,0,1)) | +| outlineColor | Color | 外边线颜色 | +| outlineWidth | Number | 边线宽度 | +| description | String | 属性描述信息 | + +##### 【method】`appendPointComm(lat, lon, height, name, description, options) → {Entity}`：添加点通用方法 + +| 参数名 | 类 型 | 说 明 | +| ----------- | ------ | ------------------- | +| lat | Number | 经度 | +| lon | Number | 纬度 | +| height | Number | 高程 | +| name | String | 名称 | +| description | String | 属性描述信息 | +| options | Object | entity 参数信息对象 | diff --git a/website/public/static/demo/military/markdown/drawGraphic/drawGraphic-polygon.md b/website/public/static/demo/military/markdown/drawGraphic/drawGraphic-polygon.md new file mode 100644 index 000000000..715aa9714 --- /dev/null +++ b/website/public/static/demo/military/markdown/drawGraphic/drawGraphic-polygon.md @@ -0,0 +1,80 @@ +## 绘制立体区 + +### 示例功能 + +    本示例实现在三维场景中绘制立体区。 + +### 示例实现 + +    本示例需要使用【include-cesium-local.js】开发库实现，关键接口为`CesiumZondy.Manager.EntityController`类提供的`appendGraphics()`方法，实现立体区的添加绘制；可通过`removeEntity(entity)`移除。 + +> 开发库使用请参见*首页-概述-原生 JS 调用*内容。 + +### 实现步骤 + +**Step 1. 引用开发库**： +    引用开发库：本示例引用 local 本地【include-cesium-local.js】开发库，完成此步骤后才可调用三维 WebGL 的功能； + +**Step 2. 创建布局**： +    创建三维视图 Div 容器，构造三维场景控件 WebSceneControl，构造并设置鼠标位置信息显示控件，加载 Google 地图作为底图显示； + +**Step 3. 绘制立体区**: +    绘制立体区：构造`CesiumZondy.Manager.EntityController`几何绘制控制对象，根据坐标点、是否指定各点高度、颜色等信息构造区对象，然后调用`appendGraphics()`方法即可实现立体区的绘制。 + +- Example: + + ```javascript + //构造几何绘制控制对象 + var entityController = new CesiumZondy.Manager.EntityController({ + viewer: webGlobe.viewer, + }) + + //构造区对象 + var polygon = { + name: '立体区', + polygon: { + //坐标点 + hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights([114.3992, 30.5062, 100, 114.39921899282697, 30.507118866456594, 0, 114.39817867190918, 30.505787946817524, 0, 114.40013927896888, 30.505694066567706, 0]), + //是否指定各点高度 + perPositionHeight: true, + //颜色 + material: new Cesium.Color(33 / 255, 150 / 255, 243 / 255, 0.5), + //轮廓线是否显示 + outline: true, + //轮廓线颜色 + outlineColor: Cesium.Color.BLACK, + }, + } + //绘制图形通用方法：对接Cesium原生特性 + var stericPolygon = entityController.appendGraphics(polygon) + ``` + +### 关键接口 + +#### 1.【三维场景控件类】`Cesium.WebSceneControl(elementId, options)` + +| 参数名 | 类 型 | 说 明 | +| --------- | ----------------- | -------------------- | +| elementId | Element \| String | 放置视图的 div 的 id | +| options | Object | （可选）附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ---------------- | ------- | ------ | -------------------------------------------------------------------------------------- | +| viewerMode | String | ‘3D’ | （可选）初始视图模式默认为三维球视图 '2D'表示二维视图 'COLUMBUS_VIEW' 表示三维平面视图 | +| showInfo | Boolean | false | （可选）是否显示默认的属性信息框 | +| animation | Boolean | true | （可选）默认动画控制不显示 | +| baseLayerPicker | Boolean | true | （可选）是否创建图层控制显示小组件 | +| fullscreenButton | Boolean | true | （可选）是否创建全屏控制按钮 | +| vrButton | Boolean | false | （可选）是否创建 VR 按钮 | + +#### 2.【几何绘制控制类】`CesiumZondy.Manager.EntityController` + +##### （1）`appendGraphics(options) → {Entity}`：添加图形 + +- `appendGraphics`方法主要参数 + +| 参数名 | 类 型 | 说 明 | +| ------- | ------ | -------------------------- | +| options | Object | 包含 entity 中相关选项设置 | diff --git a/website/public/static/demo/military/markdown/drawGraphic/drawGraphic-popup.md b/website/public/static/demo/military/markdown/drawGraphic/drawGraphic-popup.md new file mode 100644 index 000000000..4ee846c5f --- /dev/null +++ b/website/public/static/demo/military/markdown/drawGraphic/drawGraphic-popup.md @@ -0,0 +1,112 @@ +## 添加气泡弹窗 + +### 示例功能 + +    本示例实现在三维场景中添加 Popup 气泡弹窗。 + +### 示例实现 + +    本示例需要使用【include-cesium-local.js】开发库实现，关键接口为`CesiumZondy.Manager.PopupController`类提供的`appendPopup()`方法，实现气泡弹窗的添加；可分别通过`removePopup()、clearPopups()、refreshPopups()`方法移除、更新 Popup 标注。 + +> 开发库使用请参见*首页-概述-原生 JS 调用*内容。 + +### 实现步骤 + +**Step 1. 引用开发库**： +    引用开发库：本示例引用 local 本地【include-cesium-local.js】开发库，完成此步骤后才可调用三维 WebGL 的功能； + +**Step 2. 创建布局**： +    创建三维视图 Div 容器，构造三维场景控件 WebSceneControl，构造并设置鼠标位置信息显示控件，加载 Google 地图作为底图显示； + +**Step 3. 添加气泡弹窗**: +    添加气泡弹窗：首先构造`CesiumZondy.Manager.PopupController`气泡弹窗控制对象，调用`appendPopup()`方法，设置气泡容器的 id、显示的文字内容、气泡位置、像素位置偏移、以及 close 按钮点击的回调函数，在此设置点击 close 按钮时移除气泡，添加完气泡之后，调用`refreshPopups()`方法刷新使气泡能够随地图操作不断更新位置。 + +- Example: + + ```javascript + //构造气泡弹窗控制对象 + var popupController = new CesiumZondy.Manager.PopupController({ + viewer: webGlobe.viewer, + }) + + //添加PopUP + var popup = popupController.appendPopup( + //容器div的id + 'popup', + //文本 + '
黄鹤楼
位于湖北省武汉市长江南岸的武昌蛇山之巅', + //坐标位置 + Cesium.Cartesian3.fromDegrees(114.30252372618706, 30.544641875459394), + //偏移量 + [0, 0], + //弹窗的关闭按钮点击回调函数 + function() { + popupController.removePopup(popup, 'popup', {}) + } + ) + //刷新 + popupController.refreshPopups() + ``` + +### 关键接口 + +#### 1.【三维场景控件类】`Cesium.WebSceneControl(elementId, options)` + +| 参数名 | 类 型 | 说 明 | +| --------- | ----------------- | ----------------- | +| elementId | Element \| String | 放置视图的div的id | +| options | Object | （可选）附加属性 | + +* `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ---------------- | ------- | -------- | ------------------------------------------------------------ | +| viewerMode | String | ‘3D’ | （可选）初始视图模式默认为三维球视图 '2D'表示二维视图 'COLUMBUS_VIEW' 表示三维平面视图 | +| showInfo | Boolean | false | （可选）是否显示默认的属性信息框 | +| animation | Boolean | true | （可选）默认动画控制不显示 | +| baseLayerPicker | Boolean | true | （可选）是否创建图层控制显示小组件 | +| fullscreenButton | Boolean | true | （可选）是否创建全屏控制按钮 | +| vrButton | Boolean | false | （可选）是否创建VR按钮 | + +#### 2.【气泡弹窗控制类】`CesiumZondy.Manager.PopupController` + +##### 【method】`appendPopup(containID, content, position, offset, closeCallback, options)`：添加 PopUP，需考虑相机的高度对 PopUp 大小、透明度、偏移值的影响 + +- `appendPopUp`方法主要参数 + +| 参数名 | 类 型 | 说 明 | +| ------------- | ---------- | ------------------------------------------- | +| containID | String | 容器的 div id（注意该容器不能放在球容器中） | +| content | String | popup 的内容，可以为带 html 标签的字符串 | +| posion | Cartesian3 | popup 的位置（地图单位） | +| offset | Array | [x,y]偏移值，像素单位 | +| closeCallback | function | popup 的 close 按钮点击回调函数 | +| options | Object | 附加属性 | + +- `options`参数主要属性 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| -------------------------- | ------ | ------------ | ----------------------------------------------------------------------------------------------------------------------------------- | +| scaleByDistance | Number | cameraHeight | （可选）options.scaleByDistance = new Cesium.NearFarScalar(1.5e2, 1.5, 8.0e6, 0.0) 基于距摄像机距离指定广告牌比例 | +| translucencyByDistance | Number | cameraHeight | （可选）options.translucencyByDistance = new Cesium.NearFarScalar(1.5e2, 1.5, 8.0e6, 0.0) 基于距摄像机的距离来指定广告牌的透明度 | +| pixelOffsetScaleByDistance | Number | cameraHeight | （可选）options.pixelOffsetScaleByDistance = new Cesium.NearFarScalar(1.5e2, 0.0, 8.0e6, 10.0) 基于距摄像机的距离指定广告牌像素偏移 | + +##### 【method】`removePopup(popID, popupOwner, options)`：移除某个 PopUP + +- `removePopup`方法主要参数 + +| 参数名 | 类 型 | 说 明 | +| ---------- | ------ | --------------------------------- | +| popID | String | popup 的 div id 添加 popup 返回值 | +| popupOwner | Object | popup 所有者 | +| options | Object | 扩展参数 | + +- `options`参数主要属性 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| --------- | ------- | ------ | ------------ | +| removeDiv | Boolean | false | 是否移除 div | + +##### 【method】`refreshPopups()`：刷新，Popup 更新事件 + +##### 【method】`clearPopups()`：移除所有的 PopUP diff --git a/website/public/static/demo/military/markdown/drawGraphic/drawGraphic-stretchpolygon.md b/website/public/static/demo/military/markdown/drawGraphic/drawGraphic-stretchpolygon.md new file mode 100644 index 000000000..7b46a0e7c --- /dev/null +++ b/website/public/static/demo/military/markdown/drawGraphic/drawGraphic-stretchpolygon.md @@ -0,0 +1,85 @@ +## 绘制拉伸区 + +### 示例功能 + +    本示例实现在三维场景中绘制拉伸区。 + +### 示例实现 + +    本示例需要使用【include-cesium-local.js】开发库实现，关键接口为`CesiumZondy.Manager.EntityController`类提供的`appendPolygon()`方法，实现拉伸区的添加绘制；可通过`removeEntity(entity)`移除。 + +> 开发库使用请参见*首页-概述-原生 JS 调用*内容。 + +### 实现步骤 + +**Step 1. 引用开发库**： +    引用开发库：本示例引用 local 本地【include-cesium-local.js】开发库，完成此步骤后才可调用三维 WebGL 的功能； + +**Step 2. 创建布局**： +    创建三维视图 Div 容器，构造三维场景控件 WebSceneControl，构造并设置鼠标位置信息显示控件，加载 Google 地图作为底图显示； + +**Step 3. 绘制拉伸区**: +    绘制拉伸区：构造`CesiumZondy.Manager.EntityController`几何绘制控制对象，调用`appendPolygon()`方法，设置不同信息可绘制不同类型的区： + +（1）构造二维坐标点数组，设置信息：区名称、坐标点数组、区填充颜色、外框线颜色，并设置“是否指定各点高度”参数为 false，即可实现平面区的添加绘制。 + +- Example: + + ```javascript + //构造几何绘制控制对象 + var entityController = new CesiumZondy.Manager.EntityController({ + viewer: webGlobe.viewer, + }) + //点数组（二维点） + var pointArr = [114.40993798035257, 30.47917084653805, 114.4093239347542, 30.473893768825484, 114.41091821047152, 30.473773818562865, 114.41146570646127, 30.479026171029727, 114.40993798035257, 30.47917084653805] + //绘制平面区（名称、点数组、区填充色、外框线颜色、是否指定各点高度） + var polygon = entityController.appendPolygon('三维区', pointArr, new Cesium.Color(255 / 255, 255 / 255, 0 / 255, 0.5), new Cesium.Color(255 / 255, 0 / 255, 0 / 255, 1), false) + ``` + +（2）构造三维坐标点数组，设置信息：区名称、坐标点数组、区填充颜色、外框线颜色，并设置“是否指定各点高度”参数为 true，即可实现拉伸区的添加绘制。 + +- Example: + ```javascript + //点数组（三维点） + var pointArr = [114.40328987990017, 30.479789358042233, 100, 114.40255973680176, 30.473707285934392, 100, 114.40905754990294, 30.473938016458956, 100, 114.40971219770601, 30.479196348500707, 100, 114.40328987990017, 30.479789358042233, 100] + //绘制立体拉伸区（名称、点数组、区填充色、外框线颜色、是否传入三维点、附加属性） + var polygon = entityController.appendPolygon('三维区', pointArr, fillColor, outLineColor, true, { + //多边形相对于地球表面的高度 + extrudedHeight: 50, + //是否指定各点高度 + perPositionHeight: true, + }) + ``` + +### 关键接口 + +#### 1.【三维场景控件类】`Cesium.WebSceneControl(elementId, options)` + +| 参数名 | 类 型 | 说 明 | +| --------- | ----------------- | -------------------- | +| elementId | Element \| String | 放置视图的 div 的 id | +| options | Object | （可选）附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ---------------- | ------- | ------ | -------------------------------------------------------------------------------------- | +| viewerMode | String | ‘3D’ | （可选）初始视图模式默认为三维球视图 '2D'表示二维视图 'COLUMBUS_VIEW' 表示三维平面视图 | +| showInfo | Boolean | false | （可选）是否显示默认的属性信息框 | +| animation | Boolean | true | （可选）默认动画控制不显示 | +| baseLayerPicker | Boolean | true | （可选）是否创建图层控制显示小组件 | +| fullscreenButton | Boolean | true | （可选）是否创建全屏控制按钮 | +| vrButton | Boolean | false | （可选）是否创建 VR 按钮 | + +#### 2.【几何绘制控制类】`CesiumZondy.Manager.EntityController` + +##### （1）`appendPolygon(name, points, fillColorParam, outlineColorParam, options) → {Entity}`：画多边形区，返回绘制的多边形区对象 Entity + +| 参数名 | 类 型 | 说 明 | +| ----------------- | ------- | ----------------------------------------- | +| name | String | 名称 | +| points | Array | 点数组（顺序是逆时针） | +| fillColorParam | Color | 区填充色 默认白色半透明 | +| outlineColorParam | Color | 外框线颜色 默认红色半透明 | +| threeDimension | Boolean | 是否传入三维点 传入三维点则按照三维点解析 | +| options | Object | 可选扩展参数 | diff --git a/website/public/static/demo/military/markdown/drawGraphic/drawGraphic-symbol.md b/website/public/static/demo/military/markdown/drawGraphic/drawGraphic-symbol.md new file mode 100644 index 000000000..42cd78c28 --- /dev/null +++ b/website/public/static/demo/military/markdown/drawGraphic/drawGraphic-symbol.md @@ -0,0 +1,65 @@ +## 添加标注 + +### 示例功能 + +本示例实现在三维场景中添加文本标注。 + +### 示例实现 + +本示例需要使用【include-cesium-local.js】开发库实现，关键接口为`WebSceneControl`类提供的`appendLabel()`方法，实现文本标注的添加。 + +> 开发库使用请参见*首页-概述-原生JS调用*内容。 + +### 实现步骤 + +1. 引用开发库：本示例引用local本地【include-cesium-local.js】开发库； + +2. 创建三维视图容器，构造三维场景控件，构造并设置鼠标位置显示控件，加载Google地图作为底图显示； + +3. 添加文本标注：调用`appendLabel()`方法可实现文本标注的添加，需要设置基本必要信息，如：文本标注的经纬度、高程、文本内容；还可设置样式信息，如：字体、颜色、样式、标签位置等信息。移除时可调用`removeEntity()`方法实现。 + + ``` javascript + //添加文字标注 + webGlobe.appendLabel(114.2, 31, 0, '这是一个标注', { + //字体 + font: '14pt 楷体', + //文本填充颜色 + fillColor: Cesium.Color.RED, + //样式 + style: Cesium.LabelStyle.FILL_AND_OUTLINE, + //标签位置 + verticalOrigin: Cesium.VerticalOrigin.BOTTOM, + //像素位移 + pixelOffset: new Cesium.Cartesian2(0, -9) + }); + ``` + +### 关键接口 + +#### 1.【三维场景控件】WebSceneControl + +##### （1）`appendLabel(lat, lon, height, lText, options)`：添加文字标签 + +> `appendLabel`方法主要参数 + +|参数名|类 型|说 明| +|-|-|-| +|lat|Number|经度| +|lon|Number|纬度| +|height|Number|高程| +|lText|String|标签内容| +|options|Object|附加属性| + +> `options`属性主要参数 + +|参数名|类 型|默认值|说 明| +|-|-|-|-| +|font|String|'14pt monospace'|（可选）字体| +|fillColor|Color|Cesium.Color.WHITE|（可选）字体的填充色| +|outlineColor|Color|Cesium.Color.WHITE|（可选）字体的填充色| +|style|LabelStyle|Cesium.LabelStyle.FILL_AND_OUTLINE|（可选）样式| +|outlineWidth|Number|1|（可选）外边线宽度| +|heightReference|Number|Cesium.HeightReference.NONE|（可选）外边线宽度| +|verticalOrigin|VerticalOrigin|Cesium.VerticalOrigin.CENTER|（可选）标签位置 Cesium.VerticalOrigin.Cesium.VerticalOrigin.LEFT Cesium.VerticalOrigin.RIGHT| +|horizontalOrigin|HorizontalOrigin|Cesium.HorizontalOrigin.CENTER|（可选）标签位置 Cesium.HorizontalOrigin.Cesium.HorizontalOrigin.LEFT Cesium.HorizontalOrigin.RIGHT| +|description|String||（可选）属性描述| \ No newline at end of file diff --git a/website/public/static/demo/military/markdown/drawGraphic/drawGraphic-terrainline.md b/website/public/static/demo/military/markdown/drawGraphic/drawGraphic-terrainline.md new file mode 100644 index 000000000..a7d868848 --- /dev/null +++ b/website/public/static/demo/military/markdown/drawGraphic/drawGraphic-terrainline.md @@ -0,0 +1,97 @@ +## 绘制贴地形线 + +### 示例功能 + +    本示例实现在三维场景中绘制贴地形模式的线实体。 + +### 示例实现 + +    本示例需要使用【include-cesium-local.js】开发库实现，关键接口为`CesiumZondy.Manager.EntityController`类提供的`appendLine()`方法，实现贴地形线的添加绘制；可通过`removeEntity(entity)`移除。 + +> 开发库使用请参见*首页-概述-原生 JS 调用*内容。 + +### 实现步骤 + +**Step 1. 引用开发库**： +    引用开发库：本示例引用 local 本地【include-cesium-local.js】开发库，完成此步骤后才可调用三维 WebGL 的功能； + +**Step 2. 创建布局**： +    创建三维视图 Div 容器，构造三维场景控件 WebSceneControl，构造并设置鼠标位置信息显示控件，加载 Google 地图作为底图显示； + +**Step 3. 加载地形数据**: +    加载地形数据：通过`TerrainLayer`类加载地形数据； + +- Example: + ```javascript + //构造地形层管理对象（视图） + var terrainLayer = new CesiumZondy.Layer.TerrainLayer({ + viewer: webGlobe.viewer, + }) + //添加三维地图文档：地形数据 + terrainLayer.append('http://develop.smaryun.com:6163/igs/rest/g3d/terrain', {}) + ``` + +**Step 4. 绘制贴地形线**: +    绘制贴地形线：首先构造`CesiumZondy.Manager.EntityController`几何绘制控制对象，然后调用`appendLine()`方法，设置信息：线名称、坐标点数组、线宽、线颜色、是否识别带高度的坐标、是否贴地形等信息，注意绘制贴地形线需设置贴地形参数为 true，并只需传入二维坐标点，即可实现贴地形线的添加绘制。 + +- Example: + + ```javascript + //构造几何绘制控制对象 + var entityController = new CesiumZondy.Manager.EntityController({ + viewer: webGlobe.viewer, + }) + //坐标位置 + var pointArr = [120.7642, 23.1537, 120.7688, 23.144, 120.7729, 23.1356, 120.7776, 23.1259] + //绘制贴地形线 + terrainLine = entityController.appendLine( + //名称 + '贴地形线', + //点数组 + pointArr, + //线宽 + 3, + //线颜色 + new Cesium.Color(255 / 255, 0 / 255, 0 / 255, 1), + //是否识别带高度的坐标 + false, + //是否贴地形 + true, + //附加属性 + {} + ) + ``` + +### 关键接口 + +#### 1.【三维场景控件类】`Cesium.WebSceneControl(elementId, options)` + +| 参数名 | 类 型 | 说 明 | +| --------- | ----------------- | ----------------- | +| elementId | Element \| String | 放置视图的div的id | +| options | Object | （可选）附加属性 | + +* `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ---------------- | ------- | -------- | ------------------------------------------------------------ | +| viewerMode | String | ‘3D’ | （可选）初始视图模式默认为三维球视图 '2D'表示二维视图 'COLUMBUS_VIEW' 表示三维平面视图 | +| showInfo | Boolean | false | （可选）是否显示默认的属性信息框 | +| animation | Boolean | true | （可选）默认动画控制不显示 | +| baseLayerPicker | Boolean | true | （可选）是否创建图层控制显示小组件 | +| fullscreenButton | Boolean | true | （可选）是否创建全屏控制按钮 | +| vrButton | Boolean | false | （可选）是否创建VR按钮 | + +#### 2.【几何绘制控制类】`CesiumZondy.Manager.EntityController` + +##### 【method】`appendLine(name, pointsArray, width, color, isHeight, clampToGround, options) → {Entity}`：绘制线，可绘制贴地形线 + +| 参数名 | 类 型 | 说 明 | +| ------------- | ------- | ------------------------ | +| name | String | 名称 | +| pointsArray | Array | 点数组 | +| width | Number | 线的宽度 | +| color | Color | 线颜色(默认为蓝色) | +| isHeight | Boolean | 设置是否识别带高度的坐标 | +| clampToGround | Boolean | 设置是否贴地形 | +| options | Object | 包含的附加属性 | diff --git a/website/public/static/demo/military/markdown/drawGraphic/drawGraphic-terrainpolygon.md b/website/public/static/demo/military/markdown/drawGraphic/drawGraphic-terrainpolygon.md new file mode 100644 index 000000000..0ec550327 --- /dev/null +++ b/website/public/static/demo/military/markdown/drawGraphic/drawGraphic-terrainpolygon.md @@ -0,0 +1,87 @@ +## 绘制贴地形区 + +### 示例功能 + +    本示例实现在三维场景中绘制贴地形模式的区实体。 + +### 示例实现 + +    本示例需要使用【include-cesium-local.js】开发库实现，关键接口为`CesiumZondy.Manager.EntityController`类提供的`appendGraphics()`方法，实现贴地形区的添加绘制；可通过`removePrimitive(entity)`移除。 + +> 开发库使用请参见*首页-概述-原生 JS 调用*内容。 + +### 实现步骤 + +**Step 1. 引用开发库**： +    引用开发库：本示例引用 local 本地【include-cesium-local.js】开发库，完成此步骤后才可调用三维 WebGL 的功能； + +**Step 2. 创建布局**： +    创建三维视图 Div 容器，构造三维场景控件 WebSceneControl，构造并设置鼠标位置信息显示控件，加载 Google 地图作为底图显示； + +**Step 3. 加载地形数据**: +    加载地形数据：通过`TerrainLayer`类加载地形数据； + +- Example: + ```javascript + //构造地形层管理对象（视图） + var terrainLayer = new CesiumZondy.Layer.TerrainLayer({ + viewer: webGlobe.viewer, + }) + //添加三维地图文档：地形数据 + terrainLayer.append('http://develop.smaryun.com:6163/igs/rest/g3d/terrain', {}) + ``` + +**Step 4. 绘制贴地形线**: +    绘制贴地形线：首先构造`CesiumZondy.Manager.EntityController`几何绘制控制对象，然后根据坐标点、颜色、分类类型等信息构造区图形对象，然后调用`appendGraphics()`方法，传入构造的区图形对象即可实现贴地形区的添加绘制。注意分类类型需设置为`Cesium.ClassificationType.TERRAIN`。 + +- Example: + ```javascript + //构造几何绘制控制对象 + var entityController = new CesiumZondy.Manager.EntityController({ + viewer: webGlobe.viewer, + }) + //三维坐标点数组 + let points = [121.12838249665901, 23.828496638766055, 2816.2788, 121.150053294749, 23.82435802607214, 2584.9714, 121.14258923767652, 23.8125039217518, 2197.3468, 121.11461042047392, 23.809568499354498, 2405.1721] + //构造区对象 + let polygon = { + //区 + polygon: { + //坐标 + hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights(points), + //颜色 + material: Cesium.Color.BLUE.withAlpha(0.5), + //分类类型：地形类型 + classificationType: Cesium.ClassificationType.TERRAIN, + }, + } + //绘制图形通用方法：对接Cesium原生特性 + terrainPolygon = entityController.appendGraphics(polygon) + ``` + +### 关键接口 + +#### 1.【三维场景控件类】`Cesium.WebSceneControl(elementId, options)` + +| 参数名 | 类 型 | 说 明 | +| --------- | ----------------- | -------------------- | +| elementId | Element \| String | 放置视图的 div 的 id | +| options | Object | （可选）附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ---------------- | ------- | ------ | -------------------------------------------------------------------------------------- | +| viewerMode | String | ‘3D’ | （可选）初始视图模式默认为三维球视图 '2D'表示二维视图 'COLUMBUS_VIEW' 表示三维平面视图 | +| showInfo | Boolean | false | （可选）是否显示默认的属性信息框 | +| animation | Boolean | true | （可选）默认动画控制不显示 | +| baseLayerPicker | Boolean | true | （可选）是否创建图层控制显示小组件 | +| fullscreenButton | Boolean | true | （可选）是否创建全屏控制按钮 | +| vrButton | Boolean | false | （可选）是否创建 VR 按钮 | + +#### 2.【几何绘制控制类】`CesiumZondy.Manager.EntityController` + +##### 【method】`appendGraphics(options) → {Entity}`：添加图形 + +| 参数名 | 类 型 | 说 明 | +| ------- | ------ | -------------------------- | +| options | Object | 包含 entity 中相关选项设置 | diff --git a/website/public/static/demo/military/markdown/m3d/m3d-analysis.md b/website/public/static/demo/military/markdown/m3d/m3d-analysis.md new file mode 100644 index 000000000..283d0e5fe --- /dev/null +++ b/website/public/static/demo/military/markdown/m3d/m3d-analysis.md @@ -0,0 +1,271 @@ +## 加载 M3D 地质体模型 + +### 示例功能 + +    本示例实现在三维场景中加载 M3D 地质体模型，对接 MapGIS IGServer 发布的三维地图服务。 + +### M3D——全新的轻量级三维数据交换格式 + +    M3D，是 MapGIS 定义的针对多端应用的轻量级三维数据交换格式，对海量三维数据进行网格划分与分层组织，采用流式传输模式，实现多端一体的高效解析和渲染。具备高效网络传输模式、多级 LOD 模型支持、WebGL 无缝融合等优点。可以将多样类型、多种格式的三维数据通过 M3D 数据交换格式进行高效解析并渲染，能够支持的数据类型包括：精细模型（景观模型、BIM 模型）、实景三维（倾斜摄影、地质体、管线）、点云（激光点云 las 等）、其他（栅格、地形、矢量、瓦片）等。 + +### 示例实现 + +    数据准备：本示例采用的数据经过两个步骤生成，首先需在 MapGIS Desktop 桌面平台软件中为地质体模型数据生成 M3D 缓存，并组织为地图文档；然后在 MapGIS Server Manager 服务管理器中根据地图文档发布为三维地图服务。 + +    本示例需要使用【include-cesium-local.js】开发库实现，关键接口为`WebSceneControl`类提供的`append()`方法，以此来加载 M3D 缓存的三维地图服务。 + +> 开发库使用请参见*首页-概述-原生 JS 调用*内容。 + +### 实现步骤 + +**Step 1. 引用开发库**： +    引用开发库：本示例引用 local 本地【include-cesium-local.js】开发库； + +**Step 2. 创建布局**： +    创建布局：创建`id='GlobeView'`的 div 作为三维视图的容器，并设置其样式； + +**Step 3. 构造三维场景控件**： +    构造三维场景控件：实例化 WebSceneControl 对象； + +- Example: + ```javascript + //构造三维视图类（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', { + terrainExaggeration: 1, + }) + ``` + +**Step 4. 加载数据**: +    加载数据：调用`append()`方法，传入 M3D 缓存三维地图服务的 URL 地址即可加载浏览数据，可传入相关配置参数； + +- Example: + ```javascript + //添加地图文档 + webGlobe.append('http://192.168.10.186:6163/igs/rest/g3d/福田地质体', {}) + ``` + +**Step 5. 鼠标位置显示控件**: +    鼠标位置显示控件：创建`id="coordinate_location"`的 div 作为容器，用于显示鼠标当前位置的经纬度、高程、视角高度信息；然后调用`showPosition()`方法为三维场景控件设置鼠标位置显示控件。 + +- Example: + ```javascript + //显示鼠标位置控件 + webGlobe.showPosition('coordinate_location') + ``` + +### 关键接口 + +#### 1.【三维场景控件类】`Cesium.WebSceneControl(elementId, options)` + +| 参数名 | 类 型 | 说 明 | +| --------- | ----------------- | -------------------- | +| elementId | Element \| String | 放置视图的 div 的 id | +| options | Object | （可选）附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ---------------- | ------- | ------ | -------------------------------------------------------------------------------------- | +| viewerMode | String | ‘3D’ | （可选）初始视图模式默认为三维球视图 '2D'表示二维视图 'COLUMBUS_VIEW' 表示三维平面视图 | +| showInfo | Boolean | false | （可选）是否显示默认的属性信息框 | +| animation | Boolean | true | （可选）默认动画控制不显示 | +| baseLayerPicker | Boolean | true | （可选）是否创建图层控制显示小组件 | +| fullscreenButton | Boolean | true | （可选）是否创建全屏控制按钮 | +| vrButton | Boolean | false | （可选）是否创建 VR 按钮 | + +##### 【method】`append(url, options, 代理)`：添加地图文档 + +| 参数名 | 类 型 | 说 明 | +| ------- | ------------ | -------- | +| url | String | 文档地址 | +| options | Object | 附加属性 | +| 代理 | DefaultProxy | 代理 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ----------- | ------- | -------- | --------------------- | +| autoReset | Boolean | true | optional 是否自动定位 | +| synchronous | Boolean | true | optional 是否异步请求 | +| loaded | Boolean | function | optional 回调函数 | + +##### 【method】`showPosition(elementId, options)`：显示经纬度 高程 视角高度 + +| 参数名 | 类 型 | 说 明 | +| --------- | ----------------- | ------------------ | +| elementId | Element \| String | 要显示的 div 的 id | +| options | Object | 附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ------------------ | ------- | ------ | ---------------------------------------- | +| showHpr | Boolean | false | （可选） | +| showSelectTileInfo | Boolean | false | （可选）显示当前鼠标所在位置拾取到的级别 | +| showViewLevelInfo | Boolean | false | （可选）显示视图级别 | + +## M3D 模型示例 + +- M3D 的加载代码相对比较简单，如下所示 + +- Example: + ```javascript + m3dlayer = webGlobe.append('http://192.168.10.186:6163/igs/rest/g3d/福田钻孔', {}) + ``` + +## 地下模式 + +    地下模式的核心是`关闭天空盒`以及改变透明度以及调整光线角度，同时针对特定模型进行`沉降操作`已达到对应的地下效果。 + +- Example: + + ```javascript + webGlobe.viewer.imageryLayers.removeAll() + webGlobe.viewer.scene.skyAtmosphere.show = false + webGlobe.viewer.scene.globe.enableTransparent = true + webGlobe.viewer.scene.globe.baseColor = new Cesium.Color(1, 1, 1, 0.001) + ``` + +## 加载完毕后的回调 + +- Examle: + ```javascript + m3dlayer = webGlobe.append('http://192.168.10.186:6163/igs/rest/g3d/福田钻孔', { + loaded: function(layer) { + // 加载完毕后执行业务逻辑 + }, + }) + ``` + +## 图层的属性 + +M3D 的图层属性保持 Cesium 的 3DTIle 一致 +[Cesium3DTileset](https://cesium.com/docs/cesiumjs-ref-doc/Cesium3DTileset.html?classFilter=3Dtile) + +- Example: + + ```javascript + { + url: { type: String, required: true }, + show: { typs: Boolean, default: true }, + + /** + * @type Cesium.Matrix4 + * @default Matrix4.IDENTITY + */ + /* modelMatrix: { typs: Object, default: undefined }, */ + /** + * @type Cesium.ShadowMode + * @default ShadowMode.ENABLED + */ + /* shadows: { type: Object, default: undefined }, */ + + maximumScreenSpaceError: { type: Number, default: 16 }, + maximumMemoryUsage: { type: Number, default: 512 }, + + cullWithChildrenBounds: { typs: Boolean, default: true }, + cullRequestsWhileMoving: { typs: Boolean, default: true }, + cullRequestsWhileMovingMultiplier: { type: Number, default: 60.0 }, + + preloadWhenHidden: { typs: Boolean, default: false }, + preloadFlightDestinations: { typs: Boolean, default: true }, + preferLeaves: { typs: Boolean, default: false }, + + dynamicScreenSpaceError: { typs: Boolean, default: false }, + dynamicScreenSpaceErrorDensity: { type: Number, default: 0.00278 }, + dynamicScreenSpaceErrorFactor: { type: Number, default: 4.0 }, + dynamicScreenSpaceErrorHeightFalloff: { type: Number, default: 0.25 }, + + progressiveResolutionHeightFraction: { type: Number, default: 0.3 }, + + foveatedScreenSpaceError: { typs: Boolean, default: true }, + foveatedConeSize: { type: Number, default: 0.1 }, + foveatedMinimumScreenSpaceErrorRelaxation: { type: Number, default: 0.0 }, + /** + * @type Cesium3DTileset~foveatedInterpolationCallback + * @default Cesium.Math.lerp + */ + /* foveatedInterpolationCallback: { type: Function, default: undefined }, */ + foveatedTimeDelay: { type: Number, default: 0.2 }, + + skipLevelOfDetail: { typs: Boolean, default: false }, + baseScreenSpaceError: { type: Number, default: 1024 }, + skipScreenSpaceErrorFactor: { type: Number, default: 16 }, + skipLevels: { type: Number, default: 1 }, + + immediatelyLoadDesiredLevelOfDetail: { typs: Boolean, default: false }, + loadSiblings: { typs: Boolean, default: false }, + + /** + * @type Cesium.ClippingPlaneCollection + */ + /* clippingPlanes: { typs: Object, default: undefined }, */ + /** + * @type Cesium.ClassificationType + */ + /* classificationType: { typs: Object, default: undefined }, */ + /** + * @type Cesium.Ellipsoid + * @default Ellipsoid.WGS84 + */ + /* ellipsoid: { typs: Object, default: undefined }, */ + + /* pointCloudShading: { typs: Object, default: undefined }, */ + /** + * @type Cartesian2 + * @default new Cartesian2(1.0, 1.0) + */ + /* imageBasedLightingFactor: { typs: Object, default: undefined }, */ + /** + * @type Cartesian3 + */ + /* lightColor: { typs: Object, default: undefined }, */ + luminanceAtZenith: { type: Number, default: 0.2 }, + /** + * @type Array. + */ + /* sphericalHarmonicCoefficients: { type: Array, default: undefined }, */ + specularEnvironmentMaps: { type: String, default: "" }, + + debugHeatmapTilePropertyName: { type: String, default: "" }, + debugFreezeFrame: { typs: Boolean, default: false }, + debugColorizeTiles: { typs: Boolean, default: false }, + debugWireframe: { typs: Boolean, default: false }, + debugShowBoundingVolume: { typs: Boolean, default: false }, + debugShowContentBoundingVolume: { typs: Boolean, default: false }, + debugShowViewerRequestVolume: { typs: Boolean, default: false }, + debugShowGeometricError: { typs: Boolean, default: false }, + debugShowRenderingStatistics: { typs: Boolean, default: false }, + debugShowMemoryUsage: { typs: Boolean, default: false }, + debugShowUrl: { typs: Boolean, default: false } + } + ``` + +## 分层预览原理 + +1. 通过平台选取对应的某一层的地物的 id，并将其记录进一个数组中： + +- Example: + ```javascript + var layer1Ids = [1, 13, 23, 35, 46, 68] + var layer2Ids = [2, 14, 24, 27, 41, 57, 65, 70, 78] + var layer3Ids = [11, 15, 21, 33, 44, 66, 79] + var layer4Ids = [12, 22, 34, 45, 67, 80] + var layerIdList = [layer1Ids, layer2Ids, layer3Ids, layer4Ids] + ``` + +2. 当需要显示某一层的时候，通过自定义显示的方式来控制对应的图层开关 + +- Example: + ```javascript + var layerIds = layerIdList[index] + webGlobe.stopCustomDisplay(m3dlayer) + webGlobe.startCustomDisplay(m3dlayer, layerIds, { + colorBlendMode: Cesium.Cesium3DTileColorBlendMode.MIX, + color: new Cesium.Color(1, 1, 1, 0.0), + //applyForLayer: true, + negate: true, + }) + ``` + +> 本例的注记是通过一个高度注记 + 高度虚线共同组成实现的 diff --git a/website/public/static/demo/military/markdown/m3d/m3d-assise.md b/website/public/static/demo/military/markdown/m3d/m3d-assise.md new file mode 100644 index 000000000..cd9ec071a --- /dev/null +++ b/website/public/static/demo/military/markdown/m3d/m3d-assise.md @@ -0,0 +1,241 @@ +## 加载 M3D 地质体模型 + +### 示例功能 + +    本示例实现在三维场景中加载 M3D 地质体模型，对接 MapGIS IGServer 发布的三维地图服务。 + +### M3D——全新的轻量级三维数据交换格式 + +    M3D，是 MapGIS 定义的针对多端应用的轻量级三维数据交换格式，对海量三维数据进行网格划分与分层组织，采用流式传输模式，实现多端一体的高效解析和渲染。具备高效网络传输模式、多级 LOD 模型支持、WebGL 无缝融合等优点。可以将多样类型、多种格式的三维数据通过 M3D 数据交换格式进行高效解析并渲染，能够支持的数据类型包括：精细模型（景观模型、BIM 模型）、实景三维（倾斜摄影、地质体、管线）、点云（激光点云 las 等）、其他（栅格、地形、矢量、瓦片）等。 + +### 示例实现 + +    数据准备：本示例采用的数据经过两个步骤生成，首先需在 MapGIS Desktop 桌面平台软件中为地质体模型数据生成 M3D 缓存，并组织为地图文档；然后在 MapGIS Server Manager 服务管理器中根据地图文档发布为三维地图服务。 + +    本示例需要使用【include-cesium-local.js】开发库实现，关键接口为`WebSceneControl`类提供的`append()`方法，以此来加载 M3D 缓存的三维地图服务。 + +> 开发库使用请参见*首页-概述-原生 JS 调用*内容。 + +### 实现步骤 + +**Step 1. 引用开发库**： +    本示例引用 local 本地【include-cesium-local.js】开发库，完成此步骤后才可调用三维 WebGL 的功能； + +**Step 2. 创建布局**： +    创建`id='GlobeView'`的 div 作为三维视图的容器，并设置其样式；； + +**Step 3. 构造三维场景控件**： +    构造三维场景控件：实例化 WebSceneControl 对象； + +- Example: + ```javascript + //构造三维视图类（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', { + terrainExaggeration: 1, + }) + ``` + +**Step 4. 加载数据**: +    加载数据：调用`append()`方法，传入 M3D 缓存三维地图服务的 URL 地址即可加载浏览数据，可传入相关配置参数； + +- Example: + ```javascript + //添加地图文档 + webGlobe.append('http://192.168.10.186:6163/igs/rest/g3d/福田地质体', {}) + ``` + +**Step 5. 鼠标位置显示控件**: +    鼠标位置显示控件：创建`id="coordinate_location"`的 div 作为容器，用于显示鼠标当前位置的经纬度、高程、视角高度信息；然后调用`showPosition()`方法为三维场景控件设置鼠标位置显示控件。 + +- Example: + ```javascript + //显示鼠标位置控件 + webGlobe.showPosition('coordinate_location') + ``` + +### 关键接口 + +#### 1.【三维场景控件类】`Cesium.WebSceneControl(elementId, options)` + +| 参数名 | 类 型 | 说 明 | +| --------- | ----------------- | -------------------- | +| elementId | Element \| String | 放置视图的 div 的 id | +| options | Object | （可选）附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ---------------- | ------- | ------ | -------------------------------------------------------------------------------------- | +| viewerMode | String | ‘3D’ | （可选）初始视图模式默认为三维球视图 '2D'表示二维视图 'COLUMBUS_VIEW' 表示三维平面视图 | +| showInfo | Boolean | false | （可选）是否显示默认的属性信息框 | +| animation | Boolean | true | （可选）默认动画控制不显示 | +| baseLayerPicker | Boolean | true | （可选）是否创建图层控制显示小组件 | +| fullscreenButton | Boolean | true | （可选）是否创建全屏控制按钮 | +| vrButton | Boolean | false | （可选）是否创建 VR 按钮 | + +##### 【method】`append(url, options, 代理)`：添加地图文档 + +| 参数名 | 类 型 | 说 明 | +| ------- | ------------ | -------- | +| url | String | 文档地址 | +| options | Object | 附加属性 | +| 代理 | DefaultProxy | 代理 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ----------- | ------- | -------- | --------------------- | +| autoReset | Boolean | true | optional 是否自动定位 | +| synchronous | Boolean | true | optional 是否异步请求 | +| loaded | Boolean | function | optional 回调函数 | + +##### 【method】`showPosition(elementId, options)`：显示经纬度 高程 视角高度 + +| 参数名 | 类 型 | 说 明 | +| --------- | ----------------- | ------------------ | +| elementId | Element \| String | 要显示的 div 的 id | +| options | Object | 附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ------------------ | ------- | ------ | ---------------------------------------- | +| showHpr | Boolean | false | （可选） | +| showSelectTileInfo | Boolean | false | （可选）显示当前鼠标所在位置拾取到的级别 | +| showViewLevelInfo | Boolean | false | （可选）显示视图级别 | + +## M3D 模型示例 + +- M3D 的加载代码相对比较简单，如下所示 + +- Example: + ```javascript + m3dlayer = webGlobe.append('http://192.168.10.186:6163/igs/rest/g3d/福田钻孔', {}) + ``` + +## 地下模式 + +地下模式的核心是`关闭天空盒`以及改变透明度以及调整光线角度，同时针对特定模型进行`沉降操作`已达到对应的地下效果。 + +- Example: + ```javascript + webGlobe.viewer.imageryLayers.removeAll() + webGlobe.viewer.scene.skyAtmosphere.show = false + webGlobe.viewer.scene.globe.enableTransparent = true + webGlobe.viewer.scene.globe.baseColor = new Cesium.Color(1, 1, 1, 0.001) + ``` + +## 加载完毕后的回调 + +- Example: + ```javascript + m3dlayer = webGlobe.append('http://192.168.10.186:6163/igs/rest/g3d/福田钻孔', { + loaded: function(layer) { + // 加载完毕后执行业务逻辑 + }, + }) + ``` + +## 图层的属性 + +M3D 的图层属性保持 Cesium 的 3DTIle 一致 +[Cesium3DTileset](https://cesium.com/docs/cesiumjs-ref-doc/Cesium3DTileset.html?classFilter=3Dtile) + +- Example: + + ```javascript + { + url: { type: String, required: true }, + show: { typs: Boolean, default: true }, + + /** + * @type Cesium.Matrix4 + * @default Matrix4.IDENTITY + */ + /* modelMatrix: { typs: Object, default: undefined }, */ + /** + * @type Cesium.ShadowMode + * @default ShadowMode.ENABLED + */ + /* shadows: { type: Object, default: undefined }, */ + + maximumScreenSpaceError: { type: Number, default: 16 }, + maximumMemoryUsage: { type: Number, default: 512 }, + + cullWithChildrenBounds: { typs: Boolean, default: true }, + cullRequestsWhileMoving: { typs: Boolean, default: true }, + cullRequestsWhileMovingMultiplier: { type: Number, default: 60.0 }, + + preloadWhenHidden: { typs: Boolean, default: false }, + preloadFlightDestinations: { typs: Boolean, default: true }, + preferLeaves: { typs: Boolean, default: false }, + + dynamicScreenSpaceError: { typs: Boolean, default: false }, + dynamicScreenSpaceErrorDensity: { type: Number, default: 0.00278 }, + dynamicScreenSpaceErrorFactor: { type: Number, default: 4.0 }, + dynamicScreenSpaceErrorHeightFalloff: { type: Number, default: 0.25 }, + + progressiveResolutionHeightFraction: { type: Number, default: 0.3 }, + + foveatedScreenSpaceError: { typs: Boolean, default: true }, + foveatedConeSize: { type: Number, default: 0.1 }, + foveatedMinimumScreenSpaceErrorRelaxation: { type: Number, default: 0.0 }, + /** + * @type Cesium3DTileset~foveatedInterpolationCallback + * @default Cesium.Math.lerp + */ + /* foveatedInterpolationCallback: { type: Function, default: undefined }, */ + foveatedTimeDelay: { type: Number, default: 0.2 }, + + skipLevelOfDetail: { typs: Boolean, default: false }, + baseScreenSpaceError: { type: Number, default: 1024 }, + skipScreenSpaceErrorFactor: { type: Number, default: 16 }, + skipLevels: { type: Number, default: 1 }, + + immediatelyLoadDesiredLevelOfDetail: { typs: Boolean, default: false }, + loadSiblings: { typs: Boolean, default: false }, + + /** + * @type Cesium.ClippingPlaneCollection + */ + /* clippingPlanes: { typs: Object, default: undefined }, */ + /** + * @type Cesium.ClassificationType + */ + /* classificationType: { typs: Object, default: undefined }, */ + /** + * @type Cesium.Ellipsoid + * @default Ellipsoid.WGS84 + */ + /* ellipsoid: { typs: Object, default: undefined }, */ + + /* pointCloudShading: { typs: Object, default: undefined }, */ + /** + * @type Cartesian2 + * @default new Cartesian2(1.0, 1.0) + */ + /* imageBasedLightingFactor: { typs: Object, default: undefined }, */ + /** + * @type Cartesian3 + */ + /* lightColor: { typs: Object, default: undefined }, */ + luminanceAtZenith: { type: Number, default: 0.2 }, + /** + * @type Array. + */ + /* sphericalHarmonicCoefficients: { type: Array, default: undefined }, */ + specularEnvironmentMaps: { type: String, default: "" }, + + debugHeatmapTilePropertyName: { type: String, default: "" }, + debugFreezeFrame: { typs: Boolean, default: false }, + debugColorizeTiles: { typs: Boolean, default: false }, + debugWireframe: { typs: Boolean, default: false }, + debugShowBoundingVolume: { typs: Boolean, default: false }, + debugShowContentBoundingVolume: { typs: Boolean, default: false }, + debugShowViewerRequestVolume: { typs: Boolean, default: false }, + debugShowGeometricError: { typs: Boolean, default: false }, + debugShowRenderingStatistics: { typs: Boolean, default: false }, + debugShowMemoryUsage: { typs: Boolean, default: false }, + debugShowUrl: { typs: Boolean, default: false } + } + ``` diff --git a/website/public/static/demo/military/markdown/m3d/m3d-bim.md b/website/public/static/demo/military/markdown/m3d/m3d-bim.md new file mode 100644 index 000000000..898fd4717 --- /dev/null +++ b/website/public/static/demo/military/markdown/m3d/m3d-bim.md @@ -0,0 +1,90 @@ +## 加载 M3D BIM 模型 + +### 示例功能 + +    本示例实现在三维场景中加载 M3D 的 BIM 模型数据，对接 MapGIS IGServer 发布的三维地图服务。 + +### M3D——全新的轻量级三维数据交换格式 + +    M3D，是 MapGIS 定义的针对多端应用的轻量级三维数据交换格式，对海量三维数据进行网格划分与分层组织，采用流式传输模式，实现多端一体的高效解析和渲染。具备高效网络传输模式、多级 LOD 模型支持、WebGL 无缝融合等优点。可以将多样类型、多种格式的三维数据通过 M3D 数据交换格式进行高效解析并渲染，能够支持的数据类型包括：精细模型（景观模型、BIM 模型）、实景三维（倾斜摄影、地质体、管线）、点云（激光点云 las 等）、其他（栅格、地形、矢量、瓦片）等。 + +### 示例实现 + +    数据准备：本示例采用的数据经过两个步骤生成，首先需在 MapGIS Desktop 桌面平台软件中为 BIM 模型数据生成 M3D 缓存，并组织为地图文档；然后在 MapGIS Server Manager 服务管理器中根据地图文档发布为三维地图服务。 + +    本示例需要使用【include-cesium-local.js】开发库实现，关键接口为`CesiumZondy.Layer.M3DLayer`类提供的`append()`方法，以此来加载 M3D 缓存的三维地图服务。 + +> 开发库使用请参见*首页-概述-原生 JS 调用*内容。 + +### 实现步骤 + +**Step 1. 引用开发库**： +    本示例引用 local 本地【include-cesium-local.js】开发库，完成此步骤后才可调用三维 WebGL 的功能； + +**Step 2. 创建布局**： +    创建`id='GlobeView'`的 div 作为三维视图的容器，并设置其样式；； + +**Step 3. 构造三维场景控件**： +    实例化`Cesium.WebSceneControl`对象，完成此步骤后可在三维场景中加载三维球控件； + +- Example: + ```javascript + //构造三维视图对象（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', {}) + ``` + +**Step 4. 加载数据**: +    加载数据：构造`CesiumZondy.Layer.M3DLayer`M3D 图层管理对象，调用`append()`方法，传入 M3D 缓存三维地图服务的 URL 地址即可加载浏览数据，同时可传入相关配置参数。 + +- Example: + ```javascript + //构造M3D模型层管理对象（视图） + var m3dLayer = new CesiumZondy.Layer.M3DLayer({ + viewer: webGlobe.viewer, + }) + //加载M3D地图文档（服务地址，配置参数） + var bimLayer = m3dLayer.append('http://develop.smaryun.com:6163/igs/rest/g3d/school', { + //模型细节显示控制参数：较大值可提高渲染性能，较低值可提高视觉质量 + maximumScreenSpaceError: 8, + }) + ``` + +### 关键接口 + +#### 1.【三维场景控件类】`Cesium.WebSceneControl(elementId, options)` + +| 参数名 | 类 型 | 说 明 | +| --------- | ----------------- | -------------------- | +| elementId | Element \| String | 放置视图的 div 的 id | +| options | Object | （可选）附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ---------------- | ------- | ------ | -------------------------------------------------------------------------------------- | +| viewerMode | String | ‘3D’ | （可选）初始视图模式默认为三维球视图 '2D'表示二维视图 'COLUMBUS_VIEW' 表示三维平面视图 | +| showInfo | Boolean | false | （可选）是否显示默认的属性信息框 | +| animation | Boolean | true | （可选）默认动画控制不显示 | +| baseLayerPicker | Boolean | true | （可选）是否创建图层控制显示小组件 | +| fullscreenButton | Boolean | true | （可选）是否创建全屏控制按钮 | +| vrButton | Boolean | false | （可选）是否创建 VR 按钮 | + +#### 2.【M3D 模型层管理类】`CesiumZondy.Layer.M3DLayer` + +##### 【method】`append(url, options)`：添加 M3D 地图文档服务 + +| 参数名 | 类 型 | 说 明 | +| ------- | ------ | ------------ | +| url | String | 文档服务地址 | +| options | Object | 附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ----------------------- | ------------ | ------------ | -------------------------------------------------------------------------------------------------- | +| autoReset | Boolean | true | （可选）是否自动定位 | +| synchronous | Boolean | true | （可选）是否异步请求 | +| loaded | Boolean | function | （可选）回调函数 | +| proxy | DefaultProxy | defaultProxy | （可选）代理 | +| showBoundingVolume | Boolean | false | （可选）是否显示包围盒 | +| maximumScreenSpaceError | Number | 16 | （可选）用于控制模型显示细节，值较大将会渲染更少的贴图，进而可以提高性能，而较低的值将提高视觉质量 | diff --git a/website/public/static/demo/military/markdown/m3d/m3d-drill.md b/website/public/static/demo/military/markdown/m3d/m3d-drill.md new file mode 100644 index 000000000..74ffc6961 --- /dev/null +++ b/website/public/static/demo/military/markdown/m3d/m3d-drill.md @@ -0,0 +1,270 @@ +## 加载 M3D 地质钻孔 + +### 示例功能 + +    本示例实现在三维场景中加载 M3D 地质钻孔数据，对接 MapGIS IGServer 发布的三维地图服务。 + +### M3D——全新的轻量级三维数据交换格式 + +    M3D，是 MapGIS 定义的针对多端应用的轻量级三维数据交换格式，对海量三维数据进行网格划分与分层组织，采用流式传输模式，实现多端一体的高效解析和渲染。具备高效网络传输模式、多级 LOD 模型支持、WebGL 无缝融合等优点。可以将多样类型、多种格式的三维数据通过 M3D 数据交换格式进行高效解析并渲染，能够支持的数据类型包括：精细模型（景观模型、BIM 模型）、实景三维（倾斜摄影、地质体、管线）、点云（激光点云 las 等）、其他（栅格、地形、矢量、瓦片）等。 + +### 示例实现 + +    数据准备：本示例采用的数据经过两个步骤生成，首先需在 MapGIS Desktop 桌面平台软件中为地质钻孔模型数据生成 M3D 缓存，并组织为地图文档；然后在 MapGIS Server Manager 服务管理器中根据地图文档发布为三维地图服务。 + +    本示例需要使用【include-cesium-local.js】开发库实现，关键接口为`CesiumZondy.Layer.M3DLayer`类提供的`append()`方法，以此来加载 M3D 缓存的三维地图服务。 + +> 开发库使用请参见*首页-概述-原生 JS 调用*内容。 + +### 实现步骤 + +**Step 1. 引用开发库**： +    本示例引用 local 本地【include-cesium-local.js】开发库，完成此步骤后才可调用三维 WebGL 的功能； + +**Step 2. 创建布局**： +    创建`id='GlobeView'`的 div 作为三维视图的容器，并设置其样式； + +**Step 3. 构造三维场景控件**： +    实例化`Cesium.WebSceneControl`对象，完成此步骤后可在三维场景中加载三维球控件； + +- Example: + ```javascript + //构造三维视图对象（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', {}) + ``` + +**Step 4. 加载数据**: +    加载数据：构造`CesiumZondy.Layer.M3DLayer`M3D 图层管理对象，调用`append()`方法，传入 M3D 缓存三维地图服务的 URL 地址即可加载浏览数据，同时可传入相关配置参数。 + +- Example: + ```javascript + //构造M3D模型层管理对象（视图） + var m3dLayer = new CesiumZondy.Layer.M3DLayer({ + viewer: webGlobe.viewer, + }) + //加载M3D地图文档（服务地址，配置参数） + var obliqueLayer = m3dLayer.append('http://develop.smaryun.com:6163/igs/rest/g3d/DaYanTa', {}) + ``` + +### 关键接口 + +#### 1.【三维场景控件类】`Cesium.WebSceneControl(elementId, options)` + +| 参数名 | 类 型 | 说 明 | +| --------- | ----------------- | -------------------- | +| elementId | Element \| String | 放置视图的 div 的 id | +| options | Object | （可选）附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ---------------- | ------- | ------ | -------------------------------------------------------------------------------------- | +| viewerMode | String | ‘3D’ | （可选）初始视图模式默认为三维球视图 '2D'表示二维视图 'COLUMBUS_VIEW' 表示三维平面视图 | +| showInfo | Boolean | false | （可选）是否显示默认的属性信息框 | +| animation | Boolean | true | （可选）默认动画控制不显示 | +| baseLayerPicker | Boolean | true | （可选）是否创建图层控制显示小组件 | +| fullscreenButton | Boolean | true | （可选）是否创建全屏控制按钮 | +| vrButton | Boolean | false | （可选）是否创建 VR 按钮 | + +#### 2.【M3D 模型层管理类】`CesiumZondy.Layer.M3DLayer` + +##### 【method】`append(url, options)`：添加 M3D 地图文档服务 + +| 参数名 | 类 型 | 说 明 | +| ------- | ------ | ------------ | +| url | String | 文档服务地址 | +| options | Object | 附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ----------------------- | ------------ | ------------ | -------------------------------------------------------------------------------------------------- | +| autoReset | Boolean | true | （可选）是否自动定位 | +| synchronous | Boolean | true | （可选）是否异步请求 | +| loaded | Boolean | function | （可选）回调函数 | +| proxy | DefaultProxy | defaultProxy | （可选）代理 | +| showBoundingVolume | Boolean | false | （可选）是否显示包围盒 | +| maximumScreenSpaceError | Number | 16 | （可选）用于控制模型显示细节，值较大将会渲染更少的贴图，进而可以提高性能，而较低的值将提高视觉质量 | + +## M3D 模型示例 + +> M3D 的加载代码相对比较简单，如下所示 + +- Example: + ```javascript + m3dlayer = webGlobe.append('http://192.168.10.186:6163/igs/rest/g3d/福田钻孔', {}) + ``` + +## 地下模式 + +地下模式的核心是`关闭天空盒`以及改变透明度以及调整光线角度，同时针对特定模型进行`沉降操作`已达到对应的地下效果。 + +- Example: + ```javascript + webGlobe.viewer.imageryLayers.removeAll() + webGlobe.viewer.scene.skyAtmosphere.show = false + webGlobe.viewer.scene.globe.enableTransparent = true + webGlobe.viewer.scene.globe.baseColor = new Cesium.Color(1, 1, 1, 0.001) + ``` + +## 加载完毕后的回调 + +- Example: + ```javascript + m3dlayer = webGlobe.append('http://192.168.10.186:6163/igs/rest/g3d/福田钻孔', { + loaded: function(layer) { + // 加载完毕后执行业务逻辑 + }, + }) + ``` + +## 图层的属性 + +M3D 的图层属性保持 Cesium 的 3DTIle 一致 +[Cesium3DTileset](https://cesium.com/docs/cesiumjs-ref-doc/Cesium3DTileset.html?classFilter=3Dtile) + +- Example: + + ```javascript + { + url: { type: String, required: true }, + show: { typs: Boolean, default: true }, + + /** + * @type Cesium.Matrix4 + * @default Matrix4.IDENTITY + */ + /* modelMatrix: { typs: Object, default: undefined }, */ + /** + * @type Cesium.ShadowMode + * @default ShadowMode.ENABLED + */ + /* shadows: { type: Object, default: undefined }, */ + + maximumScreenSpaceError: { type: Number, default: 16 }, + maximumMemoryUsage: { type: Number, default: 512 }, + + cullWithChildrenBounds: { typs: Boolean, default: true }, + cullRequestsWhileMoving: { typs: Boolean, default: true }, + cullRequestsWhileMovingMultiplier: { type: Number, default: 60.0 }, + + preloadWhenHidden: { typs: Boolean, default: false }, + preloadFlightDestinations: { typs: Boolean, default: true }, + preferLeaves: { typs: Boolean, default: false }, + + dynamicScreenSpaceError: { typs: Boolean, default: false }, + dynamicScreenSpaceErrorDensity: { type: Number, default: 0.00278 }, + dynamicScreenSpaceErrorFactor: { type: Number, default: 4.0 }, + dynamicScreenSpaceErrorHeightFalloff: { type: Number, default: 0.25 }, + + progressiveResolutionHeightFraction: { type: Number, default: 0.3 }, + + foveatedScreenSpaceError: { typs: Boolean, default: true }, + foveatedConeSize: { type: Number, default: 0.1 }, + foveatedMinimumScreenSpaceErrorRelaxation: { type: Number, default: 0.0 }, + /** + * @type Cesium3DTileset~foveatedInterpolationCallback + * @default Cesium.Math.lerp + */ + /* foveatedInterpolationCallback: { type: Function, default: undefined }, */ + foveatedTimeDelay: { type: Number, default: 0.2 }, + + skipLevelOfDetail: { typs: Boolean, default: false }, + baseScreenSpaceError: { type: Number, default: 1024 }, + skipScreenSpaceErrorFactor: { type: Number, default: 16 }, + skipLevels: { type: Number, default: 1 }, + + immediatelyLoadDesiredLevelOfDetail: { typs: Boolean, default: false }, + loadSiblings: { typs: Boolean, default: false }, + + /** + * @type Cesium.ClippingPlaneCollection + */ + /* clippingPlanes: { typs: Object, default: undefined }, */ + /** + * @type Cesium.ClassificationType + */ + /* classificationType: { typs: Object, default: undefined }, */ + /** + * @type Cesium.Ellipsoid + * @default Ellipsoid.WGS84 + */ + /* ellipsoid: { typs: Object, default: undefined }, */ + + /* pointCloudShading: { typs: Object, default: undefined }, */ + /** + * @type Cartesian2 + * @default new Cartesian2(1.0, 1.0) + */ + /* imageBasedLightingFactor: { typs: Object, default: undefined }, */ + /** + * @type Cartesian3 + */ + /* lightColor: { typs: Object, default: undefined }, */ + luminanceAtZenith: { type: Number, default: 0.2 }, + /** + * @type Array. + */ + /* sphericalHarmonicCoefficients: { type: Array, default: undefined }, */ + specularEnvironmentMaps: { type: String, default: "" }, + + debugHeatmapTilePropertyName: { type: String, default: "" }, + debugFreezeFrame: { typs: Boolean, default: false }, + debugColorizeTiles: { typs: Boolean, default: false }, + debugWireframe: { typs: Boolean, default: false }, + debugShowBoundingVolume: { typs: Boolean, default: false }, + debugShowContentBoundingVolume: { typs: Boolean, default: false }, + debugShowViewerRequestVolume: { typs: Boolean, default: false }, + debugShowGeometricError: { typs: Boolean, default: false }, + debugShowRenderingStatistics: { typs: Boolean, default: false }, + debugShowMemoryUsage: { typs: Boolean, default: false }, + debugShowUrl: { typs: Boolean, default: false } + } + ``` + +## 动态剖切原理 + +    将要切割的图层按照某一个切割面，进行切割，设置一个定时器不同的收缩切割面的距离，已达到动态切割的效果！ + +1. 创建某个轴的切割面，本例是 Y 轴： + +- Example: + ```javascript + var g_planeDiziti = new Cesium.ClippingPlane(new Cesium.Cartesian3(0.0, 1.0, 0.0), -200.0) + ``` + +2. 获取地质体的图层并绑定切割面 + +- Example: + ```javascript + assiselayer[0].clippingPlanes = new Cesium.ClippingPlaneCollection({ + modelMatrix: assiselayer[0].modelMatrix, + planes: [g_planeDiziti], + enabled: true, + }) + ``` + +3. 如果存在地形图层，则针对相机进行全局的地形图层的切割处理 + +- Example: + ```javascript + var g_planeTerTile = new Cesium.ClippingPlane(new Cesium.Cartesian3(0.0, 1.0, 0.0), -200.0) + webGlobe.scene.globe.clippingPlanes = new Cesium.ClippingPlaneCollection({ + modelMatrix: Cesium.Transforms.eastNorthUpToFixedFrame(transformCenter), + planes: [g_planeTerTile], + enabled: true, + }) + ``` + +4. 设置起始的切面距离，这里的距离根据业务，采取三角测量可以测出对应的距离 + +- Example: + ```javascript + var curDis = 10 + // 定时器回调函数 --- 动态的改变切割面的距离 + function cutLayer(index) { + let distance = -1 * index * 20 + g_planeTerTile.distance = distance + g_planeDiziti.distance = distance + } + ``` diff --git a/website/public/static/demo/military/markdown/m3d/m3d-geobody.md b/website/public/static/demo/military/markdown/m3d/m3d-geobody.md new file mode 100644 index 000000000..a327859de --- /dev/null +++ b/website/public/static/demo/military/markdown/m3d/m3d-geobody.md @@ -0,0 +1,87 @@ +## 加载 M3D 地质体模型 + +### 示例功能 + +    本示例实现在三维场景中加载 M3D 地质体模型，对接 MapGIS IGServer 发布的三维地图服务。 + +### M3D——全新的轻量级三维数据交换格式 + +    M3D，是 MapGIS 定义的针对多端应用的轻量级三维数据交换格式，对海量三维数据进行网格划分与分层组织，采用流式传输模式，实现多端一体的高效解析和渲染。具备高效网络传输模式、多级 LOD 模型支持、WebGL 无缝融合等优点。可以将多样类型、多种格式的三维数据通过 M3D 数据交换格式进行高效解析并渲染，能够支持的数据类型包括：精细模型（景观模型、BIM 模型）、实景三维（倾斜摄影、地质体、管线）、点云（激光点云 las 等）、其他（栅格、地形、矢量、瓦片）等。 + +### 示例实现 + +    数据准备：本示例采用的数据经过两个步骤生成，首先需在 MapGIS Desktop 桌面平台软件中为地质体模型数据生成 M3D 缓存，并组织为地图文档；然后在 MapGIS Server Manager 服务管理器中根据地图文档发布为三维地图服务。 + +    本示例需要使用【include-cesium-local.js】开发库实现，关键接口为`CesiumZondy.Layer.M3DLayer`类提供的`append()`方法，以此来加载 M3D 缓存的三维地图服务。 + +> 开发库使用请参见*首页-概述-原生 JS 调用*内容。 + +### 实现步骤 + +**Step 1. 引用开发库**： +    本示例引用 local 本地【include-cesium-local.js】开发库，完成此步骤后才可调用三维 WebGL 的功能； + +**Step 2. 创建布局**： +    创建`id='GlobeView'`的 div 作为三维视图的容器，并设置其样式； + +**Step 3. 构造三维场景控件**： +    实例化`Cesium.WebSceneControl`对象，完成此步骤后可在三维场景中加载三维球控件； + +- Example: + ```javascript + //构造三维视图对象（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', {}) + ``` + +**Step 4. 加载数据**: +    加载数据：构造`CesiumZondy.Layer.M3DLayer`M3D 图层管理对象，调用`append()`方法，传入 M3D 缓存三维地图服务的 URL 地址即可加载浏览数据，同时可传入相关配置参数。 + +- Example: + ```javascript + //构造M3D模型层管理对象（视图） + var m3dLayer = new CesiumZondy.Layer.M3DLayer({ + viewer: webGlobe.viewer, + }) + //加载M3D地图文档（服务地址，配置参数） + var obliqueLayer = m3dLayer.append('http://develop.smaryun.com:6163/igs/rest/g3d/钻孔分层点_Sur_000_Ent', {}) + ``` + +### 关键接口 + +#### 1.【三维场景控件类】`Cesium.WebSceneControl(elementId, options)` + +| 参数名 | 类 型 | 说 明 | +| --------- | ----------------- | ----------------- | +| elementId | Element \| String | 放置视图的div的id | +| options | Object | （可选）附加属性 | + +* `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ---------------- | ------- | -------- | ------------------------------------------------------------ | +| viewerMode | String | ‘3D’ | （可选）初始视图模式默认为三维球视图 '2D'表示二维视图 'COLUMBUS_VIEW' 表示三维平面视图 | +| showInfo | Boolean | false | （可选）是否显示默认的属性信息框 | +| animation | Boolean | true | （可选）默认动画控制不显示 | +| baseLayerPicker | Boolean | true | （可选）是否创建图层控制显示小组件 | +| fullscreenButton | Boolean | true | （可选）是否创建全屏控制按钮 | +| vrButton | Boolean | false | （可选）是否创建VR按钮 | + +#### 2.【M3D 模型层管理类】`CesiumZondy.Layer.M3DLayer` + +##### 【method】`append(url, options)`：添加 M3D 地图文档服务 + +| 参数名 | 类 型 | 说 明 | +| ------- | ------ | ------------ | +| url | String | 文档服务地址 | +| options | Object | 附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ----------------------- | ------------ | ------------ | -------------------------------------------------------------------------------------------------- | +| autoReset | Boolean | true | （可选）是否自动定位 | +| synchronous | Boolean | true | （可选）是否异步请求 | +| loaded | Boolean | function | （可选）回调函数 | +| proxy | DefaultProxy | defaultProxy | （可选）代理 | +| showBoundingVolume | Boolean | false | （可选）是否显示包围盒 | +| maximumScreenSpaceError | Number | 16 | （可选）用于控制模型显示细节，值较大将会渲染更少的贴图，进而可以提高性能，而较低的值将提高视觉质量 | diff --git a/website/public/static/demo/military/markdown/m3d/m3d-geobodygrid.md b/website/public/static/demo/military/markdown/m3d/m3d-geobodygrid.md new file mode 100644 index 000000000..45f1e18f6 --- /dev/null +++ b/website/public/static/demo/military/markdown/m3d/m3d-geobodygrid.md @@ -0,0 +1,89 @@ +## 加载 M3D 地质体网格 + +### 示例功能 + +    本示例实现在三维场景中加载 M3D 地质体网格数据，对接 MapGIS IGServer 发布的三维地图服务。 + +### M3D——全新的轻量级三维数据交换格式 + +    M3D，是 MapGIS 定义的针对多端应用的轻量级三维数据交换格式，对海量三维数据进行网格划分与分层组织，采用流式传输模式，实现多端一体的高效解析和渲染。具备高效网络传输模式、多级 LOD 模型支持、WebGL 无缝融合等优点。可以将多样类型、多种格式的三维数据通过 M3D 数据交换格式进行高效解析并渲染，能够支持的数据类型包括：精细模型（景观模型、BIM 模型）、实景三维（倾斜摄影、地质体、管线）、点云（激光点云 las 等）、其他（栅格、地形、矢量、瓦片）等。 + +### 示例实现 + +    数据准备：本示例采用的数据经过两个步骤生成，首先需在 MapGIS Desktop 桌面平台软件中为地质体网格数据生成 M3D 缓存，并组织为地图文档；然后在 MapGIS Server Manager 服务管理器中根据地图文档发布为三维地图服务。 + +    本示例需要使用【include-cesium-local.js】开发库实现，关键接口为`CesiumZondy.Layer.M3DLayer`类提供的`append()`方法，以此来加载 M3D 缓存的三维地图服务。 + +> 开发库使用请参见*首页-概述-原生 JS 调用*内容。 + +### 实现步骤 + +**Step 1. 引用开发库**： +    本示例引用 local 本地【include-cesium-local.js】开发库，完成此步骤后才可调用三维 WebGL 的功能； + +**Step 2. 创建布局**： +    创建`id='GlobeView'`的 div 作为三维视图的容器，并设置其样式； + +**Step 3. 构造三维场景控件**： +    实例化`Cesium.WebSceneControl`对象，完成此步骤后可在三维场景中加载三维球控件； + +- Example: + ```javascript + //构造三维视图对象（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', {}) + ``` + +**Step 4. 加载数据**: +    加载数据：构造`CesiumZondy.Layer.M3DLayer`M3D 图层管理对象，调用`append()`方法，传入 M3D 缓存三维地图服务的 URL 地址即可加载浏览数据，同时可传入相关配置参数。 + +- Example: + ```javascript + //构造M3D模型层管理对象（视图） + var m3dLayer = new CesiumZondy.Layer.M3DLayer({ + viewer: webGlobe.viewer, + }) + //加载M3D地图文档（服务地址，配置参数） + var obliqueLayer = m3dLayer.append('http://develop.smaryun.com:6163/igs/rest/g3d/地质体网格2', {}) + ``` + +### 关键接口 + +#### 1.【三维场景控件类】`Cesium.WebSceneControl(elementId, options)` + +| 参数名 | 类 型 | 说 明 | +| --------- | ----------------- | -------------------- | +| elementId | Element \| String | 放置视图的 div 的 id | +| options | Object | （可选）附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ---------------- | ------- | ------ | -------------------------------------------------------------------------------------- | +| viewerMode | String | ‘3D’ | （可选）初始视图模式默认为三维球视图 '2D'表示二维视图 'COLUMBUS_VIEW' 表示三维平面视图 | +| showInfo | Boolean | false | （可选）是否显示默认的属性信息框 | +| animation | Boolean | true | （可选）默认动画控制不显示 | +| baseLayerPicker | Boolean | true | （可选）是否创建图层控制显示小组件 | +| fullscreenButton | Boolean | true | （可选）是否创建全屏控制按钮 | +| vrButton | Boolean | false | （可选）是否创建 VR 按钮 | + +#### 2.【M3D 模型层管理类】`CesiumZondy.Layer.M3DLayer` + +##### 【method】`append(url, options)`：添加 M3D 地图文档服务 + +- `append`方法主要参数 + +| 参数名 | 类 型 | 说 明 | +| ------- | ------ | ------------ | +| url | String | 文档服务地址 | +| options | Object | 附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ----------------------- | ------------ | ------------ | -------------------------------------------------------------------------------------------------- | +| autoReset | Boolean | true | （可选）是否自动定位 | +| synchronous | Boolean | true | （可选）是否异步请求 | +| loaded | Boolean | function | （可选）回调函数 | +| proxy | DefaultProxy | defaultProxy | （可选）代理 | +| showBoundingVolume | Boolean | false | （可选）是否显示包围盒 | +| maximumScreenSpaceError | Number | 16 | （可选）用于控制模型显示细节，值较大将会渲染更少的贴图，进而可以提高性能，而较低的值将提高视觉质量 | diff --git a/website/public/static/demo/military/markdown/m3d/m3d-landscape.md b/website/public/static/demo/military/markdown/m3d/m3d-landscape.md new file mode 100644 index 000000000..c153b2e15 --- /dev/null +++ b/website/public/static/demo/military/markdown/m3d/m3d-landscape.md @@ -0,0 +1,153 @@ +## 加载M3D景观模型 + +### 示例功能 + +    本示例实现在三维场景中加载M3D景观模型，对接MapGIS IGServer发布的三维地图服务。 + +### M3D——全新的轻量级三维数据交换格式 + +    M3D，是MapGIS定义的针对多端应用的轻量级三维数据交换格式，对海量三维数据进行网格划分与分层组织，采用流式传输模式，实现多端一体的高效解析和渲染。具备高效网络传输模式、多级LOD模型支持、WebGL无缝融合等优点。可以将多样类型、多种格式的三维数据通过M3D数据交换格式进行高效解析并渲染，能够支持的数据类型包括：精细模型（景观模型、BIM模型）、实景三维（倾斜摄影、地质体、管线）、点云（激光点云las等）、其他（栅格、地形、矢量、瓦片）等。 + +### 示例实现 + +    数据准备：本示例采用的数据经过两个步骤生成，首先需在MapGIS Desktop桌面平台软件中为景观模型数据生成M3D缓存，并组织为地图文档；然后在MapGIS Server Manager服务管理器中根据地图文档发布为三维地图服务。 + +    本示例需要使用【include-cesium-local.js】开发库实现，关键接口为`CesiumZondy.Layer.M3DLayer`类提供的`append()`方法，以此来加载M3D缓存的三维地图服务。 + +> 开发库使用请参见*首页-概述-调用方式*。 + +### 实现步骤 + +**Step 1. 引用开发库**： +    本示例引用local本地【include-cesium-local.js】开发库，完成此步骤后才可调用三维WebGL的功能； + +**Step 2. 创建布局**： +    创建`id='GlobeView'`的div作为三维视图的容器，并设置其样式； + +**Step 3. 构造三维场景控件**： +    实例化`Cesium.WebSceneControl`对象，完成此步骤后可在三维场景中加载三维球控件； + +* Example: + ``` javascript + //构造三维视图对象（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', {}); + ``` + +**Step 4. 创建并设置鼠标位置显示控件**： +    要展示鼠标当前位置的经纬度、高程、视角高度信息，首先需要创建`id="coordinate_location"`的label标签作为容器；然后构造`CesiumZondy.Manager.SceneManager`视图功能管理对象，并调用`showPosition()`方法为三维场景控件设置鼠标位置信息显示控件； + +* Example: + ``` javascript + //构造视图功能管理对象（视图） + var sceneManager = new CesiumZondy.Manager.SceneManager({ + viewer: webGlobe.viewer + }); + //设置鼠标位置信息展示控件：经纬度、高程、视角高度（容器id） + sceneManager.showPosition('coordinate_location'); + ``` + +**Step 5. 加载数据**： +    构造`CesiumZondy.Layer.M3DLayer`M3D图层管理对象，调用`append()`方法，传入M3D缓存三维地图服务的URL地址即可加载浏览数据，同时可传入相关配置参数； + +* Example: + ``` javascript + //构造M3D模型层管理对象（视图） + var m3dLayer = new CesiumZondy.Layer.M3DLayer({ + viewer: webGlobe.viewer + }); + //加载M3D地图文档（服务地址，配置参数） + var landscapeLayer = m3dLayer.append('http://develop.smaryun.com:6163/igs/rest/g3d/ZondyModels', { + //是否自动定位到数据位置 + autoReset: false, + //模型细节显示控制参数：较大值可提高渲染性能，较低值可提高视觉质量 + maximumScreenSpaceError: 8 + }); + ``` + +    加载数据默认会自动跳转定位到数据所在位置，如果需要自定义设置跳转的位置，可在`append()`方法中设置`autoReset: false`参数，取消自动定位，然后调用`SceneManager`视图功能管理对象的`flyToEx()`方法跳转视角。 + +* Example: + ``` javascript + //视点跳转（经度，纬度，视角高度，方位角，俯仰角，翻滚角） + sceneManager.flyToEx(114.40298522106733, 30.465568703723072, { + height: 100.85856618500283, + heading: -45.4940479913348135, + pitch: -15, + roll: 0 + }); + ``` + +### 关键接口 + +#### 1.【三维场景控件类】`Cesium.WebSceneControl(elementId, options)` + +| 参数名 | 类 型 | 说 明 | +| --------- | ----------------- | ----------------- | +| elementId | Element \| String | 放置视图的div的id | +| options | Object | （可选）附加属性 | + +* `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ---------------- | ------- | -------- | ------------------------------------------------------------ | +| viewerMode | String | ‘3D’ | （可选）初始视图模式默认为三维球视图 '2D'表示二维视图 'COLUMBUS_VIEW' 表示三维平面视图 | +| showInfo | Boolean | false | （可选）是否显示默认的属性信息框 | +| animation | Boolean | true | （可选）默认动画控制不显示 | +| baseLayerPicker | Boolean | true | （可选）是否创建图层控制显示小组件 | +| fullscreenButton | Boolean | true | （可选）是否创建全屏控制按钮 | +| vrButton | Boolean | false | （可选）是否创建VR按钮 | + +#### 2.【M3D模型层管理类】`CesiumZondy.Layer.M3DLayer` + +##### 【method】`append(url, options)`：添加M3D地图文档服务 + +| 参数名 | 类 型 | 说 明 | +| ------- | ------------ | -------- | +| url | String | 文档服务地址 | +| options | Object | 附加属性 | + +* `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ----------- | ------- | -------- | --------------------- | +| autoReset | Boolean | true | （可选）是否自动定位 | +| synchronous | Boolean | true | （可选）是否异步请求 | +| loaded | Boolean | function | （可选）回调函数 | +|proxy| DefaultProxy |defaultProxy |（可选）代理| +|showBoundingVolume| Boolean |false |（可选）是否显示包围盒| +|maximumScreenSpaceError |Number |16|（可选）用于控制模型显示细节，值较大将会渲染更少的贴图，进而可以提高性能，而较低的值将提高视觉质量| + +#### 3.【视图功能管理类】`CesiumZondy.Manager.SceneManager` + +##### 【method】`showPosition(elementId, options)`：显示经纬度 高程 视角高度 + +| 参数名 | 类 型 | 说 明 | +| --------- | ----------------- | --------------- | +| elementId | Element \| String | 要显示的div的id | +| options | Object | 附加属性 | + +* `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ------------------ | ------- | ------ | ---------------------------------------- | +| showHpr | Boolean | false | （可选） | +| showSelectTileInfo | Boolean | false | （可选）显示当前鼠标所在位置拾取到的级别 | +| showViewLevelInfo | Boolean | false | （可选）显示视图级别 | + +##### 【method】`flyToEx(lon, lon, options)`：跳转到 + +|参数名 |类型 |说明 | +|--|--|--| +|lon| Number |经度| +|lon| Number |纬度| +|options| Object |（可选）附加属性| + +* `options`属性主要参数 + +|参数名 |类型 | 说明 | +|--|--|--| +|height| Number|（可选）视角高度| +|duration |Number|（可选）持续时间| +|heading |Number |（可选）方位角| +|pitch| Number |（可选）俯仰角| +|roll| Number |（可选）翻滚角| diff --git a/website/public/static/demo/military/markdown/m3d/m3d-oblique.md b/website/public/static/demo/military/markdown/m3d/m3d-oblique.md new file mode 100644 index 000000000..9f82e5518 --- /dev/null +++ b/website/public/static/demo/military/markdown/m3d/m3d-oblique.md @@ -0,0 +1,87 @@ +## 加载 M3D 倾斜摄影 + +### 示例功能 + +    本示例实现在三维场景中加载 M3D 倾斜摄影数据，对接 MapGIS IGServer 发布的三维地图服务。 + +### M3D——全新的轻量级三维数据交换格式 + +    M3D，是 MapGIS 定义的针对多端应用的轻量级三维数据交换格式，对海量三维数据进行网格划分与分层组织，采用流式传输模式，实现多端一体的高效解析和渲染。具备高效网络传输模式、多级 LOD 模型支持、WebGL 无缝融合等优点。可以将多样类型、多种格式的三维数据通过 M3D 数据交换格式进行高效解析并渲染，能够支持的数据类型包括：精细模型（景观模型、BIM 模型）、实景三维（倾斜摄影、地质体、管线）、点云（激光点云 las 等）、其他（栅格、地形、矢量、瓦片）等。 + +### 示例实现 + +    数据准备：本示例采用的数据经过两个步骤生成，首先需在 MapGIS Desktop 桌面平台软件中为倾斜摄影数据生成 M3D 缓存，并组织为地图文档；然后在 MapGIS Server Manager 服务管理器中根据地图文档发布为三维地图服务。 + +    本示例需要使用【include-cesium-local.js】开发库实现，关键接口为`CesiumZondy.Layer.M3DLayer`类提供的`append()`方法，以此来加载 M3D 缓存的三维地图服务。 + +> 开发库使用请参见*首页-概述-原生 JS 调用*内容。 + +### 实现步骤 + +**Step 1. 引用开发库**： +    本示例引用 local 本地【include-cesium-local.js】开发库，完成此步骤后才可调用三维 WebGL 的功能； + +**Step 2. 创建布局**： +    创建`id='GlobeView'`的 div 作为三维视图的容器，并设置其样式； + +**Step 3. 构造三维场景控件**： +    实例化`Cesium.WebSceneControl`对象，完成此步骤后可在三维场景中加载三维球控件； + +- Example: + ```javascript + //构造三维视图对象（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', {}) + ``` + +**Step 4. 加载数据**: +    加载数据：构造`CesiumZondy.Layer.M3DLayer`M3D 图层管理对象，调用`append()`方法，传入 M3D 缓存三维地图服务的 URL 地址即可加载浏览数据，同时可传入相关配置参数。 + +- Example: + ```javascript + //构造M3D模型层管理对象（视图） + var m3dLayer = new CesiumZondy.Layer.M3DLayer({ + viewer: webGlobe.viewer, + }) + //加载M3D地图文档（服务地址，配置参数） + obliqueLayer = m3dLayer.append('http://develop.smaryun.com:6163/igs/rest/g3d/DaYanTa', {}) + ``` + +### 关键接口 + +#### 1.【三维场景控件类】`Cesium.WebSceneControl(elementId, options)` + +| 参数名 | 类 型 | 说 明 | +| --------- | ----------------- | -------------------- | +| elementId | Element \| String | 放置视图的 div 的 id | +| options | Object | （可选）附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ---------------- | ------- | ------ | -------------------------------------------------------------------------------------- | +| viewerMode | String | ‘3D’ | （可选）初始视图模式默认为三维球视图 '2D'表示二维视图 'COLUMBUS_VIEW' 表示三维平面视图 | +| showInfo | Boolean | false | （可选）是否显示默认的属性信息框 | +| animation | Boolean | true | （可选）默认动画控制不显示 | +| baseLayerPicker | Boolean | true | （可选）是否创建图层控制显示小组件 | +| fullscreenButton | Boolean | true | （可选）是否创建全屏控制按钮 | +| vrButton | Boolean | false | （可选）是否创建 VR 按钮 | + +#### 2.【M3D 模型层管理类】`CesiumZondy.Layer.M3DLayer` + +##### 【method】`append(url, options)`：添加 M3D 地图文档服务 + +| 参数名 | 类 型 | 说 明 | +| ------- | ------ | ------------ | +| url | String | 文档服务地址 | +| options | Object | 附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ----------------------- | ------------ | ------------ | -------------------------------------------------------------------------------------------------- | +| autoReset | Boolean | true | （可选）是否自动定位 | +| synchronous | Boolean | true | （可选）是否异步请求 | +| loaded | Boolean | function | （可选）回调函数 | +| proxy | DefaultProxy | defaultProxy | （可选）代理 | +| showBoundingVolume | Boolean | false | （可选）是否显示包围盒 | +| maximumScreenSpaceError | Number | 16 | （可选）用于控制模型显示细节，值较大将会渲染更少的贴图，进而可以提高性能，而较低的值将提高视觉质量 | diff --git a/website/public/static/demo/military/markdown/m3d/m3d-pointcloud.md b/website/public/static/demo/military/markdown/m3d/m3d-pointcloud.md new file mode 100644 index 000000000..d513780e7 --- /dev/null +++ b/website/public/static/demo/military/markdown/m3d/m3d-pointcloud.md @@ -0,0 +1,87 @@ +## 加载 M3D 点云数据 + +### 示例功能 + +    本示例实现在三维场景中加载 M3D 点云数据，对接 MapGIS IGServer 发布的三维地图服务。 + +### M3D——全新的轻量级三维数据交换格式 + +    M3D，是 MapGIS 定义的针对多端应用的轻量级三维数据交换格式，对海量三维数据进行网格划分与分层组织，采用流式传输模式，实现多端一体的高效解析和渲染。具备高效网络传输模式、多级 LOD 模型支持、WebGL 无缝融合等优点。可以将多样类型、多种格式的三维数据通过 M3D 数据交换格式进行高效解析并渲染，能够支持的数据类型包括：精细模型（景观模型、BIM 模型）、实景三维（倾斜摄影、地质体、管线）、点云（激光点云 las 等）、其他（栅格、地形、矢量、瓦片）等。 + +### 示例实现 + +    数据准备：本示例采用的数据经过两个步骤生成，首先需在 MapGIS Desktop 桌面平台软件中为点云数据生成 M3D 缓存，并组织为地图文档；然后在 MapGIS Server Manager 服务管理器中根据地图文档发布为三维地图服务。 + +    本示例需要使用【include-cesium-local.js】开发库实现，关键接口为`CesiumZondy.Layer.M3DLayer`类提供的`append()`方法，以此来加载 M3D 缓存的三维地图服务。 + +> 开发库使用请参见*首页-概述-原生 JS 调用*内容。 + +### 实现步骤 + +**Step 1. 引用开发库**： +    本示例引用 local 本地【include-cesium-local.js】开发库，完成此步骤后才可调用三维 WebGL 的功能； + +**Step 2. 创建布局**： +    创建`id='GlobeView'`的 div 作为三维视图的容器，并设置其样式； + +**Step 3. 构造三维场景控件**： +    实例化`Cesium.WebSceneControl`对象，完成此步骤后可在三维场景中加载三维球控件； + +- Example: + ```javascript + //构造三维视图对象（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', {}) + ``` + +**Step 4. 加载数据**: +    加载数据：构造`CesiumZondy.Layer.M3DLayer`M3D 图层管理对象，调用`append()`方法，传入 M3D 缓存三维地图服务的 URL 地址即可加载浏览数据，同时可传入相关配置参数。 + +- Example: + ```javascript + //构造M3D模型层管理对象（视图） + var m3dLayer = new CesiumZondy.Layer.M3DLayer({ + viewer: webGlobe.viewer, + }) + //加载M3D地图文档（服务地址，配置参数） + var pointcloudLayer = m3dLayer.append('http://develop.smaryun.com:6163/igs/rest/g3d/PointCloud', {}) + ``` + +### 关键接口 + +#### 1.【三维场景控件类】`Cesium.WebSceneControl(elementId, options)` + +| 参数名 | 类 型 | 说 明 | +| --------- | ----------------- | -------------------- | +| elementId | Element \| String | 放置视图的 div 的 id | +| options | Object | （可选）附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ---------------- | ------- | ------ | -------------------------------------------------------------------------------------- | +| viewerMode | String | ‘3D’ | （可选）初始视图模式默认为三维球视图 '2D'表示二维视图 'COLUMBUS_VIEW' 表示三维平面视图 | +| showInfo | Boolean | false | （可选）是否显示默认的属性信息框 | +| animation | Boolean | true | （可选）默认动画控制不显示 | +| baseLayerPicker | Boolean | true | （可选）是否创建图层控制显示小组件 | +| fullscreenButton | Boolean | true | （可选）是否创建全屏控制按钮 | +| vrButton | Boolean | false | （可选）是否创建 VR 按钮 | + +#### 2.【M3D 模型层管理类】`CesiumZondy.Layer.M3DLayer` + +##### 【method】`append(url, options)`：添加 M3D 地图文档服务 + +| 参数名 | 类 型 | 说 明 | +| ------- | ------ | ------------ | +| url | String | 文档服务地址 | +| options | Object | 附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ----------------------- | ------------ | ------------ | -------------------------------------------------------------------------------------------------- | +| autoReset | Boolean | true | （可选）是否自动定位 | +| synchronous | Boolean | true | （可选）是否异步请求 | +| loaded | Boolean | function | （可选）回调函数 | +| proxy | DefaultProxy | defaultProxy | （可选）代理 | +| showBoundingVolume | Boolean | false | （可选）是否显示包围盒 | +| maximumScreenSpaceError | Number | 16 | （可选）用于控制模型显示细节，值较大将会渲染更少的贴图，进而可以提高性能，而较低的值将提高视觉质量 | diff --git a/website/public/static/demo/military/markdown/m3d/m3d-roughmodel.md b/website/public/static/demo/military/markdown/m3d/m3d-roughmodel.md new file mode 100644 index 000000000..fddbadfcb --- /dev/null +++ b/website/public/static/demo/military/markdown/m3d/m3d-roughmodel.md @@ -0,0 +1,90 @@ +## 加载 M3D 建筑粗模 + +### 示例功能 + +    本示例实现在三维场景中加载 M3D 的建筑粗略模型数据，对接 MapGIS IGServer 发布的三维地图服务。 + +### M3D——全新的轻量级三维数据交换格式 + +    M3D，是 MapGIS 定义的针对多端应用的轻量级三维数据交换格式，对海量三维数据进行网格划分与分层组织，采用流式传输模式，实现多端一体的高效解析和渲染。具备高效网络传输模式、多级 LOD 模型支持、WebGL 无缝融合等优点。可以将多样类型、多种格式的三维数据通过 M3D 数据交换格式进行高效解析并渲染，能够支持的数据类型包括：精细模型（景观模型、BIM 模型）、实景三维（倾斜摄影、地质体、管线）、点云（激光点云 las 等）、其他（栅格、地形、矢量、瓦片）等。 + +### 示例实现 + +    数据准备：本示例采用的数据经过两个步骤生成，首先需在 MapGIS Desktop 桌面平台软件中为建筑粗模数据生成 M3D 缓存，并组织为地图文档；然后在 MapGIS Server Manager 服务管理器中根据地图文档发布为三维地图服务。 + +    本示例需要使用【include-cesium-local.js】开发库实现，关键接口为`CesiumZondy.Layer.M3DLayer`类提供的`append()`方法，以此来加载 M3D 缓存的三维地图服务。 + +> 开发库使用请参见*首页-概述-原生 JS 调用*内容。 + +### 实现步骤 + +**Step 1. 引用开发库**： +    本示例引用 local 本地【include-cesium-local.js】开发库，完成此步骤后才可调用三维 WebGL 的功能； + +**Step 2. 创建布局**： +    创建`id='GlobeView'`的 div 作为三维视图的容器，并设置其样式； + +**Step 3. 构造三维场景控件**： +    实例化`Cesium.WebSceneControl`对象，完成此步骤后可在三维场景中加载三维球控件； + +- Example: + ```javascript + //构造三维视图对象（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', {}) + ``` + +**Step 4. 加载数据**: +    加载数据：构造`CesiumZondy.Layer.M3DLayer`M3D 图层管理对象，调用`append()`方法，传入 M3D 缓存三维地图服务的 URL 地址即可加载浏览数据，同时可传入相关配置参数。 + +- Example: + ```javascript + //构造M3D模型层管理对象（视图） + var m3dLayer = new CesiumZondy.Layer.M3DLayer({ + viewer: webGlobe.viewer, + }) + //加载M3D地图文档（服务地址，配置参数） + var bimLayer = m3dLayer.append('http://develop.smaryun.com:6163/igs/rest/g3d/buildings1', { + //模型细节显示控制参数：较大值可提高渲染性能，较低值可提高视觉质量 + maximumScreenSpaceError: 0, + }) + ``` + +### 关键接口 + +#### 1.【三维场景控件类】`Cesium.WebSceneControl(elementId, options)` + +| 参数名 | 类 型 | 说 明 | +| --------- | ----------------- | -------------------- | +| elementId | Element \| String | 放置视图的 div 的 id | +| options | Object | （可选）附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ---------------- | ------- | ------ | -------------------------------------------------------------------------------------- | +| viewerMode | String | ‘3D’ | （可选）初始视图模式默认为三维球视图 '2D'表示二维视图 'COLUMBUS_VIEW' 表示三维平面视图 | +| showInfo | Boolean | false | （可选）是否显示默认的属性信息框 | +| animation | Boolean | true | （可选）默认动画控制不显示 | +| baseLayerPicker | Boolean | true | （可选）是否创建图层控制显示小组件 | +| fullscreenButton | Boolean | true | （可选）是否创建全屏控制按钮 | +| vrButton | Boolean | false | （可选）是否创建 VR 按钮 | + +#### 2.【M3D 模型层管理类】`CesiumZondy.Layer.M3DLayer` + +##### 【method】`append(url, options)`：添加 M3D 地图文档服务 + +| 参数名 | 类 型 | 说 明 | +| ------- | ------ | ------------ | +| url | String | 文档服务地址 | +| options | Object | 附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ----------------------- | ------------ | ------------ | -------------------------------------------------------------------------------------------------- | +| autoReset | Boolean | true | （可选）是否自动定位 | +| synchronous | Boolean | true | （可选）是否异步请求 | +| loaded | Boolean | function | （可选）回调函数 | +| proxy | DefaultProxy | defaultProxy | （可选）代理 | +| showBoundingVolume | Boolean | false | （可选）是否显示包围盒 | +| maximumScreenSpaceError | Number | 16 | （可选）用于控制模型显示细节，值较大将会渲染更少的贴图，进而可以提高性能，而较低的值将提高视觉质量 | diff --git a/website/public/static/demo/military/markdown/m3d/m3d-terrain.md b/website/public/static/demo/military/markdown/m3d/m3d-terrain.md new file mode 100644 index 000000000..d5d453892 --- /dev/null +++ b/website/public/static/demo/military/markdown/m3d/m3d-terrain.md @@ -0,0 +1,105 @@ +## 加载M3D地形数据 + +### 示例功能 + +本示例实现在三维场景中加载M3D地形数据，对接MapGIS IGServer发布的三维地图服务。 + +### M3D——全新的轻量级三维数据交换格式 + +M3D，是MapGIS定义的针对多端应用的轻量级三维数据交换格式，对海量三维数据进行网格划分与分层组织，采用流式传输模式，实现多端一体的高效解析和渲染。具备高效网络传输模式、多级LOD模型支持、WebGL无缝融合等优点。可以将多样类型、多种格式的三维数据通过M3D数据交换格式进行高效解析并渲染，能够支持的数据类型包括：精细模型（景观模型、BIM模型）、实景三维（倾斜摄影、地质体、管线）、点云（激光点云las等）、其他（栅格、地形、矢量、瓦片）等。 + +### 示例实现 + +数据准备：本示例采用的数据经过两个步骤生成，首先需在MapGIS Desktop桌面平台软件中为地形数据生成M3D缓存，并组织为地图文档；然后在MapGIS Server Manager服务管理器中根据地图文档发布为三维地图服务。 + +本示例需要使用【include-cesium-local.js】开发库实现，关键接口为`WebSceneControl`类提供的`append()`方法，以此来加载M3D缓存的三维地图服务。 + +> 开发库使用请参见*首页-概述-原生JS调用*内容。 + +### 实现步骤 + +1. 引用开发库：本示例引用local本地【include-cesium-local.js】开发库； + +2. 创建布局：创建`id='GlobeView'`的div作为三维视图的容器，并设置其样式； + +3. 构造三维场景控件：实例化WebSceneControl对象； + + ``` javascript + //构造三维视图类（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', { + terrainExaggeration: 1, + }); + ``` + +4. 加载数据：调用`append()`方法，传入M3D缓存三维地图服务的URL地址即可加载浏览数据，可传入相关配置参数； + + ``` javascript + //添加地图文档 + webGlobe.append('http://develop.smaryun.com:6163/igs/rest/g3d/terrain', {}); + ``` + +5. 鼠标位置显示控件：创建`id="coordinate_location"`的div作为容器，用于显示鼠标当前位置的经纬度、高程、视角高度信息；然后调用`showPosition()`方法为三维场景控件设置鼠标位置显示控件。 + + ``` javascript + //显示鼠标位置控件 + webGlobe.showPosition('coordinate_location'); + ``` + +### 关键接口 + +#### 1.【三维场景控件】WebSceneControl + +##### （1）`new WebSceneControl(elementId, options)`：三维场景控件构造函数 + +> `WebSceneControl`构造函数主要参数 + +| 参数名 | 类 型 | 说 明 | +| --------- | ----------------- | ----------------- | +| elementId | Element \| String | 放置视图的div的id | +| options | Object | （可选）附加属性 | + +> `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ---------------- | ------- | ------ | ------------------------------------------------------------ | +| viewerMode | String | ‘3D’ | （可选）初始视图模式默认为三维球视图 '2D'表示二维视图 'COLUMBUS_VIEW' 表示三维平面视图 | +| showInfo | Boolean | false | （可选）是否显示默认的属性信息框 | +| animation | Boolean | true | （可选）默认动画控制不显示 | +| baseLayerPicker | Boolean | true | （可选）是否创建图层控制显示小组件 | +| fullscreenButton | Boolean | true | （可选）是否创建全屏控制按钮 | +| vrButton | Boolean | false | （可选）是否创建VR按钮 | + +##### （2）`append(url, options, 代理)`：添加地图文档 + +> `append`方法主要参数 + +| 参数名 | 类 型 | 说 明 | +| ------- | ------------ | -------- | +| url | String | 文档地址 | +| options | Object | 附加属性 | +| 代理 | DefaultProxy | 代理 | + +> `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ----------- | ------- | -------- | --------------------- | +| autoReset | Boolean | true | optional 是否自动定位 | +| synchronous | Boolean | true | optional 是否异步请求 | +| loaded | Boolean | function | optional 回调函数 | + +##### （3）`showPosition(elementId, options)`：显示经纬度 高程 视角高度 + +> `showPosition`方法主要参数 + +| 参数名 | 类 型 | 说 明 | +| --------- | ----------------- | --------------- | +| elementId | Element \| String | 要显示的div的id | +| options | Object | 附加属性 | + +> `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ------------------ | ------- | ------ | ---------------------------------------- | +| showHpr | Boolean | false | （可选） | +| showSelectTileInfo | Boolean | false | （可选）显示当前鼠标所在位置拾取到的级别 | +| showViewLevelInfo | Boolean | false | （可选）显示视图级别 | diff --git a/website/public/static/demo/military/markdown/m3d/m3d-underpipe.md b/website/public/static/demo/military/markdown/m3d/m3d-underpipe.md new file mode 100644 index 000000000..2bcc45cf9 --- /dev/null +++ b/website/public/static/demo/military/markdown/m3d/m3d-underpipe.md @@ -0,0 +1,89 @@ +## 加载 M3D 地下管线数据 + +### 示例功能 + +    本示例实现在三维场景中加载 M3D 地下管线数据，对接 MapGIS IGServer 发布的三维地图服务。 + +### M3D——全新的轻量级三维数据交换格式 + +    M3D，是 MapGIS 定义的针对多端应用的轻量级三维数据交换格式，对海量三维数据进行网格划分与分层组织，采用流式传输模式，实现多端一体的高效解析和渲染。具备高效网络传输模式、多级 LOD 模型支持、WebGL 无缝融合等优点。可以将多样类型、多种格式的三维数据通过 M3D 数据交换格式进行高效解析并渲染，能够支持的数据类型包括：精细模型（景观模型、BIM 模型）、实景三维（倾斜摄影、地质体、管线）、点云（激光点云 las 等）、其他（栅格、地形、矢量、瓦片）等。 + +### 示例实现 + +    数据准备：本示例采用的数据经过两个步骤生成，首先需在 MapGIS Desktop 桌面平台软件中为地下管线数据生成 M3D 缓存，并组织为地图文档；然后在 MapGIS Server Manager 服务管理器中根据地图文档发布为三维地图服务。 + +    本示例需要使用【include-cesium-local.js】开发库实现，关键接口为`CesiumZondy.Layer.M3DLayer`类提供的`append()`方法，以此来加载 M3D 缓存的三维地图服务。 + +> 开发库使用请参见*首页-概述-原生 JS 调用*内容。 + +### 实现步骤 + +**Step 1. 引用开发库**： +    本示例引用 local 本地【include-cesium-local.js】开发库，完成此步骤后才可调用三维 WebGL 的功能； + +**Step 2. 创建布局**： +    创建`id='GlobeView'`的 div 作为三维视图的容器，并设置其样式； + +**Step 3. 构造三维场景控件**： +    实例化`Cesium.WebSceneControl`对象，完成此步骤后可在三维场景中加载三维球控件； + +- Example: + ```javascript + //构造三维视图对象（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', {}) + ``` + +**Step 4. 加载数据**: +    加载数据：构造`CesiumZondy.Layer.M3DLayer`M3D 图层管理对象，调用`append()`方法，传入 M3D 缓存三维地图服务的 URL 地址即可加载浏览数据，同时可传入相关配置参数。 + +- Example: + ```javascript + //构造M3D模型层管理对象（视图） + var m3dLayer = new CesiumZondy.Layer.M3DLayer({ + viewer: webGlobe.viewer, + }) + //加载M3D地图文档（服务地址，配置参数） + var obliqueLayer = m3dLayer.append('http://develop.smaryun.com:6163/igs/rest/g3d/UnderPipe', {}) + ``` + +### 关键接口 + +#### 1.【三维场景控件类】`Cesium.WebSceneControl(elementId, options)` + +| 参数名 | 类 型 | 说 明 | +| --------- | ----------------- | -------------------- | +| elementId | Element \| String | 放置视图的 div 的 id | +| options | Object | （可选）附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ---------------- | ------- | ------ | -------------------------------------------------------------------------------------- | +| viewerMode | String | ‘3D’ | （可选）初始视图模式默认为三维球视图 '2D'表示二维视图 'COLUMBUS_VIEW' 表示三维平面视图 | +| showInfo | Boolean | false | （可选）是否显示默认的属性信息框 | +| animation | Boolean | true | （可选）默认动画控制不显示 | +| baseLayerPicker | Boolean | true | （可选）是否创建图层控制显示小组件 | +| fullscreenButton | Boolean | true | （可选）是否创建全屏控制按钮 | +| vrButton | Boolean | false | （可选）是否创建 VR 按钮 | + +#### 2.【M3D 模型层管理类】`CesiumZondy.Layer.M3DLayer` + +##### 【method】`append(url, options)`：添加 M3D 地图文档服务 + +- `append`方法主要参数 + +| 参数名 | 类 型 | 说 明 | +| ------- | ------ | ------------ | +| url | String | 文档服务地址 | +| options | Object | 附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ----------------------- | ------------ | ------------ | -------------------------------------------------------------------------------------------------- | +| autoReset | Boolean | true | （可选）是否自动定位 | +| synchronous | Boolean | true | （可选）是否异步请求 | +| loaded | Boolean | function | （可选）回调函数 | +| proxy | DefaultProxy | defaultProxy | （可选）代理 | +| showBoundingVolume | Boolean | false | （可选）是否显示包围盒 | +| maximumScreenSpaceError | Number | 16 | （可选）用于控制模型显示细节，值较大将会渲染更少的贴图，进而可以提高性能，而较低的值将提高视觉质量 | diff --git a/website/public/static/demo/military/markdown/mapgis/mapgis-2d-doc.md b/website/public/static/demo/military/markdown/mapgis/mapgis-2d-doc.md new file mode 100644 index 000000000..8ca9408cc --- /dev/null +++ b/website/public/static/demo/military/markdown/mapgis/mapgis-2d-doc.md @@ -0,0 +1,82 @@ +## 添加二维地图文档服务 + +### 示例功能 + +    本示例实现在三维场景中加载在线二维地图数据，对接 MapGIS IGServer 发布的二维地图文档服务。 + +### 示例实现 + +    数据准备：需提前在 MapGIS Server Manager 服务管理器中发布二维地图文档服务。 + +    本示例需要使用【include-cesium-local.js】开发库实现，关键接口为`CesiumZondy.Layer.TilesLayer`类提供的`append2DDocTile()`方法，以此来加载 IGServer 二维地图文档服务数据。 + +> 开发库使用请参见*首页-概述-原生 JS 调用*内容。 + +### 实现步骤 + +**Step 1. 引用开发库**： +    本示例引用 local 本地【include-cesium-local.js】开发库，完成此步骤后才可调用三维 WebGL 的功能； + +**Step 2. 创建布局**： +    创建`id='GlobeView'`的 div 作为三维视图的容器，并设置其样式； + +**Step 3. 构造三维场景控件**： +    实例化`Cesium.WebSceneControl`对象，完成此步骤后可在三维场景中加载三维球控件； + +- Example: + ```javascript + //构造三维视图对象（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', {}) + ``` + +**Step 4. 加载数据**: +    加载数据：首先构造`CesiumZondy.Layer.TilesLayer`瓦片图层管理对象，然后调用`append2DDocTile()`方法，传入地图服务的 URL 地址及相关参数，即可加载 IGServer 二维地图文档数据。 + +- Example: + ```javascript + //构造瓦片图层管理对象（视图） + var layer = new CesiumZondy.Layer.TilesLayer({ + viewer: webGlobe.viewer, + }) + //添加MapGIS IGServer发布的二维地图文档服务 + vecDoc = layer.append2DDocTile('http://develop.smaryun.com:6163/igs/rest/mrms/docs/北京市', {}) + ``` + +### 关键接口 + +#### 1.【三维场景控件类】`Cesium.WebSceneControl(elementId, options)` + +| 参数名 | 类 型 | 说 明 | +| --------- | ----------------- | -------------------- | +| elementId | Element \| String | 放置视图的 div 的 id | +| options | Object | （可选）附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ---------------- | ------- | ------ | -------------------------------------------------------------------------------------- | +| viewerMode | String | ‘3D’ | （可选）初始视图模式默认为三维球视图 '2D'表示二维视图 'COLUMBUS_VIEW' 表示三维平面视图 | +| showInfo | Boolean | false | （可选）是否显示默认的属性信息框 | +| animation | Boolean | true | （可选）默认动画控制不显示 | +| baseLayerPicker | Boolean | true | （可选）是否创建图层控制显示小组件 | +| fullscreenButton | Boolean | true | （可选）是否创建全屏控制按钮 | +| vrButton | Boolean | false | （可选）是否创建 VR 按钮 | + +#### 2.【瓦片图层管理类】`CesiumZondy.Layer.TilesLayer` + +##### 【method】`append2DDocTile(url, options)`：加载二维地图文档瓦片 + +| 参数名 | 类 型 | 说 明 | +| ------- | ------ | -------------- | +| url | String | 发布的文档地址 | +| options | Object | 附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ------------------ | --------- | ------ | --------------------------------------------------------- | +| options.tileRange= | Rectangle | 无 | Rectangle.fromDegrees(-180,-90,180,90) 默认范围为全球范围 | +| colNum | Number | 2 | 瓦片初始级的列数 | +| rowNum | Number | 1 | 瓦片初始级的行数 | +| maxLevel | Number | 19 | 瓦片最大显示级数 | +| proxy | String | 无 | 转发代理，不存在跨域可不设置 | diff --git a/website/public/static/demo/military/markdown/mapgis/mapgis-2d-layer.md b/website/public/static/demo/military/markdown/mapgis/mapgis-2d-layer.md new file mode 100644 index 000000000..4e39b2696 --- /dev/null +++ b/website/public/static/demo/military/markdown/mapgis/mapgis-2d-layer.md @@ -0,0 +1,89 @@ +## 添加二维矢量图层服务 + +### 示例功能 + +        本示例实现在三维场景中加载在线二维地图数据，对接 MapGIS 中的矢量图层。 + +### 示例实现 + +        数据准备：需在 MapGIS 桌面端中获取矢量图层 的 url 。 + +        本示例需要使用【include-cesium-local.js】开发库实现，关键接口为 `CesiumZondy. Layer. TilesLayer` 类提供的 `append2DDocTile()` 方法，以此来加载 IGServer 矢量图层服务数据。 + +> 开发库使用请参见*首页-概述-原生 JS 调用*内容。 + +### 实现步骤 + +**Step 1. 引用开发库**： + +        本示例引用 local 本地【include-cesium-local.js】开发库，完成此步骤后才可调用三维 WebGL 的功能； + +**Step 2. 创建布局**： + +        创建 `id='GlobeView'` 的 div 作为三维视图的容器，并设置其样式； + +**Step 3. 构造三维场景控件**： + +        实例化 `Cesium. WebSceneControl` 对象，完成此步骤后可在三维场景中加载三维球控件； + +- Example: + ```JavaScript + //构造三维视图对象（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', {}); + ``` + +**Step 4. 加载数据**: + +        加载数据：首先构造 `CesiumZondy. Layer. TilesLayer` 瓦片图层管理对象，然后调用 `append2DDocTile()` 方法，传入地图服务的 URL 地址及相关参数，即可加载 IGServer 二维矢量地图数据。 + +* Example: + + ```javascript + //构造瓦片图层管理对象（视图） + var layer = new CesiumZondy.Layer.TilesLayer({ + viewer: webGlobe.viewer + }); + //添加MapGIS IGServer发布的二维地图文档服务 + vecDoc = layer.append2DDocTile(`${protocol}://${ip}:${port}/igs/rest/mrms/layers`, { + gdbps: ['GDBP://MapGISLocalPlus/北京市/ds/行政区/sfcls/北京市'] + }); + ``` + +### 关键接口 + +#### 1.【三维场景控件类】 `Cesium. WebSceneControl(elementId, options)` + +| 参数名 | 类 型 | 说 明 | +| --------- | ----------------- | -------------------- | +| elementId | Element \| String | 放置视图的 div 的 id | +| options | Object | （可选）附加属性 | + +* `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ---------------- | ------- | ------ | -------------------------------------------------------------------------------------- | +| viewerMode | String | ‘3D’ | （可选）初始视图模式默认为三维球视图 '2D'表示二维视图 'COLUMBUS_VIEW' 表示三维平面视图 | +| showInfo | Boolean | false | （可选）是否显示默认的属性信息框 | +| animation | Boolean | true | （可选）默认动画控制不显示 | +| baseLayerPicker | Boolean | true | （可选）是否创建图层控制显示小组件 | +| fullscreenButton | Boolean | true | （可选）是否创建全屏控制按钮 | +| vrButton | Boolean | false | （可选）是否创建 VR 按钮 | + +#### 2.【瓦片图层管理类】 `CesiumZondy. Layer. TilesLayer` + +##### 【method】 `append2DDocTile(url, options)` ：加载二维地图文档瓦片 + +| 参数名 | 类 型 | 说 明 | +| ------- | ------ | -------------- | +| url | String | 矢量地图url地址 | +| options | Object | 附加属性 | + +* `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ------------------ | --------- | ------ | ------------------------------------------------------------ | +| options.tileRange= | Rectangle | 无 | Rectangle.fromDegrees(-180, -90, 180, 90) 默认范围为全球范围 | +| colNum | Number | 2 | 瓦片初始级的列数 | +| rowNum | Number | 1 | 瓦片初始级的行数 | +| maxLevel | Number | 19 | 瓦片最大显示级数 | +| proxy | String | 无 | 转发代理，不存在跨域可不设置 | diff --git a/website/public/static/demo/military/markdown/mapgis/mapgis-2d-tile.md b/website/public/static/demo/military/markdown/mapgis/mapgis-2d-tile.md new file mode 100644 index 000000000..8550053f0 --- /dev/null +++ b/website/public/static/demo/military/markdown/mapgis/mapgis-2d-tile.md @@ -0,0 +1,99 @@ +## 加载二维瓦片地图 + +### 示例功能 + +    本示例实现在三维场景中加载在线二维瓦片地图，对接 MapGIS IGServer 发布的二维瓦片地图服务。 + +### 示例实现 + +    数据准备：需提前在 MapGIS Server Manager 服务管理器中发布二维瓦片地图服务。 + +    本示例需要使用【include-cesium-local.js】开发库实现，关键接口为`CesiumZondy.Layer.TilesLayer`类提供的`appendMapGISTile()`方法，以此来加载 IGServer 二维瓦片地图服务数据。 + +> 开发库使用请参见*首页-概述-原生 JS 调用*内容。 + +### 实现步骤 + +**Step 1. 引用开发库**： +    本示例引用 local 本地【include-cesium-local.js】开发库，完成此步骤后才可调用三维 WebGL 的功能； + +**Step 2. 创建布局**： +    创建`id='GlobeView'`的 div 作为三维视图的容器，并设置其样式； + +**Step 3. 构造三维场景控件**： +    实例化`Cesium.WebSceneControl`对象，完成此步骤后可在三维场景中加载三维球控件； + +- Example: + ```javascript + //构造三维视图对象（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', {}) + ``` + +**Step 4. 加载数据**: +    加载数据：首先构造`CesiumZondy.Layer.TilesLayer`瓦片图层管理对象，然后构造图层加载的参数，如范围、瓦片初始级行列数、最大显示级别等信息，可用来指定瓦片显示的范围、最大级别等；然后调用`appendMapGISTile()`方法传入二维瓦片服务地址及参数，即可加载浏览数据。 + +- Example: + ```javascript + //构造瓦片图层管理对象（视图） + var tilelayer = new CesiumZondy.Layer.TilesLayer({ + viewer: webGlobe.viewer, + }) + //参数 + var options = { + tileRang: Cesium.Rectangle.fromDegrees(-180, -90, 180, 90), + //瓦片初始级的列数 默认为2 + colNum: 2, + //瓦片初始级的行数 默认为1 + rowNum: 1, + //瓦片最大显示级数 默认为19 + maxLevel: 19, + //如瓦片裁的不是256,则需设置下面两个参数 + //瓦片宽度 + tileWidth: 256, + //瓦片高度 + tileHeight: 256, + } + //添加MapGIS IGServer发布的二维瓦片服务 + var layer = tilelayer.appendMapGISTile('http://develop.smaryun.com:6163/igs/rest/mrms/tile/北京市', options) + ``` + +### 关键接口 + +#### 1.【三维场景控件类】`Cesium.WebSceneControl(elementId, options)` + +| 参数名 | 类 型 | 说 明 | +| --------- | ----------------- | ----------------- | +| elementId | Element \| String | 放置视图的div的id | +| options | Object | （可选）附加属性 | + +* `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ---------------- | ------- | -------- | ------------------------------------------------------------ | +| viewerMode | String | ‘3D’ | （可选）初始视图模式默认为三维球视图 '2D'表示二维视图 'COLUMBUS_VIEW' 表示三维平面视图 | +| showInfo | Boolean | false | （可选）是否显示默认的属性信息框 | +| animation | Boolean | true | （可选）默认动画控制不显示 | +| baseLayerPicker | Boolean | true | （可选）是否创建图层控制显示小组件 | +| fullscreenButton | Boolean | true | （可选）是否创建全屏控制按钮 | +| vrButton | Boolean | false | （可选）是否创建VR按钮 | + +#### 2.【瓦片图层管理类】`CesiumZondy.Layer.TilesLayer` + +##### 【method】`appendMapGISTile(url, options)`：添加 MapGIS IGSserver 发布的瓦片服务 + +| 参数名 | 类 型 | 说 明 | +| ------- | ------ | ------------ | +| url | String | 瓦片服务地址 | +| options | Object | 附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| --------- | --------- | ------ | --------------------------------------------------------- | +| tileRange | Rectangle | 无 | Rectangle.fromDegrees(-180,-90,180,90) 默认范围为全球范围 | +| colNum | Number | 2 | 瓦片初始级的列数 | +| rowNum | Number | 1 | 瓦片初始级的行数 | +| tileWidth | Number | 256 | 瓦片宽度 | +| tileHeigh | Number | 256 | 瓦片高度 | +| maxLevel | Number | 19 | 瓦片最大显示级数 默认为 19 | +| proxy | String | 无 | 转发代理，不存在跨域可不设置 | diff --git a/website/public/static/demo/military/markdown/mapgis/mapgis-2dtile.md b/website/public/static/demo/military/markdown/mapgis/mapgis-2dtile.md new file mode 100644 index 000000000..a2a3cb5e5 --- /dev/null +++ b/website/public/static/demo/military/markdown/mapgis/mapgis-2dtile.md @@ -0,0 +1,133 @@ +## 加载二维瓦片地图 + +### 示例功能 + +本示例实现在三维场景中加载在线二维瓦片地图，对接MapGIS IGServer发布的二维瓦片地图服务。 + +### 示例实现 + +数据准备：需提前在MapGIS Server Manager服务管理器中发布二维瓦片地图服务。 + +本示例需要使用【include-cesium-local.js】开发库实现，关键接口为`WebSceneControl`类提供的`appendMapGISTile()`方法，以此来加载IGServer二维瓦片地图服务数据。 + +> 开发库使用请参见*首页-概述-原生JS调用*内容。 + +### 实现步骤 + +1. 引用开发库：本示例引用local本地【include-cesium-local.js】开发库； + +2. 创建布局：创建`id='GlobeView'`的div作为三维视图的容器，并设置其样式； + +3. 构造三维场景控件：实例化WebSceneControl对象； + + ``` javascript + //构造三维视图类（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', { + terrainExaggeration: 1, + }); + ``` + +4. 加载数据：首先需构造图层加载的参数，如范围、瓦片初始级行列数、最大显示级别等信息，可用来指定瓦片显示的范围、最大级别等；然后调用`appendMapGISTile()`方法传入二维瓦片服务地址及参数，即可加载浏览数据； + + ``` javascript + //定义图层类 + var tilelayer = undefined; + //添加二维瓦片附加属性 + var options = { + tileRang: Cesium.Rectangle.fromDegrees(-180, -90, 180, 90), + //瓦片初始级的列数 默认为2 + colNum: 2, + //瓦片初始级的行数 默认为1 + rowNum: 1, + //瓦片最大显示级数 默认为19 + maxLevel: 5, + // proxy: '/ZDproxy.ashx',//如不存在跨域可不设置 + //如瓦片裁的不是256,则需设置下面两个参数 + tileWidth: 256, + tileHeight: 256 + }; + //添加MapGIS IGServer发布的瓦片 + tilelayer = webGlobe.appendMapGISTile('http://develop.smaryun.com:6163/igs/rest/mrms/tile/WORLDTILE',options); + ``` + + 叠加后，可以通过`removeImageryLayer`方法移除瓦片图层；此方法也可用于避免重复叠加，将此前叠加的瓦片图层进行移除； + + ``` javascript + //移除瓦片图层 + webGlobe.removeImageryLayer(tilelayer); + ``` + +5. 鼠标位置显示控件：创建`id="coordinate_location"`的div作为容器，用于显示鼠标当前位置的经纬度、高程、视角高度信息；然后调用`showPosition()`方法为三维场景控件设置鼠标位置显示控件。 + + ``` javascript + //显示鼠标位置控件 + webGlobe.showPosition('coordinate_location'); + ``` + +### 关键接口 + +#### 1.【三维场景控件】WebSceneControl + +##### （1）`new WebSceneControl(elementId, options)`：三维场景控件构造函数 + +> `WebSceneControl`构造函数主要参数 + +|参数名|类 型|说 明| +|-|-|-| +|elementId|Element \| String|放置视图的div的id| +|options|Object|（可选）附加属性| + +> `options`属性主要参数 + +|参数名|类 型|默认值|说 明| +|-|-|-|-| +|viewerMode|String|‘3D’|（可选）初始视图模式默认为三维球视图 '2D'表示二维视图 'COLUMBUS_VIEW' 表示三维平面视图| +|showInfo|Boolean|false|（可选）是否显示默认的属性信息框| +|animation|Boolean|true|（可选）默认动画控制不显示| +|baseLayerPicker|Boolean|true|（可选）是否创建图层控制显示小组件| +|fullscreenButton|Boolean|true|（可选）是否创建全屏控制按钮| +|vrButton|Boolean|false|（可选）是否创建VR按钮| + +##### （2）`appendMapGISTile(url, options)`：添加MapGIS发布的瓦片服务 + +> `appendMapGISTile`方法主要参数 + +|参数名|类 型|说 明| +|-|-|-| +|url|String|瓦片服务地址| +|options|Object|附加属性| + +> `options`属性主要参数 + +|参数名|类 型|默认值|说 明| +|-|-|-|-| +|options.tileRange=|Rectangle|无|Rectangle.fromDegrees(-180,-90,180,90) 默认范围为全球范围| +|colNum|Number|2|瓦片初始级的列数 默认为2| +|rowNum|Number|1|瓦片初始级的列数 默认为1| +|maxLevel|Number|19|瓦片最大显示级数 默认为19| +|proxy|String|无|转发代理，不存在跨域可不设置| + +##### （3）`removeImageryLayer(imageryLayer)`：移除瓦片图层 + +> `removeImageryLayer`方法主要参数 + +|参数名|类 型|说 明| +|-|-|-| +|imageryLayer|imageryLayer|图层对象| + +##### （4）`showPosition(elementId, options)`：显示经纬度 高程 视角高度 + +> `showPosition`方法主要参数 + +|参数名|类 型|说 明| +|-|-|-| +|elementId|Element \| String|要显示的div的id| +|options|Object|附加属性| + +> `options`属性主要参数 + +|参数名|类 型|默认值|说 明| +|-|-|-|-| +|showHpr|Boolean|false|（可选） | +|showSelectTileInfo|Boolean|false|（可选）显示当前鼠标所在位置拾取到的级别| +|showViewLevelInfo|Boolean|false|（可选）显示视图级别| diff --git a/website/public/static/demo/military/markdown/mapgis/mapgis-2dvector.md b/website/public/static/demo/military/markdown/mapgis/mapgis-2dvector.md new file mode 100644 index 000000000..802dd8048 --- /dev/null +++ b/website/public/static/demo/military/markdown/mapgis/mapgis-2dvector.md @@ -0,0 +1,118 @@ +## 添加二维矢量地图 + +### 示例功能 + +本示例实现在三维场景中加载在线二维矢量地图，对接MapGIS IGServer发布的二维矢量地图服务。 + +### 示例实现 + +数据准备：需提前在MapGIS Server Manager服务管理器中发布二维矢量地图服务。 + +本示例需要使用【include-cesium-local.js】开发库实现，关键接口为`WebSceneControl`类提供的`append2DDocTile()`方法，以此来加载IGServer二维矢量地图服务数据。 + +> 开发库使用请参见*首页-概述-原生JS调用*内容。 + +### 实现步骤 + +1. 引用开发库：本示例引用local本地【include-cesium-local.js】开发库； + +2. 创建布局：创建`id='GlobeView'`的div作为三维视图的容器，并设置其样式； + +3. 构造三维场景控件：实例化WebSceneControl对象； + + ``` javascript + //构造三维视图类（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', { + terrainExaggeration: 1, + }); + ``` + +4. 加载数据：调用`appendMapGISTile()`方法，传入地图服务的URL地址及参数，即可加载IGServer二维示例地图文档数据； + + ``` javascript + //定义矢量类 + var vecDoc; + var options = { + //默认范围为全球范围 + tileRang: Cesium.Rectangle.fromDegrees(-180, -90, 180, 90), + //瓦片初始级的列数 默认为2 + colNum: 2, + //瓦片初始级的行数 默认为2 + rowNum: 1, + //瓦片最大显示级数 默认为19 + maxLevel: 5, + // proxy: '/ZDproxy.ashx',//如不存在跨域可不设置 + //如瓦片裁的不是256,则需设置下面两个参数 + tileWidth: 256, + tileHeight: 256 + }; + //添加二维矢量地图文档 + vecDoc = webGlobe.append2DDocTile('http://develop.smaryun.com:6163/igs/rest/mrms/docs/WorldJWVector', options); + ``` + +5. 鼠标位置显示控件：创建`id="coordinate_location"`的div作为容器，用于显示鼠标当前位置的经纬度、高程、视角高度信息；然后调用`showPosition()`方法为三维场景控件设置鼠标位置显示控件。 + + ``` javascript + //显示鼠标位置控件 + webGlobe.showPosition('coordinate_location'); + ``` + +### 关键接口 + +#### 1.【三维场景控件】WebSceneControl + +##### （1）`new WebSceneControl(elementId, options)`：三维场景控件构造函数 + +> `WebSceneControl`构造函数主要参数 + +|参数名|类 型|说 明| +|-|-|-| +|elementId|Element \| String|放置视图的div的id| +|options|Object|（可选）附加属性| + +> `options`属性主要参数 + +|参数名|类 型|默认值|说 明| +|-|-|-|-| +|viewerMode|String|‘3D’|（可选）初始视图模式默认为三维球视图 '2D'表示二维视图 'COLUMBUS_VIEW' 表示三维平面视图| +|showInfo|Boolean|false|（可选）是否显示默认的属性信息框| +|animation|Boolean|true|（可选）默认动画控制不显示| +|baseLayerPicker|Boolean|true|（可选）是否创建图层控制显示小组件| +|fullscreenButton|Boolean|true|（可选）是否创建全屏控制按钮| +|vrButton|Boolean|false|（可选）是否创建VR按钮| + +##### （2）`append2DDocTile(url, options)`：加载二维地图文档瓦片 + +> `append2DDocTile`方法主要参数 + +|参数名|类 型|说 明| +|-|-|-| +|url|String|发布的文档地址| +|options|Object|附加属性| + +> `options`属性主要参数 + +|参数名|类 型|默认值|说 明| +|-|-|-|-| +|options.tileRange=|Rectangle|无|Rectangle.fromDegrees(-180,-90,180,90) 默认范围为全球范围| +|colNum|Number|2|瓦片初始级的列数 默认为2| +|rowNum|Number|1|瓦片初始级的列数 默认为1| +|maxLevel|Number|19|瓦片最大显示级数 默认为19| +|proxy|String|无|转发代理，不存在跨域可不设置| + +##### （3）`showPosition(elementId, options)`：显示经纬度 高程 视角高度 + +> `showPosition`方法主要参数 + +|参数名|类 型|说 明| +|-|-|-| +|elementId|Element \| String|要显示的div的id| +|options|Object|附加属性| + +> `options`属性主要参数 + +|参数名|类 型|默认值|说 明| +|-|-|-|-| +|showHpr|Boolean|false|（可选） | +|showSelectTileInfo|Boolean|false|（可选）显示当前鼠标所在位置拾取到的级别| +|showViewLevelInfo|Boolean|false|（可选）显示视图级别| diff --git a/website/public/static/demo/military/markdown/mapgis/mapgis-dem.md b/website/public/static/demo/military/markdown/mapgis/mapgis-dem.md new file mode 100644 index 000000000..e1ee6e603 --- /dev/null +++ b/website/public/static/demo/military/markdown/mapgis/mapgis-dem.md @@ -0,0 +1,80 @@ +## 加载地形高程数据 + +### 示例功能 + +    本示例实现在三维场景中加载在线地形高程数据，对接 MapGIS IGServer 发布的三维地图服务。 + +### 示例实现 + +    数据准备：首先需在 MapGIS Desktop 桌面平台软件中将地形高程数据组织为地图文档；然后在 MapGIS Server Manager 服务管理器中根据地图文档发布为三维地图服务。 + +    本示例需要使用【include-cesium-local.js】开发库实现，关键接口为`CesiumZondy.Layer.TerrainLayer`类提供的`append()`方法，以此来加载地形数据的三维地图服务。 + +> 开发库使用请参见*首页-概述-原生 JS 调用*内容。 + +### 实现步骤 + +**Step 1. 引用开发库**： +    本示例引用 local 本地【include-cesium-local.js】开发库，完成此步骤后才可调用三维 WebGL 的功能； + +**Step 2. 创建布局**： +    创建`id='GlobeView'`的 div 作为三维视图的容器，并设置其样式； + +**Step 3. 构造三维场景控件**： +    实例化`Cesium.WebSceneControl`对象，完成此步骤后可在三维场景中加载三维球控件； + +- Example: + ```javascript + //构造三维视图对象（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', {}) + ``` + +**Step 4. 加载数据**: +    构造`CesiumZondy.Layer.TerrainLayer`地形图层管理对象，调用`append()`方法，传入三维地图服务的 URL 地址即可加载浏览数据，也可传入相关配置参数。 + +- Example: + ```javascript + //构造地形层管理对象（视图） + var layer = new CesiumZondy.Layer.TerrainLayer({ + viewer: webGlobe.viewer, + }) + //添加三维地图文档：地形数据 + var terrainlayer = layer.append('http://develop.smaryun.com:6163/igs/rest/g3d/250DEM_3D', {}) + ``` + +### 关键接口 + +#### 1.【三维场景控件类】`Cesium.WebSceneControl(elementId, options)` + +| 参数名 | 类 型 | 说 明 | +| --------- | ----------------- | -------------------- | +| elementId | Element \| String | 放置视图的 div 的 id | +| options | Object | （可选）附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ---------------- | ------- | ------ | -------------------------------------------------------------------------------------- | +| viewerMode | String | ‘3D’ | （可选）初始视图模式默认为三维球视图 '2D'表示二维视图 'COLUMBUS_VIEW' 表示三维平面视图 | +| showInfo | Boolean | false | （可选）是否显示默认的属性信息框 | +| animation | Boolean | true | （可选）默认动画控制不显示 | +| baseLayerPicker | Boolean | true | （可选）是否创建图层控制显示小组件 | +| fullscreenButton | Boolean | true | （可选）是否创建全屏控制按钮 | +| vrButton | Boolean | false | （可选）是否创建 VR 按钮 | + +#### 2.【地形图层管理类】`CesiumZondy.Layer.TerrainLayer` + +##### 【method】`append(url, options)`：添加三维场景地形服务 + +| 参数名 | 类 型 | 说 明 | +| ------- | ------ | ---------------- | +| url | String | 地形文档服务地址 | +| options | Object | 附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ----------- | ------------ | ------------ | -------------------- | +| synchronous | Boolean | true | （可选）是否异步请求 | +| loaded | function | function | （可选）回调函数 | +| proxy | DefaultProxy | defaultProxy | （可选）代理 | diff --git a/website/public/static/demo/military/markdown/mapgis/mapgis-dem250.md b/website/public/static/demo/military/markdown/mapgis/mapgis-dem250.md new file mode 100644 index 000000000..598100e16 --- /dev/null +++ b/website/public/static/demo/military/markdown/mapgis/mapgis-dem250.md @@ -0,0 +1,101 @@ +## 加载地形高程数据 + +### 示例功能 + +本示例实现在三维场景中加载在线地形高程数据，对接MapGIS IGServer发布的三维地图服务。 + +### 示例实现 + +数据准备：首先需在MapGIS Desktop桌面平台软件中将地形高程数据组织为地图文档；然后在MapGIS Server Manager服务管理器中根据地图文档发布为三维地图服务。 + +本示例需要使用【include-cesium-local.js】开发库实现，关键接口为`WebSceneControl`类提供的`append()`方法，以此来加载三维地图服务。 + +> 开发库使用请参见*首页-概述-原生JS调用*内容。 + +### 实现步骤 + +1. 引用开发库：本示例引用local本地【include-cesium-local.js】开发库； + +2. 创建布局：创建`id='GlobeView'`的div作为三维视图的容器，并设置其样式； + +3. 构造三维场景控件：实例化WebSceneControl对象； + + ``` javascript + //构造三维视图类（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', { + terrainExaggeration: 1, + }); + ``` + +4. 加载数据：调用`append()`方法，传入三维地图服务的URL地址即可加载浏览数据，也可传入相关配置参数； + + ``` javascript + //加载地图文档 + webGlobe.append("http://192.168.10.186:6163/igs/rest/g3d/250DEM_3D",{}); + ``` + +5. 鼠标位置显示控件：创建`id="coordinate_location"`的div作为容器，用于显示鼠标当前位置的经纬度、高程、视角高度信息；然后调用`showPosition()`方法为三维场景控件设置鼠标位置显示控件。 + + ``` javascript + //显示鼠标位置控件 + webGlobe.showPosition('coordinate_location'); + ``` + +### 关键接口 + +#### 1.【三维场景控件】WebSceneControl + +##### （1）`new WebSceneControl(elementId, options)`：三维场景控件构造函数 + +> `WebSceneControl`构造函数主要参数 + +| 参数名 | 类 型 | 说 明 | +| --------- | ----------------- | ----------------- | +| elementId | Element \| String | 放置视图的div的id | +| options | Object | （可选）附加属性 | + +> `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ---------------- | ------- | ------ | ------------------------------------------------------------ | +| viewerMode | String | ‘3D’ | （可选）初始视图模式默认为三维球视图 '2D'表示二维视图 'COLUMBUS_VIEW' 表示三维平面视图 | +| showInfo | Boolean | false | （可选）是否显示默认的属性信息框 | +| animation | Boolean | true | （可选）默认动画控制不显示 | +| baseLayerPicker | Boolean | true | （可选）是否创建图层控制显示小组件 | +| fullscreenButton | Boolean | true | （可选）是否创建全屏控制按钮 | +| vrButton | Boolean | false | （可选）是否创建VR按钮 | + +##### （2）`append(url, options, 代理)`：添加地图文档 + +> `append`方法主要参数 + +| 参数名 | 类 型 | 说 明 | +| ------- | ----------- | -------- | +| url | String | 文档地址 | +| options | Object | 附加属性 | +| 代理 | DefaultProxy | 代理 | + +> `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ----------- | ------- | -------- | -------------------- | +| autoReset | Boolean | true | optional 是否自动定位 | +| synchronous | Boolean | true | optional 是否异步请求 | +| loaded | Boolean | function | optional 回调函数 | + +##### （3）`showPosition(elementId, options)`：显示经纬度 高程 视角高度 + +> `showPosition`方法主要参数 + +| 参数名 | 类 型 | 说 明 | +| --------- | ----------------- | --------------- | +| elementId | Element \| String | 要显示的div的id | +| options | Object | 附加属性 | + +> `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ------------------ | ------- | ------ | ---------------------------------------- | +| showHpr | Boolean | false | （可选） | +| showSelectTileInfo | Boolean | false | （可选）显示当前鼠标所在位置拾取到的级别 | +| showViewLevelInfo | Boolean | false | （可选）显示视图级别 | diff --git a/website/public/static/demo/military/markdown/mapgis/mapgis-oblique.md b/website/public/static/demo/military/markdown/mapgis/mapgis-oblique.md new file mode 100644 index 000000000..f7a1bddc8 --- /dev/null +++ b/website/public/static/demo/military/markdown/mapgis/mapgis-oblique.md @@ -0,0 +1,75 @@ +## 加载倾斜摄影 + +### 示例功能 + +    本示例实现在三维场景中加载在线倾斜摄影数据，对接 MapGIS IGServer 发布的三维地图服务。 + +### 示例实现 + +    数据准备：首先需在 MapGIS Desktop 桌面平台软件中将倾斜摄影数据组织为地图文档；然后在 MapGIS Server Manager 服务管理器中根据地图文档发布为三维地图服务。 + +    本示例需要使用【include-cesium-local.js】开发库实现，关键接口为`WebSceneControl`类提供的`append()`方法，以此来加载三维地图服务。 + +> 开发库使用请参见*首页-概述-原生 JS 调用*内容。 + +### 实现步骤 + +**Step 1. 引用开发库**： +    本示例引用 local 本地【include-cesium-local.js】开发库，完成此步骤后才可调用三维 WebGL 的功能； + +**Step 2. 创建布局**： +    创建`id='GlobeView'`的 div 作为三维视图的容器，并设置其样式； + +**Step 3. 构造三维场景控件**： +    实例化`Cesium.WebSceneControl`对象，完成此步骤后可在三维场景中加载三维球控件； + +- Example: + ```javascript + //构造三维视图对象（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', {}) + ``` + +**Step 4. 加载数据**: +    加载数据：调用`append()`方法，传入三维地图服务的 URL 地址即可加载浏览数据，也可传入相关配置参数； + +- Example: + ```javascript + //加载地图文档 + webGlobe.append('http://localhost:6163/igs/rest/g3d/TongLiang', {}) + ``` + +### 关键接口 + +#### 1.【三维场景控件类】`Cesium.WebSceneControl(elementId, options)` + +| 参数名 | 类 型 | 说 明 | +| --------- | ----------------- | -------------------- | +| elementId | Element \| String | 放置视图的 div 的 id | +| options | Object | （可选）附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ---------------- | ------- | ------ | -------------------------------------------------------------------------------------- | +| viewerMode | String | ‘3D’ | （可选）初始视图模式默认为三维球视图 '2D'表示二维视图 'COLUMBUS_VIEW' 表示三维平面视图 | +| showInfo | Boolean | false | （可选）是否显示默认的属性信息框 | +| animation | Boolean | true | （可选）默认动画控制不显示 | +| baseLayerPicker | Boolean | true | （可选）是否创建图层控制显示小组件 | +| fullscreenButton | Boolean | true | （可选）是否创建全屏控制按钮 | +| vrButton | Boolean | false | （可选）是否创建 VR 按钮 | + +##### 【method】`append(url, options, 代理)`：添加地图文档 + +| 参数名 | 类 型 | 说 明 | +| ------- | ------------ | -------- | +| url | String | 文档地址 | +| options | Object | 附加属性 | +| 代理 | DefaultProxy | 代理 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ----------- | ------- | -------- | --------------------- | +| autoReset | Boolean | true | optional 是否自动定位 | +| synchronous | Boolean | true | optional 是否异步请求 | +| loaded | Boolean | function | optional 回调函数 | diff --git a/website/public/static/demo/military/markdown/mapgis/mapgis-raster.md b/website/public/static/demo/military/markdown/mapgis/mapgis-raster.md new file mode 100644 index 000000000..a4a5bce02 --- /dev/null +++ b/website/public/static/demo/military/markdown/mapgis/mapgis-raster.md @@ -0,0 +1,99 @@ +## 加载地形影像 + +### 示例功能 + +    本示例实现在三维场景中加载在线地形影像数据，对接 MapGIS IGServer 发布的二维瓦片地图服务。 + +### 示例实现 + +    数据准备：需提前在 MapGIS Server Manager 服务管理器中将地形影像数据发布为二维瓦片地图服务。 + +    本示例需要使用【include-cesium-local.js】开发库实现，关键接口为`CesiumZondy.Layer.TilesLayer`类提供的`appendMapGISTile()`方法，以此来加载 IGServer 二维瓦片地图服务数据。 + +> 开发库使用请参见*首页-概述-原生 JS 调用*内容。 + +### 实现步骤： + +**Step 1. 引用开发库**： +    本示例引用 local 本地【include-cesium-local.js】开发库，完成此步骤后才可调用三维 WebGL 的功能； + +**Step 2. 创建布局**： +    创建`id='GlobeView'`的 div 作为三维视图的容器，并设置其样式； + +**Step 3. 构造三维场景控件**： +    实例化`Cesium.WebSceneControl`对象，完成此步骤后可在三维场景中加载三维球控件； + +- Example: + ```javascript + //构造三维视图对象（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', {}) + ``` + +**Step 4. 加载数据**: +    加载数据：首先构造`CesiumZondy.Layer.TilesLayer`瓦片图层管理对象，然后构造图层加载的参数，如范围、瓦片初始级行列数、最大显示级别等信息，可用来指定瓦片显示的范围、最大级别等；然后调用`appendMapGISTile()`方法传入二维瓦片服务地址及参数，即可加载浏览数据。 + +- Example: + ```javascript + //构造瓦片图层管理对象（视图） + var layer = new CesiumZondy.Layer.TilesLayer({ + viewer: webGlobe.viewer, + }) + //参数 + var options = { + tileRang: Cesium.Rectangle.fromDegrees(-180, -90, 180, 90), + //瓦片初始级的列数 默认为2 + colNum: 2, + //瓦片初始级的行数 默认为1 + rowNum: 1, + //瓦片最大显示级数 默认为19 + maxLevel: 19, + //如瓦片裁的不是256,则需设置下面两个参数 + //瓦片宽度 + tileWidth: 256, + //瓦片高度 + tileHeight: 256, + } + //添加MapGIS IGServer发布的二维瓦片地图服务 + var tilelayer = layer.appendMapGISTile('http://develop.smaryun.com:6163/igs/rest/mrms/tile/250DEM', options) + ``` + +### 关键接口 + +#### 1.【三维场景控件类】`Cesium.WebSceneControl(elementId, options)` + +| 参数名 | 类 型 | 说 明 | +| --------- | ----------------- | -------------------- | +| elementId | Element \| String | 放置视图的 div 的 id | +| options | Object | （可选）附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ---------------- | ------- | ------ | -------------------------------------------------------------------------------------- | +| viewerMode | String | ‘3D’ | （可选）初始视图模式默认为三维球视图 '2D'表示二维视图 'COLUMBUS_VIEW' 表示三维平面视图 | +| showInfo | Boolean | false | （可选）是否显示默认的属性信息框 | +| animation | Boolean | true | （可选）默认动画控制不显示 | +| baseLayerPicker | Boolean | true | （可选）是否创建图层控制显示小组件 | +| fullscreenButton | Boolean | true | （可选）是否创建全屏控制按钮 | +| vrButton | Boolean | false | （可选）是否创建 VR 按钮 | + +#### 2.【瓦片图层管理类】`CesiumZondy.Layer.TilesLayer` + +##### 【method】`appendMapGISTile(url, options)`：添加 MapGIS IGSserver 发布的瓦片服务 + +| 参数名 | 类 型 | 说 明 | +| ------- | ------ | ------------ | +| url | String | 瓦片服务地址 | +| options | Object | 附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| --------- | --------- | ------ | --------------------------------------------------------- | +| tileRange | Rectangle | 无 | Rectangle.fromDegrees(-180,-90,180,90) 默认范围为全球范围 | +| colNum | Number | 2 | 瓦片初始级的列数 | +| rowNum | Number | 1 | 瓦片初始级的行数 | +| tileWidth | Number | 256 | 瓦片宽度 | +| tileHeigh | Number | 256 | 瓦片高度 | +| maxLevel | Number | 19 | 瓦片最大显示级数 默认为 19 | +| proxy | String | 无 | 转发代理，不存在跨域可不设置 | diff --git a/website/public/static/demo/military/markdown/mapgis/mapgis-raster250.md b/website/public/static/demo/military/markdown/mapgis/mapgis-raster250.md new file mode 100644 index 000000000..b95642bca --- /dev/null +++ b/website/public/static/demo/military/markdown/mapgis/mapgis-raster250.md @@ -0,0 +1,126 @@ +## 加载地形影像 + +### 示例功能 + +本示例实现在三维场景中加载在线地形影像，对接MapGIS IGServer发布的二维瓦片地图服务。 + +### 示例实现 + +数据准备：需提前在MapGIS Server Manager服务管理器中将地形影像数据发布为二维瓦片地图服务。 + +本示例需要使用【include-cesium-local.js】开发库实现，关键接口为`WebSceneControl`类提供的`appendMapGISTile()`方法，以此来加载IGServer二维瓦片地图服务数据。 + +> 开发库使用请参见*首页-概述-原生JS调用*内容。 + +### 实现步骤： + +1. 引用开发库：本示例引用local本地【include-cesium-local.js】开发库； + +2. 创建布局：创建`id='GlobeView'`的div作为三维视图的容器，并设置其样式； + +3. 构造三维场景控件：实例化WebSceneControl对象； + + ``` javascript + //构造三维视图类（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', { + terrainExaggeration: 1, + }); + ``` + +4. 加载数据：首先需构造图层加载的参数，如范围、瓦片初始级行列数、最大显示级别等信息，可用来指定瓦片显示的范围、最大级别等；然后调用`appendMapGISTile()`方法传入二维瓦片服务地址及参数，即可加载浏览数据； + + ``` javascript + var options = { + tileRang: Cesium.Rectangle.fromDegrees(-180, -90, 180, 90), + //瓦片初始级的列数 默认为2 + colNum: 2, + //瓦片初始级的行数 默认为2 + rowNum: 1, + //瓦片最大显示级数 默认为19 + maxLevel: 5, + // proxy: '/ZDproxy.ashx',//如不存在跨域可不设置 + //如瓦片裁的不是256,则需设置下面两个参数 + tileWidth: 256, + tileHeight: 256, + }; + //添加MapGISIGServer发布的瓦片 + tilelayer = webGlobe.appendMapGISTile( + "http://localhost:6163/igs/rest/mrms/tile/250DEM", + options + ); + ``` + +5. 鼠标位置显示控件：创建`id="coordinate_location"`的div作为容器，用于显示鼠标当前位置的经纬度、高程、视角高度信息；然后调用`showPosition()`方法为三维场景控件设置鼠标位置显示控件。 + + ``` javascript + //显示鼠标位置控件 + webGlobe.showPosition('coordinate_location'); + ``` + +### 关键接口 + +#### 1.【三维场景控件】WebSceneControl + +##### （1）`new WebSceneControl(elementId, options)`：三维场景控件构造函数 + +> `WebSceneControl`构造函数主要参数 + +|参数名|类 型|说 明| +|-|-|-| +|elementId|Element \| String|放置视图的div的id| +|options|Object|（可选）附加属性| + +> `options`属性主要参数 + +|参数名|类 型|默认值|说 明| +|-|-|-|-| +|viewerMode|String|‘3D’|（可选）初始视图模式默认为三维球视图 '2D'表示二维视图 'COLUMBUS_VIEW' 表示三维平面视图| +|showInfo|Boolean|false|（可选）是否显示默认的属性信息框| +|animation|Boolean|true|（可选）默认动画控制不显示| +|baseLayerPicker|Boolean|true|（可选）是否创建图层控制显示小组件| +|fullscreenButton|Boolean|true|（可选）是否创建全屏控制按钮| +|vrButton|Boolean|false|（可选）是否创建VR按钮| + +##### （2）`appendMapGISTile(url, options)`：添加MapGIS发布的瓦片服务 + +> `appendMapGISTile`方法主要参数 + +|参数名|类 型|说 明| +|-|-|-| +|url|String|瓦片服务地址| +|options|Object|附加属性| + +> `options`属性主要参数 + +|参数名|类 型|默认值|说 明| +|-|-|-|-| +|options.tileRange=|Rectangle|无|Rectangle.fromDegrees(-180,-90,180,90) 默认范围为全球范围| +|colNum|Number|2|瓦片初始级的列数 默认为2| +|rowNum|Number|1|瓦片初始级的列数 默认为1| +|maxLevel|Number|19|瓦片最大显示级数 默认为19| +|proxy|String|无|转发代理，不存在跨域可不设置| + +##### （3）`removeImageryLayer(imageryLayer)`：移除瓦片图层 + +> `removeImageryLayer`方法主要参数 + +|参数名|类 型|说 明| +|-|-|-| +|imageryLayer|imageryLayer|图层对象| + +##### （4）`showPosition(elementId, options)`：显示经纬度 高程 视角高度 + +> `showPosition`方法主要参数 + +|参数名|类 型|说 明| +|-|-|-| +|elementId|Element \| String|要显示的div的id| +|options|Object|附加属性| + +> `options`属性主要参数 + +|参数名|类 型|默认值|说 明| +|-|-|-|-| +|showHpr|Boolean|false|（可选） | +|showSelectTileInfo|Boolean|false|（可选）显示当前鼠标所在位置拾取到的级别| +|showViewLevelInfo|Boolean|false|（可选）显示视图级别| diff --git a/website/public/static/demo/military/markdown/mapgis/mapgis-terrain.md b/website/public/static/demo/military/markdown/mapgis/mapgis-terrain.md new file mode 100644 index 000000000..7b1a772e3 --- /dev/null +++ b/website/public/static/demo/military/markdown/mapgis/mapgis-terrain.md @@ -0,0 +1,80 @@ +## 加载地形数据 + +### 示例功能 + +    本示例实现在三维场景中加载地形数据，对接 MapGIS IGServer 发布的三维地图服务。 + +### 示例实现 + +    数据准备：本示例采用的数据经过两个步骤生成，首先需在 MapGIS Desktop 桌面平台软件中将地形数据（例如 TIF 数据）并组织为地图文档；然后在 MapGIS Server Manager 服务管理器中根据地图文档发布为三维地图服务。 + +    本示例需要使用【include-cesium-local.js】开发库实现，关键接口为`CesiumZondy.Layer.TerrainLayer`类提供的`append()`方法，以此来加载地形数据的三维地图服务。 + +> 开发库使用请参见*首页-概述-原生 JS 调用*内容。 + +### 实现步骤 + +**Step 1. 引用开发库**： +    本示例引用 local 本地【include-cesium-local.js】开发库，完成此步骤后才可调用三维 WebGL 的功能； + +**Step 2. 创建布局**： +    创建`id='GlobeView'`的 div 作为三维视图的容器，并设置其样式； + +**Step 3. 构造三维场景控件**： +    实例化`Cesium.WebSceneControl`对象，完成此步骤后可在三维场景中加载三维球控件； + +- Example: + ```javascript + //构造三维视图对象（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', {}) + ``` + +**Step 4. 加载数据**: +    加载数据：构造`CesiumZondy.Layer.TerrainLayer`地形图层管理对象，调用`append()`方法，传入三维地图服务的 URL 地址即可加载浏览数据，可传入相关配置参数。 + +- Example: + ```javascript + //构造地形层管理对象（视图） + var layer = new CesiumZondy.Layer.TerrainLayer({ + viewer: webGlobe.viewer, + }) + //加载三维地图文档（服务地址，配置参数） + var terrainlayer = layer.append('http://develop.smaryun.com:6163/igs/rest/g3d/terrain', {}) + ``` + +### 关键接口 + +#### 1.【三维场景控件类】`Cesium.WebSceneControl(elementId, options)` + +| 参数名 | 类 型 | 说 明 | +| --------- | ----------------- | -------------------- | +| elementId | Element \| String | 放置视图的 div 的 id | +| options | Object | （可选）附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ---------------- | ------- | ------ | -------------------------------------------------------------------------------------- | +| viewerMode | String | ‘3D’ | （可选）初始视图模式默认为三维球视图 '2D'表示二维视图 'COLUMBUS_VIEW' 表示三维平面视图 | +| showInfo | Boolean | false | （可选）是否显示默认的属性信息框 | +| animation | Boolean | true | （可选）默认动画控制不显示 | +| baseLayerPicker | Boolean | true | （可选）是否创建图层控制显示小组件 | +| fullscreenButton | Boolean | true | （可选）是否创建全屏控制按钮 | +| vrButton | Boolean | false | （可选）是否创建 VR 按钮 | + +#### 2.【地形图层管理类】`CesiumZondy.Layer.TerrainLayer` + +##### 【method】`append(url, options)`：添加三维场景地形服务 + +| 参数名 | 类 型 | 说 明 | +| ------- | ------ | ---------------- | +| url | String | 地形文档服务地址 | +| options | Object | 附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ----------- | ------------ | ------------ | -------------------- | +| synchronous | Boolean | true | （可选）是否异步请求 | +| loaded | function | function | （可选）回调函数 | +| proxy | DefaultProxy | defaultProxy | （可选）代理 | diff --git a/website/public/static/demo/military/markdown/measure/measure-area.md b/website/public/static/demo/military/markdown/measure/measure-area.md new file mode 100644 index 000000000..2343a8368 --- /dev/null +++ b/website/public/static/demo/military/markdown/measure/measure-area.md @@ -0,0 +1,80 @@ +## 计算面积 + +### 示例功能 + +    本示例提供用于计算绘制区面积的功能，可以应用于各个场景，满足用户在使用时进行区域面积等业务需求。 + +### 示例实现 + +    本示例需要使用【include-cesium-local.js】开发库实现，通过初始化面积计算工具对象 `Cesium.MeasureAreaTool()` ，实现面积计算功能。 + +> 开发库使用请参见*首页-概述-原生 JS 调用*内容。 + +### 实现步骤 + +**Step 1. 引用开发库**： +    本示例引用 local 本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维 WebGL 的功能； +**Step 2. 创建三维地图容器并加载三维球控件**: +    创建 `id='GlobeView'` 的 div 作为三维视图的容器，并设置其样式，初始化 Cesium 三维球控件 `Cesium.WebSceneControl()` ，完成此步后可在三维场景中加载三维球控件； + +- Example: + + ```Javascript + //构造三维视图类（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', { + terrainExaggeration: 1, + }); + ``` + + ```html +
+ ``` + +**Step 3. 创建面积计算工具对象**： +    初始化面积计算工具对象 `Cesium.MeasureAreaTool()` ，完成此步后可在三维场景中加载面积计算工具； + +- Example: + ```Javascript + //初始化面积计算工具对象 + var measureAreaTool = new Cesium.MeasureAreaTool(webGlobe.viewer); + ``` + +**Step 4. 激活面积计算工具**: +    调用面积计算工具对象 `Cesium.MeasureAreaTool()` 的 `startTool()` 方法激活面积计算工具，完成此步后可在三维场景中使用面积计算工具； + +- Example: + + ```Javascript + //激活面积计算工具 + measureAreaTool.startTool(); + ``` + +**Step 5. 停止面积计算工具**: +    功能使用结束后调用面积计算工具对象 `Cesium.MeasureAreaTool()` 的 `stopTool()` 方法停止面积计算工具，完成此步后可在三维场景中停止使用面积计算工具。 + +- Example: + ```Javascript + //停止面积计算工具 + measureAreaTool.stopTool(); + ``` + +### 关键接口 + +#### 1. 【面积测量工具主要类】`Cesium.MeasureAreaTool(viewer, options)` + +| 参数名 | 类型 | 说明 | +| ------- | ------ | ------------------------------ | +| viewer | Object | viewer 对象 | +| options | Object | (可选)面积测量工具可选参数设置 | + +- `options` 主要参数 + +| 参数名 | 类型 | 默认值 | 说明 | +| ------------------------ | ------- | ------------------------- | ----------------------------------------------------------------------- | +| callBack | Boolean | function(){} | (可选)回调函数 | +| exHeight | Number | 0 | (可选)附加高程偏移 （避免遮挡） | +| disableDepthTestDistance | Number | Number. POSITIVE_INFINITY | (可选)只要小于这个距离深度检测就会失效，就会一直显示在最前面 不会被遮挡 | + +##### 【method】`startTool()` 激活面积计算工具方法 + +##### 【method】`stopTool()` 停止激活面积计算工具方法 diff --git a/website/public/static/demo/military/markdown/measure/measure-length.md b/website/public/static/demo/military/markdown/measure/measure-length.md new file mode 100644 index 000000000..a08d1f2d2 --- /dev/null +++ b/website/public/static/demo/military/markdown/measure/measure-length.md @@ -0,0 +1,87 @@ +## 计算长度 + +### 示例功能 + +    本示例提供用于计算绘制线的长度的功能，可以应用于各个场景，满足用户在使用时进行两点之间距离测量，多点之间距离测量等业务需求。 + +### 示例实现 + +    本示例需要使用【include-cesium-local.js】开发库实现，通过初始化长度计算工具对象 `Cesium.MeasureLengthTool()` ，实现长度计算功能。 + +> 开发库使用请参见*首页-概述-原生 JS 调用*内容。 + +### 实现步骤 + +**Step 1. 引用开发库**： +    本示例引用 local 本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维 WebGL 的功能； +**Step 2. 创建三维地图容器并加载三维球控件**: +    创建 `id='GlobeView'` 的 div 作为三维视图的容器，并设置其样式，初始化 Cesium 三维球控件 `Cesium.WebSceneControl()` ，完成此步后可在三维场景中加载三维球控件； + +- Example: + + ```Javascript + //构造三维视图类（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', { + terrainExaggeration: 1, + }); + ``` + + ```html +
+ ``` + +**Step 3. 创建长度计算工具**: +    初始化长度计算工具对象 `Cesium.MeasureLengthTool()` ，完成此步后可在三维场景中加载长度计算工具； + +- Example: + ```Javascript + //创建长度计算工具 + var measureLengthTool = new Cesium.MeasureLengthTool(webGlobe.viewer); + ``` + +**Step 4. 激活长度计算工具**: +    调用长度计算工具对象 `Cesium.MeasureLengthTool()` 的 `startTool()` 方法激活长度计算工具，完成此步后可在三维场景中使用长度计算工具； + +- Example: + ```Javascript + //激活长度计算工具 + measureLengthTool.startTool(); + ``` + +**Step 5. 停止长度计算工具**: +    功能使用结束后调用长度计算工具对象 `Cesium.MeasureLengthTool()` 的 `stopTool()` 方法停止长度计算工具，完成此步后可在三维场景中停止使用长度计算工具。 + +- Example: + ```Javascript + //停止长度计算工具 + measureLengthTool.stopTool(); + ``` + +### 关键接口 + +#### 1. 【距离测量工具主要类】`Cesium.MeasureLengthTool(viewer, options)` + +- `Cesium.MeasureLengthTool` 主要参数 + +| 参数名 | 类型 | 说明 | +| ------- | ------ | ------------------------------ | +| viewer | Object | viewer 对象 | +| options | Object | (可选)距离测量工具可选参数设置 | + +- `options` 主要参数 + +| 参数名 | 类型 | 默认值 | 说明 | +| ------------------------ | ------- | ------------------------- | ----------------------------------------------------------------------- | +| showMoreInfo | Boolean | false | (可选)是否显示详细测量信息 | +| exHeight | Number | 0 | (可选)附加高程偏移 （避免遮挡） | +| disableDepthTestDistance | Number | Number. POSITIVE_INFINITY | (可选)只要小于这个距离深度检测就会失效，就会一直显示在最前面 不会被遮挡 | + +##### 【method】 `calcDistanceFromDegrees(positions)` 计算距离方法（经纬度的坐标点） + +| 参数名 | 类型 | 说明 | +| --------- | ----- | ---- | +| positions | Array | 暂无 | + +##### 【method】 `startTool()` 激活长度计算工具方法 + +##### 【method】 `stopTool()` 停止激活长度计算工具方法 diff --git a/website/public/static/demo/military/markdown/measure/measure-slpoe.md b/website/public/static/demo/military/markdown/measure/measure-slpoe.md new file mode 100644 index 000000000..b20e1475a --- /dev/null +++ b/website/public/static/demo/military/markdown/measure/measure-slpoe.md @@ -0,0 +1,80 @@ +## 坡度测量 + +### 示例功能 + +    本示例提供用于计算两点坡度的功能，可以应用于各个场景，满足用户在使用时对不在同一水平面的两点进行坡度测量。 + +### 示例实现 + +    本示例需要使用 include-cesium-local.js 开发库实现，通过初始化坡度计算工具对象 `Cesium.MeasureSlopeTool()` ，实现坡度计算功能。 + +> 开发库使用请参见*首页-概述-原生 JS 调用*内容。 + +### 实现步骤 + +**Step 1. 引用开发库**： +    本示例引用 local 本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维 WebGL 的功能； +**Step 2. 创建三维地图容器并加载三维球控件**: +    创建 `id='GlobeView'` 的 div 作为三维视图的容器，并设置其样式，初始化 Cesium 三维球控件 `Cesium.WebSceneControl()` ，完成此步后可在三维场景中加载三维球控件； + +- Example: + + ```Javascript + //构造三维视图类（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', { + terrainExaggeration: 1, + }); + ``` + + ```html +
+ ``` + +**Step 3. 创建坡度计算工具**: +    初始化坡度计算工具对象 `Cesium.MeasureSlopeTool()` ，完成此步后可在三维场景中加载坡度计算工具； + +- Example: + ```Javascript + //创建坡度计算工具 + var measureSlopeTool = new Cesium.MeasureSlopeTool(webGlobe.viewer); + ``` + +**Step 4. 激活坡度计算工具**: +    调用坡度计算工具对象 `Cesium.MeasureSlopeTool()` 的 `startTool()` 方法激活坡度计算工具，完成此步后可在三维场景中使用坡度计算工具； + +- Example: + ```Javascript + //激活坡度计算工具 + measureSlopeTool.startTool(); + ``` + +**Step 5. 停止坡度计算工具**: +    功能使用结束后调用坡度计算工具对象 `Cesium.MeasureSlopeTool()` 的 `stopTool()` 方法停止坡度计算工具，完成此步后可在三维场景中停止使用坡度计算工具。 + +- Example: + ```Javascript + //停止坡度计算工具 + measureSlopeTool.stopTool(); + ``` + +### 关键接口 + +#### 1. 【坡度测量工具主要类】`Cesium.MeasureSlopeTool(viewer, options)` + +- `Cesium.MeasureSlopeTool` 主要参数 + +| 参数名 | 类型 | 说明 | +| ------- | ------ | ------------------------------ | +| viewer | Object | viewer 对象 | +| options | Object | (可选)坡度测量工具可选参数设置 | + +- `options` 主要参数 + +| 参数名 | 类型 | 默认值 | 说明 | +| ------------------------ | ------- | ------------------------- | ----------------------------------------------------------------------- | +| callBack | Boolean | function(){} | (可选)回调函数 | +| disableDepthTestDistance | Number | Number. POSITIVE_INFINITY | (可选)只要小于这个距离深度检测就会失效，就会一直显示在最前面 不会被遮挡 | + +##### 【method】 `startTool()` 激活坡度测量工具方法 + +##### 【method】 `stopTool()` 停止激活坡度测量工具方法 diff --git a/website/public/static/demo/military/markdown/measure/measure-triangle.md b/website/public/static/demo/military/markdown/measure/measure-triangle.md new file mode 100644 index 000000000..8ffd0f73f --- /dev/null +++ b/website/public/static/demo/military/markdown/measure/measure-triangle.md @@ -0,0 +1,80 @@ +## 三角测量 + +### 示例功能 + +    本示例提供两点之间三角测量功能，可测量两点之间高差、水平距离、直线距离等信息，可以应用于各个场景，满足用户在使用时对于两点之间距离的直观数据获取。 + +### 功能实现 + +    本示例需要使用 include-cesium-local.js 开发库实现，通过初始化三角测量工具对象 `Cesium.TriangulationTool()` ，实现三角测量功能。 + +> 开发库使用请参见*首页-概述-原生 JS 调用*内容。 + +### 实现步骤 + +**Step 1. 引用开发库**： +    本示例引用 local 本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维 WebGL 的功能； +**Step 2. 创建三维地图容器并加载三维球控件**: +    创建 `id='GlobeView'` 的 div 作为三维视图的容器，并设置其样式，初始化 Cesium 三维球控件 `Cesium.WebSceneControl()` ，完成此步后可在三维场景中加载三维球控件； + +- Example: + + ```Javascript + //构造三维视图类（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', { + terrainExaggeration: 1, + }); + ``` + + ```html +
+ ``` + +**Step 3. 创建三角测量工具**: +    初始化三角测量工具对象 `Cesium.TriangulationTool()` ，完成此步后可在三维场景中加载三角测量工具; + +- Example: + ```Javascript + //创建三角测量工具 + var triangulationTool = new Cesium.TriangulationTool(webGlobe.viewer); + ``` + +**Step 4. 激活三角测量工具**: +    调用三角测量工具对象 `Cesium.TriangulationTool()` 的 `startTool()` 方法激活三角测量工具，完成此步后可在三维场景中使用三角测量工具; + +- Example: + ```Javascript + //激活三角测量工具 + triangulationTool.startTool(); + ``` + +**Step 5.停止三角测量工具**: +    功能使用结束后调用三角测量工具对象 `Cesium.TriangulationTool()` 的 `stopTool()` 方法停止三角测量工具，完成此步后可在三维场景中停止使用三角测量工具。 + +- Example: + ```Javascript + //停止三角测量工具 + triangulationTool.stopTool(); + ``` + +### 关键接口 + +#### 1. 【三角测量工具主要类】`Cesium.TriangulationTool(viewer, options)` + +- `Cesium.TriangulationTool` 主要参数 + +| 参数名 | 类型 | 说明 | +| ------- | ------ | ------------------------ | +| viewer | Object | viewer 对象 | +| options | Object | 三角测量工具可选参数设置 | + +- `options` 主要参数 + +| 参数名 | 类型 | 默认值 | 说明 | +| ------------------------ | ------- | ------------------------- | ----------------------------------------------------------------- | +| callBack | Boolean | function(){} | 回调函数 | +| disableDepthTestDistance | Number | Number. POSITIVE_INFINITY | 只要小于这个距离深度检测就会失效，就会一直显示在最前面 不会被遮挡 | + +##### 【method】 `startTool()` 激活三角测量工具方法 + +##### 【method】 `stopTool()` 停止激活三角测量工具方法 diff --git a/website/public/static/demo/military/markdown/ogc/document.png b/website/public/static/demo/military/markdown/ogc/document.png new file mode 100644 index 000000000..576271cd7 Binary files /dev/null and b/website/public/static/demo/military/markdown/ogc/document.png differ diff --git a/website/public/static/demo/military/markdown/ogc/document_dynamic.png b/website/public/static/demo/military/markdown/ogc/document_dynamic.png new file mode 100644 index 000000000..bd9c04991 Binary files /dev/null and b/website/public/static/demo/military/markdown/ogc/document_dynamic.png differ diff --git a/website/public/static/demo/military/markdown/ogc/igserver_document.png b/website/public/static/demo/military/markdown/ogc/igserver_document.png new file mode 100644 index 000000000..d50306137 Binary files /dev/null and b/website/public/static/demo/military/markdown/ogc/igserver_document.png differ diff --git a/website/public/static/demo/military/markdown/ogc/igserver_document_config.png b/website/public/static/demo/military/markdown/ogc/igserver_document_config.png new file mode 100644 index 000000000..ebcaecc28 Binary files /dev/null and b/website/public/static/demo/military/markdown/ogc/igserver_document_config.png differ diff --git a/website/public/static/demo/military/markdown/ogc/igserver_ogc_config.png b/website/public/static/demo/military/markdown/ogc/igserver_ogc_config.png new file mode 100644 index 000000000..4e477a684 Binary files /dev/null and b/website/public/static/demo/military/markdown/ogc/igserver_ogc_config.png differ diff --git a/website/public/static/demo/military/markdown/ogc/igserver_ogc_map.png b/website/public/static/demo/military/markdown/ogc/igserver_ogc_map.png new file mode 100644 index 000000000..2bf1de004 Binary files /dev/null and b/website/public/static/demo/military/markdown/ogc/igserver_ogc_map.png differ diff --git a/website/public/static/demo/military/markdown/ogc/layerinfo.png b/website/public/static/demo/military/markdown/ogc/layerinfo.png new file mode 100644 index 000000000..44eff0aa3 Binary files /dev/null and b/website/public/static/demo/military/markdown/ogc/layerinfo.png differ diff --git a/website/public/static/demo/military/markdown/ogc/layers_name.png b/website/public/static/demo/military/markdown/ogc/layers_name.png new file mode 100644 index 000000000..8793d2a43 Binary files /dev/null and b/website/public/static/demo/military/markdown/ogc/layers_name.png differ diff --git a/website/public/static/demo/military/markdown/ogc/ogc-wms.md b/website/public/static/demo/military/markdown/ogc/ogc-wms.md new file mode 100644 index 000000000..7db2e7e3c --- /dev/null +++ b/website/public/static/demo/military/markdown/ogc/ogc-wms.md @@ -0,0 +1,128 @@ +## 加载 OGC-WMS 地图 + +### 示例功能 + +    本示例对接 OGC 服务，实现在三维场景中加载 WMS 服务地图。 + +### WMS 介绍 + +    Web Map Service（网络地图服务），简称 WMS，由开放地理信息联盟（Open GeoSpatial Consortium，OGC）制定。该规范定义了 Web 客户端从网络地图服务器获取地图的接口标准。一个 WMS 可以动态地生成具有地理参考数据的地图，这些地图通常用 GIF、JPEG 或 PNG 等图像格式，或者 SVG、KML、VML 和 WebCGM 等矢量图形格式来表现。使用者通过指定的参数获取相应的地图图片。 + +### 示例实现 + +    数据准备：可在 MapGIS IGServer 中发布 WMS 地图服务获取数据地址，也可通过其他方式发布服务或者获取地址，只要是基于 OGC 标准的 WMS 地图服务都能支持。 + +    本示例需要使用【include-cesium-local.js】开发库实现，关键接口为`CesiumZondy.Layer.OGCLayer`类提供的`appendWMSTile()`方法，以此来加载 WMS 地图。 + +> 开发库使用请参见*首页-概述-原生 JS 调用*内容。 + +### 实现步骤 + +**Step 1. 引用开发库**： +    本示例引用 local 本地【include-cesium-local.js】开发库，完成此步骤后才可调用三维 WebGL 的功能； + +**Step 2. 创建布局**： +    创建`id='GlobeView'`的 div 作为三维视图的容器，并设置其样式； + +**Step 3. 构造三维场景控件**： +    实例化`Cesium.WebSceneControl`对象，完成此步骤后可在三维场景中加载三维球控件； + +- Example: + ```javascript + //构造三维视图对象（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', {}) + ``` + +**Step 4. 加载数据**: +    构造`CesiumZondy.Layer.OGCLayer`M3D 图层管理对象，调用`appendWMSTile()`方法，并配置服务地址、图层名称、附加信息，即可实现 WMS 地图服务数据的加载，在此传入的是 IGServer 中发布的 WMS 地图服务地址，可做参考。 + +- Example: + ```javascript + //构造OGC图层管理对象（视图） + var ogcLayer = new CesiumZondy.Layer.OGCLayer({ + viewer: webGlobe.viewer, + }) + //添加WMS服务地图 + var wmsLayer = ogcLayer.appendWMSTile( + //地图服务URL地址 + 'http://develop.smaryun.com:6163/igs/rest/ogc/doc/北京市/WMSServer', + //图层名 + '北京市,绿地_1,水域_3,大学,学校,动物园', + //附加属性 + {} + ) + ``` + +### 关键接口 + +#### 1.【三维场景控件类】`Cesium.WebSceneControl(elementId, options)` + +| 参数名 | 类 型 | 说 明 | +| --------- | ----------------- | -------------------- | +| elementId | Element \| String | 放置视图的 div 的 id | +| options | Object | （可选）附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ---------------- | ------- | ------ | -------------------------------------------------------------------------------------- | +| viewerMode | String | ‘3D’ | （可选）初始视图模式默认为三维球视图 '2D'表示二维视图 'COLUMBUS_VIEW' 表示三维平面视图 | +| showInfo | Boolean | false | （可选）是否显示默认的属性信息框 | +| animation | Boolean | true | （可选）默认动画控制不显示 | +| baseLayerPicker | Boolean | true | （可选）是否创建图层控制显示小组件 | +| fullscreenButton | Boolean | true | （可选）是否创建全屏控制按钮 | +| vrButton | Boolean | false | （可选）是否创建 VR 按钮 | + +#### 2.【OGC 标准瓦片服务管理类】`CesiumZondy.Layer.OGCLayer` + +##### 【method】`appendWMSTile(tileUrl, layerName, options)`：添加 WMS 服务图层 + +| 参数名 | 类 型 | 说 明 | +| --------- | ------ | -------- | +| tileUrl | String | 服务地址 | +| layerName | String | 图层名 | +| options | object | 附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ------- | ------ | ------- | --------------- | +| version | String | '1.1.0' | 版本 默认 1.1.0 | +| proxy | String | 无 | 代理 | + +### 要点补充：WMS 服务操作介绍 + +    Web 地图服务（WMS）能够根据用户的请求返回相应的地图（包括 PNG，GIF，JPEG 等栅格形式或者是 SVG 和 WEB CGM 等矢量形式）。WMS 支持网络协议 HTTP，所支持的操作是由 URL 定义的。 + +    WMS 实现规范由三个基础性操作协议（GetCapabilities、GetMap 和 GetFeatureInfo）组成，这些协议共同构成了利用 WMS 创建和叠加显示不同来源的远程异构地图服务的基础。其中，GetCapabilities 可用户获取服务的元数据信息；GetMap 是数据的表现，可获取地图内容进而用以展示；GetFeatureInfo 可用来获取屏幕坐标某处的相关信息，也可同时返回多个图层中的要素信息。还有一些其它操作如 DescribeLayer，GetLegendGraphic，GetStyles 可获取其他信息。 + +- WMS 服务操作列表见下表所示 + +| 操作 | 实现要求 | 描述 | +| --------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| GetCapabilities | 强制实现 | 获取服务级元数据。获取 WMS 的能力文档（即元数据文档），里面包含服务的所有信息 | +| GetMap | 强制实现 | 获取地图图片。该操作根据客户端发出的请求参数在服务端进行检索，服务器端返回一个地图图像，其地理空间参数和大小参数是已经明确定义的，返回的地图图像可以是 GIF、JPEG、PNG 或 SVG 格式。 | +| GetFeatureInfo | 选择实现 | 获取显示在地图上的某些特殊要素的信息。该操作根据用户所请求的 X、Y 坐标或感兴趣的图层，返回地图上某些特殊要素的信息，信息以 HTML，GML 或 ASCII 的格式表示。 | + +- GetMap 操作请求方法实现参数 + +| 参数名称 | 参数个数 | 参数类型和值 | +| ----------- | --------------- | ------------------------------------------------------------------------------ | +| service | 1 个(必选) | 字符类型，服务类型标识值为“WMS” | +| request | 1 个(必选) | 字符类型，值为“GetMap” | +| version | 1 个(必选) | 字符类型，值为请求的 WMS 的版本号 | +| layers | 1 个(必选) | 字符类型，值为一个或多个地图图层列表，多个图层之间用”,”隔开 | +| styles | 1 个(必选) | 字符类型，值为请求图层的地图渲染样式 | +| CRS | 1 个(必选) | 字符类型，值为坐标参照系统 | +| BBOX | 1 个(必选) | Wkt 格式，值为某个 CRS 下的地图边界范围的坐标序列 | +| width | 1 个(必选) | 整型类型，值为地图图片的像素宽度 | +| height | 1 个(必选) | 整型类型，值为地图图片的像素高度 | +| format | 1 个(必选) | 字符类型，值为地图的输出格式 | +| transparent | 0 或 1 个(可选) | 字符类型，值为 true 或者 false，用来表示地图图层是否透明(默认情况下是不透明的) | +| bgcolor | 0 或 1 个(可选) | 值为十六进制的 RGB 值，表示地图的背景颜色 | +| exceptions | 0 或 1 个(可选) | 值为 WMS 的异常信息报告的格式(默认情况下是 XML 格式) | +| time | 0 或 1 个(可选) | 时间类型，值为时间值，表示需要在图层中有时间信息 | +| elevation | 0 或 1 个(可选) | 数字类型，值为高程值，表示需要在图层中有高程信息 | + +也可查看其英文原址介绍： +OpenGIS Web Map Service (WMS) Implementation Specification diff --git a/website/public/static/demo/military/markdown/ogc/ogc-wmts.md b/website/public/static/demo/military/markdown/ogc/ogc-wmts.md new file mode 100644 index 000000000..932447047 --- /dev/null +++ b/website/public/static/demo/military/markdown/ogc/ogc-wmts.md @@ -0,0 +1,125 @@ +## 加载 OGC-WMTS 地图 + +### 示例功能 + +    本示例对接 OGC 服务，实现在三维场景中加载 WMTS 服务地图。 + +### WMTS 介绍 + +    Web Map Tile Service（网络地图瓦片服务），简称 WMTS，由开放地理信息联盟（Open GeoSpatial Consortium，OGC）制定，是和 WMS 并列的重要 OGC 规范之一。WMTS 不同于 WMS,它最重要的特征是采用缓存技术能够缓解 WebGIS 服务器端数据处理的压力，提高交互响应速度，大幅改善在线地图应用客户端的用户体验。WMTS 是 OGC 主推的缓存技术规范，是目前各种缓存技术相互兼容的一种方法。 + +### 示例实现 + +    数据准备：可在 MapGIS IGServer 中发布 WMTS 地图服务获取数据地址，也可通过其他方式发布服务或者获取地址，只要是基于 OGC 标准的 WMTS 地图服务都能支持。 + +    本示例需要使用【include-cesium-local.js】开发库实现，关键接口为`CesiumZondy.Layer.OGCLayer`类提供的`appendWMSTile()`方法，以此来加载 WMTS 地图。 + +> 开发库使用请参见*首页-概述-原生 JS 调用*内容。 + +### 实现步骤 + +**Step 1. 引用开发库**： +    本示例引用 local 本地【include-cesium-local.js】开发库，完成此步骤后才可调用三维 WebGL 的功能； + +**Step 2. 创建布局**： +    创建`id='GlobeView'`的 div 作为三维视图的容器，并设置其样式； + +**Step 3. 构造三维场景控件**： +    实例化`Cesium.WebSceneControl`对象，完成此步骤后可在三维场景中加载三维球控件； + +- Example: + ```javascript + //构造三维视图对象（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', {}) + ``` + +**Step 4. 加载数据**: +    加载数据：调用`appendWMTSTile()`方法，并配置服务地址、图层名称、最大级数等信息，即可实现 WMTS 地图服务数据的加载，在此传入的是 IGServer 中发布的 WMTS 地图服务地址，可做参考。 + +- Example: + ```javascript + //构造OGC图层管理对象（视图） + var ogcLayer = new CesiumZondy.Layer.OGCLayer({ + viewer: webGlobe.viewer, + }) + //添加WMTS地图服务 + var wmtsLayer = ogcLayer.appendWMTSTile( + //瓦片服务地址 + 'http://develop.smaryun.com:6163/igs/rest/ogc/WMTSServer', + //图层名称 + 'beijing', + 'EPSG:4326_北京市_028mm_GB', + //最大级数 + 17, + null, + 'default', + 0 + ) + ``` + +### 关键接口 + +#### 1.【三维场景控件类】`Cesium.WebSceneControl(elementId, options)` + +| 参数名 | 类 型 | 说 明 | +| --------- | ----------------- | -------------------- | +| elementId | Element \| String | 放置视图的 div 的 id | +| options | Object | （可选）附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ---------------- | ------- | ------ | -------------------------------------------------------------------------------------- | +| viewerMode | String | ‘3D’ | （可选）初始视图模式默认为三维球视图 '2D'表示二维视图 'COLUMBUS_VIEW' 表示三维平面视图 | +| showInfo | Boolean | false | （可选）是否显示默认的属性信息框 | +| animation | Boolean | true | （可选）默认动画控制不显示 | +| baseLayerPicker | Boolean | true | （可选）是否创建图层控制显示小组件 | +| fullscreenButton | Boolean | true | （可选）是否创建全屏控制按钮 | +| vrButton | Boolean | false | （可选）是否创建 VR 按钮 | + +#### 2.【OGC 标准瓦片服务管理类】`CesiumZondy.Layer.OGCLayer` + +##### 【method】`appendWMTSTile(tileUrl, layerName, tileMatrixSetID, maximumLevel, startLevel)`：添加 WMTS 标准的瓦片服务 + +| 参数名 | 类 型 | 说 明 | +| --------------- | ------ | ------------------------------ | +| tileUrl | String | 瓦片服务地址 | +| layerName | String | 图层名称 | +| tileMatrixSetID | String | 瓦片数据集格式 | +| maximumLevel | Number | 最大级数 | +| startLevel | Number | 初始级别 正常默认为 0 有的为 1 | + +### 要点补充：WMTS 服务操作介绍 + +    WMTS 服务支持 RESTful 访问，其接口包括 GetCapabilities、GetTile 和 GetFeatureInfo3 个操作，这些操作允许用户访问切片地图。 + +    WMTS 服务属于一种瓦片地图服务，在此可了解下瓦片规则： + +![WMTS](./static/demo/mapboxgl/markdown/ogc/wmts.png) + +- WMTS 服务操作列表见下表所示 + +| 操作 | 实现要求 | 描述 | +| --------------- | -------- | ---------------------------------------------------------------------------------------- | +| GetCapabilities | 强制实现 | 获取 WMTS 的能力文档（即元数据文档），里面包含服务的所有信息 | +| GetTile | 强制实现 | 获取地图瓦片。该操作根据客户端发出的请求参数在服务端进行检索，服务器端返回地图瓦片图像。 | +| GetFeatureInfo | 选择实现 | 通过在 WMTS 图层上指定一定的条件，返回指定的地图瓦片内容对应的要素信息 | + +- GetTile 操作请求方法实现参数 + +| 参数名称 | 参数个数 | 参数类型和值 | +| ----------------------- | --------------- | ------------------------------------------------------ | +| service | 1 个(必选) | 字符类型，服务类型标识值为“WMTS” | +| request | 1 个(必选) | 字符类型，请求的操作值为“GetTile” | +| version | 1 个(必选) | 字符类型，值为请求的 WMTS 的版本号 | +| layer | 1 个(必选) | 字符类型，值为请求的图层名称 | +| style | 1 个(必选) | 字符类型，值为请求图层的渲染样式 | +| format | 1 个(必选) | 字符类型，值为瓦片地图的输出格式 | +| tileMatrixSet | 1 个(必选) | 字符类型，瓦片矩阵数据集，其值在服务的元数据文档中指定 | +| tileMatrix | 1 个(必选) | 字符类型，瓦片矩阵，其值在服务的元数据文档中指定 | +| tileRow | 1 个(必选) | 整型类型，值为大于 0 的整数，表示瓦片矩阵的行号 | +| tileCol | 1 个(必选) | 整型类型，值为大于 0 的整数，表示瓦片矩阵的列号 | +| Other sample dimensions | 0 或 1 个(可选) | 字符类型，其他允许的参数 | + +也可查看其英文原址介绍： +OpenGIS Web Map Tile Service Implementation Standard diff --git a/website/public/static/demo/military/markdown/ogc/wfs.md b/website/public/static/demo/military/markdown/ogc/wfs.md new file mode 100644 index 000000000..5491ad9a3 --- /dev/null +++ b/website/public/static/demo/military/markdown/ogc/wfs.md @@ -0,0 +1,25 @@ +# WFS + +    Web 要素服务（WFS）返回的是要素级的 GML 编码，并提供对要素的增加、修改、删除等事务操作，是对 Web 地图服务的进一步深入。OGC Web 要素服务允许客户端从多个 Web 要素服务中取得使用地理标记语言（GML）编码的地理空间数据，这个远东定义了五个操作：GetCapabilites 返回 Web 要素服务性能描述文档（用 XML 描述）；DescribeFeatureType 返回描述可以提供服务的任何要素结构的 XML 文档；GetFeature 为一个获取要素实例的请求提供服务；Transaction 为事务请求提供服务；LockFeature 处理在一个事务期间对一个或多个要素类型实例上锁的请求。 + +# 英文原址 + +[OpenGIS Web Feature Service (WFS) Implementation Specification](https://www.ogc.org/docs/is/) + +# GetFeature（获取图层要素） + +| URL Component | O/M | Description | +| :---------------------------------------------------------------------------- | :-- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| REQUEST=[GetFeature /GetFeatureWithLock] | M | The name of the WFS request. | +| OUTPUTFORMAT | O | `Default: text/xml;subtype=gml/3.1.1`The output format to use for the response. text/xml; subtype=gml/3.1.1 must be supported. Other output formats are possible as well as long as their MIME type is advertised in the capabilities document. | +| RESULTTYPE | O | `Default:results` The resulttype parameter is used to indicate whether a WFS should generate a complete response document of whether it should generate an empty response document indicating only the number of features that the query would return. A value of results indicates that a full response should be generated. A value of hits indicates that only a count of the number of features should be returned. | +| PROPERTYNAME | O | A list of properties may be specified for each feature type that is being queried. Refer to subclause 14.2.2 on how to form lists of parameters. A "\*" character can be used to indicate that all properties should be retrieved. There is a 1:1 mapping between each element in a FEATUREID or TYPENAME list and the PROPERTYNAME list. The absense of a value also indicates that all properties should be fetched. | +| FEATUREVERSION=[ALL/N] | O | If versioning is supported, the FEATUREVERSION parameter directs the WFS on which feature version to fetch.. A value of ALL indicates to fetch all versions of a feature. An integer value fetches the Nth version of a feature. No value indicates that the latest version of the feature should be fetched. | +| MAXFEATURES=N | O | A positive integer indicating the maximum number of features that the WFS should return in response to a query. If no value is specified then all result instances should be presented. | +| EXPIRY=N | O | This parameter may only be specified if the request is GetFeatureWithLock. It indicates the length of time (in minutes) that a lock will be held on the features in the result set. If the parameter is not specified then the locks will be held indefinitely. | +| SRSNAME | O | This parameter is used to specify a WFSsupported SRS that should be used for returned feature geometries. The value may be the DefaultSRS or any of the OtherSRS values that a WFS declares it supports in the capabilities document. The SRS may be indicated using EPSG codes or the URL form defined in [2]. If the parameter is not specified then the value of the DefaultSRS for the feature type being queried shall be used. | +| TYPENAME (Optional if FEATUREID isspecified.) | M | A list of feature type names to query. | +| FEATUREID (Mutually exclusive with FILTER and BBOX) | O | An enumerated list of feature instances to fetch identified by their feature identifiers. | +| FILTER (Prerequisite: TYPENAME) (Mutually exclusive with FEATUREID and BBOX) | O | A filter specification describes a set of features to operate upon. The filter is defined as specified in the Filter Encoding Specification [3]. If the FILTER parameter is used, one filter must be specified for each feature type listed in the TYPENAME parameter. Individual filters encoded in the FILTER parameter are enclosed in parentheses “(“ and “)”. | +| BBOX (Prerequisite: TYPENAME) (Mutually exclusive with FEATUREID and FILTER.) | O | In lieu of a FEATUREID or FILTER, a client may specify a bounding box as described in subclause 13.3.3. | +| SORTBY | O | The SORTBY parameter is used to specify a list of property names whose values should be used to order (upon presentation) the set of feature instances that satify the query. The value of the SORTBY parameter shall have the form “PropertyName [A/D],PropertyName [A/D],…]” where the letter A is used to indicate an ascending sort and the letter D is used to indicate a descending sort. If neither A nor D are specified, the default sort order shall be ascending. An example value might be: “SORTBY=Field1 D,Field2 D,Field3”. In this case the results are sorted by Field 1 descending, Field2 descending and Field3 ascending. | diff --git a/website/public/static/demo/military/markdown/ogc/wmts-uml.png b/website/public/static/demo/military/markdown/ogc/wmts-uml.png new file mode 100644 index 000000000..83be21ab3 Binary files /dev/null and b/website/public/static/demo/military/markdown/ogc/wmts-uml.png differ diff --git a/website/public/static/demo/military/markdown/ogc/wmts.png b/website/public/static/demo/military/markdown/ogc/wmts.png new file mode 100644 index 000000000..cf997f022 Binary files /dev/null and b/website/public/static/demo/military/markdown/ogc/wmts.png differ diff --git a/website/public/static/demo/military/markdown/query/query-2dByAtt.md b/website/public/static/demo/military/markdown/query/query-2dByAtt.md new file mode 100644 index 000000000..0b47dee5b --- /dev/null +++ b/website/public/static/demo/military/markdown/query/query-2dByAtt.md @@ -0,0 +1,140 @@ +## 二维地图文档属性查询 + +### 示例功能 + +    此功能实现基于二维地图文档的属性查询功能，即通过属性查询方式查询三维场景中加载的二维地图文档的要素信息，包括要素的几何信息与属性信息。 + +### 示例实现： + +    本示例需要使用【include-cesium-local.js】开发库实现。先初始化查询参数`CesiumZondy.Query.MapDocQuery`类对象，设置查询属性条件等参数后，调用`beginQuery()`方法进行查询，然后在回调中获取处理查询到的要素信息，解析所需的几何信息与属性信息进行展示。 + +> 开发库使用请参见*首页-概述-原生 JS 调用*内容。 + +### 实现步骤： + +**Step 1. 引用开发库**: +    本示例引用 local 本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维 WebGL 的功能； + +**Step 2. 创建三维地图容器并加载三维球控件**： +    创建 `id='GlobeView'` 的 div 作为三维视图的容器，并设置其样式，初始化 Cesium 三维球控件 `Cesium.WebSceneControl()` ，完成此步后可在三维场景中加载三维球控件； + +**Step 3. 加载地图数据**: +    使用`CesiumZondy.Layer.ThirdPartyLayer`的`appendTDTuMap()`方法加载天地图作为底图，然后再使用`CesiumZondy.Layer.TilesLayer`的`append2DDocTile()`方法叠加显示北京市地图数据； + +**Step 4. 实现查询功能**: +    实例化地图查询 `CesiumZondy.Query.MapDocQuery`对象，设置查询的数据与查询属性条件，再调用`beginQuery()` 方法进行查询，在其回调函数中获取解析查询结果并显示。 + +- Example： + + ```javascript + var queryParam = new CesiumZondy.Query.MapDocQuery() + //查询图层的URL路径 + //queryParam.gdbp = encodeURI("gdbp://MapGisLocal/北京市/ds/行政区/sfcls/北京市"); + queryParam.docName = '北京市' + queryParam.mapIndex = 0 + queryParam.layerID = 0 + queryParam.structs = '{"IncludeAttribute":true,"IncludeGeometry":true,"IncludeWebGraphic":false}' + //设置要素的属性条件 + queryParam.where = "省名='北京'" + //服务器的ip + queryParam.ip = ip + queryParam.port = port + queryParam.beginQuery( + function(result) { + //查询结果处理 + }, + function quryError(err) { + alert(err) + } + ) + ``` + + ```javascript + if (result != null) { + data = result + //解析显示要素的属性信息 + document.getElementById('code').value = result.SFEleArray[0].AttValue[2] + document.getElementById('name').value = result.SFEleArray[0].AttValue[3] + document.getElementById('spell').value = result.SFEleArray[0].AttValue[4] + document.getElementById('population').value = result.SFEleArray[0].AttValue[40] + //解析要素的几何信息 + var GeompointArray = new Array() + for (var pointlength = 0; pointlength < result.SFEleArray[0].fGeom.RegGeom[0].Rings[0].Arcs[0].Dots.length; pointlength++) { + var PntCartesian3 = Cesium.Cartesian3.fromDegrees(result.SFEleArray[0].fGeom.RegGeom[0].Rings[0].Arcs[0].Dots[pointlength].x, result.SFEleArray[0].fGeom.RegGeom[0].Rings[0].Arcs[0].Dots[pointlength].y, 10) + GeompointArray.push(PntCartesian3) + } + GeompointArray.push(GeompointArray[0]) + //构造几何绘制控制对象 + var entityController = new CesiumZondy.Manager.EntityController({ + viewer: webGlobe.viewer, + }) + //构造区对象 + var polygon = { + name: '立体区', + polygon: { + //坐标点 + hierarchy: GeompointArray, + //是否指定各点高度 + perPositionHeight: true, + //颜色 + material: new Cesium.Color(33 / 255, 150 / 255, 243 / 255, 0.5), + //轮廓线是否显示 + outline: true, + //轮廓线颜色 + outlineColor: Cesium.Color.BLACK, + }, + } + //绘制图形通用方法：对接Cesium原生特性 + var stericPolygon = entityController.appendGraphics(polygon) + } + ``` + +### 关键接口 + +#### 1.【三维场景控件类】`Cesium.WebSceneControl(elementId, options)` + +| 参数名 | 类 型 | 说 明 | +| --------- | ----------------- | -------------------- | +| elementId | Element \| String | 放置视图的 div 的 id | +| options | Object | （可选）附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ---------------- | ------- | ------ | -------------------------------------------------------------------------------------- | +| viewerMode | String | ‘3D’ | （可选）初始视图模式默认为三维球视图 '2D'表示二维视图 'COLUMBUS_VIEW' 表示三维平面视图 | +| showInfo | Boolean | false | （可选）是否显示默认的属性信息框 | +| animation | Boolean | true | （可选）默认动画控制不显示 | +| baseLayerPicker | Boolean | true | （可选）是否创建图层控制显示小组件 | +| fullscreenButton | Boolean | true | （可选）是否创建全屏控制按钮 | +| vrButton | Boolean | false | （可选）是否创建 VR 按钮 | + +#### 2.【地图数据显示地图图层类】`CesiumZondy.Layer.ThirdPartyLayer、CesiumZondy.Layer.TilesLayer` + +#### 3.【二维地图文档查询类】`CesiumZondy.Query.MapDocQuery` + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ------------ | --------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| docObj | MapDocObj | null | 查询对应的地图服务,参考 ClassLib.js 中的 MapDocObj 对象 | +| docName | String | '' | 地图服务名称 | +| mapIndex | Int | 0 | 地图在文档下得序号,一般为 0 | +| layerID | Int | 0 | 图层序号 | +| geometryType | String | '' | 几何类型描述,格式:'point | circle | rect | line | polygon' | +| geometry | String | '' | 点的集合,几何约束区域参数，其形式取决于 geometryType 的值，即取决于几何约束类型
point--x,y,[ neardistance],neardistance 为可选，即容差，下同
circle--x，y，r 注意在球上执行画圆时由于插件提供的圆为椭圆，给出的点集也是大量离散点，因此这种情况下，依然采用 polygon 方式执行查询
rect--xmin，ymin，xmax，ymax
line--x1,y1,x2,y2,x3,y3…;[neardistance]
polygon--x1,y1,x2,y2,x3,y3…第一个点与最后一个点相同 | +| where | String | '' | 查询属性条件，符合 SQL 查询规范的任何字符串 | +| f | String | 'json' | 返回结果的序列化形式 | +| objectIds | String | '' | 需要查询的要素 Id 号,格式：oid1，oid2，oid3 | +| structs | json | '' | 指定查询结果的结构，json 规范 | +| page | String | '' | 返回的要素分页的页数，默认返回第 0 页 | +| pageCount | String | '' | 要素结果集每页的记录数量，默认为 20 条/页 | +| rule | String | '' | 指定查询规则，Json 表示形式 | +| queryResult | String | '未查询' | 这里查询结果,这里主要是存放查询过程中报错信息 | +| ip | String | '' | 查询数据服务的 IP | +| port | String | '' | 查询数据服务的端口号 | + +##### 【method】`beginQuery(successCallback, errorCallback)`：开始查询 + +| 参数名 | 类 型 | 说 明 | +| --------------- | -------- | -------------------- | +| successCallback | function | 查询执行成功回调函数 | +| errorCallback | function | 询执行失败回调函数 | diff --git a/website/public/static/demo/military/markdown/query/query-2dByOID.md b/website/public/static/demo/military/markdown/query/query-2dByOID.md new file mode 100644 index 000000000..bdc90aa6c --- /dev/null +++ b/website/public/static/demo/military/markdown/query/query-2dByOID.md @@ -0,0 +1,140 @@ +## 二维地图文档 OID 查询 + +### 示例功能 + +    此功能实现基于二维地图文档的 OID 查询功能，即通过要素 OID 查询方式查询三维场景中加载的二维地图文档的要素信息，包括要素的几何信息与属性信息。 + +### 示例实现： + +    本示例需要使用【include-cesium-local.js】开发库实现。先初始化查询参数`CesiumZondy.Query.MapDocQuery`类对象，设置查询属性条件等参数后，调用`beginQuery()`方法进行查询，然后在回调中获取处理查询到的要素信息，解析所需的几何信息与属性信息进行展示。 + +> 开发库使用请参见*首页-概述-原生 JS 调用*内容。 + +### 实现步骤： + +**Step 1. 引用开发库**: +    本示例引用 local 本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维 WebGL 的功能； + +**Step 2. 创建三维地图容器并加载三维球控件**: +    创建 `id='GlobeView'` 的 div 作为三维视图的容器，并设置其样式，初始化 Cesium 三维球控件 `Cesium.WebSceneControl()` ，完成此步后可在三维场景中加载三维球控件； + +**Step 3. 加载地图数据**: +    使用`CesiumZondy.Layer.ThirdPartyLayer`的`appendTDTuMap()`方法加载天地图作为底图，然后再使用`CesiumZondy.Layer.TilesLayer`的`append2DDocTile()`方法叠加显示北京市地图数据； + +**Step 4. 实现查询功能**: +    实例化地图查询 `CesiumZondy.Query.MapDocQuery`对象，设置查询的数据与要素的 OID 条件，再调用`beginQuery()` 方法进行查询，在其回调函数中获取解析查询结果并显示。 + +- Example: + + ```javascript + var queryParam = new CesiumZondy.Query.MapDocQuery() + //查询图层的URL路径 + //queryParam.gdbp = encodeURI("gdbp://MapGisLocal/北京市/ds/行政区/sfcls/北京市"); + queryParam.docName = '北京市' + queryParam.mapIndex = 0 + queryParam.layerID = 0 + queryParam.structs = '{"IncludeAttribute":true,"IncludeGeometry":true,"IncludeWebGraphic":false}' + //设置要素的OID + queryParam.objectIds = '30' + //服务器的ip + queryParam.ip = ip + queryParam.port = port + queryParam.beginQuery( + function(result) { + //查询结果处理 + }, + function quryError(err) { + alert(err) + } + ) + ``` + + ```javascript + if (result != null) { + data = result + //解析显示要素的属性信息 + document.getElementById('code').value = result.SFEleArray[0].AttValue[2] + document.getElementById('name').value = result.SFEleArray[0].AttValue[3] + document.getElementById('spell').value = result.SFEleArray[0].AttValue[4] + document.getElementById('population').value = result.SFEleArray[0].AttValue[40] + //解析要素的几何信息 + var GeompointArray = new Array() + for (var pointlength = 0; pointlength < result.SFEleArray[0].fGeom.RegGeom[0].Rings[0].Arcs[0].Dots.length; pointlength++) { + var PntCartesian3 = Cesium.Cartesian3.fromDegrees(result.SFEleArray[0].fGeom.RegGeom[0].Rings[0].Arcs[0].Dots[pointlength].x, result.SFEleArray[0].fGeom.RegGeom[0].Rings[0].Arcs[0].Dots[pointlength].y, 10) + GeompointArray.push(PntCartesian3) + } + GeompointArray.push(GeompointArray[0]) + //构造几何绘制控制对象 + var entityController = new CesiumZondy.Manager.EntityController({ + viewer: webGlobe.viewer, + }) + //构造区对象 + var polygon = { + name: '立体区', + polygon: { + //坐标点 + hierarchy: GeompointArray, + //是否指定各点高度 + perPositionHeight: true, + //颜色 + material: new Cesium.Color(33 / 255, 150 / 255, 243 / 255, 0.5), + //轮廓线是否显示 + outline: true, + //轮廓线颜色 + outlineColor: Cesium.Color.BLACK, + }, + } + //绘制图形通用方法：对接Cesium原生特性 + var stericPolygon = entityController.appendGraphics(polygon) + } + ``` + +### 关键接口 + +#### 1.【三维场景控件类】`Cesium.WebSceneControl(elementId, options)` + +| 参数名 | 类 型 | 说 明 | +| --------- | ----------------- | -------------------- | +| elementId | Element \| String | 放置视图的 div 的 id | +| options | Object | （可选）附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ---------------- | ------- | ------ | -------------------------------------------------------------------------------------- | +| viewerMode | String | ‘3D’ | （可选）初始视图模式默认为三维球视图 '2D'表示二维视图 'COLUMBUS_VIEW' 表示三维平面视图 | +| showInfo | Boolean | false | （可选）是否显示默认的属性信息框 | +| animation | Boolean | true | （可选）默认动画控制不显示 | +| baseLayerPicker | Boolean | true | （可选）是否创建图层控制显示小组件 | +| fullscreenButton | Boolean | true | （可选）是否创建全屏控制按钮 | +| vrButton | Boolean | false | （可选）是否创建 VR 按钮 | + +#### 2.【地图数据显示地图图层类】`CesiumZondy.Layer.ThirdPartyLayer`、`CesiumZondy.Layer.TilesLayer` + +#### 3.【二维地图文档查询类】CesiumZondy.Query.MapDocQuery + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ------------ | --------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| docObj | MapDocObj | null | 查询对应的地图服务,参考 ClassLib.js 中的 MapDocObj 对象 | +| docName | String | '' | 地图服务名称 | +| mapIndex | Int | 0 | 地图在文档下得序号,一般为 0 | +| layerID | Int | 0 | 图层序号 | +| geometryType | String | '' | 几何类型描述,格式:'point | circle | rect | line | polygon' | +| geometry | String | '' | 点的集合,几何约束区域参数，其形式取决于 geometryType 的值，即取决于几何约束类型
point--x,y,[ neardistance],neardistance 为可选，即容差，下同
circle--x，y，r 注意在球上执行画圆时由于插件提供的圆为椭圆，给出的点集也是大量离散点，因此这种情况下，依然采用 polygon 方式执行查询
rect--xmin，ymin，xmax，ymax
line--x1,y1,x2,y2,x3,y3…;[neardistance]
polygon--x1,y1,x2,y2,x3,y3…第一个点与最后一个点相同 | +| where | String | '' | 查询属性条件，符合 SQL 查询规范的任何字符串 | +| f | String | 'json' | 返回结果的序列化形式 | +| objectIds | String | '' | 需要查询的要素 Id 号,格式：oid1，oid2，oid3 | +| structs | json | '' | 指定查询结果的结构，json 规范 | +| page | String | '' | 返回的要素分页的页数，默认返回第 0 页 | +| pageCount | String | '' | 要素结果集每页的记录数量，默认为 20 条/页 | +| rule | String | '' | 指定查询规则，Json 表示形式 | +| queryResult | String | '未查询' | 这里查询结果,这里主要是存放查询过程中报错信息 | +| ip | String | '' | 查询数据服务的 IP | +| port | String | '' | 查询数据服务的端口号 | + +##### 【method】`beginQuery(successCallback, errorCallback)`：开始查询 + +| 参数名 | 类 型 | 说 明 | +| --------------- | -------- | -------------------- | +| successCallback | function | 查询执行成功回调函数 | +| errorCallback | function | 询执行失败回调函数 | diff --git a/website/public/static/demo/military/markdown/query/query-2dBygeometry.md b/website/public/static/demo/military/markdown/query/query-2dBygeometry.md new file mode 100644 index 000000000..9f6aeb552 --- /dev/null +++ b/website/public/static/demo/military/markdown/query/query-2dBygeometry.md @@ -0,0 +1,141 @@ +## 二维地图文档几何查询 + +### 示例功能 + +    此功能实现基于二维地图文档的几何查询功能，即通过几何查询方式查询三维场景中加载的二维地图文档的要素信息，包括要素的几何信息与属性信息。 + +### 示例实现： + +    本示例需要使用【include-cesium-local.js】开发库实现。先初始化查询参数`CesiumZondy.Query.MapDocQuery`类对象，设置查询属性条件等参数后，调用`beginQuery()`方法进行查询，然后在回调中获取处理查询到的要素信息，解析所需的几何信息与属性信息进行展示。 + +> 开发库使用请参见*首页-概述-原生 JS 调用*内容。 + +### 实现步骤： + +**Step 1. 引用开发库**: +    本示例引用 local 本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维 WebGL 的功能； + +**Step 2. 创建三维地图容器并加载三维球控件**： +    创建 `id='GlobeView'` 的 div 作为三维视图的容器，并设置其样式，初始化 Cesium 三维球控件 `Cesium.WebSceneControl()` ，完成此步后可在三维场景中加载三维球控件； + +**Step 3. 加载地图数据**: +    使用`CesiumZondy.Layer.ThirdPartyLayer`的`appendTDTuMap()`方法加载天地图作为底图，然后再使用`CesiumZondy.Layer.TilesLayer`的`append2DDocTile()`方法叠加显示北京市地图数据； + +**Step 4. 实现查询功能**: +    实例化地图查询 `CesiumZondy.Query.MapDocQuery`对象，设置查询的数据与查询几何条件，再调用`beginQuery()` 方法进行查询，在其回调函数中获取解析查询结果并显示。 + +- Example: + + ```javascript + var queryParam = new CesiumZondy.Query.MapDocQuery() + //查询图层的URL路径 + //queryParam.gdbp = encodeURI("gdbp://MapGisLocal/北京市/ds/行政区/sfcls/北京市"); + queryParam.docName = '北京市' + queryParam.mapIndex = 0 + queryParam.layerID = 0 + queryParam.structs = '{"IncludeAttribute":true,"IncludeGeometry":true,"IncludeWebGraphic":false}' + //设置要素的几何查询方式与条件 + queryParam.geometryType = 'point' + queryParam.geometry = '116.3909, 39.9148' + //服务器的ip + queryParam.ip = ip + queryParam.port = port + queryParam.beginQuery( + function(result) { + //查询结果处理 + }, + function quryError(err) { + alert(err) + } + ) + ``` + + ```javascript + if (result != null) { + data = result + //解析显示要素的属性信息 + document.getElementById('code').value = result.SFEleArray[0].AttValue[2] + document.getElementById('name').value = result.SFEleArray[0].AttValue[3] + document.getElementById('spell').value = result.SFEleArray[0].AttValue[4] + document.getElementById('population').value = result.SFEleArray[0].AttValue[40] + //解析要素的几何信息 + var GeompointArray = new Array() + for (var pointlength = 0; pointlength < result.SFEleArray[0].fGeom.RegGeom[0].Rings[0].Arcs[0].Dots.length; pointlength++) { + var PntCartesian3 = Cesium.Cartesian3.fromDegrees(result.SFEleArray[0].fGeom.RegGeom[0].Rings[0].Arcs[0].Dots[pointlength].x, result.SFEleArray[0].fGeom.RegGeom[0].Rings[0].Arcs[0].Dots[pointlength].y, 10) + GeompointArray.push(PntCartesian3) + } + GeompointArray.push(GeompointArray[0]) + //构造几何绘制控制对象 + var entityController = new CesiumZondy.Manager.EntityController({ + viewer: webGlobe.viewer, + }) + //构造区对象 + var polygon = { + name: '立体区', + polygon: { + //坐标点 + hierarchy: GeompointArray, + //是否指定各点高度 + perPositionHeight: true, + //颜色 + material: new Cesium.Color(33 / 255, 150 / 255, 243 / 255, 0.5), + //轮廓线是否显示 + outline: true, + //轮廓线颜色 + outlineColor: Cesium.Color.BLACK, + }, + } + //绘制图形通用方法：对接Cesium原生特性 + var stericPolygon = entityController.appendGraphics(polygon) + } + ``` + +### 关键接口 + +#### 1.【三维场景控件类】`Cesium.WebSceneControl(elementId, options)` + +| 参数名 | 类 型 | 说 明 | +| --------- | ----------------- | -------------------- | +| elementId | Element \| String | 放置视图的 div 的 id | +| options | Object | （可选）附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ---------------- | ------- | ------ | -------------------------------------------------------------------------------------- | +| viewerMode | String | ‘3D’ | （可选）初始视图模式默认为三维球视图 '2D'表示二维视图 'COLUMBUS_VIEW' 表示三维平面视图 | +| showInfo | Boolean | false | （可选）是否显示默认的属性信息框 | +| animation | Boolean | true | （可选）默认动画控制不显示 | +| baseLayerPicker | Boolean | true | （可选）是否创建图层控制显示小组件 | +| fullscreenButton | Boolean | true | （可选）是否创建全屏控制按钮 | +| vrButton | Boolean | false | （可选）是否创建 VR 按钮 | + +#### 2.【地图数据显示地图图层类】`CesiumZondy.Layer.ThirdPartyLayer`、`CesiumZondy.Layer.TilesLayer` + +#### 3.【二维地图文档查询类】`CesiumZondy.Query.MapDocQuery` + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ------------ | --------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| docObj | MapDocObj | null | 查询对应的地图服务,参考 ClassLib.js 中的 MapDocObj 对象 | +| docName | String | '' | 地图服务名称 | +| mapIndex | Int | 0 | 地图在文档下得序号,一般为 0 | +| layerID | Int | 0 | 图层序号 | +| geometryType | String | '' | 几何类型描述,格式:'point | circle | rect | line | polygon' | +| geometry | String | '' | 点的集合,几何约束区域参数，其形式取决于 geometryType 的值，即取决于几何约束类型
point--x,y,[ neardistance],neardistance 为可选，即容差，下同
circle--x，y，r 注意在球上执行画圆时由于插件提供的圆为椭圆，给出的点集也是大量离散点，因此这种情况下，依然采用 polygon 方式执行查询
rect--xmin，ymin，xmax，ymax
line--x1,y1,x2,y2,x3,y3…;[neardistance]
polygon--x1,y1,x2,y2,x3,y3…第一个点与最后一个点相同 | +| where | String | '' | 查询属性条件，符合 SQL 查询规范的任何字符串 | +| f | String | 'json' | 返回结果的序列化形式 | +| objectIds | String | '' | 需要查询的要素 Id 号,格式：oid1，oid2，oid3 | +| structs | json | '' | 指定查询结果的结构，json 规范 | +| page | String | '' | 返回的要素分页的页数，默认返回第 0 页 | +| pageCount | String | '' | 要素结果集每页的记录数量，默认为 20 条/页 | +| rule | String | '' | 指定查询规则，Json 表示形式 | +| queryResult | String | '未查询' | 这里查询结果,这里主要是存放查询过程中报错信息 | +| ip | String | '' | 查询数据服务的 IP | +| port | String | '' | 查询数据服务的端口号 | + +##### 【method】`beginQuery(successCallback, errorCallback)`：开始查询 + +| 参数名 | 类 型 | 说 明 | +| --------------- | -------- | -------------------- | +| successCallback | function | 查询执行成功回调函数 | +| errorCallback | function | 询执行失败回调函数 | diff --git a/website/public/static/demo/military/markdown/query/query-attquery.md b/website/public/static/demo/military/markdown/query/query-attquery.md new file mode 100644 index 000000000..baad48ecf --- /dev/null +++ b/website/public/static/demo/military/markdown/query/query-attquery.md @@ -0,0 +1,113 @@ +## 三维模型数据属性查询 + +### 示例功能 + +    此功能通过模型要素的属性信息来查询已加载显示的三维模型数据的属性、几何等要素信息。 + +### 示例实现： + +    数据准备：本示例采用的数据经过两个步骤生成，首先需在 MapGIS Desktop 桌面平台软件中为景观模型数据生成 M3D 缓存，并组织为地图文档；然后在 MapGIS Server Manager 服务管理器中根据地图文档发布为三维地图服务。 + +    本示例需要使用【include-cesium-local.js】开发库实现，关键接口`CesiumZondy.Query.G3DDocQuery`提供的`queryG3DFeature`方法来查询模型要素信息 + +> 开发库使用请参见*首页-概述-原生 JS 调用*内容。 + +### 实现步骤： + +**Step 1. 引用开发库**： +    本示例引用 local 本地【include-cesium-local.js】开发库，完成此步骤后才可调用三维 WebGL 的功能； + +**Step 2. 创建布局**： +    创建`id='GlobeView'`的 div 作为三维视图的容器，并设置其样式； + +**Step 3. 构造三维场景控件**： +    实例化`Cesium.WebSceneControl`对象，完成此步骤后可在三维场景中加载三维球控件； + +- Example: + ```javascript + //构造三维视图对象（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', {}) + ``` + +**Step 4. 加载数据**: +    构造`CesiumZondy.Layer.M3DLayer`M3D 图层管理对象，调用`append()`方法，传入 M3D 缓存三维地图服务的 URL 地址即可加载浏览数据，同时可传入相关配置参数； + +- Example: + + ```javascript + //构造M3D模型层管理对象（视图） + var m3dLayer = new CesiumZondy.Layer.M3DLayer({ + viewer: webGlobe.viewer, + }) + //加载M3D地图文档（服务地址，配置参数） + var landscapeLayer = m3dLayer.append('http://develop.smaryun.com:6163/igs/rest/g3d/ModelM3D', { + //是否自动定位到数据位置 + autoReset: false, + //模型细节显示控制参数：较大值可提高渲染性能，较低值可提高视觉质量 + maximumScreenSpaceError: 8, + }) + ``` + + 加载数据默认会自动跳转定位到数据所在位置，如果需要自定义设置跳转的位置，可在`append()`方法中设置`autoReset: false`参数，取消自动定位，然后调用`SceneManager`视图功能管理对象的`flyToEx()`方法跳转视角； + + ```javascript + //视点跳转（经度，纬度，视角高度，方位角，俯仰角，翻滚角） + sceneManager.flyToEx(114.40298522106733, 30.465568703723072, { + height: 100.85856618500283, + heading: -45.4940479913348135, + pitch: -15, + roll: 0, + }) + ``` + +**Step 5. 初始化三维地图文档查询对象**: +    初始化三维地图文档查询对象：构造`CesiumZondy.Query.G3DDocQuery`三维地图文档查询对象，配置相关参数后调用 `queryG3DFeature`方法执行查询方法。 + +- Example: + ```javascript + var queryParam = new CesiumZondy.Query.G3DDocQuery() + //查询图层的URL路径 + queryParam.gdbp = encodeURI('gdbp://MapGisLocal/示例数据/ds/三维示例/sfcls/景观_模型') + //设置查询结果结构 + queryParam.structs = '{"IncludeAttribute":true,"IncludeGeometry":true,"IncludeWebGraphic":false}' + //属性查询 + queryParam.where = "test='19.6'" + //服务器的ip + queryParam.serverIp = ip + queryParam.serverPort = port + queryParam.queryG3DFeature( + function(result) {}, + function(err) {} + ) + ``` + +### 关键接口 + +#### 1.【三维地图文档查询类】`CesiumZondy.Query.G3DDocQuery(option)` + +- `options` 属性说明 + +| 参数名 | 类型 | 说明 | +| ------------ | ------ | ------------------------------------------------ | +| serverIp | string | igs 服务 ip | +| serverPort | string | igs 服务端口号 | +| docName | string | 三维文档的名称 | +| gdbp | string | 三维图层的 gdbpUrl | +| layerIndex | int | 图层序号 | +| geometryType | string | 几何类型描述 | +| geometry | string | 几何约束区域参数，其形式取决于 geometryType 的值 | +| where | string | 符合 SQL 查询规范的任何字符串 | +| objectIds | string | 需要查询的要素 Id 号 | +| structs | json | 指定查询结果的结构 | +| page | string | 回的要素分页的页数 | +| pageCount | string | 要素结果集每页的记录数量 | +| rule | json | 查询规则 | +| queryResult | string | 查询结果,这里主要是存放查询过程中报错信息 | + +##### 【method】 `queryG3DFeature(successCallback, errorCallback, type)` 查询对应的三维地图 + +| 参数名 | 类型 | 说明 | +| --------------- | -------- | ------------- | +| successCallback | function | 成功回调 | +| errorCallback | function | 失败回调 | +| type | String | 类型 post/get | diff --git a/website/public/static/demo/military/markdown/query/query-geomquery.md b/website/public/static/demo/military/markdown/query/query-geomquery.md new file mode 100644 index 000000000..6ca3d47fe --- /dev/null +++ b/website/public/static/demo/military/markdown/query/query-geomquery.md @@ -0,0 +1,117 @@ +## 三维模型数据几何查询 + +### 示例功能 + +    此功能通过几何信息来查询已加载显示的三维模型数据的属性、几何等要素信息。 + +### 示例实现： + +    数据准备：本示例采用的数据经过两个步骤生成，首先需在 MapGIS Desktop 桌面平台软件中为景观模型数据生成 M3D 缓存，并组织为地图文档；然后在 MapGIS Server Manager 服务管理器中根据地图文档发布为三维地图服务。 + +    本示例需要使用【include-cesium-local.js】开发库实现，关键接口`CesiumZondy.Query.G3DDocQuery`提供的`queryG3DFeature`方法来查询模型要素信息 + +> 开发库使用请参见*首页-概述-原生 JS 调用*内容。 + +### 实现步骤： + +**Step 1. 引用开发库**： +    本示例引用 local 本地【include-cesium-local.js】开发库，完成此步骤后才可调用三维 WebGL 的功能； + +**Step 2. 创建布局**： +    创建`id='GlobeView'`的 div 作为三维视图的容器，并设置其样式； + +**Step 3. 构造三维场景控件**： +    实例化`Cesium.WebSceneControl`对象，完成此步骤后可在三维场景中加载三维球控件； + +- Example + ```javascript + //构造三维视图对象（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', {}) + ``` + +**Step 4. 加载数据**: +    加载数据：构造`CesiumZondy.Layer.M3DLayer`M3D 图层管理对象，调用`append()`方法，传入 M3D 缓存三维地图服务的 URL 地址即可加载浏览数据，同时可传入相关配置参数； + +- Example: + + ```javascript + //构造M3D模型层管理对象（视图） + var m3dLayer = new CesiumZondy.Layer.M3DLayer({ + viewer: webGlobe.viewer, + }) + //加载M3D地图文档（服务地址，配置参数） + var landscapeLayer = m3dLayer.append('http://develop.smaryun.com:6163/igs/rest/g3d/ModelM3D', { + //是否自动定位到数据位置 + autoReset: false, + //模型细节显示控制参数：较大值可提高渲染性能，较低值可提高视觉质量 + maximumScreenSpaceError: 8, + }) + ``` + +加载数据默认会自动跳转定位到数据所在位置，如果需要自定义设置跳转的位置，可在`append()`方法中设置`autoReset: false`参数，取消自动定位，然后调用`SceneManager`视图功能管理对象的`flyToEx()`方法跳转视角； + +- Example: + ```javascript + //视点跳转（经度，纬度，视角高度，方位角，俯仰角，翻滚角） + sceneManager.flyToEx(114.40298522106733, 30.465568703723072, { + height: 100.85856618500283, + heading: -45.4940479913348135, + pitch: -15, + roll: 0, + }) + ``` + +**Step 5. 初始化三维地图文档查询对象**: +    初始化三维地图文档查询对象：构造`CesiumZondy.Query.G3DDocQuery`三维地图文档查询对象，配置相关参数后调用 `queryG3DFeature`方法执行查询方法。 + +- Example: + ```javascript + var queryParam = new CesiumZondy.Query.G3DDocQuery() + //查询图层的URL路径 + queryParam.gdbp = encodeURI('gdbp://MapGisLocal/示例数据/ds/三维示例/sfcls/景观_模型') + //设置查询结果结构 + queryParam.structs = '{"IncludeAttribute":true,"IncludeGeometry":true,"IncludeWebGraphic":false}' + //几何查询 + //设置查询方式 + queryParam.geometryType = 'Point3D' + //设置查询的点坐标 + queryParam.geometry = 92.37674872254775 + ',' + 163.57024299752067 + ',' + 21 + //服务器的ip + queryParam.serverIp = ip + queryParam.serverPort = port + queryParam.queryG3DFeature( + function(result) {}, + function(err) {} + ) + ``` + +### 关键接口 + +#### 1.【三维地图文档查询类】`CesiumZondy.Query.G3DDocQuery(option)` + +- `options` 属性说明 + +| 参数名 | 类型 | 说明 | +| ------------ | ------ | ------------------------------------------------ | +| serverIp | string | igs 服务 ip | +| serverPort | string | igs 服务端口号 | +| docName | string | 三维文档的名称 | +| gdbp | string | 三维图层的 gdbpUrl | +| layerIndex | int | 图层序号 | +| geometryType | string | 几何类型描述 | +| geometry | string | 几何约束区域参数，其形式取决于 geometryType 的值 | +| where | string | 符合 SQL 查询规范的任何字符串 | +| objectIds | string | 需要查询的要素 Id 号 | +| structs | json | 指定查询结果的结构 | +| page | string | 回的要素分页的页数 | +| pageCount | string | 要素结果集每页的记录数量 | +| rule | json | 查询规则 | +| queryResult | string | 查询结果,这里主要是存放查询过程中报错信息 | + +##### 【method】 `queryG3DFeature(successCallback, errorCallback, type)` 查询对应的三维地图 + +| 参数名 | 类型 | 说明 | +| --------------- | -------- | ------------- | +| successCallback | function | 成功回调 | +| errorCallback | function | 失败回调 | +| type | String | 类型 post/get | diff --git a/website/public/static/demo/military/markdown/query/query-m3deditor.md b/website/public/static/demo/military/markdown/query/query-m3deditor.md new file mode 100644 index 000000000..02a1bd358 --- /dev/null +++ b/website/public/static/demo/military/markdown/query/query-m3deditor.md @@ -0,0 +1,64 @@ +## M3D 数据交互编辑 + +### 示例功能 + +    本示例实现移动在三维场景中加载的 M3D 数据，只是修改数据上层显示位置，并不会修改数据本身。 + +### 示例实现 + +    本示例需要使用【include-cesium-local.js】开发库实现，首先加载 M3D 数据，然后构造`Cesium.TransformEditor()` 平移编辑器对象，获取其模型视图成员`viewModel`，然后调用模型视图的`setModeTranslation()`设置模型视图平移方法、调用`activate()`激活平移工具，即可激活模型数据，会展示 XYZ 三条轴线，拖动轴线即可实现模型在对应方向上的平移。 + +> 开发库使用请参见*首页-概述-原生 JS 调用*内容。 + +### 实现步骤： + +**Step 1. 引用开发库**： +    引用开发库：本示例引用 local 本地【include-cesium-local.js】开发库，完成此步骤后才可调用三维 WebGL 的功能； + +**Step 2. 创建布局**： +    创建三维视图 Div 容器，构造三维场景控件 WebSceneControl，构造并设置鼠标位置信息显示控件，加载 Google 地图作为底图显示； + +**Step 3. 加载数据**: +    加载 M3D 数据：例如加载 M3D 地质体数据； + +- Example: + ```Javascript + //构造M3D模型层管理对象（视图） + var m3dLayer = new CesiumZondy.Layer.M3DLayer({ + viewer: webGlobe.viewer + }); + //加载M3D地图文档（服务地址，配置参数） + modelLayers = m3dLayer.append( + 'http://develop.smaryun.com:6163/igs/rest/g3d/钻孔分层点_Sur_000_Ent', + { + maximumScreenSpaceError: 1 + } + ); + ``` + +**Step 4. 创建编辑器**: +    创建编辑器：初始化 `Cesium.TransformEditor()` 平移编辑器对象，然后调用模型视图的 `setModeTranslation()` 设置模型视图平移，最后调用模型视图的 `activate()`方法激活平移工具，即可在场景中添加 XYZ 三条轴线，拖动轴线即可实现模型在对应方向上的平移。 + +- Example: + + ```Javascript + //创建平移编辑器 + var transformEditor = new Cesium.TransformEditor({ + container: webGlobe.viewer.container, + scene: webGlobe.viewer.scene, + transform: modelLayers[0]._root.transform, + boundingSphere: modelLayers[0].boundingSphere + }); + //获取模型视图对象 + var viewModel = transformEditor.viewModel; + //设置模型视图平移 + viewModel.setModeTranslation(); + //激活工具 + viewModel.activate(); + ``` + +### 关键接口 + +#### 1.【三维场景控件】WebSceneControl + +#### 2.【平移编辑器类】Cesium.TransformEditor(options)（API 暂无） diff --git a/website/public/static/demo/military/markdown/query/query-m3dquery.md b/website/public/static/demo/military/markdown/query/query-m3dquery.md new file mode 100644 index 000000000..ef064e932 --- /dev/null +++ b/website/public/static/demo/military/markdown/query/query-m3dquery.md @@ -0,0 +1,140 @@ +## M3D 数据单体查询 + +### 示例功能 + +    本示例实现在三维场景中展示 M3D 模型数据，并实现单体查询功能。 + +### 示例实现 + +    本示例需要使用【include-cesium-local.js】开发库实现，关键接口为：`Cesium.WebSceneControl.Scene`类的`pick()`方法来选取要素，`CesiumZondy.Manager.AnalysisManager`类的`startCustomDisplay()`方法来实现模型高亮。 + +> 开发库使用请参见*首页-概述-原生 JS 调用*内容。 + +### 实现步骤 + +**Step 1. 引用开发库**： +    引用开发库：本示例引用 local 本地【include-cesium-local.js】开发库，完成此步骤后才可调用三维 WebGL 的功能； + +**Step 2. 创建布局**： +    创建三维视图 Div 容器，构造三维场景控件 WebSceneControl，构造并设置鼠标位置信息显示控件，加载 Google 地图作为底图显示； + +**Step 3. 加载数据**: +    加载 M3D 模型数据：例如 M3D 建筑粗模数据； + +- Example: + + ```javascript + //构造M3D模型层管理对象（视图） + var m3dLayer = new CesiumZondy.Layer.M3DLayer({ + viewer: webGlobe.viewer, + }) + //加载M3D地图文档（服务地址，配置参数） + var layerList = m3dLayer.append('http://develop.smaryun.com:6163/igs/rest/g3d/buildings1', { + maximumScreenSpaceError: 1, + }) + ``` + +**Step 4. 注册鼠标点击杀事件**: +    注册鼠标点击事件：构造`CesiumZondy.Manager.MouseEventManager`对象，调用`registerMouseEvent()`方法注册鼠标左键单击事件，在事件方法中选取要素，然后构造`CesiumZondy.Manager.AnalysisManager`对象，调用其`startCustomDisplay()`方法实现高亮。 + +- Example: + ```javascript + //构造鼠标事件管理对象 + var mouseEventManager = new CesiumZondy.Manager.MouseEventManager({ + viewer: webGlobe.viewer, + }) + //注册鼠标左键单击事件 + mouseEventManager.registerMouseEvent('LEFT_CLICK', highlightPicking) + ``` + +鼠标左键单击事件方法：实现高亮； + +- Example: + + ```javascript + /*鼠标左键单击事件回调：模型高亮*/ + function highlightPicking(movement) { + //根据鼠标点击位置选择对象 + var pickedFeature = webGlobe.scene.pick(movement.position) + + //获取要素的瓦片集 + var currentLayer = [pickedFeature.tileset] + //获取名称属性 + var title = pickedFeature.getProperty('name') + //采用_分割 + var values = title.split('_') + //获取数组中第三个数值，即为要素的ID + var vlueNumber = parseInt(values[2]) + //构建数组 + var idList = [vlueNumber] + //构建参数：设置颜色 + var options = { + //高亮颜色 + color: new Cesium.Color(255 / 255, 255 / 255, 0 / 255, 1), + //高亮模式：REPLACE为替换 + colorBlendMode: Cesium.Cesium3DTileColorBlendMode.REPLACE, + } + + //构造分析功能管理对象 + var analysisManager = new CesiumZondy.Manager.AnalysisManager({ + viewer: webGlobe.viewer, + }) + //开始闪烁查找到的模型 + analysisManager.startCustomDisplay(currentLayer, idList, options) + } + ``` + +### 关键接口 + +#### 1.【三维场景控件类】`Cesium.WebSceneControl(elementId, options)` + +| 参数名 | 类 型 | 说 明 | +| --------- | ----------------- | -------------------- | +| elementId | Element \| String | 放置视图的 div 的 id | +| options | Object | （可选）附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ---------------- | ------- | ------ | -------------------------------------------------------------------------------------- | +| viewerMode | String | ‘3D’ | （可选）初始视图模式默认为三维球视图 '2D'表示二维视图 'COLUMBUS_VIEW' 表示三维平面视图 | +| showInfo | Boolean | false | （可选）是否显示默认的属性信息框 | +| animation | Boolean | true | （可选）默认动画控制不显示 | +| baseLayerPicker | Boolean | true | （可选）是否创建图层控制显示小组件 | +| fullscreenButton | Boolean | true | （可选）是否创建全屏控制按钮 | +| vrButton | Boolean | false | （可选）是否创建 VR 按钮 | + +#### 2.【鼠标事件管理类】`MouseEventManager` + +##### 【method】`registerMouseEvent(eventType, callbackFun, handler) → {Handler}`：注册鼠标事件 + +| 参数名 | 类 型 | 说 明 | +| ----------- | -------- | ----------------------------------------------------------------------------------------------------- | +| eventType | String | 事件类型：LEFT_CLICK、RIGHT_CLICK、MOUSE_MOVE、LEFT_DOUBLE_CLICK、RIGHT_DOUBLE_CLICK、WHEEL(鼠标滚轮) | +| callbackFun | function | 回调函数 | +| handler | Object | 事件句柄 | + +#### 3.【分析功能管理类】AnalysisManager + +##### 【method】`startCustomDisplay(layerList, idList, options)`：高亮显示 + +| 参数名 | 类 型 | 说 明 | +| ------------ | -------------- | -------- | +| layerList | Array.\ | 图层列表 | +| idList | Array.\ | id 列表 | +| optionsParam | Object | 扩展属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ---------------- | -------------------------- | ------------------------------------------- | ------------------------------------------------------- | +| color | Color | new Cesium.Color(1.0,0,0,0.5) | （可选）高亮颜色 | +| colorBlendMode | Cesium3DTileColorBlendMode | Cesium.Cesium3DTileColorBlendMode.HIGHLIGHT | （可选）高亮模式 | +| colorBlendAmount | Number | 0.5 | （可选）混合系数 | +| applyForLayer | Boolean | false | （可选）是否应用至图层 | +| negate | Color | true | （可选）是否取反 ——意思是除了 id 列表中的要素应用 color | +| negateColor | Color | new Cesium.Color.WHITE | （可选）取反的颜色 只有在 negate=true 的时候才起作用 | +| style | String | 'EdgeHighlight' | （可选）高亮模式//'EdgeHighlight'高亮+描边 'Edge'//描边 | +| edgeColor | Color | new Cesium.Color(0, 0, 1,1.0) | （可选）默认红色 | + +##### 【method】`stopCustomDisplay()`：停止全部高亮 diff --git a/website/public/static/demo/military/markdown/query/query-oidquery.md b/website/public/static/demo/military/markdown/query/query-oidquery.md new file mode 100644 index 000000000..6716da809 --- /dev/null +++ b/website/public/static/demo/military/markdown/query/query-oidquery.md @@ -0,0 +1,115 @@ +## 三维模型数据 OID 查询 + +### 示例功能 + +    此功能通过模型要素的 OID 信息来查询已加载显示的三维模型数据的属性、几何等要素信息。 + +### 示例实现： + +    数据准备：本示例采用的数据经过两个步骤生成，首先需在 MapGIS Desktop 桌面平台软件中为景观模型数据生成 M3D 缓存，并组织为地图文档；然后在 MapGIS Server Manager 服务管理器中根据地图文档发布为三维地图服务。 + +    本示例需要使用【include-cesium-local.js】开发库实现，关键接口`CesiumZondy.Query.G3DDocQuery`提供的`queryG3DFeature`方法来查询模型要素信息。 + +> 开发库使用请参见*首页-概述-原生 JS 调用*内容。 + +### 实现步骤： + +**Step 1. 引用开发库**： +    本示例引用 local 本地【include-cesium-local.js】开发库，完成此步骤后才可调用三维 WebGL 的功能； + +**Step 2. 创建布局**： +    创建`id='GlobeView'`的 div 作为三维视图的容器，并设置其样式； + +**Step 3. 构造三维场景控件**： +    实例化`Cesium.WebSceneControl`对象，完成此步骤后可在三维场景中加载三维球控件； + +- Example: + ```javascript + //构造三维视图对象（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', {}) + ``` + +**Step 4. 加载数据**: +    加载数据：构造`CesiumZondy.Layer.M3DLayer`M3D 图层管理对象，调用`append()`方法，传入 M3D 缓存三维地图服务的 URL 地址即可加载浏览数据，同时可传入相关配置参数； + +- Example: + ```javascript + //构造M3D模型层管理对象（视图） + var m3dLayer = new CesiumZondy.Layer.M3DLayer({ + viewer: webGlobe.viewer, + }) + //加载M3D地图文档（服务地址，配置参数） + var landscapeLayer = m3dLayer.append('http://develop.smaryun.com:6163/igs/rest/g3d/ModelM3D', { + //是否自动定位到数据位置 + autoReset: false, + //模型细节显示控制参数：较大值可提高渲染性能，较低值可提高视觉质量 + maximumScreenSpaceError: 8, + }) + ``` + +加载数据默认会自动跳转定位到数据所在位置，如果需要自定义设置跳转的位置，可在`append()`方法中设置`autoReset: false`参数，取消自动定位，然后调用`SceneManager`视图功能管理对象的`flyToEx()`方法跳转视角； + +- Example: + ```javascript + //视点跳转（经度，纬度，视角高度，方位角，俯仰角，翻滚角） + sceneManager.flyToEx(114.40298522106733, 30.465568703723072, { + height: 100.85856618500283, + heading: -45.4940479913348135, + pitch: -15, + roll: 0, + }) + ``` + +**Step 5. 初始化三维地图文档查询对象**: +    初始化三维地图文档查询对象：构造`CesiumZondy.Query.G3DDocQuery`三维地图文档查询对象，配置相关参数后调用 `queryG3DFeature`方法执行查询方法。 + +- Example: + ```javascript + var queryParam = new CesiumZondy.Query.G3DDocQuery() + //查询图层的URL路径 + queryParam.gdbp = encodeURI('gdbp://MapGisLocal/示例数据/ds/三维示例/sfcls/景观_模型') + //设置查询结果结构 + queryParam.structs = '{"IncludeAttribute":true,"IncludeGeometry":true,"IncludeWebGraphic":false}' + //OID查询 + queryParam.objectIds = '1' + //服务器的ip + queryParam.serverIp = ip + queryParam.serverPort = port + queryParam.queryG3DFeature( + function(result) {}, + function(err) {} + ) + ``` + +### 关键接口 + +#### 1.【三维地图文档查询类】`CesiumZondy.Query.G3DDocQuery(option)` + +- `options` 属性说明 + +| 参数名 | 类型 | 说明 | +| ------------ | ------ | ------------------------------------------------ | +| serverIp | string | igs 服务 ip | +| serverPort | string | igs 服务端口号 | +| docName | string | 三维文档的名称 | +| gdbp | string | 三维图层的 gdbpUrl | +| layerIndex | int | 图层序号 | +| geometryType | string | 几何类型描述 | +| geometry | string | 几何约束区域参数，其形式取决于 geometryType 的值 | +| where | string | 符合 SQL 查询规范的任何字符串 | +| objectIds | string | 需要查询的要素 Id 号 | +| structs | json | 指定查询结果的结构 | +| page | string | 回的要素分页的页数 | +| pageCount | string | 要素结果集每页的记录数量 | +| rule | json | 查询规则 | +| queryResult | string | 查询结果,这里主要是存放查询过程中报错信息 | + +##### 【method】 `queryG3DFeature(successCallback, errorCallback, type)` 查询对应的三维地图 + +- `queryG3DFeature` 方法主要参数 + +| 参数名 | 类型 | 说明 | +| --------------- | -------- | ------------- | +| successCallback | function | 成功回调 | +| errorCallback | function | 失败回调 | +| type | String | 类型 post/get | diff --git a/website/public/static/demo/military/markdown/scene/scene-2D.md b/website/public/static/demo/military/markdown/scene/scene-2D.md new file mode 100644 index 000000000..075417025 --- /dev/null +++ b/website/public/static/demo/military/markdown/scene/scene-2D.md @@ -0,0 +1,52 @@ +## 二维模式 + +### 示例功能 + +此功能用于将三维球展开，变成二维地图模式。 + +### 示例实现： + +本示例需要使用include-cesium-local.js开发库实现，初始化Cesium三维球控件 `Cesium.WebSceneControl()` 后初始化视图功能管理类 `CesiumZondy.Manager.SceneManager()` ，调用视图功能管理类的 `changeSceneMode()` 方法切换地图显示模式。 + +### 实现步骤： + +1. 引用开发库：本示例引用local本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维WebGL的功能； + +2. 创建三维地图容器并加载三维球控件：创建 `id='GlobeView'` 的div作为三维视图的容器，并设置其样式，初始化Cesium三维球控件 `Cesium.WebSceneControl()` ，完成此步后可在三维场景中加载三维球控件； + +``` Javascript +//构造三维视图类（视图容器div的id，三维视图设置参数） +var webGlobe = new Cesium.WebSceneControl('GlobeView', { + terrainExaggeration: 1, +}); +``` + +``` html +
+``` + +3. 模式切换：初始化视图功能管理类 `CesiumZondy.Manager.SceneManager()` ，调用视图功能管理类的 `changeSceneMode()` 方法切换地图显示模式； + +``` Javascript + //初始化视图功能管理类 + var sceneManager = new CesiumZondy.Manager.SceneManager({ + viewer: webGlobe.viewer + }); + //切换场景模式 + sceneManager.changeSceneMode('2D', 1); +``` + +### 关键接口 + +#### 1. 【三维视图的主要类】 `Cesium.WebSceneControl` + +#### 2. 【视图功能管理类】 `CesiumZondy.Manager.SceneManager` + +##### (1) `changeSceneMode(sceneMode, duration)` 切换场景模式 + +> `changeSceneMode` 方法主要参数 + +|参数名|类型|说明| +|-|-|-| +|sceneMode|String|场景模式'3D', '2D', 'COLUMBUS_VIEW'(平面三维)| +|duration|Number|动画持续时间，<=0时，保持场景范围不变| diff --git a/website/public/static/demo/military/markdown/scene/scene-3Dground.md b/website/public/static/demo/military/markdown/scene/scene-3Dground.md new file mode 100644 index 000000000..775c30811 --- /dev/null +++ b/website/public/static/demo/military/markdown/scene/scene-3Dground.md @@ -0,0 +1,52 @@ +## 平面三维模式 + +### 示例功能 + +此功能用于将三维球变成平面三维模式。 + +### 示例实现： + +本示例需要使用include-cesium-local.js开发库实现，初始化Cesium三维球控件 `Cesium.WebSceneControl()` 后初始化视图功能管理类 `CesiumZondy.Manager.SceneManager()` ，调用视图功能管理类的 `changeSceneMode()` 方法切换地图显示模式。 + +### 实现步骤： + +1. 引用开发库：本示例引用local本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维WebGL的功能； + +2. 创建三维地图容器并加载三维球控件：创建 `id='GlobeView'` 的div作为三维视图的容器，并设置其样式，初始化Cesium三维球控件 `Cesium.WebSceneControl()` ，完成此步后可在三维场景中加载三维球控件； + +``` Javascript +//构造三维视图类（视图容器div的id，三维视图设置参数） +var webGlobe = new Cesium.WebSceneControl('GlobeView', { + terrainExaggeration: 1, +}); +``` + +``` html +
+``` + +3. 模式切换：初始化视图功能管理类 `CesiumZondy.Manager.SceneManager()` ，调用视图功能管理类的 `changeSceneMode()` 方法切换地图显示模式； + +``` Javascript + //初始化视图功能管理类 + var sceneManager = new CesiumZondy.Manager.SceneManager({ + viewer: webGlobe.viewer + }); + //切换场景模式 + sceneManager.changeSceneMode('COLUMBUS_VIEW', 1) +``` + +### 关键接口 + +#### 1. 【三维视图的主要类】 `Cesium.WebSceneControl` + +#### 2. 【视图功能管理类】 `CesiumZondy.Manager.SceneManager` + +##### (1) `changeSceneMode(sceneMode, duration)` 切换场景模式 + +> `changeSceneMode` 方法主要参数 + +|参数名|类型|说明| +|-|-|-| +|sceneMode|String|场景模式'3D', '2D', 'COLUMBUS_VIEW'(平面三维)| +|duration|Number|动画持续时间，<=0时，保持场景范围不变| diff --git a/website/public/static/demo/military/markdown/scene/scene-changeSkyBox.md b/website/public/static/demo/military/markdown/scene/scene-changeSkyBox.md new file mode 100644 index 000000000..e69de29bb diff --git a/website/public/static/demo/military/markdown/scene/scene-fly.md b/website/public/static/demo/military/markdown/scene/scene-fly.md new file mode 100644 index 000000000..372dcc555 --- /dev/null +++ b/website/public/static/demo/military/markdown/scene/scene-fly.md @@ -0,0 +1,161 @@ +## 视点跳转 + +### 示例功能 + +    本示例实现场景视点跳转功能，根据坐标点在三维球上进行定位跳转。此功能为场景视图的基础功能，应用非常广泛，可根据具体应用场景需求调用合适的方法。 + +### 示例实现： + +    本示例需要使用【include-cesium-local.js】开发库实现，初始化 Cesium 三维球控件 `Cesium.WebSceneControl()` , 初始化视图功能管理类 `CesiumZondy.Manager.SceneManager()` ，调用视图功能管理类的如下 4 个视点跳转方法进行视点跳转。 + +- `flyTo`：视点跳转简单方法，根据经纬度、视角高度、跳转持续时间进行视点跳转； +- `flyToComm`：视点跳转通用方法，根据经纬度、视角高度，以及原生的可扩展参数进行视点跳转； +- `flyToEx`：视点跳转扩展方法，根据经纬度，以及可扩展的参数（包括视角高度、持续时间、方位角、俯仰角、翻滚角）进行视点跳转； +- `flyToFeatureById`：根据 ID 飞行到特定要素位置，即通过图层的某个要素进行定位跳转。 + +### 实现步骤： + +**Step 1. 引用开发库**: +    本示例引用 local 本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维 WebGL 的功能； + +**Step 2. 创建三维地图容器并加载三维球控件**： +    创建 `id='GlobeView'` 的 div 作为三维视图的容器，并设置其样式，初始化 Cesium 三维球控件 `Cesium.WebSceneControl()` ，完成此步后可在三维场景中加载三维球控件； + +- Example: + + ```Javascript + //构造三维视图类（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', { + terrainExaggeration: 1, + }); + ``` + + ```html +
+ ``` + +**Step 3. 视点跳转**: +    初始化视图功能管理类 `CesiumZondy.Manager.SceneManager()` ，根据具体场景需求选择调用视图功能管理类的几个视点跳转方法（ `flyTo、flyToComm、flyToEx、flyToFeatureById`）进行视点跳转。 + +- Example: + ```Javascript + //初始化视图功能管理类 + var sceneManager = new CesiumZondy.Manager.SceneManager({ + viewer: webGlobe.viewer + }); + ``` + +* flyTo() + +* Example: + ```Javascript + //跳转视图(北京) + sceneManager.flyTo(116.44, 40, 300000, 2); + ``` + +- flyToComm() + +* Example: + ```Javascript + //跳转视图（武汉） + sceneManager.flyToComm(114.3, 30.6, 100000); + ``` + +- flyToEx() + +* Example: + ```Javascript + //视点跳转（中地科技园） + sceneManager.flyToEx(114.40298522106733, 30.465568703723072, { + height: 100.85856618500283, + heading: -45.4940479913348135, + pitch: -15, + roll: 0 + }); + ``` + +- flyToFeatureById() + +* Example: + + ```Javascript + //加载M3D地图文档（服务地址，配置参数） + Layer2 = m3dLayer.append('http://develop.smaryun.com:6163/igs/rest/g3d/buildings1', { + autoReset: false, + //模型细节显示控制参数：较大值可提高渲染性能，较低值可提高视觉质量 + maximumScreenSpaceError: 0 + }); + //视点跳转-根据 ID 飞行到特定要素位置（上海） + sceneManager.flyToFeatureById(Layer2, 10 ,{ + height: 950, + heading: 22, + pitch: -20, + roll: 0 + }); + ``` + +### 关键接口 + +#### 1.【三维场景控件类】`Cesium.WebSceneControl(elementId, options)` + +| 参数名 | 类 型 | 说 明 | +| --------- | ----------------- | -------------------- | +| elementId | Element \| String | 放置视图的 div 的 id | +| options | Object | （可选）附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ---------------- | ------- | ------ | -------------------------------------------------------------------------------------- | +| viewerMode | String | ‘3D’ | （可选）初始视图模式默认为三维球视图 '2D'表示二维视图 'COLUMBUS_VIEW' 表示三维平面视图 | +| showInfo | Boolean | false | （可选）是否显示默认的属性信息框 | +| animation | Boolean | true | （可选）默认动画控制不显示 | +| baseLayerPicker | Boolean | true | （可选）是否创建图层控制显示小组件 | +| fullscreenButton | Boolean | true | （可选）是否创建全屏控制按钮 | +| vrButton | Boolean | false | （可选）是否创建 VR 按钮 | + +#### 2. 【视图功能管理类】 `CesiumZondy.Manager.SceneManager` + +##### 【method】`flyTo(lon, lon, heightParam, duration)` 跳转 + +| 参数名 | 类型 | 说明 | +| ----------- | ------ | ------------ | +| lon | Number | 经度 | +| lon | Number | 纬度 | +| heightParam | Number | 视角高度 | +| duration | Number | 跳转持续时间 | + +##### 【method】 `flyToComm(lon, lat, heightParam, options opt)` 通用跳转接口 + +| 参数名 | 类型 | 说明 | +| ----------- | ------ | -------------------------- | +| lon | Number | 经度 | +| lon | Number | 纬度 | +| heightParam | Number | 视角高度 | +| options | Object | （可选）扩展属性，兼容原生 | + +##### 【method】 `flyToEx(lon, lon, options opt)` 跳转到 + +| 参数名 | 类型 | 说明 | +| ------- | ------ | -------------------------- | +| lon | Number | 经度 | +| lon | Number | 纬度 | +| options | Object | （可选）扩展属性，兼容原生 | + +- `options` 属性参数 + +| 参数名 | 类型 | 说明 | +| -------- | ------ | ---------------- | +| height | Number | （可选）视角高度 | +| duration | Number | （可选）持续时间 | +| heading | Number | （可选）方位角 | +| pitch | Number | （可选）俯仰角 | +| roll | Number | （可选）翻滚角 | + +##### 【method】 `flyToFeatureById(layerList, id, optionsParamopt)` 根据 ID 飞行到特定要素位置 + +| 参数名 | 类型 | 说明 | +| --------- | ------------- | ---------------- | +| layerList | Array. | 图层列表 | +| id | Array. | ID 列表 | +| options | Object | （可选）扩展属性 | diff --git a/website/public/static/demo/military/markdown/scene/scene-operation.md b/website/public/static/demo/military/markdown/scene/scene-operation.md new file mode 100644 index 000000000..47de553f5 --- /dev/null +++ b/website/public/static/demo/military/markdown/scene/scene-operation.md @@ -0,0 +1,134 @@ +## 场景基本操作 + +### 示例功能 + +    本示例实现场景的基本操作功能，包括场景视图缩放、复位、三维球自转、设置天空盒等。 + +### 示例实现： + +    本示例需要使用【include-cesium-local.js】开发库实现。先初始化 Cesium 三维球控件 `Cesium.WebSceneControl()` , 然后初始化视图功能管理类 `CesiumZondy.Manager.SceneManager()` ，调用视图功能管理类的如下几个方法分别实现对应的场景操作功能。 + +- `zoomIn`：放大； +- `zoomOut`：缩小； +- `goHome`：复位； +- `openRotation`：开启自转； +- `closeRotation`：关闭自转； +- `changeSkyBox`：修改天空盒。 + +### 实现步骤： + +**Step 1. 引用开发库**： +    本示例引用 local 本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维 WebGL 的功能； + +**Step 2. 创建三维地图容器并加载三维球控件**: +    创建 `id='GlobeView'` 的 div 作为三维视图的容器，并设置其样式，初始化 Cesium 三维球控件 `Cesium.WebSceneControl()` ，完成此步后可在三维场景中加载三维球控件； + +- Example: + + ```Javascript + //构造三维视图类（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', { + terrainExaggeration: 1, + }); + ``` + + ```html +
+ ``` + +**Step 3. 实现场景操作功能**: +    初始化视图功能管理类 `CesiumZondy.Manager.SceneManager()` ，根据具体场景操作需求选择调用视图功能管理类的对应方法实现。 + +- Example: + ```Javascript + //初始化视图功能管理类 + var sceneManager = new CesiumZondy.Manager.SceneManager({ + viewer: webGlobe.viewer + }); + ``` + +* zoomin() + +- Example: + + ```Javascript + sceneManager.zoomin();//放大 + ``` + +- zoomout() + +- Example: + + ```Javascript + sceneManager.zoomout();//缩小 + ``` + +- goHome() + +- Example: + + ```Javascript + sceneManager.goHome();//复位 + ``` + +- openRotation()与 closeRotation() + +```Javascript + sceneManager.openRotation();//开启自转 + ceneManager.closeRotation();//关闭自转 +``` + +- changeSkyBox() + +- Example: + ```Javascript + var skybox = new Cesium.SkyBox({ + sources: { + positiveX: './static/libs/cdn/Cesium/Assets/Textures/SkyBox2/front.jpg', + negativeX: './static/libs/cdn/Cesium/Assets/Textures/SkyBox2/back.jpg', + positiveY: './static/libs/cdn/Cesium/Assets/Textures/SkyBox2/left.jpg', + negativeY: './static/libs/cdn/Cesium/Assets/Textures/SkyBox2/right.jpg', + positiveZ: './static/libs/cdn/Cesium/Assets/Textures/SkyBox2/top.jpg', + negativeZ: './static/libs/cdn/Cesium/Assets/Textures/SkyBox2/bottom.jpg' + } + }); + sceneManager.changeSkyBox(skybox); + ``` + +### 关键接口 + +#### 1.【三维场景控件类】`Cesium.WebSceneControl(elementId, options)` + +| 参数名 | 类 型 | 说 明 | +| --------- | ----------------- | -------------------- | +| elementId | Element \| String | 放置视图的 div 的 id | +| options | Object | （可选）附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ---------------- | ------- | ------ | -------------------------------------------------------------------------------------- | +| viewerMode | String | ‘3D’ | （可选）初始视图模式默认为三维球视图 '2D'表示二维视图 'COLUMBUS_VIEW' 表示三维平面视图 | +| showInfo | Boolean | false | （可选）是否显示默认的属性信息框 | +| animation | Boolean | true | （可选）默认动画控制不显示 | +| baseLayerPicker | Boolean | true | （可选）是否创建图层控制显示小组件 | +| fullscreenButton | Boolean | true | （可选）是否创建全屏控制按钮 | +| vrButton | Boolean | false | （可选）是否创建 VR 按钮 | + +#### 2. 【视图功能管理类】 `CesiumZondy.Manager.SceneManager` + +##### 【method】 `zoomIn()` 放大 + +##### 【method】 `zoomOut()` 缩小 + +##### 【method】 `goHome()` 复位 + +##### 【method】 `openRotation()` 开启自转 + +##### 【method】 `closeRotation()` 关闭自转 + +##### 【method】 `changeSkyBox(skybox)` 修改天空盒 + +| 参数名 | 类型 | 说明 | +| ------ | ---------------------------- | ---------- | +| skybox | SkyBox,即 Cesium.SkyBox 对象 | 天空盒对象 | diff --git a/website/public/static/demo/military/markdown/scene/scene-rotationView.md b/website/public/static/demo/military/markdown/scene/scene-rotationView.md new file mode 100644 index 000000000..67c146c04 --- /dev/null +++ b/website/public/static/demo/military/markdown/scene/scene-rotationView.md @@ -0,0 +1,132 @@ +## 绕点旋转 + +### 示例功能 + +    本示例实现场景绕点旋转功能，配合场景绕点旋转事件，实现开启、暂停、停止绕点旋转功能。 + +### 示例实现： + +    本示例需要使用【include-cesium-local.js】开发库实现。 +先初始化 Cesium 三维球控件 `Cesium.WebSceneControl()` , 然后初始化公共方法管理类 `CesiumZondy.Manager.CommonFuncManager()` ，分别调用如下对应的方法实现开启、暂停、停止绕点旋转功能。 + +- `rotationView`：绕点旋转事件，相机绕点飞行一周或者相机绕自身旋转一周； +- `removeRotationView`：移除绕点自旋转事件； +- `startRotationAroundPos`：开始围绕旋转，与暂停配合使用； +- `pauseRotationView`：暂停围绕旋转，与开始围绕旋转配合使用。 + +### 实现步骤： + +**Step 1. 引用开发库**： +    本示例引用 local 本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维 WebGL 的功能； + +**Step 2. 创建三维地图容器并加载三维球控件**: +    创建 `id='GlobeView'` 的 div 作为三维视图的容器，并设置其样式，初始化 Cesium 三维球控件 `Cesium.WebSceneControl()` ，完成此步后可在三维场景中加载三维球控件； + +- Example: + + ```Javascript + //构造三维视图类（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', { + terrainExaggeration: 1, + }); + ``` + + ```html +
+ ``` + +**Step 3. 实现场景绕点旋转控制功能**: +    初始化公共方法管理类 `CesiumZondy.Manager.CommonFuncManager()` ，分别调用如下对应的方法实现开启、暂停、停止绕点旋转功能。 + +- rotationView() + +* Example: + ```Javascript + //设置旋转点 + var opt ={ + position:Cesium.Cartesian3.fromDegrees(108.96044700955785,34.21796237686321,60.99772929683282), + pitch:-15, + distance:700, + duration:10, + ClockRange:Cesium.ClockRange.CLAMPED + }; + //初始化公共方法管理类 + var commfun = new CesiumZondy.Manager.CommonFuncManager({ + viewer: webGlobe.viewer + }); + //初始化创建一个绕点旋转事件 + var update = commfun.rotationView('rotationAroundPos',opt) ; + ``` + +- startRotationAroundPos() + +* Example: + ```Javascript + //设置开始绕点旋转 + commfun.startRotationAroundPos(update); + ``` + +- pauseRotationView() + +* Example: + ```Javascript + //设置暂停绕点旋转 + commfun.pauseRotationView(update); + ``` + +- removeRotationView() + +* Example: + ```Javascript + //设置移除绕点旋转事件 + commfun.removeRotationView(update); + ``` + +### 关键接口 + +#### 1.【三维场景控件类】`Cesium.WebSceneControl(elementId, options)` + +| 参数名 | 类 型 | 说 明 | +| --------- | ----------------- | -------------------- | +| elementId | Element \| String | 放置视图的 div 的 id | +| options | Object | （可选）附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ---------------- | ------- | ------ | -------------------------------------------------------------------------------------- | +| viewerMode | String | ‘3D’ | （可选）初始视图模式默认为三维球视图 '2D'表示二维视图 'COLUMBUS_VIEW' 表示三维平面视图 | +| showInfo | Boolean | false | （可选）是否显示默认的属性信息框 | +| animation | Boolean | true | （可选）默认动画控制不显示 | +| baseLayerPicker | Boolean | true | （可选）是否创建图层控制显示小组件 | +| fullscreenButton | Boolean | true | （可选）是否创建全屏控制按钮 | +| vrButton | Boolean | false | （可选）是否创建 VR 按钮 | + +#### 2. 【公共方法管理类】 `CesiumZondy.Manager.CommonFuncManager` + +##### 【method】 `rotationView(typeopt, optionsParam opt) → {Event}` 绕点旋转事件，相机绕点飞行一周或者相机绕自身旋转一周 + +| 参数名 | 类型 | 默认值 | 说明 | +| ------------ | ------ | ------------------- | ------------------------------------ | +| type | String | 'rotationAroundPos' | （可选）旋转类型，默认绕相机自身旋转 | +| optionsParam | Object | —— | （可选）附加参数信息 | + +- `optionsParam` 属性参数 + +| 参数名 | 类型 | 默认值 | 说明 | +| ---------- | ---------- | ------------------------- | ----------------------------------- | +| position | Cartesian3 | | （可选）要进行围绕旋转的点 | +| pitch | Number | -30 | （可选）相机的俯仰角 单位（度） | +| distance | Number | 500000 | （可选）相机距离点的距离 单位（米） | +| duration | Number | 10 | 绕点飞行一周所用的时间 单位（秒） | +| ClockRange | Number | Cesium.ClockRange.CLAMPED | （可选）循环方式 | + +##### 【method】 `removeRotationView(event)` 移除绕点自旋转事件 + +| 参数名 | 类型 | 说明 | +| ------ | ---------------------------------------- | ------------ | +| event | Event,即 rotationView 方法返回的事件对象 | 绕点旋转事件 | + +##### 【method】 `startRotationAroundPos()` 开始围绕旋转，与暂停配合使用 + +##### 【method】 `pauseRotationView()` 暂停围绕旋转，与开始围绕旋转配合使用 diff --git a/website/public/static/demo/military/markdown/scene/scene-sceneMode.md b/website/public/static/demo/military/markdown/scene/scene-sceneMode.md new file mode 100644 index 000000000..c43661594 --- /dev/null +++ b/website/public/static/demo/military/markdown/scene/scene-sceneMode.md @@ -0,0 +1,83 @@ +## 场景视图模式 + +### 示例功能 + +    场景视图模式提供三种模式：三维球面模式、三维平面模式、二维地图模式，在实际应用中可根据具体应用场景设置。 + +### 示例实现： + +    本示例需要使用【include-cesium-local.js】开发库实现，初始化 Cesium 三维球控件 `Cesium.WebSceneControl()` 后初始化视图功能管理类 `CesiumZondy.Manager.SceneManager()` ，调用视图功能管理类的 `changeSceneMode()` 方法切换地图显示模式。 + +### 实现步骤： + +**Step 1. 引用开发库**： +    本示例引用 local 本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维 WebGL 的功能； + +**Step 2. 创建三维地图容器并加载三维球控件**: +    创建 `id='GlobeView'` 的 div 作为三维视图的容器，并设置其样式，初始化 Cesium 三维球控件 `Cesium.WebSceneControl()` ，完成此步后可在三维场景中加载三维球控件； + +- Example: + + ```Javascript + //构造三维视图类（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', { + terrainExaggeration: 1, + }); + ``` + + ```html +
+ ``` + +**Step 3. 模式切换**: +    模式切换：初始化视图功能管理类 `CesiumZondy.Manager.SceneManager()` ，调用视图功能管理类的 `changeSceneMode()` 方法切换地图显示模式。 + +- Example: + + ```Javascript + //初始化视图功能管理类 + var sceneManager = new CesiumZondy.Manager.SceneManager({ + viewer: webGlobe.viewer + }); + let mode = document.getElementById("modeSelect").value; + //根据选择切换场景视图模式 + if (mode == '3D') { + //切换场景模式为三维球面 + sceneManager.changeSceneMode('3D', 1); + } else if (mode === '3DC') { + //切换场景模式为三维平面 + sceneManager.changeSceneMode('COLUMBUS_VIEW', 1); + } else if (mode === '2D') { + //切换场景模式为二维地图 + sceneManager.changeSceneMode('2D', 1); + } + ``` + +### 关键接口 + +#### 1.【三维场景控件类】`Cesium.WebSceneControl(elementId, options)` + +| 参数名 | 类 型 | 说 明 | +| --------- | ----------------- | -------------------- | +| elementId | Element \| String | 放置视图的 div 的 id | +| options | Object | （可选）附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ---------------- | ------- | ------ | -------------------------------------------------------------------------------------- | +| viewerMode | String | ‘3D’ | （可选）初始视图模式默认为三维球视图 '2D'表示二维视图 'COLUMBUS_VIEW' 表示三维平面视图 | +| showInfo | Boolean | false | （可选）是否显示默认的属性信息框 | +| animation | Boolean | true | （可选）默认动画控制不显示 | +| baseLayerPicker | Boolean | true | （可选）是否创建图层控制显示小组件 | +| fullscreenButton | Boolean | true | （可选）是否创建全屏控制按钮 | +| vrButton | Boolean | false | （可选）是否创建 VR 按钮 | + +#### 2. 【视图功能管理类】 `CesiumZondy.Manager.SceneManager` + +##### 【method】 `changeSceneMode(sceneMode, duration)` 切换场景模式 + +| 参数名 | 类型 | 说明 | +| --------- | ------ | --------------------------------------------- | +| sceneMode | String | 场景模式'3D', '2D', 'COLUMBUS_VIEW'(平面三维) | +| duration | Number | 动画持续时间，<=0 时，保持场景范围不变 | diff --git a/website/public/static/demo/military/markdown/scene/scene-sceneOut.md b/website/public/static/demo/military/markdown/scene/scene-sceneOut.md new file mode 100644 index 000000000..60a5eefd1 --- /dev/null +++ b/website/public/static/demo/military/markdown/scene/scene-sceneOut.md @@ -0,0 +1,101 @@ +## 场景出图 + +### 示例功能 + +    此功能用于将当前场景输出成图片。可通过 CommonFuncManager 类的 outputImageFile()与 outputImageObj()实现此功能。 + +### 示例实现： + +    本示例需要使用【include-cesium-local.js】开发库实现。先初始化 Cesium 三维球控件 `Cesium.WebSceneControl()` 加载数据；然后初始化常用功能管理类 `CesiumZondy.Manager.CommonFuncManager()` ，调用常用功能管理类的 `outputImageFile()` 方法或`outputImageObj()`方法进行场景输出图片。 + +- `outputImageFile`：将屏幕截图输出为`图片文件`； +- `outputImageObj`：将屏幕截图输出为`图像对象`，可保存为不同类型图片，应用场景比较丰富。 + +### 实现步骤： + +**Step 1. 引用开发库**： +    本示例引用 local 本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维 WebGL 的功能； + +**Step 2. 创建三维地图容器并加载三维球控件**: +    创建 `id='GlobeView'` 的 div 作为三维视图的容器，并设置其样式，初始化 Cesium 三维球控件 `Cesium.WebSceneControl()` ，完成此步后可在三维场景中加载三维球控件； + +- Example: + + ```Javascript + //构造三维视图类（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', { + terrainExaggeration: 1, + }); + ``` + + ```html +
+ ``` + +**Step 3. 场景出图**: +    初始化常用功能管理类 `CesiumZondy.Manager.CommonFuncManager()` ，调用常用功能管理类的 `outputImageFile()` 方法或`outputImageObj()`方法进行场景输出图片。 + +- 使用 outputImageFile() + +* Example: + ```Javascript + var commonFuncManager = new CesiumZondy.Manager.CommonFuncManager({ + viewer: webGlobe.viewer + }); + //当前屏幕图片输出为一个图片文件 + commonFuncManager.outputImageFile("图片.png"); + ``` + +- 使用 outputImageObj() + +* Example: + ```Javascript + var comm = new CesiumZondy.Manager.CommonFuncManager({ + viewer: webGlobe.viewer + }); + //当前屏幕输出为一个图片对象 + var res = comm.outputImageObj(); + //下载打印此图片对象为png + res.downloadPng("image.png"); + //可输出如下其他格式，可结合其他应用场景使用： + //res.toImg(); + //res.toBase64(); + //res.downloadPng(name); + //res.toCanvas(); + //res.toJpeg(); + //res.toPng(); + ``` + +说明：outputImageObj()返回的是一个图像对象，可直接输出为图片，也可以结合其他应用场景使用，如将图像输出到 Canvas 显示等。 + +### 关键接口 + +#### 1.【三维场景控件类】`Cesium.WebSceneControl(elementId, options)` + +| 参数名 | 类 型 | 说 明 | +| --------- | ----------------- | -------------------- | +| elementId | Element \| String | 放置视图的 div 的 id | +| options | Object | （可选）附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ---------------- | ------- | ------ | -------------------------------------------------------------------------------------- | +| viewerMode | String | ‘3D’ | （可选）初始视图模式默认为三维球视图 '2D'表示二维视图 'COLUMBUS_VIEW' 表示三维平面视图 | +| showInfo | Boolean | false | （可选）是否显示默认的属性信息框 | +| animation | Boolean | true | （可选）默认动画控制不显示 | +| baseLayerPicker | Boolean | true | （可选）是否创建图层控制显示小组件 | +| fullscreenButton | Boolean | true | （可选）是否创建全屏控制按钮 | +| vrButton | Boolean | false | （可选）是否创建 VR 按钮 | + +#### 2. 【常用功能管理类】`CesiumZondy.Manager.CommonFuncManager` + +##### 【method】 `outputImageFile(fileName)` 屏幕截图输出为图片文件 + +- `outputImageFile` 方法主要参数 + +| 参数名 | 类型 | 说明 | +| -------- | ------ | ------------ | +| fileName | String | 输出图片名称 | + +##### 【method】`outputImageObj()` 屏幕截图输出为图像对象，返回值为图片对象（Object） diff --git a/website/public/static/demo/military/markdown/scene/scene-screenPosition.md b/website/public/static/demo/military/markdown/scene/scene-screenPosition.md new file mode 100644 index 000000000..7c259dd84 --- /dev/null +++ b/website/public/static/demo/military/markdown/scene/scene-screenPosition.md @@ -0,0 +1,137 @@ +## 屏幕坐标转换计算 + +    本示例实现根据鼠标事件获取的屏幕坐标进行坐标转换与相关计算的功能，包括常用的屏幕坐标转笛卡尔坐标、屏幕坐标转经纬度、根据经纬度计算高度值。 + +### 示例实现： + +    本示例需要使用【include-cesium-local.js】开发库实现。先初始化 Cesium 三维球控件 `Cesium.WebSceneControl()` , 然后初始化公共方法管理类 `CesiumZondy.Manager.CommonFuncManager()` ，分别调用如下对应的方法实现屏幕坐标转换与相关计算功能。 + +- `screenPositionToCartesian`：屏幕坐标转为笛卡尔坐标； +- `screenPositionToCartographic`：屏幕坐标转为经纬度坐标； +- `getHeightFromDegrees`：根据经纬度计算高度值。 + +### 实现步骤： + +**Step 1. 引用开发库**： +    本示例引用 local 本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维 WebGL 的功能； + +**Step 2. 创建三维地图容器并加载三维球控件**: +    创建 `id='GlobeView'` 的 div 作为三维视图的容器，并设置其样式，初始化 Cesium 三维球控件 `Cesium.WebSceneControl()` ，完成此步后可在三维场景中加载三维球控件； + +- Example: + + ```Javascript + //构造三维视图类（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', { + terrainExaggeration: 1, + }); + ``` + + ```html +
+ ``` + +**Step 3. 实现屏幕坐标转换与相关计算功能**: +    初始化公共方法管理类 `CesiumZondy.Manager.CommonFuncManager()` ，分别调用如下对应的方法实现屏幕坐标转笛卡尔坐标、屏幕坐标转经纬度、根据经纬度计算高度值的功能。 + +- Example: + ```Javascript + //初始化公共方法管理类 + var commonFuncManager = new CesiumZondy.Manager.CommonFuncManager({ + viewer: webGlobe.viewer + }); + //初始化鼠标事件管理类 + var mouseEventManager = new CesiumZondy.Manager.MouseEventManager({ + viewer: webGlobe.viewer + }); + ``` + +* screenPositionToCartesian() + +* Example: + ```Javascript + //添加鼠标左键单击事件获取屏幕坐标点 + mouseEventManager.registerMouseEvent("LEFT_CLICK", leftToCartesian); + function leftToCartesian(movement) { + //将鼠标左键点击的屏幕坐标转为笛卡尔坐标 + var position = commonFuncManager.screenPositionToCartesian(movement.position); + } + ``` + +- screenPositionToCartographic() + +* Example: + ```Javascript + //添加鼠标左键单击事件获取屏幕坐标点 + mouseEventManager.registerMouseEvent("LEFT_CLICK", leftToCartographic); + function leftToCartographic(movement) { + //将鼠标左键点击的屏幕坐标转为经纬度坐标 + var result = commonFuncManager.screenPositionToCartographic(movement.position); + let lng=Cesium.Math.toDegrees(result.longitude);//转为经度值 + let lat=Cesium.Math.toDegrees(result.latitude);//转为纬度值 + } + ``` + +- getHeightFromDegrees() + +* Example: + + ```Javascript + //添加鼠标左键单击事件获取屏幕坐标点 + mouseEventManager.registerMouseEvent("LEFT_CLICK", leftToHeightFromDegrees); + function leftToHeightFromDegrees(movement) { + //屏幕坐标转笛卡尔坐标 + var cartesian = webGlobe.viewer.getCartesian3Position(movement.position, cartesian); + var cartographic = Cesium.Cartographic.fromCartesian(cartesian); + var lng = Cesium.Math.toDegrees(cartographic.longitude); + var lat = Cesium.Math.toDegrees(cartographic.latitude); + + //根据鼠标左键单击点经纬度计算其高度值 + var height = commonFuncManager.getHeightFromDegrees(lng, lat); + } + ``` + +### 关键接口 + +#### 1.【三维场景控件类】`Cesium.WebSceneControl(elementId, options)` + +| 参数名 | 类 型 | 说 明 | +| --------- | ----------------- | -------------------- | +| elementId | Element \| String | 放置视图的 div 的 id | +| options | Object | （可选）附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ---------------- | ------- | ------ | -------------------------------------------------------------------------------------- | +| viewerMode | String | ‘3D’ | （可选）初始视图模式默认为三维球视图 '2D'表示二维视图 'COLUMBUS_VIEW' 表示三维平面视图 | +| showInfo | Boolean | false | （可选）是否显示默认的属性信息框 | +| animation | Boolean | true | （可选）默认动画控制不显示 | +| baseLayerPicker | Boolean | true | （可选）是否创建图层控制显示小组件 | +| fullscreenButton | Boolean | true | （可选）是否创建全屏控制按钮 | +| vrButton | Boolean | false | （可选）是否创建 VR 按钮 | + +#### 2. 【公共方法管理类】 `CesiumZondy.Manager.CommonFuncManager` + +##### 【method】 `screenPositionToCartesian(position) → {Position}` 屏幕坐标转为笛卡尔坐标，返回三维笛卡尔坐标点对象（Position） + +- `screenPositionToCartesian` 方法主要参数 + +| 参数名 | 类型 | 说明 | +| -------- | -------- | ---------- | +| position | Position | 屏幕坐标点 | + +##### 【method】 `screenPositionToCartographic(position) → {Position}` 屏幕坐标转为经纬度坐标，返回三维经纬度坐标点(单位弧度)对象（Position） + +- `screenPositionToCartographic` 方法主要参数 + +| 参数名 | 类型 | 说明 | +| -------- | -------- | ---------- | +| position | Position | 屏幕坐标点 | + +##### 【method】 `getHeightFromDegrees(longitude, latitude) → {Number}` 根据经纬度计算高度值，返回计算的高度值（Number） + +| 参数名 | 类型 | 说明 | +| --------- | ------ | ------ | +| longitude | Number | 经度值 | +| latitude | Number | 纬度值 | diff --git a/website/public/static/demo/military/markdown/scene/scene-setView.md b/website/public/static/demo/military/markdown/scene/scene-setView.md new file mode 100644 index 000000000..0c30113ab --- /dev/null +++ b/website/public/static/demo/military/markdown/scene/scene-setView.md @@ -0,0 +1,74 @@ +## 设置当前视图范围 + +    本示例实现根据鼠标事件获取的屏幕坐标进行坐标转换与相关计算的功能，包括常用的屏幕坐标转笛卡尔坐标、屏幕坐标转经纬度、根据经纬度计算高度值。 + +### 示例实现： + +    本示例需要使用【include-cesium-local.js】开发库实现。先初始化 Cesium 三维球控件 `Cesium.WebSceneControl()` , 然后初始化场景视图功能管理类 `CesiumZondy.Manager.SceneManager()` ，调用 setView()方法实现设置当前视图范围功能。 + +### 实现步骤： + +**Step 1. 引用开发库**： +    本示例引用 local 本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维 WebGL 的功能； + +**Step 2. 创建三维地图容器并加载三维球控件**: +    创建 `id='GlobeView'` 的 div 作为三维视图的容器，并设置其样式，初始化 Cesium 三维球控件 `Cesium.WebSceneControl()` ，完成此步后可在三维场景中加载三维球控件； + +- Example: + + ```Javascript + //构造三维视图类（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', { + terrainExaggeration: 1, + }); + ``` + + ```html +
+ ``` + +**Step 3. 实现设置当前视图范围功能**: +    初始化场景视图功能管理类 `CesiumZondy.Manager.SceneManager()` ，调用 setView()方法实现设置当前视图范围功能。 + +- Example: + ```Javascript + //初始化视图功能管理类 + var sceneManager = new CesiumZondy.Manager.SceneManager({ + viewer: webGlobe.viewer + }); + //设置当前视图范围 + sceneManager.setView(114.40298522106733, 30.465568703723072, 100.85856618500283, -45.4940479913348135, -15, 0); + ``` + +### 关键接口 + +#### 1.【三维场景控件类】`Cesium.WebSceneControl(elementId, options)` + +| 参数名 | 类 型 | 说 明 | +| --------- | ----------------- | -------------------- | +| elementId | Element \| String | 放置视图的 div 的 id | +| options | Object | （可选）附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ---------------- | ------- | ------ | -------------------------------------------------------------------------------------- | +| viewerMode | String | ‘3D’ | （可选）初始视图模式默认为三维球视图 '2D'表示二维视图 'COLUMBUS_VIEW' 表示三维平面视图 | +| showInfo | Boolean | false | （可选）是否显示默认的属性信息框 | +| animation | Boolean | true | （可选）默认动画控制不显示 | +| baseLayerPicker | Boolean | true | （可选）是否创建图层控制显示小组件 | +| fullscreenButton | Boolean | true | （可选）是否创建全屏控制按钮 | +| vrButton | Boolean | false | （可选）是否创建 VR 按钮 | + +#### 2. 【视图功能管理类】 `CesiumZondy.Manager.SceneManager` + +##### 【method】 `setView(lon, lat, height, curHeading, curPitch, curRoll)` 设置当前视图范围 + +| 参数名 | 类型 | 说明 | +| ---------- | ------ | -------------------------- | +| lon | Number | 经度 | +| lat | Number | 纬度 | +| height | Number | 高度 | +| curHeading | Number | 绕垂直于地心的轴旋转的度数 | +| curPitch | Number | 绕纬度线旋转度数 | +| curRoll | Number | 绕经度线旋转度数 | diff --git a/website/public/static/demo/military/markdown/scene/scene-showPosition.md b/website/public/static/demo/military/markdown/scene/scene-showPosition.md new file mode 100644 index 000000000..beac706d9 --- /dev/null +++ b/website/public/static/demo/military/markdown/scene/scene-showPosition.md @@ -0,0 +1,124 @@ +## 常用控件 + +### 示例功能 + +    此功能示例显示常用的基础控件，包括鼠标位置、导航控件、比例尺、罗盘等。鼠标位置控件显示当前鼠标所在点的经纬度，高程等位置信息；导航控件提供放大、缩小、复位基础场景导航功能；罗盘控件则为方位指向，通常与导航控件结合使用。 + +### 示例实现： + +    本示例需要使用【include-cesium-local.js】开发库实现。先初始化 Cesium 三维球控件 `Cesium.WebSceneControl()` ，然后初始化视图功能管理类 `CesiumZondy.Manager.SceneManager()` ，调用视图功能管理类的 `showPosition()` 方法显示位置信息；再初始化通用功能管理类`CesiumZondy.Manager.CommonFuncManager()` ，调用`createNavigationTool()`方法显示常用导航控件。 + +### 实现步骤： + +**Step 1. 引用开发库**： +    本示例引用 local 本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维 WebGL 的功能； + +**Step 2. 创建三维地图容器并加载三维球控件**: +    创建 `id='GlobeView'` 的 div 作为三维视图的容器，并设置其样式，初始化 Cesium 三维球控件 `Cesium.WebSceneControl()` ，完成此步后可在三维场景中加载三维球控件； + +- Example: + + ```Javascript + //构造三维视图类（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', { + terrainExaggeration: 1, + }); + ``` + + ```html +
+ ``` + +**Step 3. 创建坐标显示容器，显示鼠标位置**: +    创建一个用于承载显示位置信息的容器，然后初始化视图功能管理类 `CesiumZondy.Manager.SceneManager()` ，调用视图功能管理类的 `showPosition()` 方法显示位置信息； + +- Example: + + ```html + +
+ + +
+ ``` + + ```Javascript + //初始化视图功能管理类 + var sceneManager = new CesiumZondy.Manager.SceneManager({ + viewer: webGlobe.viewer + }); + //显示鼠标位置控件 + sceneManager.showPosition('coordinateDiv'); + ``` + +**Step 4. 显示常用导航控件**: +    初始化通用功能管理类`CesiumZondy.Manager.CommonFuncManager()` ，调用 `createNavigationTool()` 方法显示常用导航控件，通过设置缩放、比例尺、罗盘的可见属性进行控制。 + +- Example: + ```Javascript + //初始化通用功能管理类 + var commFun = new CesiumZondy.Manager.CommonFuncManager({ + viewer: webGlobe.viewer + }); + //显示导航控件（罗盘、场景导航、比例尺） + var navigation = commFun.createNavigationTool({ + enableCompass: true, + enableZoomControls: true, + enableDistanceLegend: true, + enableCompassOuterRing: true + }); + ``` + +### 关键接口 + +#### 1.【三维场景控件类】`Cesium.WebSceneControl(elementId, options)` + +| 参数名 | 类 型 | 说 明 | +| --------- | ----------------- | -------------------- | +| elementId | Element \| String | 放置视图的 div 的 id | +| options | Object | （可选）附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ---------------- | ------- | ------ | -------------------------------------------------------------------------------------- | +| viewerMode | String | ‘3D’ | （可选）初始视图模式默认为三维球视图 '2D'表示二维视图 'COLUMBUS_VIEW' 表示三维平面视图 | +| showInfo | Boolean | false | （可选）是否显示默认的属性信息框 | +| animation | Boolean | true | （可选）默认动画控制不显示 | +| baseLayerPicker | Boolean | true | （可选）是否创建图层控制显示小组件 | +| fullscreenButton | Boolean | true | （可选）是否创建全屏控制按钮 | +| vrButton | Boolean | false | （可选）是否创建 VR 按钮 | + +#### 2. 【视图功能管理类】 `CesiumZondy.Manager.SceneManager` + +##### 【method】 `showPosition(elementId, options)` 显示鼠标坐标位置 + +| 参数名 | 类型 | 说明 | +| --------- | ------ | -------- | +| elementId | String | 附加属性 | +| options | Object | 附加属性 | + +- `options` 参数说明 + +| 参数名 | 类型 | 默认值 | 说明 | +| ------------------ | ------- | ------ | ---------------------------------------- | +| showHpr | Boolean | false | （可选）暂无 | +| showSelectTileInfo | Boolean | false | （可选）显示当前鼠标所在位置拾取到的级别 | +| showViewLevelInfo | Boolean | false | （可选）显示视图级别 | + +#### 3. 【通用功能管理类】 `CesiumZondy.Manager.CommonFuncManager` + +##### 【method】 `createNavigationTool(options)` 显示导航控件 + +| 参数名 | 类型 | 说明 | +| ------- | ------ | -------- | +| options | Object | 附加属性 | + +- `options` 参数说明 + +| 参数名 | 类型 | 默认值 | 说明 | +| ---------------------- | ------- | ------ | ---------------------------------------------------- | +| enableCompass | Boolean | true | （可选）用于启用或禁用罗盘控件 | +| enableZoomControls | Boolean | false | （可选）用于启用或禁用缩放导航控件，提供缩放复位功能 | +| enableDistanceLegend | Boolean | false | （可选）用于启用或禁用比例尺控件，即距离图例 | +| enableCompassOuterRing | Boolean | false | （可选）用于启用或禁用指南针外环 | diff --git a/website/public/static/demo/military/markdown/scene/scene-undergroundMode.md b/website/public/static/demo/military/markdown/scene/scene-undergroundMode.md new file mode 100644 index 000000000..790753d52 --- /dev/null +++ b/website/public/static/demo/military/markdown/scene/scene-undergroundMode.md @@ -0,0 +1,85 @@ +## 地下模式 + +### 示例功能 + +    此功能用于开启地下模式。地下模式通常用于加载地下三维场景的需求，如加载地下管线等。 + +### 示例实现： + +    本示例需要使用【include-cesium-local.js】开发库实现，通过修改 Cesium 三维球控件 `Cesium.WebSceneControl()` 的参数来实现，根据应用场景需求具体设置相应参数。 + +### 实现步骤： + +**Step 1. 引用开发库**： +    本示例引用 local 本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维 WebGL 的功能； + +**Step 2. 创建三维地图容器并加载三维球控件**: +    创建 `id='GlobeView'` 的 div 作为三维视图的容器，并设置其样式，初始化 Cesium 三维球控件 `Cesium.WebSceneControl()` ，完成此步后可在三维场景中加载三维球控件； + +- Example: + + ```Javascript + //构造三维视图类（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', { + terrainExaggeration: 1, + }); + ``` + + ```html +
+ ``` + +**Step 3. 修改参数**: +    修改 Cesium 三维球控件 `Cesium.WebSceneControl()` 的视图对象的 scene 参数。 + +-地下模式一：开启地下模式并关闭大气层、设置球面透明度 + +- Example: + ```Javascript + //设置地下模式 + webGlobe.viewer.scene.globe.undergroundMode = true; + //大气显示关闭 + webGlobe.viewer.scene.skyAtmosphere.show = false; + //透明度设置 + webGlobe.viewer.scene.globe.transparent = 0.3; + ``` + +-地下模式二：开启地下模式、关闭大气层与地面大气效果、设置球面透明度、设置背景色 + +- Example: + ```Javascript + //设置地下模式 + webGlobe.viewer.scene.globe.undergroundMode = true; + //大气显示关闭 + webGlobe.viewer.scene.skyAtmosphere.show = false; + //地面大气效果关闭 + webGlobe.viewer.scene.skyAtmosphere.showGroundAtmosphere = false; + //透明度设置 + webGlobe.viewer.scene.enableTransparent = true; + //透明度设置 + webGlobe.viewer.scene.globe.transparent = 1; + //背景颜色设置 + webGlobe.viewer.scene.baseColor = new Cesium.Color(1, 1, 1, 0.0001); + webGlobe.viewer.scene.globe.imageryLayers.get(0).alpha = 0; + webGlobe.viewer.scene.globe.imageryLayers.get(1).alpha = 0; + ``` + +### 关键接口 + +#### 1.【三维场景控件类】`Cesium.WebSceneControl(elementId, options)` + +| 参数名 | 类 型 | 说 明 | +| --------- | ----------------- | -------------------- | +| elementId | Element \| String | 放置视图的 div 的 id | +| options | Object | （可选）附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ---------------- | ------- | ------ | -------------------------------------------------------------------------------------- | +| viewerMode | String | ‘3D’ | （可选）初始视图模式默认为三维球视图 '2D'表示二维视图 'COLUMBUS_VIEW' 表示三维平面视图 | +| showInfo | Boolean | false | （可选）是否显示默认的属性信息框 | +| animation | Boolean | true | （可选）默认动画控制不显示 | +| baseLayerPicker | Boolean | true | （可选）是否创建图层控制显示小组件 | +| fullscreenButton | Boolean | true | （可选）是否创建全屏控制按钮 | +| vrButton | Boolean | false | （可选）是否创建 VR 按钮 | diff --git a/website/public/static/demo/military/markdown/scene/scene-undergroundOne.md b/website/public/static/demo/military/markdown/scene/scene-undergroundOne.md new file mode 100644 index 000000000..8ff290da5 --- /dev/null +++ b/website/public/static/demo/military/markdown/scene/scene-undergroundOne.md @@ -0,0 +1,38 @@ +## 地下模式一 + +### 示例功能 + +此功能用于开启地下模式。 + +### 示例实现： + +本示例需要使用include-cesium-local.js开发库实现，通过修改Cesium三维球控件 `Cesium.WebSceneControl()` 的参数来实现。 + +### 实现步骤： + +1. 引用开发库：本示例引用local本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维WebGL的功能； + +2. 创建三维地图容器并加载三维球控件：创建 `id='GlobeView'` 的div作为三维视图的容器，并设置其样式，初始化Cesium三维球控件 `Cesium.WebSceneControl()` ，完成此步后可在三维场景中加载三维球控件； + +``` Javascript +//构造三维视图类（视图容器div的id，三维视图设置参数） +var webGlobe = new Cesium.WebSceneControl('GlobeView', { + terrainExaggeration: 1, +}); +``` + +``` html +
+``` + +3. 修改参数：修改Cesium三维球控件 `Cesium.WebSceneControl()` 的视图对象的scene参数 + +``` Javascript +webGlobe.viewer.scene.globe.undergroundMode = true; +webGlobe.viewer.scene.skyAtmosphere.show = false; +webGlobe.viewer.scene.globe.transparent = 0.3; +``` + +### 关键接口 + +#### 1. 【三维视图的主要类】 `Cesium.WebSceneControl` diff --git a/website/public/static/demo/military/markdown/scene/scene-undergroundTwo.md b/website/public/static/demo/military/markdown/scene/scene-undergroundTwo.md new file mode 100644 index 000000000..98fe7d5f6 --- /dev/null +++ b/website/public/static/demo/military/markdown/scene/scene-undergroundTwo.md @@ -0,0 +1,41 @@ +## 地下模式二 + +### 示例功能 + +此功能用于开启地下模式。 + +### 示例实现： + +本示例需要使用include-cesium-local.js开发库实现，通过修改Cesium三维球控件 `Cesium.WebSceneControl()` 的参数来实现。 + +### 实现步骤： + +1. 引用开发库：本示例引用local本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维WebGL的功能； + +2. 创建三维地图容器并加载三维球控件：创建 `id='GlobeView'` 的div作为三维视图的容器，并设置其样式，初始化Cesium三维球控件 `Cesium.WebSceneControl()` ，完成此步后可在三维场景中加载三维球控件； + +``` Javascript +//构造三维视图类（视图容器div的id，三维视图设置参数） +var webGlobe = new Cesium.WebSceneControl('GlobeView', { + terrainExaggeration: 1, +}); +``` + +``` html +
+``` + +3. 修改参数：修改Cesium三维球控件 `Cesium.WebSceneControl()` 的视图对象的scene参数 + +``` Javascript +webGlobe.viewer.scene.skyAtmosphere.show = false; +webGlobe.viewer.scene.skyAtmosphere.showGroundAtmosphere = false; +webGlobe.viewer.scene.enableTransparent = true; +webGlobe.viewer.scene.baseColor = new Cesium.Color(1, 1, 1, 0.0001); +webGlobe.viewer.scene.globe.imageryLayers.get(0).alpha = 0; +webGlobe.viewer.scene.globe.imageryLayers.get(1).alpha = 0; +``` + +### 关键接口 + +#### 1. 【三维视图的主要类】 `Cesium.WebSceneControl` \ No newline at end of file diff --git a/website/public/static/demo/military/markdown/third/arcgis.md b/website/public/static/demo/military/markdown/third/arcgis.md new file mode 100644 index 000000000..e76f2cc85 --- /dev/null +++ b/website/public/static/demo/military/markdown/third/arcgis.md @@ -0,0 +1,34 @@ +# Esri地图 +> Esri ArcGIS地图请注意`藏南`与`南海九段线`问题，建议使用天地图 + +# 坐标系 +> EPSG:3857 + +# 网络地址 +> 该网络为公网地址 + +## arcgis wms服务 + +> [ArcGIS服务](http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer) + +> > 点击上面的网页，弹出对应的网页如下所示： + + +![igserver](./static/demo/leaflet/markdown/internet/arcserver.png) + +1. `关注上面的红色框，第一个红色框需要注意的是一定要发布对应的WMS服务即出现“WMS”关键字眼` + > 如果没有WMS选项，请先发布个WMS服务，要不然webclient脚本调用不了 +2. 点击wms，获得对应的链接 http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer?request=GetCapabilities&service=WMS +3. 将上面链接 `？` 号之前的地址复制到脚本里面 + ``` javascript + var Layer = L.tileLayer.wms('http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer?', { + //图层序列号 + layers: '0,1,2', + //wms版本号 + version: '1.3.0', + //设置地图不连续显示 + noWrap:true + }).addTo(map); + ``` +4. 设置对应的中心点，请注意 `纬度在前面， 经度在后面` 与正常的习惯相反 +5. 设置对应的显示级别 \ No newline at end of file diff --git a/website/public/static/demo/military/markdown/third/arcserver.png b/website/public/static/demo/military/markdown/third/arcserver.png new file mode 100644 index 000000000..0a28e90a5 Binary files /dev/null and b/website/public/static/demo/military/markdown/third/arcserver.png differ diff --git a/website/public/static/demo/military/markdown/third/bings.md b/website/public/static/demo/military/markdown/third/bings.md new file mode 100644 index 000000000..244b1af7f --- /dev/null +++ b/website/public/static/demo/military/markdown/third/bings.md @@ -0,0 +1,11 @@ +# Bings地图 +> 微软Bing地图请注意`藏南`与`南海九段线`问题，建议使用天地图 + +# 坐标系 +> EPSG:3857 + +# 网络地址 +> 该网络为公网地址 + +# bing key +[创建自己的bing地图key](https://www.bingmapsportal.com/Application) \ No newline at end of file diff --git a/website/public/static/demo/military/markdown/third/osm.md b/website/public/static/demo/military/markdown/third/osm.md new file mode 100644 index 000000000..4549b142d --- /dev/null +++ b/website/public/static/demo/military/markdown/third/osm.md @@ -0,0 +1,8 @@ +# OSM地图 +> OSM地图请注意`藏南`与`南海九段线`问题，建议使用天地图 + +# 坐标系 +> EPSG:3857 + +# 网络地址 +> 该网络为公网地址 \ No newline at end of file diff --git a/website/public/static/demo/military/markdown/third/third-amap.md b/website/public/static/demo/military/markdown/third/third-amap.md new file mode 100644 index 000000000..e883eed55 --- /dev/null +++ b/website/public/static/demo/military/markdown/third/third-amap.md @@ -0,0 +1,81 @@ +## 加载高德地图 + +### 示例功能 + +    本示例对接高德地图服务，实现在三维场景中加载高德地图，坐标系为 EPSG:3857，即 Web 墨卡托坐标系，网络为公网地址。 + +### 示例实现 + +    本示例需要使用【include-cesium-local.js】开发库实现，关键接口为`CesiumZondy.Layer.ThirdPartyLayer`类提供的`appendGaodeMap()`方法，以此来加载高德地图。 + +> 开发库使用请参见*首页-概述-原生 JS 调用*内容。 + +> 特别说明：使用高德地图请注意`藏南`与`南海九段线`问题，建议使用天地图。 + +### 实现步骤 + +**Step 1. 引用开发库**： +    本示例引用 local 本地【include-cesium-local.js】开发库，完成此步骤后才可调用三维 WebGL 的功能； + +**Step 2. 创建布局**： +    创建`id='GlobeView'`的 div 作为三维视图的容器，并设置其样式； + +**Step 3. 构造三维场景控件**： +    实例化`Cesium.WebSceneControl`对象，完成此步骤后可在三维场景中加载三维球控件； + +- Example: + ```javascript + //构造三维视图对象（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', {}) + ``` + +**Step 4. 加载数据**: +    加载数据：创建第三方数据图层类`CesiumZondy.Layer.ThirdPartyLayer`的对象，调用`appendGaodeMap()`方法加载高德地图，配置不同参数可加载不同类型地图，如矢量：'vec'、影像：'img'、道路：'road'。 + +- Example: + ```javascript + //构造第三方图层对象 + var thirdPartyLayer = new CesiumZondy.Layer.ThirdPartyLayer({ + viewer: webGlobe.viewer, + }) + //加载高德地图 + var amapLayer = thirdPartyLayer.appendGaodeMap({ + //地图类型：矢量：'vec'、影像：'img'、道路：'road' + ptype: 'vec', + }) + ``` + +### 关键接口 + +#### 1.【三维场景控件类】`Cesium.WebSceneControl(elementId, options)` + +| 参数名 | 类 型 | 说 明 | +| --------- | ----------------- | -------------------- | +| elementId | Element \| String | 放置视图的 div 的 id | +| options | Object | （可选）附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ---------------- | ------- | ------ | -------------------------------------------------------------------------------------- | +| viewerMode | String | ‘3D’ | （可选）初始视图模式默认为三维球视图 '2D'表示二维视图 'COLUMBUS_VIEW' 表示三维平面视图 | +| showInfo | Boolean | false | （可选）是否显示默认的属性信息框 | +| animation | Boolean | true | （可选）默认动画控制不显示 | +| baseLayerPicker | Boolean | true | （可选）是否创建图层控制显示小组件 | +| fullscreenButton | Boolean | true | （可选）是否创建全屏控制按钮 | +| vrButton | Boolean | false | （可选）是否创建 VR 按钮 | + +#### 2.【第三方数据图层类】`CesiumZondy.Layer.ThirdPartyLayer` + +##### 【method】`appendGaodeMap(optionsParam) → {ImageryLayer}`：添加高德地图服务，返回瓦片层对象（ImageryLayer），可用于操作移除 + +| 参数名 | 类 型 | 说 明 | +| ------------ | ------ | -------- | +| optionsParam | Object | 附加属性 | + +- `optionsParam`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ------------ | ------ | ------ | ---------------------------------------------- | +| ptype | String | 'vec' | （可选）矢量：'vec'、影像：'img'、道路：'road' | +| maximumLevel | Number | 16 | （可选） | diff --git a/website/public/static/demo/military/markdown/third/third-baidu.md b/website/public/static/demo/military/markdown/third/third-baidu.md new file mode 100644 index 000000000..88d449744 --- /dev/null +++ b/website/public/static/demo/military/markdown/third/third-baidu.md @@ -0,0 +1,82 @@ +## 加载百度地图 + +### 示例功能 + +    本示例对接百度地图服务，实现在三维场景中加载百度地图，具体类型包括矢量、影像。 + +### 示例实现 + +    本示例需要使用【include-cesium-local.js】开发库实现，关键接口为`CesiumZondy.Layer.ThirdPartyLayer`类提供的`appendBaiduMap()`方法，以此来加载百度地图。 + +> 开发库使用请参见*首页-概述-原生 JS 调用*内容。 + +> 特别说明：对接百度地图，需获取其 key，在此封装的接口中采用的是普通开发者授权的 key，如果需商用，需了解其商业授权。友情链接：商用授权 配额提升 + +### 实现步骤 + +**Step 1. 引用开发库**： +    本示例引用 local 本地【include-cesium-local.js】开发库，完成此步骤后才可调用三维 WebGL 的功能； + +**Step 2. 创建布局**： +    创建`id='GlobeView'`的 div 作为三维视图的容器，并设置其样式； + +**Step 3. 构造三维场景控件**： +    实例化`Cesium.WebSceneControl`对象，完成此步骤后可在三维场景中加载三维球控件； + +- Example: + ```javascript + //构造三维视图对象（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', {}) + ``` + +**Step 4. 加载数据**: +    创建第三方数据图层类`CesiumZondy.Layer.ThirdPartyLayer`的对象，调用`appendBaiduMap()`方法，配置不同参数可加载不同类型地图，包括：瓦片（ptype:'tile'）、卫星（ptype:'sate'）和交通地图（ptype:'traffic'）。 + +- Example: + ```javascript + //构造第三方图层对象 + var thirdPartyLayer = new CesiumZondy.Layer.ThirdPartyLayer({ + viewer: webGlobe.viewer, + }) + //添加百度地图 + var baiduLayer = thirdPartyLayer.appendBaiduMap({ + //地图类型：瓦片：'tile'、卫星：'sate'、交通地图：'traffic' + ptype: 'tile', + }) + ``` + +### 关键接口 + +#### 1.【三维场景控件类】`Cesium.WebSceneControl(elementId, options)` + +| 参数名 | 类 型 | 说 明 | +| --------- | ----------------- | -------------------- | +| elementId | Element \| String | 放置视图的 div 的 id | +| options | Object | （可选）附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ---------------- | ------- | ------ | -------------------------------------------------------------------------------------- | +| viewerMode | String | ‘3D’ | （可选）初始视图模式默认为三维球视图 '2D'表示二维视图 'COLUMBUS_VIEW' 表示三维平面视图 | +| showInfo | Boolean | false | （可选）是否显示默认的属性信息框 | +| animation | Boolean | true | （可选）默认动画控制不显示 | +| baseLayerPicker | Boolean | true | （可选）是否创建图层控制显示小组件 | +| fullscreenButton | Boolean | true | （可选）是否创建全屏控制按钮 | +| vrButton | Boolean | false | （可选）是否创建 VR 按钮 | + +#### 2.【第三方数据图层类】`CesiumZondy.Layer.ThirdPartyLayer` + +##### 【method】`appendBaiduMap(optionsParam) → {ImageryLayer}`：添加百度地图服务，返回瓦片层对象（ImageryLayer），可用于操作移除 + +- `appendBaiduMap`方法主要参数 + +| 参数名 | 类 型 | 说 明 | +| ------------ | ------ | -------- | +| optionsParam | Object | 附加属性 | + +- `optionsParam`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ------ | ------ | ------ | --------------------------------------------------------------------------- | +| ptype | String | 'vec' | （必选）地图类型，提供瓦片-'tile'、卫星-'sate'、 交通-'traffic'三种百度地图 | diff --git a/website/public/static/demo/military/markdown/third/third-geoway.md b/website/public/static/demo/military/markdown/third/third-geoway.md new file mode 100644 index 000000000..eca608469 --- /dev/null +++ b/website/public/static/demo/military/markdown/third/third-geoway.md @@ -0,0 +1,76 @@ +## 加载吉威地图 + +### 示例功能 + +    本示例实现在三维场景中加载吉威地图。此示例中对接的地图服务坐标系为 EPSG:3857，即 Web 墨卡托，其网络为为国内镜像网络地址。 + +### 示例实现 + +    本示例需要使用【include-cesium-local.js】开发库实现，关键接口为`WebSceneControl`类提供的`appendWMTSTileExt()`方法，以此来加载吉威地图。 + +> 开发库使用请参见*首页-概述-原生 JS 调用*内容。 + +> 特别说明：使用吉威地图请注意`藏南`与`南海九段线`问题，建议使用天地图。 + +### 实现步骤 + +**Step 1. 引用开发库**： +    本示例引用 local 本地【include-cesium-local.js】开发库，完成此步骤后才可调用三维 WebGL 的功能； + +**Step 2. 创建布局**： +    创建`id='GlobeView'`的 div 作为三维视图的容器，并设置其样式； + +**Step 3. 构造三维场景控件**： +    实例化`Cesium.WebSceneControl`对象，完成此步骤后可在三维场景中加载三维球控件； + +- Example: + ```javascript + //构造三维视图对象（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', {}) + ``` + +**Step 4. 加载数据**: +    加载数据：在此示例中对接的是 WMTS 类型的吉威地图，所以可调用 WMTS 类型地图的通用方法`appendWMTSTileExt()`来加载，需传入地图服务的 URL 地址，以及相应的参数，设置`from`为`'jiwei'`即代表是吉威地图。 + +- Example: + ```javascript + //添加吉威地图 + webGlobe.appendWMTSTileExt('http://59.252.165.22:8066/ime-cloud/rest/2016qgfdqrjszy/wmts', { + from: 'jiwei', + }) + ``` + +### 关键接口 + +#### 1.【三维场景控件类】`Cesium.WebSceneControl(elementId, options)` + +| 参数名 | 类 型 | 说 明 | +| --------- | ----------------- | -------------------- | +| elementId | Element \| String | 放置视图的 div 的 id | +| options | Object | （可选）附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ---------------- | ------- | ------ | -------------------------------------------------------------------------------------- | +| viewerMode | String | ‘3D’ | （可选）初始视图模式默认为三维球视图 '2D'表示二维视图 'COLUMBUS_VIEW' 表示三维平面视图 | +| showInfo | Boolean | false | （可选）是否显示默认的属性信息框 | +| animation | Boolean | true | （可选）默认动画控制不显示 | +| baseLayerPicker | Boolean | true | （可选）是否创建图层控制显示小组件 | +| fullscreenButton | Boolean | true | （可选）是否创建全屏控制按钮 | +| vrButton | Boolean | false | （可选）是否创建 VR 按钮 | + +##### 【method】`appendWMTSTileExt(wmtsBaseUrl, options)`：添加 WMTS(WebMapTileService) 标准的瓦片(扩展) + +| 参数名 | 类 型 | 说 明 | +| ----------- | ------ | -------------------------------------------------------- | +| wmtsBaseUrl | String | wmts 服务基地址 ：localhost:6163/igs/rest/ogc/WMTSServer | +| options | Object | （可选）附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ---------- | ------ | ------- | ---------------------- | +| serverName | String | 无 | （可选）服务名 | +| proxy | String | 无 | （可选）代理服务器地址 | +| from | String | 'jiwei' | （可选）哪家公司的服务 | diff --git a/website/public/static/demo/military/markdown/third/third-google.md b/website/public/static/demo/military/markdown/third/third-google.md new file mode 100644 index 000000000..aa3107a58 --- /dev/null +++ b/website/public/static/demo/military/markdown/third/third-google.md @@ -0,0 +1,98 @@ +## 加载谷歌地图 + +### 示例功能 + +    本示例对接谷歌地图服务，实现在三维场景中加载谷歌地图，具体类型包括矢量、影像、栅格、道路。 + +### 示例实现 + +    本示例需要使用【include-cesium-local.js】开发库实现，关键接口为`CesiumZondy.Layer.ThirdPartyLayer`类提供的`appendGoogleMapExt()`方法或者`appendGoogleMap()`方法，以此来加载谷歌地图。 + +> 开发库使用请参见*首页-概述-原生 JS 调用*内容。 + +> 使用谷歌地图请注意`藏南`与`南海九段线`问题，建议使用天地图。 + +### 实现步骤 + +**Step 1. 引用开发库**： +    本示例引用 local 本地【include-cesium-local.js】开发库，完成此步骤后才可调用三维 WebGL 的功能； + +**Step 2. 创建布局**： +    创建`id='GlobeView'`的 div 作为三维视图的容器，并设置其样式； + +**Step 3. 构造三维场景控件**： +    实例化`Cesium.WebSceneControl`对象，完成此步骤后可在三维场景中加载三维球控件 + +- Example: + ```javascript + //构造三维视图对象（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', {}) + ``` + +**Step 4. 加载数据**: +    加载数据：创建第三方数据图层类`CesiumZondy.Layer.ThirdPartyLayer`的对象，在此调用`appendGoogleMapExt()`方法加载 Google 地图，为`ptype`属性配置不同参数可加载不同类型地图，如加载矢量可传入：‘m@207000000’、影像：‘s@130’、栅格：‘t@130’、道路：‘h@207000000’。 + +- Example: + ```javascript + //构造第三方图层对象 + var thirdPartyLayer = new CesiumZondy.Layer.ThirdPartyLayer({ + viewer: webGlobe.viewer, + }) + var googleLayer = thirdPartyLayer.appendGoogleMapExt({ + //m-全地图（含矢量与道路）、r-矢量地图、h-道路地图、s-卫星影像地图、t-地形图 + ptype: 'r', + }) + ``` + +### 关键接口 + +#### 1.【三维场景控件】WebSceneControl + +##### （1）`new WebSceneControl(elementId, options)`：三维场景控件构造函数 + +- `WebSceneControl`构造函数主要参数 + +| 参数名 | 类 型 | 说 明 | +| --------- | ----------------- | -------------------- | +| elementId | Element \| String | 放置视图的 div 的 id | +| options | Object | （可选）附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ---------------- | ------- | ------ | -------------------------------------------------------------------------------------- | +| viewerMode | String | ‘3D’ | （可选）初始视图模式默认为三维球视图 '2D'表示二维视图 'COLUMBUS_VIEW' 表示三维平面视图 | +| showInfo | Boolean | false | （可选）是否显示默认的属性信息框 | +| animation | Boolean | true | （可选）默认动画控制不显示 | +| baseLayerPicker | Boolean | true | （可选）是否创建图层控制显示小组件 | +| fullscreenButton | Boolean | true | （可选）是否创建全屏控制按钮 | +| vrButton | Boolean | false | （可选）是否创建 VR 按钮 | + +#### 2.【第三方数据图层类】CesiumZondy.Layer.ThirdPartyLayer + +##### （1）`appendGoogleMapExt(optionsParam) → {ImageryLayer}`：添加 google 地图服务(扩展)，返回瓦片层对象（ImageryLayer），可用于操作移除 + +- `appendGoogleMapExt`方法主要参数 + +| 参数名 | 类 型 | 说 明 | +| ------------ | ------ | ---------- | +| optionsParam | Object | 可扩展参数 | + +- `optionsParam`属性主要参数 +- |参数名|类 型|说 明| + > |-|-|-| + > |ptype|string|（可选）地图类型： s-卫星影像地图、 h-道路地图、 m-全地图（含矢量与道路）、r-矢量地图、t-地形图；也可以进行组合，例如：s,r 或者 t,h| + +##### （2）`appendGoogleMap(optionsParam) → {ImageryLayer}`：添加 Google 地图服务，返回瓦片层对象（ImageryLayer），可用于操作移除 + +> `appendGoogleMap`方法主要参数 + +| 参数名 | 类 型 | 说 明 | +| ------------ | ------ | -------------- | +| optionsParam | Object | 预留可扩展参数 | + +- `optionsParam`属性主要参数 + +| 参数名 | 类 型 | 说 明 | +| ------ | ------ | --------------------------------------------------------------------------------------------- | +| ptype | string | （必选）地图类型：矢量‘m@207000000’ 、影像‘s@130’ 、栅格‘t@130,r@207000000、道路‘h@207000000’ | diff --git a/website/public/static/demo/military/markdown/third/third-openweather.md b/website/public/static/demo/military/markdown/third/third-openweather.md new file mode 100644 index 000000000..cab957ac6 --- /dev/null +++ b/website/public/static/demo/military/markdown/third/third-openweather.md @@ -0,0 +1,84 @@ +## 加载 OpenWeather 地图 + +### 示例功能 + +    本示例实现在三维场景中加载 OpenWeather 地图，它是一种免费的天气预报云图服务。此示例中对接的地图服务坐标系为 EPSG:3857，即 Web 墨卡托，其网络为为国内镜像网络地址。 + +### 示例实现 + +    本示例需要使用【include-cesium-local.js】开发库实现，关键接口为`CesiumZondy.Layer.ThirdPartyLayer`类提供的`appendOpenWeatherMap()`方法，以此来加载 OpenWeather 地图。 + +> 开发库使用请参见*首页-概述-原生 JS 调用*内容。 + +> 特别说明：使用 OpenWeather 地图请注意`藏南`与`南海九段线`问题，建议使用天地图。 + +### 实现步骤 + +**Step 1. 引用开发库**： +    本示例引用 local 本地【include-cesium-local.js】开发库，完成此步骤后才可调用三维 WebGL 的功能； + +**Step 2. 创建布局**： +    创建`id='GlobeView'`的 div 作为三维视图的容器，并设置其样式； + +**Step 3. 构造三维场景控件**： +    实例化`Cesium.WebSceneControl`对象，完成此步骤后可在三维场景中加载三维球控件； + +- Example: + + ```javascript + //构造三维视图对象（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', {}) + ``` + +**Step 4. 加载数据**: +    加载数据：创建第三方数据图层类`CesiumZondy.Layer.ThirdPartyLayer`的对象，调用`appendOpenWeatherMap()`方法加载 OpenWeather 地图。 + +- Example: + ```javascript + //构造第三方图层对象 + var thirdPartyLayer = new CesiumZondy.Layer.ThirdPartyLayer({ + viewer: webGlobe.viewer, + }) + //加载OpenWeather地图 + var owLayer = thirdPartyLayer.appendOpenWeatherMap({ + ptype: 'Label', + appid: 'b1b15e88fa797225412429c150c122a1', + }) + ``` + +### 关键接口 + +#### 1.【三维场景控件类】`Cesium.WebSceneControl(elementId, options)` + +| 参数名 | 类 型 | 说 明 | +| --------- | ----------------- | -------------------- | +| elementId | Element \| String | 放置视图的 div 的 id | +| options | Object | （可选）附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ---------------- | ------- | ------ | -------------------------------------------------------------------------------------- | +| viewerMode | String | ‘3D’ | （可选）初始视图模式默认为三维球视图 '2D'表示二维视图 'COLUMBUS_VIEW' 表示三维平面视图 | +| showInfo | Boolean | false | （可选）是否显示默认的属性信息框 | +| animation | Boolean | true | （可选）默认动画控制不显示 | +| baseLayerPicker | Boolean | true | （可选）是否创建图层控制显示小组件 | +| fullscreenButton | Boolean | true | （可选）是否创建全屏控制按钮 | +| vrButton | Boolean | false | （可选）是否创建 VR 按钮 | + +#### 2.【第三方数据图层类】`CesiumZondy.Layer.ThirdPartyLayer` + +##### 【method】`appendOpenWeatherMap(optionsParam) → {ImageryLayer}`：添加 OpenWeather 服务（免费的天气预报云图），返回瓦片层对象（ImageryLayer） + +| 参数名 | 类 型 | 说 明 | +| ------------ | ------ | -------- | +| optionsParam | Object | 附加属性 | + +- `optionsParam`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ------ | ----- | ------ | ----- | + + +|ptype|String||（必选）云图类型，如 Pressure,Temperature,Windspeed,Clouds,Label，具体请查看 OpenWeather 官网| +|appid|String||（必选）授权 id （请到 OpenWeather 官网申请授权）| diff --git a/website/public/static/demo/military/markdown/third/third-osm.md b/website/public/static/demo/military/markdown/third/third-osm.md new file mode 100644 index 000000000..c61612daf --- /dev/null +++ b/website/public/static/demo/military/markdown/third/third-osm.md @@ -0,0 +1,77 @@ +## 加载 OSM 地图 + +### 示例功能 + +        本示例对接高德地图服务，实现在三维场景中加载高德地图，坐标系为 EPSG:3857，即 Web 墨卡托坐标系，网络为公网地址。 + +### 示例实现 + +        本示例需要使用【include-cesium-local.js】开发库实现，关键接口为 `CesiumZondy. Layer. ThirdPartyLayer` 类提供的 `appendOsmMap()` 方法，以此来加载高德地图。 + +> 开发库使用请参见*首页-概述-原生 JS 调用*内容。 + +> 特别说明：使用 osm 地图请注意 `藏南` 与 `南海九段线` 问题，建议使用天地图。 + +### 实现步骤 + +**Step 1. 引用开发库**： + +        本示例引用 local 本地【include-cesium-local.js】开发库，完成此步骤后才可调用三维 WebGL 的功能； + +**Step 2. 创建布局**： + +        创建 `id='GlobeView'` 的 div 作为三维视图的容器，并设置其样式； + +**Step 3. 构造三维场景控件**： + +        实例化 `Cesium. WebSceneControl` 对象，完成此步骤后可在三维场景中加载三维球控件； + +- Example: + + ```javascript + //构造三维视图对象（视图容器 div 的 id，三维视图设置参数） + webGlobe = new Cesium.WebSceneControl('GlobeView', {}); + ``` + +**Step 4. 加载数据**: + +        加载数据：创建第三方数据图层类 `CesiumZondy. Layer. ThirdPartyLayer` 的对象，调用 `appendOsmMap()` 方法加载 osm 地图。 + +- Example: + + ```javascript + //构造第三方图层对象 + thirdPartyLayer = new CesiumZondy.Layer.ThirdPartyLayer({ + viewer: webGlobe.viewer + }); + //加载OSM地图 + var osm = thirdPartyLayer.appendOsmMap(); + ``` + +### 关键接口 + +#### 1.【三维场景控件类】 `Cesium. WebSceneControl(elementId, options)` + +| 参数名 | 类 型 | 说 明 | +| --------- | ----------------- | -------------------- | +| elementId | Element \| String | 放置视图的 div 的 id | +| options | Object | （可选）附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ---------------- | ------- | ------ | -------------------------------------------------------------------------------------- | +| viewerMode | String | ‘3D’ | （可选）初始视图模式默认为三维球视图 '2D'表示二维视图 'COLUMBUS_VIEW' 表示三维平面视图 | +| showInfo | Boolean | false | （可选）是否显示默认的属性信息框 | +| animation | Boolean | true | （可选）默认动画控制不显示 | +| baseLayerPicker | Boolean | true | （可选）是否创建图层控制显示小组件 | +| fullscreenButton | Boolean | true | （可选）是否创建全屏控制按钮 | +| vrButton | Boolean | false | （可选）是否创建 VR 按钮 | + +#### 2.【第三方数据图层类】 `CesiumZondy. Layer. ThirdPartyLayer` + +##### 【method】 `appendOsmMap(optionsParam) → {ImageryLayer}` ：添加 osm 地图服务。 + +| 参数名 | 类 型 | 说 明 | +| ------------ | ------ | -------- | +| optionsParam | Object | 附加属性 | diff --git a/website/public/static/demo/military/markdown/third/third-tianditu-wmts.md b/website/public/static/demo/military/markdown/third/third-tianditu-wmts.md new file mode 100644 index 000000000..0049a6d3f --- /dev/null +++ b/website/public/static/demo/military/markdown/third/third-tianditu-wmts.md @@ -0,0 +1,81 @@ +## 加载天地图 WMTS + +### 示例功能 + +    本示例对接天地图服务，实现在三维场景中加载天地图。具体类型包括影像、地形、注记。由于天地图地图服务采用的是 OGC WMTS 标准，所以同样可以按照 WMTS 的规则进行天地图的加载，本示例与前一个示例的区别就在此。 + +### 示例实现 + +    本示例需要使用【include-cesium-local.js】开发库实现，关键接口为`CesiumZondy.Layer.ThirdPartyLayer`类提供的`appendTDTuMapByWMTS()`方法，按照 WMTS 服务来加载天地图。 + +> 开发库使用请参见*首页-概述-原生 JS 调用*内容。 + +> 特别说明：根据天地图的要求，调用天地图 API 及服务接口都需要申请开发授权，获取服务许可（key）！本示例采用一个参考 key，实际使用需开发者自行申请。 友情链接：天地图官网申请 key + +### 实现步骤 + +**Step 1. 引用开发库**： +    本示例引用 local 本地【include-cesium-local.js】开发库，完成此步骤后才可调用三维 WebGL 的功能； + +**Step 2. 创建布局**： +    创建`id='GlobeView'`的 div 作为三维视图的容器，并设置其样式； + +**Step 3. 构造三维场景控件**： +    实例化`Cesium.WebSceneControl`对象，完成此步骤后可在三维场景中加载三维球控件； + +- Example: + + ```javascript + //构造三维视图对象（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', {}) + ``` + +**Step 4. 加载数据**: +    加载数据：创建第三方数据图层类`CesiumZondy.Layer.ThirdPartyLayer`的对象，调用`appendTDTuMapByWMTS()`方法，传入数据类型参数，可实现不同类型数据的加载。 + +- Example: + ```javascript + //构造第三方图层对象 + var thirdPartyLayer = new CesiumZondy.Layer.ThirdPartyLayer({ + viewer: webGlobe.viewer, + }) + //通过WMTS服务方式加载天地图：如影像'img'、地形'ter'、 注记'cta'，具体请查看天地图官网: + var tdtLayer = thirdPartyLayer.appendTDTuMapByWMTS({ + ptype: 'img', + }) + ``` + +### 关键接口 + +#### 1.【三维场景控件类】`Cesium.WebSceneControl(elementId, options)` + +| 参数名 | 类 型 | 说 明 | +| --------- | ----------------- | -------------------- | +| elementId | Element \| String | 放置视图的 div 的 id | +| options | Object | （可选）附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ---------------- | ------- | ------ | -------------------------------------------------------------------------------------- | +| viewerMode | String | ‘3D’ | （可选）初始视图模式默认为三维球视图 '2D'表示二维视图 'COLUMBUS_VIEW' 表示三维平面视图 | +| showInfo | Boolean | false | （可选）是否显示默认的属性信息框 | +| animation | Boolean | true | （可选）默认动画控制不显示 | +| baseLayerPicker | Boolean | true | （可选）是否创建图层控制显示小组件 | +| fullscreenButton | Boolean | true | （可选）是否创建全屏控制按钮 | +| vrButton | Boolean | false | （可选）是否创建 VR 按钮 | + +#### 2.【第三方数据图层类】`CesiumZondy.Layer.ThirdPartyLayer` + +##### 【method】`appendTDTuMapByWMTS(optionsParam) → {ImageryLayer}`：通过 wmts 服务添加天地图，返回瓦片层对象（ImageryLayer） + +| 参数名 | 类 型 | 说 明 | +| ------------ | ------ | -------- | +| optionsParam | Object | 附加属性 | + +- `optionsParam`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ------ | ------ | ------ | ---------------------------------------------------------------------------------------------- | +| ptype | String | | （必选）地图类型，影像-'img'、地形-'ter'、注记-'cta'，具体请查看天地图官网 | +| token | String | | （必选）开发 token （请到天地图官网申请自己的开发 token，自带 token 仅做功能验证随时可能失效） | diff --git a/website/public/static/demo/military/markdown/third/third-tianditu.md b/website/public/static/demo/military/markdown/third/third-tianditu.md new file mode 100644 index 000000000..880750cd4 --- /dev/null +++ b/website/public/static/demo/military/markdown/third/third-tianditu.md @@ -0,0 +1,97 @@ +## 加载天地图 + +### 示例功能 + +    本示例对接天地图服务，实现在三维场景中加载天地图，具体类型包括矢量、影像、地形，坐标系为 EPSG:4326，即 WGS-84 经纬度。 + +### 示例实现 + +    本示例需要使用【include-cesium-local.js】开发库实现，关键接口为`CesiumZondy.Layer.ThirdPartyLayer`类提供的`appendTDTuMap()`方法，以此来加载天地图。 + +> 开发库使用请参见*首页-概述-原生 JS 调用*内容。 + +> 特别说明：根据天地图的要求，调用天地图 API 及服务接口都需要申请开发授权，获取服务许可（key）！本示例采用一个参考 key，实际使用需开发者自行申请。 友情链接：天地图官网申请 key + +### 实现步骤 + +**Step 1. 引用开发库**： +    本示例引用 local 本地【include-cesium-local.js】开发库，完成此步骤后才可调用三维 WebGL 的功能； + +**Step 2. 创建布局**： +    创建`id='GlobeView'`的 div 作为三维视图的容器，并设置其样式； + +**Step 3. 构造三维场景控件**： +    实例化`Cesium.WebSceneControl`对象，完成此步骤后可在三维场景中加载三维球控件； + +- Example: + + ```javascript + //构造三维视图对象（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', {}) + ``` + +**Step 4. 加载数据**: +    加载数据：创建第三方数据图层类`CesiumZondy.Layer.ThirdPartyLayer`的对象，调用`appendTDTuMap()`方法，需配置 url 或 type（二选一设置即可）、token 参数，可实现矢量、影像、地形数据的加载。 + +（1） url 地址：可参考提供的 URL 示例 + +天地图经纬度数据：http://t0.tianditu.com/DataServer?T=vec_c&X={x}&Y={y}&L={l} + +30 米全球地表覆盖数据服务：http://glcdata.tianditu.com/DataServer?T=glc_c&X={x}&Y={y}&L={l} + +（2） token：请前往天地图官网申请自己的开发 token，示例自带 token 仅做功能演示； + +（3） type 类型：可传入'vec'、'img'、'ter'等，分别代表矢量、影像、地形地图，具体请查看天地图官网。 + +- Example: + ```javascript + //构造第三方图层对象 + var thirdPartyLayer = new CesiumZondy.Layer.ThirdPartyLayer({ + viewer: webGlobe.viewer, + }) + //加载天地图 + var tdtLayer = thirdPartyLayer.appendTDTuMap({ + //天地图经纬度数据url,注意url与ptype设置其中一个即可 + //url: 'http://t0.tianditu.com/DataServer?T=vec_c&X={x}&Y={y}&L={l}', + //开发token （请到天地图官网申请自己的开发token，自带token仅做功能验证随时可能失效） + token: '9c157e9585486c02edf817d2ecbc7752', + //地图类型，如'vec'矢量 'img'影像 'ter'地形 + ptype: 'vec', + }) + ``` + +### 关键接口 + +#### 1.【三维场景控件类】`Cesium.WebSceneControl(elementId, options)` + +| 参数名 | 类 型 | 说 明 | +| --------- | ----------------- | -------------------- | +| elementId | Element \| String | 放置视图的 div 的 id | +| options | Object | （可选）附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ---------------- | ------- | ------ | -------------------------------------------------------------------------------------- | +| viewerMode | String | ‘3D’ | （可选）初始视图模式默认为三维球视图 '2D'表示二维视图 'COLUMBUS_VIEW' 表示三维平面视图 | +| showInfo | Boolean | false | （可选）是否显示默认的属性信息框 | +| animation | Boolean | true | （可选）默认动画控制不显示 | +| baseLayerPicker | Boolean | true | （可选）是否创建图层控制显示小组件 | +| fullscreenButton | Boolean | true | （可选）是否创建全屏控制按钮 | +| vrButton | Boolean | false | （可选）是否创建 VR 按钮 | + +#### 2.【第三方数据图层类】`CesiumZondy.Layer.ThirdPartyLayer` + +##### 【method】`appendTDTuMap(optionsParam) → {ImageryLayer}`：添加天地图(经纬度)，返回瓦片层对象（ImageryLayer） + +| 参数名 | 类 型 | 说 明 | +| ------------ | ------ | -------- | +| optionsParam | Object | 附加属性 | + +- `optionsParam`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ------ | ------ | ------ | ---------------------------------------------------------------------------------------------- | +| url | String | | （与 ptype 必选一个）地图数据 url 地址，具体请查看天地图官网 | +| ptype | String | | （与 url 必选一个）地图类型，矢量-'vec'、影像-'img'、地形-'ter'，具体请查看天地图官网 | +| token | String | | （必选）开发 token （请到天地图官网申请自己的开发 token，自带 token 仅做功能验证随时可能失效） | diff --git a/website/public/static/demo/military/markdown/track/track-dynamicflight.md b/website/public/static/demo/military/markdown/track/track-dynamicflight.md new file mode 100644 index 000000000..822034a74 --- /dev/null +++ b/website/public/static/demo/military/markdown/track/track-dynamicflight.md @@ -0,0 +1,102 @@ +## 动态航线 + +### 示例功能 + +    此功能用于动态显示两点之间的动态飞行轨迹效果。 + +### 示例实现： + +    本示例需要使用 【include-cesium-local.js】开发库实现，初始化 `CesiumZondy.Manager.AdvancedAnalysisManager()`高级分析功能管理对象，然后调用 `createDynamicPolyline()` 方法创建动态航线。 + +> 开发库使用请参见*首页-概述-调用方式*。 + +### 实现步骤： + +**Step 1. 引用开发库**： +    本示例引用 local 本地【include-cesium-local.js】开发库，完成此步骤后才可调用三维 WebGL 的功能； + +**Step 2. 创建布局**： +    创建`id='GlobeView'`的 div 作为三维视图的容器，并设置其样式； + +**Step 3. 构造三维场景控件**： +    实例化`Cesium.WebSceneControl`对象，完成此步骤后可在三维场景中加载三维球控件。 + +- Example: + + ```Javascript + //开启动画 + webGlobe.viewer.clock.shouldAnimate = true; + //构造高级分析功能管理对象 + var advancedAnalysisManager = new CesiumZondy.Manager.AdvancedAnalysisManager({ + viewer: webGlobe.viewer + }); + //创建动态航线 + var dynamicLine = advancedAnalysisManager.createDynamicPolyline( + //航线起始城市经纬度 + { + lon: 114.302312702, + lat: 30.598026044 + }, + //航线终点城市数组，经纬度 + [ + { "lon": 115.028495718, "lat": 30.200814617 }, + { "lon": 110.795000473, "lat": 32.638540762 }, + { "lon": 111.267729446, "lat": 30.698151246 }, + { "lon": 112.126643144, "lat": 32.058588576 }, + { "lon": 114.885884938, "lat": 30.395401912 }, + { "lon": 112.190419415, "lat": 31.043949588 }, + { "lon": 113.903569642, "lat": 30.932054050 }, + { "lon": 112.226648859, "lat": 30.367904255 }, + { "lon": 114.861716770, "lat": 30.468634833 }, + { "lon": 114.317846048, "lat": 29.848946148 }, + { "lon": 113.371985426, "lat": 31.704988330 }, + { "lon": 109.468884533, "lat": 30.289012191 }, + { "lon": 113.414585069, "lat": 30.368350431 }, + { "lon": 112.892742589, "lat": 30.409306203 }, + { "lon": 113.160853710, "lat": 30.667483468 }, + { "lon": 110.670643354, "lat": 31.748540780 } + ], + { + //是否已经添加动态航线 + isAdd: false, + //航线颜色：默认红色 + color: new Cesium.Color(255 / 255, 0 / 255, 0 / 255, 1) + } + ); + ``` + +### 关键接口 + +#### 1.【三维场景控件类】`Cesium.WebSceneControl(elementId, options)` + +| 参数名 | 类 型 | 说 明 | +| --------- | ----------------- | -------------------- | +| elementId | Element \| String | 放置视图的 div 的 id | +| options | Object | （可选）附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ---------------- | ------- | ------ | -------------------------------------------------------------------------------------- | +| viewerMode | String | ‘3D’ | （可选）初始视图模式默认为三维球视图 '2D'表示二维视图 'COLUMBUS_VIEW' 表示三维平面视图 | +| showInfo | Boolean | false | （可选）是否显示默认的属性信息框 | +| animation | Boolean | true | （可选）默认动画控制不显示 | +| baseLayerPicker | Boolean | true | （可选）是否创建图层控制显示小组件 | +| fullscreenButton | Boolean | true | （可选）是否创建全屏控制按钮 | +| vrButton | Boolean | false | （可选）是否创建 VR 按钮 | + +#### 2.【高级分析功能管理类】`CesiumZondy.Manager.AdvancedAnalysisManager` + +##### 【method】 `createDynamicPolyline(posStart, posEnds, options) → {Object}` 添加动态航线 + +| 参数名 | 类型 | 说 明 | +| -------- | ------ | ------------ | +| posStart | Object | 轨迹线起点 | +| posEnds | Array | 轨迹线终点 | +| options | Object | 动态航班参数 | + +- `options` 主要参数 + +| 参数名 | 类型 | 说明 | +| ------ | ------- | ------------------------ | +| isAdd | Boolean | （可选）是否已添加航班线 | diff --git a/website/public/static/demo/military/markdown/track/track-flow.md b/website/public/static/demo/military/markdown/track/track-flow.md new file mode 100644 index 000000000..fb7617ce6 --- /dev/null +++ b/website/public/static/demo/military/markdown/track/track-flow.md @@ -0,0 +1,91 @@ +## 模型漫游 + +### 示例功能 + +    此功能用于在三维场景中添加模型动态运动显示效果。 + +### 示例实现： + +    本示例需要使用 【include-cesium-local.js 】开发库实现，初始化 Cesium 三维球控件 `Cesium.WebSceneControl()` ，创建分析功能管理类 `CesiumZondy.Manager.AnalysisManager()` ，调用 `cruiseModel()` 方法创建模型漫游，通过 `startCruiseModel()` 方法开始模型漫游，通过 `stopCruiseModel()` 方法暂停模型漫游, 通过 `clearCruiseModel()` 方法清除模型漫游。 + +> 开发库使用请参见*首页-概述-调用方式*。 + +### 实现步骤： + +**Step 1. 引用开发库**： +    本示例引用 local 本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维 WebGL 的功能； + +**Step 2. 创建三维地图容器并加载三维球控件**: +    创建 `id='GlobeView'` 的 div 作为三维视图的容器，并设置其样式，初始化 Cesium 三维球控件 `Cesium.WebSceneControl()` ，完成此步后可在三维场景中加载三维球控件； + +**Step 3. 创建模型漫游**: +    创建分析功能管理类 `CesiumZondy.Manager.AnalysisManager()` ，调用 `cruiseModel()` 方法创建模型漫游； + +- Example: + ```Javascript + //初始化分析功能管理类 + var analysisManager = new CesiumZondy.Manager.AnalysisManager({ + viewer: webGlobe.viewer + }); + //模型漫游 + var modelEntity = analysisManager.cruiseModel( + //模型URL地址 + './static/data/model/GroundVehicle.glb', + //漫游点集 + positionArr, + //是否显示漫游路径 + true, + //漫游时钟频率 + 10 + ); + ``` + +**Step 4. 开始模型漫游**: +    创建分析功能管理类 `CesiumZondy.Manager.AnalysisManager()` ，调用 `startCruiseModel()` 方法开始模型漫游。 + +- Example: + ```Javascript + /*开始漫游*/ + analysisManager.startCruiseModel(); + ``` + +### 关键接口 + +#### 1.【三维场景控件类】`Cesium.WebSceneControl(elementId, options)` + +| 参数名 | 类 型 | 说 明 | +| --------- | ----------------- | -------------------- | +| elementId | Element \| String | 放置视图的 div 的 id | +| options | Object | （可选）附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ---------------- | ------- | ------ | -------------------------------------------------------------------------------------- | +| viewerMode | String | ‘3D’ | （可选）初始视图模式默认为三维球视图 '2D'表示二维视图 'COLUMBUS_VIEW' 表示三维平面视图 | +| showInfo | Boolean | false | （可选）是否显示默认的属性信息框 | +| animation | Boolean | true | （可选）默认动画控制不显示 | +| baseLayerPicker | Boolean | true | （可选）是否创建图层控制显示小组件 | +| fullscreenButton | Boolean | true | （可选）是否创建全屏控制按钮 | +| vrButton | Boolean | false | （可选）是否创建 VR 按钮 | + +#### 2.【分析功能管理类】 `CesiumZondy.Manager.AnalysisManager` + +##### 【method】 `cruiseModel(modelURL, positionArr, isShowPath, clockFrequency) → {Array}` 模型漫游 + +| 参数名 | 类型 | 说明 | +| -------------- | ------------- | ---------------------------------- | +| modelURL | String | 模型 url | +| positionArr | Array. | 漫游线路节点坐标数组 Array<[x, y]> | +| isShowPath | Boolean | 是否显示线路和节点 | +| clockFrequency | Number | 漫游时钟频率 | + +##### 【method】 `startCruiseModel()` 开始模型漫游 + +##### 【method】 `stopCruiseModel()` 结束模型漫游 + +##### 【method】 `clearCruiseModel(modelEntities)` 清除模型漫游 + +| 参数名 | 类型 | 说明 | +| ------------- | ------ | -------- | +| modelEntities | Object | 模型实例 | diff --git a/website/public/static/demo/military/markdown/track/track-groundflow.md b/website/public/static/demo/military/markdown/track/track-groundflow.md new file mode 100644 index 000000000..5a7d18bcb --- /dev/null +++ b/website/public/static/demo/military/markdown/track/track-groundflow.md @@ -0,0 +1,88 @@ +## 模型贴地漫游 + +### 示例功能 + +    此功能用于在三维场景中添加模型跟随地形动态运动显示效果。 + +### 示例实现： + +    本示例需要使用 【include-cesium-local.js】 开发库实现，通过 Cesium 三维球控件 `Cesium.WebSceneControl()` 的 `cruiseModelGround()` 方法创建模型贴地漫游，通过 `startCruiseModel()` 方法开始模型漫游，通过 `stopCruiseModel()` 方法暂停模型漫游, 通过 `clearCruiseModel()` 方法清除模型漫游。 + +> 开发库使用请参见*首页-概述-调用方式*。 + +### 实现步骤： + +**Step 1. 引用开发库**： +    本示例引用 local 本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维 WebGL 的功能； + +**Step 2. 创建三维地图容器并加载三维球控件**: +    创建 `id='GlobeView'` 的 div 作为三维视图的容器，并设置其样式，初始化 Cesium 三维球控件 `Cesium.WebSceneControl()` ，完成此步后可在三维场景中加载三维球控件； + +- Example + + ```Javascript + //构造三维视图类（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', { + terrainExaggeration: 1, + }); + ``` + + ```html +
+ ``` + +**Step 3. 创建模型贴地漫游**： +    通过 Cesium 三维球控件 `Cesium.WebSceneControl()` 的 `cruiseModelGround()` 方法创建模型漫游； + +- Example: + ```Javascript + //模型URL地址、漫游点集、是否显示漫游路径、漫游时钟频率、漫游成功回调 + modelEntity = webGlobe.cruiseModelGround('./static/data/model/donghua.gltf', positionArr, true, 30, function(entities) {}) + ``` + +**Step 4. 开始模型漫游**: +    通过 Cesium 三维球控件 `Cesium.WebSceneControl()` 的 `startCruiseModel()` 方法开始模型漫游。 + +- Example: + ```Javascript + /*开始漫游*/ + webGlobe.startCruiseModel(); + ``` + +### 关键接口 + +#### 1.【三维场景控件类】`Cesium.WebSceneControl(elementId, options)` + +| 参数名 | 类 型 | 说 明 | +| --------- | ----------------- | -------------------- | +| elementId | Element \| String | 放置视图的 div 的 id | +| options | Object | （可选）附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ---------------- | ------- | ------ | -------------------------------------------------------------------------------------- | +| viewerMode | String | ‘3D’ | （可选）初始视图模式默认为三维球视图 '2D'表示二维视图 'COLUMBUS_VIEW' 表示三维平面视图 | +| showInfo | Boolean | false | （可选）是否显示默认的属性信息框 | +| animation | Boolean | true | （可选）默认动画控制不显示 | +| baseLayerPicker | Boolean | true | （可选）是否创建图层控制显示小组件 | +| fullscreenButton | Boolean | true | （可选）是否创建全屏控制按钮 | +| vrButton | Boolean | false | （可选）是否创建 VR 按钮 | + +##### 【method】 `cruiseModelGround(modelURL, positionArr, isShowPath, clockFrequency,function)` 模型漫游 + +- `cruiseModelGround` 方法主要参数 + +| 参数名 | 类型 | 说明 | +| -------------- | ------------- | ---------------------------------- | +| modelURL | string | 模型 url | +| positionArr | Array. | 漫游线路节点坐标数组 Array<[x, y]> | +| isShowPath | bool | 是否显示线路和节点 | +| clockFrequency | Number | 漫游时钟频率 | +| function | function | 成功回调 | + +##### 【method】 `startCruiseModel()` 开始模型漫游 + +##### 【method】 `stopCruiseModel()` 结束模型漫游 + +##### 【method】 `clearCruiseModel()` 清除模型漫游 diff --git a/website/public/static/demo/military/markdown/vectortile/mapgis-vectortile-3857.md b/website/public/static/demo/military/markdown/vectortile/mapgis-vectortile-3857.md new file mode 100644 index 000000000..4b1a40ef3 --- /dev/null +++ b/website/public/static/demo/military/markdown/vectortile/mapgis-vectortile-3857.md @@ -0,0 +1,110 @@ +## 添加二维矢量瓦片服务 + +### 示例功能 + +        本示例实现在三维场景中加载在线二维地图数据，对接 MapGIS IGServer 发布的二维矢量瓦片服务，坐标系为 EPSG:3857，即 Web 墨卡托坐标系。 + +### 示例实现 + +        数据准备：需提前在 MapGIS Server Manager 服务管理器中发布二维矢量瓦片服务。 + +        本示例需要使用【include-cesium-local.js】开发库实现，关键接口为 `CesiumZondy.Overlayer.VectorTileLayer` 类。 + +> 开发库使用请参见*首页-概述-原生 JS 调用*内容。 + +### 实现步骤 + +**Step 1. 引用开发库**： + +        本示例引用 local 本地【include-cesium-local.js】开发库，完成此步骤后才可调用三维 WebGL 的功能； + +**Step 2. 创建布局**： + +        创建 `id='GlobeView'` 的 div 作为三维视图的容器，并设置其样式； + +**Step 3. 构造三维场景控件**： + +        实例化 `Cesium. WebSceneControl` 对象，完成此步骤后可在三维场景中加载三维球控件； + +- Example: + ```javascript + //构造三维视图对象（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', {}); + ``` + +**Step 4. 加载数据**: + +        加载数据：构造 `CesiumZondy.Overlayer.VectorTileLayer` 传入参数即可直接加载矢量瓦片数据服务。 + +- Example: + ```javascript + //构造矢量瓦片图层对象 + vectortileLayer = new CesiumZondy.Overlayer.VectorTileLayer( + //视图 + webGlobe.viewer, + { + //样式json文件路径 + styleUrl: `${protocol}://${ip}:${port}/igs/rest/mrms/vtiles/styles/蓝色-墨卡托.json`, + //第三方需要的token + token: '', + //是否可见 + show: true, + callback: handleLayerAdd + } + ); + //构造矢量瓦片图层对象 + chinaLayer = new CesiumZondy.Overlayer.VectorTileLayer( + //视图 + webGlobe.viewer, + { + //样式json文件路径 + styleUrl: `${protocol}://${ip}:${port}/igs/rest/mrms/vtiles/styles/中国行政区.json`, + //第三方需要的token + token: '', + //是否可见 + show: true + } + ); + ``` + +### 关键接口 + +#### 1.【三维场景控件类】 `Cesium. WebSceneControl(elementId, options)` + +| 参数名 | 类 型 | 说 明 | +| --------- | ----------------- | -------------------- | +| elementId | Element \| String | 放置视图的 div 的 id | +| options | Object | （可选）附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ---------------- | ------- | ------ | -------------------------------------------------------------------------------------- | +| viewerMode | String | ‘3D’ | （可选）初始视图模式默认为三维球视图 '2D'表示二维视图 'COLUMBUS_VIEW' 表示三维平面视图 | +| showInfo | Boolean | false | （可选）是否显示默认的属性信息框 | +| animation | Boolean | true | （可选）默认动画控制不显示 | +| baseLayerPicker | Boolean | true | （可选）是否创建图层控制显示小组件 | +| fullscreenButton | Boolean | true | （可选）是否创建全屏控制按钮 | +| vrButton | Boolean | false | （可选）是否创建 VR 按钮 | + +#### 2.【矢量瓦片类】 `CesiumZondy.zondy.VectorTileLayer` + +| 参数名 | 类 型 | 说 明 | +| ------ | ------ | --------------------------- | +| viewer | Object | 传入的 cesium 的地图 viewer | +| option | Object | 属性键值对，地图属性字段。 | + +- `option`属性主要参数 + +| 参数名 | 类 型 | 属性 | 默认值 | 说 明 | +| -------------- | ------------------- | ----------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | +| ip | String | \ | localhost | 地图服务 ip | +| port | String | \ | 6163 | 地图服务 port | +| layerName | String | \ | | 地图名 | +| mvtStyle | String | | | 样式 json 文件路径或者 MVT-JSON 对象，当为 url 时等于 styleUrl；当为 vectortilejson 等于 vectortilejson | +| styleUrl | String | \ | | 样式 json 文件路径,有 styleUrl 就可以直接读取 styleUrl 里的信息;不然就是加载中地发布的矢量瓦片，使用 ip，port 和 layerName 先拼接 styleUrl 路径再进行查询。 | +| vectortilejson | Object | \ | | 矢量瓦片 json 对象,直接取 json 对象，不需要再去请求。 | +| tilingScheme | Cesium.TilingScheme | \ | | 矢量瓦片瓦片切分规则：经纬度还是墨卡托 | +| token | String | \ | | 第三方需要的 token，比如 mapbox | +| show | String | \ | true | 是否可见 | +| callback | String | \ | | 加载矢量瓦片成功回调，返回 Provider | diff --git a/website/public/static/demo/military/markdown/vectortile/mapgis-vectortile-4326.md b/website/public/static/demo/military/markdown/vectortile/mapgis-vectortile-4326.md new file mode 100644 index 000000000..7c36552c3 --- /dev/null +++ b/website/public/static/demo/military/markdown/vectortile/mapgis-vectortile-4326.md @@ -0,0 +1,101 @@ +## 添加二维矢量瓦片服务 + +### 示例功能 + +        本示例实现在三维场景中加载在线二维地图数据，对接 MapGIS IGServer 发布的二维矢量瓦片服务，坐标系为 EPSG:4326，即经纬度坐标系。 + +### 示例实现 + +        数据准备：需提前在 MapGIS Server Manager 服务管理器中发布二维矢量瓦片服务。 + +        本示例需要使用【include-cesium-local.js】开发库实现，关键接口为 `CesiumZondy.Overlayer.VectorTileLayer` 类。 + +> 开发库使用请参见*首页-概述-原生 JS 调用*内容。 + +### 实现步骤 + +**Step 1. 引用开发库**： + +        本示例引用 local 本地【include-cesium-local.js】开发库，完成此步骤后才可调用三维 WebGL 的功能； + +**Step 2. 创建布局**： + +        创建 `id='GlobeView'` 的 div 作为三维视图的容器，并设置其样式； + +**Step 3. 构造三维场景控件**： + +        实例化 `Cesium. WebSceneControl` 对象，完成此步骤后可在三维场景中加载三维球控件； + +- Example: + ```javascript + //构造三维视图对象（视图容器div的id，三维视图设置参数） + var webGlobe = new Cesium.WebSceneControl('GlobeView', {}); + ``` + +**Step 4. 加载数据**: + +        加载数据：构造 `CesiumZondy.Overlayer.VectorTileLayer` 传入参数即可直接加载矢量瓦片数据服务。 + +- Example: + ```javascript + //构造矢量瓦片图层对象 + vectortileLayer = new CesiumZondy.Overlayer.VectorTileLayer( + //视图 + webGlobe.viewer, + { + //样式json文件路径 + styleUrl: `${protocol}://${ip}:${port}/igs/rest/mrms/vtiles/styles/OSM全中国经纬度.json`, + //第三方需要的token + token: '', + //是否可见 + show: true, + tilingScheme: new Cesium.GeographicTilingScheme({ + numberOfLevelZeroTilesX: 2, + numberOfLevelZeroTilesY: 1 + }), + callback: handleLayerAdd + } + ); + ``` + +### 关键接口 + +#### 1.【三维场景控件类】 `Cesium. WebSceneControl(elementId, options)` + +| 参数名 | 类 型 | 说 明 | +| --------- | ----------------- | -------------------- | +| elementId | Element \| String | 放置视图的 div 的 id | +| options | Object | （可选）附加属性 | + +- `options`属性主要参数 + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ---------------- | ------- | ------ | -------------------------------------------------------------------------------------- | +| viewerMode | String | ‘3D’ | （可选）初始视图模式默认为三维球视图 '2D'表示二维视图 'COLUMBUS_VIEW' 表示三维平面视图 | +| showInfo | Boolean | false | （可选）是否显示默认的属性信息框 | +| animation | Boolean | true | （可选）默认动画控制不显示 | +| baseLayerPicker | Boolean | true | （可选）是否创建图层控制显示小组件 | +| fullscreenButton | Boolean | true | （可选）是否创建全屏控制按钮 | +| vrButton | Boolean | false | （可选）是否创建 VR 按钮 | + +#### 2.【矢量瓦片类】 `CesiumZondy.zondy.VectorTileLayer` + +| 参数名 | 类 型 | 说 明 | +| ------ | ------ | --------------------------- | +| viewer | Object | 传入的 cesium 的地图 viewer | +| option | Object | 属性键值对，地图属性字段。 | + +- `option`属性主要参数 + +| 参数名 | 类 型 | 属性 | 默认值 | 说 明 | +| -------------- | ------------------- | ----------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | +| ip | String | \ | localhost | 地图服务 ip | +| port | String | \ | 6163 | 地图服务 port | +| layerName | String | \ | | 地图名 | +| mvtStyle | String | | | 样式 json 文件路径或者 MVT-JSON 对象，当为 url 时等于 styleUrl；当为 vectortilejson 等于 vectortilejson | +| styleUrl | String | \ | | 样式 json 文件路径,有 styleUrl 就可以直接读取 styleUrl 里的信息;不然就是加载中地发布的矢量瓦片，使用 ip，port 和 layerName 先拼接 styleUrl 路径再进行查询。 | +| vectortilejson | Object | \ | | 矢量瓦片 json 对象,直接取 json 对象，不需要再去请求。 | +| tilingScheme | Cesium.TilingScheme | \ | | 矢量瓦片瓦片切分规则：经纬度还是墨卡托 | +| token | String | \ | | 第三方需要的 token，比如 mapbox | +| show | String | \ | true | 是否可见 | +| callback | String | \ | | 加载矢量瓦片成功回调，返回 Provider | diff --git a/website/public/static/demo/military/source/development_cesium.md b/website/public/static/demo/military/source/development_cesium.md new file mode 100644 index 000000000..c266a044b --- /dev/null +++ b/website/public/static/demo/military/source/development_cesium.md @@ -0,0 +1,3694 @@ + +## 准备开发 + +    进行WebGIS应用开发，一般均采用前端开发库+GIS服务的模式，开发者须完成如下三个步骤： + +    **第一步：安装配置开发环境，包括MapGIS开发环境（含开发授权）、集成开发环境；** + +    根据实际应用需求，选择.NET或九州系列MapGIS开发平台产品安装，通常包括MapGIS Desktop桌面工具、MapGIS IGServer等云GIS产品。 + +    例如选用.NET版本，常用环境如下： +- MapGIS开发包：MapGIS IGServer .NET x64 for Windows开发包 +- MapGIS开发授权：云开发授权（基础版/高级版） +- 集成开发环境：Visual Studio Code + +    **第二步：发布GIS服务资源，在MapGIS IGServer的服务管理器中发布所需的地图服务，以及扩展的功能服务等；** + +    基于MapGIS Server Manager发布地图服务的具体操作，请查看**MapGIS IGServer操作手册**（.NET版，九州版） + +    在访问MapGIS IGServer的服务时，需要先确定GIS服务器IP地址与服务端口号；在二次开发时，根据所使用的MapGIS IGServer平台版本以及其服务管理器中IGServer配置情况（ip、port），对二次开发接口中涉及的地图服务访问的ip、port进行相应设置。 + +- .NET版：IGServer服务管理器访问默认地址（127.0.0.1:9999）、IGServer服务访问默认基地址（127.0.0.1:6163） +- 九州版：IGServer服务管理器访问默认地址（127.0.0.1:8089）、IGServer服务访问默认基地址（127.0.0.1:8089） + +    **第三步：获取前端开发库（MapGIS Client for JavaScript开发库）**，通过文件拷贝或npm方式引用开发库，进行WebGIS二维或三维应用开发。 + +- MapGIS官方下载地址：http://smaryun.com/dev/download_detail.html#/download828 +- GitHub 托管地址：https://github.com/MapGIS/WebClient-JavaScript +- Gitee 托管地址：https://gitee.com/osmapgis/WebClient-JavaScript + +### 引入开发库 + + +#### 文件方式（离线） + +    请下载MapGIS Client for JavaScript开发包，将开发库目录libs下的cdn文件夹与include-xx.js文件放在工程同一目录下，然后在网页中引入对应的include-xx.js文件即可，可以将整个目录[..\static\libs]拷贝到工程中 + +> 离线版本的核心原理就是根据include=""中的名字，在当前cdn文件夹下寻找对应的js的脚本并按照规定的顺序引入到浏览器中 +> “include-*.js 通过include="xxx"的方式自动寻找引入对应的第三方脚本” + +    新建一个 HTML 文件，在 标签中引入 MapGIS Client for JavaScript（Cesium）的开发库： + +- Example: + + ```javascript + + ``` + +MapGIS Client for JavaScript开发库 + +#### npm 方式引用 + +    使用此方式前请先检查电脑中是否已安装应用程序 Node.js，若未安装，需要先安装Node.js环境。 + +    由于本公司在开源的 cesium 地图引擎上做了一定修改，所以在引入 cesium 地图引擎时需要通过以下 npm 指令引入。 + +- Example: + + ```javascript + npm install @mapgis/cesium + ``` + +    通过 npm 指令引入 MapGIS Client for JavaScript 开发包。 + + +## 开始开发 + +    先根据“开发环境”要求安装配置好MapGIS开发环境（含MapGIS云开发授权），然后获取MapGIS Client for JavaScript（Cesium）SDK进行二次开发。 + +    下面使用H5原生JS方式，演示如何在网页中加载显示一个M3D缓存模型数据（大雁塔）。 + +### 数据准备 + +    本示例使用MapGIS官方云端（develop.smaryun.com）已经发布的名称为“DaYanTa”的M3D数据服务进行演示。若您需要显示自己的数据，需要在开发前进行数据处理，如创建/附加地理数据库、导入数据、生成M3D缓存数据等，最后通过**MapGIS Server Manager**配置GIS服务环境并发布三维地图服务。 + +
+ MapGIS服务发布 +
+
MapGIS Server Manager发布服务
+
+
+ +> 基于MapGIS Server Manager发布地图服务的具体操作，请查看**MapGIS IGServer操作手册**（.NET版，九州版） + +### 开发入门：加载M3D模型数据 + +> 本示例使用的开发集成工具为 Visual Studio Code（简称VSCode），您可以根据开发习惯选择适合自己的开发工具 + +#### Step 1. 新建Web网站 + +    在VSCode或本地磁盘中新建一个文件目录作为Web网站目录，名称为SceneDisplay； + +
+ 新建网站目录 +
+
新建网站目录
+
+
+ +#### Step 2. 引入JavaScript开发库（离线方式） + +    在新建的Web网站（文件目录）中，拷贝MapGIS Client for JavaScript开发库到网站根目录下，即将SDK包路径MapGIS Client for JavaScript_V10.5.X.X\static\libs的libs拷贝到“SceneDisplay”目录下。此libs包含了全部的开发库（js与css文件），可选择只拷贝cesium的库。 + +
+ 引入脚本库资源 +
+
引入脚本库资源
+
+
+ +#### Step 3. 加载显示M3D模型 + +(1) 在上述新建的网站中，通过新建文件方式，创建一个名称为“SceneM3DDisplay”的html网页文件，可通过自定义模板快速创建网页结构内容； + +
+ 新建HTML页面（空） +
+
新建HTML页面（空）
+
+
+ +
+ 新建HTML页面（模板） +
+
新建HTML页面（模板）
+
+
+ +(2) 设置示例标题，在该页面引入for WebGL开发的必要脚本库include-cesium-local.js，此脚本库会动态引入核心库webclient-cesium-plugin.min.js等与相关第三方库、样式文件等 + +
+ 引用开发库 +
+
引用开发库
+
+
+ + +(3) 创建一个ID为“GlobeView”的div层，并设置其样式，用来作为显示矢量地图文档的地图容器; + +
+ 创建div层并设置样式 +
+
创建div层并设置样式
+
+
+ +(4) 通过body的onload事件触发调用M3D模型缓存数据显示的脚本函数init()； + +
+ body的onload事件 +
+
body的onload事件
+
+
+ +(5) 在该页面中嵌入JavaScript代码，实现加载M3D缓存模型的脚本函数init()，即初始化三维场景视图Cesium.WebSceneControl类，然后构造M3D模型层管理对象CesiumZondy.Layer.M3DLayer类对象，再通过此图层对象的append()方法加载三维地图文档，并自动跳转到数据位置； + +> 注意：通常情况下，功能实现的JavaScript代码可以单独放置到一个JS文件中，便于维护 + +
+ 加载M3D缓存模型的脚本函数init +
+
加载M3D缓存模型的脚本函数init()
+
+ +- Example: + + ```javascript + //在JS脚本开发中使用严格模式，及时捕获一些可能导致编程错误的ECMAScript行为 + 'use strict'; + //定义三维场景控件对象 + var webGlobe; + //定义M3D图层对象 + var obliqueLayerArr; + //加载三维场景 + function init() { + //构造三维视图对象（视图容器div的id，三维视图设置参数） + webGlobe = new Cesium.WebSceneControl('GlobeView', {}); + + //构造M3D模型层管理对象（视图） + var m3dLayer = new CesiumZondy.Layer.M3DLayer({ + viewer: webGlobe.viewer + }); + //加载M3D地图文档（服务地址，配置参数） + obliqueLayerArr = m3dLayer.append( + `http://develop.smaryun.com:6163/igs/rest/g3d/DaYanTa`, + { + autoReset: true //允许自动定位 + } + ); + } + ``` + +    实现M3D模型缓存的加载显示过程如下： + +    （1）首先需要创建三维场景视图对象。三维场景控件构造函数如下： + +    **WebSceneControl(elementId, options)** + +    *参数说明：* + +- elementId：（ string类型）可选项，三维视图容器div的id。 +- options：（Object类型）可选项，MapGIS三维场景初始化相关参数，以键值对的形式设置，主要参数如下： + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ------ | ------|------|------| +|viewerMode |String |‘3D’ |（可选）初始视图模式默认为三维球视图 '2D’表示二维视图 ‘COLUMBUS_VIEW’ 表示三维平面视图| +|showInfo |Boolean| false |（可选）是否显示默认的属性信息框 +|animation| Boolean| true| （可选）默认动画控制不显示| +|baseLayerPicker| Boolean| true| （可选）是否创建图层控制显示小组件| +|fullscreenButton |Boolean |true |（可选）是否创建全屏控制按钮| +|vrButton |Boolean| false |（可选）是否创建VR按钮| + +    （2）然后构造M3D模型层管理类CesiumZondy.Layer.M3DLayer对象，通过其append()方法加载显示M3D模型缓存数据。 + +    **append(url, options)** + +    *参数说明：* +- url：（string类型）必选项，M3D地图文档服务的地址。 +- options：（object类型）可选项，附加的其他属性，以键值对的形式设置，主要属性参数如下： + +| 参数名 | 类 型 | 默认值 | 说 明 | +| ------ | ------|------|------| +|autoReset |Boolean |true |（可选）是否自动定位| +|synchronous| Boolean |true |（可选）是否异步请求| +|loaded| Boolean| function| （可选）回调函数| +|proxy |DefaultProxy |defaultProxy |（可选）代理| +|showBoundingVolume| Boolean |false| （可选）是否显示包围盒| +|maximumScreenSpaceError| Number| 16| （可选）用于控制模型显示细节，值较大将会渲染更少的贴图，进而可以提高性能，而较低的值将提高视觉质量| + + +> 相关接口的详细说明请查看MapGIS 3DClient for WebGL、MapGIS扩展cesium库、原生cesium库的API说明 + +#### Step 4. 运行调试 + +    VSCode是一个非常流行的Web前端开发IDE，在编写Web网站时一般需要发布后编译运行，也可安装相关插件调试运行。 + +    在此，可先将“SceneDisplay”站点发布，然后通过浏览器查看与调试。例如：在IIS中发布站点后，右键“浏览”选中的“SceneM3DDisplay.html”文件，即可在浏览器中查看，并进行前端调试。 + +
+ 在IIS中浏览网页 +
+
在IIS中浏览网页
+
+
+
+ M3D缓存模型显示效果图 +
+
M3D缓存模型显示效果图
+
+
+    需要调试时，可以利用浏览器的开发者工具进行测试，例如IE、Firefox、Chrome等。打开浏览器的开发者工具，在代码行前端设置断点，然后在浏览器中重新运行示例页面，程序将会运行进入到代码断点处，方便查看相关信息。 + + +## 服务发布 + +    开发前，基于应用的具体需求，可根据开发中采用的出图方式（地图类型）组织制作二维地图（矢量地图文档或瓦片地图），或者三维地图（三维地图文档，M3D缓存等）。通过GIS服务管理器（MapGIS Server Manager）页面左侧的“地图与数据服务”页面，可以发布和查看所发布的地图服务，可以提供地图数据的预览，查看信息，状态控制，删除等操作。 + +### 二维地图发布 + +    在此以发布地图文档（REST模式）为例，发布单个地图文档的配置操作如下： +在MapGIS Server Manager页面左侧导航栏中的“地图与数据服务”中，单击“发布服务”，在下拉菜单中选择“文档发布（包括WMS/WFS/WMTS）”选项。页面跳转至发布服务配置页面。 + +
+ MapGIS服务发布 +
+
MapGIS Server Manager发布服务
+
+
+ +    配置项参数说明： +1. 选取地图文档：点击“地图文档路径”后的“浏览”按钮，在服务器磁盘中选择发布的地图文档（.mapx），选取后自动读取该文档的名称。矢量地图文档分为如下两种类型，即本地数据源、远程数据源（也称网络数据源，即关系数据库存储地理数据的GDBServer）。 + +- 本地数据源（HDF）：适用于地理数据库文件，存在并且添加到MapGIS IGServer中，对应的gdbServer名称为“MapGISLocal”，gdb用户名和密码为空； +- 本地数据源（HDB）【推荐使用】：适用于地理数据库文件，存在并且添加到MapGIS IGServer中，对应的gdbServer名称为“MapGISLocalPlus”，gdb用户名和密码为空； +- 远程数据源：适用于地图文档所调用要素图层数据，存在于非本地数据库中，如Oracle数据库； + +> MapGIS IGServer(九州)支持本地数据源HDB方式，不支持本地数据源HDF方式。 + +2. 发布地图文档：在服务器磁盘中找到需要发布的mapx地图文档并添加之后，点击“发布”按钮，即可发布二维地图文档为MapGIS Rest地图服务格式; +3. 获取地图服务的基地址与相关信息，用于Web应用开发。 + +### 三维地图发布（M3D缓存） + +    在此以MapGIS Desktop自带的三维模型数据（景观_建筑模型）为例，说明配置三维模型地图文档操作步骤。 + +#### 生成M3D缓存 + +1. 打开MapGIS Desktop，新建一个空场景； + +
+ 新建空场景 +
+
新建空场景
+
+
+ +2. 在新场景中添加示例数据库（Sample）中的景观_建筑模型，即鼠标右击【新场景1】，通过【添加图层】->【添加模型层】进行操作； + +
+ 添加模型层 +
+
添加模型层
+
+
+ +
+ 选择模型数据 +
+
选择模型数据
+
+
+ +
+ 显示模型 +
+
显示模型
+
+
+ +3. 将已添加的模型数据生成M3D缓存； + + - (1) 右击【景观_建筑模型】，选择【属性】，在属性页面设置渲染方式为分块渲染，然后点击【应用】，关闭属性页面； + +
+ 选择模型属性 +
+
选择模型属性
+
+
+ +
+ 设置渲染方式 +
+
设置渲染方式
+
+
+ + - (2) 在新场景节点上，点击【生成缓存】->【生成M3D缓存】； + +
+ 生成M3D缓存 +
+
生成M3D缓存
+
+
+ + - (3) 配置M3D缓存参数，可设置缓存存储目录、LOD级别等，详细参数说明请查看，此处以默认参数为例； + +
+ 配置M3D缓存参数 +
+
配置M3D缓存参数
+
+
+ + - (4) 设置相关参数后，先点击【预计算】，然后再点击【生成】，即开始生成M3D缓存，成功操作后将生成M3D缓存文件； + +4. 生成M3D缓存成功后，关闭【生成缓存】对话框，并移除场景中的景观_建筑模型图层(为提交三维场景渲染效率，移除场景中原模型图层)； + +
+ 移除图层 +
+
移除图层
+
+
+ +5. 将生成的M3D缓存添加到三维场景中：右击【新场景1】，选择【添加模型缓存图层】，选择生成的.mcj文件； + +
+ 添加模型缓存图层 +
+
添加模型缓存图层
+
+
+ +
+ 选择M3D缓存文件 +
+
选择M3D缓存文件
+
+
+ +
+ M3D缓存显示效果 +
+
M3D缓存显示效果
+
+
+ + +6. 在场景中添加了M3D缓存后，将其保存为三维地图文档（.mapx）。 + +
+ 保存三维地图文档 +
+
保存三维地图文档
+
+
+ +#### 发布M3D地图文档 + +1. 登录进入MapGIS Server Manager管理界面，如MapGIS IGServer .NET的访问地址为【http://localhost:9999/】，用户名与密码默认为【admin/sa.mapgis】； + +
+ 登录MapGIS Server Manager +
+
登录MapGIS Server Manager
+
+
+ +2. 发布三维地图文档，选择【地图与数据服务】->【发布服务】->【三维服务发布】选择保存的地图文档； + +
+ 发布三维地图文档 +
+
发布三维地图文档
+
+
+ +3. 获取发布之后的三维地图访问基地址，在应用中需要用到。 + +
+ 获取三维地图访问基地址 +
+
获取三维地图访问基地址
+
+
+ +
+ 复制基地址 +
+
复制基地址
+
+
+ + + +## 第三方地图 + +    第三方地图，主要指的就是互联网上涌现的大量地图服务资源，提供免费开放的基础地图服务，一般均为瓦片地图形式，常在应用中作为底图直接调用。网络上主流的公共地图服务包括百度地图、高德地图、天地图、OpenWeather地图等。这些免费的在线地图服务资源，吸引了众多用户，不仅方便了广大开发者使用在线地图开发丰富的地图应用，扩宽互联网地图应用范围，挖掘GIS的潜在价值；同时也让更多人了解电子地图、了解互联网GIS，享受互联网GIS带来的便利和乐趣。 + +     支持第三方公共互联网地图，如百度地图、天地图、高德地图、OpenWeather地图等，通过CesiumZondy.Layer.ThirdPartyLayer类下的方法加载各类地图。 + +| 地图类型 | 类名/方法名 | API说明 | +| ------- | -------------- |----------------| +| 天地图 | appendTDTuMap() / appendTDTuMapByWMTS()| 天地图，具体类型包括矢量、影像、地形，坐标系为 EPSG:4326，即 WGS-84 经纬度 ，访问需要token | +| 百度地图 | appendBaiduMap() | 百度地图，类型包括矢量、影像| +| 高德地图 | appendGaodeMap() | 高德地图，Web 墨卡托坐标系，EPSG:3857 | +| OpenWeather地图 | appendOpenWeatherMap() | OpenStreetMap地图 ，天气预报云图服务| + +### 天地图 + + + 天地图 + + +     具体实现：创建第三方数据图层类`CesiumZondy.Layer.ThirdPartyLayer`的对象，调用`appendTDTuMap()`方法，需配置 url 或 type（二选一设置即可）、token 参数，可实现矢量、影像、地形数据的加载。 + +（1） url 地址：可参考提供的 URL 示例 + +- 天地图经纬度数据：http://t0.tianditu.com/DataServer?T=vec_c&X={x}&Y={y}&L={l} + +- 30 米全球地表覆盖数据服务：http://glcdata.tianditu.com/DataServer?T=glc_c&X={x}&Y={y}&L={l} + +（2） token：请前往天地图官网申请自己的开发 token，示例自带 token 仅做功能演示； + +（3） type 类型：可传入'vec'、'img'、'ter'等，分别代表矢量、影像、地形地图，具体请查看天地图官网。 + +- Example: + ```javascript + //构造第三方图层对象 + var thirdPartyLayer = new CesiumZondy.Layer.ThirdPartyLayer({ + viewer: webGlobe.viewer, + }) + //加载天地图 + var tdtLayer = thirdPartyLayer.appendTDTuMap({ + //天地图经纬度数据url,注意url与ptype设置其中一个即可 + //url: 'http://t0.tianditu.com/DataServer?T=vec_c&X={x}&Y={y}&L={l}', + //开发token （请到天地图官网申请自己的开发token，自带token仅做功能验证随时可能失效） + token: '9c157e9585486c02edf817d2ecbc7752', + //地图类型，如'vec'矢量 'img'影像 'ter'地形 + ptype: 'vec', + }) + ``` + +- Example: + ```javascript + //构造第三方图层对象 + var thirdPartyLayer = new CesiumZondy.Layer.ThirdPartyLayer({ + viewer: webGlobe.viewer, + }) + //通过WMTS服务方式加载天地图：如影像'img'、地形'ter'、 注记'cta'，具体请查看天地图官网: + var tdtLayer = thirdPartyLayer.appendTDTuMapByWMTS({ + ptype: 'img', + }) + ``` + + +### 百度地图 + + + 百度地图 + + +    具体实现：创建第三方数据图层类`CesiumZondy.Layer.ThirdPartyLayer`的对象，调用`appendBaiduMap()`方法，配置不同参数可加载不同类型地图，包括：瓦片（ptype:'tile'）、卫星（ptype:'sate'）和交通地图（ptype:'traffic'）。 + +- Example: + ```javascript + //构造第三方图层对象 + var thirdPartyLayer = new CesiumZondy.Layer.ThirdPartyLayer({ + viewer: webGlobe.viewer, + }) + //添加百度地图 + var baiduLayer = thirdPartyLayer.appendBaiduMap({ + //地图类型：瓦片：'tile'、卫星：'sate'、交通地图：'traffic' + ptype: 'tile', + }) + ``` + + +### 高德地图 + + + 高德地图 + + +    具体实现：创建第三方数据图层类`CesiumZondy.Layer.ThirdPartyLayer`的对象，调用`appendGaodeMap()`方法加载高德地图，配置不同参数可加载不同类型地图，如矢量：'vec'、影像：'img'、道路：'road'。 + +- Example: + ```javascript + //构造第三方图层对象 + var thirdPartyLayer = new CesiumZondy.Layer.ThirdPartyLayer({ + viewer: webGlobe.viewer, + }) + //加载高德地图 + var amapLayer = thirdPartyLayer.appendGaodeMap({ + //地图类型：矢量：'vec'、影像：'img'、道路：'road' + ptype: 'vec', + }) + ``` + +### OpenWeather地图 + + + OpenWeather地图 + + +- Example: + ```javascript + //构造第三方图层对象 + var thirdPartyLayer = new CesiumZondy.Layer.ThirdPartyLayer({ + viewer: webGlobe.viewer, + }) + //加载OpenWeather地图 + var owLayer = thirdPartyLayer.appendOpenWeatherMap({ + ptype: 'Label', + appid: 'b1b15e88fa797225412429c150c122a1', + }) + ``` + + +## M3D图层 + + +> M3D是针对多端应用的轻量级三维数据交换格式，对海量三维数据进行网格划分与分层组织，采用流式传输模式，实现多端一体的高效解析和渲染。具备高效网络传输模式、多级LOD模型支持、WebGL无缝融合等优点。可以将多样类型、多种格式的三维数据通过M3D数据交换格式进行高效解析并渲染，能够支持的数据类型包括：精细模型（景观模型、BIM模型）、实景三维（倾斜摄影、地质体、管线）、点云（激光点云las等）、其他（栅格、地形、矢量、瓦片）等。 + + +    在三维场景中支持加载M3D缓存数据，对接MapGIS IGServer发布的三维地图服务，数据类型包括景观模型、BIM模型、倾斜摄影、地质体模型等。 + +    数据准备：针对M3D缓存数据的加载，需要进行数据的处理与发布，即先通过MapGIS Desktop桌面工具将三维模型数据生成M3D缓存，并组织为地图文档；再在MapGIS Server Manager服务管理器中根据地图文档发布为三维地图服务。 + +    具体实现：构造`CesiumZondy.Layer.M3DLayer`M3D图层管理对象，调用`append()`方法，传入M3D缓存三维地图服务的URL地址即可加载浏览数据，同时可传入相关配置参数。 + +    **以加载M3D的景观模型为例**： + + + M3D图层 + + +* Example: + ``` javascript + //构造M3D模型层管理对象（视图） + var m3dLayer = new CesiumZondy.Layer.M3DLayer({ + viewer: webGlobe.viewer + }); + //加载M3D地图文档（服务地址，配置参数） + var landscapeLayer = m3dLayer.append('http://develop.smaryun.com:6163/igs/rest/g3d/ZondyModels', { + //是否自动定位到数据位置 + autoReset: false, + //模型细节显示控制参数：较大值可提高渲染性能，较低值可提高视觉质量 + maximumScreenSpaceError: 8 + }); + ``` + + +## 地图服务 + +    全面支持MapGIS地图服务数据加载，包括基于二维矢量数据、瓦片数据发布的二维矢量与瓦片服务；栅格影像、DEM地形数据、倾斜摄影等三维模型数据发布的三维地图服务。 + +### 矢量服务（二维地图文档） + + + 二维地图文档 + + +    具体实现：首先构造`CesiumZondy.Layer.TilesLayer`瓦片图层管理对象，然后调用`append2DDocTile()`方法，传入地图服务的 URL 地址及相关参数，即可加载 IGServer 二维地图文档数据。 + +- Example: + ```javascript + //构造瓦片图层管理对象（视图） + var layer = new CesiumZondy.Layer.TilesLayer({ + viewer: webGlobe.viewer, + }) + //添加MapGIS IGServer发布的二维地图文档服务 + vecDoc = layer.append2DDocTile('http://develop.smaryun.com:6163/igs/rest/mrms/docs/北京市', {}) + ``` + +### 瓦片服务 + + + 二维瓦片 + + +    具体实现：首先构造`CesiumZondy.Layer.TilesLayer`瓦片图层管理对象，然后构造图层加载的参数，如范围、瓦片初始级行列数、最大显示级别等信息，可用来指定瓦片显示的范围、最大级别等；然后调用`appendMapGISTile()`方法传入二维瓦片服务地址及参数，即可加载浏览数据。 + +- Example: + ```javascript + //构造瓦片图层管理对象（视图） + var tilelayer = new CesiumZondy.Layer.TilesLayer({ + viewer: webGlobe.viewer, + }) + //参数 + var options = { + tileRang: Cesium.Rectangle.fromDegrees(-180, -90, 180, 90), + //瓦片初始级的列数 默认为2 + colNum: 2, + //瓦片初始级的行数 默认为1 + rowNum: 1, + //瓦片最大显示级数 默认为19 + maxLevel: 19, + //如瓦片裁的不是256,则需设置下面两个参数 + //瓦片宽度 + tileWidth: 256, + //瓦片高度 + tileHeight: 256, + } + //添加MapGIS IGServer发布的二维瓦片服务 + var layer = tilelayer.appendMapGISTile('http://develop.smaryun.com:6163/igs/rest/mrms/tile/北京市', options) + ``` + +### 地形服务 + + + 三维地形 + + +    具体实现：构造`CesiumZondy.Layer.TerrainLayer`地形图层管理对象，调用`append()`方法，传入三维地图服务的 URL 地址即可加载浏览数据，可传入相关配置参数。 + +- Example: + ```javascript + //构造地形层管理对象（视图） + var layer = new CesiumZondy.Layer.TerrainLayer({ + viewer: webGlobe.viewer, + }) + //加载三维地图文档（服务地址，配置参数） + var terrainlayer = layer.append('http://develop.smaryun.com:6163/igs/rest/g3d/terrain', {}) + ``` + +## OGC服务 + +     OGC（OpenGIS Consortium OpenGIS协会）是一个公益的行业协会，成立于1994年，致力于促进采用新的技术和商业方式来提高地理信息处理的互操作性(Interoperability)。OGC为实现地理信息共享与互操作，定义了一系列Web地理信息服务的抽象接口与实现规范，包括WMS、WFS、WMTS、WCS等. + + +| 服务类型 | 类名/方法名 | API说明 | +| ------- | -------------- |----------------| +| WMS | CesiumZondy.Layer.OGCLayer/ appendWMSTile() |加载WMS服务地图，WMS的GetMap接口返回指定范围内的地图图片 | +| WMTS | CesiumZondy.Layer.OGCLayer/ appendWMTSTile() | 加载WMTS服务地图，WMTS的GetTile接口返回的就是单张瓦片| + + +     MapGIS IGServer全面支持OGC服务的发布与应用，包括WMS、WFS、WMTS、WCS等服务。其中，常用的WMS、WFS、WMTS中对应的MapGIS格式的数据类型为： +- WMS：MapIGS格式的地图文档、矢量图层； +- WFS：MapIGS格式的地图文档、矢量图层； +- WMTS：MapIGS格式的瓦片图层、实时瓦片图层、分布式瓦片图层。 + +> 要在客户端调用OGC服务，需要先在IGServer服务管理器中发布OGC服务，具体操作请查看**MapGIS IGServer操作手册**（.NET版，九州版） + +### WMS + +    Web Map Service（网络地图服务），简称 WMS，由开放地理信息联盟（Open GeoSpatial Consortium，OGC）制定。该规范定义了 Web 客户端从网络地图服务器获取地图的接口标准。一个 WMS 可以动态地生成具有地理参考数据的地图，这些地图通常用 GIF、JPEG 或 PNG 等图像格式，或者 SVG、KML、VML 和 WebCGM 等矢量图形格式来表现。使用者通过指定的参数获取相应的地图图片。 + +    数据准备：可在 MapGIS IGServer 中发布 WMS 地图服务获取数据地址，也可通过其他方式发布服务或者获取地址，只要是基于 OGC 标准的 WMS 地图服务都能支持。 + +    具体实现：构造`CesiumZondy.Layer.OGCLayer`M3D 图层管理对象，调用`appendWMSTile()`方法，并配置服务地址、图层名称、附加信息，即可实现 WMS 地图服务数据的加载，在此传入的是 IGServer 中发布的 WMS 地图服务地址，可做参考。 + + + WMS地图 + + +- Example: + ```javascript + //构造OGC图层管理对象（视图） + var ogcLayer = new CesiumZondy.Layer.OGCLayer({ + viewer: webGlobe.viewer, + }) + //添加WMS服务地图 + var wmsLayer = ogcLayer.appendWMSTile( + //地图服务URL地址 + 'http://develop.smaryun.com:6163/igs/rest/ogc/doc/北京市/WMSServer', + //图层名 + '北京市,绿地_1,水域_3,大学,学校,动物园', + //附加属性 + {} + ) + ``` + + +### WMTS + +    Web Map Tile Service（网络地图瓦片服务），简称 WMTS，由开放地理信息联盟（Open GeoSpatial Consortium，OGC）制定，是和 WMS 并列的重要 OGC 规范之一。WMTS 不同于 WMS,它最重要的特征是采用缓存技术能够缓解 WebGIS 服务器端数据处理的压力，提高交互响应速度，大幅改善在线地图应用客户端的用户体验。WMTS 是 OGC 主推的缓存技术规范，是目前各种缓存技术相互兼容的一种方法。 + +    数据准备：可在 MapGIS IGServer 中发布 WMTS 地图服务获取数据地址，也可通过其他方式发布服务或者获取地址，只要是基于 OGC 标准的 WMTS 地图服务都能支持。 + +    具体实现：调用`CesiumZondy.Layer.OGCLayer`的`appendWMTSTile()`方法，并配置服务地址、图层名称、最大级数等信息，即可实现 WMTS 地图服务数据的加载，在此传入的是 IGServer 中发布的 WMTS 地图服务地址，可做参考。 + + + WMTS地图 + + +- Example: + ```javascript + //构造OGC图层管理对象（视图） + var ogcLayer = new CesiumZondy.Layer.OGCLayer({ + viewer: webGlobe.viewer, + }) + //添加WMTS地图服务 + var wmtsLayer = ogcLayer.appendWMTSTile( + //瓦片服务地址 + 'http://develop.smaryun.com:6163/igs/rest/ogc/WMTSServer', + //图层名称 + 'beijing', + 'EPSG:4326_北京市_028mm_GB', + //最大级数 + 17, + null, + 'default', + 0 + ) + ``` + +## 通用数据 + +    基于原生Cesium，支持加载各类通用格式数据，如3DTiles、 GLTF、CZML、GeoJSON、KML、KMZ数据，以及各种图片数据等。 + + +| 类名/方法名 | API说明 | +| -------------- |----------------| +| CesiumZondy.Manager.CommonDataManager / append3DTile() | 3DTiles数据 | +| CesiumZondy.Manager.CommonDataManager / appendModel() | GLTF数据 | +| CesiumZondy.Manager.CommonDataManager / appendCZML() | CZML数据 | +| CesiumZondy.Manager.CommonDataManager / appendGeoJson() | GeoJSON数据 | +| CesiumZondy.Manager.CommonDataManager / appendKml() | KML、KMZ数据 | +| CesiumZondy.Manager.CommonDataManager / appendImageByUrl() | 图片数据 | + + +### 3DTiles 数据 + +> 什么是3DTiles？ + +    3DTiles 是用于流式传输大规模异构 3D 地理空间数据集的开放规范。为了扩展 Cesium 的地形和图像流，3DTiles 将用于流式传输 3D 内容，包括建筑物，树木，点云和矢量数据。关于 3DTiles 可自行了解其更多内容。 + +    具体实现：针对3DTiles数据支持本地数据和网络数据加载，关键接口为`CesiumZondy.Manager.CommonDataManager`类提供的`append3DTile()`方法与`remove3DTile()`方法，实现 3D Tiles 数据的加载与移除功能。加载数据须设置 3DTiles 数据的 URL 参数，通过加载成功回调函数定位跳转到所加载的 3DTiles 数据范围。 + + + 3DTiles数据 + + +- Example: + ```Javascript + //构造通用数据管理对象 + var commonDataManager = new CesiumZondy.Manager.CommonDataManager({ + viewer: webGlobe.viewer + }); + //加载3DTile数据 + var tiles = commonDataManager.append3DTile( + //3DTile数据路径，支持本地与网络数据 + './static/data/3DTile/BatchedTilesets/tileset.json', + //成功回调函数 + load + ); + function load(layer) { + //加载成功后定位跳转 + webGlobe.viewer.flyTo(layer); + console.log("这是一个加载成功回调"); + } + //通过remove3DTile方法移除 + //commonDataManager.remove3DTile(tiles); + ``` + +### GLTF 数据 + +> 什么是 GLTF？ + +    GLTF（GL Transmission Format），即图形语言交换格式，是一种三维数据的格式标准，由 Khronos Group 推出。由于三维数据格式众多，所以其致力于成为像音频界的 MP3、图像界的 JPEG 那样的 3D 领域通用的数据格式。目前多款三维软件支持了 GLTF 格式数据的读写，如 Maya、3dmax、unity 等等。采用 GLTF 可避免不同软件中数据转换操作造成的各方面问题。 +GLTF 官方介绍 + +    具体实现：关键接口为`CesiumZondy.Manager.CommonDataManager`类提供的`appendModel()`方法，设置模型 id、模型文件 URL 路径、模型所在经纬度、高度、缩放比参数信息，即可实现 GLTF 模型的加载。如果模型自带动画，需要设置`webGlobe.viewer.clock.shouldAnimate`参数为 true 来开启动画。 + + + GLTF数据 + + +- Example: + ```javascript + //构造通用数据管理对象 + var commonDataManager = new CesiumZondy.Manager.CommonDataManager({ + viewer: webGlobe.viewer, + }) + //开启动画：如果模型自带动画，需开启此参数 + webGlobe.viewer.clock.shouldAnimate = true + //添加模型（gltf文件） + var model = commonDataManager.appendModel( + //模型id + 'model', + //模型文件URL路径 + './static/data/model/WuRenJi/WuRenJi.gltf', + //模型经度、纬度、高度 + 114.3938, + 30.5045, + 200, + //缩放比 + 200 + ) + ``` + +     **批量加载 GLTF 模型**：支持在三维场景中批量添加多个 GLTF 模型数据。常用于需要一次性添加多个模型的应用场景，多个模型可为相同数据，也可以是不同数据，参数单独设置，简化代码操作步骤。 + + + 批量GLTF数据 + + + - Example: + ```javascript + //多个模型 + var models = [ + { + id: 'document', + name: 'Models', + version: '1.0', + }, + { + //模型的ID + id: 'aerogenerator1', + //模型的名字 + name: '风机1', + //模型要添加的坐标位置 + position: { + cartographicDegrees: [118.0385, 42.6374, -5], + }, + //模型文件参数 + model: { + //模型文件的路径 + gltf: './static/data/model/donghua.gltf', + //模型的比例 + scale: 50, + //模型最小显示的像素 + minimumPixelSize: 16, + }, + //描述 + description: '这是1号风机', + }, + { + //模型的ID + id: 'aerogenerator2', + //模型的名字 + name: '风机2', + //模型要添加的坐标位置 + position: { + cartographicDegrees: [118.0356, 42.6354, -5], + }, + //模型文件参数 + model: { + //模型文件的路径 + gltf: './static/data/model/donghua.gltf', + //模型的比例 + scale: 50, + //模型最小显示的像素 + minimumPixelSize: 16, + }, + //描述 + description: '这是2号风机', + }, + ] + //开启动画：如果模型自带动画，需开启此参数 + webGlobe.viewer.clock.shouldAnimate = true + //构造通用数据管理对象 + var commonDataManager = new CesiumZondy.Manager.CommonDataManager({ + viewer: webGlobe.viewer, + }) + //添加多个模型 + modelSource = commonDataManager.appendModels(models) + ``` + +- Example: + ```javascript + //跳转到模型处 + webGlobe.viewer.zoomTo(modelSource) + ``` + +### CZML 数据 + +> 什么是 CZML？ + +    CZML，是一种用来描述动态场景的 JSON 架构的地理数据可视化语言，可以用来描述点、线、布告板、模型以及其他的图元，不仅提供了丰富的图形及其外观选择，还专注于表现动态地理数据的变化特征，主要用于 Cesium 在浏览器中的展示。 +CZML 介绍参考 + +    具体实现：关键接口为`CesiumZondy.Manager.CommonDataManager`类提供的`appendCZML()`方法，传入 CZML 文件的地址即可实现 CZML 数据的加载，并可添加回调函数根据 CZML 文件中某一模型 ID 判断是否添加成功；对应可通过`removeDataSource()`方法移除。 + + + CZML数据 + + +- Example: + ```javascript + //构造通用数据管理对象 + var commonDataManager = new CesiumZondy.Manager.CommonDataManager({ + viewer: webGlobe.viewer, + }) + //添加CZML数据 + var datasource = commonDataManager.appendCZML( + //CZML文件地址 + './static/data/czml/fengji.czml', + //成功回调 + function(entities) { + //判断是否添加成功 + var enti = entities.getById('aerogenerator10') + if (enti == undefined) { + alert('失败') + } + } + ) + ``` + + +### GeoJSON 数据 + +> 什么是 GeoJSON？ + +    GeoJSON，是一种对各种地理数据结构进行编码的格式，基于 Javascript 对象表示法的地理空间信息数据交换格式。通过键值对的方式表达几何、特征或者特征集合，能够支持点、线、面、多点、多线、多面和几何集合的数据类型。 +GeoJSON 官方介绍 + +    具体实现：关键接口为`CesiumZondy.Manager.CommonDataManager`类提供的`appendGeoJson()`方法，传入 GeoJSON 文件地址，实现 GeoJSON 数据的加载；对应可通过`removeDataSource()`方法移除。 + +    在此以本地文件为例： + + + GeoJSON数据 + + +- Example: + ```javascript + //构造通用数据管理对象 + var commonDataManager = new CesiumZondy.Manager.CommonDataManager({ + viewer: webGlobe.viewer, + }) + //添加GeoJson数据（GeoJson文件地址） + var datasource = commonDataManager.appendGeoJson('./static/data/geojson/wuhan_bounds.geojson') + ``` + +### KML 数据 + +> 什么是 KML？ + +    KML（Keyhole Markup Language，Keyhole 标记语言）是由 Google 旗下的 Keyhole 公司开发和维护的一种基于 XML 的标记语言，可用于描述和保存地理空间信息（如点、线、面、图像、模型等），适合网络环境下的地理信息协作与共享。KML 在 2008 年 4 月被 OGC（开放地理信息系统协会）宣布成为开放地理信息编码标准。KML 是纯粹的 xml 文本格式，两者之间最大的区别就在于 KML 描述的是地理信息数据。 +KML 百科介绍 + +    具体实现：关键接口为`CesiumZondy.Manager.CommonDataManager`类提供的`appendKml()`方法，传入 KML 文件地址，实现 KML 数据的加载；对应可通过`removeDataSource()`方法移除。 + +    在此以本地文件为例： + + + KML数据 + + +- Example: + ```javascript + //构造通用数据管理对象 + var commonDataManager = new CesiumZondy.Manager.CommonDataManager({ + viewer: webGlobe.viewer, + }) + //添加KML数据 + datasource = commonDataManager.appendKml('./static/data/kml/bikeRide_wuhan.kml') + ``` + + +### KMZ 数据 + +> 什么是 KMZ？ + +    KMZ 文件是经过压缩的 KML 文件，将其解压后即可获得最原始的 KML 文件。与 KML 不同的是，由于 KMZ 是压缩包文件，所以其中不仅可以包括 KML 文本文件，还可以包括其他类型的文件，如图片等，所以 KMZ 能够表达的信息可以更加丰富多样。 + +    具体实现：实现 KMZ 数据的加载与 KML 数据的方法一样，都采用`CesiumZondy.Manager.CommonDataManager`类提供的`appendKml()`方法；对应可通过`removeDataSource()`方法移除。 + +    在此以本地文件为例： + + + KMZ数据 + + +- Example: + ```javascript + //构造通用数据管理对象 + var commonDataManager = new CesiumZondy.Manager.CommonDataManager({ + viewer: webGlobe.viewer, + }) + //添加KMZ数据 + var datasource = commonDataManager.appendKml('./static/data/kmz/sample.kmz') + ``` + +### 图片数据 + +    可在三维场景中叠加显示图片文件数据，支持本地数据和网络数据加载。 + +    具体实现：关键接口为`CesiumZondy.Manager.CommonDataManager`类提供的`appendImageByUrl()`方法与`removeImage()`方法，实现图片叠加显示与移除功能。调用`appendImageByUrl()`方法时，需要传入图片的地址（可为本地图片地址，也可以为网络图片的 URL），以及图片显示的坐标范围。 + +    **本地图片**： + + + 本地图片 + + +- Example: + ```javascript + //构造通用数据管理对象 + var commonDataManager = new CesiumZondy.Manager.CommonDataManager({ + viewer: webGlobe.viewer, + }) + //添加图片 + var image = commonDataManager.appendImageByUrl( + //本地图片地址 + './static/data/picture/world.jpg', + //图片显示范围（西经、南纬、东经、北纬） + -180.0, + -90, + 180.0, + 90 + ) + ``` + +    **在线图片**： + + + 在线图片 + + +- Example: + ```Javascript + //构造通用数据管理对象 + var commonDataManager = new CesiumZondy.Manager.CommonDataManager({ + viewer: webGlobe.viewer + }); + + //通过地址添加图片，支持本地图片和网络图片 + var imgObj = commonDataManager.appendImageByUrl( + //图片URL + 'http://5b0988e595225.cdn.sohucs.com/images/20180917/455c51316ec24a97958a254dc66c18f6.jpeg', + //东经 + 114.3473, + //北纬 + 30.5479, + //西经 + 114.4637, + //南纬 + 30.6120 + ); + //定位跳转 + sceneManager.flyToComm(114.4, 30.55, 30000); + + //通过removeImage()删除 + //commonDataManager.removeImage(imgObj,false); + ``` + + +## 场景操作 + +    基于原生Cesium，结合三维GIS应用进一步封装，提供丰富的场景交互操作功能，其中常用功能为常用控件、场景模式设置、场景浏览基本操作、视点跳转、坐标转换等功能。 + +### 常用控件 + +    常用的基础控件，包括鼠标位置、导航控件、比例尺、罗盘等。鼠标位置控件显示当前鼠标所在点的经纬度，高程等位置信息；导航控件提供放大、缩小、复位基础场景导航功能；罗盘控件则为方位指向，通常与导航控件结合使用。 + +    具体实现：先初始化 Cesium 三维球控件 `Cesium.WebSceneControl()` ，然后初始化视图功能管理类 `CesiumZondy.Manager.SceneManager()` ，调用视图功能管理类的 `showPosition()` 方法显示位置信息；再初始化通用功能管理类`CesiumZondy.Manager.CommonFuncManager()` ，调用`createNavigationTool()`方法显示常用导航控件。 + + + 常用控件 + + +- Example: + + ```html + +
+ + +
+ ``` + + ```Javascript + //初始化视图功能管理类 + var sceneManager = new CesiumZondy.Manager.SceneManager({ + viewer: webGlobe.viewer + }); + //显示鼠标位置控件 + sceneManager.showPosition('coordinateDiv'); + ``` + + +- Example: + ```Javascript + //初始化通用功能管理类 + var commFun = new CesiumZondy.Manager.CommonFuncManager({ + viewer: webGlobe.viewer + }); + //显示导航控件（罗盘、场景导航、比例尺） + var navigation = commFun.createNavigationTool({ + enableCompass: true, + enableZoomControls: true, + enableDistanceLegend: true, + enableCompassOuterRing: true + }); + ``` + +### 场景模式 + +    场景视图模式提供三种模式：三维球面模式、三维平面模式、二维地图模式，在实际应用中可根据具体应用场景设置。 + +    具体实现：初始化 Cesium 三维球控件 `Cesium.WebSceneControl()` 后初始化视图功能管理类 `CesiumZondy.Manager.SceneManager()` ，调用视图功能管理类的 `changeSceneMode()` 方法切换地图显示模式。另外，通过修改 Cesium 三维球控件 `Cesium.WebSceneControl()` 的视图对象的 scene 参数来设置地下模式。 + +    **常用场景模式** + + + 场景模式 + + +- Example: + + ```Javascript + //初始化视图功能管理类 + var sceneManager = new CesiumZondy.Manager.SceneManager({ + viewer: webGlobe.viewer + }); + let mode = document.getElementById("modeSelect").value; + //根据选择切换场景视图模式 + if (mode == '3D') { + //切换场景模式为三维球面 + sceneManager.changeSceneMode('3D', 1); + } else if (mode === '3DC') { + //切换场景模式为三维平面 + sceneManager.changeSceneMode('COLUMBUS_VIEW', 1); + } else if (mode === '2D') { + //切换场景模式为二维地图 + sceneManager.changeSceneMode('2D', 1); + } + ``` + +    **地下场景模式** + +    **地下模式一**：开启地下模式并关闭大气层、设置球面透明度 + +- Example: + ```Javascript + //设置地下模式 + webGlobe.viewer.scene.globe.undergroundMode = true; + //大气显示关闭 + webGlobe.viewer.scene.skyAtmosphere.show = false; + //透明度设置 + webGlobe.viewer.scene.globe.transparent = 0.3; + ``` + +    **地下模式二**：开启地下模式、关闭大气层与地面大气效果、设置球面透明度、设置背景色 + +- Example: + ```Javascript + //设置地下模式 + webGlobe.viewer.scene.globe.undergroundMode = true; + //大气显示关闭 + webGlobe.viewer.scene.skyAtmosphere.show = false; + //地面大气效果关闭 + webGlobe.viewer.scene.skyAtmosphere.showGroundAtmosphere = false; + //透明度设置 + webGlobe.viewer.scene.enableTransparent = true; + //透明度设置 + webGlobe.viewer.scene.globe.transparent = 1; + //背景颜色设置 + webGlobe.viewer.scene.baseColor = new Cesium.Color(1, 1, 1, 0.0001); + webGlobe.viewer.scene.globe.imageryLayers.get(0).alpha = 0; + webGlobe.viewer.scene.globe.imageryLayers.get(1).alpha = 0; + ``` + + +### 场景操作 + +    场景的基本操作功能，包括场景视图缩放、复位、三维球自转、设置天空盒等。 + +    具体实现：先初始化 Cesium 三维球控件 `Cesium.WebSceneControl()` , 然后初始化视图功能管理类 `CesiumZondy.Manager.SceneManager()` ，调用视图功能管理类的如下几个方法分别实现对应的场景操作功能。 + + +| 类名/方法名 | API说明 | +| -------------- |----------------| +| CesiumZondy.Manager.SceneManager / zoomIn() | 放大 | +| CesiumZondy.Manager.SceneManager / zoomOut() | 缩小| +| CesiumZondy.Manager.SceneManager / goHome() | 复位 | +| CesiumZondy.Manager.SceneManager/ openRotation() | 开启自转| +| CesiumZondy.Manager.SceneManager / closeRotation() | 关闭自转| +| CesiumZondy.Manager.SceneManager / changeSkyBox() | 修改天空盒| + + + 场景操作 + + + +- Example: + ```Javascript + //初始化视图功能管理类 + var sceneManager = new CesiumZondy.Manager.SceneManager({ + viewer: webGlobe.viewer + }); + ``` + +    **zoomin():** + +- Example: + + ```Javascript + sceneManager.zoomin();//放大 + ``` + +    **zoomout():** + +- Example: + + ```Javascript + sceneManager.zoomout();//缩小 + ``` + +    **goHome():** + +- Example: + + ```Javascript + sceneManager.goHome();//复位 + ``` + +    **openRotation()与 closeRotation():** + +```Javascript +sceneManager.openRotation();//开启自转 +ceneManager.closeRotation();//关闭自转 +``` + +    **changeSkyBox():** + +- Example: + ```Javascript + var skybox = new Cesium.SkyBox({ + sources: { + positiveX: './static/libs/cdn/Cesium/Assets/Textures/SkyBox2/front.jpg', + negativeX: './static/libs/cdn/Cesium/Assets/Textures/SkyBox2/back.jpg', + positiveY: './static/libs/cdn/Cesium/Assets/Textures/SkyBox2/left.jpg', + negativeY: './static/libs/cdn/Cesium/Assets/Textures/SkyBox2/right.jpg', + positiveZ: './static/libs/cdn/Cesium/Assets/Textures/SkyBox2/top.jpg', + negativeZ: './static/libs/cdn/Cesium/Assets/Textures/SkyBox2/bottom.jpg' + } + }); + sceneManager.changeSkyBox(skybox); + ``` + +### 视点跳转 + +    场景视点跳转功能，即根据坐标点在三维球上进行定位跳转。此功能为场景视图的基础功能，应用非常广泛，可根据具体应用场景需求调用合适的方法。 + +    具体实现：初始化 Cesium 三维球控件 `Cesium.WebSceneControl()` , 初始化视图功能管理类 `CesiumZondy.Manager.SceneManager()` ，调用视图功能管理类的如下 4 个视点跳转方法进行视点跳转。 + + +| 类名/方法名 | API说明 | +| -------------- |----------------| +| CesiumZondy.Manager.SceneManager / flyTo() | 视点跳转简单方法，根据经纬度、视角高度、跳转持续时间进行视点跳转 | +| CesiumZondy.Manager.SceneManager / flyToComm() | 视点跳转通用方法，根据经纬度、视角高度，以及原生的可扩展参数进行视点跳转 | +| CesiumZondy.Manager.SceneManager / flyToEx() | 视点跳转扩展方法，根据经纬度，以及可扩展的参数（包括视角高度、持续时间、方位角、俯仰角、翻滚角）进行视点跳转 | +| CesiumZondy.Manager.SceneManager/ flyToFeatureById() | 根据 ID 飞行到特定要素位置，即通过图层的某个要素进行定位跳转| + + + 视点跳转 + + +- Example: + ```Javascript + //初始化视图功能管理类 + var sceneManager = new CesiumZondy.Manager.SceneManager({ + viewer: webGlobe.viewer + }); + ``` + +    **flyTo()：** + +* Example: + ```Javascript + //跳转视图(北京) + sceneManager.flyTo(116.44, 40, 300000, 2); + ``` + +    **flyToComm()：** + +* Example: + ```Javascript + //跳转视图（武汉） + sceneManager.flyToComm(114.3, 30.6, 100000); + ``` + +    **flyToEx()：** + +* Example: + ```Javascript + //视点跳转（中地科技园） + sceneManager.flyToEx(114.40298522106733, 30.465568703723072, { + height: 100.85856618500283, + heading: -45.4940479913348135, + pitch: -15, + roll: 0 + }); + ``` + +    **flyToFeatureById()：** + +* Example: + + ```Javascript + //加载M3D地图文档（服务地址，配置参数） + Layer2 = m3dLayer.append('http://develop.smaryun.com:6163/igs/rest/g3d/buildings1', { + autoReset: false, + //模型细节显示控制参数：较大值可提高渲染性能，较低值可提高视觉质量 + maximumScreenSpaceError: 0 + }); + //视点跳转-根据 ID 飞行到特定要素位置（上海） + sceneManager.flyToFeatureById(Layer2, 10 ,{ + height: 950, + heading: 22, + pitch: -20, + roll: 0 + }); + + ``` + + +### 坐标转换 + +    根据鼠标事件获取的屏幕坐标进行坐标转换与相关计算的功能，包括常用的屏幕坐标转笛卡尔坐标、屏幕坐标转经纬度、根据经纬度计算高度值。 + +    具体实现：先初始化 Cesium 三维球控件 `Cesium.WebSceneControl()` , 然后初始化公共方法管理类 `CesiumZondy.Manager.CommonFuncManager()` ，分别调用如下对应的方法实现屏幕坐标转换与相关计算功能。 + +- `screenPositionToCartesian`：屏幕坐标转为笛卡尔坐标； +- `screenPositionToCartographic`：屏幕坐标转为经纬度坐标； +- `getHeightFromDegrees`：根据经纬度计算高度值。 + + + +| 类名/方法名 | API说明 | +| -------------- |----------------| +| CesiumZondy.Manager.CommonFuncManager / screenPositionToCartesian() | 屏幕坐标转为笛卡尔坐标 | +| CesiumZondy.Manager.CommonFuncManager / screenPositionToCartographic() | 屏幕坐标转为经纬度坐标 | +| CesiumZondy.Manager.CommonFuncManager / getHeightFromDegrees() | 根据经纬度计算高度值 | + + +- Example: + ```Javascript + //初始化公共方法管理类 + var commonFuncManager = new CesiumZondy.Manager.CommonFuncManager({ + viewer: webGlobe.viewer + }); + //初始化鼠标事件管理类 + var mouseEventManager = new CesiumZondy.Manager.MouseEventManager({ + viewer: webGlobe.viewer + }); + ``` + +    **screenPositionToCartesian()：** + +* Example: + ```Javascript + //添加鼠标左键单击事件获取屏幕坐标点 + mouseEventManager.registerMouseEvent("LEFT_CLICK", leftToCartesian); + function leftToCartesian(movement) { + //将鼠标左键点击的屏幕坐标转为笛卡尔坐标 + var position = commonFuncManager.screenPositionToCartesian(movement.position); + } + ``` + +    **screenPositionToCartographic()：** + +* Example: + ```Javascript + //添加鼠标左键单击事件获取屏幕坐标点 + mouseEventManager.registerMouseEvent("LEFT_CLICK", leftToCartographic); + function leftToCartographic(movement) { + //将鼠标左键点击的屏幕坐标转为经纬度坐标 + var result = commonFuncManager.screenPositionToCartographic(movement.position); + let lng=Cesium.Math.toDegrees(result.longitude);//转为经度值 + let lat=Cesium.Math.toDegrees(result.latitude);//转为纬度值 + } + ``` + +    ** getHeightFromDegrees()：** + +* Example: + + ```Javascript + //添加鼠标左键单击事件获取屏幕坐标点 + mouseEventManager.registerMouseEvent("LEFT_CLICK", leftToHeightFromDegrees); + function leftToHeightFromDegrees(movement) { + //屏幕坐标转笛卡尔坐标 + var cartesian = webGlobe.viewer.getCartesian3Position(movement.position, cartesian); + var cartographic = Cesium.Cartographic.fromCartesian(cartesian); + var lng = Cesium.Math.toDegrees(cartographic.longitude); + var lat = Cesium.Math.toDegrees(cartographic.latitude); + + //根据鼠标左键单击点经纬度计算其高度值 + var height = commonFuncManager.getHeightFromDegrees(lng, lat); + } + ``` + + +### 场景出图 + +    此功能用于将当前场景输出成图片，可导出图片文件或图像对象。 + + +    具体实现：先初始化 Cesium 三维球控件 `Cesium.WebSceneControl()` 加载数据；然后初始化常用功能管理类 `CesiumZondy.Manager.CommonFuncManager()` ，调用常用功能管理类的 `outputImageFile()` 方法或`outputImageObj()`方法进行场景输出图片。 + +| 类名/方法名 | API说明 | +| -------------- |----------------| +| CesiumZondy.Manager.SceneManager / outputImageFile() | 将屏幕截图输出为图片文件 | +| CesiumZondy.Manager.SceneManager / outputImageObj() | 将屏幕截图输出为图像对象，可保存为不同类型图片，应用场景比较丰富 | + +    **使用 outputImageFile()：** + +* Example: + ```Javascript + var commonFuncManager = new CesiumZondy.Manager.CommonFuncManager({ + viewer: webGlobe.viewer + }); + //当前屏幕图片输出为一个图片文件 + commonFuncManager.outputImageFile("图片.png"); + ``` + +    **使用 outputImageObj()：** + +* Example: + ```Javascript + var comm = new CesiumZondy.Manager.CommonFuncManager({ + viewer: webGlobe.viewer + }); + //当前屏幕输出为一个图片对象 + var res = comm.outputImageObj(); + //下载打印此图片对象为png + res.downloadPng("image.png"); + //可输出如下其他格式，可结合其他应用场景使用： + //res.toImg(); + //res.toBase64(); + //res.downloadPng(name); + //res.toCanvas(); + //res.toJpeg(); + //res.toPng(); + ``` + +>outputImageObj()返回的是一个图像对象，可直接输出为图片，也可以结合其他应用场景使用，如将图像输出到 Canvas 显示等。 + + +## 绘制 + +    图形绘制是Web端实现相关GIS功能的基础，尤其是基本几何图形的交互绘制，查询、编辑、分析等功能均涉及到客户端的图形绘制。一般通过绘制图形来获取地图的空间范围，为查询等功能提供条件限制、或提供操作要素的空间属性等。 + +    图形绘制的基础就是空间坐标，任何图形都由空间坐标组成的。一般有两种方式绘制图形：一种是空间坐标已知，通常根据已有的空间坐标信息直接添加图形，实现图形的绘制功能；另一种则通过鼠标交互获取空间坐标，这也是图形绘制常用的方法，通常通过鼠标在地图上进行交互式操作，以获取所需的空间范围信息，以此空间坐标绘制图形。第二种基于鼠标交互式操作完成的图形绘制，被称为交互式图形绘制。 + +| 类名/方法名 | API说明 | +| -------------- |----------------| +| CesiumZondy.Manager.EntityController / appendPoint()、appendPointComm() | 绘制点实体 | +| CesiumZondy.Manager.EntityController / appendLine() | 绘制立体线、绘制贴地形线 | +| CesiumZondy.Manager.EntityController / appendGroundLine() | 绘制贴地球线 | +| CesiumZondy.Manager.EntityController / appendGraphics() | 绘制立体区、绘制贴地形区 | +| CesiumZondy.Manager.EntityController / appendPolygon() | 绘制拉伸区 | +| CesiumZondy.Manager.EntityController / appendGroundPolygon() | 绘制贴地球区 | +| CesiumZondy.Manager.EntityController / appendHolePolygon() | 绘制带洞区 | + + +### 绘制图形 + + +#### 绘制点实体 + + + 绘制点 + + +    具体实现：首先构造`CesiumZondy.Manager.EntityController`几何绘制控制对象，然后调用`appendPoint()`方法，设置点实体所在经纬度、高程，以及名称、像素大小、颜色、边线颜色、边线宽度信息，即可添加绘制点实体。 + +- Example: + + ```javascript + //构造几何绘制控制对象 + var entityController = new CesiumZondy.Manager.EntityController({ + viewer: webGlobe.viewer, + }) + //添加点实体：经度、纬度、高程、名称、大小（像素单位）、颜色、外边线颜色、边线宽度 + var point = entityController.appendPoint(114.30252625376454, 30.544631482624357, 20, '黄鹤楼', 12, new Cesium.Color(255 / 255, 255 / 255, 0 / 255, 1), new Cesium.Color(255 / 255, 0 / 255, 0 / 255, 1), 2) + + //方法二：添加点通用方法，对接Cesium原生，可设置更多属性 + point4 = entityController.appendPointComm( + //经度、纬度、高程 + 114.28478689925817, + 30.555691346035022, + 0, + //名称、描述 + '晴川阁', + '晴川阁景点', + //附加属性：像素大小、颜色、外边线颜色、边线宽度 + { + pixelSize: 12, + color: new Cesium.Color(255 / 255, 255 / 255, 0 / 255, 1), + outlineColor: new Cesium.Color(255 / 255, 0 / 255, 0 / 255, 1), + outlineWidth: 2, + } + ) + ``` + +#### 绘制立体线/贴地形线 + + + 绘制立体线 + + + + 绘制贴地形线 + + +    具体实现：首先构造`CesiumZondy.Manager.EntityController`几何绘制控制对象，调用`appendLine()`方法，设置：线名称、线坐标点数组、线宽、线颜色、是否识别带高度的坐标（如果为 true 即代表立体线）、是否贴地形等信息，即可实现立体线实体的添加绘制。 + +- Example: + ```javascript + //构造几何绘制控制对象 + var entityController = new CesiumZondy.Manager.EntityController({ + viewer: webGlobe.viewer, + }) + //点数组 + var pointArr = [114.3984603010489, 30.506836857208143, 90, 114.39820581466965, 30.50638419163618, 0, 114.39817448017338, 30.505889144282214, 50] + //绘制立体线实体 + var line = entityController.appendLine( + //名称 + '立体线', + //点数组 + pointArr, + //线宽 + 2, + //线颜色 + new Cesium.Color(255 / 255, 0 / 255, 0 / 255, 1), + //是否识别带高度的坐标（如果为true即代表立体线） + true, + //是否贴地形 + false, + //附加属性 + {} + ) + ``` + + +#### 绘制立体区/贴地形区 + + + 绘制立体区 + + + + 绘制贴地形区 + + +    具体实现：构造`CesiumZondy.Manager.EntityController`几何绘制控制对象，根据坐标点、是否指定各点高度、颜色等信息构造区对象，然后调用`appendGraphics()`方法即可实现立体区或贴地形区的绘制。注意贴地形区的分类类型需设置为`Cesium.ClassificationType.TERRAIN`。 + +- Example: + + ```javascript + //构造几何绘制控制对象 + var entityController = new CesiumZondy.Manager.EntityController({ + viewer: webGlobe.viewer, + }) + + //构造区对象 + var polygon = { + name: '立体区', + polygon: { + //坐标点 + hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights([114.3992, 30.5062, 100, 114.39921899282697, 30.507118866456594, 0, 114.39817867190918, 30.505787946817524, 0, 114.40013927896888, 30.505694066567706, 0]), + //是否指定各点高度 + perPositionHeight: true, + //颜色 + material: new Cesium.Color(33 / 255, 150 / 255, 243 / 255, 0.5), + //轮廓线是否显示 + outline: true, + //轮廓线颜色 + outlineColor: Cesium.Color.BLACK, + }, + } + //绘制图形通用方法：对接Cesium原生特性 + var stericPolygon = entityController.appendGraphics(polygon) + ``` + +- Example: + ```javascript + //构造几何绘制控制对象 + var entityController = new CesiumZondy.Manager.EntityController({ + viewer: webGlobe.viewer, + }) + //三维坐标点数组 + let points = [121.12838249665901, 23.828496638766055, 2816.2788, 121.150053294749, 23.82435802607214, 2584.9714, 121.14258923767652, 23.8125039217518, 2197.3468, 121.11461042047392, 23.809568499354498, 2405.1721] + //构造区对象 + let polygon = { + //区 + polygon: { + //坐标 + hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights(points), + //颜色 + material: Cesium.Color.BLUE.withAlpha(0.5), + //分类类型：地形类型 + classificationType: Cesium.ClassificationType.TERRAIN, + }, + } + //绘制图形通用方法：对接Cesium原生特性 + terrainPolygon = entityController.appendGraphics(polygon) + ``` + +#### 绘制贴地球线 + + + 绘制贴地球线 + + +    具体实现：首先构造`CesiumZondy.Manager.EntityController`几何绘制控制对象，然后调用`appendGroundLine()`方法，传入定义的坐标数组、颜色、线宽，即可实现贴地线的添加绘制。 + +- Example: + + ```javascript + //构造几何绘制控制对象 + var entityController = new CesiumZondy.Manager.EntityController({ + viewer: webGlobe.viewer, + }) + + //定义一组坐标位置 + var pointArr = [114.29326686402278, 30.54691048615991, 114.28238521698825, 30.552850641911828, 114.27353580837766, 30.536521489533488, 114.29257062566866, 30.525800315003725] + //颜色 + var color = new Cesium.ColorGeometryInstanceAttribute(1, 0, 0, 0.5) + + //绘制贴地线（坐标点数组，线颜色，线宽） + var groundLine = entityController.appendGroundLine(pointArr, color, 40) + ``` + +#### 绘制贴地球区 + + + 绘制贴地球区 + + +    具体实现：首先构造`CesiumZondy.Manager.EntityController`几何绘制控制对象、构造外圈坐标数组、内圈坐标数组、填充颜色对象等信息，然后调用`appendGroundPolygon()`方法，即可实现贴地区的添加绘制。如果要绘制单圈的不带洞区，内圈坐标数组传空即可。 + +- Example: + ```javascript + //构造几何绘制控制对象 + var entityController = new CesiumZondy.Manager.EntityController({ + viewer: webGlobe.viewer, + }) + //坐标点数组（经纬度） + var point_out = [70, 0, 150, 0, 150, 60, 70, 60, 70, 0] + //根据给定点画贴地多边形 + var groundPolygon = webGlobe.appendGroundPolygon( + //外圈坐标数组（经纬度） + point_out, + //内圈坐标数组（经纬度） + null, + //填充颜色 + new Cesium.ColorGeometryInstanceAttribute(255 / 255, 255 / 255, 0 / 255, 0.5), + //附加属性 + {} + ) + ``` + +#### 绘制带洞区 + + + 绘制带洞区 + + +    具体实现：首先构造`CesiumZondy.Manager.EntityController`几何绘制控制对象，构造外圈、内圈坐标点数组，然后调用`appendHolePolygon()`方法，设置信息：区名称、内圈与外圈坐标点数组、区填充色，即可实现带洞区的添加绘制。每一圈坐标点序列，都必须首尾点一致形成闭合区，并且可以添加多圈内圈坐标。 + +- Example： + ```javascript + //构造几何绘制控制对象 + var entityController = new CesiumZondy.Manager.EntityController({ + viewer: webGlobe.viewer, + }) + //外圈坐标点 + var point_out = [114.40328987990017, 30.479789358042233, 114.40255973680176, 30.473707285934392, 114.40905754990294, 30.473938016458956, 114.40971219770601, 30.479196348500707, 114.40328987990017, 30.479789358042233] + //内圈坐标点（可添加多圈内圈坐标点） + var point_in = [ + [114.40788399535329, 30.47712432587247, 114.4077781482791, 30.47586494219165, 114.40919532034856, 30.47700722872353, 114.40788399535329, 30.47712432587247], + [114.40582893901652, 30.478599513299535, 114.40570115301699, 30.47795978731544, 114.40655655628692, 30.478318639933967, 114.40582893901652, 30.478599513299535], + ] + //添加带洞多边形 + var holePolygon = entityController.appendHolePolygon( + //名称 + '带洞区', + //外圈坐标 + point_out, + //内圈坐标 + point_in, + { + //颜色 + material: new Cesium.Color(0 / 255, 0 / 255, 255 / 255, 0.5), + //多边形相对于地球表面的高度 + extrudedHeight: 100, + } + ) + ``` + + +### 交互绘制 + +    在三维球上使用鼠标完成点、线、区等图形的绘制，绘制的图形在临时图层上，绘制结果不会被保存，可应用于各个场景，满足用户在三维球上使用鼠标交互式绘制显示区域，或将此功能和其他功能混合使用，将其他功能变成交互式的功能。 + +    具体实现：通过几何绘制控制`CesiumZondy.Manager.EntityController`的方法实现点、线、区的添加绘制，结合三维场景鼠标事件即 `Cesium.WebSceneControl()` 对象的 `registerMouseEvent()` 方法实现鼠标交互绘制图形功能。其中，可通过 `Cesium.DrawPolygonTool()` 在三维场景中添加交互式绘制区控件，实现交互式绘制区功能。 + + + 交互绘制 + + +    以绘制点、线实体为例，关键步骤如下： + + +**Step 1. 注册鼠标事件**： +    调用 Cesium 三维球控件 `Cesium.WebSceneControl()` 的 `registerMouseEvent()` 方法注册鼠标事件, 以下示例中的匿名函数为触发鼠标事件后执行的方法，完成此步后，在三维场景中点击鼠标左键可触发点击事件，点击完成后进入匿名函数； + +- Example： + ```Javascript + //注册事件 + webGlobe.registerMouseEvent('LEFT_CLICK', function(e) {}) + ``` + +**Step 2. 坐标转换**: +    鼠标事件执行方法中的形参包含当前鼠标点击的一些信息,可以获取其中的 position 位置信息用于图形绘制，其中鼠标点击获取到的 position 位置坐标为屏幕坐标，需要将屏幕坐标转换为经纬度坐标进行图形绘制； + +- Example: + ```Javascript + //屏幕坐标转世界坐标 + var cartesian = webGlobe.viewer.getCartesian3Position(movement.position, cartesian); + //世界坐标转地理坐标（弧度） + var cartographic = Cesium.Cartographic.fromCartesian(cartesian); + //地理坐标（弧度）转经纬度坐标：纬度、经度、高程 + var lng = Cesium.Math.toDegrees(cartographic.longitude); + var lat = Cesium.Math.toDegrees(cartographic.latitude); + var height = cartographic.height; + ``` + +**Step 3. 添加点、线实体**: +    调用几何绘制控制 `CesiumZondy.Manager.EntityController` 的 `appendPoint()` 方法/ `appendLine()` 方法传入相关经纬度坐标信息以及其他的信息添加图形，完成此步后可在三维场景中看到添加的点/线等图形； + +- Example: + + ```Javascript + //构造几何绘制控制对象 + var entityController = new CesiumZondy.Manager.EntityController({ + viewer: webGlobe.viewer + }); + //添加点：经度、纬度、高程、名称、像素大小、颜色、外边线颜色、边线宽度 + entityController.appendPoint(lng, lat, height, '点', 10, new Cesium.Color(1, 0, 0, 1), new Cesium.Color(1, 1, 0, 1), 2); + ``` + + ```Javascript + //添加线：名称、点数组、线宽、线颜色、是否贴地形 + entityController.appendLine('不贴地线', allPoint, 2, new Cesium.Color(1, 0, 0, 0.8), true, {}); + + ``` + +**Step 4. 注销鼠标事件**: +    调用 Cesium 三维球控件 `Cesium.WebSceneControl()` 的 `unRegisterMouseEvent()` 方法注销已添加的鼠标事件，完成此步后，点击鼠标不再触发鼠标事件。 + +- Example: + ```Javascript + //注销鼠标事件 + webGlobe.unRegisterMouseEvent('LEFT_CLICK'); + ``` + + +## 标注 + +    地图标注是将空间位置信息点与地图关联，通过图标、窗口等形式把点相关的信息展现到地图上。地图标注也是WebGIS中的比较重要的功能之一，在大众应用中较为常见。基于地图标注，丰富GIS应用，可以为用户提供更多个性化的地图服务，如标注兴趣点等。 + +    地图标注的应用比较灵活，提供用户交互式标注功能，以及在程序中预先加载标注等多种方式。用户交互式标注，指在地图上知道大概位置，用户通过鼠标交互添加标注。如果已知要标注点的位置信息与其他属性，就可以直接在程序中处理并添加，在地图上叠加显示标注点。地图标注的表现形式多样，包括简单的图片标注、冒泡信息窗口标注、聚合标注等。 + + +| 类名/方法名 | API说明 | +| -------------- |----------------| +| CesiumZondy.Manager.LabelLayer / appendBillboard() | 添加图片标注到地图 | +| CesiumZondy.Manager.LabelLayer / appendLabel() | 添加文本标注到地图 | +| CesiumZondy.Manager.LabelLayer / appendLabelIcon()、appendLabelIconComm() | 添加图片+文本标注到地图 | +| CesiumZondy.Manager.PopupController / appendPopup() | PopUp 标注，弹窗实现 | + + + +### 图片标注 + + + 图片标注 + + +    具体实现：首先构造`CesiumZondy.Manager.LabelLayer`注记图层管理对象，调用`appendBillboard()`方法可实现图片标注的添加，需要设置基本必要信息，如：图片标注的经纬度、高程、名称、图标文件路径、图片宽度、高度等信息。 + +- Example: + + ```javascript + //构造注记图层管理对象 + var labelLayer = new CesiumZondy.Manager.LabelLayer({ + viewer: webGlobe.viewer, + }) + + //添加图片标注（经度、纬度、高程、名称、图片地址、图标宽度、图标高度） + var icon = labelLayer.appendBillboard(114.3992, 30.5062, 0, '图标', './static/data/picture/icon.png', 50, 50) + ``` + +### 文本标注 + + + 文本标注 + + +    具体实现：首先构造`CesiumZondy.Manager.LabelLayer`注记图层管理对象，调用`appendLabel()`方法可实现文本标注的添加，需要设置基本必要信息，如：文本标注的经纬度、高程、文本内容；还可设置各项样式信息：字体、颜色、样式、标签位置等。 + +- Example: + + ```javascript + //构造注记图层管理对象 + var labelLayer = new CesiumZondy.Manager.LabelLayer({ + viewer: webGlobe.viewer, + }) + + //添加文字标注 + label = labelLayer.appendLabel( + //经度、纬度、高程 + 114.3992, + 30.5062, + 0, + //文本内容 + '光谷广场', + { + //文字大小、字体样式 + font: '20pt 楷体', + //文本颜色 + fillColor: Cesium.Color.YELLOW, + //文本样式，FILL：只填充；OUTLINE：只显示轮廓；FILL_AND_OUTLINE：填充颜色并显示轮廓 + style: Cesium.LabelStyle.FILL_AND_OUTLINE, + //边线颜色 + outlineColor: Cesium.Color.RED, + //边线宽度 + outlineWidth: 2, + //文本垂直方向与坐标点的相对位置：LEFT、CENTER、RIGHT + verticalOrigin: Cesium.VerticalOrigin.CENTER, + //文本水平方向与坐标点的相对位置：LEFT、CENTER、RIGHT + horizontalOrigin: Cesium.HorizontalOrigin.CENTER, + } + ) + ``` + + +### 图文标注 + + + 图文标注 + + +    具体实现：关键接口为`CesiumZondy.Manager.LabelLayer`类提供的`appendLabelIconComm()`方法、`appendLabelIcon()`方法，实现图文标注的添加。在实际应用场景中可根据具体应用需求选择调用不同的方法。 + +（1）调用`appendLabelIcon()`方法，设置各项基本信息，可实现图文标注的添加； + +- Example: + ```javascript + //构造注记图层管理对象 + var labelLayer = new CesiumZondy.Manager.LabelLayer({ + viewer: webGlobe.viewer, + }) + //方法一 + var labelIcon = labelLayer.appendLabelIcon( + //文本内容 + '湖北省老年大学', + //经度、纬度、高度 + 114.3639, + 30.5603, + 0, + //文字大小、字体 + '16pt 宋体', + //文字颜色 + new Cesium.Color(0 / 255, 0 / 255, 0 / 255, 0.8), + //图片地址 + './static/data/picture/icon.png', + //图片宽度、高度 + 50, + 50, + //最远显示距离：相机到注记的距离大于该值 注记不显示 + 10000000, + //最近显示距离：相机到注记的距离小于该值 注记不显示 + 1, + //图片位置：'center','top','bottom' + 'center' + ) + ``` + +（2）调用`appendLabelIconComm()`方法，传入构造的位置、图片、文本对象等参数信息，同样也可实现图文标注的添加，此方法对接 Cesium 原生属性，可实现更加丰富的效果； + +- Example: + ```javascript + //位置（x、y、z） + var position = Cesium.Cartesian3.fromDegrees(114.36517991431259, 30.56206615740468, 10) + //图片对象 + var billboardGraphics = new Cesium.BillboardGraphics({ + //图片地址 + image: './static/data/picture/icon.png', + //图片宽度 + width: 64, + //图片高度 + height: 64, + //随远近缩放 + pixelOffsetScaleByDistance: new Cesium.NearFarScalar(1.5e5, 3.0, 1.5e7, 0.5), + //随远近隐藏 + translucencyByDistance: new Cesium.NearFarScalar(1.5e5, 1.0, 1.5e7, 0.0), + }) + //文本对象 + var labelGraphics = new Cesium.LabelGraphics({ + //文本 + text: '湖北省博物馆', + //文字大小、字体 + font: '20pt 宋体', + //文字颜色 + fillColor: Cesium.Color.BLACK, + //文本垂直位置 + verticalOrigin: Cesium.VerticalOrigin.BOTTOM, + //文本水平位置 + horizontalOrigin: Cesium.HorizontalOrigin.BOTTOM, + //偏移量 + pixelOffset: new Cesium.Cartesian2(0.0, -64 / 4), //x,y方向偏移 相对于屏幕 + //随远近缩放 + pixelOffsetScaleByDistance: new Cesium.NearFarScalar(1.5e2, 3.0, 1.5e7, 0.5), + //随远近隐藏 + translucencyByDistance: new Cesium.NearFarScalar(1.5e5, 1.0, 1.5e7, 0.0), + }) + //添加图标注记（文字内容、描述、位置、图片对象、文本对象） + labelIcon1 = labelLayer.appendLabelIconComm('湖北省博物馆', '坐落于湖北省武汉市武昌区东湖风景区', position, billboardGraphics, labelGraphics) + ``` + +    其中，位置对象需使用 Cesium.Cartesian3 类来构造，图片对象需由 Cesium.BillboardGraphics 构造，文本对象需由 Cesium.LabelGraphics 构造，这三个类都属于 Cesium 原生提供的类，具体用法可参考其 API 文档。 + + +### Popup标注 + + + 气泡标注 + + +    具体实现：关键接口为`CesiumZondy.Manager.PopupController`类提供的`appendPopup()`方法，实现气泡弹窗的添加；可分别通过`removePopup()、clearPopups()、refreshPopups()`方法移除、更新 Popup 标注。 + + +- Example: + + ```javascript + //构造气泡弹窗控制对象 + var popupController = new CesiumZondy.Manager.PopupController({ + viewer: webGlobe.viewer, + }) + + //添加PopUP + var popup = popupController.appendPopup( + //容器div的id + 'popup', + //文本 + '
黄鹤楼
位于湖北省武汉市长江南岸的武昌蛇山之巅', + //坐标位置 + Cesium.Cartesian3.fromDegrees(114.30252372618706, 30.544641875459394), + //偏移量 + [0, 0], + //弹窗的关闭按钮点击回调函数 + function() { + popupController.removePopup(popup, 'popup', {}) + } + ) + //刷新 + popupController.refreshPopups() + ``` + + +## 查询 + +    查询是WebGIS中最常用的核心功能之一，广泛应用于各类项目中。通过对空间和属性要素的查询，提取需要的信息，与地图联动进行展示，满足应用的需求。 + +    查询定位在应用中很常见，根据不同的应用需求，可以选择不同的查询方式、实现方式以及表现方式。查询方式：基于GIS的特性，查询主要包括几何查询、属性条件查询以及两者结合的复合查询，以及OID查询。 + +- 几何查询有点击、画线、画圆、拉框、多边形五种操作方式，以操作的空间范围作为限定条件进行查询； +- 属性条件查询以要素属性限定条件进行查询； +- 复合查询则是两者的结合，空间范围组合属性条件，统一查询满足要求的空间要素； +- - OID查询：根据地图要素的唯一标识OID进行查询； + +| 类名/方法名 | API说明 | +| -------------- |----------------| +| CesiumZondy.Query.MapDocQuery / beginQuery() | 二维地图文档查询，支持几何、属性、OID查询 | +| CesiumZondy.Query.G3DDocQuery / queryG3DFeature() | 三维模型数据查询，支持几何、属性、OID查询 | +| CesiumZondy.Manager.AnalysisManager / startCustomDisplay() | M3D单体查询，模型高亮 | +| / | M3D交互编辑 | + + +### 二维地图文档查询 + +    基于二维地图文档的要素查询，提供几何、属性、OID查询方式，以及复合查询，即查询三维场景中加载的二维地图文档的要素信息，包括要素的几何信息与属性信息。 + +    具体实现：先初始化查询参数`CesiumZondy.Query.MapDocQuery`类对象，设置查询属性条件等参数后，调用`beginQuery()`方法进行查询，然后在回调中获取处理查询到的要素信息，解析所需的几何信息与属性信息进行展示。 + + + 二维地图文档要素查询 + + + +    以属性查询为例： + +- Example： + + ```javascript + var queryParam = new CesiumZondy.Query.MapDocQuery() + //查询图层的URL路径 + //queryParam.gdbp = encodeURI("gdbp://MapGisLocal/北京市/ds/行政区/sfcls/北京市"); + queryParam.docName = '北京市' + queryParam.mapIndex = 0 + queryParam.layerID = 0 + queryParam.structs = '{"IncludeAttribute":true,"IncludeGeometry":true,"IncludeWebGraphic":false}' + //设置要素的属性条件 + queryParam.where = "省名='北京'" + //服务器的ip + queryParam.ip = ip + queryParam.port = port + queryParam.beginQuery( + function(result) { + //查询结果处理 + }, + function quryError(err) { + alert(err) + } + ) + ``` + + ```javascript + if (result != null) { + data = result + //解析显示要素的属性信息 + document.getElementById('code').value = result.SFEleArray[0].AttValue[2] + document.getElementById('name').value = result.SFEleArray[0].AttValue[3] + document.getElementById('spell').value = result.SFEleArray[0].AttValue[4] + document.getElementById('population').value = result.SFEleArray[0].AttValue[40] + //解析要素的几何信息 + var GeompointArray = new Array() + for (var pointlength = 0; pointlength < result.SFEleArray[0].fGeom.RegGeom[0].Rings[0].Arcs[0].Dots.length; pointlength++) { + var PntCartesian3 = Cesium.Cartesian3.fromDegrees(result.SFEleArray[0].fGeom.RegGeom[0].Rings[0].Arcs[0].Dots[pointlength].x, result.SFEleArray[0].fGeom.RegGeom[0].Rings[0].Arcs[0].Dots[pointlength].y, 10) + GeompointArray.push(PntCartesian3) + } + GeompointArray.push(GeompointArray[0]) + //构造几何绘制控制对象 + var entityController = new CesiumZondy.Manager.EntityController({ + viewer: webGlobe.viewer, + }) + //构造区对象 + var polygon = { + name: '立体区', + polygon: { + //坐标点 + hierarchy: GeompointArray, + //是否指定各点高度 + perPositionHeight: true, + //颜色 + material: new Cesium.Color(33 / 255, 150 / 255, 243 / 255, 0.5), + //轮廓线是否显示 + outline: true, + //轮廓线颜色 + outlineColor: Cesium.Color.BLACK, + }, + } + //绘制图形通用方法：对接Cesium原生特性 + var stericPolygon = entityController.appendGraphics(polygon) + } + ``` + +### 三维模型数据查询 + +    基于三维模型数据的要素查询，提供几何、属性、OID查询方式，以及复合查询，即查询三维场景中加载的三维模型数据的要素信息，包括三维模型数据的属性、几何等要素信息。 + +    具体实现：先构造`CesiumZondy.Query.G3DDocQuery`三维地图文档查询对象，配置相关参数后调用 `queryG3DFeature`方法执行查询，然后在回调中获取处理查询到的要素信息，并在三维场景中展示。 + + + 三维模型数据查询 + + +    以几何查询为例： + +- Example: + ```javascript + var queryParam = new CesiumZondy.Query.G3DDocQuery() + //查询图层的URL路径 + queryParam.gdbp = encodeURI('gdbp://MapGisLocal/示例数据/ds/三维示例/sfcls/景观_模型') + //设置查询结果结构 + queryParam.structs = '{"IncludeAttribute":true,"IncludeGeometry":true,"IncludeWebGraphic":false}' + //几何查询 + //设置查询方式 + queryParam.geometryType = 'Point3D' + //设置查询的点坐标 + queryParam.geometry = 92.37674872254775 + ',' + 163.57024299752067 + ',' + 21 + //服务器的ip + queryParam.serverIp = ip + queryParam.serverPort = port + queryParam.queryG3DFeature( + function(result) {}, + function(err) {} + ) + ``` + +### M3D单体查询 + +    M3D单体查询，针对的是M3D数据，实现在三维场景中展示 M3D 模型数据并实现单体查询功能。 + + + M3D单体查询 + + +    具体实现：结合鼠标点击事件，在点击事件回调函数中先通过`Cesium.WebSceneControl.Scene`类的`pick()`方法来选取要素，然后调用`CesiumZondy.Manager.AnalysisManager`类的`startCustomDisplay()`方法来实现模型高亮。 + +- Example: + ```javascript + //构造鼠标事件管理对象 + var mouseEventManager = new CesiumZondy.Manager.MouseEventManager({ + viewer: webGlobe.viewer, + }) + //注册鼠标左键单击事件 + mouseEventManager.registerMouseEvent('LEFT_CLICK', highlightPicking) + ``` + +- Example: + + ```javascript + /*鼠标左键单击事件回调：模型高亮*/ + function highlightPicking(movement) { + //根据鼠标点击位置选择对象 + var pickedFeature = webGlobe.scene.pick(movement.position) + + //获取要素的瓦片集 + var currentLayer = [pickedFeature.tileset] + //获取名称属性 + var title = pickedFeature.getProperty('name') + //采用_分割 + var values = title.split('_') + //获取数组中第三个数值，即为要素的ID + var vlueNumber = parseInt(values[2]) + //构建数组 + var idList = [vlueNumber] + //构建参数：设置颜色 + var options = { + //高亮颜色 + color: new Cesium.Color(255 / 255, 255 / 255, 0 / 255, 1), + //高亮模式：REPLACE为替换 + colorBlendMode: Cesium.Cesium3DTileColorBlendMode.REPLACE, + } + + //构造分析功能管理对象 + var analysisManager = new CesiumZondy.Manager.AnalysisManager({ + viewer: webGlobe.viewer, + }) + //开始闪烁查找到的模型 + analysisManager.startCustomDisplay(currentLayer, idList, options) + } + ``` + + +## 分析 + +    具备全空间一体化分析能力，提供模型压平、动态剖切等专业分析功能；提供可视域分析、地形开挖、洪水淹没分析、填挖方计算等地形分析功能。 + +| 类名/方法名 | API说明 | +| -------------- |----------------| +| Cesium.VisiblityAnalysis() | 通视分析 | +| CesiumZondy.Manager.AnalysisManager / createDynamicCutting() | 动态剖切、开挖分析、卷帘分析 | +| CesiumZondy.Manager.AdvancedAnalysisManager / createFlood() | 洪水淹没分析 | +| CesiumZondy.Manager.AdvancedAnalysisManager / createViewshedAnalysis() | 可视域分析 | +| CesiumZondy.Manager.AdvancedAnalysisManager / createSkyLine() | 天际线分析 | +| CesiumZondy.Manager.AdvancedAnalysisManager / createSceneProjector() | 视频投放 | +| CesiumZondy.Manager.AdvancedAnalysisManager / createModelFlatten() | 模型压平 | +| CesiumZondy.Manager.AdvancedAnalysisManager / createAspectAnalysis() | 坡向分析 | +| CesiumZondy.Manager.AdvancedAnalysisManager / createSlopeAnalysis() | 坡度分析 | +| CesiumZondy.Manager.AdvancedAnalysisManager / createCutFill()、startCutFill() | 填挖方计算 | +| CesiumZondy.Manager.AdvancedAnalysisManager / createAnimation() | 动画漫游 | + + +### 通视分析 + +    通视分析，用于检测当前三维场景中两点之间是否可以没有阻碍的看到。 + + + 通视分析 + + +    具体实现：通过 Cesium 三维球控件 `Cesium.WebSceneControl()` 对象的 `registerMouseEvent()` 方法在三维场景里面自定义注册鼠标事件完成通视分析两个点的拾取，通过两点通视分析对象 `Cesium.VisiblityAnalysis()`实现两点通视分析。 + +**Step 1. 创建通视分析**： +    初始化两点通视分析对象 `Cesium.VisiblityAnalysis()` ; + +- Example: + ```Javascript + //初始化通视分析类 + visiblity = new Cesium.VisiblityAnalysis(); + ``` + +**Step 2. 添加通视分析**： +    将两点通视分析对象 `Cesium.VisiblityAnalysis()` 添加到 Cesium 三维球控件中; + +- Example: + ```Javascript + //添加通视分析显示 + viewer.scene.VisualAnalysisManager.add(visiblity); + ``` + +**Step 3. 注册鼠标事件**： +    调用 Cesium 三维球控件 `Cesium.WebSceneControl()` 的 `registerMouseEvent()` 方法注册鼠标事件, 以下事例中的匿名函数为触发鼠标事件后执行的方法，完成此步后，在三维场景中点击鼠标左键可触发点击事件，点击完成后进入匿名函数； + +- Example: + ```Javascript + //注册事件 + webGlobe.registerMouseEvent('LEFT_CLICK', function(e) {}); + webGlobe.registerMouseEvent('RIGHT_CLICK', function(e) {}); + webGlobe.registerMouseEvent('MOUSE_MOVE', function(e) {}); + ``` + +**Step 4. 设置两点通视分析参数**： +    给两点通视分析对象设置进行两点通视分析使用的必要参数。 + +- Example: + ```Javascript + //设置通视分析观察点 + visiblity.viewPosition = cartesian; + //设置通视分析结果点 + visiblity.targetPosition = cartesian; + ``` + +### 动态剖切 + +    此功能对已加载的M3D数据进行任意距离的剖切，动态的显示或隐藏一部分数据。 + + + 动态剖切 + + +    具体实现：创建分析功能管理类 `CesiumZondy.Manager.AnalysisManager()` ，调用 `createDynamicCutting()` 方法创建剖切对象实例，通过设置剖切面距离进行数据剖切分析。 + +**Step 1. 创建切面**： +    初始化切面对象 `Cesium.ClippingPlane()` ; + +* Example: + ``` Javascript + //进行剖切分析的面，从上往下切，Cesium.Cartesian3中第一个参数是左右，第二个参数是前后，第三个参数是上下 + var plane = new Cesium.ClippingPlane(new Cesium.Cartesian3(0.0, 0.0, -1.0), -500.0) + ``` + +**Step 2. 获取剖切切面**： +    创建分析功能管理类 `CesiumZondy.Manager.AnalysisManager()` ，调用 `createDynamicCutting()` 方法创建剖切对象实例, 并获取剖切切面； + +* Example: + ``` Javascript + //初始化分析功能管理类 + var analysisManager = new CesiumZondy.Manager.AnalysisManager({ + viewer: webGlobe.viewer + }); + //创建剖切对象实例 + dynaCut = analysisManager.createDynamicCutting(landscapeLayer, [plane], { + color: new Cesium.Color(0.0, 1.0, 1.0, 0.3) + }); + ``` + +**Step 3. 设置剖切面距离**： +    通过设置切面回调函数，动态设置剖切面距离完成动态剖切分析。 + +* Example: + ``` Javascript + //设置切面回调函数 + dynaCut.planes[0].plane.plane = new Cesium.CallbackProperty(function(date) { + //设置剖切面距离 + plane.distance = distance; + return Cesium.Plane.transform(plane, landscapeLayer[0].modelMatrix, new Cesium.ClippingPlane(Cesium.Cartesian3.UNIT_X, 0.0)); + }, false); + ``` + + +### 开挖分析 + +    开挖分析，指对已加载的M3D数据进行任意距离深度开挖，动态的显示或隐藏一部分数据。 + + + 开挖分析 + + +    具体实现： 先初始化M3D模型层管理类 `CesiumZondy.Layer.M3DLayer` 并调用 `append()` 方法加载M3D数据后，再创建 `Cesium.ClippingPlane()` 切面对象，创建分析功能管理类 `CesiumZondy.Manager.AnalysisManager()` ，调用 `createDynamicCutting()` 方法创建开挖分析对象通过设置剖切面距离进行数据开挖分析。 + +**Step 1. 加载数据**： +    初始化M3D模型层管理类 `CesiumZondy.Layer.M3DLayer` 并调用 `append()` 方法传入M3D数据服务地址，即可加载浏览数据； + +* Example: + ``` Javascript + //构造M3D模型层管理对象 + var m3dLayer = new CesiumZondy.Layer.M3DLayer({ + viewer: webGlobe.viewer + }); + var drilllayer = m3dLayer.append( + "http://develop.smaryun.com:6163/igs/rest/g3d/钻孔_2_钻孔模型s", { + autoReset: false, + } + ); + //加载M3D地图文档（服务地址，配置参数） + landscapeLayer = m3dLayer.append('http://develop.smaryun.com:6163/igs/rest/g3d/钻孔分层点_Sur_000_Ent', {}); + ``` + +**Step 2. 创建切面**： +    初始化切面对象 `Cesium.ClippingPlane()` ; + +* Example: + ``` Javascript + //开挖面设置,这五个面分别表示前后左右，底面，其中底面用于控制开挖深度 + var clippingPlanes = [ + new Cesium.ClippingPlane(new Cesium.Cartesian3(3, 0.0, 0.0), -1500.0), + new Cesium.ClippingPlane(new Cesium.Cartesian3(-3, 0.0, 0.0), -1500.0), + new Cesium.ClippingPlane(new Cesium.Cartesian3(0.0, 3, 0.0), -1500.0), + new Cesium.ClippingPlane(new Cesium.Cartesian3(0.0, -3, 0.0), -1500.0), + new Cesium.ClippingPlane(new Cesium.Cartesian3(0.0, 0.0, -5), 0.0) + ] + ``` + +**Step 3. 创建开挖分析**： +    化M3D模型层管理类 `CesiumZondy.Layer.M3DLayer` 并调用 `append()` 方法加载M3D数据后，创建 `Cesium.ClippingPlane()` 切面对象，创建分析功能管理类 `CesiumZondy.Manager.AnalysisManager()` ，调用 `createDynamicCutting()` 方法创建开挖分析对象, 并获取剖切切面； + +* Example: + ``` Javascript + //初始化分析功能管理类 + var analysisManager = new CesiumZondy.Manager.AnalysisManager({ + viewer: webGlobe.viewer + }); + //创建开挖分析实例 + dynaCut = analysisManager.createExcavateAnalysis({ + //图层信息 + tileSet: landscapeLayer[0], + //开挖面的形状 + planes: planes, + //裁剪面材质 + material: new Cesium.Color(0.2, 0.4, 0.3, 0.7), + //边界线颜色 + edgeColor: new Cesium.Color(0.2, 0.4, 0.3, 0.7), + //边界线宽度 + edgeWidth: 3, + //裁减法线方向，默认值为 false + unionClippingRegions: false, + //开挖坐标 + longitude: 113.0402, + latitude: 30.0264, + height: 0 + }); + ``` + +**Step 4. 设置剖切面距离**： +    通过设置切面回调函数，动态设置剖切面距离完成动态剖切分析。 + +* Example: + ``` Javascript + dynaCut.planes[0].plane.plane = new Cesium.CallbackProperty(function(date) { + console.log(planes); + for (var i = 0; i < planes.length; i++) { + if (i === planes.length - 1) { + var plane = planes[i]; + plane.distance = distance; + Cesium.Plane.transform(plane, landscapeLayer[0].modelMatrix, new Cesium.ClippingPlane(Cesium.Cartesian3.UNIT_X, 0.0)); + } + } + }, false); + ``` + +### 卷帘分析 + +    卷帘分析目前通过剖切功能实现，即对已加载的两个M3D数据进行任意距离的剖切，动态的显示或隐藏一部分数据，一个显示的同时不显示另一个数据，打到卷帘效果。 + + + 卷帘分析 + + +    具体实现：创建分析功能管理类 `CesiumZondy.Manager.AnalysisManager()` ，调用 `createDynamicCutting()` 方法创建两个M3D数据的切面对象通过设置剖切面距离进行数据剖切分析，实现卷帘效果。 + +**Step 1. 创建切面对象**： +    创建切面对象 `Cesium.ClippingPlane()` ; + +* Example: + ``` Javascript + //进行剖切分析的面，向右切 + var plane = new Cesium.ClippingPlane(new Cesium.Cartesian3(1, 0, 0), -200.0) + //进行剖切分析的面，向左切 + var plane1 = new Cesium.ClippingPlane(new Cesium.Cartesian3(-1, 0, 0), -200.0) + ``` + +**Step 2. 创建剖切对象**： +    创建分析功能管理类 `CesiumZondy.Manager.AnalysisManager()` ，调用 `createDynamicCutting()` 方法创建剖切对象实例, 并获取剖切切面； + +* Example: + ``` Javascript + //初始化分析功能管理类 + var analysisManager = new CesiumZondy.Manager.AnalysisManager({ + viewer: webGlobe.viewer + }); + //创建剖切对象实例 + dynaCut = analysisManager.createDynamicCutting(landscapeLayer, [plane], { + color: new Cesium.Color(0.0, 1.0, 1.0, 0.3) + }); + ``` + +**Step 3. 通过切面回调完成动态剖切分析**： +    通过设置切面回调函数，动态设置剖切面距离完成动态剖切分析。 + +* Example: + ``` Javascript + //设置切面回调函数 + planetEntity.plane.plane = new Cesium.CallbackProperty(function(date) { + //设置剖切面距离 + plane.distance = distance; + return Cesium.Plane.transform(plane, tileset[0].modelMatrix, new Cesium.ClippingPlane(Cesium.Cartesian3.UNIT_X, 0.0)); + }, false); + //设置切面回调函数 + planetEntity1.plane.plane = new Cesium.CallbackProperty(function(date) { + //设置剖切面距离 + plane1.distance = distance1; + return Cesium.Plane.transform(plane1, tileset[0].modelMatrix, new Cesium.ClippingPlane(Cesium.Cartesian3.UNIT_X, 0.0)); + }, false); + ``` + + +### 洪水淹没分析 + +    洪水淹没分析，即在三维场景下动态模拟洪水淹没分析的场景，根据设定的高程与范围分析洪水淹没区域，可应用在抗洪抢险、水库管理等领域，辅助决策。支持三维模型、地形等数据应用场景。 + + + 洪水淹没分析 + + +    具体实现：初始化高级分析功能管理类 `CesiumZondy.Manager.AdvancedAnalysisManager()` 对象，调用高级分析功能管理类的 `createFlood()` 方法创建洪水淹没分析示例，将结果显示到三维球控件上。 + +**Step 1. 创建洪水淹没分析**： +    初始化高级分析功能管理类 `CesiumZondy.Manager.AdvancedAnalysisManager()` 对象，调用高级分析功能管理类的 `createFlood()` 方法创建洪水淹没分析示例； + +* Example: + ``` Javascript + //初始化高级分析功能管理类 + var advancedAnalysisManager = new CesiumZondy.Manager.AdvancedAnalysisManager({ + viewer: viewer + }); + //初始化洪水淹没分析类 + flood = advancedAnalysisManager.createFlood(); + //设置洪水淹没分析区域点集 + flood.dotsList = newArray; + //设置洪水淹没区域最底高度 + flood.minHeight = Number(document.getElementById('minHeight').value <= 0 ? 0 : document.getElementById('minHeight').value); + //设置洪水淹没区域最高高度 + flood.maxHeight = Number(document.getElementById('maxHeight').value <= 0 ? 30 : document.getElementById('maxHeight').value); + //设置洪水上涨速度 + flood.floodSpeed = Number(document.getElementById('floodSpeed').value <= 0 ? 1 : document.getElementById('floodSpeed').value); + //水纹频率 指波浪的个数 + flood.frequency = Number(document.getElementById('frequency').value <= 0 ? 1000 : document.getElementById('frequency').value); + //水纹速度 + flood.animationSpeed = Number(document.getElementById('animationSpeed').value <= 0 ? 0.01 : document.getElementById('animationSpeed').value); + //水波的高度 + flood.amplitude = Number(document.getElementById('amplitude').value <= 0 ? 10 : document.getElementById('amplitude').value); + //指定水面颜色 和 透明度 + flood.floodColor = new Cesium.Color(0.2, 0.5, 0.4, 0.7); + // 指定光线强度 + flood.specularIntensity = 3.0; + ``` + +**Step 2. 洪水淹没结果显示**： +    将结果显示到三维球控件上。 + +* Example: + ``` Javascript + //添加洪水淹没结果显示 + webGlobe.scene.VisualAnalysisManager.add(flood); + ``` + + +### 可视域分析 + +    可视域分析，用于检测当前三维场景中某个点朝一个方向看的时候可以看到的区域。 + + + 可视域分析 + + +    具体实现：先通过 Cesium 三维球控件 `Cesium.WebSceneControl()` 对象的 `registerMouseEvent()` 方法在三维场景里面自定义注册鼠标事件完成可视域分析点的拾取；然后初始化高级分析功能管理类 `CesiumZondy.Manager.AdvancedAnalysisManager()` 对象，调用高级分析功能管理类的 `createViewshedAnalysis()` 方法实现可视域分析。 + +**Step 1. 加载数据**： +    初始化 M3D 模型层管理类 `CesiumZondy.Layer.M3DLayer` 并调用 `append()` 方法传入 M3D 数据服务地址，即可加载浏览数据； + +- Example: + ```Javascript + //构造M3D模型层管理对象 + var m3dLayer = new CesiumZondy.Layer.M3DLayer({ + viewer: webGlobe.viewer + }); + //加载M3D地图文档（服务地址，配置参数） + landscapeLayer = m3dLayer.append('http://develop.smaryun.com:6163/igs/rest/g3d/ZondyModels', {}); + ``` + +**Step 2. 创建可视域分析**： +    初始化高级分析功能管理类 `CesiumZondy.Manager.AdvancedAnalysisManager()` 对象，调用高级分析功能管理类的 `createViewshedAnalysis()` 方法实现可视域分析; + +- Example: + ```Javascript + //初始化高级分析功能管理类 + var advancedAnalysisManager = new CesiumZondy.Manager.AdvancedAnalysisManager({ + viewer: viewer + }); + //创建可视化分析对象 + viewshed3d = advancedAnalysisManager.createViewshedAnalysis(); + ``` + +**Step 3. 注册鼠标事件**： +    调用 Cesium 三维球控件 `Cesium.WebSceneControl()` 的 `registerMouseEvent()` 方法注册鼠标事件, 以下事例中的匿名函数为触发鼠标事件后执行的方法，完成此步后，在三维场景中点击鼠标左键可触发点击事件，点击完成后进入匿名函数； + +- Example: + ```Javascript + //注册事件 + webGlobe.registerMouseEvent('LEFT_CLICK', function(e) {}); + webGlobe.registerMouseEvent('RIGHT_CLICK', function(e) {}); + webGlobe.registerMouseEvent('MOUSE_MOVE', function(e) {}); + ``` + +**Step 4. 设置可视域分析参数**： +    给可视域分析对象设置进行可视域分析使用的必要参数； + +- Example: + ```Javascript + //设置观察点坐标 + viewshed3d.viewPosition = cartesian; + //设置可视域结果点 + viewshed3d.targetPosition = cartesian; + ``` + +**Step 5. 添加可视域分析**： +    将可视域分析对象 `Cesium.ViewshedAnalysis()` 添加到 Cesium 三维球控件中。 + +- Example: + ```Javascript + //添加可视域分析结果显示 + viewer.scene.VisualAnalysisManager.add(viewshed3d); + ``` + + +### 天际线分析 + +    天际线分析，用于检测当前视角的天际线，并绘制在三维场景中。 + + + 天际线分析 + + +    具体实现：先初始化 M3D 模型层管理类 `CesiumZondy.Layer.M3DLayer` 并调用 `append()` 方法加载 M3D 数据后，再初始化高级分析功能管理类 `CesiumZondy.Manager.AdvancedAnalysisManager()` 对象，调用高级分析功能管理类的 `createSkyLine()` 方法创建天际线分析。 + + +**Step 1. 加载数据**： +    初始化 M3D 模型层管理类 `CesiumZondy.Layer.M3DLayer` 并调用 `append()` 方法传入 M3D 数据服务地址，即可加载浏览数据； + +- Example: + ```Javascript + //构造M3D模型层管理对象 + var m3dLayer = new CesiumZondy.Layer.M3DLayer({ + viewer: webGlobe.viewer + }); + //加载M3D地图文档（服务地址，配置参数） + landscapeLayer = m3dLayer.append('http://develop.smaryun.com:6163/igs/rest/g3d/ZondyModels', {}); + ``` + +**Step 2. 创建天际线分析**： +    初始化高级分析功能管理类 `CesiumZondy.Manager.AdvancedAnalysisManager()` 对象，调用高级分析功能管理类的 `createSkyLine()` 方法创建天际线分析。 + +- Example: + ```Javascript + //初始化高级分析功能管理类 + var advancedAnalysisManager = new CesiumZondy.Manager.AdvancedAnalysisManager({ + viewer: webGlobe.viewer + }); + //创建天际线实例 + skyLineAn = advancedAnalysisManager.createSkyLine() + ``` + + +### 视频投放 + +    视频投放，即在三维场景中加载色块、图片、视屏等功能。 + +    具体实现：主要初始化高级分析功能管理类 `CesiumZondy.Manager.AdvancedAnalysisManager()` 对象，调用高级分析功能管理类的 `createSceneProjector` 方法创建场景投放示例，实现场景投影分析。 + +**Step 1. 创建场景投影对象**： +    初始化高级分析功能管理类 `CesiumZondy.Manager.AdvancedAnalysisManager()` 对象，调用高级分析功能管理类的 `createSceneProjector()` 方法创建场景投放示例; + +* Example: + ``` Javascript + //初始化高级分析功能管理类 + var advancedAnalysisManager = new CesiumZondy.Manager.AdvancedAnalysisManager({ + viewer: viewer + }); + //初始化场景投影对象 + scenePro = advancedAnalysisManager.createSceneProjector(2); + ``` + +**Step 2. 注册鼠标事件**： +    调用Cesium三维球控件 `Cesium.WebSceneControl()` 的 `registerMouseEvent()` 方法注册鼠标事件, 以下事例中的匿名函数为触发鼠标事件后执行的方法，完成此步后，在三维场景中点击鼠标左键可触发点击事件，点击完成后进入匿名函数； + +* Example: + ``` Javascript + //注册事件 + webGlobe.registerMouseEvent('LEFT_CLICK', function(e) {}); + webGlobe.registerMouseEvent('RIGHT_CLICK', function(e) {}); + ``` + +**Step 3. 设置场景投影参数**： +    给场景投影对象设置进行场景投影使用的必要参数。 + +* Example: + ``` Javascript + //设置投影观察点 + scenePro.viewPosition = cartesian; + //数据url路径 + scenePro.textureSource = './static/data/picture/world.jpg'; + //设置场景投影结果点 + scenePro.targetPosition = cartesian; + ``` + + +### 模型压平 + +    模型压平，即将加载完成的M3D数据进行压平处理。一般可通过交互式方式实现模型压平功能。 + + + 模型压平 + + +    具体实现：添加交互式绘制工具 `Cesium.DrawPolygonTool()` 选择绘制区域, 初始化高级分析功能管理类 `CesiumZondy.Manager.AdvancedAnalysisManager()` 对象，调用高级分析功能管理类的 `createModelFlatten()` 方法，创建模型压平分析，将结果显示到三维球控件上。 + +**Step 1. 创建交互式绘制区工具**： +    初始化 `Cesium.DrawPolygonTool()` 对象，完成交互式绘制区工具的创建； + +* Example: + ``` Javascript + //创建交互式绘制区工具 + var drawPolygon = new Cesium.DrawPolygonTool(webGlobe.viewer, getDrawResult); + ``` + +**Step 2. 激活交互式绘制区工具**： +    调用 `Cesium.DrawPolygonTool()` 对象的activeTool()方法，激活交互式绘制区工具，完成此步后，可在三维场景中通过鼠标左键点击绘制多边形。 + +* Example: + ``` Javascript + //激活交互式绘制区工具 + drawPolygon.activeTool(); + ``` + +**Step 3. 顶点处理**： +    将交互式选取的点处理； + +* Example: + ``` Javascript + /*对绘制区域的顶点循环处理一下，以便用于模型压平参数的赋值*/ + var array = []; + for (let i = 0; i < positionsArray.length; i++) { + let point = positionsArray[i]; + let resPoint = new Cesium.Cartesian3; + let invserTran = new Cesium.Matrix4; + Cesium.Matrix4.inverse(tileset[0]._root.transform, invserTran); + Cesium.Matrix4.multiplyByPoint(invserTran, point, resPoint); + resPoint.y = -resPoint.y; + array.push(new Cesium.Cartesian2(resPoint.x, resPoint.y)); + } + array.push(array[0]); + ``` + +**Step 4. 创建模型压平分析**： +    初始化高级分析功能管理类 `CesiumZondy.Manager.AdvancedAnalysisManager()` 对象，调用高级分析功能管理类的 `createModelFlatten()` 方法，创建模型压平分析 + +* Example: + ``` Javascript + //初始化高级分析功能管理类 + var advancedAnalysisManager = new CesiumZondy.Manager.AdvancedAnalysisManager({ + viewer: webGlobe.viewer + }); + advancedAnalysisManager.createModelFlatten(landscapeLayer[0], { + //是否进行压平。值为true时执行压平 + isFlatten: true, + //将高度压到0 + height: 0, + //压平多边形的顶点序列长度 + arrayLength: positionsArray.length, + //顶点序列。顶点序列需要闭合，也就是说，例如一个矩形是四个顶点ABCD，那序列就应该是【ABCDA】 + array: array + }); + ``` + +**Step 5. 结果显示**： +    将结果显示到三维球控件上。 + +* Example: + ``` Javascript + //场景渲染（渲染最新的压平效果） + webGlobe.viewer.scene.requestRender(); + ``` + + +### 坡向分析 + +    此功能用于地形数据的坡向分析。 坡向是指地表面上一点的切平面的法线在水平面的投影与该点的正北方向的夹角，描述该点高程值改变量的最大变化方向。坡向分析作用是：决定地表面局部地面接收阳光和重新分配太阳辐射量的重要地形因子，直接造成局部地区气候特征差异，影响各项农业生产指标。 + + + 坡向分析 + + +    具体实现：初始化地形图层管理类 `CesiumZondy.Layer.TerrainLayer` 并调用 `append()` 方法加载地形数据后，跳转视点，创建高级分析功能管理类 `CesiumZondy.Manager.AdvancedAnalysisManager()` ，调用 `createAspectAnalysis()` 方法进行坡向分析。 + +**Step 1. 加载数据**： +    初始化地形图层管理类 `CesiumZondy.Layer.TerrainLayer` 并调用 `append()` 方法传入三维地形数据地图服务地址，即可加载浏览数据； + +- Example: + ```Javascript + //构造地形图层管理类 + var terrain = new CesiumZondy.Layer.TerrainLayer({ + viewer: webGlobe.viewer + }); + //加载三维地形地图文档（服务地址，配置参数） + var { protocol, ip, port } = window.webclient; + var terrainlayer = terrain.append(`http://develop.smaryun.com:6163/igs/rest/g3d/terrain`, {}); + //初始化视图功能管理类 + var sceneManager = new CesiumZondy.Manager.SceneManager({ + viewer: webGlobe.viewer + }); + ``` + +**Step 2. 坡向分析**： +    创建高级分析功能管理类 `CesiumZondy.Manager.AdvancedAnalysisManager()` ，调用 `createAspectAnalysis()` 方法进行坡向分析。 + +- Example: + ```Javascript + //初始化高级分析功能管理类 + var advancedAnalysisManager = new CesiumZondy.Manager.AdvancedAnalysisManager({ + viewer: webGlobe.viewer + }); + webGlobe.viewer.scene.globe.depthTestAgainstTerrain = true; + //进行坡向分析 + var aspectAna = advancedAnalysisManager.createAspectAnalysis([ + Cesium.Color.ALICEBLUE, + Cesium.Color.ANTIQUEWHITE, + Cesium.Color.AQUA, + Cesium.Color.AQUAMARINE, + Cesium.Color.AZURE, + Cesium.Color.BEIGE + ]); + ``` + + +### 坡度分析 + +    此功能用于地形数据的坡度分析。 坡度是指过地表一点的切平面与水平面的夹角，描述地表面在该点的倾斜程度。坡度分析的作用是：影响地表物质流动与能量转换的规模与强度，制约生产力空间布局。 + + + 坡度分析 + + + +    具体实现：初始化地形图层管理类 `CesiumZondy.Layer.TerrainLayer` 并调用 `append()` 方法加载地形数据后，跳转视点，创建高级分析功能管理类 `CesiumZondy.Manager.AdvancedAnalysisManager()` ，调用 `createSlopeAnalysis()` 方法进行坡度分析。 + +**Step 1. 加载数据**： +    初始化地形图层管理类 `CesiumZondy.Layer.TerrainLayer` 并调用 `append()` 方法传入三维地形数据地图服务地址，即可加载浏览数据； + +- Example: + ```Javascript + //构造地形图层管理类 + var terrain = new CesiumZondy.Layer.TerrainLayer({ + viewer: webGlobe.viewer + }); + //加载三维地形地图文档（服务地址，配置参数） + var { protocol, ip, port } = window.webclient; + var terrainlayer = terrain.append(`http://develop.smaryun.com:6163/igs/rest/g3d/terrain`, {}); + //初始化视图功能管理类 + var sceneManager = new CesiumZondy.Manager.SceneManager({ + viewer: webGlobe.viewer + }); + ``` + +**Step 2. 坡度分析**： +    创建高级分析功能管理类 `CesiumZondy.Manager.AdvancedAnalysisManager()` ，调用 `createSlopeAnalysis()` 方法进行坡度分析。 + +- Example: + ```Javascript + //初始化高级分析功能管理类 + var advancedAnalysisManager = new CesiumZondy.Manager.AdvancedAnalysisManager({ + viewer: webGlobe.viewer + }); + webGlobe.viewer.scene.globe.depthTestAgainstTerrain = true; + //进行坡度分析 + var slopeAna = advancedAnalysisManager.createSlopeAnalysis([ + Cesium.Color.ALICEBLUE, + Cesium.Color.ANTIQUEWHITE, + Cesium.Color.AQUA, + Cesium.Color.AQUAMARINE, + Cesium.Color.AZURE, + Cesium.Color.BEIGE + ]); + ``` + + +### 填挖方计算 + +    此功能提供用于计算将一定范围内的地形填平到某一高度时，需要挖开或填充的空间体积，可以应用于智慧城市，地质，公安等多个领域的业务功能，实用性强。 + + + 填挖方计算 + + + +    具体实现：初始化 `Cesium.DrawElement()` 对象在三维场景中添加交互式绘制区控件用来界定量算区域，初始化高级分析功能管理类 `CesiumZondy.Manager.AdvancedAnalysisManager()` 对象，调用高级分析功能管理类的 `createCutFill()` 方法创建填挖方分析对象, 调用高级分析功能管理类的 `startCutFill()` 方法执行填挖方分析。 + +**Step 1. 创建交互式绘制工具**： +    初始化 `Cesium.DrawElement()` 对象，完成交互式绘制工具的创建； + +* Example: + ``` Javascript + //创建交互式绘制工具 + var drawElement = new Cesium.DrawElement(webGlobe.viewer); + ``` + +**Step 2. 激活交互式绘制区工具**： +    调用 `Cesium.DrawElement()` 对象的startDrawingPolygon()方法，激活交互式绘制区工具，完成此步后，可在三维场景中通过鼠标左键点击绘制多边形； + +* Example: + ``` Javascript + //激活交互式绘制区工具 + drawElement.startDrawingPolygon(); + ``` + +**Step 3. 创建填挖方分析**： +    初始化高级分析功能管理类 `CesiumZondy.Manager.AdvancedAnalysisManager（）` 对象，调用高级分析功能管理类的 `createCutFill()` 方法创建填挖方分析对象； + +* Example: + ``` Javascript + //初始化高级分析功能管理类 + var advancedAnalysisManager = new CesiumZondy.Manager.AdvancedAnalysisManager({ + viewer: viewer + }); + //创建填挖方实例 + cutFill = advancedAnalysisManager.createCutFill(0.0, { + //设置x方向采样点个数 + xPaneNum: document.getElementById("x").value <= 0 ? 16 : document.getElementById("x").value, + //设置y方向采样点个数参数 + yPaneNum: document.getElementById("y").value <= 0 ? 16 : document.getElementById("y").value, + //设置填挖规整高度 + Height: document.getElementById("z").value <= 0 ? 16 : document.getElementById("z").value, + //返回结果的回调函数 + callback: function(result) { + document.getElementById("height").value = result.minHeight.toFixed(2) + '~' + result.maxHeight.toFixed(2); + document.getElementById("surfaceArea").value = result.surfaceArea; + document.getElementById("cutVolume").value = result.cutVolume; + document.getElementById("fillVolume").value = result.fillVolume; + } + }); + ``` + +**Step 4. 执行填挖方分析**： +    调用高级分析功能管理类的 `startCutFill()` 方法执行填挖方分析。 + +* Example: + ``` Javascript + //开始执行填挖方分析 + advancedAnalysisManager.startCutFill(cutFill, positions); + ``` + + +### 动画漫游 + +    此功能用于在三维场景中实现动画漫游功能，即让模型沿着路径漫游，默认为第一人称漫游，可修改动画漫游方式。本示例实现让飞机模型按既定的路径漫游。在实际应用中，可结合具体应用场景开发，如绘制路径进行动画漫游等功能需求等。 + + + 动画漫游 + + +    具体实现：初始化高级分析功能管理类 `CesiumZondy.Manager.AdvancedAnalysisManager` 对象，调用高级分析功能管理类的 `createAnimation()` 方法创建动画漫游对象实例实现动画漫游功能。 + +**Step 1. 创建动画漫游对象**： +    初始化高级分析功能管理类对象`CesiumZondy.Manager.AdvancedAnalysisManager`，调用`createAnimation()`方法创建动画漫游对象； + +* Example: + ``` Javascript + //初始化高级分析功能管理类 + var advancedAnalysisManager = new CesiumZondy.Manager.AdvancedAnalysisManager({ + viewer: webGlobe.viewer + }); + //创建动画漫游对象 + animation = advancedAnalysisManager.createAnimation({ + exHeight: 9, + isLoop: false, + //漫游模型url + modelUrl: './static/data/model/WuRenJi.glb', + //完成动画漫游回调函数 + complete: function () { + alert('完毕'); + } + }); + ``` + +**Step 2. 实现动画漫游控制**： +    通过动画漫游对象的属性和方法实现动画漫游控制，即通过属性设置漫游路径、漫游方式、速度、俯仰角、方位角等参数，分别通过调用方法`start()`、`stop()`开始和结束漫游。 + +* Example: + ``` Javascript + //漫游路径 + positions = Cesium.Cartesian3.fromDegreesArray([ + 117.213063, 31.812956, 117.213162, 31.812389, 117.212929, 31.812056, 117.213275, 31.811582, + 117.21348, 31.811513, 117.214141, 31.811682, 117.21497, 31.811691, 117.216318, 31.811454, + 117.216962, 31.812037, 117.217893, 31.812298, 117.218607, 31.811488, 117.219466, 31.810935, + 117.224439, 31.810929, 117.225266, 31.811119, 117.225308, 31.81131, 117.224819, 31.811724, + 117.225189, 31.811928, 117.225676, 31.811624, 117.225843, 31.811943, 117.22625, 31.812183, + 117.226292, 31.81281, 117.225888, 31.813287, 117.226093, 31.814059, 117.22564, 31.814582, + 117.225953, 31.814731, 117.225611, 31.814954, 117.22576, 31.815233, 117.224073, 31.816329, + 117.223694, 31.81627, 117.222769, 31.817007, 117.222259, 31.816871, 117.221922, 31.816707, + 117.221653, 31.816788, 117.22151, 31.817002, 117.221039, 31.816891, 117.220395, 31.816352, + 117.220166, 31.815734, 117.219804, 31.815607, 117.219461, 31.815122, 117.21878, 31.814846, + 117.218297, 31.815275, 117.217975, 31.815172, 117.217142, 31.815229, 117.216753, 31.815124, + 117.216652, 31.814308, 117.215726, 31.814049, 117.214769, 31.813517, 117.214111, 31.813717, + 117.213552, 31.814099, 117.213024, 31.813954, 117.212897, 31.813892, 117.213224, 31.813681, + 117.212788, 31.813147, 117.212928, 31.813018, 117.213063, 31.812956 + ]); + //设置路径 + animation.positions = positions; + //漫游方式：1-跟随、2-锁定第一视角、3-上帝视角 + animation.animationType = 2; + //漫游速度 + animation.speed = 1; + ``` + +* Example: + ``` Javascript + function start() { + //开始漫游 + animation.start(); + } + function pause() { + //暂停漫游 + animation.pause = true; + } + function stop() { + //停止漫游 + animation.stop(); + } + ``` + + +## 场景特效 + +    支持常用粒子特效，如雨、雪、雾、火焰、烟雾等，模拟自然天气或动态场景。 + +| 类名/方法名 | API说明 | +| -------------- |----------------| +| CesiumZondy.Manager.AdvancedAnalysisManager / createRain() | 降雨粒子特效 | +| CesiumZondy.Manager.AdvancedAnalysisManager / createSnow() | 降雪粒子特效 | +| CesiumZondy.Manager.AdvancedAnalysisManager / createFog() | 雾粒子特效 | +| CesiumZondy.Manager.AdvancedAnalysisManager / createFire() | 火焰粒子特效 | +| CesiumZondy.Manager.AdvancedAnalysisManager / createStableParticle() | 自定义粒子特效 | + +### 降雨特效 + + + 降雨特效 + + +    具体实现：首先构造`CesiumZondy.Manager.AdvancedAnalysisManager`高级分析功能类对象，然后调用`createRain()`方法添加降雨粒子特效，可通过可选参数实现降雨效果的调整。 + +* Example: + ``` Javascript + //初始化高级分析功能管理类 + var advancedAnalysisManager = new CesiumZondy.Manager.AdvancedAnalysisManager({ viewer: webGlobe.viewer }); + //添加下雨特效 + advancedAnalysisManager.createRain({ + //色调调整 + hueShift: 0.7 + }); + + ``` + +### 降雪特效 + + + 降雪特效 + + +    具体实现：首先构造`CesiumZondy.Manager.AdvancedAnalysisManager`高级分析功能类对象，然后调用`createSnow()`方法添加降雪粒子特效，可通过可选参数实现降雪效果的调整。 + +* Example: + ``` Javascript + //初始化高级分析功能管理类 + var advancedAnalysisManager = new CesiumZondy.Manager.AdvancedAnalysisManager({ viewer: webGlobe.viewer }); + //添加下雪特效 + advancedAnalysisManager.createSnow({ + //色调 + hueShift: 0.7 + }); + ``` + +### 雾特效 + + + 雾特效 + + +    具体实现：首先构造`CesiumZondy.Manager.AdvancedAnalysisManager`高级分析功能类对象，然后调用`createFog()`方法添加雾粒子特效，可通过可选参数实现雾效的调整。 + +* Example: + ``` Javascript + //初始化高级分析功能管理类 + var advancedAnalysisManager = new CesiumZondy.Manager.AdvancedAnalysisManager({ viewer: webGlobe.viewer }); + //添加雾效 + advancedAnalysisManager.createFog({ + //雾特效透明度 + alpha:0.5 + }); + + ``` + +### 火焰特效 + + + 火焰特效 + + +    具体实现：首先构造`CesiumZondy.Manager.AdvancedAnalysisManager`高级分析功能类对象，然后调用`createFire()`方法添加火焰粒子特效，可通过可选参数实现火焰特效的调整。 + +- Example: + + ```javascript + //初始化高级分析功能管理类 + var advancedAnalysisManager = new CesiumZondy.Manager.AdvancedAnalysisManager({ viewer: webGlobe.viewer }) + //位置点 + let position = [114.40103, 30.4679, 12] + //火焰图片url + let imageUrl = './static/data/effect/fire.png' + //添加火焰粒子特效 + fireObj = advancedAnalysisManager.createFire(imageUrl, position) + ``` + +- Example: + ```Javascript + if (name === 'emissionRate') { + //排放率 + fireObj.emissionRate = parseFloat(newValue); + } + if (name === 'particleSize') { + var particleSize = parseFloat(newValue); + //图像尺寸 + fireObj.imageSize = new Cesium.Cartesian2(particleSize, particleSize); + } + if (name === 'particleLife') { + //粒子生命 + fireObj.particleLife = parseFloat(newValue); + } + if (name === 'speed') { + //速度 + fireObj.speed = parseFloat(newValue); + } + if (name === 'startScale') { + //起始规模 + fireObj.startScale = parseFloat(newValue); + } + if (name === 'endScale') { + //终止规模 + fireObj.endScale = parseFloat(newValue); + } + ``` + +### 自定义粒子特效（烟雾） + + +    烟雾粒子特效，与火焰粒子特效相同，可以模拟火灾等各类火焰烟雾、水汽烟雾相关的场景。可通过自定义粒子特效接口实现烟雾粒子特效。 + + + 烟雾特效 + + + +    具体实现：首先构造`CesiumZondy.Manager.AdvancedAnalysisManager`高级分析功能类对象，然后调用`createStableParticle()`方法分别添加火焰与烟雾粒子特效，可通过可选参数实现烟雾特效的调整。 + +* Example: + ``` Javascript + //初始化高级分析功能管理类 + var advancedAnalysisManager = new CesiumZondy.Manager.AdvancedAnalysisManager({ + viewer: webGlobe.viewer + }); + //粒子发射位置点 + let position = [114.40103, 30.4679, 12]; + //火焰与烟雾图片url + let imageUrl1 = './static/data/effect/fire1.png'; + let imageUrl2 = './static/data/effect/smoke1.png'; + //添加烟雾粒子特效 + fireObj = advancedAnalysisManager.createStableParticle(imageUrl1, position, { + emissionRate: 3, + startScale: 1, + endScale: 3 + }); + //添加烟雾粒子特效 + smokeObj = advancedAnalysisManager.createStableParticle(imageUrl2, position, { + emissionRate: 35, + startScale: 5, + endScale: 8 + }); + ``` + +* Example: + ``` Javascript + if (name === 'emissionRate') { + //排放率 + smokeObj.emissionRate = parseFloat(newValue); + } + if (name === 'particleSize') { + var particleSize = parseFloat(newValue); + //图像尺寸 + smokeObj.imageSize = new Cesium.Cartesian2(particleSize, particleSize); + + } + if (name === 'particleLife') { + smokeObj.particleLife = parseFloat(newValue); + } + if (name === 'speed') { + smokeObj.speed = parseFloat(newValue); + } + + if (name === 'startScale') { + //起始规模 + smokeObj.startScale = parseFloat(newValue); + } + if (name === 'endScale') { + //终止规模 + smokeObj.endScale = parseFloat(newValue); + } + ``` + + +## 轨迹模拟 + + +### 模型漫游 + +    模型漫游，此功能用于在三维场景中添加模型动态运动显示效果。 + + + 模型漫游 + + +    具体实现：创建分析功能管理类 `CesiumZondy.Manager.AnalysisManager()` ，调用 `cruiseModel()` 方法创建模型漫游，通过 `startCruiseModel()` 方法开始模型漫游，通过 `stopCruiseModel()` 方法暂停模型漫游, 通过 `clearCruiseModel()` 方法清除模型漫游。 + +**Step 1. 创建模型漫游**: +    创建分析功能管理类 `CesiumZondy.Manager.AnalysisManager()` ，调用 `cruiseModel()` 方法创建模型漫游； + +- Example: + ```Javascript + //初始化分析功能管理类 + var analysisManager = new CesiumZondy.Manager.AnalysisManager({ + viewer: webGlobe.viewer + }); + //模型漫游 + var modelEntity = analysisManager.cruiseModel( + //模型URL地址 + './static/data/model/GroundVehicle.glb', + //漫游点集 + positionArr, + //是否显示漫游路径 + true, + //漫游时钟频率 + 10 + ); + ``` + +**Step 2. 开始模型漫游**: +    创建分析功能管理类 `CesiumZondy.Manager.AnalysisManager()` ，调用 `startCruiseModel()` 方法开始模型漫游。 + +- Example: + ```Javascript + /*开始漫游*/ + analysisManager.startCruiseModel(); + ``` + + +### 动态航线 + +    动态航线，此功能用于动态显示两点之间的动态飞行轨迹效果。 + + + 动态航线 + + +    具体实现：初始化 `CesiumZondy.Manager.AdvancedAnalysisManager()`高级分析功能管理对象，然后调用 `createDynamicPolyline()` 方法创建动态航线。 + +- Example: + + ```Javascript + //开启动画 + webGlobe.viewer.clock.shouldAnimate = true; + //构造高级分析功能管理对象 + var advancedAnalysisManager = new CesiumZondy.Manager.AdvancedAnalysisManager({ + viewer: webGlobe.viewer + }); + //创建动态航线 + var dynamicLine = advancedAnalysisManager.createDynamicPolyline( + //航线起始城市经纬度 + { + lon: 114.302312702, + lat: 30.598026044 + }, + //航线终点城市数组，经纬度 + [ + { "lon": 115.028495718, "lat": 30.200814617 }, + { "lon": 110.795000473, "lat": 32.638540762 }, + { "lon": 111.267729446, "lat": 30.698151246 }, + { "lon": 112.126643144, "lat": 32.058588576 }, + { "lon": 114.885884938, "lat": 30.395401912 }, + { "lon": 112.190419415, "lat": 31.043949588 }, + { "lon": 113.903569642, "lat": 30.932054050 }, + { "lon": 112.226648859, "lat": 30.367904255 }, + { "lon": 114.861716770, "lat": 30.468634833 }, + { "lon": 114.317846048, "lat": 29.848946148 }, + { "lon": 113.371985426, "lat": 31.704988330 }, + { "lon": 109.468884533, "lat": 30.289012191 }, + { "lon": 113.414585069, "lat": 30.368350431 }, + { "lon": 112.892742589, "lat": 30.409306203 }, + { "lon": 113.160853710, "lat": 30.667483468 }, + { "lon": 110.670643354, "lat": 31.748540780 } + ], + { + //是否已经添加动态航线 + isAdd: false, + //航线颜色：默认红色 + color: new Cesium.Color(255 / 255, 0 / 255, 0 / 255, 1) + } + ); + ``` + + + +## 客户端可视化 + + +### 热力图 + +    热力图，此功能用于在当前三维场景中添加热力图显示效果。 + + + 热力图 + + +    具体实现：创建分析功能管理类 `CesiumZondy.Manager.AnalysisManager()` ，调用关键接口 `createHeatMap()` 添加热力图。 + +* Example: + ``` Javascript + var analysisManager = new CesiumZondy.Manager.AnalysisManager({ + viewer: webGlobe.viewer + }) + //创建热力图（范围、最大值、最小值） + var instance = analysisManager.createHeatMap(bounds, valueMin, valueMax, data, options); + ``` + +### 动态圆 + +    动态圆，此功能用于在当前场景中绘制动态的圆显示效果，可应用于任意场景中。 + + + 动态圆 + + +    具体实现：先初始化 `Cesium.CircleScanEffect()` 动态圆对象，然后通过分析功能管理类`CesiumZondy.Manager.AnalysisManager` 的`addSceneEffect()`方法添加动态圆显示；`removeSceneEffect()`方法移除动态圆显示。 + +**Step 1. 创建动态圆**： +    初始化动态圆对象 `Cesium.CircleScanEffect()`，注意使用动态圆功能`必须开启深度检测` ； + +* Example: + ``` Javascript + //开启地形深度检测（必须） + webGlobe.viewer.scene.globe.depthTestAgainstTerrain = true; + //初始化动态圆对象 + var scanEffect = new Cesium.CircleScanEffect(webGlobe.viewer, { + center: Cesium.Cartesian3.fromDegrees(114.06, 22.54, 20), + maxRadius: 5000, + scanColor: new Cesium.Color(1, 0, 0, 1), + duration: 8000 + }); + ``` + +**Step 2. 添加/移除动态圆**： +    调用Cesium三维球分析功能管理类`CesiumZondy.Manager.AnalysisManager` 的`addSceneEffect()`方法添加动态圆显示，相应可调用`removeSceneEffect()`方法移除。 + +* Example: + ``` Javascript + //初始化分析功能管理类 + var analysisManager = new CesiumZondy.Manager.AnalysisManager({ + viewer: webGlobe.viewer + }); + //添加添加场景特效-动态圆 + analysisManager.addSceneEffect(scanEffect); + + //通过removeSceneEffect()移除场景特效 + //analysisManager.removeSceneEffect(scanEffect); + ``` + +### 雷达扫描圆 + +    雷达扫描圆，此功能用于在当前场景中添加雷达扫描圆显示效果，可应用于任意场景中。 + + + 雷达扫描圆 + + +    具体实现：初始化高级分析管理类 `CesiumZondy.Manager.AdvancedAnalysisManager` 的`createRadarScan()`方法创建雷达扫描圆对象，然后分别通过分析功能管理类`CesiumZondy.Manager.AnalysisManager` 的`addSceneEffect()`方法与`removeSceneEffect()`方法来添加与移除雷达扫描圆显示功能。 + +**Step 1. 创建雷达扫描圆**： +    初始化高级分析功能管理类对象 `CesiumZondy.Manager.AdvancedAnalysisManager` ，调用`createRadarScan()`方法创建雷达扫描圆对象，注意`必须开启深度检测` ； + +* Example: + ``` Javascript + //开启深度检测（必须） + webGlobe.viewer.scene.globe.depthTestAgainstTerrain = true; + //初始化高级分析功能管理类 + var advancedAnalysisManager = new CesiumZondy.Manager.AdvancedAnalysisManager({ viewer: webGlobe.viewer }); + //创建一个雷达扫描圆对象 + var radarScanEffect = advancedAnalysisManager.createRadarScan( + //雷达中心点 + Cesium.Cartesian3.fromDegrees(120.9558, 23.4481, 3657), + //扫描半径 + 5000, + //扫描区域颜色 + new Cesium.Color(255 / 255, 0 / 255, 0 / 255, 1), + //周期时间,单位毫秒 + 8000 + ); + + ``` + +**Step 2. 添加/移除雷达扫描圆显示**： +    调用分析功能管理类`CesiumZondy.Manager.AnalysisManager` 的`addSceneEffect()`方法添加雷达扫描圆显示，相应可调用`removeSceneEffect()`方法移除。 + +* Example: + ``` Javascript + //初始化分析功能管理类 + var analysisManager = new CesiumZondy.Manager.AnalysisManager({ + viewer: webGlobe.viewer + }); + //添加场景特效-雷达扫描圆 + analysisManager.addSceneEffect(radarScanEffect); + //移除场景特效-雷达扫描圆 + //analysisManager.removeSceneEffect(radarScanEffect); + ``` + + +## 客户端可视化-Echarts + +    在三维场景中接入百度ECharts，支持三维场景中加载ECharts散点图、热力图、路径图、渐近线、自定义网格专题图等。 + +> 百度 ECharts：ECharts完整、详细使用方法可参考官方教程API，开发库下载可参考官方下载 + +> 对接Echarts特别说明：MapGIS Client for JavaScript在Cesium中对接了百度Echarts图表插件，若插件本身存在问题，请优先参考Echarts官网解决方案 + +    **以散点图-空气质量为例：实现在三维场景中加载ECharts散点图，基于全国主要城市空气质量数据实现散点图的可视化。**通过关键接口`CesiumZondy.Overlayer.EchartsLayer()`来实现ECharts图层的加载。 + + + + Echarts散点图-空气质量 + + + +**Step 1. 数据准备**： +    准备全国主要城市的数据，包括名称、坐标点、空气质量，并按照格式要求进行处理； + +* Example: + ```javascript + function initData() { + data = [ + {name: '海门',value: 9}, + {name: '鄂尔多斯',value: 12}, + {name: '招远',value: 12}, + {name: '舟山',value: 12}, + ··· + ]; + geoCoordMap = { + '海门': [121.15, 31.89], + '鄂尔多斯': [109.781327, 39.608266], + '招远': [120.38, 37.35], + '舟山': [122.207216, 29.985295], + ··· + }; + } + + function convertData(data) { + var res = []; + for (var i = 0; i < data.length; i++) { + var geoCoord = geoCoordMap[data[i].name]; + if (geoCoord) { + res.push({ + name: data[i].name, + value: geoCoord.concat(data[i].value) + }); + } + } + return res; + }; + ``` + +**Step 2. 配置参数项**： +    创建各种需要的组件，如标题、图例、提示框等，其中最关键的是“series-系列”组件，构造完成后，即可调用`CesiumZondy.Overlayer.EchartsLayer(map, option).addTo(map)`方法，将ECharts图层添加到三维场景中。 + +* Example: + ```javascript + function initEcharts() { + option = { + title: { + text: '全国主要城市空气质量 - 百度地图提供数据', + textStyle: { + color: '#eee' + }, + subtext: 'data from PM25.in', + sublink: 'http://www.pm25.in', + left: 'center' + }, + legend: { + orient: 'vertical', + y: 'top', + x: 'left', + data: ['pm2.5'], + textStyle: { + color: '#fff' + } + }, + tooltip: { + trigger: 'item' + }, + cesium: { + roam: true + }, + series: [{ + name: 'pm2.5', + type: 'scatter', + coordinateSystem: 'cesium', + data: convertData(data), + symbolSize: function (val) { + return val[2] / 10; + }, + showEffectOn: 'render', + rippleEffect: { + brushType: 'stroke' + }, + hoverAnimation: true, + label: { + normal: { + formatter: '{b}', + position: 'right', + show: false + }, + emphasis: { + show: true + } + }, + itemStyle: { + normal: { + color: '#ddb926' + } + }, + zlevel: 1 + }, + { + name: 'Top 5', + type: 'effectScatter', + coordinateSystem: 'cesium', + data: convertData(data.sort(function (a, b) { + return b.value - a.value; + }).slice(0, 6)), + symbolSize: function (val) { + return val[2] / 10; + }, + showEffectOn: 'render', + rippleEffect: { + brushType: 'stroke' + }, + hoverAnimation: true, + label: { + normal: { + formatter: '{b}', + position: 'right', + show: true + } + }, + itemStyle: { + normal: { + color: '#f4e925', + shadowBlur: 10, + shadowColor: '#333' + } + }, + zlevel: 1 + } + ] + } + layer = new CesiumZondy.Overlayer.EchartsLayer(map, option).addTo(map); + } + ``` + +## 客户端可视化-MapV + +    在三维场景中接入MapV，支持三维场景中加载MapV热力图、等。 + +> 对接Mapv特别说明：MapGIS Client for JavaScript在Cesium中对接了MapV插件，若插件本身存在问题，请优先参考Mapv官方教程寻找解决方案 + +    **以MapV热力图为例**：实现在三维场景中加载MapV热力图，热力图采用特殊高亮的形式显示访客热衷的页面区域和访客所在的地理区域。通过关键接口 `CesiumZondy.Overlayer.MapvLayer()` 来实现MapV图层的加载。 + + + MapV热力图 + + +**Step 1. 创建 `DataSet` 对象**： +    首先构造DataSet对象需要的数据，然后使用数据创建DataSet对象。DataSet对象使用Mapv框架的原生API创建，更多详细信息参考Mapv官方教程； + +* Example: + ``` javascript + var randomCount = 1000; + var data = []; + var citys = ["北京", "天津", "上海", "重庆", "石家庄", "太原", "呼和浩特", "哈尔滨", "长春", "沈阳", "济南", "南京", "合肥", "杭州", "南昌", "福州", + "郑州", "武汉", "长沙", "广州", "南宁", "西安", "银川", "兰州", "西宁", "乌鲁木齐", "成都", "贵阳", "昆明", "拉萨", "海口" + ]; + // 构造数据 + while (randomCount--) { + var cityCenter = mapv.utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length)]); + data.push({ + geometry: { + type: 'Point', + coordinates: [cityCenter.lng - 2 + Math.random() * 4, cityCenter.lat - 2 + Math.random() * 4] + }, + count: 30 * Math.random(), + time: 100 * Math.random() + }); + } + + var dataSet = new mapv.DataSet(data); + ``` + +**Step 2. 构造 `options` 参数**： +    options参数参考Mapv框架的原生API创建，更多详细信息参考Mapv官方教程； + +* Example: + ``` javascript + var options = { + context: '2d', + size: 13, + gradient: { + 0.25: "rgb(0,0,255)", + 0.55: "rgb(0,255,0)", + 0.85: "yellow", + 1.0: "rgb(255,0,0)" + }, + max: 60, + animation: { + type: 'time', + stepsRange: { + start: 0, + end: 100 + }, + trails: 10, + duration: 4, + }, + draw: 'heatmap' + } + ``` + +**Step 3. 数据展示**： +    根据前面的步骤，将 `map` 、 `dataSet` 、 `options` 三个参数传入 `CesiumZondy.Overlayer.MapvLayer` 中创建对象，创建完成数据在三维场景中加载展示。 + +* Example: + ``` javascript + var mapvLayer = new CesiumZondy.Overlayer.MapvLayer(map, dataSet, options); + ``` + + + +## 客户端空间分析 + +    在三维场景中接入第三方开源空间分析库Turf.js，支持客户端实现缓冲区分析、泰森多边形、TIN三角网、中心点、插值、光滑曲线、求交判断等功能。 + + +> Turf.js： turf是JavaScript编写的模块化地理空间引擎，具体使用请查看turf官方教程和下载 + +> GeoJSON.js： 地理数据转换成GeoJSON格式，GeoJSON.js官方地址 + + +    **以缓冲区分析为例**，给定一个缓冲半径进行缓冲区分析，单位支持 `miles 米`，`kilometers 千米`，`degrees 度`。 + + + + 客户端缓冲区分析 + + +    具体实现：先通过Cesium三维球控件 `Cesium.WebSceneControl()` 加载三维场景控件后，使用 `Turf.js` 空间分析库的 `turf.buffer()` 方法进行缓冲区分析。 + + +**Step 1. 执行缓冲区分析**： +      准备`点`、`线`、`面`要素数据，根据`缓冲区分析算法`得到缓冲区分析结果，实现关键步骤如下： + +   （1）准备`点`、`线`、`面`要素数据 + +* Example: + ```javascript + var origindata = { + "type": "FeatureCollection", + "features": [{ + "type": "Feature", + "properties": {}, + "geometry": { + "type": "Point", + "coordinates": [114.24270629882811,30.622550184776674] + } + }, + { + "type": "Feature", + "properties": {}, + "geometry": { + "type": "LineString", + "coordinates": [ + [114.34810638427734,30.634958017061198], + [114.2856216430664,30.554869984737515], + [114.246826171875,30.4954261715298] + ] + } + }, + { + "type": "Feature", + "properties": {}, + "geometry": { + "type": "Polygon", + "coordinates": [ + [ + [114.33815002441406,30.502230042106245], + [114.34398651123045,30.485071542395932], + [114.3728256225586,30.472348632640834], + [114.38278198242188,30.49010107130931], + [114.35256958007811,30.50518809826035], + [114.33815002441406,30.502230042106245] + ] + ] + } + } + ] + }; + ``` + +   （2）执行 `缓冲区分析算法`，返回缓冲结果要素数据 + +* Example: + ```javascript + geojson = turf.buffer(origindata, 1.5, { + units: 'miles' + }); + ``` + +**Step 2. 显示缓冲区分析结果**： +      更新数据，将得到的缓冲结果要素数据添加到地图中。 + +* Example: + ```javascript + map.dataSources.add(Cesium.GeoJsonDataSource.load(geojson, { + stroke: Cesium.Color.BLACK, + fill: Cesium.Color.GRAY, + strokeWidth: 15 + })); + ``` \ No newline at end of file diff --git "a/website/public/static/demo/military/source/img/01.\346\226\260\345\273\272\347\275\221\347\253\231\347\233\256\345\275\225.png" "b/website/public/static/demo/military/source/img/01.\346\226\260\345\273\272\347\275\221\347\253\231\347\233\256\345\275\225.png" new file mode 100644 index 000000000..bdb65764b Binary files /dev/null and "b/website/public/static/demo/military/source/img/01.\346\226\260\345\273\272\347\275\221\347\253\231\347\233\256\345\275\225.png" differ diff --git "a/website/public/static/demo/military/source/img/02.\345\274\225\347\224\250\350\204\232\346\234\254\345\272\223\350\265\204\346\272\220.png" "b/website/public/static/demo/military/source/img/02.\345\274\225\347\224\250\350\204\232\346\234\254\345\272\223\350\265\204\346\272\220.png" new file mode 100644 index 000000000..5b476446b Binary files /dev/null and "b/website/public/static/demo/military/source/img/02.\345\274\225\347\224\250\350\204\232\346\234\254\345\272\223\350\265\204\346\272\220.png" differ diff --git "a/website/public/static/demo/military/source/img/03.\346\226\260\345\273\272HTML\351\241\265\351\235\242\357\274\210\346\250\241\346\235\277\357\274\211.png" "b/website/public/static/demo/military/source/img/03.\346\226\260\345\273\272HTML\351\241\265\351\235\242\357\274\210\346\250\241\346\235\277\357\274\211.png" new file mode 100644 index 000000000..e5727690b Binary files /dev/null and "b/website/public/static/demo/military/source/img/03.\346\226\260\345\273\272HTML\351\241\265\351\235\242\357\274\210\346\250\241\346\235\277\357\274\211.png" differ diff --git "a/website/public/static/demo/military/source/img/03.\346\226\260\345\273\272HTML\351\241\265\351\235\242\357\274\210\347\251\272\357\274\211.png" "b/website/public/static/demo/military/source/img/03.\346\226\260\345\273\272HTML\351\241\265\351\235\242\357\274\210\347\251\272\357\274\211.png" new file mode 100644 index 000000000..08271528c Binary files /dev/null and "b/website/public/static/demo/military/source/img/03.\346\226\260\345\273\272HTML\351\241\265\351\235\242\357\274\210\347\251\272\357\274\211.png" differ diff --git "a/website/public/static/demo/military/source/img/04.\345\274\225\347\224\250\345\274\200\345\217\221\345\272\223.png" "b/website/public/static/demo/military/source/img/04.\345\274\225\347\224\250\345\274\200\345\217\221\345\272\223.png" new file mode 100644 index 000000000..897b68076 Binary files /dev/null and "b/website/public/static/demo/military/source/img/04.\345\274\225\347\224\250\345\274\200\345\217\221\345\272\223.png" differ diff --git "a/website/public/static/demo/military/source/img/05.\345\210\233\345\273\272div\345\261\202\345\271\266\350\256\276\347\275\256\346\240\267\345\274\217.png" "b/website/public/static/demo/military/source/img/05.\345\210\233\345\273\272div\345\261\202\345\271\266\350\256\276\347\275\256\346\240\267\345\274\217.png" new file mode 100644 index 000000000..7fb5f0ac1 Binary files /dev/null and "b/website/public/static/demo/military/source/img/05.\345\210\233\345\273\272div\345\261\202\345\271\266\350\256\276\347\275\256\346\240\267\345\274\217.png" differ diff --git "a/website/public/static/demo/military/source/img/06. body\347\232\204onload\344\272\213\344\273\266.png" "b/website/public/static/demo/military/source/img/06. body\347\232\204onload\344\272\213\344\273\266.png" new file mode 100644 index 000000000..1a53df09b Binary files /dev/null and "b/website/public/static/demo/military/source/img/06. body\347\232\204onload\344\272\213\344\273\266.png" differ diff --git "a/website/public/static/demo/military/source/img/07.\345\212\240\350\275\275M3D\347\274\223\345\255\230\346\250\241\345\236\213\347\232\204\350\204\232\346\234\254\345\207\275\346\225\260.png" "b/website/public/static/demo/military/source/img/07.\345\212\240\350\275\275M3D\347\274\223\345\255\230\346\250\241\345\236\213\347\232\204\350\204\232\346\234\254\345\207\275\346\225\260.png" new file mode 100644 index 000000000..9972cec74 Binary files /dev/null and "b/website/public/static/demo/military/source/img/07.\345\212\240\350\275\275M3D\347\274\223\345\255\230\346\250\241\345\236\213\347\232\204\350\204\232\346\234\254\345\207\275\346\225\260.png" differ diff --git "a/website/public/static/demo/military/source/img/08.\345\234\250IIS\344\270\255\346\265\217\350\247\210\347\275\221\351\241\265.png" "b/website/public/static/demo/military/source/img/08.\345\234\250IIS\344\270\255\346\265\217\350\247\210\347\275\221\351\241\265.png" new file mode 100644 index 000000000..a2b2edbc3 Binary files /dev/null and "b/website/public/static/demo/military/source/img/08.\345\234\250IIS\344\270\255\346\265\217\350\247\210\347\275\221\351\241\265.png" differ diff --git "a/website/public/static/demo/military/source/img/09.M3D\347\274\223\345\255\230\346\250\241\345\236\213\346\230\276\347\244\272\346\225\210\346\236\234\345\233\276.png" "b/website/public/static/demo/military/source/img/09.M3D\347\274\223\345\255\230\346\250\241\345\236\213\346\230\276\347\244\272\346\225\210\346\236\234\345\233\276.png" new file mode 100644 index 000000000..0ba6cfb96 Binary files /dev/null and "b/website/public/static/demo/military/source/img/09.M3D\347\274\223\345\255\230\346\250\241\345\236\213\346\230\276\347\244\272\346\225\210\346\236\234\345\233\276.png" differ diff --git a/website/public/static/demo/military/source/img/3D GeoModeler.png b/website/public/static/demo/military/source/img/3D GeoModeler.png new file mode 100644 index 000000000..b05e741ce Binary files /dev/null and b/website/public/static/demo/military/source/img/3D GeoModeler.png differ diff --git a/website/public/static/demo/military/source/img/3D SceneBuilder.png b/website/public/static/demo/military/source/img/3D SceneBuilder.png new file mode 100644 index 000000000..79b745c90 Binary files /dev/null and b/website/public/static/demo/military/source/img/3D SceneBuilder.png differ diff --git "a/website/public/static/demo/military/source/img/Cesium API\347\273\223\346\236\204.png" "b/website/public/static/demo/military/source/img/Cesium API\347\273\223\346\236\204.png" new file mode 100644 index 000000000..765abc49d Binary files /dev/null and "b/website/public/static/demo/military/source/img/Cesium API\347\273\223\346\236\204.png" differ diff --git a/website/public/static/demo/military/source/img/Cesium.png b/website/public/static/demo/military/source/img/Cesium.png new file mode 100644 index 000000000..560c4586f Binary files /dev/null and b/website/public/static/demo/military/source/img/Cesium.png differ diff --git "a/website/public/static/demo/military/source/img/Cesium\345\274\200\345\217\221\345\272\223.png" "b/website/public/static/demo/military/source/img/Cesium\345\274\200\345\217\221\345\272\223.png" new file mode 100644 index 000000000..afe4a85c1 Binary files /dev/null and "b/website/public/static/demo/military/source/img/Cesium\345\274\200\345\217\221\345\272\223.png" differ diff --git "a/website/public/static/demo/military/source/img/Cesium\345\274\200\345\217\221\347\244\272\344\276\213.png" "b/website/public/static/demo/military/source/img/Cesium\345\274\200\345\217\221\347\244\272\344\276\213.png" new file mode 100644 index 000000000..990d27f97 Binary files /dev/null and "b/website/public/static/demo/military/source/img/Cesium\345\274\200\345\217\221\347\244\272\344\276\213.png" differ diff --git a/website/public/static/demo/military/source/img/D3.png b/website/public/static/demo/military/source/img/D3.png new file mode 100644 index 000000000..1c6a97c25 Binary files /dev/null and b/website/public/static/demo/military/source/img/D3.png differ diff --git "a/website/public/static/demo/military/source/img/Desktop\344\271\235\345\267\236.png" "b/website/public/static/demo/military/source/img/Desktop\344\271\235\345\267\236.png" new file mode 100644 index 000000000..c07ddd39a Binary files /dev/null and "b/website/public/static/demo/military/source/img/Desktop\344\271\235\345\267\236.png" differ diff --git "a/website/public/static/demo/military/source/img/Desktop\351\253\230\347\272\24764.png" "b/website/public/static/demo/military/source/img/Desktop\351\253\230\347\272\24764.png" new file mode 100644 index 000000000..aaec53d54 Binary files /dev/null and "b/website/public/static/demo/military/source/img/Desktop\351\253\230\347\272\24764.png" differ diff --git a/website/public/static/demo/military/source/img/ECharts.png b/website/public/static/demo/military/source/img/ECharts.png new file mode 100644 index 000000000..ef6874140 Binary files /dev/null and b/website/public/static/demo/military/source/img/ECharts.png differ diff --git a/website/public/static/demo/military/source/img/IGServer64.png b/website/public/static/demo/military/source/img/IGServer64.png new file mode 100644 index 000000000..c4b9e04bd Binary files /dev/null and b/website/public/static/demo/military/source/img/IGServer64.png differ diff --git "a/website/public/static/demo/military/source/img/IGServer\344\271\235\345\267\236.png" "b/website/public/static/demo/military/source/img/IGServer\344\271\235\345\267\236.png" new file mode 100644 index 000000000..ff3b5fba2 Binary files /dev/null and "b/website/public/static/demo/military/source/img/IGServer\344\271\235\345\267\236.png" differ diff --git "a/website/public/static/demo/military/source/img/MapGIS\345\217\221\345\270\203\346\234\215\345\212\241.png" "b/website/public/static/demo/military/source/img/MapGIS\345\217\221\345\270\203\346\234\215\345\212\241.png" new file mode 100644 index 000000000..9f7a65898 Binary files /dev/null and "b/website/public/static/demo/military/source/img/MapGIS\345\217\221\345\270\203\346\234\215\345\212\241.png" differ diff --git a/website/public/static/demo/military/source/img/MapV.png b/website/public/static/demo/military/source/img/MapV.png new file mode 100644 index 000000000..d24081b26 Binary files /dev/null and b/website/public/static/demo/military/source/img/MapV.png differ diff --git "a/website/public/static/demo/military/source/img/dev/001-\346\226\260\345\273\272\347\251\272\345\234\272\346\231\257.png" "b/website/public/static/demo/military/source/img/dev/001-\346\226\260\345\273\272\347\251\272\345\234\272\346\231\257.png" new file mode 100644 index 000000000..ab86aaa82 Binary files /dev/null and "b/website/public/static/demo/military/source/img/dev/001-\346\226\260\345\273\272\347\251\272\345\234\272\346\231\257.png" differ diff --git "a/website/public/static/demo/military/source/img/dev/002-\346\267\273\345\212\240\346\250\241\345\236\213\345\261\202.png" "b/website/public/static/demo/military/source/img/dev/002-\346\267\273\345\212\240\346\250\241\345\236\213\345\261\202.png" new file mode 100644 index 000000000..5f8c96ada Binary files /dev/null and "b/website/public/static/demo/military/source/img/dev/002-\346\267\273\345\212\240\346\250\241\345\236\213\345\261\202.png" differ diff --git "a/website/public/static/demo/military/source/img/dev/003-\351\200\211\346\213\251\346\250\241\345\236\213\346\225\260\346\215\256.png" "b/website/public/static/demo/military/source/img/dev/003-\351\200\211\346\213\251\346\250\241\345\236\213\346\225\260\346\215\256.png" new file mode 100644 index 000000000..ef9228e4a Binary files /dev/null and "b/website/public/static/demo/military/source/img/dev/003-\351\200\211\346\213\251\346\250\241\345\236\213\346\225\260\346\215\256.png" differ diff --git "a/website/public/static/demo/military/source/img/dev/004-\346\230\276\347\244\272\346\250\241\345\236\213.png" "b/website/public/static/demo/military/source/img/dev/004-\346\230\276\347\244\272\346\250\241\345\236\213.png" new file mode 100644 index 000000000..5eb934392 Binary files /dev/null and "b/website/public/static/demo/military/source/img/dev/004-\346\230\276\347\244\272\346\250\241\345\236\213.png" differ diff --git "a/website/public/static/demo/military/source/img/dev/005-\351\200\211\346\213\251\346\250\241\345\236\213\345\261\236\346\200\247.png" "b/website/public/static/demo/military/source/img/dev/005-\351\200\211\346\213\251\346\250\241\345\236\213\345\261\236\346\200\247.png" new file mode 100644 index 000000000..e1ab5f562 Binary files /dev/null and "b/website/public/static/demo/military/source/img/dev/005-\351\200\211\346\213\251\346\250\241\345\236\213\345\261\236\346\200\247.png" differ diff --git "a/website/public/static/demo/military/source/img/dev/006-\350\256\276\347\275\256\346\270\262\346\237\223\346\226\271\345\274\217.png" "b/website/public/static/demo/military/source/img/dev/006-\350\256\276\347\275\256\346\270\262\346\237\223\346\226\271\345\274\217.png" new file mode 100644 index 000000000..8042b7a97 Binary files /dev/null and "b/website/public/static/demo/military/source/img/dev/006-\350\256\276\347\275\256\346\270\262\346\237\223\346\226\271\345\274\217.png" differ diff --git "a/website/public/static/demo/military/source/img/dev/007-\347\224\237\346\210\220M3D\347\274\223\345\255\230.png" "b/website/public/static/demo/military/source/img/dev/007-\347\224\237\346\210\220M3D\347\274\223\345\255\230.png" new file mode 100644 index 000000000..46c43c4e0 Binary files /dev/null and "b/website/public/static/demo/military/source/img/dev/007-\347\224\237\346\210\220M3D\347\274\223\345\255\230.png" differ diff --git "a/website/public/static/demo/military/source/img/dev/008-\351\205\215\347\275\256M3D\347\274\223\345\255\230\345\217\202\346\225\260.png" "b/website/public/static/demo/military/source/img/dev/008-\351\205\215\347\275\256M3D\347\274\223\345\255\230\345\217\202\346\225\260.png" new file mode 100644 index 000000000..aed16e932 Binary files /dev/null and "b/website/public/static/demo/military/source/img/dev/008-\351\205\215\347\275\256M3D\347\274\223\345\255\230\345\217\202\346\225\260.png" differ diff --git "a/website/public/static/demo/military/source/img/dev/009-\347\247\273\351\231\244\345\233\276\345\261\202.png" "b/website/public/static/demo/military/source/img/dev/009-\347\247\273\351\231\244\345\233\276\345\261\202.png" new file mode 100644 index 000000000..935c20864 Binary files /dev/null and "b/website/public/static/demo/military/source/img/dev/009-\347\247\273\351\231\244\345\233\276\345\261\202.png" differ diff --git "a/website/public/static/demo/military/source/img/dev/010-\346\267\273\345\212\240\346\250\241\345\236\213\347\274\223\345\255\230\345\233\276\345\261\202.png" "b/website/public/static/demo/military/source/img/dev/010-\346\267\273\345\212\240\346\250\241\345\236\213\347\274\223\345\255\230\345\233\276\345\261\202.png" new file mode 100644 index 000000000..054950ec6 Binary files /dev/null and "b/website/public/static/demo/military/source/img/dev/010-\346\267\273\345\212\240\346\250\241\345\236\213\347\274\223\345\255\230\345\233\276\345\261\202.png" differ diff --git "a/website/public/static/demo/military/source/img/dev/011-\351\200\211\346\213\251M3D\347\274\223\345\255\230\346\226\207\344\273\266.png" "b/website/public/static/demo/military/source/img/dev/011-\351\200\211\346\213\251M3D\347\274\223\345\255\230\346\226\207\344\273\266.png" new file mode 100644 index 000000000..b45a0c4ea Binary files /dev/null and "b/website/public/static/demo/military/source/img/dev/011-\351\200\211\346\213\251M3D\347\274\223\345\255\230\346\226\207\344\273\266.png" differ diff --git "a/website/public/static/demo/military/source/img/dev/012-M3D\347\274\223\345\255\230\346\230\276\347\244\272\346\225\210\346\236\234.png" "b/website/public/static/demo/military/source/img/dev/012-M3D\347\274\223\345\255\230\346\230\276\347\244\272\346\225\210\346\236\234.png" new file mode 100644 index 000000000..7f2ebfa57 Binary files /dev/null and "b/website/public/static/demo/military/source/img/dev/012-M3D\347\274\223\345\255\230\346\230\276\347\244\272\346\225\210\346\236\234.png" differ diff --git "a/website/public/static/demo/military/source/img/dev/013-\344\277\235\345\255\230\344\270\211\347\273\264\345\234\260\345\233\276\346\226\207\346\241\243.png" "b/website/public/static/demo/military/source/img/dev/013-\344\277\235\345\255\230\344\270\211\347\273\264\345\234\260\345\233\276\346\226\207\346\241\243.png" new file mode 100644 index 000000000..b9982257d Binary files /dev/null and "b/website/public/static/demo/military/source/img/dev/013-\344\277\235\345\255\230\344\270\211\347\273\264\345\234\260\345\233\276\346\226\207\346\241\243.png" differ diff --git "a/website/public/static/demo/military/source/img/dev/014-\347\231\273\345\275\225MapGIS Server Manager.png" "b/website/public/static/demo/military/source/img/dev/014-\347\231\273\345\275\225MapGIS Server Manager.png" new file mode 100644 index 000000000..ee7a0dc5e Binary files /dev/null and "b/website/public/static/demo/military/source/img/dev/014-\347\231\273\345\275\225MapGIS Server Manager.png" differ diff --git "a/website/public/static/demo/military/source/img/dev/015-\345\217\221\345\270\203\344\270\211\347\273\264\345\234\260\345\233\276\346\226\207\346\241\243.png" "b/website/public/static/demo/military/source/img/dev/015-\345\217\221\345\270\203\344\270\211\347\273\264\345\234\260\345\233\276\346\226\207\346\241\243.png" new file mode 100644 index 000000000..140dcd466 Binary files /dev/null and "b/website/public/static/demo/military/source/img/dev/015-\345\217\221\345\270\203\344\270\211\347\273\264\345\234\260\345\233\276\346\226\207\346\241\243.png" differ diff --git "a/website/public/static/demo/military/source/img/dev/016-\350\216\267\345\217\226\344\270\211\347\273\264\345\234\260\345\233\276\350\256\277\351\227\256\345\237\272\345\234\260\345\235\200.png" "b/website/public/static/demo/military/source/img/dev/016-\350\216\267\345\217\226\344\270\211\347\273\264\345\234\260\345\233\276\350\256\277\351\227\256\345\237\272\345\234\260\345\235\200.png" new file mode 100644 index 000000000..08c03c2fe Binary files /dev/null and "b/website/public/static/demo/military/source/img/dev/016-\350\216\267\345\217\226\344\270\211\347\273\264\345\234\260\345\233\276\350\256\277\351\227\256\345\237\272\345\234\260\345\235\200.png" differ diff --git "a/website/public/static/demo/military/source/img/dev/017-\345\244\215\345\210\266\345\237\272\345\234\260\345\235\200.png" "b/website/public/static/demo/military/source/img/dev/017-\345\244\215\345\210\266\345\237\272\345\234\260\345\235\200.png" new file mode 100644 index 000000000..cdbaf53a3 Binary files /dev/null and "b/website/public/static/demo/military/source/img/dev/017-\345\244\215\345\210\266\345\237\272\345\234\260\345\235\200.png" differ diff --git "a/website/public/static/demo/military/source/img/dev/1011-\345\244\251\345\234\260\345\233\276.png" "b/website/public/static/demo/military/source/img/dev/1011-\345\244\251\345\234\260\345\233\276.png" new file mode 100644 index 000000000..ba53d1319 Binary files /dev/null and "b/website/public/static/demo/military/source/img/dev/1011-\345\244\251\345\234\260\345\233\276.png" differ diff --git "a/website/public/static/demo/military/source/img/dev/1012-\347\231\276\345\272\246\345\234\260\345\233\276.png" "b/website/public/static/demo/military/source/img/dev/1012-\347\231\276\345\272\246\345\234\260\345\233\276.png" new file mode 100644 index 000000000..7ea5d8062 Binary files /dev/null and "b/website/public/static/demo/military/source/img/dev/1012-\347\231\276\345\272\246\345\234\260\345\233\276.png" differ diff --git "a/website/public/static/demo/military/source/img/dev/1013-\351\253\230\345\276\267\345\234\260\345\233\276.png" "b/website/public/static/demo/military/source/img/dev/1013-\351\253\230\345\276\267\345\234\260\345\233\276.png" new file mode 100644 index 000000000..fd50087ab Binary files /dev/null and "b/website/public/static/demo/military/source/img/dev/1013-\351\253\230\345\276\267\345\234\260\345\233\276.png" differ diff --git "a/website/public/static/demo/military/source/img/dev/1014-OpenWeather\345\234\260\345\233\276.png" "b/website/public/static/demo/military/source/img/dev/1014-OpenWeather\345\234\260\345\233\276.png" new file mode 100644 index 000000000..d64d836f9 Binary files /dev/null and "b/website/public/static/demo/military/source/img/dev/1014-OpenWeather\345\234\260\345\233\276.png" differ diff --git "a/website/public/static/demo/military/source/img/dev/1021-M3D\346\231\257\350\247\202\346\250\241\345\236\213.png" "b/website/public/static/demo/military/source/img/dev/1021-M3D\346\231\257\350\247\202\346\250\241\345\236\213.png" new file mode 100644 index 000000000..45184098f Binary files /dev/null and "b/website/public/static/demo/military/source/img/dev/1021-M3D\346\231\257\350\247\202\346\250\241\345\236\213.png" differ diff --git "a/website/public/static/demo/military/source/img/dev/1031-\344\272\214\347\273\264\345\234\260\345\233\276\346\226\207\346\241\243.png" "b/website/public/static/demo/military/source/img/dev/1031-\344\272\214\347\273\264\345\234\260\345\233\276\346\226\207\346\241\243.png" new file mode 100644 index 000000000..dca4c872a Binary files /dev/null and "b/website/public/static/demo/military/source/img/dev/1031-\344\272\214\347\273\264\345\234\260\345\233\276\346\226\207\346\241\243.png" differ diff --git "a/website/public/static/demo/military/source/img/dev/1032-\344\272\214\347\273\264\347\223\246\347\211\207.png" "b/website/public/static/demo/military/source/img/dev/1032-\344\272\214\347\273\264\347\223\246\347\211\207.png" new file mode 100644 index 000000000..3887345bd Binary files /dev/null and "b/website/public/static/demo/military/source/img/dev/1032-\344\272\214\347\273\264\347\223\246\347\211\207.png" differ diff --git "a/website/public/static/demo/military/source/img/dev/1033-\344\270\211\347\273\264\345\234\260\345\275\242.png" "b/website/public/static/demo/military/source/img/dev/1033-\344\270\211\347\273\264\345\234\260\345\275\242.png" new file mode 100644 index 000000000..b63f6279f Binary files /dev/null and "b/website/public/static/demo/military/source/img/dev/1033-\344\270\211\347\273\264\345\234\260\345\275\242.png" differ diff --git a/website/public/static/demo/military/source/img/dev/1041-WMS.png b/website/public/static/demo/military/source/img/dev/1041-WMS.png new file mode 100644 index 000000000..ddd0abdf0 Binary files /dev/null and b/website/public/static/demo/military/source/img/dev/1041-WMS.png differ diff --git a/website/public/static/demo/military/source/img/dev/1042-WMTS.png b/website/public/static/demo/military/source/img/dev/1042-WMTS.png new file mode 100644 index 000000000..633344bc6 Binary files /dev/null and b/website/public/static/demo/military/source/img/dev/1042-WMTS.png differ diff --git a/website/public/static/demo/military/source/img/dev/1051-data-3Dtiles.png b/website/public/static/demo/military/source/img/dev/1051-data-3Dtiles.png new file mode 100644 index 000000000..461e08b7c Binary files /dev/null and b/website/public/static/demo/military/source/img/dev/1051-data-3Dtiles.png differ diff --git a/website/public/static/demo/military/source/img/dev/1052-data-addgltf.png b/website/public/static/demo/military/source/img/dev/1052-data-addgltf.png new file mode 100644 index 000000000..ea2dc8ca1 Binary files /dev/null and b/website/public/static/demo/military/source/img/dev/1052-data-addgltf.png differ diff --git a/website/public/static/demo/military/source/img/dev/1053-data-addgltfs.png b/website/public/static/demo/military/source/img/dev/1053-data-addgltfs.png new file mode 100644 index 000000000..c6b67fc29 Binary files /dev/null and b/website/public/static/demo/military/source/img/dev/1053-data-addgltfs.png differ diff --git a/website/public/static/demo/military/source/img/dev/1054-data-czml.png b/website/public/static/demo/military/source/img/dev/1054-data-czml.png new file mode 100644 index 000000000..74c375b90 Binary files /dev/null and b/website/public/static/demo/military/source/img/dev/1054-data-czml.png differ diff --git a/website/public/static/demo/military/source/img/dev/1055-data-geojson.png b/website/public/static/demo/military/source/img/dev/1055-data-geojson.png new file mode 100644 index 000000000..ad877c503 Binary files /dev/null and b/website/public/static/demo/military/source/img/dev/1055-data-geojson.png differ diff --git a/website/public/static/demo/military/source/img/dev/1056-data-kml.png b/website/public/static/demo/military/source/img/dev/1056-data-kml.png new file mode 100644 index 000000000..2dbc93cea Binary files /dev/null and b/website/public/static/demo/military/source/img/dev/1056-data-kml.png differ diff --git a/website/public/static/demo/military/source/img/dev/1057-data-kmz.png b/website/public/static/demo/military/source/img/dev/1057-data-kmz.png new file mode 100644 index 000000000..b96d55eca Binary files /dev/null and b/website/public/static/demo/military/source/img/dev/1057-data-kmz.png differ diff --git a/website/public/static/demo/military/source/img/dev/1058-data-img1.png b/website/public/static/demo/military/source/img/dev/1058-data-img1.png new file mode 100644 index 000000000..ec088b157 Binary files /dev/null and b/website/public/static/demo/military/source/img/dev/1058-data-img1.png differ diff --git a/website/public/static/demo/military/source/img/dev/1059-data-img2.png b/website/public/static/demo/military/source/img/dev/1059-data-img2.png new file mode 100644 index 000000000..b6ac1a0a5 Binary files /dev/null and b/website/public/static/demo/military/source/img/dev/1059-data-img2.png differ diff --git a/website/public/static/demo/military/source/img/dev/1101-scene-showPosition.png b/website/public/static/demo/military/source/img/dev/1101-scene-showPosition.png new file mode 100644 index 000000000..b8a5d80ad Binary files /dev/null and b/website/public/static/demo/military/source/img/dev/1101-scene-showPosition.png differ diff --git a/website/public/static/demo/military/source/img/dev/1102-scene-sceneMode.png b/website/public/static/demo/military/source/img/dev/1102-scene-sceneMode.png new file mode 100644 index 000000000..d1736ab61 Binary files /dev/null and b/website/public/static/demo/military/source/img/dev/1102-scene-sceneMode.png differ diff --git a/website/public/static/demo/military/source/img/dev/1103-scene-operation.png b/website/public/static/demo/military/source/img/dev/1103-scene-operation.png new file mode 100644 index 000000000..9c0643892 Binary files /dev/null and b/website/public/static/demo/military/source/img/dev/1103-scene-operation.png differ diff --git a/website/public/static/demo/military/source/img/dev/1104-scene-fly.png b/website/public/static/demo/military/source/img/dev/1104-scene-fly.png new file mode 100644 index 000000000..9539d7998 Binary files /dev/null and b/website/public/static/demo/military/source/img/dev/1104-scene-fly.png differ diff --git a/website/public/static/demo/military/source/img/dev/1201-drawGraphic-point.png b/website/public/static/demo/military/source/img/dev/1201-drawGraphic-point.png new file mode 100644 index 000000000..01e34afd7 Binary files /dev/null and b/website/public/static/demo/military/source/img/dev/1201-drawGraphic-point.png differ diff --git a/website/public/static/demo/military/source/img/dev/1202-drawGraphic-line.png b/website/public/static/demo/military/source/img/dev/1202-drawGraphic-line.png new file mode 100644 index 000000000..e204c60e6 Binary files /dev/null and b/website/public/static/demo/military/source/img/dev/1202-drawGraphic-line.png differ diff --git a/website/public/static/demo/military/source/img/dev/1202-drawGraphic-terrainline.png b/website/public/static/demo/military/source/img/dev/1202-drawGraphic-terrainline.png new file mode 100644 index 000000000..ca1855a0f Binary files /dev/null and b/website/public/static/demo/military/source/img/dev/1202-drawGraphic-terrainline.png differ diff --git a/website/public/static/demo/military/source/img/dev/1203-drawGraphic-polygon.png b/website/public/static/demo/military/source/img/dev/1203-drawGraphic-polygon.png new file mode 100644 index 000000000..916347535 Binary files /dev/null and b/website/public/static/demo/military/source/img/dev/1203-drawGraphic-polygon.png differ diff --git a/website/public/static/demo/military/source/img/dev/1203-drawGraphic-terrainpolygon.png b/website/public/static/demo/military/source/img/dev/1203-drawGraphic-terrainpolygon.png new file mode 100644 index 000000000..32efc727c Binary files /dev/null and b/website/public/static/demo/military/source/img/dev/1203-drawGraphic-terrainpolygon.png differ diff --git a/website/public/static/demo/military/source/img/dev/1204-drawGraphic-groundline.png b/website/public/static/demo/military/source/img/dev/1204-drawGraphic-groundline.png new file mode 100644 index 000000000..ecc7d5456 Binary files /dev/null and b/website/public/static/demo/military/source/img/dev/1204-drawGraphic-groundline.png differ diff --git a/website/public/static/demo/military/source/img/dev/1205-drawGraphic-groundpolygon.png b/website/public/static/demo/military/source/img/dev/1205-drawGraphic-groundpolygon.png new file mode 100644 index 000000000..296347671 Binary files /dev/null and b/website/public/static/demo/military/source/img/dev/1205-drawGraphic-groundpolygon.png differ diff --git a/website/public/static/demo/military/source/img/dev/1206-drawGraphic-hole.png b/website/public/static/demo/military/source/img/dev/1206-drawGraphic-hole.png new file mode 100644 index 000000000..ab80bee06 Binary files /dev/null and b/website/public/static/demo/military/source/img/dev/1206-drawGraphic-hole.png differ diff --git a/website/public/static/demo/military/source/img/dev/1207-drawGraphic-interaction.png b/website/public/static/demo/military/source/img/dev/1207-drawGraphic-interaction.png new file mode 100644 index 000000000..24b96b885 Binary files /dev/null and b/website/public/static/demo/military/source/img/dev/1207-drawGraphic-interaction.png differ diff --git a/website/public/static/demo/military/source/img/dev/1208-drawGraphic-icon.png b/website/public/static/demo/military/source/img/dev/1208-drawGraphic-icon.png new file mode 100644 index 000000000..15105c389 Binary files /dev/null and b/website/public/static/demo/military/source/img/dev/1208-drawGraphic-icon.png differ diff --git a/website/public/static/demo/military/source/img/dev/1209-drawGraphic-label.png b/website/public/static/demo/military/source/img/dev/1209-drawGraphic-label.png new file mode 100644 index 000000000..caf857727 Binary files /dev/null and b/website/public/static/demo/military/source/img/dev/1209-drawGraphic-label.png differ diff --git a/website/public/static/demo/military/source/img/dev/1210-drawGraphic-labelicon.png b/website/public/static/demo/military/source/img/dev/1210-drawGraphic-labelicon.png new file mode 100644 index 000000000..2a4b83c6f Binary files /dev/null and b/website/public/static/demo/military/source/img/dev/1210-drawGraphic-labelicon.png differ diff --git a/website/public/static/demo/military/source/img/dev/1211-drawGraphic-popup.png b/website/public/static/demo/military/source/img/dev/1211-drawGraphic-popup.png new file mode 100644 index 000000000..1bbd13fc8 Binary files /dev/null and b/website/public/static/demo/military/source/img/dev/1211-drawGraphic-popup.png differ diff --git a/website/public/static/demo/military/source/img/dev/1301-query-2dByAtt.png b/website/public/static/demo/military/source/img/dev/1301-query-2dByAtt.png new file mode 100644 index 000000000..bbf65c81f Binary files /dev/null and b/website/public/static/demo/military/source/img/dev/1301-query-2dByAtt.png differ diff --git a/website/public/static/demo/military/source/img/dev/1302-query-geomquery.png b/website/public/static/demo/military/source/img/dev/1302-query-geomquery.png new file mode 100644 index 000000000..bb334f9c6 Binary files /dev/null and b/website/public/static/demo/military/source/img/dev/1302-query-geomquery.png differ diff --git a/website/public/static/demo/military/source/img/dev/1303-query-m3dquery.png b/website/public/static/demo/military/source/img/dev/1303-query-m3dquery.png new file mode 100644 index 000000000..36169c0f5 Binary files /dev/null and b/website/public/static/demo/military/source/img/dev/1303-query-m3dquery.png differ diff --git a/website/public/static/demo/military/source/img/dev/1401-analysis-visibility.png b/website/public/static/demo/military/source/img/dev/1401-analysis-visibility.png new file mode 100644 index 000000000..70d7deb2a Binary files /dev/null and b/website/public/static/demo/military/source/img/dev/1401-analysis-visibility.png differ diff --git a/website/public/static/demo/military/source/img/dev/1402-analysis-dynamiccut.png b/website/public/static/demo/military/source/img/dev/1402-analysis-dynamiccut.png new file mode 100644 index 000000000..15cf25cfe Binary files /dev/null and b/website/public/static/demo/military/source/img/dev/1402-analysis-dynamiccut.png differ diff --git a/website/public/static/demo/military/source/img/dev/1403-analysis-excavate.png b/website/public/static/demo/military/source/img/dev/1403-analysis-excavate.png new file mode 100644 index 000000000..9ada00cd0 Binary files /dev/null and b/website/public/static/demo/military/source/img/dev/1403-analysis-excavate.png differ diff --git a/website/public/static/demo/military/source/img/dev/1404-analysis-rollershutters.png b/website/public/static/demo/military/source/img/dev/1404-analysis-rollershutters.png new file mode 100644 index 000000000..2124a7cee Binary files /dev/null and b/website/public/static/demo/military/source/img/dev/1404-analysis-rollershutters.png differ diff --git a/website/public/static/demo/military/source/img/dev/1405-analysis-floor.png b/website/public/static/demo/military/source/img/dev/1405-analysis-floor.png new file mode 100644 index 000000000..40b77ba3a Binary files /dev/null and b/website/public/static/demo/military/source/img/dev/1405-analysis-floor.png differ diff --git a/website/public/static/demo/military/source/img/dev/1406-analysis-visiblerange.png b/website/public/static/demo/military/source/img/dev/1406-analysis-visiblerange.png new file mode 100644 index 000000000..6c6bec177 Binary files /dev/null and b/website/public/static/demo/military/source/img/dev/1406-analysis-visiblerange.png differ diff --git a/website/public/static/demo/military/source/img/dev/1407-analysis-skyline.png b/website/public/static/demo/military/source/img/dev/1407-analysis-skyline.png new file mode 100644 index 000000000..325f673b5 Binary files /dev/null and b/website/public/static/demo/military/source/img/dev/1407-analysis-skyline.png differ diff --git a/website/public/static/demo/military/source/img/dev/1408-analysis-modelflatten.png b/website/public/static/demo/military/source/img/dev/1408-analysis-modelflatten.png new file mode 100644 index 000000000..7bdc59afd Binary files /dev/null and b/website/public/static/demo/military/source/img/dev/1408-analysis-modelflatten.png differ diff --git a/website/public/static/demo/military/source/img/dev/1409-analysis-aspectAnalysis.png b/website/public/static/demo/military/source/img/dev/1409-analysis-aspectAnalysis.png new file mode 100644 index 000000000..c741d7e9f Binary files /dev/null and b/website/public/static/demo/military/source/img/dev/1409-analysis-aspectAnalysis.png differ diff --git a/website/public/static/demo/military/source/img/dev/1410-analysis-slopeAnalysis.png b/website/public/static/demo/military/source/img/dev/1410-analysis-slopeAnalysis.png new file mode 100644 index 000000000..336c39f5d Binary files /dev/null and b/website/public/static/demo/military/source/img/dev/1410-analysis-slopeAnalysis.png differ diff --git a/website/public/static/demo/military/source/img/dev/1411-analysis-cube.png b/website/public/static/demo/military/source/img/dev/1411-analysis-cube.png new file mode 100644 index 000000000..9cde6219d Binary files /dev/null and b/website/public/static/demo/military/source/img/dev/1411-analysis-cube.png differ diff --git a/website/public/static/demo/military/source/img/dev/1412-analysis-animation.png b/website/public/static/demo/military/source/img/dev/1412-analysis-animation.png new file mode 100644 index 000000000..e449989d8 Binary files /dev/null and b/website/public/static/demo/military/source/img/dev/1412-analysis-animation.png differ diff --git a/website/public/static/demo/military/source/img/dev/1501-clientView-rain.png b/website/public/static/demo/military/source/img/dev/1501-clientView-rain.png new file mode 100644 index 000000000..676cf336f Binary files /dev/null and b/website/public/static/demo/military/source/img/dev/1501-clientView-rain.png differ diff --git a/website/public/static/demo/military/source/img/dev/1502-clientView-snow.png b/website/public/static/demo/military/source/img/dev/1502-clientView-snow.png new file mode 100644 index 000000000..ee54abb08 Binary files /dev/null and b/website/public/static/demo/military/source/img/dev/1502-clientView-snow.png differ diff --git a/website/public/static/demo/military/source/img/dev/1503-clientView-fog.png b/website/public/static/demo/military/source/img/dev/1503-clientView-fog.png new file mode 100644 index 000000000..73fff508f Binary files /dev/null and b/website/public/static/demo/military/source/img/dev/1503-clientView-fog.png differ diff --git a/website/public/static/demo/military/source/img/dev/1504-clientView-fire.png b/website/public/static/demo/military/source/img/dev/1504-clientView-fire.png new file mode 100644 index 000000000..9ea10dc91 Binary files /dev/null and b/website/public/static/demo/military/source/img/dev/1504-clientView-fire.png differ diff --git a/website/public/static/demo/military/source/img/dev/1505-clientView-smoke.png b/website/public/static/demo/military/source/img/dev/1505-clientView-smoke.png new file mode 100644 index 000000000..2101f5d30 Binary files /dev/null and b/website/public/static/demo/military/source/img/dev/1505-clientView-smoke.png differ diff --git a/website/public/static/demo/military/source/img/dev/1601-track-flow.png b/website/public/static/demo/military/source/img/dev/1601-track-flow.png new file mode 100644 index 000000000..16528746a Binary files /dev/null and b/website/public/static/demo/military/source/img/dev/1601-track-flow.png differ diff --git a/website/public/static/demo/military/source/img/dev/1602-track-dynamicflight.png b/website/public/static/demo/military/source/img/dev/1602-track-dynamicflight.png new file mode 100644 index 000000000..d4501d942 Binary files /dev/null and b/website/public/static/demo/military/source/img/dev/1602-track-dynamicflight.png differ diff --git a/website/public/static/demo/military/source/img/dev/1701-clientView-heatmap.png b/website/public/static/demo/military/source/img/dev/1701-clientView-heatmap.png new file mode 100644 index 000000000..94362e27b Binary files /dev/null and b/website/public/static/demo/military/source/img/dev/1701-clientView-heatmap.png differ diff --git a/website/public/static/demo/military/source/img/dev/1702-clientView-dynamiccircle.png b/website/public/static/demo/military/source/img/dev/1702-clientView-dynamiccircle.png new file mode 100644 index 000000000..555eb3574 Binary files /dev/null and b/website/public/static/demo/military/source/img/dev/1702-clientView-dynamiccircle.png differ diff --git a/website/public/static/demo/military/source/img/dev/1703-clientView-radarscanning.png b/website/public/static/demo/military/source/img/dev/1703-clientView-radarscanning.png new file mode 100644 index 000000000..e854bce4c Binary files /dev/null and b/website/public/static/demo/military/source/img/dev/1703-clientView-radarscanning.png differ diff --git a/website/public/static/demo/military/source/img/dev/1801-echarts-air.png b/website/public/static/demo/military/source/img/dev/1801-echarts-air.png new file mode 100644 index 000000000..7d181cc79 Binary files /dev/null and b/website/public/static/demo/military/source/img/dev/1801-echarts-air.png differ diff --git a/website/public/static/demo/military/source/img/dev/1901-mapv-heater.png b/website/public/static/demo/military/source/img/dev/1901-mapv-heater.png new file mode 100644 index 000000000..8eaf91e5a Binary files /dev/null and b/website/public/static/demo/military/source/img/dev/1901-mapv-heater.png differ diff --git a/website/public/static/demo/military/source/img/dev/2001-clientAnalysis-buffer.png b/website/public/static/demo/military/source/img/dev/2001-clientAnalysis-buffer.png new file mode 100644 index 000000000..3acb1e9b4 Binary files /dev/null and b/website/public/static/demo/military/source/img/dev/2001-clientAnalysis-buffer.png differ diff --git a/website/public/static/demo/military/source/img/turf.png b/website/public/static/demo/military/source/img/turf.png new file mode 100644 index 000000000..ffeb503cf Binary files /dev/null and b/website/public/static/demo/military/source/img/turf.png differ diff --git "a/website/public/static/demo/military/source/img/\344\272\247\345\223\201\346\236\266\346\236\204.png" "b/website/public/static/demo/military/source/img/\344\272\247\345\223\201\346\236\266\346\236\204.png" new file mode 100644 index 000000000..212630b42 Binary files /dev/null and "b/website/public/static/demo/military/source/img/\344\272\247\345\223\201\346\236\266\346\236\204.png" differ diff --git "a/website/public/static/demo/military/source/img/\345\274\200\345\217\221\345\272\223.png" "b/website/public/static/demo/military/source/img/\345\274\200\345\217\221\345\272\223.png" new file mode 100644 index 000000000..d17364ff7 Binary files /dev/null and "b/website/public/static/demo/military/source/img/\345\274\200\345\217\221\345\272\223.png" differ diff --git "a/website/public/static/demo/military/source/img/\350\266\205\345\233\276\345\212\237\350\203\275\346\250\241\345\235\227.png" "b/website/public/static/demo/military/source/img/\350\266\205\345\233\276\345\212\237\350\203\275\346\250\241\345\235\227.png" new file mode 100644 index 000000000..1e116ac8e Binary files /dev/null and "b/website/public/static/demo/military/source/img/\350\266\205\345\233\276\345\212\237\350\203\275\346\250\241\345\235\227.png" differ diff --git a/website/public/static/demo/military/source/produce_cesium.md b/website/public/static/demo/military/source/produce_cesium.md new file mode 100644 index 000000000..82a3476c3 --- /dev/null +++ b/website/public/static/demo/military/source/produce_cesium.md @@ -0,0 +1,289 @@ +## 产品介绍 + +    MapGIS 3DClient for WebGL，即MapGIS Client for JavaScript（Cesium），是一款基于开源三维地图框架Cesium开发的跨浏览器端二次开发产品，零插件、简单、易开发、易扩展，用户可以通过该产品轻松构建功能强大的城市、城市群级别的全空间真三维Web应用。 + +
+ 产品架构 +
+
MapGIS Client for JavaScript产品架构图
+
+
+ + +    **MapGIS Client for JavaScript（Cesium） SDK**是一套基于Cesium的三维WebGIS开发库，无缝对接MapGIS云存储、云GIS服务器、云应用等产品，在原生Cesium的基础上进行扩展，融合了专业的MapGIS全空间GIS、大数据GIS、智能GIS能力，为全空间二三维一体化Web应用提供JavaScript功能接口，可帮助您快速构建三维WebGIS应用。 + +> MapGIS Client for JavaScript (Cesium) SDK包含了三维WebGIS开发所需的开发库、API、示例等，结合司马云开发世界资源中心的配套开发资源，以及云听社区、开源社区GitHub 、Gitee，助力开发者高效开发。 + +### Cesium + +    Cesium是一个用于显示三维地球和地图的开源JavaScript库，是一个使用WebGL的地图引擎。支持球面、平面模式的二三维地图展示，提供良好的三维图形标绘与交互功能，以及场景模拟表达能力，具有最佳的性能、精度、视觉质量和易用性。从航空航天到智能城市再到无人机，各个行业的开发者都在使用Cesium来创建交互式Web应用程序，来共享动态地理空间数据。使用Cesium可显示海量三维模型数据、影像数据、地形高程数据、矢量数据等，三维模型格式支持gltf、三维瓦片模型格式支持3d tiles；矢量数据支持geojson、topojson格式；影像数据支持wmts等；高程支持STK格式。 + +>详情请参考Cesium官网地址 + +## 产品特点 + +### 全空间的数据融合能力 + +    提供地上地下、室内室外、空中地表全空间多源数据集成，从宏观到微观展示城市空间全要素。融合倾斜摄影、BIM、激光点云、物联感知数据、RTSP视频数据等多源异构数据，多角度、多粒度全面展示物理空间本源。 + +### 大体量数据承载及渲染 + +- 通过建立LOD、多级缓存、数据高效压缩等多种优化措施，支持大数据量地形可视化，以及多层影像数据的叠加显示。 +- 通过多级LOD技术，视锥体裁剪、可视范围调度等技术支持海量三维模型数据的快速渲染。 +- 支持海量三维数据网络应用数据交换格式（M3D），对海量三维模型数据进行网格划分与分层组织，采用流式传输模式，实现多端一体的高效解析和渲染。 + +### 强大的空间数据三维分析能力 + +    全面支持离散空间的三维数据模型的分析与计算，包括通视分析、可视域分析、动态可视域分析、开挖分析、透明地表分析、动态剖切分析、天际线分析、日照分析、阴影率分析、模型爆炸分析、X射线分析等，通过三维场景的可视化，展示三维模型之间的空间关系，为城市规划与监管、地下空间利用与开发提供科学依据和辅助决策。 + +### 炫酷的大数据客户端可视化 + +- 通过开源技术（EchartGL、MapV、d3等），提供蜂窝图、热力图、聚类、密度、时空立方体等多种客户端可视化表达方式。 +- 支持大体量的实时数据客户端绘制渲染，广泛应用于车联网、物联网，实现轨迹跟踪、轨迹渲染、实时视频投影等应用场景。 +- 于SVG实现大数据专题图的无损缩放和动态交互 + + + +## 资源下载 + +    MapGIS Client for JavaScript为开源产品，可从司马云-云开发世界下载正式发布的产品包，也可从开源社区（Gitee、GitHub）直接拉取。 + +    MapGIS官方下载地址：http://smaryun.com/dev/download_detail.html#/download828 + +    GitHub 托管地址：https://github.com/MapGIS/WebClient-JavaScript + +    Gitee 托管地址：https://gitee.com/osmapgis/WebClient-JavaScript + + +## 开发环境 + +    MapGIS Client for JavaScript产品已开源不收取费用，开发者可自行下载开发资源。 +    基于MapGIS服务器产品的WebGIS系统应用开发，__开发免费，商用收费__。对系统硬件环境没有特别要求，操作系统支持Microsoft Windows系列，包括Win7、Win8、Win10、Win Server2003、Win Server2008、Win Server2012、Win XP等，以及Linux 系列，包括redHat、ubuntu、centos等操作系统，均支持32位与64位机器。一般需要依次安装配置下列软件环境： + +### MapGIS开发平台： + +* MapGIS IGServer .NET版：获取MapGIS IGServer .NET x64 for Windows开发包，软件安装详细说明请参见《MapGIS IGServer .NET安装使用说明》； +* MapGIS IGServer（九州）版：九州版服务器产品暂无开发版本，请试用正式版MapGIS IGServer(九州)安装包，详细安装说明请参见《MapGIS IGServer（九州）操作手册》。 + +### 集成开发环境： +* .NET版：安装Microsoft Visual Studio（2015及以上）、Visual StudioCode等IDE； +* Java版：安装JDK，Eclipse/MyEclipse、WebStorm等IDE。 + + +## 开发授权 + +    您可以通过访问司马云官方网站获得开发者授权。申请免费开发授权请看帮助中心目前提供免费云开发授权与硬KEY开发授权两种模式，开发者可结合实际应用需求选用。 +* 免费云开发授权需要在有网环境下使用 +* 硬KEY可在离线环境下完成授权。 + + +## 开发SDK + +### 开发包 + +    MapGIS Client for JavaScript（Cesium） SDK，含三维WebGIS开发所需的开发库、API、示例、文档等资源，均集成在MapGIS Client for JavaScript产品门户中。 + +### 开发库 + +    MapGIS Client for JavaScript （Cesium）为用户提供了专业的三维WebGIS 客户端开发库，同时对接大数据应用提供相关功能接口，旨在帮助用户快速构建内容丰富、响应迅速、美观流畅，具有良好用户体验的WebGIS系统应用。 + +| 开发库 | 说明 | +| ------------ | -------------- | +| webclient-cesium-plugins.min.js / webclient-cesium-plugins.js（可调试版）| WebGL开发库，基于cesium原生库扩展，对接云GIS服务器产品，支持三维场景操作管理、二三维地图可视化（M3D图层、OGC、互联网地图服务、MapGIS地图服务、通用数据等）、图形绘制、三维数据查询、三维空间分析、轨迹模拟、场景漫游，含场景特效、热力图、动态扫描圆等客户端可视化功能，以及对接大数据应用的客户端可视化与空间分析相关功能 | +| include-cesium-local.js | 二次开发引用库，在此引入了for WebGL的核心库webclient-cesium-plugins.min.js，cesium原生库，以及其他第三方库，同时提供了示例访问MapGIS IGServer服务器的配置 | + +
+ Cesium开发库 +
+
MapGIS Client for JavaScript（Cesium）开发库
+
+
+ +>核心库分别提供压缩版（webclient-cesium-plugins.min.js）与开发版（webclient-cesium-plugins.js）两个版本，min版一般在应用开发完成后发布部署阶段使用；二次开发阶段通常使用开发版，方便查阅与调试。 + +### 开发API + +    MapGIS Client for JavaScript为用户提供离在线API（应用程序编程接口），开发者可以通过API查找学习MapGIS提供的实现功能的方法。 + +- MapGIS Client for JavaScript（Cesium） API +- Cesium API（MapGIS扩展的Cesium参考） +- MapGIS IGServer REST API（服务端API参考） +- Cesium API（原生参考） + +### 开发示例 + +    MapGIS Client for JavaScript（Cesium）为用户提供了功能全面的接口示例与配套文档，支持离在线访问，源码与效果可共同展现，同时提供即时编辑与运行功能，可以帮助您进行高效开发。 + +- 在线使用：MapGIS Client for JavaScript （Cesium）示例 +- 离线使用：方式一，可在云开发世界下载MapGIS Client for JavaScript开发包，解压后按说明步骤发布即可；方式二，可通过开源社区拉取整套源码，然后编译运行，此略 + +
+ 开发示例 +
+
MapGIS Client for JavaScript（Cesium）开发示例
+
+ + +### 开发模式 + +    针对WebGIS应用开发，有以下几种开发模式： +- 方式一：基于MapGIS IGServer等云GIS服务器提供的服务资源，使用MapGIS Client for JavaScript二次开发库的核心库，采用传统开发方式-**H5原生JS方式**构建您的应用系统 +- 方式二：以H5原生JS开发方式为基础，遵循统一的开发标准规范，将应用开发拆分为“开发框架+功能插件”方式，并通过桥梁（标准的JSON配置文件）进行动态衔接，即“纵生”式开发方式 +- 方式三：采用**组件式Vue开发方式**，该方式将提供丰富的Vue组件资源，全面提升开发效率 + +## 功能模块 + +    MapGIS Client for JavaScript（Cesium）的**核心库**为**webclient-cesium-plugins.min.js**，是基于开源框架Cesium进行扩展，面向客户端Web三维应用进行全新封装的脚本库，提供访问云GIS服务器的数据、服务、资源的能力。包括2D矢量、2D瓦片、3D地形、M3D模型缓存等；支持第三方地图服务，包括Google、高德、百度、天地图、天地图WMTS、OpenWeather、吉威WMTS；支持通用数据加载，包括通用模型文件的单个或批量操作（KML、KMZ、CZML、GLTF、GeoJson）；支持添加、删除常规的点、线、面、图片、注记、PopUP等标绘功能；支持三维场景粒子特效、热力图、动态扫描圆等客户端可视化功能；重点提供丰富的三维分析功能，包括坡度坡向量测、洪水淹没模拟、挖填方计算、通视分析、可视域分析、天际线分析等功能。 + +### API 功能体系（导图） + +### API 结构说明 + +    MapGIS Client for JavaScript（Cesium）二次开发库的提供的开发接口如下图所示： + +
+ Cesium API结构 +
+
基于Cesium扩展的mapgis开发接口
+
+
+ + +## 产品更新 + +### V10.5.2.10 + +1. 功能新增 +- 实现模型压平功能,支持任意凸多边形的压平 +- 优化粒子特效：优化雨雪雾粒子效果，提升真实度；新增火焰、喷泉粒子特效、以及烟雾粒子特效 +- 提供解压M3D压缩数据流的功能，客户端支持将压缩的流进行高效解压，并渲染 + +2. 性能优化 +- 海量倾斜摄影数据缓存结构优化策略升级，提高网络传输效率以及前端渲染效率 +- 加载渲染亿级Las格式点云数据，帧率在15帧以上，交互流畅； +- 加载渲染亿级地质网格剖分结果数据，帧率在15帧以上，交互流畅； +- 加载渲染千万级三角网单个地质体数据，帧率在15帧以上，交互流畅； +- 加载渲染500平方公里以上倾斜模型，帧率在15帧以上，交互流畅； + +3. 站点维护 +- 示例说明文档美化 + + +### V10.5.0.10 + +1. 全面整合了Cesium等脚本库，代码模块化，采用最新的JavaScript ES6标准； +2. 提供Cesium开发库、示例、API，支持二三维数据可视化（含M3D、OGC、MapGIS地图服务、第三方地图服务等）、图形绘制、量算、模型漫游、三维查询与分析、场景特效，以及三维场景下的大数据可视化与分析等功能； +3. Cesium示例全面优化，提供配套示例说明文档与API； +4. 新增集成Echarts、MapV可视化库，支持在Web三维模式下实现大数据可视化、大数据分析功能； +5. 新增集成 Turf.js客户端空间分析库，提供Web三维客户端空间计算能力。 + + +## 相关产品 + + +> **面向Web应用开发，依赖MapGIS相关产品：** +> - **桌面端GIS工具产品**，MapGIS Desktop作为一个数据处理的桌面GIS工具，主要用于数据存储管理与地图制图；MapGIS 3D SceneBuilder主要用于地上景观模型快速构建；MapGIS 3D GeoModeler是地学建模工具，主要面向地下空间构建三维城市部件模型、地质体模型等； +> - **云GIS服务器产品-MapGIS IGServer、MapGIS IGServer-X、MapGIS IGServer-S**，作为云GIS服务器为Web应用提供高性能GIS、大数据GIS、人工智能GIS三大方向的地图、服务与资源； +> - **云存储产品-MapGIS DataStore**与MapGIS SDE无缝融合，为Web应用提供强大的数据层支撑。 + +### MapGIS Desktop + +
+ +MapGIS Desktop高级版 + + + +MapGIS Desktop（九州） + +
+ +> - **MapGIS Desktop**是一个专业的二三维一体化桌面GIS产品，具备强大的数据管理与编辑、数据制图与可视化、空间分析与影像处理、三维可视化与分析等能力，通过“框架+插件”的思想构建，支持按需定制。 + +> - **MapGIS Desktop 九州**是一个专业的跨平台桌面GIS产品，基于跨平台微内核构建，全面适配全国产化环境。在原有MapGIS Desktop产品功能基础上，重点增强了全国产化适配支持。 + +### MapGIS 3D SceneBuilder、MapGIS 3D GeoModeler + +
+ +MapGIS 3D SceneBuilder + + + +MapGIS 3D GeoModeler + +
+ +> - **MapGIS 3D SceneBuilder**是一个城市空间三维模型构建工具，提供多样化的建模方法，基于二维矢量或CAD数据，实现三维城市部件的快速、批量、自动化构建。融合丰富的粒子特效和三维分析工具，实现智慧城市的三维专业分析与应用。 + +> - **MapGIS 3D GeoModeler**是一个三维地学建模、可视化和分析的工具。融合钻孔、剖面、物化探等多源地学数据，通过自动和半自动化的快速建模技术，构建含断层、透镜体等复杂地学特征的结构和属性模型，实现地学模型的全流程一体化构建，并提供基于地学特征的可视化表达和分析功能。 + +### MapGIS IGServer、MapGIS IGServer-X、MapGIS IGServer-S + +
+ +MapGIS IGServer + + + +MapGIS IGServer（九州） + +
+ +> - **MapGIS IGServer**是一款跨平台的高性能GIS服务器产品，也是一款浏览器端GIS应用与开发的平台软件。为用户提供强大的空间数据管理、分析、可视化及共享服务，支持用户进行各行业领域的WebGIS应用开发与扩展。 + +> - **MapGIS IGServer-X**是一款大数据GIS服务器产品，提供矢量大数据、实时大数据、影像大数据和文本大数据等高性能计算服务，实现多维时空大数据的分析与挖掘。 + +> - **MapGIS IGServer-S**是一款智能GIS服务器产品，基于深度学习框架，提供数据关联与融合、空间分析与预测、聚类分类与统计等智能化服务，应用于遥感影像变化检测、建筑物提取等领域。 + +### MapGIS DataStore + +> - **MapGIS DataStore**产品是以分布式的方式存储和管理关系型数据、切片型数据、实时型数据以及非结构数据的混合数据库，与MapGIS SDE无缝融合，形成完整的地理大数据存储管理方案。 + +> 请访问司马云资源中心获取MapGIS相关产品的产品配套资料 + +## 三方产品 + +**第三方依赖产品：** + +     + +
+ +Cesium + + + +ECharts + + + +MapV + + + +turfjs + + + +d3js + +
+ +- Cesium：用于显示三维地球和地图的开源JavaScript库，基于WebGL的地图引擎（https://cesium.com/platform/cesiumjs/） + +- ECharts：基于 JavaScript 的开源可视化图表库（https://echarts.apache.org/zh/index.html） + +- MapV：地理信息可视化开源库（https://mapv.baidu.com/） + +- Turf：客户端空间分析开源库（https://turfjs.org/） + +- D3：基于Web标准的JavaScript图形可视化库（https://d3js.org/） + + + + + + + + diff --git a/website/public/static/demo/military/style.css b/website/public/static/demo/military/style.css new file mode 100644 index 000000000..0bf689220 --- /dev/null +++ b/website/public/static/demo/military/style.css @@ -0,0 +1,88 @@ +#GlobeView { + width: 100%; + height: 100%; + position: absolute; +} + +#coordinateDiv { + position: absolute; + color: #F0EFEF; + line-height: 30px; + margin-left: 30%; + bottom: 0px; + font-size: 80%; + font: '雅黑'; +} + +.message { + position: absolute; + top: 10px; + left: 10px; + height: auto; + width: auto; + background-color: rgba(255, 255, 255, 0.3); + border-radius: 5px; + color: #ffffff; + font-size: 12px; + border: 1px solid #dddddd; + z-index: 200; +} + +.message p { + text-align: center; + height: 15px; + margin: 0; + border-bottom: groove 1px #dddddd; + margin-bottom: 3px; +} + +.message span { + display: block; + width: 230px; +} + +.message span font { + width: 95px; + text-align: center; + display: inline-block; +} + +.message input { + width: 125px; + height: 14px; + margin-left: 5px; + margin-right: 5px; + border: none; + font-family: Microsoft YaHei; + color: #373d41; + outline: none; +} + +.message button { + width: auto; + border: none; + background-color: white; + color: #373d41; + outline: none; + font-size: 12px; + font-family: "微软雅黑"; + border: 1px solid #dddddd; + border-radius: 5px; +} + +.message button:hover { + background-color: #1D9ED7; + color: white; +} + +.message select { + position: absolute; + width: 90px; + height: 21px; + line-height: 1; + border: none; + color: #000000; + background-color: #f4f7fb; + outline: none; + border-radius: 5px; +} \ No newline at end of file diff --git a/website/public/static/demo/openlayers/example/IGServer/AnalysisService/E01BuffAnalysisByClass.htm b/website/public/static/demo/openlayers/example/IGServer/AnalysisService/E01BuffAnalysisByClass.htm index 54c9f2578..3c35d7b93 100644 --- a/website/public/static/demo/openlayers/example/IGServer/AnalysisService/E01BuffAnalysisByClass.htm +++ b/website/public/static/demo/openlayers/example/IGServer/AnalysisService/E01BuffAnalysisByClass.htm @@ -1,10 +1,11 @@ - + - + - + - + + + + -
-
- 源矩形坐标: - -
-
- -
-
- 目的矩形坐标: - -
-
- + +
+
+ 投影参数信息: +
数据源名称:
+
+
数据库名称:
+
+
源投影参照系名:
+
+
目的投影参照系名:
+
+
服务器地址:
+
+
服务器端口:
+
+
+
- \ No newline at end of file +
+
+ 源矩形坐标: + +
+
+ +
+
+ 目的矩形坐标: + +
+
+ + diff --git a/website/public/static/demo/openlayers/example/ogc/E01WMS_MapGIS.htm b/website/public/static/demo/openlayers/example/ogc/E01WMS_MapGIS.htm index 2cfee4854..5cfdfe17d 100644 --- a/website/public/static/demo/openlayers/example/ogc/E01WMS_MapGIS.htm +++ b/website/public/static/demo/openlayers/example/ogc/E01WMS_MapGIS.htm @@ -50,8 +50,9 @@ var map = new ol.Map({ target: 'mapCon', view: new ol.View({ - center: [11550000, 3860000], - zoom: 3, + center: [116.397128, 39.916527], + zoom: 3, + projection: 'EPSG:4326' }), }) diff --git a/website/public/static/demo/openlayers/source/img/webclient-openlayers-plugin.png b/website/public/static/demo/openlayers/source/img/webclient-openlayers-plugin.png new file mode 100644 index 000000000..ec094dd8b Binary files /dev/null and b/website/public/static/demo/openlayers/source/img/webclient-openlayers-plugin.png differ diff --git a/website/public/static/demo/openlayers/source/produce_ol.md b/website/public/static/demo/openlayers/source/produce_ol.md index d053e7b4e..b880adab8 100644 --- a/website/public/static/demo/openlayers/source/produce_ol.md +++ b/website/public/static/demo/openlayers/source/produce_ol.md @@ -120,6 +120,8 @@ MapGIS Client for JavaScript（OpenLayers5）对接云GIS产品，提供地图 ### API 功能体系（导图） +![webclient-openlayers-plugin](./img/webclient-openlayers-plugin.png) + ### API 结构说明     MapGIS Client for JavaScript（OpenLayers5）的**核心库**为**webclient-openlayers-plugin.min.js**，此开发库实质上是在Web客户端层对调用MapGIS IGServer等云GIS服务器提供的服务的接口封装，通过简便的功能控件、接口便能直接获取使用云GIS服务器提供的数据与功能服务资源。 @@ -239,16 +241,16 @@ MapGIS Client for JavaScript（OpenLayers5）对接云GIS产品，提供地图 -- OpenLayers：专为WebGIS 客户端开发提供的JavaScript 类库包，目前主流地图可视化引擎之一（https://openlayers.org/） +- OpenLayers：专为WebGIS 客户端开发提供的JavaScript 类库包，目前主流地图可视化引擎之一(https://openlayers.org/) -- ECharts：基于 JavaScript 的开源可视化图表库（https://echarts.apache.org/zh/index.html） +- ECharts：基于 JavaScript 的开源可视化图表库(https://echarts.apache.org/zh/index.html) -- MapV：地理信息可视化开源库（https://mapv.baidu.com/） +- MapV：地理信息可视化开源库(https://mapv.baidu.com/) -- Turf：客户端空间分析开源库（https://turfjs.org/） +- Turf：客户端空间分析开源库(https://turfjs.org/) -- D3：基于Web标准的JavaScript图形可视化库（https://d3js.org/） +- D3：基于Web标准的JavaScript图形可视化库(https://d3js.org/) diff --git a/website/public/static/demo/vue-cesium/example/analysis/fill-slot.htm b/website/public/static/demo/vue-cesium/example/analysis/fill-slot.htm index 87727c66e..387f59bb6 100644 --- a/website/public/static/demo/vue-cesium/example/analysis/fill-slot.htm +++ b/website/public/static/demo/vue-cesium/example/analysis/fill-slot.htm @@ -30,7 +30,7 @@ :token="token" > -
@@ -38,7 +38,7 @@
- +
diff --git a/website/public/static/demo/vue-cesium/example/analysis/fill.htm b/website/public/static/demo/vue-cesium/example/analysis/fill.htm index 3b2230eb7..7245d39c4 100644 --- a/website/public/static/demo/vue-cesium/example/analysis/fill.htm +++ b/website/public/static/demo/vue-cesium/example/analysis/fill.htm @@ -30,7 +30,7 @@ :token="token" > - +
diff --git a/website/public/static/demo/vue-cesium/example/sceneChildComponnents/fogeffect.htm b/website/public/static/demo/vue-cesium/example/sceneChildComponnents/fogeffect.htm new file mode 100644 index 000000000..c75be0921 --- /dev/null +++ b/website/public/static/demo/vue-cesium/example/sceneChildComponnents/fogeffect.htm @@ -0,0 +1,89 @@ + + + + + + + Vue-雾特效 + + + + + +
+ + + + + + 改变透明度 + 改变显示 + +
+ + + + + \ No newline at end of file diff --git a/website/public/static/demo/vue-cesium/example/sceneChildComponnents/raineffect.htm b/website/public/static/demo/vue-cesium/example/sceneChildComponnents/raineffect.htm new file mode 100644 index 000000000..84b1f4583 --- /dev/null +++ b/website/public/static/demo/vue-cesium/example/sceneChildComponnents/raineffect.htm @@ -0,0 +1,100 @@ + + + + + + + Vue-雨特效 + + + + + +
+ + + + + + + 加快速度 + 改变角度 + 改变显示 + +
+ + + + + \ No newline at end of file diff --git a/website/public/static/demo/vue-cesium/example/sceneChildComponnents/snoweffect.htm b/website/public/static/demo/vue-cesium/example/sceneChildComponnents/snoweffect.htm new file mode 100644 index 000000000..a3f70c5f7 --- /dev/null +++ b/website/public/static/demo/vue-cesium/example/sceneChildComponnents/snoweffect.htm @@ -0,0 +1,78 @@ + + + + + + + Vue-雪特效 + + + + + +
+ + + + + + 改变显示 + +
+ + + + + \ No newline at end of file diff --git a/website/public/static/demo/vue-cesium/gallery/sceneChildComponnents/fog.png b/website/public/static/demo/vue-cesium/gallery/sceneChildComponnents/fog.png new file mode 100644 index 000000000..5980755fc Binary files /dev/null and b/website/public/static/demo/vue-cesium/gallery/sceneChildComponnents/fog.png differ diff --git a/website/public/static/demo/vue-cesium/gallery/sceneChildComponnents/rain.png b/website/public/static/demo/vue-cesium/gallery/sceneChildComponnents/rain.png new file mode 100644 index 000000000..cb08f29e3 Binary files /dev/null and b/website/public/static/demo/vue-cesium/gallery/sceneChildComponnents/rain.png differ diff --git a/website/public/static/demo/vue-cesium/gallery/sceneChildComponnents/snow.png b/website/public/static/demo/vue-cesium/gallery/sceneChildComponnents/snow.png new file mode 100644 index 000000000..d0120c804 Binary files /dev/null and b/website/public/static/demo/vue-cesium/gallery/sceneChildComponnents/snow.png differ diff --git a/website/public/static/demo/vue-mapboxgl/example/vue-overlay/echarts.htm b/website/public/static/demo/vue-mapboxgl/example/vue-overlay/echarts.htm index e6adf9969..9b0facc5c 100644 --- a/website/public/static/demo/vue-mapboxgl/example/vue-overlay/echarts.htm +++ b/website/public/static/demo/vue-mapboxgl/example/vue-overlay/echarts.htm @@ -37,8 +37,8 @@ :center="outerCenter" :crs="mapCrs" v-on:load="handleMapLoad"> - - + +
+``` + +## 示例 + +```vue + + + + + +``` diff --git a/website/public/static/demo/vue-mapboxgl/helper/vue/vectotLayer.md b/website/public/static/demo/vue-mapboxgl/helper/vue/vectotLayer.md new file mode 100644 index 000000000..141f4e6e6 --- /dev/null +++ b/website/public/static/demo/vue-mapboxgl/helper/vue/vectotLayer.md @@ -0,0 +1,41 @@ +## 问题描述 + +> mapgis桌面程序导出矢量瓦片数据是，里面所有的链接地址都是localhost:6163，上传到igs（JAVA）服务器后，链接地址仍未做修改，因此或造成客户端无法访问服务器资源的问题。 + +## 如何解决 + +# 一、矢量瓦片数据已经上传到到igs（JAVA）服务器，但未保存最原始的样式文件 + +> 1、进入管理台 +> 2、点击左边菜单栏的地图与数据服务 + +步骤一 + +> 3、点击矢量瓦片资源管理，选择上传按钮，上传数据 + +步骤二 + +> 4、上传完成后点击矢量瓦片资源管理，选择查看按钮 + +步骤三 + +> 5、这里可以看到已上传的矢量瓦片资源 + +步骤四 + +> 6、在右侧的资源列表里选择你刚刚发布的资源，我这里选择名称为‘北京市_Java’的矢量瓦片，并点击预览按钮，进入到矢量瓦片编辑页面 + +步骤五 + +> 7、在编辑界面的最上方的工具栏中选择保存按钮，点击下载样式按钮，下载刚刚上传矢量瓦片资源 + +步骤五 +步骤五 + +> 8、打开下载好的样式文件，将所有的locaolhost:6163替换为当前igs（JAVA）服务的地址即可，之后重复第三步上传矢量瓦片资源， +> 由于下载的文件名英文字母会全部变成小写，请在上传前确保文件名与地图名称完全一致，这样即可正常访问矢量瓦片。 + +# 二、可以拿到最原始的样式文件 + +> 1、打开原样式文件，将所有的locaolhost:6163替换为当前igs（JAVA）服务的地址即可，之后重复上述第三步上传矢量瓦片资源， +> 由于下载的文件名英文字母会全部变成小写，请在上传前确保文件名与地图名称完全一致，这样即可正常访问矢量瓦片。 \ No newline at end of file diff --git a/website/public/static/demo/vue-mapboxgl/source/produce_vue.md b/website/public/static/demo/vue-mapboxgl/source/produce_vue.md index 2265e4409..94984570a 100644 --- a/website/public/static/demo/vue-mapboxgl/source/produce_vue.md +++ b/website/public/static/demo/vue-mapboxgl/source/produce_vue.md @@ -333,19 +333,19 @@
-- Vue：是一套用于构建用户界面的渐进式JavaScript框架，高效开发（https://cn.vuejs.org/） +- Vue：是一套用于构建用户界面的渐进式JavaScript框架，高效开发(https://cn.vuejs.org/) -- MapboxGL：使用WebGL技术独立渲染的开源JavaScript库，作为前端渲染矢量瓦片交互地图的工具（https://docs.mapbox.com/mapbox-gl-js/api/） +- MapboxGL：使用WebGL技术独立渲染的开源JavaScript库，作为前端渲染矢量瓦片交互地图的工具(https://docs.mapbox.com/mapbox-gl-js/api/) -- Cesium：用于显示三维地球和地图的开源JavaScript库，基于WebGL的地图引擎（https://cesium.com/platform/cesiumjs/） +- Cesium：用于显示三维地球和地图的开源JavaScript库，基于WebGL的地图引擎(https://cesium.com/platform/cesiumjs/) -- ECharts：基于 JavaScript 的开源可视化图表库（https://echarts.apache.org/zh/index.html） +- ECharts：基于 JavaScript 的开源可视化图表库(https://echarts.apache.org/zh/index.html) -- MapV：地理信息可视化开源库（https://mapv.baidu.com/） +- MapV：地理信息可视化开源库(https://mapv.baidu.com/) -- Turf：客户端空间分析开源库（https://turfjs.org/） +- Turf：客户端空间分析开源库(https://turfjs.org/) -- D3：基于Web标准的JavaScript图形可视化库（https://d3js.org/） +- D3：基于Web标准的JavaScript图形可视化库(https://d3js.org/) diff --git a/website/public/static/libs/include-cesium-local.js b/website/public/static/libs/include-cesium-local.js index ea8a0e738..fc5a965b3 100644 --- a/website/public/static/libs/include-cesium-local.js +++ b/website/public/static/libs/include-cesium-local.js @@ -48,10 +48,19 @@ var httpUrl = getInitPath(); if (!inArray(excludes, 'cesium')) { - inputCSS(httpUrl + '/cdn/cesium/Widgets/widgets.css'); - inputCSS(httpUrl + '/cdn/cesium/MapGIS/css/mapgis.css'); - inputScript(httpUrl + '/cdn/cesium/Cesium.js'); + if (inArray(includes, 'cesium-1.59')) { + // 引入Cesium1.59版本 对应10.5.2 ~ 10.5.5之间的版本 + inputCSS(httpUrl + '/cdn/cesium-old/Widgets/widgets.css'); + inputCSS(httpUrl + '/cdn/cesium-old/MapGIS/css/mapgis.css'); + inputScript(httpUrl + '/cdn/cesium-old/Cesium.js'); + } else { + // 引入Cesium1.84版本 对应10.5.6之间的版本 + inputCSS(httpUrl + '/cdn/cesium/Widgets/widgets.css'); + inputCSS(httpUrl + '/cdn/cesium/MapGIS/css/mapgis.css'); + inputScript(httpUrl + '/cdn/cesium/Cesium.js'); + } } + // if (!inArray(includes, 'wmts')) { // inputScript("http://" + ip + ":" + socket + "/cdn/leaflet plugins/leaflet-tilelayer-wmts.js"); // } diff --git a/website/src/components/IconFont/iconfont.js b/website/src/components/IconFont/iconfont.js deleted file mode 100644 index 2a976767b..000000000 --- a/website/src/components/IconFont/iconfont.js +++ /dev/null @@ -1 +0,0 @@ -!function(l){var h,c,a,v,t,p,i='',z=(z=document.getElementsByTagName("script"))[z.length-1].getAttribute("data-injectcss");if(z&&!l.__iconfont__svg__cssinject__){l.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(l){console&&console.log(l)}}function s(){t||(t=!0,a())}h=function(){var l,h,c;(c=document.createElement("div")).innerHTML=i,i=null,(h=c.getElementsByTagName("svg")[0])&&(h.setAttribute("aria-hidden","true"),h.style.position="absolute",h.style.width=0,h.style.height=0,h.style.overflow="hidden",l=h,(c=document.body).firstChild?(h=c.firstChild).parentNode.insertBefore(l,h):c.appendChild(l))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(h,0):(c=function(){document.removeEventListener("DOMContentLoaded",c,!1),h()},document.addEventListener("DOMContentLoaded",c,!1)):document.attachEvent&&(a=h,v=l.document,t=!1,(p=function(){try{v.documentElement.doScroll("left")}catch(l){return void setTimeout(p,50)}s()})(),v.onreadystatechange=function(){"complete"==v.readyState&&(v.onreadystatechange=null,s())})}(window); \ No newline at end of file diff --git a/website/src/components/Card/PluginCard.vue b/website/src/config/components/Card/PluginCard.vue similarity index 100% rename from website/src/components/Card/PluginCard.vue rename to website/src/config/components/Card/PluginCard.vue diff --git a/website/src/components/CardGroup/index.vue b/website/src/config/components/CardGroup/index.vue similarity index 98% rename from website/src/components/CardGroup/index.vue rename to website/src/config/components/CardGroup/index.vue index debb1b8cc..3944b9c11 100644 --- a/website/src/components/CardGroup/index.vue +++ b/website/src/config/components/CardGroup/index.vue @@ -28,7 +28,7 @@