• mars3d实现禁止地图移动,禁止地图左右平移,但是鼠标可以移动的效果。


    new mars3d.layer.GeoJsonLayer({渲染后实现鼠标左键按住不释放拖动时,地图不跟着拖动效果

    当前问题:

    1.在map初始化,或者是加载效果的时候,整个地球的场景都是一样的。

    如果鼠标左键按住不释放,在屏幕上拖动的时候,地图会跟着拖动。

    2.想要的效果是,鼠标左键按住不释放,拖动的时候,地图不跟着跑

    效果描述:

    1.左键按住就会拖动地图跑

    相关示例链接:

    功能示例(Vue版) | Mars3D三维可视化平台 | 火星科技

    这种时候,就需要对整个场景的相机进行相关设置:

    可以直接通过原生cesium的api进行实现。

    关键代码:

    map.viewer.scene.screenSpaceCameraController.enableRotate = false

    限制相机的操作,平移,旋转,2、3D视角各不同

    说明:Mars3d的api同样支持限制修改,相机操作相关参数

    搜索api:Mars3D三维可视化平台 | 火星科技

    效果实时体验:在以下代码全部复制到我们示例运行即可

    1. import * as mars3d from "mars3d"
    2. export let map // mars3d.Map三维地图对象
    3. export let graphicLayer // 矢量图层对象
    4. export const eventTarget = new mars3d.BaseClass() // 事件对象,用于抛出事件到面板中
    5. // 需要覆盖config.json中地图属性参数(当前示例框架中自动处理合并)
    6. export const mapOptions = {
    7. scene: {
    8. center: { lat: 30.402686, lng: 116.303632, alt: 48692, heading: 3, pitch: -43 }
    9. }
    10. }
    11. /**
    12. * 初始化地图业务,生命周期钩子函数(必须)
    13. * 框架在地图初始化完成后自动调用该函数
    14. * @param {mars3d.Map} mapInstance 地图对象
    15. * @returns {void} 无
    16. */
    17. export function onMounted(mapInstance) {
    18. map = mapInstance // 记录首次创建的map
    19. // map.on(mars3d.EventType.removeLayer, function (event) {
    20. // console.log("移除了图层", event)
    21. // })
    22. map.viewer.scene.screenSpaceCameraController.enableRotate = false
    23. showDraw()
    24. }
    25. /**
    26. * 释放当前地图业务的生命周期函数
    27. * @returns {void} 无
    28. */
    29. export function onUnmounted() {
    30. map = null
    31. }
    32. function removeLayer() {
    33. if (graphicLayer) {
    34. graphicLayer.clear()
    35. map.removeLayer(graphicLayer, true)
    36. graphicLayer = null
    37. }
    38. if (tilesetLayer) {
    39. map.removeLayer(tilesetLayer, true)
    40. tilesetLayer = null
    41. }
    42. }
    43. /**
    44. * 平台通过draw标绘后保存的geojosn数据(已经内置style了,无需配置symbol)
    45. */
    46. export function showDraw(isFlyTo) {
    47. removeLayer()
    48. graphicLayer = new mars3d.layer.GeoJsonLayer({
    49. name: "标绘示例数据",
    50. url: "//data.mars3d.cn/file/geojson/mars3d-draw.json",
    51. popup: "{type} {name}",
    52. queryParameters: {
    53. token: "mars3d" // 可以传自定义url参数,如token等
    54. },
    55. symbol: {
    56. merge: true,
    57. styleOptions: {
    58. // 高亮时的样式
    59. highlight: {
    60. type: "click",
    61. opacity: 0.9
    62. }
    63. }
    64. },
    65. flyTo: isFlyTo
    66. })
    67. map.addLayer(graphicLayer)
    68. // load事件,必须在load完成前绑定才能监听
    69. graphicLayer.on(mars3d.EventType.load, function (event) {
    70. if (event.layer) {
    71. console.log("数据加载完成", event)
    72. }
    73. })
    74. setTimeout(() => {
    75. // readyPromise是可以load加载数据完成后去获取
    76. graphicLayer.readyPromise.then(function (layer) {
    77. console.log("readyPromise:数据加载完成", layer)
    78. })
    79. }, 5000)
    80. // 单击事件
    81. graphicLayer.on(mars3d.EventType.click, function (event) {
    82. console.log("单击了图层", event)
    83. })
    84. }
    85. /**
    86. * 点数据
    87. */
    88. export function showPoint() {
    89. removeLayer()
    90. window._test_button_click = function (attr) {
    91. globalAlert(JSON.stringify(attr), "测试查看详情")
    92. }
    93. graphicLayer = new mars3d.layer.GeoJsonLayer({
    94. name: "体育设施点",
    95. url: "//data.mars3d.cn/file/geojson/hfty-point.json",
    96. symbol: {
    97. styleOptions: {
    98. image: "img/marker/mark-red.png",
    99. verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
    100. scale: 1,
    101. scaleByDistance: true,
    102. scaleByDistance_far: 20000,
    103. scaleByDistance_farValue: 0.5,
    104. scaleByDistance_near: 1000,
    105. scaleByDistance_nearValue: 1,
    106. // setHeight: 5000, //指定高度
    107. label: {
    108. text: "{项目名称}",
    109. font_size: 25,
    110. color: "#ffffff",
    111. outline: true,
    112. outlineColor: "#000000",
    113. pixelOffsetY: -25,
    114. scaleByDistance: true,
    115. scaleByDistance_far: 80000,
    116. scaleByDistance_farValue: 0.5,
    117. scaleByDistance_near: 1000,
    118. scaleByDistance_nearValue: 1,
    119. distanceDisplayCondition: true,
    120. distanceDisplayCondition_far: 80000,
    121. distanceDisplayCondition_near: 0
    122. }
    123. }
    124. },
    125. popup: [
    126. { field: "项目名称", name: "项目名称" },
    127. { field: "建设性质", name: "建设性质" },
    128. { field: "设施级别", name: "设施级别" },
    129. { field: "所属区县", name: "所属区县" },
    130. { field: "建筑内容及", name: "建筑内容" },
    131. { field: "新增用地(", name: "新增用地" },
    132. { field: "开工", name: "开工" },
    133. { field: "总投资(万", name: "总投资" },
    134. { field: "资金来源", name: "资金来源" },
    135. { field: "初步选址", name: "初步选址" },
    136. { field: "设施类型", name: "设施类型" },
    137. { field: "设施等级", name: "设施等级" },
    138. { field: "所在区县", name: "所在区县" },
    139. { field: "具体位置", name: "具体位置" },
    140. { field: "建设内容(", name: "建设内容" },
    141. { field: "用地面积(", name: "用地面积", format: "mars3d.MeasureUtil.formatArea" },
    142. { field: "设施规模(", name: "设施规模" },
    143. { field: "举办者类型", name: "举办者类型" },
    144. { field: "开工时间", name: "开工时间" },
    145. { field: "总投资额(", name: "总投资额", unit: "亿元" },
    146. { field: "项目推进主", name: "项目推进主体" },
    147. { field: "项目进度", name: "项目进度" },
    148. { field: "项目来源", name: "项目来源" },
    149. { field: "备注", name: "备注" },
    150. { name: "详情", type: "button", className: "mars3d-popup-btn-custom", callback: "_test_button_click" }
    151. ],
    152. flyTo: true
    153. })
    154. map.addLayer(graphicLayer)
    155. // 绑定事件
    156. graphicLayer.on(mars3d.EventType.load, function (event) {
    157. console.log("数据加载完成", event)
    158. })
    159. graphicLayer.on(mars3d.EventType.click, function (event) {
    160. console.log("单击了图层", event)
    161. })
    162. }
    163. /**
    164. * 全国省界
    165. */
    166. export function showChinaLine() {
    167. removeLayer()
    168. graphicLayer = new mars3d.layer.GeoJsonLayer({
    169. name: "全国省界",
    170. url: "//data.mars3d.cn/file/geojson/areas/100000_full.json",
    171. format: simplifyGeoJSON, // 用于自定义处理geojson
    172. symbol: {
    173. type: "polylineP",
    174. styleOptions: {
    175. width: 2,
    176. materialType: mars3d.MaterialType.LineFlow,
    177. materialOptions: {
    178. color: "#00ffff",
    179. image: "img/textures/fence-line.png",
    180. speed: 10,
    181. repeat_x: 10
    182. },
    183. distanceDisplayCondition: true,
    184. distanceDisplayCondition_far: 12000000,
    185. distanceDisplayCondition_near: 100000,
    186. label: {
    187. text: "{name}",
    188. position: "{center}", // 省会位置center
    189. font_size: 30,
    190. color: "#ffffff",
    191. outline: true,
    192. outlineColor: "#000000",
    193. scaleByDistance: true,
    194. scaleByDistance_far: 60000000,
    195. scaleByDistance_farValue: 0.2,
    196. scaleByDistance_near: 1000000,
    197. scaleByDistance_nearValue: 1,
    198. distanceDisplayCondition: true,
    199. distanceDisplayCondition_far: 10000000,
    200. distanceDisplayCondition_near: 100000,
    201. setHeight: 10000
    202. }
    203. }
    204. },
    205. flyTo: true
    206. })
    207. map.addLayer(graphicLayer)
    208. // 绑定事件
    209. graphicLayer.on(mars3d.EventType.load, function (event) {
    210. console.log("数据加载完成", event)
    211. })
    212. }
    213. // 简化geojson的坐标
    214. function simplifyGeoJSON(geojson) {
    215. try {
    216. geojson = turf.simplify(geojson, { tolerance: 0.0001, highQuality: true, mutate: true })
    217. } catch (e) {
    218. //
    219. }
    220. return geojson
    221. }
    222. /**
    223. * 显示合肥区域面
    224. */
    225. export function showRegion() {
    226. removeLayer()
    227. graphicLayer = new mars3d.layer.GeoJsonLayer({
    228. name: "合肥市",
    229. url: "//data.mars3d.cn/file/geojson/areas/340100_full.json",
    230. symbol: {
    231. styleOptions: {
    232. fill: true,
    233. randomColor: true, // 随机色
    234. opacity: 0.3,
    235. outline: true,
    236. outlineStyle: {
    237. color: "#FED976",
    238. width: 3,
    239. opacity: 1
    240. },
    241. // 高亮时的样式
    242. highlight: {
    243. opacity: 0.9,
    244. outlineStyle: {
    245. width: 6,
    246. color: "#ff0000",
    247. addHeight: 100
    248. },
    249. label: { show: true }
    250. },
    251. label: {
    252. show: false,
    253. // 面中心点,显示文字的配置
    254. text: "{name}", // 对应的属性名称
    255. opacity: 1,
    256. font_size: 40,
    257. color: "#ffffff",
    258. font_family: "楷体",
    259. outline: true,
    260. outlineColor: "#000000",
    261. outlineWidth: 3,
    262. background: false,
    263. backgroundColor: "#000000",
    264. backgroundOpacity: 0.1,
    265. font_weight: "normal",
    266. font_style: "normal",
    267. scaleByDistance: true,
    268. scaleByDistance_far: 20000000,
    269. scaleByDistance_farValue: 0.1,
    270. scaleByDistance_near: 1000,
    271. scaleByDistance_nearValue: 1,
    272. distanceDisplayCondition: false,
    273. distanceDisplayCondition_far: 10000,
    274. distanceDisplayCondition_near: 0,
    275. visibleDepth: false
    276. }
    277. }
    278. },
    279. popup: "{name}",
    280. // "tooltip": "{name}",
    281. flyTo: true
    282. })
    283. map.addLayer(graphicLayer)
    284. // 绑定事件
    285. graphicLayer.on(mars3d.EventType.load, function (event) {
    286. console.log("数据加载完成", event)
    287. })
    288. graphicLayer.on(mars3d.EventType.click, function (event) {
    289. console.log("单击了图层", event)
    290. })
    291. }
    292. // 规划面
    293. export function showPlanningSurface() {
    294. removeLayer()
    295. map.setCameraView({ lat: 31.591382, lng: 120.718945, alt: 784, heading: 279, pitch: -67 })
    296. graphicLayer = new mars3d.layer.GeoJsonLayer({
    297. id: 1987,
    298. name: "用地规划",
    299. // 1.支持URL
    300. url: "//data.mars3d.cn/file/geojson/guihua.json",
    301. // 2.也支持直接传入数据
    302. // data: {
    303. // type: "FeatureCollection",
    304. // name: "用地规划",
    305. // features: [] //数据已省略,可以从上面guihua.json中复制
    306. // },
    307. symbol: {
    308. type: "polygonC",
    309. styleOptions: {
    310. opacity: 0.6,
    311. color: "#0000FF"
    312. },
    313. styleField: "类型",
    314. styleFieldOptions: {
    315. 一类居住用地: { color: "#FFDF7F" },
    316. 二类居住用地: { color: "#FFFF00" },
    317. 社区服务用地: { color: "#FF6A38" },
    318. 幼托用地: { color: "#FF6A38" },
    319. 商住混合用地: { color: "#FF850A" },
    320. 行政办公用地: { color: "#FF00FF" },
    321. 文化设施用地: { color: "#FF00FF" },
    322. 小学用地: { color: "#FF7FFF" },
    323. 初中用地: { color: "#FF7FFF" },
    324. 体育场用地: { color: "#00A57C" },
    325. 医院用地: { color: "#A5527C" },
    326. 社会福利用地: { color: "#FF7F9F" },
    327. 商业用地: { color: "#FF0000" },
    328. 商务用地: { color: "#7F0000" },
    329. 营业网点用地: { color: "#FF7F7F" },
    330. 一类工业用地: { color: "#A57C52" },
    331. 社会停车场用地: { color: "#C0C0C0" },
    332. 通信用地: { color: "#007CA5" },
    333. 排水用地: { color: "#00BFFF" },
    334. 公园绿地: { color: "#00FF00" },
    335. 防护绿地: { color: "#007F00" },
    336. 河流水域: { color: "#7FFFFF" },
    337. 配建停车场: { color: "#ffffff" },
    338. 道路用地: { color: "#ffffff" }
    339. }
    340. },
    341. popup: "类型:{类型}"
    342. // flyTo: true,
    343. })
    344. map.addLayer(graphicLayer)
    345. // 下面代码演示如果再config.json中配置的图层,如何绑定额外事件方法
    346. // 绑定config.json中对应图层配置的"id"值图层的单击事件(比如下面是id:1987对应图层)
    347. const layerTest = map.getLayerById(1987)
    348. // 绑定事件
    349. layerTest.on(mars3d.EventType.load, function (event) {
    350. console.log("数据加载完成", event)
    351. })
    352. layerTest.on(mars3d.EventType.click, function (event) {
    353. // 单击事件
    354. console.log("单击了图层", event)
    355. })
    356. }
    357. /**
    358. * 立体建筑物
    359. */
    360. export function showBuilding() {
    361. removeLayer()
    362. graphicLayer = new mars3d.layer.GeoJsonLayer({
    363. name: "建筑物面",
    364. url: "//data.mars3d.cn/file/geojson/buildings-demo.json",
    365. symbol: {
    366. styleOptions: {
    367. color: "#0d3685",
    368. outlineColor: "#0d3685",
    369. opacity: 0.8
    370. },
    371. callback: function (attr, styleOpt) {
    372. const diffHeight = Number(attr.floors || 1) * Number(attr.flo_height)
    373. return { height: 0, diffHeight }
    374. }
    375. },
    376. center: { lat: 31.928659, lng: 120.420654, alt: 838, heading: 344, pitch: -42 },
    377. popup: "all",
    378. popupOptions: {
    379. showNull: true
    380. },
    381. flyTo: true
    382. })
    383. map.addLayer(graphicLayer)
    384. // 绑定事件
    385. graphicLayer.on(mars3d.EventType.load, function (event) {
    386. console.log("数据加载完成", event)
    387. })
    388. }
    389. /**
    390. * 分层分户立体建筑物
    391. */
    392. export function showFloor() {
    393. removeLayer()
    394. graphicLayer = new mars3d.layer.GeoJsonLayer({
    395. name: "分层分户建筑物面",
    396. url: "//data.mars3d.cn/file/geojson/huxing.json",
    397. symbol: {
    398. styleOptions: {
    399. color: "#ffffff",
    400. opacity: 0.2,
    401. outline: true,
    402. outlineColor: "#63AEFF",
    403. outlineOpacity: 0.3,
    404. highlight: {
    405. type: "click",
    406. color: "#00ffff",
    407. opacity: 0.6
    408. }
    409. },
    410. callback: function (attr, styleOpt) {
    411. const flrH = attr.floorh || 0 // 底面高度
    412. const lyrH = attr.layerh || 0 // 楼层高度
    413. return { height: flrH, diffHeight: lyrH }
    414. }
    415. },
    416. // popup: "all",
    417. center: { lat: 31.821524, lng: 117.179329, alt: 255, heading: 25, pitch: -48 },
    418. flyTo: true
    419. })
    420. map.addLayer(graphicLayer)
    421. // 绑定事件
    422. graphicLayer.on(mars3d.EventType.load, function (event) {
    423. console.log("数据加载完成", event)
    424. })
    425. }
    426. /**
    427. * 行政区划 ,转为wall显示
    428. */
    429. export function showBoundaryWall() {
    430. removeLayer()
    431. map.setCameraView({ lat: 30.561661, lng: 117.663884, alt: 113078, heading: 346, pitch: -43 })
    432. graphicLayer = new mars3d.layer.GeoJsonLayer({
    433. name: "合肥市",
    434. url: "//data.mars3d.cn/file/geojson/areas/340100_full.json",
    435. symbol: {
    436. type: "wall",
    437. styleOptions: {
    438. diffHeight: 5000, // 墙高
    439. materialType: mars3d.MaterialType.LineFlow,
    440. materialOptions: {
    441. color: "#00ffff", // 颜色
    442. opacity: 0.6, // 透明度
    443. image: "img/textures/fence.png", // 图片
    444. repeatX: 1, // 重复数量
    445. axisY: true, // 竖直方向
    446. speed: 10 // 速度
    447. },
    448. // 高亮时的样式
    449. highlight: {
    450. type: "click",
    451. color: "#ffff00"
    452. }
    453. }
    454. },
    455. popup: "{name}"
    456. // "tooltip": "{name}",
    457. // flyTo: true,
    458. })
    459. map.addLayer(graphicLayer)
    460. // 绑定事件
    461. graphicLayer.on(mars3d.EventType.load, function (event) {
    462. console.log("数据加载完成", event)
    463. })
    464. graphicLayer.on(mars3d.EventType.click, function (event) {
    465. console.log("单击了图层", event)
    466. })
    467. }
    468. /**
    469. * 显示特殊面数据(单体化)
    470. */
    471. let tilesetLayer
    472. export function showMonomer() {
    473. removeLayer()
    474. // 三维模型
    475. if (!tilesetLayer) {
    476. tilesetLayer = new mars3d.layer.TilesetLayer({
    477. name: "文庙",
    478. type: "3dtiles",
    479. url: "//data.mars3d.cn/3dtiles/qx-simiao/tileset.json",
    480. position: { alt: 38.8 },
    481. maximumScreenSpaceError: 1,
    482. show: true
    483. })
    484. map.addLayer(tilesetLayer)
    485. }
    486. graphicLayer = new mars3d.layer.GeoJsonLayer({
    487. name: "文庙-单体化",
    488. url: " //data.mars3d.cn/file/geojson/dth-wm.json",
    489. symbol: {
    490. type: "polygonP",
    491. styleOptions: {
    492. // 单体化默认显示样式
    493. color: "rgba(255, 255, 255, 0.01)",
    494. clampToGround: true,
    495. classification: true,
    496. // 单体化鼠标移入或单击后高亮的样式
    497. highlight: {
    498. // type: mars3d.EventType.click,
    499. color: "rgba(255,255,0,0.4)"
    500. }
    501. }
    502. },
    503. popup: [
    504. { field: "name", name: "房屋名称" },
    505. { field: "jznf", name: "建造年份" },
    506. { field: "ssdw", name: "所属单位" },
    507. { field: "remark", name: "备注信息" }
    508. ],
    509. center: { lat: 33.589442, lng: 119.031613, alt: 254, heading: 5, pitch: -37 },
    510. flyTo: true
    511. })
    512. map.addLayer(graphicLayer)
    513. // 绑定事件
    514. graphicLayer.on(mars3d.EventType.load, function (event) {
    515. console.log("数据加载完成", event)
    516. })
    517. }
    518. /**
    519. * 显示世界各国
    520. */
    521. export function showWorld() {
    522. removeLayer()
    523. map.setCameraView({ lat: 22.564341, lng: 89.44688, alt: 10817167, heading: 0, pitch: -87 })
    524. graphicLayer = new mars3d.layer.GeoJsonLayer({
    525. name: "国界线",
    526. url: "//data.mars3d.cn/file/geojson/world.json",
    527. symbol: {
    528. type: "polygonP",
    529. styleOptions: {
    530. fill: true,
    531. // color: '#ffffff',
    532. // opacity: 0.01,
    533. randomColor: true,
    534. opacity: 0.5,
    535. // 高亮时的样式
    536. highlight: {
    537. type: "click",
    538. color: "#ffff00"
    539. }
    540. },
    541. styleField: "name",
    542. styleFieldOptions: {
    543. Russia: { clampToGround: true }
    544. }
    545. },
    546. popup: "{name} {name_cn}"
    547. })
    548. map.addLayer(graphicLayer)
    549. // 绑定事件
    550. graphicLayer.on(mars3d.EventType.load, function (event) {
    551. console.log("数据加载完成", event)
    552. })
    553. graphicLayer.on(mars3d.EventType.click, function (event) {
    554. console.log("单击了图层", event)
    555. })
    556. }
    557. // 加载GCJ数据进行纠偏
    558. export function showGCJ02Data() {
    559. removeLayer()
    560. const gcjLayer = new mars3d.layer.GeoJsonLayer({
    561. name: "纠偏前",
    562. url: "//data.mars3d.cn/file/geojson/areas/340303.json",
    563. symbol: {
    564. styleOptions: {
    565. fill: false,
    566. outline: true,
    567. outlineStyle: {
    568. color: "#FF0000",
    569. width: 3
    570. }
    571. }
    572. },
    573. popup: "纠偏前GCJ02坐标"
    574. })
    575. map.addLayer(gcjLayer)
    576. graphicLayer = new mars3d.layer.GeoJsonLayer({
    577. name: "纠偏后",
    578. url: "//data.mars3d.cn/file/geojson/areas/340303.json",
    579. chinaCRS: mars3d.ChinaCRS.GCJ02, // 标识数据坐标,内部会纠偏
    580. symbol: {
    581. styleOptions: {
    582. fill: false,
    583. outline: true,
    584. outlineStyle: {
    585. color: "#00ffff",
    586. width: 3
    587. }
    588. }
    589. },
    590. popup: "纠偏后WGS坐标",
    591. flyTo: true
    592. })
    593. map.addLayer(graphicLayer)
    594. }

  • 相关阅读:
    java 类和对象 属性和行为
    艺术与科技的狂欢,阿那亚2022砂之盒沉浸艺术季
    Python 脚本中的 FFmpeg
    Python刘诗诗
    Android 和Java 的关系
    shein面试:nacos无入侵配置,做过吗,怎么做?
    vscode 调试和远程
    英语学习(娱乐篇)
    uniapp小程序与webview通信
    Django ORM 多表操作:一对一、一对多、多对多的增删改,基于对象/双下划线的跨表查询
  • 原文地址:https://blog.csdn.net/m0_69803146/article/details/137965066