Mapv 结合 Leaflet 地图使用

看了Mapv的源码才发现，它是支持 Leaflet 地图的，Mapv作者也是有和Leaflet地图结合的案例的，但是直接百度 “Mapv Leaflet” 却没有结果，为了补全这个空缺，所以写了这个博客

原文链接：https://github.com/huiyan-fe/mapv/blob/master/examples/leaflet

使用案例：

<!DOCTYPE html>
<html><head><title>maptalks example</title><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"><style>html,body,#map {height: 100%;padding: 0;margin: 0;}</style>
</head><body><div id="map"></div><script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script><script src="../../build/mapv.js"></script><script>var map = L.map('map').setView([34.41583177128595, -102.17609405517578], 5);L.tileLayer('http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', {'subdomains': ['a', 'b', 'c', 'd', 'e']}).addTo(map);var randomCount = 300;var data = [];while (randomCount--) {data.push({geometry: {type: 'Point',coordinates: [-125.8 + Math.random() * 50, 30.3 + Math.random() * 20]},count: 30 * Math.random()});}var dataSet = new mapv.DataSet(data);var options = {fillStyle: 'rgba(255, 250, 50, 0.8)',globalCompositeOperation: "lighter",maxSize: 10,max: 30,shadowBlur: 30,shadowColor: 'rgba(255, 250, 50, 1)',draw: 'bubble'};//这一句是唯一和百度地图不同的一处var mapvLayer = mapv.leafletMapLayer(dataSet, options).addTo(map);</script>
</body></html>

Mapv 结合 Leaflet 地图使用相关推荐

在Leaflet地图上集成Echarts
需求背景: 现在我要在地图上加上Echarts的散点图还有线集,看起来就很牛B的那种.上效果图: 需求分析: 我先看了看Echarts官网上有提供加载地图的例子,主要包括三种方式: 1.加载js格式的 ...
leaflet地图资源整理
leaflet地图资源整理均来自网络 React-Leaflet(v2.0-beta)を試す https://qiita.com/sugasaki/items/d225cf548e9a787dbd9c ...
leaflet地图插件汇总
参考博文 https://leafletjs.com/reference-1.7.1.html leaflet地图文档 https://blog.csdn.net/bigbear00007/artic ...
leaflet地图原理_使用Leaflet创建地图拓扑图
之前我们采用过 Openlayers+Qunee的方案,实现地图拓扑图,鉴于Openlayers是一个古老项目,略显臃肿,对于现代的前端地图应用,显得笨重,在客户的介绍下,我们找到了leaflet - ...
leaflet地图截图批量导出(附源码下载)
前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...
leaflet地图总结（不断更新）
一.创建leaflet地图输入指令npm install leaflet 页面引入 import L from "leaflet"; import "leaflet/d ...
关于Leaflet 地图遮罩反选
关于Leaflet 地图遮罩反选最近项目用到leaflet作为地图开发插件,需要将某个区域突出显示,其余部分隐藏,之前做过百度地图的开发,有过类似的经验,就简单写一下作为记录. leaflet 地 ...
leaflet地图框架
leaflet 中文API LeafLet js 官网: http://leafletjs.com/index.html LeafLet js 官网demo: http://leafletjs.com ...
leaflet地图原理_基于 leaflet 的标注绘图
标注功能的背景现在我们需要做一个标注工具,在一个视频上面绘制选框,把某个区域标记下来,接下来,把我们选框的内容坐标数据存储下来,这样作为一个分析的数据源,结合视频文件去分析选框区域内的内容情况. 结 ...

Mapv 结合 Leaflet 地图使用

Mapv 结合 Leaflet 地图使用相关推荐

最新文章

热门文章