Cesium和vue的解决方案

最新推荐文章于 2024-09-29 01:11:37 发布
最新推荐文章于 2024-09-29 01:11:37 发布
阅读量950 收藏 2
点赞数 2
文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/suixishix/article/details/127878890
版权

Iframe

当Vue项目需要使用到cesium时，可以使用iframe标签进行开发

  • 在static下面新建目录 

  • 引入Cesium.js文件

  • 导入方法文件

  • createGdMap.js代码
const BD_FACTOR = (3.14159265358979324 * 3000.0) / 180.0
const PI = 3.1415926535897932384626
const RADIUS = 6378245.0
const EE = 0.00669342162296594323
class GdTilingScheme extends Cesium.WebMercatorTilingScheme {
  constructor(options) {
    super(options)
    let projection = new Cesium.WebMercatorProjection()
    this._projection.project = function(cartographic, result) {
      result = CoordTransform.WGS84ToGCJ02(
        Cesium.Math.toDegrees(cartographic.longitude),
        Cesium.Math.toDegrees(cartographic.latitude)
      )
      result = projection.project(
        new Cesium.Cartographic(
          Cesium.Math.toRadians(result[0]),
          Cesium.Math.toRadians(result[1])
        )
      )
      return new Cesium.Cartesian2(result.x, result.y)
    }
    this._projection.unproject = function(cartesian, result) {
      let cartographic = projection.unproject(cartesian)
      result = CoordTransform.GCJ02ToWGS84(
        Cesium.Math.toDegrees(cartographic.longitude),
        Cesium.Math.toDegrees(cartographic.latitude)
      )
      return new Cesium.Cartographic(
        Cesium.Math.toRadians(result[0]),
        Cesium.Math.toRadians(result[1])
      )
    }
    class CoordTransform {
      static BD09ToGCJ02(lng, lat) {
        let x = +lng - 0.0065
        let y = +lat - 0.006
        let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * BD_FACTOR)
        let theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * BD_FACTOR)
        let gg_lng = z * Math.cos(theta)
        let gg_lat = z * Math.sin(theta)
        return [gg_lng, gg_lat]
      }
      static GCJ02ToBD09(lng, lat) {
        lat = +lat
        lng = +lng
        let z =
          Math.sqrt(lng * lng + lat * lat) + 0.00002 * Math.sin(lat * BD_FACTOR)
        let theta = Math.atan2(lat, lng) + 0.000003 * Math.cos(lng * BD_FACTOR)
        let bd_lng = z * Math.cos(theta) + 0.0065
        let bd_lat = z * Math.sin(theta) + 0.006
        return [bd_lng, bd_lat]
      }
      static WGS84ToGCJ02(lng, lat) {
        lat = +lat
        lng = +lng
        if (this.out_of_china(lng, lat)) {
          return [lng, lat]
        } else {
          let d = this.delta(lng, lat)
          return [lng + d[0], lat + d[1]]
        }
      }
      static GCJ02ToWGS84(lng, lat) {
        lat = +lat
        lng = +lng
        if (this.out_of_china(lng, lat)) {
          return [lng, lat]
        } else {
          let d = this.delta(lng, lat)
          let mgLng = lng + d[0]
          let mgLat = lat + d[1]
          return [lng * 2 - mgLng, lat * 2 - mgLat]
        }
      }
      static delta(lng, lat) {
        let dLng = this.transformLng(lng - 105, lat - 35)
        let dLat = this.transformLat(lng - 105, lat - 35)
        const radLat = (lat / 180) * PI
        let magic = Math.sin(radLat)
        magic = 1 - EE * magic * magic
        const sqrtMagic = Math.sqrt(magic)
        dLng = (dLng * 180) / ((RADIUS / sqrtMagic) * Math.cos(radLat) * PI)
        dLat = (dLat * 180) / (((RADIUS * (1 - EE)) / (magic * sqrtMagic)) * PI)
        return [dLng, dLat]
      }
      static transformLng(lng, lat) {
        lat = +lat
        lng = +lng
        let ret =
          300.0 +
          lng +
          2.0 * lat +
          0.1 * lng * lng +
          0.1 * lng * lat +
          0.1 * Math.sqrt(Math.abs(lng))
        ret +=
          ((20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) *
            2.0) /
          3.0
        ret +=
          ((20.0 * Math.sin(lng * PI) + 40.0 * Math.sin((lng / 3.0) * PI)) * 2.0) /
          3.0
        ret +=
          ((150.0 * Math.sin((lng / 12.0) * PI) +
            300.0 * Math.sin((lng / 30.0) * PI)) *
            2.0) /
          3.0
        return ret
      }
      static transformLat(lng, lat) {
        lat = +lat
        lng = +lng
        let ret =
          -100.0 +
          2.0 * lng +
          3.0 * lat +
          0.2 * lat * lat +
          0.1 * lng * lat +
          0.2 * Math.sqrt(Math.abs(lng))
        ret +=
          ((20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) *
            2.0) /
          3.0
        ret +=
          ((20.0 * Math.sin(lat * PI) + 40.0 * Math.sin((lat / 3.0) * PI)) * 2.0) /
          3.0
        ret +=
          ((160.0 * Math.sin((lat / 12.0) * PI) +
            320 * Math.sin((lat * PI) / 30.0)) *
            2.0) /
          3.0
        return ret
      }
      static out_of_china(lng, lat) {
        lat = +lat
        lng = +lng
        return !(lng > 73.66 && lng < 135.05 && lat > 3.86 && lat < 53.55)
      }
    }
  }
}
class GdMap extends Cesium.UrlTemplateImageryProvider {
  constructor(options = {}) {
    options.subdomains = ['01', '02', '03', '04']
    options.tilingScheme = new GdTilingScheme()
    super(options)
  }
}
  •  编写HTML页面
  1. 官网申请天地图key，初始化地图 
        function init () {
            viewer = new Cesium.Viewer('cesiumContainer',{
                selectionIndicator: false,
                contextOptions:{
                    webgl : {
                        alpha : true,
                        depth : true,
                        stencil : false,
                        antialias: true
                    }
                },
                shadows: true,
                animation: false,  //是否显示动画控件
                baseLayerPicker: false, //是否显示图层选择控件
                geocoder: false, //是否显示地名查找控件
                timeline: false, //是否显示时间线控件
                sceneModePicker: false, //是否显示投影方式控件
                navigationHelpButton: false, //是否显示帮助信息控件
                infoBox: false,  //是否显示点击要素之后显示的信息
                imageryProvider:false,
                fullscreenButton: false,
                homeButton:false
            })
            viewer.scene.morphTo2D(0)
            viewer.cesiumWidget.creditContainer.style.display = "none";
            viewer.camera.setView({
                destination: Cesium.Cartesian3.fromDegrees(112.99, 28.2, 200000.3623875733)
            })
        }

  2. 写添加基础图层方法 
    //编写方法
        function addGd (url) {
            const gdLayer = new GdMap({url})
            viewer.imageryLayers.addImageryProvider(gdLayer)
        }
  3. 调用函数 
    //地图初始化
