@antv/l7绘制地图，添加图例，修改地图上颜色，是否允许地图拖拽，是否滚动缩放等

html

<div class="charts-box"><div style="min-height: 300px; justify-content: center;position: relative" id="map"/>
</div>

引入组件

import { Scene, Control } from '@antv/l7'
import { CountryLayer } from '@antv/l7-district'
import { Mapbox } from '@antv/l7-maps'

绘制地图

const ProvinceData = [{name: '云南省',code: 530000,value: 1},{name: '黑龙江省',code: 230000,value: null},{name: '贵州省',code: 520000,value: 1},{name: '北京市',code: 110000,value: null},{name: '河北省',code: 130000,value: null},{name: '山西省',code: 140000,value: null},{name: '吉林省',code: 220000,value: null},{name: '宁夏回族自治区',code: 640000,value: null},{name: '辽宁省',code: 210000,value: null},{name: '海南省',code: 460000,value: null},{name: '内蒙古自治区',code: 150000,value: null},{name: '天津市',code: 120000,value: null},{name: '新疆维吾尔自治区',code: 650000,value: null},{name: '上海市',code: 310000,value: null},{name: '陕西省',code: 610000,value: null},{name: '甘肃省',code: 620000,value: null},{name: '安徽省',code: 340000,value: null},{name: '香港特别行政区',code: 810000,value: null},{name: '广东省',code: 440000,value: null},{name: '河南省',code: 410000,value: null},{name: '湖南省',code: 430000,value: null},{name: '江西省',code: 360000,value: null},{name: '四川省',code: 510000,value: null},{name: '广西壮族自治区',code: 450000,value: null},{name: '江苏省',code: 320000,value: null},{name: '澳门特别行政区',code: 820000,value: null},{name: '浙江省',code: 330000,value: null},{name: '山东省',code: 370000,value: null},{name: '青海省',code: 630000,value: null},{name: '重庆市',code: 500000,value: null},{name: '福建省',code: 350000,value: null},{name: '湖北省',code: 420000,value: null},{name: '西藏自治区',code: 540000,value: null},{name: '台湾省',code: 710000,value: null}]let color = ['#adf4c5', '#fff']const scene = new Scene({id: 'map',logoVisible: false, // 是否显示logomap: new Mapbox({center: [116.2825, 39.9],pitch: 0,style: 'blank',zoom: 0})})scene.setMapStatus({dragEnable: false, // 是否允许地图拖拽keyboardEnable: false, // 是否允许形键盘事件doubleClickZoom: false, // 双击放大zoomEnable: false, // 滚动缩放rotateEnable: false // 旋转})scene.on('loaded', () => {new CountryLayer(scene, {data: ProvinceData,joinBy: ['NAME_CHN', 'name'],// 根据区划的话 joinBy: ['adcode', 'value'],depth: 1,label: {/** 地图上面省份名字周围颜色*/stroke: 'transparent',/** 文字颜色 可以让地图上面省份名字消失*/color: 'transparent'},fill: {color: {field: 'value',//地图上绘制根据具体字段绘制颜色values: (item) => { // 根据具体是否开通绘制地图颜色if (item) {return color[0]}}}}})})// 添加图例const legend = new Control({position: 'bottomleft'})legend.onAdd = function () {var el = document.createElement('div')el.className = 'infolegend legend'var grades = ['已开通', '未开通']for (var i = 0; i < grades.length; i++) {el.innerHTML +=`<i style="background:${color[i]}"></i> ` +grades[i] + '<br>'}return el}scene.addControl(legend)

@antv/l7绘制地图，添加图例，修改地图上颜色，是否允许地图拖拽，是否滚动缩放等相关推荐

VUE实现前台图片标注（添加矩形框）、放大、缩小、拖拽 -----个人记录
VUE实现前台图片标注(添加矩形框).放大.缩小.拖拽需求:实现图片上自定义多个矩形选框,选框可移动缩放拖动,图片可以放大缩小.拖拽 ,选框内填充标注文字. 框内填充文字基本都会,不多赘述,后期可 ...
【数据可视化】Antv L7给地图添加图例Legend
地图组件用于控制地图的状态如果平移,缩放,或者展示地图一些的辅助信息如图例.比例尺 L7 目前支持 Control Zoom 放大缩小 Scale 比例尺 Layers 图层列表组件介绍: impo ...
VUE实现前台图片标注（添加矩形框）、放大、缩小、拖拽
需求:实现图片上自定义多个矩形选框,选框可移动缩放拖动,图片可以放大缩小.拖拽 ,选框内填充标注文字. 框内填充文字基本都会,不多赘述,后期可添加选框移除功能(思路右击选框弹出选项删除,获取当前点击选 ...
百度地图添加标注及图标拖拽及给标注添加右键
功能要求:拖动地图上的图钉时,在某个位置进行标注.并给标注添加右键操作属性. [1]图标拖拽事件 var myIcon = new BMap.Icon("${ctx }/images/map ...
百度地图添加行政区域
找资料的时候看到很多大佬写过关于百度地图添加行政区域但是由于我的是离线地图直接用百度地图api获取不到,所以自己写了一遍记录一下. function getBoundary(){ var areas ...
openlayers6【二十二】vue addLayer实现点击地图添加图标要素信息，编辑点位信息
文章目录 1.写在前面 2. 地图点击事件singleclick 2.1 点击获取经纬度,调用创建mark要素的方法 2.2 实现根据经纬度创建mark要素,设置mark样式,添加到图层,创建要素标题 ...
百度地图，自动获取定位，拖拽获取地点，模糊查询获取当前位置
先看下效果图,因为没有美化,只是做一下功能. 完整代码如下 <!DOCTYPE html> <html> <head><meta charset=" ...
【百度地图API】如何制作可拖拽的沿道路测距
摘要: 地图测距,大家都会,不就map.getDistance麼.可是,这只能测任意两点的直线距离,用途不够实际啊.比如,我想测试北京天安门到北京后海的距离,怎么办呢? 显然"沿道路测距&q ...
如何在卫星地图上绘制添加、修改多边形面（面标注）
一.概述万能地图下载器除了有强大的谷歌影像下载.历史地图下载.高程等高线下载.矢量电子地图下载.百度POI下载.矢量建筑数据下载,以及瓦片导出.专业坐标系的投影转换等专业功能(如北京54或西安80等 ...

@antv/l7绘制地图，添加图例，修改地图上颜色，是否允许地图拖拽，是否滚动缩放等

html

引入组件

绘制地图

@antv/l7绘制地图，添加图例，修改地图上颜色，是否允许地图拖拽，是否滚动缩放等相关推荐

最新文章

热门文章