html倒线箭头字符集,leaflet线箭头.html

Leaflet1

integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="

crossorigin=""/>

crossorigin="">

body {

margin: 0px;

padding: 0px;

}

/**

* 单独设置mapid为100%不显示，可能float坍塌

*/

html,

body,

#mapDiv {

height: 100%;

width: 100%;

}

//地图地址

var url = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';

var attr = ' Map data © OpenStreetMap contributors, © CartoDB';

var leafletMap = L.map('mapDiv').setView([41.805, 123], 10);

//图层

L.tileLayer(url, {

maxZoom: 18,

attribution: attr,

id: 'mapbox.streets'

}).addTo(leafletMap);

// --------

var arrow = L.polyline([[41.80, 123.43], [41.07, 123.00]], {

opacity: 1,

color: 'firebrick'

}).bindPopup('I am red:').addTo(leafletMap);//

var arrow2 = L.polyline([[41.80, 123.43], [40.13, 124.37]], {

opacity: 1,

color: 'lightgreen'

}).bindPopup('I am green:').addTo(leafletMap);

var arrow3 = L.polyline([[41.07, 123.00], [40.13, 124.37]], {

opacity: 1,

color: 'lightgreen'

}).bindPopup('I am green:').addTo(leafletMap);

var arrowHead = L.polylineDecorator(arrow, {

patterns: [

{

offset: '30%',

endOffset: '90%',

repeat: 1000,

symbol: L.Symbol.arrowHead({

pixelSize: 10,

polygon: false,

pathOptions: {stroke: true, weight: 2, color: 'firebrick'}

})

}

]

}).addTo(leafletMap);

一键复制

编辑

Web IDE

原始数据

按行查看

历史