ดาวน์โหลด ol mapbox style - ol mapbox style source download

สไตล์ ol-mapbox

สร้างแผนที่ OpenLayers จากวัตถุข้อกำหนดสไตล์ MAPBOX

เริ่มต้น

รับความประทับใจในสิ่งที่ห้องสมุดนี้ทำโดยการสำรวจตัวอย่างสด

การติดตั้ง

หากต้องการใช้ไลบรารีในแอปพลิเคชันที่มีสภาพแวดล้อม dev ที่ใช้ NPM ติดตั้งด้วย

 npm install ol-mapbox-style

เมื่อติดตั้งด้วยวิธีนี้เพียงแค่นำเข้าโมดูลสไตล์ OL-Mapbox เช่นในตัวอย่างการใช้งานด้านล่าง หากต้องการใช้งานสร้างแบบสแตนด์อโลนของ OL-MAPBOX เพียงแค่รวม 'dist/olms.js' olms.apply() หน้า HTML olms.applyBackground() คุณและเข้าถึงฟังก์ชั่นที่ส่งออกจากวัตถุ Global olms . โปรดทราบว่าการสร้างแบบสแตนด์อโลนขึ้นอยู่กับการสร้างแบบเต็มของ OpenLayers

ol-mapbox สไตล์> = v9 ต้องใช้เวอร์ชัน OpenLayers> = 7

V8 สไตล์ Ol-Mapbox ต้องใช้เวอร์ชัน OpenLayers> = 6.13.0 <7

การใช้งาน

ดูส่วน API สำหรับเอกสารฉบับเต็ม

รหัสด้านล่างสร้างแผนที่ OpenLayers จากสไตล์ V9 Bright ของ MapBox โดยใช้ https:// url:

 import { apply } from 'ol-mapbox-style' ;

apply ( 'map' , 'https://api.mapbox.com/styles/v1/mapbox/bright-v9?access_token=YOUR_MAPBOX_TOKEN' ) ;

ในการกำหนดสไตล์และแหล่งที่มาให้กับเลเยอร์เท่านั้นให้ใช้ applyStyle() mapbox:// URL ได้รับการสนับสนุนด้วย:

 import { applyStyle } from 'ol-mapbox-style' ;
import VectorTileLayer from 'ol/layer/VectorTile.js'

const layer = new VectorTileLayer ( { declutter : true } ) ;
applyStyle ( layer , 'mapbox://styles/mapbox/bright-v9' , { accessToken : 'YOUR_MAPBOX_TOKEN' } ) ;

ในการใช้คุณสมบัติของเลเยอร์พื้น background ของสไตล์ MAPBOX กับแผนที่หรือเลเยอร์ VectorTile ให้ใช้ฟังก์ชัน applyBackground()

นอกจากนี้ยังมี API ระดับต่ำ ในการสร้างฟังก์ชั่นสไตล์สำหรับเวกเตอร์ OpenLayers แต่ละตัวหรือชั้นกระเบื้องเวกเตอร์ให้ใช้โมดูล stylefunction :

 import { stylefunction } from 'ol-mapbox-style' ;
import VectorLayer from 'ol/layer/Vector.js' ;
import VectorSource from 'ol/source/Vector.js' ;
import GeoJSON from 'ol/format/GeoJSON.js' ;

const layer = new VectorLayer ( {
  source : new VectorSource ( {
    format : new GeoJSON ( ) ,
    url : 'data/states.geojson'
  } )
} ) ;

fetch ( 'data/states.json' ) . then ( function ( response ) {
  response . json ( ) . then ( function ( glStyle ) {
    stylefunction ( layer , glStyle , 'states' ) ;
  } ) ;
} ) ;

โปรดทราบว่า API ระดับต่ำนี้ไม่ได้สร้างแหล่งที่มาสำหรับเลเยอร์และจำเป็นต้องมีการทำงานพิเศษเพื่อตั้งค่าการจัดการสไปรต์สำหรับสไตล์ที่ใช้ไอคอน

หมายเหตุความเข้ากันได้

การจัดการแบบอักษร

ol-mapbox-style ไม่สามารถใช้ Glyphs PBF/SDF สำหรับคุณสมบัติเค้าโครง text-font ตามที่กำหนดไว้ในข้อกำหนดสไตล์ MAPBOX แต่ขึ้นอยู่กับแบบอักษรเว็บ ol:webfonts สามารถตั้งค่าบนรูทของวัตถุสไตล์เพื่อระบุตำแหน่งสำหรับเว็บฟอนต์เช่น

 {
  "version" : 8 ,
  "metadata" : {
    "ol:webfonts" : "https://my.server/fonts/{font-family}/{fontweight}{-fontstyle}.css"
  }
  // ...
}

ในทางเลือกหนึ่งตัวเลือก webfonts ชั่น apply() หรือ applyStyle() สามารถใช้งานได้

ตัวยึดตำแหน่งต่อไปนี้สามารถใช้ใน URL เทมเพลต:

{font-family} : CSS Font Family แปลงเป็นตัวพิมพ์เล็ก, ช่องว่างแทนที่ด้วย-, เช่น noto-sans
{Font+Family} : CSS Font Family ในกรณีดั้งเดิม, ช่องว่างแทนที่ด้วย+, เช่น noto+sans
{fontweight} : CSS Font Weight (Numeric), เช่น 400, 700
{fontstyle} : รูปแบบตัวอักษร CSS เช่นปกติ, italic
{-fontstyle} : รูปแบบตัวอักษร CSS นอกเหนือจากสตริงปกติเช่น -italic หรือ empty String สำหรับปกติ

หากไม่มี metadata['ol:webfonts'] มีอยู่ในวัตถุสไตล์ฟอนต์ฟอนต์จะถูกใช้ นอกจากนี้ยังเป็นไปได้ที่แอปพลิเคชันจะโหลดแบบอักษรอื่น ๆ โดยใช้ CSS หากตัวอักษรมีอยู่แล้วในเบราว์เซอร์ ol-mapbox-style จะไม่โหลด

เนื่องจากความแตกต่างนี้สแต็กแบบอักษรจึงแตกต่างจากที่กำหนดไว้เล็กน้อยในสเป็ค: สไตล์และน้ำหนักที่นำมาจากตัวอักษรหลัก (เช่นอันแรกในสแต็กแบบอักษร) แบบอักษรที่ตามมาในสแต็กแบบอักษรจะใช้เฉพาะเมื่อตัวอักษรหลักไม่พร้อมใช้งาน/โหลดและจะใช้กับสไตล์และน้ำหนักของแบบอักษรหลัก

