版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/liudao7994/article/details/79828610
文章目录
思路
- 第一步 下载含有中国地图的 SVG https://www.amcharts.com/dl/javascript-maps/
- 第二步 用 http://inloop.github.io/svg2android/ 网站 将svg资源转换成相应的 Android代码
- 第三步 利用Xml解析SVG的代码 封装成javaBean 最重要的得到Path
- 第四步 重写OnDraw方法 利用Path绘制中国地图
- 第五步 重写OnTouchEvent方法，记录手指触摸位置，判断这个位置是否坐落在某个省份上
找到svg的图 文件位置在这里
ammap_3.21.2.free\ammap\maps\svg
找到china的文件 有两个 高精度和低精度随便哪个都行
(1)Path指令解析如下所示：
Path
M = moveto(M X,Y) ：将画笔移动到指定的坐标位置，相当于 android Path 里的moveTo()
L = lineto(L X,Y) ：画直线到指定的坐标位置，相当于 android Path 里的lineTo()
H = horizontal lineto(H X)：画水平线到指定的X坐标位置
V = vertical lineto(V Y)：画垂直线到指定的Y坐标位置
C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY)：三次贝赛曲线
S = smooth curveto(S X2,Y2,ENDX,ENDY) 同样三次贝塞尔曲线，更平滑
Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY)：二次贝赛曲线
T = smooth quadratic Belzier curveto(T ENDX,ENDY)：映射 同样二次贝塞尔曲线，更平滑
A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)：弧线 ，相当于arcTo()
Z = closepath()：关闭路径（会自动绘制链接起点和终点）
android:pathData="M541.02,336.29L541.71,336.09
L542.54,337.38L543.77,338.27
L543.53,338.58L545.92,338.99.8,350.12L561.12,349.61L562.97,349.6L563.89,349.94
L563.48,350.21L563.6,351.15L562.98,351.84L562.99,353.94L562.28,353.68L562.06,3
53.97L561.87,355.49L561.13,355.88L561.38,356.41L560.77,357.72L561.33,357.73
。。。。。
L562.06,359L563.49,358.5L563.75,357.85L564.17,358.09L564.64
,361.19L565.52,361.68L564.51,362.21L564.67,363.38L565.17,363.21L565.35,364.41
L566.19,364.53L566.23,365.29L567.26,365L568.99,365.25L569.63,364.91
L539.3,337.63L539.84,336.78L540.31,336.88z" />
//指令详情可以 参考 http://www.w3school.com.cn/svg/svg_intro.asp
//SVG ---> 动画
地图资源可以在 https://www.amcharts.com/dl/javascript-maps/ 下载
里面包含世界各个国家的SVG地图 各个省份地图
34 个Path
23个省、4个直辖市、2个特别行政区、5个自治区
2014753635
分析地图
- 中国地图是34个省,那么实际上是通过34条path生成的.
那么把这些path封装成javabeen, 一条path就能代表一个省.
那么javabeen中应当有什么参数?
- path 路径
- 绘制的颜色
- 画的方法 draw
- 是否被选中的方法
起名 ProvinceBeen
代码具体实现
可交互的中国地图
第三步 利用Xml解析SVG的代码 封装成javaBean 最重要的得到Path
在自定义view中使用工具类
新建一个自定义View 名字叫做MyMapView
开启一个线程读取转换成的android使用的中国地图 svg文件.
第一步第二步 就不说了 这里需要注意 一定要去网站转换成android能够使用的代码 直接使用svg是网页版的 不是android版的
使用一个工具类PathParser 用作path 路径解析兼容类（兼容标准svg）
//异步读取svg文件
private void loadSVG(){
itemList = new ArrayList<>();
ThreadPoolUtils.execute(new Runnable() {
@Override
public void run() {
InputStream inputStream = context.getResources().openRawResource(R.raw.chinahigh);
DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance();//获取DocumentBuilderFactory
DocumentBuilder builder = null;
try {
builder = factory.newDocumentBuilder();//从factory中获取DocumentBuilder 实例
Document doc = builder.parse(inputStream);
Element rootElement = doc.getDocumentElement();//dom解析
NodeList items = rootElement.getElementsByTagName("path");//把所有包含path的节点拿出来
for (int i = 0; i < items.getLength(); i++) {
Element element = (Element) items.item(i);
String pathData = element.getAttribute("android:pathData");//读取path的数据
Path path = PathParser.createPathFromPathData(pathData);//通过工具类解析出Path
ProvinceBeen provinceBeen = new ProvinceBeen(path);
itemList.add(provinceBeen);
//重绘
handler.sendEmptyMessage(0);
}
} catch (Exception e) {
e.printStackTrace();
}
}
});
}
//设置颜色
Handler handler = new Handler() {
@Override
public void handleMessage(Message msg) {
super.handleMessage(msg);
if (itemList != null) {
int totalNumber = itemList.size();
for (int i = 0; i < totalNumber; i++) {
int color = Color.WHITE;
//每隔四个省换个颜色 这里随机分配颜色
int flag = i % 4;
switch (flag) {
case 1:
color = colorArray[0];
break;
case 2:
color = colorArray[1];
break;
case 3:
color = colorArray[2];
break;
default:
color = colorArray[3];
break;
}
//设置省的颜色
itemList.get(i).setDrawColor(color);
postInvalidate();//刷新
}
}
}
};
- 需要把每个省画出来
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (proviceList != null) {
canvas.scale(scale, scale);
for (Provice item : proviceList) {
if (item != selectItem) {
item.draw(canvas, paint, false);
}
}
if (selectItem != null) {
selectItem.draw(canvas, paint, true);
}
}
}
把数据存入list
ProvinceBeen provinceBeen = new ProvinceBeen(path);
itemList.add(provinceBeen);
javabeen
package android.chinamap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
/**
* @author liuml
* @explain 省信息
* @time 2018/2/28 15:03
*/
public class ProvinceBeen {
//路径
private Path path;
//绘制的颜色
private int drawColor;
public Path getPath() {
return path;
}
public void setPath(Path path) {
this.path = path;
}
public int getDrawColor() {
return drawColor;
}
public void setDrawColor(int drawColor) {
this.drawColor = drawColor;
}
public ProvinceBeen(Path path) {
this.path = path;
}
/**
* @param canvas
* @param paint
* @param isSelect 是否被选中
*/
public void draw(Canvas canvas, Paint paint, boolean isSelect) {
//真正的绘制
//区分选择和未被选择
if (isSelect) {
//绘制省份背景 因为是被选中的省份需要绘制有阴影
paint.setStrokeWidth(2);
paint.setColor(Color.BLACK);//设置黑色
paint.setStyle(Paint.Style.FILL);
/**
* setShadowLayer 这将在主层下面绘制一个阴影层，并指定
偏移，颜色，模糊半径。如果半径是0，那么阴影删除层。
*/
paint.setShadowLayer(8, 0, 0, 0xfffffff);
//直接绘制路径path
canvas.drawPath(path, paint);
//需要绘制两次 第一次绘制背景第二次绘制省份
//绘制省份
paint.clearShadowLayer();
paint.setColor(drawColor);//省份是省份本身的颜色
paint.setStyle(Paint.Style.FILL);
paint.setStrokeWidth(2);//阴影
canvas.drawPath(path, paint);
} else {
//没有被选中情况
paint.clearShadowLayer();//清除阴影
//绘制内容 填充部分
paint.setStrokeWidth(1);
paint.setStyle(Paint.Style.FILL);
paint.setColor(drawColor);
canvas.drawPath(path, paint);
//绘制边界线
paint.setStyle(Paint.Style.STROKE);
paint.setColor(0xFFD0E8F4);
canvas.drawPath(path, paint);
}
}
/**
* 判断是否点击区域
*
* @param x
* @param y
*/
public void isTouch(int x, int y) {
}
}
- 到现在可以把图显示出来了
下面要做的是点击后的处理 主要处理点击范围是否在区域内
在Javabeen中 判断是否点击区域的方法
/**
* 判断是否点击区域
*
* @param x
* @param y
*/
public boolean isTouch(int x, int y) {
//构建一个区域对象
RectF rectF = new RectF();
//把不规则区域 放入rectf中
path.computeBounds(rectF,true);
/**
* 将该区域设置为路径和剪辑所描述的区域。
如果结果区域为非空，则返回true。这产生一个地区
这和路径所绘制的像素是一样的
*(没有反混淆)。
*/
Region region = new Region();
region.setPath(path, new Region((int) rectF.left, (int) rectF.top, (int) rectF.right, (int) rectF.bottom));
//如果该区域包含指定的点，返回true
return region.contains(x, y);
}
下面就可以点击了
关于缩放比 参考了这个
https://blog.csdn.net/qq_18983205/article/details/77622961
private float scale = 0f;
private float mapWidth = 773.0f, mapHeight = 568.0f;
```
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int width = MeasureSpec.getSize(widthMeasureSpec);
int height = MeasureSpec.getSize(heightMeasureSpec);
scale = Math.min(width/mapWidth, height/mapHeight);
}
```
缩放比另外一种方式
通过遍历计算每个path 找到最左边.最上面,最右面,最下面的path 测量边距 这样就获得了上下左右的距离.就获得了整个地图的宽高
private float mapWidth = 773.0f, mapHeight = 568.0f;
实际就是这个 这样就可以算出比例了