新疆企业数据地图标注

###新疆企业数据地图标注

```
# 企业数据地图可视化 v1.0

## 项目概述
在新疆行政区划地图上实现企业数据可视化标注系统，支持自定义图标标记和关键数据展示，要求具备完整的地理信息展示能力和数据交互功能。

## 🎨 视觉设计标准

### 1. 地图基础规范
- **底图样式**：新疆行政区划矢量地图（浅色背景+深色边界）
- **坐标系统**：WGS84经纬度坐标系
- **缩放级别**：初始显示全疆范围，支持5-15级缩放

### 2. 企业标记系统
- **图标规范**：
  - 尺寸：32x32px（基础尺寸）
  - 格式：SVG矢量图标
  - 状态：默认/悬停/选中三种状态
- **数据展示**：
  ```javascript
  // 标记数据结构
  {
    coordinates: [经度, 纬度],
    icon: '企业图标URL',
    properties: {
      企业名称: 'xxx',
      年产量: 'xxx吨',
      加工量: 'xxx吨',
      // 其他业务数据...
    }
  }
  ```

### 3. 信息窗口设计
```css
/* 信息弹窗样式 */
.info-window {
  min-width: 280px;
  background: rgba(255,255,255,0.95);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  padding: 16px;
}

.info-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.info-table {
  width: 100%;
  border-collapse: collapse;
}

.info-table td {
  padding: 4px 8px;
  border-bottom: 1px solid #eee;
}
```

## 📊 数据可视化标准

### 1. 核心实现技术
```html
<!-- 必需依赖 -->
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
<script src="https://unpkg.com/leaflet.markercluster@1.5.3/dist/leaflet.markercluster.js"></script>

<!-- 新疆GeoJSON数据 -->
<script src="/path/to/xinjiang.geojson"></script>
```

### 2. 地图初始化
```javascript
// 基础地图配置
const map = L.map('map-container', {
  center: [42.8, 85.6],  // 新疆中心坐标
  zoom: 6,
  maxBounds: [[34.5, 73.5], [49.5, 96.5]]  // 新疆边界
});

// 添加新疆行政区划层
L.geoJSON(xinjiangData, {
  style: {
    fillColor: '#f8f9fa',
    weight: 1,
    opacity: 1,
    color: '#6c757d',
    fillOpacity: 0.7
  }
}).addTo(map);
```

### 3. 企业标记实现
```javascript
// 自定义图标
const customIcon = L.icon({
  iconUrl: 'path/to/icon.png',
  iconSize: [32, 32],
  iconAnchor: [16, 32]
});

// 企业数据标记
enterpriseData.forEach(enterprise => {
  const marker = L.marker(
    enterprise.coordinates, 
    { icon: customIcon }
  ).addTo(map);
  
  // 信息窗口内容
  const popupContent = `
    <div class="info-window">
      <div class="info-title">${enterprise.properties.企业名称}</div>
      <table class="info-table">
        <tr><td>年产量</td><td>${enterprise.properties.年产量}吨</td></tr>
        <tr><td>加工量</td><td>${enterprise.properties.加工量}吨</td></tr>
      </table>
    </div>
  `;
  
  marker.bindPopup(popupContent);
});

// 集群模式支持
const markers = L.markerClusterGroup();
// ...添加所有标记到集群
map.addLayer(markers);
```

## 🎭 交互功能标准

### 1. 核心交互功能
- **基础交互**：
  - 点击标记显示企业详情
  - 鼠标悬停显示企业名称
  - 双击聚焦到企业位置
- **地图控制**：
  - 缩放按钮控制
  - 全屏切换功能
  - 重置视图按钮

### 2. 筛选功能实现
```javascript
// 产量筛选器实现
function filterByProduction(minValue) {
  markers.eachLayer(marker => {
    const production = marker.feature.properties.年产量;
    if (production >= minValue) {
      marker.addTo(map);
    } else {
      map.removeLayer(marker);
    }
  });
}
```

## 📱 响应式设计要求

### 1. 多设备适配
- **桌面端**：完整功能+侧边栏
- **平板端**：简化控制面板
- **移动端**：全屏地图+浮动按钮

### 2. 触摸优化
- 增大点击区域
- 手势缩放支持
- 长按显示快速信息

## 🔧 代码质量标准

### 1. 推荐代码结构
```javascript
const EnterpriseMap = {
  // 配置
  config: {
    mapOptions: { /* 地图配置 */ },
    iconSettings: { /* 图标配置 */ }
  },
  
  // 初始化
  init() {
    this.initMap();
    this.loadData();
    this.setupControls();
  },
  
  // 数据加载
  loadData() {
    // 加载企业数据
  },
  
  // 交互系统
  setupInteractions() {
    // 绑定事件处理
  }
};
```

### 2. 性能优化
- 使用Web Worker处理大数据量
- 实现视口内渲染优化
- 添加加载状态指示器
```