自定义控件——原创仿地图瓦片动态加载_阶段2_动态增加减少单元格坐标

最新推荐文章于 2023-06-14 12:46:06 发布
最新推荐文章于 2023-06-14 12:46:06 发布
阅读量308 收藏 1
点赞数
分类专栏： 安卓开发 文章标签： 自定义View 地图 瓦片 动态加载Bitmap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cjzjolly/article/details/90380494
版权

对MapView进行了一些修改，例如当单元格溢出左边框，添加到右边框时，把原本最右边的x值+1后复制给自身的tag，即可使x值随着右移增加，然后申请重绘，可以方便下一步通过索引寻找对应Bitmap。

代码如下：

package cjz.project.maptry4;

import android.content.Context;
import android.graphics.PointF;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.FrameLayout;

import java.util.LinkedList;
import java.util.List;
import java.util.Map;
import java.util.Queue;
import java.util.concurrent.LinkedBlockingQueue;

import cjz.project.maptry.R;

/**
 * Created by cjz on 2019/4/30.
 */

public class MapView extends FrameLayout {

    private PointF currentCenter = new PointF();
    private PointF prevCurrentCenter = null;
    private float prevDistance = Float.MIN_VALUE;
    private float totalScale = 1f;
    private float dx = 0, dy = 0;
    /**缩放比例上限**/
    private final float MAX_SCALE = 2f;
    /**缩放比例下限**/
    private final float MIN_SCALE = 0.5f;
    /**单元格矩阵长宽均有多少个单元**/
    private final int MATRIX_LENGTH = 4;
    /**单元格表**/
    private MapUnit mapUnitMatrix[][] = new MapUnit[MATRIX_LENGTH][MATRIX_LENGTH];
    private boolean initFinished = false;

    /*** 触摸点点距队列**/
    private Queue<Float> touchDistanceQueue = new LinkedBlockingQueue<>();

    public MapView(Context context) {
        super(context);
    }

    public MapView(Context context, AttributeSet attrs) {
        super(context, attrs);

    }

