位置选择

zengh

2021-07-20 eb6374fd3670ac6fec2725e5f3ccb708ea76f22c

 src/components/map/main.vue

@@ -7,18 +7,18 @@
 * @LastEditTime: 2021-04-24 11:59:43
-->
<template>
    <div id="map"
         style="height: 100%"></div>
  <div id="map"
       style="height: 100%"></div>
</template>
<script>
import OLCesium from 'olcs/OLCesium.js'
import 'ol/ol.css'
import OlView from 'ol/View.js'
import XYZ from 'ol/source/XYZ'
import OlLayerTile from 'ol/layer/Tile.js'
import OlMap from 'ol/Map.js'
  import OLCesium from 'olcs/OLCesium.js'
  import 'ol/ol.css'
  import OlView from 'ol/View.js'
  import XYZ from 'ol/source/XYZ'
  import OlLayerTile from 'ol/layer/Tile.js'
  import OlMap from 'ol/Map.js'

import {
  import {
    // eslint-disable-next-line no-unused-vars
    defaults as OlControlDefaults,
    defaults,
@@ -42,167 +42,193 @@
    ZoomToExtent,
    Rotate

} from 'ol/control.js'
  } from 'ol/control.js'

import VectorLayer from 'ol/layer/Vector'
import VectorSource from 'ol/source/Vector'
  import VectorLayer from 'ol/layer/Vector'
  import VectorSource from 'ol/source/Vector'

import Feature from 'ol/Feature.js'
import Point from 'ol/geom/Point.js'
import LineString from 'ol/geom/LineString.js'
import { Icon, Style, Fill, Stroke } from 'ol/style.js'
  import Feature from 'ol/Feature.js'
  import Point from 'ol/geom/Point.js'
  import LineString from 'ol/geom/LineString.js'
  import {Icon, Style, Fill, Stroke} from 'ol/style.js'