การสร้างห้องสมุด

 npm run build

ไฟล์การแจกจ่ายที่ได้จะอยู่ในโฟลเดอร์ dist/ หากต้องการดูไลบรารีในการดำเนินการให้ไปที่ dist/index.html

เพื่อเรียกใช้การทดสอบในพื้นที่ให้เรียกใช้

 npm test

สำหรับการดีบักการทดสอบในเบราว์เซอร์ Run

 npm run karma

และเปิดเบราว์เซอร์บนโฮสต์และพอร์ตที่ระบุไว้ในเอาต์พุตคอนโซล (โดยปกติจะเป็น http: // localhost: 9876/) และคลิกปุ่ม 'ดีบัก' เพื่อไปที่สภาพแวดล้อมการดีบัก

API

สไตล์ ol-mapbox • เอกสาร

<pronny>

ดัชนี

การเชื่อมต่อ

ApplyStyleOptions
FeatureIdentifier
ตัวเลือก
ตัวเลือก

ประเภทนามแฝง

ResourceType

สไตล์ ol-mapbox • เอกสาร

อินเทอร์เฟซ: ApplyStyleOptions

คุณสมบัติ

ชั้น

เลเยอร์ : string []

เลเยอร์ หากไม่มีแหล่งที่มาเลเยอร์ที่มี ID ที่ให้ไว้จะถูกนำมาใช้จากอาร์เรย์ layers ของสไตล์ เลเยอร์ทั้งหมดต้องใช้แหล่งข้อมูลเดียวกัน

แหล่งที่มา

ที่มา : string

แหล่งที่มา. ค่าเริ่มต้นคือ '' ซึ่งเป็นสาเหตุของแหล่งแรกในสไตล์ที่จะใช้

อัปเดตแหล่งข้อมูล

อัปเดตแหล่งข้อมูล : boolean

อัปเดตหรือสร้างแหล่งเลเยอร์เวกเตอร์ (กระเบื้อง) พร้อมพารามิเตอร์ที่ระบุไว้สำหรับแหล่งที่มาในคำจำกัดความสไตล์ MAPBOX

สไตล์ ol-mapbox • เอกสาร

อินเทอร์เฟซ: FeatureIdentifier

คุณสมบัติ

รหัสประจำตัว

ID : string | number

รหัสคุณสมบัติ

แหล่งที่มา

ที่มา : string

รหัสแหล่งที่มา

สไตล์ ol-mapbox • เอกสาร

อินเตอร์เฟส: ตัวเลือก

คุณสมบัติ

accesstoken

AccessToken : string

โทเค็นการเข้าถึงสำหรับสไตล์ MAPBOX ของคุณ สิ่งนี้จะต้องมีไว้สำหรับ mapbox:// url สไตล์ สำหรับ https:// และ URL อื่น ๆ คีย์การเข้าถึงใด ๆ จะต้องเป็นพารามิเตอร์การสืบค้นสุดท้ายของ URL สไตล์

พื้นหลัง

พื้นหลัง : false | BackgroundColor

สีพื้นหลังสำหรับเลเยอร์ หากไม่ได้ระบุพื้นหลังจากวัตถุสไตล์ MAPBOX จะถูกใช้ ตั้งค่าเป็น false เพื่อป้องกันไม่ให้พื้นหลังของ Mapbox ใช้

ชื่อชั้นเรียน

className : string

ชื่อคลาส CSS ที่จะตั้งค่าเป็นองค์ประกอบเลเยอร์

ความไม่ลงรอยกัน

declutter : boolean

ภาพและข้อความ Decluttering ถูกนำไปใช้กับรูปแบบภาพและข้อความทั้งหมดของเลเยอร์เวกเตอร์และ vectortile ทั้งหมดที่กำหนดให้เป็น true ลำดับความสำคัญถูกกำหนดโดยดัชนี z ของเลเยอร์ zIndex ของสไตล์และลำดับการแสดงผลของคุณสมบัติ ดัชนี Z ที่สูงขึ้นหมายถึงลำดับความสำคัญที่สูงขึ้น ภายในดัชนี z เดียวกันคุณลักษณะที่แสดงผลก่อนที่อื่นจะมีลำดับความสำคัญสูงกว่า

ในฐานะที่เป็นคุณสมบัติการปรับให้เหมาะสมจากเลเยอร์ที่มี className เดียวกันนั้นจะแสดงผลเหนือรูปแบบการเติมและจังหวะของเลเยอร์ทั้งหมดโดยไม่คำนึงถึงดัชนี Z หากต้องการยกเลิกพฤติกรรมนี้และวางคุณสมบัติ declutterd ด้วยเลเยอร์ของตัวเองกำหนดค่าเลเยอร์ด้วย className อื่นนอกเหนือจาก ol-layer

ขอบเขต

ขอบเขต : Extent

ขอบเขตขอบเขตสำหรับการเรนเดอร์เลเยอร์ เลเยอร์จะไม่แสดงผลนอกขอบเขตนี้

ชั้น

เลเยอร์ : string []

จำกัด การแสดงผลในรายการเลเยอร์ที่รวมอยู่ เลเยอร์ทั้งหมดจะต้องแบ่งปันแหล่งเวกเตอร์เดียวกัน หากสไตล์ของคุณใช้มากกว่าหนึ่งแหล่งคุณต้องใช้คุณสมบัติ source หรือคุณสมบัติ layers เพื่อ จำกัด การแสดงผลของแหล่งเวกเตอร์เดียว

แผนที่

แผนที่ : Map

ตั้งค่าเลเยอร์เป็นซ้อนทับบนแผนที่ แผนที่จะไม่จัดการเลเยอร์นี้ในคอลเลกชันเลเยอร์และเลเยอร์จะแสดงผลด้านบน สิ่งนี้มีประโยชน์สำหรับเลเยอร์ชั่วคราว วิธีมาตรฐานในการเพิ่มเลเยอร์ลงในแผนที่และจัดการโดยแผนที่คือการใช้ map.addLayer()

การแก้ปัญหาสูงสุด

MaxResolution : number

ความละเอียดสูงสุด (พิเศษ) ด้านล่างซึ่งเลเยอร์นี้จะมองเห็นได้ หากไม่มีการกำหนด maxResolution และ minZoom maxResolution ของเลเยอร์จะตรงกับ minzoom ของแหล่งที่มาของสไตล์

maxzoom

MaxZoom : number

ระดับการซูมมุมมองสูงสุด (รวม) ซึ่งเลเยอร์นี้จะมองเห็นได้

การแก้ปัญหา

Minresolution : number

ความละเอียดขั้นต่ำ (รวม) ซึ่งเลเยอร์นี้จะมองเห็นได้

minzoom

minzoom : number

ระดับการซูมมุมมองขั้นต่ำ (พิเศษ) ด้านบนซึ่งเลเยอร์นี้จะมองเห็นได้ หากไม่มีการกำหนด maxResolution หรือ minZoom minZoom ของเลเยอร์จะตรงกับ minzoom ของแหล่งที่มาของสไตล์

ความทึบแสง

ความทึบ : number

ความทึบ (0, 1)

โหลดล่วงหน้า

โหลดล่วงหน้า : number

โหลดล่วงหน้า โหลดกระเบื้องความละเอียดต่ำจนถึงระดับ preload 0 หมายถึงไม่มีการโหลดล่วงหน้า

คุณสมบัติ

คุณสมบัติ : object

คุณสมบัติที่สังเกตได้โดยพลการ สามารถเข้าถึงได้ด้วย #get() และ #set()

ผู้เล่นบัฟเฟอร์

RenderBuffer : number

บัฟเฟอร์เป็นพิกเซลรอบ ๆ ขอบเขตกระเบื้องที่ใช้โดยการแสดงผลเมื่อได้รับคุณสมบัติจากกระเบื้องเวกเตอร์สำหรับการเรนเดอร์หรือการตรวจจับ ค่าที่แนะนำ: กระเบื้องเวกเตอร์มักจะสร้างขึ้นด้วยบัฟเฟอร์ดังนั้นค่านี้ควรตรงกับบัฟเฟอร์ที่เป็นไปได้ที่ใหญ่ที่สุดของกระเบื้องที่ใช้แล้ว อย่างน้อยก็ควรมีขนาดของสัญลักษณ์จุดที่ใหญ่ที่สุดหรือความกว้างของเส้น

Rendermode

RenderMode : VectorTileRenderType

โหมดเรนเดอร์สำหรับกระเบื้องเวกเตอร์:

'hybrid' : องค์ประกอบรูปหลายเหลี่ยมและเส้นจะแสดงเป็นภาพดังนั้นพิกเซลจะถูกปรับขนาดระหว่างภาพเคลื่อนไหวซูม สัญลักษณ์จุดและข้อความมีการแสดงผลอย่างถูกต้องเป็นเวกเตอร์และสามารถอยู่ตรงบนมุมมองที่หมุนได้
'vector' : ทุกอย่างกลายเป็นเวกเตอร์ ใช้โหมดนี้สำหรับประสิทธิภาพที่ดีขึ้นบนเลเยอร์กระเบื้องเวกเตอร์ที่มีคุณสมบัติที่แสดงผลเพียงไม่กี่อย่าง (เช่นสำหรับการเน้นชุดย่อยของคุณสมบัติของชั้นอื่นที่มีแหล่งเดียวกัน)

การสั่งซื้อ

RenderOrder : OrderFunction

สั่งซื้อ ฟังก์ชั่นที่จะใช้เมื่อเรียงลำดับคุณสมบัติก่อนการแสดงผล โดยคุณสมบัติเริ่มต้นจะถูกวาดตามลำดับที่สร้างขึ้น ใช้ null เพื่อหลีกเลี่ยงการเรียงลำดับ แต่ได้รับคำสั่งการวาดที่ไม่ได้กำหนด

แหล่งที่มา

ที่มา : string

หากสไตล์ของคุณใช้มากกว่าหนึ่งแหล่งคุณต้องใช้คุณสมบัติ source หรือคุณสมบัติ layers เพื่อ จำกัด การแสดงผลของแหล่งเวกเตอร์เดียว คุณสมบัติ source ที่มาสอดคล้องกับ ID ของแหล่งเวกเตอร์ในสไตล์ MAPBOX ของคุณ

styleurl

Styleurl : string

URL ของวัตถุสไตล์ MAPBOX ที่จะใช้สำหรับเลเยอร์นี้ สำหรับสไตล์ที่สร้างขึ้นด้วย Mapbox Studio และโฮสต์บน Mapbox จะมีลักษณะเหมือน 'Mapbox: // Styles/You/Your Style'

updatewhileanimating

UpdateWhileAnimating : boolean

เมื่อตั้งค่าเป็น true แบทช์ฟีเจอร์จะถูกสร้างขึ้นใหม่ในระหว่างการเคลื่อนไหว ซึ่งหมายความว่าจะไม่มีการแสดงเวกเตอร์ แต่การตั้งค่าจะมีผลกระทบต่อประสิทธิภาพสำหรับข้อมูลเวกเตอร์จำนวนมาก เมื่อตั้งค่าเป็น false แบทช์จะถูกสร้างขึ้นใหม่เมื่อไม่มีแอนิเมชั่นทำงานอยู่

อัปเดตในขณะที่ interacting

อัปเดตในขณะที่ Interacting : boolean

เมื่อตั้งค่าเป็น true แบทช์คุณสมบัติจะถูกสร้างขึ้นใหม่ในระหว่างการโต้ตอบ ดูเพิ่มเติมที่ updateWhileAnimating

useTinterimtilesonError

useTinterimtilesOnerror : boolean

ใช้กระเบื้องชั่วคราวในข้อผิดพลาด

มองเห็นได้

มองเห็นได้ : boolean

การมองเห็น

zindex

Zindex : number

ดัชนี Z สำหรับการเรนเดอร์เลเยอร์ ในเวลาการเรนเดอร์เลเยอร์จะถูกสั่งซื้อก่อนโดย z-index ก่อนจากนั้นตามตำแหน่ง เมื่อ undefined zIndex ของ 0 จะถูกสันนิษฐานสำหรับเลเยอร์ที่เพิ่มเข้าไปในคอล layers ชันเลเยอร์ของแผนที่หรือ Infinity เมื่อใช้วิธี setMap() ของเลเยอร์

สไตล์ ol-mapbox • เอกสาร

อินเตอร์เฟส: ตัวเลือก

คุณสมบัติ

accesstoken

AccessToken : string

การเข้าถึงโทเค็นสำหรับ 'mapbox: //' url

AccessTokenParam

AccessTokenParam : string

การเข้าถึงโทเค็นพารามิเตอร์ สำหรับการใช้งานภายใน

getImage ()

getImage : ( arg0 , arg1 ) => string | HTMLCanvasElement | HTMLImageElement

ฟังก์ชั่นที่ส่งคืนภาพสำหรับชื่อไอคอน หากผลลัพธ์เป็น HTMLimageElement จะต้องโหลดไปแล้ว เลเยอร์สามารถใช้เรียกเลเยอร์ changed () เมื่อการโหลดและการประมวลผลของภาพเสร็จสิ้น ฟังก์ชั่นนี้ใช้สำหรับไอคอนที่ไม่ได้อยู่ในสไปรต์หรือเพื่อแทนที่ไอคอนสไปรต์

พารามิเตอร์

• arg0 : VectorLayer < VectorSource any , any > | VectorTileLayer < VectorTile any , any >

• arg1 : string

ผลตอบแทน

string | HTMLCanvasElement | HTMLImageElement

การฉายภาพ

การฉาย : string

มีประโยชน์เฉพาะเมื่อทำงานกับการคาดการณ์ที่ไม่ได้มาตรฐาน รหัสของการฉายที่ลงทะเบียนกับ OpenLayers แหล่งที่มาทั้งหมดของสไตล์จะต้องจัดทำในการคาดการณ์นี้ การฉายจะต้องมีขอบเขตที่ถูกต้องซึ่งจะใช้เพื่อกำหนดต้นกำเนิดและความละเอียดของกริดกระเบื้องสำหรับแหล่งที่เรียงกระเบื้องทั้งหมดของสไตล์ เมื่อมีให้ผู้ถือตำแหน่ง bbox ในกระเบื้องและ geojson urls เปลี่ยนแปลง: ค่าเริ่มต้นคือ {bbox-epsg-3857} เมื่อการฉายเช่นตั้งค่าเป็น EPSG:4326 ผู้ถือตำแหน่ง bbox จะเป็น {bbox-epsg-4326}

มติ

ความละเอียด : number []

มีประโยชน์เฉพาะเมื่อทำงานกับการคาดการณ์ที่ไม่ได้มาตรฐาน ความละเอียดสำหรับความละเอียดการแมปกับ zoom ที่ใช้ในสไตล์ MAPBOX

styleurl

Styleurl : string

URL ของสไตล์ MAPBOX GL จำเป็นสำหรับสไตล์ที่จัดทำขึ้นเป็นวัตถุเมื่อมี URL สไปรต์สัมพัทธ์หรือแหล่งอ้างอิงข้อมูลโดย URL สัมพัทธ์

Transformrequest ()

TransformRequest : ( arg0 , arg1 ) => string | void | Request | Promise < string | Request >

ฟังก์ชั่นสำหรับการควบคุมวิธีการดึงทรัพยากร ol-mapbox-style สามารถใช้สำหรับการแก้ไข URL เพิ่มส่วนหัวหรือการตั้งค่าตัวเลือกข้อมูลรับรอง เรียกด้วย URL และประเภททรัพยากรเป็นอาร์กิวเมนต์ฟังก์ชั่นนี้ควรจะส่งคืน Request หรือ string URL หรือคำสัญญา tehereof หากไม่มีค่าส่งคืนคำขอเดิมจะไม่ได้รับการแก้ไข

พารามิเตอร์

• arg0 : string

• Arg1 : ResourceType

ผลตอบแทน

string | void | Request | Promise < string | Request >

หน้าเว็บ

Webfonts : string

เทมเพลตสำหรับการแก้ไขเว็บฟอนต์ สามารถใช้เพื่อระบุตำแหน่งที่จะดึงตัวอักษรเว็บเมื่อไม่มีการตั้งค่าข้อมูลเมตา ol:webfonts ในวัตถุสไตล์ ดู getFonts() และส่วน "การจัดการแบบอักษร" ใน README.md สำหรับรายละเอียด

สไตล์ ol-mapbox • เอกสาร

Type alias: ResourceType

ResourceType <>: "Style" | "Source" | "Sprite" | "SpriteImage" | "Tiles" | "GeoJSON"

พิมพ์พารามิเตอร์

สไตล์ ol-mapbox • เอกสาร

สไตล์ ol-mapbox

โมดูล

<pronny>

ชั้นเรียน

MapBoxVectorlayer

ฟังก์ชั่น

addmapboxlayer
นำมาใช้
appliackground
ApplyStyle
getFeatureState
getLayer
getLayers
getMapBoxLayer
getSource
GetStyleForlayer
recordstylelayer
RemoveMapBoxLayer
rendertransparent
setfeatureState
สไตล์การทำงาน
updateMapBoxLayer
updateMapBoxSource

การอ้างอิง

ค่าเริ่มต้น

มีการเปลี่ยนชื่อและส่งออกอีกครั้ง

สไตล์ ol-mapbox • เอกสาร

คลาส: MapBoxVectorlayer

ชั้นเรียน

 import { MapboxVectorLayer } from 'ol-mapbox-style' ;

เลเยอร์กระเบื้องเวกเตอร์ตามสไตล์ MAPBOX ที่ใช้แหล่งเวกเตอร์เดียว กำหนดค่าเลเยอร์ด้วย styleUrl และ accessToken ที่แสดงในแผงแชร์ของ Mapbox Studio หากสไตล์ใช้มากกว่าหนึ่งแหล่งให้ใช้คุณสมบัติ source เพื่อเลือกแหล่งเวกเตอร์เดียว หากคุณต้องการแสดงชุดย่อยของเลเยอร์ในสไตล์ให้ใช้คุณสมบัติ layers (เลเยอร์ทั้งหมดจะต้องใช้แหล่งเวกเตอร์เดียวกัน) ดูตัวเลือกตัวสร้างสำหรับรายละเอียดเพิ่มเติม

 const map = new Map({
  view: new View({
    center: [0, 0],
    zoom: 1,
  }),
  layers: [
    new MapboxVectorLayer({
      styleUrl: 'mapbox://styles/mapbox/bright-v9',
      accessToken: 'your-mapbox-access-token-here',
    }),
  ],
  target: 'map',
});

ในข้อผิดพลาดการกำหนดค่าหรือการโหลดเลเยอร์จะทำให้เกิดเหตุการณ์ 'error' ผู้ฟังจะได้รับวัตถุที่มีคุณสมบัติ error ที่สามารถใช้ในการวินิจฉัยปัญหา

หมายเหตุสำหรับผู้ใช้งานบิลด์แบบเต็ม : MapboxVectorLayer ต้องการไลบรารีสไตล์ OL-MAPBOX ที่จะโหลดเช่นกัน

พารามิเตอร์

ตัวเลือก.

ไฟไหม้

โมดูล: ol/events/event ~ baseEvent#เหตุการณ์: ข้อผิดพลาด

API

ขยาย

VectorTileLayer

ผู้สร้าง

ใหม่ MapBoxVectorlayer ()

ใหม่ MapBoxVectorLayer ( options ): MapboxVectorLayer

พารามิเตอร์

• ตัวเลือก : Options

ตัวเลือกเลเยอร์ อย่างน้อยที่สุดจะต้องจัดเตรียม styleUrl และ accessToken

ผลตอบแทน

MapboxVectorLayer

แทนที่

VectorTileLayer.constructor

คุณสมบัติ

accesstoken

AccessToken : string

สไตล์ ol-mapbox • เอกสาร

ฟังก์ชั่น: addmapboxlayer ()

addMapBoxLayer ( mapOrGroup , mapboxLayer , beforeLayerId ?): Promise void

เพิ่มวัตถุ Mapbox Layer ใหม่ให้กับสไตล์ แผนที่จะแสดงผลอีกครั้ง

พารามิเตอร์

• MaporGroup : Map | LayerGroup

apply เรียกแผนที่หรือ LayerGroup

• mapboxlayer : any

วัตถุเลเยอร์ MAPBOX

• beforelayerid? : string

รหัสเสริมของเลเยอร์ Mapbox ก่อนที่จะเพิ่มเลเยอร์ใหม่ที่จะเพิ่ม

ผลตอบแทน

Promise void

แก้ไขเมื่อมีเลเยอร์ที่เพิ่มเข้ามา

สไตล์ ol-mapbox • เอกสาร

ฟังก์ชั่น: ใช้ ()

ใช้ ( mapOrGroupOrElement , style , options ): Promise < Map | LayerGroup >

โหลดและใช้วัตถุสไตล์ MAPBOX ลงในแผนที่ OpenLayers หรือ LayerGroup ซึ่งรวมถึงพื้นหลังแผนที่เลเยอร์และอินสแตนซ์แผนที่ที่ไม่มีมุมมองที่กำหนดไว้ แต่ยังเป็นศูนย์กลางและซูม

ตัวอย่าง:

 import apply from 'ol-mapbox-style' ;

apply ( 'map' , 'mapbox://styles/mapbox/bright-v9' , { accessToken : 'YOUR_MAPBOX_TOKEN' } ) ;

ศูนย์และซูมจะถูกตั้งค่าเฉพาะในเอกสารสไตล์ MAPBOX และหากยังไม่ได้ตั้งค่าบนแผนที่ OpenLayers

เลเยอร์จะถูกเพิ่มลงในแผนที่ OpenLayers โดยไม่ส่งผลกระทบต่อเลเยอร์ใด ๆ ที่อาจตั้งค่าไว้บนแผนที่แล้ว

เลเยอร์ที่เพิ่มโดย apply() จะมีคุณสมบัติเพิ่มเติมสองประการ:

mapbox-source : id ของแหล่งเอกสารสไตล์ MAPBOX ที่เลเยอร์ OpenLayers ถูกสร้างขึ้นจาก โดยปกติแล้ว apply() สร้างเลเยอร์ OpenLayers หนึ่งชั้นต่อแหล่งสไตล์ MAPBOX เว้นแต่สแต็กเลเยอร์จะมีเลเยอร์จากแหล่งต่าง ๆ ในระหว่างนั้น
mapbox-layers : id S ของเลเยอร์เอกสารสไตล์ MAPBOX ที่รวมอยู่ในเลเยอร์ OpenLayers

ฟังก์ชั่นนี้ตั้งค่าคุณสมบัติ mapbox-style เพิ่มเติมบนแผนที่ OpenLayers หรืออินสแตนซ์ LayerGroup ซึ่งถือวัตถุสไตล์ MAPBOX

พารามิเตอร์

• MAPORGROUPORELEMENT : string | Map | LayerGroup | HTMLElement

ไม่ว่าจะเป็นอินสแตนซ์ OpenLayers ที่มีอยู่หรือองค์ประกอบ HTML หรือ ID ขององค์ประกอบ HTML ที่จะเป็นเป้าหมายของแผนที่ OpenLayers ใหม่หรือกลุ่มเลเยอร์ หากกลุ่มเลเยอร์รูปแบบที่เพิ่มเข้ามาในแผนที่และมุมมองจะถูกละเว้น

• สไตล์ : any

วัตถุสไตล์ JSON หรือ URL สไตล์ชี้ไปที่วัตถุสไตล์ MAPBOX เมื่อใช้ MAPBOX APIS URL คือ styleUrl ที่แสดงในแผง "Share" ของ MapBox Studio นอกจากนี้จะต้องตั้งค่าตัวเลือก accessToken (ดูด้านล่าง) เมื่อผ่านเป็นวัตถุสไตล์ JSON เลเยอร์ OpenLayers ทั้งหมดที่สร้างโดย apply() จะพร้อมใช้งานทันที แต่พวกเขาอาจยังไม่มีแหล่งที่มา (เช่นเมื่อพวกเขาถูกกำหนดโดย URL Tilejson ในเอกสารสไตล์ MAPBOX) เมื่อผ่านเป็น URL สไตล์เลเยอร์จะถูกเพิ่มลงในแผนที่เมื่อเอกสารสไตล์ MAPBOX ถูกโหลดและแยกวิเคราะห์

• ตัวเลือก : Options = {}

ตัวเลือก.

ผลตอบแทน

Promise < Map | LayerGroup >

คำสัญญาที่แก้ไขหลังจากเลเยอร์ทั้งหมดได้รับการเพิ่มลงในอินสแตนซ์แผนที่ OpenLayers หรือ LayerGroup ชุดแหล่งที่มาของพวกเขาและรูปแบบของพวกเขา resolve การเรียกกลับจะถูกเรียกด้วยอินสแตนซ์แผนที่ OpenLayers หรือ LayerGroup เป็นอาร์กิวเมนต์

สไตล์ ol-mapbox • เอกสาร

ฟังก์ชั่น: applebackground ()

applebackground ( mapOrLayer , glStyle , options ): Promise any

ใช้คุณสมบัติของเลเยอร์ background แรกของ Mapbox Style กับแผนที่หรือเลเยอร์ที่ให้มา (กลุ่ม)

ตัวอย่าง:

 import { applyBackground } from 'ol-mapbox-style' ;
import { Map } from 'ol' ;

const map = new Map ( { target : 'map' } ) ;
applyBackground ( map , 'https://api.maptiler.com/maps/basic/style.json?key=YOUR_OPENMAPTILES_TOKEN' ) ;

พารามิเตอร์

• Maporlayer : Map | BaseLayer

แผนที่ OpenLayers หรือเลเยอร์ (กลุ่ม)

• glstyle : any

วัตถุสไตล์ MAPBOX หรือ URL

• ตัวเลือก : Options = {}

ตัวเลือก.

ผลตอบแทน

Promise any

สัญญาที่แก้ไขเมื่อมีการใช้พื้นหลัง

สไตล์ ol-mapbox • เอกสาร

ฟังก์ชั่น: ApplyStyle ()

ApplyStyle ( layer , glStyle , sourceOrLayersOrOptions ?, optionsOrPath ?, resolutions ?): Promise any

ใช้ฟังก์ชั่นสไตล์กับ ol/layer/VectorTile หรือ ol/layer/Vector กับ ol/source/VectorTile หรือ ol/source/Vector หากเลเยอร์ยังไม่มีแหล่งที่มามันจะถูกสร้างและเติมข้อมูลจากข้อมูลใน glStyle (เว้นแต่ว่า updateSource จะถูกตั้งค่าเป็น false )

ตัวอย่าง:

 import { applyStyle } from 'ol-mapbox-style' ;
import { VectorTile } from 'ol/layer.js' ;

const layer = new VectorTile ( { declutter : true } ) ;
applyStyle ( layer , 'https://api.maptiler.com/maps/basic/style.json?key=YOUR_OPENMAPTILES_TOKEN' ) ;

ฟังก์ชั่นสไตล์จะทำให้เลเยอร์ทั้งหมดจากวัตถุ glStyle ที่ใช้แหล่งที่มาของเลเยอร์แรก source ที่มาหรือชุดย่อยของเลเยอร์จากแหล่งเดียวกัน แหล่งที่มาจะต้องเป็น "type": "vector" หรือ "type": "geojson" แหล่งที่มา

จะมีการตั้งค่าคุณสมบัติเพิ่มเติมสองคุณสมบัติในเลเยอร์ที่ให้ไว้:

mapbox-source : id ของแหล่งเอกสารสไตล์ MAPBOX ที่เลเยอร์ OpenLayers ถูกสร้างขึ้นจาก โดยปกติแล้ว apply() สร้างเลเยอร์ OpenLayers หนึ่งชั้นต่อแหล่งสไตล์ MAPBOX เว้นแต่สแต็กเลเยอร์จะมีเลเยอร์จากแหล่งต่าง ๆ ในระหว่างนั้น
mapbox-layers : id S ของเลเยอร์เอกสารสไตล์ MAPBOX ที่รวมอยู่ในเลเยอร์ OpenLayers

พารามิเตอร์

• เลเยอร์ : VectorLayer < VectorSource any , any > | VectorTileLayer < VectorTile any , any >

เลเยอร์ OpenLayers เมื่อเลเยอร์มีแหล่งที่มาที่กำหนดค่าจะถูกแก้ไขให้ใช้การกำหนดค่าจาก source ของ Glstyle ตัวเลือกที่ระบุไว้ในแหล่งที่มาของเลเยอร์จะแทนที่เหล่านั้นจาก source ของ Glstyle ยกเว้น url และ tileUrlFunction เมื่อการฉายภาพต้นฉบับเป็นค่าเริ่มต้น ( EPSG:3857 ) tileGrid ก็จะถูกแทนที่ด้วย หากคุณไม่อยากให้การแก้ไขรูปแบบ OL-MAPBOX แก้ไขแหล่งที่มากำหนดค่า applyStyle() ด้วยตัวเลือก updateSource: false

• glstyle : any

วัตถุสไตล์ MAPBOX

• SourceOrlayersorOptions? : string | string [] | Options และ ApplyStyleOptions = ''

ตัวเลือกหรือคีย์ source หรืออาร์เรย์ของเลเยอร์ id S จากวัตถุสไตล์ MAPBOX เมื่อมีการจัดเตรียมคีย์ source เลเยอร์ทั้งหมดสำหรับแหล่งที่มาจะรวมอยู่ในฟังก์ชั่นสไตล์ เมื่อมีการให้เลเยอร์ id S พวกเขาจะต้องมาจากเลเยอร์ที่ใช้แหล่งข้อมูลเดียวกัน เมื่อไม่ได้ให้หรือค่าเท็จเลเยอร์ทั้งหมดที่ใช้แหล่งแรกที่ระบุใน Glstyle จะแสดงผล

• Optionsorpath? : string | Options & ApplyStyleOptions = {}

เลิกใช้แล้ว ตัวเลือก. อีกทางเลือกหนึ่งเส้นทางของไฟล์สไตล์ (จำเป็นเมื่อใช้เส้นทางสัมพัทธ์สำหรับคุณสมบัติ "sprite" ของสไตล์)

• มติ? : number [] = undefined

เลิกใช้แล้ว ความละเอียดสำหรับการแก้ไขการทำแผนที่ถึงระดับซูม จำเป็นเฉพาะเมื่อทำงานกับกริดหรือการคาดการณ์กระเบื้องที่ไม่ได้มาตรฐานเท่านั้น

ผลตอบแทน

Promise any

สัญญาที่จะได้รับการแก้ไขเมื่อสไตล์สามารถใช้สำหรับการแสดงผล

สไตล์ ol-mapbox • เอกสาร

ฟังก์ชั่น: getFeatuRestate ()

getFeatuRestate ( mapOrLayer , feature ): any

ตั้งค่าหรือลบสถานะคุณสมบัติ สถานะคุณสมบัตินี้ถูกนำมาพิจารณาสำหรับการจัดแต่งทรงผมเช่นเดียวกับคุณสมบัติของคุณสมบัติและสามารถใช้งานได้เช่นการแสดงคุณสมบัติที่เลือกอย่างมีเงื่อนไขแตกต่างกัน

พารามิเตอร์

• Maporlayer : Map | VectorLayer < VectorSource any , any > | VectorTileLayer < VectorTile any , any >

แผนที่หรือเลเยอร์เพื่อตั้งค่าสถานะคุณสมบัติ

• ฟีเจอร์ : FeatureIdentifier

ตัวระบุคุณสมบัติ

ผลตอบแทน

any

สถานะคุณสมบัติหรือ null เมื่อไม่มีการตั้งค่าสถานะคุณสมบัติสำหรับตัวระบุคุณสมบัติที่กำหนด

สไตล์ ol-mapbox • เอกสาร

ฟังก์ชั่น: getLayer ()

getLayer ( map , layerId ): Layer < Source , LayerRenderer any >

รับอินสแตนซ์เลเยอร์ OpenLayers ที่มี layer สไตล์ MAPBOX ที่ให้ไว้ โปรดทราบว่าเลเยอร์สไตล์ MAPBOX หลายตัวรวมกันในอินสแตนซ์เลเยอร์ OpenLayers เดียวเมื่อใช้ source MAPBOX สไตล์เดียวกัน

พารามิเตอร์

• แผนที่ : Map | LayerGroup

แผนที่ OpenLayers หรือ LayerGroup

• layerid : string

รหัสเลเยอร์สไตล์ MAPBOX

ผลตอบแทน

Layer < Source , LayerRenderer < any >>

อินสแตนซ์เลเยอร์ OpenLayers

สไตล์ ol-mapbox • เอกสาร

ฟังก์ชั่น: getLayers ()

getLayers ( map , sourceId ): Layer < Source , LayerRenderer < any >> []

รับอินสแตนซ์เลเยอร์ OpenLayers สำหรับ source สไตล์ MAPBOX ที่ให้ไว้

พารามิเตอร์

• แผนที่ : Map | LayerGroup

แผนที่ OpenLayers หรือ LayerGroup

• SourceID : string

รหัสแหล่งที่มาของ MAPBOX

ผลตอบแทน

Layer < Source , LayerRenderer < any >> []

อินสแตนซ์เลเยอร์ OpenLayers

สไตล์ ol-mapbox • เอกสาร

ฟังก์ชั่น: getMapBoxLayer ()

GetMapBoxLayer ( mapOrGroup , layerId ): any

รับวัตถุ Mapbox Layer สำหรับ layerId ที่ให้ไว้

พารามิเตอร์

• MaporGroup : Map | LayerGroup

แผนที่หรือ LayerGroup

• layerid : string

ID เลเยอร์ MAPBOX

ผลตอบแทน

any

วัตถุเลเยอร์ MAPBOX

สไตล์ ol-mapbox • เอกสาร

ฟังก์ชั่น: getSource ()

GetSource ( map , sourceId ): Source

รับอินสแตนซ์แหล่ง OpenLayers สำหรับ source ที่มาของ MAPBOX ที่ให้มา

พารามิเตอร์

• แผนที่ : Map | LayerGroup

แผนที่ OpenLayers หรือ LayerGroup

• SourceID : string

รหัสแหล่งที่มาของ MAPBOX

ผลตอบแทน

Source

อินสแตนซ์แหล่ง OpenLayers

สไตล์ ol-mapbox • เอกสาร

ฟังก์ชั่น: getStyleForLayer ()

GetStyleForLayer ( feature , resolution , olLayer , layerId ): Style []

รับสไตล์สำหรับเลเยอร์ Mapbox เฉพาะเท่านั้น สิ่งนี้มีประโยชน์สำหรับการสร้างตำนาน

พารามิเตอร์

• คุณสมบัติ : RenderFeature | Feature Geometry

คุณสมบัติ OpenLayers

• ความละเอียด : number

ดูความละเอียด

• ollayer : VectorLayer < VectorSource any , any > | VectorTileLayer < VectorTile any , any >

เลเยอร์ OpenLayers

• layerid : string

id ของเลเยอร์ mapbox เพื่อรับสไตล์สำหรับ

ผลตอบแทน

Style []

สไตล์สำหรับเลเยอร์ Mapbox ที่ให้ไว้

สไตล์ ol-mapbox • เอกสาร

ฟังก์ชั่น: recordstylelayer ()

recordstylelayer ( record ): void

เปิดการบันทึกเลเยอร์ของ Mapbox Style layer เมื่อเปิดใช้งานเลเยอร์ที่คุณลักษณะการแสดงผลจะถูกตั้งค่าเป็นคุณสมบัติ mapbox-layer ของคุณลักษณะ

พารามิเตอร์

• บันทึก : boolean = false

การบันทึกของเลเยอร์สไตล์เปิดอยู่

ผลตอบแทน

void

สไตล์ ol-mapbox • เอกสาร

ฟังก์ชั่น: RemoveMapBoxLayer ()

RemoveMapBoxLayer ( mapOrGroup , mapboxLayerIdOrLayer ): void

ลบวัตถุ Mapbox Layer ออกจากสไตล์ แผนที่จะแสดงผลอีกครั้ง

พารามิเตอร์

• MaporGroup : Map | LayerGroup

apply เรียกแผนที่หรือ LayerGroup

• mapboxlayeridorlayer : any

Mapbox Layer ID หรือวัตถุ Layer Mapbox

ผลตอบแทน

void

สไตล์ ol-mapbox • เอกสาร

ฟังก์ชั่น: RenderTransparent ()

RenderTransparent ( enabled ): void

กำหนดค่าว่าควรแสดงคุณสมบัติที่มีสไตล์โปร่งใสหรือไม่ เมื่อตั้งค่าเป็น true จะเป็นไปได้ที่จะตรวจจับเนื้อหาที่ไม่สามารถมองเห็นได้เช่นการเติมรูปหลายเหลี่ยมแบบโปร่งใสโดยใช้ ol/layer/Layer#getFeatures() หรือ ol/Map#getFeaturesAtPixel()

พารามิเตอร์

• เปิดใช้งาน : boolean

การแสดงผลขององค์ประกอบที่โปร่งใสถูกเปิดใช้งาน ค่าเริ่มต้นเป็น false

ผลตอบแทน

void

สไตล์ ol-mapbox • เอกสาร

ฟังก์ชั่น: setFeatuRestate ()

setFeatuRestate ( mapOrLayer , feature , state ): void

สถานะคุณสมบัติจะถูกเก็บไว้ในเลเยอร์ OpenLayers ที่ตรงกับตัวระบุคุณสมบัติในคุณสมบัติ mapbox-featurestate

พารามิเตอร์

• Maporlayer : Map | VectorLayer < VectorSource any , any > | VectorTileLayer < VectorTile any , any >

แผนที่ OpenLayers หรือเลเยอร์เพื่อตั้งค่าสถานะคุณสมบัติ

• ฟีเจอร์ : FeatureIdentifier

ตัวระบุคุณสมบัติ

• รัฐ : any

สถานะคุณสมบัติ ตั้งค่าเป็น null เพื่อลบสถานะคุณสมบัติ

ผลตอบแทน

void

สไตล์ ol-mapbox • เอกสาร

ฟังก์ชั่น: stylefunction ()

Stylefunction ( olLayer , glStyle , sourceOrLayers , resolutions , spriteData , spriteImageUrl , getFonts , getImage ?, ... args ?): StyleFunction

สร้างฟังก์ชั่นสไตล์จากวัตถุ glStyle สำหรับเลเยอร์ทั้งหมดที่ใช้ source ที่มาซึ่งจะต้องเป็น "type": "vector" หรือ "type": "geojson" แหล่งที่มาและนำไปใช้กับเลเยอร์ OpenLayers ที่ระบุ

จะมีการตั้งค่าคุณสมบัติเพิ่มเติมสองคุณสมบัติในเลเยอร์ที่ให้ไว้:

mapbox-source : id ของแหล่งเอกสารสไตล์ MAPBOX ที่เลเยอร์ OpenLayers ถูกสร้างขึ้นจาก โดยปกติแล้ว apply() สร้างเลเยอร์ OpenLayers หนึ่งชั้นต่อแหล่งสไตล์ MAPBOX เว้นแต่สแต็กเลเยอร์จะมีเลเยอร์จากแหล่งต่าง ๆ ในระหว่างนั้น
mapbox-layers : id S ของเลเยอร์เอกสารสไตล์ MAPBOX ที่รวมอยู่ในเลเยอร์ OpenLayers

ฟังก์ชั่นนี้ยังใช้งานได้ในเว็บ ในโหมดคนงานเธรดหลักจำเป็นต้องฟังข้อความจากคนงานและตอบกลับด้วยข้อความอื่นเพื่อให้แน่ใจว่าการโหลดภาพสไปรต์นั้นใช้งานได้:

 worker . addEventListener ( 'message' , event => {
  if ( event . data . action === 'loadImage' ) {
    const image = new Image ( ) ;
    image . crossOrigin = 'anonymous' ;
    image . addEventListener ( 'load' , function ( ) {
      createImageBitmap ( image , 0 , 0 , image . width , image . height ) . then ( imageBitmap => {
        worker . postMessage ( {
          action : 'imageLoaded' ,
          image : imageBitmap ,
          src : event . data . src
        } , [ imageBitmap ] ) ;
      } ) ;
    } ) ;
    image . src = event . data . src ;
  }
} ) ;

พารามิเตอร์

• ollayer : VectorLayer < VectorSource any , any > | VectorTileLayer < VectorTile any , any >

OpenLayers Layer เพื่อใช้สไตล์กับ นอกเหนือจากสไตล์เลเยอร์จะได้รับคุณสมบัติสองประการ: mapbox-source จะเป็น id ของแหล่งที่มาของ glStyle ที่ใช้สำหรับเลเยอร์และ mapbox-layers จะเป็นอาร์เรย์ของ id S ของเลเยอร์ของ glStyle

• glstyle : any

วัตถุสไตล์ MAPBOX

• SourceOrlayers : string | string []

คีย์ source หรืออาร์เรย์ของเลเยอร์ id S จากวัตถุสไตล์ MAPBOX เมื่อมีการจัดเตรียมคีย์ source เลเยอร์ทั้งหมดสำหรับแหล่งที่มาจะรวมอยู่ในฟังก์ชั่นสไตล์ เมื่อมีการให้เลเยอร์ id S พวกเขาจะต้องมาจากเลเยอร์ที่ใช้แหล่งข้อมูลเดียวกัน

• ความละเอียด : number [] = defaultResolutions

ความละเอียดสำหรับการแก้ไขการทำแผนที่ถึงระดับซูม

• spritedata : any = undefined

ข้อมูลสไปรต์จาก URL ที่ระบุในคุณสมบัติ sprite ของ Mapbox Style Object จำเป็นเฉพาะในกรณีที่ระบุคุณสมบัติ sprite ในวัตถุสไตล์ MAPBOX

• SpriteImageUrl : string | Request | Promise < string | Request > = undefined

URL ภาพสไปรต์สำหรับสไปรต์ที่ระบุไว้ในคุณสมบัติ sprite สไตล์ MAPBOX ของ Object จำเป็นเฉพาะในกรณีที่ระบุคุณสมบัติ sprite ในวัตถุสไตล์ MAPBOX

• getFonts = undefined

ฟังก์ชั่นที่ได้รับสแต็กแบบอักษรและเทมเพลต URL จาก metadata['ol:webfonts'] (ถ้าตั้งค่า) เป็นอาร์กิวเมนต์และส่งคืนสแต็กแบบอักษร (แก้ไข) ที่มีอยู่ ชื่อตัวอักษรเป็นชื่อที่ใช้ในวัตถุสไตล์ MAPBOX หากไม่ได้จัดเตรียมสแต็กฟอนต์จะถูกใช้ตามที่เป็นคือ ฟังก์ชั่นนี้ยังสามารถใช้สำหรับการโหลดแบบอักษรเว็บ

• getImage? = undefined

ฟังก์ชั่นที่ส่งคืนภาพหรือ URL สำหรับชื่อภาพ หากผลลัพธ์เป็น HTMLimageElement จะต้องโหลดไปแล้ว เลเยอร์สามารถใช้เรียกเลเยอร์ changed () เมื่อการโหลดและการประมวลผลของภาพเสร็จสิ้น ฟังก์ชั่นนี้สามารถใช้สำหรับไอคอนที่ไม่ได้อยู่ในสไปรต์หรือเพื่อแทนที่ไอคอนสไปรต์

• ... args? : any