vue集成超图

最新推荐文章于 2024-03-26 17:46:05 发布
最新推荐文章于 2024-03-26 17:46:05 发布
阅读量1k 收藏 2
点赞数
分类专栏： superMap 超图集成vue 文章标签： vue html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/renzhxu/article/details/108398998
版权

1.超图官网下载全新的IClient包

下载地址：http://support.supermap.com.cn:8090/webgl/download.html

2.集成超图

  1. 在项目的public包下创建目录 ，将Cesium复制到public目录下；
    在这里插入图片描述

  2. 输入命令：npm install @supermap/vue-iclient3d-webgl；

  3. 在public包下面的index.html引入Cesium包js及css文件，引入js文件一定以 “/” 开始,否则会加载不到Cesium包下静态资源；

  4. 到此就可以直接使用超图开发了；
    在这里插入图片描述

5.运行后
在这里插入图片描述
超图Vue-SuperMap集成说明：http://support.supermap.com.cn:8090/webgl/examples/component/dist/zh/api/guide/installation.html

RenZhXu
关注
专栏目录
vue2 集成 - 超图 - SuperMap iClient3D for WebGL 及常用方法
King Saj
11-06 1066
vue2 集成 SuperMap3D 方案，对 SuperMap3D 常用方法进行汇总。
Vue 项目接入使用超图 SuperMap，0基础学习前端开发
最新发布
2401_84092508的博客
04-04 789
前端面试题汇总前端面试题是我面试过程中遇到的面试题，每一次面试后我都会复盘总结。
vue2.5+超图+minitUI兼容ios9--小记
weixin_33806914的博客
03-13 306
vue2.5+超图+minitUI兼容ios9--小记 最近在进行一个移动端混合开发的项目，要求兼容到ios9，ios9不支持ES6语法，所以肯定要用babel进行转义，但过程中出现了一些坎坷--编译之后还是无法显示。 原因及解决办法 在网上查看其他大佬的办法后，发现本地缺少 babel-polyfill这个插件 npm安装指令 npm install --save babel...
Vue中引入SuperMap超图
On the way
05-21 1619
引入成功后进行加载超图，如下。
SuperMap_iClient3D_10i_for_WebGL_CN2.zip
09-13
基于 WebGL 技术实现的三维客户端开发平台，可用于构建无插件、跨操作系统、跨浏览器的三维 GIS 应用程序。
Vue 项目接入使用超图 SuperMap
热门推荐
12-04 1万+
Vue 使用超图 SuperMap 前言 怎么讲呢，稀里糊涂的接了个电话，稀里糊涂的收到个临时任务，稀里糊涂的出了一次差，稀里糊涂的搞了几天超图，超图这个东西确实厉害，但是需要消耗一定的时间才能学会，因为他的功能相对来说比较强大，功能点实在是太多，不是一时半会就可以入门开发的，加油吧！我也是一个小白，但是推了好久，还是在这里稍微整理一下vue项目引入超图的一些方法和步骤，希望在以后可以帮助一些需要使用但是又没有方向的同行小白。仅供参考，不可尽信。 相关资料 可能是用的人或者是团体相对来说少一些，所以说网
vue2.6 内嵌超图11i发布的场景
StudentEntity的博客
03-26 439
vue2.6 superMap11i 若依前后分离版
基于Vue快速搭建超图二维iClient开发环境
SuperMap技术控
10-26 7247
作者:lly 一、背景   最近很多小伙伴咨询关于基于Vue框架搭建iClent开发环境的问题，今天我们就以iClient for Leaflet为例，来聊聊如何快速搭建超图二维JS开发环境。 二、配置准备 1.首先需要安装node.js,可参考以下文章安装步骤及配置 2.配置完node.js后，注册淘宝镜像，提高下载速度 npm install -g cnpm --registry=https://registry.npm.taobao.org 3.安装Vue CLI cnpm .
vue使用cesium(含超图的)小趴菜教程
weixin_44614518的博客
08-05 1463
初级使用教程
ruoyi 若依 集成 cesium supermap 超图 加载地图倾斜摄影
08-21
在IT行业中，集成不同的软件和服务以提供更丰富的功能是常见的做法。本话题主要涉及的是将“ruoyi”框架与“cesium”和“supermap”进行集成，以实现地图的倾斜摄影加载功能。让我们详细探讨一下这些技术及其集成...
vue与SuperMap iClient for WebGL 10i 结合
weixin_43565052的博客
12-24 1844
作者：赵爽 之前SuperMap官方的博客也发布过一篇vue+webpack+webgl的文章，但是有些初学的小伙伴不是很清楚，这篇文章主要是详细讲一下vue和webgl10i的结合。 注：webgl10i和以前的webgl有些许不同 以前的webgl是有两个核心js文件（zlib.min.js和Cesium.js），10i版本的已将两个js合二为一，只需要一个Cesium.js 文章目录1....
supermap 超图 vue webpack npm leaflet.markercluster
zaocanyaochijidan的博客
06-04 569
supermap 超图 vue webpack npm leaflet.markercluster安装使用引入使用 超图图层聚合使用的是第三方插件leaflet.markercluster，使用时需要先安装 安装 leaflet.markercluster安装说明 npm i leaflet.markercluster 安装后的目录结构： 使用 引入 在对应的vue文件中引入leaflet和leaflet.markerCluster 注意引入顺序 使用 let clusterLayer = L.mark
vue引入 SuperMap 超图
tccxy01的博客
03-15 3026
公司让我开发超图 但我对超图一无所知 一边百度 一边开发 只是苦煞我也 当然了 抱怨归抱怨 开发还是得开发 首先去超图的官网 看它的文档 官网地址 SuperMap iClient JavaScript 10i(2021) // npm 安装 npm install @supermap/iclient-leaflet // 在你自己的组件里面引入 import L from 'leaflet'; import '@supermap/iclient-leaflet'; var...
vue集成超图supermap-cesium实践
心生的小鱼专栏
03-09 1万+
一、使用vue-cli创建vue工程 1，cmd进入文件夹20200305，创建名为vuesupermap的工程。 命令为：vue init webpack vuesupermap 2，进入项目根目录运行项目，在浏览器中浏览 命令为：npm run dev 3，创建新的首页页面，后面三维场景就在此页面加载。 接着在路由配置中引入我们刚创建的首页，并更改一下路由配置 ...
vue+超图+openlayer
henghahouhei的博客
07-25 282
vue+超图+openlayer 1.实现地图图层服务展示及切换 2.时间线切换 3.地图下钻到镇到村，并返回当前区域编码
SuperMap iClient3D for WebGL教程（影像篇）-ImageryLayer
SuperMap技术控
04-22 1万+
作者：为梦齐舞 本文同步更新于简书文章https://www.jianshu.com/p/cc38d1cc2d7e 上诉文章中介绍了很多关于ImageryProvider的例子，接下来我们一起了解下ImageryLayer。 一、ImageryProvider与ImageryLayer的区别 通常我们创建一个ImageryProvider是为了创建一个ImageryLayer显示数据，Imag...
SuperMap iClient3D for WebGL教程（影像篇）-WebMapTileServiceImageryProvider
SuperMap技术控
04-23 1万+
作者：刘大 WebMapTileServiceImageryProvider是用来加载Web Map Tile Service (WMTS) 服务,下面简要说明下WMTS服务吧。 WMTS 1.0.0 支持三种实现模型： HTTP KVP（Key-Value Pair）方式 SOAP 方式 REST 方式 WebMapTileServiceImageryProvider支持KVP&...
vue openlayers引入超图
12-02
以下是在Vue中引入超图地图服务的步骤： 1.安装依赖 ```shell npm install ol@6.15.1 npm install @supermap/iclient-ol@11.0.0 ``` 2.在Vue组件中引入ol和iclient-ol ```javascript import ol from 'ol'; import SuperMap from '@supermap/iclient-ol'; ``` 3.在Vue组件中定义地图容器和地图对象 ```html <template> <div id="map" style="height: 100%; width: 100%;"></div> </template> <script> export default { name: 'Map', data() { return { map: null }; }, mounted() { this.initMap(); }, methods: { initMap() { // 创建地图容器 const mapContainer = document.getElementById('map'); // 创建地图对象 this.map = new ol.Map({ target: mapContainer, layers: [ // 添加超图地图服务图层 new ol.layer.Tile({ source: new SuperMap.TileSuperMapRest({ url: 'http://localhost:8090/iserver/services/map-world/rest/maps/World' }) }) ], view: new ol.View({ center: [0, 0], zoom: 2 }) }); } } }; </script> ``` 在上述代码中，我们首先在`mounted`钩子函数中调用`initMap`方法初始化地图。在`initMap`方法中，我们首先获取地图容器，然后创建地图对象。在地图对象的`layers`选项中，我们添加了一个超图地图服务图层，其中`url`选项指定了超图地图服务的地址。最后，我们设置了地图的中心点和缩放级别。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值