init()

//添加地图图层
addGd('https://t1.tianditu.gov.cn/img_w/wmts?Service=WMTS&Request=GetTile&Version=1.0.0&Style=Default&Format=tiles&serviceMode=KVP&layer=img&TileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&tk=6c6c18e4ec555ea8f0976ec71960021f')

addGd('https://t1.tianditu.gov.cn/cia_w/wmts?Service=WMTS&Request=GetTile&Version=1.0.0&Style=Default&Format=tiles&serviceMode=KVP&layer=cia&TileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&tk=6c6c18e4ec555ea8f0976ec71960021f')
  4. 完整代码 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">  <!-- Use Chrome Frame in IE -->
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
   //导入Cesium文件
    <link href="./Cesium/Widgets/widgets.css" rel="stylesheet">
    <script type="text/javascript" src="./Cesium/Cesium.js"></script>
   //导入jquery文件
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  //导入createGdMap.js文件
    <script type="text/javascript" src="./common/createGdMap.js"></script>
</head>
<body>
<style>
    html, body, #cesiumContainer {
        width: 100%;
        height: 98%;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    canvas {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
</style>
<span>
</span>
<div id="cesiumContainer" class="fullSize"></div>
</body>
<script type="text/javascript">
    var viewer = null
    init()
     //天地图影像
    addGd('https://t1.tianditu.gov.cn/img_w/wmts?Service=WMTS&Request=GetTile&Version=1.0.0&Style=Default&Format=tiles&serviceMode=KVP&layer=img&TileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&tk=6c6c18e4ec555ea8f0976ec71960021f')
      //天地图注记
    addGd('https://t1.tianditu.gov.cn/cia_w/wmts?Service=WMTS&Request=GetTile&Version=1.0.0&Style=Default&Format=tiles&serviceMode=KVP&layer=cia&TileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&tk=6c6c18e4ec555ea8f0976ec71960021f')
        function init () {
            viewer = new Cesium.Viewer('cesiumContainer',{
                selectionIndicator: false,
                contextOptions:{
                    webgl : {
                        alpha : true,
                        depth : true,
                        stencil : false,
                        antialias: true
                    }
                },
                shadows: true,
                animation: false,  //是否显示动画控件
                baseLayerPicker: false, //是否显示图层选择控件
                geocoder: false, //是否显示地名查找控件
                timeline: false, //是否显示时间线控件
                sceneModePicker: false, //是否显示投影方式控件
                navigationHelpButton: false, //是否显示帮助信息控件
                infoBox: false,  //是否显示点击要素之后显示的信息
                imageryProvider:false,
                fullscreenButton: false,
                homeButton:false
            })
            viewer.scene.morphTo2D(0)
            viewer.cesiumWidget.creditContainer.style.display = "none";
            viewer.camera.setView({
                destination: Cesium.Cartesian3.fromDegrees(112.99, 28.2, 200000.3623875733)
            })
        }
//编写方法
        function addGd (url) {
            const gdLayer = new GdMap({url})
            viewer.imageryLayers.addImageryProvider(gdLayer)
        }
</script>
</html>
  • 使用其他服务调用方法 
       function addcanvas () {
         viewer= new Cesium.WebMapTileServiceImageryProvider({
            url: '服务地址',
            layer: '服务名称',
            style: 'default',
            format: 'image/webp',
            tileWidth: 256,
            tileHeight: 256,
            tilingScheme: new Cesium.GeographicTilingScheme(),
            tileMatrixLabels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19"]
        })
        viewer.imageryLayers.addImageryProvider(viewer)
    }
  • 地理定位
  1. 搜索并调用天地图地理定位

天地图搜索接口：

http://api.tianditu.gov.cn/search?postStr={"keyWord":"${keyWord}","level":"15","mapBound":"116.40569,39.91088,116.45119,39.93542","queryType":"7","count":"1","start":"0","queryTerminal":"10000"}&type=query&tk=6c6c18e4ec555ea8f0976ec71960021f

keyword：搜索关键字

mapBound：搜索范围

tk替换成申请的token

ajax发送请求

$.ajax({
            url:`http://api.tianditu.gov.cn/search?postStr={"keyWord":"${keyWord}","level":"15","mapBound":"116.40569,39.91088,116.45119,39.93542","queryType":"7","count":"1","start":"0","queryTerminal":"10000"}&type=query&tk=6c6c18e4ec555ea8f0976ec71960021f`,
            type: 'get',
            async: false,
            success: function (response) {
                if (response.pois === undefined) {
                    alert('无法获取地理位置！');
                } else {
                    //定位到搜索地
                    viewer.camera.flyTo({
                        destination: Cesium.Cartesian3.fromDegrees('坐标经度', 坐标纬度,  摄像头高度),
                        orientation: {
                            heading: Cesium.Math.toRadians(0.0),
                            pitch: Cesium.Math.toRadians(-90.0),
                            roll: 0.0,
                        },
                    });
                }
            }
        });
  • 添加点击事件 
     function getClickPointAdd(_viewer) {
        // 注册屏幕点击事件
        let handler = new Cesium.ScreenSpaceEventHandler(_viewer.scene.canvas);
        handler.setInputAction(function(event) {
            if (window.lnglatarr.length===0){
                // 转换为不包含地形的笛卡尔坐标
                let clickPosition = _viewer.scene.camera.pickEllipsoid(event.position);
                // 转经纬度（弧度）坐标
                let radiansPos = Cesium.Cartographic.fromCartesian(clickPosition);
                // 转角度
                lnglat.lng=Cesium.Math.toDegrees(radiansPos.longitude)
                lnglat.lat=Cesium.Math.toDegrees(radiansPos.latitude)
                lnglatarr.push(lnglat)
                console.log(lnglat)
                // 添加点
                _viewer.entities.add({
                    id:'one',
                    position: clickPosition,
                    billboard: {
                        // 图片
                        image: "./img/坐标-fill.png",
                        // 图片大小
                        width: 25,
                        height: 30,
                    },
                })
            }else if (window.lnglatarr.length>0){
                viewer.entities.removeAll();
                lnglatarr=[]
                // 转换为不包含地形的笛卡尔坐标
                let clickPosition = _viewer.scene.camera.pickEllipsoid(event.position);
                // 转经纬度（弧度）坐标
                let radiansPos = Cesium.Cartographic.fromCartesian(clickPosition);
                // 转角度
                lnglat.lng=Cesium.Math.toDegrees(radiansPos.longitude)
                lnglat.lat=Cesium.Math.toDegrees(radiansPos.latitude)
                lnglatarr.push(lnglat)
                console.log(lnglatarr)
                // 添加点
                _viewer.entities.add({
                    id:'two',
                    position: clickPosition,
                    billboard: {
                        // 图片
                        image: "./img/坐标-fill.png",
                        // 图片大小
                        width: 25,
                        height: 30,
                    },
                })
            }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    }

通过点击把图标添加到画布上

 

 以上为这个星期的总结还有其他问题正在研究当中

 

随喜师兄
关注
基于Cesium+Vue3.x 技术栈的300多个功能示例源码
12-28
每个示例都是一个独立的功能模块，开发者可以按照自己的需求挑选并集成到自己的项目中，也可以通过查看源码学习到最佳实践和常见问题的解决方案。通过这个项目，你将能够熟练地运用Cesium和Vue 3.x技术栈，构建出...
Vue 54 ，CesiumJS 1 ，CesiumJS在项目中的详细使用过程，在Vue中使用CesiumJS（WebGIS中的Cesium地图可视化应用）
weixin_65793170的博客
06-21 1万+
⭐Cesium是一种基于WebGL开源的虚拟地球技术，可以用于构建高性能、跨平台的三维地球应用程序，它支持多种数据格式和地图服务，可以实现地球表面的高精度渲染、地形分析、数据可视化等功能。Cesium还提供了丰富的API和插件，方便开发者进行二次开发和定制化，且可免费商用，在航空航天、国防、城市规划、教育等领域得到了广泛应用。
vue使用cesium
qq_41713136的博客
10-09 6991
cesium.js
vue3项目中引入Cesium
m0_62317155的博客
09-29 1437
01创建Cesium项目
最新Vue + Cesium环境配置
热门推荐
qq_26610239的博客
02-24 1万+
vue中配置cesium最新教程，最新适配vue 3+、cesium 1.111。
Cesium +VUE 安装配置
瑾&凌
08-02 5320
cesium +vue 环境配置
Vue+Cesium创建项目并加载地图全过程
wangyong_h
03-05 6473
Vue2创建项目并配置Cesium加载三维地图 cesium 安装配置 npm run dev 运行错误处理
cesium-vue-big-model-example
03-22
这个示例项目结合两者，为开发3D地理空间应用提供了一个高效的解决方案。 在该项目中，开发者可以学习到以下几个关键知识点： 1. **Cesium库的使用**：Cesium提供了丰富的API，可以用于加载地形、遥感影像、3D模型...
VUE+Cesium+Supermap倾斜多图层叠加
05-08
在现代Web GIS开发中，利用Vue.js框架与Cesium库结合，可以构建高效、交互性强的3D地理信息系统...在实际开发过程中，还需要考虑性能优化、用户体验设计以及与其他后端系统的集成等问题，以实现一个完整的GIS解决方案。
基于vue3.0+typescript的cesium地图可视化设计源码
最新发布
09-29
本项目是一款基于Vue 3.0和TypeScript的前端可视化解决方案，包含527个文件，涵盖143个PNG图像、105个JavaScript文件、93个地图文件、53个JPG图片、40个TypeScript文件、27个CSS样式文件、11个Vue组件文件、10个SVG...
cesium版本压缩版
10-27
总之，"cesium版本压缩版"是为了在Vue环境中更顺利地使用Cesium而提供的解决方案，它可能包含了对Vue友好的配置，减少了与loader相关的错误。通过理解和应用这样的特殊版本，开发者可以更有效地集成Cesium，同时也...
vue 中使用 cesium
12-27 9408
vue 中使用 cesium 我是在 vue 项目里面使用的 cesium，但是呢，有点问题，就是有些语法在js转vue的时候有些许的限制，比如说js中相对路径引入文件是一切OK的，vue 也能解决，但是呢，在引入的文件中又引用了其他的文件，vue 处理起来就不是特别的好用，所以说，我是直接在 vue 文件里面使用 iframe 标签引入的 html 文件来实现接入的，而vue和iframe之间的通信采用的 postMessage 方式实现，下面就稍微介绍一下。 vue项目引入cesium 这个相对来说
Cesium.js基础使用（vue）
Alone_Endeavor的博客
07-04 6390
之后就可以访问高清页面；通过以下官网地址申请。
vue项目引入cesium,创建3d地球,快速上手~
白云苍狗
05-23 4441
vue项目中简单快速引入cesium,创建3d地球,简单封装自己的cesium
Cesium 在vue中如何引入
qq_37732512的博客
12-06 4120
这篇文章并没有从优化、打包、最优引入方面来分析，仅仅是列出了几种引入方式，主要是在平常开发中，这些也确实够了，最近又看了一位博主的文章，已经说的很明白了，从Cesium前置知识、到打包优化、再到选择最优引入，这一篇文章已经够用了。教程 - 在 Vue3+Ts 中引入 CesiumJS 的最佳实践@2023。
【在Vue项目上使用cesium】
m0_45991266的博客
11-16 3178
在Vue项目上使用cesium,我主要是为了对ceisum项目进行二次开发
在vue上使用cesium开发三维地图
wangyingying12的博客
04-18 5414
沙盒是一种安全特性，将潜在风险的代码（例如第三方脚本）与系统的其余部分隔离开来，防止脚本对浏览器的恶意操作。'allow-scripts'是一个权限选项，允许在沙箱环境中运行脚本。如果未设置此权限，浏览器将阻止脚本在沙箱中运行并显示此错误消息。这个错误信息通常出现在脚本尝试在沙盒框架中运行，但是'allow-scripts'权限没有被设置。这只是一个简单的示例，您可以通过查看 Cesium 的文档和示例来学习如何使用更高级的功能。接下来，在 Vue 项目中引入 Cesium，可以使用以下几种方式。
vue3+cesium项目搭建
Rice_w的博客
07-10 4958
最近需要在一个Vue3的项目中使用到cesium，对于一个cesium没有太多了解的人来说，还是比较麻烦的，本篇博文就将自己在这个过程踩的坑记录下来，有需要的可以看一下。
创建vue3项目并集成cesium插件运行
nandao158的博客
03-23 4800
开发人员可以根据需要自定义 Git 钩子脚本，并将其放置在 .husky 文件夹中相应的钩子文件中，例如 pre-commit 钩子脚本会在提交代码前执行。配置 Husky 工具的方式通常是在项目的 package.json 文件中添加相应的配置项，例如指定钩子脚本的路径和需要执行的命令等。Source文件夹是Cesium整个项目工程的重中之重，涉及到的所有类的源码和自定义shader（渲染）源码都存储在此文件夹里，可以通过阅读源码研究每个类、属性、方法及事件的实现原理。大概是找不到cesium相关类。
Cesium+VUE实现态势标绘箭头功能完整示例源码
通过以上知识点的详细阐述，可以看出该资源包提供了一套完整的解决方案，使得开发者能够快速掌握和实现Cesium+Vue在态势标绘方面的应用。这对于需要进行地理信息展示和动态地图开发的开发者来说，是一套非常有用的...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值