首页 > 其他分享 >vue使用超图openlayers调用mapv实现蜂窝图

vue使用超图openlayers调用mapv实现蜂窝图

时间:2024-03-07 11:24:12浏览次数:32  
标签:supermap vue 调用 DataSet 超图 openlayers 蜂窝 mapv

在用超图openlayer开发的时候遇到问题,在此作为记录。文字描述不对的地方请多担待,

 

下载依赖,npm i mapv

 按需引入,因为官网例子是普通的html引入,{mapv}引入方式 调用的是超图@supermap中的方法。 DataSet 是mapv的方法

 

import {Mapv}  from '@supermap/iclient-ol/overlay/Mapv' import {DataSet}  from 'mapv/build/mapv' 下面是部分代码。没截全。 new DataSet 里面添加数据,数据格式是数组对象,对象里面包含了几何信息(geometry),数据count,例子是是随机赋值的。 然后通过超图 layer下的image方法,将数据源放在图层中,后面地图叠加进去。因为我这边还有专题图层级为2级,所以蜂窝图等层级设置为3级,避免被覆盖。

下面是效果图;

 

标签:supermap,vue,调用,DataSet,超图,openlayers,蜂窝,mapv
From: https://www.cnblogs.com/520jing/p/18058484

相关文章

  • 通过debug搞清楚.vue文件怎么变成.js文件
    前言我们每天写的vue代码都是写在vue文件中,但是浏览器却只认识html、css、js等文件类型。所以这个时候就需要一个工具将vue文件转换为浏览器能够认识的js文件,想必你第一时间就想到了webpack或者vite。但是webpack和vite本身是没有能力处理vue文件的,其实实际背后生效的是vue-loade......
  • 前端学习-vue视频学习007-标签的ref属性
    尚硅谷视频教程给标签增加ref属性,可以通过属性值取到标签内容<template><divclass="person"><h1>this</h1><h2ref="title">that</h2><button@click="showLog">changeTemp</button>......
  • Vue学习笔记36--VueComponent构造函数
    VueComponent构造函数<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>VueComponent&......
  • Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的 Options Api 有什么不同?
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助开始之前CompositionAPI 可以说是Vue3的最大特点,那么为什么要推出CompositionApi,解决了什么问题?通常使用Vue2开发的项目,普遍会存在以下问题:代码的可读性随着组件变大而变差每一种代码复用的方式,都存在缺点T......
  • Vue学习笔记3--组件嵌套
    组件嵌套示例一:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>非单文件组件--全局注册</tit......
  • Vue3计算属性与监听
    接上篇文章vue学习笔记 https://www.cnblogs.com/jickma/p/16523795.html在之前中介绍了vue3的特性与响应式数据定义,新的双向绑定,模版等与vue2的差别。在vue2中很重要的两个很重要的东西就是计算属性与监听在vue3中,同样存在只是写法略有不同。5,计算属性......
  • vue中sass的使用
    前言:这里是用vue2开发的,vue3的sass安装方法有部分不一样。一、安装相关包[email protected]@7.3.1--save-devnpmlsnode-sasssass-loader//查看安装情况//如果报错可能是安装版本有问题,可以卸载后安装node版本对应的s......
  • Cesium在vue3中的安装、使用
    1.cesium插件引入,vite-plugin-cesium是一个专门为Vite构建工具定制的插件,用于在Vite项目中轻松使用Cesium库。它简化了在Vite项目中集成Cesium的过程,并提供了一些额外的功能和配置选项。而直接安装Cesium库,你需要手动配置Vite项目以确保正确引入和使用Cesium。这......
  • springboot3+vue3(四.2)ThreadLocal优化
    解决痛点:我们在拦截器内已经获取并解析了一遍token数据,如图:然后在获取当前登录用户详细信息时又做了一遍同样的操作,如图:后续如果说需要用到当前登录用户的信息时都要带上token参数,这样是很冗余的。这时就会用到ThreadLocal来进行优化处理。 ThreadLocal工具类/***......
  • VUE通过for循环一行显示多列el-row
    效果图: 代码: <template><el-row:gutter="0"v-for="(item,index)inarrLen":key="item.name"style="height:200px">......