j-DrawZone

jComponent 20 · jcomponent@20 component Примерът е зареден с jComponent 20

Съставът може да рисува зона (полигон). Отворени Библиотеката с OpenStreetMap Карта на двигателя.

Конфигуриране:

parent {String} е родителски елемент (дефолт: undefined)
height {Number} Минимална височина (дефинирана) 200)
color {String} е стандартна цвят за полигон (дефолт: #fcba03)
zoom {Number} е стандартно ниво на зом (предварително: 11)
readonly {Boolean} позволява readonly режим (предварително: false)
stroke {Number} Разширяване на ширината (предварително: 2)
radius {Number} - радиус размер на точките в полигона (предварително: 7)
center {String} Позиция на картата (по подразбиране: 48.73702478789267,19.137712002562715)
opacity {Number} определя прозрачността на полигона в процент (дефолт: 40)
required {Boolean} опционално (предварително: false)
filter {String} опционален, CSS филтър например filter:grayscale(90%) invert(100%) (предварително: null)
NEW: exec {String} опция, връзка към function(value, component) (това ще бъде изпълнено, когато стойността се променя)

Data-Source трябва да съдържа:

{
    points: [{ lat: 48.75152530164132, lng: 19.13902142954625 }, { lat: 48.726826662905296, lng: 19.123238694044034 }, ...] // polygon points
    color: '#FD391A', // optional
    zoom: 13 // optional
}

Методи:

component.clear([draw]) почиства полигона @draw {Boolean} (предварително: false)
component.move(lat, lng) премества картата към конкретната позиция
component.export(opt, callback(base64)) експортира данни в снимката
- opt.width {Number} Необходими
- opt.height {Number} Необходими
- opt.zoom {Number} (Съгласно с дефолт 13)
- opt.type {png|jpg} (Съгласно с дефолт png)
- opt.quality {Number} само за JPEG
- opt.points {Array Number}
- opt.color {String} (Съгласно с дефолт config.color)
- opt.radius {Number} (Съгласно с дефолт config.radius)
- opt.opacity {Number} (Съгласно с дефолт config.opacity)

Изходът:

Разширено от center { lat: Number, lng: Number } имоти

Добре е да се знае:

double click на върховете (създадена точка) ще изтрие избраната точка

Използвайте го с <ui-component name="drawzone">Когато компонентът все още не е зареден, jComponent Изтегляне на първия адрес в DEF.fallback (След това Componentator Автор: Питър Сирка и Додо Мартон. източник: Componentator Съставни съставки, лиценз на MIT.

example.html

<style>
	body { margin: 0; padding: 0; }
</style>

<ui-component name="drawzone" path="map" config="parent:window;color:#FD391A;geolocation:0"></ui-component>

<script>
	var map = { 
		points: []
	};
</script>