ycc-engine
Version:
Mini and powerful canvas engine for creating App or Game.
92 lines (77 loc) • 2.36 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name=viewport content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
<title>多边形-中国地图</title>
<link rel="stylesheet" href="../style.css">
</head>
<body>
<div class="return-btn">
<a href="../">
返回首页
</a>
</div>
<div class="tip">
<h3>示例说明：</h3>
<div>
1、这个示例使用底层提供的多边形绘制一个中国地图。<br>
2、地图的各个区域都是可以点击的。<br>
3、此地图支持移动端和PC端。<br>
</div>
<br><br>
</div>
<div id="canvas">
</div>
<div id="area">
</div>
</body>
</html>
<script src="http://localhost:9000/livereload.js"></script>
<script src="../common.js"></script>
<script src="../../build/ycc.js"></script>
<script>
var ycc = new Ycc();
var canvas = ycc.createCanvas({width:350,height:250,dpiAdaptation:true});
document.getElementById("canvas").appendChild(canvas);
ycc.bindCanvas(canvas);
// 地图的偏移量
var offsetX = 70; // 临界值为 73.4766
var offsetY = 60; // 临界值为 53.5693
// 缩放倍数
var scale=5;
// 新建图层
var layer = ycc.layerManager.newLayer({enableEventManager:true});
ycc.ajax.get('./china.json',function (data) {
data = JSON.parse(data);
data.features.forEach(function (item) {
// 河北等省为MultiPolygon，取第一个多边形直接绘制
var provinceDots = item.geometry.type==="MultiPolygon"?item.geometry.coordinates[0][0]:item.geometry.coordinates[0];
var dots = provinceDots.map(function (dot) {
//x坐标去除偏移量，y坐标加上偏移量，并做镜像处理
return new Ycc.Math.Dot((dot[0]-offsetX)*scale,(offsetY-dot[1])*scale);
});
var polygon = new Ycc.UI.Polygon({
coordinates:dots,
fill:false,
fillStyle:"rgb(0,88,160)",
noneZeroMode:2,
userData:{area:item},
strokeStyle:"rgb(0,88,160)",
ontap:onEvent,
onmousemove:onEvent,
});
layer.addUI(polygon);
ycc.layerManager.reRenderAllLayerToStage();
// 事件处理：填充选中的省份
function onEvent(e) {
this.belongTo.uiList.forEach(function (t) {
t.fill=false;
});
this.fill=true;
ycc.layerManager.reRenderAllLayerToStage();
document.getElementById('area').innerHTML=this.userData.area.properties.name;
}
});
});
</script>