|
|
@@ -1,219 +1,261 @@
|
|
|
-<!-- -->
|
|
|
+<!-- mapui-->
|
|
|
<template>
|
|
|
- <div class="inner">
|
|
|
- <div class="mapCover">
|
|
|
- <div id="map">地图</div>
|
|
|
+<div class='map'>
|
|
|
+ <div id="container">加载数据，请稍候...</div>
|
|
|
+ <div class="leftNavBox">
|
|
|
+ <div class="searchBox">
|
|
|
+ <el-select size="small" @change="search('province')" filterable v-model="form.province" placeholder="选择省">
|
|
|
+ <el-option label="--请选择--" value=""></el-option>
|
|
|
+ <el-option
|
|
|
+ v-for="item in provinceList"
|
|
|
+ :key="item.adcode"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.adcode">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-select size="small" @change="search('city')" filterable v-model="form.city" placeholder="选择市">
|
|
|
+ <el-option label="--请选择--" value=""></el-option>
|
|
|
+ <el-option
|
|
|
+ v-for="item in cityList"
|
|
|
+ :key="item.adcode"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.adcode">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-select size="small" @change="search('district')" filterable v-model="form.district" placeholder="选择区">
|
|
|
+ <el-option label="--请选择--" value=""></el-option>
|
|
|
+ <el-option
|
|
|
+ v-for="item in districtList"
|
|
|
+ :key="item.adcode"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.adcode">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="listBox">
|
|
|
+ <div class="projectSearch">
|
|
|
+ <div>项目列表</div>
|
|
|
+ <div>
|
|
|
+ <el-input
|
|
|
+ size="small"
|
|
|
+ placeholder="请输入项目名称"
|
|
|
+ v-model="input"
|
|
|
+ suffix-icon="el-icon-search"
|
|
|
+ clearable>
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div></div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="mapTypebox">
|
|
|
- <el-radio-group v-model="mapType" @change="changeMapType">
|
|
|
- <el-radio :label="0">标准图</el-radio>
|
|
|
- <el-radio :label="1">卫星图</el-radio>
|
|
|
- </el-radio-group>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
|
|
//例如：import 《组件名称》 from '《组件路径》';
|
|
|
-import { bd09togcj02,gcj02tobd09,wgs84togcj02,gcj02towgs84 } from "../../components/home/coordtransform_utils"; //纠偏方法
|
|
|
export default {
|
|
|
- //import引入的组件需要注入到对象中才能使用
|
|
|
- components: {
|
|
|
- },
|
|
|
- data() {
|
|
|
- //这里存放数据
|
|
|
- return {
|
|
|
- // center: [65.212881,31.279042],
|
|
|
- // zoom: 8,
|
|
|
- mapType: 1,
|
|
|
- tileLayer1: null,
|
|
|
- tileLayer2: null,
|
|
|
- equipListCurr:[],
|
|
|
- equipStyleObject:[
|
|
|
- {
|
|
|
- url: require("../../../static/images/projectIcon.png"), // 设别类型0
|
|
|
- size: new AMap.Size(70, 70), // 图标大小
|
|
|
- anchor: new AMap.Pixel(0,0) // 图标显示位置偏移量，基准点为图标左上角
|
|
|
- },
|
|
|
- {
|
|
|
- url: require("@/assets/images/home/mapView/scd.png"), // 设别类型1
|
|
|
- size: new AMap.Size(25, 15), // 图标大小
|
|
|
- anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
|
|
|
- },
|
|
|
- {
|
|
|
- url: require("@/assets/images/home/mapView/scd.png"), // 设别类型2
|
|
|
- size: new AMap.Size(25, 15), // 图标大小
|
|
|
- anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
|
|
|
- },
|
|
|
- {
|
|
|
- url: require("@/assets/images/home/mapView/cbd.png"), // 设别类型3
|
|
|
- size: new AMap.Size(25, 15), // 图标大小
|
|
|
- anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
|
|
|
- },
|
|
|
- {
|
|
|
- url: require("@/assets/images/home/mapView/xyq.png"), // 设别类型4
|
|
|
- size: new AMap.Size(25, 15), // 图标大小
|
|
|
- anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
|
|
|
- },
|
|
|
- {
|
|
|
- url: require("@/assets/images/home/mapView/qxz.png"), // 设别类型5
|
|
|
- size: new AMap.Size(25, 15), // 图标大小
|
|
|
- anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
|
|
|
- },
|
|
|
- {
|
|
|
- url: require("@/assets/images/home/mapView/jk.png"), // 设别类型6
|
|
|
- size: new AMap.Size(25, 15), // 图标大小
|
|
|
- anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
|
|
|
- },
|
|
|
- {
|
|
|
- url: require("@/assets/images/home/mapView/bzy.png"), // 设别类型7
|
|
|
- size: new AMap.Size(25, 15), // 图标大小
|
|
|
- anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
|
|
|
- },
|
|
|
- {
|
|
|
- url: require("@/assets/images/home/mapView/bzy.png"), // 设别类型8
|
|
|
- size: new AMap.Size(25, 15), // 图标大小
|
|
|
- anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
|
|
|
- },
|
|
|
- {
|
|
|
- url: require("@/assets/images/home/mapView/tccb.png"), // 设别类型9
|
|
|
- size: new AMap.Size(25, 15), // 图标大小
|
|
|
- anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
|
|
|
- },
|
|
|
- ],
|
|
|
- icon:{
|
|
|
- // 图标类型，现阶段只支持 image 类型
|
|
|
- type: 'image',
|
|
|
- // 图片 url
|
|
|
- image: require("../../../static/images/icon5.svg"),
|
|
|
- // 图片尺寸
|
|
|
- size: [74, 66],
|
|
|
- // 图片相对 position 的锚点，默认为 bottom-center
|
|
|
- anchor: 'center',
|
|
|
- },
|
|
|
- // markers: [
|
|
|
- // {
|
|
|
- // addr: [121.5273285, 31.21515044],
|
|
|
- // projectname: '南阳农田项目南阳农田项目',
|
|
|
- // uid:1
|
|
|
- // },
|
|
|
- // ],
|
|
|
- markersStatus:{
|
|
|
- iconOffset: [-70, -70],
|
|
|
- textOffset: [-35, 0],
|
|
|
- icon:require('../../../static/images/icon5.svg'),
|
|
|
- events: {
|
|
|
- click: (e) => {
|
|
|
- console.log(e.target.Ce.vid)
|
|
|
- console.log(this.markers[e.target.Ce.vid])
|
|
|
- // this.$store.state.user_id = this.markers[e.target.Ce.vid].uid
|
|
|
- this.$store.commit('setUserId',this.markers[e.target.Ce.vid].uid)
|
|
|
- this.$router.push('page1')
|
|
|
- },
|
|
|
- dragend: (e) => {
|
|
|
- console.log('---event---: dragend')
|
|
|
- // this.markers[0].position = [e.lnglat.lng, e.lnglat.lat];
|
|
|
- }
|
|
|
- },
|
|
|
- visible: true,
|
|
|
- draggable: false,
|
|
|
- },
|
|
|
- txtLabels:[],
|
|
|
- layer:null,
|
|
|
- markers:[],
|
|
|
- };
|
|
|
- },
|
|
|
- //监听属性 类似于data概念
|
|
|
- computed: {},
|
|
|
- //监控data中的数据变化
|
|
|
- watch: {},
|
|
|
- //方法集合
|
|
|
- methods: {
|
|
|
- // 初始化地图
|
|
|
- infoMap(){
|
|
|
- this.map = new AMap.Map("map", {
|
|
|
- center: this.center,
|
|
|
- resizeEnable: true,
|
|
|
- zoom: 4,
|
|
|
- lang: "en",
|
|
|
+//import引入的组件需要注入到对象中才能使用
|
|
|
+components: {},
|
|
|
+data() {
|
|
|
+//这里存放数据
|
|
|
+return {
|
|
|
+ map:null,
|
|
|
+ data:[],
|
|
|
+ topAdcodes:[100000],//全国区划编码
|
|
|
+ center:[116.3683244,39.915085],
|
|
|
+ zoom:4.5,
|
|
|
+ // 搜索
|
|
|
+ form:{
|
|
|
+ province:'',
|
|
|
+ city:'',
|
|
|
+ district:'',
|
|
|
+ },
|
|
|
+ provinceList:[],
|
|
|
+ cityList:[],
|
|
|
+ districtList:[],
|
|
|
+ district:null,
|
|
|
+ input:'',
|
|
|
+ polygons:[],
|
|
|
+};
|
|
|
+},
|
|
|
+//监听属性 类似于data概念
|
|
|
+computed: {},
|
|
|
+//监控data中的数据变化
|
|
|
+watch: {},
|
|
|
+//方法集合
|
|
|
+methods: {
|
|
|
+ initMap(){
|
|
|
+ //创建地图
|
|
|
+ var that = this
|
|
|
+ this.map = new AMap.Map('container', {
|
|
|
+ center:that.center,
|
|
|
+ zoom: that.zoom
|
|
|
+ });
|
|
|
+ AMapUI.loadUI(['control/BasicControl'], function(BasicControl) {
|
|
|
+ //缩放控件，显示Zoom值
|
|
|
+ that.map.addControl(new BasicControl.Zoom({
|
|
|
+ position: 'rb',
|
|
|
+ showZoomNum: true
|
|
|
+ }));
|
|
|
+ });
|
|
|
+ //加载相关组件
|
|
|
+ AMapUI.load(['ui/geo/DistrictCluster', 'lib/$'], function(DistrictCluster, $) {
|
|
|
+
|
|
|
+ //启动页面
|
|
|
+ that.initPage(DistrictCluster, $);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ initPage(DistrictCluster, $) {
|
|
|
+ var that = this;
|
|
|
+ var distCluster = new DistrictCluster({
|
|
|
+ map: that.map, //所属的地图实例
|
|
|
+ zIndex:11,
|
|
|
+ autoSetFitView: false,
|
|
|
+ topAdcodes: that.topAdcodes,
|
|
|
+ getPosition: function(item) {
|
|
|
+ if (!item) {
|
|
|
+ return null;
|
|
|
+ }
|
|
|
+ var parts = item.split(',');
|
|
|
+ //返回经纬度
|
|
|
+ return [parseFloat(parts[0]), parseFloat(parts[1])];
|
|
|
+ },
|
|
|
+ renderOptions: {
|
|
|
+ // clusterMarkerKeepConsistent: false, //marker的位置随交互变化
|
|
|
+ //基础样式
|
|
|
+ featureStyle: {
|
|
|
+ fillStyle: 'rgba(102,170,0,0.5)', //填充色
|
|
|
+ lineWidth: 2, //描边线宽
|
|
|
+ strokeStyle: '#4e6ef2', //描边色
|
|
|
+ //鼠标Hover后的样式
|
|
|
+ hoverOptions: {
|
|
|
+ fillStyle: 'rgba(255,255,255,0.2)'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //特定区划级别的默认样式
|
|
|
+ featureStyleByLevel: {
|
|
|
+ //全国
|
|
|
+ country: {
|
|
|
+ fillStyle: 'rgba(78,110,242,0.8)'
|
|
|
+ },
|
|
|
+ //省
|
|
|
+ province: {
|
|
|
+ fillStyle: 'rgba(78,110,242,0.7)'
|
|
|
+ },
|
|
|
+ //市
|
|
|
+ city: {
|
|
|
+ fillStyle: 'rgba(78,110,242,0.6)'
|
|
|
+ },
|
|
|
+ //区县
|
|
|
+ district: {
|
|
|
+ fillStyle:'rgba(78,110,242,0.5)'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getClusterMarker: function(feature, dataItems, recycledMarker) {
|
|
|
+
|
|
|
+ //不是当前feature，直接返回null
|
|
|
+ if(dataItems.length){
|
|
|
+ var container, title, body, nodeClassNames = {
|
|
|
+ title: 'amap-ui-district-cluster-marker-title',
|
|
|
+ body: 'amap-ui-district-cluster-marker-body',
|
|
|
+ container: 'amap-ui-district-cluster-marker'
|
|
|
+ };
|
|
|
+
|
|
|
+ console.log(recycledMarker);
|
|
|
+ if (recycledMarker) {
|
|
|
+ console.log(recycledMarker.getContent());
|
|
|
+
|
|
|
+ container = recycledMarker.getContent();
|
|
|
+
|
|
|
+ title = $(container).find('.' + nodeClassNames.title)[0];
|
|
|
+
|
|
|
+ body = $(container).find('.' + nodeClassNames.body)[0];
|
|
|
+
|
|
|
+ } else {
|
|
|
+
|
|
|
+ container = document.createElement('div');
|
|
|
+
|
|
|
+ title = document.createElement('span');
|
|
|
+
|
|
|
+ title.className = nodeClassNames.title;
|
|
|
+
|
|
|
+ body = document.createElement('span');
|
|
|
+
|
|
|
+ body.className = nodeClassNames.body;
|
|
|
+
|
|
|
+ container.appendChild(title);
|
|
|
+
|
|
|
+ container.appendChild(body);
|
|
|
+ }
|
|
|
+ console.log(feature.properties);
|
|
|
+
|
|
|
+ var props = feature.properties,
|
|
|
+ routeNames = [];
|
|
|
+
|
|
|
+ var classNameList = [nodeClassNames.container, 'level_' + props.level, 'adcode_' + props.adcode];
|
|
|
+
|
|
|
+ container.className = classNameList.join(' ');
|
|
|
+
|
|
|
+ if (routeNames.length > 0) {
|
|
|
+
|
|
|
+ routeNames.push(props.name);
|
|
|
+
|
|
|
+ container.setAttribute('title', routeNames.join('>'));
|
|
|
+
|
|
|
+ } else {
|
|
|
+ container.removeAttribute('title');
|
|
|
+ }
|
|
|
+
|
|
|
+ $(title).html(props.name);
|
|
|
+ $(body).html(dataItems.length);
|
|
|
+
|
|
|
+ var resultMarker = recycledMarker || new AMap.Marker({
|
|
|
+ topWhenClick: true,
|
|
|
+ offset: new AMap.Pixel(-20, -30),
|
|
|
+ content: container
|
|
|
+ });
|
|
|
+ console.log(container);
|
|
|
+ console.log(resultMarker);
|
|
|
+
|
|
|
+ return resultMarker;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
});
|
|
|
- AMap.plugin(
|
|
|
- [
|
|
|
- "AMap.ToolBar",
|
|
|
- "AMap.Scale",
|
|
|
- "AMap.MouseTool",
|
|
|
- "AMap.Geocoder",
|
|
|
- "AMap.PolyEditor",
|
|
|
- ],
|
|
|
- () => {
|
|
|
- this.map.addControl(new AMap.ToolBar());
|
|
|
- this.map.addControl(new AMap.Scale());
|
|
|
+ //监听区划面的点击
|
|
|
+ distCluster.on('clusterMarkerClick', function(e, feature) {
|
|
|
|
|
|
- this.geocoder = new AMap.Geocoder({
|
|
|
- city: "全国",
|
|
|
- radius: 1000,
|
|
|
- });
|
|
|
+ console.log(e)
|
|
|
+ console.log(feature)
|
|
|
+ console.log(that);
|
|
|
+ // that.$router.push('/plantGuard/page8')
|
|
|
+ //重绘
|
|
|
+ //distCluster.renderLater();
|
|
|
+ });
|
|
|
+ window.distCluster = distCluster;
|
|
|
|
|
|
- }
|
|
|
- );
|
|
|
- this.tileLayer1 = new AMap.TileLayer({
|
|
|
- tileUrl:
|
|
|
- "http://t{0,1,2,3,4,5,6,7}.tianditu.gov.cn/DataServer?T=img_w&tk=888bc7de1a5f14aa1b335b02e558d9b3&x=[x]&y=[y]&l=[z]",
|
|
|
- zIndex: 10,
|
|
|
- }); //卫星图层
|
|
|
- this.tileLayer2 = new AMap.TileLayer({
|
|
|
- // 图块取图地址
|
|
|
- tileUrl:
|
|
|
- "http://t{0,1,2,3,4,5,6,7}.tianditu.gov.cn/DataServer?T=cta_w&tk=888bc7de1a5f14aa1b335b02e558d9b3&x=[x]&y=[y]&l=[z]",
|
|
|
- zIndex: 101,
|
|
|
- });
|
|
|
- this.map.add(this.tileLayer1);
|
|
|
- // this.map.add(this.tileLayer2);
|
|
|
- this.getEquipList();
|
|
|
- },
|
|
|
- changeMapType(val){
|
|
|
- if(val==0){
|
|
|
- this.tileLayer1.hide()
|
|
|
- this.tileLayer2.hide()
|
|
|
- }else{
|
|
|
- this.tileLayer1.show()
|
|
|
- this.tileLayer2.show()
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- iconFormat(equip_ip, item) {
|
|
|
- switch (equip_ip + "") {
|
|
|
- case "2":
|
|
|
- item.icon = require("@/assets/images/home/mapView/scd.png");
|
|
|
- break;
|
|
|
- case "3":
|
|
|
- item.icon = require("@/assets/images/home/mapView/cbd.png");
|
|
|
- break;
|
|
|
- case "4":
|
|
|
- item.icon = require("@/assets/images/home/mapView/xyq.png");
|
|
|
- break;
|
|
|
- case "5":
|
|
|
- item.icon = require("@/assets/images/home/mapView/qxz.png");
|
|
|
- break;
|
|
|
- case "6":
|
|
|
- item.icon = require("@/assets/images/home/mapView/jk.png");
|
|
|
- break;
|
|
|
- case "7":
|
|
|
- item.icon = require("@/assets/images/home/mapView/bzy.png");
|
|
|
- break;
|
|
|
- case "9":
|
|
|
- item.icon = require("@/assets/images/home/mapView/tccb.png");
|
|
|
- break;
|
|
|
- }
|
|
|
+
|
|
|
+ $('<div id="loadingTip">加载数据，请稍候...</div>').appendTo(document.body);
|
|
|
+ $.get('https://a.amap.com/amap-ui/static/data/10w.txt', function(csv) {
|
|
|
+
|
|
|
+ $('#loadingTip').remove();
|
|
|
+
|
|
|
+ // var data = [
|
|
|
+ // "113.665412,34.757975",
|
|
|
+ // "113.671767,34.815528",
|
|
|
+ // "113.671867,34.825528",
|
|
|
+ // "113.735978,34.728131",
|
|
|
+ // "120.412618,36.382612",
|
|
|
+ // "112.985037,23.15046",
|
|
|
+ // "126.687123,45.787618"
|
|
|
+ // ]
|
|
|
+ var data = csv.split('\n').slice(0,1000);
|
|
|
+ // that.data = data
|
|
|
+ distCluster.setData(that.data);
|
|
|
+ });
|
|
|
},
|
|
|
getEquipList() {
|
|
|
- this.layer = new AMap.LabelsLayer({
|
|
|
- zooms: [3, 20],
|
|
|
- zIndex: 1000,
|
|
|
- collision: false,
|
|
|
- allowCollision: false,
|
|
|
- });
|
|
|
let uid = sessionStorage.getItem("myuid");
|
|
|
this.$axios({
|
|
|
method: "POST",
|
|
|
@@ -223,113 +265,198 @@ export default {
|
|
|
})
|
|
|
}).then(res => {
|
|
|
if (res.data.message == ""){
|
|
|
- var data = res.data.data.user_project;
|
|
|
- this.equipListCurr = data.map((item) => {
|
|
|
- if (item.gps == 1) {
|
|
|
- //GPS
|
|
|
- item.lnglat = wgs84togcj02(item.lng, item.lat);
|
|
|
- }
|
|
|
- item.position=[item.lnglat[0],item.lnglat[1]]
|
|
|
- item.text={
|
|
|
- content: item.projectname,
|
|
|
- direction: 'bottom',
|
|
|
- offset: [-20, -5],
|
|
|
- style: {
|
|
|
- // 字体大小
|
|
|
- fontSize: 16,
|
|
|
- // 字体颜色
|
|
|
- fillColor: '#ff0000',
|
|
|
- // 描边颜色
|
|
|
- strokeColor: '#ff0000',
|
|
|
- // 描边宽度
|
|
|
- strokeWidth: 1,
|
|
|
- }
|
|
|
- }
|
|
|
- item.extData={
|
|
|
- uid:item.uid
|
|
|
- }
|
|
|
- item.icon=this.icon
|
|
|
- return item;
|
|
|
-
|
|
|
- });
|
|
|
-
|
|
|
- this.equipListCurr.forEach((item)=>{
|
|
|
- var labelMarker = new AMap.LabelMarker(item);
|
|
|
- labelMarker.on("click", (e) => {
|
|
|
- this.equipMarkerClick(e.target.getExtData().uid);
|
|
|
- });
|
|
|
- this.markers.push(labelMarker);
|
|
|
- })
|
|
|
-
|
|
|
- // 将 marker 添加到图层
|
|
|
- this.layer.add(this.markers);
|
|
|
- this.map.add(this.layer);
|
|
|
- // this.massMarks.setMap(this.map);
|
|
|
- // this.massMarks.on("click", (e) => {
|
|
|
- // this.equipMarkerClick(e.data);
|
|
|
- // });
|
|
|
+ this.data = []
|
|
|
+ var data = res.data.data.user_project;
|
|
|
+ data.forEach((item,index)=>{
|
|
|
+ this.data.push(item.lnglat[0]+','+item.lnglat[1])
|
|
|
+ })
|
|
|
+ this.$nextTick(()=>{
|
|
|
+ this.initMap()
|
|
|
+ })
|
|
|
} else {
|
|
|
this.$message.error(res.data.message);
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
- equipMarkerClick(uid) {
|
|
|
- this.$store.commit('setUserId',uid)
|
|
|
- this.$router.push('page1')
|
|
|
+ districtFun(){
|
|
|
+ this.map = new AMap.Map('container', {
|
|
|
+ resizeEnable: true,
|
|
|
+ center: [116.30946, 39.937629],
|
|
|
+ zoom: 3
|
|
|
+ });
|
|
|
+ //行政区划查询
|
|
|
+ var opts = {
|
|
|
+ subdistrict: 1, //返回下一级行政区
|
|
|
+ showbiz:false //最后一级返回街道信息
|
|
|
+ };
|
|
|
+ this.district = new AMap.DistrictSearch(opts);//注意：需要使用插件同步下发功能才能这样直接使用
|
|
|
+ this.district.search('中国', (status, result)=>{
|
|
|
+ if(status=='complete'){
|
|
|
+ this.getData(result.districtList[0],'country');
|
|
|
+ }
|
|
|
+ });
|
|
|
},
|
|
|
+ getData(data,level) {
|
|
|
+ console.log(data);
|
|
|
+
|
|
|
+ var bounds = data.boundaries;
|
|
|
+ if (bounds) {
|
|
|
+ for (var i = 0, l = bounds.length; i < l; i++) {
|
|
|
+ // var polygon = new AMap.Polygon({
|
|
|
+ // map: this.map,
|
|
|
+ // strokeWeight: 2,
|
|
|
+ // strokeColor: 'rgba(78,110,242,1)',
|
|
|
+ // fillColor: 'rgba(78,110,242,1)',
|
|
|
+ // fillOpacity: 0.2,
|
|
|
+ // path: bounds[i]
|
|
|
+ // });
|
|
|
+ var polygon = new AMap.Polygon({
|
|
|
+ map: this.map,
|
|
|
+ strokeWeight: 2,
|
|
|
+ strokeColor: 'red',
|
|
|
+ fillColor: 'red',
|
|
|
+ fillOpacity: 0.2,
|
|
|
+ path: bounds[i]
|
|
|
+ });
|
|
|
+ this.polygons.push(polygon);
|
|
|
+ }
|
|
|
+ this.map.setFitView();//地图自适应
|
|
|
+ }
|
|
|
+ var subList = data.districtList;
|
|
|
+ //清空下一级别的下拉列表
|
|
|
+ if (level === 'country') {
|
|
|
+ console.log('country');
|
|
|
+
|
|
|
+ this.provinceList = subList;
|
|
|
+ this.cityList = []
|
|
|
+ this.districtList = [];
|
|
|
+ this.form.province=''
|
|
|
+ this.form.city=''
|
|
|
+ this.form.district=''
|
|
|
+ } else if (level === 'province') {
|
|
|
+ console.log('province');
|
|
|
+ this.cityList = subList;
|
|
|
+ this.districtList = [];
|
|
|
+ this.form.city=''
|
|
|
+ this.form.district=''
|
|
|
+ } else if (level === 'city') {
|
|
|
+ console.log('city');
|
|
|
+ this.districtList = subList;
|
|
|
+ this.form.district=''
|
|
|
+ }
|
|
|
|
|
|
- },
|
|
|
- //生命周期 - 创建完成（可以访问当前this实例）
|
|
|
- created() {},
|
|
|
- //生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
- mounted() {
|
|
|
- this.infoMap()
|
|
|
- },
|
|
|
- beforeCreate() {}, //生命周期 - 创建之前
|
|
|
- beforeMount() {}, //生命周期 - 挂载之前
|
|
|
- beforeUpdate() {}, //生命周期 - 更新之前
|
|
|
- updated() {
|
|
|
-
|
|
|
- }, //生命周期 - 更新之后
|
|
|
- beforeDestroy() {}, //生命周期 - 销毁之前
|
|
|
- destroyed() {}, //生命周期 - 销毁完成
|
|
|
- activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
-};
|
|
|
+ console.log(subList);
|
|
|
+ // if (subList) {
|
|
|
+ // var contentSub = new Option('--请选择--');
|
|
|
+ // var curlevel = subList[0].level;
|
|
|
+ // var curList = document.querySelector('#' + curlevel);
|
|
|
+ // curList.add(contentSub);
|
|
|
+ // for (var i = 0, l = subList.length; i < l; i++) {
|
|
|
+ // var name = subList[i].name;
|
|
|
+ // var levelSub = subList[i].level;
|
|
|
+ // var cityCode = subList[i].citycode;
|
|
|
+ // contentSub = new Option(name);
|
|
|
+ // contentSub.setAttribute("value", levelSub);
|
|
|
+ // contentSub.center = subList[i].center;
|
|
|
+ // contentSub.adcode = subList[i].adcode;
|
|
|
+ // curList.add(contentSub);
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+
|
|
|
+ },
|
|
|
+ search(levelSub) {
|
|
|
+ //清除地图上所有覆盖物
|
|
|
+ for (var i = 0, l = this.polygons.length; i < l; i++) {
|
|
|
+ this.polygons[i].setMap(null);
|
|
|
+ }
|
|
|
+
|
|
|
+ if(levelSub == 'province'){
|
|
|
+ var keyword = this.form.province; //关键字
|
|
|
+ if(!keyword){
|
|
|
+ this.cityList = []
|
|
|
+ this.districtList = [];
|
|
|
+ this.form.city=''
|
|
|
+ this.form.district=''
|
|
|
+ return
|
|
|
+ }
|
|
|
+ }else if(levelSub == 'city'){
|
|
|
+ var keyword = this.form.city; //关键字
|
|
|
+ if(!keyword){
|
|
|
+ this.districtList = [];
|
|
|
+ this.form.district=''
|
|
|
+ return
|
|
|
+ }
|
|
|
+ }else if(levelSub == 'district'){
|
|
|
+ var keyword = this.form.district; //关键字
|
|
|
+ if(!keyword){
|
|
|
+ return
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ this.district.setLevel(levelSub); //行政区级别
|
|
|
+ this.district.setExtensions('all');
|
|
|
+ //行政区查询
|
|
|
+ //按照adcode进行查询可以保证数据返回的唯一性
|
|
|
+ this.district.search(keyword,(status, result)=>{
|
|
|
+ if(status === 'complete'){
|
|
|
+ this.getData(result.districtList[0],levelSub);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+},
|
|
|
+//生命周期 - 创建完成（可以访问当前this实例）
|
|
|
+created() {
|
|
|
+
|
|
|
+},
|
|
|
+//生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
+mounted() {
|
|
|
+ this.getEquipList()
|
|
|
+ // setTimeout(()=>{
|
|
|
+ this.districtFun()
|
|
|
+ // },3000)
|
|
|
+},
|
|
|
+beforeCreate() {}, //生命周期 - 创建之前
|
|
|
+beforeMount() {}, //生命周期 - 挂载之前
|
|
|
+beforeUpdate() {}, //生命周期 - 更新之前
|
|
|
+updated() {}, //生命周期 - 更新之后
|
|
|
+beforeDestroy() {}, //生命周期 - 销毁之前
|
|
|
+destroyed() {}, //生命周期 - 销毁完成
|
|
|
+activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
+}
|
|
|
</script>
|
|
|
-<style scoped lang="less">
|
|
|
-.inner{
|
|
|
+<style scoped lang='less'>
|
|
|
+.map,#container{
|
|
|
+ width: 100%;
|
|
|
height: 100%;
|
|
|
- position: relative;
|
|
|
- .mapCover{
|
|
|
- height: 100%;
|
|
|
- #map{
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
+}
|
|
|
+.leftNavBox{
|
|
|
+ position: absolute;
|
|
|
+ left: 100px;
|
|
|
+ top: 160px;
|
|
|
+ bottom:0;
|
|
|
+ /deep/.el-select{
|
|
|
+ width: 1.4rem;
|
|
|
}
|
|
|
- .mapTypebox{
|
|
|
- position: absolute;
|
|
|
- right: 20px;
|
|
|
- top:30px;
|
|
|
- background: #fff;
|
|
|
- padding: 5px;
|
|
|
- border-radius: 5px;
|
|
|
+ .listBox{
|
|
|
+ width: 4.25rem;
|
|
|
+ height: 90%;
|
|
|
+ margin-top: 16px;
|
|
|
+ border-radius: 6px;
|
|
|
+ background: rgba(255,255,255,.58);
|
|
|
+ box-shadow: 0px 3px 9px 0px #a7a7a7;
|
|
|
+ .projectSearch{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: .15rem;
|
|
|
+ background: #182037;
|
|
|
+ color: #fff;
|
|
|
+ font-size: .175rem;
|
|
|
+ border-radius: 6px 6px 0 0;
|
|
|
+ /deep/.el-input{
|
|
|
+ width: 2.5rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-// 标注点提示文本
|
|
|
-/deep/.amap-marker-label{
|
|
|
- background: transparent;
|
|
|
- border: none;
|
|
|
- color: red;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 700;
|
|
|
- text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0;
|
|
|
-}
|
|
|
-/deep/.el-radio__input.is-checked .el-radio__inner{
|
|
|
- border-color: #0195ff;
|
|
|
- background: #0195ff;
|
|
|
-}
|
|
|
-/deep/.el-radio__input.is-checked + .el-radio__label {
|
|
|
- color: #0195ff;
|
|
|
-}
|
|
|
</style>
|
