vue2 -- 对SuperMap进行class封装实现自定义标记点位和自定义弹窗功能

已于 2023-12-14 16:36:41 修改
阅读量542 收藏 2
点赞数 3
分类专栏： 项目实操 文章标签： 3d vue.js 前端
于 2023-11-14 14:33:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44412840/article/details/134397398
版权
了解本专栏 订阅专栏 解锁全文 超级会员免费看
Kingsaj
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
SuperMap iObject常见问题解答集锦（七）
SuperMap技术控
08-17 6966
SuperMap iObject常见问题解答集锦
超图supermap实现BIM模型的属性查询
UPCgiser
06-05 8562
有了BIM+GIS，实现室内室外一体化，室内导航等不再是梦想了哈！ 最近为了学bim+gis，断断续续开始学超图产品，还是小白一枚，若分享中有错误，欢迎批评指正！ 关于BIM的属性查询，之前在网上没找到合适的解决方案，走了不少弯路，终于解决了！废话不多说，直接上干货！ 相信有不少小伙伴像我一样，学习时候参考的这个范例http://support.supermap.com.cn:8090/we...
superMap 3D webGL js计算面对象中心点坐标
12-10
js计算面对象中心点坐标
【Cesium】原生Cesium中使用插件库加载超图服务
冰美式当作酒
09-08 3263
说起来超图提供的iClient for Cesium 版本已经很久没有更新过了。通过打印查看，貌似一直都是1.67的版本，眼看着原生中已经升级到了1.97。接下来就是调用方法，github中已经提供了例子。具体的还是按照github中的例子使用。前两天在网上冲浪的过程中，发现了这款“插件库”。相当于集成了超图的部分功能，但是又能在原生中使用。下载的话这里就不放文件了。直接在这里面下载就可以使用了。好的，接下来就看看这个库具体哪里下载，以及如何使用？这样操作我们就在原生Cesium中加载了超图的服务。
SuperMap GIS基础产品三维GIS FAQ集锦（2）
SuperMap技术控
05-06 1458
【问题原因】API文档中（ 3D WebGL API (http://support.supermap.com.cn:8090/webgl/web/apis/3dwebgl.html) ）对 COLUMBUS_VIEW和SCENE2D 进行了说明，这两个场景是不同的，一个是2.5D场景一个是2D场景。//默认为false；可参考官网示例代码“MVT”：http://support.supermap.com.cn:8090/webgl/examples/webgl/editor.html#MVT。
【超图】SuperMap iClient3D 11i for WebGL新产品食用指南(一)
冰美式当作酒
06-05 2232
超图Webgl自主客户端食用指南
在vue项目中使用supermap，基于 SuperMap iClient 8C(2017) for JavaScript，底图为天地图
一路走一路看，一边哭一边笑
06-14 9186
安装依赖包（有的网友直接引用的本地开发包也能使用，但我的项目中引用本地开发包报错） npm install @supermap/iclient-classic 在要使用地图的vue文件中引入js文件（注意引入顺序！！） //以下两个js文件引用的是依赖包中的文件 import '@supermap/iclient-classic/libs/SuperMap-8.1.1-17226' im...
vue2-gmap-custom-marker:Vue Google Map自定义标记组件
05-05
vue2-gmap-custom-marker 该组件使您可以使用叠加层在地图上显示自定义HTML内容。 该组件是与一些伟大的想法在谷歌地图V3覆盖代码示例改编从这个。 /！\ 重要的提示 该项目最初是的插件。 现在，该项目似乎不再受...
uni-app自定义弹窗组件，支持自定义图片，文本、按钮等功能。
04-17
uni-app自定义弹窗组件，支持自定义图片，文本、按钮等功能。
Vue v-model组件封装(类似弹窗组件)
10-15
主要介绍了Vue中的 v-model组件封装(类似弹窗组件),本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
vue-iclient:适用于Vue.js的SuperMap iClient用户界面组件
04-30
客户观点 适用于Vue.js的SuperMap iClient
Vue自定义弹窗指令的实现代码
10-18
使用vue2.0实现自定义弹窗指令，当标签有该指令时，点击标签可以弹出弹窗。下面通过实例代码给大家介绍Vue自定义弹窗指令的相关知识，感兴趣的朋友一起看看吧
vue-custom-element：Vue自定义元素-Vue.js的Web组件自定义元素
02-06
您可以在查看Vue-custom-element演示 安装 NPM npm install vue-custom-element --save import vueCustomElement from 'vue-custom-element' Vue . use ( vueCustomElement ) ; 要使用vue-cli构建Web组件，必须...
vue+supermap超图实现点击地图添加点
JKC_HOWL的博客
12-17 2278
点击地图加点并添加图标（已规划导航路线选取终点起点为例） 首先是点击获取坐标 getPosition(item) { this.point = item // item 接受两个字符串 'start', 'end' 用来区分起点和终点 const that = this that.pickState = true // 加点时开关，为true时点击地图调用加点方法加点， const handler = new Cesium.ScreenSpaceEventHandler(view
Vue 项目接入使用超图 SuperMap
热门推荐
大家好，我是 ed.
12-04 1万+
Vue 使用超图 SuperMap 前言 怎么讲呢，稀里糊涂的接了个电话，稀里糊涂的收到个临时任务，稀里糊涂的出了一次差，稀里糊涂的搞了几天超图，超图这个东西确实厉害，但是需要消耗一定的时间才能学会，因为他的功能相对来说比较强大，功能点实在是太多，不是一时半会就可以入门开发的，加油吧！我也是一个小白，但是推了好久，还是在这里稍微整理一下vue项目引入超图的一些方法和步骤，希望在以后可以帮助一些需要使用但是又没有方向的同行小白。仅供参考，不可尽信。 相关资料 可能是用的人或者是团体相对来说少一些，所以说网
vue2封装一个以方法调用的弹窗组件
qq_34570937的博客
06-27 967
/ formView: {//或者直接使用formFieldsConfig.js中已维护的字段 formView: this.$setFormView(['postId']), 确认 // reason: { itemlabel: '原因', itemtype: 'Textarea', required: true },title: '归还',default: '提示'
SuperMap iClient3D for WebGL 示范案例（一）倾斜模型加载
baidu_34785556的博客
07-20 549
0.前言 SuperMap官网提供了许多webgl示范案例，然而仅依赖示范案例源码独立实现这些功能还存在很多问题，这里通过个人实现过程，详述这些功能的实现步骤和代码。 1.倾斜模型加载功能基本步骤 1.1查看案例源码 http://localhost:8090/iserver/iClient/for3D/webgl/zh/examples/webgl/editor.html#S3MTiles_suofeiya 安装iserver 并运行bin目录下的startup.bat脚本文件即可访问到iser
VUE中简单封装弹窗组件
Working_hard_111的博客
02-26 781
封装简易组件——二次确认
前端 CSS 经典：3D 渐变轮播图
最新发布
weixin_64684095的博客
05-23 146
前言：无论什么样式的轮播图，核心 JS 实现原理都差不多。所以小伙伴们，还是需要了解一下核心 JS 实验原理的。
vue--点击图片放大弹窗的自定义指令（低级版）
05-26
好的，下面是一个简单的点击图片放大弹窗的自定义指令： ```javascript // 引入 Vue import Vue from 'vue' // 定义指令 Vue.directive('enlarge', { bind: function (el) { // 给图片元素绑定点击事件 el.addEventListener('click', function () { // 创建弹窗元素 const dialog = document.createElement('div') dialog.style.position = 'fixed' dialog.style.top = '0' dialog.style.left = '0' dialog.style.width = '100%' dialog.style.height = '100%' dialog.style.backgroundColor = 'rgba(0, 0, 0, 0.5)' dialog.style.display = 'flex' dialog.style.justifyContent = 'center' dialog.style.alignItems = 'center' dialog.style.zIndex = '9999' // 创建弹窗中的图片元素 const img = document.createElement('img') img.src = el.src img.style.maxWidth = '90%' img.style.maxHeight = '90%' img.style.borderRadius = '5px' img.style.boxShadow = '0px 0px 5px #666' // 将图片元素添加到弹窗中 dialog.appendChild(img) // 将弹窗添加到body中 document.body.appendChild(dialog) // 点击弹窗以外的区域关闭弹窗 dialog.addEventListener('click', function (e) { if (e.target === dialog) { document.body.removeChild(dialog) } }) }) } }) ``` 使用方法：在需要放大的图片元素上添加 v-enlarge 指令即可。 ```html <template> <div> <img src="图片地址" v-enlarge> </div> </template> ``` 请注意，这只是一个简单的实现方式，可能存在一些问题，如图片过大时会出现滚动条等。如果需要更完善的功能，可以参考一些开源的图片查看组件，如vue-image-viewer、vue-photo-preview等。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Kingsaj

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值