<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
然后构建地图,并添加openStreetMap
// create a map in the "map" div, set the view to a given place and zoom
var map = L.map('map').setView([51.505, -0.09], 13)
// add an OpenStreetMap tile layer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map)
// add a marker in the given location, attach some popup content to it and open the popup
L.marker([51.5, -0.09]).addTo(map)
.bindPopup('A pretty CSS3 popup.
Easily customizable.')
.openPopup()
运行效果如下:
结合Qunee拓扑图
Leaflet地图上可以添加点线面基本图形,如果需要展示更复杂的图形或者链接关系,显得力不足,可以结合Qunee组件使用,下面我们让地图和拓扑图叠加起来,在地图上显示拓扑元素,并整合两者的交互
图层叠加
在地图的DIV容器中添加一个孩子div,作为拓扑图的画布,并设置相应的css,然后调用超类的构造函数,取消默认的双击和滚轮 *** 作,已被后面地图与拓扑图的交互同步var MapGraph = function (map) {
var container = map._container
var canvas = document.createElement("div")
canvas.style.width = "100%"
canvas.style.height = "100%"
container.appendChild(canvas)
Q.doSuperConstructor(this, MapGraph, [canvas])
this.enableWheelZoom = false
this.enableDoubleClickToOverview = false
this.originAtCenter = false
this.setMap(map)
...
}
关联地图
下面实现拓扑图与地图的绑定,在#setMap(map)函数中,监听了地图的zoomstart和zoomend事件,根据经纬度动态的调整图元的屏幕位置,同样在节点被拖动后,也需要设置新的经纬度MapGraph.prototype = {
map: null,
mapShowing: true,
enableInertia: false,
createNodeByLonLat: function (name, lon, lat) {
var l = this.toLonLat(lon, lat)
var p = this.getPixelFromLonLat(l)
var node = graph.createNode(name, p.x, p.y)
node.lonLat = l
return node
},
toLonLat: function (lon, lat) {
return new L.latLng(lat, lon)
},
getPixelFromLonLat: function (lonLat) {
return this.map.latLngToContainerPoint(lonLat, this.map._zoom)
},
getLonLatFromPixel: function (x, y) {
return this.map.containerPointToLatLng([x, y])
},
setMap: function (map) {
this.map = map
this.map.on("zoomstart", this.hideGraph, this)
this.map.on("zoomend", this.updateNodes, this)
this.html.ondblclick = createEventFunction(this, function (evt) {
if (this.getElementByMouseEvent(evt)) {
Q.stopEvent(evt)
}
})
this.interactionDispatcher.addListener(function (evt) {
if (evt.kind == Q.InteractionEvent.ELEMENT_MOVE_END) {
var datas = evt.datas
Q.forEach(datas, function (data) {
var pixel = this.toCanvas(data.location.x, data.location.y)
data.lonLat = this.getLonLatFromPixel(pixel.x, pixel.y)
}, this)
}
}, this)
},
hideGraph: function(){
this.html.style.visibility = "hidden"
},
showGraph: function(){
this.html.style.visibility = ""
},
translate: function (tx, ty) {
Q.doSuper(this, MapGraph, "translate", arguments)
this.map.panBy([-tx, -ty], {animate: false})
},
resetVisibility: function () {
this.forEach(function (e) {
if (e.invalidateVisibility) {
e.invalidateVisibility(true)
}
})
},
updateNodes: function () {
this.translateTo(0, 0, 1, true)
this.resetVisibility()
this.forEach(function (d) {
if (d instanceof Q.Node) {
var l = d.lonLat
var p = this.getPixelFromLonLat(l)
d.location = p
}
}, this)
this.showGraph()
}
}
Q.extend(MapGraph, Q.Graph)
此外还可以通过可见过滤器实现,不同比例尺显示不同的节点
下载源码或者针对问题对源码进行修改,或者引用新的js文件和css文件。由于图层不是leaflet原生类,可以修改的参数也比较有限,但是在实际应用中,会根据实际会对聚合图层有一些自己的要求,但是却无法修改。
通过在leaflet.markercluster-src.js搜索“large”,可以搜索到进行分段的相关代码。可见默认只对点数量聚合了三类,并且范围写死,100以上全部为红,导致数据量大展示效果十分不好。找到相应的代码就是可以改了,改起来也十分简单,如果要修改数量范围直接修改数字即可,如果要新加颜色样式可以添加else if (childCount 回答于 2022-04-20
方法1(根据指定的半径和中心点去绘制圆)
var polygon1 = new L.Circle([34, 108], 120000, {
color: 'red', //颜色
fillColor: '#f03',
fillOpacity: 0.4, //透明度
})
方法2(根据半径和中心点去构造polygon类型的圆)
var radius = 2
//点集
var parts = []
//计算圆的边缘所有点
for (var i = 0i <360i++) {
var radians = (i + 1) * Math.PI / 180
var circlePoint = [Math.cos(radians) * radius + 34, Math.sin(radians) * radius + 108]
parts[i] = circlePoint
}
var polygon1 = L.polygon(parts, {
color: 'green'
})
方法3,(地图上绘制一点拖动鼠标动态绘制圆形)
function DrawCircle() {
var r = 0
var i = null
var tempCircle = new L.circle()
map.dragging.disable()//将mousemove事件移动地图禁用
map.on('mousedown', onmouseDown)
map.on('mouseup', onmouseUp)
map.on('mousemove', onMove)
function onmouseDown(e) {
i = e.latlng
//确定圆心
}
function onMove(e) {
if (i) {
r = L.latLng(e.latlng).distanceTo(i)
tempCircle.setLatLng(i)
tempCircle.setRadius(r)
tempCircle.setStyle({
color: '#ff0000',
fillColor: '#ff0000',
fillOpacity: 1
})
map.addLayer(tempCircle)
}
}
function onmouseUp(e) {
r = L.latLng(e.latlng).distanceTo(i) //计算半径
L.circle(i, {
radius: r,
color: '#ff0000',
fillColor: '#ff0000',
fillOpacity: 1
}).addTo(map)
alert('圆心坐标为:' + i + '半径为:' + r)
i = null
r = 0
map.dragging.enable()
}
}
方法4,(使用draw插件绘制圆)
var editableLayers = new L.FeatureGroup()
map.addLayer(editableLayers)
var drawControl = new L.Control.Draw({
position: 'topleft',
draw: {
polyline: false,
polygon: false,
circle: {},
rectangle: false,
marker: false,
remove: true
},
edit: {
featureGroup: editableLayers,
remove: true
}
})
map.addControl(drawControl)
handleMapEvent(drawControl._container, map)
map.on(L.Draw.Event.CREATED, function (e) {
var type = e.layerType,
layer = e.layer
if (type === 'marker') {
layer.bindPopup('A popup!')
}
editableLayers.addLayer(layer)
})
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)