代码编织梦想

1 引入mapbox-gl.js、mapbox-gl.css

2 vue中初始化地图

  import {getJson} from "./geojson/json"

 async initMap() {
// let baseurl = APPCONFIG.economicOperat.url;	//我这里配置的是supermap iServer 9D发布的地图
 let baseurl = 'http://iclient.supermap.io/iserver/services/map-china400/rest/maps/China';	//这里使用iclient官网上的地图
 let map = new mapboxgl.Map({
        container: 'map',	//div容器的id
        style: {
          "version": 8,
          "sources": {
            "raster-tiles": {
              //"attribution": 'supermap',
              "type": "raster",
              "tiles": [baseurl + '/zxyTileImage.png?z={z}&x={x}&y={y}'],
              "tileSize": 256,
            },
          },
          "layers": [{
            "id": "simple-tiles",
            "type": "raster",
            "source": "raster-tiles",
            "minzoom": 3,
            "maxzoom": 18,
          }]
        },
        center: [112.7872, 28.2131], //中心点配置
        zoom: 12 //当前缩放等级
        //默认倾斜角度-三维效果
        pitch: 45,
        //默认偏移角度
        bearing: 30
      });

      //底图倾斜角度;可以通过easeTo或flyTo 飞向目标点
      /* map.easeTo({
         center:[112.7872, 28.2131],
         pitch: 45,
         bearing: 30,
         //飞行速度
         speed:0.8
       });*/
 		window.BoxMap = map;
		//初始化底图完毕
       //待地图加载完毕执行建筑物面拉起效果
      setTimeout(this.addLayer,100);
}

3 加载geojson面数据,通过图层叠加拉起面数据


   async addLayer() {
		  let that = this;
	      //获取本地geojson数据,效率快
	      let geojson = getJson();
	      that.addBoxLayer(geojson);
      }

getJson() 是获取geojson里的数据方法,bm11.json在我的下载里

import geojson from './bm11'

var getJson = function () {
  return  geojson;
}

export {
  getJson
}

    async addBoxLayer(feature) {
      let that = this;

      if(BoxMap.getLayer('entity_layer')){
        BoxMap.removeLayer('entity_layer');
      };
      if(BoxMap.getLayer('entity_borders')){
        BoxMap.removeLayer('entity_borders');
      };

      feature.features.forEach(item => {
        let he = '';  //默认建筑物高度
      if (item.properties.height == "") {
        he = "5";
      }else {
        he = item.properties.height;
      }
      //模拟数据
      item.properties.pkid = parseInt(item.properties.xh);
      item.properties.height = parseInt(he);
      item.properties.base_height = parseInt(0);
    });

      if(BoxMap.getSource("states")){
        BoxMap.getSource("states").setData(feature)
      }else{
        BoxMap.addSource("states", {
          "type": "geojson",
          "data": feature
        });
      }



      BoxMap.addLayer({
        'id': 'entity_layer',
        'type': 'fill',
        'source': 'states',
        'type': 'fill-extrusion',
        'layout': {},
        'minzoom': 14,
        'paint': {
          'fill-extrusion-color': '#123984',
          // use an 'interpolate' expression to add a smooth transition effect to the
          // buildings as the user zooms in
          // 'fill-extrusion-height': ['get', 'height'],
          // 'fill-extrusion-base': ['get', 'base_height'],
          'fill-extrusion-height': [
            "interpolate", ["linear"], ["zoom"],
            14, 0,
            14.05, ["get", "height"]
          ],
          'fill-extrusion-base': [
            "interpolate", ["linear"], ["zoom"],
            14, 0,
            14.05, ["get", "base_height"]
          ],
          'fill-extrusion-opacity': 1
        }
      });
      BoxMap.addLayer({
        'id': 'entity_borders',
        'type': 'fill',
        'source': 'states',
        'type': 'fill-extrusion',
        'layout': {},
        'minzoom': 14,
        'paint': {
          'fill-extrusion-color': '#b8c9dd',
          // use an 'interpolate' expression to add a smooth transition effect to the
          // buildings as the user zooms in
          'fill-extrusion-height': ['get', 'height'],
          'fill-extrusion-base': ['get', 'base_height'],
          'fill-extrusion-opacity': 1
        },
        "filter": ["in", "pkid", ""]
      });

      let popups = new mapboxgl.Popup({
        closeButton: false,
        closeOnClick: false
      });

      BoxMap.on("mousemove", "entity_layer", function(e) {
        BoxMap.getCanvas().style.cursor = 'pointer';
        let feature = e.features[0];

        let relatedFeatures = BoxMap.querySourceFeatures('states', {
          filter: ['in', 'pkid', feature.properties.pkid]
        });

        let filter = relatedFeatures.reduce(function(memo, feature) {
          memo.push(feature.properties.pkid);
          return memo;
        }, ['in', 'pkid']);

        BoxMap.setFilter("entity_borders", filter);

        //建筑物弹窗信息
        let xmmc = "";
        if (feature.properties.XMMC.length > 35) {
          let a1 = feature.properties.XMMC.substring(0,35);
          let a2 = feature.properties.XMMC.substring(35,feature.properties.XMMC.length);
          xmmc = "<h1 style='color: white'><a style='color: orange'>" + a1 + "<br>" + a2+ " ("+ feature.properties.JZWMC + ")</a></h1>";
        } else {
          xmmc = "<h1 style='color: white'><a style='color: orange'>" + feature.properties.XMMC + " ("+ feature.properties.JZWMC + ")</a></h1>";
        }
        //建筑物弹窗信息
        let html = xmmc +
          "<h2 style='color: white'> 建筑物用途:<a style='color: orange'>"+feature.properties.JZWJBYT+"</a> </h2>" +
          "<h2 style='color: white'> 建筑物高度:<a style='color: orange'>" +  feature.properties.JZWGD + " 米</a></h2>" +
          "<h2 style='color: white'> 维修单位:<a style='color: orange'>"+feature.properties.WXDW+"</a> </h2>" +
          "<h2 style='color: white'> 物业公司:<a style='color: orange'>" +  feature.properties.WYGSMC + "</a></h2>" +
          "<h2 style='color: white'> 坐落:<a style='color: orange'>"+feature.properties.ZL+"</a> </h2>";

        popups.setLngLat([feature.properties.X, feature.properties.Y])
          .setHTML(html)
          .addTo(BoxMap);

      });

      BoxMap.on("mouseleave", "entity_layer", function() {
        BoxMap.getCanvas().style.cursor = '';
        BoxMap.setFilter('entity_borders', ['in', 'pkid', '']);
        popups.remove();

      });

    },

