| | |
| | | | ------------------------ |------------------------------------------------------------------------------------------------------------------------------------------| --------------- | -------- | |
| | | | mapRef | 父组件引用 | React.Component | - | |
| | | | map2D | 初始化时显示2维地图 | boolean | false | |
| | | | map2_5D | 初始化时显示2.5维地图 | boolean | false | |
| | | | showDefaultLayer | 显示默认图层(国内天地图) | boolean | true | |
| | | | addressSearchUrl | 地址查询基础服务 | string | - | |
| | | | terrainUrl | 地形服务地址 | string | - | |
| | |
| | | ### 方法 |
| | | |
| | | | 方法 | 说明 | |
| | | |-----------------------------|--------------| |
| | | |-----------------------------|-----------------------| |
| | | | enableTilt | 启用旋转和倾斜 | |
| | | | disableTilt | 禁用旋转和倾斜 | |
| | | | setToHeading | 回归到当前视角 | | |
| | |
| | | | clearMeasure | 清除绘制 | |
| | | | mapSwitch | 地图切换 | |
| | | | preciseLerpSampling | 输入两个点,进行按距离进行采样 | |
| | | | sampleTerrainMostDetailed | 根据经纬度坐标获取对应的高程 | |
| | | | sampleTerrainMostDetailed | 根据Cartesian3数组获取对应的高程 | |
| | | | sampleTerrain | 根据经纬度坐标获取对应的高程 | |
| | | | getMeasureHandler | 获取线量算handler | |
| | | | mapRightClickEvent | 右键事件 | |
| | | | showDraw | 显示Draw | |
| | | | hideDraw | 隐藏Draw | |
| | | | updateModel | 更新选择方法 | |
| | | | clearSelected | 清除已选择 | |
| | | | triggerSelected | 外部选择 | |
| | | | clearDrawSelect | 清除框选 | |
| | | | useDrawSelect | 打开框选 | |
| | | ### 具体方法 |
| | | |
| | | ##### showDrawDatas(options) |
| | |
| | | |
| | | --- |
| | | |
| | | #### mapSwitch() |
| | | #### mapSwitch(mapType) |
| | | | 参数 | 必须 | 类型 | 说明 | |
| | | |------|-------|--------|-------------------------------| |
| | | | mapType | false | string | '2' 表示2维, '2_5'表示2.5维,'3'表示3维 | |
| | | |
| | | 二三维地图切换 |
| | | |
| | |
| | | 根据经纬度坐标获取对应的高程 |
| | | |
| | | | 参数 | 必须 | 类型 | 说明 | |
| | | |------|------|----------|-------------| |
| | | | points | true | object[] | 经纬度数组 | |
| | | |------|------|--------------|-------------| |
| | | | points | true | Cartesian3[] | 数组 | |
| | | --- |
| | | |
| | | #### sampleTerrain(points) |
| | | 根据经纬度坐标获取对应的高程 |
| | | | 参数 | 必须 | 类型 | 说明 | |
| | | |--------|------|-----------------------------------------------|-------| |
| | | | points | true | {lon: number; lat: number; height: number;}[] | 经纬度数组 | |
| | | --- |
| | | #### getMeasureHandler() |
| | | |
| | | 获取线量算handler |
| | | |
| | | --- |
| | | |
| | | #### showDraw(code) |
| | | |
| | | 显示Draw |
| | | |
| | | | 参数 | 必须 | 类型 | 说明 | |
| | | |------|------|--------|----| |
| | | | code | true | string | 编号 | |
| | | |
| | | --- |
| | | |
| | | #### hideDraw(code) |
| | | |
| | | 隐藏Draw |
| | | |
| | | | 参数 | 必须 | 类型 | 说明 | |
| | | |------|------|--------|----| |
| | | | code | true | string | 编号 | |
| | | |
| | | --- |
| | | |
| | | #### updateModel(model) |
| | | |
| | | 更新模式 |
| | | select: 选择 |
| | | modify: 修改(默认) |
| | | |
| | | | 参数 | 必须 | 类型 | 说明 | |
| | | |------|------|--------|----| |
| | | | model | true | string | 模式 | |
| | | |
| | | --- |
| | | |
| | | #### clearSelected() |
| | | |
| | | 清除已选择 |
| | | |
| | | --- |
| | | |
| | | #### triggerSelected(codes) |
| | | |
| | | 外部选择对象 |
| | | |
| | | | 参数 | 必须 | 类型 | 说明 | |
| | | |------|------|----------|------| |
| | | | codes | true | string[] | 手动添加 | |
| | | |
| | | --- |
| | | |
| | | #### clearDrawSelect() |
| | | |
| | | 清除框选 |
| | | |
| | | --- |
| | | |
| | | #### useDrawSelect(type, multi) |
| | | |
| | | 使用框选 |
| | | |
| | | | 参数 | 必须 | 类型 | 说明 | |
| | | |------|------|---------|-------------------| |
| | | | type | true | string | box 和 polygon中的一种 | |
| | | | multi | true | boolean | 是否连续框选 | |
| | |
| | | |
| | | ### Example2DDrawUpdatePage ´úÂë |
| | | ### Example2DDrawUpdatePage 代码 |
| | | |
| | | ```jsx |
| | | import React, {Component} from 'react' |
| | |
| | | |
| | | |
| | | optionObjs = { |
| | | "Ä¿±êÐÑÄ¿": { |
| | | "目标醒目": { |
| | | code: '123', |
| | | type: "2002", |
| | | xz: true, |
| | |
| | | constructor(props) { |
| | | super(props); |
| | | this.state = { |
| | | htmlString: '<h3>ÕýÔÚ¼ÓÔØÖÐ...</h3>', |
| | | htmlString: '<h3>正在加载中...</h3>', |
| | | plotText: '' |
| | | }; |
| | | } |
| | |
| | | |
| | | return ( |
| | | <div className={"example_draw_container"}> |
| | | <h3>¾ü±ê»æÖÆ/չʾÒÑÓеľü±êÊý¾Ý</h3> |
| | | <h3>军标绘制/展示已有的军标数据</h3> |
| | | <div className={"map_wrapper"}> |
| | | <GIS refs={ |
| | | e => { |
| | |
| | | this.setState({htmlString: window.marked.parse(mdText)}); |
| | | }); |
| | | |
| | | const randomPoints = this.generateRandomPointsInRadius(35.9042, 112.4074, 10, 200); |
| | | const randomPoints = this.generateRandomPointsInRadius(35.9042, 112.4074, 500, 5000); |
| | | |
| | | let options = []; |
| | | for (let i = 0; i < randomPoints.length; i++) { |
| | |
| | | render() { |
| | | return ( |
| | | <div className={"example_draw_container"}> |
| | | <h3>自动聚合</h3> |
| | | <h3>自动聚合5000点</h3> |
| | | <div className={"map_wrapper"}> |
| | | <GIS refs={e => { |
| | | this.mapFunction = e |
| | |
| | | |
| | | ### ExampleBlinkPage ´úÂë |
| | | ### ExampleBlinkPage 代码 |
| | | |
| | | ```jsx |
| | | import React, {Component} from 'react' |
| | |
| | | |
| | | |
| | | optionObjs = { |
| | | "Ä¿±êÐÑÄ¿": { |
| | | "目标醒目": { |
| | | code: '123', |
| | | type: "2002", |
| | | xz: true, |
| | |
| | | blinkCycle: 2000, |
| | | points: [] |
| | | }, |
| | | "ÑÚ»¤ÇøÓò": { |
| | | "掩护区域": { |
| | | type: 'yhqy', |
| | | points: [{lon: 102.642853926199, lat: 31.012509646376447, height: 0}, |
| | | {lon: 102.65927322610115, lat: 31.01540811637356, height: 0}, |
| | |
| | | blink: true, |
| | | blinkCycle: 3000, |
| | | }, |
| | | "Ðͬ¹ØÏµ": { |
| | | "协同关系": { |
| | | type: 'xtgx', |
| | | points: [{lon: 102.642853926199, lat: 31.012509646376447, height: 0}, |
| | | {lon: 102.66192135373299, lat: 31.005988487769518, height: 0}], |
| | |
| | | blink: true, |
| | | blinkCycle: 2000, |
| | | }, |
| | | "¸ÉÈÅÏß": { |
| | | "干扰线": { |
| | | type: 'grx', |
| | | points: [{lon: 102.732420985008, lat: 30.97556325857848, height: 0}, |
| | | {lon: 102.73983041603873, lat: 30.97504986175468, height: 0}], |
| | |
| | | constructor(props) { |
| | | super(props); |
| | | this.state = { |
| | | htmlString: '<h3>ÕýÔÚ¼ÓÔØÖÐ...</h3>', |
| | | htmlString: '<h3>正在加载中...</h3>', |
| | | plotText: '' |
| | | }; |
| | | } |
| | |
| | | |
| | | return ( |
| | | <div className={"example_draw_container"}> |
| | | <h3>¾ü±ê»æÖÆ/չʾÒÑÓеľü±êÊý¾Ý</h3> |
| | | <h3>军标绘制/展示已有的军标数据</h3> |
| | | <div className={"map_wrapper"}> |
| | | <GIS refs={ |
| | | e => { |
| | |
| | | .then(mdText => { |
| | | this.setState({htmlString: window.marked.parse(mdText)}); |
| | | }); |
| | | let op = { |
| | | code: "lddkzcqy", |
| | | type: "lddkzcqy", |
| | | lon: 2, |
| | | lat: 27, |
| | | height: 0, |
| | | bj: 400, |
| | | qsjd: 0, |
| | | zzjd: 360, |
| | | useModify: false |
| | | } |
| | | this.mapFunction.mapApiService.appendBh('bh', [op]); |
| | | } |
| | | |
| | | render() { |
| | |
| | | |
| | | optionObjs = { |
| | | "目标简标": { |
| | | allowPicking: false, |
| | | code: '123123', |
| | | bz: true, |
| | | bzlx: 'simple', |
| | | jbwb: 'R:00017', |
| | |
| | | iconSize: [[20, 20], [30, 30], [40, 40]] |
| | | }, |
| | | "目标详标": { |
| | | allowPicking: false, |
| | | bz: true, |
| | | bzlx: 'detail', |
| | | jbwb: 'R:00017', |
| | |
| | | iconSize: [[20, 20], [30, 30], [40, 40]] |
| | | }, |
| | | "飞行简标": { |
| | | allowPicking: false, |
| | | bz: true, |
| | | bzlx: 'simple', |
| | | jbwb: "P:00019", |
| | |
| | | iconSize: [[20, 20], [30, 30], [40, 40]] |
| | | }, |
| | | "飞行详标": { |
| | | allowPicking: false, |
| | | bz: true, |
| | | bzlx: 'detail', |
| | | jbwb: 'P:00019', |
| | |
| | | iconSize: [[20, 20], [30, 30], [40, 40]] |
| | | }, |
| | | "雷达对抗侦察区域": { |
| | | allowPicking: false, |
| | | type: "lddkzcqy", |
| | | bj: 1, |
| | | qsjd: 30, |
| | |
| | | iconSize: [[20, 20], [30, 30], [40, 40]] |
| | | }, |
| | | "雷达对抗干扰波束": { |
| | | allowPicking: false, |
| | | type: 'lddkgrps', |
| | | bj: 1, |
| | | qsjd: 30, |
| | |
| | | iconSize: [[20, 20], [30, 30], [40, 40]] |
| | | }, |
| | | "雷达对抗测向线": { |
| | | allowPicking: false, |
| | | type: "lddkcxx", |
| | | kcwb: "10110", |
| | | kcgls: 1, |
| | |
| | | points: [] |
| | | }, |
| | | "雷达对抗关系": { |
| | | allowPicking: false, |
| | | type: "lddkgx", |
| | | kcwb: "10110", |
| | | kcgls: 1, |
| | |
| | | points: [] |
| | | }, |
| | | "雷达对目标探测": { |
| | | allowPicking: false, |
| | | type: "lddmbtc", |
| | | bj: 0.5, |
| | | qsjd: 0, |
| | |
| | | useModify: false, |
| | | }, |
| | | "通信对抗侦察区域": { |
| | | allowPicking: false, |
| | | type: "txdkzcqy", |
| | | bj: 0.5, |
| | | qsjd: 0, |
| | |
| | | useModify: false, |
| | | }, |
| | | "通信对抗干扰波束": { |
| | | allowPicking: false, |
| | | type: "txdkgrps", |
| | | bj: 1, |
| | | qsjd: 30, |
| | |
| | | useModify: false, |
| | | }, |
| | | "通信对抗测向线": { |
| | | allowPicking: false, |
| | | type: "txdkcxx", |
| | | kcgls: 1, |
| | | kcjd: 30, |
| | |
| | | points: [] |
| | | }, |
| | | "通信畅通区域": { |
| | | allowPicking: false, |
| | | type: 'txctqy', |
| | | bj: 0.5, |
| | | qsjd: 0, |
| | |
| | | }, |
| | | "通信网标绘": { |
| | | type: "txw", |
| | | allowPicking: false, |
| | | useModify: false, |
| | | lon: 102.70854539488224, lat: 31.0098468100060593, height: 0, |
| | | points: [] |
| | | }, |
| | | "光电对抗侦察区域": { |
| | | type: 'gddkzcqy', |
| | | allowPicking: false, |
| | | bj: 0.5, |
| | | qsjd: 0, |
| | | zzjd: 360, |
| | |
| | | useModify: false, |
| | | }, |
| | | "光电有源对抗干扰波束": { |
| | | allowPicking: false, |
| | | type: 'gdyydkgrbs', |
| | | kcgls: 1, |
| | | kcjd: 30, |
| | |
| | | useModify: false, |
| | | }, |
| | | "漫反射干扰区域": { |
| | | allowPicking: false, |
| | | type: 'mfsgrqy', |
| | | bj: 1, |
| | | qsjd: 30, |
| | |
| | | useModify: false, |
| | | }, |
| | | '烟幕形成区域': { |
| | | allowPicking: false, |
| | | type: 'ymxcqy', |
| | | points: [{lon: 102.64984, lat: 30.99237, height: 0}, |
| | | {lon: 102.66012682459443, lat: 30.995109020954718, height: 0}, |
| | |
| | | useModify: false, |
| | | }, |
| | | "掩护区域": { |
| | | allowPicking: false, |
| | | type: 'yhqy', |
| | | points: [{lon: 102.642853926199, lat: 31.012509646376447, height: 0}, |
| | | {lon: 102.65927322610115, lat: 31.01540811637356, height: 0}, |
| | |
| | | useModify: false, |
| | | }, |
| | | "协同关系": { |
| | | allowPicking: false, |
| | | type: 'xtgx', |
| | | points: [{lon: 102.642853926199, lat: 31.012509646376447, height: 0}, |
| | | {lon: 102.66192135373299, lat: 31.005988487769518, height: 0}], |
| | | useModify: false, |
| | | }, |
| | | "干扰线": { |
| | | allowPicking: false, |
| | | type: 'grx', |
| | | points: [{lon: 102.732420985008, lat: 30.97556325857848, height: 0}, |
| | | {lon: 102.73983041603873, lat: 30.97504986175468, height: 0}], |
| | | useModify: false |
| | | }, |
| | | "预警线": { |
| | | allowPicking: false, |
| | | type: 'yjx', |
| | | useModify: false, |
| | | points: [{lon: 102.732420985008, lat: 30.97956325857848, height: 0}, |
| | | {lon: 102.73983041603873, lat: 30.98004986175468, height: 0}] |
| | | }, |
| | | "目标分配线": { |
| | | allowPicking: false, |
| | | type: 'mbfpx', |
| | | useModify: false, |
| | | points: [{lon: 102.732420985008, lat: 30.97756325857848, height: 0}, |
| | | {lon: 102.73983041603873, lat: 30.97804986175468, height: 0}] |
| | | }, |
| | | "目标醒目": { |
| | | allowPicking: false, |
| | | bz: true, |
| | | xz: true, |
| | | bzlx: 'simple', |
| | |
| | | .then(mdText => { |
| | | this.setState({htmlString: window.marked.parse(mdText)}); |
| | | }); |
| | | this.showOptions(); |
| | | } |
| | | |
| | | showOptions = () => { |
| | |
| | | ```jsx |
| | | import React, {Component} from 'react' |
| | | import './ExampleHtmlBoardPage.css' |
| | | import {Bp, GIS} from "../iclient3d-plot-diy"; |
| | | import {Bp, GIS} from "iclient3d-plot-diy"; |
| | | |
| | | import {Button} from "antd"; |
| | | import $ from "jquery"; |
| | |
| | | import {Button} from "antd"; |
| | | |
| | | |
| | | export class ExampleSelectPage extends Component { |
| | | export default class ExampleSelectPage extends Component { |
| | | |
| | | |
| | | optionObjs = { |
| | |
| | | import React, {Component} from 'react' |
| | | import './CommonExample.css' |
| | | import {GIS} from "iclient3d-plot-diy"; |
| | | import {Button} from "antd"; |
| | | |
| | | export default class ExampleSimpleEventPage extends Component { |
| | | drawOps = []; |
| | |
| | | this.setState({htmlString: window.marked.parse(mdText)}); |
| | | }); |
| | | //监听拨盘事件 |
| | | this.mapFunction.mapApiService.showDrawDatas([{ |
| | | code: 'asdladjakl', |
| | | bz: true, |
| | | bzColor: '#e000ff', |
| | | bzLineColor: '#ff0000', |
| | | bzlx: 'simple', |
| | | jbwb: 'R:00017', |
| | | type: "2002", |
| | | returnHeight: true, |
| | | useModify: false, |
| | | lon: 102.33054539488224, |
| | | lat: 31.005468100060593, |
| | | height: 0, |
| | | points: [], |
| | | iconSize: [[20, 20], [30, 30], [40, 40]] |
| | | }, { |
| | | type: 'yhqy', |
| | | code: 'xxcxvawda', |
| | | points: [{lon: 102.642853926199, lat: 31.012509646376447, height: 0}, |
| | | {lon: 102.65927322610115, lat: 31.01540811637356, height: 0}, |
| | | {lon: 102.66192135373299, lat: 31.005988487769518, height: 0}, |
| | | {lon: 102.64755620178961, lat: 31.00246196283815, height: 0}, |
| | | {lon: 102.642853926199, lat: 31.012509646376447, height: 0}], |
| | | useModify: false, |
| | | |
| | | }]) |
| | | } |
| | | |
| | | showData() { |
| | | this.mapFunction.mapApiService.mapClickEvent.addEventListener((id, primitive, isPoint) => { |
| | | alert(id); |
| | | // 左击 如果需要dom时的监听 |
| | | this.mapFunction.addEventListener((id, overlay, primitive, data) => { |
| | | alert('gis组件的左击事件:' + id); |
| | | }, this); |
| | | |
| | | // 左击如果需要底层对象的监听 |
| | | this.mapFunction.mapClickEvent.addEventListener((id, primitive, isPoint) => { |
| | | console.log(id, primitive, isPoint); |
| | | alert('左击事件:' + id); |
| | | }, this); |
| | | |
| | | // 右键监听 |
| | | this.mapFunction.mapApiService.mapRightClickEvent.addEventListener((id, primitive, isPoint) => { |
| | | alert(id); |
| | | console.log(id, primitive, isPoint); |
| | | alert('右击事件' + id); |
| | | }, this); |
| | | } |
| | | |
| | | drawPolygon() { |
| | | //监听拨盘事件 |
| | | this.mapFunction.mapApiService.draw({ |
| | | code: 'xxcx_new_', |
| | | type: 'yhqy', |
| | | useModify: true, |
| | | }); |
| | | } |
| | | |
| | | render() { |
| | |
| | | showDefaultLayer={true} |
| | | /> |
| | | </div> |
| | | <Button type="primary" onClick={this.drawPolygon.bind(this)}>新画一个面</Button> |
| | | <div className={"code_wrapper"}> |
| | | <div dangerouslySetInnerHTML={{__html: this.state.htmlString}}></div> |
| | | </div> |
| | |
| | | }] |
| | | }, |
| | | |
| | | "单色线": { |
| | | type: "line", |
| | | bklx: 'solid', |
| | | bkkd: 4, |
| | | color: '#64c324', |
| | | useModify: false, |
| | | points: [{ |
| | | lon: 103.73554539488224, |
| | | lat: 31.005068100060593, |
| | | height: 0, |
| | | }, { |
| | | lon: 104.73554539488224, |
| | | lat: 32.005068100060593, |
| | | height: 0, |
| | | }] |
| | | }, |
| | | "双色线": { |
| | | type: "line", |
| | | bklx: 'double', |
| | | color: '#64c324', |
| | | color2: '#6932cc', |
| | | bkkd: 4, |
| | | color: '#ff0000', |
| | | color2: '#0000ff', |
| | | useModify: false, |
| | | points: [{ |
| | | lon: 103.73554539488224, |
| | |
| | | }, |
| | | "通信抗测向线2": { |
| | | type: "txdkcxx2", |
| | | kcjd: 30, |
| | | kcjd: 120, |
| | | kcgls: 10, |
| | | kcwb: '123123', |
| | | color: '#0059FFA3', |
| | |
| | | lat: 32.005068100060593, |
| | | height: 0, |
| | | }] |
| | | }, |
| | | "干扰波束": { |
| | | type: "grbs", |
| | | color: '#D5013A', |
| | | useModify: false, |
| | | lon: 102.23554539488224, |
| | | lat: 31.005068100060593, |
| | | height: 0, |
| | | qsjd: 30, |
| | | zzjd: 130, |
| | | bj: 100 |
| | | } |
| | | } |
| | | line_star |
| | |
| | | .then(mdText => { |
| | | this.setState({htmlString: window.marked.parse(mdText)}); |
| | | }); |
| | | this.showOptions(); |
| | | } |
| | | |
| | | showOptions = () => { |
| | |
| | | options.push(this.optionObjs[key]); |
| | | } |
| | | this.mapFunction.mapApiService.showDrawDatas(options); |
| | | |
| | | // this.mapFunction.mapApiService.draw(options[0]); |
| | | // setTimeout(() => { |
| | | // let p = this.mapFunction.mapApiService.getDraw(options[0].code); |
| | | // p.drawEnd.subscribe(value => { |
| | | // alert(p.export()); |
| | | // }) |
| | | // }) |
| | | } |
| | | }; |
| | | |
| | |
| | | plotUrl={this.state.plotUrl} |
| | | mapRef={this} |
| | | showDefaultLayer={false} |
| | | global={[102.5, 30.5, 103.5, 31.5]} |
| | | /> |
| | | </div> |
| | | <Button type="primary" onClick={this.showOptions.bind(this)}>显示已有标绘数据</Button> |
| | |
| | | import * as echarts from 'echarts'; |
| | | import {Button} from "antd"; |
| | | import {CloseOutlined} from "@ant-design/icons"; |
| | | import {getLocalText} from "iclient3d-plot-diy"; |
| | | |
| | | export default class ProfilePage extends PureComponent { |
| | | chartRef = React.createRef(); |
| | |
| | | <div className="sightLine-char-container"> |
| | | <div className="title-container"> |
| | | <div className="title-name"> |
| | | <span>剖面分析</span> |
| | | <span>{getLocalText('profile')}</span> |
| | | </div> |
| | | <div className="icon-container"> |
| | | <Button type="primary" onClick={this.closeEvent.bind(this)}><CloseOutlined/></Button> |
| | |
| | | | 拖动框要素css选择器 | infoWindowSelector | 通过样式选择,不要使用id,默认为 .info-window | |
| | | | 拖动框拖动部分要素css选择器 | infoWindowTitleSelector | 通过样式选择,不要使用id,默认为 .info-window-heading | |
| | | | 拖动框按钮要素css选择器 | infoWindowBtnPinSelector | 通过样式选择,不要使用id,默认为 .btn-pin | |
| | | | 允许点击 | allowPicking | | |
| | | |
| | | <br /> |
| | | |
| | |
| | | | 经度 | lat | 经度 | |
| | | | 纬度 | lon | 纬度 | |
| | | | 高度 | height | 高度 | |
| | | | 允许点击 | allowPicking | | |
| | | |
| | | <br /> |
| | | |
| | |
| | | | 经度 | lat | 经度 | |
| | | | 纬度 | lon | 纬度 | |
| | | | 高度 | height | 高度 | |
| | | | 允许点击 | allowPicking | | |
| | | |
| | | <br /> |
| | | |
| | |
| | | | 经度 | lat | 经度 | |
| | | | 纬度 | lon | 纬度 | |
| | | | 高度 | height | 高度 | |
| | | | 允许点击 | allowPicking | | |
| | | |
| | | <br /> |
| | | |
| | |
| | | | 经度 | lat | 经度 | |
| | | | 纬度 | lon | 纬度 | |
| | | | 高度 | height | 高度 | |
| | | | 允许点击 | allowPicking | | |
| | | |
| | | <br /> |
| | | |
| | |
| | | | 经度 | lat | 经度 | |
| | | | 纬度 | lon | 纬度 | |
| | | | 高度 | height | 高度 | |
| | | | 允许点击 | allowPicking | | |
| | | |
| | | <br /> |
| | | |
| | |
| | | | 经度 | lat | 经度 | |
| | | | 纬度 | lon | 纬度 | |
| | | | 高度 | height | 高度 | |
| | | | 允许点击 | allowPicking | | |
| | | |
| | | <br /> |
| | | |
| | |
| | | | 经度 | lat | 经度 | |
| | | | 纬度 | lon | 纬度 | |
| | | | 高度 | height | 高度 | |
| | | | 允许点击 | allowPicking | | |
| | | |
| | | <br /> |
| | | |
| | |
| | | | 经度 | lat | 经度 | |
| | | | 纬度 | lon | 纬度 | |
| | | | 高度 | height | 高度 | |
| | | | 允许点击 | allowPicking | | |
| | | |
| | | <br /> |
| | | |
| | |
| | | | 经度 | lat | 经度 | |
| | | | 纬度 | lon | 纬度 | |
| | | | 高度 | height | 高度 | |
| | | | 允许点击 | allowPicking | | |
| | | |
| | | <br /> |
| | | |
| | |
| | | | 经度 | lat | 经度 | |
| | | | 纬度 | lon | 纬度 | |
| | | | 高度 | height | 高度 | |
| | | | 允许点击 | allowPicking | | |
| | | |
| | | <br /> |
| | | |
| | |
| | | | 经度 | lat | 经度 | |
| | | | 纬度 | lon | 纬度 | |
| | | | 高度 | height | 高度 | |
| | | | 允许点击 | allowPicking | | |
| | | |
| | | <br /> |
| | | |
| | |
| | | | 经度 | lat | 经度 | |
| | | | 纬度 | lon | 纬度 | |
| | | | 高度 | height | 高度 | |
| | | | 允许点击 | allowPicking | | |
| | | |
| | | <br /> |
| | | |
| | |
| | | | 经度 | lat | 经度 | |
| | | | 纬度 | lon | 纬度 | |
| | | | 高度 | height | 高度 | |
| | | | 允许点击 | allowPicking | | |
| | | |
| | | <br /> |
| | | |
| | |
| | | | 经度 | lat | 经度 | |
| | | | 纬度 | lon | 纬度 | |
| | | | 高度 | height | 高度 | |
| | | | 允许点击 | allowPicking | | |
| | | |
| | | <br /> |
| | | |
| | |
| | | | 唯一标识 | code | 唯一标识,如果不传会动态生成一个唯一标识 | |
| | | | 军标代码类型 | type | yhqy | |
| | | | 坐标点 | points | 格式:{lon: 111, lat:22, height: 10000}[] | |
| | | | 允许点击 | allowPicking | | |
| | | |
| | | <br /> |
| | | |
| | |
| | | | ------------ | ------ | ------------------------------------------ | |
| | | | 军标代码类型 | type | xtgx | |
| | | | 坐标点 | points | 格式:{lon: 111, lat:22, height: 10000}[] | |
| | | | 允许点击 | allowPicking | | |
| | | |
| | | <br /> |
| | | |
| | |
| | | | 唯一标识 | code | 唯一标识,如果不传会动态生成一个唯一标识 | |
| | | | 军标代码类型 | type | grx | |
| | | | 坐标点 | points | 格式:{lon: 111, lat:22, height: 10000}[] | |
| | | | 允许点击 | allowPicking | | |
| | | |
| | | <br /> |
| | | |
| | |
| | | | 唯一标识 | code | 唯一标识,如果不传会动态生成一个唯一标识 | |
| | | | 军标代码类型 | type | yjx | |
| | | | 坐标点 | points | 格式:{lon: 111, lat:22, height: 10000}[] | |
| | | | 允许点击 | allowPicking | | |
| | | |
| | | <br /> |
| | | |
| | |
| | | | 唯一标识 | code | 唯一标识,如果不传会动态生成一个唯一标识 | |
| | | | 军标代码类型 | type | mbfpx | |
| | | | 坐标点 | points | 格式:{lon: 111, lat:22, height: 10000}[] | |
| | | | 允许点击 | allowPicking | | |
| | | |
| | | <br /> |
| | | |
| | |
| | | | 线颜色 | color | 边框类型 = solid 或者 dashed 时有效,格式:#ff0000 | |
| | | | 线透明度 | alpha | 边框类型 = solid 或者 dashed 时有效,格式: 0 ~ 1 | |
| | | | 线图片 | bktp | 边框类型 = custom是有效,图片相对地址, 大小:100px * 36px | |
| | | | 允许点击 | allowPicking | | |
| | | |
| | | <br /> |
| | | |
| | |
| | | | 填充类型 | tclx | 左斜线(紫色)(SlashLeft)、右斜线(红色)(SlashRight)、纯色(color)、点矩阵(pointMatrix)、烟幕(Smokescreen) 、自定义(custom) | |
| | | | 填充颜色 | fillColor | 填充类型 = color 时,格式:#ff0000 | |
| | | | 填充透明度 | fillAlpha | 填充类型 = color 时,格式:0 ~ 1 | |
| | | | 允许点击 | allowPicking | | |
| | | |
| | | <br /> |
| | | |
| | |
| | | | 填充类型 | tclx | 左斜线(紫色)(SlashLeft)、右斜线(红色)(SlashRight)、纯色(color)、点矩阵(pointMatrix)、烟幕(Smokescreen) 、自定义(custom) | |
| | | | 填充颜色 | fillColor | 填充类型 = color 时,格式:#ff0000 | |
| | | | 填充透明度 | fillAlpha | 填充类型 = color 时,格式:0 ~ 1 | |
| | | | 允许点击 | allowPicking | | |
| | | |
| | | <br /> |
| | | |
| | |
| | | | 纬度 | lon | 纬度 | |
| | | | 高度 | height | 高度 | |
| | | | 半径数组 | bjs | 格式:[1,2,3....],单位:km | |
| | | | 允许点击 | allowPicking | | |
| | | |
| | | <br /> |
| | | |
| | |
| | | | 军标代码类型 | type | 固定 grgxx | |
| | | | 颜色 | color | #000000格式 | |
| | | | 坐标点 | points | 格式:{lon: 111, lat:22, height: 10000}[] | |
| | | | <br /> | | | |
| | | | 允许点击 | allowPicking | | |
| | | |
| | | ### 25. 双色线 |
| | | |
| | |
| | | | 颜色 | color | #000000格式 | |
| | | | 颜色2 | color2 | #FFFFFF格式 | |
| | | | 坐标点 | points | 格式:{lon: 111, lat:22, height: 10000}[] | |
| | | | <br /> | | | |
| | | | 允许点击 | allowPicking | | |
| | | |
| | | ### 26. 通信抗测向线2 |
| | | |
| | |
| | | | 经度 | lat | 经度 | |
| | | | 纬度 | lon | 纬度 | |
| | | | 高度 | height | 高度 | |
| | | | 允许点击 | allowPicking | | |
| | | |
| | | <br /> |
| | | |
| | |
| | | | 军标代码类型 | type | 固定 tzrwfjx | |
| | | | 颜色 | color | #000000格式 | |
| | | | 坐标点 | points | 格式:{lon: 111, lat:22, height: 10000}[] | |
| | | | 允许点击 | allowPicking | | |
| | | |
| | | ### 28. 连指任务分界线 |
| | | |
| | |
| | | | 军标代码类型 | type | 固定 lzrwfjx | |
| | | | 颜色 | color | #000000格式 | |
| | | | 坐标点 | points | 格式:{lon: 111, lat:22, height: 10000}[] | |
| | | | 允许点击 | allowPicking | | |
| | | |
| | | <br /> |
| | |
| | | render() { |
| | | return ( |
| | | <div className={"example_draw_container"}> |
| | | <h3>自动聚合</h3> |
| | | <h3>自动聚合5000点</h3> |
| | | <div className={"map_wrapper"}> |
| | | <GIS refs={e => { |
| | | this.mapFunction = e |
| | |
| | | .then(mdText => { |
| | | this.setState({htmlString: window.marked.parse(mdText)}); |
| | | }); |
| | | this.showData(); |
| | | //监听拨盘事件 |
| | | this.mapFunction.addBpListener(function (id, dom) { |
| | | if (id && dom) { |
| | |
| | | {name: '图标1', img: './project3d/icon/bpImgs/icon-1.png'}, |
| | | {name: '图标2', img: './project3d/icon/bpImgs/icon-2.png'}, |
| | | {name: '图标3', img: './project3d/icon/bpImgs/icon-3.png'}, |
| | | {name: '关闭', img: './project3d/icon/bpImgs/icon-4.png'}, |
| | | {name: '图标4', img: './project3d/icon/bpImgs/icon-4.png'}, |
| | | ] |
| | | }; |
| | | this.setState({ |
| | |
| | | this.setState({ |
| | | clickBpIndex: index |
| | | }); |
| | | if (index === 3) { |
| | | this.closeBp(); |
| | | } |
| | | }); |
| | | } |
| | | }, this); |
| | |
| | | .then(mdText => { |
| | | this.setState({htmlString: window.marked.parse(mdText)}); |
| | | }); |
| | | let op = { |
| | | code: "lddkzcqy", |
| | | type: "lddkzcqy", |
| | | lon: 2, |
| | | lat: 27, |
| | | height: 0, |
| | | bj: 400, |
| | | qsjd: 0, |
| | | zzjd: 360, |
| | | useModify: false |
| | | } |
| | | this.mapFunction.mapApiService.appendBh('bh', [op]); |
| | | } |
| | | |
| | | render() { |
| | |
| | | |
| | | optionObjs = { |
| | | "目标简标": { |
| | | allowPicking: false, |
| | | code: '123123', |
| | | bz: true, |
| | | bzlx: 'simple', |
| | |
| | | iconSize: [[20, 20], [30, 30], [40, 40]] |
| | | }, |
| | | "目标详标": { |
| | | allowPicking: false, |
| | | bz: true, |
| | | bzlx: 'detail', |
| | | jbwb: 'R:00017', |
| | |
| | | iconSize: [[20, 20], [30, 30], [40, 40]] |
| | | }, |
| | | "飞行简标": { |
| | | allowPicking: false, |
| | | bz: true, |
| | | bzlx: 'simple', |
| | | jbwb: "P:00019", |
| | |
| | | iconSize: [[20, 20], [30, 30], [40, 40]] |
| | | }, |
| | | "飞行详标": { |
| | | allowPicking: false, |
| | | bz: true, |
| | | bzlx: 'detail', |
| | | jbwb: 'P:00019', |
| | |
| | | iconSize: [[20, 20], [30, 30], [40, 40]] |
| | | }, |
| | | "雷达对抗侦察区域": { |
| | | allowPicking: false, |
| | | type: "lddkzcqy", |
| | | bj: 1, |
| | | qsjd: 30, |
| | |
| | | iconSize: [[20, 20], [30, 30], [40, 40]] |
| | | }, |
| | | "雷达对抗干扰波束": { |
| | | allowPicking: false, |
| | | type: 'lddkgrps', |
| | | bj: 1, |
| | | qsjd: 30, |
| | |
| | | iconSize: [[20, 20], [30, 30], [40, 40]] |
| | | }, |
| | | "雷达对抗测向线": { |
| | | allowPicking: false, |
| | | type: "lddkcxx", |
| | | kcwb: "10110", |
| | | kcgls: 1, |
| | |
| | | points: [] |
| | | }, |
| | | "雷达对抗关系": { |
| | | allowPicking: false, |
| | | type: "lddkgx", |
| | | kcwb: "10110", |
| | | kcgls: 1, |
| | |
| | | points: [] |
| | | }, |
| | | "雷达对目标探测": { |
| | | allowPicking: false, |
| | | type: "lddmbtc", |
| | | bj: 0.5, |
| | | qsjd: 0, |
| | |
| | | useModify: false, |
| | | }, |
| | | "通信对抗侦察区域": { |
| | | allowPicking: false, |
| | | type: "txdkzcqy", |
| | | bj: 0.5, |
| | | qsjd: 0, |
| | |
| | | useModify: false, |
| | | }, |
| | | "通信对抗干扰波束": { |
| | | allowPicking: false, |
| | | type: "txdkgrps", |
| | | bj: 1, |
| | | qsjd: 30, |
| | |
| | | useModify: false, |
| | | }, |
| | | "通信对抗测向线": { |
| | | allowPicking: false, |
| | | type: "txdkcxx", |
| | | kcgls: 1, |
| | | kcjd: 30, |
| | |
| | | points: [] |
| | | }, |
| | | "通信畅通区域": { |
| | | allowPicking: false, |
| | | type: 'txctqy', |
| | | bj: 0.5, |
| | | qsjd: 0, |
| | |
| | | }, |
| | | "通信网标绘": { |
| | | type: "txw", |
| | | allowPicking: false, |
| | | useModify: false, |
| | | lon: 102.70854539488224, lat: 31.0098468100060593, height: 0, |
| | | points: [] |
| | | }, |
| | | "光电对抗侦察区域": { |
| | | type: 'gddkzcqy', |
| | | allowPicking: false, |
| | | bj: 0.5, |
| | | qsjd: 0, |
| | | zzjd: 360, |
| | |
| | | useModify: false, |
| | | }, |
| | | "光电有源对抗干扰波束": { |
| | | allowPicking: false, |
| | | type: 'gdyydkgrbs', |
| | | kcgls: 1, |
| | | kcjd: 30, |
| | |
| | | useModify: false, |
| | | }, |
| | | "漫反射干扰区域": { |
| | | allowPicking: false, |
| | | type: 'mfsgrqy', |
| | | bj: 1, |
| | | qsjd: 30, |
| | |
| | | useModify: false, |
| | | }, |
| | | '烟幕形成区域': { |
| | | allowPicking: false, |
| | | type: 'ymxcqy', |
| | | points: [{lon: 102.64984, lat: 30.99237, height: 0}, |
| | | {lon: 102.66012682459443, lat: 30.995109020954718, height: 0}, |
| | |
| | | useModify: false, |
| | | }, |
| | | "掩护区域": { |
| | | allowPicking: false, |
| | | type: 'yhqy', |
| | | points: [{lon: 102.642853926199, lat: 31.012509646376447, height: 0}, |
| | | {lon: 102.65927322610115, lat: 31.01540811637356, height: 0}, |
| | |
| | | useModify: false, |
| | | }, |
| | | "协同关系": { |
| | | allowPicking: false, |
| | | type: 'xtgx', |
| | | points: [{lon: 102.642853926199, lat: 31.012509646376447, height: 0}, |
| | | {lon: 102.66192135373299, lat: 31.005988487769518, height: 0}], |
| | | useModify: false, |
| | | }, |
| | | "干扰线": { |
| | | allowPicking: false, |
| | | type: 'grx', |
| | | points: [{lon: 102.732420985008, lat: 30.97556325857848, height: 0}, |
| | | {lon: 102.73983041603873, lat: 30.97504986175468, height: 0}], |
| | | useModify: false |
| | | }, |
| | | "预警线": { |
| | | allowPicking: false, |
| | | type: 'yjx', |
| | | useModify: false, |
| | | points: [{lon: 102.732420985008, lat: 30.97956325857848, height: 0}, |
| | | {lon: 102.73983041603873, lat: 30.98004986175468, height: 0}] |
| | | }, |
| | | "目标分配线": { |
| | | allowPicking: false, |
| | | type: 'mbfpx', |
| | | useModify: false, |
| | | points: [{lon: 102.732420985008, lat: 30.97756325857848, height: 0}, |
| | | {lon: 102.73983041603873, lat: 30.97804986175468, height: 0}] |
| | | }, |
| | | "目标醒目": { |
| | | allowPicking: false, |
| | | bz: true, |
| | | xz: true, |
| | | bzlx: 'simple', |
| | |
| | | import React, {Component} from 'react' |
| | | import './CommonExample.css' |
| | | import {GIS} from "iclient3d-plot-diy"; |
| | | import {Button} from "antd"; |
| | | |
| | | export default class ExampleSimpleEventPage extends Component { |
| | | drawOps = []; |
| | |
| | | this.setState({htmlString: window.marked.parse(mdText)}); |
| | | }); |
| | | //监听拨盘事件 |
| | | this.mapFunction.mapApiService.showDrawDatas([{ |
| | | code: 'asdladjakl', |
| | | bz: true, |
| | | bzColor: '#e000ff', |
| | | bzLineColor: '#ff0000', |
| | | bzlx: 'simple', |
| | | jbwb: 'R:00017', |
| | | type: "2002", |
| | | returnHeight: true, |
| | | useModify: false, |
| | | lon: 102.33054539488224, |
| | | lat: 31.005468100060593, |
| | | height: 0, |
| | | points: [], |
| | | iconSize: [[20, 20], [30, 30], [40, 40]] |
| | | }, { |
| | | type: 'yhqy', |
| | | code: 'xxcxvawda', |
| | | points: [{lon: 102.642853926199, lat: 31.012509646376447, height: 0}, |
| | | {lon: 102.65927322610115, lat: 31.01540811637356, height: 0}, |
| | | {lon: 102.66192135373299, lat: 31.005988487769518, height: 0}, |
| | | {lon: 102.64755620178961, lat: 31.00246196283815, height: 0}, |
| | | {lon: 102.642853926199, lat: 31.012509646376447, height: 0}], |
| | | useModify: false, |
| | | |
| | | }]) |
| | | } |
| | | |
| | | showData() { |
| | | this.mapFunction.mapApiService.mapClickEvent.addEventListener((id, primitive, isPoint) => { |
| | | alert(id); |
| | | // 左击 如果需要dom时的监听 |
| | | this.mapFunction.addEventListener((id, overlay, primitive, data) => { |
| | | alert('gis组件的左击事件:' + id); |
| | | }, this); |
| | | |
| | | // 左击如果需要底层对象的监听 |
| | | this.mapFunction.mapClickEvent.addEventListener((id, primitive, isPoint) => { |
| | | console.log(id, primitive, isPoint); |
| | | alert('左击事件:' + id); |
| | | }, this); |
| | | |
| | | // 右键监听 |
| | | this.mapFunction.mapApiService.mapRightClickEvent.addEventListener((id, primitive, isPoint) => { |
| | | alert(id); |
| | | console.log(id, primitive, isPoint); |
| | | alert('右击事件' + id); |
| | | }, this); |
| | | } |
| | | |
| | | drawPolygon() { |
| | | //监听拨盘事件 |
| | | this.mapFunction.mapApiService.draw({ |
| | | code: 'xxcx_new_', |
| | | type: 'yhqy', |
| | | useModify: true, |
| | | }); |
| | | } |
| | | |
| | | render() { |
| | |
| | | showDefaultLayer={true} |
| | | /> |
| | | </div> |
| | | <Button type="primary" onClick={this.drawPolygon.bind(this)}>新画一个面</Button> |
| | | <div className={"code_wrapper"}> |
| | | <div dangerouslySetInnerHTML={{__html: this.state.htmlString}}></div> |
| | | </div> |
| | |
| | | }] |
| | | }, |
| | | |
| | | "单色线": { |
| | | type: "line", |
| | | bklx: 'solid', |
| | | bkkd: 4, |
| | | color: '#64c324', |
| | | useModify: false, |
| | | points: [{ |
| | | lon: 103.73554539488224, |
| | | lat: 31.005068100060593, |
| | | height: 0, |
| | | }, { |
| | | lon: 104.73554539488224, |
| | | lat: 32.005068100060593, |
| | | height: 0, |
| | | }] |
| | | }, |
| | | "双色线": { |
| | | type: "line", |
| | | bklx: 'double', |
| | | bkkd: 10, |
| | | color: '#64c324', |
| | | color2: '#6932cc', |
| | | bkkd: 4, |
| | | color: '#ff0000', |
| | | color2: '#0000ff', |
| | | useModify: false, |
| | | points: [{ |
| | | lon: 103.73554539488224, |
| | |
| | | import * as echarts from 'echarts'; |
| | | import {Button} from "antd"; |
| | | import {CloseOutlined} from "@ant-design/icons"; |
| | | import {getLocalText} from "iclient3d-plot-diy"; |
| | | |
| | | export default class ProfilePage extends PureComponent { |
| | | chartRef = React.createRef(); |
| | |
| | | <div className="sightLine-char-container"> |
| | | <div className="title-container"> |
| | | <div className="title-name"> |
| | | <span>剖面分析</span> |
| | | <span>{getLocalText('profile')}</span> |
| | | </div> |
| | | <div className="icon-container"> |
| | | <Button type="primary" onClick={this.closeEvent.bind(this)}><CloseOutlined/></Button> |