JavaScript+cesium 添加高德影像图和标注

最新推荐文章于 2024-04-08 10:40:19 发布
最新推荐文章于 2024-04-08 10:40:19 发布
阅读量1.4k 收藏 5
点赞数 1
分类专栏： JavaScript+cesium 文章标签： js javascript 设计模式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48203828/article/details/116639212
版权

cesium 加载高德影像图和标注

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入cesium库 -->
    <script type="text/javascript" src="../cesium/Cesium-1.68/Build/Cesium/Cesium.js"></script>
    <!-- 引入 cesium样式 -->
    <link href="../cesium/Cesium-1.68/Build/Cesium/Widgets/widgets.css" rel="stylesheet"></script>
</head>
<body>
    <div id="cesiumContainer" class="fullSize"></div>
    
<script>
    var viewer = new Cesium.Viewer('cesiumContainer',{ 
            animation: false, //是否显示动画控件
            shouldAnimate : true,
            homeButton: false, //是否显示Home按钮
            fullscreenButton: false, //是否显示全屏按钮
            baseLayerPicker: false, //是否显示图层选择控件
            geocoder: false, //是否显示地名查找控件
            timeline: false, //是否显示时间线控件
            sceneModePicker: true, //是否显示投影方式控件
            navigationHelpButton: false, //是否显示帮助信息控件
            infoBox: false, //是否显示点击要素之后显示的信息
            requestRenderMode: true, //启用请求渲染模式
            scene3DOnly: false, //每个几何实例将只能以3D渲染以节省GPU内存
            sceneMode: 3, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
			fullscreenElement: document.body, //全屏时渲染的HTML元素 暂时没发现用处
            //去除版权信息
            viewer._cesiumWidget._creditContainer.style.display = "none";
    // 加载高德/百度影像地图，UrlTemplateImageryProvider该接口是加载谷歌地图服务的接口
            imageryProvider : new Cesium.UrlTemplateImageryProvider({
                url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
				layer: "tdtVecBasicLayer",
				style: "default",
				format: "image/png",
				tileMatrixSetID: "GoogleMapsCompatible",
				show: false
            })
			});
			// 如果需要叠加高德/百度注记地图则添加以下代码
			viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({
				url: "http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8",
				layer: "tdtAnnoLayer",
				style: "default",
				format: "image/jpeg",
				tileMatrixSetID: "GoogleMapsCompatible"
			}));
