• 【 D3.js 高级系列 — 7.0 】 标注地点


    有时须要告诉用户地图上的一些目标,假设该目标是仅仅须要一个坐标就能表示的,称其为“标注”。

    701

    1. 标注是什么

    标注。是指地图上仅仅须要一个坐标就可以表示的元素。比如,在经纬度(116, 39)处画一个圆,在(108, 30)处画一个符号,这些都属于标注,也能够将标注理解为“点元素”。

    我们知道。仅仅知道经纬度是不能直接在地图上作图的,须要先用投影函数将其转换成像素坐标。

    比如。假设要在中国地图上标出“北京”的位置。可是不知道北京的像素坐标。北京的经纬度可通过查询得知是(116.3, 39.9),将此值作为投影函数的參数就可以得到像素坐标。事实上,GeoJSON文件的地理信息也是经纬度。也是经过投影函数转换后得到了像素坐标。因此。假设使用同一个投影函数,那么转换后的北京坐标就可以直接在地图上绘制。

    2. 在D3的地图上怎样标注

    首先,定义一个投影函数例如以下。

    var projection = d3.geo.mercator()
    			.center([107, 31])
    			.scale(600)
        			.translate([width/2, height/2]);

    其次。使用此投影定义地理路径生成器 d3.geo.path,用于绘制地图。

    var path = d3.geo.path()
    				.projection(projection);

    然后,以北京的经纬度作为投影的參数,得到北京的像素坐标。

    var peking = [116.3, 39.9];
    var proPeking = projection(peking);

    最后,用上面得到的像素坐标绘制一个圆,该圆就正好位于北京的位置。

    svg.append("circle")
    	.attr("class","point")
    	.attr("cx",proPeking[0])
    	.attr("cy",proPeking[1])
    	.attr("r",8);

    3. 在中国地图上标注五个地点

    以下制作一个样例。要求例如以下:

    在中国地图上标注出五个城市的位置。并在各标注处加入一张该城市的图片。五个城市各自是北京、上海、桂林、乌鲁木齐、拉萨。

    首先。搜集五个城市的经纬度和图片。在网上可查到。将图片保存在网页HTML文件同一文件夹下的img文件夹里,然后写一个JSON文件,将经纬度信息和图片路径信息汇集起来。JSON文件内容例如以下。

    {
    "name": "地点",
    "location":
    [
    		{
    			"name":"北京",
    			"log":"116.3",
    			"lat":"39.9",
    			"img":"img/beijing.png"
    		},
    		{
    			"name":"上海",
    			"log":"121.4",
    			"lat":"31.2",
    			"img":"img/shanghai.png"
    		},
    /***** 省略 *****/
    ]
    }

    图片的数据是不存在JSON文件中的,仅仅保存路径就可以。

    绘制完地图后。调用d3.json请求places.json文件,并通过绑定数组location加入足够数量的分组元素<g>,每一个分组代表一个城市。利用分组元素<g>的transform属性可将标注点平移到指定位置,平移量可通过投影函数计算城市的经纬度得到。

    然后,向<g>里分别加入圆形<circle>和图片<image>。

    <image>是SVG的图片元素,仅仅须要五个属性就够了。

    <image xlink:href="image.png" x="200" y="200" width="100" height="100">
    </image>

    当中,

    • xlink:href:图片名称或图片网址
    • x:图片坐上角 x 坐标
    • y:图片坐上角 y 坐标
    • width:图片宽度
    • height:图片高度

    请求文件及插入标注点的代码例如以下。

    d3.json("places.json", function(error, places ) {
    
            //插入分组元素
    	var location = svg.selectAll(".location")
    		.data(places.location)
    		.enter()
    		.append("g")
    		.attr("class","location")
    		.attr("transform",function(d){
    			//计算标注点的位置
    			var coor = projection([d.log, d.lat]);
    			return "translate("+ coor[0] + "," + coor[1] +")";
    		});
    
            //插入一个圆
            location.append("circle")
    		.attr("r",7);
    
    	//插入一张图片
    	location.append("image")
    			.attr("x",20)
    			.attr("y",-40)
    			.attr("width",90)
    			.attr("height",90)
    			.attr("xlink:href",function(d){
    				return d.img;
    			});
    	});

    4. 结果

    结果本文开头的图片所看到的。

    完整代码打开以下链接。右键选择查看源码:

    http://www.ourd3js.com/demo/G-7.0/mappoint.html

    中国地图的TopoJSON文件:china.topojson

    南海诸岛:southchinasea.svg

    指定图片路径的JSON文件:places.json

    谢谢阅读。

     

    文档信息

  • 相关阅读:
    终于回来了&&邮递员送信
    发射站
    黑匣子
    利维坦——(1)
    预告
    整除(水题)
    BZOJ054_移动玩具_KEY
    BZOJ4034_树上操作_KEY
    树链剖分学习&BZOJ1036
    BZOJ1208_宠物收养所_KEY
  • 原文地址:https://www.cnblogs.com/slgkaifa/p/6894947.html
Copyright © 2020-2023  润新知