在map上标记point
来源:互联网 发布:易视网远程监控软件 编辑:程序博客网 时间:2024/05/17 07:02
先说下最近学习的一些经验,
1越来越觉得我们在学习每个东西的时候应该打破砂锅问到底,为什么要这样做?这样做有什么用?在网页上呈现的是什么?将每句代码的作用都搞清楚,这样才能在组合的时候我们能用的很放心。
2.还要一个就是数据格式的问题,在学习别人代码的时候要搞清楚别人加载的文件数据格式是什么,其实在加载完数据后,作者操作的本质就是不断提取加载的数据,组合成自己所需要的数据格式,在地图中这一点尤为重要,比如说path,我们需要geo形式的数据,但是我们只要topojson格式,所以就需要转换一下了。
3.在学习时理解第一,记忆第二,对代码的每句作用进行肢解,试着总体上还原整篇代码的写作策略,然后自己写,不要对着别人的敲,自己试着把思路过一遍敲出来,不会的跳过去,一遍完整下来再去调试修改。
<style type="text/css"> circle { fill:red; } path.province{ /*stroke: pink;*/ }</style><body></body><script type="text/javascript"> var width=1000,height=1000; var svg=d3.select("body") .append("svg") .attr("width",width) .attr("height",height)//geo是三维的,需要转换为二维的,所以需要定义投影方式 var projection=d3.geo.mercator() .center([107,31]) .scale(800) .translate([width/2,height/2]) var path=d3.geo.path().projection(projection) d3.json("china.topojson",function(error,toporoot){ //将topojson转换为geojson 需要额外mike提供的js文件 var georoot = topojson.feature(toporoot,toporoot.objects.china); var china=svg.append("g") var province=svg.selectAll("path .province") .data(georoot.features) .enter() .append("path") .attr("class","province") .style("fill","steelblue") .attr("d",path) d3.json("places.json",function(error,root){ //将g元素移动到点所在的位置 var points=svg.selectAll("g .circle") .data(root.location) .enter() .append("g") .attr("class","circle") .attr("transform",function(d,i){ var d=projection([d.log,d.lat]) return "translate("+d[0]+","+d[1]+")"; }) points.append("circle") .attr("r",7) points.append("image") .attr("x",-20) .attr("y",20) .attr("width",60) .attr("height",60) .attr("xlink:href",function(d){ return d.img; }) }) })</script>
这篇代码总体思路:
1.先画出china
1)因为geo三维,所以定义projection转换二维
2)绑定geo.path生成地图
2.circle
1)将g元素移动到特定位置
2)g元素中添加circle
3)g元素中添加image标签
下边是point的数据格式
下图是转换后georoot的数据,我们可以看到features中包含了34个省的数据
最后效果
阅读全文
0 0
- 在map上标记point
- javascript 在图片上双击做标记(类似google map在地图上标记)
- 在地图上标记
- [Asp.Net WinForm/Google]在Googel Map上放置多个Marker标记 /API3版
- 在Google Earth和google map上用KML文件进行批量标记
- 在Ubuntu手机上利用Map API来显示地图并动态显示标记
- android map开发4 删除地图上的标记
- 三种方法在玻璃上标记
- 在AChartEngine上绘图,手指标记当前位置
- 如何在Google Map中处理大量标记
- 在google map 标记位置并画路径
- android在Map上划线
- google map 标记添加
- 在mappagelayout上显示图片,标记指定地点:方法1
- 在mappagelayout上显示图片,标记指定地点:方法2
- 在一张静态地图图片上添加标记,求思路
- 用ItemizedOverlay在mapview上的标记弹出泡泡
- C# 如何在图像上做(矩形/圆)标记
- 逻辑回归--sklearn基本使用
- 作为程序员,我们应不应学好英语?
- Linux 新增开机启动服务
- Django中的数据库模型类-models.py(一对一的关系)
- keras实现VGG16 CIFAR10数据集
- 在map上标记point
- Elasticsearch的PHP的API使用(一)
- 使用js在网页中实现一个计算当年还剩多少时间的倒数计时程序
- 编程能力七段论(腾讯推送)
- wireshark基本用法及过虑规则
- 公式宝典之颜色混合模式公式
- 文章标题
- 用机器学习解决问题的思路
- Mysql 数据库迁移