之前使用超图平台本身提供了对mapv的一些案例,上手比较快,esri-leaflet没有这方面的案例,有些坑还是得踩下。
mapv提供的git地址中提供了一些leaflet使用mapv的简单案例,但是本身想实现的是mapv的迁徙图,但是发现一直报错。记录下解决问题。其实mapv提供了一个leafletMapLayer这个图层。以下是代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Esri Leaflet Quickstart</title> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <!-- Load Leaflet from CDN --> <link rel="stylesheet" href="./esri-leaflet-v2.5.3/leaflet.css" /> <script src="./esri-leaflet-v2.5.3/leaflet.js"></script> <!-- Load Esri Leaflet from CDN --> <script src="./esri-leaflet-v2.5.3/esri-leaflet.js"></script> <script src="./mapv/build/mapv.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script> <style> body { margin: 0; padding: 0; } #map { position: absolute; top: 0; bottom: 0; right: 0; left: 0; } </style> </head> <body> <div id="map"></div> <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); $.get('./mapv/data/china.json', function (geojson) { var geojsonOptions = { gradient: { 0: 'rgba(55, 50, 250, 0.4)', 1: 'rgba(55, 50, 250, 1)' }, max: 354551, draw: 'intensity' }; var geojsonDataSet = mapv.geojson.getDataSet(geojson); var to = '北京'; var qianxi = new mapv.DataSet([ { from: '河北', count: 354551, to: to, }, { from: '天津', count: 97323, to: to, }, { from: '山东', count: 28664, to: to, }, { from: '山西', count: 16650, to: to, }, { from: '辽宁', count: 14379, to: to, }, { from: '河南', count: 10980, to: to, }, { from: '内蒙古自治区', count: 9603, to: to, }, { from: '江苏', count: 4536, to: to, }, { from: '上海', count: 3556, to: to, }, { from: '广东', count: 2600, to: to, }, ]); var qianxiData = qianxi.get(); var lineData = []; var pointData = []; var textData = []; var timeData = []; var citys = {} for (var i = 0; i < qianxiData.length; i++) { var fromCenter = mapv.utilCityCenter.getCenterByCityName(qianxiData[i].from); var toCenter = mapv.utilCityCenter.getCenterByCityName(qianxiData[i].to); if (!fromCenter || !toCenter) { continue; } citys[qianxiData[i].from] = qianxiData[i].count; citys[qianxiData[i].to] = 100; pointData.push( { geometry: { type: 'Point', coordinates: [fromCenter.lng, fromCenter.lat] } } ); pointData.push( { geometry: { type: 'Point', coordinates: [toCenter.lng, toCenter.lat] } } ); textData.push( { geometry: { type: 'Point', coordinates: [fromCenter.lng, fromCenter.lat] }, text: qianxiData[i].from } ); textData.push( { geometry: { type: 'Point', coordinates: [toCenter.lng, toCenter.lat] }, text: qianxiData[i].to } ); var curve = mapv.utilCurve.getPoints([fromCenter, toCenter]); for (j = 0; j < curve.length; j++) { timeData.push({ geometry: { type: 'Point', coordinates: curve[j] }, count: 1, time: j }); } lineData.push({ geometry: { type: 'LineString', coordinates: curve //coordinates: [[fromCenter.lng, fromCenter.lat], [toCenter.lng, toCenter.lat]] }, count: 30 * Math.random() }); } var data = geojsonDataSet.get({ filter: function (item) { if (!citys[item.name]) { return false; } item.count = citys[item.name]; return true; } }); geojsonDataSet = new mapv.DataSet(data); mapv.leafletMapLayer(geojsonDataSet, geojsonOptions).addTo(map); var textDataSet = new mapv.DataSet(textData); var textOptions = { draw: 'text', font: '14px Arial', fillStyle: 'white', shadowColor: 'yellow', shadowBlue: 10, zIndex: 11, shadowBlur: 10 }; mapv.leafletMapLayer(textDataSet, textOptions).addTo(map); var lineDataSet = new mapv.DataSet(lineData); var lineOptions = { strokeStyle: 'rgba(255, 250, 50, 0.8)', shadowColor: 'rgba(255, 250, 50, 1)', shadowBlur: 20, lineWidth: 2, zIndex: 100, draw: 'simple' }; mapv.leafletMapLayer(lineDataSet, lineOptions).addTo(map); var pointOptions = { fillStyle: 'rgba(254,175,3,0.7)', shadowColor: 'rgba(55, 50, 250, 0.5)', shadowBlur: 10, size: 5, zIndex: 10, draw: 'simple' }; var pointDataSet = new mapv.DataSet(pointData); mapv.leafletMapLayer(pointDataSet, pointOptions).addTo(map); var timeDataSet = new mapv.DataSet(timeData); var timeOptions = { fillStyle: 'rgba(255, 250, 250, 0.5)', zIndex: 200, size: 2.5, animation: { type: 'time', stepsRange: { start: 0, end: 50 }, trails: 10, duration: 2, }, draw: 'simple' }; mapv.leafletMapLayer(timeDataSet, timeOptions).addTo(map); //这一句是唯一和百度地图不同的一处 // var mapvLayer = mapv.leafletMapLayer(dataSet, options).addTo(map); }); </script> </body> </html>
发表评论
侧栏公告
寄语
譬如朝露博客是一个分享前端知识的网站,联系方式11523518。
热评文章
标签列表
热门文章
友情链接