supermap地图展示OD图
/**
* =============================================
* 危险品电子路单OD展示
* =============================================
*/
var ODpoints=[],
ODlines=[],ODlabels=[];
var markerLayer;
var selectFeature;
var ODanimatorVector,ODpointsVector,ODlineVector,ODlabelVector;//OD图相关图层
var themeLayer;
var popup;
var infoStr = “”,unitStr =””;
var clickOrigin;
var endNum = 3;
var styleGroups = [];
var shifdqhdm = “320100”;
var themeData=[];
//var shifdqhmc = “南京市”;
function showLiangkywODWindow(data){
clearStatus();
isShennei = data;
if(data == “省内”){
map.setCenter(new SuperMap.LonLat(119.87066, 33.08066),4);
engineServerInvoke(‘{“method”:”dataServerMessage”,”request_class”:”RoadTransportQueryResult”,”request_method”:”queryLiangkywdzldResult”,”response”:”openLiangkywdzldODWin”,”mt_params”:{“isShennei”:”‘+ data +'”,”shifdqhdm”:”‘+
shifdqhdm +'”}}’);
}else{
map.setCenter(new SuperMap.LonLat(119.87066, 33.08066),1);
engineServerInvoke(‘{“method”:”dataServerMessage”,”request_class”:”RoadTransportQueryResult”,”request_method”:”queryLiangkywdzldResult”,”response”:”openLiangkywdzldODWin”,”mt_params”:{“isShennei”:”‘+ data +'”,”shifdqhdm”:”320000″}}’);
}
}
function openDianzldInfoResultListWin(event){
shifdqhdm = event.attribute.shifdqhdm;
muddqhdm = event.attribute.muddqhdm;
engineServerInvoke(‘{“method”:”dataServerMessage”,”request_class”:”RoadTransportQueryResult”,”request_method”:”queryLiangkywdzldMingxResult”,”response”:”openLiangkywdzldMingxResultListWin”,”mt_params”:{“shifdqhdm”:”‘+ event.attribute.shifdqhdm
+'”,”muddqhdm”:”‘+ event.attribute.muddqhdm +'”}}’);
}
function openLiangkywdzldODWin(data){
//添加图例
createCanva(‘#EC5307′,’#FFFF00′,’#EC2707’);
createStyleGroups(data.data.length);
if(!ODanimatorVector){
mapODTool();
}
addODLayer(data);
}
function getODData(shifdqhdm){
engineServerInvoke(‘{“method”:”dataServerMessage”,”request_class”:”RoadTransportQueryResult”,”request_method”:”queryLiangkywdzldResult”,”response”:”addODLayer”,”mt_params”:{“isShennei”:”‘+ isShennei +'”,”shifdqhdm”:”‘+ shifdqhdm
+'”}}’);
}
function addODLayer(data){
ODpoints = ODlines = ODlabels = data.data;
clearODLayer();
setTimeout(“showODpoints()”, 100);
showODlines();
}
function createCanva(startcolor,middlecolor,endcolor){
var contentHTML = ‘<div style=”position:absolute;z-index:99999999;right:20px;bottom:60px;”><canvas id=”canvas” class=”canvas” style=”width:50px;height:260px;”> </canvas></div>’;
$(“body”).append(contentHTML);
var myCanvas = document.getElementById(“canvas”);
var context = myCanvas.getContext(“2d”);
//颜色渐变
var canvasGra = context.createLinearGradient(0,0,0,myCanvas.height);
canvasGra.addColorStop(0, endcolor);
canvasGra.addColorStop(0.5, startcolor);
canvasGra.addColorStop(1, middlecolor);
context.fillStyle = canvasGra;//样式，颜色渐变
context.beginPath();
context.fillRect(0,0,300,300);
context.fill();
}
function createStyleGroups(counts){
var myCanvas = document.getElementById(“canvas”);
var height = myCanvas.height;
styleGroups = [];
for(var i = 1; i <= counts+2; i++){
var canvasX = 10;
var canvasY = Math.floor(i * height/(counts+3));
var colorData = myCanvas.getPixelColor(canvasX, canvasY);
var rgbaColor = colorData.rgba;
styleGroups.push(rgbaColor);
}
}
function mapODTool() {
//初始化动画矢量图层
ODanimatorVector = new SuperMap.Layer.AnimatorVector(“ODanimatorVector”, {
rendererType : “TadpolePoint”,
}, {
speed : 0.2,
startTime : 0,
endTime : endNum,
//每秒渲染12次
frameRate : 100,
});
ODanimatorVector.renderer.glint = false;
// OD点
ODpointsVector = new SuperMap.Layer.Vector(“ODpoints”, {
renderers : [ “Canvas” ]
});
//OD线
ODlineVector = new SuperMap.Layer.Vector(“ODline”);
//OD标注
ODlabelVector = new SuperMap.Layer.Vector(“labelVector”);
themeLayer = new SuperMap.Layer.Range(“OD图”);
themeLayer.id=”OD图”;
themeLayer.setOpacity(0.2);
// 图层基础样式
themeLayer.style = {
strokeColor: “#7A67EE”,
strokeWidth: 2,
pointerEvents: “visiblePainted”,
fill:false,
fillColor: “#ffffff”,
fillOpacity: 0
};
// 风格数组，设定分段范围对应的样式
themeLayer.styleGroups = styleGroups;
// 开启 hover 高亮效果
themeLayer.isHoverAble = true;
// hover高亮样式
themeLayer.highlightStyle = {
stroke : true,
strokeWidth : 4,
strokeColor : ‘blue’,
fillColor : “#00EEEE”,
shadowBlur: 6,
shadowColor: “#000000”,
shadowOffsetX : 4,
shadowOffsetY : 4,
fillOpacity : 0.8
};
// 注册 mouse 事件
themeLayer.on(“click”, mouseEvent);
map.addLayers([ODlabelVector, ODlineVector,ODpointsVector, ODanimatorVector,themeLayer]);
// 兼容PC与移动端
var broz = SuperMap.Util.getBrowser();
var callbacks = {};
if (broz.device === ‘android’ || broz.device === ‘apple’) {
callbacks = {
click : openDianzldInfoResultListWin,
over : openDianzldInfoWin,
out : closeDianzldInfoWin
};
} else {
callbacks = {
click : openDianzldInfoResultListWin,
over : openDianzldInfoWin,
out : closeDianzldInfoWin
};
}
selectFeature = new SuperMap.Control.SelectFeature(ODpointsVector, {
callbacks : callbacks,
hover : true
});
// map上添加控件
map.addControl(selectFeature);
// 激活控件
selectFeature.activate();
setTimeout(“addXZQHThemeLayer()”, 200);
}
function addXZQHThemeLayer(){
//清楚地图上所有的覆盖物
clearStatus();
var getFeatureParam,
getFeatureBySQLService,
getFeatureBySQLParams;
var queryWhere = “”;
var name = “市界@xzqh”;
var dataSet = [“xzqh:市界”];
getFeatureParam = new SuperMap.REST.FilterParameter({
name: name,
attributeFilter: queryWhere
});
getFeatureBySQLParams = new SuperMap.REST.GetFeaturesBySQLParameters({
queryParameter: getFeatureParam,
datasetNames: dataSet
});
getFeatureBySQLService = new SuperMap.REST.GetFeaturesBySQLService(
xzqh_url, {
eventListeners: {
“processCompleted”: processXZQHThemeCompleted,
“processFailed”: processFailed
}
});
getFeatureBySQLService.processAsync(getFeatureBySQLParams);
}
function processXZQHThemeCompleted(queryEventArgs) {
var result = queryEventArgs.result;
if (result && result.features) {
features = result.features
for (i = 0, len = features.length; i < len; i++) {
fea = features[i];
var code = fea.attributes.XINGZHENGQ;
for (var j = 0; j < themeData.length; j++) {
var Xingzqh = themeData[j].Xingzqh;
if (Xingzqh.indexOf(code) > -1) {
fea.attributes.SmArea = themeData[j].Num;
}
}
themeLayer.addFeatures(fea);
}
}
}
function showODlines(){
var pointFeatures = [];
var lines = [];
var points = [];
var knum = 9;//分割直线单位
var geoArr = [];
endNum = 3;
for (var i = 0, len = ODlines.length; i < len; i++) {
var city = ODlines[i];
if(city.shifdqhmc != city.muddqhmc){
var point1 = new SuperMap.Geometry.Point(city.shifdjingd,city.shifdweid);
var point2 = new SuperMap.Geometry.Point((city.shifdjingd*1 + city.muddjingd*1)/2 * (1 – 0.005),
(city.shifdweid*1+city.muddweid*1)/2 * (1 – 0.005) );
var point3 = new SuperMap.Geometry.Point(city.muddjingd,city.muddweid);
//城市之间距离计算.
var distance = point1.distanceTo(point3);
var geo1;
if(distance < 1){
points.push(point1);
//添加过渡点
var jingd, weid;
for(var k = 1; k < knum; k++){
if(city.shifdjingd < city.muddjingd){
jingd = city.shifdjingd*1 + Math.abs(city.shifdjingd*1 – city.muddjingd*1) * k/knum;
}else{
jingd = city.shifdjingd*1 – Math.abs(city.shifdjingd*1 – city.muddjingd*1) * k/knum;
}
if(city.shifdweid < city.muddweid){
weid = city.shifdweid*1 + Math.abs(city.shifdweid*1 – city.muddweid*1) * k/knum;
}else{
weid = city.shifdweid*1 – Math.abs(city.shifdweid*1 – city.muddweid*1) * k/knum;
}
var point = new SuperMap.Geometry.Point(jingd,weid);
points.push(point);
}
points.push(point3);
geo1 = new SuperMap.Geometry.LineString(points);
}else{
points.push(point1);
points.push(point2);
points.push(point3);
geo1 = new SuperMap.Geometry.LineString.createBezier2(points,10);
}
geoArr = geo1.getVertices();
var stylepoint = {
fillColor : “#ffFFFF”,
fillOpacity : 0.8,
strokeOpacity : 0,
pointRadius : 3,
graphicName: “square”,
nodeNumber:3,
nodeDistance:100
};
for(var h = 0;h < geoArr.length;h++){
var point = new SuperMap.Geometry.Point(geoArr[h].x,geoArr[h].y);
var pointFeature = new SuperMap.Feature.Vector(point, {
FEATUREID : i,
TIME : h
}, stylepoint);
points.push(point);
pointFeatures.push(pointFeature);
}
if(geoArr.length > endNum ){
endNum = geoArr.length;
ODanimatorVector.animator.setEndTime(geoArr.length*1+2);
}
var jingdu = city.shifdjingd * 1;
var weidu = city.shifdweid * 1;
var color = styleGroups[i];
var styleP = {
strokeColor: color,
strokeWidth: 3,
pointerEvents: “visiblePainted”,
fillColor: color,
fillOpacity: 0.8,
pointRadius:1
};
var vector1 = new SuperMap.Feature.Vector(
geo1,{
shifdqhmc:city.shifdqhmc,
muddqhmc:city.muddqhmc
},styleP
);
lines.push(vector1);
points = [];
}
}
ODlineVector.addFeatures(lines);
ODanimatorVector.addFeatures(pointFeatures);
ODanimatorVector.animator.start();
}
//展示OD点
function showODpoints(){
ODpointsVector.removeAllFeatures();
ODlabelVector.removeAllFeatures();
var resolution = map.getResolutionForZoom(map.zoom);
var pointFeatures = [];
//添加终点
for(var i = 0; i < ODpoints.length;i++){
var city = ODpoints[i];
// creatMarker(city);
var poiorigin = new SuperMap.Geometry.Point(city.muddjingd,city.muddweid);
createPieData(poiorigin,city,i+1);
}
//添加起点
var originpoint = ODpoints[0];
var poiorigin = new SuperMap.Geometry.Point(originpoint.shifdjingd,originpoint.shifdweid);
createPieData(poiorigin,originpoint,0);
}
function createPieData(poiorigin,node,index) {
var color = styleGroups[index];
var pointVector = new SuperMap.Feature.Vector(poiorigin);
pointVector.style={
fillColor:color,
// fillOpacity: 0.8,
strokeColor:color,
strokeWidth: 0.1,
pointRadius:getPointRadiusByNum(parseInt(node.ges)),
cursor: “pointer”,
label:node.ges,
fontColor:’#ffffff’,
fontSize:’16px’
};
pointVector.attribute={
shifdqhdm : node.shifdqhdm,
shifdqhmc : node.shifdqhmc,
muddqhdm : node.muddqhdm,
muddqhmc : node.muddqhmc,
shifsn : node.shifsn,
ges : node.ges
}
ODpointsVector.addFeatures([ pointVector ]);
}
function getPointRadiusByNum(num){
var pointRadius = 16;
if(num < 10) pointRadius = 16;
if(num >= 10 && num < 100) pointRadius = 18;
if(num >= 100 && num < 1000) pointRadius = 22;
if(num >= 1000 && num < 10000) pointRadius = 26;
if(num >= 10000 && num < 100000) pointRadius = 30;
return pointRadius;
}
/**
* 清空OD图层相关数据
*/
function clearODLayer() {
if(ODanimatorVector) {ODanimatorVector.removeAllFeatures(); ODanimatorVector.animator.stop();};
if(ODpointsVector){ODpointsVector.removeAllFeatures();}
if(ODlineVector){ODlineVector.removeAllFeatures();}
if(ODlabelVector){ODlabelVector.removeAllFeatures();}
}
//事件处理，控制信息框数据显示
function mouseEvent(e) {
if (e.target && e.target.refDataID) {
var fid = e.target.refDataID;
var fea = themeLayer.getFeatureById(fid);
if (fea) {
// openInfoWin(fea);
chooseOriginCode = fea.data.XINGZHENGQ;
getODData(chooseOriginCode);
}
// } else {
// closeInfoWin();
}
}
//打弹窗，显示具体信息
function openDianzldInfoWin(feature) {
var attr = feature.attribute;
var shifdqhmc = attr.shifdqhmc;
var muddqhmc = attr.muddqhmc;
var ges = attr.ges;
closeInfoWin();
// 组织弹窗内容
var contentHTML = “<div style = ‘font-size:16px;line-height:40px;’>”;
contentHTML += “<span>” +shifdqhmc +” –> “+ muddqhmc + ” ：<span style=’color:#5185DB;font-weight:bold’>” + ges + “</span> 辆</span></div>”;
var contentSize = new SuperMap.Size(220, 50);
// 新建一个弹窗并加入地图
var point = feature.geometry.getCentroid();
popup = new SuperMap.Popup.Anchored(“popwin”,
new SuperMap.LonLat(point.x,point.y),
contentSize,
contentHTML,
null,
false,
function() {
map.removePopup(popup);
});
popup.setOpacity(0.9);
map.addPopup(popup);
}
//关闭弹窗
function closeDianzldInfoWin() {
if (popup) {
try {
map.removePopup(popup);
} catch (e) {
}
}
}
//返回的option中包含rgba、rgb、hex、r、g、b、a七个值，分别为：
//rgba：取得rgba()格式的颜色，如rgba(204,173,191,0.7)
//rgb：取得rgb()格式的颜色，如rgba(204,173,191)
//hex：取得十六进制格式的颜色，如#CCADBF
//r：只获取颜色的红色（red）值，如204
//g：只获取颜色的绿色（green）值，如173
//b：只获取颜色的蓝色（blue）值，如191
//a：只获取颜色的透明度（alpha）值，如0.7
if (typeof HTMLElement == ‘undefined’){
var HTMLElement = function(){};
if (window.webkit) document.createElement(“iframe”); //fixes safari
HTMLElement.prototype = (window.webkit) ? window[“[[DOMElement.prototype]]”] : {};
}
HTMLElement.prototype.getPixelColor = function(x, y){
var thisContext = this.getContext(“2d”);
var imageData = thisContext.getImageData(x, y, 1, 1);
// 获取该点像素数据
var pixel = imageData.data;
var r = pixel[0];
var g = pixel[1];
var b = pixel[2];
var a = pixel[3] / 255
a = Math.round(a * 100) / 100;
var rHex = r.toString(16);
r < 16 && (rHex = “0” + rHex);
var gHex = g.toString(16);
g < 16 && (gHex = “0” + gHex);
var bHex = b.toString(16);
b < 16 && (bHex = “0” + bHex);
var rgbaColor = “rgba(” + r + “,” + g + “,” + b + “,” + a + “)”;
var rgbColor = “rgb(” + r + “,” + g + “,” + b + “)”;
var hexColor = “#” + rHex + gHex + bHex;
return {
rgba : rgbaColor,
rgb : rgbColor,
hex : hexColor,
r : r,
g : g,
b : b,
a : a
};
}
转载自：https://blog.csdn.net/qq_16557323/article/details/76618802
