หน้าแรก>แหล่งข้อมูลการสร้างเว็บไซต์>ข้อมูลเว็บไซต์
ดาวน์โหลด

แผนที่กระเบื้องเปรียบเทียบ

สถานะการสร้าง

เว็บแอปพลิเคชันหน้าเดียวสำหรับการเปรียบเทียบเลเยอร์ไทล์กับเลเยอร์ดาวเทียมพื้นหลัง

สาธิต

แผนที่กระเบื้องเปรียบเทียบ-demo.mp4

ตัวอย่างสด

  • เอดินบะระ, สกอตแลนด์
  • เอดินบะระ สกอตแลนด์ (เวลาพลบค่ำ)
  • บร็อกซ์เบิร์น, สกอตแลนด์
  • เคเทลเมียร์ เนเธอร์แลนด์
  • มาร์กเกอร์ วาดเดน เนเธอร์แลนด์
  • โคเบลนซ์, เยอรมนี
  • ชายแดนเยอรมนี/เนเธอร์แลนด์

กำลังติดตั้งแอป

หลังจากโคลนที่เก็บนี้แล้ว ให้รัน: 

$ cd map-tile-compare
$ npm install
$ npm run build
$ npm run serve

สิ่งนี้ควรเริ่มต้นเซิร์ฟเวอร์ localhost ซึ่งโดยทั่วไป http://localhost:5000

เพื่อให้หน้าเว็บโหลด คุณจะต้องเพิ่ม URL ต่อท้ายไฟล์กำหนดค่าเข้ากับ URL 

 http://localhost:5000/#https://example.com/path/to/config.json

การสร้างการกำหนดค่าแผนที่

ข้อมูลแผนที่เป็นสตริง JSON ที่ถูกบีบอัดซึ่งจัดเก็บไว้ในแฮชของ URL

โฮสต์ไฟล์ JSON ต่อไปนี้บนเว็บไซต์และอัปเดตพร็อพเพอร์ตี้แต่ละรายการตามที่คุณต้องการ: 

{
  "name" : " London " ,
  "beforeStyle" : " mapbox://styles/mapboxUsername/styleId " ,
  "beforeStyleAccessToken" : " xx.xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.xxxxxxxxxxxxx-xxxxxxxx " ,
  "beforeStyleBeforeLayerId" : " tunnel-street-minor-low " ,
  "sourceTiles" : " https://example.com/tiles/{z}/{x}/{y}.png " ,
  "sourceTileScheme" : " tms " ,
  "sourceTileSize" : 256 ,
  "sourceMinZoom" : 9 ,
  "sourceMaxZoom" : 15 ,
  "sourceBounds" : [ -0.234 , 51.454 , -0.025 , 51.562 ],
  "referencePhotoImageUrl" : " https://example.com/previewImage.jpg "
}

ตารางด้านล่างอธิบายความหมายของแต่ละคุณสมบัติ:

คุณสมบัติ คำอธิบาย
name ชื่อของแผนที่ สิ่งนี้จะปรากฏบนหน้าจอเริ่มต้น
beforeStyle URL รูปแบบ mapbox สำหรับแผนที่ "ก่อน" โดยทั่วไปจะเป็นสไตล์ "ดาวเทียม"
beforeStyleAccessToken โทเค็นการเข้าถึง mapbox สำหรับรูปแบบแผนที่ "ก่อน"
beforeStyleBeforeLayerId รหัสเลเยอร์ภายในรูปแบบแผนที่ "ก่อน" ที่คุณต้องการแทรกเลเยอร์แผนที่ "หลัง" โดยปกติจะเป็นเลเยอร์ที่อยู่เหนือเลเยอร์แรสเตอร์
sourceTiles URL ไปยังชิ้นส่วนแผนที่ของคุณ
sourceTileScheme สคีมาสำหรับชิ้นส่วนแผนที่ของคุณ "xyz" หรือ "tms" ก็ได้
sourceTileSize ขนาดภาพของชิ้นส่วนแผนที่เป็นพิกเซล
sourceMinZoom ระดับการซูมขั้นต่ำของชิ้นส่วนแผนที่ของคุณ
sourceMaxZoom ระดับการซูมสูงสุดของไทล์แผนที่ของคุณ
sourceBounds กล่องขอบเขตของแผ่นแผนที่ของคุณ ตามลำดับ: ลองจิจูดซ้าย, ละติจูดล่าง, ลองจิจูดขวา, ละติจูดบน
referencePhotoImageUrl URL ไปยังภาพตัวอย่างที่จะแสดงก่อนโหลดแผนที่

หลังจากสร้าง JSON แล้ว คุณมีสองตัวเลือก:

  • จัดเก็บ JSON บนโฮสต์ภายนอก
  • เก็บไฟล์ JSON ในไดเร็กทอรี public/ และรัน npm run build จากนั้นคุณสามารถเข้าถึงไฟล์ได้ทาง http://localhost:5000/yourConfig.json

รับ URL ไปยัง JSON และต่อท้าย URL โฮสต์ของแอป 

 http://locahost:5000/#http://localhost/5000/config.json

การพัฒนา 

$ npm run dev

ผ้าสำลี 

$ npm run lint

การทดสอบ

หากต้องการรันการทดสอบตั้งแต่ต้นจนจบ ให้รันในคอนโซลเดียว: 

$ npm run build:test
$ npm run serve

build:test จะสร้างแอปด้วย sourcemaps ซึ่งจะช่วยให้สามารถครอบคลุมโค้ดได้ในภายหลัง

จากนั้นในคอนโซลอื่นให้รัน: 

$ export CYPRESS_MAP_TILE_COMPARE_HOST= ' http://localhost:5000/ '
$ npm run test:e2e

ความครอบคลุมของโค้ดจะถูกสร้างขึ้นโดยอัตโนมัติ และสามารถดูได้ใน coverage/

หากต้องการดูการทดสอบไซเปรสที่ทำงานจริงในเบราว์เซอร์ ให้รัน: 

$ npx cypress open
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด