配置cdn加速，在需求阶段，需要提供哪些信息

通过前文CDN网络拓扑图及其运行机制的描述可以看出，CDN网站加速平台很好的解决了负载问题。它在源站点之前建立了一个基于公网的内容分发网络，通过对于访问申请的分析与重新定向，将原本汹涌而来的“洪水”进行了分流数据内容(信息)被分布在了遍布全国的边缘节点之上，用户可以就近的获取自己需求的信息同时用户访问操作几乎可以不必占用源站点的带宽、存储和计算资源，这些资源已经由边缘节点的服务器群进行了提供。而每一个边缘节点只需要支撑本地(附近)的有限用户群即可。此外，通过CDN加速平台还可以很好地解决动态数据的加速问题。例如实时的行情、交易信息。就这样简单，一个CDN加速平台使得企业网站的访问速度提高了，用户的访问体验获得了提升系统的成本降低了，原本高昂的信息维护与升级费用，系统资源购买费用大幅削减网络更加稳定，更多新的业务，更多直观、生动的服务内容得以实现智能化的节点控制，可以让网络针对每一个细微的波动或者问题作出及时的反应，以确保每一个访问申请的高效执行更多的资金与资源被解放出来，深度的数据挖掘与分析得以实施。来自 /cdn/cdnindex.aspx?xwid=20120705164222953今天，金融信息化的步伐正在加快。原本高成本打造而来的“金融信息孤岛”已经不再适应现在金融信息化发展的需求。金融行业跨平台网络互联技术共享和处理技术金融信息系统综合和集成技术网络化的金融风险监控、预警和防范技术金融信息数据仓库、数据挖掘与辅助决策技术以及金融信息安全技术组成了未来金融信息化的关键技术。智能化、个性化、定制化、低成本、高冗余已经成为了金融企业网站未来的发展趋势。更加安全的网络模式更加出色的访问体验更加低廉的应用成本更加贴近用户的应用服务更加宽广的业务模式……这就是CDN能够带给金融企业网站的

首先引入leaflet相关js和css

<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)

此外还可以通过可见过滤器实现，不同比例尺显示不同的节点

---