    public MapView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        if(!initFinished){
            createView();
            initFinished = true;
        }
    }

    private void createView() {
        for(int yPos = 0; yPos < MATRIX_LENGTH; yPos++) {
            for (int xPos = 0; xPos < MATRIX_LENGTH; xPos++) {
                MapUnit mapUnit = new MapUnit(getContext());
//                mapUnit.setImageResource(R.mipmap.ic_launcher);
                mapUnit.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
                mapUnit.setTag(new int[]{xPos, yPos});
                addView(mapUnit);
                mapUnitMatrix[xPos][yPos] = mapUnit;
            }
        }
        for(int yPos = 0; yPos < MATRIX_LENGTH; yPos++) {
            for (int xPos = 0; xPos < MATRIX_LENGTH; xPos++) {
                mapUnitMatrix[xPos][yPos].setX(xPos * getMeasuredWidth());
                mapUnitMatrix[xPos][yPos].setY(yPos * getMeasuredHeight());
            }
        }
    }

    /*将触摸点的坐标平均化*/
    private float avergeX = 0, avergeY = 0;
    private int prevPointCount = 0;
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                prevDistance = 0;
                prevPointCount = event.getPointerCount();
                //算出移动中心坐标、点间距离
                for(int i = 0; i < event.getPointerCount(); i++){
                    avergeX += event.getX(i);
                    avergeY += event.getY(i);
                    if(i + 1 < event.getPointerCount()){
                        prevDistance += Math.sqrt(Math.pow(event.getX(i + 1) - event.getX(i), 2) + Math.pow(event.getY(i + 1) - event.getY(i), 2));
                    }
                }
                avergeX /= event.getPointerCount();
                avergeY /= event.getPointerCount();
                if(prevCurrentCenter == null){
                    prevCurrentCenter = new PointF(avergeX, avergeY);
                } else {
                    prevCurrentCenter.set(avergeX, avergeY);
                }
                break;
            case MotionEvent.ACTION_MOVE:
                avergeX = 0;
                avergeY = 0;
                float nowDistance = 0;
                //算出移动中心坐标、点间距离
                for(int i = 0; i < event.getPointerCount(); i++){
                    avergeX += event.getX(i);
                    avergeY += event.getY(i);
                    if(i + 1 < event.getPointerCount()){
                        nowDistance += Math.sqrt(Math.pow(event.getX(i + 1) - event.getX(i), 2) + Math.pow(event.getY(i + 1) - event.getY(i), 2));
                    }
                }
                //现在的点间距离 除以 上次点间距离 这次得到缩放比例
                avergeX /= event.getPointerCount();
                avergeY /= event.getPointerCount();
                if((prevPointCount != event.getPointerCount()) || event.getPointerCount() <= 1 || prevPointCount <= 1){ //触摸点数突然改变 或者 触摸点不超过2，不允许缩放
                    prevDistance = nowDistance = 0;
                }
                //如果缩放数据有效，则进行平均平滑化并且进行缩放
                if(prevDistance > 0 && nowDistance > 0){
                    touchDistanceQueue.add(nowDistance / prevDistance);
                    if(touchDistanceQueue.size() >= 6) {
                        Float point[] = new Float[touchDistanceQueue.size()];
                        touchDistanceQueue.toArray(point);
                        float avergDistance = 0;
                        for(int i = 0; i < point.length; i++){
                            avergDistance += point[i];
                        }
                        avergDistance /= point.length;
                        scale((float) Math.sqrt(avergDistance), avergeX, avergeY);
                        while(touchDistanceQueue.size() > 6){
                            touchDistanceQueue.poll();
                        }
                    }
                }
                prevPointCount = event.getPointerCount();
                prevDistance = nowDistance;
                //当前坐标 - 上次坐标 = 偏移值，然后进行位置偏移
                if(prevCurrentCenter == null) {
                    prevCurrentCenter = new PointF(avergeX, avergeY);
                } else {
                    translate(avergeX - prevCurrentCenter.x, avergeY - prevCurrentCenter.y);
                    prevCurrentCenter.set(avergeX, avergeY);
                }
                break;
            case MotionEvent.ACTION_UP:
                //抬起，清理干净数据
                avergeX = 0;
                avergeY = 0;
                touchDistanceQueue.clear();
                break;
        }
        return true;
    }


    /**
     * 缩放函数
     **/
    public void scale(float scale, float px, float py) {
        if(totalScale * scale < MIN_SCALE || totalScale * scale > MAX_SCALE){
//            return;
        }
        totalScale *= scale;
        for(int yPos = 0; yPos < MATRIX_LENGTH; yPos++) {
            for (int xPos = 0; xPos < MATRIX_LENGTH; xPos++) {
                View view = mapUnitMatrix[xPos][yPos];
                //以本View中心点为缩放中心缩放
                view.setScaleX(view.getScaleX() * scale);
                view.setScaleY(view.getScaleY() * scale);
                //求本view中心点在屏幕中的坐标
                float centerX = view.getX() + view.getWidth() / 2;
                float centerY = view.getY() + view.getHeight() / 2;
                /**向缩放中心靠拢，例如缩放为原来的80%，那么缩放中心x到view中心x的距离则为0.8*(缩放中心x - view中心x),
                 * 那么view的x距离屏幕左边框的距离则 为   view中心x + (1 - 0.8) * (缩放x - view中心x)  ****/
                float centerXAfterScale = centerX + (px - centerX) * (1 - scale); //view中心向缩放中心聚拢或扩散
                float centerYAfterScale = centerY + (py - centerY) * (1 - scale);
                view.setX(centerXAfterScale - view.getWidth() / 2); //setXY是set左上角的x,y，所以view中心点要减去宽度/高度的一般来重新得到应该去的左上角坐标
                view.setY(centerYAfterScale - view.getHeight() / 2);
//            viewFind(view, this.scale);
                Log.i("View" + view.hashCode() + "的信息", String.format("长度:%d, 宽度:%d, 坐标x:%f, 坐标y:%f", view.getWidth(), view.getHeight(), view.getX(), view.getY()));
            }
        }
        Log.i("缩放", String.format("百分比：%f", totalScale));
    }

    /**
     * 移动函数 (效率有点问题，但暂时不管，反正以后要用OpenGL重写的，自定义View的显示效率不是最终追求的最优选择)
     **/
    private void translate(float distanceX, float distanceY) {
        dx += distanceX;
        dy += distanceY;
        for(int yPos = 0; yPos < MATRIX_LENGTH; yPos++) {
            for (int xPos = 0; xPos < MATRIX_LENGTH; xPos++) {
                View view = mapUnitMatrix[xPos][yPos];
                view.setX(view.getX() + (distanceX));
                view.setY(view.getY() + (distanceY));
            }
        }
        //x轴,y轴要分开两个循环处理，否则会引发混乱
        for(int yPos = 0; yPos < MATRIX_LENGTH; yPos++) {
            for (int xPos = 0; xPos < MATRIX_LENGTH; xPos++) {
                View view = mapUnitMatrix[xPos][yPos];
                //移除去的部分添加到未显示的部分的末尾
                if(view.getX()  + (1 - view.getScaleX()) / 2 * view.getWidth() + view.getWidth() * view.getScaleX() < 0  && getWidth() > 0) { //单元格溢出到了屏幕左边，移动到当前对应行最右边
                    if(xPos == 0) {
                        //重设位置
                        view.setX(mapUnitMatrix[MATRIX_LENGTH - 1][yPos].getX() + mapUnitMatrix[MATRIX_LENGTH - 1][yPos].getWidth() * mapUnitMatrix[MATRIX_LENGTH - 1][yPos].getScaleX());
                        int targetPos[] = (int[])mapUnitMatrix[MATRIX_LENGTH - 1][yPos].getTag();
                        view.setTag(new int[]{targetPos[0] + 1, targetPos[1]}); //重设单元格标记
                        for (int i = xPos; i < MATRIX_LENGTH - 1; i++) {
                            mapUnitMatrix[i][yPos] = mapUnitMatrix[i + 1][yPos];
                        }
                        mapUnitMatrix[MATRIX_LENGTH - 1][yPos] = (MapUnit) view;
                        view.invalidate(); //申请重绘
                    }
                }
                else if (view.getX() + (1 - view.getScaleX()) / 2 * view.getWidth() > getWidth() && getWidth() > 0) {
                    if(xPos == MATRIX_LENGTH - 1){ //因为初始化时显示的Unit是最左上角的Unit，有可能导致非最后一列的内容被平移，这违反自动补充的逻辑，会出bug，所以要加判断
                        //重设位置(设置和最后一个的左上角坐标直接重合（setx用于设定左上角坐标），再减去控件宽度*缩放量使得目标控件右上角和最后一个控件左上角对齐)
                        view.setX(mapUnitMatrix[0][yPos].getX() - mapUnitMatrix[0][yPos].getWidth() * mapUnitMatrix[0][yPos].getScaleX());
                        int targetPos[] = (int[])mapUnitMatrix[0][yPos].getTag();
                        view.setTag(new int[]{targetPos[0] - 1, targetPos[1]}); //重设单元格标记
                        MapUnit temp = mapUnitMatrix[MATRIX_LENGTH - 1][yPos];
                        for(int i = MATRIX_LENGTH - 1; i > 0 ; i--){
                            mapUnitMatrix[i][yPos] = mapUnitMatrix[i - 1][yPos];
                        }
                        mapUnitMatrix[0][yPos] = temp;
                        view.invalidate(); //申请重绘
                    }
                }
            }
        }
        for(int yPos = 0; yPos < MATRIX_LENGTH; yPos++) {
            for (int xPos = 0; xPos < MATRIX_LENGTH; xPos++) {
                View view = mapUnitMatrix[xPos][yPos];
                if (view.getY() + (1 - view.getScaleY()) / 2 * view.getHeight() + view.getHeight() * view.getScaleY() < 0 && getHeight() > 0) {
                    if (yPos == 0) {
                        //重设位置
                        view.setY(mapUnitMatrix[xPos][MATRIX_LENGTH - 1].getY() + mapUnitMatrix[xPos][MATRIX_LENGTH - 1].getHeight() * mapUnitMatrix[xPos][MATRIX_LENGTH - 1].getScaleY());
                        int targetPos[] = (int[])mapUnitMatrix[xPos][MATRIX_LENGTH - 1].getTag();
                        view.setTag(new int[]{targetPos[0], targetPos[1] + 1}); //重设单元格标记
                        for (int i = yPos; i < MATRIX_LENGTH - 1; i++) {
                            mapUnitMatrix[xPos][i] = mapUnitMatrix[xPos][i + 1];
                        }
                        mapUnitMatrix[xPos][MATRIX_LENGTH - 1] = (MapUnit) view;
                        view.invalidate(); //申请重绘
                    }
                }
                else if (view.getY() + (1 - view.getScaleY()) / 2 * view.getHeight() > getHeight() && getHeight() > 0) {
                    if (yPos == MATRIX_LENGTH - 1) {
                        //Log.i("越位", "到了屏幕下边界");
                        //重设位置(设置和最后一个的左上角坐标直接重合（setx用于设定左上角坐标），再减去控件宽度*缩放量使得目标控件右上角和最后一个控件左上角对齐)
                        view.setY(mapUnitMatrix[xPos][0].getY() - view.getHeight() * view.getScaleY());
                        int targetPos[] = (int[])mapUnitMatrix[xPos][0].getTag();
                        view.setTag(new int[]{targetPos[0], targetPos[1] - 1}); //重设单元格标记
                        MapUnit temp = mapUnitMatrix[xPos][MATRIX_LENGTH - 1];
                        for (int i = MATRIX_LENGTH - 1; i > 0; i--) {
                            mapUnitMatrix[xPos][i] = mapUnitMatrix[xPos][i - 1];
                        }
                        mapUnitMatrix[xPos][0] = temp;
                        view.invalidate(); //申请重绘
                    }
                }
            }
        }
        Log.i("移动", String.format("x位移：%f， y位移：%f", distanceX, distanceY));
//        invalidate();
    }

}