4 效果图
三维白模

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/sun_falls/article/details/94025576

cesiumjs加载geojson+建筑物分层设色_lala_shine的博客-爱代码爱编程

需求:噪声管理项目,在项目的实际开发过程中,需要展示某一个地方的三维建筑物分布情况,并且一个建筑物要根据楼层不同高度设置不同的颜色,决定使用基于地图的三维框架cesium来实现。。在cesium官网上面,有通过加载geojs

mapboxgl根据geojson点线面创建及定位操作_make_gis_simple的博客-爱代码爱编程

mapboxgl的开发很方便,图层创建、图层的要素更新、图层要素点击、要素信息框、定位到要素、地图鼠标样式等操作很多,总结了一些代码,共享给大家。 关键是:map.addSource、 map.addLayer、设置layer的paint、mapboxgl.Popup、map.fitBounds、map.flyTo、map.getCanvas().sty

GIS开发:推荐Mapbox gl解决方案-爱代码爱编程

在二维地图的开发中,实现类似于百度、高德地图那样加载简体的模型,使用mapbox gl是一个比较好的解决方案。 https://docs.mapbox.com/mapbox-gl-js/api/ 类似于国内的地图,在开发时,需要先以开发者的身份,申请token,才能调用官网的数据服务等其他接口。当然,库是JavaScript的,意味着可以将源码都下载下来,

vue+mapboxgl 鹰眼展示-爱代码爱编程

一、实现效果 话不多说直接上图,查看了 这个博主地址,https://blog.csdn.net/u014529917/article/details/62216130  他是用openlayer 写的 二、什么是鹰眼 1、首先要有两个地图 大图,小图,鹰眼范围图(简称鹰眼) 2、大图移动,放大缩小的时候要相应的放大和缩小 3、小图不动,鹰眼

vue + mapbox 通过genjson数据加载3D建筑模型-爱代码爱编程

1.代码  <template> <div> <div id="map"></div> </div> </template> <script> import mapboxgl from 'mapbox-gl' // import * as THRE

mapbox引用json文件html,Mapbox GL JS和GeoJSON的作为外部文件-爱代码爱编程

$(function() { mapboxgl.accessToken = 'pk.###'; var map = new mapboxgl.Map({ container: 'map-global', style: '..' }); var geojson = { "type": "FeatureCollection", "featu

vue中,应用mapbox地图(二)03-mapbox-gl 地图实例——标准步骤之3D立体效果-init方法-爱代码爱编程

vue中,应用mapbox地图(二)03-mapbox-gl 地图实例——标准步骤之3D立体效果-init方法 一、获取token mapbox官网注册账号 个人中心account页面,获取accessToken 二、安装并引入使用 npm install --save mapbox-gl main.js页面 引入mapboxgl impor

mapbox+deck.gl加载倾斜摄影模型3dtiles-爱代码爱编程

一、背景 做三维WebGIS开发的朋友们都知道,我们加载倾斜摄影模型,一般使用cesium加载3dtiles格式的数据很简单,官网和网上都有很多例子,这里也不再详细赘述。但是在使用cesium场景中我们会遇到这样一个问题,在加载整个球的时候其实是影响了性能的,在加载局部小场景的时候我们是不需要加载整个地球的,例如我们在做智慧园区的项目时候,基本上只关注园

mapbox实现3d建筑物分层效果(类似单体化)_zyy_pipi的博客-爱代码爱编程

mapbox实现3d建筑物分层效果 文章目录 mapbox实现3d建筑物分层效果前言一、效果展示二、实现过程1.数据格式相关示例2.可视化代码 前言 大家再使用mapboxgl做前端webgis可视

mapbox-gl添加threejs几何体_jackeroo1997的博客-爱代码爱编程

文章目录 前言为什么使用threebox代码示例总结 前言 最近在研究threejs和mapbox的结合,花了一天多的时间,结合threebox这个mapbox的三维库,给mapbox中创建自定义图层,添

mapbox添加fbx的3d模型-爱代码爱编程

// 初始化地图; const initMap = () => { mapboxgl.accessToken = "你的token"; let myMap: any; let camera: any