mapv

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> html, body { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } #map { width: 100%; height: 100%; } #legend { position: absolute; right: 10px; bottom: 20px; text-align: center; } </style> </head> <body>  <div id="map"></div> <div id="legend"> <div>高</div> <div id="legendValue"></div> <div>低</div> </div> <div id="container" style="position:absolute;left:0px;top:0;background:rgba(255,255,255,1);padding: 10px 10px 20px;"> <div> <textarea type="text" style="width: 300px;height: 80px;margin-top:20px;outline: none;" id="dataInput" placeholder="需要显示的数据格式示例：广东,123;福建,123;北京,123;江苏,123">陕西,3;青海,3;宁夏,3;四川,2;新疆,2;河南,2;内蒙古,2;北京,1;江苏,1;山东,1</textarea> </div> <div> <button onclick="show()">显示</button> <div> 排序标签： <button onclick="showNumber()">显示</button> <button onclick="hideNumber()">隐藏</button> <br /> 文本标签： <button onclick="showText()">显示</button> <button onclick="hideText()">隐藏</button> </div> </div> </div> <script type="text/javascript" src="//cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script> <script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=1XjLLEhZhQNUzd93EjU5nOGQ"></script> <script type="text/javascript" src="../build/mapv.js"></script> <script type="text/javascript" src="js/dat.gui.min.js"></script> <script type="text/javascript"> var customStyle = [{ "featureType": "estatelabel", "elementType": "labels.text.fill", "stylers": { "color": "#8d694eff" } }, { "featureType": "restaurantlabel", "elementType": "labels", "stylers": { "visibility": "off" } }, { "featureType": "restaurantlabel", "elementType": "labels.icon", "stylers": { "visibility": "off" } }, { "featureType": "lifeservicelabel", "elementType": "labels", "stylers": { "visibility": "off" } }, { "featureType": "lifeservicelabel", "elementType": "labels.icon", "stylers": { "visibility": "off" } }, { "featureType": "transportationlabel", "elementType": "labels.icon", "stylers": { "visibility": "off" } }, { "featureType": "transportationlabel", "elementType": "labels", "stylers": { "visibility": "off" } }, { "featureType": "financelabel", "elementType": "labels.icon", "stylers": { "visibility": "off" } }, { "featureType": "financelabel", "elementType": "labels", "stylers": { "visibility": "off" } }, { "featureType": "land", "elementType": "geometry", "stylers": { "color": "#ffffffff" } }, { "featureType": "building", "elementType": "geometry.fill", "stylers": { "color": "#e7dfd6ff" } }, { "featureType": "building", "elementType": "geometry.stroke", "stylers": { "color": "#b9a797ff" } }, { "featureType": "estatelabel", "elementType": "labels.text.stroke", "stylers": { "color": "#ebe1d8ff" } }, { "featureType": "estatelabel", "elementType": "labels.icon", "stylers": { "visibility": "off" } }, { "featureType": "estatelabel", "elementType": "labels.text", "stylers": { "fontsize": 28 } }, { "featureType": "manmade", "elementType": "labels.text.fill", "stylers": { "color": "#72533aff" } }, { "featureType": "manmade", "elementType": "geometry", "stylers": { "color": "#ecececff", "visibility": "off" } }, { "featureType": "manmade", "elementType": "labels.text", "stylers": { "fontsize": 36 } }, { "featureType": "manmade", "elementType": "labels.text.stroke", "stylers": { "color": "#b6997fff" } }, { "featureType": "green", "elementType": "geometry", "stylers": { "color": "#ecececff", "visibility": "off" } }, { "featureType": "education", "elementType": "geometry", "stylers": { "color": "#ecececff", "visibility": "off" } }, { "featureType": "medical", "elementType": "geometry", "stylers": { "color": "#ecececff", "visibility": "off" } }, { "featureType": "scenicspots", "elementType": "geometry", "stylers": { "color": "#ecececff", "visibility": "off" } }, { "featureType": "entertainment", "elementType": "geometry", "stylers": { "visibility": "off" } }, { "featureType": "estate", "elementType": "geometry", "stylers": { "color": "#ecececff", "visibility": "off" } }, { "featureType": "shopping", "elementType": "geometry", "stylers": { "color": "#ecececff", "visibility": "off" } }, { "featureType": "transportation", "elementType": "geometry", "stylers": { "color": "#ecececff", "visibility": "off" } }, { "featureType": "transportation", "elementType": "labels.text.fill", "stylers": { "color": "#72533aff" } }, { "featureType": "transportation", "elementType": "labels.text.stroke", "stylers": { "color": "#b6997fff" } }, { "featureType": "transportation", "elementType": "labels.text", "stylers": { "fontsize": 36 } }, { "featureType": "medical", "elementType": "labels.text.fill", "stylers": { "color": "#72533aff" } }, { "featureType": "medical", "elementType": "labels.text.stroke", "stylers": { "color": "#b6997fff" } }, { "featureType": "medical", "elementType": "labels.text", "stylers": { "fontsize": 36 } }, { "featureType": "education", "elementType": "labels.text.fill", "stylers": { "color": "#72533aff" } }, { "featureType": "education", "elementType": "labels.text.stroke", "stylers": { "color": "#b6997fff" } }, { "featureType": "education", "elementType": "labels.text", "stylers": { "fontsize": 36 } }, { "featureType": "carservicelabel", "elementType": "labels", "stylers": { "visibility": "off" } }, { "featureType": "carservicelabel", "elementType": "labels.icon", "stylers": { "visibility": "off" } }, { "featureType": "shoppinglabel", "elementType": "labels.icon", "stylers": { "visibility": "off" } }, { "featureType": "hotellabel", "elementType": "labels.icon", "stylers": { "visibility": "off" } }, { "featureType": "governmentlabel", "elementType": "labels.icon", "stylers": { "visibility": "off" } }, { "featureType": "companylabel", "elementType": "labels.icon", "stylers": { "visibility": "off" } }, { "featureType": "businesstowerlabel", "elementType": "labels.icon", "stylers": { "visibility": "off" } }, { "featureType": "entertainmentlabel", "elementType": "labels", "stylers": { "visibility": "off" } }, { "featureType": "entertainmentlabel", "elementType": "labels.icon", "stylers": { "visibility": "off" } }, { "featureType": "medicallabel", "elementType": "labels.icon", "stylers": { "visibility": "off" } }, { "featureType": "educationlabel", "elementType": "labels.icon", "stylers": { "visibility": "off" } }, { "featureType": "scenicspotslabel", "elementType": "labels.icon", "stylers": { "visibility": "off" } }, { "featureType": "airportlabel", "elementType": "labels.icon", "stylers": { "visibility": "off" } }, { "featureType": "airportlabel", "elementType": "labels.text", "stylers": { "fontsize": 36 } }, { "featureType": "airportlabel", "elementType": "labels.text.fill", "stylers": { "color": "#72533aff" } }, { "featureType": "airportlabel", "elementType": "labels.text.stroke", "stylers": { "color": "#b6997fff" } }, { "featureType": "scenicspotslabel", "elementType": "labels.text", "stylers": { "fontsize": 28 } }, { "featureType": "scenicspotslabel", "elementType": "labels.text.fill", "stylers": { "color": "#4a4a4aff" } }, { "featureType": "scenicspotslabel", "elementType": "labels.text.stroke", "stylers": { "color": "#ffffffff" } }, { "featureType": "educationlabel", "elementType": "labels.text.fill", "stylers": { "color": "#8d694eff" } }, { "featureType": "educationlabel", "elementType": "labels.text.stroke", "stylers": { "color": "#ebe1d8ff" } }, { "featureType": "educationlabel", "elementType": "labels.text", "stylers": { "fontsize": 26 } }, { "featureType": "medicallabel", "elementType": "labels.text.fill", "stylers": { "color": "#8d694eff" } }, { "featureType": "medicallabel", "elementType": "labels.text.stroke", "stylers": { "color": "#ebe1d8ff" } }, { "featureType": "medicallabel", "elementType": "labels.text", "stylers": { "fontsize": 24 } }, { "featureType": "businesstowerlabel", "elementType": "labels.text.stroke", "stylers": { "color": "#ebe1d8ff" } }, { "featureType": "businesstowerlabel", "elementType": "labels.text.fill", "stylers": { "color": "#8d694eff" } }, { "featureType": "businesstowerlabel", "elementType": "labels.text", "stylers": { "fontsize": 24 } }, { "featureType": "companylabel", "elementType": "labels", "stylers": { "visibility": "off" } }, { "featureType": "hotellabel", "elementType": "labels.text.fill", "stylers": { "color": "#8d694eff" } }, { "featureType": "hotellabel", "elementType": "labels.text.stroke", "stylers": { "color": "#ebe1d8ff" } }, { "featureType": "hotellabel", "elementType": "labels.text", "stylers": { "fontsize": 24 } }, { "featureType": "shoppinglabel", "elementType": "labels.text.fill", "stylers": { "color": "#8d694eff" } }, { "featureType": "shoppinglabel", "elementType": "labels.text.stroke", "stylers": { "color": "#ebe1d8ff" } }, { "featureType": "transportationlabel", "elementType": "labels.text.fill", "stylers": { "color": "#4a4a4aff" } }, { "featureType": "transportationlabel", "elementType": "labels.text", "stylers": { "fontsize": 24 } }, { "featureType": "scenicspots", "elementType": "labels.text.fill", "stylers": { "color": "#72533aff" } }, { "featureType": "scenicspots", "elementType": "labels.text.stroke", "stylers": { "color": "#b6997fff" } }, { "featureType": "scenicspots", "elementType": "labels.text", "stylers": { "fontsize": 36 } }, { "featureType": "governmentlabel", "elementType": "labels.text.fill", "stylers": { "color": "#4a4a4aff" } }, { "featureType": "scenicspotslabel", "elementType": "labels", "stylers": { "visibility": "off" } }, { "featureType": "district", "elementType": "labels.text.fill", "stylers": { "color": "#ffffffff" } }, { "featureType": "district", "elementType": "labels.text.stroke", "stylers": { "color": "#72533aff", "weight": 3.5 } }, { "featureType": "town", "elementType": "labels.text.stroke", "stylers": { "color": "#72533aff", "weight": 3 } }, { "featureType": "town", "elementType": "labels.text.fill", "stylers": { "color": "#ffffffff" } }, { "featureType": "village", "elementType": "labels.text.stroke", "stylers": { "color": "#ffffffff", "weight": 2.5 } }, { "featureType": "village", "elementType": "labels.text.fill", "stylers": { "color": "#72533aff", "weight": 40 } }, { "featureType": "village", "elementType": "labels.text", "stylers": { "fontsize": 20 } }, { "featureType": "highway", "elementType": "geometry.fill", "stylers": { "color": "#fdf0daff" } }, { "featureType": "highway", "elementType": "geometry.stroke", "stylers": { "color": "#ffd993ff" } }, { "featureType": "highway", "elementType": "labels.text.fill", "stylers": { "color": "#000000ff" } }, { "featureType": "highway", "elementType": "labels.text.stroke", "stylers": { "color": "#ffffffff" } }, { "featureType": "nationalway", "elementType": "geometry.fill", "stylers": { "color": "#fdf0daff" } }, { "featureType": "nationalway", "elementType": "geometry.stroke", "stylers": { "color": "#ffd993ff" } }, { "featureType": "nationalway", "elementType": "labels.text.fill", "stylers": { "color": "#000000ff" } }, { "featureType": "nationalway", "elementType": "labels.text.stroke", "stylers": { "color": "#ffffffff" } }, { "featureType": "provincialway", "elementType": "geometry.stroke", "stylers": { "color": "#ffd993ff" } }, { "featureType": "provincialway", "elementType": "geometry.fill", "stylers": { "color": "#fdf0daff" } }, { "featureType": "provincialway", "elementType": "labels.text.fill", "stylers": { "color": "#000000ff" } }, { "featureType": "provincialway", "elementType": "labels.text.stroke", "stylers": { "color": "#ffffffff" } }, { "featureType": "subway", "elementType": "geometry.fill", "stylers": { "color": "#f5a117ff" } }, { "featureType": "manmade", "elementType": "labels", "stylers": { "visibility": "off" } }, { "featureType": "water", "elementType": "geometry", "stylers": { "visibility": "on" } }, { "featureType": "building", "elementType": "geometry", "stylers": { "visibility": "off" } }, { "featureType": "subwaystation", "elementType": "geometry", "stylers": { "visibility": "off" } }, { "featureType": "poilabel", "elementType": "labels", "stylers": { "visibility": "off" } }, { "featureType": "poilabel", "elementType": "labels.icon", "stylers": { "visibility": "off" } }, { "featureType": "governmentlabel", "elementType": "labels", "stylers": { "visibility": "off" } }, { "featureType": "village", "elementType": "labels", "stylers": { "visibility": "off" } }, { "featureType": "town", "elementType": "labels", "stylers": { "visibility": "off" } }, { "featureType": "district", "elementType": "labels", "stylers": { "visibility": "off" } }, { "featureType": "city", "elementType": "labels", "stylers": { "visibility": "off" } }, { "featureType": "road", "elementType": "geometry", "stylers": { "visibility": "off" } }, { "featureType": "road", "elementType": "labels", "stylers": { "visibility": "off" } }, { "featureType": "roadarrow", "elementType": "labels.icon", "stylers": { "visibility": "off" } }, { "featureType": "subwaylabel", "elementType": "labels", "stylers": { "visibility": "off" } }, { "featureType": "subwaylabel", "elementType": "labels.icon", "stylers": { "visibility": "off" } }, { "featureType": "tertiarywaysign", "elementType": "labels", "stylers": { "visibility": "off" } }, { "featureType": "tertiarywaysign", "elementType": "labels.icon", "stylers": { "visibility": "off" } }, { "featureType": "provincialwaysign", "elementType": "labels", "stylers": { "visibility": "off" } }, { "featureType": "provincialwaysign", "elementType": "labels.icon", "stylers": { "visibility": "off" } }, { "featureType": "highwaysign", "elementType": "labels", "stylers": { "visibility": "off" } }, { "featureType": "highwaysign", "elementType": "labels.icon", "stylers": { "visibility": "off" } }, { "featureType": "subway", "elementType": "geometry", "stylers": { "visibility": "off" } }, { "featureType": "railway", "elementType": "geometry", "stylers": { "visibility": "off" } }, { "featureType": "vacationway", "elementType": "geometry", "stylers": { "visibility": "off" } }, { "featureType": "universityway", "elementType": "geometry", "stylers": { "visibility": "off" } }, { "featureType": "scenicspotsway", "elementType": "geometry", "stylers": { "visibility": "off" } }, { "featureType": "local", "elementType": "geometry", "stylers": { "visibility": "off" } }, { "featureType": "local", "elementType": "labels", "stylers": { "visibility": "off" } }, { "featureType": "local", "elementType": "labels.icon", "stylers": { "visibility": "off" } }, { "featureType": "fourlevelway", "elementType": "geometry", "stylers": { "visibility": "off" } }, { "featureType": "fourlevelway", "elementType": "labels", "stylers": { "visibility": "off" } }, { "featureType": "fourlevelway", "elementType": "labels.icon", "stylers": { "visibility": "off" } }, { "featureType": "airportlabel", "elementType": "labels", "stylers": { "visibility": "off" } }, { "featureType": "educationlabel", "elementType": "labels", "stylers": { "visibility": "off" } }, { "featureType": "medicallabel", "elementType": "labels", "stylers": { "visibility": "off" } }, { "featureType": "estatelabel", "elementType": "labels", "stylers": { "visibility": "off" } }, { "featureType": "businesstowerlabel", "elementType": "labels", "stylers": { "visibility": "off" } }, { "featureType": "hotellabel", "elementType": "labels", "stylers": { "visibility": "off" } }, { "featureType": "shoppinglabel", "elementType": "labels", "stylers": { "visibility": "off" } }, { "featureType": "continent", "elementType": "labels", "stylers": { "visibility": "off" } }, { "featureType": "country", "elementType": "labels", "stylers": { "visibility": "off" } }, { "featureType": "city", "elementType": "labels.icon", "stylers": { "visibility": "off" } }, { "featureType": "highway", "elementType": "labels", "stylers": { "visibility": "on" } }, { "featureType": "highway", "elementType": "geometry", "stylers": { "visibility": "on" } }, { "featureType": "nationalway", "elementType": "labels", "stylers": { "visibility": "off" } }, { "featureType": "nationalway", "elementType": "geometry", "stylers": { "visibility": "on" } }, { "featureType": "provincialway", "elementType": "labels", "stylers": { "visibility": "off" } }, { "featureType": "arterial", "elementType": "labels", "stylers": { "visibility": "off" } }, { "featureType": "arterial", "elementType": "labels.icon", "stylers": { "visibility": "off" } }, { "featureType": "tertiaryway", "elementType": "labels", "stylers": { "visibility": "off" } }, { "featureType": "tertiaryway", "elementType": "labels.icon", "stylers": { "visibility": "off" } }, { "featureType": "nationalwaysign", "elementType": "labels.icon", "stylers": { "visibility": "off" } }, { "featureType": "cityhighway", "elementType": "labels", "stylers": { "visibility": "off" } }, { "featureType": "districtlabel", "elementType": "labels", "stylers": { "visibility": "off" } }, { "featureType": "districtlabel", "elementType": "labels.icon", "stylers": { "visibility": "off" } }, { "featureType": "water", "elementType": "labels", "stylers": { "visibility": "off" } }, { "featureType": "education", "elementType": "labels", "stylers": { "visibility": "off" } }, { "featureType": "medical", "elementType": "labels", "stylers": { "visibility": "off" } }, { "featureType": "scenicspots", "elementType": "labels", "stylers": { "visibility": "off" } }, { "featureType": "transportation", "elementType": "labels", "stylers": { "visibility": "off" } }]; // 百度地图API功能 var map = new BMap.Map("map", { enableMapClick: false }); // 创建Map实例 map.centerAndZoom(new BMap.Point(105.403119, 38.028658), 5); // 初始化地图,设置中心点坐标和地图级别 map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放 var pt = new BMap.Point(127.733142,21.226515); var jiuduanwidth = 227; var jiuduanheight = 338; var scale = 2.5; var myIcon = new BMap.Icon("./images/nanhai.png", new BMap.Size(jiuduanwidth / scale, jiuduanheight / scale), { imageSize: new BMap.Size(jiuduanwidth / scale, jiuduanheight / scale) }); var marker2 = new BMap.Marker(pt,{icon:myIcon}); // 创建标注 map.addOverlay(marker2); marker2.enableDragging(); map.setMapStyleV2({ styleJson: customStyle }); map.getContainer().style.background = '#fff'; var chinaDataSet; var chinaLayer; $.get('data/china.json', function(geojson) { chinaDataSet = mapv.geojson.getDataSet(geojson); chinaLayer = new mapv.baiduMapLayer(map, chinaDataSet, options); }); var data = []; var textData = []; var dataSet = new mapv.DataSet(data); var textSet = new mapv.DataSet(textData); var options = { draw: 'simple', max: 100, min: 0, size: 10, symbol: 'circle', maxSize: 50, zIndex: 1, minSize: 1, maxOpacity: 0.8, globalAlpha: 1, lineWidth: 1, gradient: { 0.25: "rgba(0, 0, 255, 1)", 0.55: "rgba(0, 255, 0, 1)", 0.85: "rgba(255, 255, 0, 1)", 1.0: "rgba(255, 0, 0, 1)" }, unit: 'px', fillStyle: 'rgba(255, 50, 50, 0.6)', strokeStyle: 'rgba(255, 255, 255, 1)', // shadowColor: 'rgba(55, 50, 250, 0.5)', // shadowBlur: 10 } var pointOptions = { draw: 'simple', zIndex: 10, size: 10, fillStyle: 'rgba(255, 250, 250, 0.5)', strokeStyle: 'rgba(255, 250, 250, 1)', lineWidth: 1, } var mapvLayer = new mapv.baiduMapLayer(map, dataSet, pointOptions); var textOptions = { draw: 'text', avoid: true, textAlign: 'left', offset: { x: 10, y: 0 }, size: 18, zIndex: 2, fillStyle: 'black', shadowBlur: 5 } var textLayer = new mapv.baiduMapLayer(map, textSet, textOptions); var textOptions = { draw: 'text', avoid: true, zIndex: 10, fillStyle: 'black', textKey: 'number', } var textLayer1 = new mapv.baiduMapLayer(map, textSet, textOptions); function finished() { if (!chinaLayer) { return; } chinaLayer.update({ options: options }); $('#legendValue').html(''); $('#legendValue').append(chinaLayer.getLegend({ width: 30, height: 150 })); }; window.onload = function() { initGui(); }; var gradientOptions = [ { 0: "#3fcd3c", 0.5: "#f8bf34", 1.0: "#f65e5c" }, { 0: "#8ed46a", 0.5: "#e9fb8a", 1.0: "#ed996d" }, { 0: "#8ed46a", 0.25: "#c9d868", 0.5: "#f1b658", 0.75: "#e9684c", 1: "#e3626d", }, { 0.25: "rgba(0, 0, 255, 1)", 0.55: "rgba(0, 255, 0, 1)", 0.85: "rgba(255, 255, 0, 1)", 1.0: "rgba(255, 0, 0, 1)" }, { '0': 'Black', '0.5': 'Aqua', '1': 'White' }, { '0.0': 'blue', '1': 'red' }, { '0.0': 'rgb(0, 0, 0)', '0.6': 'rgb(24, 53, 103)', '0.75': 'rgb(46, 100, 158)', '0.9': 'rgb(23, 173, 203)', '1.0': 'rgb(0, 250, 250)' }, { '0': 'Navy', '0.25': 'Blue', '0.5': 'Green', '0.75': 'Yellow', '1': 'Red' }, { '0': 'Black', '0.33': 'DarkRed', '0.66': 'Yellow', '1': 'White' }, { '0': 'Black', '0.4': 'Purple', '0.6': 'Red', '0.8': 'Yellow', '1': 'White' }, { '0': 'Red', '0.66': 'Yellow', '1': 'White' }, { '0': 'Navy', '0.25': 'Navy', '0.26': 'Green', '0.5': 'Green', '0.51': 'Yellow', '0.75': 'Yellow', '0.76': 'Red', '1': 'Red' }, { '0': 'rgba(55, 55, 255, 0.6)', '0.3': 'rgba(55, 55, 255, 0.6)', '0.31': 'rgba(55, 255, 50, 0.6)', '0.7': 'rgba(55, 255, 50, 0.6)', '0.71': 'rgba(255, 50, 50, 0.6)', '1': 'rgba(255, 50, 50, 0.6)' }, { '0.00': 'rgb(255,0,255)', '0.25': 'rgb(0,0,255)', '0.50': 'rgb(0,255,0)', '0.75': 'rgb(255,255,0)', '1.00': 'rgb(255,0,0)' }, { 0: "yellow", 1.0: "red" }, { 0: "white", 1.0: "blue" }, { 0: "green", 1.0: "rgb(0, 255, 255)" }, { 0: "green", 0.5: "yellow", 1.0: "red" }, { 0: "lightgreen", 1.0: "darkgreen" }, { 0: "lightgreen", 1.0: "darkgreen" } ]; var gui; function initGui() { gui && gui.destroy(); gui = new dat.GUI({ nameMap: { draw: '绘制方法', unit: '单位', size: '大小', fillStyle: '颜色', symbol: '形状', globalAlpha: '图层透明度', maxOpacity: '图层透明度', // shadowColor: '阴影颜色', // shadowBlur: '阴影大小', gradient: '渐变色', lineWidth: '线宽', strokeStyle: '线颜色', maxSize: '最大半径值', minSize: '最小半径值', max: '最大阈值', min: '最小阈值', } }); gui.add(options, 'draw', { '普通': 'simple', /* '热力图': 'heatmap', '气泡': 'bubble', '蜂窝状聚类': 'honeycomb', '网格聚类': 'grid', */ '颜色分类': 'category', '值区间分类': 'choropleth', '颜色渐变': 'intensity' }).onFinishChange(function () { initGui(); finished(); }); gui.add(options, 'unit', { '像素': 'px', '米': 'm' }).onFinishChange(function () { initGui(); finished(); }); if (options.draw !== 'bubble') { if (options.unit == 'm') { gui.add(options, 'size', 1, 200000).onFinishChange(finished); } else { gui.add(options, 'size', 1, 100).onFinishChange(finished); } } if (options.draw !== 'heatmap') { gui.add(options, 'globalAlpha', 0, 1).onFinishChange(finished); } switch (options.draw) { case 'simple': gui.addColor(options, 'fillStyle').onChange(finished); // gui.addColor(options, 'shadowColor').onChange(finished); // gui.add(options, 'shadowBlur', 1, 100).onFinishChange(finished); gui.add(options, 'lineWidth', 0, 10).onFinishChange(finished); gui.addColor(options, 'strokeStyle').onChange(finished); gui.add(options, 'symbol', { '圆形': 'circle', '矩形': 'rect', }).onFinishChange(finished); break; case 'bubble': gui.addColor(options, 'fillStyle').onChange(finished); // gui.addColor(options, 'shadowColor').onChange(finished); // gui.add(options, 'shadowBlur', 1, 100).onFinishChange(finished); gui.add(options, 'lineWidth', 0, 10).onFinishChange(finished); gui.addColor(options, 'strokeStyle').onChange(finished); gui.add(options, 'max', 1, 500).onFinishChange(finished); gui.add(options, 'maxSize', 15, 100).onFinishChange(finished); gui.add(options, 'minSize', 0, 100).onFinishChange(finished); break; case 'heatmap': // gui.add(options, 'shadowBlur', 1, 100).onFinishChange(finished); gui.add(options, 'max', 1, 300).onFinishChange(finished); gui.add(options, 'maxOpacity', 0, 1).onFinishChange(finished); break; case 'grid': case 'intensity': case 'honeycomb': gui.add(options, 'max', 1, 50000).onFinishChange(finished); gui.add(options, 'min', -100, 50000).onFinishChange(finished); gui.add(options, 'lineWidth', 0, 10).onFinishChange(finished); gui.addColor(options, 'strokeStyle').onChange(finished); gui.addGradient(options, 'gradient', gradientOptions).onFinishChange(finished); gui.add(options, 'maxSize', 0, 100).onFinishChange(finished); gui.add(options, 'minSize', 0, 100).onFinishChange(finished); break; } } var intensity = new mapv.utilDataRangeIntensity({ max: 100, min: 0, maxSize: 15, minSize: 5 }); function show () { var dataInput = $('#dataInput').val(); dataInput = dataInput.replace(/\n|\r/g, ''); var chinaData = chinaDataSet.get(); dataInput = dataInput.split(';'); data = []; textData = []; var max = 0; var min = 15; for (var i = 0; i < dataInput.length; i++) { var line = dataInput[i].split(','); if (line[1] > max) { max = line[1] } if (min == undefined) { min = parseFloat(line[1]); } if (line[1] < min) { min = parseFloat(line[1]); } } intensity.setMax(max); intensity.setMin(min); options.max = max; options.min = min; var cityMapper = {}; for ( var j = 0; j < chinaData.length; j++) { chinaData[j].fillStyle = 'rgba(218, 218, 218, 0.0)'; chinaData[j].strokeStyle = 'rgba(218, 218, 218, 0.0)'; } for (var i = 0; i < dataInput.length; i++) { var line = dataInput[i].split(','); var cityKey = line[0]; var cityCenter = mapv.utilCityCenter.getCenterByCityName(cityKey); if (!cityCenter) { cityCenter = mapv.utilCityCenter.getCenterByCityName(cityKey.replace('市', '')); } for ( var j = 0; j < chinaData.length; j++) { cityKey = cityKey.replace(/市|省/, ''); if (chinaData[j].name == cityKey) { chinaData[j].fillStyle = undefined; chinaData[j].strokeStyle = 'rgba(255, 255, 255, 1)'; chinaData[j].count = parseFloat(line[1]); } } var item = { geometry: { type: 'Point', coordinates: [cityCenter.lng, cityCenter.lat] }, text: line[0], number: (i + 1), fillStyle: line[2] } if (line[1]) { //item.size = intensity.getSize(line[1]); item.count = parseFloat(line[1]); } data.push(item); if (line[3] !== 'nolabel') { textData.push(item); } } dataSet.set(data); chinaDataSet.set(chinaData); textSet.set(textData); finished(); } function showText() { textLayer.show(); } function hideText() { textLayer.hide(); } function showNumber() { textLayer1.show(); mapvLayer.show(); } function hideNumber() { textLayer1.hide(); mapvLayer.hide(); } </script> </body> </html>