效果：

 

 

cjzcjl
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用three.js渲染瓦片地球-第一篇
zhgu1992的博客
07-16 8199
近期有个需求是想使用自己的3d引擎去渲染地球逻辑，如果从头实现一遍会比较耗费时间，而且后续还要实现倾斜摄影等等，所以打算使用cesium来帮我们做调度然后用自己的3d引擎渲染。
asp.net动态加载自定义控件的方法
10-24
主要介绍了asp.net动态加载自定义控件的方法,涉及asp.net动态加载控件的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
threejs_maps:谷歌地图上的画布叠加，使用threejs可视化大量数据
06-20
初始设置 在项目根目录中运行./init 。 该脚本将安装 nvm、node 和其他所需的 node 和 bower 包。 如果您手动进行了设置，请确保您尚未安装节点。 这仅适用于 ubuntu。 这仍然未经测试。 或者，您可以手动执行操作：您将需要最新版本的 nodejs。 从项目根目录下载后运行以下命令： npm install -g gulp bower npm install bower install 如何使用 以下面指定的格式获取数据。 Ans 将文件保存为 data/dir 中的 data.json。 运行以下命令以启动应用程序。 gulp serve 脚本 scipts/有一个routes_to_geojson.py脚本，这个脚本将一些 csv 格式更改为 GeoJson。 复制并修改此脚本以从其他格式转换为下面给出的 GeoJson。 数据格式 数据格式为 Geo
Three JS 调研
花花邪思的博客
12-23 3331
更多的是关注如何通过webgl更精细而美的渲染数据three.js相当于封装了webgl，但还是很底层，并不是一个类似于cesium或者mapbox这样的成熟地图框架，
Threejs实现VR全景/模拟krpano异步加载/局部纹理刷新/图分层加载/瓦片加载
左本Web3D
01-12 1807
​使用Threejs实现WebVR全景，模拟krpano异步加载、分层加载、瓦片加载、顺序加载，Threejs实现局部纹理刷新，Canvas纹理（CanvasTexture），从Canvas元素中创建纹理贴图。 ​
Asp.net 动态加载用户自定义控件,并转换成HTML代码
10-29
Ajax现在已经是相当流行的技术了，Ajax不仅是想服务器端发送消息，更重要的是无刷新的重载页面。
WpfApp_Move(自定义控件的放大缩小，动态添加控件保存)源代码
08-17
WpfApp_Move(自定义控件的放大缩小，动态添加控件保存)源代码WpfApp_Move(自定义控件的放大缩小，动态添加控件保存)源代码 可动态多动控件，放大控件，添加控件，添加属性保存到xml中启动的时候读取。
VB6自定义控件——布局分栏（分割）控件源代码
03-03
布局用分栏控件，组织界面上的控件按格子布局，运行时用户可调整分割线的位置。 1.支持水平、垂直分栏 2.通过设置分割样式表达式，满足灵活多变的分割需求 3.支持按像素（PX）、百分百（%）设置格子的宽/高，或用星...
three-tile: 从头编写一套三维瓦片地图框架，大家是否有兴趣？
最新发布
老郭的专栏
06-14 1873
对标cesium，从头写一套三维瓦片地图框架，大家是否有兴趣？
瓦片地图实现（解决了资源问题，增加缓存功能）
03-28
实现jiazaiarcserver瓦片地图的功能，可通过修改配置文件实现加载天地图等其他瓦片，有兴趣的自己扩展吧。
基于Three.js的简单三维场景
12-28
这个WebGL的Demo是我在学习Three.js时写出来的，里面包含了天空盒、水面绘制、json模型导入、基于高程图的地形绘制、阴影绘制等。推荐使用火狐浏览器运行此demo，若使用chrome浏览器，则需使用命令行模式，在cmd窗口上输入：cd C:\Program Files (x86)\Google\Chrome\Application chrome.exe --allow-file-access-from-files
腾讯地图SDK加载、删除Geoserver瓦片图层
nanjumufeng的博客
10-15 1352
近日项目需要，需要使用腾讯地图SDK进行二次开发，加载Geoserver发布的影像图层。现在就将加载过程记录一下。注：以腾讯地图官方文档为参考。 最终的效果： 首先需要在腾讯地图官网申请KEY值，申请过程请看官方文档中的介绍。加载图层的主要文档在Android地图SDK文档中“自定义瓦片层”章节。 首先准备一个实体类和一个工具类。 PositionModel: public class PositionModel { private double wgLat; private double wgLon
three.js实现世界3d地图
baby_duoduo的博客
09-03 2787
概况如下： 1、THREE.Shape绘制世界地图平面地图； 2、THREE.ExtrudeGeometry将绘制的平面沿着Z轴拉伸，实现3d效果； 效果图如下： 预览地址：three.js实现世界3d地图 初始化场景、相机、渲染器，设置相机位置，初始化光源，光源采用HemisphereLight，设置光源位置为场景中心位置，并将光源加入场景中。 // 初始化场景 var scene = new...
three-geo加载地形的实际应用
sf352113939的博客
06-10 3031
Q：threeJs中已加载有真实地理位置的三维模型和点线数据，需加载地形和影像数据，与模型数据、矢量数据匹配。 A： threeJs-geo提供了加载地形和影像的库
使用three.js/webgl实现简易地形
凡事有果必有因
07-22 2305
在three.js中使用mapbox地形瓦片的方法
Threejs GeoJSON离线3D地图
04-08
<img src="https://img-bss.csdn.net/201904081438008300.jpg" alt="" /><img src="https://img-bss.csdn.net/201904081438077931.jpg" alt="" /><img src="https://img-bss.csdn.net/201904081438242679.gif" alt="" />
高德地图中加载three.js（vue中）（封装
不上班老板怎么买房买车
03-17 5011
高德地图中加载three.js

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值