🗺️ Make a map of Chiang Mai in JavaScript

1The page and the canvas

Make a folder called map and a file called index.html. This is the same skeleton as the space game. If you built that, you can copy it and change the title. 新建一个文件夹叫 map，里面一个 index.html。 骨架和太空游戏一样。做过那个的话，直接复制过来改标题就行。 สร้างโฟลเดอร์ชื่อ map และไฟล์ index.html โครงเหมือนเกมอวกาศ ถ้าทำอันนั้นแล้ว คัดลอกมาเปลี่ยนหัวเรื่องได้เลย

2What the numbers mean

Every place on Earth has two numbers. Latitude says how far north. Longitude says how far east. Chiang Mai is about 18.79 north and 98.99 east. 地球上每个地方都有两个数字。纬度说往北多远，经度说往东多远。 清迈大约是北纬 18.79、东经 98.99。 ทุกที่บนโลกมีตัวเลขสองตัว ละติจูดบอกว่าเหนือแค่ไหน ลองจิจูดบอกว่าตะวันออกแค่ไหน เชียงใหม่อยู่ประมาณ 18.79 เหนือ และ 98.99 ตะวันออก

Two more useful facts. One degree of latitude is always about 111 kilometres. One degree of longitude is 111 km at the equator but gets shorter as you go north, because the lines meet at the poles. In Chiang Mai it is about 105 km. 还有两个有用的事实：一度纬度总是约 111 公里。一度经度在赤道是 111 公里， 越往北越短，因为经线在两极汇合。在清迈大约是 105 公里。 อีกสองข้อที่มีประโยชน์: หนึ่งองศาละติจูดยาวประมาณ 111 กิโลเมตร เสมอ ส่วนหนึ่งองศาลองจิจูดยาว 111 กม. ที่เส้นศูนย์สูตร แต่สั้นลงเมื่อขึ้นเหนือ เพราะเส้นบรรจบกันที่ขั้วโลก ที่เชียงใหม่ยาวประมาณ 105 กม.

3The heart: turn a place into a point

This is the whole map, in two functions. toScreen turns a place into x and y. toMap turns x and y back into a place. Everything else in this tutorial only uses these two. 整张地图就在这两个函数里。toScreen 把地点变成 x 和 y， toMap 把 x 和 y 变回地点。这个教程剩下的部分只用这两个函数。 ทั้งแผนที่อยู่ในสองฟังก์ชันนี้ toScreen เปลี่ยนสถานที่เป็น x และ y toMap เปลี่ยน x และ y กลับเป็นสถานที่ ที่เหลือทั้งบทเรียนใช้แค่สองอันนี้

4The places — an array of objects

Now the data. An array of objects: many places, and each place is one thing with parts. Then one loop draws them all. 现在是数据：一个数组装很多对象——很多地点，每个地点是一个有各部分的东西。 然后一个循环把它们全画出来。 ทีนี้คือข้อมูล: อาร์เรย์ของอ็อบเจกต์ — หลายสถานที่ และแต่ละที่คือสิ่งเดียวที่มีหลายส่วน แล้วลูปเดียววาดทั้งหมด

5The moat and the river — lists of points

A line on a map is just an array of places joined in order. The old city moat is four corners joined into a square. The Ping river is seven points joined into a curve. 地图上的线只是一串按顺序连起来的地点。古城护城河是四个角连成方形， 滨河是七个点连成一条曲线。 เส้นบนแผนที่คืออาร์เรย์ของสถานที่ที่ต่อกันตามลำดับ คูเมืองเก่าคือสี่มุมต่อเป็นสี่เหลี่ยม แม่น้ำปิงคือเจ็ดจุดต่อเป็นเส้นโค้ง

6Zoom — one number changes everything

You already wrote zoom. It is view.zoom, sitting inside ppdX and ppdY. Change that one number, draw again, and the whole map grows. Nothing else needs touching. 缩放你已经写好了——就是 ppdX 和 ppdY 里的 view.zoom。 改这一个数字、重画一遍，整张地图就变大了。别的什么都不用动。 คุณเขียนซูมไว้แล้ว มันคือ view.zoom ที่อยู่ใน ppdX และ ppdY เปลี่ยนตัวเลขตัวเดียว วาดใหม่ แล้วทั้งแผนที่ก็ใหญ่ขึ้น ไม่ต้องแก้อะไรอีก

7Drag the map with your finger or mouse

Three events: press, move, let go. Remember where the press started, then move the view by the difference. One set of listeners covers the mouse and the finger, because we use pointer events. 三个事件：按下、移动、松开。记住按下的位置，然后按差值移动视图。 因为用的是 pointer 事件，一套监听器同时管鼠标和手指。 สามอีเวนต์: กด เลื่อน ปล่อย จำตำแหน่งที่กดไว้ แล้วเลื่อนมุมมองตามผลต่าง ชุดเดียวใช้ได้ทั้งเมาส์และนิ้ว เพราะเราใช้ pointer events

8The drawing tools: line, square, circle

Now the part you asked for. One variable remembers which tool is chosen. Press starts a shape, move changes it, let go saves it into the shapes array. 现在是重点部分。一个变量记住选了哪个工具：按下开始一个图形，移动改变它，松开把它存进 shapes 数组。 มาถึงส่วนที่รอ ตัวแปรหนึ่งตัวจำว่าเลือกเครื่องมือไหน กดเริ่มรูป เลื่อนเปลี่ยนรูป ปล่อยแล้วเก็บลงอาร์เรย์ shapes

9Real kilometres, and saving your work

The earth is round, so you cannot just subtract the numbers. This is the haversine formula. 6371 is the radius of the earth in kilometres. It gives the straight line, like a bird flies — the road is always longer. 地球是圆的，所以不能直接相减。这是 haversine（半正矢）公式， 6371 是地球半径（公里）。它算的是直线距离，像鸟飞的那样——走路的距离总是更长。 โลกกลม จึงลบตัวเลขตรง ๆ ไม่ได้ นี่คือสูตร haversine ส่วน 6371 คือรัศมีโลกเป็นกิโลเมตร มันให้ระยะเส้นตรงอย่างที่นกบิน — ระยะถนนยาวกว่าเสมอ