mapv中实现热力图的添加，更新和删除

一，在public/index.html中引入

  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=rQxHPQX1ua21rWnXzTbUh5KSSUbnefxR"></script><script src="http://mapv.baidu.com/build/mapv.min.js"></script>

二，实现代码

<!-- home -->
<template><div class="home"><div class="width:500px;height:300px"><span>size</span><el-slider v-model="options_heatmap.size" show-input></el-slider><span>max</span><el-slider v-model="options_heatmap.max" show-input></el-slider></div><el-button @click="getDataAndAddHeatMapLayer()">添加图层</el-button><el-button @click="removeHeatMapLayer()">移除图层</el-button><el-button @click="refreshHeatMapData()">刷新图层</el-button><div id="map" class="content"></div></div>
</template><script>
export default {data() {return {map: {},heatMapLayer: {},heatDataSet: [],options_heatmap: {size: 53,max: 100,},};},components: {},created() {},mounted() {this.initMap();},computed: {},methods: {initMap() {this.map = new BMap.Map("map", {enableMapClick: false,});this.map.centerAndZoom(new BMap.Point(105.403119, 38.028658), 5); // 初始化地图,设置中心点坐标和地图级别this.map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放this.map.setMapStyle({style: "midnight",});},getDataAndAddHeatMapLayer() {var data = [{geometry: {type: "Point",coordinates: [104.067923, 30.679943], //成都},count: 12,},{geometry: {type: "Point",coordinates: [102.228565, 31.905763], //阿坝州},count: 70,},{geometry: {type: "Point",coordinates: [106.757916, 31.869189], //巴中},count: 59,},{geometry: {type: "Point",coordinates: [107.494973, 31.214199], //达州},count: 18,},{geometry: {type: "Point",coordinates: [104.402398, 31.13114], //德阳},count: 39,},{geometry: {type: "Point",coordinates: [101.969232, 30.055144], //甘孜州},count: 76,},{geometry: {type: "Point",coordinates: [106.63572, 30.463984], //广安},count: 5,},{geometry: {type: "Point",coordinates: [105.819687, 32.44104], //广元},count: 66,},{geometry: {type: "Point",coordinates: [103.760824, 29.600958], //乐山},count: 71,},];this.heatDataSet = new mapv.DataSet(data);this.addHeatMapLayer();},refreshHeatMapData() {var data = [{geometry: {type: "Point",coordinates: [104.067923, 30.679943], //成都},count: 92,},{geometry: {type: "Point",coordinates: [102.228565, 31.905763], //阿坝州},count: 7,},{geometry: {type: "Point",coordinates: [106.757916, 31.869189], //巴中},count: 9,},{geometry: {type: "Point",coordinates: [107.494973, 31.214199], //达州},count: 88,},{geometry: {type: "Point",coordinates: [104.402398, 31.13114], //德阳},count: 9,},{geometry: {type: "Point",coordinates: [101.969232, 30.055144], //甘孜州},count: 6,},{geometry: {type: "Point",coordinates: [106.63572, 30.463984], //广安},count: 95,},{geometry: {type: "Point",coordinates: [105.819687, 32.44104], //广元},count: 6,},{geometry: {type: "Point",coordinates: [103.760824, 29.600958], //乐山},count: 7,},];this.heatDataSet.set(data);},addHeatMapLayer() {if (!Object.keys(this.heatMapLayer).length == 0) {this.removeHeatMapLayer();}var options = {size: this.options_heatmap.size,gradient: {0.25: "rgb(0,0,255)",0.55: "rgb(0,255,0)",0.85: "yellow",1.0: "rgb(255,0,0)",},max: this.options_heatmap.size,draw: "heatmap",};this.options_heatmap = options;this.heatMapLayer = new mapv.baiduMapLayer(this.map,this.heatDataSet,this.options_heatmap);},removeHeatMapLayer() {this.heatMapLayer.destroy();this.heatMapLayer = {};},},watch: {options_heatmap: {handler: function (newVal, oldVal) {this.heatMapLayer.setOptions({size: this.options_heatmap.size,gradient: {0.25: "rgb(0,0,255)",0.55: "rgb(0,255,0)",0.85: "yellow",1.0: "rgb(255,0,0)",},max: this.options_heatmap.max,draw: "heatmap",});},deep: true,},},
};
</script><style scoped lang="scss">
.home {height: 100vh;border: 1px solid red;.content {width: 100%;height: 100%;border: 1px solid blue;margin: auto;}
}
</style>

三，效果图

mapv中实现热力图的添加，更新和删除相关推荐

PHP中Cookie的使用---添加/更新/删除/获取Cookie 及自动填写该用户的用户名和密码和判断是否第一次登陆...
PHP中Cookie的使用---添加/更新/删除/获取Cookie 及自动填写该用户的用户名和密码和判断是否第一次登陆什么是cookie 服务器在客户端保存用户的信息,比如登录名,密码等这些数 ...
mongodb 字段检索_如何在MongoDB中创建，检索，更新和删除记录
mongodb 字段检索介绍 (Introduction) MongoDB is a free and open-source NoSQL document database used common ...
Postgresql - SQL - 对表中数据的插入、更新、删除进行跟踪
创建一个trigger,对表中的每一行数据的插入.更新.删除进行跟踪. 我们可以进行对数据的监控,对数据更改的保存,记录对所有数据的更改. 也可以依据trigger,记录到文件或表中,将数据应用到其他 ...
pe中怎么卸载服务器系统更新,如何删除驱动,pe下删除系统驱动工具
在Windows10系统中有那么一个文件夹DriverStore,位于C:\Windows\System32\DriverStore,很多用户会发现这个文件夹体积很大,而且越用越大,这是由于Windo ...
mysql删除新添加数据,MySQL添加、更新与删除数据
添加.更新与删除数据添加数据为表中所有字段添加数据 INSERT INTO 表名(字段名1,字段名2,--) VALUES(值1,值2,--); insert into 表名 values(值1, ...
在DataTable中更新、删除数据
在DataTable中选择记录 /*在DataTable中选择记录*//* 向DataTable中插入记录如上,更新和删除如下:* ----但是在更新和删除前,首先要找出要更新和删除的记录.* 一种方 ...
Scott Mitchell 的ASP.NET 2.0数据教程之十七:: 研究插入、更新和删除的关联事件
在ASP.NET 2.0中操作数据::研究插入.更新和删除的关联事件导言当使用GridView.DetailsView或FormView控件的内建插入.编辑或删除特征时,在用户添加一条新记录或更新 ...
ClickHouse 数据插入、更新与删除操作 SQL
1.1. 数据操作数据操作语言( DML,Data Manipulation Language ) 用于在数据库表中添加(插入).删除和修改(更新)数据.本节主要介绍ClickHouse中的数据插入 ...
SpringBoot2.3 修改响应头、添加更新token、解决在过滤器中修改失败
前言使用Spring Boot开发项目的过程中,难免会遇到向响应头中写入一些信息,例如更新了的token,用户详情等信息.在请求头中添加,请求时就可以通过过滤器,拦截器等验证或者获得请求头传递的信息 ...

mapv中实现热力图的添加，更新和删除

一，在public/index.html中引入

二，实现代码

三，效果图

mapv中实现热力图的添加，更新和删除相关推荐

最新文章

热门文章