export default {
  export default {
    name: 'Map',
    data () {
        return {
            gunAddlayer: new VectorLayer({ // 图标图层
                zIndex: 22,
                source: new VectorSource()
            }),
            peopleAddlayer: new VectorLayer({ // 图标图层
                zIndex: 22,
                source: new VectorSource()
            }),
            carAddlayer: new VectorLayer({ // 图标图层
                zIndex: 22,
                source: new VectorSource()
            }),
            peopleLineAddlayer: new VectorLayer({ // 图标图层
                zIndex: 22,
                source: new VectorSource()
            }),
        }
    data() {
      return {
        gunAddlayer: new VectorLayer({ // 图标图层
          zIndex: 22,
          source: new VectorSource()
        }),
        peopleAddlayer: new VectorLayer({ // 图标图层
          zIndex: 22,
          source: new VectorSource()
        }),
        carAddlayer: new VectorLayer({ // 图标图层
          zIndex: 22,
          source: new VectorSource()
        }),
        peopleLineAddlayer: new VectorLayer({ // 图标图层
          zIndex: 22,
          source: new VectorSource()
        }),
      }
    },
    mounted () {
        const ol2d = new OlMap({
            layers: [
                new OlLayerTile({
                    zIndex: 4,
                    title: '影像',
                    source: new XYZ({
                        url: 'http://t3.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0' // 行政区划
                    })
                }),
                new OlLayerTile({
                    zIndex: 5,
                    title: '道路+中文注记',
                    source: new XYZ({
                        url: 'http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0' // 注记
                    })
                })
            ],

            // 注意地图控件的写法
            controls: defaults().extend([
                // new FullScreen(),
                // new ScaleLine(),
                // new MousePosition(),
                // new Rotate(),
                // new Attribution()
            ]),
            target: 'map',
            view: new OlView({
                center: [0, 0],
                zoom: 2,
                projection: 'EPSG:4326'
    mounted() {
      const ol2d = new OlMap({
        layers: [
          new OlLayerTile({
            zIndex: 4,
            title: '影像',
            source: new XYZ({
              url: 'https://webmap-tile.sf-express.com/MapTileService/rt?fetchtype=static&x={x}&y={y}&z={z}&project=sfmap&pic_size=256&pic_type=png8&data_name=361100&data_format=merged-dat&data_type=normal' // 行政区划
            })
          }),
          // new OlLayerTile({
          //   zIndex: 5,
          //   title: '道路+中文注记',
          //   source: new XYZ({
          //     url: 'http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0' // 注记
          //   })
          // })
        ],

        // 注意地图控件的写法
        controls: defaults().extend([
          // new FullScreen(),
          // new ScaleLine(),
          // new MousePosition(),
          // new Rotate(),
          // new Attribution()
        ]),
        target: 'map',
        view: new OlView({
          center: [0, 0],
          zoom: 2,
          projection: 'EPSG:4326'
        })
        window.ol2d = ol2d
      })
      window.ol2d = ol2d

        var view = ol2d.getView()
      var view = ol2d.getView()

        view.setCenter([115.85883507433789, 28.708432053474827])
      // view.setCenter([115.85883507433789, 28.708432053474827])
      //
      // view.setZoom(13)

        view.setZoom(13)
      const ol3d = new OLCesium({map: window.ol2d})
      window.ol3d = ol3d

        const ol3d = new OLCesium({ map: window.ol2d })
        window.ol3d = ol3d

        ol2d.addLayer(this.gunAddlayer)
        ol2d.addLayer(this.peopleAddlayer)
        ol2d.addLayer(this.carAddlayer)
        ol2d.addLayer(this.peopleLineAddlayer)
        this.addLines()
      ol2d.addLayer(this.gunAddlayer)
      ol2d.addLayer(this.peopleAddlayer)
      ol2d.addLayer(this.carAddlayer)
      ol2d.addLayer(this.peopleLineAddlayer)
      // this.addLines()
    },
    methods: {
        init3D (val) {
            window.ol3d.setEnabled(val)
        },
        addEntitys (item, icon, scale, name, type) {
            const iconFeature = new Feature({
                geometry: new Point([Number(item.LGTD), Number(item.LTTD)]),
                name: name,
                attributes: item
            })
      init3D(val) {
        window.ol3d.setEnabled(val)
      },
      addEntitys(item, icon, scale, name, type) {
        const iconFeature = new Feature({
          geometry: new Point([Number(item.LGTD), Number(item.LTTD)]),
          name: name,
          attributes: item
        })

            const iconStyle = new Style({
                // text: new Text({ // 字体, 未成功, 浪费许多时间
                //   font: 'Normal ' + 12 + 'px ' + 'iconfont',
                //   text: "\e645",
                //   fill: new Fill({ color: "green" }),
                // }),
        const iconStyle = new Style({
          // text: new Text({ // 字体, 未成功, 浪费许多时间
          //   font: 'Normal ' + 12 + 'px ' + 'iconfont',
          //   text: "\e645",
          //   fill: new Fill({ color: "green" }),
          // }),

                image: new Icon({
                    scale: scale,
                    opacity: 1,
                    src: icon
                    // src: require('../../assets/Mark.png')
                })
          image: new Icon({
            scale: scale,
            opacity: 1,
            src: icon
            // src: require('../../assets/Mark.png')
          })

                // new CircleStyle({ // 普通样式
                //   radius: 6,
                //   fill: new Fill({
                //     color: 'rgba(200, 155, 155, 0.8)'
                //   }),
                //   stroke: new Stroke({
                //     color: 'black',
                //     width: 0.3,
                //   })
                // }),
            })
          // new CircleStyle({ // 普通样式
          //   radius: 6,
          //   fill: new Fill({
          //     color: 'rgba(200, 155, 155, 0.8)'
          //   }),
          //   stroke: new Stroke({
          //     color: 'black',
          //     width: 0.3,
          //   })
          // }),
        })

            iconFeature.setStyle(iconStyle)
        iconFeature.setStyle(iconStyle)

            this[type].getSource().addFeature(iconFeature)
        },
        this[type].getSource().addFeature(iconFeature)
      },

        addLines () {
      addLines(ringId) {
        var that = this;
        if (ringId != null && ringId != "") {
          $.ajax({
            url: "api/routeIn/routein/selectList",
            type: "post",
            data: {
              "id": ringId
            },
            dataType: 'JSON',
            success: function (data) {
              that.peopleLineAddlayer.getSource().clear()
              var entityData = '';
              var entityArr = [];
              entityData = data.data[0].routeInfo.match(/\(([^)]*)\)/);

            // 点坐标
            var lineCoords = [
              [115.87471898408013, 28.720924466928977],
              [115.87471898408013, 28.724163802651635],
              [115.87401037939081, 28.72456871961697],
              [115.87147964835748, 28.7246699488583],
              [115.86925260504815, 28.7246699488583],
              [115.86621572780817, 28.7246699488583],
              [115.8635837675335, 28.72578347051296]
              ];// 线里点的集合
              // 此时result＝["(dsfasjfj3124123)", "dsfasjfj3124123"];
              if (entityData && entityData != '') {
                entityData = entityData[1].split(',');

            // 要素
            // var lineCoords = [[featureInfo.lineString[0][0],featureInfo.lineString[0][0]],[featureInfo.lineString(0),featureInfo.lineString(0)]];
            var feature_LineString = new Feature({
                for (var j = 0; j < entityData.length; j++) {
                  entityArr.push([Number(entityData[j].split(' ')[0]), Number(entityData[j].split(' ')[1])]);
                }

              }


              var lineCoords = entityArr;// 线里点的集合

              var view = ol2d.getView()
              view.setCenter([lineCoords[Math.ceil(entityArr.length / 2 )][0], lineCoords[Math.ceil(entityArr.length / 2 )][1]])
              view.setZoom(14.5)

              // 要素
              // var lineCoords = [[featureInfo.lineString[0][0],featureInfo.lineString[0][0]],[featureInfo.lineString(0),featureInfo.lineString(0)]];
              var feature_LineString = new Feature({
                geometry: new LineString(lineCoords)
            });
              });


            feature_LineString.setStyle(new Style({
              feature_LineString.setStyle(new Style({
                //填充色
                fill: new Fill({
                    color: 'rgba(255, 255, 255, 0.2)'
                  color: 'rgba(255, 255, 255, 0.2)'
                }),
                //边线颜色
                stroke: new Stroke({
                    color: 'rgb(252, 94, 32)',
                    width: 5
                  color: 'rgb(252, 94, 32)',
                  width: 5
                })
            }))


            this.peopleLineAddlayer.getSource().addFeature(feature_LineString)

              }))
              that.peopleLineAddlayer.getSource().addFeature(feature_LineString)
            },
            error: function (data) {
              // 请求失败函数
              console.log(data);
            }
          });
        }


      }
    }
}
  }
</script>