Cesium和vue的解决方案

最新推荐文章于 2024-04-03 03:34:29 发布
最新推荐文章于 2024-04-03 03:34:29 发布
阅读量896 收藏 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);
    }

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

 

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

 

随喜师兄
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
CesiumJS第1篇，CesiumJS使用详细，在vue中使用Cesium.js（WebGIS中的Cesium地图可视化应用）
weixin_65793170的博客
06-21 9806
Cesium是一种基于WebGL开源的虚拟地球技术，可以用于构建高性能、跨平台的三维地球应用程序，它支持多种数据格式和地图服务，可以实现地球表面的高精度渲染、地形分析、数据可视化等功能。Cesium还提供了丰富的API和插件，方便开发者进行二次开发和定制化，且可免费商用，在航空航天、国防、城市规划、教育等领域得到了广泛应用。
Cesium+Vue
02-22
基础环境搭建（参考Cesium专栏，实现专栏1、2和3功能）
vue使用cesium
qq_41713136的博客
10-09 6844
cesium.js
cesium+Vue项目环境搭建，突破系列
最新发布
2401_84098033的博客
04-03 585
学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。unknownContextRegExp: /^./.*$/,//Webpack打印载入特定库时候的警告。
最新Vue + Cesium环境配置
热门推荐
qq_26610239的博客
02-24 1万+
vue中配置cesium最新教程，最新适配vue 3+、cesium 1.111。
Cesium +VUE 安装配置
瑾&凌
08-02 5174
cesium +vue 环境配置
Vue+Cesium创建项目并加载地图全过程
wangyong_h
03-05 5780
Vue2创建项目并配置Cesium加载三维地图 cesium 安装配置 npm run dev 运行错误处理
Cesium/VUE态势标绘组件完整源代码（未加密）：基于Cesium+VUE实现完整态势标绘组件，未加密，未压缩
05-09
也可以直接订阅我的专栏，同样可以拿到整个组件的所有源代码，专栏地址：https://blog.csdn.net/qq_34205305/category_11737227.htmlCesium/VUE态势标绘组件完整源代码（未加密）：基于Cesium+VUE实现完整态势标绘...
vue3.x中使用cesium，vue3.x+Cesium
05-04
在vue3.x版本中使用cesium，基于vue-cli创建项目，手动配置webpack，资源已配置好，下载完 进入项目下npm install 安装依赖后就可以运行了
cesium+vue实现飞机模型按照预定航线飞行
01-17
cesium+vue实现飞机模型按照预定航线飞行
vue2.0项目集成Cesium的实现方法
10-16
主要介绍了vue2.0项目集成Cesium的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Cesium.js基础使用（vue）
Alone_Endeavor的博客
07-04 4858
之后就可以访问高清页面；通过以下官网地址申请。
vue项目引入cesium,创建3d地球,快速上手~
白云苍狗
05-23 3564
vue项目中简单快速引入cesium,创建3d地球,简单封装自己的cesium
vue 中使用 cesium
大家好，我是 ed.
12-27 8702
vue 中使用 cesium 我是在 vue 项目里面使用的 cesium，但是呢，有点问题，就是有些语法在js转vue的时候有些许的限制，比如说js中相对路径引入文件是一切OK的，vue 也能解决，但是呢，在引入的文件中又引用了其他的文件，vue 处理起来就不是特别的好用，所以说，我是直接在 vue 文件里面使用 iframe 标签引入的 html 文件来实现接入的，而vue和iframe之间的通信采用的 postMessage 方式实现，下面就稍微介绍一下。 vue项目引入cesium 这个相对来说
【在Vue项目上使用cesium】
m0_45991266的博客
11-16 2971
在Vue项目上使用cesium,我主要是为了对ceisum项目进行二次开发
vue3+cesium项目搭建
Rice_w的博客
07-10 4125
最近需要在一个Vue3的项目中使用到cesium，对于一个cesium没有太多了解的人来说，还是比较麻烦的，本篇博文就将自己在这个过程踩的坑记录下来，有需要的可以看一下。
vue 使用cesium简单介绍
liubangbo的专栏
04-08 1183
Cesium是国外一个基于JavaScript编写的使用WebGL的地图引擎。Cesium支持3D,2D,2.5D形式的地图展示，可以自行绘制图形，高亮区域，并提供良好的触摸支持，且支持绝大多数的浏览器和mobile。相关网址如下：Cesium 官网：Cesium: The Platform for 3D Geospatial Cesium 官网 API：Index - Cesium Documentation Cesium 中文API： Cesium中文api文档 | Index - Cesium Doc
【Cesium学习（二）】Cesium在Vue项目中搭建开发
HAI_GUI的博客
08-07 881
Vue+Cesium
cesium+vue鸟类迁徙
02-03
Cesium Vue是一个开源的JavaScript框架，用于构建用户界面。鸟类迁徙是指鸟类栖息地之间的周期性迁徙，通常与季节变化和天气条件有关。将这两者联系起来，意味着利用Cesium Vue框架可以实现鸟类迁徙的可视化展示。在Cesium Vue框架下，我们可以利用地理信息系统（GIS）技术和地图数据来展示鸟类迁徙的轨迹、迁徙路径和迁徙距离。可以使用Cesium Vue提供的3D地图功能来展现鸟类迁徙的起点、途经地点和目的地，实现动态的可视化效果，让用户可以更直观地了解鸟类迁徙的过程。 通过Cesium Vue框架，可以实现对鸟类迁徙数据的可视化处理和交互式展示。用户可以在地图上选择特定的鸟类迁徙路径，查看相应的详细信息，比如迁徙的原因、迁徙的季节性规律等。同时，还可以结合历史数据和实时数据，分析不同时间段鸟类迁徙的变化趋势，更好地了解鸟类迁徙的规律和特点。 总的来说，利用Cesium Vue框架可以实现鸟类迁徙数据的动态可视化展示，让用户更直观地感受到鸟类迁徙的奇妙之处，同时也为生态环境保护和鸟类保护提供了更直观和有力的信息支持。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值