|
|
@@ -17,6 +17,8 @@
|
|
|
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=7XivTux4H2e1ifKLjvEhxfuayDYxAluq">
|
|
|
</script>
|
|
|
<script src="js/urljson.js"></script>
|
|
|
+ <script src="js/echarts.min.js"></script>
|
|
|
+ <script src="js/bmap.min.js"></script>
|
|
|
<style>
|
|
|
.toplogo img {
|
|
|
margin-bottom: 17px;
|
|
|
@@ -57,10 +59,10 @@
|
|
|
.btnrlt {
|
|
|
background-image: url(images/btn-cyrlt.png);
|
|
|
background-size: 100% 100%;
|
|
|
- width: 230px;
|
|
|
- height: 90px;
|
|
|
+ width: 195px;
|
|
|
+ height: 71px;
|
|
|
font-weight: bold;
|
|
|
- font-size: 30px;
|
|
|
+ font-size: 26px;
|
|
|
color: #FFFFFF;
|
|
|
text-shadow: 3px 5px 7px rgba(11, 58, 165, 0.43);
|
|
|
position: absolute;
|
|
|
@@ -68,7 +70,7 @@
|
|
|
right: 10px;
|
|
|
z-index: 100;
|
|
|
text-align: center;
|
|
|
- line-height: 80px;
|
|
|
+ line-height: 58px;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
|
|
|
@@ -96,7 +98,8 @@
|
|
|
|
|
|
<body>
|
|
|
<div id="ggyq" style="position: relative;">
|
|
|
- <div class="btnrlt">产业热力图</div>
|
|
|
+ <div class="btnrlt" @click="currentmap=1" v-show="currentmap==2">产业地图</div>
|
|
|
+ <div class="btnrlt" @click="currentmap=2" v-show="currentmap==1">产业热力图</div>
|
|
|
<div class="top">
|
|
|
<div class="toplogo">
|
|
|
<img src="images/gyylogo.png" alt="">
|
|
|
@@ -157,7 +160,7 @@
|
|
|
<div class="list" @click="goToLink('rcfw.html')"><img src="images/tsfw6.png" alt="">
|
|
|
<span>人才服务</span>
|
|
|
</div>
|
|
|
- <div class="list" @click="goToLink('znxz.html')"><img src="images/tsfw2.png" alt="">
|
|
|
+ <div class="list" @click="goToLink('znxzchoice.html')"><img src="images/tsfw2.png" alt="">
|
|
|
<span>智能选址</span>
|
|
|
</div>
|
|
|
<div class="list" @click="goToLink('wybdb.html')"><img src="images/tsfw7.png" alt="">
|
|
|
@@ -355,7 +358,9 @@ border: 1px solid #4B98F6;color: #4B98F6;" @click="goToLink('qysmzq.html')">
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="contentright" id="mapcontainer">
|
|
|
+ <div class="contentright" id="mapcontainerdt" v-show="currentmap==1">
|
|
|
+ </div>
|
|
|
+ <div class="contentright" id="mapcontainerrlt" v-show="currentmap==2">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -368,6 +373,7 @@ border: 1px solid #4B98F6;color: #4B98F6;" @click="goToLink('qysmzq.html')">
|
|
|
return {
|
|
|
pageSize: 20,
|
|
|
jbqk: {},
|
|
|
+ currentmap: 1,
|
|
|
qwysList: [],
|
|
|
yqhdList: [],
|
|
|
mxqyList: [],
|
|
|
@@ -435,7 +441,7 @@ border: 1px solid #4B98F6;color: #4B98F6;" @click="goToLink('qysmzq.html')">
|
|
|
})
|
|
|
},
|
|
|
loadMap(points) {
|
|
|
- let map = new BMap.Map("mapcontainer");
|
|
|
+ let map = new BMap.Map("mapcontainerdt");
|
|
|
map.enableScrollWheelZoom();// 启用滚轮缩放
|
|
|
map.enableDragging(); // 启用拖拽功能
|
|
|
const addr = new URL(window.location.href);
|
|
|
@@ -635,18 +641,57 @@ border: 1px solid #4B98F6;color: #4B98F6;" @click="goToLink('qysmzq.html')">
|
|
|
});
|
|
|
</script>
|
|
|
<script>
|
|
|
- // const scrollContent = document.querySelector('.scrollContent');
|
|
|
+ var app = {};
|
|
|
+
|
|
|
+ var chartDom = document.getElementById('mapcontainerrlt');
|
|
|
+ var myChart = echarts.init(chartDom);
|
|
|
+ var option;
|
|
|
|
|
|
- // function generateContent() {
|
|
|
- // const content = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...';
|
|
|
- // let generatedContent = '';
|
|
|
- // for (let i = 0; i < 5; i++) { // 生成5次以创建循环效果
|
|
|
- // generatedContent += content;
|
|
|
- // }
|
|
|
- // scrollContent.innerHTML = generatedContent;
|
|
|
- // }
|
|
|
+ $.get('json/hangzhou-tracks.json', function (data) {
|
|
|
+ var points = [].concat.apply(
|
|
|
+ [],
|
|
|
+ data.map(function (track) {
|
|
|
+ return track.map(function (seg) {
|
|
|
+ return seg.coord.concat([1]);
|
|
|
+ });
|
|
|
+ })
|
|
|
+ );
|
|
|
+ myChart.setOption(
|
|
|
+ (option = {
|
|
|
+ animation: false,
|
|
|
+ bmap: {
|
|
|
+ center: [120.13066322374, 30.240018034923],
|
|
|
+ zoom: 14,
|
|
|
+ roam: true
|
|
|
+ },
|
|
|
+ visualMap: {
|
|
|
+ show: false,
|
|
|
+ top: 'top',
|
|
|
+ min: 0,
|
|
|
+ max: 5,
|
|
|
+ seriesIndex: 0,
|
|
|
+ calculable: true,
|
|
|
+ inRange: {
|
|
|
+ color: ['blue', 'blue', 'green', 'yellow', 'red']
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: 'heatmap',
|
|
|
+ coordinateSystem: 'bmap',
|
|
|
+ data: points,
|
|
|
+ pointSize: 5,
|
|
|
+ blurSize: 6
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ })
|
|
|
+ );
|
|
|
+ // 添加百度地图插件
|
|
|
+ var bmap = myChart.getModel().getComponent('bmap').getBMap();
|
|
|
+ bmap.addControl(new BMap.MapTypeControl());
|
|
|
+ });
|
|
|
|
|
|
- // generateContent();
|
|
|
+ option && myChart.setOption(option);
|
|
|
</script>
|
|
|
|
|
|
</html>
|
MS-FUUVYHVOEAYJ\Administrator