Skip to content

M
mars3d
Commit 0015a974 by wanghao
Options

同步代码

parent 405559b4
正在显示 包含 1084 行增加 和 94 行删除
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.110.0", "mars3d-cesium": "~1.111.1",
"monaco-editor": "^0.33.0", "monaco-editor": "^0.33.0",
"nprogress": "^0.2.0", "nprogress": "^0.2.0",
"react": "^18.2.0", "react": "^18.2.0",
......
public/config/example.json
...@@ -608,12 +608,14 @@ ...@@ -608,12 +608,14 @@
{ {
"name": "双屏对比", "name": "双屏对比",
"thumbnail": "map-double-compare.jpg", "thumbnail": "map-double-compare.jpg",
"main": "map/double/compare" "main": "map/double/compare",
"hasPannel": true
}, },
{ {
"name": "卷帘对比", "name": "卷帘对比",
"thumbnail": "control-basis-mapSplit.jpg", "thumbnail": "control-basis-mapSplit.jpg",
"main": "control/basis/mapSplit" "main": "control/basis/mapSplit",
"hasPannel": true
}, },
{ {
"name": "鹰眼地图", "name": "鹰眼地图",
...@@ -950,6 +952,11 @@ ...@@ -950,6 +952,11 @@
"resources": ["/temp/css/divGraphic.css", "/lib/dom2img/dom-to-image.js"] "resources": ["/temp/css/divGraphic.css", "/lib/dom2img/dom-to-image.js"]
}, },
{ {
"name": "全景点展示",
"thumbnail": "graphic-entity-billboard-panorama.jpg",
"main": "graphic/entity/billboard-panorama"
},
{
"name": "Plane 平面", "name": "Plane 平面",
"thumbnail": "graphic-entity-plane.jpg", "thumbnail": "graphic-entity-plane.jpg",
"main": "graphic/entity/plane", "main": "graphic/entity/plane",
...@@ -1484,6 +1491,12 @@ ...@@ -1484,6 +1491,12 @@
"thumbnail": "graphic-combine-water.jpg", "thumbnail": "graphic-combine-water.jpg",
"main": "graphic/combine/water", "main": "graphic/combine/water",
"hasPannel": true "hasPannel": true
},
{
"name": "河流断面水面动态升降",
"thumbnail": "graphic-combine-water-section.jpg",
"main": "graphic/combine/water-section",
"resources": ["water-data.js"]
} }
] ]
}, },
...@@ -2364,7 +2377,8 @@ ...@@ -2364,7 +2377,8 @@
{ {
"name": "双屏对比", "name": "双屏对比",
"thumbnail": "map-double-compare.jpg", "thumbnail": "map-double-compare.jpg",
"main": "map/double/compare" "main": "map/double/compare",
"hasPannel": true
}, },
{ {
"name": "二三维联动(与leaflet)", "name": "二三维联动(与leaflet)",
...@@ -2523,7 +2537,41 @@ ...@@ -2523,7 +2537,41 @@
] ]
}, },
{ {
"name": "各种特效", "name": "其他",
"children": [
{
"name": "月球",
"thumbnail": "map-other-moon.jpg",
"main": "map/other/moon",
"resources": ["background.css"]
}
]
}
]
},
{
"name": "特效",
"icon": "fa-futbol-o",
"children": [
{
"name": "对象交互特效",
"children": [
{
"name": "对象描边",
"thumbnail": "effect-outlineEffect.jpg",
"main": "effect/outlineEffect",
"hasPannel": true
},
{
"name": "对象泛光",
"thumbnail": "effect-bloomTarget.jpg",
"main": "effect/bloomTarget",
"hasPannel": true
}
]
},
{
"name": "天气特效",
"children": [ "children": [
{ {
"name": "雾天气", "name": "雾天气",
...@@ -2547,17 +2595,16 @@ ...@@ -2547,17 +2595,16 @@
"name": "云图", "name": "云图",
"thumbnail": "graphic-entity-rectangle-cloud.gif", "thumbnail": "graphic-entity-rectangle-cloud.gif",
"main": "graphic/entity/rectangle-cloud" "main": "graphic/entity/rectangle-cloud"
}
]
}, },
{ {
"name": "对象描边", "name": "色彩特效",
"thumbnail": "effect-outlineEffect.jpg", "children": [
"main": "effect/outlineEffect",
"hasPannel": true
},
{ {
"name": "对象泛光", "name": "颜色校正",
"thumbnail": "effect-bloomTarget.jpg", "thumbnail": "effect-colorCorrection.jpg",
"main": "effect/bloomTarget", "main": "effect/colorCorrection",
"hasPannel": true "hasPannel": true
}, },
{ {
...@@ -2573,18 +2620,6 @@ ...@@ -2573,18 +2620,6 @@
"hasPannel": true "hasPannel": true
}, },
{ {
"name": "夜视效果",
"thumbnail": "effect-nightVision.jpg",
"main": "effect/nightVision",
"hasPannel": true
},
{
"name": "黑白效果",
"thumbnail": "effect-blackAndWhite.jpg",
"main": "effect/blackAndWhite",
"hasPannel": true
},
{
"name": "马赛克效果", "name": "马赛克效果",
"thumbnail": "effect-mosaic.jpg", "thumbnail": "effect-mosaic.jpg",
"main": "effect/mosaic", "main": "effect/mosaic",
...@@ -2595,17 +2630,18 @@ ...@@ -2595,17 +2630,18 @@
"thumbnail": "effect-depthOfField.jpg", "thumbnail": "effect-depthOfField.jpg",
"main": "effect/depthOfField", "main": "effect/depthOfField",
"hasPannel": true "hasPannel": true
}
]
}, },
{ {
"name": "其他", "name": "夜视效果",
"children": [ "thumbnail": "effect-nightVision.jpg",
"main": "effect/nightVision",
"hasPannel": true
},
{ {
"name": "月球", "name": "黑白效果",
"thumbnail": "map-other-moon.jpg", "thumbnail": "effect-blackAndWhite.jpg",
"main": "map/other/moon", "main": "effect/blackAndWhite",
"resources": ["background.css"] "hasPannel": true
} }
] ]
} }
......
public/img/textures/line-air.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="36" height="36" viewBox="0 0 36 36"><defs><clipPath id="master_svg0_6_1"><rect x="0" y="0" width="36" height="36" rx="6"/></clipPath></defs><g clip-path="url(#master_svg0_6_1)"><g><rect x="3" y="16" width="30" height="4" rx="2" fill="#E63E3E" fill-opacity="1"/></g><g><rect x="17" y="3" width="2" height="30" rx="1" fill="#E63E3E" fill-opacity="1"/></g></g></svg>
\ No newline at end of file
public/lib/mars3d/mars3d.css
/** /**
* Mars3D三维可视化平台 mars3d * Mars3D三维可视化平台 mars3d
* *
* 版本信息：v3.6.11 * 版本信息：v3.6.12
* 编译日期：2023-11-04 00:00:59 * 编译日期：2023-11-07 21:55: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.
src/example/control/basis/mapSplit/index.tsx 0 → 100644
import * as mapWork from "./map.js"
import { MarsPannel, MarsButton } from "@mars/components/MarsUI"
import { Space } from "antd"
const UIComponent = () => {
return (
<MarsPannel visible={true} right={10} top={10}>
<Space>
<MarsButton onClick={() => { mapWork.createControl() }}>创建控件</MarsButton>
<MarsButton onClick={() => { mapWork.destroyControl() }}>销毁控件</MarsButton>
</Space>
</MarsPannel>
)
}
export default UIComponent
src/example/effect/colorCorrection/index.less 0 → 100644
.ant-slider {
width: 120px !important;
}
.mars-slider.ant-slider {
margin: 0px 10px 3px 6px;
}
src/example/effect/colorCorrection/index.tsx 0 → 100644
import { useState } from "react"
import * as mapWork from "./map.js"
import { MarsPannel, MarsSwitch, MarsSlider, MarsFormItem, MarsForm } from "@mars/components/MarsUI"
import { Space } from "antd"
import "./index.less"
function UIComponent(props) {
const [brightness, setBrightness] = useState(1.0)
const [contrast, setContrast] = useState(1.0)
const [hue, setHue] = useState(0.0)
const [saturation, setSaturation] = useState(1.0)
return (
<MarsPannel visible={true} right="10" top="10" width={205}>
<MarsForm {...{ labelCol: { span: 6 } }}>
<MarsFormItem label="启用">
<MarsSwitch defaultChecked onChange={(v) => {
mapWork.setDepthOfField(v)
}}></MarsSwitch>
</MarsFormItem>
<MarsFormItem label="亮度">
<Space>
<MarsSlider
defaultValue={brightness}
min={0}
max={2.0}
step={0.1}
onChange={(data) => {
setBrightness(data)
mapWork.setBrightness(brightness)
}}
/>
</Space>
</MarsFormItem>
<MarsFormItem label="对比度">
<Space>
<MarsSlider
defaultValue={contrast}
min={0}
max={2.0}
step={0.1}
onChange={(data) => {
setContrast(data)
mapWork.setContrast(contrast)
}}
/>
</Space>
</MarsFormItem>
<MarsFormItem label="色调">
<Space>
<MarsSlider
defaultValue={hue}
min={0}
max={1.0}
step={0.1}
onChange={(data) => {
setHue(data)
mapWork.setHue(hue)
}}
/>
</Space>
</MarsFormItem>
<MarsFormItem label="饱和度">
<Space>
<MarsSlider
defaultValue={saturation}
min={0}
max={2.0}
step={0.1}
onChange={(data) => {
setSaturation(data)
mapWork.setSaturation(saturation)
}}
/>
</Space>
</MarsFormItem>
</MarsForm>
</MarsPannel>
)
}
export default UIComponent
src/example/effect/colorCorrection/map.js 0 → 100644
import * as mars3d from "mars3d"
export let map // mars3d.Map三维地图对象
let colorCorrection
// 需要覆盖config.json中地图属性参数（当前示例框架中自动处理合并）
export const mapOptions = {
scene: {
center: { lat: 33.591015, lng: 119.032698, alt: 73, heading: 343, pitch: -21 }
}
}
/**
* 初始化地图业务，生命周期钩子函数（必须）
* 框架在地图初始化完成后自动调用该函数
* @param {mars3d.Map} mapInstance 地图对象
* @returns {void} 无
*/
export function onMounted(mapInstance) {
map = mapInstance // 记录map
// 添加参考三维模型
const tiles3dLayer = new mars3d.layer.TilesetLayer({
url: "//data.mars3d.cn/3dtiles/qx-simiao/tileset.json",
position: { alt: 38.8 },
maximumScreenSpaceError: 1,
dynamicScreenSpaceError: true,
cullWithChildrenBounds: false
})
map.addLayer(tiles3dLayer)
// 构造效果
colorCorrection = new mars3d.effect.ColorCorrectionEffect()
map.addEffect(colorCorrection)
}
/**
* 释放当前地图业务的生命周期函数
* @returns {void} 无
*/
export function onUnmounted() {
map = null
}
// 是否开启特效
export function setDepthOfField(val) {
colorCorrection.enabled = val
}
// 修改对应参数
export function setBrightness(val) {
colorCorrection.brightness = val
}
export function setContrast(val) {
colorCorrection.contrast = val
}
export function setHue(val) {
colorCorrection.hue = val
}
export function setSaturation(val) {
colorCorrection.saturation = val
}
src/example/graphic/apply/district2/map.js
...@@ -222,7 +222,8 @@ function addOutCircle(graphicLayer) { ...@@ -222,7 +222,8 @@ function addOutCircle(graphicLayer) {
materialOptions: { materialOptions: {
image: item.image, image: item.image,
opacity: 0.4 opacity: 0.4
} },
flat: true
} }
}) })
graphicLayer.addGraphic(graphic) graphicLayer.addGraphic(graphic)
......
src/example/graphic/combine/water-section/map.js 0 → 100644
import * as mars3d from "mars3d"
export let map // mars3d.Map三维地图对象
export let graphicLayer // 图层
// 需要覆盖config.json中地图属性参数（当前示例框架中自动处理合并）
export const mapOptions = {
scene: {
center: { lat: 41.065687, lng: 123.791582, alt: 5276.9, heading: 207.3, pitch: -22.5 },
globe: {
depthTestAgainstTerrain: true
}
}
}
/**
* 初始化地图业务，生命周期钩子函数（必须）
* 框架在地图初始化完成后自动调用该函数
* @param {mars3d.Map} mapInstance 地图对象
* @returns {void} 无
*/
export function onMounted(mapInstance) {
map = mapInstance // 记录map
// 创建矢量数据图层
graphicLayer = new mars3d.layer.GraphicLayer()
map.addLayer(graphicLayer)
bindLayerPopup()
// 加一些演示数据
addDemoGraphic1()
}
/**
* 释放当前地图业务的生命周期函数
* @returns {void} 无
*/
export function onUnmounted() {
map = null
}
let polygonGraphic
function addDemoGraphic1() {
const waterJson = window.waterJson // 在 ./water-data.js
const arrData = []
for (let index = 1, len = waterJson.length; index < len; index++) {
const item1 = waterJson[index - 1]
const item2 = waterJson[index]
const arrPoints = []
const height1 = item1.height + 15
for (let j = 0; j < item1.points.length; j++) {
const point = item1.points[j]
arrPoints.push([...point, height1])
}
const height2 = item2.height + 15
for (let j = item2.points.length - 1; j >= 0; j--) {
const point = item2.points[j]
arrPoints.push([...point, height2])
}
arrData.push({
positions: arrPoints,
style: {
normalMap: "img/textures/waterNormals.jpg", // 水正常扰动的法线图
frequency: 8000.0, // 控制波数的数字。
animationSpeed: 0.02, // 控制水的动画速度的数字。
amplitude: 5.0, // 控制水波振幅的数字。
specularIntensity: 0.8, // 控制镜面反射强度的数字。
baseWaterColor: "#006ab4", // rgba颜色对象基础颜色的水。#00ffff,#00baff,#006ab4
blendColor: "#006ab4", // 从水中混合到非水域时使用的rgba颜色对象。
opacity: 0.6, // 透明度
offsetAttribute: Cesium.GeometryOffsetAttribute.ALL, // 需要有
offsetHeight: 0
},
attr: { index: index, height1: height1, height2: height2 }
})
}
// 多个面对象的合并渲染。
polygonGraphic = new mars3d.graphic.WaterCombine({
instances: arrData
})
graphicLayer.addGraphic(polygonGraphic)
globalMsg(`共加载了${arrData.length}条断面数据`)
setInterval(() => {
if (polygonGraphic.isDestroy) {
return
}
polygonGraphic.eachInstances((item, index) => {
item.style.offsetHeight += 0.1
})
polygonGraphic.setOffsetHeight()
}, 10)
}
// 在图层绑定Popup弹窗
export function bindLayerPopup() {
graphicLayer.bindPopup(function (event) {
const attr = event.graphic.attr || {}
return mars3d.Util.getTemplateHtml({ title: "矢量图层", template: "all", attr: attr })
})
}
src/example/graphic/combine/water/map.js
...@@ -107,26 +107,26 @@ export function addRandomGraphicByCount(count) { ...@@ -107,26 +107,26 @@ export function addRandomGraphicByCount(count) {
// // graphic.setOffsetHeight(height, 0) // 更新第0个数据 // // graphic.setOffsetHeight(height, 0) // 更新第0个数据
// }, 10) // }, 10)
setInterval(() => { // setInterval(() => {
if (graphic.isDestroy) { // if (graphic.isDestroy) {
return // return
} // }
graphic.eachInstances((item, index) => { // graphic.eachInstances((item, index) => {
// 下面只是为了方便演示，生成的区间高度值 // // 下面只是为了方便演示，生成的区间高度值
if (!Cesium.defined(item.isUp)) { // if (!Cesium.defined(item.isUp)) {
item.isUp = Math.random() > 0.5 ? -1 : 1 // item.isUp = Math.random() > 0.5 ? -1 : 1
} // }
if (item.style.offsetHeight > 1000) { // if (item.style.offsetHeight > 1000) {
item.isUp = -1 // item.isUp = -1
} // }
if (item.style.offsetHeight < 0) { // if (item.style.offsetHeight < 0) {
item.isUp = 1 // item.isUp = 1
} // }
item.style.offsetHeight += item.isUp // item.style.offsetHeight += item.isUp
}) // })
graphic.setOffsetHeight() // graphic.setOffsetHeight()
}, 10) // }, 10)
graphicLayer.enabledEvent = true // 恢复事件 graphicLayer.enabledEvent = true // 恢复事件
return result.points.length return result.points.length
......
src/example/graphic/entity/arrow/map.js
...@@ -224,9 +224,7 @@ function addDemoGraphic9(graphicLayer) { ...@@ -224,9 +224,7 @@ function addDemoGraphic9(graphicLayer) {
const graphic = new mars3d.graphic.BillboardEntity({ const graphic = new mars3d.graphic.BillboardEntity({
position: [116.699972, 29.004322], position: [116.699972, 29.004322],
style: { style: {
image: "img/marker/80800.png", image: "img/marker/qianjin.png",
width: 100,
height: 100,
horizontalOrigin: Cesium.HorizontalOrigin.LEFT, // 横向的定位点，LEFT左侧 horizontalOrigin: Cesium.HorizontalOrigin.LEFT, // 横向的定位点，LEFT左侧
verticalOrigin: Cesium.VerticalOrigin.BOTTOM // 竖向的定位点，BOTTOM底部 verticalOrigin: Cesium.VerticalOrigin.BOTTOM // 竖向的定位点，BOTTOM底部
}, },
......
src/example/graphic/entity/billboard-panorama/map.js 0 → 100644
import * as mars3d from "mars3d"
export let map // mars3d.Map三维地图对象
// 需要覆盖config.json中地图属性参数（当前示例框架中自动处理合并）
export const mapOptions = {
scene: {
center: { lat: 31.649617, lng: 117.081721, alt: 444, heading: 348, pitch: -25 }
}
}
/**
* 初始化地图业务，生命周期钩子函数（必须）
* 框架在地图初始化完成后自动调用该函数
* @param {mars3d.Map} mapInstance 地图对象
* @returns {void} 无
*/
export function onMounted(mapInstance) {
map = mapInstance // 记录map
// 加载石化工厂模型
const tiles3dLayer = new mars3d.layer.TilesetLayer({
name: "石化工厂",
url: "http://data.mars3d.cn/3dtiles/max-shihua/tileset.json",
position: { lng: 117.077158, lat: 31.659116, alt: -2.0 },
maximumScreenSpaceError: 1,
popup: "all"
})
map.addLayer(tiles3dLayer)
// 创建DIV数据图层
const graphicLayer = new mars3d.layer.GraphicLayer()
map.addLayer(graphicLayer)
graphicLayer.on(mars3d.EventType.click, function (event) {
console.log("您单击了", event)
})
// 在layer上绑定右键菜单
graphicLayer.bindContextMenu(
[
{
text: "查看摄像头",
icon: "fa fa-trash-o",
callback: (e) => {
const graphic = e.graphic
globalMsg("右键菜单示例")
}
}
],
{ offsetY: -170 }
)
graphicLayer.bindPopup(
(event) => {
const attr = event.graphic.attr || {}
if (!attr) {
return
}
return `<iframe style="width: 600px; height: 300px; border: none; "src="${attr.url}"></iframe> `
}
)
// 添加数据
addRandomGraphicByCount(graphicLayer, [117.080397, 31.656139, 33.3])
addRandomGraphicByCount(graphicLayer, [117.078006, 31.65649, 49.4])
addRandomGraphicByCount(graphicLayer, [117.080571, 31.657898, 50.2])
addRandomGraphicByCount(graphicLayer, [117.078331, 31.660016, 47.2])
// console.log("导出数据测试", graphicLayer.toJSON())
// const layer = mars3d.LayerUtil.create(json)
}
/**
* 释放当前地图业务的生命周期函数
* @returns {void} 无
*/
export function onUnmounted() {
map = null
}
function addRandomGraphicByCount(graphicLayer, position) {
const graphic = new mars3d.graphic.BillboardEntity({
position: position,
style: {
image: "img/marker/lace-blue.png",
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM
},
attr: { url: "https://www.720yun.com/vr/b32jOOkmvm5", name: "上海浦江郊野公园" }
})
graphicLayer.addGraphic(graphic)
}
src/example/graphic/entity/circle/map.js
...@@ -384,7 +384,7 @@ function addDemoGraphic10(graphicLayer) { ...@@ -384,7 +384,7 @@ function addDemoGraphic10(graphicLayer) {
width: 12, width: 12,
materialType: mars3d.MaterialType.Image2, materialType: mars3d.MaterialType.Image2,
materialOptions: { materialOptions: {
image: "/img/textures/airline.svg", image: "/img/textures/line-air.svg",
repeat: new mars3d.Cesium.Cartesian2(1000, 1) repeat: new mars3d.Cesium.Cartesian2(1000, 1)
} }
} }
......
src/example/graphic/primitive/billboard/map.js
...@@ -41,6 +41,7 @@ export function onMounted(mapInstance) { ...@@ -41,6 +41,7 @@ export function onMounted(mapInstance) {
addDemoGraphic12(graphicLayer) addDemoGraphic12(graphicLayer)
addDemoGraphic13(graphicLayer) addDemoGraphic13(graphicLayer)
addDemoGraphic14(graphicLayer) addDemoGraphic14(graphicLayer)
addDemoGraphic15(graphicLayer)
} }
/** /**
...@@ -347,6 +348,94 @@ function getSampledPositionProperty(points) { ...@@ -347,6 +348,94 @@ function getSampledPositionProperty(points) {
return property return property
} }
function addDemoGraphic15(graphicLayer) {
const build = buildProgress(87, { color: "#2B3946" })
const graphic = new mars3d.graphic.BillboardPrimitive({
position: new mars3d.LngLatPoint(116.095828, 30.734919, 805),
style: {
image: "img/marker/street.png",
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
...build
},
attr: { remark: "示例15" }
})
graphicLayer.addGraphic(graphic)
}
function buildProgress(progress, options) {
options = {
color: "#e3e3e3",
unit: "%",
fontSize: 24,
fontFamily: "Gilroy-Bold",
fontWeight: "bold",
...options
}
const width = Math.ceil(Math.max(getTextWidth(progress, options), 82))
const halfWidth = width / 2
const reduce = width - 82
const height = 50
const base64 = svgTobase64(`<svg width="${width * 2}px" height="${
height * 2
}px" viewBox="0 0 ${width} 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path d="M8,0 L${74 + reduce},0 C${78.418278 + reduce},-8.11624501e-16 ${82 + reduce},3.581722 ${82 + reduce},8 L${82 + reduce},35 C${
82 + reduce
},39.418278 ${78.418278 + reduce},43 ${74 + reduce},43 L${49.6878172 + reduce},43 L${49.6878172 + reduce / 2},43 L${41 + reduce / 2},50 L${
32.3121828 + reduce / 2
},43 L8,43 C3.581722,43 5.41083001e-16,39.418278 0,35 L0,8 C-5.41083001e-16,3.581722 3.581722,8.11624501e-16 8,0 Z" id="path-1"></path>
<filter x="-7.9%" y="-13.0%" width="115.9%" height="126.0%" filterUnits="objectBoundingBox" id="filter-3">
<feGaussianBlur stdDeviation="0.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
<feOffset dx="0" dy="1" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
<feColorMatrix values="0 0 0 0 0.721568627 0 0 0 0 0.823529412 0 0 0 0 0.862745098 0 0 0 1 0" type="matrix" in="shadowInnerInner1" result="shadowMatrixInner1"></feColorMatrix>
<feGaussianBlur stdDeviation="4" in="SourceAlpha" result="shadowBlurInner2"></feGaussianBlur>
<feOffset dx="0" dy="-5" in="shadowBlurInner2" result="shadowOffsetInner2"></feOffset>
<feComposite in="shadowOffsetInner2" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner2"></feComposite>
<feColorMatrix values="0 0 0 0 0.639215686 0 0 0 0 0.752941176 0 0 0 0 0.807843137 0 0 0 1 0" type="matrix" in="shadowInnerInner2" result="shadowMatrixInner2"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixInner1"></feMergeNode>
<feMergeNode in="shadowMatrixInner2"></feMergeNode>
</feMerge>
</filter>
</defs>
<use fill="#E5F0F4" fill-rule="evenodd" xlink:href="#path-1"></use>
<use fill="black" fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-1"></use>
<text font-family="Gilroy-Bold, Gilroy,Arial, Helvetica, sans-serif" style="font-weight:bold;dominant-baseline:middle;text-anchor:middle;fill: ${
options.color
};font-size: ${options.fontSize}px; white-space: pre; text-anchor: middle" x="${halfWidth}" y="24">${progress}D</text>
</svg>`)
return {
image: base64,
width: width,
height: height
}
}
function getTextWidth(text, options) {
// 获取 canvas 元素和上下文对象
const canvas = document.createElement("canvas")
const ctx = canvas.getContext("2d")
// 设置字体样式
const fontSize = `${options.fontSize}px`
const fontFamily = options.fontFamily
const fontWeight = options.fontWeight
ctx.font = `${fontWeight} ${fontSize} ${fontFamily}`
// 计算文本的宽度
const width = 28 + ctx.measureText(`${text}${options.unit}`).width
return width
}
function svgTobase64(source) {
const url = "data:image/svg+xml;base64," + window.btoa(decodeURIComponent(encodeURIComponent(source)))
return url
}
// 生成演示数据(测试数据量) // 生成演示数据(测试数据量)
export function addRandomGraphicByCount(count) { export function addRandomGraphicByCount(count) {
graphicLayer.clear() graphicLayer.clear()
......
src/example/graphic/primitive/frustum/map.js
...@@ -68,7 +68,7 @@ function addDemoGraphic1(graphicLayer) { ...@@ -68,7 +68,7 @@ function addDemoGraphic1(graphicLayer) {
targetPosition: [116.317411, 30.972581, 1439.7], // 可选 targetPosition: [116.317411, 30.972581, 1439.7], // 可选
style: { style: {
angle: 10, angle: 10,
angle2: 20, angle2: 10,
// length: 4000, // targetPosition存在时无需传 // length: 4000, // targetPosition存在时无需传
color: "#02ff00", color: "#02ff00",
opacity: 0.4, opacity: 0.4,
...@@ -151,6 +151,10 @@ export function onClickSelPoint() { ...@@ -151,6 +151,10 @@ export function onClickSelPoint() {
}) })
} }
export function clear() {
map.graphicLayer.clear()
}
export function getRayEarthPositions() { export function getRayEarthPositions() {
map.graphicLayer.clear() map.graphicLayer.clear()
......
src/example/layer-graphic/draw/draw-model-list/map.js
...@@ -104,6 +104,25 @@ export function openGeoJSON(file) { ...@@ -104,6 +104,25 @@ export function openGeoJSON(file) {
flyTo: true flyTo: true
}) })
} }
} else if (fileType === "glb" || fileType === "gltf") {
graphicLayer.clear()
const reader = new FileReader()
reader.readAsArrayBuffer(file)
reader.onloadend = function (e) {
const arrayBuffer = this.result
const graphic = new mars3d.graphic.ModelPrimitive({
position: [117.221674, 31.823752, 34.7],
style: {
url: new Uint8Array(arrayBuffer),
scale: 1,
minimumPixelSize: 50
},
hasEdit: false
})
graphicLayer.addGraphic(graphic)
graphic.flyTo({ radius: 1000 })
}
} else { } else {
globalMsg("暂不支持 " + fileType + " 文件类型的数据！") globalMsg("暂不支持 " + fileType + " 文件类型的数据！")
} }
......
src/example/layer-graphic/draw/draw-model/map.js
...@@ -33,7 +33,6 @@ export function onMounted(mapInstance) { ...@@ -33,7 +33,6 @@ export function onMounted(mapInstance) {
graphicLayer.on(mars3d.EventType.click, function (event) { graphicLayer.on(mars3d.EventType.click, function (event) {
console.log("监听layer，单击了矢量对象", event) console.log("监听layer，单击了矢量对象", event)
}) })
} }
/** /**
...@@ -59,8 +58,6 @@ export function startDrawModel(url, isProxy) { ...@@ -59,8 +58,6 @@ export function startDrawModel(url, isProxy) {
}) })
} }
// 地形 // 地形
export function chkHasTerrain(isStkTerrain) { export function chkHasTerrain(isStkTerrain) {
map.hasTerrain = isStkTerrain map.hasTerrain = isStkTerrain
...@@ -100,6 +97,25 @@ export function openGeoJSON(file) { ...@@ -100,6 +97,25 @@ export function openGeoJSON(file) {
flyTo: true flyTo: true
}) })
} }
} else if (fileType === "glb" || fileType === "gltf") {
graphicLayer.clear()
const reader = new FileReader()
reader.readAsArrayBuffer(file)
reader.onloadend = function (e) {
const arrayBuffer = this.result
const graphic = new mars3d.graphic.ModelPrimitive({
position: [117.221674, 31.823752, 34.7],
style: {
url: new Uint8Array(arrayBuffer),
scale: 1,
minimumPixelSize: 50
},
hasEdit: false
})
graphicLayer.addGraphic(graphic)
graphic.flyTo({ radius: 1000 })
}
} else { } else {
globalMsg("暂不支持 " + fileType + " 文件类型的数据！") globalMsg("暂不支持 " + fileType + " 文件类型的数据！")
} }
......
src/example/layer-graphic/draw/draw/map.js
...@@ -59,8 +59,11 @@ export function onMounted(mapInstance) { ...@@ -59,8 +59,11 @@ export function onMounted(mapInstance) {
}) })
map.addLayer(graphicLayer) map.addLayer(graphicLayer)
// mars3d.Lang["_双击完成绘制"][0] = "右击完成绘制" // 修改文本
// mars3d.Lang["_右击删除点"][0] = "中键单击完成绘制" // map.setLangText({
// _双击完成绘制: "右击完成绘制",
// _右击删除点: "中键单击完成绘制"
// })
// map.on(mars3d.EventType.mouseOver, function (event) { // map.on(mars3d.EventType.mouseOver, function (event) {
// console.log("mouseover") // console.log("mouseover")
...@@ -120,9 +123,11 @@ export function onMounted(mapInstance) { ...@@ -120,9 +123,11 @@ export function onMounted(mapInstance) {
// }) // })
// 自定义提示 // 自定义提示
// mars3d.Lang["_单击开始绘制"][0] = "新的提示内容"; // map.setLangText({
// mars3d.Lang["_单击增加点右击删除点"][0] = "新的提示内容"; // _双击完成绘制: "",
// mars3d.Lang["_双击完成绘制"][0] = ""; // _单击开始绘制: "新的提示内容",
// _单击增加点右击删除点: "新的提示内容"
// })
} }
/** /**
......
src/example/layer-graphic/geojson/basis/map.js
...@@ -255,7 +255,12 @@ export function showRegion() { ...@@ -255,7 +255,12 @@ export function showRegion() {
}, },
// 高亮时的样式 // 高亮时的样式
highlight: { highlight: {
opacity: 0.9 opacity: 0.9,
outlineStyle: {
width: 6,
color: "#ff0000",
addHeight: 100
}
}, },
label: { label: {
// 面中心点，显示文字的配置 // 面中心点，显示文字的配置
......
src/example/layer-graphic/other/graticule/map.js
...@@ -25,8 +25,9 @@ export function onMounted(mapInstance) { ...@@ -25,8 +25,9 @@ export function onMounted(mapInstance) {
// color: '#ffff00', // color: '#ffff00',
// }, // },
// labelStyle: { // labelStyle: {
// color: '#ffff00', // color: "#ffff00",
// }, // pixelOffset: new Cesium.Cartesian2(0, 0)
// }
}) })
map.addLayer(tileLayer) map.addLayer(tileLayer)
} }
......
src/example/layer-tile/manage/tile-alpha/map.js
...@@ -7,7 +7,7 @@ export const mapOptions = { ...@@ -7,7 +7,7 @@ export const mapOptions = {
scene: { scene: {
center: { lat: 28.118943, lng: 114.834765, alt: 4038547, heading: 351, pitch: -83 }, center: { lat: 28.118943, lng: 114.834765, alt: 4038547, heading: 351, pitch: -83 },
mapProjection: mars3d.CRS.EPSG3857, // 2D下展示墨卡托投影 mapProjection: mars3d.CRS.EPSG3857, // 2D下展示墨卡托投影
mapMode2D: Cesium.MapMode2D.INFINITE_SCROLL// 2D下左右一直可以滚动重复世界地图 mapMode2D: Cesium.MapMode2D.INFINITE_SCROLL // 2D下左右一直可以滚动重复世界地图
}, },
control: { control: {
timeline: true, timeline: true,
...@@ -115,11 +115,31 @@ async function showImagesByGraphic() { ...@@ -115,11 +115,31 @@ async function showImagesByGraphic() {
materialType: mars3d.MaterialType.Image2, materialType: mars3d.MaterialType.Image2,
materialOptions: { materialOptions: {
image: property image: property
}, }
hasShadows: false
} }
}) })
graphicLayer.addGraphic(graphic) graphicLayer.addGraphic(graphic)
// RectanglePrimitive
// const graphic = new mars3d.graphic.RectanglePrimitive({
// positions: [
// [63.8148899733, 12.7700338517],
// [143.536486117, 56.3833398551]
// ],
// style: {
// materialType: mars3d.MaterialType.Image2,
// materialOptions: {
// image: property.getValue(map.clock.currentTime)
// },
// flat: true
// }
// })
// graphicLayer.addGraphic(graphic)
// // 更新
// setInterval(() => {
// graphic.uniforms.image = property.getValue(map.clock.currentTime)
// }, 1000)
} }
// ImageLayer的方式，直接替换 // ImageLayer的方式，直接替换
...@@ -224,7 +244,8 @@ function showImagesByAlpha() { ...@@ -224,7 +244,8 @@ function showImagesByAlpha() {
layer2.alpha = 0 layer2.alpha = 0
clearInterval(idxTimer) clearInterval(idxTimer)
idxTimer = window.setInterval(function () { idxTimer = window.setInterval(
function () {
layer1.alpha -= alphaStep layer1.alpha -= alphaStep
layer2.alpha += alphaStep layer2.alpha += alphaStep
...@@ -233,7 +254,9 @@ function showImagesByAlpha() { ...@@ -233,7 +254,9 @@ function showImagesByAlpha() {
step++ step++
changeRadarAlpha(time) changeRadarAlpha(time)
} }
}, time * 1000 * alphaStep) },
time * 1000 * alphaStep
)
} }
changeRadarAlpha(1) changeRadarAlpha(1)
......
src/example/layer-tileset/type/basis/map.js
...@@ -371,7 +371,7 @@ export function showMaxShihuaDemo() { ...@@ -371,7 +371,7 @@ export function showMaxShihuaDemo() {
url: "//data.mars3d.cn/3dtiles/max-shihua/tileset.json", url: "//data.mars3d.cn/3dtiles/max-shihua/tileset.json",
position: { lng: 117.077158, lat: 31.659116, alt: -2.0 }, position: { lng: 117.077158, lat: 31.659116, alt: -2.0 },
maximumScreenSpaceError: 1, maximumScreenSpaceError: 1,
// shadows: Cesium.ShadowMode.DISABLED,
// 以下参数可以参考用于3dtiles总数据大，清晰度过高情况下进行性能优化。这不是一个通用的解决方案，但可以以此为参考。 // 以下参数可以参考用于3dtiles总数据大，清晰度过高情况下进行性能优化。这不是一个通用的解决方案，但可以以此为参考。
skipLevelOfDetail: true, skipLevelOfDetail: true,
loadSiblings: true, loadSiblings: true,
......
src/example/map/double/compare/index.tsx 0 → 100644
import * as mapWork from "./map.js"
import { MarsPannel, MarsButton } from "@mars/components/MarsUI"
import { Space } from "antd"
const UIComponent = () => {
return (
<MarsPannel visible={true} right={10} top={10}>
<Space>
<MarsButton onClick={() => { mapWork.createControl() }}>创建控件</MarsButton>
<MarsButton onClick={() => { mapWork.destroyControl() }}>销毁控件</MarsButton>
</Space>
</MarsPannel>
)
}
export default UIComponent
src/example/map/options/lang/CustomLang.js 0 → 100644
const CustomLang = {
/** 标识语言的唯一标识 */
type: "en",
// Cesium renderError 错误弹窗
RenderingHasStopped: "An error occurred while rendering. Rendering has stopped.",
ErrorConstructingCesiumWidget: "Error constructing CesiumWidget.",
// src\control\czm\Animation.js
Today: "Today",
TodayRealTime: "Today (real-time)",
Pause: "Pause",
PlayReverse: "Play Reverse",
PlayForward: "Play Forward",
CurrentTimeNotInRange: "Current time not in range",
// src\control\czm\BaseLayerPicker.js
Imagery: "Imagery",
CesiumIon: "Cesium ion",
Other: "Other",
Terrain: "Terrain",
EllipsoidTerrainProvider: "WGS84 Ellipsoid",
EllipsoidTerrainProviderTooltip: "WGS84 standard ellipsoid, also known as EPSG:4326",
TerrainProvider: "World Terrain",
TerrainProviderTooltip: "High-resolution global terrain tileset curated from several datasources",
// src\control\czm\BaseLayerPicker.js
FullScreen: "Full screen",
ExitFullScreen: "Exit full screen",
FullScreenUnavailable: "Full screen unavailable",
// src\control\czm\Geocoder.js
EnterAnAddressOrLandmark: "Enter an address or landmark...",
Searching: "Searching...",
// src\control\czm\HomeButton.js
ViewHome: "View Home",
// src\control\czm\NavigationHelpButton.js
NavigationInstructions: "Navigation Instructions",
Mouse: "Mouse",
Touch: "Touch",
PanView: "Pan view",
LeftClickDrag: "Left click + drag",
ZoomView: "Zoom view",
RightClick: "Right click + drag, or",
MouseWheelScroll: "Mouse wheel scroll",
RotateView: "Rotate view",
MiddleClickDrag: "Middle click + drag, or",
CtrlAndClickDrag: "CTRL + Left/Right click + drag",
OneFingerDrag: "One finger drag",
TwoFingerPinch: "Two finger pinch",
TiltView: "Tilt view",
TwoFingerDragSameDirection: "Two finger drag, same direction",
TwoFingerDragOppositeDirection: "Two finger drag, opposite direction",
// src\control\czm\ProjectionPicker.js
PerspectiveProjection: "Perspective Projection",
OrthographicProjection: "Orthographic Projection",
// src\control\czm\SceneModePicker.js
_2D: "2D",
_3D: "3D",
ColumbusView: "Columbus View",
// src\control\czm\VRButton.js
EnterVRMode: "Enter VR mode",
ExitVRMode: "Exit VR mode",
VRModeIsUnavailable: "VR mode is unavailable",
// src\control\Zoom.js
_放大: "Zoom In",
_缩小: "Zoom Out",
// src\control\ClockAnimate.js
_暂停: "Pause",
_继续: "Continue",
// src\control\Compass.js
_导航球: "Navigation ball",
_拖拽调整俯仰角: "Drag to adjust pitch Angle",
_拖拽调整四周方向角: "Drag to adjust the Heading Angle, double-click to return to true north",
// 右键菜单 src\map\core\getDefaultContextMenu.js
_查看此处坐标: "Location info",
_位置信息: "The location information",
_经度: "Lon",
_纬度: "Lat",
_海拔: "Alt",
_横坐标: "X",
_纵坐标: "Y",
_查看当前视角: "Camera info",
_当前视角信息: "Current Camera Information",
_视角切换: "Camera",
_禁止进入地下: "Do not go underground",
_允许进入地下: "Access to the ground",
_绕此处环绕飞行: "Fly around here",
_关闭环绕飞行: "Close off circling",
_移动到此处: "Move it over here",
_第一视角站到此处: "First view is here",
_开启键盘漫游: "Enable keyboard roaming",
_关闭键盘漫游: "Turn off keyboard roaming",
_跟踪锁定: "TrackedEntity",
_取消锁定: "Unlocked",
_三维模型: "3DTiles",
_显示三角网: "Display Wireframe",
_关闭三角网: "Close Wireframe",
_显示包围盒: "Display BoundingVolume",
_关闭包围盒: "Close BoundingVolume",
_地形服务: "Terrain",
_开启地形: "Open terrain",
_关闭地形: "Close terrain",
_图上标记: "Drawing",
_标记点: "Mark points",
_标记线: "Tag line",
_标记面: "Mark surface",
_标记圆: "Mark round",
_标记矩形: "Mark rectangular",
_允许编辑: "Allowed to edit",
_禁止编辑: "Prohibit to edit",
_导出GeoJSON: "Export GeoJSON",
_清除所有标记: "Clear",
_特效效果: "Effects",
_开启下雨: "Enable rain",
_关闭下雨: "Close rain",
_开启下雪: "Enable snow",
_关闭下雪: "Close snow",
_开启雾天气: "Enable fog",
_关闭雾天气: "Close fog",
_开启泛光: "Enable bloom",
_关闭泛光: "Close bloom",
_开启亮度: "Enable brightness",
_关闭亮度: "Close brightness",
_开启夜视: "Enable night vision",
_关闭夜视: "Close night vision",
_开启黑白: "Enable black and white",
_关闭黑白: "Close black and white",
_开启拾取高亮: "Enable Pick highlighted",
_关闭拾取高亮: "Close Pick highlighted",
_场景设置: "Scene",
_开启深度监测: "Enable depth test against terrain",
_关闭深度监测: "Close depth test against terrain",
_显示星空背景: "Enable skyBox",
_关闭星空背景: "Close skyBox",
_开启日照阴影: "Enable shadow",
_关闭日照阴影: "Close shadow",
_开启大气渲染: "Enable sky atmosphere",
_关闭大气渲染: "Close sky atmosphere",
_场景出图: "Export image",
_图上量算: "Measure",
_删除测量: "Delete",
// 图上量算 tooltip
_角度: "Angle",
_距离: "Distance",
_面积: "Area",
_总长: "Total distance",
_起点: "Start",
_高度差: "Height difference",
_空间距离: "Space distance",
_水平距离: "Horizontal distance",
_正在计算体积: "Calculating volume",
_填方体积: "The volume of fill",
_挖方体积: "Excavation volume",
_横切面积: "Crosscutting area",
_面上: "Up",
_面下: "Down",
_米: "m",
_公里: "km",
_万米: "myriametre",
_海里: "mile",
_丈: "zhang",
_平方米: "m²",
_平方公里: "km²",
_亩: "mu",
_公顷: "ha",
_立方米: "m³",
_万立方米: "wm³",
// 标绘 tooltip
_单击开始绘制: "Click to start drawing",
_单击完成绘制: "Click to finish drawing",
_双击完成绘制: "Double click to finish drawing",
_单击增加点: "left click add point",
_右击删除点: "right click delete point",
_单击后激活编辑: "Click to activate editing",
_右击菜单删除: "Right click menu to delete",
_更多功能请右击: "For more functions, right click",
_停止编辑: "Stop editing",
_删除该点: "Delete that point",
_按轴平移: "Translation by axis",
_停止按轴平移: "Stop translation along axis",
_按轴旋转: "Rotation on axis",
_停止按轴旋转: "Stop rotation on axis",
_调整比例: "Edit Scale",
_停止调整比例: "Stop edit scale",
_释放后完成修改: "Complete the modification after release",
_该对象不允许编辑: "This object does not allow editing",
_拖动该点后: "Drag that point",
_拖动对象后: "Drag that object",
_修改位置: "Modify the position",
_整体平移: "The overall translation",
_增加点: "Add point",
_修改高度: "Modify the height",
_修改半径: "Modify the radius",
_修改长度: "Modify the length(X direction )",
_修改宽度: "Change the width(Y direction)",
_修改方向: "Change direction",
_修改缩放比例: "Modify the Scale",
_无法删除不能少于最小点数:
"Cannot delete, the number of dots cannot be less than",
_删除: "Delete",
_半径: "Radius",
// src\graphic\entity\ModelEntity.js
_加载模型中: "Load Model…"
}
src/example/map/options/lang/index.less
...@@ -3,4 +3,10 @@ ...@@ -3,4 +3,10 @@
margin-right: 8px; margin-right: 8px;
margin-bottom: 8px; margin-bottom: 8px;
} }
}
.language_change {
.mars-button {
margin-right: 8px;
margin-bottom: 8px;
} }
}
src/example/map/options/lang/index.tsx
...@@ -35,6 +35,19 @@ function UIComponent() { ...@@ -35,6 +35,19 @@ function UIComponent() {
<MarsPannel visible={true} top={10} right={10} width={355}> <MarsPannel visible={true} top={10} right={10} width={355}>
<div className="f-mb">Tip: The default language is Chinese中文简体, you can switch to English, etc.</div> <div className="f-mb">Tip: The default language is Chinese中文简体, you can switch to English, etc.</div>
<div className="language_change">
<Row>
<Col span={8}>语言切换:</Col>
<Col span={16}>
<MarsButton onClick={() => mapWork.toCustomLang()}>
English
</MarsButton>
<MarsButton onClick={() => mapWork.toDefaultLange()}>
中文简体
</MarsButton>
</Col>
</Row>
</div>
<div className="lang-button-contain"> <div className="lang-button-contain">
<Row> <Row>
<Col span={8}>Plot:</Col> <Col span={8}>Plot:</Col>
......
src/example/thing/analysis/measure-volume/map.js
...@@ -52,6 +52,24 @@ function addMeasure() { ...@@ -52,6 +52,24 @@ function addMeasure() {
measure.on(mars3d.EventType.end, function (event) { measure.on(mars3d.EventType.end, function (event) {
console.log("分析完成", event) console.log("分析完成", event)
hideLoading() hideLoading()
// const resultInter = event.graphic.interPolygonObj
// const cutHeight = event.graphic.height
// let totalArea = 0
// for (let i = 0, len = resultInter.list.length; i < len; i++) {
// const item = resultInter.list[i]
// const pt1 = item.point1
// const pt2 = item.point2
// const pt3 = item.point3
// const height = (pt1.height + pt2.height + pt3.height) / 3
// if (height < cutHeight) {
// totalArea += item.area
// }
// }
// console.log(totalArea, mars3d.MeasureUtil.formatArea(totalArea))
}) })
// 加一些演示数据 // 加一些演示数据
......
src/example/thing/analysis/measure/map.js
...@@ -185,3 +185,37 @@ function addDemoGraphic2(graphicLayer) { ...@@ -185,3 +185,37 @@ function addDemoGraphic2(graphicLayer) {
}) })
graphicLayer.addGraphic(graphic) graphicLayer.addGraphic(graphic)
} }
export function openJSON(file) {
const fileName = file.name
const fileType = fileName?.substring(fileName.lastIndexOf(".") + 1, fileName.length).toLowerCase()
if (fileType === "json") {
const reader = new FileReader()
console.log("reader")
console.log(reader)
reader.readAsText(file, "UTF-8")
reader.onloadend = function (e) {
const geojson = JSON.parse(this.result)
console.log("打开了json文件", geojson)
if (geojson.type === "graphic" && geojson.data) {
measure.graphicLayer.addGraphic(geojson.data)
measure.graphicLayer.flyTo()
} else {
measure.graphicLayer.loadGeoJSON(geojson, { flyTo: true })
}
}
} else {
globalMsg("暂不支持 " + fileType + " 文件类型的数据！")
}
}
export function saveJSON() {
if (measure.graphicLayer.length === 0) {
globalMsg("当前没有标注任何数据，无需保存！")
return
}
const geojson = measure.graphicLayer.toJSON()
mars3d.Util.downloadFile("测量结果.json", JSON.stringify(geojson))
}
src/example/thirdParty/turf/buffer/map.js
import * as mars3d from "mars3d" import * as mars3d from "mars3d"
export const mapOptions = {
scene: {
center: { lat: 31.967015, lng: 117.316406, alt: 9150, heading: 206, pitch: -42 },
fxaa: true
}
}
export let map // mars3d.Map三维地图对象 export let map // mars3d.Map三维地图对象
export let graphicLayer // 矢量图层对象 export let graphicLayer // 矢量图层对象
let pointLayer
const pointStyle = {
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
scale: 1,
scaleByDistance: true,
scaleByDistance_far: 20000,
scaleByDistance_farValue: 0.7,
scaleByDistance_near: 1000,
scaleByDistance_nearValue: 1,
clampToGround: true
}
/** /**
* 初始化地图业务，生命周期钩子函数（必须） * 初始化地图业务，生命周期钩子函数（必须）
...@@ -12,6 +31,20 @@ export let graphicLayer // 矢量图层对象 ...@@ -12,6 +31,20 @@ export let graphicLayer // 矢量图层对象
export function onMounted(mapInstance) { export function onMounted(mapInstance) {
map = mapInstance // 记录map map = mapInstance // 记录map
pointLayer = new mars3d.layer.GeoJsonLayer({
name: "体育设施点",
url: "//data.mars3d.cn/file/geojson/hfty-point.json",
symbol: {
styleOptions: {
...pointStyle,
image: "img/marker/mark-blue.png"
}
},
popup: "{项目名称}",
zIndex: 10
})
map.addLayer(pointLayer)
graphicLayer = new mars3d.layer.GraphicLayer({ graphicLayer = new mars3d.layer.GraphicLayer({
hasEdit: true, hasEdit: true,
isAutoEditing: true // 绘制完成后是否自动激活编辑 isAutoEditing: true // 绘制完成后是否自动激活编辑
...@@ -80,10 +113,11 @@ export function drawPolygon() { ...@@ -80,10 +113,11 @@ export function drawPolygon() {
}) })
} }
function deleteAll() { export function deleteAll() {
graphicLayer.clear() graphicLayer.clear()
map.graphicLayer.clear() map.graphicLayer.clear()
lastgeojson = null lastgeojson = null
removeSelect()
} }
let width let width
...@@ -117,8 +151,40 @@ function updateBuffer(graphic) { ...@@ -117,8 +151,40 @@ function updateBuffer(graphic) {
color: "rgba(255,0,0,0.4)", color: "rgba(255,0,0,0.4)",
clampToGround: true clampToGround: true
} }
}) })[0]
map.graphicLayer.clear() map.graphicLayer.clear()
map.graphicLayer.addGraphic(graphicsOptions)
const drawGraphic = map.graphicLayer.addGraphic(graphicsOptions)
updateSelect(drawGraphic)
}
let selectGraphic = []
function updateSelect(drawGraphic) {
removeSelect()
if (!drawGraphic) {
return
}
pointLayer.eachGraphic((graphic) => {
const position = graphic.positionShow
const isInArea = drawGraphic.isInPoly(position)
if (isInArea) {
graphic.setStyle({
image: "img/marker/mark-red.png"
})
selectGraphic.push(graphic)
}
})
}
export function removeSelect() {
for (let i = 0; i < selectGraphic.length; i++) {
const graphic = selectGraphic[i]
graphic.setStyle({
image: "img/marker/mark-blue.png"
})
}
selectGraphic = []
} }
src/example/thirdParty/turf/nearestPoint/map.js
...@@ -4,6 +4,13 @@ export let map // mars3d.Map三维地图对象 ...@@ -4,6 +4,13 @@ export let map // mars3d.Map三维地图对象
let pointLayer let pointLayer
let graphicLayer let graphicLayer
export const mapOptions = {
scene: {
center: { lat: 31.967015, lng: 117.316406, alt: 9150, heading: 206, pitch: -42 },
fxaa: true
}
}
const pointStyle = { const pointStyle = {
verticalOrigin: Cesium.VerticalOrigin.BOTTOM, verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
scale: 1, scale: 1,
...@@ -15,13 +22,6 @@ const pointStyle = { ...@@ -15,13 +22,6 @@ const pointStyle = {
clampToGround: true clampToGround: true
} }
export const mapOptions = {
scene: {
center: { lat: 31.967015, lng: 117.316406, alt: 9150, heading: 206, pitch: -42 },
fxaa: true
}
}
/** /**
* 初始化地图业务，生命周期钩子函数（必须） * 初始化地图业务，生命周期钩子函数（必须）
* 框架在地图初始化完成后自动调用该函数 * 框架在地图初始化完成后自动调用该函数
...@@ -50,11 +50,6 @@ export function onMounted(mapInstance) { ...@@ -50,11 +50,6 @@ export function onMounted(mapInstance) {
zIndex: 20 zIndex: 20
}) })
map.addLayer(graphicLayer) map.addLayer(graphicLayer)
// 地球点击事件
map.on(mars3d.EventType.click, (e) => {
clickPoint(e.cartesian)
})
} }
/** /**
...@@ -65,6 +60,23 @@ export function onUnmounted() { ...@@ -65,6 +60,23 @@ export function onUnmounted() {
map = null map = null
} }
export function drawPoint() {
clearAll()
graphicLayer
.startDraw({
type: "billboard",
style: {
...pointStyle,
image: "img/marker/route-start.png"
}
})
.then((graphic) => {
clickPoint(graphic.positionShow)
graphic.remove()
})
}
function clickPoint(position) { function clickPoint(position) {
if (pointLayer.length === 0) { if (pointLayer.length === 0) {
globalMsg("正在加载数据,请稍等......") globalMsg("正在加载数据,请稍等......")
...@@ -84,10 +96,8 @@ function clickPoint(position) { ...@@ -84,10 +96,8 @@ function clickPoint(position) {
}) })
graphicLayer.addGraphic(queryPoint) graphicLayer.addGraphic(queryPoint)
console.log(`分析${pointLayer.length}个数据中的最近点`) console.log(`分析${pointLayer.length}个数据中的最近点`)
// turf分析 // turf分析
const targetPoint = queryPoint.toGeoJSON() const targetPoint = queryPoint.toGeoJSON()
const points = pointLayer.toGeoJSON() const points = pointLayer.toGeoJSON()
...@@ -98,6 +108,9 @@ function clickPoint(position) { ...@@ -98,6 +108,9 @@ function clickPoint(position) {
const nearestPoint = mars3d.Util.geoJsonToGraphics(nearest)[0] const nearestPoint = mars3d.Util.geoJsonToGraphics(nearest)[0]
const graphic = pointLayer.getGraphicById(nearestPoint.attr.id)
updateSelect(graphic)
// 连线 // 连线
const polyline = new mars3d.graphic.PolylineEntity({ const polyline = new mars3d.graphic.PolylineEntity({
positions: [position, nearestPoint.position], positions: [position, nearestPoint.position],
...@@ -134,5 +147,29 @@ function clickPoint(position) { ...@@ -134,5 +147,29 @@ function clickPoint(position) {
} }
export function clearAll() { export function clearAll() {
removeSelect()
graphicLayer.clear() graphicLayer.clear()
} }
let selectGraphic
function updateSelect(graphic) {
removeSelect()
if (graphic) {
selectGraphic = graphic
selectGraphic.setStyle({
image: "img/marker/mark-red.png"
})
}
}
export function removeSelect() {
if (!selectGraphic) {
return
}
selectGraphic.setStyle({
image: "img/marker/mark-blue.png"
})
selectGraphic = undefined
}
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论