Skip to content

M
mars3d
Commit 35f0a474 by wanghao
Options

同步代码

parent 804d9322
正在显示 包含 283 行增加 和 136 行删除
package.json
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
"echarts": "^5.4.3", "echarts": "^5.4.3",
"lodash": "^4.17.21", "lodash": "^4.17.21",
"mars3d": "~3.6.0", "mars3d": "~3.6.0",
"mars3d-cesium": "~1.112.0", "mars3d-cesium": "^1.112.0",
"moment": "^2.29.4", "moment": "^2.29.4",
"monaco-editor": "^0.44.0", "monaco-editor": "^0.44.0",
"nprogress": "^0.2.0", "nprogress": "^0.2.0",
......
public/lib/mars3d/mars3d.css
/** /**
* Mars3D三维可视化平台 mars3d * Mars3D三维可视化平台 mars3d
* *
* 版本信息：v3.6.15 * 版本信息：v3.6.16
* 编译日期：2023-12-04 17:35:14 * 编译日期：2023-12-10 22:08:21
* 版权所有：Copyright by 火星科技 http://mars3d.cn * 版权所有：Copyright by 火星科技 http://mars3d.cn
* 使用单位：免费公开版 ，2023-03-17 * 使用单位：免费公开版 ，2023-03-17
*/ */
......
public/lib/mars3d/mars3d.js
This source diff could not be displayed because it is too large. You can view the blob instead.
public/lib/mars3d/plugins/space/mars3d-space.js
This source diff could not be displayed because it is too large. You can view the blob instead.
public/lib/mars3d/plugins/wind/mars3d-wind.js
This source diff could not be displayed because it is too large. You can view the blob instead.
public/temp/css/style.css
...@@ -292,26 +292,30 @@ html { ...@@ -292,26 +292,30 @@ html {
.mars3d-sub-menu { .mars3d-sub-menu {
background-color: rgba(23, 49, 71, 0.8); background-color: rgba(23, 49, 71, 0.8);
} }
.mars3d-contextmenu-ul > li > a:hover,
.mars3d-sub-menu > li > a:hover, .mars3d-contextmenu-ul>li>a:hover,
.mars3d-contextmenu-ul > li > a:focus, .mars3d-sub-menu>li>a:hover,
.mars3d-sub-menu > li > a:focus, .mars3d-contextmenu-ul>li>a:focus,
.mars3d-contextmenu-ul > li > .active, .mars3d-sub-menu>li>a:focus,
.mars3d-sub-menu > li > .active { .mars3d-contextmenu-ul>li>.active,
.mars3d-sub-menu>li>.active {
background-color: #3ea6ff; background-color: #3ea6ff;
} }
.mars3d-contextmenu-ul > .active > a,
.mars3d-sub-menu > .active > a, .mars3d-contextmenu-ul>.active>a,
.mars3d-contextmenu-ul > .active > a:hover, .mars3d-sub-menu>.active>a,
.mars3d-sub-menu > .active > a:hover, .mars3d-contextmenu-ul>.active>a:hover,
.mars3d-contextmenu-ul > .active > a:focus, .mars3d-sub-menu>.active>a:hover,
.mars3d-sub-menu > .active > a:focus { .mars3d-contextmenu-ul>.active>a:focus,
.mars3d-sub-menu>.active>a:focus {
background-color: #3ea6ff; background-color: #3ea6ff;
} }
/* Popup样式*/ /* Popup样式*/
.mars3d-popup-color { .mars3d-popup-color {
color: #ffffff; color: #ffffff;
} }
.mars3d-popup-background { .mars3d-popup-background {
background: rgba(23, 49, 71, 0.8); background: rgba(23, 49, 71, 0.8);
} }
...@@ -320,15 +324,19 @@ html { ...@@ -320,15 +324,19 @@ html {
background: rgba(23, 49, 71, 0.8); background: rgba(23, 49, 71, 0.8);
border: 1px solid rgba(23, 49, 71, 0.8); border: 1px solid rgba(23, 49, 71, 0.8);
} }
.mars3d-tooltip-top:before { .mars3d-tooltip-top:before {
border-top-color: rgba(23, 49, 71, 0.8); border-top-color: rgba(23, 49, 71, 0.8);
} }
.mars3d-tooltip-bottom:before { .mars3d-tooltip-bottom:before {
border-bottom-color: rgba(23, 49, 71, 0.8); border-bottom-color: rgba(23, 49, 71, 0.8);
} }
.mars3d-tooltip-left:before { .mars3d-tooltip-left:before {
border-left-color: rgba(23, 49, 71, 0.8); border-left-color: rgba(23, 49, 71, 0.8);
} }
.mars3d-tooltip-right:before { .mars3d-tooltip-right:before {
border-right-color: rgba(23, 49, 71, 0.8); border-right-color: rgba(23, 49, 71, 0.8);
} }
...@@ -336,9 +344,11 @@ html { ...@@ -336,9 +344,11 @@ html {
.mars3d-template-content label { .mars3d-template-content label {
padding-right: 6px; padding-right: 6px;
} }
.mars3d-template-titile { .mars3d-template-titile {
border-bottom: 1px solid #3ea6ff; border-bottom: 1px solid #3ea6ff;
} }
.mars3d-template-titile a { .mars3d-template-titile a {
font-size: 16px; font-size: 16px;
} }
...@@ -347,6 +357,7 @@ html { ...@@ -347,6 +357,7 @@ html {
padding: 3px 10px; padding: 3px 10px;
border: 1px solid #209ffd; border: 1px solid #209ffd;
background: #209ffd1c; background: #209ffd1c;
color: #ffffff;
} }
.mars3d-popup-content { .mars3d-popup-content {
...@@ -355,4 +366,4 @@ html { ...@@ -355,4 +366,4 @@ html {
.mars3d-divGraphic:hover { .mars3d-divGraphic:hover {
z-index: 999 !important; z-index: 999 !important;
} }
\ No newline at end of file
src/components/MarsSample/GraphicLayerState.tsx
...@@ -220,21 +220,21 @@ function bindLayerContextMenu() { ...@@ -220,21 +220,21 @@ function bindLayerContextMenu() {
} }
// 表格中的矢量数据命名 // 表格中的矢量数据命名
let graphicIndex = 0
function getGraphicName(graphic) { function getGraphicName(graphic) {
if (graphic?.style?.label?.text) {
return `${graphic.type} - ${graphic.style.label.text}`
}
if (graphic.name) { if (graphic.name) {
return `${graphic.type} - ${graphic.name}` return `${graphic.type} - ${graphic.name}`
} }
if (graphic.attr.index) {
return `${graphic.type} - ${graphic.attr.index}`
}
if (graphic.attr.remark) { if (graphic.attr.remark) {
return `${graphic.type} - ${graphic.attr.remark}` return `${graphic.type} - ${graphic.attr.remark}`
} }
if (graphic?.style?.label?.text) {
return `${graphic.type} - ${graphic.style.label.text}`
}
graphic.name = `未命名${++graphicIndex}` return `${graphic.type} - ${graphic.name || "未命名"}`
return `${graphic.type} - ${graphic.name}`
} }
export class GraphicLayerState extends Component<any, any> { export class GraphicLayerState extends Component<any, any> {
...@@ -254,6 +254,7 @@ export class GraphicLayerState extends Component<any, any> { ...@@ -254,6 +254,7 @@ export class GraphicLayerState extends Component<any, any> {
enabledRightMenu: false, enabledRightMenu: false,
enabledShowHide: true, enabledShowHide: true,
enabledOpacity: true, enabledOpacity: true,
isDrawing: false,
opacity: 1, opacity: 1,
currentPage: 5, // 分页查询每页条数 currentPage: 5, // 分页查询每页条数
graphicDataList: [], // 表格数据 graphicDataList: [], // 表格数据
...@@ -338,6 +339,11 @@ export class GraphicLayerState extends Component<any, any> { ...@@ -338,6 +339,11 @@ export class GraphicLayerState extends Component<any, any> {
this.setState({ this.setState({
hasTable: graphics.length > 0 hasTable: graphics.length > 0
}) })
const that = this
layer.on([mars3d.EventType.drawCreated, mars3d.EventType.addGraphic, mars3d.EventType.removeGraphic], function (e) {
that.setState({ isDrawing: layer.isDrawing })
})
} }
const that = this const that = this
...@@ -446,15 +452,11 @@ export class GraphicLayerState extends Component<any, any> { ...@@ -446,15 +452,11 @@ export class GraphicLayerState extends Component<any, any> {
if (!isActive("GraphicEditor") || lastGraphic !== graphic) { if (!isActive("GraphicEditor") || lastGraphic !== graphic) {
activate({ activate({
name: "GraphicEditor", name: "GraphicEditor",
data: { data: { graphic }
graphic
}
}) })
lastGraphic = graphic lastGraphic = graphic
} else { } else {
updateWidget("GraphicEditor", { updateWidget("GraphicEditor", { graphic })
graphic
})
} }
} }
...@@ -545,11 +547,23 @@ export class GraphicLayerState extends Component<any, any> { ...@@ -545,11 +547,23 @@ export class GraphicLayerState extends Component<any, any> {
// drawLabel1 // drawLabel1
onClickStartDraw() { onClickStartDraw() {
mapWork.startDrawGraphic() mapWork.startDrawGraphic()
const layer = getManagerLayer()
this.setState({ isDrawing: layer.isDrawing })
} }
// drawLabel2 // drawLabel2
onClickStartDraw2() { onClickStartDraw2() {
mapWork.startDrawGraphic2() mapWork.startDrawGraphic2()
const layer = getManagerLayer()
this.setState({ isDrawing: layer.isDrawing })
}
onClickClearDrawing() {
const layer = getManagerLayer()
layer.clearDrawing()
this.setState({ isDrawing: layer.isDrawing })
} }
// 是否编辑 // 是否编辑
...@@ -591,10 +605,7 @@ export class GraphicLayerState extends Component<any, any> { ...@@ -591,10 +605,7 @@ export class GraphicLayerState extends Component<any, any> {
graphicDataList.length = 0 graphicDataList.length = 0
rowKeys.length = 0 rowKeys.length = 0
this.setState({ this.setState({ graphicDataList: [], rowKeys: [], isDrawing: false })
graphicDataList: [],
rowKeys: []
})
if (this.props.customEditor) { if (this.props.customEditor) {
this.props.onStopEditor() this.props.onStopEditor()
...@@ -746,10 +757,19 @@ export class GraphicLayerState extends Component<any, any> { ...@@ -746,10 +757,19 @@ export class GraphicLayerState extends Component<any, any> {
> >
<Space> <Space>
<span className="mars-pannel-item-label">数据维护:</span> <span className="mars-pannel-item-label">数据维护:</span>
<MarsButton onClick={() => this.onClickStartDraw()}>{this.state.drawLabel1}</MarsButton> <MarsButton onClick={() => this.onClickStartDraw()} style={{ display: !this.state.isDrawing ? "block" : "none" }}>
<MarsButton onClick={() => this.onClickStartDraw2()} style={{ display: this.state.drawLabel2 ? "block" : "none" }}> {this.state.drawLabel1}
</MarsButton>
<MarsButton
onClick={() => this.onClickStartDraw2()}
style={{ display: this.state.drawLabel2 && !this.state.isDrawing ? "block" : "none" }}
>
{this.state.drawLabel2} {this.state.drawLabel2}
</MarsButton> </MarsButton>
<MarsButton onClick={() => this.onClickClearDrawing()} style={{ display: this.state.isDrawing ? "block" : "none" }}>
取消绘制
</MarsButton>
<span <span
className={classNames({ className={classNames({
"f-dn": !this.state.interaction && this.state.enabledEdit "f-dn": !this.state.interaction && this.state.enabledEdit
...@@ -824,7 +844,7 @@ export class GraphicLayerState extends Component<any, any> { ...@@ -824,7 +844,7 @@ export class GraphicLayerState extends Component<any, any> {
</Space> </Space>
</div> </div>
<div className="f-mb t-tac" style={{ width: "400px" }}> <div className="f-mb t-tac" style={{ width: "450px" }}>
{this.state.hasTable ? ( {this.state.hasTable ? (
<MarsTable <MarsTable
bordered bordered
......
src/components/MarsSample/LayerState.tsx
import { MarsPannel, $alert, MarsCheckboxGroup, MarsCheckbox } from "@mars/components/MarsUI" import { MarsPannel, $alert, MarsCheckboxGroup, MarsCheckbox } from "@mars/components/MarsUI"
import { useEffect, useMemo, useState } from "react" import { useEffect, useMemo, useState } from "react"
import { activate, disable, updateWidget, isActive } from "@mars/widgets/common/store/widget"
import { Space } from "antd" import { Space } from "antd"
const mapWork = window.mapWork const mapWork = window.mapWork
const mars3d = mapWork.mars3d const mars3d = mapWork.mars3d
...@@ -178,8 +179,45 @@ export const LayerState = (props) => { ...@@ -178,8 +179,45 @@ export const LayerState = (props) => {
setToolTip(layer.hasTooltip()) setToolTip(layer.hasTooltip())
setMenu(layer.hasContextMenu()) setMenu(layer.hasContextMenu())
} }
// 矢量数据创建完成
mapWork.graphicLayer.on(mars3d.EventType.drawCreated, (e) => {
showEditor(e.graphic)
})
// 修改了矢量数据
mapWork.graphicLayer.on(
[mars3d.EventType.editStart, mars3d.EventType.editMovePoint, mars3d.EventType.editStyle, mars3d.EventType.editRemovePoint],
(e) => {
showEditor(e.graphic)
}
)
// 停止编辑
mapWork.graphicLayer.on([mars3d.EventType.editStop, mars3d.EventType.removeGraphic], (e) => {
setTimeout(() => {
if (!mapWork.graphicLayer.isEditing) {
disable("graphic-editor")
}
}, 100)
})
}, []) }, [])
// 展示属性面板
const showEditor = (graphic: any) => {
if (!graphic._conventStyleJson) {
graphic.options.style = graphic.toJSON().style // 因为示例中的样式可能有复杂对象，需要转为单个json简单对象
graphic._conventStyleJson = true // 只处理一次
}
if (!isActive("GraphicEditor")) {
activate({
name: "GraphicEditor",
data: { graphic }
})
} else {
updateWidget("GraphicEditor", { graphic })
}
}
// 控制显示隐藏 // 控制显示隐藏
const onChangeShow = (e) => { const onChangeShow = (e) => {
const checked = e.target.checked const checked = e.target.checked
......
src/components/MarsUI/MarsInputNumber/index.less
...@@ -9,4 +9,9 @@ ...@@ -9,4 +9,9 @@
color: @mars-base-color; color: @mars-base-color;
} }
} }
.ant-input-number-input-wrap {
.ant-input-number-input {
color: @mars-base-color;
}
}
} }
src/components/MarsUI/MarsInputNumber/index.tsx
...@@ -4,5 +4,5 @@ import type { InputNumberProps } from "antd/lib/input-number" ...@@ -4,5 +4,5 @@ import type { InputNumberProps } from "antd/lib/input-number"
import "./index.less" import "./index.less"
export const MarsInputNumber = forwardRef<HTMLInputElement, InputNumberProps>((props, ref) => { export const MarsInputNumber = forwardRef<HTMLInputElement, InputNumberProps>((props, ref) => {
return <InputNumber className="mars-input-number" ref={ref} {...props}></InputNumber> return <InputNumber className="mars-input-number" ref={ref} {...props} precision={props.tofixed}></InputNumber>
}) })
src/components/MarsUI/MarsSlider/index.less
.mars-slider.ant-slider { .mars-slider.ant-slider {
margin: 0px 10px 6px 6px; margin: 0px 10px 6px 10px;
.ant-slider-mark-text { .ant-slider-mark-text {
color: @mars-base-color !important; color: @mars-base-color !important;
top: 5px; top: 5px;
......
src/example/effect/colorCorrection/index.less
.ant-slider { .ant-slider {
width: 120px !important; width: 150px !important;
} }
.mars-slider.ant-slider { .mars-slider.ant-slider {
margin: 0px 10px 3px 6px; margin: 0px 10px 3px 10px;
} }
src/example/effect/colorCorrection/index.tsx
...@@ -10,12 +10,15 @@ function UIComponent(props) { ...@@ -10,12 +10,15 @@ function UIComponent(props) {
const [hue, setHue] = useState(0.0) const [hue, setHue] = useState(0.0)
const [saturation, setSaturation] = useState(1.0) const [saturation, setSaturation] = useState(1.0)
return ( return (
<MarsPannel visible={true} right="10" top="10" width={205}> <MarsPannel visible={true} right="10" top="10" width={260}>
<MarsForm {...{ labelCol: { span: 6 } }}> <MarsForm {...{ labelCol: { span: 7 }, labelAlign: "right" }}>
<MarsFormItem label="启用"> <MarsFormItem label="启用">
<MarsSwitch defaultChecked onChange={(v) => { <MarsSwitch
mapWork.setDepthOfField(v) defaultChecked
}}></MarsSwitch> onChange={(v) => {
mapWork.setDepthOfField(v)
}}
></MarsSwitch>
</MarsFormItem> </MarsFormItem>
<MarsFormItem label="亮度"> <MarsFormItem label="亮度">
......
src/example/effect/outlineEffect/index.tsx
...@@ -7,101 +7,95 @@ function UIComponent() { ...@@ -7,101 +7,95 @@ function UIComponent() {
{ {
type: "switch", type: "switch",
field: "enabled", field: "enabled",
label: "开启效果：", label: "开启：",
value: true, value: true,
change(value) { change(value) {
mapWork.changeState(value) mapWork.changeState(value)
} }
}, },
{ {
type: "switch", type: "color",
field: "glow", field: "color",
label: "发光", label: "轮廓线颜色",
value: false, value: "#ffff00",
change(value) { change(value) {
mapWork.changeGlow(value) mapWork.changeColor(value)
} }
},
{
type: "switch",
field: "onlySelected",
label: "只显示选中",
value: false,
change(value) {
mapWork.changeOnlySelected(value)
}
}, },
{ {
type: "switch", type: "color",
field: "showPlane", field: "colorHidden",
label: "边缘平面", label: "被遮挡线颜色",
value: false, value: "#ffff00",
change(value) { change(value) {
mapWork.changeShowPlane(value) mapWork.changeColorHidden(value)
} }
}, },
{ {
type: "number", type: "slider",
field: "width", field: "width",
label: "线宽", label: "线宽",
value: "6", min: 0.1,
change(value) { max: 10,
mapWork.changeWidth(value) step: 0.1,
} value: 6,
change(value) {
mapWork.changeWidth(value)
}
}, },
{ {
type: "slider", type: "switch",
field: "glowPower", field: "showPlane",
label: "发光强度", label: "是否显示边缘",
value: 1.0, value: false,
min: 0.0, change(value) {
max: 10.0, mapWork.changeShowPlane(value)
step: 0.01, }
change(value) {
mapWork.changeGlowPower(value)
}
}, },
{ {
type: "slider", type: "slider",
field: "glowStrength", field: "planeAngle",
label: "发光增量", label: "边缘法线夹角",
value: 3.0, value: 10.0,
min: 0.0, min: 0,
max: 10.0, max: 10.0,
step: 0.01, step: 0.1,
change(value) { change(value) {
mapWork.changeGlowStrength(value) mapWork.changePlaneAngle(value)
} }
}, },
{ {
type: "slider", type: "switch",
field: "planeAngle", field: "glow",
label: "法线夹角", label: "发光",
value: 10.0, value: false,
min: 0, change(value) {
max: 360, mapWork.changeGlow(value)
step: 0.01, }
change(value) {
mapWork.changePlaneAngle(value)
}
}, },
{ {
type: "color", type: "slider",
field: "color", field: "glowPower",
label: "轮廓线颜色", label: "发光强度",
value: "#fff", value: 1.0,
change(value) { min: 0.0,
mapWork.changeColor(value) max: 10.0,
} step: 0.01,
change(value) {
mapWork.changeGlowPower(value)
}
}, },
{ {
type: "color", type: "slider",
field: "colorHidden", field: "glowStrength",
label: "被遮挡轮廓线颜色", label: "发光增量",
value: "#fff", value: 3.0,
change(value) { min: 0.0,
mapWork.changeColorHidden(value) max: 10.0,
} step: 0.01,
change(value) {
mapWork.changeGlowStrength(value)
}
} }
] ]
return ( return (
......
src/example/graphic/entity/arrow/index.tsx
...@@ -6,7 +6,7 @@ function UIComponent() { ...@@ -6,7 +6,7 @@ function UIComponent() {
return ( return (
<> <>
<MarsPannel visible={true} top={10} right={10}> <MarsPannel visible={true} top={10} right={10}>
<GraphicLayerState /> <GraphicLayerState drawLabel1={"绘制直箭头"} drawLabel2={"绘制燕尾直箭头"} />
</MarsPannel> </MarsPannel>
<LocationTo /> <LocationTo />
</> </>
......
src/example/graphic/entity/label/map.js
...@@ -123,6 +123,57 @@ function addDemoGraphic3(graphicLayer) { ...@@ -123,6 +123,57 @@ function addDemoGraphic3(graphicLayer) {
attr: { remark: "示例3" } attr: { remark: "示例3" }
}) })
graphicLayer.addGraphic(graphic) graphicLayer.addGraphic(graphic)
// 演示个性化处理graphic
initGraphicManager(graphic)
}
// 也可以在单个Graphic上做个性化管理及绑定操作
function initGraphicManager(graphic) {
// 3.在graphic上绑定监听事件
// graphic.on(mars3d.EventType.click, function (event) {
// console.log("监听graphic，单击了矢量对象", event)
// })
// 绑定Tooltip
// graphic.bindTooltip('我是graphic上绑定的Tooltip') //.openTooltip()
// 绑定Popup
const inthtml = `<table style="width: auto;">
<tr>
<th scope="col" colspan="2" style="text-align:center;font-size:15px;">我是graphic上绑定的Popup </th>
</tr>
<tr>
<td>提示：</td>
<td>这只是测试信息，可以任意html</td>
</tr>
</table>`
graphic.bindPopup(inthtml).openPopup()
// 绑定右键菜单
graphic.bindContextMenu([
{
text: "删除对象[graphic绑定的]",
icon: "fa fa-trash-o",
callback: (e) => {
const graphic = e.graphic
if (graphic) {
graphic.remove()
}
}
}
])
// 测试 颜色闪烁
if (graphic.startFlicker) {
graphic.startFlicker({
time: 20, // 闪烁时长（秒）
maxAlpha: 0.5,
onEnd: function () {
// 结束后回调
}
})
}
} }
function addDemoGraphic4(graphicLayer) { function addDemoGraphic4(graphicLayer) {
...@@ -144,6 +195,7 @@ function addDemoGraphic4(graphicLayer) { ...@@ -144,6 +195,7 @@ function addDemoGraphic4(graphicLayer) {
attr: { remark: "示例4" } attr: { remark: "示例4" }
}) })
graphicLayer.addGraphic(graphic) graphicLayer.addGraphic(graphic)
} }
// 生成演示数据(测试数据量) // 生成演示数据(测试数据量)
......
src/example/graphic/entity/polyline/index.tsx
import { MarsPannel } from "@mars/components/MarsUI" import { MarsPannel, MarsButton } from "@mars/components/MarsUI"
import { GraphicLayerState } from "@mars/components/MarsSample/GraphicLayerState" import { GraphicLayerState } from "@mars/components/MarsSample/GraphicLayerState"
import { LocationTo } from "@mars/components/MarsSample/LocationTo" import { LocationTo } from "@mars/components/MarsSample/LocationTo"
import * as mapWork from "./map.js"
function UIComponent() { function UIComponent() {
return ( return (
<> <>
<MarsPannel visible={true} top={10} right={10}> <MarsPannel visible={true} top={10} right={10}>
<GraphicLayerState drawLabel1={"绘制线"} drawLabel2={"绘制闭合线"} /> <GraphicLayerState drawLabel1={"绘制线"} drawLabel2={"绘制闭合线"} />
<div>
<MarsButton onClick={() => mapWork.startDrawBrushLine()}>绘制自由曲线</MarsButton>
</div>
</MarsPannel> </MarsPannel>
<LocationTo /> <LocationTo />
</> </>
......
src/example/graphic/entity/polyline/map.js
...@@ -80,6 +80,9 @@ function addDemoGraphic1(graphicLayer) { ...@@ -80,6 +80,9 @@ function addDemoGraphic1(graphicLayer) {
style: { style: {
width: 5, width: 5,
color: "#3388ff", color: "#3388ff",
// color: Cesium.CallbackProperty(function () {
// return Cesium.Color.BLUE
// }, false),
label: { text: "鼠标移入会高亮", pixelOffsetY: -30 }, label: { text: "鼠标移入会高亮", pixelOffsetY: -30 },
// 高亮时的样式（默认为鼠标移入，也可以指定type:'click'单击高亮），构造后也可以openHighlight、closeHighlight方法来手动调用 // 高亮时的样式（默认为鼠标移入，也可以指定type:'click'单击高亮），构造后也可以openHighlight、closeHighlight方法来手动调用
......
src/example/layer-graphic/draw/draw-model-list/index.tsx
...@@ -125,7 +125,7 @@ function UIComponent() { ...@@ -125,7 +125,7 @@ function UIComponent() {
</MarsFormItem> </MarsFormItem>
<MarsFormItem> <MarsFormItem>
<MarsCheckbox onChange={(e) => mapWork.chkTestTerrain(e.target.checked)}>深度检测</MarsCheckbox> <MarsCheckbox onChange={(e) => mapWork.chkTestTerrain(e.target.checked)}>深度检测</MarsCheckbox>
<MarsCheckbox onChange={(e) => mapWork.onlyPickModelPosition(e.target.checked)}>仅在Tiles上拾取</MarsCheckbox> <MarsCheckbox onChange={(e) => mapWork.onlyPickModelPosition(e.target.checked)}>仅在模型或矢量上拾取</MarsCheckbox>
</MarsFormItem> </MarsFormItem>
<MarsFormItem> <MarsFormItem>
<MarsSelect onChange={(e) => handleChange(e)} defaultValue={"车辆"}> <MarsSelect onChange={(e) => handleChange(e)} defaultValue={"车辆"}>
......
src/example/layer-graphic/draw/draw-model/index.tsx
...@@ -70,7 +70,7 @@ function UIComponent() { ...@@ -70,7 +70,7 @@ function UIComponent() {
</MarsFormItem> </MarsFormItem>
<MarsFormItem> <MarsFormItem>
<MarsCheckbox onChange={(e) => mapWork.chkTestTerrain(e.target.checked)}>深度检测</MarsCheckbox> <MarsCheckbox onChange={(e) => mapWork.chkTestTerrain(e.target.checked)}>深度检测</MarsCheckbox>
<MarsCheckbox onChange={(e) => mapWork.onlyPickModelPosition(e.target.checked)}>仅在Tiles上拾取</MarsCheckbox> <MarsCheckbox onChange={(e) => mapWork.onlyPickModelPosition(e.target.checked)}>仅在模型或矢量上拾取</MarsCheckbox>
<MarsCheckbox onChange={(e) => mapWork.chkHasTerrain(e.target.checked)} defaultChecked={true}> <MarsCheckbox onChange={(e) => mapWork.chkHasTerrain(e.target.checked)} defaultChecked={true}>
地形 地形
</MarsCheckbox> </MarsCheckbox>
......
src/example/layer-graphic/draw/draw/index.tsx
...@@ -85,7 +85,7 @@ function UIComponent() { ...@@ -85,7 +85,7 @@ function UIComponent() {
value: "iseditable" value: "iseditable"
}, },
{ {
label: "仅在Tiles上拾取", label: "仅在模型或矢量上拾取",
value: "only3dtiles" value: "only3dtiles"
} }
], ],
......
src/example/layer-graphic/geojson/basis/index.tsx
...@@ -100,6 +100,15 @@ const list = [ ...@@ -100,6 +100,15 @@ const list = [
changeGraphicData() changeGraphicData()
} }
},
{
name: "GCJ纠偏",
callback: () => {
setDefuatData()
mapWork.showGCJ02Data()
changeGraphicData()
}
} }
] ]
......
src/example/thing/analysis/measure/map.js
...@@ -133,7 +133,16 @@ export function measureAngle() { ...@@ -133,7 +133,16 @@ export function measureAngle() {
// 坐标测量 // 坐标测量
export function measurePoint() { export function measurePoint() {
measure.point() measure.point({
// popup: function (point, graphic) {
// return `<div class="mars3d-template-title">位置信息</div>
// <div class="mars3d-template-content">
// <div><label>经度</label>${point.lng}</div>
// <div><label>纬度</label>${point.lat}</div>
// <div><label>海拔</label>${point.alt}米</div>
// </div>`
// }
})
} }
function addDemoGraphic1(graphicLayer) { function addDemoGraphic1(graphicLayer) {
......
src/example/thirdParty/turf/nearestPoint/index.tsx
...@@ -6,7 +6,8 @@ function UIComponent() { ...@@ -6,7 +6,8 @@ function UIComponent() {
return ( return (
<MarsPannel visible={true} top={10} right={10}> <MarsPannel visible={true} top={10} right={10}>
<Space> <Space>
<span>提示：请单击地图，分析拾取点最近的体育场所。</span> <span>绘制:</span>
<MarsButton onClick={() => mapWork.drawPoint()}>选择点</MarsButton>
<MarsButton onClick={() => mapWork.clearAll()}>清除</MarsButton> <MarsButton onClick={() => mapWork.clearAll()}>清除</MarsButton>
</Space> </Space>
</MarsPannel> </MarsPannel>
......
src/widgets/basic/GraphicEditor/MarsStyle.tsx
...@@ -40,7 +40,7 @@ interface MarsAttrProps { ...@@ -40,7 +40,7 @@ interface MarsAttrProps {
onChange?: (value?: any) => void onChange?: (value?: any) => void
} }
let newViewMaterials: any[] = [] let newViewMaterials: any[] = []
export default function MarsStyle({ style, layerName, customType, graphicType, onChange = () => { } }: MarsAttrProps) { export default function MarsStyle({ style, layerName, customType, graphicType, onChange = () => {} }: MarsAttrProps) {
const originStyles = useRef([]) // 完整的属性数据 const originStyles = useRef([]) // 完整的属性数据
const [styleValue, setStyleValue] = useState<any>(null) // 矢量数据样式属性对象 const [styleValue, setStyleValue] = useState<any>(null) // 矢量数据样式属性对象
const [viewStyles, setViewStyles] = useState<any[]>([]) // 当前状态下显示的属性数组 const [viewStyles, setViewStyles] = useState<any[]>([]) // 当前状态下显示的属性数组
...@@ -311,6 +311,7 @@ export default function MarsStyle({ style, layerName, customType, graphicType, o ...@@ -311,6 +311,7 @@ export default function MarsStyle({ style, layerName, customType, graphicType, o
onChange={(e) => { onChange={(e) => {
unionChange(item, e instanceof Object ? e.target.value : e, item.data) unionChange(item, e instanceof Object ? e.target.value : e, item.data)
}} }}
tofixed={item.toFixed}
></StyleItem> ></StyleItem>
} }
</td> </td>
...@@ -364,6 +365,7 @@ export default function MarsStyle({ style, layerName, customType, graphicType, o ...@@ -364,6 +365,7 @@ export default function MarsStyle({ style, layerName, customType, graphicType, o
labelChange(item, e instanceof Object ? e.target.value : e) labelChange(item, e instanceof Object ? e.target.value : e)
// } // }
}} }}
tofixed={item.toFixed}
></StyleItem> ></StyleItem>
} }
</td> </td>
......
src/widgets/basic/GraphicEditor/config/style.js
...@@ -2693,7 +2693,6 @@ const styleConfig = { ...@@ -2693,7 +2693,6 @@ const styleConfig = {
defval: "#ffffff", defval: "#ffffff",
show(style, allStyle, graphicType) { show(style, allStyle, graphicType) {
return style.outline && (style.diffHeight || !style.outlineStyle) return style.outline && (style.diffHeight || !style.outlineStyle)
} }
}, },
...@@ -2929,6 +2928,7 @@ const styleConfig = { ...@@ -2929,6 +2928,7 @@ const styleConfig = {
name: "radius", name: "radius",
label: "半径", label: "半径",
type: "number", type: "number",
toFixed: 2,
step: 0.1, step: 0.1,
defval: 0.0 defval: 0.0
}, },
......
src/widgets/basic/GraphicEditor/index.tsx
...@@ -21,7 +21,6 @@ function GraphicEditor({ currentWidget, ...props }) { ...@@ -21,7 +21,6 @@ function GraphicEditor({ currentWidget, ...props }) {
const [customType, setCustomType] = useState("") const [customType, setCustomType] = useState("")
const [graphicType, setGraphicType] = useState("") const [graphicType, setGraphicType] = useState("")
const [acTab, setAcTab] = useState("style") const [acTab, setAcTab] = useState("style")
const tabChange = useCallback((key: string) => { const tabChange = useCallback((key: string) => {
...@@ -61,12 +60,7 @@ function GraphicEditor({ currentWidget, ...props }) { ...@@ -61,12 +60,7 @@ function GraphicEditor({ currentWidget, ...props }) {
footer={ footer={
<MarsTabs tabPosition="bottom" activeKey={acTab} type="card" onTabClick={tabChange}> <MarsTabs tabPosition="bottom" activeKey={acTab} type="card" onTabClick={tabChange}>
<MarsTabPane key="style" tab="样式"></MarsTabPane> <MarsTabPane key="style" tab="样式"></MarsTabPane>
{ {showAvailability ? <MarsTabPane key="availability" tab="时序"></MarsTabPane> : ""}
showAvailability ? <MarsTabPane key="availability" tab="时序"></MarsTabPane> : ""
}
</MarsTabs> </MarsTabs>
} }
> >
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论