deep-viz/lib/Map/AMapDistrictCluster.js

A React component library, provide concise and beautiful diversity charts with Canvas, SVG, E-map, WebGL, Dom, based on data visualization experience and commercial data display practice.

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var _extends=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r,i=arguments[t];for(r in i)Object.prototype.hasOwnProperty.call(i,r)&&(e[r]=i[r])}return e},_createClass=function(){function i(e,t){for(var r=0;r<t.length;r++){var i=t[r];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(e,t,r){return t&&i(e.prototype,t),r&&i(e,r),e}}(),_react=require("react"),_react2=_interopRequireDefault(_react),_propTypes=require("prop-types"),_propTypes2=_interopRequireDefault(_propTypes);function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _possibleConstructorReturn(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function _inherits(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}require("./amp.css");var AMapDistrictCluster=function(){function e(){return _classCallCheck(this,e),_possibleConstructorReturn(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return _inherits(e,_react2.default.Component),_createClass(e,[{key:"componentDidMount",value:function(){window.mapRender=this.mapRender.bind(this),window.AMap?this.mapRender():((e=document.createElement("script")).src="https://webapi.amap.com/maps?v=1.4.15&key=5f47a71f72692f5e7160f7b577d72a82&callback=mapRender",document.head.appendChild(e));var e=document.createElement("script");e.async=!1,e.type="text/javascript",e.src="https://webapi.amap.com/ui/1.1/main-async.js",document.head.appendChild(e)}},{key:"mapRender",value:function(){var i=this;this.amap=new window.AMap.Map("ampClusterContainer",{zoom:4,center:[116,37.6]}),AMap.plugin("AMap.ToolBar",function(){return i.amap.addControl(new(new AMap.ToolBar))}),window.initAMapUI(),AMapUI.load(["ui/geo/DistrictCluster","lib/$","lib/utils"],function(e,t,r){window.DistrictCluster=e,i.props.labelConfig?i.initPage(e,t,r):i.props.labelConfig||i.initPage1(e,t,r)})}},{key:"initPage1",value:function(e,t){e=new e({zIndex:0,map:this.amap,autoSetFitView:!1,getPosition:function(e){if(!e)return null;e=e.split(",");return[parseFloat(e[0]),parseFloat(e[1])]}});window.distCluster=e,t('<div id="loadingTip">加载数据，请稍候...</div>').appendTo(document.body),t("#loadingTip").remove(),e.setData(this.props.point)}},{key:"initPage",value:function(e,t,r){var l=this.amap,p=this,i=this.props.renderOptions;function o(e,t,r,i,n){o.__super__.constructor.call(this,e,t,r,i,n)}r.inherit(o,e.Render.Default),r.extend(o.prototype,{drawFeaturePolygons:function(e,t,r,i,n){o.__super__.drawFeaturePolygons.call(this,e,t,r,i,n),this.drawMyLabel(i,n)},_initContainter:function(e,t,r,i,n){o.__super__._initContainter.call(this,e,t,r,i,n),this._createCanvas("mylabel",this._container)},drawMyLabel:function(e,t){var r=this.getPixelRatio(),i=l.lngLatToContainer(e.properties.centroid||e.properties.center),n=this._getCanvasCxt("mylabel"),o=i.getX()*r,a=i.getY()*r;n.save(),n.font=14*r+"px 微软雅黑";i=e.properties.name+"("+t.length+")",e=n.measureText(i),t=e.width/2;n.fillStyle=p.props.labelConfig.fillStyle||"#108EE9","rect"===p.props.labelConfig.type?n.fillRect(o-t-3*r,a-11*r,e.width+6*r,22*r):"circle"===p.props.labelConfig.type&&(n.beginPath(),n.arc(o,a,t*r/2/2,0,2*Math.PI),n.fill(),n.closePath()),n.fillStyle=p.props.labelConfig.color||"#fff",n.textBaseline="middle",n.fillText(i,o-t,a),n.restore()}});i=new e({zIndex:200,map:this.amap,autoSetFitView:!1,getPosition:function(e){if(!e)return null;e=e.split(",");return[parseFloat(e[0]),parseFloat(e[1])]},renderConstructor:o,renderOptions:{getClusterMarker:null,featureClickToShowSub:!0,featureStyle:{fillStyle:"#9cd49b",lineWidth:i?i.lineWidth:1,strokeStyle:i?i.strokeStyle:"#1f77b4",hoverOptions:{fillStyle:i?i.hoverColor:"#b0ddaf",lineWidth:i?i.hoverLineWidth:1,strokeStyle:i?i.hoverStrokeStyle:"#1f77b4"}}}});window.distCluster=i,t('<div id="loadingTip">加载数据，请稍候...</div>').appendTo(document.body),t("#loadingTip").remove(),i.setData(this.props.point)}},{key:"render",value:function(){var e=this.props.style,e=void 0===e?{}:e;return _react2.default.createElement("div",{style:{position:"relative"}},_react2.default.createElement("div",{id:"ampClusterContainer",style:_extends({width:"100%",height:630},e)}))}}]),e}();(exports.default=AMapDistrictCluster).propTypes={style:_propTypes2.default.object,labelConfig:_propTypes2.default.shape({type:_propTypes2.default.string.isRequired,fillStyle:_propTypes2.default.string.isRequired,color:_propTypes2.default.string.isRequired})};