|
|
@@ -96,16 +96,209 @@
|
|
|
type: "error"
|
|
|
});
|
|
|
});
|
|
|
- }
|
|
|
+ },
|
|
|
},
|
|
|
mounted() {
|
|
|
- this.getMap();
|
|
|
+ //this.getMap();
|
|
|
|
|
|
this.$el.style.height = (window.innerHeight - 100) + "px";
|
|
|
const that = this;
|
|
|
window.onresize = function temp() {
|
|
|
this.$el.style.height = (window.innerHeight - 100) + "px";
|
|
|
};
|
|
|
+
|
|
|
+ //新地图
|
|
|
+ var map = new AMap.Map('container', {
|
|
|
+ zoom: 4,
|
|
|
+ mapStyle: "amap://styles/grey",
|
|
|
+ features: ['bg']
|
|
|
+ });
|
|
|
+
|
|
|
+ var _this = this;
|
|
|
+ //加载相关组件
|
|
|
+ AMapUI.load(['ui/geo/DistrictCluster', 'ui/misc/PointSimplifier', 'lib/$' , 'lib/utils'], function(DistrictCluster, PointSimplifier , $ , utils) {
|
|
|
+
|
|
|
+ window.DistrictCluster = DistrictCluster;
|
|
|
+
|
|
|
+ //启动页面
|
|
|
+ var pointSimplifierIns = new PointSimplifier({
|
|
|
+ map: map, //所属的地图实例
|
|
|
+ autoSetFitView: false, //禁止自动更新地图视野
|
|
|
+ zIndex: 110,
|
|
|
+ getPosition: function(item) {
|
|
|
+ if (!item) {
|
|
|
+ return null;
|
|
|
+ }
|
|
|
+ //var parts = item.split(',');
|
|
|
+ //返回经纬度
|
|
|
+ //return [parseFloat(parts[0]), parseFloat(parts[1])];
|
|
|
+ return [parseFloat(item.lng), parseFloat(item.lat)];
|
|
|
+ },
|
|
|
+ getHoverTitle: function(dataItem, idx) {
|
|
|
+ var state = "";
|
|
|
+ if(dataItem.state == '0'){
|
|
|
+ state = "静止"
|
|
|
+ } else if(dataItem.state == '1'){
|
|
|
+ state = "运动"
|
|
|
+ } else if(dataItem.state == '2'){
|
|
|
+ state = "告警"
|
|
|
+ } else if(dataItem.state == '3'){
|
|
|
+ state = "报废"
|
|
|
+ }
|
|
|
+ return dataItem.modelName + ' ' + state;
|
|
|
+ },
|
|
|
+ renderOptions: {
|
|
|
+ //点的样式
|
|
|
+ pointStyle: {
|
|
|
+ width: 6,
|
|
|
+ height: 6,
|
|
|
+ fillStyle:'rgba(0, 236, 252, 0.38)'
|
|
|
+ },
|
|
|
+ //鼠标hover时的title信息
|
|
|
+ hoverTitleStyle: {
|
|
|
+ position: 'top'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ function MyRender(distClusterIns, opts) {
|
|
|
+ //直接调用父类的构造函数
|
|
|
+ MyRender.__super__.constructor.apply(this, arguments);
|
|
|
+ }
|
|
|
+
|
|
|
+ //继承默认引擎
|
|
|
+ utils.inherit(MyRender, DistrictCluster.Render.Default);
|
|
|
+
|
|
|
+ utils.extend(MyRender.prototype, {
|
|
|
+ drawFeaturePolygons: function(ctx, polygons, styleOptions, feature, dataItems) {
|
|
|
+ //调用父类方法
|
|
|
+ MyRender.__super__.drawFeaturePolygons.apply(this, arguments);
|
|
|
+
|
|
|
+ //直接绘制聚合信息
|
|
|
+ this.drawMyLabel(feature, dataItems);
|
|
|
+ },
|
|
|
+ _initContainter: function() {
|
|
|
+ //调用父类方法
|
|
|
+ MyRender.__super__._initContainter.apply(this, arguments);
|
|
|
+
|
|
|
+ //创建一个新的canvas
|
|
|
+ this._createCanvas('mylabel', this._container);
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 绘制一个蓝底白字的label替代聚合标注
|
|
|
+ */
|
|
|
+ drawMyLabel: function(feature, dataItems) {
|
|
|
+ if(dataItems.length != 0){
|
|
|
+ var pixelRatio = this.getPixelRatio(); //高清下存在比例放大
|
|
|
+
|
|
|
+ var containerPos = map.lngLatToContainer(feature.properties.centroid || feature.properties.center);
|
|
|
+
|
|
|
+ var labelCtx = this._getCanvasCxt('mylabel');
|
|
|
+
|
|
|
+ //文字的中心点
|
|
|
+ var centerX = containerPos.getX() * pixelRatio,
|
|
|
+ centerY = containerPos.getY() * pixelRatio;
|
|
|
+
|
|
|
+ labelCtx.save();
|
|
|
+
|
|
|
+ labelCtx.font = 12 * pixelRatio + 'px 微软雅黑';
|
|
|
+
|
|
|
+ var text = feature.properties.name + '\n' + dataItems.length + '';
|
|
|
+
|
|
|
+ var textMetrics = labelCtx.measureText(text);
|
|
|
+
|
|
|
+ var halfTxtWidth = textMetrics.width / 2;
|
|
|
+
|
|
|
+ labelCtx.fillStyle = 'rgba(3 , 94 , 255 , 0.5)';//'#3366cc';
|
|
|
+ //绘制一个蓝色背景
|
|
|
+ labelCtx.fillRect(centerX - halfTxtWidth - 3 * pixelRatio,
|
|
|
+ centerY - 11 * pixelRatio,
|
|
|
+ textMetrics.width + 6 * pixelRatio,
|
|
|
+ 22 * pixelRatio);
|
|
|
+
|
|
|
+
|
|
|
+ labelCtx.fillStyle = '#ffffff';
|
|
|
+ labelCtx.textBaseline = 'middle';
|
|
|
+ labelCtx.stroke();
|
|
|
+ labelCtx.fillText(text, centerX - halfTxtWidth, centerY);
|
|
|
+
|
|
|
+ labelCtx.restore();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ var distCluster = new DistrictCluster({
|
|
|
+ zIndex: 100,
|
|
|
+ map: map, //所属的地图实例
|
|
|
+ getPosition: function(item) {
|
|
|
+ if (!item) {
|
|
|
+ return null;
|
|
|
+ }
|
|
|
+ // var parts = item.split(',');
|
|
|
+ // console.log(item)
|
|
|
+ //返回经纬度
|
|
|
+ //return [parseFloat(parts[0]), parseFloat(parts[1])];
|
|
|
+ return [parseFloat(item.lng), parseFloat(item.lat)];
|
|
|
+ },
|
|
|
+ renderConstructor: MyRender,
|
|
|
+ //特定区划级别的默认样式
|
|
|
+ renderOptions: {
|
|
|
+ getClusterMarker: null,
|
|
|
+ featureClickToShowSub: true,
|
|
|
+ featureStyle: {
|
|
|
+ lineWidth: 2, //描边线宽
|
|
|
+ strokeStyle: 'rgba(31, 119, 180, 0.8)', //描边色
|
|
|
+ //鼠标Hover后的样式
|
|
|
+ hoverOptions: {
|
|
|
+ fillStyle: 'rgba(255,255,255,0.2)'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getFeatureStyle: function(feature, dataItems) {
|
|
|
+ return {
|
|
|
+ fillStyle: ''
|
|
|
+ };
|
|
|
+ }
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ window.distCluster = distCluster;
|
|
|
+
|
|
|
+ map.on('zoomend', function() {
|
|
|
+ var zoom = map.getZoom();
|
|
|
+ //获取 pointStyle
|
|
|
+ var pointStyle = pointSimplifierIns.getRenderOptions().pointStyle;
|
|
|
+ //根据当前zoom调整点的尺寸
|
|
|
+ pointStyle.width = pointStyle.height = 2 * Math.pow(1.2, map.getZoom() - 3);
|
|
|
+ });
|
|
|
+
|
|
|
+ var zoom = map.getZoom();
|
|
|
+ //获取 pointStyle
|
|
|
+ var pointStyle = pointSimplifierIns.getRenderOptions().pointStyle;
|
|
|
+ //根据当前zoom调整点的尺寸
|
|
|
+ pointStyle.width = pointStyle.height = 2 * Math.pow(1.2, map.getZoom() - 3);
|
|
|
+
|
|
|
+ $('<div id="loadingTip">加载数据，请稍候...</div>').appendTo(document.body);
|
|
|
+ // $.get('https://a.amap.com/amap-ui/static/data/10w.txt', function(csv) {
|
|
|
+
|
|
|
+ // $('#loadingTip').remove();
|
|
|
+ // var data = csv.split('\n');
|
|
|
+ // distCluster.setData(data);
|
|
|
+ // pointSimplifierIns.setData(data);
|
|
|
+ // });
|
|
|
+ _this.http.post( _this.port.map.newMap, {},
|
|
|
+ res => {
|
|
|
+ $('#loadingTip').remove();
|
|
|
+ var data = res.data;
|
|
|
+ distCluster.setData(data);
|
|
|
+ pointSimplifierIns.setData(data);
|
|
|
+ },
|
|
|
+ error => {
|
|
|
+ _this.$message({
|
|
|
+ message: error,
|
|
|
+ type: "error"
|
|
|
+ });
|
|
|
+ })
|
|
|
+ });
|
|
|
}
|
|
|
}
|
|
|
|
