dev
.tmpl
.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>
<%= htmlWebpackPlugin
.options
.title %>
</title>
<link rel="stylesheet" href="//at
.alicdn
.com/t/font_437295_4qcjd3ysd4s
.css" />
</head>
<body>
<div id="loaded"></div>
<div id="s-loading">
<span style="font-size
: 20px;">
<i></i>
<i></i>
<i></i>
<i></i>
</span>
</div>
<%= htmlWebpackPlugin
.options
.ref %>
<div id="container"></div>
<script type="text/javascript">
(function () {
function showUpdateMsg() {
setTimeout(() => {
document
.body
.innerHTML = `<div style="text-align
: center;padding-top
: 20%;font-size
: 20px;font-weight
: bold">
您正在
使用的浏览器版本过低，将不能正常浏览和
使用。
<div>
<a href="https
://www
.microsoft
.com/edge" target="_blank">
使用 Microsoft Edge 浏览器</a>
<div style="width
:20px;"></div>
<a href="https
://www
.google
.cn/chrome/" target="_blank">
使用 Google Chrome 浏览器</a>
</div>
</div>`;
}, 1000);
}
var explorer = window
.navigator
.userAgent
.toLowerCase();
// ie11及之前的
if (explorer
.indexOf('msie') > -1 || explorer
.indexOf('trident') > -1) {
showUpdateMsg();
}
// 目前只对有webkit内核标识的浏览器做判断，其它的不做判断
if (explorer
.indexOf('applewebkit') > -1) {
if (explorer
.indexOf('chrome') > -1) {
var browser = explorer
.match(/chrome\/([\d
.]+)/)[1];
var verArry = browser
.split('
.');
if (Number(verArry[0]) < 31) {
showUpdateMsg();
}
}
}
return false;
})();
window
.onload = function () { };
</script>
<script src="https
://cdn
.staticfile
.org/reqwest/2
.0
.5/reqwest
.js"></script>
<script src="https
://cdn
.staticfile
.org/babel-polyfill/7
.2
.5/polyfill
.js"></script>
<script src="https
://cdn
.staticfile
.org/
react/16
.8
.6/umd/
react.development
.js"></script>
<script src="https
://cdn
.staticfile
.org/
react-dom/16
.8
.6/umd/
react-dom
.development
.js"></script>
<script src="https
://cdn
.staticfile
.org/antd/2
.13
.14/antd
.js"></script>
<script src="https
://cdn
.staticfile
.org/
react-router-dom/4
.2
.0/
react-router-dom
.js"></script>
<script src="https
://cdn
.staticfile
.org/
react-router/4
.2
.0/
react-router
.js"></script>
<script src="https
://cdn
.staticfile
.org/moment
.js/2
.24
.0/moment
.min
.js"></script>
<script src="https
://cdn
.staticfile
.org/echarts/6
.0
.0/echarts
.common
.min
.js"></script>
<script src="//mapv
.baidu
.com/build/mapv
.min
.js"></script>
<script src="https
://code
.bdstatic
.com/npm/mapvgl@1
.0
.0-beta
.188/dist/mapvgl
.min
.js"></script>
<script src="https
://
api.map
.baidu
.com/
api?v=3
.0&ak=1111"></script>
<script src="https
://
api.map
.baidu
.com/library/LuShu/1
.2/src/LuShu_min
.js"></script>
<script src="https
://
api.map
.baidu
.com/
api?v=1
.0&type=webgl&ak=1111"></script>
<script src=" https
://clms-dtd
.oss-cn-beijing
.aliyuncs
.com/ws/
js/CanvasLayer
.js"></script>
</body>
</html>
pages/antv/index
:
import
React from '
react';
import 'styles/less/antv
.less';
import { Form, Row, Col } from 'antd';
import moment from 'moment/moment';
import DateDayTime from '
./components/DateDayTime';
import BarChart from '
./components/Top3BarChart';
import LoadBarChart from '
./components/LoadBarChart';
import UnLoadBarChart from '
./components/UnLoadBarChart';
import PieChart from '
./components/PieChart';
import ScrollChart from '
./components/ScrollChart';
import HorizonBarChart from '
./components/HorizonBarChart';
import TimeLineChart from '
./components/TimeLineChart';
import ZylChart from '
./components/ZylChart';
import JiaoyiChart from '
./components/JiaoyiChart';
const demoImg = 'https
://img
.wuliu01
.com/antv-carrier-img/map
.png';
const wdjImg = 'https
://img
.wuliu01
.com/antv-carrier-img/icon_wdj
.png';
import { connect } from 'dva';
import Tools from 'utils';
import { setState } from '@antv/s2';
// import { GeoLocation } from "
./components/GeoLocation";
moment
.locale('zh-cn', {
weekdays
: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
});
class AntV extends
React.Component {
constructor(props) {
super(props);
// this
.height = 240*document
.body
.clientHeight/900;
this
.state = {
activeTab
: 0,
dateInfo
: {
date
: moment()
.format('YYYY年MM月DD日'),
day
: moment
.weekdays(moment()
.day()),
time
: moment()
.format('HH
:mm
:ss'),
},
};
}
componentDidMount() {
this
.GeoLocation();
// this
.autoRefresh();
setInterval(() => {
const value = this
.state
.activeTab === 0 ? 1
: 0;
this
.setState({ activeTab
: value });
}, 3000);
}
codeByCityName(province, cityName) {
const {
dicModel
: { citys },
} = this
.props;
// console
.log('city
:' + cityName);
// console
.log(citys);
for (let i = 0; i < citys
.length; i++) {
if (citys[i]
.label === province) {
if (citys[i]
.children) {
for (let j = 0; j < citys[i]
.children
.length; j++) {
if (citys[i]
.children[j]
.label === cityName) {
return citys[i]
.children[j]
.value;
}
}
}
return '';
}
}
return '';
}
GeoLocation = () => {
const _this = this;
const { dispatch } = this
.props;
var map = new BMap
.Map('ditu');
// var point = new BMapGL
.Point(116
.331398,39
.897445);
// map
.centerAndZoom(point,12);
var geolocation = new BMap
.Geolocation();
geolocation
.getCurrentPosition(function (r) {
if (this
.getStatus() == BMAP_STATUS_SUCCESS) {
var mk = new BMap
.Marker(r
.point);
map
.addOverlay(mk);
map
.panTo(r
.point);
// console
.log('您的位置：' + r
.point
.lng + ',' + r
.point
.lat);
// 创建地理编码实例
var myGeo = new BMap
.Geocoder();
// 根据坐标得到地址描述
myGeo
.getLocation(new BMap
.Point(r
.point
.lng, r
.point
.lat), function (result) {
if (result) {
// console
.log(result);
const code = _this
.codeByCityName(
result
.addressComponents
.province,
result
.addressComponents
.city
);
// console
.log(code);
if (code) {
dispatch({
type
: 'antvModel/getWeather',
payload
: {
districtId
: code,
},
});
}
}
});
} else {
console
.log('failed' + this
.getStatus());
}
});
};
render() {
// console
.log('activeTab', this
.state
.activeTab);
const {
antvModel
: {
receiveGoodsTotal,
tradeStatistics,
waybillStatus,
shipperGoodsTotal,
waybillList,
sendGoodsTotal,
user,
traffic,
goodsType,
weather,
},
} = this
.props;
// const data = indexModel ? indexModel
.citys
: [];
// useEffect(() => {
// GeoLocation();
// props
.dispatch({
// type
: "antvModel/getAntvData",
// });
// }, []);
let totalAmount = 0;
let minYear, maxYear;
if (traffic) {
for (let i = 0; i < traffic
.length; i++) {
totalAmount += traffic[i]
.totalAmount;
const yyyymmArr = traffic[i]['months']
.split('-');
traffic[i]['month'] = yyyymmArr[1] + '月';
if (i === 0) {
minYear = yyyymmArr[0];
} else if (i === traffic
.length - 1) {
maxYear = yyyymmArr[0];
}
}
}
let userArray = [];
if (user && user
.shipper) {
userArray
.push({ 用户类型
: '货主', 用户数
: user
.shipper });
userArray
.push({ 用户类型
: '独立司机', 用户数
: user
.standAloneDriver });
userArray
.push({ 用户类型
: '车队司机', 用户数
: user
.captainDriver });
userArray
.push({ 用户类型
: '车队', 用户数
: user
.captainNum });
}
return (
<Form className="App">
<div className="App-header">
<div className="App-header-left">
<div id="ditu" style={{ display
: 'none' }}></div>
<Col span={8} className="App-header-left-city">
{weather?
.location?
.city}
</Col>
<Col span={8} className="App-header-left-weather">
{weather?
.now?
.text}
</Col>
<Col span={8} className="App-header-left-temperature">
<img src={wdjImg} height={15} alt="" />
{weather?
.forecasts?
.[0]?
.low}-{weather?
.forecasts?
.[0]?
.high}℃
</Col>
</div>
<div span={8} className="App-title">
物流临沂网络货运控制塔
</div>
<DateDayTime />
</div>
<Row className="App-body-top">
<Col span={6}>
<Row>
<Col className="chart-container" style={{ marginTop
: 0 }}>
<div className="container-title">货运总量</div>
<div style={{ height
: '4px' }}></div>
<div className="summary-container">
<div className="summary-container-cell">
<div className="summary-container-cell-title">累计运量</div>
<div className="summary-container-cell-value">{totalAmount} 吨</div>
</div>
<div className="summary-container-cell">
<div className="summary-container-cell-title">统计日期</div>
<div className="summary-container-cell-value">
{minYear === maxYear ? ''
: minYear + '-'}
{maxYear}年
</div>
</div>
</div>
{traffic && traffic
.length > 0 && <TimeLineChart data={traffic} />}
</Col>
</Row>
<Row>
<Col className="chart-container">
<div className="container-title">货运类型占比</div>
{goodsType && goodsType
.length > 0 && <PieChart data={goodsType} />}
</Col>
</Row>
{this
.state
.activeTab === 0 ? (
<Row className="load-active-container">
<div className="container-title">
<div className="active-title" onClick={() => setState({ activeTab
: 0 })}>
装货区域
</div>
<div className="inactive-title" onClick={() => setState({ activeTab
: 1 })}>
卸货区域
</div>
</div>
{sendGoodsTotal && sendGoodsTotal
.length > 0 && (
<LoadBarChart data={sendGoodsTotal} />
)}
</Row>
)
: (
<Row className="unload-active-container">
<div className="container-title">
<div className="inactive-title" onClick={() => setState({ activeTab
: 0 })}>
装货区域
</div>
<div className="active-title" onClick={() => setState({ activeTab
: 1 })}>
卸货区域
</div>
</div>
{receiveGoodsTotal && receiveGoodsTotal
.length > 0 && (
<UnLoadBarChart data={receiveGoodsTotal} />
)}
</Row>
)}
</Col>
<Col span={12} className="App-body-center">
<Row>
<Col className="App-body-center-top">
<img src={demoImg} className="map" alt="" />
</Col>
<div className="cars-info">
在线车辆<span className="zyl-cell-content-amount-num">{Math
.round(100+100*Math
.random())}</span>台
</div>
</Row>
<Row className="App-body-center-bottom">
<Col
span={12}
className="chart-container"
style={{ height
: (240 * document
.body
.clientHeight) / 900, marginTop
: 0 }}
>
<div className="container-title">装运量</div>
<ZylChart waybillStatus={waybillStatus} />
</Col>
<Col
span={12}
className="chart-container"
style={{ height
: (240 * document
.body
.clientHeight) / 900, marginTop
: 0 }}
>
<div className="container-title">企业发运量Top3</div>
{shipperGoodsTotal && shipperGoodsTotal
.length > 0 && (
<BarChart data={shipperGoodsTotal} />
)}
</Col>
</Row>
</Col>
<Col span={6}>
<Row>
<Col className="chart-container" style={{ marginTop
: 0 }}>
<div className="container-title">交易额</div>
<div style={{ height
: '8px' }}></div>
<JiaoyiChart tradeStatistics={tradeStatistics} />
</Col>
</Row>
<Row>
<Col className="chart-container">
<div className="container-title">平台用户</div>
<div style={{ height
: '4px' }}></div>
{userArray && userArray
.length > 0 && <HorizonBarChart data={userArray} />}
</Col>
</Row>
<Row>
<Col
className="chart-container"
style={{ height
: (240 * document
.body
.clientHeight) / 900 }}
>
<div className="container-title">实时运单</div>
{waybillList && waybillList
.length > 0 && <ScrollChart data={waybillList} />}
</Col>
</Row>
</Col>
</Row>
<div style={{ height
: '12px' }}></div>
</Form>
);
}
}
export default connect(({ antvModel, dicModel }) => ({
antvModel,
dicModel,
}))(AntV);
现在这里的地图是个图片，改成
百度地图的MapVGL，
下面是
百度地图的MapVGL示例参考：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>MapVGL</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="initial-scale=1
.0, user-scalable=no">
<style>
html,
body {
width
: 100%;
height
: 100%;
margin
: 0;
padding
: 0;
}
#map_container {
width
: 100%;
height
: 100%;
margin
: 0;
}
</style>
<script src="//
api.map
.baidu
.com/
api?v=1
.0&type=webgl&ak=您的密钥"></script>
<script src="//mapv
.baidu
.com/build/mapv
.min
.js"></script>
<script src="static/common
.js"></script>
<script src="https
://code
.bdstatic
.com/npm/mapvgl@1
.0
.0-beta
.189/dist/mapvgl
.min
.js"></script>
<script src="https
://code
.bdstatic
.com/npm/mapvgl@1
.0
.0-beta
.189/dist/mapvgl
.threelayers
.min
.js"></script>
</head>
<body>
<div id="map_container"></div>
<script>
/* global BMapGL */
/* global mapv */
/* global mapvgl */
/* global initMap */
/* global purpleStyle */
var map = initMap({
tilt
: 41
.8,
heading
: 0,
center
: [105
.552849,28
.847593],
zoom
: 5,
style
: purpleStyle
});
var citys = [
'北京', '天津', '上海', '重庆', '石家庄', '太原', '呼和浩特',
'哈尔滨', '长春', '沈阳', '济南', '南京', '合肥', '杭州', '南昌', '福州',
'郑州', '武汉', '长沙', '广州', '南宁', '西安', '银川', '兰州', '西宁',
'乌鲁木齐', '成都', '贵阳', '昆明', '拉萨', '海口'
];
var randomCount = 50; // 模拟的飞线的数量
var curve = new mapvgl
.BezierCurve();
var data = [];
// 构造数据
while (randomCount--) {
var startPoint = mapv
.utilCityCenter
.getCenterByCityName(citys[parseInt(Math
.random() * citys
.length, 10)]);
var endPoint = mapv
.utilCityCenter
.getCenterByCityName(citys[parseInt(Math
.random() * citys
.length, 10)]);
var length = 0;
var startPoint = map
.lnglatToMercator(startPoint
.lng, startPoint
.lat);
var endPoint = map
.lnglatToMercator(endPoint
.lng, endPoint
.lat);
curve
.setOptions({
start
: [startPoint[0], startPoint[1]],
end
: [endPoint[0], endPoint[1]]
});
var curveModelData = curve
.getPoints(60);
data
.push({
geometry
: {
type
: 'LineString',
coordinates
: curveModelData
},
properties
: {
count
: Math
.random()
}
});
}
var view = new mapvgl
.View({
// postProcessing
: new mapvgl
.PostProcessing({
// passes
: [{
// name
: 'unrealBloom',
// threshold
: 0
.0,
// strength
: 1
.5,
// radius
: 1
.0
// }]
// }),
effects
: [
new mapvgl
.BrightEffect({
threshold
: 0,
blurSize
: 2,
clarity
: 0
.4
}),
],
map
: map
});
var lineLayer = new mapvgl
.LineTripLayer({
color
: 'rgb(255, 255, 204)', // 飞线动画颜色
step
: 0
.3
});
view
.addLayer(lineLayer);
lineLayer
.setData(data
.map(item => {
item
.geometry
.coordinates = item
.geometry
.coordinates
.map(item => {
item[2] += 3;
return item;
});
return item;
}));
var lineLayer = new mapvgl
.SimpleLineLayer({
blend
: 'lighter',
color
: 'rgb(255, 153, 0, 0
.6)' // 飞线颜色
});
view
.addLayer(lineLayer);
lineLayer
.setData(data);
</script>
</body>
</html>
本文探讨了使用jsonp/featch-jsonp请求百度天气API遇到的跨域问题，并对比尝试了高德API的成功案例。
扫一扫
1214
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