</script>
</body>
</html>
战斗中的老段
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3+ts+vite+cesium 加载天地图影像、标注等多服务器随机加载切换版本
04-02
这段基于 Vue.js 的 Cesium 地图应用示例展示了如何使用 Cesium.js 创建一个具有自定义配置的 3D 地球视图。Cesium.js 是一个开源 WebGL 虚拟地球引擎，可以构建交互式的 3D 地图应用。示例中的底图和注记图层来自中国的在线地图服务平台天地图，提供丰富的地理信息。代码禁用了全屏按钮、地理编码器等，隐藏了版权信息，以优化用户体验。 Vue.js 是一个流行的 JavaScript 前端框架，可以帮助开发者高效构建具有交互性的 Web 应用。在本示例中，Vue.js 的使用使代码更具模块化，便于扩展和维护。这个示例为开发者提供了一个简洁、易用的 Cesium 地图应用，展示了如何在 3D 地球视图中查看和探索地理信息，优化了用户体验，让用户专注于地图内容。这个示例可以作为开发者构建基于 Cesium 的地图应用的起点，也可以帮助了解如何使用 Vue.js 和 Cesium.js 结合开发 Web 应用。
10.（leaflet篇）暗色系地图样式地图（滤镜实现，反色滤镜）.zip
06-24
下载如有问题，可私信博主。下载前建议先查看博客内容，其地址为：https://blog.csdn.net/QQ98281642/article/details/118175969
Cesium笔记 获取当前视角的坐标以及偏航角等信息
qq_40216244的博客
03-26 141
【代码】Cesium笔记 获取当前视角的坐标以及偏航角等信息。
基于vue3+vite+cesium 生成热力图CesiumHeatmap源码
11-22
在vue3+vite+cesium加载CesiumHeatmap生成热力图时不能直接使用， 需对源码进行重新封装及修改后方可在vue3+vite中调用； 源码已修改并验证可用；
Cesium画点线添加标注和描述
04-02
Cesium画点线，添加标注，添加后弹窗输入描述等。。。
Cesium地图暗色滤镜
by_ren的博客
10-19 2445
cesium暗色地图滤镜代码(不需要修改源码)
cesium暗色地图
LBY_XK的博客
03-06 900
cesium暗色地图。
高德API和ArcGIS JS API加载谷歌影像服务(最高级别为z=20,影像坐标为GCJ02)
傲骨雄风的博客
03-31 1694
一、高德api加载谷歌地图示例： https://lbs.amap.com/api/javascript-api/guide/layers/wms 但是不知道为什么加载的是矢量数据，我们不妨换下别的谷歌影像url改下试试 //创建自定义切片图层，指定 getTileUrl 属性 var googleLayer = new AMap.TileLayer({ getTileUrl: 'h...
Cesium小记之加载暗黑色地图&&蓝色透明模型
HPUGIS的博客
07-07 8547
一效果图`` 二、demo import Vue from 'vue' import App from './App' import router from './router' import Cesium from 'cesium/Cesium' import MeasureTool from '../src/js/MeasureTools' Vue.config.productionTip ...
cesium默认加载高德卫星底图
新疆程序猿的角落
11-27 521
cesium默认加载高德卫星底图。
Cesium加载高德地图
qq_25064691的博客
03-07 4358
Cesium加载高德矢量图 tdtLayer = new Cesium.UrlTemplateImageryProvider({ url: "http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}", minimumLevel: 3,
vue + Echart + Cesium 绘制剖面分析图源码
03-15
vue + Echart + Cesium 绘制剖面分析图源码
Cesium 常用地图纠偏 百度、高德、Arcgis、腾讯地图纠偏
04-10
Cesium 常用地图纠偏 百度、高德、Arcgis、腾讯地图纠偏 资源预览:http://dongnan185.com:8083/videos/jiupian.mp4 启动:npm i npm run serve
vue3-浅记录一下vue-cesium的使用-加载建筑物 加载河流 道路闪烁线
M__O__M的博客
07-27 576
三、main.ts中引入使用。
Cesium.js 添加billboard广告牌，点击改变其文本和图标
热门推荐
jimjiayu
08-27 1万+
var monitorEntity = viewer.entities.add({ name: "video", position: Cesium.Cartesian3.fromDegrees(109.44, 32.11,30.0), point: { //点 p...
leaflet加载接入高德、openstreetmap、google地图（leaflet篇.3）
地图之家
05-17 7808
完整代码文件在文章末尾处提供 对接效果图如下： <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>Historic Topographic Maps</title> <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
原来科技感的三维地图可以这么简单实现
最新发布
im_dogg的博客
04-08 821
下午摸鱼时接到一个客户的数字孪生项目的需求，客户什么也没说，就要求“炫酷”和“科技感”地图，还要把他们的模型都放上去，起初我以为又是一个可视化大屏的项目，准备用高德地图应付过去，然后他们又在群里发什么要求高之类的，我们的数据种类多，说什么高德、百度、Mapbox、Cesium之类框架都试过了，满足不了需求，好嘛，这下给我犯了难了，会的技术栈全都给我排除了, 手撸Three.js源码我可不干，于是就在网上晃悠，尝试找一些灵感
Cesium入门之六：Cesium加载影像图层(ArcGIS、Bing、Mapbox、高德地图、腾讯地图、天地图等各类影像图)
九仞山的专栏
05-14 8605
详细介绍了Cesium加载影像图层的类、方法和步骤，举例说明加载ArcGIS地图、Bing地图、Mapbox地图、高德地图、腾讯地图、天地图等各类影像图的加载方法
arcgis js api 4.x 加载高德影像地图
thiswildidea的博客
10-11 771
arcgis js api4.x 调用高德影像扩展类和示例
cesium加载高德地图
05-15
Cesium是一种基于WebGL的JavaScript库，它提供了一种新的方式来展示地球表面的数据，可以被用于创建各种各样的虚拟地球场景。而高德地图是基于中国区域的地图服务，提供了许多地图类别和功能，包括路线规划、街景浏览等。将cesium与高德地图相结合，可以支持超长距离、多层级的地图渲染功能，这就是所谓的cesium加载高德地图。 要实现cesium加载高德地图，有几个步骤需要进行。首先，需要在HTML文件中引入Cesium库和高德地图的JavaScript API，以及一些配置文件。接下来，需要根据使用的版本和功能，加载相应的模块和CSS文件。然后，就可以创建cesium的viewer对象和高德地图的地图实例。此外，还需要根据需要添加一些控件和图层，以实现更好的交互效果和视觉效果。 创建出cesium加载高德地图的场景后，就可以进行数据的可视化和交互了。比如，可以在地图上显示气象数据、交通流量数据、人口分布数据等，还可以实现用户点击查询和标记等功能。这些操作可以通过JavaScript的API实现，具体实现方法可以参考官方文档和示例代码。总的来说，cesium加载高德地图是一项技术挑战，需要一定的前端开发经验和对地理信息可视化的了解。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值