基于canvas的GIS组件.zip资源-CSDN文库

共5个文件

js：2个

png：1个

json：1个

GIS

需积分: 5 136 浏览量 2024-05-25 21:19:52 上传评论收藏 297KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

基于canvas的GIS组件.zip （5个子文件）

content

jGraphic.js 12KB

jquery.min.js 93KB

images

static.png 3KB

json

china.json 658KB

demo.html 3KB

<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="panel" style="height: 820px;border:1px solid #123456;width: 1300px"></div> </div> <div class="button"> <input value="现有数据画点" type="button" onclick="dataPoint()"/> <input value="现有数据画线" type="button" onclick="dataLine()"/> <input value="现有数据画面" type="button" onclick="dataPolygon()"/> <input value="画中国地图" type="button" onclick="drowChina()"/> <input value="设置可编辑" type="button" onclick="setEdit(true)"/> <input value="不可编辑" type="button" onclick="setEdit(false)"/> <input value="开始画点" type="button" onclick="addPoint()"/> <input value="开始画线" type="button" onclick="addLine()"/> <input value="开始画面" type="button" onclick="addPolygon()"/> <input value="清除画布" type="button" onclick="clearCanvas()"/> </div> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jGraphic.js"></script> <script type="text/javascript"> var g = new jGraphic({ container:"panel", width:1300, height:800 }); g.showStatus(); //g.drowPoint({url:"images/static.png",x:20,y:50}); //g.drowArc({radius:100,x:20,y:50}); function dataPoint(){ var data = [{x:20,y:50},{x:30,y:60},{x:40,y:70},{x:50,y:80}]; while(data.length){ g.drowArc(data.shift()); } } function dataLine(){ var data = [{x:20,y:50},{x:20,y:60},{x:20,y:70},{x:20,y:80}]; g.drowLine(data); } function dataPolygon(){ var data = [{x:20,y:50},{x:30,y:60},{x:40,y:70},{x:50,y:80},{x:60,y:150}]; g.drowPolygon(data); } function addPoint(){ g.addPoint(); } function addLine(){ g.addLine(); } function addPolygon(){ g.addPolygon(); } function clearCanvas(){ g.clearCanvas(); g.clearCanvasH(); } function setEdit(flag){ flag?function(){ g.setEditeStatus(); alert("您可以对本图层进行编辑"); }():function(){ g.unbind(); g.setVisibleStatus(); alert("您不可以再编辑图层"); }() } function drowChina(){ var color = ["#123456","#234567","#345678","#561196","#672832","#964521","#359675"]; $.getJSON('json/china.json',function(data){ $.each(data.features,function(n,v){ var coor = []; $.each(v.geometry.coordinates[0],function(i,j){ coor.push(g.geoToScreen({x:j[0],y:j[1]})); }); g.setFillStyle(color[~~(Math.random()*7)]); g.drowPolygon(coor); }); }); } </script> </body> </html>

评论收藏

内容反馈